/* ═══════════════════════════════════════════════════════════
   MIN15X — STYLESHEET
   Theme: Paper-White / Ollama-Inspired / Black & White
   Palette: Pure black / White canvas / Neutral grays
   Typography: SF Pro Rounded (headings) + system-ui (body) + ui-monospace (code)
   Key: Pill geometry, hairline borders, no shadows, no gradients
╔═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  --canvas:       #ffffff;
  --surface-soft: #fafafa;
  --surface-card: #ffffff;
  --surface-dark: #171717;

  --primary:       #000000;
  --primary-deep:  #090909;
  --on-primary:    #ffffff;

  --ink:          #000000;
  --charcoal:     #525252;
  --body:         #737373;
  --mute:         #a3a3a3;
  --on-dark:      #ffffff;
  --on-dark-mute: rgba(255,255,255,0.7);

  --hairline:       #e5e5e5;
  --hairline-strong:#d4d4d4;

  --focus-ring: rgba(0,0,0,0.15);

  --ff-display: 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
  --ff-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:    ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  --sp2:  8px;  --sp3: 12px;  --sp4: 16px;
  --sp5: 20px;  --sp6: 24px;  --sp8: 32px;
  --sp10: 40px; --sp12: 48px; --sp16: 64px;
  --sp20: 80px; --sp22: 88px; --sp24: 96px;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px;

  --t1: 150ms ease;
  --t2: 250ms ease;
  --t3: 400ms ease;
  --tl: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h: 56px;
  --max-w: 720px;
  --max-w-wide: 960px;
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.5;
  color:var(--body);
  background:var(--canvas);
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input,select,textarea { font-family:inherit; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
::selection { background:var(--surface-soft); color:var(--ink); }

/* ─────────────────────────────────────────
   LAYOUT
───────────────────────────────────────── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--sp6); }
@media(min-width:768px)  { .container { padding:0 var(--sp6); } }
@media(min-width:1280px) { .container { padding:0 var(--sp6); } }
.container--wide { max-width:var(--max-w-wide); }
.sp { padding: clamp(var(--sp16), 10vw, var(--sp22)) 0; }

/* ─────────────────────────────────────────
   TYPE HELPERS
───────────────────────────────────────── */
.eyebrow {
  font-family:var(--ff-display);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--charcoal);
  margin-bottom:var(--sp3);
}

.st {
  font-family:var(--ff-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight:500;
  line-height:1.15;
  color:var(--ink);
  margin-bottom:var(--sp4);
  letter-spacing:0;
}
.st strong { font-weight:600; }

.ss {
  font-size:16px;
  color:var(--body);
  line-height:1.6;
  max-width:560px;
}

.shd { margin-bottom:clamp(var(--sp10),6vw,var(--sp16)); }
.shd.center { text-align:center; }
.shd.center .ss { margin:0 auto; }

/* ─────────────────────────────────────────
   BUTTONS — pills
───────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 22px;
  border-radius:var(--r-full);
  font-family:var(--ff-body);
  font-weight:500;
  font-size:14px;
  line-height:1;
  letter-spacing:0;
  transition:all var(--t2);
  cursor:pointer; white-space:nowrap;
  border:1px solid transparent;
  height:36px;
}
.btn--primary {
  background:var(--primary); color:var(--on-primary);
  border-color:var(--primary);
}
.btn--primary:hover { background:var(--primary-deep); }
.btn--outline {
  background:var(--canvas); color:var(--ink);
  border-color:var(--hairline-strong);
}
.btn--outline:hover { border-color:var(--ink); }
.btn--full { width:100%; justify-content:center; }
.btn--sm { padding:6px 16px; font-size:12px; height:30px; }

/* ─────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(20px);
  transition:opacity var(--tl), transform var(--tl);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal--d1 { transition-delay:100ms; }
.reveal--d2 { transition-delay:220ms; }
.reveal--d3 { transition-delay:340ms; }
.reveal--d4 { transition-delay:460ms; }

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  background:var(--canvas);
  border-bottom:1px solid transparent;
  transition:border-color var(--t3);
}
.nav.scrolled { border-color:var(--hairline); }
.nav__inner {
  max-width:var(--max-w-wide); margin:0 auto; padding:0 var(--sp6);
  height:100%; display:flex; align-items:center; gap:var(--sp6);
}

.nav-logo {
  display:block;
  height:36px;
  width:auto;
  flex-shrink:0;
}

.nav__links {
  display:none; align-items:center;
  gap:var(--sp5); margin-left:auto;
}
@media(min-width:850px) { .nav__links { display:flex; } }
@media(max-width:849px) { .nav__links { display:none !important; } }

.nav__link {
  font-size:14px; font-weight:500;
  color:var(--body); letter-spacing:0;
  transition:color var(--t1);
  position:relative;
  white-space:nowrap;
}
.nav__link:hover { color:var(--ink); }
.nav__link.active { color:var(--ink); }
.nav__link.active::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:1.5px; background:var(--ink); border-radius:1px;
}

.nav__link--cta {
  background:var(--primary); color:var(--on-primary) !important;
  padding:7px 18px; border-radius:var(--r-full);
  font-size:13px; font-weight:500;
  height:34px; display:flex; align-items:center;
}
.nav__link--cta:hover { background:var(--primary-deep); }

.nav__burger {
  display:flex; flex-direction:column;
  gap:5px; padding:var(--sp2); margin-left:auto;
  flex-shrink:0;
}
@media(min-width:850px) { .nav__burger { display:none; } }
.nav__burger span {
  display:block; width:20px; height:2px;
  background:var(--ink);
  transition:transform var(--t2), opacity var(--t2);
  border-radius:2px;
}
.nav__burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity:0; }
.nav__burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav__mobile {
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:99;
  display:flex; flex-direction:column;
  background:var(--canvas);
  border-top:1px solid var(--hairline);
  max-height:0; overflow:hidden;
  transition:max-height var(--t3);
}
.nav__mobile.open { max-height:400px; }
.nav__mob-link {
  padding:var(--sp4) var(--sp6);
  font-size:15px; color:var(--body);
  border-bottom:1px solid var(--hairline);
  transition:color var(--t1), background var(--t1);
}
.nav__mob-link:hover { color:var(--ink); background:var(--surface-soft); }
.nav__mob-cta {
  background:var(--primary); color:var(--on-primary) !important;
  font-weight:500; text-align:center;
  padding:var(--sp4) var(--sp6);
  margin:var(--sp4) var(--sp6);
  border-radius:var(--r-full);
  border-bottom:none;
  font-size:14px;
}
.nav__mob-cta:hover { background:var(--primary-deep); }

/* ─────────────────────────────────────────
   PAGE HEADER (inner pages)
───────────────────────────────────────── */
.page-hd {
  padding: clamp(100px, 14vw, 140px) 0 clamp(var(--sp10), 5vw, var(--sp16));
  text-align:center;
  background:var(--canvas);
}
.page-hd .st { max-width:600px; margin:0 auto var(--sp4); }
.page-hd .ss { margin:0 auto; }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  position:relative; min-height:85vh;
  background:var(--canvas);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
  padding-top:var(--nav-h);
}

.hero__canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0.35;
}

.hero__inner {
  position:relative; z-index:2;
  text-align:center;
  padding:var(--sp16) var(--sp6);
  max-width:var(--max-w); width:100%;
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}

.hero__hl {
  font-family:var(--ff-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight:500; line-height:1.12;
  color:var(--ink);
  margin-bottom:var(--sp6);
  letter-spacing:-0.01em;
  max-width:640px;
}

/* ─────────────────────────────────────────
   PONDERING (home)
───────────────────────────────────────── */
.pondering {
  max-width:600px; margin:0 auto;
}

.pondering-q {
  font-family:var(--ff-display);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight:500;
  color:var(--ink);
  line-height:1.3;
  margin-bottom:var(--sp8);
}

.pondering-body p {
  font-size:17px;
  color:var(--body);
  line-height:1.7;
  margin-bottom:var(--sp5);
}

.pondering-punch {
  margin-top:var(--sp8);
  padding-top:var(--sp6);
  border-top:1px solid var(--hairline);
}
.pondering-punch p {
  font-family:var(--ff-display);
  font-size:1.1rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
}

/* ─────────────────────────────────────────
   SERVICES OVERVIEW (home)
───────────────────────────────────────── */
.svc-grid {
  display:grid; grid-template-columns:1fr; gap:var(--sp4);
}
@media(min-width:640px)  { .svc-grid { grid-template-columns:1fr 1fr; } }
@media(min-width:1024px) { .svc-grid { grid-template-columns:1fr 1fr 1fr 1fr; } }

.svc-card {
  background:var(--surface-card);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp6);
  transition:border-color var(--t2);
}
.svc-card:hover { border-color:var(--hairline-strong); }

.svc-tag { font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); margin-bottom:var(--sp2); }
.svc-title { font-family:var(--ff-display); font-size:1.05rem; font-weight:500; color:var(--ink); line-height:1.25; margin-bottom:var(--sp3); }
.svc-body { font-size:13.5px; color:var(--body); line-height:1.6; margin-bottom:var(--sp4); }

.svc-list { display:flex; flex-direction:column; gap:var(--sp2); padding-top:var(--sp4); border-top:1px solid var(--hairline); }
.svc-list li { font-size:12.5px; color:var(--charcoal); padding-left:var(--sp5); position:relative; line-height:1.5; }
.svc-list li::before { content:'\2713'; position:absolute; left:0; color:var(--charcoal); font-size:11px; top:1px; }

/* ─────────────────────────────────────────
   SERVICES PAGE — TIERS
───────────────────────────────────────── */
.tier-grid {
  display:grid; gap:var(--sp5);
}
.tier-card {
  background:var(--surface-card);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp8) var(--sp6);
  position:relative; overflow:hidden;
  transition:border-color var(--t2);
}
.tier-card:hover { border-color:var(--hairline-strong); }

.tier-label {
  display:inline-block;
  font-size:10px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:var(--r-full);
  background:var(--surface-soft);
  color:var(--charcoal);
  margin-bottom:var(--sp4);
}
.tier-hl {
  font-family:var(--ff-display);
  font-size:1.5rem; font-weight:500;
  color:var(--ink); line-height:1.2; margin-bottom:var(--sp3);
}
.tier-body { font-size:14px; color:var(--body); line-height:1.7; margin-bottom:var(--sp4); }
.tier-list { display:flex; flex-direction:column; gap:var(--sp2); margin-bottom:var(--sp6); }
.tier-list li { font-size:13px; color:var(--charcoal); padding-left:var(--sp5); position:relative; line-height:1.5; }
.tier-list li::before { content:'\2713'; position:absolute; left:0; color:var(--charcoal); font-size:11px; top:2px; }

/* ─────────────────────────────────────────
   FAQ PAGE
───────────────────────────────────────── */
.faq-category { margin-bottom:var(--sp12); }
.faq-cat-ttl {
  font-family:var(--ff-display);
  font-size:1.15rem; font-weight:600;
  color:var(--ink); margin-bottom:var(--sp5);
  letter-spacing:0;
}

.faq-item {
  border-bottom:1px solid var(--hairline);
  padding:var(--sp4) 0;
}
.faq-item:first-of-type { border-top:1px solid var(--hairline); }

.faq-q {
  display:flex; align-items:flex-start; gap:var(--sp4);
  cursor:pointer;
  font-family:var(--ff-display);
  font-size:1.05rem; font-weight:500;
  color:var(--ink); line-height:1.35;
  transition:color var(--t1);
  user-select:none;
}
.faq-q:hover { color:var(--charcoal); }
.faq-q-icon {
  flex-shrink:0; width:18px; height:18px;
  color:var(--charcoal); margin-top:3px;
  transition:transform var(--t2);
}
.faq-item.open .faq-q-icon { transform:rotate(45deg); }

.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height var(--t3), opacity var(--t2);
  opacity:0;
}
.faq-item.open .faq-a {
  max-height:500px; opacity:1;
}
.faq-a-inner {
  padding:var(--sp3) 0 0 calc(18px + var(--sp4));
  font-size:15px; color:var(--body); line-height:1.7;
}

/* ─────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────── */
.con-inner {
  display:grid; grid-template-columns:1fr; gap:var(--sp12);
}
@media(min-width:768px) { .con-inner { grid-template-columns:1fr 1.3fr; } }

.con-body { font-size:15px; color:var(--body); line-height:1.7; margin-bottom:var(--sp8); }

.con-details { display:flex; flex-direction:column; gap:var(--sp3); }
.con-item {
  display:flex; align-items:center; gap:var(--sp4);
  padding:var(--sp4); border-radius:var(--r-lg);
  transition:background var(--t1);
}
.con-item:hover { background:var(--surface-soft); }

.ci-ico {
  width:36px; height:36px; border-radius:50%;
  background:var(--surface-soft); display:flex; align-items:center; justify-content:center;
  color:var(--charcoal); flex-shrink:0;
}
.ci-ico svg { width:16px; height:16px; }
.ci-lbl { display:block; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); margin-bottom:2px; }
.ci-val { display:block; font-size:14px; color:var(--charcoal); }

.con-form {
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp8);
}
.f-row { display:grid; grid-template-columns:1fr; gap:var(--sp4); }
@media(min-width:480px) { .f-row { grid-template-columns:1fr 1fr; } }

.fg { display:flex; flex-direction:column; gap:5px; margin-bottom:var(--sp4); }

.fl { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--charcoal); }

.fi, .fs, .ft {
  width:100%; padding:11px var(--sp5);
  border:1px solid var(--hairline); border-radius:var(--r-full);
  font-size:14px; color:var(--ink);
  background:var(--canvas); outline:none;
  transition:border-color var(--t1);
  appearance:none;
}
.fi:focus, .fs:focus, .ft:focus {
  border-color:var(--ink);
}
.fi.err, .fs.err, .ft.err { border-color:var(--ink); }
.fi::placeholder, .ft::placeholder { color:var(--mute); }

.fs {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23A3A3A3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:16px;
  padding-right:40px; cursor:pointer;
}
.ft { resize:vertical; min-height:100px; border-radius:var(--r-lg); }
.f-note { text-align:center; font-size:12px; color:var(--mute); margin-top:var(--sp4); }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.footer {
  background:var(--canvas);
  padding: clamp(var(--sp8), 4vw, var(--sp12)) 0 var(--sp6);
  border-top:1px solid var(--hairline);
}
.ft-inner {
  display:flex; flex-direction:column; gap:var(--sp8); margin-bottom:var(--sp8);
  align-items:center; text-align:center;
}
@media(min-width:640px) {
  .ft-inner { flex-direction:row; justify-content:space-between; text-align:left; }
}

.ft-tag { font-size:12px; color:var(--body); margin-top:var(--sp2); }

.ft-nav { display:flex; flex-wrap:wrap; gap:var(--sp5); justify-content:center; }
@media(min-width:640px) { .ft-nav { gap:var(--sp8); } }

.fn-col { text-align:center; }
@media(min-width:640px) { .fn-col { text-align:left; } }
.fn-ttl { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); margin-bottom:var(--sp3); }
.fn-lnk { display:block; font-size:13px; color:var(--body); margin-bottom:var(--sp2); transition:color var(--t1); }
.fn-lnk:hover { color:var(--ink); }

.ft-btm {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp3);
  padding-top:var(--sp6); border-top:1px solid var(--hairline);
  font-size:12px; color:var(--mute);
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media(max-width:640px) {
  .hero__hl { font-size:1.8rem; }
  .st { font-size:1.6rem; }
}

/* ─────────────────────────────────────────
   ARTICLE BODY (learn / how-to pages)
───────────────────────────────────────── */
.article-body { max-width:640px; margin:0 auto; }
.article-body h2 {
  font-family:var(--ff-display);
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight:500; line-height:1.25;
  color:var(--ink); margin-bottom:var(--sp4);
  margin-top:var(--sp10);
}
.article-body h2:first-child { margin-top:0; }
.article-body h3 {
  font-family:var(--ff-display);
  font-size:1.05rem; font-weight:500;
  color:var(--ink); line-height:1.3;
  margin-bottom:var(--sp3); margin-top:var(--sp8);
}
.article-body p {
  font-size:16px; color:var(--body);
  line-height:1.7; margin-bottom:var(--sp4);
}
.article-body ul, .article-body ol {
  margin-bottom:var(--sp5);
  padding-left:var(--sp5);
}
.article-body li {
  font-size:15px; color:var(--charcoal);
  line-height:1.6; margin-bottom:var(--sp2);
}
.article-body ul li { list-style:disc; }
.article-body ol li { list-style:decimal; }
.article-body strong { color:var(--ink); font-weight:500; }
.article-body a { color:var(--ink); text-decoration:underline; }
.article-body a:hover { color:var(--charcoal); }

.article-hr {
  border:none; border-top:1px solid var(--hairline);
  margin:var(--sp8) 0;
}

/* ─────────────────────────────────────────
   COMPARISON GRID (compare pages)
───────────────────────────────────────── */
.compare-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp6);
}
@media(max-width:640px) { .compare-grid { grid-template-columns:1fr; } }

.compare-card {
  background:var(--surface-card);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp8) var(--sp6);
  transition:border-color var(--t2);
}
.compare-card:hover { border-color:var(--hairline-strong); }

.compare-vs {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display);
  font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--mute); position:relative;
}
@media(min-width:641px) {
  .compare-vs {
    position:absolute; width:36px; height:36px;
    left:50%; top:50%; transform:translate(-50%,-50%);
    background:var(--canvas); border:1px solid var(--hairline);
    border-radius:50%; z-index:2;
    margin:0;
  }
  .compare-card-wrap { position:relative; }
}
@media(max-width:640px) {
  .compare-vs { margin:var(--sp3) 0; }
}

.compare-ttl {
  font-family:var(--ff-display);
  font-size:1.2rem; font-weight:500;
  color:var(--ink); line-height:1.2;
  margin-bottom:var(--sp3);
}
.compare-sub {
  font-size:13px; color:var(--mute);
  margin-bottom:var(--sp4);
}
.compare-body { font-size:14px; color:var(--body); line-height:1.6; margin-bottom:var(--sp4); }
.compare-list { display:flex; flex-direction:column; gap:var(--sp2); margin-bottom:var(--sp5); }
.compare-list li {
  font-size:13px; color:var(--charcoal);
  padding-left:var(--sp5); position:relative; line-height:1.5;
}
.compare-list li::before {
  content:'\2713'; position:absolute; left:0;
  color:var(--charcoal); font-size:11px; top:2px;
}

.compare-when {
  font-size:11px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--mute); margin-bottom:var(--sp2);
}
.compare-rec {
  font-size:14px; color:var(--ink);
  line-height:1.6; font-weight:450;
}

/* ─────────────────────────────────────────
   RELATED LINKS
───────────────────────────────────────── */
.related-links {
  display:flex; flex-wrap:wrap; gap:var(--sp3);
  margin-top:var(--sp6);
  padding-top:var(--sp6);
  border-top:1px solid var(--hairline);
}
.related-link {
  font-size:13px; color:var(--body);
  padding:6px 14px; border:1px solid var(--hairline);
  border-radius:var(--r-full);
  transition:all var(--t1);
}
.related-link:hover { border-color:var(--ink); color:var(--ink); }

/* ─────────────────────────────────────────
   HERO BG — DOT GRID
───────────────────────────────────────── */
.hero__bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0.25;
  background-image: radial-gradient(circle, var(--hairline-strong) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

/* ─────────────────────────────────────────
   HERO SUBHEADLINE + ACTIONS
───────────────────────────────────────── */
.hero__sub {
  font-size:16px;
  color:var(--body);
  line-height:1.6;
  margin-bottom:var(--sp8);
  max-width:520px;
}
@media(max-width:640px) {
  .hero__sub br { display:none; }
}

.hero__actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp4);
  flex-wrap:wrap;
}

.hero__sec-link {
  font-size:13px;
  color:var(--mute);
  border-color:transparent;
  padding:9px 16px;
}
.hero__sec-link:hover { color:var(--charcoal); border-color:var(--hairline-strong); }

/* ─────────────────────────────────────────
   TRUST STRIP
───────────────────────────────────────── */
.trust-strip {
  padding:var(--sp6) 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.trust-strip__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp3) var(--sp8);
}
@media(min-width:768px) {
  .trust-strip__grid { grid-template-columns:1fr 1fr 1fr 1fr; }
}
.trust-item {
  font-size:12px;
  font-weight:500;
  color:var(--charcoal);
  line-height:1.4;
  letter-spacing:0;
  padding-left:var(--sp4);
  position:relative;
}
.trust-item::before {
  content:'';
  position:absolute;
  left:0;
  top:6px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--charcoal);
  opacity:0.4;
}

/* ─────────────────────────────────────────
   PHILOSOPHY
───────────────────────────────────────── */
.philosophy {
  text-align:center;
  max-width:600px;
  margin:0 auto;
}
.philosophy__eyebrow {
  margin-bottom:var(--sp8);
}
.philosophy__body p {
  font-family:var(--ff-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight:450;
  color:var(--ink);
  line-height:1.6;
  margin-bottom:var(--sp4);
}
.philosophy__body strong {
  font-weight:600;
}
.philosophy__close {
  font-family:var(--ff-display);
  font-size:1.1rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
  margin-top:var(--sp8);
  padding-top:var(--sp6);
  border-top:1px solid var(--hairline);
  text-align:center;
}

/* ─────────────────────────────────────────
   WHAT CHANGES
───────────────────────────────────────── */
.changes-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp4);
}
@media(min-width:640px) {
  .changes-grid { grid-template-columns:1fr 1fr; }
}
@media(min-width:1024px) {
  .changes-grid { grid-template-columns:1fr 1fr 1fr 1fr; }
}
.change-card {
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp6);
  transition:border-color var(--t2);
}
.change-card:hover { border-color:var(--hairline-strong); }
.change-num {
  display:block;
  font-family:var(--ff-display);
  font-size:2rem;
  font-weight:500;
  color:var(--mute);
  line-height:1;
  margin-bottom:var(--sp4);
}
.change-title {
  font-family:var(--ff-display);
  font-size:1.05rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.25;
  margin-bottom:var(--sp2);
}
.change-body {
  font-size:13.5px;
  color:var(--body);
  line-height:1.6;
}

/* ─────────────────────────────────────────
   HOW WE THINK
───────────────────────────────────────── */
.think-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp4);
}
@media(min-width:768px) {
  .think-grid { grid-template-columns:1fr 1fr 1fr; }
}
.think-card {
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp6);
  text-align:center;
  transition:border-color var(--t2);
}
.think-card:hover { border-color:var(--hairline-strong); }
.think-title {
  font-family:var(--ff-display);
  font-size:1.1rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.25;
  margin-bottom:var(--sp2);
}
.think-body {
  font-size:14px;
  color:var(--body);
  line-height:1.6;
}

/* ─────────────────────────────────────────
   PROCESS
───────────────────────────────────────── */
.process-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp4);
}
@media(min-width:768px) {
  .process-grid { grid-template-columns:1fr 1fr 1fr; }
}
.process-step {
  display:flex;
  align-items:flex-start;
  gap:var(--sp5);
  padding:var(--sp6);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  transition:border-color var(--t2);
}
.process-step:hover { border-color:var(--hairline-strong); }
.process-num {
  flex-shrink:0;
  font-family:var(--ff-display);
  font-size:2rem;
  font-weight:500;
  color:var(--mute);
  line-height:1;
  margin-top:2px;
}
.process-content { flex:1; }
.process-title {
  font-family:var(--ff-display);
  font-size:1.1rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.25;
  margin-bottom:var(--sp2);
}
.process-body {
  font-size:14px;
  color:var(--body);
  line-height:1.6;
}

/* ─────────────────────────────────────────
   PROOF
───────────────────────────────────────── */
.proof-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp5);
  padding:var(--sp8) var(--sp6);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  text-align:center;
}
@media(min-width:768px) {
  .proof-card {
    flex-direction:row;
    justify-content:center;
    text-align:left;
  }
}
.proof-col {
  flex:1;
  max-width:240px;
}
.proof-col--result .proof-text {
  color:var(--ink);
  font-weight:500;
}
.proof-label {
  font-size:10px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:var(--sp2);
}
.proof-text {
  font-size:15px;
  color:var(--body);
  line-height:1.6;
}
.proof-arrow {
  font-size:1.2rem;
  color:var(--mute);
  flex-shrink:0;
}
@media(max-width:767px) {
  .proof-arrow { transform:rotate(90deg); }
}

/* ─────────────────────────────────────────
   FINAL CTA
───────────────────────────────────────── */
.cta-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp4);
  max-width:720px;
  margin:0 auto;
}
@media(min-width:768px) {
  .cta-grid { grid-template-columns:1fr 1fr 1fr; }
}
.cta-card {
  display:flex;
  flex-direction:column;
  gap:var(--sp3);
  padding:var(--sp6);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  text-align:center;
  transition:border-color var(--t2), background var(--t2);
}
.cta-card:hover {
  border-color:var(--hairline-strong);
  background:var(--surface-soft);
}
.cta-card--primary {
  background:var(--surface-dark);
  border-color:var(--surface-dark);
}
.cta-card--primary:hover {
  background:var(--surface-dark);
  border-color:var(--surface-dark);
}
.cta-card--primary .cta-card-title { color:var(--on-dark); }
.cta-card--primary .cta-card-body { color:var(--on-dark-mute); }
.cta-card--primary .cta-card-link { color:var(--on-dark); }
.cta-card-title {
  font-family:var(--ff-display);
  font-size:1.05rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.25;
}
.cta-card-body {
  font-size:13px;
  color:var(--body);
  line-height:1.6;
  flex:1;
}
.cta-card-link {
  font-size:12px;
  font-weight:500;
  color:var(--charcoal);
  letter-spacing:0.05em;
}

/* ─────────────────────────────────────────
   RESPONSIVE — NEW SECTIONS OVERRIDES
───────────────────────────────────────── */
@media(max-width:640px) {
  .philosophy__body p {
    font-size:1.05rem;
  }
  .change-num, .process-num {
    font-size:1.6rem;
  }
}

/* ─────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}