/* NEXQUOTE pitch · scene 10 beat ① · the three plans, the unit-economics strip and the logo row (LỆNH 47, 48; assets/js/biz-price.js).
   1920×1080 stage pixels. The deck's card v2 material (nq-card.css tokens): a #141C30 → #0C1222 ground at .96, a 1 px gradient edge drawn by ::before (here brighter: white .5 at the top to
   .12 at the foot), a 1 px light line inside the top edge, a deep shadow, a soft blue glow below, no backdrop-filter; radius 22. Team is 2 % larger (LỆNH 72; real size, not a scale) with a 1,5 px
   light-blue edge and an outer glow; Pilot a more see-through ground. No badge. Class-only selectors (the host is scene 10's label layer; "#s-biz .b8 p{margin:0}" and the like still apply
   to what sits in it: nothing here relies on a margin on a p). Min text 24 px at rest; the exceptions the spec gives: the plan name and the strip's labels 20 px, its small lines 22 px.
   Projector mode (html.proj): nq-proj.css. */
.bp-root{position:absolute;left:0;top:0;width:1920px;height:1080px;display:block;visibility:hidden;pointer-events:none;font-family:"Inter",sans-serif;color:#F4F6FA;font-variant-numeric:tabular-nums}
.bp-root,.bp-root *,.bp-logos,.bp-logos *{box-sizing:border-box;margin:0;padding:0}
.bp-root>*{position:absolute}
/* the pre-raster copy: on screen, painted, 0.4 % (removed after a few frames; nothing stays) */
.bp-root.bp-warm{visibility:visible!important;opacity:.004;pointer-events:none;z-index:2}
/* scene 10's old "#s-biz svg{fill:none;stroke:currentColor}" must not reach our shapes: they carry their own fills and strokes */
.bp-root svg,#s-biz .bp-root svg{stroke:none;stroke-width:0}
/* LỆNH 73 · every part that moves or fades its own layer, kept for good (no will-change toggled at the beat's start: each toggle made and drew the layers again): the cards,
   their pools of light and shadows (they faded inside the page's own layer: a 30–40 ms GPU raster as the pulse unlocked Pilot and Team), and inside a card what the unlock moves */
.bp-root :is(.bp-card,.bp-chip,.bp-chips,.bp-note,.bp-strip,.bp-th,.bp-pool,.bp-sh){will-change:transform,opacity}
.bp-root .bp-card :is(.bp-run,.bp-md,.bp-mds,.bp-pr,.bp-mc,.bp-pa,.bp-ft li,.bp-omg){will-change:transform,opacity}

/* the three chips under the title band: a small app tile and the words */
.bp-chips{left:160px;top:280px;display:flex;gap:12px}
.bp-chip{display:flex;align-items:center;gap:9px;padding:5px 20px 5px 5px;border-radius:999px;white-space:nowrap;font-size:24px;font-weight:500;line-height:30px;color:#E6ECF5;
  background:var(--nq-pill-bg,rgba(8,12,22,.68));box-shadow:inset 0 0 0 1px var(--nq-pill-edge,rgba(234,240,250,.6));opacity:0}
.bp-chip img{display:block;flex:none;width:30px;height:30px}
/* LỆNH 48: under the chips, plain words (no icons), small: the product's fit for a forwarder */
.bp-note{left:164px;top:304px;white-space:nowrap;font-size:22px;font-weight:500;line-height:26px;color:#B4C2DA;opacity:0}

/* the soft blue light under a card (a DOM ellipse; the 3D ground is the scene's) */
.bp-pool{height:150px;border-radius:50%;opacity:0;width:650px;background:radial-gradient(closest-side,rgba(96,158,255,.5),rgba(96,158,255,.17) 58%,rgba(96,158,255,0))}
.bp-pool.bp-pt{width:670px;background:radial-gradient(closest-side,rgba(120,180,255,.64),rgba(120,180,255,.22) 58%,rgba(120,180,255,0))}
/* the thread that ties a card to its route node (LỆNH 48: no dot at its foot: the route's three nodes are the only dots) */
.bp-th{width:2px;opacity:0;transform-origin:50% 0;background:linear-gradient(180deg,rgba(156,203,255,.15),rgba(190,220,255,.8))}

/* a card: the model top right; the plan's name, its price, its line, then what it holds; the cards hang from the same top */
.bp-card{display:flex;flex-direction:column;padding:24px 32px 20px;border-radius:22px;opacity:0;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(20,28,48,.96),rgba(12,18,34,.96));box-shadow:inset 0 0 0 1px rgba(170,200,255,.3),inset 0 1px 0 rgba(224,236,255,.55)}   /* LỆNH 48: the edge is inset box-shadows (no mask-composite border: its first paint cost 230-420 ms in the GPU process), the deep shadow a static layer (.bp-sh) */
.bp-sh{border-radius:22px;opacity:0;pointer-events:none;border:0 solid transparent;border-image:url(../img/ui9/sh9.webp) 64 fill/64px/40px 56px 84px}   /* LỆNH 69: the deep shadow a pre-blurred 9-slice image (no 56 px box-shadow to raster at the beat's first frame) */
.bp-sh.bp-st::after{content:"";position:absolute;inset:0;border:0 solid transparent;border-image:url(../img/ui9/bl9.webp) 64/64px/52px}
.bp-pilot{background:linear-gradient(180deg,rgba(20,28,48,.84),rgba(12,18,34,.84));box-shadow:inset 0 0 0 1px rgba(170,200,255,.2),inset 0 1px 0 rgba(224,236,255,.34)}   /* visibly lighter: a thinner ground (no blur: nothing behind a card is blurred by the card) */
.bp-team{padding:26px 34px 20px;box-shadow:inset 0 0 0 1.5px rgba(170,214,255,.9),inset 0 1px 0 rgba(255,255,255,.6),0 0 22px rgba(90,160,255,.22)}   /* LỆNH 72: 2 % larger, a brighter 1,5 px light-blue edge, no badge */
/* the model (B's sprite sheet, 9 frames of 150 × 150 shown one at a time) top right of the card */
.bp-md{position:absolute;right:14px;top:10px;width:136px;height:136px;background:no-repeat 0 0/900% 100%;pointer-events:none}
.bp-team .bp-md{right:16px;top:12px}
.bp-root.bp-rest .bp-md{animation:bpBr 4s ease-in-out infinite}   /* LỆNH 72: at rest the models breathe very lightly (the individual scale property: the lift is the transform's); only at rest, so ①'s first frames build no layer for it */
@keyframes bpBr{0%,100%{scale:1}50%{scale:1.018}}
body.safe .bp-root .bp-md,body.calm .bp-root .bp-md{animation:none}
@media (prefers-reduced-motion:reduce){.bp-root .bp-md{animation:none}}
/* LỆNH 72 · the model's soft shadow as it lifts (a pre-blurred ellipse, ≤ 8 px), the edge that lights round once (an SVG dash on the rounded rect) */
.bp-mds{position:absolute;right:38px;top:118px;width:96px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,4,14,.75),rgba(0,4,14,0));opacity:0;pointer-events:none}
.bp-team .bp-mds{right:40px;top:120px}
.bp-run{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}
.bp-run svg{position:absolute;left:0;top:0;overflow:visible}
.bp-run rect{fill:none;stroke-dasharray:.16 .84;stroke-linecap:round}
.bp-run .g{stroke:rgba(150,205,255,.45);stroke-width:6}
.bp-run .c{stroke:#EAF4FF;stroke-width:2}
.bp-nm{font-size:18px;font-weight:700;line-height:22px;letter-spacing:.16em;color:#8DBBFF}
.bp-pr{display:flex;align-items:baseline;gap:10px;height:66px;margin-top:6px;white-space:nowrap}
.bp-pr b{font-size:64px;font-weight:700;line-height:66px;letter-spacing:-.03em;color:#FFFFFF;font-variant-numeric:tabular-nums}
.bp-pr span{font-size:24px;font-weight:500;line-height:1;color:#B4C2DA}
.bp-tg{margin-top:2px;font-size:22px;font-weight:600;line-height:28px;color:#FFFFFF;white-space:nowrap}
/* the figures as chips; the price an account under them */
.bp-mt{display:flex;gap:8px;margin-top:10px}
.bp-mc{padding:2px 12px 3px;border-radius:999px;white-space:nowrap;font-size:19px;font-weight:600;line-height:24px;color:#F4F7FC;background:rgba(47,128,255,.22);box-shadow:inset 0 0 0 1px rgba(150,200,255,.55);opacity:0}
.bp-pa{margin-top:5px;font-size:18px;font-weight:500;line-height:22px;color:#B4C2DA;white-space:nowrap;opacity:0}

/* what the plan holds: a divider fading at both ends, then the ticks (a 26 px solid blue circle, the text 24 px) */
.bp-ft{position:relative;list-style:none;margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:5px}
.bp-team .bp-ft{gap:6px}
/* Pilot has two lines: its rows start on the same y as Business's and keep the same rhythm; the spare room stays at the foot of the card */
.bp-ft::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.26) 20%,rgba(255,255,255,.26) 80%,rgba(255,255,255,0))}
.bp-ft li{display:flex;align-items:flex-start;gap:12px;font-size:21px;font-weight:500;line-height:25px;color:#E6ECF5;opacity:0}
.bp-ft li span{max-width:370px}
.bp-ck{display:block;flex:none;width:22px;height:22px;margin-top:1.5px}
.bp-ck svg{display:block;width:22px;height:22px}
/* OMEN's mark before its line; a cyan glow behind it flashes once as the line comes */
.bp-omk{position:relative;display:block;flex:none;width:22px;height:22px;margin:1.5px -4px 0 0}
.bp-omk img{position:relative;display:block;width:22px;height:22px;border-radius:6px}
.bp-omg{position:absolute;left:-9px;top:-9px;width:40px;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(120,230,255,.95),rgba(80,200,255,.4) 55%,rgba(80,200,255,0));opacity:0}
.bp-cc{fill:#2F80FF}   /* a solid blue circle, a white tick */
.bp-cm{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* click 2: the strip, one dark-glass card of two wide blocks (LỆNH 48: the cost to serve; the gross margin of year 2 with its bar, the payback, the chip and its source) (the card's material, radius 22) */
.bp-strip{display:flex;align-items:stretch;border-radius:22px;opacity:0;background:linear-gradient(180deg,rgba(20,28,48,.96),rgba(12,18,34,.96));box-shadow:inset 0 0 0 1px rgba(170,200,255,.26),inset 0 1px 0 rgba(224,236,255,.45)}
.bp-cell{position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 22px;opacity:0}
.bp-cell+.bp-cell::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.22) 25%,rgba(255,255,255,.22) 75%,rgba(255,255,255,0))}
.bp-c1{width:690px;padding-top:14px}
.bp-c2{width:430px;padding-top:14px}
.bp-c3{flex:1;padding-top:14px}
.bp-cell{justify-content:flex-start}
.bp-cb{display:flex;align-items:center;gap:14px;margin-top:6px}
.bp-lb{font-size:16px;font-weight:700;line-height:20px;letter-spacing:.14em;color:#8DBBFF;white-space:nowrap}
.bp-big{display:flex;align-items:baseline;gap:10px;margin-top:2px;white-space:nowrap}
.bp-big b{font-size:64px;font-weight:700;line-height:66px;letter-spacing:-.03em;color:#FFFFFF;font-variant-numeric:tabular-nums}
.bp-big span{font-size:24px;font-weight:500;line-height:1;color:#B4C2DA}
.bp-cp{font-size:18px;font-weight:500;line-height:22px;color:#B4C2DA;white-space:nowrap}   /* beside the chip: where the 2,5 comes from */
.bp-eq{padding:4px 16px 6px;border-radius:999px;white-space:nowrap;font:var(--nq-pill-font,600 24px/1.15 "Inter",sans-serif);color:var(--nq-pill-ink,#F4F6FA);
  background:rgba(47,128,255,.28);box-shadow:inset 0 0 0 1px rgba(150,200,255,.72)}
