/* ============================================================
   RAWSTONE — Site Design System (site.css)
   Reusable across every preview page (index / product / why /
   learn / faq / register). Extracted from the winning holding-page
   direction: "Matte Mineral" — matte-black canvas, oversized Anton
   wordmark, forest-green as the PRIMARY accent, terracotta used
   sparingly for labels/pulse only.

   HOW TO USE
   - Load the fonts <link> (see _components.html) + this stylesheet.
   - Copy the canonical header + footer from _components.html verbatim.
   - Wrap page content in .wrap for the max-width gutter.
   - Buttons: .btn + .btn-primary (green) / .btn-ghost (outline).
   - Sections: .section (vertical rhythm) + .band (top hairline).
   - Cards: .card ; stat/proof band: .stat-strip ; ledger: .ledger.
   - Preview badge: .preview-badge (fixed "PREVIEW — not live" chip).
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* locked palette */
  --black:#141210;      /* matte black — primary canvas / hero */
  --espresso:#2A241D;   /* dark surface, body on cream */
  --cream:#F3EDE0;      /* light bg, cards, body text on black */
  --offwhite:#EFE7D8;   /* warm off-white tint */
  --green:#2F3E1F;      /* PRIMARY accent — CTAs, selected states */
  --green-lift:#3c5029; /* green hover lift */
  --green-soft:#7f9b5c; /* legible green for small text on black */
  --terra:#B85C3E;      /* SECONDARY accent — labels/pulse, sparingly */
  --stone:#8A8078;      /* muted stone-grey */

  /* derived surfaces / lines */
  --hairline:rgba(243,237,224,.14);
  --hairline-soft:rgba(243,237,224,.08);
  --fill-1:rgba(243,237,224,.03);
  --fill-2:rgba(243,237,224,.06);

  /* type families */
  --font-display:'Anton',sans-serif;                 /* wordmark / huge display */
  --font-head:'Archivo','Archivo Expanded',sans-serif;/* headings, UI labels */
  --font-body:'Inter',system-ui,sans-serif;          /* body copy */
  --font-serif:'Inter',system-ui,sans-serif;         /* lead/accent lines (Fraunces dropped 27-Sep, Tom) */

  /* type scale (fluid) */
  --fs-hero:clamp(66px,15vw,190px);
  --fs-h1:clamp(40px,5.8vw,72px);
  --fs-h2:clamp(28px,4.6vw,46px);
  --fs-h3:clamp(20px,2.6vw,26px);
  --fs-lead:clamp(17px,2.4vw,23px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-caption:12px;
  --fs-label:11px;

  /* spacing / layout */
  --maxw:1120px;
  --gutter:clamp(22px,5vw,64px);
  --section-y:clamp(60px,10vh,110px);
  --radius:14px;
  --radius-lg:18px;
  --ease:cubic-bezier(.16,.68,.32,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--terra);color:var(--black)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* subtle mineral vignette — add class .canvas-glow to <body> if wanted */
.canvas-glow::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(184,92,62,.06), transparent 55%),
    radial-gradient(90% 70% at 85% 110%, rgba(47,62,31,.12), transparent 60%);
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{position:relative;z-index:1;padding:var(--section-y) 0}
.band{border-top:1px solid var(--hairline-soft)}
.center{text-align:center}
.stack > * + *{margin-top:1rem}

/* ---------- type helpers ---------- */
.display{font-family:var(--font-display);text-transform:uppercase;line-height:.86;letter-spacing:.01em;font-size:var(--fs-hero);color:var(--cream)}
.h1{font-family:var(--font-head);font-weight:800;font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.01em}
.h2{font-family:var(--font-head);font-weight:800;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.01em;max-width:18ch}
.h3{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.005em}
.lead{font-family:var(--font-serif);font-style:normal;font-size:var(--fs-lead);line-height:1.5;color:var(--offwhite);max-width:34ch}
.muted{color:var(--stone)}
.serif{font-family:var(--font-serif)}
.sub{margin-top:18px;color:var(--stone);max-width:48ch;font-size:var(--fs-body)}

/* small uppercase label (terracotta — the sparing accent) */
.sec-label{font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--terra);font-weight:600}
.eyebrow{font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--stone);font-weight:600}

/* the styled wordmark (CSS text — no image logo required) */
.wordmark{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.02em;line-height:.86;color:var(--cream);
}
.wordmark--gradient{
  background:linear-gradient(180deg,#F6F1E6 0%,#DBD2C1 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-body);letter-spacing:.04em;
  border:1px solid transparent;border-radius:12px;padding:16px 26px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease);
}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress}

.btn-primary{background:var(--green);color:var(--cream)}       /* primary green CTA */
.btn-primary:hover{background:var(--green-lift)}

.btn-ghost{background:transparent;color:var(--cream);border-color:var(--hairline)}
.btn-ghost:hover{background:var(--fill-2);border-color:rgba(243,237,224,.32)}

.btn-block{width:100%}
.btn-lg{padding:19px 30px;font-size:var(--fs-body)}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg,#191712,#141210);
  border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,40px);
}
.card--flat{background:var(--fill-1);border:1px solid var(--hairline)}
.card-hover{transition:transform .3s var(--ease),border-color .3s var(--ease)}
.card-hover:hover{transform:translateY(-3px);border-color:rgba(243,237,224,.3)}

/* selected / active state uses forest green (primary accent) */
.is-selected{border-color:var(--green-lift)!important;background:rgba(47,62,31,.22)!important;box-shadow:0 0 0 1px var(--green-lift) inset}

/* ---------- proof / stat strip ---------- */
.stat-strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--hairline-soft);border-radius:var(--radius);overflow:hidden;
}
.stat-strip .cell{padding:22px 12px;text-align:center;border-right:1px solid var(--hairline-soft);background:var(--fill-1)}
.stat-strip .cell:last-child{border-right:0}
.stat-strip .num{font-family:var(--font-head);font-weight:800;font-size:clamp(26px,4.4vw,34px);line-height:1;color:var(--cream);letter-spacing:-.01em}
.stat-strip .num .u{font-size:.42em;font-weight:700;color:var(--stone);margin-left:2px}
.stat-strip .k{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-top:9px}
.stat-strip .form{font-size:var(--fs-caption);color:var(--green-soft);margin-top:3px;font-weight:500}

/* ---------- transparency ledger ---------- */
.ledger{display:grid;grid-template-columns:1fr;border-top:1px solid var(--hairline)}
@media(min-width:760px){.ledger{grid-template-columns:repeat(2,1fr)}}
.ledger-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:20px 4px;border-bottom:1px solid var(--hairline-soft)}
@media(min-width:760px){
  .ledger-row:nth-child(odd){border-right:1px solid var(--hairline-soft);padding-right:34px}
  .ledger-row:nth-child(even){padding-left:34px}
}
.ledger-row .name{font-family:var(--font-serif);font-size:18px;color:var(--cream)}
.ledger-row .name small{display:block;font-family:var(--font-body);font-size:var(--fs-small);color:var(--stone);margin-top:2px}
.ledger-row .val{font-family:var(--font-head);font-weight:700;font-size:var(--fs-small);letter-spacing:.02em;color:var(--green-soft);white-space:nowrap;text-align:right}

/* ---------- form controls ---------- */
.field{margin-top:8px}
.flabel{display:block;font-size:var(--fs-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--stone);font-weight:600;margin-bottom:9px}
input[type=email],input[type=text],textarea,select{
  width:100%;background:var(--fill-1);border:1px solid var(--hairline);border-radius:12px;
  color:var(--cream);font-family:inherit;font-size:var(--fs-body);padding:16px 18px;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
textarea{resize:vertical;min-height:104px;line-height:1.55}
input::placeholder,textarea::placeholder{color:rgba(138,128,120,.7)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--green-lift);background:rgba(47,62,31,.12);box-shadow:0 0 0 3px rgba(47,62,31,.22);
}
.consent-box{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);color:var(--offwhite);line-height:1.55}
.consent-box input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--green-lift);cursor:pointer}

/* ---------- header / responsive nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(20,18,16,.82);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hairline-soft);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-header .brand{font-family:var(--font-head);font-weight:800;letter-spacing:.22em;font-size:var(--fs-body);padding-left:.22em}
.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.nav a{font-family:var(--font-head);font-weight:600;font-size:var(--fs-small);letter-spacing:.06em;color:var(--offwhite);transition:color .2s var(--ease);position:relative;padding:6px 0}
.nav a:hover{color:var(--cream)}
.nav a[aria-current="page"]{color:var(--cream)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--terra)}
.nav .btn{padding:11px 20px;font-size:var(--fs-small)}
.nav-toggle{display:none;background:none;border:1px solid var(--hairline);border-radius:10px;padding:9px 11px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--cream);margin:4px 0;transition:.25s var(--ease)}

@media(max-width:820px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--black);border-bottom:1px solid var(--hairline);
    padding:12px var(--gutter) 26px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.28s var(--ease);
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--hairline-soft);font-size:var(--fs-body)}
  .nav .btn{width:100%;margin-top:14px;justify-content:center}
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--hairline-soft);padding:clamp(48px,8vh,72px) 0 72px}
.site-footer .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:26px}
.site-footer .foot-mark{font-family:var(--font-display);font-size:clamp(38px,8vw,74px);text-transform:uppercase;line-height:.8;color:rgba(243,237,224,.9);letter-spacing:.005em}
.site-footer .foot-line{font-family:var(--font-serif);font-style:normal;color:var(--stone);font-size:var(--fs-body);max-width:26ch}
.site-footer .foot-nav{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:34px;font-family:var(--font-head);font-size:var(--fs-small);font-weight:600;letter-spacing:.04em}
.site-footer .foot-nav a{color:var(--stone)}
.site-footer .foot-nav a:hover{color:var(--cream)}
.site-footer .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:34px;padding-top:26px;border-top:1px solid var(--hairline-soft);font-size:var(--fs-caption);letter-spacing:.06em;color:var(--stone)}
.site-footer .foot-bottom a:hover{color:var(--cream)}
.site-footer .foot-legal{margin-top:22px;padding-top:22px;border-top:1px solid var(--hairline-soft);font-size:var(--fs-caption);line-height:1.7;color:var(--stone);max-width:88ch}
.site-footer .foot-legal b{color:var(--offwhite);font-weight:600}

/* ---------- preview badge ("PREVIEW — not live") ---------- */
.preview-badge{
  position:fixed;left:14px;bottom:14px;z-index:200;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--offwhite);background:rgba(20,18,16,.82);backdrop-filter:blur(8px);
  border:1px solid var(--hairline);border-radius:100px;padding:8px 14px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
}
.preview-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra)}

/* ---------- motion ---------- */
[data-rise]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rise].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-rise]{opacity:1;transform:none}
}

/* ---------- a11y utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}