/* ==========================================================================
   RedGems landing — stylesheet
   Extracted from the owner-approved design mockup
   ("RedGems Landing.dc.html"). Design tokens live in :root; everything else
   is a semantic class. Self-hosted fonts (GDPR: zero third-party requests).
   Breakpoints match the mockup: 880px and 560px.
   ========================================================================== */

/* ── Self-hosted fonts (variable woff2, latin subset) ──────────────────────
   Google serves one variable file per family covering every weight, so a
   single @font-face with a weight range replaces the 3–4 static weights the
   mockup requested from fonts.googleapis.com. font-display:swap avoids FOIT. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/static/fonts/bricolage-grotesque.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/instrument-sans.woff2") format("woff2");
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* surfaces & ink */
  --bg: #FAF6F1;
  --surface: #FFFFFF;
  --ink: #1B1712;
  --ink-soft: #4A423A;
  --muted: #5C544B;
  --muted-2: #6B635B;
  --muted-3: #948B80;
  --muted-4: #8A8175;
  --muted-5: #94897C;

  /* borders */
  --border: #ECE4DA;
  --border-strong: #E0D7CC;
  --border-2: #DED5CA;
  --border-3: #E2D9CE;
  --border-card: #EEE5D9;

  /* brand red */
  --red: #FF3231;
  --red-grad-1: #FF5758;
  --red-grad-2: #FF3130;
  --red-gradient: linear-gradient(160deg, #FF5758, #FF3130);
  --red-dark: #D1201C;
  --red-dark-2: #D0342B;
  --red-dark-3: #D8241F;

  /* red tints */
  --red-soft: #FFE0DA;
  --red-soft-2: #FFE9E8;
  --red-soft-3: #FFF1F0;
  --red-soft-border: #FBD9D6;
  --autopilot-muted: #BE857E;

  /* accent */
  --green: #22A06B;
  --green-bg: #E9F6EF;

  /* type */
  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  /* layout */
  --wrap-max: 1180px;
  --wrap-pad: 24px;
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* The hidden attribute must always win. Author display rules (e.g.
   .price-view's display:inline-flex) otherwise defeat the UA stylesheet's
   [hidden]{display:none} — author-origin CSS beats UA-origin CSS regardless
   of specificity. Used by the pricing billing-period views and the contact
   banners. The FAQ panels relied on it too and deliberately no longer do —
   see "Inactive FAQ panels" further down. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

p { margin: 0; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
img { max-width: 100%; }

/* Clip decorative horizontal overflow (hero glow, badges). `clip` — not
   `hidden` — because overflow-x:hidden forces overflow-y to compute to `auto`,
   turning .page into a scroll container that breaks position:sticky descendants
   (the legal-page TOC rail). `clip` clips identically without that side effect. */
.page { overflow-x: clip; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   Honour the OS "reduce motion" setting site-wide (vestibular disorders,
   migraine, motion sickness). Everything animated here is decoration — the
   floaty hero/About frames and a handful of hover transitions — so nothing is
   lost by switching it off. Kept as one global sweep rather than per-rule
   overrides so a new animation is covered the day it is written.
   Durations are near-zero instead of `animation: none` so any animation with
   a meaningful end state still lands on it; the two floats have no end state
   to keep (their 0%/100% keyframe is the resting position), so those are cut
   outright — the hero frame is the LCP element and must not animate at all. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .hero-media,
  .about-frame--float { animation: none !important; }
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* Sticky footer. Short pages (contact, 404, a blog index with a single post)
   otherwise strand the footer high up with a bare stretch of cream bg below
   it. Stretching .page to the viewport and letting main absorb the slack
   pins the footer to the bottom; tall pages are unaffected since main's own
   content already exceeds the viewport height. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
main { flex: 1 0 auto; }

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

.pad-lg { padding-top: 88px; padding-bottom: 88px; }

/* eyebrow / section kicker */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-dark);
}

.sec-h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.06;
}

/* shared buttons ---------------------------------------------------------- */
.btn {
  display: inline-block;
  font-weight: 600;
  /* Reset native <button> chrome so the class renders identically on an <a>
     (hero CTAs) and a real <button> (contact form). Without this the submit
     button picked up the browser's default button border/color. */
  border: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
}
.btn-primary {
  color: #fff;
  background: var(--red-gradient);
  box-shadow: 0 8px 20px rgba(255, 50, 49, 0.26);
}
.btn-secondary {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-2);
}
.btn-lg { font-size: 16px; padding: 15px 30px; }
.btn-lg.btn-secondary { padding: 15px 24px; }

/* ── Header / nav ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav {
  padding-top: 13px;
  padding-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand { display: flex; align-items: center; gap: 9px; }
.nav-brand .mark { height: 32px; width: auto; display: block; }
.nav-brand .word { height: 19px; width: auto; display: block; margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
}
.nav-cta {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--red-gradient);
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(255, 50, 49, 0.26);
}
/* "Log in" link that appears only inside the mobile drawer (see the 880px
   query). Hidden on desktop, where .nav-login in .nav-actions is used. */
.nav-drawer-login { display: none; }

/* burger — progressive enhancement, only shown when JS is present (<880px) */
.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-burger span {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--ink);
  display: block;
}
.nav-burger span::before,
.nav-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.hero-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 50, 49, 0.08), transparent 65%);
  pointer-events: none;
}
.hero-inner {
  padding-top: 60px;
  padding-bottom: 78px;
  text-align: center;
  position: relative;
}
.hero-h1 {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.02;
  margin: 0 auto 20px;
  max-width: 1000px;
}
.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 692px;
  margin: 0 auto 34px;
}
.hero-media {
  position: relative;
  max-width: 860px;
  margin: 0 auto 36px;
  animation: floaty 6s ease-in-out infinite;
}
.hero-media-frame {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 36px 72px -26px rgba(27, 23, 18, 0.34);
}
/* The hero is a <video> with an <img> fallback nested inside it, so both need
   the same box. aspect-ratio belts-and-braces the width/height attributes:
   natural dimensions win once known, and a poster/video mismatch would
   otherwise reintroduce the layout shift this element exists to avoid. */
.hero-media-frame img,
.hero-media-frame video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
}
.hero-badge {
  position: absolute;
  left: -20px;
  bottom: -20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 14px 30px -12px rgba(27, 23, 18, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.hero-badge-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--green-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-badge-num { font-size: 13px; font-weight: 700; line-height: 1.1; }
.hero-badge-sub { font-size: 12px; color: var(--muted-3); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.hero-note { font-size: 14px; color: var(--muted-3); margin-top: 16px; }

/* ── Problem ─────────────────────────────────────────────────────────────── */
.section-bordered {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.prob-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.prob-media img { width: 100%; height: auto; display: block; }
.prob-list { display: flex; flex-direction: column; gap: 16px; }
.prob-item { display: flex; gap: 14px; align-items: center; }
.prob-x {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 99px;
  background: var(--red-soft-2);
  color: var(--red-dark-3);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.prob-item p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.prob-h2 { margin: 16px 0 24px; }
.prob-punch {
  font-size: 19px;
  font-weight: 600;
  color: var(--red-dark);
  margin-top: 26px;
  font-family: var(--font-head);
}

/* ── Relax / solution ────────────────────────────────────────────────────── */
.relax { background: #fff; }
.relax-inner { padding-top: 88px; padding-bottom: 0; text-align: center; }
.relax-h2 { margin: 16px 0 14px; }
.relax-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
}
.relax-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin: 18px auto 0;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.pricing-h2 { font-size: 44px; font-weight: 800; margin: 16px 0 14px; color: var(--ink); }
.pricing-sub { font-size: 18px; line-height: 1.55; color: var(--muted); }

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 860px;
  margin: 0 auto;
  align-items: stretch;
}
.price-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px -24px rgba(27, 23, 18, 0.3);
}
.price-card--featured {
  position: relative;
  border: 1.5px solid var(--red);
  box-shadow: 0 26px 60px -28px rgba(255, 50, 49, 0.45);
}
.price-ribbon {
  position: absolute;
  top: -13px;
  left: 32px;
  background: var(--red-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 13px;
  border-radius: 99px;
  text-transform: uppercase;
}
.price-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted-4);
  letter-spacing: 0.02em;
}
.price-name--featured { color: var(--red-dark-2); }
.price-amount { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 6px; }
.price-num { font-family: var(--font-head); font-weight: 800; font-size: 50px; color: var(--ink); }
.price-per { font-size: 16px; color: var(--muted-3); }
.price-blurb { font-size: 15px; color: var(--muted-2); margin-bottom: 22px; line-height: 1.5; }

.price-btn {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 13px;
  border-radius: 11px;
  margin-bottom: 26px;
}
.price-btn--free { color: var(--ink); background: #fff; border: 1px solid var(--border-2); }
.price-btn--featured {
  color: #fff;
  font-weight: 700;
  background: var(--red-gradient);
  box-shadow: 0 8px 20px rgba(255, 50, 49, 0.32);
}

.price-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.price-stats--free { background: var(--bg); }
.price-stats--featured { background: var(--red-soft-3); border: 1px solid var(--red-soft-border); }
.price-stat-label {
  font-size: 11px;
  color: var(--muted-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.price-stats--featured .price-stat-label { color: var(--autopilot-muted); }
.price-stat-val { font-size: 17px; font-weight: 700; font-family: var(--font-head); color: var(--ink); }

.price-features { display: flex; flex-direction: column; gap: 13px; }
.price-feature { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); }
.price-feature .check { flex: none; color: var(--ink); }
.price-card--featured .price-feature .check { color: var(--red); }

.price-foot {
  text-align: center;
  font-size: 13px;
  color: var(--muted-3);
  margin: 24px auto 0;
  max-width: 720px;
  line-height: 1.5;
}

/* ── Benefits ────────────────────────────────────────────────────────────── */
.benefits { background: #fff; }
.benefits-head { max-width: 620px; margin-bottom: 46px; }
.benefits-head .sec-h2 { margin: 16px 0 0; }
.ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ben-card {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 16px 38px -20px rgba(27, 23, 18, 0.2);
}
.ben-ic {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--red-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ben-ic img { width: 36px; height: 36px; display: block; }
.ben-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.ben-card p { font-size: 15px; line-height: 1.5; color: var(--muted-2); }

.ben-card--cta {
  background: var(--red-gradient);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  min-height: 190px;
  border: none;
  padding: 28px;
}
/* Was an <h3>; demoted to a div because it is a CTA, not a content heading.
   Styling is unchanged. */
.ben-card--cta .ben-cta-title { font-size: 21px; font-weight: 800; line-height: 1.12; color: #fff; }
.ben-card--cta a {
  align-self: flex-start;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--red);
  background: #fff;
  padding: 11px 20px;
  border-radius: 10px;
}

/* ── How it works ────────────────────────────────────────────────────────── */
.how-head { text-align: center; max-width: 600px; margin: 0 auto 50px; }
.how-head .sec-h2 { margin: 16px 0 10px; }
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  position: relative;
}
.step-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: var(--red);
  width: 34px;
  height: 34px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.step-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.step-card p { font-size: 15px; line-height: 1.5; color: var(--muted-2); }
.how-foot {
  text-align: center;
  font-size: 13px;
  color: var(--muted-3);
  margin: 22px auto 0;
  max-width: 680px;
  line-height: 1.5;
}

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.final-cta { background: #fff; overflow: hidden; }
.final-cta-inner { max-width: 760px; padding-top: 82px; padding-bottom: 0; text-align: center; }
.final-cta .sec-h2 { font-size: 47px; margin: 16px 0 20px; line-height: 1.04; }
.final-cta-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto 32px;
}
.final-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.final-cta-img {
  width: 100%;
  max-width: 405px;
  height: auto;
  display: block;
  margin: 32px auto 0;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-inner { max-width: 820px; padding-top: 88px; padding-bottom: 88px; }
.faq-head { text-align: center; margin-bottom: 34px; }
.faq-head .sec-h2 { margin: 16px 0 0; }

/* Tabs are JS-driven; without JS they'd be dead buttons, so they only show
   once site.js stamps .js on <html>. */
.faq-tabs {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 30px;
}
.js .faq-tabs { display: flex; }
.faq-tab {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-3);
  background: #fff;
  color: var(--muted);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.faq-tab[aria-selected="true"] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

/* 12px row gap matches the mockup's FAQ list. Without JS all four panels stack
   — fully readable — with visible category labels. With JS only the selected
   one is on screen, but all four stay rendered (see the next rule). */
.faq-panel { display: flex; flex-direction: column; gap: 12px; }

/* ── Inactive FAQ panels: hidden from the eye, not from the crawler ───────────
   site.js used to set the `hidden` attribute here, which left 30 of the 36
   Q&As display:none in the DOM a search engine renders — the page's largest
   block of indexable copy, and the text behind its FAQPage JSON-LD. Text
   hidden that way gets discounted, so an inactive panel is pulled out of the
   flow and clipped to nothing instead: still in the layout tree, still laid
   out at full width, still painted — just not on screen.
     · position:absolute is what keeps the section exactly as tall as the
       ACTIVE panel — panels never stack and a tab click shifts nothing but
       the panel's own height, i.e. no more CLS than the old [hidden] had;
     · left/right pinned to the container plus overflow:hidden mean it can
       never widen the page or raise a horizontal scrollbar;
     · clip-path guarantees not one pixel (the first card's top border, say)
       bleeds through the 1px sliver the box still occupies;
     · deliberately NOT opacity:0 — zero-opacity text is itself a hidden-text
       spam signal.
   The human half of what `hidden` used to do lives in site.js: inactive
   panels carry `inert` + aria-hidden="true", so they stay out of the tab
   order, out of the accessibility tree and deaf to the pointer. */
.js .faq-inner { position: relative; }
.js .faq-panel[aria-hidden="true"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

.faq-cat-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  margin: 22px 0 4px;
  color: var(--ink);
}
/* The only display:none left in the FAQ, and it costs nothing: with JS on the
   tab buttons already render all four category names, so this label is a pure
   duplicate. Clipping it instead would add nothing indexable and would make a
   screen reader read a heading that is not on screen. */
.js .faq-cat-label { display: none; }

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  list-style: none;
  cursor: pointer;
  padding: 19px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-sign { flex: none; font-size: 22px; color: var(--red); font-weight: 400; line-height: 1; }
.faq-item[open] .faq-sign::before { content: "\2013"; } /* – */
.faq-sign::before { content: "+"; }
.faq-a { padding: 0 22px 20px; font-size: 15px; line-height: 1.6; color: var(--muted-2); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg);
  color: var(--muted-2);
  border-top: 1px solid var(--border);
}
.footer-inner {
  padding-top: 44px;
  padding-bottom: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand .mark { height: 28px; width: auto; display: block; }
.footer-brand .word { height: 17px; width: auto; display: block; margin-top: 2px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 26px; font-size: 14px; font-weight: 500; }
.footer-links a { color: var(--muted); }
.footer-legal { font-size: 13px; color: var(--muted-5); }

/* ── Subpages: shared page hero ──────────────────────────────────────────────
   Every subpage (About, Blog, legal, Contact) opens with a white hero band
   that echoes the landing hero — same red glow, same centered eyebrow/title —
   then its content drops onto the cream page bg. This is what makes the
   subpages read as the same product instead of bolt-on documents. Subpages
   no longer wrap their body in .relax (that white-wrapper now stays only for
   index/404); the old .content-wrap block is gone, and .draft-banner with it
   (no template used it). */
.page-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.page-hero-inner {
  position: relative;
  text-align: center;
  padding-top: 64px;
  padding-bottom: 60px;
}
.page-hero h1 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.04;
  margin: 14px auto 0;
  max-width: 860px;
}
.page-hero-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 660px;
  margin: 18px auto 0;
}
.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.page-hero-pill {
  font-size: 13px;
  color: var(--muted-2);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
}

/* Content region below every subpage hero — sits on the cream body bg. */
.subpage {
  background: var(--bg);
  padding-top: 56px;
  padding-bottom: 80px;
}

/* ── Legal pages (terms, privacy) ────────────────────────────────────────────
   A sticky table-of-contents rail beside a white document card. privacy.html
   mirrors this exact structure — keep the markup/class contract stable. Below
   880px the rail is hidden and the document goes full width. */
.legal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 84px;                       /* clears the sticky site header (h≈58px) */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.legal-toc-label {
  font-size: 11px;
  font-weight: 600;                /* Instrument Sans caps at 600 (variable range) */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: 10px;
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legal-toc a {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted-2);
  padding: 6px 0;
}
.legal-toc a:hover { color: var(--red-dark); }

/* ── Shared document surface (legal body + blog post body) ────────────────────
   One card, one set of prose rules, used by both the legal pages and rendered
   blog-post markdown, so long-form copy looks identical everywhere. */
.doc-card {
  --doc-pad: 48px;                  /* padding, exposed as a var so the post
                                        page's cover can bleed to the card edges */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--doc-pad);
  box-shadow: 0 16px 38px -20px rgba(27, 23, 18, 0.16);
}
.doc-card > :first-child { margin-top: 0; }
.doc-card p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; }
.doc-card ul, .doc-card ol {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 16px;
  padding-left: 22px;
}
.doc-card li { margin-bottom: 8px; }
.doc-card li::marker { color: var(--red); }
.doc-card a { color: var(--red-dark); text-decoration: underline; }
.doc-card strong { color: var(--ink); font-weight: 600; }
.doc-card h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin: 38px 0 14px;
  scroll-margin-top: 84px;         /* anchored sections clear the sticky header */
}
.doc-card h3 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 24px 0 8px; color: var(--ink); }
/* The lead paragraph before section 1 reads a touch larger. */
.doc-intro { font-size: 18.5px; line-height: 1.6; }

/* Legal section heading: a small number chip sits in the gutter beside the
   title. :has() scopes the flex layout to chip-bearing headings only, so
   blog-post h2s (no chip) stay ordinary blocks. */
.doc-card h2:has(.doc-num) { display: flex; align-items: baseline; gap: 12px; }
.doc-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--red-soft-2);
  color: var(--red-dark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
}

/* Blog-post prose extras (markdown may emit any of these; kept future-proof). */
.doc-card blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--red);
  background: var(--red-soft-3);
  border-radius: 10px;
  color: var(--ink-soft);
}
.doc-card blockquote > :last-child { margin-bottom: 0; }
.doc-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 6px;
}
.doc-card pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 22px 0;
}
.doc-card pre code { background: none; padding: 0; font-size: 0.88em; }
.doc-card hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.doc-card img { border-radius: 12px; margin: 22px 0; }

/* ── Framed media card ────────────────────────────────────────────────────────
   Mirrors the landing's .hero-media-frame (white mat, deep shadow) — used for
   About page imagery so photos feel "presented", not pasted. */
.media-frame {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 13px;
  box-shadow: 0 36px 72px -26px rgba(27, 23, 18, 0.34);
}
.media-frame img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* ── Blog index ──────────────────────────────────────────────────────────────
   The newest post is a full-width horizontal feature; the rest fill a 2-col
   grid. Both cards lift on hover. Date is a cream pill (reads on the white
   card). */
.blog-card-date {
  display: inline-block;
  font-size: 13px;
  color: var(--muted-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
}

.blog-featured {
  display: grid;
  grid-template-columns: 44% 1fr;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 38px -20px rgba(27, 23, 18, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 28px;
}
.blog-featured:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -24px rgba(27, 23, 18, 0.26); }
.blog-featured-media { display: block; overflow: hidden; aspect-ratio: 16 / 11; }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-body {
  padding: 36px 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.blog-featured-body h2 { font-size: 27px; font-weight: 700; line-height: 1.15; margin: 16px 0 10px; }
.blog-featured-body h2 a { color: inherit; transition: color 0.2s ease; }
.blog-featured:hover .blog-featured-body h2 a { color: var(--red-dark); }
.blog-featured-body p { font-size: 16px; line-height: 1.55; color: var(--muted-2); margin-bottom: 18px; }
.blog-readmore { font-size: 15px; font-weight: 600; color: var(--red-dark); }

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 38px -20px rgba(27, 23, 18, 0.16);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -24px rgba(27, 23, 18, 0.26); }
.blog-card-media { display: block; overflow: hidden; }
.blog-card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.blog-card-body { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.blog-card-body h2 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 12px 0 8px; }
.blog-card-body h2 a { color: inherit; transition: color 0.2s ease; }
.blog-card:hover .blog-card-body h2 a { color: var(--red-dark); }
.blog-card-body p { font-size: 15px; line-height: 1.55; color: var(--muted-2); }
.blog-empty {
  background: #fff;
  border: 1px dashed var(--border-strong);
  border-radius: 20px;
  padding: 56px 28px;
  text-align: center;
  color: var(--muted-2);
  font-size: 17px;
}

/* ── Blog post ────────────────────────────────────────────────────────────────
   Hero variant: a left-aligned back link, then a centered date pill + title.
   Hero → card spacing mirrors the legal pages (.page-hero, then .subpage) —
   the cover no longer bridges the two, it lives inside the card itself. */
.post-back { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--red-dark); }
.post-hero-inner { position: relative; padding-top: 28px; padding-bottom: 60px; }
.post-hero-inner .post-back { margin-bottom: 26px; }
.post-hero-head { text-align: center; }
.post-hero-head h1 { font-size: 42px; font-weight: 800; line-height: 1.06; max-width: 820px; margin: 16px auto 0; }
.post-body { max-width: 800px; margin: 0 auto; }
/* The cover is the doc-card's own first child: pulled out by --doc-pad on the
   top/sides so it bleeds flush to the card edges, widened to match, then
   overflow:hidden on the card lets its own border-radius clip the top corners.
   Scoped under .post-body so the shared .doc-card (legal pages) is untouched. */
.post-body .doc-card { overflow: hidden; }
.post-body .doc-card > .post-cover {
  display: block;
  width: calc(100% + 2 * var(--doc-pad));
  max-width: none;
  height: auto;
  margin: calc(-1 * var(--doc-pad)) calc(-1 * var(--doc-pad)) 30px;
  border-radius: 0;
}
.post-foot {
  max-width: 800px;
  margin: 36px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* 404 */
.notfound { text-align: center; padding-top: 100px; padding-bottom: 120px; }
.notfound h1 { font-size: 90px; font-weight: 800; color: var(--red); }
.notfound p { font-size: 19px; color: var(--muted); margin: 12px 0 28px; }

/* ── Responsive: 880px ───────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 40px -20px rgba(27, 23, 18, 0.25);
    padding: 8px 0;
  }
  .nav-links a { padding: 13px 24px; font-size: 16px; }
  .site-header .nav { position: static; }
  .site-header { position: sticky; }
  .nav { position: relative; gap: 12px; }
  /* Declutter the mobile top bar: brand left, then Start free + burger on the
     right. "Log in" moves into the drawer (.nav-drawer-login) so the logo is
     never crowded/overlapped. */
  .nav-brand { margin-right: auto; }
  .nav-login { display: none; }
  .nav-cta { white-space: nowrap; padding: 9px 16px; font-size: 14px; }
  .nav-drawer-login {
    display: block;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }
  /* The burger is progressive enhancement, but its BOX is reserved from the
     first paint. Revealing it with display:none -> flex grew the header 61px
     -> 69px the moment site.js stamped .js on <html>, pushing the whole page
     down — measured as the dominant contributor to CLS (0.064). visibility
     keeps the 42px slot allocated while still hiding it from paint, from the
     tab order and from assistive tech, so the no-JS and JS headers are the
     same height and nothing moves. */
  .nav-burger { display: flex; visibility: hidden; }
  .js .nav-burger { visibility: visible; }
  .js .nav.open .nav-links { display: flex; }

  .hero-grid, .prob-grid, .relax-grid, .cta-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; }
  /* Stacked cards: show Autopilot first so the billing toggle (which sits above
     the grid) is directly over the plan it controls, not over Free. */
  .price-card--featured { order: -1; }
  .ben-grid, .step-grid { grid-template-columns: 1fr 1fr; }
  .hero-h1 { font-size: 40px; }
  .sec-h2 { font-size: 30px; }
  .pricing-h2 { font-size: 34px; }
  .final-cta .sec-h2 { font-size: 34px; }
  .pad-lg { padding-top: 60px; padding-bottom: 60px; }
  .hero-inner { padding-top: 40px; padding-bottom: 52px; }
  .relax-inner { padding-top: 60px; }
  .final-cta-inner { padding-top: 60px; }
  .faq-inner { padding-top: 60px; padding-bottom: 60px; }
  .prob-media { order: -1; }
}

/* ── Responsive: 560px ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --wrap-pad: 18px; }
  .ben-grid, .step-grid { grid-template-columns: 1fr; }
  .hero-h1 { font-size: 33px; }
  .sec-h2 { font-size: 26px; }
  .pricing-h2 { font-size: 30px; }
  .final-cta .sec-h2 { font-size: 28px; }
  .price-num { font-size: 44px; }
  .hero-badge { display: none; }
  /* All category tabs visible (wrapped + centered) instead of a horizontal
     scroll — every category should be reachable without swiping. */
  .faq-tabs { flex-wrap: wrap; overflow-x: visible; justify-content: center; }
  .faq-tab { padding: 8px 13px; font-size: 13px; }
  /* CTAs go full width so "Start free" stays easily tappable */
  .fullw-sm { width: 100%; text-align: center; }
}

/* ── About page ──────────────────────────────────────────────────────────────
   A mini landing page: framed imagery, mission/vision as landing-style benefit
   cards with icon chips, and the landing's own "Start for free" CTA + microcopy.
   .about-stack sets the generous vertical rhythm between blocks. */
.about-stack { display: flex; flex-direction: column; gap: 68px; }
.about-frame { max-width: 560px; margin: 0 auto; }
.about-frame--float { animation: floaty 6s ease-in-out infinite; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.about-card {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 16px 38px -20px rgba(27, 23, 18, 0.2);
}
.about-card-ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--red-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.about-card-ic img { width: 34px; height: 34px; display: block; }
.about-card h2 { font-size: 23px; font-weight: 700; margin-bottom: 10px; }
.about-card p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.about-cta { text-align: center; }

/* ── Contact page ────────────────────────────────────────────────────────── */
.contact-wrap { max-width: 620px; }

/* White card recipe matching the subpage benefit cards (About's .about-card):
   the form used to sit inside .relax's own white band, but now the page
   follows the shared .page-hero + .subpage pattern, so it needs its own
   surface against the cream .subpage canvas. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 38px -20px rgba(27, 23, 18, 0.2);
}
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row label { font-size: 14px; font-weight: 600; color: var(--ink); }
.form-row .req { color: var(--red); }
.form-row input,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-3);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft-3);
}
.contact-form .btn { align-self: flex-start; margin-top: 4px; }

/* Honeypot: visually hidden but kept in the DOM for bots to trip on. Not
   display:none (some bots skip that) — pushed off-screen instead. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact success / error banners — revealed by site.js from the ?sent/?error
   query the contact backend redirects to. Neither banner links out to email
   anymore (the form is the only contact channel), so there's no .form-banner
   a rule to keep in sync. */
.form-banner {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 24px;
}
.form-banner--success { background: #e7f6ee; border: 1px solid #b7e3c9; color: #1b7a47; }
.form-banner--error {
  background: var(--red-soft-3);
  border: 1px solid var(--red-soft-border);
  color: var(--red-dark-2);
}

/* ── Subpages + Contact responsive ────────────────────────────────────────────
   Placed after every subpage base rule above so these overrides win by order
   (media queries add no specificity). Only the mockup's 880px / 560px stops. */
@media (max-width: 880px) {
  .page-hero h1 { font-size: 34px; }
  .page-hero-inner { padding-top: 48px; padding-bottom: 44px; }
  .subpage { padding-top: 44px; padding-bottom: 56px; }

  /* Legal: drop the TOC rail, document goes full width. */
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .legal-toc { display: none; }
  .doc-card { --doc-pad: 28px; }

  /* About: mission/vision stack; tighter rhythm. */
  .about-stack { gap: 48px; }
  .about-grid { grid-template-columns: 1fr; }

  /* Blog: feature stacks image-on-top; grid collapses. */
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-media { aspect-ratio: 16 / 9; }
  .blog-featured-body { padding: 28px; }
  .blog-grid { grid-template-columns: 1fr; }

  /* Blog post: smaller title; hero bottom padding tapers with .page-hero-inner
     now that nothing needs to bridge into it. */
  .post-hero-head h1 { font-size: 32px; }
  .post-hero-inner { padding-bottom: 44px; }
}
@media (max-width: 560px) {
  .page-hero h1 { font-size: 30px; }
  .page-hero-lead { font-size: 17px; }
  .doc-card { --doc-pad: 22px; border-radius: 16px; }
  .about-stack { gap: 40px; }
  .blog-featured-body { padding: 24px; }
  .blog-featured-body h2 { font-size: 23px; }
  .post-hero-head h1 { font-size: 27px; }
  .media-frame { padding: 10px; }

  .contact-form { padding: 20px; }
  .contact-form .btn { align-self: stretch; text-align: center; }
}

/* ── Pricing: billing-period toggle (JS-enhanced) ─────────────────────────── */
.billing-toggle {
  display: none;                 /* revealed only when JS is present */
  width: fit-content;
  margin: -18px auto 42px;
  padding: 5px;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  box-shadow: 0 12px 28px -20px rgba(27, 23, 18, 0.3);
}
.js .billing-toggle { display: flex; }
.billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 22px;
  border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.billing-opt[aria-pressed="true"] {
  background: var(--red-gradient);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 50, 49, 0.24);
}
.billing-save {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--green-bg);
  color: var(--green);
}
.billing-opt[aria-pressed="true"] .billing-save {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Autopilot price: one period view visible at a time (JS toggles them); the
   static yearly note is the no-JS fallback so the annual price is never lost. */
.price-view { display: inline-flex; align-items: baseline; gap: 7px; }
.price-annual-note {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--red-dark-2);
}
.price-annual-static { margin: 2px 0 0; font-size: 13px; color: var(--muted-2); }
.price-annual-static strong { color: var(--ink); font-weight: 700; }
.js .price-annual-static { display: none; }