/* NewFans: split waitlist hero and creator feed. Layout follows Educo's meta.com tokens (24px radius, pills, surface);
   colour and type follow the NewFans brandbook: #189BE8, #59CBE8, #9D75FC, black, Helvetica. */
:root{
  --ink:#1c1e21; --ink-2:#55657a; --ink-strong:#000;
  --surface:#f1f6fa; --line:#dee3e9;
  --brand:#189be8; --sky:#59cbe8;
  --blue:#0b76b8; --blue-hover:#095f95; /* a darker step of the brand blue: white text on #189be8 is only 3:1, too low for buttons and links */
  --radius:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;color:var(--ink-strong)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;padding:8px 16px;border-radius:100px}
.skip:focus{left:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border:0;border-radius:100px;font:inherit;font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .2s}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn-lg{height:52px;padding:0 32px}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-hover)}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{background:#e8f4fc}

.bar{position:fixed;inset:0 0 auto 0;z-index:40;height:64px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.05);transform:translateY(-100%);visibility:hidden;transition:transform .25s,visibility .25s}
.bar.show{transform:none;visibility:visible}
.brand img{width:150px;height:auto}

.split{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.split-left{position:relative;overflow:hidden;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;padding:64px 48px}
/* Giant cropped emblem, as on the brandbook cover slides. */
.watermark{position:absolute;right:-16%;bottom:-30%;width:86%;height:auto;filter:brightness(0) invert(1);opacity:.14;pointer-events:none}
.split-copy{position:relative;width:100%;max-width:480px}
.logo{width:190px;height:auto}
.split-copy h1{color:#fff;font-size:clamp(28px,2.7vw,38px);line-height:1.2;margin-top:24px}
.split-right{display:flex;align-items:center;justify-content:center;padding:64px 32px}
.wait{width:min(400px,100%)}
.wait h2{font-size:32px;line-height:1.15}
.wait-sub{color:var(--ink-2);margin:8px 0 20px}
.wait label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
.wait input:not([type=checkbox]),.wait select{width:100%;height:48px;padding:0 14px;border:1px solid #cbd2d9;border-radius:12px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.wait input::placeholder{color:#6b7b8c}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wait .agree{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--ink-2);margin:18px 0}
.agree input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--blue)}
.agree a{color:var(--blue)}
.wait .btn{width:100%}
.hp{position:absolute;left:-9999px}
.status{font-size:14px;color:var(--ink-2);margin-top:12px;min-height:21px}

.feed{background:var(--surface);padding:72px 16px 96px}
.feed-col{max-width:880px;margin:0 auto}
.feed h2{font-size:clamp(30px,3vw,42px);line-height:1.15}
.sample{color:var(--ink-2);margin-top:6px}
.post{background:#fff;border-radius:var(--radius);overflow:hidden;margin-top:32px}
.post-head{display:flex;align-items:center;gap:12px;padding:20px 24px 0}
.post-head b{display:flex;align-items:center;gap:5px;font-weight:600;line-height:1.2}
.post-head small{display:block;color:var(--ink-2);font-size:14px}
.avatar{flex:none;width:48px;height:48px;border-radius:50%}
.tick{width:17px;height:17px;color:var(--blue)}
.source{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);padding:4px 12px;border-radius:100px}
.caption{padding:14px 24px 18px;font-size:17px}
.caption a{color:var(--blue)}
.post video{width:100%;height:auto;background:#000}

.reels{margin-top:40px}
.reels h3{font-size:24px}
.reel-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:16px;margin-top:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.reel-row figure{scroll-snap-align:start}
.reel-row video{width:100%;height:auto;border-radius:var(--radius);background:#000}
.reel-row figcaption{font-size:14px;color:var(--ink-2);margin-top:8px}

.final{position:relative;overflow:hidden;background:var(--brand);text-align:center;padding:96px 24px}
.final .watermark{width:480px;right:-10%;bottom:-45%}
.final h2{position:relative;color:#fff;font-size:clamp(30px,3.4vw,48px);line-height:1.1;margin-bottom:24px}
.final .btn{position:relative}

.footer{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding:24px 32px;font-size:13px;color:var(--ink-2)}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer a:hover{text-decoration:underline}
.from{display:inline-flex;align-items:center;gap:6px}
.from img{height:12px;width:auto;filter:invert(1)}

/* Onboarding: same split panels as the home page, with Tally forms on the surface background. */
[hidden]{display:none!important}
.steps{list-style:none;counter-reset:s;margin:8px 0 24px}
.steps li{counter-increment:s;position:relative;padding:14px 0 14px 48px;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:0;top:14px;width:32px;height:32px;border-radius:50%;background:var(--surface);color:var(--blue);font-weight:700;display:flex;align-items:center;justify-content:center}
.steps b{display:block;font-weight:700;color:var(--ink-strong)}
.steps span{display:block;color:var(--ink-2);font-size:15px}
.hint{color:var(--ink-2);font-size:14px;margin-top:14px}
.ob{background:var(--surface);min-height:100svh}
.ob-head{height:64px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.ob-head img{width:150px;height:auto}
.ob-head span{font-size:14px;font-weight:600;color:var(--ink-2)}
.ob-col{max-width:760px;margin:0 auto;padding:48px 16px 72px}
.ob-col h1{font-size:clamp(30px,3vw,42px);line-height:1.15}
.ob-card{background:#fff;border-radius:var(--radius);padding:24px;overflow:hidden}
.ob-card iframe{display:block;width:100%;border:0}

@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr);min-height:0}
  .split-left{padding:72px 24px 56px;justify-content:flex-start}
  .split-left .watermark{right:-30%;bottom:-105%;width:80%}
  .final .watermark{display:none}
  .logo{width:160px}
  .split-right{padding:40px 16px 56px}
  .bar{padding:0 16px}
  .contact{grid-template-columns:minmax(0,1fr);gap:0}
  .feed{padding-top:56px}
  .post-head{padding:16px 16px 0}
  .caption{padding:12px 16px 14px;font-size:16px}
  .reel-row{grid-auto-columns:62%}
  .ob-head{padding:0 16px}
  .ob-col{padding-top:32px}
  .ob-card{padding:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bar{transition:none}}