/* ============================================================
   AISM shared subpage chrome. Every block is COPIED from
   concept-6c.html (origin line ranges noted per block; grep the
   range in concept-6c.html to sync). The only invented rules are
   the PAGE SHELL block at the end, typeset from the tokens.
   Canonical chrome markup: site/chrome.html. Behavior: site/site.js.
   Subpages run the LIGHT theme as the base; the nav bar is
   permanently navy (.is-navy is static in the markup: subpages
   have no hero tide, so there is no scroll flip).
   ============================================================ */

/* ============ GLOBAL TOKENS (origin: concept-6c.html 87-121; the light
   palette values from 136-145 are promoted into :root because subpages
   run light as the base) ============ */
:root{
  --r-card:14px;   /* the one card radius (round 38 token in concept-6c.html; here since round 40 for the /websites accordion frame; round 43: every framed subpage copy-box, see CARD-RADIUS FAMILY at the end): keep in sync */
  --field:#F4F3EF; --field-2:#FFFFFF; --field-3:#ECEBE6; --field-deep:#FFFFFF;
  --lt:#141413; --lt-2:#3A3A37; --lt-3:#6B6B66;
  --hair:rgba(20,20,19,0.10); --hair-strong:rgba(20,20,19,0.22);
  --ink-rgb:20,20,19;      /* the "ink" pole: what text is made of */
  --paper-rgb:244,243,239; /* the "paper" pole: what the field is made of */
  --ink-filter:invert(1) hue-rotate(180deg);   /* baked-light assets (marks, atom, lockup) invert where ink is dark */
  --peri:#5C90FF; --peri-soft:rgba(92,144,255,0.55);
  --peri-dark: var(--peri); /* ROUND 20 (Mark's escalation): the old base hue read purple on light fields too, so the hue itself is rejected. One blue, #5C90FF, on both grounds. --peri-dark survives as a var alias (a sanctioned one-off indirection: both tokens are theme-invariant and declared only here, so the no-token-references-a-token palette rule's re-resolution hazard cannot occur) so any future divergence is a one-line change. Dial: if the blue reads too electric, walk toward #6693FF. */
  /* keep --peri, --peri-soft and --peri-dark in sync with concept-6c.html's inline token block */
  --navy:#0B1B3F;   /* theme-invariant: the nav bar, always */
  color-scheme:light;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.22,1,0.36,1);
  --font:'Switzer',Arial,sans-serif;
  /* display register: Switzer 600. The token keeps its historical name. */
  --serif:'Switzer',Arial,sans-serif;
  --t-hero:clamp(2.7rem,4.6vw,4.5rem);
  --t-disp2:clamp(2.1rem,4vw,3.5rem);
  --t-quote:clamp(1.5rem,2.4vw,2.25rem);
  --t-ask:clamp(1.35rem,2.4vw,2.05rem);
  --t-lede:1.1rem;
  --t-lede-lg:clamp(1.3rem,1.55vw,1.55rem);
  --t-body:1rem;
  --t-small:0.85rem;
  --t-label:0.72rem;
  --t-link:0.85rem;
  --t-idx:0.85rem;
  --t-quiet:0.95rem;
  --t-entity:0.95rem;
  --w-4:400; --w-5:500; --w-6:600;
  --lh-disp:1.02; --lh-head:1.15; --lh-sub:1.3; --lh-body:1.65; --lh-solid:1;
  --track:0.22em; --track-serif:-0.025em; --track-h3:-0.01em;
  --gutter:5vw;
  --w-max:1400px;
  --sec-pad:8rem;
}
/* THEMING (origin: 122-147). data-theme on <html> sets the page; data-theme
   on any <section>/<footer> re-themes that section. --peri, --peri-soft and
   --peri-dark are theme-invariant; shadows stay black. Every palette block
   declares every token literally. ROUND-20 RULE (supersedes round 14's
   two-home rule): periwinkle is ONE hue, #5C90FF, on both grounds;
   --peri-dark aliases --peri and existing usages stand unchanged. */
[data-theme="dark"]{
  --field:#131312; --field-2:#161615; --field-3:#1B1B19; --field-deep:#000000;
  --lt:#F2F1EC; --lt-2:#C7C5BE; --lt-3:#918F87;
  --hair:rgba(242,241,236,0.09); --hair-strong:rgba(242,241,236,0.2);
  --ink-rgb:242,241,236;
  --paper-rgb:19,19,18;
  --ink-filter:none;
  --navy:#0B1B3F;
  color-scheme:dark;
}
[data-theme="light"]{
  --field:#F4F3EF; --field-2:#FFFFFF; --field-3:#ECEBE6; --field-deep:#FFFFFF;
  --lt:#141413; --lt-2:#3A3A37; --lt-3:#6B6B66;
  --hair:rgba(20,20,19,0.10); --hair-strong:rgba(20,20,19,0.22);
  --ink-rgb:20,20,19;
  --paper-rgb:244,243,239;
  --ink-filter:invert(1) hue-rotate(180deg);
  --navy:#0B1B3F;
  color-scheme:light;
}
/* a themed section restarts color inheritance from its own tokens */
[data-theme]{color:var(--lt)}

/* ============ RESET + BASE TYPE (origin: 148-162) ============ */
*{margin:0;padding:0;box-sizing:border-box}
/* Webflow-proof list reset (round 28): on a published Webflow page the base
   sheet styles ul,ol (padding-left:40px;margin-bottom:10px) at type
   specificity 0,0,1, which outranks the universal reset above no matter the
   order - measured on staging: nav-links and most lists carried that
   padding. html ul is 0,0,2 and wins by specificity, not order; locally a
   no-op. Keep in sync with concept-6c.html. */
html ul,html ol{margin:0;padding:0}
/* Webflow-proof element defaults (round 30, the full base-sheet exposure
   sweep): the round-28 mechanism applied to every remaining exposure
   measured live-vs-source across all 28 poured pages at 1440 under
   fonts.ready. Webflow's published-page base sheet styles bare elements at
   type specificity (0,0,1), outranking the universal reset (0,0,0)
   regardless of order; every declaration below restates the reset, the UA
   default, or an inert value at 0,0,2+ so it is a LOCAL NO-OP that wins on
   the published page, and any class rule (0,1,0+) still overrides. The two
   deliberate value pins are marked. Keep in sync with concept-6c.html. */
html h1,html h2,html h3,html h4,html h5,html h6,html p{margin:0}   /* Webflow: heading margin-top 20/10px + margin-bottom 10px; p margin-bottom 10px - the systemic theft under every unclassed heading/paragraph (960+ p's, 340+ h2/h3's measured) */
html h1{font-size:2em}html h2{font-size:1.5em}html h3{font-size:1.17em}html h4{font-size:1em}html h5{font-size:.83em}html h6{font-size:.67em}   /* UA values; Webflow pins px sizes (its h1 38px hit the home hero's bare h1 wrapper) */
html h4,html h5,html h6{line-height:inherit}   /* Webflow 24/20/18px (hit websites' rj-footer h4); inherit - NOT normal - restores natural inheritance exactly (rj-footer's number line-height flows in), so it is a true local no-op; h1-h3 keep the global --lh-head rule, which beats Webflow's same-specificity line-height by order */
html blockquote{margin:0;padding:0;border-left:0;font-size:inherit;line-height:inherit}   /* Webflow: 5px #e2e2e2 bar + 10px 20px padding + margin-bottom 10px + 18px/22px type - the founder-quote gray bar; the 18px also inflated em-based widths (cs-quote max-width 44em) */
html img{vertical-align:baseline}   /* Webflow: middle; inert on display:block imgs, pinned for computed parity */
html button,html [type="button"],html [type="reset"]{appearance:auto}   /* Webflow: -webkit-appearance:button on button (0,0,1) AND on [type=button]/[type=reset] (0,1,0), so the guard needs both forms (0,0,2 / 0,1,1) - every chrome/faq/quiz button carries type="button". Rendering-inert under the button reset. (Webflow's html input[type=button] is 0,1,2 and would still win on an input[type=button]; none rendered.) */
html pre{overflow:visible}   /* Webflow: auto - a nested-scrollbar risk (hit websites' x-ray code panel); .post-code pre keeps its own overflow-x:auto at 0,1,1 */
/* NOTE, not a rule here: Webflow's svg:not(:root){overflow:hidden} (0,1,1) matches the UA default, so plain svgs are fine - but it BEATS any 0,1,0 class that sets overflow:visible on an svg (hit websites' .aml-overlay; guarded in websites.html with html svg.aml-overlay). A blanket svg neutralization is wrong: it would flip every plain svg's UA hidden to visible locally. */
html table{border-spacing:0}   /* VALUE PIN: local computed goes 2px->0 on the three table pages, inert because every rendered table sets border-collapse:collapse */
html body{min-height:auto}   /* Webflow: 100% */
:root{height:auto;font-family:var(--font);-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* Webflow html: height 100%, sans-serif, text-size-adjust 100%. height and font-family restored to source semantics; text-size-adjust is the second VALUE PIN - Webflow's 100% is the normalize-standard value live users have had since launch, inert under the viewport meta on every page */
html{scroll-behavior:smooth;overflow-x:hidden}   /* belt against horizontal overflow (on html only: on body too it would make body a scroll container and break sticky elements) */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:calc(87px + 1.4rem)}   /* anchor targets clear the fixed nav (87px rendered .nav-bar height) with breathing room; round 16, keep in sync with concept-6c.html */
body{font-family:var(--font);font-size:var(--t-body);font-weight:var(--w-4);line-height:var(--lh-body);color:var(--lt);background:var(--field)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
h1,h2,h3{line-height:var(--lh-head);text-wrap:balance}
:focus-visible{outline:2px solid var(--peri);outline-offset:3px}   /* keyboard focus only */
/* the two-home periwinkle rule applied to focus: dark scopes take the
   on-dark variant; a light panel nested INSIDE a dark scope (the mega, the
   narrow menu) restores the base accent via the higher-specificity nested
   rule (the page root is data-theme="light", so a bare light rule would
   outrank the dark one everywhere; cause on record, round 14) */
[data-theme="dark"] :focus-visible{outline-color:var(--peri-dark)}
[data-theme="dark"] [data-theme="light"] :focus-visible{outline-color:var(--peri)}
.wrap{max-width:var(--w-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.quiet-h2{font-size:var(--t-quiet);font-weight:var(--w-5);letter-spacing:0;color:var(--lt-3)}
.lede{font-size:var(--t-lede);color:var(--lt-2);max-width:34em}

/* ============ ENGINE MARKS (origin: 163-173) ============ */
.eng-mark{display:inline-block;flex:none;width:20px;height:20px;object-fit:contain}
@keyframes mark-bounce{0%{transform:none}40%{transform:translateY(-5px)}70%{transform:translateY(1px)}100%{transform:none}}
@media (hover:hover){.eng-mark:hover{animation:mark-bounce 0.5s var(--ease)}}
a:focus-visible .eng-mark,button:focus-visible .eng-mark,[tabindex]:focus-visible .eng-mark{animation:mark-bounce 0.5s var(--ease)}
@media (prefers-reduced-motion: reduce){
  .eng-mark:hover,a:focus-visible .eng-mark,button:focus-visible .eng-mark,[tabindex]:focus-visible .eng-mark{animation:none}
}

/* ============ BUTTONS + TYPESET LINKS (origin: 174-196, plus 372
   .btn--ghost, 273 .btn--nav, 261 .pill). Buttons are pills, solid, with a
   non-animated hover state (round 35, Max's verdict: the diagonal paper
   wipe is retired site-wide). Solid buttons dim toward the ground on
   hover; bordered variants strengthen their border instead. No transition
   on either, so reduced motion needs no carve-out. ============ */
.btn{display:inline-block;background:var(--lt);color:var(--field);font-size:var(--t-label);font-weight:var(--w-6);letter-spacing:var(--track);text-transform:uppercase;padding:0.95rem 1.7rem;border-radius:999px;white-space:nowrap}   /* round-11 arrow rule: a button label never wraps, so its arrow never lands on its own line */
.btn:hover,.btn:focus-visible{opacity:0.85}
.btn--outline{background:transparent;color:var(--lt);border:1px solid var(--hair-strong)}
.btn--ghost{background:transparent;color:var(--lt);border:1px solid rgba(var(--ink-rgb),0.45)}
.btn--outline:hover,.btn--outline:focus-visible,.btn--ghost:hover,.btn--ghost:focus-visible{opacity:1;border-color:rgba(var(--ink-rgb),0.9)}
.btn--nav{padding:0.75rem 1.4rem}
.tlink{display:inline-flex;align-items:center;gap:0.7rem;font-size:var(--t-link);font-weight:var(--w-6);letter-spacing:var(--track);text-transform:uppercase;color:var(--lt);position:relative;padding-bottom:0.5rem}
.tlink::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--hair)}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--lt);transform:scaleX(0);transform-origin:right;transition:transform 0.5s var(--ease)}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.tlink .arr{display:inline-block;transition:transform 0.4s var(--ease)}
.tlink:hover .arr,.tlink:focus-visible .arr{transform:translateX(6px)}
.pill{display:inline-block;background:var(--lt);color:var(--field);font-size:0.62rem;font-weight:var(--w-6);letter-spacing:0.1em;text-transform:uppercase;padding:0.16rem 0.55rem;border-radius:999px;margin-left:0.5rem;vertical-align:middle}

/* ============ REVEAL SYSTEM (origin: 197-199, 210-213) ============
   Round 11 fail-open: content visibility may be enhanced by JS, never
   dependent on it. The hidden state carries a CSS-only timeout — any
   .rv the observer has not revealed fades in on its own at 1.5s. An
   element revealed by is-in before then looks identical to before (the
   animation's forwards fill lands on the same final values the is-in
   transition sets, so they never fight). Keep in sync with the inline
   twin in concept-6c.html. */
body.js .rv{opacity:0;transform:translateY(18px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease);animation:rv-failopen 0.6s ease 1.5s forwards}
body.js .rv.is-in{opacity:1;transform:none}
@keyframes rv-failopen{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  body.js .rv{opacity:1;transform:none;transition:none;animation:none}
}

/* ============ NAV (origin: 215-311). Subpage variant: the bar is
   permanently navy (.is-navy static in site/chrome.html; site.js never
   toggles it), so the transparent-over-water resting state never shows.
   The mega and the narrow menu are ALWAYS light panels (data-theme="light"
   in markup) regardless of the bar's theme. ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50}
.nav-bar{position:relative;display:flex;align-items:center;gap:2.4rem;padding:1.3rem var(--gutter);background:transparent;transition:background 0.4s var(--ease),box-shadow 0.4s var(--ease)}
.nav.is-navy .nav-bar{background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,0.12)}
.nav-logo img{height:24px;width:auto}
.nav-logo img,.foot-row img,.eng-mark{filter:var(--ink-filter)}
.nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none;margin-left:auto}
.nav-links>li>a,.nav-trigger{display:inline-block;font-size:var(--t-label);font-weight:var(--w-6);letter-spacing:var(--track);text-transform:uppercase;color:var(--lt);position:relative;padding:0 0 0.3rem;white-space:nowrap}
.nav-links>li>a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--lt);transform:scaleX(0);transform-origin:right;transition:transform 0.45s var(--ease)}
.nav-links>li>a:hover::after,.nav-links>li>a:focus-visible::after{transform:scaleX(1);transform-origin:left}
/* trigger chevron: a 6px rotated-square border corner in currentColor */
.chev{display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-left:0.45rem;vertical-align:0.15em}
.nav-item.has-menu{position:static}
.nav-item.has-drop{position:relative}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--field-2);color:var(--lt);border-top:1px solid var(--hair);box-shadow:0 30px 60px rgba(0,0,0,0.12)}
.menu{position:absolute;left:0;top:100%;min-width:220px;padding:0.8rem 0;background:var(--field-2);color:var(--lt);border-top:1px solid var(--hair);box-shadow:0 30px 60px rgba(0,0,0,0.12)}
.menu a{display:block;padding:0.7rem 1.4rem;font-size:var(--t-body);font-weight:var(--w-5);color:var(--lt);white-space:nowrap;transition:color 0.3s var(--ease)}
.menu a:hover,.menu a:focus-visible{color:var(--peri)}
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--w-max);margin:0 auto;padding:2.6rem var(--gutter) 2.4rem}
.mega-col+.mega-col{border-left:1px solid var(--hair);padding-left:2.4rem}
.mega-col{padding-right:2.4rem}
.mega-h{font-size:var(--t-label);font-weight:var(--w-6);letter-spacing:var(--track);text-transform:uppercase;color:var(--lt)}
.mega-tag{margin-top:0.4rem;font-size:var(--t-body);color:var(--lt-3);margin-bottom:1.3rem}
.mega-col a{display:block;font-size:1.15rem;font-weight:var(--w-5);color:var(--lt);transition:color 0.3s var(--ease)}
.mega-col a+a{margin-top:0.9rem}
.mega-col a:hover,.mega-col a:focus-visible{color:var(--peri)}
.mega-col a.mega-sub{font-size:var(--t-small);color:var(--peri);white-space:nowrap}   /* round-11 arrow rule */
.mega-sub .arr{display:inline-block}
/* featured entry (round 5 card, round 6 motion): the AI Visibility Website
   card. Border-as-state per the palette rules (negative side margins keep
   the link text on the column's alignment line). At rest the card wears a
   whisper of a border, periwinkle at 30 percent (round 7: raised from 15
   so the resting card reads). On mega OPEN the border DRAWS itself once,
   clockwise from the top-left, over ~700ms (round 7: slowed from ~500ms):
   two pseudo elements at 55 percent periwinkle (round 7: raised from 40),
   one carrying the top and right edges (transform-origin top left), the
   other the bottom and left edges (transform-origin bottom right, starting
   as the first lands), each scaling 0 to 1 so the draw sweeps around the
   card, then settles at the 55 percent border while the panel stays open
   (fill forwards). Arm and
   reset ride the open handler site.js owns, unchanged from the sweep
   (zero JS changes): opening unhides the panel, forces a reflow, then
   adds .is-open, so the animations play from frame 0 exactly once;
   closing removes .is-open and re-hides the panel (display:none), which
   cancels and resets them, so hover-away within the 180ms grace never
   re-fires but a real close and reopen always draws again. Keyboard opens
   ride the same handler. Transform and opacity only; pointer-events:none
   keeps the pseudos out of the hit areas, and focus order is untouched.
   Reduced motion: no draw, the settled 55 percent border statically. The
   round-5 sweep is REMOVED. (The invariant-periwinkle rgba literals are
   the sanctioned exception.) */
.mega-feat{position:relative;border:1px solid rgba(92,144,255,0.3);border-radius:12px;padding:0.95rem 1.1rem;margin:0 -1.1rem}
.mega-feat::before,.mega-feat::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:1px solid transparent;pointer-events:none;opacity:0}
.mega-feat::before{border-top-color:rgba(92,144,255,0.55);border-right-color:rgba(92,144,255,0.55);transform-origin:top left}
.mega-feat::after{border-bottom-color:rgba(92,144,255,0.55);border-left-color:rgba(92,144,255,0.55);transform-origin:bottom right}
.has-menu.is-open .mega-feat::before{animation:mega-draw 0.36s var(--ease) forwards}
.has-menu.is-open .mega-feat::after{animation:mega-draw 0.36s var(--ease) 0.34s forwards}
@keyframes mega-draw{from{opacity:1;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@media (max-width:1279px){.mega-feat{margin:0}}
@media (prefers-reduced-motion: reduce){.has-menu.is-open .mega-feat::before,.has-menu.is-open .mega-feat::after{animation:none;opacity:1;transform:none}}
.mega-foot{border-top:1px solid var(--hair);background:var(--field);display:flex;justify-content:space-between;align-items:center;gap:3rem;padding:1.4rem var(--gutter)}
.mega-foot p{font-size:var(--t-body);color:var(--lt-2);line-height:var(--lh-body)}
.mega-foot p a{color:var(--peri)}
/* open state: JS drops the hidden attribute and adds .is-open; the entrance
   plays from a forced reflow so the transition runs. Closing is instant. */
.mega,.menu{opacity:0;transform:translateY(-6px);transition:opacity 0.25s var(--ease),transform 0.25s var(--ease)}
.has-menu.is-open .mega,.has-menu.is-open .menu{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.mega,.menu{transition:none;transform:none}.menu a,.mega-col a{transition:none}}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:0.6rem}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--lt)}
.nav-cta{display:flex;align-items:center;gap:1.8rem;flex:none;white-space:nowrap}
@media (max-width:1650px){
  .nav-links{gap:1.5rem}
  .nav-bar{gap:1.8rem}
}
@media (max-width:1279px){
  .nav-toggle{display:flex;position:relative;z-index:2;padding:0.85rem 0.6rem}   /* mobile hit area: 14.5px of bars + 27px padding = 41px tall */
  .nav-links{position:fixed;inset:0;background:var(--field);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.6rem;padding:6.5rem var(--gutter) 9rem;overflow-y:auto;overscroll-behavior:contain;transform:translateY(-100%);transition:transform 0.6s var(--ease);z-index:1}
  .nav.is-open .nav-links{transform:translateY(0)}
  /* MOBILE PANEL THEME (defect fix, September 2026). The overlay is a PAPER
     panel per the always-light-panels rule, but the nav carries
     data-theme="dark", so background:var(--field) resolved to the DARK
     field (#131312) and the light-scoped mega/menu ink (#141413) painted
     onto it unreadable (the black-menu defect). While open, the nav
     re-declares the full light block (every token literally, per the
     palette rules), so the panel, the top-level links, the toggle bars,
     the lockup (via --ink-filter) and the bottom-pinned CTA all read
     ink-on-paper over any page section, on every page. Keep in sync with
     concept-6c.html's inline twin. */
  .nav.is-open{
    --field:#F4F3EF; --field-2:#FFFFFF; --field-3:#ECEBE6; --field-deep:#FFFFFF;
    --lt:#141413; --lt-2:#3A3A37; --lt-3:#6B6B66;
    --hair:rgba(20,20,19,0.10); --hair-strong:rgba(20,20,19,0.22);
    --ink-rgb:20,20,19;
    --paper-rgb:244,243,239;
    --ink-filter:invert(1) hue-rotate(180deg);
    --navy:#0B1B3F;
    color-scheme:light;
  }
  .nav.is-open .nav-logo{position:relative;z-index:2}   /* the lockup stays visible over the open panel, inverted to ink by the tokens above */
  html.nav-locked{overflow:hidden}   /* scroll lock while the overlay is open (site.js puts the class on <html>: body overflow never propagates to the viewport here because html carries overflow-x:hidden, so the lock must land on the scroller itself) */
  .nav-logo{display:inline-flex;padding:0.5rem;margin:-0.5rem}   /* 24px lockup + 16px padding = 40px hit area, margin-compensated */
  .nav-links>li>a,.nav-trigger{padding:0.7rem 0}   /* 19px label + 22px padding = 41px hit area */
  .nav-bar{justify-content:space-between}
  .nav-cta{margin-left:auto;margin-right:1rem}
  .nav-item.has-menu,.nav-item.has-drop{position:static;width:100%}
  .mega,.menu{position:static;box-shadow:none;border:0;background:transparent;transform:none;min-width:0;padding:0}
  .mega-cols{grid-template-columns:1fr;gap:1.6rem;padding:1.4rem 0 0.6rem;margin:0}
  .mega-col{padding-right:0}
  .mega-col+.mega-col{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:1.4rem}
  .mega-col a{padding:0.35rem 0}   /* 30px line + 11px padding = 41px hit area */
  .mega-col a.mega-sub{padding:0.6rem 0}   /* the smaller sub-link line (22px) needs 19px of padding to reach 41px */
  .mega-col a+a{margin-top:0.35rem}   /* rhythm held: 0.35 margin + 0.7 of paddings ~ the desktop 0.9 */
  .mega-foot{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.4rem 0;background:transparent}
  .mega-foot p a{display:inline-block;padding:0.55rem 0.15rem;margin:-0.55rem -0.15rem}   /* inline free-check link: 26px line + 18px padding = 44px hit area, margin-compensated */
  .menu a{padding:0.55rem 0}
  /* the open toggle reads as a close affordance: bars fold to an X
     (transform/opacity only; reduced motion snaps) */
  .nav-toggle span{transition:transform 0.3s var(--ease),opacity 0.3s var(--ease)}
  .nav.is-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav.is-open .nav-toggle span:nth-child(2){opacity:0}
  .nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  @media (prefers-reduced-motion: reduce){.nav-toggle span{transition:none}}
}
@media (max-width:767px){
  /* the pinned CTA carries its own paper fade so the scrolling menu list
     never collides with the button text (rgba over --paper-rgb, so the
     fade is the open panel's own ground) */
  .nav-cta{position:fixed;left:0;right:0;bottom:0;margin:0;justify-content:center;flex-direction:column;gap:1.2rem;padding:2.6rem var(--gutter) 2.4rem;background:linear-gradient(180deg,rgba(var(--paper-rgb),0),rgba(var(--paper-rgb),0.92) 45%,rgba(var(--paper-rgb),1) 70%);transform:translateY(120%);transition:transform 0.6s var(--ease);z-index:1}
  .nav.is-open .nav-cta{transform:none}
}
/* no-JS: the menus cannot open, so the top bar drops the trigger items and
   shows just the plain links and the CTA; the bar holds its solid ground */
body:not(.js) .nav-bar{background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,0.12)}
body:not(.js) .has-menu{display:none}
@media (max-width:1279px){
  body:not(.js) .has-menu{display:block}
  body:not(.js) .has-menu .mega,body:not(.js) .has-menu .menu{display:block;position:static;box-shadow:none;border:0;opacity:1;transform:none}
}

/* ============ FAQ (origin: 779-800; single-open accordion, all answers in
   DOM, collapsed by grid-rows; the :has() gate is a noted exception scoped
   to this pattern; no-JS shows every answer open) ============ */
.faq{position:relative;padding:var(--sec-pad) 0;background:var(--field-2);border-top:1px solid var(--hair)}
.faq-body{display:grid;grid-template-columns:minmax(0,0.55fr) minmax(0,1.45fr);gap:4rem;align-items:start}
/* round 10: the head column can never paint across the gap (structural guard
   behind the amended orphan rule: no nbsp join on headings of three words or
   fewer), and page-FAQ heads are section sub-heads, one register below disp2 */
.faq-head{position:sticky;top:7rem;overflow-wrap:break-word}
.faq-head .sec-h2{font-size:var(--t-quote)}
.faq-list{border-top:1px solid var(--hair-strong)}
.faq-item{border-bottom:1px solid var(--hair-strong)}
.faq-item h3{margin:0;font-size:inherit;font-weight:inherit}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;padding:1.5rem 0;background:none;border:0;text-align:left;cursor:pointer;color:var(--lt);font-family:var(--serif);font-weight:var(--w-6);font-size:var(--t-lede-lg);line-height:var(--lh-sub);letter-spacing:var(--track-h3);text-wrap:balance}
.faq-q:hover span:first-child,.faq-q:focus-visible span:first-child{color:var(--peri)}
.faq-q:focus-visible{outline:2px solid var(--peri);outline-offset:4px}
.faq-ico{position:relative;flex:none;width:16px;height:16px}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--lt);transition:transform 0.4s var(--ease)}
.faq-ico::after{transform:rotate(90deg)}
.faq-q[aria-expanded="true"] .faq-ico::after{transform:rotate(0deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.45s var(--ease)}
.faq-item:has(.faq-q[aria-expanded="true"]) .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{max-width:40em;padding:0 0 1.7rem;font-size:var(--t-lede);line-height:var(--lh-body);color:var(--lt-2)}
@media (max-width:991px){.faq-body{grid-template-columns:1fr;gap:2rem}.faq-head{position:static}}
@media (prefers-reduced-motion: reduce){.faq-a,.faq-ico::before,.faq-ico::after{transition:none}}
body:not(.js) .faq-a{grid-template-rows:1fr}

/* ============ PLAN BAR PATTERN (origin: 405-412). The homepage .plan
   carries a nav-seat top padding that belongs to the hero hold; the
   subpage close uses .cta-bar (PAGE SHELL below) as the wrapper and these
   row rules unchanged. ============ */
.plan-row{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.plan-h{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-0.01em}
.plan-sub{margin-top:0.4rem;color:var(--lt-3);font-size:var(--t-body)}
@media (max-width:767px){
  .plan-row{flex-direction:column;align-items:stretch}
  .plan-row .btn{display:block;text-align:center}
}

/* ============ EYEBROW (origin: 423) ============ */
.eyebrow{font-size:var(--t-small);letter-spacing:0.12em;text-transform:uppercase;color:var(--peri);margin-bottom:1rem}
[data-theme="dark"] .eyebrow{color:var(--peri-dark)}   /* the two-home periwinkle rule: no live dark-section eyebrow exists today, the scope is structural */

/* ============ ENDING (origin: 1021-1050; the footer on the lava field,
   reused on every page; reduced motion stills the blobs) ============ */
.ending{position:relative;background:var(--field-2);overflow:hidden;isolation:isolate}
.ending-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.8) 65%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.8) 65%,#000 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.55;will-change:transform}
/* round 14 triad, confirmed by the round-20 single-hue ruling: base tone is
   the one periwinkle's triplet 92,144,255 (#5C90FF); the deeper and paler
   tones keep the same hue family: deep #416CD7 (65,108,215), pale #ADC6FF
   (173,198,255). Keep in sync with concept-6c's ending and /websites' hero
   blobs. */
.blob-1{background:radial-gradient(circle at 40% 40%,rgba(92,144,255,0.85),rgba(92,144,255,0.35) 50%,transparent 72%);z-index:1}
.blob-2{background:radial-gradient(circle at 40% 40%,rgba(65,108,215,0.8),rgba(65,108,215,0.3) 50%,transparent 72%);z-index:0}
.blob-3{background:radial-gradient(circle at 40% 40%,rgba(173,198,255,0.95),rgba(173,198,255,0.4) 50%,transparent 72%);z-index:2}
.blob-4{background:radial-gradient(circle at 40% 40%,rgba(92,144,255,0.85),rgba(92,144,255,0.35) 50%,transparent 72%);z-index:1}
.blob-1{width:52vw;height:52vw;left:-14vw;top:8%;animation:drift1 26s ease-in-out infinite alternate}
.blob-2{width:44vw;height:44vw;right:-10vw;top:22%;animation:drift2 31s ease-in-out infinite alternate}
.blob-3{width:38vw;height:38vw;left:28vw;bottom:-12%;animation:drift3 23s ease-in-out infinite alternate}
.blob-4{width:30vw;height:30vw;right:18vw;bottom:2%;opacity:0.4;animation:drift4 35s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(12vw,10vh,0) scale(1.15)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-14vw,14vh,0) scale(0.9)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(0.95)}to{transform:translate3d(-10vw,-12vh,0) scale(1.2)}}
@keyframes drift4{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vw,-8vh,0) scale(1.1)}}
@media (prefers-reduced-motion: reduce){.blob{animation:none}}
@media (max-width:767px){.blob{filter:blur(60px)}.blob-1,.blob-2{width:90vw;height:90vw}.blob-3,.blob-4{width:70vw;height:70vw}}

/* ============ FOOTER (origin: 1052-1094, minus the atom cursor trail:
   that is a homepage effect and its echoes are not in the subpage
   chrome markup) ============ */
.footer{position:relative;background:transparent;padding:7.5rem 0 2.2rem;overflow:hidden}
.footer>.wrap{position:relative;z-index:2}
.foot-lead{max-width:22em}
.foot-lead h2{font-family:var(--serif);font-weight:500;font-size:var(--t-disp2);letter-spacing:var(--track-serif);line-height:var(--lh-disp)}
.foot-lead .tlink{margin-top:1.7rem}
.foot-card{background:transparent;border:0;padding:0.6rem 0 2.6rem;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:3.6rem;display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem}
.foot-col h3{font-size:var(--t-small);font-weight:var(--w-5);color:var(--lt-3);margin-bottom:1.2rem}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:0.75rem}
.foot-col a{font-family:var(--serif);font-weight:500;font-size:1.15rem;letter-spacing:var(--track-serif);color:var(--lt);position:relative}
.foot-col a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--lt);transform:scaleX(0);transform-origin:right;transition:transform 0.45s var(--ease)}
.foot-col a:hover::after,.foot-col a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.foot-entity{margin-top:3rem;font-size:var(--t-small);color:var(--lt-3);max-width:52em}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--hair)}
.foot-row img{height:22px;width:auto;opacity:0.85}
.foot-meta{display:flex;gap:1.6rem;font-size:var(--t-small);color:var(--lt-3);flex-wrap:wrap}
@media (max-width:991px){
  .foot-card{grid-template-columns:1fr 1fr;gap:2rem;padding:0.6rem 0 2.2rem}
}
@media (max-width:600px){
  .foot-card{grid-template-columns:1fr;padding:0.6rem 0 1.8rem}
  .foot-row{flex-direction:column;align-items:flex-start}
  /* mobile hit areas (chrome audit, September 2026): 30px link line +
     11px padding = 41px; the ul gap drops so the rhythm holds */
  .foot-col ul{gap:0.4rem}
  .foot-col a{display:inline-block;padding:0.35rem 0}
  .footer .tlink{padding-top:0.65rem}   /* 22px line + 10px top + 8px bottom = 40px */
}
@media (prefers-reduced-motion: reduce){.foot-col a::after{transition:none}}

/* ============ DISPLAY REGISTER (origin: 1096-1098, trimmed to the
   classes present in the subpage chrome; .page-hero h1 added) ============ */
.sec-h2,.faq-q,.foot-lead h2,.foot-col a,.page-hero h1{font-weight:600}

/* ============ SECTION HEADERS (origin: 1100-1108) ============ */
.sec-head-text{max-width:38em}
.sec-h2{font-family:var(--serif);font-size:var(--t-disp2);letter-spacing:var(--track-serif);line-height:var(--lh-disp)}
.sec-sub{margin-top:0.9rem;font-size:var(--t-lede);color:var(--lt-2);max-width:30em}

/* ============ BREAKPOINTS (origin: 1126-1145, trimmed to the shared
   shell) ============ */
@media (max-width:991px){
  :root{--sec-pad:5.5rem}
}
@media (max-width:478px){
  :root{--sec-pad:4.5rem}
  .foot-row{flex-direction:column;align-items:flex-start}
  .foot-meta{flex-direction:column}
}

/* ============ PAGE SHELL (NEW for subpages; the only rules in this file
   not copied from concept-6c. Typeset entirely from the tokens above.
   87px is the rendered .nav-bar height; arithmetic in concept-6c's proof
   tight-pin comment.) ============ */
.page-hero{background:var(--field);padding:calc(87px + 5rem) 0 4.5rem;border-bottom:1px solid var(--hair)}
.page-hero h1{font-family:var(--serif);font-size:var(--t-disp2);letter-spacing:var(--track-serif);line-height:var(--lh-disp);max-width:18em}
.page-hero .lede{margin-top:1.4rem}
.page-sec{padding:var(--sec-pad) 0;background:var(--field-2)}
.page-sec--alt{background:var(--field)}
.page-note{color:var(--lt-3);font-size:var(--t-lede)}
/* the page close: the homepage plan-bar grammar in a normal-flow band */
.cta-bar{padding:4.5rem 0;background:var(--field-2);border-top:1px solid var(--hair)}
/* generic two-column prose split (the FAQ body's shape, reused for
   heading-beside-prose sections) */
.split-2{display:grid;grid-template-columns:minmax(0,0.55fr) minmax(0,1.45fr);gap:4rem;align-items:start}
@media (max-width:991px){.split-2{grid-template-columns:1fr;gap:2rem}}
.prose{max-width:42em}
.prose p{font-size:var(--t-lede);line-height:var(--lh-body);color:var(--lt-2)}
.prose p+p{margin-top:1.3rem}

/* ============ CARD-RADIUS FAMILY (round 43; NEW for subpages) ============
   Every framed copy-box on the subpages takes the round-38 token. The frames
   themselves are declared in each page's own style block (pricing's rides the
   endpoint as pages/pricing.css, services' sits in its Webflow head), so the
   radius lives here, once, as site grammar: services' three tier cards, the
   Growth comparison shell and the All-In band; pricing's eight tier cards
   (Diagnose pair, Growth 4-up, Content pair), the websites offer band and the
   Marketing rate-card shell; audit's booking box; the case-study cards (index
   + the four detail pages). The two table shells need no clip: their tables
   paint no cell backgrounds and no cell side borders, only row hairlines
   inside the shell, so nothing meets the curve (round-43 corner audit: zero
   painted descendants in any 14px corner square at 1440 and 390; .cmp is
   already an overflow-x:auto scroll container and clips at the curve). Every
   child sits inside 1.5rem+ padding, so no inner radius is needed. */
.tier,.cmp,.rows,.allin-band,.offer-band,.aud-book,.cs-card{border-radius:var(--r-card)}
