/* ═══════════════════════════════════════════════════════════════════════════
   OUR SYSTEM — "See the system in motion"
   A slow 3D ring of six landscape cards (the 21st.dev circular-gallery idea,
   rebuilt in plain CSS + js/system.js). Each card holds a simulated screenshot
   designed at 640×400 and scaled to the card, so it stays pin-sharp at any size.
   js/system.js sets --cw (card width, unitless px) and --persp on .sys and moves
   the cards; everything here is the look.
   ═══════════════════════════════════════════════════════════════════════════ */

.sys{--cw:560;--persp:2000px;position:relative}
.sys-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ── the stage: clips the ring, fades its edges, owns the drag ─────────────── */
/* The stage keeps 64px above and below the cards for the halo, and gives that room back
   with negative margins so the cards themselves sit the standard --head-gap under the heading. */
.sys-stage{position:relative;height:calc(var(--cw) * 1px / 1.6 + 128px);margin-top:-60px;overflow:hidden;
  -webkit-user-select:none;user-select:none;touch-action:pan-y;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.sys-stage.is-drag{cursor:grabbing}
/* Away from the screen the browser skips the six cards entirely (they are ~750 elements with
   dozens of blur filters, and every frame anywhere on the page paid to sort them into layers).
   The stage already clips to its own box and has a fixed height, so nothing looks different. */
.sys.is-on .sys-stage{content-visibility:auto}
/* a soft pool of CrashBot blue under the ring */
.sys-stage::before{content:"";position:absolute;left:50%;bottom:6px;width:min(78%,860px);height:120px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(59,155,255,.20),rgba(95,224,255,.06) 55%,transparent 75%);pointer-events:none}
  /* (its 6px blur filter is gone: on a gradient this soft it changed nothing on screen) */
.sys-track{position:absolute;inset:0;perspective:var(--persp);perspective-origin:50% 50%}
.sys-track:focus{outline:none}

/* ── a card ────────────────────────────────────────────────────────────────── */
.sys-card{position:absolute;left:50%;top:50%;
  width:calc(var(--cw) * 1px);height:calc(var(--cw) * 1px / 1.6);
  margin-left:calc(var(--cw) * -.5px);margin-top:calc(var(--cw) * -.3125px);
  border-radius:18px;cursor:pointer;outline:none;will-change:transform,opacity;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-tap-highlight-color:transparent}
.sys-tilt{position:absolute;inset:0;border-radius:inherit;--spot-color:rgba(95,224,255,.16)}
.sys-tilt>.spot-glow{z-index:4}
.sys-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;
  background:#0B111B;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.9),0 14px 30px -16px rgba(0,0,0,.7)}
/* glass edge: a light catch along the top and a hairline all round */
.sys-face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 26%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.04)}
/* depth: side cards sink into shadow. Painted with the card (no layer of its own) and
   stepped by js/system.js, so it costs an occasional repaint, not a layer per frame. */
.sys-shade{position:absolute;inset:0;z-index:6;background:#03060C;opacity:0;pointer-events:none}
/* the electric-blue halo of the front card (opacity driven by js/system.js) */
.sys-glow{position:absolute;inset:-1px;border-radius:19px;opacity:0;pointer-events:none;will-change:opacity;
  box-shadow:0 0 0 1px rgba(95,224,255,.5),0 0 30px -2px rgba(95,224,255,.34),0 18px 46px -18px rgba(59,155,255,.6);
  transition:box-shadow .5s ease}
.sys-card.is-active .sys-glow{box-shadow:0 0 0 1.5px rgba(120,232,255,.85),0 0 40px 0 rgba(95,224,255,.48),0 18px 46px -14px rgba(59,155,255,.78)}
.sys-card:focus-visible .sys-face{outline:2px solid var(--blue-bright);outline-offset:3px}

/* the simulated screenshot, designed at 640×400 and scaled to the card */
.sys-shot{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sys-canvas{position:absolute;left:0;top:0;width:640px;height:400px;transform-origin:0 0;transform:scale(calc(var(--cw) / 640));
  overflow:hidden;text-align:left;line-height:1.3;font-family:var(--body);color:#EAF2FA;font-variant-numeric:tabular-nums;letter-spacing:0}
/* teaser treatment: structure sharp, small data text softened. The blur is in design
   pixels, so it shrinks with the card; the max() keeps at least ~1.15px / 0.8px of blur on
   screen when the card is small (phones). */
.sys-bl{filter:blur(max(2.3px, calc(1.15px * 640 / var(--cw))))}
.sys-bl2{filter:blur(max(1.5px, calc(.8px * 640 / var(--cw))))}

/* the caption */
.sys-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:64px 24px 19px;pointer-events:none;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;
  background:linear-gradient(180deg,rgba(4,7,13,0),rgba(4,7,13,.62) 46%,rgba(4,7,13,.93))}
.sys-n{grid-row:1;font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--blue-bright);opacity:.9;
  padding:4px 6px 3px;border-radius:6px;border:1px solid rgba(95,224,255,.3);background:rgba(95,224,255,.07);position:relative;top:-3px}
.sys-cap h3{grid-row:1;grid-column:2;font-family:var(--display);font-weight:800;font-size:21px;line-height:1.15;letter-spacing:-.025em;color:#fff}
.sys-cap p{grid-row:2;grid-column:2;margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted)}

/* ── under the ring: helper line, Resume, and prev/next for reduced motion ─── */
.sys-help{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:34px;margin-top:-38px}
.sys-hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted-2);letter-spacing:.01em}
.sys-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 10px rgba(95,224,255,.8);opacity:.85}
.sys-resume{display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 14px;border-radius:100px;cursor:pointer;
  font:600 12.5px/1 var(--body);color:var(--blue-bright);background:rgba(95,224,255,.07);border:1px solid rgba(95,224,255,.32);
  transition:background .2s,border-color .2s,opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.sys-resume svg{width:11px;height:11px}
.sys-resume:hover{background:rgba(95,224,255,.14);border-color:rgba(95,224,255,.6)}
.sys-resume[hidden]{display:none}
.sys-resume.in{animation:sysIn .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes sysIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.sys-nav{display:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--gline);background:rgba(255,255,255,.035);color:var(--ink);cursor:pointer;
  align-items:center;justify-content:center;transition:background .2s,border-color .2s,color .2s}
.sys-nav:hover{background:rgba(95,224,255,.12);border-color:rgba(95,224,255,.45);color:var(--blue-bright)}
.sys-nav svg{width:17px;height:17px}
.sys-next svg{transform:scaleX(-1)}
.sys-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* reduced motion: a still ring, front card forward, simple prev / next */
.sys.is-still .sys-nav{display:inline-flex}
.sys.is-still .sys-hint,.sys.is-still .sys-resume{display:none}
.sys.is-still .sys-glow{transition:none}

/* before js/system.js runs (or without it): a plain row of the six cards */
.sys:not(.is-on) .sys-stage{height:auto;margin-top:0;overflow-x:auto;-webkit-mask-image:none;mask-image:none;cursor:auto}
.sys:not(.is-on) .sys-track{position:relative;display:flex;gap:18px;padding:10px 4px 18px;perspective:none}
.sys:not(.is-on) .sys-card{position:relative;left:auto;top:auto;margin:0;flex:0 0 auto;--cw:420}
.sys:not(.is-on) .sys-help{display:none}
.sys:not(.is-on) .sys-stage::before{display:none}

@media(max-width:760px){
  .sys-stage{margin:-31px -24px 0;height:calc(var(--cw) * 1px / 1.6 + 70px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .sys-card,.sys-face{border-radius:14px}
  .sys-glow{border-radius:15px;box-shadow:0 0 0 1px rgba(95,224,255,.5),0 0 18px -2px rgba(95,224,255,.34),0 10px 26px -12px rgba(59,155,255,.6)}
  .sys-card.is-active .sys-glow{box-shadow:0 0 0 1.5px rgba(120,232,255,.85),0 0 22px 0 rgba(95,224,255,.48),0 10px 28px -10px rgba(59,155,255,.75)}
  .sys-cap{padding:44px 14px 12px;column-gap:8px;
    background:linear-gradient(180deg,rgba(4,7,13,0),rgba(4,7,13,.68) 44%,rgba(4,7,13,.94))}
  .sys-n{font-size:8.5px;padding:3px 4px 2px;top:-2px}
  .sys-cap h3{font-size:16px}
  .sys-cap p{font-size:12px;margin-top:3px}
  .sys-help{margin-top:-18px}
  .sys-hint{font-size:12.5px}
  .sys:not(.is-on) .sys-stage{margin:0}
  .sys:not(.is-on) .sys-card{--cw:300}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SCREENSHOTS (all sizes in the 640×400 design space)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · WhatsApp: the live crash flow at #8–#10, and the Breakdown list ─── */
.sc-wa{background:
  radial-gradient(46% 60% at 50% 34%,rgba(59,155,255,.22),transparent 70%),
  radial-gradient(30% 40% at 84% 90%,rgba(255,95,101,.10),transparent 70%),
  linear-gradient(160deg,#0B1526,#070B14 58%,#120A12)}
.sc-wa::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(120,170,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.06) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:radial-gradient(60% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(60% 70% at 50% 40%,#000,transparent)}
.wa-phone{position:absolute;width:204px;height:430px;border-radius:32px;padding:6px;
  background:linear-gradient(155deg,#334050,#0C1017 34%,#0A0D13 70%,#26303C);
  box-shadow:0 34px 60px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.18),0 0 60px -20px rgba(95,224,255,.35)}
.wa-p1{left:102px;top:8px}
.wa-p2{left:354px;top:8px}
.wa-screen{position:relative;height:100%;border-radius:26px;overflow:hidden;background:#0A131D}
.wa-status{position:relative;z-index:2;height:21px;display:flex;align-items:center;justify-content:space-between;padding:2px 16px 0 20px;font:700 8px/1 var(--body);color:#E9F1FA}
.wa-sic{display:flex;gap:3px;align-items:center}
.wa-sic i{display:block;width:9px;height:5px;border-radius:1.5px;background:#E9F1FA;opacity:.9}
.wa-sic i:first-child{width:8px;clip-path:polygon(0 100%,100% 0,100% 100%)}
.wa-sic i:nth-child(2){width:7px;height:6px;border-radius:7px 7px 1px 1px}
.wa-sic i:last-child{width:13px;border-radius:2px;background:linear-gradient(90deg,#E9F1FA 74%,rgba(233,241,250,.3) 74%)}
.wa-head{position:relative;z-index:2;height:34px;display:flex;align-items:center;gap:7px;padding:0 10px 0 6px;
  background:rgba(13,26,38,.97);border-bottom:1px solid rgba(120,170,255,.14)}
.wa-back{width:13px;height:13px;color:#53BDEB}
.wa-av{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#3B9BFF,#5FE0FF);box-shadow:0 0 10px -2px rgba(95,224,255,.6)}
.wa-av svg{width:12px;height:12px}
.wa-id b{display:block;font:800 10px/1.1 var(--body);color:#EEF4FB}
.wa-id small{display:block;font:600 7.5px/1.3 var(--body);color:#5FE0FF}
.wa-chat{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px 8px;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px);background-size:11px 11px}
.wa-day{align-self:center;font:700 6.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#8FA3B8;background:#16242F;padding:4px 7px;border-radius:5px;margin-bottom:1px}
.wa-m{position:relative;max-width:88%;padding:5px 8px 5px;border-radius:9px;font:500 8.6px/1.4 var(--body);color:#E9F1FA}
.wa-m p{margin:0}
.wa-m b{font-weight:800}
.wa-m.in{align-self:flex-start;background:#16242F;border-top-left-radius:2px}
.wa-m.out{align-self:flex-end;background:#144B6D;border-top-right-radius:2px}
.wa-t{float:right;position:relative;top:5px;margin-left:9px;font:500 6.2px/1 var(--body);color:#8FA3B8;white-space:nowrap}
.wa-t i{font-style:normal;color:#53BDEB;letter-spacing:-1px}
.wa-cta{display:flex;align-items:center;justify-content:center;gap:5px;margin:6px -8px -5px;padding:5px 0 6px;
  border-top:1px solid rgba(255,255,255,.08);font:700 8.4px/1 var(--body);color:#53BDEB}
.wa-cta svg{width:10px;height:10px}
.wa-qr{display:flex;gap:4px;width:88%;margin-top:-2px}
.wa-qr span{flex:1;text-align:center;padding:5px 0 6px;border-radius:8px;background:#16242F;font:700 8.4px/1 var(--body);color:#53BDEB}
.wa-m.old{opacity:.6;filter:blur(.7px)}
.wa-m.now{box-shadow:0 0 0 1px rgba(95,224,255,.38),0 0 22px -6px rgba(95,224,255,.6)}
.wa-input{position:absolute;left:6px;right:6px;bottom:10px;height:26px;border-radius:14px;background:#16242F;padding:0 11px;display:flex;align-items:center;font:500 8.4px/1 var(--body);color:#71849A}
/* phone 2: the Breakdown Flow's #3 question and its WhatsApp list sheet, open over the
   dimmed chat (bot/flows/breakdown.js; the "Select ⬇️" button and the "Options" section
   are bot/wa.js). The sheet sits high so the question and most of the eight rows stay
   clear of the caption. */
.wa-p2 .wa-chat{padding-top:7px}
.wa-p2 .wa-m{max-width:94%}
.wa-scrim{position:absolute;left:0;right:0;top:21px;bottom:0;z-index:3;background:rgba(3,7,12,.38)}
.wa-sheet{position:absolute;left:0;right:0;top:111px;bottom:0;z-index:4;border-radius:14px 14px 0 0;background:#101B24;
  box-shadow:0 -12px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.wa-grab{display:block;width:26px;height:3px;border-radius:2px;margin:5px auto 0;background:rgba(233,241,250,.24)}
.wa-sh-top{height:25px;display:flex;align-items:center;gap:8px;padding:0 12px}
.wa-sh-top b{flex:1;font:800 10.4px/1 var(--body);color:#EEF4FB;text-align:center}
.wa-x{font:600 10px/1 var(--body);color:#9FB2C6;width:12px;text-align:center}
.wa-ls-sec{padding:2px 14px 5px;font:700 7.6px/1 var(--body);color:#8FA3B8}
.wa-ls-r{display:flex;align-items:center;gap:8px;height:23px;padding:0 13px 0 14px;border-top:1px solid rgba(255,255,255,.055);
  font:600 9.6px/1 var(--body);color:#E9F1FA}
.wa-ls-r span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden}
.wa-ls-r i{flex:none;width:11px;height:11px;border-radius:50%;border:1.4px solid #6E8296;display:grid;place-items:center;color:#03241A}
.wa-ls-r i svg{width:8px;height:8px}
.wa-ls-r.on{background:linear-gradient(90deg,rgba(59,227,138,.10),rgba(59,227,138,.04))}
.wa-ls-r.on i{border:0;width:12px;height:12px;background:linear-gradient(180deg,#3BE38A,#21C06B);box-shadow:0 0 8px -2px rgba(59,227,138,.8)}
.wa-ls-foot{padding:7px 20px 0;border-top:1px solid rgba(255,255,255,.07)}
.wa-send{display:block;text-align:center;padding:7px 0;border-radius:20px;font:800 9.4px/1 var(--body);color:#03241A;
  background:linear-gradient(180deg,#3BE38A,#21C06B);box-shadow:0 8px 18px -10px rgba(40,220,120,.8),inset 0 1px 0 rgba(255,255,255,.4)}
/* On phones the caption covers the lower half of the card: the screens fade out above it,
   so the caption reads on clean dark and the phones keep everything above it sharp. */
@media(max-width:760px){
  .sc-wa .wa-screen{-webkit-mask-image:linear-gradient(180deg,#000 59%,transparent 72%);mask-image:linear-gradient(180deg,#000 59%,transparent 72%)}
}

/* ── the fleet portal (02–06): tokens and shell from portal/design/*.css ───── */
.pt{--pv:#080D13;--pd:#0C141D;--pp:#111C27;--pp2:#16232F;--pe:#22323F;--pe2:#1A2836;
  --pi:#EAF2FA;--pi2:#CBD9E8;--pi3:#A6B8CB;--pc:#5FE0FF;--pr:#FF6B6B;--pa:#FFB04A;--pg:#6FE3A0;
  background:var(--pd);color:var(--pi);font-size:9px}
.pt svg{display:block;flex:none}
.pt-sp{flex:1 1 auto}
.pt-app{display:grid;grid-template-columns:122px minmax(0,1fr);height:100%}
.pt-side{background:linear-gradient(180deg,#0E1822,#080D13 62%);border-right:1px solid var(--pe2);padding:13px 7px;display:flex;flex-direction:column;gap:1px}
.pt-brand{display:flex;align-items:center;gap:7px;padding:0 5px 10px}
.pt-mark{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(160deg,#7FEAFF,#3FC6E8);box-shadow:0 0 16px -6px rgba(95,224,255,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.pt-mark svg{width:12px;height:12px}
.pt-brand b{display:block;font:800 10.5px/1.1 var(--display);letter-spacing:-.01em}
.pt-brand small{display:block;margin-top:2px;font:600 5.8px/1.2 var(--body);letter-spacing:.03em;color:var(--pi2)}
.pt-nh{padding:9px 7px 5px;font:800 5.8px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--pi);opacity:.72}
.pt-ni{display:flex;align-items:center;gap:7px;padding:5.5px 7px;border-radius:7px;border:1px solid transparent;font:600 8.4px/1 var(--body);color:var(--pi)}
.pt-ni svg{width:10px;height:10px;color:var(--pi2)}
.pt-ni.on{font-weight:800;background:linear-gradient(180deg,rgba(95,224,255,.14),rgba(95,224,255,.06));border-color:rgba(95,224,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.pt-ni.on svg{color:var(--pc)}
.pt-ni.fresh{color:#FF9E9E}
.pt-ni.fresh svg{color:var(--pr)}
.pt-main{display:flex;flex-direction:column;min-width:0;background:var(--pd)}
.pt-top{height:38px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px 0 16px;border-bottom:1px solid var(--pe2)}
.pt-org{font:800 10.5px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.pt-org span{color:var(--pi3);font-weight:500}
.pt-gs{flex:0 1 210px;min-width:0;height:22px;display:flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid var(--pe);
  background:rgba(255,255,255,.03);font:500 7.4px/1 var(--body);color:#fff;white-space:nowrap;overflow:hidden}
.pt-bell{position:relative;margin-left:auto;width:23px;height:23px;border-radius:7px;display:grid;place-items:center;color:#FF8F8F;
  border:1px solid rgba(255,77,77,.4);background:rgba(255,77,77,.09);box-shadow:0 0 12px -4px rgba(255,77,77,.5)}
.pt-bell svg{width:11px;height:11px}
.pt-bell i{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:#FF4D4D;box-shadow:0 0 6px rgba(255,77,77,.9)}
.pt-wrap{padding:11px 16px 0;display:flex;flex-direction:column;gap:8px;min-width:0}
.pt-crumb{font:600 7.2px/1 var(--body);color:var(--pi2)}
.pt-crumb span{opacity:.55;margin:0 3px}
.pt-crumb b{font-weight:600;color:var(--pi)}
.pt-ph{display:flex;align-items:baseline;gap:7px;margin-top:-2px}
.pt-ph b{font:800 17px/1.1 var(--display);letter-spacing:-.03em}
.pt-ph .sl{font:400 16px/1.1 var(--display);color:var(--pi3)}
.pt-ph .nc{font:800 17px/1.1 var(--display);letter-spacing:-.03em;color:var(--pc)}
.pt-bar{display:flex;align-items:center;gap:6px}
.pt-find,.pt-pick{height:21px;display:flex;align-items:center;gap:5px;padding:0 8px;border-radius:6px;border:1px solid var(--pe);background:var(--pp);font:500 7.4px/1 var(--body);color:var(--pi)}
.pt-find{width:122px;color:var(--pi)}
.pt-find svg{width:8px;height:8px;color:var(--pi3)}
.pt-pick svg{width:8px;height:8px;margin-left:10px;color:var(--pi2)}
.pt-go{height:21px;display:flex;align-items:center;padding:0 11px;border-radius:99px;font:800 7.4px/1 var(--body);color:#0B1219;
  background:linear-gradient(160deg,#7FEAFF,#42C9EC);border:1px solid rgba(4,30,42,.72);box-shadow:0 0 16px -8px rgba(95,224,255,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.pt-list{border-radius:9px;border:1px solid var(--pe2);background:var(--pp);overflow:hidden}
.pt-tr{display:grid;grid-template-columns:3px 74px 58px 74px 82px minmax(0,1fr) 20px;align-items:center;column-gap:9px;padding:0 10px 0 4px;height:29px;border-bottom:1px solid var(--pe2)}
.pt-th{height:21px;background:var(--pp2);font:800 5.6px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.pt-th span{white-space:nowrap;overflow:hidden;line-height:1.5}
.pt-tr .u{align-self:stretch;margin:5px 0;border-radius:2px;background:var(--pg)}
.pt-tr.u-crit .u{background:var(--pr)}
.pt-tr.u-warn .u{background:var(--pa)}
.pt-tr .ref{font:500 7.6px/1 var(--mono);color:var(--pi)}
.pt-tr .what{font:500 7.8px/1 var(--body);color:var(--pi);white-space:nowrap}
.pt-plate{display:inline-flex;align-items:center;height:14px;padding:0 5px;border-radius:2px;white-space:nowrap;
  background:linear-gradient(180deg,#F4D62A,#E9C81E);color:#12161B;font:700 7.6px/1 var(--mono);letter-spacing:.06em;
  border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.pt-chip{display:inline-flex;align-items:center;gap:3px;height:13px;padding:0 5px;border-radius:4px;white-space:nowrap;
  font:600 6.8px/1 var(--body);color:#B4EBFF;border:1px solid rgba(95,224,255,.3);background:rgba(95,224,255,.07)}
.pt-chip::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor}
.clock{display:flex;flex-direction:column;gap:3px;min-width:0}
.clock .left{font:800 7.6px/1 var(--body);color:var(--pg)}
.clock .gb{display:flex;gap:1.5px;height:8px;padding:2px;border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 1px 1px 1px -.5px rgba(255,255,255,.5),inset -1px -1px 1px -.5px rgba(255,255,255,.35)}
.clock .gb i{flex:1;border-radius:1.5px;background:rgba(255,255,255,.07)}
.clock .gb i.on{background:var(--pg);box-shadow:0 0 5px -1px rgba(111,227,160,.7)}
.clock.c-high .left{color:var(--pa)}
.clock.c-high .gb i.on{background:var(--pa);box-shadow:0 0 5px -1px rgba(255,176,74,.75)}
.clock.c-urgent .left{color:#FF9E9E}
.clock.c-urgent .gb{border-color:rgba(255,107,107,.4);box-shadow:inset 1px 1px 1px -.5px rgba(255,255,255,.4),0 0 12px -6px rgba(255,107,107,.9)}
.clock .gb i.half{position:relative;overflow:hidden}
.clock .gb i.half::after{content:"";position:absolute;inset:0 50% 0 0;border-radius:1.5px;background:var(--pr);box-shadow:0 0 5px -1px rgba(255,107,107,.9)}
.pt-tr .go{width:19px;height:19px;border-radius:5px;display:grid;place-items:center;color:var(--pi2);border:1px solid var(--pe2);background:rgba(255,255,255,.02)}
.pt-tr .go svg{width:10px;height:10px}
.pt-foot{display:flex;justify-content:space-between;align-items:center;height:20px;padding:0 9px;background:var(--pp2);font:800 7.2px/1 var(--body);color:var(--pi2)}
.pt-foot .n{color:#FF9E9E}

/* buttons, badges and the claim header (portal/design/claim.css) */
.pt-btn{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 9px;border-radius:6px;white-space:nowrap;
  font:600 7.6px/1 var(--body);color:var(--pi);border:1px solid var(--pe);background:var(--pp)}
.pt-btn svg{width:8px;height:8px}
.pt-btn.go{font-weight:800;color:#0B1219;border-radius:99px;border:1px solid rgba(4,30,42,.72);
  background:linear-gradient(160deg,#7FEAFF,#42C9EC);box-shadow:0 0 16px -8px rgba(95,224,255,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.pt-btn.sm{height:17px;padding:0 7px;font-size:7px}
.pt-btn.ok{color:var(--pg);border-color:rgba(111,227,160,.45);background:rgba(111,227,160,.09);font-weight:800}
.pt-btn.amb{color:#FFC97A;border-color:rgba(255,176,74,.45);background:rgba(255,176,74,.08);font-weight:800}
.pt-badge{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 8px;border-radius:6px;white-space:nowrap;
  font:800 7.6px/1 var(--body);color:var(--pg);background:rgba(111,227,160,.09);border:1px solid rgba(111,227,160,.32)}
.pt-badge i{width:4.5px;height:4.5px;border-radius:50%;background:currentColor}
.pt-crop{padding:12px 22px 0}
.pt-chead{display:flex;align-items:center;gap:9px}
.pt-backl{display:inline-flex;align-items:center;gap:4px;font:600 7.4px/1 var(--body);color:var(--pi3)}
.pt-backl svg{width:8px;height:8px}
.pt-refrow{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.pt-refrow b{font:800 15px/1.15 var(--body);letter-spacing:-.02em}
.pt-refrow.r2{margin-top:3px}
.pt-sep{font:400 14px/1 var(--body);color:var(--pi3);opacity:.7}
.pt-plate-big{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:5px;align-self:center;
  font:800 12.5px/1 var(--mono);letter-spacing:.06em;color:#0B1219;background:#F3D64B;border:1px solid rgba(0,0,0,.35)}
.pt-refbig{color:var(--pc)}
.pt-pchip{display:inline-flex;align-items:center;height:17px;padding:0 8px;border-radius:99px;align-self:center;font:800 8.6px/1 var(--body);letter-spacing:.06em}
.pt-pchip.p2{color:#FCD34D;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.45)}
.pt-pchip.p3{color:#FF8F8F;background:rgba(255,77,77,.14);border:1px solid rgba(255,143,143,.45)}
.pt-support{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 8px;border-radius:6px;font:600 7.6px/1 var(--body);color:#FBBF24;border:1px solid rgba(251,191,36,.55)}
.pt-support svg{width:8px;height:8px}
.pt-tabs{display:flex;gap:2px;margin-top:10px;padding:0 2px;border-bottom:1px solid rgba(255,255,255,.10)}
.pt-tabs span{position:relative;bottom:-1px;padding:6px 11px;border:1px solid rgba(255,255,255,.10);border-bottom-color:transparent;border-radius:7px 7px 0 0;
  background:rgba(255,255,255,.028);font:700 7.8px/1.2 var(--body);color:#7B90A6;white-space:nowrap}
.pt-tabs span.on{background:var(--pp);color:var(--pi);box-shadow:0 -2px 0 0 var(--pc) inset}

/* 03 · Breakdowns: the page (portal/breakdownsPage.js) with its map and the map's Send location
   box (portal/mapkit.js), at the portal's own sizes × .55. The map is drawn in SVG in the colours
   of the OS Road tiles the portal shows; the box is open over the page, as it is after Send location. */
.sc-bd{padding:12px 19px 0}
.sc-bd .pt-ph{margin-top:6px}
.bd-grid{display:grid;grid-template-columns:minmax(0,63fr) minmax(0,37fr);gap:9px;margin-top:8px;height:346px}
.bd-map{position:relative;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.11);background:#EEECE6}
.bd-tiles{position:absolute;left:0;top:0;width:100%;height:100%}
.mk-bar{position:absolute;left:7px;right:7px;top:7px;display:flex;align-items:center;gap:4px}
.mk-g{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:5.5px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.16);background:rgba(8,13,19,.88);font:600 6.9px/1 var(--body);color:var(--pi)}
.mk-g svg{width:8px;height:8px}
.mk-send{border-color:rgba(95,224,255,.55);background:rgba(18,52,68,.92);color:#DDF8FF}
.mk-zoom{position:absolute;right:7px;bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:3.3px}
.mk-zoom .mk-g:first-child{height:18.7px;font-size:6.6px;padding:0 6px}
.mk-zb{width:21px;padding:0;justify-content:center;font-size:10.5px;font-weight:500}
.mk-co{font:500 6.9px/1 var(--mono);letter-spacing:.2px}
.bd-col{border-radius:9px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.02);overflow:hidden}
.bd-tabs{display:flex;gap:3.3px;padding:5.5px;border-bottom:1px solid rgba(255,255,255,.07)}
.bd-tabs span{flex:1;display:flex;align-items:center;justify-content:center;gap:4.4px;height:20px;border-radius:5.5px;
  border:1px solid transparent;font:600 7.2px/1 var(--body);color:#8A97AB}
.bd-tabs span.on{border-color:rgba(95,224,255,.45);background:rgba(95,224,255,.1);color:var(--pi)}
.bd-tabs b{font:700 6.3px/1 var(--mono);padding:1.7px 3.9px;border-radius:99px;background:rgba(255,255,255,.08);color:#FF9E9E}
.bd-tabs span+span b{color:#A6EFC6}
/* the breakdown: red until recovery is arranged; the blue ring is the one on the map */
.bd-item{margin:5.5px;padding:8.3px 8.8px 9px;border-radius:6.6px;border:1px solid rgba(255,107,107,.45);background:rgba(255,107,107,.09);
  box-shadow:0 0 0 1.1px rgba(95,224,255,.7)}
.bd-top{display:flex;justify-content:space-between;align-items:center;font:600 6.3px/1.4 var(--body);color:#B3C0D2}
.bd-top .st{color:#FF9E9E}
.bd-name{margin-top:4.4px;font:600 8.3px/1.35 var(--body);color:var(--pi)}
.bd-meta{display:flex;align-items:center;gap:4.4px;margin-top:4.4px}
.bd-tel{display:inline-flex;align-items:center;gap:3px;font:500 7.1px/1 var(--mono);color:var(--pc)}
.bd-tel svg{width:6.5px;height:6.5px}
.bd-prob{margin-top:4.4px;font:400 6.9px/1.55 var(--body);color:#B3C0D2}
.bd-acts{display:flex;gap:4.4px;margin-top:7px}
.bd-b{display:inline-flex;align-items:center;height:17.6px;padding:0 7.7px;border-radius:5px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);font:600 6.9px/1 var(--body);color:var(--pi)}
.bd-b.go{border-color:rgba(95,224,255,.55);background:rgba(95,224,255,.14);color:#DDF8FF}
/* Send this location: the page dimmed behind it, as the portal's box does */
.mk-scrim{position:absolute;inset:0;z-index:1;background:rgba(3,7,12,.42)}
.mk-box{position:absolute;z-index:2;left:128px;top:88px;width:262px;padding:12px;border-radius:9px;
  border:1px solid rgba(255,255,255,.11);background:#0C1522;box-shadow:0 26px 50px -18px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.25)}
.mk-h{display:block;font:600 9.4px/1.35 var(--body);color:var(--pi)}
.mk-where{display:block;margin:3.3px 0 8.8px;font:500 7.2px/1.45 var(--body);color:#8A97AB;white-space:nowrap;overflow:hidden}
.mk-row{display:grid;grid-template-columns:57px minmax(0,1fr) auto;gap:5.5px;align-items:center}
.mk-row + .mk-row{margin-top:5.5px}
.mk-row b{font:600 7.2px/1.2 var(--body);color:var(--pi)}
.mk-in{display:block;height:20px;padding:0 5.5px;border-radius:5px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  font:500 6.9px/18px var(--mono);color:#B3C0D2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-copy{display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:46px;padding:0 7.7px;border-radius:5px;
  border:1px solid rgba(95,224,255,.55);background:rgba(95,224,255,.14);font:600 6.9px/1 var(--body);color:#DDF8FF;white-space:nowrap}
.mk-copy.done{background:rgba(111,227,160,.18);border-color:rgba(111,227,160,.6);color:#A6EFC6}
.mk-foot{display:flex;justify-content:flex-end;margin-top:9.9px}

/* 05 · Send to your insurer */
.pt-share{margin-top:8px;border:1px solid rgba(95,224,255,.26);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--pp)}
.pt-sh-h{display:flex;align-items:baseline;gap:10px;padding:8px 13px;border-bottom:1px solid var(--pe2)}
.pt-sh-h b{font:800 9.4px/1 var(--body)}
.pt-sh-h .q{margin-left:auto;font:500 7.2px/1 var(--body);color:#FF8F8F}
.pt-sh-b{padding:8px 13px 10px}
.pt-sh-warn{padding:5px 9px;border-radius:7px;border:1px solid rgba(255,176,74,.3);background:rgba(255,176,74,.07);font:500 7.2px/1.3 var(--body);color:#FFC97A;white-space:nowrap;overflow:hidden}
.pt-k{margin:7px 0 4px;font:800 6.4px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#8FA0B4}
.pt-subj{padding:6px 9px;border-radius:7px;border:1px solid var(--pe);background:rgba(4,8,13,.5);font:700 9px/1.3 var(--mono);color:var(--pi);letter-spacing:.01em;margin-bottom:5px}
.pt-draft{display:flex;flex-direction:column;gap:4px;padding:7px 9px;border-radius:8px;border:1px solid var(--pe);background:rgba(0,0,0,.28);
  font:500 7.4px/1.35 var(--mono);color:var(--pi);height:47px;overflow:hidden}
.pt-draft span{white-space:nowrap}
.pt-sh-row{display:flex;align-items:center;gap:7px;margin-top:7px}
.pt-sent{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;border-radius:7px;font:800 7.6px/1 var(--body);color:var(--pi2);
  border:1px solid var(--pe);background:rgba(255,255,255,.03)}
.pt-sent i{width:9px;height:9px;border-radius:3px;border:1.2px solid rgba(255,255,255,.3);background:rgba(4,8,13,.35)}

/* 04 · Report / Media */
.pt-ev{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:9px;margin-top:8px}
.pt-sec{border-radius:10px;padding:10px 11px;border:1px solid var(--pe2);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--pp)}
.pt-sec.done{border-color:rgba(111,227,160,.32);background:linear-gradient(180deg,rgba(111,227,160,.07),rgba(111,227,160,.015)),var(--pp)}
.pt-sec-h{display:flex;align-items:center;gap:6px}
.pt-sec-h svg{width:10px;height:10px;color:var(--pi3)}
.pt-sec.done .pt-sec-h svg{color:var(--pg)}
.pt-sec-h b{font:800 9px/1 var(--body);white-space:nowrap}
.pt-ev-code{font:700 6.6px/1 var(--body);color:#6EE7B7;white-space:nowrap}
.pt-ev-code b{font:700 7.6px/1 var(--mono);color:#A7F3D0;letter-spacing:.14em;margin-left:2px;display:inline-block}
.pt-sec .st{display:block;font:800 11.5px/1 var(--display);letter-spacing:-.02em;margin-top:8px}
.pt-sec.done .st{color:var(--pg)}
.pt-sec .meta{display:block;margin-top:5px;font:500 7.2px/1.4 var(--body);color:var(--pi2)}
.pt-rep-in{display:flex;gap:11px;margin-top:9px}
.pt-rep-txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding-top:2px}
.pt-rep-txt .st{margin-top:0}
.pt-rep-txt .meta{margin:0 0 4px}
/* four media examples, two by two, filling the box down to its buttons (Kaiya, 2 Oct 2026: "reduce
   the media examples to 4 so we can have them larger in the box"); roadside photos once blurred */
.pt-med{display:flex;flex-direction:column}
.pt-thumbs{flex:1 1 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(54px,1fr));gap:5px;margin:9px 0 9px}
.pt-thumbs i{display:block;border-radius:5px;filter:blur(1.5px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* Kaiya's own car photos (3 Oct 2026), softened in the files themselves — no CSS blur inside the
   moving cards (a filter there is repainted whenever Safari redraws the card) */
.pt-thumbs img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* the PDF itself (reports/_kit.js masthead) */
.pdf{position:relative;flex:none;width:126px;height:178px;border-radius:3px;overflow:hidden;background:#fff;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.4);transform:rotate(-1.2deg);transform-origin:50% 0}
.pdf-mh{position:relative;display:flex;flex-direction:column;align-items:center;padding:17px 6px 8px;background:#14222E}
.pdf-own{font:800 5.6px/1 var(--body);letter-spacing:.18em;color:#fff}
.pdf-kick{margin:4px 0 5px;font:600 3.6px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:#94A0A9}
.pdf-plate{display:inline-block;padding:2.5px 10px;border-radius:3px;background:#FFC72C;border:1.6px solid #000;font:800 12.5px/1 var(--body);letter-spacing:.14em;color:#0B0B0B}
.pdf-meta{display:flex;align-items:center;gap:4px;margin-top:5px;font:600 4.2px/1 var(--body);color:#C3CCD2}
.pdf-badge{padding:2px 5px;border-radius:2px;background:#8A5500;color:#FFD98A;font:800 3.8px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.pdf-ctr{position:absolute;top:5px;padding:1.5px 3.5px;border-radius:6px;font:700 3.4px/1 var(--body)}
.pdf-ctr.l{left:5px;color:#F0B9B9;background:rgba(202,98,98,.18);border:.5px solid rgba(216,130,130,.44)}
.pdf-ctr.r{right:5px;color:#A7E6BD;background:rgba(60,180,110,.18);border:.5px solid rgba(90,200,130,.4)}
.pdf-card{display:flex;flex-direction:column;margin:6px 6px 0;border:.5px solid #E4E0D8;border-radius:2px;overflow:hidden}
.pdf-hd{padding:3px 5px;border-left:2px solid #1A5FA0;background:#E9F1F9;font:800 3.8px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#0F4577}
.pdf-card.tp .pdf-hd{border-left-color:#B23A3A;background:#FAECEB;color:#7E2424}
.pdf-row{display:flex;gap:6px;padding:3px 5px;border-top:.5px solid #F0EDE7}
.pdf-row i{display:block;height:3px;border-radius:2px;background:#AEB5BC;filter:blur(.5px)}
.pdf-row i:first-child{width:34%;background:#C9CED3}
.pdf-row i:last-child{width:46%;background:#59636D}

/* 06 · the vehicle page (portal/design/vehicle-detail.css) */
.pt-vhead{display:flex;align-items:center;gap:9px;margin-top:-1px}
.pt-plate-l{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:5px;
  background:linear-gradient(180deg,#F4D62A,#EBC900);color:#12161B;font:800 14.5px/1 var(--mono);letter-spacing:.1em;
  border:1px solid rgba(0,0,0,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 6px 16px -8px rgba(235,201,0,.6)}
.pt-vmeta{font:600 8.6px/1 var(--body);color:var(--pi)}
.pt-card{border-radius:9px;border:1px solid var(--pe2);background:var(--pp);overflow:hidden}
.pt-card-h{display:flex;align-items:center;justify-content:space-between;height:21px;padding:0 10px;background:var(--pp2);border-bottom:1px solid var(--pe2)}
.pt-card-h b{font:800 8px/1 var(--body)}
.pt-card-h svg{width:8px;height:8px;color:var(--pi3);transform:rotate(180deg)}
.pt-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px}
.pt-tile{display:flex;flex-direction:column;gap:3px;padding:6px 7px;border-radius:6px;background:rgba(255,255,255,.03);border:1px solid var(--pe2);min-width:0}
.pt-tile .k{font:800 5.6px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--pi2)}
.pt-tile .v{font:800 10px/1.1 var(--body);color:var(--pi);white-space:nowrap}
.pt-tile .v.ok{color:var(--pg)}
.pt-tile small{font:500 6.4px/1 var(--body);color:var(--pi2);white-space:nowrap}
.pt-pr{display:flex;align-items:center;gap:8px;height:23px;padding:0 9px;border-top:1px solid var(--pe2)}
.pt-card-h + .pt-pr{border-top:0}
.pt-pr .nm{font:500 7.6px/1 var(--mono);width:66px;white-space:nowrap}
.pt-pr .wh{font:500 7.2px/1 var(--body);color:var(--pi2);white-space:nowrap}
.pt-sev{display:inline-flex;align-items:center;gap:3px;height:13px;padding:0 5px;border-radius:4px;font:600 6.8px/1 var(--body);width:max-content}
.pt-sev i{width:3px;height:3px;border-radius:50%;background:currentColor}
.pt-sev.major{color:#FF9E9E;border:1px solid rgba(255,107,107,.36);background:rgba(255,107,107,.08)}
.pt-sev.mod{color:#FFC97A;border:1px solid rgba(255,176,74,.36);background:rgba(255,176,74,.08)}
.pt-sev.minor{color:#A6EFC6;border:1px solid rgba(111,227,160,.32);background:rgba(111,227,160,.07)}
.pt-pill{display:inline-flex;align-items:center;height:13px;padding:0 5px;border-radius:4px;font:600 6.8px/1 var(--body);white-space:nowrap}
.pt-pill.open{color:#B4EBFF;border:1px solid rgba(95,224,255,.34);background:rgba(95,224,255,.07)}
.pt-pill.done{color:var(--pg);border:1px solid rgba(111,227,160,.34);background:rgba(111,227,160,.07)}
.pt-row{display:flex;gap:5px;align-items:center}
.pt-btn em{font-style:normal;font-size:6px;padding:1.5px 3px;border-radius:3px;background:rgba(255,255,255,.12);color:var(--pi)}
.pt-tickc{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px 0 7px;border-radius:6px;font:800 7.6px/1 var(--body);color:var(--pg);
  border:1px solid rgba(111,227,160,.45);background:rgba(111,227,160,.09)}
.pt-tickc i{width:10px;height:10px;border-radius:3px;display:grid;place-items:center;background:#4FD08C;color:#08131A}
.pt-tickc svg{width:7px;height:7px}
.pt-med .meta{margin-top:4px}
.pt-pr .nm.txt{font-family:var(--body);width:auto}
/* thumbnails that read as roadside photos once blurred: tarmac, a plate, a brake light */
.pt-thumbs i:nth-child(1){background:   /* the back of the car: rear window, two brake lights, the plate */
  radial-gradient(10% 6% at 50% 69%,#FFD23A 75%,transparent 80%),
  radial-gradient(7% 6% at 27% 58%,#FF4D4D,transparent),radial-gradient(7% 6% at 73% 58%,#FF4D4D,transparent),
  radial-gradient(25% 11% at 50% 40%,#1B232C 85%,transparent 92%),
  radial-gradient(35% 28% at 50% 59%,#5E6A77 88%,transparent 93%),
  linear-gradient(180deg,#8E9BA8,#5B6773 44%,#2F3741 45%,#1F252C)}
.pt-thumbs i:nth-child(2){background:   /* the flat tyre, close up */
  radial-gradient(circle at 45% 62%,#0D1013 0 21%,#59616A 22% 25%,#16191D 26% 37%,transparent 38%),
  linear-gradient(160deg,#76828E,#3E4750 55%,#2B2622)}
.pt-thumbs i:nth-child(3){background:   /* a dented door panel */
  radial-gradient(22% 30% at 58% 48%,#2E353C,transparent 70%),
  linear-gradient(112deg,#A9B4BE,#6F7B86 34%,#C9D1D8 47%,#5A646E 60%,#2C333A)}
.pt-thumbs i:nth-child(4){background:   /* the road behind, hazards on */
  radial-gradient(7% 9% at 24% 60%,#FFB04A,transparent),radial-gradient(7% 9% at 62% 61%,#FFB04A,transparent),
  linear-gradient(180deg,#7D90A4,#566676 40%,#3B444D 41%,#262C33)}

/* ── touch screens (Kaiya, 3 Oct 2026: the ring "extremely laggy" on an iPhone 17) ──
   Safari renders a mask over moving 3D layers again on every frame, so on phones and tablets
   the stage has no edge fade (the screen edge clips the side cards anyway). The ring there also
   moves a card at a time and rests in between (js/system.js, STEPPED). */
@media (hover:none) and (pointer:coarse){
  .sys-stage{-webkit-mask-image:none;mask-image:none}
}