/* ==========================================================================
   Fyndol website styles
   One file for every page. Colors live in the "tokens" block right below,
   so you can change a color once and it updates everywhere.

   PHONE FIRST. 95% of visitors are on phones. New components below are
   written for a 390px phone first and scaled up with min-width queries.
   Older desktop rules keep their phone fixes in (max-width: 734px) blocks,
   so desktop (1440) looks exactly as before.
   Breakpoints: phone <=734 | small phone <=374 | tablet 735-1067 | desktop >=1068
   Nav phone mode (hamburger): (max-width: 833px), (pointer: coarse) and (max-height: 500px)

   SHARED COMPONENTS (page owners only add these classes/attributes):
   - .swipe              Phone-only swipe row (scroll-snap, next card peeks). Put it on
                         a ul.tiles / ul.cards, or wrap a run of tiles inside a .bento
                         in <div class="swipe" role="group" aria-label="...">. Always add
                         aria-label. data-dots = position dots (6+ items). JS adds tabindex.
   - details.acc-m       Phone accordion. <details class="acc-m" open><summary>Label</summary>
                         ...</details>. Open + summary hidden on desktop; JS closes it on phones.
   - [data-cta]          On the hero .btn-row and the final CTA <section>. The sticky bar
                         (.mcta, in the footer partial) hides while these or the footer show.
   - body[data-mcta=off] No sticky bar on that page.
   - <picture> in .shot  Art-directed screenshots: <source media="(max-width:734px)"> crop +
                         <img> desktop file. onerror="this.closest('.shot').classList.add('is-missing')"
   - .m-only / .d-only   Phone only / hidden on phones (never for essential info).
   - .nowrap             Keep words together.
   - .phone-peek         On a .phone frame: shows just the top of the phone screen on phones.
   - Forms               .field (label above, input, p.err), .check (whole row tappable),
                         .form-actions (stacked full-width button on phones).
   - Automatic (no classes needed): sheet menu, sticky features chip row, 48px+ buttons,
     stacked .btn-row on phones, 44px footer links, scroll reveals, safe-area insets.
   Full guide: docs/mobile-plan.md, "Foundation: how to use".
   ========================================================================== */

/* ---------- Font (self-hosted Inter, variable weight + optical size) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-var.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;
}

/* ---------- Tokens ----------
   Between kit:start and kit:end is a copy of the Fyndol brand kit tokens
   (/Users/chuy/Fyndol/brand/brand-kit/tokens.css), minus the two legacy dark-app-icon
   tokens the website never uses. Don't edit it here: change the kit, then run
   `npm run sync` and it is copied in again. It is inlined (not a separate <link>)
   so every page still loads just one stylesheet. */
/* kit:start */
/* ==========================================================================
   Fyndol design tokens (v1, 2026-10-15)
   One source of truth for the website, the app and every creative.
   Rule of thumb: mostly white, ink for words, cobalt only for the one thing
   you want people to click or notice.
   Font: Inter (Google Fonts or self-hosted), system fallback below.
   ========================================================================== */
:root {
  /* ---- Brand ---- */
  --fy-cobalt: #1F45FC;        /* THE accent. Links, primary buttons, logo */
  --fy-cobalt-hover: #1838E0;  /* Button hover / pressed */
  --fy-cobalt-tint: #EEF2FF;   /* Soft cobalt wash: selected rows, tags, chips */

  /* ---- Neutrals ---- */
  --fy-white: #FFFFFF;         /* The default background. Use it a lot */
  --fy-ink: #12141C;           /* Headlines and body text, dark sections */
  --fy-grey-50: #F5F6F8;       /* Light grey section / tile background */
  --fy-grey-100: #ECEEF2;      /* Hover fills, table stripes */
  --fy-grey-200: #DCDFE6;      /* Lines, borders, dividers */
  --fy-grey-400: #9BA1AE;      /* Placeholder text, disabled */
  --fy-grey-600: #5F6573;      /* Secondary text, captions */
  --fy-grey-800: #2C303B;      /* Raised surfaces on dark */

  /* ---- Status (app only, never in marketing) ---- */
  --fy-success: #12A150;
  --fy-success-tint: #E7F6EE;
  --fy-warning: #C27803;
  --fy-warning-tint: #FDF3E1;
  --fy-error: #D92D20;
  --fy-error-tint: #FDECEA;

  /* ---- Type ---- */
  --fy-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fy-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fy-text-hero: clamp(48px, 7vw, 96px);     /* 700, line 1.04, track -0.035em */
  --fy-text-h1: clamp(40px, 5vw, 64px);       /* 700, line 1.06, track -0.03em */
  --fy-text-h2: clamp(32px, 3.6vw, 48px);     /* 700, line 1.1,  track -0.025em */
  --fy-text-h3: 24px;                         /* 600, line 1.2,  track -0.015em */
  --fy-text-lead: clamp(20px, 2vw, 26px);     /* 500, line 1.3,  grey-600 */
  --fy-text-body: 17px;                       /* 400, line 1.5 */
  --fy-text-small: 14px;                      /* 400, line 1.45 */
  --fy-text-caption: 12px;                    /* 600, line 1.3, track 0.02em */

  --fy-weight-regular: 400;
  --fy-weight-medium: 500;
  --fy-weight-semibold: 600;
  --fy-weight-bold: 700;

  /* ---- Spacing (4 px base) ---- */
  --fy-space-1: 4px;
  --fy-space-2: 8px;
  --fy-space-3: 12px;
  --fy-space-4: 16px;
  --fy-space-5: 24px;
  --fy-space-6: 32px;
  --fy-space-7: 48px;
  --fy-space-8: 64px;
  --fy-space-9: 96px;
  --fy-space-10: 128px;
  --fy-section: clamp(96px, 11vw, 160px);     /* Space between website sections */

  /* ---- Corners ---- */
  --fy-radius-sm: 8px;     /* Inputs, small chips */
  --fy-radius-md: 12px;    /* Buttons in the app, menus */
  --fy-radius-lg: 20px;    /* Cards */
  --fy-radius-xl: 28px;    /* Big marketing tiles, screenshot frames */
  --fy-radius-pill: 980px; /* Marketing buttons (Apple-style pills) */

  /* ---- Shadows (soft, never dark or hard) ---- */
  --fy-shadow-sm: 0 1px 2px rgba(18, 20, 28, 0.06);
  --fy-shadow-md: 0 4px 16px rgba(18, 20, 28, 0.06), 0 1px 3px rgba(18, 20, 28, 0.05);
  --fy-shadow-lg: 0 24px 60px rgba(18, 20, 28, 0.10), 0 4px 12px rgba(18, 20, 28, 0.05);
  --fy-shadow-shot: 0 40px 100px -20px rgba(18, 20, 28, 0.22), 0 0 0 1px rgba(18, 20, 28, 0.06);

  /* ---- Motion ---- */
  --fy-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --fy-duration: 400ms;
}
/* kit:end */

/* Website tokens, built on the kit. White first. Ink for words. Cobalt only for the thing
   to click. Light mode only (Apple-style). Section themes (.ch-dark) re-point these. */
:root {
  color-scheme: light;

  /* Page */
  --bg: var(--fy-white);
  --bg-alt: var(--fy-grey-50);
  --tile-on-bg: var(--fy-grey-50);
  --tile-on-alt: var(--fy-white);
  --dark: var(--fy-ink);
  --dark-alt: #1d2029; /* AI band only (open decision 2, kept as is) */

  /* Text + lines */
  --ink: var(--fy-ink);
  --muted: var(--fy-grey-600);
  --line: var(--fy-grey-200);
  --link: var(--fy-cobalt);
  --btn2: var(--fy-ink); /* secondary pill: neutral, so cobalt stays the one primary button */
  --focus: var(--fy-cobalt);

  /* Screenshot frames + placeholders */
  --frame-bar: var(--fy-grey-50);
  --frame-dot: var(--fy-grey-200);
  --ph-a: var(--fy-grey-50);
  --ph-b: var(--fy-grey-100);
  --ph-fg: var(--fy-grey-600);
  --r-shot: 18px; /* product screenshots (kit: "18 px corners") */

  /* Navigation */
  --nav-bg: rgba(255, 255, 255, 0.82);
  --nav-fg: var(--fy-ink);
  --menu-bg: var(--fy-white);

  /* Forms */
  --field-bg: var(--fy-white);
  --field-border: var(--fy-grey-200);
  /* Form errors only. The kit keeps status colors in the app; a clear red for form errors is
     the one exception on the website (accessibility). */
  --error: var(--fy-error);

  /* Notched phones: keep content clear of the notch and the home bar */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Layout (phone values first; bigger screens below) */
  --w-text: 980px;
  --w-bento: 1120px;
  --w-wide: 1260px;
  --gutter: max(16px, var(--safe-l), var(--safe-r));
  /* Section spacing. Phones: 64px on purpose (mobile-first exception to the kit's 96-160px;
     96px on a 390px phone adds about two screens of scrolling per page). 735px+: the kit value. */
  --pad: 64px;
  --mcta-h: 72px;

  /* Motion (--fy-ease and --fy-duration come from the kit) */
  --ease-ui: cubic-bezier(0.4, 0, 0.6, 1);

  /* Section defaults */
  --sec-bg: var(--bg);
  --tile: var(--tile-on-bg);
}
@media (min-width: 735px) {
  :root {
    --gutter: max(6.25vw, var(--safe-l), var(--safe-r));
    --pad: var(--fy-section);
  }
}

/* ---------- Reset + base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 64px;
}
/* Tabbing into the sticky top bars must not scroll the page (the browser would think they sit
   "under" the scroll padding above). */
.gnav :is(a, button),
.lnav a {
  scroll-margin-top: -120px;
}
@media (max-width: 734px) {
  html {
    /* Focused fields and anchors stay clear of the sticky bottom bar */
    scroll-padding-bottom: calc(var(--mcta-h) + 16px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fy-font);
  font-optical-sizing: auto;
  font-size: var(--fy-text-body);
  line-height: 1.5;
  letter-spacing: -0.011em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main {
  overflow-x: clip;
  display: block;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  overflow-wrap: break-word;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: var(--link);
  text-decoration: none;
}
@media (hover: hover) {
  a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
}
button {
  font: inherit;
  color: inherit;
}
/* Our own :active styles below replace the grey tap flash on phones */
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
strong {
  font-weight: 600;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--fy-radius-pill);
  background: var(--fy-cobalt);
  color: #fff;
  font-size: 15px;
}
.skip-link:focus {
  top: 10px;
  text-decoration: none;
}

/* ---------- Layout helpers ---------- */
.w-text,
.w-bento,
.w-wide {
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
}
.w-text {
  max-width: var(--w-text);
}
.w-bento {
  max-width: var(--w-bento);
}
.w-wide {
  max-width: var(--w-wide);
}
.center {
  text-align: center;
}
.br-d {
  display: none;
}
@media (min-width: 735px) {
  .br-d {
    display: inline;
  }
}
/* Small helpers: .m-only (phones only), .d-only (hidden on phones), .nowrap */
.nowrap {
  white-space: nowrap;
}
@media (min-width: 735px) {
  .m-only {
    display: none !important;
  }
}
@media (max-width: 734px) {
  .d-only {
    display: none !important;
  }
}

/* ---------- Sections + chapters ---------- */
.section {
  background: var(--sec-bg);
  color: var(--ink);
  padding-block: var(--pad);
  position: relative;
}
.section.cont {
  padding-top: 0;
}
.section.tight {
  padding-block: 48px;
}
@media (min-width: 735px) {
  .section.tight {
    padding-block: clamp(64px, 8vw, 112px);
  }
}
.ch-white {
  --sec-bg: var(--bg);
  --tile: var(--tile-on-bg);
}
.ch-paper {
  --sec-bg: var(--bg-alt);
  --tile: var(--tile-on-alt);
}
.ch-dark {
  --sec-bg: var(--dark);
  --tile: var(--dark-alt);
  --ink: #f5f6f8;
  --muted: rgba(255, 255, 255, 0.66);
  --line: rgba(255, 255, 255, 0.14);
  --link: #6e8bff;
  --btn2: #ffffff;
  --focus: #6e8bff;
  --frame-bar: #1d2029;
  --frame-dot: #3a3f4b;
  --ph-a: #1d2029;
  --ph-b: #2c303b;
  --ph-fg: rgba(255, 255, 255, 0.66);
  --field-bg: #1d2029;
  --field-border: rgba(255, 255, 255, 0.22);
  --error: #ffa39b;
}
.ch-flag {
  --sec-bg: var(--fy-cobalt);
  --tile: rgba(255, 255, 255, 0.12);
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.9);
  --line: rgba(255, 255, 255, 0.3);
  --link: #ffffff;
  --btn2: #ffffff;
  --focus: #ffffff;
}

/* ---------- Type ---------- */
/* One class, one kit size: .h-hero = hero, .h-giant = h1, .h-section = h2, .card-title = h3 */
.eyebrow {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.2;
  font-weight: var(--fy-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--link);
  margin-bottom: var(--fy-space-3);
}
.h-hero {
  /* Phones keep 42px (mobile exception: the kit's 48px pushes short heroes to 3 lines at 390px).
     735px and up: the kit hero size. */
  font-size: 42px;
  line-height: 1.04;
  font-weight: var(--fy-weight-bold);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
@media (min-width: 735px) {
  .h-hero {
    font-size: var(--fy-text-hero);
  }
}
.h-giant {
  font-size: var(--fy-text-h1);
  line-height: 1.06;
  font-weight: var(--fy-weight-bold);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-section {
  font-size: var(--fy-text-h2);
  line-height: 1.1;
  font-weight: var(--fy-weight-bold);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.card-title {
  font-size: var(--fy-text-h3);
  line-height: 1.2;
  font-weight: var(--fy-weight-semibold);
  letter-spacing: -0.015em;
}
.lead {
  margin-top: 20px;
  font-size: var(--fy-text-lead);
  line-height: 1.3;
  font-weight: var(--fy-weight-medium);
  letter-spacing: -0.015em;
  color: var(--muted);
  text-wrap: pretty;
}
.lead strong {
  color: var(--ink);
  font-weight: 600;
}
.center .lead {
  max-width: 780px;
  margin-inline: auto;
}
.small {
  font-size: var(--fy-text-small);
  line-height: 1.45;
}
.caption {
  font-size: var(--fy-text-caption);
  line-height: 1.3;
  font-weight: var(--fy-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.muted {
  color: var(--muted);
}
.section-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head.left {
  max-width: 880px;
}
@media (max-width: 734px) {
  .small {
    font-size: 15px;
    line-height: 1.45;
  }
  .caption {
    font-size: 13px;
  }
  .section-head {
    margin-bottom: 28px;
  }
  /* Fewer lonely last words in short titles */
  .card-title,
  .cards h3,
  .step-copy .card-title {
    text-wrap: balance;
  }
}
@media (max-width: 374px) {
  /* 320px phones: big headlines step down a little so words don't break */
  .h-hero {
    font-size: clamp(34px, 11vw, 42px);
  }
  .h-giant {
    font-size: clamp(32px, 10.5vw, 40px);
  }
  .h-section {
    font-size: clamp(28px, 9.4vw, 32px);
  }
}
/* Links inside small print are underlined so they don't rely on color alone */
.small a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
/* Touch screens: small-print links get a 44px tall tap area (same look: the padding is
   cancelled out by the negative margin) and don't break across lines */
@media (max-width: 734px), (pointer: coarse) {
  .small a {
    display: inline-block;
    white-space: nowrap;
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* ---------- Buttons + links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 13px 24px;
  border-radius: var(--fy-radius-pill);
  border: 1px solid transparent;
  /* Kit pill: 15px semibold. Phones keep 17px (see the phone block below). */
  font-size: 15px;
  line-height: 1.2;
  font-weight: var(--fy-weight-semibold);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color var(--fy-duration) var(--fy-ease), color var(--fy-duration) var(--fy-ease),
    border-color var(--fy-duration) var(--fy-ease), transform 0.12s var(--ease-ui);
  white-space: nowrap;
}
.btn-primary {
  background: var(--fy-cobalt);
  color: #fff;
}
/* Neutral second pill (only used where a text link won't do, like "Log in" in the menu):
   one cobalt button per screen. */
.btn-secondary {
  background: transparent;
  color: var(--btn2);
  border-color: var(--fy-grey-200);
}
.ch-dark .btn-secondary,
.gnav[data-tone="dark"] .btn-secondary {
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-white {
  background: #fff;
  color: var(--fy-cobalt);
}
@media (hover: hover) {
  .btn:hover {
    text-decoration: none;
  }
  .btn-primary:hover {
    background: var(--fy-cobalt-hover);
  }
  .btn-secondary:hover {
    background: var(--fy-grey-100);
  }
  .ch-dark .btn-secondary:hover,
  .gnav[data-tone="dark"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .btn-white:hover {
    background: var(--fy-grey-100);
  }
}
/* Button rows: one cobalt pill plus a text link (.more), the kit's website pattern */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 32px;
}
.center .btn-row {
  justify-content: center;
}
.more {
  color: var(--link);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: var(--fy-weight-medium);
  white-space: nowrap;
}
.more::after {
  content: "\00a0\203A";
}
/* Phones: thumb-sized buttons, stacked full width (primary first) */
@media (max-width: 734px) {
  .btn {
    min-height: 48px;
    font-size: 17px; /* phones: bigger thumb buttons (mobile exception to the kit's 15px) */
  }
  .btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 440px;
  }
  .center .btn-row {
    margin-inline: auto;
  }
  .btn-row .btn {
    width: 100%;
    min-height: 52px;
  }
  /* The text link under the full-width pill: centered, with a full-width 48px tap area */
  .btn-row .more {
    justify-content: center;
    min-height: 48px;
  }
}
/* Touch screens: text links get a 44px tall hit area */
@media (max-width: 734px), (pointer: coarse) {
  .more,
  .tile .more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* Tap feedback (phones have no hover) */
.btn:active,
.btn-pill-sm:active {
  transform: scale(0.98);
}
.btn-primary:active,
.btn-pill-sm:active {
  background: var(--fy-cobalt-hover);
}
.btn-secondary:active {
  background: var(--fy-grey-100);
}
.ch-dark .btn-secondary:active,
.gnav[data-tone="dark"] .btn-secondary:active {
  background: rgba(255, 255, 255, 0.14);
}
.btn-white:active {
  background: var(--fy-grey-100);
}
.more:active,
.footer a:active,
.menu-panel li a:active,
.lnav-links a:active,
.gnav-links a:active,
.gnav-actions .login:active,
.lnav-title:active {
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .btn-pill-sm:active {
    transform: none;
  }
}
.more-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 24px;
}
.center .more-row,
.more-row.center {
  justify-content: center;
}

/* ---------- Global navigation ---------- */
.gnav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 52px;
  color: var(--nav-fg);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease-ui), color 0.4s var(--ease-ui), border-color 0.4s var(--ease-ui);
}
.gnav.is-stuck {
  border-bottom-color: var(--line);
}
.gnav[data-tone="dark"] {
  --nav-bg: rgba(18, 20, 28, 0.78);
  --nav-fg: #f5f6f8;
  --line: rgba(255, 255, 255, 0.14);
  /* Kit: on dark backgrounds, links and the logo are white */
  --focus: #fff;
  --link: #fff;
  --btn2: #fff;
}
.gnav--static {
  position: relative;
}
/* Features page (top bar + local bar): one "Request access" pill up top, in the local bar,
   Apple-style. Phones and small tablets are unchanged. */
@media (min-width: 834px) {
  .gnav--static .gnav-actions .btn-pill-sm {
    display: none;
  }
}
.gnav-inner {
  height: 100%;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--w-bento);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.gnav-logo {
  display: flex;
  align-items: center;
  flex: none;
  padding: 12px 0;
}
.gnav-logo img {
  height: 20px;
  width: auto;
}
.gnav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 14px;
}
.gnav-links a {
  color: inherit;
  opacity: 0.82;
  transition: opacity 0.24s var(--ease-ui);
}
.gnav-links a[aria-current="page"] {
  opacity: 1;
  text-decoration: none;
  font-weight: 600;
}
.gnav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}
.gnav-actions .login {
  color: inherit;
  opacity: 0.82;
}
.btn-pill-sm {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 14px;
  border-radius: var(--fy-radius-pill);
  background: var(--fy-cobalt);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.24s var(--ease-ui), color 0.24s var(--ease-ui), box-shadow 0.24s var(--ease-ui),
    transform 0.12s var(--ease-ui);
}
/* One cobalt button per screen: while the page's own "Request access" button is on screen
   (and on the Request access page itself), the small top-bar pill turns neutral. It fills in
   cobalt once that button scrolls away. site.js sets html.cta-in-view (the head script sets it
   before the first paint, so nothing flashes). Same size either way, so nothing moves. */
html.js.cta-in-view .gnav-actions .btn-pill-sm,
html.js.cta-in-view .lnav .btn-pill-sm {
  background: transparent;
  color: var(--nav-fg);
  box-shadow: inset 0 0 0 1px var(--fy-grey-200);
}
html.js.cta-in-view .gnav[data-tone="dark"] .gnav-actions .btn-pill-sm {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
@media (hover: hover) {
  html.js.cta-in-view .gnav-actions .btn-pill-sm:hover,
  html.js.cta-in-view .lnav .btn-pill-sm:hover {
    background: var(--fy-grey-100);
  }
  html.js.cta-in-view .gnav[data-tone="dark"] .gnav-actions .btn-pill-sm:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}
@media (hover: hover) {
  .gnav-links a:hover,
  .gnav-actions .login:hover {
    opacity: 1;
    text-decoration: none;
  }
  .btn-pill-sm:hover {
    background: var(--fy-cobalt-hover);
    text-decoration: none;
  }
}
/* Tablets with touch: 44px hit areas on the small desktop nav links */
@media (pointer: coarse) and (min-width: 834px) {
  .gnav-links a,
  .gnav-actions .login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* The small pill (top bar, features chip bar) gets a 44px tall tap area on touch tablets */
@media (pointer: coarse) and (min-width: 735px) {
  .btn-pill-sm {
    position: relative;
  }
  .btn-pill-sm::after {
    content: "";
    position: absolute;
    inset: -7px -2px;
  }
}
.menu-btn {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.menu-btn span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease-ui), top 0.3s var(--ease-ui);
}
.menu-btn span:nth-child(1) {
  top: 18px;
}
.menu-btn span:nth-child(2) {
  top: 25px;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) {
  top: 21.5px;
  transform: rotate(45deg);
}
.menu-btn[aria-expanded="true"] span:nth-child(2) {
  top: 21.5px;
  transform: rotate(-45deg);
}
.menu-panel {
  display: none;
}

/* Logo swapping (cobalt logo on light, pale logo on dark) */
.logo-on-dark {
  display: none !important;
}
.gnav[data-tone="dark"] .logo-on-light {
  display: none !important;
}
.gnav[data-tone="dark"] .logo-on-dark {
  display: block !important;
}

/* ---------- Nav phone mode: hamburger + full-screen sheet menu ----------
   Also used by landscape phones (short + touch). JS (site.js section 1) adds the
   focus trap, inert background, Esc/Back/link-tap closing and the scroll lock class. */
@media (max-width: 833px), (pointer: coarse) and (max-height: 500px) {
  .gnav-links,
  .gnav-actions {
    display: none;
  }
  .menu-btn {
    display: block;
    width: 48px;
    height: 48px;
    margin-right: -12px;
  }
  .menu-btn span {
    left: 15px;
    right: 15px;
  }
  .menu-btn span:nth-child(1) {
    top: 20px;
  }
  .menu-btn span:nth-child(2) {
    top: 27px;
  }
  .menu-btn[aria-expanded="true"] span:nth-child(1),
  .menu-btn[aria-expanded="true"] span:nth-child(2) {
    top: 23.5px;
  }
  .gnav[data-tone="dark"] {
    --menu-bg: #12141c;
  }
  .gnav[data-tone="dark"] .menu-panel {
    --ink: #f5f6f8;
  }
  /* While open, the bar is solid and drops its blur (a blur would trap the fixed sheet inside it) */
  html.menu-open .gnav {
    background: var(--menu-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--line);
  }
  .menu-panel {
    position: fixed;
    z-index: 1;
    top: 52px;
    left: 0;
    right: 0;
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--menu-bg);
    color: var(--ink);
    padding: 20px max(var(--gutter), var(--safe-r)) calc(40px + var(--safe-b)) max(var(--gutter), var(--safe-l));
  }
  .menu-panel.is-open {
    display: block;
  }
  .menu-panel ul {
    display: grid;
    gap: 4px;
  }
  .menu-panel li a {
    display: block;
    padding: 8px 0;
    font-size: 28px;
    line-height: 1.14;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .menu-panel li a[aria-current="page"] {
    color: var(--ink); /* the page you are on is not something to click: no cobalt */
  }
  .menu-panel .menu-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }
  .menu-panel .menu-cta .btn {
    width: 100%;
    min-height: 52px;
  }
  /* Scroll lock: only the root. Keeps the page exactly where it was. */
  html.menu-open {
    overflow: hidden;
  }
  /* Features page: the top bar stays (sticky) and slides away on scroll-down */
  .gnav--static {
    position: sticky;
  }
  .gnav--static ~ .lnav {
    top: 52px;
  }
  .gnav,
  .gnav--static ~ .lnav {
    transition: background-color 0.4s var(--ease-ui), color 0.4s var(--ease-ui), border-color 0.4s var(--ease-ui),
      transform 0.3s var(--ease-ui);
  }
  .gnav.is-hidden {
    transform: translateY(-100%);
  }
  .gnav.is-hidden ~ .lnav {
    transform: translateY(-52px);
  }
  html:has(.lnav) {
    scroll-padding-top: 112px;
  }
  /* No JavaScript: no hamburger; the three page links scroll sideways in the bar */
  html:not(.js) .gnav-links {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 16px;
    font-size: 15px;
    margin-left: auto;
    white-space: nowrap;
  }
}
/* Landscape phones: two columns of links so the buttons fit on screen */
@media (max-width: 833px) and (max-height: 500px), (pointer: coarse) and (max-height: 500px) {
  .menu-panel ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    gap: 0 24px;
  }
  .menu-panel li a {
    font-size: 22px;
    padding: 10px 0;
  }
  .menu-panel .menu-cta {
    flex-direction: row;
    margin-top: 16px;
  }
  .menu-panel .menu-cta .btn {
    flex: 1 1 0;
    width: auto;
    min-height: 48px;
  }
}
html:not(.js) .menu-btn {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .gnav,
  .lnav {
    transition: none !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .menu-panel.is-open li {
    animation: menu-in 0.4s var(--fy-ease) both;
    animation-delay: calc(var(--i, 0) * 30ms + 40ms);
  }
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Local navigation (sticky subnav on long pages) ---------- */
.lnav {
  position: sticky;
  top: 0;
  z-index: 45;
  height: 52px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--line);
  color: var(--nav-fg);
}
.lnav-inner {
  height: 100%;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--w-bento);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.lnav-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: inherit;
}
.lnav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 13px;
}
.lnav-links a {
  color: inherit;
  opacity: 0.78;
  padding: 6px 0;
  position: relative;
}
@media (hover: hover) {
  .lnav-title:hover {
    text-decoration: none;
  }
  .lnav-links a:hover {
    opacity: 1;
    text-decoration: none;
  }
}
.lnav-links a.is-active {
  opacity: 1;
  color: var(--ink);
  font-weight: var(--fy-weight-semibold);
}
.lnav-toggle {
  display: none;
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  margin-left: auto;
  cursor: pointer;
  color: inherit;
}
.lnav-toggle svg {
  margin: auto;
  transition: transform 0.3s var(--ease-ui);
}
.lnav-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
/* Phones + tablets: the section links become one sideways-scrolling chip row.
   JS (site.js section 7) highlights the chip for the section on screen and keeps it centered. */
@media (max-width: 1067px) {
  .lnav-title,
  .lnav-toggle {
    display: none;
  }
  .lnav-links {
    display: flex;
    position: static;
    flex: 1 1 auto;
    align-self: stretch;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    font-size: 15px;
  }
  .lnav-links::-webkit-scrollbar {
    display: none;
  }
  .lnav-links a {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--fy-radius-pill);
    justify-content: center;
    min-width: 44px; /* even the short "AI" chip is a full 44px wide */
    background: var(--fy-grey-100);
    white-space: nowrap;
    scroll-snap-align: center;
    opacity: 1;
  }
  .lnav-links a::after {
    /* 44px tall tap area */
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  /* Kit: cobalt tint for selected chips (solid cobalt stays for the one button to tap) */
  .lnav-links a.is-active {
    background: var(--fy-cobalt-tint);
    color: var(--fy-cobalt);
    font-weight: var(--fy-weight-semibold);
  }
}
@media (max-width: 734px) {
  .lnav {
    height: 48px;
  }
  .lnav .btn-pill-sm {
    display: none; /* the sticky bottom bar replaces it */
  }
  .lnav-links {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: var(--pad);
}
.hero .lead {
  margin-top: var(--fy-space-5); /* a little more air under the big kit hero headline */
}
.hero-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}
.hero-shot {
  margin-top: clamp(56px, 7vw, 96px);
  transform-origin: 50% 0;
}
.page-hero {
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
@media (max-width: 734px) {
  .page-hero {
    padding-top: 36px;
    padding-bottom: 48px;
  }
}
/* Short screens (phones turned sideways, 844x390): the hero buttons stay in the first screen */
@media (min-width: 735px) and (max-height: 500px) {
  .page-hero {
    padding-top: 28px;
  }
  .page-hero :is(.h-giant, .h-hero) {
    font-size: min(6.5vw, 12.5vh);
  }
  .page-hero .lead {
    margin-top: 14px;
  }
  .page-hero .btn-row {
    margin-top: 22px;
  }
}
/* Fill mode "backwards" (not "both"): once the animation ends the hero leaves its GPU layers.
   With "both" Chrome kept them forever and cut big screenshot shadows into hard lines on phones.
   The keyframe "to" equals the natural style, so nothing visible changes. */
@media (prefers-reduced-motion: no-preference) {
  .rise > * {
    animation: rise 0.9s var(--fy-ease) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  .rise > :nth-child(2) {
    --i: 1;
  }
  .rise > :nth-child(3) {
    --i: 2;
  }
  .rise > :nth-child(4) {
    --i: 3;
  }
  .rise > :nth-child(5) {
    --i: 4;
  }
  .hero-shot.rise-late {
    animation: rise 1.1s var(--fy-ease) 0.35s backwards;
  }
}
/* Phones: a quick, small lift. Text never fades, so the first screen is readable at once.
   (Same keyframes, different variables: rotating the phone never replays the animation.) */
@media (prefers-reduced-motion: no-preference) and (max-width: 734px) {
  .rise > * {
    --rise-from-o: 1;
    --rise-from-y: 12px;
    animation-duration: 0.4s;
    animation-delay: 0s;
  }
  .hero-shot.rise-late {
    animation: none;
  }
}
@keyframes rise {
  from {
    opacity: var(--rise-from-o, 0);
    transform: translateY(var(--rise-from-y, 28px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Screenshot frames + placeholders ---------- */
.frame {
  border-radius: var(--r-shot);
  overflow: hidden;
  background: var(--frame-bar);
  box-shadow: var(--fy-shadow-shot); /* its 0 0 0 1px ring is the edge: no separate border */
}
.ch-dark .frame {
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5);
}
.frame-bar {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  position: relative;
}
.frame-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--frame-dot);
}
.frame-bar span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 734px) {
  /* Phone crops aren't full windows, so no fake title bar (and no 9px label) */
  .frame-bar {
    display: none;
  }
}
@media (pointer: coarse) {
  /* Tablets and phones turned sideways: nothing under 13px */
  .frame-bar span {
    font-size: 13px;
  }
}
.shot {
  position: relative;
  background: var(--ph-a); /* solid: the kit says no gradients behind shots */
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* <picture> wrapper for art-directed screenshots (phone crop + desktop file) */
.shot picture {
  display: block;
}
.shot.is-missing {
  aspect-ratio: var(--ar, 16 / 10);
}
.shot.is-missing img {
  display: none;
}
.shot.is-missing::after {
  content: attr(data-label) "\A" "Screenshot coming soon";
  white-space: pre-line;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 16px;
  font-size: clamp(13px, 1.4vw, 17px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--ph-fg);
}
/* Phone frame */
/* Kit phone: thin ink frame + the soft shot shadow */
.phone {
  width: 100%;
  max-width: 300px;
  border-radius: 42px;
  padding: 9px;
  background: var(--fy-ink);
  box-shadow: var(--fy-shadow-shot);
}
.ch-dark .phone {
  background: #2c303b;
}
.phone .shot {
  border-radius: 34px;
  overflow: hidden;
  --ar: 9 / 19.5;
}
@media (max-width: 734px) {
  .phone {
    border-radius: 30px;
    padding: 7px;
  }
  .phone .shot {
    border-radius: 24px;
  }
}

/* Screenshot + phone side by side */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25%);
  gap: clamp(16px, 3vw, 40px);
  align-items: end;
}
@media (max-width: 734px) {
  /* On phones, show just the phone screenshot, big and centered. */
  .duo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .duo > .frame {
    display: none;
  }
  .duo .phone {
    max-width: 280px;
  }
  /* .phone-peek: just the top of the phone screen (use with a 4:5 phone crop) */
  .phone.phone-peek {
    max-width: 300px;
    padding-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .phone.phone-peek .shot {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* ---------- Tiles + bento ---------- */
.tiles {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  margin-top: 24px;
}
.tiles.cols-3 {
  --cols: 3;
}
.tiles.cols-2 {
  --cols: 2;
}
/* Corners (kit): 20px cards and small tiles, 28px big bento tiles */
.tile {
  background: var(--tile);
  border-radius: var(--fy-radius-lg);
  padding: 28px 28px 30px;
}
.tile p {
  color: var(--muted);
  font-size: var(--fy-text-body);
  line-height: 1.5;
}
.tile p strong {
  color: var(--ink);
}
.tile .card-title {
  margin-bottom: 10px;
}
.tile .more {
  display: inline-block;
  margin-top: 14px;
  font-size: 17px;
}
/* Touch screens: the link text sits in the middle of its 44px tap area
   (this has to come after the rule above, which would otherwise win) */
@media (max-width: 734px), (pointer: coarse) {
  .tile .more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
  }
}
@media (max-width: 1067px) {
  .tiles,
  .tiles.cols-3 {
    --cols: 2;
  }
}
@media (max-width: 734px) {
  .tiles,
  .tiles.cols-3,
  .tiles.cols-2 {
    --cols: 1;
    gap: 12px;
    margin-top: 16px;
  }
  .tile {
    padding: 24px 22px 26px;
  }
}

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
.bento > *,
.bento > .swipe > * {
  grid-column: span 2;
}
.bento .b-6 {
  grid-column: span 6;
}
.bento .b-4 {
  grid-column: span 4;
}
.bento .b-3 {
  grid-column: span 3;
}
.bento .tile {
  border-radius: var(--fy-radius-xl);
  padding: clamp(28px, 3.4vw, 44px);
}
.bento .tile .card-title + p {
  margin-top: 0;
}
@media (max-width: 1067px) {
  .bento > *,
  .bento > .swipe > *,
  .bento .b-3 {
    grid-column: span 3;
  }
  .bento .b-4,
  .bento .b-6 {
    grid-column: span 6;
  }
}
/* Tablets: no lone half-width tile at the end of a run */
@media (min-width: 735px) and (max-width: 1067px) {
  .bento {
    grid-auto-flow: row dense;
  }
  .bento > .swipe > :last-child:nth-child(odd) {
    grid-column: span 6;
  }
}
@media (max-width: 734px) {
  .bento {
    gap: 12px;
  }
  .bento > *,
  .bento .b-3,
  .bento .b-4 {
    grid-column: span 6;
  }
  .bento .tile {
    padding: 24px 22px 26px;
  }
}
/* A .swipe wrapper inside a bento disappears on tablet/desktop, so the grid looks the same */
@media (min-width: 735px) {
  .bento > .swipe {
    display: contents;
  }
}

/* Tile with a screenshot that bleeds off the bottom-right edge */
.tile-media {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
.tile-media .tm-copy {
  padding-right: clamp(28px, 3.4vw, 44px);
  max-width: 640px;
}
.tile-media .tm-shot {
  margin-top: clamp(24px, 3vw, 40px);
  border-top-left-radius: var(--fy-radius-md);
  overflow: hidden;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.tile-media.wide .tm-shot {
  width: 100%;
}
.tile-media.zoom .tm-shot {
  width: 150%;
}
@media (max-width: 734px) {
  .tile-media .tm-shot,
  .tile-media.zoom .tm-shot {
    width: 100%;
  }
}

/* ---------- Swipe rows (.swipe), phones only ----------
   <ul class="tiles swipe" aria-label="..."> or, inside a bento,
   <div class="swipe" role="group" aria-label="..."> around the small tiles.
   Next card peeks ~15%. data-dots adds position dots. JS: tabindex + arrow keys. */
@media (max-width: 734px) {
  .swipe {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    scroll-padding-inline: var(--gutter);
  }
  .swipe::-webkit-scrollbar {
    display: none;
  }
  /* .cards and .tiles set display:grid; a swipe row is always a flex row on phones */
  .swipe.cards,
  .swipe.tiles {
    display: flex;
    gap: 12px;
  }
  .swipe > * {
    flex: 0 0 85%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .swipe:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: 0;
  }
  .bento > .swipe {
    grid-column: 1 / -1;
  }
}
.swipe-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.swipe-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.2;
  transition: opacity 0.2s var(--ease-ui), background-color 0.2s var(--ease-ui);
}
.swipe-dots i.is-on {
  background: var(--ink);
  opacity: 1;
}
.bento > .swipe-dots {
  grid-column: 1 / -1;
  margin-top: 2px;
}
@media (min-width: 735px) {
  .swipe-dots {
    display: none;
  }
}

/* ---------- Home: "Get the highlights" carousel ---------- */
.hl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.hl-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--w-wide)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--w-wide)) / 2));
  padding-bottom: 4px;
}
.hl-track::-webkit-scrollbar {
  display: none;
}
.hl-card {
  flex: 0 0 min(84vw, 940px);
  height: clamp(460px, 46vw, 600px);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: var(--fy-radius-xl);
  background: var(--tile);
  padding: clamp(28px, 3.4vw, 44px);
}
.hl-card .card-title {
  max-width: 560px;
}
.hl-card p {
  margin-top: 8px;
  max-width: 560px;
  color: var(--muted);
}
.hl-media {
  position: absolute;
  left: clamp(28px, 3.4vw, 44px);
  right: 0;
  bottom: 0;
  top: clamp(190px, 15vw, 196px);
  border-top-left-radius: var(--fy-radius-md);
  overflow: hidden;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.hl-media .shot,
.hl-media .shot picture {
  height: 100%;
}
.hl-media .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.hl-media .shot.is-missing {
  aspect-ratio: auto;
}
.hl-controls {
  display: flex;
  gap: 12px;
  flex: none;
}
.hl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--tile);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity 0.24s var(--ease-ui), background-color 0.24s var(--ease-ui);
}
@media (hover: hover) {
  .hl-btn:hover {
    background: color-mix(in srgb, var(--tile) 85%, var(--ink));
  }
}
.hl-btn:active {
  background: color-mix(in srgb, var(--tile) 75%, var(--ink));
}
.hl-btn:disabled {
  opacity: 0.38;
  cursor: default;
}
@media (max-width: 734px) {
  /* Phones: text on top, a square screenshot flush to the right + bottom edges */
  .hl-track {
    gap: 12px;
  }
  .hl-card {
    flex-basis: 80vw;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .hl-card p {
    margin-bottom: 24px;
  }
  .hl-media {
    position: relative;
    inset: auto;
    margin: auto calc(-1 * clamp(28px, 3.4vw, 44px)) calc(-1 * clamp(28px, 3.4vw, 44px)) 0;
    aspect-ratio: 1 / 1;
  }
  .hl-controls {
    display: none;
  }
}

/* ---------- All-in-one grid ---------- */
.allin {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.allin li {
  background: var(--tile);
  border-radius: var(--fy-radius-lg);
  padding: 28px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.allin .k {
  font-size: var(--fy-text-h3);
  line-height: 1.2;
  font-weight: var(--fy-weight-semibold);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.allin p {
  color: var(--muted);
}
@media (max-width: 1067px) {
  .allin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 734px) {
  .allin {
    gap: 12px;
  }
  .allin li {
    min-height: 0;
    padding: 22px;
    gap: 8px;
    justify-content: flex-start;
  }
}

/* ---------- Niche chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 900px;
  margin-inline: auto;
}
.chips li {
  padding: 12px 22px;
  border-radius: var(--fy-radius-pill);
  background: var(--tile);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
@media (max-width: 734px) {
  .chips {
    gap: 8px;
  }
  .chips li {
    padding: 9px 16px;
  }
}

/* ---------- Agencies: step rows ---------- */
.steps {
  display: grid;
  gap: clamp(72px, 9vw, 128px);
}
.step {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.step:nth-child(even) .step-copy {
  order: 2;
}
.step-num {
  font-size: 17px;
  font-weight: 600;
  color: var(--link);
  margin-bottom: 12px;
}
.step-copy .card-title {
  font-size: var(--fy-text-h2);
  line-height: 1.1;
  font-weight: var(--fy-weight-bold);
  letter-spacing: -0.025em;
}
.step-copy p {
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 19px);
}
.step-copy p strong {
  color: var(--ink);
}
.step-copy ul {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  color: var(--muted);
}
.step-copy li {
  padding-left: 22px;
  position: relative;
}
.step-copy li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fy-grey-400); /* decorative: grey, not cobalt */
}
.ch-dark .step-copy li::before {
  background: rgba(255, 255, 255, 0.66);
}
@media (max-width: 834px) {
  .step {
    grid-template-columns: minmax(0, 1fr);
  }
  .step:nth-child(even) .step-copy {
    order: 0;
  }
}

/* ---------- Phone accordion (details.acc-m) ----------
   <details class="acc-m" open><summary>What's included</summary> ... </details>
   Phones: a 48px row with a chevron (JS closes it on load). Desktop: always open, no row. */
.acc-m > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-top: 12px;
  font-weight: 600;
  color: var(--link);
  list-style: none;
  cursor: pointer;
  border-top: 1px solid var(--line);
}
.acc-m:not([open]) > summary {
  border-bottom: 1px solid var(--line);
}
.acc-m > summary::-webkit-details-marker {
  display: none;
}
.acc-m > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease-ui);
}
.acc-m[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.acc-m > summary:active {
  opacity: 0.6;
}
@media (min-width: 735px) {
  .acc-m > summary {
    display: none;
  }
}

/* ---------- Scenario cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.cards li {
  background: var(--tile);
  border-radius: var(--fy-radius-lg);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
}
.cards .niche {
  font-size: 14px;
  font-weight: var(--fy-weight-semibold);
  color: var(--muted); /* a label, not a link: grey */
  margin-bottom: var(--fy-space-3);
}
.cards h3 {
  font-size: var(--fy-text-h3);
  line-height: 1.2;
  font-weight: var(--fy-weight-semibold);
  letter-spacing: -0.015em;
}
.cards p {
  margin-top: 12px;
  color: var(--muted);
}
@media (max-width: 1067px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 734px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* ---------- Features page: section heads ---------- */
.feat-head {
  margin-bottom: clamp(36px, 4.5vw, 56px);
  max-width: 900px;
}
.feat-head .lead {
  max-width: 720px;
}
@media (max-width: 734px) {
  .feat-head {
    margin-bottom: 28px;
  }
}

/* ---------- Security page ---------- */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 28px;
}
.note {
  margin-top: 32px;
  font-size: 14px;
  color: var(--muted);
  max-width: 720px;
}
@media (max-width: 734px) {
  .note {
    font-size: 15px;
    line-height: 1.45;
  }
}

/* ---------- Request access form ---------- */
.form-wrap {
  max-width: 680px;
  margin-inline: auto;
}
.form-card {
  background: var(--tile);
  border-radius: var(--fy-radius-xl);
  padding: clamp(24px, 5vw, 56px);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 20px;
}
.form-grid .full {
  grid-column: 1 / -1;
}
@media (max-width: 734px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.field label,
.field .label {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.field .opt {
  font-weight: 400;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--fy-radius-sm);
  padding: 13px 16px;
  min-height: 52px;
  transition: border-color 0.2s var(--ease-ui), box-shadow 0.2s var(--ease-ui);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F6573' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--fy-cobalt);
  box-shadow: 0 0 0 4px rgba(31, 69, 252, 0.15);
}
/* Checkboxes keep the same clear keyboard focus ring as links and buttons */
.check input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: none;
}
.field [aria-invalid="true"] {
  border-color: var(--error);
}
.field [aria-invalid="true"]:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.15);
}
.field .err {
  margin-top: 6px;
  font-size: 14px;
  color: var(--error);
}
.field .err:empty {
  display: none;
}
/* Checkbox row: the whole row (box + label) is one big tap target */
.check {
  position: relative;
  display: flex;
  gap: 0;
  align-items: flex-start;
  min-height: 48px;
}
/* A tap anywhere on the row (even above or below the box) ticks it */
.check label::before {
  content: "";
  position: absolute;
  inset: 0;
}
.check input {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 12px 0 0;
  flex: none;
  accent-color: var(--fy-cobalt);
  -webkit-appearance: auto;
  appearance: auto;
  padding: 0;
  cursor: pointer;
}
.check label {
  flex: 1;
  padding: 12px 0 12px 12px;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  color: var(--ink);
  cursor: pointer;
}
.hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.form-actions .small {
  color: var(--muted);
}
@media (max-width: 734px) {
  .field label,
  .field .label,
  .check label {
    font-size: 16px;
  }
  .field .err {
    font-size: 15px;
  }
  .form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .form-actions .btn {
    width: 100%;
    min-height: 52px;
    font-weight: 600;
  }
  .form-actions .small {
    text-align: center;
  }
  .form-success p {
    text-wrap: pretty;
  }
}
.form-success {
  text-align: center;
  padding: clamp(24px, 4vw, 40px) 0;
}
.form-success .more {
  padding-block: 10px;
}
.form-success .tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fy-cobalt);
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
}
.form-success p {
  margin-top: 14px;
  color: var(--muted);
}
.form-success:focus {
  outline: none;
}

/* ---------- 404 ---------- */
.nf {
  min-height: 62vh;
  min-height: 62svh;
  display: grid;
  align-content: center;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.43;
  padding: 64px 0 36px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer-brand img {
  height: 22px;
  width: auto;
}
.footer-brand p {
  margin-top: 16px;
  max-width: 300px;
}
.footer h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.footer li + li {
  margin-top: 8px;
}
.footer a {
  color: var(--muted);
}
@media (hover: hover) {
  .footer a:hover {
    color: var(--ink);
  }
}
.footer-bottom {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
}
/* Phones and every touch screen (tablets, phones turned sideways): 44px tall links */
@media (max-width: 734px), (pointer: coarse) {
  .footer h2 {
    margin-bottom: 4px;
  }
  .footer li + li {
    margin-top: 0;
  }
  .footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px; /* short ones like "Terms" too */
  }
  .footer-brand a {
    display: inline-block;
    padding-block: 11px;
  }
  .footer-brand p {
    margin-top: 6px;
  }
}
@media (max-width: 734px) {
  /* 15-16px text */
  .footer {
    font-size: 15px;
    padding-bottom: calc(36px + var(--safe-b));
  }
  .footer li a {
    font-size: 16px;
  }
}
@media (max-width: 834px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Sticky bottom "Request access" bar (.mcta, phones only) ----------
   Lives in the footer partial. JS shows it once the hero buttons ([data-cta]) scroll away,
   and hides it over any [data-cta] area, the footer, the open menu and while typing.
   Off on /request-access/ and on pages with <body data-mcta="off">. */
.mcta {
  display: none;
}
@media (max-width: 734px) {
  .mcta:not([hidden]) {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px max(16px, var(--safe-r)) calc(10px + var(--safe-b)) max(16px, var(--safe-l));
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    border-top: 1px solid var(--line);
    transform: translateY(calc(100% + 1px));
    visibility: hidden;
    transition: transform 0.3s var(--ease-ui), visibility 0s linear 0.3s;
  }
  .mcta.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.3s var(--ease-ui);
  }
  .mcta .btn {
    width: 100%;
    min-height: 52px;
    font-weight: 600;
  }
}
@media (max-width: 734px) and (prefers-reduced-motion: reduce) {
  .mcta:not([hidden]),
  .mcta.is-shown {
    transform: none;
    transition: none;
  }
}

/* ---------- Scroll reveals ----------
   Content is visible by default. site.js adds .reveal-ready to <html> only after it has
   marked everything already on screen as .is-in, so nothing on the first screen ever hides,
   and nothing hides at all if JS is slow, off, or reduced motion is on. */
html.reveal-ready .reveal {
  transition: opacity 0.8s var(--fy-ease), transform 0.8s var(--fy-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.reveal-ready .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(32px);
}
@media (max-width: 734px) {
  /* Phones: smaller, quicker, no stagger */
  html.reveal-ready .reveal {
    transition-duration: 0.45s;
    transition-delay: 0s;
  }
  html.reveal-ready .reveal:not(.is-in) {
    transform: translateY(12px);
  }
  /* Never hide screenshots or cards that sit off to the side in a swipe row */
  html.reveal-ready :is(figure, .duo, .frame, .swipe > *, .swipe .reveal).reveal:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .reveal,
  html.reveal-ready .reveal:not(.is-in) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Print ---------- */
@media print {
  .gnav,
  .lnav,
  .menu-panel,
  .hl-controls,
  .mcta,
  .swipe-dots {
    display: none !important;
  }
  html.reveal-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .acc-m > summary {
    display: none;
  }
}