/* Series Landing — styles for taxonomy-by-series.php
 *
 * Ported from the standalone series-formula-1.html design. Every rule is scoped
 * under .sl-page so nothing leaks into the rest of the theme; only the :root
 * custom properties stay global, matching team-landing.css.
 *
 * The mockup was a complete standalone page, so its header, drawer, breadcrumb,
 * footer and toast rules are dropped — WordPress supplies that chrome through
 * get_header() / get_footer().
 *
 * Loaded only on by-series term archives (see series-landing.php). */
:root{--bg:#f4f5f7;--surface:#ffffff;--fg:#15181d;--muted:#6a7280;--border:#e6e8eb;
  --accent:#e10600;--accent-ink:#c20500;
  --dark:#0c0e13;--dark-2:#171a21;--dark-line:rgba(255,255,255,.09);
  --success:#16a34a;--danger:#e11d48;--warn:#f5a623;
  --r:12px;--shadow:0 6px 24px rgba(15,24,40,.10);--wrap:1280px;
  /* Barlow Condensed first: it is the condensed face this theme actually
     enqueues site-wide. The mockup named Saira Condensed, which is not loaded
     here, so headings were silently falling through to system-ui. */
  --font-display:'Barlow Condensed','Saira Condensed','Archivo Narrow',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;}

.sl-page{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.55}
.sl-page *{box-sizing:border-box;margin:0;padding:0}
/* width/height attributes on <img> are presentational hints that outrank
   aspect-ratio, so every image here must keep height:auto for its ratio to win. */
.sl-page img{display:block;max-width:100%;height:auto}
.sl-page a{color:inherit;text-decoration:none}
.sl-page ul,.sl-page ol{list-style:none}
.sl-page :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* The mockup let every heading, label and figure inherit its colour from the
   section it sits in — white inside .sl-hero/.sl-dark, --fg elsewhere. Flatsome
   colours headings, strong text and table cells globally, which cuts that chain
   and printed black headings on the dark bands. Restating inherit at .sl-page
   specificity restores the mockup's cascade; every rule below that sets a real
   colour is more specific and still wins. */
.sl-page h1,.sl-page h2,.sl-page h3,.sl-page h4,.sl-page h5,.sl-page h6,
.sl-page p,.sl-page b,.sl-page strong,.sl-page em,.sl-page span,
.sl-page dt,.sl-page dd,.sl-page li,.sl-page summary,
.sl-page th,.sl-page td,.sl-page figure{color:inherit}
.sl-page h1,.sl-page h2,.sl-page h3,.sl-page h4{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.04}
.sl-page .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sl-page .btn{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 26px;border-radius:999px;
  font-weight:600;font-size:15px;transition:filter .15s}
.sl-page .btn-pri{background:var(--accent);color:#fff}
.sl-page .btn-pri:hover{filter:brightness(1.08);color:#fff}
.sl-page .btn:active{transform:translateY(1px)}

/* Breadcrumb strip, dark so it reads as part of the hero (same as .tl-crumb). */
/* Matched to .tl-crumb on the team pages, which is the reference treatment.
   What this block was missing, and why each mattered:
   - no border-bottom and no bottom padding, so the trail sat flush against the
     hero with nothing separating them;
   - the separator inherited the text colour, making every '>' as loud as the
     labels it divides;
   - the current-page crumb was unstyled, so the term name rendered in the same
     dim grey as the inactive trail instead of reading as "you are here".
   The .wrap redeclaration is gone: it repeated .sl-page .wrap exactly, which is
   two places to keep the gutters in step for no gain. */
.sl-page .sl-crumb{background:var(--dark);border-bottom:1px solid var(--dark-line)}
.sl-page .sl-crumb .wrap{padding-top:11px;padding-bottom:11px;font-size:12.5px;line-height:1.5;color:#7a8494}
.sl-page .sl-crumb a{color:#9aa6b6;text-decoration:none;transition:color .15s}
.sl-page .sl-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.sl-page .sl-crumb .separator{color:#3c4453}
.sl-page .sl-crumb .last{color:#7a8494;font-weight:400}
.sl-page .sl-crumb .last:last-child{color:#fff;font-weight:600}
/* ?view=all strips the hero, so the crumb bar is on its own and needs a bottom. */
/* Products-only terms have no hero under the trail, so it gets a little more
   room to breathe. Padding moved to .wrap to match where it is now set above. */
.sl-page .sl-crumb-solo .wrap{padding-top:14px;padding-bottom:14px}

/* ===== SERIES LANDING ===== */
.sl-page .sl-block{padding:54px 0}
.sl-page .sl-dark{background:var(--dark);color:#fff;position:relative;overflow:hidden}
/* Speed-stripe + red glow: the project's single flourish for dark bands. */
.sl-page .sl-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 300px at 88% -10%,rgba(225,6,0,.20),transparent 60%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 16px)}
.sl-page .sl-dark .wrap{position:relative;z-index:1}

.sl-page .sl-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.sl-page .sl-eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.sl-page .sl-dark .sl-eyebrow,.sl-page .sl-hero .sl-eyebrow{color:#ff6b66}
/* Hero already spends its red budget on the headline word + CTA, so its
   eyebrow keeps only the red rule and drops the red text. */
.sl-page .sl-hero .sl-eyebrow{color:#9aa3b2}
.sl-page .sl-bread{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#5c6475;margin-bottom:18px}
.sl-page .sl-bread a{color:#6b7a8d;transition:color .15s}
.sl-page .sl-bread a:hover{color:#fff}
.sl-page .sl-bread .sep{font-size:10px;opacity:.5}
.sl-page .sl-head{margin-bottom:26px;max-width:760px}
/* h1 is here for ?view=all, where the collection heading carries the page. */
.sl-page .sl-head h1,.sl-page .sl-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;text-transform:uppercase;margin:12px 0 0}
.sl-page .sl-head p{font-size:16px;color:#3a4052;margin-top:12px;line-height:1.7}
.sl-page .sl-dark .sl-head p{color:#aeb6c2}

/* Hero */
.sl-page .sl-hero{background:var(--dark);color:#fff;position:relative;overflow:hidden;padding:56px 0 60px}
.sl-page .sl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 340px at 78% -12%,rgba(225,6,0,.26),transparent 62%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px)}
.sl-page .sl-hero .wrap{position:relative;z-index:1}
.sl-page .sl-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.sl-page .sl-hero h1{font-size:clamp(44px,6vw,84px);font-weight:800;text-transform:uppercase;line-height:1.02;margin:14px 0 0}
.sl-page .sl-hero h1 em{font-style:italic;color:var(--accent)}
.sl-page .sl-lede{font-size:17px;line-height:1.7;color:#c3cad4;margin-top:16px;max-width:56ch}
.sl-page .sl-hero-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sl-page .sl-hero-cta .btn-pri{width:auto}
.sl-page .sl-hero-img{border-radius:var(--r);overflow:hidden;border:1px solid var(--dark-line);background:#0f1218}
.sl-page .sl-hero-img img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.sl-page .sl-stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.sl-page .sl-stat b{display:block;font-family:var(--font-display);font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.sl-page .sl-stat span{display:block;font-size:12.5px;color:#98a1ae;margin-top:6px;max-width:15ch;line-height:1.35}
.sl-page .sl-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.sl-page .sl-chip{font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:7px 13px;border-radius:999px;
  border:1px solid var(--dark-line);color:#d6dae1;background:rgba(255,255,255,.04)}

/* Quick answer */
.sl-page .sl-answer{background:var(--bg);padding:34px 0 10px}
.sl-page .sl-answer-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:28px 30px;box-shadow:var(--shadow)}
.sl-page .sl-answer-card h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;text-transform:uppercase}
.sl-page .sl-answer-card p{font-size:16.5px;line-height:1.75;color:#3a4052;margin-top:12px}
.sl-page .sl-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.sl-page .sl-fact dt{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.sl-page .sl-fact dd{font-family:var(--font-display);font-size:19px;font-weight:700;text-transform:uppercase;margin-top:5px}
.sl-page .sl-byline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:18px;font-size:12.5px;color:var(--muted)}
.sl-page .sl-byline b{color:var(--fg);font-weight:600}

/* Generic card grids */
.sl-page .sl-grid{display:grid;gap:16px}
.sl-page .sl-g4{grid-template-columns:repeat(4,1fr)}
.sl-page .sl-g3{grid-template-columns:repeat(3,1fr)}
.sl-page .sl-g2{grid-template-columns:repeat(2,1fr)}
.sl-page .sl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.sl-page .sl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.sl-page .sl-card h3{font-size:17px;font-weight:700;text-transform:uppercase;margin:10px 0 7px}
.sl-page .sl-card p{font-size:14.5px;line-height:1.65;color:#4a5162}
.sl-page .sl-num{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--accent-ink);background:#fdecec;padding:3px 8px;border-radius:6px;display:inline-block}
.sl-page .sl-dark .sl-card{background:var(--dark-2);border-color:var(--dark-line)}
.sl-page .sl-dark .sl-card:hover{border-color:rgba(255,255,255,.22);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.sl-page .sl-dark .sl-card p{color:#aeb6c2}
.sl-page .sl-dark .sl-num{color:#ff6b66;background:rgba(225,6,0,.14)}
.sl-page .sl-kicker{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.sl-page .sl-dark .sl-kicker{color:#8b94a3}
.sl-page .sl-note{margin-top:18px;font-size:13px;color:var(--muted);line-height:1.6}
.sl-page .sl-dark .sl-note{color:#8b94a3}

/* Spec list */
.sl-page .sl-spec{margin-top:22px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.sl-page .sl-spec div{display:grid;grid-template-columns:210px 1fr;gap:16px;padding:12px 18px;border-bottom:1px solid var(--border);font-size:14.5px}
.sl-page .sl-spec div:last-child{border-bottom:0}
.sl-page .sl-spec dt{font-weight:600;color:var(--muted);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.sl-page .sl-spec dd{color:#3a4052}

/* Tables */
.sl-page .sl-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface)}
.sl-page .sl-table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px;background:var(--surface)}
.sl-page .sl-table th{background:var(--bg);text-align:left;padding:11px 14px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.sl-page .sl-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:#3a4052}
.sl-page .sl-table tr:last-child td{border-bottom:0}
.sl-page .sl-table tbody tr:hover td{background:var(--bg)}
.sl-page .sl-table .num{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg)}
.sl-page .sl-table .gp{font-weight:600;color:var(--fg)}
.sl-page .sl-points-wrap .sl-table{min-width:340px}
.sl-page .sl-points{display:grid;grid-template-columns:1fr 1fr;gap:0}
.sl-page .sl-points-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.sl-page .sl-next{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;background:#fdecec;
  color:var(--accent-ink);border-radius:999px;padding:7px 14px;margin-bottom:14px}
.sl-page .sl-next::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* Timeline */
.sl-page .sl-time{margin-top:8px;border-left:2px solid var(--border);padding-left:26px;display:flex;flex-direction:column;gap:24px}
.sl-page .sl-time-item{position:relative}
.sl-page .sl-time-item::before{content:"";position:absolute;left:-33px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent)}
.sl-page .sl-time-year{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--accent-ink);line-height:1}
.sl-page .sl-time-item h3{font-size:16px;font-weight:700;text-transform:uppercase;margin:7px 0 5px}
.sl-page .sl-time-item p{font-size:14.5px;color:#4a5162;line-height:1.65;max-width:70ch}

/* Featured (champion / team) */
.sl-page .sl-feature{display:grid;grid-template-columns:240px 1fr;gap:26px;align-items:center;background:var(--dark-2);
  border:1px solid var(--dark-line);border-radius:var(--r);padding:22px;margin-bottom:20px}
/* A feature card with no art is one column, not one column plus a 240px hole. */
.sl-page .sl-feature-solo{grid-template-columns:1fr}
.sl-page .sl-feature img{width:100%;height:auto;border-radius:10px;object-fit:cover}
.sl-page .sl-feature .p-por{aspect-ratio:3/4}
.sl-page .sl-feature .p-wide{aspect-ratio:16/10}
.sl-page .sl-feature h3{font-size:clamp(24px,3vw,34px);font-weight:800;text-transform:uppercase;margin:10px 0 6px}
.sl-page .sl-feature p{color:#aeb6c2;font-size:14.5px}
.sl-page .sl-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13.5px;font-weight:600;
  color:#ff6b66;transition:gap .18s}
.sl-page .sl-link:hover{gap:11px}
.sl-page .sl-linkd{color:var(--accent-ink)}

/* Racer / team badge cards */
.sl-page .sl-badge{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--dark-line);color:#d6dae1;border-radius:5px;padding:2px 7px}
.sl-page .sl-titles{margin-top:12px;padding-top:11px;border-top:1px solid var(--dark-line);font-size:12.5px;
  font-weight:600;color:#ff6b66;display:flex;align-items:center;gap:7px}
.sl-page .sl-titles::before{content:"◆";font-size:9px}
.sl-page .sl-team{display:flex;align-items:center;gap:14px;background:var(--dark-2);border:1px solid var(--dark-line);
  border-radius:var(--r);padding:14px 16px;transition:transform .18s,border-color .18s}
.sl-page .sl-team:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.24)}
.sl-page .sl-team .rank{font-family:var(--font-display);font-size:13px;font-weight:700;color:#7b8491;width:26px;flex:none}
.sl-page .sl-team .mono{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;
  background:rgba(255,255,255,.07);border-radius:6px;padding:5px 8px;flex:none}
.sl-page .sl-team b{display:block;font-family:var(--font-display);font-size:16px;font-weight:700;text-transform:uppercase}
.sl-page .sl-team span{display:block;font-size:12.5px;color:#8b94a3;margin-top:2px}

/* Stories */
.sl-page .sl-story{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  transition:transform .18s,box-shadow .18s}
.sl-page .sl-story:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sl-page .sl-story img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* Titles wrap to different heights; keep the read link on a shared baseline. */
.sl-page .sl-story-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:16px 18px 18px}
.sl-page .sl-story-body .sl-link{margin-top:auto;padding-top:12px}
.sl-page .sl-story h3{font-size:16px;font-weight:700;text-transform:uppercase;margin:8px 0 0;line-height:1.25}

/* FAQ */
.sl-page .sl-faq{display:flex;flex-direction:column;gap:10px;max-width:900px}
.sl-page .sl-faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.sl-page .sl-faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-family:var(--font-display);font-size:16px;
  font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:12px;transition:background .14s}
.sl-page .sl-faq summary::-webkit-details-marker{display:none}
.sl-page .sl-faq summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s}
.sl-page .sl-faq details[open] summary::after{transform:rotate(-135deg)}
.sl-page .sl-faq summary:hover{background:var(--bg)}
.sl-page .sl-faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sl-page .sl-faq p{padding:0 18px 16px;font-size:15px;line-height:1.75;color:#3a4052}
.sl-page .sl-sources{margin-top:26px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.sl-page .sl-sources h3{font-size:15px;font-weight:700;text-transform:uppercase;margin-bottom:10px}
.sl-page .sl-sources li{font-size:14px;color:#4a5162;padding:6px 0;border-bottom:1px solid var(--border);line-height:1.55}
.sl-page .sl-sources li:last-child{border-bottom:0}
.sl-page .sl-sources li b{color:var(--fg);font-weight:600}
.sl-page .sl-disc{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6}

/* Collection */
.sl-page .sl-prods{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.sl-page .sl-prod{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.sl-page .sl-prod:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.sl-page .sl-prod-img{position:relative;overflow:hidden;background:var(--bg)}
.sl-page .sl-prod img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:transform .3s}
.sl-page .sl-prod:hover img{transform:scale(1.04)}
.sl-page .sl-prod-body{padding:12px 14px 14px}
.sl-page .sl-prod .cat{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sl-page .sl-prod h3{font-size:13.5px;font-weight:600;font-family:var(--font-body);text-transform:none;line-height:1.4;
  margin:6px 0 9px;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-page .sl-prod .price{font-family:var(--font-display);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}

.sl-page .sl-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.sl-page .sl-sechead .sl-head{margin-bottom:0}

/* Responsive */

/* ===== WORDPRESS-ONLY ADDITIONS =====
   Rules the standalone mockup carried as inline styles or did not need at all
   (the mockup had no pagination and no editor-supplied rich text). */

/* Alternating light band; was an inline style on four sections in the mockup. */
.sl-page .sl-surface{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* Editor rich text (wysiwyg fields). */
.sl-page .sl-prose p{font-size:15.5px;line-height:1.78;color:#3a4052;margin-bottom:14px}
.sl-page .sl-prose p:last-child{margin-bottom:0}
.sl-page .sl-prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.sl-page .sl-prose ul,.sl-page .sl-prose ol{display:flex;flex-direction:column;gap:9px;margin:0 0 14px;padding-left:18px}
.sl-page .sl-prose li{font-size:15px;line-height:1.7;color:#3a4052;list-style:disc}
.sl-page .sl-prose ol li{list-style:decimal}
.sl-page .sl-prose strong{font-weight:600;color:var(--fg)}
.sl-page .sl-prose-sm p,.sl-page .sl-prose-sm li{font-size:14.5px;line-height:1.6;color:#4a5162}
.sl-page .sl-prose-sm li{list-style:none;padding-left:0}
.sl-page .sl-prose-sm ul{padding-left:0;gap:9px}
.sl-page .sl-aside h3{margin:0 0 4px}

/* Cards that are links: the anchor must not inherit the theme's link colour. */
.sl-page a.sl-card{color:inherit}

/* ?view=all — the full catalogue instead of the ten-product teaser. */
.sl-page .sl-prods.is-grid{grid-template-columns:repeat(4,1fr)}
.sl-page .sl-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--border)}
.sl-page .sl-pg{min-width:38px;height:38px;padding:0 11px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;
  transition:border-color .15s,background .15s,color .15s}
.sl-page .sl-pg:hover{border-color:var(--fg)}
.sl-page .sl-pg.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.sl-page .sl-pg-arrow{padding:0;min-width:38px}
/* Disabled at the ends: still occupies its slot so the row does not shift. */
.sl-page .sl-pg-arrow.is-off{opacity:.35;pointer-events:none}
.sl-page .sl-pg-gap{width:22px;text-align:center;color:var(--muted);font-weight:600;letter-spacing:.08em;
  align-self:center;user-select:none}
/* The exact position, for anyone who lands mid-catalogue. */
.sl-page .sl-pg-count{flex-basis:100%;text-align:center;margin-top:12px;font-size:12.5px;color:var(--muted)}

@media(max-width:1040px){
  .sl-page .sl-hero-grid{grid-template-columns:1fr;gap:30px}
  .sl-page .sl-g4{grid-template-columns:repeat(2,1fr)}
  .sl-page .sl-prods,.sl-page .sl-prods.is-grid{grid-template-columns:repeat(3,1fr)}
  .sl-page .sl-facts{grid-template-columns:repeat(2,1fr)}
  .sl-page .sl-points-wrap{grid-template-columns:1fr}
  .sl-page .sl-feature{grid-template-columns:220px 1fr}
}
@media(max-width:920px){
  .sl-page .sl-g3,.sl-page .sl-g2{grid-template-columns:1fr}
  .sl-page .sl-spec div{grid-template-columns:1fr;gap:4px}
}
@media(max-width:560px){
  .sl-page .sl-block{padding:38px 0}
  .sl-page .sl-hero{padding:38px 0 42px}
  .sl-page .sl-g4,.sl-page .sl-prods,.sl-page .sl-prods.is-grid{grid-template-columns:repeat(2,1fr)}
  .sl-page .sl-feature{grid-template-columns:1fr}
  .sl-page .sl-answer-card{padding:22px 18px}
  /* Three stats never fit a wrapped flex row on a phone — give them equal columns. */
  .sl-page .sl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .sl-page .sl-stat b{font-size:27px}
  .sl-page .sl-stat span{font-size:11.5px;max-width:none}
  .sl-page .sl-table th,.sl-page .sl-table td{padding:9px 10px;font-size:13.5px}
  .sl-page .sl-time{padding-left:20px}
  .sl-page .sl-time-item::before{left:-27px}
}