/* ==========================================================================
   N3XUS Innovations — design system
   Two products, two audiences, one engineered visual language.
   --------------------------------------------------------------------------
   1.  Tokens & theming
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons
   6.  Navigation (incl. theme toggle)
   7.  Hero
   8.  The fork (two-product split)
   9.  Sections & cards
   10. Ticker
   11. Comparison (before / after)
   12. Steps
   13. Pricing
   14. FAQ
   15. Forms
   16. Footer
   17. Motion
   18. Responsive (18b. Mobile refinement)
   ========================================================================== */

/* 1. TOKENS & THEMING ===================================================== */

:root {
  /* Neutral spine — warm-shifted so it never reads as cold corporate blue-grey */
  --ink:        #0a0a0b;
  --ink-2:      #121214;
  --ink-3:      #1a1a1d;
  --ink-4:      #242428;
  --bone:       #faf9f6;
  --bone-2:     #eceae4;
  --steel:      #8a8f98;
  --steel-2:    #5f646c;

  /* Product identities — the two accents are fixed; only their text-safe
     variants change with the canvas underneath them. */
  --field:      #ff6a1f;   /* hi-vis orange — trades, safety, field work */
  --field-soft: rgba(255, 106, 31, 0.12);
  --field-line: rgba(255, 106, 31, 0.34);
  --social:     #7b5cff;   /* violet — creator economy */
  --social-2:   #ff3da6;
  --social-soft:rgba(123, 92, 255, 0.13);
  --social-line:rgba(123, 92, 255, 0.36);

  /* Type scale — fluid, capped so it never runs away on ultrawide */
  --t-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.25rem);
  --t-h1:      clamp(2.25rem, 1.3rem + 4vw, 4.25rem);
  --t-h2:      clamp(1.85rem, 1.2rem + 2.6vw, 3.15rem);
  --t-h3:      clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  --t-lead:    clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.6875rem;

  /* Rhythm */
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --section:    clamp(4.5rem, 9vw, 9rem);
  --max:        1240px;
  --max-prose:  62ch;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Surface polarity — one spine, two canvases.

   `data-theme` on <html> chooses the page canvas. It is written before first
   paint by the inline snippet in every <head>, from a stored choice or from
   the operating system, so there is no flash of the wrong theme.

   `.invert` flips a subtree to the *opposite* canvas rather than to a
   hard-coded light one. An inverted section therefore keeps doing its job —
   a contrast beat against the page — in both themes.

   Everything downstream reads --bg / --surface / --text / --line / --accent-*,
   so nothing below this block needs to know which theme is live.
   -------------------------------------------------------------------------- */

/* Dark canvas — the brand default */
:root,
[data-theme="light"] .invert {
  color-scheme: dark;

  --bg:         var(--ink);
  --surface:    var(--ink-2);
  --surface-2:  var(--ink-3);
  --line:       rgba(250, 249, 246, 0.09);
  --line-2:     rgba(250, 249, 246, 0.16);
  --text:       var(--bone);
  --text-dim:   rgba(250, 249, 246, 0.74);
  --text-faint: rgba(250, 249, 246, 0.58);

  /* Neutral accent — re-pointed per page/section via [data-product] */
  --accent:      var(--bone);
  --accent-text: var(--bone);   /* accent tuned for TEXT contrast, not fills */
  --accent-ink:  var(--ink);
  --accent-soft: rgba(250, 249, 246, 0.1);
  --accent-line: rgba(250, 249, 246, 0.22);

  /* Status colours, contrast-checked against this canvas */
  --signal-ok:   #34d399;
  --signal-err:  #ff8080;
  --signal-line: #ff5c5c;
  --signal-flag: #ffd400;

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 32px 64px -24px rgba(0,0,0,.7);
}

/* Light canvas */
[data-theme="light"],
:root:not([data-theme="light"]) .invert {
  color-scheme: light;

  --bg:         var(--bone);
  --surface:    #fff;
  --surface-2:  var(--bone-2);
  --line:       rgba(10, 10, 11, 0.1);
  --line-2:     rgba(10, 10, 11, 0.18);
  --text:       var(--ink);
  --text-dim:   rgba(10, 10, 11, 0.74);
  --text-faint: rgba(10, 10, 11, 0.62);

  --accent:      var(--ink);
  --accent-text: #2f2f36;
  --accent-ink:  var(--bone);
  --accent-soft: rgba(10, 10, 11, 0.055);
  --accent-line: rgba(10, 10, 11, 0.2);

  --signal-ok:   #0b7a55;
  --signal-err:  #b42318;
  --signal-line: #d92d20;
  --signal-flag: #8a6b00;

  /* Ink-black shadows read as dirt on a bone canvas — shallower and cooler */
  --shadow: 0 1px 2px rgba(10,10,11,.05), 0 10px 26px -14px rgba(10,10,11,.22);
  --shadow-lg: 0 1px 3px rgba(10,10,11,.06), 0 26px 52px -26px rgba(10,10,11,.28);
}

.invert { background: var(--bg); color: var(--text); }

/* Product scoping: any element can re-point the accent for its subtree. */
[data-product="field"] {
  --accent: var(--field);
  --accent-text: var(--field);
  --accent-ink: #1a0a00;
  --accent-soft: var(--field-soft);
  --accent-line: var(--field-line);
}
[data-product="social"] {
  --accent: var(--social);
  --accent-text: #9d85ff;   /* #7b5cff is 4.5:1 on ink — too close to the line */
  --accent-ink: #0b0618;
  --accent-soft: var(--social-soft);
  --accent-line: var(--social-line);
}

/* A product accent sitting on a LIGHT canvas: the fill colour is unchanged,
   but text needs darkening and the tints need a little more body to survive
   against white. */
[data-theme="light"][data-product="field"],
[data-theme="light"] [data-product="field"],
:root:not([data-theme="light"]) .invert[data-product="field"],
:root:not([data-theme="light"]) [data-product="field"] .invert {
  --accent-text: #b3430b;
  --accent-soft: rgba(255, 106, 31, 0.14);
  --accent-line: rgba(255, 106, 31, 0.42);
}
[data-theme="light"][data-product="social"],
[data-theme="light"] [data-product="social"],
:root:not([data-theme="light"]) .invert[data-product="social"],
:root:not([data-theme="light"]) [data-product="social"] .invert {
  --accent-text: #5b3fd6;
  --accent-soft: rgba(123, 92, 255, 0.12);
  --accent-line: rgba(123, 92, 255, 0.42);
}

/* ...and the same accent handed back to a dark canvas, for sections that
   invert *inside* a light page. */
[data-theme="light"] .invert[data-product="field"],
[data-theme="light"] [data-product="field"] .invert {
  --accent-text: var(--field);
  --accent-soft: var(--field-soft);
  --accent-line: var(--field-line);
}
[data-theme="light"] .invert[data-product="social"],
[data-theme="light"] [data-product="social"] .invert {
  --accent-text: #9d85ff;
  --accent-soft: var(--social-soft);
  --accent-line: var(--social-line);
}

/* 2. RESET & BASE ========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the sticky header when jumping to an anchor */
  scroll-padding-top: 88px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
strong, b { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Only show the ring for keyboard users; pointer focus stays quiet. */
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  background: var(--text); color: var(--bg);
  padding: .7rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700; font-size: var(--t-sm); z-index: 999;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* 3. TYPOGRAPHY ============================================================ */

h1, h2, h3, h4, .display {
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI Semibold', 'Helvetica Neue', sans-serif;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.033em;
  text-wrap: balance;
}

.display { font-size: var(--t-display); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.02em; font-weight: 700; }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: var(--max-prose);
  text-wrap: pretty;
}

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px;
  background: currentColor; opacity: .55; flex: none;
}
.eyebrow--plain::before { display: none; }

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.accent { color: var(--accent-text); }

/* Numerals in stats and prices should align in columns. */
.tnum { font-variant-numeric: tabular-nums; }

/* 4. LAYOUT PRIMITIVES ===================================================== */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 880px; }

section { position: relative; }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.rule { height: 1px; background: var(--line); border: 0; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }

.section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; }

/* Fine engineered grid, used sparingly as a background texture. */
.gridlines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
  opacity: .75;
}

/* 5. BUTTONS =============================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-bd: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: -0.005em;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .24s var(--ease),
              background-color .24s var(--ease), border-color .24s var(--ease), opacity .2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-2);
}
.btn--ghost:hover { --btn-bd: var(--text); box-shadow: none; }

.btn--solid {          /* bone button on dark, ink button on light */
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  --btn-bd: var(--text);
}

.btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }
.btn--sm { padding: .68rem 1.1rem; font-size: var(--t-xs); }
.btn--block { width: 100%; }

.btn .arrow { transition: transform .22s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Quiet inline link with an underline that draws on hover */
.link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: var(--t-sm); color: var(--accent-text);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease);
}
.link:hover { background-size: 100% 1px; }

/* 6. NAVIGATION ============================================================ */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1rem;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line);
  padding-block: .7rem;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.logo { display: inline-flex; align-items: center; gap: .6rem; flex: none; padding-block: .45rem; }
.logo__mark { width: 30px; height: 30px; flex: none; }
/* The raster mark carries its own 1.6:1 lockup ratio, so height leads and width follows */
img.logo__mark { width: auto; height: 24px; }
.logo__text {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em;
}
.logo__text span { color: var(--text-faint); font-weight: 600; }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__link {
  font-size: var(--t-sm); font-weight: 500; color: var(--text-dim);
  transition: color .2s var(--ease); position: relative; padding-block: .62rem;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Theme toggle — lives with the nav actions and, unlike the CTA, stays visible
   at every width. 42px square so it lines up with the drawer button beside it.
   The icon shows the canvas you would switch TO, so the control reads as a verb
   rather than a status light. */
.theme-toggle {
  position: relative;
  width: 42px; height: 42px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--text-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background-color .2s var(--ease);
}
.theme-toggle:hover {
  color: var(--text); border-color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg {
  position: absolute; width: 17px; height: 17px;
  transition: opacity .3s var(--ease), transform .5s var(--ease-out);
}
.theme-toggle__sun  { opacity: 1; transform: none; }
.theme-toggle__moon { opacity: 0; transform: rotate(-80deg) scale(.55); }
[data-theme="light"] .theme-toggle__sun  { opacity: 0; transform: rotate(80deg) scale(.55); }
[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: none; }

/* Rays retract into the disc as the sun leaves, so the swap reads as one move */
.theme-toggle__rays {
  transform-origin: 12px 12px;
  transition: transform .5s var(--ease-out), opacity .3s var(--ease);
}
[data-theme="light"] .theme-toggle__rays { transform: scale(.35); opacity: 0; }

/* The logo artwork is white-on-transparent, so it has to flip for a bone
   canvas. Declared at invert(0) on both canvases so the swap can tween. */
img.logo__mark, .footer__logo img { filter: invert(0); }
[data-theme="light"] img.logo__mark,
[data-theme="light"] .footer__logo img { filter: invert(1); }

.nav__toggle {
  display: none; width: 42px; height: 42px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  transition: border-color .2s;
}
.nav__toggle:hover { border-color: var(--text); }
.nav__toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--text);
  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer — a slim sheet that slides in from the right over a soft
   scrim. Links stagger in once the sheet lands; tapping the scrim closes it. */
.nav__drawer {
  position: fixed; inset: 0; z-index: 99;
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.nav__drawer.is-open { opacity: 1; visibility: visible; }

.nav__drawer > nav {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw); max-width: none; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 5.25rem 1rem 1.5rem;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(104%);
  transition: transform .5s var(--ease-out);
}
.nav__drawer.is-open > nav { transform: none; }

.nav__drawer > nav::before {
  content: "Menu";
  display: block; padding: 0 .85rem .7rem; margin-bottom: .35rem;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}

.nav__drawer a:not(.btn) {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: .72rem .85rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em;
  color: var(--text-dim);
  transition: color .2s var(--ease), background-color .2s var(--ease),
              opacity .4s var(--ease), transform .45s var(--ease-out);
}
/* Chevron that nudges forward on hover/press */
.nav__drawer a:not(.btn)::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .35;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__drawer a:not(.btn):hover,
.nav__drawer a:not(.btn):focus-visible,
.nav__drawer a[aria-current="page"] {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.nav__drawer a:not(.btn):hover::after,
.nav__drawer a:not(.btn):focus-visible::after { transform: translateX(3px) rotate(45deg); opacity: .8; }
.nav__drawer a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 28%; bottom: 28%;
  width: 2px; border-radius: 2px; background: var(--accent);
}

.nav__drawer .btn {
  margin-top: auto; padding: .95rem 1.25rem; font-size: var(--t-sm);
  transition: opacity .4s var(--ease), transform .45s var(--ease-out),
              background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
/* Keep a little air above the CTA when the list is long enough to scroll */
.nav__drawer a:has(+ .btn) { margin-bottom: 1.5rem; }

/* Staggered entrance */
.nav__drawer > nav > a { opacity: 0; transform: translateX(14px); }
.nav__drawer.is-open > nav > a { opacity: 1; transform: none; }
.nav__drawer.is-open > nav > a:nth-child(1)  { transition-delay: .08s; }
.nav__drawer.is-open > nav > a:nth-child(2)  { transition-delay: .11s; }
.nav__drawer.is-open > nav > a:nth-child(3)  { transition-delay: .14s; }
.nav__drawer.is-open > nav > a:nth-child(4)  { transition-delay: .17s; }
.nav__drawer.is-open > nav > a:nth-child(5)  { transition-delay: .20s; }
.nav__drawer.is-open > nav > a:nth-child(6)  { transition-delay: .23s; }
.nav__drawer.is-open > nav > a:nth-child(7)  { transition-delay: .26s; }
.nav__drawer.is-open > nav > a:nth-child(8)  { transition-delay: .29s; }
.nav__drawer.is-open > nav > a:nth-child(9)  { transition-delay: .32s; }
.nav__drawer.is-open > nav > a:nth-child(10) { transition-delay: .35s; }
.nav__drawer.is-open > nav > a:nth-child(11) { transition-delay: .38s; }
/* Hover colour changes shouldn't wait on the entrance delay */
.nav__drawer.is-open > nav > a:hover,
.nav__drawer.is-open > nav > a:focus-visible { transition-delay: 0s; }

/* 7. HERO ================================================================== */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(8rem, 16vh, 11rem) clamp(3.5rem, 7vw, 6rem);
}
.hero__glow {
  position: absolute; top: -22%; left: 50%; transform: translateX(-50%);
  width: min(1000px, 130vw); aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-soft), transparent 62%);
  pointer-events: none; filter: blur(24px);
}
.hero__inner { position: relative; }
.hero__title { margin-bottom: 1.5rem; }
.hero__title em {
  font-style: normal; color: var(--accent);
  /* keeps the emphasised clause on its own optical line */
  display: inline-block;
}
.hero .lead { margin-bottom: 2.25rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.hero__note { margin-top: 1.15rem; font-size: var(--t-xs); color: var(--text-faint); }

/* 7b. HERO VARIANTS ======================================================== */

/* Centred: used on the company page, where there is no single product to show. */
.hero--center .hero__inner { text-align: center; }
.hero--center .hero__title { max-width: 17ch; margin-inline: auto; }
.hero--center .lead { margin-inline: auto; }
.hero--center .hero__cta { justify-content: center; }

/* Split: product pages pair the pitch with an illustrative interface panel. */
.hero--split .hero__inner {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
/* Half-width column needs its own ceiling — the full display size runs to
   seven lines at 1440 and pushes the CTAs under the fold. */
.hero--split .hero__title {
  text-wrap: balance;
  font-size: clamp(2.35rem, 1.1rem + 3.1vw, 3.9rem);
}
.hero--split .lead { font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem); }
.hero--split { padding-block: clamp(7.5rem, 14vh, 9.5rem) clamp(3.5rem, 7vw, 5.5rem); }
.hero__copy { min-width: 0; }
.hero__aside { min-width: 0; }

/* Schematic product panel — deliberately diagrammatic, never a fake screenshot. */
.mock {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.mock__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.mock__title { font-family: 'Archivo', sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: -0.01em; }
.mock__chip {
  font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .25rem .55rem;
  border-radius: var(--r-pill); background: var(--accent-soft);
  color: var(--accent-text); border: 1px solid var(--accent-line); white-space: nowrap;
}
.mock__row {
  display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--line);
}
.mock__row:last-of-type { border-bottom: 0; }
.mock__row--active { background: var(--accent-soft); }
.mock__time {
  font-size: .72rem; font-weight: 700; color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mock__main strong { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: -0.01em; }
.mock__main span { font-size: .7375rem; color: var(--text-dim); }
.mock__state {
  font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: .24rem .55rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--text-dim); white-space: nowrap;
}
.mock__state--go { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-soft); }
.mock__foot {
  padding: .75rem 1.1rem; border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--text-faint);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.mock__cap { margin-top: .8rem; font-size: var(--t-xs); color: var(--text-faint); text-align: center; }

/* 8. THE FORK — two products, two audiences, one decision ================== */

.fork { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.fork__panel {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  display: flex; flex-direction: column; min-height: clamp(420px, 52vw, 560px);
  transition: background-color .45s var(--ease);
}
.fork__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 120% 80% at 50% 100%, var(--accent-soft), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.fork__panel:hover::before, .fork__panel:focus-within::before { opacity: 1; }
.fork__panel::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.fork__panel:hover::after, .fork__panel:focus-within::after { transform: scaleX(1); }

.fork__badge {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  padding: .35rem .8rem; border: 1px solid var(--accent-line); border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-family: 'Archivo', sans-serif;
}
.fork__name {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 1.5rem; letter-spacing: -0.035em;
}
.fork__for {
  margin-top: .55rem; font-size: var(--t-sm); font-weight: 700; color: var(--accent-text);
  letter-spacing: -0.005em;
}
.fork__desc { margin-top: 1.15rem; color: var(--text-dim); font-size: var(--t-sm); }
.fork__list { margin-top: 1.5rem; display: grid; gap: .6rem; }
.fork__list li {
  display: flex; gap: .6rem; font-size: var(--t-sm); color: var(--text-dim); line-height: 1.45;
}
.fork__list svg { flex: none; margin-top: 3px; color: var(--accent); }
.fork__foot { margin-top: auto; padding-top: 2rem; }

/* Whole panel is one large click target, but the visible control stays a real link. */
.fork__link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}

/* 9. SECTIONS & CARDS ====================================================== */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.15rem);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.card--hover:hover { border-color: var(--accent-line); transform: translateY(-3px); }

.card__icon {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 1.25rem;
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent-line);
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--text-dim); font-size: var(--t-sm); }

/* Numbered feature card — the index does the visual work, not an icon */
.card__num {
  font-family: 'Archivo', sans-serif; font-size: var(--t-label); font-weight: 700;
  letter-spacing: .16em; color: var(--text-faint); margin-bottom: 1.1rem; display: block;
}

/* Stat block */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--bg); padding: clamp(1.4rem, 3vw, 2.1rem); }
.stat__num {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.035em;
  color: var(--accent-text); line-height: 1;
}
.stat__label { margin-top: .55rem; font-size: var(--t-xs); color: var(--text-dim); line-height: 1.45; }

/* Trust strip — honest, pre-launch appropriate */
.trust { display: grid; gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
         grid-template-columns: repeat(3, 1fr); }
.trust__item { background: var(--bg); padding: clamp(1.4rem, 3vw, 2rem); }
.trust__item h3 { font-size: 1.0625rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .55rem; }
.trust__item h3 svg { color: var(--accent-text); flex: none; }
.trust__item p { font-size: var(--t-sm); color: var(--text-dim); }

/* 10. TICKER =============================================================== */

.ticker {
  overflow: hidden; border-block: 1px solid var(--line);
  padding-block: 1.1rem; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 42s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 1.75rem; padding-inline: .875rem;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.ticker__item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .7; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 11. COMPARISON =========================================================== */

.compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
.compare__col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.15rem); }
.compare__col--before { background: var(--surface); }
.compare__col--after { background: var(--accent-soft); border-color: var(--accent-line); }
.compare__tag {
  font-family: 'Archivo', sans-serif; font-size: var(--t-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.25rem; display: block;
}
.compare__col--before .compare__tag { color: var(--text-faint); }
.compare__col--after .compare__tag { color: var(--accent-text); }
.compare__list { display: grid; gap: .9rem; }
.compare__list li { display: flex; gap: .7rem; font-size: var(--t-sm); line-height: 1.5; }
.compare__list svg { flex: none; margin-top: 3px; }
.compare__col--before li { color: var(--text-dim); }
.compare__col--before svg { color: var(--text-faint); }
.compare__col--after svg { color: var(--accent); }

/* 12. STEPS ================================================================ */

.steps { counter-reset: step; display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.step {
  position: relative; padding-left: 4.25rem;
  padding-block: clamp(1.2rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: clamp(1.2rem, 2.4vw, 1.75rem);
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.0625rem;
  color: var(--accent-text); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: .45rem; }
.step p { color: var(--text-dim); font-size: var(--t-sm); max-width: 58ch; }

/* 13. PRICING ============================================================== */

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.15rem);
  display: flex; flex-direction: column; height: 100%;
}
.plan--featured {
  border-color: var(--accent); background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-lg);
}
.plan__flag {
  align-self: flex-start; margin-bottom: 1rem;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-family: 'Archivo', sans-serif; font-size: var(--t-label);
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.plan__name { font-size: 1.0625rem; font-weight: 700; font-family: 'Archivo', sans-serif; letter-spacing: -0.01em; }
.plan__price { display: flex; align-items: baseline; gap: .35rem; margin-block: 1rem .35rem; }
.plan__amount {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(2.1rem, 4.5vw, 2.9rem); letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__per { font-size: var(--t-sm); color: var(--text-faint); }
.plan__meta { font-size: var(--t-xs); color: var(--text-faint); }
.plan__desc { margin-top: 1rem; font-size: var(--t-sm); color: var(--text-dim); }
.plan__features { margin-block: 1.6rem; display: grid; gap: .7rem; }
.plan__features li { display: flex; gap: .6rem; font-size: var(--t-sm); color: var(--text-dim); line-height: 1.45; }
.plan__features svg { flex: none; margin-top: 3px; color: var(--accent); }
.plan .btn { margin-top: auto; }

/* Four-tier grid runs tighter than the three-tier one so the cards stay readable. */
.pricing--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.85rem, 1.4vw, 1.2rem); }
.pricing--4 .plan { padding: clamp(1.35rem, 2.1vw, 1.7rem); }
.pricing--4 .plan__amount { font-size: clamp(1.9rem, 2.7vw, 2.4rem); }

/* Monthly / annual switch that sits above the plan grid */
.billing {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.billing__opt {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1.25rem; border-radius: var(--r-pill);
  font-family: 'Archivo', sans-serif; font-size: var(--t-xs); font-weight: 700;
  color: var(--text-faint); white-space: nowrap; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.billing__opt:hover { color: var(--text); }
.billing__opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.billing__save {
  padding: .2rem .5rem; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.billing__opt[aria-pressed="true"] .billing__save {
  background: color-mix(in srgb, var(--accent-ink) 13%, transparent); color: var(--accent-ink);
}
.plan__save {
  margin-top: .4rem; font-size: var(--t-xs); font-weight: 700;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}

/* Every placeholder price is visibly marked until real numbers land. */
[data-placeholder] { position: relative; }
[data-placeholder]::after {
  content: "placeholder";
  position: absolute; top: -.55rem; right: -.4rem;
  font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal-flag);
  background: color-mix(in srgb, var(--signal-flag) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-flag) 45%, transparent);
  padding: .1rem .3rem; border-radius: 3px; line-height: 1.4;
  pointer-events: none;
}

/* 14. FAQ ================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; padding-block: clamp(1.1rem, 2.2vw, 1.5rem); text-align: left;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.15rem);
  letter-spacing: -0.015em; line-height: 1.35; cursor: pointer;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--accent-text); }
.faq__icon { flex: none; margin-top: 2px; transition: transform .3s var(--ease); color: var(--accent); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { color: var(--text-dim); font-size: var(--t-sm); max-width: 68ch; padding-bottom: 1.5rem; }

/* 15. FORMS ================================================================ */

.cta-band {
  position: relative; overflow: hidden;
  border: 1px solid var(--accent-line); border-radius: var(--r-lg);
  background: var(--surface); padding: clamp(2rem, 5vw, 4rem);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 120% at 50% 0%, var(--accent-soft), transparent 65%);
  pointer-events: none;
}
.cta-band > * { position: relative; }

.form { display: grid; gap: .75rem; max-width: 560px; }
.form--inline { grid-template-columns: 1fr auto; align-items: start; }
.form--inline .btn { height: 100%; }

.field { display: grid; gap: .4rem; }
.field label {
  font-family: 'Archivo', sans-serif; font-size: var(--t-label); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint);
}
.input {
  width: 100%; padding: .9rem 1.15rem;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-size: var(--t-sm); color: var(--text);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.input::placeholder { color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--accent); background: color-mix(in srgb, var(--text) 8%, transparent); }
.input[aria-invalid="true"] { border-color: var(--signal-line); }
textarea.input { min-height: 128px; resize: vertical; }

.form__note { font-size: var(--t-xs); color: var(--text-faint); margin-top: .25rem; }

/* Honeypot — off-screen rather than display:none so bots still see it */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  font-size: var(--t-sm); font-weight: 600; margin-top: .5rem;
  display: none; padding: .75rem 1rem; border-radius: var(--r-sm);
}
.form__status.is-ok {
  display: block; color: var(--signal-ok);
  background: color-mix(in srgb, var(--signal-ok) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-ok) 32%, transparent);
}
.form__status.is-err {
  display: block; color: var(--signal-err);
  background: color-mix(in srgb, var(--signal-err) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-err) 32%, transparent);
}

.field-error { font-size: var(--t-xs); color: var(--signal-err); display: none; }
.field-error.is-shown { display: block; }

/* Segmented control for choosing which product you're waiting on */
.segmented {
  display: inline-flex; padding: 4px; gap: 4px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.segmented__btn {
  padding: .55rem 1.15rem; border-radius: var(--r-pill);
  font-family: 'Archivo', sans-serif; font-size: var(--t-xs); font-weight: 700;
  color: var(--text-dim); transition: background-color .25s var(--ease), color .25s var(--ease);
  white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center;
}
.segmented__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* 16. FOOTER =============================================================== */

.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem); margin-bottom: 3rem;
}
.footer__logo { display: inline-block; line-height: 0; }
.footer__logo img { width: 100%; max-width: 188px; height: auto; }
.footer__brand p { font-size: var(--t-sm); color: var(--text-dim); margin-top: 1.25rem; max-width: 34ch; }
.footer h3 {
  font-family: 'Archivo', sans-serif; font-size: var(--t-label); font-weight: 700;
  line-height: 1.4;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1rem;
}
.footer__links { display: grid; gap: .7rem; }
.footer__links a { display: inline-block; padding-block: .3rem; font-size: var(--t-sm); color: var(--text-dim); transition: color .2s; }
.footer__links a:hover { color: var(--text); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-top: 2rem; border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--text-faint);
}
.footer__social { display: flex; gap: .6rem; }
.footer__social a {
  width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-dim);
  transition: color .2s, border-color .2s, transform .2s;
}
.footer__social a:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-2px); }

/* 16b. PROSE (legal & long-form) =========================================== */

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 2.75rem; margin-bottom: .85rem; }
.prose h3 { font-size: 1.0625rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.prose p, .prose li { color: var(--text-dim); font-size: var(--t-sm); }
.prose ul { list-style: none; margin-block: .9rem; display: grid; gap: .55rem; }
.prose li { position: relative; padding-left: 1.35rem; }
.prose li::before {
  content: ""; position: absolute; left: .1rem; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .8;
}
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* Inline links inside body copy. The base reset strips colour and underline from
   every <a> so buttons and nav items can inherit cleanly — which means a link
   written into a sentence renders as plain text unless it is put back. .prose
   covers the legal pages; these are the marketing sections that link out to the
   live FieldOS app. :not(.btn) so the button links sitting in the same blocks
   are left alone. */
.hero__note a:not(.btn), .mock__cap a:not(.btn), .form__note a:not(.btn),
.lead a:not(.btn), .trust__item p a:not(.btn), .faq__a a:not(.btn),
.card p a:not(.btn) {
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px;
}
.hero__note a:not(.btn):hover, .mock__cap a:not(.btn):hover, .form__note a:not(.btn):hover,
.lead a:not(.btn):hover, .trust__item p a:not(.btn):hover, .faq__a a:not(.btn):hover,
.card p a:not(.btn):hover { color: var(--text); }
.prose__updated { font-size: var(--t-xs); color: var(--text-faint); margin-top: 1rem; }

/* Centred message page (404) */
.msg { min-height: 72vh; display: grid; place-items: center; text-align: center; padding-block: 6rem; }

/* 17. MOTION =============================================================== */

.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* Anything that animates forever is opt-out by default for motion-sensitive users. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}

/* Theme swap. `data-theme-switching` is on <html> only for the length of the
   transition, so the page cross-fades instead of snapping — and nothing pays
   for these transitions during ordinary scrolling. */
@media (prefers-reduced-motion: no-preference) {
  [data-theme-switching],
  [data-theme-switching] *,
  [data-theme-switching] *::before,
  [data-theme-switching] *::after {
    transition: background-color .3s var(--ease),
                border-color .3s var(--ease),
                color .3s var(--ease),
                fill .3s var(--ease),
                stroke .3s var(--ease),
                box-shadow .3s var(--ease),
                filter .3s var(--ease),
                outline-color .3s var(--ease) !important;
  }
  /* ...except the toggle itself, which keeps its own sun/moon choreography. */
  [data-theme-switching] .theme-toggle svg,
  [data-theme-switching] .theme-toggle__rays {
    transition: opacity .3s var(--ease), transform .5s var(--ease-out) !important;
  }
}

/* 18. RESPONSIVE =========================================================== */

@media (max-width: 1180px) {
  .pricing--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; }
  .hero--split .mock { margin-top: 1rem; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__actions .btn--nav-cta { display: none; }
  .nav__toggle { display: flex; }
  .fork { grid-template-columns: 1fr; }
  .fork__panel { min-height: auto; }
  .pricing { grid-template-columns: 1fr; }
  .plan--featured { order: -1; }
  .compare { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --section: clamp(3.5rem, 11vw, 5rem); }
  /* Shorten the wordmark so the header never collides with its own CTA */
  .logo__text span { display: none; }
  .footer__links a { padding-block: .45rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .form--inline { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .step { padding-left: 3.25rem; }
  /* Keep the monthly/annual switch on one line at phone widths. */
  .billing { max-width: 100%; flex-wrap: wrap; justify-content: center; }
  .billing__opt { padding-inline: .85rem; gap: .4rem; }
  .billing__save { font-size: 9px; padding: .15rem .38rem; letter-spacing: .06em; }
}

/* 18b. MOBILE REFINEMENT =================================================== */

/* Phones get their own, quieter reading of the system — the same vocabulary
   as the slide-in menu: smaller type, softer rounded surfaces, subtle tints
   instead of hard rules, and short, springy motion. Desktop is untouched. */

/* Touch devices: no sticky hover lifts after a tap — give pressed feedback instead. */
@media (hover: none) {
  html { -webkit-tap-highlight-color: transparent; }
  .btn:hover { transform: none; box-shadow: none; }
  .btn:hover .arrow { transform: none; }
  .btn:active { transform: scale(.97); }
  .card--hover:hover { transform: none; border-color: var(--line); }
  /* `scale` rather than transform, so the press never waits on the reveal tween */
  .card--hover:active { scale: .985; border-color: var(--accent-line); }
  .card { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out),
                      border-color .3s var(--ease), background-color .3s var(--ease),
                      scale .2s var(--ease); }
  .fork__panel:active::before { opacity: 1; }
  .footer__social a:hover { transform: none; }
  .footer__social a:active { transform: scale(.92); }
  .theme-toggle:active, .nav__toggle:active { transform: scale(.94); }
}

@media (max-width: 620px) {
  :root {
    --t-display: clamp(2.05rem, 1.45rem + 3.4vw, 2.55rem);
    --t-h1:      clamp(1.8rem, 1.35rem + 2.6vw, 2.2rem);
    --t-h2:      clamp(1.45rem, 1.18rem + 1.6vw, 1.75rem);
    --t-h3:      1.0625rem;
    --t-lead:    .96875rem;
    --t-body:    .9375rem;
    --t-sm:      .875rem;
    --t-xs:      .78125rem;
    --t-label:   .65625rem;
    --gutter:    1.15rem;
    --section:   clamp(3.25rem, 12vw, 4.25rem);
    --r-lg:      16px;
  }

  body { line-height: 1.58; }
  html { scroll-padding-top: 68px; }

  /* Typography — tighter, calmer headings */
  h1, h2, h3, h4, .display { letter-spacing: -0.028em; line-height: 1.08; }
  h3 { line-height: 1.25; letter-spacing: -0.015em; }
  .lead { line-height: 1.6; }
  .eyebrow { letter-spacing: .16em; margin-bottom: .8rem; gap: .5rem; }
  .eyebrow::before { width: 14px; }
  .section-head { margin-bottom: 1.75rem; }
  .section--tight { padding-block: 2.75rem; }

  /* Header — slimmer bar with smaller controls, like the drawer's chrome */
  .nav { padding-block: .7rem; }
  .nav.is-stuck { padding-block: .5rem; }
  .logo__text { font-size: 1rem; }
  img.logo__mark { height: 21px; }
  .theme-toggle, .nav__toggle { width: 38px; height: 38px; border-radius: 10px; }
  .theme-toggle svg { width: 15px; height: 15px; }

  /* Buttons — a touch smaller, still comfortably tappable */
  .btn { padding: .85rem 1.3rem; font-size: .875rem; }
  .btn--lg { padding: .95rem 1.4rem; font-size: .9rem; }
  .btn--sm { padding: .62rem 1rem; font-size: .78rem; }
  .hero__cta { gap: .6rem; }

  /* Hero */
  .hero { padding-block: 6.5rem 2.75rem; }
  .hero--split { padding-block: 6.25rem 2.75rem; }
  .hero--split .hero__title { font-size: var(--t-display); }
  .hero--split .lead { font-size: var(--t-lead); }
  .hero__title { margin-bottom: 1rem; }
  .hero .lead { margin-bottom: 1.6rem; }
  .hero__note { margin-top: .9rem; line-height: 1.5; }

  /* Product panel mock */
  .mock { border-radius: var(--r); }
  .mock__bar, .mock__row, .mock__foot { padding-inline: .9rem; }
  .mock__row { padding-block: .65rem; gap: .7rem; }

  /* Fork panels read as two stacked sheets */
  .fork { gap: 10px; background: none; padding-inline: var(--gutter); }
  .fork__panel {
    padding: 1.5rem 1.25rem; border: 1px solid var(--line);
    border-radius: var(--r-lg); background: var(--surface);
  }
  .fork__panel::after { height: 2px; }
  .fork__name { font-size: 1.6rem; margin-top: 1.1rem; }
  .fork__desc { margin-top: .85rem; }
  .fork__list { margin-top: 1.1rem; gap: .5rem; }
  .fork__foot { padding-top: 1.5rem; }
  .fork__foot .cluster { flex-direction: column; align-items: stretch; gap: .5rem; }

  /* Cards */
  .card { padding: 1.25rem 1.2rem; border-radius: var(--r-lg); }
  .card__icon { width: 34px; height: 34px; margin-bottom: .9rem; border-radius: 10px; }
  .card__icon svg { width: 16px; height: 16px; }
  .card h3 { margin-bottom: .4rem; }
  .card__num { margin-bottom: .7rem; }
  .grid { gap: .7rem; }

  .stats, .trust { border-radius: var(--r-lg); }
  .stat, .trust__item { padding: 1.15rem 1.2rem; }
  .stat__num { font-size: 1.75rem; }
  .trust__item h3 { font-size: .96875rem; }

  /* Ticker */
  .ticker { padding-block: .8rem; }
  .ticker__item { font-size: .72rem; gap: 1.25rem; padding-inline: .625rem; }

  /* Before / after */
  .compare { gap: .7rem; }
  .compare__col { padding: 1.25rem 1.2rem; }
  .compare__tag { margin-bottom: .9rem; }
  .compare__list { gap: .7rem; }

  /* Steps — compact index column */
  .steps { gap: 0; }
  .step { padding-left: 2.6rem; padding-block: 1.1rem; }
  .step::before { top: 1.15rem; font-size: .875rem; }
  .step h3 { margin-bottom: .3rem; }

  /* Pricing */
  .pricing, .pricing--4 { gap: .75rem; }
  .plan, .pricing--4 .plan { padding: 1.35rem 1.25rem; }
  .plan__amount, .pricing--4 .plan__amount { font-size: 2rem; }
  .plan__features { margin-block: 1.15rem; gap: .55rem; }
  .billing, .segmented { margin-bottom: 1.25rem; }
  .billing__opt, .segmented__btn { min-height: 40px; }

  /* FAQ — rounded rows, the same shape as the menu links */
  .faq { border-top: 0; display: grid; gap: 6px; }
  .faq__item {
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); padding-inline: 1rem;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
  }
  .faq__item.is-open {
    border-color: var(--accent-line);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  }
  .faq__q { font-size: .9375rem; padding-block: .95rem; gap: 1rem; }
  .faq__icon { width: 16px; height: 16px; }
  .faq__a p { padding-bottom: 1.1rem; }

  /* Forms — inputs stay at 16px so iOS never zooms on focus */
  .cta-band { padding: 1.6rem 1.25rem; }
  .input { padding: .8rem 1rem; font-size: 1rem; border-radius: 12px; }
  textarea.input { min-height: 112px; }

  /* Footer */
  .footer { padding-block: 2.5rem 1.5rem; }
  .footer__grid { gap: 1.5rem 1.25rem; margin-bottom: 2rem; }
  .footer__logo img { max-width: 150px; }
  .footer__brand p { margin-top: .9rem; }
  .footer h3 { margin-bottom: .6rem; }
  .footer__links { gap: .2rem; }
  .footer__links a { font-size: .84375rem; }
  .footer__bottom { padding-top: 1.25rem; gap: .75rem; }

  /* Legal & long-form */
  .prose h2 { font-size: 1.2rem; margin-top: 2rem; margin-bottom: .6rem; }
  .prose h3 { font-size: .96875rem; margin-top: 1.35rem; }

  .msg { padding-block: 5rem; min-height: 66vh; }
}

/* Mobile motion — short travel, a hint of scale, and staggered groups. */
@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .reveal {
    transform: translateY(14px) scale(.985);
    transition: opacity .6s var(--ease-out), transform .65s var(--ease-out);
  }
  .reveal.is-in { transform: none; }
  /* In a single column each card arrives on its own scroll position, so the
     desktop row-stagger would only read as lag. The hero keeps its sequence. */
  .card.reveal { transition: opacity .6s var(--ease-out), transform .65s var(--ease-out),
                             border-color .25s var(--ease), scale .2s var(--ease); }
  .card.reveal[data-delay] { transition-delay: 0s; }

  /* Groups that reveal as one block hand the stagger down to their children */
  .grid.reveal.is-in > *,
  .trust.is-in > .trust__item,
  .steps.is-in > .step,
  .faq.is-in > .faq__item,
  .pricing.is-in > .plan,
  .compare.is-in > .compare__col,
  .fork.is-in > .fork__panel {
    animation: m-rise .6s var(--ease-out) backwards;
  }
  :is(.grid, .trust, .steps, .faq, .pricing, .compare, .fork).is-in > :nth-child(2) { animation-delay: .07s; }
  :is(.grid, .trust, .steps, .faq, .pricing, .compare, .fork).is-in > :nth-child(3) { animation-delay: .14s; }
  :is(.grid, .trust, .steps, .faq, .pricing, .compare, .fork).is-in > :nth-child(4) { animation-delay: .21s; }
  :is(.grid, .trust, .steps, .faq, .pricing, .compare, .fork).is-in > :nth-child(5) { animation-delay: .28s; }
  :is(.grid, .trust, .steps, .faq, .pricing, .compare, .fork).is-in > :nth-child(n+6) { animation-delay: .35s; }

  /* Eyebrow rule draws in as its heading arrives */
  .reveal .eyebrow::before, .eyebrow.reveal::before {
    transform: scaleX(0); transform-origin: left;
    transition: transform .6s var(--ease-out) .2s;
  }
  .reveal.is-in .eyebrow::before, .eyebrow.reveal.is-in::before { transform: none; }

  /* Hero glow breathes slowly behind the headline */
  .hero__glow { animation: m-glow 9s ease-in-out infinite; }

  /* FAQ answer eases in rather than just unclipping */
  .faq__a > div > * { opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .35s var(--ease-out); }
  .faq__item.is-open .faq__a > div > * { opacity: 1; transform: none; transition-delay: .08s; }

  /* Thin scroll-progress line under the stuck header, where supported */
  @supports (animation-timeline: scroll()) {
    .nav::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--accent); transform-origin: left; transform: scaleX(0);
      opacity: 0; transition: opacity .3s var(--ease);
      animation: m-progress linear both;
      animation-duration: auto; animation-timeline: scroll(root);
    }
    .nav.is-stuck::after { opacity: .85; }
  }
}

@keyframes m-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes m-glow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50%      { transform: translateX(-50%) scale(1.08); opacity: .75; }
}
@keyframes m-progress { to { transform: scaleX(1); } }

/* Print: nobody prints a SaaS site, but if they do, don't waste ink. */
@media print {
  .nav, .nav__drawer, .cta-band, .ticker, .footer__social,
  .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}