/* =========================================================================
   POISE — Landing Page Styles
   Built using Refactoring UI principles (refactoring-ui-assistant skill).
   All design decisions trace to the systems defined in the :root block.
   ========================================================================= */

/* ---------- 1. Design tokens (the systems) ---------- */
:root {
  /* Ink scale — warm-tinted greys (hue ~300°), 9 shades.
     Anchored to brand hexes from the prompt: 50≈#E9E7EA, 300≈#828183,
     600≈#2A292B, 700≈#1A181B, 900≈#020003. Saturation rotated up at the
     dark extreme so the near-black doesn't read flat. */
  --ink-50:  hsl(300 6% 92%);
  --ink-100: hsl(300 5% 80%);
  --ink-200: hsl(300 4% 65%);
  --ink-300: hsl(300 3% 51%);
  --ink-400: hsl(300 4% 38%);
  --ink-500: hsl(300 5% 26%);
  --ink-600: hsl(300 5% 18%);
  --ink-700: hsl(300 5% 12%);
  --ink-800: hsl(300 8% 4%);
  --ink-900: hsl(300 20% 1%);

  /* Mint–teal accent scale, 9 shades, hue rotates 96°→184° across the
     light end (matches the brand gradient) and consolidates to a usable
     button/text family in the mid/dark range. */
  --mint-50:  hsl(96 60% 92%);
  --mint-100: hsl(140 80% 88%);
  --mint-200: hsl(177 60% 85%);
  --mint-300: hsl(140 50% 75%);
  --mint-400: hsl(150 45% 60%);
  --mint-500: hsl(155 50% 45%);
  --mint-600: hsl(160 55% 35%);
  --mint-700: hsl(165 60% 25%);
  --mint-800: hsl(170 65% 15%);
  --mint-900: hsl(175 70% 8%);

  /* Dramatic emphasis — single-use, the shock-stat purple. */
  --violet-500: hsl(249 82% 67%);

  /* Semantic role tokens (consume the scales above; never use raw scale
     values in component CSS). */
  --color-bg:           var(--ink-900);
  --color-surface:      var(--ink-700);
  --color-surface-hi:   var(--ink-600);
  --color-text:         var(--ink-50);
  --color-text-muted:   var(--ink-300);
  --color-text-faint:   var(--ink-400);
  --color-accent:       var(--mint-300);
  --color-accent-deep:  var(--mint-500);
  --color-emphasis:     var(--violet-500);
  --color-hairline:     hsl(180 18% 12%);  /* tinted toward teal to match the wash */

  /* Brand gradient (start → center → end, per prompt). */
  --gradient-mint: linear-gradient(
    100deg,
    var(--mint-50) 0%,
    var(--mint-100) 50%,
    var(--mint-200) 100%
  );

  /* Type scale (px) — handcrafted, not modular ratio. */
  --fs-12: 0.75rem;   /* 12 */
  --fs-14: 0.875rem;  /* 14 */
  --fs-16: 1rem;      /* 16 — base */
  --fs-18: 1.125rem;  /* 18 */
  --fs-20: 1.25rem;   /* 20 */
  --fs-24: 1.5rem;    /* 24 */
  --fs-30: 1.875rem;  /* 30 */
  --fs-36: 2.25rem;   /* 36 */
  --fs-48: 3rem;      /* 48 */
  --fs-60: 3.75rem;   /* 60 */
  --fs-72: 4.5rem;    /* 72 */
  --fs-96: 6rem;      /* 96 */

  /* Font weights — never below 400 for body. */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Line heights — inversely proportional to size. */
  --lh-tight:   1.05;  /* hero headline */
  --lh-snug:    1.15;  /* section headlines */
  --lh-normal:  1.4;   /* mid-size copy */
  --lh-relaxed: 1.6;   /* body */

  /* Letter spacing. */
  --tracking-tight:  -0.03em;  /* hero */
  --tracking-snug:   -0.02em;  /* mid headlines */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* all-caps eyebrows */

  /* Spacing scale (px). */
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-9:   6rem;     /* 96 */
  --space-10:  8rem;     /* 128 */
  --space-11: 12rem;     /* 192 */

  /* Radius scale. Personality: premium-minimal — neutral-to-slightly-soft. */
  --radius-1:  4px;
  --radius-2:  8px;
  --radius-3:  12px;
  --radius-4:  16px;
  --radius-5:  24px;
  --radius-pill: 999px;

  /* Shadow elevation — 5 levels. On dark UI most depth comes from the
     lighter top inset edge (skill 5d flat-depth + 5a top-down light). */
  --elev-1: inset 0 1px 0 hsl(0 0% 100% / 0.05),
            0 1px 2px hsl(0 0% 0% / 0.4);
  --elev-2: inset 0 1px 0 hsl(0 0% 100% / 0.04),
            0 2px 4px hsl(0 0% 0% / 0.3),
            0 6px 16px hsl(0 0% 0% / 0.25);
  --elev-3: inset 0 1px 0 hsl(0 0% 100% / 0.06),
            0 8px 24px hsl(0 0% 0% / 0.35);
  --elev-4: 0 0 0 1px hsl(140 80% 88% / 0.2),
            0 8px 32px hsl(150 60% 50% / 0.25);

  /* Layout containers — fixed widths, not percentages (skill 2d). */
  --container-wide:    1200px;
  --container-narrow:   720px;
  --container-prose:    640px;  /* ~32em — keeps paragraphs in the 45-75ch sweet spot */

  /* Motion. */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  150ms;
  --dur-base:  280ms;
  --dur-slow:  2000ms;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* Atmospheric teal wash — two very-low-opacity radials fixed to the viewport
     so the entire page has a quiet warmth instead of pure black. The hero
     and final-CTA layer brighter accents on top of this baseline. */
  background:
    radial-gradient(ellipse 80% 50% at 85% 0%,   hsl(170 55% 50% / 0.06), transparent 70%),
    radial-gradient(ellipse 70% 60% at 10% 100%, hsl(150 50% 45% / 0.05), transparent 70%),
    var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--mint-300); color: var(--ink-900); }

/* ---------- 3. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-7); }
}

.section {
  padding-block: var(--space-9);
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-10); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-11); }
}

/* Hairline divider — used only when separation can't be achieved by
   space alone (skill 7e). */
.hairline {
  height: 1px;
  background: var(--color-hairline);
  border: 0;
  margin: 0;
}

/* Section bleed — adds a subtle, directional radial wash to a section.
   Alternates left/right down the page to create rhythm. The wash sits
   in a ::before so it can't capture pointer events or shift layout. */
.bleed { position: relative; isolation: isolate; }
.bleed > * { position: relative; z-index: 1; }
.bleed::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bleed--left::before {
  background: radial-gradient(
    ellipse 55% 70% at 0% 50%,
    hsl(165 55% 45% / 0.10),
    transparent 65%
  );
}
.bleed--right::before {
  background: radial-gradient(
    ellipse 55% 70% at 100% 50%,
    hsl(150 55% 50% / 0.10),
    transparent 65%
  );
}
.bleed--left-soft::before {
  background: radial-gradient(
    ellipse 50% 65% at 0% 60%,
    hsl(170 50% 45% / 0.06),
    transparent 70%
  );
}
.bleed--right-soft::before {
  background: radial-gradient(
    ellipse 50% 65% at 100% 40%,
    hsl(155 50% 50% / 0.06),
    transparent 70%
  );
}

/* ---------- 4. Typography ---------- */
.eyebrow {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  /* Default optical nudge — most Outfit uppercase letters have a left
     side-bearing that makes the raw left edge sit inset from the heading
     below. Per-section overrides follow because the bearing depends on
     the first character of the heading. */
  margin-left: 5px;
}
/* Per-section optical-alignment overrides (first-letter dependent). */
#how .eyebrow,
#works-with .eyebrow,
#pricing .eyebrow      { margin-left: 0; }
#features .eyebrow,
#download .eyebrow     { margin-left: 3px; }

.h-hero {
  font-size: 2.75rem;           /* 44px — bigger on mobile, with tighter tracking to fit "Better presence." */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;     /* tighter than --tracking-tight on mobile to claw back horizontal space */
  color: var(--color-text);
  margin: 0;
}
@media (min-width: 640px)  { .h-hero { font-size: var(--fs-60); letter-spacing: var(--tracking-tight); } }
@media (min-width: 1024px) { .h-hero { font-size: 4.5rem; } }   /* 72px — fits "Better posture." / "Better presence." in the hero column */

.h-section {
  font-size: var(--fs-30);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
@media (min-width: 768px)  { .h-section { font-size: var(--fs-48); } }
@media (min-width: 1024px) { .h-section { font-size: var(--fs-60); } }

.h-card {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
@media (min-width: 768px) { .h-card { font-size: var(--fs-24); } }

.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  max-width: var(--container-prose);   /* keeps line length ≤ ~70ch (skill 3c) */
  margin: 0;
}
@media (min-width: 768px) { .lead { font-size: var(--fs-20); } }

.body { color: var(--color-text-muted); max-width: var(--container-prose); }
.body p + p { margin-top: var(--space-4); }

.fine-print {
  font-size: var(--fs-14);
  color: var(--color-text-faint);
  line-height: var(--lh-normal);
}

/* The gradient text treatment (used sparingly — single phrase per page). */
.text-gradient {
  background: var(--gradient-mint);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.text-emphasis { color: var(--color-emphasis); }
.text-accent   { color: var(--color-accent); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: baseline;             /* baseline, not center (skill 3d) */
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-3);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.005em;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  will-change: transform;
}
@media (min-width: 768px) {
  .btn { padding: var(--space-4) var(--space-6); font-size: var(--fs-18); }
}

.btn-primary {
  background: var(--gradient-mint);
  color: var(--ink-900);             /* skill 4f — flip contrast: dark text on bright bg */
  box-shadow: var(--elev-4);
}
.btn-primary:hover   { transform: translateY(-1px); box-shadow: var(--elev-4), 0 12px 40px hsl(150 60% 50% / 0.35); }
.btn-primary:active  { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--mint-100); outline-offset: 3px; }

.btn-secondary {
  color: var(--color-text);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-500);
}
.btn-secondary:hover { background: var(--color-surface); }

.btn-tertiary {
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  padding-inline: 0;
}
.btn-tertiary:hover { color: var(--color-text); }

/* App Store badge (small white text mark beside title). */
.btn-icon {
  width: 1.1em;
  height: 1.1em;
  position: relative;
  top: 0.12em;
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-9);     /* 48px top, 96px bottom */
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .hero { padding-block: var(--space-8) var(--space-10); }   /* 64px top, 128px bottom */
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-9);
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}
.hero__copy .h-hero { max-width: 18ch; }   /* tighter measure for the headline */
.hero__copy .lead   { max-width: 36em; }
/* Optical-alignment nudge: Outfit's uppercase 'S' (in the hero headline)
   has a left side-bearing that makes "Stand taller." sit visually offset
   from text above/below it. Easier to shift the small text by a couple
   of pixels than to fight the headline's typography. */

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-3);
}

/* Device mockup — phone frame wrapping the app screenshot.
   The frame is drawn in CSS (no PNG bezel) so it stays crisp at any size
   and matches the page's dark palette. */
.hero__device {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 270px;
  aspect-ratio: 9 / 19.5;
}
@media (min-width: 1024px) {
  .hero__device { max-width: 300px; justify-self: end; }
}

.hero__device-frame {
  position: absolute;
  inset: 0;
  border-radius: 44px;
  padding: 10px;                              /* bezel thickness */
  background: linear-gradient(
    180deg,
    hsl(0 0% 18%) 0%,
    hsl(0 0% 8%) 50%,
    hsl(0 0% 14%) 100%
  );
  box-shadow:
    inset 0 0 0 1px hsl(0 0% 100% / 0.06),   /* subtle inner highlight */
    0 30px 60px -20px hsl(0 0% 0% / 0.7),    /* drop shadow */
    0 0 0 1px hsl(0 0% 0% / 0.8);            /* outer edge */
}

.hero__device-screen {
  width: 100%;
  height: 100%;
  border-radius: 34px;
  display: block;
  object-fit: cover;
  background: var(--color-bg);
}

/* Soft glow behind the device — pulls the eye to the mockup and
   echoes the brand gradient. */
.hero__device::before {
  content: '';
  position: absolute;
  inset: -40% -35%;
  background: radial-gradient(
    ellipse at center,
    hsl(155 60% 50% / 0.10),
    hsl(180 60% 50% / 0.04) 40%,
    transparent 75%
  );
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* ---------- 7. How-it-works (numbered steps) ---------- */
.steps {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.step {
  background: var(--color-surface);
  border-radius: var(--radius-4);
  padding: var(--space-6);
  box-shadow: var(--elev-2);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.step:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }

.step__index {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-4);
}

.step__icon {
  width: 32px;
  height: 32px;
  color: var(--color-accent);   /* softened — skill 1f weight & contrast balance */
  opacity: 0.9;
  margin-bottom: var(--space-4);
}

.step__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.step__text {
  font-size: var(--fs-16);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 28em;
}

/* ---------- 8. Shock stat ---------- */
.stat {
  text-align: left;     /* not centered — skill 3g */
  padding-block: var(--space-9);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .stat {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-9);
    align-items: center;
  }
}

.stat__number {
  font-size: var(--fs-72);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-emphasis);
  margin: 0;
  display: block;
}
@media (min-width: 768px)  { .stat__number { font-size: var(--fs-96); } }
@media (min-width: 1024px) { .stat__number { font-size: 9rem; } } /* 144 */

.stat__caption {
  font-size: var(--fs-20);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
  max-width: 24em;
}
@media (min-width: 768px) { .stat__caption { font-size: var(--fs-24); } }

/* Supporting items — secondary stats that amplify the big number.
   Smaller type, accent-coloured figure, muted body. */
.stat__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .stat__list { gap: var(--space-6); }
}

.stat__item {
  /* Drop the default bullet ::before from .prose (we're outside .prose, but
     keep these defensively clean). */
  position: relative;
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent-deep);
}

.stat__item-figure {
  display: block;
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
}
@media (min-width: 768px) {
  .stat__item-figure { font-size: var(--fs-24); }
}

.stat__item-text {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-16);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  max-width: 28em;
}

/* Staggered reveal — each supporting item lags the one above by ~180ms.
   The big number reveals on its own schedule (no extra delay). */
.stat__item--1 { transition-delay: 120ms; }
.stat__item--2 { transition-delay: 300ms; }
.stat__item--3 { transition-delay: 480ms; }

/* Reset stagger delays when the section exits view so the fade-out
   doesn't lag behind the user's scroll. */
.stat__item:not(.is-visible) { transition-delay: 0ms; }

/* ---------- 9. Features grid ---------- */
.features {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-8);
}
@media (min-width: 640px)  { .features { grid-template-columns: repeat(2, 1fr); } }

.feature {
  background: var(--color-surface);
  border-radius: var(--radius-4);
  padding: var(--space-6);
  box-shadow: var(--elev-2);
}

.feature__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2);
}
.feature__text {
  font-size: var(--fs-16);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 32em;
}

/* ---------- 10. Compatible-with row ---------- */
/* Works-with section — two-column on desktop, stacked on mobile.
   Text + compat list on the left, product image on the right. */
.works-with__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .works-with__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-9);
  }
}

/* Product image — clean rounded card with a soft mint halo behind it
   that echoes the hero device treatment. */
.works-with__image {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
}
@media (min-width: 1024px) {
  .works-with__image { max-width: 320px; justify-self: end; }
}
.works-with__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-5);
  opacity: 0.8;
}
.works-with__image::before {
  content: '';
  position: absolute;
  inset: -20% -15%;
  background: radial-gradient(
    ellipse at center,
    hsl(155 60% 50% / 0.10),
    hsl(180 60% 50% / 0.04) 45%,
    transparent 75%
  );
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* Stagger the image entrance behind the text on this section, and let
   it ease in more slowly than the text for a relaxed feel. */
.works-with__image.reveal {
  transition:
    opacity 2800ms var(--ease-out),
    transform 2800ms var(--ease-out);
  transition-delay: 350ms;
}
.works-with__image.reveal:not(.is-visible) { transition-delay: 0ms; }

.compat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
  align-items: baseline;
  margin-top: var(--space-6);
}
.compat__label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.compat__item {
  font-size: var(--fs-16);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

/* ---------- 11. Pricing preview ---------- */
.pricing {
  text-align: left;
  max-width: var(--container-narrow);
}
.pricing__price {
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
@media (min-width: 768px) { .pricing__price { font-size: var(--fs-48); } }

/* ---------- 11.5 FAQ accordion ---------- */
.faq {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--container-narrow);
}
.faq__item {
  border-top: 1px solid var(--color-hairline);
}
.faq__item:last-child {
  border-bottom: 1px solid var(--color-hairline);
}
.faq__item details {
  padding: var(--space-5) 0;
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--space-6);
}
@media (min-width: 768px) {
  .faq__item summary { font-size: var(--fs-20); }
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item details[open] summary::after {
  content: '−';
}
.faq__a {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}

/* ---------- 12. Final CTA ---------- */
.final-cta {
  position: relative;
  padding-block: var(--space-10);
  /* Centred radial wash — last beat in the page's bleed rhythm.
     Quieter than before so it doesn't overpower the rest. */
  background:
    radial-gradient(ellipse 55% 45% at 50% 55%, hsl(155 55% 45% / 0.07), transparent 70%);
}
@media (min-width: 1024px) { .final-cta { padding-block: var(--space-11); } }


.final-cta__inner {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

/* ---------- 13. Footer ---------- */
.footer {
  padding-block: var(--space-8);
  font-size: var(--fs-14);
  color: var(--color-text-faint);
  border-top: 1px solid var(--color-hairline);
}
.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; align-items: start; }
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);             /* 12px — proportional to the smaller wordmark */
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-snug);
}
.footer__brand-mark {
  width: 20px;
  height: auto;
  flex-shrink: 0;
}
.footer__col-title {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.footer__list li + li { margin-top: var(--space-2); }
.footer__list a       { color: var(--color-text-muted); transition: color var(--dur-fast); }
.footer__list a:hover { color: var(--color-text); }

.footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
  align-items: baseline;
}
.footer__disclaimer { max-width: 48em; }

/* ---------- 14. Legal page (privacy / terms) prose styling ---------- */
.prose {
  max-width: var(--container-prose);
  margin: 0 auto;
  color: var(--color-text-muted);
}
.prose h1 {
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
@media (min-width: 768px) { .prose h1 { font-size: var(--fs-48); } }

.prose .updated {
  font-size: var(--fs-14);
  color: var(--color-text-faint);
  margin: 0 0 var(--space-8);
}
.prose h2 {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-3);
}
.prose p { margin: 0 0 var(--space-4); line-height: var(--lh-relaxed); }
.prose ul {
  margin: 0 0 var(--space-4);
  padding-left: 0;
}
.prose li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
}
.prose li::before {              /* skill 7a — supercharge defaults */
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.prose a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent-deep);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.prose a:hover { color: var(--color-accent); border-color: var(--color-accent); }

.legal-back {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-14);
  margin-bottom: var(--space-7);
}
.legal-back:hover { color: var(--color-text); }

/* ---------- 15. Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: hsl(300 20% 1% / 0.7);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);            /* 24px — taller bar */
}
@media (min-width: 768px) {
  .site-header__inner { padding-block: var(--space-6); }   /* 32px */
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);                      /* 16px between mark and word */
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
}
@media (min-width: 768px) {
  .brand { font-size: var(--fs-30); gap: var(--space-5); }   /* 24px gap */
}
.brand__mark {
  width: 26px;
  height: auto;          /* aspect ratio comes from the cropped viewBox (552:366) */
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .brand__mark { width: 32px; }
}

.nav {
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
}
.nav a {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  transition: color var(--dur-fast);
}
.nav a:hover { color: var(--color-text); }
@media (max-width: 639px) {
  .nav { display: none; }
}

/* ---------- 16. Scroll-reveal animation (paired with main.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(64px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance — slower and from much further down for a dramatic
   first-load reveal. Device column gets a delay so the copy leads. */
.hero .reveal {
  transform: translateY(120px);
  transition:
    opacity 3200ms var(--ease-out),
    transform 3200ms var(--ease-out);
}
.hero .hero__device.reveal {
  transition-delay: 350ms;
}
.hero .reveal.is-visible {
  transform: translateY(0);
}

/* Mobile: keep the original motion (full 120px travel, slow gentle
   duration) but drop the delay so the image starts entering immediately
   instead of lagging behind the text. */
@media (max-width: 1023px) {
  .hero .hero__device.reveal {
    transition-delay: 0ms;
  }
  .works-with__image.reveal {
    transition-delay: 0ms;
  }
}


@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .reveal { transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 17. Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  left: var(--space-5);
  max-width: 480px;
  margin-left: auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: hsl(300 8% 4% / 0.92);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-4);
  box-shadow: var(--elev-3);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.cookie-banner[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 640px) {
  .cookie-banner { flex-direction: row; align-items: center; }
}
.cookie-banner__text {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}
.cookie-banner__text a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent-deep);
}
.cookie-banner__text a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cookie-banner__btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cookie-banner__btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-hairline);
}
.cookie-banner__btn--ghost:hover { color: var(--color-text); border-color: var(--ink-400); }
.cookie-banner__btn--solid {
  background: var(--gradient-mint);
  color: var(--ink-900);
  border: 0;
}
.cookie-banner__btn--solid:hover { transform: translateY(-1px); }