/* ============================================================
   Right Arrow Studio — brand site stylesheet
   Self-contained: tokens ported from Design System v2.1 so the
   site hosts anywhere with no external CSS dependency.
   Display: Bricolage Grotesque · Body: Hanken Grotesk · Numeric: Spline Sans Mono
   ============================================================ */

/* ---------- Tokens (ported 1:1 from DS v2.1) ---------- */
:root {
  /* Clay — primary / focal action / the aiming arrow */
  --clay-50:#FBEDE8; --clay-100:#F6D8CD; --clay-200:#EDB1A0; --clay-300:#E08A72;
  --clay-400:#D26349; --clay-500:#C0432F; --clay-600:#A5371F; --clay-700:#842A18;
  --clay-800:#5F1F12; --clay-900:#3D150D;
  /* Honey — warm secondary accent */
  --honey-50:#FCF1DF; --honey-100:#FBE6C6; --honey-200:#F5CC8E; --honey-300:#EDB25A;
  --honey-400:#E2913F; --honey-500:#C9762B; --honey-600:#A35E20; --honey-700:#7C4717;
  /* Sage — correct / profit / "in the green" */
  --sage-50:#E4F1E8; --sage-100:#C7E3D0; --sage-200:#95C9A8; --sage-300:#5FAC7C;
  --sage-400:#3C9763; --sage-500:#2E8B57; --sage-600:#246B43; --sage-700:#1B4F32;
  /* Neutrals — warm, paper-leaning */
  --paper:#FAF5EF; --paper-deep:#F2EBE1; --surface:#FFFFFF; --line:#E7DCCE; --line-strong:#D8CBB8;
  --ink:#211B17; --ink-2:#564C42; --ink-3:#8A7D6E; --ink-inv:#FBF7F2;
  /* Semantic */
  --success-bg:#E4F1E8; --success:#2E8B57; --success-fg:#1B4F32;
  --warning-bg:#FBE6C6; --warning:#C9762B; --warning-fg:#7C4717;
  --danger-bg:#FAE0DB; --danger:#CC3B2A; --danger-fg:#842A18;

  /* Aliases */
  --bg-app:var(--paper); --bg-sunken:var(--paper-deep);
  --text-strong:var(--ink); --text-body:var(--ink-2); --text-muted:var(--ink-3); --text-on-brand:var(--ink-inv);
  --border-subtle:var(--line); --border-strong:var(--line-strong);
  --brand-primary:var(--clay-500); --brand-primary-hover:var(--clay-600);
  --brand-accent:var(--sage-500); --brand-accent-hover:var(--sage-600);
  --focus-ring:var(--honey-300);

  /* Type */
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-display:800;
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-md:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:4rem; --text-6xl:5.5rem;
  --lh-tight:1.05; --lh-snug:1.2; --lh-heading:1.15; --lh-body:1.55; --lh-relaxed:1.7;
  --ls-tight:-0.02em; --ls-snug:-0.01em; --ls-wide:0.04em; --ls-wider:0.12em;

  /* Space / radius / shadow / motion */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:7rem;
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-2xl:36px; --radius-pill:999px;
  --bw:1px; --bw-strong:1.5px;
  --shadow-xs:0 1px 2px rgba(61,21,13,.06);
  --shadow-sm:0 1px 2px rgba(61,21,13,.05),0 2px 6px rgba(61,21,13,.05);
  --shadow-md:0 2px 4px rgba(61,21,13,.05),0 8px 20px rgba(61,21,13,.07);
  --shadow-lg:0 4px 8px rgba(61,21,13,.05),0 16px 40px rgba(61,21,13,.10);
  --shadow-focus:0 0 0 3px var(--focus-ring);
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-emphasis:cubic-bezier(.3,0,0,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --width-content:1080px; --width-wide:1240px; --width-prose:64ch;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg-app); color:var(--text-strong);
  font:var(--fw-regular) var(--text-md)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--text-strong); letter-spacing:var(--ls-snug); line-height:var(--lh-heading); margin:0 0 var(--space-3); text-wrap:balance;}
h1{font-size:var(--text-4xl); font-weight:var(--fw-display);}
h2{font-size:var(--text-3xl); font-weight:var(--fw-bold);}
h3{font-size:var(--text-xl); font-weight:var(--fw-semibold);}
p{margin:0 0 var(--space-4); line-height:var(--lh-body); text-wrap:pretty;}
a{color:var(--brand-primary); text-decoration:none;}
a:hover{color:var(--brand-primary-hover); text-decoration:underline; text-underline-offset:2px;}
img,svg{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
strong{font-weight:var(--fw-bold);}
em{font-style:italic;}
:focus-visible{outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm);}

.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:0;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--ink-inv); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); z-index:3000;}
.skip-link:focus{left:var(--space-4); top:var(--space-4); text-decoration:none;}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--width-content); margin-inline:auto; padding-inline:var(--space-5);}
.wrap--wide{max-width:var(--width-wide);}
.section{padding-block:var(--space-9);}
@media (min-width:900px){ .section{padding-block:var(--space-12);} }
.section--sunken{background:var(--paper-deep);}
.lead{font-size:var(--text-lg); color:var(--text-body); max-width:var(--width-prose);}
.section__head{max-width:var(--width-prose); margin-bottom:var(--space-7);}
.section__head--center{margin-inline:auto; text-align:center;}

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font:var(--fw-semibold) var(--text-xs)/1.2 var(--font-body);
  text-transform:uppercase; letter-spacing:var(--ls-wider); color:var(--clay-600);
  margin:0 0 var(--space-4);
}
/* Brand structural device: a tiny arrow-target tick before eyebrows (echoes the mark, not generic) */
.eyebrow::before{
  content:""; width:14px; height:14px; flex:none;
  background:
    radial-gradient(circle at center, var(--clay-500) 0 2px, transparent 2.5px),
    radial-gradient(circle at center, transparent 0 4px, var(--sage-500) 4.5px 6px, transparent 6.5px);
}

/* ---------- Buttons (ported from DS Button component) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font:var(--fw-semibold) var(--text-md)/1.1 var(--font-body); letter-spacing:.005em;
  padding:0.68rem 1.15rem; border-radius:var(--radius-md);
  border:var(--bw-strong) solid transparent; cursor:pointer; white-space:nowrap;
  text-decoration:none; transition:background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover{text-decoration:none; transform:translateY(-1px);}
.btn--lg{font-size:var(--text-lg); padding:0.85rem 1.5rem; border-radius:var(--radius-md);}
.btn--sm{font-size:var(--text-sm); padding:0.5rem 0.85rem; border-radius:var(--radius-sm);}
.btn--primary{background:var(--clay-500); color:var(--ink-inv); box-shadow:var(--shadow-xs);}
.btn--primary:hover{background:var(--clay-600); color:var(--ink-inv);}
.btn--accent{background:var(--sage-600); color:var(--ink-inv); box-shadow:var(--shadow-xs);} /* sage-600 clears AA (6.04:1) */
.btn--accent:hover{background:var(--sage-700); color:var(--ink-inv);}
.btn--outline{background:transparent; color:var(--clay-600); border-color:var(--clay-200);}
.btn--outline:hover{background:var(--clay-50); color:var(--clay-700);}
.btn--ghost{background:transparent; color:var(--ink);}
.btn--ghost:hover{background:var(--paper-deep); color:var(--ink);}
.btn--ghost-inv{background:transparent; color:var(--ink-inv); border-color:rgba(251,247,242,.45);}
.btn--ghost-inv:hover{background:rgba(251,247,242,.12); color:var(--ink-inv);}
.btn .arr{font-weight:700; transition:transform var(--dur-base) var(--ease-standard);}
.btn:hover .arr{transform:translateX(3px);}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:var(--bw) solid var(--line);
}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-block:var(--space-3);}
.brand-link{display:inline-flex; align-items:center;}
.brand-link img{height:30px; width:auto;}
.nav{display:flex; align-items:center; gap:var(--space-2);}
.nav__links{display:none; align-items:center; gap:var(--space-2);}
.nav__links a{
  color:var(--ink-2); font-weight:var(--fw-medium); font-size:var(--text-sm);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
}
.nav__links a:hover{color:var(--ink); background:var(--paper-deep); text-decoration:none;}
.nav__links a[aria-current="page"]{color:var(--clay-600);}
.nav__cta{display:none;}
.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  background:transparent; border:var(--bw) solid var(--line-strong); border-radius:var(--radius-sm); cursor:pointer; color:var(--ink);
}
.nav__toggle svg{width:20px; height:20px;}
.mobile-menu{display:none; border-top:var(--bw) solid var(--line); background:var(--paper);}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block; padding:var(--space-4) 0; color:var(--ink); font-weight:var(--fw-medium); border-bottom:var(--bw) solid var(--line);}
.mobile-menu a:hover{text-decoration:none; color:var(--clay-600);}
.mobile-menu .btn{margin:var(--space-4) 0; width:100%;}
@media (min-width:860px){
  .nav__links{display:flex;} .nav__cta{display:inline-flex;} .nav__toggle{display:none;}
  .brand-link img{height:32px;}
}

/* ---------- Hero ---------- */
.hero{position:relative; padding-block:var(--space-9) var(--space-9); overflow:hidden;}
.hero::before{
  /* faint target-ring atmosphere, far top-right — subtle brand ambiance */
  content:""; position:absolute; top:-180px; right:-160px; width:520px; height:520px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, transparent 0 38%, color-mix(in srgb,var(--sage-500) 14%, transparent) 38% 39.4%, transparent 40%),
             radial-gradient(circle, transparent 0 26%, color-mix(in srgb,var(--clay-500) 12%, transparent) 26% 27.6%, transparent 28%);
}
.hero__grid{position:relative; z-index:1; display:grid; gap:var(--space-8); align-items:center;}
@media (min-width:980px){ .hero__grid{grid-template-columns:1.05fr 0.95fr; gap:var(--space-9);} .hero{padding-block:var(--space-10) var(--space-12);} }
.hero h1{font-size:clamp(2.75rem,8vw,var(--text-5xl)); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); margin-bottom:var(--space-5);}
.hero h1 .dot{color:var(--clay-500);}
.hero__sub{font-size:var(--text-lg); color:var(--text-body); max-width:54ch; margin-bottom:var(--space-6);}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-4);}
.hero__trust{font-size:var(--text-sm); color:var(--ink-2); display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); align-items:center;}
.hero__trust .dotsep{width:4px; height:4px; border-radius:50%; background:var(--line-strong);}

/* ---------- Signature: the "math adds up" receipt card ---------- */
.receipt{
  position:relative; background:var(--surface); border:var(--bw) solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-6);
  max-width:440px; margin-inline:auto;
}
/* perforation "tear" now lives on .checks li.green (border-top) so it tracks content height
   instead of a magic offset that could drift when the caption rewraps on narrow phones */
.receipt__top{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-5);}
.receipt__label{font:var(--fw-semibold) var(--text-2xs)/1.2 var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-wider); color:var(--ink-2);}
.receipt__mark{width:34px; height:34px;}
.receipt__counts{font-size:var(--text-sm); color:var(--ink-2); margin-bottom:var(--space-5);}
.receipt__counts b{color:var(--ink); font-weight:var(--fw-semibold);}
.receipt__price{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3); row-gap:var(--space-1); margin-bottom:var(--space-5);}
.receipt__price .figure{font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:clamp(2.5rem,9vw,var(--text-5xl)); line-height:1; color:var(--ink); letter-spacing:-0.02em;}
.receipt__price .cap{font:var(--fw-semibold) var(--text-xs)/1.3 var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--clay-600); padding-bottom:6px;}
.checks{display:grid; gap:var(--space-2); margin:0 0 var(--space-4);}
.checks li{display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); color:var(--ink-2);}
.checks li .tick{
  flex:none; width:20px; height:20px; border-radius:var(--radius-pill);
  background:var(--sage-50); color:var(--sage-600); display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; border:var(--bw) solid var(--sage-100);
}
.checks li.green{color:var(--sage-700); font-weight:var(--fw-semibold); border-top:2px dashed var(--line-strong); margin-top:var(--space-3); padding-top:var(--space-3);}
.checks li.green .tick{background:var(--sage-500); color:var(--ink-inv); border-color:var(--sage-500);}
.checks li .pct{font-family:var(--font-mono); margin-left:auto; color:var(--sage-600); font-weight:var(--fw-semibold);}
.receipt__foot{font-size:var(--text-xs); color:var(--ink-2); margin:0; padding-top:var(--space-3); border-top:var(--bw) solid var(--line);}

/* ---------- Problem ---------- */
.contrast{display:grid; gap:var(--space-4); margin-top:var(--space-6);}
@media (min-width:760px){ .contrast{grid-template-columns:1fr 1fr;} }
.contrast__card{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6);}
.contrast__card .k{font:var(--fw-semibold) var(--text-2xs)/1.2 var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-wider); margin:0 0 var(--space-3);}
.contrast__card.miss{border-color:var(--clay-100); background:var(--clay-50);}
.contrast__card.miss .k{color:var(--clay-700);}
.contrast__card.real{border-color:var(--sage-100); background:var(--sage-50);}
.contrast__card.real .k{color:var(--sage-700);}
.contrast__card p{margin:0; color:var(--ink); font-size:var(--text-md);}
.cost-stack{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2);}
.cost-stack .chip{font-family:var(--font-mono); font-size:var(--text-sm); background:var(--surface); border:var(--bw) solid var(--sage-200); color:var(--sage-700); padding:2px 10px; border-radius:var(--radius-pill);}
.contrast__line{margin-top:var(--space-5); font-size:var(--text-lg); font-weight:var(--fw-semibold); color:var(--ink); font-family:var(--font-display);}

/* ---------- Steps (genuine sequence → numbered) ---------- */
.steps{display:grid; gap:var(--space-5); counter-reset:step;}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr); gap:var(--space-6);} }
.step{position:relative; background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm);}
.step__n{font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:var(--text-sm); color:var(--clay-500); letter-spacing:var(--ls-wide); display:block; margin-bottom:var(--space-3);}
.step h3{margin-bottom:var(--space-2);}
.step p{margin:0; color:var(--text-body); font-size:var(--text-md);}
.step__rail{display:none;}

/* ---------- What's inside (cards) ---------- */
.cards{display:grid; gap:var(--space-4);}
@media (min-width:680px){ .cards{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .cards{grid-template-columns:repeat(3,1fr);} }
.feature{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong);}
.feature__icon{width:40px; height:40px; border-radius:var(--radius-md); background:var(--clay-50); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4); color:var(--clay-600);}
.feature__icon svg{width:22px; height:22px;}
.feature h3{font-size:var(--text-lg); margin-bottom:var(--space-2);}
.feature p{margin:0; color:var(--text-body); font-size:var(--text-sm); line-height:var(--lh-body);}
.feature.is-accent .feature__icon{background:var(--sage-50); color:var(--sage-600);}

/* ---------- Who it's for (tags) ---------- */
.audience{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-xl); padding:var(--space-8); text-align:center; box-shadow:var(--shadow-sm);}
.tags{display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin:var(--space-6) 0 var(--space-5);}
.tags .tag{
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--paper); border:var(--bw) solid var(--line-strong); color:var(--ink);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:var(--fw-medium);
}
.tags .tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--honey-400); flex:none;}
.audience__note{color:var(--ink-2); font-size:var(--text-sm); margin:0;}

/* ---------- Trust ---------- */
.trust__grid{display:grid; gap:var(--space-8); align-items:start;}
@media (min-width:920px){ .trust__grid{grid-template-columns:1fr 0.9fr;} }
.mathcheck{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-md);}
.mathcheck__top{display:flex; align-items:center; gap:var(--space-3); padding-bottom:var(--space-4); margin-bottom:var(--space-4); border-bottom:var(--bw) solid var(--line);}
.mathcheck__top .badge{font:var(--fw-semibold) var(--text-2xs)/1 var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-wider); color:var(--sage-700); background:var(--sage-50); border:var(--bw) solid var(--sage-100); padding:6px 10px; border-radius:var(--radius-pill);}
.mathcheck__top h3{margin:0; font-size:var(--text-lg);}
.mathcheck .all-pass{margin-top:var(--space-4); padding-top:var(--space-4); border-top:var(--bw) solid var(--line); display:flex; align-items:center; gap:var(--space-3); color:var(--sage-700); font-weight:var(--fw-semibold); font-family:var(--font-display);}
.mathcheck .all-pass .tick{width:24px; height:24px; background:var(--sage-500); color:var(--ink-inv); border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:var(--space-3); max-width:var(--width-prose); margin-inline:auto;}
.faq details{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); transition:border-color var(--dur-base) var(--ease-standard);}
.faq details[open]{border-color:var(--line-strong); box-shadow:var(--shadow-sm);}
.faq summary{cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-lg); color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-family:var(--font-mono); font-size:var(--text-xl); color:var(--clay-500); transition:transform var(--dur-base) var(--ease-standard); line-height:1;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:var(--space-3) 0 0; color:var(--text-body); font-size:var(--text-md);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--clay-500); color:var(--ink-inv); border-radius:var(--radius-2xl); padding:var(--space-9) var(--space-7); text-align:center; position:relative; overflow:hidden;}
.cta-band::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 85% -20%, rgba(251,247,242,.14), transparent 45%),
             radial-gradient(circle at 12% 120%, rgba(46,139,87,.30), transparent 42%);}
.cta-band > *{position:relative; z-index:1;}
.cta-band h2{color:var(--ink-inv); font-size:clamp(2rem,6vw,var(--text-4xl)); margin-bottom:var(--space-4);}
.cta-band p{color:var(--ink-inv); font-size:var(--text-lg); max-width:46ch; margin-inline:auto; margin-bottom:var(--space-6);} /* solid ink-inv on clay = 4.82:1 (AA) */
.cta-band .btn--primary{background:var(--ink-inv); color:var(--clay-700);}
.cta-band .btn--primary:hover{background:var(--surface); color:var(--clay-800);}
.cta-band__micro{margin:var(--space-5) 0 0; font-size:var(--text-sm); color:var(--ink-inv);}

/* ---------- Generic page hero (about/support/legal) ---------- */
.page-hero{padding-block:var(--space-9) var(--space-7);}
.page-hero h1{font-size:clamp(2.25rem,6vw,var(--text-4xl)); margin-bottom:var(--space-4);}
.page-hero .lead{font-size:var(--text-lg);}
.prose{max-width:var(--width-prose);}
.prose h2{font-size:var(--text-2xl); margin-top:var(--space-8); margin-bottom:var(--space-4);}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--text-body); font-size:var(--text-md);}
.prose strong{color:var(--ink);}
.prose ul.bullets{margin:0 0 var(--space-4); display:grid; gap:var(--space-2);}
.prose ul.bullets li{position:relative; padding-left:var(--space-5); color:var(--text-body);}
.prose ul.bullets li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; border:2px solid var(--sage-500);}
.prose ul.no li{position:relative; padding-left:var(--space-5); color:var(--text-body); margin-bottom:var(--space-2);}
.prose ul.no li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; border:2px solid var(--clay-300);}

.promises{display:grid; gap:var(--space-4); margin:var(--space-7) 0;}
@media (min-width:680px){ .promises{grid-template-columns:1fr 1fr;} }
.promise{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm);}
.promise h3{font-size:var(--text-lg); margin-bottom:var(--space-2); display:flex; align-items:center; gap:var(--space-3);}
.promise h3 .dot{width:10px; height:10px; border-radius:50%; background:var(--sage-500); flex:none;}
.promise p{margin:0; color:var(--text-body); font-size:var(--text-sm);}

.callout{background:var(--paper-deep); border:var(--bw) solid var(--line); border-left:4px solid var(--honey-400); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); margin:var(--space-6) 0;}
.callout p{margin:0; color:var(--ink-2); font-size:var(--text-sm);}

.contact-box{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-xl); padding:var(--space-7); box-shadow:var(--shadow-md); margin:var(--space-6) 0;}
.contact-box .email{font-family:var(--font-mono); font-size:var(--text-xl); color:var(--clay-600); font-weight:var(--fw-semibold); word-break:break-all;}
.signoff{font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--ink); margin-top:var(--space-6);}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:var(--ink-inv); padding-block:var(--space-9) var(--space-6); margin-top:var(--space-10);}
.site-footer a{color:color-mix(in srgb,var(--ink-inv) 80%, transparent);}
.site-footer a:hover{color:var(--ink-inv);}
.footer__grid{display:grid; gap:var(--space-7); grid-template-columns:1fr;}
@media (min-width:760px){ .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;} }
.footer__brand img{height:30px; margin-bottom:var(--space-4);}
.footer__brand p{color:color-mix(in srgb,var(--ink-inv) 70%, transparent); font-size:var(--text-sm); max-width:30ch;}
.footer__col h4{font:var(--fw-semibold) var(--text-2xs)/1 var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-wider); color:color-mix(in srgb,var(--ink-inv) 55%, transparent); margin:0 0 var(--space-4);}
.footer__col ul{display:grid; gap:var(--space-3);}
.footer__col a{font-size:var(--text-sm); text-decoration:none;}
.footer__promise{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin:var(--space-8) 0 var(--space-5); padding-top:var(--space-6); border-top:var(--bw) solid rgba(251,247,242,.14); font-size:var(--text-sm); color:color-mix(in srgb,var(--ink-inv) 78%, transparent);}
.footer__promise span{display:inline-flex; align-items:center; gap:var(--space-2);}
.footer__promise span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--sage-400); flex:none;}
.footer__fine{font-size:var(--text-xs); color:color-mix(in srgb,var(--ink-inv) 55%, transparent); margin:0 0 var(--space-2); max-width:70ch;}
.footer__copy{font-size:var(--text-xs); color:color-mix(in srgb,var(--ink-inv) 55%, transparent); margin:0;}

/* ---------- Reveal on scroll ---------- */
/* Hidden state is gated behind .js (added inline in <head>) so content is fully visible if JS never runs */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);}
.reveal.in{opacity:1; transform:none;}

/* ---------- Hero load orchestration (the one signature moment) ---------- */
@keyframes raise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes stamp{0%{opacity:0; transform:scale(1.18);} 60%{opacity:1;} 100%{opacity:1; transform:scale(1);}}
@keyframes tickin{from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:none;}}
.anim .hero h1{animation:raise var(--dur-slow) var(--ease-emphasis) both;}
.anim .hero__sub{animation:raise var(--dur-slow) var(--ease-emphasis) .08s both;}
.anim .hero__cta{animation:raise var(--dur-slow) var(--ease-emphasis) .16s both;}
.anim .hero__trust{animation:raise var(--dur-slow) var(--ease-emphasis) .22s both;}
.anim .receipt{animation:raise var(--dur-slow) var(--ease-emphasis) .12s both;}
.anim .receipt__price .figure{animation:stamp 520ms var(--ease-emphasis) .55s both;}
.anim .checks li{animation:tickin var(--dur-base) var(--ease-standard) both;}
.anim .checks li:nth-child(1){animation-delay:.62s;}
.anim .checks li:nth-child(2){animation-delay:.72s;}
.anim .checks li:nth-child(3){animation-delay:.82s;}
.anim .checks li:nth-child(4){animation-delay:.92s;}
.anim .checks li:nth-child(5){animation-delay:1.02s;}

/* ---------- Optional "A look inside" showcase (enabled by Mahmoud when assets exist) ---------- */
.showcase__video{position:relative; display:block; aspect-ratio:16/9; width:100%; border-radius:var(--radius-xl); overflow:hidden; border:var(--bw) solid var(--line); box-shadow:var(--shadow-md); background:var(--paper-deep);}
.showcase__video img{width:100%; height:100%; object-fit:cover;}
.showcase__video .play{position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:var(--radius-pill); background:var(--clay-500); color:var(--ink-inv); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); transition:transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);}
.showcase__video:hover .play{transform:scale(1.06); background:var(--clay-600);}
.showcase__video .play svg{width:26px; height:26px; margin-left:3px;}
.shots{display:grid; gap:var(--space-5); margin-top:var(--space-6);}
@media (min-width:760px){ .shots{grid-template-columns:repeat(3,1fr);} }
.shot{background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);}
.shot__bar{display:flex; gap:6px; padding:var(--space-3) var(--space-4); background:var(--paper-deep); border-bottom:var(--bw) solid var(--line);}
.shot__bar span{width:9px; height:9px; border-radius:50%; background:var(--line-strong);}
.shot img{width:100%; height:auto; display:block;}
.shot figcaption{padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--ink-2);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important;}
  .js .reveal{opacity:1; transform:none;}
}