/* ==========================================================================
   Rebrand Design System v1
   Single source of truth for tokens (colour, type, spacing, radius, shadow)
   and reusable component/utility classes. Imported by index.html today;
   every future page (p.html, faq.html, etc.) should import this file
   instead of redefining any of the values below.

   Naming: everything here is prefixed `ds-` (design system) or lives under
   `:root` as a `--` custom property, so it can never collide with the
   legacy page-specific classes already in index.html's own <style> block.
   Those legacy styles are unaffected by this file — nothing in here
   redefines a bare element selector (button, input, etc.) or an existing
   class name.
   ========================================================================== */

:root{
  /* ── Colour ── */
  --color-black:#14120f;
  --color-ivory:#F5F3EE;
  --color-white:#ffffff;
  --color-gold:#C9A14A;
  --color-gold-soft:rgba(201,161,74,.08);
  --color-muted:rgba(20,18,15,.55);
  --color-border:rgba(20,18,15,.1);

  /* Dark-surface variants — the palette above was built for light (Hero)
     surfaces; these fill the real gap for black/dark sections rather than
     reusing --color-muted/--color-border, which would render near-invisible
     (dark-on-dark) on a black background. */
  --color-ink:#0B0B0B;
  --color-on-dark-muted:rgba(245,243,238,.6);
  --color-on-dark-border:rgba(245,243,238,.1);
  --color-on-dark-surface:rgba(245,243,238,.04);

  /* ── Typography ── */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-serif:Georgia,serif;

  --text-hero-xl-size:clamp(50px,9vw,108px);
  --text-hero-xl-weight:700;
  --text-hero-xl-line-height:1.04;
  --text-hero-xl-letter-spacing:-0.02em;

  --text-hero-lg-size:clamp(32px,5.5vw,64px);
  --text-hero-lg-weight:700;
  --text-hero-lg-line-height:1.08;
  --text-hero-lg-letter-spacing:-0.015em;

  --text-h1-size:32px;
  --text-h1-weight:700;
  --text-h1-line-height:1.2;
  --text-h1-letter-spacing:-0.01em;

  --text-h2-size:22px;
  --text-h2-weight:700;
  --text-h2-line-height:1.3;
  --text-h2-letter-spacing:-0.005em;

  --text-lead-size:20px;
  --text-lead-weight:400;
  --text-lead-line-height:1.6;
  --text-lead-letter-spacing:normal;

  --text-body-size:16px;
  --text-body-weight:400;
  --text-body-line-height:1.6;
  --text-body-letter-spacing:normal;

  --text-small-size:14px;
  --text-small-weight:500;
  --text-small-line-height:1.5;
  --text-small-letter-spacing:normal;

  --text-caption-size:12px;
  --text-caption-weight:600;
  --text-caption-line-height:1.4;
  --text-caption-letter-spacing:.08em;

  /* ── Spacing scale ── */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* ── Radius ── */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  /* ── Shadow ── */
  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(20,18,15,.06);
  --shadow-2:0 8px 24px rgba(20,18,15,.10);
  --shadow-3:0 24px 64px rgba(20,18,15,.14);
}

/* ── Typography classes — the consumable layer over the tokens above ── */
.ds-text-hero-xl{font-family:var(--font-sans);font-size:var(--text-hero-xl-size);font-weight:var(--text-hero-xl-weight);line-height:var(--text-hero-xl-line-height);letter-spacing:var(--text-hero-xl-letter-spacing);margin:0}
.ds-text-lead{font-family:var(--font-sans);font-size:var(--text-lead-size);font-weight:var(--text-lead-weight);line-height:var(--text-lead-line-height);letter-spacing:var(--text-lead-letter-spacing);margin:0}
.ds-text-hero-lg{font-family:var(--font-sans);font-size:var(--text-hero-lg-size);font-weight:var(--text-hero-lg-weight);line-height:var(--text-hero-lg-line-height);letter-spacing:var(--text-hero-lg-letter-spacing);margin:0}
.ds-text-h1{font-family:var(--font-sans);font-size:var(--text-h1-size);font-weight:var(--text-h1-weight);line-height:var(--text-h1-line-height);letter-spacing:var(--text-h1-letter-spacing);margin:0}
.ds-text-h2{font-family:var(--font-sans);font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);line-height:var(--text-h2-line-height);letter-spacing:var(--text-h2-letter-spacing);margin:0}
.ds-text-body{font-family:var(--font-sans);font-size:var(--text-body-size);font-weight:var(--text-body-weight);line-height:var(--text-body-line-height);letter-spacing:var(--text-body-letter-spacing);margin:0}
.ds-text-small{font-family:var(--font-sans);font-size:var(--text-small-size);font-weight:var(--text-small-weight);line-height:var(--text-small-line-height);letter-spacing:var(--text-small-letter-spacing);margin:0}
.ds-text-caption{font-family:var(--font-sans);font-size:var(--text-caption-size);font-weight:var(--text-caption-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing);text-transform:uppercase;margin:0}

/* ── Utilities ── */
.ds-flex{display:flex}
.ds-flex-col{display:flex;flex-direction:column}
.ds-flex-center{display:flex;align-items:center;justify-content:center}
.ds-grid{display:grid}
.ds-text-center{text-align:center}
.ds-text-muted{color:var(--color-muted)}
.ds-text-gold{color:var(--color-gold)}
.ds-text-muted-on-dark{color:var(--color-on-dark-muted)}
.ds-max-w-sm{max-width:480px;margin-left:auto;margin-right:auto}
.ds-max-w-md{max-width:640px;margin-left:auto;margin-right:auto}
.ds-max-w-lg{max-width:960px;margin-left:auto;margin-right:auto}

/* ── Components ── */

/* Section — consistent vertical rhythm wrapper for any full-width block.
   Mobile-first 96px top/bottom, stepping up to 128px from 600px up — the
   two values the design system's own spacing scale offers closest to
   "generous section padding" at each size. */
.ds-section{padding:var(--space-9) var(--space-4)}
@media (min-width:600px){.ds-section{padding-top:var(--space-10);padding-bottom:var(--space-10)}}

/* Section, dark/light variants — same rhythm as .ds-section, inverted or
   restored surface. Sections alternate between these to create the
   tension/relief rhythm across the landing page (Hero light → Problem
   dark → Solution light → ...). */
.ds-section-dark{background:var(--color-ink);color:var(--color-white)}
.ds-section-light{background:var(--color-ivory);color:var(--color-black)}

/* Container — centers and caps content width inside a section. */
.ds-container{width:100%;max-width:640px;margin:0 auto;padding:0 var(--space-4)}

/* Card — elevated surface for grouped content. */
.ds-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-1)}
.ds-card-dark{background:var(--color-on-dark-surface);border:1px solid var(--color-on-dark-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-1)}

/* Checklist — concrete, scannable "you get X" list. Gold check per item,
   tight vertical rhythm; the item colour is inherited from its context
   (light or dark section) so it needs no dark/light variant of its own. */
.ds-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);text-align:left}
.ds-checklist-item{display:flex;align-items:center;gap:var(--space-2)}
.ds-checklist-item svg{flex-shrink:0;color:var(--color-gold)}

/* Button — class-based, so it never collides with the legacy bare
   `button{}` rule already in index.html (higher selector specificity wins
   regardless of source order). .ds-btn-lg is the oversized variant the
   Hero CTA uses; smaller product surfaces can use the .ds-btn base. */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:52px;padding:0 var(--space-5);border:none;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s cubic-bezier(.4,0,.2,1),background .15s ease,box-shadow .15s ease}
.ds-btn-primary{background:var(--color-black);color:var(--color-ivory);box-shadow:var(--shadow-1)}
.ds-btn-primary:hover{background:#000;box-shadow:var(--shadow-2)}
.ds-btn-primary:active{transform:scale(.98)}
.ds-btn-primary:disabled{opacity:.5;cursor:default}
.ds-btn-lg{height:72px;padding:0 var(--space-6);border-radius:var(--radius-lg);font-size:16px;width:100%}

/* Button, gold variant — for the one or two highest-priority conversion
   CTAs on the page (e.g. pricing). Not for general use — .ds-btn-primary
   stays the default so gold doesn't get diluted into an everyday colour. */
.ds-btn-gold{background:var(--color-gold);color:var(--color-black);box-shadow:var(--shadow-1)}
.ds-btn-gold:hover{background:#d6b56a;box-shadow:var(--shadow-2)}
.ds-btn-gold:active{transform:scale(.98)}

/* Input */
.ds-input{width:100%;height:64px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:0 var(--space-4);color:var(--color-black);font-family:var(--font-sans);font-size:var(--text-body-size);outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.ds-input::placeholder{color:var(--color-muted)}
.ds-input:focus{border-color:rgba(201,161,74,.5);box-shadow:0 0 0 4px var(--color-gold-soft)}

/* Pill — soft, informational chip. */
.ds-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--color-gold-soft);border:1px solid var(--color-border);font-family:var(--font-sans);font-size:var(--text-small-size);font-weight:600;color:var(--color-black)}
.ds-pill-dark{background:var(--color-gold-soft);border:1px solid var(--color-on-dark-border);color:var(--color-gold)}

/* Badge — high-contrast status/label, filled. */
.ds-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-black);color:var(--color-ivory);font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* Divider */
.ds-divider{height:1px;width:100%;border:none;background:var(--color-border);margin:var(--space-5) 0}