/* About Crashbot + Why Crashbot (sections 2-3). */

/* ═══════════ Section 2 — About Crashbot: a vertical deck of four cards ═══════════
   Each card is tucked a little under the one above (--ov). The hovered card lifts
   forward over its neighbours (.ab-slot.up), tilts with CBTilt and glows CrashBot blue.
   The card's own transform belongs to CBTilt, so every hover visual that should fade
   (the blue ring, the glass sheen) lives on a pseudo-element with its own transition. */
.ab-deck{--ov:16px;max-width:760px;margin:0 auto;position:relative}
.ab-slot{position:relative}
.ab-slot:nth-child(1){z-index:4}
.ab-slot:nth-child(2){z-index:3}
.ab-slot:nth-child(3){z-index:2}
.ab-slot:nth-child(4){z-index:1}
.ab-slot + .ab-slot{margin-top:calc(var(--ov) * -1)}
/* Our Goal (Kaiya, 1 Oct 2026): the four cards sit in order with a gap, no overlap */
.ab-list{display:flex;flex-direction:column;gap:14px}
.ab-list .ab-slot + .ab-slot{margin-top:0}
.ab-list .ab-slot + .ab-slot .ab-card{padding-top:0}
.ab-slot.settling{z-index:9}
.ab-slot:has(.ab-head:focus-visible){z-index:8}
.ab-slot.up{z-index:10}

.ab-card{--spot-color:rgba(95,224,255,.2);position:relative;border-radius:22px;cursor:pointer;
  background:linear-gradient(152deg,#1f2a44 0%,#161e33 48%,#121829 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.9),0 8px 18px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ab-slot + .ab-slot .ab-card{padding-top:var(--ov)}
/* glass sheen */
.ab-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.09),transparent 42%)}
/* CrashBot-blue hover ring + glow */
.ab-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  border:1px solid rgba(95,224,255,.42);
  transition:opacity .35s ease}
.ab-card:hover::before,.ab-card:has(.ab-head:focus-visible)::before{opacity:1}
.ab-card.open::before{opacity:.55}
.ab-card:hover.open::before{opacity:1}
.ab-card>:not(.spot-glow){position:relative;z-index:1}

.ab-head{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:18px;width:100%;padding:22px 24px;cursor:pointer;border-radius:20px;color:inherit;font:inherit;text-align:left}
.ab-head:focus-visible{outline:2px solid var(--cb-blue);outline-offset:-4px;border-radius:20px}
.ab-ic{flex:none;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:var(--cb-blue);
  background:linear-gradient(150deg,rgba(95,224,255,.2),rgba(59,155,255,.05));border:1px solid rgba(95,224,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 24px -6px rgba(95,224,255,.6);transition:box-shadow .35s ease}
.ab-ic svg{width:24px;height:24px;filter:drop-shadow(0 0 7px rgba(95,224,255,.65))}
.ab-ic.red{color:var(--cb-red);background:linear-gradient(150deg,rgba(255,80,90,.22),rgba(255,60,60,.06));border-color:rgba(255,95,101,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px -5px rgba(255,70,80,.65)}
.ab-ic.red svg{filter:drop-shadow(0 0 7px rgba(255,80,90,.7))}
.ab-title{flex:1;min-width:0;font-family:var(--display);font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.ab-chev{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--gline);background:rgba(255,255,255,.04);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),color .25s ease,border-color .25s ease,background .25s ease}
.ab-chev svg{width:18px;height:18px}
.ab-card:hover .ab-chev,.ab-card.open .ab-chev{color:var(--cb-blue);border-color:rgba(95,224,255,.45);background:rgba(95,224,255,.1)}
.ab-card.open .ab-chev{transform:rotate(180deg)}

/* body: grid-rows 0fr → 1fr opens to the text's real height; hidden from AT when closed */
.ab-body{display:grid;grid-template-rows:0fr;visibility:hidden;cursor:auto;
  transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s}
.ab-card.open .ab-body{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),visibility 0s}
.ab-body-in{overflow:hidden;min-height:0}
.ab-body p{margin:0 28px 0 92px;padding:16px 0 26px;border-top:1px solid rgba(95,224,255,.16);color:var(--muted);font-size:16.5px;line-height:1.7;
  opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.ab-card.open .ab-body p{opacity:1;transform:none;transition-delay:.1s}

@media(max-width:560px){
  .ab-deck{--ov:12px}
  .ab-list{gap:12px}
  .ab-card{border-radius:19px}
  .ab-head,.ab-head:focus-visible{gap:14px;padding:17px 16px;border-radius:17px}
  .ab-ic{width:42px;height:42px;border-radius:13px}
  .ab-ic svg{width:21px;height:21px}
  .ab-title{font-size:18px}
  .ab-chev{width:34px;height:34px}
  .ab-chev svg{width:16px;height:16px}
  .ab-body p{margin:0 18px;padding:14px 0 22px;font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
  .ab-body,.ab-card.open .ab-body{transition:none}
  .ab-body p{transition:none}
  .ab-chev{transition:color .25s ease,border-color .25s ease,background .25s ease}
}

/* ═══════════ Section 3 — Why Crashbot: the three-box pipeline ═══════════
   The lit line runs in two segments, box 1 → box 2 and box 2 → box 3, each clipped at the
   orbs' edges, so the moving line can never show past box 3. js/about-why.js measures the
   orbs and drives the pulse (a compositor-run Web Animation) and the box lighting from one timeline. */
.pipe{position:relative;max-width:860px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start}
.pipe .node{position:relative;z-index:2;width:32%;text-align:center;cursor:default}
.pipe .node .orb{width:86px;height:86px;border-radius:24px;display:grid;place-items:center;margin:0 auto 18px;color:var(--blue-bright);
  transition:transform .2s ease,box-shadow .4s ease,border-color .4s ease,background .4s ease}
/* the orbs sit on the plain page gradient, where .glass's 22px backdrop blur shows nothing: keep
   only its saturate (same pixels, no blur pass every frame the pipeline is on screen) */
.pipe .node .orb.glass{-webkit-backdrop-filter:saturate(170%);backdrop-filter:saturate(170%)}
.pipe .node .orb svg{width:34px;height:34px;position:relative;z-index:1;filter:drop-shadow(0 0 8px rgba(95,224,255,.6));transition:filter .4s ease}
.pipe .node .orb.lit{border-color:rgba(95,224,255,.62);background:linear-gradient(150deg,rgba(95,224,255,.2),rgba(59,155,255,.07));
  box-shadow:0 0 36px -2px rgba(95,224,255,.62),0 0 0 1px rgba(95,224,255,.16),inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 22px -8px rgba(95,224,255,.5)}
.pipe .node .orb.lit svg{filter:drop-shadow(0 0 10px rgba(95,224,255,.95)) drop-shadow(0 0 2px rgba(200,245,255,.8))}
.pipe .node:hover .orb{transform:translateY(-2px)}
.pipe .node:hover .orb:not(.lit){border-color:rgba(95,200,255,.55);background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
.pipe .node h3{font-size:17px;font-family:var(--body);font-weight:700;letter-spacing:-.01em;line-height:1.3;transition:color .4s ease}
.pipe .node p{color:var(--muted);font-size:14px;line-height:1.55;margin:6px auto 0;max-width:32ch;text-wrap:balance}
.pipe .nw{white-space:nowrap}

/* a segment is a 24px-tall clipping box with the 2px line in its middle, so the pulse's
   glow is not cut off while its ends are cut exactly at the orbs. CSS places them for the
   desktop row (node centres at 16%, 50%, 84%); the JS re-measures and also handles phones. */
.pipe-seg{position:absolute;z-index:1;top:31px;height:24px;width:calc(34% - 86px);overflow:hidden;pointer-events:none}
.pipe-seg:nth-child(1){left:calc(16% + 43px)}
.pipe-seg:nth-child(2){left:calc(50% + 43px)}
.pipe-seg::before,.pipe-fill{content:"";position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px}
.pipe-seg::before{background:rgba(120,180,255,.2)}
.pipe-fill{background:linear-gradient(90deg,var(--blue),var(--blue-bright));box-shadow:0 0 12px rgba(95,224,255,.6);opacity:.55;
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pipe-seg:nth-child(2) .pipe-fill{transition-delay:.45s}
.pipe.in .pipe-fill{transform:scaleX(1)}
.pipe-pulse{position:absolute;left:0;top:10px;width:84px;height:4px;border-radius:4px;opacity:0;will-change:transform;
  background:linear-gradient(90deg,rgba(95,224,255,0),rgba(95,224,255,.55) 45%,rgba(140,236,255,.95) 82%,#effdff 95%,rgba(255,255,255,0));
  filter:drop-shadow(0 0 5px rgba(95,224,255,.95)) drop-shadow(0 0 12px rgba(95,224,255,.6))}
.pipe.run .pipe-pulse{opacity:1}

/* phones: the boxes stack, each orb on the left with its words beside it, and the same
   sequence runs down a vertical line between the orbs */
@media(max-width:640px){
  .pipe{flex-direction:column;align-items:stretch;gap:34px;max-width:420px}
  .pipe .node{width:100%;display:flex;align-items:center;gap:18px;text-align:left}
  .pipe .node .orb{flex:none;width:70px;height:70px;border-radius:20px;margin:0}
  .pipe .node .orb svg{width:28px;height:28px}
  .pipe .node h3{font-size:16.5px}
  .pipe .node p{margin:4px 0 0;max-width:none}
  .pipe-seg{top:0;left:23px;width:24px;height:0}
  .pipe-seg:nth-child(1),.pipe-seg:nth-child(2){left:23px}
  .pipe-seg::before,.pipe-fill{left:11px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .pipe-fill{transform:scaleY(0);transform-origin:top}
  .pipe.in .pipe-fill{transform:scaleY(1)}
  .pipe-pulse{left:10px;top:0;width:4px;height:34px;
    background:linear-gradient(180deg,rgba(95,224,255,0),rgba(95,224,255,.55) 45%,rgba(140,236,255,.95) 82%,#effdff 95%,rgba(255,255,255,0))}
}
@media(prefers-reduced-motion:reduce){
  .pipe-fill{transition:none}
  .pipe-pulse{display:none}
}

/* ═══════════ Section 3 — the Insurer Ready Report (A4 hero visual) ═══════════
   A three-page A4 report lying on the dark surface: the page you read sits on top and the
   other two peek out from under it. A click, tap, Enter or Space turns the top sheet up over
   its left edge; it fades as it lifts away and then settles, unseen, at the bottom of the
   pile (js/about-why.js, section 3), so the order runs cover → policyholder & investigation
   → third party 1 → cover.
   Everything inside is sized in cqw (1% of the stage's width), so the pile scales as one
   picture down to phones. The masthead, plates, section bars, DVLA strip and photo
   captions follow the CrashBot PDF report (reports/_kit.js: navy #14222E masthead,
   #FFC72C plate with a black border, blue policyholder / red third party / grey bars).
   3D: the stage gives the perspective, the doc carries the resting tilt (--rest, which
   CBTilt keeps as its base) and the pile has its own perspective for the page turn.
   Since 2 Oct 2026 it sits beside the two portal screens (section 4), smaller: its width is
   set by .rq-row .rep-stage at the end of this file. */
.rep-stage{position:relative;max-width:480px;margin:0 auto;container-type:inline-size;padding:1% 0 0;perspective:1600px;perspective-origin:50% 28%}
.rep-surface{position:absolute;left:-42%;right:-42%;top:-8%;bottom:-16%;pointer-events:none;z-index:0;
  background:radial-gradient(46% 47% at 50% 50%,rgba(170,195,230,.14) 0,rgba(150,182,228,.11) 66%,rgba(120,160,220,.045) 86%,transparent)}
@media(max-width:700px){.rep-surface{left:-4%;right:-4%;top:-6%;bottom:-14%;background:radial-gradient(48% 48% at 50% 50%,rgba(170,195,230,.13),rgba(150,182,228,.09) 72%,transparent)}}

.rep-doc{--rest:rotateX(5deg) rotateY(-1.5deg) rotate(-1.8deg);position:relative;z-index:1;aspect-ratio:210/297;border-radius:3px;
  transform:var(--rest);transform-origin:50% 58%;cursor:pointer;outline:none;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rep-doc:focus-visible{outline:2px solid var(--cb-blue);outline-offset:14px;border-radius:8px}
/* the turn's perspective, in the pile's own size: about three and a half page widths away */
.rep-pile{position:absolute;inset:0;perspective:360cqw;perspective-origin:30% 45%}

/* the desk: a contact shadow, a long soft one, and the edge of the pile's last sheet */
.rep-under{position:absolute;inset:0;border-radius:3px;background:linear-gradient(162deg,#e9e6df,#d9d5cb);
  transform:translate(1.4cqw,2.2cqw) rotate(-1.1deg);
  box-shadow:0 .2cqw .3cqw rgba(0,0,0,.42),.3cqw 1cqw 2cqw -.3cqw rgba(0,0,0,.55),1cqw 3.5cqw 7cqw -1.5cqw rgba(0,0,0,.6),2cqw 8cqw 16cqw -4cqw rgba(0,0,0,.6)}

/* one sheet of paper; data-depth 0 is on top. Its edge is a hair of shadow, so three
   sheets read as a pile with thickness. Every click moves all three, so each keeps its
   own layer (will-change) instead of being re-rastered at the start of every turn.
   Nothing inside a sheet may use a 3D transform: Chrome then rasters the whole sheet
   at a lower scale and the page goes soft. */
.rep-sheet{position:absolute;inset:0;border-radius:3px;z-index:1;will-change:transform;
  box-shadow:0 0 0 .5px rgba(28,36,46,.16),.15cqw .3cqw .45cqw -.05cqw rgba(0,0,0,.3);
  transition:transform .8s cubic-bezier(.22,.75,.25,1)}
.rep-sheet[data-depth="0"]{z-index:3}
.rep-sheet[data-depth="1"]{z-index:2;transform:translate(.55cqw,.9cqw) rotate(-.45deg)}
.rep-sheet[data-depth="2"]{z-index:1;transform:translate(1.1cqw,1.85cqw) rotate(-.9deg)}

.rep-page{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;overflow:hidden;border-radius:inherit;color:#10202c;font-family:var(--body);
  background:linear-gradient(162deg,#ffffff 0%,#fbfbf9 46%,#f1f0ec 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);transition:clip-path .4s cubic-bezier(.2,.7,.2,1)}
/* Away from the screen the browser skips each page's contents (dozens of blurred lines and the
   photo tiles); a page already clips to its own box and takes its size from the pile, so
   nothing looks different, but every frame elsewhere on the page has far less to sort. */
.rep-page{content-visibility:auto}
/* paper grain + a soft light falloff toward the lower edge */
.rep-page::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.5;mix-blend-mode:multiply;
  background:linear-gradient(180deg,transparent 55%,rgba(20,34,46,.05)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .48  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
/* the sheets underneath sit in the top one's shade, and brighten as they come up */
.rep-page::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:#0e1822;opacity:0;transition:opacity .8s cubic-bezier(.3,.5,.3,1)}
.rep-sheet[data-depth="1"] .rep-page::before{opacity:.1}
.rep-sheet[data-depth="2"] .rep-page::before{opacity:.16}

/* ── the turn (Kaiya, 2 Oct 2026: the page "snaps off into a straight then goes instantly") ──
   The top sheet lifts at its free edge and swings up over its left edge toward you, with
   perspective, turning slightly as it rises; it leaves the light as it goes (darkening) and
   fades out well before it could ever be seen edge-on, so it never thins to a line. The
   motion itself is a Web Animation the compositor plays, built by js/about-why.js from one
   smooth curve (slow lift, swing, long settle). Its shadow sweeps across the page it
   uncovers, and that page brightens as it rises into place. The turned sheet then settles at
   the bottom of the pile: it fades in already underneath, sliding the last few millimetres
   into line, so only the pile's edges change. .turn and .tuck switch the CSS transition off
   so the class change never fights the animation. */
.rep-sheet.turn{z-index:6;transition:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* ⚠️ near the screen the pages keep their contents painted (js/about-why.js sets .rep-near once
   the report comes within 300px of the screen, and takes it off when it leaves). With
   content-visibility:auto Chrome judges a sheet tilted in 3D to be off screen and skips everything
   on it, so the page went blank white the moment it lifted: that blank sheet thinning at the
   spine was the "straight" Kaiya saw. Switching it per turn cost a relayout of the page each time. */
.rep-stage.rep-near .rep-page{content-visibility:visible}
.rep-sheet.tuck{transition:none}
.rep-sheet.turn .rep-page::before{transition:none;background:linear-gradient(90deg,rgba(12,20,30,.66),rgba(12,20,30,.9));animation:repShade .82s linear both}
@keyframes repShade{0%{opacity:0}22%{opacity:.16}52%{opacity:.8}70%{opacity:.95}100%{opacity:1}}
/* a soft band of light runs across the lifting sheet, so it reads as paper bending, not a board */
.rep-gloss{position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;overflow:hidden;opacity:0}
.rep-gloss::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0))}
.rep-sheet.turn .rep-gloss{animation:repGlossOn .82s ease-out both}
.rep-sheet.turn .rep-gloss::before{animation:repGloss .82s cubic-bezier(.35,.1,.3,1) both}
@keyframes repGlossOn{0%{opacity:0}18%{opacity:.85}55%{opacity:.45}100%{opacity:0}}
@keyframes repGloss{from{transform:translateX(250%)}to{transform:translateX(30%)}}
/* the turning sheet's shadow on the page it uncovers: dark at the spine, thinning as it lifts */
.rep-sheet::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;opacity:0;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(8,16,24,.38),rgba(8,16,24,.18) 40%,rgba(8,16,24,0) 85%)}
.rep-sheet.rise::after{animation:repCast .82s cubic-bezier(.3,.2,.3,1) both}
@keyframes repCast{0%{opacity:0;transform:scaleX(1)}22%{opacity:.95;transform:scaleX(.92)}60%{opacity:.45;transform:scaleX(.5)}100%{opacity:0;transform:scaleX(.18)}}

/* pointing at the report lifts the top sheet's corner, so it reads as something to turn */
.rep-curl{position:absolute;right:0;bottom:0;z-index:8;width:0;height:0;pointer-events:none;border-bottom-right-radius:3px;
  background:linear-gradient(135deg,#e2ded4 0%,#f3f0ea 30%,#fefdfb 49.4%,transparent 50%);
  filter:drop-shadow(-.3cqw -.3cqw .5cqw rgba(0,0,0,.22));
  transition:width .4s cubic-bezier(.2,.7,.2,1),height .4s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){
  .rep-doc:hover .rep-sheet[data-depth="0"]:not(.turn) .rep-page{clip-path:polygon(0 0,100% 0,100% calc(100% - 5cqw),calc(100% - 5cqw) 100%,0 100%)}
  .rep-doc:hover .rep-sheet[data-depth="0"]:not(.turn) .rep-curl{width:5cqw;height:5cqw}
}
.rep-doc:focus-visible .rep-sheet[data-depth="0"]:not(.turn) .rep-page{clip-path:polygon(0 0,100% 0,100% calc(100% - 5cqw),calc(100% - 5cqw) 100%,0 100%)}
.rep-doc:focus-visible .rep-sheet[data-depth="0"]:not(.turn) .rep-curl{width:5cqw;height:5cqw}

/* ── the page furniture ── */
.rep-mast{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:2.7cqw 6cqw;background:#14222E;color:#fff}
.rep-brand{display:flex;align-items:center;gap:1.7cqw;font-family:var(--display);font-weight:800;font-size:3.1cqw;letter-spacing:-.01em}
.rep-logo{width:4.8cqw;height:4.8cqw;border-radius:1.3cqw;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-bright))}
.rep-logo svg{width:60%;height:60%}
.rep-mast-r{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;text-align:right}
.rep-mast-r b{font-size:2.3cqw;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.rep-mast-r small{font-size:1.6cqw;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#94a0a9;margin-top:.4cqw}

.rep-hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:5cqw 6cqw 11cqw;text-align:center}
.rep-plate{display:inline-flex;align-items:stretch;background:#FFC72C;border:.62cqw solid #000;border-radius:1.2cqw;padding:.7cqw 5.4cqw;box-shadow:0 .4cqw 1cqw -.4cqw rgba(0,0,0,.35)}
.rep-plate span{display:block;font-family:var(--body);font-size:6.3cqw;font-weight:800;line-height:1.15;letter-spacing:1cqw;color:#0b0b0b;margin-right:-1cqw}
/* the title, with the SETTLED stamp pressed on top of it: opaque ink, above the
   letters in the stacking order, crossing "Ready" and "Report" */
.rep-tw{position:relative;margin-top:3.8cqw}
.rep-title{position:relative;z-index:1;font-family:var(--display);font-weight:800;font-size:9cqw;line-height:1;letter-spacing:-.045em;color:#10202c}
.rep-stamp{position:absolute;z-index:2;left:50%;top:50%;width:52cqw;color:#D3202F;overflow:visible;pointer-events:none;
  transform:translate(calc(-50% + 12cqw),calc(-50% + 8.6cqw)) rotate(-9deg)}
.rep-stamp text{font-family:var(--display);font-weight:800;font-size:68px;letter-spacing:4px}
/* under the ink, the same shapes in the paper's colour: wherever the stamp lands, the
   title's letters are covered, so the grain of the ink shows paper, not black print */
.rep-stamp .rep-stamp-ko{color:#fbfbf8}

.rep-sec{margin:0 6cqw 2.6cqw}
.rep-hd{display:flex;align-items:center;justify-content:space-between;gap:2cqw;font-size:1.75cqw;font-weight:800;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:#2A3742;background:#eef1f3;border-left:.75cqw solid #34434F;border-radius:.4cqw;padding:1.2cqw 2.2cqw}
.rep-hd.ph{border-left-color:#1A5FA0;background:#E9F1F9;color:#0F4577}
.rep-hd.tp{border-left-color:#B23A3A;background:#FAECEB;color:#7E2424}
.rep-hd-plate{flex:none;margin:-.5cqw 0;background:#FFC72C;border:.3cqw solid #000;border-radius:.55cqw;padding:.05cqw 1cqw;font-size:1.85cqw;font-weight:800;line-height:1.35;letter-spacing:.12em;color:#0b0b0b}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.9cqw 4cqw;padding:2.3cqw 2.2cqw 0}
.rep-grid dt{font-size:1.6cqw;font-weight:700;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#69737d}
.rep-grid dd{margin-top:.4cqw;font-size:2.35cqw;font-weight:600;line-height:1.4;color:#10202c;white-space:nowrap;overflow:hidden;filter:blur(.34cqw);opacity:.8}
.rep-grid dd.dv{display:flex;align-items:center;gap:1.1cqw;filter:none;opacity:1}
.rep-grid dd.dv span{filter:blur(.34cqw);opacity:.8}
.rep-dot{flex:none;width:1.5cqw;height:1.5cqw;border-radius:50%;background:#C8870F}
.rep-sum{padding:1.9cqw 2.2cqw 0;font-size:2.15cqw;line-height:1.55;color:#27333d;filter:blur(.34cqw);opacity:.78}
.rep-ev{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw;padding:2.1cqw 0 0}
.rep-ev li{display:flex;flex-direction:column;align-items:center;gap:1cqw;padding:1.8cqw 1cqw 1.6cqw;border:.2cqw solid #e4e0d8;border-radius:1cqw;background:#faf9f6;
  font-size:1.65cqw;font-weight:700;letter-spacing:.04em;line-height:1.2;color:#15242f;text-align:center}
.rep-ev svg{width:4cqw;height:4cqw;color:#1A5FA0}
.rep-foot{margin:auto 6cqw 0;padding:1.8cqw 0 3.2cqw;border-top:.3cqw solid #14222E;display:flex;justify-content:space-between;gap:4cqw;font-size:1.45cqw;color:#69737d;line-height:1.5}
.rep-foot span:first-child{filter:blur(.24cqw);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-foot span:last-child{white-space:nowrap;font-weight:700;color:#14222E}

/* pages 2 and 3: a page title, the PDF's photo captions and photo tiles, the DVLA strip */
.rep-ptitle{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:4cqw 6cqw 3.2cqw}
.rep-pt{font-family:var(--display);font-weight:800;font-size:4.5cqw;line-height:1.1;letter-spacing:-.035em;color:#10202c}
.rep-ref{flex:none;display:inline-flex;align-items:center;gap:1cqw;padding:.75cqw 1.3cqw;border-radius:.6cqw;background:#374350;color:#cdd6df;font-size:1.4cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.rep-ref em{font-style:normal;letter-spacing:.04em;filter:blur(.22cqw)}

.rep-cap{display:flex;align-items:center;gap:1cqw;padding:0 .3cqw;font-size:1.55cqw;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#5a6168}
.rep-cap svg{flex:none;width:2.2cqw;height:2.2cqw}
/* the photo tiles: three to a row; four (or seven, eight) to a row of four */
.rep-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8cqw;padding-top:1.5cqw}
.rep-shots:has(> :nth-child(4):last-child),.rep-shots:has(> :nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5cqw}
.rep-shot{margin:0;min-width:0;display:flex;flex-direction:column;border:.2cqw solid #e4e0d8;border-radius:1cqw;overflow:hidden;background:#faf9f6}
.rep-shot figcaption{padding:.85cqw 1.1cqw;border-bottom:.2cqw solid #f0ede7;font-size:1.2cqw;font-weight:800;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:#15242f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a photo: the file fills its 16:10 tile (cropped from the middle), slightly out of focus, with the phone's timestamp
   burnt into the corner. The files live in img/report/ (ph-1, ph-2 for the policyholder,
   tp-1 … tp-6 for the third party), 480×360 WebP — see the notes beside them in index.html. */
.rep-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#161b22}
.rep-ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:blur(.3cqw) saturate(.92) brightness(1.06);transform:scale(1.04)}
/* page 3, three photos of the white car (Kaiya, 3 Oct 2026: there is more room now the big title
   has gone): the point of contact large on the left, the two side views stacked beside it */
.rep-shots--lead{grid-template-columns:1.9fr 1fr;grid-template-rows:auto auto}
.rep-shots--lead > .rep-shot:first-child{grid-row:1 / span 2}
.rep-shots--lead > .rep-shot:first-child .rep-ph{aspect-ratio:auto;flex:1;min-height:0}
.rep-ph::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 2.4cqw rgba(0,0,0,.35)}
.rep-ts{position:absolute;left:.8cqw;bottom:.8cqw;z-index:2;padding:.2cqw .6cqw;border-radius:.4cqw;background:rgba(0,0,0,.5);color:#ffd88a;font-family:var(--mono);font-size:1.05cqw;font-weight:600;line-height:1.3;letter-spacing:.02em;white-space:nowrap;filter:blur(.14cqw)}
/* a photo of a photocard licence on a dark surface, drawn in CSS */
.rep-ph--lic{background:radial-gradient(120% 90% at 30% 20%,#454b54,#23272e 60%,#191c21)}
.rep-lic{position:absolute;left:13%;top:17%;width:74%;aspect-ratio:85.6/54;border-radius:.9cqw;transform:rotate(-7deg);filter:blur(.24cqw);
  background:linear-gradient(118deg,#f4d5de 0%,#ecd6ea 38%,#d9e1f2 72%,#e3ecf4 100%);box-shadow:0 .8cqw 1.4cqw rgba(0,0,0,.55)}
.rep-lic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.55) 44%,transparent 58%)}
.rep-lic i{position:absolute;display:block}
.rep-lic .lf{left:5%;top:7%;width:13%;height:16%;border-radius:.2cqw;background:#2b4a9a}
.rep-lic .lh{left:24%;top:9%;width:52%;height:8%;border-radius:.2cqw;background:#7a4f86;opacity:.75}
.rep-lic .lp{left:5%;top:30%;width:27%;height:58%;border-radius:.3cqw;background:radial-gradient(circle at 50% 36%,#7d8796 0 19%,transparent 20%),radial-gradient(ellipse 60% 44% at 50% 100%,#7d8796 0 96%,transparent 98%),#c5ccd6}
.rep-lic .ll{left:38%;height:6%;border-radius:.2cqw;background:#3b4055;opacity:.55}
.rep-lic .l1{top:31%;width:44%}.rep-lic .l2{top:42%;width:52%}.rep-lic .l3{top:53%;width:36%}.rep-lic .l4{top:64%;width:48%}.rep-lic .l5{top:75%;width:30%}
.rep-lic .ls{left:72%;top:70%;width:20%;height:14%;border-bottom:.25cqw solid #2c3150;border-radius:0 0 50% 30%;transform:rotate(-8deg);opacity:.7}

/* pages 2 and 3 carry more rows than the cover, so they sit a little tighter */
.rep-dense .rep-sec{margin-bottom:2.1cqw}
.rep-dense .rep-grid{row-gap:1.55cqw;padding-top:1.9cqw}
.rep-dense .rep-shots{padding-top:1.2cqw}
.rep-dense .rep-foot{padding:1.5cqw 0 2.8cqw}
.rep-dense .rep-ptitle{padding:3.6cqw 6cqw 2.6cqw}

/* page 3: no big title. The third party's rear plate, small, with its label beside it in the
   slim title row page 2 has; then the DVLA look-up strip and the photos */
.rep-tp-id{display:flex;align-items:center;gap:2.4cqw;min-width:0}
.rep-plate--rear{flex:none;padding:0 2.9cqw 0 0;overflow:hidden;border-width:.42cqw;border-radius:.85cqw}
.rep-plate--rear i{display:flex;align-items:flex-end;justify-content:center;width:3cqw;margin-right:2.3cqw;padding-bottom:.6cqw;background:#1E4FA8;color:#fff;font-style:normal;font-family:var(--body);font-size:1.2cqw;font-weight:800;letter-spacing:.05em}
.rep-plate--rear span{padding:.45cqw 0;font-size:3.9cqw;letter-spacing:.6cqw;margin-right:-.6cqw}
.rep-tp-s{display:flex;flex-direction:column;gap:.5cqw;min-width:0;font-size:1.5cqw;font-weight:700;line-height:1.25;letter-spacing:.2em;text-transform:uppercase;color:#9A2B2B;white-space:nowrap}
.rep-tp-s b{font-size:1.75cqw;font-weight:800;color:#7E2424}
/* page 3 carries six photos: its sections sit a touch tighter still */
.rep-tp .rep-sec{margin-bottom:1.8cqw}
.rep-tp .rep-grid{row-gap:1.3cqw;padding-top:1.6cqw}
.rep-tp .rep-dvla{margin-top:1.1cqw;padding:1.2cqw 2.2cqw}
.rep-dvla{display:flex;flex-wrap:wrap;align-items:center;gap:1.4cqw 3cqw;margin-top:1.4cqw;padding:1.5cqw 2.2cqw;border-radius:.4cqw;background:#f4f6f8}
.rep-tag{font-size:1.4cqw;font-weight:800;letter-spacing:.12em;padding:.45cqw .9cqw;border-radius:.4cqw;background:#e3e7ea;color:#2b3a45}
.rep-dvla .df{display:flex;flex-direction:column;gap:.2cqw}
.rep-dvla .k{font-size:1.35cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#69737d}
.rep-dvla .v{display:flex;align-items:center;gap:.5cqw;font-size:1.85cqw;font-weight:700;line-height:1.35;color:#10202c}
.rep-dvla .v b{font-weight:700;filter:blur(.3cqw);opacity:.82}
.rep-dvla .v.ok{color:#3B8A4E}
.rep-dvla .v svg{width:2cqw;height:2cqw}

/* under the report: the cue, with one dot per page */
.rep-cue{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:calc(7cqw + 6px);color:var(--muted-2);font-size:13.5px;font-weight:600;letter-spacing:.01em}
.rep-dots{display:flex;gap:6px}
.rep-dots i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.2);transition:width .35s cubic-bezier(.2,.7,.2,1),background .35s ease}
.rep-dots i.on{width:18px;background:rgba(238,242,250,.72)}
.rep-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:560px){
  .rep-stage{max-width:92%;perspective:1100px}
  .rep-doc{--rest:rotateX(4deg) rotateY(-1deg) rotate(-1.4deg)}
  .rep-cue{gap:12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .rep-sheet,.rep-page,.rep-page::before,.rep-curl,.rep-dots i{transition:none}
}

/* ═══════════ Section 4 — Request Driver Reports: two portal screens beside the report ═══════════
   Kaiya, 2 Oct 2026: the Request Report and Ongoing Reports screens of the fleet portal, in the
   About CB ring cards' style (layout and caption), slightly overlapped like the Increase /
   Reduce deck, with the one behind clearly visible because there are only two.
   ▸ Layout: beside the report on desktops, laptops and tablets held sideways (and phones on their
     side); cards first, then the report, on phones and tablets held upright. Both are sized from
     the screen height too (--v), so neither is ever taller than the screen.
   ▸ The stack: the card behind sits up and back (scaled .92), its top band showing above the front
     card with its name on a tab; a click or tap on it, a dot, or an arrow key brings it forward.
   ▸ Each screen is designed at 640×400 and scaled to the card (--k, set by js/about-why.js), the
     ring's method; names and numbers are blurred like the ring's. */
.rq-row{--v:calc(100vh - 136px);--rw:min(340px,calc((var(--v) - 30px) / 1.49));display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:clamp(44px,8vw,64px);max-width:1100px;margin:0 auto}
@supports(height:100svh){.rq-row{--v:calc(100svh - 136px)}}
@media (min-width:900px),(orientation:landscape) and (min-width:640px){
  .rq-row{grid-template-columns:minmax(0,1fr) var(--rw);column-gap:clamp(32px,5.2vw,76px);align-items:center;justify-items:stretch}
}
/* phones on their side: the top bar is slimmer and the sections tighter (css/fit.css) */
@media (orientation:landscape) and (max-height:560px){
  .rq-row{--v:calc(100vh - 104px)}
  @supports(height:100svh){.rq-row{--v:calc(100svh - 104px)}}
}

/* the report beside the cards: about 340px wide, never taller than the screen
   (this replaces css/fit.css's "never taller than the space under the top bar" sizes here, for
   the report's new place; the doc is 1.414× its width and the cue adds about 0.07× + 26px) */
.rq-row .rep-stage{width:100%;max-width:var(--rw)}
@media (max-width:899px) and (orientation:portrait),(max-width:639px){
  .rq-row .rep-stage{max-width:min(86%,420px,calc((var(--v) - 30px) / 1.49))}
}

/* the card column: the stack, then its cue */
.rq-cards{position:relative;width:100%;min-width:0;display:flex;flex-direction:column;align-items:center}
.rq-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
/* --sw: the stack's width — the column, at most 640px, and short enough for the screen
   (front card 0.625× its width tall, plus the card behind's band of max(44px, 8.75%), plus the cue) */
.rq-stack{--sw:min(100%,640px,calc((var(--v) - 60px) / .7125),calc((var(--v) - 104px) / .625));--k:.9;
  position:relative;width:var(--sw);outline:none;-webkit-tap-highlight-color:transparent;container:rq / inline-size}
.rq-stack:focus-visible{outline:2px solid var(--cb-blue);outline-offset:10px;border-radius:20px}
/* the front card's box; the band above it is the card behind */
.rq-deck{position:relative;margin-top:max(44px,8.75%);aspect-ratio:16/10}

.rq-card{position:absolute;inset:0;z-index:1;border-radius:18px;transform-origin:50% 0}
.rq-card.is-front{z-index:3}
/* behind: up by the band's height and a little smaller, so it peeks out above the front card */
.rq-card.is-back{transform:translateY(min(-14%,-44px)) scale(.92);cursor:pointer}
.rq-in{position:absolute;inset:0;border-radius:inherit;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.rq-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 (the ring's) */
.rq-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)}
.rq-card.is-front .rq-face{border-color:rgba(95,224,255,.42);
  box-shadow:0 0 0 1px rgba(95,224,255,.12),0 0 36px -8px rgba(95,224,255,.32),0 34px 70px -30px rgba(0,0,0,.9),0 14px 30px -16px rgba(0,0,0,.7)}
/* the card behind sits in the front one's shade, lighter than the deck's tucked cards */
/* graded: the portal's top bar shows through clearly, the page under it is dimmer, so the
   tab reads on its own and the screen's own title does not double it */
.rq-shade{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,13,.24),rgba(4,7,13,.3) 8.5%,rgba(4,7,13,.78) 12.5%,rgba(4,7,13,.82))}
.rq-card.is-back .rq-shade{opacity:1}
/* its tab: number chip + screen name, centred in the band that shows */
.rq-tab{position:absolute;left:50%;top:0;z-index:7;height:max(15.2%,47.8px);display:flex;align-items:center;gap:9px;
  transform:translateX(-50%);opacity:0;pointer-events:none;white-space:nowrap;
  font:700 13.5px/1 var(--body);letter-spacing:-.005em;color:#EAF4FF}
.rq-card.is-back .rq-tab{opacity:1}
.rq-tab::before{content:"";position:absolute;left:-14px;right:-16px;top:50%;height:32px;margin-top:-16px;z-index:-1;border-radius:99px;
  background:rgba(7,12,22,.86);border:1px solid rgba(95,224,255,.34);box-shadow:0 8px 22px -10px rgba(0,0,0,.9),0 0 18px -8px rgba(95,224,255,.45);
  transition:border-color .3s ease,box-shadow .3s ease}
@media (hover:hover){
  .rq-card.is-back:hover .rq-in{transform:translateY(-6px)}
  .rq-card.is-back:hover .rq-tab::before{border-color:rgba(130,232,255,.75)}   /* no hover glow on cards (Kaiya) */
}
/* the number chip (the ring's .sys-n) */
.rq-n{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--blue-bright);
  padding:4px 6px 3px;border-radius:6px;border:1px solid rgba(95,224,255,.3);background:rgba(95,224,255,.07)}

/* the caption, the ring's: it belongs to the stack, so it stays still while the cards move */
.rq-cap{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:64px 24px 19px;pointer-events:none;border-radius:0 0 18px 18px;
  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,.7) 46%,rgba(4,7,13,.94))}
.rq-cap .rq-n{grid-row:1;position:relative;top:-3px}
.rq-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;text-wrap:balance}
.rq-cap p{grid-row:2;grid-column:2;margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted);text-wrap:balance}

/* the cue under the stack, like the report's: words + one dot per card */
.rq-cue{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;color:var(--muted-2);font-size:13.5px;font-weight:600;letter-spacing:.01em}
.rq-cue-tx{white-space:nowrap}
.rq-dots{display:flex;align-items:center;gap:2px}
.rq-dot{position:relative;width:16px;height:22px;padding:0;border:0;background:none;cursor:pointer;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.rq-dot::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:4px;transform:translate(-50%,-50%);
  background:rgba(255,255,255,.22);transition:width .35s cubic-bezier(.2,.7,.2,1),background .3s ease}
.rq-dot:hover::before{background:rgba(255,255,255,.4)}
.rq-dot.on{width:30px}
.rq-dot.on::before{width:22px;background:var(--blue-bright);box-shadow:0 0 10px rgba(95,224,255,.6)}
.rq-dot:focus-visible{outline:2px solid var(--cb-blue);outline-offset:2px;border-radius:8px}
@media (any-pointer:coarse){
  .rq-dot{width:40px;height:44px}
  .rq-dot.on{width:48px}
  .rq-dots{gap:0}
}

/* ── the screens (all sizes in the 640×400 design space) ── */
.rq-shot{position:absolute;inset:0;pointer-events:none;overflow:hidden;content-visibility:auto}
.rq-canvas{position:absolute;left:0;top:0;width:640px;height:400px;transform-origin:0 0;transform:scale(var(--k));
  overflow:hidden;text-align:left;line-height:1.3;font-family:var(--body);color:#EAF2FA;font-variant-numeric:tabular-nums;letter-spacing:0}
/* small personal text softened, structure sharp: the ring's .sys-bl / .sys-bl2 (in design pixels,
   so the blur shrinks with the card; never under ~1.15px / .8px on screen) */
.rq-bl{filter:blur(max(2.3px,calc(1.15px / var(--k))))}
.rq-bl2{filter:blur(max(1.5px,calc(.8px / var(--k))))}

/* the fleet portal shell (portal/design/*.css tokens, as the ring's .pt) */
.rq-pt{--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}
.rq-pt svg{display:block;flex:none}
.rq-app{display:grid;grid-template-columns:122px minmax(0,1fr);height:100%}
.rq-side{background:linear-gradient(180deg,#0E1822,#080D13 62%);border-right:1px solid var(--pe2);padding:13px 7px;display:flex;flex-direction:column;gap:1px}
.rq-brand{display:flex;align-items:center;gap:7px;padding:0 5px 10px}
.rq-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)}
.rq-mark svg{width:12px;height:12px}
.rq-brand b{display:block;font:800 10.5px/1.1 var(--display);letter-spacing:-.01em}
.rq-brand small{display:block;margin-top:2px;font:600 5.8px/1.2 var(--body);letter-spacing:.03em;color:var(--pi2)}
.rq-nh{padding:9px 7px 5px;font:800 5.8px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--pi);opacity:.72}
.rq-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)}
.rq-ni svg{width:10px;height:10px;color:var(--pi2)}
.rq-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)}
.rq-ni.on svg{color:var(--pc)}
.rq-main{display:flex;flex-direction:column;min-width:0;background:var(--pd)}
.rq-top{height:38px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px 0 16px;border-bottom:1px solid var(--pe2)}
.rq-org{font:800 10.5px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.rq-org span{color:var(--pi3);font-weight:500}
.rq-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}
.rq-bell{margin-left:auto;width:23px;height:23px;border-radius:7px;display:grid;place-items:center;color:var(--pi2);border:1px solid var(--pe);background:rgba(255,255,255,.03)}
.rq-bell svg{width:11px;height:11px}
.rq-wrap{padding:10px 16px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.rq-crumb{font:600 7.2px/1 var(--body);color:var(--pi2)}
.rq-crumb span{opacity:.55;margin:0 3px}
.rq-crumb b{font-weight:600;color:var(--pi)}
.rq-ph b{font:800 17px/1.1 var(--display);letter-spacing:-.03em}
.rq-lead{margin:-1px 0 1px;font:400 7.8px/1.4 var(--body);color:var(--pi2)}
.rq-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)}

/* 01 · Request Report: the form (design/chase.css .card, .f, .act; vehiclePicker.js .rn-chosen) */
.rq-form{border:1px solid var(--pe2);border-radius:9px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--pp)}
.rq-fh{padding:7px 11px;border-bottom:1px solid var(--pe2);font:700 8.4px/1 var(--body)}
.rq-fb{display:flex;flex-direction:column;gap:7px;padding:8px 11px 9px}
.rq-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rq-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.rq-f .k{font:600 6.8px/1 var(--body);letter-spacing:.02em;color:var(--pi2)}
.rq-f .k i{font-style:normal;color:#FF8F8F;margin-left:2px}
.rq-f .in{display:flex;align-items:center;gap:6px;height:19px;padding:0 8px;border-radius:6px;border:1px solid var(--pe);background:rgba(0,0,0,.28);
  font:500 8.2px/1 var(--body);color:var(--pi);white-space:nowrap;overflow:hidden}
.rq-f .in.mono{font-family:var(--mono);letter-spacing:.04em}
.rq-f .in.date{justify-content:space-between}
.rq-f .in.date svg{width:9px;height:9px;color:var(--pi2)}
.rq-f .in.ta{height:19px;padding-top:0;font-size:7.6px}
.rq-f .h{font:400 6.2px/1.2 var(--body);color:var(--pi3)}
.rq-veh{display:flex;gap:5px;min-width:0}
.rq-veh .in.pick{flex:1;min-width:0;padding:0 6px}
.rq-veh .m{font-size:7.2px;color:var(--pi3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-chg{flex:none;display:flex;align-items:center;height:19px;padding:0 8px;border-radius:6px;font:600 7.4px/1 var(--body);
  color:#CFF6FF;border:1px solid rgba(95,224,255,.45);background:rgba(95,224,255,.08)}
.rq-ff{display:flex;align-items:center;gap:7px;padding:7px 11px;border-top:1px solid var(--pe2)}
.rq-go{height:20px;display:flex;align-items:center;padding:0 11px;border-radius:99px;font:700 7.6px/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)}
.rq-act{height:20px;display:flex;align-items:center;padding:0 10px;border-radius:7px;font:600 7.6px/1 var(--body);color:var(--pi2);border:1px solid var(--pe)}
.rq-exp{margin-left:auto;font:600 6.8px/1.3 var(--body);color:var(--pa)}

/* 02 · Ongoing Reports: the two tables (design/progress.css) */
.rq-h2{margin-top:2px;font:700 9.4px/1.2 var(--body)}
.rq-sub{margin-top:-4px;font:400 6.8px/1.3 var(--body);color:var(--pi3)}
.rq-list{border:1px solid var(--pe2);border-radius:8px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--pp)}
.rq-tr{display:grid;grid-template-columns:62px 92px minmax(0,1fr) 98px 90px;align-items:center;column-gap:10px;padding:5px 10px;border-top:1px solid var(--pe2)}
.rq-tr:first-child{border-top:0}
.rq-thd{padding-top:5px;padding-bottom:5px;background:var(--pp2);font:800 5.6px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.rq-thd span{display:flex;align-items:center;gap:3px;white-space:nowrap}
.rq-thd svg{width:6px;height:6px;color:var(--pi3)}
.rq-thd .r{justify-content:flex-end}
.rq-tr .mk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.rq-tr .mk b{font:600 7.6px/1.15 var(--body);white-space:nowrap}
.rq-tr .mk small{font:400 6.6px/1.1 var(--body);color:var(--pi2);white-space:nowrap}
.rq-edit{margin-top:2px;padding:2px 5px;border-radius:4px;font:600 5.8px/1 var(--body);color:var(--pi);border:1px solid var(--pe)}
.rq-tr .prog,.rq-tr .clock{display:flex;flex-direction:column;gap:3px;min-width:0}
.rq-tr .clock{align-items:flex-end;text-align:right}
.rq-tr .prog b,.rq-tr .clock b{font:600 7.6px/1 var(--body);color:var(--pi2);white-space:nowrap}
.rq-tr small{font:400 6.2px/1.2 var(--body);color:var(--pi3);white-space:nowrap}
.rq-tr .pbar{display:block;width:100%;max-width:78px;height:8px;padding:1.5px;border-radius:3px;background:rgba(4,8,13,.55);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.045)}
.rq-tr .pbar i{display:block;height:100%;border-radius:1.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.rq-tr .p-early i{background:linear-gradient(90deg,#FF4D4D,#FF8F6B)}
.rq-tr .p-part i{background:linear-gradient(90deg,#E8952B,#FFC97A)}
.rq-tr .p-nearly i{background:linear-gradient(90deg,#4FD08C,#8DF0BB)}
.rq-tr .gb{display:flex;gap:1.2px;width:100%;height:8px;padding:1.6px;border-radius:4px;
  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)}
.rq-tr .gb i{flex:1;border-radius:1px;background:rgba(255,255,255,.07)}
.rq-tr .gb i.on{background:var(--pg);box-shadow:0 0 4px -1px rgba(111,227,160,.7)}
.rq-tr .c-normal b{color:var(--pg)}
.rq-tr .c-high b{color:var(--pa)}
.rq-tr .c-high .gb i.on{background:var(--pa);box-shadow:0 0 4px -1px rgba(255,176,74,.75)}
.rq-tr .stat{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.rq-tr .stat small{font-weight:600}
.rq-tr .l-ok{color:var(--pg)}
.rq-tr .l-warn{color:#F5B23C}
.rq-tr .pill{display:inline-flex;align-items:center;padding:2.5px 6px;border-radius:4px;font:600 6.2px/1.3 var(--body);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--pe);color:var(--pi3);background:rgba(255,255,255,.03)}
.rq-tr .s-part{color:#FFC97A;border-color:rgba(255,176,74,.4);background:rgba(255,176,74,.1)}
.rq-tr .s-none{color:var(--pi2)}
.rq-tr .s-failed{color:#FFB3B3;border-color:rgba(255,77,77,.5);background:rgba(255,77,77,.12)}
.rq-foot{display:flex;justify-content:space-between;align-items:center;padding:1px 2px;font:400 6.6px/1.3 var(--body);color:var(--pi3)}
.rq-foot .n{font-weight:600;color:#FF9E9E}

/* small cards (phones either way round, small windows): the ring's phone caption. Sized from the
   card's own width (container query), so a phone on its side gets it too; the media query is
   the fallback for browsers without container queries. */
@media (max-width:760px){
  .rq-card,.rq-face{border-radius:14px}
  .rq-cap{padding:44px 14px 12px;column-gap:8px;border-radius:0 0 14px 14px;
    background:linear-gradient(180deg,rgba(4,7,13,0),rgba(4,7,13,.72) 44%,rgba(4,7,13,.95))}
  .rq-cap h3{font-size:16px}
  .rq-cap p{font-size:12.5px;margin-top:3px}
  .rq-cap .rq-n{font-size:12px;padding:3px 5px 2px;top:-2px}
  .rq-tab .rq-n{font-size:13.5px;padding:3px 5px 2px}
  .rq-tab{font-size:13.5px;gap:7px}
  .rq-tab::before{height:31px;margin-top:-15.5px;left:-10px;right:-12px}
  .rq-cue{gap:12px;font-size:13px;margin-top:16px}
}
@container rq (max-width:500px){
  .rq-card,.rq-face{border-radius:14px}
  .rq-cap{padding:40px 14px 12px;column-gap:8px;border-radius:0 0 14px 14px;
    background:linear-gradient(180deg,rgba(4,7,13,0),rgba(4,7,13,.72) 44%,rgba(4,7,13,.95))}
  .rq-cap h3{font-size:16px}
  .rq-cap p{font-size:12.5px;margin-top:3px}
  .rq-cap .rq-n{font-size:12px;padding:3px 5px 2px;top:-2px}
  .rq-tab .rq-n{font-size:13.5px;padding:3px 5px 2px}
  .rq-tab{font-size:13.5px;gap:7px}
  .rq-tab::before{height:31px;margin-top:-15.5px;left:-10px;right:-12px}
}
@container rq (max-width:340px){ .rq-cap p{font-size:12px} }
/* a narrow report (phones on their side): the dots go under its cue, which js/about-why.js
   shortens to "Tap to turn the page", so it stays on one line inside the report's width */
@container (max-width:250px){
  .rq-row .rep-cue{flex-direction:column;gap:8px;margin-top:calc(7cqw + 2px)}
  .rq-row .rep-cue-tx{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .rq-in,.rq-dot,.rq-dot::before,.rq-tab::before{transition:none}
}