/* Pricing plan ladder, /pricing.
 *
 * Plain CSS on purpose. public/assets/css/app.css is a FROZEN marketing
 * Tailwind build that nothing in this repo regenerates, so a new arbitrary
 * utility written into a site view renders as nothing at all, silently.
 * Served straight off disk; asset_v() busts the cache on filemtime.
 *
 * Built to the house rules, and these are the numbers they fix:
 *   R36  one type scale (11/13/14/16/20/28/48, all already on the page),
 *        three radii (8 / 20 / pill), two elevations.
 *   R32  every control clears a 44px tap target. The old toggle was 36.
 *   R25  medallions float left of their copy and carry a border.
 *   R37  the billing control has a visible label, not just an aria-label.
 *   R15  hover always moves a border; R16 contrast never drops under it.
 *   R34  this section is PAPER, so it alternates against the tinted band above.
 *
 * The billing note is two <p> in ONE grid cell on purpose: the hidden one still
 * contributes height, so the slot is permanently as tall as the taller line and
 * the card cannot resize when the cycle switches. The price swaps as text with
 * tabular numerals so the digits do not change width either. An earlier version
 * used x-show on two separate notes and the whole card jumped on every click.
 */

/* One scale for the whole section: sizes 11/13/14/16/20/28/48, radii 8/20/pill,
   two elevations, 44px control floor. */
  .plans { position: relative; margin-top: -1px; }
  .plan-wrap { margin: 0 auto; max-width: 72rem; padding: 0 1rem; }

  /* R37: the billing control carries a VISIBLE label, not just aria-label */
  .plan-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .plan-ctl-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
  .plan-sw { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #d8dee9; border-radius: 999px; background: #fff; }
  /* R15 case 3: a surface on a light ground carries a VISIBLE resting border and
     changes its COLOR on hover. This was `transparent` at rest, which is the
     reserve-the-space trick R15 prescribes for header links and menu rows and
     NOT for a surface: the sweep reads it as a segmented control with no edge
     on white, and so does the eye. The resting hairline is the track's own
     color so the two do not argue, and the width never changes, so nothing
     moves a pixel when the pointer arrives. */
  .plan-sw button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid #d8dee9; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: #334155; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
  /* R15: hover always MOVES the border. R16: contrast never drops. */
  .plan-sw button:hover { border-color: #93b1f5; color: #0b1220; }
  .plan-sw button:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .3); }
  .plan-save { padding: 2px 8px; border: 1px solid #a7f3d0; border-radius: 999px; background: #ecfdf5; font-size: 11px; font-weight: 700; color: #047857; }
  /* The selected cycle. Solid brand fill, white label, and the pill inside it
     inverts too, so the active side is unmistakable at a glance rather than
     a subtle tint. */
  .plans[data-cycle="monthly"] .plan-sw button[data-cyc="monthly"],
  .plans[data-cycle="annual"]  .plan-sw button[data-cyc="annual"] {
    background: var(--brand); border-color: var(--brand-800); color: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04); }
  .plans[data-cycle="monthly"] .plan-sw button[data-cyc="monthly"]:hover,
  .plans[data-cycle="annual"]  .plan-sw button[data-cyc="annual"]:hover {
    background: var(--brand-800); border-color: #0b1220; color: #fff; }
  .plans[data-cycle="annual"] .plan-sw button[data-cyc="annual"] .plan-save {
    border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.22); color: #fff; }

  /* no-jump billing note: both lines share one grid cell, so the slot is
     permanently as tall as the taller line and the card cannot resize */
  .plan-notes { display: grid; }
  .plan-notes > p { grid-area: 1 / 1; margin: 0; font-size: 13px; line-height: 1.45; visibility: hidden; opacity: 0; transition: opacity .2s; }
  .plans[data-cycle="monthly"] .plan-notes > p[data-cyc="monthly"],
  .plans[data-cycle="annual"]  .plan-notes > p[data-cyc="annual"] { visibility: visible; opacity: 1; }

  /* R25: medallions float left of their copy and ALWAYS carry a border */
  .plan-med { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #dee8fc; border-radius: 8px; background: #f1f5fe; font-size: 13px; color: var(--brand-700); }
  .plan-cell { display: flex; align-items: center; gap: 10px; }
  .plan-cv { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .plan-ck { display: block; font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; }

  /* R41-shaped CTA: resting border, icon, 44px floor, real focus state */
  .plan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid #1d4ed8; border-radius: 8px; background: var(--brand); font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
  .plan-btn:hover { background: var(--brand-800); border-color: var(--brand-800); }
  .plan-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35); }
  .plan-btn--quiet { border-color: #d8dee9; background: #fff; color: #1e293b; }
  .plan-btn--quiet:hover { border-color: #93b1f5; background: #f1f5fe; color: var(--brand-800); }
  .plan-btn--full { width: 100%; }

  .plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 13px; }
  .plan-foot span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  .plan-fine { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
  .plan-fine sup { font-weight: 700; }

  /* Paper ground so it alternates against the tinted band above (R34), and a
     spec grid for the allowances instead of stacked rows (R2). */
  /* Dot grid across the whole section. Kept to an 8% brand tint: the foot and
     the footnote sit straight on this ground, so anything heavier starts
     eating their contrast (R16). Same 14px cell as the Enterprise strip, so
     the two read as one surface rather than two patterns. */
  .plans { padding: 36px 0 40px; border-top: 1px solid #e2e8f0;
    background:
      radial-gradient(rgba(var(--brand-rgb), .08) 1px, transparent 1px) 0 0 / 14px 14px,
      #fff; }
  .plan-ctl { justify-content: center; margin-bottom: 22px; }
  .plan-ctl-label { color: #64748b; }
  .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .plan-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .2s, box-shadow .2s; }
  .plan-card:hover { border-color: #93b1f5; box-shadow: 0 12px 32px -24px rgba(15,23,42,.3); }
  /* Business is the plan the ladder is built around, so it takes the dark blue
     ground and the dot grid, exactly like the Enterprise strip below. Those two
     are the only dark surfaces in the section and they match deliberately: the
     recommended plan and the roster sale read as the same family. Copy on it is
     white and #cbd5e1, tinted from the ground rather than gray. */
  .plan-card.is-feat { border-color: transparent; box-shadow: 0 12px 32px -24px rgba(15,23,42,.3);
    background:
      radial-gradient(rgba(147,180,255,.16) 1px, transparent 1px) 0 0 / 14px 14px,
      linear-gradient(140deg, #0b1220 0%, #111c33 55%, var(--brand-700) 180%); }
  .plan-card.is-feat:hover { border-color: #93b1f5; }
  .plan-card.is-feat .plan-name { color: #fff; }
  .plan-card.is-feat .plan-tag { border-color: #fff; background: #fff; color: #0b1220; }
  .plan-card.is-feat .plan-fig { color: #fff; }
  .plan-card.is-feat .plan-cv { color: #fff; }
  .plan-card.is-feat .plan-band { border-top-color: rgba(255,255,255,.18); color: #bbcff9; }
  .plan-card.is-feat .plan-med { border-color: rgba(255,255,255,.22); background: rgba(147,180,255,.16); color: #bbcff9; }
  .plan-card.is-feat .plan-blurb, .plan-card.is-feat .plan-per, .plan-card.is-feat .plan-ck { color: #cbd5e1; }
  .plan-card.is-feat .plan-notes > p { color: #cbd5e1; }
  .plan-card.is-feat .plan-ck sup { color: #93b1f5; }
  /* white CTA on the dark card, mirroring Enterprise */
  .plan-card.is-feat .plan-btn { border-color: #fff; background: #fff; color: #0b1220; }
  .plan-card.is-feat .plan-btn:hover { background: #dee8fc; border-color: #dee8fc; color: #0b1220; }
  .plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .plan-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #0b1220; white-space: nowrap; }
  .plan-tag { padding: 3px 9px; border: 1px solid #dee8fc; border-radius: 999px; background: #f1f5fe; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700); white-space: nowrap; }
  .plan-card.is-feat .plan-tag { border-color: var(--brand); background: var(--brand); color: #fff; }
  .plan-blurb { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #64748b; }
  .plan-price { margin-top: 14px; display: flex; align-items: flex-end; gap: 6px; }
  .plan-fig { font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: .9; color: #0b1220; font-variant-numeric: tabular-nums; }
  .plan-per { padding-bottom: 5px; font-size: 14px; font-weight: 500; color: #64748b; white-space: nowrap; }
  .plan-notes { margin-top: 6px; }
  .plan-notes > p { color: #64748b; }
  .plan-band { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #e2e8f0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #64748b; }
  .plan-spec { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .plan-cv { color: #0b1220; }
  .plan-ck { color: #64748b; }
  .plan-ck sup { color: var(--brand-700); }
  .plan-cta { margin-top: auto; padding-top: 18px; }
  .plan-foot { justify-content: center; margin-top: 20px; color: #64748b; }
  .plan-foot i { color: #16a34a; }
  .plan-fine { color: #64748b; text-align: center; }
  .plan-fine sup { color: var(--brand-700); }
  /* Enterprise sits on the dark blue ground, same gradient as the heroes and
     the portal band. It is the one block on this paper section that does, which
     is what separates "a fourth plan" from "a different kind of sale". */
  .plan-ent { margin-top: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 18px 22px;
    border: 1px solid transparent; border-radius: 20px; box-shadow: 0 12px 32px -24px rgba(15,23,42,.3);
    /* dot grid over the navy. Low alpha on purpose: the dots are texture,
       and anything stronger starts moving the contrast of the copy on top
       of them (R16). The pattern layer is part of background, so it is
       clipped by the radius for free and needs no overlay element. */
    background:
      radial-gradient(rgba(147,180,255,.16) 1px, transparent 1px) 0 0 / 14px 14px,
      linear-gradient(140deg, #0b1220 0%, #111c33 55%, var(--brand-700) 180%); }
  .plan-ent-h { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
  .plan-ent-p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: #cbd5e1; }
  /* medallion and the secondary action retune for the dark ground: the border
     stays (R25) and the hover still moves it without dropping contrast (R15/R16) */
  .plan-ent .plan-med { border-color: rgba(255,255,255,.22); background: rgba(147,180,255,.16); color: #bbcff9; }
  .plan-ent .plan-btn { border-color: #fff; background: #fff; color: #0b1220; }
  .plan-ent .plan-btn:hover { background: #dee8fc; border-color: #dee8fc; color: #0b1220; }
  .plan-ent .plan-btn--quiet { border-color: rgba(255,255,255,.45); background: transparent; color: #fff; }
  .plan-ent .plan-btn--quiet:hover { border-color: #fff; background: rgba(255,255,255,.14); color: #fff; }
  .plan-ent-acts { display: flex; gap: 10px; }
  @media (max-width: 1023px) { .plan-grid { grid-template-columns: 1fr; } .plan-ent { grid-template-columns: 1fr; } .plan-ent-acts { flex-wrap: wrap; } }


/* ---------------------------------------------------------------------------
 * What every plan includes, the dark band under the onboarding section.
 *
 * Same gradient, same orb, same grid overlay, same fourteen items, same words.
 * The tiles were 44px medallions inside p-5 cards over two columns, which ran
 * the section to 1147px. These are the same tiles at honest metrics.
 *
 * R15  every tile has a resting edge and the edge CHANGES on hover.
 * R2   two columns, so fourteen items fill seven complete rows with no hole.
 * R25  the medallion keeps its border; it floats left of the copy.
 * ------------------------------------------------------------------------ */

/* R5: every pair of sections gets a hairline, and an alternating ground is not
   enough on its own. A stone rule rather than a white-alpha one, because the
   section above is paper and alpha-on-dark would be invisible from that side. */
.wyg { position: relative; overflow: hidden; border-top: 1px solid rgba(214, 211, 209, .8); background: linear-gradient(135deg, #0b1220 0%, #111c33 52%, var(--brand-700) 165%); padding: 40px 0; }
.wyg-bg { position: absolute; inset: 0; pointer-events: none; }
.wyg-orb { position: absolute; top: -96px; left: 33%; width: 288px; height: 288px; border-radius: 999px; background: rgb(var(--brand-600-rgb) / .20); filter: blur(120px); }
/* Width and gutter come from the Blade wrapper's `mx-auto {{ $maxWidth }} px-4`. */
.wyg-wrap { position: relative; }

.wyg-note { margin-top: 22px; position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .05); padding: 14px 16px; }
.wyg-note-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); color: #fff; font-size: 15px; }
.wyg-note-txt { min-width: 0; flex: 1 1 320px; }
.wyg-note-txt b { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.wyg-note-txt p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: #cbd5e1; }
.wyg-note-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; background: rgba(255, 255, 255, .1); padding: 5px 12px; font-size: 12px; font-weight: 700; color: #bfdbfe; white-space: nowrap; }

.wyg-grid { margin-top: 12px; display: grid; gap: 8px; }
@media (min-width: 640px) { .wyg-grid { grid-template-columns: 1fr 1fr; } }
.wyg-item { display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px; background: rgba(255, 255, 255, .04); padding: 11px 13px; transition: border-color .2s, background .2s; }
.wyg-item:hover { border-color: rgb(var(--brand-400-rgb) / .5); background: rgba(255, 255, 255, .07); }
.wyg-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgb(var(--brand-400-rgb) / .12); color: #93c5fd; font-size: 12px; transition: background .2s, color .2s; }
.wyg-item:hover .wyg-ic { background: var(--brand); color: #fff; }
.wyg-b { min-width: 0; }
.wyg-lab { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #fff; }
.wyg-lab i { font-size: 10px; color: #34d399; }
.wyg-d { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: #94a3b8; }


/* ---------------------------------------------------------------------------
 * Pricing FAQ, the light band at the foot of the page.
 *
 * Six two-up cards with every answer always visible ran it to ~730px. It is
 * one stacked panel now, one answer open at a time, first one open so the
 * section never reads as a wall of closed rows.
 *
 * The ground carries a DOT field rather than the 50px line grid the dark bands
 * wear. No mask on it: masked to a radial fade it was invisible past the first
 * rows, which is the opposite of asking for a pattern. Uniform, low alpha, and
 * it reads across the whole band.
 *
 * R15 case 4: a row in a stacked list is ruled off from its neighbors on
 * hover AND when it is the open one, never filled only.
 * R32  every row clears a 44px tap target.
 * ------------------------------------------------------------------------ */

.fq { position: relative; overflow: hidden; border-top: 1px solid rgba(214, 211, 209, .8); background: #f8fafc; padding: 36px 0; }
.fq-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(37, 99, 235, .22) 1.2px, transparent 1.2px); background-size: 22px 22px; }
/* Width and gutter come from the Blade wrapper's `mx-auto {{ $maxWidth }} px-4`. */
.fq-wrap { position: relative; }

.fq-list { margin-top: 16px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.fq-row + .fq-row { border-top: 1px solid #e2e8f0; }

.fq-btn { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 11px; border: 0; border-left: 2px solid transparent; background: transparent; padding: 10px 15px; font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.fq-btn:hover { background: #f8fafc; border-left-color: var(--brand-300); }
.fq-btn[aria-expanded="true"] { background: var(--brand-50); border-left-color: var(--brand); }
.fq-btn:focus-visible { outline: none; border-left-color: var(--brand); box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), .35); }

.fq-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--brand-100); border-radius: 8px; background: #fff; color: var(--brand); font-size: 11px; }
.fq-qt { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #0b1220; }
.fq-chev { font-size: 11px; color: #94a3b8; transition: transform .2s; }
.fq-btn[aria-expanded="true"] .fq-chev { transform: rotate(180deg); color: var(--brand); }

/* The answer gets real room above it, and hangs off the medallion's gutter. */
.fq-a { margin: 0; padding: 12px 15px 14px 52px; font-size: 13px; line-height: 1.65; color: #475569; }