:root{--bg:#13111a;--bg-card:#1a1822;--text:#ffffff;--text-dim:#b8b5c3;--text-faint:#8b8599;--border:rgba(255,255,255,0.08);--accent-blue:#1479fb;--accent-pink:#db93ff;--grad:linear-gradient(90deg,#1479fb,#db93ff);--grad-text:linear-gradient(90deg,#1479fb,#db93ff)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background:var(--bg)}body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit}.container{max-width:1200px;margin:0 auto;padding:0 32px}nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(14px);background:rgba(19,17,26,0.72);border-bottom:1px solid var(--border)}.nav-inner{max-width:1280px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo img{height:28px;width:auto;display:block}.nav-links{display:flex;gap:32px}.nav-links a{color:var(--text-dim);text-decoration:none;font-size:0.93rem;font-weight:500;transition:color 0.2s}.nav-links a:hover{color:var(--text)}.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:100px;font-family:'Manrope',sans-serif;font-weight:600;font-size:0.9rem;text-decoration:none;border:none;cursor:pointer;transition:all 0.25s}.btn-primary{background:var(--grad);background-size:200% 200%;color:white;box-shadow:0 6px 24px rgba(20,121,251,0.32)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(20,121,251,0.48)}.btn-arrow{transition:transform 0.25s}.btn-primary:hover .btn-arrow{transform:translateX(4px)}.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}.nav-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px}.ref-hero{padding:160px 0 40px}.ref-eyebrow{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 14px;border:1px solid var(--border);border-radius:100px;background:rgba(255,255,255,0.03);color:var(--text-dim);margin-bottom:28px;font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase}.ref-eyebrow::before{content:'';width:8px;height:8px;background:var(--accent-pink);border-radius:2px;transform:rotate(45deg)}.ref-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(2.6rem,5.5vw,4.4rem);line-height:1.02;letter-spacing:-0.02em;margin-bottom:18px}.ref-title em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}.ref-meta{color:var(--text-faint);font-size:0.92rem;font-family:'JetBrains Mono',monospace;letter-spacing:0.05em}.ref-body{padding:24px 0 100px;max-width:760px}.ref-body h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:1.85rem;line-height:1.2;letter-spacing:-0.01em;margin:48px 0 16px;color:var(--text)}.ref-body h3{font-family:'Manrope',sans-serif;font-weight:600;font-size:1.05rem;margin:28px 0 10px;color:var(--text)}.ref-body p{color:var(--text-dim);font-size:1rem;line-height:1.7;margin-bottom:16px}.ref-body ul{margin:0 0 20px 22px;color:var(--text-dim)}.ref-body li{margin-bottom:8px;line-height:1.65}.ref-body strong{color:var(--text);font-weight:600}.ref-body a{color:var(--accent-pink);text-decoration:none;border-bottom:1px solid rgba(219,147,255,0.3);transition:border-color 0.2s}.ref-body a:hover{border-bottom-color:var(--accent-pink)}footer{padding:64px 0 32px;border-top:1px solid var(--border);background:rgba(0,0,0,0.2)}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.6fr;gap:56px;margin-bottom:48px}.footer-brand{display:flex;flex-direction:column;gap:12px}.footer-brand img{height:28px;width:auto}.footer-col h4,.footer-cta h4{font-family:'JetBrains Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-faint);margin-bottom:18px;font-weight:500}.footer-col a{display:block;color:var(--text-dim);text-decoration:none;font-size:0.92rem;margin-bottom:12px;transition:color 0.2s}.footer-col a:hover{color:var(--text)}.footer-cta p{color:var(--text-dim);font-size:0.92rem;line-height:1.55;margin-bottom:22px;max-width:30ch}.footer-cta-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:100px;color:white;font-family:'Manrope',sans-serif;font-size:0.93rem;font-weight:600;background:var(--grad);background-size:200% 200%;text-decoration:none;box-shadow:0 6px 24px rgba(20,121,251,0.32);transition:transform 0.25s,box-shadow 0.25s}.footer-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(20,121,251,0.48)}.footer-cta-btn svg{transition:transform 0.25s}.footer-cta-btn:hover svg{transform:translateX(4px)}.footer-bottom{padding-top:32px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;color:var(--text-faint);font-size:0.82rem;flex-wrap:wrap;gap:16px}.footer-bottom-link{color:var(--text-faint);text-decoration:none;transition:color 0.2s}.footer-bottom-link:hover{color:var(--text)}.footer-socials{display:flex;gap:18px;align-items:center}.footer-socials a{display:inline-flex;align-items:center;gap:6px;color:var(--text-faint);text-decoration:none;font-size:0.82rem;transition:color 0.2s}.footer-socials a:hover{color:var(--text)}@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}.footer-cta{grid-column:span 2}.footer-brand{grid-column:span 2}}@media (max-width:768px){.nav-toggle{display:flex}.container{padding:0 20px}.ref-hero{padding:120px 0 28px}.ref-body{padding:16px 0 64px}.footer-bottom{flex-direction:column;align-items:flex-start}}a,button,.btn,.cs-card,.interview-card,.filter-pill,.nav-link{touch-action:manipulation}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{-webkit-overflow-scrolling:touch}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}.reveal{opacity:1 !important;transform:none !important}}@media (max-width:768px){.site-header,.nav-pill{backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important}}a,button,.btn,.cs-card,.interview-card,.filter-pill,.nav-link{touch-action:manipulation}html{-webkit-text-size-adjust:100%}body{-webkit-overflow-scrolling:touch}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}.reveal{opacity:1 !important;transform:none !important}}@media (max-width:768px){.ambient,.ambient::before,.ambient::after,.ambient-cursor{display:none !important}}@media (max-width:960px){.nav-links a{font-size:1.1rem !important;padding:14px 0 !important;min-height:48px;display:flex;align-items:center}.nav-links.is-open{background:rgba(19,17,26,0.97) !important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 32px rgba(0,0,0,0.3)}.nav-links a + a{border-top:1px solid rgba(255,255,255,0.06)}}body.menu-open{overflow:hidden}@media (max-width:768px){body{background:radial-gradient(ellipse 700px 900px at 12% 0%,rgba(20,121,251,0.12),transparent 55%),radial-gradient(ellipse 600px 800px at 88% 100%,rgba(219,147,255,0.08),transparent 55%),radial-gradient(ellipse 800px 1000px at 50% 50%,rgba(20,121,251,0.04),transparent 60%),var(--bg,#13111a) !important;background-attachment:fixed}.section-orb{display:none !important}.hero-orb,.hero-orb-1,.hero-orb-2,.hero-orb-3{animation:none !important}.hero-headline,.hero-lead,.display,.founders-text p,.team-card,.principles-grid,.mission-grid,.section-eyebrow-block h2{max-width:100% !important;overflow-wrap:break-word;word-wrap:break-word}.container{padding-left:20px !important;padding-right:20px !important;box-sizing:border-box;max-width:100% !important}}@media (min-width:769px){body{background:linear-gradient(180deg,rgba(20,121,251,0.030) 0%,rgba(219,147,255,0.022) 28%,rgba(20,121,251,0.024) 56%,rgba(219,147,255,0.020) 82%,rgba(20,121,251,0.026) 100% ),var(--bg,#13111a) !important}}
/* Film-grain overlay, copied verbatim from index.css. Without it, large soft
   gradients band visibly and section transitions look like hard steps. The
   homepage had it; no other stylesheet did. Added 22 Sept 2026. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------------------------
   Referral program page. Chrome above is privacy.css with .privacy- renamed to
   .ref-. Everything below is new: the two-sided deal strip, the steps, the fit
   checklist, the form itself and the FAQ.
   Built 23 October 2026.
--------------------------------------------------------------------------- */

.ref-hero{padding:150px 0 20px}
.ref-lead{color:var(--text-dim);font-size:1.12rem;line-height:1.65;max-width:58ch;margin-top:4px}
.ref-lead strong{color:var(--text);font-weight:600}

/* The deal, both sides, side by side. The visual anchor of the page. */
.ref-deal{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;margin:44px 0 8px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,rgba(20,121,251,0.07),rgba(219,147,255,0.06));overflow:hidden}
.ref-deal-side{padding:34px 36px}
.ref-deal-label{display:block;font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px}
.ref-deal-value{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.06;letter-spacing:-0.02em;color:var(--text)}
.ref-deal-side.is-you .ref-deal-value{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ref-deal-note{color:var(--text-dim);font-size:0.95rem;margin-top:10px;line-height:1.5}
.ref-deal-split{width:1px;background:var(--border);margin:28px 0}

/* Section furniture */
.ref-section{padding:72px 0}
.ref-section-alt{background:rgba(0,0,0,0.16);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ref-h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-0.02em;margin-bottom:14px}
.ref-h2 em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}
.ref-sub{color:var(--text-dim);font-size:1rem;max-width:62ch;margin-bottom:38px;line-height:1.65}

/* Three steps */
.ref-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ref-step{padding:30px 28px;border:1px solid var(--border);border-radius:18px;background:var(--bg-card);transition:border-color 0.25s,transform 0.25s}
.ref-step:hover{border-color:rgba(255,255,255,0.16);transform:translateY(-3px)}
.ref-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;font-weight:700;font-size:0.95rem;margin-bottom:18px}
.ref-step h3{font-size:1.06rem;font-weight:650;margin-bottom:10px;line-height:1.35}
.ref-step p{color:var(--text-dim);font-size:0.95rem;line-height:1.62}

/* Who to refer */
.ref-fit{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.ref-fit-col h3{font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:18px;font-weight:500}
.ref-list{list-style:none;margin:0}
.ref-list li{position:relative;padding-left:30px;margin-bottom:14px;color:var(--text-dim);font-size:0.97rem;line-height:1.6}
.ref-list li strong{color:var(--text);font-weight:600}
.ref-list li::before{position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:700}
.ref-list.is-yes li::before{content:'✓';background:rgba(20,121,251,0.16);color:#6fb0ff}
.ref-list.is-no li::before{content:'✕';background:rgba(255,255,255,0.06);color:var(--text-faint)}

/* The form */
.ref-form-card{max-width:760px;margin:0 auto;padding:40px;border:1px solid var(--border);border-radius:22px;background:var(--bg-card);box-shadow:0 24px 60px rgba(0,0,0,0.3)}
.ref-fieldset{border:none;margin-bottom:34px}
.ref-fieldset:last-of-type{margin-bottom:26px}
.ref-legend{display:flex;align-items:center;gap:11px;font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:20px;font-weight:500}
.ref-legend span{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:6px;background:rgba(255,255,255,0.07);color:var(--text-dim);font-size:0.7rem}
.ref-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.ref-field{display:flex;flex-direction:column;gap:7px}
.ref-field.is-full{grid-column:span 2}
.ref-field label{font-size:0.86rem;font-weight:600;color:var(--text-dim)}
.ref-field label .opt{color:var(--text-faint);font-weight:400}
.ref-field input,.ref-field textarea{width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--text);font-family:'Manrope',system-ui,sans-serif;font-size:0.97rem;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s}
.ref-field input::placeholder,.ref-field textarea::placeholder{color:#6a6578}
.ref-field input:focus,.ref-field textarea:focus{outline:none;border-color:var(--accent-blue);background:rgba(255,255,255,0.05);box-shadow:0 0 0 3px rgba(20,121,251,0.18)}
.ref-field textarea{resize:vertical;min-height:88px;line-height:1.55}

.ref-consent{display:flex;gap:13px;align-items:flex-start;padding:17px 19px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,0.025);margin-bottom:24px}
.ref-consent input{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:var(--accent-blue);cursor:pointer}
.ref-consent label{font-size:0.92rem;color:var(--text-dim);line-height:1.55;cursor:pointer}

.ref-submit{width:100%;justify-content:center;padding:16px 28px;font-size:1rem}
.ref-submit[disabled]{opacity:0.6;cursor:not-allowed;transform:none}
.ref-formnote{text-align:center;color:var(--text-faint);font-size:0.86rem;margin-top:16px;line-height:1.55}
.ref-hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.ref-error{margin-top:16px;padding:13px 16px;border-radius:11px;border:1px solid rgba(255,120,120,0.3);background:rgba(255,80,80,0.08);color:#ffb3b3;font-size:0.9rem}

/* Success state, swapped in for the form */
.ref-success{max-width:760px;margin:0 auto;padding:52px 40px;text-align:center;border:1px solid var(--border);border-radius:22px;background:var(--bg-card)}
.ref-success-tick{width:58px;height:58px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:1.6rem;color:#fff}
.ref-success h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:2rem;margin-bottom:14px}
.ref-success p{color:var(--text-dim);font-size:1rem;line-height:1.7;max-width:48ch;margin:0 auto 14px}

/* FAQ */
.ref-faq{max-width:820px;margin:0 auto}
.ref-faq-item{border-bottom:1px solid var(--border);cursor:pointer}
.ref-faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:1.02rem;font-weight:620;line-height:1.45}
.ref-faq-q::after{content:'+';flex-shrink:0;font-size:1.4rem;font-weight:300;color:var(--text-faint);transition:transform 0.25s,color 0.25s}
.ref-faq-item.open .ref-faq-q::after{transform:rotate(45deg);color:var(--accent-pink)}
.ref-faq-a{max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease}
.ref-faq-item.open .ref-faq-a{max-height:420px;padding-bottom:22px}
.ref-faq-a p{color:var(--text-dim);font-size:0.97rem;line-height:1.7;max-width:70ch}
.ref-faq-a p + p{margin-top:12px}

@media (max-width:860px){
  .ref-deal{grid-template-columns:1fr}
  .ref-deal-split{width:auto;height:1px;margin:0 32px}
  .ref-deal-side{padding:28px 28px}
  .ref-steps{grid-template-columns:1fr}
  .ref-fit{grid-template-columns:1fr;gap:28px}
}
@media (max-width:620px){
  .ref-hero{padding:118px 0 12px}
  .ref-section{padding:52px 0}
  .ref-form-card{padding:26px 20px;border-radius:18px}
  .ref-row{grid-template-columns:1fr;gap:14px}
  .ref-field.is-full{grid-column:span 1}
  .ref-success{padding:40px 24px}
}

/* ---------------------------------------------------------------------------
   Mobile nav. Copied verbatim from about.css, which is the version that works.
   privacy.css - the file this stylesheet was built from - is missing this block
   entirely, so its nav links spill across the header at phone width instead of
   collapsing behind the hamburger. Same bug is live on /privacy and /terms.
   Added 23 October 2026.
--------------------------------------------------------------------------- */
@media (max-width:960px){
  .nav-toggle{display:flex}
  nav .nav-inner{position:relative}
  .nav-links{display:flex !important;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--bg-card,#1a1822);border-top:1px solid var(--border,rgba(255,255,255,0.08));padding:24px 20px;gap:20px;z-index:100;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height 0.3s ease,opacity 0.2s ease,padding 0.3s ease}
  .nav-links.is-open{max-height:400px;opacity:1;pointer-events:auto}
  .nav-links a{font-size:1.05rem;padding:8px 0}
  nav .btn-primary{display:none}
}


/* ---------------------------------------------------------------------------
   THE VISUAL LAYER, lifted verbatim from index.css so this page carries the
   same atmosphere as the homepage rather than the flat chrome privacy.css
   ships with: the fixed drifting ambient orbs, the mouse-following glow, the
   hero orbs, grid, spotlight and constellation, and the reveal-on-scroll
   transition. Only change from the homepage version: .hero was renamed
   .ref-hero on the spotlight hover rule. Added 23 October 2026.
--------------------------------------------------------------------------- */
.ref-hero{position:relative;overflow:hidden}
main{position:relative;z-index:2}
nav{z-index:100}

.ambient-cursor{position:fixed;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(20,121,251,0.08) 0%,transparent 60%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);transition:opacity 0.4s;will-change:transform}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient::before,.ambient::after{content:'';position:absolute;width:700px;height:700px;border-radius:50%;filter:blur(140px);opacity:0.18;animation:drift 20s ease-in-out infinite}
.ambient::before{background:radial-gradient(circle,var(--accent-blue) 0%,transparent 70%);top:-200px;left:-200px}
.ambient::after{background:radial-gradient(circle,var(--accent-pink) 0%,transparent 70%);bottom:-100px;right:-200px;animation-delay:-10s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.05)}66%{transform:translate(-40px,60px) scale(0.95)}}
.hero-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.hero-orb-1{width:640px;height:640px;top:-120px;left:-160px;background:radial-gradient(circle,rgba(20,121,251,0.55) 0%,transparent 65%);animation:orbDrift1 24s ease-in-out infinite}
.hero-orb-2{width:520px;height:520px;top:25%;right:-140px;background:radial-gradient(circle,rgba(219,147,255,0.45) 0%,transparent 65%);animation:orbDrift2 30s ease-in-out infinite}
.hero-orb-3{width:720px;height:720px;bottom:-260px;left:35%;background:radial-gradient(circle,rgba(20,121,251,0.35) 0%,transparent 70%);animation:orbDrift3 36s ease-in-out infinite}
.hero-grid-bg{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:64px 64px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,black 25%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 40%,black 25%,transparent 70%);opacity:0.65}
.hero-spotlight{position:absolute;top:0;left:0;width:700px;height:700px;pointer-events:none;background:radial-gradient(circle,rgba(20,121,251,0.16) 0%,rgba(219,147,255,0.08) 30%,transparent 65%);transform:translate3d(-50%,-50%,0);z-index:1;transition:transform 0.18s ease-out;opacity:0}
.ref-hero:hover .hero-spotlight,.hero-spotlight.active{opacity:1}
.js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity 0.8s cubic-bezier(0.2,0.8,0.2,1),transform 0.8s cubic-bezier(0.2,0.8,0.2,1)}
.js-reveal .reveal.in-view{opacity:1;transform:translateY(0)}
.hero-constellation{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0.55}
.hero-constellation svg{width:100%;height:100%}
.const-dot{fill:#db93ff;animation:dotTwinkle 4s ease-in-out infinite}
.const-dot:nth-child(odd){fill:#1479fb;animation-duration:5s}
.const-dot:nth-child(3n){animation-delay:1.5s}
.const-dot:nth-child(5n){animation-delay:3s}
.const-line{stroke:rgba(20,121,251,0.15);stroke-width:0.5;fill:none;animation:lineFade 6s ease-in-out infinite}
.const-line:nth-child(2n){animation-delay:2s}
.const-line:nth-child(3n){animation-delay:4s}
@keyframes floatA{0%,100%{transform:translate(0,0)}25%{transform:translate(-12px,-16px)}50%{transform:translate(8px,-8px)}75%{transform:translate(-6px,10px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}33%{transform:translate(14px,-10px)}66%{transform:translate(-10px,6px)}}
@keyframes dotTwinkle{0%,100%{opacity:0.2;r:1.5}50%{opacity:1;r:2.5}}
@keyframes lineFade{0%,100%{opacity:0}50%{opacity:0.8}}
@keyframes orbDrift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(120px,80px) scale(1.1)}66%{transform:translate(-50px,140px) scale(0.95)}}
@keyframes orbDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-180px,-100px) scale(1.15)}}
@keyframes orbDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,-120px) scale(0.85)}}

/* The Clutch ask. Sits between the form and the FAQ, and deliberately reads as
   the smaller favour rather than a consolation prize. Stars are the same
   markup and the same Clutch red as the homepage badge. 23 October 2026. */
.ref-review-card{max-width:720px;margin:0 auto;text-align:center;padding:48px 40px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(135deg,rgba(20,121,251,0.06),rgba(219,147,255,0.05))}
.ref-review-stars{display:inline-flex;align-items:center;gap:4px;margin-bottom:20px}
.ref-review-stars svg{width:19px;height:19px;fill:#E8452C;flex-shrink:0}
.ref-review-text{color:var(--text-dim);font-size:1rem;line-height:1.7;max-width:52ch;margin:0 auto 28px}
.ref-review-btn{text-decoration:none}
.ref-review-note{color:var(--text-faint);font-size:0.86rem;line-height:1.55;max-width:46ch;margin:22px auto 0}
.ref-success-alt{color:var(--text-faint);font-size:0.9rem;margin-top:22px;line-height:1.6}
.ref-success-alt a{color:var(--accent-pink);text-decoration:none;border-bottom:1px solid rgba(219,147,255,0.35)}
.ref-success-alt a:hover{border-bottom-color:var(--accent-pink)}
@media (max-width:620px){.ref-review-card{padding:34px 22px}}

/* ---------------------------------------------------------------------------
   HOMEPAGE PARITY PASS, 23 October 2026.
   The chrome inherited from privacy.css renders a flatter page than index.css
   does: smaller display type and plain flat cards. These three overrides close
   that gap using the homepage's own values - the .hero-headline type scale and
   the .metrics-dashboard glass treatment (gradient fill, backdrop blur, masked
   gradient border, inner radial glow).
--------------------------------------------------------------------------- */
:root{--border-strong:rgba(255,255,255,0.16);--border-glow:rgba(20,121,251,0.4);--bg-elev:#1a1722}

/* Display type, matched to .hero-headline on the homepage */
.ref-title{font-size:clamp(3rem,7vw,6rem);line-height:0.96;letter-spacing:-0.025em;margin-bottom:26px}
.ref-h2{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.04;letter-spacing:-0.025em}

/* The deal strip and the form, given the homepage card treatment */
.ref-deal,.ref-form-card,.ref-review-card,.ref-success{position:relative;background:linear-gradient(180deg,rgba(35,28,50,0.55),rgba(18,15,28,0.8));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-strong);box-shadow:0 24px 80px rgba(0,0,0,0.55),0 0 60px rgba(20,121,251,0.08);overflow:hidden}
.ref-deal::before,.ref-form-card::before,.ref-review-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(20,121,251,0.4),transparent 40%,transparent 60%,rgba(219,147,255,0.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ref-deal::after,.ref-form-card::after{content:'';position:absolute;top:-40%;right:-20%;width:70%;height:70%;background:radial-gradient(circle,rgba(20,121,251,0.16) 0%,transparent 60%);pointer-events:none;z-index:0}
.ref-deal > *,.ref-form-card > *,.ref-review-card > *{position:relative;z-index:1}

/* Step cards lift off the ambient background the same way */
.ref-step{background:linear-gradient(180deg,rgba(35,28,50,0.45),rgba(18,15,28,0.7));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ref-step:hover{border-color:var(--border-glow)}

/* ---------------------------------------------------------------------------
   HERO, rebuilt 23 October 2026 to the homepage's shape - owner did not want
   the '// Referral program' eyebrow chip. The homepage puts the Clutch badge
   in that slot instead, so this page now does the same: same markup, same
   rules lifted from index.css, and it doubles as a second route to the review.
   The hero is now the homepage's two-column grid, with the deal card standing
   in for the metrics dashboard on the right.
--------------------------------------------------------------------------- */
.clutch-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 14px;border:1px solid var(--border);border-radius:100px;background:rgba(255,255,255,0.03);backdrop-filter:blur(8px);line-height:1;text-decoration:none;width:fit-content}
.clutch-badge{transition:border-color .2s ease,background .2s ease}
.clutch-stars{display:inline-flex;align-items:center;gap:2px}
.clutch-stars svg{width:14px;height:14px;fill:#E8452C;flex-shrink:0}
.clutch-label{font-size:0.86rem;font-weight:500;color:var(--text-dim);white-space:nowrap}
.clutch-logo{display:inline-flex;align-items:center;gap:5px}
.clutch-mark{width:18px;height:18px;flex-shrink:0}
.clutch-word{font-size:0.92rem;font-weight:700;color:var(--text);letter-spacing:-0.01em}
a.clutch-badge:hover{border-color:var(--border-glow);background:rgba(255,255,255,0.06)}
@keyframes heroEyeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.ref-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:center;margin:24px 0 32px;position:relative;z-index:2}
.ref-hero-left{position:relative}
.ref-hero-right{position:relative}
.ref-hero-btn{text-decoration:none;margin-top:4px;padding:14px 28px;font-size:0.97rem}
.ref-lead{margin-bottom:30px}

/* Stacked, because it now sits in the narrow right column */
.ref-deal{grid-template-columns:1fr;margin:0;border-radius:22px}
.ref-deal-side{padding:26px 30px}
.ref-deal-split{width:auto;height:1px;margin:0 30px;background:var(--border)}
.ref-deal-value{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.ref-deal-note{font-size:0.9rem}

@media (max-width:1024px){
  .ref-hero-grid{grid-template-columns:1fr;gap:40px}
  .ref-hero-right{max-width:560px}
}
@media (max-width:620px){
  .ref-hero-grid{gap:30px;margin-top:12px}
  .ref-deal-side{padding:24px 22px}
  .ref-deal-split{margin:0 22px}
  .clutch-badge{transform:scale(0.92);transform-origin:left center}
}
.hero-eye{margin-bottom:28px;opacity:0;animation:heroEyeIn 0.4s cubic-bezier(0.16,1,0.3,1) 0s forwards}
@media (prefers-reduced-motion:reduce){.hero-eye{opacity:1;animation:none}}

/* ---------------------------------------------------------------------------
   OWNER PASS 2, 23 October 2026. Six things, all from his review:
   full-screen hero, no hard background seams, smaller lead, gradient buttons,
   homepage infographic numbers on the deal card, and the fit checklist cut.
--------------------------------------------------------------------------- */

/* 1. The hero owns the first screen. */
.ref-hero{min-height:100vh;display:flex;align-items:center;padding:110px 0 70px}
.ref-hero > .container{width:100%}
.ref-hero-grid{margin:0}

/* 2. THE BACKGROUND NO LONGER BREAKS.
   Two separate seams caused it. The hero clipped its own orbs at its bottom
   edge, drawing a hard horizontal line across the page, and .ref-section-alt
   painted a flat black band with a 1px border top and bottom. Both are gone:
   the orbs fade out before they reach the edge, and the alternating sections
   are now spacing only, so the fixed ambient layer runs unbroken top to bottom. */
.hero-orbs{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 97%);mask-image:linear-gradient(to bottom,#000 55%,transparent 97%)}
.hero-grid-bg{-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 92%);mask-image:linear-gradient(to bottom,#000 40%,transparent 92%)}
.ref-section-alt{background:none;border-top:none;border-bottom:none}

/* 3. Lead copy: smaller and tighter, so the headline carries the hero. */
.ref-lead{font-size:1.02rem;line-height:1.6;max-width:50ch;color:var(--text-dim);margin-bottom:34px}
.ref-lead strong{color:var(--text);font-weight:650}

/* 4. Buttons, using index.css's gradient rather than privacy.css's.
   privacy.css defines --grad at 90deg AND stretches it with
   background-size:200% 200%, so only the blue half was ever visible. That is
   why these read as flat blue next to the homepage. Same 135deg gradient and
   the same shine sweep as index.css now. */
.btn-primary{background:linear-gradient(135deg,#1479fb 0%,#db93ff 100%) !important;background-size:auto !important;position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(20,121,251,0.35)}
.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transition:left 0.6s}
.btn-primary:hover::before{left:200%}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(20,121,251,0.55)}
.btn-primary > *{position:relative;z-index:1}
.footer-cta-btn{background:linear-gradient(135deg,#1479fb 0%,#db93ff 100%);background-size:auto}

/* 5. The deal numbers, on .dash-stat-num from the homepage: Manrope 800,
   tight tracking, gradient clipped to the glyphs. */
.ref-deal-num{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(2.6rem,4vw,3.7rem);line-height:1;letter-spacing:-0.045em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;display:flex;align-items:baseline;gap:0}
.ref-deal-prefix{font-size:inherit}
.ref-deal-head{font-family:'Manrope',system-ui,sans-serif;font-size:0.95rem;color:var(--text);line-height:1.35;letter-spacing:-0.005em;font-weight:600;margin-bottom:7px}
.ref-deal-note{color:var(--text-faint);font-size:0.86rem;font-weight:400;line-height:1.5;margin-top:0}
.ref-deal-label{margin-bottom:12px}
.ref-deal-side{padding:24px 30px}

/* 6. The fit line that replaced the good-fit / not-a-fit grid. */
.ref-fit-line{text-align:center;max-width:56ch;margin:-20px auto 36px;color:var(--text-faint);font-size:0.94rem;line-height:1.6}
.ref-fit-line strong{color:var(--text-dim)}


/* The reveal animation must never be able to hide content permanently. The
   opacity:0 only applies once JS has set .js-reveal on <html>, and a hard
   backstop un-hides everything 2.5s after load in case the observer never
   fires. A page whose whole job is a form cannot risk an invisible form. */
.js-reveal.reveal-failsafe .reveal{opacity:1 !important;transform:none !important}


/* THE GRADIENT WAS NEVER SHOWING. .dash-stat-num is display:flex, which makes
   the element full-width, so the blue-to-pink gradient was painted across the
   whole card while the digits sat in the left-hand (blue) end of it. Shrinking
   the box to the glyphs means each number carries the full gradient. Same bug
   is live on the homepage's own stats. 23 October 2026. */
.ref-deal-num{width:fit-content;max-width:100%}

/* More air in the hero, per the owner. */
.ref-title{margin-bottom:34px}
.ref-lead{margin-bottom:42px;line-height:1.68}
.ref-hero-grid{gap:92px}
.ref-hero{padding:130px 0 90px}
.ref-deal-side{padding:30px 34px}
.ref-deal-num{margin-bottom:12px}
.ref-deal-head{margin-bottom:9px}
@media (max-width:1024px){.ref-hero-grid{gap:48px}}
@media (max-width:620px){.ref-hero{padding:104px 0 56px}.ref-title{margin-bottom:24px}.ref-lead{margin-bottom:32px}}