/* Adaptiwise marketing site - shared styles (becomes the WordPress theme's style.css)
   The design system is booking.adaptiwise.com's (docs/decisions.md, 13 Oct 2026; the plan is
   docs/redesign-2026-10.md): one sans at every size, the product's colours, 8px chrome and 20px
   content cards, bordered cards with shadows only on the floating layer and on objects, one
   ease-out curve, and reduced motion that is total. */
:root{
  color-scheme: light;
  --dark:#08302A;
  --dark-2:#0B342B;
  --dark-raised:#0D3E35;
  --dark-raised-2:#0E4438;
  --dark-line:#1B4C41;
  --dark-line-strong:#2A6154;
  --on-dark:#CBDDD7;
  --on-dark-strong:#FFFFFF;
  --on-dark-muted:#8FB3A9;
  --emph:#7ACBB4;
  --emph-soft:rgba(122,203,180,.14);
  --teal:#3DB39C;
  --brand:#0F7A63;
  --brand-ink:#0B5C4A;
  --brand-weak:#E3F2ED;
  --brand-weak2:#F2F9F6;
  --accent:#F0A340;
  --accent-ink:#D6871F;
  --accent-weak:#FDF0DC;
  --warn:#D8901A;
  --crit:#B93F38;
  --good:#0F7A55;
  --paper:#EFF1F0;
  --white:#FFFFFF;
  --surface-2:#F7F9F8;
  --ink:#16211E;
  --ink-2:#4B5A56;
  --ink-muted:#5F6E6A;
  --rule:#E2E7E5;
  --rule-strong:#CFD6D3;
  /* One family at every size: the visitor's own system face first, by its system alias, so nothing
     is served for it; Instrument Sans (SIL OFL, self-hosted in the theme) for everyone else. The
     three older names stay as aliases so no rule has to know there is one family now. */
  --font:-apple-system,BlinkMacSystemFont,"Instrument Sans",system-ui,"Segoe UI",Roboto,sans-serif;
  --display:var(--font);
  --body:var(--font);
  --mono:var(--font);
  /* Shape: 20px on the big content cards, 12px on mid cards, 8px on chrome and on anything inset
     inside a 20px card (concentric: 20 - 12), 4px on bars, a pill only on status chips. */
  --r-lg:20px;
  --r-md:12px;
  --r-sm:8px;
  --r-xs:4px;
  --r-pill:999px;
  --maxw:1180px;
  /* Motion: one ease-out curve for every state change, one spring for at most one overshoot per
     page, durations by role. */
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.2,1.4,.4,1);
  --press:140ms;
  --fast:160ms;
  --enter:300ms;
  --slow:620ms;
  /* Elevation: only the floating control layer and an object presented on the plane cast a shadow;
     cards and panels are bordered. */
  --shadow-float:0 12px 40px color-mix(in srgb,var(--dark) 40%,transparent);
  --shadow-object:0 24px 60px color-mix(in srgb,var(--dark) 45%,transparent);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--dark);color:var(--on-dark);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.1;letter-spacing:-.025em;text-wrap:balance;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--emph);outline-offset:3px;border-radius:var(--r-xs)}
.post-wrap :focus-visible{outline-color:var(--brand)}
/* A nav click lands a section under the floating bar (bottom at 82px); its own top padding does the rest, so the first line sits about 40px under the bar instead of 120. */
section[id]{scroll-margin-top:42px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--white);color:var(--ink);padding:8px 14px;border-radius:var(--r-sm);z-index:100}
.skip:focus{left:12px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

/* ---------- section colour contexts ---------- */
.sec{padding-block:80px;position:relative}
/* ONE PLANE (docs/decisions.md, 13 Oct 2026). Every section sits on the dark green. The three
   section classes stay because the markup, the theme and the editor tests use them, and all three
   now resolve to the same context. The one light surface left is a guide's reading column
   (.post-wrap), which carries the light context explicitly. Components never name a light or a dark
   colour directly: they use these variables, so a surface can be either. */
.sec-dark,.sec-paper,.sec-light{background:var(--dark);color:var(--on-dark);--muted:var(--on-dark-muted);--line:var(--dark-line);--line-btn:var(--dark-line-strong);--card-bg:var(--dark-raised);--raised:var(--dark-raised);--well:var(--dark);--tone:var(--emph);--tint:var(--emph-soft);--tint-ink:var(--emph);--strong:var(--on-dark-strong);--card-ink:var(--on-dark-strong);--card-ink-2:var(--on-dark)}
.post-wrap{background:var(--white);color:var(--ink);--muted:var(--ink-2);--line:var(--rule);--line-btn:var(--rule-strong);--card-bg:var(--white);--raised:var(--white);--well:var(--surface-2);--tone:var(--brand);--tint:var(--brand-weak);--tint-ink:var(--brand);--strong:var(--ink);--card-ink:var(--ink);--card-ink-2:var(--ink-2)}
.sec :is(h1,h2,h3,h4),.logo{color:var(--on-dark-strong)}
.post-wrap :is(h1,h2,h3,h4){color:var(--ink)}

.eyebrow{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sec-head{max-width:760px;display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.sec-head h2{font-size:clamp(30px,4vw,46px);line-height:1.1}
.sec-head p{color:var(--muted);font-size:19px;max-width:62ch}

/* ---------- buttons ---------- */
/* A press is a real press: feedback on pointer-down, on the compositor, and faster than the hover
   transition so the release never lags the finger. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--body);font-weight:500;font-size:15px;line-height:1.2;padding:10px 18px;border-radius:var(--r-sm);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease);white-space:nowrap}
.btn:active{transform:scale(.97);transition-duration:var(--press)}
.btn .arr{transition:transform var(--fast) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--ink);font-weight:600}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent;color:inherit;border-color:var(--line-btn,var(--line))}
.btn-ghost:hover{border-color:var(--tone)}
.btn-sm{padding:7px 12px;font-size:14px}
.btn-lg{padding:14px 24px;font-size:16.5px}
.lbl-sm{display:none}

/* ---------- header: the one floating control layer ----------
   Fixed, inset, 8px corners, the only translucent and the only shadowed piece of chrome; content
   scrolls under it. 92% ground so the link text passes 4.5:1 with the blur applied over the
   lightest card that can scroll beneath it. Both spellings of the filter for Safari. No ancestor
   of this element may carry opacity, filter, mask or clip-path, or the blur silently dies. */
.site-header{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:50;width:min(1120px,calc(100% - 32px));border-radius:var(--r-sm);border:1px solid var(--dark-line);background:color-mix(in srgb,var(--dark-raised) 92%,transparent);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);box-shadow:var(--shadow-float);color:var(--on-dark);--tone:var(--emph);--line-btn:var(--dark-line-strong)}
@media (prefers-reduced-transparency:reduce){.site-header{background:var(--dark-raised);-webkit-backdrop-filter:none;backdrop-filter:none}}
.site-header .wrap{max-width:none;padding-inline:12px}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;padding-left:8px;transition:transform var(--press) var(--ease)}
.logo:active{transform:translateY(1px)}
.logo svg{width:28px;height:28px;display:block}
.logo span{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none}
/* Text over a translucent ground takes the brighter step of the ramp, a little weight and a hair of
   tracking, so it stays legible whatever scrolls underneath. The underline grows from the left. */
.nav-links a{position:relative;display:inline-block;padding-block:4px;text-decoration:none;color:var(--on-dark);font-size:15px;font-weight:500;letter-spacing:.01em;transition:color var(--fast) var(--ease),transform var(--press) var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--fast) var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--on-dark-strong)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-links a:active{transform:translateY(1px)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;flex:none;margin-left:auto;background:transparent;border:1px solid var(--dark-line-strong);color:var(--on-dark);border-radius:var(--r-sm);width:44px;height:40px;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--fast) var(--ease),transform var(--press) var(--ease)}
.nav-toggle:hover{border-color:var(--on-dark)}
.nav-toggle:active{transform:scale(.97)}
.nav-toggle svg{width:20px;height:20px}
.mobile-menu{border-top:1px solid var(--dark-line);padding-block:8px 16px;max-height:calc(100vh - 120px);overflow:auto}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column}
.mobile-menu a{display:block;padding:12px 0;text-decoration:none;color:var(--on-dark);font-weight:500;border-bottom:1px solid var(--dark-line)}
.mobile-menu li:last-child a{border-bottom:0}
.mobile-menu a.btn{margin-top:16px;width:100%;display:inline-flex;justify-content:center;padding:12px 18px;color:var(--dark);border-bottom:0}

/* ---------- hero ---------- */
.hero{padding-block:136px 80px;overflow:hidden;isolation:isolate;background:var(--dark)}
/* The one decorative light on the page, in the plane's own green. */
.hero::before,.post-hero::before{content:"";position:absolute;inset:-10% -20% auto;height:620px;background:radial-gradient(60% 60% at 50% 0%,rgba(15,122,99,.5) 0%,transparent 70%);pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.hero h1 em{font-style:normal;color:var(--emph)}
.hero-kicker{position:relative;align-self:flex-start;display:inline-flex;align-items:center;margin-bottom:-6px;padding:7px 15px 7px 30px;border-radius:var(--r-pill);border:1px solid rgba(122,203,180,.26);background:rgba(122,203,180,.07);color:#D3E8E1;font-size:.92rem;font-weight:500;line-height:1.3;letter-spacing:-.005em}
/* Absolutely placed inside padding the text cannot enter, so nothing a browser or an extension wraps around the text can push it under the dot. */
.hero-kicker .dot{position:absolute;left:13px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--emph);outline:3px solid var(--emph-soft)}
@media (max-width:640px){.hero-kicker{padding:0 0 0 18px;border:0;border-radius:0;background:none;font-size:13px;margin-bottom:-8px}.hero-kicker .dot{left:1px}}
.lede{font-size:19px;color:var(--on-dark-muted);max-width:44ch;line-height:1.65}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:8px;font-size:.88rem;color:var(--on-dark-muted)}
.hero-facts li{display:inline-flex;align-items:center;gap:8px}
.hero-facts svg{width:16px;height:16px;color:var(--emph)}

/* agent card: tabs per industry, four steps that tick one by one, then the next industry */
.sw-card{border-radius:var(--r-lg);border:1px solid var(--dark-line-strong);background:var(--dark-raised);box-shadow:var(--shadow-object);overflow:hidden;min-width:0}
.sw-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--dark-line)}
.sw-tabs button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 6px;background:transparent;border:0;border-bottom:1px solid var(--dark-line);color:var(--on-dark-muted);font:500 .8rem/1.2 var(--body);cursor:pointer;transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.sw-tabs button:nth-child(n+5){border-bottom:0}
.sw-tabs button svg{width:18px;height:18px;flex-shrink:0}
.sw-tabs button:hover{color:var(--on-dark-strong)}
.sw-tabs button[aria-selected="true"]{color:var(--on-dark-strong);background:rgba(122,203,180,.08)}
.sw-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--emph);transform-origin:left}
.sw-card.auto .sw-tabs button[aria-selected="true"]::after{animation:tabprog var(--cycle,6s) linear forwards}
@keyframes tabprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sw-panel{display:flex;flex-direction:column;gap:18px;padding:22px 22px 6px}
.sw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sw-head small{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.sw-head b{display:block;margin-top:6px;font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.02em;color:var(--on-dark-strong)}
.steps{list-style:none;display:flex;flex-direction:column;gap:2px}
/* Each cell is placed explicitly. A browser extension or a translation layer that adds an element
   to the row, or takes the icon out of the flow, must not be able to shuffle the text into the
   28px icon column (seen once in Chrome, 13 Oct 2026: one word per line under the tick). */
.step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-sm);transition:background var(--enter) var(--ease)}
.step .dot{grid-column:1;grid-row:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--emph);border:2px solid var(--emph);color:var(--dark)}
.step .dot svg{width:14px;height:14px}
.step .txt{grid-column:2;grid-row:1;font-size:.95rem;color:var(--on-dark-strong);min-width:0;overflow-wrap:anywhere}
.step .st{grid-column:3;grid-row:1;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--emph)}
.step.wait .dot{background:transparent;border:2px dashed var(--dark-line-strong);color:transparent}
.step.wait .txt{color:var(--on-dark-muted)}
.step.wait .st{color:var(--on-dark-muted);opacity:.6}
.step.run{background:rgba(122,203,180,.07)}
.step.run .dot{background:transparent;border:2px solid var(--emph);border-top-color:transparent;color:transparent;animation:spin .7s linear infinite}
.step.run .st{color:var(--on-dark)}
.step.done .dot svg{animation:pop var(--enter) var(--ease)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba > div{display:flex;flex-direction:column;gap:6px;padding:13px 14px;border-radius:var(--r-md);border:1px solid var(--dark-line);font-size:.9rem;line-height:1.4;transition:background var(--enter) var(--ease),border-color var(--enter) var(--ease),box-shadow var(--enter) var(--ease)}
.ba span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.ba .before{color:var(--on-dark-muted)}
.ba .after{color:var(--on-dark-strong);font-weight:500}
.ba .after span{color:var(--emph)}
.ba .after.lit{background:var(--emph-soft);border-color:rgba(122,203,180,.45)}
.sw-note{padding:14px 22px 18px;font-size:13px;color:var(--on-dark-muted)}

/* panels share one grid cell, so the card is always as tall as its tallest panel and never jumps */
.sw-panels,.ind-panels{display:grid}
.sw-panel,.ind-panel{grid-area:1 / 1;visibility:hidden;opacity:0;transition:opacity var(--fast) var(--ease),visibility 0s linear var(--fast)}
.sw-panel.on,.ind-panel.on{visibility:visible;opacity:1;transition:opacity var(--enter) var(--ease) var(--fast),visibility 0s}

/* ---------- capability strip ---------- */
.strip{background:var(--dark-2);color:var(--on-dark-muted);border-block:1px solid var(--dark-line)}
.strip-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:center;padding-block:28px}
.strip-copy{display:flex;flex-direction:column;gap:8px}
.strip-copy p{font-size:1rem;line-height:1.5;color:var(--on-dark);max-width:46ch}
.strip-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.strip-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--dark-line);background:var(--dark-raised);font-size:.92rem;color:var(--on-dark-strong)}
.strip-list svg{width:18px;height:18px;flex-shrink:0;color:var(--emph)}
.ribbon-l{padding-top:14px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
/* The ribbon: the only marquee on the site. Two identical runs moved by exactly half the track, so
   the loop has no seam; faded at both edges; authored inside no-preference, so under reduced
   motion it simply stands still. */
.ribbon{overflow:hidden;padding-block:10px 18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ribbon-track{display:flex;width:max-content}
.ribbon-run{list-style:none;display:flex;gap:36px;padding-right:36px;font-weight:500;font-size:19px;letter-spacing:-.01em;color:var(--on-dark-muted);white-space:nowrap}
.ribbon-run li::after{content:"\00B7";margin-left:36px;color:var(--dark-line-strong)}
@keyframes ribbon{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){.ribbon-track{animation:ribbon 120s linear infinite}}

/* ---------- savings ---------- */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.proof-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 32px;display:flex;flex-direction:column;gap:10px;min-width:0}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kicker svg{width:17px;height:17px}
.hero-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .22em;margin-top:6px;font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,4.1vw,3.4rem);line-height:1.02;letter-spacing:-.03em;color:var(--strong);font-variant-numeric:tabular-nums}
.hero-n .was{color:var(--muted);opacity:.7;font-weight:600;text-decoration:line-through;text-decoration-thickness:.06em;text-decoration-color:currentColor}
.hero-n .pre{font-size:.42em;font-weight:500;letter-spacing:-.01em;color:var(--card-ink-2);align-self:center}
.hero-n .arw{font-size:.55em;font-weight:600;color:var(--muted);letter-spacing:0}
.proof-t{font-size:1.12rem;font-weight:600;line-height:1.35;color:var(--card-ink)}
.proof-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.proof-chips li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);background:var(--well);border:1px solid var(--line);font-size:.86rem;color:var(--card-ink-2)}
.proof-chips svg{width:14px;height:14px;color:var(--tone)}
.race{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.race-row{display:grid;grid-template-columns:64px 1fr 68px;align-items:center;gap:12px;font-size:.84rem;color:var(--muted)}
.race-row b{font-size:.88rem;font-weight:600;color:var(--card-ink);text-align:right}
.track{display:block;height:12px;background:var(--well);border:1px solid var(--line);border-left:0;border-radius:0 var(--r-xs) var(--r-xs) 0;overflow:hidden}
.fill{display:block;height:100%;min-width:6px;border-radius:0 var(--r-xs) var(--r-xs) 0}
.fill.hand{background:var(--muted)}
.fill.agent{background:var(--tone)}
.fine{margin-top:auto;padding-top:14px;font-size:.84rem;line-height:1.55;color:var(--muted)}

.calc{margin-top:18px;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:stretch;padding:36px;border-radius:var(--r-lg);color:var(--on-dark);background:var(--dark-raised);--tone:var(--emph);border:1px solid var(--dark-line)}
.calc-l{display:flex;flex-direction:column;gap:24px;min-width:0}
.calc-head h3{font-size:1.5rem;color:var(--on-dark-strong)}
.calc-head p{margin-top:6px;font-size:.95rem;color:var(--on-dark-muted)}
.slider{display:flex;flex-direction:column;gap:10px}
.slider-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.94rem;color:var(--on-dark)}
.slider-top output{min-width:56px;text-align:center;font-size:.84rem;padding:4px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid var(--dark-line);color:var(--on-dark-strong);white-space:nowrap}
.slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;--p:50%}
.slider input[type=range]:focus{outline:none}
.slider input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-pill)}
.slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--p),var(--dark-line-strong) var(--p),var(--dark-line-strong) 100%)}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--white);border:5px solid var(--accent)}
.slider input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--dark-line-strong)}
.slider input[type=range]::-moz-range-progress{height:6px;border-radius:var(--r-pill);background:var(--accent)}
.slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--white);border:5px solid var(--accent)}
.calc-r{display:flex;flex-direction:column;gap:20px;padding:26px;border-radius:var(--r-md);background:var(--dark);border:1px solid var(--dark-line);min-width:0}
.cmp{display:flex;flex-direction:column;gap:18px}
.cmp-item{display:flex;flex-direction:column;gap:10px}
.cmp-item + .cmp-item{padding-top:18px;border-top:1px solid var(--dark-line)}
.cmp-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.cmp-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.cmp-name b{font-size:1rem;font-weight:600;color:var(--on-dark-strong)}
.cmp-name span{font-size:13px;color:var(--on-dark-muted)}
.cmp-val{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-dark-strong);white-space:nowrap}
.cmp-val.us{color:var(--emph)}
.cmp-val small{font-family:var(--body);font-size:.8rem;font-weight:500;color:var(--on-dark-muted);margin-left:3px;letter-spacing:0}
.cbar{height:14px;border-radius:0 var(--r-xs) var(--r-xs) 0;background:rgba(255,255,255,.05)}
.seg{display:block;height:100%;min-width:8px;border-radius:0 var(--r-xs) var(--r-xs) 0}
.seg.today{background:var(--on-dark-muted);opacity:.6}
.seg.after{background:var(--emph)}
.save-box{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--r-sm);background:var(--dark-raised);border:1px solid var(--dark-line-strong)}
.save-box > span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.save-box b{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.05;letter-spacing:-.025em;color:var(--on-dark-strong);font-variant-numeric:tabular-nums}
.save-box small{font-size:.9rem;color:var(--on-dark)}
.save-box strong{color:var(--on-dark-strong);font-weight:600}
.calc-note{font-size:.8rem;line-height:1.5;color:var(--on-dark-muted)}

.save-cta{margin-top:18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:22px 26px;border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--line)}
.save-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--tint-ink)}
.save-ic svg{width:24px;height:24px}
.save-cta p{font-size:1.02rem;line-height:1.5;color:var(--card-ink-2);max-width:64ch}
.save-cta p b{color:var(--card-ink)}

/* ---------- daily timeline ---------- */
.day{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;position:relative}
.day::before,.day::after{content:"";position:absolute;left:0;right:0;top:15px;height:1px}
.day::before{background:var(--line)}
.day::after{background:var(--emph);transform:scaleX(0);transform-origin:left}
.day .card{transition:transform var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.day li:hover .card{transform:translateY(-2px);border-color:var(--dark-line-strong)}
.day li{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.day time{position:relative;z-index:1;align-self:flex-start;font-size:13px;font-weight:500;padding:6px 10px;border-radius:var(--r-pill);background:var(--tint);color:var(--tint-ink);box-shadow:0 0 0 0 rgba(122,203,180,0);font-variant-numeric:tabular-nums}
.day .card{flex:1;display:flex;flex-direction:column;gap:12px;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;min-width:0}
.day .ic{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--tint);color:var(--tint-ink)}
.day .ic svg{width:19px;height:19px}
.day p{font-size:.95rem;font-weight:500;line-height:1.4;color:var(--card-ink)}
.day .ok{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tone)}
.day .ok svg{width:14px;height:14px}
/* The day moves. As the section scrolls in, the line fills from 7:00 to 17:00 and each time lights in turn
   (scroll-driven, where the browser can). While it is on screen a soft sweep travels the line every 14 s
   and each time pulses as it passes (timed; each pill's delay matches the sweep's arrival). Stillness
   under reduced motion, and a plain timeline where neither is supported. */
@keyframes dayfill{to{transform:scaleX(1)}}
@keyframes pillon{from{background:transparent;color:var(--muted);outline:1px solid var(--line)}to{background:var(--tint);color:var(--tint-ink);outline:1px solid transparent}}
@keyframes daysweep{from{background-position:-25% 0,0 0}to{background-position:125% 0,0 0}}
@keyframes pillpulse{0%,10%,100%{box-shadow:0 0 0 0 rgba(122,203,180,0);transform:none}4%{box-shadow:0 0 0 7px rgba(122,203,180,.22);transform:translateY(-1px)}}
@media (prefers-reduced-motion:no-preference){
  .day::before{background:linear-gradient(90deg,transparent 0,var(--emph) 50%,transparent 100%) -25% 0/18% 100% no-repeat,var(--line);animation:daysweep 14s linear infinite}
  .day time{animation:pillpulse 14s ease-in-out infinite;animation-delay:calc(2.5s + var(--i,0) * 2.1s)}
  @supports (animation-timeline:view()){
    .day::after{animation:dayfill linear both;animation-timeline:view();animation-range:entry 25% cover 50%}
    .day time{animation:pillon linear both,pillpulse 14s ease-in-out infinite;animation-timeline:view(),auto;animation-delay:0s,calc(2.5s + var(--i,0) * 2.1s);animation-range:entry calc(30% + var(--i,0) * 6%) entry calc(70% + var(--i,0) * 6%),normal}
  }
}
.day-foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.95rem;color:var(--muted)}
.day-foot span{display:inline-flex;align-items:center;gap:8px}
.day-foot svg{width:18px;height:18px;color:var(--tone)}

/* ---------- industries: one spotlight card per industry, a person from that trade beside it ---------- */
.ind-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ind-list button{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-sm);border:1px solid var(--line-btn);background:transparent;font:500 .94rem/1.2 var(--body);color:var(--muted);cursor:pointer;white-space:nowrap;transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.ind-list button svg{width:18px;height:18px;flex-shrink:0;color:currentColor}
.ind-list button:hover{border-color:var(--on-dark);color:var(--strong)}
.ind-list button[aria-selected="true"]{background:var(--on-dark-strong);border-color:var(--on-dark-strong);color:var(--dark)}
.ind-list button[aria-selected="true"] svg{color:var(--brand)}
.ind-list button{position:relative;overflow:hidden}
.ind-list button::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:var(--r-xs);background:var(--brand);transform:scaleX(0);transform-origin:left;opacity:0}
.ind-list.auto button[aria-selected="true"]::after{opacity:.9;animation:tabprog var(--ind-cycle,8s) linear forwards}
.ind-panel{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch;padding:44px 44px 44px 52px;border-radius:var(--r-lg);color:var(--on-dark);background:var(--dark-raised);border:1px solid var(--dark-line);min-width:0;overflow-x:clip}
.ind-copy{display:flex;flex-direction:column;gap:30px;min-width:0}
.ind-name{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.ind-name svg{width:18px;height:18px}
.bubble{position:relative;align-self:flex-start;max-width:24ch;padding:20px 24px;border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);background:var(--white);color:var(--ink);font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.5vw,1.9rem);line-height:1.18;letter-spacing:-.02em;box-shadow:var(--shadow-object)}
.bubble::after{content:"";position:absolute;right:-11px;top:22px;width:13px;height:24px;background:var(--white);clip-path:polygon(0 0,100% 50%,0 100%)}
.ind-wins{display:flex;flex-direction:column;gap:14px;max-width:560px}
.ind-label{font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.ind-wins ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.ind-wins li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:1.02rem;font-weight:500;line-height:1.35;color:var(--on-dark-strong)}
.ind-wins li svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--emph-soft);color:var(--emph)}
.ind-foot{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.ind-tools{font-size:.84rem;line-height:1.5;color:var(--on-dark-muted);max-width:44ch}
/* The picture beside an industry: a run report in the hero card's own grammar, drawn from the
   industry's fields (docs/decisions.md, 13 Oct 2026: no photography). It prints itself, row by
   row, each time its industry comes up. */
.ind-art{min-width:0;align-self:center}
.report{border-radius:var(--r-md);border:1px solid var(--dark-line-strong);background:var(--dark);padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.report-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding-bottom:12px;border-bottom:1px solid var(--dark-line)}
.report-h small{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.report-h b{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--on-dark-strong)}
.report-h .art-tag{grid-column:2;grid-row:1 / span 2}
.report .steps{gap:4px}
.report .step .txt{font-size:.92rem}
.step.you .dot{background:var(--on-dark-strong);border-color:var(--on-dark-strong);color:var(--dark)}
.step.you .st{color:var(--on-dark-strong)}
.report .step:nth-child(2){--n:1}.report .step:nth-child(3){--n:2}.report .step:nth-child(4){--n:3}.report .step:nth-child(5){--n:4}
@media (prefers-reduced-motion:no-preference){
  .ind-panel.on .report .step{animation:rise var(--slow) var(--ease) both;animation-delay:calc(90ms + var(--n,0) * 80ms)}
  .ind-panel.on .report .ba{animation:rise var(--slow) var(--ease) both;animation-delay:520ms}
}

/* ---------- where it runs ---------- */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mode{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:16px;background:var(--card-bg);min-width:0}
.mode.feature{background:var(--card-bg);border-color:var(--dark-line-strong)}
.mode-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mode-ic{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--emph-soft);color:var(--emph)}
.mode-ic svg{width:23px;height:23px}
.mode h3{font-size:1.4rem}
.mode .tag-line{font-family:var(--display);font-size:1.05rem;font-weight:500;color:var(--on-dark);margin-top:-8px}
.mode > p{color:var(--muted);font-size:.96rem}
.ticks{list-style:none;display:flex;flex-direction:column;gap:10px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:.94rem}
.ticks li svg{width:18px;height:18px;margin-top:3px;color:var(--tone)}
.best{margin-top:auto;font-size:.88rem;color:var(--muted);padding-top:14px;border-top:1px solid var(--line)}
.best b{color:var(--on-dark-strong);font-weight:600}
/* privacy: the on-your-computer mode leads, with a picture of what stays inside the office */
.local{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--dark-line-strong);border-radius:var(--r-lg);overflow:hidden;background:var(--dark-raised)}
.local-copy{padding:36px;display:flex;flex-direction:column;gap:16px;min-width:0}
.local-copy h3{font-size:1.6rem}
.local-copy .tag-line{font-family:var(--display);font-size:1.12rem;font-weight:500;color:var(--on-dark);margin-top:-8px}
.local-pts{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:4px}
.local-pts li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.lp-ic{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--emph-soft);color:var(--emph)}
.lp-ic svg{width:20px;height:20px}
.local-pts b{display:block;font-size:1.02rem;font-weight:600;color:var(--on-dark-strong);margin-bottom:2px}
.local-pts span{font-size:.93rem;line-height:1.5;color:var(--on-dark-muted)}
.local-art{padding:40px 36px;background:rgba(8,48,42,.55);border-left:1px solid var(--dark-line);display:flex;flex-direction:column;justify-content:center;min-width:0}
/* The pulse is a ring that scales and fades on the compositor, not a shadow that repaints. */
/* Where the data goes: your business, the servers in Canada, the named providers. One grammar with the run reports. */
.flow{display:flex;flex-direction:column}
.flow-node{border-radius:var(--r-md);border:1px solid var(--dark-line-strong);background:var(--dark);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.flow-node.you{flex-direction:row;align-items:center;gap:12px}
.flow-node.you svg{width:22px;height:22px;color:var(--emph);flex-shrink:0}
.flow-node.you b{color:var(--on-dark-strong);font-weight:600;white-space:nowrap}
.flow-node.you span{font-size:.86rem;color:var(--on-dark-muted);margin-left:auto;text-align:right}
.flow-node.ca{border-color:rgba(122,203,180,.45);box-shadow:var(--shadow-object)}
.flow-arrow{height:28px;display:grid;place-items:center}
.flow-arrow i{position:relative;width:2px;height:100%;background:linear-gradient(var(--dark-line-strong),var(--emph))}
.flow-arrow i::after{content:"";position:absolute;left:-4px;bottom:1px;width:9px;height:9px;border-right:2px solid var(--emph);border-bottom:2px solid var(--emph);transform:rotate(45deg)}
.flow-tag{font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--emph)}
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.flow-grid span{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;padding:10px 12px;border-radius:var(--r-sm);background:var(--dark-raised);border:1px solid var(--dark-line);font-size:.86rem;font-weight:500;color:var(--on-dark-strong)}
.flow-grid svg{width:16px;height:16px;flex-shrink:0;color:var(--emph)}
.flow-grid small{display:block;width:100%;font-size:11.5px;font-weight:400;color:var(--on-dark-muted)}
.flow-chips{display:flex;flex-wrap:wrap;gap:8px}
.flow-chips span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-pill);border:1px solid var(--dark-line-strong);font-size:.84rem;color:var(--on-dark)}
.flow-chips svg{width:14px;height:14px;color:var(--on-dark-muted)}
.best a{color:var(--on-dark-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.best a:hover{text-decoration-color:currentColor}
.calc-note .calc-how{color:var(--on-dark-strong);font-variant-numeric:tabular-nums}
.pv-foot{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:.95rem;color:var(--muted)}
.pv-foot li{display:inline-flex;align-items:flex-start;gap:8px;max-width:34ch}
.pv-foot svg{width:18px;height:18px;flex-shrink:0;color:var(--tone);margin-top:2px}
.modes-h{margin:40px 0 16px;font-size:1rem;font-weight:500;color:var(--on-dark-muted)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-pill);border:1px solid var(--dark-line-strong);color:var(--on-dark-muted);white-space:nowrap}
.chip.live{color:var(--emph);border-color:rgba(122,203,180,.4);background:var(--emph-soft)}
.chip.soon{color:var(--muted);border-color:var(--line);background:transparent}

/* ---------- process ---------- */
/* How it works, as a sticky stack. Each card sticks a little lower than the one before, so an
   edge of every earlier step stays visible and the four read as a sequence. Plain position:sticky:
   no timeline, no script, a plain list wherever it is unsupported. The cards butt up with no gap
   (a gap is a window onto the card underneath) and are opaque for the same reason. */
.stack{list-style:none}
.stack-card{position:sticky;top:calc(100px + var(--i,0) * 14px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:40px;align-items:center;min-height:60vh;padding:40px;border-radius:var(--r-lg);border:1px solid var(--dark-line);background:var(--dark-raised);box-shadow:var(--shadow-object)}
.stack-n{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stack-copy h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;margin:8px 0 14px}
.stack-copy p{color:var(--muted);max-width:42ch}
.stack-art{min-width:0}
/* The drawn pictures: a task map, a quote, a side-by-side, a run log. One grammar for all four. */
.art{border-radius:var(--r-md);border:1px solid var(--dark-line);background:var(--dark);padding:18px 20px;display:flex;flex-direction:column;gap:12px;max-width:560px;margin-inline:auto}
.art-h{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600;color:var(--on-dark-strong);padding-bottom:12px;border-bottom:1px solid var(--dark-line)}
.art-tag{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.art-rows{list-style:none;display:flex;flex-direction:column;gap:8px}
.art-rows li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:.95rem;color:var(--on-dark)}
.art-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--emph-soft);color:var(--emph)}
.art-ic svg{width:12px;height:12px}
.art-who{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.art-rows li.you .art-ic{background:var(--on-dark-strong);color:var(--dark)}
.art-rows li.you .art-who{color:var(--on-dark-strong)}
.art-rows li.person .art-ic{background:transparent;border:1px dashed var(--dark-line-strong);color:transparent}
.art-f{font-size:.88rem;color:var(--on-dark-muted);border-top:1px solid var(--dark-line);padding-top:12px}
.art-kv{list-style:none;display:flex;flex-direction:column;gap:10px}
.art-kv li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;font-size:.95rem;align-items:start}
.art-kv b{font-weight:500;color:var(--on-dark-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.art-kv span{color:var(--on-dark-strong)}
.art-cmp{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 22px;gap:10px 12px;font-size:.95rem;align-items:center;color:var(--on-dark)}
.art-cmp .art-ch{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.art-cmp .art-cv{color:var(--on-dark-strong)}
.art-cmp .art-ic{justify-self:end}
.art .steps{gap:4px}

/* ---------- platform ---------- */
.platform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mod{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease);min-width:0}
a.mod:hover{border-color:var(--on-dark);transform:translateY(-2px)}
.mod-top{display:flex;align-items:center;gap:12px}
.mod-top .chip{margin-left:auto}
.mod-ic{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--tint);color:var(--tint-ink);flex-shrink:0}
.mod-ic svg{width:18px;height:18px}
.mod h3{font-size:1.08rem}
.mod p{color:var(--muted);font-size:.94rem}
/* A link on the plane: white, underlined, never the accent, which is the primary action's. */
.mod .more,.all,.bmeta .more{color:var(--strong);font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:4px;transition:text-decoration-color var(--fast) var(--ease)}
.mod .more:hover,.all:hover,.bmeta .more:hover{text-decoration-color:currentColor}
.mod .more{margin-top:auto;font-size:.88rem;padding-top:6px}
.mod.engine{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;background:var(--dark-raised);color:var(--on-dark);border-color:var(--dark-line-strong);padding:32px 34px;--muted:var(--on-dark-muted)}
.mod.engine:hover{border-color:var(--on-dark)}
.mod.engine h3{font-size:1.6rem;color:var(--on-dark-strong)}
.mod.engine .mod-ic{background:var(--emph-soft);color:var(--emph);width:44px;height:44px}
.mod.engine p{font-size:1.02rem}
.mod.engine .more{color:var(--on-dark-strong)}
.engine-copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.engine-art{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.engine-art span{font-size:12px;padding:7px 10px;border-radius:var(--r-sm);border:1px solid var(--dark-line);color:var(--on-dark-muted);background:var(--dark);white-space:nowrap}
.engine-art span.on{color:var(--on-dark-strong);border-color:var(--dark-line-strong)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.faq-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px;min-width:0}
.faq-side h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.faq-side p{color:var(--muted)}
.faq{border-top:1px solid var(--line)}
.faq[hidden]{display:none}
.faq-panels{min-width:0}
.faq-panels .faq{animation:faqin var(--enter) var(--ease)}
@keyframes faqin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.faq-cats{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.faq-cats button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 10px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card-bg);font:500 1rem/1.2 var(--body);color:var(--card-ink-2);cursor:pointer;text-align:left;white-space:nowrap;transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.faq-cats button:hover{border-color:var(--on-dark);color:var(--card-ink)}
.faq-cats .ic{width:34px;height:34px;flex-shrink:0;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--tint);color:var(--tint-ink)}
.faq-cats .ic svg{width:18px;height:18px}
.faq-cats .n{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.faq-cats button[aria-selected="true"]{background:var(--on-dark-strong);border-color:var(--on-dark-strong);color:var(--dark)}
.faq-cats button[aria-selected="true"] .ic{background:var(--brand-weak);color:var(--brand)}
.faq-cats button[aria-selected="true"] .n{color:var(--ink-2)}
.faq-cta{margin-top:6px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0;font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:12px;height:12px;border-right:2px solid var(--tone);border-bottom:2px solid var(--tone);transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details[open].closing summary::after{transform:rotate(45deg) translate(-3px,-3px)}
.faq summary::after{transition:transform var(--enter) var(--ease)}
.faq .ans{padding:0 40px 20px 0;color:var(--muted);display:flex;flex-direction:column;gap:10px;max-width:68ch}
.faq .ans b{color:var(--strong);font-weight:600}

/* ---------- book ---------- */
.book{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.book-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.book-copy h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.book-copy > p{color:var(--on-dark-muted);font-size:1.06rem;max-width:52ch}
.next{list-style:none;display:flex;flex-direction:column;gap:16px;counter-reset:n;margin-top:6px}
.next li{display:grid;grid-template-columns:30px 1fr;gap:14px;color:var(--on-dark-muted);font-size:.96rem}
.next li::before{counter-increment:n;content:counter(n);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;border:1px solid var(--dark-line-strong);color:var(--on-dark);font-variant-numeric:tabular-nums}
.next b{color:var(--on-dark-strong);display:block;font-weight:600}
.book-card{background:var(--dark-raised);border:1px solid var(--dark-line);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:18px;min-width:0}
.book-card h3{font-size:1.35rem}
.book-card .btn{width:100%}
.book-meta{display:flex;flex-direction:column;gap:10px;font-size:.92rem;color:var(--on-dark-muted);padding-top:18px;border-top:1px solid var(--dark-line)}
.book-meta span{display:flex;align-items:center;gap:10px}
.book-meta svg{width:17px;height:17px;color:var(--emph);flex-shrink:0}
.book-meta b{color:var(--on-dark-strong);font-weight:600;user-select:all}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);border-top:1px solid var(--dark-line);color:var(--on-dark-muted);padding-block:72px 32px;font-size:.93rem}
.foot{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:36px}
.foot-brand{display:flex;flex-direction:column;gap:16px;min-width:0}
.foot-brand p{max-width:36ch;line-height:1.65}
.foot h4{font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted);opacity:.85;margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot a{text-decoration:none;transition:color var(--fast) var(--ease)}
.foot a:hover{color:var(--on-dark-strong)}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.84rem}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--on-dark-strong)}

/* ---------- inner pages ---------- */
.crumbs{font-size:13px;color:var(--on-dark-muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--on-dark)}
.crumbs a:hover{color:var(--on-dark-strong)}
.page-hero{padding-block:136px 88px}
.glance{position:relative;z-index:1;background:var(--dark-raised);border:1px solid var(--dark-line);border-radius:var(--r-lg);padding:8px 24px;min-width:0}
.glance dl{margin:0}
.glance div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--dark-line)}
.glance div:last-child{border-bottom:0}
.glance dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted);padding-top:3px}
.glance dd{margin:0;color:var(--on-dark-strong);font-size:.96rem}
.answer{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.answer-lead{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.38;letter-spacing:-.015em;font-weight:500;color:var(--strong)}
.answer-body{display:flex;flex-direction:column;gap:16px;color:var(--muted);font-size:1.02rem}
.answer-body b{color:var(--strong)}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cap{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cap h3{font-size:1.22rem}
.cap > p{color:var(--muted)}
.cap ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cap li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:.94rem}
.cap li::before{content:"";width:6px;height:6px;border-radius:var(--r-xs);background:var(--tone);margin-top:9px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-bg)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:720px}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
td b{font-weight:600}
td{color:var(--strong)}
td.muted{color:var(--muted)}
th.us,td.us{background:var(--tint)}
.pill{display:inline-block;font-size:12px;padding:3px 8px;border-radius:var(--r-pill);background:var(--tint);color:var(--tint-ink);white-space:nowrap}
.pill.dev{background:var(--well);color:var(--tone)}
.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ctrl{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:2px solid var(--tone);min-width:0}
.ctrl h3{font-size:1.1rem}
.ctrl p{color:var(--muted);font-size:.94rem}
.price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.price .cap{background:var(--card-bg)}
.price-note{margin-top:22px;display:flex;align-items:center;gap:12px;font-size:.96rem;color:var(--muted)}
.price-note svg{width:20px;height:20px;color:var(--tone);flex-shrink:0}

/* ---------- motion ---------- */
/* ---------- blog: cards (home, index, related) ---------- */
.rel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.rel-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.all{white-space:nowrap}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bcard{display:flex;flex-direction:column;gap:12px;padding:26px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card-bg);color:var(--card-ink);text-decoration:none;min-width:0;transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.bcard:hover{border-color:var(--strong);transform:translateY(-2px)}
.bkick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,var(--ink-2))}
.bic{width:28px;height:28px;flex-shrink:0;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--tint);color:var(--tint-ink)}
.bic svg{width:16px;height:16px}
.btitle{font-size:1.22rem;line-height:1.25;letter-spacing:-.015em}
.bdesc{font-size:.94rem;line-height:1.55;color:var(--card-ink-2)}
.bmeta{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bmeta .more{font-family:var(--body);font-size:.9rem;letter-spacing:0;text-transform:none}
.bcard.feat{margin-bottom:18px;padding:36px;background:var(--dark-raised);border-color:var(--dark-line-strong);color:var(--on-dark-strong)}
.bcard.feat .btitle{font-size:clamp(1.5rem,2.8vw,2.1rem);max-width:28ch}
.bcard.feat .bdesc{color:var(--on-dark);max-width:62ch;font-size:1.02rem}
.bcard.feat .bkick{color:var(--on-dark-muted)}
.bcard.feat .bmeta .more{color:var(--on-dark-strong)}
.bcard.feat .bic{background:var(--emph-soft);color:var(--emph)}
.bcard.feat .bmeta{color:var(--on-dark-muted);justify-content:flex-start;gap:24px}
.bcard[hidden]{display:none}
.bthumb{display:block;margin:-26px -26px 8px;aspect-ratio:16/9;overflow:hidden;background:var(--dark);border-bottom:1px solid var(--line)}
.bthumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--slow) var(--ease)}
.bcard:hover .bthumb img{transform:scale(1.03)}
.bcard.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto auto 1fr auto;gap:14px 44px;align-items:start}
.bcard.feat .bthumb{grid-column:2;grid-row:1 / span 4;margin:0;align-self:center;border-radius:var(--r-md);border:1px solid var(--dark-line-strong)}
.bcard.feat > :not(.bthumb){grid-column:1}
.bcard.feat .bkick{margin-top:6px}
.bfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.bfilter button{padding:9px 16px;border-radius:var(--r-sm);border:1px solid var(--line-btn);background:transparent;font:500 .92rem/1.2 var(--body);color:var(--muted);cursor:pointer;transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.bfilter button:hover{border-color:var(--on-dark);color:var(--strong)}
.bfilter button.on{background:var(--on-dark-strong);border-color:var(--on-dark-strong);color:var(--dark)}
.bempty{color:var(--muted)}

/* ---------- blog: article ---------- */
.post-hero{padding-block:128px 56px;overflow:hidden;isolation:isolate;position:relative}
.post-top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.blog-hero .post-top{grid-template-columns:1fr}
.post-head{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;min-width:0}
.post-head > *{max-width:900px}
.post-cover{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--dark-line-strong);box-shadow:var(--shadow-object);aspect-ratio:16/9;background:var(--dark-raised)}
.post-cover img{display:block;width:100%;height:100%;object-fit:cover}
.post-head h1{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--on-dark-strong)}
.post-kick{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted)}
.post-kick .bic{background:var(--emph-soft);color:var(--emph)}
.post-lede{font-size:1.14rem;line-height:1.6;color:var(--on-dark);max-width:64ch}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:.88rem;color:var(--on-dark-muted)}
.crumbs span[aria-current]{color:var(--on-dark-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40ch}
.post-wrap{background:var(--white)}
.post-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;padding-block:56px 88px;align-items:start}
.post-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.toc summary{list-style:none;cursor:default;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:12px}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;display:flex;flex-direction:column;border-left:1px solid var(--rule)}
.toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:.9rem;line-height:1.4;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a.on{border-left-color:var(--brand);color:var(--ink);font-weight:600}
.toc-cta{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-md);background:var(--dark);color:var(--on-dark)}
@media (max-height:1000px){.toc-cta{display:none}}
.toc-cta b{font-family:var(--display);font-size:1.05rem;color:var(--on-dark-strong)}
.toc-cta p{font-size:.86rem;line-height:1.5;color:var(--on-dark-muted)}
.toc-cta .btn{align-self:flex-start}
.post-body{max-width:740px;min-width:0;display:flex;flex-direction:column;gap:32px}
.answer-box{padding:24px 26px;border-radius:0 var(--r-md) var(--r-md) 0;border-left:4px solid var(--brand);background:var(--brand-weak2)}
.ab-label{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.answer-box p{font-family:var(--display);font-size:1.18rem;line-height:1.5;font-weight:500;letter-spacing:-.008em;color:var(--ink)}
.takeaways{padding:24px 26px;border:1px solid var(--rule);border-radius:var(--r-md)}
.takeaways h2{font-size:1.15rem;margin-bottom:14px}
.takeaways ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.takeaways li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:1rem;line-height:1.55;color:var(--ink)}
.takeaways li svg{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--brand-weak);color:var(--brand);margin-top:2px}
.prose{font-size:1.06rem;line-height:1.72;color:var(--ink-2)}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.8rem);line-height:1.2;color:var(--ink);margin:48px 0 16px;scroll-margin-top:96px}
.prose h2:first-child{margin-top:8px}
.prose h3{font-size:1.18rem;color:var(--ink);margin:30px 0 10px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:1.4em;display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--brand);font-weight:600}
.prose strong{color:var(--ink);font-weight:600}
.prose a,.post-sources a{color:var(--brand-ink);text-decoration:underline;text-decoration-color:rgba(15,122,99,.35);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover,.post-sources a:hover{text-decoration-color:var(--brand)}
.prose code{font-size:.86em;padding:2px 6px;border-radius:var(--r-xs);background:var(--surface-2);border:1px solid var(--rule)}
.prose .table-wrap{margin:8px 0 24px;background:var(--white)}
.prose table{min-width:560px;font-size:.92rem;line-height:1.5}
.prose th,.prose td{padding:12px 14px}
.prose td{color:var(--ink)}
.prose tbody tr:nth-child(even) td{background:var(--surface-2)}
.post-faq h2,.post-sources h2{font-size:clamp(1.45rem,2.6vw,1.8rem);margin-bottom:12px;scroll-margin-top:96px}
.post-faq,.post-sources{scroll-margin-top:96px}
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px;border-radius:var(--r-lg);background:var(--dark);color:var(--on-dark)}
.post-cta b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--on-dark-strong);margin-bottom:6px}
.post-cta p{font-size:.95rem;line-height:1.55;color:var(--on-dark-muted);max-width:52ch}
.post-cta .btn{flex-shrink:0}
.post-sources ol{padding-left:1.3em;display:flex;flex-direction:column;gap:10px;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.post-sources li span{display:block;color:var(--ink-muted);font-size:.86rem}
.src-note{margin-top:14px;font-size:.84rem;color:var(--ink-muted)}
.blog-hero{padding-block:136px 64px}
.blog-book{padding-block:64px}
.book-mini{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.book-mini h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--on-dark-strong);margin-bottom:8px}
.book-mini p{color:var(--on-dark-muted);max-width:56ch}

/* Motion: scroll-driven, in CSS, on the compositor; only opacity and transform. Without
   animation-timeline support an element simply renders as it finally is, which is why the whole
   block is behind @supports rather than the animation being behind a fallback. Nothing inside a
   scroll container (.hero, .sw-card, .local, .table-wrap ...) carries these classes: view()
   measures against the nearest scroll container and would never fire there. */
.reveal-stagger>:nth-child(2){--i:1}.reveal-stagger>:nth-child(3){--i:2}.reveal-stagger>:nth-child(4){--i:3}.reveal-stagger>:nth-child(5){--i:4}.reveal-stagger>:nth-child(6){--i:5}.reveal-stagger>:nth-child(7){--i:6}.reveal-stagger>:nth-child(8){--i:7}.reveal-stagger>:nth-child(9){--i:8}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 58%}
    /* children of a revealing group arrive in sequence, so a list reads as a list */
    .reveal-stagger>*{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry calc(48% + var(--i,0) * 9%)}
  }
}

/* Reduced motion is total: every animation ends at once and every transition collapses to 80ms, which keeps a press reading as a press without the movement. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:80ms!important;scroll-behavior:auto!important}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav-links{display:none}
  .foot{grid-template-columns:1fr 1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .day{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .day::before{display:none}
}
@media (max-width:920px){
  .sec{padding-block:64px}
  /* The page tops keep their room for the floating bar at every width (.sec above would halve it). */
  .hero{padding-block:112px 72px}
  .page-hero,.blog-hero{padding-top:112px}
  .post-hero{padding-top:104px}
  .hero-grid,.faq-grid,.book,.answer{grid-template-columns:1fr;gap:40px}
  .calc{grid-template-columns:1fr;gap:28px}
  .save-cta{grid-template-columns:auto 1fr}
  .save-cta .btn{grid-column:1 / -1;justify-self:start}
  .faq-side{position:static}
  .faq-cats{flex-direction:row;overflow-x:auto;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none}
  .faq-cats::-webkit-scrollbar{display:none}
  .faq-cats button{width:auto;flex-shrink:0;border-radius:var(--r-pill);padding:6px 14px 6px 6px;font-size:.92rem}
  .faq-cats .ic{width:28px;height:28px;border-radius:50%}
  .faq-cats .ic svg{width:15px;height:15px}
  .faq-cats .n{display:none}
  .faq-cta{display:none}
  .faq-grid{gap:24px}
  .platform,.modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .local{grid-template-columns:1fr}
  .strip-in{grid-template-columns:1fr}
  .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-grid{grid-template-columns:1fr;gap:28px;padding-top:28px}
  .post-top{grid-template-columns:1fr;gap:28px}
  .post-cover{max-width:640px}
  .bcard.feat{grid-template-columns:1fr}
  .bcard.feat .bthumb{grid-column:1;grid-row:auto;order:-1;margin:0 0 6px}
  .post-side{position:static}
  .toc{border:1px solid var(--rule);border-radius:var(--r-md);padding:14px 16px}
  .toc summary{cursor:pointer;margin-bottom:0;display:flex;justify-content:space-between}
  .toc summary::after{content:"+";font-size:1rem;color:var(--brand)}
  .toc[open] summary{margin-bottom:12px}
  .toc[open] summary::after{content:"-"}
  .toc-cta{display:none}
  .local-art{border-left:0;border-top:1px solid var(--dark-line)}
  .modes .mode.feature{grid-column:1 / -1}
  .stack-card{position:static;grid-template-columns:minmax(0,1fr);gap:24px;min-height:0;padding:24px;margin-bottom:16px;box-shadow:none}
  .stack-copy p{max-width:none}
  .mod.engine{grid-template-columns:1fr}
  .engine-art{justify-content:flex-start}
  .ind-panel{grid-template-columns:1fr;padding:0;gap:0}
  .ind-art{padding:0 28px 28px}
  .ind-copy{padding:28px 28px 24px;gap:24px}
  .bubble::after{display:none}
  .ind-list{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding-inline:20px;padding-bottom:6px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav{height:58px;gap:12px}
  .nav-cta{margin-left:auto}
  .nav-cta .btn{padding:7px 12px;font-size:14px}
  .nav{gap:12px}
  .logo{padding-left:4px;gap:8px}
  .logo span{font-size:1rem}
  .btn-sm{padding:6px 10px;font-size:13px}
  .lbl-lg{display:none}
  .lbl-sm{display:inline}
  .nav-toggle{display:inline-flex;margin-left:0}
  .sec{padding-block:52px}
  section[id]{scroll-margin-top:60px}
  .hero,.page-hero,.blog-hero{padding-top:112px}
  .post-hero{padding-top:104px}
  .sec-head{margin-bottom:32px}
  .cta-row .btn{flex:1 1 100%}
  .platform,.modes,.caps,.price,.controls,.ind-wins ul,.ba{grid-template-columns:1fr}
  .ind-copy{padding:22px 20px 26px}
  .ind-art{padding:0 20px 22px}
  .stack-card{padding:20px}
  .art{padding:14px 16px}
  .art-kv li{grid-template-columns:104px minmax(0,1fr)}
  .ribbon-run{font-size:17px;gap:28px;padding-right:28px}
  .ribbon-run li::after{margin-left:28px}
  .day{grid-template-columns:1fr;row-gap:14px}
  .day li{flex-direction:row;align-items:flex-start;gap:12px}
  .day time{flex-shrink:0;min-width:64px;text-align:center}
  .sw-tabs button{flex-direction:column;gap:5px;font-size:12px;padding:11px 2px}
  .sw-panel{padding:20px 16px 6px}
  .sw-note{padding-inline:16px}
  .step .st{display:none}
  .step{grid-template-columns:28px minmax(0,1fr)}
  .mode,.book-card{padding:22px}
  .bgrid{grid-template-columns:1fr}
  .bcard{padding:22px}
  .bthumb{margin:-22px -22px 6px}
  .bcard.feat .bthumb{margin:0 0 6px}
  .bcard.feat{padding:24px}
  .post-hero{padding-block:104px 36px}
  .post-lede{font-size:1.02rem}
  .answer-box,.takeaways{padding:20px}
  .answer-box p{font-size:1.06rem}
  .prose{font-size:1.02rem}
  .post-cta{flex-direction:column;align-items:flex-start;padding:22px}
  .crumbs span[aria-current]{max-width:22ch}
  .faq-cats{overflow:visible;margin-inline:0;padding:0;gap:8px}
  .faq-cats button{flex:1 1 0;justify-content:center;padding:6px 10px 6px 6px}
  .strip-list{grid-template-columns:1fr}
  .flow-grid{grid-template-columns:1fr}
  .flow-node.you{flex-wrap:wrap}
  .flow-node.you span{margin-left:0;text-align:left;width:100%}
  .local-copy,.local-art{padding:24px 20px}
  .proof{grid-template-columns:1fr}
  .proof-card{padding:24px}
  .calc{padding:22px}
  .calc-r{padding:20px}
  .save-cta{grid-template-columns:1fr;padding:22px}
  .save-cta .btn{width:100%}
  .glance div{grid-template-columns:1fr;gap:4px}
  .foot{grid-template-columns:1fr 1fr}
  .faq .ans{padding-right:0}
}

@media (max-width:380px){.logo span{font-size:1rem}.nav{gap:8px}.nav-cta .btn{padding:6px 10px;font-size:13px}}

/* The narrowest phones: the bar keeps the name and the menu; the menu carries the booking button. */
@media (max-width:380px){.nav-cta{display:none}}