/* ── Built by Offshift · production layer ──────────────────────────────────────
   The design system's tokens carry every colour, type step and rhythm. This file
   turns them into the classes the page uses, and adds the two things the kit did
   not need: real mobile layout, and CSS state for interactions that used to be
   React state. No new colours, no new type steps. */

html{scroll-behavior:smooth;scroll-padding-top:88px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:hidden;text-wrap:pretty}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--signal-500);color:var(--ink-850);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;border:none}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── type ─────────────────────────────────────────────────────────────────── */
.d-xl{font:var(--type-display-xl);letter-spacing:var(--tracking-display)}
.d-m{font:var(--type-display-m);letter-spacing:var(--tracking-display)}
.d-s{font:var(--type-display-s);letter-spacing:var(--tracking-display)}
.h-l{font:var(--type-heading-l)}
.h-m{font:var(--type-heading-m)}
.h-s{font:var(--type-heading-s)}
.b-l{font:var(--type-body-l);color:var(--text-secondary)}
.b-m{font:var(--type-body-m);color:var(--text-secondary)}
.b-s{font:var(--type-body-s);color:var(--text-secondary)}
.ink{color:var(--text-primary)}
.prose{max-width:var(--measure-prose)}
.num{font-variant-numeric:tabular-nums}
.mt-1{margin-top:8px}.mt-2{margin-top:14px}.mt-3{margin-top:20px}.mt-4{margin-top:28px}.mt-5{margin-top:40px}.mt-6{margin-top:48px}

/* ── layout ───────────────────────────────────────────────────────────────── */
.sec{padding:var(--section-pad-y) var(--grid-margin)}
.sec-in{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:var(--grid-datum-gutter) 1fr;gap:var(--grid-gutter)}
.wrap{max-width:var(--container-max);margin:0 auto}
.eb{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-meta);display:flex;gap:10px;align-items:baseline}
.eb i{font-style:normal;color:var(--text-primary);font-variant-numeric:tabular-nums}
.col{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gutter)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gutter)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gutter)}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.split-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
.hair{border-top:1px solid var(--line-hairline)}
.rule{border-top:var(--border-datum) solid var(--line-datum)}

/* ── masthead ─────────────────────────────────────────────────────────────── */
#masthead{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:32px;height:72px;padding:0 32px;border-bottom:1px solid var(--line-hairline);background:var(--surface-page)}
#masthead a{border:none}
.mast-nav{display:flex;align-items:center;gap:4px;margin-left:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.mast-nav::-webkit-scrollbar{display:none}
.mast-nav a{position:relative;padding:10px 12px;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap;color:var(--text-meta)}
.mast-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:transparent}
.mast-nav a:hover{color:var(--text-primary)}
.mast-nav a[aria-current]{color:var(--text-primary)}
.mast-nav a[aria-current]::after{background:var(--signal-500)}
.mast-act{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.mast-assess{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-meta)}
.mast-assess:hover{color:var(--text-primary)}
@media(max-width:940px){#masthead{gap:14px;padding:0 18px}.mast-nav,.mast-assess{display:none}}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;font:600 15px/1 var(--font-body);letter-spacing:-.005em;border:1px solid var(--text-primary);border-radius:var(--radius-1);background:var(--text-primary);color:var(--surface-page);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--motion-quick) var(--ease-settle),color var(--motion-quick) var(--ease-settle),border-color var(--motion-quick) var(--ease-settle)}
a.btn{border-bottom:1px solid var(--text-primary);padding-bottom:0}
.btn-lg{height:52px;padding:0 28px;font-size:17px;gap:10px}
.btn-sm{height:32px;padding:0 14px;font-size:13px;gap:6px}
.btn-signal,a.btn-signal{background:var(--signal-500);color:var(--ink-850);border-color:var(--signal-500)}
.btn-signal:hover,a.btn-signal:hover{background:var(--signal-600);border-color:var(--signal-600);color:var(--ink-850)}
.btn-sec,a.btn-sec{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn-sec:hover,a.btn-sec:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary);border-color:var(--line-strong)}
.btn-ghost,a.btn-ghost{background:transparent;color:var(--text-primary);border-color:transparent}
.btn-ghost:hover,a.btn-ghost:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary)}
.btn-block{display:flex;width:100%}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ── icons ────────────────────────────────────────────────────────────────── */
.ic{width:20px;height:20px;flex:none;display:inline-block}
.ic-12{width:12px;height:12px}.ic-14{width:14px;height:14px}.ic-16{width:16px;height:16px}.ic-18{width:18px;height:18px}.ic-22{width:22px;height:22px}
.ic-meta{color:var(--text-meta)}

/* ── devices ──────────────────────────────────────────────────────────────── */
.ring{box-sizing:border-box;border-radius:50%;border:2px solid var(--text-meta);flex:none;display:inline-block;width:16px;height:16px}
.ring-12{width:12px;height:12px}.ring-14{width:14px;height:14px}
.ring-active,.ring-resolved{border-color:var(--signal-500)}
.ring-waiting{border-color:var(--steel-500)}
.ring-attention{border-color:var(--state-attention)}
.ring-blocked{border-color:var(--state-blocked)}

.datum{display:flex;align-items:center;gap:12px;width:100%}
.datum-l{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-meta);flex:none}
.datum.is-active .datum-l{color:var(--text-primary)}
.datum span.ln{flex:1;height:var(--border-datum);background:var(--line-datum);min-width:16px}
.datum span.nd{width:7px;height:7px;flex:none;background:var(--text-meta)}
.datum.is-active span.nd{background:var(--signal-500)}
.datum.is-blocked span.nd{background:var(--fault-500)}
.datum.is-resolved span.nd{background:var(--signal-500)}

.chip{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px 0 8px;border:1px solid var(--line-hairline);border-radius:var(--radius-1);background:var(--surface-raised);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-primary);white-space:nowrap}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line-hairline);border-radius:var(--radius-1);background:transparent;color:var(--text-secondary);font:var(--type-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;white-space:nowrap}
.badge-outline{border-color:var(--line-strong);color:var(--text-primary)}
.badge-signal{background:var(--signal-500);border-color:var(--signal-500);color:var(--ink-850)}
/* tier tags on the build board are links to the Websites section */
a.badge-link{border-bottom-width:1px;text-decoration:none;transition:color var(--motion-quick) var(--ease-settle),border-color var(--motion-quick) var(--ease-settle),background var(--motion-quick) var(--ease-settle)}
a.badge-link:hover,a.badge-link:focus-visible{color:var(--ink-850);background:var(--signal-500);border-color:var(--signal-500)}

.stat{display:flex;flex-direction:column;gap:8px}
.stat-l{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-meta)}
.stat-v{font:var(--type-display-s);letter-spacing:var(--tracking-display);color:var(--text-primary);font-variant-numeric:tabular-nums}

.card{background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-1);padding:24px;display:flex;flex-direction:column;gap:14px}
.card-top{border-top:var(--border-datum) solid var(--line-datum)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{display:flex;gap:10px;font:var(--type-body-m);color:var(--text-secondary)}
.list-s li{font:var(--type-body-s)}
.list .ic{margin-top:4px;color:var(--text-meta)}
.list-check .ic{color:var(--text-link)}

.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:20px 1fr;gap:16px}
.tl-rail{display:flex;flex-direction:column;align-items:center}
.tl-rail .ln{flex:1;width:1px;background:var(--line-hairline);margin:6px 0}
.tl-b{padding-bottom:22px;display:flex;flex-direction:column;gap:4px}
.tl li:last-child .tl-b{padding-bottom:0}
.tl-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tl-h .t{font:var(--type-heading-s);color:var(--text-primary)}
.tl-h .m{font:var(--type-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--text-meta)}
.tl.seq{margin-top:38px}

/* work light — the brand's atmospheric device, Ink fields only */
.wl{position:relative;isolation:isolate}
.wl::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(ellipse 27% 23% at 8% 108%,rgba(200,241,53,.11) 0%,rgba(200,241,53,0) 70%),radial-gradient(ellipse 68% 61% at 8% 108%,rgba(242,169,59,.154) 0%,rgba(242,169,59,.055) 38%,rgba(242,169,59,0) 72%)}
.wl>*{position:relative;z-index:1}
.wl-soft::before{background-image:radial-gradient(ellipse 23% 20% at 8% 108%,rgba(255,236,196,.063) 0%,rgba(255,236,196,0) 70%),radial-gradient(ellipse 68% 61% at 8% 108%,rgba(242,169,59,.126) 0%,rgba(242,169,59,.045) 38%,rgba(242,169,59,0) 72%)}
.wl-dawn::before{background-image:radial-gradient(ellipse 940px 360px at 50% 0%,rgba(242,169,59,.26) 0%,rgba(242,169,59,.115) 44%,rgba(242,169,59,.03) 68%,rgba(242,169,59,0) 82%)}

/* the crossing — one way, once per page */
.crossing{position:relative;overflow:hidden}
.crossing .sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--ledger-200) 0%,#EFE7D6 10%,#DCC9A2 22%,#B58F5C 34%,#6E5F41 46%,#3A4636 58%,#1C2A23 70%,var(--ink-850) 82%,var(--ink-850) 100%)}
.crossing .glow{position:absolute;inset:0;background-image:radial-gradient(ellipse 940px 360px at 50% 100%,rgba(242,169,59,.26) 0%,rgba(242,169,59,.115) 44%,rgba(242,169,59,.03) 68%,rgba(242,169,59,0) 82%)}
.crossing .body{position:relative;height:400px;padding:0 var(--grid-margin);display:flex;align-items:flex-end}
.crossing .in{max-width:var(--container-max);margin:0 auto;width:100%;padding-bottom:40px;display:grid;grid-template-columns:var(--grid-datum-gutter) 1fr;gap:var(--grid-gutter);align-items:start}
.crossing .time{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--flare-500);font-variant-numeric:tabular-nums}
.crossing .bar{height:var(--border-datum);background:var(--flare-500);opacity:.9;margin-bottom:18px}
.crossing h2{color:var(--ledger-050)}
.crossing p{font:var(--type-body-m);color:var(--steel-300);margin-top:12px;max-width:var(--measure-prose)}
@media(max-width:720px){.crossing .body{height:260px}}

/* ── the spine ────────────────────────────────────────────────────────────── */
.spine-rail{position:absolute;top:168px;bottom:168px;left:0;width:0}
.spine-stick{position:sticky;top:50vh;height:0}
.spine{position:absolute;left:14px;top:0;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:4px}
.spine-i{position:relative;display:block;width:22px;height:18px;border:none}
.spine-i .nd{position:absolute;left:0;top:4px;width:10px;height:10px;background:transparent;outline:1px solid var(--text-meta);outline-offset:-1px;opacity:.34;transition:background var(--motion-base) var(--ease-settle),opacity var(--motion-base) var(--ease-settle)}
.spine-i[data-passed] .nd{background:var(--text-meta);opacity:.5}
.spine-i:hover .nd,.spine-i:focus-visible .nd{outline-color:var(--state-active);opacity:1}
.spine-i[aria-current] .nd{background:var(--state-active);outline-color:var(--state-active);opacity:1;box-shadow:0 0 0 2px var(--ink-850)}
.spine-i .lb{position:absolute;left:20px;top:0;display:none;gap:8px;padding:3px 9px;white-space:nowrap;font:var(--type-meta);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-inverse);background:var(--surface-inverse)}
.spine-i .lb i{font-style:normal;opacity:.6}
.spine-i:hover .lb,.spine-i:focus-visible .lb{display:flex}
@media(max-width:1180px){.spine-rail{display:none}}

/* ── 04 · the missed-call demonstration ───────────────────────────────────── */
.panel{border:1px solid var(--line-hairline);border-radius:var(--radius-1);background:var(--surface-card);overflow:hidden}
.panel-h{padding:14px 20px;border-bottom:1px solid var(--line-hairline);display:flex;align-items:center;justify-content:space-between;gap:12px}
.sim{padding:20px;display:flex;flex-direction:column;gap:2px;min-height:316px}
.sim-row{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:start;padding:14px 0;transform:translateY(4px);transition:transform var(--motion-slow) var(--ease-settle)}
.sim-row+.sim-row{border-top:1px solid var(--line-hairline)}
.sim-row .ic,.sim-row .t,.sim-row .d{color:var(--text-meta);transition:color var(--motion-slow) var(--ease-settle),opacity var(--motion-slow) var(--ease-settle)}
.sim-row .ic{opacity:.5;margin-top:2px}
.sim-row .t{font:var(--type-heading-s)}
.sim-row .d{font:var(--type-body-s);margin-top:4px}
.sim-row .ring{opacity:0;margin-top:5px;transition:opacity var(--motion-slow) var(--ease-settle)}
.sim-row[data-on]{transform:none}
.sim-row[data-on] .ic{color:var(--text-primary);opacity:1}
.sim-row[data-on] .t{color:var(--text-primary)}
.sim-row[data-on] .d{color:var(--text-secondary)}
.sim-row[data-on] .ring{opacity:1}
#sim-done,#sim-reset{display:none}

/* ── 07 ───────────────────────────────────────────────────────────────────── */
.std{display:grid;grid-template-columns:24px 1fr;gap:16px;padding-top:18px;border-top:var(--border-datum) solid var(--line-datum)}
.std-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.std-tick{height:var(--border-datum);background:var(--state-active);width:44px;margin:14px 0}

/* ── 09 · build board ─────────────────────────────────────────────────────── */
.board{margin-top:40px;display:flex;gap:var(--grid-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.board::-webkit-scrollbar{display:none}
.build{flex:0 0 clamp(300px,46%,560px);scroll-snap-align:start;display:flex;flex-direction:column;gap:16px;padding:26px;border:1px solid var(--line-hairline);border-top:var(--border-datum) solid var(--state-attention);border-radius:var(--radius-1);background:var(--surface-card)}
.build.is-live{border-top-color:var(--state-active)}
.stage{display:flex;align-items:flex-start}
.stage>div{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.stage .nd-row{display:flex;align-items:center}
.stage .nd{width:10px;height:10px;flex:none;background:transparent;outline:1px solid var(--text-meta);outline-offset:-1px}
.stage .ln{flex:1;height:1px;background:var(--line-hairline)}
.stage .done .nd{background:var(--text-meta)}
.stage .done .ln{background:var(--text-meta)}
.stage .now .nd{background:var(--state-active);outline-color:var(--state-active);box-shadow:0 0 0 2px var(--ink-850)}
.stage .now .lb{color:var(--text-primary)}

/* ── 14 · questions ──────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line-hairline)}
.faq[data-open]{border-top:var(--border-datum) solid var(--line-datum)}
.faq-btn{width:100%;display:flex;align-items:center;gap:16px;padding:18px 0;background:none;border:none;cursor:pointer;text-align:left}
.faq-btn .q{font:var(--type-heading-s);flex:1;color:var(--text-primary)}
.faq-btn .ic{color:var(--text-meta)}
.faq-a{display:none;font:var(--type-body-m);color:var(--text-secondary);padding:0 0 22px 30px;max-width:var(--measure-prose)}
.faq[data-open] .faq-a{display:block}
.faq .on,.faq .minus{display:none}
.faq[data-open] .on,.faq[data-open] .minus{display:inline-block}
.faq[data-open] .off,.faq[data-open] .plus{display:none}

/* ── tabs ─────────────────────────────────────────────────────────────────── */
.tabs{display:flex;border-bottom:1px solid var(--line-hairline);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;background:none;border:none;padding:12px 16px;cursor:pointer;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-meta);white-space:nowrap}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.tabs button[aria-selected="true"]{color:var(--text-primary)}
.tabs button[aria-selected="true"]::after{background:var(--line-datum)}

/* ── booking ──────────────────────────────────────────────────────────────── */
/* The calendar is not embedded. An iframe made the page's primary conversion
   dependent on the visitor's browser extensions, and framing it as "sorry, it may
   not load" made the CTA read as an error state. It is now one Active Signal
   action on an ink panel: maximum contrast against the Signal band it sits on. */
.book-card{background:var(--ink-850);border:1px solid var(--ink-850);border-radius:var(--radius-1);overflow:hidden}
.book-card .h{padding:14px 20px;border-bottom:1px solid var(--ink-600);display:flex;align-items:center;justify-content:space-between;gap:12px}
.book-body{padding:28px 24px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.book-body .list li{font:var(--type-body-m)}
.book-cta{margin-top:28px}
.book-body>.os-meta{margin-top:12px}
.direct a{color:var(--ink-850);border-bottom-color:rgba(9,20,17,.4)}
.direct a:hover{border-bottom-color:var(--ink-850)}

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:var(--grid-gutter);align-items:start}
.foot-c{display:flex;flex-direction:column;gap:10px}
.foot-c a{font:var(--type-body-s);border:none;color:var(--steel-400)}
.foot-c a:hover{color:var(--ledger-200)}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{padding:clamp(56px,7vw,104px) var(--grid-margin) clamp(48px,5vw,72px)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gutter)}
.hero-h1{grid-column:1/11;text-wrap:balance}
.hero-kicker{grid-column:1/11;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-meta);margin-bottom:20px}
.hero-copy{grid-column:1/7;margin-top:32px;display:flex;flex-direction:column;gap:18px}
.hero-panel{grid-column:8/13;margin-top:32px}
.cred{max-width:var(--container-max);margin:56px auto 0;padding-top:22px;border-top:var(--border-datum) solid var(--line-datum);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gutter)}

/* ── 13 · pricing rows ────────────────────────────────────────────────────── */
.price-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 210px;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-hairline)}

/* ── 14 · assessment call-out ─────────────────────────────────────────────── */
.assess{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:28px;border:1px solid var(--line-hairline);border-top:var(--border-datum) solid var(--signal-500);border-radius:var(--radius-1)}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media(max-width:1180px){
  :root{--grid-margin:24px;--grid-gutter:18px;--grid-datum-gutter:72px}
  /* the datum channel is 72px here: the number sits above the label rather than
     beside it, and the label wraps inside the channel instead of running under
     the headline column. */
  .eb{flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
  /* break at word boundaries, and drop a step so the longest single word
     ("ASSESSMENT", "AVAILABLE") still fits the 72px channel without splitting */
  .eb span{overflow-wrap:break-word;font-size:10px;letter-spacing:.06em}
  .crossing .time{overflow-wrap:anywhere}
}
@media(max-width:1040px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:940px){
  .split,.split-wide{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero-h1,.hero-copy,.hero-panel{grid-column:auto}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .std{gap:14px}
  .hero-grid{display:block}
  .hero-panel{margin-top:32px}
}
@media(max-width:720px){
  :root{--grid-margin:18px;--grid-datum-gutter:0px;--section-pad-y:clamp(52px,13vw,80px)}
  .sec-in,.crossing .in{grid-template-columns:minmax(0,1fr);gap:14px}
  .g2,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr);gap:32px}
  .between{align-items:flex-start}
  .between .os-meta,.between .b-m{text-align:left!important}
  .build{flex:0 0 86%;padding:20px}
  .stage .lb{font-size:9px}
  .btn-lg{height:48px;padding:0 22px;font-size:16px}
  .btn,.btn-lg,.btn-sm{min-height:44px}
  .faq-a{padding-left:0}
  .book-card iframe{min-height:900px}
}

@media(max-width:940px){
  .cred{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .assess{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(max-width:720px){
  .cred{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-row{grid-template-columns:minmax(0,1fr);gap:6px;align-items:start}
  .price-row>div:last-child{justify-self:start!important}
}

/* ══ ASSESSMENT INTAKE ═══════════════════════════════════════════════════════
   The GHL prospecting widget brings its own styling: rounded corners, a system
   font, a blue radio, a floating white card. Two moves fix that. First, frame it
   as an instrument — ink chrome above and below a lit document — so the light
   panel reads as intentional rather than stray. Second, override the widget's own
   styling wherever it is reachable in the same document. The overrides are inert
   if the tool renders inside an iframe, and the framing carries it either way. */
.intake-split{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.step{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line-hairline)}
.step:last-child{border-bottom:1px solid var(--line-hairline)}
.step-n{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-meta);padding-top:2px}

.instrument{border:1px solid var(--ink-600);background:var(--ink-800)}
.inst-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px}
.inst-rule{display:flex;align-items:center;gap:12px;padding:0 18px 14px}
.inst-rule span{flex:1;height:var(--border-datum);background:var(--ledger-200);opacity:.9}
.inst-rule .nd{flex:none;width:7px;height:7px;background:var(--signal-500)}
.inst-body{position:relative;background:var(--ledger-050);padding:32px 28px 36px;min-height:560px;color:var(--ink-850)}
.inst-ph{display:flex;align-items:center;padding:32px 24px;min-height:520px}
.inst-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--ink-600)}
.inst-foot .os-meta{max-width:44ch}
.inst-foot a{color:var(--signal-500);border-bottom-color:rgba(200,241,53,.4)}

/* ── overrides on the widget's own DOM, where it is reachable ───────────── */
#intake,#intake *{font-family:"Archivo","Nimbus Sans","Helvetica Neue",Arial,sans-serif!important}
#intake iframe{width:100%!important;border:0!important;min-height:560px!important;display:block!important}
/* the widget names its own classes, so target the shape instead: no div inside the
   intake keeps a radius or a shadow. Inputs and buttons are elements, not divs, so
   their 2px radius survives this. */
#intake div{box-shadow:none!important;border-radius:0!important;background:transparent!important}
#intake>div{max-width:560px;margin:0 auto}
/* the widget's own outer padding doubles the panel's — drop it */
#intake>div>div{padding:0!important}
/* its title repeats what the ink header already says, and it is centred against
   a brand that aligns left */
#intake h1,#intake h2,#intake h3,#intake h4{display:none!important}
#intake,#intake *{text-align:left!important}
#intake>div{background:transparent!important}
#intake h1,#intake h2,#intake h3,#intake h4{letter-spacing:-.02em!important;color:var(--ink-850)!important;font-weight:700!important}
#intake label,#intake legend{font-size:13px!important;font-weight:600!important;color:var(--ink-850)!important;letter-spacing:.01em!important}
#intake input,#intake select,#intake textarea{border-radius:var(--radius-1)!important;border:1px solid var(--ledger-400)!important;background:#FFFFFF!important;color:var(--ink-850)!important;box-shadow:none!important;font-size:15px!important}
#intake input:focus,#intake select:focus,#intake textarea:focus{outline:var(--border-datum) solid var(--ink-850)!important;outline-offset:1px!important;border-color:var(--ink-850)!important}
#intake input::placeholder,#intake textarea::placeholder{color:var(--steel-650)!important}
#intake button,#intake [type="submit"],#intake [role="button"]{border-radius:var(--radius-1)!important;background:var(--signal-500)!important;color:var(--ink-850)!important;border:1px solid var(--signal-500)!important;font-weight:600!important;letter-spacing:-.005em!important;box-shadow:none!important;text-transform:none!important}
#intake button:hover,#intake [type="submit"]:hover{background:var(--signal-600)!important;border-color:var(--signal-600)!important}
#intake input[type="radio"],#intake input[type="checkbox"]{accent-color:var(--ink-850)!important}
#intake a{color:var(--signal-deep)!important}

@media(max-width:1040px){
  .intake-split{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media(max-width:720px){
  .step{grid-template-columns:34px 1fr;gap:12px}
  .inst-body{min-height:620px;padding:6px 8px 16px}
  .inst-foot{gap:10px}
}