/* liveteams.app shared stylesheet for sub-pages: homepage CSS + solution-page template. */
:root{--navy:#0c3d55;--deep:#0a2e41;--red:#ed1e24;--ice:#e8f0f5;--paper:#f6f8fa;--ink:#1f2933;--muted:#617985;--line:#d9e5ea}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Geist,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}.wrap{width:min(1240px,calc(100% - 48px));margin:auto}.nav{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.17)}.brand{display:flex;align-items:center;gap:11px;color:#fff;font-size:19px;font-weight:750}.brand img{width:42px;height:42px;border-radius:11px}.links,.header-actions{display:flex;align-items:center;gap:28px}.links a{color:#cfe0ea;font-size:14px;font-weight:700}.header-login{color:#d9e7ed;font-size:13px;font-weight:800}.pill,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-weight:850}.pill{padding:12px 18px;color:#fff;background:var(--red);font-size:13px}.hero{min-height:100vh;overflow:hidden;position:relative;color:#fff;background:radial-gradient(circle at 77% 21%,#155e7e 0,transparent 30%),linear-gradient(140deg,var(--navy),var(--deep) 72%)}.hero:before{content:"";position:absolute;inset:0;opacity:.12;background-image:linear-gradient(110deg,transparent 49.7%,#fff 50%,transparent 50.3%),linear-gradient(20deg,transparent 49.7%,#fff 50%,transparent 50.3%);background-size:520px 520px;transform:scale(1.2) rotate(-8deg)}.hero-grid{min-height:calc(100vh - 92px);display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding:65px 0 105px;position:relative}.eyebrow,.kicker{margin:0 0 22px;color:#cfe0ea;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.eyebrow b,.kicker{color:var(--red)}h1{margin:0;font-size:clamp(58px,7vw,104px);line-height:.88;letter-spacing:-.075em}h1 em{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.82);font-style:normal}.lede{max-width:620px;color:#d4e3eb;font-size:19px;line-height:1.65}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.button{min-height:52px;border-radius:10px;padding:0 20px;background:#fff;color:var(--deep);font-size:14px;transition:.2s}.button:hover{transform:translateY(-2px)}.button.outline{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.05);color:#fff}.button svg{width:23px;height:23px;fill:currentColor}.login-note{display:block;width:max-content;max-width:100%;margin-top:18px;color:#acc4d0;font-size:12px}.login-note strong{color:#fff}.phone-wrap{min-height:590px;display:grid;place-items:center;position:relative}.phone{width:330px;height:590px;border:7px solid #092839;border-radius:42px;background:#f8fafb;color:var(--ink);padding:20px 18px;box-shadow:0 45px 100px rgba(0,0,0,.42);transform:rotate(3deg);animation:float 5s ease-in-out infinite}.phone-head{display:flex;justify-content:space-between;align-items:center;color:var(--navy);font-size:12px;font-weight:900}.avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;color:#fff;background:var(--red);font-size:10px}.label{margin:28px 0 8px;color:#718791;font-size:9px;font-weight:900;letter-spacing:.14em}.game{border-radius:18px;background:linear-gradient(145deg,var(--navy),var(--deep));color:#fff;padding:17px;box-shadow:0 14px 28px rgba(12,61,85,.2)}.game small{color:#b9cdd8}.game h3{margin:25px 0 5px;font-size:22px}.game p{margin:0;color:#b9cdd8;font-size:10px}.rsvp{display:flex;justify-content:space-between;margin-top:18px;color:#cfe0ea;font-size:9px}.rsvp strong{padding:7px 9px;border-radius:7px;background:var(--red);color:#fff}.activity{display:grid;grid-template-columns:31px 1fr auto;gap:9px;align-items:center;border-bottom:1px solid #e4ebef;padding:12px 0;font-size:9px}.activity p{margin:0;line-height:1.5}.activity time{color:#8497a1}.score,.code{position:absolute;z-index:2;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(7,36,51,.82);box-shadow:0 20px 50px rgba(0,0,0,.28);backdrop-filter:blur(14px)}.score{top:95px;left:0;padding:13px 17px;font-size:12px;font-weight:850}.score b{margin-right:8px;padding:4px 7px;border-radius:99px;background:var(--red);font-size:8px}.code{right:-5px;bottom:80px;padding:15px 19px}.code small{display:block;color:#91adbb;font-size:8px;letter-spacing:.14em}.code strong{display:block;margin-top:4px;font-size:21px;letter-spacing:.18em}.ticker{position:absolute;bottom:0;left:-2%;width:104%;height:55px;display:flex;align-items:center;justify-content:space-around;gap:28px;color:var(--navy);background:var(--red);transform:rotate(-1deg);font-size:12px;font-weight:950;letter-spacing:.12em;white-space:nowrap}.section{padding:clamp(88px,11vw,155px) max(24px,calc((100vw - 1240px)/2))}.section h2{max-width:850px;margin:0;color:var(--navy);font-size:clamp(45px,6vw,76px);line-height:.98;letter-spacing:-.065em}.section-intro{max-width:630px;color:#58707d;font-size:18px;line-height:1.65}.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:60px}.audience-card{min-height:315px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:#fff;padding:27px;transition:.3s}.audience-card:hover{transform:translateY(-7px);color:#fff;background:var(--navy);box-shadow:0 24px 60px rgba(10,46,65,.15)}.audience-card .num{color:#98abb5;font-size:10px}.audience-card .ico{margin:38px 0 22px;color:var(--red);font-size:27px}.audience-card h3{margin:0 0 12px;color:var(--navy);font-size:22px}.audience-card:hover h3{color:#fff}.audience-card p{margin:0;color:#647a85;font-size:14px;line-height:1.6}.audience-card:hover p{color:#c6d7df}.audience-card a{margin-top:auto;color:var(--red);font-size:12px;font-weight:900}.features{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;background:#fff}.feature-copy{position:sticky;top:40px;align-self:start}.feature-copy h2 em{color:var(--red);font-style:normal}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.feature-card{min-height:285px;border-radius:22px;background:var(--paper);padding:28px}.feature-card.wide{grid-column:1/-1;background:var(--ice)}.feature-card.dark{color:#fff;background:var(--navy)}.feature-card.rose{background:#f5dfe0}.feature-card h3{margin:18px 0 10px;color:var(--navy);font-size:24px}.feature-card.dark h3{color:#fff}.feature-card p{margin:0;color:#657b87;font-size:14px;line-height:1.6}.feature-card.dark p{color:#bdd0da}.feature-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#fff;background:var(--red);font-size:20px}.demo-row{display:grid;grid-template-columns:58px 1fr auto;gap:15px;align-items:center;margin-top:30px;border-radius:13px;background:#fff;padding:14px;box-shadow:0 12px 30px rgba(10,46,65,.08);font-size:11px}.demo-row b{color:var(--navy)}.demo-row strong{color:#269064}.tournament{display:grid;grid-template-columns:.78fr 1.22fr;gap:85px;align-items:center;min-height:820px;color:#fff;background:radial-gradient(circle at 85% 25%,#155e7e,transparent 32%),var(--deep)}.tournament h2{color:#fff}.tournament .section-intro{color:#c5d7e0}.checklist{display:grid;gap:13px;list-style:none;margin:28px 0 34px;padding:0;color:#d5e2e8;font-size:13px}.checklist li:before{content:"✓";margin-right:10px;color:#ff6469}.bracket{border:1px solid rgba(255,255,255,.15);border-radius:24px;background:rgba(7,35,49,.67);padding:28px;box-shadow:0 40px 90px rgba(0,0,0,.3)}.bracket-head{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:20px;font-size:12px;font-weight:900;letter-spacing:.1em}.rounds{min-height:320px;display:grid;grid-template-columns:1fr 1fr .7fr;gap:30px;align-items:center}.round small{color:#7999aa;font-size:8px}.match{margin:14px 0;border-left:2px solid var(--red);border-radius:6px;background:rgba(255,255,255,.07);padding:10px 12px}.match span{display:flex;justify-content:space-between;color:#cfe0e8;font-size:10px;line-height:2}.champ{text-align:center;color:var(--red);font-size:45px}.solutions{background:#fff}.tabs{margin-top:50px}.tab-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:1px solid var(--line);border-radius:16px 16px 0 0;background:var(--paper);padding:6px}.tab{min-height:62px;border:0;border-radius:11px;background:transparent;color:#617985;font:inherit;font-size:13px;font-weight:850;cursor:pointer}.tab[aria-selected="true"]{color:#fff;background:var(--navy);box-shadow:0 10px 24px rgba(10,46,65,.15)}.panel{display:none;grid-template-columns:1fr .9fr;min-height:430px;overflow:hidden;border:1px solid var(--line);border-top:0;border-radius:0 0 22px 22px;background:var(--paper)}.panel.active{display:grid;animation:panel .35s ease both}.panel-copy{display:flex;flex-direction:column;align-items:flex-start;padding:54px}.panel-copy h3{margin:20px 0 14px;color:var(--navy);font-size:clamp(32px,4vw,50px);line-height:1;letter-spacing:-.055em}.panel-copy p{max-width:600px;color:#5d7581;line-height:1.65}.panel-copy ul{display:grid;gap:8px;list-style:none;padding:0;color:#526c78;font-size:12px;font-weight:800}.panel-copy li:before{content:"✓";margin-right:7px;color:#269064}.panel-copy a{margin-top:auto;color:var(--red);font-size:12px;font-weight:900}.panel-visual{color:#fff;background:radial-gradient(circle at 75% 20%,#1a6e8d,transparent 35%),var(--deep);padding:40px}.panel-visual small{color:#91adbb;font-weight:900;letter-spacing:.12em}.panel-visual strong{display:block;margin-top:90px;font-size:80px;line-height:.9;letter-spacing:-.07em}.panel-visual p{text-transform:uppercase;color:#a9c0cb;font-size:12px;letter-spacing:.12em}.proof{background:var(--ice);text-align:center}.proof blockquote{margin:0;color:var(--navy);font-size:clamp(38px,5.5vw,72px);line-height:1.05;letter-spacing:-.06em;font-weight:850}.proof em{color:var(--red);font-style:normal}.cta{min-height:680px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:var(--red);text-align:center}.cta h2{color:#fff;font-size:clamp(60px,9vw,112px);line-height:.9}.cta p{color:#ffe2e3;font-size:18px}.cta .actions{justify-content:center}.footer{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:45px;position:relative;color:#fff;background:#071f2c;padding:75px max(24px,calc((100vw - 1240px)/2)) 100px}.footer p,.footer a{color:#9eb7c3;font-size:13px;line-height:1.6}.footer div{display:flex;flex-direction:column;gap:10px}.footer h4{margin:0 0 5px;color:#6f91a2;font-size:10px;letter-spacing:.12em;text-transform:uppercase}@keyframes float{50%{transform:rotate(3deg) translateY(-9px)}}@keyframes panel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(max-width:960px){.links{display:none}.hero-grid,.features,.tournament{grid-template-columns:1fr}.hero-copy{text-align:center}.actions{justify-content:center}.login-note{margin-left:auto;margin-right:auto}.audience-grid{grid-template-columns:1fr 1fr}.feature-copy{position:static}.rounds{min-height:280px}.panel{grid-template-columns:1fr}.footer{grid-template-columns:1fr 1fr}}@media(max-width:600px){.wrap{width:calc(100% - 28px)}.nav{height:76px}.pill{display:none}.header-login{font-size:11px}.hero-grid{padding-top:45px}.phone{width:285px;height:550px}.phone-wrap{min-height:570px}.score{left:-4px}.code{right:-4px}.audience-grid,.feature-grid{grid-template-columns:1fr}.feature-card.wide{grid-column:auto}.tab-list{grid-template-columns:1fr}.panel-copy{min-height:430px;padding:32px 25px}.panel-visual{min-height:280px}.footer{grid-template-columns:1fr}.actions{flex-direction:column}.button{width:100%}}
    /* Pricing */
    .pricing{background:var(--paper)}
    .plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:60px}
    .plan{min-height:430px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:#fff;padding:27px}
    .plan.now{color:#fff;border-color:transparent;background:linear-gradient(145deg,var(--navy),var(--deep));box-shadow:0 24px 60px rgba(10,46,65,.15)}
    .plan-status{align-self:flex-start;margin-bottom:26px;padding:6px 11px;border-radius:999px;background:var(--ice);color:var(--navy);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
    .plan.now .plan-status{background:var(--red);color:#fff}
    .plan h3{margin:0;color:var(--navy);font-size:22px}
    .plan.now h3{color:#fff}
    .plan-price{margin:14px 0 4px;color:var(--navy);font-size:44px;font-weight:900;line-height:1;letter-spacing:-.05em}
    .plan-price small{display:block;margin-top:8px;color:#647a85;font-size:13px;font-weight:700;letter-spacing:0}
    .plan.now .plan-price{color:#fff}
    .plan-teams{margin:0 0 22px;color:#647a85;font-size:13px;font-weight:800}
    .plan.now .plan-teams{color:#c6d7df}
    .plan ul{display:grid;gap:11px;list-style:none;margin:0 0 28px;padding:0;color:#4d6470;font-size:13.5px;line-height:1.45}
    .plan.now ul{color:#d5e2e8}
    .plan li:before{content:"\2713";margin-right:9px;color:var(--red);font-weight:900}
    .plan.now li:before{color:#ff6469}
    .plan .button{margin-top:auto;align-self:flex-start}
    .plan-note{margin:auto 0 0;color:#98abb5;font-size:12px;font-weight:800}
    .pricing-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 40px;margin-top:34px;color:#647a85;font-size:13px;line-height:1.6}
    .pricing-foot p{margin:0;max-width:600px}
    .pricing-foot a{color:var(--red);font-weight:900}
    @media(max-width:960px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:600px){.plan-grid{grid-template-columns:1fr}.plan{min-height:0}.plan .button{align-self:stretch}}

    /* Motion restored from the reference design (the source file shipped only float + panel) */
    @keyframes hero-in{0%{opacity:0;transform:translateY(26px)}100%{opacity:1;transform:none}}
    @keyframes visual-in{0%{opacity:0;transform:translate(40px,30px) rotate(2deg)}100%{opacity:1;transform:none}}
    @keyframes pulse{50%{opacity:.5}}
    @keyframes chip-float{50%{translate:0 -9px}}
    @keyframes reveal{0%{opacity:0;translate:0 54px}100%{opacity:1;translate:none}}
    @keyframes ball-drift{50%{transform:translate(65px,32px) rotate(160deg)}}
    .hero-copy{animation:hero-in .9s cubic-bezier(.2,.7,.2,1) both}
    .phone-wrap{animation:visual-in 1.05s cubic-bezier(.2,.7,.2,1) .1s both}
    .eyebrow b{animation:pulse 1.8s ease infinite}
    .score{animation:chip-float 5s ease-in-out 1s infinite}
    .code{animation:chip-float 5s ease-in-out .4s infinite}
    .pill{transition:transform .25s ease,box-shadow .25s ease}
    .pill:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(237,30,36,.35)}
    .cta{position:relative;overflow:hidden;isolation:isolate}
    .cta:before,.cta:after{content:"";position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.25);border-radius:50%;pointer-events:none}
    .cta:before{width:650px;height:650px;top:-300px;left:-230px}
    .cta:after{width:520px;height:520px;bottom:-300px;right:-120px}
    .cta-ball{position:absolute;top:13%;left:15%;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:inset -12px -9px #dce6eb;animation:ball-drift 6s ease-in-out infinite;pointer-events:none}
    /* Scroll-linked reveals: only where supported, and never for people who ask for less motion. */
    @media (prefers-reduced-motion:no-preference){
      @supports (animation-timeline:view()){
        .section>.kicker,.section>h2,.section-intro,.audience-card,.feature-card,.proof blockquote,.plan,.pricing-foot{animation:reveal linear both;animation-timeline:view();animation-range:entry 5% cover 32%}
      }
    }
    @media (prefers-reduced-motion:reduce){
      *,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    }

/* =============================================================================
   ref_css_extra.css
   CSS the three reference solution pages (/team-scheduling-app, /club-management-app,
   /sports-tournament-software) need that the liveteams.app homepage
   (C:/Users/naviv/Downloads/Code/liveteams-landing/public/index.html, inline <style> at lines 19-75)
   does NOT already define.

   Source stylesheet: https://live-teams-redesign.camilo-u1992-cu.chatgpt.site/_next/static/css/index.BuVRNOEG.css
   (182,515 bytes, saved as ref_site.css). That file is Tailwind v4 (theme/base/utilities layers) plus about
   400 unlayered hand-written rules. The subpages use none of the Tailwind utilities (the only one is
   `antialiased` on <body>). Everything they need is in the unlayered rules copied below.

   Method: I parsed every class and tag inside <main class="seo-page"> on the three pages (all three use the
   same class set), collected every unlayered rule that targets those classes or bare elements, and diffed
   them against the homepage's inline CSS.

   Values are copied from the reference unchanged. The only edits are:
     (a) Bare element selectors in the reference (`nav`, `footer`, `footer>div...`) are re-scoped to
         .seo-header / .seo-footer. As bare element rules they would also restyle the homepage's own
         <footer class="footer"> and any other <nav> if the two stylesheets were ever shared.
     (b) The Tailwind preflight resets the reference silently depends on are re-added below at zero
         specificity. The homepage has no preflight.
     (c) `.reveal` is wrapped in the same motion/support guards the homepage uses (index.html:67-71).
     (d) Rules that fix conflicts with homepage CSS are marked "CONFLICT FIX".

   ---------------------------------------------------------------------------------------------
   CLASS INVENTORY (every class used inside <main> on the 3 pages)       status vs homepage CSS
   ---------------------------------------------------------------------------------------------
   .seo-page                                                             NEW
   .seo-header                (home: .nav.wrap inside .hero)             NEW  (absolute over hero, 82px)
   .brand                     (home: .brand)                             EXISTS, minor differences (see §9)
   .header-login              (home: .header-login)                      PARTIAL: home is not flex, has no svg rule
   .seo-hero                  (home: .hero + .hero-grid)                 NEW
   .seo-hero-copy             (home: .hero-copy)                         NEW  (the ref gives it no entrance animation)
   .breadcrumbs                                                          NEW
   .eyebrow                   (home: .eyebrow)                           EXISTS but differs: ref = flex + <span> dot,
                                                                              home = block + <b> dot
   .seo-lede                  (home: .lede)                              NEW  (similar)
   .hero-actions              (home: .actions)                           NEW  (equivalent; margin-top 34 vs 32)
   .button                    (home: .button)                            EXISTS but CONFLICTS: home .button is
                                                                              white-filled by default; ref .button is
                                                                              unfilled and gets its fill from a variant
   .store-button              (home: plain .button)                      NEW
   .button-outline            (home: .button.outline)                    NEW  (equivalent)
   .microcopy                 (home: .login-note, different content)     NEW
   .seo-visual .seo-stat .seo-dashboard .seo-dashboard-head
   .seo-dashboard-date .seo-points   (home: .phone-wrap/.score/.code)    NEW  (product-mock card)
   .section-pad               (home: .section)                           NEW  (same padding; home .section also
                                                                              styles every h2 inside it)
   .section-heading           (home: none; uses .section>h2 + .section-intro)   NEW
   .kicker                    (home: .kicker)                            EXISTS (tiny differences)
   .light  (only as .kicker.light)                                       NEW
   .seo-benefits .seo-benefit-grid .seo-benefit-card
                              (home: .audience-grid/.audience-card)      NEW  (no hover inversion)
   .seo-how .seo-how-title                                               NEW  (numbered steps band)
   .seo-detail .seo-detail-title .seo-detail-copy                        NEW  (.seo-detail-title has no rule in ref)
   .seo-faq .faq-list                                                    NEW  (<details> accordion)
   .seo-related                                                          NEW  (2-up link cards)
   .seo-final                 (home: .cta)                               NEW  (like .cta, minus rings and ball)
   .seo-footer                (home: .footer)                            NEW  (slim one-row footer)
   .reveal                    (home: applies reveal to a selector list)  NEW
   .lucide .lucide-<name>                                                no CSS in ref either; inline stroke SVGs
                                                                              (arrow-right, calendar-days, check,
                                                                              clipboard-check, log-in, shield-check,
                                                                              trophy, users)
   ---------------------------------------------------------------------------------------------
   Keyframes used: pulse (home has it), reveal (home has it; home animates `translate`, the ref animates
   `transform`, same effect). The ref does NOT use hero-in/visual-in on these pages.

   Font note: the ref preloads Geist but its unlayered `body{font-family:Arial,Helvetica,sans-serif}` wins,
   so the live reference renders in ARIAL (verified in the browser via computed style). The homepage uses
   Geist from Google Fonts (index.html:18,20). Keep Geist.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   0. Token alias. The ref uses --navy-deep; the homepage calls the same colour --deep (#0a2e41).
   --------------------------------------------------------------------------- */
:root{--navy-deep:var(--deep,#0a2e41)}


/* ---------------------------------------------------------------------------
   1. Preflight the reference silently relies on (Tailwind v4 @layer base).
      The homepage has no reset, so without these, p/h2/h3/ol get browser margins and inline SVGs
      ignore vertical margins (e.g. .seo-benefit-card>svg{margin:35px 0 38px} does nothing on an
      inline svg). Zero specificity (:where) so every class rule below and in the homepage still wins.
   --------------------------------------------------------------------------- */
:where(.seo-page) :where(p,h2,h3,ol,ul,figure,blockquote){margin:0}
:where(.seo-page) :where(ol,ul){padding:0;list-style:none}
:where(.seo-page) :where(img,svg){display:block;vertical-align:middle}
/* DECISION: preflight also sets h1-h6{font-weight:inherit}, so on the live reference every H3
   (.seo-benefit-card h3, .seo-how h3) renders at weight 400 (verified: computed fontWeight "400").
   The homepage's H3s are browser-default bold. To match the reference exactly, uncomment:
   :where(.seo-page) :where(h3){font-weight:inherit}                                               */


/* ---------------------------------------------------------------------------
   2. Page shell + header (ref: .seo-page, .seo-header, bare `nav` rules)
   --------------------------------------------------------------------------- */
.seo-page{background:var(--paper)}

.seo-header{
  z-index:5;color:#fff;border-bottom:1px solid #ffffff29;
  justify-content:space-between;align-items:center;
  width:100%;height:82px;padding:0 max(24px,50vw - 620px);
  display:flex;position:absolute;top:0;left:0;
}
/* ref: `nav{color:#cfe0ea;gap:34px;font-size:14px;font-weight:650;display:flex}` + `.seo-header nav{display:flex}` */
.seo-header nav{color:#cfe0ea;gap:34px;font-size:14px;font-weight:650;display:flex}
/* ref: `nav a{transition:all .2s}` / `nav a:hover{color:#fff}` */
.seo-header nav a,.breadcrumbs a{transition:all .2s}
.seo-header nav a:hover{color:#fff}

/* .header-login exists on the homepage as
   `.header-login{color:#d9e7ed;font-size:13px;font-weight:800}`; the ref adds flex + an icon: */
.seo-header .header-login{align-items:center;gap:8px;transition:all .2s;display:flex}
.seo-header .header-login:hover{color:#fff}
.header-login svg{color:#ff6267}

/* Ref brand extras (homepage .brand has no img shadow, no strong weight, no tracking) */
.seo-page .brand{letter-spacing:-.03em;font-weight:700}
.seo-page .brand img{box-shadow:0 8px 22px #00000038}
.seo-page .brand strong{font-weight:800}


/* ---------------------------------------------------------------------------
   3. Hero (ref: .seo-hero, .seo-hero-copy, .breadcrumbs, .eyebrow span, .seo-lede,
      .hero-actions, .button variants, .microcopy)
   --------------------------------------------------------------------------- */
.seo-hero{
  color:#fff;
  background:radial-gradient(circle at 80% 30%,#155e7e 0,transparent 31%),linear-gradient(140deg,var(--navy),var(--navy-deep));
  grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;
  min-height:760px;padding:150px max(24px,50vw - 620px) 100px;
  display:grid;position:relative;overflow:hidden;
}
.seo-hero:before{
  content:"";opacity:.08;
  background-image:linear-gradient(120deg,#0000 49.7%,#fff 50%,#0000 50.3%);
  background-size:340px 340px;position:absolute;inset:0;
}
.seo-hero-copy,.seo-visual{z-index:1;position:relative}

.breadcrumbs{
  color:#87a7b7;text-transform:uppercase;letter-spacing:.1em;
  gap:9px;margin-bottom:32px;font-size:10px;font-weight:800;display:flex;
}
.breadcrumbs a:hover{color:#fff}

/* h1: the homepage already has `h1{margin:0;font-size:clamp(58px,7vw,104px);line-height:.88;letter-spacing:-.075em}`
   and `h1 em{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.82);font-style:normal}`.
   Ref additions: font-weight 850 and max-width 720px, then a smaller size and a solid coral em on subpages. */
.seo-hero h1{max-width:720px;font-weight:850;font-size:clamp(52px,6.4vw,88px)}
.seo-hero h1 em{color:#ff6469;-webkit-text-stroke:0}      /* CONFLICT FIX: kills homepage outline em */

/* .eyebrow differs. Ref: `.eyebrow{color:#cfe0ea;text-transform:uppercase;letter-spacing:.18em;align-items:center;
   gap:10px;margin:0 0 24px;font-size:12px;font-weight:800;display:flex}` and
   `.eyebrow span{color:var(--red);text-shadow:0 0 14px var(--red);font-size:15px;animation:1.8s infinite pulse}`.
   Homepage: `.eyebrow{margin:0 0 22px;color:#cfe0ea;font-size:11px;font-weight:900;letter-spacing:.18em;
   text-transform:uppercase}` + `.eyebrow b{color:red; animation:pulse}`.
   Simplest port: write the dot as <b>●</b> (homepage markup) and add only the flex/glow extras: */
.seo-hero .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 24px;font-size:12px;font-weight:800}
.seo-hero .eyebrow span,.seo-hero .eyebrow b{color:var(--red);text-shadow:0 0 14px var(--red);font-size:15px;animation:1.8s infinite pulse}

.seo-lede{color:#d0e0e7;max-width:650px;margin:28px 0 0;font-size:19px;line-height:1.65}

.hero-actions{flex-wrap:wrap;gap:12px;margin-top:34px;display:flex}

/* .button. Ref base: `.button{border-radius:10px;justify-content:center;align-items:center;gap:12px;min-height:52px;
   padding:0 21px;font-size:14px;font-weight:800;transition:all .22s;display:inline-flex}` and
   `.button:hover{transform:translateY(-2px)}`. It has NO background; the fill comes from a variant.
   The homepage .button is already white/navy-text (= the ref .store-button), so: */
.store-button{color:var(--navy-deep);background:#fff;min-width:205px}   /* ref also groups .button-light here */
.store-button img{object-fit:contain;width:23px;height:23px}
.button-outline{background:#ffffff0f;border:1px solid #ffffff47;color:#fff} /* color:#fff = CONFLICT FIX
                                                                              (homepage .button sets color:var(--deep)) */
/* CONFLICT FIX: homepage `.button svg{width:23px;height:23px;fill:currentColor}` (index.html:20) would
   fill Lucide stroke icons, turning arrow/log-in outlines into solid shapes, and enlarge them from 17px to 23px. */
.seo-page .button svg.lucide{fill:none;width:17px;height:17px}

.microcopy{color:#a9c2d0;align-items:center;gap:8px;margin-top:18px;font-size:12px;font-weight:700;display:flex}
.microcopy span{background:#769bac;border-radius:50%;width:3px;height:3px;margin:0 2px}  /* 3px dot separator */


/* ---------------------------------------------------------------------------
   4. Hero visual: floating stat card + glass "Your season" dashboard
   --------------------------------------------------------------------------- */
.seo-visual{place-items:center;min-height:500px;display:grid}

.seo-dashboard{
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  background:#06212ec7;border:1px solid #ffffff24;border-radius:24px;
  width:min(100%,490px);padding:26px;transform:rotate(2deg);box-shadow:0 45px 90px #00000059;
}
.seo-dashboard-head{border-bottom:1px solid #ffffff1f;justify-content:space-between;align-items:center;padding-bottom:20px;display:flex}
.seo-dashboard-head span{align-items:center;gap:9px;font-weight:900;display:flex}
.seo-dashboard-head img{border-radius:8px}
.seo-dashboard-head b{background:var(--red);letter-spacing:.08em;border-radius:999px;padding:5px 9px;font-size:8px}

.seo-dashboard-date{
  color:var(--ink);background:#fff;border-radius:14px;
  grid-template-columns:40px 1fr auto;align-items:center;gap:13px;
  margin:22px 0;padding:15px;display:grid;
}
.seo-dashboard-date>svg:first-child{width:21px;color:var(--red)}
.seo-dashboard-date>svg:last-child{color:#8aa0ab;width:16px}
.seo-dashboard-date div{gap:3px;display:grid}
.seo-dashboard-date small{color:#8296a0;letter-spacing:.1em;font-size:8px;font-weight:900}   /* a11y: 3.08:1 at 8px */
.seo-dashboard-date strong{color:var(--navy);font-size:13px}

.seo-points{gap:9px;display:grid}
.seo-points>div{
  background:#ffffff0f;border:1px solid #ffffff1a;border-radius:12px;
  grid-template-columns:34px 1fr 18px;align-items:center;gap:11px;padding:11px;display:grid;
}
.seo-points div>span{color:#ff666b;background:#ed1e2424;border-radius:9px;place-items:center;width:34px;height:34px;display:grid}
.seo-points span svg{width:16px}
.seo-points p{color:#d5e2e8;margin:0;font-size:11px;font-weight:800}
.seo-points div>svg{color:#5fd29e;width:14px}   /* green check */

.seo-stat{
  z-index:2;color:var(--ink);background:#fff;border-radius:16px;padding:17px 20px;display:grid;
  position:absolute;top:35px;left:-38px;transform:rotate(-4deg);box-shadow:0 18px 40px #00000040;
}
.seo-stat small{color:#8ba0ab;letter-spacing:.12em;font-size:7px;font-weight:900}   /* a11y: 2.72:1 at 7px */
.seo-stat strong{color:var(--red);letter-spacing:-.05em;font-size:30px}
.seo-stat span{color:#5d737e;font-size:9px}


/* ---------------------------------------------------------------------------
   5. Shared section primitives
   --------------------------------------------------------------------------- */
/* Same horizontal math as the homepage .section (max(24px,calc((100vw - 1240px)/2))); vertical is 90-160 vs 88-155.
   NOTE: if you use the homepage .section class instead, `.section h2{...navy...}` (index.html:20) also hits
   the .seo-how and .seo-final H2s; the white overrides below have equal specificity and must load after it. */
.section-pad{padding:clamp(90px,11vw,160px) max(24px,50vw - 620px)}
.section-heading{max-width:760px}

/* .kicker exists on the homepage (red, 11px, 900, .18em, margin 0 0 22px). Ref values: */
.seo-page .kicker{letter-spacing:.2em;margin:0 0 20px;font-weight:950}
.kicker.light{color:#ff777b}   /* on dark bands 5.52:1 OK; on the red .seo-final it is #ff777b on #ed1e24 = 1.7:1 (fails) */

/* Ref: `.section-heading h2, .feature-intro h2, .tournament h2, .final-cta h2 {...}` (only the first applies here) */
.section-heading h2{color:var(--navy);letter-spacing:-.065em;margin:0;font-size:clamp(46px,6vw,78px);font-weight:900;line-height:.97}
/* Ref: `.section-heading>p:last-child, .feature-intro>p:last-child {...}` (homepage analogue: .section-intro) */
.section-heading>p:last-child{color:#58707d;max-width:600px;margin:24px 0 0;font-size:18px;line-height:1.65}

/* Scroll reveal. Ref: `.reveal{animation:linear both reveal;animation-timeline:view();animation-range:entry 5% cover 32%}`
   (unguarded in ref). Guarded here like the homepage. Keyframes `reveal` already exist in index.html:52. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:linear both reveal;animation-timeline:view();animation-range:entry 5% cover 32%}
  }
}


/* ---------------------------------------------------------------------------
   6. Benefits: 4 numbered cards (white band)
   --------------------------------------------------------------------------- */
.seo-benefits{background:#fff}
.seo-benefit-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:60px;display:grid}
.seo-benefit-card{background:var(--paper);border:1px solid #dde7ec;border-radius:18px;min-height:310px;padding:27px;position:relative}
.seo-benefit-card>span{color:#9dafb8;font-size:9px;font-weight:900;position:absolute;top:25px;right:25px}  /* "01" (a11y: 2.13:1) */
.seo-benefit-card>svg{width:29px;height:29px;color:var(--red);margin:35px 0 38px}   /* needs display:block (see §1) */
.seo-benefit-card h3{color:var(--navy);letter-spacing:-.04em;margin:0 0 12px;font-size:20px}
.seo-benefit-card p{color:#627984;margin:0;font-size:13px;line-height:1.65}


/* ---------------------------------------------------------------------------
   7. How it works: dark band with numbered steps
   --------------------------------------------------------------------------- */
.seo-how{color:#fff;background:var(--navy-deep);grid-template-columns:.8fr 1.2fr;gap:90px;display:grid}
.seo-how h2{color:#fff;letter-spacing:-.06em;margin:0;font-size:clamp(44px,5vw,68px);line-height:1}
.seo-how ol{gap:0;margin:0;padding:0;list-style:none;display:grid}
.seo-how li{border-bottom:1px solid #ffffff21;grid-template-columns:52px 1fr;gap:20px;padding:25px 0;display:grid}
.seo-how li:first-child{padding-top:0}
.seo-how li>span{color:#ff666b;border:1px solid #fff3;border-radius:50%;place-items:center;width:42px;height:42px;font-size:12px;font-weight:900;display:grid}
.seo-how h3{margin:0 0 8px;font-size:20px}
.seo-how li p{color:#a9c1cd;margin:0;font-size:14px;line-height:1.6}
/* .seo-how-title: no base rule in ref (only max-width at <=1040px, see §11) */


/* ---------------------------------------------------------------------------
   8. Long-form detail (ice band, 2 columns) + FAQ accordion + related cards
   --------------------------------------------------------------------------- */
.seo-detail{background:var(--ice);grid-template-columns:1fr 1fr;gap:100px;display:grid}
.seo-detail h2,.seo-faq h2,.seo-related h2{color:var(--navy);letter-spacing:-.06em;margin:0;font-size:clamp(42px,5vw,68px);line-height:1}
/* NOTE: .seo-faq h2 sits inside .section-heading, so `.section-heading h2` (above) competes. Both are (0,1,1);
   the ref's order puts .seo-* later, so the FAQ H2 renders at clamp(42px,5vw,68px). Keep this block after §5. */
.seo-detail-copy p{color:#4f6875;margin:0 0 22px;font-size:16px;line-height:1.8}
.seo-detail-copy a{color:var(--red);align-items:center;gap:9px;margin-top:32px;font-size:13px;font-weight:900;display:flex}
.seo-detail-copy a svg{width:16px}
/* .seo-detail-title: no rule in ref */

.seo-faq{background:#fff}
.faq-list{max-width:850px;margin:60px auto 0}
.faq-list details{border-top:1px solid #dbe6eb}
.faq-list details:last-child{border-bottom:1px solid #dbe6eb}
.faq-list summary{
  cursor:pointer;color:var(--navy);justify-content:space-between;align-items:center;
  padding:25px 0;font-size:17px;font-weight:850;list-style:none;display:flex;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{color:var(--red);font-size:24px;font-weight:400;transition:all .2s}   /* the "+" glyph */
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{color:#5d747f;max-width:700px;margin:0;padding:0 0 25px;font-size:14px;line-height:1.7}
/* (Not in ref, recommended) visible focus ring; the ref has none on summary:
   .faq-list summary:focus-visible{outline:2px solid var(--red);outline-offset:4px} */

.seo-related{background:var(--paper)}
.seo-page .seo-related>div{grid-template-columns:1fr 1fr;gap:14px;margin-top:46px;display:grid}
.seo-page .seo-related>div>a{
  background:#fff;border:1px solid #dbe6eb;border-radius:18px;
  grid-template-columns:1fr auto;min-height:190px;padding:28px;transition:all .25s;display:grid;
}
.seo-page .seo-related>div>a:hover{transform:translateY(-5px);box-shadow:0 18px 40px #0a2e411a}
.seo-page .seo-related a>span{color:var(--navy);letter-spacing:-.04em;font-size:21px;font-weight:900}
.seo-page .seo-related a>p{color:#657c87;align-self:end;margin:0;font-size:13px}
.seo-page .seo-related a>svg{color:var(--red);grid-area:1/2/3;align-self:center}


/* ---------------------------------------------------------------------------
   9. Final CTA (red) + slim footer
   --------------------------------------------------------------------------- */
.seo-final{
  color:#fff;background:var(--red);text-align:center;
  flex-direction:column;justify-content:center;align-items:center;
  min-height:600px;padding:80px 24px;display:flex;
}
.seo-final h2{letter-spacing:-.07em;margin:0;font-size:clamp(56px,8vw,96px);line-height:.92}
/* In the ref this <p> has margin 0 (preflight), so it sits right under the H2. Contrast #ffe3e4 on red = 3.61:1. */
.seo-final>p:not(.kicker){color:#ffe3e4;font-size:17px}
.seo-final .hero-actions{justify-content:center}

/* Ref base is a bare `footer{color:#fff;background:#071f2c;grid-template-columns:2fr repeat(3,1fr);gap:50px;
   padding:80px max(24px,50vw - 620px) 110px;display:grid;position:relative}`, then `.seo-footer` overrides
   columns/gap/padding. Merged and scoped here: */
.seo-footer{
  color:#fff;background:#071f2c;position:relative;
  grid-template-columns:1fr auto auto;align-items:center;gap:35px;min-height:0;
  padding:38px max(24px,50vw - 620px);display:grid;
}
/* ref: `footer>div:not(.footer-brand){flex-direction:column;gap:12px;display:flex}` overridden by: */
.seo-footer>div{display:flex;flex-direction:row;gap:22px}      /* ref used !important on both */
/* ref: `footer>div>a:not(.brand){color:#bed0d9;font-size:13px}` */
.seo-footer>div>a:not(.brand){color:#bed0d9;font-size:13px}
.seo-footer p{color:#608090;margin:0;font-size:11px}           /* a11y: 4.02:1 at 11px (just under AA) */


/* ---------------------------------------------------------------------------
   10. Differences on classes the homepage ALREADY defines (for reference; not applied)
   ---------------------------------------------------------------------------
   .brand        home: display:flex;align-items:center;gap:11px;color:#fff;font-size:19px;font-weight:750; img 42px r11
                 ref : same + letter-spacing:-.03em; weight 700; strong 800; img box-shadow 0 8px 22px #00000038
   .kicker       home: 11px / 900 / .18em / margin 0 0 22px / red
                 ref : 11px / 950 / .2em  / margin 0 0 20px / red
   .button       home: white bg, var(--deep) text, gap 10, padding 0 20px, weight 850, transition .2s
                 ref : no bg (variant decides), gap 12, padding 0 21px, weight 800, transition .22s
   .header-login home: text-only ("↪ Log in to web app"); ref: flex + Lucide log-in icon tinted #ff6267
   h1            home: weight = browser bold (700); ref: 850 + max-width 720px
   .eyebrow      see §3
   Keyframes `pulse` and `reveal` are already in index.html:48-53.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   11. Responsive (ref breakpoints: 1040 / 860 / 620 / 560; homepage uses 960 / 600)
   --------------------------------------------------------------------------- */
@media (max-width:1040px){
  .seo-hero{grid-template-columns:1fr;padding-top:145px}
  .seo-hero-copy{max-width:760px}
  .seo-visual{width:min(100%,700px);margin:auto}
  .seo-benefit-grid{grid-template-columns:1fr 1fr}
  .seo-how{grid-template-columns:1fr}
  .seo-how-title{max-width:650px}
  .seo-footer{grid-template-columns:1fr}
  .seo-footer>div{flex-wrap:wrap}
}
@media (max-width:860px){
  .seo-header nav{display:none}            /* ref also has bare `nav{display:none}`; .breadcrumbs survives via specificity */
  /* ref: `.eyebrow,.hero-actions,.microcopy{justify-content:center}`. On the subpages this centres the eyebrow,
     buttons and microcopy while the H1, lede and breadcrumbs stay LEFT-aligned (only the homepage .hero-copy gets
     text-align:center). That mixed alignment is a quirk of the reference; pick one alignment when porting. */
  .seo-hero .eyebrow,.hero-actions,.microcopy{justify-content:center}
  .seo-detail{grid-template-columns:1fr;gap:45px}
}
@media (max-width:620px){
  .seo-hero{padding-top:120px}
  .seo-hero h1{font-size:51px}
  .seo-visual{min-height:430px}
  .seo-dashboard{padding:18px}
  .seo-stat{top:15px;left:-5px}
  .seo-benefit-grid,.seo-page .seo-related>div{grid-template-columns:1fr}
  .seo-benefit-card{min-height:270px}
  .seo-how{gap:55px}
  .seo-footer>div{grid-template-columns:1fr 1fr;display:grid}   /* ref: display:grid!important */
  .seo-final .hero-actions{flex-direction:column;width:100%}
  .seo-final .button{width:100%}
}
@media (max-width:560px){
  .seo-page .brand{font-size:16px}
  .seo-page .brand img{width:36px;height:36px}
  .seo-header .header-login{gap:6px;font-size:11px}
  .header-login svg{width:15px}
  .hero-actions{flex-direction:column}
  .seo-page .button{width:100%}
  /* ref also sets `h1{font-size:57px}` here, but `.seo-hero h1{font-size:51px}` (620px rule) wins on subpages. */
}
/* The ref's reduced-motion rule is already in the homepage (index.html:72-74):
   *,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important} */

/* ===== sub-page fixes (liveteams.app) ===================================================== */
.seo-page h3{font-weight:800}
.seo-final .kicker.light{color:#fff;opacity:.85}
.hero-actions{flex-wrap:wrap}
.seo-status{display:inline-block;margin:0 0 14px;padding:5px 10px;border-radius:999px;background:var(--ice);color:var(--navy);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.seo-benefit-card .seo-status{margin-top:-14px}
.seo-note{max-width:760px;margin:26px 0 0;color:#58707d;font-size:14px;line-height:1.7}
.seo-note a,.seo-detail-copy p a{color:var(--red);font-weight:800}
.seo-how p a{color:#ff777b;font-weight:800}
.faq-list p a{color:var(--red);font-weight:800}
.seo-hero-copy .eyebrow{justify-content:flex-start;text-align:left}