/* MatchCaller marketing site - "the courtside call".
   Dark court-board aesthetic: the app calls the score out loud, so the site is
   framed like a scoreboard. Coral + sky-blue are the two teams; teal is the
   action; deep court-navy is the floor. Dark-first → AA contrast everywhere. */

:root{
  --court:#0b1018;        /* page floor */
  --panel:#121b2c;        /* cards / raised surfaces */
  --panel-2:#0e1726;      /* alternate band */
  --line:rgba(133,183,235,.16);   /* hairline, blue-tinted */
  --line-soft:rgba(133,183,235,.10);
  --ink:#eef2f8;          /* primary text - ~15:1 on court */
  --muted:#9fb0c8;        /* secondary text - ~7:1 on court */
  --faint:#6f7f99;        /* tertiary / fine print - ~4.7:1 */
  --coral:#f0997b;
  --coral-deep:#e07d5c;
  --blue:#85b7eb;
  --teal:#2ec4a0;
  --teal-deep:#27ad8d;
  --on-teal:#04241c;
  --on-coral:#2c1206;
  --radius:18px;
  --radius-sm:12px;
  --maxw:1080px;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);color:var(--ink);background:var(--court);
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:17px;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
/* Content pages (gear, privacy, beta) used a 730px container while the rest
   of the site uses --maxw 1080px, so they read as a narrower, different site.
   The container now MATCHES; long-form running text keeps a readable measure
   of its own instead, so the privacy policy does not become 1080px-wide
   paragraphs. */
.prose{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.prose > p,.prose > ul,.prose > ol,.prose > .sub{max-width:74ch;}

/* ── Type ──────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.06;}
.eyebrow{
  font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);display:inline-block;
}

/* coral→blue "two teams" divider, the recurring structural device */
.courtline{height:3px;width:64px;border-radius:3px;
  background:linear-gradient(90deg,var(--coral) 0 50%,var(--blue) 50% 100%);}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;
  background:rgba(11,16,24,.82);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);
  font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);}
.brand img{width:31px;height:31px;border-radius:9px;}
.brand .m{color:var(--coral);} .brand .c{color:var(--blue);}
.navlinks{display:flex;gap:28px;align-items:center;margin-left:auto;}
.nav .navcta{margin-inline-start:10px;}
.navlinks a:not(.navcta){color:var(--muted);font-weight:600;font-size:15px;position:relative;}
.navlinks a:not(.navcta):hover{color:var(--ink);}
.navlinks a[aria-current="page"]{color:var(--ink);}
.navlinks a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:2px;border-radius:2px;background:var(--coral);}
.navcta{background:var(--teal);color:var(--on-teal);font-weight:700;font-size:14px;
  padding:9px 17px;border-radius:10px;transition:transform .15s ease,background .15s ease;}
.navcta:hover{transform:translateY(-1px);background:var(--teal-deep);}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.play{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#0a0f1c;
  font-weight:700;padding:13px 22px;border-radius:13px;transition:transform .15s ease,box-shadow .2s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.35);}
.play:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.45);}
.play small{display:block;font-size:11px;color:#5a6473;line-height:1;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;}
.play b{display:block;font-size:16px;line-height:1.3;font-family:var(--display);}
.micro{font-family:var(--mono);font-size:12.5px;color:var(--faint);letter-spacing:.02em;}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--teal);color:var(--on-teal);
  font-weight:700;border-radius:11px;padding:12px 22px;transition:transform .15s ease,background .15s ease;}
.btn:hover{transform:translateY(-2px);background:var(--teal-deep);}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn.ghost:hover{background:rgba(133,183,235,.08);border-color:var(--blue);}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:74px 0 84px;}
/* court-floor texture: a faint centre service line + a soft court glow, NOT a big blur */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% -8%,rgba(46,196,160,.12),transparent 62%),
    radial-gradient(700px 380px at 8% 8%,rgba(240,153,123,.08),transparent 60%);}
.hero::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:0;
  background:linear-gradient(var(--line-soft),transparent 70%);transform:translateX(-50%);}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;
  gap:54px;align-items:center;}
/* let both columns shrink below their content's intrinsic width - without this
   the wide board image blows the grid track out and overflows on mobile */
.hero .wrap>*{min-width:0;}
.hero h1{font-size:clamp(38px,5.4vw,60px);font-weight:800;letter-spacing:-.035em;margin:20px 0 18px;}
.hero h1 .said{color:var(--coral);}
.lead{font-size:19px;color:var(--muted);max-width:480px;margin-bottom:30px;}
.herobtns{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

/* ── Signature: the live board is the hero visual, the call is an accent ── */
.stage{position:relative;}
/* the real scoreboard screenshot, shown large and unobstructed */
.heroshot{position:relative;}
/* the BOARD shot only - :not(.wrist) keeps the round watch out of the
   rectangular treatment (border, 18px radius, card shadow) and stops this
   selector outranking .wrist on width. */
.heroshot img:not(.wrist){display:block;width:100%;height:auto;border-radius:18px;
  border:1px solid var(--line);box-shadow:0 34px 74px rgba(0,0,0,.55);}
/* speech-bubble chip: the live umpire call, clipped to the board's bottom-left
   corner as a compact accent - stacked + narrow so it never covers the clocks */
.callchip{position:absolute;left:-14px;bottom:-16px;z-index:2;
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px;
  background:linear-gradient(180deg,#15203a,#0f1828);
  border:1px solid var(--line);border-radius:14px;padding:12px 15px;
  box-shadow:0 20px 44px rgba(0,0,0,.5);}
/* the companion wrist, lower-right of the board where the mock is open (the
   board's clocks live bottom-left, so nothing is covered). A REAL Wear OS
   capture of the same match - the corners are masked in the asset, so the
   shadow is drawn on the shape rather than on a square box. */
.wrist{display:block;position:absolute;right:-62px;bottom:-66px;z-index:3;
  width:35%;min-width:118px;max-width:172px;height:auto;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.66));}
.callchip.coral{border-color:rgba(240,153,123,.55);}
.callchip.blue{border-color:rgba(133,183,235,.55);}
.callsay{display:inline-flex;align-items:center;gap:10px;}
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);white-space:nowrap;}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(46,196,160,.6);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,196,160,.55);}70%{box-shadow:0 0 0 9px rgba(46,196,160,0);}100%{box-shadow:0 0 0 0 rgba(46,196,160,0);}}
.spoken{font-family:var(--mono);font-size:13px;color:var(--ink);white-space:nowrap;}
.spoken b{color:var(--ink);font-weight:600;}
.wave{display:flex;align-items:center;gap:3px;height:20px;}
.wave i{width:3px;height:6px;border-radius:3px;background:var(--teal);display:block;
  animation:eq 1.1s ease-in-out infinite;}
.wave i:nth-child(2){animation-delay:.15s;} .wave i:nth-child(3){animation-delay:.3s;}
.wave i:nth-child(4){animation-delay:.45s;} .wave i:nth-child(5){animation-delay:.6s;}
@keyframes eq{0%,100%{height:5px;opacity:.5;}50%{height:18px;opacity:1;}}

/* ── Sections ──────────────────────────────────────────────────────────── */
.section{padding:84px 0;}
.section.band{background:var(--panel-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.section.center{text-align:center;}
.section h2{font-size:clamp(28px,3.7vw,40px);margin:14px 0 14px;}
.section.center .eyebrow{justify-content:center;}
.section.center .courtline{margin:0 auto;}
.lead2{color:var(--muted);font-size:18px;max-width:620px;}
.section.center .lead2{margin:0 auto;}
.head{max-width:680px;}
.section.center .head{margin:0 auto;}

/* features */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;
  margin-top:46px;text-align:left;}
.feature{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:26px 24px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.feature:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 18px 40px rgba(0,0,0,.35);}
.ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.ico svg{width:24px;height:24px;}
.ico.coral{background:rgba(240,153,123,.16);color:var(--coral);}
.ico.blue{background:rgba(133,183,235,.16);color:var(--blue);}
.ico.teal{background:rgba(46,196,160,.16);color:var(--teal);}
.feature h3{font-size:19.5px;font-weight:700;margin-bottom:9px;}
.feature p{color:var(--muted);font-size:15.5px;}

/* pills */
.pills{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px;justify-content:center;}
.pill{font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.01em;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:30px;padding:9px 17px;
  transition:transform .15s ease,border-color .15s ease,color .15s ease;}
.pill:hover{transform:translateY(-2px);}
.pill.c{border-color:rgba(240,153,123,.4);} .pill.b{border-color:rgba(133,183,235,.4);}
.langshot{max-width:660px;margin:40px auto 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);}
.langshot img{display:block;width:100%;height:auto;}

/* screenshots */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;}
.shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;
  background:#0a0f1c;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;}
.shot:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(0,0,0,.45);border-color:var(--blue);}
.shot::after{content:"";position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:9px;
  background:rgba(11,16,24,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23eef2f8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7V3h4M13 9v4H9'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transition:opacity .2s ease;}
.shot:hover::after{opacity:1;}

/* ── CTA ───────────────────────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;text-align:center;padding:92px 0;border-top:1px solid var(--line-soft);
  background:
    radial-gradient(700px 320px at 50% 120%,rgba(240,153,123,.14),transparent 62%),
    radial-gradient(700px 320px at 50% -20%,rgba(46,196,160,.12),transparent 60%);}
.cta .courtline{margin:0 auto 20px;}
.cta h2{font-size:clamp(30px,4vw,44px);}
.cta .lead2{margin:18px auto 30px;}
.cta .herobtns{justify-content:center;}

/* ── Prose pages (privacy / gear) ──────────────────────────────────────── */
.page{padding:62px 0 72px;}
.page h1{font-size:clamp(32px,4.4vw,42px);font-weight:800;margin:16px 0 8px;}
.page h2{font-size:22px;font-weight:700;margin:38px 0 10px;}
.page .sub{color:var(--muted);font-size:17px;margin-bottom:8px;}
.page p{margin:12px 0;color:var(--ink);}
.page .muted,.page .fine{color:var(--muted);}
.page .fine{font-size:14px;margin-top:34px;}
.page ul{padding-left:22px;margin:12px 0;color:var(--ink);}
.page li{margin:6px 0;}
.page a.link{color:var(--blue);font-weight:600;}
.page a.link:hover{text-decoration:underline;}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:6px 0;}
.box.accent{border-left:3px solid var(--teal);}
.note{background:rgba(240,153,123,.08);border:1px solid rgba(240,153,123,.28);border-radius:14px;
  padding:16px 20px;font-size:14.5px;color:var(--ink);}
.note strong{color:var(--coral);}

/* numbered join steps (invited-testing / open-testing pages) */
.steps{list-style:none;counter-reset:step;margin:18px 0 26px;padding:0;display:grid;gap:12px;}
.steps li{counter-increment:step;position:relative;margin:0;padding:16px 20px 16px 60px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;color:var(--ink);}
.steps li::before{content:counter(step);position:absolute;left:16px;top:15px;width:30px;height:30px;
  border-radius:9px;background:rgba(46,196,160,.16);color:var(--teal);font-family:var(--mono);
  font-weight:500;font-size:15px;display:grid;place-items:center;}
.steps li b{font-weight:600;}
.steps li .fine{display:block;margin-top:4px;font-size:14px;color:var(--muted);}

/* gear product cards */
.product{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:24px 26px;margin-top:18px;}
.product h3{font-size:21px;font-weight:700;margin:10px 0 8px;}

/* gear entries with an image slot: photos for tested items, line-icon
   placeholders for untested picks (the dashed border + category icon is the
   visual tell that we haven't validated it ourselves). The image sits LEFT at
   a fixed size - small enough on mobile that both purchase links stay with
   the entry instead of being pushed down. */
.gearlist{display:grid;gap:14px;margin:16px 0;}
.gearcard{display:flex;gap:18px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;}
.gearimg{flex:0 0 116px;width:116px;height:116px;border-radius:11px;overflow:hidden;
  display:grid;place-items:center;background:rgba(133,183,235,.06);}
.gearimg img{width:100%;height:100%;object-fit:cover;display:block;}
.gearimg svg{width:44px;height:44px;}
.gearimg.pending{border:1px solid var(--line-soft);color:var(--faint);}
.gearimg.untested{border:1px dashed var(--line);color:var(--muted);}
.gearbody{min-width:0;}
.gearbody h3{font-size:17px;font-weight:700;margin:0 0 4px;}
.gearbody p{margin:4px 0;font-size:15px;}
.gearbody .gearlinks{margin-top:8px;}
@media(max-width:680px){
  .gearcard{gap:14px;padding:14px;}
  .gearimg{flex-basis:84px;width:84px;height:84px;}
  .gearimg svg{width:34px;height:34px;}
}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;border-radius:30px;padding:5px 13px;}
.tag.best{background:rgba(240,153,123,.16);color:var(--coral);}
.tag.value{background:rgba(133,183,235,.16);color:var(--blue);}

/* contact */
.contact-main{min-height:calc(100vh - 64px - 220px);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:80px 0;}
.contact-main h1{font-size:clamp(32px,5vw,48px);font-weight:800;margin:16px 0 14px;}
.contact-main .lead2{margin:0 auto 32px;}
.mailbtn{display:inline-flex;align-items:center;gap:12px;background:var(--teal);color:var(--on-teal);
  font-family:var(--mono);font-weight:500;font-size:18px;padding:16px 28px;border-radius:14px;
  transition:transform .15s ease,background .15s ease,box-shadow .2s ease;
  box-shadow:0 16px 38px rgba(46,196,160,.22);}
.mailbtn:hover{transform:translateY(-2px);background:var(--teal-deep);box-shadow:0 20px 46px rgba(46,196,160,.3);}
.mailbtn svg{width:22px;height:22px;}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer{background:var(--panel-2);border-top:1px solid var(--line);padding:48px 0 40px;}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;}
.footlinks{display:flex;gap:24px;flex-wrap:wrap;align-items:center;}
.footlinks a{color:var(--muted);font-weight:600;font-size:14.5px;}
.footlinks a:hover{color:var(--ink);}
.footmail{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--blue);}
.footmail:hover{text-decoration:underline;}
.footmeta{font-family:var(--mono);font-size:13px;color:var(--faint);}
.footcol{display:flex;flex-direction:column;gap:14px;}
.footcol.end{align-items:flex-end;text-align:right;}
@media(max-width:680px){.footcol.end{align-items:flex-start;text-align:left;}}

/* ── Lightbox ──────────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;background:rgba(7,11,18,.93);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:30px;}
.lb.open{display:flex;}
.lb img{max-width:100%;max-height:90vh;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.7);}
.lb .x{position:absolute;top:18px;right:24px;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--line);background:rgba(18,27,44,.7);color:var(--ink);font-size:26px;
  line-height:42px;text-align:center;cursor:pointer;font-family:var(--body);}
.lb .x:hover{background:var(--panel);}

/* ── Motion ────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.stagger.in>*{opacity:1;transform:none;}

/* The failsafe (site.js `revealAll`). Reveal-on-scroll hides content until JS
   adds `.in`, so if the observer never runs the page is blank from the hero to
   the footer. This kills the effect outright rather than relying on `.in` plus
   a transition completing - a transition is one more thing that has to happen,
   and the failsafe path exists precisely because things did not happen. Same
   shape as the reduced-motion rule below. */
html.reveal-off .reveal,
html.reveal-off .stagger>*{opacity:1!important;transform:none!important;
  transition:none!important;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;}
  .reveal,.stagger>*{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media(max-width:860px){
  /* drop the grid to a simple stack so the wide board can't blow the layout out */
  .hero .wrap{display:block;}
  .hero .wrap>div:first-child{margin-bottom:44px;}
  .hero::after{display:none;}
  .callchip{left:10px;bottom:-16px;}
  .wrist{right:-10px;bottom:-30px;width:27%;}
}
@media(max-width:680px){
  body{font-size:16px;}
  .section{padding:64px 0;}
  .shots{grid-template-columns:1fr;}
  /* Mobile header nav (field report: the links vanished, leaving only the
     footer) - the header becomes two rows: brand + Get-it pill on top, a
     condensed horizontally-scrollable link row beneath (no JS, CSP-clean;
     five links, same as desktop). The scroll row hides its scrollbar and
     fades its trailing edge as an affordance. */
  .nav .wrap{flex-wrap:wrap;height:auto;min-height:64px;padding-top:10px;
    padding-bottom:0;row-gap:2px;}
  .brand{order:1;}
  .navcta{order:2;margin-left:auto;}
  .navlinks{order:3;flex-basis:100%;overflow-x:auto;gap:22px;
    padding:6px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .navlinks::-webkit-scrollbar{display:none;}
  .navlinks a:not(.navcta){display:block;flex:0 0 auto;white-space:nowrap;
    font-size:14px;}
  .navlinks a[aria-current="page"]::after{bottom:-4px;}
  /* let the wide board go near-full-bleed so the score stays legible */
  .heroshot{margin:0 -12px;}
  /* compact single-line chip (dot + call) so it stays in the corner, clear of
     the clocks - the narrow board has no room for the full stacked chip */
  .callchip{flex-direction:row;align-items:center;left:6px;bottom:-16px;padding:8px 12px;gap:8px;}
  .callchip .live{font-size:0;}
  .callchip .wave{display:none;}
  .callchip .spoken{font-size:12.5px;}
  footer .wrap{flex-direction:column;gap:20px;}
}

/* ── Gear page: collapsible sections (native details/summary - keyboard and
   screen-reader behaviour comes free, and the page needs no JavaScript) ──

   Every selector below is prefixed `.page` deliberately. The page-scoped
   element rules above - `.page p`, `.page ul`, `.page li` - are specificity
   (0,2,0) and silently beat a bare component class (0,1,0), so `.secintro`
   lost its horizontal margin to `.page p` and sat flush against the card
   border while `.page ul` pushed the rows to its own 22px indent. Same
   collision, opposite directions, which is exactly why the two never lined up.

   One custom property now drives the horizontal inset, so the chevron, the
   intro and every row share a single left edge, and the full-bleed row
   backgrounds stay in step with it. Change --gear-inset, not the numbers. */
.page .gearsec{--gear-inset:22px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);margin:14px 0;overflow:hidden;}
.page .gearsec>summary{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;cursor:pointer;padding:15px var(--gear-inset);list-style:none;
  font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);}
.page .gearsec>summary::-webkit-details-marker{display:none;}
/* the affordance: a chevron that turns when the section opens. It sits ON the
   shared edge; the header text is indented past it by the marker gutter. */
.page .gearsec>summary .secname{position:relative;padding-left:22px;}
.page .gearsec>summary .secname::before{content:"";position:absolute;left:0;top:.34em;
  width:8px;height:8px;border-right:2px solid var(--teal);
  border-bottom:2px solid var(--teal);transform:rotate(-45deg);
  transition:transform .18s ease;}
.page .gearsec[open]>summary .secname::before{transform:rotate(45deg);}
.page .gearsec>summary:hover{background:rgba(133,183,235,.05);}
.page .gearsec>summary .seccount{font-family:var(--mono);font-size:11.5px;
  font-weight:400;color:var(--faint);letter-spacing:.04em;white-space:nowrap;}
.page .gearsec .secintro{margin:0 var(--gear-inset) 12px;font-size:15px;
  color:var(--muted);}
/* the trailing note in a section reads as a footnote to the list above it */
.page .gearsec .secintro.fine{margin-top:14px;}
.page .gearsec .gearlinks-list{list-style:none;margin:0;
  padding:0 var(--gear-inset) 16px;}
.page .gearsec .gearlinks-list li{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 12px;margin:0;padding:9px 0;border-top:1px solid var(--line-soft);}
.page .gearsec .gearlinks-list li:first-child{border-top:0;}
.page .gearsec .gearlinks-list .gname{font-weight:600;color:var(--ink);flex:1 1 220px;}
.page .gearsec .gearlinks-list .gnote{flex:1 1 100%;order:3;font-size:14px;
  color:var(--muted);}
.page .gearsec .gearlinks-list .glinks{font-size:14.5px;white-space:nowrap;}
/* Tested is the page's credibility line - it must be impossible to miss.
   The row bleeds to the card edge and pads itself back to the shared inset. */
.badge{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;
  background:var(--teal);color:var(--on-teal);font-family:var(--mono);
  font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  vertical-align:.12em;}
.page .gearsec .gearlinks-list li.tested{background:rgba(46,196,160,.06);
  margin:0 calc(-1 * var(--gear-inset));
  padding-left:var(--gear-inset);padding-right:var(--gear-inset);}
.testednote{border-left:3px solid var(--teal);}
@media (max-width:560px){
  .page .gearsec{--gear-inset:15px;}
  .page .gearsec>summary{font-size:16.5px;padding:13px var(--gear-inset);}
  .page .gearsec>summary .seccount{display:none;}
  .page .gearsec .gearlinks-list .glinks{white-space:normal;}
}
/* the "start here" generic row heading each family list */
.page .gearsec .gearlinks-list li.generic{background:rgba(133,183,235,.05);
  margin:0 calc(-1 * var(--gear-inset));
  padding-left:var(--gear-inset);padding-right:var(--gear-inset);}
.sub-note{margin-left:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:400;}
/* The invite line under a store CTA: the closed track admits by email only,
   so an uninvited visitor hits a wall at the button. Supporting text, never a
   second competing button. */
.invite{flex:1 1 100%;margin-top:-4px;max-width:46ch;line-height:1.55;}
.invite .link{color:var(--blue);text-decoration:underline;
  text-underline-offset:2px;}
.invite .link:hover{color:var(--ink);}
.invitebox{border-left:3px solid var(--teal);}