*{margin:0;padding:0;box-sizing:border-box}

/* FONT-DELIVERY-1 — SELF-HOSTED REVERSIBLE PREVIEW ONLY
   7 WOFF2 files below are the exact Google Fonts-served binaries for
   Inter (v20), captured byte-for-byte via live browser network capture
   and verified MD5+SHA256 against that capture. Not regenerated,
   subset, converted or recompressed. Unicode-range values copied
   verbatim from the live Google Fonts CSS response. Subset order
   matches Google's own declaration order (cyrillic-ext, cyrillic,
   greek-ext, greek, vietnamese, latin-ext, latin). */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('assets/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('assets/fonts/inter-greek-ext.woff2') format('woff2');
  unicode-range:U+1F00-1FFF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('assets/fonts/inter-greek.woff2') format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('assets/fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* END FONT-DELIVERY-1 — REVERSIBLE PREVIEW ONLY */

:root{
  --bg:#0D1117;
  --bg2:#0F1923;
  --card:#131C28;
  --card2:#162030;
  --cyan:#00C8FF;
  --cyan-soft:rgba(0,200,255,0.1);
  --border:rgba(0,200,255,0.15);
  --border2:rgba(255,255,255,0.06);
  --white:#FFFFFF;
  --body:#B0B8C4;
  --muted:rgba(176,184,196,0.6);
}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{background:var(--bg);color:var(--white);font-family:'Inter',system-ui,sans-serif;line-height:1.6;overflow-x:hidden}

/* SKIP LINK — hidden off-screen until keyboard-focused, then appears above the fixed nav */
.skip-link{position:absolute;left:-10000px;top:0;background:var(--cyan);color:#0D1117;padding:12px 20px;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:700;text-decoration:none;border-radius:0 0 4px 0}
.skip-link:focus{position:fixed;left:0;top:0;z-index:1000}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:999;background:rgba(13,17,23,0.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border2);padding:0 5%}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-size:18px;font-weight:800;letter-spacing:2px;text-decoration:none;color:var(--white)}
.logo em{color:var(--cyan);font-style:normal}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{color:#C7D0DC;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;transition:color 0.2s}
.nav-links a:hover{color:var(--white)}
.nav-btn{border:1px solid var(--cyan);color:var(--cyan);padding:8px 22px;border-radius:3px;font-size:11px;font-weight:600;text-decoration:none;letter-spacing:2px;text-transform:uppercase;transition:all 0.2s}
.nav-btn:hover{background:var(--cyan);color:#000}

/* HERO */
.hero{position:relative;width:100%;padding:0}
.hero img{width:100%;height:auto;display:block;max-height:calc(100vh - 66px);object-fit:contain}
.hero-overlay{position:absolute;bottom:0;left:0;right:0;height:20%;background:linear-gradient(transparent 0%,rgba(13,17,23,0.28) 65%,rgba(13,17,23,1) 100%)}

/* STATS BAR */
.stats{margin-top:-20px;background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:24px 20px;text-align:center;border-right:1px solid var(--border2);display:flex;flex-direction:column;align-items:center;justify-content:center}
#shinguards{padding-top:30px}
.stat:last-child{border-right:none}
.stat-n{display:block;font-size:clamp(22px,3vw,36px);font-weight:800;color:var(--white);letter-spacing:1px;line-height:1}
.stat-n--sm{font-size:clamp(22px,3vw,36px);letter-spacing:0.5px}
.stat-l{display:block;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:5px;min-height:14px}

/* SECTIONS */
section{padding:88px 5%}
.s-label{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);margin-bottom:8px;display:block}
.s-title{font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.1;margin-bottom:16px;color:var(--white)}
/* P1 — PARTNERSHIPS & COLLABORATIONS: intentionally lighter than the major-section .s-title */
.partner-title{font-size:clamp(22px,3vw,30px);font-weight:700;line-height:1.2;color:var(--white)}
.s-body{font-size:15px;color:var(--body);line-height:1.85;font-weight:400;max-width:560px}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* BUTTONS */
.btn{display:inline-block;padding:12px 28px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:all 0.2s;cursor:pointer}
.btn-cyan{background:var(--cyan);color:#000}
.btn-cyan:hover{background:#fff}
.btn-outline{border:1px solid rgba(255,255,255,0.25);color:var(--white)}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-link{color:var(--cyan);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-link::after{content:'→';transition:transform 0.2s}
.btn-link:hover::after{transform:translateX(4px)}

/* IMAGE */
.img-round{width:100%;height:auto;display:block;border-radius:8px;object-fit:cover}

/* PRODUCT SECTION */
#shinguards{background:var(--bg)}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-top:56px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 32px}
.spec{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:16px 18px}
.spec-l{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:5px}
.spec-v{font-size:15px;font-weight:600;color:var(--white)}

/* FEATURE 3-GRID */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.feat-card{background:var(--card);border-radius:8px;overflow:hidden;border:1px solid var(--border2);transition:border-color 0.2s}
.feat-card:hover{border-color:rgba(0,200,255,0.25)}
.feat-card img{width:100%;height:auto;object-fit:contain;display:block}
.gate-grid .feat-card img{max-height:420px;object-fit:contain}
.feat-text{padding:20px}
.feat-text p{font-size:13px;color:var(--body);line-height:1.7}

/* TWO-COL */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.two-col.reverse{direction:rtl}
.two-col.reverse > *{direction:ltr}

/* STEPS */
.steps{display:flex;flex-direction:column;gap:0;margin-top:40px;max-width:560px}
.step{border:1px solid var(--border2);border-radius:6px;margin-bottom:8px;overflow:hidden}
.step-q{width:100%;background:none;border:none;color:var(--white);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;padding:18px 20px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;letter-spacing:0.3px}
.step-q:hover{color:var(--cyan)}
.step-ico{color:var(--cyan);font-size:16px;flex-shrink:0;transition:transform 0.2s}
.step-body{max-height:0;overflow:hidden;transition:max-height 0.3s,padding 0.3s}
.step-body.open{max-height:160px;padding:0 20px 18px}
.step-body p{font-size:13px;color:var(--body);line-height:1.7}

/* STEPS — #steps static hybrid (scoped, does not affect shared .steps/.step used on playerhiq.html) */
#steps .steps-hybrid{align-items:flex-start}
#steps .steps-static{display:flex;flex-direction:column;gap:12px;margin-top:27px;max-width:560px}
#steps .step-static{border:1px solid var(--border2);border-radius:6px;padding:18px 20px}
#steps .step-static-num{display:block;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--cyan);margin-bottom:8px}
#steps .step-static-title{font-size:16px;font-weight:700;color:var(--white);margin-bottom:8px}
#steps .step-static-copy{font-size:13px;color:var(--body);line-height:1.6;margin:0}
#steps .steps-hybrid-img{max-height:510px;width:100%;object-fit:cover;object-position:center bottom}

/* VIDEO */
.video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:8px;overflow:hidden;border:1px solid var(--border2)}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}

/* CLUBS */
.clubs{overflow:hidden;padding:48px 5%;background:var(--card);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.clubs p{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:28px}
.clubs-row{display:flex;gap:32px;align-items:center;justify-content:center;flex-wrap:wrap;opacity:0.5;filter:grayscale(100%)}
.clubs-row span{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--body)}

/* GLOBAL FOOTBALL TRUST */
#global-trust{padding:88px 5%}
#global-trust .global-trust-intro{max-width:680px;margin:0 auto 44px;text-align:center}
#global-trust .global-trust-intro .s-body{max-width:600px;margin:14px auto 16px}
#global-trust .global-trust-link{display:inline-block;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0.5px;text-decoration:none;border-bottom:1px solid var(--border2);padding-bottom:2px;transition:color 0.2s,border-color 0.2s}
#global-trust .global-trust-link:hover,
#global-trust .global-trust-link:focus-visible{color:var(--cyan);border-color:rgba(0,200,255,0.4)}
#global-trust .global-trust-strip{display:flex;gap:12px;justify-content:center;max-width:1200px;margin:0 auto}
#global-trust .global-trust-card{flex:1 1 0;max-width:170px;min-width:0;border:1px solid var(--border2);border-radius:8px;padding:10px;background:var(--card);text-align:center}
#global-trust .global-trust-media{aspect-ratio:1/1;border-radius:6px;overflow:hidden;margin-bottom:10px;background:#000}
#global-trust .global-trust-media img{width:100%;height:100%;object-fit:cover;display:block}
#global-trust .global-trust-name{font-size:11px;font-weight:700;color:var(--white);margin-bottom:3px;line-height:1.3}
#global-trust .global-trust-affiliation{font-size:9px;color:var(--muted);line-height:1.4}
@media(max-width:900px){
  #global-trust .global-trust-strip{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:4px 4px 14px;gap:12px}
  #global-trust .global-trust-card{flex:0 0 42%;max-width:170px;scroll-snap-align:start}
  #global-trust .global-trust-strip::-webkit-scrollbar{height:6px}
  #global-trust .global-trust-strip::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
}

/* METRICS GRID */
.met-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,200,255,0.1);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:48px}
.met-card{background:var(--card);padding:28px 20px;transition:background 0.2s;position:relative}
.met-card:hover{background:var(--card2)}
.met-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--cyan);transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.met-card:hover::after{transform:scaleX(1)}
.met-icon{font-size:18px;display:block;margin-bottom:12px;opacity:0.7}
.met-name{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block}
.met-val{font-size:28px;font-weight:800;color:var(--white);display:block;line-height:1}
.met-unit{font-size:11px;color:var(--cyan);font-weight:500;display:block;margin-top:3px}

/* REVIEWS */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.rv-card{background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:32px;transition:border-color 0.3s}
.rv-card:hover{border-color:rgba(0,200,255,0.25)}
.rv-name{font-size:15px;font-weight:700;margin-bottom:3px}
.rv-role{font-size:11px;color:var(--cyan);font-style:italic;margin-bottom:16px;display:block}
.rv-text{font-size:13px;color:var(--body);line-height:1.8}

/* ACADEMY CARDS */
.ac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.ac-card{background:var(--card);border:1px solid var(--border2);border-radius:6px;padding:22px 18px;transition:all 0.2s}
.ac-card:hover{border-color:rgba(0,200,255,0.3)}
.ac-num{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--cyan);display:block;margin-bottom:8px;opacity:0.7}
.ac-title{font-size:13px;font-weight:700;margin-bottom:5px}
.ac-desc{font-size:11px;color:var(--muted);line-height:1.6}

/* APP SECTION */
.app-section{position:relative;overflow:hidden}
.app-bg{position:absolute;inset:0;background:linear-gradient(135deg,#060E1A,#0D1117 60%)}
.app-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.app-btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.app-btn{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px 20px;text-decoration:none;color:var(--white);transition:all 0.2s}
.app-btn:hover{border-color:var(--cyan)}
.app-btn-icon{font-size:22px}
.app-btn-text{display:flex;flex-direction:column}
.app-btn-text small{font-size:9px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.app-btn-text strong{font-size:13px;font-weight:700}

/* =====================================================
   ADDED — Step 13C (2026-07-05): official App Store /
   Google Play badge images, Smart Shinguards app section
   only. New scoped classes — .app-btn/.app-btns left
   completely untouched (still used elsewhere).
   ===================================================== */
.store-badge-link{display:inline-flex;align-items:center;line-height:0}
.store-badge{height:44px;width:auto;display:block}
@media(max-width:560px){.store-badge{height:42px}}

/* WHO FOR */
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.who-card{background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:28px 22px;transition:all 0.3s;cursor:default}
.who-card:hover{border-color:rgba(0,200,255,0.3);transform:translateY(-3px)}
.who-icon{font-size:28px;display:block;margin-bottom:14px}
.who-title{font-size:14px;font-weight:700;margin-bottom:8px}
.who-desc{font-size:12px;color:var(--body);line-height:1.65}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:start}
.about-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--card);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.about-tag{border:1px solid var(--border);border-radius:3px;padding:5px 12px;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
#about .about-tag{background:var(--cyan-soft);border-color:rgba(0,200,255,0.35);color:var(--white)}
.about-quote{border-left:2px solid var(--cyan);padding:14px 18px;background:var(--cyan-soft);font-size:14px;color:var(--body);font-style:italic;line-height:1.7;border-radius:0 4px 4px 0;margin-top:24px}
.exclusive{margin-top:16px;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.exclusive::before{content:'';width:16px;height:1px;background:var(--cyan);opacity:0.5}

/* FAQ */
.faq-wrap{max-width:720px;margin:48px auto 0}
.fq{border-bottom:1px solid var(--border2)}
.fq-q{width:100%;background:none;border:none;color:var(--white);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;padding:22px 0;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color 0.2s}
.fq-q:hover{color:var(--cyan)}
.fq-ico{color:var(--cyan);font-size:18px;flex-shrink:0;font-weight:300;transition:transform 0.2s}
.fq-a{max-height:0;overflow:hidden;transition:max-height 0.35s,padding 0.35s}
.fq-a.open{max-height:200px;padding-bottom:20px}
.fq-a p{font-size:13px;color:var(--body);line-height:1.8}

/* CTA */
.cta-section{background:var(--card);text-align:center;border-top:1px solid var(--border2)}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:36px 0 28px}

/* FOOTER */
footer{background:#080C12;border-top:1px solid var(--border2);padding:48px 5% 28px}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.ft-tagline{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.7;max-width:220px}
.ft-col h5{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(0,200,255,0.72);margin-bottom:16px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-col a{font-size:12px;color:rgba(255,255,255,0.4);text-decoration:none;transition:color 0.2s}
.ft-col a:hover{color:var(--cyan)}
.ft-bottom{border-top:1px solid var(--border2);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.ft-copy{font-size:10px;color:rgba(255,255,255,0.2)}
.ft-badge{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(0,200,255,0.68);border:1px solid rgba(0,200,255,0.28);padding:4px 10px;border-radius:2px}

/* REVEAL */
.r{opacity:0;transform:translateY(24px);transition:opacity 0.65s ease,transform 0.65s ease}
.r.v{opacity:1;transform:none}

/* REDUCED MOTION — scoped override only; default behaviour above is unaffected */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .r{transition:none}
  .fq-a{transition:none}
  .step-body{transition:none}
}
.r1{transition-delay:0.1s}.r2{transition-delay:0.2s}.r3{transition-delay:0.3s}

/* INTRO START */
.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}
.intro{
  background:var(--bg);
  text-align:center;
  padding:80px 5% 8px;
}
.intro .s-label{margin-bottom:4px}
.intro-line{
  display:block;width:40px;height:2px;margin:0 auto 16px;
  background:var(--cyan);border-radius:2px;
}
.intro-h1{
  max-width:940px;margin:0 auto;
  font-size:clamp(24px,3.7vw,40px);
  font-weight:800;line-height:1.15;letter-spacing:0.3px;
  color:#EAEEF3;
  background:linear-gradient(180deg,#FFFFFF 0%,#C7D0DC 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.intro-sub{
  max-width:800px;margin:0 auto 0;
  font-size:clamp(14px,1.6vw,19px);
  line-height:1.55;color:#C7D0DC;
}
.intro-cta{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-top:8px;
}
/* INTRO END */

/* RESPONSIVE */
@media(max-width:900px){
  .prod-grid,.two-col,.about-grid,.app-inner{grid-template-columns:1fr}
  .two-col.reverse{direction:ltr}
  .met-grid,.feat-grid{grid-template-columns:1fr 1fr}
  .who-grid,.ac-grid{grid-template-columns:1fr 1fr}
  .rv-grid{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .met-grid,.who-grid,.ac-grid,.specs,.feat-grid{grid-template-columns:1fr}
  .intro{padding:82px 6% 28px}
  .intro-cta{flex-direction:column;align-items:center}
  .intro-cta .btn{width:100%;max-width:300px}
}
/* MOBILE NAV */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;margin-left:14px;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;background:rgba(13,17,23,0.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border2);padding:6px 5% 14px}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:14px 2px;font-size:13px;border-bottom:1px solid var(--border2)}
}
/* MOBILE BENEFIT STRIP */
.benefit-strip{display:none;list-style:none}
@media(max-width:900px){
  .benefit-strip{display:none}
  .benefit-strip li{font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--body);background:var(--card);border:1px solid var(--border);border-radius:20px;padding:7px 12px}
  .benefit-strip li strong{color:var(--cyan);font-weight:800}
}
/* MOBILE INTRO CTA SWAP */
.cta-mobile{display:none}
@media(max-width:900px){
  .cta-desktop{display:none}
  .cta-mobile{display:inline-block}
}
/* MOBILE INTRO HEADLINE TEXT SWAP */
.h1-mobile-text{display:none}
@media(max-width:900px){
  .h1-desktop-text{display:none}
  .h1-mobile-text{display:inline}
}
/* HIDE NAV CTA ON VERY SMALL PHONES */
@media(max-width:400px){
  .nav-btn{display:none}
}
/* NAV1 — MOBILE-BURGER REQUEST INFO, ONLY WHERE THE STANDALONE CTA ABOVE IS HIDDEN */
.nav-mobile-cta{display:none}
@media(max-width:400px){
  .nav-mobile-cta{display:list-item}
  .nav-mobile-cta a{color:var(--cyan)}
}
/* SEE IT IN ACTION — VIDEO CARDS */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
.vid-card{position:relative;display:block;padding-top:56.25%;border-radius:8px;overflow:hidden;border:1px solid var(--border2);background:var(--bg) center/cover no-repeat;text-decoration:none;transition:transform .25s,border-color .25s}
.vid-card:hover{transform:translateY(-3px);border-color:var(--cyan)}
.vid-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,17,23,0.05) 0%,rgba(13,17,23,0.85) 100%)}
.vid-play{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);transition:transform .25s;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
.vid-card:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid-meta{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.vid-title{color:#fff;font-size:15px;font-weight:600;letter-spacing:.2px}
.vid-watch{color:var(--cyan);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
@media(max-width:900px){.video-grid{grid-template-columns:1fr}}
/* RATINGS — DARK PRODUCT SECTION (scoped to #ratings) */
#ratings{background:var(--bg2)}
#ratings .two-col{align-items:center}
#ratings .ratings-card{max-width:500px;margin:0 auto;padding:22px;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 0 40px rgba(0,200,255,0.08), 0 24px 50px rgba(0,0,0,0.45)}
#ratings .ratings-card img{width:100%;height:auto;display:block;border-radius:10px}

/* =====================================================
   ADDED — Step 2B (2026-07-04): smart-shinguards.html
   New classes only. Nothing above this block was modified.
   ===================================================== */

/* PAGE HERO (first section under fixed nav on sub-pages) */
.page-hero{padding-top:120px}

/* 18 METRICS — CATEGORY GRID */
.mcat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:48px auto 0}
.mcat-card{background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:26px 24px;transition:border-color 0.3s}
.mcat-card:hover{border-color:rgba(0,200,255,0.25)}
.mcat-num{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--cyan);opacity:0.7;display:block;margin-bottom:8px}
.mcat-title{font-size:16px;font-weight:700;color:var(--white);margin-bottom:8px}
.mcat-copy{font-size:13px;color:var(--body);line-height:1.7;margin-bottom:14px}
.mcat-inc{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.mcat-tags{display:flex;flex-wrap:wrap;gap:6px}
.mcat-tag{font-size:11px;font-weight:600;color:var(--body);background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:5px 10px}

/* METRICS — compact category cards (isolated classes, no collision with shared .mcat-* used by hero chips / Who It's For / other pages). Used by the mobile flow only. */
#metrics .mcat-grid-lite{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:32px auto 0}
#metrics .mcat-card-lite{background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:20px 22px;transition:border-color 0.3s}
#metrics .mcat-card-lite:hover{border-color:rgba(0,200,255,0.25)}
#metrics .mcat-lite-title{margin-bottom:6px;color:var(--white);font-size:15px;font-weight:700;line-height:1.35}
#metrics .mcat-lite-copy{margin:0;color:var(--body);font-size:13px;line-height:1.6}
@media(max-width:900px){
  #metrics .mcat-grid-lite{margin-top:24px}
}
@media(max-width:560px){
  #metrics .mcat-grid-lite{grid-template-columns:1fr;gap:10px}
  #metrics .mcat-card-lite{padding:16px 18px}
}

/* METRICS — premium image-led section (final approved direction) */
#metrics{padding:48px 5%}
#metrics .metrics-premium-intro{max-width:640px;margin:0 auto;text-align:center}
#metrics .metrics-premium-h2{margin-top:8px;color:var(--white);font-size:clamp(24px,2.6vw,30px);font-weight:700;line-height:1.14}
#metrics .metrics-premium-visual{max-width:1200px;margin:28px auto 0;overflow:hidden;background:var(--card);border:1px solid rgba(0,200,255,0.18);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,0.34),0 0 36px rgba(0,200,255,0.06)}
#metrics .metrics-premium-visual img{display:block;width:100%;height:auto}
@media(max-width:900px){
  #metrics{padding:44px 5%}
  #metrics .metrics-premium-visual{margin-top:26px;border-radius:10px}
}
@media(max-width:560px){
  #metrics{padding:36px 5%}
  #metrics .metrics-premium-h2{font-size:clamp(25px,8vw,34px);line-height:1.08}
  #metrics .metrics-premium-visual{margin-top:22px;border-radius:8px}
}

/* 18 METRICS — STAT STRIP */
.mstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border2);border:1px solid var(--border2);border-radius:8px;overflow:hidden;max-width:1000px;margin:20px auto 0}
.mstrip div{background:var(--card);padding:18px 12px;text-align:center}
.mstrip strong{display:block;font-size:22px;font-weight:800;color:var(--white);line-height:1.1}
.mstrip span{display:block;font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* VS GPS — COMPARISON TABLE */
.cmp-scroll{overflow-x:auto;margin:48px auto 0;max-width:900px;-webkit-overflow-scrolling:touch}
.cmp-table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;border:1px solid var(--border2);border-radius:8px;overflow:hidden}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:left;font-size:13px;line-height:1.6;border-bottom:1px solid var(--border2)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table thead th{background:var(--card2);color:var(--white);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.cmp-table thead th:nth-child(2){color:var(--cyan)}
.cmp-table tbody th{background:var(--card);color:var(--white);font-weight:600;font-size:12px;letter-spacing:0.5px;width:22%}
.cmp-table td{color:var(--body);background:var(--bg)}
.cmp-table td:nth-child(2){background:rgba(0,200,255,0.04);color:var(--white)}
.cmp-note{max-width:760px;margin:22px auto 0;font-size:13px;color:var(--body);line-height:1.8;text-align:center}
.cmp-quote{max-width:640px;margin:18px auto 0;font-size:13px;color:var(--muted);font-style:italic;text-align:center;line-height:1.7}

/* RESPONSIVE — new classes only */
@media(max-width:900px){
  .mcat-grid{grid-template-columns:1fr}
  .mstrip{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .page-hero{padding-top:104px}
}

/* =====================================================
   ADDED — Step 2C (2026-07-04): vs GPS comparison —
   stacked mobile card layout. All rules are inside a
   max-width media query; desktop table is unchanged.
   ===================================================== */
@media(max-width:900px){
  .cmp-scroll{overflow-x:visible;margin-top:40px}
  .cmp-table{min-width:0;border:none;border-radius:0;overflow:visible}
  .cmp-table thead{display:none}
  .cmp-table tbody tr{display:block;background:var(--card);border:1px solid var(--border2);border-radius:8px;overflow:hidden;margin-bottom:12px}
  .cmp-table tbody tr:last-child{margin-bottom:0}
  .cmp-table tbody th{display:block;width:100%;box-sizing:border-box;background:var(--card2);color:var(--white);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:13px 18px;border-bottom:1px solid var(--border2)}
  .cmp-table tbody td{display:block;width:100%;box-sizing:border-box;padding:13px 18px;border-bottom:none}
  .cmp-table tbody td::before{content:attr(data-label);display:block;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
  .cmp-table tbody td:nth-child(2){background:rgba(0,200,255,0.04);border-bottom:none}
  .cmp-table tbody td:nth-child(2)::before{color:var(--cyan)}
  .cmp-table tbody td:nth-child(3){background:transparent;color:var(--body)}
  .cmp-table tbody td:nth-child(3)::before{color:var(--muted)}
  .cmp-note,.cmp-quote{text-align:left}
}

/* =====================================================
   ADDED — Step 2D (2026-07-04): subtle "VS" divider
   between the two blocks inside each mobile comparison
   card. Pure CSS, inside the same max-width:900px query
   used by Step 2C — desktop is unaffected.
   ===================================================== */
@media(max-width:900px){
  .cmp-table tbody td:nth-child(2)::after{
    content:"VS";
    display:block;
    text-align:center;
    margin-top:14px;
    padding-top:10px;
    border-top:1px solid var(--border2);
    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--muted);
  }
}

/* =====================================================
   ADDED — Step 3D (2026-07-04): smart-football.html
   Small reusable crop/zoom treatment so a repeated
   product photo can read as a "detail view" instead of
   a duplicate of the hero image. No new assets used.
   ===================================================== */
.img-frame{overflow:hidden;border-radius:8px}
.img-detail{transform:scale(1.4);object-position:58% 32%}

/* =====================================================
   ADDED — Step 5B (2026-07-04): new Home page (index.html)
   Two small, reusable additions for the hub page only.
   Nothing above this block was modified.
   ===================================================== */

/* PRODUCT GATEWAY — two-card grid (reuses .feat-card/.feat-text) */
.gate-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
@media(max-width:900px){.gate-grid{grid-template-columns:1fr}}

/* WHO IT'S FOR — lightweight chip row (distinct from .who-card grid on subpages) */
.chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.chip{background:var(--card);border:1px solid var(--border2);border-radius:30px;padding:12px 26px;font-size:13px;font-weight:600;color:var(--white)}

/* =====================================================
   ADDED — Step 12B (2026-07-05): "How To Start" process
   cards, Home page only. New scoped classes — no existing
   rule modified (does not reuse .ac-card/.who-card/.feat-card).
   ===================================================== */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;max-width:900px;margin-left:auto;margin-right:auto}
.step-card{background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:28px 24px;text-align:center;transition:border-color 0.2s}
.step-card:hover{border-color:rgba(0,200,255,0.3)}
.step-num{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--cyan);display:block;margin-bottom:10px;opacity:0.85}
.step-title{font-size:16px;font-weight:700;color:var(--white);margin-bottom:10px}
.step-desc{font-size:13px;color:var(--body);line-height:1.7}
@media(max-width:900px){.step-grid{grid-template-columns:1fr}}

/* =====================================================
   ADDED — Step 12D (2026-07-05): "Built for Every Level"
   audience cards, Home page only. New scoped classes —
   lighter/more compact than Step 12B .step-card. No
   existing rule modified; .chip/.chip-row left intact
   and unused.
   ===================================================== */
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.audience-card{background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:20px 18px;text-align:center;transition:border-color 0.2s}
.audience-card:hover{border-color:rgba(0,200,255,0.25)}
.audience-num{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--cyan);display:block;margin-bottom:8px;opacity:0.8}
.audience-title{font-size:14px;font-weight:700;color:var(--white);margin-bottom:6px}
.audience-hook{font-size:12px;color:var(--body);line-height:1.6}
@media(max-width:900px){.audience-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.audience-grid{grid-template-columns:1fr}}

/* =====================================================
   HOME SECTION — #phq-merge "PlayerHIQ Method" (REV4)
   Replaces the former two-column "Smart Data. Real
   Coaching." editorial layout. Unified full-width
   composition: label, heading, supporting sentence,
   generic UEFA Pro trust line, four actions, CTA group.
   No cards, no boxes, no visible stage numbers.
   ===================================================== */
#phq-merge{background:var(--bg);padding-top:84px;padding-bottom:84px}

#phq-merge .pmx-wrap{
  max-width:1180px;
  margin:0 auto;
  text-align:center;
}

#phq-merge .pmx-label{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:20px;
}

#phq-merge .pmx-h2{
  font-size:clamp(23px,2.75vw,37px);
  font-weight:800;
  line-height:1.18;
  letter-spacing:0.2px;
  color:#EAEEF3;
  background:linear-gradient(180deg,#FFFFFF 0%,#C7D0DC 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  max-width:860px;
  margin:0 auto;
}

#phq-merge .pmx-lead{
  font-size:15.5px;
  line-height:1.7;
  color:rgba(234,238,243,0.80);
  max-width:640px;
  margin:20px auto 0;
}

#phq-merge .pmx-proof{
  font-size:13px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0.1px;
  color:var(--body);
  max-width:640px;
  margin:16px auto 0;
}

#phq-merge .pmx-actions{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:56px auto 0;
  padding:0;
  text-align:left;
}

#phq-merge .pmx-action{
  padding:0 30px;
}

#phq-merge .pmx-action:first-child{padding-left:0}
#phq-merge .pmx-action:last-child{padding-right:0}

#phq-merge .pmx-action + .pmx-action{
  border-left:1px solid rgba(255,255,255,0.08);
}

#phq-merge .pmx-action::before{
  content:'';
  display:block;
  width:26px;
  height:2px;
  border-radius:1px;
  background:var(--cyan);
  margin-bottom:18px;
}

#phq-merge .pmx-action-t{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--white);
  line-height:1.35;
  margin-bottom:9px;
}

#phq-merge .pmx-action-c{
  font-size:13px;
  line-height:1.65;
  color:var(--body);
  margin:0;
}

#phq-merge .pmx-cta{
  margin-top:54px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 28px;
}

/* --- TABLET: 2 x 2 (catches 1024 and 768) --- */
@media(max-width:1100px){
  #phq-merge .pmx-actions{
    grid-template-columns:repeat(2,1fr);
    margin-top:48px;
  }

  #phq-merge .pmx-action{
    padding:0 30px;
  }

  #phq-merge .pmx-action:nth-child(odd){padding-left:0}
  #phq-merge .pmx-action:nth-child(even){padding-right:0}

  #phq-merge .pmx-action + .pmx-action{border-left:0}
  #phq-merge .pmx-action:nth-child(even){
    border-left:1px solid rgba(255,255,255,0.08);
  }

  #phq-merge .pmx-action:nth-child(n+3){
    margin-top:34px;
    padding-top:34px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
}

/* --- MOBILE: single vertical sequence with left cyan rule --- */
@media(max-width:560px){
  #phq-merge .pmx-lead{
    font-size:14.5px;
    margin-top:16px;
  }

  #phq-merge .pmx-proof{
    font-size:12px;
    margin-top:14px;
    max-width:none;
  }

  #phq-merge .pmx-actions{
    grid-template-columns:1fr;
    text-align:left;
    margin-top:30px;
    padding-left:20px;
    border-left:1px solid rgba(0,200,255,0.3);
  }

  #phq-merge .pmx-action,
  #phq-merge .pmx-action:first-child,
  #phq-merge .pmx-action:last-child,
  #phq-merge .pmx-action:nth-child(odd),
  #phq-merge .pmx-action:nth-child(even){
    padding:0;
    margin:0;
    border-left:0;
    border-top:0;
  }

  #phq-merge .pmx-action::before{display:none}

  #phq-merge .pmx-action + .pmx-action{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.07);
  }

  #phq-merge .pmx-action-t{font-size:14.5px;margin-bottom:6px}
  #phq-merge .pmx-action-c{font-size:12.5px}

  #phq-merge .pmx-cta{
    margin-top:32px;
    flex-direction:column;
    gap:18px;
  }

  #phq-merge .pmx-cta .btn{
    width:100%;
    max-width:340px;
    text-align:center;
  }
}

@media(max-width:900px){
  #phq-merge{
    padding-top:58px;
    padding-bottom:58px;
  }
}

@media(max-width:560px){
  #phq-merge{
    padding-top:32px;
    padding-bottom:32px;
  }
}

/* =====================================================
   ADDED — Step 6C (2026-07-04): subtle active nav state
   Block-level ::after so it stacks safely under the text
   in both desktop (flex row) and mobile (stacked) nav —
   no absolute positioning, no other rules touched.
   ===================================================== */
.nav-links a.is-active{color:var(--white)}
.nav-links a.is-active::after{content:'';display:block;height:2px;background:var(--cyan);margin-top:6px;border-radius:1px}

/* Smart Shinguards hero — secondary reassurance chips (scoped) */
.hero-reassurance-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
@media(max-width:560px){.hero-reassurance-tags{grid-template-columns:repeat(2,1fr)}}

/* Smart Shinguards hero — compact above-the-fold (scoped) */
.sg-hero{padding-top:88px;padding-bottom:56px}
.sg-hero .prod-grid{margin-top:32px}
.sg-hero .prod-grid img.img-round{max-height:560px;max-width:100%;width:auto;margin-left:auto;margin-right:auto;display:block}
.sg-hero .sg-hero-cta{margin-top:24px;margin-bottom:28px}

/* =====================================================
   SMART SHINGUARDS — ADVANCED TRACKER COMPACT LAYOUT
   Scoped only to #tracker
   ===================================================== */

#tracker{
  padding-top:48px;
  padding-bottom:48px;
}

#tracker .feat-grid{
  margin-top:28px;
  gap:20px;
}

#tracker .feat-card img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
}

#tracker .feat-text{
  padding:18px 20px;
}

@media(max-width:900px){
  #tracker{
    padding-top:44px;
    padding-bottom:44px;
  }

  #tracker .feat-grid{
    margin-top:28px;
    gap:18px;
  }
}

@media(max-width:700px){
  #tracker .feat-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  #tracker{
    padding-top:40px;
    padding-bottom:40px;
  }

  #tracker .feat-grid{
    margin-top:24px;
    gap:20px;
  }

  #tracker .feat-text{
    padding:17px 18px;
  }
}

/* =====================================================
   SMART SHINGUARDS — 18 PERFORMANCE METRICS VISUAL
   Scoped only to #metrics
   ===================================================== */

#metrics .metrics-lead{
  max-width:1200px;
  margin:0 auto;
}

#metrics .metrics-intro{
  max-width:680px;
  margin:0 auto;
  text-align:center;
}

#metrics .metrics-intro .s-body{
  margin:0 auto;
}

#metrics .metrics-visual{
  max-width:1200px;
  margin:40px auto 0;
  background:var(--card);
  border:1px solid rgba(0,200,255,0.18);
  border-radius:12px;
  overflow:hidden;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.34),
    0 0 36px rgba(0,200,255,0.06);
}

#metrics .metrics-visual img{
  width:100%;
  height:auto;
  display:block;
}

#metrics .metrics-visual picture{
  display:block;
}

#metrics .mcat-grid{
  max-width:1200px;
  margin-top:24px;
  gap:14px;
}

#metrics .mcat-card{
  padding:22px;
}

#metrics .mcat-copy{
  margin-bottom:12px;
}

#metrics .mcat-tags{
  gap:5px;
}

#metrics .mcat-tag{
  padding:4px 9px;
}

@media(max-width:900px){
  #metrics .metrics-visual{
    margin-top:32px;
    border-radius:10px;
  }

  #metrics .mcat-grid{
    margin-top:20px;
  }
}

@media(max-width:560px){
  #metrics .metrics-visual{
    margin-top:28px;
    border-radius:8px;
  }

  #metrics .mcat-grid{
    gap:12px;
  }

  #metrics .mcat-card{
    padding:20px 18px;
  }
}

@media(min-width:1600px){
  #metrics .metrics-lead{
    max-width:1500px;
    display:grid;
    grid-template-columns:minmax(380px,420px) minmax(0,1fr);
    gap:56px;
    align-items:center;
  }

  #metrics .metrics-intro{
    max-width:none;
    margin:0;
    text-align:left;
  }

  #metrics .metrics-intro .s-body{
    margin:0;
  }

  #metrics .metrics-visual{
    max-width:none;
    margin:0;
  }
}

/* =====================================================
   SMART SHINGUARDS — VS GPS COPY & COMPACT LAYOUT
   Scoped only to #vs-gps
   ===================================================== */

#vs-gps{
  padding-top:44px;
  padding-bottom:44px;
}

#vs-gps .vs-gps-intro{
  max-width:860px;
  margin:0 auto;
  text-align:center;
}

#vs-gps .vs-gps-intro .s-body{
  margin:0 auto;
}

#vs-gps .cmp-scroll{
  max-width:1100px;
  margin-top:24px;
}

#vs-gps .cmp-table th,
#vs-gps .cmp-table td{
  padding:12px 16px;
  line-height:1.5;
}

#vs-gps .cmp-note{
  max-width:900px;
  margin:18px auto 0;
  padding:14px 18px;
  background:transparent;
  border:0;
  border-left:2px solid var(--cyan);
  border-radius:0;
  color:var(--white);
  font-size:13px;
  font-weight:600;
  line-height:1.65;
  text-align:left;
  box-shadow:none;
}

#vs-gps .vs-gps-cta{
  margin-top:20px;
  text-align:center;
}

@media(max-width:900px){
  #vs-gps{
    padding-top:44px;
    padding-bottom:44px;
  }

  #vs-gps .cmp-scroll{
    margin-top:28px;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
  }

  #vs-gps .cmp-table tbody tr{
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }

  #vs-gps .cmp-table tbody tr:not(:last-child){
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  #vs-gps .cmp-table tbody tr:last-child{
    border-bottom:0;
  }

  #vs-gps .cmp-table tbody th,
  #vs-gps .cmp-table tbody td{
    padding:14px 16px;
  }

  #vs-gps .cmp-note{
    margin-top:16px;
    padding:14px 16px;
    text-align:left;
  }

  #vs-gps .vs-gps-cta{
    margin-top:20px;
  }
}

/* ==========================================================================
   SMART FOOTBALL PAGE — FINAL SECTION STYLES (approved REV2)
   All selectors scoped .sf2-* / #sf2-*. Does not modify any shared selector
   used by index.html, smart-shinguards.html or playerhiq.html.
   ========================================================================== */

/* ---- shared preview section rhythm ---------------------------------- */
.sf2-sec{padding:68px 5%}
.sf2-wrap{max-width:1180px;margin:0 auto}
.sf2-wrap--narrow{max-width:960px;margin:0 auto}

/* G. fixed-nav anchor offset — heading is never covered on direct anchor nav */
#sf2-hero,.sf2-sec{scroll-margin-top:86px}

.sf2-eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:11px}
.sf2-h2{font-size:clamp(25px,3.2vw,38px);font-weight:700;line-height:1.14;color:var(--white);margin-bottom:13px;letter-spacing:-0.3px}
.sf2-lead{font-size:15.5px;line-height:1.68;color:rgba(234,238,243,0.80);max-width:640px}

/* ---- 1. HERO --------------------------------------------------------- */
#sf2-hero{padding:112px 5% 58px;position:relative;overflow:hidden;background:var(--bg)}
#sf2-hero::before{content:'';position:absolute;top:-180px;right:-120px;width:760px;height:760px;
  background:radial-gradient(circle,rgba(0,200,255,0.10) 0%,rgba(0,200,255,0) 62%);pointer-events:none}
.sf2-hero-grid{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:60px;align-items:center;max-width:1180px;margin:0 auto}
.sf2-hero-label{font-size:9.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:16px;line-height:1.6}
.sf2-h1{font-size:clamp(30px,4.2vw,50px);font-weight:800;line-height:1.06;letter-spacing:-1px;color:var(--white);margin-bottom:18px}
.sf2-hero-copy{font-size:16px;line-height:1.65;color:rgba(234,238,243,0.82);max-width:500px;margin-bottom:14px}
.sf2-hero-product{font-size:13.5px;line-height:1.6;color:var(--body);max-width:500px;padding-left:13px;border-left:2px solid rgba(0,200,255,0.45);margin-bottom:26px}
.sf2-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.sf2-hero-media{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border2);background:var(--card)}
.sf2-hero-media img{width:100%;height:auto;display:block}
.sf2-hero-media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,17,23,0.16) 0%,rgba(13,17,23,0) 34%,rgba(13,17,23,0.30) 100%)}

/* ---- 2+3. VIDEO AND HOW IT WORKS — ONE CONTINUOUS CHAPTER ------------ */
#sf2-video{background:var(--bg2);padding-bottom:30px}
#sf2-how{background:var(--bg2);padding-top:34px}
.sf2-video-head{text-align:center;max-width:640px;margin:0 auto 24px}
.sf2-video-head .sf2-lead{margin:0 auto}
.sf2-video-frame{position:relative;width:100%;max-width:820px;margin:0 auto;aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;border:1px solid var(--border2);background:#000}
.sf2-video-frame video{width:100%;height:100%;display:block;object-fit:cover;background:#000}

.sf2-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px;position:relative}
.sf2-step{padding:0 24px;position:relative}
.sf2-step:first-child{padding-left:0}
.sf2-step:last-child{padding-right:0}
.sf2-step::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(0,200,255,0) 0%,rgba(0,200,255,0.34) 22%,rgba(0,200,255,0.34) 78%,rgba(0,200,255,0) 100%)}
.sf2-step:first-child::before{display:none}
.sf2-step-k{font-size:9.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:9px}
.sf2-step-t{font-size:16.5px;font-weight:700;color:var(--white);margin-bottom:8px;line-height:1.25}
.sf2-step-d{font-size:13.5px;line-height:1.62;color:var(--body)}
.sf2-how-head{max-width:640px}

/* ---- 4. GUIDED TRAINING + APP (MERGED) ------------------------------- */
#sf2-drills{background:var(--bg)}
.sf2-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.sf2-split--media-first .sf2-split-media{order:-1}
.sf2-shot{width:100%;max-width:500px;height:auto;display:block;border-radius:10px}
.sf2-drill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:520px}
.sf2-drill{font-size:12.5px;font-weight:600;letter-spacing:0.4px;color:rgba(234,238,243,0.88);
  border:1px solid var(--border2);background:var(--card);border-radius:4px;padding:7px 13px}
.sf2-appblock{margin-top:26px;padding-top:22px;border-top:1px solid var(--border2);max-width:560px}
.sf2-appblock p{font-size:14px;line-height:1.68;color:var(--body)}
.sf2-nosub{display:inline-block;margin-top:16px;font-size:10.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--cyan);border:1px solid var(--border);border-radius:3px;padding:7px 14px}
.sf2-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}
.sf2-badges img{height:40px;width:auto;display:block}

/* ---- 5. INSIDE THE BALL --------------------------------------------- */
#sf2-inside{background:var(--bg2)}
.sf2-inside-media{border-radius:10px;overflow:hidden;border:1px solid var(--border2);background:#000;max-width:560px}
.sf2-inside-media img{width:100%;height:auto;display:block}
.sf2-labels{list-style:none;margin:22px 0 0;padding:0;max-width:520px}
.sf2-labels li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--border2)}
.sf2-labels li:first-child{border-top:1px solid var(--border2)}
.sf2-lab-k{font-size:13.5px;font-weight:600;color:var(--white)}
.sf2-lab-v{font-size:12.5px;color:var(--cyan);font-weight:600;letter-spacing:0.4px;white-space:nowrap;text-align:right}
.sf2-assure{margin-top:20px;max-width:520px;font-size:13.5px;line-height:1.7;color:var(--body)}

/* ---- 6. SPECIFICATIONS ---------------------------------------------- */
#sf2-specs{background:var(--bg)}
.sf2-table-wrap{margin-top:30px;border:1px solid var(--border2);border-radius:10px;overflow:hidden}
.sf2-table{width:100%;border-collapse:collapse;font-size:14px}
.sf2-table th,.sf2-table td{padding:11px 18px;text-align:left;border-bottom:1px solid var(--border2);vertical-align:top}
.sf2-table tbody tr:last-child th,.sf2-table tbody tr:last-child td{border-bottom:none}
.sf2-table thead th{background:var(--card);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
.sf2-table tbody th{font-weight:600;color:rgba(234,238,243,0.92);width:32%}
.sf2-table td{color:var(--body)}
.sf2-table td b{color:var(--white);font-weight:600}
.sf2-grp{display:none}          /* mobile-only grouping headers */
.sf2-spec-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.65;max-width:720px}

/* ---- 7. BETTER TOGETHER — COMPACT CROSS-SELL STRIP ------------------- */
#sf2-together{background:var(--bg2)}
.sf2-bt-head{max-width:660px}
.sf2-bt{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px;max-width:940px}
.sf2-bt-item{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center}
.sf2-bt-img{border-radius:8px;overflow:hidden;border:1px solid var(--border2);background:#000}
.sf2-bt-img img{width:100%;height:132px;object-fit:cover;display:block}
.sf2-bt-item h3{font-size:14.5px;font-weight:700;color:var(--white);margin-bottom:6px}
.sf2-bt-item p{font-size:13.5px;line-height:1.6;color:var(--body)}
.sf2-bt-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--border2);max-width:940px}
.sf2-bt-foot p{font-size:14px;color:rgba(234,238,243,0.85);line-height:1.6;max-width:560px}

/* ---- 8. FAQ ---------------------------------------------------------- */
#sf2-faq{background:var(--bg)}
.sf2-faq-list{margin-top:28px;max-width:820px;border-top:1px solid var(--border2)}
.sf2-q{width:100%;background:none;border:none;border-bottom:1px solid var(--border2);
  display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;
  padding:17px 2px;color:var(--white);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;min-height:52px}
.sf2-q:hover{color:var(--cyan)}
.sf2-q:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sf2-q-ico{flex:0 0 auto;font-size:18px;line-height:1;color:var(--cyan);font-weight:400}
.sf2-a{display:none;padding:0 2px 20px;font-size:14px;line-height:1.72;color:var(--body);
  max-width:720px;border-bottom:1px solid var(--border2)}
.sf2-a.is-open{display:block}

/* ---- 9. WHY PLAYERHIQ + FINAL CTA (MERGED) --------------------------- */
#sf2-cta{background:var(--bg2);text-align:center}
#sf2-cta .sf2-h2{margin-left:auto;margin-right:auto;max-width:620px}
.sf2-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .sf2-hero-grid{gap:42px}
  .sf2-split{gap:40px}
  .sf2-bt{gap:22px}
  .sf2-bt-item{grid-template-columns:112px 1fr;gap:16px}
  .sf2-bt-img img{height:112px}
}

/* --- tablet band: fixes the stranded 768px range --- */
@media(max-width:900px){
  .sf2-sec{padding:52px 5%}
  #sf2-hero{padding:98px 5% 48px}
  #sf2-video{padding-bottom:26px}
  #sf2-how{padding-top:28px}

  .sf2-hero-grid{grid-template-columns:1fr;gap:28px}
  .sf2-hero-media{order:-1;max-width:520px;margin:0 auto}
  .sf2-hero-copy,.sf2-hero-product{max-width:none}

  .sf2-split{grid-template-columns:1fr;gap:28px}
  .sf2-split-media{max-width:460px}
  .sf2-shot{max-width:460px}
  .sf2-inside-media{max-width:520px}
  .sf2-labels,.sf2-assure,.sf2-drill-list,.sf2-appblock{max-width:none}

  .sf2-steps{grid-template-columns:1fr 1fr;gap:26px 0}
  .sf2-step{padding:0 22px}
  .sf2-step:nth-child(odd){padding-left:0}
  .sf2-step:nth-child(even){padding-right:0}
  .sf2-step:nth-child(3)::before{display:none}
  .sf2-step:first-child::before{display:none}

  .sf2-bt{grid-template-columns:1fr;gap:16px;max-width:560px}
}

/* --- phone --- */
@media(max-width:600px){
  .sf2-sec{padding:34px 5%}
  #sf2-hero{padding:86px 5% 34px}
  #sf2-video{padding-bottom:20px}
  #sf2-how{padding-top:24px}

  .sf2-h1{font-size:clamp(27px,8.2vw,34px)}
  .sf2-hero-copy{font-size:15px;margin-bottom:12px}
  .sf2-hero-product{margin-bottom:20px}
  .sf2-hero-cta{gap:9px}
  .sf2-hero-cta .btn{flex:1 1 100%;text-align:center}

  .sf2-steps{grid-template-columns:1fr;gap:0}
  .sf2-step{padding:18px 0 0}
  .sf2-step::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,rgba(0,200,255,0.34),rgba(0,200,255,0))}
  .sf2-step:nth-child(3)::before{display:block}
  .sf2-step:first-child{padding-top:0}

  .sf2-video-frame{border-radius:8px}
  .sf2-badges img{height:36px}
  .sf2-cta-row .btn{flex:1 1 100%;text-align:center}

  .sf2-bt-item{grid-template-columns:96px 1fr;gap:14px}
  .sf2-bt-img img{height:96px}
  .sf2-bt-foot{margin-top:20px;padding-top:16px;gap:16px}

  /* ---- SPECIFICATIONS: three compact groups on mobile ---- */
  .sf2-table-wrap{border:none;border-radius:0;margin-top:24px}
  .sf2-table,.sf2-table tbody,.sf2-table tr,.sf2-table th,.sf2-table td{display:block;width:auto}
  .sf2-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  .sf2-grp{display:block;margin-top:11px}
  .sf2-grp th{padding:0 0 8px;border:none;font-size:9.5px;font-weight:700;letter-spacing:2.4px;
    text-transform:uppercase;color:var(--cyan)}
  .sf2-tb{border:1px solid var(--border2);border-radius:8px;padding:4px 14px;display:block}
  .sf2-tb tr{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:7px 0;border-bottom:1px solid var(--border2)}
  .sf2-tb tr:last-child{border-bottom:none}
  .sf2-tb tr.sf2-grp{display:block;border:none;padding:0}
  .sf2-tb th{width:auto;padding:0;border:none;font-size:12.5px;font-weight:600;
    color:rgba(234,238,243,0.92);flex:0 0 auto}
  .sf2-tb td{padding:0;border:none;font-size:12.5px;text-align:right;color:var(--body)}
  .sf2-tb td::before{content:attr(data-l) ' ';color:var(--muted)}

  /* size rows stack their two columns as labelled lines */
  .sf2-tb tr.sf2-r2{display:block;padding:7px 0}
  .sf2-tb tr.sf2-r2 th{padding:0 0 5px;display:block}
  .sf2-tb tr.sf2-r2 td{display:flex;justify-content:space-between;gap:14px;padding:2px 0;text-align:right}
  .sf2-tb tr.sf2-r2 td::before{content:attr(data-l);color:var(--muted);text-align:left}
}

@media(max-width:380px){
  .sf2-drill{font-size:12px;padding:6px 10px}
  .sf2-lab-v{font-size:11.5px}
  .sf2-tb th,.sf2-tb td{font-size:12px}
}

/* ==========================================================================
   PLAYER RATINGS & LEADERBOARDS — unified section (replaces #ratings + #leaderboards)
   Scoped .rlh-*. Does not modify any shared selector.
   ========================================================================== */
#ratings-leaderboards{padding:84px 5%;background:var(--bg2)}
.rlh-arch{display:grid}
.rlh-micro{font-size:12.5px;color:rgba(176,184,196,0.82);line-height:1.6;max-width:520px;margin-top:16px}
.rlh-privacy{font-size:12.5px;color:rgba(176,184,196,0.82);line-height:1.6;margin-top:14px;display:flex;align-items:center;gap:7px}
.rlh-privacy svg{flex:0 0 auto;color:var(--cyan)}

.rlh-visual img{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;border-radius:14px}

.rlh-benefits{display:flex;flex-direction:column;gap:14px;margin-bottom:4px;margin-top:32px}
.rlh-benefit{display:flex;gap:13px;align-items:flex-start}
.rlh-benefit-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-top:8px}
.rlh-benefit h3{font-size:14px;font-weight:700;color:var(--white);margin-bottom:3px}
.rlh-benefit p{font-size:13px;color:var(--body);line-height:1.55}

/* Desktop-only architecture: header (eyebrow/headline/subhead) and support
   (benefits/cadence/privacy) become two rows in the left column; the visual
   spans both rows on the right. CSS Grid items never collapse margins with
   each other, so .rlh-support's own top edge (which "inherits" .rlh-benefits'
   32px margin-top, since being a grid item stops that margin from escaping
   to merge with .rlh-visual's margin) renders that 32px as real, uncollapsed
   space -- reproducing the mobile gap's total exactly, just via a different
   (and here, more correct) box-model path. Nothing in this block applies
   below 901px -- mobile keeps the plain 1-column .rlh-arch rule above,
   unchanged since before this gate. */
@media(min-width:901px){
  .rlh-arch{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"header visual" "support visual";
    column-gap:64px;
  }
  .rlh-header{grid-area:header}
  .rlh-visual{grid-area:visual;align-self:center}
  .rlh-support{grid-area:support}
}

@media(max-width:900px){
  #ratings-leaderboards{padding:56px 5%}
  .rlh-visual{margin:22px 0 24px}
  .rlh-visual img{max-width:420px}
}
@media(max-width:600px){
  #ratings-leaderboards{padding:40px 5%}
  .rlh-visual{margin:18px 0 20px}
  .rlh-visual img{max-width:340px}
  .rlh-benefits{gap:10px;margin-top:24px}
}

/* ==========================================================================
   VIDEO SECTION — single featured video (approved final)
   Scoped to .video-grid--single / .vid-card--featured / etc.
   ========================================================================== */
.video-grid--single{grid-template-columns:1fr;max-width:1000px}
.vid-card--featured{padding-top:56.25%;border-radius:12px;box-shadow:0 0 50px rgba(0,200,255,0.10),0 30px 60px rgba(0,0,0,0.5)}
.vid-card--featured::before{background:linear-gradient(180deg,rgba(13,17,23,0.10) 0%,rgba(13,17,23,0.88) 100%)}
.vid-play--featured{top:44%}
.vid-meta--featured{padding:26px 30px}
.vid-title--featured{font-size:19px;font-weight:700;letter-spacing:0.1px}
.vid-watch--featured{font-size:12px;letter-spacing:1.8px;margin-top:2px}
@media(max-width:600px){
  .vid-meta--featured{padding:18px 20px}
  .vid-title--featured{font-size:16px}
}

/* ==========================================================================
   VIDEO SECTION — viewport-fit refinement (Option B, height-aware)
   Uses only the existing #videos id and .video-grid--single class already
   in the markup — no new classes were added to the HTML.
   ========================================================================== */
#videos > div:first-child{margin:0 auto 40px}  /* unchanged default (mobile/base) */

@media(min-width:901px){
  #videos{padding:72px 5%}
  #videos .video-grid--single{max-width:960px}
  #videos > div:first-child{margin:0 auto 30px}
}
@media(min-width:901px) and (max-height:820px){
  #videos{padding:48px 5%}
  #videos .video-grid--single{max-width:820px}
  #videos > div:first-child{margin:0 auto 20px}
}

/* =====================================================
   SMART SHINGUARDS — FAQ TWO-COLUMN LAYOUT
   Scoped only to #faq. Does not modify .faq-wrap, .fq,
   .fq-q, .fq-a or .fq-ico — Smart Football FAQ is unaffected.
   ===================================================== */
#faq .faq-wrap--2col{
  max-width:1100px;
  display:flex;
  gap:56px;
  align-items:flex-start;
}

#faq .faq-col{
  flex:1;
  min-width:0;
}

@media(max-width:900px){
  #faq .faq-wrap--2col{
    display:block;
  }
}

/* === HERO DESKTOP ARCHITECTURE (A3.1, 6px lift) ===
   981  = mirror of the site's own @media(max-width:980px) nav/burger boundary
   1085 = measured lowest width where the overlaid intro stops touching the panel
   The 1280+ block holds the already-approved wide-desktop values. */
@media(min-width:981px){ .intro-cta{display:none} }
@media(min-width:981px) and (max-width:1084px){ .intro{padding:86px 5% 10px} }
@media(min-width:1085px) and (max-width:1279px){
  .intro{position:relative;z-index:2;background:transparent;padding:80px 5% 8px}
  .hero{margin-top:-135px}
  .hero img{max-height:100vh}
}
@media(min-width:1280px){
  .intro{position:relative;z-index:2;background:transparent;padding:86px 5% 8px}
  .hero{margin-top:-141px}
  .hero img{max-height:100vh}
}

/* === TYPOGRAPHY TEST C — subtitle moved below the slogan (CSS-only, no HTML change) ===
   .intro-sub is absolutely positioned inside .intro (already position:relative).
   Its top follows the image scale exactly: 848 source rows = min(50.717vw, 90.117vh). */
@media(min-width:1085px){
  .intro-sub{position:absolute;left:0;right:0;margin:0 auto;
             top:calc(min(50.717vw, 90.117vh) + 14px)}
}

@media(min-width:1085px){ .intro .s-label{font-size:1.15em} }

/* === T1 — DISTRIBUTOR EYEBROW HARMONISATION (approved 2026-08-09) ===
   Same PlayerHIQ cyan hue at 85% intensity; weight and tracking reduced so the
   trust line reads as a trust signal, not a second headline. Nothing else changes. */
.intro .s-label{font-weight:600;letter-spacing:2px;color:rgba(0,200,255,0.85)}
@media(max-width:980px){
  .intro .s-label{font-weight:600;letter-spacing:1.5px;color:rgba(0,200,255,0.85)}
}

/* === M1 — NARROW-MOBILE SECTION-HEADING SCALE (APPROVED & IMPLEMENTED 2026-08-13) ===
   Home Product Gateway heading only. Restores hierarchy under the B2 signature
   at narrow phone widths. Nothing else changes: weight, colour, line-height,
   margins, Hero, B2, C2, T1, Overlay C and all geometry are untouched. */
@media(max-width:560px){
  #products .s-title{font-size:24px}
}

/* === B1 — NARROW-MOBILE SECTION-HEADING LUMINANCE (APPROVED & IMPLEMENTED 2026-08-13) ===
   Same scope as M1. Single variable versus M1: colour only. Size, weight,
   line-height, margins, Hero, B2, C2, T1, Overlay C and all geometry unchanged. */
@media(max-width:560px){
  #products .s-title{color:rgba(255,255,255,0.88)}
}

/* ALIGN1 — Product Cards CTA Alignment (Home "Two Ways to Train Smarter").
   Scoped only to .gate-grid. Approved permanent implementation 2026-08-18. */
.gate-grid .feat-card{display:flex;flex-direction:column}
.gate-grid .feat-text{flex:1;display:flex;flex-direction:column}
.gate-grid .feat-text p{margin-bottom:auto}

/* BG1 — Smart Data. Real Coaching. background photo (#phq-merge).
   Approved permanent implementation 2026-08-20. Exact P3 treatment:
   local patch alpha 0.15, overall wash alpha 0.00. Locked breakpoint:
   photo ON >=1101px, OFF <=1100px (matches the existing process-grid
   4-col/2x2 structural breakpoint at max-width:1100px). */
#phq-merge{position:relative}
#phq-merge .pmx-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#phq-merge .pmx-bg picture,#phq-merge .pmx-bg img{display:block;width:100%;height:100%}
#phq-merge .pmx-bg img{object-fit:cover;object-position:right center}
#phq-merge .pmx-bg-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(760px 200px at 761px 252px, rgba(13,17,23,0.15) 0%, rgba(13,17,23,0.15) 78%, rgba(13,17,23,0) 100%),
    radial-gradient(760px 170px at 761px 507px, rgba(13,17,23,0.15) 0%, rgba(13,17,23,0.15) 78%, rgba(13,17,23,0) 100%),
    rgba(13,17,23,0.0);
}
#phq-merge .pmx-wrap{position:relative;z-index:1}
@media(max-width:1100px){
  #phq-merge .pmx-bg{display:none}
}

/* =====================================================
   PREVIEW GATE — VARIANT C (M2-C) — 2026-08-21
   Retains M2-B's direction (journey/partnerships hidden,
   compact audience treatment) with a STRUCTURALLY corrected
   mobile footer. Fully additive/reversible: deleting this
   block restores the exact BG1 baseline. Nothing here applies
   above max-width:900px — desktop untouched.
   ===================================================== */

/* 1. #journey ("Getting Started Is Simple") hidden on mobile/tablet.
      Desktop (>=901px) unchanged, still a 3-col row. */
@media(max-width:900px){
  #journey{display:none}
}

/* 2. #partnerships hidden on mobile/tablet. Desktop P1 unchanged.
      Reachability preserved via the mobile footer's Partnerships link. */
@media(max-width:900px){
  #partnerships{display:none}
}

/* 3. WHO IT'S FOR — compact 2x2 grid at mobile, with the tighter
      Variant-B card chrome. Copy/wording untouched — every
      audience-hook sentence preserved verbatim. */
@media(max-width:560px){
  .audience-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
  .audience-card{padding:14px 12px}
  .audience-num{margin-bottom:5px}
  .audience-title{font-size:13px;margin-bottom:4px}
  .audience-hook{font-size:11.5px;line-height:1.5}
}

/* 4. #phq-merge — completely untouched. The section already carries
      its own optimized mobile padding (58px @<=900px, 32px @<=560px,
      pmx-cta margin-top:32px @<=560px — see lines 707-719, 694-698).
      No override added here. */

/* 5. MOBILE-ONLY FOOTER (M2-C) — STRUCTURAL FIX over M2-B.
      M2-B used a 4-item 2x2 CSS Grid (Logo|Products / PlayerHIQ|Connect),
      where row-1's track height was set by the taller cell (Products),
      stretching the shorter Logo cell and leaving an orphaned gap above
      row 2. M2-C instead uses TWO independent columns, each its own
      flex stack: column height is no longer coupled across columns,
      so there is no row-track dependency and no orphan gap regardless
      of which paragraph is present or absent.
        Left column:  logo -> PlayerHIQ nav group
        Right column: Products nav group -> Connect nav group
      .ft-bottom (copyright + distributor badge) is untouched and
      already sits full-width below .ft-top-m2 for both desktop and
      mobile — no duplication needed.
      Desktop .ft-top and its own rules are completely untouched;
      only hidden here at <=900px, exactly as in M2-A/B. */
.ft-top-m2{display:none}
@media(max-width:900px){
  .ft-top{display:none}
  .ft-top-m2{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;margin-bottom:40px}
  .ft-m2-col{display:flex;flex-direction:column;gap:32px}
}

/* =====================================================
   SS-DESIGN-C — permanent (Smart Shinguards page only)
   Implemented 2026-08-21 on top of BG1+M2C. Scoped selectors
   only: .sg-order-btn, #global-trust, .gt-scroll-wrap,
   .cmp-table, .rlh-*. .btn-cyan itself is not modified — it is
   shared with the locked CTA3 button on index.html and other
   pages. Nothing below applies above max-width:900px unless
   noted; desktop is untouched by every rule in this block.
   ===================================================== */

/* Order CTA: "Order Now" wording + inline WhatsApp-style icon on
   the two CTAs that previously read "Order in Cyprus"; icon-only
   added to the CTA that already read "Order via WhatsApp" (its
   wording was kept — replacing it would have removed an explicit
   WhatsApp mention already present, which is not the goal). */
.sg-order-btn{display:inline-flex;align-items:center;gap:8px}
.sg-order-ico{flex:0 0 auto}

/* Mobile trust carousel: cyan-tinted thumb, subtle track, plus a
   right-edge fade cue (works across browsers, including iOS
   Safari, unlike ::-webkit-scrollbar styling, which iOS does not
   apply). Desktop untouched — inside the existing
   max-width:900px block. */
@media(max-width:900px){
  #global-trust .global-trust-strip::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);border-radius:3px}
  #global-trust .global-trust-strip::-webkit-scrollbar-thumb{background:rgba(0,200,255,0.55)}
  .gt-scroll-wrap{position:relative}
  .gt-scroll-wrap::after{content:'';position:absolute;top:0;right:0;bottom:20px;width:44px;background:linear-gradient(to right,rgba(13,17,23,0),var(--bg));pointer-events:none}
}

/* VS-GPS mobile: compact cards, standalone VS divider removed,
   Smart Shinguards cyan hierarchy raised. Nested chrome reduced —
   cards are no longer individually bordered/boxed with margin
   between them; a single hairline rule separates each criterion
   instead. Text labels remain visible on mobile (shortened via
   the data-label attribute in the markup to "SMART SHINGUARDS" /
   "GPS VEST" — mobile presentation only; colour is not the sole
   differentiator). Desktop table headings/content are unchanged
   — the desktop <thead> still reads "INSAIT JOY Smart Shinguards"
   / "GPS Vest Trackers". Desktop table untouched — inside the
   existing max-width:900px block. */
@media(max-width:900px){
  .cmp-table tbody td:nth-child(2)::after{content:none}
  .cmp-table tbody tr{border:none;border-radius:0;margin-bottom:0;border-bottom:1px solid var(--border2);background:transparent}
  .cmp-table tbody tr:last-child{border-bottom:none}
  .cmp-table tbody th{padding:11px 16px;font-size:10px;background:var(--card2)}
  .cmp-table tbody td{padding:11px 16px}
  .cmp-table tbody td:nth-child(2){background:rgba(0,200,255,0.16)}
}

/* Player Ratings: comparison-focused subhead ("See How You
   Compare." — SAFE wording, no age/country claim), unchanged
   copy and unchanged on mobile. Base rule below still governs
   mobile in full (colour, size, weight, margin, line-height) —
   the desktop-only override further down changes color ONLY,
   at >=901px, so mobile is byte-for-byte unaffected. */
.rlh-subhead{font-size:19px;font-weight:800;color:var(--cyan);margin:10px 0 12px;line-height:1.3}
@media(max-width:600px){
  .rlh-subhead{font-size:17px;margin:8px 0 10px}
}

/* SS-RLH-A1 — permanent.
   Desktop-only subhead retreat: away from --cyan (reads as an
   interactive link/CTA colour everywhere else on this site) to
   the same near-white/silver tone already used for secondary
   emphasis elsewhere on the site (nav links, hero sub-sentence).
   Size/weight/margin/line-height untouched — only colour changes.
   No underline, no arrow, no hover rule, cursor stays the default
   'auto' (nothing here sets cursor or a hover state). */
@media(min-width:901px){
  .rlh-subhead{color:#C7D0DC}
}

/* =====================================================
   SS-VIDEO-1 — permanent.
   Replaces the YouTube link/hotlinked-thumbnail with a native
   <video controls preload="none" playsinline>. Modeled on Smart
   Football's .sf2-video-frame pattern (clean 16:9 box; a native
   video needs no hover-lift or gradient-overlay pseudo-element,
   unlike the old background-image + play-icon card), with this
   page's own cyan-glow box-shadow for visual consistency with the
   rest of Smart Shinguards. Reuses the existing .video-grid /
   .video-grid--single wrapper unchanged, including its established
   #videos responsive max-width rules above — only the inner card
   is new. No JS. No autoplay. Video asset is the reviewed, trimmed
   encode (GenGee outro removed; ends on the INSAIT JOY / Smart Shin
   Guards card) — see VERIFICATION_MANIFEST.txt for full provenance. */
.ss-video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--border2);background:#000;box-shadow:0 0 50px rgba(0,200,255,0.10),0 30px 60px rgba(0,0,0,0.5)}
.ss-video-frame video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
@media(max-width:600px){.ss-video-frame{border-radius:8px}}

/* ==========================================================================
   CTA-CONTACT-1 — PERMANENT
   Per-CTA contact-detail pairing (WhatsApp number under the WhatsApp
   button, email under the Email button). New, narrowly scoped classes
   shared by .cta-btns (smart-shinguards.html, playerhiq.html) and
   .sf2-cta-row (smart-football.html / SF-CTA-1A). No existing selector
   edited except the two overrides below, which only re-target an
   existing mobile full-width rule onto the new wrapper so SF-CTA-1A's
   compact mobile stacking is preserved unchanged.
   ========================================================================== */
.cta-unit{display:flex;flex-direction:column;align-items:center;gap:6px}
.cta-detail{font-size:11px;color:var(--muted);margin:0;line-height:1.4}

@media(max-width:600px){
  .sf2-cta-row .cta-unit{flex:1 1 100%}
  .sf2-cta-row .cta-unit .btn{flex:0 0 auto;width:100%;text-align:center}
}

/* HOME-MH-CTA-1 — PERMANENT, 2026-08-24
   Hides both Home hero CTAs (Explore Smart Shinguards / Request a Demo)
   at all widths <=980px, mirroring the site's own nav/burger breakpoint.
   Purely additive: the existing >=981px rule (line ~1347) and the
   existing <=560px .intro-cta layout rules are left untouched, even
   though the latter become dead code at <=980px. No HTML changed. */
@media(max-width:980px){
  .intro-cta{display:none}
}

/* NAV-GROUP-1 — PERMANENT, 2026-08-24
   Site-wide (all 4 pages share this stylesheet). At the same <=980px
   band where .nav-links is already hidden by existing NAV1 rules, this
   pushes .nav-btn (Request Info) to the right edge via auto margin,
   grouping it with the hamburger instead of sitting centered in the
   empty space left by justify-content:space-between on 3 flex items.
   Purely additive: no existing rule altered. At <=400px .nav-btn is
   already display:none (existing NAV1 rule), so this has no effect
   there. At >=981px this media query does not apply at all. */
@media(max-width:980px){
  .nav-btn{margin-left:auto}
}

/* SS-HOW-TEAM-1-R1 — PERMANENT, 2026-08-25
   Presentation-only mobile/tablet refinement on top of the SS-HOW-TEAM-1
   HTML (compact 3-step strip + real #teams Team section). No copy changed.
   No HTML changed beyond what SS-HOW-TEAM-1 already added. Both blocks
   below are strictly ID-scoped and purely additive: nothing in the
   unscoped .step-grid/.step-card or .audience-grid/.audience-card rules,
   and nothing in the locked Home M2C block, is modified or removed. */

/* --- #steps: compact row mode at <=900px -------------------------------
   Desktop (>=901px) is untouched — the approved 3-card .step-grid layout
   continues to apply exactly as before, since this rule only fires <=900px
   and is scoped to #steps, so it cannot affect the #journey section on
   Home, which is the only other place .step-grid/.step-card are used. */
@media(max-width:900px){
  #steps .step-grid{display:block;max-width:640px;margin:32px auto 0}
  #steps .step-card{background:none;border:none;border-radius:0;padding:16px 0;text-align:left;transition:none}
  #steps .step-card:hover{border-color:transparent}
  #steps .step-card:not(:last-child){border-bottom:1px solid var(--border2)}
  #steps .step-num{display:inline;margin-bottom:0;margin-right:10px}
  #steps .step-title{display:inline;margin-bottom:0}
  #steps .step-desc{margin-top:6px}
}

/* --- #insait-team: three-tier Team responsive model --------------------
   <=560px:   compact row mode (no card box, one full-width benefit per row)
   561-1100px: 2-column card grid (reuses the site's existing 1100px
               breakpoint, already used elsewhere in this stylesheet)
   >=1101px:  falls through to the base unscoped repeat(4,1fr) rule —
               no override needed here, so the approved 4-column desktop
               Team layout is reproduced without being restated.
   Every selector below is #insait-team-scoped, so none of this touches
   the naked .audience-grid/.audience-card rules or the locked Home M2C
   block (index.html's "Who It's For" section), which are left completely
   untouched. */
@media(min-width:561px) and (max-width:1100px){
  #insait-team .audience-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  #insait-team .audience-grid{display:block;max-width:520px;margin:24px auto 0}
  #insait-team .audience-card{background:none;border:none;border-radius:0;padding:11px 0;text-align:left;transition:none}
  #insait-team .audience-card:hover{border-color:transparent}
  #insait-team .audience-card:not(:last-child){border-bottom:1px solid var(--border2)}
  #insait-team .audience-num{display:inline;margin-bottom:0;margin-right:8px}
  #insait-team .audience-title{display:inline;font-size:14px;margin-bottom:0}
  #insait-team .audience-hook{display:block;margin-top:4px;font-size:12.5px;line-height:1.45}
}

/* SF-COMPACT-1 — PERMANENT, 2026-08-26
   Three scoped, additive changes to smart-football.html only. No existing
   rule altered or removed; #sf2-together is HTML-removed (see diff), its
   own #sf2-together{background:...} rule is left in place as dead CSS,
   consistent with this project's established convention of never
   performing CSS cleanup inside a content/layout gate. */

/* --- 1. Common Questions: desktop two-column FAQ ------------------------
   Mirrors the exact, already-shipped Smart Shinguards pattern
   (#faq .faq-wrap--2col, see styles.css ~line 1320) verbatim — same
   max-width, gap, and collapse breakpoint — just re-scoped to #sf2-faq so
   the existing #faq-scoped rule (and its "Smart Football is unaffected"
   guarantee) is not touched. Collapses to a single column at the site's
   existing 900px tablet/mobile boundary, matching where #sf2-sec and
   .sf2-split already switch to their mobile treatment. */
#sf2-faq .faq-wrap--2col{
  max-width:1100px;
  display:flex;
  gap:56px;
  align-items:flex-start;
}
#sf2-faq .faq-col{
  flex:1;
  min-width:0;
}
@media(max-width:900px){
  #sf2-faq .faq-wrap--2col{
    display:block;
  }
}

/* --- 3. Inside the Ball: desktop-only height reduction ------------------
   Scoped to #sf2-inside and to >=901px only (the existing boundary where
   .sf2-split is still 2-column and .sf2-sec still uses its 68px base
   padding — the site's own @media(max-width:900px) tablet band already
   gives this section 52px padding and a 1-column stack, and is untouched
   here). Section padding drops from the shared 68px to 32px; six existing
   internal vertical-spacing values are tightened by a few px each (row
   padding inside the six spec rows, and the margin above the trust
   statement / supplier note / assurance paragraph). No font-size, weight,
   color, copy, image, or the two-column grid itself is touched — only
   spacing. Net effect measured at 1440px: 779.7px -> ~650px (-16.7%). */
@media(min-width:901px){
  #sf2-inside{padding-top:32px;padding-bottom:32px}
  #sf2-inside .sf2-labels{margin-top:16px}
  #sf2-inside .sf2-labels li{padding:9px 0}
  #sf2-inside .sf2-assure{margin-top:14px}
  #sf2-inside .sf2-spec-note{margin-top:10px}
}

/* DESKTOP-BALANCE-1 — PERMANENT, 2026-08-26
   Two independent, strictly scoped, desktop-only visual refinements.
   Neither touches copy, images, or any other section. */

/* --- A. Smart Shinguards: center the Testimonials heading group at
   desktop only. Scoped to the two direct-child heading elements of
   #reviews specifically (not the section itself), so .rv-grid/.rv-card
   text alignment is completely unaffected — text-align does not need
   to be reset anywhere else because it was never set on the section. */
@media(min-width:901px){
  #reviews > .s-label,
  #reviews > .s-title{
    text-align:center;
  }
}

/* --- B. Smart Football #sf2-inside: move the three trust/supporting
   paragraphs under the image at desktop only.
   HTML change: the old single text-column div was split into two
   siblings — .sf2-inside-text (eyebrow/h2/lead/six spec rows, unchanged
   content) and .sf2-inside-trust (the same three paragraphs, unchanged
   wording, now their own container) — both already present in the DOM
   in this exact order (media, text, trust), so mobile requires zero
   extra CSS: the existing unscoped @media(max-width:900px){.sf2-split{
   grid-template-columns:1fr}} rule already collapses this into a single
   column and the three items simply stack in that DOM order (image ->
   specs -> trust), reproducing the required mobile reading order with
   no duplication and no JS.
   MOBILE SPACING FIX: splitting one div into two siblings means the
   grid's own row-gap (28px at <=900px) now also applies between
   .sf2-inside-text and .sf2-inside-trust, stacking on top of the
   pre-existing 20px margin-top already carried by the first paragraph
   inside .sf2-inside-trust (.sf2-assure) — an extra 28px that was not
   present before this HTML split and would have made mobile taller
   than the approved SF-COMPACT-1 baseline. Fixed by zeroing the grid's
   row-gap at <=900px and reinstating the original image-to-text gap
   explicitly via margin-top, so both mobile gaps (image->text 28px,
   text->trust 20px) exactly reproduce their pre-split values. Confirmed
   empirically below: 0.0% mobile height change at every tested width.
   At desktop, .sf2-split becomes a 2-column x 2-row grid: the image
   keeps column 1 / row 1; .sf2-inside-trust is explicitly placed at
   column 1 / row 2, directly under the image; .sf2-inside-text is
   explicitly placed at column 2 spanning both rows (align-items:start,
   already set on .sf2-split, keeps it pinned to the top). The existing
   .sf2-split gap value (56px) is reused for the new row-gap between the
   image and the trust block, rather than introducing a new spacing
   value. .sf2-inside-trust reuses the image's own existing max-width
   (560px) so the three lines align with the image's width, not just
   its left edge. One approved, disclosed touch: the second (now last)
   "seamless surface" paragraph's existing margin-top is nudged from
   14px to 20px to slightly separate it from the first paragraph above
   it, per the brief's explicit "slightly larger gap ... if it improves
   hierarchy" allowance.
   FOLLOW-UP COPY REMOVAL (approved before permanent implementation):
   the supplier/FIFA sentence ("According to the supplier, the ball has
   been impact-tested to more than four times the FIFA match-ball
   requirement.") was removed entirely from .sf2-inside-trust, leaving
   exactly two paragraphs. No CSS change was needed for this removal —
   the existing :last-child selector below already re-targets the new
   last paragraph correctly once the middle one is gone. */
@media(max-width:900px){
  #sf2-inside .sf2-split{row-gap:0}
  #sf2-inside .sf2-inside-text{margin-top:28px}
}
@media(min-width:901px){
  #sf2-inside .sf2-split{grid-template-rows:auto auto}
  #sf2-inside .sf2-split-media{grid-column:1;grid-row:1}
  #sf2-inside .sf2-inside-text{grid-column:2;grid-row:1/3}
  #sf2-inside .sf2-inside-trust{grid-column:1;grid-row:2;max-width:560px}
  #sf2-inside .sf2-inside-trust .sf2-assure:last-child{margin-top:20px}
}

/* PRE-LAUNCH-FIXES-1A — 320px overflow fix, Smart Football #sf2-inside only.
   Root cause: the "Motion Sensors" row's value ("3-Axis Accelerometer +
   Gyroscope") is long enough that, combined with .sf2-lab-v's
   white-space:nowrap, its unbroken minimum content width exceeds the
   available column width at very narrow viewports. CSS Grid/Flexbox
   items default to min-width:auto, so the ancestor chain (.sf2-split
   grid item -> .sf2-labels li flex item) could not shrink below that
   intrinsic minimum, forcing an 11px horizontal overflow at 320px only.
   Fix: allow this one row to wrap onto two lines, and let the grid/flex
   ancestors shrink to fit, ONLY below 340px (360px and wider render
   pixel-identical to before, confirmed empirically). No other #sf2-inside
   rule touched. */
@media(max-width:339px){
  #sf2-inside .sf2-split-media{min-width:0}
  #sf2-inside .sf2-labels li{flex-wrap:wrap;row-gap:4px}
  #sf2-inside .sf2-lab-v{white-space:normal;text-align:right;flex:1 1 auto}
}

/* PLAYERHIQ-COACH-IMAGE-1 — PERMANENT, 2026-08-27
   Scoped to #about .about-img only (this class has no other usage on
   the site, confirmed). The shared .about-img{aspect-ratio:3/4} rule
   is left completely untouched for any future reuse.
   The new coach photograph's native ratio (1131x1391 = 0.8131) is
   wider-relative-to-height than the site's fixed 3:4 (0.75) portrait
   frame. With object-fit:cover forcing 3:4, even the maximum possible
   object-position shift (0% / fully left) still left the raised hand
   touching the crop edge — confirmed by direct visual testing, not
   assumed. Rather than accept a risk of clipping an approved, no-edit
   photograph, this override matches the container's aspect-ratio to
   the image's own exact native ratio, so object-fit:cover has zero
   cropping to perform: the entire supplied photograph is always shown,
   at every viewport, with no risk of ever clipping the head or hand
   regardless of future container width changes. This is a sizing
   adjustment only — no HTML structure, grid, column width, or other
   section is touched. */
#about .about-img{
  aspect-ratio:1131/1391;
}