/* ==========================================================================
   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);

  /* 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:121px;
}

*,*::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;}

.ad-slot{border:1px dashed var(--line-2);border-radius:var(--r-card);background:#FAFBF8;display:grid;place-items:center;color:var(--ink-3);}
.ad-slot .in{font-size:12px;text-align:center;padding:12px;}

/* ---------- 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.4fr 1fr 1fr 1fr;gap:var(--gap);}
.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. */
.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,.g5{grid-template-columns:1fr;}
  .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);}