/* Soraian AI — the commercial site (ADC-063 D5). Base rules and keyframes are the design's own
   <style> block; the hover/active classes are generated from the design's style-hover / style-active
   attributes by the unit-6 build; the component rules port the design's React-rendered parts. */
html { scroll-behavior: smooth; }
  body { margin: 0; background: #ffffff; color: #1A1A1A; font-family: 'Lato', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
  * { box-sizing: border-box; }
  a { color: var(--color-brand); text-decoration: none; }
  a:hover { color: var(--color-brand-deep); }
  input, textarea { font-family: 'Lato', sans-serif; }
  @keyframes sorInboxRise { from { opacity: 0; transform: translateY(90px) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes sorToastPop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
  @keyframes sorToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(.96); } }
  @keyframes sorPulse { 0% { r: 2.6; opacity: 1; } 70% { r: 7; opacity: 0; } 100% { r: 7; opacity: 0; } }

/* --- conditional blocks: a wrapper that does not exist for layout ------------------------ */
.sc-if{display:contents}
.sc-if[hidden]{display:none}
[data-action]{cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-action]:focus-visible{outline:2px solid #0d7a72;outline-offset:2px}

/* --- hover / active states (generated) --------------------------------------------------- */
.hv1:hover,.hv1.tapped{color:#0d7a72;background:#eaf3f2;border-color:#cfe2df;box-shadow:0 8px 18px -12px rgba(20,50,48,.4);transform:translateY(-1px)}
.hv2:hover,.hv2.tapped{background:linear-gradient(180deg,#19b3ad 0%,#0d9995 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 13px 26px -10px rgba(0,96,94,.5);transform:translateY(-1px)}
.hv3:hover,.hv3.tapped{transform:translateY(-6px) rotateY(-11deg) rotateX(2deg);filter:drop-shadow(0 0 16px rgba(13,138,134,.45)) drop-shadow(0 12px 18px rgba(20,40,38,.16))}
.hv4:hover,.hv4.tapped{background:#f4faf9;box-shadow:0 12px 26px -22px rgba(20,50,48,.4)}
.hv5:hover,.hv5.tapped{background:#fdf4f3}
.hv7:hover,.hv7.tapped{background:#eceff0}
.hv8:hover,.hv8.tapped{background:linear-gradient(180deg,#19b3ad 0%,#0d9995 100%)}
.ac1:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(20,50,48,.12)}
.ac2:active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(0,48,46,.28),0 4px 10px -6px rgba(0,72,70,.45)}

/* --- the idle panel's two icon buttons: a gradual lift on hover ----------------------------
   Beside `.hv4` (the cards' hover, which the icons keep): the circle rises with a deeper shadow and
   the glyph inside rises a little further and grows, all eased; a press settles it; keyboard focus
   lifts it as hover does. `Sovereign`'s word at the first-version read (ADC-089 O5). */
.lift{transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease,background .32s ease}
.lift>svg{transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.lift:hover,.lift.tapped,.lift:focus-visible{transform:translateY(-2px);box-shadow:0 14px 24px -14px rgba(20,50,48,.34),0 4px 10px -8px rgba(20,50,48,.2)}
.lift:hover>svg,.lift.tapped>svg,.lift:focus-visible>svg{transform:translateY(-1px) scale(1.04)}
.lift:active{transform:translateY(0);box-shadow:0 8px 14px -10px rgba(20,50,48,.3)}
@media (prefers-reduced-motion:reduce){.lift,.lift>svg{transition:box-shadow .2s ease}.lift:hover,.lift.tapped,.lift:focus-visible,.lift:hover>svg,.lift.tapped>svg,.lift:focus-visible>svg,.lift:active{transform:none}}

/* --- component rules ---------------------------------------------------------------------- */
/* The pace of the two ambient animations — the inbox stage under "The Problem" and the dashboard
   under "The Solution" — is `--motion`, declared in tokens.css (ADC-071 D4): every duration below
   is written as the design's value divided by it, and script.js reads the same property for its
   timers, so the pace is one number with one home. */

/* The Problem — the inbox stage (the design's `inbox` render slot) */
.inbox-stage{position:relative;width:100%;max-width:520px;height:560px;flex:1 1 auto;--inbox-step:82px}
.inbox-glow{position:absolute;left:40px;right:40px;bottom:40px;height:300px;background:radial-gradient(60% 60% at 50% 80%,rgba(13,138,134,.09),rgba(13,138,134,0) 70%)}
.inbox-drop{position:absolute;left:26px;right:26px;bottom:-14px;height:48px;z-index:1;border-radius:999px;background:radial-gradient(52% 58% at 50% 46%,rgba(26,40,38,.3),rgba(26,40,38,0) 74%);filter:blur(9px)}
.inbox-well{position:absolute;left:26px;right:26px;bottom:54px;height:43px;z-index:5;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#e6e3dc 0%,#f1efea 60%,#f7f6f3 100%);box-shadow:inset 0 10px 12px -10px rgba(28,40,38,.28),inset 0 0 0 1px rgba(28,40,38,.04)}
.inbox-slot{position:absolute;left:0;right:0;bottom:64px;display:flex;justify-content:center;transform-origin:50% 100%;transition:transform calc(.62s / var(--motion)) cubic-bezier(.22,1,.36,1),opacity calc(.62s / var(--motion)) ease,filter calc(.62s / var(--motion)) ease}
.inbox-card{animation:sorInboxRise calc(.58s / var(--motion)) cubic-bezier(.22,1,.36,1) both;display:flex;align-items:center;gap:16px;width:min(432px,83%);background:#ffffff;border-radius:18px;padding:17px 22px;border:1px solid rgba(20,45,43,.06);box-shadow:0 1px 2px rgba(18,42,40,.05),0 8px 16px -10px rgba(18,42,40,.18),0 26px 40px -26px rgba(18,42,40,.24)}
.inbox-card-icon{width:42px;height:42px;border-radius:999px;flex:0 0 auto;background:#eef5f4;display:flex;align-items:center;justify-content:center}
.inbox-card.urgent .inbox-card-icon{background:#fdeeec}
.inbox-card-text{flex:1 1 auto;min-width:0}
.inbox-card-title{font-size:17px;font-weight:700;color:#1A1A1A;letter-spacing:-.01em}
.inbox-card-sub{font-size:14.5px;color:#6f6f6f;margin-top:3px}
.inbox-card-time{font-size:14.5px;color:#8a8a8a;flex:0 0 auto}
.inbox-card-dot{width:8px;height:8px;border-radius:999px;background:#0d8a86;flex:0 0 auto}
.inbox-card.urgent .inbox-card-dot{background:#d1483b}
.inbox-fade{position:absolute;left:0;right:0;top:0;height:150px;z-index:250;background:linear-gradient(180deg,#ffffff 18%,rgba(255,255,255,0) 100%);pointer-events:none}
.inbox-tray{position:absolute;left:0;right:0;bottom:0;height:97px;z-index:210;border-radius:14px;background:linear-gradient(180deg,#f4f2ee 0%,#eceae4 58%,#dfdcd4 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -6px 10px -8px rgba(28,40,38,.28),inset 0 0 0 1px rgba(28,40,38,.05);clip-path:polygon(0 0,26px 0,26px 29px,calc(100% - 26px) 29px,calc(100% - 26px) 0,100% 0,100% 100%,0 100%)}
.inbox-pillwrap{position:absolute;left:0;right:0;bottom:0;height:68px;z-index:220;display:flex;align-items:center;justify-content:center}
.inbox-pill{display:inline-flex;align-items:center;gap:13px;white-space:nowrap;background:#fdfdfb;border:1px solid #e5e3db;border-radius:999px;padding:8px 9px 8px 20px;box-shadow:0 2px 5px -3px rgba(28,40,38,.25),inset 0 1px 0 #ffffff}
.inbox-pill-label{font-size:12px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:#6a6963}
/* The count is a mechanism, not a measure: a rust tint rather than a solid red pill keeps it from reading as a figure
   (SEC-284). */
.inbox-pill-count{background:var(--color-danger-tint);color:var(--color-danger-strong);border:1px solid var(--color-danger-line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* The solution frame's middle column carries a floor: the note columns are minmax(0,96px) in the
   design, so they surrender width before the laptop does. Without it the laptop goes skinny on a
   narrow desktop, where the section's two flex children still sit side by side. (SEC-013) */
.sol-frame{grid-template-columns:minmax(0,96px) minmax(360px,1fr) minmax(0,96px)!important}

/* The Solution — the dashboard stats, chart, toasts and the handwritten notes */
/* Illustrative operations dashboard: compact cards and a visual review cycle. */
.sol-stats.sol-workflow-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sol-workflow-stats .stat-card{padding:10px;box-sizing:border-box;border-color:var(--color-line);background:var(--color-surface)}
.sol-metric-card{align-items:center;text-align:center;justify-content:space-between;gap:7px}
.sol-metric-label{font-size:9px;font-weight:700;line-height:1.35;color:var(--color-ink-title)}
.sol-quality-gauge{position:relative;width:70px;height:70px}
.sol-quality-gauge svg{display:block;width:100%;height:100%;fill:none;stroke-width:6}
.sol-gauge-track{stroke:var(--color-brand-tint)}
.sol-gauge-value{stroke:var(--color-brand-bright);stroke-linecap:round}
.sol-quality-gauge > span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--color-ink-title)}
.sol-quality-gauge small{font-size:11px;margin-left:1px}
.sol-task-count{font-size:29px;font-weight:700;line-height:1.1;color:var(--color-ink-title);font-variant-numeric:tabular-nums;margin-top:7px}
.sol-task-trend{width:100%;height:25px;display:block}
.sol-metric-caption{font-size:7.5px;line-height:1.35;color:var(--color-text-soft)}
.sol-panel-heading{font-size:10.5px;font-weight:700;color:var(--color-ink-title)}
.sol-panel-subline{font-size:8.5px;line-height:1.4;color:var(--color-text-soft);margin-top:3px}
.sol-quality-panel{margin-top:11px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:9px;padding:12px}
.sol-quality-list{margin-top:14px}
.sol-review-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.sol-review-flow::before{content:"";position:absolute;top:19px;left:16.66%;right:16.66%;height:2px;background:var(--color-line-connector)}
.sol-review-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:9px;font-weight:700;color:var(--color-text)}
.sol-review-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid var(--color-surface);border-radius:50%;background:var(--color-brand-tint);color:var(--color-brand-bright);box-sizing:border-box}
.sol-review-icon svg{width:19px;height:19px}
.sol-review-icon.attention{color:var(--color-danger-strong);background:var(--color-danger-tint)}
.sol-review-loop{text-align:center;color:var(--color-brand-bright);margin-top:4px}
.sol-review-loop svg{display:block;width:100%;height:22px}
.sol-review-loop span{font-size:8px;color:var(--color-text-soft)}
.sol-review-summary{display:flex;align-items:center;gap:5px;border-top:1px solid var(--color-line-soft);padding-top:9px;margin-top:10px;font-size:8px;line-height:1.4;color:var(--color-text)}
.sol-review-dot{width:5px;height:5px;border-radius:50%;background:var(--color-danger-strong);flex-shrink:0}
.sol-review-badge{margin-left:auto;background:var(--color-danger-tint);color:var(--color-danger-strong);padding:3px 5px;border-radius:4px;font-size:7.5px;white-space:nowrap}

.sol-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.stat-cell{display:flex}
.stat-card{background:#ffffff;border:1px solid #eceeed;border-radius:8px;padding:9px 10px 8px;min-width:0;height:100%;display:flex;flex-direction:column;transition:border-color calc(.6s / var(--motion)) ease,box-shadow calc(.6s / var(--motion)) ease;box-shadow:none;width:100%}
.stat-card.flash{border-color:#b6dedb;box-shadow:0 0 0 3px rgba(13,138,134,.09)}
.stat-value{font-size:17px;font-weight:700;color:#12403e;line-height:1;font-variant-numeric:tabular-nums}
.stat-label{font-size:8px;color:#8d9391;margin:5px 0 3px;line-height:1.25;flex:1 1 auto}
.stat-delta{font-size:8px;color:#0d8a86;font-weight:700}
.sol-chart svg{display:block;width:100%;height:62px;margin-top:6px;overflow:visible}
.sol-toasts{position:relative;height:34px;margin-top:9px}
.sol-toasts-stack{position:absolute;right:0;bottom:0;width:186px;display:flex;flex-direction:column;gap:6px;z-index:5;pointer-events:none}
.sol-toast{display:flex;align-items:center;gap:8px;background:#ffffff;border:1px solid #e4eae9;border-radius:9px;padding:7px 9px;box-shadow:0 10px 22px -12px rgba(18,42,40,.32);animation:sorToastPop calc(.42s / var(--motion)) cubic-bezier(.22,1,.36,1) both}
.sol-toast.leaving{animation:sorToastOut calc(.45s / var(--motion)) ease forwards}
.sol-toast-check{width:15px;height:15px;border-radius:999px;background:#0d8a86;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.sol-toast-text{font-size:8.5px;line-height:1.3;color:#2b3230;font-weight:700}
.sol-note{font-family:'Caveat',cursive;font-size:22px;line-height:1.25;color:#3f4a48;opacity:0;transform:translateY(12px);transition:opacity calc(1s / var(--motion)) ease,transform calc(1s / var(--motion)) cubic-bezier(.22,1,.36,1)}
.sol-note.visible{opacity:1;transform:none}
.sol-note svg{display:block;overflow:visible}
.sol-note-arrow{margin-top:6px;margin-left:auto}
.sol-note-ticks{margin-top:10px}

/* The primary call to action (ADC-107 Amendment 8, `Sovereign`, 2026-10-01): the same button as the Portal's `.cta` —
   the brand gradient pill from the foundation's tokens, a gradual lift on hover and focus, pressed flat. */
/* Each foundation token this rule and the header's rule read carries the foundation's value as its fallback: the
   site's own tokens.css predates them, and ADC-114's switch to the foundation's file makes the fallbacks unused
   (ADC-107 Amendment 10's fix — the button lost its padding on the deployed `dev` site). */
.cta-primary{display:inline-flex;align-items:center;gap:12px;background:var(--gradient-brand);color:#ffffff;
  border:1px solid rgba(255,255,255,.34);border-radius:var(--radius-pill);padding:17px var(--cta-pad-x,32px);
  font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;text-decoration:none;box-shadow:var(--shadow-cta,inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px -10px rgba(0,72,70,.5));
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease}
.cta-primary:hover,.cta-primary:focus-visible{color:#ffffff;background:var(--gradient-brand-hover,linear-gradient(180deg,#19b3ad 0%,#0d9995 100%));box-shadow:var(--shadow-cta-hover,inset 0 1px 0 rgba(255,255,255,.3),0 13px 26px -10px rgba(0,96,94,.5));transform:translateY(-1px)}
.cta-primary:active{box-shadow:var(--shadow-cta-active,inset 0 2px 5px rgba(0,48,46,.28),0 4px 10px -6px rgba(0,72,70,.45));transform:none}
@media (prefers-reduced-motion:reduce){.cta-primary{transition:box-shadow .2s ease}.cta-primary:hover,.cta-primary:focus-visible{transform:none}}

/* The narrow-window notice (`Sovereign`, 2026-10-01): below the site's 300px floor a veil covers the page — the robot,
   *Window is too small*, and the width to widen to; the page shows faintly behind it and cannot scroll. */
.too-small{display:none;position:fixed;inset:0;z-index:1000;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:color-mix(in srgb,var(--color-surface) 84%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.too-small-art{width:128px;height:128px;margin-bottom:6px}
.too-small-title{margin:0;font-family:'Playfair Display',serif;font-weight:400;font-size:22px;color:var(--color-ink-strong)}
.too-small-text{margin:0;max-width:300px;font-size:15px;line-height:1.55;color:var(--color-text)}
@media (max-width:299.98px){.too-small{display:flex}body{overflow:hidden}}

/* The header's rule (ADC-107 Amendment 7, `Sovereign`, 2026-09-30): a faint line under the logo and the links, 80% of
   the content's width and centred, with a soft shadow beneath. */
.site-header{position:relative}
.site-header::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc((100% - 2 * clamp(20px,5vw,50px)) * .8);height:1px;background:var(--color-line);box-shadow:var(--shadow-well-hero,0 2px 7px rgba(20,40,38,.14),0 12px 24px -14px rgba(20,40,38,.28));pointer-events:none}

/* The "before" strip reads as the problem state (SEC-013). It carried the same muted grey as
   every other eyebrow, and its cards sat at opacity:.75, so the row read as neutral and faded
   rather than as the thing the copy calls disconnected. It takes the design's own problem red
   — #a4392f, 5.95:1 on the section's #F5F5F5 and 6.55:1 on the cards, so the label clears AA at
   11.5px — and the cards go fully opaque. Every view, not a breakpoint.
   The two other #9aa19f uses on the page are inside the dashboard mock and are NOT touched. */
[style*="text-transform:uppercase;color:#9aa19f"]{color:#a4392f!important}
.before-grid > div{opacity:1!important;border-color:#e9d2ce!important;background:#fffbfa!important}
.before-grid svg{stroke:#a4392f!important}
.before-grid > div > div{color:#a4392f!important}

/* Start With a Conversation — the embedded chat and the voice panel states */
/* The conversation container (ADC-071 D2): the panel root carries id="conversation" and data-mode
   (idle · voice · chat); where the section has stacked (`#book[data-stacked="true"]`, which script.js
   reads off the row's own wrap — ADC-092, the look-together) an open mode takes the whole viewport (the
   rules after the step bar), its height tracking the VISIBLE viewport so the slot's bottom edge — where the
   chat's input sits — stays above the native keyboard (script.js writes --conversation-height and
   --conversation-top from visualViewport while open). At desktop it stays in-page as the canvas draws
   it, and the return control stays hidden. Colour, radius and shadow come from tokens.css only. */
.conv-close{display:none;flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-pill);
  border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink);
  align-items:center;justify-content:center;cursor:pointer}
.conv-close[hidden]{display:none!important}
/* the header's three controls (the look-together, 2026-09-23: *"collapse and exit buttons probably need to be a
   little bit smaller"*): drawn at 36 px, each still a 44 px target — an invisible ring 4 px wide around it, the
   8 px gap between two controls holding both rings without overlap */
:is(.conv-close,.conv-min,.conv-expand){position:relative}
:is(.conv-close,.conv-min,.conv-expand)::after{content:"";position:absolute;inset:-4px;border-radius:inherit}
:is(.conv-close,.conv-min,.conv-expand) svg{width:18px;height:18px}
html.conversation-open,body.conversation-open{overflow:hidden}
.chat-slot{flex:1 1 auto;display:flex;min-height:340px;position:relative}
.chat-mount{flex:1 1 auto;min-width:0;height:520px;position:relative}
.chat-mount > *{height:100%}
.chat-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px;text-align:center;font-size:13.5px;color:var(--color-muted);background:var(--color-surface)}
.chat-status-text{max-width:36ch;line-height:1.6}
.chat-mount[data-embed-state="failed"] ~ .chat-status .chat-status-text{color:var(--color-danger)}
/* the framed chat (ADC-088 O1): the iframe fills the slot the way the mounted widget did — the slot
   "assumes nothing about what renders inside it … an iframe sized to it" (the client L2's § The
   conversation container), so this is the only rule the swap needs. */
.chat-frame{width:100%;height:100%;border:0;display:block}
/* the panel's header (ADC-092 O1): each mode's title block, then one bar of three steps — the site's for
   every mode, the chat widget carrying no header of its own. No status line: the widget shows its own
   state, the slot's overlay the load's (O10). */
.conv-head{position:relative;padding:26px clamp(18px,4vw,30px) 20px;border-bottom:1px solid var(--color-line-soft);text-align:center}
.conv-actions{position:absolute;top:14px;right:14px;display:flex;gap:8px}
/* full screen, the two controls sit in the header's top-right corner: the title and its sub-lines keep clear of
   them on both sides, so they stay centred and wrap rather than running under them; the step bar keeps its width */
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) :is(.conv-title,.conv-sub,.conv-note){padding-left:80px;padding-right:80px}
/* and the header is lighter there (*""Book Your Free Consultation" header probably should become a little
   smaller in this mode"*): the title a size down, its first line level with the controls */
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .conv-head{padding-top:20px}
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .conv-title{font-size:20px;line-height:1.2}
.conv-min{display:none;flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-pill);
  border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink);
  align-items:center;justify-content:center;cursor:pointer}
.conv-min[hidden]{display:none!important}
.conv-expand{display:none;flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-pill);
  border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink);
  align-items:center;justify-content:center;cursor:pointer}
.conv-expand[hidden]{display:none!important}
/* the mode's chip — *Voice* or *Chat* beside a green light that glows — in the header's top-left corner,
   shown only collapsed, mirroring the controls on the right */
.conv-chip{position:absolute;top:18px;left:14px;display:none;align-items:center;gap:8px;padding:6px 13px 6px 11px;border-radius:var(--radius-pill);
  background:var(--color-brand-tint);color:var(--color-brand-deep);font-size:13px;font-weight:700;letter-spacing:.02em}
@keyframes liveGlow{0%,100%{box-shadow:0 0 0 0 rgba(47,174,100,.55)}60%{box-shadow:0 0 0 6px rgba(47,174,100,0)}}
.conv-live-dot{width:9px;height:9px;border-radius:var(--radius-pill);background:var(--color-success);animation:liveGlow calc(2.2s / var(--motion)) ease-out infinite}
@media (prefers-reduced-motion:reduce){.conv-live-dot{animation:none}}
/* the two sub-lines, one block that folds (below) — a one-row grid whose row can animate to 0fr */
.conv-intro{display:grid;grid-template-rows:1fr}
.conv-intro-inner{min-height:0;overflow:hidden}
.conv-title{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,30px);line-height:1.15;color:var(--color-brand-deep)}
.conv-sub{font-size:14.5px;line-height:1.4;color:var(--color-text);margin-top:6px}
.conv-sub-strong{color:var(--color-ink-title)}
.conv-note{font-size:13.5px;line-height:1.5;color:var(--color-muted);margin-top:4px}
/* the step bar (O1, O3), as `Sovereign`'s reference image draws it (the look-together, 2026-09-23): a
   completed step filled teal with a check; the current step an unfilled circle in a #008080 glow that pulses,
   a little softer than the reference (*"Glow is that color, open task is uncolored circle with no fill, but
   have glow a little less dramatic than one in the photo, but still pulsing"*); a step not yet reached an
   unfilled grey ring — colour marks progress, never interactivity (`Sovereign`, "A"); no step is a control
   (O11). script.js writes each step's data-state from embed-messages.js's stepView. */
.steps{list-style:none;display:flex;align-items:flex-start;justify-content:center;gap:0;margin:18px auto 0;padding:0;max-width:440px}
.steps[hidden]{display:none}
.step{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px}
/* the connector: equal-width steps, so each line runs from the previous dot's centre to this one's, stopping
   12 px short of both dots (the dot is 32 px: 16 + 12 = 28) — the same gap whatever the labels' widths */
.step + .step::before{content:"";position:absolute;top:15.25px;left:calc(-50% + 28px);right:calc(50% + 28px);height:1.5px;background:#c9cfd2;border-radius:1px}
.step-dot{width:32px;height:32px;box-sizing:border-box;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.step-check{display:none}
.step-label{font-size:12.5px;line-height:1.3;text-align:center;white-space:nowrap}
.step[data-state="complete"] .step-dot{background:var(--color-brand);color:var(--color-surface)}
.step[data-state="complete"] .step-num{display:none}
.step[data-state="complete"] .step-check{display:block}
.step[data-state="complete"] .step-label{color:var(--color-muted)}
@keyframes stepGlow{
  0%,100%{box-shadow:0 0 5px 1px rgba(0,128,128,.28)}
  50%{box-shadow:0 0 12px 4px rgba(0,128,128,.48)}}
.step[data-state="current"] .step-dot{background:var(--color-surface);border:2px solid rgba(0,128,128,.45);color:var(--color-ink-title);animation:stepGlow calc(2.8s / var(--motion)) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.step[data-state="current"] .step-dot{animation:none;box-shadow:0 0 8px 2px rgba(0,128,128,.38)}}
/* full screen, the bar a size down with the title (`Sovereign`, round 8: *"the progress bar and progress bar text
   should reduce as well in size"*): 26 px dots, the connector still stopping short of each (13 + 10 = 23) */
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .steps{margin-top:12px}
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .step{gap:5px}
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .step + .step::before{top:12.25px;left:calc(-50% + 23px);right:calc(50% + 23px)}
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .step-dot{width:26px;height:26px;font-size:12px}
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .step-check{width:12px;height:12px}
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .step-label{font-size:11.5px}
.step[data-state="current"] .step-label{color:var(--color-brand);font-weight:700}
.step[data-state="upcoming"] .step-dot{background:var(--color-surface);border:2px solid #c9cfd2;color:#8a9398}
.step[data-state="upcoming"] .step-label{color:var(--color-muted)}
/* §9 the conversation container, open where the section has stacked: the whole visible viewport (ADC-071
   D2), from exactly the width at which the panel drops below the copy and at no wider width (`Sovereign`, the
   look-together: *"the full screen lock in should only occur at the point X as well"*). !important because the
   panel's own layout is inline (ADC-063 D5). min-height:0 so the phone block's 100svh floor cannot push the
   bottom edge under the keyboard. */
#book[data-stacked="true"] #conversation[data-mode="voice"],#book[data-stacked="true"] #conversation[data-mode="chat"]{
  position:fixed!important;top:var(--conversation-top,0)!important;left:0!important;right:0!important;
  width:auto!important;height:100vh!important;height:var(--conversation-height,100dvh)!important;
  min-height:0!important;max-width:none!important;margin:0!important;z-index:1000!important;
  border-radius:0!important;border:0!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
  background:var(--color-surface)!important}
#book[data-stacked="true"] #conversation[data-mode="voice"] .conv-close,#book[data-stacked="true"] #conversation[data-mode="chat"] .conv-close,
#book[data-stacked="true"] #conversation[data-mode="voice"] .conv-min,#book[data-stacked="true"] #conversation[data-mode="chat"] .conv-min{display:flex}
#book[data-stacked="true"] #conversation[data-mode="chat"] .chat-slot{flex:1 1 auto!important;min-height:0!important}
#book[data-stacked="true"] #conversation[data-mode="chat"] .chat-mount{height:auto!important;flex:1 1 auto!important;min-height:0!important}
#book[data-stacked="true"] #conversation[data-mode="voice"] #voice-stage{flex:1 1 auto!important;min-height:0!important;justify-content:center!important}
/* folded (the look-together, 2026-09-23, round 8): the two sub-lines fold away and the title and the step bar
   stay — while the chat's history is scrolled (*"What disappears with scroll is "With Bill · Soraian AI / Let's
   find the right next step for your practice.""*) and whenever the panel is collapsed (script.js sets
   data-folded from embed-messages.js's headerFolded). The fold eases the same way as the slide. */
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .conv-intro{transition:grid-template-rows calc(.5s / var(--motion)) cubic-bezier(.65,0,.35,1),opacity calc(.35s / var(--motion)) ease}
#book[data-stacked="true"] #conversation[data-folded="true"] .conv-intro{grid-template-rows:0fr;opacity:0}
/* with a phone's keyboard up (SEC-222): the whole top section goes — the title, the step bar, and the close and
   collapse controls with them — so the chat keeps the screen above the keyboard (*"hide the entire top section (header
   with progress bar), then only show it again when the user clicks/scrolls to hide the keyboard"*); script.js sets
   data-keyboard from embed-messages.js's hidesTopSection (phones only) while the panel tracks the visible viewport */
#book[data-stacked="true"] #conversation[data-mode="chat"][data-keyboard="true"] .conv-head{display:none}
/* collapsed: the panel slides down until only its header's title row shows — *"it should say "Book your free
   consultation" header instead of progress bar. Much easier to folow visually"* — with the mode's chip, *Expand*
   and *X*, the step bar below it fading; the slide eases in and out both ways (*"semi slowly, then speeds up,
   then slows down"*). Everything below is off screen but mounted — the call goes on, the chat's frame keeps its
   conversation — and the page scrolls again. script.js measures --conversation-peek from the header before the
   slide. */
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]){transition:transform calc(.9s / var(--motion)) cubic-bezier(.65,0,.35,1),border-radius .3s ease,box-shadow .3s ease}
#book[data-stacked="true"] #conversation[data-minimized="true"]:is([data-mode="voice"],[data-mode="chat"]){
  top:auto!important;bottom:0!important;
  transform:translateY(calc(100% - var(--conversation-peek, 96px) - env(safe-area-inset-bottom, 0px)))!important;
  border-radius:var(--radius-panel) var(--radius-panel) 0 0!important;border-top:1px solid var(--color-line)!important;
  box-shadow:0 -14px 30px -18px rgba(20,50,48,.4)!important}
#book[data-stacked="true"] #conversation[data-minimized="true"] .conv-chip{display:inline-flex}
#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) .steps{transition:opacity calc(.35s / var(--motion)) ease}
#book[data-stacked="true"] #conversation[data-minimized="true"] .steps{opacity:0}
#book[data-stacked="true"] #conversation[data-minimized="true"] .conv-min{display:none}
#book[data-stacked="true"] #conversation[data-minimized="true"]:is([data-mode="voice"],[data-mode="chat"]) .conv-expand{display:flex}
@media (prefers-reduced-motion:reduce){#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]),#book[data-stacked="true"] #conversation:is([data-mode="voice"],[data-mode="chat"]) :is(.conv-intro,.steps){transition:none}}
/* the voice stage (O4): Sora's avatar, a waveform the call's own level drives (flat when no one speaks —
   nothing here animates on its own), *Sora is speaking / listening*, the elapsed time and *End call* — the
   look-together cut the caption and *Mute* (`Sovereign`, 2026-09-23). */
.voice-stage{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px clamp(20px,5vw,50px) 26px;min-height:340px}
.voice-avatar{width:112px;height:112px;border-radius:var(--radius-pill);border:2px solid var(--color-brand-wave);padding:4px;background:var(--color-surface)}
.voice-avatar img{width:100%;height:100%;border-radius:var(--radius-pill);object-fit:cover;object-position:center 26%;display:block;background:var(--color-brand-tint-soft)}
.voice-wave{display:flex;align-items:center;justify-content:center;gap:5px;height:46px;margin:18px 0 10px}
.voice-bar{width:5px;height:6px;border-radius:var(--radius-pill);background:var(--color-brand);transition:height .09s linear}
.voice-gap{width:8px}
.voice-title{font-size:17px;font-weight:700;line-height:1.3;color:var(--color-ink-title)}
.voice-timer{font-size:13px;color:var(--color-muted);margin-top:6px;font-variant-numeric:tabular-nums}
.voice-timer[hidden]{display:none!important}
.voice-hint{font-size:13.5px;line-height:1.6;color:var(--color-muted);margin:10px 0 0;max-width:40ch}
.voice-hint[hidden]{display:none!important}
.voice-hint-error{color:var(--color-danger)}
/* The idle panel's line after a live call ended (ROADMAP #299): empty, it takes no room and stays in the tree, so the
   polite status announces it when it is written. */
.call-ended{margin:0;font-size:16px;line-height:1.5;color:var(--color-text)}
.call-ended:not(:empty){margin-bottom:22px}
/* The voice stage's polite status (SEC-188 UX-2): read by a screen reader, drawn nowhere. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The phone line inside a sentence stays one token (SEC-188 UX-9). */
.nowrap{white-space:nowrap}
.voice-controls{display:flex;justify-content:center;gap:40px;margin-top:22px}
.voice-control{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;color:var(--color-text)}
.voice-control[hidden]{display:none!important}
.voice-btn{width:62px;height:62px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;transition:background .2s ease,box-shadow .2s ease}
.voice-btn-end{background:var(--color-danger);color:var(--color-surface);box-shadow:0 10px 22px -14px rgba(60,30,26,.6)}
.voice-control:hover .voice-btn-end,.voice-control:focus-visible .voice-btn-end{background:var(--color-danger-strong)}
@media (prefers-reduced-motion:reduce){.voice-bar{transition:none}}
/* the embed Retry control (ADC-071 D3): shown only in a slot's failed state */
.conv-retry{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-top:14px;
  padding:0 22px;border-radius:var(--radius-pill);border:1px solid var(--color-line);background:var(--color-brand-tint);
  color:var(--color-brand);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.conv-retry[hidden]{display:none!important}

/* ── Responsive ───────────────────────────────────────────────────────────────────────────
   The source was a desktop canvas with no mobile counterpart, so the breakpoints below were
   derived, not exported (SEC-013). Every selector is a class the markup carries — the design's
   inline styles came over byte-for-byte (ADC-063 D5), which is why these rules need !important
   to reach them; a rule whose class nothing in index.html carries does nothing, silently, so
   a class is renamed in both files or in neither (ADC-071 D1: the site is hand-maintained). */

/* ── The stacked band ──────────────────────────────────────────────────────────────────────
   Two sections are flex rows that WRAP below a width set by their own flex-basis sums, not by
   any breakpoint of ours. Measured: the solution row stacks up to ~1029 and sits side by side
   from ~1145; the hero stacks up to ~1145 and pairs from ~1225. Rules written for
   "tablet" at 1024 therefore stopped ~120px short of where the stacking actually ends, which is
   what left a photo alone on a row with dead space beside it, and the hero copy stranded in a
   half-empty first screen. Each rule now ends where its own section stops wrapping. */

/* The hero: no breakpoint at all, because there is no honest one to pick.

   The row pairs when its CONTENT box reaches 400 + 56 + 660 = 1116px — the copy's basis, the gap,
   and the image's basis. That is a viewport of ~1216px. The image's margin reads that same content
   box (`100cqi` against 1116px), never `100vw` (SEC-284). But the content box is the viewport MINUS the scrollbar, so
   the same page pairs at 1216 where scrollbars overlay and at 1231 where they take 15px: a
   `max-width` breakpoint is wrong in one browser or the other, and being wrong here flipped the
   two columns left-to-right rather than merely shifting a margin.

   So the order is handled by `wrap-reverse` — when the row wraps it draws the second line first,
   putting the photo above the copy, and when it does not wrap it does nothing — and the centring
   is a container query on the shell's own content box, which is the exact quantity the wrap
   depends on. Both track the layout instead of guessing at it. */
.sec-shell:has(> .hero-copy){container:hero / inline-size;flex-wrap:wrap-reverse!important}
/* Side by side, the photo's column is pulled up to 150px left, under the copy, its fade hiding the seam — which put the
   body's longest lines over the picture. The photo keeps its size and every line of the copy ends 110px short of the
   column — 150px of pull, less the row's 56px gap, plus 16px clear — so no text touches it (`Sovereign`, SEC-280's look,
   round 4: *"we need text to cleanly not touch and interfere/conflict with photo"* … *"tighten left text rather than make
   the image smaller"*). Stacked, the hero block below lifts the caps again. */
@container hero (min-width:1116px){
  .hero-copy > h1,.hero-copy > p{max-width:calc(100% - 110px)!important}
}

@container hero (max-width:1115px){
  /* stacked: the copy centres under the photo, as a 560px block rather than full-width centred
     text — the row is far wider than a comfortable measure here */
  .hero-copy{text-align:center!important;max-width:560px!important;
    margin-left:auto!important;margin-right:auto!important}
  .hero-copy > *{margin-left:auto!important;margin-right:auto!important}
  .hero-copy > h1{font-size:clamp(44px,6vw,58px)!important}
  /* and centred under the photo, the desktop column's line caps broke the headline and the body into short centred
     lines: the block widens and the caps lift (`Sovereign`, SEC-280's look, round 3: *"remove the line breaks for the
     content"*). The body is one paragraph since SEC-284, so it stays a block and keeps its margin above the button. */
  .hero-copy{max-width:760px!important}
  .hero-copy > h1,.hero-copy > p{max-width:none!important}
}
/* Side by side, the headline's size follows the copy column, not the viewport: its longer unbreakable line, "Less
   Chaos for You", is ~8.4 times the font size wide, and the column's text runs 110px short of it (the rule above) —
   so the size is the column less 110px over 8.7, capped at 42px. Sized by the viewport, the column's narrowest band
   just before the stack (~1216–1240px) broke the headline into four lines (`Sovereign`, SEC-284). */
.hero-copy{container-type:inline-size}
.hero-copy > h1{font-size:clamp(30px,calc((100cqi - 110px) / 8.7),42px)}
/* The headline's two phrases are two blocks with a small gap between them, so a phrase that wraps inside a narrow
   column stays tight to itself and the two still read as two (`Sovereign`, SEC-284). */
.hero-line{display:block}
.hero-line + .hero-line{margin-top:.22em}

/* The other wrapping row, measured the same way as the hero and for the same reason: a viewport
   breakpoint cannot find its pair point, because the scrollbar shifts it.

     the solution shell pairs at content 380 + 60 + 560 = 1000px (a ~1100px viewport) */
.sec-shell:has(.sol-frame){container:solution / inline-size}

@container solution (max-width:999px){
  /* stacked, the panel takes the full shell and the laptop balloons — cap and centre the frame,
     which puts the middle column back near the design's 383px */
  .sol-frame{max-width:640px;margin-left:auto!important;margin-right:auto!important}
  /* and the copy, no longer beside the laptop, would leave a 520px column with the shell's other half
     empty: the three points take that half, beside the headline, and the CTA centres under both
     (`Sovereign`, SEC-280's first-version look) */
  .sol-copy{max-width:none!important;flex-basis:100%!important;display:grid;align-items:start;column-gap:48px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;
    grid-template-areas:"eyebrow ." "rule ." "title points" "intro points" "cta cta"}
  .sol-intro{align-self:start}
  .sol-eyebrow{grid-area:eyebrow}
  .sol-rule{grid-area:rule}
  .sol-title{grid-area:title}
  .sol-intro{grid-area:intro}
  .sol-points{grid-area:points;align-self:start;margin-top:6px}
  .sol-cta{grid-area:cta;justify-self:center}
}
@container solution (max-width:639px){
  /* two columns of under ~300px no longer hold a point and its icon: one column, the CTA still centred */
  .sol-copy{display:block}
  .sol-cta{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
}

/* Tablet and below: rules about narrow width rather than about wrapping. */
@media (max-width:1024px){
  /* the logo is a raster fixed at height:64px, which renders 419px wide — with the nav beside it
     the masthead needs ~820px, so it is relaxed here rather than at the phone breakpoint */
  .site-header{gap:16px!important;flex-wrap:wrap}

  .site-logo img{height:46px!important}
  .site-nav{gap:18px!important;flex-wrap:wrap}
  .sec-shell{padding-left:30px!important;padding-right:30px!important}
}

/* Phone. */
@media (max-width:720px){
  /* masthead — the wordmark alone (the header's <picture> swaps it in here), sized to the width so the one link,
     Sign in, stays beside it down to the site's 300px floor (the narrow-window notice below it); the legal pages' two
     links still wrap beneath */
  .site-header{padding-top:20px!important;padding-bottom:14px!important;gap:10px!important}
  .site-header:has([data-action="sign-in"]){flex-wrap:nowrap}
  .site-logo img{height:auto!important;width:clamp(150px,52vw,211px)!important}

  /* vertical rhythm — the shells carry 56–96px of desktop padding. The side padding must be
     restated here: the tablet rule above widens it to 30px, which would otherwise carry down
     and leave a phone a narrower text column than the design's own clamp() floor of 20px. */
  .sec-shell{padding-top:44px!important;padding-bottom:48px!important;
    padding-left:16px!important;padding-right:16px!important}

  /* §1 the hero's four capability cards. The stack is what names the four areas, so it stays —
     but only the headers: the supporting line is what made it outgrow the photo and land on §2.
     The stack's own rotateY is flattened (it clips at this width) while the overlay keeps its
     `perspective`, so the per-card lift still reads as 3D when tapped. */
  /* Only two things change: the box gets narrower so the cards stop covering the photo, and the
     supporting line goes. Everything else keeps the design's own values ON PURPOSE — the stack's
     rotateY is what gives the cards their angle, and the dashed rule and arrow down the left are
     absolutely positioned at the 46px icon's centre (left:23.25px), so resizing the icon here
     silently misaligns both. The card's own max-width:236px still caps it. */
  /* The whole stack scales as one, which is the only way to shrink it without pulling the dashed
     rule and the arrow off the icon centre they are positioned against. The pills stop stretching
     to the stack and hug their labels, and the width the labels do not need comes out of padding
     and the icon gap rather than out of the type — at a literal one third of the photo the labels
     compute to ~8px, which is below reading size. This lands at ~37% with ~10px labels. */
  /* `width:auto` makes the box shrink-wrap its widest card, and the cards keep the design's own
     `align-self:stretch`, so the longest label sets one width for all four. The stack then scales
     as ONE — the only way to shrink it without pulling the dashed rule and the arrow off the icon
     centre they are absolutely positioned against. Width the labels do not need comes out of
     padding, not type. */
  .hero-overlay{left:3%!important;width:auto!important;top:6%!important;bottom:6%!important;
    transform:scale(.78);transform-origin:left top}
  .hero-card{gap:8px!important}
  .hero-card > div:last-of-type{padding-left:12px!important;padding-right:14px!important}
  /* 14.5px inside scale(.78) renders at 11.3 — under the label floor. Only the label grows,
     so the icons, the dashed rule and the box keep the geometry tuned above. */
  .hero-card > div:last-of-type > div:first-child{font-size:15.5px!important}
  .hero-card > div:last-of-type > div:last-child{display:none!important}
  /* the dashed rule starts at top:64px — the centre of the FIRST icon when the card still
     carries its supporting line. With that line hidden the card is ~46px, so the rule began
     below the circle it is meant to run out of. */
  .hero-overlay > div > div:first-child{top:23px!important}

  /* §2 the inbox stage: cards drawn for a 520px stage, at 83% of a 315px one, end up as wide as
     the tray they are supposed to be sitting in — which is why it stopped reading as a tray */
  /* the stage is 560px of canvas for a card stack that is ~250px once the cards shrink; the
     surplus reads as dead space above the tray, because the cards are anchored to the bottom.
     The 82px stride goes with it: at phone card heights it stopped overlapping, and nine cards
     of it overran both the stage and the top fade — which is what made the middle of the stack
     look like it faded out, back in, then out again. */
  .inbox-col{min-height:0!important}
  .inbox-stage{height:352px!important;max-width:340px!important;--inbox-step:46px}
  .inbox-fade{height:96px!important}
  .inbox-card{width:min(288px,calc(100% - 52px))!important;gap:11px!important;padding:13px 14px!important;border-radius:14px!important}
  .inbox-card-icon{width:32px!important;height:32px!important}
  .inbox-card-icon svg{width:15px!important;height:15px!important}
  /* one line each, so every card is the same height. Two-line titles ("Appointment Request",
     "Follow-up Reminder") made those cards 64px against a 37px minimum, and a card taller than
     the stride shows below the one in front of it — which reads as a doubled card. */
  .inbox-card-title{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inbox-card-sub{font-size:10.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* the card's message is the point, not its time: a phone card is no wider than the tray's inner edge, and the
     timestamp gives its width to the message so each one reads whole (SEC-284) */
  .inbox-card-time{display:none!important}
  .inbox-pill{padding:6px 7px 6px 14px!important}
  .inbox-pill-label{font-size:10px!important}
  .inbox-pill-count{padding:5px 12px!important;font-size:13px!important}

  /* §3 the laptop mock shows the active nav row only — a stacked nine-item menu above the
     dashboard reads as a list, not as a sidebar */
  .dash-grid > div:first-child{border-right:0!important;padding:10px 10px 0!important;gap:0!important}
  .dash-grid > div:first-child > *:not(:first-child){display:none!important}
  /* and it becomes a tablet: the base and its foot are what make a screen this tall read as a
     laptop with an impossible lid */
  .sol-frame > div:not(.sol-note) > div:nth-child(n+2){display:none!important}

  /* §3 the outcome chips, and the six-way fan that no longer points at anything once they wrap */
  .after-fan{display:none!important}
  /* the fan carried 62px of separation from the laptop above; without it the chips sit 4px off
     the laptop's base and read as overlapping it */
  .after-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
    margin-top:30px!important}

  /* §7 the founder card: 48px of side padding inside a 338px shell left a 242px column, which is
     what made the bio read as a wall. Justified, per `Sovereign` — the measure is now wide
     enough for it not to river. */
  .founder-card{padding:30px 18px 26px!important}
  .founder-card p{text-align:justify!important;hyphens:auto}

  /* the three stats stay in a row, scaled down — 18px of cell padding each was what made three
     columns unreadable, not the columns themselves */
  .founder-stats{max-width:none!important}
  .founder-stats > *{padding:0 6px!important}
  .founder-stats > * > div:first-child{width:32px!important;height:32px!important;margin-bottom:7px!important}
  .founder-stats > * > div:first-child svg{width:15px!important;height:15px!important}
  .founder-stats > * > div:nth-child(2){font-size:18px!important}
  .founder-stats > * > div:nth-child(3){font-size:11px!important;line-height:1.25!important}
  /* "Applied" is a seven-letter word where its neighbours are three characters, so the same
     font-size reads as a larger one */
  .founder-stats > *:nth-child(3) > div:nth-child(2){font-size:15px!important}

  /* §9 the conversation panel goes edge-to-edge and takes the screen. Full-bleed by negative
     margins against the shell's 16px, so the heading above it keeps its padding. Layout only —
     the pull-up sheet is #31's, together with the embed architecture a gesture would rest on.
     svh over vh so mobile browser chrome does not push the panel past the fold. */
  .talk-panel{margin-left:-16px!important;margin-right:-16px!important;
    width:calc(100% + 32px)!important;border-radius:0!important;border-left:0!important;
    border-right:0!important;box-shadow:none!important;
    min-height:100vh!important;min-height:100svh!important}
  .chat-mount{height:auto!important;min-height:64vh!important}

  /* ── Contrast and touch (WCAG 2.2 AA · iOS HIG 44pt · Material 48dp) ─────────────────────
     Audited at 375px: nine text colours failed AA, the worst at 2.42:1. The design's muted greys
     were picked for a large desktop canvas; at phone sizes they need to carry body-text duty.
     One accessible grey replaces all three failing ones (>=4.83:1 on every background the page
     uses: white, #F5F5F5, the mint band and the card fill), and the teal and rust accents darken
     just enough to clear 4.5. Phone-only, so the desktop canvas is untouched. */
  /* #9aa19f is not in this list: its only use outside the dashboard mock was the "before" label,
     which is now the problem red, and remapping it here would take that red back. */
  :is([style*="color:#8c9694"],[style*="color: #8c9694"],[style*="color:#7b8583"],
    [style*="color: #7b8583"],[style*="color:#8d9391"],
    [style*="color: #8d9391"]):not(.dash-grid *,.inbox-stage *){color:#636d6b!important}
  /* The conversation panel's greys come from its own rules, not inline styles, so the remap above misses them: the
     muted token and the unreached step's numeral take the accessible grey here (SEC-188 UX-5). */
  .talk-panel{--color-muted:var(--color-muted-a11y)}
  .step[data-state="upcoming"] .step-dot{color:var(--color-muted-a11y)}
  :is([style*="color:#0d8a86"],[style*="color: #0d8a86"]):not(.dash-grid *,.inbox-stage *){
    color:#0a6f6b!important}
  :is([style*="color:#a9645c"],[style*="color: #a9645c"]):not(.dash-grid *,.inbox-stage *){
    color:#8c4f47!important}

  /* Touch targets to 44px. The four hero-card links sit inside scale(.78), so a 46px card renders
     at 36 — reaching 44 there would need the card at 56px unscaled, which does not fit the
     overlay's 210px height and would push the stack past the left third. Their hit area is
     expanded as far as the gaps allow instead; the shortfall is recorded rather than hidden. */
  .site-logo{padding:3px 0!important;min-height:var(--touch-min)}
  .footer-links a{padding-top:11px!important;padding-bottom:11px!important}
  /* the footer's standalone contact links. The phone number inside the conversation panel's
     sentence is left alone: WCAG 2.2 SC 2.5.8 exempts a target inline in a line of text. */
  div:has(> .h-c44) a{min-height:44px!important;display:inline-flex!important;align-items:center}
  .hero-card > a{inset:-3px!important}

  /* Body copy gets a comfortable measure: the design ships one 1.30 leading, tight for 16px on a
     phone, where 1.45-1.6 is the readable band. */
  :is(p,li):not(.dash-grid *,.inbox-stage *){line-height:1.55!important}

  /* ── Type floors (`Sovereign`) ───────────────────────────────────────────────────────────
     No prose smaller than the Who We Serve paragraph (16px), and no label smaller than the
     "before" tool cards (11.5px). Keyed on the design's own inline sizes, which is why this
     needs no new hook — the design uses a small, discrete set of them.
     EXCLUDED, deliberately: the two device mockups. Their text depicts a screen at miniature
     scale — 7.5px month ticks in a laptop 220px wide, 9.9px timestamps on an inbox card — and
     at 16px they stop reading as screenshots and break those compositions outright.
     Also left alone: the footer's link row at 14px, a label rather than prose; at 16px the three
     links no longer share one line. */
  :is([style*="font-size:12px"],[style*="font-size:13px"],[style*="font-size:13.5px"],
      [style*="font-size:14px"],[style*="font-size:14.5px"],[style*="font-size:15px"],
      [style*="font-size:15.5px"]):not(.dash-grid *,.inbox-stage *,.hero-overlay *){
    font-size:16px!important}
  :is([style*="font-size:10.5px"],[style*="font-size:11px"]):not(.dash-grid *,.inbox-stage *,.hero-overlay *){font-size:11.5px!important}
  .founder-stats > * > div:nth-child(3){font-size:11.5px!important}

  /* The display headings, keyed by the size the design gave them. Every clamp() sits at its
     minimum below ~860px and the three unclamped ones never moved at all, so the page rendered a
     desktop canvas's floor of 34–52px. The majors land together at 29–30px, the secondaries
     below them, so the hierarchy reads at a phone's distance rather than at a laptop's. */
  .h-c52{font-size:33px!important;margin-bottom:18px!important}   /* The Solution headline, the sections' 33px (SEC-280) */
  .h-c44{font-size:24px!important;margin-bottom:14px!important}   /* the footer wordmark */
  .h-c40{font-size:29px!important}                                /* Your front desk is the busiest job */
  .h-c38{font-size:33px!important}                                /* Don't Let Old Systems; the hero's phone size is its own, below (SEC-284) */
  .h-c36{font-size:27px!important}
  .h-c34{font-size:25px!important}

  /* §1 the copy centres, and the image leads: on a phone the photo is the hook, and a hero that
     opens with three lines of type pushes it under the fold */
  .hero-copy{text-align:center!important;max-width:none!important;margin-top:-26px!important}
  .hero-copy > *{margin-left:auto!important;margin-right:auto!important}
  /* The first view should carry the photo, the eyebrow, the headline AND the body line. The gap
     under the masthead is the hero shell's own 44px of top padding — cut to 20px here only (the
     other nine shells keep theirs), and the copy's internal rhythm tightens with it. Together
     that lifts the body line's bottom edge ~42px, which is what puts it above a 720px fold. */
  .sec-shell:has(> .hero-copy){padding-top:12px!important}
  /* The hero's phone type, on the site's floors (prose 16px, labels 11.5px) and a mobile scale: a 12px tracked
     eyebrow, a headline about 1.85× the body that holds each phrase on one line from 360px up, and the body at 16px
     with 1.55 leading — the desktop sizes (16px eyebrow, 33px headline, 18px body) crowded a 390px column
     (`Sovereign`, SEC-284: *"phone width is too cramped … Use Mobile UX best practice typography proportions"*). */
  .hero-eyebrow{font-size:12px!important;letter-spacing:.14em!important}
  .hero-copy > .hero-eyebrow + div{margin-top:10px!important;margin-bottom:18px!important}
  .hero-copy > h1{font-size:clamp(27px,7.6vw,30px)!important;line-height:1.15!important;margin-bottom:14px!important}
  .hero-copy > p{font-size:16px!important;line-height:1.55!important;margin-bottom:24px!important}

  /* the footer: 74px of top padding above a 30px wordmark and a contact row that wraps with a
     56px margin under it. `:has()` reaches the block from the one class in it — there is nothing
     else here worth an anchor, and where it is unsupported the footer is merely taller. */
  div:has(> .h-c44){padding-top:32px!important}
  .h-c44 ~ div[style*="margin-bottom:56px"]{margin-bottom:22px!important;gap:10px 20px!important}
  .footer-links{gap:8px!important}
  .footer-links a{padding-left:6px!important;padding-right:6px!important;font-size:14px!important}

  /* the CTA pill centres wherever it sits — it is inline-flex, so text-align alone misses it
     in the sections whose copy stays left-aligned */
  .cta-primary{display:flex!important;width:fit-content!important;
    margin-left:auto!important;margin-right:auto!important}

  /* §3 the five "before" tool cards: three columns fit their labels, five do not */
  .before-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}

  .guide-portrait{float:none!important;width:100%!important;max-width:320px!important;margin:0 auto 22px!important}

  /* the solution dashboard: drop the handwritten notes, give the card the full width */
  .sol-note{display:none!important}
  .sol-frame{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
  .dash-grid{grid-template-columns:1fr!important}
  .sol-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .sol-toasts-stack{width:auto!important;left:0}
}

/* Narrow phones (320–400px): the CTA pill is nowrap at a fixed 314px, so it is the one element
   that outgrows the viewport before the layout does. Tracking and padding come in rather than
   the label wrapping. */
@media (max-width:400px){
  .cta-primary{gap:8px!important;padding-left:20px!important;padding-right:20px!important;
    font-size:12px!important;letter-spacing:.06em!important}
}

/* A landscape laptop screen; scale the complete illustration rather than stretching its lid. */
.sol-laptop-display{aspect-ratio:16 / 10;width:100%}
.sol-laptop-canvas{position:absolute;inset:0 auto auto 0;width:640px;height:400px;transform-origin:top left}
.sol-laptop-canvas .dash-grid{grid-template-columns:104px minmax(0,1fr)!important;height:355px}
.sol-laptop-canvas .dash-grid > div:first-child{border-right:1px solid var(--color-line-soft)!important;padding:12px 10px!important;gap:9px!important}
.sol-laptop-canvas .dash-grid > div:first-child > *{display:flex!important}
.sol-laptop-canvas .dash-grid > div:last-child{padding:10px 14px!important}
.sol-laptop-canvas .sol-metric-card{height:92px;gap:3px;padding:7px 10px}
.sol-laptop-canvas .sol-quality-gauge{width:50px;height:50px}
.sol-laptop-canvas .sol-task-count{margin-top:0;font-size:27px}
.sol-laptop-canvas .sol-task-trend{height:20px}
.sol-laptop-canvas .sol-quality-panel{padding:9px 12px;margin-top:9px}
.sol-laptop-canvas .sol-quality-list{margin-top:7px}
.sol-laptop-canvas .sol-review-icon{width:30px;height:30px}
.sol-laptop-canvas .sol-review-icon svg{width:16px;height:16px}
.sol-laptop-canvas .sol-review-flow::before{top:14px}
.sol-laptop-canvas .sol-review-stage{gap:3px}
.sol-laptop-canvas .sol-review-loop{margin-top:0;font-size:8px;line-height:1.25}
.sol-laptop-canvas .sol-review-loop svg{height:15px}
.sol-laptop-canvas .sol-review-summary{margin-top:5px;padding-top:5px}
.sol-laptop-canvas .sol-toasts{height:24px;margin-top:4px}
.sol-laptop-canvas .sol-toasts-stack{left:auto!important;right:0;width:220px!important}

/* Keep the important dashboard information readable when the laptop illustration scales. */
.sol-laptop-canvas .dash-grid{grid-template-columns:88px minmax(0,1fr)!important}
.sol-laptop-canvas .dash-grid > div:first-child{padding:12px 8px!important;gap:11px!important}
.sol-laptop-canvas .dash-grid > div:first-child > div{font-size:11px!important}
.sol-laptop-canvas .dash-grid > div:last-child > div:first-child > div:first-child{font-size:17px!important}
.sol-laptop-canvas .dash-grid > div:last-child > div:first-child > div:last-child{font-size:10px!important}
.sol-laptop-canvas .sol-metric-card{height:124px;padding:9px 12px;gap:3px}
.sol-laptop-canvas .sol-metric-label{font-size:14px}
.sol-laptop-canvas .sol-quality-gauge{width:69px;height:69px}
.sol-laptop-canvas .sol-quality-gauge > span{font-size:30px}
.sol-laptop-canvas .sol-quality-gauge small{font-size:14px}
.sol-laptop-canvas .sol-task-count{font-size:42px}
.sol-laptop-canvas .sol-task-trend{height:24px}
.sol-laptop-canvas .sol-metric-caption{font-size:10px}
.sol-laptop-canvas .sol-quality-panel{padding:10px 12px}
.sol-laptop-canvas .sol-panel-heading{font-size:14px}
.sol-laptop-canvas .sol-panel-subline{display:none}
.sol-laptop-canvas .sol-review-icon{width:36px;height:36px}
.sol-laptop-canvas .sol-review-icon svg{width:22px;height:22px}
.sol-laptop-canvas .sol-review-flow::before{top:17px}
.sol-laptop-canvas .sol-review-stage{font-size:12px;line-height:1.2;gap:4px}
.sol-laptop-canvas .sol-review-loop span{display:none}
.sol-laptop-canvas .sol-review-summary{font-size:10px}
.sol-laptop-canvas .sol-review-badge{font-size:9px}
.sol-laptop-canvas .sol-toast-text{font-size:11px}
.sol-laptop-canvas .sol-toasts-stack{width:270px!important}

/* Let the dashboard lead; the supporting notes no longer take space from the screen. */
.sol-frame{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 24px!important}
.sol-frame > div:nth-child(2){grid-column:1 / -1;grid-row:1;min-width:0}
.sol-frame > .sol-note{grid-row:2;text-align:center!important;font-size:21px}
.sol-frame > .sol-note > div > div{display:inline}
.sol-frame > .sol-note > div > div::after{content:" "}
.sol-frame > .sol-note > svg{display:none}
.sol-laptop-canvas .sol-metric-card{padding:10px 16px}
.sol-laptop-canvas .sol-quality-panel{padding:12px 16px}
.sol-laptop-canvas .sol-quality-list{margin-top:9px}
@media(max-width:720px){
  .sol-frame{grid-template-columns:minmax(0,1fr)!important}
}

/* Match the scale and vertical alignment of the two dashboard metrics. */
.sol-laptop-canvas .sol-metric-card{justify-content:space-between;height:124px}
.sol-laptop-canvas .sol-quality-gauge{width:76px;height:76px;flex-shrink:0}
.sol-laptop-canvas .sol-quality-gauge > span{font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.sol-laptop-canvas .sol-quality-number{display:block;white-space:nowrap}
.sol-laptop-canvas .sol-quality-gauge small{font-size:12px;vertical-align:baseline;margin-left:1px}
.sol-laptop-canvas .sol-task-figure{height:76px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.sol-laptop-canvas .sol-task-count{font-size:28px;line-height:1;margin:0}
.sol-laptop-canvas .sol-task-trend{height:14px;max-width:150px;flex-shrink:0}

.sol-laptop-canvas .sol-quality-gauge svg{stroke-width:5}

/* Shared metric rows keep captions aligned and inside the card padding. */
.sol-laptop-display{aspect-ratio:80 / 53}
.sol-laptop-canvas{height:424px}
.sol-laptop-canvas .dash-grid{height:379px}
.sol-laptop-canvas .sol-metric-card{display:grid;grid-template-rows:20px 76px 14px;row-gap:6px;justify-items:center;align-items:center;align-content:start;height:148px;padding:12px 16px;box-sizing:border-box}
.sol-laptop-canvas .sol-metric-label{margin:0;line-height:20px}
.sol-laptop-canvas .sol-metric-caption{margin:0;line-height:14px}
.sol-laptop-canvas .sol-task-figure{height:76px;gap:8px;justify-content:center}
.sol-laptop-canvas .sol-task-trend{height:32px;max-width:210px}

/* Explicit full-width grid tracks prevent inherited flex spacing from shifting metrics. */
.sol-laptop-canvas .sol-metric-card{grid-template-columns:minmax(0,1fr);justify-content:stretch;text-align:center}
.sol-laptop-canvas .sol-metric-label,.sol-laptop-canvas .sol-metric-caption{width:100%;text-align:center}
.sol-laptop-canvas .sol-task-figure{justify-self:stretch;align-items:center}

/* ── Who We Serve, Our Commitment and the plan (SEC-280, the design handoff v12) ─────────────────
   Class-scoped, with no inline styles to out-specify, so no rule here needs !important. Each block
   lays itself out by a container query on its own shell — the width its columns actually get —
   never by a viewport breakpoint (the responsive layer's first rule, above). The small icons are
   decorative: aria-hidden, no focus stop, the heading beside each one carries the meaning. */

/* Who We Serve: the headline and the reception scene, three audience attributes, and the closing
   statement — the old pull quote, now the section's last word (#vision). */
.wws-shell{max-width:1360px;margin:0 auto;padding:64px clamp(20px,5vw,50px);container:wws / inline-size}
.wws-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:48px;align-items:center}
.wws-paw{display:block;width:24px;height:24px;fill:var(--color-brand);margin:0 0 24px}
.wws-title{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1.12;
  color:var(--color-ink-strong);margin:0 0 22px;text-wrap:balance}
.wws-title span{color:var(--color-brand-deep)}
.wws-lede{font-size:17px;line-height:1.6;color:var(--color-text);margin:0;max-width:46ch}
/* the scene's edges fade in CSS, the file left unfaded (the photographs' two-axis mask) */
.wws-scene{display:block;justify-self:end;width:100%;max-width:540px;height:auto;aspect-ratio:1080 / 608;
  object-fit:cover;object-position:50% 50%;
  mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%);
  mask-composite:intersect;mask-repeat:no-repeat;mask-size:100% 100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%}
.wws-attrs{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.wws-attr{padding:0 28px;border-left:1px solid #dce9e5;min-width:0}
.wws-attr:first-child{padding-left:0;border-left:0}
.wws-attr:last-child{padding-right:0}
.wws-well{display:flex;align-items:center;justify-content:center;width:var(--well-md);height:var(--well-md);
  border-radius:999px;background:var(--color-brand-tint);margin:0 0 18px}
.wws-well svg{width:22px;height:22px}
.wws-attr h3{font-family:var(--font-body);font-weight:700;font-size:18px;line-height:1.35;color:var(--color-ink-strong);
  margin:0 0 12px;min-height:2.7em}
.wws-attr p{font-size:17px;line-height:1.55;color:var(--color-text);margin:0}
.wws-close{margin:44px 0 0;background:var(--color-brand-tint-soft);padding:44px 40px;text-align:center}
.wws-close-open{font-size:21px;line-height:1.5;color:var(--color-text);margin:0 auto 26px;max-width:58ch;text-wrap:balance}
.wws-close-end{font-family:var(--font-display);font-weight:700;font-size:36px;line-height:1.2;color:var(--color-brand-deep);
  margin:0 auto;max-width:32ch;text-wrap:balance}

/* stacked: the headline, then the scene at its full width; three columns of 260px no longer fit
   below ~860px of content, so the attributes stack too — never two plus an orphan — each icon
   small and beside its heading, the description under the heading's text column */
@container wws (max-width:999px){
  .wws-top{grid-template-columns:minmax(0,1fr);gap:28px}
  .wws-scene{justify-self:center}
}
@container wws (max-width:859px){
  .wws-attrs{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .wws-attr{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:start;
    padding:24px 0 0;margin-top:24px;border-left:0;border-top:1px solid #dce9e5}
  .wws-attr:first-child{margin-top:0;padding-top:0;border-top:0}
  .wws-well{width:var(--well-xs);height:var(--well-xs);margin:0;grid-row:1}
  .wws-well svg{width:19px;height:19px}
  /* the heading's first line centres on the 32px well: 18px x 1.35 = 24.3px, so 4px down */
  .wws-attr h3{grid-column:2;margin:4px 0 9px;min-height:0}
  .wws-attr p{grid-column:2;font-size:16px;line-height:1.6}
  .wws-close{margin-top:32px;padding:30px 22px}
  .wws-close-open{font-size:18px;line-height:1.5;margin-bottom:22px}
  .wws-close-end{font-size:28px;line-height:1.25}
}
@container wws (max-width:560px){
  .wws-title{font-size:33px;line-height:1.15}
  .wws-lede{font-size:16px}
  .wws-top{gap:24px}
}

/* Our Commitment: the heading centred over three stacked cards at every width */
.cmt-shell{max-width:1400px;margin:0 auto;padding:60px clamp(20px,5vw,50px) 64px;container:cmt / inline-size}
/* the shield beside the heading, sized to it: its outline fills ~75% of the box, so a 38px shield stands about as
   tall as the 44px heading's capitals (`Sovereign`, SEC-280's first-version look) */
.cmt-head{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:14px;margin:0 0 36px;text-align:center}
.cmt-head svg{width:38px;height:38px;flex:0 0 auto}
.cmt-title{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1.1;color:var(--color-brand-deep);margin:0}
.cmt-cards{list-style:none;margin:0 auto;padding:0;max-width:1120px;display:flex;flex-direction:column;gap:18px}
.cmt-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:center;background:var(--color-surface-tint);
  border:1px solid var(--color-line);border-radius:14px;padding:14px 24px 14px 14px;box-shadow:0 14px 30px -28px rgba(20,50,48,.3)}
.cmt-card img{display:block;width:180px;height:180px;border-radius:999px;object-fit:cover}
.cmt-text{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start}
.cmt-num{width:34px;height:34px;border-radius:999px;background:var(--color-brand-deep);color:#ffffff;font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.cmt-body{border-left:1px solid #e6efee;padding-left:18px;max-width:72ch}
.cmt-body h3{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.2;color:var(--color-brand);margin:0 0 10px}
.cmt-body p{font-size:16.5px;line-height:1.6;color:var(--color-text);margin:0}

/* narrow: the shield sits beside the heading rather than on a row of its own, and each card stacks
   its picture over its text, the text kept left-aligned */
@container cmt (max-width:720px){
  .cmt-head{gap:11px;margin-bottom:28px}
  .cmt-head svg{width:29px;height:29px}
  .cmt-title{font-size:33px}
  .cmt-card{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px 18px 22px}
  .cmt-card img{width:140px;height:140px;margin:0 auto}
  .cmt-text{grid-template-columns:30px minmax(0,1fr);gap:12px}
  .cmt-num{width:30px;height:30px;font-size:12px}
  .cmt-body{border-left:0;padding-left:0}
  .cmt-body h3{font-size:21px;margin-bottom:8px}
  .cmt-body p{font-size:16px}
}
@container cmt (max-width:310px){
  /* a 320px screen: a size down, so the heading and its shield still share one line */
  .cmt-head{gap:9px}
  .cmt-head svg{width:25px;height:25px}
  .cmt-title{font-size:29px}
}

/* The plan: the tangle-to-partner graphic beside three immediate steps, numbered once, the icon beside each heading.
   The two columns wrap at 330 + 44 + 400 = 774px of content, the graphic first; the steps query their own column, so
   beside the graphic they take the compact form a phone does (`Sovereign`, SEC-280's first-version look). */
.plan-shell{max-width:1320px;margin:0 auto;padding:72px clamp(20px,5vw,50px) 80px;container:plan / inline-size}
.plan-head{max-width:840px;margin:0 auto 44px;text-align:center}
.plan-title{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1.1;letter-spacing:-.01em;
  color:var(--color-ink);margin:0 0 18px;text-wrap:balance}
.plan-head p{font-size:17px;line-height:1.6;color:var(--color-text);margin:0 auto 22px;max-width:48ch;text-wrap:balance}
.plan-rule{width:72px;height:2px;background:var(--color-brand);margin:0 auto}
.plan-body{display:flex;flex-wrap:wrap;gap:44px;align-items:flex-start}
.plan-steps{flex:1 1 400px;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;
  container:steps / inline-size}
.plan-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start;background:var(--color-surface-tint);
  border:1px solid var(--color-line);border-radius:14px;padding:22px 28px 24px 22px;box-shadow:0 14px 30px -28px rgba(20,50,48,.3)}
.plan-well{width:var(--well-md);height:var(--well-md);border-radius:999px;background:var(--color-brand-tint);
  display:flex;align-items:center;justify-content:center}
.plan-well svg{width:22px;height:22px}
/* the step's icon is its one mark, and the heading names the step — "Step 1: …" — so no number badge repeats it
   (`Sovereign`, SEC-280's look, rounds 2 and 5); 25px x 1.2 = 30px, so 7px down centres the first line on the 44px well */
.plan-step h3{font-family:var(--font-display);font-weight:400;font-size:25px;line-height:1.2;color:var(--color-ink);margin:7px 0 8px;min-width:0}
.plan-text p{font-size:16.5px;line-height:1.6;color:var(--color-text);margin:0;max-width:72ch}
.plan-cta{text-align:center;margin-top:48px}

@container plan (max-width:720px){
  .plan-title{font-size:33px}
  .plan-head{margin-bottom:32px}
  .plan-head p{font-size:16px}
}
@container steps (max-width:560px){
  .plan-step{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:18px 18px 20px 14px}
  .plan-well{width:var(--well-xs);height:var(--well-xs)}
  .plan-well svg{width:19px;height:19px}
  /* 20px x 1.25 = 25px: the heading's first line centres on the 32px well */
  .plan-step h3{font-size:20px;line-height:1.25;margin:3.5px 0 8px}
  .plan-text p{font-size:16px}
}