/* rfidtiming.com redesign - shared design system, extracted from index.html 2026-09-19.
   EVERY page uses this file, index.html included since 2026-09-21. There is no second copy.
   A shared style changes here, once. */
:root{
  --ink:#0c0e11;
  --ink2:#15181d;
  --ink3:#1f242b;
  --red:#e02a20;
  --red-dk:#b91f17;
  --paper:#fff;
  --mist:#f5f6f8;
  --muted:#5c6470;
  --line:rgba(12,14,17,.12);
  --line-d:rgba(255,255,255,.14);
  --wrap:1200px;
  --disp:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box}
/* scroll-padding-top is the sticky header, 74px, plus room to breathe. Without it every
   anchor on the site -- the shop category bar, #specs, #accessories, the contact page's
   self-help links -- lands with its heading hidden underneath the header. One line here
   covers every page; manual.html had solved it for itself with scroll-margin-top and did
   not need to. */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;position:relative;font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
/* page watermark — timing data, boxes, tags, results */
.wm{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;color:var(--ink);opacity:.055}
img{max-width:100%;display:block}
a{color:inherit}
/* @chrome-start -- also served on the live WooCommerce pages by the rfid-newlook mu-plugin. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
/* @chrome-end */
h1,h2,h3,.disp{font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(42px,6.2vw,80px);text-transform:uppercase}
h2{font-size:clamp(32px,4.2vw,54px);text-transform:uppercase}
h3{font-size:clamp(20px,2.2vw,26px);text-transform:uppercase;letter-spacing:.01em}
p{margin:0 0 1em}
.eyebrow{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.eyebrow.on-dark{color:#ff6a5e}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:60ch}
.on-dark .lede,.dark .lede{color:rgba(255,255,255,.66)}

/* @chrome-start -- also served on the live WooCommerce pages by the rfid-newlook mu-plugin. */
/* ---------- header ---------- */
/* No backdrop-filter. Safari needs -webkit- for it, AND backdrop-filter on a
   position:sticky element is a long-standing Safari bug that can render the
   element blank or drop it entirely. The background was already 94% opaque so
   the blur bought nothing. -webkit-sticky first for older iPadOS. */
header{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid var(--line-d)}
.bar{display:flex;align-items:center;gap:34px;height:74px}
.logo img{height:34px;width:auto}
nav{display:flex;gap:22px;margin-left:auto;align-items:center}
/* nowrap matters: "Open System" and "Cart (0)" were the only two-word items, so they were the
   only ones that could wrap. Wrapped, they rendered double height against 35px neighbours and
   sat out of line. Measured: with nothing wrapping the full nav needed 1149px, which is why the
   collapse below runs at 1150 and not at the 980 the rest of the layout uses.
   2026-09-29, two label changes since: the cart link says "Cart" now -- nav.js adds the number
   only when there is one -- which is 26px narrower (67px to 40px); and "Support" became
   "Manuals", to match the page's own title, which puts 4px back. Measured after both: the nav
   is 928px and the header needs 1127px. The collapse is left at 1150 on purpose: it works, and
   the slack costs nothing. */
nav a{white-space:nowrap;color:rgba(255,255,255,.82);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
/* Collapsed-nav controls. Inert above 980 - see the media query below. */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.burger{display:none}
nav a:hover{color:#fff;border-bottom-color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:3px;font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;transition:.16s;cursor:pointer;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dk)}
.btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink3)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.cart{color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.82}
.cart:hover{opacity:1}
/* @chrome-end */

/* ---------- announcement ---------- */
.announce{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;
  background:var(--ink2);color:rgba(255,255,255,.8);text-decoration:none;padding:13px 28px;font-size:13.5px;
  border-bottom:1px solid var(--line-d);transition:.16s}
.announce:hover{background:#1b1f25;color:#fff}
.announce-new{background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:4px 10px;border-radius:3px}
.announce-go{color:#ff6a5e;font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0 0 0 42%;background:url('img/EchoPlus.jpg') center 42%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%);mask-image:linear-gradient(to right,transparent 0,#000 38%);opacity:.62}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,var(--ink) 30%,rgba(12,14,17,.4) 62%,rgba(12,14,17,.75))}
.hero .wrap{position:relative;z-index:2;padding-top:110px;padding-bottom:110px}
/* The break belongs in the markup, not in a character cap. Every hero headline carries its
   own <br>; at 15ch the cap was ALSO wrapping lines the author had already broken, so
   "Every sport with a<br>start and a finish" came out as four ragged lines and Bluetooth as
   four with a stranded fragment. 26ch clears the longest line any of them has ("the things
   that wear out"), so each one breaks where -- and only where -- its <br> says. The font
   still shrinks on a phone, so these re-wrap there, which is the point. */
.hero h1{max-width:26ch}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lede{margin-top:26px;font-size:clamp(17px,1.6vw,21px);color:rgba(255,255,255,.72);max-width:48ch}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-note{margin-top:34px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600}

/* ---------- stats ---------- */
.stats{background:var(--red);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:30px;padding-bottom:30px}
.stat b{font-family:var(--disp);font-size:clamp(30px,3.4vw,44px);font-weight:700;display:block;line-height:1}
.stat span{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;opacity:.86}

/* ---------- sections ---------- */
section{padding:104px 0;position:relative;z-index:1}
.dark{background:var(--ink);color:#fff}
.mist{background:rgba(12,14,17,.035)}
.sec-head{max-width:64ch;margin-bottom:56px}
.sec-head h2{margin-bottom:18px}

/* system split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.figure{background:#fff;border-radius:6px;padding:26px;border:1px solid var(--line)}
.dark .figure{background:#fff}
.tag-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.tag-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px}
.tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin-top:2px}
.tick svg{width:12px;height:12px}

/* product cards */
.specs{margin:26px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.specs>div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:11px 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-top:2px}
.specs dd{margin:0;font-size:15px;color:var(--muted)}
.fineprint{margin-top:14px;font-size:13px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(12,14,17,.1)}
/* --ph-h/--ph-p keep the tile height and its padding in one place: the image cap below is
   derived from them, so it cannot drift out of step. A percentage max-height does NOT work
   here -- .ph is a flex item of a column-flex .card, so the percentage has no definite basis
   and resolves to none, letting tall images run out of the tile and over the text. */
.card .ph{--ph-h:230px;--ph-p:26px;height:var(--ph-h);display:grid;place-items:center;background:var(--mist);padding:var(--ph-p)}
.card .ph img{max-width:100%;max-height:calc(var(--ph-h) - 2*var(--ph-p));width:auto;height:auto;object-fit:contain}
.card .body{padding:26px;flex:1;display:flex;flex-direction:column}
.card h3{margin-bottom:10px}
.card p{font-size:15px;color:var(--muted);flex:1}
.price{font-family:var(--disp);font-size:28px;font-weight:700;margin-top:14px}
.price small{font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:2px}

/* podium */
.podium-shot{margin:0;background:#fff;border:1px solid var(--line-d);border-radius:8px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.45)}
.podium-shot img{display:block;width:100%;height:auto}
.podium-shot figcaption{font-size:13px;color:rgba(255,255,255,.5);background:#141820;padding:11px 16px;border-top:1px solid var(--line-d);line-height:1.5}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.tier{border:1px solid var(--line-d);border-radius:6px;padding:20px 22px;background:rgba(255,255,255,.03)}
.tier b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.tier-price{font-family:var(--disp);font-size:34px;font-weight:700;color:#fff;margin:6px 0 10px;line-height:1}
.tier-price small{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-top:4px}
.tier p{font-size:14.5px;color:rgba(255,255,255,.66);margin:0;line-height:1.6}
.optnote{border-left:3px solid var(--red);background:rgba(224,42,32,.09);padding:20px 24px;margin-top:28px;border-radius:0 4px 4px 0;font-size:15.5px;color:rgba(255,255,255,.76);line-height:1.62}
.optnote b{color:#fff;display:block;margin-bottom:6px;font-size:16.5px}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pill{border:1px solid var(--line-d);border-radius:100px;padding:8px 17px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.calc-inputs{display:grid;gap:20px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input{width:100%;padding:14px 16px;font-family:var(--body);font-size:17px;font-weight:600;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
.field input:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
.calc-out{background:var(--ink);color:#fff;border-radius:8px;padding:40px}
.calc-out .big{font-family:var(--disp);font-size:clamp(52px,7vw,86px);font-weight:700;line-height:.95;color:#fff;margin:6px 0 4px}
.calc-out .big span{color:var(--red)}
.calc-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line-d);font-size:14px}
.calc-row:last-of-type{border-bottom:0}
.calc-row span:first-child{color:rgba(255,255,255,.6)}
.calc-row span:last-child{font-weight:700;font-variant-numeric:tabular-nums}

/* sports */
.sports{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sport{display:block;text-decoration:none;color:inherit;border:1px solid var(--line-d);border-radius:6px;padding:26px 22px;transition:.16s}
.sport:hover{border-color:var(--red);background:rgba(224,42,32,.08)}
.sport svg{width:30px;height:30px;stroke:var(--red);fill:none;stroke-width:1.7;margin-bottom:16px}
.sport b{font-family:var(--disp);font-size:21px;font-weight:700;text-transform:uppercase;display:block}
.sport span{font-size:13px;color:rgba(255,255,255,.55)}

/* support */
.sup{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sup a{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:6px;padding:32px;transition:.16s}
.sup a:hover{border-color:var(--red);transform:translateY(-3px)}
.sup h3{margin-bottom:8px}
.sup p{font-size:15px;color:var(--muted);margin:0}
.sup .go{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-top:16px;display:block}

/* global */
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:20px}
.region{border-top:3px solid var(--red);padding-top:22px}
.region b{font-family:var(--disp);font-size:23px;text-transform:uppercase;display:block;margin-bottom:6px}
.region p{font-size:15px;color:var(--muted);margin:0}
.region a{color:var(--ink);font-weight:600}

/* cta */
.cta{background:var(--red);color:#fff;text-align:center}
.cta h2{margin-bottom:18px}
.cta p{max-width:52ch;margin:0 auto 32px;font-size:18px;color:rgba(255,255,255,.88)}
.cta .btn-ghost{border-color:rgba(255,255,255,.55)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:rgba(255,255,255,.88)}

/* footer */
/* @chrome-start -- also served on the live WooCommerce pages by the rfid-newlook mu-plugin. */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:72px 0 34px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-d)}
footer h4{font-family:var(--disp);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:700}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer a{color:rgba(255,255,255,.6);text-decoration:none}
footer a:hover{color:#fff}
.f-bot{padding-top:26px;display:flex;justify-content:space-between;gap:20px;font-size:13px;flex-wrap:wrap}
.f-logo{height:32px;margin-bottom:18px}
/* @chrome-end */

/* @chrome-start -- also served on the live WooCommerce pages by the rfid-newlook mu-plugin. */
/* The footer's own collapse. It used to live in the general 980 block, which the mu-plugin
   cannot take -- that block also repaints sections and card grids, and the WooCommerce page
   between our header and our footer belongs to somebody else's theme. On its own here, both
   the static site and the shop get it. Without it the shop footer stayed four columns on a
   phone and pushed the page 154px sideways. */
@media(max-width:980px){ .f-grid{grid-template-columns:1fr 1fr} }
/* @chrome-end */

/* schematic */
.schematic{margin:0;color:var(--ink);overflow-x:auto;-webkit-overflow-scrolling:touch}
.schematic svg{width:100%;max-width:100%;min-width:1040px;height:auto;font-family:var(--body)}
.schematic .hint{display:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--red);margin-bottom:12px}
@media(max-width:1120px){.schematic .hint{display:block}}
.schematic figcaption{margin-top:28px;font-size:14px;color:var(--muted);text-align:center;max-width:74ch;margin-left:auto;margin-right:auto}
.panel rect{fill:rgba(12,14,17,.022);stroke:currentColor;stroke-opacity:.15;stroke-width:1}
.badge circle{fill:var(--red)}
.badge-n text{fill:#fff;font-size:14px;font-weight:700;text-anchor:middle}
.ptitle text{fill:currentColor;font-family:var(--disp);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-anchor:middle}
.ink,.ink path,.ink circle,.ink rect{fill:none;stroke:currentColor;stroke-opacity:.62;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ink .thin,.thin{stroke-opacity:.34;stroke-width:1.6}
.fillfaint{fill:rgba(12,14,17,.04)}
.wave path{fill:none;stroke:var(--red);stroke-width:2;stroke-opacity:.75;stroke-linecap:round}
.ground{fill:none;stroke:currentColor;stroke-opacity:.2;stroke-width:2}
.screen{fill:rgba(224,42,32,.1);stroke:var(--red);stroke-opacity:.55;stroke-width:1.6}
.dot{fill:var(--red)}
.cloud{fill:rgba(12,14,17,.035);stroke:currentColor;stroke-opacity:.45;stroke-width:2}
.brandsm{fill:var(--red);font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:.07em;text-anchor:middle}
.rowred{stroke:var(--red);stroke-width:3;stroke-linecap:round}
.rowgrey{stroke:currentColor;stroke-opacity:.3;stroke-width:3;stroke-linecap:round}
.flow path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.alabel text{fill:currentColor;fill-opacity:.68;font-size:12.5px;font-weight:600;text-anchor:middle}
.cap text{fill:currentColor;fill-opacity:.7;font-size:12.5px;text-anchor:middle}
.ptitleL text{fill:currentColor;font-family:var(--disp);font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.capL text{fill:currentColor;fill-opacity:.72;font-size:13px}
.capE text{fill:var(--red);font-size:13px;font-weight:600}
.capS text{fill:currentColor;fill-opacity:.5;font-size:11.5px;font-style:italic}
.badge-n .two{font-size:12px;letter-spacing:.02em}
.newpill{fill:var(--red)}
.newtxt{fill:#fff;font-size:11px;font-weight:700;letter-spacing:.09em;text-anchor:middle}
.orchip{fill:#fff;stroke:var(--red);stroke-width:2}
.ortxt{fill:var(--red);font-size:12px;font-weight:700;letter-spacing:.05em;text-anchor:middle}

/* review note */
.note{position:relative;background:#fffbe6;border-left:3px solid #e8b400;padding:14px 18px;font-size:13.5px;color:#6b5600;border-radius:0 4px 4px 0;margin-top:18px}
.note b{color:#4a3c00}

/* The nav collapses at 1150, NOT at the 980 the rest of the layout uses, and the two numbers
   are deliberately different. Measured on the built pages: with nav links set to nowrap the
   full nav needs 1149px. Below about 1060 it cannot be made to fit at any spacing worth having
   -- squeezing it took letter-spacing down to .04em, which breaks the uppercase styling used
   across the whole site. So between 980 and 1150 the nav collapses while the card grids stay
   in their multi-column layouts, which is why these rules had to come out of the 980 block.
   Done with a checkbox rather than JavaScript: most of these pages ship none at all, and a
   menu that needs a script is a menu that can fail to open. */
/* @chrome-start -- also served on the live WooCommerce pages by the rfid-newlook mu-plugin. */
@media(max-width:1150px){
  .burger{display:flex;margin-left:auto;width:46px;height:46px;cursor:pointer;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:4px}
  .burger span{display:block;width:23px;height:2px;background:#fff;transition:.2s}
  .nav-toggle:focus-visible+.burger{outline:2px solid var(--red);outline-offset:3px}
  .nav-toggle:checked+.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked+.burger span:nth-child(2){opacity:0}
  .nav-toggle:checked+.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav{display:none;position:absolute;left:0;right:0;top:74px;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:10px 0 16px;background:var(--ink);
    border-top:1px solid var(--line-d);box-shadow:0 26px 50px rgba(0,0,0,.45)}
  .nav-toggle:checked~nav{display:flex}
  nav a{padding:14px 26px;border-bottom:0;font-size:14.5px}
  nav a:hover{color:#fff;background:rgba(255,255,255,.07);border-bottom-color:transparent}
  nav .cart{border-top:1px solid var(--line-d);margin-top:8px;padding-top:18px}
  nav .btn{margin:12px 26px 0;justify-content:center}
}
/* @chrome-end */

@media(max-width:980px){
  .split,.calc{grid-template-columns:1fr;gap:40px}
  .cards,.sup,.regions,.routes{grid-template-columns:1fr}
  .sports{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:24px}
  .hero-media{inset:0;opacity:.28;-webkit-mask-image:none;mask-image:none}
  section{padding:72px 0}
}
/* two routes — the split between someone new to timing and a working timer */
/* NOTE: two unrelated components share the name "routes". THIS one is the homepage
   audience fork, holding .route-card children. echoactive-plus.html has its own
   .routes/.route pair in its page block for something different, and that local rule
   wins there. Worth renaming one of them in the theme build. */
/* Declared min-width so it cannot out-rank the 980 collapse above purely by sitting
   later in the file. That ordering is exactly what overflowed the homepage at 390px
   the moment index.html stopped using its own inline copy. */
.routes{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:981px){ .routes{grid-template-columns:repeat(3,1fr)} }
.route-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--line);border-top:4px solid var(--red);border-radius:6px;padding:38px 36px;transition:.18s}
.route-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(12,14,17,.13)}
.route-card.is-dark{background:var(--ink);color:#fff;border-color:var(--ink);border-top-color:var(--red)}
.route-tag{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.route-card h3{margin-bottom:14px}
.route-card>p{font-size:15.5px;color:var(--muted);margin-bottom:18px}
.route-card.is-dark>p{color:rgba(255,255,255,.68)}
.route-list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px;font-size:14.5px;color:var(--muted)}
.route-list li{position:relative;padding-left:17px}
.route-list li:before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--red)}
.route-card.is-dark .route-list{color:rgba(255,255,255,.68)}.route-list{flex:1}
.route-go{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
/* ---- the two technologies, side by side ----------------------------------
   Moved here out of echoactive-plus.html's own <style> so the homepage and the
   product page share ONE copy rather than two that drift. The homepage had only
   a one-sentence version of this and then mixed active and UHF together for the
   rest of the page, which is how a $55 reusable transponder came to read like
   the thing you hand an entrant and never see again. */
/* Single column DECLARED, two columns behind min-width:981 -- exactly the .routes lesson
   further up this file. Appended rules sit after the 980 media block, so a two-column
   default here out-ranks that block by source order alone and the homepage scrolls
   sideways on a phone. Measured before the fix: 438px against a 375px viewport. */
.versus{display:grid;grid-template-columns:1fr;gap:26px;margin-top:10px}
@media(min-width:981px){ .versus{grid-template-columns:1fr 1fr} }
.vs-col{border:1px solid var(--line);border-radius:6px;padding:32px;background:#fff;display:flex;flex-direction:column}
.vs-col.is-uhf{background:var(--ink);color:#fff;border-color:var(--ink)}
.vs-tag{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.vs-col.is-uhf .vs-tag{color:#ff6a5e}
.vs-col h3{margin-bottom:12px}
.vs-col>p{font-size:15.5px;color:var(--muted);margin-bottom:22px}
.vs-col.is-uhf>p{color:rgba(255,255,255,.66)}
.vs-list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px;font-size:15px}
.vs-list li{display:flex;gap:11px;align-items:flex-start;color:var(--muted)}
.vs-col.is-uhf .vs-list li{color:rgba(255,255,255,.72)}
.vs-list li:before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--red);margin-top:8px}
.vs-foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.vs-col.is-uhf .vs-foot{border-top-color:var(--line-d);color:#fff}

/* ---- range cards: the technology, and whether it comes back ---------------
   Both of these are <p> inside .card .body, so they are up against
   .card p{font-size:15px;color:var(--muted);flex:1} -- which would grow them and
   take their colour. Two classes beat one class plus a type selector, so each
   rule is written as .card .card-xxx deliberately. Do not shorten them. */
.card .card-tag{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);margin-bottom:8px}
.card .card-note{flex:0 0 auto;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--muted)}
.card .card-note b{color:var(--ink);font-weight:700}

/* ---- which technology a spec row belongs to ------------------------------- */
.sp-tag{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:3px;
  background:var(--mist);border:1px solid var(--line);font-family:var(--body);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  vertical-align:2px}
/* A tagged spec list needs a wider term column -- "Timing precision" plus its tag does not
   fit the 150px the untagged lists use. Scoped to a modifier so the seven untagged tables
   on echoactive-plus.html are not touched. */
.specs.is-tagged>div{grid-template-columns:200px 1fr}
@media(max-width:980px){ .specs.is-tagged>div{grid-template-columns:1fr} }