/* ==========================================================================
   RECLAIMED — brand.css
   --------------------------------------------------------------------------
   A neo-brutalist design system adapted from the RESIDUE visual language
   (theresiduebook.com) and re-pitched onto RECLAIMED's sage-green palette.

   Signature moves borrowed from RESIDUE:
     · Fraunces (display serif) + Karla (grotesque sans)
     · every border is near-black ink, 2.5px
     · hard offset shadows (4px 4px 0) instead of soft blurred ones
     · flat colour bands — cream, pale sage, ink — no gradient washes
     · uppercase, heavily tracked eyebrows and buttons

   This file is linked AFTER each page's inline <style>, so equal-specificity
   rules win on source order. !important is used only where a page rule is
   more specific (e.g. `.hero h1`) or where an inline style attribute competes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Typography
   -------------------------------------------------------------------------- */
body{
  font-family:var(--sans);
  font-size:clamp(1.0625rem,1.02rem + .2vw,1.12rem);
  line-height:1.65;
  font-weight:400;
  background:var(--cream);
  color:var(--ink);
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,summary,blockquote{font-family:var(--serif)!important;}
h1,h2{font-weight:800!important;letter-spacing:-.02em;}
h1{line-height:1.04!important;}
h2{line-height:1.08!important;}
h3,h4{font-weight:700!important;letter-spacing:-.01em;line-height:1.2;}

/* italic emphasis inside display type — RESIDUE's most recognisable tic.
   RECLAIMED's markup carries no <em> in headings, but it does use accent
   spans (.body-word), so those become the emphasis carrier. */
h1 em,h2 em,h3 em,h1 i,h2 i,h3 i{font-style:italic;font-weight:700;color:var(--gold);}
.body-word{
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  color:var(--gold)!important;
}
.different h1 em,.different h2 em,.cohort h2 em,
.capture h2 em,.hope h2 em,.midcta h2 em,
.different .body-word,.cohort .body-word,.hope .body-word{color:var(--gold-light)!important;}

.eyebrow{
  font-family:var(--sans)!important;
  font-weight:800!important;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
}
.different .eyebrow,.midcta .eyebrow,.cohort .eyebrow,
.capture .eyebrow,.hope .eyebrow,footer .eyebrow{color:var(--gold-light);}

/* body copy is set in Karla at a normal weight — the old sheet leaned on
   300, which Karla renders too thin against 2.5px ink rules */
p,li,dd,dt,figcaption,td,th{font-weight:400;}

.lead,.intro,.lede,.sub,.lede-intro{font-weight:400;}

/* --------------------------------------------------------------------------
   2 · Rhythm
   -------------------------------------------------------------------------- */
section{padding:100px 0;}
@media(max-width:740px){section{padding:66px 0;}}
.wrap{padding:0 26px;}

/* --------------------------------------------------------------------------
   3 · Navigation
   -------------------------------------------------------------------------- */
nav{
  background:rgba(251,249,247,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:2px solid var(--ink)!important;
}
.nav-in{padding:15px 26px;}
.nav-links{gap:26px;}
.nav-links a{
  font-family:var(--sans);
  font-weight:700;
  font-size:.86rem;
  color:var(--stone);
  padding:6px 2px;
  border-bottom:1.5px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--plum);border-bottom-color:var(--plum);}

.brand{font-family:var(--serif);font-weight:800;letter-spacing:.1em;color:var(--plum);}

/* primary nav call to action — pale sage tile with a hard shadow */
.nav-cta{
  background:var(--sky)!important;
  color:var(--ink)!important;
  border:var(--bw) solid var(--ink);
  border-radius:12px!important;
  box-shadow:3px 3px 0 var(--ink);
  font-family:var(--sans);
  font-weight:800;
  font-size:.72rem!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:10px 18px!important;
  border-bottom:var(--bw) solid var(--ink)!important;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.nav-cta:hover{
  background:#fff!important;
  transform:translate(3px,3px);
  box-shadow:0 0 0 var(--ink);
}

/* the "Find your start" tag link, which carries an inline style attribute */
.nav-links a.tagline-link{
  border:var(--bw) solid var(--ink)!important;
  border-radius:12px!important;
  padding:9px 15px!important;
  color:var(--plum)!important;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--cream);
  box-shadow:3px 3px 0 var(--ink);
}
.nav-links a.tagline-link:hover{
  background:#fff;
  transform:translate(3px,3px);
  box-shadow:0 0 0 var(--ink);
}

/* --------------------------------------------------------------------------
   4 · Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--sans);
  font-weight:800;
  font-size:.9375rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  padding:16px 30px;
  border-radius:14px!important;
  border:var(--bw) solid var(--ink);
  color:var(--ink);
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;
}
.btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);}

.btn-primary{background:var(--plum);color:#fff;box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--plum-deep);color:#fff;transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);}

.btn-soft{background:var(--sky);color:var(--ink);border:var(--bw) solid var(--ink);}
.btn-soft:hover{background:#fff;color:var(--ink);}

.btn-ghost{
  background:var(--cream);
  color:var(--ink);
  border:var(--bw) solid var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  padding:16px 30px;
  box-shadow:var(--shadow);
}
.btn-ghost:hover{background:#fff;border-bottom-color:var(--ink);}

/* buttons sitting on an ink band invert */
.different .btn-ghost,.midcta .btn-ghost,.cohort .btn-ghost,.capture .btn-ghost{
  background:transparent;
  color:var(--cream-on-navy);
  border-color:var(--cream-on-navy);
  box-shadow:4px 4px 0 var(--soft-on-navy);
}
.different .btn-ghost:hover,.midcta .btn-ghost:hover,
.cohort .btn-ghost:hover,.capture .btn-ghost:hover{
  background:var(--cream-on-navy);
  color:var(--ink);
  box-shadow:1px 1px 0 var(--soft-on-navy);
}
.midcta .btn-primary,.cohort .btn-primary,.capture .btn-primary,.different .btn-primary{
  background:var(--sky);
  color:var(--ink);
  border-color:var(--cream-on-navy);
  box-shadow:4px 4px 0 var(--soft-on-navy);
}
.midcta .btn-primary:hover,.cohort .btn-primary:hover,
.capture .btn-primary:hover,.different .btn-primary:hover{
  background:#fff;
  color:var(--ink);
  box-shadow:1px 1px 0 var(--soft-on-navy);
}

/* --------------------------------------------------------------------------
   5 · Cards, panels and tiles — the core brutalist surface
   -------------------------------------------------------------------------- */
.tier,.res,.t-card,.card,.post-card,.pcard,.q-card,.rec-card,
.guarantee,.stack,.country,.rblock,.download,.del,.mod,
.founder-figure,.plan{
  background:#fff;
  border:var(--bw) solid var(--ink)!important;
  border-radius:16px!important;
  box-shadow:var(--shadow-lg);
}

.pcard,.post-card,.card,.rblock{background:var(--sand);}
.download{background:var(--sand);box-shadow:var(--shadow);}
.t-card,.res{background:#fff;box-shadow:var(--shadow);}

.post-card:hover,.card:hover{
  transform:translate(3px,3px);
  box-shadow:1px 1px 0 var(--ink);
  background:#fff;
}
.post-card{transition:transform .12s ease,box-shadow .12s ease,background .12s ease;}

/* pricing tiers */
.tier{background:var(--sand);}
.tier.featured{
  background:#fff;
  border:var(--bw) solid var(--ink)!important;
  box-shadow:8px 8px 0 var(--plum);
}
.tier.featured::after{
  background:var(--plum);
  color:#fff;
  border:2px solid var(--ink);
  border-radius:10px;
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.12em;
  padding:6px 16px;
  box-shadow:2px 2px 0 var(--ink);
}
.tier-name{font-family:var(--sans);font-weight:800;letter-spacing:.14em;color:var(--gold);}
.tier-price{font-family:var(--serif);font-weight:800;color:var(--plum);}
.tier li::before,.pillar li::before,.mod li::before{
  background:var(--plum);
  border-radius:0;
  width:9px;
  height:9px;
}

/* offer stack */
.stack{overflow:hidden;}
.stack-row{border-bottom:2px solid var(--ink);}
.stack-total{background:var(--mist);border-top:var(--bw) solid var(--ink);}
.big-price{font-family:var(--serif);font-weight:800;color:var(--plum);}

/* guarantee block keeps a thick accent edge */
.guarantee{border-left:10px solid var(--plum)!important;}
.guarantee .g-badge{
  background:var(--plum);
  color:#fff;
  border:var(--bw) solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font-family:var(--serif);
  font-weight:800;
}
.guarantee .g-body h3{color:var(--plum);}

/* curriculum + method blocks */
.mod.flagship{box-shadow:8px 8px 0 var(--plum);}
.mod .n{
  font-family:var(--serif);
  font-weight:800;
  color:var(--plum);
}
.safebox{
  background:var(--mist);
  border:2px solid var(--ink);
  border-left:8px solid var(--plum);
  border-radius:12px;
}
.flag,.optional-tag,.tagb{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:2px solid var(--ink);
  border-radius:8px;
  background:var(--sky);
  color:var(--ink);
  padding:4px 10px;
}

/* quiz */
.q-card{box-shadow:var(--shadow-lg);}
.opt{
  border:var(--bw) solid var(--ink)!important;
  border-radius:14px!important;
  background:var(--cream);
  font-family:var(--sans);
  font-weight:600;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.opt:hover{background:var(--sky);transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.progress-track{border:2px solid var(--ink);border-radius:999px;background:var(--cream);overflow:hidden;}
.progress-bar{background:var(--plum);}
.rec-card{box-shadow:8px 8px 0 var(--plum);}

/* dark tiles that sit on ink bands stay translucent but gain an ink-free edge */
.hope-cell,.panel{
  border:var(--bw) solid var(--cream-on-navy)!important;
  border-radius:16px!important;
  box-shadow:6px 6px 0 var(--soft-on-navy);
  background:rgba(255,255,255,.05);
}

/* --------------------------------------------------------------------------
   6 · Flat colour bands — no gradient washes anywhere
   -------------------------------------------------------------------------- */
.hero::before,.page-hero::before,.p-hero::before,
.final::before,.quiz-hero::before{display:none!important;}

.hero,.page-hero,.p-hero,.quiz-hero{
  background:var(--sky-pale);
  border-bottom:2px solid var(--ink);
}
.final{
  background:var(--mist)!important;
  border-top:2px solid var(--ink);
}
.recognise,.results{background:var(--mist);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.pillars,.proof{background:var(--sand);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.trust{background:var(--sand);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.trust span::before{border-radius:0;background:var(--plum);}

.bridge,.enroll,.delivery{
  background:var(--mist)!important;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}

/* the ink bands */
.different,.cohort,.hope{
  background:var(--ink)!important;
  color:var(--cream-on-navy);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}

/* the quiz email capture is an ink card, not a full-bleed band */
.capture{
  background:var(--ink)!important;
  color:var(--cream-on-navy);
  border:var(--bw) solid var(--ink);
  border-radius:16px!important;
  box-shadow:6px 6px 0 var(--plum);
}
.different h2,.cohort h2,.capture h2,.hope h2,
.different h3,.cohort h3,.capture h3,.hope h3{color:var(--cream-on-navy)!important;}
.different p,.cohort p,.capture p,.hope p,
.different .intro,.hope .intro{color:var(--soft-on-navy);}
.safe-item::before{color:var(--gold-light);}

/* the mid-page sage block — stays green (deep enough for white text at 4.9:1) */
.midcta{
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
.midcta h2{color:#fff!important;}
.midcta p{color:rgba(255,255,255,.9);}

/* small pill tags become hard-edged tiles */
.reassure-pills span,.rec-card .tag,.cat,.post-meta span{
  border:2px solid var(--ink)!important;
  border-radius:8px!important;
  background:var(--sky);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:800;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   7 · Imagery — framed, not floated in soft shadow
   -------------------------------------------------------------------------- */
.hero-band .frame,.pillar .pillar-media,.pillar .visual,.founder-figure{
  border-radius:16px;
  border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.formcard,.intl{
  background:var(--sand);
  border:var(--bw) solid var(--ink);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
}

/* prominent green callouts — crisis panel and end-of-article CTA */
.urgent,.post-cta{
  background:var(--plum);
  color:#fff;
  border:var(--bw) solid var(--ink);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
}
.urgent h2,.urgent h3,.post-cta h2,.post-cta h3{color:#fff!important;}

/* flagship module: flat, not gradient-filled */
.mod.flagship{background:#fff;}

/* the bonus row in the offer stack keeps RESIDUE's highlighted-row treatment */
.stack-row.bonus{background:linear-gradient(90deg,rgba(46,125,90,.14),transparent 70%);}

/* thank-you page: flat band instead of a radial wash */
.ty::before{display:none!important;}
.ty{background:var(--sky-pale);border-bottom:2px solid var(--ink);}
.hero-band .cap{
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
}

/* --------------------------------------------------------------------------
   8 · Editorial furniture
   -------------------------------------------------------------------------- */
.pull,.closing,.pull-quote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  color:var(--plum);
}
.t-card::before{color:var(--plum);opacity:1;font-family:var(--serif);}
.t-card blockquote{font-family:var(--serif)!important;font-style:italic;font-weight:400;color:var(--ink);}
.t-card figcaption{
  font-family:var(--sans);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--stone);
}

.pain{border-bottom:1px solid var(--ink);}
.pain:first-child{border-top:1px solid var(--ink);}
.pain .dot{
  border-radius:0;
  border:2px solid var(--ink);
  background:var(--sky);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:700;
}
.how .ic{
  border-radius:12px;
  border:var(--bw) solid var(--ink);
  background:var(--sky);
  box-shadow:3px 3px 0 var(--ink);
}
.how .ic span{border-radius:0;background:var(--plum);}
.step,.lever{border-bottom:1px solid var(--ink);}

/* --------------------------------------------------------------------------
   9 · FAQ / details
   -------------------------------------------------------------------------- */
details{border-top:1px solid var(--ink);}
details:last-child{border-bottom:1px solid var(--ink);}
summary{font-family:var(--serif)!important;font-weight:700!important;color:var(--ink);}
summary:hover{color:var(--plum);}
.plus::before,.plus::after{background:var(--plum);}

/* --------------------------------------------------------------------------
   10 · Forms
   -------------------------------------------------------------------------- */
input[type=text],input[type=email],input[type=tel],textarea,select{
  font-family:var(--sans)!important;
  border:var(--bw) solid var(--ink)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--ink)!important;
  padding:14px 16px;
  transition:box-shadow .16s ease;
}
textarea{border-radius:16px!important;}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,textarea:focus{
  outline:none;
  box-shadow:var(--shadow);
}
label{
  font-family:var(--sans);
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--stone);
}
form.brutal-form{
  border:var(--bw) solid var(--ink)!important;
  border-radius:16px!important;
  box-shadow:var(--shadow-lg)!important;
  background:#fff!important;
}

/* selects that carry inline styles (currency + language pickers) */
#currency,#lang-switch{
  border:2px solid var(--ink)!important;
  border-radius:10px!important;
  font-family:var(--sans)!important;
  font-weight:700;
  background:#fff!important;
}
#google_translate_element .goog-te-gadget-simple{
  border:2px solid var(--ink)!important;
  border-radius:10px!important;
}

/* --------------------------------------------------------------------------
   11 · Safety bar + footer
   -------------------------------------------------------------------------- */
.safety-bar{
  background:var(--plum-deep);
  color:rgba(255,255,255,.92);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  font-weight:400;
}
.safety-bar b{color:#fff;font-weight:800;}

footer{
  background:var(--ink);
  color:var(--soft-on-navy);
  border-top:3px solid var(--plum);
}
footer .lbl{
  font-family:var(--sans);
  font-weight:800;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-light);
}
footer .brand{color:#fff;}
footer p{font-weight:400;}

/* --------------------------------------------------------------------------
   12 · Odds and ends
   -------------------------------------------------------------------------- */
#scroll-progress{background:var(--plum)!important;height:4px;}

.skip:focus,.skip-link:focus{
  background:var(--ink);
  color:var(--cream);
  border-radius:0 0 8px 0;
  font-family:var(--sans);
  font-weight:700;
}

/* focus ring — the one warm accent kept from the old palette, used sparingly */
:focus-visible{
  outline:3px solid var(--accent-warm);
  outline-offset:2px;
  border-radius:4px;
}

@media(max-width:740px){
  :root{--bw:2px;--shadow:3px 3px 0 var(--ink);--shadow-lg:4px 4px 0 var(--ink);}
  .btn{padding:14px 24px;font-size:.86rem;}
}

@media (prefers-reduced-motion: reduce){
  .btn:hover,.opt:hover,.post-card:hover,.card:hover,.nav-cta:hover{transform:none;}
}