/* ── CASE STUDY SHARED STYLES ── */
/* Adding a chart/stat/diagram? See CLAUDE.md → "Data visualization" for the color-role
   rules and the palette validator before picking colors. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#FDFBF7;--dark:#1A1917;--mid:#4A4843;--light:#76716A;
  --rule:#E8E2D8;--teal:#027A8F;--teal-lt:#DCEAEC;--teal-mid:#A6D0D8;
  --amber:#E07820;--amber-lt:#F3E5D6;--red:#CC3320;--red-lt:#F1E0DB;
  --purple-lt:#E5DEEB;--purple:#7E40C8;--green-lt:#E3E8D9;--green:#3A972A;
  --white:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(26,25,23,.03);
  --shadow-md:0 1px 3px rgba(26,25,23,.045);
  --shadow-lg:0 2px 8px rgba(26,25,23,.06);
  /* ── TYPE SCALE ── */
  --text-2xs:11.5px; /* DM Mono label/eyebrow chrome only (section-num, dialog-label, tags) */
  --text-xs:14px;   /* micro-captions/footnotes/code (snippets, provenance, citations) */
  --text-sm:15px;   /* secondary reading content (descriptions, list items, table cells) */
  --text-md:var(--text-base);/* COLLAPSED into base: 15/16/17 read as one step, so "emphasized
                                secondary" now = body size, distinguished by weight not px. Kept as
                                a token so existing call-sites keep working. */
  --text-base:17px; /* body copy */
  /* ── RADIUS SCALE ── one job each; no ad-hoc px */
  --radius-sm:6px;    /* tags, badges, chips, pills that aren't fully round */
  --radius-md:12px;   /* cards, callouts, tiles */
  --radius-lg:14px;   /* raised panels, dialog scenes, chat bubbles */
  --radius-pill:999px;/* fully-round pills */
  /* ── CHAT BUBBLE TOKENS ── every native sample bubble reads from these (Otto is separate) */
  --bubble-user-bg:var(--dark);   /* the user always speaks in near-black, never teal */
  --bubble-user-ink:#FAF7F2;
  --bubble-ai-bg:var(--white);
  /* ── EYEBROW / MONO-LABEL TOKENS ──
     tracking: --track-label everywhere, --track-eyebrow for the prominent section/hero ones.
     COLOR RULE: passive mono-label chrome (section-num, hero-tag, card-label, proof/pa/dz labels,
     eyebrows) is neutral (--light). Teal is NOT chrome: it is reserved for things that MEAN
     something (proof stats, status tags, the gradient identity, live/current markers, interactive
     affordances). This keeps proof-teal from being diluted by decorative use. */
  --track-label:.1em;
  --track-eyebrow:.14em;
  /* ── CANONICAL GRADIENT ── one set of stops, referenced everywhere (hero, reflection callout,
     before/after bars, part dividers). Compose with any angle: linear-gradient(90deg,var(--grad-stops)).
     --grad-reflect is the low-opacity wash of the same stops. Never redefine these stops inline.
     The stops are the house gradient a tad darker than the original (was #9CB27E/#58C4E2/#4E9AA8).
     Larger gradient FILLS carry a subtle pixel-grain via --grad-noise + background-blend-mode:overlay
     (see .ba-bar-grad, .metric-bar-fill, .spectrum, .icon-badge). Text-clipped uses (hero em,
     .impact-num, .callout-reflect label) stay clean — never put grain on letterforms. */
  --grad-stops:#8CA071 0%,#4FB0CB 45%,#468B97 100%;
  --grad-brand:linear-gradient(155deg,var(--grad-stops));
  --grad-reflect:linear-gradient(155deg,rgba(140,160,113,.10) 0%,rgba(79,176,203,.10) 45%,rgba(70,139,151,.10) 100%);
  /* pixel-grain overlay: opaque, low-contrast grayscale fractal noise, tiled. Pair with
     background-blend-mode:overlay over any gradient fill. Values are centered ~0.5 so it reads as
     texture, not a darkening scrim. */
  --grad-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* ── FOCUS RING ── one affordance across every interactive element (see :focus-visible below) */
  --focus-ring:var(--teal);
  /* ── SPACING SCALE (8px grid) ── one rhythm for the whole page, so gaps read as a system.
     --space-section drives the vertical padding on every <section> (gap between two sections =
     2× this + the divider rule margin); hero bottom padding is tuned to match so the hero→first
     section gap equals a section→section gap. --space-block is the canonical vertical margin for
     any standalone block that sits between paragraphs (figures, callouts, quotes, tables,
     pipelines); --space-block-sm for tighter grouped/nested blocks (cards, dialog scenes). Reach
     for these before hardcoding a new rem margin. */
  --space-section:40px;   /* each side of a <section> */
  --space-rule:28px;      /* gap below the section-divider rule */
  --space-block:1.75rem;  /* standalone figure/callout/quote/table vertical margin */
  --space-block-sm:1.5rem;/* tighter grouped/nested block margin */
}
/* ── CANONICAL DATA-POINT / STAT TILE ──
   Every big-number stat (.tldr-stat, .cmp-stat, page-local .stat-card, etc.) uses ONE look:
   background rgba(3,156,184,.09) (teal tint), the number in var(--teal), caption in var(--mid).
   Never white-bg + dark-number or dark-tint bg for stats: teal is the "designed/positive proof"
   role, and the number IS the proof. New stat components must follow this. */
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--dark);font-family:'DM Sans',sans-serif;font-weight:300;font-size:var(--text-base);line-height:1.75;-webkit-font-smoothing:antialiased}

/* ── TYPOGRAPHY ── */
h1.hero-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(3rem,7vw,5rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:1.25rem}
h1.hero-title em{font-style:italic;color:var(--teal)}
/* ── GRADIENT IDENTITY (ported from deck: title-slide gradient) ── */
.grad-text,h1.hero-title em{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.grad-text,h1.hero-title em{-webkit-text-fill-color:currentColor;color:var(--teal)}}
.grad-hr{border:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--grad-stops))}
/* ── BEFORE / AFTER BARS (ported from deck: BeforeAfterBars) ── */
.ba-fig{margin:var(--space-block) 0;max-width:620px}
.ba-fig .ba-eyebrow{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--light);margin:0 0 1.25rem;display:flex;align-items:center;gap:.6rem}
.ba-fig .ba-eyebrow::before{content:'';width:24px;height:1px;background:var(--teal)}
.ba-bars{display:flex;align-items:flex-end;justify-content:center;gap:clamp(28px,6vw,56px);--ba-max:220px}
.ba-col{display:flex;flex-direction:column;align-items:center;gap:.85rem}
.ba-val{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1;color:var(--light);font-variant-numeric:lining-nums tabular-nums}
.ba-val.on-after{color:var(--teal)}
.ba-val .ba-unit{font-size:.62em;font-style:italic}
.ba-bar{width:clamp(72px,11vw,112px);border-radius:12px 12px 0 0;background:rgba(26,25,23,.1);height:calc(var(--frac,1)*var(--ba-max,220px));transition:height .85s cubic-bezier(.22,1,.36,1)}
.ba-bar-grad{background-image:var(--grad-noise),linear-gradient(0deg,var(--grad-stops));background-blend-mode:overlay,normal;background-size:140px 140px,cover}
.ba-fig.ba-collapsed .ba-bar{height:0}
.ba-cap{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mid);text-align:center;max-width:120px}
.ba-mult{align-self:center;text-align:center;padding-bottom:2.5rem}
.ba-x{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(2.75rem,8vw,5.25rem);line-height:.9;display:inline-block}
.ba-mcap{display:block;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--light);margin-top:.4rem}
.ba-note{font-size:var(--text-sm);font-weight:400;color:var(--light);line-height:1.5;margin:1.5rem 0 0;text-align:center;max-width:520px;margin-left:auto;margin-right:auto}
@media(max-width:680px){.ba-bars{--ba-max:150px;gap:20px}.ba-mult{padding-bottom:1.5rem}}
h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.3rem,4.6vw,3.6rem);font-weight:400;line-height:1.12;letter-spacing:-.01em;margin-bottom:1.75rem}
h2 em{font-style:italic;color:var(--teal)}
h3.sub-heading{font-size:var(--text-sm);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mid);margin:2.25rem 0 .9rem}
p{margin-bottom:1.1rem;color:var(--mid)}
p strong{color:var(--dark);font-weight:500}
p:last-child{margin-bottom:0}

/* ── LAYOUT ── */
.container{max-width:960px;margin:0 auto;padding:0 3rem}
section{padding:var(--space-section) 0}
section+section::before{content:'';display:block;width:calc(100% - 6rem);max-width:864px;height:1px;background:var(--rule);margin:0 auto var(--space-rule)}
.section-num{display:flex;align-items:center;gap:.75rem;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);color:var(--light);text-transform:uppercase;margin-bottom:1.6rem}
.section-num::before{content:'';width:32px;height:1px;background:var(--light);flex-shrink:0}

/* ── SKIP LINK ── */
.skip-link{position:absolute;left:-9999px;top:auto;background:var(--teal);color:#fff;padding:.85rem 1.4rem;z-index:1000;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-radius:0 0 6px 0}
.skip-link:focus{left:0;top:0}
#main{scroll-margin-top:56px}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--cream);border-bottom:1px solid var(--rule);padding:0 3rem;height:56px;display:flex;align-items:center;justify-content:space-between}
.nav-brand{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);color:var(--light);text-transform:uppercase}
.nav-links{display:flex;gap:1.75rem;list-style:none}
.nav-links a{font-size:var(--text-sm);font-weight:400;color:var(--mid);text-decoration:none}
.nav-links a:hover{color:var(--teal)}
.nav-back{font-size:var(--text-2xs);color:var(--teal);text-decoration:none;font-family:'DM Mono',monospace;letter-spacing:.05em}
.nav-back:hover{color:var(--dark)}
.nav-case-nav{display:flex;gap:1.5rem;align-items:center}
.nav-prev,.nav-next{font-size:var(--text-2xs);color:var(--mid);text-decoration:none;font-family:'DM Mono',monospace;letter-spacing:.05em}
.nav-prev:hover,.nav-next:hover{color:var(--teal)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;flex-direction:column;gap:3px;align-items:center;justify-content:center}
.nav-toggle-bar{display:block;width:18px;height:2px;border-radius:1px;background:var(--dark)}

/* ── HERO ── */
.hero{padding:168px 3rem 56px;max-width:960px;margin:0 auto}
.hero-tag{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--light);margin-bottom:1.75rem;display:flex;align-items:center;gap:.75rem}
.hero-tag::before{content:'';width:28px;height:1px;background:var(--light)}
.hero-sub{font-size:1.05rem;color:var(--mid);line-height:1.7;margin-bottom:2.75rem}
.hero-sub+.hero-sub{margin-top:-1.55rem}
.hero-sub strong{color:var(--dark);font-weight:500}

/* ── META GRID ── */
.hero-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);padding-top:1.75rem}
.meta-item{padding-right:1.75rem;border-right:1px solid var(--rule)}
.meta-item:not(:first-child){padding-left:1.75rem}
.meta-item:last-child{border-right:none}
.meta-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light);margin-bottom:.35rem}
.meta-value{font-size:var(--text-sm);color:var(--dark);font-weight:400;line-height:1.45}

/* ── CALLOUTS ── */
.callout{background:var(--white);box-shadow:var(--shadow-sm);padding:1.25rem 1.5rem;border-radius:var(--radius-md);margin:var(--space-block) 0}
.callout-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light);margin-bottom:.4rem}
.callout p{color:var(--dark);margin:0;font-size:var(--text-sm);font-weight:400;line-height:1.6}
.callout p+p{margin-top:.6rem}
.callout-red{background:var(--red-lt)}
.callout-red .callout-label{color:var(--red)}
/* reflection/retrospective asides: a low-opacity wash of the site's signature gradient
   (same stops as .grad-text/.grad-hr), not a new hue */
.callout-reflect{background:var(--grad-reflect)}
.callout-reflect .callout-label{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── QUOTES ── */
.pull-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.35rem,2.4vw,1.7rem);font-weight:500;color:var(--dark);line-height:1.4;margin:var(--space-block) 0;max-width:760px;background:rgba(3,156,184,.09);box-shadow:var(--shadow-md);border-radius:var(--radius-md);padding:1.5rem 1.75rem}
/* ── QUOTE CARD (bolder alternative to .pull-quote) ── */
.quote-card{border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-lg);padding:1.5rem 1.6rem 1.4rem;margin:1.5rem 0;position:relative}
.quote-card-sm{box-shadow:none;background:var(--cream);padding:1.25rem 1.4rem 1.15rem;margin:0}
.quote-mark{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:2.6rem;line-height:.6;margin-bottom:.5rem}
.quote-text{font-family:'Newsreader',serif;font-style:italic;font-size:1.05rem;color:var(--dark);line-height:1.55;margin:0 0 .7rem}
.quote-card-sm .quote-text{font-size:1rem}
.quote-cite{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.05em;color:var(--light);text-transform:uppercase}
.pull-quote::before{content:'';display:block;width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--grad-stops));margin-bottom:.9rem}
.pull-quote .attr{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.05em;color:var(--light);text-transform:uppercase;display:block;margin-top:.55rem}

/* ── CARDS ── */
.card-grid{display:grid;gap:.9rem;margin:var(--space-block-sm) 0}
.card-grid-3{grid-template-columns:1fr 1fr 1fr}
.card-grid-2{grid-template-columns:1fr 1fr}
.card-grid-4{grid-template-columns:1fr 1fr 1fr 1fr}
/* work cards get real presence from a soft shadow alone, no border (Item 13) */
.card{border-radius:var(--radius-md);padding:1.25rem 1.45rem;background:var(--white);box-shadow:var(--shadow-lg)}
.card-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);color:var(--light);letter-spacing:var(--track-label);margin-bottom:.4rem}
.card-title{font-weight:500;font-size:var(--text-sm);color:var(--dark);margin-bottom:.4rem}
.card-desc{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.5;margin:0}
.card-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.card-link:hover{background:var(--teal-lt)}
.hl{background:none;color:inherit;padding:0;border-radius:0;font-weight:600}

/* ── TAXONOMY TYPE-CARD DETAIL BLOCKS ── */
.taxo-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light);margin-bottom:.5rem}
.prompt-snippet{background:rgba(26,25,23,.035);border-radius:var(--radius-md);padding:.9rem 1.1rem;font-family:'DM Mono',monospace;font-size:var(--text-xs);line-height:1.7;color:var(--dark);margin:0 0 var(--space-block)}

/* ── TIMELINE ── */
.year-arc{display:grid;gap:0;margin:var(--space-block) 0;border-radius:var(--radius-md);overflow:hidden;background:var(--white)}
.year-row{display:grid;grid-template-columns:80px 1fr;border-bottom:1px solid var(--rule)}
.year-row:last-child{border-bottom:none}
.year-label{padding:1.25rem 1rem;background:var(--white);display:flex;align-items:flex-start;justify-content:center}
.year-text{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;color:var(--teal)}
.year-content{padding:1.25rem 1.5rem;background:var(--white)}
.year-heading{font-size:var(--text-sm);font-weight:500;color:var(--dark);margin-bottom:.35rem}
/* ── STATUS TAG ── one filled-pill status token with state modifiers. TWO positives on purpose:
   .st-designed (teal) = designed / current; .st-verified (green) = verified / yes. Reserved
   status colors only. .provenance and the Otto product tags stay separate (different jobs). The
   old .year-tag / .tag-* names are kept as aliases of the same states, and .dialog-label (above a
   scene) is the inline dot+label form of this same palette. */
.status-tag,.year-tag{display:inline-flex;align-items:center;gap:.4rem;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:500;padding:.2rem .55rem;border-radius:var(--radius-sm);line-height:1.3}
.year-tag{margin-bottom:.4rem}
.st-designed,.tag-now{background:var(--teal-lt);color:var(--teal)}
.st-verified{background:var(--green-lt);color:var(--green)}
.st-warn,.tag-partial{background:var(--amber-lt);color:var(--amber)}
.st-bad,.tag-risk,.tag-failure{background:var(--red-lt);color:var(--red)}
.st-neutral{background:#E6DFD3;color:var(--mid);box-shadow:inset 0 0 0 1px rgba(26,25,23,.06)}
/* in-progress / not-yet-shipped: dashed grey outline, no fill */
.st-progress{background:transparent;color:var(--mid);border:1px dashed var(--light);padding-top:calc(.2rem - 1px);padding-bottom:calc(.2rem - 1px)}
.year-list{list-style:none;margin:.6rem 0 0;padding:0}
.year-list li{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.55;padding:.3rem 0 .3rem 1.1rem;position:relative}
.year-list li::before{content:'';position:absolute;left:0;top:.65rem;width:5px;height:5px;border-radius:50%;background:var(--teal-mid)}

/* ── DIALOG SCENES ── */
.dialog-scene{background:var(--white);border-radius:var(--radius-lg);padding:1.5rem;margin:1rem 0}
.dialog-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light);margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem}
.dialog-label::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor}
.dialog-label.good{color:var(--teal)}
.dialog-label.bad{color:var(--red)}
.dialog-label.mid{color:var(--amber)}
/* ── PROVENANCE LABELS ── faithful rebuild of confidential UI vs. real product screenshot */
.provenance{display:inline-flex;align-items:center;gap:.45rem;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light);background:var(--cream);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:.32rem .65rem;line-height:1}
.provenance::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.provenance.recreation{color:var(--amber)}
.provenance.actual{color:var(--teal)}
.provenance em{font-style:normal;color:var(--mid);text-transform:none;letter-spacing:0}
.provenance-row{display:flex;justify-content:center;margin:1rem 0 0}
/* dialog-scene AI turns rendered via simplified Otto (.otto-app--bare); .bad marks the
   negative/without-design example so it reads distinct from a normal AI response */
.dialog-scene .otto-app{margin:0}
/* bad examples read as normal message text: the red framing (label/header/annotation),
   never red body copy, is what signals "not good" */
.otto-ai-body.bad,.otto-ai-body.bad p{color:var(--mid)}
/* ── UNIFIED CHAT SAMPLE (.msg) ──
   ONE system for every static sample exchange (a conversation thread). The old .bubble/.dialog
   and .sample-bubble/.sb-turn class names are kept as aliases (grouped into the same rules), so
   existing page markup keeps working. Distinct on purpose and NOT aliased: the Otto shell
   (product skin), the .dz/.wfp interactive demos, and .ai-sample-card (an evidence card, not a
   thread). All read the same --bubble-* tokens, so a user turn is near-black and an AI turn is
   white everywhere. Never red body text in any of them. */
.msg-thread,.dialog,.sample-bubble{display:flex;flex-direction:column;gap:.6rem;margin:.1rem 0}
.msg,.bubble,.sample-bubble .sb-turn{max-width:80%;padding:.65rem 1rem;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:400;line-height:1.6;color:var(--dark)}
.msg-user,.bubble.u,.sample-bubble .sb-user{align-self:flex-end;background:var(--bubble-user-bg);color:var(--bubble-user-ink);border-radius:var(--radius-lg) var(--radius-lg) 4px var(--radius-lg)}
.msg-ai,.bubble.a,.sample-bubble .sb-turn:not(.sb-user){align-self:flex-start;background:var(--bubble-ai-bg);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;box-shadow:var(--shadow-sm)}
.msg-ai.bad,.bubble.a.bad{background:var(--red-lt);box-shadow:none} /* framing only, copy stays --dark */
/* optional avatar row, for threads that show speaker avatars */
.msg-row,.bubble-row{display:flex;gap:.75rem;align-items:flex-end}
.msg-row.user,.bubble-row.user{flex-direction:row-reverse}
.msg-avatar,.avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:500}
.msg-avatar.ai,.avatar.ai{background:var(--teal-lt);color:var(--teal)}
.msg-avatar.usr,.avatar.usr{background:#E8E4DC;color:var(--mid)}
.msg-note,.bubble-note{font-size:var(--text-sm);font-weight:400;color:var(--light);font-style:italic;text-align:center;margin-top:.6rem}

/* ── AMBIGUITY CARDS ── */
.amb-card{border-radius:var(--radius-md);overflow:hidden;margin-bottom:1rem;background:var(--white)}
.amb-header{display:flex;align-items:flex-start;gap:1rem;padding:1.15rem 1.35rem;border-bottom:1px solid var(--rule)}
.amb-badge{flex-shrink:0;padding:.25rem .65rem;border-radius:var(--radius-sm);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.badge-1{background:var(--teal-lt);color:var(--teal)}
.badge-2{background:var(--amber-lt);color:var(--amber)}
.badge-3{background:var(--purple-lt);color:var(--purple)}
.badge-4{background:var(--green-lt);color:var(--green)}
.badge-5{background:var(--purple-lt);color:var(--purple)}
.amb-title{font-size:var(--text-md);font-weight:500;color:var(--dark);margin-bottom:.25rem}
.amb-def{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.5;margin:0}
.amb-examples{display:flex;gap:.6rem;flex-wrap:wrap;padding:.9rem 1.35rem}
.pill{font-family:'DM Mono',monospace;font-size:var(--text-2xs);padding:.3rem .8rem;border-radius:var(--radius-pill);background:#F2EFEA;color:var(--dark)}
.amb-strategy{padding:.75rem 1.35rem;border-top:1px solid var(--rule);font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.5;background:rgba(0,0,0,.015)}
.amb-strategy strong{color:var(--dark);font-weight:500}
.amb-dialog{padding:.9rem 1.35rem;border-top:1px solid var(--rule);background:var(--white)}

/* ── TABLES ── */
.thresh{width:100%;border-collapse:collapse;margin:var(--space-block) 0;font-size:var(--text-sm);font-weight:400}
.thresh th{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--light);padding:.65rem 1rem;text-align:left;border-bottom:1px solid var(--rule);font-weight:400}
.thresh td{padding:.9rem 1rem;border-bottom:1px solid var(--rule);color:var(--mid);vertical-align:top;line-height:1.5}
.thresh tr:last-child td{border-bottom:none}
.thresh .ct{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:400;color:var(--teal);white-space:nowrap}
.thresh .act{font-weight:500;color:var(--dark)}
.thresh tr:nth-child(even) td{background:rgba(3,156,184,.04)}

.sample-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-weight:400}
.sample-table th{text-align:left;padding:.6rem 1rem;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.07em;text-transform:uppercase;color:var(--light);font-weight:400;border-bottom:1px solid var(--rule)}
.sample-table td{padding:.65rem 1rem;border-bottom:1px solid var(--rule);color:var(--mid)}
.sample-table tr:nth-child(even) td{background:rgba(3,156,184,.03)}
.sample-table .yes{color:var(--teal);font-weight:500}
.sample-table .no{color:var(--mid);font-weight:500}
.sample-table .eval{color:var(--amber);font-weight:500}
.sample-table .q{color:var(--dark)}

/* ── OUTCOMES ── */
.outcome-primary{background:var(--teal-lt);border-radius:var(--radius-md);padding:1.5rem;margin-bottom:1rem}
.outcome-primary .card-label{color:var(--teal)}
.outcome-primary p{font-size:var(--text-md);color:var(--dark);line-height:1.6;margin:0}

/* ── ARTIFACTS ── */
.artifact-list{list-style:none;margin:1.25rem 0}
.artifact-list li{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule);align-items:flex-start}
.artifact-list li:first-child{border-top:1px solid var(--rule)}
.artifact-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:9px}
.artifact-title{font-size:var(--text-sm);font-weight:500;color:var(--dark);margin-bottom:.15rem}
.artifact-desc{font-size:var(--text-sm);font-weight:400;color:var(--mid);margin:0;line-height:1.5}
.artifact-box{border-radius:var(--radius-md);overflow:hidden;margin:1rem 0 0;background:var(--white);box-shadow:var(--shadow-sm)}
.artifact-box-header{padding:1rem 1.2rem .3rem;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light)}
.artifact-box-body{padding:.5rem 1.4rem 1.1rem}
.artifact-box-footer{padding:.6rem 1.4rem 1.1rem}

/* ── FOOTER ── */
footer{border-top:1px solid var(--rule);padding:2.5rem 3rem;display:flex;justify-content:space-between;align-items:center;max-width:960px;margin:0 auto}
.footer-name{font-family:'Newsreader',serif;font-size:1rem;font-style:italic;color:var(--mid)}
.footer-tag{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--light)}
.footer-tag a{color:var(--teal);text-decoration:none}
.footer-tag a:hover{text-decoration:underline}

/* ── PIPELINE FLOW ── */
.pipeline-flow{display:flex;align-items:stretch;gap:.75rem;margin:var(--space-block) 0}
.pipeline-group{border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.pipeline-group.design{background:var(--teal-lt);flex:4}
.pipeline-group.design.single{flex:1.2}
.pipeline-group.model{background:rgba(26,25,23,.04);flex:1.2}
.pipeline-group-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;text-align:center;line-height:1.4}
.pipeline-group.design .pipeline-group-label{color:var(--teal)}
.pipeline-group.model .pipeline-group-label{color:var(--light)}
.pipeline-stages{display:flex;flex-direction:row;gap:.5rem;flex:1}
.pipeline-stage{background:var(--white);border-radius:var(--radius-sm);padding:.85rem .8rem;flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0}
.pipeline-stage-num{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--teal);line-height:1}
.pipeline-group.model .pipeline-stage-num{color:var(--light);font-style:italic}
.pipeline-stage-name{font-size:var(--text-sm);font-weight:500;color:var(--dark);line-height:1.3}
.pipeline-stage-desc{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.45}
.pipeline-arrow{display:flex;align-items:center;justify-content:center;color:var(--light);font-size:1.4rem;flex-shrink:0;width:1rem}
.pipeline-annotation{font-family:'Newsreader',serif;font-size:1.12rem;font-style:italic;color:var(--dark);text-align:center;margin:1.75rem 0 0;line-height:1.5}

/* Detailed (deep-dive) pipeline: fully vertical */
.pipeline-flow.detailed{flex-direction:column;align-items:stretch}
.pipeline-flow.detailed .pipeline-group{align-self:stretch}
.pipeline-flow.detailed .pipeline-group.design,.pipeline-flow.detailed .pipeline-group.design.single,.pipeline-flow.detailed .pipeline-group.model{flex:1}
.pipeline-flow.detailed .pipeline-stages{flex-direction:column}
.pipeline-flow.detailed .pipeline-stage{padding:1.15rem 1.2rem;gap:.4rem}
.pipeline-flow.detailed .pipeline-stage-num{font-size:1.4rem}
.pipeline-flow.detailed .pipeline-stage-name{font-size:var(--text-md);line-height:1.3}
.pipeline-flow.detailed .pipeline-arrow{transform:rotate(90deg);margin:.25rem auto;width:auto;font-size:1.6rem}
.pipeline-stage-explain{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.6;margin:.4rem 0 0}
.pipeline-stage-questions{margin-top:.85rem;padding-top:.75rem;border-top:1px dashed var(--rule)}
.pipeline-stage-questions-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--light);margin-bottom:.5rem}
.pipeline-stage-questions ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.pipeline-stage-questions li{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.5;padding-left:.85rem;position:relative}
.pipeline-stage-questions li::before{content:'·';position:absolute;left:.1rem;color:var(--teal);font-weight:700}
.pipeline-stage-note{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.05em;color:var(--light);font-style:italic;margin-top:.75rem;padding-top:.65rem;border-top:1px dashed var(--rule);line-height:1.55}

/* ── AI MODE SPECTRUM ── */
.mode-spectrum{margin:2rem 0;padding:.5rem 0}
.mode-callout-row{display:grid;grid-template-columns:1fr 1fr 1fr;margin-bottom:.85rem}
.mode-callout{grid-column:2;justify-self:center;position:relative;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--teal);background:var(--teal-lt);padding:.4rem .75rem;border-radius:var(--radius-sm);line-height:1}
.mode-callout::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--teal-lt)}
.mode-zones{display:grid;grid-template-columns:1fr 1fr 1fr;border-radius:var(--radius-lg);overflow:hidden}
.mode-zone{padding:1.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:140px}
.mode-conversational{background:var(--purple-lt)}
.mode-blended{background:var(--teal-lt);border-left:2px dashed var(--teal);border-right:2px dashed var(--teal);padding:2rem 1.25rem}
.mode-agentic{background:var(--amber-lt)}
.mode-label{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;margin-bottom:.45rem;line-height:1.15}
.mode-conversational .mode-label{color:var(--purple)}
.mode-blended .mode-label{color:var(--teal)}
.mode-agentic .mode-label{color:var(--amber)}
.mode-desc{font-size:var(--text-sm);font-weight:400;line-height:1.5;color:var(--mid);max-width:200px}
.mode-axis{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;margin-top:1.35rem;padding:0 .25rem}
.mode-axis-end{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--light);white-space:nowrap}
.mode-axis-line{position:relative;height:1px;background:var(--rule)}
.mode-axis-line::before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:5px solid var(--rule)}
.mode-axis-line::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid var(--rule)}
@media (max-width:768px){
  .mode-callout-row{grid-template-columns:1fr;text-align:center}
  .mode-callout{grid-column:1}
  .mode-callout::after{display:none}
  .mode-zones{grid-template-columns:1fr;border-radius:0;overflow:visible;gap:.6rem}
  .mode-zone{border-radius:var(--radius-md);min-height:0;padding:1.5rem 1.25rem}
  .mode-blended{border:2px dashed var(--teal)}
  .mode-desc{max-width:none}
  .mode-axis{grid-template-columns:1fr;gap:.5rem;justify-items:center;text-align:center}
  .mode-axis-line{display:none}
}

/* ── KNOWLEDGE GRAPH ── */
.kgraph-wrap{margin:2rem 0}
/* ── VIZ LEGEND ── one legend treatment for every figure (dot/swatch + label, wraps). The old
   .ambig-legend / .compare-legend / .kgraph-legend names are kept as aliases of this base; the
   kgraph variant layers a tinted, centered panel on top. */
.viz-legend,.ambig-legend,.compare-legend,.kgraph-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.4rem;font-size:var(--text-sm);font-weight:400;color:var(--mid);margin:.9rem 0}
.viz-legend-item,.compare-legend-item,.kgraph-legend-item,.ambig-legend span{display:inline-flex;align-items:center;gap:.5rem}
.viz-legend-dot,.kgraph-legend-dot,.ambig-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
/* kgraph legend: tinted panel + centered + mono labels, layered on the base */
.kgraph-legend{justify-content:center;margin:0 0 1.25rem;padding:.75rem 1rem;background:rgba(232,226,216,.4);border-radius:var(--radius-sm)}
.kgraph-legend-item{gap:.55rem;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);color:var(--dark);text-transform:uppercase}
.kg-dot-inner{background:var(--teal)}
.kg-dot-mid{background:var(--amber)}
.kg-dot-outer{background:var(--red)}
.kg-zone-banner{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--light);text-align:center;font-style:italic;margin:.4rem 0}
.kg-zone-banner::before,.kg-zone-banner::after{content:'';display:inline-block;width:24px;height:1px;background:var(--rule);vertical-align:middle;margin:0 .65rem}
.kgraph-frame{position:relative;width:100%;max-width:1000px;aspect-ratio:1/1;margin:1.5rem auto;container-type:inline-size}
.kgraph{position:absolute;inset:0;width:1000px;height:1000px;transform-origin:top left;transform:scale(calc(100cqi / 1000px))}
.kgraph-svg{position:absolute;inset:0;width:1000px;height:1000px;pointer-events:none;overflow:visible}
.kgraph .conn{fill:none}
.kgraph .conn-inner{stroke:var(--teal);stroke-width:1;opacity:.4}
.kgraph .conn-mid{stroke:var(--amber);stroke-width:.85;opacity:.32}
.kgraph .conn-outer{stroke:var(--red);stroke-width:.7;opacity:.26;stroke-dasharray:4 4}
.kg-node{position:absolute;transform:translate(-50%,-50%);display:inline-block;white-space:nowrap;padding:8px 24px;border-radius:var(--radius-pill);font-family:'DM Sans',sans-serif;font-size:var(--text-sm);font-weight:500;line-height:1;border:1px solid;background:#fff;z-index:2}
.kg-center{background:var(--purple-lt);border-color:var(--purple);color:var(--dark);font-weight:600;z-index:3}
.kg-inner{background:var(--teal-lt);border-color:var(--teal);color:var(--dark)}
.kg-mid{background:var(--amber-lt);border-color:var(--amber);color:var(--dark)}
.kg-outer{background:var(--red-lt);border-color:var(--red);color:var(--dark)}
/* ── DARK MODE: SCOPE NOTE ──
   This site is deliberately LIGHT-FIRST. There is no global dark theme: the palette tokens above
   are not swapped under prefers-color-scheme: dark. The only dark-mode rules are the few below,
   which pin specific components (the knowledge-graph nodes and sticky notes) so they stay legible
   if a browser/OS forces a dark rendering. Do NOT add piecemeal dark overrides elsewhere; if a
   full dark theme is ever wanted, introduce a :root[data-theme="dark"] token set and swap there,
   rather than growing this block. */
@media (prefers-color-scheme: dark){
  .kg-center{background:var(--purple-lt);border-color:var(--purple);color:var(--dark)}
  .kg-inner{background:var(--teal-lt);border-color:var(--teal);color:var(--dark)}
  .kg-mid{background:var(--amber-lt);border-color:var(--amber);color:var(--dark)}
  .kg-outer{background:var(--red-lt);border-color:var(--red);color:var(--dark)}
  .sticky-note{background:#E8E0A0;color:#3A3500;box-shadow:1px 2px 6px rgba(0,0,0,.3)}
  .sticky-note::after{background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.32) 100%)}
  .sticky-col-head{color:#E8E2D8}
  .sticky-col-head svg{color:#9a958c}
}
@media (max-width:860px){
  .kgraph-legend{gap:.85rem;padding:.65rem .75rem}
  .kgraph-legend-item{font-size:var(--text-2xs)}
}

/* ── KNOWLEDGE GRAPH interactivity (hover to focus + popover) ── */
.kgraph-wrap{position:relative}
.kgraph-legend-item{cursor:pointer;border-radius:var(--radius-sm);padding:.15rem .3rem;transition:background .15s}
.kgraph-legend-item:hover,.kgraph-legend-item:focus-visible{background:rgba(26,25,23,.05);outline:none}
.kg-node[tabindex]{cursor:pointer}
.kg-node,.kgraph .conn{transition:opacity .2s ease,box-shadow .2s ease}
.kgraph.focus .kg-node{opacity:.14}
.kgraph.focus .kg-center{opacity:.4}
.kgraph.focus .kg-node.active{opacity:1}
.kgraph.focus .kg-node.active.kg-inner{box-shadow:0 0 0 3px rgba(3,156,184,.25)}
.kgraph.focus .kg-node.active.kg-mid{box-shadow:0 0 0 3px rgba(224,120,32,.22)}
.kgraph.focus .kg-node.active.kg-outer{box-shadow:0 0 0 3px rgba(204,51,32,.2)}
.kgraph.focus .conn{opacity:.05}
.kgraph.focus-inner .conn-inner{opacity:.5}
.kgraph.focus-mid .conn-mid{opacity:.45}
.kgraph.focus-outer .conn-outer{opacity:.4}
.kg-pop{position:absolute;z-index:20;width:210px;background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:.7rem .8rem;opacity:0;pointer-events:none;transition:opacity .18s ease;transform:translate(-50%,-100%)}
.kg-pop.below{transform:translate(-50%,0)}
.kg-pop.show{opacity:1}
.kg-pop-ring{display:inline-block;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;padding:.12rem .4rem;border-radius:var(--radius-sm);margin-bottom:.4rem}
.kg-pop-ring.inner{background:var(--teal-lt);color:var(--teal)}
.kg-pop-ring.mid{background:var(--amber-lt);color:var(--amber)}
.kg-pop-ring.outer{background:var(--red-lt);color:var(--red)}
.kg-pop-title{display:block;font-size:var(--text-sm);font-weight:600;color:var(--dark);line-height:1.3;margin-bottom:.25rem}
.kg-pop-why{display:block;font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.55}
@media (prefers-reduced-motion:reduce){
  .kg-node,.kgraph .conn,.kg-pop{transition:none}
}
/* hidden visually (the radial SVG is the desktop view) but left in the accessibility tree:
   this is the chart's text/table equivalent, not just a responsive swap */
.kg-mobile-list{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kg-tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.kg-tab{display:flex;align-items:center;gap:.5rem;flex:1;justify-content:center;padding:.6rem .5rem;border-radius:var(--radius-md);border:1px solid var(--rule);background:var(--white);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--mid);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.kg-tab.active{background:var(--dark);border-color:var(--dark);color:var(--white)}
.kg-tab.active .kgraph-legend-dot{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.kg-ring-group{display:none;background:var(--white);border-radius:var(--radius-md);padding:1.1rem 1.25rem}
.kg-ring-group.active{display:block}
.kg-ring-head{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--dark);margin-bottom:.5rem}
.kg-ring-head-inner{color:var(--teal)}
.kg-ring-head-mid{color:var(--amber)}
.kg-ring-head-outer{color:var(--red)}
.kg-ring-explain{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.55;margin:0 0 .85rem}
.kg-ring-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.kg-ring-items li{font-size:var(--text-sm);font-weight:400;line-height:1.55;color:var(--mid);padding-top:.6rem;border-top:1px solid var(--rule)}
.kg-ring-items li:first-child{padding-top:0;border-top:none}
.kg-ring-items strong{color:var(--dark);font-weight:600}
@media(max-width:680px){
  .kgraph-legend,.kgraph-frame{display:none}
  .kg-mobile-list{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;display:block}
}

/* ── COMPARISON TABLE ── */
/* .compare-legend / .compare-legend-item inherit from the .viz-legend base above */
.compare-legend{margin:1.25rem 0 .25rem}
.cmp-yes,.cmp-some,.cmp-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;line-height:1;flex-shrink:0}
.cmp-yes{background:var(--green-lt);color:var(--green)}
.cmp-some{background:var(--amber-lt);color:var(--amber)}
.cmp-no{background:var(--red-lt);color:var(--red)}
.cmp-yes svg,.cmp-some svg,.cmp-no svg{display:block;width:14px;height:14px}
.cmp-na{font-family:'DM Mono',monospace;font-size:var(--text-2xs);color:var(--light)}
.compare-wrap{border-radius:var(--radius-md);overflow-x:auto;margin:1rem 0 1.5rem;background:var(--white)}
.compare-table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--text-sm);font-weight:400}
.compare-table th{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light);padding:.85rem .55rem;text-align:center;font-weight:400;background:var(--cream);border-bottom:1px solid var(--rule)}
.compare-table th:first-child{text-align:left;padding-left:1.1rem}
.compare-table th.now-col{color:var(--teal);font-weight:500;background:var(--teal-lt);border-bottom:2px solid var(--teal)}
.compare-table td{padding:.75rem .55rem;border-bottom:1px solid var(--rule);color:var(--mid);text-align:center;vertical-align:middle;line-height:1.4}
.compare-table td:first-child{text-align:left;padding-left:1.1rem;color:var(--dark);font-weight:400}
.compare-table td.now-col{background:rgba(3,156,184,.06);border-left:1px dashed rgba(3,156,184,.35)}
.compare-table tr.cmp-category td{background:var(--cream);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--teal);text-align:left;font-weight:500;padding:.6rem 1.1rem;border-bottom:1px solid var(--rule)}
.compare-table tr:last-child td{border-bottom:none}

/* ── COMPARE-TABLE LEAD STAT ── */
.cmp-stat{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;width:fit-content;max-width:100%;margin:1.5rem 0 1.75rem;padding:1.1rem 1.5rem;border-radius:var(--radius-lg);background:rgba(3,156,184,.09);box-shadow:var(--shadow-md)}
.cmp-stat-num{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.2rem,4vw,2.9rem);line-height:1;color:var(--teal);font-variant-numeric:lining-nums tabular-nums}
.cmp-stat-num .cmp-stat-of{font-size:.42em;font-style:normal;color:var(--light);font-family:'DM Mono',monospace;letter-spacing:.04em;vertical-align:middle}
.cmp-stat-cap{font-size:.95rem;color:var(--mid);max-width:32ch}
.chev{color:var(--light);font-weight:400}

/* ── CHAT COMPARISON ── */
.chat-compare-section{padding:104px 0;border-top:1px solid var(--rule)}
.chat-compare-section .container{max-width:1100px}
.chat-compare-intro{font-family:'Newsreader',serif;font-size:1.2rem;font-style:italic;color:var(--dark);text-align:center;margin:0 auto 2.5rem;line-height:1.5;max-width:560px}
.chat-compare{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.chat-window{border-radius:var(--radius-lg);background:var(--white);display:flex;flex-direction:column;overflow:visible;box-shadow:var(--shadow-lg)}
.chat-window.undesigned{margin-left:160px}
.chat-window.designed{margin-right:160px}
.chat-window-header{padding:.85rem 1.25rem;border-bottom:1px solid var(--rule);border-radius:12px 12px 0 0;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;display:flex;align-items:center;gap:.55rem}
.chat-window.undesigned .chat-window-header{color:var(--red);background:var(--red-lt)}
.chat-window.designed .chat-window-header{color:var(--teal);background:var(--teal-lt)}
.chat-window-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.chat-window.undesigned .chat-window-dot{background:var(--red)}
.chat-window.designed .chat-window-dot{background:var(--teal)}
.chat-window-body{padding:1.25rem;display:flex;flex-direction:column;gap:.95rem;overflow:visible}
.chat-msg{position:relative;display:block}
.chat-msg-row{display:flex;gap:.5rem;align-items:flex-end}
.chat-msg.user .chat-msg-row{flex-direction:row-reverse}
/* scroll-triggered reveal animation is only wired up (via case-study.js) for the
   #chat-undesigned/#chat-designed pair inside .chat-compare; elsewhere (e.g. a plain
   dialog-scene using the same .chat-msg markup) rows should just render visible */
.chat-compare .chat-msg-row{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.chat-compare .chat-msg-row.show{opacity:1;transform:translateY(0)}
.chat-avatar{display:none}
.chat-bubble{max-width:82%;padding:.6rem .85rem;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:400;line-height:1.6;color:var(--dark)}
.chat-msg.ai .chat-bubble{background:transparent;padding:.15rem 0;max-width:none;border-radius:0}
.chat-msg.user .chat-bubble{background:var(--dark);color:#FAF7F2;border-radius:14px 14px 4px 14px;max-width:80%}
.chat-annotation{position:absolute;top:50%;transform:translateY(-50%);width:152px;opacity:0;transition:opacity .4s ease;pointer-events:none;display:flex;flex-direction:column;gap:.85rem}
.chat-annotation.show{opacity:1}
.chat-window.undesigned .chat-annotation{right:calc(100% + 36px);align-items:flex-end}
.chat-window.designed .chat-annotation{left:calc(100% + 36px);align-items:flex-start}
.annotation-item{display:flex;flex-direction:column;gap:.3rem;width:100%}
.chat-window.undesigned .annotation-item{align-items:flex-end}
.chat-window.designed .annotation-item{align-items:flex-start}
.annotation-tag{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;font-weight:500;padding:.18rem .45rem;border-radius:var(--radius-sm);line-height:1;display:inline-block}
.chat-window.undesigned .annotation-tag{background:var(--red-lt);color:var(--red)}
.chat-window.designed .annotation-tag{background:var(--green-lt);color:var(--green)}
.annotation-text{font-size:var(--text-sm);font-weight:400;line-height:1.45;font-style:italic;display:block}
.chat-window.undesigned .annotation-text{color:var(--red);text-align:right}
.chat-window.designed .annotation-text{color:var(--green);text-align:left}
.chat-annotation::after{content:'';position:absolute;top:50%;width:16px;height:1px;opacity:.45}
.chat-window.undesigned .chat-annotation::after{right:-22px;background:var(--red)}
.chat-window.designed .chat-annotation::after{left:-22px;background:var(--green)}
.chat-window.undesigned .chat-msg.ai .chat-bubble{font-size:var(--text-sm);font-weight:400;line-height:1.6;color:var(--mid)}
.chat-bubble .bubble-table{display:grid;grid-template-columns:1fr auto auto;gap:.55rem .9rem;margin:.95rem 0 .35rem;padding:1rem 1.15rem;background:var(--cream);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:400;align-items:center;box-shadow:inset 0 0 0 1px rgba(26,25,23,.05)}
.bubble-table-amount{font-family:'DM Mono',monospace;color:var(--mid);font-size:var(--text-2xs);white-space:nowrap}
.bubble-table-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--green);line-height:1}
.bubble-table-check svg{display:block}
.bubble-table-flag{color:var(--amber);font-size:var(--text-2xs);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.bubble-source{font-size:var(--text-2xs);color:var(--light);font-style:italic;margin:.4rem 0 .65rem;display:block}
.chat-window-footer{padding:.85rem 1.25rem;border-top:1px solid var(--rule);border-radius:0 0 14px 14px;text-align:center;opacity:0;transition:opacity .5s ease}
.chat-window-footer.show{opacity:1}
.chat-window.undesigned .chat-window-footer{color:var(--light);background:var(--cream);font-family:'DM Sans',sans-serif;font-size:var(--text-sm);font-weight:400;font-style:italic}
.chat-window.designed .chat-window-footer{color:var(--green);background:var(--green-lt);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase}
/* ── Otto shell host: chat-compare rendered inside the Otto UI kit ── */
.chat-window.otto-host{background:transparent;box-shadow:none;border-radius:0;gap:0}
.chat-window.otto-host .chat-window-header{border:none;border-radius:var(--radius-sm);margin-bottom:.85rem}
.chat-window.otto-host .otto-app{border-radius:var(--radius-lg)}
.chat-window.otto-host .chat-window-footer{border:none;border-radius:var(--radius-sm);margin-top:.85rem}
/* message layout inside the Otto thread: block rows keep JS reveal + annotation anchoring */
.otto-host .otto-thread .chat-msg{position:relative;display:block}
.otto-host .otto-thread .chat-msg-row{display:block;align-items:stretch}
.otto-host .otto-thread .chat-msg.ai .otto-ai{max-width:100%}
/* fit Otto type to the narrower case-study columns */
.otto-host .otto-user-bubble{font-size:var(--text-sm);font-weight:600;padding:.55rem .8rem}
.otto-host .otto-ai-steps{font-size:var(--text-sm);font-weight:400}
.otto-host .otto-ai-body{font-size:var(--text-sm);font-weight:400;line-height:1.6}
.otto-host .otto-ai-body p{margin:0 0 .7rem}
.otto-host.undesigned .otto-ai-body{color:var(--mid)}
.otto-host .otto-ai-body .bubble-table{display:grid;grid-template-columns:1fr auto auto;gap:.55rem .9rem;margin:.7rem 0 .35rem;padding:1rem 1.15rem;background:var(--cream);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:400;align-items:center;box-shadow:inset 0 0 0 1px rgba(26,25,23,.05)}
/* annotations clear the left rail (undesigned) / sit in the outer gutter (designed) */
.chat-window.otto-host .chat-annotation{width:140px}
.chat-window.otto-host.undesigned .chat-annotation{right:calc(100% + 80px)}
.chat-window.otto-host.designed .chat-annotation{left:calc(100% + 32px)}
@media(max-width:900px){
  .card-grid-4{grid-template-columns:1fr 1fr}
  .chat-window.otto-host .chat-annotation{width:auto;right:auto;left:auto}
  .chat-window.otto-host .chat-window-header{align-self:flex-start}
  .chat-compare-section .container{max-width:960px}
  .chat-window.undesigned,.chat-window.designed{margin-left:0;margin-right:0}
  .chat-compare{grid-template-columns:1fr}
  .chat-annotation{position:static;transform:none;width:auto;margin:.6rem 0 0;padding-left:.85rem;border-left:2px solid;flex-direction:column;gap:.65rem}
  .chat-window.undesigned .chat-annotation,.chat-window.designed .chat-annotation{align-items:flex-start!important}
  .chat-window.undesigned .annotation-item,.chat-window.designed .annotation-item{align-items:flex-start}
  .chat-window.undesigned .chat-annotation{border-left-color:var(--red)}
  .chat-window.designed .chat-annotation{border-left-color:var(--green)}
  .chat-window.undesigned .annotation-text{text-align:left}
  .chat-annotation::after{display:none}
}

/* ── ANIMATION ── */
.fade-in{opacity:0;transform:translateY(16px);animation:fadeUp .65s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}

/* ── MOBILE ── */
@media(max-width:768px){
  .pipeline-flow{flex-direction:column}
  .pipeline-stages{flex-direction:column}
  .pipeline-arrow{transform:rotate(90deg);margin:.25rem auto;font-size:1.6rem}
  .pipeline-group.design,.pipeline-group.design.single,.pipeline-group.model{flex:1}
}
@media(max-width:680px){
  nav{padding:0 1.5rem}
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--cream);padding:.25rem 1.5rem .75rem;border-bottom:1px solid var(--rule);box-shadow:var(--shadow-md)}
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:.65rem 0;border-top:1px solid var(--rule)}
  .nav-links li:first-child a{border-top:none}
  .nav-case-nav{gap:.75rem}
  .hero,.container{padding-left:1.5rem;padding-right:1.5rem}
  section+section::before{width:calc(100% - 3rem)}
  .hero-meta{grid-template-columns:1fr 1fr;gap:1.25rem}
  .meta-item{border-right:none!important;padding:0!important}
  .card-grid-3,.card-grid-2,.card-grid-4{grid-template-columns:1fr}
  .year-row{grid-template-columns:60px 1fr}
  .thresh,.sample-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  footer{flex-direction:column;gap:.4rem;text-align:center}
  /* Responsive comparison table: reflow rows into stacked cards instead of horizontal scroll */
  .compare-wrap{overflow-x:visible;background:none;border-radius:0}
  .compare-table{min-width:0}
  .compare-legend{font-size:var(--text-2xs);gap:1rem}
  .compare-table thead{display:none}
  .compare-table,.compare-table tbody,.compare-table tr{display:block;width:100%}
  .compare-table tr.cmp-category{border-radius:var(--radius-sm);margin:1.1rem 0 .5rem}
  .compare-table tr.cmp-category:first-child{margin-top:0}
  .compare-table tr:not(.cmp-category){background:var(--white);border-radius:var(--radius-md);margin-bottom:.6rem;padding:.85rem 1.1rem;border-bottom:none}
  .compare-table td{display:block;padding:0;border-bottom:none;text-align:left}
  .compare-table td:first-child{font-weight:500;color:var(--dark);margin-bottom:.55rem;padding-left:0}
  .compare-table td[data-label]{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-top:1px solid var(--rule)}
  .compare-table td[data-label]::before{content:attr(data-label);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--light)}
  .compare-table td.now-col{background:none}
  /* Hybrid Response Framework table: long-form content needs stacked labels, not space-between rows */
  .hybrid-wrap .compare-table tr:not(.cmp-category){padding:1rem 1.1rem}
  .hybrid-wrap .compare-table td:first-child{font-size:var(--text-md);margin-bottom:.7rem}
  .hybrid-wrap .compare-table td[data-label]{display:block;padding:.7rem 0}
  .hybrid-wrap .compare-table td[data-label]::before{display:block;margin-bottom:.3rem}
}
@media(max-width:480px){
  .nav-brand{display:none}
}

/* ===== Visual grids (stat cards, before/after, vs.) ===== */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;margin:1.75rem 0}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.5rem 0}
.vs-3{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.25rem;margin:1.5rem 0}
@media(max-width:680px){
  .stat-grid{grid-template-columns:1fr}
  .split-2,.vs-3{grid-template-columns:1fr}
  .vs-3 .vs-arrow{transform:rotate(90deg)}
}

/* ===== Hero TL;DR: scannable opener shared across all case studies ===== */
.hero-tldr{margin:2rem 0 2.75rem}
.tldr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:1.5rem}
.tldr-stat{background:rgba(3,156,184,.09);box-shadow:var(--shadow-md);border-radius:var(--radius-md);padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.35rem}
.tldr-num{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2rem,4vw,2.85rem);line-height:1;color:var(--teal);font-variant-numeric:lining-nums tabular-nums}
.tldr-num.sm{font-size:clamp(1.15rem,2.1vw,1.5rem)}
.tldr-num .u{font-size:.5em;font-style:italic;color:var(--mid);margin-left:.04em}
.tldr-cap{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.4}
.tldr-htitle{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.15;color:var(--teal)}
/* Hero lede: front-loaded situation -> action -> result punchline under the H1 */
.hero-lede{font-family:'Cormorant Garamond',serif;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.35;font-weight:500;color:var(--dark);max-width:46rem;margin:0 0 1.9rem}
.hero-lede strong{color:var(--teal);font-weight:600}
.tldr-points{display:grid}
.tldr-point{display:grid;grid-template-columns:132px 1fr;gap:1.5rem;padding:.95rem 0;border-top:1px solid var(--rule);align-items:baseline}
.tldr-point:last-child{border-bottom:1px solid var(--rule)}
.tldr-plabel{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);line-height:1.6}
.tldr-ptext{font-size:var(--text-sm);font-weight:400;color:var(--dark);line-height:1.6;margin:0}
.tldr-ptext strong{font-weight:500}
@media(max-width:680px){
  .tldr-stats{grid-template-columns:1fr}
  .tldr-point{grid-template-columns:1fr;gap:.3rem;padding:.85rem 0}
}

/* ===== Interactive disambiguation demo (disambiguation case study) ===== */
.dz{margin:1.75rem 0 .5rem}
.dz-prompt{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--light);margin-bottom:.75rem}
.dz-queries{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.dz-q{font-family:'DM Mono',monospace;font-size:var(--text-2xs);color:var(--mid);background:rgba(3,156,184,.06);border:none;border-radius:var(--radius-sm);padding:.55rem .85rem;cursor:pointer;transition:background .15s,color .15s;text-align:left}
.dz-q:hover{background:var(--teal-lt);color:var(--dark)}
.dz-q.on{background:var(--teal);color:#fff}
.dz-stage{background:rgba(26,25,23,.03);border-radius:var(--radius-lg);padding:1.5rem 1.6rem 1.6rem}
.dz-toggle{display:inline-flex;background:var(--cream);border-radius:var(--radius-md);padding:3px;margin-bottom:1.35rem;gap:2px}
.dz-toggle button{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--light);background:none;border:none;border-radius:var(--radius-sm);padding:.5rem .95rem;cursor:pointer;transition:background .15s,color .15s}
.dz-toggle button.on{background:var(--white)}
.dz-toggle button[data-mode="bad"].on{color:var(--red)}
.dz-toggle button[data-mode="good"].on{color:var(--teal)}
.dz-chat{display:flex;flex-direction:column;gap:.65rem;max-width:580px}
.dz-row{display:flex}
.dz-row.user{justify-content:flex-end}
.dz-bubble{padding:.72rem 1rem;font-size:var(--text-sm);font-weight:400;line-height:1.55;border-radius:var(--radius-lg);max-width:90%;white-space:pre-line}
.dz-bubble.u{background:var(--bubble-user-bg);color:var(--bubble-user-ink);border-bottom-right-radius:5px}
.dz-bubble.a{background:var(--white);color:var(--dark);border-bottom-left-radius:5px}
.dz.bad .dz-bubble.a{color:var(--mid)}
.dz-ai-wrap{transition:opacity .18s ease}
.dz-note{font-size:var(--text-sm);font-weight:400;color:var(--red);font-style:italic;margin-top:.85rem;max-width:580px;display:none}
.dz.bad .dz-note{display:block}
.dz-meta{display:flex;flex-wrap:wrap;gap:1.1rem 2.25rem;margin-top:1.35rem;padding-top:1.15rem;border-top:1px solid var(--rule)}
.dz.bad .dz-meta{display:none}
.dz-tag{display:flex;flex-direction:column;gap:.3rem;max-width:300px}
.dz-tag-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.13em;text-transform:uppercase;color:var(--light)}
.dz-tag-val{font-size:var(--text-sm);color:var(--dark);font-weight:500;line-height:1.35}
.dz-tag-gloss{font-size:var(--text-sm);color:var(--mid);line-height:1.45;font-weight:400}
@media(prefers-reduced-motion:reduce){.dz-ai-wrap{transition:none}}
@media(max-width:680px){.dz-stage{padding:1.25rem}.dz-meta{gap:1rem}}

/* ===== Annotated prompt (numbered marks + design-decision legend) ===== */
.pa-mark{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-sm);background:var(--teal-lt);color:var(--teal);font-family:'DM Mono',monospace;font-size:var(--text-2xs);font-weight:500;font-style:normal;line-height:1;vertical-align:2px;margin-left:.3rem}
.pa-head{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--light);margin:1.5rem 0 1rem}
.pa-legend{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.75rem;margin:0 0 1.75rem}
.pa-item{display:flex;gap:.65rem;align-items:flex-start}
.pa-item .pa-mark{margin:2px 0 0;flex-shrink:0}
.pa-tag{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light);display:block;margin-bottom:.25rem}
.pa-text{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.55;margin:0}
@media(max-width:680px){.pa-legend{grid-template-columns:1fr}}

/* ===== Sticky-note research findings ===== */
.sticky-research{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem 2.5rem;margin:2rem auto 1rem;padding:.5rem 0 1rem}
.sticky-col{display:flex;flex-direction:column;flex:0 1 180px;max-width:180px;min-width:150px}
.sticky-col-head{display:flex;align-items:center;justify-content:center;gap:.45rem;font-family:'DM Sans',sans-serif;font-size:var(--text-sm);font-weight:500;color:var(--dark);line-height:1.3;text-align:center;margin-bottom:1.1rem}
.sticky-col-head svg{width:15px;height:15px;flex-shrink:0;color:var(--mid)}
.sticky-stack{display:flex;flex-direction:column;gap:1.1rem}
.sticky-note{position:relative;background:#FFF9C4;color:#4A4000;font-family:'Shadows Into Light',cursive;font-weight:400;font-size:var(--text-sm);line-height:1.5;padding:.9rem 1rem 1.15rem;box-shadow:1px 2px 5px rgba(0,0,0,.1);transform-origin:center}
.sticky-note::after{content:'';position:absolute;bottom:0;right:0;width:14px;height:14px;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.18) 100%);pointer-events:none}
.sticky-note.rot-a{transform:rotate(-0.8deg)}
.sticky-note.rot-b{transform:rotate(0.7deg)}
.sticky-note.rot-c{transform:rotate(-1.1deg)}
.sticky-note.rot-d{transform:rotate(1deg)}
@media (max-width:520px){
  .sticky-research{gap:1.5rem}
  .sticky-col{flex-basis:160px;min-width:140px}
}

/* ── ANCHOR OFFSET (nav is 56px tall) ── */
section[id]{scroll-margin-top:68px}

/* ── WORKFLOW & SOURCES (interactive product demos) ── */
.chip{display:inline-flex;align-items:center;gap:.28rem;background:var(--teal-lt);border-radius:var(--radius-sm);padding:.05rem .42rem;font-size:.92em;font-weight:500;color:var(--teal);white-space:nowrap}
.chip::before{content:'';width:9px;height:9px;flex-shrink:0;background:currentColor;-webkit-mask:var(--ci) center/contain no-repeat;mask:var(--ci) center/contain no-repeat}
.chip,.wfp-src-ic{--ci:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cpath d="M2.5 0h5L10 2.5V12H2.5z"/%3E%3C/svg%3E')}
.p{--ci:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Ccircle cx="6" cy="3.4" r="2.6"/%3E%3Cpath d="M.8 12c.7-3 2.9-4.4 5.2-4.4s4.5 1.4 5.2 4.4z"/%3E%3C/svg%3E')}
.db{--ci:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cellipse cx="6" cy="2.2" rx="4.5" ry="2.2"/%3E%3Cpath d="M1.5 2.2h9v7.6c0 1.2-2 2.2-4.5 2.2s-4.5-1-4.5-2.2z"/%3E%3C/svg%3E')}
.pc{--ci:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cpath d="M2 2h8v6.5H2z"/%3E%3Cpath d="M1 9.5h10L12 11.5H0z"/%3E%3C/svg%3E')}
.team{--ci:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Ccircle cx="4" cy="3.6" r="2.2"/%3E%3Cpath d="M.3 11c.5-2.4 2-3.6 3.7-3.6S7.2 8.6 7.7 11z"/%3E%3Ccircle cx="9" cy="4" r="1.8"/%3E%3Cpath d="M8.3 11c.3-1.7 1.2-2.9 2.6-2.9.5 0 .9.1 1.1.2V11z"/%3E%3C/svg%3E')}
.tkt{--ci:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cpath d="M0 3h12v2.3a1.4 1.4 0 0 0 0 2.8v2.3H0V8.1a1.4 1.4 0 0 0 0-2.8z"/%3E%3C/svg%3E')}
.wfp{position:relative;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-lg);overflow:hidden;max-width:460px;margin:0 auto}
.wfp-head{padding:.9rem 1rem .4rem;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:.45rem}
.wfp-head::before{content:'';width:12px;height:12px;flex-shrink:0;background:var(--dark);-webkit-mask:var(--otto) center/contain no-repeat;mask:var(--otto) center/contain no-repeat;--otto:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 0c.7 6.3 5 10.6 11.3 11.3v1.4C17 13.4 12.7 17.7 12 24c-.7-6.3-5-10.6-11.3-11.3v-1.4C7 10.6 11.3 6.3 12 0z"/%3E%3C/svg%3E')}
.wfp-body{padding:1rem;display:flex;flex-direction:column;gap:.75rem;height:560px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.wfp-fade{opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
.wfp-fade.show{opacity:1;transform:none}
.wfp-user{display:flex;justify-content:flex-end}
.wfp-user span{background:var(--bubble-user-bg);color:var(--bubble-user-ink);border-radius:var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);padding:.45rem .7rem;font-size:var(--text-sm);font-weight:400;line-height:1.45;max-width:85%}
@keyframes wfpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wfp-answer{display:none;font-size:var(--text-sm);font-weight:400;color:var(--dark);line-height:1.6;padding:.05rem .1rem}
.wfp-answer.show{display:block;animation:wfpIn .5s ease}
.wfp-answer .wfp-rec{color:var(--teal)}

/* ── answer action row: feedback icons + collapsed pill ── */
.wfp-actions{display:none;align-items:center;gap:.75rem;padding:.05rem .1rem}
.wfp-actions.show{display:flex;animation:wfpIn .5s ease}
.wfp-fbk{display:flex;align-items:center;gap:.7rem;color:var(--light)}
.wfp-fbk svg{width:14px;height:14px;cursor:pointer;transition:color .15s}
.wfp-fbk svg:hover{color:var(--mid)}
.wfp-pill{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;background:rgba(26,25,23,.05);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:.34rem .7rem .34rem .55rem;font-family:inherit;font-size:var(--text-2xs);font-weight:500;color:var(--dark);cursor:pointer;transition:background .15s,border-color .15s}
.wfp-pill:hover{background:var(--teal-lt);border-color:var(--teal-mid)}

/* ── loader card (processing only, full width) ── */
.wfp-load{display:none;width:100%;text-align:left;background:transparent;color:var(--teal);border:none;font-family:inherit;font-weight:500;cursor:pointer;padding:.7rem 1rem}
.wfp.loading .wfp-load{display:block}
.wfp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.7rem}
.wfp-unit-title{font-size:var(--text-sm);font-weight:500;color:var(--dark);line-height:1.4}
.wfp-unit-title .wfp-rec{color:var(--teal)}
.wfp-notify{flex-shrink:0;font-size:var(--text-2xs);font-weight:500;color:var(--teal);border:1px solid rgba(3,156,184,.4);border-radius:var(--radius-sm);padding:.28rem .6rem;background:var(--white);white-space:nowrap}
.wfp-prog-row{display:flex;align-items:center;gap:.65rem;margin-bottom:.65rem}
.wfp-prog-row .wfp-bar{flex:1}
.wfp-phase-row{display:flex;align-items:center;gap:.55rem;margin-bottom:.2rem}
.wfp-phase{font-size:var(--text-sm);font-weight:400;color:var(--dark)}
.wfp-steps{font-size:var(--text-2xs);font-weight:500;color:var(--dark);background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:.15rem .6rem;white-space:nowrap}
.wfp-bar{height:6px;border-radius:var(--radius-sm);background:rgba(26,25,23,.1);overflow:hidden}
.wfp-bar i{display:block;height:100%;width:0;background:var(--teal);border-radius:var(--radius-sm);transition:width 1.4s ease}
.wfp-load-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:.55rem}
.wfp-est{font-size:var(--text-2xs);color:var(--light);white-space:nowrap}
.wfp-load-hint{font-size:var(--text-2xs);color:var(--teal);display:inline-flex;align-items:center;gap:.3rem}
.wfp-chevron{color:var(--light);font-size:var(--text-2xs);line-height:1;display:inline-block;transition:transform .25s ease}
.wfp-load-hint .wfp-chevron{color:var(--teal)}
.wfp.open .wfp-load .wfp-chevron,.wfp.open .wfp-pill .wfp-chevron{transform:rotate(180deg)}
.wfp-view-ic{display:inline-flex;flex-shrink:0}
.wfp-view-ic span{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1.5px var(--white)}
.wfp-view-ic span+span{margin-left:-4px}

/* ── steps panel (both states) ── */
.wfp-stack{display:flex;flex-direction:column}
.wfp-panel{max-height:0;overflow:hidden;transition:max-height .45s ease;border:1px solid transparent;border-radius:var(--radius-md)}
.wfp.open .wfp-panel{max-height:3000px;background:rgba(26,25,23,.035);border-color:var(--rule)}
.wfp.loading.open .wfp-load{border-bottom-color:transparent;border-radius:12px 12px 0 0}
.wfp.loading.open .wfp-panel{margin-top:-1px;border-top-color:transparent;border-radius:0 0 12px 12px}
.wfp-panel-in{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.wfp-panel-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.1rem}
.wfp-panel-title{font-size:var(--text-sm);font-weight:500;color:var(--dark)}
.wfp-panel-title .wfp-rec{color:var(--teal)}
.wfp-filter{display:inline-flex;flex-shrink:0;border:1px solid var(--rule);border-radius:var(--radius-sm);overflow:hidden;background:var(--white)}
.wfp-filter button{border:none;background:none;font-family:'DM Sans',sans-serif;font-size:var(--text-2xs);padding:.28rem .6rem;cursor:pointer;color:var(--mid)}
.wfp-filter button.on{background:var(--teal);color:#fff}
.wfp-group{font-size:var(--text-sm);font-weight:600;color:var(--dark);margin-top:.4rem}
.wfp-item{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.65}
.wfp-item::before{content:'';width:14px;height:14px;flex-shrink:0;margin-top:2px;background:var(--teal);-webkit-mask:var(--ck) center/contain no-repeat;mask:var(--ck) center/contain no-repeat;--ck:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"%3E%3Ccircle cx="8" cy="8" r="6.4" stroke="black" stroke-width="1.3"/%3E%3Cpath d="M5.1 8.3l1.9 1.9 3.9-4.2" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E')}
.wfp-item .chip{background:var(--white);cursor:pointer;transition:background .15s,box-shadow .15s}
.wfp-item .chip:hover{background:var(--teal-lt);box-shadow:0 0 0 1px var(--teal-mid)}
.wfp-why{display:flex;align-items:baseline;gap:.35rem;margin-top:.15rem}
.wfp-why-tag{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;background:var(--amber-lt);color:var(--amber);padding:.08rem .32rem;border-radius:var(--radius-sm);flex-shrink:0}
.wfp-why-text{font-size:var(--text-2xs);color:var(--mid);font-style:italic;line-height:1.5}
.wfp-srcs{display:none;flex-direction:column;gap:.5rem}
.wfp.sources .wfp-srcs{display:flex}
.wfp.sources .wfp-group,.wfp.sources .wfp-item{display:none!important}
.wfp-src{display:flex;align-items:center;gap:.65rem;background:var(--white);border-radius:var(--radius-md);padding:.55rem .7rem;text-decoration:none;transition:transform .15s}
.wfp-src:hover{box-shadow:0 0 0 1px rgba(3,156,184,.4);transform:translateY(-1px)}
.wfp-src-ic{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--teal-lt);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.wfp-src-ic::before{content:'';width:12px;height:12px;background:var(--teal);-webkit-mask:var(--ci) center/contain no-repeat;mask:var(--ci) center/contain no-repeat}
.wfp-src-m{display:flex;flex-direction:column;min-width:0}
.wfp-src-t{font-size:var(--text-sm);font-weight:500;color:var(--teal);line-height:1.35}
.wfp-src-d{font-size:var(--text-2xs);color:var(--light);line-height:1.35}
.wfp-src-a{margin-left:auto;color:var(--teal);font-size:var(--text-sm);font-weight:400;flex-shrink:0}
.wfp.loading .wfp-panel-top{display:none}
.wfp.loading .wfp-panel-in>.wfp-group,.wfp.loading .wfp-panel-in>.wfp-item{display:none}
.wfp.loading .wfp-panel-in>.wfp-group.on{display:block}
.wfp.loading .wfp-panel-in>.wfp-item.on{display:flex}
.wfp-live{display:none;align-items:center;gap:.5rem;font-size:var(--text-sm);font-weight:400;color:var(--mid);margin-top:.25rem}
.wfp-live em{font-style:italic}
.wfp.loading .wfp-live{display:flex}

/* ── top before/after: animated "steps checking off" ── */
.tv-group,.tv-item{opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.tv-group.show,.tv-item.show{opacity:1;transform:none}
.tv-ck{position:relative;width:15px;height:15px;flex-shrink:0;margin-top:3px}
.tv-ck::before{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--teal-mid);border-top-color:transparent;animation:wfpspin .7s linear infinite}
.tv-ck.done::before{border:0;border-radius:0;animation:none;background:var(--teal);-webkit-mask:var(--ck) center/contain no-repeat;mask:var(--ck) center/contain no-repeat;--ck:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"%3E%3Ccircle cx="8" cy="8" r="6.4" stroke="black" stroke-width="1.3"/%3E%3Cpath d="M5.1 8.3l1.9 1.9 3.9-4.2" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E')}
.wfp-spin{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--teal);border-top-color:transparent;flex-shrink:0;animation:wfpspin .7s linear infinite}
@keyframes wfpspin{to{transform:rotate(360deg)}}
.wfp-replay-row{text-align:center;margin-top:.7rem}
.wfp-replay{display:inline-flex;align-items:center;gap:.4rem;background:none;border:none;padding:.2rem 0;color:var(--teal);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.wfp-replay:hover{color:var(--dark)}
.wfp-replay svg{width:12px;height:12px}

/* ── ACCEPTANCE-CRITERIA CHECKLIST (spec-excerpt style) ── */
.crit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.crit-item{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--text-sm);font-weight:400;color:var(--dark);line-height:1.5}
.crit-item::before{content:'';width:14px;height:14px;flex-shrink:0;margin-top:3px;background:var(--teal);-webkit-mask:var(--crit-ck) center/contain no-repeat;mask:var(--crit-ck) center/contain no-repeat;--crit-ck:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"%3E%3Ccircle cx="8" cy="8" r="6.4" stroke="black" stroke-width="1.3"/%3E%3Cpath d="M5.1 8.3l1.9 1.9 3.9-4.2" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E')}
.crit-box{background:rgba(26,25,23,.035);border-radius:var(--radius-md);padding:1.1rem 1.3rem;margin:1.5rem 0}

/* ── DIMENSION PILL ROW (jump links between related surfaces) ── */
.dim-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.dim-pill{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--teal-lt);border-radius:var(--radius-pill);padding:.42rem .9rem;text-decoration:none;transition:background .15s}
.dim-pill:hover{background:var(--teal-mid)}
.dim-pill.out{color:var(--mid);background:rgba(26,25,23,.05)}
.dim-pill.out:hover{background:rgba(26,25,23,.09)}

/* ── STACKED TRUST-BOUNDARY RINGS (condensed kg-ring reuse, always expanded) ── */
.trust-rings{display:flex;flex-direction:column;gap:1rem;margin:1.75rem 0}
.trust-rings .kg-ring-group{display:block}

/* ── BOLD CARD SET (ported from the orchestration-bold prototype; available design-system-
   wide, not yet wired into any page's markup: see the descoped per-section retrofit) ── */
.taxo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;margin:1.75rem 0}
.taxo-card{border-radius:var(--radius-md);background:var(--white);box-shadow:var(--shadow-md);padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.taxo-card.taxo-featured{background:var(--teal-lt);box-shadow:0 0 0 1px rgba(3,156,184,.3),var(--shadow-md)}
.taxo-num{font-family:'DM Mono',monospace;font-size:var(--text-2xs);color:var(--light)}
.taxo-featured .taxo-num{color:var(--teal)}
.taxo-name{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.2rem;color:var(--dark)}
.taxo-desc{font-size:var(--text-sm);font-weight:400;line-height:1.5;color:var(--mid);margin:0}
.taxo-badge{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(3,156,184,.35);padding:.2rem .5rem;border-radius:var(--radius-sm);align-self:flex-start;margin-top:.15rem}
@media(max-width:820px){.taxo-row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.taxo-row{grid-template-columns:1fr}}

.sp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start;margin:0 0 1.25rem}
.sp-code{border-radius:var(--radius-lg);overflow:hidden;background:#1b201d;box-shadow:var(--shadow-lg)}
.sp-code-bar{display:flex;align-items:center;gap:6px;padding:.7rem .9rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sp-code-bar i{width:10px;height:10px;border-radius:50%;display:inline-block}
.sp-code-bar .d1{background:#E0736A}
.sp-code-bar .d2{background:#E3B15F}
.sp-code-bar .d3{background:#8FBF6E}
.sp-code-bar span{margin-left:auto;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);color:#8f948d;text-transform:uppercase}
.sp-code-body{padding:1.3rem 1.4rem}
.sp-code-body p{font-family:'DM Mono',monospace;font-size:var(--text-xs);line-height:1.85;color:#d6dbd4;margin-bottom:1rem}
.sp-code-body strong{color:#eef1ec;font-weight:500}
.sp-code-body .pa-mark{background:rgba(88,196,226,.18);color:#7FD0E8}
.sp-legend.pa-legend{grid-template-columns:1fr;gap:1.15rem;margin:0}
@media(max-width:820px){.sp-grid{grid-template-columns:1fr}}

/* SEVERITY BAR: red/amber/green fails colour-blind separation, so the per-segment value label
   (.ambig-pct) is MANDATORY, never color alone. The :has() guard below flags any segment shipped
   without one with a dashed red outline, so a missing label is caught in review, not in prod. */
.ambig-fig{margin:0 0 1.25rem}
.ambig-bar{display:flex;height:34px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 1px 2px rgba(26,25,23,.06)}
.ambig-seg{display:flex;align-items:center;justify-content:center;min-width:2.5rem}
.ambig-seg:not(:has(.ambig-pct)){outline:2px dashed var(--red);outline-offset:-2px}
.ambig-pct{font-family:'DM Mono',monospace;font-size:var(--text-2xs);font-weight:500;color:#fff}
.ambig-high{background:var(--red)}
.ambig-mid{background:var(--amber)}
.ambig-low{background:var(--green)}
/* .ambig-legend inherits from the .viz-legend base above */
.ambig-legend{margin:.6rem 0 0}
.ambig-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.ambig-dot.ambig-high{background:var(--red)}
.ambig-dot.ambig-mid{background:var(--amber)}
.ambig-dot.ambig-low{background:var(--green)}

.proof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:1.5rem 0}
.proof-card-lg{border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-md);padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.proof-card-tag{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light)}
.proof-card-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.3rem;color:var(--dark);line-height:1.25;margin:0}
.proof-card-desc{font-size:var(--text-sm);font-weight:400;color:var(--mid);line-height:1.65;margin:0}
@media(max-width:820px){.proof-row{grid-template-columns:1fr}}

.frame-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin:1.5rem 0}
.frame-card{border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-md);padding:1.4rem 1.5rem}
.frame-card-design{background:var(--teal-lt);box-shadow:0 0 0 1px rgba(3,156,184,.3),var(--shadow-md)}
.frame-tag{display:block;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--light);margin-bottom:.6rem}
.frame-tag-design{color:var(--teal)}
.frame-text{font-size:var(--text-md);color:var(--mid);line-height:1.6;margin:0}
.frame-text strong{color:var(--dark);font-weight:500}
.frame-vs-mark{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:var(--light)}
@media(max-width:680px){.frame-vs{grid-template-columns:1fr}.frame-vs-mark{justify-self:center}}

.hybrid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:0 0 1.5rem}
.hybrid-cell{border-radius:var(--radius-md);background:var(--white);box-shadow:var(--shadow-sm);padding:1.1rem 1.2rem}
.hybrid-cell .taxo-label{margin-bottom:.6rem}
.hybrid-what{font-size:var(--text-sm);font-weight:400;color:var(--dark);line-height:1.5;margin:0 0 .5rem}
.hybrid-why{font-size:var(--text-sm);font-weight:400;color:var(--light);line-height:1.55;margin:0}
@media(max-width:820px){.hybrid-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hybrid-grid{grid-template-columns:1fr}}

.wj-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-md);background:var(--teal-lt);color:var(--teal);margin-bottom:.75rem}
.wj-icon svg{width:18px;height:18px}

.ai-sample-card{border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-md);margin:1.75rem 0;overflow:hidden}
.ai-sample-head{padding:.8rem 1.4rem;background:var(--cream);border-bottom:1px solid var(--rule);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--light);display:flex;justify-content:space-between;align-items:center}
.ai-sample-cap{font-style:italic;text-transform:none;letter-spacing:.04em}
.ai-sample-body{padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.9rem}
.ai-sample-msg{border-radius:var(--radius-lg);padding:.7rem 1rem;font-size:var(--text-sm);font-weight:400;line-height:1.6;max-width:88%}
.ai-sample-user{align-self:flex-end;background:var(--dark);color:#F4F1EA;font-weight:500}
.ai-sample-ai{align-self:flex-start;background:var(--cream);color:var(--mid);box-shadow:var(--shadow-sm)}
.ai-sample-foot{padding:.9rem 1.5rem;border-top:1px solid var(--rule);background:var(--cream);display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.ai-sample-pill{padding:.32rem .65rem;border-radius:var(--radius-sm);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.05em;font-weight:500}
.ai-sample-pill-ok{background:var(--green-lt);color:var(--green);display:inline-flex;align-items:center;gap:.35rem}
.ai-sample-pill-bad{background:var(--red-lt);color:var(--red)}
.ai-sample-but{color:var(--light);font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;margin:0 .25rem}

/* ── VISUALLY HIDDEN (accessible-only content) ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── FOCUS RING ── one keyboard-focus affordance across every interactive element. Components
   with a bespoke focus treatment (e.g. .kgraph-legend-item) are more specific and still win. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}

/* ══════════════ DATA-VIZ COHESION ══════════════
   Shared figure anatomy so every chart is built the same way: a .viz-eyebrow, the .viz-graphic,
   an optional .viz-legend, and a .viz-note. All read the same tokens. The .ba-fig before/after
   figure and the severity .ambig-bar are specialized instances of this same anatomy. */
.viz-fig{margin:1.75rem 0}
.viz-eyebrow{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--light);margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.viz-eyebrow::before{content:'';width:24px;height:1px;background:var(--teal);flex-shrink:0}
.viz-graphic{margin:0}
.viz-note{font-size:var(--text-sm);font-weight:400;color:var(--light);line-height:1.55;margin:1.25rem 0 0}

/* Single-metric horizontal bar: one value shown as a proportion. Teal fill = the site's own
   positive-proof metric (never decorative). For a red/amber/green severity split use .ambig-bar
   instead, where per-value labels are mandatory. Set the fill inline: style="--val:68%". */
.metric-bar{margin:1.1rem 0}
.metric-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.45rem}
.metric-bar-label{font-size:var(--text-sm);color:var(--dark);line-height:1.3}
.metric-bar-val{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--teal);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.metric-bar-track{height:10px;border-radius:var(--radius-pill);background:rgba(26,25,23,.08);overflow:hidden}
.metric-bar-fill{height:100%;width:var(--val,0%);border-radius:var(--radius-pill);background-image:var(--grad-noise),linear-gradient(90deg,var(--grad-stops));background-blend-mode:overlay,normal;background-size:140px 140px,cover;transition:width .8s cubic-bezier(.22,1,.36,1)}

/* ══════════════ ADDITIONAL PATTERNS ══════════════
   Reusable pieces promoted from individual case studies. All read the same tokens and follow the
   house rules: teal only where it means something, gradient identity for expressive moments,
   neutral chrome. */

/* JUMP TOC: "you can jump to a section" pill list (promoted from page-local hero-jump-*). */
.hero-jump-label{font-size:var(--text-sm);font-weight:400;color:var(--mid);margin:0 0 .7rem;font-style:italic}
.hero-jump-links{display:flex;flex-wrap:wrap;gap:.6rem}
.hero-jump-links a{display:inline-flex;align-items:center;gap:.4rem;font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:.02em;color:var(--teal);text-decoration:none;background:var(--white);padding:.45rem .75rem;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:background .15s}
.hero-jump-links a:hover{background:var(--teal-lt)}
.hero-jump-links .wj-arrow{color:var(--teal);font-size:var(--text-sm);font-weight:400;transition:transform .15s}
.hero-jump-links a:hover .wj-arrow{transform:translateY(2px)}

/* SPECTRUM BAR: a two-ended gradient continuum (the brand gradient IS the identity here). For a
   three-zone version with a labelled middle, use the richer .mode-spectrum instead. */
.spectrum{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-radius:var(--radius-pill);background-image:var(--grad-noise),linear-gradient(90deg,var(--grad-stops));background-blend-mode:overlay,normal;background-size:140px 140px,cover;box-shadow:var(--shadow-md);padding:1.5rem 2rem;min-height:96px;margin:1.75rem 0}
.spectrum-end{color:#fff}
.spectrum-end.right{text-align:right}
.spectrum-end .se-label{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.2rem;line-height:1.1}
.spectrum-end .se-sub{display:block;font-size:var(--text-sm);opacity:.92;margin-top:.15rem}

/* IMPACT STAT: large gradient numeral for hero / closing reach numbers. Distinct on purpose from
   the canonical teal-tint stat TILE (.tldr-stat): this is the expressive identity treatment, that
   is the scannable proof treatment. */
.impact-stat{display:flex;flex-direction:column}
.impact-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(3rem,7vw,5rem);line-height:.95;font-variant-numeric:lining-nums tabular-nums;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.impact-num .u{-webkit-text-fill-color:var(--light);color:var(--light);font-size:.8em}
.impact-rule{width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--grad-stops));margin:.35rem 0 .75rem}
.impact-cap{font-size:var(--text-sm);color:var(--mid);line-height:1.45}

/* ICON CARD: feature / capability card with a round teal icon badge. Same white+shadow container
   as .card. */
.icon-card{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:1.6rem 1.6rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.icon-badge{width:46px;height:46px;border-radius:var(--radius-pill);background-image:var(--grad-noise),linear-gradient(135deg,var(--grad-stops));background-blend-mode:overlay,normal;background-size:140px 140px,cover;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:.4rem}
.icon-badge svg{width:22px;height:22px}
.icon-card-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:1.5rem;color:var(--dark);line-height:1.1}
.icon-card-desc{font-size:var(--text-sm);color:var(--mid);line-height:1.55;margin:0}

/* STEP TRACK: horizontal numbered stepper on a dotted rail. The current step is teal (a live
   state, so teal is meaningful). */
.step-track{--dot:18px;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:2rem 0}
.step-track::before{content:'';position:absolute;top:calc(var(--dot)/2);left:5%;right:5%;height:0;border-top:2px dotted var(--teal-mid);opacity:.6}
.step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:0 .4rem}
.step-dot{width:var(--dot);height:var(--dot);border-radius:var(--radius-pill);background:var(--cream);border:2px solid var(--rule);z-index:1}
.step.active .step-dot{border-color:var(--teal);background:var(--teal);box-shadow:0 0 0 4px var(--teal-lt)}
.step-num{font-family:'DM Mono',monospace;font-size:var(--text-2xs);color:var(--light)}
.step.active .step-num{color:var(--teal)}
.step-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;color:var(--dark);line-height:1.2}

/* LADDER: vertical escalation with ringed dots that progress from teal (start) to green
   (org-wide / verified). Set the ring colour per item with --ring. */
.ladder{display:flex;flex-direction:column;margin:1.75rem 0}
.ladder-item{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;padding-bottom:2rem}
.ladder-item:last-child{padding-bottom:0}
.ladder-item::before{content:'';position:absolute;left:10px;top:24px;bottom:0;width:1px;background:var(--rule)}
.ladder-item:last-child::before{display:none}
.ladder-ring{width:22px;height:22px;border-radius:var(--radius-pill);border:2px solid var(--ring,var(--teal));background:var(--cream);margin-top:2px;z-index:1}
.ladder-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.6rem;color:var(--dark);line-height:1}
.ladder-sub{font-size:var(--text-sm);color:var(--light);margin-top:.25rem}

/* SEE ALSO: cross-link to a related case study or article. The link is teal (an interactive
   affordance, so teal is meaningful). */
.see-also{margin:2.5rem 0 0;padding-top:1.75rem;border-top:1px solid var(--rule)}
.see-also-label{font-family:'DM Mono',monospace;font-size:var(--text-2xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--light);margin:0 0 .5rem}
.see-also-link{display:inline-block;font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--teal);text-decoration:none;line-height:1.3;margin-bottom:.35rem}
.see-also-link:hover{color:var(--dark)}
.see-also-desc{font-size:var(--text-xs);color:var(--mid);margin:0}

/* centred variant of the work card, for icon + label + title comparison pairs (Building/Blueprint) */
.card.center{text-align:center}
.card.center .icon-badge{margin-left:auto;margin-right:auto}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade-in,.d1,.d2,.d3{opacity:1;transform:none;animation:none}
  .chat-msg-row{opacity:1;transform:none;transition:none}
  .chat-annotation,.chat-window-footer{opacity:1;transition:none}
  .wfp-fade{opacity:1;transform:none;transition:none}
  .wfp-bar i,.wfp-panel{transition:none}
  .wfp-spin{animation:none}
  .tv-group,.tv-item{opacity:1;transform:none;transition:none}
  .tv-ck::before{animation:none}
  .ba-bar{transition:none}
}