/* 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: #008080; text-decoration: none; }
  a:hover { color: #00b3b3; }
  input, textarea { font-family: 'Lato', sans-serif; }
  @keyframes sorInboxRise { from { opacity: 0; transform: translateY(90px) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes sorWave { 0%, 100% { opacity: .45; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1.25); } }
  @keyframes sorMicPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
  @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}
.hv6:hover,.hv6.tapped{background:#f4faf9}
.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)}

/* --- component rules ---------------------------------------------------------------------- */
/* The pace of the two ambient animations — the inbox stage under "The Problem" and the dashboard
   under "The Solution" — as a multiple of the design's own timing. ONE home: 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 original timing stays legible and the pace is a single number.
   (SEC-013, `Sovereign`: 1.5x — "needs to catch eye quick"; this is the one change in that SEC
   that is deliberately not phone-only.) */
:root{--motion:1.5}

/* 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}
.inbox-pill-count{background:#b5443a;color:#ffffff;border-radius:999px;padding:7px 16px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 4px 10px -5px rgba(150,50,40,.6),inset 0 1px 0 rgba(255,255,255,.22)}

/* 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 */
.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 small-screen nav toggle (SEC-013). Emitted by build_www.py; `display:none` here keeps it
   out of the masthead's flex layout entirely at desktop and tablet widths, where the three links
   sit in the header as the design intended. The pressed state borrows the hero cards' language —
   a lift and the same teal glow — because it is the one press affordance the site already has. */
.nav-toggle{display:none;background:none;border:0;padding:6px;margin:0;cursor:pointer;
  line-height:0;-webkit-tap-highlight-color:transparent;
  transition:transform .34s cubic-bezier(.22,1,.36,1),filter .34s ease}
.nav-toggle svg{transition:stroke .34s ease}
.nav-toggle:focus-visible{outline:2px solid #0d7a72;outline-offset:3px;border-radius:6px}
/* Open state: three stacked drop-shadows on the bare strokes make a halo rather than a box —
   still no border, which is what the icon was asked to be. */
.nav-toggle.tapped{transform:translateY(-2px) scale(1.08);
  filter:drop-shadow(0 0 6px rgba(13,122,114,.98))
         drop-shadow(0 0 16px rgba(13,122,114,.78))
         drop-shadow(0 0 30px rgba(13,122,114,.5))}
/* the darker brand teal (#0d7a72 — the design's own interactive teal, as on .hv1:hover and the
   who-we-serve connector), on the halo AND the strokes: brightening the icon was half of what
   read as washed out */
.nav-toggle.tapped svg{stroke:#0d7a72}

/* 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 */
.vf-chat-wrap{flex:1 1 auto;display:flex;min-height:340px;position:relative}
.vf-chat{flex:1 1 auto;min-width:0;height:520px;position:relative}
.vf-chat > *{height:100%}
.vf-chat-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13.5px;color:#7b8583}
[data-voice-state="connecting"] .voice-dot{background:#e0b341}
[data-voice-state="error"] .voice-dot{background:#c0564a}
[data-voice-state="connecting"] .voice-mic-pulse{animation-duration:1.1s}
.voice-hint-error{color:#b5544a}

/* ── Responsive ───────────────────────────────────────────────────────────────────────────
   The source is a desktop canvas with no mobile counterpart, so the breakpoints below are
   derived, not exported (SEC-013). Every selector is a class injected by build_www.py step 7b
   — the design's inline styles are kept byte-for-byte (ADC-063 D5), which is why these rules
   need !important to reach them. A hook that stops being injected is caught by
   test_vercel_apps.py's dangling-hook control, never silently. */

/* ── The stacked band ──────────────────────────────────────────────────────────────────────
   Three 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 and commitment rows stack up to ~1029 and sit
   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, which is also the number the design itself
   hard-codes in the image's margin. 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}

@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}
}

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

     the commitment row pairs at content 340 + 32 + 620 = 992px  (a ~1092px viewport)
     the solution shell pairs at content 380 + 60 + 560 = 1000px (a ~1100px viewport)

   Holding these rules to a 1150px viewport left the commitment portrait hidden for ~60px AFTER
   its row had already paired — a column of dead space where the photo belonged. Each now queries
   its own row. */
.sec-shell:has(img[src$="commit-robot.png"]){container:commit / inline-size}
.sec-shell:has(.sol-frame){container:solution / inline-size}

@container commit (max-width:991px){
  /* stacked, the portrait sits alone on a row with dead space beside it; it is desktop filler,
     so it goes until the row pairs again */
  img[src$="commit-robot.png"]{display:none!important}
}

@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}
}

/* 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}
  /* The who-we-serve grid keeps the design's three columns here. Two-across left the third card
     orphaned under a three-prong connector, and every fix for that — squeezing the fork, painting
     a centre rule — added weight to hide a layout that was not wrong to begin with. */
}

/* The masthead collapses at 800px, not at the phone breakpoint. Three links plus the logo need
   more room than a 762px row gives them: below ~800 they wrap to a second line under the logo,
   which reads as a broken row rather than as navigation (`Sovereign`, measured at 762). Opened,
   the links CENTRE on the page rather than hanging off the button. */
@media (max-width:800px){
  .nav-toggle{display:inline-flex!important}
  /* the collapsed nav is still a flex line, so the header's 16px row-gap sits under the logo as
     dead space while the menu is shut; the open state brings its own padding-top instead */
  .site-header{row-gap:0!important}
  /* It opens rather than appears: `display` cannot transition, so the row stays laid out and
     animates its height, opacity and offset. `visibility` is carried on the same timing so the
     links are not tabbable while the menu is shut — with max-height alone they would be. */
  .site-nav{display:flex!important;flex-basis:100%;order:3;gap:22px!important;
    justify-content:center;flex-wrap:wrap;
    overflow:hidden;max-height:0;opacity:0;visibility:hidden;transform:translateY(-6px);
    padding-top:0!important;
    transition:max-height .68s cubic-bezier(.22,1,.36,1),opacity .44s ease,
      transform .64s cubic-bezier(.22,1,.36,1),padding-top .68s ease,visibility 0s linear .68s}
  .site-nav.open{max-height:140px;opacity:1;visibility:visible;transform:none;
    padding-top:6px!important;
    transition:max-height .76s cubic-bezier(.22,1,.36,1),opacity .6s ease .12s,
      transform .76s cubic-bezier(.22,1,.36,1),padding-top .76s ease,visibility 0s}
  /* A centred rule under two thirds of the label — a full-width one reads clunky under short
     words. Neither a border nor a text-decoration can be trimmed to a fraction, so it is a
     pseudo-element; that also survives the design's `background` shorthand on the link's hover
     rule, which would blank a background-image drawn the other way. Faint on purpose: it marks
     the label without competing with it. */
  .site-nav a{position:relative;padding:2px 0 7px!important;border:0!important;
    border-radius:0!important;text-decoration:none!important}
  .site-nav a::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:66%;height:1px;background:rgba(13,138,134,.32)}
}

/* Phone. */
@media (max-width:720px){
  /* masthead — smaller again; the collapse itself happens at 800 above */
  .site-header{padding-top:20px!important;padding-bottom:14px!important;gap:10px!important}
  .site-logo img{height:38px!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(300px,80%)!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}
  .inbox-card-time{font-size:10.5px!important;white-space:nowrap}
  .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}

  /* §5 the T-branch connector becomes one line, continued behind the stacked cards */
  .who-connector{height:26px!important}
  .who-connector path:nth-of-type(2){display:none}
  .who-grid{position:relative}
  .who-grid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
    background:#cfe0dd;transform:translateX(-.5px);z-index:0}
  .who-grid > *{position:relative;z-index:1}

  /* §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}
  .vf-chat{height:auto!important;min-height:64vh!important}

  /* the commitment portrait is hidden from the tablet breakpoint down (see above) */

  /* §8 the numbered steps: one centred card each. The 01/02/03 badges go — the steps are already
     labelled "Step 1", and stacked they number the same thing twice. */
  .step-row{grid-template-columns:1fr!important;gap:10px!important;justify-items:center}
  .step-row > *:first-child{display:none!important}
  .step-card{display:block!important;text-align:center!important;padding:18px 16px!important}
  .step-card > *:first-child{margin:0 auto 12px!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}
  :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}
  .nav-toggle{padding:9px!important}
  .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:30px!important;margin-bottom:18px!important}   /* One Partner, Not Five Vendors */
  .h-c44{font-size:24px!important;margin-bottom:14px!important}   /* the footer wordmark */
  .h-c42{font-size:27px!important}
  .h-c40{font-size:29px!important}                                /* Your front desk is the busiest job */
  .h-c38{font-size:33px!important}                                /* the hero, and Don't Let Old Systems */
  /* the tablet block enlarges the hero h1 with a higher-specificity selector, which would
     otherwise carry down here and undo the 33px above */
  .hero-copy > h1{font-size:33px!important}
  .h-c36{font-size:27px!important}
  .h-c34{font-size:25px!important}
  .h-c19{font-size:17px!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 headline, the subhead 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}
  .hero-copy > h1{margin-bottom:10px!important}
  .hero-copy > p:first-of-type{margin-bottom:10px!important}
  .hero-copy > div{margin-bottom:10px!important}
  .hero-copy > p:last-of-type{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}

  /* §6 the Our Commitment header centres with the cards below it */
  .commit-head{text-align:center!important;max-width:none!important}
  .commit-head > *{margin-left:auto!important;margin-right:auto!important}

  /* one column everywhere the design assumed two or three */
  .who-grid{grid-template-columns:1fr!important}
  .commit-card{grid-template-columns:1fr!important}
  .commit-card img{width:140px!important;height:140px!important;margin:0 auto}
  .guide-portrait{float:none!important;width:100%!important;max-width:320px!important;margin:0 auto 22px!important}

  /* the pull-quote's decorative glyphs, scaled to the section they now sit in */
  .quote-mark{font-size:92px!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}
}