/* Fantasy Sports Bet: teaser site. Tokens from the brand book (Sunset, Section 6). */
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:400;font-display:swap;src:url(../fonts/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-display:swap;src:url(../fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-display:swap;src:url(../fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Graduate";font-weight:400;font-display:swap;src:url(../fonts/graduate-latin-400-normal.woff2) format("woff2")}

:root{
  --bg:#0D1417;--surface:#172227;--border:#2A3A40;--text:#F0E6D8;--text-2:#9BA8A8;
  --primary:#2FB39A;--on-primary:#0D1417;--accent:#FF6A13;--error:#D62828;
  --display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --brand:"Graduate",Georgia,serif;
  --gutter:clamp(16px,6vw,120px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--body)}
img{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.skip{position:absolute;left:16px;top:-60px;background:var(--primary);color:var(--on-primary);padding:10px 14px;font-weight:700;z-index:20}
.skip:focus{top:12px}

/* buttons and fields: square corners, per the design system */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border:2px solid var(--primary);background:var(--primary);color:var(--on-primary);font:700 19px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0}
.btn:hover{filter:brightness(1.08)}
.btn--outline{background:transparent;color:var(--primary)}
.btn--chip{min-height:44px;padding:0 14px;border-color:var(--border);background:transparent;color:var(--text);font:600 15px/1 var(--body);text-transform:none;letter-spacing:0}
.btn--chip:hover{border-color:var(--primary);filter:none}
.field{min-height:52px;padding:0 16px;border:2px solid var(--border);background:var(--surface);color:var(--text);font:400 17px var(--body);border-radius:0;width:100%}
.field::placeholder{color:var(--text-2)}
.field:focus{border-color:var(--primary);outline:none}

/* header */
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 var(--gutter);background:rgba(13,20,23,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(6px)}
.site-header .mark{width:46px;height:46px}
.site-header nav{display:flex;align-items:center;gap:24px}

/* hero */
.hero{position:relative;min-height:min(820px,calc(100svh - 72px));display:flex;flex-direction:column;justify-content:space-between;align-items:center;overflow:hidden;padding:24px var(--gutter) 48px;isolation:isolate}
.hero__art{position:absolute;inset:0;z-index:-2}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero::before{content:"";position:absolute;left:50%;top:-80px;width:min(820px,110vw);height:560px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 45%,rgba(13,20,23,.82) 0%,rgba(13,20,23,.55) 45%,rgba(13,20,23,0) 70%);z-index:-1}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to bottom,rgba(13,20,23,0),rgba(13,20,23,.94) 58%);z-index:-1}
.hero__top{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.hero__logo{height:clamp(190px,30vh,280px);width:auto}
.headline{margin:0;font:400 clamp(28px,4vw,42px)/1.05 var(--brand);text-transform:uppercase;color:var(--text);text-shadow:0 0 6px var(--bg),2px 2px 0 var(--bg),-2px 2px 0 var(--bg),2px -2px 0 var(--bg),-2px -2px 0 var(--bg)}
@supports (paint-order:stroke) and (-webkit-text-stroke:1px black){.headline{text-shadow:none;-webkit-text-stroke:7px var(--bg);paint-order:stroke fill}}
.hero__bottom{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.lede{margin:0;font:400 clamp(19px,2vw,24px)/1.4 var(--body)}
.signup{display:flex;width:100%;max-width:640px}
.signup .field{flex:1;border-right:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.5em;margin:0;font:400 15px var(--body);color:var(--text)}
.form-msg.is-error{color:#FF8A80}

/* success / share panel */
.joined{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:12px}
.joined h2{margin:0;font:400 clamp(26px,3vw,32px)/1.1 var(--brand);text-transform:uppercase}
.joined p{margin:0}

.share{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px}
.share__copy{display:flex}
.share__copy .field{flex:1;border-right:none;display:flex;align-items:center;font-size:16px;background:var(--bg)}
.share__channels{display:flex;flex-wrap:wrap;gap:10px}
.share__native{width:100%}
.dot{width:12px;height:12px;display:inline-block}

/* sports strip */
.sports{padding:64px var(--gutter);text-align:center}
.sports h2{margin:0 0 32px;font:800 clamp(28px,3vw,36px)/1.05 var(--display);text-transform:uppercase}
.sports ul{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(7,1fr);gap:20px}
.sports li{display:flex;flex-direction:column;align-items:center;gap:10px;font:600 15px var(--body)}
.sports svg{width:40px;height:40px;color:var(--primary)}
.sports .icon{width:72px;height:72px;display:grid;place-items:center;border:2px solid var(--border)}

/* bring your crew */
.crew{display:grid;grid-template-columns:minmax(0,620px) 1fr;align-items:center;background:var(--surface);min-height:440px}
.crew__art{position:relative;height:100%;min-height:440px}
.crew__art img{width:100%;height:100%;object-fit:cover;object-position:0 50%}
.crew__art::after{content:"";position:absolute;top:0;right:0;bottom:0;width:120px;background:linear-gradient(to right,rgba(23,34,39,0),var(--surface))}
.crew__text{padding:56px var(--gutter) 56px 48px}
.crew h2{margin:0;font:800 clamp(38px,4.4vw,56px)/1 var(--display);text-transform:uppercase}
.crew p{margin:14px 0 22px;font-size:19px;max-width:520px}

/* footer */
.site-footer{padding:40px var(--gutter);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;color:var(--text-2);font-size:14px}
.brandline{display:flex;align-items:center;gap:10px;color:var(--text);font:800 22px var(--display);text-transform:uppercase;text-decoration:none}
.brandline img{width:38px;height:38px}
.site-footer nav{display:flex;gap:24px;font-size:15px}
.site-footer small{width:100%;font-size:13px}

/* privacy and 404 */
.doc{max-width:760px;margin:0 auto;padding:64px 16px 96px}
.doc h1{margin:0;font:800 clamp(44px,6vw,64px)/1 var(--display);text-transform:uppercase}
.doc .intro{color:var(--text-2);font-size:18px;margin:12px 0 40px}
.doc h2{margin:36px 0 8px;font:800 26px var(--display);text-transform:uppercase}
.doc p{font-size:17px;line-height:1.65;margin:0}
.doc a{color:var(--primary)}
.todo{background:rgba(255,106,19,.18);color:var(--accent);padding:0 4px}

/* phones */
@media (max-width:760px){
  .site-header{height:60px}
  .site-header .mark{width:38px;height:38px}
  .site-header .btn{min-height:44px;padding:0 14px;font-size:16px}
  .hero{min-height:calc(100svh - 60px);padding-bottom:28px}
  .hero__art img{object-position:50% 30%}
  .signup{flex-direction:column;gap:10px}
  .signup .field{border-right:2px solid var(--border)}
  .signup .field:focus{border-color:var(--primary)}
  .signup .btn{width:100%}
  .sports{padding:48px 16px}
  .sports ul{grid-template-columns:repeat(4,1fr);gap:18px 6px}
  .sports .icon{width:56px;height:56px}
  .sports svg{width:30px;height:30px}
  .sports li{font-size:12px}
  .crew{grid-template-columns:1fr}
  .crew__art{min-height:0;height:240px}
  .crew__art img{object-position:0 35%}
  .crew__art::after{top:auto;left:0;width:auto;height:60px;background:linear-gradient(to bottom,rgba(23,34,39,0),var(--surface))}
  .crew__text{padding:12px 16px 40px;text-align:center}
  .crew p{margin:10px auto 18px;font-size:16px}
  .share{margin:0 auto}
}
.dot--wa{background:#25D366}.dot--tg{background:#2AABEE}.dot--x{background:#F0E6D8}
.doc .updated{margin-top:36px;color:var(--text-2)}
.joined .share__channels{justify-content:center}
@media (max-width:760px){.crew .share__channels{justify-content:center}}

.btn:disabled,.field:disabled{cursor:not-allowed;opacity:.72}
.field:disabled{color:var(--text-2)}
.site-footer .legal-note{width:100%;margin:0;color:var(--text-2);font-size:13px;line-height:1.45}