*{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:#0E0E12;
    color:var(--text);
    font-family:'DM Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
    overflow-x:hidden;
  }

  /* ---------- built background surface (mesh glow + grid + grain + vignette) ---------- */
  .bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
  .bg .mesh{ position:absolute; inset:0;
    background:
      radial-gradient(40% 50% at 88% 8%, rgba(255,90,31,0.16) 0%, transparent 60%),
      radial-gradient(36% 44% at 84% 70%, rgba(255,90,31,0.07) 0%, transparent 64%),
      radial-gradient(120% 70% at 50% -10%, rgba(120,110,150,0.14) 0%, transparent 58%); }
  /* grid + cursor-spotlight are now per-section (see PER-SECTION GRID below) */
  .bg .grid, .bg .spot{ display:none; }
  .bg .grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:soft-light; background-size:200px 200px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .bg .vig{ position:absolute; inset:0; box-shadow:inset 0 0 240px 60px rgba(7,7,10,0.55); }

  /* ---------- layout ---------- */
  .wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 28px; }
  section{ position:relative; }
  .sec{ padding:84px 0; border-top:1px solid rgba(255,255,255,0.06); }
  .sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:30px; }
  .sec-num{ font-family:'DM Sans',ui-monospace,monospace; font-size:10px; letter-spacing:1.5px;
    text-transform:uppercase; color:#6f6c78; white-space:nowrap; }

  /* eyebrow: short orange bar + mono label */
  .eyebrow{ display:inline-flex; align-items:center; gap:11px; margin-bottom:18px;
    font-family:'DM Sans',ui-monospace,monospace; font-size:10px; font-weight:600; letter-spacing:1.6px;
    text-transform:uppercase; color:#FF7A45; }
  .eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--orange);
    box-shadow:0 0 10px rgba(255,90,31,.55); }

  h1,h2,h3{ font-family:'DM Sans',sans-serif; color:var(--cream); letter-spacing:-0.03em; line-height:1.05; font-weight:700; }
  h1{ font-size:clamp(40px,6vw,68px); }
  h2{ font-size:clamp(28px,3.6vw,42px); }
  h3{ font-size:18px; letter-spacing:-0.01em; line-height:1.25; }
  .lead{ font-size:clamp(16px,1.5vw,19px); color:#b9b6c0; max-width:60ch; line-height:1.62; }
  .orange{ color:var(--orange); }
  .o-text{ color:#FF7A45; }
  p{ color:#a8a5b0; }
  .mono{ font-family:'DM Sans',ui-monospace,monospace; }

  /* ---------- nav ---------- */
  header.nav{ position:sticky; top:0; z-index:50;
    background:rgba(14,14,18,0.72); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
    border-bottom:1px solid rgba(255,255,255,0.07); }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
  .nav .logo{ height:21px; width:auto; display:block; }
  .nav-links{ display:flex; align-items:center; gap:26px; }
  .nav-links a{ color:#b3b0bb; text-decoration:none; font-size:13.5px; font-weight:500; transition:color .2s var(--ease); }
  .nav-links a:hover{ color:var(--cream); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }

  /* buttons */
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:11px;
    font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
  .btn-solid{ background:var(--orange); color:#fff; border:1px solid var(--orange);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 26px rgba(255,90,31,0.28); }
  .btn-solid:hover{ transform:translateY(-1px); filter:brightness(1.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.34), 0 12px 36px rgba(255,90,31,0.42); }
  .btn-solid:active{ transform:translateY(0); }
  .btn-ghost{ background:rgba(255,255,255,0.04); color:var(--cream); border:1px solid rgba(255,255,255,0.14); }
  .btn-ghost:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,0.30); background:rgba(255,255,255,0.07); }
  .btn-ghost:active{ transform:translateY(0); }
  .btn:focus-visible{ outline:2px solid #FF9A6C; outline-offset:3px; }
  .nav-links a:focus-visible{ outline:2px solid #FF9A6C; outline-offset:4px; border-radius:4px; }

  /* glass card */
  .card{ background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.10); border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 24px rgba(0,0,0,0.34); }

  /* ---------- hero ---------- */
  .hero{ padding:74px 0 64px; }
  .hero h1{ margin:8px 0 22px; max-width:14ch; }
  .hero .lead{ margin-bottom:26px; }
  .callout-strip{ position:relative; border-radius:14px; padding:20px 24px 20px 26px; margin:26px 0 30px;
    background:linear-gradient(100deg, rgba(255,90,31,0.10), rgba(255,90,31,0.02) 70%);
    border:1px solid rgba(255,120,70,0.20); max-width:74ch; }
  .callout-strip::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px;
    background:var(--orange); box-shadow:0 0 14px rgba(255,90,31,.6); }
  .callout-strip p{ color:#e7ddd0; font-size:16px; line-height:1.6; }
  .callout-strip strong{ color:var(--cream); font-weight:600; }
  .hero-actions{ display:flex; gap:13px; flex-wrap:wrap; margin-bottom:46px; }
  .stat-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .stat{ padding:20px 22px; }
  .stat .big{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:22px; color:#FF7A45; letter-spacing:-0.02em; }
  .stat .sub{ margin-top:7px; font-family:'DM Sans',ui-monospace,monospace; font-size:9.5px; letter-spacing:1px;
    text-transform:uppercase; color:#8a8794; line-height:1.5; }

  /* proof strip */
  .proof-strip{ display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; padding:22px 26px; margin-top:30px; }
  .proof-strip .pf{ display:flex; flex-direction:column; }
  .proof-strip .pf b{ font-family:'DM Sans',sans-serif; color:var(--cream); font-size:19px; font-weight:700; letter-spacing:-0.02em; }
  .proof-strip .pf span{ font-family:'DM Sans',monospace; font-size:9px; letter-spacing:.8px; text-transform:uppercase; color:#8a8794; margin-top:3px; }
  .proof-strip .div{ width:1px; height:34px; background:rgba(255,255,255,0.10); }

  /* ---------- pillars ---------- */
  .callout-box{ border-radius:16px; padding:22px 26px; margin:30px 0;
    background:linear-gradient(120deg, rgba(255,90,31,0.09), rgba(255,90,31,0.02));
    border:1px solid rgba(255,120,70,0.26); }
  .callout-box h3{ color:#FFE7D8; margin-bottom:6px; }
  .callout-box p{ color:#d6cfc6; font-size:14.5px; }
  .pillars{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .pillar{ padding:24px 24px 26px; display:flex; gap:18px; }
  .pillar .pn{ flex:none; width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    font-family:'DM Sans',monospace; font-size:12px; font-weight:600; color:#FF7A45;
    background:rgba(255,90,31,0.10); border:1px solid rgba(255,120,70,0.30); }
  .pillar h3{ margin-bottom:8px; }
  .pillar p{ font-size:14.5px; line-height:1.58; }
  .honest{ margin-top:14px; padding:22px 26px; border-radius:16px;
    background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.10); }
  .honest h3{ margin-bottom:7px; color:var(--cream); }
  .honest p{ font-size:14.5px; }

  /* ---------- feature list ---------- */
  .deep{ margin-top:8px; }
  .deep + .deep{ margin-top:64px; }
  .feat-list{ list-style:none; display:grid; gap:16px; margin:24px 0 30px; max-width:88ch; }
  .feat-list li{ display:flex; gap:13px; align-items:flex-start; }
  .feat-list .sq{ flex:none; width:9px; height:9px; border-radius:2px; margin-top:7px; background:var(--orange);
    box-shadow:0 0 9px rgba(255,90,31,.5); }
  .feat-list p{ font-size:15px; line-height:1.58; color:#a8a5b0; }
  .feat-list strong{ color:var(--cream); font-weight:600; }

  /* timeline */
  .timeline{ padding:26px 30px 28px; }
  .tl-label{ font-family:'DM Sans',monospace; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:#6f6c78; margin-bottom:24px; }
  .tl-track{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .tl-track::before{ content:""; position:absolute; top:7px; left:6%; right:6%; height:1px; background:rgba(255,255,255,0.14); }
  .tl-step{ position:relative; text-align:left; }
  .tl-dot{ width:15px; height:15px; border-radius:50%; border:2px solid #5a5764; background:#0E0E12; position:relative; z-index:2; margin-bottom:14px; }
  .tl-step.live .tl-dot{ border-color:var(--orange); background:var(--orange); box-shadow:0 0 14px rgba(255,90,31,.7); }
  .tl-step .t{ font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px; color:var(--cream); margin-bottom:5px; }
  .tl-step.live .t{ color:#FF7A45; }
  .tl-step .d{ font-size:12.5px; line-height:1.5; color:#8e8b97; }

  /* two-col */
  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
  .two-col .card{ padding:24px; }
  .two-col h3{ margin-bottom:9px; }
  .two-col p{ font-size:14.5px; line-height:1.58; }

  /* accent proof callout */
  .accent-callout{ position:relative; margin-top:14px; border-radius:16px; padding:24px 26px; overflow:hidden;
    background:linear-gradient(165deg, rgba(255,90,31,0.15), rgba(255,90,31,0.04));
    border:1px solid rgba(255,150,110,0.32);
    box-shadow:inset 0 1px 0 rgba(255,214,184,0.22), 0 14px 44px rgba(0,0,0,0.36), 0 0 40px rgba(255,90,31,0.12); }
  .accent-callout h3{ color:#FFEEE3; margin-bottom:8px; }
  .accent-callout p{ color:#f0e2d8; font-size:15px; line-height:1.6; }
  .accent-callout b{ color:#fff; }

  /* includes */
  .includes-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:14px; align-items:start; }
  .includes{ padding:28px 30px; }
  .includes .tag{ font-family:'DM Sans',monospace; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:#FF7A45; margin-bottom:10px; }
  .includes h3{ font-size:21px; margin-bottom:6px; }
  .includes .sub{ color:#9b98a4; font-size:14px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.09); }
  .inc-list{ list-style:none; display:grid; gap:13px; }
  .inc-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:#c3c0ca; line-height:1.5; }
  .inc-list .dot{ flex:none; width:7px; height:7px; border-radius:50%; margin-top:7px; background:var(--orange); box-shadow:0 0 8px rgba(255,90,31,.5); }
  .ask{ padding:28px 30px; }
  .ask .tag{ font-family:'DM Sans',monospace; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:#6f6c78; margin-bottom:16px; }
  .ask-item{ margin-bottom:22px; }
  .ask-item:last-child{ margin-bottom:0; }
  .ask-item h3{ font-size:15.5px; margin-bottom:7px; }
  .ask-item p{ font-size:13.5px; line-height:1.55; }

  /* best fit */
  .fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
  .fit{ padding:26px 28px; }
  .fit.yes{ border-color:rgba(63,200,120,0.22); }
  .fit .fh{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .fit .fh i{ font-size:20px; }
  .fit.yes .fh i{ color:var(--emerald); }
  .fit.no .fh i{ color:#7c7c86; }
  .fit .fh span{ font-family:'DM Sans',sans-serif; font-weight:600; font-size:15px; color:var(--cream); }
  .fit ul{ list-style:none; display:grid; gap:14px; }
  .fit li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:#b1aeb9; }
  .fit li i{ font-size:16px; margin-top:2px; flex:none; }
  .fit.yes li i{ color:var(--emerald); }
  .fit.no li i{ color:#6a6a74; }
  .icp-note{ margin-top:16px; text-align:center; font-size:13.5px; color:#8e8b97; }
  .icp-note b{ color:#c3c0ca; font-weight:600; }

  /* onboarding */
  .steps{ display:grid; gap:12px; }
  .step{ display:flex; gap:18px; align-items:flex-start; padding:22px 24px; }
  .step .sn{ flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:'DM Sans',monospace; font-size:13px; font-weight:600; color:#FF7A45;
    background:rgba(255,90,31,0.08); border:1px solid rgba(255,120,70,0.32); }
  .step h3{ font-size:15.5px; margin-bottom:6px; }
  .step .wk{ color:#FF7A45; }
  .step p{ font-size:14px; line-height:1.55; }

  /* faq */
  .faq{ display:grid; gap:11px; max-width:860px; margin:0 auto; }
  details.q{ background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.10); border-radius:14px; overflow:hidden;
    transition:border-color .25s var(--ease), background .25s var(--ease); }
  details.q[open]{ border-color:rgba(255,120,70,0.26); background:rgba(255,255,255,0.05); }
  details.q summary{ list-style:none; cursor:pointer; padding:19px 22px; display:flex; justify-content:space-between; gap:18px; align-items:center;
    font-family:'DM Sans',sans-serif; font-weight:600; font-size:15.5px; color:var(--cream); }
  details.q summary::-webkit-details-marker{ display:none; }
  details.q summary i{ flex:none; color:#FF7A45; transition:transform .3s var(--ease); font-size:18px; }
  details.q[open] summary i{ transform:rotate(45deg); }
  details.q .a{ padding:0 22px 20px; font-size:14.5px; line-height:1.6; color:#a8a5b0; max-width:72ch; }
  details.q summary:focus-visible{ outline:2px solid #FF9A6C; outline-offset:-2px; }

  /* cta band */
  .cta-band{ position:relative; border-radius:24px; padding:54px 40px; text-align:center; overflow:hidden;
    background:linear-gradient(165deg, rgba(255,90,31,0.16), rgba(255,90,31,0.04));
    border:1px solid rgba(255,150,110,0.30);
    box-shadow:inset 0 1px 0 rgba(255,214,184,0.22), 0 24px 70px rgba(0,0,0,0.46), 0 0 60px rgba(255,90,31,0.14); }
  .cta-band::before{ content:""; position:absolute; inset:0 0 auto 0; height:50%; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,221,198,0.10), transparent 80%); }
  .cta-band h2{ color:#FFF1E9; max-width:18ch; margin:0 auto 14px; }
  .cta-band p{ color:#f0ddd0; max-width:56ch; margin:0 auto 26px; font-size:16px; }
  .cta-band .who{ margin-top:24px; font-family:'DM Sans',monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#d9b9a6; }

  /* footer */
  footer{ border-top:1px solid rgba(255,255,255,0.07); padding:46px 0 40px; margin-top:40px; }
  .foot-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:36px; flex-wrap:wrap; }
  .foot-logo{ height:22px; margin-bottom:14px; }
  .foot-tag{ color:#8e8b97; font-size:13.5px; max-width:34ch; }
  .foot-links{ display:flex; gap:46px; flex-wrap:wrap; }
  .foot-col h4{ font-family:'DM Sans',monospace; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:#6f6c78; margin-bottom:13px; font-weight:600; }
  .foot-col a{ display:block; color:#a8a5b0; text-decoration:none; font-size:13.5px; margin-bottom:9px; transition:color .2s var(--ease); }
  .foot-col a:hover{ color:var(--cream); }
  .foot-bottom{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.06);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-family:'DM Sans',monospace; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:#6f6c78; }

  /* reveal */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

  /* responsive */
  @media (max-width:880px){
    .nav-links{ display:none; }
    .stat-cards{ grid-template-columns:1fr; }
    .pillars,.two-col,.includes-grid,.fit-grid{ grid-template-columns:1fr; }
    .tl-track{ grid-template-columns:1fr 1fr; gap:26px 18px; }
    .tl-track::before{ display:none; }
    .proof-strip .div{ display:none; }
    .sec{ padding:62px 0; }
  }
  @media (max-width:560px){
    .wrap{ padding:0 20px; }
    .sec-head{ flex-direction:column; gap:6px; }
    .pillar{ flex-direction:column; gap:14px; }
    .cta-band{ padding:40px 22px; }
  }

/* ============================================================
   LIGHT (beige) SECTIONS — adapted from frontal.so (.light)
   Add class "light" to a <section class="sec light"> to flip it
   to the warm paper palette. Overrides beat the dark base via
   the extra .light specificity. Footer + nav stay dark.
   ============================================================ */
.sec.light{ background:#FBFAF6; color:#56514A; border-top:none; position:relative; overflow:hidden; }
/* ---------- PER-SECTION GRID + cursor spotlight + transition glow ---------- */
/* square grid behind every section, fading top (strong) -> bottom (gone) */
.sec::before, .hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 5%, transparent 86%);
          mask-image:linear-gradient(180deg, #000 0%, #000 5%, transparent 86%);
}
/* cursor spotlight: same grid, brighter, masked to a disc at the pointer */
.sec::after, .hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.13) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(210px 210px at var(--lx,-999px) var(--ly,-999px), #000, transparent 70%);
          mask-image:radial-gradient(210px 210px at var(--lx,-999px) var(--ly,-999px), #000, transparent 70%);
}
.sec > .wrap, .hero > .wrap{ position:relative; z-index:1; }
/* beige sections: dark grid lines + warm-orange spotlight */
.sec.light::before{ background-image:linear-gradient(rgba(26,26,26,0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,26,0.032) 1px, transparent 1px); }
.sec.light::after{ background-image:linear-gradient(rgba(255,90,31,0.20) 1px, transparent 1px), linear-gradient(90deg, rgba(255,90,31,0.20) 1px, transparent 1px); }
/* orange glow at section seams: a bright thin streak on the seam + soft bloom,
   blooming BOTH ways. Dark sections glow at top AND bottom; the hero glows at
   its bottom only (nothing above it). Adjacent dark seams overlap into a
   brighter highlight, like the all-dark frontal.so. Beige sections stay clean. */
.sec:not(.light){
  background:
    radial-gradient(23% 2px at 50% 0%, rgba(255,170,115,0.8), transparent 80%),
    radial-gradient(15% 6px at 50% 0%, rgba(255,140,80,0.4), transparent 76%),
    radial-gradient(34% 120px at 50% 0%, rgba(255,100,45,0.12), transparent 70%),
    radial-gradient(23% 2px at 50% 100%, rgba(255,170,115,0.8), transparent 80%),
    radial-gradient(15% 6px at 50% 100%, rgba(255,140,80,0.4), transparent 76%),
    radial-gradient(34% 120px at 50% 100%, rgba(255,100,45,0.12), transparent 70%);
}
.hero{
  background:
    radial-gradient(23% 2px at 50% 100%, rgba(255,170,115,0.8), transparent 80%),
    radial-gradient(15% 6px at 50% 100%, rgba(255,140,80,0.4), transparent 76%),
    radial-gradient(34% 120px at 50% 100%, rgba(255,100,45,0.12), transparent 70%);
}
@media (prefers-reduced-motion:reduce){ .sec::after,.hero::after{ display:none; } }
.light h1,.light h2,.light h3,.light h4{ color:#1A1A1A; }
.light p,.light .lead{ color:#56514A; }
.light .lead strong,.light strong{ color:#1A1A1A; }
.light .sec-num{ color:#8A8175; }
.light .eyebrow{ color:#C73600; }
.light .eyebrow::before{ background:#FF4700; box-shadow:0 0 10px rgba(255,71,0,.30); }
.light .orange,.light .o-text{ color:#C73600; }
.light .fr-dot-solid{ background:#FF4700; box-shadow:0 0 8px rgba(255,71,0,.5); }

/* cards: paper fill, warm hairline, soft shadow (no white-on-dark) */
.light .card{ background:#FFFFFF; border:1px solid #E7E0D2; box-shadow:0 1px 2px rgba(26,22,15,0.04), 0 6px 22px rgba(26,22,15,0.07); }
.light .card h3,.light .card h4{ color:#1A1A1A; }
.light .card p,.light .card li{ color:#56514A; }
.light .card .sub,.light .tag,.light .tl-label,.light .cap,.light .gv-title{ color:#8A8175; }

/* buttons */
.light .btn-ghost{ background:rgba(26,22,15,0.04); border-color:rgba(26,22,15,0.14); color:#1A1A1A; }
.light .btn-ghost:hover{ background:rgba(26,22,15,0.07); border-color:rgba(26,22,15,0.28); }

/* callouts */
.light .callout-box,.light .accent-callout,.light .honest{ background:#FFF4EF; border-color:rgba(255,71,0,0.28); }
.light .callout-box h3,.light .accent-callout h3,.light .honest h3{ color:#7A2A12; }
.light .callout-box p,.light .accent-callout p,.light .honest p{ color:#5A4A42; }
.light .accent-callout b,.light .honest b{ color:#1A1A1A; }

/* FAQ */
.light details.q{ background:#FFFFFF; border-color:#E7E0D2; }
.light details.q[open]{ background:#FFF8F4; border-color:rgba(255,71,0,0.28); }
.light details.q summary{ color:#1A1A1A; }
.light details.q summary i{ color:#FF4700; }
.light details.q .a{ color:#56514A; }

/* stat / team-stat numbers */
.light .stat .big,.light .team-stat .num{ color:#C73600; }
.light .stat .sub,.light .team-stat .lbl{ color:#8A8175; }

/* proof cards (the real LinkedIn posts sit naturally on beige) */
.light .proof-card{ background:#FFFFFF; }
.light .proof-author{ color:#1A1A1A; }
.light .proof-role,.light .proof-metric .pm-l{ color:#8A8175; }
.light .proof-metric .pm-n{ color:#1A1A1A; }
.light .proof-metric .pm-n.accent{ color:#C73600; }
.light .proof-metrics{ border-color:#E7E0D2; }
.light .proof-outcome{ color:#56514A; }
.light .proof-shot{ border-color:#E7E0D2; }

/* best-fit cards */
.light .fit .fh span{ color:#1A1A1A; }
.light .fit li{ color:#56514A; }
.light .fit.yes{ border-color:rgba(46,158,94,0.32); }
.light .fit.yes li i,.light .fit.yes .fh i{ color:#2E9E5E; }
.light .fit.no li i,.light .fit.no .fh i{ color:#9a9488; }
.light .icp-note{ color:#8A8175; }
.light .icp-note b{ color:#1A1A1A; }

/* deliverables */
.light .deliv-item{ background:#FFFFFF; border-color:#E7E0D2; }
.light .deliv-item h4{ color:#1A1A1A; }
.light .deliv-item p{ color:#56514A; }
.light .deliv-check{ background:rgba(255,71,0,0.10); border-color:rgba(255,71,0,0.30); color:#FF4700; }
.light .deliv-closer{ color:#56514A; }
.light .gif{ border-color:#E7E0D2; }

/* includes / ask / steps / two-col */
.light .inc-list li{ color:#56514A; }
.light .inc-list .dot{ background:#FF4700; box-shadow:0 0 8px rgba(255,71,0,.4); }
.light .ask-item p,.light .step p,.light .two-col p{ color:#56514A; }
.light .step .wk{ color:#C73600; }
.light .feat-list strong{ color:#1A1A1A; }
.light .feat-list .sq{ background:#FF4700; box-shadow:0 0 8px rgba(255,71,0,.4); }

/* ==========================================================================
   MAI-LAN KHONG — DREAMY PASTEL RE-SKIN OVERRIDES
   Appended last so equal-specificity rules win by source order. Layout is
   untouched; only colour, surface, type and glow flip from dark/orange to the
   light pastel-mesh + glassmorphism brand. Ink #2A2723, body #6E675C,
   accent-text lavender #6E56CF, mark lime #C7E070, CTA pale-lime #E6F7C2.
   ========================================================================== */
:root{
  --ink:#2A2723; --ink2:#4A443C; --body:#6E675C; --meta:#9A9184; --faint:#B8B0A2;
  --acc:#6E56CF;            /* readable lavender accent text/links */
  --acc-soft:#C9BCEC;       /* lavender surface */
  --mark:#C7E070;           /* lime mark */
  --lime-soft:#E6F7C2;      /* pale lime fill / CTA */
  --hair:rgba(42,39,35,0.09);
  --glass:rgba(255,255,255,0.55); --glass-bd:rgba(255,255,255,0.85);
  --glass-sh:inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 34px rgba(90,72,120,0.10);
}
body{ background:transparent; color:var(--body); }

/* ambient background surface: pastel mesh, no dark vignette */
.bg .mesh{ background:
  radial-gradient(40% 50% at 88% 8%, rgba(244,201,228,0.5) 0%, transparent 60%),
  radial-gradient(36% 44% at 12% 20%, rgba(230,247,194,0.55) 0%, transparent 64%),
  radial-gradient(48% 60% at 84% 76%, rgba(201,188,236,0.5) 0%, transparent 62%),
  radial-gradient(40% 46% at 10% 88%, rgba(251,213,180,0.5) 0%, transparent 62%); }
.bg .vig{ box-shadow:inset 0 0 240px 60px rgba(255,255,255,0.35); }

/* section rules + seams */
.sec{ border-top:1px solid var(--hair); }
.sec-num{ color:var(--meta); }
.sec::before, .hero::before{ background-image:linear-gradient(rgba(42,39,35,0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(42,39,35,0.04) 1px, transparent 1px); }
.sec::after, .hero::after{ background-image:linear-gradient(rgba(110,86,207,0.16) 1px, transparent 1px),
  linear-gradient(90deg, rgba(110,86,207,0.16) 1px, transparent 1px); }
.sec:not(.light){ background:
  radial-gradient(23% 2px at 50% 0%, rgba(201,188,236,0.9), transparent 80%),
  radial-gradient(30% 90px at 50% 0%, rgba(230,247,194,0.28), transparent 72%),
  radial-gradient(23% 2px at 50% 100%, rgba(201,188,236,0.9), transparent 80%),
  radial-gradient(30% 90px at 50% 100%, rgba(230,247,194,0.28), transparent 72%); }
.hero{ background:
  radial-gradient(23% 2px at 50% 100%, rgba(201,188,236,0.9), transparent 80%),
  radial-gradient(30% 90px at 50% 100%, rgba(230,247,194,0.28), transparent 72%); }

/* type */
h1,h2,h3,h4{ font-family:'Playfair Display',Georgia,serif; color:var(--ink); letter-spacing:-0.01em; font-weight:600; }
h1{ line-height:1.02; } h2{ line-height:1.06; } h3{ line-height:1.22; }
.lead{ color:var(--ink2); }
p{ color:var(--body); }
.orange,.o-text{ color:var(--acc); }
.mono{ font-family:'DM Sans',ui-sans-serif,sans-serif; }

/* eyebrow — lavender bar + label */
.eyebrow{ color:var(--acc); }
.eyebrow::before{ background:var(--mark); box-shadow:0 0 10px rgba(199,224,112,0.7); }

/* nav — white glass */
header.nav{ background:rgba(255,255,255,0.72); border-bottom:1px solid var(--hair);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); }
.nav-links a{ color:var(--body); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:focus-visible{ outline:2px solid var(--acc); }

/* buttons */
.btn-solid{ background:var(--lime-soft); color:var(--ink); border:1px solid rgba(150,180,80,0.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 26px rgba(199,224,112,0.35); }
.btn-solid:hover{ filter:brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8), 0 12px 34px rgba(199,224,112,0.5); }
.btn-ghost{ background:rgba(42,39,35,0.04); color:var(--ink); border:1px solid rgba(42,39,35,0.14); }
.btn-ghost:hover{ border-color:rgba(110,86,207,0.4); background:rgba(201,188,236,0.16); }
.btn:focus-visible, details.q summary:focus-visible{ outline:2px solid var(--acc); }

/* glass cards */
.card{ background:var(--glass); border:1px solid var(--glass-bd); box-shadow:var(--glass-sh);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); }

/* hero callout strip */
.callout-strip{ background:linear-gradient(100deg, rgba(230,247,194,0.6), rgba(201,188,236,0.18) 70%);
  border:1px solid rgba(150,180,80,0.35); }
.callout-strip::before{ background:var(--mark); box-shadow:0 0 14px rgba(199,224,112,0.7); }
.callout-strip p{ color:var(--ink2); }
.callout-strip strong{ color:var(--ink); }

/* stat cards */
.stat .big{ color:var(--acc); }
.stat .sub{ color:var(--meta); }

/* proof strip */
.proof-strip .pf b{ color:var(--ink); }
.proof-strip .pf span{ color:var(--meta); }
.proof-strip .div{ background:var(--hair); }

/* pillars / honest / callout-box */
.callout-box{ background:linear-gradient(120deg, rgba(230,247,194,0.55), rgba(201,188,236,0.16)); border:1px solid rgba(150,180,80,0.35); }
.callout-box h3{ color:var(--ink); } .callout-box p{ color:var(--ink2); }
.pillar .pn{ color:var(--acc); background:rgba(201,188,236,0.22); border:1px solid rgba(110,86,207,0.3); }
.honest{ background:rgba(255,255,255,0.5); border:1px solid var(--glass-bd); }
.honest h3{ color:var(--ink); }

/* feature list */
.feat-list .sq{ background:var(--mark); box-shadow:0 0 9px rgba(199,224,112,0.6); }
.feat-list p{ color:var(--body); }
.feat-list strong{ color:var(--ink); }

/* timeline */
.tl-label{ color:var(--meta); }
.tl-track::before{ background:var(--hair); }
.tl-dot{ border:2px solid #C4BBB0; background:var(--mlk-paper); }
.tl-step.live .tl-dot{ border-color:var(--acc); background:var(--acc); box-shadow:0 0 14px rgba(110,86,207,0.5); }
.tl-step .t{ color:var(--ink); }
.tl-step.live .t{ color:var(--acc); }
.tl-step .d{ color:var(--meta); }

/* two-col */
.two-col p{ color:var(--body); }

/* accent proof callout — lime/lavender glass */
.accent-callout{ background:linear-gradient(165deg, rgba(230,247,194,0.7), rgba(201,188,236,0.25));
  border:1px solid rgba(150,180,80,0.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 14px 44px rgba(90,72,120,0.12), 0 0 40px rgba(199,224,112,0.25); }
.accent-callout h3{ color:var(--ink); } .accent-callout p{ color:var(--ink2); } .accent-callout b{ color:var(--ink); }

/* includes / ask */
.includes .tag{ color:var(--acc); }
.includes .sub{ color:var(--meta); border-bottom:1px solid var(--hair); }
.inc-list li{ color:var(--body); }
.inc-list .dot{ background:var(--mark); box-shadow:0 0 8px rgba(199,224,112,0.6); }
.ask .tag{ color:var(--meta); }

/* best-fit */
.fit .fh span{ color:var(--ink); }
.fit li{ color:var(--body); }
.fit.yes{ border-color:rgba(90,174,122,0.35); }
.fit.yes .fh i, .fit.yes li i{ color:#4E9E6E; }
.fit.no .fh i, .fit.no li i{ color:#B0A99C; }
.icp-note{ color:var(--meta); } .icp-note b{ color:var(--ink); }

/* onboarding steps */
.step .sn{ color:var(--acc); background:rgba(201,188,236,0.22); border:1px solid rgba(110,86,207,0.3); }
.step .wk{ color:var(--acc); }
.step p{ color:var(--body); }

/* faq */
details.q{ background:rgba(255,255,255,0.5); border:1px solid var(--glass-bd); }
details.q[open]{ border-color:rgba(110,86,207,0.3); background:rgba(255,255,255,0.68); }
details.q summary{ color:var(--ink); }
details.q summary i{ color:var(--acc); }
details.q .a{ color:var(--body); }

/* cta band — the dreamy focal glass */
.cta-band{ background:linear-gradient(165deg, rgba(230,247,194,0.75), rgba(201,188,236,0.35));
  border:1px solid rgba(150,180,80,0.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 70px rgba(90,72,120,0.16), 0 0 60px rgba(199,224,112,0.3); }
.cta-band::before{ background:linear-gradient(180deg, rgba(255,255,255,0.6), transparent 80%); }
.cta-band h2{ color:var(--ink); } .cta-band p{ color:var(--ink2); }
.cta-band .who{ color:var(--acc); }

/* footer */
footer{ border-top:1px solid var(--hair); }
.foot-tag{ color:var(--meta); }
.foot-col h4{ color:var(--meta); }
.foot-col a{ color:var(--body); }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ border-top:1px solid var(--hair); color:var(--meta); }

/* generic strong text */
strong{ color:var(--ink); }

/* ---------- Meet your guide ---------- */
.guide-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; margin-top:8px; }
.guide-shot{ display:block; border-radius:20px; overflow:hidden; padding:10px; }
.guide-shot img{ width:100%; display:block; border-radius:12px; }
.guide-copy .lead{ margin-bottom:18px; }
.guide-copy p{ font-size:15px; line-height:1.62; }
.guide-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.guide-favikon{ display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; padding:24px 30px; margin-top:16px; }
.guide-favikon .gf-shot img{ width:190px; max-width:100%; border-radius:12px; display:block; box-shadow:0 8px 24px rgba(90,72,120,0.16); }
.guide-favikon .eyebrow{ display:inline-flex; }
.guide-favikon h3{ margin:12px 0 8px; }
.guide-favikon p{ color:var(--body); max-width:52ch; }
@media (max-width:880px){ .guide-grid{ grid-template-columns:1fr; gap:28px; } .guide-favikon{ grid-template-columns:1fr; gap:20px; text-align:center; } .guide-favikon .gf-shot img{ margin:0 auto; } }

/* ---------- MLK × Frontal brand lockup (nav + footer) ---------- */
.brand-lock{ display:inline-flex; align-items:center; gap:13px; text-decoration:none; }
.mlk-mark{ display:flex; flex-direction:column; line-height:1; }
.mlk-init{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:21px; color:var(--ink); letter-spacing:1.5px; }
.mlk-word{ font-family:'DM Sans',sans-serif; font-size:6.5px; font-weight:600; letter-spacing:2.1px; text-transform:uppercase; color:var(--body); margin-top:3px; }
.brand-sep{ color:var(--faint); font-size:15px; font-weight:300; line-height:1; }
.brand-lock .fr-logo{ height:15px; width:auto; }
.brand-lock:hover .mlk-init{ color:var(--acc); transition:color .2s var(--ease); }
/* footer lockup — a touch larger */
.foot-lock{ display:inline-flex; align-items:center; gap:13px; margin-bottom:16px; }
.mlk-mark--foot .mlk-init{ font-size:27px; }
.mlk-mark--foot .mlk-word{ font-size:8px; letter-spacing:2.6px; }
.foot-lock .foot-logo{ height:18px; margin-bottom:0; }
@media (max-width:560px){ .mlk-word{ display:none; } }