/* ============================================================================
   Pace — Detox Box brand stylesheet
   ----------------------------------------------------------------------------
   Shared by every page in public/ (index.html, thanks.html, confirmed.html).
   Linked with: <link rel="stylesheet" href="brand.css" /> (relative href — works
   under the file:// test harness and on Cloudflare Pages; no build step).

   TOKENS are vendored from the "Pace Detox Box Design System" on claude.ai
   (project 2aa33d6d-f8b1-4346-a5aa-6497a3aef5b7, tokens/colors.css is canonical).
   Keep names/values in sync with that project by hand.

   EMAILS ARE NOT COVERED HERE. The Brevo templates in brevo-emails/ use inline
   attribute styles because email clients strip external/<style> CSS. When the
   brand palette changes, mirror these hex values into those templates by hand:
     cream #f7f2ea · ink #20304f · navy #2a3c5c · slate/muted #5f6770
     sage-deep #4d6a56 · sage-deep-ink #3f5848 · copper/gold #b0843a
     card #ffffff · hairline/line #e6e0d5
   ============================================================================ */

/* ===== 1. TOKENS ========================================================== */
:root {
  /* ---- Canonical design-system palette ---- */
  --cream:        #f7f2ea; /* primary surface, warm off-white — never pure white */
  --cream-deep:   #efe8da; /* recessed surface */
  --ink:          #20304f; /* primary body text — reads near-black but is blue */
  --navy:         #2a3c5c; /* logo + strongest headings */
  --sage-deep:    #4d6a56; /* primary action / buttons, eyebrows, accents */
  --sage-deep-ink:#3f5848; /* sage pressed / hover-dark */
  --sage:         #809080; /* minty sage — soft fills, dividers */
  --sage-tint:    #e7ece6; /* faint sage wash for selected / active fills */
  --copper:       #b0843a; /* fine accents only — rules, marks, detail lines */
  --copper-deep:  #946d2c; /* copper text on light, when contrast is needed */
  --slate:        #5f6770; /* secondary text */
  --card:         #ffffff; /* cards / panels on the cream background */
  --hairline:     #e6e0d5; /* 1px borders, dividers */
  --hairline-warm:#ded6c7; /* slightly stronger hairline on white */

  /* ---- Design-system state colors (muted, brand-tuned — never bright) ---- */
  --locked:        #9a4f43;
  --locked-bg:     #f3e3df;
  --unlocked:      #4d6a56;
  --unlocked-bg:   #e7ece6;
  --warning:       #b0843a;
  --warning-bg:    #f5ecdb;
  --danger:        #a13d33;

  /* ---- Design-system semantic aliases ---- */
  --bg:            var(--cream);
  --bg-recessed:   var(--cream-deep);
  --surface-card:  var(--card);
  --text-body:     var(--ink);
  --text-heading:  var(--navy);
  --text-muted:    var(--slate);
  --text-accent:   var(--sage-deep);
  --border:        var(--hairline);
  --border-strong: var(--hairline-warm);
  --accent:        var(--sage-deep);
  --accent-fine:   var(--copper);

  /* ---- Radii / shadows / motion / fonts ---- */
  --radius-card:  14px;
  --radius-btn:   10px;
  --shadow-card:  0 30px 60px -40px rgba(0,0,0,.4);
  --shadow-focus: 0 0 0 3px rgba(77,106,86,.28);
  --ease-out:     cubic-bezier(.22,.61,.36,1);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Back-compat aliases ----
     The page rules below were authored against these legacy names; aliasing them
     to the canonical tokens keeps every rule body untouched (identical hex) while
     the file stays faithful to the design system. */
  --muted: var(--slate);
  --gold:  var(--copper);
  --line:  var(--hairline);
  --ease:  var(--ease-out);

  /* ---- Web-only layout tokens (not in the design system) ---- */
  --maxw: 1040px;
  --logo-top: 18px; /* hero top padding (tight, title-bar feel) */
}

/* ===== 2. BASE / RESET (shared) ========================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* Inline text link — sage text with a light-green dotted underline. */
.link {
  color: var(--sage-deep);
  text-decoration: underline dotted;
  text-decoration-color: var(--sage); /* lighter mint green */
  text-underline-offset: 2px;
  transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
.link:hover { color: var(--sage-deep-ink); text-decoration-color: var(--sage-deep); }

/* ===== 3. SHARED COMPONENTS ============================================== */
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 14px; font-weight: 1000; color: var(--sage-deep); }
.brand { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--sage-deep); }

/* Primary button — colour + hover treatment is shared; geometry differs per page. */
.btn {
  padding: 15px 24px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit;
  border: 0; border-radius: var(--radius-btn); background: var(--sage-deep); color: #fff;
  transition: background .15s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--sage-deep-ink); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Thin copper rules (decorative). NOTE: .rule is currently unused — neither card
   page renders an <hr class="rule"> today — kept for when it's reinstated. */
.hero-rule { width: 56px; height: 1px; background: var(--gold); opacity: .8; border: 0; margin: 24px 0 0; }
.footer-rule { width: 40px; height: 1px; background: var(--gold); opacity: .8; border: 0; margin: 0 auto 18px; }
.rule { width: 40px; height: 1px; background: var(--gold); opacity: .8; margin: 0 auto 24px; border: 0; }

/* ===== 4. HOME PAGE (.page-home) ========================================= */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.page-home header.hero { padding: var(--logo-top) 0 64px; }
.page-home .logo { height: 60px; width: auto; display: block; margin-left: -6px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 48px; align-items: center; margin-top: 44px; }

.page-home h1 {
  font-family: var(--font-display);
  font-size: clamp(46px, 6.8vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--navy);
}
.page-home h1 .line { display: block; } /* stacks the two heading lines (one <h1>, preserves the line break) */
.page-home h1 .accent { color: var(--sage-deep); font-weight: 600; font-style: italic; }

/* Rotating headline word — sans, heavy, non-italic (contrast to the serif accent) */
.rotate-word {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.03em;
  opacity: 1;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
  will-change: opacity, transform;
}

.lede { font-size: 20px; color: var(--muted); margin-top: 22px; max-width: 32ch; }

.hero-visual {
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
/* Square crop on desktop (previously an inline style on the <img>). The 820px
   rule below re-crops it for mobile — no !important needed now it's in CSS. */
.hero-img { display: block; width: 450px; height: 450px; object-fit: cover; }

/* Email capture (the single CTA) */
.capture { margin-top: 32px; }
.capture form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.capture input[type="email"] {
  flex: 1 1 230px; padding: 15px 16px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--card); color: var(--ink);
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.capture input[type="email"]::placeholder { color: #9aa0a6; }
.capture input[type="email"]:focus { outline: none; border-color: var(--sage-deep); box-shadow: var(--shadow-focus); }
.reassure { font-size: 13px; color: var(--muted); margin-top: 14px; max-width: 460px; }
.hp { position: absolute; left: -9999px; } /* honeypot */

/* Sections */
section { padding: 64px 0; border-top: 1px solid var(--line); }
.page-home h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-top: 12px;
  max-width: 90%;
}
.section-lede { font-size: 16px; color: var(--muted); margin-top: 16px; max-width: 60ch; }
.section-lede + .section-lede { margin-top: 18px; } /* extra gap between stacked paragraphs */

/* Modes */
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.mode {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px;
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.mode:hover { transform: translateY(-3px); border-color: var(--sage); }
.mode h3 { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.mode p { font-size: 14.5px; color: var(--muted); }

/* Personas */
.lives { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.life {
  padding: 20px 22px; border-left: 3px solid var(--sage-deep); background: var(--card);
  border-radius: 0 var(--radius-card) var(--radius-card) 0; box-shadow: var(--shadow-card);
}
.life p { color: var(--muted); }
.life strong { color: var(--ink); font-weight: 600; }

/* Final CTA — everything centered (heading, copy block, form). */
.final { text-align: center; }
.final h2 { margin: 12px auto 0; }
.final .section-lede { margin-left: auto; margin-right: auto; } /* center the max-width copy block */
.final form { justify-content: center; margin-left: auto; margin-right: auto; }
.final .reassure { margin-left: auto; margin-right: auto; text-align: center; }

footer { padding: 44px 0 64px; color: var(--muted); font-size: 14px; text-align: center; border-top: 1px solid var(--line); }
footer .brand { color: var(--sage-deep); }
footer .copyright { margin-top: 10px; color: var(--muted); font-size: 14px; } /* copyright / tagline line */

@media (prefers-reduced-motion: reduce) {
  .rotate-word { transition: none; }
}

@media (max-width: 820px) {
  .page-home .logo { height: 54px; margin: 0 auto 8px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { order: -1; max-width: none; }
  .hero-img { width: 100%; height: 380px; object-fit: cover; object-position: left center; }
  .modes { grid-template-columns: repeat(2, 1fr); }
  .lives { grid-template-columns: 1fr; }
}

/* ===== 5. CARD PAGES (.page-card — thanks.html, confirmed.html) ========== */
/* flex-center the single card; font/color/bg inherited from the shared base. */
body.page-card {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.page-card .card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); max-width: 460px; width: 100%;
  padding: 44px 40px; text-align: center; box-shadow: var(--shadow-card);
}
.page-card .logo { height: 52px; width: auto; margin: 0 auto 22px; display: block; }
.page-card h1 { font-family: var(--font-display); font-weight: 600; font-size: 32px; color: var(--navy); margin-bottom: 14px; letter-spacing: -.01em; line-height: 1.1; }
.page-card p { font-size: 16px; color: var(--muted); margin-bottom: 12px; }
.page-card .small { font-size: 13px; }

/* confirmed.html back-link button (geometry differs from the home .btn). */
.page-card a.btn {
  display: inline-block; margin-top: 16px; background: var(--sage-deep); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 16px; padding: 14px 26px; border-radius: var(--radius-btn);
  transition: background .15s var(--ease);
}
.page-card a.btn:hover { background: var(--sage-deep-ink); }