/* ========================================================================
   Pinnix, vanilla site stylesheet
   Brand:  Pantone 333 C mint #3DDCCC · Pantone 275 C navy #221C46 ·
           Pantone 656 C pale blue #DBE3EE · black · white
   Type:   Pinnix Sans (display + body) and Pinnix Serif (italic accent)
   ======================================================================== */

/* Pinnix brand type. Files are self-hosted under neutral filenames in
   /fonts/. Family names are deliberately the Pinnix brand tokens
   rather than the underlying foundry names. */
@font-face {
  font-family: "Pinnix Sans";
  src: url("/fonts/pinnix-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pinnix Sans";
  src: url("/fonts/pinnix-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pinnix Sans";
  src: url("/fonts/pinnix-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pinnix Sans";
  src: url("/fonts/pinnix-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pinnix Sans";
  src: url("/fonts/pinnix-sans-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pinnix Serif";
  src: url("/fonts/pinnix-serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pinnix Serif";
  src: url("/fonts/pinnix-serif-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Brand palette, only these */
  --mint:    #3DDCCC;
  --navy:    #221C46;
  --pale:    #DBE3EE;
  --white:   #ffffff;
  --black:   #000000;

  /* Alpha-derived tokens (all sit on top of brand colours) */
  --mint-12: rgba(61, 220, 204, 0.12);
  --mint-20: rgba(61, 220, 204, 0.20);
  --mint-40: rgba(61, 220, 204, 0.40);
  --navy-04: rgba(34, 28, 70, 0.04);
  --navy-08: rgba(34, 28, 70, 0.08);
  --navy-12: rgba(34, 28, 70, 0.12);
  --navy-20: rgba(34, 28, 70, 0.20);
  --navy-50: rgba(34, 28, 70, 0.50);
  --navy-60: rgba(34, 28, 70, 0.60);
  --navy-72: rgba(34, 28, 70, 0.72);
  --navy-80: rgba(34, 28, 70, 0.80);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-20: rgba(255, 255, 255, 0.20);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-80: rgba(255, 255, 255, 0.80);

  /* Semantic tokens (brief spec, mapped onto brand) */
  --ink:    var(--navy);    /* primary text and dark surfaces */
  --paper:  var(--white);   /* primary background */
  --mist:   var(--pale);    /* alt soft section background */
  --fog:    var(--navy-72); /* secondary text, darkened from navy-60 for WCAG AA (6.35:1 on white, 5.56:1 on mist) */
  --line:   var(--navy-12); /* hairlines */
  --pulse:  var(--mint);    /* accent (was red in brief, we use mint) */

  /* Typography */
  --font-sans:  "Pinnix Sans", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Pinnix Serif", "Iowan Old Style", "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Spacing scale (brief) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* Other */
  --radius:     8px;
  --radius-lg: 16px;
  --max-width:        1100px;
  --max-width-prose:   720px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Signature gradient, Pantone 333C → 275C, Illustrator -60° (CSS 150°),
     midpoint biased 10% so mint sits only in upper-left corner */
  --grad: linear-gradient(150deg, #3DDCCC 0%, #2F7C89 10%, #221C46 38%, #221C46 100%);
}

/* ===== Reset / base =================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, picture { max-width: 100%; display: block; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* Visually hidden, screen-reader only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Focus ring (everywhere) */
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip to content */
.skip-link {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: top var(--transition);
}
.skip-link:focus { top: 16px; }

/* ===== Layout helpers ================================================= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.container-prose {
  width: 100%;
  max-width: var(--max-width-prose);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.section { padding: var(--space-8) 0; }
.section--mist { background: var(--mist); }
.section--ink  { background: var(--ink); color: var(--white); }
.section--gradient {
  background: var(--grad);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

@media (max-width: 720px) {
  .section { padding: var(--space-7) 0; }
}

/* ===== Type ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2 {
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h3 {
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
h4 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}
p { margin: 0; }
p + p { margin-top: var(--space-3); }
strong { font-weight: 600; }
em { font-style: italic; }
small { font-size: 14px; color: var(--fog); }

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.section--ink .eyebrow,
.section--gradient .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow { color: var(--mint); }

/* Serif italic (hero callouts and pull quotes). Explicitly reset
   font-feature-settings to normal: the Next.js layout's globals.css
   sets ss01/cv11 site-wide for Geist Sans, but those features map to
   swash alternates in Ws Paradose so when the 404 page renders under
   the app router it picks up the body inheritance and the serif goes
   all curly. Marketing HTML pages don't load globals.css so they
   were unaffected; this override makes the rule robust regardless. */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-feature-settings: normal;
  font-variant-ligatures: no-discretionary-ligatures;
  letter-spacing: -0.005em;
  color: var(--navy);
}
.hero .serif,
.page-hero .serif,
.legal-hero .serif,
.section--ink .serif,
.section--gradient .serif { color: var(--mint); }

/* ===== Central alignment (site-wide consistency) ===================== */
/* Every section head (eyebrow + h2) centres; the grids/prose below keep
   their own alignment (long body stays readable, block-centred). */
.section > .container > .eyebrow { justify-content: center; }
.section > .container > h2 { text-align: center; }
/* Centred heroes: eyebrow, CTA group and sub-note all centre with the copy. */
.page-hero--center .eyebrow { justify-content: center; }
.page-hero--center .cta-group { justify-content: center; }
.page-hero--center .hero-meta { margin-left: auto; margin-right: auto; text-align: center; }
/* Legal heroes centred to match the marketing heroes. */
.legal-hero { text-align: center; }
.legal-hero .eyebrow { justify-content: center; }
.legal-hero .legal-lede { margin-left: auto; margin-right: auto; }
.legal-hero .legal-meta { justify-content: center; }

/* Callout pull-quote */
.callout {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-feature-settings: normal;
  font-variant-ligatures: no-discretionary-ligatures;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--mint);
  padding-left: 16px;
  margin: var(--space-6) 0 var(--space-6) var(--space-5);
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .callout { margin-left: 0; }
}

/* Generic prose block */
.prose p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.prose p + p { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose ul, .prose ol { padding-left: 22px; margin: var(--space-3) 0; }
.prose li { margin: var(--space-1) 0; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mint); }
.prose a:hover { text-decoration-color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

/* ===== Legal document (terms, privacy, cookies) ====================== */
/* Scoped to .legal-doc / .legal-hero. Reuses brand tokens; deliberately
   separate from .prose so the shared prose rules are never touched. */
.legal-hero {
  background: var(--grad);
  color: var(--white);
  padding: var(--space-7) 0 var(--space-6);
}
.legal-hero h1 {
  color: var(--white);
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.02em;
}
.legal-hero .legal-lede {
  color: var(--white-80);
  font-size: 18px;
  line-height: 1.5;
  margin-top: var(--space-3);
  max-width: 640px;
}
.legal-meta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--white-60);
  font-variant-numeric: tabular-nums;
}
.legal-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--mint);
}

.legal-doc {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.legal-contents {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}
.legal-contents-title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
  margin: 0 0 var(--space-3);
}
.legal-contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--space-6);
}
.legal-contents li { break-inside: avoid; margin: 0 0 var(--space-2); }
.legal-contents a {
  display: inline-flex;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
}
.legal-contents a:hover { color: var(--navy); }
.legal-contents a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mint); }
.legal-contents-n { color: var(--mint); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 20px; }

.legal-clause {
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.legal-clause:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.legal-clause-head { display: flex; gap: 10px; align-items: baseline; }
.legal-clause-n {
  color: var(--ink);
  font-weight: 600;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.legal-clause h2 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.legal-gloss {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fog);
  margin-top: var(--space-2);
}
.legal-clause-body { margin-top: var(--space-3); }
.legal-clause-body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.legal-clause-body p + p { margin-top: var(--space-3); }
.legal-clause-body .legal-sub {
  color: var(--fog);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}
.legal-clause-body ul { padding-left: 22px; margin: var(--space-3) 0; }
.legal-clause-body li {
  margin: var(--space-1) 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.legal-clause-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--mint);
}
.legal-clause-body a:hover { text-decoration-color: var(--ink); }
.legal-clause-body strong { font-weight: 600; }

.legal-foot {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.legal-foot small { font-size: 13px; color: var(--fog); }

@media (max-width: 640px) {
  .legal-contents ol { columns: 1; }
}

/* ===== Buttons ========================================================= */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--mint);
  color: var(--ink);
}
.btn-primary:hover {
  background: var(--mint);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(61,220,204,0.55);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--white);
}
.section--ink .btn-secondary,
.section--gradient .btn-secondary,
.hero .btn-secondary,
.page-hero .btn-secondary {
  color: var(--white);
  border-color: var(--white);
}
.section--ink .btn-secondary:hover,
.section--gradient .btn-secondary:hover,
.hero .btn-secondary:hover,
.page-hero .btn-secondary:hover {
  background: var(--white);
  color: var(--ink);
}
.btn-ghost {
  height: auto;
  padding: 4px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mint);
  border-radius: 0;
}
.btn-ghost:hover { color: var(--ink); border-bottom-color: var(--ink); }
.btn-large {
  height: 56px;
  padding: 0 36px;
  font-size: 17px;
}
.btn-full { width: 100%; }

/* CTA group */
.cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ===== Nav ============================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(34, 28, 70, 0.94);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  color: var(--white);
  transition: box-shadow var(--transition);
}
.nav--scrolled {
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.6);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.nav-brand { display: inline-flex; align-items: center; }
.nav-brand img { height: 22px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  color: var(--white-80);
  font-size: 15px;
  font-weight: 500;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--white); }
.nav-links .btn-secondary {
  height: 38px;
  padding: 0 18px;
  color: var(--white);
  border-color: var(--white-20);
  font-size: 14px;
}
.nav-links .btn-secondary:hover {
  background: var(--white-12);
  color: var(--white);
  border-color: var(--white);
}
.nav-links .btn-primary {
  height: 38px;
  padding: 0 18px;
  font-size: 14px;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--white);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateY(-100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  overflow: hidden;
}
.mobile-menu[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
}
.mobile-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
}
.mobile-menu-head img { height: 22px; }
.mobile-menu-close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--white);
}
.mobile-menu-close svg { width: 24px; height: 24px; }
/* The links list is the scrollable region: the header and the sign-in /
   sign-up actions above it stay put, everything else scrolls. min-height: 0
   lets it shrink inside the flex column so overflow actually kicks in. */
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-4);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 12px;
}
.mobile-menu-links a {
  display: block;
  padding: 18px 4px;
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid var(--white-12);
}
.mobile-menu-actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* btn-secondary defaults to ink-on-ink; flip it for the dark menu, matching
   the desktop nav's treatment. */
.mobile-menu-actions .btn-secondary {
  color: var(--white);
  border-color: var(--white-20);
}
.mobile-menu-actions .btn-secondary:hover {
  background: var(--white-12);
  color: var(--white);
  border-color: var(--white);
}

/* ===== Footer ========================================================== */
.site-footer {
  background: var(--ink);
  color: var(--white-80);
  padding: var(--space-8) 0 var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-7);
}
.footer-brand img { height: 78px; width: auto; margin-bottom: var(--space-4); }
.footer-tagline {
  color: var(--white-60);
  font-size: 15px;
  line-height: 1.55;
  max-width: 360px;
  margin: 0;
}
.footer-meta {
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--white-60);
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  margin: 0 0 var(--space-3);
}
.footer-col a {
  display: block;
  padding: 5px 0;
  color: var(--white-60);
  font-size: 14.5px;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--white-12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--white-60);
}
.footer-bottom a:hover { color: var(--white); }

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ===== Cards =========================================================== */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card--highlight {
  border-color: var(--mint);
  background: linear-gradient(180deg, var(--mint-12) 0%, var(--paper) 60%);
  position: relative;
}
.card--highlight .ribbon {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--mint);
  color: var(--ink);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

/* ===== Forms =========================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.field input[type="email"],
.field input[type="text"],
.field input[type="password"],
.field input[type="tel"],
.field textarea {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; }
.field input:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--mint-20);
}
.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.4;
}
.field-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--mint);
  flex-shrink: 0;
}

/* Password field with show/hide toggle */
.field-password { position: relative; }
.field-password input { padding-right: 56px; }
.field-password .toggle-password {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  padding: 0 12px;
  color: var(--fog);
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
}
.field-password .toggle-password:hover { color: var(--ink); }

.password-strength {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.password-strength span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background var(--transition);
}
.password-strength[data-strength="1"] span:nth-child(-n+1),
.password-strength[data-strength="2"] span:nth-child(-n+2),
.password-strength[data-strength="3"] span:nth-child(-n+3) { background: var(--mint); }
.password-strength-label {
  font-size: 12px;
  color: var(--fog);
  margin-top: 4px;
}

/* Waitlist form (lives in gradient/ink CTAs) */
.waitlist-form {
  display: flex;
  gap: 6px;
  margin: var(--space-5) auto 0;
  padding: 6px;
  background: var(--white-12);
  border: 1px solid var(--white-20);
  border-radius: 999px;
  max-width: 480px;
  backdrop-filter: blur(10px);
}
.waitlist-form input[type="email"] {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 15px;
  height: 48px;
  padding: 0 18px;
}
.waitlist-form input::placeholder { color: var(--white-60); }
.waitlist-form button {
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
}
.waitlist-note {
  margin-top: var(--space-3);
  color: var(--white-60);
  font-size: 13px;
}

/* ===== Hero (varies per page) ========================================= */
.hero {
  padding: clamp(80px, 10vh, 140px) 0 clamp(80px, 8vh, 120px);
  background: var(--grad);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero h1 {
  color: var(--white);
  margin: var(--space-3) 0 0;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero .lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--white-80);
  margin-top: var(--space-4);
  max-width: 480px;
}
.hero .cta-group { margin-top: var(--space-5); }
.hero-meta {
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--white-60);
  max-width: 420px;
}
.hero--split {
  position: relative;
  min-height: 600px;
}
.hero--split .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 540px;
}
.hero--split .hero-product {
  position: absolute;
  top: 50%;
  left: 56%;
  width: 980px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.hero--split .hero-product .app-frame {
  width: 100%;
  max-width: none;
  margin: 0;
  pointer-events: auto;
}
@media (max-width: 1280px) {
  .hero--split .hero-product { left: 56%; width: 820px; }
}
@media (max-width: 1024px) {
  .hero--split .hero-product { left: 62%; width: 680px; }
  .hero--split .hero-copy { max-width: 50%; }
}
.hero--stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}
.hero--stack .hero-copy { max-width: 720px; }
.hero--stack .lede { margin-left: auto; margin-right: auto; max-width: 620px; }
.hero--stack .cta-group { justify-content: center; }
.hero--stack .hero-product { width: 100%; max-width: 940px; margin-top: var(--space-4); }
.hero--center { text-align: center; }
.hero--center .lede { margin-left: auto; margin-right: auto; }
.hero--center .cta-group { justify-content: center; }
@media (max-width: 880px) {
  .hero--split { min-height: 0; }
  .hero--split .hero-copy { max-width: none; }
  .hero--split .hero-product {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    max-width: 720px;
    margin: var(--space-6) auto 0;
  }
  .hero h1 { font-size: clamp(38px, 9vw, 56px); }
}

.hero-squiggle {
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 900px;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.22;
}
.hero-squiggle path {
  fill: none;
  stroke: var(--mint);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero > .container { position: relative; z-index: 1; }

/* Phone frame (used in home hero) */
.phone-frame {
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 360 / 720;
  background: var(--white);
  border-radius: 36px;
  border: 8px solid #15102D;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}
.phone-frame::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 24px;
  border-radius: 20px;
  background: #15102D;
  z-index: 5;
}
.phone-screen {
  padding: 40px 16px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
  font-size: 13px;
}
.phone-screen .ph-greeting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.phone-screen .ph-greeting strong { font-size: 16px; font-weight: 600; }
.phone-screen .ph-greeting span { font-size: 11px; color: var(--fog); }
.phone-section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  margin-top: 8px;
}
.phone-task {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.phone-task .stripes {
  display: flex;
  gap: 3px;
  margin-bottom: 2px;
}
.phone-task .stripes span {
  height: 3px;
  width: 22px;
  border-radius: 2px;
  background: var(--mint);
}
.phone-task .stripes span:nth-child(2) { background: var(--navy); opacity: 0.4; }
.phone-task .stripes span:nth-child(3) { background: var(--pale); }
.phone-task .ph-title { font-size: 13px; font-weight: 500; line-height: 1.3; }
.phone-task .ph-meta { font-size: 11px; color: var(--fog); }
.phone-task--broken {
  background: linear-gradient(180deg, rgba(61,220,204,0.10) 0%, var(--paper) 50%);
  border-color: var(--mint);
}
.phone-task-substeps {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.phone-task-substep {
  font-size: 11.5px;
  color: var(--fog);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
}
.phone-task-substep::before {
  content: "";
  width: 10px; height: 10px;
  border: 1.5px solid var(--mint);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== Index page-specific ============================================ */
.problem-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.problem-cols p { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0; }
@media (max-width: 720px) {
  .problem-cols { grid-template-columns: 1fr; gap: var(--space-4); }
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.how-grid--four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
  .how-grid--four { grid-template-columns: 1fr; }
}
.how-grid .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}
.how-grid--four .card { padding: var(--space-6) var(--space-5); }
.how-grid--four .card h3 { font-size: 22px; line-height: 1.2; text-wrap: balance; }
.how-grid--four .card p { font-size: 16px; line-height: 1.6; }
.how-grid .card-icon {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--mint-20);
  border-radius: 12px;
}
.how-grid .card-icon svg { width: 26px; height: 26px; color: var(--ink); }
.how-grid .card p { color: var(--ink); font-size: 16px; line-height: 1.55; }
@media (max-width: 880px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* Steps list (homepage "How it works") */
.steps {
  list-style: none;
  padding: 0;
  margin: var(--space-6) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 1000px;
}
.steps li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.steps .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mint-20);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.steps h3 { margin: 0; font-size: 19px; line-height: 1.25; text-wrap: balance; }
.steps p { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
}

.founder-split {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: var(--space-7);
  align-items: center;
}
.founder-portrait {
  aspect-ratio: 4 / 5;
  background: var(--mist);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background-image: url("assets/kyle-portrait.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.founder-portrait::after {
  content: "Kyle";
  position: absolute;
  left: 12px; bottom: 12px;
  background: var(--paper);
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 0 4px 12px -4px rgba(34,28,70,0.25);
}
@media (max-width: 720px) {
  .founder-split { grid-template-columns: 1fr; }
}

.who-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}
.who-list li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink);
}
.who-list li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
  margin-top: 9px;
}
.who-list { padding: 0; }
@media (max-width: 720px) {
  .who-list { grid-template-columns: 1fr; }
}

/* ===== Step rows (how-it-works) ====================================== */
.step-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.step-row--flip .step-copy { order: 2; }
.step-row--flip .step-visual { order: 1; }
.step-visual {
  background: var(--mist);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--line);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 880px) {
  .step-row, .step-row--flip { grid-template-columns: 1fr; }
  .step-row--flip .step-copy { order: 1; }
  .step-row--flip .step-visual { order: 2; }
}

/* Mock building blocks used in step visuals */
.mock {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mock-row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mock-row .stripes { display: flex; gap: 3px; }
.mock-row .stripes span { height: 3px; width: 24px; border-radius: 2px; background: var(--mint); }
.mock-row .stripes span:nth-child(2) { opacity: 0.5; }
.mock-row .stripes span:nth-child(3) { background: var(--navy); opacity: 0.4; }
.mock-row .meta { font-size: 10.5px; color: var(--fog); letter-spacing: 0.04em; }
.mock-arrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fog);
  margin: 4px 0;
}
.mock-arrow::before, .mock-arrow::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.mock-substeps { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; }
.mock-substep {
  background: var(--mint-12);
  border: 1px solid var(--mint-40);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-substep .num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.mock-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-day-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.mock-day-row:first-child { border-top: 0; }
.mock-day-row .label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}
.mock-day-row .task {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.mock-day-row .task small {
  display: block; color: var(--fog); font-size: 10.5px; margin-top: 2px;
}
.mock-day-row .task.heavy { border-color: var(--mint); background: var(--mint-12); }

.pick-button {
  display: inline-flex;
  align-items: center; gap: 8px;
  background: var(--mint);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 12px 32px -10px rgba(61,220,204,0.5);
}
.pick-result {
  background: var(--paper);
  border: 1px solid var(--mint);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  margin-top: 12px;
}
.pick-result .picked {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
}
.pick-result strong { display: block; margin-top: 4px; font-size: 14.5px; }
.pick-result .why {
  margin-top: 8px;
  background: var(--mint-12);
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  line-height: 1.45;
}

/* ===== Pricing page ==================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-grid--three { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
@media (max-width: 900px) { .pricing-grid--three { grid-template-columns: 1fr; max-width: 480px; } }
.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.price-card .price-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
}
.price-card .price-figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price-card .price-figure strong {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-card .price-figure span { font-size: 20px; color: var(--fog); font-weight: 500; }
.price-card .price-sub { color: var(--fog); font-size: 14px; }
.price-card .features {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-card .features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.45;
}
.price-card .features li::before {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--mint);
  background-image:
    linear-gradient(45deg, transparent 38%, var(--ink) 40%, var(--ink) 44%, transparent 46%),
    linear-gradient(135deg, transparent 50%, var(--ink) 52%, var(--ink) 64%, transparent 66%);
}
.price-card .save-line {
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  background: var(--mint-12);
  padding: 8px 12px;
  border-radius: 8px;
}

/* ===== Auth pages ====================================================== */
.auth-page {
  min-height: 100vh;
  background: var(--grad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(40px, 8vh, 96px) var(--space-4) var(--space-6);
  position: relative;
  overflow: hidden;
  color: var(--white);
}
/* Brand swirl decoration, uses the same .hero-squiggle img pattern as
   .hero and .section--gradient. Positioned bottom-left per screenshots. */
.auth-page > .hero-squiggle { z-index: 0; }
.auth-brand {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-brand img { height: 110px; width: auto; display: block; }
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: rgba(34, 28, 70, 0.38);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-6);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
  color: var(--white);
}
.auth-card h1 {
  font-size: 30px;
  line-height: 1.15;
  color: var(--white);
  text-align: center;
}
.auth-card .lede {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  text-align: center;
}
.auth-card form { margin-top: var(--space-5); }
.auth-card .field { margin-bottom: var(--space-4); }
.auth-card .field label,
.auth-card .field > .label-row > label {
  display: block;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.auth-card .field input[type="email"],
.auth-card .field input[type="text"],
.auth-card .field input[type="password"],
.auth-card .field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: var(--white);
  font-size: 16px;
  font-family: var(--font-sans);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.auth-card .field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.auth-card .field input:focus,
.auth-card .field select:focus {
  outline: 0;
  border-color: var(--mint);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(61, 220, 204, 0.18);
}
.auth-card .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.auth-card .field-row .field { margin-bottom: 0; }
.auth-card .label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.auth-card .label-row label { margin-bottom: 0; }
.auth-card .field-password { position: relative; }
.auth-card .field-password input { padding-right: 64px; }
.auth-card .field-password .toggle-password {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: 6px;
}
.auth-card .field-password .toggle-password:hover { color: var(--white); }
.auth-card .forgot-link {
  display: inline;
  margin: 0;
  width: auto;
  text-align: right;
  font-size: 14px;
  color: var(--mint);
  font-weight: 600;
  text-decoration: none;
}
.auth-card .forgot-link:hover { color: var(--white); }

/* DOB three-up */
.auth-card .dob-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--space-3);
}
.auth-card .select-wrap { position: relative; }
.auth-card .select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.auth-card select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: none;
}
.auth-card select option { background: #221C46; color: var(--white); }
.auth-card select:invalid,
.auth-card select.is-placeholder { color: rgba(255, 255, 255, 0.4); }

/* Checkboxes */
.auth-card .field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.45;
  margin: 0 0 12px;
}
.auth-card .field-checkbox:last-of-type { margin-bottom: var(--space-5); }
.auth-card .field-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--transition), background var(--transition);
}
.auth-card .field-checkbox input[type="checkbox"]:hover { border-color: var(--mint); }
.auth-card .field-checkbox input[type="checkbox"]:checked {
  background: var(--mint);
  border-color: var(--mint);
}
.auth-card .field-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
}
.auth-card .field-checkbox a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Password helper */
.auth-card .password-strength { display: none; }
.auth-card .password-strength-label {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* Primary CTA inside auth-card: white pill, navy text */
.auth-card .btn-primary {
  width: 100%;
  height: 56px;
  background: var(--white);
  color: var(--navy);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  box-shadow: 0 10px 28px -14px rgba(0,0,0,0.45);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.auth-card .btn-primary:hover {
  background: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,0.55);
}
.auth-card .btn-primary:disabled,
.auth-card .btn-primary[aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.45);
  color: rgba(34, 28, 70, 0.55);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Foot links */
.auth-foot {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
}
.auth-foot + .auth-foot { margin-top: 8px; }
.auth-foot a {
  color: var(--mint);
  font-weight: 600;
  text-decoration: none;
  border: 0;
}
.auth-foot a:hover { color: var(--white); }
.auth-legal {
  position: relative;
  z-index: 1;
  margin-top: var(--space-5);
  text-align: center;
  font-size: 13px;
  color: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth-legal a { color: var(--mint); text-decoration: none; }
.auth-legal a:hover { color: var(--white); }
.auth-legal .dot { opacity: 0.6; }
.auth-security {
  position: relative;
  z-index: 1;
  margin-top: var(--space-4);
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 460px;
}

@media (max-width: 480px) {
  .auth-card { padding: var(--space-5); border-radius: 16px; }
  .auth-card h1 { font-size: 26px; }
  .auth-card .dob-grid { grid-template-columns: 1fr 1fr 1.2fr; }
  .auth-card .field-row { grid-template-columns: 1fr; gap: 0; }
  .auth-card .field-row .field { margin-bottom: var(--space-4); }
  .auth-card .field-row .field:last-child { margin-bottom: 0; }
}

/* ===== Details / accordion ============================================ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
details.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  transition: border-color var(--transition);
}
details.faq-item[open] { border-color: var(--mint); }
details.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  position: relative;
  padding-right: 56px;
  line-height: 1.4;
  border-radius: var(--radius);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--fog);
  border-bottom: 2px solid var(--fog);
  transform: translateY(-75%) rotate(45deg);
  transition: transform var(--transition);
}
details.faq-item[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
  border-color: var(--ink);
}
details.faq-item summary:focus-visible { outline-offset: -2px; }
details.faq-item .answer {
  padding: 0 22px 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fog);
  max-width: 760px;
}

.faq-group { margin-top: var(--space-7); }
.faq-group h2 { margin-bottom: var(--space-4); }

/* ===== Page hero variants for sub-pages =============================== */
.page-hero {
  padding: var(--space-8) 0 var(--space-7);
  background: var(--grad);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { color: var(--white); margin: var(--space-3) 0 0; }
.page-hero .lede {
  color: var(--white-80);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  margin-top: var(--space-3);
  max-width: 640px;
}
.page-hero--center { text-align: center; }
.page-hero--center .lede { margin-left: auto; margin-right: auto; }
.page-hero > .container { position: relative; z-index: 1; }

/* ===== Contact cards =================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.contact-grid .card { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-grid .card h3 { margin-bottom: 4px; }
.contact-grid .card a { color: var(--ink); border-bottom: 1px solid var(--mint); align-self: flex-start; font-weight: 600; }
.contact-grid .card a:hover { border-color: var(--ink); }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* Contact form layout */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: flex-start;
}
@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}
.contact-form-col h2 { text-wrap: balance; }
.contact-form .field-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 560px) {
  .contact-form .field-row.two { grid-template-columns: 1fr; gap: 0; }
}
.contact-form .field { margin-bottom: var(--space-3); }
.contact-form .field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
  height: 48px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form .field textarea { height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--mint-20);
}
.contact-form .select-wrap { position: relative; }
.contact-form .select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--fog);
  border-bottom: 2px solid var(--fog);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: none;
}
.contact-form .btn-primary { margin-top: var(--space-3); }
.contact-form .form-note {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--fog);
  max-width: 520px;
}

/* Contact aside (email options) */
.contact-aside {
  background: var(--mist);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--line);
}
.contact-aside h3 { margin: 0; }
.contact-aside-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-aside-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--navy-12);
}
.contact-aside-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-aside-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.contact-aside-list a {
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
  border-bottom: 1px solid var(--mint);
  align-self: flex-start;
}
.contact-aside-list a:hover { border-color: var(--ink); }
.contact-aside-hint {
  font-size: 13px;
  color: var(--fog);
  line-height: 1.45;
}

/* ===== About: For/Against two columns ================================ */
.values-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
.values-cols ul { list-style: none; padding: 0; margin: 0; }
.values-cols ul li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 16.5px;
  color: var(--ink);
}
.values-cols ul li:first-child { border-top: 0; }
@media (max-width: 720px) { .values-cols { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ===== Utility ========================================================= */
.text-center { text-align: center; }
.muted { color: var(--fog); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.center-text-cta { text-align: center; margin-top: var(--space-5); }

/* 404 page */
.notfound {
  text-align: center;
  padding: var(--space-9) 0;
}
.notfound .eyebrow { justify-content: center; }
.notfound h1 { margin: var(--space-3) auto; max-width: 620px; }
.notfound .lede { max-width: 540px; margin-left: auto; margin-right: auto; color: var(--fog); }
.notfound .cta-group { justify-content: center; margin-top: var(--space-5); }

/* ----------------------------------------------------------
   Cookie / analytics consent banner.
   Pinned to the bottom of the viewport, single horizontal row on
   desktop, stacked on mobile. Brand-coloured so it reads as part
   of the site, not a third-party plug-in.
----------------------------------------------------------*/
.pnx-cookie-banner {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 9999;
  background: var(--ink);
  color: var(--white);
  border-radius: 16px;
  box-shadow: 0 16px 40px -12px rgba(34, 28, 70, 0.45);
  padding: 16px 20px;
  font-family: inherit;
}
.pnx-cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
}
.pnx-cookie-banner-copy { flex: 1 1 280px; min-width: 240px; }
.pnx-cookie-banner-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.pnx-cookie-banner-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.pnx-cookie-banner-body a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pnx-cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.pnx-cookie-banner .btn-primary,
.pnx-cookie-banner .btn-secondary {
  height: auto;
  padding: 10px 18px;
  font-size: 13px;
  border-radius: 999px;
}
.pnx-cookie-banner .btn-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
}
.pnx-cookie-banner .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}
@media (max-width: 640px) {
  .pnx-cookie-banner { inset: auto 8px 8px 8px; padding: 14px; }
  .pnx-cookie-banner-inner { gap: 14px; }
  .pnx-cookie-banner-actions { width: 100%; }
  .pnx-cookie-banner-actions .btn-primary,
  .pnx-cookie-banner-actions .btn-secondary { flex: 1; }
}

/* ── Blog prose: rendered markdown ────────────────────────── */
.blog-prose {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 100%;
}
.blog-prose h1, .blog-prose h2, .blog-prose h3, .blog-prose h4, .blog-prose h5, .blog-prose h6 {
  color: var(--white);
  font-weight: 700;
  margin: 2em 0 0.6em;
  line-height: 1.25;
}
.blog-prose h1 { font-size: 2em; }
.blog-prose h2 { font-size: 1.5em; }
.blog-prose h3 { font-size: 1.25em; }
.blog-prose h4 { font-size: 1.1em; }
.blog-prose p { margin: 0 0 1.2em; }
.blog-prose a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-prose a:hover { opacity: 0.8; }
.blog-prose strong { color: var(--white); font-weight: 700; }
.blog-prose ul, .blog-prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.6em;
}
.blog-prose li { margin-bottom: 0.4em; }
.blog-prose li::marker { color: var(--mint); }
.blog-prose blockquote {
  margin: 1.5em 0;
  padding: 1em 1.4em;
  border-left: 3px solid var(--mint);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
}
.blog-prose blockquote p:last-child { margin-bottom: 0; }
.blog-prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--mint);
}
.blog-prose pre {
  margin: 1.5em 0;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
}
.blog-prose pre code {
  padding: 0;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85em;
  line-height: 1.6;
}
.blog-prose hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.blog-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1.5em 0;
}
.blog-prose table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
}
.blog-prose th, .blog-prose td {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}
.blog-prose th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  color: var(--white);
}

/* ==========================================================================
   SEO landing pages: timer tool, brain dump box, comparison helpers
   Added for /timer, /5-minute-timer ... /1-hour-timer, /adhd-planner,
   /brain-dump. Light-section friendly, brand tokens only.
   ========================================================================== */

/* Body copy on light sections (self-contained, avoids the dark blog .prose) */
.pnx-prose p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fog);
}
.pnx-prose p strong { color: var(--ink); font-weight: 600; }
.pnx-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mint); }
.pnx-prose a:hover { text-decoration-color: var(--ink); }

/* --- Countdown timer ----------------------------------------------------- */
.pnx-timer-section .container { display: flex; flex-direction: column; align-items: center; }

.pnx-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
}

.pnx-timer-dial {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 1 / 1;
}

.pnx-timer-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* start the depletion at 12 o'clock */
}
.pnx-timer-ring-track {
  fill: none;
  stroke: var(--navy-08);
  stroke-width: 14;
}
.pnx-timer-ring-progress {
  fill: none;
  stroke: var(--mint);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.35s linear;
}
.pnx-timer.is-finished .pnx-timer-ring-progress {
  stroke: var(--mint);
  animation: pnx-timer-pulse 1.4s ease-in-out infinite;
}
@keyframes pnx-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.pnx-timer-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pnx-timer-digits {
  font-family: var(--font-geist-mono), "SF Mono", ui-monospace, "Menlo", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-size: clamp(44px, 13vw, 76px);
  line-height: 1;
}
/* H:MM:SS (1 hour+) is wider than MM:SS, so shrink it to keep the ring margin */
.pnx-timer.has-hours .pnx-timer-digits { font-size: clamp(34px, 10vw, 56px); }
.pnx-timer-state {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog);
}
.pnx-timer.is-finished .pnx-timer-state { color: var(--mint); }

.pnx-timer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.pnx-timer-presets,
.pnx-timer-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.pnx-timer-jump { margin-top: 22px; }

.pnx-timer-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pnx-timer-chip:hover { border-color: var(--mint); }
.pnx-timer-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.pnx-timer-custom {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.pnx-timer-custom input {
  width: 84px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.pnx-timer-custom input:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }

/* --- Related timers grid ------------------------------------------------- */
.pnx-timer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.pnx-timer-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pnx-timer-link:hover {
  border-color: var(--mint);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--navy-08);
}
.pnx-timer-link strong { color: var(--ink); font-size: 17px; }
.pnx-timer-link span { color: var(--fog); font-size: 14px; }

/* --- Brain dump capture box --------------------------------------------- */
.pnx-dump {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 14px 40px var(--navy-08);
  max-width: 640px;
  margin: 0 auto;
}
.pnx-dump-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.pnx-dump-head svg { width: 22px; height: 22px; color: var(--mint); }
.pnx-dump textarea {
  width: 100%;
  min-height: 168px;
  resize: vertical;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
}
.pnx-dump textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.pnx-dump-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.pnx-dump-count { color: var(--fog); font-size: 14px; }
.pnx-dump-note { color: var(--fog); font-size: 13px; margin-top: 10px; }

/* --- Comparison table (adhd-planner) ------------------------------------ */
.pnx-compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 16px;
}
.pnx-compare th, .pnx-compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink);
}
.pnx-compare thead th {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fog);
}
.pnx-compare tbody th { font-weight: 600; }
.pnx-compare .pnx-compare-pinnix { color: var(--ink); font-weight: 600; }
.pnx-compare .pnx-compare-them { color: var(--fog); }

@media (prefers-reduced-motion: reduce) {
  .pnx-timer-ring-progress { transition: none; }
  .pnx-timer.is-finished .pnx-timer-ring-progress { animation: none; }
  .pnx-timer-link:hover { transform: none; }
}

/* --- Free timers nav dropdown ------------------------------------------- */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--white-80);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-dropdown-trigger:hover { color: var(--white); }
.nav-dropdown-caret { width: 14px; height: 14px; transition: transform 0.15s ease; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  transform: translateY(-4px);
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px var(--navy-20);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 120;
}
/* transparent bridge so the pointer can cross the gap without the menu closing */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.nav-dropdown-menu a:hover { background: var(--navy-04); color: var(--ink); }

/* Mobile menu: label above the Free timers group */
.mobile-menu-label {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--white-20);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-60);
}

/* --- Strong CTA card directly under the timer --------------------------- */
.pnx-timer-cta {
  margin: 40px auto 0;
  max-width: 720px;
  width: 100%;
  background: var(--ink);
  border-radius: 20px;
  padding: 38px 32px;
  text-align: center;
  color: var(--white);
}
.pnx-timer-cta h2 { color: var(--white); }
.pnx-timer-cta .serif { color: var(--mint); }
.pnx-timer-cta > p {
  color: var(--white-80);
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
  margin: 12px auto 0;
}
.pnx-timer-cta-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}
.pnx-timer-cta-form input[type="email"] {
  flex: 1 1 260px;
  max-width: 320px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--white-20);
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
}
.pnx-timer-cta-form input[type="email"]:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.pnx-timer-cta-done { color: var(--white); font-weight: 600; margin-top: 20px; }
.pnx-timer-cta-note { color: var(--white-60); font-size: 13px; margin-top: 14px; }
.pnx-timer-cta-note a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }