/* ========================================================================
   Resume Tailor landing page
   Aesthetic: technical editorial / instrument-panel.
   Type: Fraunces (display, expressive serif), Geist (body), Geist Mono (data).
   Palette: deep near-black base with warm amber accent. Hairline borders.
   Composition: asymmetric grid, monospace data lines, generous negative space.
   ======================================================================== */

:root {
  /* Base */
  --bg-0: #0a0a0a;
  --bg-1: #111111;
  --bg-2: #161616;
  --bg-3: #1c1c1c;

  /* Hairlines */
  --border-0: #222222;
  --border-1: #2a2a2a;
  --border-2: #353535;

  /* Type */
  --fg-0: #fafafa;
  --fg-1: #e5e5e5;
  --fg-2: #a8a8a8;
  --fg-3: #6f6f6f;
  --fg-4: #4a4a4a;

  /* Accent: warm amber. Used sparingly, dominant in CTAs and active states. */
  --acc-0: #f5a524;
  --acc-1: #fbbf24;
  --acc-glow: rgba(245, 165, 36, 0.16);

  /* Secondary cool accent for callouts */
  --teal: #2dd4bf;
  --teal-soft: rgba(45, 212, 191, 0.12);

  /* Status */
  --ok: #4ade80;
  --warn: #facc15;

  /* Typography */
  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-body: "Geist", "Helvetica Neue", system-ui, sans-serif;
  --ff-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Spacing */
  --container-max: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 600ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle background texture: noise + soft amber wash anchored top-right */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 40% at 80% -10%, var(--acc-glow), transparent 60%),
    radial-gradient(40% 30% at -10% 110%, rgba(45, 212, 191, 0.05), transparent 70%),
    var(--bg-0);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

a { color: var(--fg-0); text-decoration: none; transition: color 160ms var(--ease); }
a:hover { color: var(--acc-0); }

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--acc-0);
  color: var(--bg-0);
  padding: 8px 14px;
  z-index: 200;
  border-radius: 4px;
  font-weight: 600;
  font-family: var(--ff-mono);
  font-size: 13px;
}
.skip:focus { top: 16px; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mono {
  font-family: var(--ff-mono);
  font-feature-settings: "ss01", "tnum";
}

/* ========================================================================
   Header
   ======================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(10, 10, 10, 0.72);
  border-bottom: 1px solid var(--border-0);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg-0);
  height: 100%;
}
.brand:hover { color: var(--fg-0); }

.brand-logo {
  display: block;
  height: calc(64px - 6px); /* header is 64px; 3px padding top + 3px bottom */
  width: auto;
  padding: 3px 0;
  object-fit: contain;
}
.footer-logo {
  height: 28px;
  padding: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
.site-nav a {
  color: var(--fg-2);
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.site-nav a:hover { color: var(--fg-0); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--acc-0);
  transition: width 220ms var(--ease);
}
.site-nav a:hover::after { width: 100%; }
.nav-github {
  border: 1px solid var(--border-1);
  border-radius: 4px;
  padding: 7px 14px !important;
}
.nav-github::after { display: none; }
.nav-github:hover {
  border-color: var(--acc-0);
  color: var(--acc-0) !important;
}

/* ----- Mobile nav toggle (hamburger) -----
   Hidden on desktop. At ≤720px the desktop .site-nav row is replaced by
   this button + a slide-down panel. The three bars animate into an X
   when [aria-expanded="true"], driven by script.js. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: border-color 160ms var(--ease);
}
.nav-toggle:hover { border-color: var(--acc-0); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--acc-0);
  outline-offset: 2px;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg-1);
  border-radius: 1px;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

@media (max-width: 720px) {
  /* Show the hamburger; the desktop inline nav row leaves the layout. */
  .nav-toggle { display: inline-flex; }

  /* Slide-down panel below the sticky header. position: fixed so it sits
     above page content; top: 64px = header height. Hidden by translateY
     when .open is absent, slides in when script.js adds it. */
  .site-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0 18px;
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    /* The panel sits at top: 64px (header height). translateY(-100%) only
       shifts by the panel's own height, leaving the bottom edge peeking
       below the viewport top by ~64px. We subtract another 80px so the
       panel is comfortably above the viewport in its closed state, with
       headroom for subpixel rounding. */
    transform: translateY(calc(-100% - 80px));
    transition: transform 280ms var(--ease);
    z-index: 99;
    pointer-events: none;
  }
  .site-nav.open {
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-nav a {
    padding: 14px var(--gutter);
    font-size: 15px;
    color: var(--fg-1);
  }
  /* Kill the desktop hover-underline animation on stacked items. */
  .site-nav a::after { display: none; }
  /* Source link keeps its border treatment but stretches to match the
     stacked layout; small top margin separates it from the other links. */
  .site-nav .nav-github {
    margin: 10px var(--gutter) 0;
    padding: 12px 14px !important;
    text-align: center;
    border-radius: 4px;
  }
}

/* ========================================================================
   Hero
   ======================================================================== */
.hero {
  position: relative;
  padding: clamp(60px, 9vw, 130px) 0 clamp(80px, 11vw, 160px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 28px;
  padding: 6px 12px;
  border: 1px solid var(--border-1);
  border-radius: 100px;
  width: fit-content;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc-0);
  box-shadow: 0 0 12px var(--acc-0);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

.dl-counter {
  /* Block-level flex with intrinsic width so this badge always sits on
     its own line below the eyebrow, regardless of child size. Previously
     this was `inline-flex` and the row would inline-flow with the eyebrow
     until the number filled in, then awkwardly drop to a new line. Now
     it lives on its own line from first paint. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 20px;
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--acc-0);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--acc-glow), transparent 80%);
}
.dl-counter-num {
  font-size: 28px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  line-height: 1;
}
.dl-counter-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Pulsing dots shown while the Apps Script fetch is in flight. */
.dl-counter-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 4px;
}
.dl-counter-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc-0);
  animation: dl-dot-pulse 1.2s ease-in-out infinite;
}
.dl-counter-dots .dot:nth-child(2) { animation-delay: 0.16s; }
.dl-counter-dots .dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes dl-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); }
  40% { opacity: 1; transform: scale(1); }
}

/* Hide the counter if fetch fails — better than a stuck spinner. */
.dl-counter.failed { display: none; }

.display {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--fg-0);
  margin: 0 0 28px;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--acc-0);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.lead {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0 0 36px;
}

/* Downloads */
.downloads {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
  margin: 0 0 24px;
}

.download {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  transition: all 200ms var(--ease);
  position: relative;
  overflow: hidden;
}
.download::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--acc-glow), transparent 60%);
  opacity: 0;
  transition: opacity 220ms var(--ease);
  pointer-events: none;
}
.download:hover {
  border-color: var(--acc-0);
  color: var(--fg-0);
  transform: translateX(4px);
}
.download:hover::before { opacity: 1; }
.download:hover .download-arrow { color: var(--acc-0); transform: translateY(2px); }

.download-platform {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--fg-0);
  grid-column: 1;
}
.download-file {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--fg-3);
  grid-column: 2;
  white-space: nowrap;
}
.download-arrow {
  grid-column: 3;
  font-size: 18px;
  color: var(--fg-2);
  transition: transform 220ms var(--ease), color 220ms var(--ease);
}

.download-primary {
  border-color: var(--acc-0);
  background: linear-gradient(135deg, var(--bg-2), rgba(245, 165, 36, 0.06));
}
.download-primary .download-platform { color: var(--acc-0); }

@media (max-width: 480px) {
  .download { grid-template-columns: 1fr auto; }
  .download-file { grid-column: 1 / 2; grid-row: 2; }
  .download-arrow { grid-column: 2; grid-row: 1 / span 2; }
}

.meta {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}
.meta a { color: var(--fg-2); }

/* Right column of the hero: stacks the score-card instrument panel and
   the Product Hunt badge in a flex column with a small gap. align-items:
   flex-start so the inline-block badge anchor doesn't stretch wider than
   its 250px artwork (avoids an oversized clickable area). */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 27px;
  align-items: flex-start;
}
.hero-right > .hero-card { width: 100%; } /* card still fills the column */

/* Product Hunt featured badge. Width is fixed by the badge artwork
   (250x54); we only style the wrapper for hover lift and slight
   de-emphasis vs the amber CTA accents so the download buttons stay the
   loudest element on the page. */
.ph-badge {
  display: inline-block;
  line-height: 0; /* kill the trailing baseline gap below the inline image */
  border-radius: 6px;
  opacity: 0.92;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.ph-badge:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.ph-badge img {
  display: block;
  max-width: 250px;
  width: 100%;
  height: auto;
}
.meta a:hover { color: var(--acc-0); }
.meta-sep { color: var(--fg-4); padding: 0 8px; }

/* Hero card: live mock match analysis */
.hero-card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 28px;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--acc-0), transparent 40%, var(--teal) 90%);
  opacity: 0.3;
  z-index: -1;
  filter: blur(0.5px);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-0);
  margin-bottom: 22px;
}
.card-label { font-size: 12px; color: var(--fg-3); }
.card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.card-score { margin-bottom: 26px; }
.score-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  display: block;
  margin-bottom: 10px;
}
.score-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.score-number {
  font-family: var(--ff-display);
  font-size: 64px;
  font-weight: 300;
  color: var(--fg-0);
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum";
}
.score-out-of {
  font-family: var(--ff-mono);
  font-size: 18px;
  color: var(--fg-3);
}
.score-bar {
  position: relative;
  height: 6px;
  background: var(--bg-0);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.score-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--acc-0), var(--acc-1));
  border-radius: 3px;
  transition: width 1.4s var(--ease);
  box-shadow: 0 0 12px rgba(245, 165, 36, 0.4);
}
.score-bar-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.score-bar-ticks span {
  width: 1px;
  height: 4px;
  background: var(--border-2);
}
.score-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-rubric {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-0);
}
.card-rubric li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border-0);
  color: var(--fg-1);
}
.check {
  font-family: var(--ff-mono);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.check.yes { background: rgba(74, 222, 128, 0.16); color: var(--ok); }
.check.partial { background: rgba(250, 204, 21, 0.16); color: var(--warn); }
.rubric-detail { font-size: 12px; color: var(--fg-3); }

.card-footer {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border-0);
}
.footer-line {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--fg-2);
}
.footer-label {
  display: inline-block;
  width: 64px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ========================================================================
   Section heads (shared)
   ======================================================================== */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 8px;
  margin-bottom: clamp(40px, 5vw, 72px);
  align-items: start;
}
.section-num {
  font-size: 13px;
  color: var(--acc-0);
  letter-spacing: 0.1em;
  padding-top: 18px;
  grid-row: 1 / span 2;
}
.section-head h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.02;
}
.section-lede {
  font-size: 17px;
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
  grid-column: 2;
}

/* ========================================================================
   Features
   ======================================================================== */
.features {
  padding: clamp(70px, 8vw, 120px) 0;
  border-top: 1px solid var(--border-0);
}
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border-0);
}
.feature {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--border-0);
  transition: background 240ms var(--ease);
}
.feature:hover { background: linear-gradient(90deg, transparent, var(--bg-1) 30%, var(--bg-1) 70%, transparent); }
.feature-num {
  font-size: 13px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  padding-top: 6px;
}
.feature h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--fg-0);
  font-variation-settings: "opsz" 36, "SOFT" 30;
}
.feature p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 70ch;
}

/* ----- F6 stretch-level demo strip -----
   The "stretch level dial" feature is the most differentiated thing on
   the page (no other résumé tool has this kind of explicit dial), and
   the LinkedIn feedback that prompted this redesign was that the
   abstract description didn't make the trust claim ("never invents")
   feel concrete. So F6 gets a dedicated demo: source bullet at the top,
   three honest re-castings below, each annotated with a one-line
   "what this is" note in mono so the truthfulness claim is visible
   instead of buried in the body paragraph.

   Visual escalation maps to the dial's metaphor: conservative card is
   neutral hairlines, balanced has a teal tint, aggressive lights up
   with the amber accent so the eye lands there last. */

.feature--demo .feature-num {
  color: var(--acc-0);
}

.stretch-demo {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.stretch-demo-source {
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--fg-3);
  border-radius: 6px;
  padding: 14px 18px;
  background: var(--bg-1);
}
.stretch-demo-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
/* The source list shows several corpus entries so the reader can see
   provenance for the consolidated variants below. Each item is italic
   to read as "an actual line from your profile" rather than narrative
   prose. */
.stretch-demo-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.stretch-demo-source-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-1);
  font-style: italic;
  max-width: none;
}
.stretch-demo-source-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fg-3);
  font-style: normal;
  font-weight: 600;
}

.stretch-demo-arrow {
  text-align: center;
  font-size: 18px;
  color: var(--fg-3);
  line-height: 1;
}

.stretch-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 820px) {
  .stretch-demo-grid { grid-template-columns: 1fr; }
}

.stretch-demo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  border: 1px solid var(--border-1);
  border-radius: 6px;
  background: var(--bg-1);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}
.stretch-demo-card:hover {
  transform: translateY(-2px);
}
.stretch-demo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stretch-demo-card-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.stretch-demo-bullet {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
  flex: 1;
  /* override .feature p's max-width inside the cards so each variant
     can expand to fill its column width even on wide viewports. */
  max-width: none;
}
.stretch-demo-note {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  border-top: 1px dashed var(--border-1);
  padding-top: 8px;
  margin-top: 2px;
}

/* Conservative: the baseline. Neutral. */
.stretch-demo--conservative .stretch-demo-card-label { color: var(--fg-2); }

/* Balanced: warmer signal that interpretation is happening. Teal
   evokes the secondary cool accent already in the palette. */
.stretch-demo--balanced {
  border-color: rgba(45, 212, 191, 0.35);
  background: linear-gradient(180deg, var(--bg-1), rgba(45, 212, 191, 0.05));
}
.stretch-demo--balanced .stretch-demo-card-label { color: var(--teal); }

/* Aggressive: amber accent, the loudest of the three. Eye lands here
   last. Slight glow so it reads as the destination on the dial. */
.stretch-demo--aggressive {
  border-color: rgba(245, 165, 36, 0.55);
  background: linear-gradient(180deg, var(--bg-1), rgba(245, 165, 36, 0.07));
  box-shadow: 0 6px 22px -10px rgba(245, 165, 36, 0.35);
}
.stretch-demo--aggressive .stretch-demo-card-label { color: var(--acc-0); }

/* ========================================================================
   How it works
   ======================================================================== */
.how {
  padding: clamp(70px, 8vw, 120px) 0;
  border-top: 1px solid var(--border-0);
  background:
    radial-gradient(40% 60% at 100% 30%, rgba(45, 212, 191, 0.04), transparent 70%);
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
}
.step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 28px;
  background: var(--bg-1);
  border: 1px solid var(--border-0);
  border-radius: 6px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.step:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.step-num {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 0.85;
  color: var(--acc-0);
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  letter-spacing: -0.04em;
}
.step h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 21px;
  margin: 0 0 8px;
  color: var(--fg-0);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36;
}
.step p {
  margin: 0;
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.55;
}

/* ========================================================================
   Privacy
   ======================================================================== */
.privacy {
  padding: clamp(70px, 8vw, 120px) 0;
  border-top: 1px solid var(--border-0);
}
.privacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 920px) {
  .privacy-grid { grid-template-columns: 1fr; }
}
.privacy-text .display { margin-top: 12px; font-size: clamp(34px, 4.6vw, 54px); }
.privacy-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border-0);
  border-bottom: 1px solid var(--border-0);
  padding: 4px 0;
}
.privacy-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-0);
}
.privacy-item:last-child { border-bottom: none; }
.privacy-label {
  font-size: 12px;
  color: var(--acc-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 2px;
}
.privacy-item p {
  margin: 0;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.55;
}

/* ========================================================================
   CTA
   ======================================================================== */
.cta {
  padding: clamp(70px, 8vw, 120px) 0;
  border-top: 1px solid var(--border-0);
}
.downloads-cta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: none;
  margin-bottom: 32px;
}
@media (max-width: 880px) {
  .downloads-cta { grid-template-columns: 1fr; }
}
.cta-fineprint {
  font-size: 13px;
  color: var(--fg-3);
  max-width: 80ch;
  margin: 0;
  line-height: 1.6;
}

/* ========================================================================
   Footer
   ======================================================================== */
.site-footer {
  border-top: 1px solid var(--border-0);
  padding: 48px 0 56px;
  background: var(--bg-1);
}
.footer-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px 40px;
  align-items: center;
}
.footer-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.footer-tag { font-size: 12px; color: var(--fg-3); }
.footer-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 13px;
}
.footer-nav a { color: var(--fg-2); }
.footer-nav a:hover { color: var(--acc-0); }
.footer-fineprint {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--fg-3);
  border-top: 1px solid var(--border-0);
  padding-top: 24px;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .footer-row { grid-template-columns: 1fr; }
  .footer-nav { justify-content: flex-start; }
}

/* ========================================================================
   Entrance animations.
   Stagger reveals on initial paint, then scroll-triggered fades after.
   ======================================================================== */
.hero-text > * { opacity: 0; transform: translateY(16px); animation: fadeUp 700ms var(--ease) forwards; }
.hero-text > .eyebrow { animation-delay: 0ms; }
.hero-text > .dl-counter { animation-delay: 60ms; }
.hero-text > .display { animation-delay: 140ms; }
.hero-text > .lead { animation-delay: 260ms; }
.hero-text > .downloads { animation-delay: 380ms; }
.hero-text > .meta { animation-delay: 520ms; }
.hero-card { opacity: 0; transform: translateY(20px) scale(0.985); animation: fadeUpIn 800ms var(--ease) 200ms forwards; }
.hero-right > .ph-badge { opacity: 0; transform: translateY(12px); animation: fadeUp 700ms var(--ease) 1100ms forwards; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scroll reveals (added/removed in script.js) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ========================================================================
   IP / commercial-licensing modal
   ======================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}
.modal-backdrop.open {
  display: flex;
  animation: fadeIn 240ms var(--ease);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--acc-0);
  border-radius: 8px;
  padding: 36px 32px 28px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
  animation: slideUp 320ms var(--ease);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.modal-close:hover {
  color: var(--fg-0);
  background: var(--bg-3);
}

.modal-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc-0);
  margin-bottom: 12px;
}

.modal-title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 36, "SOFT" 30;
}

.modal-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 14px;
}
.modal-body strong { color: var(--fg-0); font-weight: 600; }

.modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.modal-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--acc-0);
  color: var(--bg-0);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 4px;
  transition: filter 160ms var(--ease), transform 160ms var(--ease);
}
.modal-cta:hover {
  color: var(--bg-0);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.modal-secondary {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--fg-2);
  border-bottom: 1px dashed var(--border-2);
  padding: 4px 0;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.modal-secondary:hover {
  color: var(--acc-0);
  border-color: var(--acc-0);
}
.modal-cancel {
  background: transparent;
  border: 1px solid var(--border-1);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
  margin-left: auto;
}
.modal-cancel:hover {
  color: var(--fg-0);
  border-color: var(--border-2);
}

/* "Yes, this really is free" modal — small additions on top of the
   shared .modal-* chrome. The four-line check list reinforces the
   "what you don't pay" objection set; checkmarks are amber so the
   list reads as confidence, not a feature pitch. The single CTA
   button is the primary acknowledgement ("Got it, thanks") so we
   don't surround it with secondary actions that dilute the moment. */
.free-modal-checks {
  list-style: none;
  margin: 4px 0 16px;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--fg-1);
}
.free-modal-checks li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.free-modal-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(245, 165, 36, 0.16);
  color: var(--acc-0);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transform: translateY(2px);
}

/* Single-CTA acknowledgement: the button takes the whole row's width
   on desktop too, since there's no secondary action to balance against
   it. The .modal-actions parent stays a flex container; we just let
   the lone .modal-cta stretch. */
.free-modal-cta {
  margin-left: 0;
  width: 100%;
  justify-content: center;
  text-align: center;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* Modal on narrow phones: the desktop row layout (CTA + secondary +
   pushed-right cancel) doesn't fit. Stack the actions vertically with
   stretched buttons, and trim the modal's inner padding so the body
   text gets a few more pixels of width. The "secondary" link
   (Or, star the project) is centered so its dashed underline reads as
   a deliberate text decoration rather than an awkward full-width line. */
@media (max-width: 480px) {
  .modal {
    padding: 30px 20px 22px;
  }
  .modal-title {
    font-size: clamp(20px, 5.5vw, 24px);
  }
  .modal-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .modal-cta {
    justify-content: center;
    text-align: center;
  }
  .modal-secondary {
    align-self: center;
    text-align: center;
    margin: 4px 0;
  }
  .modal-cancel {
    margin-left: 0; /* override the desktop "push right" rule */
    width: 100%;
    text-align: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}