/* Shared styles for every page except the home page.
   The home page keeps its styles inline; the tokens below mirror it. Change both together. */

/* ============ FONTS ============ */
@font-face{font-family:'Grift';src:url('/assets/fonts/Grift-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Grift';src:url('/assets/fonts/Grift-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vank';src:url('/assets/fonts/Vank-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/SpaceGrotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/SpaceGrotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ============ TOKENS ============ */
:root{
  --obsidian:#0B0F1A;
  --deep:#070A12;
  --frost:#EEF1F7;
  --white:#FFFFFF;
  --volt:#2F4BFF;
  --volt-soft:#93A4FF;
  --ink:#0B0F1A;
  --ink-mute:#5C6479;
  --line-light:#D6DAE4;
  --line-dark:#1B2132;
  --on-dark:#FFFFFF;
  --on-dark-mute:#8E96AC;
  --danger:#FF6B6B;
  --r-btn:56px;
  --r-card:20px;
  --r-large:60px;
  --r-small:10px;
  --maxw:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--obsidian);color:var(--on-dark);
  font-family:'Grift',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:500;font-size:16px;line-height:1.5;letter-spacing:-.08px;overflow-x:hidden
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--volt);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 18px}}

/* ============ TYPE ============ */
.t-display{font-size:clamp(38px,6vw,64px);line-height:1.06;font-weight:700;letter-spacing:-.025em}
.t-h1{font-size:clamp(32px,4.6vw,48px);line-height:1.12;font-weight:700;letter-spacing:-.02em}
.t-h2{font-size:clamp(26px,3.4vw,36px);line-height:1.2;font-weight:700;letter-spacing:-.018em}
.t-lead{font-size:18px;line-height:1.55}
@media(max-width:600px){.t-lead{font-size:16.5px}}
.eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:18px;color:var(--volt-soft)}
@media(max-width:600px){.eyebrow{font-size:12px;letter-spacing:.13em}}
.mute{color:var(--on-dark-mute)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Grift',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.08px;
  padding:14px 28px;border-radius:var(--r-btn);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,opacity .2s
}
.btn svg{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.btn:hover svg{transform:translateX(3px)}
.btn-fill{background:var(--volt);color:#fff}
.btn-fill:hover{background:#4159FF}
.btn-ghost-dark{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.55)}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-sm{padding:11px 20px;font-size:15px}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:wait}
@media(max-width:400px){.btn{padding:13px 22px;font-size:15px}}

/* ============ NAV ============ */
.nav{background:var(--obsidian);position:sticky;top:0;z-index:90;border-bottom:1px solid var(--line-dark)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.02em}
.brand img{width:30px;height:30px;border-radius:var(--r-small)}
.nav-cta{display:flex;gap:10px;align-items:center;margin-left:auto}
@media(max-width:600px){.nav-in{padding:14px 18px}.brand{font-size:15px}.brand img{width:26px;height:26px}}
@media(max-width:560px){.nav-cta .btn-ghost-dark{display:none}}
/* a stripped nav for landing pages: logo only, nothing to click away to */
.nav.bare .nav-in{justify-content:flex-start}

/* ============ LEGAL / PROSE ============ */
.legal{padding:64px 0 96px}
.legal .wrap{max-width:820px}
.legal h1{margin-bottom:10px}
.legal .updated{color:var(--on-dark-mute);font-size:14px;margin-bottom:40px}
.prose{color:#C9CEDB;font-size:16.5px;line-height:1.7}
.prose h2{color:#fff;font-size:22px;line-height:1.3;letter-spacing:-.015em;margin:44px 0 12px}
.prose h3{color:#fff;font-size:17px;margin:26px 0 8px}
.prose p{margin-bottom:14px}
.prose ul{margin:0 0 16px 20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--volt-soft);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#fff}
.prose strong{color:#fff;font-weight:700}
.prose .summary{background:var(--deep);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:22px 24px;margin-bottom:8px}
.prose .summary p:last-child{margin-bottom:0}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line-dark);padding:56px 0 34px}
.f-top{display:flex;gap:48px;flex-wrap:wrap;justify-content:space-between;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
.f-brand{max-width:330px}
.f-brand .fb{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin-bottom:14px}
.f-brand .fb img{width:30px;height:30px;border-radius:var(--r-small)}
.f-brand p{color:var(--on-dark-mute);font-size:15px}
.f-cols{display:flex;gap:60px;flex-wrap:wrap}
@media(max-width:600px){.f-cols{gap:36px}footer{padding:44px 0 28px}}
.f-col h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px}
.f-col a{display:block;color:#C3C9D8;font-size:15px;margin-bottom:11px}
.f-col a:hover{color:#fff}
.f-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;flex-wrap:wrap;color:var(--on-dark-mute);font-size:14px}
.f-bot a:hover{color:#fff}
/* the one-line footer used on landing pages */
footer.slim{padding:28px 0}
footer.slim .f-bot{padding-top:0}

/* =====================================================================
   LEAD MAGNET PAGES  (/free/<slug>  and  /free/<slug>/thanks)
   ===================================================================== */
.band{padding:72px 0}
@media(max-width:600px){.band{padding:52px 0}}
.sec-head{max-width:720px;margin-bottom:36px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-bottom:12px}

/* ---- page 1 hero ---- */
.lm-hero{position:relative;padding:64px 0 76px;overflow:hidden}
.lm-hero::before{content:"";position:absolute;width:780px;height:780px;right:-160px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(47,75,255,.18) 0%,rgba(47,75,255,.05) 45%,transparent 68%);pointer-events:none}
.lm-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
@media(max-width:980px){.lm-grid{grid-template-columns:1fr;gap:40px}.lm-hero{padding:36px 0 56px}}
.lm-copy h1{margin-bottom:18px}
.lm-list{list-style:none;margin-top:24px;display:grid;gap:12px}
.lm-list li{position:relative;padding-left:32px;color:#D5DAE6;font-size:16.5px}
.lm-list li::before{content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;background:var(--volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.lm-cta{margin-top:30px;max-width:460px}
.lm-micro{margin-top:12px;font-size:13.5px;color:var(--on-dark-mute)}
.lm-media{position:relative}
.lm-media img{width:100%;height:auto;border-radius:var(--r-card);border:1px solid var(--line-dark);box-shadow:0 40px 100px rgba(0,0,0,.55)}

/* ---- the form ---- */
.lm-form{display:grid;gap:12px}
.lm-form[hidden]{display:none}
.field label{display:block;font-size:13.5px;color:var(--on-dark-mute);margin-bottom:6px}
.field input{width:100%;background:var(--deep);border:1.5px solid var(--line-dark);border-radius:14px;padding:14px 16px;color:#fff;font:inherit;font-size:16px;transition:border-color .2s}
.field input::placeholder{color:#5B6379}
.field input:focus{outline:none;border-color:var(--volt)}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.hp-field{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.lm-err{color:var(--danger);font-size:14px}
.lm-err[hidden]{display:none}
/* The one-tap correction inside .lm-err. Underlined text rather than a button shape, because
   it has to read as "tap this to fix it", not as a second submit button beside the real one. */
.lm-fix{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:700;cursor:pointer}
.lm-fix:hover,.lm-fix:focus-visible{text-decoration-thickness:2px}

/* ---- placeholder preview. Delete once the real preview image exists ---- */
.lm-mock{position:relative;aspect-ratio:4/5;max-width:420px;margin:0 auto;border-radius:18px;background:linear-gradient(160deg,#F5F7FB,#E3E8F2);box-shadow:0 40px 100px rgba(0,0,0,.55);padding:34px 30px;transform:rotate(2.5deg)}
.lm-mock .mk-tag{display:inline-block;background:var(--volt);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:6px 12px;border-radius:40px;margin-bottom:18px}
.lm-mock .mk-title{color:var(--ink);font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-.02em;margin-bottom:22px}
.lm-mock .mk-line{height:10px;border-radius:6px;background:#CBD2DF;margin-bottom:12px}
.lm-mock .mk-line.s{width:62%}
.lm-mock .mk-row{display:flex;gap:10px;align-items:center;margin-top:18px}
.lm-mock .mk-box{width:18px;height:18px;border-radius:5px;border:2px solid var(--volt);flex:none}
.lm-mock .mk-row .mk-line{margin:0;flex:1}
@media(max-width:980px){.lm-mock{max-width:300px;transform:rotate(1.5deg)}}

/* ---- page 1 lower sections ---- */
.inside-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:760px){.inside-grid{grid-template-columns:1fr}}
.inside{background:var(--deep);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:26px 24px}
.inside .n{font-family:'Vank',sans-serif;font-size:30px;color:var(--volt);line-height:1;margin-bottom:14px}
.inside h3{font-size:19px;letter-spacing:-.015em;margin-bottom:6px}
.inside p{color:var(--on-dark-mute);font-size:15.5px}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:760px){.fit{grid-template-columns:1fr}}
.fit-card{background:var(--deep);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:26px 24px}
.fit-card h3{font-size:17px;margin-bottom:12px}
.fit-card ul{list-style:none;display:grid;gap:10px;color:#C9CEDB;font-size:15.5px}
.fit-card li{padding-left:24px;position:relative}
.fit-card.yes li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--volt)}
.fit-card.no li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;border:2px solid #5B6379}
.author{display:flex;gap:24px;align-items:center;background:var(--frost);color:var(--ink);border-radius:32px;padding:30px 32px;max-width:900px;margin:0 auto}
.author img{width:92px;height:92px;border-radius:50%;object-fit:cover;flex:none}
.author h3{font-size:20px;letter-spacing:-.015em;margin-bottom:6px}
.author p{color:var(--ink-mute);font-size:15.5px}
@media(max-width:600px){.author{flex-direction:column;align-items:flex-start;padding:26px 22px}}
.endcta{text-align:center;padding:24px 0 88px}
.endcta h2{margin-bottom:22px}

/* ---- page 2: thanks + bridge ---- */
.ty-hero{position:relative;text-align:center;padding:64px 0 56px;overflow:hidden}
.ty-hero::before{content:"";position:absolute;width:760px;height:760px;left:50%;top:-340px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(47,75,255,.2) 0%,transparent 66%);pointer-events:none}
.ty-hero .wrap{position:relative;max-width:760px}
.ty-check{width:66px;height:66px;border-radius:50%;background:rgba(47,75,255,.16);border:1px solid rgba(47,75,255,.45);display:grid;place-items:center;margin:0 auto 24px}
.ty-check svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ty-hero h1{margin-bottom:14px}
.ty-hero .t-lead{margin:0 auto}
.ty-actions{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:12px}
.divider{display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto;color:var(--on-dark-mute);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-dark)}
.lightcard{background:var(--frost);color:var(--ink);border-radius:var(--r-large);padding:52px 44px}
@media(max-width:760px){.lightcard{border-radius:32px;padding:34px 20px}}
.lightcard .eyebrow{color:var(--ink)}
.lightcard .mute{color:var(--ink-mute)}
.vid{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--deep);aspect-ratio:16/9;cursor:pointer;border:1px solid var(--line-dark)}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .4s}
.vid:hover img{opacity:.38}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;color:#fff}
.play-btn{width:72px;height:72px;border-radius:50%;background:var(--volt);display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.vid:hover .play-btn{transform:scale(1.08)}
.play-btn::after{content:"";width:0;height:0;border-left:17px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
@media(max-width:600px){.play-btn{width:58px;height:58px}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:28px 20px}}
.stat .n{font-family:'Vank',sans-serif;font-weight:700;font-size:44px;line-height:1;color:var(--volt)}
.stat .l{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);margin-top:10px}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:860px){.shots{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.shot{display:block;background:var(--deep);border:1px solid var(--line-dark);border-radius:14px;padding:10px 10px 0;box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.shot:hover{transform:translateY(-6px);border-color:var(--volt)}
.shot img{width:100%;height:auto;border-radius:8px}
.shot .cap{padding:12px 6px 14px}
.shot .who{font-weight:700;font-size:15px}
.shot .what{font-size:13.5px;color:var(--on-dark-mute);margin-top:2px;line-height:1.4}

/* ---- lead magnet pages, two-page flow (added for /free/quote-follow-up) ---- */
.lm-media.plain img{border:0;box-shadow:none;border-radius:0}
.lm-cta .btn{min-width:260px}
@media(max-width:600px){.lm-cta .btn{width:100%}}

.plan48{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:p48}
@media(max-width:860px){.plan48{grid-template-columns:1fr}}
.p48{background:var(--deep);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:24px 24px 26px;position:relative}
.p48 .when{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--volt-soft);margin-bottom:10px}
.p48 h3{font-size:20px;letter-spacing:-.015em;margin-bottom:6px}
.p48 p{color:var(--on-dark-mute);font-size:15.5px}

/* page 2: the form */
.get-hero{position:relative;padding:48px 0 72px;overflow:hidden}
.get-hero::before{content:"";position:absolute;width:760px;height:760px;right:-200px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(47,75,255,.18) 0%,transparent 66%);pointer-events:none}
.get-grid{position:relative;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:center}
@media(max-width:980px){.get-grid{grid-template-columns:1fr;gap:36px}.get-hero{padding:28px 0 56px}}
.get-card{background:var(--deep);border:1px solid var(--line-dark);border-radius:28px;padding:34px 32px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
@media(max-width:600px){.get-card{padding:26px 20px;border-radius:22px}}
.stepper{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--volt-soft);margin-bottom:16px}
.stepper .bar{display:inline-flex;gap:5px}
.stepper .bar i{width:22px;height:5px;border-radius:4px;background:var(--volt)}
.get-card h1{font-size:clamp(28px,3.6vw,38px);line-height:1.12;letter-spacing:-.02em;margin-bottom:10px}
.get-card .t-lead{font-size:16.5px;margin-bottom:22px}

/* ---------------------------------------------------------------------------
   THE 30-DAY GUARANTEE SEAL. Third version, 2026-09-27.

   v1 was a full-width red bar and v2 a rotated stamp positioned absolutely
   against the grid seam. Neither was ever actually seen: /assets was cached for
   seven days with no version string, so the pages shipped new markup against a
   week-old stylesheet and the whole thing rendered as unstyled text. That is
   fixed in vercel.json and by the ?v= on every css and js reference. Bump that
   version whenever this file changes in a way that must be seen immediately.

   This version is in normal flow on purpose. It stands out by being a red
   panel with a circular seal in it, not by being positioned cleverly, so there
   is nothing to collide or drift at any width.

   A round seal is the universal signal for a guarantee. That is the entire
   reason it is a circle: it is recognised before it is read.

   RED IS DELIBERATELY OUTSIDE THE PALETTE. design.md bans warm colours, and this
   is the one sanctioned exception, by Waqas. Do not add a second, and do not
   reuse --gtee-red for anything that is not this promise.
   --------------------------------------------------------------------------- */
.gtee{
  --gtee-red:#CE2029;
  display:flex;align-items:center;gap:18px;
  margin:6px 0 24px;padding:18px 20px;
  background:rgba(206,32,41,.13);
  border:1px solid rgba(206,32,41,.55);
  border-radius:16px;
}
.gtee-seal{
  flex:none;position:relative;width:104px;height:104px;border-radius:50%;
  background:var(--gtee-red);display:grid;place-content:center;text-align:center;
  transform:rotate(-9deg);box-shadow:0 10px 24px rgba(206,32,41,.45);
}
.gtee-seal::after{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(255,255,255,.66);border-radius:50%}
.gtee-num{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;line-height:1;letter-spacing:-.02em;color:#fff}
/* nowrap + these sizes keep DAY GUARANTEE inside the dashed ring at both seal sizes. */
.gtee-word{display:block;white-space:nowrap;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:8px;letter-spacing:.08em;color:#fff;margin-top:5px}
.gtee-copy{min-width:0}
.gtee-chip{
  display:inline-block;background:var(--gtee-red);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border-radius:3px;margin-bottom:9px;
}
.gtee-line{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:var(--on-dark);margin:0 0 5px;letter-spacing:-.01em}
.gtee-fine{font-size:13.5px;line-height:1.45;color:#E3B5B9;margin:0}
.gtee-fine a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.gtee-fine a:hover{text-decoration-thickness:2px}

/* /thanks hero is centred, so centre the panel but keep the copy ranged left. */
.gtee-side{max-width:560px;margin:30px auto 0;text-align:left}

@media(max-width:520px){
  .gtee{gap:14px;padding:15px 15px}
  .gtee-seal{width:88px;height:88px}
  .gtee-num{font-size:23px}
  .gtee-word{font-size:7.2px;letter-spacing:.05em;margin-top:4px}
  .gtee-line{font-size:15.5px}
  .gtee-fine{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.gtee-seal{transform:none}}

/* ---------------------------------------------------------------------------
   THE HAND-HOLDING LINE, /thanks. Sits directly under the Wins screenshots so
   "every post above" points at something the reader has just seen. Volt rail
   rather than red, because the red on this page belongs to the guarantee alone
   and a second red block would flatten it.
   --------------------------------------------------------------------------- */
.handhold{max-width:760px;margin:0 auto;padding:22px 26px;background:var(--deep);border:1px solid var(--line-dark);border-left:3px solid var(--volt);border-radius:0 16px 16px 0}
.hh-line{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(18px,2.4vw,22px);line-height:1.28;letter-spacing:-.01em;color:var(--on-dark);margin:0 0 10px;text-wrap:balance}
.hh-body{font-size:15.5px;line-height:1.62;color:#C3CAD9;margin:0}
@media(max-width:600px){.handhold{padding:18px 18px;border-radius:0 12px 12px 0}.hh-body{font-size:14.5px}}

.get-card .lm-form{gap:14px}
.get-card .btn{margin-top:4px}
.get-card .lm-micro{text-align:center}
.files{list-style:none;display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-dark)}
.files li{display:flex;align-items:center;gap:12px;font-size:15px;color:#D5DAE6}
.files .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;color:#fff}
.files .ic.doc{background:#2F4BFF}
.files .ic.sheet{background:#0F9D58}
.files small{display:block;color:var(--on-dark-mute);font-size:13px}
.byline{display:flex;align-items:center;gap:12px;margin-top:22px;color:var(--on-dark-mute);font-size:14px;line-height:1.45}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.byline strong{color:#fff;font-weight:700}
.get-side img{width:100%;height:auto}
@media(max-width:980px){.get-side{max-width:520px;margin:0 auto}}

/* thanks page extras */
.ty-more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ty-tip{margin-top:18px;color:var(--on-dark-mute);font-size:14.5px}
.ty-tip strong{color:#fff}
.lm-copy .t-display{font-size:clamp(36px,4.3vw,56px)}

/* ============ BLOG: the hub, its cards and its guides ============ */
.blog-hero{padding:64px 0 10px}
.blog-hero .wrap{max-width:900px}
.blog-hero h1{margin-bottom:14px}

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:30px}
.post{display:flex;flex-direction:column;background:var(--deep);border:1px solid var(--line-dark);border-radius:var(--r-card);overflow:hidden;transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.post:hover{border-color:var(--volt);transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.5)}
.post .thumb{position:relative;aspect-ratio:16/9;background:#0A0D18;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.post .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post .thumb.none{display:grid;place-items:center;background:radial-gradient(120% 120% at 20% 0%,rgba(47,75,255,.30),transparent 60%),#0A0D18}
.post .thumb.none span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:26px;letter-spacing:-.02em;color:rgba(255,255,255,.34)}
.post .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.post .meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:13px}
.post .meta time,.post .meta .mins{font-size:13px;color:#6B7488}
.post .meta .dot{width:3px;height:3px;border-radius:50%;background:#464E63;flex:none}
/* one pill, used by the article cards and the guide rows alike */
.post .tag,.guide .tag{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--volt-soft);background:rgba(47,75,255,.14);border:1px solid rgba(47,75,255,.3);border-radius:30px;padding:4px 11px;white-space:nowrap}
.post .when{font-size:13px;color:#6B7488}
.post h2{font-size:21px;line-height:1.28;letter-spacing:-.02em;color:#fff;margin-bottom:10px}
.post p{font-size:15px;line-height:1.6;color:var(--on-dark-mute);margin-bottom:16px}
.post .more{margin-top:auto;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:var(--volt-soft);display:inline-flex;align-items:center;gap:7px}
.post:hover .more{color:#fff}
.post .more svg{transition:transform .3s}
.post:hover .more svg{transform:translateX(3px)}

/* the newest post gets the full width and a bigger picture */
.post.lead{grid-column:1/-1;flex-direction:row;align-items:stretch}
.post.lead .thumb{flex:0 0 52%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line-dark)}
.post.lead .body{padding:34px 36px;justify-content:center}
.post.lead h2{font-size:28px;line-height:1.22}
.post.lead p{font-size:16.5px;margin-bottom:0}
/* the featured card centres its text, so the link sits with it rather than at the floor */
.post.lead .more{margin-top:18px}
.post.lead .thumb img{min-height:100%}
@media(max-width:820px){
  .post.lead{flex-direction:column}
  .post.lead .thumb{flex:none;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line-dark)}
  .post.lead .body{padding:24px}
  .post.lead h2{font-size:22px}
  .posts{gap:22px;grid-template-columns:1fr}
}
.post-empty{grid-column:1/-1;text-align:center;color:var(--on-dark-mute);padding:40px 0}

/* guides are not articles, so they do not look like articles */
.guides{display:grid;gap:16px;max-width:840px;margin:0 auto}
.guide{position:relative;display:flex;align-items:flex-start;gap:18px;padding:22px 26px 22px 24px;border:1px solid var(--line-dark);border-radius:18px;background:rgba(255,255,255,.022);overflow:hidden;transition:border-color .3s,background .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.guide::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--volt);opacity:.5;transition:opacity .3s}
.guide:hover{border-color:var(--volt);background:rgba(47,75,255,.06);transform:translateX(3px)}
.guide:hover::before{opacity:1}
.guide .gi{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(47,75,255,.16);border:1px solid rgba(47,75,255,.32);margin-top:2px}
.guide .gt{flex:1;min-width:0}
.guide .gmeta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:9px}
.guide .gmeta .tag{font-size:10px;padding:3px 10px;letter-spacing:.12em}
.guide .gmeta time,.guide .gmeta .mins{font-size:12.5px;color:#6B7488}
.guide .gmeta .dot{width:3px;height:3px;border-radius:50%;background:#464E63;flex:none}
.guide .gt strong{display:block;color:#fff;font-size:17.5px;letter-spacing:-.015em;margin-bottom:5px;line-height:1.3}
.guide .gd{display:block;color:var(--on-dark-mute);font-size:14.5px;line-height:1.55}
.guide .ga{color:var(--volt-soft);flex:none;align-self:center;transition:transform .3s}
.guide:hover .ga{transform:translateX(3px);color:#fff}
@media(max-width:600px){
  .guide{padding:18px 18px 18px 17px;gap:14px}
  .guide .gi{width:36px;height:36px}
  .guide .gt strong{font-size:16px}
  .guide .ga{display:none}
  /* the meta wraps on a narrow screen, so the separator would dangle at the line end */
  .guide .gmeta .dot{display:none}
  .guide .gmeta{gap:7px 10px}
}

/* a pillar page pointing down at its articles */
.cluster{background:var(--deep);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:22px 24px;margin:32px 0}
.cluster h3{color:#fff;font-size:15px;margin:0 0 12px;font-family:'Space Grotesk',sans-serif;letter-spacing:.02em}
.cluster a{display:block;margin-bottom:8px}
.cluster a:last-child{margin-bottom:0}

/* ============ BLOG POST: breadcrumb, byline, contents ============ */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;margin-bottom:18px}
.crumbs a{color:var(--on-dark-mute)}
.crumbs a:hover{color:#fff}
.crumbs span{color:#464E63}
.crumbs .here{color:var(--volt-soft)}
.byline-row{display:flex;align-items:center;gap:13px;margin:18px 0 34px;padding-bottom:26px;border-bottom:1px solid var(--line-dark)}
.byline-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.byline-row .who{display:block;color:#fff;font-weight:700;font-size:15px;letter-spacing:-.01em}
.byline-row .det{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#6B7488;font-size:13.5px;margin-top:2px}
.byline-row .dot{width:3px;height:3px;border-radius:50%;background:#464E63;flex:none}
.toc{background:rgba(255,255,255,.022);border:1px solid var(--line-dark);border-left:3px solid var(--volt);border-radius:14px;padding:20px 24px;margin:0 0 30px}
.toc-h{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:12px}
.toc ol{margin:0 0 0 0;padding-left:19px}
.prose .toc ol{margin:0;padding-left:19px}
.toc li{margin-bottom:8px;color:#6B7488;font-size:15px}
.toc li:last-child{margin-bottom:0}
.toc a{color:#C9CEDB;text-decoration:none}
.toc a:hover{color:var(--volt-soft);text-decoration:underline;text-underline-offset:3px}
/* an anchored heading must not hide under the sticky nav */
.prose h2{scroll-margin-top:96px}
@media(max-width:600px){.toc{padding:17px 18px}.byline-row{margin:16px 0 28px;padding-bottom:20px}}

/* ---- thank-you page: the spots pill and the pitch block (added 2026-09-22) ----
   The pill carries a live number that has to match skool.com/aibuilderslab/about.
   The pitch block is the long copy that sits under the Wins screenshots. */
.spots{display:inline-flex;align-items:center;gap:10px;background:rgba(47,75,255,.12);border:1px solid rgba(47,75,255,.42);border-radius:999px;padding:9px 18px;margin:0 0 24px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:#C9CEDB}
.spots b{color:#fff}
.spots .dot{width:7px;height:7px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 4px rgba(47,75,255,.22)}

.pitch{max-width:620px;margin:0 auto}
.pitch .eyebrow{margin-bottom:14px}
.pitch h2{margin-bottom:22px}
.pitch p{margin:0 0 15px;font-size:17px;line-height:1.62;color:var(--ink-mute)}
.pitch p.say{color:var(--ink);font-weight:600}
.pitch ul{list-style:none;padding:0;margin:4px 0 20px}
.pitch li{margin:0 0 11px;font-size:17px;line-height:1.5;color:var(--ink-mute);padding-left:30px;position:relative}
.pitch li::before{content:"✅";position:absolute;left:0;top:0}
.pitch .rule{height:1px;background:rgba(11,15,26,.12);margin:26px 0 24px;border:0}
@media(max-width:600px){.pitch p,.pitch li{font-size:16px}.spots{font-size:12.5px;padding:8px 15px}}
.pitch .stats{margin-top:0;text-align:center;gap:18px}
.pitch .stat .n{font-size:38px}