/* ── global ── */
/* ═══════════════════════════════════════════════════════════════════
   ELYRA — SHARED SITE STYLES
   Used by every sub-page (pages/*.html). The homepage has its own
   embedded styles. This file = nav + footer + base type + utility.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Brand ─────────────────────────────────────────────────────────
     The pair: Dark Red #BD2402 and Lime Green #9EE858, on a neutral
     near-black. (Replaced #ED2024 and #A3E635.) Every other red and
     lime on the site is derived from these two, keeping their hue -
     red sits at hue 11, lime at 91 - and only moving lightness so each
     role is legible where it is used:
       --red      #BD2402  the brand: fills, rules, marks, headlines.
                           White on it is 6.15:1, so it is now the CTA
                           fill itself (the old red only managed 4.35).
                           As text it is 3.16:1 on the page - enough
                           for display type, not for anything small.
       --red-ink  #FC3003  red as small TEXT: 5.15:1 on the page,
                           4.51:1 on a panel. Every color: rule uses it.
       --red-h    #DB2A02  hover. White on it is 4.83:1.
       --red-aa   #BD2402  solid fill under white text - now simply the
                           brand red, kept as a name so callers read clearly.
     Lime on red directly is 4.14:1: fine for marks and big graphics,
     never for small text. */
  --bg:   #0D0D0D;
  --bg-1: #151515;
  --bg-2: #1C1C1C;
  --bdr:  #262626;
  --bdr2: #363636;
  --txt:  #F8F1E7;
  --dim:  #8A847C;
  --mid:  #B3ADA6;
  --red:  #BD2402;
  --red-h:#DB2A02;
  --red-ink:#FC3003;
  --red-aa: #BD2402;
  /* --red-display #DB2A02: headline-size red on a ground lighter than
     the page - tinted bands, raised panels - where #BD2402 drops just
     under the 3:1 large text needs. Same hue, one step up. */
  --red-display: #DB2A02;

  /* Lime is the site's one go colour: live, passing, done, good news.
     It started on the kerb-to-class race, where moving painted in brand
     red read as a warning. It now carries every status that used to be
     one of four near-identical greens - #6DD06D, #3ECB63, #25b34b and
     their rgba forms - across live dots, certifications, copy
     confirmations, open roles and form success.

     One green is deliberately NOT this: the #28C840 in .zx-lights,
     which is the green button of a macOS window and a literal metaphor.
     (A --teal and a --sky token used to sit here as accents. They were
     declared and never once used, so they are gone - a cool hue has no
     place in a palette this warm anyway.)

     One exception to the verdict rule, and it is a big one: the rhombus
     behind every panel-cell icon is lime too. That is decoration, not a
     verdict. It earns it on legibility - the near-black glyph reads at
     13.25:1 on lime #9EE858 - but it does mean lime no
     longer only ever means go, so read the context before assuming.

     --lime-ink  brighter, for small lime text on the dark ground (14.0:1)
     --lime-deep darker, for lime on the PAPER surfaces - receipts, the
                 printed ticket, the planner stamp - where var(--lime) on warm
                 white is 1.3:1 and unreadable. It is 5.3:1 there, which
                 matches the red the receipt totals already use. */
  --lime: #9EE858;
  --lime-ink: #B1EC79;
  --lime-deep: #3E700F;

  /* ── Panels ────────────────────────────────────────────────────────
     One raised surface, used by every block of content that is a panel
     rather than page ground: feature grids, spec ledgers, KPI strips,
     accordions, swatch and asset grids.

     The old panel was --bg-1 on --bg, a step of 1.06:1 - so close to
     the ground that the shells read as hairlines floating in nothing.
     --panel doubles that step to 1.14:1, which is still quiet but
     actually reads as a surface. Text on it is unaffected: --txt is
     15.2:1 there and --mid is 7.7:1.

       --panel       the surface a panel sits on
       --panel-line  hairline between cells INSIDE a panel
       --panel-edge  the outer wall of the panel
       --panel-r     corner radius
       --panel-sh    a 1px top highlight for the lit edge, over a soft
                     drop shadow that separates the panel from the page */
  --panel: #1C1C1C;
  --panel-line: #303030;
  --panel-edge: #343434;
  --panel-r: 20px;
  --panel-sh: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 34px -22px rgba(0,0,0,.95);

  /* ── Motion ────────────────────────────────────────────────────────
     Four durations, picked by how much of the screen changes, and four
     curves, picked by direction. Before this the site ran 20-odd
     transition durations - .18s, .2s, .22s and .25s all coexisting,
     which nobody can tell apart - and 124 bare `ease`, the browser
     default, which is what you get when nobody chose.

       --dur-1  120ms  colour, opacity, press feedback
       --dur-2  200ms  small UI: chips, toggles, icons, arrows
       --dur-3  320ms  panels, menus, the nav, larger hovers
       --dur-4  560ms  anything page-scale
       --dur-reveal    680ms, the scroll reveal, kept on its own

       --ease-out     decelerate: things arriving. The house curve.
       --ease-in-out  moving between two resting places on screen
       --ease-in      accelerate: things leaving
       --ease-spring  a small overshoot, for pops and confirmations

     Anything 700ms and up - the printer, the race, the marquees - is
     choreography rather than a transition, and keeps its own timing.
     prefers-reduced-motion collapses all of it (polish.ts). */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 560ms;
  --dur-reveal: 680ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── Theme pivots ──────────────────────────────────────────────────
     Overlays are written rgba(var(--ink-rgb), a) / rgba(var(--ground-rgb), a)
     rather than as literals, so one token swap re-tints every hairline,
     tint and rule for the opposite theme.
       --ink-rgb     the text colour as raw channels
       --ground-rgb  the page ground as raw channels
       --txt-hi      maximum-contrast text ON the page ground
       --on-red      text on a brand-red fill; white in BOTH themes */
  --ink-rgb: 248,241,231;
  --ground-rgb: 13,13,13;
  --txt-hi: #fff;
  --on-red: #fff;
  /* ── Amber ─────────────────────────────────────────────────────────
     The third and last hue. Red is the brand, lime is go, amber is the
     middle state - degraded, not down; slowing, not stopped. It was
     five literals (var(--amber), var(--amber), #FEBC2E and friends) scattered
     across the status bars, the geofence HUD and the battery before it
     was a colour anybody had named. --amber-deep is the far end of the
     battery gradient. */
  --amber: #E8B04B;
  --amber-deep: #A86C05;

  /* ── Paper ─────────────────────────────────────────────────────────
     Receipts, tickets and the printed stub are a second surface with a
     light ground, so the whole text ramp inverts. These are the ink
     values for it, not reused from the dark scale: a warm grey that
     reads on near-black is not the warm grey that reads on paper.
     They are deliberately NOT named --ink-something: .elx shadows
     --ink with var(--txt), so a token called --ink-2 inside a live
     module would read as near-white, the opposite of ink.
       --ink          body ink (global scope only - shadowed in .elx)
       --paper-ink    secondary ink: labels, meta, barcodes
       --paper-faint  faint ink: dotted leaders, rules
       --paper-red    brand red tuned for paper (5.3:1 there) */
  --paper:#F8F1E7;
  --paper-2:#EFE4D4;
  --ink:  #1B1512;
  --paper-ink: #4A4438;
  --paper-faint: #BDB49F;
  --paper-red: #BD2402;
  --fd:   'Syne', sans-serif;
  --fm:   'Plus Jakarta Sans', sans-serif;
  --fs:   'DM Serif Display', serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--txt);
  font-family: var(--fm); font-size: 14px; line-height: 1.6;
  overflow-x: hidden; cursor: none;
  -webkit-font-smoothing: antialiased;
  /* Replace the default blue iOS Safari tap-flash with a subtle red wash. */
  -webkit-tap-highlight-color: rgba(189, 36, 2, .18);
  /* Honour the iPhone safe-area when nav/footer use position: fixed. */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
::selection { background: var(--red); color: #fff; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(189, 36, 2, .18); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: none; -webkit-tap-highlight-color: rgba(189, 36, 2, .18); }

/* ── CURSOR ── */
#cur {
  width: 10px; height: 10px;
  background: var(--red); border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
  mix-blend-mode: difference;
}
#cur.big { width: 38px; height: 38px; }
@media (max-width: 768px) {
  body { cursor: auto; }
  button, a { cursor: pointer; }
  #cur { display: none; }
}

/* ── NAV ── */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 96px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 24px;
  /* Zero vertical padding lets `align-items: center` actually center the
     row contents — padding was forcing the logo & links toward the bottom. */
  padding: 0 44px;
  background: rgba(13, 13, 13,.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(var(--ink-rgb), .05);
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 80px; width: auto; display: block; filter: brightness(0) invert(1); }
.nav-status {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--fm); font-size: 10px; color: var(--mid);
  letter-spacing: .12em; text-transform: uppercase;
}
.nav-status .dot {
  width: 8px; height: 8px; background: var(--red);
  border-radius: 50%; animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(189, 36, 2,.6); }
  50%     { box-shadow: 0 0 0 5px rgba(189, 36, 2,0); }
}
.ns-bracket { color: var(--txt); }
.nav-links {
  display: flex; gap: 36px; list-style: none;
  /* Right-aligned: links hug the GET THE APP pill instead of sitting
     in dead-center of the bar. */
  justify-content: flex-end; align-items: center; padding: 0;
  /* Optical lift — typography descender space makes geometrically-centered
     uppercase text feel slightly low; -4px brings the cap-line to the eye's
     "true" middle. Applied to the link group and the button so they stay
     aligned with each other. */
  margin: -4px 0 0;
}
.nav-links li { display: flex; align-items: center; }
.nav-links a {
  font-family: var(--fm); font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mid); transition: color var(--dur-2) var(--ease-out);
  position: relative;
  /* inline-flex + line-height:1 collapses the inherited 1.6 line-box so the
     glyphs themselves (not the leading space above/below) sit at the nav's
     vertical center. */
  display: inline-flex; align-items: center; line-height: 1;
  padding: 6px 0;
}
.nav-links a:hover { color: var(--txt); }
.nav-links a.current { color: var(--txt); }
.btn-getapp {
  background: var(--red-aa); color: #fff; border: none;
  padding: 12px 22px; border-radius: 100px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  /* Same -4px optical lift as .nav-links so the pill stays on the same
     visual line as the centered link row. */
  margin-top: -4px;
}
.btn-getapp .arr { font-size: 13px; transition: transform var(--dur-2) var(--ease-out); display: inline-block; }
.btn-getapp:hover { background: var(--red-aa); transform: translateY(-2px); box-shadow: 0 0 32px rgba(189, 36, 2,.5); }
.btn-getapp:hover .arr { transform: translate(2px, -2px); }

/* ── BREADCRUMB ── */
.crumb {
  font-family: var(--fm); font-size: 10px; color: var(--dim);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 96px 44px 0; max-width: 1440px; margin: 0 auto;
}
.crumb a { color: var(--dim); transition: color var(--dur-2) var(--ease-out); }
.crumb a:hover { color: var(--txt); }
.crumb .sep { margin: 0 10px; color: var(--bdr2); }
.crumb .here { color: var(--txt); }

/* ── PAGE HERO ── */
.page-hero {
  position: relative; min-height: 60vh;
  /* Top padding == fixed nav height (96px) so the hero sits flush
     against the nav with no empty band. */
  padding: 96px 44px 90px;
  border-bottom: 1px solid var(--bdr);
  overflow: hidden;
}
.page-hero .bg {
  position: absolute; inset: 0; z-index: 0;
}
.page-hero .bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13, 13, 13,.92) 0%, rgba(13, 13, 13,.55) 50%, rgba(13, 13, 13,.18) 100%);
}
.page-hero .inner {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
}
.page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fm); font-size: 10px; letter-spacing: .2em;
  color: var(--red-ink); text-transform: uppercase; margin-bottom: 28px;
}
.page-hero .eyebrow::before { content: none; }
.page-hero h1 {
  font-family: var(--fd); font-weight: 800;
  font-size: clamp(58px, 9vw, 130px);
  line-height: .92; letter-spacing: -.045em;
  text-transform: uppercase; max-width: 1100px;
}
.page-hero h1 em {
  font-family: var(--fs); font-weight: 400; font-style: italic;
  text-transform: none; letter-spacing: -.02em;
  color: var(--red);
}
.page-hero .sub {
  margin-top: 32px; max-width: 640px;
  font-family: var(--fm); font-size: 16px; line-height: 1.65;
  color: var(--mid); font-weight: 300;
}

/* ── SECTION SHELL ── */
section.std {
  position: relative;
  padding: 110px 44px;
  border-bottom: 1px solid var(--bdr);
  max-width: 100%;
}
section.std .inner { max-width: 1440px; margin: 0 auto; }
.sec-head {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 80px; margin-bottom: 64px; align-items: end;
}
.sec-tag {
  font-family: var(--fm); font-size: 10px; color: var(--red-ink);
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px;
}
.sec-num {
  font-family: var(--fm); font-size: 11px; color: var(--dim);
  letter-spacing: .15em;
}
.sec-title {
  font-family: var(--fd); font-weight: 800;
  font-size: clamp(40px, 5.5vw, 80px); line-height: .98;
  letter-spacing: -.035em; text-transform: uppercase;
}
.sec-title em {
  font-family: var(--fs); font-weight: 400; font-style: italic;
  text-transform: none; color: var(--red); letter-spacing: -.01em;
}

/* ── EDITORIAL CARD GRID ── */
.ed-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--bdr);
  border: 1px solid var(--bdr);
}
.ed-grid > div {
  background: var(--bg); padding: 56px 48px;
  position: relative;
  transition: background var(--dur-3) var(--ease-out);
}
.ed-grid > div:hover { background: var(--bg-1); }
.ed-grid h3 {
  font-family: var(--fd); font-weight: 800;
  font-size: 22px; letter-spacing: -.02em; text-transform: uppercase;
  margin-bottom: 14px;
}
.ed-grid p {
  font-family: var(--fm); font-size: 13px; color: var(--mid);
  font-weight: 300; line-height: 1.7;
}
.ed-grid .num {
  position: absolute; top: 20px; right: 24px;
  font-family: var(--fm); font-size: 10px; color: var(--dim);
  letter-spacing: .15em;
}

/* ── BUTTON ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fm); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; padding: 16px 26px;
  border: 1px solid var(--bdr2); transition: all var(--dur-2) var(--ease-out);
  background: transparent; color: var(--txt);
}
.btn:hover { background: var(--txt); color: var(--bg); border-color: var(--txt); }
.btn.primary {
  background: var(--red-aa); border-color: var(--red-ink); color: #fff;
}
.btn.primary:hover { background: var(--red-aa); border-color: var(--red-h); color: var(--txt-hi); }

/* ── FOOTER ── */
footer.site-foot {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--bdr);
  background: var(--bg);
}

.f-wordmark {
  padding: clamp(40px, 6vw, 64px) 24px clamp(36px, 5vw, 52px);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(148px, 20vw, 220px);
  overflow: visible;
}
.f-wordmark-track {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.f-wm-display {
  perspective: 900px;
  perspective-origin: 50% 58%;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
}
.f-wm-display-in {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(2px, .35vw, 8px);
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(64px, 11.5vw, 168px);
  letter-spacing: -.04em;
  line-height: .88;
  text-transform: uppercase;
  color: var(--txt);
}
.f-wm-letter {
  display: inline-block;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.f-wm-letter:first-child,
.f-wm-letter:last-child { opacity: .82; }
@media (prefers-reduced-motion: reduce) {
  .f-wm-display-in { transform: none !important; }
  .f-wm-letter { transform: none !important; opacity: 1 !important; }
}

.f-marquee {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--bdr);
  padding: 22px 0;
}
.f-marquee::before {
  content: attr(data-cat);
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 72px 0 44px;
  font-family: var(--fm); font-size: 10px; letter-spacing: .15em;
  color: var(--dim); text-transform: uppercase;
  z-index: 4; pointer-events: none;
  /* Full-height gutter: the marquee type has to pass fully BEHIND the label,
     so the mask spans the row height, not just the label's text box. */
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 58%, transparent 100%);
}
.f-marquee::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 130px;
  background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
  z-index: 2; pointer-events: none;
}
.f-marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  padding-left: 160px;
}
.f-marquee.dir-l .f-marquee-track { animation: marqueeL 45s linear infinite; }
.f-marquee.dir-r .f-marquee-track { animation: marqueeR 55s linear infinite; }
.f-marquee-track a {
  font-family: var(--fd); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 34px);
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--mid);
  transition: color var(--dur-2) var(--ease-out);
  display: inline-flex; align-items: center; gap: 14px;
}
.f-marquee-track a:hover { color: var(--red-ink); }
.f-marquee-track a::before {
  content: '↗'; font-family: var(--fm); font-weight: 300;
  font-size: .5em; color: var(--dim);
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
.f-marquee-track a:hover::before { color: var(--red-ink); transform: translateY(-2px); }

.f-body {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px; padding: 56px 44px;
  border-bottom: 1px solid var(--bdr);
}
.f-brand .f-logo {
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out);
}
.f-brand .f-logo img {
  height: 72px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.f-brand .f-logo:hover img {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(189, 36, 2, 0.6));
  transform: scale(1.02);
}
.f-brand p {
  font-size: 14px; color: var(--mid); line-height: 1.7;
  max-width: 420px; font-weight: 300; margin-bottom: 32px;
}
.f-social { display: flex; gap: 14px; flex-wrap: wrap; }
.f-social a {
  font-family: var(--fm); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mid);
  padding: 10px 16px; border: 1px solid var(--bdr);
  transition: all var(--dur-2) var(--ease-out);
}
.f-social a:hover {
  color: var(--txt); border-color: var(--red-ink);
  background: rgba(189, 36, 2,.06);
}
.f-news h4 {
  font-family: var(--fd); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -.02em; text-transform: uppercase;
  margin-bottom: 14px;
}
.f-news p { font-size: 13px; color: var(--dim); margin-bottom: 24px; line-height: 1.6; max-width: 380px; font-weight: 300; }
.f-form {
  display: flex; border: 1px solid var(--bdr);
  transition: border-color var(--dur-3) var(--ease-out);
}
.f-form:focus-within { border-color: var(--red-ink); }
.f-form input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--txt); font-family: var(--fm); font-size: 13px;
  padding: 16px 18px; letter-spacing: .02em;
}
.f-form input::placeholder { color: var(--dim); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.f-form button {
  background: var(--red); color: var(--txt); border: none;
  padding: 0 24px; font-family: var(--fd); font-weight: 700;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  transition: background var(--dur-2) var(--ease-out);
}
.f-form button:hover { background: var(--red-aa); }
.f-news-meta {
  display: flex; gap: 24px; margin-top: 18px;
  font-family: var(--fm); font-size: 10px; letter-spacing: .1em;
  color: var(--dim); text-transform: uppercase;
}
.f-news-meta span::before { content: none; }

.f-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 44px;
  font-family: var(--fm); font-size: 10px; color: var(--dim); letter-spacing: .08em;
  border-bottom: 1px solid var(--bdr);
}
.f-bot-links { display: flex; gap: 28px; }
.f-bot-links a { color: var(--dim); transition: color var(--dur-2) var(--ease-out); }
.f-bot-links a:hover { color: var(--txt); }

.f-signoff {
  padding: 70px 44px 60px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 40px; align-items: end;
  background: radial-gradient(ellipse at 50% 120%, rgba(189, 36, 2,.14) 0%, transparent 60%), var(--bg);
}
.f-sig-l, .f-sig-r {
  font-family: var(--fm); font-size: 10px; color: var(--dim);
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.9;
}
.f-sig-r { text-align: right; }
.f-sig-center {
  font-family: 'JetBrains Mono', monospace; font-weight: 400; font-style: italic;
  font-size: clamp(60px, 14vw, 220px); letter-spacing: -.04em;
  line-height: .9; color: var(--txt);
  display: flex; align-items: flex-end; gap: 0;
}
.f-sig-center .f-sig-dot {
  position: relative;
  display: inline-block;
  width: .18em; height: .18em;
  background: var(--red);
  margin-left: .04em; margin-bottom: .12em;
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: center center;
  animation: f-sig-dot-skew 2.8s ease-in-out infinite;
}
.f-sig-center .f-sig-scooter {
  position: absolute;
  top: 50%; left: 0;
  width: 56%; height: auto;
  color: #fff;
  animation: f-sig-scooter-ride 2.8s ease-in-out infinite;
}
@keyframes f-sig-scooter-ride {
  0%, 100% { transform: translate(8%, -50%); }
  42%, 58% { transform: translate(72%, -50%); }
}
@keyframes f-sig-dot-skew {
  0%, 100% { transform: skewX(0deg); }
  38% { transform: skewX(-18deg); }
  52% { transform: skewX(-18deg); }
  70% { transform: skewX(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .f-sig-center .f-sig-dot,
  .f-sig-center .f-sig-scooter { animation: none; }
  .f-sig-center .f-sig-scooter { transform: translate(40%, -50%); }
}
.f-sig-center b {
  font-family: var(--fd); font-weight: 800; font-style: normal;
  color: var(--red-ink); font-size: .4em;
  transform: translateY(-.9em); letter-spacing: 0;
}

@keyframes marqueeL {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeR {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── REVEAL ── */
.rev { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.rev.vis { opacity: 1; transform: translateY(0); }

/* ── ED-GRID EMPTY-CELL FIX ──
   Each subpage's inline CSS draws the 1px grid lines using
     .ed-grid-list { gap:1px; background: var(--bdr); }
   This works only when item count fills the grid. Sections with 1 or 3
   items (e.g. locations "Live now") leave empty grid cells, which then
   render as visible grey rectangles (the gap color showing through).
   Fix: switch the technique from gap+bg to per-item borders so empty
   cells show pure page background instead of grey.
   `!important` is necessary because the inline subpage <style> blocks
   are loaded after this stylesheet. */
.ed-grid-list {
  background: var(--bg) !important;
  gap: 0 !important;
}
.ed-grid-list .ed-grid-item {
  border-right: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}
.ed-grid-list .ed-grid-item:nth-child(2n) { border-right: none; }

/* Single-item lists (e.g. blog "featured post" cards): collapse to 1 col
   so the card spans the full width instead of leaving an empty cell. */
.ed-grid-list:has(> .ed-grid-item:only-child) {
  grid-template-columns: 1fr !important;
}
.ed-grid-list:has(> .ed-grid-item:only-child) .ed-grid-item {
  border-right: none;
}

/* Optional muted helper card used to fill empty cells with editorial copy
   instead of leaving them blank (used on locations / status pages). */
.ed-grid-item.ed-grid-filler {
  background: linear-gradient(135deg, rgba(var(--ink-rgb), .012), rgba(var(--ink-rgb), 0));
}
.ed-grid-item.ed-grid-filler h3 {
  color: var(--mid); font-style: italic;
}
.ed-grid-item.ed-grid-filler p {
  color: var(--dim);
}

/* ── EDITORIAL STORY STRIP ──
   Reusable image divider between text sections on subpages.
   Use as: <figure class="story-strip">
             <img src="..." alt="..." loading="lazy">
             <figcaption>
               <span class="cap-tag">DETAIL · 03</span>
               <span class="cap-text">Caption sentence.</span>
             </figcaption>
           </figure>
   Variants: .story-strip.tall (taller crop), .story-strip.short (shorter crop). */
.story-strip {
  position: relative; display: block;
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
  background: var(--bg); overflow: hidden;
}
.story-strip > img {
  display: block; width: 100%;
  height: clamp(360px, 56vw, 620px);
  object-fit: cover; object-position: center;
  transition: transform 1.6s var(--ease-out);
}
.story-strip:hover > img { transform: scale(1.02); }
.story-strip.tall  > img { height: clamp(440px, 72vw, 780px); }
.story-strip.short > img { height: clamp(280px, 38vw, 440px); }
.story-strip > figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 44px 26px;
  background: linear-gradient(to top, rgba(13, 13, 13,.92) 0%, rgba(13, 13, 13,.55) 60%, rgba(13, 13, 13,0) 100%);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 22px;
}
.story-strip .cap-tag {
  font-family: var(--fm); font-size: 10px; color: var(--red-ink);
  letter-spacing: .22em; text-transform: uppercase;
}
.story-strip .cap-text {
  font-family: var(--fd); font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700; color: var(--txt); letter-spacing: -.01em; line-height: 1.4;
  max-width: 720px;
}

/* ── PRODUCT DETAIL TRIO ──
   3-up image grid for product macro shots. */
.product-trio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--bdr);
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
}
.product-trio figure {
  position: relative; background: var(--bg); overflow: hidden;
  aspect-ratio: 4 / 5;
}
.product-trio figure img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1.4s var(--ease-out);
}
.product-trio figure:hover img { transform: scale(1.04); }
.product-trio figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 24px;
  background: linear-gradient(to top, rgba(13, 13, 13,.92) 0%, rgba(13, 13, 13,0) 100%);
  font-family: var(--fm); font-size: 11px; color: var(--txt);
  letter-spacing: .14em; text-transform: uppercase;
}
.product-trio figure figcaption .lbl {
  display: block; color: var(--red-ink); font-size: 9px; margin-bottom: 6px;
}
@media (max-width: 720px) {
  .story-strip > figcaption { padding: 22px 20px 20px; gap: 12px; }
  .story-strip > img { height: clamp(280px, 80vw, 460px); }
  .product-trio { grid-template-columns: 1fr; }
}

/* ── MOBILE NAV (hamburger + drawer) ──
   Mirrors the structure used by the homepage's inline nav so a single mental
   model covers both. Burger button is 44×44 px; drawer is a fixed overlay
   with full-width tap targets. */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: none; padding: 0;
  position: relative; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-burger span {
  position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--txt); border-radius: 2px;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 28px; }
nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-drawer {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(13, 13, 13,.96);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  padding: 96px 28px 48px;
  display: flex; flex-direction: column; gap: 28px;
  overflow-y: auto;
  opacity: 0; transform: translateY(-12px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
  pointer-events: none;
}
.nav-drawer[hidden] { display: flex; }
nav.nav-open .nav-drawer { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-drawer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-drawer ul li { display: block; }
.nav-drawer ul a {
  display: block; padding: 18px 4px;
  font-family: var(--fd); font-weight: 700; font-size: 28px;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--txt);
  border-bottom: 1px solid rgba(var(--ink-rgb), .06);
}
.nav-drawer ul a:active { color: var(--red-ink); }
.nav-drawer .drawer-cta {
  align-self: stretch; justify-content: center;
  margin: 12px 0 0; padding: 18px 24px;
  font-size: 14px; letter-spacing: .08em;
}

/* Hover-only effects guard: only apply on actual pointer devices. */
@media (hover: hover) {
  .btn-getapp:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(189, 36, 2,.5); }
  .btn-getapp:hover .arr { transform: translate(2px, -2px); }
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  nav.site-nav { padding: 0 28px; height: 84px; gap: 24px; }
  .nav-logo img { height: 64px; }
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 11px; letter-spacing: .12em; }
  .btn-getapp { padding: 10px 18px; font-size: 12px; }
  .page-hero { padding: 92px 28px 56px; }
  section.std { padding: 80px 28px; }
}
@media (max-width: 960px) {
  nav.site-nav { padding: 0 20px; height: 72px; gap: 12px; grid-template-columns: auto 1fr auto auto; }
  .nav-logo img { height: 52px; }
  .nav-status { display: none; }
  .nav-links { display: none; }
  nav.site-nav > .nav-lang { display: none; }
  /* Inline GET THE APP collapses into the drawer on mobile. */
  nav.site-nav > .btn-getapp { display: none; }
  .nav-burger { display: inline-flex; }

  .crumb { padding: 80px 20px 0; }
  .page-hero { padding: 88px 20px 56px; min-height: 50vh; }
  section.std { padding: 64px 20px; }
  .sec-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .ed-grid { grid-template-columns: 1fr; }
  .ed-grid > div { padding: 36px 24px; }
  .f-body { grid-template-columns: 1fr; padding: 40px 20px; gap: 40px; }
  .f-bot { flex-direction: column; gap: 16px; padding: 20px; text-align: center; }
  .f-bot-links { flex-wrap: wrap; justify-content: center; gap: 18px; }
  .f-bot-links a, .f-bot-links button {
    padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center;
  }
  .f-signoff { grid-template-columns: 1fr; padding: 40px 20px; text-align: center; }
  .f-sig-r { text-align: center; }
  .f-sig-center { justify-content: center; }

  /* iOS-only: prevent input-focus auto-zoom by pinning fields to ≥16 px. */
  input, textarea, select { font-size: 16px; }
}
@media (max-width: 480px) {
  nav.site-nav { padding: 0 16px; height: 64px; }
  .nav-logo img { height: 44px; }
  .nav-drawer { padding: 80px 22px 40px; }
  .nav-drawer ul a { font-size: 24px; padding: 16px 4px; }
  .page-hero { padding: 80px 16px 44px; }
  section.std { padding: 56px 16px; }
}

/* ── LANGUAGE SWITCHER (EN | FR) ── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  background: rgba(var(--ink-rgb), 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lang-switch button {
  min-width: 36px;
  padding: 6px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--ink-rgb), 0.45);
  font-family: 'JetBrains Mono', var(--fm), monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.lang-switch button:hover { color: rgba(var(--ink-rgb), 0.85); }
.lang-switch button.active {
  background: var(--red-aa);
  color: #fff;
  box-shadow: 0 0 18px rgba(189, 36, 2, 0.35);
}
.lang-sep {
  width: 1px;
  height: 14px;
  background: rgba(var(--ink-rgb), 0.12);
  margin: 0 2px;
}
.nav-lang { flex-shrink: 0; }
.nav-drawer .drawer-lang {
  margin-top: 28px;
  align-self: flex-start;
}
@media (max-width: 960px) {
  nav.site-nav > .nav-lang { display: none; }
  nav#nav > .nav-lang { display: none; }
}

/* ── overrides ── */
/* ─────────────────────────────────────────────────────────────
   Editable-copy overrides (loaded last).
   Keeps the OS cursor usable while you edit — which also happens
   to fix finding #3 (cursor:none) from the design review.
   ───────────────────────────────────────────────────────────── */
html, body { cursor: auto !important; }
a, button, .btn, .btn-p, .btn-getapp, .c-btn, .zone-cta, .pricing-cta, [role="button"] {
  cursor: pointer !important;
}
#cur { display: none !important; }

/* Side TOC — one line per title, left-aligned, no vertical letter stack */
.px-rail {
  width: 100%;
  min-width: 220px;
  max-width: 300px;
}
.px-toc a {
  display: block !important;
  grid-template-columns: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.px-toc a.on {
  font-family: var(--fd, 'Syne', sans-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  padding: 14px 0 16px !important;
  white-space: nowrap !important;
}
.px-layout {
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}

/* ── polish ── */
/* ═══════════════════════════════════════════════════════════════════
   ELYRA — POLISH LAYER
   UI/UX/motion refinement over the existing brand system.
   Loaded LAST on every page. Keeps the dark/red editorial identity;
   sharpens contrast, hover states, nav, focus, and motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens: contrast + motion budget (2026) ── */
:root {
  --radius: 20px;
  /* --dim used to be redefined here, a second value for a token that
     global.ts already owns. It silently won (polish loads later), so
     the one in global.ts did nothing. One definition, in one place. */
  /* The motion tokens that lived here moved to global.ts with the rest
     of the system. --dur-micro and --dur-ui were never used once. */
}

/* ── 2 · Foundations ── */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: var(--red); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #222; border: 2px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px; border-radius: 1px;
}

/* ── 3 · Scroll indicator: corner instrument ring (replaces the top bar) ── */
#ely-scroll {
  position: fixed; right: 24px; bottom: 24px; width: 52px; height: 52px; z-index: 99998;
  display: grid; place-items: center; cursor: pointer; border: 0; padding: 0; border-radius: 50%;
  background: rgba(8, 8, 8, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--txt); font-family: 'JetBrains Mono', ui-monospace, monospace;
  opacity: 0; transform: translateY(10px) scale(.85); pointer-events: none;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
#ely-scroll.on { opacity: 1; transform: none; pointer-events: auto; }
#ely-scroll::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--red) calc(var(--p, 0) * 1%), rgba(var(--ink-rgb), .14) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 68%, #000 69%);
          mask: radial-gradient(farthest-side, #0000 68%, #000 69%);
}
#ely-scroll:hover { transform: scale(1.06); }
#ely-scroll:hover::before { background: conic-gradient(var(--red) calc(var(--p, 0) * 1%), rgba(var(--ink-rgb), .24) 0); }
#ely-scroll .pct { position: relative; font-size: 10px; letter-spacing: .02em; font-weight: 500; transition: opacity var(--dur-2) var(--ease-out); }
#ely-scroll .pct b { color: var(--dim); font-weight: 400; }
#ely-scroll .top-ico { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
#ely-scroll:hover .pct { opacity: 0; }
#ely-scroll:hover .top-ico { opacity: 1; }
@media (pointer: coarse) { #ely-scroll { display: none; } }

/* ── 3b · Ride HUD: the ring is a speedometer. elyra-motion.js reads
       scroll velocity as km/h (capped at the 20 km/h campus limiter),
       leans the pill into acceleration via --tilt, and flips .ride/.max.
       Idle → back to plain % progress. ── */
#ely-scroll {
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out);
}
#ely-scroll.on { transform: rotate(var(--tilt, 0deg)); }
#ely-scroll.on:hover { transform: rotate(0deg) scale(1.06); }
#ely-scroll .kmh {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  font-style: italic; font-weight: 700; font-size: 14px;
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
#ely-scroll .kmh b { font-size: 6.5px; font-weight: 500; letter-spacing: .18em; color: var(--dim); }
#ely-scroll.ride .pct { opacity: 0; }
#ely-scroll.ride:not(:hover) .kmh { opacity: 1; }
#ely-scroll.max { box-shadow: 0 0 26px rgba(189, 36, 2, .55); }
#ely-scroll.max .kmh, #ely-scroll.max .kmh b { color: var(--red-ink); }

/* ── 4 · Nav: modern glass + scroll state ── */
#nav, nav.site-nav {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  background: rgba(13, 13, 13, .58) !important;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0);
  transition: background var(--dur-4) var(--ease-out), border-color var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out);
}
#nav.ely-scrolled, nav.site-nav.ely-scrolled {
  background: rgba(13, 13, 13, .84) !important;
  border-bottom-color: rgba(var(--ink-rgb), .08);
}
.nav-links li a { position: relative; transition: color var(--dur-3) var(--ease-out); }

/* ── 5 · Buttons: lift + glow, arrows that move ── */
.btn-p, .btn-getapp, .btn.primary, .c-btn, .zone-cta, .pricing-cta,
.f-form button, .cta-apply, #cf-send, .drawer-cta .cta-apply {
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
 background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out) !important;
  will-change: transform;
}
.btn-p:hover, .btn.primary:hover, .btn-getapp:hover, .f-form button:hover, #cf-send:hover, .cta-apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(189, 36, 2, .32), 0 2px 8px rgba(0, 0, 0, .5);
}
.btn-p:active, .btn.primary:active, .btn-getapp:active, .c-btn:active { transform: translateY(0) scale(.985); box-shadow: 0 3px 12px rgba(189, 36, 2, .2); }
.c-btn:hover, .btn-s:hover, .btn:not(.primary):hover { border-color: var(--red-ink) !important; }
.arr { display: inline-block; transition: transform var(--dur-3) var(--ease-out); }
a:hover > .arr, button:hover > .arr { transform: translate(3px, -3px); }
.zone-cta:hover .arr, .pricing-cta:hover .arr { transform: translate(3px, -3px); }

/* ── 6 · Editorial cards & rows: reactive surfaces ── */
.ed-grid-item { transition: background var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out); }
.ed-grid-item:hover { background: rgba(var(--ink-rgb), .028); }
.glance .g-row { transition: background var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.glance .g-row:hover { background: rgba(var(--ink-rgb), .03); }

.story-strip { overflow: hidden; }
.story-strip img { transition: transform 1.4s var(--ease-out), filter .8s var(--ease-out); will-change: transform; }
.story-strip:hover img { transform: scale(1.035); }

.price-card { transition: transform var(--dur-4) var(--ease-out), border-color var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out) !important; }
.price-card:hover { transform: translateY(-6px) !important; border-color: var(--red-ink) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }

.home-trio figure { overflow: hidden; }
.home-trio figure img { transition: transform 1.3s var(--ease-out); }
.home-trio figure:hover img { transform: scale(1.04); }

.role-row { transition: background var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.role-row:hover { background: rgba(var(--ink-rgb), .03); }
.wa-card { overflow: hidden; }
.wa-card img { transition: transform 1.2s var(--ease-out); }
.wa-card:hover img { transform: scale(1.045); }

.step { transition-property: opacity, transform, background; }
.m-item { transition-property: opacity, transform, background; }
.q-blk:hover .q-txt { color: var(--txt-hi); }
.q-txt { transition: color var(--dur-4) var(--ease-out); }

/* ── 7 · Forms: focused = red ── */
.cf-form input:focus, .cf-form select:focus, .cf-form textarea:focus,
.f-form input:focus { border-color: var(--red-ink) !important; }

/* ── 8 · Footer & ticker: pause on hover, humane motion ── */
.f-marquee:hover .f-marquee-track,
.ticker:hover .ticker-t { animation-play-state: paused; }
.f-marquee a, .f-bot-links a, .f-social a { transition: color var(--dur-2) var(--ease-out); }
.f-marquee a:hover, .f-bot-links a:hover, .f-social a:hover { color: var(--red-ink) !important; }

/* ── 9 · Reveal system (JS adds .ely-r, IO flips .ely-in) ── */
.ely-r {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease-out) var(--ely-d, 0s),
 transform var(--dur-reveal) var(--ease-out) var(--ely-d, 0s);
  will-change: opacity, transform;
}
.ely-r.ely-in { opacity: 1; transform: none; }
.ely-r.ely-done { will-change: auto; }

/* Editorial hero: images get a slow settle */
.page-hero .bg img, #careers-hero .bg img { will-change: transform; }

/* ── 10 · Cursor dot: additive signature (OS cursor stays) ── */
#ely-cur {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); pointer-events: none; z-index: 99999;
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out);
  mix-blend-mode: exclusion;
}
#ely-cur.on { opacity: .9; }
#ely-cur.link { width: 30px; height: 30px; opacity: .45; }
@media (pointer: coarse) { #ely-cur { display: none; } }

/* ── 12 · AA button contrast: solid-red CTAs sit one step deeper at rest
       (var(--red-aa) → 5.1:1 with white), brand red returns on hover ── */
.btn-p, .btn-getapp, .btn.primary, .f-form button, .cta-apply, #cf-send {
  background: var(--red-aa); color: #fff;
}
.btn-p:hover, .btn-getapp:hover, .btn.primary:hover,
.f-form button:hover, .cta-apply:hover, #cf-send:hover {
  background: var(--red-aa);   /* white on --red is 4.35:1 - under AA. The glow and lift carry the hover. */
}

/* ── 13 · Collapsing capsule nav — scroll-linked morph.
       elyra-motion.js drives --nvc (collapse progress, 0→1, lerped every
       frame). Full-bleed bar at the top of the page; as you scroll it
       floats free, insets, rounds into a capsule and compacts — and
       un-collapses smoothly on the way back up. ── */
#nav, nav.site-nav {
  --nvc: 0;
  --nv-h: 96px; --nv-logo: 80px; --nv-pad: 44px; --nv-dh: 26px;
  --nv-in: clamp(16px, 4.5vw, 88px);
  height: calc(var(--nv-h) - var(--nvc) * var(--nv-dh));
  padding: 0 calc(var(--nv-pad) - var(--nvc) * (var(--nv-pad) * .3));
  margin-inline: calc(var(--nvc) * var(--nv-in));
  top: calc(var(--nvc) * 12px);
  border: 1px solid rgba(240, 237, 232, calc(var(--nvc) * .12));
  border-bottom-color: rgba(240, 237, 232, calc(.04 + var(--nvc) * .08));
  border-radius: calc(var(--nvc) * 999px);
  box-shadow: 0 26px 70px -28px rgba(0, 0, 0, calc(var(--nvc) * .9)),
              0 4px 22px rgba(0, 0, 0, calc(var(--nvc) * .38));
  /* Background keeps its .45s glass fade (§4); geometry, border and shadow
     are scroll-linked — a transition on them would double-smooth the lerp. */
  transition: background var(--dur-4) var(--ease-out);
}
#nav .nav-logo img, nav.site-nav .nav-logo img {
  height: calc(var(--nv-logo) - var(--nvc) * (var(--nv-logo) * .22));
  /* The wordmark ink sits 1.4% above the PNG's canvas center (asymmetric
     transparent padding) — nudge down so it's optically dead-center. */
  transform: translateY(1.4%);
}
#nav .nav-logo:hover img, nav.site-nav .nav-logo:hover img {
  transform: translateY(1.4%) scale(1.02);
}
@media (max-width: 1024px) { #nav, nav.site-nav { --nv-h: 84px; --nv-logo: 64px; --nv-pad: 28px; --nv-dh: 20px; } }
@media (max-width: 960px)  { #nav, nav.site-nav { --nv-h: 72px; --nv-logo: 52px; --nv-pad: 20px; --nv-dh: 12px; --nv-in: 10px; } }
@media (max-width: 480px)  { #nav, nav.site-nav { --nv-h: 64px; --nv-logo: 44px; --nv-pad: 16px; --nv-dh: 8px; } }

/* ── 14 · Nav titles dead-centered in the bar (and in the collapsed
       capsule), logo left, CTA right — links leave the grid flow, so the
       CTA pins to the right edge of the 1fr track. ── */
@media (min-width: 961px) {
  /* Links are absolutely centered (below), burger is hidden and the drawer
     is fixed — so only logo + CTA remain in the grid. Two columns exactly:
     empty auto tracks + their 24px gaps were holding the CTA ~90px off the
     right edge of the bar. */
  #nav, nav.site-nav { grid-template-columns: auto 1fr; }
  #nav .nav-links, nav.site-nav .nav-links {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, calc(-50% - 2px));
    margin: 0; justify-content: center;
  }
  #nav > .btn-getapp, nav.site-nav > .btn-getapp { justify-self: end; }
}

/* ── 15 · Nav CTA: calculated fit — same optical nudge as the centered
       titles (-2px), and padding that scales down with the capsule so the
       pill keeps proportional air above/below at every collapse state. ── */
#nav > .btn-getapp, nav.site-nav > .btn-getapp {
  --cta-py: 12px; --cta-px: 22px;
  margin-top: -2px;
  padding: calc(var(--cta-py) - var(--nvc, 0) * 3px)
           calc(var(--cta-px) - var(--nvc, 0) * 5px);
}
@media (max-width: 1024px) {
  #nav > .btn-getapp, nav.site-nav > .btn-getapp { --cta-py: 10px; --cta-px: 18px; }
}

/* ── 16 · App-like page transitions (MPA View Transitions, Chromium —
       everyone else keeps instant loads). The nav and the ride HUD
       persist across the swap; the page itself hands over with a short
       lift. Motion-safe gated. ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  #nav, nav.site-nav { view-transition-name: elyra-nav; }
  #ely-scroll { view-transition-name: elyra-hud; }
  ::view-transition-old(root) { animation: ely-vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: ely-vt-in .44s .05s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes ely-vt-out { to { opacity: 0; transform: translateY(-12px); } }
  @keyframes ely-vt-in { from { opacity: 0; transform: translateY(16px); } }
}

/* ── 17 · Scanline image reveals — removed per review; images render
       immediately with no pre-appearance motion. Hover zoom kept. ── */
.ely-fig { position: relative; overflow: hidden; }
@media (hover: hover) {
  .ely-fig:hover img { transform: scale(1.035); transition: transform var(--dur-4) var(--ease-out); }
}

/* ── 18 · Subpage cells & receipts: reactive tint on hover. Transition
       list must carry the reveal system's opacity/transform pair at equal
       specificity, or the [data-rv] fade would snap. ── */
.px-cell, .px-receipt { transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out); }
body.px-js [data-rv] {
  transition: opacity var(--dur-reveal) var(--ease-out) var(--px-d, 0s),
 transform var(--dur-reveal) var(--ease-out) var(--px-d, 0s);
}
body.px-js [data-rv].px-done { will-change: auto; }
body.px-js .px-cell[data-rv], body.px-js .px-receipt[data-rv] {
  transition: opacity var(--dur-reveal) var(--ease-out) var(--px-d, 0s),
 transform var(--dur-reveal) var(--ease-out) var(--px-d, 0s),
 border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}

/* ── 11 · Reduced motion: everything settles instantly ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The net has to outrank every !important transition in the codebase,
     and several carry one - the CTA buttons, .price-card, and #cf-send,
     an ID. A bare * (specificity 0) lost to all of them, so a rider who
     asked for less motion still got the button lift. :not(#_) matches
     every element (no element has the id _) but counts as an ID, so two of
     them put this at 2-0-0, above anything here. Delay goes to zero too:
     a near-zero duration behind a 300ms delay still waits 300ms.
     .01ms rather than 0 so transitionend still fires for the JS that
     listens for it. Effectively zero - never tokenise these. */
  *:not(#_):not(#_), *:not(#_):not(#_)::before, *:not(#_):not(#_)::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .ely-r { opacity: 1 !important; transform: none !important; will-change: auto !important; }
  .ely-fig img { clip-path: none !important; transform: none !important; }
  .ely-fig::after { display: none !important; }
  #ely-scroll .kmh { display: none !important; }
  .f-marquee-track, .f-wordmark-track, .ticker-t { animation: none !important; transform: none !important; }
  #ely-cur { display: none !important; }
  .rev, .step, .m-item, .zone-chip, .price-card, .spec-r, .q-blk, .hl-inner, .h-bottom { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ── pages ── */
/* ═══════════════════════════════════════════════════════════════════
   ELYRA — SUBPAGE DESIGN SYSTEM v2  ("dossier" layer)
   Shared by every footer page. Typographic heroes, sticky index rail
   with scrollspy, definition tables, index-row lists, accordions,
   telemetry bars, receipts, copy chips. Brand tokens from global.css.
   ═══════════════════════════════════════════════════════════════════ */

html { scroll-padding-top: 132px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Departure Mono — pixel mono for ticket/receipt cards (SIL OFL) */
@font-face {
  font-family: 'Departure Mono';
  src: url('/assets/DepartureMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Reveal system (JS stamps [data-rv] → .px-in) ─────────────────── */
body.px-js [data-rv] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .85s var(--ease-out) var(--px-d,0s),
 transform .85s var(--ease-out) var(--px-d,0s);
  will-change: opacity, transform;
}
body.px-js [data-rv].px-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.px-js [data-rv] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ── HERO ─────────────────────────────────────────────────────────── */
.px-hero { position: relative; padding: 164px 44px 0; background: var(--bg); overflow: hidden; }
.px-hero::before {                    /* faint blueprint grid */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(var(--ink-rgb), .028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(var(--ink-rgb), .028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}
.px-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.px-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.px-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13, 13, 13,.94) 0%, rgba(13, 13, 13,.72) 48%, rgba(13, 13, 13,.38) 100%),
              linear-gradient(180deg, rgba(13, 13, 13,.68) 0%, rgba(13, 13, 13,.30) 45%, var(--bg) 97%);
}
/* Vehicles hero: its own asset is underexposed (peak band ~14/255), so it uses
   the arcade shot instead — dropped slightly to seat the scooter in frame. */
body[data-page="vehicles"] .px-hero-bg img { object-position: center 42%; }

.px-hero-in { position: relative; max-width: 1440px; margin: 0 auto; }
.px-hero-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--bdr); margin-bottom: 56px;
  font-family: var(--fm); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.px-crumb a { color: var(--dim); text-decoration: none; transition: color var(--dur-3) var(--ease-out); }
.px-crumb a:hover { color: var(--txt); }
.px-crumb i { font-style: normal; margin: 0 8px; color: var(--bdr2); }
.px-crumb b { color: var(--mid); font-weight: 400; }
.px-file { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.px-hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 64px; align-items: end; }
.px-hero-copy { container-type: inline-size; }
.px-hero-grid.solo { grid-template-columns: 1fr; }
.px-eyebrow {
  margin: 0 0 26px; font-family: var(--fm); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--txt);
  display: block;
}
.px-title {
  margin: 0; font-family: var(--fd); font-weight: 800; text-transform: uppercase;
  /* The viewport clamp does not know how wide the headline column actually
     is, so on any layout where that column is narrow relative to the
     screen the type outgrows it and the longest word gets chopped mid-
     word. 15cqi caps the size against the column itself: the longest
     unbroken run in any title on the site is about 6.5em ("kilometre",
     "Questions,"), so 100/6.5 is the most the type can be and still fit.
     min() keeps the existing scale wherever it already fits - measured,
     the cap changes nothing from 280px to 1920px - and only takes over
     when the column tightens.

     Because the cap has no floor, it always finds a size where the
     longest word fits, however narrow the column gets. That makes a
     mid-word break unnecessary, so overflow-wrap: break-word - the
     thing that was actually doing the chopping - is gone rather than
     left in as a fallback that can only ever fire by chopping. */
  font-size: min(clamp(56px, 7.6vw, 118px), 15cqi); line-height: .92; letter-spacing: -.02em; color: var(--txt);
  text-wrap: balance;
  /* hyphens: auto used to be here, and it is what broke "explained." into
     "ex-" and "plained". Automatic hyphenation belongs in justified body
     copy, never in a display headline: it invents hyphens the writer did
     not put there. A word the author hyphenated, like "two-kilometre",
     still breaks at its own hyphen, which is correct. */
}
.px-title em { font-family: var(--fs); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.02em; color: var(--red); }
.px-lede {
  margin: 30px 0 0; max-width: 58ch; font-family: var(--fm); font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7; font-weight: 300; color: var(--mid); text-wrap: pretty;
}
.px-lede strong { color: var(--txt); font-weight: 500; }
.px-hero-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* Image plate with viewfinder corners */
.px-plate { position: relative; margin: 0; overflow: hidden; background: var(--bg-1); border: 1px solid var(--bdr); }
.px-plate img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
  transition: transform 1.4s var(--ease-out); will-change: transform; }
.px-plate.wide img { aspect-ratio: 16/9; }
.px-plate.tall img { aspect-ratio: 3/4; }
.px-plate:hover img { transform: scale(1.04); }
.px-plate-frame {
  position: absolute; inset: 12px; pointer-events: none; opacity: .9;
  background-image: linear-gradient(var(--red),var(--red)),linear-gradient(var(--red),var(--red)),
                    linear-gradient(var(--red),var(--red)),linear-gradient(var(--red),var(--red)),
                    linear-gradient(var(--red),var(--red)),linear-gradient(var(--red),var(--red)),
                    linear-gradient(var(--red),var(--red)),linear-gradient(var(--red),var(--red));
  background-position: left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
  background-size: 18px 1px,1px 18px,18px 1px,1px 18px,18px 1px,1px 18px,18px 1px,1px 18px;
  background-repeat: no-repeat;
}
.px-plate-cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px;
  padding: 34px 16px 12px; font-family: var(--fm); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mid);
  background: linear-gradient(180deg, transparent, rgba(13, 13, 13,.88) 78%);
}

/* Fact strip (hero foot) */
.px-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bdr); border-bottom: none; margin-top: 64px; background: var(--bg);
}
.px-fact { padding: 24px 26px; border-right: 1px solid var(--bdr); transition: background var(--dur-3) var(--ease-out); }
.px-fact:last-child { border-right: none; }
.px-fact:hover { background: rgba(var(--ink-rgb), .03); }
.px-fact-k { display: block; font-family: var(--fm); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.px-fact-v { font-family: var(--fm); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--txt); }
.px-fact-v small { font-size: 11px; font-weight: 400; color: var(--dim); margin-left: 6px; letter-spacing: .08em; }

/* ── LAYOUT: sticky rail + main ───────────────────────────────────── */
/* A rail-less layout block (an interactive section appended after the main
   column) must still sit in the content column, not the 248px rail slot. */
.px-layout > .px-main:first-child { grid-column: 2; }
.px-layout {
  display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 72px;
  max-width: 1440px; margin: 0 auto; padding: 88px 44px 0; align-items: start;
}
.px-rail { position: sticky; top: 118px; }
.px-rail-t { margin: 0 0 18px; font-family: var(--fm); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.px-toc { display: flex; flex-direction: column; }
/* A focus lens, not a list: the section you are in is set as display type while
   everything else compresses to a compact machine index — the same tiny-mono-label
   over big-display-value pattern the hero facts and the receipts already use. */
.px-toc a {
  position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr);
  align-items: baseline; gap: 13px; padding: 8px 0; border: 0;
  font-family: var(--fm); font-size: 11px; line-height: 1.5; letter-spacing: .085em;
  text-transform: uppercase; color: var(--dim); text-decoration: none;
  transition: color var(--dur-3) var(--ease-out), font-size var(--dur-4) var(--ease-out),
 padding var(--dur-4) var(--ease-out), letter-spacing var(--dur-3) var(--ease-out);
}
.px-toc a:last-child { border-bottom: 0; }
.px-toc a b {
  font-family: var(--fm); font-weight: 400; font-size: 9px; letter-spacing: .1em;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--dim); opacity: .55;
  transition: color var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
}
.px-toc a::before { content: none; }
.px-toc a:hover { color: var(--mid); }
.px-toc a:hover b { color: var(--red-ink); opacity: 1; }
/* the lens — bracketed by hairlines the way a spec-sheet field is */
.px-toc a.on {
  padding: 17px 0 19px; color: var(--txt);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 27px; line-height: 1.02;
  letter-spacing: -.032em; text-transform: none;
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
}
.px-toc a.on b { color: var(--red-ink); opacity: 1; font-size: 9px; }
@media (prefers-reduced-motion: reduce) { .px-toc a { transition: color var(--dur-3) var(--ease-out); } }
.px-rail-foot { margin-top: 28px; font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); line-height: 2.1; }
.px-rail-foot a { color: var(--mid); text-decoration: none; border-bottom: 1px solid var(--bdr2); transition: color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.px-rail-foot a:hover { color: var(--red-ink); border-color: var(--red-ink); }

.px-main { min-width: 0; }

/* ── SECTIONS ─────────────────────────────────────────────────────── */
.px-sec { padding: 0 0 96px; }
.px-sec-head { position: relative; display: flex; align-items: baseline; justify-content: flex-start; gap: 18px; margin: 0 0 44px; padding-top: 18px; }
.px-sec-head::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: var(--bdr2); transform-origin: left; transform: scaleX(1);
}
body.px-js .px-sec-head[data-rv]::before { transform: scaleX(0); transition: transform 1.1s var(--ease-out) .1s; }
body.px-js .px-sec-head[data-rv].px-in::before { transform: scaleX(1); }
.px-sec-head h2 {
  margin: 0; font-family: var(--fd); font-weight: 700; font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -.015em; line-height: 1.05; color: var(--txt); text-wrap: balance;
}
.px-sec-head h2 em { font-family: var(--fs); font-weight: 400; font-style: italic; color: var(--red); letter-spacing: -.02em; }
.px-sec-side { margin-left: auto; font-family: var(--fm); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
/* The side label is nowrap, so on a phone it pushed past the viewport and
   the whole page scrolled sideways (measured 416px against a 390px
   viewport). It is metadata the heading beside it already carries, so it
   is dropped at phone width rather than shrunk into unreadability. */
@media (max-width: 720px) { .px-sec-side { display: none; } }
.px-sec-intro { margin: -18px 0 40px; max-width: 62ch; font-family: var(--fm); font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--mid); text-wrap: pretty; }

/* Hairline cell grids (no boxes — drawn lines) */
.px-cols { display: grid; grid-template-columns: repeat(2, 1fr); }
.px-cols.c3 { grid-template-columns: repeat(3, 1fr); }
.px-cell { padding: 30px 34px 34px 0; border-top: 1px solid var(--bdr); transition: background var(--dur-3) var(--ease-out); }
.px-cell h3 { margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; font-family: var(--fm); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; color: var(--txt); }
.px-cell h3 .tick { font-family: var(--fm); font-size: 9px; letter-spacing: .12em; color: var(--red-ink); }
.px-cell p { margin: 0; font-family: var(--fm); font-size: 13.5px; line-height: 1.72; font-weight: 300; color: var(--mid); text-wrap: pretty; }
.px-cell p a { color: var(--red-ink); text-decoration: none; border-bottom: 1px solid rgba(189, 36, 2,.4); transition: border-color var(--dur-3) var(--ease-out); }
.px-cell p a:hover { border-color: var(--red-ink); }
.px-cell p code { font-family: var(--fm); font-size: 12px; color: var(--txt); background: var(--bg-2); padding: 2px 7px; border: 1px solid var(--bdr); border-radius: 2px; }

/* ── DEFINITION ROWS (spec sheets, legal clauses, fact sheets) ────── */
.px-def { border-top: 1px solid var(--bdr); }
.px-def-r {
  display: grid; grid-template-columns: 216px minmax(0,1fr); gap: 28px;
  padding: 20px 0; border-bottom: 1px solid var(--bdr);
}
.px-def-k { font-family: var(--fm); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding-top: 4px; line-height: 1.8; }
.px-def-k b { display: block; color: var(--red-ink); font-weight: 500; letter-spacing: .18em; margin-bottom: 2px; }
.px-def-v { font-family: var(--fm); font-size: 14.5px; line-height: 1.72; font-weight: 300; color: var(--mid); text-wrap: pretty; }
.px-def-v strong, .px-def-v .hi { color: var(--txt); font-weight: 500; }
.px-def-v a { color: var(--red-ink); text-decoration: none; border-bottom: 1px solid rgba(189, 36, 2,.4); }
.px-def-v a:hover { border-color: var(--red-ink); }
.px-def-v code { font-family: var(--fm); font-size: 12px; color: var(--txt); background: var(--bg-2); padding: 2px 7px; border: 1px solid var(--bdr); border-radius: 2px; }
.px-def-v .big { display: block; font-size: 26px; font-weight: 600; color: var(--txt); letter-spacing: -.02em; line-height: 1.2; }
.px-def-v .big small { font-size: 11px; font-weight: 400; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; margin-left: 8px; }

/* Mission statement — display sans pull-line, key phrase in serif italic red
   (mirrors the h2 Syne + DM Serif vocabulary at pull-quote scale). */
.px-mission {
  margin: -8px 0 52px; max-width: 28ch;
  font-family: var(--fd); font-style: normal; font-weight: 700;
  font-size: clamp(30px, 3.5vw, 54px); line-height: 1.12; letter-spacing: -.02em;
  color: var(--txt); text-wrap: pretty;
}
.px-mission strong { font-family: var(--fs); font-style: italic; font-weight: 400; color: var(--red); letter-spacing: -.01em; }

/* Plain-words callout (legal) — the clause subtitle. Serif italic, aligned
   with .px-boiler, so the summary outranks the fine print it summarizes. */
.px-plain {
  margin: 0 0 40px; position: relative; border: 1px solid var(--bdr2); padding: 24px 28px 22px;
  font-family: var(--fs); font-style: italic; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5;
  font-weight: 400; letter-spacing: -.005em; color: var(--txt); max-width: 66ch; text-wrap: pretty;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .025), transparent);
}
.px-plain::before {
  content: 'PLAIN WORDS'; position: absolute; top: -7px; left: 16px; padding: 0 8px;
  background: var(--bg); font-family: var(--fm); font-style: normal; font-size: 9px;
  letter-spacing: .24em; color: var(--red-ink); font-weight: 600;
}
.px-plain::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px;
  border-right: 1px solid var(--red); border-bottom: 1px solid var(--red); opacity: .55;
}

/* ── INDEX ROWS (blog, press coverage, channels) ──────────────────── */
.px-list { border-top: 1px solid var(--bdr); }
.px-row {
  position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr) auto 34px;
  gap: 22px; align-items: baseline; padding: 24px 4px; border-bottom: 1px solid var(--bdr);
  text-decoration: none; transition: background var(--dur-3) var(--ease-out), padding-left var(--dur-3) var(--ease-out);
}
.px-row:hover { background: linear-gradient(90deg, rgba(var(--ink-rgb), .03), transparent 85%); padding-left: 16px; }
.px-row-idx { font-family: var(--fm); font-size: 10px; letter-spacing: .16em; color: var(--dim); }
.px-row-body { min-width: 0; }
.px-row-t { display: block; font-family: var(--fd); font-weight: 700; font-size: clamp(17px, 1.7vw, 22px); letter-spacing: -.015em; color: var(--txt); line-height: 1.2; transition: color var(--dur-3) var(--ease-out); }
.px-row:hover .px-row-t { color: var(--txt-hi); }
.px-row-d { display: block; margin-top: 7px; font-family: var(--fm); font-size: 13px; line-height: 1.6; font-weight: 300; color: var(--mid); max-width: 68ch; text-wrap: pretty; }
.px-row-meta { font-family: var(--fm); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; text-align: right; line-height: 2; }
.px-row-meta b { color: var(--red-ink); font-weight: 500; }
.px-row-arr { justify-self: end; font-family: var(--fm); font-size: 15px; color: var(--dim); transition: transform var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
.px-row:hover .px-row-arr { transform: translateX(6px); color: var(--red-ink); }

/* ── ACCORDION ────────────────────────────────────────────────────── */
.px-acc { border-bottom: 1px solid var(--bdr); }
.px-acc:first-of-type { border-top: 1px solid var(--bdr); }
.px-acc-btn {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 30px; gap: 18px; align-items: baseline;
  width: 100%; padding: 21px 2px; background: none; border: 0; cursor: pointer; text-align: left;
  transition: background var(--dur-3) var(--ease-out), padding-left var(--dur-3) var(--ease-out);
}
.px-acc-btn:hover { background: linear-gradient(90deg, rgba(var(--ink-rgb), .03), transparent 85%); padding-left: 12px; }
.px-acc-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.px-acc-n { font-family: var(--fm); font-size: 9.5px; letter-spacing: .16em; color: var(--dim); }
.px-acc.open .px-acc-n { color: var(--red-ink); }
.px-acc-q { font-family: var(--fm); font-weight: 500; font-size: 16px; letter-spacing: -.005em; color: var(--txt); line-height: 1.4; }
.px-acc-x { position: relative; width: 14px; height: 14px; justify-self: end; align-self: center; }
.px-acc-x::before, .px-acc-x::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px;
  background: var(--dim); transition: transform var(--dur-4) var(--ease-out), background var(--dur-3) var(--ease-out);
}
.px-acc-x::after { transform: rotate(90deg); }
.px-acc.open .px-acc-x::before { background: var(--red); }
.px-acc.open .px-acc-x::after { transform: rotate(0deg); background: var(--red); }
.px-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-4) var(--ease-out); }
.px-acc.open .px-acc-body { grid-template-rows: 1fr; }
.px-acc-inner { overflow: hidden; min-height: 0; }
.px-acc-inner p {
  margin: 0; padding: 0 44px 24px 62px; max-width: 72ch;
  font-family: var(--fm); font-size: 14px; line-height: 1.75; font-weight: 300; color: var(--mid); text-wrap: pretty;
}
.px-acc-inner p a { color: var(--red-ink); text-decoration: none; border-bottom: 1px solid rgba(189, 36, 2,.4); }
.px-acc-inner p code { font-family: var(--fm); font-size: 12px; color: var(--txt); background: var(--bg-2); padding: 2px 7px; border: 1px solid var(--bdr); border-radius: 2px; }

/* Filter input */
.px-filter { position: relative; margin: 0 0 40px; }
.px-filter input {
  width: 100%; background: var(--bg-1); border: 1px solid var(--bdr2); color: var(--txt);
  font-family: var(--fm); font-size: 15px; font-weight: 300; letter-spacing: .01em;
  padding: 17px 130px 17px 48px; border-radius: 2px; transition: border-color var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out);
}
.px-filter input::placeholder { color: var(--dim); }
.px-filter input:focus { outline: none; border-color: rgba(189, 36, 2,.55); background: var(--bg-2); }
.px-filter::before {
  content: ''; position: absolute; left: 18px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border: 1.5px solid var(--dim); border-radius: 50%;
}
.px-filter::after {
  content: ''; position: absolute; left: 29px; top: 50%; width: 7px; height: 1.5px; margin-top: 3px;
  background: var(--dim); transform: rotate(45deg);
}
.px-filter-count {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--fm); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.px-noresults { display: none; padding: 40px 2px; font-family: var(--fm); font-size: 13.5px; color: var(--dim); font-weight: 300; border-bottom: 1px solid var(--bdr); }
.px-noresults a { color: var(--red-ink); }
.px-group-t { margin: 52px 0 14px; display: flex; align-items: baseline; gap: 14px; font-family: var(--fm); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.px-group-t:first-of-type { margin-top: 0; }
.px-group-t::after { content: ''; flex: 1; height: 1px; background: var(--bdr); }

/* ── STATUS / TELEMETRY ───────────────────────────────────────────── */
.px-live {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  border: 1px solid var(--bdr2); padding: 30px 32px; margin-bottom: 56px;
  background: linear-gradient(120deg, rgba(158,232,88,.05), transparent 55%);
}
.px-live-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); flex: none; }
.px-live-dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(158,232,88,.6); animation: px-ping 2.2s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes px-ping { 0% { transform: scale(.5); opacity: 1; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .px-live-dot::after { animation: none; opacity: .5; } }
.px-live-t { font-family: var(--fd); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.01em; color: var(--txt); }
.px-live-meta { margin-left: auto; text-align: right; font-family: var(--fm); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); line-height: 2; }
.px-live-meta b { color: var(--mid); font-weight: 500; }

.px-sys { border-top: 1px solid var(--bdr); }
.px-sys-r { display: grid; grid-template-columns: 230px minmax(0,1fr) 86px; gap: 26px; align-items: center; padding: 19px 2px; border-bottom: 1px solid var(--bdr); transition: background var(--dur-3) var(--ease-out); }
.px-sys-n { display: flex; align-items: center; gap: 12px; font-family: var(--fm); font-size: 13.5px; font-weight: 500; color: var(--txt); }
.px-sys-n small { display: block; font-size: 9.5px; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 3px; }
.px-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; box-shadow: 0 0 10px rgba(158,232,88,.5); }
.px-dot.warn { background: var(--amber); box-shadow: 0 0 10px rgba(232,176,75,.5); }
.px-bars { display: flex; gap: 2px; align-items: stretch; height: 26px; }
.px-bars i { flex: 1; min-width: 2px; background: rgba(158,232,88,.72); border-radius: 1px; transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
.px-bars i.w { background: var(--amber); }
.px-bars i.b { background: var(--red); }
.px-bars i:hover { filter: brightness(1.35); transform: scaleY(1.12); }
.px-sys-pct { font-family: var(--fm); font-size: 13px; font-weight: 600; color: var(--txt); text-align: right; }
.px-sys-pct small { display: block; font-size: 8.5px; font-weight: 400; letter-spacing: .16em; color: var(--dim); margin-top: 3px; }
.px-bars-legend { display: flex; gap: 22px; justify-content: flex-end; padding: 14px 2px 0; font-family: var(--fm); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.px-bars-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 1px; margin-right: 7px; background: rgba(158,232,88,.72); }
.px-bars-legend .lw i { background: var(--amber); }
.px-bars-legend .lb i { background: var(--red); }

/* Incident timeline */
.px-time { border-left: 1px solid var(--bdr2); margin-left: 5px; }
.px-time-e { position: relative; padding: 0 0 40px 34px; }
.px-time-e:last-child { padding-bottom: 6px; }
.px-time-e::before {
  content: ''; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--dim); transition: border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.px-time-e:hover::before { border-color: var(--red-ink); box-shadow: 0 0 12px rgba(189, 36, 2,.5); }
.px-time-k { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; font-family: var(--fm); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.px-time-k b { color: var(--red-ink); font-weight: 500; }
.px-time-k .ok { color: var(--lime); }
.px-time-t { margin: 0 0 8px; font-family: var(--fm); font-weight: 600; font-size: 16px; color: var(--txt); }
.px-time-e p { margin: 0; max-width: 66ch; font-family: var(--fm); font-size: 13.5px; line-height: 1.7; font-weight: 300; color: var(--mid); text-wrap: pretty; }

/* KPI blocks */
.px-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--bdr); }
.px-kpis.c3 { grid-template-columns: repeat(3, 1fr); }
.px-kpi { padding: 28px 28px 24px; border-right: 1px solid var(--bdr); transition: background var(--dur-3) var(--ease-out); }
.px-kpi:last-child { border-right: none; }
.px-kpi-v { font-family: var(--fd); font-weight: 800; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -.03em; line-height: 1; color: var(--txt); }
.px-kpi-v small { font-family: var(--fm); font-size: 12px; font-weight: 400; letter-spacing: .08em; color: var(--dim); margin-left: 6px; }
.px-kpi-k { margin-top: 14px; font-family: var(--fm); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); line-height: 1.8; }
.px-kpi-k b { color: var(--lime); font-weight: 500; }

/* ── RECEIPT (pricing example) ────────────────────────────────────── */
.px-receipt {
  /* A thermal roll is about 80mm wide, and a receipt is torn off it - so
     no border, no corner radius, and an edge that is ragged rather than
     a repeating sawtooth. The tear is cut out of the paper with a mask
     (torn strip, solid middle, torn strip) instead of being drawn on top
     of it in the page colour, which is what the old zigzag did: that
     version only looked right against one background. */
  max-width: 352px;
  border: 0;
  border-radius: 0;
  padding: 30px 26px 26px;
  position: relative;
  color: var(--paper-ink);
  background:
    repeating-linear-gradient(0deg, rgba(88,74,50,.022) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(90,76,52,.10), transparent 9% 91%, rgba(90,76,52,.10)),
    var(--txt);
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.4));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 9V4.4l6 2.1 5-3.4 7 2.6 6-1.4 8 3.1 6-2.3 7 1.8 6-3.2 8 2.9 6-1.1 7 2.4 6-3 8 1.6 6 2.2 7-2.7 6 1.9 5-1.2V9z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 0v4.6l6-2.2 5 3.3 7-2.5 6 1.5 8-3 6 2.2 7-1.7 6 3.1 8-2.8 6 1.2 7-2.3 6 2.9 8-1.5 6-2.1 7 2.6 6-1.8 5 1.3V0z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 9V4.4l6 2.1 5-3.4 7 2.6 6-1.4 8 3.1 6-2.3 7 1.8 6-3.2 8 2.9 6-1.1 7 2.4 6-3 8 1.6 6 2.2 7-2.7 6 1.9 5-1.2V9z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 0v4.6l6-2.2 5 3.3 7-2.5 6 1.5 8-3 6 2.2 7-1.7 6 3.1 8-2.8 6 1.2 7-2.3 6 2.9 8-1.5 6-2.1 7 2.6 6-1.8 5 1.3V0z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 118px 9px, 100% calc(100% - 18px), 118px 9px;
          mask-size: 118px 9px, 100% calc(100% - 18px), 118px 9px;
  -webkit-mask-position: left top, left 9px, left bottom;
          mask-position: left top, left 9px, left bottom;
  -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
          mask-repeat: repeat-x, no-repeat, repeat-x;
}
/* The paper is a physical thing someone put down, so it does not sit
   perfectly square to the grid. */
.px-step-media > .px-receipt { transform: rotate(-.5deg); }
.px-receipt-h { display: flex; justify-content: space-between; gap: 12px; font-family: 'Departure Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink); padding-bottom: 16px; border-bottom: 1px dashed var(--paper-faint); margin-bottom: 8px; }
.px-receipt-r { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; font-family: 'Departure Mono', monospace; font-size: 13px; font-weight: 400; color: var(--paper-ink); }
.px-receipt-r i { flex: 1; border-bottom: 1px dotted var(--paper-faint); transform: translateY(-3px); }
.px-receipt-r b { font-weight: 400; color: var(--bg-1); white-space: nowrap; }
.px-receipt-r.total { border-top: 1px dashed var(--paper-faint); margin-top: 8px; padding-top: 16px; font-size: 15px; color: var(--bg-1); }
.px-receipt-r.total b { font-family: 'Departure Mono', monospace; font-weight: 400; font-size: 22px; letter-spacing: 0; color: var(--paper-red); }
.px-receipt-f { margin-top: 14px; font-family: 'Departure Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-ink); }

/* ── STEPS (how-it-works) ─────────────────────────────────────────── */
.px-step { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: 56px; align-items: center; padding: 58px 0; border-top: 1px solid var(--bdr); }
.px-step.flip .px-step-media { order: -1; }
.px-step-n { font-family: var(--fd); font-weight: 800; font-size: clamp(52px, 5vw, 84px); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px var(--bdr2); }
.px-step-body h3 { margin: 18px 0 14px; font-family: var(--fd); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.015em; color: var(--txt); }
.px-step-body > p { margin: 0 0 22px; max-width: 56ch; font-family: var(--fm); font-size: 14.5px; line-height: 1.72; font-weight: 300; color: var(--mid); text-wrap: pretty; }

/* ── COPY CHIPS + SWATCHES (press / contact) ──────────────────────── */
.px-chip {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--bdr2); background: var(--bg-1); color: var(--mid);
  font-family: var(--fm); font-size: 11.5px; letter-spacing: .06em; padding: 9px 14px; border-radius: 2px;
  transition: border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out);
}
.px-chip::after { content: '⧉'; font-size: 12px; color: var(--dim); transition: color var(--dur-3) var(--ease-out); }
.px-chip:hover { border-color: rgba(189, 36, 2,.55); color: var(--txt); }
.px-chip:hover::after { color: var(--red-ink); }
.px-chip.copied { border-color: var(--lime); color: var(--lime); }
.px-chip.copied::after { content: '✓'; color: var(--lime); }
.px-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.px-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.px-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bdr); border: 1px solid var(--bdr); }
.px-swatch { position: relative; cursor: pointer; background: var(--bg); padding: 0; border: 0; text-align: left; transition: filter var(--dur-3) var(--ease-out); }
.px-swatch:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; z-index: 1; }
.px-swatch .sw { display: block; height: 92px; }
.px-swatch .sw-meta { display: flex; justify-content: space-between; gap: 10px; padding: 13px 15px; font-family: var(--fm); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.px-swatch .sw-meta b { color: var(--txt); font-weight: 500; letter-spacing: .08em; }
.px-swatch:hover { filter: brightness(1.16); }
.px-swatch.copied .sw-meta b { color: var(--lime); }

/* Logo asset tiles (press) */
.px-assets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bdr); border: 1px solid var(--bdr); }
.px-asset { background: var(--bg); }
.px-asset .art { display: grid; place-items: center; height: 190px; padding: 24px;
  background-image: linear-gradient(45deg, rgba(var(--ink-rgb), .03) 25%, transparent 25%, transparent 75%, rgba(var(--ink-rgb), .03) 75%),
                    linear-gradient(45deg, rgba(var(--ink-rgb), .03) 25%, transparent 25%, transparent 75%, rgba(var(--ink-rgb), .03) 75%);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
.px-asset .art.on-light { background: var(--txt); }
.px-asset .art img { max-height: 44px; max-width: 70%; object-fit: contain; }
.px-asset .art.on-light img { filter: brightness(0) saturate(100%); }
.px-asset-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--bdr); font-family: var(--fm); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.px-asset-meta a { color: var(--mid); text-decoration: none; transition: color var(--dur-3) var(--ease-out); }
.px-asset-meta a:hover { color: var(--red-ink); }

/* Boilerplate quote */
.px-boiler { position: relative; border: 1px solid var(--bdr2); padding: 30px 32px; background: var(--bg-1); }
.px-boiler p { margin: 0; font-family: var(--fs); font-style: italic; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.5; color: var(--txt); letter-spacing: -.01em; text-wrap: pretty; }
.px-boiler .px-chips { margin-top: 22px; }

/* ── CLOCK / LIVE META ────────────────────────────────────────────── */
.px-clock { font-variant-numeric: tabular-nums; color: var(--txt); }

/* ── FORM (contact) ───────────────────────────────────────────────── */
.px-form { display: grid; gap: 26px; }
.px-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.px-field { display: grid; gap: 9px; }
.px-field label { font-family: var(--fm); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.px-field input, .px-field select, .px-field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--bdr2);
  color: var(--txt); font-family: var(--fm); font-size: 15px; font-weight: 300;
  padding: 10px 2px 12px; border-radius: 0; transition: border-color var(--dur-3) var(--ease-out);
}
.px-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.px-field select option { background: var(--bg-1); color: var(--txt); }
.px-field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.px-field input:focus, .px-field select:focus, .px-field textarea:focus { outline: none; border-color: var(--red-ink); }
.px-field input::placeholder, .px-field textarea::placeholder { color: var(--dim); }
.px-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.px-form-note { font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.px-submit {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--red-aa); color: #fff; border: 0; padding: 15px 26px; border-radius: 2px;
  font-family: var(--fm); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  transition: background var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.px-submit:hover { background: var(--red); }
.px-form-ok { display: none; border: 1px solid rgba(158,232,88,.4); background: rgba(158,232,88,.06); padding: 18px 20px; font-family: var(--fm); font-size: 13px; color: var(--lime-ink); font-weight: 300; }
.px-form.sent .px-form-ok { display: block; }

/* ── BUTTONS ──────────────────────────────────────────────────────── */
.px-btn {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer;
  font-family: var(--fm); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 2px; transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.px-btn.p { background: var(--red-aa); color: #fff; border: 1px solid var(--red-aa); }
.px-btn.p:hover { background: var(--red); border-color: var(--red-ink); }
.px-btn.s { background: transparent; color: var(--txt); border: 1px solid var(--bdr2); }
.px-btn.s:hover { border-color: var(--txt); }
.px-btn .arr { transition: transform var(--dur-3) var(--ease-out); }
.px-btn:hover .arr { transform: translateX(4px); }

/* ── CTA BAND ─────────────────────────────────────────────────────── */
.px-cta {
  position: relative; isolation: isolate; overflow: hidden;
  border-top: 1px solid var(--bdr); margin-top: 8px;
  --cta-img: url('/img/cta-campus-night.jpeg');
  --cta-pos: center 62%;
}
/* Same treatment as the homepage #cta — a dimmed campus photograph behind the
   band, so subpages close on an image instead of flat black. */
.px-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--cta-img);
  background-size: cover; background-position: var(--cta-pos);
  opacity: .34;
}
.px-cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(4,4,5,.94) 0%, rgba(4,4,5,.76) 48%, rgba(4,4,5,.38) 100%);
}
.px-cta.cta-arches { --cta-img: url('/img/cta-arches-fog.jpeg'); --cta-pos: center 46%; }
.px-cta.cta-beam   { --cta-img: url('/img/cta-redbeam.jpeg'); --cta-pos: center center; }
.px-cta.cta-lamp   { --cta-img: url('/img/cta-lamp-mist.jpeg'); --cta-pos: center 58%; }
.px-cta-in {
  position: relative;
  max-width: 1440px; margin: 0 auto; padding: 96px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap;
}
.px-cta-copy .k { display: block; font-family: var(--fm); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--dim); margin-bottom: 18px; }
.px-cta-copy h2 { margin: 0; font-family: var(--fs); font-style: italic; font-weight: 400; font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: -.02em; color: var(--txt); }
.px-cta-copy p { margin: 18px 0 0; max-width: 52ch; font-family: var(--fm); font-size: 14px; line-height: 1.7; font-weight: 300; color: var(--mid); }
.px-cta .px-btn { flex: none; }

/* ── FULL-BLEED STRIP SPACING (reused .story-strip figures) ───────── */
.px-main .story-strip { margin: 0 0 96px; }

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .px-layout { grid-template-columns: 210px minmax(0,1fr); gap: 48px; }
}
@media (max-width: 1024px) {
  .px-hero { padding: 138px 28px 0; }
  .px-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .px-plate { max-width: 560px; }
  .px-layout { display: block; padding: 64px 28px 0; }
  .px-rail { position: sticky; top: 62px; z-index: 40; margin: 0 -28px 48px; padding: 12px 28px 0; background: var(--bg); box-shadow: 0 18px 22px -18px rgba(0,0,0,.85); }
  .px-rail-t { display: none; }
  .px-toc { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 12px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
  .px-toc::-webkit-scrollbar { display: none; }
  .px-toc a, .px-toc a:last-child { display: block; border: 1px solid var(--bdr2); border-radius: 999px;
    padding: 12px 18px; white-space: nowrap; flex: none;
    font-family: var(--fb); font-size: 13px; line-height: 1.5; letter-spacing: 0; text-transform: none;
    transition: color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out); }
  .px-toc a b { display: none; }
  .px-toc a::before { content: none; }
  .px-toc a.on { padding: 12px 18px; font-family: var(--fb); font-size: 13px; font-weight: 500;
    line-height: 1.5; letter-spacing: 0; border: 1px solid var(--red); background: rgba(189, 36, 2,.08); }
  .px-rail-foot { display: none; }
  .px-facts { grid-template-columns: 1fr 1fr; }
  .px-fact:nth-child(2n) { border-right: none; }
  .px-fact:nth-child(-n+2) { border-bottom: 1px solid var(--bdr); }
  .px-step { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }
  .px-step.flip .px-step-media { order: 0; }
  .px-kpis, .px-kpis.c3 { grid-template-columns: 1fr 1fr; }
  .px-kpi { border-bottom: 1px solid var(--bdr); }
  .px-kpi:nth-child(2n) { border-right: none; }
  .px-swatches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .px-hero { padding: 122px 18px 0; }
  .px-hero-top { margin-bottom: 40px; }
  .px-layout { padding: 52px 18px 0; }
  .px-rail { margin: 0 -18px 44px; padding: 12px 18px 0; }
  .px-sec { padding-bottom: 68px; }
  .px-plain { padding: 18px 20px 16px; font-size: 16.5px; }
  .px-cols, .px-cols.c3 { grid-template-columns: 1fr; }
  .px-cell { padding-right: 0; }
  .px-def-r { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .px-row { grid-template-columns: minmax(0,1fr) 30px; }
  .px-row-idx, .px-row-meta { display: none; }
  .px-facts { grid-template-columns: 1fr; }
  .px-fact { border-right: none; border-bottom: 1px solid var(--bdr); }
  .px-fact:last-child { border-bottom: none; }
  .px-sys-r { grid-template-columns: minmax(0,1fr) 70px; }
  .px-bars { display: none; }
  .px-acc-btn { grid-template-columns: minmax(0,1fr) 26px; }
  .px-acc-n { display: none; }
  .px-acc-inner p { padding-left: 2px; padding-right: 10px; }
  .px-form-row { grid-template-columns: 1fr; }
  .px-cta-in { padding: 68px 18px; }
  .px-live { padding: 22px 20px; gap: 16px; }
  .px-live-meta { margin-left: 0; text-align: left; }
  .px-assets { grid-template-columns: 1fr; }
  .px-swatches { grid-template-columns: 1fr 1fr; }
  .px-hero-acts .px-btn { width: 100%; justify-content: center; }
}
/* ── Phones and folded devices ───────────────────────────────────────
   The hero clamp bottoms out at 56px, which is a desktop minimum: below
   about 737px it stops scaling entirely. These steps give small screens
   a scale of their own, down to the 280px cover display of a folded
   phone, so the title never has to be broken to fit. */
/* These two carry the 15cqi cap through with them. A bare font-size here
   would replace the capped value from the base rule and leave the phone
   breakpoints - the ones with the least room to spare - as the only
   widths where a headline can still outgrow its column. */
@media (max-width: 560px) {
  .px-title { font-size: min(clamp(38px, 11.5vw, 56px), 15cqi); letter-spacing: -.025em; }
}
@media (max-width: 360px) {
  .px-title { font-size: min(clamp(29px, 10.4vw, 40px), 15cqi); }
  .px-hero { padding-left: 14px; padding-right: 14px; }
  .px-layout { padding-left: 14px; padding-right: 14px; }
}

/* ── contactInline ── */

/* ══ CONTACT — minimal ══ */
#ct-hero { padding: 190px 44px 96px; }
#ct-hero .in { max-width: 1200px; margin: 0 auto; }
#ct-hero h1 { margin: 0; font-family: var(--fd); font-weight: 800; font-size: clamp(52px, 7vw, 110px); line-height: .95; letter-spacing: -.03em; color: var(--txt); }
#ct-hero h1 em { font-family: var(--fs); font-style: italic; font-weight: 400; color: var(--red); letter-spacing: -.02em; }
#ct-hero p { margin: 30px 0 0; max-width: 46ch; font-family: var(--fm); font-size: 17px; line-height: 1.7; font-weight: 300; color: var(--mid); text-wrap: pretty; }
#ct-hero p strong { color: var(--txt); font-weight: 500; }
#ct-main { padding: 0 44px 130px; }
#ct-main .in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(64px, 8vw, 130px); align-items: start; }
/* channels — plain list */
.ct-ch { display: grid; gap: 34px; }
.ct-ch .row span { display: block; font-family: var(--fm); font-size: 13px; font-weight: 400; color: var(--dim); margin-bottom: 6px; }
.ct-ch .row a { font-family: var(--fm); font-size: clamp(19px, 1.9vw, 24px); font-weight: 500; color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--bdr2); padding-bottom: 3px; transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.ct-ch .row a:hover { color: var(--red-ink); border-color: var(--red-ink); }
.ct-office { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--bdr); }
.ct-office h2 { margin: 0 0 16px; font-family: var(--fm); font-size: 13px; font-weight: 400; color: var(--dim); }
.ct-office p { margin: 0; font-family: var(--fm); font-size: 15.5px; line-height: 1.8; font-weight: 300; color: var(--mid); }
.ct-office p b { color: var(--txt); font-weight: 500; }
.ct-office .more { margin-top: 22px; font-size: 14px; }
.ct-office .more a { color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--bdr2); transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.ct-office .more a:hover { color: var(--red-ink); border-color: var(--red-ink); }
/* form — minimal underline fields */
.ct-form { display: grid; gap: 34px; }
.ct-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ct-field { display: grid; gap: 4px; }
.ct-field label { font-family: var(--fm); font-size: 13px; color: var(--dim); }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--bdr2); color: var(--txt); font-family: var(--fm); font-size: 16px; font-weight: 300; padding: 12px 0; border-radius: 0; transition: border-color var(--dur-2) var(--ease-out); }
.ct-field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.ct-field select option { background: var(--bg-1); color: var(--txt); }
.ct-field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--red-ink); }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--dim); }
.px-form-ok { display: none; font-family: var(--fm); font-size: 15px; font-weight: 300; color: var(--txt); }
.px-form-ok::before { content: '✓  '; color: var(--lime); font-weight: 600; }
.px-form.sent .px-form-ok { display: block; }
.ct-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ct-send { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: var(--red-aa); color: #fff; border: 0; padding: 17px 32px; border-radius: 2px; font-family: var(--fm); font-size: 14px; font-weight: 600; transition: background var(--dur-2) var(--ease-out); }
.ct-send:hover { background: var(--red); }
.ct-foot small { font-family: var(--fm); font-size: 13px; font-weight: 300; color: var(--dim); }
/* photo */
#ct-photo { margin: 0; padding: 0 44px 120px; }
#ct-photo .in { max-width: 1200px; margin: 0 auto; }
#ct-photo img { display: block; width: 100%; height: clamp(300px, 40vw, 480px); object-fit: cover; border-radius: 2px; }
#ct-photo figcaption { margin-top: 14px; font-family: var(--fm); font-size: 13px; font-weight: 300; color: var(--dim); }
@media (max-width: 1024px) {
  #ct-hero { padding: 150px 28px 72px; }
  #ct-main { padding: 0 28px 96px; }
  #ct-main .in { grid-template-columns: 1fr; gap: 72px; }
  #ct-photo { padding: 0 28px 88px; }
}
@media (max-width: 640px) {
  #ct-hero { padding: 128px 18px 56px; }
  #ct-main { padding: 0 18px 76px; }
  .ct-form .two { grid-template-columns: 1fr; }
  #ct-photo { padding: 0 18px 72px; }
  .ct-send { width: 100%; justify-content: center; }
}

/* ── illustrations ── */

/* ── All illustrations = same small sticker (Elyra red) ─────────── */
.px-sticker,
.px-illus {
  margin: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  background: var(--bg-1);
  border: 1px solid var(--bdr2);
  border-radius: var(--radius, 20px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  width: fit-content;
  max-width: none;
}
.px-sticker img,
.px-illus img {
  width: 44px;
  height: 44px;
  max-height: 44px;
  display: block;
  object-fit: contain;
}
.px-sticker.avatar,
.px-illus.avatar {
  padding: 3px;
  border-radius: 999px;
}
.px-sticker.avatar img,
.px-illus.avatar img {
  width: 44px;
  height: 44px;
  max-height: 44px;
  border-radius: 999px;
  object-fit: cover;
}

.px-sticker-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  pointer-events: none;
  user-select: none;
}
.px-sticker-cluster.scatter {
  gap: 5px;
}

/* Subpage heroes — illustration fully visible on the right */
.px-hero {
  overflow: visible !important;
  --hero-pb: clamp(56px, 10vw, 120px);
  padding-bottom: var(--hero-pb) !important;
}
/* #ct-hero's padding lives in contactInline.ts (190/44/96, then 72 and 56
   at its own breakpoints). Mirrored here only so the illustration can
   cancel it; if that padding is ever changed, change it here too. */
#ct-hero { --hero-pb: 96px; }
@media (max-width: 1024px) { #ct-hero { --hero-pb: 72px; } }
@media (max-width: 640px)  { #ct-hero { --hero-pb: 56px; } }

.px-hero-in {
  overflow: visible;
}

.px-hero-grid {
  align-items: center !important;
}

/* Subpage hero illustrations stand on the divider, the same way the home
   CTA does. Measured across the 21 illustrations used here, 19 draw their
   ground within 1% of the bottom of the canvas — for those the artwork's
   bottom edge IS the ground line, so ending the figure on the hero's
   bottom edge is all it takes. One, detailed-information, sits 3.88%
   higher and is corrected by name below; the other, walking, is the home
   CTA and has its own rule. Centring them, which is what this did before,
   left every one of them floating 72-139px above the line with nothing
   under its feet. */
.px-hero-grid .px-illus.illus-hero {
  position: relative;
  top: 0;
  transform: none;
  align-self: end;
  justify-self: end;
  /* The hero reserves padding below its content; the figure reaches back
     through it so the artwork ends on the divider rather than on the
     inside edge of that padding. */
  margin: 0 clamp(12px, 5vw, 88px) calc(-1 * var(--hero-pb, 0px)) 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.px-hero-grid .px-illus.illus-hero img {
  width: auto;
  height: auto;
  /* 100% is the figure's grid column. Without it the 430px cap wins on a
     ~1200px screen, where the .75fr column is only ~393px, and the
     illustration hangs 33px back over the copy. */
  max-width: min(430px, 100%, 44vw);
  max-height: min(340px, 42vh);
  display: block;
  object-fit: contain;
  object-position: center center;
  mix-blend-mode: lighten;
}

/* detailed-information (Press) draws a hairline ground at row 581 of a
   605px canvas and then keeps going for another 24px of shadow, so its
   ground sits 3.88% above the bottom of the file. Every other hero
   illustration is within 1% and needs no correction. */
.px-hero-grid .px-illus.illus-hero img[src$="detailed-information.png"] {
  transform: translateY(3.88%);
}

#ct-hero {
  overflow: visible !important;
}

#ct-hero .in.ct-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center !important;
}

#ct-hero .px-illus.illus-hero {
  position: relative;
  top: 0;
  transform: none;
  justify-self: end;
  align-self: end;
  margin: 0 clamp(12px, 5vw, 88px) calc(-1 * var(--hero-pb, 0px)) 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

#ct-hero .px-illus.illus-hero img {
  width: auto;
  height: auto;
  max-width: min(430px, 100%, 44vw);
  max-height: min(340px, 42vh);
  display: block;
  object-fit: contain;
  object-position: center center;
  mix-blend-mode: lighten;
}

/* Large section illustrations (careers sidebar, etc.) */
.px-illus.illus-lg {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.px-illus.illus-lg img {
  width: auto;
  height: auto;
  max-width: min(420px, 100%);
  max-height: min(320px, 42vh);
  object-fit: contain;
  mix-blend-mode: lighten;
}
/* Section headers — sticker to the right of h2 */
.px-sec-head .px-illus,
.px-sec-head .px-sticker,
.px-sec-head .px-sticker-cluster {
  margin: 0;
  align-self: center;
  flex-shrink: 0;
}
/* Home CTA (Stop Walking) — illu bottom-right, ground line on the section
   divider.

   The artwork draws its own horizon: a full-width hairline at rows 615-617
   of a 670px canvas, with the ground blob and the figure's shadow spilling
   below it. That hairline, not the bottom of the PNG, is the line the eye
   reads as the ground — so it is the one that has to meet the divider
   between the two sections.

   It sits 53.5px above the image bottom, i.e. 7.99% of the canvas height.
   A percentage translateY resolves against the element's own height, so
   one value holds at every breakpoint no matter what the image is scaled
   to; a pixel offset would only be right at one width. bottom: 0 puts the
   image bottom on the divider, and the translate then slides the artwork
   down by exactly the distance from its horizon to its bottom edge. */
#cta {
  overflow: visible !important;
}
#cta .px-illus.cta-illus {
  position: absolute;
  right: clamp(12px, 2vw, 44px);
  bottom: 0;
  top: auto;
  z-index: 1;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(7.99%);
  pointer-events: none;
}
#cta .px-illus.cta-illus img {
  width: min(820px, 40vw);
  height: auto;
  max-height: min(560px, 62vh);
  display: block;
  object-position: bottom center;
  mix-blend-mode: lighten;
}
#why .in.why-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 440px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
#why .why-main {
  min-width: 0;
}
/* ── About · mission ───────────────────────────────────────────────
   Was one 54px sentence over six lines, switching between bold sans
   and red italic serif mid-clause. Now the mission is a single line,
   and the three things it means sit under it as plain points. */
.mission { margin: -4px 0 56px; }
.mission-line {
  margin: 0 0 32px;
  max-width: 22ch;
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--txt);
  text-wrap: balance;
}
.mission-line em {
  font-family: var(--fs);
  font-style: italic;
  font-weight: 400;
  color: var(--red);
}
.mission-how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--bdr);
}
.mission-how li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mid);
}
.mission-how li + li { padding-left: 20px; border-left: 1px solid var(--bdr); }
@media (max-width: 760px) {
  .mission-how { grid-template-columns: 1fr; }
  .mission-how li { padding: 16px 0; }
  .mission-how li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--bdr); }
}

/* ── Field notes ───────────────────────────────────────────────────
   The four notes used to sit inside the left column, four across in
   816px - cells of about 170px, so every heading broke into a
   three-line uppercase stack, and the sticky illustration left a hole
   below it on the right. They now span the full width under the quote
   as one panel, the same surface every other card grid on the site
   uses, with sentence-case headings and a lime mark per note. */
#why .why-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(8px, 1.5vw, 20px);
  background: var(--panel-line);
  border: 1px solid var(--panel-edge);
  border-radius: var(--panel-r);
  box-shadow: var(--panel-sh);
  overflow: hidden;
}
#why .why-i {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--panel);
}
#why .why-i-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
#why .why-i-top .cmark { margin-left: -4px; }
#why .why-i b {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--dim);
  font-weight: 500;
}
#why .why-i h3 {
  margin: 0 0 10px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.25;
  color: var(--txt);
  text-wrap: balance;
}
#why .why-i p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--mid);
}
#why .pull { margin-bottom: 0; }
@media (max-width: 1100px) {
  #why .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #why .why-grid { grid-template-columns: 1fr; }
}
#why .px-illus.why-illus,
section .why-layout .px-illus.why-illus {
  position: relative;
  top: auto;
  align-self: center;
  justify-self: end;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform-origin: center top;
  overflow: visible;
}

#why .px-illus.why-illus img,
section .why-layout .px-illus.why-illus img {
  width: min(440px, 100%);
  height: auto;
  max-width: none;
  max-height: min(320px, 42vh);
  object-fit: contain;
  mix-blend-mode: lighten;
}

#why,
section .why-layout {
  overflow: visible;
}

/* Home hero — Lime-style centered stack */
#hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 96px 24px 12vh !important;
  text-align: center;
}
#hero .h-bg::after {
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.35) 0%,
    rgba(13, 13, 13, 0.12) 45%,
    rgba(13, 13, 13, 0.55) 78%,
    var(--bg) 100%
  ) !important;
}
#hero .h-hero-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  width: 100%;
  max-width: 760px;
}
#hero h1.hero-hl {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  font-family: var(--fd), 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(3.5rem, 11vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: none;
  color: #fff;
  text-align: center;
  align-items: center;
}
#hero .hl-line {
  display: block;
}
#hero .hl-inner {
  display: inline;
}
#hero .hl-stroke {
  color: var(--red);
  font-style: normal;
  font-weight: 800;
}
#hero .h-sub-plain {
  max-width: 34ch;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: clamp(15px, 2.1vw, 17px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.88);
}
#hero .h-sub-plain::before,
#hero .h-sub-plain::after {
  display: none;
}
#hero .h-sub-plain strong {
  color: #fff;
  font-weight: 600;
}
#hero .hero-app-btn {
  margin-top: 4px;
  border-radius: 999px;
  padding: 17px 42px;
  font-family: var(--fm), 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: 0 8px 28px rgba(189, 36, 2, 0.28);
}
#hero .hero-app-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 40px rgba(189, 36, 2, 0.38);
}

/* ── Lime surf along the bottom of the hero CTA ────────────────────
   Two tiles of the same wave at different widths and speeds, so the
   crests drift apart instead of reading as one repeating stamp. The
   pill's own radius clips them, so the band takes the button's shape
   at any width.

   The front crest is var(--lime) - var(--lime) written out, because a
   data URI cannot read a custom property - and the wave behind it is
   the darker #6AA432 the battery gradient already uses. Both are
   solid: lime at partial opacity over the red fill turns brown. If
   the token moves, these move with it by hand.

   z-index -1 with isolation on the button puts the waves above the
   red fill but below the label: a negative-z-index descendant paints
   after its parent's background and before its inline content. The
   band is 13px inside 17px of bottom padding, so it clears the
   descenders either way - the stacking is belt and braces. */
#hero .hero-app-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#hero .hero-app-btn::before,
#hero .hero-app-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 0, 0 100%;
  pointer-events: none;
  transition: height 900ms var(--ease-in-out);
}
#hero .hero-app-btn::before {
  height: 15px;
  width: calc(100% + 64px);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='15' viewBox='0 0 64 15' preserveAspectRatio='none'><path d='M0 8 q8 -6 16 0 t16 0 t16 0 t16 0 V15 H0 Z' fill='%236AA432'/></svg>"),
    linear-gradient(#6AA432, #6AA432);
  background-size: 64px 15px, 100% calc(100% - 14px);
  animation: heroSurfBack 5.6s linear infinite;
}
#hero .hero-app-btn::after {
  height: 11px;
  width: calc(100% + 48px);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='11' viewBox='0 0 48 11' preserveAspectRatio='none'><path d='M0 6 q6 -4 12 0 t12 0 t12 0 t12 0 V11 H0 Z' fill='%239EE858'/></svg>"),
    linear-gradient(#9EE858, #9EE858);
  background-size: 48px 11px, 100% calc(100% - 10px);
  animation: heroSurfFront 3.4s linear infinite;
}
/* ── Charge on click ──────────────────────────────────────────────
   Clicking the button charges it like a battery: the lime surf rises
   until it fills the pill, still rolling on top, and drains back once
   the page has moved on. The back wave leads and the front follows
   80ms behind, so it reads as liquid rather than a block sliding up.
   ease-in-out over 900ms, so it fills at a steady rate the way a
   charge bar does, instead of the house curve's front-loaded pop.
   The label goes dark as the lime passes it - white on lime is 1.5:1,
   near-black is 13:1. home-cta.ts adds and removes .charging; under
   reduced motion it never does, and the link just goes. */
#hero .hero-app-btn.charging::before { height: calc(100% + 16px); }
#hero .hero-app-btn.charging::after  { height: calc(100% + 12px); transition-delay: 80ms; }
#hero .hero-app-btn.charging { box-shadow: 0 10px 36px rgba(158, 232, 88, .38); }
/* The label flips when the lime is level with it, not on click: the
   button carries an !important transition from polish.ts, so a CSS
   delay here would be ignored. home-cta.ts adds .charge-ink at the
   halfway mark instead. */
#hero .hero-app-btn.charge-ink { color: #0B0B0B !important; }
/* One tile per cycle, so the loop point is invisible. */
@keyframes heroSurfBack { to { transform: translateX(-64px); } }
@keyframes heroSurfFront { to { transform: translateX(-48px); } }
@media (prefers-reduced-motion: reduce) {
  #hero .hero-app-btn::before,
  #hero .hero-app-btn::after { animation: none; }
}
/* Unified nav — same pill CTA on home + every subpage */
#nav,
nav.site-nav {
  gap: 40px;
}

#nav .btn-getapp,
nav.site-nav .btn-getapp {
  border-radius: 999px;
  padding: 11px 20px;
  /* --red-aa, not --red: white on brand red is 4.5:1, which fails AA for
     13px text. The AA derivative exists for solid fills under white. */
  background: var(--red-aa);
  color: #fff !important;
  font-family: var(--fm), 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border: none;
  box-shadow: 0 6px 20px rgba(189, 36, 2, 0.22);
}

#nav .btn-getapp .arr,
nav.site-nav .btn-getapp .arr {
  display: none;
}

#nav .btn-getapp:hover,
nav.site-nav .btn-getapp:hover {
  /* Held at --red-aa: brightening the fill took the white label to
     4.35:1 on --red and 3.47:1 on --red-h, both under AA. The lift and
     a stronger glow are the hover now, not the fill. This rule is the
     one that wins - it is on #nav - so the two softer ones in global
     and polish only matter where this does not apply. */
  background: var(--red-aa);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(189, 36, 2, 0.42);
}

/* Home testimonials — avatar next to name */
.q-person {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.q-blk:nth-child(even) .q-person {
  flex-direction: row-reverse;
}
.q-avatar.px-illus {
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  #hero {
    padding: 88px 20px 10vh !important;
  }
  #hero .hero-app-btn {
    width: min(100%, 320px);
    text-align: center;
  }
  .px-hero-grid .px-illus.illus-hero {
    grid-column: 1 / -1;
    justify-self: end;
    top: 0;
    margin: 0 0 8px;
    order: -1;
  }
  .px-hero-grid .px-illus.illus-hero img {
    max-height: min(220px, 34vh);
    max-width: min(340px, 88vw);
  }
  #ct-hero .in.ct-hero-grid {
    grid-template-columns: 1fr;
  }
  #ct-hero .px-illus.illus-hero {
    justify-self: end;
    top: 0;
    margin: 0 0 16px;
    order: -1;
  }
  #ct-hero .px-illus.illus-hero img {
    max-height: min(220px, 34vh);
    max-width: min(340px, 88vw);
  }
  .px-illus.illus-lg img {
    max-height: min(260px, 38vh);
    max-width: min(320px, 88vw);
  }
  #cta .px-illus.cta-illus {
    right: 0;
    bottom: 0;
  }
  #cta .px-illus.cta-illus img {
    width: min(640px, 92vw);
    max-height: min(420px, 48vh);
  }
  #why .in.why-layout {
    grid-template-columns: 1fr;
  }
  #why .px-illus.why-illus {
    position: relative;
    top: auto;
    justify-self: end;
    margin: 0 0 28px;
    order: -1;
  }
  #why .px-illus.why-illus img {
    width: min(320px, 78vw);
  }
  .px-sticker img,
  .px-illus img,
  .px-sticker.avatar img,
  .px-illus.avatar img {
    width: 38px;
    height: 38px;
    max-height: 38px;
  }
}

/* ── Global 20px corner radius (sharp UI → rounded) ─────────────── */
.why-pillar,
.why-manifesto,
.why-values,
.px-kpis,
/* .px-receipt is deliberately absent: it is a torn strip of thermal
   paper, and paper does not have a 20px corner radius. */
.px-boiler,
.px-plate,
.px-chip,
.px-form-ok,
.px-noresults,
.px-sys,
.px-swatches,
.px-swatch,
.px-asset,
.px-field input,
.px-filter input,
.px-submit,
.px-btn,
.px-step,
.px-time,
.px-live,
.px-row,
.pass,
.pass-cta,
.price-card,
.pricing-grid,
.pricing-foot,
.pp-card,
.board,
.bat-cell,
.bat-scroll,
.elx .stage,
.pc-3d,
.pc-glass,
.pc-nav,
.pc-counter,
.pc-g-nav,
.pc-sp,
.f-form,
.f-social a,
.drawer,
.drawer-close,
.ct-office,
.ct-send,
.ct-field input,
.ct-ch .row a,
.cf-form input,
.cf-form select,
.cf-form textarea,
.fi-btn,
.fi-menu,
.fi-clear,
#filter-bar,
.ed-grid,
.ed-grid-list,
.home-trio,
.home-strip,
.trio-card,
.product-trio,
.prod-carousel,
.zone-chips,
.zone-card,
.zone-visual,
.zx-panel,
.zx-ledger,
.zx-stat,
.wa-card,
.pl-map,
.pl-ticket,
.pl-chip,
.pl-run,
.pl-verdict,
.pl-stamp,
.pl-swap,
.pl-read,
.pl-bars,
.pl-dial,
.pl-track,
.art-kpi,
.art-faq details,
.art-call-k,
.art-tr,
.art-next a,
.role-row,
.roles-empty,
.geo-stamp,
.geo-trace,
.spec-r,
.q-blk,
.m-item,
.step,
.s-blk,
.end-cta,
.cl-chip,
.cl-join,
.cl-view,
.cl-you,
.cl-r,
.cta-r,
.cta-r-tag,
.cta-apply,
.d-section,
.d-tag,
.park-c,
.park-bay,
.park-sheet-h,
.park-tools .btn,
.unlock-stores .c-btn,
.lang-switch,
.nav-drawer,
.nav-drawer ul a,
.btn,
.btn-p,
.btn-s,
.c-btn,
.c-btn-g,
.c-btn-a,
.elx .btn,
.px-sticker,
.px-illus:not(.illus-hero):not(.cta-illus):not(.why-illus) {
  border-radius: var(--radius, 20px);
}

/* Grouped ledgers — outer ring + clip inner rows */
.px-cols,
.px-kpis,
.why-manifesto,
.why-values,
.ed-grid,
.ed-grid-list,
.zone-chips,
.pricing-grid,
.px-swatches,
.board,
.bat-scroll,
.cl-rows,
.geo-rows,
.park-checks,
.pp-lines,
.rp-hand,
.spec-r,
.pl-read,
.zx-ledger {
  overflow: hidden;
}

/* ── px-def — definition rows (vehicles, legal, pricing) ─────────
   These rows spent a while on the page ground as an open ledger, on the
   argument that a panel adds no information the hairlines do not. The
   panel is back, because the site now has one surface for every block
   of content and a bare ledger between two panels read as unfinished
   rather than restrained. The row grid stays as it was.

   These rows are not interactive, so they do not light up under the
   cursor — a row that changes colour on hover reads as clickable, and
   nothing happens when you click it. Links inside a row keep their own
   hover, because those really are clickable. */
.px-def-r {
  grid-template-columns: minmax(132px, 190px) minmax(0, 1fr);
  gap: 20px 40px;
  align-items: start;
}

.px-def-k {
  padding-top: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--mid);
  line-height: 1.5;
  text-wrap: balance;
}

.px-def-v {
  display: block;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--mid);
  text-wrap: pretty;
}

.px-def-v .big {
  display: block;
  font-family: var(--fd);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--txt);
}

.px-def-v .big small {
  display: block;
  margin: 10px 0 0;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}

.px-def-v .px-def-desc {
  display: block;
  margin: 10px 0 0;
  max-width: 62ch;
}

/* ── px-cols — feature grid card (gap hairlines, 20px shell) ──── */
/* ══ PANELS ═══════════════════════════════════════════════════════
   Every block of content that is a panel rather than page ground uses
   one recipe: cells on --panel, separated by 1px gaps that let the
   container's --panel-line show through as hairlines, inside a
   --panel-edge wall with --panel-r corners and --panel-sh for the lit
   top edge and the shadow under it.

   Before this, only .px-cols was a panel at all, and its surface sat
   1.06:1 off the page - so the site read as hairlines drawn on black,
   with one lonely card. The spec ledgers, KPI strips, accordions,
   swatches and status rows were bare rules on the ground.

   Panels do not animate in. They are the furniture of the page; having
   each one slide up as you reach it made the layout feel unsettled. */
.px-cols {
  gap: 1px;
  background: var(--panel-line);
  border: 1px solid var(--panel-edge);
  border-radius: var(--panel-r);
  box-shadow: var(--panel-sh);
  overflow: hidden;
  margin-top: 8px;
}

.px-cols .px-cell {
  background: var(--panel);
  padding: 28px 32px 32px;
  border: none !important;
}

/* ── Spec ledger ── */
.px-def {
  border: 1px solid var(--panel-edge) !important;
  border-radius: var(--panel-r);
  background: var(--panel);
  box-shadow: var(--panel-sh);
  overflow: hidden;
  margin-top: 8px;
}
.px-def-r {
  padding: 24px 32px;
  border-bottom: 1px solid var(--panel-line);
}
.px-def-r:last-child { border-bottom: 0; }

/* ── KPI strip ── */
.px-kpis {
  border: 1px solid var(--panel-edge);
  border-radius: var(--panel-r);
  background: var(--panel-line);
  box-shadow: var(--panel-sh);
  overflow: hidden;
  gap: 1px;
}
.px-kpi {
  background: var(--panel);
  border-right: 0 !important;
}

/* ── Accordion stack: one panel around the whole group ── */
.px-acc {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-bottom: 0;
}
.px-acc:first-of-type { border-top: 1px solid var(--panel-edge); }
.px-acc + .px-acc { border-top: 1px solid var(--panel-line); }
.px-acc:not(:has(+ .px-acc)) {
  border-bottom: 1px solid var(--panel-edge);
  box-shadow: var(--panel-sh);
}
.px-acc-btn { padding-left: 24px; padding-right: 24px; }
.px-acc-btn:hover { padding-left: 32px; }
.px-acc-body { padding-left: 24px; padding-right: 24px; }

/* ── Swatch and asset grids ── */
.px-swatches,
.px-assets {
  background: var(--panel-line);
  border: 1px solid var(--panel-edge);
  border-radius: var(--panel-r);
  box-shadow: var(--panel-sh);
  overflow: hidden;
}
.px-swatch,
.px-asset { background: var(--panel); }

/* ── Status rows ── */
.px-sys {
  border: 1px solid var(--panel-edge) !important;
  border-radius: var(--panel-r);
  background: var(--panel);
  box-shadow: var(--panel-sh);
  overflow: hidden;
}
.px-sys-r {
  padding: 19px 28px;
  border-bottom: 1px solid var(--panel-line);
}
.px-sys-r:last-child { border-bottom: 0; }

/* Furniture does not slide. */
body.px-js .px-cols .px-cell[data-rv],
body.px-js .px-def-r[data-rv],
body.px-js .px-kpi[data-rv],
body.px-js .px-acc[data-rv],
body.px-js .px-sys-r[data-rv] {
  opacity: 1;
  transform: none;
  transition: none;
}


.px-cols .px-cell h3 {
  margin-bottom: 12px;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ── The cell mark: a red rhombus with a dark icon inside ────────
   The rhombus is a square turned 45 degrees. Rotating the span itself
   would leave its layout box unrotated, so the 31px diagonal would
   overlap the heading while flex reserved only 22px - hence a fixed
   32px box with the rotation on a ::before inside it, and the icon
   drawn upright on top. Icons are Phosphor, filled shapes on a 256
   grid, so the glyph takes fill rather than stroke.

   The rhombus is lime and the glyph near-black. That pairing is the
   legible one by some distance: the glyph reads at 13:1 on lime
   against 4.5:1 on brand red, and the rhombus itself sits at 11.3:1
   on the panel rather than 3.9:1. White on either would glow at 13px
   and lose the line. */
.cmark {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: none;
  border-radius: 0;
  transform: none;
}
.cmark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--lime);
  border-radius: 5px;
  transform: rotate(45deg);
}
.cmark svg {
  position: relative;
  width: 13px;
  height: 13px;
  fill: var(--bg);
  overflow: visible;
}

/* Per-context alignment. The mark itself never changes; only where it
   sits relative to the words next to it. */
.px-cols .px-cell h3 .cmark { margin-top: -4px; }          /* beside a heading */
.why-pillar .cmark,
.sf-path .cmark,
.sf-cert .cmark,
.ct-ch .row .cmark { display: grid; margin: 0 0 14px; }    /* above a stack */
.sf-cert .cmark { margin-bottom: 16px; }

.px-cols .px-cell p {
  margin: 0;
  line-height: 1.72;
  max-width: 44ch;
  color: var(--mid);
}

@media (max-width: 768px) {
  .px-def-r {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 22px;
  }

  .px-def-k {
    padding-top: 0;
  }

  .px-cols .px-cell {
    padding: 24px 24px 28px;
  }
}

/* FAQ / accordion stacks */
.px-acc {
  overflow: hidden;
}
.px-group-t + .px-acc,
.px-sec > .px-acc:first-child {
  border-top-left-radius: var(--radius, 20px);
  border-top-right-radius: var(--radius, 20px);
}
.px-acc:not(:has(+ .px-acc)) {
  border-bottom-left-radius: var(--radius, 20px);
  border-bottom-right-radius: var(--radius, 20px);
}

/* Story strips & image cards */
.story-strip,
.story-strip > img,
.home-trio figure,
.home-trio figure img,
.wa-card img,
.ed-grid-item,
.trio-card img {
  border-radius: var(--radius, 20px);
}

/* Keep pills, circles, and full-bleed chrome square */
.btn-getapp,
.hero-app-btn,
#nav,
nav.site-nav,
#ely-scroll,
#ely-scroll::before,
#ely-cur,
.px-sticker.avatar,
.px-illus.avatar,
.px-illus.avatar img,
.dot,
.px-dot,
.px-live-dot,
.px-live-dot::after,
.pc-dot,
.rp-dot,
.rp-dot i,
.zone-pin-core,
.zone-pin-ring,
.nav-status .dot,
.pl-tgl input,
.pl-tgl input::after,
.pl-mins input[type="range"]::-webkit-slider-thumb,
.pl-mins input[type="range"]::-moz-range-thumb,
.unlock-dial,
.unlock-dial::after,
.geo-dial,
.thr-dial,
.thr-hold,
.zx-pin i,
.zx-pin i::after,
.zx-lights i,
.nav-burger span,
.f-marquee,
.ticker,
.f-wordmark,
.page-hero,
#c-hero,
#hero,
.px-hero-grid .px-illus.illus-hero,
#cta .px-illus.cta-illus,
#why .px-illus.why-illus,
.glance,
.px-cta,
footer.site-foot {
  border-radius: 0 !important;
}
.btn-getapp,
.hero-app-btn {
  border-radius: 999px !important;
}
#nav,
nav.site-nav {
  border-radius: calc(var(--nvc, 0) * 999px) !important;
}
#ely-scroll,
#ely-scroll::before,
#ely-cur,
.px-sticker.avatar,
.px-illus.avatar,
.px-illus.avatar img,
.dot,
.px-dot,
.px-live-dot,
.pc-dot,
.rp-dot i,
.zone-pin-core,
.zone-pin-ring,
.pl-tgl input,
.pl-tgl input::after,
.unlock-dial,
.unlock-dial::after,
.geo-dial,
.thr-dial,
.nav-burger span {
  border-radius: 50% !important;
}

/* Side rail TOC — single horizontal line, left-aligned (no char stacking) */
.px-rail {
  width: 100%;
  min-width: 220px;
  max-width: 300px;
}

.px-toc a {
  display: block !important;
  grid-template-columns: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.px-toc a.on {
  font-family: var(--fd, 'Syne', sans-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  padding: 14px 0 16px !important;
  white-space: nowrap !important;
}

/* ── microMobility ── */

/* ── 1. NEON → DAYLIGHT ───────────────────────────────────────────────
   Hard red halos are the loudest "cyber" cue. Swap every red glow for
   a soft, warm, gravity-correct drop shadow. */
.btn-getapp:hover,
.btn.primary:hover,
.lang-switch button.active {
  box-shadow: 0 8px 22px -6px rgba(189, 36, 2, .42) !important;
}
.f-brand .f-logo:hover img { filter: brightness(0) invert(1) !important; }

/* ── 2. THE STATUS LED ────────────────────────────────────────────────
   A red dot pulsing on a dark bar reads as an alarm. Mint + a slow,
   shallow breath reads as "service is live". */
.nav-status .dot { background: var(--teal) !important; animation: em-breathe 3.4s ease-in-out infinite !important; }
@keyframes em-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 199, 154, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(22, 199, 154, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-status .dot { animation: none !important; }
}

/* ── 3. A THREE-COLOUR ACCENT SYSTEM ──────────────────────────────────
   Everything accented in one alert-red is what made the palette feel
   like a threat console. Section tags go mint, counters go sun, and
   vermilion is reserved for things you can actually press. */
.sec-tag { color: var(--teal) !important; }
.sec-num, .ed-grid .num { color: var(--sun) !important; }
.page-hero .eyebrow { color: var(--sun) !important; }
.story-strip .cap-tag { color: var(--red-ink) !important; }
.product-trio figure figcaption .lbl { color: var(--red-ink) !important; }

/* ── 4. SOFT GEOMETRY ─────────────────────────────────────────────────
   Sharp 0-radius panels butted together on 1px rules are dashboard
   furniture. Rounding them turns panels into cards. */
.btn { border-radius: 100px !important; }
.f-social a { border-radius: 100px !important; }
.f-form { border-radius: 100px !important; overflow: hidden; }
.f-form input { padding-left: 22px !important; }
.story-strip { border-radius: 22px !important; overflow: hidden; border-left: 1px solid var(--bdr); border-right: 1px solid var(--bdr); }
.product-trio { background: transparent !important; gap: 14px !important; border: none !important; }
.product-trio figure { border-radius: 18px !important; border: 1px solid var(--bdr); }

/* .ed-grid draws its rules with gap+background. Convert it to real
   cards so the page reads as content, not as a table. */
.ed-grid { background: transparent !important; border: none !important; gap: 14px !important; }
.ed-grid > div { border-radius: 18px !important; border: 1px solid var(--bdr); }
.ed-grid > div:hover { background: var(--bg-1) !important; border-color: var(--bdr2); }
.ed-grid-list { gap: 14px !important; }
.ed-grid-list .ed-grid-item {
  border: 1px solid var(--bdr) !important;
  border-radius: 18px !important;
}

/* ── 5. DETENSION THE TYPOGRAPHY ──────────────────────────────────────
   0.2em uppercase tracking is military/tactical. Pull the micro-labels
   back toward normal reading rhythm; headlines keep their impact. */
.sec-tag, .page-hero .eyebrow, .story-strip .cap-tag {
  letter-spacing: .1em !important;
}
.nav-status, .crumb, .f-bot, .f-sig-l, .f-sig-r, .f-news-meta {
  letter-spacing: .06em !important;
}
.nav-links a { letter-spacing: .08em !important; }

/* Monospace is a terminal cue — the signature and planner both used it. */
.f-sig-center, .px-num, .mono, [class*="mono"] {
  font-family: var(--fd), 'Syne', sans-serif !important;
  font-style: normal !important;
}

/* ── 6. WARM THE SURFACES ─────────────────────────────────────────────
   Alternate bands get a faint sunlit wash so long pages breathe
   instead of reading as one unlit void. */
section.std:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(255, 178, 63, .035) 0%, rgba(255, 178, 63, 0) 55%), var(--bg);
}
section.std { border-bottom-color: var(--bdr) !important; }

/* The footer sign-off glow was a red radial — make it a warm sunrise. */
.f-signoff {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 178, 63, .13) 0%, transparent 62%),
    radial-gradient(ellipse at 20% 130%, rgba(22, 199, 154, .08) 0%, transparent 55%),
    var(--bg) !important;
}

/* ── 7. MOTION, NOT MONITORING ────────────────────────────────────────
   Cards lift on hover the way a scooter picks up — slight, forward,
   eased — rather than flashing a border highlight. */
.ed-grid > div, .ed-grid-list .ed-grid-item, .product-trio figure {
  transition: transform var(--dur-4) var(--ease-out),
              background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-4) var(--ease-out) !important;
}
@media (hover: hover) {
  .ed-grid > div:hover,
  .ed-grid-list .ed-grid-item:hover,
  .product-trio figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ed-grid > div, .ed-grid-list .ed-grid-item, .product-trio figure {
    transition: none !important; transform: none !important;
  }
}

/* ── 8. FOCUS VISIBILITY ──────────────────────────────────────────────
   Keyboard focus was inheriting the removed cursor styling and had no
   ring of its own. Mint reads as "you are here", not "error". */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--teal) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}
.f-form:focus-within { border-color: var(--teal) !important; }

.page-hero .bg img,
.story-strip > img,
.product-trio figure img,
.hero-media img,
.cta-band img {
  filter: hue-rotate(16deg) saturate(.86) brightness(1.16) contrast(.96);
}

/* Lift the hero scrim: was a 92% black wall on the left edge, which
   buried the architecture. Warm it and let the frame breathe. */
.page-hero .bg::after {
  background: linear-gradient(
    100deg,
    rgba(13, 13, 13, .86) 0%,
    rgba(13, 13, 13, .58) 46%,
    rgba(13, 13, 13, .12) 100%
  ) !important;
}

/* Section CTAs that used the red-beam plates get the same treatment
   plus a sunrise wash, so the band feels lit rather than alarmed. */
[class*="cta"][style*="background-image"],
.cta-band {
  background-blend-mode: soft-light, normal;
}

/* ─────────────────────────────────────────────────────────────────────
   10. PAPER CARDS

   A page of dark panels on a dark ground is the single strongest
   "console" cue left. Flipping the content cards to warm paper with
   ink text gives the page real figure/ground contrast and reads as
   product literature rather than telemetry. Scoped deliberately to the
   editorial card grids, where the text colours are known and can be
   flipped together — the heroes, nav and footer stay dark so the photo
   scrims keep working.
   ───────────────────────────────────────────────────────────────────── */
.ed-grid > div,
.ed-grid-list .ed-grid-item {
  background: var(--paper) !important;
  border-color: rgba(27, 21, 18, .12) !important;
}
.ed-grid > div:hover,
.ed-grid-list .ed-grid-item:hover {
  background: #FFFBF4 !important;
  border-color: rgba(27, 21, 18, .2) !important;
}
.ed-grid > div h3, .ed-grid-list .ed-grid-item h3,
.ed-grid > div h4, .ed-grid-list .ed-grid-item h4 {
  color: var(--ink) !important;
}
.ed-grid > div p, .ed-grid-list .ed-grid-item p,
.ed-grid > div li, .ed-grid-list .ed-grid-item li {
  color: #4F4B47 !important;
}
.ed-grid > div .num, .ed-grid-list .ed-grid-item .num {
  color: #B8461F !important;
}
.ed-grid > div a, .ed-grid-list .ed-grid-item a {
  color: #B81519 !important;
}
.ed-grid-item.ed-grid-filler {
  background: var(--paper-2) !important;
}
.ed-grid-item.ed-grid-filler h3 { color: #6B5F54 !important; }
.ed-grid-item.ed-grid-filler p  { color: #857769 !important; }

/* ── 11. DENSITY ──────────────────────────────────────────────────────
   Subpage heroes reserved 60vh for an eyebrow, a title and one line of
   copy, leaving a half-screen of dead space above the fold. Let them
   size to their content. */
.page-hero { min-height: 0 !important; padding-bottom: 64px !important; }
@media (min-width: 961px) {
  .page-hero { padding-top: 132px !important; }
}

/* ── 12. SUBPAGE HERO DENSITY ─────────────────────────────────────────
   .px-hero reserved 164px top + 120px bottom of padding around roughly
   330px of content, so every subpage opened with a half-screen of empty
   ground before the reader reached anything. Tightened, and the accent
   colours brought in line with the three-colour system. */
.px-hero {
  /* Published as a variable because the hero illustration has to cancel
     exactly this much to stand on the divider (illustrations.ts). One
     number, one place — a second copy would drift the first time this
     padding is tuned. */
  --hero-pb: 72px;
  padding-top: 132px !important;
  padding-bottom: var(--hero-pb) !important;
}
@media (max-width: 960px) {
  .px-hero { --hero-pb: 56px; padding-top: 104px !important; }
}
/* The eyebrow was amber and the caption tag mint, from the three-colour
   system this sheet originally introduced. The brand is now var(--red) on a
   neutral black, and an amber label above a red headline is the first
   thing that breaks it. Both carry brand red; --red-ink is the readable
   variant of it, which these need at 9-10px over photography. */
.px-hero .px-eyebrow, .px-hero [class*="eyebrow"], .px-hero [class*="kicker"] {
  color: var(--red-ink) !important;
  letter-spacing: .1em !important;
}
.px-rail .px-rail-tag, .px-toc-label { color: var(--teal) !important; }

/* Rule/step counters were vermilion, which made every list item look
   like a flagged alert. Amber reads as an index. */
.px-num, [class*="rule-id"], [class*="step-num"] { color: var(--sun) !important; }

@media (max-width: 1024px) {
  .px-rail { top: 84px !important; }
  .px-toc {
    scroll-padding-left: 18px;
    padding-left: 2px;
  }
  /* overrides.ts pins the active TOC entry to "padding: 14px 0 16px
     !important" for the desktop rail. In the mobile chip row that strips
     the horizontal padding, so the active label collided with its own
     pill border. Give it back, chip-shaped. */
  .px-toc a.on {
    padding: 12px 18px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 760px) {
  .px-rail { top: 76px !important; }
}

/* ── device ── */

/* ═══════════════════════════════════════════════════════════════════
   DEVICE — the site on whatever the reader is actually holding.

   Everything before this sheet was designed at a desk. This layer is the
   pass that asks the other question: what happens on a 280px fold cover
   screen, on a phone where there is no cursor to hover with, on a fold
   opened to 673px, on an iPad that has both a touchscreen and a trackpad?

   Five sections, each one a thing the desk design could not have known:

   1. GEOMETRY — a grid track with a floor wider than the screen. A
      `1fr` column is min-content-floored and `minmax(280px, 1fr)` is
      floored at 280px outright, so on a narrow phone the layout is wider
      than the viewport and the page scrolls sideways.

   2. POINTER — on a touchscreen a :hover state latches after a tap and
      stays latched, so a card the reader taps keeps whatever the hover
      did to it for the rest of the visit.

   3. TARGETS — a 14px link is a fine thing to click and a poor thing to
      hit with a thumb. WCAG 2.2 asks for 24px; a phone deserves more.

   4. VIEWPORT — `100vh` is not the height a phone actually shows, and
      a phone held sideways has almost no height at all.

   5. FOLDABLES — a folding phone crosses two breakpoints as it opens,
      and the open one lands in the gap between the phone layout and the
      tablet layout.

   Loaded last, after microMobility, because several of the rules it
   corrects are themselves !important.
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1 · GEOMETRY ────────────────────────────────────────────────────
   Grid tracks that cannot shrink below the screen.

   `minmax(0, 1fr)` instead of `1fr` stops a long word or a wide child
   from inflating a single-column track past the viewport, and
   `minmax(min(280px, 100%), 1fr)` keeps the auto-fit behaviour on a
   wide screen while letting the column collapse on a narrow one. */
@media (max-width: 720px) {
  .px-step { grid-template-columns: minmax(0, 1fr); }
  .pl-fare, .pl-pick { grid-template-columns: minmax(0, 1fr); }
}
.pl-receipts { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.pl-read { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

/* The receipt is a fixed-width paper stub in spirit; on a fold cover the
   paper has to be narrower than the fold. */
@media (max-width: 380px) {
  .px-receipt, .pl-meter { padding-left: 16px; padding-right: 16px; }
  .pl-receipts { gap: 20px; }
}

/* A long unbroken string — a URL, a product code, a compound heading —
   is the one thing no amount of flexible layout can absorb. Let it break
   rather than let it push the page sideways. */
.px-step-body h3, .px-sec-t, .px-cell-t, .sf-sos-t, .sf-leg-t,
.px-receipt, .pl-meter, code, samp, kbd {
  overflow-wrap: break-word;
}


/* ── 2 · POINTER ─────────────────────────────────────────────────────
   Capability, not width.

   The cursor itself turned out to be fine already: global.ts sets
   `body { cursor: none }`, but overrides.ts and homeInline.ts each undo
   it with an unconditional `cursor: auto !important`, and between them
   they cover every page — measured as auto on all 20 routes, mouse and
   touch alike. polish.ts already gates the cursor dot on
   `(pointer: coarse)`. So there is nothing to add here, and a rule that
   restates a fight already won is just another rule to read later.

   What was NOT handled is the state a finger leaves behind.

   On a touchscreen :hover latches after a tap and does not clear until
   the reader taps something else. Any hover that MOVES an element leaves
   it visibly displaced — a tapped price card stays lifted 6px off the
   page for the rest of the visit. Transforms are reverted; colour and
   border hovers are harmless and stay, because they double as the tap
   feedback a touch device otherwise has none of. */
@media (hover: none) {
  .btn-p:hover, .btn.primary:hover, .btn-getapp:hover,
  .f-form button:hover, .cta-apply:hover, #cf-send:hover,
  .price-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .story-strip:hover img, .home-trio figure:hover img,
  .wa-card:hover img, .ely-fig:hover img {
    transform: none !important;
  }
  a:hover > .arr, button:hover > .arr,
  .zone-cta:hover .arr, .pricing-cta:hover .arr { transform: none !important; }

  /* Give back a press state, which is the feedback a finger can read. */
  .btn-p:active, .btn.primary:active, .btn-getapp:active,
  .c-btn:active, .cta-apply:active, #cf-send:active,
  .price-card:active {
    transform: scale(.985) !important;
    transition: transform var(--dur-1) var(--ease-out) !important;
  }
}


/* ── 3 · TARGETS ─────────────────────────────────────────────────────
   A thumb is about 9mm across; a 14px line of text is about 3.

   Padding is used rather than min-height so the hit area grows without
   the visual rhythm of a nav or a footer column changing. Links sitting
   inside a sentence are left alone on purpose — WCAG exempts them, and
   padding an inline link would tear its own paragraph apart. */
@media (pointer: coarse) {
  .nav-links li a,
  .nav-drawer a,
  .f-col a, .f-bot-links a,
  .px-rail a, .px-def-v a[href],
  .sf-leg {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* .f-social a is deliberately absent: home.ts already pads it 10px/16px
     inside a visible border. Adding vertical padding here overrode that
     shorthand and collapsed the pill to 22px wide — a narrower target
     than the one it replaced. */

  /* Controls that are boxes already just need a floor. */
  button, [role="button"], .btn, .btn-p, .btn-s, .c-btn,
  select, summary {
    min-height: 44px;
  }
  /* A checkbox or radio wrapped in a <label> is not the target — the
     label is, and the label is what gets the floor (below). Sizing the
     box itself would stretch the planner's toggle switch, which is
     drawn 34x18 on purpose, into a pill. */
  input[type="checkbox"]:not(label *), input[type="radio"]:not(label *) {
    min-width: 28px; min-height: 28px;
  }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* A range track is drawn 2px tall, so the whole control is a 2px strip
     a finger cannot land on. Padding grows the input's box — and a tap
     anywhere in that box sets the value — while background-clip keeps
     the visible track the same hairline it was. The thumb itself is
     left at 14px: making it bigger would change how the slider looks to
     solve a problem the padding already solves. */
  input[type="range"] { padding: 19px 0; background-clip: content-box; }

  /* Standalone action links — the ones that are the only thing to press
     in their row, rather than a word inside a sentence. */
  .zx-links a, .pl-tgl, .drawer-share, .sec-more, .cta-note a,
  .px-asset-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The printer's minute field is a 2.6ch box inside a padded shell, so
     the shell looks like the control but only the box takes the tap.
     Moving the padding from shell to input keeps the field exactly as
     it looks and makes all of it hittable. */
  .rp-num { padding-top: 0; padding-bottom: 0; }
  .rp-num input { padding: 13px 0; width: 3.2ch; }

  /* The consent banner is built in JS with inline styles, so its own
     buttons need to be reached with !important. It is also the one fixed
     element pinned to the bottom edge, where a phone's home indicator
     is — hence the safe-area inset. */
  [aria-label="Cookie and storage notice"] { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
  [aria-label="Cookie and storage notice"] a[href],
  [aria-label="Cookie and storage notice"] button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  [aria-label="Cookie and storage notice"] span a[href] {
    min-height: 0 !important;
    display: inline !important;
  }
}

/* At 13px/1.6 in a 248px column the notice runs to ten lines and fills a
   fold cover screen end to end. The text is a legal obligation and stays
   whole; what can give is the leading and the padding around it. */
@media (max-width: 400px) {
  [aria-label="Cookie and storage notice"] {
    left: 10px !important; right: 10px !important;
    padding: 14px 15px !important;
    gap: 10px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
}

/* iOS Safari zooms the whole page when a field with text under 16px
   takes focus, and does not zoom back out. Pinning the fields at 16px
   on touch devices is the only reliable way to stop it. */
@media (pointer: coarse) {
  /* The printer's minute field is already 22px and is excluded — the
     floor exists to stop the zoom, not to flatten type that is over it. */
  input:not(.rp-num input), select, textarea { font-size: 16px !important; }
  .f-form input::placeholder { font-size: 13px; }
}


/* A horizontal scroller inside a vertically scrolling page — the chip
   rail that the in-page nav becomes on a phone — will hand its overscroll
   to the browser, and on iOS the browser reads a horizontal swipe at the
   end of the strip as the back gesture. Containing the overscroll keeps
   a swipe on the rail a swipe on the rail. */
@media (pointer: coarse) {
  .px-toc, .pl-read, [style*="overflow-x"], .px-rail nav {
    overscroll-behavior-x: contain;
  }
}


/* ── 4 · VIEWPORT ────────────────────────────────────────────────────
   `100vh` on a mobile browser is the height of the window with the URL
   bar retracted, so a full-height hero is taller than what the reader
   can see and the bottom of it is always cut off. `100dvh` tracks the
   bar as it moves. */
@supports (height: 100dvh) {
  @media (max-width: 900px) {
    .home-hero, .page-hero, [class*="hero"][style*="100vh"] { min-height: 100dvh; }
  }
}

/* Landscape on a phone leaves ~380px of height. A hero sized to fill it
   leaves no room for anything else, so let content set the height. */
@media (max-height: 460px) and (orientation: landscape) and (pointer: coarse) {
  .home-hero, .page-hero { min-height: 0; }
  .px-hero { padding-top: 96px; padding-bottom: 48px; }
}


/* ── 5 · FOLDABLES ───────────────────────────────────────────────────
   A folding phone crosses two breakpoints as it opens: ~280px closed,
   ~673px open. The open state is the awkward one — wide enough that a
   phone layout looks empty, narrow enough that a tablet layout does not
   fit. Two columns is the shape that works at that width. */
@media (min-width: 620px) and (max-width: 760px) {
  .px-cols, .px-facts, .px-assets, .sf-certs, .px-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-fact { border-bottom: 1px solid var(--bdr); }
  .px-fact:nth-last-child(-n+2) { border-bottom: none; }
  .px-fact:nth-child(odd) { border-right: 1px solid var(--bdr); }
}

/* Some foldables expose the hinge as an environment variable. Where the
   browser reports it, keep text out from under the fold. */
@media (horizontal-viewport-segments: 2) {
  .px-layout, .px-hero { padding-left: 20px; padding-right: 20px; }
}