/* ==========================================================================
   TennisArena.eu — design system
   Ported from the approved Claude Design prototype (TennisArena.dc.html).
   Tokens, typography and component styles are taken from the prototype's
   inline styles; this file is the single stylesheet for the public site.
   Django admin is untouched.
   ========================================================================== */

:root{
  /* Court / brand greens */
  --court:#1B5E20; --court-2:#0D3B12; --court-3:#2B7A33;
  /* Ball yellow + accents */
  --ball:#D6F531; --ball-2:#7C9A00;
  /* Surfaces */
  --paper:#F7F8F4; --card:#FFFFFF; --line:#E4E8DF; --line-2:#CFD6C7;
  /* Ink */
  --ink:#14201A; --ink-2:#4A574E; --ink-3:#7B877E;
  /* Court surfaces (tournaments) */
  --clay:#C56A3E; --grass:#3F8F4A; --hard:#2F6BA8;
  /* Light chrome — nav/hero/footer/promo now sit on light surfaces, so the
     "on dark" text tokens point at ink shades instead of pale greens. */
  --on-court:#14201A; --on-court-2:#4A574E; --on-court-3:#7B877E;
  /* Tints */
  --tint:#EDF6E4; --tint-2:#F7FAF3;
  /* Brand aliases */
  --eu:#2B7A33; --brand:#1B5E20; --brand-2:#0D3B12; --mark:#D6F531; --new:#FF9500;
  --on-brand:#14201A; --on-brand-2:#4A574E; --on-brand-3:#7B877E;
  /* Semantic */
  --ok:#2C6141; --warn:#6C7A70; --danger:#B4544A; --gold:#C6A03A;
  /* "Care" pink — the arm-sensitive / comfort setting on the tension
     calculator. It is deliberately outside the green palette: that control is
     not another answer to the same question, it is ticked alongside one, and a
     green variant would have read as a fifth style. Kept translucent so it
     sits on both the light panels and the dark result panel. */
  --care:#D6417E; --care-ink:#9B1D55;
  --care-tint:rgba(214,65,126,.07); --care-tint-2:rgba(214,65,126,.15);
  --care-line:rgba(214,65,126,.38);
  /* Advertising placeholders. The owner asked for the empty slots to be seen
     rather than politely ignored, so they borrow the wordmark's iPhone orange
     (--new). --ad-ink is a darkened orange, not --new itself: #FF9500 on the
     pale tint measures 2.0:1 and is unreadable, #9A4B00 on it is 6.4:1. This
     is the same trap as the .pill.is-active bug in Batch 33 — an accent colour
     is for the border and the ground, never for the text standing on it. */
  --ad-ink:#9A4B00; --ad-tint:rgba(255,149,0,.055); --ad-tint-2:rgba(255,149,0,.10);
  --ad-line:rgba(255,149,0,.55);

  /* Three roles, as the handoff specifies: Krona One for display (headings,
     product names, section titles), Inter for running text, Archivo for every
     figure — it carries the tabular numerals that keep score columns, spec
     tables and price rows aligned. */
  --display:'Krona One',Inter,system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --num:'Archivo',system-ui,-apple-system,sans-serif;
  --display-lh:1.22; --display-w:400; --display-ls:0em;

  --r-ctl:6px; --r-btn:8px; --r-card:12px; --r-panel:14px;
  --shadow-rest:0 1px 2px rgba(20,32,26,.04);
  --shadow-hover:0 10px 24px rgba(18,58,43,.10);
  --shadow-hover-lg:0 12px 28px rgba(18,58,43,.12);
  --shadow-overlay:0 30px 70px rgba(9,26,20,.35);

  --gutter:56px;
  --gap:48px;
  --gap-sm:20px;

  /* The sticky site header's height. Anything else that sticks has to clear
     it, or the header covers it — so the number lives here once instead of
     being guessed at each call site. */
  --header-h:131px;  /* fallback only — initHeaderHeight() measures the real one */
}

*,*::before,*::after{box-sizing:border-box;}

/* The browser's own [hidden] rule loses to any author rule that sets display,
   and plenty here do (.btn-row, .racquetopt and .modal are all flex). Without
   this, anything toggled with el.hidden stays on screen. */
[hidden]{display:none !important;}

html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--brand);text-decoration:none;}
a:hover{color:var(--ok);}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--ball);color:var(--court);}
:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
hr{border:0;border-top:1px solid var(--line);margin:32px 0;}

h1,h2,h3,h4{font-family:var(--display);font-weight:var(--display-w);line-height:var(--display-lh);letter-spacing:var(--display-ls);margin:0;}

.num{font-family:var(--num);font-variant-numeric:tabular-nums;}

/* Custom racquet glyph — the prototype's RACQUET_SVG mask, reused verbatim so
   the racquet category keeps its bespoke icon alongside the Phosphor set. */
.ico-racquet{
  display:inline-block;width:1em;height:1em;background:currentColor;vertical-align:-.125em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='8.4' rx='6' ry='7.2'/%3E%3Cg stroke-width='1.15'%3E%3Cpath d='M9.4 2.5v11.8M14.6 2.5v11.8M6.4 6.2h11.2M6.4 10.6h11.2'/%3E%3C/g%3E%3Cpath d='M9.7 15 11 17.4M14.3 15 13 17.4'/%3E%3Cpath d='M12 17.4v4.9' stroke-width='2.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='8.4' rx='6' ry='7.2'/%3E%3Cg stroke-width='1.15'%3E%3Cpath d='M9.4 2.5v11.8M14.6 2.5v11.8M6.4 6.2h11.2M6.4 10.6h11.2'/%3E%3C/g%3E%3Cpath d='M9.7 15 11 17.4M14.3 15 13 17.4'/%3E%3Cpath d='M12 17.4v4.9' stroke-width='2.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- layout ------------------------------------------------------ */
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter);}
.section{padding:48px 0;}
.section-tight{padding:28px 0;}
main{display:block;min-height:50vh;}
.stack{display:flex;flex-direction:column;gap:var(--gap);}
.stack-sm{display:flex;flex-direction:column;gap:var(--gap-sm);}

.grid{display:grid;gap:var(--gap-sm);}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
.g5{grid-template-columns:repeat(5,minmax(0,1fr));}
.split{display:grid;grid-template-columns:1.6fr .9fr;gap:var(--gap);align-items:start;}
.split-side{display:grid;grid-template-columns:230px 1fr;gap:var(--gap);align-items:start;}
.split-calc{display:grid;grid-template-columns:380px 1fr;gap:var(--gap);align-items:start;}
.prose{max-width:660px;}

/* ---------- typographic helpers ---------------------------------------- */
.eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.eyebrow-xs{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.lead{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:660px;}
.meta{font-size:12px;color:var(--ink-3);}
.muted{color:var(--ink-2);}
.h1{font-size:44px;}
.h2{font-size:32px;}
.h3{font-size:24px;}
.h4{font-size:19px;}
.text-brand{color:var(--brand);}

.breadcrumb{font-size:12px;color:var(--ink-3);margin-bottom:12px;}
.breadcrumb a{color:var(--ink-3);}
.breadcrumb a:hover{color:var(--brand);}

.sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:16px;margin-bottom:20px;}
.sec-head .idx{font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-3);}
.sec-head h2{font-size:32px;}
.sec-head .more{margin-left:auto;font-size:13px;font-weight:500;}
.sec-note{font-size:12px;color:var(--ink-3);}

/* ---------- header ------------------------------------------------------ */
.ta-header{position:sticky;top:0;z-index:60;}
.ta-nav{background:var(--card);color:var(--on-court);border-bottom:1px solid var(--line);}
.ta-nav-inner{display:flex;align-items:center;gap:14px;min-height:64px;max-width:1440px;margin:0 auto;padding:0 22px;}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:0;line-height:1;white-space:nowrap;}
/* The three spans are one coined word — 1px between them, as the design has it.
   The 9px gap above only separates the mark from the type. */
.wordmark .wm-text{display:inline-flex;align-items:baseline;gap:1px;}
.wordmark .logo-mark{border-radius:22%;flex:none;}
.wordmark .w1{color:var(--on-court);}
.wordmark .w2{color:var(--new);}  /* iPhone orange #FF9500 — confirmed by the owner */
.wordmark .w3{color:var(--eu);font-size:13px;}
.wordmark:hover{color:inherit;}

.ta-links{display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0;flex-wrap:wrap;}
.ta-links a,.ta-links .navbtn{
  padding:8px 7px;border-radius:var(--r-ctl);font-size:13.5px;font-weight:500;
  white-space:nowrap;color:var(--on-court-2);background:transparent;border:0;text-decoration:none;
}
.ta-links a.primary{color:var(--on-court);}
.ta-links a:hover,.ta-links .navbtn:hover{background:var(--tint);color:var(--brand);}
/* The Compare pill lives inside .ta-links, so it has to out-specify the plain
   link rule above — otherwise it loses its fill and reads as another text link. */
.ta-links a.btn-compare{padding:0 12px;color:#F1F7EF;background:var(--brand);}
.ta-links a.btn-compare:hover{background:var(--brand-2);color:#F1F7EF;}
.ta-links a.is-active{background:var(--tint);color:var(--brand);}
.ta-sep{width:1px;align-self:stretch;background:var(--line);margin:14px 6px;}

/* Deep green with light type, as the approved Light (white) render shows —
   the prototype writes it as background:--ball / color:--court, and in that
   theme --court resolves to the page white and --ball to the brand green. */
.btn-compare{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;margin:0 6px;
  background:var(--brand);border:0;border-radius:var(--r-btn);color:#F1F7EF;
  font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;flex:none;
}
.btn-compare:hover{background:var(--brand-2);color:#F1F7EF;}
.btn-compare .racq3{display:inline-flex;align-items:center;gap:1px;font-size:15px;line-height:1;}
.btn-compare .racq3 b{opacity:.6;font-weight:600;font-size:12px;line-height:1;}
.btn-compare .cnt{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--mark);color:var(--brand);font-family:var(--num);font-size:11px;font-weight:700;
}

.btn-compare-m{
  display:none;align-items:center;gap:6px;height:38px;padding:0 12px;flex:none;margin-left:auto;
  border:1px solid var(--brand);border-radius:var(--r-btn);background:transparent;color:var(--brand);
  font-family:var(--num);font-size:13px;font-weight:700;text-decoration:none;
}
.btn-compare-m i{font-size:16px;}
.btn-compare-m:hover{background:var(--tint);color:var(--brand);}

.nav-toggle{
  display:none;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line-2);border-radius:var(--r-btn);background:transparent;color:var(--on-court);
}
.nav-toggle:hover{background:var(--tint);}

/* Trust / info strip — deep green even in the light theme. The approved Light
   (white) render pairs a white nav with this dark band underneath; the
   prototype sets it to --brand-2 with pale type and ball-yellow icons. The
   pale values are literal because --on-brand-* point at ink shades here. */
.ta-trust{background:var(--brand-2);color:#C3D8C4;font-size:12px;}
.ta-trust-inner{display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-height:56px;padding:8px 22px;max-width:1440px;margin:0 auto;}
.ta-trust .item{display:inline-flex;align-items:center;gap:7px;color:#C3D8C4;}
.ta-trust a.item:hover{color:#F1F7EF;}
.ta-trust i{font-size:14px;color:var(--mark);}

.ta-search{position:relative;width:300px;flex:none;margin-left:auto;}
.ta-search label{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;width:100%;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-btn);
}
/* The focus ring sits on the wrapper, not the bare input, because the input is
   visually inside the pill. Handoff spec: 2px --brand at 1px offset — never the
   browser default, and never nothing. */
.ta-search label:focus-within{border-color:var(--ball);outline:2px solid var(--ball);outline-offset:1px;}
.ta-search i{font-size:16px;color:#C3D8C4;}
.ta-search input{
  border:0;background:transparent;outline:none;color:#F1F7EF;
  font-size:13px;width:100%;font-family:inherit;
}
.ta-search input::placeholder{color:#8FAE92;}

.search-pop{
  position:absolute;top:42px;right:0;width:420px;max-width:80vw;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 26px 60px rgba(20,32,26,.16);
  overflow:hidden;z-index:70;
}
.search-pop .hd{padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.06em;color:var(--on-court-3);}
.search-pop .list{display:flex;flex-direction:column;max-height:380px;overflow:auto;}
.search-pop .row{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);
  color:var(--on-court);text-decoration:none;
}
.search-pop .row:hover{background:var(--tint);color:var(--on-court);}
.search-pop .row i{font-size:17px;color:var(--brand);flex:none;}
.search-pop .row .tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.search-pop .row .t{font-size:13px;font-weight:600;}
.search-pop .row .s{font-size:11px;color:var(--on-court-3);}
.search-pop .row .k{
  flex:none;padding:2px 7px;border:1px solid var(--line-2);border-radius:5px;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-court-2);
}
.search-pop .none{padding:18px 14px;font-size:12px;line-height:1.55;color:var(--on-court-2);}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border-radius:var(--r-btn);border:1px solid transparent;
  font-size:14px;font-weight:600;font-family:inherit;text-decoration:none;white-space:nowrap;
  background:transparent;color:var(--ink);transition:background .12s,border-color .12s,color .12s;
}
.btn i{font-size:16px;}
.btn .ico-racquet{font-size:18px;}
.btn-lg .ico-racquet{font-size:19px;}
.btn-lg{height:48px;padding:0 20px;font-size:15px;font-weight:700;}
.btn-sm{height:32px;padding:0 12px;font-size:12px;}
.btn-primary{background:var(--brand);color:var(--mark);border-color:var(--brand);}
.btn-primary:hover{background:var(--brand-2);color:var(--mark);}
.btn-ball{background:var(--ball);color:var(--court);border-color:var(--ball);font-weight:700;}
.btn-ball:hover{background:var(--ball-2);color:var(--court);}
.btn-orange{background:var(--new);color:#fff;border-color:var(--new);font-weight:700;}
.btn-orange:hover{background:#E07E00;color:#fff;}
/* Deep green with light type — the same fill as the header's Compare pill. */
.btn-court{background:var(--brand);color:#F1F7EF;border-color:var(--brand);font-weight:700;}
.btn-court:hover{background:var(--brand-2);color:#F1F7EF;}
.btn-outline{border-color:var(--brand);color:var(--brand);}
.btn-outline:hover{background:var(--tint);color:var(--brand);}
.btn-quiet{border-color:var(--line-2);color:var(--ink);}
.btn-quiet:hover{border-color:var(--brand);color:var(--brand);}
.btn-dark{border-color:var(--court-3);color:var(--on-court);}
.btn-dark:hover{background:var(--court-3);color:var(--on-court);}
.btn-ball-outline{border-color:var(--ball);color:var(--ball);}
.btn-ball-outline:hover{background:rgba(214,245,49,.14);color:var(--ball);}
.btn-danger-quiet{border-color:var(--line-2);color:var(--ink-2);}
.btn-danger-quiet:hover{border-color:#C9756A;color:var(--danger);}
.btn-block{width:100%;}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- cards ------------------------------------------------------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-rest);
}
.card-pad{padding:20px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);}
.tintbox{background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;}
.lift{transition:border-color .14s,box-shadow .14s,transform .14s;}
.lift:hover{border-color:var(--court-3);box-shadow:var(--shadow-hover-lg);transform:translateY(-2px);}

/* image placeholders (prototype <image-slot>) */
.imgph{
  position:relative;display:grid;place-items:center;
  background:#EDF0EA;color:#A9B5AC;overflow:hidden;border-radius:var(--r-card);
}
.imgph i{font-size:28px;}
.imgph .cap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9AA79D;}
.imgph.circle{border-radius:999px;}
.imgph img{width:100%;height:100%;object-fit:cover;}
/* Real sourced photos of people (players/coaches) are rarely centred on the
   face by default crop — bias the crop toward the top third so headshots
   and mid-action photos alike keep the face in frame instead of clipping it. */
.imgph.person img{object-position:center 15%;}

/* ---------- badges / pills --------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--r-ctl);font-size:11px;font-weight:600;}
.badge i{font-size:13px;}
.badge-verified{background:var(--tint);color:var(--ok);}
.badge-pending{background:#F1F2EE;color:var(--warn);border:1px dashed var(--line-2);}
.badge-new{background:var(--new);color:#fff;font-weight:700;letter-spacing:.06em;padding:2px 7px;font-size:10px;}
.badge-soon{background:var(--ball);color:var(--court);font-weight:700;letter-spacing:.08em;padding:2px 7px;font-size:10px;border-radius:5px;}
.badge-neutral{background:var(--tint-2);color:var(--ink-2);border:1px solid var(--line);}
.badge-brand{background:var(--brand);color:var(--mark);font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;font-size:10px;}
.badge-tint{background:var(--tint);color:var(--ok);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);background:var(--tint-2);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--brand);}
.chip i{font-size:13px;}
.status-ok{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ok);}
.status-wait{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--warn);}
.status-ok i,.status-wait i{font-size:12px;}

.score-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:10px;background:var(--brand);flex:none;
}
.score-tile .v{font-family:var(--num);font-size:20px;font-weight:700;line-height:1;color:var(--mark);font-variant-numeric:tabular-nums;}
.score-tile .l{font-size:8px;letter-spacing:.1em;color:var(--on-brand-3);margin-top:2px;}
.score-tile.lg{width:62px;height:62px;border-radius:12px;}
.score-tile.lg .v{font-size:26px;}
.score-tile.on-img{position:absolute;top:12px;left:12px;pointer-events:none;}
.score-tile.lg.on-img{top:16px;left:16px;}
.score-chip{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 6px;
  border-radius:var(--r-ctl);background:var(--brand);color:var(--mark);
  font-family:var(--num);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;
}

/* filter pills */
.pill{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r-btn);
  font-size:13px;font-weight:600;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  text-decoration:none;
}
.pill:hover{border-color:var(--brand);color:var(--brand);}
/* --on-brand is remapped to an ink value in this light theme (DEVIATIONS §1)
   so it reads on paper. Here it is the text ON the solid brand green, and ink
   on dark green measures 2.1:1 — below any readable threshold. Every active
   pill on the site was that: the calendar tabs, the catalogue filters, the
   advisor answers. White is 7.9:1. */
.pill.is-active{border-color:var(--brand);background:var(--brand);color:#FFFFFF;}
.pill.is-active:hover{color:#FFFFFF;}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;}

.filter-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.filter-bar .count{margin-left:auto;font-family:var(--num);font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.vsep{width:1px;height:26px;background:var(--line);}

/* ---------- sticky picker (pro players) --------------------------------- */
/* A filter bar is only useful while you can reach it. On a list of nearly two
   hundred cards the old one scrolled away after the first row, so switching to
   ATP meant scrolling back to the top first. This one follows the page down,
   parked directly under the sticky header. */
.pickbar{
  position:sticky;top:var(--header-h);z-index:40;
  display:flex;flex-direction:column;gap:10px;
  margin:0 calc(var(--gutter) * -1) 26px;
  padding:14px var(--gutter) 14px;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.pickbar .pickrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.pickbar .lbl{
  flex:0 0 42px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}
.pickbar .count{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* A pill that carries its own explanation and its own count. */
.pill-two{
  display:inline-flex;align-items:baseline;gap:8px;padding:7px 12px;line-height:1.25;
}
.pill-two .n{font-weight:600;}
.pill-two .d{font-size:11px;color:var(--ink-3);}
.pill-two .c{
  font-size:11px;padding:1px 6px;border-radius:999px;
  background:var(--tint);color:var(--brand);font-variant-numeric:tabular-nums;
}
/* The light theme redefines --on-brand-2 to an ink value, which is right
   everywhere it sits on paper and wrong here, where the active pill is solid
   green. A literal light tint is the honest fix rather than bending a token
   for one component. */
.pill-two.is-active .d{color:#C4DAB8;}
.pill-two.is-active .c{background:rgba(255,255,255,.22);color:#FFFFFF;}
/* The two legend filters carry the amber the site already uses for "not the
   current thing", so the retired players read as a different kind of row
   before you have read the words. */
.pill-legend .c{background:rgba(198,160,58,.16);color:#7A6218;}
.pill-legend.is-active{border-color:var(--gold);}

/* ---------- player groups ----------------------------------------------- */
/* Actives and legends are two answers to two different questions, so they get
   two sections rather than one grid that runs from a current No. 1 straight
   into a wooden-racquet era. */
.playergroup{margin-bottom:34px;}
.playergroup .hd{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:16px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.playergroup .hd h2{margin:0;}
.playergroup .hd .meta{margin:0;}
.playergroup .hd .count{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.playergroup.is-legends .hd{border-bottom-color:rgba(198,160,58,.45);}
.playergroup.is-legends .hd h2{color:#7A6218;}

/* Five to a row: the card has to give up some of its padding and type size to
   stay readable at a fifth of the width. */
.g5 .pcard .shot{height:168px;}
.g5 .pcard .body{padding:13px;gap:7px;}
.g5 .pcard .name{font-size:16px;}
.g5 .pcard .eyebrow{font-size:10px;}
.g5 .pcard .spec{font-size:11px;}
.g5 .pcard .badge{font-size:10px;padding:2px 7px;}
.g5 .gearlist{gap:5px;padding-top:10px;}
.g5 .gearlist .r{font-size:12px;line-height:1.4;gap:6px;}
.g5 .gearlist .r .k{min-width:56px;}
.g5 .cardnote{font-size:11px;padding:9px;}
.g5 .pcard .btn-sm{font-size:11px;}

/* ---------- hero -------------------------------------------------------- */
.hero{background:var(--card);color:var(--on-court);border-bottom:1px solid var(--line);}
.hero-inner{max-width:1440px;margin:0 auto;padding:64px var(--gutter) 56px;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);align-items:center;}
.hero .tagpill{
  display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--line-2);
  border-radius:999px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:var(--tint);margin-bottom:22px;
}
.hero h1{font-family:var(--display);font-weight:400;font-size:62px;line-height:var(--display-lh);letter-spacing:-.01em;margin:0 0 18px;text-wrap:pretty;}
.hero p.lead{margin:0 0 28px;font-size:17px;color:var(--on-court-2);max-width:520px;}
.hero-stats{display:flex;gap:40px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap;}
.hero-stats .v{font-family:var(--num);font-size:26px;font-weight:600;color:var(--on-court);font-variant-numeric:tabular-nums;}
.hero-stats .l{font-size:12px;color:var(--on-court-3);margin-top:2px;}
.hero-art{height:380px;border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--line);background:#EDF0EA;color:#9AA79C;display:grid;place-items:center;}
.hero-art i{font-size:64px;}
.hero-art img{width:100%;height:100%;object-fit:cover;}

/* The design's deep-green feature panel — the calculator's proposal, the
   contact form's side panel. It stayed light through the re-theme and lost the
   contrast it exists for; the approved light theme pairs white chrome with dark
   green bands (the trust strip is the other one), so it goes back to green. */
.darkpanel{
  background:var(--brand);color:#F1F7EF;border:1px solid var(--brand);
  border-radius:var(--r-panel);overflow:hidden;
  /* Templates inside this panel colour text with the --on-court-* tokens, which
     point at ink shades for the light chrome. Redefined here so everything in
     the panel reads on the green without touching a single template. */
  --on-court:#F1F7EF; --on-court-2:#C3D8C4; --on-court-3:#8FAE92;
}
.darkpanel a{color:var(--mark);}
/* A button inside the panel keeps its own colours: .darkpanel a would otherwise
   out-specify .btn-ball and paint the label the same ball-yellow as its own
   background, leaving the text invisible. */
.darkpanel a.btn-ball{color:var(--court);}
.darkpanel a.btn-ball:hover{color:var(--court);}
.darkpanel a.btn-primary{color:#fff;}
.darkpanel .sub{background:var(--brand-2);}
.darkpanel .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8FAE92;}
.darkpanel .num{color:#F1F7EF;}

/* ---------- house promo ------------------------------------------------- */
.promo-band{background:var(--tint-2);border-bottom:1px solid var(--line);padding:10px 0;}
.promo{
  display:flex;align-items:center;gap:20px;width:100%;min-height:100px;padding:16px 22px;
  text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--on-court);
  font-family:inherit;text-decoration:none;
}
.promo:hover{background:var(--tint);color:var(--on-court);}
.promo .ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:10px;background:var(--tint);color:var(--brand);font-size:21px;}
.promo .mid{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.promo .ttl{font-family:var(--display);font-size:18px;line-height:1.2;}
.promo .sub{font-size:13px;color:var(--on-court-2);}
.promo .cta{display:inline-flex;align-items:center;gap:8px;flex:none;height:38px;padding:0 16px;border:1px solid var(--brand);border-radius:var(--r-btn);color:var(--brand);font-size:13px;font-weight:700;}

/* ---------- advertising slots ------------------------------------------- */
/* Two per page is the target across the site, and an empty slot is a sales
   pitch, not decoration: it has to be legible enough that a visiting brand
   reads it and a retailer notices there is inventory here. Hence the orange
   ground, the display-face message and a real link to the contact form with
   the Advertising topic already chosen. */
.adwrap{display:flex;flex-direction:column;gap:6px;}
.ad-slot{
  border:1px dashed var(--ad-line);border-radius:var(--r-card);background:var(--ad-tint);
  display:grid;place-items:center;color:var(--ink-2);transition:background .14s,border-color .14s;
}
.ad-slot:hover{background:var(--ad-tint-2);border-color:var(--new);}
.ad-slot .in{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:14px;}
.ad-slot .sz{font-family:var(--num);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.ad-slot .msg{
  font-family:var(--display);font-size:20px;line-height:1.22;font-weight:var(--display-w);
  letter-spacing:var(--display-ls);color:var(--ad-ink);max-width:26ch;
}
.ad-slot .cta{font-size:12px;color:var(--ink-2);}
.ad-slot .cta a{color:var(--ad-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.ad-slot .cta a:hover{color:#7A3B00;}
/* Sidebar and in-feed slots are narrow; the message drops a size rather than
   breaking into six one-word lines. */
.ad-slot.is-lean .msg{font-size:16px;}
.ad-slot.is-lean .in{gap:5px;padding:12px;}
@media (max-width:640px){ .ad-slot .msg{font-size:17px;} }

/* A photograph we do not have. Used where a feed row or an article hero would
   otherwise be empty: a branded tile that states the absence, rather than a
   borrowed photo of a different subject. Deliberately unlike `.imgph`, which
   is a frame *around* a real picture. */
.thumbph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;height:100%;padding:10px;border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--tint) 0%,var(--tint-2) 100%);
  border:1px dashed var(--line-2);color:var(--brand);font-size:26px;text-align:center;
}
.thumbph .cap{font-family:var(--body);font-size:11px;line-height:1.35;color:var(--ink-3);}

/* The box a photograph lives in — see templates/partials/photo.html. It has
   its height before the picture arrives, so nothing below it moves when it
   does; that is the whole point of it. `object-fit:cover` means a portrait and
   a landscape shot fill the same box without either being squashed. */
.photobox{
  position:relative;display:block;width:100%;overflow:hidden;
  border-radius:var(--r-card);background:#EDF0EA;
}
.photobox.is-round{border-radius:50%;}
.photobox > img{width:100%;height:100%;object-fit:cover;display:block;}
.photobox > .thumbph{border:0;border-radius:inherit;}
/* A picture that failed to load, swapped in by initPhotoFallback. */
.thumbph.is-broken{color:var(--ink-3);background:var(--paper);border-style:dashed;}

/* ---------- whole-card links -------------------------------------------- */
/* A card is one target. Until now only the title was clickable, so a reader
   who aimed at the photo, the specification line or the summary hit nothing.
   The fix is the stretched-link pattern rather than a JS click handler on the
   card: the anchor is still a real anchor, so middle-click, ctrl-click, "copy
   link address" and the keyboard all keep working, and a card without a link
   simply has no overlay.
   `.cardlink::after` is blown up to cover the whole `.linkcard`; everything
   else interactive inside the card is lifted above it so the Compare button,
   the "closest today" link and the offers button still receive their own
   clicks. The one cost is that dragging to select text inside a card now
   drags the link instead — accepted, this is a card, not an article. */
.linkcard{position:relative;}
.linkcard .cardlink::after{content:"";position:absolute;inset:0;z-index:1;}
.linkcard a:not(.cardlink),
.linkcard button,
.linkcard input,
.linkcard label,
.linkcard select,
.linkcard summary{position:relative;z-index:2;}
/* The whole card reacts, not just the four words of the title. */
.linkcard:hover .cardlink{color:var(--brand);}

/* ---------- trainers ----------------------------------------------------- */
.coachcard{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  transition:border-color .14s,box-shadow .14s,transform .14s;
}
.coachcard:hover{border-color:var(--court-3);box-shadow:var(--shadow-hover-lg);transform:translateY(-2px);}
.coachcard > .photobox{border-radius:0;}
.coachcard .body{display:flex;flex-direction:column;gap:9px;padding:16px;flex:1;}
.coachcard .nm{font-family:var(--display);font-size:20px;line-height:1.15;font-weight:var(--display-w);letter-spacing:var(--display-ls);color:var(--ink);}
.coachcard .role{font-size:13px;color:var(--brand);font-weight:600;}
.coachcard .club{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);}
.coachcard .club i{font-size:15px;color:var(--ink-3);flex:none;}
.coachcard .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);}

/* A record is a list of checkable facts, so it is marked up as a list. */
.wins{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.wins li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:var(--ink-2);}
.wins li i{font-size:15px;color:var(--gold);flex:none;margin-top:1px;}
.wins.big li{font-size:15px;line-height:1.6;color:var(--ink);}
.wins.big li i{font-size:18px;}

.coachhead{display:flex;flex-wrap:wrap;align-items:center;gap:22px;}
.coachhead .shot{display:block;width:180px;flex:none;}
.coachhead .who{display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-width:220px;flex:1;}
.coachhead .role{font-size:15px;color:var(--brand);font-weight:600;}

.socials{display:inline-flex;align-items:center;gap:8px;}
.socials a{
  display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  background:var(--tint);color:var(--brand);font-size:17px;
  transition:background .12s,color .12s;
}
.socials a:hover{background:var(--brand);color:#FFFFFF;}

.factlist{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 0;font-size:13px;}
.factlist dt{color:var(--ink-3);}
.factlist dd{margin:0;color:var(--ink);}

/* The clip we host. Its box is sized before the file arrives so the review
   below it does not jump when the first frame decodes. */
.coachvideo{margin:0;display:flex;flex-direction:column;gap:8px;}
.coachvideo video{
  width:100%;max-height:420px;border-radius:var(--r-card);background:#0D3B12;display:block;
  border:1px solid var(--line);
}
.coachvideo.is-compact video{max-height:240px;}
.coachvideo figcaption{display:flex;flex-direction:column;gap:3px;}
.coachvideo .lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-2);}
.coachvideo .lbl i{font-size:15px;color:var(--brand);}
.coachvideo .cap{font-size:12px;line-height:1.5;color:var(--ink-3);}

.fullvideo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--tint-2);}
.fullvideo .lbl{font-size:13px;font-weight:600;color:var(--ink-2);}
.fullvideo .links{display:inline-flex;flex-wrap:wrap;gap:8px;}
.platform{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);font-size:12px;font-weight:600;
  transition:border-color .12s,color .12s,background .12s;
}
.platform i{font-size:16px;}
.platform:hover{border-color:var(--brand);color:var(--brand);background:var(--tint);}
/* Each platform keeps its own colour on hover — a reader recognises the mark
   faster than the word, and it makes the row read as four destinations rather
   than one control. */
.platform.is-youtube:hover{border-color:#FF0000;color:#B80000;background:rgba(255,0,0,.06);}
.platform.is-instagram:hover{border-color:#C13584;color:#8E2262;background:rgba(193,53,132,.06);}
.platform.is-facebook:hover{border-color:#1877F2;color:#0E4FA3;background:rgba(24,119,242,.06);}
.platform.is-tiktok:hover{border-color:#111111;color:#111111;background:rgba(0,0,0,.05);}

/* ---------- product / listing cards ------------------------------------ */
.pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:border-color .14s,box-shadow .14s,transform .14s;}
.pcard:hover{border-color:var(--court-3);box-shadow:var(--shadow-hover-lg);transform:translateY(-2px);}
/* selected-for-comparison state (§ compare engine) — a ring around the whole
   card plus a flag on the photo, so the state reads at a glance rather than
   only on the button down in the footer. */
.pcard.is-comparing{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset;}
.cmp-flag{
  position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;background:var(--brand);color:var(--mark);
  font-size:11px;font-weight:700;letter-spacing:.02em;
}
.cmp-flag i{font-size:13px;}
.pcard .shot{position:relative;height:200px;background:#EDF0EA;}
.pcard .shot .imgph{height:100%;border-radius:0;}
.pcard .body{display:flex;flex-direction:column;gap:9px;padding:16px;flex:1;}
.pcard .brand{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.pcard .name{font-family:var(--display);font-size:20px;line-height:1.15;font-weight:var(--display-w);letter-spacing:var(--display-ls);color:var(--ink);}
.pcard a.name:hover{color:var(--brand);}
.pcard .spec{font-family:var(--num);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.pcard .summary{font-size:13px;line-height:1.5;color:var(--ink-2);}
.pcard .tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line);}
.pcard .price{font-family:var(--num);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}

/* compact row card (latest products / cross-shopped) */
.rowcard{display:flex;align-items:center;gap:14px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);color:var(--ink);text-decoration:none;transition:border-color .14s,box-shadow .14s;}
.rowcard:hover{border-color:var(--court-3);box-shadow:var(--shadow-hover);color:var(--ink);}
.rowcard .thumb{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;}
.rowcard .thumb .imgph{height:100%;border-radius:10px;}
.rowcard .thumb .imgph i{font-size:20px;}
.rowcard .mid{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;}
.rowcard .nm{font-family:var(--display);font-size:19px;line-height:1.15;}
.rowcard .rt{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;text-align:right;}

/* category tiles */
.cattile{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;transition:border-color .14s,box-shadow .14s,transform .14s;}
.cattile:hover{border-color:var(--court-3);box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.cattile .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--brand);color:var(--mark);font-size:22px;}
.cattile .lab{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--ink);}
.cattile .note{font-size:13px;color:var(--ink-3);margin-top:6px;}

/* player cards */
.plcard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);text-align:center;text-decoration:none;transition:border-color .14s,transform .14s,box-shadow .14s;}
.plcard:hover{border-color:var(--court-3);transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.plcard .av{width:76px;height:76px;flex:none;}
.plcard .nm{font-family:var(--display);font-size:19px;line-height:1.15;color:var(--ink);}
.plcard .mt{font-size:12px;color:var(--ink-3);}
.plcard .gear{font-size:12px;color:var(--brand);font-weight:600;}

/* gear list (player detail / cards) */
.gearlist{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line);}
.gearlist .r{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.45;}
.gearlist .r .k{min-width:76px;flex:none;color:var(--ink-3);}
.gearlist .r .v{color:var(--ink);font-weight:500;}
.gearlist .r .v.pending{color:#8C978F;font-style:italic;font-weight:400;}
.cardnote{margin:10px 0 0;font-size:12px;line-height:1.55;color:var(--ink-2);padding:11px;background:var(--tint-2);border-radius:8px;}

/* ---------- articles: AI-summary tag and the sources box ---------------- */
.ai-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-3);}
.ai-tag i{font-size:12px;}
.srclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.srclist li{font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:2px;}
.srclist a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.srclist a:hover{color:var(--brand);}
.srclist .pub{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);}
.article-figures{display:flex;flex-direction:column;gap:20px;margin-top:28px;}
.article-figures figure{margin:0;}
.article-figures .imgph{height:auto;min-height:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
.article-figures img{width:100%;height:auto;display:block;}
.article-figures figcaption{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--ink-3);}

/* ---------- news / feed ------------------------------------------------- */
.feed{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;}
.feed .item{display:flex;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;}
.feed .item:last-child{border-bottom:0;}
.feed .item:hover{background:var(--tint-2);color:var(--ink);}
.feed .when{flex:none;width:64px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-family:var(--num);font-size:12px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.feed .when i{font-size:16px;color:var(--ink-3);}
.feed .main{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}
.feed .ttl{font-family:var(--display);font-size:19px;line-height:1.2;font-weight:var(--display-w);letter-spacing:var(--display-ls);color:var(--ink);text-wrap:pretty;}
.feed .bd{font-size:13px;line-height:1.6;color:var(--ink-2);}
.feed .thumb{flex:none;width:84px;height:84px;border-radius:10px;overflow:hidden;}

.newsblock{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;}
.newsblock .hd{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line);}
.newsblock .hd h2{font-size:32px;}
.newsblock .cols{display:grid;grid-template-columns:1.6fr .8fr;}
.newsblock .side{padding:22px 24px;background:#FAFBF8;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:16px;}
.newsblock .side .kv{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-2);}
.newsblock .side .kv b{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}
.newsblock .side .divide{padding-top:14px;border-top:1px solid var(--line);}
.newsblock .side .brief{font-size:14px;line-height:1.6;color:var(--ink-2);}

/* ---------- meters / criteria ------------------------------------------ */
.meter{height:6px;border-radius:3px;background:var(--tint-2);overflow:hidden;}
.meter > span{display:block;height:100%;background:var(--brand);border-radius:3px;}
.meter.thick{height:8px;border-radius:4px;background:#EDF0EA;}
.meter.thick > span{border-radius:4px;}
.meter-row{display:flex;flex-direction:column;gap:5px;}
.meter-row .lbl{display:flex;justify-content:space-between;gap:10px;font-size:12px;}
.meter-row .lbl span:first-child{color:var(--ink-2);}
.meter-row .lbl b{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}

.critcard{display:flex;flex-direction:column;gap:9px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);}
.critcard .top{display:flex;align-items:baseline;gap:10px;}
.critcard .top .n{font-size:14px;font-weight:600;color:var(--ink);}
.critcard .top .v{font-family:var(--num);font-size:20px;font-weight:700;margin-left:auto;font-variant-numeric:tabular-nums;}
.critcard .cmp{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:12px;}
.critcard .cmp .tier{font-weight:600;color:var(--ink);}
.critcard .cmp .delta{font-family:var(--num);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.critcard .note{font-size:12px;line-height:1.5;color:var(--ink-3);}
.critcard .note.src{padding-top:8px;border-top:1px dashed var(--line);font-family:var(--num);font-size:11px;color:var(--ink-3);}
.critcard .note.src i{color:var(--ok);margin-right:4px;}

/* ---------- usually used together ------------------------------------- */
.companion-group{margin-top:18px;}
.companion-group + .companion-group{margin-top:26px;}

/* ---------- spec list --------------------------------------------------- */
.speclist{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
.speclist .r{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--line);}
.speclist .r:last-child{border-bottom:0;}
.speclist .r .k{font-size:13px;color:var(--ink-2);}
.speclist .r .v{font-family:var(--num);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}

.bullets{display:flex;flex-direction:column;gap:10px;}
.bullets .b{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--ink);}
.bullets .b i{font-size:17px;flex:none;margin-top:1px;}
.bullets .b i.good{color:var(--brand);}
.bullets .b i.bad{color:var(--clay);}

/* ---------- steps (methodology) ---------------------------------------- */
.steps{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;}
.steps .s{display:flex;gap:20px;padding:22px 24px;background:var(--card);}
.steps .s:hover{background:var(--tint-2);}
.steps .s .n{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;width:52px;}
.steps .s .n .idx{font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink-3);}
.steps .s .n .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--tint);color:var(--brand);font-size:19px;}
.steps .s .tx{display:flex;flex-direction:column;gap:8px;max-width:760px;}
.steps .s .tx h3{font-size:21px;line-height:1.2;}
.steps .s .tx p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-2);text-wrap:pretty;}

/* criteria rows (how we score) */
.critrows{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;}
.critrows .r{display:flex;flex-wrap:wrap;gap:18px;padding:20px 24px;background:var(--card);align-items:baseline;}
.critrows .r .hd{flex:none;width:190px;display:flex;flex-direction:column;gap:5px;}
.critrows .r .hd .n{font-family:var(--display);font-size:19px;line-height:1.2;font-weight:var(--display-w);letter-spacing:var(--display-ls);}
.critrows .r .hd .w{font-family:var(--num);font-size:12px;font-weight:700;color:var(--brand);}
.critrows .r .what{flex:1;min-width:240px;font-size:14px;line-height:1.7;color:var(--ink-2);text-wrap:pretty;}
.critrows .r .how{flex:none;width:220px;font-size:12px;line-height:1.55;color:var(--ink-3);}

/* ---------- tables ------------------------------------------------------ */
.tablewrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:auto;}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;}
table.cmp th,table.cmp td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 16px;text-align:left;vertical-align:top;}
table.cmp th:last-child,table.cmp td:last-child{border-right:0;}
table.cmp thead th{background:var(--card);border-bottom:1px solid var(--line-2);padding:16px;}
table.cmp thead th.rowhead{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;vertical-align:bottom;width:200px;}
table.cmp tbody th{font-size:13px;font-weight:500;color:var(--ink-2);width:200px;background:var(--card);}
table.cmp tbody tr:nth-child(even) td,table.cmp tbody tr:nth-child(even) th{background:#FCFDFA;}
table.cmp td{font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink-2);}
table.cmp td.best{color:var(--ink);font-weight:600;}
table.cmp td.best .mark{display:inline-block;width:6px;height:16px;border-radius:2px;background:var(--ball);margin-right:7px;vertical-align:-3px;}
table.cmp tfoot td,table.cmp tfoot th{background:var(--tint-2);vertical-align:top;}
.cmp-colhead{display:flex;flex-direction:column;gap:10px;position:relative;min-width:180px;}
.cmp-colhead .rm{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);color:var(--ink-3);}
.cmp-colhead .rm:hover{border-color:#C9756A;color:var(--danger);}
.cmp-colhead .nm{font-family:var(--display);font-size:19px;line-height:1.15;color:var(--ink);}

/* The design's four-column grid, expressed on a table: fixed widths from
   services.column_widths, so three picks get three equal columns and the AI
   verdict gets the wider one at the end. `fixed` is what makes the colgroup
   authoritative — on `auto` the browser sizes by content instead. */
table.cmp{table-layout:fixed;}
table.cmp .verdictcol,table.cmp thead th.verdictcol{background:var(--tint-2);}
table.cmp thead th.verdictcol .nm{font-family:var(--display);line-height:1.15;color:var(--ink);}
/* The zebra striping (tbody tr:nth-child(even) td) is more specific than a
   plain .cmp-comment rule would be, so these carry tbody tr to match it. */
table.cmp tbody tr.cmp-comment th,table.cmp tbody tr.cmp-comment td{background:var(--tint-2);}
table.cmp .cmp-comment .bullets{display:flex;flex-direction:column;gap:10px;}
table.cmp .cmp-comment .b{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink);}
table.cmp .cmp-comment .b i{flex:none;margin-top:2px;font-size:14px;}
table.cmp .cmp-comment .b i.good{color:var(--ok);}
table.cmp .cmp-comment .b i.bad{color:var(--danger);}

/* The green recommendation cell that closes the AI-comment row. */
table.cmp tbody tr td.verdictcell{
  background:var(--brand);color:var(--on-brand);vertical-align:top;
}
table.cmp tbody tr td.verdictcell .eyebrow{display:block;margin-bottom:8px;color:var(--mark);}
table.cmp tbody tr td.verdictcell .nm{
  display:block;font-family:var(--display);font-size:20px;line-height:1.15;
  color:#fff;margin-bottom:10px;
}
table.cmp tbody tr td.verdictcell .why{display:block;font-size:13px;line-height:1.55;color:#E8F2E4;}
table.cmp tbody tr td.verdictcell .alt{display:block;margin-top:10px;font-size:12px;line-height:1.5;color:#BBD3B6;}

table.cmp .buycell{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
table.cmp .buycell .btn{width:100%;justify-content:center;}
table.cmp .buycell .meta{margin:0;font-size:11px;line-height:1.45;}
.cmp-colhead .brand{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.cmp-colhead .shot{height:120px;border-radius:var(--r-btn);overflow:hidden;}

table.plain{border-collapse:collapse;width:100%;}
table.plain th,table.plain td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:top;}
table.plain tr:last-child th,table.plain tr:last-child td{border-bottom:0;}
table.plain th{font-weight:500;color:var(--ink-2);font-size:13px;white-space:nowrap;}

/* ---------- tournaments ------------------------------------------------- */
.tcard{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-card);background:var(--card);border:1px solid var(--line);border-top:8px solid var(--hard);transition:border-color .14s,box-shadow .14s,transform .14s;}
.tcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.tcard.slam{background:linear-gradient(180deg,rgba(198,160,58,.16),rgba(198,160,58,.05));border-color:rgba(198,160,58,.45);}
.tcard .lvl{display:inline-block;padding:3px 8px;border-radius:var(--r-ctl);font-size:11px;font-weight:600;letter-spacing:.04em;background:var(--tint);color:var(--brand);border:1px solid transparent;}
.tcard.slam .lvl{background:rgba(198,160,58,.22);color:#7A5A12;border-color:rgba(198,160,58,.5);}
.tcard .nm{font-family:var(--display);font-size:21px;line-height:1.15;color:var(--ink);}
.tcard a.nm:hover{color:var(--brand);}
.tcard .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2);}
.surf{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);}
.tcard .foot .gear-link{font-size:12px;color:var(--brand);font-weight:600;white-space:nowrap;}
.tcard .foot .gear-link:hover{text-decoration:underline;}
.dot{width:8px;height:8px;border-radius:2px;display:inline-block;background:var(--hard);}
.s-hard{background:var(--hard);} .s-clay{background:var(--clay);} .s-grass{background:var(--grass);} .s-carpet{background:var(--ink-3);}
.tcard.t-hard{border-top-color:var(--hard);} .tcard.t-clay{border-top-color:var(--clay);}
.tcard.t-grass{border-top-color:var(--grass);} .tcard.t-carpet{border-top-color:var(--ink-3);}
.legend{display:flex;gap:16px;margin-left:auto;font-size:12px;color:var(--ink-2);flex-wrap:wrap;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;}
.month-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;}
.month-head h2{font-size:32px;}

/* ---------- forms ------------------------------------------------------- */
.ta-form{display:flex;flex-direction:column;gap:18px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);}
.field{display:flex;flex-direction:column;gap:7px;}
.field > label,.field .lab{font-size:12px;font-weight:600;color:var(--ink-2);}
.ta-form input[type=text],.ta-form input[type=email],.ta-form input[type=url],.ta-form input[type=number],
.ta-form input[type=search],.ta-form input[type=date],.ta-form select,.ta-form textarea,
.inp,select.inp{
  width:100%;padding:0 12px;height:42px;border:1px solid var(--line-2);border-radius:var(--r-btn);
  background:var(--paper);color:var(--ink);font-size:14px;font-family:inherit;
}
.ta-form textarea,textarea.inp{height:auto;padding:12px;line-height:1.6;resize:vertical;}
.ta-form input:focus,.ta-form select:focus,.ta-form textarea:focus,.inp:focus{border-color:var(--brand);}
.ta-form ul.errorlist{margin:0;padding:0;list-style:none;color:#B3261E;font-size:12px;}
.ta-form .helptext{font-size:12px;color:var(--ink-3);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}

/* selectable option buttons (calculator / advisor) */
.optbtn{
  display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;
  border:1px solid var(--line-2);border-radius:var(--r-card);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:14px;
}
.optbtn:hover{border-color:var(--brand);}
.optbtn.is-active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset;}
.optbtn .ic{font-size:20px;color:var(--brand);flex:none;}
.optbtn .tx{display:flex;flex-direction:column;gap:4px;min-width:0;}
.optbtn .tx .n{font-size:14px;font-weight:600;color:var(--ink);}
.optbtn .tx .d{font-size:12px;line-height:1.5;color:var(--ink-2);}
/* The tick marks the chosen answer, so it only shows on that one. It used to
   be painted on every card at once, which read as "all five are selected". */
.optbtn .chk{margin-left:auto;flex:none;font-size:18px;color:var(--brand);opacity:0;}
.optbtn.is-active .chk{opacity:1;}

/* The parallel modifier ("arm-sensitive"), ticked ALONGSIDE a style rather
   than instead of one. Pink and translucent so it cannot be mistaken for a
   fifth green answer button: a different colour for a different kind of
   control, not decoration. */
.modifier-set{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.optbtn-care{
  cursor:pointer;
  border-color:var(--care-line);background:var(--care-tint);
}
.optbtn-care:hover{border-color:var(--care);background:var(--care-tint-2);}
.optbtn-care.is-active{
  border-color:var(--care);background:var(--care-tint-2);box-shadow:0 0 0 1px var(--care) inset;
}
.optbtn-care .ic,
.optbtn-care .chk{color:var(--care);}
.optbtn-care .tx .n{color:var(--care-ink);}
.optbtn-care:focus-within{outline:2px solid var(--care);outline-offset:2px;}
.modifier-note{
  margin:0;padding:0 2px;font-size:12px;line-height:1.6;color:var(--ink-2);
}
.modifier-note b{color:var(--care-ink);}

/* The same pink, used to flag what the setting changed: once on the dark
   result panel, once on the light string panel. */
.care-flag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  background:rgba(233,110,163,.22);color:#FFD3E5;font-size:12px;line-height:1.4;
  border:1px solid rgba(255,143,191,.62);
}
.care-flag i{font-size:14px;color:#FF9CC6;flex:none;}
.care-flag-light{background:var(--care-tint);color:var(--care-ink);border-color:var(--care-line);}
.care-flag-light i{color:var(--care);}

/* string cards the recommendation engine returns (tension calculator) */
.stringpick{display:flex;flex-direction:column;gap:12px;}
.stringpick.is-first{border-color:var(--brand);}
.stringpick .b{display:flex;gap:8px;align-items:flex-start;color:var(--ink-2);}
.stringpick .b i{flex:none;margin-top:3px;}

/* selectable racquet buttons (tension calculator "your racquet" panel) */
.racquetopt{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;text-align:left;
  border:1px solid var(--line-2);border-radius:var(--r-card);background:var(--card);color:var(--ink);
  font-family:inherit;
}
.racquetopt:hover{border-color:var(--brand);}
.racquetopt.is-active{border-color:var(--brand);background:var(--tint);}
.racquetopt .chk{margin-left:auto;flex:none;font-size:19px;color:var(--brand);opacity:0;}
.racquetopt.is-active .chk{opacity:1;}

/* ---------- messages ---------------------------------------------------- */
.msgs{max-width:1440px;margin:16px auto 0;padding:0 var(--gutter);display:flex;flex-direction:column;gap:8px;}
.msg{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--card);font-size:14px;color:var(--ink);}
.msg.success{background:var(--tint);border-color:#CFE3BE;color:var(--ok);}
.msg.error{background:#FDF1EF;border-color:#F0D2CD;color:#B3261E;}
.msg.warning{background:#FDF6E9;border-color:#EFE0BF;color:#7A5A12;}
.msg .x{margin-left:auto;background:transparent;border:0;color:inherit;font-size:16px;line-height:1;opacity:.6;}
.msg .x:hover{opacity:1;}

.notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-card);font-size:13px;line-height:1.55;}
.notice i{font-size:16px;flex:none;margin-top:1px;}
.notice.ok{background:var(--tint);color:var(--ok);}
.notice.wait{background:#F1F2EE;color:var(--warn);border:1px dashed var(--line-2);}
.notice.info{background:var(--tint-2);border:1px solid var(--line);color:var(--ink-2);}

/* ---------- empty states ----------------------------------------------- */
.empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:44px 32px;
  background:var(--card);border:1px dashed var(--line-2);border-radius:var(--r-card);
}
.empty i.big{font-size:26px;color:var(--ink-3);}
.empty h3{font-family:var(--display);font-size:22px;font-weight:var(--display-w);letter-spacing:var(--display-ls);}
.empty p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:560px;}
.empty.center{align-items:center;text-align:center;}

/* ---------- pagination -------------------------------------------------- */
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:28px;}
.pager .cur{font-family:var(--num);font-size:13px;color:var(--ink-3);}

/* ---------- article ----------------------------------------------------- */
.article-body{display:flex;flex-direction:column;gap:18px;max-width:660px;}
.article-body p{margin:0;font-size:15px;line-height:1.7;color:var(--ink);text-wrap:pretty;}
.pullquote{margin-top:32px;padding:22px 24px;border-left:4px solid var(--brand);background:var(--tint-2);border-radius:0 var(--r-card) var(--r-card) 0;max-width:660px;}
.pullquote p{margin:0;font-family:var(--display);font-size:19px;line-height:1.5;color:var(--ink);text-wrap:pretty;}

/* side rail cards */
.rail{display:flex;flex-direction:column;gap:var(--gap-sm);}
.rail .box{padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);display:flex;flex-direction:column;gap:12px;}
.rail .box.tinted{background:var(--tint-2);}
.rail .box .link-item{display:flex;flex-direction:column;gap:5px;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;}
.rail .box .link-item:last-of-type{border-bottom:0;padding-bottom:0;}
.rail .box .link-item:hover{opacity:.72;}
.rail .box .link-item .d{font-family:var(--num);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.rail .box .link-item .t{font-size:13px;line-height:1.45;font-weight:500;}
.rail .box .kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.rail .box .kv:last-child{border-bottom:0;padding-bottom:0;}
.rail .box .kv span{color:var(--ink-2);}
.rail .box .kv b{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}

/* ---------- modal ------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(9,26,20,.62);}
.modal[hidden]{display:none;}
.modal .box{width:100%;max-width:460px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-overlay);}
.modal .box .hd{display:flex;align-items:flex-start;gap:12px;}
.modal .box h3{font-family:var(--display);font-size:26px;line-height:1.1;font-weight:500;color:var(--ink);}
.modal .close{display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid var(--line);border-radius:var(--r-btn);background:transparent;color:var(--ink-2);}
.modal .close:hover{background:var(--tint-2);}

/* The offers dialog carries table-shaped rows, so it gets a wider box and the
   row stacks instead of squeezing the shop name into three lines. */
#offers-modal .box{max-width:600px;}
#offers-modal .offer{flex-wrap:wrap;align-items:center;row-gap:10px;padding:14px 16px;}
#offers-modal .offer .shop{flex:1 1 100%;}
#offers-modal .offer .pr{flex:0 0 auto;align-items:flex-start;text-align:left;}
#offers-modal .offer .btn{margin-left:auto;}
#offers-modal .offer .partner-tag{margin-left:0;margin-top:4px;}
#offers-modal .offer .shop .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}

/* ---------- cookie notice ------------------------------------------------ */
.cookie-notice{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,32,26,.08);}
.cookie-notice[hidden]{display:none;}
.cookie-notice a{font-weight:600;}
.cookie-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 22px;}
.cookie-text{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2);flex:1;min-width:240px;}
.cookie-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap;}
.consent-state{font-size:13px;color:var(--ink-2);}

/* ---------- footer ------------------------------------------------------ */
.ta-footer{background:var(--tint-2);color:var(--on-court-2);margin-top:56px;border-top:1px solid var(--line);}
.ta-footer-inner{max-width:1440px;margin:0 auto;padding:48px var(--gutter);}
.ta-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:var(--gap);}
@media (max-width:1180px){ .ta-footer .cols{grid-template-columns:repeat(3,minmax(0,1fr));} }
.ta-footer h4{color:var(--on-court);font-family:var(--body);font-weight:600;font-size:13px;margin:0 0 6px;letter-spacing:0;}
.ta-footer ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:2;}
.ta-footer a{color:var(--on-court-2);}
.ta-footer a:hover{color:var(--brand);}
.ta-footer .blurb{font-size:13px;line-height:1.6;max-width:300px;}
.ta-footer .sub{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--on-court-3);}
.ta-footer .sub a{color:var(--brand);}
.ta-footer .subform{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.ta-footer .subform input{
  height:38px;padding:0 12px;min-width:190px;flex:1;border:1px solid var(--line-2);border-radius:var(--r-btn);
  background:var(--card);color:var(--on-court);font-family:inherit;font-size:13px;
}
.ta-footer .subform input::placeholder{color:var(--on-court-3);}
.ta-footer .subform input:focus{border-color:var(--brand);}

/* ---------- shop offers -------------------------------------------------- */
.offerlist{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
.offer{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);}
.offer:last-child{border-bottom:0;}
.offer:hover{background:var(--tint-2);}
.offer .shop{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.offer .shop .nm{font-size:14px;font-weight:600;color:var(--ink);}
.offer .pr{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;text-align:right;}
.offer .pr .v{font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}

/* A partner shop is the row that pays the site, and the owner wants it to
   carry the eye — iPhone orange (--new), the same accent the wordmark uses.
   The "partner" label stays on the row: the colour draws attention to it, it
   does not replace the disclosure. */
/* The fallback under "Where to buy" when we hold no listing for this exact
   model: the two shops the site links to, sending the reader to the shop
   itself. No price and no stock is stated, because none was checked. */
.shoprow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap-sm);}
.shopcard{
  display:flex;flex-direction:column;gap:5px;padding:15px 17px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  transition:border-color .14s,box-shadow .14s,transform .14s;
}
.shopcard:hover{border-color:var(--court-3);box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.shopcard .nm{font-family:var(--display);font-size:18px;line-height:1.2;color:var(--ink);}
.shopcard .meta{font-size:12px;color:var(--ink-3);}
.shopcard .go{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:13px;font-weight:600;color:var(--brand);}

.offer.is-partner{background:rgba(255,149,0,.06);border-left:3px solid var(--new);padding-left:15px;}
.offer.is-partner:hover{background:rgba(255,149,0,.11);}
.offer.is-partner .shop .nm{color:var(--ink);}
.offer .partner-tag{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 7px;border-radius:999px;
  background:var(--new);color:#3A2200;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;}
.offer.is-partner .btn-primary{background:var(--new);border-color:var(--new);color:#3A2200;}
.offer.is-partner .btn-primary:hover{background:#E88600;border-color:#E88600;color:#3A2200;}
.offer.is-partner .btn-outline{border-color:var(--new);color:#8A5200;}
.offer.is-partner .btn-outline:hover{background:rgba(255,149,0,.12);color:#8A5200;}

/* ---------- "where it wins and loses": verdict + criterion picker -------- */
.verdict-pair{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--tint-2);
  border:1px solid var(--line);border-radius:var(--r-card);}
.verdict-pair .v-row{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;line-height:1.55;}
.verdict-pair .k{flex:none;min-width:96px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--brand);padding-top:2px;}
.verdict-pair .k.warn{color:#8A5200;}
.verdict-pair .t{flex:1;min-width:180px;color:var(--ink);}
.criterion-picker{display:flex;flex-direction:column;gap:10px;}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.chip-btn{height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:border-color .14s,color .14s,background .14s;}
.chip-btn:hover{border-color:var(--brand);color:var(--brand);}
.chip-btn.is-active{background:var(--brand);border-color:var(--brand);color:#fff;}
.criterion-panel{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);}
.criterion-panel[hidden]{display:none;}
.criterion-panel + .criterion-panel{margin-top:8px;}
.criterion-panel .hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;}
.criterion-panel .hd .n{font-size:14px;font-weight:600;color:var(--ink);}
.criterion-panel .hd .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;}
.criterion-panel .hd .rank{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.criterion-panel .verdict{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);}
.criterion-panel .src{margin:6px 0 0;font-size:11px;color:var(--ink-3);}

/* ---------- advisor: who the racquet is for ----------------------------- */
.profile-picker{display:flex;flex-direction:column;gap:12px;}
.profile-picker .pfield{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.profile-picker .pfield[hidden]{display:none;}
.profile-picker .lbl{flex:0 0 74px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;}
.profile-picker .pill-row{flex:1;min-width:220px;}

/* ---------- brand / media kit -------------------------------------------- */
.brandsec{display:flex;flex-direction:column;gap:var(--gap);}
.brandsec .hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.brandsec .hd .ltr{font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-3);}
.brandsec .hd h2{font-size:32px;}
.brandsec .hd .note{font-size:12px;color:var(--ink-3);}

.lockups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-sm);}
.lockup{display:flex;flex-direction:column;gap:18px;padding:26px;border-radius:var(--r-panel);border:1px solid var(--line);background:var(--card);}
.lockup.on-brand{background:var(--brand);border-color:var(--brand);}
.lockup.on-paper{background:var(--paper);}
.lockup .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.lockup.on-brand .lbl{color:#8FAE92;}
.lockup .cap{font-size:12px;line-height:1.55;color:var(--ink-2);margin-top:auto;}
.lockup.on-brand .cap{color:#C3D8C4;}

.wm-lg{display:flex;align-items:baseline;gap:2px;font-family:var(--display);font-size:44px;line-height:1;letter-spacing:-.015em;}
.wm-lg .a{color:#F1F7EF;} .wm-lg .b{color:var(--mark);} .wm-lg .c{color:#8FAE92;font-size:22px;}
.wm-stack{display:flex;flex-direction:column;gap:8px;}
.wm-stack .type{display:flex;align-items:baseline;gap:2px;font-family:var(--display);font-size:34px;line-height:1;color:var(--ink);}
.wm-stack .type .b{color:var(--court-3);}
.wm-stack .rule{height:2px;width:120px;background:var(--mark);}
.wm-stack .slog{font-family:var(--num);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);}

.monos{display:flex;align-items:center;gap:16px;}
.mono{position:relative;display:grid;place-items:center;background:var(--brand);overflow:hidden;flex:none;}
.mono span.bar{position:absolute;left:0;right:0;bottom:0;background:var(--mark);}
.mono span.tx{position:relative;font-family:var(--display);color:var(--mark);line-height:1;}
.mono.xl{width:76px;height:76px;border-radius:18px;}
.mono.xl span.bar{height:7px;}
.mono.xl span.tx{font-size:34px;color:#F1F7EF;letter-spacing:-.02em;margin-bottom:6px;}
.mono.md{width:40px;height:40px;border-radius:10px;}
.mono.md span.tx{font-size:18px;}
.mono.sm{width:24px;height:24px;border-radius:6px;}
.mono.sm span.tx{font-size:11px;}

.slogans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-sm);}
.slogan{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);transition:border-color .14s;}
.slogan:hover{border-color:var(--court-3);}
.slogan .line{font-family:var(--display);font-size:26px;line-height:1.15;color:var(--ink);text-wrap:balance;}
.slogan .note{font-size:13px;line-height:1.5;color:var(--ink-2);}
.slogan .use{font-family:var(--num);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:auto;}

.iconset{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap-sm);padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);}
.icon-tile{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.icon-tile .t{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--tint);color:var(--brand);font-size:22px;}
.icon-tile .t .ico-racquet{font-size:22px;}
.icon-tile .l{font-size:11px;color:var(--ink-2);}

.banners{display:flex;flex-direction:column;gap:var(--gap-sm);}
.bnr-lead{display:flex;align-items:center;justify-content:space-between;gap:24px;height:200px;padding:0 28px;background:var(--brand);border-radius:var(--r-card);overflow:hidden;}
.bnr-lead .eyebrow{font-family:var(--num);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mark);}
.bnr-lead .hl{font-family:var(--display);font-size:34px;line-height:1.05;color:#F1F7EF;max-width:520px;text-wrap:balance;}
.bnr-lead .cta{display:flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r-btn);background:var(--mark);color:var(--brand);font-size:14px;font-weight:700;flex:none;}
.bnr-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-sm);}
.bnr-ball{display:flex;flex-direction:column;justify-content:space-between;gap:14px;height:250px;padding:22px;background:var(--mark);border-radius:var(--r-card);}
.bnr-ball .eyebrow{font-family:var(--num);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);}
.bnr-ball .hl{font-family:var(--display);font-size:30px;line-height:1.05;color:var(--brand);text-wrap:balance;}
.bnr-ball .cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:38px;padding:0 14px;border-radius:var(--r-btn);background:var(--brand);color:var(--mark);font-size:13px;font-weight:600;}
.bnr-deep{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;height:250px;padding:22px;background:var(--brand-2);border-radius:var(--r-card);}
.bnr-deep .type{display:flex;align-items:baseline;gap:2px;font-family:var(--display);font-size:26px;color:#F1F7EF;}
.bnr-deep .type .b{color:var(--mark);}
.bnr-deep .tx{font-size:14px;line-height:1.5;color:#C3D8C4;}
.bnr-deep .pills{display:flex;gap:8px;flex-wrap:wrap;}
.bnr-deep .pills span{padding:4px 9px;border:1px solid #8FAE92;border-radius:999px;font-size:11px;color:#C3D8C4;}

@media (max-width:1180px){
  .lockups{grid-template-columns:1fr;}
  .slogans{grid-template-columns:repeat(2,minmax(0,1fr));}
  .iconset{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media (max-width:640px){
  .offer{flex-wrap:wrap;}
  .offer .pr{align-items:flex-start;text-align:left;}
  .slogans{grid-template-columns:1fr;}
  .iconset{grid-template-columns:repeat(4,minmax(0,1fr));}
  .bnr-lead{height:auto;flex-direction:column;align-items:flex-start;gap:16px;padding:22px;}
  .bnr-lead .hl{font-size:26px;}
  .bnr-pair{grid-template-columns:1fr;}
}

/* ---------- utilities --------------------------------------------------- */
.mt0{margin-top:0;} .mb0{margin-bottom:0;}
.mb8{margin-bottom:8px;} .mb14{margin-bottom:14px;} .mb18{margin-bottom:18px;}
.mb26{margin-bottom:26px;} .mb36{margin-bottom:36px;}
.mt26{margin-top:26px;}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.row-tight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.push{margin-left:auto;}
.divider{height:1px;background:var(--line);margin:26px 0;}
.nowrap{white-space:nowrap;}
.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;}

/* ==========================================================================
   Responsive — the prototype ships a 1440 desktop and a 390 mobile frame;
   this is one fluid implementation between them.
   ========================================================================== */
/* Five to a row is a 1440 layout. Below that the cards step down rather than
   squeezing: four, then three, then two, then one. */
@media (max-width:1439px){ .g5{grid-template-columns:repeat(4,minmax(0,1fr));} }

@media (max-width:1180px){
  :root{--gutter:32px;--gap:32px;}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hero h1{font-size:52px;}
  .hero-inner{padding:48px var(--gutter) 40px;}
  .split{grid-template-columns:1.4fr 1fr;}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .newsblock .cols{grid-template-columns:1fr;}
  .newsblock .side{border-left:0;border-top:1px solid var(--line);}
  .critrows .r .how{width:100%;}
}

@media (max-width:980px){
  .g5{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* The mobile header grows when the nav opens, and a sticky bar under a
     header of unknown height covers content. Below this width the picker
     scrolls with the page instead. */
  .pickbar{position:static;margin-left:0;margin-right:0;padding-left:0;padding-right:0;}
  .pickbar .lbl{flex-basis:100%;}
  .ta-nav-inner{padding:10px 20px;flex-wrap:wrap;}
  .nav-toggle{display:grid;}
  .ta-links{
    display:none;order:9;width:100%;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px 0 12px;border-top:1px solid var(--court-3);margin-top:8px;
  }
  .ta-links.open{display:flex;}
  .ta-links a,.ta-links .navbtn{padding:11px 8px;font-size:15px;text-align:left;}
  .ta-sep{display:none;}
  .ta-links .btn-compare{align-self:flex-start;margin:8px 0;}
  .btn-compare-m{display:inline-flex;}
  .ta-trust-inner{gap:12px;padding:10px 20px;}
  .ta-trust .item{font-size:11px;}
  .ta-search{width:100%;margin-left:0;}
  .search-pop{width:100%;max-width:none;}
  .split,.split-side,.split-calc{grid-template-columns:1fr;}
  .hero-inner{grid-template-columns:1fr;}
  .hero-art{height:220px;}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ta-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .critrows .r .hd{width:100%;}
}

@media (max-width:640px){
  :root{--gutter:20px;--gap:24px;--gap-sm:14px;}
  body{font-size:14px;}
  .section{padding:28px 0;}
  .h1{font-size:30px;}
  .hero h1{font-size:38px;}
  .h2,.sec-head h2,.newsblock .hd h2,.month-head h2{font-size:24px;}
  .lead{font-size:15px;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  /* Player cards stay two to a row on a phone. One per row turned the page
     into a column of tall cards you had to scroll past to reach the next
     name; two lets a thumb-scroll cover a whole group. The card is squeezed
     to suit — shorter photo, smaller type, the long career note dropped — so
     two of them still fit a 360px screen without a horizontal scrollbar. */
  .g5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .g5 .pcard .shot{height:118px;}
  .g5 .pcard .body{padding:10px;gap:6px;}
  .g5 .pcard .name{font-size:14px;}
  .g5 .pcard .eyebrow{font-size:9px;letter-spacing:.06em;}
  .g5 .pcard .spec{font-size:10px;}
  .g5 .pcard .badge{font-size:9px;padding:2px 6px;}
  .g5 .gearlist .r{font-size:10px;gap:4px;}
  .g5 .gearlist .r .k{min-width:44px;}
  .g5 .cardnote{display:none;}
  .g5 .pcard .btn-sm{font-size:10px;padding:0 8px;}
  .field-row{grid-template-columns:1fr;}
  .ta-footer .cols{grid-template-columns:1fr;}
  .promo{flex-direction:column;align-items:flex-start;}
  .hero-stats{gap:22px;margin-top:28px;}
  .steps .s{flex-direction:column;gap:12px;}
  .feed .item{flex-direction:column;gap:10px;}
  .feed .when{flex-direction:row;align-items:center;gap:10px;width:auto;}
  .pcard .shot{height:190px;}
  .empty{padding:28px 20px;}
  .newsblock .hd{padding:16px;}
}

@media print{
  .ta-header,.ta-footer,.ad-slot,.modal,.cookie-notice{display:none !important;}
  body{background:#fff;}
}

/* ---------- advisor result row ------------------------------------------ */
.advisor-row{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gap-sm);align-items:start;}
@media (max-width:980px){ .advisor-row{grid-template-columns:1fr;} }
.racquetlist{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;padding-right:4px;}

/* ---------- catalogue filter sidebar ------------------------------------- */
.filter-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:130px;}
.filter-side .fgroup{display:flex;flex-direction:column;gap:10px;}
.filter-side .fgroup .btn{align-self:flex-start;}
.fopt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer;}
.fopt:hover{color:var(--brand);}
/* Visually hidden but still focusable and still in the tab order — a
   zero-size input is skipped by some browsers and assistive tech. */
.fopt input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.fopt .box{
  width:16px;height:16px;flex:none;border:1px solid var(--line-2);border-radius:4px;background:var(--card);
  display:grid;place-items:center;transition:background .12s,border-color .12s;
}
.fopt .box::after{
  content:"";width:8px;height:8px;border-radius:2px;background:var(--mark);transform:scale(0);transition:transform .12s;
}
.fopt input:checked + .box{background:var(--brand);border-color:var(--brand);}
.fopt input:checked + .box::after{transform:scale(1);}
.fopt input:focus-visible + .box{outline:2px solid var(--brand);outline-offset:1px;}
@media (max-width:980px){ .filter-side{position:static;} }
/* The design paints a criterion bar in brand green only from 8.6 up; below
   that it stays muted, so a weak score cannot read as a strong one. */
.critcard .meter > span{background:var(--line-2);}
.critcard .meter.is-strong > span{background:var(--brand);}