/* Professional Onboarding, /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.
 *
 * This replaced a taller arrangement: a two-column panel (dark price half /
 * light detail half) stacked above a six-card grid of four-point lists, which
 * ran 1427px. Same words, same figures, same six blocks; the height came out
 * of the shape rather than the content. The price is a bar beside the heading,
 * the three billing terms and all six inclusions ride one pill strip, and the
 * six blocks are a 3-across grid of compact cards.
 *
 * House rules this is built to:
 *   R1/R2 least scrolling, and no block of empty ground.
 *   R25  every medallion carries a border on its light ground.
 *   R15  a surface has a resting edge and the edge CHANGES on hover.
 *   R24  control and term labels are nowrap.
 *   R32  the call to action clears a 44px tap target.
 *   R36  one type scale, three radii (8 / 11-14 / pill), two elevations.
 */

/* PAPER, as the section it replaced was. R34 wants paper/tint alternation and
   this page does not currently have it: four grounds run down it (dark hero,
   paper, this, then an existing sand band at almost exactly the same
   luminance). Tinting this one only moved the collision one section down, so
   it stays paper and the alternation is a page-wide decision, not this
   section's to make alone. */
.onb { border-top: 1px solid rgba(214, 211, 209, .8); background: #fff; padding: 38px 0; }
/* Width and gutter come from the Blade wrapper's `mx-auto {{ $maxWidth }} px-4`,
   because $maxWidth is config-driven (az.max_width) and hardcoding 72rem here
   would silently ignore it. */
.onb-wrap { }

/* The heading runs full width; the paragraph sits beside the price. A
   three-line heading in a half-width column left a tall block of nothing to
   the right of it, which is R2's short-column-beside-a-tall-one.
   min-width:0 on the children because a grid item defaults to min-width:auto,
   so one nowrap pill inside is enough to push the track past the container and
   scroll the whole page sideways. */
.onb-top { margin-top: 14px; display: grid; gap: 18px; align-items: end; }
.onb-top > * { min-width: 0; }
@media (min-width: 900px) { .onb-top { grid-template-columns: minmax(0, 1fr) auto; } }

.onb-eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--brand-100); border-radius: 999px; background: var(--brand-50); padding: 5px 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }
.onb-h { margin: 14px 0 0; max-width: 22ch; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; color: #0b1220; }
@media (min-width: 640px) { .onb-h { font-size: 40px; max-width: none; } }
.onb-h em { font-style: normal; text-transform: uppercase; color: var(--brand); }
.onb-sub { margin: 0; max-width: 70ch; font-size: 14px; line-height: 1.6; color: #475569; }

/* The price bar. The gradient matches the Enterprise strip and the featured
   plan card, so the three dark surfaces on this page are one family. */
/* Wraps rather than overflowing: the figure and a nowrap call to action side
   by side are wider than a phone, and R3 means the page may never pan. */
.onb-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 100%; border-radius: 16px; background: linear-gradient(135deg, #0b1220 0%, #111c33 52%, var(--brand-700) 165%); padding: 16px 20px; color: #fff; }
.onb-fig { display: flex; align-items: flex-end; gap: 8px; }
.onb-amt { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: .95; font-variant-numeric: tabular-nums; }
.onb-was { margin-bottom: 5px; font-size: 14px; font-weight: 600; color: #94a3b8; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.onb-once { margin-bottom: 6px; font-size: 13px; color: #cbd5e1; white-space: nowrap; }
.onb-cta { flex: 1 1 auto; display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; background: #fff; padding: 0 18px; font-size: 13px; font-weight: 700; color: #0b1220; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
.onb-cta:hover { background: var(--brand-50); border-color: var(--brand-300); }
.onb-set { flex: 1 1 auto; justify-content: center; display: inline-flex; min-height: 44px; align-items: center; gap: 8px; border: 1px solid rgba(52, 211, 153, .3); border-radius: 11px; background: rgba(52, 211, 153, .1); padding: 0 18px; font-size: 13px; font-weight: 700; color: #a7f3d0; white-space: nowrap; }
.onb-note { margin: 10px 0 0; font-size: 12px; color: #64748b; }

/* Billing terms and every inclusion on one strip. These were two separate
   labelled blocks inside the old panel, which is most of the height saved. */
.onb-bar { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid #e7e5e4; border-radius: 14px; background: #fafaf9; padding: 10px 12px; }
.onb-term { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e7e5e4; border-radius: 999px; background: #fff; padding: 5px 11px; white-space: nowrap; }
.onb-term i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--brand-100); border-radius: 6px; background: var(--brand-50); font-size: 9px; color: var(--brand); }
.onb-term b { font-size: 12px; font-weight: 800; color: #0b1220; }
.onb-term[data-accent="1"] b { color: var(--brand); }
.onb-term span { font-size: 11px; color: #64748b; }
.onb-sep { width: 1px; align-self: stretch; background: #e7e5e4; }
.onb-inc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #0b1220; white-space: nowrap; }
.onb-inc i { font-size: 9px; color: #16a34a; }

/* What the fee buys. Three across so six blocks fill two complete rows and
   never leave a part-filled last row. */
.onb-grid { margin-top: 18px; display: grid; gap: 10px; }
@media (min-width: 640px) { .onb-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .onb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.onb-card { border: 1px solid #e7e5e4; border-radius: 14px; background: #fff; padding: 14px; transition: border-color .2s, box-shadow .2s; }
.onb-card:hover { border-color: var(--brand-300); box-shadow: 0 10px 26px -22px rgba(15, 23, 42, .35); }
.onb-card[data-lead="1"] { border-color: var(--brand-200); background: var(--brand-50); }
.onb-head { display: flex; align-items: center; gap: 9px; }
.onb-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; font-size: 11px; color: var(--brand); }
.onb-lab { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.onb-t { margin: 9px 0 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #0b1220; }
.onb-l { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.onb-l li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.4; color: #475569; }
.onb-l i { margin-top: 3px; font-size: 8px; color: #16a34a; }

.onb-foot { margin: 14px 0 0; text-align: center; font-size: 11px; line-height: 1.6; color: #64748b; }

/* The strip is the other thing that could pan: a pill is nowrap by design, so
   the row must be allowed to break between them at every width. */
.onb-bar > * { max-width: 100%; }