/* ==========================================================================
   cosminapalade.com · main.css
   The whole design system in one file, for every page (home, privacy,
   product pages). No framework, no build step, no icon font.

   Look: "the specification". The page is set like a precise engineering
   document: a 12-column grid with hairline rules, large type with real
   weight contrast (Plus Jakarta Sans 800 against 200-250), the section
   numbers 00-11 as the spine, flat surfaces and one accent used only where
   the proof is: Apple blue on light grey in the light theme, gold on
   #121620 in the dark theme. Three moments move: the headline clicks into
   line, the numbers land, the products enter like a keynote; the closing
   panel opens out of a rounded inset.

   Order: fonts, tokens, base, header, sections, components, then one block
   per page section in page order, product pages, legal page, the relief,
   theme-only rules, motion and print. A component's responsive rules sit
   right after it, one @media block per breakpoint. Breakpoints: 1279/1100,
   1099/900, 899/681, 680, 560, 400, 359 (900 on the product pages).

   Theme: light by default; dark when <html data-theme="dark">, set before
   first paint by the inline script in <head> and toggled in js/site.js.
   Colours and shadows that change with the theme are tokens; the rules in
   "Theme-specific rules" are the few structural differences.

   CSP: the site has no 'unsafe-inline', so nothing here may rely on a
   style="" attribute; per-element values (bar widths, menu stagger) are
   classes. Classes and custom properties set by js/site.js: .js/.no-js,
   .reveal/.is-visible/.is-done, --d, .spot, --mx/--my, --topo-y,
   .is-scrolled, .nav-open, .is-active, .brand-section.is-visible,
   .is-expanded, .is-filtered-*, .is-dismissed, .is-playing/.has-played/
   .is-loading, .is-invalid, .cf-alert-link, .cookie-banner/.is-open,
   .mobile-cta.is-visible, .is-counting with data-shown on [data-count],
   and the Lenis classes on <html>.

   Some rules sit later than their section because an earlier rule of the
   same specificity would otherwise win: moving them would change the page.
   ========================================================================== */

/* ==========================================================================
   Fonts (self-hosted, variable, SIL OFL 1.1)
   ========================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallbacks keep the layout still while fonts load */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 21%;
  line-gap-override: 0%;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --font-display: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Brand palette */
  --navy: #040e27;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --gold: #fac800;
  --gold-hover: #ffda44;
  --green: #22c55e;
  --red: #ff453a;

  /* Light theme: soft grey surfaces, navy ink, Apple blue */
  --bg: #f1f3f6;
  --bg-alt: #ebeef2;
  --card: #ffffff;
  --card-soft: #f5f5f7;
  --field: #ffffff;
  --ink: #040e27;
  --ink-2: #424245;
  --ink-3: #636368; /* muted text: at least 4.9:1 on every light surface */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --error: #d70015;
  --accent: var(--blue);
  --accent-hover: var(--blue-hover);
  --on-accent: #ffffff;
  --accent-text: #005cb8; /* 5.6:1 on --bg-alt, 5.9:1 on --bg */
  --accent-soft: rgba(0, 113, 227, 0.09);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  /* Feature surfaces (call card, featured book) and footer: light here, navy-dark in the dark theme */
  --feature-bg: #ffffff;
  --feature-ink: var(--navy);
  --feature-ink-2: var(--ink-2);
  /* The closing panel and the footer under it: one brand-blue moment.
     White on #0656c4 is 6.7:1. */
  --footer-bg: #0656c4;
  --panel-bg: radial-gradient(70% 60% at 50% 0%, rgba(90, 170, 255, 0.16), transparent 70%), #0656c4;
  --panel-pane: rgba(4, 14, 39, 0.14); /* the call card: a darker pane, so its text stays above 6:1 */
  --panel-ink: #ffffff;
  --panel-ink-2: rgba(255, 255, 255, 0.95);
  --panel-line: rgba(255, 255, 255, 0.28);
  --panel-accent: #ffffff;
  --panel-btn-bg: #ffffff;
  --panel-btn-ink: var(--navy);

  /* Header glass */
  --header-bg: rgba(241, 243, 246, 0.72);
  --header-h: 72px;

  /* Glass (product cards, header controls, pills) */
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58));
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -14px 24px -18px rgba(4, 14, 39, 0.14), 0 1px 2px rgba(4, 14, 39, 0.06), 0 14px 34px -16px rgba(4, 14, 39, 0.24);
  --glass-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -18px 34px -24px rgba(4, 14, 39, 0.16),
    0 2px 6px rgba(4, 14, 39, 0.05), 0 40px 80px -36px rgba(4, 14, 39, 0.32);
  --glass-blur: blur(22px) saturate(180%);

  /* Surfaces are flat: a raised or pressed surface is a hairline ring */
  --neu-raise: 0 0 0 1px var(--rule);
  --neu-raise-sm: 0 0 0 1px var(--rule);
  --neu-raise-xs: 0 0 0 1px var(--rule);
  --neu-press-sm: inset 0 0 0 1px var(--rule);
  --frost: 80%;
  --rim: 0 0 0 0 transparent;

  /* Solid accent fill ("gel": flat brand colour with soft depth) */
  --gel: var(--blue);
  --gel-hover: #0a7cf0;
  --gel-text: #ffffff;
  --gel-shadow: none;
  --sheen: none;
  --knob: linear-gradient(180deg, #ffffff, #eef0f4);

  /* Elevation */
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.04), 0 48px 96px -40px rgba(4, 14, 39, 0.35);

  /* The specification: hairline rules, a wide 12-column grid, mono labels */
  --rule: color-mix(in srgb, var(--ink) 14%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink) 55%, transparent);
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --wide: 1320px;
  --col-gap: clamp(16px, 2vw, 28px);

  --radius: 14px; /* cards: precise, not puffy */
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}
/* Dark theme: solid #121620, gold accent */
:root[data-theme="dark"] {
  --bg: #121620;
  --bg-alt: #121620;
  --card: #1a1f2b;
  --card-soft: #1a1f2b;
  --field: #121620;
  --ink: #f5f5f7;
  --ink-2: #c9ccd4;
  --ink-3: #9a9fac;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --error: #ff6961;
  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --on-accent: var(--navy);
  --accent-text: var(--gold);
  --accent-soft: rgba(250, 200, 0, 0.1);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fac800' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  --feature-bg: #1a1f2b;
  --feature-ink: #f5f5f7;
  --feature-ink-2: #c9ccd4;
  --footer-bg: #0c0f16;
  --panel-bg: radial-gradient(70% 60% at 50% 0%, rgba(250, 200, 0, 0.07), transparent 70%), linear-gradient(180deg, #0c1b40, #040e27);
  --panel-ink-2: rgba(255, 255, 255, 0.82);
  --panel-pane: rgba(255, 255, 255, 0.05);
  --panel-line: rgba(255, 255, 255, 0.2);
  --panel-accent: var(--gold);
  --panel-btn-bg: var(--gold);

  --header-bg: rgba(18, 22, 32, 0.72);

  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  --glass-rim: rgba(255, 255, 255, 0.14);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -14px 24px -18px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -16px rgba(0, 0, 0, 0.7);
  --glass-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -18px 34px -24px rgba(0, 0, 0, 0.6),
    0 40px 80px -36px rgba(0, 0, 0, 0.8);


  --gel: var(--gold);
  --gel-hover: #ffd21f;
  --gel-text: var(--navy);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0));
  --knob: linear-gradient(180deg, #ffe78f, #fac800 60%, #e2b300);

  --shadow-lg: 0 48px 96px -40px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}
@media (max-width: 680px) {
  :root {
    --header-h: 64px;
  }
}

/* ==========================================================================
   Base: reset, type, focus, icons, page width
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
strong {
  color: var(--ink);
  font-weight: 650;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
main:focus {
  outline: none;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nobr {
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: none;
}
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Copy protection: pictures, video and book covers cannot be dragged
   out or saved with a long press; text stays selectable. */
img,
video,
picture,
.portrait-frame,
.book-cover {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
/* Sections focused after an in-page link: no outline around the whole section */
section[tabindex="-1"]:focus,
[id][tabindex="-1"]:focus {
  outline: none;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (max-width: 680px) {
  body {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Header, desktop navigation and the mobile menu sheet
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  isolation: isolate;
  color: var(--ink);
  transition: border-color 0.35s;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 30px -22px rgba(4, 14, 39, 0.35);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
/* The glass lives on a pseudo-element: a backdrop-filter on the header
   itself would trap the fixed mobile menu inside the header's box. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  opacity: 0;
  transition: opacity 0.35s;
  display: none;
}
.site-header.is-scrolled,
.nav-open .site-header {
  border-bottom-color: var(--line);
}
.site-header.is-scrolled::before,
.nav-open .site-header::before {
  opacity: 1;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--ink);
  min-height: 44px; /* comfortable tap target for the logo */
}
.brand-mark {
  color: var(--accent);
}
.brand-text {
  display: flex;
  flex-direction: column;
  font: 750 1.1rem/1.1 var(--font-display);
  letter-spacing: -0.02em;
  font-size: 1.05rem;
}
.brand-role {
  margin-top: 4px;
  color: var(--ink-3);
  font: 600 0.62rem/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav {
  display: flex;
  align-items: center;
}
.nav-list {
  display: flex;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
}
.nav-link {
  position: relative;
  display: block;
  border-radius: 999px;
  color: var(--ink-2);
  font: 550 0.92rem/1 var(--font-display);
  padding: 9px 13px;
  transition: color 0.2s, background 0.25s, box-shadow 0.25s;
}
.nav-link:hover {
  color: var(--ink);
  background: var(--accent-soft);
}
.nav-link.is-active {
  color: var(--ink);
  box-shadow: var(--glass-shadow);
}
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
  display: none;
}
.nav-mobile-extra {
  display: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
  transition: border-color 0.2s, transform 0.3s var(--ease);
}
.icon-btn:hover {
  border-color: var(--ink);
}
.icon-btn .ico {
  width: 18px;
  height: 18px;
}
.theme-toggle .ico-moon {
  color: #ff9f0a;
  fill: #ffb300;
  stroke: #ff9f0a;
  right: 9px;
}
.theme-toggle .ico-sun {
  color: var(--gold);
  left: 9px;
}
.theme-toggle .ico-sun,
[data-theme="dark"] .theme-toggle .ico-moon {
  display: none;
}
.nav-toggle {
  display: none;
}
.nav-toggle .ico-close,
.nav-open .nav-toggle .ico-open {
  display: none;
}
.nav-open .nav-toggle .ico-close {
  display: block;
}
.scroll-progress {
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: opacity 0.3s;
  position: fixed;
  top: 0;
  bottom: auto;
  height: 3px;
  opacity: 1;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.is-scrolled .scroll-progress {
  opacity: 1;
}
.brand-light,
.brand-light .brand-role {
  color: #ffffff;
}
.brand-light .brand-role {
  opacity: 0.55;
}
.brand-light .brand-mark {
  color: var(--gold);
}
.site-header .header-inner {
  transition: box-shadow 0.35s, background 0.35s;
}
.brand-role {
  display: none;
}
@media (max-width: 1099px) {
  .nav-toggle {
    display: grid;
  }
  .site-nav {
    align-items: stretch;
    position: fixed;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    padding: calc(var(--header-h) + 18px) max(var(--gutter), 22px) calc(22px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0.65s;
  }
  .nav-open .site-nav {
    opacity: 1;
    transform: none;
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1);
  }
  .nav-link:hover {
    background: none;
    color: var(--accent-text);
  }
}
.nav-link:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.nav-link.is-active {
  background: var(--glass-fill);
}
/* Theme switch: a sliding knob in a track */
.theme-toggle {
  position: relative;
  width: 60px;
  height: 34px;
  border-radius: 999px;
  display: block;
}
.theme-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(4, 14, 39, 0.25);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.theme-toggle .ico {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
}
.theme-toggle:hover {
  transform: none;
}
.theme-toggle:active::after {
  width: 32px;
}
/* Theme switch: pressed track, raised knob */
.site-header .theme-toggle {
  border: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: var(--neu-press-sm);
}
.site-header .icon-btn.nav-toggle {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: var(--neu-raise-xs);
}
/* Desktop: the numbers and arrows belong to the mobile menu only */
.nav-num,
.nav-go {
  display: none;
}
/* The logo and the header buttons (theme, close) stay above the open
   full-screen menu, which lives inside the header */
.site-header .brand,
.site-header .header-actions {
  position: relative;
  z-index: 101;
}
/* Current section next to the name on phones and tablets */
.brand-section {
  display: none;
}
@media (max-width: 1099px) {
  .nav-link.is-active::after {
    left: auto;
    right: 4px;
    top: 50%;
    bottom: auto;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    display: none;
  }
  .nav-open {
    overflow: hidden;
  }
  .site-header {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header::before {
    display: block;
    opacity: 1;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
  }
  .nav-open .site-header::before {
    background: var(--bg);
  }
  .nav-list {
    flex-direction: column;
    gap: 0;
    padding: 0;
    counter-reset: none;
  }
  .nav-list li {
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-list li:last-child {
    border-bottom: 1px solid var(--line);
  }
  .nav-open .nav-list li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i) * 45ms + 180ms);
  }
  /* Stagger order (was style="--i: n" on each item; the CSP allows no inline styles) */
  .nav-list li:nth-child(1) {
    --i: 1;
  }
  .nav-list li:nth-child(2) {
    --i: 2;
  }
  .nav-list li:nth-child(3) {
    --i: 3;
  }
  .nav-list li:nth-child(4) {
    --i: 4;
  }
  .nav-list li:nth-child(5) {
    --i: 5;
  }
  .nav-mobile-extra {
    --i: 6;
    display: grid;
    gap: 16px;
    margin-top: auto;
    padding-top: 30px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-link,
  .nav-link.is-active {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 4px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ink);
    font: 700 clamp(1.55rem, 6.6vw, 2rem)/1.1 var(--font-display);
    letter-spacing: -0.035em;
  }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav-link,
  .nav-link.is-active {
    padding: 9px 9px;
    font-size: 0.9rem;
  }
}
@media (max-width: 1099px) {
  .nav-num {
    display: block;
    min-width: 24px;
    color: var(--accent-text);
    font: 700 0.68rem/1 var(--font-display);
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
  }
  .nav-label {
    flex: 1;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
  }
  .nav-go {
    display: block;
    width: 20px;
    height: 20px;
    color: var(--ink-3);
    opacity: 0.55;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, color 0.3s;
  }
  .nav-link:hover .nav-label,
  .nav-link:focus-visible .nav-label,
  .nav-link:active .nav-label {
    transform: translateX(6px);
    color: var(--accent-text);
  }
  .nav-link:hover .nav-go,
  .nav-link:focus-visible .nav-go,
  .nav-link:active .nav-go {
    opacity: 1;
    color: var(--accent-text);
    transform: translateX(4px);
  }
  .nav-link.is-active .nav-label {
    color: var(--accent-text);
  }
  .nav-link.is-active .nav-go {
    opacity: 1;
    color: var(--accent-text);
  }
  .nav-open .nav-mobile-extra {
    opacity: 1;
    transform: none;
    transition-delay: 0.55s;
  }
  .nav-status {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
    margin: 0;
    color: var(--ink-2);
    font: 600 0.82rem/1.3 var(--font-display);
  }
  .nav-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .nav-social {
    display: flex;
    gap: 10px;
  }
  .nav-social .ico {
    width: 18px;
    height: 18px;
  }
  .brand-section {
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    padding: 4px 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font: 700 0.68rem/1 var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, padding 0.5s, margin 0.5s;
  }
  .brand-section.is-visible {
    max-width: 120px;
    margin-left: 4px;
    padding: 5px 9px;
    opacity: 1;
  }
  .nav-open .brand-section {
    opacity: 0;
  }
}
@media (max-width: 680px) {
  .theme-toggle {
    width: 56px;
    height: 32px;
  }
  .theme-toggle::after {
    width: 24px;
    height: 24px;
  }
  .site-nav {
    inset: calc(var(--header-h) + 8px) 12px auto;
  }
  .site-header .brand {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
  }
  .site-header .brand-mark {
    grid-row: 1 / span 2;
  }
  .site-header .brand-text {
    grid-row: 1 / span 2;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .site-header .brand:has(.brand-section.is-visible) .brand-text {
    grid-row: 1;
    align-self: end;
  }
  .brand-section:not(.is-visible) {
    display: none;
  }
}
@media (max-width: 560px) {
  .header-inner {
    gap: 12px;
  }
}
@media (max-width: 400px) {
  .brand-section {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
  }
  .brand-section.is-visible {
    max-width: 100px;
    padding: 5px 8px;
  }
}
@media (max-width: 680px) {
  .brand-section,
  .brand-section.is-visible {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    font: 700 0.6rem/1.2 var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}
@media (max-width: 359px) {
  .brand-section {
    display: none;
  }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .header-inner {
    gap: 16px;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header .header-inner,
  .site-nav {
    background: var(--bg);
  }
}
@media (max-width: 1099px) {
  .site-nav {
    inset: 0;
    background: radial-gradient(120% 60% at 100% 0%, var(--accent-soft), transparent 60%), var(--bg);
    overflow-y: auto;
  }
}
.site-header .header-inner,
.site-header.is-scrolled .header-inner {
  max-width: var(--wide);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==========================================================================
   Sections and section heads
   ========================================================================== */
.section {
  position: relative;
  padding-block: clamp(80px, 10vw, 136px);
  background: var(--bg);
}
.section-alt {
  background: var(--bg-alt);
}
.section-head {
  /* A ruled spec line: the number and name on the rule, the title on the
     left eight columns, the summary in the last four */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
  margin: 0 0 clamp(44px, 6vw, 88px);
  padding-top: 18px;
  border-top: 1px solid var(--rule-strong);
  text-align: left;
}
.section-head > * {
  grid-column: 1 / -1;
}
.section-head-left {
  margin-inline: 0;
  text-align: left;
}
.section-head h2,
.meet-copy h2,
.spec h2 {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.section-head h2 {
  grid-column: 1 / span 8;
  font-size: clamp(2.3rem, 4.8vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.section-sub {
  margin: 20px 0 0;
  max-width: 640px;
  color: var(--ink-3);
  font-size: clamp(1.02rem, 1.4vw, 1.17rem);
}
.section-head .section-sub {
  grid-column: 9 / -1;
  max-width: none;
  margin: 0 0 0.3em;
  font-size: 0.98rem;
  line-height: 1.6;
}
.section-head-left .section-sub {
  margin-left: 0;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: var(--ink);
  font: 600 0.74rem/1.2 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.section-head .kicker {
  justify-self: start;
  margin-bottom: clamp(28px, 4vw, 56px);
}
/* The section number: mono, in the accent, no pill */
.kicker-num {
  display: inline-block;
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0;
}
.kicker-plain {
  margin-bottom: 14px;
}
.mark {
  background: linear-gradient(transparent 62%, var(--accent-soft) 62%, var(--accent-soft) 94%, transparent 94%);
  color: var(--accent-text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gold {
  color: var(--accent-text);
}
.section-alt > .wrap {
  position: relative;
}
.kicker-num,
.price-model {
  color: var(--accent-text);
}
.hero > .wrap,
.section > .wrap {
  position: relative;
}
/* Sections below the fold are laid out only when they come near the
   viewport. The placeholder height keeps the scrollbar stable. */
.section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
@media (max-width: 899px) {
  .section-head h2,
  .section-head .section-sub {
    grid-column: 1 / -1;
  }
  .section-head .section-sub {
    margin: 20px 0 0;
    max-width: 640px;
  }
}
@media (max-width: 680px) {
  /* Centre what stands alone, full-width what is an action */
  .spec-head,
  .inline-cta,
  .pricing-foot {
    text-align: center;
  }
  .kicker {
    letter-spacing: 0.12em;
    gap: 10px;
  }
}

/* ==========================================================================
   Components: buttons, links, chips, checklists, surfaces, reveal, pointer light
   ========================================================================== */
.btn {
  --h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 650 0.97rem/1.1 var(--font-display);
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
  isolation: isolate;
}
@media (max-width: 560px) {
  .header-cta,
  .brand-role {
    display: none;
  }
}
.btn:active {
  transform: translateY(0) scale(0.99);
}
.btn-lg {
  --h: 56px;
  padding: 0 30px;
  font-size: 1.02rem;
}
.btn-sm {
  --h: 40px;
  padding: 0 16px;
  font-size: 0.9rem;
}
.header-cta {
  --h: 44px;
  padding: 0 18px;
}
.btn-block {
  width: 100%;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 8px;
  color: var(--ink);
  font: 650 0.95rem/1.3 var(--font-display);
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color 0.2s;
}
.link-arrow .ico {
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover {
  color: var(--accent-text);
}
.link-arrow:hover .ico {
  transform: translateX(3px);
}
/* Reveal on scroll (only with JS; content stays visible without it) */
.js .reveal {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
    box-shadow 0.4s, border-color 0.4s, background-color 0.4s;
}
.js .reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}
/* Numbers landing: while site.js counts, the real number keeps its place
   (and is what assistive technology reads) and the count is drawn over it,
   right-aligned, so nothing beside it moves. Static without JS. */
[data-count].is-counting {
  position: relative;
  -webkit-text-fill-color: transparent;
}
[data-count].is-counting::after {
  content: attr(data-shown); /* browsers without alt text for content */
  content: attr(data-shown) / "";
  position: absolute;
  inset: 0;
  text-align: right;
  -webkit-text-fill-color: currentColor;
}
/* Checklists */
.checks li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft) var(--check) center / 10px no-repeat;
}
.checks-sm li {
  font-size: 0.94rem;
  margin-bottom: 8px;
}
.chip {
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: 650 0.88rem/1 var(--font-display);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.chip:hover {
  color: var(--ink);
}
.cf-field .is-invalid:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 16%, transparent);
}
/* Buttons: no sheen layer (the ::before stays hidden) */
.btn {
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 2px;
  right: 2px;
  top: 1px;
  height: 52%;
  border-radius: 999px 999px 60% 60% / 999px 999px 40% 40%;
  background: var(--sheen);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.5s var(--ease);
}
.btn-primary {
  border-color: transparent;
}
.btn-primary::before {
  opacity: 0.9;
}
.btn-primary:hover::before {
  transform: translateY(1px);
}
.btn-outline {
  border-color: var(--rule-strong);
  background: transparent;
  color: var(--ink);
}
.btn-outline::before {
  opacity: 0.6;
  display: none;
}
/* Reviews filter: a segmented control */
.chip.is-active,
[data-theme="dark"] .chip.is-active {
  background: var(--gel);
  color: var(--gel-text);
  box-shadow: var(--gel-shadow);
}
/* Light that follows the pointer across the cards (site.js adds .spot) */
.spot {
  --mx: 50%;
  --my: 0%;
  position: relative;
}
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  mix-blend-mode: normal;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.55), transparent 50%);
}
.spot > * {
  position: relative;
  z-index: 1;
}
.btn-outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:active {
  box-shadow: none;
}
/* Primary buttons: solid accent with soft depth */
.btn::before {
  display: none;
}
@media (hover: hover) {
  .spot:hover::after {
    opacity: 1;
  }
}

/* ==========================================================================
   Hero (with the book card in the lede)
   ========================================================================== */
.hero {
  padding: calc(var(--header-h) + clamp(28px, 4vw, 56px)) 0 clamp(56px, 7vw, 96px);
  background: var(--bg);
}
/* The first screen is a ruled spec sheet on the 12-column grid: the
   availability on the top line, the role on the rule, the headline left,
   the lede beside it, then the actions, the proof row and the stack. */
.hero-center {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  text-align: left;
}
.hero-center > * {
  grid-column: 1 / -1;
}
.hero-center > :not(h1) {
  animation: rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-center > :nth-child(3) {
  animation-delay: 0.5s;
}
.hero-center > :nth-child(4) {
  animation-delay: 0.6s;
}
.hero-center > :nth-child(5) {
  animation-delay: 0.68s;
}
.hero-center > :nth-child(7) {
  animation-delay: 0.9s;
}
.availability {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink-2);
  font: 500 0.8rem/1.2 var(--font-body);
  letter-spacing: 0.02em;
  word-spacing: 0.02em;
}
.pulse,
.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: pulse 2.2s infinite;
  animation-iteration-count: 6;
}
#hero-title {
  position: relative;
  margin: 0;
  padding-top: clamp(40px, 4.4vw, 64px);
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
/* Section 00: the role sits on the rule, on the line of the availability */
.hero-role {
  position: absolute;
  top: calc(-14px - 1.2em);
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--ink);
  font: 600 0.74rem/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  word-spacing: 0.04em;
}
.hero-role::before {
  content: "00"; /* browsers without alt text for content */
  content: "00" / "";
  color: var(--accent-text);
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0;
}
/* Line 1 heavy ink, line 2 ultra-light in the accent. The two lines are
   inline with a forced break, so the browser sees the headline as one text
   block: on phones it is then the largest paint, not the lede. */
.hero-line {
  display: inline;
}
.hero-line .w {
  display: inline-block;
}
/* Jam and release: the words of line 1 load slightly crooked, as if
   jammed, and click into line; then line 2 is released forward. Visible
   from the first frame (transform only, never opacity), so the headline can
   be the largest paint; about 1.3 s in all; still under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-line .w {
    animation: jam 0.8s cubic-bezier(0.34, 1.4, 0.5, 1) calc(0.12s + var(--i, 0) * 0.05s) both;
  }
  .hero-line .w:nth-child(1) {
    --x: -0.03em;
    --y: 0.16em;
    --r: -3deg;
  }
  .hero-line .w:nth-child(2) {
    --i: 1;
    --x: 0.04em;
    --y: -0.12em;
    --r: 2deg;
  }
  .hero-line .w:nth-child(3) {
    --i: 2;
    --x: -0.04em;
    --y: 0.2em;
    --r: 3.5deg;
  }
  .hero-line .w:nth-child(4) {
    --i: 3;
    --x: 0.03em;
    --y: -0.16em;
    --r: -2.5deg;
  }
  .hero-line .w:nth-child(5) {
    --i: 4;
    --x: -0.02em;
    --y: 0.14em;
    --r: 3deg;
  }
  .hero-line .w:nth-child(6) {
    --i: 5;
    --x: 0.04em;
    --y: -0.14em;
    --r: -3.5deg;
  }
  .hero-accent .w {
    --x: 0;
    --y: 0;
    --r: 0deg;
    animation: release 0.75s cubic-bezier(0.16, 1, 0.3, 1) calc(0.5s + var(--i, 0) * 0.04s) both;
  }
}
.hero-accent {
  color: var(--accent-text);
  font-weight: 250;
  letter-spacing: -0.045em;
}
.hero-accent::before {
  content: "\A"; /* the line break, also where alt text for content is unknown */
  content: "\A" / "";
  white-space: pre;
}
.hero-lede {
  grid-column: 1 / span 6;
  max-width: 38ch;
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  color: var(--ink-2);
  font-size: clamp(1.04rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  /* The book card opens above the later hero rows: every hero child is its
     own stacking context (entrance animation), so the lede is lifted over
     its later siblings. */
  position: relative;
  z-index: 10;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 40px);
}
.hero-actions .btn-outline {
  border-color: var(--rule-strong);
}
.hero-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 0.88rem;
}
.hero-assurances li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-assurances .ico {
  width: 15px;
  height: 15px;
  color: var(--accent-text);
  stroke-width: 2.6;
}
/* The proof row: the four numbers the case studies carry, ruled */
.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule-strong);
}
.proof li + li {
  border-left: 1px solid var(--rule);
}
.proof a {
  display: block;
  height: 100%;
  padding: 20px clamp(12px, 1.6vw, 24px) 6px;
  color: inherit;
  border-radius: 0;
}
.proof li:first-child a {
  padding-left: 0;
}
.proof b {
  display: block;
  color: var(--ink);
  font: 200 clamp(3rem, 5.6vw, 5.4rem)/0.9 var(--font-display);
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}
.proof b i {
  font-style: normal;
  font-size: 0.5em;
  letter-spacing: 0;
  color: var(--accent-text);
}
.proof-label {
  display: block;
  max-width: 24ch;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.4;
}
.proof a:hover b,
.proof a:focus-visible b {
  color: var(--accent-text);
}
/* The stack as a numbered spec list */
.hero-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--rule);
  counter-reset: chip;
}
.hero-chips li {
  display: flex;
  gap: 12px;
  padding: 14px clamp(12px, 1.6vw, 24px) 0 0; /* the right padding keeps a long item off the next number */
  color: var(--ink-2);
  font: 500 0.82rem/1.3 var(--font-body);
  letter-spacing: 0.01em;
}
.hero-chips li::before {
  content: "0" counter(chip); /* browsers without alt text for content */
  content: "0" counter(chip) / "";
  counter-increment: chip;
  flex: none;
  color: var(--ink-3);
  font-family: var(--mono);
}
/* Book peek inside the lede */
.book-peek {
  position: relative;
  display: inline;
  white-space: nowrap;
}
.book-peek-link {
  color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 1px;
}
.book-peek-link:hover {
  color: var(--accent-text);
}
.book-peek-card {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: calc(100% + 12px);
  display: flex;
  gap: 16px;
  width: 360px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  font-style: normal;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
}
/* An invisible bridge over the gap: the pointer can travel slowly from the
   link to the card without leaving .book-peek */
.book-peek-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}
.book-peek-cover {
  align-self: flex-start; /* keep the cover's ratio in the flex card */
  width: 78px;
  border-radius: 4px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}
.book-peek-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-peek-kicker {
  color: var(--accent-text);
  font: 700 0.66rem/1.2 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.book-peek-title {
  color: var(--ink);
  font: 750 1rem/1.2 var(--font-display);
}
.book-peek-hook {
  color: var(--ink-3);
  font-size: 0.84rem;
}
.book-peek-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--accent-text);
  font: 650 0.85rem/1.2 var(--font-display);
}
.hero,
.section {
  --surface: var(--bg);
}
.section-alt {
  --surface: var(--bg-alt);
}
@media (hover: hover) and (min-width: 900px) {
  .book-peek:hover .book-peek-card,
  .book-peek:focus-within .book-peek-card {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
}
@media (hover: none), (max-width: 899px) {
  .book-peek-card {
    display: none;
  }
}
/* Wide screens: the lede in the free columns beside the headline, the
   actions and the proof row above the fold */
@media (min-width: 1200px) {
  #hero-title {
    grid-column: 1 / span 9;
    grid-row: 2;
  }
  .hero-lede {
    grid-column: 10 / -1;
    grid-row: 2;
    align-self: end;
    max-width: none;
    margin: 0 0 0.4em;
    font-size: 1rem;
  }
  .hero-actions {
    grid-column: 1 / span 7;
    grid-row: 3;
  }
  .hero-assurances {
    grid-column: 8 / -1;
    grid-row: 3;
    align-self: end;
    justify-content: flex-end;
    margin: 0 0 14px;
  }
}
@media (max-width: 760px) {
  .availability {
    justify-content: flex-start;
    padding-bottom: 12px;
  }
  #hero-title {
    padding-top: 52px;
  }
  .hero-role {
    top: 18px;
  }
  #hero-title {
    font-size: clamp(2.5rem, 12.2vw, 3.4rem);
    line-height: 0.96;
  }
  .hero-lede {
    grid-column: 1 / -1;
  }
  .proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .proof li:nth-child(3) {
    border-left: 0;
  }
  .proof li:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
  .proof li:nth-child(3) a {
    padding-left: 0;
  }
  .proof a {
    padding-bottom: 18px;
  }
  .proof b {
    font-size: 3.4rem;
  }
  .hero-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
    margin-top: 0;
  }
  .hero-chips li {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }
}
@media (max-width: 680px) {
  .hero {
    padding-top: calc(var(--header-h) + 24px);
  }
  .hero-actions .btn {
    width: 100%;
  }
  .hero-assurances {
    flex-direction: column;
    gap: 6px;
  }
}

/* ==========================================================================
   Meet card: portrait, intro video, tags, commitments
   ========================================================================== */
.meet-card {
  /* No card: a ruled two-column spread under the proof row */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 104px);
  padding: clamp(28px, 3vw, 44px) 0 0;
  border-top: 1px solid var(--rule-strong);
  z-index: 1;
}
.meet-card > * {
  position: relative;
}
.portrait {
  position: relative;
  margin: 0 auto;
  width: min(100%, 400px);
}
.portrait-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 26px;
  background: #e9e9ee;
  box-shadow: var(--neu-raise), 0 0 0 8px var(--surface);
}
.portrait-img,
.portrait-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait-video {
  opacity: 0;
  background: #000;
  transition: opacity 0.4s;
}
.portrait.has-played .portrait-video {
  opacity: 1;
}
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 58% 0 0;
  background: linear-gradient(transparent, rgba(4, 14, 39, 0.55));
  pointer-events: none;
  transition: opacity 0.4s;
}
.portrait.is-playing .portrait-frame::after {
  opacity: 0;
}
.play-btn {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #ffffff;
  text-align: left;
  transition: background-color 0.25s, opacity 0.3s;
  border-color: rgba(255, 255, 255, 0.3);
  /* A dark pane, so the white label keeps at least 7:1 over the bright
     portrait (the light glass gave about 2.2:1) */
  background: rgba(4, 14, 39, 0.76);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.play-btn:hover {
  background: rgba(4, 14, 39, 0.9);
}
.play-disc {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
  animation: none;
  animation-iteration-count: 4;
}
.play-disc .ico {
  width: 20px;
  height: 20px;
}
.play-btn .ico-pause,
.portrait.is-playing .play-btn .ico-play {
  display: none;
}
.portrait.is-playing .play-btn .ico-pause {
  display: block;
}
.play-label {
  display: flex;
  flex-direction: column;
  font: 650 0.95rem/1.2 var(--font-display);
}
.play-label small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.86);
  font: 700 0.62rem/1 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.portrait.is-playing .play-btn {
  left: auto;
  padding: 6px;
  opacity: 0.75;
}
.portrait.is-playing .play-btn:hover,
.portrait.is-playing .play-btn:focus-visible {
  opacity: 1;
}
.portrait.is-playing .play-label {
  display: none;
}
.portrait.is-playing .play-disc {
  animation: none;
}
.tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 14px;
  color: var(--ink-2);
  font: 500 0.82rem/1.2 var(--font-body);
  white-space: nowrap;
  animation: float 7s ease-in-out infinite;
  animation-iteration-count: 3;
}
.tag b {
  color: var(--ink);
  font: 800 0.95rem/1 var(--font-display);
}
.tag .ico {
  color: var(--accent);
}
.tag-b {
  top: 44%;
  left: -28px;
  animation-delay: -2.5s;
}
.tag-c {
  bottom: 108px;
  left: -48px;
  animation-delay: -4.5s;
}
.meet-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  margin-bottom: 22px;
  letter-spacing: -0.025em;
}
.lead {
  color: var(--ink);
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  line-height: 1.6;
}
.commitments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 26px 0 28px;
}
.commitments li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-3);
}
.commitments li strong {
  display: block;
  margin-bottom: 2px;
  font: 700 0.95rem/1.25 var(--font-display);
}
.meet-wrap {
  position: relative;
}
@media (max-width: 1099px) {
  .commitments {
    grid-template-columns: 1fr;
  }
  .commitments li {
    padding: 12px 0;
  }
  .tag-c {
    left: -18px;
  }
  .tag-b {
    left: -18px;
    right: auto;
  }
}
@media (max-width: 899px) {
  .portrait {
    width: min(100%, 380px);
  }
}
@media (max-width: 680px) {
  .meet-card {
    padding-top: 28px;
  }
  .portrait {
    width: min(100% - 24px, 340px);
  }
  .tag {
    font-size: 0.74rem;
    padding: 7px 10px;
  }
  .tag b {
    font-size: 0.85rem;
  }
  .tag-c {
    left: -14px;
  }
  .tag-b {
    right: auto;
  }
  .tag-b {
    left: -14px;
  }
}

/* ==========================================================================
   Case studies
   ========================================================================== */
.cases {
  display: grid;
}
/* No cards: each case is a ruled spread on the 12-column grid, the number
   is its headline */
.case {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--rule-strong);
}
.case-side {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: 1 / span 5;
}
.case-meta {
  display: flex;
  flex-wrap: wrap;
  order: -2;
  gap: 18px;
  margin-bottom: 18px;
}
.case-meta span {
  color: var(--ink-3);
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.case-meta span:first-child {
  color: var(--accent-text);
}
/* Small pills and tags */
.reviews-filter,
.tag {
  border: 1px solid var(--glass-rim);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ==========================================================================
   Hero (with the book card in the lede)
   ========================================================================== */
/* Flat round controls with a hairline */
.icon-btn,
.back-to-top,
.faq summary .ico,
.reviews-filter .chip.is-active {
  border: 0;
  background: var(--surface);
  box-shadow: var(--neu-raise-xs);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==========================================================================
   Case studies
   ========================================================================== */
.case-title {
  order: 1;
  color: var(--ink-3);
  font: 500 0.98rem/1.4 var(--font-body);
  letter-spacing: 0;
}
/* The number lands: thin, very large, the unit in the accent */
.case-hero-num {
  order: -1;
  margin: 0 0 8px -0.04em;
  color: var(--ink);
  font: 200 clamp(7rem, 15vw, 15rem)/0.82 var(--font-display);
  letter-spacing: -0.075em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform-origin: 0 100%;
}
.case-hero-num b {
  font-weight: inherit;
}
.case-hero-num span {
  position: relative;
  top: 0.18em;
  margin-left: 0.04em;
  color: var(--accent-text);
  font-size: 0.42em;
  font-weight: 300;
  letter-spacing: 0;
  vertical-align: top;
}
.case-hero-label {
  margin: 14px 0 28px;
  max-width: 30ch;
  color: var(--ink);
  font: 600 1.1rem/1.35 var(--font-display);
  letter-spacing: -0.01em;
}
.compare {
  order: 3;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.compare-title {
  margin-bottom: 14px;
  color: var(--ink-3);
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.02em;
}
.bar {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 66px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bar span {
  order: 1;
  color: var(--ink-3);
  font: 500 0.72rem/1 var(--mono);
}
/* The before/after ruler: 2px */
.bar::after {
  content: "";
  order: 2;
  height: 2px;
  background: linear-gradient(var(--fill), var(--fill)) 0 0 / 0% 100% no-repeat, var(--line);
  transition: background-size 1.3s var(--ease) 0.25s;
}
.bar b {
  order: 3;
  color: var(--ink);
  font: 600 0.92rem/1 var(--font-display);
  text-align: right;
  white-space: nowrap;
}
.bar-after {
  --fill: var(--accent);
}
.bar-after b {
  color: var(--accent-text);
}
/* Bar lengths as classes, not style="" attributes (the CSP has no 'unsafe-inline') */
.bar-before {
  --w: 100%;
  --fill: color-mix(in srgb, var(--ink) 22%, transparent);
}
.bar-w-12 {
  --w: 12.5%;
}
.bar-w-6 {
  --w: 6.25%;
}
.bar-w-31 {
  --w: 31%;
}
.case.is-visible .bar::after,
.no-js .bar::after {
  background-size: var(--w) 100%, auto;
}
.case-body {
  display: grid;
  grid-column: 7 / -1;
  align-content: start;
}
.case-block + .case-block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.case-block h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--ink-3);
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0.02em;
}
.case-block h4 .dot {
  display: none;
}
.case-block > p {
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.55;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot-red {
  background: var(--red);
}
.dot-blue {
  background: var(--blue);
}
.dot-green {
  background: var(--green);
}
.case-block p {
  margin: 0;
}
.case-block ul:not(.checks) li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}
.case-block ul:not(.checks) li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}
.case-results .checks li {
  margin-bottom: 8px;
}
.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule-strong);
}
.inline-cta p {
  margin: 0;
  max-width: 640px;
}
.case-meta span:first-child,
.engage-flag,
.review-avatar,
.step-node,
.help-icon,
.agenda li::before {
  position: relative;
}
@media (max-width: 899px) {
  .case-side,
  .case-body {
    grid-column: 1 / -1;
  }
  .case-body {
    margin-top: 28px;
  }
  .case-hero-num {
    font-size: clamp(6.5rem, 30vw, 10rem);
  }
}
@media (max-width: 680px) {
  .bar {
    grid-template-columns: 46px minmax(0, 1fr) 60px;
    gap: 10px;
  }
  .inline-cta .btn,
  .pricing-foot .btn,
  .spec-actions .btn,
  .cf-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Help
   ========================================================================== */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  grid-auto-rows: 1fr;
}
.help-card {
  padding: 30px 28px 28px;
  border-radius: var(--radius);
}
.help-card:hover {
  transform: translateY(-4px);
}
.help-icon {
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  width: 56px;
  height: 56px;
}
.help-card h3 {
  font-size: 1.18rem;
  margin-bottom: 10px;
}
.help-card p {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.97rem;
}
.help-icon {
  overflow: hidden;
}
.help-icon::after,
.step-node::after,
.review-avatar::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 1px;
  height: 50%;
  border-radius: 999px 999px 50% 50%;
  background: var(--sheen);
  opacity: 0.8;
  pointer-events: none;
}
.help-card,
.engage,
.review,
.pricing,
.spec,
.contact-form-card,
.step ul,
.book:not(.book-featured) {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ==========================================================================
   Services
   ========================================================================== */
.engage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 899px) {
  .help-grid,
  .engage-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.engage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 30px 26px;
  border-radius: var(--radius);
}
.engage:hover {
  transform: translateY(-4px);
}
.engage-featured {
  border: 1.5px solid transparent;
  box-shadow: var(--glass-shadow-lg);
}
.engage-flag {
  top: -13px;
  left: 28px;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  font: 700 0.66rem/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.engage-num {
  margin: 0 0 18px;
  color: var(--accent-text);
  font: 500 0.8rem/1 var(--mono);
}
.engage h3 {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.engage-when {
  color: var(--ink-3);
  font-size: 0.98rem;
  margin-bottom: 22px;
}
.engage .checks {
  font-size: 0.96rem;
  margin-bottom: 22px;
}
.engage-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.engage-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--ink);
  font: 650 0.9rem/1.3 var(--font-display);
}
.engage-meta .ico {
  color: var(--accent);
}
.engage-foot .link-arrow {
  font-size: 0.88rem;
}
.engage-flag {
  position: absolute;
  z-index: 2;
}
@media (max-width: 899px) {
  .engage-grid .engage:last-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Process
   ========================================================================== */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  height: 1px;
  top: 24px;
  background: var(--rule-strong);
}
.step-node {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 50%;
  font: 800 1.05rem/1 var(--font-display);
}
.step-when {
  margin: 0 0 8px;
  color: var(--accent-text);
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.step h3 {
  font-size: 1.32rem;
  margin-bottom: 14px;
}
.step ul {
  padding: 20px 20px 12px;
  border-radius: var(--radius);
  font-size: 0.94rem;
}
.step ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}
.step ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}
@media (max-width: 899px) {
  .timeline {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
  .timeline::before {
    display: none;
  }
}
@media (max-width: 680px) {
  .step {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 18px;
    position: relative;
  }
  .step > :not(.step-node) {
    grid-column: 2;
  }
  .step-node {
    grid-row: 1 / span 3;
    margin: 0;
  }
  .step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 56px;
    bottom: -30px;
    width: 2px;
    background: var(--accent);
    opacity: 0.25;
  }
}

/* ==========================================================================
   Products
   ========================================================================== */
/* The products are the keynote of the page: on the same engraved surface
   as the other soft sections (no tinted wash), each product a large
   screenshot beside its copy, alternating sides, the screenshots the only
   lifted objects on the page. They tilt flat as they enter. */
.products-section .section-head h2 {
  font-size: clamp(2.5rem, 5.6vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}
.products {
  display: grid;
  gap: clamp(64px, 8vw, 128px);
}
.product {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
}
.product:nth-child(2) {
  --pa-fill: #1fae96;
  --pa-ink: var(--navy);
}
.product:nth-child(3) {
  --pa-fill: #2563eb;
  --pa-ink: #ffffff;
}
.product-preview {
  position: relative;
  display: block;
  grid-column: 1 / span 7;
  grid-row: 1;
  border-radius: 16px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent), 0 50px 100px -40px rgba(4, 14, 39, 0.5),
    0 18px 36px -24px rgba(4, 14, 39, 0.35);
  transform-origin: 50% 100%;
}
.product-body {
  display: flex;
  flex-direction: column;
  grid-column: 9 / -1;
  grid-row: 1;
}
.product:nth-child(even) .product-preview {
  grid-column: 6 / -1;
}
.product:nth-child(even) .product-body {
  grid-column: 1 / span 4;
}
.product-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--ink-3);
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product h3 {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 14px;
}
.product-tagline {
  color: var(--ink);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.45;
}
.product-for {
  color: var(--ink-3);
  font-size: 0.95rem;
}
.product .checks {
  margin: 4px 0 20px;
}
.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.product-note {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.82rem;
  line-height: 1.4;
}
@media (max-width: 899px) {
  .product-preview,
  .product-body,
  .product:nth-child(even) .product-preview,
  .product:nth-child(even) .product-body {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .product-body {
    margin-top: 32px;
  }
}
@media (max-width: 680px) {
  .help-grid,
  .engage-grid,
  .timeline {
    grid-template-columns: 1fr;
  }
  .product-preview {
    border-radius: 12px;
  }
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.review-featured {
  position: relative;
  margin: 0 0 40px;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 6vw, 72px);
  border-radius: var(--radius);
}
.review-featured-quote {
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  color: var(--accent);
}
.review-featured blockquote {
  margin: 0;
}
.review-featured blockquote p {
  max-width: 980px;
  color: var(--ink);
  font: 650 clamp(1.3rem, 2.4vw, 1.85rem)/1.42 var(--font-display);
  letter-spacing: -0.02em;
}
.review-featured figcaption,
.review figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.review-featured figcaption > span:last-child,
.review figcaption > span:last-child {
  display: flex;
  flex-direction: column;
  color: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.4;
}
.review-featured figcaption strong,
.review figcaption strong {
  font-family: var(--font-display);
  font-size: 0.97rem;
}
.review-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  font: 800 0.78rem/1 var(--font-display);
  font-size: 0.74rem;
}
.reviews-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.reviews-filter {
  display: inline-flex;
  gap: 4px;
  border-radius: 999px;
  position: relative;
  padding: 4px;
}
.reviews-counter {
  margin: 0;
  color: var(--ink-3);
  font: 600 0.82rem/1.2 var(--font-display);
}
.review {
  padding: 26px 26px 22px;
  break-inside: avoid;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
}
.review blockquote {
  margin: 0;
}
.review blockquote p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.65;
}
.review figcaption {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review .review-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.7rem;
}
.reviews-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 20px;
}
.reviews-toggle-icon {
  transition: transform 0.3s var(--ease);
}
[aria-expanded="true"] .reviews-toggle-icon {
  transform: rotate(180deg);
}
@media (max-width: 680px) {
  .reviews-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 28px;
}
.price-rows {
  margin: 0;
  display: grid;
  gap: 12px;
  grid-auto-rows: 1fr;
}
.price-row {
  display: grid;
  gap: 8px 24px;
  grid-template-columns: 56px minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  padding: 14px 20px 14px 14px;
  border-radius: 22px;
}
.price-row dt {
  color: var(--ink);
  font: 750 1.06rem/1.35 var(--font-display);
}
.price-row dd {
  margin: 0;
  color: var(--ink-3);
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.price-model {
  display: inline-block;
  margin-right: 10px;
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.price-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  padding-top: 24px;
  font-size: 0.95rem;
}
.price-notes p {
  margin: 0;
}
.pricing-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.pricing-foot p {
  margin: 0;
  max-width: 420px;
  color: var(--ink-3);
  font-size: 0.95rem;
}
/* Pricing rows */
.price-row:first-child {
  padding-top: 14px;
}
.price-badge {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  font: 800 0.95rem/1 var(--font-display);
  width: 50px;
  height: 50px;
}
.price-badge::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 2px;
  height: 48%;
  border-radius: 999px 999px 50% 50%;
  background: var(--sheen);
}
@media (max-width: 899px) {
  .price-notes {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .price-row {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 14px;
  }
  .price-badge {
    grid-row: span 2;
  }
  .price-row dd {
    padding-left: 0;
    border-left: 0;
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.faq-layout .section-head {
  display: block;
  position: sticky;
  top: calc(var(--header-h) + 32px);
  margin-bottom: 0;
}
.faq-layout .section-head .kicker {
  margin-bottom: 32px;
}
.faq-layout .section-head .section-sub {
  margin-top: 22px;
}
.faq-layout .section-head .btn {
  margin-top: 28px;
}
.faq-list {
  border-top: 1px solid var(--line-strong);
}
.faq {
  border-bottom: 1px solid var(--line-strong);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  color: var(--ink);
  font: 700 clamp(1.08rem, 1.6vw, 1.25rem)/1.35 var(--font-display);
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .ico {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  transition: transform 0.35s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.faq summary:hover .ico {
  border-color: var(--ink);
}
.faq[open] summary .ico {
  transform: rotate(45deg);
  border-color: transparent;
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--neu-press-sm);
}
.faq-body {
  padding: 0 56px 24px 0;
}
.faq-body p:last-child {
  margin-bottom: 0;
}
.faq-body ul {
  margin-bottom: 1em;
}
.faq-body li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}
.faq-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.faq[open] .faq-body {
  animation: faqIn 0.4s var(--ease);
}
@media (max-width: 899px) {
  .faq-layout .section-head {
    position: static;
  }
}
@media (max-width: 680px) {
  .faq-body {
    padding-right: 0;
  }
}

/* ==========================================================================
   Recruiter spec sheet
   ========================================================================== */
.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(28px, 5vw, 60px);
  border-radius: var(--radius);
}
.spec h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.spec .section-sub {
  margin-left: 0;
}
@media (max-width: 680px) {
  .section-head-left .section-sub,
  .spec .section-sub {
    margin-inline: auto;
  }
}
.spec-actions {
  flex-wrap: wrap;
  align-items: center;
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 30px;
  /* stacks when the column is too narrow for two */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.spec-sheet {
  margin: 0;
  align-self: center;
  border-top: 1px solid var(--line-strong);
}
.spec-sheet > div {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.spec-sheet dt {
  color: var(--accent-text);
  font: 500 0.74rem/1.9 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.spec-sheet dd {
  margin: 0;
  color: var(--ink);
  font: 650 1rem/1.45 var(--font-display);
}
.spec-sheet dd a {
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1.5px no-repeat;
}
@media (max-width: 680px) {
  .spec-sheet > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ==========================================================================
   Books
   ========================================================================== */
.books {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px;
  grid-template-rows: 1fr 1fr;
}
.book {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding: 26px;
  border-radius: var(--radius);
  background: var(--card-soft);
}
.book-featured {
  grid-row: span 2;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  background: var(--feature-bg);
  color: var(--feature-ink-2);
}
.book-featured h3,
.book-featured strong {
  color: var(--feature-ink);
}
.book-cover {
  perspective: 900px;
}
.book-cover img {
  width: 100%;
  border-radius: 4px 8px 8px 4px;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.55);
  transform: rotateY(-14deg);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease);
}
.book:hover .book-cover img {
  transform: none;
}
.book-featured .book-cover img {
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.8);
}
.book-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--ink-3);
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.book-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}
.book-status.is-live {
  color: var(--gold);
}
.book-status.is-live::before {
  background: var(--green);
  border-color: var(--green);
}
.book h3 {
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}
.book-featured h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
}
.book-sub {
  color: var(--ink);
  font: 650 0.95rem/1.4 var(--font-display);
}
.book-featured .book-sub {
  color: var(--gold);
}
.book p:not(.book-status):not(.book-sub) {
  color: var(--ink-3);
  font-size: 0.94rem;
}
.book-featured p:not(.book-status):not(.book-sub) {
  color: var(--feature-ink-2);
  font-size: 1rem;
}
.book-featured .btn-primary {
  margin-top: 8px;
  text-shadow: none;
}
.book-body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 899px) {
  .books {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .book-featured {
    grid-row: auto;
  }
}
@media (max-width: 680px) {
  .book {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    padding: 22px;
  }
  .book-featured {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .book-featured .book-cover {
    max-width: 220px;
    width: min(220px, 70%);
  }
}

/* ==========================================================================
   Final call to action and contact form
   ========================================================================== */
/* The closing panel: the whole section is one full-width brand panel
   (brand blue in light, running on into the blue footer; navy and gold in
   dark). Where scroll-driven animation exists it opens out of a rounded
   inset as it enters. */
.final-cta {
  padding-block: 0;
}
.final-cta > .wrap {
  max-width: none;
  padding: clamp(88px, 11vw, 168px) max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)))
    clamp(48px, 5vw, 80px);
  background: var(--panel-bg);
  color: var(--panel-ink-2);
}
.final-cta .section-head {
  border-top-color: var(--panel-line);
}
.final-cta .kicker,
.final-cta .kicker-num {
  color: var(--panel-ink);
}
[data-theme="dark"] .final-cta .kicker-num {
  color: var(--gold);
}
.final-cta .section-head h2 {
  color: var(--panel-ink);
  font-size: clamp(3.2rem, 9vw, 9.5rem);
  font-weight: 250;
  line-height: 0.88;
  letter-spacing: -0.06em;
}
.final-cta .section-head h2 .gold {
  display: block;
  color: var(--panel-accent);
  font-weight: 800;
  letter-spacing: -0.065em;
}
.final-cta .section-sub {
  color: var(--panel-ink-2);
  font-size: 1.1rem;
}
.cta-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: stretch; /* both cards the same height */
}
@media (max-width: 899px) {
  .meet-card,
  .faq-layout,
  .spec,
  .cta-layout {
    grid-template-columns: 1fr;
  }
}
.cta-call {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--panel-line);
  border-radius: 20px;
  background: var(--panel-pane);
  color: var(--panel-ink-2);
}
.cta-call h3,
.cta-call h4,
.cta-call strong {
  color: var(--panel-ink);
}
@media (max-width: 1099px) {
  .nav-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    box-shadow: var(--neu-raise-xs);
  }
  .nav-contact > a {
    color: var(--ink-2);
    font: 600 0.92rem/1.2 var(--font-display);
  }
}
.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--feature-ink-2);
  font: 700 0.7rem/1.2 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cta-call .cta-eyebrow {
  color: var(--panel-ink-2);
}
.cta-call h3 {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.agenda {
  counter-reset: a;
  margin-bottom: 28px;
}
.agenda li {
  position: relative;
  counter-increment: a;
  padding: 0 0 16px 44px;
  padding-left: 42px;
}
.agenda li::before {
  content: counter(a);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 800 0.78rem/1 var(--font-display);
  left: 0;
  width: 28px;
  height: 28px;
  top: -1px;
}
.agenda li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 2px;
  width: 1px;
  background: var(--panel-line);
  left: 13.5px; /* the line runs through the centre of the numbers */
}
.cta-call .btn-primary,
.cta-call .btn-primary:hover {
  background: var(--panel-btn-bg);
  color: var(--panel-btn-ink);
  box-shadow: none;
}
.cta-call .btn-primary:hover {
  filter: brightness(0.94);
}
.fit {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--panel-line);
}
.fit h4 {
  margin-bottom: 14px;
  font-size: 1rem;
}
.fit .checks li {
  color: var(--panel-ink-2);
}
.cta-call .checks li::before {
  background-color: rgba(255, 255, 255, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.contact-form-card {
  padding: clamp(26px, 4vw, 44px);
  border-radius: 20px;
  --surface: var(--bg-alt);
  display: flex;
  flex-direction: column;
}
.contact-form-card h3 {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.contact-form-intro > p:last-child {
  color: var(--ink-3);
  margin-bottom: 24px;
}
.cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.cf-field {
  margin-bottom: 14px;
}
.cf-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font: 650 0.86rem/1.2 var(--font-display);
}
.cf-optional {
  color: var(--ink-3);
  font-weight: 500;
}
.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--field);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 16px;
}
.cf-field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.cf-field textarea {
  min-height: 132px;
  resize: vertical;
}
.cf-field input:hover,
.cf-field select:hover,
.cf-field textarea:hover {
  border-color: var(--ink-3);
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none;
}
.cf-error {
  margin: 6px 0 0;
  color: var(--error);
  font-size: 0.84rem;
  line-height: 1.35;
}
.cf-error:empty {
  display: none;
}
.cf-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cf-count {
  margin-left: auto;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.cf-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 8px;
}
.cf-actions .btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}
.cf-note {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.86rem;
}
.cf-note a {
  /* 24px tap target (WCAG 2.5.8); the negative margin keeps the line height */
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
  color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 100% 1px no-repeat;
}
.cf-alert {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--error) 7%, transparent);
  color: var(--ink);
  font-size: 0.92rem;
}
.cf-alert p {
  margin: 0 0 6px;
}
.cf-alert-link {
  color: var(--ink);
  font-weight: 650;
  text-decoration: underline;
}
.cf-success {
  padding: 24px 0 8px;
  text-align: center;
}
.cf-success:focus {
  outline: none;
}
.cf-success-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}
.cf-success-icon .ico {
  width: 26px;
  height: 26px;
  stroke-width: 2.4;
}
.cf-success p {
  color: var(--ink-3);
}
.cta-call .btn-primary {
  text-shadow: none;
}
/* clip, not hidden: a hidden overflow makes the section a scroll container,
   and the closing panel's view() timeline would then track the section
   (which never scrolls) instead of the page, so it never animated */
.final-cta,
.products-section {
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
@media (max-width: 680px) {
  .cf-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 8vw, 96px);
  background: var(--footer-bg);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.95rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.footer-brand p {
  max-width: 340px;
  margin: 20px 0 22px;
}
.socials {
  display: flex;
  gap: 10px;
}
.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: #ffffff;
  transition: border-color 0.2s, color 0.2s, transform 0.3s var(--ease);
}
.socials a:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.footer-col h3 {
  margin-bottom: 18px;
  color: #ffffff;
  font: 700 0.72rem/1 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col a {
  /* 24px tap target (WCAG 2.5.8) without moving the list */
  display: inline-block;
  padding-block: 3px;
  margin-block: -3px;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: #ffffff;
}
.footer-bottom {
  position: relative;
  margin-top: clamp(48px, 7vw, 80px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 22px 0 calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
}
.footer-bottom p {
  margin: 0;
}
@media (max-width: 899px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   Floating controls: back to top, mobile call bar
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
  transition: transform 0.3s var(--ease), border-color 0.2s;
}
.back-to-top:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
}
.back-to-top[hidden] {
  display: none;
}
.mobile-cta {
  display: none;
}
@media (max-width: 680px) {
  .mobile-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 90;
    display: block;
    transform: translateY(160%);
    transition: transform 0.45s var(--ease);
  }
  .mobile-cta.is-visible {
    transform: none;
  }
  .mobile-cta .btn {
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
  }
}
.btn-primary,
[data-theme="dark"] .btn-primary {
  background: var(--gel);
  color: var(--gel-text);
  text-shadow: none;
  box-shadow: var(--gel-shadow);
}
.header-cta {
  box-shadow: none;
}

/* ==========================================================================
   Components: buttons, links, chips, checklists, surfaces, reveal, pointer light
   ========================================================================== */
.btn-primary:hover {
  background: var(--gel-hover);
  box-shadow: none;
}
.btn-primary:active {
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.18), inset -2px -2px 5px rgba(255, 255, 255, 0.12);
}
.js .reveal.is-done {
  filter: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s, border-color 0.4s, background-color 0.4s;
}
/* Interactive controls ease out slowly */
.btn,
.icon-btn,
.chip,
.nav-link,
.link-arrow,
.faq summary .ico {
  transition-duration: 0.45s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover {
  transform: translateY(-2px);
}
.cf-field .is-invalid,
[data-theme="dark"] .cf-field .is-invalid {
  border-color: var(--error);
}
.checks li .link-arrow {
  font-size: 0.95rem;
}
@media (max-width: 899px), (hover: none) {
  .js .reveal,
  .js .reveal.is-visible {
    filter: none;
  }
}
@media (max-width: 680px) {
  /* Links are comfortable to tap */
  .link-arrow {
    padding-block: 11px;
    background-position: 0 calc(100% - 9px);
  }
}
@media (max-width: 400px) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
}
/* Header labels never wrap; tighter spacing on medium screens */
.brand-text,
.nav-link,
.header-cta {
  white-space: nowrap;
}
@media (max-width: 400px) {
  .btn-lg {
    padding: 0 20px;
  }
}

/* ==========================================================================
   Hero (with the book card in the lede)
   ========================================================================== */
/* Escape dismisses the book card in the hero */
.book-peek.is-dismissed .book-peek-card {
  opacity: 0;
  visibility: hidden;
}
.hero,
.section-alt:not(.products-section):not(.final-cta) {
  position: relative;
}

/* ==========================================================================
   Floating controls: back to top, mobile call bar
   ========================================================================== */
@media (max-width: 680px) {
  .back-to-top {
    bottom: calc(84px + env(safe-area-inset-bottom));
    right: 14px;
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   Theme-specific rules that are not tokens
   ========================================================================== */
[data-theme="dark"] .theme-toggle .ico-sun {
  display: block;
}
[data-theme="dark"] .portrait-frame {
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .dot-blue {
  background: var(--gold);
}
[data-theme="dark"] .help-card {
  border-color: var(--line);
}
[data-theme="dark"] .step ul {
  border: 1px solid var(--line);
}
[data-theme="dark"] .reviews-filter {
  border: 1px solid var(--line);
}
[data-theme="dark"] .review {
  border: 1px solid var(--line);
}
[data-theme="dark"] .spec {
  border: 1px solid var(--line);
}
[data-theme="dark"] .book {
  border: 1px solid var(--line);
}
[data-theme="dark"] .book-featured {
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}
/* Raised surfaces: flat, set off by a hairline */
.help-card,
.engage,
.review,
.review-featured,
.step ul,
.price-row,
.spec,
.contact-form-card,
.book:not(.book-featured) {
  border: 1px solid transparent;
  background: var(--surface);
  box-shadow: var(--neu-raise);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==========================================================================
   Meet card: portrait, intro video, tags, commitments
   ========================================================================== */
.price-row,
.step ul {
  box-shadow: var(--neu-raise-sm);
}

/* ==========================================================================
   Case studies
   ========================================================================== */
/* ---- Case study duration on its own line ---- */
.case-when {
  display: flex;
  order: 2;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--ink-3);
  font: 600 0.82rem/1.3 var(--font-display);
}
.case-when .ico {
  width: 15px;
  height: 15px;
  color: var(--accent-text);
}
/* "What I did" is collapsible on phones only */
.case-did > summary {
  list-style: none;
  cursor: default;
}
.case-did > summary::-webkit-details-marker {
  display: none;
}
.case-did > summary h4 {
  margin-bottom: 12px;
}
.case-did-ico {
  display: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: transform 0.3s var(--ease);
}
.case-did[open] .case-did-ico {
  transform: rotate(45deg);
}
:is(.price-row, .step ul) {
  box-shadow: var(--neu-raise-sm), var(--rim);
}
@media (max-width: 680px) {
  .inline-cta,
  .pricing-foot {
    flex-direction: column;
    justify-content: center;
  }
  .case-did > summary {
    padding-block: 3px;
    cursor: pointer;
  }
  .case-did > summary h4 {
    margin-bottom: 0;
  }
  .case-did[open] > summary h4 {
    margin-bottom: 12px;
  }
  .case-did-ico {
    display: block;
  }
}

/* ==========================================================================
   Help
   ========================================================================== */
.help-card:hover,
.engage:hover,
.review:hover {
  background: var(--surface);
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--rule-strong);
}
/* Icon tiles, numbers and avatars: flat shapes with a hairline, accent glyphs */
.help-icon,
.step-node,
.step:first-child .step-node,
[data-theme="dark"] .step-node,
.review-avatar,
.price-badge {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--neu-raise-sm);
  text-shadow: none;
}
.help-icon::after,
.step-node::after,
.review-avatar::after,
.price-badge::after {
  display: none;
}
.help-icon {
  border-radius: 12px;
}
.help-icon .ico {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

/* ==========================================================================
   Services
   ========================================================================== */
.engage-featured {
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.engage-featured {
  box-shadow: var(--neu-raise), var(--rim), 0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ==========================================================================
   Process
   ========================================================================== */
.step-node,
.step:first-child .step-node,
[data-theme="dark"] .step-node {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--neu-raise-sm);
}
.step:first-child .step-node {
  color: var(--accent-text);
}
@media (min-width: 681px) {
  .step {
    display: flex;
    flex-direction: column;
  }
  .step ul {
    flex: 1;
  }
}

/* ==========================================================================
   Products
   ========================================================================== */
/* The screenshot tilts flat as its product enters (the reveal in site.js;
   flat without JS and under reduced motion) */
.js .product.reveal .product-preview {
  transform: perspective(1600px) rotateX(14deg) translateY(36px) scale(0.95);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.js .product.reveal.is-visible .product-preview {
  transform: none;
}
/* Reveal without blur: opacity and a short rise only (blur made the
   browser re-render every card and delayed the first paint). */
.js .reveal {
  filter: none;
  transform: translateY(16px);
}
.product:nth-child(1) {
  --pa-fill: #f5a623;
  --pa-ink: var(--navy);
}
.product-cta {
  flex: none;
  --h: 42px;
  gap: 10px;
  padding: 0 8px 0 18px;
  transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--pa-fill);
  transform: translateX(-102%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-arrow {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--pa-fill);
  color: var(--pa-ink);
  transition: background-color 0.45s, color 0.45s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-arrow .ico {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-arrow .ico + .ico {
  position: absolute;
  transform: translate(-150%, 150%);
}
/* Hovering the card invites the click: a soft ring breathes around the button */
.product:hover .product-cta {
  box-shadow: var(--neu-raise-xs), 0 0 0 4px color-mix(in srgb, var(--pa-fill) 22%, transparent);
  animation: ctaBreathe 2.2s ease-in-out infinite;
}
/* Hovering the button: colour sweeps in, the arrow flies out and a new one lands */
.product-cta:hover,
.product-cta:focus-visible {
  color: var(--pa-ink);
  animation: none;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--pa-fill) 75%, transparent);
}
.product-cta:hover::after,
.product-cta:focus-visible::after {
  transform: none;
}
.product-cta:hover .cta-arrow,
.product-cta:focus-visible .cta-arrow {
  background: color-mix(in srgb, var(--pa-ink) 16%, transparent);
  color: var(--pa-ink);
  transform: rotate(0deg) scale(1.06);
}
.product-cta:hover .cta-arrow .ico:first-child,
.product-cta:focus-visible .cta-arrow .ico:first-child {
  transform: translate(150%, -150%);
}
.product-cta:hover .cta-arrow .ico + .ico,
.product-cta:focus-visible .cta-arrow .ico + .ico {
  transform: none;
}
.product-cta:active {
  transform: scale(0.97);
}
/* Home: the products show the real product */
.product-shot {
  padding: 0;
  overflow: hidden;
  background: #0b0f1a;
}
.product-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product:hover .product-shot img {
  transform: scale(1.03);
}
.product-body h3 a {
  color: inherit;
}
.product-body h3 a:hover {
  color: var(--accent-text);
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.review-featured,
[data-theme="dark"] .review-featured {
  border: 1px solid transparent;
  background: var(--surface);
}
.reviews-filter {
  border: 0;
  background: var(--surface);
  box-shadow: var(--neu-press-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.engage-flag {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--neu-raise-xs);
}
.reviews-filter .chip.is-active,
[data-theme="dark"] .reviews-filter .chip.is-active {
  text-shadow: none;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--neu-raise-xs);
}
/* Review cards of equal height */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  columns: auto;
}
.review blockquote {
  margin-bottom: 18px;
}
.review figcaption {
  margin-top: auto;
}
.reviews-section .extra-review {
  display: none;
}
.reviews-section.is-expanded .extra-review {
  display: flex;
}
/* The source filter hides the other category (after the expanded state: same specificity) */
.reviews-section.is-filtered-manager [data-category="peer"],
.reviews-section.is-filtered-peer [data-category="manager"] {
  display: none;
}
/* ---- Two featured reviews side by side ---- */
.featured-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.featured-pair .review-featured {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(28px, 4vw, 44px);
}
.featured-pair .review-featured blockquote p {
  font-size: clamp(1.1rem, 1.7vw, 1.38rem);
}
.featured-pair .review-featured figcaption {
  margin-top: auto;
  padding-top: 24px;
}
.featured-pair .review-featured-quote {
  width: 38px;
  height: 38px;
}
.reviews-section.is-filtered-peer .featured-pair {
  display: none;
}
/* Reveals do not blur on phones and touch screens */
@media (max-width: 899px) {
  .featured-pair {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .reviews-actions {
    flex-direction: column;
  }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing,
[data-theme="dark"] .pricing {
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
/* Price rows are ruled lines of a spec table (three classes: the frosted
   card list is (0,2,0) through .book:not()) */
.pricing .price-rows {
  gap: 0;
  border-bottom: 1px solid var(--rule-strong);
}
.pricing .price-rows .price-row {
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
@media (max-width: 680px) {
  .pricing-foot p {
    margin-inline: auto;
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
@media (max-width: 680px) {
  .faq-layout .section-head .btn,
  .reviews-actions .btn,
  .book-featured .btn,
  .cf-again {
    width: 100%;
  }
}

/* ==========================================================================
   Recruiter spec sheet
   ========================================================================== */
/* Recruiter actions: the main action spans the row, two equal secondary
   actions below, anchored to the bottom of the card */
.spec-head {
  display: flex;
  flex-direction: column;
}
.spec-actions .btn {
  width: 100%;
  min-width: 0;
}
.spec-actions .btn-primary {
  grid-column: 1 / -1;
}
@media (max-width: 680px) {
  .spec-head {
    align-items: center;
  }
  .spec-actions {
    align-self: stretch;
    width: 100%;
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Books
   ========================================================================== */
@media (max-width: 680px) {
  .book-featured .book-status {
    justify-content: center;
  }
}

/* ==========================================================================
   Final call to action and contact form
   ========================================================================== */
/* Pressed wells */
.cf-field input,
.cf-field select,
.cf-field textarea,
[data-theme="dark"] .cf-field input,
[data-theme="dark"] .cf-field select,
[data-theme="dark"] .cf-field textarea {
  border: 1px solid transparent;
  background-color: var(--surface);
  box-shadow: var(--neu-press-sm);
}
.book-featured .btn-primary {
  background: #ffffff;
  color: var(--navy);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}
.agenda li::before {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: none;
}
/* The form sits on the panel as the page's own surface */
/* (three classes: the frosted-card list is (0,2,0) through .book:not()) */
.final-cta .cta-layout .contact-form-card {
  border: 0;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
@media (min-width: 681px) and (max-width: 899px) {
  .footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  /* Footer: centred */
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-brand .brand {
    margin-right: 0;
  }
  .footer-brand p {
    margin-inline: auto;
  }
  .socials {
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   Floating controls: back to top, mobile call bar
   ========================================================================== */
.back-to-top {
  background: var(--bg);
  box-shadow: var(--neu-raise-sm);
}
@media (max-width: 680px) {
  /* The sticky "Book a call" bar is the floating control on phones */
  .back-to-top {
    display: none;
  }
}

/* ==========================================================================
   Theme-specific rules that are not tokens
   ========================================================================== */
[data-theme="dark"] .contact-form-card {
  border: 1px solid var(--line);
}
[data-theme="dark"] .theme-toggle::after {
  transform: translateX(26px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(140, 95, 0, 0.35), 0 2px 10px rgba(250, 200, 0, 0.4);
}
.site-header .theme-toggle::after {
  box-shadow: 0 0 0 1px var(--rule);
}
[data-theme="dark"] .theme-toggle:active::after {
  transform: translateX(20px);
}
[data-theme="dark"] .spot::after {
  mix-blend-mode: normal;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(250, 200, 0, 0.08), transparent 50%);
}
/* Tags stay legible over the bright portrait in dark mode */
[data-theme="dark"] .tag {
  background: linear-gradient(180deg, rgba(30, 36, 50, 0.9), rgba(18, 22, 32, 0.86));
  border-color: rgba(255, 255, 255, 0.14);
  color: #c9ccd4;
}
[data-theme="dark"] :is(.help-card, .engage, .review, .review-featured, .step ul, .price-row, .spec,
    .contact-form-card, .book:not(.book-featured)) {
  border-color: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] :is(.help-card, .engage, .review):hover {
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .engage-featured {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
:is(.help-card, .engage, .review, .review-featured, .step ul, .price-row, .spec, .contact-form-card,
    .book:not(.book-featured)) {
  background: color-mix(in srgb, var(--surface) var(--frost), transparent);
  box-shadow: var(--neu-raise), var(--rim);
}
/* Live blur only on the single large cards. Repeated cards (reviews, help,
   services, steps, prices) are not blurred: smoother on phones. Book cards
   are not either: Mobile Safari can drop a 3D-rotated image that sits in a
   frosted card. */
.spec,
.contact-form-card {
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* ==========================================================================
   Books
   ========================================================================== */
/* Book covers: flat (no 3D) on touch screens and small widths */
.book-cover picture,
.book-peek-card picture {
  display: contents;
}
@media (hover: none), (max-width: 899px) {
  .book-cover {
    perspective: none;
  }
  .book-cover img,
  .book:hover .book-cover img {
    transform: none;
  }
}

/* ==========================================================================
   Final call to action and contact form
   ========================================================================== */
/* Form fields: a visible boundary (3:1) and a clear focus state */
.cf-field input,
.cf-field select,
.cf-field textarea {
  border: 1px solid #80838a;
}
.cf-field ::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
/* Contact form fills the card height next to the call card */
.contact-form-card .contact-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.contact-form-card .cf-field:has(textarea) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.contact-form-card .cf-field:has(textarea) textarea {
  flex: 1 1 auto;
}
.agenda li::before {
  position: absolute;
}
/* Optional timeline/budget block of the contact form */
.cf-optional-wrap {
  margin-bottom: 14px;
}
.cf-optional-wrap > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 600;
}
.cf-optional-wrap > summary::-webkit-details-marker {
  display: none;
}
.cf-optional-wrap > summary .ico {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 0.3s var(--ease);
}
.cf-optional-wrap[open] > summary .ico {
  transform: rotate(45deg);
}
.cf-optional-wrap[open] > summary {
  margin-bottom: 12px;
}
@media (min-width: 900px) and (max-width: 1099px) {
  .cf-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-legal > a,
.footer-legal > .footer-link-btn {
  /* 24px tap target (WCAG 2.5.8) */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.footer-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link-btn:hover,
.footer-legal a:hover {
  color: var(--accent-text);
}
@media (min-width: 681px) {
  .footer-bottom {
    padding-right: 80px;
  }
}

/* ==========================================================================
   Cookie banner and legal links
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  /* Closed = invisible AND out of the tab order / accessibility tree:
     visibility flips to hidden only after the fade-out has finished. */
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s 0.35s;
  pointer-events: none;
}
.cookie-banner.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: auto;
}
/* Focus lands on the banner itself after "Cookie settings" from the keyboard;
   the id beats the "[id][tabindex="-1"]:focus { outline: none }" reset. */
#cookie-banner:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.cookie-text {
  flex: 1 1 320px;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.5;
}
.cookie-text a {
  color: var(--accent-text);
  text-decoration: underline;
}
.cookie-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 680px) {
  .cookie-banner {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .cookie-actions {
    width: 100%;
  }
  .cookie-actions .btn {
    flex: 1 1 0;
  }
}

/* ==========================================================================
   Product pages (/products/<slug>/)
   ========================================================================== */
.pp-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px));
}
.pp-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.pp-crumbs a {
  color: var(--ink-2);
}
.pp-crumbs a:hover {
  color: var(--accent-text);
}
.pp-hero h1 {
  margin: 10px 0 14px;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.pp-tagline {
  max-width: 760px;
  margin-bottom: 14px;
}
.pp-lede {
  max-width: 760px;
  margin-bottom: 28px;
  color: var(--ink-2);
  font-size: 1.08rem;
  line-height: 1.65;
}
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}
.pp-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
  margin: 0 0 44px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pp-meta dt {
  margin-bottom: 6px;
  color: var(--accent-text);
  font: 500 0.74rem/1.2 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pp-meta dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.55;
}
.pp-cover {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.pp-cover img,
.pp-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.pp-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-feature {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
}
.pp-feature h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
}
.pp-feature p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.6;
}
.pp-shots {
  display: grid;
  gap: 32px;
}
.pp-shot {
  margin: 0;
}
.pp-shot img {
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.pp-shot figcaption {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 0.92rem;
  text-align: center;
}
.pp-shots-tall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.pp-features + .inline-cta {
  margin-top: 40px;
}
.pp-cover-square {
  max-width: 760px;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .pp-features,
  .pp-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .pp-features,
  .pp-meta,
  .pp-shots-tall {
    grid-template-columns: minmax(0, 1fr);
  }
  .pp-cover,
  .pp-shot img {
    border-radius: 14px;
  }
}

/* ==========================================================================
   Legal page
   ========================================================================== */
/* Legal page */
.legal {
  max-width: 760px;
}
.legal h2 {
  margin: 40px 0 12px;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}
.legal p,
.legal li {
  color: var(--ink-2);
  line-height: 1.7;
}
.legal ul {
  padding-left: 20px;
}
.legal li {
  margin-bottom: 6px;
}
.legal-updated {
  color: var(--ink-3);
  font-size: 0.9rem;
}

/* ==========================================================================
   Carved contours (the relief behind the hero and the alternate sections)
   ========================================================================== */
/* The contour map is cut into the surface like a polished relief: each
   line a smooth channel with a soft shadow under the light and a crisp lip
   on the far side (honed marble in light, polished bronze in dark). One
   static background image per section, no filters, nothing moves. The tile
   (3200x2000, the map mirrored both ways) is sized to the page and each
   section is offset by its distance from the top of the document (site.js
   sets --topo-y on layout changes only), so the field runs on across
   section seams. Products and the final call to action carry it too. */
.hero::before,
.section-alt:not(.products-section):not(.final-cta)::before,
#products::before,
#final-cta::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The relief stays below the content. A veil of the section's own
     colour hides it almost completely behind the section head (eyebrow,
     title, subtitle) and quiets it behind the content column, so it is
     carried only toward the empty edges. On a phone the whole width is
     content, so the whole field is veiled. */
  --relief-veil: color-mix(in srgb, var(--surface) 62%, transparent);
  --relief-calm: color-mix(in srgb, var(--surface) 90%, transparent);
  background:
    radial-gradient(ellipse 600px 300px at 50% 250px, var(--relief-calm) 45%, transparent),
    linear-gradient(90deg, transparent calc(50% - 780px), var(--relief-veil) calc(50% - 500px),
      var(--relief-veil) calc(50% + 500px), transparent calc(50% + 780px)),
    var(--relief-tile, url("../img/topo-light.svg")) center var(--topo-y, 0px) / max(2400px, 160vw) auto repeat;
}
/* First screen: the whole hero column is a calm surface. */
.hero::before {
  --relief-veil: color-mix(in srgb, var(--surface) 88%, transparent);
}
[data-theme="dark"] .hero::before,
[data-theme="dark"] .section-alt:not(.products-section):not(.final-cta)::before,
[data-theme="dark"] #products::before,
[data-theme="dark"] #final-cta::before {
  --relief-tile: url("../img/topo-dark.svg");
}

/* ==========================================================================
   Theme-specific rules that are not tokens
   ========================================================================== */
[data-theme="dark"] .review-featured {
  border-color: rgba(255, 255, 255, 0.04);
}
/* Product screenshots on the dark surface: a lit hairline and a deeper
   shadow keep them apart from the page */
[data-theme="dark"] .product-preview {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 50px 100px -30px rgba(0, 0, 0, 0.85);
}
[data-theme="dark"] .book-featured .btn-primary {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .agenda li::before {
  background: rgba(250, 200, 0, 0.14);
  color: var(--gold);
}
[data-theme="dark"] .final-cta .checks li::before {
  background-color: var(--accent-soft);
  background-image: var(--check);
}
/* Theme switch: tinted track when dark is on */
[data-theme="dark"] .site-header .theme-toggle {
  background: rgba(250, 200, 0, 0.22);
}
/* Header shadow in the dark theme */
[data-theme="dark"] .site-header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px -22px rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] .cf-field input,
[data-theme="dark"] .cf-field select,
[data-theme="dark"] .cf-field textarea {
  border-color: rgba(255, 255, 255, 0.4);
}
/* Light theme: navy surfaces belong to the dark theme. The featured book
   uses a light surface here; the closing panel and the footer are blue. */
html:not([data-theme="dark"]) .cta-eyebrow-ink {
  color: var(--accent-text);
}
html:not([data-theme="dark"]) .book-featured .btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 24px -12px rgba(0, 113, 227, 0.6);
}
html:not([data-theme="dark"]) .book-featured .btn-primary:hover {
  background: var(--accent-hover);
  color: #ffffff;
}
html:not([data-theme="dark"]) .book-featured {
  border: 1px solid var(--line);
}
/* Light theme footer: the brand blue of the closing panel above it. Every
   text is white (6.7:1 on #0656c4); hierarchy comes from size and weight,
   hover from the underline. */
html:not([data-theme="dark"]) .site-footer {
  color: #ffffff;
}
html:not([data-theme="dark"]) .brand-light,
html:not([data-theme="dark"]) .brand-light .brand-role,
html:not([data-theme="dark"]) .brand-light .brand-mark,
html:not([data-theme="dark"]) .footer-col h3,
html:not([data-theme="dark"]) .site-footer a,
html:not([data-theme="dark"]) .footer-link-btn,
html:not([data-theme="dark"]) .footer-bottom p {
  color: #ffffff;
}
html:not([data-theme="dark"]) .brand-light .brand-role {
  opacity: 1;
}
html:not([data-theme="dark"]) .footer-col a:hover,
html:not([data-theme="dark"]) .footer-legal a:hover,
html:not([data-theme="dark"]) .footer-link-btn:hover {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
html:not([data-theme="dark"]) .socials a {
  border-color: rgba(255, 255, 255, 0.55);
}
html:not([data-theme="dark"]) .socials a:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--accent);
}
html:not([data-theme="dark"]) .site-footer :focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
html:not([data-theme="dark"]) .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.35);
}
html:not([data-theme="dark"]) .book-featured .book-status.is-live {
  color: var(--ink-3);
}
html:not([data-theme="dark"]) .book-featured .book-sub {
  color: var(--ink);
}
[data-theme="dark"] .pp-meta dt {
  color: var(--gold);
}
[data-theme="dark"] .pp-feature {
  border: 1px solid var(--line);
}
[data-theme="dark"] .cookie-text a {
  color: var(--gold);
}
[data-theme="dark"] .footer-link-btn:hover,
[data-theme="dark"] .footer-legal a:hover {
  color: var(--gold);
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus,
[data-theme="dark"] .cf-field input:focus,
[data-theme="dark"] .cf-field select:focus,
[data-theme="dark"] .cf-field textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--neu-press-sm), 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft);
}
@media (max-width: 1099px) {
  .nav-open .site-header {
    border-bottom-color: transparent;
    box-shadow: none;
  }
}
@media (max-width: 680px) {
  [data-theme="dark"] .theme-toggle::after {
    transform: translateX(24px);
  }
}

/* ==========================================================================
   Motion: smooth scroll, keyframes, reduced motion, print
   ========================================================================== */
/* Numbers landing, progressive enhancement: where scroll-driven animation
   exists, the case number also grows into place as its case crosses the
   viewport (site.js counts it up meanwhile) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .case-hero-num {
      animation: land linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
    }
  }
}
@keyframes land {
  from {
    opacity: 0.3;
    transform: scale(0.82) translateY(6%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The closing panel opens out of a rounded inset as it enters */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .final-cta > .wrap {
      animation: unclip linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
  }
}
@keyframes unclip {
  from {
    /* never deeper than the panel's side padding (less 4px), so no text is cut */
    clip-path: inset(
      0 min(clamp(12px, 6vw, 96px), max(var(--gutter), (100% - var(--wide)) / 2 + var(--gutter)) - 4px)
        round clamp(24px, 4vw, 48px)
    );
  }
  to {
    clip-path: inset(0 0 round 0);
  }
}
@keyframes jam {
  0% {
    transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  }
  55% {
    transform: translate(calc(var(--x, 0) * 0.4), calc(var(--y, 0) * 0.4)) rotate(calc(var(--r, 0deg) * 0.4));
  }
  100% {
    transform: none;
  }
}
@keyframes release {
  from {
    transform: translateX(-0.35em);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes pulse {
  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}
@keyframes float {
  50% {
    transform: translateY(-7px);
  }
}
@keyframes faqIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
/* Theme change: the new theme spreads in a circle from the switch */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  z-index: 9999;
}
@keyframes ctaBreathe {
  50% {
    box-shadow: var(--neu-raise-xs), 0 0 0 7px color-mix(in srgb, var(--pa-fill) 10%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal {
    opacity: 1;
    transition: none;
  }
  .bar::after {
    background-size: var(--w) 100%, auto;
  }
  .product:hover .product-cta {
    animation: none;
  }
  .js .reveal {
    transform: none;
  }
}
/* Moving decoration stops after a few cycles (WCAG 2.2.2) */
.product:hover .product-cta {
  animation-iteration-count: 3;
}
@media print {
  .site-header,
  .back-to-top,
  .mobile-cta,
  .play-btn,
  .contact-form {
    display: none !important;
  }
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-count].is-counting {
    -webkit-text-fill-color: currentColor !important;
  }
  [data-count].is-counting::after {
    display: none !important;
  }
}