/* superfandom.ai
   Ported from superfandom_mock_v6.html, the approved visual reference.
   Token values are copied exactly. Do not retune them here; the mock wins.
   Inline styles from the mock are lifted into named classes at the foot
   of this file so the markup stays readable. */

:root{
  --navy:#212A33; --navy2:#1B232B; --paper:#FDFBE9; --ink:#F4F6F8; --mute:#A6B0BA;
  --gold:#E8B33C; --amber:#DF8B33; --coral:#E0632F; --crim:#C33A46; --pink:#ED2A7B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--navy);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.grad{background:linear-gradient(96deg,#ED2A7B,#EA4A63 45%,#E96A4E);-webkit-background-clip:text;background-clip:text;color:transparent}
.kick{font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--coral)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:#7D8791}

/* nav */
nav{position:sticky;top:0;z-index:60;background:#111;border-bottom:1px solid rgba(255,255,255,.09)}
.navin{display:flex;align-items:center;justify-content:space-between;padding:15px 0;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;cursor:pointer}
.logo svg{height:24px;display:block}
.logo .wm{font-size:1.15rem;font-weight:700;letter-spacing:-.3px}
.tabs{display:flex;gap:22px;flex-wrap:wrap}
.tab{background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);opacity:.6;cursor:pointer;padding:4px 0;border-bottom:2px solid transparent}
.tab.on{opacity:1;border-bottom-color:var(--coral)}
.tab:hover{opacity:1}
.login{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;font-family:inherit;font-weight:600;font-size:13px;border-radius:8px;padding:7px 16px;cursor:pointer}

/* sections */
section{padding:64px 0;border-top:1px solid rgba(255,255,255,.07)}
section:first-child{border-top:none}
.paper{background:var(--paper);color:#1E252C;border-top:none}
.paper .eyebrow{color:#8A8560}
h1{font-size:3.1rem;font-weight:800;letter-spacing:-1.4px;line-height:1.06;max-width:17ch}
h2{font-size:2.05rem;font-weight:800;letter-spacing:-.6px;line-height:1.14;margin:12px 0 20px;max-width:22ch}
h3{font-size:1.22rem;font-weight:700;margin-bottom:6px}
p{font-size:1.02rem;font-weight:400;color:var(--mute);max-width:64ch}
.paper p{color:#4A535C}
p.big{font-size:1.22rem;font-weight:500;color:var(--ink)}
.paper p.big{color:#1E252C}
p+p{margin-top:9px}
.hero{padding:82px 0 40px}
.hero .lines{margin-top:26px}
.hero .lines div{font-size:1.28rem;font-weight:500;color:#DCE2E8}
/* The last line of the collider list is the promise of how we do it, so it
   carries the wash rather than sitting flat with the four above it. Weight
   goes to 600 because the gradient muddies at 500. To make it solid coral
   instead, swap .grad off the element in index.html. */
.lines .promise{font-weight:600;margin-top:10px}
.hero .tag{margin-top:22px;font-size:1.05rem;font-weight:700}

/* three doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px;align-items:stretch}
.door{background:var(--navy2);border:1px solid rgba(255,255,255,.11);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.door .bar{height:7px}
.d1 .bar{background:linear-gradient(90deg,#F0C75F,var(--gold))}
.d2 .bar{background:linear-gradient(90deg,var(--gold),var(--coral))}
.d3 .bar{background:linear-gradient(90deg,var(--coral),var(--crim))}
.door .body{padding:26px 24px 24px;display:flex;flex-direction:column;flex:1}
.door .nm{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase}
.d1 .nm{color:var(--gold)}.d2 .nm{color:var(--coral)}.d3 .nm{color:#E2564F}
.door .lead{font-size:1.3rem;font-weight:700;margin:12px 0 10px;letter-spacing:-.3px;line-height:1.2}
.door .txt{font-size:.94rem;color:var(--mute);flex:1}
.door .how{font-size:.85rem;color:#8E98A2;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}
.door .how b{color:#C3CBD3;font-weight:600}
.door .unit{margin-top:16px;font-size:1.05rem;font-weight:700}
.door .cta{margin-top:12px;display:block;width:100%;text-align:center;font-family:inherit;font-weight:700;font-size:.92rem;padding:12px;border-radius:10px;border:none;cursor:pointer;background:linear-gradient(96deg,var(--coral),var(--crim));color:#fff}
.d1 .cta{background:linear-gradient(96deg,var(--gold),var(--amber))}
.underdoors{margin-top:24px;font-size:1rem;font-weight:600;color:#C3CBD3}

/* method */
.figure{margin:22px 0 6px;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.09)}
.figure img{display:block;width:100%}
.cap{font-size:.8rem;color:#8A8560;margin-top:9px;font-style:italic}
.mblock{margin-top:34px}

/* routing */
.bands{margin-top:26px;display:grid;gap:14px}
.band{border:1px solid rgba(255,255,255,.12);border-left-width:5px;border-radius:12px;padding:20px 24px;background:rgba(255,255,255,.025)}
.b1{border-left-color:var(--crim)}.b2{border-left-color:var(--coral)}.b3{border-left-color:var(--amber)}.b4{border-left-color:var(--gold)}
.band h3{font-size:1.12rem}
.band .go{margin-top:9px;font-size:.9rem;font-weight:700;color:var(--coral);display:inline-block}

/* sub page bits */
.rows{margin-top:20px}
.row{padding:20px 0;border-top:1px solid rgba(255,255,255,.1)}
.row:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.row .n{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--coral);text-transform:uppercase}
.row h3{margin-top:6px}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.show{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px;align-items:start}
.show img{display:block;width:100%;border-radius:11px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
@media(max-width:860px){.show{grid-template-columns:1fr}}
.act{margin-top:22px}
.thumb{margin:0}
.thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:11px}
.thumb figcaption{margin-top:9px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#8A8560}
.portrait{margin-top:26px;max-width:560px;border-radius:14px;overflow:hidden;box-shadow:0 24px 56px rgba(0,0,0,.45)}
.portrait img{display:block;width:100%}
.price{margin-top:14px;font-size:2.1rem;font-weight:800}
.sub{font-size:.95rem;color:var(--mute)}
.btn{display:inline-block;margin-top:20px;background:linear-gradient(96deg,var(--coral),var(--crim));color:#fff;font-weight:700;font-size:.95rem;padding:13px 30px;border-radius:11px;border:none;cursor:pointer;font-family:inherit}
.btn.ghost{background:none;border:1px solid rgba(255,255,255,.3)}
.refuse li{list-style:none;font-size:1.05rem;font-weight:500;padding:11px 0 11px 26px;position:relative;border-top:1px solid rgba(255,255,255,.09);max-width:60ch}
.refuse li:before{content:"";position:absolute;left:0;top:19px;width:9px;height:2px;background:var(--crim)}
.spread{margin-top:18px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.spread img{display:block;width:100%}
.cap2{font-size:.82rem;color:#8E98A2;margin-top:9px;font-style:italic}
.twoup{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:940px}
.shot{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.shot img{display:block;width:100%}
@media(max-width:760px){.twoup{grid-template-columns:1fr}}
.note{font-size:.86rem;color:#7D8791;font-style:italic;margin-top:10px}
footer{padding:54px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.88rem;color:#7D8791}
footer a{color:#A6B0BA;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:#fff}
@media(max-width:860px){.doors{grid-template-columns:1fr}h1{font-size:2.2rem}h2{font-size:1.6rem}.gal{grid-template-columns:repeat(2,1fr)}}

/* ---- lifted from the mock's inline styles ---- */

.h1-home{margin-top:18px;color:#FFFFFF;max-width:none;font-size:2.45rem}
.h1-sub{margin-top:14px}
.hero-note{margin-top:36px}
.logo-rail{display:block;width:100%;max-width:1020px;margin-top:16px}
.tight{padding-top:8px}
.lead-in{margin-top:26px}
.mblock-cap{margin-top:20px;font-style:italic}
.grad-lead{margin-top:28px;font-size:1.8rem}
.holding{color:#C3CBD3;margin-top:8px}
.taste{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--coral);text-transform:uppercase}
.note-plain{color:#FFFFFF;font-style:normal}
.gal .thumb figcaption{color:#FFFFFF}
.gal .thumb.wide img{aspect-ratio:16/9}
.after{margin-top:22px}
.after-tight{margin-top:12px}
.after-wide{margin-top:26px}
.closer{text-align:center}
.closer h2{max-width:100%;margin:0 auto;font-size:2.6rem}
.closer .sub{margin-top:20px;max-width:100%}
.closer .btn+.btn{margin-left:10px}
.contact-h2{margin:10px auto 26px;max-width:100%}
.sign-off{max-width:100%;margin:0 auto;font-size:2.4rem}
.inline-go{display:inline;font-size:inherit;font-weight:700;color:var(--coral)}
.aside{margin-top:14px;font-style:italic}
.mw20{max-width:20ch}.mw22{max-width:22ch}.mw24{max-width:24ch}.mw26{max-width:26ch}
.mw28{max-width:28ch}.mw30{max-width:30ch}.mw32{max-width:32ch}.mwnone{max-width:none}

/* the question that opens About: coral field, black type, no mark */
.quote-field{background:linear-gradient(115deg,#ED2A7B,#E96A4E);border-top:none;padding:72px 0}
.quote-field .mark{font-size:84px;font-weight:800;color:rgba(0,0,0,.22);line-height:.7;margin-bottom:18px}
.quote-field p{color:#111;font-size:1.25rem;font-weight:700;max-width:none}
.quote-field h2{color:#111;max-width:none;margin:10px 0 14px}
.quote-field .by{color:rgba(0,0,0,.55);font-size:.9rem;font-weight:600;margin-top:22px}

/* email capture */
.capture{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.capture input{font-family:inherit;font-size:.95rem;padding:13px 18px;border-radius:11px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);color:#fff;min-width:280px}
.capture input::placeholder{color:#8E98A2}
.capture .btn{margin-top:0}

/* ---- accessibility ---- */

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#111;color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}