:root{
  --accent:#3f37cf; --accent-600:#342cb0; --accent-soft:#edecfb;
  --gold:#b07d1e; --gold-value:#8a6f1c; --gold-on-dark:#c9b976;
  --ink:#1f1e19; --ink-2:#57544c; --ink-soft:#6b675d; --ink-faint:#8b877d;
  --bg:#f4f2ec; --card:#ffffff; --line:#e7e3d9; --line-soft:#efece3;
  --positive:#2f8f6b; --positive-text:#1f6f52; --positive-soft:#e2f0ea;
  --r-lg:18px; --r-md:12px; --r-pill:999px; --shadow:0 10px 30px rgba(25,24,19,.08);
  --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;} html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;} img{max-width:100%;}
[data-feature]{display:none;} /* feature-flagged (blog/community) — flags.js reveals when enabled */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 22px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer;transition:.15s;}
.btn:hover{border-color:#cbd5e1;}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(63,55,207,.28);}
.btn.primary:hover{background:var(--accent-600);}
.btn.ghost{background:none;border-color:transparent;}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
h1,h2,h3{line-height:1.15;margin:0;} .tm{font-size:.5em;vertical-align:super;color:var(--ink-faint);}

/* Nav */
header{position:sticky;top:0;z-index:50;background:rgba(248,250,252,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-serif);font-weight:600;font-size:19px;letter-spacing:-.01em;white-space:nowrap;}
.brand .mark{width:38px;height:38px;display:block;flex:none;}
.brand .mark img{width:100%;height:100%;display:block;border-radius:10px;box-shadow:0 6px 16px rgba(63,55,207,.3);}
/* Header brand uses the seal (not the tile): circular art, so no rounded-square shadow. */
.brand .mark.seal{width:56px;height:56px;}
.brand .mark.seal img{border-radius:0;box-shadow:none;}
.brand-sys{display:none;} /* header shows just "Standing Proof" — matches the app + mockup */
.brand a{text-decoration:none;color:inherit;display:flex;align-items:center;gap:11px;}
.nav-links{display:flex;align-items:center;gap:20px;}
.nav-links a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:15px;}
.nav-links a:hover{color:var(--ink);}
@media(max-width:760px){
  .nav{height:72px;}
  .brand{font-size:15px;gap:8px;}
  .brand-sys{display:none;}          /* show just "Standing Proof" on phones */
  .nav-links{gap:14px;}
  .nav-links a.hide-sm{display:none;}
  .btn{padding:10px 16px;font-size:14px;}
}

/* Hero */
.hero{padding:76px 0 64px;background:radial-gradient(1100px 520px at 50% -8%,var(--accent-soft),transparent 62%);}
.hero-inner{max-width:820px;margin:0 auto;text-align:center;}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:850;letter-spacing:-.02em;margin:16px 0 18px;}
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),#7c6cf0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{font-size:clamp(17px,2.2vw,20px);color:var(--ink-2);max-width:640px;margin:0 auto 28px;}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.cta-note{margin-top:14px;font-size:13px;color:var(--ink-soft);}
.pill-badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow);}

/* Segments strip */
.segments{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);}
.segments .row{display:flex;gap:14px 34px;flex-wrap:wrap;justify-content:center;align-items:center;color:var(--ink-soft);font-weight:700;font-size:15px;}
.segments .lead{color:var(--ink-faint);font-weight:600;}

section{padding:74px 0;}
.sec-head{text-align:center;max-width:680px;margin:0 auto 44px;}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.01em;margin:10px 0 12px;}
.sec-head p{color:var(--ink-2);font-size:17px;}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);}
.step-num{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:800;display:grid;place-items:center;margin-bottom:14px;}
.card h3{font-size:19px;margin-bottom:8px;}
.card p{color:var(--ink-2);font-size:15px;margin:0;}
.feat-ico{font-size:24px;margin-bottom:10px;}

/* Trust */
.trust{background:linear-gradient(180deg,#17160f,#201f17);color:#e7e3d9;}
.trust .sec-head h2{color:#fff;} .trust .sec-head p{color:#c9c4b6;}
.trust .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);box-shadow:none;}
.trust .card h3{color:#fff;} .trust .card p{color:#c9c4b6;}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
@media(max-width:900px){.price-grid{grid-template-columns:1fr;}}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow);}
.plan.featured{border-color:var(--accent);box-shadow:0 14px 34px rgba(63,55,207,.18);}
.plan .tag{position:absolute;top:-12px;left:28px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:4px 12px;border-radius:var(--r-pill);}
.plan h3{font-size:20px;}
.price{font-size:40px;font-weight:850;margin:6px 0 2px;}
.price span{font-size:15px;font-weight:600;color:var(--ink-soft);}
.plan .sub{color:var(--ink-soft);font-size:14px;margin-bottom:16px;}
.plan ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1;}
.plan li{display:flex;gap:9px;font-size:15px;color:var(--ink-2);}
.plan li::before{content:"✓";color:var(--positive-text);font-weight:800;}
.plan .btn{width:100%;justify-content:center;}

/* Career Lab teaser band (shared) */
.lab{background:var(--accent);color:#fff;border-radius:var(--r-lg);padding:44px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;}
@media(max-width:820px){.lab{grid-template-columns:1fr;}}
.lab h2{font-size:30px;margin-bottom:10px;} .lab p{color:#e0e7ff;font-size:16px;margin:0;}
.lab .btn{background:#fff;color:var(--accent);border:0;}

.final{text-align:center;background:var(--card);border-top:1px solid var(--line);}
footer{padding:40px 0;color:var(--ink-soft);font-size:14px;border-top:1px solid var(--line);}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;}
.foot a{color:var(--ink-soft);}

/* ---- Career Lab page ---- */
.lab-hero{padding:68px 0 52px;background:radial-gradient(1000px 480px at 50% -10%,var(--accent-soft),transparent 60%);text-align:center;}
.lab-hero .price-line{font-size:15px;color:var(--ink-soft);margin-top:16px;}
.week{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line-soft);}
.week:last-child{border-bottom:0;}
.week .wk{width:54px;height:54px;border-radius:13px;background:var(--accent-soft);color:var(--accent);font-weight:800;display:grid;place-items:center;font-size:12px;line-height:1.15;text-align:center;}
.week h3{font-size:18px;margin-bottom:4px;}
.week p{color:var(--ink-2);font-size:15px;margin:0;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
@media(max-width:820px){.two-col{grid-template-columns:1fr;}}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.check-list li{display:flex;gap:10px;font-size:16px;color:var(--ink-2);}
.check-list li::before{content:"✓";color:var(--positive-text);font-weight:800;}
.cta-band{background:var(--accent);color:#fff;border-radius:var(--r-lg);padding:48px 44px;text-align:center;}
.cta-band h2{font-size:30px;margin-bottom:10px;}
.cta-band p{color:#e0e7ff;margin:0 auto 22px;max-width:580px;}
.cta-band .btn{background:#fff;color:var(--accent);border:0;}
.faq h3{font-size:16px;margin-bottom:6px;}

/* ---- Imagery: hero visual, avatars, group bands ---- */
/* All photo slots layer a brand gradient over an optional url() — so a missing
   file shows an intentional gradient, and dropping a file in "just works". */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;text-align:left;}
.hero-grid .cta-row{justify-content:flex-start;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:center;}.hero-grid .cta-row{justify-content:center;}}
.hero-visual{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(25,24,19,.45);
  background-color:#d8d3c7;
  background-image:url('img/hero.jpg');
  background-size:cover;background-position:center;}
.hero-visual .glass{position:absolute;background:rgba(255,255,255,.94);border-radius:14px;padding:12px 16px;box-shadow:0 10px 26px rgba(25,24,19,.20);}
.hero-visual .g1{top:20px;left:20px;} .hero-visual .g2{bottom:20px;right:20px;}
.glass .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.glass .v{font-size:22px;font-weight:850;color:var(--ink);line-height:1.1;}
.glass .v.accent{color:var(--accent);}

/* People / voices cards */
.avatar-ph{width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;
  background-color:#7c6cf0;background-image:linear-gradient(135deg,var(--accent),#8b5cf6);background-size:cover;background-position:center;}
.quote{font-size:15.5px;color:var(--ink-2);margin:0 0 18px;line-height:1.6;}
.who{display:flex;align-items:center;gap:12px;}
.who .name{font-weight:700;font-size:15px;} .who .role{font-size:13px;color:var(--ink-soft);}

/* Full-width group photo band */
.photo-band{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:260px;display:grid;place-items:center;text-align:center;padding:48px 28px;color:#fff;
  background-color:#17160f;background-image:linear-gradient(180deg,rgba(23,22,15,.4),rgba(23,22,15,.72)),url('img/cohort.jpg');
  background-size:cover;background-position:center;}
.photo-band h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;margin-bottom:10px;max-width:720px;}
.photo-band p{color:#e0e7ff;font-size:16px;max-width:600px;margin:0 auto 20px;}
.photo-band .btn{background:#fff;color:var(--accent);border:0;}

/* S1 redesign — editorial type: Newsreader display headings + big numbers,
   IBM Plex Mono eyebrows. Appended so it wins over earlier weight declarations. */
.hero h1,.lab-hero h1,.sec-head h2,.lab h2,.cta-band h2,.photo-band h2,.price,.glass .v{
  font-family:var(--font-serif);font-weight:600;
}
.eyebrow{font-family:var(--font-mono);}

/* ── The seal — the formal circular mark. It has no background rectangle; its
   own paper-colored fills blend into any paper (--bg) surface, so it sits bare
   on the footer, the home "seal of proof" band, and the Career Lab hero. ──── */
.foot-seal{text-align:center;padding:2px 0 18px;}
.foot-seal img{width:76px;height:76px;display:inline-block;opacity:.96;}
.seal-band{text-align:center;}
.seal-band .seal-mark{width:128px;height:128px;display:block;margin:0 auto 18px;}
.seal-band h2{font-family:var(--font-serif);font-size:clamp(26px,4vw,34px);font-weight:600;letter-spacing:-.01em;margin:6px auto 10px;max-width:620px;}
.seal-band p{font-size:17px;color:var(--ink-2);max-width:560px;margin:0 auto;}
.lab-hero .lab-seal{width:96px;height:96px;display:block;margin:0 auto 4px;}
