@import url("/css/fonts.css");

/* ============ goexch777.pro — SCORECARD SLAT ============ */
:root{
  --ground:#1A1024;
  --ground-2:#20142C;
  --chit:#251634;
  --chit-2:#2C1B3E;
  --edge:#3A2A4C;
  --edge-soft:rgba(255,255,255,.08);
  --ink:#F3EEF8;
  --ink-dim:#B3A3C2;
  --amber:#F8C128;
  --amber-deep:#C9922A;
  --amber-ink:#2A1A00;
  --wa:#25D366;
  --wa-ink:#04250F;
  --live:#4ADE80;
  --dead:#F87171;
  --r:14px;
  --r-sm:9px;
  --wrap:1120px;
  --head:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Asap',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- overflow guards (html/body/hdr/main) ---- */
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{overflow-x:clip;max-width:100%}
main{max-width:100%;overflow-x:clip}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.72 var(--body);
  background-image:
    radial-gradient(900px 480px at 88% -8%,rgba(248,193,40,.10),transparent 62%),
    radial-gradient(760px 420px at -6% 12%,rgba(139,92,246,.09),transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto}
a{color:var(--amber);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.16;letter-spacing:-.012em;margin:0 0 .5em}
h1{font-size:clamp(1.72rem,1.15rem + 2.5vw,2.72rem)}
h2{font-size:clamp(1.32rem,1.05rem + 1.2vw,1.86rem);margin-top:1.9em}
h3{font-size:1.11rem;margin-top:1.6em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:.32em 0}
strong{color:#fff;font-weight:600}

.crease{width:min(var(--wrap),100% - 34px);margin-inline:auto}

.skip-link{position:absolute;left:-9999px;top:0;z-index:99}
.skip-link:focus{left:8px;top:8px;background:var(--amber);color:var(--amber-ink);padding:9px 15px;border-radius:8px;font-weight:600}

:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}

/* ---------- masthead: thin status slat + logo row ---------- */
.hdr{position:sticky;top:0;z-index:60;width:100%;max-width:100vw;
  background:rgba(26,16,36,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge)}
@supports not (backdrop-filter:blur(2px)){.hdr{background:#1A1024}}

.slat{background:linear-gradient(90deg,#2A1A00,#4A3208 55%,#2A1A00);
  border-bottom:1px solid rgba(248,193,40,.28);font-size:.775rem;letter-spacing:.02em}
.slat p{margin:0;padding:5px 0;color:#F6DFA6;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slat b{color:var(--amber);font-weight:600}

.hdr-row{display:flex;align-items:center;gap:18px;padding:11px 0;min-height:60px}
.crest{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}
.crest img{height:38px;width:auto;display:block}
.hnav{display:none;margin-left:auto;gap:22px;font-family:var(--head);font-weight:600;font-size:.95rem}
.hnav a{color:var(--ink);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
.hnav a:hover{color:var(--amber)}
.hnav a[aria-current="page"]{color:var(--amber);border-bottom-color:var(--amber)}
.hcta{margin-left:auto}
@media(min-width:930px){.hnav{display:flex}.hcta{margin-left:0}}

/* ---------- bottom dock nav (mobile, zero JS) ---------- */
.nav-dock{position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(32,20,44,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--edge);padding-bottom:env(safe-area-inset-bottom)}
.nav-dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;padding:6px 4px;color:var(--ink-dim);text-decoration:none;
  font:600 .70rem/1.15 var(--head);text-align:center}
.nav-dock a[aria-current="page"]{color:var(--amber)}
.nav-dock svg{width:19px;height:19px;fill:currentColor}
@media(min-width:930px){.nav-dock{display:none}}
body{padding-bottom:64px}
@media(min-width:930px){body{padding-bottom:0}}

/* ---------- buttons ---------- */
.gopill,.gopill-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;border-radius:999px;
  font:600 1rem/1 var(--head);text-decoration:none;letter-spacing:.01em;
  transition:transform .16s ease,box-shadow .16s ease}
.gopill{background:var(--amber)!important;color:var(--amber-ink)!important;
  box-shadow:0 8px 22px -12px rgba(248,193,40,.9)}
.gopill-wa{background:var(--wa)!important;color:var(--wa-ink)!important;
  box-shadow:0 8px 22px -12px rgba(37,211,102,.9)}
.gopill:hover,.gopill-wa:hover{transform:translateY(-2px)}
.gopill svg,.gopill-wa svg{width:18px;height:18px;fill:currentColor}

/* ---------- chit (card) ---------- */
.chit{background:var(--chit);border:1px solid var(--edge);border-radius:var(--r);
  padding:22px;position:relative;overflow:hidden}
.chit::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--amber),transparent 72%)}

/* ---------- innings (section with stump marker) ---------- */
.innings{position:relative;padding-left:19px;margin:34px 0}
.innings::before{content:"";position:absolute;left:0;top:.42em;bottom:.3em;width:3px;
  border-radius:2px;background:linear-gradient(180deg,var(--amber),rgba(248,193,40,.06))}
.innings>h2:first-child{margin-top:0}

/* quotable answer block (AEO) */
.pitchline{background:var(--ground-2);border:1px solid var(--edge);border-left:4px solid var(--amber);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:15px 18px;margin:0 0 1.2em;color:#FBF6EE}
.pitchline p:last-child{margin-bottom:0}

/* breadcrumb */
.pathline{font-size:.85rem;color:var(--ink-dim);margin:22px 0 12px}
.pathline a{color:var(--ink-dim)}
.pathline span{opacity:.55;margin:0 6px}

/* ---------- figures ---------- */
.shot{margin:26px auto;max-width:820px;width:100%}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--edge)}
.shot figcaption{margin-top:9px;font-size:.85rem;color:var(--ink-dim);text-align:center}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--edge);border-radius:var(--r-sm)}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:.94rem}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--edge)}
th{background:var(--ground-2);font-family:var(--head);font-weight:600;color:#fff;white-space:nowrap}
tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.asked{border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--chit);margin:0 0 10px}
.asked summary{cursor:pointer;padding:14px 17px;font-family:var(--head);font-weight:600;
  color:#fff;list-style:none;display:flex;justify-content:space-between;gap:14px;min-height:48px;align-items:center}
.asked summary::-webkit-details-marker{display:none}
.asked summary::after{content:"+";color:var(--amber);font-size:1.35rem;line-height:1;flex:0 0 auto}
.asked[open] summary::after{content:"\2013"}
.asked div{padding:0 17px 15px;color:var(--ink-dim)}
.asked div p:last-child{margin-bottom:0}

/* ---------- SEO box (.gully) — shape varies per page ---------- */
.gully{max-height:290px;overflow-y:auto;background:var(--ground-2);
  border:1px solid var(--edge);border-radius:var(--r);padding:20px 22px;margin:44px 0 26px;
  font-size:.93rem;color:var(--ink-dim)}
.gully h2{margin-top:0;font-size:1.16rem;color:#fff}
.gully h3{font-size:.99rem;margin-top:1.15em;color:#fff}
.gully p:last-child,.gully ul:last-child,.gully ol:last-child,.gully dl:last-child{margin-bottom:0}
.gully ul,.gully ol{padding-left:1.15em}
.gully dl{margin:0}
.gully dt{font-family:var(--head);font-weight:600;color:#fff;margin-top:.7em}
.gully dd{margin:.15em 0 0}
.gully table{min-width:340px;font-size:.9rem}
.gully .two{display:grid;gap:14px}
@media(min-width:640px){.gully .two{grid-template-columns:1fr 1fr}}
.gully .qline{font-weight:600;color:#fff;font-family:var(--head)}

/* ---------- keyword chips (.wicket) ---------- */
.wicket{margin:26px 0 40px}
.wicket h2{font-size:1.04rem;margin:0 0 12px}
.wicket ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.wicket li{margin:0}
.wicket span{display:inline-block;padding:9px 14px;min-height:38px;line-height:1.35;
  border:1px solid var(--edge);border-radius:999px;background:var(--chit);
  font-size:.845rem;color:var(--ink-dim)}

/* ---------- footer ---------- */
.pavilion{border-top:1px solid var(--edge);background:var(--ground-2);margin-top:46px;padding:34px 0 30px}
.pav-grid{display:grid;gap:26px}
@media(min-width:760px){.pav-grid{grid-template-columns:1.3fr 1fr 1fr}}
.pavilion h3{font-size:1rem;margin:0 0 11px;color:#fff}
.pavilion ul{list-style:none;padding:0;margin:0}
.pavilion li{margin:0}
.pavilion li a{display:inline-block;padding:9px 0;min-height:40px;color:var(--ink-dim);text-decoration:none;font-size:.92rem}
.pavilion li a:hover{color:var(--amber)}
.pav-logo img{height:44px;width:auto}
.pav-note{font-size:.86rem;color:var(--ink-dim);max-width:42ch;margin:12px 0 0}
.orbits{display:flex;flex-wrap:wrap;gap:11px;margin:15px 0 0}
.orbits a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--edge);border-radius:11px;background:var(--chit);color:var(--ink-dim)}
.orbits a:hover{color:var(--amber);border-color:var(--amber)}
.orbits svg{width:19px;height:19px;fill:currentColor}
.tpilot{display:inline-flex;align-items:center;gap:8px;margin:15px 0 0;min-height:44px;
  padding:9px 15px;border:1px solid var(--edge);border-radius:11px;background:var(--chit);
  color:var(--ink);text-decoration:none;font-size:.88rem}
.tpilot svg{width:17px;height:17px;fill:#00B67A;flex:0 0 auto}
.tpilot:hover{border-color:#00B67A}
.pav-base{border-top:1px solid var(--edge);margin-top:26px;padding-top:18px;
  font-size:.84rem;color:var(--ink-dim);display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between}
.adult{border:1px solid var(--amber-deep);color:var(--amber);border-radius:999px;padding:2px 10px;font-weight:600;font-size:.8rem}

/* ---------- WhatsApp float ---------- */
.wadot{position:fixed;right:16px;bottom:76px;z-index:75;width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.75);animation:beat 2.4s ease-in-out infinite}
.wadot svg{width:33px;height:33px;fill:#fff}
@media(min-width:930px){.wadot{bottom:22px}}
@keyframes beat{0%,100%{box-shadow:0 10px 26px -8px rgba(37,211,102,.75)}
  50%{box-shadow:0 10px 30px -4px rgba(37,211,102,.95)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}