/* FFMatrix shared styles (index, tools, contact, privacy, terms).
   Brand: Concept 1. Green #008543, navy #010028, Atyp Text Semibold for headings and UI,
   IBM Plex Sans for body copy and every data numeral.
   Hand-written, no framework. Flat colour fields, hairline rules, small radii, no soft shadows,
   no glows and no decorative gradients (the pitch stripes are hard-edged, like mown grass).

   Theming: every colour is a semantic token defined once with light-dark(). The page follows the OS setting
   by itself (no script needed); the header toggle sets data-theme="light|dark" to override it. Light mode is
   a warm paper canvas with white surfaces; dark mode is layered blue-greys (canvas, surface, raised) with the
   brand navy kept for the strip and footer, so depth comes from lightness, not shadow. */

@font-face{ font-family:'Atyp Text'; src:url(fonts/AtypText-Semibold.woff) format('woff'); font-weight:600; font-style:normal; font-display:swap; }

:root{
  color-scheme:light dark;
  --green:#008543; --green-deep:#00713a; --navy:#010028;
  /* surfaces */
  --bg:light-dark(#f6f5f0,#0b0e1f);        /* page canvas */
  --card:light-dark(#ffffff,#131730);      /* raised surface: cards, fields, panels */
  --bg-2:light-dark(#ebeae2,#1a1f3d);      /* hover rows, bench strip, muted wells */
  --bg-3:light-dark(#dddbd0,#252b4d);      /* bar tracks */
  /* text */
  --ink:light-dark(#010028,#eaecf5);
  --ink-2:light-dark(#383a55,#b8bdd3);
  --ink-3:light-dark(#5b5d76,#979dba);
  /* lines. --ctl is for the edge of a control, which needs 3:1 against its surface */
  --line:light-dark(#dad8cd,#232847);
  --line-2:light-dark(#c4c1b3,#363c62);
  --ctl:light-dark(#767989,#7580ab);
  --bar:light-dark(rgba(1,0,40,.09),rgba(255,255,255,.12));
  /* accents */
  --link:light-dark(#00733a,#5ccb95);
  --focus:light-dark(#008543,#5ccb95);
  --data:light-dark(#008543,#4bd08a);
  --tint:light-dark(#e1f2e8,#0a2c22); --tint-ink:light-dark(#005f30,#7fe0ae);
  --amber:light-dark(#8a4b00,#f2bb5a); --amber-bg:light-dark(#fff3d9,#2b2108); --amber-line:light-dark(#e6c27a,#6b5217);
  --danger:light-dark(#b3261e,#ff9b94); --on-danger:light-dark(#ffffff,#010028);   /* text on a --danger fill */
  --turf:light-dark(#008543,#00532b); --turf-2:light-dark(#007b3f,#004e28);
  --logo-accent:light-dark(#008543,#ffffff); --logo-ink:light-dark(#010028,#ffffff);
  /* notify band: brand green in light, a deep green surface in dark so it does not glare */
  --band-bg:light-dark(#008543,#0a4630);
  --band-mark:light-dark(rgba(1,0,40,.16),rgba(255,255,255,.07));   /* the tone-on-tone football behind the notify band */
  --band-fg:light-dark(#ffffff,#f2fbf6);
  --field-bg:light-dark(#ffffff,#0b0e1f); --field-fg:light-dark(#010028,#eaecf5);
  --field-line:light-dark(#ffffff,rgba(255,255,255,.5)); --field-ph:light-dark(#5b5d76,#a7adc6);
  --band-btn-bg:light-dark(#010028,#f2fbf6); --band-btn-fg:light-dark(#ffffff,#010028); --band-btn-hover:light-dark(#0d0d3d,#ffffff);
  --alert:light-dark(#010028,#ffffff);
  /* hero: on the paper canvas in light; a deep pitch-green field in dark, so the top of the page is not the same blue as the rest */
  --hero-bg:light-dark(var(--bg),#0a4630);
  --hero-word:light-dark(#008543,#8be8b8);
  --hero-btn-bg:light-dark(#008543,#f2fbf6); --hero-btn-fg:light-dark(#ffffff,#010028); --hero-btn-hover:light-dark(#00713a,#ffffff);
  --display:'Atyp Text','IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(1rem,4vw,2rem);
  --section:clamp(3.5rem,8vw,7rem);
}
:root[data-theme="light"]{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }

/* Page-to-page navigation cross-fades natively (no script); the header stays put (view-transition-name on .site-head,
   below). Skipped for reduced motion. */
@media (prefers-reduced-motion:no-preference){ @view-transition{ navigation:auto; } }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.18s; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; font-synthesis:none; scroll-padding-top:5rem; background:var(--bg); }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.6 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
svg{ display:block; }
a{ color:inherit; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
p{ text-wrap:pretty; }
::selection{ background:var(--green); color:#fff; }
main:focus{ outline:none; }
/* Always hide: [hidden] must beat any display rule a component sets, so !important is deliberate here */
[hidden]{ display:none !important; }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:76rem; margin-inline:auto; padding-inline:var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip{ position:absolute; left:.5rem; top:-4rem; z-index:200; padding:.75rem 1rem; background:var(--green); color:#fff; font:600 .9375rem/1 var(--display); border-radius:3px; text-decoration:none; }
.skip:focus{ top:.5rem; outline-color:#fff; }

/* ---- Logo: one inline sprite per page, colours come from --logo-accent / --logo-ink ---- */
.logo{ display:block; fill:var(--logo-accent); color:var(--logo-ink); }

/* ---- Buttons and links ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.65em; min-height:3rem; padding:0 1.25rem; border:1.5px solid transparent; border-radius:3px; font:600 1rem/1 var(--display); letter-spacing:-.005em; text-decoration:none; cursor:pointer; transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--ease-out); }
.btn:active{ transform:scale(.97); }
.btn:disabled{ cursor:progress; opacity:.75; }
.btn-solid{ background:var(--green); color:#fff; }
.btn-solid:hover{ background:var(--green-deep); }
.btn-navy{ background:var(--band-btn-bg); color:var(--band-btn-fg); }
.btn-navy:hover{ background:var(--band-btn-hover); }
.btn-line{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-line:hover{ background:var(--ink); color:var(--bg); }
.arr{ display:inline-block; transition:transform .18s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ a:hover > .arr, button:hover > .arr{ transform:translateX(3px); } button:hover > .arr-back{ transform:translateX(-3px); } }
.tlink{ color:var(--link); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; transition:text-decoration-thickness .12s ease; }
.tlink:hover{ text-decoration-thickness:2px; }
.linkbtn{ padding:0; border:0; background:none; color:var(--link); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.linkbtn:hover{ text-decoration-thickness:2px; }

/* ---- Data-state labels (real output / sample data / model version): flat, outlined ---- */
.tag{ display:inline-block; padding:.25rem .5rem; border:1px solid currentColor; border-radius:2px; font:400 .75rem/1 var(--body); white-space:nowrap; }
.tag-sample{ color:var(--amber); background:var(--amber-bg); border-color:var(--amber-line); }
.tag-real{ color:var(--tint-ink); background:var(--tint); border-color:transparent; font-weight:600; }
.tag-mono{ color:var(--ink-3); border-color:var(--line-2); }

/* Shared data atoms (club dot, predicted-gain pill, gain bar) */
.dot{ display:inline-block; flex-shrink:0; width:.625rem; height:.625rem; margin-right:.5625rem; border-radius:50%; background:var(--club); outline:1px solid var(--ink-3); outline-offset:1px; vertical-align:-1px; }
.gain{ display:inline-block; padding:.125rem .5rem; border-radius:2px; font:600 .8125rem/1.3 var(--body); font-variant-numeric:tabular-nums; color:var(--tint-ink); background:var(--tint); }
.gbar{ display:inline-block; width:4rem; height:.375rem; border-radius:1px; background:var(--bg-3); overflow:hidden; }
.gbar i{ display:block; height:100%; background:var(--data); }
.arrow{ color:var(--ink-3); margin:0 .35em; }

/* ---- Under-construction strip ---- */
.notice{ background:var(--navy); color:#fff; font-size:.875rem; line-height:1.4; }
.notice .wrap{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.125rem 1.5rem; padding-block:.625rem; }
.notice a{ color:#fff; font-weight:600; text-underline-offset:.2em; }
.notice :focus-visible{ outline-color:#fff; }

/* ---- Header: generated by fetcher/site-nav.mjs. One link per job (my team, players, fixtures, prices, gameweek) stays
   visible at every width (on phones they drop to their own row rather than hiding behind a menu); search and
   "All tools" sit at the right. ---- */
.site-head{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); view-transition-name:site-head; }
.head-row{ display:flex; flex-wrap:wrap; align-items:center; column-gap:1rem; min-height:3.75rem; }
.brand{ display:block; flex-shrink:0; line-height:0; padding-block:.25rem; }
.brand .logo{ width:8.25rem; height:auto; }
.head-nav{ margin-left:1.5rem; }
.head-nav ul{ display:flex; align-items:center; gap:1.5rem; }
.hn-short{ display:none; }
.head-nav a{ display:block; padding:1.25rem 0 1.125rem; border-bottom:2px solid transparent; color:var(--ink-2); font:600 .9375rem/1 var(--display); text-decoration:none; white-space:nowrap; transition:color .15s ease, border-color .15s ease; }
.head-nav a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.head-nav a[aria-current]{ color:var(--ink); border-bottom-color:var(--green); }
.head-tools{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.head-btn{ display:inline-flex; align-items:center; gap:.5rem; height:2.5rem; padding:0 .75rem; flex-shrink:0; border:1px solid var(--ctl); border-radius:3px; background:transparent; color:var(--ink); font:600 .9375rem/1 var(--display); text-decoration:none; white-space:nowrap; transition:background-color .15s ease, border-color .15s ease, transform .16s var(--ease-out); }
.head-btn:active{ transform:scale(.96); }
.head-btn svg{ width:1.125rem; height:1.125rem; flex-shrink:0; }
@media (hover:hover) and (pointer:fine){ .head-btn:hover{ background:var(--bg-2); border-color:var(--ink-2); } }
/* Search looks like a field on wide screens, so it reads as "type here" */
.head-search{ width:12rem; color:var(--ink-3); font:400 .9375rem/1 var(--body); }
.hb-kbd{ margin-left:auto; padding:.1875rem .4375rem; border:1px solid var(--line-2); border-radius:2px; font:600 .75rem/1 var(--body); color:var(--ink-3); }
@media (hover:none), (pointer:coarse){ .hb-kbd{ display:none; } }
@media (max-width:72rem){ .head-search{ width:auto; } .head-search .hb-kbd{ display:none; } .head-nav{ margin-left:1rem; } .head-nav ul{ gap:1.125rem; } }
/* Phones and small tablets: logo + tools on top, the four destinations as an even row underneath */
@media (max-width:60rem){
  .head-row{ min-height:3.25rem; }
  .head-nav{ order:3; flex:1 1 100%; margin:0 calc(var(--gutter) * -1); padding-inline:calc(var(--gutter) - .5rem); border-top:1px solid var(--line); }
  .head-nav ul{ gap:0; }
  .head-nav li{ flex:1 1 0; }
  .head-nav a{ padding:.8125rem .5rem .75rem; text-align:center; }
  .head-btn{ width:2.5rem; padding:0; justify-content:center; }
  .hb-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  html{ scroll-padding-top:7.5rem; }
}
@media (max-width:30rem){ .hn-long{ display:none; } .hn-short{ display:inline; } .head-nav a{ padding-inline:.125rem; font-size:.8125rem; } }
@media (max-width:24rem){ .head-row{ column-gap:.5rem; } .head-nav li{ flex:1 1 auto; } .brand .logo{ width:6.25rem; } .head-tools{ gap:.3125rem; } .head-btn, .theme-toggle{ width:2.25rem; height:2.25rem; } .head-nav a{ font-size:.8125rem; padding-inline:.125rem; } }

/* "All tools": every tool with an icon and a one-line reason to open it, grouped by job. A native popover, so it opens,
   closes on Esc or a click outside and returns focus without any script. A sheet from the right on phones; on wider
   screens it drops down from the top as a full-width panel with the groups side by side. */
.site-menu{ position:fixed; inset:0 0 0 auto; width:min(24rem,100%); height:100dvh; max-height:none; margin:0; padding:0 1.5rem 2rem; overflow-y:auto; overscroll-behavior:contain; border:0; border-left:1px solid var(--line-2); background:var(--bg); color:var(--ink); }
.site-menu::backdrop{ background:rgba(1,0,40,.4); }
@media (prefers-reduced-motion:no-preference){
  .site-menu{ transition:transform .28s var(--ease-out), overlay .28s allow-discrete, display .28s allow-discrete; transform:translateX(100%); }
  .site-menu:popover-open{ transform:none; }
  @starting-style{ .site-menu:popover-open{ transform:translateX(100%); } }
  .site-menu::backdrop{ transition:opacity .28s ease, overlay .28s allow-discrete, display .28s allow-discrete; opacity:0; }
  .site-menu:popover-open::backdrop{ opacity:1; }
  @starting-style{ .site-menu:popover-open::backdrop{ opacity:0; } }
}
.sm-top{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; min-height:3.75rem; background:var(--bg); }
.sm-top .head-btn{ width:2.5rem; padding:0; justify-content:center; }
.sm-title{ display:flex; flex-direction:column; gap:.3125rem; font:600 1.125rem/1 var(--display); letter-spacing:-.01em; }
.sm-search{ display:flex; align-items:center; gap:.625rem; min-height:3rem; padding:0 .875rem; border:1px solid var(--ctl); border-radius:3px; background:var(--card); color:var(--ink-3); text-decoration:none; }
.sm-search svg{ width:1.125rem; height:1.125rem; flex-shrink:0; }
.sm-sub{ font:400 .8125rem/1.2 var(--body); letter-spacing:0; color:var(--ink-3); }
.sm-group{ margin-top:1.75rem; }
.sm-h{ padding-bottom:.5rem; border-bottom:2px solid var(--ink); font:600 .8125rem/1.2 var(--body); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); }
.sm-group a{ display:block; padding:.6875rem 0; border-bottom:1px solid var(--line); color:var(--ink); font:600 1rem/1.3 var(--display); text-decoration:none; }
.sm-group a:hover{ color:var(--link); }
.sm-group a[aria-current]{ color:var(--link); box-shadow:inset 3px 0 var(--green); padding-left:.75rem; }
.sm-group .sm-tool{ display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 0; }
.sm-ic{ display:grid; place-items:center; flex-shrink:0; width:2rem; height:2rem; border-radius:3px; background:var(--tint); color:var(--tint-ink); }
.sm-ic svg{ width:1.125rem; height:1.125rem; }
.sm-tx{ display:grid; gap:.1875rem; min-width:0; }
.sm-name{ font:600 1rem/1.25 var(--display); }
.sm-desc{ font:400 .8125rem/1.35 var(--body); color:var(--ink-3); }
.sm-tool:hover .sm-desc{ color:var(--ink-2); }
/* Discord bot: a button in the header and a promo at the foot of the "All tools" panel */
.head-bot svg{ width:1.125rem; height:1.125rem; color:#5865f2; }
/* Icon-only on every screen (the labels stay for screen readers), so logo, nav and tools share one line on a PC */
.head-bot, .head-all{ position:relative; width:2.5rem; padding:0; justify-content:center; }
.head-bot .hb-label, .head-all .hb-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.sm-bot{ display:flex; align-items:center; gap:.875rem; margin-top:1.5rem; padding:.875rem 1rem; border:1px solid var(--line); border-radius:6px; background:var(--bg-2); color:var(--ink); text-decoration:none; transition:border-color .15s ease; }
.sm-bot-ic{ flex:none; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:6px; background:#5865f2; color:#fff; }
.sm-bot-ic svg{ width:1.375rem; height:1.375rem; }
.sm-bot .sm-tx{ flex:1; min-width:0; }
.sm-bot-go{ flex:none; color:var(--link); font:600 .875rem/1 var(--display); white-space:nowrap; }
@media (hover:hover) and (pointer:fine){ .sm-bot:hover{ border-color:var(--ink-2); } }
@media (max-width:30rem){ .sm-bot-go{ display:none; } }
.sm-more{ margin-top:1.75rem; padding-top:1rem; border-top:2px solid var(--ink); }
.sm-more ul{ display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; }
.sm-more a{ display:inline-block; padding:.375rem 0; color:var(--ink-2); font:600 .875rem/1.3 var(--display); text-decoration:none; }
.sm-more a:hover, .sm-more a[aria-current]{ color:var(--link); text-decoration:underline; text-underline-offset:.2em; }
@media (min-width:60.01rem){
  .site-menu{ inset:0 0 auto 0; width:100%; height:auto; max-height:100dvh; border-left:0; border-bottom:1px solid var(--line-2); padding:0 max(var(--gutter), calc((100% - 72rem) / 2)) 1.75rem; box-shadow:0 1.5rem 3rem -1.5rem rgba(1,0,40,.35); }
  .sm-search{ max-width:30rem; }
  .sm-groups{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 1.75rem; }
  .sm-group .sm-tool{ border-bottom:0; padding:.625rem 0; }
  .sm-group li + li .sm-tool{ border-top:1px solid var(--line); }
  .sm-ic{ width:1.75rem; height:1.75rem; }
  .sm-name{ font-size:.9375rem; }
}
@media (min-width:60.01rem) and (prefers-reduced-motion:no-preference){
  .site-menu{ transform:translateY(-100%); }
  .site-menu:popover-open{ transform:none; }
  @starting-style{ .site-menu:popover-open{ transform:translateY(-100%); } }
}

/* Section tabs: every tool in the section, one tap apart. Scrolls sideways on narrow screens. */
.sec-nav{ border-bottom:1px solid var(--line); background:var(--bg); }
.sec-tabs{ position:relative; display:flex; gap:1.375rem; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; mask-image:linear-gradient(90deg,#000 calc(100% - 2rem),transparent); }
.sec-tabs::-webkit-scrollbar{ display:none; }
.sec-tabs a{ display:block; padding:.875rem 0 .75rem; border-bottom:2px solid transparent; color:var(--ink-2); font:600 .875rem/1 var(--display); text-decoration:none; white-space:nowrap; }
.sec-tabs a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.sec-tabs a[aria-current]{ color:var(--ink); border-bottom-color:var(--green); }
.sec-tabs li:last-child{ padding-right:2rem; }

/* Site search (built by site.js): a box over the page, near the top so the keyboard never covers results */
.ss{ width:min(40rem,calc(100% - 2rem)); max-height:min(36rem,calc(100dvh - 4rem)); margin:clamp(1rem,10vh,6rem) auto auto; padding:0; display:none; flex-direction:column; border:1px solid var(--line-2); border-radius:4px; background:var(--bg); color:var(--ink); box-shadow:0 24px 64px rgba(1,0,40,.28); }
.ss[open]{ display:flex; }
.ss::backdrop{ background:rgba(1,0,40,.45); }
@media (prefers-reduced-motion:no-preference){
  .ss[open]{ animation:ss-in .2s var(--ease-out); }
  @keyframes ss-in{ from{ opacity:0; transform:translateY(-6px) scale(.985); } }
}
.ss-bar{ display:flex; align-items:center; gap:.75rem; padding:0 .75rem 0 1rem; border-bottom:1px solid var(--line); }
.ss-bar > svg{ width:1.25rem; height:1.25rem; flex-shrink:0; color:var(--ink-3); }
.ss-in{ flex:1; min-width:0; height:3.5rem; padding:0; border:0; background:transparent; font-size:1.0625rem; outline:none; }
.ss-in::-webkit-search-cancel-button{ display:none; }
.ss-in:focus-visible{ outline:none; }
.ss-x{ height:2rem; padding:0 .625rem; border:1px solid var(--line-2); border-radius:3px; background:transparent; color:var(--ink-2); font:600 .8125rem/1 var(--display); }
.ss-body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:.25rem .5rem .5rem; }
.ss-h{ padding:.75rem .625rem .375rem; font:600 .75rem/1.2 var(--body); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.ss-list [role="option"]{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.625rem .625rem; border-radius:3px; cursor:pointer; }
.ss-list [aria-selected="true"]{ background:var(--tint); color:var(--tint-ink); box-shadow:inset 3px 0 var(--green); }
.ss-n{ font:600 1rem/1.3 var(--display); }
.ss-m{ flex-shrink:0; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8125rem; color:var(--ink-3); }
[aria-selected="true"] .ss-m{ color:inherit; }
@media (max-width:30rem){ .ss-list [role="option"]{ flex-direction:column; gap:.125rem; } .ss-m{ max-width:100%; } }
.ss-list .ss-all{ margin-top:.375rem; border-top:1px solid var(--line); border-radius:0; }
.ss-all .ss-n{ font:400 .9375rem/1.3 var(--body); color:var(--link); }
.ss-status{ padding:0 1.125rem; font-size:.875rem; color:var(--ink-3); }
.ss-status:not(:empty){ padding-block:.75rem; }
.ss-keys{ display:flex; gap:1.25rem; padding:.625rem 1.125rem; border-top:1px solid var(--line); font-size:.75rem; color:var(--ink-3); }
.ss-keys kbd{ display:inline-block; min-width:1.375rem; margin-right:.25rem; padding:.125rem .3125rem; border:1px solid var(--line-2); border-radius:2px; font:600 .6875rem/1.2 var(--body); text-align:center; }
@media (hover:none), (pointer:coarse){ .ss-keys{ display:none; } }

.theme-toggle{ display:inline-grid; place-items:center; width:2.5rem; height:2.5rem; flex-shrink:0; border:1px solid var(--ctl); border-radius:3px; background:transparent; color:var(--ink); transition:background-color .15s ease, border-color .15s ease, transform .16s var(--ease-out); }
.theme-toggle:active{ transform:scale(.95); }
.theme-toggle svg{ width:1.125rem; height:1.125rem; }
@media (hover:hover) and (pointer:fine){ .theme-toggle:hover{ background:var(--bg-2); border-color:var(--ink-2); } }
.theme-toggle .half{ fill:currentColor; }

/* ---- Notify band: a flat colour field with one tone-on-tone football, cropped by the corner. Brand green in light, a deep green surface in dark ---- */
.band{ position:relative; overflow:hidden; background:var(--band-bg); color:var(--band-fg); padding-block:var(--section); }
.band-mark{ position:absolute; right:-8%; bottom:-42%; width:min(44rem,90vw); height:auto; aspect-ratio:1; fill:var(--band-mark); color:var(--band-mark); pointer-events:none; }
.band-grid{ position:relative; display:grid; gap:2rem; }
@media (min-width:60rem){ .band-grid{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:end; } }
.band h2{ font-size:clamp(2.25rem,1.3rem + 3.6vw,4rem); letter-spacing:-.035em; line-height:1; }
.band-copy{ margin-top:1.25rem; max-width:32rem; font-size:1.125rem; line-height:1.55; }
.band :focus-visible{ outline-color:var(--band-fg); }
.field{ display:flex; flex-wrap:wrap; gap:.75rem; }
.field input{ flex:1 1 13rem; min-width:0; min-height:3.25rem; padding:0 1rem; border:1.5px solid var(--field-line); border-radius:3px; background:var(--field-bg); color:var(--field-fg); font-size:1rem; }
.field input::placeholder{ color:var(--field-ph); opacity:1; }
.field input[aria-invalid="true"]{ outline:3px solid var(--alert); outline-offset:1px; }
.field .btn{ min-height:3.25rem; flex:0 0 auto; }
@media (max-width:30rem){ .field .btn{ flex:1 1 100%; } }
.err{ min-height:1.5em; margin-top:.625rem; font-size:.9375rem; font-weight:600; line-height:1.4; }
.field-note{ margin-top:.5rem; font-size:.9375rem; line-height:1.5; }
.field-note strong{ font-weight:600; }
.form-stack{ display:grid; }
.form-stack > *{ grid-area:1 / 1; min-width:0; }
.form-slot{ transition:opacity .2s ease, visibility 0s linear .2s; }
.form-slot[data-hidden="true"]{ opacity:0; visibility:hidden; pointer-events:none; }
.confirm-slot{ opacity:0; visibility:hidden; pointer-events:none; align-self:start; padding:1.25rem 1.25rem 1.375rem; background:var(--field-bg); color:var(--field-fg); border-radius:3px; font-size:1.0625rem; line-height:1.5; }
.confirm-slot strong{ display:block; margin-bottom:.25rem; font:600 1.375rem/1.2 var(--display); letter-spacing:-.015em; }
.confirm-slot[data-visible="true"]{ opacity:1; visibility:visible; pointer-events:auto; animation:confirm-in .32s var(--ease-out) both; }
.confirm-slot:focus-visible{ outline:2px solid var(--band-fg); outline-offset:3px; }
@keyframes confirm-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---- Footer (navy in both themes) ---- */
.foot{ background:var(--navy); color:#c9cbe3; padding-block:clamp(2.5rem,5vw,4rem) 2rem; }
.foot :focus-visible{ outline-color:#fff; }
.foot-grid{ display:grid; gap:2rem; }
@media (min-width:56rem){ .foot-grid{ grid-template-columns:minmax(0,17rem) minmax(0,1fr); align-items:start; gap:3rem; } }
.foot .logo{ --logo-accent:#fff; --logo-ink:#fff; width:11.5rem; height:auto; }
.foot-blurb{ margin-top:1.125rem; max-width:34ch; font-size:.9375rem; line-height:1.55; }
.foot-side{ display:grid; gap:1.25rem; }
.foot-side .soc{ margin-top:.5rem; }
/* Site map: every page, grouped (generated by fetcher/site-nav.mjs) */
.foot-map{ display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:1.75rem 2.5rem; width:100%; }
.fm-h{ margin-bottom:.5rem; font:600 .75rem/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase; color:#bcbedb; }
.fm-group a{ display:inline-block; padding:.3125rem 0; color:#fff; font:600 .9375rem/1.3 var(--display); text-decoration:none; }
.fm-group a:hover, .fm-group a[aria-current]{ text-decoration:underline; text-underline-offset:.22em; }
.soc{ display:flex; gap:.5rem; }
.soc a{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid rgba(255,255,255,.32); border-radius:3px; color:#fff; transition:background-color .15s ease, border-color .15s ease; }
.soc svg{ width:1.0625rem; height:1.0625rem; fill:currentColor; }
@media (hover:hover) and (pointer:fine){ .soc a:hover{ background:rgba(255,255,255,.12); border-color:#fff; } }
.foot-legal{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.2); }
.disclaimer{ max-width:80ch; font-size:.8125rem; line-height:1.65; color:#bcbedb; }
.disclaimer strong{ color:#fff; font-weight:600; }
.copy{ margin-top:1rem; font-size:.8125rem; color:#bcbedb; }

/* ===================================================================
   Home: hero
   =================================================================== */
.hero{ position:relative; overflow:hidden; background:var(--hero-bg); padding-block:clamp(2.5rem,6vw,5.5rem) clamp(3rem,7vw,6.5rem); }
.hero-grid{ display:grid; gap:clamp(2.75rem,6vw,3.5rem); }
@media (min-width:60rem){ .hero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2.5rem,6vw,6rem); align-items:center; } }
.hero h1{ font-size:clamp(2.5rem,1.1rem + 4.7vw,4.75rem); line-height:.97; letter-spacing:-.04em; }
/* Headline typewriter. A root line in ink, then the changing words on their own line in brand green. Without scripting (or with
   reduced motion) the headline is just "One model behind every FPL transfer." Once the script runs, every root-and-word pair is
   laid out invisibly in one grid cell, so the block is always as tall as the tallest pair and nothing below it moves. The
   untyped rest of whatever is being typed is also laid out but hidden, so words never jump between lines mid-typing. */
.tw-r, .tw-w{ display:block; }
.tw-w{ color:var(--hero-word); }
.tw-anim{ display:grid; }
.tw-anim > *{ grid-area:1 / 1; }
.tw-g, .tw-off{ visibility:hidden; }
.tw-cursor{ position:relative; display:inline-block; width:0; height:.78em; vertical-align:-.02em; }
.tw-cursor::before{ content:""; position:absolute; left:.05em; top:0; bottom:0; width:.06em; background:currentColor; }
.tw-cursor.is-idle::before{ animation:tw-blink .9s step-end infinite; }
@keyframes tw-blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .tw-cursor.is-idle::before{ animation:none; } }
.hero-lead{ margin-top:1.5rem; max-width:32rem; color:var(--ink-2); font-size:clamp(1.0625rem,1rem + .3vw,1.25rem); line-height:1.55; }
.hero-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem; }
/* Team ID box: straight to /my-team?id=… (my-team.js reads the id). Remembers a returning visitor's ID (site.js) */
.hero-team{ margin-top:2rem; max-width:32rem; padding-top:1.5rem; border-top:1px solid var(--line-2); }
.hero-team-h{ font:600 1.125rem/1.2 var(--display); letter-spacing:-.01em; }
.hero-team-sub{ margin:.25rem 0 .75rem; font-size:.9375rem; line-height:1.45; color:var(--ink-2); }
.hero-team .st-range{ gap:.5rem; }
.hero-team .st-in{ min-height:3rem; font-size:1rem; }
.hero-team .btn{ flex-shrink:0; }
@media (max-width:26rem){ .hero-team .st-range{ flex-wrap:wrap; } .hero-team .btn{ flex:1 1 100%; } }
.hero-team-help{ margin-top:.625rem; font-size:.875rem; color:var(--ink-2); }
.hero-team-help summary{ cursor:pointer; color:var(--link); font-weight:600; width:max-content; max-width:100%; }
.hero-team-help p{ margin-top:.375rem; line-height:1.5; }
.hero-team-help code{ font:500 .875em ui-monospace,Consolas,monospace; }
.hero .btn-solid{ background:var(--hero-btn-bg); color:var(--hero-btn-fg); }
.hero .btn-solid:hover{ background:var(--hero-btn-hover); }
.hero :focus-visible{ outline-color:var(--focus); }

/* Outlined "more" button (homepage snapshot card) and the grey skeleton bar used by the tool previews */
.deck-more{ margin-left:auto; display:inline-flex; align-items:center; gap:.5rem; min-height:2.5rem; padding:0 .875rem; border:1.5px solid var(--ink); border-radius:3px; color:var(--ink); font:600 .9375rem/1 var(--display); text-decoration:none; transition:background-color .15s ease, color .15s ease, transform .14s var(--ease-out); }
.deck-more:hover{ background:var(--ink); color:var(--bg); }
.deck-more:active{ transform:scale(.97); }
.sk{ display:block; height:.5625rem; border-radius:2px; background:var(--bg-3); }

/* Without scripting, hide controls that need it (the contact page's "Copy address" button) */
html:not(.js) [data-copy]{ display:none; }

/* ===================================================================
   Home: what we're building (a ruled list, one row per tool)
   =================================================================== */
.squad{ border-top:1px solid var(--line); padding-block:var(--section); }
.squad-head{ display:grid; gap:1rem; margin-bottom:clamp(2rem,4vw,3rem); }
.squad-head h2{ font-size:clamp(1.875rem,1.2rem + 2.6vw,3.25rem); letter-spacing:-.03em; }
.squad-head p{ max-width:34rem; color:var(--ink-2); font-size:1.0625rem; }
@media (min-width:60rem){
  .squad-head{ grid-template-columns:minmax(0,4fr) minmax(0,5fr) 6.5rem; column-gap:clamp(1.5rem,4vw,4rem); align-items:end; }
  .squad-head p{ grid-column:2; }
}
.squad-list{ border-top:2px solid var(--ink); }

/* Tool grid (homepage and stats hub): generated by fetcher/site-nav.mjs. A jump row, then each job's heading above its tools as compact cards. */
.tg{ border-top:2px solid var(--ink); }
.tg-jump ul{ display:flex; flex-wrap:wrap; gap:.5rem; padding:1.25rem 0 .25rem; margin:0; list-style:none; }
.tg-jump a{ display:inline-flex; align-items:center; gap:.5rem; min-height:2.25rem; padding:.375rem .75rem; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font:500 .875rem/1.2 var(--body); text-decoration:none; transition:border-color .15s ease; }
.tg-jump .tg-n{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine){ .tg-jump a:hover{ border-color:var(--ink-2); } }
.tg-group{ padding-block:1.5rem; border-bottom:1px solid var(--line); scroll-margin-top:7rem; }
.tg-group:last-child{ border-bottom:0; }
.tg-h{ display:flex; align-items:baseline; gap:.625rem; margin-bottom:.875rem; font:600 1.25rem/1.25 var(--display); letter-spacing:-.01em; color:var(--ink); }
.tg-h .tg-n{ font:400 .8125rem/1 var(--body); letter-spacing:0; color:var(--ink-3); }
.tg-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,14.5rem),1fr)); gap:.75rem; margin:0; padding:0; list-style:none; }
.tg-card{ position:relative; display:grid; grid-template-columns:2.5rem minmax(0,1fr); grid-template-rows:auto 1fr auto; column-gap:.875rem; row-gap:.25rem; height:100%; padding:1rem 2.25rem 1rem 1rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); text-decoration:none; transition:border-color .15s ease, transform .16s var(--ease-out); }
.tg-card::after{ content:'→'; position:absolute; top:1rem; right:1rem; color:var(--ink-3); transition:transform .16s var(--ease-out), color .15s ease; }
.tg-card > :not(.tg-ic){ grid-column:2; }
.tg-ic{ grid-row:1 / span 3; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:6px; background:var(--tint); color:var(--tint-ink); }
.tg-ic svg{ width:1.375rem; height:1.375rem; }
.tg-name{ font:600 1.0625rem/1.25 var(--display); letter-spacing:-.01em; }
.tg-desc{ color:var(--ink-2); font-size:.9375rem; line-height:1.45; }
.tg-kind{ justify-self:start; margin-top:.5rem; padding:.125rem .5rem; border-radius:999px; background:var(--bg-2); color:var(--ink-3); font:500 .75rem/1.4 var(--body); }
.tg-card:active{ transform:scale(.99); }
@media (hover:hover) and (pointer:fine){ .tg-card:hover{ border-color:var(--ink-2); } .tg-card:hover .tg-name{ color:var(--link); } .tg-card:hover::after{ color:var(--link); transform:translateX(3px); } }
@media (min-width:48rem){ .tg-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:64rem){ .tg-list{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sq-row{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); gap:.375rem; padding-block:1.375rem; border-bottom:1px solid var(--line); text-decoration:none; }
.sq-row::before{ content:''; position:absolute; z-index:-1; inset:0 calc(var(--gutter) * -1); background:var(--bg-2); opacity:0; transition:opacity .15s ease; }
@media (hover:hover) and (pointer:fine){ .sq-row:hover::before{ opacity:1; } }
.sq-name{ font:600 1.4375rem/1.2 var(--display); letter-spacing:-.02em; }
.sq-kind{ display:block; margin-top:.25rem; font:400 .8125rem/1.3 var(--body); letter-spacing:0; color:var(--ink-3); }
.sq-desc{ max-width:56ch; color:var(--ink-2); }
.sq-go{ margin-top:.25rem; font:600 .9375rem/1 var(--display); color:var(--link); }
@media (min-width:60rem){
  .sq-row{ grid-template-columns:minmax(0,4fr) minmax(0,5fr) 6.5rem; align-items:baseline; column-gap:clamp(1.5rem,4vw,4rem); padding-block:1.75rem; }
  .sq-go{ margin-top:0; justify-self:end; }
}

/* ===================================================================
   Home: Discord bot (copy on the left, an example chat post on the right)
   =================================================================== */
.bot{ border-top:1px solid var(--line); padding-block:var(--section); }
.bot-grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:60rem){ .bot-grid{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; } }
.bot h2{ font-size:clamp(1.875rem,1.2rem + 2.6vw,3.25rem); letter-spacing:-.03em; }
.bot-lede{ margin-top:1rem; max-width:34rem; color:var(--ink-2); font-size:1.0625rem; }
.bot-list{ margin-top:clamp(1.75rem,3vw,2.25rem); border-top:2px solid var(--ink); }
.bot-list > div{ display:grid; gap:.25rem; padding-block:1rem; border-bottom:1px solid var(--line); }
@media (min-width:36rem){ .bot-list > div{ grid-template-columns:11rem minmax(0,1fr); column-gap:1.5rem; align-items:baseline; } }
.bot-list dt{ font:600 1.0625rem/1.3 var(--display); letter-spacing:-.01em; }
.bot-list dd{ margin:0; color:var(--ink-2); }
.bot code, .dc code{ font:500 .9em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; padding:.1em .3em; border-radius:2px; background:var(--bg-2); color:var(--ink); }
.bot-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.75rem,3vw,2.25rem); }
.bot-note{ margin-top:1rem; max-width:34rem; font-size:.9375rem; color:var(--ink-3); }

/* the example post: flat, on the site's own surfaces, not a copy of Discord's UI */
.dc{ margin:0; border:1px solid var(--line-2); border-radius:4px; background:var(--card); overflow:hidden; }
@media (min-width:60rem){ .dc{ position:sticky; top:6rem; } }
.dc-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); color:var(--ink-3); font:400 .875rem/1.2 var(--body); }
.dc-chan{ font:600 .9375rem/1.2 var(--display); color:var(--ink); }
.dc-msg{ display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.75rem; padding:1rem 1rem 1.25rem; }
.dc-av{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--green); }
.dc-av .logo{ width:1.6rem; height:1.6rem; fill:#fff; color:#fff; }
.dc-who{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; font-size:.9375rem; }
.dc-who strong{ font:600 1rem/1.2 var(--display); }
.dc-bot{ padding:.1rem .3rem; border-radius:2px; background:var(--green); color:#fff; font:600 .6875rem/1.2 var(--display); }
.dc-time{ color:var(--ink-3); font-size:.8125rem; }
.dc-embed{ margin-top:.625rem; padding:.75rem .875rem; border-left:4px solid var(--c); border-radius:2px; background:var(--bg-2); font-size:.9375rem; color:var(--ink-2); }
.dc-g{ --c:var(--green); } .dc-n{ --c:var(--ctl); } .dc-a{ --c:var(--amber-line); }
.dc-title{ margin-bottom:.25rem; font:600 1rem/1.3 var(--display); color:var(--ink); }
.dc-rows{ display:grid; grid-template-columns:auto 1fr; column-gap:1rem; row-gap:.125rem; font-variant-numeric:tabular-nums; }
.dc-rows span:nth-child(odd){ color:var(--ink); }
@media (max-width:29.99rem){
  .dc-msg{ grid-template-columns:2rem minmax(0,1fr); gap:.625rem; padding:.875rem .75rem 1rem; }
  .dc-av{ width:2rem; height:2rem; } .dc-av .logo{ width:1.3rem; height:1.3rem; }
  .dc-embed{ padding:.625rem .75rem; }
  .dc-rows{ column-gap:.75rem; }
}

/* ===================================================================
   Contact page
   =================================================================== */
.page-head{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.75rem,3vw,2.5rem); }
.page-head h1{ font-size:clamp(2.5rem,1.2rem + 4.8vw,4.75rem); line-height:.97; letter-spacing:-.04em; }
.page-head .lead{ margin-top:1.25rem; max-width:36rem; color:var(--ink-2); font-size:clamp(1.0625rem,1rem + .3vw,1.25rem); line-height:1.55; }
.contact{ padding-bottom:var(--section); }
.contact-grid{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:60rem){ .contact-grid{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(3rem,7vw,7rem); } }
.contact-side{ border-top:2px solid var(--ink); }
.side-block{ padding-block:1.25rem; border-bottom:1px solid var(--line); }
.side-block h2{ font:600 1.0625rem/1.2 var(--display); letter-spacing:-.01em; }
.side-block p{ margin-top:.5rem; color:var(--ink-2); font-size:.9375rem; line-height:1.6; }
.side-mail{ display:flex; flex-wrap:wrap; align-items:center; gap:.375rem 1rem; margin-top:.625rem; }
.side-mail a{ font-weight:600; color:var(--link); text-underline-offset:.22em; overflow-wrap:anywhere; }
.copy-note{ margin-top:.375rem; font-size:.8125rem; line-height:1.4; color:var(--ink-3); }
.side-block p.copy-note:empty{ margin-top:0; }
.cwrap{ border-top:2px solid var(--ink); padding-top:1.5rem; }
.cwrap[data-state="sent"] .cform{ display:none; }
.cform{ display:flex; flex-direction:column; }
.cform > * + *{ margin-top:1.25rem; }
.cform > .hp + *{ margin-top:0; }
.fld{ display:grid; gap:.375rem; min-width:0; }
.fld-row{ display:grid; gap:1.25rem; }
@media (min-width:40rem){ .fld-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fld label{ font:600 .9375rem/1.2 var(--display); letter-spacing:-.005em; }
.fld .opt{ margin-left:.375rem; font:400 .8125rem var(--body); color:var(--ink-3); letter-spacing:0; }
.inp{ display:block; width:100%; min-height:3.125rem; padding:.75rem .875rem; border:1.5px solid var(--ctl); border-radius:3px; background:var(--card); color:var(--ink); font-size:1rem; line-height:1.4; transition:border-color .15s ease; }
textarea.inp{ min-height:11.5rem; resize:vertical; }
.inp::placeholder{ color:var(--ink-3); opacity:1; }
@media (hover:hover) and (pointer:fine){ .inp:hover{ border-color:var(--ink-2); } }
.inp:focus-visible{ border-color:var(--ink); outline:2px solid var(--focus); outline-offset:1px; }
.inp[aria-invalid="true"]{ border-color:var(--danger); }
.f-err{ font-size:.875rem; font-weight:600; line-height:1.4; color:var(--danger); }
.f-err:empty{ display:none; }
.f-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.f-fine{ flex:1 1 16rem; font-size:.8125rem; line-height:1.5; color:var(--ink-3); }
.f-fine a{ color:var(--link); }
.form-err{ font-size:.9375rem; font-weight:600; line-height:1.5; color:var(--danger); }
.cform > .form-err:empty{ margin-top:0; }
.sent{ display:none; }
.cwrap[data-state="sent"] .sent{ display:block; animation:confirm-in .32s var(--ease-out) both; }
.sent h2{ font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem); letter-spacing:-.03em; }
.sent p{ margin-top:.75rem; max-width:42ch; color:var(--ink-2); }
.sent-actions{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center; }
.sent:focus{ outline:none; }

/* ===================================================================
   Privacy and terms (plain reading pages)
   =================================================================== */
.prose{ max-width:44rem; padding-bottom:var(--section); }
.prose h2{ margin-top:2.5rem; font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem); letter-spacing:-.02em; }
.prose p, .prose li{ margin-top:.75rem; color:var(--ink-2); font-size:1.0625rem; line-height:1.7; }
.prose ul{ margin-top:.5rem; padding-left:1.25rem; list-style:disc; }
.prose li{ margin-top:.375rem; }
.prose a{ color:var(--link); text-underline-offset:.22em; }
.prose .stamp{ margin-top:1rem; font-size:.875rem; color:var(--ink-3); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}