/* Shared shell for the topic pages (/pickup-football, /team-balance, /pitches
   and their /he twins). Same tokens, header and footer as index.html and
   legal.css, so these read as part of the site rather than as landing pages
   bolted on for search.

   Everything positional uses logical properties, because the /he pages are
   dir="rtl" and share this file byte for byte. */

@font-face{font-family:'KrooDisplay';src:url('/fonts/BebasNeue_400Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'KrooBody';src:url('/fonts/DMSans_400Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'KrooBody';src:url('/fonts/DMSans_500Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'KrooBody';src:url('/fonts/DMSans_700Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'KrooBody';src:url('/fonts/DMSans_800ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;}
/* Latin faces first so font matching stays per-character: only Hebrew reaches
   Assistant, and Latin keeps DM Sans / Bebas. */
@font-face{font-family:'KrooHe';src:url('/fonts/Assistant_he.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;}
@font-face{font-family:'KrooHeDisplay';src:url('/fonts/Assistant_he.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}

:root{
  color-scheme: dark;
  --bg0:#08090E; --bg1:#0F1018; --bg2:#14151F; --bg3:#1A1B27;
  --t1:#FFFFFF; --t2:rgba(255,255,255,.78); --t3:rgba(255,255,255,.55); --t4:rgba(255,255,255,.34);
  --accent:#BAFF35; --on-accent:#000000; --accent-bg:rgba(186,255,53,.10);
  --blue:#4B8EFF; --red:#FF4040; --orange:#FF8C35;
  --border:rgba(255,255,255,.08); --border-light:rgba(255,255,255,.14);
  --font-display:'KrooDisplay','KrooHeDisplay','Bebas Neue',system-ui,sans-serif;
  --font-body:'KrooBody','KrooHe','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:9999px;
  --container:860px;
}

*,*::before,*::after{box-sizing:border-box;}
body{margin:0; background:var(--bg0); color:var(--t1); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;}
a{color:inherit;}
img{max-width:100%;}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}}

.container{max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,32px);}
.skip-link{position:absolute; inset-inline-start:12px; top:-60px; z-index:100; background:var(--accent); color:var(--on-accent); font-weight:800; padding:10px 16px; border-radius:var(--radius-md); transition:top .2s ease;}
.skip-link:focus{top:12px;}
.k-mark{color:var(--accent); flex-shrink:0;}

/* ============ Header ============ */
.site-header{position:sticky; top:0; z-index:50; background:rgba(8,9,14,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.header-inner{max-width:1180px; margin-inline:auto; padding:14px clamp(20px,5vw,32px); display:flex; align-items:center; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-inline-end:auto;}
.brand .wordmark{font-family:var(--font-display); font-size:22px; letter-spacing:2px; line-height:1;}
.header-actions{display:flex; align-items:center; gap:12px;}
.lang-toggle{text-decoration:none; color:var(--t2); font-size:14px; font-weight:700;}
.lang-toggle:hover{color:var(--accent);}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 22px; border-radius:var(--radius-full); font-weight:800; font-size:14px; text-decoration:none; border:1.5px solid var(--border-light); color:var(--t1); transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
.btn-primary:hover{background:#c8ff5c;}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}

/* ============ Breadcrumb ============ */
.crumbs{padding-block:20px 0; color:var(--t4); font-size:13.5px;}
.crumbs a{color:var(--t3); text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{margin-inline:8px;}

/* ============ Hero ============ */
.topic-hero{padding-block:34px 12px;}
.eyebrow{font-family:var(--font-body); font-weight:800; font-size:13px; letter-spacing:3.5px; text-transform:uppercase; color:var(--accent);}
.topic-hero h1{font-family:var(--font-display); font-size:clamp(34px,5.6vw,58px); text-transform:uppercase; letter-spacing:-.01em; line-height:1.04; margin:12px 0 0;}
.topic-hero .lede{color:var(--t2); font-size:19px; margin-top:16px; max-width:60ch;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px;}
.hero-cta .note{color:var(--t3); font-size:14px;}

/* ============ Prose ============ */
main.topic{padding-block:8px 64px;}
main.topic section{padding-block:30px; border-top:1px solid var(--border);}
main.topic section:first-of-type{border-top:none;}
main.topic h2{font-family:var(--font-display); font-size:clamp(24px,3.4vw,34px); text-transform:uppercase; letter-spacing:.2px; margin:0 0 14px;}
main.topic h3{font-size:17px; font-weight:800; margin:22px 0 6px; color:var(--t1);}
main.topic p{color:var(--t2); margin:0 0 13px; max-width:70ch;}
main.topic ul,main.topic ol{color:var(--t2); margin:0 0 14px; padding-inline-start:22px; max-width:68ch;}
main.topic li{margin-bottom:7px;}
main.topic strong{color:var(--t1);}
main.topic a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}

/* ============ Step cards ============ */
.steps{list-style:none; padding:0; margin:18px 0 6px; display:grid; gap:12px; max-width:100%;}
.step{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; display:flex; gap:14px; align-items:flex-start;}
.step .n{flex-shrink:0; width:30px; height:30px; border-radius:var(--radius-full); background:var(--accent-bg); color:var(--accent); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center;}
.step h3{margin:0 0 4px; font-size:16px;}
.step p{margin:0; font-size:15.5px;}

/* ============ Comparison table ============ */
.cmp{width:100%; border-collapse:collapse; margin:16px 0 8px; font-size:15px;}
.cmp th,.cmp td{text-align:start; padding:11px 12px; border-bottom:1px solid var(--border); color:var(--t2); vertical-align:top;}
.cmp th{color:var(--t1); font-weight:800; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase;}
.cmp tr:last-child td{border-bottom:none;}

/* ============ Callout ============ */
.callout{background:var(--bg2); border:1px solid var(--border-light); border-radius:var(--radius-xl); padding:20px 22px; margin:20px 0 6px;}
.callout h3{margin-top:0;}
.callout p:last-child{margin-bottom:0;}

/* ============ FAQ ============ */
.faq-list{margin-top:6px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 4px; font-weight:700; font-size:17px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{flex-shrink:0; transition:transform .2s ease; color:var(--t3);}
.faq-item[open] summary .chev{transform:rotate(180deg); color:var(--accent);}
.faq-item .faq-answer{padding:0 4px 19px; color:var(--t2); font-size:16px; max-width:66ch;}
.faq-item .faq-answer p{margin:0;}

/* ============ Closing CTA ============ */
.cta-band{background:var(--bg1); border-top:1px solid var(--border); padding-block:46px; text-align:center;}
.cta-band h2{font-family:var(--font-display); font-size:clamp(28px,4.4vw,44px); text-transform:uppercase; margin:0 0 12px;}
.cta-band p{color:var(--t2); max-width:52ch; margin:0 auto 22px;}
.cta-band .store-row{display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;}
.store-badge img{height:46px; width:auto; display:block;}
.store-badge.badge-play img{height:68px;}
.store-badge.badge-play{margin-inline-start:-11px;}
.store-badge.is-pending{filter:grayscale(1); opacity:.45; cursor:default;}
.cta-band .store-note{color:var(--t3); font-size:14.5px; margin-top:14px;}

/* ============ Related links ============ */
.related{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:16px;}
.related a{display:block; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; text-decoration:none; transition:border-color .2s ease, transform .2s ease;}
.related a:hover{border-color:var(--accent); transform:translateY(-2px);}
.related .t{display:block; font-weight:800; font-size:16px; color:var(--t1);}
.related .d{display:block; color:var(--t3); font-size:14px; margin-top:4px; line-height:1.5;}

/* ============ Footer ============ */
footer.site-footer{padding-block:36px; border-top:1px solid var(--border);}
footer.site-footer .container{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center;}
footer.site-footer .foot-links{display:flex; gap:22px; flex-wrap:wrap;}
footer.site-footer a{text-decoration:none; color:var(--t2); font-size:13.5px; font-weight:600;}
footer.site-footer a:hover{color:var(--accent);}
footer.site-footer .copy{color:var(--t4); font-size:12.5px;}

/* The credit renders at its true 4.23 aspect ratio; the markup carries
   width=101 height=24 to match, so the box never disagrees with the artwork. */
.built-by{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--t3); font-size:13.5px; white-space:nowrap; opacity:1; transition:opacity .2s ease;}
.built-by:hover,.built-by:focus-visible{color:var(--t1);}
.built-by img{height:24px; width:auto; display:block;}