/* ========================================================================
   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/--navy now alias the shared brand primitives defined once in
     app/globals.css (--brand-*), which loads on every route (it's the root
     stylesheet) so they're always present here. Single source of truth:
     change a brand hex in globals.css and it flows to both surfaces. The
     fallbacks keep these byte-identical if globals ever weren't present. */
  --mint:    var(--brand-mint, #3DDCCC);
  --navy:    var(--brand-navy, #221C46);
  --mint-rgb: var(--brand-mint-rgb, 61,220,204);
  --navy-rgb: var(--brand-navy-rgb, 34,28,70);
  --pale:    #DBE3EE;
  --white:   #ffffff;
  --black:   #000000;

  /* Alpha-derived tokens (all sit on top of brand colours) */
  --mint-12: rgba(var(--mint-rgb), 0.12);
  --mint-20: rgba(var(--mint-rgb), 0.20);
  --mint-40: rgba(var(--mint-rgb), 0.40);
  --navy-04: rgba(var(--navy-rgb), 0.04);
  --navy-08: rgba(var(--navy-rgb), 0.08);
  --navy-12: rgba(var(--navy-rgb), 0.12);
  --navy-20: rgba(var(--navy-rgb), 0.20);
  --navy-50: rgba(var(--navy-rgb), 0.50);
  --navy-60: rgba(var(--navy-rgb), 0.60);
  --navy-72: rgba(var(--navy-rgb), 0.72);
  --navy-80: rgba(var(--navy-rgb), 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. Deep teal glows from the top-left corner and
     blends corner-to-corner into brand navy, matching Kyle's reference.
     The teal holds out to roughly the halfway point (top-right and
     bottom-left corners both read as mid navy) before settling into
     solid navy. Stops sampled straight off Kyle's reference swatch. */
  --grad: linear-gradient(to bottom right, #06BEAB 0%, #136E7D 20%, #194665 35%, #1D2D57 50%, #201F4F 65%, #221C46 82%, #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;
}

/* ===== 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; }