/* Self-hosted Fira Sans — the owned SIL-OFL brand face (no third-party font dependency) */
@font-face{
  font-family:"Fira Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/FiraSans-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Fira Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/FiraSans-SemiBold.ttf") format("truetype");
}
/* Brand design tokens (sampled from the logo; Fibonacci spacing) — design-system foundations */
:root{
  --sop-blue:#0095FF; --sop-blue-deep:#005FA3; --sop-green:#267F00; --sop-green-deep:#1F6A00;
  --sop-black:#000000; --sop-ink:#141414; --sop-muted:#5B6670;
  --sop-border:#E2E6EA; --sop-mist:#F4F6F8; --sop-paper:#FFFFFF;
  --font-sans:"Fira Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --s3:3px; --s5:5px; --s8:8px; --s13:13px; --s21:21px; --s34:34px; --s55:55px; --s89:89px; --s144:144px;
  --radius:5px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--sop-paper); color:var(--sop-ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
.wrap{max-width:960px; margin:0 auto; padding:0 var(--s34);}
a{color:var(--sop-blue-deep); text-underline-offset:3px;}
section{padding:var(--s55) 0;}

/* Sticky site header — keeps a membership call-to-action reachable as the page scrolls */
header.site{position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sop-border); z-index:10;}
header.site .row{display:flex; align-items:center; justify-content:flex-end; gap:var(--s21); padding:var(--s13) 0;}
.cta-text{font-weight:600; color:var(--sop-blue-deep); text-decoration:none; font-size:16px; white-space:nowrap;}

/* Primary call-to-action — brand-green fill, white text */
.cta{display:inline-flex; align-items:center; gap:var(--s8); background:var(--sop-green); color:#fff;
  font-weight:600; font-size:17px; text-decoration:none; padding:var(--s13) var(--s21); border-radius:var(--radius);
  transition:background .15s ease;}
.cta:hover{background:var(--sop-green-deep);}
/* The trailing arrow is decoration, so it lives here, not in the markup (the label stays the only content). */
.cta::after{content:"\2192"; font-weight:600;}

/* Hero — the headline, subhead, and the primary call-to-action */
.hero{padding:var(--s89) 0 var(--s55); border-bottom:1px solid var(--sop-border);}
.hero h1{font-size:55px; line-height:1.04; font-weight:600; letter-spacing:-.015em; margin:0 0 var(--s21); max-width:16ch;}
.hero .sub{font-size:21px; color:var(--sop-muted); margin:0 0 var(--s34); max-width:54ch; font-weight:400;}
.hero .note{font-size:15px; color:var(--sop-muted); margin:var(--s13) 0 0;}

/* Conviction — the brand-voice opening, set in the serif */
.conviction{background:var(--sop-mist); border-top:1px solid var(--sop-border); border-bottom:1px solid var(--sop-border);}
.conviction p{font-family:var(--font-serif); font-size:23px; line-height:1.6; max-width:60ch; margin:0 0 var(--s21); color:var(--sop-ink);}
.conviction p:last-child{margin-bottom:0;}
.conviction strong{font-weight:600;}

/* Section lead-ins — the kicker label above a section heading */
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sop-blue-deep); margin:0 0 var(--s13);}
h2{font-size:34px; font-weight:600; letter-spacing:-.01em; margin:0 0 var(--s21);}

/* Mentorship — the present-tense core value: the weekly coaching the membership buys */
.copy{font-size:19px; line-height:1.6; color:var(--sop-ink); max-width:60ch; margin:0;}

/* Who it's for — the audience personas as a self-recognition grid */
.who ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s13) var(--s34);}
.who li{padding-left:var(--s21); position:relative; color:var(--sop-ink);}
.who li::before{content:"\203A"; position:absolute; left:0; color:var(--sop-blue); font-weight:600;}

/* Membership — the decision-point section: the founding-tier offer, the free-articles boundary, and the join call-to-action */
.member{background:var(--sop-mist); border-top:1px solid var(--sop-border);}
.member .body{max-width:60ch;}
.member p{margin:0 0 var(--s21);}
.member .free{font-weight:500; color:var(--sop-ink);}

@media(max-width:680px){ .hero h1{font-size:38px} h2{font-size:27px} .conviction p{font-size:20px} }