/* ============================================================
   BORG SITES, Outreach landing page (tryborgsites.com)
   Self-contained stylesheet. This is a SEPARATE deploy, so the
   design system is inlined here (no dependency on the main site).
   Values mirror site/assets/css/tokens.css: the LIGHT, premium
   system with the brand gradient used as accents only.
   No external hosts: fonts are self-hosted locally below.
   ============================================================ */

/* ---------- Self-hosted fonts (local only, no CDN) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-700.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/sora-800.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('/assets/fonts/fraunces-italic-var.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --brand-1:#2E7DF6; --brand-2:#7B3FE4; --brand-3:#E0359E; --brand-4:#F24BB5;
  --accent:#FF6B4A;

  --bg:#F5F6FB; --surface:#FFFFFF; --panel:#EEF1F9; --panel-2:#E4E8F4;
  --ink:#0B1031; --dim:#48527A; --faint:#7681A6;
  --hairline:rgba(11,16,49,.10); --hairline-2:rgba(11,16,49,.06); --hairline-strong:rgba(11,16,49,.16);
  --dark:#0A0E27;
  --ok:#0F8A3C; --ok-bg:#E6F7EC; --ok-bd:#BFE9CD;

  --grad-brand:linear-gradient(115deg,var(--brand-1) 0%,var(--brand-2) 40%,var(--brand-3) 74%,var(--brand-4) 100%);
  --grad-text:linear-gradient(100deg,#2E7DF6 0%,#7B3FE4 40%,#E0359E 74%,#F24BB5 100%);
  --grad-soft:linear-gradient(120deg,rgba(46,125,246,.14),rgba(224,53,158,.12));

  --shadow-soft:0 30px 60px -30px rgba(20,26,60,.18);
  --shadow-lift:0 44px 90px -40px rgba(20,26,60,.30);
  --shadow-sm:0 12px 30px -18px rgba(20,26,60,.22);
  --glow-brand:0 24px 70px -24px rgba(123,63,228,.45);

  --font-display:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;

  --radius:18px; --radius-lg:24px; --radius-xl:30px; --radius-xs:10px; --radius-pill:999px;
  --container:1120px; --container-narrow:720px;
  --section-y:clamp(4rem,3rem + 6vw,7.5rem);
  --gutter:clamp(1.15rem,.6rem + 2.4vw,2.4rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--bg);
  line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.06;letter-spacing:-.022em;font-weight:700}
::selection{background:rgba(123,63,228,.18)}
:focus-visible{outline:2px solid var(--brand-1);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:var(--container-narrow)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.grad-text{color:var(--brand-2);-webkit-text-fill-color:currentColor}}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-2);margin-bottom:1.15rem;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad-brand);flex:none}
.lead{color:var(--dim);font-size:clamp(1.02rem,.96rem + .4vw,1.22rem);line-height:1.6;max-width:56ch}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--surface);color:var(--ink);padding:.7rem 1.1rem;border-radius:0 0 var(--radius-xs) 0;box-shadow:var(--shadow-sm)}
.skip-link:focus{left:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1;
  padding:.92rem 1.5rem;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .28s var(--ease-out),box-shadow .3s,background .3s,color .3s,border-color .3s;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--glow-brand)}
.btn-primary:hover{box-shadow:0 30px 80px -22px rgba(123,63,228,.6)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{border-color:rgba(11,16,49,.2);box-shadow:var(--shadow-soft)}
.btn-lg{padding:1.05rem 1.9rem;font-size:1.05rem}
.btn-block{display:flex;width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

.link-arrow{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--brand-2);transition:gap .25s var(--ease-out),color .2s}
.link-arrow svg{width:1.05em;height:1.05em;flex:none}
.link-arrow:hover{gap:.65rem;color:var(--ink)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:background .3s,box-shadow .3s,border-color .3s}
.hdr.scrolled{background:rgba(245,246,251,.82);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom-color:var(--hairline-2)}
.hdr-in{display:flex;align-items:center;gap:1.2rem;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
.brand .mark{width:34px;height:34px;border-radius:50%;background:url("/assets/img/borg360-mark.png") center/contain no-repeat;position:relative;filter:drop-shadow(0 4px 10px rgba(123,63,228,.3));flex:none}
.brand .mark__orbit{position:absolute;inset:-3px;border-radius:50%;pointer-events:none}
.brand .mark__orbit::after{content:"";position:absolute;top:-2px;left:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;background:var(--grad-brand);box-shadow:0 0 5px 1px rgba(224,53,158,.55)}
@media (prefers-reduced-motion:no-preference){.brand .mark__orbit{animation:brandOrbit 8s linear infinite}}
@keyframes brandOrbit{to{transform:rotate(360deg)}}
.brand b{font-weight:800}
.hdr-spacer{margin-left:auto}
.hdr .navlink{font-weight:500;font-size:.95rem;color:var(--dim);transition:color .2s;margin-right:1.4rem}
.hdr .navlink:hover{color:var(--ink)}
.hdr .btn{padding:.7rem 1.25rem;font-size:.92rem}
@media (max-width:640px){.hdr .navlink{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:clamp(3rem,2rem + 6vw,6rem) 0 clamp(2.5rem,2rem + 4vw,4.5rem);overflow:hidden}
.hero-aura{position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:0;pointer-events:none}
.hero-aura::before,.hero-aura::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.hero-aura::before{width:48vw;height:48vw;left:-8vw;top:-8vw;background:radial-gradient(circle at 40% 40%,rgba(46,125,246,.42),transparent 62%)}
.hero-aura::after{width:44vw;height:44vw;right:-6vw;top:2vh;background:radial-gradient(circle at 50% 50%,rgba(224,53,158,.34),rgba(123,63,228,.24) 45%,transparent 66%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4vw,4.5rem);align-items:center}
.hero-copy{max-width:38rem}
.hero h1{font-size:clamp(2.35rem,1.6rem + 3.5vw,4rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin-top:.2rem}
.hero-sub{margin-top:1.5rem;color:var(--dim);font-size:clamp(1.05rem,.98rem + .45vw,1.28rem);line-height:1.55;max-width:40ch}
.hero-cta{margin-top:2.1rem;display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}
.hero-trust{margin-top:1.6rem;display:flex;align-items:center;gap:.6rem;color:var(--faint);font-size:.9rem;font-weight:500}
.hero-trust .dot{width:7px;height:7px;border-radius:50%;background:var(--grad-brand);flex:none}

/* hero visual: a floating "preview" browser mockframe */
.hero-viz{position:relative}
.hero-viz .browser{transform:rotate(-1.2deg);transition:transform .5s var(--ease-out)}
.hero-viz:hover .browser{transform:rotate(0)}
.hero-viz .float-tag{
  position:absolute;right:-.4rem;bottom:-1rem;z-index:3;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-pill);
  padding:.55rem .95rem;box-shadow:var(--shadow-soft);
  font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--ink);
}
.hero-viz .float-tag .g{width:9px;height:9px;border-radius:50%;background:var(--grad-brand);flex:none}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.4rem}
  .hero-viz{order:-1;max-width:520px}
}

/* ============================================================
   BROWSER MOCKFRAME (pure CSS, no cross-origin iframes/images)
   ============================================================ */
.browser{width:100%;background:var(--surface);border-radius:16px;overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--shadow-lift)}
.browser-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .95rem;background:linear-gradient(var(--panel),#e7ebf6);border-bottom:1px solid var(--hairline-2)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#cfd6e8;flex:none}
.browser-bar i:nth-child(1){background:#ff6058}.browser-bar i:nth-child(2){background:#ffbd2e}.browser-bar i:nth-child(3){background:#28c93f}
.browser-bar .url{margin-left:.6rem;flex:1;min-width:0;height:22px;border-radius:999px;background:var(--surface);border:1px solid var(--hairline-2);display:flex;align-items:center;padding:0 .7rem;font:500 .72rem/1 var(--font-body);color:var(--faint);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* the "rendered site" inside the frame, drawn entirely with CSS */
.mock{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--mock-bg,#fff);padding:12% 9%;display:flex;flex-direction:column;gap:7%}
.mock::before{content:"";position:absolute;inset:0 0 auto 0;height:16%;background:var(--mock-bar,rgba(11,16,49,.05))}
.mock .m-nav{position:absolute;top:5.5%;left:9%;right:9%;height:5%;display:flex;align-items:center;gap:6%}
.mock .m-nav .dotmark{width:16px;height:16px;border-radius:50%;background:var(--mock-accent,var(--grad-brand));flex:none}
.mock .m-nav .barline{height:6px;border-radius:4px;background:rgba(11,16,49,.16);flex:1;max-width:14%}
.mock .m-nav .barline:last-child{max-width:10%;margin-left:auto}
.mock .m-h{width:70%;height:12%;border-radius:8px;background:var(--mock-accent,var(--grad-brand));margin-top:8%}
.mock .m-sub{width:52%;height:6%;border-radius:6px;background:rgba(11,16,49,.14)}
.mock .m-sub.short{width:38%}
.mock .m-btnrow{display:flex;gap:5%;margin-top:1%}
.mock .m-btn{width:22%;height:8%;border-radius:999px;background:var(--mock-accent,var(--grad-brand))}
.mock .m-btn.ghost{background:transparent;border:2px solid rgba(11,16,49,.16)}
.mock .m-cards{display:flex;gap:5%;margin-top:auto}
.mock .m-cards span{flex:1;height:26%;border-radius:10px;background:var(--mock-card,rgba(11,16,49,.06));border:1px solid rgba(11,16,49,.05)}
.mock.mock-serif .m-h{background:var(--mock-accent);border-radius:4px}

/* per-template accents (evocative, not literal copies) */
.mock-bistro{--mock-bg:#FBF6EF;--mock-bar:#241a12;--mock-accent:#C2461D;--mock-card:#F0E4D4}
.mock-aurora{--mock-bg:#F4F7FF;--mock-bar:#0b1031;--mock-accent:linear-gradient(115deg,#2E7DF6,#7B3FE4);--mock-card:#E7EEFF}
.mock-bloom{--mock-bg:#FBF3F7;--mock-bar:#3a2130;--mock-accent:linear-gradient(115deg,#E0359E,#F24BB5);--mock-card:#F6E1EC}
.mock-haven{--mock-bg:#F2F6F3;--mock-bar:#16241c;--mock-accent:#2F7D5B;--mock-card:#DFEBE3}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:var(--section-y) 0;position:relative}
.sec--tight{padding:clamp(2.5rem,2rem + 3vw,4.5rem) 0}
.sec--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--panel) 40%,var(--panel) 60%,var(--bg) 100%)}
.sec-head{max-width:60ch}
.sec-head.center{text-align:center;margin:0 auto}
.sec-head h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,3.1rem);font-weight:800;margin-top:.6rem;letter-spacing:-.03em}
.sec-head p{margin-top:1.05rem}
.sec-head.center p{margin-left:auto;margin-right:auto}

/* value cards */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(1rem,.6rem + 1.4vw,1.6rem);margin-top:clamp(2rem,3vw,3.2rem)}
.vcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:clamp(1.5rem,1.2rem + 1vw,2rem);box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.vcard .vico{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius);background:var(--grad-soft);border:1px solid var(--hairline);color:var(--brand-2);margin-bottom:1.05rem}
.vcard .vico svg{width:25px;height:25px}
.vcard h3{font-size:1.22rem;margin-bottom:.5rem}
.vcard p{color:var(--dim);font-size:.96rem}

/* sample previews: the REAL, live templates, played from borgsites.com */
.samples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(1.2rem,2vw,2rem);margin-top:clamp(2rem,3vw,3.2rem)}
.scard{position:relative}
.scard .browser{transition:transform .4s var(--ease-out),box-shadow .4s}
.scard:hover .browser{transform:translateY(-6px);box-shadow:0 50px 100px -44px rgba(20,26,60,.4)}
/* live hero video, poster paints first so the card never pops in empty */
.scard .screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel-2)}
.scard .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--panel-2)}
.scard-meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1rem;padding:0 .15rem}
.scard-name{font-family:var(--font-display);font-weight:700;font-size:1.12rem}
.scard-open{display:inline-flex;align-items:center;gap:.35rem;margin-left:.6rem;font:600 .8rem/1 var(--font-display);color:var(--brand-2);opacity:0;transform:translateY(3px);transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)}
.scard:hover .scard-open,.scard:focus-within .scard-open{opacity:1;transform:none}
.scard-cat{font-size:.82rem;color:var(--faint);font-weight:500;text-align:right;white-space:nowrap}
.scard-desc{color:var(--dim);font-size:.92rem;margin-top:.5rem;padding:0 .15rem}
/* the whole card is the link (covers frame + meta) */
.scard-link{position:absolute;inset:0;z-index:3;border-radius:var(--radius-lg)}
.samples-foot{margin-top:2rem;text-align:center}

/* the "how it works / built hosted handled" strip */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.4rem);margin-top:clamp(2rem,3vw,3rem)}
.trio .titem{border-top:2px solid var(--hairline);padding-top:1.2rem;position:relative}
.trio .titem::before{content:"";position:absolute;top:-2px;left:0;width:46px;height:2px;background:var(--grad-brand)}
.trio .titem .n{font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.trio .titem h3{font-size:1.3rem;margin:.55rem 0 .5rem}
.trio .titem p{color:var(--dim);font-size:.96rem}
@media (max-width:760px){.trio{grid-template-columns:1fr;gap:1.6rem}}

/* ============================================================
   LEAD FORM
   ============================================================ */
.lead{position:relative}
.lead-card{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lift);padding:clamp(1.6rem,1.2rem + 2vw,2.8rem);position:relative;overflow:hidden;
}
.lead-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad-brand)}
.lead-head{margin-bottom:1.6rem}
.lead-head h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-top:.5rem}
.lead-head p{color:var(--dim);margin-top:.8rem;font-size:1.02rem}

.form-grid{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr}
.field{display:grid;gap:.45rem}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink)}
.field label .opt{color:var(--faint);font-weight:500;font-size:.82rem}
.field .req{color:var(--brand-3)}
.input,.textarea{
  width:100%;padding:.9rem 1rem;background:var(--surface);color:var(--ink);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-xs);
  font-family:var(--font-body);font-size:1rem;line-height:1.45;
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.textarea:focus{outline:none;border-color:var(--brand-1);box-shadow:0 0 0 4px rgba(46,125,246,.16)}
.textarea{resize:vertical;min-height:120px}
.field-error{color:#C2461D;font-size:.82rem;font-weight:500;margin-top:.1rem}
.input.invalid,.textarea.invalid{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,107,74,.14)}

/* honeypot: visually + programmatically hidden, never shown to humans */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

.form-foot{margin-top:1.6rem;display:flex;flex-direction:column;gap:1rem}
.form-submit-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.form-fine{color:var(--faint);font-size:.86rem;line-height:1.55;max-width:52ch}
.form-fine b{color:var(--dim);font-weight:600}
.form-status{display:none;border-radius:var(--radius-xs);padding:.9rem 1.1rem;font-size:.94rem;line-height:1.5}
.form-status.is-error{display:block;background:#FDECE6;border:1px solid #F6C9B6;color:#9A2E0C}
.form-status.is-busy{display:block;background:var(--panel);border:1px solid var(--hairline);color:var(--dim)}

.assure-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.assure{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--dim);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:.5rem .95rem}
.assure svg{width:15px;height:15px;color:var(--brand-2)}

@media (max-width:620px){.form-grid{grid-template-columns:1fr}}

/* ============================================================
   FINAL NOTE + FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--hairline);padding:3rem 0 2.4rem;margin-top:var(--section-y)}
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot .brand{font-size:1.18rem}
.foot-tag{color:var(--dim);margin-top:.85rem;max-width:38ch;font-size:.93rem}
.foot-addr{color:var(--faint);margin-top:.85rem;font-size:.84rem;line-height:1.6;font-style:normal}
.foot-links{display:flex;flex-wrap:wrap;gap:1.6rem}
.foot-links a{color:var(--dim);font-size:.92rem;transition:color .2s}
.foot-links a:hover{color:var(--ink)}
.foot-bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--hairline-2);color:var(--faint);font-size:.84rem}

/* ============================================================
   THANK-YOU PAGE
   ============================================================ */
.thanks{min-height:70vh;display:grid;place-items:center;text-align:center;padding:clamp(3rem,6vw,6rem) 0}
.thanks-inner{max-width:640px;margin:0 auto}
.thanks-badge{width:82px;height:82px;border-radius:50%;margin:0 auto 1.8rem;display:grid;place-items:center;background:var(--grad-brand);box-shadow:var(--glow-brand);color:#fff}
.thanks-badge svg{width:38px;height:38px}
.thanks h1{font-size:clamp(2.1rem,1.5rem + 2.8vw,3.4rem);font-weight:800;letter-spacing:-.03em}
.thanks .lead{margin:1.2rem auto 0}
.thanks-steps{list-style:none;margin:2.4rem auto 0;max-width:460px;text-align:left;display:grid;gap:.9rem}
.thanks-steps li{display:flex;gap:.85rem;align-items:flex-start;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:1rem 1.15rem;box-shadow:var(--shadow-sm)}
.thanks-steps .tn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.85rem}
.thanks-steps .tt{font-size:.96rem;color:var(--dim)}
.thanks-steps .tt b{color:var(--ink);font-weight:600;font-family:var(--font-display)}
.thanks-cta{margin-top:2.6rem;display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
[data-stagger] > *{transition-delay:calc(var(--i,0) * 70ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  .hero-viz .browser{transform:none}
}