/* TUNNL launch site: tunnl.app (State A) + /terms + /privacy
   Fonts are self-hosted. No outside fonts, scripts or trackers (keeps the Privacy Policy's cookie section true). */
@font-face{font-family:"TUNNL Display";src:url(/assets/fonts/TunnlDisplay-Italic.woff2) format("woff2");font-style:italic;font-weight:900;font-display:block}
@font-face{font-family:"Mona Sans";src:url(/assets/fonts/MonaSans-Var.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Anybody";src:url(/assets/fonts/Anybody-Var.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}

:root{
  color-scheme:dark;
  --night:#0b0c0a;--raise:#1a1b19;--chalk:#eef0ea;--turf:#6be33b;--clock:#ff4a3a;--ink:#121311;
  --mute:#9ea39b;--chalk-90:rgba(238,240,234,.9);--chalk-14:rgba(238,240,234,.14);--hair:rgba(238,240,234,.1);
  --night-0:rgba(11,12,10,0);--night-60:rgba(11,12,10,.6);
  --display:"TUNNL Display","Arial Narrow",Impact,sans-serif;
  --ui:"Mona Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--chalk)}
body{font-family:var(--ui);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100svh}
a{color:inherit}
img{max-width:100%}
p{margin:0;text-wrap:pretty}
.lk{display:block;height:var(--h,18px);width:auto;aspect-ratio:6087.6/833;fill:currentColor;flex:none}
.kd{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;line-height:.88;margin:0;text-wrap:balance}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--chalk);color:var(--night);padding:8px 12px;border-radius:8px}
:focus-visible{outline:2px solid var(--turf);outline-offset:3px;border-radius:6px}

/* ---------- landing ---------- */
.land{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.head{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 max(20px,env(safe-area-inset-left))}
.hero{position:relative;z-index:1;flex:1;display:flex;flex-direction:column}
.copy{position:relative;z-index:2;padding:calc(var(--band) + 8px) max(20px,env(safe-area-inset-left)) 40px;display:flex;flex-direction:column;max-width:640px}
.copy h1{font-size:clamp(34px,10.5vw,46px)}
.sub{margin-top:16px;font-size:17px;line-height:26px;color:var(--chalk-90);max-width:34ch}

/* floodlight: three banks strike, the beam blooms, then the type lands */
.land{--band:340px}
.photo{position:absolute;left:0;right:0;top:0;height:var(--band);z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.flood{position:relative;height:100%}
.flood img{display:block}
.flood>img:not(.f-off){position:absolute;inset:0;width:100%;height:100%;opacity:0}
.flood .f-off{height:100%;width:auto;max-width:none}
.photo .flood{position:absolute;inset:0}
.photo .flood img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 20%}
.flood .f-beam,.flood .f-glow{mix-blend-mode:screen}
.lit .flood .f-lit{opacity:1}
.plate{display:none}
.flooding .f-b1{animation:strike .34s .18s both}
.flooding .f-b2{animation:strike .36s .5s both}
.flooding .f-b3{animation:strike .32s .8s both}
.flooding .f-beam{animation:bloom 1.2s 1s cubic-bezier(.3,.6,.3,1) both;-webkit-mask-image:radial-gradient(circle at 78% 22%,#000 0,#000 var(--r,0%),transparent calc(var(--r,0%) + 18%));mask-image:radial-gradient(circle at 78% 22%,#000 0,#000 var(--r,0%),transparent calc(var(--r,0%) + 18%))}
.flooding .f-glow{animation:glow 1.5s 1.05s ease-out both}
.flooding .f-lit{animation:settle .45s 1.95s ease-in-out both}
.flooding .copy{animation:landin .6s 1.75s var(--ease) both}
.flooding .kick .dm{animation:dmfill .5s steps(6) 2.3s both}
@property --r{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes strike{0%{opacity:0}18%{opacity:.85}30%{opacity:.15}46%{opacity:1}58%{opacity:.6}72%,100%{opacity:1}}
@keyframes bloom{from{opacity:0;--r:0%}30%{opacity:1}to{opacity:1;--r:120%}}
@keyframes glow{0%{opacity:0}40%{opacity:.9}100%{opacity:0}}
@keyframes settle{from{opacity:0}to{opacity:1}}
@keyframes landin{from{opacity:0;transform:translateY(12px)}}
@keyframes dmfill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* form: 48px field and button, side by side up to 440px, stacked when narrow */
.slot{margin-top:32px;max-width:440px}
.early{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px}
.field{flex:1 1 200px;min-width:0;height:48px;border-radius:12px;border:1px solid rgba(238,240,234,.14);background:rgba(238,240,234,.06);color:var(--chalk);padding:0 16px;font:inherit;font-size:16px;transition:border-color .16s var(--ease)}
.field::placeholder{color:var(--mute)}
.field:hover{border-color:rgba(238,240,234,.28)}
.field:focus{outline:2px solid var(--turf);outline-offset:3px;border-color:var(--chalk)}
.field[aria-invalid="true"]{border-color:var(--clock)}
.btn{height:48px;padding:0 20px;border-radius:12px;border:0;background:var(--turf);color:var(--night);font:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:transform .09s var(--ease),filter .16s var(--ease)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.97)}
.btn[disabled]{opacity:.7;cursor:progress}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:var(--clock);font-size:13px;line-height:18px;font-weight:600;min-height:0}
.err:empty{display:none}
.err:not(:empty){animation:rise6 .24s var(--ease) both}
.note{font-size:12px;line-height:18px;color:var(--mute);max-width:440px}
.note a{color:var(--chalk);text-underline-offset:2px}
.shake{animation:shake .24s var(--ease)}
@keyframes shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes rise6{from{opacity:0;transform:translateY(6px)}}
@media (max-width:419px){.row{flex-direction:column}.field,.btn{width:100%;flex:none}}

/* success: kite sting, then the line rises */
.done{display:flex;gap:16px;align-items:flex-start;padding-top:20px;border-top:1px solid var(--hair)}
.badge{flex:none;width:48px;height:48px;border-radius:999px;display:grid;place-items:center;background:var(--turf);color:var(--night);animation:pop .5s var(--spring) both}
.badge svg{width:22px;height:23px;fill:currentColor}
.badge polygon{opacity:.25;transform-box:fill-box;transform-origin:center;animation:kite .3s var(--ease) both}
.badge polygon:nth-child(1){animation-delay:.05s}.badge polygon:nth-child(2){animation-delay:.35s}.badge polygon:nth-child(3){animation-delay:.65s}.badge polygon:nth-child(4){animation-delay:.95s}
@keyframes kite{0%{opacity:.25;transform:scale(.8)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.done-t{animation:rise .42s var(--ease) .4s both}
.done h2{font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.015em;margin:2px 0 0}
.done p{font-size:15px;line-height:22px;color:var(--chalk-90);margin-top:8px}
.done .f{font-size:13px;line-height:20px;color:var(--mute)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

.kick{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:13px;line-height:18px;font-weight:500;color:var(--mute)}
.kick .dm{display:block;color:var(--turf);filter:drop-shadow(0 0 8px)}
.kick .dm .off{opacity:.1}

/* footer: touchline, lockup, legal, socials */
.foot{position:relative;z-index:1;margin-top:auto;padding:48px max(20px,env(safe-area-inset-left)) max(32px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px}
.line{display:block;height:11px;background:linear-gradient(0deg,transparent 5px,var(--chalk-14) 5px,var(--chalk-14) 6px,transparent 6px),repeating-linear-gradient(90deg,var(--chalk-14) 0 1px,transparent 1px 26px)}
.frow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.links{display:flex;gap:18px;font-size:13px;color:var(--mute)}
.links a{text-underline-offset:2px}
.social{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;margin-left:-12px}
.social .handle{font-size:13px;font-weight:600;opacity:.78;margin:0 6px 0 12px}
.social a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:22px;opacity:.78;transition:opacity .15s}
.social a:hover{opacity:1}
.social svg{width:18px;height:18px}

@media (min-width:600px) and (max-width:1023.98px){
  .land{--band:420px}
  .head,.copy,.foot{padding-left:40px;padding-right:40px}
  .copy h1{font-size:52px}
}
@media (min-width:1024px){
  .land{--plate-h:clamp(560px,48vw,700px)}
  .photo{display:none}
  .plate{display:block;position:absolute;top:24px;z-index:0;height:var(--plate-h);left:calc(min(50% + 560px,100% - 120px) - 1.625 * var(--plate-h));pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 55%,transparent 95%),linear-gradient(90deg,transparent 0,#000 40%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 55%,transparent 95%),linear-gradient(90deg,transparent 0,#000 40%);mask-composite:intersect}
  .plate img{height:100%;width:auto;max-width:none}
  .head{max-width:1320px;width:100%;margin:0 auto;padding:0 56px;height:88px}
  .hero{max-width:1320px;width:100%;margin:0 auto;padding:0 56px}
  .copy{padding:clamp(150px,15vw,210px) 0 24px;max-width:min(720px,58%)}
  .copy h1{font-size:clamp(56px,5.6vw,80px)}
  .sub{margin-top:24px;font-size:18px;line-height:28px;max-width:none}
  .foot{max-width:1320px;width:100%;margin:auto auto 0;padding:56px 56px 48px;gap:28px}
}

/* ---------- legal pages ---------- */
.legal{max-width:680px;margin:0 auto;padding:0 24px}
.legal .lh{display:flex;justify-content:space-between;align-items:center;height:72px}
.legal .lh a{font-size:13px;color:var(--mute);text-decoration:none}
.legal .lh a:hover{color:var(--chalk)}
.legal main{padding:40px 0 64px}
.legal h1{font-size:clamp(48px,11vw,88px)}
.legal .upd{color:var(--mute);font-size:14px;margin-top:12px}
.legal h2{font-size:17px;line-height:24px;font-weight:650;margin:36px 0 10px}
.legal p,.legal li{font-size:15.5px;line-height:25px;color:var(--chalk-90)}
.legal p+p{margin-top:12px}
.legal ul{padding-left:20px;margin:10px 0;display:grid;gap:6px}
.legal a{text-underline-offset:3px}
.legal .lf{border-top:1px solid var(--hair);padding:22px 0 max(32px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--mute)}
.legal .lf{flex-direction:column}
.legal .lfr{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.legal .lf a{color:var(--mute)}
.legal .lf .social a{color:var(--chalk)}
.done .f a{color:var(--chalk);text-underline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .flood .f-lit{opacity:1}
}