/* Assure by Frty2 — landing page styles. Section 1 is docs/tokens.css, pasted verbatim (no build step). */

/* ==========================================================================
   Assure by frty2 — design tokens  (direction: "white terminal", Carbon / Fluent)
   Flat surfaces, 1 px hairlines, one blue accent, IBM Plex Sans + Plex Mono.
   The code subagent pastes this file at the top of styles.css (no build step).

   Fonts: put these in <head> of index.html (faster than @import):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;600&display=swap">

   Same thing as an @import, only if a <link> is impossible:
   @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;600&display=swap");

   Contrast ratios (WCAG 2.x, measured) are in docs/layout.md §3.2.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Colour: light (default) ---------------------------------------- */
  --color-bg:             #FFFFFF;  /* page ground                          */
  --color-layer:          #F4F4F4;  /* tiles, log panel, table header row   */
  --color-layer-hover:    #E8E8E8;  /* hover on interactive tiles / rows    */
  --color-ink:            #161616;  /* headings, body       18.1:1 on bg    */
  --color-ink-2:          #525252;  /* secondary text        7.8:1 bg / 7.1 layer */
  --color-ink-3:          #6F6F6F;  /* helper, mono labels   5.0:1 bg / 4.6 layer */
  --color-border:         #E0E0E0;  /* hairlines (decorative, 1 px)         */
  --color-border-strong:  #8D8D8D;  /* control edges, needed to see  3.3:1  */

  --color-accent:         #0F62FE;  /* primary fill, links, focus  5.0:1    */
  --color-accent-hover:   #0050E6;  /* 6.4:1 with white text                */
  --color-accent-active:  #002D9C;
  --color-on-accent:      #FFFFFF;  /* text on accent        5.0:1          */
  --color-link:           #0F62FE;  /* 5.0:1 on bg, 4.6:1 on layer          */
  --color-link-hover:     #0043CE;

  --color-success:        #198038;  /* ticks only       5.0:1 bg / 4.6 layer */
  --color-success-soft:   #DEFBE6;  /* 4.6:1 with success text             */
  --color-review:         #8E6A00;  /* "sent to reviewer", "set aside" 5.0:1 */
  --color-review-soft:    #FCF4D6;

  --color-focus:          #0F62FE;  /* 2 px outline, 2 px offset            */
  --color-selection:      #D0E2FF;

  /* Inverse band (final call to action): dark in light theme */
  --color-inverse-bg:       #161616;
  --color-inverse-ink:      #F4F4F4;  /* 16.5:1 */
  --color-inverse-ink-2:    #C6C6C6;  /* 10.6:1 */
  --color-inverse-link:     #78A9FF;  /*  7.7:1 */
  --color-inverse-border:   #393939;
  --color-inverse-focus:    #FFFFFF;
  /* primary button keeps --color-accent on the band (fill vs band 3.6:1, text 5.0:1) */

  /* Phone mock: a phone screen is dark in both themes */
  --phone-frame:          #161616;
  --phone-screen:         #262626;
  --phone-scene:          #393939;  /* flat camera view, no gradient        */
  --phone-caption-bg:     #161616;
  --phone-caption-ink:    #F4F4F4;  /* 16.5:1 */
  --phone-guide:          #F4F4F4;  /* framing corners                      */
  --phone-meta:           #A8A8A8;  /* status row, caption label  6.4:1     */
  --phone-art:            #C6C6C6;  /* line art in the camera view          */
  --phone-control:        #6F6F6F;  /* control circle outlines              */

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
               "Liberation Mono", monospace;
  /* Native-script language names use the device's own fonts (Noto on Android). */
  --font-script: system-ui, "Noto Sans", sans-serif;

  /* Fixed small sizes (Carbon does not scale body copy) */
  --step--2: 0.75rem;   /* 12 px  mono labels, eyebrows, table meta          */
  --step--1: 0.875rem;  /* 14 px  helper text, badges, chips, bottom-bar note */
  --step-0:  1rem;      /* 16 px  body, buttons                              */
  /* Fluid headings, 320 px -> 1280 px viewport */
  --step-1:  clamp(1.125rem, 1.0833rem + 0.2083vw, 1.25rem);  /* 18 -> 20  lead, h4     */
  --step-2:  clamp(1.25rem,  1.1667rem + 0.4167vw, 1.5rem);   /* 20 -> 24  h3           */
  --step-3:  clamp(1.5rem,   1.3333rem + 0.8333vw, 2rem);     /* 24 -> 32  final-CTA h2 sub, plan names */
  --step-4:  clamp(1.75rem,  1.4583rem + 1.4583vw, 2.625rem); /* 28 -> 42  h2           */
  --step-5:  clamp(2.25rem,  1.75rem   + 2.5vw,    3.75rem);  /* 36 -> 60  h1           */

  --weight-light:   300;  /* h1, h2 */
  --weight-regular: 400;  /* body, h3, buttons */
  --weight-semibold:600;  /* wordmark, table row heads, emphasis (sparingly) */

  --leading-display: 1.15;  /* h1, h2 */
  --leading-heading: 1.3;   /* h3, h4 */
  --leading-body:    1.5;
  --leading-mono:    1.6;   /* log lines */
  --tracking-display: -0.01em;
  --tracking-label:    0.02em;  /* mono labels (Carbon label-01 ~0.32px) */

  --measure:        66ch;
  --measure-narrow: 48ch;

  /* ---- Grid (Carbon 2x grid) ------------------------------------------ */
  /* sm  < 672 px : 4 columns   md 672-1055 : 8 columns   lg >= 1056 : 16 columns
     max >= 1312 px: container stops growing and centres.                    */
  --grid-cols:      4;         /* code sets 8 / 16 in media queries          */
  --grid-gap:       1rem;      /* 16 px sm; 2rem (32 px) from md             */
  --gutter:         1rem;      /* side margin: 16 px sm; 2rem from md        */
  --container:      82rem;     /* 1312 px content width                      */
  --container-text: 45rem;     /* 720 px: FAQ answers, long text             */

  /* ---- Space (8 px base; 4 and 12 for fine tuning) -------------------- */
  --space-1:  0.25rem;  /*   4 */
  --space-2:  0.5rem;   /*   8 */
  --space-3:  0.75rem;  /*  12 */
  --space-4:  1rem;     /*  16 */
  --space-5:  1.5rem;   /*  24 */
  --space-6:  2rem;     /*  32 */
  --space-7:  2.5rem;   /*  40 */
  --space-8:  3rem;     /*  48 */
  --space-9:  4rem;     /*  64 */
  --space-10: 5rem;     /*  80 */
  --space-11: 6rem;     /*  96 */
  --space-12: 10rem;    /* 160 */

  --section-y: clamp(4rem, 2.6667rem + 6.6667vw, 8rem);  /* 64 -> 128 px */

  --header-h:     3.5rem;  /* 56 px */
  --bottom-bar-h: 4rem;    /* 64 px, plus env(safe-area-inset-bottom) */
  --btn-h:        3rem;    /* 48 px, Carbon large */
  --btn-h-sm:     2.75rem; /* 44 px, header compact button */
  --tap:          2.75rem; /* 44 px minimum target */

  /* ---- Shape ----------------------------------------------------------- */
  --radius:       0;        /* every rectangle: buttons, tiles, tags, table. Set 4px to soften globally. */
  --radius-phone: 2.25rem;  /* 36 px, the phone mock only (it depicts an object) */
  --border-w:     1px;

  /* ---- Elevation: flat. One faint shadow, raised surfaces only --------- */
  --shadow-raised: 0 1px 2px rgba(22, 22, 22, 0.08);  /* phone mock, open mobile menu */

  /* ---- Icons (Carbon-style outline, drawn inline) ---------------------- */
  --icon-16: 1rem;
  --icon-20: 1.25rem;  /* default */
  --icon-24: 1.5rem;
  --icon-32: 2rem;     /* tile icons */
  /* stroke-width 1.5 at 20/24/32, 1 at 16; square caps, miter joins; currentColor */

  /* ---- Motion (Carbon productive) ------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit:     cubic-bezier(0.2, 0, 1, 0.9);
  --dur-fast:  110ms;  /* hover, press, colour           */
  --dur-mod:   150ms;  /* accordion chevron, bar show    */
  --dur-slow:  240ms;  /* tick draw, log line in         */
  --dur-hero-cycle: 12s;
  --caret-blink: 1.06s;

  --z-header:     50;
  --z-bottom-bar: 60;
  --z-skip:       100;
}

/* ---- Dark theme: follows the system unless the page forces light ------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             #161616;
    --color-layer:          #262626;
    --color-layer-hover:    #333333;
    --color-ink:            #F4F4F4;  /* 16.5:1 bg / 13.8 layer */
    --color-ink-2:          #C6C6C6;  /* 10.6:1 / 8.9 */
    --color-ink-3:          #A8A8A8;  /*  7.6:1 / 6.4 */
    --color-border:         #393939;
    --color-border-strong:  #6F6F6F;  /*  3.6:1 */

    --color-accent:         #0F62FE;  /* fill vs bg 3.6:1; white text 5.0:1 */
    --color-accent-hover:   #0353E9;
    --color-accent-active:  #002D9C;
    --color-on-accent:      #FFFFFF;
    --color-link:           #78A9FF;  /*  7.7:1 bg / 6.4 layer */
    --color-link-hover:     #A6C8FF;

    --color-success:        #42BE65;  /*  7.6:1 */
    --color-success-soft:   #071908;
    --color-review:         #F1C21B;  /* 10.8:1 */
    --color-review-soft:    #302400;

    --color-focus:          #FFFFFF;  /* 18.1:1 bg, 5.0:1 against accent */
    --color-selection:      #002D9C;

    --color-inverse-bg:       #262626;  /* a raised layer, not a light band */
    --color-inverse-ink:      #F4F4F4;
    --color-inverse-ink-2:    #C6C6C6;
    --color-inverse-link:     #78A9FF;  /* 6.4:1 */
    --color-inverse-border:   #525252;
    --color-inverse-focus:    #FFFFFF;

    --phone-frame:          #393939;  /* lifts the phone off a dark ground */
    --phone-screen:         #262626;

    --shadow-raised: none;
  }
}

/* ---- Dark theme: forced by the footer theme toggle ----------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:             #161616;
  --color-layer:          #262626;
  --color-layer-hover:    #333333;
  --color-ink:            #F4F4F4;
  --color-ink-2:          #C6C6C6;
  --color-ink-3:          #A8A8A8;
  --color-border:         #393939;
  --color-border-strong:  #6F6F6F;

  --color-accent:         #0F62FE;
  --color-accent-hover:   #0353E9;
  --color-accent-active:  #002D9C;
  --color-on-accent:      #FFFFFF;
  --color-link:           #78A9FF;
  --color-link-hover:     #A6C8FF;

  --color-success:        #42BE65;
  --color-success-soft:   #071908;
  --color-review:         #F1C21B;
  --color-review-soft:    #302400;

  --color-focus:          #FFFFFF;
  --color-selection:      #002D9C;

  --color-inverse-bg:       #262626;
  --color-inverse-ink:      #F4F4F4;
  --color-inverse-ink-2:    #C6C6C6;
  --color-inverse-link:     #78A9FF;
  --color-inverse-border:   #525252;
  --color-inverse-focus:    #FFFFFF;

  --phone-frame:          #393939;
  --phone-screen:         #262626;

  --shadow-raised: none;
}

:root[data-theme="light"] { color-scheme: light; }

/* ---- Reduced motion: no durations, no hero cycle, no caret blink -------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mod:  0ms;
    --dur-slow: 0ms;
    --caret-blink: 0s;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-selection); }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); }
button { font: inherit; color: inherit; }
strong { font-weight: var(--weight-semibold); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
main:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  flex: none;
  width: var(--icon-20); height: var(--icon-20);
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
}
.icon--16 { width: var(--icon-16); height: var(--icon-16); stroke-width: 1.75; }
.icon--24 { width: var(--icon-24); height: var(--icon-24); }
.icon--32 { width: var(--icon-32); height: var(--icon-32); stroke-width: 1.25; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; left: var(--space-2); top: var(--space-2); z-index: var(--z-skip);
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4);
  background: var(--color-accent); color: var(--color-on-accent); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ==========================================================================
   3. Grid
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 42rem) {
  :root { --grid-cols: 8; --grid-gap: 2rem; --gutter: 2rem; }
}
@media (min-width: 66rem) {
  :root { --grid-cols: 16; }
  .split__head { grid-column: 1 / span 5; }
  .split__body { grid-column: 7 / span 10; }
}

/* ==========================================================================
   4. Type
   ========================================================================== */

.h1 {
  font-size: var(--step-5); font-weight: var(--weight-light);
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  max-width: 16ch; text-wrap: balance;
}
.h2 {
  font-size: var(--step-4); font-weight: var(--weight-light);
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  max-width: 20ch; text-wrap: balance;
}
.h3 {
  font-size: var(--step-2); font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}
.lead {
  font-size: var(--step-1); color: var(--color-ink-2);
  max-width: var(--measure-narrow); text-wrap: pretty;
}
p { max-width: var(--measure); }

.eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.33;
  letter-spacing: var(--tracking-label); color: var(--color-ink-3);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; background: currentColor; flex: none;
}
.helper { font-size: var(--step--1); line-height: 1.4; color: var(--color-ink-3); }
.helper-mono {
  font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.33;
  letter-spacing: var(--tracking-label); color: var(--color-ink-3);
}

/* Section header block */
.section-head .lead { margin-top: var(--space-5); }
.section-head--wide { max-width: 50rem; margin-bottom: var(--space-8); }

/* ==========================================================================
   5. Buttons and links
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--btn-h); min-width: 12rem;
  padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--step-0); line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--primary:active { background: var(--color-accent-active); }
.btn--ghost { background: transparent; color: var(--color-link); }
.btn--ghost:hover { background: var(--color-layer-hover); color: var(--color-link-hover); }
.btn--sm { min-height: var(--btn-h-sm); min-width: 0; gap: 0; }
.btn--lg { min-width: 16rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; }

.link {
  color: var(--color-link);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.link:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
.link--action {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); text-decoration: none;
}
.link--action:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
  position: relative; z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: var(--border-w) solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; flex: none;
  min-height: var(--tap); padding-block: var(--space-1);
}
.brand__img { height: 30px; width: auto; }

.nav { display: none; }
.nav__list { display: flex; gap: var(--space-6); }
.nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: var(--step--1); color: var(--color-ink-2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--color-ink); }
.nav__link[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--color-ink);
}

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.header-cta {
  display: none;
  transition: opacity var(--dur-mod) var(--ease-standard), visibility 0s linear 0s,
              background-color var(--dur-fast) var(--ease-standard);
}
.header-cta.is-concealed {
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-mod) var(--ease-standard), visibility 0s linear var(--dur-mod);
}

.menu-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--space-3);
  margin-right: calc(-1 * var(--space-3));
  background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
  color: var(--color-ink); font-size: var(--step--1);
}
.menu-toggle:hover { background: var(--color-layer-hover); }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

.mobile-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-bg);
  border-bottom: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-raised);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { padding-block: var(--space-2); }
.mobile-menu__list li + li { border-top: var(--border-w) solid var(--color-border); }
.mobile-menu__list a {
  display: flex; align-items: center; min-height: var(--btn-h);
  color: var(--color-ink); text-decoration: none;
}
.mobile-menu__list a:hover { color: var(--color-link); }

@media (min-width: 42rem) {
  .site-header { position: sticky; top: 0; }
  .header-cta { display: inline-flex; }
}
@media (min-width: 66rem) {
  .nav { display: block; }
  .menu-toggle, .mobile-menu { display: none !important; }
  .site-header__inner { gap: var(--space-8); }
}

/* ==========================================================================
   7. Media placeholders (images land later; the box keeps its exact ratio)
   ========================================================================== */

.media {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ar, 4 / 3);
  background: var(--color-layer);
  border: var(--border-w) solid var(--color-border);
}
.media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.media--art { background: var(--color-bg); }
.media--art img { object-fit: contain; }
.media.is-missing img { opacity: 0; }
.media.is-missing {
  background-color: var(--color-layer);
  background-image:
    linear-gradient(var(--color-border-strong), var(--color-border-strong)),
    linear-gradient(var(--color-border-strong), var(--color-border-strong)),
    linear-gradient(var(--color-border-strong), var(--color-border-strong)),
    linear-gradient(var(--color-border-strong), var(--color-border-strong)),
    linear-gradient(var(--color-border-strong), var(--color-border-strong)),
    linear-gradient(var(--color-border-strong), var(--color-border-strong)),
    linear-gradient(var(--color-border-strong), var(--color-border-strong)),
    linear-gradient(var(--color-border-strong), var(--color-border-strong));
  background-repeat: no-repeat;
  --c: 14px; --i: 12px;
  background-size: var(--c) 1px, 1px var(--c), var(--c) 1px, 1px var(--c),
                   var(--c) 1px, 1px var(--c), var(--c) 1px, 1px var(--c);
  background-position:
    left var(--i) top var(--i), left var(--i) top var(--i),
    right var(--i) top var(--i), right var(--i) top var(--i),
    left var(--i) bottom var(--i), left var(--i) bottom var(--i),
    right var(--i) bottom var(--i), right var(--i) bottom var(--i);
}
.media.is-missing::after {
  content: attr(data-file);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 3rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}

/* Line art is ink on white; in dark it is inverted so it sits on the dark ground. */
:root[data-theme="dark"] .media--art img { filter: invert(0.914) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .media--art img { filter: invert(0.914) hue-rotate(180deg); }
}

/* ==========================================================================
   8. Sections
   ========================================================================== */

.section {
  border-top: var(--border-w) solid var(--color-border);
  padding-block: var(--section-y);
}
section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

.split { row-gap: var(--space-8); }
.section-foot {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3);
  margin-top: var(--space-7); max-width: none;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: var(--space-8); padding-bottom: var(--section-y); }
.hero__grid { row-gap: var(--space-8); align-items: center; }
.hero__lead { margin-top: var(--space-5); max-width: 44ch; }
.hero .btn-row { margin-top: var(--space-7); }
.hero__note { margin-top: var(--space-5); }

@media (max-width: 41.99rem) {
  .hero .btn-row { flex-direction: column; }
  .hero .btn-row .btn { width: 100%; }
}
@media (min-width: 42rem) {
  .hero { padding-top: var(--space-10); }
  .hero__text { grid-column: 1 / span 7; }
}
@media (min-width: 66rem) {
  .hero__text { grid-column: 1 / span 7; }
  .hero-visual { grid-column: 8 / span 9; }
}

/* Watch cards under the hero buttons: the thumbnail's shape tells the video's shape. */
.watch {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-7);
}
/* The landscape card gets the wider column: its thumbnail is wider. */
@media (min-width: 30rem) { .watch { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

.watch-card {
  display: flex; align-items: center; gap: var(--space-4);
  height: 100%; padding: var(--space-3);
  background: var(--color-bg); color: var(--color-ink); text-decoration: none;
  border: var(--border-w) solid var(--color-border); border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.watch-card:hover { background: var(--color-layer); border-color: var(--color-border-strong); }

.watch-card__thumb {
  position: relative; flex: none; overflow: hidden;
  height: 4rem; background: var(--phone-screen);
}
.watch-card__thumb--portrait  { aspect-ratio: 9 / 16; }
.watch-card__thumb--landscape { aspect-ratio: 16 / 9; }
.watch-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.watch-card__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  background: var(--color-accent); color: var(--color-on-accent);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.watch-card__play .icon { fill: currentColor; stroke: none; }
.watch-card:hover .watch-card__play { background: var(--color-accent-hover); }

.watch-card__text { display: grid; gap: var(--space-1); min-width: 0; }
.watch-card__kicker {
  font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.33;
  letter-spacing: var(--tracking-label); color: var(--color-ink-3);
}
.watch-card__title { font-size: var(--step-0); line-height: var(--leading-heading); color: var(--color-link); }
.watch-card:hover .watch-card__title { color: var(--color-link-hover); }
.watch-card__meta { font-size: var(--step--1); line-height: 1.3; color: var(--color-ink-2); }

/* Video player dialog: dark in both themes, like the phone mock. */
.player {
  --player-bar: 3rem;
  --player-room: calc(100dvh - 2 * var(--space-4) - var(--player-bar));
  padding: 0; border: 0; border-radius: var(--radius);
  max-width: calc(100vw - 2 * var(--space-4)); max-height: calc(100dvh - 2 * var(--space-4));
  background: #161616; color: #F4F4F4;
  overflow: hidden;
}
.player::backdrop { background: rgba(0, 0, 0, 0.82); }
.player[data-shape="landscape"] { width: min(64rem, calc(var(--player-room) * 16 / 9)); }
.player[data-shape="portrait"]  { width: min(24rem, calc(var(--player-room) * 9 / 16)); }

.player__bar {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--player-bar); padding-left: var(--space-4);
}
.player__title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--step--1);
}
.player__yt {
  flex: none; display: inline-flex; align-items: center; min-height: var(--tap);
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-label); color: #A8A8A8; text-decoration: none;
}
.player__yt:hover { color: #F4F4F4; text-decoration: underline; }
.player__close {
  flex: none; display: grid; place-items: center;
  width: var(--player-bar); height: var(--player-bar);
  background: transparent; border: 0; color: inherit; cursor: pointer;
}
.player__close:hover { background: #333333; }
.player :focus-visible { outline-color: #FFFFFF; outline-offset: -2px; }

.player__frame { background: #000; }
.player[data-shape="landscape"] .player__frame { aspect-ratio: 16 / 9; }
.player[data-shape="portrait"]  .player__frame { aspect-ratio: 9 / 16; }
.player__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

html:has(.player[open]) { overflow: hidden; }

/* Hero visual: phone pane + call log, in one hairline frame */
.hero-visual {
  --phone-w: 200px;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  border: var(--border-w) solid var(--color-border);
  background: var(--color-bg);
}
.hero-visual__art { display: contents; }
.hero-visual__phone-pane {
  display: flex; justify-content: center; align-items: center;
  padding: var(--space-6) var(--space-5);
  background: var(--color-layer);
  border-bottom: var(--border-w) solid var(--color-border);
}
@media (min-width: 42rem) {
  .hero-visual { --phone-w: 216px; grid-template-columns: auto minmax(0, 1fr); }
  .hero-visual__phone-pane {
    padding: var(--space-6);
    border-bottom: 0; border-right: var(--border-w) solid var(--color-border);
  }
}
@media (min-width: 66rem) { .hero-visual { --phone-w: 200px; } }
@media (min-width: 82rem) { .hero-visual { --phone-w: 232px; } }

.phone {
  width: var(--phone-w);
  aspect-ratio: 9 / 18.5;
  display: flex; flex-direction: column;
  background: var(--phone-screen);
  border: 8px solid var(--phone-frame);
  border-radius: var(--radius-phone);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.3;
  color: var(--phone-meta);
}
.phone__status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px 10px;
}
.phone__rec { display: inline-flex; align-items: center; gap: 6px; }
.phone__rec-dot { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.phone__scene {
  position: relative; flex: 1; min-height: 0;
  background: var(--phone-scene);
}
.phone__corners { position: absolute; inset: 14px; }
.phone__corners i {
  position: absolute; width: 16px; height: 16px;
  border: 0 solid var(--phone-guide);
}
.phone__corners i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.phone__corners i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.phone__corners i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.phone__corners i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.phone__tag {
  position: absolute; left: 22px; top: 22px; z-index: 1;
  padding: 3px 7px; background: var(--phone-caption-bg); color: var(--phone-caption-ink);
}
.scene {
  position: absolute; left: 50%; top: 50%; width: 66%; height: auto;
  transform: translate(-50%, -48%);
  fill: none; stroke: var(--phone-art); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.scene__mono {
  fill: var(--phone-caption-ink); stroke: none;
  font-family: var(--font-mono); font-size: 22px; font-weight: 500; letter-spacing: 0.06em;
}
.scene__mono--sm { font-size: 7px; font-weight: 400; letter-spacing: 0.12em; fill: var(--phone-art); }
.scene__page { fill: var(--phone-scene); }
.scene__dash { stroke-dasharray: 3 3; }
.scene__faint { stroke: var(--phone-control); }
.phone[data-scene="face"] .scene[data-for="face"],
.phone[data-scene="id"] .scene[data-for="id"],
.phone[data-scene="printer"] .scene[data-for="printer"],
.phone[data-scene="code"] .scene[data-for="code"],
.phone[data-scene="laptop"] .scene[data-for="laptop"],
.phone[data-scene="done"] .scene[data-for="done"] { opacity: 1; }

.phone__caption {
  display: grid; gap: 4px;
  padding: 12px 16px; min-height: 5.25rem;
  background: var(--phone-caption-bg);
}
.phone__who { color: var(--phone-meta); }
.phone__says {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: var(--phone-caption-ink);
}
.phone__controls {
  display: flex; justify-content: center; gap: 16px;
  padding: 10px 12px 14px; background: var(--phone-caption-bg);
}
.phone__controls span {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--phone-control); border-radius: 50%; color: var(--phone-caption-ink);
}

/* Call log */
.log { display: flex; flex-direction: column; min-width: 0; }
.log__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap); padding-left: var(--space-4);
  background: var(--color-layer);
  border-bottom: var(--border-w) solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.log__title { display: inline-flex; align-items: center; gap: var(--space-2); }
.log__live { width: 6px; height: 6px; background: var(--color-success); }
.log__toggle {
  display: grid; place-items: center; width: var(--tap); height: var(--tap);
  background: transparent; border: 0; border-left: var(--border-w) solid var(--color-border);
  color: var(--color-ink); cursor: pointer;
}
.log__toggle[hidden] { display: none; }
.log__toggle:hover { background: var(--color-layer-hover); }
.log__toggle:focus-visible { outline-offset: -2px; }
.log__toggle-play { display: none; }
.log__toggle[aria-pressed="true"] .log__toggle-play { display: block; }
.log__toggle[aria-pressed="true"] .log__toggle-pause { display: none; }

.log__body {
  flex: 1;
  display: grid; align-content: start; gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  font-family: var(--font-mono); font-size: 12px; line-height: var(--leading-mono);
}
@media (min-width: 42rem) { .log__body { font-size: 13px; padding: var(--space-6) var(--space-5); gap: var(--space-3); } }
.log__line {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--space-3);
  align-items: start;
  transition: opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance);
}
.log__icon { display: grid; place-items: center; height: calc(1em * var(--leading-mono)); }
.log__line[data-kind="done"] .log__icon { color: var(--color-success); }
.log__line[data-kind="wait"] .log__icon { color: var(--color-ink-3); }
.log__line[data-kind="review"] .log__icon { color: var(--color-review); }
.log__line[data-kind="review"] .log__text { color: var(--color-ink); }
.log__icon .icon { stroke-width: 2; }
.log__line[data-kind="wait"] .icon { fill: currentColor; stroke: none; }
.log__sep { color: var(--color-ink-3); }
.log__detail { color: var(--color-ink-2); }
.log__code {
  padding: 0 4px; background: var(--color-layer); color: var(--color-ink); font-weight: 500;
}
.log__caret {
  display: none; width: 0.6em; height: 1.1em; margin-left: 4px; vertical-align: -0.2em;
  background: var(--color-ink);
}
.log__line[data-kind="wait"]:not([data-resolved]) .log__caret {
  display: inline-block; animation: caret var(--caret-blink) steps(1) infinite;
}
.log__line[data-kind="wait"]:not([data-resolved]) .d1 { animation: dot 1.2s var(--ease-standard) infinite; }
.log__line[data-kind="wait"]:not([data-resolved]) .d2 { animation: dot 1.2s var(--ease-standard) 0.2s infinite; }
.log__line[data-kind="wait"]:not([data-resolved]) .d3 { animation: dot 1.2s var(--ease-standard) 0.4s infinite; }
.log__foot {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
  padding: var(--space-4);
  border-top: var(--border-w) solid var(--color-border);
}
@media (min-width: 42rem) { .log__foot { padding: var(--space-4) var(--space-5) var(--space-5); } }
.log__foot span {
  height: 6px; background: var(--color-border);
  transition: background-color var(--dur-slow) var(--ease-standard);
}
.log__foot span.is-on { background: var(--color-border-strong); }
.log__foot span[data-review].is-on { background: transparent; box-shadow: inset 0 0 0 1px var(--color-review); }
.log__line.is-hidden { opacity: 0; transform: translateY(4px); }
.log.is-fading .log__line { opacity: 0; transition-duration: var(--dur-mod); }

@keyframes caret { 50% { opacity: 0; } }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .log__caret, .log__line .d1, .log__line .d2, .log__line .d3 { animation: none !important; }
}

/* ---- Proof strip ----------------------------------------------------------- */
.proof {
  background: var(--color-layer);
  border-top: var(--border-w) solid var(--color-border);
  padding-block: var(--space-8);
}
.proof__grid { row-gap: var(--space-6); align-items: center; }
.proof__grid { align-items: start; }
.proof__text { max-width: 40rem; }
.proof__text .eyebrow { margin-bottom: var(--space-5); }
.proof__logo { display: block; box-sizing: content-box; height: 48px; width: auto; max-width: 14rem;
  padding: var(--space-3) var(--space-4); background: #fff; border: var(--border-w) solid var(--color-border);
  margin-bottom: var(--space-5); }  /* a white plate: the logo's grey tagline is unreadable on dark */
.proof__logo[hidden] { display: none; }
.proof__lead { font-size: var(--step-2); line-height: 1.4; max-width: 34ch; text-wrap: pretty; }
.proof__lead strong { font-weight: var(--weight-semibold); }
.proof__checks { margin-top: var(--space-6); border-top: var(--border-w) solid var(--color-border); }
.proof__checks li {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-block: var(--space-3); border-bottom: var(--border-w) solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.4; color: var(--color-ink-2);
}
.proof__watch { margin-top: var(--space-4); }
.proof__watch .icon { fill: currentColor; stroke: none; }
.proof__checks li::before { content: "\2713"; color: var(--color-success, #198038); flex: none; }
.chips__label { font-family: var(--font-mono); font-size: var(--step--2); color: var(--color-ink-3);
  text-transform: none; margin-bottom: var(--space-3); }
.chips + .chips__label { margin-top: var(--space-6); }
.proof__media { max-width: 30rem; background: var(--color-bg); }
@media (min-width: 42rem) {
  .proof__text { grid-column: 1 / span 4; }
  .proof__media { grid-column: 5 / span 4; }
}
@media (min-width: 66rem) {
  .proof__text { grid-column: 1 / span 7; }
  .proof__media { grid-column: 11 / span 6; max-width: none; }
}

/* ---- Steps (How it works, Getting started) -------------------------------- */
.steps { display: grid; gap: var(--space-7); counter-reset: none; }
.step { position: relative; }
.step__body {
  position: relative;
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--color-border-strong);
}
.step__body::before {
  content: ""; position: absolute; left: 0; top: -4.5px; width: 8px; height: 8px; background: var(--color-ink);
}
.step__num {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.step .h3 { margin-bottom: var(--space-3); }
.step p { color: var(--color-ink-2); }
.step__media { width: 100%; max-width: 240px; margin-bottom: var(--space-5); }

@media (max-width: 41.99rem) {
  /* Small screens: a vertical rail */
  .steps { gap: 0; border-left: var(--border-w) solid var(--color-border-strong); margin-left: 4px; }
  .step { padding: 0 0 var(--space-7) var(--space-6); }
  .step:last-child { padding-bottom: 0; }
  .step__body { border-top: 0; padding-top: 0; }
  .step__body::before { left: calc(-1 * var(--space-6) - 4.5px); top: 4px; }
  .steps--art .step__body::before { top: 4px; }
  .step__media { max-width: 200px; }
}
@media (min-width: 42rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-8); }
}
@media (min-width: 66rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Structured list ------------------------------------------------------- */
.slist { margin-top: var(--space-7); border-bottom: var(--border-w) solid var(--color-border); }
.slist li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: var(--border-w) solid var(--color-border);
}
.slist .icon { margin-top: 2px; color: var(--color-ink); }
.slist p { color: var(--color-ink-2); }
.slist strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
.slist--facts { margin-top: 0; }
.slist--facts strong { font-weight: var(--weight-regular); }

/* What you get: image column */
@media (min-width: 66rem) {
  .record__visual { align-self: center; }
}

/* ---- Tiles ------------------------------------------------------------------ */
.tile-grid {
  display: grid; gap: 1px;
  background: var(--color-border);
  border: var(--border-w) solid var(--color-border);
}
.tile {
  background: var(--color-bg);
  padding: var(--space-5);
  display: flex; flex-direction: column;
}
.tile .h3 { margin-bottom: var(--space-3); }
.tile p { color: var(--color-ink-2); }
.tile__icon { color: var(--color-ink); margin-bottom: var(--space-5); }
@media (min-width: 42rem) { .tile { padding: var(--space-6); } }

.tile--row { flex-direction: row; gap: var(--space-5); }
.tile--row .tile__icon { margin-bottom: 0; }

.tile--photo { padding: 0; }
.tile--photo .media { border: 0; border-bottom: var(--border-w) solid var(--color-border); }
.tile__body { padding: var(--space-5); }
@media (min-width: 42rem) { .tile__body { padding: var(--space-6); } }

.tile-grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 42rem) { .tile-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.usecases--text { border-top: 0; }
.usecases--text .h3 { font-size: var(--step-1); }
.usecases--text p { font-size: var(--step--1); }

/* ---- Trust ------------------------------------------------------------------ */
.trust { row-gap: var(--space-8); }
.trust__media { max-width: 36rem; }
@media (min-width: 66rem) {
  .trust { grid-template-rows: auto 1fr; row-gap: var(--space-8); }
  .trust__head { grid-row: 1; }
  .trust__media { grid-row: 2; align-self: end; max-width: none; }
  .trust__points { grid-row: 1 / span 2; align-self: stretch; grid-auto-rows: 1fr; }
  .trust__points .tile { align-items: center; }
}

/* ---- Getting started foot --------------------------------------------------- */
.start__foot {
  display: flex; flex-direction: column; gap: var(--space-6);
  margin-top: var(--space-8);
}
.addon {
  display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-layer);
}
.addon p { color: var(--color-ink-2); }
.addon strong { color: var(--color-ink); }
.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2);
  border: var(--border-w) solid var(--color-border-strong);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
}
@media (max-width: 41.99rem) { .start__foot .btn { width: 100%; } }
@media (min-width: 42rem) {
  .start__foot { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--space-5); }
  .addon { flex-direction: row; align-items: center; gap: var(--space-4); flex: 0 1 auto; min-height: var(--btn-h); padding: var(--space-2) var(--space-5); }
}

/* ---- Pricing ---------------------------------------------------------------- */
.plans {
  display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr);
  background: var(--color-border); border: var(--border-w) solid var(--color-border);
}
@media (min-width: 42rem) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan {
  display: flex; flex-direction: column;
  padding: var(--space-5); background: var(--color-bg);
}
@media (min-width: 42rem) { .plan { padding: var(--space-6); } }
.plan__name { font-size: var(--step-2); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.plan__desc { margin-top: var(--space-3); color: var(--color-ink-2); }
@media (min-width: 42rem) { .plan__desc { min-height: 3em; } }
.plan__label {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.plan__list { display: grid; gap: var(--space-3); margin-top: var(--space-4); margin-bottom: var(--space-7); }
.plan__list li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-3);
  font-size: var(--step--1); line-height: 1.5; color: var(--color-ink);
}
.plan__list .icon { margin-top: 3px; color: var(--color-success); stroke-width: 2; }
.plan__cta { margin-top: auto; width: 100%; min-width: 0; }
.plans + .helper { margin-top: var(--space-4); }

/* ---- Languages -------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2rem; padding: 0 var(--space-3);
  border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius);
  font-size: var(--step--1); line-height: 1.2; color: var(--color-ink);
}
.chip span { font-family: var(--font-script); color: var(--color-ink-2); }
.chips + .helper { margin-top: var(--space-5); }
@media (min-width: 66rem) {
  #languages .split__body, #security .split__body { align-self: start; }
  .chips { gap: var(--space-3); }
  .chip { min-height: 2.5rem; padding: 0 var(--space-4); }
}

/* ---- Security --------------------------------------------------------------- */
.certifications {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin-bottom: var(--space-7);
  background: var(--color-border-strong); border: var(--border-w) solid var(--color-border-strong);
}
@media (min-width: 42rem) { .certifications { grid-template-columns: repeat(3, minmax(10rem, 1fr)); } }
@media (max-width: 41.99rem) { .badge { min-height: var(--space-9); padding: var(--space-3); font-size: 0.8125rem; } }
.badge {
  display: flex; align-items: center; min-height: var(--space-10);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); letter-spacing: var(--tracking-label);
  color: var(--color-ink);
}

/* ---- FAQ -------------------------------------------------------------------- */
@media (min-width: 66rem) {
  .faq__head { align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.faq { border-bottom: var(--border-w) solid var(--color-border); }
.faq__item { border-top: var(--border-w) solid var(--color-border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 3.5rem; padding: var(--space-4);
  margin-inline: calc(-1 * var(--space-4));
  list-style: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--color-layer-hover); }
.faq__item summary:focus-visible { outline-offset: -2px; }
.faq__q { font-size: var(--step-1); font-weight: var(--weight-regular); line-height: var(--leading-heading); }
.faq__chev { transition: transform var(--dur-mod) var(--ease-standard); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 var(--space-7) var(--space-5) 0; color: var(--color-ink-2); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0; overflow: clip;
    transition: height var(--dur-mod) var(--ease-standard), content-visibility var(--dur-mod) allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; }
}

/* ---- Final call to action --------------------------------------------------- */
.book {
  background: var(--color-inverse-bg); color: var(--color-inverse-ink);
  padding-block: var(--section-y);
  border-block: var(--border-w) solid var(--color-inverse-border);
}
.book :focus-visible { outline-color: var(--color-inverse-focus); }
.book__grid { row-gap: var(--space-8); align-items: center; }
.book__title { color: var(--color-inverse-ink); }
.book__lead { margin-top: var(--space-5); color: var(--color-inverse-ink-2); }
.book .btn { margin-top: var(--space-7); }
.book__mail { margin-top: var(--space-5); font-size: var(--step--1); color: var(--color-inverse-ink-2); }
.book__mail .link { color: var(--color-inverse-link); }
.book__media {
  width: 100%; max-width: 22rem;
  border-color: var(--color-inverse-border);
  background: var(--color-inverse-bg);
}
.book__media.is-missing { background-color: transparent; }
.book__media.is-missing::after { color: var(--color-inverse-ink-2); }
@media (max-width: 41.99rem) {
  .book .btn { width: 100%; }
  .book__media { aspect-ratio: 1 / 1; max-width: none; } /* hero-call.jpg is crop-safe to 1:1 */
  .book__media img { object-position: 60% 40%; }
}
@media (min-width: 42rem) {
  .book__text { grid-column: 1 / span 5; }
  .book__media { grid-column: 6 / span 3; }
}
@media (min-width: 66rem) {
  .book__text { grid-column: 1 / span 9; }
  .book__media { grid-column: 12 / span 5; max-width: none; }
}

/* ---- Footer ----------------------------------------------------------------- */
.site-footer {
  border-top: var(--border-w) solid var(--color-border);
  padding-top: var(--space-9);
  padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom) + var(--space-5));
}
@media (min-width: 42rem) { .site-footer { padding-bottom: var(--space-7); } }
.footer__grid { row-gap: var(--space-7); align-items: start; }
.footer__brand .brand { margin-left: calc(-1 * var(--space-1)); padding-inline: var(--space-1); }
.footer__brand .helper { margin-top: var(--space-3); color: var(--color-ink-2); }
.footer__nav ul { display: grid; }
.footer__nav a, .footer__mail {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap);
  font-size: var(--step--1); color: var(--color-ink-2); text-decoration: none;
}
.footer__nav a:hover, .footer__mail:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__mail { color: var(--color-link); }
.footer__mail:hover { color: var(--color-link-hover); }
.footer__legal {
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
@media (min-width: 42rem) {
  .footer__brand { grid-column: 1 / span 4; }
  .footer__nav { grid-column: 5 / span 2; }
  .footer__contact { grid-column: 7 / span 2; }
  .footer__theme { grid-column: 1 / -1; }
}
@media (min-width: 66rem) {
  .footer__brand { grid-column: 1 / span 5; }
  .footer__nav { grid-column: 7 / span 3; }
  .footer__contact { grid-column: 10 / span 3; }
  .footer__theme { grid-column: 13 / span 4; justify-self: end; }
}

/* Theme switcher (Carbon content switcher) */
.switcher { display: inline-flex; border: var(--border-w) solid var(--color-border-strong); }
.switcher button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-4);
  background: var(--color-bg); color: var(--color-ink-2);
  border: 0; border-radius: var(--radius); cursor: pointer; font-size: var(--step--1);
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.switcher button + button { border-left: var(--border-w) solid var(--color-border-strong); }
.switcher button:hover { background: var(--color-layer-hover); color: var(--color-ink); }
.switcher button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); }
.switcher button:focus-visible { outline-offset: -4px; outline-color: var(--color-accent); }
@media (max-width: 22rem) { .switcher button { padding: 0 var(--space-3); } }

/* ---- Mobile bottom bar ------------------------------------------------------ */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottom-bar);
  padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--color-bg);
  border-top: var(--border-w) solid var(--color-border);
  box-shadow: 0 -1px 2px rgba(22, 22, 22, 0.06);
  transition: transform var(--dur-mod) var(--ease-standard), visibility 0s linear 0s;
}
.bottom-bar.is-concealed {
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--dur-mod) var(--ease-standard), visibility 0s linear var(--dur-mod);
}
@media (min-width: 42rem) { .bottom-bar { display: none; } }

/* Print: drop chrome */
@media print {
  .site-header, .bottom-bar, .log__toggle, .switcher { display: none !important; }
}

/* Inline email link in the final band: keep a 44 px hit area without changing the line. */
.book__mail .link { display: inline-flex; align-items: center; min-height: var(--tap); }