/* ══════════════════════════════════════════════════════════════════════════
   usebobcode.ai — theme
   Every value below is traceable to Master-App-Design-Experience-System.
     shell colours + type ..... design-system/00-master.dc.html  (body, header)
     card / disc / plate ...... design-system/design-system/00-master.design-system.dc.html
     chip spec ................ ibid. line 2002  (chipBase)
     families ................. runtime/design-tokens.js  FAM
     Blauer Nue ............... _ds/bobwork-ai-…/fonts/blauer-nue.css  (official OTFs)
   Do not invent a value here. Add it to the design system first, then copy it down.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

/* ── Blauer Nue — the real brand face, official files ── */
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Thin.otf')       format('opentype'); font-weight:100; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Extralight.otf') format('opentype'); font-weight:200; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Light.otf')      format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Regular.otf')    format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Medium.otf')     format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Semibold.otf')   format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Extrabold.otf')  format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Extrabold.otf')  format('opentype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Blauer Nue'; src:url('/assets/fonts/BlauerNue-Heavy.otf')      format('opentype'); font-weight:900; font-display:swap; }

:root {
  /* shell — from 00-master.dc.html body { background:#F4F5F7; color:#101827 } */
  --page: #F4F5F7;
  --paper: #FFFFFF;
  --paper-2: #FAFBFD;
  --ink: #101827;
  --ink-2: #475569;
  --muted: #6B7280;
  --muted-2: #8A92A8;
  --line: #E7E9F4;
  --line-2: #EEF1F6;
  --line-3: #F0F1F7;

  /* brand palette — customer-facing surfaces (CONFLICTS.md X1, settled 2026-08-14) */
  --brand: #2F54FF;
  --brand-deep: #1B34C7;
  --brand-wash: #EDF0FF;
  --green: #0E9E76;  --green-wash: #E9F7F1;
  --purple: #7742E4; --purple-wash: #F1EBFC;
  --pink: #D6467B;   --pink-wash: #FBE7EF;
  --amber: #B87809;  --amber-wash: #FEF6EC; --amber-line: #F3D7AD;

  /* six action families — runtime/design-tokens.js FAM. Canvas grammar only. */
  --fam-comm: #12A150;  --fam-comm-tint: #E9F7EF;
  --fam-judge: #7A5AF8; --fam-judge-tint: #F2EFFE;
  --fam-wait: #8A94A6;  --fam-wait-tint: #F1F4F9;
  --fam-data: #2E6BE6;  --fam-data-tint: #E9F0FE;
  --fam-proc: #E0631A;  --fam-proc-tint: #FDF0E7;
  --fam-money: #0E7490; --fam-money-tint: #E6F4F7;

  --font: 'Blauer Nue', 'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'Noto Sans TC', monospace;

  --r-card: 19px;         /* cardBase borderRadius */
  --r: 14px;
  --r-sm: 10px;
  --r-chip: 7px;          /* chipBase borderRadius */
  --r-pill: 999px;
  --sh-card: 0 1px 2px rgba(16,24,39,.04), 0 6px 18px -8px rgba(16,24,39,.16);
  --sh-lift: 0 2px 4px rgba(16,24,39,.05), 0 18px 40px -18px rgba(16,24,39,.22);
  --maxw: 1180px;
  --top: 56px;            /* --bwTop */
}

/* family helper — set data-fam="comm|judge|wait|data|proc|money" */
[data-fam="comm"]  { --fam: var(--fam-comm);  --fam-tint: var(--fam-comm-tint);  --fam-grad: linear-gradient(160deg,#2FBF71,#12A150); --fam-sh: 0 3px 8px -2px rgba(18,161,80,.42); }
[data-fam="judge"] { --fam: var(--fam-judge); --fam-tint: var(--fam-judge-tint); --fam-grad: linear-gradient(160deg,#8B6EF9,#6B45E8); --fam-sh: 0 3px 8px -2px rgba(122,90,248,.42); }
[data-fam="wait"]  { --fam: var(--fam-wait);  --fam-tint: var(--fam-wait-tint);  --fam-grad: linear-gradient(160deg,#98A2B3,#6B7789); --fam-sh: 0 3px 8px -2px rgba(107,119,137,.40); }
[data-fam="data"]  { --fam: var(--fam-data);  --fam-tint: var(--fam-data-tint);  --fam-grad: linear-gradient(160deg,#4C8DF6,#2E6BE6); --fam-sh: 0 3px 8px -2px rgba(46,107,230,.42); }
[data-fam="proc"]  { --fam: var(--fam-proc);  --fam-tint: var(--fam-proc-tint);  --fam-grad: linear-gradient(160deg,#F0803A,#E0631A); --fam-sh: 0 3px 8px -2px rgba(224,99,26,.40); }
[data-fam="money"] { --fam: var(--fam-money); --fam-tint: var(--fam-money-tint); --fam-grad: linear-gradient(160deg,#1898B4,#0E7490); --fam-sh: 0 3px 8px -2px rgba(14,116,144,.40); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--font); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
h1 { font-size: clamp(38px, 5.2vw, 58px); letter-spacing: -.045em; }
h2 { font-size: clamp(26px, 3.1vw, 38px); letter-spacing: -.04em; }
h3 { font-size: 21px; letter-spacing: -.03em; }
h4 { font-size: 16.5px; font-weight: 700; letter-spacing: -.022em; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }
::selection { background: var(--brand-wash); color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }

/* eyebrow — uppercase mono, the shell's section label (「THIS WEEK · NEEDS YOU」) */
.eyebrow {
  display: block;
  font: 700 10.5px/1.25 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow.fam { color: var(--fam, var(--muted-2)); }

/* chip — chipBase, master.design-system.dc.html line 2002 */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1.35 var(--mono); letter-spacing: .04em;
  border-radius: var(--r-chip); padding: 3px 9px;
  border: 1px solid var(--line); background: #F4F7FA; color: var(--ink-2);
  white-space: nowrap;
}
.chip.on   { background: #EDF2FE; border-color: #C9DCFA; color: #1B4FAF; }
.chip.ok   { background: var(--green-wash); border-color: #BFE8D0; color: #0B5E33; }
.chip.warn { background: var(--amber-wash); border-color: var(--amber-line); color: #8A5418; }
.chip.fam  { background: var(--fam-tint); border-color: transparent; color: var(--fam); }
.chip .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }

.lede { font-size: clamp(16.5px, 1.35vw, 18.5px); color: var(--ink-2); line-height: 1.65; }
.small { font-size: 14px; color: var(--muted); }
.mono { font-family: var(--mono); }
/* every number is mono — the shell's strongest signature */
.num { font-family: var(--mono); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
code {
  font: 500 .89em/1.5 var(--mono); background: var(--line-3);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink-2);
}

/* ═══ disc — the node grammar's icon atom.
   White 1.5-stroke glyph on a family-graded circle. The colour comes from the
   disc, never from the icon (assets/action-icons/ICON_SOURCE_MAP.md). ═══ */
.disc {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--fam-grad); color: #fff;
  display: grid; place-items: center; box-shadow: var(--fam-sh);
  position: relative;
}
.disc svg { width: 21px; height: 21px; }
.disc.sm { width: 26px; height: 26px; } .disc.sm svg { width: 15px; height: 15px; }
.disc.sm .badge { width: 13px; height: 13px; border-radius: 4px; left: -4px; bottom: -3px; }
.disc.sm .badge img { width: 8px; height: 8px; }
.disc.lg { width: 46px; height: 46px; } .disc.lg svg { width: 26px; height: 26px; }
/* plate — 52×52 r16 family tint holding the disc */
.plate { width: 52px; height: 52px; border-radius: 16px; background: var(--fam-tint); display: grid; place-items: center; flex: none; }

/* app badge — real brand file, bottom-left of the tile (CLAUDE.md rule 2 + 3) */
.badge {
  position: absolute; left: -5px; bottom: -4px;
  width: 17px; height: 17px; border-radius: 5px; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden;
}
.badge img { width: 11px; height: 11px; object-fit: contain; display: block; }

/* ═══ brand marks — always the real file, never redrawn ═══ */
.mark { display: inline-block; vertical-align: middle; object-fit: contain; }
.mark-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mark-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 14px 7px 9px; font-size: 14px; font-weight: 500; color: var(--ink);
}
.mark-chip img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.mark-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 10px; text-align: center;
}
.mark-tile img { width: 26px; height: 26px; object-fit: contain; }
.mark-tile span { font: 500 12px/1.3 var(--font); color: var(--ink-2); }
/* quiet logo strip, like the customer rows on claude.com */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 52px; }
.logo-strip img { height: 44px; width: auto; object-fit: contain; opacity: .55; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.logo-strip img:hover { opacity: 1; filter: none; }

/* ═══ header — 56px, white, hairline (00-master.dc.html) ═══ */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 10px; height: var(--top); }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--ink); }
.brand img { height: 22px; width: auto; display: block; }
.brand b { font-size: 15.5px; font-weight: 900; letter-spacing: -.045em; }
.brand .sub { font: 700 8.5px/1 var(--mono); letter-spacing: .1em; color: var(--muted-2); text-transform: uppercase; }
.nav-mid { display: flex; align-items: center; gap: 1px; flex: 1; margin-left: 16px; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > button {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 14px/1 var(--font); color: var(--ink-2);
  background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 9px;
}
.nav-item > a:hover, .nav-item > button:hover { background: var(--line-3); color: var(--ink); }
.nav-item .chev { width: 11px; height: 11px; opacity: .45; }
.menu {
  position: absolute; top: calc(100% + 5px); left: 0; min-width: 216px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-lift); padding: 6px; display: none;
}
.nav-item:hover .menu, .nav-item:focus-within .menu { display: block; }
.menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.menu a img { width: 15px; height: 15px; object-fit: contain; }
.menu a:hover { background: var(--line-3); color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 8px; flex: none; }

/* ═══ buttons ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14.5px/1 var(--font); padding: 11px 18px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(27,52,199,.28); }
.btn-primary:hover { background: var(--brand-deep); color: #fff; box-shadow: 0 4px 14px -4px rgba(47,84,255,.55); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--line-3); color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink-2); padding-inline: 10px; }
.btn-quiet:hover { background: var(--line-3); color: var(--ink); }
.btn-sm { padding: 8px 13px; font-size: 13.5px; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn img { width: 15px; height: 15px; object-fit: contain; flex: none; }

/* ═══ sections + panels ═══ */
section { padding: 68px 0; }
section.tight { padding: 44px 0; }
section.paper { background: var(--paper); border-block: 1px solid var(--line); }
.sec-head { max-width: 720px; margin-bottom: 30px; }
.sec-head .eyebrow { margin-bottom: 11px; }
.sec-head h2 { margin-bottom: 12px; }

/* panel — cardBase: white, r19, hairline, soft shadow */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.panel-pad { padding: 26px 28px; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line-2); }
.panel-head h3 { flex: none; }
.panel-head .note { font-size: 14px; color: var(--muted); }

/* row list — the App Home "Waiting on you" pattern */
.rows { display: block; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 24px; border-bottom: 1px solid var(--line-2);
}
.row:last-child { border-bottom: 0; }
.row .rt { flex: 1; min-width: 0; }
.row .rt b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.row .rt span { display: block; font-size: 13px; color: var(--muted); }
.row .rr { flex: none; font: 600 13.5px/1 var(--mono); color: var(--ink-2); }

/* stat tiles — flat tinted blocks, no border (App Home "Run health") */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { border-radius: var(--r); padding: 18px 20px; background: var(--line-3); }
.tile .v { font: 700 30px/1.05 var(--mono); letter-spacing: -.045em; color: var(--ink); }
.tile .l { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.tile.b { background: var(--brand-wash); } .tile.b .v { color: var(--brand); }
.tile.g { background: var(--green-wash); } .tile.g .v { color: var(--green); }
.tile.p { background: var(--purple-wash); } .tile.p .v { color: var(--purple); }
.tile.a { background: var(--amber-wash); } .tile.a .v { color: var(--amber); }
.tile.k { background: var(--pink-wash); }  .tile.k .v { color: var(--pink); }

/* ═══ hero ═══ */
.hero { padding: 60px 0 44px; }
.hero-grid { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 44px; align-items: center; }
.hero h1 { margin: 16px 0 16px; }
.hero h1 .accent { color: var(--brand); }
.hero .lede { margin-bottom: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-note { margin-top: 14px; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hero-note img { opacity: .55; }
.typed { font: 500 13.5px/1.5 var(--mono); color: var(--ink-2); margin-top: 14px; min-height: 20px; }
.typed .caret { display: inline-block; width: 7px; background: var(--brand); color: transparent; animation: blink 1.05s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ═══ product mockup — the canvas, rendered in its own grammar ═══ */
.mock {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-lift); overflow: hidden;
}
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); background: var(--paper-2); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DDE1EE; }
.mock-bar .t { margin-left: 8px; font: 500 11.5px/1 var(--mono); color: var(--muted); }
.mock-bar .z { margin-left: auto; font: 600 10px/1 var(--mono); letter-spacing: .1em; color: var(--muted-2); }
.mock-body {
  padding: 18px 16px;
  background-color: #FBFBFD;
  background-image: radial-gradient(#DFE3EF 1px, transparent 1px);
  background-size: 18px 18px;
}
.lane { border-radius: var(--r); padding: 12px 11px 14px; align-self: start; }
.lane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lane-head .n { width: 19px; height: 19px; border-radius: 6px; background: var(--fam-grad); color: #fff; display: grid; place-items: center; font: 700 10px/1 var(--mono); }
.lane-head b { font-size: 13px; font-weight: 700; letter-spacing: -.025em; color: var(--fam); }
/* node card — 348 wide at full size; scales down here */
.node {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 11px 9px 13px; box-shadow: 0 1px 2px rgba(16,24,39,.05);
  margin-bottom: 8px;
}
.node::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--fam); }
.node .app { position: absolute; top: -7px; left: 13px; font: 600 8.5px/1 var(--mono); letter-spacing: .05em; color: var(--muted-2); background: #FBFBFD; padding: 0 4px; }
.node .nb { flex: 1; min-width: 0; }
.node .ttl { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.node .who { display: block; font: 500 9.5px/1.4 var(--mono); color: var(--muted-2); margin-top: 2px; }
.connector { height: 12px; margin-left: 26px; border-left: 2px dotted #C9CEE0; }

/* ═══ benefit block ═══ */
.benefit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); }
.benefit .b-main { padding: 30px 32px; }
.benefit .b-side { padding: 30px 32px; border-left: 1px solid var(--line-2); background: var(--paper-2); }
.benefit h3 { font-size: clamp(22px, 2.2vw, 29px); letter-spacing: -.04em; margin: 12px 0 12px; }
.benefit p { color: var(--ink-2); }
.b-proof { background: var(--fam-tint); border-radius: var(--r); padding: 15px 17px; margin-bottom: 16px; }
.b-proof .v { font: 700 27px/1.05 var(--mono); letter-spacing: -.05em; color: var(--fam); }
.b-proof .l { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
ul.ticks { list-style: none; display: grid; gap: 9px; }
ul.ticks li { position: relative; padding-left: 23px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
ul.ticks li::before {
  content: ""; position: absolute; left: 1px; top: 6px; width: 12px; height: 8px;
  border-left: 2px solid var(--fam, var(--green)); border-bottom: 2px solid var(--fam, var(--green));
  transform: rotate(-45deg); border-radius: 1px;
}

/* ═══ grids ═══ */
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g6 { grid-template-columns: repeat(6, 1fr); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 22px 24px; transition: transform .15s, box-shadow .15s; }
.card.lift:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
.card h4 { margin-bottom: 7px; }
.card p { color: var(--ink-2); font-size: 14.5px; }
.card .disc, .card .plate { margin-bottom: 14px; }

/* ═══ "same work, two ways" bars — the App Home comparison pattern ═══ */
.bars { display: grid; gap: 18px; }
.bar-row .bl { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.bar-row .bl b { font-size: 15px; font-weight: 600; }
.bar-row .bl .v { font: 700 15px/1 var(--mono); letter-spacing: -.02em; }
.bar-row .bl .n { font-size: 13.5px; color: var(--muted); }
.bar-track { height: 10px; border-radius: 99px; background: var(--line-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: #C9CEE0; }
.bar-fill.brand { background: var(--brand); }
.conclusion { margin-top: 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.conclusion .big { font: 700 clamp(26px,3vw,34px)/1.05 var(--mono); letter-spacing: -.05em; color: var(--ink); }
.conclusion .rest { font-size: 15px; color: var(--ink-2); }

/* ═══ table ═══ */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th, .tbl td { text-align: left; padding: 14px 20px; font-size: 14.5px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl thead th { font: 700 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); background: var(--paper-2); }
.tbl thead th.us { color: var(--brand); }
.tbl thead th .h { display: inline-flex; align-items: center; gap: 7px; }
.tbl thead th img { width: 15px; height: 15px; object-fit: contain; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.dim { color: var(--ink-2); font-weight: 500; width: 26%; }
.tbl td.us { background: var(--brand-wash); color: var(--ink); font-weight: 500; }
.tbl td.them { color: var(--muted); }
.tbl-scroll { overflow-x: auto; border-radius: var(--r-card); }

/* ═══ pricing ═══ */
.plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.plan { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 22px 18px; position: relative; }
.plan.popular { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash), var(--sh-card); }
.plan .flag { position: absolute; top: -10px; left: 18px; }
.plan .pn { font-size: 15.5px; font-weight: 700; letter-spacing: -.03em; }
.plan .pp { font: 700 27px/1.05 var(--mono); letter-spacing: -.055em; margin: 11px 0 2px; color: var(--ink); }
.plan .pp.todo { font-size: 17px; letter-spacing: -.01em; color: var(--amber); }
.plan .pu { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.plan .pi { font-size: 13.5px; color: var(--ink-2); margin: 12px 0; }
.plan .pb { font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--fam-tint); border-radius: var(--r-sm); padding: 10px 11px; margin-bottom: 15px; line-height: 1.4; }
.plan ul.ticks { margin-bottom: 18px; gap: 8px; } .plan ul.ticks li { font-size: 13.5px; padding-left: 21px; }
.plan .btn { margin-top: auto; width: 100%; }

/* ═══ download ═══ */
.dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dl .card { display: flex; flex-direction: column; padding: 22px; }
.dl .os { display: flex; align-items: center; gap: 12px; margin: 12px 0 14px; }
.dl .os .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--line-3); border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.dl .os .ico img { width: 20px; height: 20px; object-fit: contain; }
.dl .os h4 { margin: 0; }
.dl .os .k { font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
.dl .rows2 { border-top: 1px solid var(--line-2); margin-bottom: 14px; }
.dl .r2 { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.dl .r2 span:last-child { color: var(--muted); font: 500 12px/1.4 var(--mono); text-align: right; }
.dl .sha { font: 400 11px/1.4 var(--mono); color: var(--muted-2); margin-top: 9px; word-break: break-all; }

/* ═══ terminal ═══ */
.term { background: #0E1120; border: 1px solid #1E2138; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-lift); }
.term .bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #151830; border-bottom: 1px solid #1E2138; }
.term .bar i { width: 9px; height: 9px; border-radius: 50%; background: #333857; }
.term .bar .t { margin-left: 8px; font: 500 11.5px/1 var(--mono); color: #7E87B0; flex: 1; }
.term .copy { background: #232748; border: 0; color: #A9B2DA; font: 500 11px/1 var(--mono); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.term .copy:hover { background: #2E3360; color: #fff; }
.term pre { padding: 17px; font: 400 13px/1.75 var(--mono); color: #D4D9F2; overflow-x: auto; }
.term pre .c { color: #666E9B; }

/* ═══ steps ═══ */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.step { background: var(--paper); padding: 17px 22px; display: grid; grid-template-columns: 38px 1fr; gap: 15px; align-items: start; }
.step .n { width: 28px; height: 28px; border-radius: 9px; background: var(--fam-tint, var(--brand-wash)); color: var(--fam, var(--brand)); display: grid; place-items: center; font: 700 11px/1 var(--mono); }
.step h4 { margin-bottom: 3px; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* ═══ FAQ ═══ */
.faq { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 46px 18px 24px; font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 24px; width: 8px; height: 8px; border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2); transform: rotate(45deg); transition: transform .18s; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .a { padding: 0 46px 20px 24px; color: var(--ink-2); font-size: 15px; }

/* ═══ CTA band ═══ */
.band { background: var(--ink); border-radius: var(--r-card); padding: 44px 40px; text-align: center; }
.band h2 { color: #fff; margin-bottom: 10px; }
.band p { color: #98A0BC; max-width: 560px; margin: 0 auto 22px; font-size: 16px; }
.band .btn-ghost { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.18); }
.band .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ═══ needs-input flag ═══ */
.needs {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--amber-wash); border: 1px solid var(--amber-line);
  border-radius: var(--r); padding: 13px 16px; font-size: 14px; color: #8A5418; margin: 18px 0;
}
.needs b { font: 700 10px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; flex: none; }

/* ═══ footer ═══ */
footer.site { background: var(--paper); border-top: 1px solid var(--line); padding: 48px 0 28px; margin-top: 8px; }
.fgrid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 28px; }
.fgrid h5 { font: 700 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.fgrid a { display: block; font-size: 14px; color: var(--ink-2); padding: 5px 0; }
.fgrid a:hover { color: var(--brand); }
.fbrand p { font-size: 13.5px; color: var(--muted); margin-top: 10px; max-width: 250px; }
.fsocial { display: flex; gap: 8px; margin-top: 14px; }
.fsocial a { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; padding: 0; }
.fsocial a:hover { background: var(--line-3); }
.fsocial svg { width: 14px; height: 14px; fill: var(--muted); }
.fsocial img { width: 14px; height: 14px; object-fit: contain; }
.fbot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }

/* ═══ reveal (JS-gated so it degrades to visible) ═══ */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* ═══ responsive ═══ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .plans { grid-template-columns: repeat(3, 1fr); }
  .dl, .g4 { grid-template-columns: repeat(2, 1fr); }
  .g6 { grid-template-columns: repeat(4, 1fr); }
  .fgrid { grid-template-columns: repeat(3, 1fr); }
  .benefit { grid-template-columns: 1fr; }
  .benefit .b-side { border-left: 0; border-top: 1px solid var(--line-2); }
}
@media (max-width: 720px) {
  .nav-mid { display: none; }
  section { padding: 46px 0; }
  .g3, .g2, .plans, .dl, .g4, .tiles { grid-template-columns: 1fr; }
  .plan { padding: 22px; }
  .g6 { grid-template-columns: repeat(3, 1fr); }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .band { padding: 34px 22px; }
  .benefit .b-main, .benefit .b-side { padding: 24px 22px; }
  .logo-strip { gap: 28px; }
  .logo-strip img { height: 32px; }
}

/* ═══ download: per-architecture build rows ═══ */
.dl .dlc { padding: 20px; }
.builds { display: grid; gap: 6px; margin: 4px 0 10px; }
.build {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--line-3); border: 1px solid transparent;
}
.build .bt { flex: 1; min-width: 0; }
.build .bt b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.018em; }
.build .bt span { display: block; font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.build .bs { font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); flex: none; }
.build.live { background: var(--brand-wash); border-color: #C9DCFA; color: var(--ink); }
.build.live:hover { background: #E2E8FF; }
.build.live .bd {
  flex: none; font: 600 12.5px/1 var(--font); color: #fff; background: var(--brand);
  padding: 8px 13px; border-radius: 8px;
}
.build.live:hover .bd { background: var(--brand-deep); }
.dl .sha { display: flex; gap: 8px; align-items: baseline; }
.dl .sha span { font-weight: 700; letter-spacing: .1em; color: var(--muted); flex: none; }

/* ═══ announcement bar — Manus keeps one thin line above the fold ═══ */
.announce {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 20px; background: var(--paper); border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2); text-align: center;
}
.announce b { color: var(--brand); font-weight: 600; white-space: nowrap; }
.announce:hover { background: var(--line-3); color: var(--ink-2); }

/* ═══ centred prompt hero ═══ */
.hero-c { padding: 76px 0 60px; }
.hero-c-in { max-width: 760px; margin: 0 auto; text-align: center; }
.hero-c h1 { margin: 16px 0 18px; font-size: clamp(38px, 5.4vw, 62px); }
.hero-c .lede { max-width: 620px; margin: 0 auto 34px; }

/* the ask box */
.ask {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--sh-lift); padding: 6px 6px 6px; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.ask:focus-within { border-color: #C9DCFA; box-shadow: 0 0 0 4px var(--brand-wash), var(--sh-lift); }
.ask textarea {
  display: block; width: 100%; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--ink);
  font: 400 17px/1.5 var(--font); padding: 16px 16px 8px;
  min-height: 62px; max-height: 200px;
}
.ask textarea::placeholder { color: var(--muted-2); }
.ask-bar { display: flex; align-items: center; gap: 12px; padding: 6px 8px 8px 10px; }
.ask-plus {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted); font-size: 17px; line-height: 1; flex: none;
}
.ask-hint { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted-2); line-height: 1.35; }

/* suggestion pills */
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 20px; }
.pills .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 16px 9px 11px; cursor: pointer;
  font: 500 14px/1 var(--font); color: var(--ink);
  transition: background .15s, border-color .15s, transform .12s;
}
.pills .pill:hover { background: var(--line-3); border-color: #D8DCEC; }
.pills .pill:active { transform: translateY(1px); }
.pills .pill img { width: 17px; height: 17px; object-fit: contain; flex: none; }

@media (max-width: 720px) {
  .hero-c { padding: 44px 0 40px; }
  .ask textarea { font-size: 16px; padding: 14px 12px 6px; }
  .ask-bar { flex-wrap: wrap; }
  .ask-hint { order: 3; flex-basis: 100%; }
  .announce { font-size: 12.5px; gap: 7px; }
}

/* a terminal block for something not shipped yet reads as a preview, not an instruction */
.term.soon pre { opacity: .55; }
.term .chip.warn { margin-left: auto; }

/* ═══ comparison pages ═══ */
.vs { display: inline-flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vs .vs-us { font-size: 19px; font-weight: 800; letter-spacing: -.04em; color: var(--brand); }
.vs .vs-them { font-size: 19px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.vs .vs-x { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.vs img { width: 30px; height: 30px; object-fit: contain; }
.vs.sm { gap: 9px; justify-content: flex-start; }
.vs.sm .vs-us, .vs.sm .vs-them { font-size: 16px; }
.vs.sm img { width: 22px; height: 22px; }

.q { font: 600 15px/1.4 var(--mono); color: var(--muted-2); margin-bottom: 10px; }
.punch { font-size: clamp(19px, 2.1vw, 26px); font-weight: 700; letter-spacing: -.035em; line-height: 1.3; color: var(--ink); }

.card .kicker {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-2);
  font-size: 14.5px; font-weight: 600; color: var(--fam, var(--ink)); line-height: 1.45;
}

.better { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.better .bn { font: 700 13px/1 var(--mono); color: var(--muted-2); padding-top: 4px; letter-spacing: .04em; }
.better h4 { margin-bottom: 5px; }
.better p { font-size: 14.5px; color: var(--ink-2); }

.whenc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 24px 26px; }
.whenc.mine { border-color: #C9DCFA; box-shadow: 0 0 0 3px var(--brand-wash), var(--sh-card); }
.whenh { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.whenh img { width: 20px; height: 20px; object-fit: contain; }
.whenh h4 { margin: 0; }
.whenc .wm { font-size: 15px; font-weight: 800; letter-spacing: -.04em; color: var(--brand); }
.whenc.mine ul.ticks li::before { border-color: var(--brand); }
.whenc ul.ticks li::before { border-color: var(--muted-2); }
.whens { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted); font-style: italic; }
a.mark-chip:hover { background: var(--line-3); color: var(--ink); }

@media (max-width: 720px) { .better { grid-template-columns: 32px 1fr; } }

/* ═══ delegation diagram — BobCode commands Claude Code and Codex ═══ */
.cmd {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 30px 26px 22px; text-align: center;
  background-image: radial-gradient(#EDEFF7 1px, transparent 1px); background-size: 18px 18px;
}
.cmd-parent {
  display: inline-flex; align-items: center; gap: 13px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 20px 13px 15px; box-shadow: var(--sh-card); position: relative;
}
.cmd-parent b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.035em; }
.cmd-parent span { display: block; font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.cmd-kids { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.cmd-kid { display: flex; flex-direction: column; align-items: center; }
.cmd-wire { display: block; width: 2px; height: 34px; background: repeating-linear-gradient(180deg, #C9CEE0 0 5px, transparent 5px 10px); }
.cmd-node {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 14px; box-shadow: 0 1px 2px rgba(16,24,39,.05);
}
.cmd-node img { flex: none; }
.cmd-node b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.025em; }
.cmd-node span:not(.chip) { display: block; font: 500 11px/1.4 var(--mono); color: var(--muted); }
.cmd-node .chip { flex: none; font-size: 9.5px; letter-spacing: .12em; }
.cmd-cap { margin-top: 22px; font: 500 12px/1.4 var(--mono); color: var(--muted-2); }
@media (max-width: 620px) { .cmd-kids { gap: 0; flex-direction: column; align-items: center; } }

/* ═══ harness mechanisms ═══ */
.mech {
  display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 22px 24px;
}
.mech h4 { margin-bottom: 7px; }
.mech p { font-size: 14.5px; color: var(--ink-2); }
.mech .limit {
  margin-top: 12px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--amber-wash); border: 1px solid var(--amber-line);
  font-size: 13px; color: #8A5418; line-height: 1.45;
}
.mech .limit b {
  display: inline-block; margin-right: 8px;
  font: 700 9.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}

/* family chips — the design system's six action families */
.fam-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fam-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--fam-tint); border-radius: var(--r-pill); padding: 6px 13px 6px 7px;
  font: 600 13px/1 var(--font); color: var(--fam);
}
.fam-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--fam-grad); color: #fff; display: grid; place-items: center;
}
.fam-dot svg { width: 12px; height: 12px; }
@media (max-width: 720px) { .mech { grid-template-columns: 1fr; gap: 12px; } }

/* ══════════════════════════════════════════════════════════════════════════
   QwenWork-architecture homepage.
   Structure and motion follow qwenwork.cn; every colour, face and word here is
   ours. Nothing below uses their assets.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hero ── */
.qw-hero { position: relative; padding: 78px 0 30px; overflow: hidden; }
.qw-hero .wrap { position: relative; }
.qw-hero-in { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.qw-hero h1 { margin: 16px 0 18px; font-size: clamp(42px, 6vw, 74px); line-height: 1.03; }
.qw-hero h1 .accent { color: var(--green); }
.qw-hero .lede { max-width: 600px; margin: 0 auto 30px; }

/* floating cards — parallax on scroll, slow idle drift */
.float { position: absolute; top: 26%; z-index: 1; pointer-events: none; will-change: transform; }
.float-left { left: 0; }
.float-right { right: 0; top: 40%; }
.float-in { animation: qwdrift 7s ease-in-out infinite; }
.float-right .float-in { animation-duration: 8.5s; animation-delay: -2s; }
@keyframes qwdrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-card {
  width: 214px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; padding: 18px; box-shadow: var(--sh-lift);
}
.float-chip { display: block; width: 32px; height: 32px; border-radius: 10px; background: var(--fam-tint); margin-bottom: 12px; }
.float-t { margin-top: 5px; font-size: 17px; font-weight: 800; letter-spacing: -.035em; line-height: 1.25; color: var(--ink); }
.float-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font: 700 17px/1 var(--mono); letter-spacing: -.04em; }
.float-bars { margin-top: 14px; display: grid; gap: 7px; }
.float-bars span { display: flex; align-items: center; gap: 8px; }
.float-bars i { width: 18px; height: 18px; border-radius: 50%; background: var(--fam); opacity: .9; flex: none; }
.float-bars b { height: 5px; border-radius: 99px; background: var(--line); }
@media (max-width: 1180px) { .float { display: none; } }

/* ── product shot: rises and scales as it enters ── */
.qw-shot-wrap { padding-bottom: 20px; }
.qw-shot {
  max-width: 780px; margin: 0 auto;
  transform: translateY(28px) scale(.965); opacity: .001;
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease;
  will-change: transform;
}
.qw-shot.in { transform: none; opacity: 1; }

/* ── 01–06 rail ── */
.rail-sec { background: var(--ink); padding: 84px 0 76px; }
.rail-title { color: #fff; margin-top: 14px; font-size: clamp(28px, 3.4vw, 44px); }
.rail-sub { color: #98A0BC; margin-top: 12px; max-width: 520px; font-size: 16px; }
.rail-hint { margin-top: 22px; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; color: #6B739C; }
.rail {
  display: flex; gap: 16px; margin-top: 34px; padding-bottom: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* first card lines up with the heading; scroll-padding must match or snap eats it */
  padding-left: calc(max(0px, (100vw - var(--maxw)) / 2) + 24px);
  padding-right: 24px;
  scroll-padding-left: calc(max(0px, (100vw - var(--maxw)) / 2) + 24px);
}
.rail::-webkit-scrollbar { display: none; }
.rail-card {
  flex: none; width: 350px; scroll-snap-align: start;
  background: #F5F6FA; border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column;
}
.rail-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #E1E4EE; }
.rail-n { font: 700 13px/1 var(--mono); color: var(--muted); }
.rail-tag { font-size: 13px; font-weight: 600; color: var(--fam); }
.rail-card h3 { margin: 22px 0 12px; font-size: 25px; line-height: 1.14; letter-spacing: -.04em; color: var(--ink); }
.rail-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.rail-viz { margin-top: auto; padding-top: 26px; }
.rail-viz .disc { margin-bottom: 12px; }
.rail-row { display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.rail-row i { width: 22px; height: 22px; border-radius: 50%; background: var(--fam); opacity: .9; flex: none; }
.rail-row b { height: 5px; border-radius: 99px; background: var(--line); }
@media (max-width: 720px) { .rail-card { width: 82vw; } }

/* ── kit tiles ── */
.kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kit {
  display: block; border-radius: 18px; padding: 24px; color: inherit;
  background: var(--fam-tint); transition: transform .18s ease, box-shadow .18s ease;
}
.kit:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); color: inherit; }
.kit-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--fam); color: #fff; font: 700 12px/1 var(--mono); margin-bottom: 34px; }
.kit-name { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.kit-kicker { display: block; margin-top: 5px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.kit-bars { display: block; margin-top: 16px; }
.kit-bars i { display: block; height: 4px; border-radius: 99px; background: var(--fam); opacity: .25; margin-bottom: 6px; }
@media (max-width: 900px) { .kits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .kits { grid-template-columns: 1fr; } }

/* ── dark closing wall ── */
.wall { position: relative; background: var(--ink); padding: 88px 0 74px; overflow: hidden; }
.wall-rules { position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 26px); }
.wall .wrap { position: relative; }
.wall h2 { text-align: right; color: #fff; font-size: clamp(34px, 5.6vw, 74px); line-height: 1.04; letter-spacing: -.05em; }
.wall h2 .accent { color: var(--green); }
.wall-links { margin-top: 54px; border-top: 1px solid rgba(255,255,255,.14); }
.wall-link {
  display: flex; align-items: center; gap: 22px; padding: 19px 6px;
  border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; transition: background .18s ease;
}
.wall-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.wall-n { font: 500 12px/1 var(--mono); color: #6B739C; flex: none; }
.wall-l { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.wall-arrow { margin-left: auto; color: #98A0BC; font-size: 19px; transition: transform .2s ease; }
.wall-link:hover .wall-arrow { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .float-in { animation: none; }
  .qw-shot { transition: none; transform: none; opacity: 1; }
  .float { transform: none !important; }
}

/* ══ the BobCode window in the hero — the run log scrolls inside the frame ══ */
.app { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-lift); }
.app-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line-2); }
.app-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DDE1EE; }
.app-tab { margin-left: 6px; padding: 4px 11px; border-radius: 7px; font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.app-tab.on { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.app-right { margin-left: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--muted-2); }
.app-body { display: grid; grid-template-columns: 178px 1fr; min-height: 380px; }
.app-side { border-right: 1px solid var(--line-2); padding: 14px 12px; background: var(--paper-2); }
.ap-brand { font-size: 14px; font-weight: 900; letter-spacing: -.045em; margin-bottom: 14px; padding-left: 6px; }
.ap-nav { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.ap-nav svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.ap-nav.on { background: #EDF0FF; color: var(--brand); }
.ap-label { margin: 14px 0 6px; padding-left: 6px; font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.ap-recent { display: block; padding: 5px 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-scroll { flex: 1; overflow-y: auto; max-height: 300px; padding: 18px 20px; scrollbar-width: thin; }
.app-scroll::-webkit-scrollbar { width: 6px; }
.app-scroll::-webkit-scrollbar-thumb { background: #DDE1EE; border-radius: 99px; }
.ap-greet { font-size: 17px; line-height: 1.4; color: var(--muted); margin-bottom: 16px; }
.ap-greet b { color: var(--ink); font-weight: 800; letter-spacing: -.035em; }
.ap-step { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 7px; }
.ap-t { flex: 1; font-size: 13px; font-weight: 600; letter-spacing: -.015em; }
.ap-s { flex: none; font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; }
.ap-done { background: var(--green-wash); color: #0B5E33; }
.ap-approved { background: var(--brand-wash); color: #1B4FAF; }
.ap-fail { background: #FDF0ED; color: #D9432F; }
.ap-run { background: var(--amber-wash); color: #8A5418; }
.ap-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); padding: 2px 4px 10px; }
.app .ask { border-radius: 0; border: 0; border-top: 1px solid var(--line-2); box-shadow: none; }
.app .ask:focus-within { box-shadow: none; }
.app .ask textarea { font-size: 15px; min-height: 46px; padding: 12px 14px 4px; }
@media (max-width: 720px) { .app-body { grid-template-columns: 1fr; } .app-side { display: none; } }

/* ══ the delivery card: hover opens the folder and the files fan out ══ */
.float-folder .float-card { width: 236px; }
.folder { position: relative; height: 128px; margin-top: 34px; }
.folder-back, .folder-front {
  position: absolute; left: 24px; right: 24px; bottom: 0; height: 58px; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(160deg, #35C489, var(--green));
}
.folder-back { bottom: 10px; height: 62px; opacity: .55; }
.folder-front { z-index: 3; }
.folder-doc {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  width: 96px; padding: 8px 9px; border-radius: 8px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 6px 14px -8px rgba(16,24,39,.4);
  transform: translate(-50%, 14px) rotate(0deg) scale(.9); opacity: 0;
  transition: transform .42s cubic-bezier(.2,1.3,.4,1), opacity .3s ease;
}
.folder-doc b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; color: #fff; font: 700 9px/1 var(--mono); }
.folder-doc em { font: 700 9px/1 var(--mono); letter-spacing: .1em; color: var(--muted); margin-left: 5px; font-style: normal; }
.folder-doc i { display: block; height: 3px; border-radius: 9px; background: var(--line); margin-top: 5px; }
.folder-doc i:last-child { width: 62%; }
.doc-w b { background: #2B5CE6; } .doc-p b { background: #E0631A; } .doc-x b { background: #0E9E76; }
.float-folder:hover .folder-doc { opacity: 1; }
.float-folder:hover .doc-w { transform: translate(-92%, -22px) rotate(-15deg) scale(1); }
.float-folder:hover .doc-p { transform: translate(-50%, -34px) rotate(-1deg) scale(1); }
.float-folder:hover .doc-x { transform: translate(-8%, -20px) rotate(14deg) scale(1); }
.float-folder:hover .folder-front { transform: rotateX(-16deg); transform-origin: bottom; }
.folder-front { transition: transform .38s cubic-bezier(.2,1.2,.4,1); }
.float { pointer-events: auto; }
.float-card { pointer-events: auto; }

/* ══ capability visuals ══ */
.viz { position: relative; border-radius: 14px; padding: 16px; min-height: 168px; overflow: hidden; background: rgba(255,255,255,.62); }
.tone-dark .viz { background: rgba(255,255,255,.06); }
.viz-models { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; place-items: center; }
.viz-models .vm { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line);
  animation: vmpulse 3.6s ease-in-out infinite; animation-delay: var(--d); }
.tone-dark .viz-models .vm { background: rgba(255,255,255,.9); border-color: transparent; }
@keyframes vmpulse { 0%,72%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,84,255,0); } 12% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(47,84,255,.14); } }
.viz-del { display: grid; justify-items: center; gap: 4px; }
.vd-parent { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 8px 13px 8px 9px; font-size: 13px; font-weight: 700; letter-spacing: -.025em; }
.vd-wires { display: flex; gap: 74px; height: 26px; }
.vd-wires i { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, #C9CEE0 0 4px, transparent 4px 9px); }
.vd-kids { display: flex; gap: 10px; }
.vd-kid { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font-size: 11.5px; font-weight: 600; }
.viz-conn { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; place-items: center; }
.viz-conn .vc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fff; border: 1px solid var(--line);
  animation: vcin .5s both cubic-bezier(.2,1.3,.4,1); animation-delay: var(--d); }
@keyframes vcin { from { opacity: 0; transform: translateY(9px) scale(.85); } to { opacity: 1; transform: none; } }
.viz-retry { display: grid; gap: 7px; align-content: start; }
.vr { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; font-weight: 600; }
.vr i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--green); }
.vr.bad { color: #D9432F; } .vr.bad i { background: #D9432F; }
.vr.bad em { margin-left: auto; font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); font-style: normal;
  animation: vrspin 1.8s linear infinite; }
@keyframes vrspin { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.vr.ok2 { animation: vrfade 4s ease-in-out infinite; } .vr.ok3 { animation: vrfade 4s ease-in-out infinite .5s; }
@keyframes vrfade { 0%,35% { opacity: .3; transform: translateY(5px); } 55%,100% { opacity: 1; transform: none; } }
.viz-console { display: grid; gap: 7px; align-content: start; }
.vk { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; font-weight: 600;
  animation: vkin 5s ease-in-out infinite; animation-delay: var(--d); }
.vk i { width: 8px; height: 8px; border-radius: 50%; background: var(--fam); flex: none; }
@keyframes vkin { 0%,8% { opacity: .28; } 20%,100% { opacity: 1; } }
.viz-local { display: grid; justify-items: center; gap: 12px; align-content: center; }
.vl-machine { display: flex; gap: 6px; align-items: center; justify-content: center; width: 132px; height: 66px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.vl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fam); opacity: .85; animation: vlblink 2.4s ease-in-out infinite; }
.vl-dot:nth-child(2) { animation-delay: .3s; } .vl-dot:nth-child(3) { animation-delay: .6s; }
@keyframes vlblink { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.vl-shield { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fam); color: #fff; }
.vl-shield svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.vl-cap { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tone-dark .vl-cap { color: #8A92A8; }

/* card tones, the way the reference alternates them */
.rail-card.tone-tint { background: var(--fam-tint); }
.rail-card.tone-light { background: #F5F6FA; }
.rail-card.tone-dark { background: #1A1D33; }
.rail-card.tone-dark h3 { color: #fff; }
.rail-card.tone-dark p { color: #98A0BC; }
.rail-card.tone-dark .rail-head { border-bottom-color: rgba(255,255,255,.14); }
.rail-card.tone-dark .rail-n { color: #6B739C; }

/* ══════════════════════════════════════════════════════════════════════════
   Bob suite switcher — LOCAL ONLY (BOBSUITE=1). Not deployed.
   ══════════════════════════════════════════════════════════════════════════ */
.switcher { display: inline-flex; gap: 2px; padding: 4px; margin: 0 auto 14px; border-radius: 13px; background: #EAECF4; }
.qw-shot:has(.switcher) { text-align: center; }
.suite { text-align: left; }
.sw-tab {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 0; background: transparent; border-radius: 10px; padding: 8px 15px;
  font: 600 13.5px/1 var(--font); color: var(--muted); transition: background .16s, color .16s, box-shadow .16s;
}
.sw-tab .sw-ico { display: grid; place-items: center; width: 15px; height: 15px; }
.sw-tab svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.sw-tab:hover { color: var(--ink); }
.sw-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,39,.10); }
.pane { display: none; }
.pane.on { display: block; animation: swin .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes swin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* shared extras */
.app-chip { padding: 3px 9px; border-radius: 7px; background: var(--line-3); font: 500 10.5px/1.5 var(--mono); color: var(--muted); }
.ap-new { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.ap-new svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ap-nav .beta { margin-left: auto; font: 700 8px/1 var(--mono); letter-spacing: .1em; color: var(--brand); background: var(--brand-wash); padding: 2px 4px; border-radius: 4px; font-style: normal; }
.ws-folder { display: flex; align-items: center; gap: 7px; padding: 5px 6px; font-size: 12px; color: var(--ink-2); }
.ws-folder svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.ws-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 20px; border-radius: 7px; font-size: 11.5px; color: var(--muted); }
.ws-item em { margin-left: auto; font: 500 9.5px/1 var(--mono); font-style: normal; }
.ws-item.on { background: var(--line-3); color: var(--ink); }
.ap-user { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.ap-user .av { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); flex: none; }
.ap-user b { display: block; font-size: 11.5px; } .ap-user em { font: 500 10px/1.4 var(--mono); color: var(--muted); font-style: normal; }
.ap-brand .dot { color: var(--brand); }
.ap-think { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-2); padding-bottom: 12px; }
.ap-think svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.code-tabs { display: flex; gap: 18px; padding: 10px 20px 0; border-bottom: 1px solid var(--line-2); }
.code-tabs span { padding-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.code-tabs .on { color: var(--brand); border-bottom-color: var(--brand); }
.code-stats { display: flex; gap: 16px; padding: 8px 20px; border-top: 1px solid var(--line-2); background: var(--paper-2);
  font: 500 10px/1.4 var(--mono); color: var(--muted-2); flex-wrap: wrap; }
.work-body { background: #FBFBFD; background-image: radial-gradient(#DFE3EF 1px, transparent 1px); background-size: 18px 18px; }

/* ── BobVideo: dark editor ── */
.app-dark { background: #0E1120; border-color: #23264A; }
.app-bar.dark { background: #151830; border-bottom-color: #23264A; }
.vb-brand { font-size: 14px; font-weight: 900; letter-spacing: -.04em; color: #fff; }
.vb-count { font: 500 11px/1 var(--mono); color: #7E87B0; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #23264A; margin-left: 10px; }
.seg b { padding: 4px 10px; border-radius: 7px; font: 600 11px/1 var(--font); color: #8A92B8; }
.seg b.on { background: var(--brand); color: #fff; }
.vb-btn { padding: 5px 11px; border-radius: 8px; background: #23264A; color: #AEB6DC; font-size: 11.5px; font-weight: 600; margin-left: 6px; }
.vb-btn.primary { background: var(--brand); color: #fff; }
.video-body { display: grid; grid-template-columns: 168px 1fr 176px; min-height: 288px; }
.v-left { border-right: 1px solid #23264A; padding: 10px; }
.v-tabs { display: flex; gap: 12px; margin-bottom: 10px; }
.v-tabs span { font-size: 11.5px; font-weight: 600; color: #7E87B0; padding-bottom: 5px; border-bottom: 2px solid transparent; }
.v-tabs .on { color: #fff; border-bottom-color: var(--brand); }
.vt { display: block; border: 1px solid #23264A; border-radius: 9px; padding: 7px; margin-bottom: 7px; }
.vt.on { border-color: var(--brand); }
.vt-thumb { display: block; height: 40px; border-radius: 6px; background: linear-gradient(140deg,#20243F,#2B3157); margin-bottom: 6px; }
.vt b { font: 600 11px/1 var(--mono); color: #D4D9F2; } .vt em { float: right; font: 500 10px/1 var(--mono); color: #6B739C; font-style: normal; }
.v-mid { display: flex; flex-direction: column; }
.v-stage { flex: 1; display: grid; place-items: center; padding: 16px; }
.v-canvas { position: relative; width: 100%; max-width: 340px; aspect-ratio: 16/10; border-radius: 10px; background: #EFECE6; border: 4px solid var(--brand); overflow: hidden; }
.v-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px -6px rgba(0,0,0,.3); }
.v-canvas .vn { position: absolute; background: #fff; border-radius: 6px; padding: 5px 7px; font-size: 7.5px; line-height: 1.35; color: #43466A;
  box-shadow: 0 3px 8px -4px rgba(0,0,0,.28); max-width: 92px; animation: vnfloat 5s ease-in-out infinite; }
.vn-0 { left: 6%; top: 16%; } .vn-1 { left: 8%; bottom: 20%; animation-delay: -1.2s; }
.vn-2 { right: 6%; top: 14%; animation-delay: -2.4s; } .vn-3 { right: 8%; bottom: 16%; animation-delay: -3.6s; }
@keyframes vnfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.v-transport { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #23264A; }
.v-play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #23264A; color: #D4D9F2; }
.v-play svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.v-transport b { font: 600 12px/1 var(--mono); color: #fff; } .v-transport em { font: 500 11px/1 var(--mono); color: #6B739C; font-style: normal; }
.v-name { margin-left: auto; font: 500 11px/1 var(--mono); color: #7E87B0; }
.v-right { border-left: 1px solid #23264A; padding: 12px; }
.v-label { font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6B739C; margin-bottom: 10px; }
.vf { display: block; margin-bottom: 10px; }
.vf em { display: block; font: 500 10px/1.4 var(--mono); color: #6B739C; font-style: normal; }
.vf b { display: block; margin-top: 3px; padding: 6px 9px; border: 1px solid #23264A; border-radius: 7px; font: 600 11.5px/1 var(--mono); color: #D4D9F2; }
.v-timeline { position: relative; border-top: 1px solid #23264A; padding: 8px 12px 12px; background: #0B0E1B; }
.v-ruler { display: flex; justify-content: space-between; padding-left: 62px; margin-bottom: 6px; }
.v-ruler span { font: 500 9px/1 var(--mono); color: #4E5578; }
.v-track { position: relative; display: flex; align-items: center; height: 30px; margin-bottom: 5px; }
.v-track em { width: 58px; flex: none; font: 500 10px/1 var(--mono); color: #7E87B0; font-style: normal; }
.v-clip { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; background: linear-gradient(180deg,#2B3157,#232848);
  border: 1px solid #3A4170; font: 600 10px/1 var(--mono); color: #D4D9F2; padding: 6px 8px; }
.v-clip.sel { border-color: var(--brand); }
.v-clip i { display: block; margin-top: 3px; font: 500 9px/1 var(--mono); color: #7E87B0; font-style: normal; }
.v-lane { position: relative; flex: 1; height: 100%; min-width: 0; }
.v-empty { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 500 10px/1 var(--mono); color: #4E5578; }
.v-playhead { position: absolute; top: 22px; bottom: 8px; width: 2px; background: #FF5A5A; }

/* ── BobDesign: slide editor ── */
.design-body { display: grid; grid-template-columns: 118px 1fr 168px; min-height: 300px; }
.d-left { border-right: 1px solid var(--line-2); padding: 12px 10px; background: var(--paper-2); }
.d-page { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.d-page em { font: 500 10px/1 var(--mono); color: var(--muted-2); font-style: normal; }
.d-thumb { flex: 1; height: 40px; border-radius: 5px; background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; }
.d-thumb::before { content: ""; position: absolute; left: 6px; top: 8px; width: 46%; height: 4px; border-radius: 9px; background: #D8DCEC; }
.d-thumb::after { content: ""; position: absolute; left: 6px; top: 17px; width: 66%; height: 3px; border-radius: 9px; background: #E7E9F4; }
.d-page.on .d-thumb { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-wash); }
.d-tools { display: inline-flex; gap: 4px; margin-left: 8px; }
.d-tool { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--line-3); color: var(--ink-2); }
.d-tool svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.d-stage { display: grid; place-items: center; padding: 20px; background: #EFF0F6; }
.d-slide { position: relative; width: 100%; max-width: 400px; aspect-ratio: 16/9; background: #fff; border-radius: 10px;
  box-shadow: 0 10px 30px -14px rgba(16,24,39,.4); padding: 22px 24px; display: flex; flex-direction: column; }
.d-eyebrow { font: 700 8px/1 var(--mono); letter-spacing: .16em; color: var(--muted-2); }
.d-title { margin-top: 8px; font-size: 20px; font-weight: 800; letter-spacing: -.04em; line-height: 1.12; color: var(--ink); }
.d-sub { margin-top: 6px; font-size: 9.5px; color: var(--ink-2); }
.d-chart { margin-top: auto; display: flex; align-items: flex-end; gap: 7px; height: 46px; }
.d-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--brand); opacity: .82;
  animation: dgrow 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * .16s); transform-origin: bottom; }
@keyframes dgrow { 0%,100% { transform: scaleY(.72); } 50% { transform: scaleY(1); } }
.d-handle { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #fff; border: 1.5px solid var(--brand); }
.d-h1 { left: -4px; top: -4px; } .d-h2 { right: -4px; top: -4px; }
.d-h3 { left: -4px; bottom: -4px; } .d-h4 { right: -4px; bottom: -4px; }
.d-right { border-left: 1px solid var(--line-2); padding: 12px; background: var(--paper-2); }
.d-field { display: block; margin-bottom: 11px; }
.d-field em { display: block; font: 500 10px/1.4 var(--mono); color: var(--muted); font-style: normal; }
.d-field b { display: block; margin-top: 3px; padding: 6px 9px; background: #fff; border: 1px solid var(--line); border-radius: 7px; font-size: 11.5px; }
.d-swatches { display: flex; gap: 5px; margin-top: 5px; }
.d-swatches i { width: 20px; height: 20px; border-radius: 6px; }
.d-swatches i:first-child { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--brand); }

@media (max-width: 860px) {
  .video-body, .design-body { grid-template-columns: 1fr; }
  .v-left, .v-right, .d-left, .d-right { display: none; }
  .switcher { flex-wrap: wrap; }
}

/* ══ seamless switching ═══════════════════════════════════════════════════
   The window never changes: same frame, same height, same colour on every
   tab. Only the contents cross-fade, and nothing moves.
   ══════════════════════════════════════════════════════════════════════════ */
.suite-app { text-align: left; }
.suite-stage { position: relative; height: 470px; overflow: hidden; }
.suite-stage .pane {
  position: absolute; inset: 0; display: block;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .26s ease, visibility 0s linear .26s;
  animation: none;
}
.suite-stage .pane.on {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .26s ease, visibility 0s;
}
/* every pane fills the fixed stage exactly */
.suite-stage .app-body,
.suite-stage .video-body,
.suite-stage .design-body,
.suite-stage .work-body { height: 100%; min-height: 0; }
.suite-stage .app-body { grid-template-rows: 100%; }
.suite-stage .app-main { min-height: 0; }
.suite-stage .app-scroll { flex: 1; max-height: none; min-height: 0; }
.suite-stage .work-body { overflow: hidden; padding: 14px 16px; }
.suite-stage .app-side, .suite-stage .v-left, .suite-stage .v-right,
.suite-stage .d-left, .suite-stage .d-right { overflow: hidden; }

/* the title bar keeps its geometry; only its label swaps */
.bar-set { display: none; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.bar-set.on { display: flex; }

/* BobVideo in the same light surface as the rest — colour must not change */
.video-body { display: grid; grid-template-columns: 158px 1fr 168px; background: var(--paper); }
.v-left { border-right: 1px solid var(--line-2); padding: 10px; background: var(--paper-2); }
.v-tabs span { color: var(--muted); }
.v-tabs .on { color: var(--brand); border-bottom-color: var(--brand); }
.vt { border: 1px solid var(--line); background: #fff; }
.vt.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-wash); }
.vt-thumb { background: linear-gradient(140deg, #EEF1F8, #DFE4F3); }
.vt b { color: var(--ink); } .vt em { color: var(--muted); }
.v-stage { background: var(--line-3); }
.v-canvas { background: #fff; border-color: var(--brand); }
.v-canvas .vn { color: var(--ink-2); border: 1px solid var(--line); }
.v-transport { border-top: 1px solid var(--line-2); }
.v-play { background: var(--line-3); color: var(--ink); }
.v-transport b { color: var(--ink); } .v-transport em { color: var(--muted); }
.v-name { color: var(--muted); }
.v-right { border-left: 1px solid var(--line-2); padding: 12px; background: var(--paper-2); }
.v-label { color: var(--muted); }
.vf em { color: var(--muted); }
.vf b { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.v-timeline { border-top: 1px solid var(--line-2); background: var(--paper-2); padding: 8px 12px 10px; }
.v-ruler span { color: var(--muted-2); }
.v-track em { color: var(--muted); }
.v-clip { background: var(--brand-wash); border: 1px solid #C9DCFA; color: #1B4FAF; }
.v-clip.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(47,84,255,.14); }
.v-clip i { color: #4C6BD4; }
.v-empty { color: var(--muted-2); }
.v-playhead { background: var(--pink); }

@media (max-width: 860px) { .suite-stage { height: 560px; } }
@media (max-width: 620px) { .suite-stage { height: 520px; } }
@media (prefers-reduced-motion: reduce) { .suite-stage .pane { transition: none; } }

/* every pane is a column that fills the fixed stage exactly, so no product
   gets its lower chrome (BobVideo's timeline) cut off */
.suite-stage .pane { display: flex; flex-direction: column; }
.suite-stage .app-body,
.suite-stage .video-body,
.suite-stage .design-body,
.suite-stage .work-body { flex: 1; min-height: 0; height: auto; }
.suite-stage .v-timeline { flex: none; }
.suite-stage .v-mid { min-height: 0; }
.suite-stage .v-stage { min-height: 0; padding: 12px; }
.suite-stage .v-list { overflow: hidden; }

/* ── BobVideo layout corrections ───────────────────────────────────────────
   1. The pane must actually stretch: body fills, timeline pins to the bottom.
   2. The preview is sized from its HEIGHT. Sizing a 16/10 box by width forces a
      height taller than the panel, and place-items:center then spills it out of
      both ends — which is what was overlapping the chrome.
   ────────────────────────────────────────────────────────────────────────── */
.suite-stage .pane[data-pane="bobvideo"] { display: grid; grid-template-rows: 1fr auto; }
.suite-stage .pane[data-pane="bobvideo"] .video-body { min-height: 0; height: auto; }
.suite-stage .v-mid { display: flex; flex-direction: column; min-height: 0; }
.suite-stage .v-stage { flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center; }
.suite-stage .v-canvas { height: 100%; width: auto; max-width: 100%; max-height: 100%; }
.suite-stage .v-left, .suite-stage .v-right { min-height: 0; overflow: hidden; }

/* An absolutely-positioned grid with inset:0 and height:auto sizes its rows
   against an indefinite height, so 1fr collapsed to the content height and the
   timeline floated 68px short of the bottom. An explicit height makes it
   definite, and minmax(0,1fr) stops the body's content forcing the row open. */
.suite-stage .pane { height: 100%; }
.suite-stage .pane[data-pane="bobvideo"] { grid-template-rows: minmax(0, 1fr) auto; }

/* Track sizing kept collapsing this pane. Pin its two parts explicitly instead:
   the timeline gets a fixed height at the bottom, the body fills everything
   above it. Deterministic, and immune to fr-track resolution. */
.suite-stage .pane[data-pane="bobvideo"] { display: block; }
.suite-stage .pane[data-pane="bobvideo"] .video-body {
  position: absolute; left: 0; right: 0; top: 0; bottom: 126px; height: auto;
}
.suite-stage .pane[data-pane="bobvideo"] .v-timeline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 126px;
  display: flex; flex-direction: column; justify-content: center;
}
.suite-stage .v-track { height: 26px; margin-bottom: 3px; }

/* ══ BobInvest — the DCF valuation radar ══════════════════════════════════ */
.suite-stage .pane[data-pane="bobinvest"] { display: grid; grid-template-rows: minmax(0,1fr) auto; }
.inv-body { display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.inv-map { position: relative; padding: 26px 14px 30px 34px; border-right: 1px solid var(--line-2); min-width: 0; }
.rd-legend { position: absolute; left: 34px; top: 6px; right: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rd-leg { display: inline-flex; align-items: center; gap: 4px; font: 500 9px/1 var(--mono); color: var(--muted); }
.rd-leg i { width: 6px; height: 6px; border-radius: 50%; }
.rd-as { margin-left: auto; font: 500 8.5px/1 var(--mono); color: var(--muted-2); }
.rd-svg, .rd-pts { position: absolute; inset: 26px 14px 30px 34px; width: auto; height: auto; overflow: visible; }
.rd-fair { stroke: #C9DCFA; stroke-width: .4; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.rd-dot { opacity: .5; }
.rd-dot[data-z="deep"], .rd-pick circle[data-z="deep"] { fill: #12A150; }
.rd-dot[data-z="under"], .rd-pick circle[data-z="under"] { fill: #3DD68C; }
.rd-dot[data-z="fair"], .rd-pick circle[data-z="fair"] { fill: #E0A106; }
.rd-dot[data-z="over"], .rd-pick circle[data-z="over"] { fill: #D9432F; }
.rd-pick { cursor: pointer; }
.rd-pick circle { opacity: .9; stroke: #fff; stroke-width: 1.5; transition: transform .16s ease; transform-origin: center; transform-box: fill-box; }
.rd-pick text { font: 700 8.5px/1 var(--mono); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.rd-pick:hover circle, .rd-pick:focus-visible circle { transform: scale(1.22); }
.rd-pick.on circle { stroke: var(--ink); stroke-width: 2.2; }
.rd-fairlab { position: absolute; top: 20px; transform: translateX(-50%); font: 500 8px/1 var(--mono); color: #8FA8DE; }
.rd-xax { position: absolute; left: 34px; right: 14px; bottom: 16px; display: flex; justify-content: space-between; }
.rd-xax span { font: 500 8.5px/1 var(--mono); color: var(--muted-2); }
.rd-xlab { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 500 8.5px/1 var(--mono); color: var(--muted); }
.rd-ylab { position: absolute; left: 2px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center;
  font: 500 8.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.rd-hint { position: absolute; right: 16px; bottom: 30px; font: 500 8.5px/1 var(--mono); color: var(--muted-2); }

.inv-detail { overflow-y: auto; padding: 14px 16px; background: var(--paper-2); min-height: 0; }
.inv-detail::-webkit-scrollbar { width: 5px; } .inv-detail::-webkit-scrollbar-thumb { background: #DDE1EE; border-radius: 99px; }
.inv-empty { font-size: 12px; line-height: 1.6; color: var(--muted); padding: 40px 6px; text-align: center; }
.iv-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.iv-t { font-size: 19px; font-weight: 900; letter-spacing: -.04em; }
.iv-zone { font: 700 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; color: #fff; }
.iv-score { font: 700 8.5px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--green-wash); color: #0B5E33; }
.iv-sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.iv-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 12px 0; }
.iv-tile { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; }
.iv-tile em { display: block; font: 600 7.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.iv-tile b { display: block; margin-top: 3px; font: 700 14px/1 var(--mono); letter-spacing: -.03em; }
.iv-bar { height: 7px; border-radius: 99px; margin: 12px 0 16px; position: relative;
  background: linear-gradient(90deg,#12A150,#3DD68C,#E0A106,#D9432F); }
.iv-mk { position: absolute; top: -4px; width: 2px; height: 15px; background: var(--ink); border-radius: 2px; }
.iv-mk em { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font: 600 7.5px/1 var(--mono); font-style: normal; white-space: nowrap; }
.iv-sec { font: 700 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.iv-tbl { width: 100%; border-collapse: collapse; }
.iv-tbl th { font: 600 7.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); text-align: right; padding: 4px 3px; }
.iv-tbl th:first-child, .iv-tbl td:first-child { text-align: left; }
.iv-tbl td { font: 500 10px/1.4 var(--mono); padding: 5px 3px; border-top: 1px solid var(--line-2); text-align: right; color: var(--ink-2); }
.iv-tbl td:first-child { font-weight: 700; color: var(--ink); }
.iv-case { display: grid; gap: 4px; margin-top: 4px; }
.iv-case span { position: relative; padding-left: 12px; font-size: 10.5px; line-height: 1.45; color: var(--ink-2); }
.iv-case span::before { content: ""; position: absolute; left: 0; top: 6px; width: 4px; height: 4px; border-radius: 50%; }
.iv-case.up span::before { background: var(--green); }
.iv-case.dn span::before { background: #D9432F; }
.iv-warn { background: var(--amber-wash); border: 1px solid var(--amber-line); border-radius: 9px; padding: 10px; font-size: 10.5px; line-height: 1.5; color: #8A5418; }

.inv-foot { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px solid var(--line-2); background: var(--paper-2); flex-wrap: wrap; }
.inv-foot em { font: 500 8.5px/1 var(--mono); font-style: normal; color: var(--muted); background: var(--line-3); padding: 3px 6px; border-radius: 5px; margin-right: 5px; }
.inv-note { margin-left: auto; font: 500 8.5px/1 var(--mono); color: var(--amber); }
@media (max-width: 860px) { .inv-body { grid-template-columns: 1fr; } .inv-detail { display: none; } }

/* Same fr-collapse as BobVideo: pin the two parts explicitly rather than
   relying on track sizing inside an absolutely-positioned pane. */
.suite-stage .pane[data-pane="bobinvest"] { display: block; }
.suite-stage .pane[data-pane="bobinvest"] .inv-body {
  position: absolute; left: 0; right: 0; top: 0; bottom: 34px;
}
.suite-stage .pane[data-pane="bobinvest"] .inv-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
}

/* ══ responsive suite ══════════════════════════════════════════════════════
   The window was pinned at 780×519 regardless of viewport, and the radar's
   SVGs had no box to fill so they collapsed to the 300×150 replaced-element
   default and bunched every point into one corner. Both fixed here.
   ══════════════════════════════════════════════════════════════════════════ */
.qw-shot:has(.switcher) { max-width: min(1080px, 100%); }
.suite-stage { height: clamp(430px, 40vw, 600px); }

/* the radar plot gets an explicit box; the SVGs fill it */
.rd-plot { position: absolute; inset: 26px 14px 30px 34px; }
.rd-svg, .rd-pts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* BobCode: pin the parts so nothing floats or clips at any size */
.suite-stage .pane[data-pane="bobcode"] { display: block; }
.suite-stage .pane[data-pane="bobcode"] .app-body {
  position: absolute; inset: 0; display: grid; grid-template-columns: 190px 1fr;
}
.suite-stage .pane[data-pane="bobcode"] .app-side { overflow-y: auto; min-height: 0; }
.suite-stage .pane[data-pane="bobcode"] .app-main { display: flex; flex-direction: column; min-height: 0; }
.suite-stage .pane[data-pane="bobcode"] .code-tabs { flex: none; }
.suite-stage .pane[data-pane="bobcode"] .app-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.suite-stage .pane[data-pane="bobcode"] .ask,
.suite-stage .pane[data-pane="bobcode"] .code-stats { flex: none; }

/* BobWork / BobDesign fill their stage too */
.suite-stage .pane[data-pane="bobwork"] { display: block; }
.suite-stage .pane[data-pane="bobwork"] .work-body { position: absolute; inset: 0; overflow: auto; }
.suite-stage .pane[data-pane="bobdesign"] { display: block; }
.suite-stage .pane[data-pane="bobdesign"] .design-body { position: absolute; inset: 0; }
.suite-stage .pane[data-pane="bobdesign"] .d-left { overflow-y: auto; min-height: 0; }

@media (max-width: 720px) { .suite-stage { height: clamp(420px, 92vw, 520px); } }

/* The title bar carries a different number of chips per product. Left to wrap,
   it changed height between tabs and took the whole window with it. Fixed
   height, no wrap, and the chips drop out on narrow screens. */
.suite-app .app-bar { height: 46px; flex-wrap: nowrap; overflow: hidden; padding-block: 0; }
.suite-app .bar-set { flex-wrap: nowrap; overflow: hidden; }
.suite-app .app-tab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .suite-app .app-chip { display: none; }
  .suite-app .app-right { white-space: nowrap; }
}
@media (max-width: 480px) { .suite-app .app-right { display: none; } }

/* ══ audit fixes ══════════════════════════════════════════════════════════ */

/* /download/ overflowed 24px on mobile: a grid item cannot shrink below its
   min-content unless the track is minmax(0,1fr), so the hero's column pushed
   past the viewport. */
.hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.hero-grid > * { min-width: 0; }
.dl-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px)  { .dl-hero { grid-template-columns: minmax(0, 1fr); } }
.grid > *, .plans > *, .dl > *, .kits > * { min-width: 0; }

/* tap targets: the footer's brand and email links were 15px tall */
.fbot a { display: inline-block; padding: 5px 0; }
.brand { padding: 4px 0; }
.term .copy { padding: 7px 11px; }

/* two-plan pricing (Free + pay as you go) */
.plans-2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 720px; margin-inline: auto; }
@media (max-width: 620px) { .plans-2 { grid-template-columns: minmax(0,1fr); } }