/* TurboQuant Optimisation. Page-scoped components, prefix .tq-
   Foundation tokens and components come from wldm.css. */

/* ------------------------------------------------ hero (Sophie, 1 Oct)
   The headline runs the full width above the two columns, so it breaks into
   two lines instead of one to three words a line. TurboQuant in fluro on ink. */

.tq-h1{max-width:none}
.tq-h1 em{color:var(--ny)}
.tq-hero-grid{align-items:start}
.tq-hero-grid .accent-bar{margin-top:var(--s4)}
.tq-hero-grid>.island{margin-top:var(--s4)}

/* KV cache island: blue for the 32-bit "before" memory, fluro for the
   compressed result. wldm.js paints the cells with inline colours that are
   built for a light ground, so this page overrides them for the ink hero. */
.tq-hero [data-island="kv-cache"]{border-color:rgba(184,211,216,.38)}
.tq-hero [data-island="kv-cache"] .kv-top{border-bottom-color:rgba(184,211,216,.38)}
.tq-hero [data-island="kv-cache"] .kv-top .r{color:var(--bl)}
.tq-hero [data-island="kv-cache"] .kv-grid{background:rgba(184,211,216,.08)}
.tq-hero [data-island="kv-cache"] .kv-grid[data-cells="before"] i{background:var(--bl)!important;opacity:.85}
.tq-hero [data-island="kv-cache"] .kv-grid[data-cells="before"] i:nth-child(3n){opacity:.6}
.tq-hero [data-island="kv-cache"] .kv-grid[data-cells="before"] i:nth-child(5n+1){opacity:1}
.tq-hero [data-island="kv-cache"] .kv-grid[data-cells="after"] i:nth-child(n+12){background:rgba(243,240,230,.10)!important}
.tq-hero [data-island="kv-cache"] .kv-scan{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.tq-hero [data-island="kv-cache"] .kv-mid .chip{background:var(--bl)}
.tq-hero [data-island="kv-cache"] .kv-mid .rule{background:rgba(184,211,216,.5)}
.tq-hero [data-island="kv-cache"] .kv-mid .out{color:var(--bl)}
.tq-hero [data-island="kv-cache"] .kv-metrics .v{color:var(--bl)}

/* ------------------------------------------------ 01 intro copy runs across */

.tq-intro{align-items:start}

/* ------------------------------------------------ 01 before / after tabs
   Stronger: blue selected tab, solid pipeline nodes on one line. */

.tq-era .tab[aria-selected="true"]{background:var(--bl);border-top-color:var(--ink)}
.tq-era .tab[aria-selected="true"] .t-tag{color:var(--ink)}
.tq-era .tabpanel-r{background:rgba(184,211,216,.32)}
.tq-era .tabpanel-r .body{color:var(--ink)}
.tq-era .proprows .row .v{color:var(--ink)}
.tq-era .flow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;align-items:stretch;counter-reset:node}
.tq-era .flow .arw{display:none}
.tq-era .flow .node{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  white-space:normal;padding:14px 10px;margin-right:22px;
  background:var(--wh);border:1.5px solid var(--ink);color:var(--ink);font-size:15px;line-height:1.3;
}
.tq-era .flow .node:not(.is-end)::after{
  content:"";position:absolute;right:-17px;top:50%;width:12px;height:12px;margin-top:-6px;
  border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);
}
.tq-era .flow .node.is-end{margin-right:0;background:var(--ny);border-color:var(--ink);color:var(--ink)}

/* ------------------------------------------------ evidence figures */

.tq-figure{
  margin:0;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:clamp(14px,1.8vw,22px);
  box-shadow:var(--shadow-hover);
}
.tq-figure picture{display:block}
.tq-figure img{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.tq-figcap{margin-top:var(--s3);max-width:74ch}

/* ------------------------------------------------ market effect block:
   copy left, the screenshot smaller on the right */

.tq-market{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,60px);align-items:center}
.tq-market .h3{max-width:26ch}

/* ------------------------------------------------ 02 metrics dashboard
   Rebuilt from the published dashboard image in brand colours. */

.tq-dash{margin:0;border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink);overflow:hidden;box-shadow:var(--shadow-hover)}
.tq-dash-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px clamp(18px,2.2vw,28px);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-label);
}
.tq-dash-top .r{color:var(--bl);letter-spacing:.06em}
.tq-dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.tq-dash-panel{background:var(--ink);padding:clamp(20px,2.2vw,28px)}
.tq-dash-panel .card-label{color:var(--on-ink-label);margin-bottom:var(--s3);min-height:2.6em}
.tq-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tq-bars li{display:grid;grid-template-columns:8.6em minmax(0,1fr) 3.6em;align-items:center;gap:12px}
.tq-bars .l{font-size:14px;line-height:1.3;color:var(--on-ink-lead)}
.tq-bars .b{display:block;width:100%;height:14px;border-radius:var(--r-cell);overflow:hidden}
.tq-bars .t{fill:rgba(243,240,230,.08)}
.tq-bars .f{fill:var(--bl)}
.tq-bars .v{font-family:var(--label);font-size:15px;color:var(--on-ink);text-align:right;font-variant-numeric:tabular-nums}
.tq-bars li.is-hi .f{fill:var(--ny)}
.tq-bars li.is-hi .l{color:var(--on-ink)}
.tq-dash .tq-figcap{margin:0;padding:14px clamp(18px,2.2vw,28px) 18px;border-top:1px solid var(--line);color:var(--on-ink-label);max-width:none}

/* ------------------------------------------------ 02 Brie quote: centred, photo by the name */

.tq-quote{text-align:center}
.tq-quote p{margin-left:auto;margin-right:auto;max-width:none}
.tq-quote footer{display:inline-flex;align-items:center;gap:14px;text-align:left}
.tq-quote footer img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--bl);background:var(--bg)}

/* ------------------------------------------------ 04 the gap graphic */

.tq-gap{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
.tq-gap-col{border-radius:var(--r-lg);padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column}
.tq-gap-col--old{background:var(--surface);border:1px solid var(--line)}
.tq-gap-col--new{background:var(--ink);color:var(--on-ink);border:1px solid var(--ink)}
.tq-gap-head{display:flex;align-items:center;gap:16px;margin-bottom:var(--s4)}
.tq-gap-head .card-label{margin:0 0 4px}
.tq-gap-t{margin:0;font-size:var(--fs-h3);line-height:1.3;color:var(--ink)}
.tq-gap-col--new .tq-gap-t{color:var(--wh)}
.tq-gap-col--new .card-label{color:var(--on-ink-label)}
.tq-gap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tq-gap-list li{padding:12px 16px;border-radius:var(--r-sm);font-size:var(--fs-small);font-weight:300;line-height:1.4}
.tq-gap-col--old .tq-gap-list li{background:rgba(42,43,41,.05);border:1px dashed var(--hair-strong);color:var(--ink-soft)}
.tq-gap-col--new .tq-gap-list li{background:var(--bl);color:var(--ink)}
.tq-gap-col--new .tq-gap-list li:last-child{background:var(--ny)}
.tq-gap-foot{margin:auto 0 0;padding-top:var(--s4);display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.tq-gap-col--new .tq-gap-foot{color:var(--on-ink-label)}
.tq-gap-foot b{font-family:var(--head);font-weight:400;font-size:var(--fs-h2);line-height:1;color:var(--ink)}
.tq-gap-col--new .tq-gap-foot b{color:var(--ny)}
.tq-gap-mid{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(64px,7vw,110px)}
.tq-gap-mid::before{content:"";position:absolute;left:50%;top:10%;bottom:10%;border-left:2px dashed var(--ink)}
.tq-gap-mid span{
  position:relative;font-family:var(--label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--bl);color:var(--ink);padding:7px 12px;border-radius:var(--r-pill);white-space:nowrap;
}

/* ------------------------------------------------ close: capture title on one line, left aligned */

.tq-close .capture .h3{max-width:none;margin-left:0;margin-right:0}

/* ------------------------------------------------ responsive */

@media (max-width:1080px){
  .tq-dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .tq-market{grid-template-columns:minmax(0,1fr)}
  .tq-gap{grid-template-columns:minmax(0,1fr)}
  .tq-gap-mid{width:auto;height:64px}
  .tq-gap-mid::before{left:10%;right:10%;top:50%;bottom:auto;border-left:none;border-top:2px dashed var(--ink)}
}
@media (max-width:640px){
  .tq-dash-grid{grid-template-columns:minmax(0,1fr)}
  .tq-dash-panel .card-label{min-height:0}
  .tq-bars li{grid-template-columns:7.6em minmax(0,1fr) 3.4em;gap:10px}
  .tq-era .flow{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);row-gap:22px}
  .tq-era .flow .node{margin-right:0}
  .tq-era .flow .node:not(.is-end)::after{right:auto;left:50%;top:auto;bottom:-17px;margin:0 0 0 -6px;transform:rotate(135deg)}
}

/* .block-lg lives in wldm.css, which loads first; the figures above reset
   their own margin, so restore the gap here. */
.tq-dash.block-lg,.tq-gap.block-lg{margin-top:var(--s6)}