:root{
    --bg:#F6F1E4;
    --bg-soft:#EFE8D6;
    --card:#FFFFFF;
    --ink:#20261F;
    --ink-soft:#5B6157;
    --ink-faint:#8A8F81;
    --forest:#0F6E56;
    --forest-deep:#0A4F3E;
    --forest-tint:#E3EFE8;
    --coral:#FF6B53;
    --coral-deep:#E24B33;
    --coral-tint:#FFEAE4;
    --lime:#D7E62B;
    --line:#E2D9C2;
    --shadow:0 24px 48px -24px rgba(32,38,31,.28);
    --shadow-sm:0 10px 24px -14px rgba(32,38,31,.22);
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#171C17;
      --bg-soft:#1F251E;
      --card:#222922;
      --ink:#F3EFE1;
      --ink-soft:#C7CBBC;
      --ink-faint:#8F9585;
      --forest:#49C79A;
      --forest-deep:#2E8E6C;
      --forest-tint:#1E2B24;
      --coral:#FF8A73;
      --coral-deep:#FF6B53;
      --coral-tint:#2E211D;
      --lime:#E4F14E;
      --line:#333A31;
      --shadow:0 24px 48px -24px rgba(0,0,0,.6);
      --shadow-sm:0 10px 24px -14px rgba(0,0,0,.5);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#171C17;
    --bg-soft:#1F251E;
    --card:#222922;
    --ink:#F3EFE1;
    --ink-soft:#C7CBBC;
    --ink-faint:#8F9585;
    --forest:#49C79A;
    --forest-deep:#2E8E6C;
    --forest-tint:#1E2B24;
    --coral:#FF8A73;
    --coral-deep:#FF6B53;
    --coral-tint:#2E211D;
    --lime:#E4F14E;
    --line:#333A31;
    --shadow:0 24px 48px -24px rgba(0,0,0,.6);
    --shadow-sm:0 10px 24px -14px rgba(0,0,0,.5);
    color-scheme:dark;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;} }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:16px;
    line-height:1.55;
    padding-inline:20px;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif;
    font-weight:800;
    letter-spacing:-.01em;
    margin:0;
    text-wrap:balance;
    color:var(--ink);
  }
  p{margin:0}
  a{color:inherit}
  img{max-width:100%;display:block}
  .wrap{max-width:1160px;margin-inline:auto}
  .eyebrow{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--forest);
    display:inline-flex;
    align-items:center;
    gap:.5em;
  }
  .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;
    font-family:'Inter',sans-serif;font-weight:700;font-size:.95rem;
    padding:.85em 1.5em;border-radius:100px;border:1px solid transparent;
    cursor:pointer;text-decoration:none;white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--forest);color:#fff;box-shadow:var(--shadow-sm)}
  .btn-primary:hover{background:var(--forest-deep)}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--forest);color:var(--forest)}
  .btn-block{width:100%}

  /* ---------- header ---------- */
  header.site{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    margin-inline:-20px;padding-inline:20px;
  }
  .nav{
    max-width:1160px;margin-inline:auto;
    display:flex;align-items:center;justify-content:space-between;
    padding-block:14px;gap:16px;
  }
  .brand{display:flex;align-items:center;text-decoration:none;flex:none}
  .brand-logo{height:45px;width:auto;display:block}
  .logo-for-dark{display:none}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .logo-for-light{display:none}
    :root:not([data-theme="light"]) .logo-for-dark{display:block}
  }
  :root[data-theme="dark"] .logo-for-light{display:none}
  :root[data-theme="dark"] .logo-for-dark{display:block}
  .nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
  .nav-links a{
    font-size:.92rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
    transition:color .15s ease;
  }
  .nav-links a:hover{color:var(--forest)}
  .nav-cta{display:flex;align-items:center;gap:12px}
  .burger{display:none}
  .burger-label{display:none}
  .mobile-menu{display:none}

  @media (max-width:820px){
    .nav-links{display:none}
    .nav-cta .btn-ghost{display:none}
    .burger-label{
      display:flex;align-items:center;justify-content:center;
      width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
      cursor:pointer;flex:none;
    }
    .burger-label span, .burger-label span::before, .burger-label span::after{
      content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative;
      transition:transform .2s ease, opacity .2s ease;
    }
    .burger-label span::before{position:absolute;top:-6px}
    .burger-label span::after{position:absolute;top:6px}
    .mobile-menu{
      display:block;
      max-height:0;overflow:hidden;
      transition:max-height .25s ease;
      border-top:1px solid transparent;
    }
    .burger:checked ~ .mobile-menu{max-height:320px;border-top:1px solid var(--line)}
    .burger:checked ~ .nav .burger-label span{background:transparent}
    .burger:checked ~ .nav .burger-label span::before{transform:translateY(6px) rotate(45deg)}
    .burger:checked ~ .nav .burger-label span::after{transform:translateY(-6px) rotate(-45deg)}
    .mobile-menu ul{list-style:none;margin:0;padding:14px 0 20px;display:flex;flex-direction:column;gap:4px;max-width:1160px;margin-inline:auto}
    .mobile-menu a{display:block;padding:10px 2px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
    .mobile-menu .btn{margin-top:10px}
  }

  /* ---------- hero ---------- */
  .hero{padding-block:64px 40px}
  .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
  .hero-copy h1{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.05;margin-top:14px}
  .hero-copy .lede{margin-top:20px;font-size:1.08rem;color:var(--ink-soft);max-width:46ch}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
  .hero-meta{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap}
  .hero-meta div{display:flex;flex-direction:column;gap:2px}
  .hero-meta strong{font-family:'Montserrat',sans-serif;font-size:1.3rem;color:var(--ink)}
  .hero-meta span{font-size:.8rem;color:var(--ink-faint)}

  .hero-visual{position:relative;min-height:460px}
  .phone{
    position:absolute;width:230px;border-radius:34px;background:var(--ink);
    padding:9px;box-shadow:var(--shadow);
  }
  .phone::before{
    content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:60px;height:16px;border-radius:0 0 12px 12px;background:var(--ink);z-index:2;
  }
  .phone img{border-radius:26px;display:block}
  .phone-back{top:0;right:26px;width:210px;transform:rotate(9deg);opacity:.94}
  .phone-front{left:6px;bottom:0;width:250px;transform:rotate(-6deg);z-index:3}

  .chip{
    position:absolute;background:var(--card);border:1px solid var(--line);
    border-radius:16px;padding:10px 14px;box-shadow:var(--shadow-sm);
    display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:700;
    z-index:4;color:var(--ink);
  }
  .chip svg{flex:none}
  .chip small{display:block;font-weight:500;color:var(--ink-faint);font-size:.72rem}
  .chip-going{top:8%;left:-6px}
  .chip-poll{bottom:16%;right:-4%}
  .chip-streak{bottom:-2%;left:20%}
  .dot-forest{color:var(--forest)}
  .dot-coral{color:var(--coral)}

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:56px}
    .hero-visual{min-height:380px;max-width:420px;margin-inline:auto;width:100%}
  }
  @media (max-width:480px){
    .hero-visual{min-height:340px;transform:scale(.86);transform-origin:top center}
  }

  /* ---------- horizon divider ---------- */
  .horizon{display:block;width:100%;height:auto;margin-block:8px}
  .horizon path{fill:none;stroke:var(--line);stroke-width:2}
  .horizon circle{fill:var(--coral)}

  /* ---------- manifesto ---------- */
  .manifesto{padding-block:35px 35px}
  .manifesto-head{max-width:640px}
  .manifesto-head h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-top:12px}
  .manifesto-head p{margin-top:16px;color:var(--ink-soft);font-size:1.05rem}
  .split{
    margin-top:40px;display:grid;grid-template-columns:1fr 1fr;
    border:1px solid var(--line);border-radius:24px;overflow:hidden;
  }
  .split > div{padding:34px 32px}
  .split .no{background:var(--bg-soft)}
  .split .yes{background:var(--forest-tint)}
  .split h3{font-size:1.05rem;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.005em}
  .split ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
  .split li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:var(--ink-soft)}
  .split .yes li{color:var(--ink)}
  .split li svg{flex:none;margin-top:3px}
  @media (max-width:720px){.split{grid-template-columns:1fr}}

  /* ---------- features ---------- */
  .features{padding-block:24px}
  .feature-row{
    display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center;
    padding-block:60px;border-top:1px solid var(--line);
  }
  .feature-row:first-of-type{border-top:none}
  .feature-row.reverse{grid-template-columns:1.1fr .9fr}
  .feature-row.reverse .feature-visual{order:2}
  .feature-visual{display:flex;justify-content:center}
  .feature-phone{
    width:min(280px,72vw);border-radius:34px;background:var(--ink);padding:10px;
    box-shadow:var(--shadow);position:relative;
  }
  .feature-phone::before{
    content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
    width:64px;height:18px;border-radius:0 0 14px 14px;background:var(--ink);z-index:2;
  }
  .feature-phone img{border-radius:26px}
  .feature-text h3{font-size:clamp(1.5rem,2.6vw,1.9rem)}
  .feature-text .eyebrow{margin-bottom:2px}
  .feature-text p{margin-top:14px;color:var(--ink-soft);font-size:1.02rem;max-width:44ch}
  .feature-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
  .feature-points li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;font-weight:600}
  .feature-points li svg{flex:none;margin-top:2px;color:var(--forest)}
  @media (max-width:860px){
    .feature-row, .feature-row.reverse{grid-template-columns:1fr;gap:32px}
    .feature-row.reverse .feature-visual{order:0}
    .feature-row{padding-block:48px}
  }

  /* ---------- sports collage ---------- */
  .sports{padding-block:60px}
  .sports-head{max-width:620px;margin-bottom:36px}
  .sports-head h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-top:12px}
  .sports-head p{margin-top:16px;color:var(--ink-soft);font-size:1.05rem}
  .sports-grid{
    display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px;
  }
  .sport-card{
    position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);
  }
  .sport-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .sport-card:hover img{transform:scale(1.06)}
  .sport-card::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 45%, rgba(10,15,10,.72) 100%);
  }
  .sport-label{
    position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;
    font-family:'Montserrat',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.01em;
  }
  .s1{grid-column:1/4;grid-row:1/3}
  .s2{grid-column:4/5;grid-row:1/2}
  .s3{grid-column:4/5;grid-row:2/3}
  .s4{grid-column:1/2;grid-row:3/4}
  .s5{grid-column:2/3;grid-row:3/4}
  .s6{grid-column:3/5;grid-row:3/4}
  @media (max-width:820px){
    .sports-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px}
    .s1,.s2,.s3,.s4,.s5,.s6{grid-column:auto;grid-row:auto}
  }

  /* ---------- value band ---------- */
  .band{background:var(--forest-deep);color:#fff;margin-inline:-20px;padding:56px 20px}
  .band .wrap{color:#fff}
  .band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
  .band-item{display:flex;flex-direction:column;gap:10px}
  .band-item svg{color:var(--lime)}
  .band-item strong{font-family:'Montserrat',sans-serif;font-size:1.05rem;font-weight:700}
  .band-item span{font-size:.88rem;color:rgba(255,255,255,.72)}
  @media (max-width:820px){.band-grid{grid-template-columns:1fr 1fr;row-gap:32px}}
  @media (max-width:480px){.band-grid{grid-template-columns:1fr}}

  /* ---------- CTA / signup ---------- */
  .cta{padding-block:76px}
  .cta-card{
    background:var(--card);border:1px solid var(--line);border-radius:28px;
    padding:52px 44px;box-shadow:var(--shadow);
    display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  }
  .cta h2{font-size:clamp(1.9rem,3.2vw,2.3rem)}
  .cta p{margin-top:14px;color:var(--ink-soft);max-width:42ch}
  .signup-form{display:flex;flex-direction:column;gap:12px}
  .field-row{display:flex;gap:10px}
  .field-row input{
    flex:1;min-width:0;padding:.9em 1.1em;border-radius:100px;border:1px solid var(--line);
    background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:.95rem;
  }
  .field-row input:focus{outline:2px solid var(--forest);outline-offset:1px}
  .form-note{font-size:.78rem;color:var(--ink-faint)}
  .form-error{font-size:.78rem;color:var(--coral-deep);display:block;margin-top:2px}
  .success-msg{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--forest);padding:.6em 0}
  /* An author display value always beats the UA [hidden]{display:none} rule
     regardless of source order, so .signup-form/.success-msg's own display:
     flex above silently defeats the `hidden` attribute the JS toggles.
     Redeclaring [hidden] here with matching specificity - class + attribute -
     wins it back. */
  .signup-form[hidden],.success-msg[hidden]{display:none}
  .stores{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
  .store-badge{
    display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
    padding:.6em .9em;
  }
  .store-badge div{display:flex;flex-direction:column;line-height:1.2}
  .store-badge small{font-size:.65rem;color:var(--ink-faint)}
  .store-badge strong{font-size:.82rem}
  @media (max-width:760px){.cta-card{grid-template-columns:1fr;padding:36px 26px}.field-row{flex-direction:column}}

  /* ---------- footer ---------- */
  footer.site{padding-block:48px 40px;border-top:1px solid var(--line);margin-top:20px}
  .foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
  .foot-brand{display:flex;flex-direction:column;gap:10px;max-width:280px}
  .foot-brand .brand-logo{height:44px}
  .foot-brand .brand{margin-bottom:2px}
  .foot-brand p{color:var(--ink-faint);font-size:.85rem}
  .foot-links{display:flex;gap:56px;flex-wrap:wrap}
  .foot-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin:0 0 12px}
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .foot-col a{color:var(--ink-soft);text-decoration:none;font-size:.92rem}
  .foot-col a:hover{color:var(--forest)}
  .foot-bottom{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
    margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
    font-size:.8rem;color:var(--ink-faint);
  }

  section{scroll-margin-top:90px}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(14px);animation:rise .7s ease forwards}
  .hero-copy.reveal{animation-delay:.05s}
  .hero-visual.reveal{animation-delay:.18s}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;animation:none}}