/* Daily Driver OS: sales page v2 (28 Oct 2026). Loaded AFTER kit.css, which still supplies the base
   (font, tokens, container, buttons, header, analytics banner, footer) and styles the policy pages.
   Everything new here is prefixed "s-". Look: black top (his pick, 28 Oct).
   Yellow is a fill or a highlight only, never text on white (1.3:1). */

:root {
  --term-bg: #151515;
  --term-line: #2c2c2c;
  --term-text: #e6e8ec;
  --term-dim: #8b93a7;
  --on-ink: #ffffff;
  --s-radius: 1.25rem;
  --s-section-y: clamp(4rem, 8vw, 7.5rem);
  --bar-h: 5.25rem;
}

/* clip, not hidden: hidden would make body a scroll box and break position: sticky (the file list in What's inside). */
body { overflow-x: clip; }

/* ---------- Shared pieces ---------- */

.s-section { padding-block: var(--s-section-y); }
.s-section + .s-section { border-top: 1px solid var(--line); }
.s-soft { background: var(--soft); }
.s-soft + .s-section, .s-section + .s-soft { border-top: 0; }

.s-head { display: grid; row-gap: 0.875rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.s-eyebrow::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 1px rgba(40, 40, 40, 0.18);
}
.s-h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.s-lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); max-width: 40rem; }

/* Centred sections (his call, 28 Oct): video, who made it, FAQ */
.s-center .s-head { margin-inline: auto; justify-items: center; text-align: center; }
.s-center .s-lede { margin-inline: auto; }

.s-cta-row { display: grid; justify-items: start; row-gap: 0.875rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Buy buttons: big, and the loudest thing in each section ---------- */

.s-btn-xl {
  min-height: 4rem;
  padding: 1.05rem 2.25rem;
  column-gap: 0.6em;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 700;
}
.s-btn-xl .btn-arrow { width: 1.15em; height: 1.15em; }
@media (max-width: 599px) { .s-btn-xl { flex-wrap: nowrap; padding-inline: 1rem; font-size: 1.0625rem; } }

/* On light backgrounds: yellow with an ink edge and a hard shadow that presses down on click. */
.s-btn-pop {
  background: var(--yellow);
  border: 2px solid var(--ink);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
.s-btn-pop:hover { background: #ffe95e; border-color: var(--ink); transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.s-btn-pop:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }

/* On dark backgrounds: yellow with a soft glow. */
.s-btn-glow {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  box-shadow: 0 14px 34px -12px rgba(255, 225, 67, 0.65);
}
.s-btn-glow:hover { background: #fff0a3; border-color: #fff0a3; transform: translateY(-2px); }
.s-btn-glow:active { transform: translateY(1px); }

/* Trust row under every buy button */
.s-trust {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.4;
}
.s-trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.s-trust svg { width: 1rem; height: 1rem; flex: none; }

/* Offer / regular price switching. Classes are set on <html> before the first paint. */
.is-regular .offer-only, .is-offer .regular-only { display: none !important; }

/* ---------- Header + hero (black) ---------- */

.site-header, .s-hero { background: var(--ink); color: var(--on-ink-muted); }
.site-header .mark, .site-header .topline-name { color: var(--on-ink); }
.site-header .topline-tag, .site-header .topline-dot { color: var(--on-ink-muted); }
.site-header :focus-visible, .s-hero :focus-visible { outline-color: var(--yellow); }

.s-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.s-hero-copy { display: grid; row-gap: 1.25rem; align-content: center; }
.s-hero .s-eyebrow { color: var(--on-ink); }
.s-hero .s-eyebrow::before { box-shadow: none; }

.s-title {
  color: var(--on-ink);
  font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.125rem);
  line-height: 1.1;
  letter-spacing: -0.045em;
  font-weight: 650;
  max-width: 14ch;
}
/* The myth is the set-up line, smaller; the truth carries the size. */
.s-title .s-myth { display: block; max-width: 24ch; margin-bottom: 0.4em; color: #9aa1b2; font-size: 0.48em; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; }
/* The yellow band starts 0.16em below the top of the line box, so it never covers the line above. */
.s-title mark {
  padding: 0 0.1em;
  white-space: nowrap;
  color: var(--ink);
  background: linear-gradient(to bottom, transparent 0.16em, var(--yellow) 0.16em);
  border-radius: 0 0 0.12em 0.12em;
}
.s-sub { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.55; max-width: 34rem; }

/* Offer box: the first-screen urgency. Real end time, the same for everyone (offers.js). */
.s-offer {
  display: grid;
  row-gap: 0.875rem;
  justify-self: start;
  width: 100%;
  max-width: 30rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
}
.s-offer-top { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.75rem; row-gap: 0.375rem; color: var(--on-ink-muted); font-size: 0.9375rem; line-height: 1.35; }
.s-offer-top strong { color: var(--on-ink); }
.s-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.s-timer { display: flex; gap: 0.5rem; }
.s-tcell {
  display: grid;
  justify-items: center;
  min-width: 4.25rem;
  padding: 0.5rem 0.375rem 0.4rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.07);
}
.s-tnum {
  color: var(--on-ink);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.s-tunit { color: var(--on-ink-muted); font-size: 0.75rem; line-height: 1.2; }

.s-buy { display: grid; justify-items: start; row-gap: 1rem; }
.s-price-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; row-gap: 0.25rem; }
.s-price-big { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.s-hero .s-price-big { color: var(--on-ink); }
.s-price-reg { font-size: 0.9375rem; }
.s-hero .s-trust { color: var(--on-ink-muted); }
.s-hero .s-trust svg { color: var(--yellow); }

/* Terminal illustration */
.s-term {
  overflow: hidden;
  border: 1px solid var(--term-line);
  border-radius: 0.875rem;
  background: var(--term-bg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.s-term-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--term-line);
  background: #1d1d1d;
}
.s-term-bar i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #3d3d3d; }
.s-term-bar i:nth-child(1) { background: #ff5f57; }
.s-term-bar i:nth-child(2) { background: #febc2e; }
.s-term-bar i:nth-child(3) { background: #28c840; }
.s-term-title { margin-left: auto; margin-right: auto; padding-right: 2.5rem; font-size: 0.75rem; color: var(--term-dim); font-family: var(--mono); }
.s-term-body {
  margin: 0;
  padding: 1rem 1.125rem 1.25rem;
  color: var(--term-text);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.9rem);
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.s-term-body > span { display: block; min-height: 1.75em; }
.s-term-body .t-dim { color: var(--term-dim); }
.s-term-body .t-in { padding: 0 0.3em; border-radius: 0.25em; background: var(--yellow); color: var(--ink); }
.s-term-body .t-head { color: #ffffff; font-weight: 600; }
.s-term-body .t-ok { color: #8fe3a8; }
.s-term-body .t-mark { color: var(--yellow); }
.s-term-body .t-cursor { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: text-bottom; background: var(--yellow); }
.s-hero .s-term-cap { margin-top: 0.75rem; color: #9aa1b2; font-size: 0.8125rem; line-height: 1.45; }

@media (prefers-reduced-motion: no-preference) {
  .s-anim .t-l { opacity: 0; transform: translateY(4px); animation: s-line 0.3s ease-out forwards; animation-delay: calc(0.35s + var(--i, 0) * 0.16s); }
  .s-anim .t-cursor { animation: s-blink 1.1s steps(1) 3.6s infinite; }
  @keyframes s-line { to { opacity: 1; transform: none; } }
  @keyframes s-blink { 50% { opacity: 0; } }
}

@media (min-width: 1024px) {
  /* The terminal stretches to the height of the text column, so the two sides balance. */
  .s-hero .container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(3rem, 5vw, 6rem);
    align-items: stretch;
  }
  .s-hero-visual { display: flex; flex-direction: column; }
  .s-hero-visual .s-stage { display: flex; flex: 1; flex-direction: column; }
  .s-hero .s-term { display: flex; flex: 1; flex-direction: column; }
  .s-hero .s-term-body { flex: 1; font-size: 0.9375rem; padding: 1.25rem 1.5rem; }
  .s-hero .container { padding-top: 1.25rem; padding-bottom: 3.5rem; }
}
/* His bar: the hero fills the first screen on a laptop (header strip is 4.5rem). */
@media (min-width: 1024px) and (min-height: 700px) {
  .s-hero { min-height: calc(100vh - 4.5rem); display: flex; }
  .s-hero .container { align-self: center; }
}
@media (max-width: 599px) {
  .s-offer { max-width: none; }
  .s-tcell { min-width: 0; flex: 1; }
  .s-buy { justify-items: stretch; }
}

/* ---------- Proof strip: big numbers that count up when scrolled into view ---------- */

.s-proof { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--s-radius); background: var(--line); }
.s-proof-item { display: grid; justify-items: center; align-content: start; row-gap: 0.75rem; padding: clamp(1.75rem, 3vw, 2.75rem) 1.5rem; background: var(--white); text-align: center; }
.s-proof-num {
  display: block;
  color: var(--ink);
  font-size: clamp(3.25rem, 2.2rem + 3.6vw, 5.5rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.s-proof-num::after { content: ""; display: block; width: 2.75rem; height: 0.3rem; margin: 0.75rem auto 0; border-radius: 999px; background: var(--yellow); }
.s-proof-text { max-width: 20rem; font-size: 1rem; line-height: 1.5; }
@media (min-width: 768px) { .s-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Before / after ---------- */

.s-ba { display: grid; gap: var(--gap); }
.s-ba-card { display: grid; row-gap: 1.25rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--s-radius); }
.s-ba-without { background: var(--soft-2); }
.s-ba-with { background: var(--ink); color: var(--on-ink-muted); }
.s-ba-title { font-size: 1.25rem; letter-spacing: -0.02em; }
.s-ba-with .s-ba-title { color: var(--on-ink); }
.s-ba-list { display: grid; row-gap: 0.875rem; padding: 0; list-style: none; }
.s-ba-list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.625rem; align-items: start; }
.s-ba-list svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; }
.s-ba-without svg { color: #98a2b3; }
.s-ba-with svg { color: var(--yellow); }
.s-ba-with code { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); color: var(--on-ink); }
@media (min-width: 900px) { .s-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- How it works ---------- */

.s-steps { display: grid; gap: var(--gap); padding: 0; list-style: none; }
.s-step { display: grid; row-gap: 1rem; align-content: start; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--s-radius); background: var(--white); }
.s-step-n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
}
.s-step h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.s-step .s-term { display: flex; flex-direction: column; align-self: stretch; }
.s-step .s-term-body { flex: 1; font-size: 0.75rem; padding: 0.75rem 0.875rem 0.875rem; line-height: 1.65; }
.s-step .s-term-bar { padding: 0.5rem 0.75rem; }
.s-between { margin-top: 1.5rem; font-size: 0.9375rem; }
/* Three equal cards: the badge, title, text and terminal rows line up across all three (subgrid). */
@media (min-width: 1024px) {
  .s-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-step { grid-row: span 4; grid-template-rows: subgrid; row-gap: 1rem; }
}

/* Loop diagram */
.s-loop { display: block; width: 100%; max-width: 46rem; height: auto; margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--ink); }
.s-loop text { font-family: var(--font); }

/* ---------- Video placeholder (dashed = placeholder, kit.css rule) ---------- */

.s-video { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; row-gap: 0.75rem; min-height: 15rem; padding: 1.5rem; text-align: center; }
@media (min-width: 768px) { .s-video { aspect-ratio: 16 / 9; min-height: 0; max-width: 56rem; } }
.s-center .s-video { margin-inline: auto; }
.s-play { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--yellow); }
.s-play svg { width: 1.5rem; height: 1.5rem; margin-left: 0.2rem; }

/* ---------- What's inside ---------- */

.s-inside { display: grid; gap: var(--gap); }
.s-tree { align-self: start; }
.s-tree .s-term-body { font-size: 0.8125rem; line-height: 1.7; }
.s-tree .s-term-body > span { min-height: 0; }
.s-cmds { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
.s-cmd { display: grid; row-gap: 0.5rem; align-content: start; padding: 1.125rem 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); }
.s-cmd code { justify-self: start; padding: 0.15em 0.5em; background: var(--yellow); border-color: var(--yellow); color: var(--ink); font-weight: 600; }
.s-cmd p { font-size: 0.9375rem; line-height: 1.5; }
.s-extras { display: grid; gap: 0.75rem; margin-top: 0.75rem; padding: 0; list-style: none; }
.s-extra { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.875rem; align-items: start; padding: 1rem 1.125rem; border-radius: 1rem; background: var(--soft-2); font-size: 0.9375rem; line-height: 1.5; }
.s-extra-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--ink); color: var(--yellow); }
.s-extra-icon svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 640px) { .s-cmds, .s-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .s-inside { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  /* The file list stays in view while the cards beside it scroll past. */
  .s-tree { position: sticky; top: 2rem; }
}

/* ---------- Who made it ---------- */

.s-founder { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
.s-center .s-founder { max-width: 62rem; margin-inline: auto; }
.s-photo { width: 100%; max-width: 22rem; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: var(--s-radius); background: var(--white); }
.s-story { display: grid; row-gap: 1.25rem; max-width: 38rem; align-content: start; }
.s-story p { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; }
.s-heat { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--s-radius); background: var(--white); }
.s-center .s-heat { max-width: 62rem; margin-inline: auto; }
.s-heat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1rem; row-gap: 0.25rem; margin-bottom: 1rem; }
.s-heat-head strong { font-size: 1.125rem; }
.s-heat-cap { font-size: 0.8125rem; }
.s-heat-scroll { overflow-x: auto; padding-bottom: 0.25rem; }
.s-heat svg { display: block; width: 100%; max-width: 46rem; height: auto; margin-inline: auto; }
.s-heat .h0 { fill: #eef0f3; }
.s-heat .h1 { fill: #c9cdd6; }
.s-heat .h2 { fill: #8b93a7; }
.s-heat .h3 { fill: #5f6980; }
.s-heat .h4 { fill: #282828; }
.s-heat text { fill: var(--slate); font-family: var(--font); font-size: 9px; }
.s-legend { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; }
.s-legend i { width: 0.75rem; height: 0.75rem; border-radius: 2px; }
@media (min-width: 900px) { .s-founder { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; } }

/* ---------- Who it's for ---------- */

.s-fit { display: grid; gap: var(--gap); }
.s-fit-card { display: grid; row-gap: 1rem; align-content: start; padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--s-radius); border: 1px solid var(--line); }
/* "For you if" is the card that must be read: yellow with ink text. */
.s-fit-card.yes { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.s-fit-card.yes svg { color: var(--ink); }
.s-fit-card.no { background: var(--soft-2); border-color: var(--soft-2); }
.s-fit-card h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.s-fit-card.yes li { font-size: 1.0625rem; }
@media (min-width: 900px) { .s-fit { grid-template-columns: 1.3fr 1fr; } }

/* ---------- Price card ---------- */

.s-price { display: grid; overflow: hidden; border-radius: calc(var(--s-radius) + 0.25rem); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(40, 40, 40, 0.25); }
.s-price-left { display: grid; row-gap: 1.25rem; align-content: start; padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--ink); color: var(--on-ink-muted); }
.s-price-left .s-price-big { color: var(--on-ink); font-size: clamp(3rem, 2.4rem + 2.6vw, 4.5rem); }
.s-price-left strong { color: var(--on-ink); }
.s-price-right { display: grid; row-gap: 1.25rem; align-content: start; padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--white); }
.s-incl { display: grid; row-gap: 0.75rem; padding: 0; list-style: none; }
.s-incl li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.625rem; }
.s-incl svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--ink); }
.s-price-right .btn { width: 100%; }
.s-small { font-size: 0.875rem; line-height: 1.5; }
.s-anchor { padding: 0.875rem 1rem; border-radius: 0.875rem; background: rgba(255, 255, 255, 0.06); font-size: 0.9375rem; line-height: 1.5; }
.s-anchor a { color: var(--on-ink); }
@media (min-width: 960px) { .s-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Setup offer: a yellow card, so it holds attention after the price card ---------- */

.s-setup { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(2rem, 5vw, 4rem); border-radius: calc(var(--s-radius) + 0.25rem); background: var(--yellow); color: var(--ink); }
.s-setup-head { display: grid; row-gap: 0.875rem; align-content: start; }
.s-setup-kicker { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.s-setup h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.s-setup-price { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: 0.5rem; margin-top: 0.25rem; }
.s-setup-amount { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.s-setup-cap { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.875rem; border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: 0.9375rem; font-weight: 700; }
.s-setup-body { display: grid; row-gap: 1.5rem; align-content: center; }
.s-setup-body p { color: var(--ink); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.55; max-width: 34rem; }
/* On yellow: an ink button with yellow text */
.s-btn-ink { background: var(--ink); border-color: var(--ink); color: var(--yellow); box-shadow: 0 12px 28px -12px rgba(40, 40, 40, 0.55); }
.s-btn-ink:hover { background: #3a3a3a; border-color: #3a3a3a; color: var(--yellow); transform: translateY(-2px); }
.s-setup :focus-visible { outline-color: var(--ink); }
@media (min-width: 960px) { .s-setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 4rem; } }

/* ---------- FAQ: one answer open at a time, opening and closing smoothly (script at the end) ---------- */

.s-faq { display: grid; max-width: 52rem; border-top: 1px solid var(--line); }
.s-center .s-faq { margin-inline: auto; }
.s-faq details { border-bottom: 1px solid var(--line); }
.s-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 1.125rem;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--soft-2);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color 0.25s, transform 0.3s;
}
.s-faq details[open] summary::after { content: "\2212"; background: var(--yellow); transform: rotate(180deg); }
.s-faq .faq-a { overflow: hidden; padding-bottom: 1.25rem; }

/* ---------- Final band ---------- */

.s-final { padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--ink); color: var(--on-ink-muted); }
.s-final .container { display: grid; row-gap: 1.5rem; justify-items: center; text-align: center; }
.s-final-title { color: var(--on-ink); font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 16ch; text-wrap: balance; }
.s-final .s-trust { justify-content: center; }
.s-final strong { color: var(--on-ink); }
.s-final .s-trust svg { color: var(--yellow); }

/* ---------- Sticky buy bar: full width, large type ----------
   Appears once the hero button has scrolled away; hides while the price card or the closing band is on screen;
   a close button hides it for the rest of the visit. No flashing, no sound, no pop-up. */

.s-bar {
  position: fixed;
  z-index: 15;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 3px solid var(--yellow);
  background: var(--ink);
  color: var(--on-ink-muted);
  box-shadow: 0 -12px 36px rgba(40, 40, 40, 0.28);
  transform: translateY(110%);
  transition: transform 0.3s ease;
  visibility: hidden;
}
.s-bar.is-shown { transform: none; visibility: visible; }
.s-bar-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 2.5rem);
  max-width: calc(var(--container) + 2 * var(--gutter));
  min-height: var(--bar-h);
  margin-inline: auto;
  padding: 0.75rem 3.25rem;
}
@media (max-width: 599px) { .s-bar-in { justify-content: space-between; padding-left: 1rem; } }
/* Price, offer, timer and button sit together in the middle; the close button stays at the far right. */
.s-bar-info { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; column-gap: 1.5rem; row-gap: 0.1rem; line-height: 1.2; }
.s-bar-price { color: var(--on-ink); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.s-bar-label { margin-left: 0.4rem; color: var(--on-ink-muted); font-size: clamp(0.9375rem, 0.8rem + 0.55vw, 1.375rem); font-weight: 500; letter-spacing: 0; }
.s-bar-time { font-size: clamp(0.9375rem, 0.8rem + 0.65vw, 1.5rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-bar-time b { color: var(--yellow); font-weight: 700; }
.s-bar .btn { flex: none; width: auto; min-height: 3.5rem; padding: 0.75rem clamp(1.25rem, 2.5vw, 2.5rem); font-size: clamp(1.0625rem, 0.9rem + 0.55vw, 1.375rem); font-weight: 700; }
.s-bar-x {
  position: absolute;
  top: 50%;
  right: max(0.5rem, env(safe-area-inset-right));
  transform: translateY(-50%);
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--on-ink-muted);
  font: inherit;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.s-bar-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-ink); }
.s-bar :focus-visible { outline-color: var(--yellow); }
@media (min-width: 768px) { :root { --bar-h: 6rem; } }
/* Room at the bottom so the bar never covers the footer links. */
.site-footer .container { padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + var(--bar-h)); }

@media (prefers-reduced-motion: reduce) {
  .s-bar { transition: none; }
  .s-faq summary::after { transition: none; }
}