/* Extreme (#/extreme, js/pages_extreme.js; plan docs/plans/samlpeerceo-feat-extreme-page.md).
   Extreme's own language: Impactful Black, Bold Red #AF001E, Precise White;
   angular, nothing rounder than 2px; the hexagon motif is clip-path traced
   from the mark's outline. The only face is the Veyora brand face
   (store.css 'Veyora Brand', Chromatic Pro Variable): font-stretch maps onto
   its wdth axis (50-200%), and 'slnt' is the one axis set by
   font-variation-settings, on the display line only. Everything is scoped
   under .xt and prefixed xt- so nothing here restyles another page. The
   shared product cards are not restyled: they sit on a white band. */
.xt,.xt-page{
  --xt-black:#000000;
  --xt-red:#af001e;
  --xt-red-deep:#8a0018;
  --xt-white:#ffffff;
  --xt-ink-soft:rgba(255,255,255,.72);
  --xt-ink-faint:rgba(255,255,255,.46);
  --xt-rule:rgba(255,255,255,.14);
  --xt-rule-red:rgba(175,0,30,.55);
  --xt-hex:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%);
  --xt-radius:2px;
  --xt-gap:clamp(20px,3.6vw,64px);
  --xt-ease:cubic-bezier(.2,.7,.2,1);
}
.page.xt-page,.page:has(.xt),.app-shell > .app-body > .page:has(.xt){max-width:none;width:100%;padding:0;margin:0;background:var(--xt-black)}
.xt{background:var(--xt-black);color:var(--xt-white);font-family:var(--brand-font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
.xt *{box-sizing:border-box}
.xt img{max-width:100%;display:block}
/* Resets at zero specificity, so every xt- class below sets its own margins. */
.xt :where(h1,h2,h3,p,ul,ol,figure){margin:0;padding:0}
.xt :where(ul,ol){list-style:none}
.xt :focus-visible{outline:2px solid var(--xt-red);outline-offset:3px}
.xt-wrap{max-width:1440px;margin:0 auto;padding:0 var(--xt-gap)}

/* ---------- type ---------- */
.xt-display{font-family:var(--brand-font);font-weight:700;font-stretch:150%;font-variation-settings:'slnt' 10;text-transform:uppercase;letter-spacing:-.01em;line-height:.9}
.xt-title{font-family:var(--brand-font);font-weight:700;font-stretch:150%;text-transform:uppercase;letter-spacing:-.01em;line-height:.95;font-size:clamp(30px,3.6vw,56px)}
.xt-spec{font-family:var(--brand-font);font-weight:700;font-stretch:200%;text-transform:uppercase;letter-spacing:.02em;font-variant-numeric:tabular-nums;font-size:clamp(18px,2vw,28px);line-height:1}
.xt-kicker{font-family:var(--brand-font);font-weight:600;font-stretch:150%;text-transform:uppercase;letter-spacing:.22em;font-size:12px;line-height:1.4;color:var(--xt-ink-faint)}
.xt-h{font-family:var(--brand-font);font-weight:700;font-stretch:125%;text-transform:uppercase;letter-spacing:0;font-size:clamp(17px,1.5vw,21px);line-height:1.15}
.xt-body{font-family:var(--brand-font);font-weight:400;font-stretch:112%;font-size:15px;line-height:1.55;color:var(--xt-ink-soft)}
.xt-lead{font-family:var(--brand-font);font-weight:500;font-stretch:125%;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:var(--xt-ink-soft);max-width:36em;text-wrap:balance}
[dir="rtl"] .xt-display{font-variation-settings:'slnt' 0}

/* ---------- buttons ---------- */
.xt-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-family:var(--brand-font);font-weight:700;font-stretch:125%;text-transform:uppercase;letter-spacing:.1em;font-size:13px;line-height:1;padding:14px 24px;border-radius:var(--xt-radius);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background-color .16s var(--xt-ease),border-color .16s var(--xt-ease),color .16s var(--xt-ease)}
.xt-btn.pri{background:var(--xt-red);color:var(--xt-white);border-color:var(--xt-red)}
.xt-btn.pri:hover{background:var(--xt-red-deep);border-color:var(--xt-red-deep);color:var(--xt-white)}
.xt-btn.sec{background:transparent;color:var(--xt-white);border-color:rgba(255,255,255,.55)}
.xt-btn.sec:hover{border-color:var(--xt-white);color:var(--xt-white)}
.xt-btn:disabled{opacity:.55;cursor:default}
.xt-btn[data-sent]{opacity:1;background:transparent;border-color:var(--xt-rule-red);color:var(--xt-white)}
.xt-acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 1. hero ---------- */
/* The film is shown whole, at its own aspect: it carries captions in its
   lower third and ends on the lockup, so nothing is laid over it. On a tall
   enough screen it is full-bleed; past the fold height it narrows, centred
   on black, rather than crop. The copy sits under it. */
.xt-hero{position:relative;background:var(--xt-black)}
.xt-hero-media{position:relative;width:min(100%,calc((100svh - 64px) * 16 / 9));aspect-ratio:16/9;margin:0 auto;overflow:hidden;background:var(--xt-black)}
.xt-hero-media picture,.xt-hero-media .xt-poster img,.xt-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (orientation:portrait){.xt-hero-media{aspect-ratio:9/16;width:min(100%,calc((100svh - 64px) * 9 / 16))}}
.xt-nobr{white-space:nowrap}
.xt-film{opacity:0;transition:opacity .6s var(--xt-ease)}
.xt-film.on{opacity:1}
/* The film's sound toggle, top corner (the film's own captions and counters
   live in its lower third); shown only once the film plays. */
.xt-sound{position:absolute;z-index:2;top:clamp(14px,1.8vw,28px);inset-inline-end:clamp(14px,1.8vw,28px);display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 13px;font-family:var(--brand-font);font-weight:700;font-stretch:125%;text-transform:uppercase;letter-spacing:.16em;font-size:11px;line-height:1;color:var(--xt-white);background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.42);border-radius:var(--xt-radius);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .16s var(--xt-ease),background-color .16s var(--xt-ease)}
.xt-sound[hidden]{display:none}
.xt-sound:hover{border-color:var(--xt-white);background:rgba(0,0,0,.62)}
.xt-sound[aria-pressed="true"]{border-color:var(--xt-red)}
.xt-sound svg{flex:none}
/* The 16:9 cut is letterboxed (bars of 5.2% top and bottom): the toggle sits inside the picture. */
@media (orientation:landscape){.xt-sound{top:calc(5.2% + clamp(12px,1.4vw,22px))}}
.xt-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(40px,4.4vw,72px);padding-bottom:clamp(8px,1vw,16px)}
/* Film and poster both say READY FOR ANYTHING; the h1 stays for screen readers. */
.xt-tagline{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.xt-hero-kicker{color:var(--xt-white);margin-bottom:18px}
.xt-hero .xt-lead{max-width:34em;margin-bottom:clamp(24px,2.4vw,32px)}
.xt-hero .xt-acts{justify-content:center}

/* ---------- section frame ---------- */
.xt-sec{padding:clamp(80px,9vw,144px) 0}
.xt-sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:end;padding-bottom:clamp(28px,3vw,44px);margin-bottom:clamp(36px,4vw,64px);border-bottom:1px solid var(--xt-rule)}
.xt-sec-h .xt-body{max-width:30em;justify-self:end;text-align:end}

/* ---------- 2. proof ---------- */
.xt-hexes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.xt-hex{position:relative;aspect-ratio:1.16;clip-path:var(--xt-hex);background:var(--xt-rule-red)}
.xt-hex-in{position:absolute;inset:1px;clip-path:var(--xt-hex);background:linear-gradient(180deg,#0e0e0e,#050505);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:0 16%}
.xt-hex .xt-spec{font-size:clamp(20px,2.1vw,32px);color:var(--xt-white)}
.xt-hex .xt-spec-long{font-stretch:125%;font-size:clamp(14px,1.25vw,19px);letter-spacing:.01em;line-height:1.2;overflow-wrap:anywhere}
.xt-hex-l{font-family:var(--brand-font);font-weight:500;font-stretch:125%;text-transform:uppercase;letter-spacing:.14em;font-size:11px;line-height:1.45;color:var(--xt-ink-soft)}
/* The test still as a lab monitor: a thin frame, white corner ticks just
   outside it, a HUD label pair on the picture (LIVE FIRE TEST left, the
   standard right in red) and faint scanlines, so the 636x360 master reads as
   footage on a screen rather than a small photo. Beside it, centred on it,
   the standard and one line. Two balanced columns on desktop, stacked on
   phones. */
.xt-test{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:center;margin-top:clamp(64px,7vw,112px)}
.xt-mon{position:relative;padding:clamp(12px,1.1vw,16px)}
.xt-mon-screen{position:relative;overflow:hidden;border:1px solid var(--xt-rule);background:#050505}
.xt-mon-screen img{width:100%;height:auto;aspect-ratio:580/524;object-fit:cover;filter:contrast(1.06) brightness(.94)}
.xt-mon-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.16) 2px,rgba(0,0,0,.16) 3px),radial-gradient(ellipse at center,rgba(0,0,0,0) 58%,rgba(0,0,0,.42) 100%)}
.xt-mon-hud{position:absolute;inset:0 0 auto 0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 28px;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0))}
.xt-mon-hud span{font-family:var(--brand-font);font-weight:700;font-stretch:150%;text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;line-height:1;white-space:nowrap}
.xt-mon-live{display:flex;align-items:center;gap:9px;color:var(--xt-white)}
.xt-mon-live i{display:block;width:10px;height:9px;background:var(--xt-red);clip-path:var(--xt-hex)}
.xt-mon-std{color:var(--xt-red);letter-spacing:.12em}
.xt-tick{position:absolute;width:18px;height:18px;border:0 solid var(--xt-white);opacity:.9;pointer-events:none}
.xt-tick.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.xt-tick.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.xt-tick.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.xt-tick.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.xt-test figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.xt-test-kicker{color:var(--xt-ink-soft)}
.xt-test-spec{font-size:clamp(26px,3.5vw,52px);font-stretch:150%;line-height:1.02;letter-spacing:-.005em;color:var(--xt-white)}
.xt-test-rule{display:block;width:44px;height:2px;background:var(--xt-red)}
.xt-test figcaption .xt-body{font-size:clamp(15px,1.15vw,17px);max-width:24em;text-wrap:balance}

/* ---------- 3. technology ---------- */
.xt-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(14px,1.6vw,24px)}
.xt-feat{position:relative;display:flex;flex-direction:column}
.xt-feat-img{aspect-ratio:4/3;background:#0b0b0b;overflow:hidden}
.xt-feat-img img{width:100%;height:100%;object-fit:cover}
.xt-feat-txt{position:relative;padding-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:8px;align-items:baseline}
.xt-feat-txt::before,.xt-feat-txt::after{content:"";position:absolute;top:0;left:0;right:0;height:1px}
.xt-feat-txt::before{background:var(--xt-rule)}
.xt-feat-txt::after{background:var(--xt-red);height:2px;transform:scaleX(.14);transform-origin:left;transition:transform .32s var(--xt-ease)}
[dir="rtl"] .xt-feat-txt::after{transform-origin:right}
.xt-feat:hover .xt-feat-txt::after{transform:scaleX(1)}
.xt-idx{color:var(--xt-red);font-size:clamp(16px,1.4vw,20px);grid-row:1 / span 2}
.xt-feat .xt-body{grid-column:2}

/* ---------- 4. for whom ---------- */
.xt-for{border-top:1px solid var(--xt-rule-red);border-bottom:1px solid var(--xt-rule-red)}
.xt-for-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px clamp(24px,4vw,64px);padding-top:clamp(26px,3vw,40px);padding-bottom:clamp(26px,3vw,40px)}
.xt-for ul{display:flex;flex-wrap:wrap;justify-content:center;row-gap:12px}
.xt-for li{display:flex;align-items:center;color:var(--xt-white)}
.xt-for li + li::before{content:"";display:block;width:10px;height:9px;background:var(--xt-red);clip-path:var(--xt-hex);margin:0 clamp(20px,3vw,48px)}

/* ---------- 5. the range: white band, shared cards untouched ---------- */
.xt-range{background:var(--xt-white);color:var(--xt-black);padding:clamp(72px,8vw,128px) 0}
.xt-range-h{display:flex;align-items:center;gap:clamp(16px,2vw,28px);padding-bottom:clamp(24px,2.6vw,36px);margin-bottom:clamp(28px,3vw,44px);border-bottom:2px solid var(--xt-red)}
.xt-range-mark{width:clamp(48px,4.4vw,64px);height:auto;flex:none}
.xt-range-h .xt-body{color:rgba(0,0,0,.6);margin-top:10px}
.xt-grid{min-height:200px}
.xt-grid.xt-grid-empty{display:block}
.xt-empty{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:clamp(28px,3vw,44px) 0}
.xt-empty .xt-body{color:rgba(0,0,0,.72);font-size:17px;max-width:34em}

/* ---------- 6. B2B call to action ---------- */
.xt-cta-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center}
.xt-cta-mark{width:clamp(56px,5vw,80px);height:auto}
.xt-cta-t{font-size:clamp(30px,4.4vw,64px);margin-bottom:22px}
.xt-cta-copy .xt-body{max-width:36em;text-wrap:pretty}
.xt-cta-acts{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:340px}
.xt-consent{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:var(--xt-ink-soft);cursor:pointer}
.xt-consent input{margin:2px 0 0;width:16px;height:16px;flex:none;accent-color:var(--xt-red)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .xt-hexes{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin:0 auto}
  .xt-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xt-cta-in{grid-template-columns:auto minmax(0,1fr)}
  .xt-cta-acts{grid-column:2}
}
@media (max-width:760px){
  .xt-sec-h{grid-template-columns:1fr;align-items:start}
  .xt-sec-h .xt-body{justify-self:start;text-align:start}
  .xt-acts{justify-content:center}
  .xt-hero-kicker{letter-spacing:.16em;font-size:11px}
  .xt-sound{height:36px;padding:0 13px 0 11px;font-size:10px;letter-spacing:.14em}
  .xt-hero .xt-acts{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .xt-hexes{gap:10px}
  .xt-hex-in{gap:8px;padding:0 15%}
  .xt-hex .xt-spec{font-size:18px}
  .xt-hex .xt-spec-long{font-size:11.5px}
  .xt-hex-l{font-size:9.5px;letter-spacing:.1em}
  .xt-test{grid-template-columns:1fr;gap:36px;text-align:center;margin-top:64px}
  .xt-mon{padding:10px}
  .xt-mon-hud{padding:11px 12px 22px}
  .xt-mon-hud span{font-size:9.5px;letter-spacing:.14em}
  .xt-test figcaption{align-items:center;gap:18px}
  .xt-test-spec{font-size:clamp(22px,6.4vw,30px)}
  .xt-feats{grid-template-columns:1fr}
  .xt-for-in{flex-direction:column}
  .xt-for ul{flex-direction:column;align-items:center;gap:10px}
  .xt-for li + li::before{display:none}
  .xt-cta-in{grid-template-columns:1fr;justify-items:start}
  .xt-cta-acts{grid-column:auto;max-width:none;width:100%}
  .xt-cta-acts .xt-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .xt *{animation:none !important;transition:none !important}
}

/* ---------- the catalogue's Extreme card (pages_catalog.js catalogCtaCard('extreme')) ----------
   The walls card's shape (walls.css .cta-walls), in Extreme's colours. */
.cta-card.cta-extreme .cta-extreme-img{background:#000}
.cta-card.cta-extreme .attrline{color:#af001e}
.cta-card.cta-extreme .cta-wall-btn{background:#000;color:#fff}
.cta-card.cta-extreme:hover .cta-wall-btn,.cta-card.cta-extreme:focus-visible .cta-wall-btn{background:#af001e}