/* =========================================================
   readywhen — marketing site styles
   Order:
     1. @font-face   (custom typography)
     2. :root        (design tokens)
     3. base         (reset, body, type defaults)
     4. components   (buttons, cards, nav)
     5. sections     (per-section layouts, top to bottom)
   ========================================================= */

/* ---------- @font-face ---------- */
@font-face {
  font-family: 'Season Sans';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../public/fonts/SeasonSans-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Season Mix';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../public/fonts/SeasonMix-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Season Mix';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../public/fonts/SeasonMix-MediumItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../public/fonts/Geist-Variable.woff2') format('woff2'),
       url('../public/fonts/Geist-Variable.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../public/fonts/GeistMono-Variable.woff2') format('woff2'),
       url('../public/fonts/GeistMono-Variable.ttf') format('truetype-variations');
}

/* ---------- Design tokens ---------- */
:root {
  --bg-dark: #232c27;
  --bg-lift-dark: #28332d;
  --bg-depth-dark: #191f1c;
  --bg-light: #f3f7f3;
  --bg-depth-light: #eff4ef;
  --glass-light: rgba(248, 250, 248, 0.8);
  --glass-dark: rgba(243, 247, 243, 0.08);

  --text-strong-light: #f3f7f3;
  --text-strong-on-dark: rgba(243, 247, 243, 0.88);
  --text-medium-on-dark: rgba(243, 247, 243, 0.64);
  --text-strong-dark: #232c27;
  --text-strong-on-light: rgba(35, 44, 39, 0.88);
  --text-medium-on-light: rgba(35, 44, 39, 0.64);
  --text-faint-on-light: rgba(35, 44, 39, 0.3);

  --accent: #acffb6;
  --accent-darker: #329a3f;
  --error: #c9372d;

  --border-on-dark: rgba(243, 247, 243, 0.16);
  --border-on-light: rgba(35, 44, 39, 0.16);
  --button-border-light: rgba(35, 44, 39, 0.08);
  --button-border-dark: rgba(243, 247, 243, 0.08);
  --inset-hi: rgba(243, 247, 243, 0.16);
  --inset-lo: rgba(243, 247, 243, 0.08);

  --font-heading: 'Season Sans', Georgia, serif;
  --font-mix: 'Season Mix', Georgia, serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-dark); color: var(--text-strong-light); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.page { max-width: 1440px; width: 100%; margin: 0 auto; position: relative; background: var(--bg-dark); }

/* Full-bleed pattern: sections with a non-page background (light sections) need to
   extend edge-to-edge of the viewport while their inner content stays capped at
   the design max width. Negative margins break out of .page's 1440 cap; padding
   then grows on wider viewports so content stays at 1376 (1440 - 64) max. */
body { background: var(--bg-dark); }
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(32px, calc((100vw - 1440px) / 2 + 32px)); padding-right: max(32px, calc((100vw - 1440px) / 2 + 32px)); }

/* Brand wordmark inline in copy — mirrors the logo lockup: "ready" bold, "when" italic. */
.brand { white-space: nowrap; }
.brand__ready { font-weight: 700; }
/* Optical kerning: the italic "when" leans right, leaving a visual gap after
   the upright "y" in "ready". Pull it back a hair so "readywhen" reads as one
   word. em-based so it scales at every font size. Text is unchanged. */
.brand__when { font-style: italic; margin-left: -0.05em; }

/* ---------- Components ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--button-border-light); font-weight: 500; font-size: 14px; line-height: 24px; isolation: isolate; }
.btn--primary { color: var(--text-strong-dark); background: var(--bg-light); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.btn--dark { background: var(--text-strong-dark); color: var(--text-strong-light); border-color: var(--button-border-dark); }
.btn--sm { padding: 8px 12px; font-size: 12px; line-height: 16px; }
.btn__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-darker); flex-shrink: 0; }
.btn__label { white-space: nowrap; }

/* ---------- Navigation ---------- */
/* Nav anchored to the actual viewport edges. .page is 1440 max-width centered, so
   we break the nav out with negative left + 100vw width so its 32px padding lands
   at the real viewport left/right, not the design-block edges. */
.nav { position: fixed; top: 0; left: 0; width: 100vw; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; box-sizing: border-box; }
/* Full-width blurred backdrop that fades in once the user scrolls. Sits behind
   the pill + CTA. The .nav--scrolled class is toggled from site-header.js. */
.nav::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; z-index: -1; }
.nav--scrolled::before { opacity: 1; }
.nav__pill { position: relative; display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 16px; border: 1px solid var(--border-on-dark); background: rgba(40, 51, 45, 0.8); backdrop-filter: blur(20px); border-radius: 8px; box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.nav__logo-link { display: inline-flex; align-items: center; line-height: 0; }
.nav__logo { height: 21px; width: 138.812px; }
.nav__logo-mark { display: none; }
.nav__divider { width: 1px; height: 20px; background: var(--border-on-dark); }
/* Mobile-only nav pieces — hidden on desktop so the desktop nav is unchanged. */
.nav__burger, .nav__mobile { display: none; }
.btn__label--short { display: none; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--text-strong-light); white-space: nowrap; }
/* Hover / open-dropdown / selected all share the Figma "Button/Secondary
   Hover" + Glass treatment (light pill, dark text). Defined once below at
   .nav__link--active so hover and active are visually identical. */

/* Hover dropdown for top-level items with children (e.g. Product → Connectors) */
.nav__item { position: relative; display: inline-flex; }
/* Chevron uses ::before (with flex order: 2) so ::after stays free for the active underline. */
.nav__item--has-sub > .nav__link::before { content: ""; order: 2; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav__item--has-sub:hover > .nav__link::before,
.nav__item--has-sub:focus-within > .nav__link::before { transform: translateY(1px) rotate(225deg); }
/* Mega-menu panel (Figma node 37287:3449). Left edge aligns to the hovered
   nav item; glass surface; left text column + right feature card. */
.nav__mega { position: absolute; top: calc(100% + 24px); left: 0; display: flex; gap: 16px; padding: 32px; border: 1px solid rgba(243, 247, 243, 0.16); background: rgba(33, 42, 37, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 8px; box-shadow: inset 0 1px 0 0 rgba(243, 247, 243, 0.16), inset 0 -1px 0 0 rgba(243, 247, 243, 0.08), 0 16px 40px rgba(0, 0, 0, 0.28); transform-origin: top center; opacity: 0; visibility: hidden; transform: translateY(-12px) scale(0.98); transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 420ms; z-index: 11; }
/* Invisible bridge so the cursor can cross the gap below the pill without closing the menu. Spans the full offset back up to the trigger. */
.nav__mega::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.nav__item--has-sub:hover > .nav__mega,
.nav__item--has-sub:focus-within > .nav__mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* Left: link list. Hovering one row dims the others to 50%. */
.nav__mega-list { display: flex; flex-direction: column; gap: 12px; width: 416px; }
.nav__mega-link { display: flex; flex-direction: column; gap: 4px; opacity: 1; transition: opacity 140ms ease; }
.nav__mega-list:hover .nav__mega-link { opacity: 0.5; }
.nav__mega-list:hover .nav__mega-link:hover { opacity: 1; }
.nav__mega-title { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: rgba(243, 247, 243, 0.88); }
.nav__mega-desc { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: rgba(243, 247, 243, 0.64); }
.nav__mega-link--active .nav__mega-title { color: var(--accent); }

/* Right: feature card */
.nav__mega-feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; width: 405px; height: 245px; padding: 16px; border: 1px solid rgba(243, 247, 243, 0.16); border-radius: 8px; overflow: hidden; }
.nav__mega-feature__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.nav__mega-feature__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(35, 44, 39, 0), rgba(35, 44, 39, 0.64)); }
.nav__mega-feature__row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.nav__mega-feature__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.nav__mega-feature__tag { display: inline-block; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: rgba(243, 247, 243, 0.88); background: rgba(243, 247, 243, 0.12); border: 1px solid rgba(243, 247, 243, 0.16); border-radius: 6px; padding: 4px 8px; }
.nav__mega-feature__title { position: relative; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: rgba(243, 247, 243, 0.88); }
.nav__mega-feature__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 16px; color: rgba(243, 247, 243, 0.88); white-space: nowrap; }
.nav__mega-feature__arrow { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid rgba(243, 247, 243, 0.08); background: rgba(243, 247, 243, 0.08); border-radius: 8px; }
.nav__mega-feature:hover .nav__mega-feature__arrow { background: rgba(243, 247, 243, 0.14); }

/* ---------- Section: Hero ---------- */
/* Hero is full-bleed (100vw). Content sticks to the viewport's left edge with 32px
   padding (matching Figma). Image (via .hero__image width calc) starts at the
   design-block-right position and extends to the viewport's right edge, so on wider
   viewports the empty dark space appears between content and image — matching the
   Figma reading of "left-anchored text" + "right-anchored image". */
/* Hero height adapts to viewport (min 100vh) but never exceeds the Figma 1100 cap,
   so on tall screens it stays Figma-faithful and on shorter screens content remains
   visually centered in the viewport. */
.hero { position: relative; display: flex; align-items: center; justify-content: space-between; padding-left: 32px; padding-right: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 100vh; max-height: 1100px; background: var(--bg-dark); overflow: hidden; box-sizing: border-box; }
/* padding-left is the designed 120px inset at the canonical ≥1440 width
   (frozen). Below 1440 it scales down with the viewport so the content slides
   LEFT for breathing room, flooring at 0 by ~1025 — i.e. never past the
   original hero padding-left:32px edge it was attached to before the inset.
   At 1025 it reaches 0, matching the ≤1024 stacked rule (no boundary jump). */
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 679px; padding-left: clamp(0px, calc(120px - (1440px - 100vw) * 0.29), 120px); }
.hero__text { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.hero__body strong { font-weight: 700; color: var(--text-strong-light); }
.hero__title { width: 512px; margin: 0; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.hero__title em { font-family: var(--font-mix); font-style: italic; font-weight: 500; }
.hero__body { width: 428px; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }
.hero__body p { margin: 0; }
.hero__body p + p { margin-top: 16px; }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero__eyebrow { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
/* Image width grows on wider viewports so its LEFT edge stays at design-block-right
   (matching Figma's design x=757 anchor) while its RIGHT edge hugs the viewport.
   Width formula: 683 + (extra viewport width / 2) so image is 683 at 1440 and 923 at 1920. */
.hero__image { position: relative; width: calc((100vw - 1440px) / 2 + 683px); min-width: 683px; flex-shrink: 0; align-self: stretch; overflow: hidden; }
.hero__image-bg { position: absolute; inset: 0; background-image: url('../public/images/hero/background.webp?v=3'); background-size: cover; background-position: center; }
.hero__image-gradient { position: absolute; left: -42px; right: -32px; bottom: 0; height: 393px; background: linear-gradient(to bottom, rgba(35, 44, 39, 0) 0%, #232c27 100%); }

@keyframes octo-bob { 0%, 100% { translate: 0 -6px; } 50% { translate: 0 6px; } }
@keyframes octo-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
/* Octopus mascot — ambient bob+sway, sits on top of the hero independently of the
   message-card animation timeline. brand.html also reuses these keyframes. */
.hero__octopus { position: absolute; left: calc((100vw - 1440px) / 2 + 621px); top: 49.5%; width: 376px; height: 376px; z-index: 5; background: url('../public/images/brand/octopus.webp') center / contain no-repeat; pointer-events: none; transform-origin: 50% 35%; animation: octo-bob 5.5s ease-in-out infinite, octo-sway 7.3s ease-in-out infinite; }

/* ---------- Hero animation timeline ----------
   Six-beat storyboard: drift → converge → detect → work → deliver → hold.
   States are toggled on .hero-anim by scripts/hero-animation.js. CSS owns all motion. */

.hero-anim { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Beat 1: ambient drift — two opposite-direction rows of branded cards. */
.hero-anim__drift { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; transition: opacity 800ms ease; }
/* Rows are JS-driven (scripts/hero-animation.js sets translateX every frame) so the
   hero card can be frozen at the exact pixel where it is centred in .hero-anim. */
.hero-anim__row { display: flex; align-items: center; gap: 8px; width: max-content; will-change: transform; }
/* Drift card = the .hcard template (fixed 288×159, defined below); here it only
   needs to not shrink in the flex row and carry the ambient drop-shadow. */
.hero-anim__card { flex-shrink: 0; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15)); }

/* ---- Timeline model ----
   A vertical timeline. The task card ("commitment summary") pins to a fixed top;
   its bottom edge is the invisible exit line. Items live below it, equal-spaced;
   JS sets each element's `left`/`top` (px) and `top` transitions smoothly so
   things glide up the timeline. Exits translate further up + fade (vanish above
   the line). All elements share one easing + transition contract. */
.hero-anim__pill, .hero-anim__task, .hero-anim__step, .hero-anim__doc, .hero-anim__sent {
  position: absolute; box-sizing: border-box; opacity: 0; z-index: 5;
  pointer-events: none;
  transition: opacity 600ms ease, transform 850ms cubic-bezier(0.22, 1, 0.36, 1), top 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Commitment-found pill */
.hero-anim__pill { display: inline-flex; align-items: center; gap: 12px; height: 32px; padding: 0 16px; border-radius: 8px; background: var(--accent); font-family: var(--font-mono); font-size: 14px; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bg-dark); white-space: nowrap; transform: translate(-50%, -100%) translateY(8px); z-index: 6; }
.hero-anim__pill-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-dark); flex-shrink: 0; }
.hero-anim__pill.is-show { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
.hero-anim__pill.is-exit { opacity: 0; transform: translate(-50%, -100%) translateY(-180px); }

/* Commitment summary (Figma 37049:3490). z-index above the steps so exiting
   actions slide UNDER it rather than over it. */
.hero-anim__task { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px; border-radius: 8px; background: var(--glass-light); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); white-space: nowrap; transform: translate(-50%, 12px); z-index: 8; }
.hero-anim__task.is-show { opacity: 1; transform: translate(-50%, 0); }
.hero-anim__task-title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 24px; line-height: 28px; color: #232c27; }
.hero-anim__task-tags { display: flex; align-items: flex-start; gap: 4px; }
.hero-anim__task-tag { display: inline-flex; align-items: center; padding: 3px 8px 4px 5px; border-radius: 4px; font-family: var(--font-body); font-size: 14px; line-height: 20px; white-space: nowrap; }
.hero-anim__task-tag--priority { background: #ffdede; color: #742a11; }
.hero-anim__task-tag--due { background: rgba(241, 239, 232, 0.2); color: var(--text-medium-on-light); }

/* Action step — Figma node 37049:3566. Fixed slot per step (JS `top`); reveals
   from just below (.is-active spinner), completes (.is-done check + solid bg),
   exits upward past the line (.is-exit). */
.hero-anim__step { display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: #232c27; white-space: nowrap; background: var(--glass-light); transform: translate(-50%, 20px); }
.hero-anim__step.is-active, .hero-anim__step.is-done { opacity: 1; transform: translate(-50%, 0); }
.hero-anim__step.is-done { background: #f8faf8; }
/* Exit: fade out FAST (≈480ms) while drifting up only a little, so the action is
   fully invisible before it rises into the summary's band — even though some
   actions are wider than the summary. The slow transform finishes off-screen. */
.hero-anim__step.is-exit { opacity: 0; transform: translate(-50%, -26px); transition: opacity 480ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), top 1100ms cubic-bezier(0.22, 1, 0.36, 1); }
/* Label is a flex row so the status icon, text, source icon and source name all
   share ONE vertical centre axis (no inline vertical-align guesswork). */
.hero-anim__step-label { display: inline-flex; align-items: center; }
.hero-anim__step-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.hero-anim__ico { position: absolute; display: block; object-fit: contain; }
.hero-anim__ico--spin  { width: 16px; height: 16px; opacity: 0; transition: opacity 220ms ease; }
/* Check completes with a confident pop (slight overshoot) — a clear "done". */
.hero-anim__ico--check { width: 18px; height: 13px; opacity: 0; transform: scale(0.5); transition: opacity 240ms ease, transform 430ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.hero-anim__step.is-active .hero-anim__ico--spin { opacity: 1; animation: hero-spin 0.9s linear infinite; }
.hero-anim__step.is-done  .hero-anim__ico--check { opacity: 1; transform: scale(1); }
@keyframes hero-spin { to { transform: rotate(360deg); } }
/* Pause freezes the JS timeline; also halt the CSS spinner so nothing moves. */
.hero-anim.is-paused .hero-anim__ico--spin { animation-play-state: paused; }
/* "Gathering context from [icon][source]": only the icon+name cross-fades (name
   width locked by JS so the pill never resizes). On completion the whole
   " from …" segment collapses its width + fades — no snap — leaving the plain
   "Gathering context" centred. */
.hero-anim__step-from { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; overflow: hidden; max-width: 480px; transition: max-width 480ms cubic-bezier(0.22, 1, 0.36, 1), margin-left 480ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease; }
.hero-anim__step-src { display: inline-flex; align-items: center; gap: 6px; }
.hero-anim__step-src-ico { display: block; width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; border-radius: 3px; transition: opacity 200ms ease; }
.hero-anim__step-src-name { display: inline-block; white-space: nowrap; text-align: left; transition: opacity 200ms ease; }
.hero-anim__step.is-done .hero-anim__step-from { max-width: 0; margin-left: 0; opacity: 0; }

/* Document draft card — Figma node 37050:3754 */
.hero-anim__doc { display: flex; flex-direction: column; gap: 16px; width: 317px; padding: 24px; border-radius: 8px; background: var(--bg-light); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); transform: translate(-50%, 22px); font-family: var(--font-body); }
.hero-anim__doc.is-show { opacity: 1; transform: translate(-50%, 0); }
.hero-anim__doc-head { display: flex; align-items: center; gap: 8px; }
.hero-anim__doc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px; border-radius: 8px; background: #f8faf8; font-weight: 700; font-size: 12px; line-height: 16px; color: var(--text-medium-on-light); }
.hero-anim__doc-badge img { width: 14px; height: 17px; display: block; }
.hero-anim__doc-meta { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--text-medium-on-light); }
.hero-anim__doc-body { padding: 16px; border-radius: 8px; background: #f8faf8; border: 1px solid rgba(35, 44, 39, 0.16); }
.hero-anim__doc-fade { display: flex; flex-direction: column; gap: 7px; max-height: 99px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.hero-anim__doc-title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 16px; line-height: 28px; color: #232c27; }
.hero-anim__doc-text { margin: 0; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--text-medium-on-light); }
.hero-anim__doc-actions { display: flex; gap: 8px; }
.hero-anim__doc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 8px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 16px; white-space: nowrap; }
.hero-anim__doc-btn img { display: block; }
.hero-anim__doc-btn--send { background: var(--bg-lift-dark); color: var(--text-strong-light); }
.hero-anim__doc-btn--send img { width: 15px; height: 11px; }
.hero-anim__doc-btn--edit { background: #f8faf8; border: 1px solid rgba(35, 44, 39, 0.16); color: #232c27; }
.hero-anim__doc-btn--edit img { width: 13px; height: 13px; }
.hero-anim__doc-btn--discard { color: #232c27; }
.hero-anim__doc-btn--discard img { width: 9px; height: 9px; }
/* Email-draft artifact — reuses the doc shell + Send/Edit/Discard row, but the
   head reads like an email: From / To / Subject rows + a Draft chip, divided
   from the body by a hairline (same tokens as the rest of the system). */
.hero-anim__doc--mail { width: 344px; }
.hero-anim__mail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(35, 44, 39, 0.16); }
.hero-anim__mail-fields { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-anim__mail-row { display: flex; gap: 8px; font-size: 12px; line-height: 18px; min-width: 0; }
.hero-anim__mail-row > span:first-child { width: 48px; flex-shrink: 0; color: var(--text-medium-on-light); }
.hero-anim__mail-row > span:last-child { color: #232c27; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hero-anim__mail-row--sub > span:last-child { font-family: var(--font-mix); font-weight: 600; }
.hero-anim__mail-draft { flex-shrink: 0; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--bg-depth-light); color: #626060; font-size: 11px; line-height: 16px; }
.hero-anim__mail { display: flex; flex-direction: column; gap: 8px; }
.hero-anim__mail p { margin: 0; font-size: 13px; line-height: 19px; color: #232c27; }
.hero-anim__mail-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 19px; color: #232c27; }
.hero-anim__mail-link { color: #1a73e8; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hero-anim__doc--slack, .hero-anim__doc--comment { width: 344px; }
.hero-anim__cmt-top { display: flex; align-items: center; gap: 10px; }
.hero-anim__cmt-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; }
.hero-anim__cmt-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.hero-anim__cmt-name { font-weight: 700; font-size: 14px; line-height: 20px; color: #232c27; white-space: nowrap; }
.hero-anim__cmt-time { font-size: 12px; line-height: 16px; color: var(--text-medium-on-light); }
.hero-anim__cmt-right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hero-anim__cmt-tools { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(35, 44, 39, 0.06); }
.hero-anim__cmt-tool { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--text-medium-on-light); }
.hero-anim__cmt-tool svg { width: 14px; height: 14px; display: block; }
.hero-anim__cmt-body { margin: 0; font-size: 15px; line-height: 23px; color: #232c27; }
.hero-anim__cmt-at { display: inline; padding: 0 4px; border-radius: 4px; background: rgba(26, 115, 232, 0.12); color: #1a73e8; font-weight: 500; }
.hero-anim__slack-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(35, 44, 39, 0.16); }
.hero-anim__slack-chan { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-mix); font-weight: 600; font-size: 13px; line-height: 18px; color: #232c27; }
.hero-anim__slack { display: flex; flex-direction: column; gap: 8px; }
.hero-anim__slack p { margin: 0; font-size: 13px; line-height: 19px; color: #232c27; }
.hero-anim__slack-sender { display: flex; align-items: center; gap: 8px; }
.hero-anim__slack-av { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; display: block; }
.hero-anim__slack-name { font-weight: 700; font-size: 13px; line-height: 18px; color: #232c27; }
.hero-anim__slack-time { font-size: 11px; line-height: 16px; color: var(--text-medium-on-light); }
.hero-anim__slack-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 19px; color: #232c27; }
.hero-anim__doc-btn--send { position: relative; transition: transform 110ms ease, filter 110ms ease; }
.hero-anim__doc.is-clicking .hero-anim__doc-btn--send { transform: scale(0.92); filter: brightness(0.82); }
/* After the click, the Send button shows a brief in-button spinner ("working")
   before the draft is swapped for the Done pill — sells that it did something. */
.hero-anim__doc-btn-label { display: inline-flex; align-items: center; gap: 8px; transition: opacity 150ms ease; }
.hero-anim__doc-send-spin { position: absolute; inset: 0; margin: auto; width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: 0; }
.hero-anim__doc.is-sending .hero-anim__doc-btn-label { opacity: 0; }
.hero-anim__doc.is-sending .hero-anim__doc-send-spin { opacity: 1; animation: hero-spin 0.7s linear infinite; }
.hero-anim.is-paused .hero-anim__doc-send-spin { animation-play-state: paused; }

/* Finale: oversized demo cursor flies in, clicks Send; the draft is replaced by
   a "Sent" confirmation pill (same accent-pill style as "Commitment found"). */
.hero-anim__sent { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 8px; background: var(--accent); color: var(--bg-dark); font-family: var(--font-mono); font-size: 14px; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, 12px); }
.hero-anim__sent.is-show { opacity: 1; transform: translate(-50%, 0); }
.hero-anim__sent-ico { width: 13px; height: 11px; flex-shrink: 0; }
.hero-anim__cursor { position: absolute; left: 0; top: 0; width: 46px; height: 46px; z-index: 12; opacity: 0; pointer-events: none; transform-origin: 19% 11%; transform: translate(-9px, -5px) scale(1); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)); transition: left 760ms cubic-bezier(0.4, 0, 0.2, 1), top 760ms cubic-bezier(0.4, 0, 0.2, 1), opacity 260ms ease, transform 130ms ease; }
.hero-anim__cursor svg { display: block; width: 100%; height: 100%; }
.hero-anim__cursor.is-show { opacity: 1; }
.hero-anim__cursor.is-click { transform: translate(-9px, -5px) scale(0.78); }

/* Converge: non-hero cards fade away, hero card glows. Pill/task/etc are shown
   via their own .is-show classes (JS-driven), not this state class. */
.hero-anim.is-converge .hero-anim__card--hero { filter: drop-shadow(0 10px 28px rgba(172, 255, 182, 0.45)); transition: filter 600ms ease; }
.hero-anim.is-converge .hero-anim__row > :not(.hero-anim__card--hero) { opacity: 0; transition: opacity 700ms ease 400ms; }
/* Hero Slack card exits up the timeline and fades past the invisible line. */
.hero-anim__card--hero.is-exit { opacity: 0; transform: translateY(-210px); transition: opacity 600ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }

/* prefers-reduced-motion: the JS skips the timeline and paints one static final
   frame, so kill every timeline transition. */
@media (prefers-reduced-motion: reduce) {
  .hero-anim__pill,
  .hero-anim__task,
  .hero-anim__step,
  .hero-anim__doc,
  .hero-anim__drift { transition: none; }
  .hero-controls-wrap { display: none; } /* nothing to control — static frame */
}

/* Hero animation controls — glass pill (visual-guidelines §5.1, same treatment
   as .nav__pill). Centred along the bottom of the animation area (.hero__image,
   which is ≥100vh capped at 1100px → always above the fold), with a small
   label above. Minimal: a pause/play glyph + three ghost speed toggles. */
.hero-controls-wrap { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.hero-controls__label { margin: 0; font-family: var(--font-body); font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: var(--text-medium-on-dark); }
.hero-controls { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--border-on-dark); background: rgba(40, 51, 45, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 8px; box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); pointer-events: auto; }
.hero-controls__btn,
.hero-controls__speed { display: inline-flex; align-items: center; justify-content: center; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-medium-on-dark); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.hero-controls__btn { width: 26px; padding: 0; color: var(--text-strong-light); }
.hero-controls__speed { padding: 0 8px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; }
.hero-controls__btn:hover,
.hero-controls__speed:hover { color: var(--text-strong-light); }
.hero-controls__speed.is-active { background: rgba(243, 247, 243, 0.1); color: var(--text-strong-light); }
.hero-controls__ico { width: 13px; height: 13px; fill: currentColor; }
.hero-controls__ico--play { display: none; }
.hero-controls.is-paused .hero-controls__ico--pause { display: none; }
.hero-controls.is-paused .hero-controls__ico--play { display: block; }

/* ---------- Reusable message-card template (.hcard) ----------
   Built 1:1 from Figma node 37217:2188 (Q9HdQA7W4wqxBxRqaIDGTz). Fixed 288×159 box
   so every card is exactly the same dimensions regardless of content. All content is
   slot-driven: app icon/name, channel tag (colours via --hcard-tag-*), reply context,
   avatar, name, time, message (mention via .hcard__mention). DOM-based = crisp at any
   scale. Reuse anywhere; in the hero it also carries .hero-anim__card--hero. */
.hcard {
  box-sizing: border-box;
  width: 288px;
  height: 159px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 8px;
  background: var(--glass-light);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo);
  font-family: var(--font-body);
  overflow: hidden;
}
/* Figma: app/channel row, reply pill, message row are siblings in ONE flex-wrap
   container at a uniform 12px gap (the Container's 24px gap is dead — the
   glass/shadow layers are absolute). 16+20+12+20+12+63+16 = 159px exactly. */
/* Full content width so the tag is always flush-right at the same 16px inset
   (justify-content: space-between) — consistent across every card. */
.hcard__head-row { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.hcard__app { display: flex; align-items: center; gap: 6px; }
/* App icons are self-contained brand tiles (app-*.png/svg) — render edge-to-edge
   as a uniform 18px rounded tile so every card's icon looks consistent. */
.hcard__app-icon { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px; overflow: hidden; }
.hcard__app-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hcard__app-name { font-size: 12px; line-height: 20px; color: var(--text-medium-on-light); white-space: nowrap; }
.hcard__tag { display: inline-flex; align-items: center; padding: 0 4px; border-radius: 4px; font-size: 12px; line-height: 20px; white-space: nowrap; background: var(--hcard-tag-bg, #f9e7fe); color: var(--hcard-tag-fg, #4d0a7e); }
.hcard__context { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; padding: 0 4px; border-radius: 4px; background: var(--bg-depth-light); }
.hcard__context-icon { display: block; width: 12px; height: 12px; flex-shrink: 0; }
.hcard__context-text { font-size: 12px; line-height: 20px; color: #626060; white-space: nowrap; }
.hcard__msg { display: flex; align-items: flex-start; gap: 9px; }
.hcard__avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.hcard__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Initial-avatar (non-Slack tools): a round coloured letter, like Gmail/Notion/
   Meet/Fathom show when there's no profile photo. */
.hcard__avatar--mono { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; }
/* Notes artifact (Granola): no person — a neutral notes glyph instead. */
.hcard__avatar--note { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-depth-light); }
.hcard__avatar--note img { width: 16px; height: 16px; object-fit: contain; }
.hcard__msg-main { display: flex; flex-direction: column; gap: 3px; width: 211px; }
/* Transcript (Meet/Fathom): no avatar — speaker line uses the full card width. */
.hcard__msg--plain .hcard__msg-main { width: 100%; }
.hcard__msg-head { display: flex; align-items: baseline; gap: 7.5px; }
.hcard__name { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--text-strong-on-light); white-space: nowrap; }
.hcard__time { font-size: 14px; line-height: 20px; color: var(--text-faint-on-light); white-space: nowrap; }
.hcard__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-strong-on-light); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcard__mention { color: #4d0a7e; }

/* ---------- Section: Value & Features ---------- */
.value-features { padding: 160px 32px; display: flex; flex-direction: column; align-items: center; gap: 64px; background: var(--bg-dark); }
.section-title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 48px; line-height: 48px; letter-spacing: -0.5px; color: var(--text-strong-light); text-align: center; }
.section-title em { font-family: var(--font-mix); font-style: italic; font-weight: 500; }
/* Small-screen-only forced line break (no box on desktop → 1440 unchanged) */
.u-br-sm { display: none; }
.section-title--dark { color: var(--text-strong-dark); }
.section-subtitle { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-medium-on-light); text-align: center; }
.section-subtitle--dark { color: var(--text-medium-on-dark); }
.value-features__head { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 680px; padding: 0 48px; box-sizing: border-box; }
/* Stage = progress bar + panel; the section's 64px column gap sits between
   the head and this whole block, the bar hugs ~16px above the panel. */
.vf-stage { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.vf-progress { display: flex; gap: 8px; width: 100%; }
.vf-progress__seg { position: relative; flex: 1 1 0; height: 4px; padding: 0; border: 0; border-radius: 999px; background: rgba(243, 247, 243, 0.16); cursor: pointer; -webkit-appearance: none; appearance: none; }
/* Larger invisible hit area so the thin bar is easy to click. */
.vf-progress__seg::before { content: ""; position: absolute; inset: -10px 0; }
.vf-progress__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.vf-progress__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .vf-progress__fill { transition: none !important; } }
/* Single full-width panel: blurred bg + floating note card above comparison cards */
.vf-panel { position: relative; width: 100%; min-height: 600px; border: 1px solid var(--border-on-dark); border-radius: 8px; overflow: hidden; }
.vf-panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-panel__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 40px 24px; box-sizing: border-box; }
/* Comparison cards never fade — the cards, borders and headers stay fully
   visible; only the todo rows animate in one-by-one each cycle (driven by
   scripts/value-features.js). Default (no class) = visible, so the static
   no-JS / reduced-motion markup shows every row. */
.vf-compare-card__row { transition: opacity 520ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.vf-compare-card__row.is-hidden { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .vf-compare-card__row { transition: none; } }
/* Floating stacked notification card — pixel-matched to Figma
   `Website (26)` Group 526 (nodes 37287:4944 / 4955 / 5030).
   Front card 331×131; two centred backing layers peek below it at fixed
   offsets. The whole stack lives in a fixed 331×157 box so swapping
   content never reflows the panel. */
.vf-note { position: relative; width: 331px; height: 157px; max-width: 100%; flex-shrink: 0; }
.vf-note__stack { position: absolute; left: 50%; transform: translateX(-50%); }
.vf-note__stack--mid { width: 298px; height: 118px; top: 26px; z-index: 1; border-radius: 7px; background: rgba(248, 250, 248, 0.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0.9px 0 0 rgba(243, 247, 243, 0.16), inset 0 -0.9px 0 0 rgba(243, 247, 243, 0.08); }
.vf-note__stack--back { width: 268px; height: 106px; top: 51px; z-index: 0; border-radius: 6px; background: rgba(248, 250, 248, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0.81px 0 0 rgba(243, 247, 243, 0.16), inset 0 -0.81px 0 0 rgba(243, 247, 243, 0.08); }
/* Real 3-card stack (driven by scripts/value-features.js). Every card is
   the full 331×131 box; the mid/back tiers are placed purely via
   transform (scale+translateY from a top-centre origin) so the visual
   geometry exactly matches Figma (front 331×131 · mid ≈298×118 +26 ·
   back ≈268×106 +51) while staying smoothly animatable. Each cycle the
   front fades up & out, mid→front, back→mid, a new card enters at back —
   a real macOS-style stack promotion. */
.vf-note__card { position: absolute; top: 0; left: 0; width: 331px; height: 131px; display: flex; flex-direction: column; gap: 12px; padding: 16px; box-sizing: border-box; border-radius: 8px; transform-origin: 50% 0; will-change: transform, opacity; transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1), opacity 460ms ease, background-color 640ms ease, box-shadow 640ms ease; }
.vf-note__card--front { z-index: 3; opacity: 1; transform: translateY(0) scale(1); background: rgba(248, 250, 248, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 rgba(243, 247, 243, 0.16), inset 0 -1px 0 0 rgba(243, 247, 243, 0.08); }
.vf-note__card--mid { z-index: 2; opacity: 1; transform: translateY(26px) scale(0.9); background: rgba(248, 250, 248, 0.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0.9px 0 0 rgba(243, 247, 243, 0.16), inset 0 -0.9px 0 0 rgba(243, 247, 243, 0.08); }
.vf-note__card--back { z-index: 1; opacity: 1; transform: translateY(51px) scale(0.81); background: rgba(248, 250, 248, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0.81px 0 0 rgba(243, 247, 243, 0.16), inset 0 -0.81px 0 0 rgba(243, 247, 243, 0.08); }
.vf-note__card--enter { z-index: 0; opacity: 0; transform: translateY(70px) scale(0.74); background: rgba(248, 250, 248, 0.4); }
.vf-note__card--leave { z-index: 4; opacity: 0; transform: translateY(-22px) scale(1); background: rgba(248, 250, 248, 0.8); }
@media (prefers-reduced-motion: reduce) { .vf-note__card { transition: none; } }
.vf-note__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.vf-note__msg { display: flex; align-items: flex-start; gap: 9px; }
.vf-note__avatar { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.vf-note__msg-text { display: flex; flex-direction: column; gap: 3px; width: 254px; box-sizing: border-box; }
.vf-note__msg-meta { display: flex; align-items: flex-end; gap: 7.5px; }
.vf-note__msg-name { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: rgba(35, 44, 39, 0.88); }
.vf-note__msg-time { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: rgba(243, 247, 243, 0.3); }
.vf-note__msg-body { margin: 0; width: 260px; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: rgba(35, 44, 39, 0.88); }
/* shared tool-row bits (icon + name + tag pill) */
.vf-task__tool { display: flex; align-items: center; gap: 6px; }
.vf-task__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #fff; border-radius: 999px; padding: 2px; box-sizing: border-box; }
.vf-task__icon img { width: 100%; height: 100%; object-fit: contain; }
.vf-task__tool-name { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: rgba(35, 44, 39, 0.64); }
.vf-task__tag { display: inline-flex; align-items: center; padding: 0 4px; border-radius: 4px; font-family: var(--font-body); font-size: 12px; line-height: 20px; white-space: nowrap; }
/* Comparison cards */
.vf-compare__cards { display: flex; align-items: stretch; justify-content: center; gap: 16px; width: 100%; max-width: 800px; }
/* Fixed height sized for the tallest state (dark card, 4-row list) and
   content top-anchored — 3-row / 4-row swaps never move row 1 or the card. */
.vf-compare-card { flex: 1 1 0; width: 390px; max-width: 100%; height: 288px; padding: 24px; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; box-sizing: border-box; }
.vf-compare-card--dark { background: var(--bg-dark); border: 1px solid var(--border-on-dark); }
.vf-compare-card--light { background: #f8faf8; border: 1px solid rgba(35, 44, 39, 0.16); }
.vf-compare-card__title { margin: 0; height: 32px; display: flex; align-items: center; font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--text-strong-light); }
.vf-compare-card__logo { height: 32px; display: flex; align-items: center; }
.vf-compare-card__logo img { height: 32px; width: auto; display: block; }
.vf-compare-card__list { display: flex; flex-direction: column; gap: 16px; }
.vf-compare-card__row { display: flex; gap: 12px; align-items: flex-start; }
.vf-compare-card__text { margin: 0; flex: 1; font-family: var(--font-body); font-size: 20px; line-height: 28px; }
.vf-compare-card--dark .vf-compare-card__text { font-weight: 400; color: var(--text-strong-on-dark); }
.vf-compare-card--light .vf-compare-card__text { font-weight: 500; color: var(--text-strong-on-light); }
.vf-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.vf-check--off { background: rgba(243, 247, 243, 0.08); border: 1px solid rgba(243, 247, 243, 0.08); }
.vf-check--on { background: var(--accent); border: 1px solid var(--accent); }
.vf-check--on svg { width: 16px; height: 16px; display: block; }

/* ---------- Section: You work on the big stuff. readywhen handles the rest. (light) ---------- */
.ai-acts { padding: 160px max(32px, calc((100vw - 1440px) / 2 + 32px)) 0; background: var(--bg-light); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 80px; }
.ai-acts__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 48px; line-height: 48px; letter-spacing: -0.5px; color: var(--text-strong-dark); max-width: 610px; }
.ai-acts__cards { display: flex; align-items: stretch; background: #f8faf8; border: 1px solid var(--border-on-light); border-radius: 8px; overflow: hidden; }
.ai-acts__card { flex: 1 1 0; min-width: 0; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ai-acts__card + .ai-acts__card { border-left: 1px solid var(--border-on-light); }
.ai-acts__card-head { display: flex; flex-direction: column; gap: 16px; }
.ai-acts__card-title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 28px; line-height: 32px; color: var(--text-strong-dark); }
.ai-acts__card-body { font-size: 16px; line-height: 24px; color: var(--text-medium-on-light); }
.ai-acts__card-body p { margin: 0 0 16px; }
.ai-acts__card-body p:last-child { margin: 0; }
.ai-acts__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 16px; color: var(--text-strong-dark); align-self: flex-start; }
.ai-acts__link-circle { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--button-border-light); background: rgba(35, 44, 39, 0.08); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.ai-acts__link-circle svg { width: 12px; height: 12px; display: block; color: var(--accent-darker); }
.ai-acts__link:hover .ai-acts__link-circle { background: rgba(35, 44, 39, 0.12); }
.ai-acts__mock { width: 100%; height: 370px; object-fit: cover; object-position: center; border-radius: 8px; border: 1px solid var(--border-on-light); display: block; }
/* Layered mock: photo-blend backdrop (cover-cropped, abstract so crop is
   invisible) + a pixel-exact pill cluster from Figma. Cluster = the centred
   "Group 525" 178×142 box; pills at their exact in-cluster offsets. Cluster
   height tracks the mock height (142/370 of the design frame) so the
   composition stays pixel-perfect at every breakpoint. */
.ai-acts__mock--layered { position: relative; overflow: hidden; }
.ai-acts__mock-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ai-acts__mock-items { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 38.378%; aspect-ratio: 178 / 142; }
.ai-acts__mock-item { position: absolute; display: block; height: auto; }
.ai-acts__mock-item--zb-signup { left: 19.663%; top: 0; width: 60.674%; }
.ai-acts__mock-item--zb-connect { left: 0; top: 35.915%; width: 100%; }
.ai-acts__mock-item--zb-done { left: 23.034%; top: 71.831%; width: 53.371%; }
/* Component 2 "Catches everything" (Figma node 37256:10182, frame 362.67×370):
   full-bleed icon strip (top 29px) + centred transcript card (top 165.58px).
   Both sized by % of the mock height so the composition stays pixel-exact at
   the design size and proportional at every breakpoint. Width auto = each
   PNG's intrinsic ratio (1451:483 strip, 946:570 card). */
.ai-acts__mock-item--ca-strip { left: 50%; top: 7.838%; transform: translateX(-50%); height: 32.635%; width: auto; }
.ai-acts__mock-item--ca-card { left: 50%; top: 44.751%; transform: translateX(-50%); height: 38.514%; width: auto; }
/* Component 3 "Don't worry. You're still the boss." (Figma node 37256:10455,
   frame 362.67×370): centred approval card (top 38px) + centred slack-input
   pill (top 283px). Sized by % of mock height; width = each PNG's intrinsic
   ratio (1116:844 card, 1180:176 input). */
.ai-acts__mock-item--ap-card { left: 50%; top: 10.270%; transform: translateX(-50%); height: 57.027%; width: auto; }
.ai-acts__mock-item--ap-input { left: 50%; top: 76.486%; transform: translateX(-50%); height: 11.892%; width: auto; }
/* Octopus deliberately overflows the section bottom (~113/243 of its height)
   to peek over the top of the dark testimonials section — matches Figma node
   39029:5213 (octopus y 1118–1361 within a 1248px-tall section). */
.ai-acts__octopus { display: block; width: 303px; height: 243px; margin: 0 auto -113px; position: relative; z-index: 3; transform-origin: 50% 35%; animation: octo-bob 5.5s ease-in-out infinite, octo-sway 7.3s ease-in-out infinite; pointer-events: none; }

/* ---------- Section: Testimonials ---------- */
/* Full-bleed carousel: break out of .page's 1440 cap so the peek-blur cards
   reach the true viewport edges on any screen width (matches Figma's edge-to-
   edge intent). Same negative-margin technique as .nav / .full-bleed. The 32px
   side padding is the only gutter; the heading stays centered via align-items.
   carousel.js reads viewport.offsetWidth (with a resize listener) so it
   re-centres the active card automatically — no JS change needed. */
.testimonials { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 160px 32px; background: var(--bg-dark); display: flex; flex-direction: column; align-items: center; gap: 80px; overflow: hidden; }
.testimonials__glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(172, 255, 182, 0.25) 0%, rgba(172, 255, 182, 0) 60%); pointer-events: none; z-index: 0; }
.testimonials__head { position: relative; z-index: 1; width: 680px; }
.testimonials__head .section-title { white-space: pre-line; }
/* The carousel viewport bleeds past the section's 32px side padding to the
   true viewport edges (margin-to-margin peek cards), while the heading and
   arrows keep that padding. Same negative-margin breakout as .full-bleed.
   carousel.js centres the active card from viewport.offsetWidth (+ resize
   listener) so it re-centres against the wider box automatically. */
.testimonials__viewport { position: relative; z-index: 1; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; }
.testimonials__track { display: flex; gap: 32px; transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; }
/* filter/opacity are driven per-frame by carousel.js as a smooth distance-
   based gradient (centre cards sharp → edges gently blur + fade), so no CSS
   transition here — it would lag/smear the rAF updates. */
.testimonial { position: relative; width: 358px; padding: 32px; border-radius: 8px; background: var(--bg-lift-dark); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 32px; box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); flex-shrink: 0; will-change: filter, opacity; }
.testimonial__image { width: 100%; height: 319px; border-radius: 8px; border: 1px solid var(--border-on-dark); background-size: cover; background-position: center; background-clip: padding-box; }
/* Reserve two lines of title height on every card so a quote that wraps to 2
   lines and one that fits on 1 both occupy the same space — keeping name /
   role / logo on the same baseline across all cards. `2lh` tracks whatever
   line-height applies (incl. the responsive override), so it holds at every
   viewport without a hardcoded px value. */
.testimonial__title { margin: 0; min-height: 2lh; font-family: var(--font-mix); font-weight: 600; font-size: 32px; line-height: 36px; letter-spacing: -0.5px; color: var(--text-strong-on-dark); }
.testimonial__name { margin: 0; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-strong-on-dark); }
.testimonial__role { margin: 0; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); }
/* Company logo, brand-system styled: the SVG (any colours) is used purely as a
   mask, so it paints flat in currentColor — the same muted role tone
   (--text-medium-on-dark). Their brand colours are never shown. The file is
   passed per-card via the inline --logo custom property.
   Sits on its own row at the bottom of the card. Every source SVG has been
   trimmed so its canvas == its ink (no internal padding). Because the assets
   span ~3.5:1 to ~9:1, equal-height would make wide wordmarks dominate and
   equal-width would make them tiny — so each card sets --logo-h / --logo-mw
   inline to a constant OPTICAL AREA (≈w·h): wide marks trade a little height
   for less width, square-ish marks the reverse. Result: consistent visual
   weight, none oversized. `contain` guarantees nothing is ever clipped. */
.testimonial__logo {
  display: block;
  height: var(--logo-h, 26px);
  width: 100%;
  max-width: var(--logo-mw, 188px);
  margin-top: 28px;
  background-color: currentColor;
  -webkit-mask: var(--logo) left center / contain no-repeat;
          mask: var(--logo) left center / contain no-repeat;
}
.arrows { position: relative; z-index: 1; display: flex; gap: 12px; margin-top: 16px; }
.arrow-btn { position: relative; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--button-border-dark); background: var(--glass-dark); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; color: var(--text-strong-light); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); transition: opacity 0.2s ease; }
.arrow-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.arrow-btn:hover:not(:disabled) { background: rgba(243, 247, 243, 0.12); }

/* ---------- Section: Actually makes your life easier ---------- */
.features-grid { background: var(--bg-dark); padding: 120px 32px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.features-grid__head { width: 680px; }
.features-grid__head .section-title { width: 450px; margin: 0 auto; }
.features-grid__table { width: 1376px; border: 1px solid var(--border-on-dark); border-radius: 8px; overflow: hidden; }
.features-grid__row { display: flex; }
.features-grid__row + .features-grid__row { border-top: 1px solid var(--border-on-dark); }
.feature-col { flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 48px; background: var(--bg-lift-dark); }
.feature-col + .feature-col { border-left: 1px solid var(--border-on-dark); }
.icon-box { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-depth-dark); backdrop-filter: blur(20px); color: var(--text-strong-light); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.feature-col__title { margin: 0; font-weight: 500; font-size: 20px; line-height: 28px; color: var(--text-strong-on-dark); }
.feature-col__desc { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }

/* ---------- CTA ---------- */
.cta { position: relative; padding: 48px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg-dark); overflow: hidden; min-height: 388px; }
.cta__glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1100px; height: 1100px; background: radial-gradient(circle, rgba(172, 255, 182, 0.22) 0%, rgba(172, 255, 182, 0.08) 28%, rgba(172, 255, 182, 0) 60%); pointer-events: none; }
.cta::before, .cta::after { content: ''; position: absolute; left: 0; right: 0; height: 160px; pointer-events: none; z-index: 1; }
.cta::before { top: 0; background: linear-gradient(to bottom, #232c27 0%, rgba(35, 44, 39, 0) 100%); }
.cta::after { bottom: 0; background: linear-gradient(to top, #232c27 0%, rgba(35, 44, 39, 0) 100%); }
.cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 680px; }
.cta__inky { display: block; width: 303px; height: auto; max-width: 100%; pointer-events: none; transform-origin: 50% 35%; animation: octo-bob 5.5s ease-in-out infinite, octo-sway 7.3s ease-in-out infinite; }
.cta__title { margin: 0; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); text-align: center; }
/* The italic "when" in the brand lockup overhangs to the right, crowding the
   following word. Manufacture extra space after the wordmark — scoped to the
   CTA headline so the tight inline wordmark in body copy is unaffected. */
.cta__title .brand { margin-right: 0.14em; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-dark); padding: 80px 32px 32px; }
.footer__inner { display: flex; flex-direction: column; gap: 80px; }

/* Top row: 3 link columns on the left (680px) + about block on the right (448px). */
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.footer__columns { display: flex; gap: 16px; width: 680px; }
.footer__col { flex: 1 0 0; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.footer__col li { margin: 0; }
.footer__col-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text-strong-on-dark); text-decoration: none; white-space: nowrap; }
.footer__col-link:hover { text-decoration: underline; }
.footer__ext-icon { flex: none; width: 12px; height: 12px; opacity: 0.64; }

.footer__about { display: flex; flex-direction: column; align-items: flex-end; width: 448px; }
.footer__about-grid { display: flex; justify-content: flex-end; gap: 80px; align-items: flex-start; }
.footer__about-block { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; text-align: right; }
.footer__about-block:first-child { width: 248px; }
.footer__label { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-strong-on-dark); }
.footer__email { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text-strong-on-dark); text-decoration: underline; }
.footer__socials { display: flex; justify-content: flex-end; gap: 16px; color: var(--text-strong-on-dark); }
.footer__social { display: inline-flex; width: 24px; height: 24px; color: inherit; }
.footer__social svg { width: 100%; height: 100%; display: block; }

/* Bottom row: app-icon logo left, copyright right. */
.footer__bottom { display: flex; align-items: flex-end; justify-content: space-between; }
.footer__logo-link { display: inline-flex; align-items: center; line-height: 0; }
.footer__logo { height: 132.68px; width: 132.68px; }
.footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer__copy { font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); text-align: right; }
.footer__copy p { margin: 0; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Desktop canonical at 1440px+. Below that we use 3 breakpoints:
   - 1280px and below: tighten paddings, fluid hero widths
   - 1024px and below: tablet — start stacking 2-col sections
   - 768px and below:  mobile — single column, fluid type, mobile nav
   ============================================================ */

/* ---------- HERO INKY — SIDE-BY-SIDE INTERMEDIATE BAND ----------
   1440 is the frozen designed state (base rule, untouched). Inky's HORIZONTAL
   anchor is left intact: the base `left: calc((100vw-1440px)/2 + 621px)`
   simplifies to `50vw − 99px`, which keeps him straddling the content /
   animation seam (the centre of the hero) at every width — that is correct
   and must not change. The only defect below 1440 is VERTICAL: he stays at
   the drift band's vertical centre (top:49.5%) and so overlaps the animation
   cards as they crowd in. This band (deliberately excluding 1440 via
   max-width:1439) leaves `left` alone and only slides him gently DOWN as the
   viewport narrows, so he clears the animation content while still straddling
   the seam — trending toward the ≤1024 stacked placement near the seam. The
   clamp lower bound reproduces the 1440 vertical position at ~1439 so there
   is no jump at the seam. */
@media (min-width: 1025px) and (max-width: 1439px) {
  /* Let Inky hang over the hero/section-2 seam instead of being clipped flat
     at the narrow end — same divider treatment as ≤768 (the animation itself
     stays clipped by .hero-anim / .hero__image, which own their own clip). */
  .hero { overflow: visible; }
  .hero__octopus {
    /* Horizontal: at ~1439 stay at the base spot (50vw−99px, no jump from the
       frozen 1440). As the viewport narrows, shift LEFT toward the hero's true
       centre line (50vw − half-width) so he straddles the centre instead of
       drifting over the bottom-centred animation controls (.hero-controls-wrap
       is centred in .hero__image — never cover that critical UI). */
    left: clamp(
      calc(50vw - 188px),
      calc(50vw - 99px - (1439px - 100vw) * 0.215),
      calc(50vw - 99px)
    );
    top: clamp(49.5%, calc(49.5% + (1439px - 100vw) * 0.42), 72%);
    z-index: 30;
  }
}

/* Below the frozen 1440 design, Inky must descend through the lower-centre of
   the animation to stay off the headline and the drift cards — which is where
   the bottom-centred speed controls live. Rather than cover that critical UI,
   hide the controls in every reflowed layout (the animation autoplays). This
   is the same call already made for ≤768 ("nothing to control"); the controls
   only ever show at the canonical ≥1440 desktop design, where Inky sits high
   enough not to reach them. */
@media (max-width: 1439px) {
  .hero-controls-wrap { display: none; }
}

/* ---------- LARGE TABLET / SMALL DESKTOP: ≤ 1280px ---------- */
@media (max-width: 1280px) {
  /* Hero — let columns shrink proportionally instead of overflowing */
  .hero__content { width: auto; flex: 1; min-width: 0; max-width: 679px; }
  .hero__title { width: auto; max-width: 100%; }
  .hero__body { width: auto; max-width: 100%; }
  .hero__image { width: 50%; max-width: 683px; flex-shrink: 0; }

  /* Sections — let inner blocks shrink */
  .testimonials__head { width: auto; max-width: 680px; }
  .features-grid__head { width: auto; max-width: 680px; }
  .features-grid__table { width: 100%; max-width: 1376px; }
  .cta__inner { width: auto; max-width: 680px; }
}

/* ---------- TABLET: ≤ 1024px ---------- */
@media (max-width: 1024px) {
  /* Section padding reduction */
  .value-features, .testimonials { padding: 96px 24px; }
  .features-grid { padding: 96px 24px; gap: 64px; }
  .ai-acts { padding: 96px 24px 0; gap: 64px; }
  .ai-acts__title { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.05; max-width: 100%; }

  /* AI acts — stack the two cards vertically */
  .ai-acts__cards { flex-direction: column; }
  .ai-acts__card { padding: 40px; gap: 40px; }
  .ai-acts__card + .ai-acts__card { border-left: none; border-top: 1px solid var(--border-on-light); }
  .ai-acts__mock { height: clamp(280px, 40vw, 370px); }
  .ai-acts__octopus { width: 260px; height: 209px; margin-bottom: -97px; }
  .cta { padding: 96px 24px; min-height: 480px; }
  .footer { padding: 64px 24px 24px; }

  /* Nav */
  .nav { padding: 16px 24px; }

  /* Hero: stack vertically */
  .hero {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding: 128px 24px 64px;
    gap: 48px;
    align-items: stretch;
  }
  .hero__content { width: 100%; max-width: 640px; margin: 0 auto; flex: 0 0 auto; padding-left: 0; }
  .hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .hero__body { max-width: none; }
  .hero__image {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    height: clamp(420px, 60vw, 600px);
    flex: 0 0 auto;
    border-radius: 16px;
  }
  .hero__octopus {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -40px;
    transform: translateX(-50%);
    width: clamp(220px, 28vw, 320px);
    height: clamp(220px, 28vw, 320px);
  }
  .cards { width: 100%; }

  /* Value & Features — let panel grow with content, stack compare cards */
  .vf-panel { min-height: 0; }
  /* relative (not static) so the inner content stays in the positioned paint
     layer ABOVE the absolute .vf-panel__bg — otherwise the bg image covers the
     comparison cards (the note only showed because it is position:relative). */
  .vf-panel__inner { position: relative; z-index: 1; inset: auto; gap: 40px; padding: 48px 24px; }
  .vf-panel__bg { height: 100%; z-index: 0; }
  .vf-compare__cards { flex-direction: column; width: 100%; align-items: center; }

  /* Features grid — 2 columns instead of 3 */
  .features-grid__row { flex-wrap: wrap; }
  .feature-col { flex: 0 0 50%; min-width: 50%; }
  .feature-col:nth-child(3) { border-left: none; border-top: 1px solid var(--border-on-dark); }
  .feature-col:nth-child(2) { border-right: none; }
  .feature-col:nth-child(odd) { border-right: 1px solid var(--border-on-dark); border-left: none; }

  /* Section titles fluid */
  .section-title { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.05; }
  .cta__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
}

/* ---------- MOBILE: ≤ 768px ---------- */
@media (max-width: 768px) {
  /* Tighter section padding */
  .value-features, .testimonials, .features-grid {
    padding: 64px 20px;
    gap: 40px;
  }
  .ai-acts { padding: 64px 20px 0; gap: 40px; }
  /* Separate each card on mobile: drop the shared container chrome and give
     every card the design-system light-surface treatment (same as the top
     panel — #f8faf8, on-light border, 8px radius), spaced by 16px (matches
     .vf-compare__cards). */
  .ai-acts__cards { background: none; border: none; border-radius: 0; overflow: visible; gap: 16px; }
  .ai-acts__card { padding: 32px; gap: 32px; background: #f8faf8; border: 1px solid var(--border-on-light); border-radius: 8px; }
  /* Reset the ≤1024 divider tweaks so every separated card has the identical
     full border as the first one (no missing top/left edge). */
  .ai-acts__card + .ai-acts__card { border: 1px solid var(--border-on-light); }
  .ai-acts__card-title { font-size: 24px; line-height: 30px; }
  .ai-acts__mock { height: clamp(240px, 56vw, 320px); }
  .ai-acts__octopus { width: 220px; height: 176px; margin-bottom: -82px; }
  .cta { padding: 64px 20px; min-height: 400px; }
  /* CTA micro: centred, two lines, no dot divider on mobile */
  .cta__micro { text-align: center; }
  .cta__micro-sep { display: none; }
  /* Wordmark contrast: "when" inherits the heading's 750 weight so it reads
     as bold too. Pin it to Season Mix Medium Italic so only "ready" is bold. */
  .cta__title .brand__when { font-family: var(--font-mix); font-weight: 500; }
  .footer { padding: 48px 20px 20px; }

  /* Mobile nav: bare brand icon (no wordmark), no desktop pill border/glass */
  .nav { padding: 12px 16px; }
  .nav__pill { gap: 0; padding: 0; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .nav__divider, .nav__links { display: none; }
  .nav__logo { display: none; }
  .nav__logo-mark { display: block; height: 34px; width: auto; }
  /* 3-up layout: logo left · CTA centred · hamburger right */
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .nav__pill { justify-self: start; }
  .nav__cta { justify-self: center; }
  .btn__label--full { display: none; }
  .btn__label--short { display: inline; }
  .nav__burger { display: inline-flex; justify-self: end; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
  .nav__burger-bar { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text-strong-light); transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Glass dropdown — same surface recipe as the desktop nav pill */
  .nav__mobile { display: block; position: absolute; top: 100%; right: 16px; left: 16px; margin-top: 8px; padding: 8px; border: 1px solid var(--border-on-dark); background: rgba(40, 51, 45, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 8px; box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
  .nav__mobile[hidden] { display: none; }
  .nav__mobile-list { display: flex; flex-direction: column; }
  .nav__mobile-link { display: block; padding: 12px; border-radius: 8px; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--text-strong-light); text-decoration: none; }
  .nav__mobile-link:hover, .nav__mobile-link:focus-visible { background: rgba(243, 247, 243, 0.08); }

  /* Hero — overflow visible so Inky can sit ON TOP across the section seam
     (the animation itself is still clipped by .hero__image / .hero-anim). */
  .hero { padding: 96px 20px 48px; gap: 32px; overflow: visible; }
  .hero__content { gap: 24px; }
  .hero__title { font-size: 44px; line-height: 56px; }
  .hero__body { font-size: 15px; line-height: 22px; }
  /* Inset rounded panel (the "inner card"), kept as designed. Clear the
     desktop min-width:683px so the canvas is the real (inset) panel width. */
  .hero__image { width: 100%; min-width: 0; height: 500px; border-radius: 12px; }
  /* Inky: small, centred, on top (high z-index), straddling the hero/section-2
     seam as a divider — clear of the panel above and the headline below. */
  .hero__octopus { width: 180px; height: 180px; bottom: -40px; z-index: 30; }
  /* No animation controls on mobile */
  .hero-controls-wrap { display: none; }
  /* Drift notification cards span margin-to-margin INSIDE the inset panel
     (one per column). calc = 100vw − 40px (hero side padding) − 32px
     (16px gutter ×2 inside the panel). */
  .hero-anim__card { width: calc(100vw - 72px); max-width: 440px; }
  /* Capture-sequence elements: genuinely smaller on mobile (real font/padding
     reduction, NOT a transform) so they fit inside the inset panel with
     comfortable margin and the animation's JS still reads correct sizes. */
  .hero-anim__pill, .hero-anim__sent { height: 28px; padding: 0 12px; font-size: 12px; gap: 8px; }
  .hero-anim__task { padding: 14px; gap: 14px; }
  .hero-anim__task-title { font-size: 17px; line-height: 22px; }
  .hero-anim__task-tag { font-size: 11px; line-height: 16px; padding: 2px 6px 3px 4px; }
  .hero-anim__step { font-size: 13px; line-height: 20px; padding: 6px 10px; gap: 8px; }
  .hero-anim__step-ico { width: 16px; height: 16px; }
  .hero-anim__step-from { margin-left: 4px; gap: 4px; }
  .hero-anim__doc { width: min(317px, calc(100vw - 96px)); padding: 16px; gap: 12px; }
  .hero-anim__doc--mail { width: min(344px, calc(100vw - 96px)); }
  .hero-anim__doc-title { font-size: 14px; line-height: 22px; }
  /* Simpler cards row on mobile */
  .cards__row--top { left: -20px; gap: 8px; }
  .cards__row--bottom { left: -80px; top: 100px; }
  .card { width: 200px; padding: 12px; }

  /* Value & features */
  .value-features__head { padding: 0 16px; }
  .vf-panel__inner { padding: 32px 16px; gap: 32px; }
  /* The notification stack is a fixed 331px card (can't reflow without
     breaking the stack animation). Keep the note box its full 331 (max-width
     would shrink the box but not the absolutely-positioned card, leaving it
     off-centre) and scale the whole thing about its centre just enough to fit
     the narrow panel (scale 1 once it naturally fits). */
  .vf-note { max-width: none; transform: scale(min(1, calc((100vw - 84px) / 331px))); transform-origin: 50% 50%; }
  /* Fixed-size boxes on mobile: stop the cards flex-growing in the column
     (flex:1 1 0 made them resize with row count / panel → "jumping"). They
     keep the base 288px height regardless of how many to-do rows show, so the
     reveal animation can run without changing the card size. */
  .vf-compare-card { width: 100%; max-width: 420px; gap: 32px; flex: 0 0 auto; height: 288px; }
  .vf-compare-card__text { font-size: 18px; line-height: 26px; }


  /* Features grid — separated cards (same treatment as the ai-acts section):
     drop the shared container chrome, give every feature its own dark-surface
     rounded card, uniform 16px gap between all of them. */
  .features-grid__table { background: none; border: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 16px; }
  .features-grid__row { display: flex; flex-direction: column; gap: 16px; flex-wrap: nowrap; }
  .features-grid__row + .features-grid__row { border-top: none; }
  .feature-col { flex: 0 0 100% !important; min-width: 100% !important; padding: 24px 20px; background: var(--bg-lift-dark); border: 1px solid var(--border-on-dark); border-radius: 8px; }
  .feature-col + .feature-col,
  .feature-col:nth-child(odd),
  .feature-col:nth-child(2),
  .feature-col:nth-child(3) { border: 1px solid var(--border-on-dark); }

  /* Testimonials */
  .testimonial { width: 280px; padding: 24px; }
  .testimonial__image { height: 240px; }
  .testimonial__title { font-size: 24px; line-height: 28px; }

  /* CTA */
  .cta__title { font-size: 44px; line-height: 56px; }

  /* Footer */
  .footer__inner { gap: 48px; }
  .footer__top { flex-direction: column; gap: 40px; }
  .footer__columns, .footer__about { width: 100%; }
  .footer__about { align-items: flex-start; }
  .footer__about-grid { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 40px; }
  .footer__about-block { align-items: flex-start; text-align: left; }
  .footer__about-block:first-child { width: auto; }
  .footer__socials { justify-content: flex-start; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 40px; }
  .footer__right { align-items: flex-start; }
  .footer__copy { text-align: left; }
  .footer__logo { height: 96px; width: 96px; }
}

/* ============================================================
   SECURITY PAGE — /security.html
   Reading-column layout (904px max) over the dark page bg.
   Horizontal Security & Privacy FAQ: titled .security-section
   blocks, each holding a <details> accordion (Q&A) or a static
   .security-panel (sub-processor table / on-request list).
   Mirrors the homepage tokens; only invents components where
   the page genuinely needs something new (FAQ accordion,
   section heading, static panel, cert badge). The legacy
   .security-tab* rules below are retained but unused — the
   per-connector tabs were replaced by horizontal sections.
   ============================================================ */

/* Selected nav item (current page) — Figma "Button/Secondary Hover" + Glass
   (node 37287:3856). Exact spec supplied by design. The base .nav__link
   carries a 1px transparent border so colouring it here causes no layout
   shift; box-shadow is only the two Glass inner shadows (top highlight /
   bottom). */
.nav__link:hover,
.nav__item--has-sub:hover > .nav__link,
.nav__item--has-sub:focus-within > .nav__link,
.nav__link--active,
.nav__link--active:hover {
  background: rgba(243, 247, 243, 0.88);
  color: #232c27;
  border-color: rgba(35, 44, 39, 0.08);
  box-shadow: inset 0 1px 0 0 rgba(243, 247, 243, 0.16),
              inset 0 -1px 0 0 rgba(243, 247, 243, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Shared eyebrow label (Geist Mono uppercase) */
.eyebrow { display: inline-block; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }

/* Section: header */
.security-hero { max-width: 904px; margin: 0 auto; padding: 160px 32px 48px; }
.security-hero__title { margin: 12px 0 16px; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.security-hero__subtitle { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }

/* Section: commitments */
.security-commitments { max-width: 904px; margin: 0 auto; padding: 0 32px 48px; }
.security-commitments__head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.security-commitments__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--glass-dark); color: var(--accent); border: 1px solid var(--border-on-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.security-commitments__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 24px; line-height: 28px; color: var(--text-strong-light); letter-spacing: -0.2px; }
.security-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.security-card { padding: 20px; border-radius: 8px; background: var(--bg-lift-dark); border: 1px solid var(--border-on-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.security-card__title { margin: 0 0 6px; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--text-strong-light); }
.security-card__body { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-medium-on-dark); }

/* Link out to the standalone Trust centre — reuses the homepage's
   .ai-acts__link / .ai-acts__link-circle component, recoloured for
   the dark page bg (the homepage instance lives on a light section,
   so its default text/circle are dark-on-dark here). Sits directly
   under the section heading. */
.security-trust-link { margin-top: 16px; margin-bottom: 28px; }
.security-trust-link .ai-acts__link { color: var(--text-strong-light); }
.security-trust-link .ai-acts__link-circle { border-color: var(--button-border-dark); background: rgba(243, 247, 243, 0.08); }
.security-trust-link .ai-acts__link-circle svg { color: var(--accent); }
.security-trust-link .ai-acts__link:hover .ai-acts__link-circle { background: rgba(243, 247, 243, 0.14); }

/* Certification badge — small Geist Mono pill used inline in body copy */
.cert-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; background: rgba(172, 255, 182, 0.08); border: 1px solid rgba(172, 255, 182, 0.24); color: var(--accent); font-family: var(--font-mono); font-weight: 400; font-size: 10px; line-height: 14px; letter-spacing: 0.4px; white-space: nowrap; vertical-align: 1px; }

/* Section: FAQs */
.security-faqs { max-width: 904px; margin: 0 auto; padding: 0 32px 120px; }
.security-tabs { display: flex; border-radius: 8px; border: 1px solid var(--border-on-dark); overflow: hidden; margin-bottom: 24px; }
.security-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border: none; background: transparent; color: var(--text-medium-on-dark); font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; transition: background 0.15s ease, color 0.15s ease; }
.security-tab + .security-tab { border-left: 1px solid var(--border-on-dark); }
.security-tab:hover { color: var(--text-strong-light); background: rgba(243, 247, 243, 0.04); }
.security-tab--active { background: var(--bg-lift-dark); color: var(--text-strong-light); }

.security-accordion { display: flex; flex-direction: column; gap: 12px; }
.security-accordion--hidden { display: none; }
.faq-item { border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); overflow: hidden; }
.faq-item__head { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--text-strong-light); }
.faq-item__head::-webkit-details-marker { display: none; }
.faq-item__num { color: var(--text-medium-on-dark); margin-right: 6px; font-weight: 500; }
.faq-item__title { flex: 1; }
.faq-item__chevron { display: inline-flex; color: var(--text-medium-on-dark); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__body { padding: 0 20px 20px; color: var(--text-medium-on-dark); font-size: 14px; line-height: 22px; }
.faq-item__body > * + * { margin-top: 12px; }
.faq-item__body p { margin: 0; }
.faq-item__body h4 { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-strong-on-dark); }
.faq-item__body ul, .faq-item__body ol { margin: 0; padding-left: 20px; }
.faq-item__body li { margin: 4px 0; }
.faq-item__body li::marker { color: var(--text-faint-on-light); }
.faq-item__body strong { color: var(--text-strong-on-dark); font-weight: 500; }
.faq-item__body blockquote { margin: 0; padding: 12px 16px; border-left: 2px solid var(--accent); background: rgba(172, 255, 182, 0.04); border-radius: 4px; color: var(--text-strong-on-dark); }
.faq-item__body blockquote p { margin: 0; }
.faq-item__body code { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 4px; background: rgba(243, 247, 243, 0.06); border: 1px solid var(--border-on-dark); color: var(--text-strong-on-dark); }
.faq-item__body table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; }
.faq-item__body th, .faq-item__body td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-on-dark); vertical-align: top; }
.faq-item__body th { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-medium-on-dark); background: rgba(243, 247, 243, 0.04); }
.faq-item__body td:first-child { color: var(--text-strong-on-dark); }
.faq-item__body td code { font-size: 11px; }
.faq-item__body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(172, 255, 182, 0.32); }
.faq-item__body a:hover { border-bottom-color: var(--accent); }

/* Horizontal sections — titled groups stacked down the page */
.security-section + .security-section { margin-top: 48px; }
.security-section__title { margin: 0 0 16px; font-family: var(--font-mix); font-weight: 600; font-size: 24px; line-height: 28px; letter-spacing: -0.2px; color: var(--text-strong-light); }

/* Static panel — sub-processor table / on-request list (no accordion).
   Reuses the .faq-item shell + .faq-item__body inner typography,
   just always-open with symmetric padding. */
.security-panel { border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); overflow: hidden; }
.security-panel .faq-item__body { padding: 20px; }

.security-faqs__footnote { margin: 48px 0 0; text-align: center; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }

/* Responsive — security page */
@media (max-width: 1024px) {
  .security-hero { padding: 128px 24px 32px; }
  .security-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .security-commitments, .security-faqs { padding-left: 24px; padding-right: 24px; }
  .security-faqs { padding-bottom: 96px; }
}
@media (max-width: 768px) {
  .security-hero { padding: 112px 20px 24px; }
  .security-hero__title { font-size: 44px; line-height: 56px; margin-top: 8px; }
  .security-commitments, .security-faqs { padding-left: 20px; padding-right: 20px; }
  .security-cards { grid-template-columns: 1fr; }
  .security-commitments__title { font-size: 20px; line-height: 26px; }
  .faq-item__head { padding: 14px 16px; font-size: 15px; }
  .faq-item__body { padding: 0 16px 16px; }
  .security-tab span { font-size: 10px; letter-spacing: 0.6px; }
  .security-faqs { padding-bottom: 64px; }
}
@media (max-width: 480px) {
  .security-hero__title { font-size: 44px; line-height: 56px; }
}

/* ============================================================
   CONNECTORS PAGE — /connectors.html
   Catalogue hub. Dark theme; full-bleed light/lift sections
   alternate the rhythm. Tiles are glass-dark cards with the same
   inset shadow treatment as the rest of the site. Reuses .eyebrow,
   .cert-badge, .faq-item, .cta, .nav, .footer, .btn, .brand.
   ============================================================ */

/* Hero — centred reading column on the dark bg, wider than security
   (1100px) so the catalogue beneath has visual room. */
.connectors-hero { max-width: 1100px; margin: 0 auto; padding: 160px 32px 48px; }
.connectors-hero__title { margin: 12px 0 16px; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); max-width: 900px; }
.connectors-hero__title em { font-family: var(--font-mix); font-style: italic; font-weight: 500; }
.connectors-hero__body { margin: 0; font-size: 19px; line-height: 28px; color: var(--text-medium-on-dark); max-width: 760px; }
.connectors-hero__micro { margin: 24px 0 0; font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 1.68px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.connectors-hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.connectors-hero__count { font-family: var(--font-mono); font-weight: 300; font-size: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }

/* Category index — full-bleed lift surface for contrast under the hero. */
.cat-index { background: var(--bg-lift-dark); border-top: 1px solid var(--border-on-dark); border-bottom: 1px solid var(--border-on-dark); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; padding: 24px max(32px, calc((100vw - 1440px) / 2 + 32px)); }
.cat-index__list { max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; columns: 3; column-gap: 32px; }
.cat-index__list > li { break-inside: avoid; }
.cat-index__link { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-on-dark); font-size: 14px; line-height: 20px; color: var(--text-strong-on-dark); transition: color 0.15s ease, border-color 0.15s ease; }
.cat-index__link:hover { color: var(--text-strong-light); border-color: var(--accent); }
.cat-index__count { font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 0.6px; color: var(--text-medium-on-dark); margin-left: 12px; }

/* Catalogue */
.connectors-catalogue { max-width: 1100px; margin: 0 auto; padding: 64px 32px 32px; }
.cat-section { scroll-margin-top: 96px; padding-bottom: 56px; }
.cat-section + .cat-section { border-top: 1px solid var(--border-on-dark); padding-top: 56px; }
.cat-section__head { margin-bottom: 24px; }
.cat-section__title { margin: 0 0 4px; font-family: var(--font-mix); font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -0.2px; color: var(--text-strong-light); }
.cat-section__count { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.connector-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.connector-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px 16px; min-height: 124px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); color: var(--text-strong-light); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); text-align: center; transition: border-color 0.15s ease, background 0.15s ease; }
.connector-tile:hover { border-color: var(--accent); background: rgba(243, 247, 243, 0.04); }
.connector-tile__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.connector-tile__icon img { width: 100%; height: 100%; object-fit: contain; }
.connector-tile__icon--fallback { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.5px; }
.connector-tile__name { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 18px; color: var(--text-strong-on-dark); }

/* Differentiator — full-bleed lift section */
.connectors-diff { background: var(--bg-lift-dark); border-top: 1px solid var(--border-on-dark); border-bottom: 1px solid var(--border-on-dark); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; padding: 96px max(32px, calc((100vw - 1440px) / 2 + 32px)); }
.connectors-diff__inner { max-width: 1100px; margin: 0 auto; }
.section-h2-left--dark { color: var(--text-strong-light); max-width: 820px; }
.connectors-diff__lead { margin: 20px 0 0; font-size: 17px; line-height: 28px; color: var(--text-medium-on-dark); max-width: 820px; }
.connectors-diff__grid { margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.connectors-diff__row { border-top: 1px solid var(--border-on-dark); padding-top: 20px; }
.connectors-diff__row dt { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-medium-on-dark); }
.connectors-diff__row dd { margin: 6px 0 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-strong-light); }

/* Request form */
.connector-request { padding: 96px 32px; }
.connector-request__inner { max-width: 760px; margin: 0 auto; }
.section-title--left { text-align: left; }
.connector-request__lead { margin: 16px 0 0; font-size: 17px; line-height: 26px; color: var(--text-medium-on-dark); }
.connector-request__form { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.connector-request__field { display: flex; flex-direction: column; gap: 8px; }
.connector-request__label { font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.connector-request__field input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); border-radius: 8px; color: var(--text-strong-light); font-family: var(--font-body); font-size: 15px; line-height: 20px; transition: border-color 0.15s ease; }
.connector-request__field input:focus { outline: none; border-color: var(--accent); }
.connector-request__submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.connector-request__msg { font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); }
.connector-request__msg[data-state="error"] { color: var(--error); }
.connector-request__msg[data-state="ok"] { color: var(--accent); }

/* Security strip */
.connectors-security { background: var(--bg-lift-dark); border-top: 1px solid var(--border-on-dark); border-bottom: 1px solid var(--border-on-dark); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; padding: 96px max(32px, calc((100vw - 1440px) / 2 + 32px)); }
.connectors-security__inner { max-width: 820px; margin: 0 auto; }
.connectors-security__title { margin: 12px 0 20px; font-family: var(--font-mix); font-weight: 600; font-size: 36px; line-height: 40px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.connectors-security__lead { margin: 0; font-size: 17px; line-height: 28px; color: var(--text-medium-on-dark); }
.connectors-security__bullets { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.connectors-security__bullets li { font-size: 15px; line-height: 22px; color: var(--text-strong-on-dark); padding-left: 16px; position: relative; }
.connectors-security__bullets li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.connectors-security__link { display: inline-block; margin-top: 28px; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--accent); border-bottom: 1px solid rgba(172, 255, 182, 0.32); padding-bottom: 2px; }
.connectors-security__link:hover { border-color: var(--accent); }

/* FAQ block (reuses .security-faqs / .faq-item from security page) */
.connectors-faqs { max-width: 820px; margin: 0 auto; padding: 96px 32px; }
.connectors-faqs .section-title { margin-bottom: 32px; }

/* Closing CTA microline (re-uses .cta tokens for the rest) */
.cta__micro { margin: 8px 0 0; font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 1.68px; text-transform: uppercase; color: var(--text-medium-on-dark); }

/* Responsive — connectors page */
@media (max-width: 1280px) {
  .connector-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .connectors-hero { padding: 128px 24px 32px; }
  .connectors-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .connectors-hero__body { font-size: 17px; line-height: 26px; }
  .cat-index__list { columns: 2; }
  .connectors-catalogue { padding: 48px 24px 24px; }
  .connector-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-section { padding-bottom: 40px; }
  .cat-section + .cat-section { padding-top: 40px; }
  .connectors-diff { padding: 80px 24px; }
  .connectors-diff__grid { grid-template-columns: 1fr; gap: 16px; }
  .connector-request { padding: 80px 24px; }
  .connectors-security { padding: 80px 24px; }
  .connectors-security__title { font-size: clamp(28px, 4.2vw, 36px); line-height: 1.15; }
  .connectors-security__bullets { grid-template-columns: 1fr; }
  .connectors-faqs { padding: 80px 24px; }
}
@media (max-width: 768px) {
  .connectors-hero { padding: 112px 20px 24px; }
  .connectors-hero__title { font-size: 44px; line-height: 56px; margin-top: 8px; }
  .connectors-hero__body { font-size: 16px; line-height: 24px; }
  .cat-index { padding: 20px; }
  .cat-index__list { columns: 1; }
  .connectors-catalogue { padding: 40px 20px 20px; }
  .connector-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .connector-tile { min-height: 108px; padding: 16px 12px; }
  .cat-section__title { font-size: 22px; line-height: 28px; }
  .connectors-diff, .connector-request, .connectors-security, .connectors-faqs { padding-left: 20px; padding-right: 20px; padding-top: 64px; padding-bottom: 64px; }
  .connector-request__form { grid-template-columns: 1fr; }
}

/* ============================================================
   CONNECTOR DETAIL PAGE — /connectors/{slug}.html
   All 145 detail pages share these styles. Same dark-theme rules
   as the rest of the site; reuses .btn, .brand, .cert-badge,
   .connector-tile (from the hub), .faq-item / .security-accordion
   (from the security page), .cta. New: .cx-* section primitives,
   .commitment-row, .wf-table, .setup-step, .btn--ghost, .u-underline.
   ============================================================ */

.u-underline { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.12em; }
.btn--ghost { background: transparent; color: var(--text-strong-light); border-color: var(--border-on-dark); }
.btn--ghost:hover { background: rgba(243, 247, 243, 0.06); }

/* Hero */
.cx-hero { max-width: 1100px; margin: 0 auto; padding: 160px 32px 48px; }
.cx-hero__breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-family: var(--font-mono); font-weight: 300; font-size: 11px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.cx-hero__breadcrumb a { color: var(--text-medium-on-dark); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.cx-hero__breadcrumb a:hover { color: var(--text-strong-light); border-bottom-color: var(--accent); }
.cx-hero__breadcrumb [aria-current="page"] { color: var(--text-strong-light); }
.cx-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; margin-bottom: 24px; background: var(--bg-lift-dark); border: 1px solid var(--border-on-dark); }
.cx-hero__icon img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.cx-hero__icon.connector-tile__icon--fallback { color: #fff; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.5px; padding: 0; }
.cx-hero__title { margin: 0 0 16px; font-family: var(--font-heading); font-weight: 750; font-size: 60px; line-height: 1.04; letter-spacing: -0.5px; color: var(--text-strong-light); max-width: 900px; text-wrap: balance; }
.cx-hero__title strong { font-family: var(--font-mix); font-weight: 600; font-style: normal; }
.cx-hero__body { margin: 0; font-size: 19px; line-height: 28px; color: var(--text-medium-on-dark); max-width: 760px; }
.cx-hero__micro { margin: 24px 0 0; font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 1.68px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.cx-hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Generic section primitives — every detail-page block uses these. Each block
   except the hero gets a top border so blocks are visually segmented. */
.cx-section { max-width: 1100px; margin: 0 auto; padding: 56px 32px; border-top: 1px solid var(--border-on-dark); }
.cx-section__inner { width: 100%; }
.cx-section__inner--narrow { max-width: 820px; }
.cx-h2 { margin: 0 0 12px; font-family: var(--font-mix); font-weight: 600; font-size: 36px; line-height: 40px; letter-spacing: -0.5px; color: var(--text-strong-light); max-width: 820px; text-wrap: balance; }
.cx-h2 strong { font-family: var(--font-mix); font-weight: 700; font-style: normal; }
.cx-lead { margin: 0 0 32px; font-size: 17px; line-height: 28px; color: var(--text-medium-on-dark); max-width: 820px; }

/* Commitments caught — list of 3 examples */
.commitment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.commitment-row { display: flex; gap: 16px; align-items: flex-start; }
.commitment-row__arrow { color: var(--accent); font-size: 18px; line-height: 1.6; flex-shrink: 0; }
.commitment-row__copy { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-strong-light); }
.commitment-row__context { color: var(--text-medium-on-dark); }
.commitment-row__quote { font-style: italic; color: var(--text-strong-on-dark); }
.commitment-row__result { color: var(--text-medium-on-dark); }

/* Workflow table */
.wf-table-wrap { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.wf-table { width: 100%; border-collapse: collapse; text-align: left; }
.wf-table thead tr { border-bottom: 1px solid var(--text-strong-light); }
.wf-table th { padding: 12px 16px 12px 0; font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 16px; letter-spacing: 1.32px; text-transform: uppercase; color: var(--text-medium-on-dark); vertical-align: bottom; }
.wf-table th.wf-table__where { width: 22%; }
.wf-table th.wf-table__said { width: 40%; }
.wf-table th:last-child { padding-right: 0; }
.wf-table tbody tr { border-bottom: 1px solid var(--border-on-dark); vertical-align: top; }
.wf-table td { padding: 20px 16px 20px 0; font-size: 15px; line-height: 1.55; }
.wf-table td:last-child { padding-right: 0; }
.wf-table .wf-table__where { color: var(--text-strong-light); font-weight: 500; }
.wf-table .wf-table__said { color: var(--text-medium-on-dark); }
.wf-table .wf-table__said em { font-style: italic; }
.wf-table .wf-table__action { color: var(--text-medium-on-dark); }

/* Setup steps — 3 numbered circles */
.setup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.setup-step { display: flex; gap: 16px; align-items: flex-start; font-size: 17px; line-height: 1.55; color: var(--text-strong-light); }
.setup-step__num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 9999px; border: 1px solid var(--text-strong-light); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; line-height: 1; color: var(--text-strong-light); }

/* Security bullets */
.cx-security-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cx-security-list li { font-size: 16px; line-height: 1.6; color: var(--text-medium-on-dark); }
.cx-security-list strong { font-weight: 600; color: var(--text-strong-light); margin-right: 2px; }
.cx-security-link-wrap { margin: 28px 0 0; }

/* Often paired with — reuses .connector-tile / .connector-grid */
.connector-grid--paired { grid-template-columns: repeat(4, 1fr); }
.connector-grid--browse { grid-template-columns: repeat(6, 1fr); }

/* FAQ — reuses .security-accordion / .faq-item, just give it a top margin */
.cx-faqs { margin-top: 8px; }

/* Browse all connectors — sits below the closing CTA */
.cx-browse { max-width: 1100px; margin: 0 auto; padding: 48px 32px 80px; }
.cx-browse__inner { border-top: 1px solid var(--border-on-dark); padding-top: 40px; }
.cx-browse__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.cx-browse__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 24px; line-height: 28px; color: var(--text-strong-light); }
.cx-browse__see-all { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--accent); border-bottom: 1px solid rgba(172, 255, 182, 0.32); padding-bottom: 2px; }
.cx-browse__see-all:hover { border-color: var(--accent); }

/* Responsive — detail pages */
@media (max-width: 1280px) {
  .connector-grid--browse { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .cx-hero { padding: 128px 24px 32px; }
  .cx-hero__title { font-size: clamp(40px, 6vw, 60px); line-height: 1.1; }
  .cx-hero__body { font-size: 17px; line-height: 26px; }
  .cx-section { padding: 48px 24px; }
  .cx-h2 { font-size: clamp(28px, 4vw, 36px); line-height: 1.15; }
  .cx-lead { font-size: 16px; line-height: 26px; }
  .connector-grid--paired { grid-template-columns: repeat(3, 1fr); }
  .connector-grid--browse { grid-template-columns: repeat(3, 1fr); }
  .cx-browse { padding: 32px 24px 64px; }
}
@media (max-width: 768px) {
  .cx-hero { padding: 112px 20px 24px; }
  .cx-hero__title { font-size: 44px; line-height: 56px; }
  .cx-hero__body { font-size: 16px; line-height: 24px; }
  .cx-section { padding: 40px 20px; }
  .cx-h2 { font-size: 36px; line-height: 40px; }
  .cx-lead { margin-bottom: 24px; }
  .commitment-row__copy { font-size: 16px; }
  .wf-table th { font-size: 10px; letter-spacing: 1px; }
  .wf-table td { font-size: 14px; padding: 16px 12px 16px 0; }
  .setup-step { font-size: 16px; }
  .connector-grid--paired { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .connector-grid--browse { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cx-browse { padding: 24px 20px 48px; }
  .cx-browse__head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   BRAND PAGE — /brand.html
   Public visual guidelines for partners, collaborators, press.
   Centred reading column (1100px) on the dark page bg, mirroring
   the security / connectors rhythm. Reuses .eyebrow, .brand,
   .btn, .cta, .nav, .footer. New: .brand-hero, .brand-section,
   .brand-about, .brand-logo-card, .brand-swatch, .brand-type,
   .brand-voice, .brand-rules, .brand-link.
   ============================================================ */

.brand-hero { max-width: 1100px; margin: 0 auto; padding: 160px 32px 48px; }
.brand-hero__title { margin: 12px 0 16px; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); max-width: 900px; }
.brand-hero__title em { font-family: var(--font-mix); font-style: italic; font-weight: 500; }
.brand-hero__subtitle { margin: 0; font-size: 19px; line-height: 28px; color: var(--text-medium-on-dark); max-width: 760px; }

.brand-section { max-width: 1100px; margin: 0 auto; padding: 48px 32px; border-top: 1px solid var(--border-on-dark); }
.brand-section__title { margin: 0 0 16px; font-family: var(--font-mix); font-weight: 600; font-size: 36px; line-height: 40px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.brand-section__lead { margin: 0 0 32px; font-size: 17px; line-height: 28px; color: var(--text-medium-on-dark); max-width: 820px; }
.brand-section__lead strong { color: var(--text-strong-light); font-weight: 500; }
.brand-section__lead em { font-style: italic; color: var(--text-strong-on-dark); }

/* About — three label/copy columns side by side */
.brand-about { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.brand-about__row { display: flex; flex-direction: column; gap: 10px; }
.brand-about__label { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 11px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.brand-about__copy { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 26px; color: var(--text-strong-on-dark); }

/* Wordmark example */
.brand-wordmark-example { padding: 48px; border: 1px solid var(--border-on-dark); border-radius: 8px; background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.brand-wordmark-example__sample { margin: 0 0 16px; font-family: var(--font-mix); font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: -0.3px; color: var(--text-strong-light); }
.brand-wordmark-example__caption { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }

/* Logo grid */
.brand-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.brand-logo-grid--icons { grid-template-columns: repeat(3, 1fr); margin-top: 0; margin-bottom: 48px; }
.brand-logo-card { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.brand-logo-card--wide { grid-column: 1 / -1; }
.brand-logo-card__canvas { display: flex; align-items: center; justify-content: center; min-height: 240px; padding: 48px; border-radius: 8px; border: 1px solid var(--border-on-dark); }
.brand-logo-card__canvas--dark { background: var(--bg-dark); }
.brand-logo-card__canvas--mint { background: var(--accent); border-color: transparent; }
.brand-logo-card__canvas--light { background: var(--bg-light); border-color: var(--border-on-light); }
.brand-logo-card__canvas--icon { min-height: 240px; padding: 0; overflow: hidden; }
.brand-logo-card__icon-img { width: 240px; height: 240px; display: block; }
.brand-logo-card__lockup { width: clamp(280px, 50%, 480px); aspect-ratio: 208.219 / 31.5; height: auto; object-fit: contain; display: block; }
.brand-logo-card figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 4px; }
.brand-logo-card__name { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-strong-on-dark); }
.brand-logo-card__meta { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 0.6px; color: var(--text-medium-on-dark); }

/* Octopus mascot — animated bob+sway preview, reuses @keyframes from the homepage hero */
.brand-octopus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.brand-octopus { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.brand-octopus__stage { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-dark); overflow: hidden; position: relative; }
.brand-octopus__art { width: 72%; height: 72%; object-fit: contain; transform-origin: 50% 35%; animation: octo-bob 5.5s ease-in-out infinite, octo-sway 7.3s ease-in-out infinite; pointer-events: none; }
/* De-stagger so the three Inkys don't bob in lockstep */
.brand-octopus:nth-child(2) .brand-octopus__art { animation-delay: -1.6s, -2.4s; animation-duration: 5.9s, 7.0s; }
.brand-octopus:nth-child(3) .brand-octopus__art { animation-delay: -3.1s, -4.7s; animation-duration: 5.2s, 7.7s; }
.brand-octopus__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 4px; }
.brand-octopus__meta p { margin: 0; }

/* Backgrounds grid — 3-up, image fills the canvas (no padding around art) */
.brand-backdrops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.brand-backdrop { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.brand-backdrop__canvas { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-on-dark); transition: border-color 0.15s ease; }
.brand-backdrop__canvas:hover { border-color: var(--accent); }
.brand-backdrop__canvas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-backdrop figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 4px; }

/* Do / Don't rules */
.brand-rules__title { margin: 32px 0 12px; font-family: var(--font-mono); font-weight: 300; font-size: 11px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.brand-rules__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.brand-rules__list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 22px; color: var(--text-strong-on-dark); }
.brand-rules__list li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

/* Colour swatches */
.brand-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.brand-swatch { display: flex; flex-direction: column; gap: 8px; }
.brand-swatch__chip { width: 100%; height: 120px; border-radius: 8px; box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.brand-swatch__name { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 18px; color: var(--text-strong-on-dark); }
.brand-swatch__hex { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 0.6px; color: var(--text-medium-on-dark); text-transform: uppercase; }

/* Typography table */
.brand-type { display: flex; flex-direction: column; }
.brand-type__row { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--border-on-dark); }
.brand-type__row:first-child { border-top: none; padding-top: 0; }
.brand-type__meta p { margin: 0; }
.brand-type__name { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-strong-light); }
.brand-type__use { margin-top: 4px !important; font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 20px; color: var(--text-medium-on-dark); }
.brand-type__spec { margin-top: 8px !important; font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 0.6px; color: var(--text-medium-on-dark); }
.brand-type__sample { margin: 0; color: var(--text-strong-light); }
.brand-type__sample--display { font-family: var(--font-heading); font-weight: 750; font-size: 48px; line-height: 52px; letter-spacing: -0.5px; }
.brand-type__sample--mix { font-family: var(--font-mix); font-weight: 600; font-size: 36px; line-height: 40px; letter-spacing: -0.4px; }
.brand-type__sample--mix em { font-style: italic; font-weight: 500; }
.brand-type__sample--body { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px; color: var(--text-strong-on-dark); max-width: 560px; }
.brand-type__sample--mono { font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 0.84px; color: var(--text-medium-on-dark); }

/* Voice */
.brand-voice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.brand-voice__col { padding: 24px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.brand-voice__label { margin: 0 0 16px; font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.brand-voice__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.brand-voice__list li { position: relative; padding-left: 22px; font-family: var(--font-mix); font-weight: 600; font-size: 18px; line-height: 26px; color: var(--text-strong-light); }
.brand-voice__list--ok li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.brand-voice__list--bad li::before { content: "✕"; position: absolute; left: 0; color: var(--error); font-weight: 700; }
.brand-voice__list--bad li { color: var(--text-medium-on-dark); }

/* Links */
.brand-link { color: var(--accent); border-bottom: 1px solid rgba(172, 255, 182, 0.32); padding-bottom: 1px; }
.brand-link:hover { border-color: var(--accent); }
.brand-link--accent { font-family: var(--font-mix); font-weight: 600; font-size: 24px; line-height: 32px; padding-bottom: 2px; }

/* Responsive — brand page */
@media (max-width: 1024px) {
  .brand-hero { padding: 128px 24px 32px; }
  .brand-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .brand-hero__subtitle { font-size: 17px; line-height: 26px; }
  .brand-section { padding: 40px 24px; }
  .brand-section__title { font-size: clamp(28px, 4.2vw, 36px); line-height: 1.15; }
  .brand-type__row { grid-template-columns: 180px 1fr; gap: 24px; }
  .brand-logo-grid { grid-template-columns: 1fr; }
  .brand-logo-grid--icons { grid-template-columns: repeat(3, 1fr); }
  .brand-backdrops { grid-template-columns: repeat(2, 1fr); }
  .brand-octopus-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-swatch-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-type__sample--display { font-size: 40px; line-height: 44px; }
  .brand-type__sample--mix { font-size: 30px; line-height: 36px; }
}
@media (max-width: 768px) {
  .brand-hero { padding: 112px 20px 24px; }
  .brand-hero__title { font-size: 44px; line-height: 56px; margin-top: 8px; }
  .brand-hero__subtitle { font-size: 16px; line-height: 24px; }
  .brand-section { padding: 32px 20px; }
  .brand-section__title { font-size: 24px; line-height: 30px; }
  .brand-section__lead { font-size: 16px; line-height: 24px; margin-bottom: 24px; }
  .brand-about { grid-template-columns: 1fr; gap: 24px; }
  .brand-about__row { gap: 8px; }
  .brand-type__row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .brand-about__copy { font-size: 16px; line-height: 24px; }
  .brand-wordmark-example { padding: 28px 20px; }
  .brand-wordmark-example__sample { font-size: 22px; line-height: 30px; }
  .brand-logo-card__canvas { min-height: 180px; padding: 32px; }
  .brand-logo-card__canvas--icon { padding: 0; }
  .brand-logo-card__icon-img { width: 160px; height: 160px; }
  .brand-logo-card__lockup { width: clamp(200px, 70%, 360px); }
  .brand-swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-swatch__chip { height: 96px; }
  .brand-type__sample--display { font-size: 32px; line-height: 36px; letter-spacing: -0.3px; }
  .brand-type__sample--mix { font-size: 24px; line-height: 30px; }
  .brand-type__sample--body { font-size: 16px; line-height: 24px; }
  .brand-voice { grid-template-columns: 1fr; }
  .brand-backdrops { grid-template-columns: 1fr; }
  .brand-octopus-grid { grid-template-columns: 1fr; }
  .brand-octopus__art { width: 60%; height: 60%; }
  .brand-voice__list li { font-size: 16px; line-height: 24px; }
  .brand-link--accent { font-size: 18px; line-height: 26px; }
}
@media (max-width: 480px) {
  .brand-hero__title { font-size: 44px; line-height: 56px; }
  .brand-swatch-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PRIVACY PAGE — /privacy.html
   Long-form legal notice. Centred reading column (820px max)
   over the dark page bg, same rhythm as security & brand.
   Reuses: .eyebrow, .brand, .cert-badge, .brand-link, .cta, .nav, .footer.
   New: .privacy-hero, .privacy-section, .privacy-subsection, .privacy-toc,
        .privacy-list, .privacy-roles, .privacy-role-card, .privacy-rights,
        .privacy-right, .privacy-authorities, .privacy-authority.
   ============================================================ */

.privacy-hero { max-width: 820px; margin: 0 auto; padding: 160px 32px 32px; }
.privacy-hero__title { margin: 12px 0 16px; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.privacy-hero__subtitle { margin: 0 0 16px; font-size: 17px; line-height: 28px; color: var(--text-medium-on-dark); }
.privacy-hero__meta { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }

.privacy-section { max-width: 820px; margin: 0 auto; padding: 48px 32px; border-top: 1px solid var(--border-on-dark); scroll-margin-top: 96px; }
.privacy-section__title { margin: 0 0 16px; font-family: var(--font-mix); font-weight: 600; font-size: 32px; line-height: 36px; letter-spacing: -0.3px; color: var(--text-strong-light); }
.privacy-section__lead { margin: 0 0 24px; font-size: 17px; line-height: 28px; color: var(--text-medium-on-dark); }
.privacy-section p { margin: 0 0 16px; font-size: 15px; line-height: 24px; color: var(--text-medium-on-dark); }
.privacy-section p:last-child { margin-bottom: 0; }
.privacy-section strong { color: var(--text-strong-on-dark); font-weight: 500; }

/* Table of contents */
.privacy-toc { margin-top: 24px; padding: 20px 24px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.privacy-toc__label { margin: 0 0 12px !important; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark) !important; }
.privacy-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 32px; }
.privacy-toc__list > li { break-inside: avoid; counter-increment: toc; padding: 6px 0; font-size: 14px; line-height: 20px; }
.privacy-toc__list > li::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--text-medium-on-dark); font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 0.5px; margin-right: 4px; }
.privacy-toc__list a { color: var(--text-strong-on-dark); border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; }
.privacy-toc__list a:hover { color: var(--text-strong-light); border-bottom-color: var(--accent); }

/* Subsection — H3 block inside a section */
.privacy-subsection { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-on-dark); }
.privacy-subsection:first-of-type { margin-top: 24px; }
.privacy-subsection__title { margin: 0 0 12px; font-family: var(--font-mix); font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: -0.2px; color: var(--text-strong-light); }

/* Lists inside the privacy long-form */
.privacy-list { margin: 0 0 16px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.privacy-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 24px; color: var(--text-medium-on-dark); }
.privacy-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.7; }
.privacy-list li strong { color: var(--text-strong-on-dark); font-weight: 500; }

/* Roles — two-card grid */
.privacy-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.privacy-role-card { padding: 20px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.privacy-role-card__label { margin: 0 0 8px !important; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--accent) !important; }
.privacy-role-card__body { margin: 0 !important; font-size: 15px; line-height: 24px; color: var(--text-medium-on-dark); }

/* Rights — two-col grid of emoji + title + body */
.privacy-rights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0 32px; }
.privacy-right { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.privacy-right__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--bg-depth-dark); border: 1px solid var(--border-on-dark); color: var(--accent); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.privacy-right__title { margin: 0 0 6px; font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 22px; color: var(--text-strong-light); }
.privacy-right__body { margin: 0 !important; font-size: 14px; line-height: 22px; color: var(--text-medium-on-dark); }

/* Authorities — two-card grid for UK/EU regulators */
.privacy-authorities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.privacy-authority { padding: 20px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.privacy-authority__label { margin: 0 0 8px !important; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark) !important; }
.privacy-authority__body { margin: 0 0 12px !important; font-size: 14px; line-height: 22px; color: var(--text-medium-on-dark); }
.privacy-authority .privacy-list li { font-size: 14px; line-height: 22px; }

/* Responsive — privacy page */
@media (max-width: 1024px) {
  .privacy-hero { padding: 128px 24px 24px; }
  .privacy-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .privacy-section { padding: 40px 24px; }
  .privacy-section__title { font-size: clamp(26px, 4vw, 32px); line-height: 1.15; }
}
@media (max-width: 768px) {
  .privacy-hero { padding: 112px 20px 20px; }
  .privacy-hero__title { font-size: 44px; line-height: 56px; margin-top: 8px; }
  .privacy-hero__subtitle { font-size: 16px; line-height: 24px; }
  .privacy-section { padding: 32px 20px; }
  .privacy-section__title { font-size: 22px; line-height: 28px; }
  .privacy-section__lead { font-size: 16px; line-height: 24px; margin-bottom: 20px; }
  .privacy-subsection { margin-top: 24px; padding-top: 20px; }
  .privacy-subsection__title { font-size: 18px; line-height: 24px; }
  .privacy-toc { padding: 16px 18px; }
  .privacy-toc__list { columns: 1; }
  .privacy-roles { grid-template-columns: 1fr; }
  .privacy-rights { grid-template-columns: 1fr; }
  .privacy-authorities { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .privacy-hero__title { font-size: 44px; line-height: 56px; }
  .privacy-right { padding: 16px; gap: 12px; }
  .privacy-right__icon { width: 32px; height: 32px; }
  .privacy-right__icon svg { width: 18px; height: 18px; }
}

/* ============================================================
   COOKIES PAGE — /cookies.html
   Long-form legal reading layout on the dark page bg. Centred
   720px reading column, numbered sections, lists, contact dl.
   Reuses .eyebrow, .brand, .btn, .cta. New: .cookies-hero,
   .cookies-section, .cookies-link, .cookies-contact.
   ============================================================ */

.cookies-hero { max-width: 720px; margin: 0 auto; padding: 160px 32px 32px; }
.cookies-hero__title { margin: 12px 0 16px; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.cookies-hero__subtitle { margin: 0 0 16px; font-size: 17px; line-height: 28px; color: var(--text-medium-on-dark); }
.cookies-hero__note { margin: 0 0 24px; font-size: 15px; line-height: 24px; color: var(--text-medium-on-dark); }
.cookies-hero__meta { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 11px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }

.cookies-section { max-width: 720px; margin: 0 auto; padding: 40px 32px; border-top: 1px solid var(--border-on-dark); }
.cookies-section__title { margin: 0 0 20px; font-family: var(--font-mix); font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: -0.3px; color: var(--text-strong-light); display: flex; align-items: baseline; gap: 12px; }
.cookies-section__num { font-family: var(--font-mono); font-weight: 300; font-size: 14px; letter-spacing: 0.6px; color: var(--text-medium-on-dark); flex: 0 0 auto; }
.cookies-section__sub { margin: 24px 0 12px; font-family: var(--font-mix); font-weight: 600; font-size: 18px; line-height: 24px; color: var(--text-strong-light); }
.cookies-section p { margin: 0 0 14px; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 26px; color: var(--text-strong-on-dark); }
.cookies-section p strong { font-weight: 500; color: var(--text-strong-light); }
.cookies-section ul { margin: 0 0 16px; padding: 0; list-style: none; }
.cookies-section ul li { position: relative; padding-left: 18px; margin-bottom: 8px; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 26px; color: var(--text-strong-on-dark); }
.cookies-section ul li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); }
.cookies-section ul li strong { font-weight: 500; color: var(--text-strong-light); }

.cookies-link { color: var(--accent); border-bottom: 1px solid rgba(172, 255, 182, 0.32); padding-bottom: 1px; word-break: break-word; }
.cookies-link:hover { border-color: var(--accent); }

.cookies-contact { display: grid; grid-template-columns: 220px 1fr; gap: 8px 24px; margin: 0 0 20px; }
.cookies-contact dt { font-family: var(--font-mono); font-weight: 300; font-size: 11px; line-height: 26px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.cookies-contact dd { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 26px; color: var(--text-strong-on-dark); }

/* Responsive — cookies page */
@media (max-width: 1024px) {
  .cookies-hero { padding: 128px 24px 24px; }
  .cookies-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .cookies-section { padding: 36px 24px; }
}
@media (max-width: 768px) {
  .cookies-hero { padding: 112px 20px 20px; }
  .cookies-hero__title { font-size: 44px; line-height: 56px; margin-top: 8px; }
  .cookies-hero__subtitle { font-size: 16px; line-height: 26px; }
  .cookies-section { padding: 32px 20px; }
  .cookies-section__title { font-size: 20px; line-height: 24px; gap: 8px; }
  .cookies-section__sub { font-size: 17px; line-height: 24px; }
  .cookies-section p, .cookies-section ul li { font-size: 15px; line-height: 24px; }
  .cookies-contact { grid-template-columns: 1fr; gap: 2px 0; }
  .cookies-contact dt { margin-top: 12px; }
  .cookies-contact dt:first-child { margin-top: 0; }
}
@media (max-width: 480px) {
  .cookies-hero__title { font-size: 44px; line-height: 56px; }
}

/* ============================================================
   CONTACT PAGE — /contact.html
   Centred reading column (720px) on the dark page bg. Hero
   mirrors the cookies/privacy rhythm. Reuses .eyebrow, .btn,
   .brand, .cta. New: .contact-hero, .contact-form-section,
   .contact-form (+ field / label / submit / msg / link).
   ============================================================ */

.contact-hero { max-width: 720px; margin: 0 auto; padding: 160px 32px 32px; }
.contact-hero__title { margin: 12px 0 16px; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.contact-hero__subtitle { margin: 0; font-size: 17px; line-height: 28px; color: var(--text-medium-on-dark); }

.contact-form-section { max-width: 720px; margin: 0 auto; padding: 24px 32px 120px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form__field { display: flex; flex-direction: column; gap: 8px; }
.contact-form__field--wide { grid-column: 1 / -1; }
.contact-form__label { font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.contact-form__field input,
.contact-form__field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); border-radius: 8px; color: var(--text-strong-light); font-family: var(--font-body); font-size: 15px; line-height: 22px; transition: border-color 0.15s ease; }
.contact-form__field input { height: 44px; padding: 0 14px; }
.contact-form__field textarea { resize: vertical; min-height: 140px; }
.contact-form__field input:focus,
.contact-form__field textarea:focus { outline: none; border-color: var(--accent); }
.contact-form__submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.contact-form__msg { font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); }
.contact-form__msg[data-state="error"] { color: var(--error); }
.contact-form__msg[data-state="ok"] { color: var(--accent); }
.contact-form__direct { grid-column: 1 / -1; margin: 16px 0 0; font-size: 14px; line-height: 22px; color: var(--text-medium-on-dark); }
.contact-form__link { color: var(--accent); border-bottom: 1px solid rgba(172, 255, 182, 0.32); padding-bottom: 1px; }
.contact-form__link:hover { border-color: var(--accent); }

/* Responsive — contact page */
@media (max-width: 1024px) {
  .contact-hero { padding: 128px 24px 24px; }
  .contact-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .contact-form-section { padding: 24px 24px 96px; }
}
@media (max-width: 768px) {
  .contact-hero { padding: 112px 20px 20px; }
  .contact-hero__title { font-size: 44px; line-height: 56px; margin-top: 8px; }
  .contact-hero__subtitle { font-size: 16px; line-height: 26px; }
  .contact-form-section { padding: 16px 20px 64px; }
  .contact-form { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .contact-hero__title { font-size: 44px; line-height: 56px; }
}

/* =========================================================
   PRICING PAGE — /pricing.html
   ---------------------------------------------------------
   Centered hero (pill eyebrow + H1 + subtitle), three pricing
   plan cards in a flex row (Core / Pro recommended / Org), each
   with a seat stepper that drives a live USD + EUR price, and a
   two-column FAQ block inside a full-bleed --bg-lift-dark band
   (single-open accordion). Reuses .brand, .btn, .faq-item /
   .security-accordion, .nav, .footer. New components: .pill-tag,
   .pricing-hero, .pricing-plans, .plan-card, .plan-feature,
   .plan-seat, .feat-badge, .feat-info, .pricing-faq.
   ========================================================= */

/* Pill tag — mint dot + uppercase label, used as the eyebrow
   above the hero and the FAQ heading. */
.pill-tag { display: inline-flex; align-items: center; gap: 12px; padding: 0; border-radius: 8px; }
.pill-tag__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.pill-tag__label { font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-strong-on-dark); }

/* Hero */
.pricing-hero { max-width: 744px; margin: 0 auto; padding: 128px 32px 56px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pricing-hero__title { margin: 0; font-family: var(--font-heading); font-weight: 750; font-size: 52px; line-height: 58px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.pricing-hero__title-muted { color: var(--text-strong-light); }
.pricing-hero__subtitle { margin: 0; max-width: 600px; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }

/* Plans row */
/* All tier cards share one height (align-items:stretch); the security line
   uses margin-top:auto so it bottom-aligns across cards regardless of how
   much content each tier has. */
.pricing-plans { display: flex; gap: 16px; align-items: stretch; padding: 0 32px; max-width: 1440px; margin: 0 auto; }
.plan-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); }
.plan-card--depth { background: var(--bg-depth-dark); }
/* Pro is the recommended plan — accent plan name ONLY (no border / glow;
   the Figma highlights the recommended tier purely via its green name). */
.plan-card--featured .plan-card__name { color: var(--accent); }

/* Name + price grouped (Figma "Plan Details" — gap compacted from 48 → 28
   so the full set of tiers fits in a typical laptop viewport). */
.plan-card__details { display: flex; flex-direction: column; gap: 28px; }
.plan-card__head { display: flex; align-items: flex-start; }
.plan-card__name { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 22px; line-height: 26px; color: var(--text-strong-on-dark); }
.plan-card__price { display: flex; align-items: flex-end; gap: 8px; min-height: 36px; }
.plan-card__amount { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 34px; line-height: 36px; color: var(--text-strong-light); white-space: nowrap; }
.plan-card__period { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }
/* Reserve a uniform pitch height (≈4 lines) so the CTA button sits at the
   same Y across all tier cards regardless of how many lines the
   description wraps to. Reset when cards stack (alignment is moot then). */
.plan-card__pitch { margin: 0; min-height: 88px; font-size: 15px; line-height: 22px; color: var(--text-strong-on-dark); }
/* Reserve room for the CTA subtext line even on cards that don't have one
   (Enterprise), so the "Everything in …, plus:" lead-ins line up across
   every tier. */
.plan-card__cta-group { display: flex; flex-direction: column; gap: 12px; min-height: 66px; }
.plan-card__cta { width: 100%; }
/* Personal "Join waitlist" — deliberately differentiated from the solid
   paid-tier buttons: glass/ghost shell + accent rim + mint dot, so the
   free pre-launch action reads as a distinct, lower-commitment path. */
.plan-card__cta--waitlist { background: var(--glass-dark); border-color: rgba(172, 255, 182, 0.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.plan-card__cta--waitlist:hover { background: rgba(172, 255, 182, 0.1); border-color: rgba(172, 255, 182, 0.55); }
.plan-card__cta--waitlist .btn__dot { background: var(--accent); }
.plan-card__cta-sub { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }

/* Seat row — single line: Min.  [−] n [+]  seats · €x/mo */
.plan-seat { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.plan-seat__min { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); }
.plan-seat__stepper { display: flex; align-items: center; gap: 8px; }
.plan-seat__btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--button-border-dark); background: var(--glass-dark); color: var(--accent); font-size: 14px; line-height: 1; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.plan-seat__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.plan-seat__count { min-width: 16px; text-align: center; font-size: 20px; line-height: 28px; color: var(--text-strong-on-dark); }
.plan-seat__summary { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); white-space: nowrap; }

/* Feature list — 3-col grid: check · text(flex) · info pinned right */
.plan-card__features { display: flex; flex-direction: column; gap: 16px; }
.plan-card__plus { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-strong-on-dark); }
/* Personal has no "Everything in …, plus:" line — this invisible spacer
   reserves the same box so its first section header lines up with the
   other tiers' first header. */
.plan-card__plus--spacer { visibility: hidden; }
.plan-card__feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* Group sub-header inside a feature list — quiet Geist Mono micro-label
   that breaks the long list into scannable sections. Extra top space
   separates a new group from the previous one (none before the first). */
.plan-feature-head { list-style: none; margin: 12px 0 0; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.plan-feature-head:first-child { margin-top: 0; }
.plan-feature { display: grid; grid-template-columns: 22px 1fr 22px; gap: 12px; align-items: start; }
.plan-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--accent); }
.plan-feature__icon svg { width: 16px; height: 16px; display: block; }
.plan-feature__main { min-width: 0; }
.plan-feature__label { font-size: 15px; line-height: 22px; color: var(--text-strong-on-dark); }

/* "Coming soon" inline badge — subtle pill, same treatment everywhere */
/* Quiet inline annotation (no pill / no box) — matches the site's
   Geist-Mono "·"-separated microcopy voice, e.g. the CTA sub-labels. */
.feat-badge { display: inline; font-family: var(--font-mono); font-weight: 300; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-medium-on-dark); white-space: nowrap; }
.feat-badge::before { content: "·"; margin: 0 6px; opacity: 0.55; }

/* Feature info icon (pinned right) + hover/focus tooltip */
.feat-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--text-medium-on-dark); cursor: help; }
.feat-info > svg { width: 16px; height: 16px; display: block; }
.feat-info:hover, .feat-info:focus-visible { color: var(--text-strong-on-dark); outline: none; }
.feat-info__tip { position: absolute; bottom: calc(100% + 8px); right: 0; transform: translateY(4px); width: 220px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-depth-dark); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32); font-family: var(--font-body); font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; color: var(--text-strong-on-dark); text-align: left; opacity: 0; visibility: hidden; transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; z-index: 5; pointer-events: none; }
.feat-info:hover .feat-info__tip, .feat-info:focus-visible .feat-info__tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* Security trust line — pinned to the card bottom (margin-top:auto) so it
   aligns across the equal-height tier cards; no divider rule. */
.plan-card__secure { display: flex; align-items: center; gap: 16px; margin-top: auto; font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); }
.plan-card__secure-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; color: var(--text-medium-on-dark); }
.plan-card__secure-icon svg { width: 16px; height: 16px; display: block; }

/* FAQ — full-bleed band, two-column (heading / accordion). Reuses .faq-item. */
.pricing-faq { margin-top: 160px; padding: 160px 32px; background: var(--bg-lift-dark); border-top: 1px solid var(--border-on-dark); border-bottom: 1px solid var(--border-on-dark); display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; }
.pricing-faq__head { flex: 0 0 451px; display: flex; flex-direction: column; gap: 24px; }
.pricing-faq__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 40px; line-height: 40px; color: var(--text-strong-light); }
.pricing-faq__list { flex: 0 1 680px; display: flex; flex-direction: column; gap: 16px; }
/* Lift the FAQ cards off the (already-lift) band so they read as cards */
.pricing-faq .faq-item { background: var(--bg-depth-dark); border-color: var(--border-on-dark); }

/* How actions work — full-bleed lift band, two-column (copy / examples),
   same rhythm as the FAQ band. */
.pricing-actions { margin-top: 120px; padding: 120px 32px; background: var(--bg-lift-dark); border-top: 1px solid var(--border-on-dark); border-bottom: 1px solid var(--border-on-dark); display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; }
.pricing-actions__head { flex: 0 0 451px; display: flex; flex-direction: column; gap: 20px; }
.pricing-actions__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 40px; line-height: 44px; color: var(--text-strong-light); }
.pricing-actions__body { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 23px; color: var(--text-medium-on-dark); }
.pricing-actions__body p { margin: 0; }
.pricing-actions__examples { list-style: none; margin: 0; padding: 0; flex: 0 1 680px; display: flex; flex-direction: column; gap: 12px; }
.action-eg { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-depth-dark); }
.action-eg__tag { flex-shrink: 0; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border-on-dark); border-radius: 999px; padding: 2px 10px; }
.action-eg__text { font-size: 15px; line-height: 22px; color: var(--text-strong-on-dark); }

/* Closing CTA — centered, mirrors the hero rhythm */
.pricing-close { max-width: 744px; margin: 0 auto; padding: 120px 32px 140px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pricing-close__title { margin: 0; font-family: var(--font-heading); font-weight: 750; font-size: 44px; line-height: 50px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.pricing-close__body { margin: 0; max-width: 520px; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }
.pricing-close__cta { margin-top: 4px; }

/* Access-request modal — Business / Business Pro trial CTAs. Dark glass
   dialog over a blurred scrim; reuses .btn / .brand. */
.pm-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 18, 16, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pm-overlay[hidden] { display: none; }
.pm-dialog { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 32px; border-radius: 12px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), 0 24px 60px rgba(0, 0, 0, 0.5); }
.pm-close { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--button-border-dark); background: var(--glass-dark); color: var(--text-medium-on-dark); }
.pm-close:hover { color: var(--text-strong-light); }
.pm-eyebrow { display: inline-block; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.pm-title { margin: 12px 0 0; font-family: var(--font-mix); font-weight: 600; font-size: 26px; line-height: 30px; color: var(--text-strong-light); }
.pm-intro { margin: 12px 0 0; font-size: 15px; line-height: 22px; color: var(--text-medium-on-dark); }
.pm-intro strong { color: var(--text-strong-on-dark); font-weight: 600; }
.pm-form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.pm-row { display: flex; gap: 12px; }
.pm-row .pm-field { flex: 1 1 0; min-width: 0; }
.pm-field { display: flex; flex-direction: column; gap: 6px; }
.pm-label { font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.pm-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--glass-dark); color: var(--text-strong-light); font-family: var(--font-body); font-size: 15px; line-height: 22px; }
.pm-input::placeholder { color: var(--text-faint-on-light); }
.pm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(172, 255, 182, 0.16); }
.pm-error { margin: -4px 0 0; font-size: 13px; line-height: 18px; color: var(--error); }
.pm-error[hidden] { display: none; }
.pm-submit { width: 100%; margin-top: 4px; }
.pm-success { text-align: center; }
.pm-success[hidden] { display: none; }
.pm-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: rgba(172, 255, 182, 0.14); color: var(--accent); }
.pm-success__icon svg { width: 22px; height: 22px; }
.pm-success .pm-title { margin-top: 16px; }
.pm-done { margin-top: 24px; }
@media (max-width: 480px) {
  .pm-dialog { padding: 24px; }
  .pm-row { flex-direction: column; gap: 16px; }
}

/* Responsive — pricing page */
@media (max-width: 1280px) {
  .pricing-hero { padding: 144px 32px 64px; }
  /* 4 cards → 2×2 before the full vertical stack at ≤1024 */
  .pricing-plans { flex-wrap: wrap; }
  .plan-card { flex: 1 1 calc(50% - 8px); }
  .pricing-actions { padding: 120px 32px; }
  .pricing-faq { padding: 120px 32px; }
}
@media (max-width: 1024px) {
  .pricing-hero { padding: 128px 24px 48px; }
  .pricing-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .pricing-plans { flex-direction: column; flex-wrap: nowrap; padding: 0 24px; }
  .plan-card { flex: 1 1 auto; width: 100%; padding: 28px; gap: 28px; }
  .plan-card__details { gap: 40px; }
  .plan-card__pitch { min-height: 0; }
  .pricing-actions { margin-top: 96px; padding: 96px 24px; flex-direction: column; gap: 40px; }
  .pricing-actions__head { flex: 0 0 auto; }
  .pricing-actions__examples { flex: 0 0 auto; width: 100%; }
  .pricing-actions__title { font-size: 32px; line-height: 36px; }
  .pricing-faq { margin-top: 96px; padding: 96px 24px; flex-direction: column; gap: 40px; }
  .pricing-faq__head { flex: 0 0 auto; }
  .pricing-faq__list { flex: 0 0 auto; width: 100%; }
  .pricing-faq__title { font-size: 32px; line-height: 36px; }
  .pricing-close { padding: 96px 24px 112px; }
  .pricing-close__title { font-size: 38px; line-height: 44px; }
}
@media (max-width: 768px) {
  .pricing-hero { padding: 112px 20px 32px; gap: 16px; }
  .pricing-hero__title { font-size: 44px; line-height: 56px; }
  .pricing-hero__subtitle { font-size: 15px; line-height: 23px; }
  .pricing-plans { padding: 0 20px; gap: 16px; }
  .plan-card { padding: 24px; gap: 24px; }
  .plan-card__details { gap: 32px; }
  .plan-card__amount { font-size: 32px; line-height: 36px; }
  .feat-info__tip { width: 180px; }
  .pricing-actions { margin-top: 80px; padding: 80px 20px; }
  .pricing-actions__title { font-size: 28px; line-height: 32px; }
  .pricing-faq { margin-top: 80px; padding: 80px 20px; }
  .pricing-faq__title { font-size: 28px; line-height: 32px; }
  .pricing-close { padding: 80px 20px 96px; }
  .pricing-close__title { font-size: 32px; line-height: 38px; }
}
@media (max-width: 480px) {
  .pricing-hero__title { font-size: 44px; line-height: 56px; }
  .plan-card { padding: 20px; }
}

/* ============================================================
   PRICING PAGE — slim cards + comparison matrix (/pricing.html)
   ------------------------------------------------------------
   LIVE. This is the shipped pricing layout (promoted from the
   former pricing-v2 A/B on 2026-05-19 — do NOT delete as
   "experimental"). Slim "must-know" cards (reuse .plan-card et
   al.) + a full-inclusion comparison matrix. Works together
   with the older `PRICING PAGE — /pricing.html` block above
   (shared .pricing-hero/.plan-card/.plan-feature/.pricing-faq/
   .pm-*/.full-bleed). New here: .plan-card__badge + the .pv2-*
   table + .pm-select/.pm-textarea (Enterprise modal).
   NOTE: a few rules in the older block are now unused on the
   live page (.plan-seat*, .feat-info*, .pricing-actions*,
   .pricing-close*, .plan-feature-head) — harmless dead CSS,
   flagged for a later cleanup pass.
   ============================================================ */

.u-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; }

/* "Recommended" pill on the featured card header */
.plan-card__head { justify-content: space-between; }
.plan-card__badge { display: none; }
.plan-card--featured .plan-card__head { width: 100%; }
.plan-card--featured .plan-card__badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--bg-dark); font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; white-space: nowrap; align-self: center; }

/* Comparison section — full-bleed dark band, same rhythm as the FAQ */
.pv2-compare { margin-top: 0; padding: 120px 32px; background: var(--bg-dark); display: flex; flex-direction: column; gap: 48px; align-items: center; }
.pv2-compare__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 720px; }
.pv2-compare__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 40px; line-height: 44px; color: var(--text-strong-light); }
.pv2-compare__sub { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-medium-on-dark); }
/* Default: no scroll container, so the table's <thead> sticks to the
   viewport (the page scroller) — keeps tier names visible while scrolling.
   Horizontal scroll only kicks in on narrow screens (media query below). */
.pv2-compare__wrap { width: 100%; max-width: 1100px; }

/* table-layout:fixed → the 4 tier columns are all the same width
   regardless of cell content; the feature-label column takes the rest. */
.pv2-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.pv2-table th, .pv2-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-on-dark); vertical-align: middle; }
.pv2-table thead th { font-family: var(--font-mix); font-weight: 600; font-size: 17px; line-height: 22px; color: var(--text-strong-light); border-bottom: 1px solid var(--border-on-dark); width: 18%; }
.pv2-table thead .pv2-table__corner { width: 28%; }
.pv2-table thead .pv2-table__corner, .pv2-table tfoot .pv2-table__corner { border-bottom: none; }
.pv2-table th[scope="row"] { text-align: left; font-family: var(--font-body); font-weight: 400; color: var(--text-strong-on-dark); white-space: normal; overflow-wrap: break-word; }
.pv2-table tbody td { color: var(--text-medium-on-dark); }
/* Sticky feature column so it stays visible while scrolling on narrow screens */
.pv2-table th[scope="row"], .pv2-table thead .pv2-table__corner, .pv2-table tfoot .pv2-table__corner { position: sticky; left: 0; background: var(--bg-dark); z-index: 1; }
/* Tier-name header row stays pinned (just below the fixed nav) while the
   page scrolls, so it's always clear which column is which. */
.pv2-table thead th { position: sticky; top: 88px; background: var(--bg-dark); z-index: 2; border-bottom: 1px solid var(--border-on-dark); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.55); }
.pv2-table thead .pv2-table__corner { position: sticky; top: 88px; left: 0; z-index: 3; }

/* Group divider rows */
.pv2-group th { text-align: left; padding: 28px 16px 10px; font-family: var(--font-mono); font-weight: 300; font-size: 11px; line-height: 14px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); border-bottom: 1px solid var(--border-on-dark); background: var(--bg-dark); }

/* Yes / no cell marks */
.pv2-yes { display: inline-block; color: var(--accent); font-size: 16px; line-height: 1; }
.pv2-no { display: inline-block; color: var(--text-faint-on-light); font-size: 14px; line-height: 1; }

/* Recommended (Business) column emphasis */
.pv2-col--rec { background: rgba(172, 255, 182, 0.06); }
.pv2-table thead th.pv2-col--rec { color: var(--accent); }
.pv2-table tbody td.pv2-col--rec { color: var(--text-strong-on-dark); }

.pv2-table tfoot td { border-bottom: none; padding-top: 20px; }
.pv2-table tfoot .btn { width: 100%; }

/* Enterprise modal extras — native select + textarea on the .pm-input shell */
.pm-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9b3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.pm-select:invalid { color: var(--text-medium-on-dark); }
.pm-select option { color: #232c27; }
.pm-textarea { min-height: 88px; resize: vertical; }

@media (max-width: 1024px) {
  .pv2-compare { padding: 96px 24px; gap: 40px; }
  .pv2-compare__title { font-size: 32px; line-height: 36px; }
}
@media (max-width: 768px) {
  .pv2-compare { padding: 80px 16px; }
  .pv2-compare__title { font-size: 28px; line-height: 32px; }
  /* Narrow screens: allow horizontal scroll of the matrix. (Trade-off:
     within a scroll container the sticky header pins to the wrap, not the
     page — acceptable on mobile where the table is scrolled directly.) */
  .pv2-compare__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pv2-table th, .pv2-table td { padding: 12px 12px; font-size: 13px; }
  .pv2-table thead th { font-size: 15px; top: 0; }
}

/* ============================================================
   COMPARISON PAGE — /readywhen-granola.html
   "readywhen vs {tool}" template. Dark hero + dark "quick
   answer" band, a continuous full-bleed --bg-light region
   (differentiator cards, side-by-side table, life-easier grid,
   review quotes, connect block, related links), then a dark
   two-column FAQ. Reuses .btn, .brand, .eyebrow, .cert-badge,
   .section-title(--dark), .section-subtitle, .faq-item /
   .security-accordion, the .connector-tile__icon resolver, and
   the .ai-acts green-gradient mock language. New: .cmp-* set.
   ============================================================ */

/* Hero (dark) */
.cmp-hero { display: flex; flex-direction: column; gap: 64px; max-width: 1440px; margin: 0 auto; padding: 200px 32px 32px; background: var(--bg-dark); }
.cmp-hero__head { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.cmp-hero__title { margin: 0; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); max-width: 796px; }
.cmp-hero__subtitle { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); max-width: 782px; }
.cmp-hero__cta { align-self: flex-start; }

/* Hero visual — green-gradient stage (raw input) + readywhen "done" panel */
/* Hero visual — two panels proportioned exactly like Figma: a 1376×488 row
   split 448 : 912 (16px gap). The flex-grow ratio + matching aspect-ratios
   give both panels equal height at any width. Both are flattened image-fill
   layers the Figma MCP can't export, supplied by the designer as 4× PNGs. */
.cmp-hero__visual { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.cmp-hero__stage { position: relative; flex: 448 1 0; min-width: 0; aspect-ratio: 448 / 488; border-radius: 8px; border: 1px solid var(--border-on-dark); overflow: hidden; }
.cmp-hero__stage-bg, .cmp-hero__done-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Gmail card dead-centre in the panel (Figma: 266×159, x/y centred). */
.cmp-hero__card { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 59%; max-width: 266px; height: auto; display: block; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.18)); }
/* Inky anchored to the panel's bottom-left, behind the card — peeking out
   and clipped by the panel edges (matches the Figma reference). */
.cmp-hero__inky { position: absolute; z-index: 1; left: -1%; bottom: -1%; width: 47%; max-width: 211px; height: auto; pointer-events: none; transform-origin: 40% 45%; animation: octo-bob 5.5s ease-in-out infinite, octo-sway 7.3s ease-in-out infinite; }
/* Right panel — 912×488. Approval card centred; "Draft ready" pill floats
   ABOVE it with a real gap (Figma: ~25px clear, NOT overlapping); the
   pill+card group is vertically centred. */
.cmp-hero__done { position: relative; flex: 912 1 0; min-width: 0; aspect-ratio: 912 / 488; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border-on-dark); overflow: hidden; }
.cmp-hero__done-stack { position: relative; z-index: 1; width: 38.4%; max-width: 350px; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.7vw, 24px); }
.cmp-hero__done-pill { position: relative; z-index: 2; width: 72%; height: auto; display: block; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.16)); }
.cmp-hero__done-card { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.2)); }

/* Quick answer / Who this page is for (dark band) */
.cmp-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 64px; max-width: 1440px; margin: 0 auto; padding: 120px 32px; background: var(--bg-dark); }
.cmp-quick__col { max-width: 656px; }
.cmp-quick__title { margin: 0 0 32px; font-family: var(--font-mix); font-weight: 600; font-size: 32px; line-height: 36px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.cmp-quick__body { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }

/* ---- Continuous full-bleed light region ---- */
.cmp-diff, .cmp-table-section, .cmp-easier, .cmp-quotes, .cmp-connect, .cmp-related {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: var(--bg-light); box-sizing: border-box;
  padding-left: max(32px, calc((100vw - 1440px) / 2 + 32px));
  padding-right: max(32px, calc((100vw - 1440px) / 2 + 32px));
}
/* Section bg alternates per Figma: base (#f3f7f3) vs depth (#eff4ef).
   diff/easier/connect/related = base; table + quotes = depth. */
.cmp-table-section, .cmp-quotes { background: var(--bg-depth-light); }

/* What makes readywhen different */
.cmp-diff { position: relative; overflow: hidden; padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
/* Subtle green radial glow centred behind the cards (Figma Ellipse 39025:1087;
   same treatment as .testimonials__glow / .cta__glow). */
.cmp-diff__glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1030px; height: 1030px; max-width: 130vw; background: radial-gradient(circle, rgba(172, 255, 182, 0.22) 0%, rgba(172, 255, 182, 0.08) 30%, rgba(172, 255, 182, 0) 62%); pointer-events: none; z-index: 0; }
.cmp-diff__head, .cmp-diff__cards, .cmp-diff__closer { position: relative; z-index: 1; }
.cmp-diff__head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cmp-diff__cards { display: flex; align-items: stretch; gap: 16px; width: 100%; max-width: 904px; }
.cmp-diff-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 64px; padding: 24px; border-radius: 8px; }
.cmp-diff-card--rival { background: var(--bg-depth-light); border: 1px solid var(--border-on-light); }
.cmp-diff-card--rw { background: var(--bg-lift-dark); border: 1px solid var(--border-on-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.cmp-diff-card__logo { width: 28px; height: 28px; display: inline-flex; align-items: center; border-radius: 6px; overflow: hidden; }
.cmp-diff-card__logo img, .cmp-diff-card__logo svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.cmp-diff-card__logo--rw { width: auto; height: 28px; border-radius: 0; }
.cmp-diff-card__logo--rw img { width: auto; height: 28px; }
.cmp-diff-card__body { margin: 0; font-size: 16px; line-height: 24px; }
.cmp-diff-card--rival .cmp-diff-card__body { color: var(--text-medium-on-light); }
.cmp-diff-card--rw .cmp-diff-card__body { color: var(--text-strong-on-dark); }
.cmp-diff__closer { margin: 0; max-width: 679px; text-align: center; font-family: var(--font-mix); font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: 0; color: var(--text-strong-dark); }

/* Side by side table */
.cmp-table-section { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.cmp-table-section__head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* Side-by-side table — column-major, pixel-matched to Figma node 39025:1116.
   3 vertical cards (Capability 384 / readywhen 496 / Granola 496) inside one
   rounded bordered container; vertical dividers only (no horizontal row
   borders); readywhen column lifted (#f8faf8). Per-column flex stack with
   93px gaps; group label (Geist Mono 12/16 uppercase) only in the Capability
   column, blank 16px spacer aligns the other two; rows Geist 20/28 (cap =
   Bold). Source-of-truth content supersedes the Figma's placeholder copy. */
.cmp-table { display: flex; align-items: stretch; width: 100%; max-width: 1376px; border: 1px solid var(--border-on-light); border-radius: 8px; overflow: hidden; }
.cmp-table__col { min-width: 0; display: flex; flex-direction: column; gap: 93px; padding: 24px; background: var(--bg-light); }
.cmp-table__col--cap { flex: 384 1 0; }
.cmp-table__col--rw { flex: 496 1 0; background: #f8faf8; border-left: 1px solid var(--border-on-light); }
.cmp-table__col--rival { flex: 496 1 0; background: var(--bg-depth-light); border-left: 1px solid var(--border-on-light); }
.cmp-table__title { margin: 0; min-height: 36px; display: flex; align-items: center; font-family: var(--font-mix); font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: 0; color: var(--text-strong-dark); }
.cmp-table__title--logo img { height: 36px; width: auto; display: block; }
.cmp-table__group { display: flex; flex-direction: column; gap: 16px; }
.cmp-table__glabel { margin: 0; height: 16px; font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-light); }
.cmp-table__cell { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 28px; color: var(--text-strong-on-light); }
.cmp-table__cell--cap { font-weight: 700; }
.cmp-table__cell--rival { color: var(--text-medium-on-light); }

/* readywhen actually makes your life easier */
.cmp-easier { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.cmp-easier__head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* Figma node 37221:4945 caps this heading at a 624px box so it wraps to two
   lines (Season Mix 48/48); without the cap it sits on one over-wide line. */
.cmp-easier__head .section-title { max-width: 624px; }
.cmp-easier__table { width: 100%; max-width: 1376px; border: 1px solid var(--border-on-light); border-radius: 8px; overflow: hidden; }
.cmp-easier__row { display: flex; }
.cmp-easier__row + .cmp-easier__row { border-top: 1px solid var(--border-on-light); }
.cmp-easier__col { flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 12px; background: #f8faf8; }
.cmp-easier__col + .cmp-easier__col { border-left: 1px solid var(--border-on-light); }
/* Figma column gap 48 (icon → text), text block title→desc 12. col gap is
   12; the extra 36 here lifts icon→title to 48. */
.cmp-easier__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 36px; border-radius: 8px; border: 1px solid var(--border-on-light); background: var(--bg-depth-light); color: var(--text-strong-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.cmp-easier__title { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--text-strong-on-light); }
.cmp-easier__desc { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-medium-on-light); }
.cmp-easier__desc .cert-badge { background: rgba(50, 154, 63, 0.08); border-color: rgba(50, 154, 63, 0.28); color: var(--accent-darker); }

/* Where Granola excels / weaker / both — quote cards */
.cmp-quotes { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 64px; }
.cmp-quotes__pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 64px; width: 100%; max-width: 1376px; margin: 0 auto; }
.cmp-quotes__full { width: 100%; max-width: 1376px; margin: 0 auto; }
/* Figma block: header(title→lead, gap 32) then card, header→card gap 64. */
.cmp-quotes__block { display: flex; flex-direction: column; }
.cmp-quotes__title { margin: 0 0 32px; font-family: var(--font-mix); font-weight: 600; font-size: 32px; line-height: 36px; letter-spacing: -0.5px; color: var(--text-strong-dark); }
.cmp-quotes__lead { margin: 0 0 64px; font-size: 16px; line-height: 24px; color: var(--text-medium-on-light); }
.cmp-quote-card { margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; border-radius: 8px; background: #f8faf8; border: 1px solid var(--border-on-light); min-height: 367px; }
.cmp-quote-card--wide { min-height: 0; }
.cmp-quote-card__quote { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--text-strong-dark); }
.cmp-quote-card--wide .cmp-quote-card__quote { font-size: 20px; line-height: 28px; }
.cmp-quote-card__by { display: flex; flex-direction: column; gap: 4px; }
.cmp-quote-card__name { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-strong-on-light); }
.cmp-quote-card__role { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--text-medium-on-light); }

/* readywhen connects to Granola */
.cmp-connect { padding-top: 120px; padding-bottom: 120px; display: flex; align-items: stretch; gap: 16px; }
/* "Works with" media card — Figma IMG node 39025:1319 (680×415): exported
   green BG fill + readywhen lockup left-centred + a vertical masked rail of
   glass app tiles. The page's subject app gets `--focus` (full opacity);
   the rest are dimmed — swap the focus slug per comparison page. */
.cmp-connect__media { position: relative; flex: 1 1 0; min-width: 0; min-height: 415px; border-radius: 8px; border: 1px solid var(--border-on-light); overflow: hidden; }
.cmp-connect__media-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cmp-connect__lockup { position: absolute; left: 14%; top: 50%; transform: translateY(-50%); z-index: 1; }
.cmp-connect__lockup img { height: 48px; width: auto; display: block; }
.cmp-connect__rail { position: absolute; left: 66%; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; flex-direction: column; gap: 15px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); pointer-events: none; }
.cmp-connect__tile { width: 77px; height: 77px; flex-shrink: 0; border-radius: 9.5px; display: flex; align-items: center; justify-content: center; background: var(--glass-light); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--button-border-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); opacity: 0.5; }
.cmp-connect__tile--focus { opacity: 1; }
.cmp-connect__tile img, .cmp-connect__tile svg { width: 36px; height: 36px; object-fit: contain; display: block; border-radius: 8px; }
.cmp-connect__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; justify-content: center; padding: 48px; }
.cmp-connect__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 48px; line-height: 48px; letter-spacing: -0.5px; color: var(--text-strong-dark); }
.cmp-connect__body { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-strong-on-light); max-width: 584px; }
.cmp-connect__cta { margin-top: 0; }

/* Related comparisons */
.cmp-related { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 80px; }
.cmp-related__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 40px; line-height: 40px; letter-spacing: 0; color: var(--text-strong-dark); }
.cmp-related__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; max-width: 1376px; }
.cmp-related__link { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text-strong-on-light); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.14em; white-space: nowrap; }
.cmp-related__link:hover { color: var(--text-strong-dark); }

/* FAQ (dark, two-column — heading left, accordion right) */
.cmp-faq { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; max-width: 1440px; margin: 0 auto; padding: 160px 32px; background: var(--bg-dark); }
.cmp-faq__head { flex: 0 0 451px; }
.cmp-faq__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 40px; line-height: 40px; letter-spacing: 0; color: var(--text-strong-light); }
.cmp-faq__list { flex: 0 1 680px; gap: 8px; }
/* FAQ item — Figma 39025:1375: 24px padding, 32px question→answer gap,
   Geist Medium 16/24 question, Geist Regular 16/24 answer. */
.cmp-faq .faq-item__head { padding: 24px; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; }
.cmp-faq .faq-item__body { padding: 8px 24px 24px; font-size: 16px; line-height: 24px; }
.cmp-faq__link { color: var(--accent); border-bottom: 1px solid rgba(172, 255, 182, 0.32); padding-bottom: 1px; }
.cmp-faq__link:hover { border-color: var(--accent); }
/* +/- circle toggle (Figma "Circle" small secondary) replaces the chevron */
.faq-item__toggle { position: relative; flex-shrink: 0; width: 36px; height: 28px; border-radius: 8px; border: 1px solid var(--button-border-dark); background: var(--glass-dark); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.faq-item__toggle::before, .faq-item__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--accent); border-radius: 1px; }
.faq-item__toggle::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.faq-item__toggle::after { width: 2px; height: 10px; transform: translate(-50%, -50%); transition: opacity 0.2s ease; }
.faq-item[open] .faq-item__toggle::after { opacity: 0; }

/* Responsive — comparison page */
@media (max-width: 1280px) {
  .cmp-hero { padding: 180px 32px 32px; }
  .cmp-faq { padding: 120px 32px; }
}
@media (max-width: 1024px) {
  .cmp-hero { padding: 140px 24px 28px; gap: 48px; }
  .cmp-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .cmp-hero__visual { flex-direction: column; }
  .cmp-hero__stage, .cmp-hero__done { flex: 0 0 auto; width: 100%; aspect-ratio: auto; min-height: 380px; }
  .cmp-quick { padding: 96px 24px; gap: 48px; }
  .cmp-quick__title { font-size: clamp(26px, 4vw, 32px); line-height: 1.15; }
  .cmp-diff, .cmp-table-section, .cmp-easier, .cmp-quotes, .cmp-connect, .cmp-related {
    padding-left: 24px; padding-right: 24px;
  }
  .cmp-diff { padding-top: 96px; padding-bottom: 64px; }
  .cmp-table-section, .cmp-easier, .cmp-quotes, .cmp-connect { padding-top: 64px; padding-bottom: 64px; }
  .cmp-related { padding-top: 64px; padding-bottom: 96px; }
  .cmp-diff__cards { flex-direction: column; max-width: 560px; }
  .cmp-diff-card { gap: 32px; }
  .cmp-diff__closer { font-size: clamp(22px, 4vw, 28px); line-height: 1.25; }
  .cmp-table__col { gap: 64px; padding: 20px; }
  .cmp-table__title { font-size: 24px; line-height: 28px; }
  .cmp-table__cell { font-size: 18px; line-height: 26px; }
  .cmp-easier__row { flex-wrap: wrap; }
  .cmp-easier__col { flex: 0 0 50%; min-width: 50%; }
  .cmp-easier__col:nth-child(3) { border-left: none; border-top: 1px solid var(--border-on-light); }
  .cmp-easier__col:nth-child(odd) { border-right: 1px solid var(--border-on-light); border-left: none; }
  .cmp-quotes__pair { grid-template-columns: 1fr; gap: 40px; }
  .cmp-connect { flex-direction: column; }
  .cmp-connect__media { min-height: 360px; }
  .cmp-connect__text { padding: 40px 8px 8px; }
  .cmp-connect__title { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.15; }
  .cmp-related__grid { grid-template-columns: repeat(3, 1fr); }
  .cmp-faq { flex-direction: column; gap: 40px; padding: 96px 24px; }
  .cmp-faq__head { flex: 0 0 auto; }
  .cmp-faq__list { flex: 0 0 auto; width: 100%; }
  .cmp-faq__title { font-size: 36px; line-height: 40px; }
}
@media (max-width: 768px) {
  .cmp-hero { padding: 116px 20px 24px; gap: 40px; }
  .cmp-hero__title { font-size: 44px; line-height: 56px; }
  .cmp-hero__subtitle { font-size: 15px; line-height: 23px; }
  .cmp-hero__stage, .cmp-hero__done { min-height: 320px; }
  .cmp-hero__card { width: 64%; }
  .cmp-quick { grid-template-columns: 1fr; padding: 64px 20px; gap: 32px; }
  .cmp-quick__title { font-size: 28px; line-height: 32px; }
  .cmp-diff, .cmp-table-section, .cmp-easier, .cmp-quotes, .cmp-connect, .cmp-related {
    padding-left: 20px; padding-right: 20px;
  }
  .cmp-diff { padding-top: 64px; padding-bottom: 48px; gap: 40px; }
  .cmp-table-section, .cmp-easier, .cmp-quotes, .cmp-connect { padding-top: 56px; padding-bottom: 56px; gap: 40px; }
  .cmp-related { padding-top: 56px; padding-bottom: 64px; gap: 32px; }
  /* Table keeps its 3-column structure; metrics tighten to fit small screens */
  .cmp-table__col { gap: 40px; padding: 14px; }
  .cmp-table__title { font-size: 19px; line-height: 24px; min-height: 28px; }
  .cmp-table__title--logo img { height: 26px; }
  .cmp-table__group { gap: 12px; }
  .cmp-table__glabel { font-size: 10px; letter-spacing: 0.5px; }
  .cmp-table__cell { font-size: 14px; line-height: 20px; }
  .cmp-easier__col { flex: 0 0 100% !important; min-width: 100% !important; padding: 24px 20px; }
  .cmp-easier__col + .cmp-easier__col { border-left: none !important; border-top: 1px solid var(--border-on-light); }
  .cmp-easier__title { font-size: 18px; line-height: 26px; }
  .cmp-quotes__pair { gap: 32px; }
  .cmp-quotes__title { font-size: 24px; line-height: 30px; }
  .cmp-quote-card { padding: 24px; gap: 32px; min-height: 0; }
  .cmp-quote-card__quote { font-size: 19px; line-height: 27px; }
  .cmp-quote-card--wide .cmp-quote-card__quote { font-size: 22px; line-height: 30px; }
  .cmp-connect__title { font-size: 36px; line-height: 40px; }
  .cmp-connect__text { padding: 32px 4px 4px; }
  .cmp-connect__lockup img { height: 36px; }
  .cmp-connect__tile { width: 60px; height: 60px; border-radius: 8px; }
  .cmp-connect__tile img, .cmp-connect__tile svg { width: 28px; height: 28px; }
  .cmp-related__title { font-size: 30px; line-height: 34px; }
  .cmp-related__grid { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
  .cmp-related__link { white-space: normal; }
  .cmp-faq { padding: 64px 20px; gap: 32px; }
  .cmp-faq__title { font-size: 30px; line-height: 34px; }
}
@media (max-width: 480px) {
  .cmp-hero__title { font-size: 44px; line-height: 56px; }
  .cmp-hero__stage, .cmp-hero__done { min-height: 280px; }
  .cmp-hero__card { width: 70%; }
  .cmp-related__grid { grid-template-columns: 1fr; }
  .cmp-faq__title { font-size: 26px; line-height: 30px; }
}

/* ============================================================
   COMPARISON — cited-evidence layer (.cmp-evidence)
   Reusable across every comparison page; multiple items per page.
   Reads as "verified external proof", deliberately distinct from the
   marketing testimonial cards: an accent left-rule, the verbatim
   quote, then a muted Geist-Mono source meta row with a working deep
   link to the exact source location. Light full-bleed band (base
   #f3f7f3) consistent with the rest of the COMPARISON light region.
   ============================================================ */
.cmp-evidence { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--bg-light); box-sizing: border-box; padding: 120px max(32px, calc((100vw - 1440px) / 2 + 32px)); display: flex; flex-direction: column; align-items: center; gap: 64px; }
.cmp-evidence__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cmp-evidence__list { width: 100%; max-width: 920px; display: flex; flex-direction: column; gap: 32px; }
.cmp-evidence__item { border-left: 3px solid var(--accent-darker); padding-left: 24px; }
.cmp-evidence__quote { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 30px; color: var(--text-strong-dark); }
.cmp-evidence__meta { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-family: var(--font-mono); font-weight: 300; font-size: 11px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-light); }
.cmp-evidence__src { color: var(--text-medium-on-light); }
.cmp-evidence__supports { color: var(--text-faint-on-light); }
.cmp-evidence__link { color: var(--accent-darker); border-bottom: 1px solid rgba(50, 154, 63, 0.32); padding-bottom: 1px; }
.cmp-evidence__link:hover { border-color: var(--accent-darker); }
@media (max-width: 1024px) {
  .cmp-evidence { padding-left: 24px; padding-right: 24px; padding-top: 96px; padding-bottom: 96px; gap: 48px; }
}
@media (max-width: 768px) {
  .cmp-evidence { padding-left: 20px; padding-right: 20px; padding-top: 64px; padding-bottom: 64px; gap: 40px; }
  .cmp-evidence__quote { font-size: 17px; line-height: 26px; }
  .cmp-evidence__item { padding-left: 18px; }
}

/* ============================================================
   BLOG ARTICLE PAGE — /blog/{slug}.html
   Long-form reading column on the dark page bg. Same vertical
   rhythm as the comparison page hero (200/180/140/116 padding-top
   across breakpoints) and the security/cookies reading-column
   pattern. Inky bobs between the standfirst and the body (no
   header image). Reuses .eyebrow, .brand, .cta, .nav, .footer
   web components + the shared octo-bob/octo-sway keyframes.
   New components: .article*, .article-hero*, .article-inky,
   .article-body (typographic element styles), .article-spec,
   .article-quote.
   ============================================================ */

.article { background: var(--bg-dark); }

/* Hero — centred reading column, slightly wider than the body so
   the H1 has room to breathe. Padding-top mirrors .cmp-hero. */
/* Hero header closes with a hairline (padding-bottom is carried in the
   responsive padding shorthands below, so it survives those overrides). */
.article-hero { max-width: 820px; margin: 0 auto; padding: 200px 32px 40px; display: flex; flex-direction: column; align-items: flex-start; }
.article-hero .eyebrow { margin-bottom: 16px; }
.article-hero__title { margin: 0; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); }
.article-hero__lead { margin: 24px 0 0; font-size: 20px; line-height: 28px; color: var(--text-medium-on-dark); }
/* Byline = two voices: identity (warm, human Geist) over logistics
   (cool mono labels). Reusable component — every imported post fills
   the same slots; [data-read-time] is auto-filled by article-toc.js. */
.article-byline { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.article-byline__author { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--text-strong-light); }
.article-byline__by { color: var(--text-medium-on-dark); font-weight: 400; }
.article-byline__link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-strong-light); transition: color 0.15s ease; }
.article-byline__link:hover { color: var(--accent); }
.article-byline__li { flex: 0 0 auto; width: 16px; height: 16px; }
.article-byline__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.article-byline__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint-on-light); flex-shrink: 0; }

/* Inky bobs between the standfirst and the body — no header image. The
   header→body divider now lives HERE, not as a hero border: the row is
   [line ── gap ── Inky ── (empty) ]. Only the LEFT 1px segment
   (::before) is visible; ::after is an invisible flex spacer of equal
   weight so Inky stays horizontally centred while the rule exists only
   to its left. A big negative margin-top lifts the whole row up into
   the hero so the top of Inky's head aligns with the author block;
   z-index keeps it above the hero box. The negative margin is the
   knob for how high Inky rides; `gap` = the margin before Inky. */
.article-inky { position: relative; z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: -132px; padding: 16px 32px 56px; }
.article-inky::before, .article-inky::after { content: ""; flex: 1 1 0; height: 1px; }
.article-inky::before { background: var(--border-on-dark); }
.article-inky img { flex: 0 0 auto; width: 256px; height: auto; max-width: 100%; pointer-events: none; transform-origin: 50% 35%; animation: octo-bob 5.5s ease-in-out infinite, octo-sway 7.3s ease-in-out infinite; }

/* Body — narrower measure for comfortable reading (~70 chars). */
.article-body { max-width: 720px; margin: 0 auto; padding: 0 32px 120px; }
.article-body > * { margin: 0; }
.article-body > * + * { margin-top: 24px; }
.article-body p { font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 30px; color: var(--text-strong-on-dark); }
.article-body strong { color: var(--text-strong-light); font-weight: 500; }
.article-body a { color: var(--accent); border-bottom: 1px solid rgba(172, 255, 182, 0.32); padding-bottom: 1px; }
.article-body a:hover { border-color: var(--accent); }
.article-body .brand { color: var(--text-strong-light); }

/* Headings — Season Mix, with extra space above to separate sections. */
.article-body h2 { font-family: var(--font-mix); font-weight: 600; font-size: 32px; line-height: 36px; letter-spacing: -0.5px; color: var(--text-strong-light); margin-top: 80px; scroll-margin-top: 104px; }
.article-body h2 + * { margin-top: 16px; }
.article-body h3 { font-family: var(--font-mix); font-weight: 600; font-size: 24px; line-height: 28px; letter-spacing: 0; color: var(--text-strong-light); margin-top: 48px; }
.article-body h3 + * { margin-top: 12px; }
.article-body h4.article-body__product { font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--text-strong-light); margin-top: 40px; padding-left: 14px; border-left: 2px solid var(--accent); }
.article-body h4.article-body__product + * { margin-top: 12px; }

/* Geist-Mono uppercase mini-label inside the body ("Key characteristics"). */
.article-body__kicker { font-family: var(--font-mono) !important; font-weight: 300 !important; font-size: 12px !important; line-height: 16px !important; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark) !important; margin-top: 32px; }
.article-body__kicker + ul { margin-top: 16px; }

/* Lists. Unordered lists swap the default marker for a mint Lucide
   arrow (public/icons/arrow-right.svg) applied as a CSS mask, so it
   recolours to --accent regardless of the icon's baked stroke and
   needs zero per-<li> markup — every imported post inherits it.
   Ordered lists keep numbers (sequence carries meaning there). */
.article-body ul, .article-body ol { color: var(--text-strong-on-dark); font-size: 20px; line-height: 30px; }
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul li { position: relative; padding-left: 32px; }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; background-color: var(--accent); -webkit-mask: url('../public/icons/arrow-right.svg') no-repeat center / contain; mask: url('../public/icons/arrow-right.svg') no-repeat center / contain; }
.article-body ol { padding-left: 22px; }
.article-body li { margin: 8px 0; }
.article-body ol li::marker { color: var(--text-faint-on-light); }

/* Product / framework rundown — bordered glass block holding the
   "Best at / Ideal user / Key limitation" pairs. Each <p> is a
   label + description: the label (leading <strong>) is promoted to
   its own line as a Geist-Mono micro-header (same label voice as
   .article-body__kicker / .eyebrow), description sits below it. */
.article-spec { padding: 24px; border: 1px solid var(--border-on-dark); border-radius: 8px; background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); }
.article-spec p { font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }
.article-spec p strong { display: block; margin: 0 0 6px; font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-strong-light); }
.article-spec p + p { margin-top: 20px; }

/* Pull quote */
.article-quote { margin-top: 48px; padding: 0 0 0 24px; border-left: 2px solid var(--accent); font-family: var(--font-mix); font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.2px; color: var(--text-strong-light); }
.article-quote + * { margin-top: 48px; }

/* Floating "On this page" TOC — dynamically built by scripts/article-toc.js
   from the article's H2 sections. Fixed in the left gutter beside the 720px
   reading column (column left edge sits at ~50vw-360px, so the rail's right
   edge lands ~48px to its left at >=1440 and tightens gracefully down to
   1280). Fades + slides in once the reader scrolls past the hero; the active
   section gets a mint left-rule. Hidden <=1280 (no gutter room). */
.article-toc { position: fixed; top: 50%; left: max(24px, calc(50% - 628px)); width: 220px; max-height: 72vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; z-index: 8; opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(-8px); transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 360ms; pointer-events: none; scrollbar-width: none; }
.article-toc::-webkit-scrollbar { width: 0; height: 0; }
.article-toc.is-visible { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.article-toc__label { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.article-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border-on-dark); }
.article-toc__item { margin: 0; }
.article-toc__link { display: block; margin-left: -1px; padding: 8px 0 8px 16px; border-left: 2px solid transparent; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); transition: color 0.15s ease, border-color 0.15s ease; }
.article-toc__link:hover { color: var(--text-strong-on-dark); }
.article-toc__link--active { color: var(--text-strong-light); border-left-color: var(--accent); }

/* Floating promo card — mirrors the TOC on the opposite (right) gutter.
   Static brand copy (homepage value prop) + the standard primary trial
   CTA; same fade/slide-in driven by scripts/article-toc.js, same ≤1280
   hide. Glass-dark card matching .article-spec / security-card. */
.article-aside { position: fixed; top: 50%; right: max(24px, calc(50% - 688px)); width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid var(--border-on-dark); border-radius: 8px; background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); z-index: 8; opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(8px); transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 360ms; pointer-events: none; }
.article-aside.is-visible { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.article-aside__bar { width: 28px; height: 3px; border-radius: 2px; background: var(--accent); }
.article-aside__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 20px; line-height: 24px; color: var(--text-strong-light); }
.article-aside__title em { font-family: var(--font-mix); font-style: italic; font-weight: 500; }
.article-aside__body { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); }
.article-aside__body .brand { color: var(--text-strong-on-dark); }
.article-aside__cta { width: 100%; }
.article-aside__micro { margin: 0; font-family: var(--font-mono); font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }

/* Responsive — blog article page (matches the site's breakpoint cadence) */
@media (max-width: 1280px) {
  .article-hero { padding: 180px 32px 40px; }
  .article-toc, .article-aside { display: none; }
}
@media (max-width: 1024px) {
  .article-hero { padding: 140px 24px 36px; }
  .article-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .article-inky { gap: 24px; margin-top: -124px; padding: 14px 24px 48px; }
  .article-body { padding: 0 24px 96px; }
}
@media (max-width: 768px) {
  .article-hero { padding: 116px 20px 32px; }
  .article-hero__title { font-size: 36px; line-height: 40px; }
  .article-hero__lead { font-size: 18px; line-height: 26px; }
  /* Inky sits BELOW the byline on mobile (the desktop negative pull-up
     overlapped the byline on the narrower layout). */
  .article-inky { gap: 20px; margin-top: 16px; padding: 12px 20px 44px; }
  /* No divider line next to Inky on mobile (keeps it centred via the flex
     spacer, just no visible rule). */
  .article-inky::before { background: none; }
  .article-inky img { width: 208px; }
  .article-body { padding: 0 20px 64px; }
  .article-body p, .article-body ul, .article-body ol { font-size: 18px; line-height: 28px; }
  .article-body ul li { padding-left: 28px; }
  .article-body ul li::before { width: 16px; height: 16px; top: 6px; }
  .article-body h2 { font-size: 28px; line-height: 32px; margin-top: 56px; }
  .article-body h3 { font-size: 20px; line-height: 24px; margin-top: 40px; }
  .article-quote { font-size: 22px; line-height: 30px; }
}
@media (max-width: 480px) {
  .article-hero__title { font-size: 36px; line-height: 40px; }
  .article-inky img { width: 172px; }
  .article-spec { padding: 20px; }
}

/* ============================================================
   COMPARE HUB PAGE — /compare.html
   Crawlable index of every "readywhen vs {tool}" page. Centred
   reading column on the dark page bg, same rhythm as the
   connectors hub (160/128/112 hero padding-top). Comparisons
   are grouped by honest classification (direct / adjacent /
   better-together) into static <a> cards — fully server-rendered
   for crawlability; the connector-icon resolver only enhances
   the brand glyph. Reuses .eyebrow, .brand, .connector-tile__icon
   resolver, <site-header>/<site-cta>/<site-footer>. New: .cmp-hub*.
   ============================================================ */

.cmp-hub-hero { max-width: 1100px; margin: 0 auto; padding: 160px 32px 48px; }
.cmp-hub-hero__title { margin: 0 0 16px; font-family: var(--font-heading); font-weight: 750; font-size: 64px; line-height: 72px; letter-spacing: -0.5px; color: var(--text-strong-light); max-width: 900px; }
.cmp-hub-hero__body { margin: 0; font-size: 19px; line-height: 28px; color: var(--text-medium-on-dark); max-width: 760px; }
.cmp-hub-hero__micro { margin: 24px 0 0; font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 16px; letter-spacing: 1.68px; text-transform: uppercase; color: var(--text-medium-on-dark); }
/* Jump nav — glass-dark pills (same shell as .nav__link), one per group */
.cmp-hub-jump { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-hub-jump__link { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--glass-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 16px; color: var(--text-strong-on-dark); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.cmp-hub-jump__link:hover { border-color: var(--accent); color: var(--text-strong-light); background: rgba(243, 247, 243, 0.06); }

/* Index body */
.cmp-hub { max-width: 1100px; margin: 0 auto; padding: 16px 32px 32px; }
.cmp-hub-group { scroll-margin-top: 96px; padding-bottom: 56px; }
.cmp-hub-group + .cmp-hub-group { border-top: 1px solid var(--border-on-dark); padding-top: 56px; }
.cmp-hub-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.cmp-hub-group__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -0.2px; color: var(--text-strong-light); }
.cmp-hub-group__count { margin: 0; flex-shrink: 0; font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--text-medium-on-dark); }
.cmp-hub-group__blurb { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); max-width: 760px; }
.cmp-hub-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cmp-hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; height: 100%; padding: 24px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: var(--bg-lift-dark); box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo); transition: border-color 0.15s ease, background 0.15s ease; }
.cmp-hub-card:hover { border-color: var(--accent); background: rgba(243, 247, 243, 0.04); }
/* Paired mark row: [readywhen] → [competitor]. Each logo sits on a
   uniform light chip so every brand mark — light, dark or colour —
   stays visible and consistent on the dark cards (real logos, not
   recoloured, so they stay recognisable). The 2 still-unverified
   slugs use a lettermark chip in the same shell. */
.cmp-hub-card__pair { display: flex; align-items: center; gap: 10px; }
.cmp-hub-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; padding: 5px; border-radius: 7px; background: var(--bg-light); border: 1px solid var(--border-on-light); box-sizing: border-box; }
.cmp-hub-mark__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* Self-contained brand tiles (readywhen mint app icon; competitor
   coloured app-icon tiles like Fyxer/Glean where the tile *is* the
   brand) — drop the light chip and let the rounded tile fill the slot. */
.cmp-hub-mark--rw,
.cmp-hub-mark--tile { background: transparent; border: 0; padding: 0; overflow: hidden; }
.cmp-hub-mark--rw .cmp-hub-mark__img,
.cmp-hub-mark--tile .cmp-hub-mark__img { width: 100%; height: 100%; object-fit: cover; }
.cmp-hub-mark--mono { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1; color: var(--text-strong-dark); }
svg.cmp-hub-mark__arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-medium-on-dark); }
.cmp-hub-card__title { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 24px; color: var(--text-strong-light); }
.cmp-hub-card__desc { flex: 1; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 21px; color: var(--text-medium-on-dark); }
.cmp-hub-card__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 16px; color: var(--accent); }
.cmp-hub-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--button-border-dark); background: var(--glass-dark); color: var(--accent); transition: background 0.15s ease; }
.cmp-hub-card:hover .cmp-hub-card__arrow { background: rgba(172, 255, 182, 0.14); }

/* Responsive — compare hub */
@media (max-width: 1280px) {
  .cmp-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .cmp-hub-hero { padding: 128px 24px 32px; }
  .cmp-hub-hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.125; }
  .cmp-hub-hero__body { font-size: 17px; line-height: 26px; }
  .cmp-hub { padding: 8px 24px 24px; }
  .cmp-hub-group { padding-bottom: 40px; }
  .cmp-hub-group + .cmp-hub-group { padding-top: 40px; }
}
@media (max-width: 768px) {
  .cmp-hub-hero { padding: 112px 20px 24px; }
  .cmp-hub-hero__title { font-size: 44px; line-height: 56px; }
  .cmp-hub-hero__body { font-size: 16px; line-height: 24px; }
  .cmp-hub { padding: 8px 20px 20px; }
  .cmp-hub-grid { grid-template-columns: 1fr; }
  .cmp-hub-group__title { font-size: 22px; line-height: 28px; }
}
@media (max-width: 480px) {
  .cmp-hub-hero__title { font-size: 44px; line-height: 56px; }
  .cmp-hub-card { padding: 20px; }
}

/* ---------- SMALL MOBILE: ≤ 480px ---------- */
@media (max-width: 480px) {
  .hero__title { font-size: 44px; line-height: 56px; }
  .section-title, .section-h2-left { font-size: 36px; line-height: 40px; }
  .features-grid__head .section-title { width: auto; max-width: 100%; }
  .cta__title { font-size: 44px; line-height: 56px; }
  .hero__image { height: 500px; }
  .hero__octopus { width: 180px; height: 180px; }
  .testimonial { width: 240px; padding: 20px; }
  .testimonial__image { height: 200px; }
}

/* Mobile heading scale — visual-guidelines tokens for the section titles
   whose only prior breakpoint override lived in the >=1024 fluid range.
   Placed last so it wins at <=768 over those later >=1024 clamp rules;
   never matches >768, so the desktop/tablet design is unchanged. */
@media (max-width: 768px) {
  .section-title, .section-h2-left,
  .ai-acts__title,
  .connectors-security__title,
  .brand-section__title { font-size: 36px; line-height: 40px; }
  .privacy-section__title { font-size: 28px; line-height: 32px; }
  .cmp-diff__closer { font-size: 20px; line-height: 24px; }
  .u-br-sm { display: inline; }
}

/* Tablet (769–1024): the old 2-up flex-wrap split the rows-of-3 into
   [card card] / [card alone] → orphaned half-empty cells. Lay all 6 features
   out as one clean 2-column grid (3 rows, no empties) inside the same rounded
   bordered container, with 1px hairline dividers (gap over the container's
   border-colour bg) — i.e. the desktop look, just two columns. Scoped above
   768 so the mobile separated-card stack is untouched, and below 1025 so the
   desktop 3-up stays frozen. */
@media (min-width: 769px) and (max-width: 1024px) {
  .features-grid__table { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-on-dark); }
  .features-grid__row { display: contents; }
  .features-grid__row + .features-grid__row { border-top: none; }
  .feature-col { flex: none; min-width: 0; border: none; }
  .feature-col + .feature-col,
  .feature-col:nth-child(odd),
  .feature-col:nth-child(2),
  .feature-col:nth-child(3) { border: none; }
}

/* ai-acts mock: the overlay elements are sized as % of the mock HEIGHT, but
   in the 3-up range the mock WIDTH shrinks while its height stays 370px, so
   the (width-from-height) overlays outgrow the narrowing mock and spill/clip.
   Tie the mock height to its width using the SAME aspect ratio it has at 1440
   (mock ≈ 361×370) so overlays scale down proportionally and keep the exact
   1440 fit/margins. Capped at 1439 so the frozen 1440 design is byte-identical. */
@media (min-width: 1025px) and (max-width: 1439px) {
  .ai-acts__mock { height: auto; aspect-ratio: 361 / 370; }
}