/* Generated by scripts/promote.js from templates/product.html. */
/* ==========================================================================
   Shared foundation for the template studies.

   Tokens and primitives only. Every layout decision lives in the template's
   own stylesheet, so the ten can disagree about structure while agreeing
   about colour, type and the brand marks. This file is a copy: it must never
   import from or write to public/styles.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root {
  --paper:    #EBEFF1;
  --surface:  #F9FBFB;
  --ink:      #08181E;
  --graphite: #5A6E75;
  --rule:     #C6D2D6;
  --marine:   #0A3D4C;
  --marine-2: #0F5468;
  --signal:   #F0B429;
  --navy:     #04131C;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --r: 4px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 .6rem;
}
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marine);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--signal); flex: none; }

.lede { color: var(--graphite); font-size: 1.06rem; max-width: 62ch; }

/* ── Controls ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .82rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn .arr { width: 15px; height: 15px; flex: none; }
.btn--primary { background: var(--marine); color: #fff; }
.btn--primary:hover { background: var(--marine-2); }
.btn--signal { background: var(--signal); color: var(--navy); }
.btn--signal:hover { background: #ffc846; }
.btn--ghost { border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--marine); }
.btn--ondark { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--ondark:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

.link-arrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-decoration: none;
  color: var(--marine);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: border-color .2s var(--ease);
}
.link-arrow::after { content: ' \2192'; }
.link-arrow:hover { border-color: var(--marine); }

/* ── Brand and product marks ─────────────────────────────────────────── */

.mark { width: 26px; height: 26px; flex: none; }
.mk { display: block; width: 100%; height: auto; }
/* A dot is solid, and must not also carry the glyph stroke, or its drawn
   radius stops matching the radius in the path. */
.mk-dot { fill: currentColor; stroke: none; }
/* A graph node knocks out against the panel ground so the links it joins
   stop short of it visually, instead of merging into one lumpy shape. */
.mk-node { fill: var(--mk-bg, var(--paper)); }
.mk-node--on { fill: currentColor; }

.mkp { display: flex; align-items: center; justify-content: center; }
.mkp--atlas {
  --mk-bg: #0A3D4C;
  color: var(--signal);
  background-color: #0A3D4C;
  background-image: radial-gradient(rgba(240, 180, 41, .20) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
/* Grounds are assigned by group, not per tool: seven distinct panels would be
   noise, four makes the grouping legible wherever the tools appear. */
.mkp--cad, .mkp--cfd {
  --mk-bg: #08181E;
  color: var(--signal);
  background-color: #08181E;
  background-image: repeating-linear-gradient(-28deg, rgba(240, 180, 41, .10) 0 1px, transparent 1px 13px);
}
.mkp--docintel, .mkp--extract {
  --mk-bg: #0F5468;
  color: var(--signal);
  background-color: #0F5468;
  background-image: repeating-linear-gradient(90deg, rgba(240, 180, 41, .12) 0 1px, transparent 1px 16px);
}
.mkp--vision, .mkp--audit {
  --mk-bg: #F0B429;
  color: var(--navy);
  background-color: #F0B429;
  background-image: repeating-linear-gradient(to bottom, rgba(4, 19, 28, .09) 0 1px, transparent 1px 15px);
}

/* ── Service glyphs ──────────────────────────────────────────────────── */

.glyph { width: 64px; height: 44px; }
.glyph .g-line { fill: none; stroke: var(--marine); stroke-width: 2; stroke-linecap: round; }
.glyph .g-line--alt { stroke: var(--graphite); stroke-dasharray: 3 4; }
.glyph .g-dot { fill: var(--marine); }
.glyph .g-flag { fill: var(--signal); }
.glyph .g-fill { fill: rgba(10, 61, 76, .10); }

/* ── Status pill ─────────────────────────────────────────────────────── */

.pill {
  display: inline-block;
  margin: 0;
  padding: .3rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--paper);
  white-space: nowrap;
}
.pill--live { color: var(--marine); border-color: var(--marine); background: transparent; }
.pill--live::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: .5rem;
  vertical-align: middle;
}

/* ── Form ────────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 1rem; }
.f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--graphite);
}
.field input, .field select, .field textarea {
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: .7rem .85rem;
  width: 100%;
}
.field textarea { resize: vertical; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--marine); outline-offset: 1px; }
.f-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; }
.f-note { margin: 0; font-family: var(--font-mono); font-size: .68rem; color: var(--graphite); }

/* ── Reveal ──────────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Preview banner ──────────────────────────────────────────────────── */

.tpl-flag {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .8rem;
  background: var(--navy);
  color: #fff;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  box-shadow: 0 6px 22px rgba(4, 19, 28, .28);
}
.tpl-flag a { color: var(--signal); text-decoration: none; }
.tpl-flag a:hover { text-decoration: underline; }
/* The dashboard shows thumbnails in frames, where the flag is just noise. */
html[data-framed] .tpl-flag { display: none; }

/* ==========================================================================
   Neutral scaffolding.

   Just enough for the canonical markup to be readable before a template has
   an opinion: list resets, a content width, sane stacking. Deliberately
   plain. Every template is expected to override most of this.
   ========================================================================== */

.sec { padding-block: clamp(56px, 7vw, 104px); }
.sec--tint { background: var(--surface); }
.sec__in { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec__head { margin-bottom: clamp(28px, 4vw, 52px); max-width: 68ch; }
.sec__head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }

/* ── Header ──────────────────────────────────────────────────────────── */

.hd { position: sticky; top: 0; z-index: 50; }
.hd__in { position: relative; }
.hd__in {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 1.4rem;
}
.hd__brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; font-family: var(--font-display); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; font-size: .95rem;
}
.hd__nav { display: flex; gap: 1.4rem; margin-left: auto; }
.hd__nav a { font-family: var(--font-mono); font-size: .8rem; text-decoration: none; color: var(--graphite); }
.hd__nav a:hover, .hd__nav a.is-on { color: var(--ink); }
.hd__cta { padding: .6rem 1rem; }

/* Mobile navigation. The desktop bar simply hides below 820px, so without
   this a phone gets the brand and a Contact button and nothing else. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--rule); border-radius: var(--r);
}
.nav-toggle span[aria-hidden] { position: relative; width: 17px; height: 2px; background: var(--ink); transition: background .15s var(--ease); }
.nav-toggle span[aria-hidden]::before,
.nav-toggle span[aria-hidden]::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 2px; background: var(--ink);
  transition: transform .2s var(--ease);
}
.nav-toggle span[aria-hidden]::before { top: -6px; }
.nav-toggle span[aria-hidden]::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span[aria-hidden] { background: transparent; }
.nav-toggle[aria-expanded="true"] span[aria-hidden]::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span[aria-hidden]::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .hd__cta { display: none; }
  .hd__nav {
    display: none; position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--surface); border-block: 1px solid var(--rule);
    padding: .4rem var(--gutter) 1.1rem;
  }
  .hd__nav.is-open { display: flex; }
  .hd__nav a { padding: .85rem 0; border-bottom: 1px solid var(--rule); font-size: .88rem; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero { position: relative; }
.hero__art { position: absolute; inset: 0; overflow: hidden; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; }
.hero__in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: clamp(72px, 11vw, 132px);
}
.hero__t { font-size: clamp(2.3rem, 5.6vw, 4rem); max-width: 20ch; }
.hero__t em { font-style: normal; }
.hero__rule { width: 56px; height: 3px; background: var(--signal); margin: 1.4rem 0; }
.hero__l { max-width: 60ch; }
.hero__act { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ── Sets ────────────────────────────────────────────────────────────── */

.trk-set, .svc-set, .tool-set, .eng-set, .sct-set, .faq-set, .crd-set, .stp-set {
  list-style: none; margin: 0; padding: 0;
}
.trk__list, .svc__list, .mods, .figs { list-style: none; margin: 0; padding: 0; }

.trk__tag, .svc__out span, .stp__meta, .mod__k, .crd__k, .fig__l, .tool__idx {
  font-family: var(--font-mono);
}
.trk__tag { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.trk__claim strong { color: var(--marine); }
.trk__list li, .svc__list li { padding: .3rem 0; }

.svc__out span { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--marine); display: block; }

.stp__n { font-family: var(--font-display); font-weight: 700; color: var(--signal); }
.stp__meta { font-size: .68rem; letter-spacing: .06em; color: var(--graphite); }

/* ── Product marks ───────────────────────────────────────────────────── */

.tool__mark { position: relative; }
.tool__idx { position: absolute; top: 12px; left: 14px; font-size: .62rem; letter-spacing: .16em; opacity: .55; }
.tool__head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.tool__links { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.mod__k { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marine); }
.mod__d { display: block; font-size: .88rem; line-height: 1.55; color: var(--graphite); }
.fig__n { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--marine); display: block; }
.fig__l { font-size: .66rem; line-height: 1.6; color: var(--graphite); display: block; }

/* ── Misc sets ───────────────────────────────────────────────────────── */

.eng__f { margin: 0; }
.eng__f div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.eng__f dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--graphite); }
.eng__f dd { margin: 0; font-size: .9rem; }

.sct img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }

.faq summary { cursor: pointer; list-style: none; padding: 1rem 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { display: inline; font-size: 1.05rem; }
.faq p { color: var(--graphite); }

.crd__k { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--marine); }

/* ── Band ────────────────────────────────────────────────────────────── */

.band { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.band__in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
}
.band__in h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.band__in p { max-width: 58ch; color: rgba(255, 255, 255, .84); }

/* ── Contact and footer ──────────────────────────────────────────────── */

.cnt { display: grid; gap: clamp(28px, 4vw, 56px); }
.cnt__mail { font-family: var(--font-mono); font-size: .85rem; }

.ft { background: var(--ink); color: rgba(255, 255, 255, .8); }
.ft__in {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: clamp(40px, 5vw, 68px) var(--gutter);
  display: grid; gap: clamp(28px, 4vw, 56px);
}
.ft__brand .hd__brand { color: #fff; }
.ft__note { color: rgba(255, 255, 255, .6); font-size: .9rem; max-width: 40ch; }
.ft__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2rem; }
.ft__cols h2 { font-size: .68rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); font-variation-settings: normal; }
.ft__cols ul { list-style: none; margin: 0; padding: 0; }
.ft__cols li { padding: .28rem 0; }
.ft__cols a { font-size: .9rem; text-decoration: none; color: rgba(255, 255, 255, .75); }
.ft__cols a:hover { color: #fff; }
.ft__base { border-top: 1px solid rgba(255, 255, 255, .14); }
.ft__base p {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 1rem var(--gutter); font-family: var(--font-mono); font-size: .7rem;
  color: rgba(255, 255, 255, .5);
}

/* ── Tables ──────────────────────────────────────────────────────────── */

.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 1rem; border-bottom: 1px solid var(--rule); }
.tbl thead th { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--marine); }
.tbl ul { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   Product pages.

   Shares the site's tokens and header, and runs on the product's own accent
   pair: --a-ac for solid blocks, --a-ink for anything that is type. Set on
   the article, so one stylesheet serves all seven.
   ========================================================================== */

:root { --wrap: 1560px; --gutter: clamp(18px, 2.4vw, 40px); }

.pr__in { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

/* ── Masthead ────────────────────────────────────────────────────────── */

.pr__top { padding-block: clamp(32px, 5vw, 64px) clamp(30px, 4vw, 52px); border-bottom: 1px solid var(--rule); }
.pr__back {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-family: var(--font-mono); font-size: .72rem; color: var(--graphite);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.pr__back .arr { width: 14px; height: 14px; transform: rotate(180deg); }
.pr__back:hover { color: var(--a-ink); }

.pr__id { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.6rem); flex-wrap: wrap; }
.pr__m { width: clamp(76px, 9vw, 104px); height: auto; border-radius: 16px; flex: none; }
.pr__id h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 .3rem; letter-spacing: -.03em; }
.pr__tag { color: var(--a-ink); font-size: clamp(1.02rem, 1.7vw, 1.26rem); margin: 0 0 .6rem; }
.pr__id .pill { border-color: var(--a-ink); color: var(--a-ink); background: transparent; }
.pr__id .pill--live::before { background: var(--a-ac); }

.pr__lede { margin: clamp(18px, 2.6vw, 28px) 0 0; max-width: 70ch; font-size: 1.02rem; line-height: 1.65; color: var(--graphite); }

.pr__act { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(20px, 2.8vw, 30px); }
/* A demo that does not exist is shown as a control that is plainly off,
   rather than as a link that goes nowhere. */
.btn--off {
  border: 1px dashed var(--rule); color: var(--graphite); background: var(--surface);
  cursor: not-allowed; text-transform: none;
}

/* ── Sections ────────────────────────────────────────────────────────── */

.pr__sec { padding-block: clamp(34px, 4.6vw, 62px); }
.pr__sec--tint { background: var(--surface); border-block: 1px solid var(--rule); }
.pr__sec h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 1.2rem; }
.pr__note { margin: -.5rem 0 1.4rem; font-size: .9rem; color: var(--graphite); max-width: 72ch; }

/* ── Capabilities ────────────────────────────────────────────────────── */

.pr__caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.pr__caps li { background: var(--paper); padding: 1.3rem 1.4rem 1.5rem; }
.pr__n { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--a-ink); }
.pr__caps h3 { font-size: 1.05rem; margin: .5rem 0 .4rem; }
.pr__caps p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--graphite); }

/* ── Spec table ──────────────────────────────────────────────────────── */

.pr__spec { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.pr__spec > div { background: var(--paper); padding: 1rem 1.1rem 1.1rem; }
.pr__spec dt { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); margin-bottom: .35rem; }
.pr__spec dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }

/* ── Screenshot slots ────────────────────────────────────────────────── */

.pr__shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.pr__shot { margin: 0; }
.pr__slot {
  aspect-ratio: 16 / 10; border: 1px dashed var(--rule); border-radius: var(--r);
  background: var(--surface); display: grid; place-items: center;
}
.pr__slot span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rule); }

/* ── Still to come ───────────────────────────────────────────────────── */

.pr__todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pr__todo li { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 1.2rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.pr__todo b { font-family: var(--font-display); font-size: .95rem; }
.pr__todo span { font-size: .89rem; color: var(--graphite); }

/* ── The rest of the suite ───────────────────────────────────────────── */

.pr__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.pr__o {
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  border-left: 3px solid var(--a-ac); padding: .8rem .9rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pr__o:hover { transform: translateY(-2px); border-color: var(--marine); border-left-color: var(--a-ac); }
.pr__o img { border-radius: 8px; flex: none; }
.pr__o b { display: block; font-family: var(--font-display); font-size: .97rem; }
.pr__o i { display: block; font-style: normal; font-size: .8rem; color: var(--graphite); margin-top: .1rem; }

@media (max-width: 760px) {
  .pr__todo li { grid-template-columns: 1fr; gap: .25rem; }
}


  /* Preview only: pick a product with ?id=cfd and so on. */
  body { background-color: var(--paper); }
  .pick { position: fixed; left: 14px; bottom: 14px; z-index: 200; display: flex; gap: 4px; flex-wrap: wrap;
          background: var(--navy); padding: 6px; border-radius: 8px; max-width: 300px; }
  .pick a { font-family: var(--font-mono); font-size: .62rem; color: rgba(255,255,255,.7);
            text-decoration: none; padding: .3rem .45rem; border-radius: 3px; }
  .pick a:hover, .pick a.on { background: rgba(240,180,41,.18); color: #fff; }