/* ==========================================================================
   Başak Uğur Önem · portfolio · case.css
   Shared by the case study pages, loaded after styles.css. styles.css stays
   the source of truth: nothing here restyles an existing component. This
   file only adds the new case-page designs (M2 flip book, M5 annotated mock,
   M9 banner) and the small layout helpers they need.
   Static first. Motion is scoped to html.motion, as in styles.css section 11.
   All colours, radii, type sizes and durations come from the tokens in
   styles.css. The one exception is the --mock palette below: recreated product
   screens keep the product's own neutrals so they read as screenshots.
   ========================================================================== */

:root {
  /* recreated product UI (M5 quote list). Stays light in both site themes. */
  --mock-bg: #F1F0EC;
  --mock-bar: #E6E4DF;
  --mock-card: #FCFCFB;
  --mock-group: #F5F4F1;
  --mock-line: #D6D3CC;
  --mock-line-2: #DAD8D2;
  --mock-hair: #F0EEEA;
  --mock-dot: #CFCBC3;
  --mock-ink: #1C1C1A;
  --mock-muted: #66655F;
  --mock-av: #DCD9D2;
  --mock-av-2: #D6E2EE;
  --mock-av-3: #E8DDEE;
  /* the hero mock's wire and empty checkbox border on the night card */
  --night-mid: #5E6070;
}

/* every case page: the hero mock receives the clicked work card image (site.js B11) */
@media (prefers-reduced-motion: no-preference) { .hero-mock { view-transition-name: case-hero; } }

/* page frame ---------------------------------------------------------------- */
.case-wrap { padding: 0 32px; }
.case-wrap > .wide:first-child { padding-top: 8px; }
.case-top { margin-top: var(--sp-m); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.case-hero { margin-top: 64px; }
.case-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px 0 80px; margin-top: 64px; border-top: 1px solid var(--line); }
.case-foot a.next { font-size: 14px; }
.case-foot a.next:hover { text-decoration: underline; text-underline-offset: 3px; }
.sub-head { margin: 56px 0 16px; }
.sub-head h3 { font-size: 22px; margin-top: 8px; }
.note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.ph.has-img { padding: 0; }
.ph.has-img::before { content: none; }
.ph > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame > img { display: block; width: 100%; height: auto; }

/* flow tabs and the "see every step" toggle --------------------------------- */
.flow-tabs { margin-bottom: 20px; }
.flow-panel[hidden] { display: none; }
.lane-tools .row { gap: 8px 20px; }
.fig.is-full > .dg-list,
.fig.is-full > .dg-list.sr-on-desktop { display: block; position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-top: 20px; max-width: var(--col-text); }

/* .tools reused as a stat strip (Same company) */
.tools.is-stats b { font: 700 26px/1.2 var(--tight); letter-spacing: -.02em; margin-bottom: 4px; }

/* highlights list -------------------------------------------------------------- */
.hl { border-top: 1px solid var(--line); }
.hl li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.hl .n { font: 400 var(--mono-m)/1.9 var(--mono); color: var(--accent-text); }

/* number strip under an annotated mock ---------------------------------------- */
.numstrip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin-top: 24px; }
.numstrip > div { padding: 16px; border-left: 1px solid var(--line); }
.numstrip > div:first-child { border-left: 0; padding-left: 0; }
.numstrip b { display: block; font: 700 32px/1.1 var(--tight); letter-spacing: -.03em; }
.numstrip span { font: 400 var(--mono-s)/1.5 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }

/* M2 · story flip book ----------------------------------------------------------
   Without JS the cover and the frames read as a plain list. site-ready books
   (.is-ready) stack the frames in one stage and turn them like pages.        */
.book-cover {
  width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  aspect-ratio: 16 / 10; padding: 28px; border-radius: var(--r-lg); text-align: left;
  background: var(--night); color: var(--night-ink); border: 1px solid var(--night-line);
}
.book-cover .mono { color: var(--night-muted); }
.book-time { display: block; font: 500 clamp(44px, 8vw, 76px)/1 var(--mono); letter-spacing: -.02em; color: var(--night-ink); }
.book-sub { display: block; margin-top: 12px; color: var(--night-muted); font-size: 15px; }
.book-open { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--night-line-2); border-radius: var(--r-pill); padding: 6px 14px; font: 400 var(--mono-m)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--night-ink); }
.book-open i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1px solid var(--night-ink); }
.book-cover:hover .book-open, .book-cover:focus-visible .book-open { border-color: var(--night-ink); }
.book-pages { display: grid; gap: 16px; margin-top: 16px; }
.book-page { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.book-art { flex: 1; min-height: 160px; border-radius: var(--r-md); background: var(--tile); overflow: hidden; }
.book-art svg { width: 100%; height: 100%; }
.book-cap { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font: 400 13px/1.5 var(--mono); }
.book-cap .when { color: var(--accent-text); text-transform: uppercase; letter-spacing: var(--caps); font-size: 12px; }
.book-end { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.book-end .mono { color: var(--muted); }
.book-end p { font: 400 15px/1.5 var(--mono); max-width: 34ch; margin: 0; }
.book-nav { display: none; }

.book.is-ready .book-stage { position: relative; aspect-ratio: 16 / 10; perspective: 2000px; }
.book.is-ready .book-cover,
.book.is-ready .book-page { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; backface-visibility: hidden; transform-origin: left center; }
.book.is-ready .book-pages { display: block; margin: 0; }
.book.is-ready .book-page { visibility: hidden; }
.book.is-ready .book-page.is-current { visibility: visible; }
.book.is-ready .book-cover { z-index: 4; }
.book.is-ready.is-open .book-cover { visibility: hidden; }
.book.is-ready.is-open .book-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.book-nav .mono { color: var(--muted); }

/* the illustrations: flat shapes in the site tokens, so they follow the theme */
.bk-paper { fill: var(--card); stroke: var(--line-strong); }
.bk-fill { fill: var(--tile); }
.bk-line { fill: var(--line-strong); }
.bk-ink { fill: var(--ink); }
.bk-mute { fill: var(--muted); }
.bk-acc { fill: var(--accent); }
.bk-wash { fill: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.bk-stroke { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.bk-dash { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; }
.bk-t { font: 400 15px var(--sans); fill: var(--ink); }
.bk-s { font: 400 12px var(--sans); fill: var(--muted); }
.bk-m { font: 400 var(--mono-s) var(--mono); letter-spacing: var(--caps); fill: var(--muted); text-transform: uppercase; }
.bk-big { font: 700 64px var(--tight); letter-spacing: -.03em; fill: var(--ink); }
.bk-on { font: 500 var(--mono-m) var(--mono); letter-spacing: var(--caps); fill: var(--on-accent); }
.bk-onink { font: 400 14px var(--sans); fill: var(--bg); }

/* M5 · annotated product mock ---------------------------------------------------- */
.fit { position: relative; overflow: hidden; }
.fit-inner { transform-origin: 0 0; position: relative; }
.mframe { border: 1px solid var(--mock-line); border-radius: var(--r-md); overflow: hidden; background: var(--mock-bg); color: var(--mock-ink); font-family: var(--sans); }
.mframe-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--mock-bar); border-bottom: 1px solid var(--mock-line); }
.mframe-bar > i { width: 8px; height: 8px; border-radius: 50%; background: var(--mock-dot); }
.mframe-url { margin: 0 auto; transform: translateX(-12px); font: 400 var(--mono-s)/1 var(--mono); color: var(--mock-muted); background: var(--mock-bg); border-radius: var(--r-sm); padding: 5px 16px; }
.callouts { position: absolute; inset: 0; pointer-events: none; }
.callouts svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.callouts path { fill: none; stroke: var(--accent-text); stroke-width: 1; }
.callouts circle { fill: var(--accent); stroke: var(--ink); stroke-width: 1; }
.callout, .callout-legend li {
  font: 500 var(--mono-xs)/1 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--ink); border-radius: var(--r-xs); padding: 6px 8px;
}
.callout { position: absolute; left: 0; top: 0; }
.callout-legend { display: none; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.callout-legend li { display: inline-flex; gap: 6px; }

/* M9 · closing banner ------------------------------------------------------------- */
.banner { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--night); border: 1px solid var(--night-line); color: var(--night-ink); padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px); }
.banner-line { margin: 0; font: 700 clamp(36px, 7.5vw, 92px)/.95 var(--tight); letter-spacing: -.03em; text-transform: uppercase; color: var(--night-ink); }
.banner-line .w { display: inline-block; position: relative; }
.banner-line .u::after { content: ""; position: absolute; left: 0; right: .08em; bottom: -.06em; height: .07em; background: var(--accent); transform-origin: left center; }
.banner .mono { display: block; margin-top: 28px; color: var(--night-muted); }

/* ==========================================================================
   Page sections, moved here from an inline <style> in case-quote-to-cash.html
   ========================================================================== */
/* ---- Quote-to-cash: M1 hero mock "The deal that moves itself" --------------------- */
.q1 { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 18px 18px; background: var(--night); color: var(--night-ink); container-type: inline-size; }
.q1-top { display: flex; justify-content: space-between; gap: 12px; font: 400 var(--mono-xs)/1.3 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; color: var(--night-muted); }
.q1-top b { font-weight: 400; color: var(--night-ink); }
.q1-feed { display: flex; align-items: center; }
.q1-chip { flex: none; font: 500 var(--mono-xs)/1 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; padding: 6px 9px; border-radius: 999px; border: 1px solid var(--night-line-2); background: var(--night-2); color: var(--night-ink); position: relative; }
.q1-wire { flex: 0 0 26px; position: relative; height: 0; border-top: 1px dashed var(--night-mid); }
.q1-dot { position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1px solid var(--night-ink); opacity: 0; }
.q1-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--night-2); border: 1px solid var(--night-line); }
.q1-id { font: 500 var(--mono-s)/1 var(--mono); color: var(--night-muted); }
.q1-client { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q1-client small { display: block; font-size: 11px; font-weight: 400; color: var(--night-muted); }
.q1-val { font-size: 12px; color: var(--night-muted); }
.q1-pill { flex: none; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--night-line); color: var(--night-ink); white-space: nowrap; }
.q1-pill[data-tone="blue"] { background: color-mix(in srgb, var(--accent) 24%, transparent); color: color-mix(in srgb, var(--accent) 30%, var(--night-ink)); }
.q1-track { display: grid; grid-template-columns: repeat(6, 1fr); }
.q1-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 10.5px; line-height: 1.25; color: var(--night-muted); padding: 0 2px; }
.q1-track li:not(:first-child)::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 1px; background: var(--night-line-2); }
.q1-mk { position: relative; z-index: 1; width: 23px; height: 23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--night-mid); background: var(--night); color: var(--night-muted); }
.q1-mk svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.q1-mk::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: none; }
.q1-track li[data-state="todo"] .q1-mk::after { display: block; opacity: .5; }
.q1-track li[data-state="cur"] .q1-mk { border-color: var(--accent); color: var(--accent); }
.q1-track li[data-state="cur"] .q1-mk::after { display: block; }
.q1-track li[data-state="locked"] .i-lock { display: block; }
.q1-track li[data-state="open"] .q1-mk { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.q1-track li[data-state="open"] .i-unlock { display: block; }
.q1-track li[data-state="done"] .q1-mk, .q1-track li[data-state="glow"] .q1-mk { background: var(--night-ink); border-color: var(--night-ink); color: var(--night); }
.q1-track li[data-state="glow"] .q1-mk { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 28%, transparent); }
.q1-track li[data-state="done"] .i-check, .q1-track li[data-state="glow"] .i-check { display: block; }
.q1-track li[data-state="done"], .q1-track li[data-state="glow"], .q1-track li[data-state="open"], .q1-track li[data-state="cur"] { color: var(--night-ink); }
.q1-gates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q1-gate { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--night-2); border: 1px solid var(--night-line); min-width: 0; }
.q1-gate b { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; }
.q1-gate small { display: block; font-size: 11px; color: var(--night-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q1-gate .d { display: none; }
.q1-gate.is-done .p { display: none; }
.q1-gate.is-done .d { display: inline; }
.q1-box { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--night-mid); display: flex; align-items: center; justify-content: center; color: var(--night); }
.q1-box svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.q1-gate.is-done .q1-box { background: var(--accent); border-color: var(--accent); }
.q1-gate.is-done .q1-box svg { opacity: 1; }
.q1-out { display: flex; justify-content: flex-end; align-items: center; }
.q1-inv { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); color: color-mix(in srgb, var(--accent) 30%, var(--night-ink)); }
@container (max-width: 400px) {
  .q1 { padding: 12px 12px 14px; gap: 8px; }
  .q1-val, .q1-gate small { display: none; }
  .q1-track li { font-size: 9px; }
  .q1-mk { width: 19px; height: 19px; }
  .q1-track li:not(:first-child)::before { top: 9px; }
}
/* motion: the loop in the page script swaps these states; transitions make it soft */
.motion .q1-mk { transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-mid) var(--ease), color var(--t-base) var(--ease); }
.motion .q1-pill { transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.motion .q1-gates { transition: opacity var(--t-mid) var(--ease), translate var(--t-mid) var(--ease); }
.motion .q1.is-early .q1-gates { opacity: 0; translate: 0 6px; }
.motion .q1-box { transition: background-color 250ms var(--ease), border-color 250ms var(--ease); }
.motion .q1-out { transition: opacity var(--t-mid) var(--ease), translate var(--t-enter) var(--ease); }
.motion .q1:not(.is-inv) .q1-out { opacity: 0; translate: -18px 0; }
.motion .q1-dot.is-go { animation: q1-feed var(--t-slow) var(--ease) both; }
.motion .q1-chip.is-pulse { animation: q1-pulse var(--t-slow) var(--ease) 1; }
@keyframes q1-feed { 0% { left: -4px; opacity: 1; } 100% { left: 100%; opacity: 1; } }
@keyframes q1-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); } }

/* ---- Quote-to-cash: M5 quote list mock -------------------------------------------- */
.q5-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--mock-card); }
.q5-head { display: flex; align-items: flex-end; gap: 12px; }
.q5-head small { display: block; font-size: 12px; color: var(--mock-muted); }
.q5-head h4 { margin: 2px 0 0; font: 600 26px/1.1 var(--sans); letter-spacing: -.02em; }
.q5-btns { margin-left: auto; display: flex; gap: 8px; }
.q5-btn { font: 500 12.5px/1 var(--sans); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--mock-line-2); background: var(--mock-card); color: var(--mock-ink); }
.q5-btn.dark { background: var(--mock-ink); border-color: var(--mock-ink); color: var(--mock-card); }
.q5-group { background: var(--mock-group); border: 1px solid var(--mock-bar); border-radius: 12px; padding: 8px; }
.q5-ghead { display: flex; align-items: center; gap: 9px; padding: 4px 6px 8px; }
.q5-ghead h5 { margin: 0; font: 600 14px/1.2 var(--sans); }
.q5-count { font-size: 11.5px; color: var(--mock-muted); background: var(--mock-card); border: 1px solid var(--mock-bar); border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center; }
.q5-ghead span:last-child { font-size: 12.5px; color: var(--mock-muted); }
.q5-table { width: 100%; background: var(--mock-card); border: 1px solid var(--mock-bar); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.q5-table th { text-align: left; font: 500 11.5px/1 var(--sans); color: var(--mock-muted); padding: 10px 10px; border-bottom: 1px solid var(--mock-bar); }
.q5-table td { font-size: 12.5px; padding: 9px 10px; border-bottom: 1px solid var(--mock-hair); vertical-align: middle; white-space: nowrap; }
.q5-table tr:last-child td { border-bottom: 0; }
.q5-table td b { font-weight: 600; }
.q5-table td small { display: block; font-size: 11px; color: var(--mock-muted); }
.q5-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.t-green { background: #E3F2E7; color: #1D6436; } .t-amber { background: #FBEFD6; color: #7E4510; } .t-blue { background: #E1ECF9; color: #1E4680; }
.t-rust { background: #FBE6DA; color: #923612; } .t-sky { background: #E5ECFC; color: #2443A0; } .t-violet { background: #EEE8FA; color: #57309E; }
.q5-warn { display: inline-block; width: 14px; height: 14px; vertical-align: -3px; margin-left: 5px; }
.q5-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q5-next .muted { color: var(--mock-muted); }
.q5-next > span:first-child { white-space: nowrap; }
.q5-table { table-layout: fixed; }
.q5-table td:nth-child(2) { white-space: normal; }
.q5-lock { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; fill: none; stroke: var(--mock-muted); stroke-width: 1.8; }
.q5-go { font: 500 12px/1 var(--sans); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--mock-line-2); background: var(--mock-card); }
.q5-av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; background: var(--mock-av); }
.q5-v2 { margin-left: 5px; font-size: 10.5px; font-weight: 600; color: #57309E; background: #EEE8FA; border-radius: 5px; padding: 1px 5px; }
.motion .q5-go.is-press { background: var(--mock-ink); color: var(--mock-card); border-color: var(--mock-ink); scale: .95; }
.motion .q5-go { transition: background-color var(--t-fast), color var(--t-fast), scale var(--t-fast); }
.motion tr.is-resolved td { animation: q5-flash 1200ms var(--ease) 1; }
@keyframes q5-flash { 0%, 40% { background: color-mix(in srgb, var(--accent) 14%, var(--mock-card)); } }

/* ---- Quote-to-cash: P3 try-it items, P2 device ------------------------------------ */
.tryit-stage > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tryit-stage > div .mono { margin: 0; display: inline; font-size: 10px; }
.tryit-stage > .ti-h { border-style: dashed; background: transparent; }
.tryit-stage[data-mode="default"] > .ti-h, .tryit-stage[data-mode="default"] .ti-act { display: none; }
.tryit-stage[data-mode="default"] > [data-o="1"] { order: 1; } .tryit-stage[data-mode="default"] > [data-o="2"] { order: 2; }
.tryit-stage[data-mode="default"] > [data-o="3"] { order: 3; } .tryit-stage[data-mode="default"] > [data-o="4"] { order: 4; }
.tryit-stage[data-mode="chosen"] .ti-status { display: none; }
.q2-dev { border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px; background: var(--card); max-width: 190px; justify-self: end; width: 100%; font-size: 13px; }
.q2-dev .mono { font-size: 10px; color: var(--muted); display: block; margin-bottom: 8px; }
.q2-dev b { display: block; font-weight: 600; margin-bottom: 12px; }
.q2-dev .btn { width: 100%; justify-content: center; background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- M9 banner wipe (all case pages) ------------------------------------------------ */
.motion .banner:not(.is-in) .w { clip-path: inset(0 100% 0 0); }
.motion .banner .w { clip-path: inset(0 0 0 0); transition: clip-path var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.motion .banner:not(.is-in) .u::after { scale: 0 1; }
.motion .banner .u::after { transition: scale var(--t-mid) var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 650ms); }
.q-findings td:nth-child(3) { color: var(--muted); }
.q5 .mframe { width: 900px; }
.q5 .q5-dim { color: var(--mock-muted); }
.q5-av.is-b { background: var(--mock-av-2); } .q5-av.is-c { background: var(--mock-av-3); }

/* responsive ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .case-wrap { padding: 0 20px; }
  .numstrip { grid-template-columns: 1fr 1fr; }
  .numstrip > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .numstrip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .book.is-ready .book-stage, .book-cover { aspect-ratio: 4 / 5; }
  .book-cover { padding: 22px; }
  .callouts { display: none; }
  .callout-legend { display: flex; }
  .only-desktop { display: none !important; }
}

/* motion ---------------------------------------------------------------------------- */
@keyframes ck-burst { from { translate: 0 0; opacity: 1; } to { translate: var(--dx) var(--dy); opacity: 0; } }
@keyframes ck-type { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes ck-caret { 50% { opacity: 0; } }
@keyframes ck-fill { from { scale: 0 1; } }

.motion .book-page.is-current .bk-conf rect { animation: ck-burst 900ms var(--ease) 250ms both; }
.motion .book-page.is-current .bk-typing circle { animation: ck-type 1.2s ease-in-out infinite; }
.motion .book-page.is-current .bk-typing circle:nth-child(2) { animation-delay: .2s; }
.motion .book-page.is-current .bk-typing circle:nth-child(3) { animation-delay: .4s; }
.motion .book-page.is-current .bk-caret { animation: ck-caret 1s steps(1) infinite; }
.motion .book-page.is-current .bk-grow { transform-box: fill-box; transform-origin: left center; animation: ck-fill 700ms var(--ease) both; }
.motion .book-page.is-current .bk-grow.d2 { animation-delay: var(--t-enter); }
.motion .book-page.is-current .bk-grow.d3 { animation-delay: 1000ms; }

.book.is-off .book-page * { animation-play-state: paused !important; }

.motion .mock .callout { transition: opacity var(--t-base) var(--ease), scale var(--t-base) var(--ease), translate var(--t-mid) var(--ease); transition-delay: calc(var(--i, 0) * 150ms), calc(var(--i, 0) * 150ms), 0ms; }
.motion .mock:not(.is-in) .callout { opacity: 0; scale: .8; }
.motion .mock .callouts path, .motion .mock .callouts circle { transition: opacity var(--t-base) var(--ease); transition-delay: calc(150ms + var(--i, 0) * 150ms); }
.motion .mock:not(.is-in) .callouts path, .motion .mock:not(.is-in) .callouts circle { opacity: 0; }

/* ==========================================================================
   Invnex (case-invnex.html) · page sections
   The recreated product UI keeps Invnex's own dark neutrals and sage buttons
   so it reads as the real screens; it stays dark in both site themes.
   ========================================================================== */
:root {
  --inv-bg: #1E1C1D;        /* charcoal app background (brief) */
  --inv-card: #252324;
  --inv-raise: #211F20;
  --inv-line: #3A3738;
  --inv-ink: #F2F1F0;
  --inv-muted: #A19E9C;
  --inv-sage: #8EBD9D;      /* product buttons */
  --inv-sage-dim: #55705E;
  --inv-red: #F0605D;
  --inv-scrim: rgba(12, 11, 11, .62);
  --inv-scrim-soft: rgba(12, 11, 11, .4);
}

/* ---- M1 hero mock: an asset card that explains itself ------------------------ */
.i1 { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; background: var(--inv-bg); color: var(--inv-ink); font-family: var(--sans); container-type: inline-size; }
.i1-top { display: flex; justify-content: space-between; gap: 12px; font: 400 var(--mono-xs)/1.3 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; color: var(--inv-muted); }
.i1-top b { font-weight: 400; color: var(--inv-ink); }
.i1-stage { position: relative; flex: 1; min-height: 0; }
.i1-card { position: absolute; left: 0; top: 0; width: 64%; background: var(--inv-card); border: 1px solid var(--inv-line); border-radius: 10px; overflow: hidden; }
.i1-img { position: relative; height: 56px; background: #4C7690; }
.i1-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.i1-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(20, 19, 19, .72)); }
.i1-name { position: absolute; left: 10px; bottom: 7px; z-index: 1; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.i1-name small { display: block; font: 400 9px/1.3 var(--mono); color: #D8D6D3; }
.i1-open { position: absolute; right: 8px; top: 7px; z-index: 1; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--inv-sage); color: #16171C; }
.i1-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0; padding: 7px 10px 7px; }
.i1-facts dt { font-size: 10px; color: var(--inv-muted); line-height: 1.3; }
.i1-facts dd { margin: 1px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.i1-facts .is-yield { color: var(--inv-sage); }
.i1-tag { display: inline-block; font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 999px; background: var(--inv-line); }
.i1-btn { display: block; margin: 0 10px; padding: 5px; border-radius: 6px; background: var(--inv-sage); color: #16171C; text-align: center; font-size: 11.5px; font-weight: 500; }
.i1-prog { padding: 8px 10px 10px; font-size: 10px; color: var(--inv-muted); }
.i1-prog > span { display: flex; justify-content: space-between; }
.i1-bar { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--inv-line); overflow: hidden; }
.i1-bar i { display: block; height: 100%; width: 65%; background: var(--inv-sage); transform-origin: left center; }
.i1-scrim { position: absolute; inset: 0; background: var(--inv-scrim-soft); border-radius: 10px; }
.i1-dlg { position: absolute; right: 0; bottom: 0; width: 58%; padding: 11px 12px 12px; border-radius: 12px; background: var(--inv-raise); border: 1px solid var(--inv-line); }
.i1-dlg > b { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 7px; }
.i1-dlg > small { display: block; font-size: 10px; color: var(--inv-muted); margin-bottom: 3px; }
.i1-in { display: block; padding: 4px 8px; border-radius: 6px; border: 1.5px solid var(--inv-sage); font-size: 12px; margin-bottom: 8px; }
.i1-lines { padding: 5px 9px; border: 1px solid var(--inv-line); border-radius: 8px; }
.i1-lines li { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; line-height: 1.75; }
.i1-lines li span:first-child { color: var(--inv-muted); }
.i1-lines li.tot { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--inv-line); font-weight: 600; }
.i1-lines li.tot span:first-child { color: var(--inv-ink); }
.i1-tot { position: relative; }
.i1-tot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--green); transform-origin: left center; }
@container (max-width: 420px) {
  .i1 { padding: 11px 12px 12px; gap: 8px; }
  .i1-top span { display: none; }
  .i1-card { width: 72%; }
  .i1-img { height: 44px; }
  .i1-facts { gap: 3px 8px; padding: 6px 8px; }
  .i1-facts dd { font-size: 11px; }
  .i1-prog { display: none; }
  .i1-btn { margin-bottom: 8px; padding: 3px; }
  .i1-dlg { width: 66%; padding: 8px 9px 9px; }
  .i1-dlg > small { display: none; }
  .i1-lines li { font-size: 9.5px; line-height: 1.6; }
}

/* ---- M5 annotated mock: the invest dialog, step by step ---------------------- */
.i5-frame { width: 760px; border: 1px solid var(--inv-line); border-radius: var(--r-md); overflow: hidden; background: var(--inv-bg); color: var(--inv-ink); font-family: var(--sans); }
.i5-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #151414; border-bottom: 1px solid var(--inv-line); }
.i5-bar > i { width: 8px; height: 8px; border-radius: 50%; background: var(--inv-line); }
.i5-url { margin: 0 auto; transform: translateX(-12px); font: 400 var(--mono-s)/1 var(--mono); color: var(--inv-muted); background: var(--inv-bg); border-radius: var(--r-sm); padding: 5px 16px; }
.i5-view { position: relative; height: 520px; overflow: hidden; }
.i5-view > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.i5-view::before { content: ""; position: absolute; inset: 0; background: var(--inv-scrim); }
.i5-dlg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 440px; padding: 22px 22px 20px; border-radius: 14px; background: var(--inv-raise); border: 1px solid var(--inv-line); }
.i5-dlg h4 { margin: 0 0 14px; font: 600 17px/1.3 var(--sans); letter-spacing: -.01em; }
.i5-lab { display: block; font-size: 13.5px; margin-bottom: 7px; }
.i5-in { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 9px; border: 1.5px solid var(--inv-sage); font-size: 15px; }
.i5-in i { width: 12px; height: 18px; border-radius: 2px; background: var(--inv-line); }
.i5-caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--inv-ink); opacity: 0; }
.i5-err { margin: 6px 0 0; font-size: 13px; color: var(--inv-red); }
.i5-lines { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--inv-line); border-radius: 12px; }
.i5-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.9; }
.i5-lines li span:first-child { color: var(--inv-muted); }
.i5-lines li.tot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--inv-line); font-weight: 600; }
.i5-lines li.tot span:first-child { color: var(--inv-ink); }
.i5-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.i5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 9px; font-size: 14px; border: 1px solid var(--inv-line); }
.i5-btn.go { background: var(--inv-sage); border-color: var(--inv-sage); color: #16171C; font-weight: 500; }
.i5-spin { display: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(22, 23, 28, .35); border-top-color: #16171C; }
.i5-msg { text-align: center; }
.i5-msg h4 { margin: 10px 0 6px; }
.i5-msg p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--inv-muted); }
.i5-msg b { color: var(--inv-ink); font-weight: 600; }
.i5-msg .i5-btns { justify-content: stretch; }
.i5-msg .i5-btn { flex: 1; }
.i5-ico { display: block; width: 22px; height: 22px; margin: 4px auto 0; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i5-ico.is-fail { stroke: var(--inv-red); }
.i5-ico.is-ok { stroke: var(--inv-sage); }
.i5-safe { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); border-radius: 3px; padding: 0 3px; }
/* the five states, switched by data-step on the figure */
.i5-fail, .i5-ok, .i5-err, .i5 .v-bad { display: none; }
.i5[data-step="1"] .i5-err { display: block; }
.i5[data-step="1"] .v-bad { display: inline; }
.i5[data-step="1"] .v-ok { display: none; }
.i5[data-step="1"] .i5-confirm { background: var(--inv-sage-dim); border-color: var(--inv-sage-dim); color: #2A2B2E; }
.i5[data-step="3"] .i5-form, .i5[data-step="5"] .i5-form { display: none; }
.i5[data-step="3"] .i5-fail, .i5[data-step="5"] .i5-ok { display: block; }
.i5 .callout { display: none; }
.i5[data-step="1"] .callout[data-for="1"], .i5[data-step="2"] .callout[data-for="2"],
.i5[data-step="3"] .callout[data-for="3"], .i5[data-step="4"] .callout[data-for="4"] { display: block; }
.i5-tools { flex-wrap: wrap; gap: 12px 20px; margin-top: 14px; }

/* ---- P3 try-it with four items: one row of four in the default layout ------- */
.tryit-4 .tryit-stage[data-mode="default"] { grid-template-columns: repeat(4, 1fr); }
.tryit-4 .tryit-stage[data-mode="default"] > div { flex-direction: column; justify-content: flex-start; gap: 4px; }

/* ---- M9 banner: the total as a faint watermark behind the line -------------- */
.banner.is-inv .banner-line { position: relative; z-index: 1; color: var(--green); }
.banner.is-inv .mono { position: relative; z-index: 1; }
.banner-mark { position: absolute; right: -.04em; bottom: -.18em; z-index: 0; font: 700 clamp(72px, 15vw, 196px)/1 var(--tight); letter-spacing: -.04em; color: color-mix(in srgb, var(--night-ink) 5%, transparent); white-space: nowrap; pointer-events: none; }

@media (max-width: 860px) {
  .tryit-4 .tryit-stage[data-mode="default"] { grid-template-columns: minmax(0, 1fr); }
  .tryit-4 .tryit-stage[data-mode="default"] > div { flex-direction: row; justify-content: space-between; }
}

/* ==========================================================================
   Multract (case-multract.html) · page sections
   The recreated product UI keeps Multract's own HUD brand: teal lines and
   type on near-black, chamfered corners, a wide display face for labels.
   It stays dark in both site themes. Page marks use the project accent.
   ========================================================================== */
:root {
  --mt-bg: #050B0C;          /* brand background */
  --mt-panel: #0A1516;
  --mt-line: #173B3C;
  --mt-line-2: #2A6667;
  --mt-teal: #5FD6D6;        /* brand teal */
  --mt-ink: #D9F3F3;
  --mt-muted: #86AEAF;
  --mt-on-teal: #04201F;
  --mt-coral: #FF7A66;       /* invalid address, in the mocks and story only */
  --mt-qr: #E3F4F4;
  --mt-display: "Michroma", var(--tight);
}

/* shared HUD pieces ------------------------------------------------------------ */
.hud { --cut: 14px; padding: 1px; background: var(--mt-line-2); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.hud-in { position: relative; height: 100%; background: var(--mt-bg); color: var(--mt-ink); font-family: var(--sans); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.hud-in::before, .hud-in::after { content: ""; position: absolute; height: 3px; background: var(--mt-teal); }
.hud-in::before { top: 0; right: 16%; width: 18%; }
.hud-in::after { bottom: 0; left: 12%; width: 10%; }
.mt-brand { display: inline-flex; align-items: center; gap: 6px; font: 400 9px/1 var(--mt-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mt-teal); }
.mt-brand img { width: 13px; height: auto; display: block; }
.mt-sum { margin: 0; padding: 8px 10px; border: 1px solid var(--mt-line-2); background: var(--mt-panel); }
.mt-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; }
.mt-sum dt { font: 400 8px/1.6 var(--mt-display); letter-spacing: .08em; text-transform: uppercase; color: var(--mt-muted); }
.mt-sum dd { margin: 0; font: 500 11.5px/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--mt-ink); white-space: nowrap; }
.mt-sum .mt-subtotal { margin: 6px -4px 0; padding: 6px 8px; background: var(--mt-teal); }
.mt-sum .mt-subtotal dt, .mt-sum .mt-subtotal dd { color: var(--mt-on-teal); }
.mt-sum .mt-subtotal dd { font-weight: 600; }
.mt-btn { --cut: 6px; display: inline-block; padding: 8px 14px; border: 1px solid var(--mt-teal); color: var(--mt-teal); font: 400 8.5px/1 var(--mt-display); letter-spacing: .16em; text-transform: uppercase; text-align: center; white-space: nowrap; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.mt-btn.is-solid { background: var(--mt-teal); color: var(--mt-on-teal); }
.mt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mt-field > span { font: 400 7.5px/1.3 var(--mt-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mt-muted); }
.mt-field > b { font: 400 10.5px/1.3 var(--mono); color: var(--mt-ink); padding: 6px 8px; border: 1px solid var(--mt-line-2); background: var(--mt-panel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-note { font-size: 9.5px; line-height: 1.4; color: var(--mt-muted); }
.mt-warn { padding: 7px 9px; background: var(--mt-teal); color: var(--mt-on-teal); font-size: 9.5px; font-weight: 500; line-height: 1.35; }
.mt-table { border: 1px solid var(--mt-line-2); font: 400 10.5px/1.3 var(--mono); }
.mt-table > div { display: grid; grid-template-columns: 26px 1fr 60px; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--mt-line); }
.mt-table > div:last-child { border-bottom: 0; }
.mt-table i { font-style: normal; color: var(--mt-muted); }
.mt-table b { font-weight: 400; text-align: right; }
.mt-table .mt-th { font: 400 7.5px/1.6 var(--mt-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mt-muted); }
.mt-table .mt-th b { font-weight: 400; }
.mt-table .mt-more { display: block; font: 400 9.5px/1.4 var(--sans); color: var(--mt-muted); }
.mt-table .mt-more u { color: var(--mt-teal); text-underline-offset: 2px; }
.mt-table .is-fixed { background: color-mix(in srgb, var(--mt-teal) 12%, transparent); }

/* seven-segment displays (inline SVG; unlit segments stay faintly visible) */
.sev { display: block; height: 28px; width: auto; overflow: visible; }
.sev .sg { fill: color-mix(in srgb, var(--mt-teal) 13%, transparent); }
.sev .sg.on { fill: var(--mt-teal); }
.sev .sc rect { fill: var(--mt-teal); }
/* dummy QR code: modules on a pale tile, as in the product */
.qr { display: block; shape-rendering: crispEdges; }
.qr .qr-bg { fill: var(--mt-qr); }
.qr .qr-m rect { fill: var(--mt-bg); }

/* ---- M1 hero mock: 27 rows become one payment ------------------------------- */
.mt1 { height: 100%; padding: 10px; background: var(--mt-bg); container-type: inline-size; }
.mt1-hud { height: 100%; }
.mt1 .hud-in { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.mt1-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 8px/1.2 var(--mt-display); letter-spacing: .12em; text-transform: uppercase; color: var(--mt-muted); }
.mt1-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; gap: 16px 16px; }
.mt1-sum { grid-column: 1; grid-row: 1; align-self: start; }
.mt1-pay { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mt1-qr { width: 104px; }
.mt1-btn { width: 100%; }
.mt1-run { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 14px; padding-top: 10px; border-top: 1px solid var(--mt-line); }
.mt1-seg { height: 26px; flex: none; }
.mt1-done b { display: block; font: 400 9px/1.4 var(--mt-display); letter-spacing: .14em; text-transform: uppercase; color: var(--mt-teal); }
.mt1-hash { display: block; font: 400 11px/1.4 var(--mono); color: var(--mt-ink); white-space: nowrap; }
/* the spreadsheet only shows while the loop runs */
.mt1-sheet { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 8px 10px; background: var(--mt-panel); border: 1px solid var(--mt-line-2); visibility: hidden; opacity: 0; }
.mt1-sheet-head { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--mt-line-2); font: 400 8px/1.2 var(--mt-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mt-muted); }
.mt1-rows li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 14px; gap: 8px; align-items: baseline; padding: 3px 4px; border-bottom: 1px solid var(--mt-line); font: 400 11px/1.45 var(--mono); }
.mt1-rows i { font-style: normal; color: var(--mt-muted); }
.mt1-rows b { font-weight: 400; text-align: right; }
.mt1-addr s { text-decoration: none; }
.mt1-addr span, .mt1-flag, .mt1-ok { display: none; }
.mt1-flag { position: absolute; right: 64px; top: 50%; translate: 0 -50%; padding: 2px 6px; background: var(--mt-coral); color: var(--mt-bg); font: 400 7.5px/1.4 var(--mt-display); letter-spacing: .08em; text-transform: uppercase; font-style: normal; }
.mt1-ok { color: var(--mt-teal); font-style: normal; }
.mt1-r19.is-bad { background: color-mix(in srgb, var(--mt-coral) 22%, transparent); }
.mt1-r19.is-bad s { color: var(--mt-coral); }
.mt1-r19.is-bad .mt1-flag { display: block; }
.mt1-r19.is-fixed s { text-decoration: line-through; color: var(--mt-muted); margin-right: 6px; }
.mt1-r19.is-fixed .mt1-addr span { display: inline; color: var(--mt-teal); }
.mt1-r19.is-fixed .mt1-ok { display: inline; }
@container (max-width: 420px) {
  .mt1 { padding: 6px; }
  .mt1 .hud-in { padding: 10px 12px 12px; gap: 8px; }
  .mt1-qr { width: 74px; }
  .mt1-body { gap: 8px 10px; }
  .mt1 .mt-sum { padding: 6px 8px; }
  .mt1 .mt-sum > div { padding: 1px 0; }
  .mt1 .mt-sum dd { font-size: 10.5px; }
  .mt1 .mt-sum dt { font-size: 7px; }
  .mt1-btn { padding: 7px 6px; }
  .mt1-seg { height: 20px; }
  .mt1-hash { font-size: 10px; }
  .mt1-rows li { font-size: 10px; padding: 2px 4px; }
  .mt1-rows li:nth-child(n+7) { display: none; }
  .mt1-flag { right: 58px; }
}

/* ---- M2 · the story cover as a Multract HUD panel ----------------------------- */
.book.is-mt .book-cover { background: var(--mt-bg); border-color: var(--mt-line-2); color: var(--mt-ink); }
.book.is-mt:not(.is-ready) .book-cover { position: relative; }
.book.is-mt .book-cover::before { --cut: 14px; content: ""; position: absolute; inset: 10px; border: 1px solid var(--mt-line); pointer-events: none; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.book.is-mt .book-cover .mono { font: 400 10px/1.4 var(--mt-display); letter-spacing: .16em; color: var(--mt-teal); }
.mt-cover-seg { height: clamp(44px, 8vw, 76px); }
.book.is-mt .book-sub { color: var(--mt-muted); }
.book.is-mt .book-open { border-color: var(--mt-line-2); color: var(--mt-teal); font: 400 9px/1.4 var(--mt-display); letter-spacing: .16em; }
.book.is-mt .book-open i { background: var(--mt-teal); border-color: var(--mt-bg); }
.book.is-mt .book-cover:hover .book-open, .book.is-mt .book-cover:focus-visible .book-open { border-color: var(--mt-teal); }
.bk-addr { font: 500 20px var(--mono); fill: var(--ink); }
.bk-diff { font-weight: 600; }
.bk-coral { fill: color-mix(in srgb, var(--mt-coral) 28%, transparent); stroke: var(--mt-coral); stroke-width: 1.5; }

/* ---- M5 · four steps as a carousel: the active one in the middle ----------- */
.mt5-stage { position: relative; aspect-ratio: 1040 / 430; }
.mt5-step { position: absolute; top: 40px; left: 25%; width: 50%; transform-origin: 50% 40%; }
.mt5-step[data-pos="center"] { z-index: 3; }
.mt5-step[data-pos="left"] { z-index: 2; translate: -68% 0; scale: .62; opacity: .7; }
.mt5-step[data-pos="right"] { z-index: 2; translate: 68% 0; scale: .62; opacity: .7; }
.mt5-step[data-pos="back"] { z-index: 1; scale: .5; opacity: 0; visibility: hidden; }
.mt5-step .callout { left: var(--x, 50%); top: -40px; translate: -50% 0; }
.mt5-step .callout::after { content: ""; position: absolute; left: 50%; top: 100%; height: 14px; border-left: 1px solid var(--accent-text); }
.mt5-step:not([data-pos="center"]) .callout { opacity: 0; }
.mt5-step:not([data-pos="center"]) { cursor: pointer; }
.mt5-frame { height: 380px; }
.mt5-frame .hud-in { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; font-size: 11px; line-height: 1.4; }
.mt5-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--mt-line); font: 400 8px/1 var(--mt-display); letter-spacing: .12em; text-transform: uppercase; color: var(--mt-muted); }
.mt5-row2 { display: grid; grid-template-columns: 64px 64px minmax(0, 1fr); gap: 8px; }
.mt5-hashfield > b { color: var(--mt-muted); }
.mt5-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 8px/1.4 var(--mt-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mt-muted); }
.mt5-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mt5-paycol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mt5-qr { width: 112px; }
.mt5-sum.is-compact > div { padding: 2px 0; }
.mt5-seg { height: 34px; padding: 6px 8px; border: 1px solid var(--mt-line-2); background: var(--mt-panel); align-self: flex-start; box-sizing: content-box; }
.mt5-receipt { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 6px 0 4px; }
.mt5-receipt .mt-field { width: 70%; }
.mt5-done { font: 400 18px/1.2 var(--mt-display); letter-spacing: .06em; text-transform: uppercase; color: var(--mt-teal); }
.mt5 .lane-tools { margin-top: 14px; flex-wrap: wrap; gap: 12px; }
.mt5-steps { flex-wrap: wrap; }

/* ---- M9 · banner as a HUD terminal ------------------------------------------ */
.banner.is-mt { --cut: 24px; background: var(--mt-bg); border: 0; border-radius: 0; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.banner.is-mt::before { --cut: 16px; content: ""; position: absolute; inset: 12px; border: 1px solid var(--mt-line-2); pointer-events: none; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.banner.is-mt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--mt-teal) 7%, transparent) 0 1px, transparent 1px 4px); }
.mt9-line { font: 400 clamp(20px, 4.3vw, 52px)/1.3 var(--mt-display); letter-spacing: .02em; color: var(--mt-teal); text-transform: uppercase; }
.mt9-l { display: block; min-height: 1.3em; }
.mt9-caret { display: inline-block; width: .55em; height: .85em; margin-left: .18em; vertical-align: -.06em; background: var(--mt-teal); }
.banner.is-mt .mono { position: relative; z-index: 1; color: var(--mt-muted); }

/* decision card crops are zoomed in on one part of a screen */
.mt-crop > img { transform-origin: 50% 50%; }

@media (max-width: 860px) {
  .mt5-stage { aspect-ratio: auto; }
  .mt5-step { position: relative; top: auto; left: auto; width: auto; padding-top: 40px; translate: none !important; scale: none !important; opacity: 1 !important; }
  .mt5-step:not([data-pos="center"]) { display: none; }
  .mt5-step .callout { top: 0; left: 50%; }
  .mt5-step .callout::after { height: 16px; }
}

/* motion · Multract ------------------------------------------------------------ */
@keyframes mt-press { 50% { background: color-mix(in srgb, var(--mt-teal) 35%, transparent); color: var(--mt-ink); } }
/* M1: while the loop plays, each part waits for its phase */
.motion .mt1 .mt1-sheet { translate: -24px 0; transform-origin: 50% 0; transition: opacity var(--t-mid) var(--ease), translate var(--t-enter) var(--ease), scale var(--t-enter) var(--ease), visibility 0s linear var(--t-enter); }
.motion .mt1.is-play.is-sheet .mt1-sheet { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.motion .mt1.is-play.is-sum .mt1-sheet { visibility: hidden; opacity: 0; scale: 1 .08; transition: opacity var(--t-mid) var(--ease), scale var(--t-enter) var(--ease), visibility 0s linear var(--t-enter); }
.motion .mt1 .mt1-rows li { transition: background-color var(--t-fast) var(--ease); }
.motion .mt1 :is(.mt1-sum, .mt1-pay, .mt1-run) { transition: opacity var(--t-mid) var(--ease), translate var(--t-mid) var(--ease); }
.motion .mt1.is-play:not(.is-sum) .mt1-sum { opacity: 0; translate: 0 -10px; }
.motion .mt1.is-play:not(.is-pay) .mt1-pay { opacity: 0; }
.motion .mt1.is-play:not(.is-run) .mt1-run { opacity: 0; translate: 0 8px; }
.motion .mt1 .mt1-qr .qr-m rect { transition: translate var(--t-slow) var(--ease), opacity var(--t-base) var(--ease); transition-delay: calc(var(--i, 0) * 9ms); }
.motion .mt1.is-play:not(.is-pay) .mt1-qr .qr-m rect { translate: var(--dx, 0) var(--dy, 0); opacity: 0; transition-delay: 0s; }
.motion .mt1.is-pay:not(.is-run) .mt1-btn { animation: mt-press var(--t-slow) var(--ease) var(--t-slow) 2; }
.motion .mt1 .mt1-done b { transition: color var(--t-base) var(--ease); }
.motion .mt1.is-play:not(.is-done) .mt1-done b { color: var(--mt-muted); }
/* M2: the typo flashes when its page turns up, the approve button pulses */
.motion .book-page.is-current .bk-coral { animation: blink var(--t-enter) var(--ease) 500ms 2; }
.motion .book-page.is-current .bk-blink { animation: blink var(--t-slow) var(--ease) 600ms 2; }
/* M5: steps slide and scale between slots, the tag appears once a step lands */
.motion .mt5-step { transition: translate var(--t-slow) var(--ease), scale var(--t-slow) var(--ease), opacity var(--t-mid) var(--ease), visibility 0s linear var(--t-slow); }
.motion .mt5-step:not([data-pos="back"]) { transition-delay: 0s; }
.motion .mt5-step .callout { transition: opacity var(--t-base) var(--ease); }
.motion .mt5-step[data-pos="center"] .callout { transition-delay: 450ms; }
/* M9: the cursor blinks while typing, then three more times, then rests */
.motion .mt9-caret.is-blink { animation: ck-caret 1s steps(1) infinite; }
.motion .mt9-caret.is-end { animation: ck-caret 1s steps(1) 3; }

/* ==========================================================================
   Whitepaper IQ (case-whitepaper-iq.html) · page sections
   The recreated product UI keeps Whitepaper IQ's own cyan HUD on near-black,
   so it reads as the real screens; it stays dark in both site themes.
   The site accent (yellow) is used only for dots and small marks.
   ========================================================================== */
:root {
  --wiq-bg: #050D12;        /* product background (brief) */
  --wiq-panel: #07131B;
  --wiq-raise: #0B1A22;
  --wiq-line: #16303D;
  --wiq-cyan: #5CE1F0;      /* product brand cyan (brief) */
  --wiq-cyan-dim: rgba(92, 225, 240, .42);
  --wiq-bar: #173E57;
  --wiq-ink: #E4F1F4;
  --wiq-muted: #8CA3AA;
  --wiq-green: #3BC95E;
  --wiq-red: #E5484D;
}

/* ---- M1 hero mock: from pages to a score --------------------------------------- */
.w1 { position: relative; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; background: var(--wiq-bg); color: var(--wiq-ink); font-family: var(--sans); container-type: inline-size; overflow: hidden; }
.w1-top { display: flex; justify-content: space-between; gap: 12px; font: 400 var(--mono-xs)/1.3 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; color: var(--wiq-muted); }
.w1-top b { font-weight: 400; color: var(--wiq-ink); }
.w1-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 32% minmax(0, 1fr); gap: 18px; }
.w1-pages { position: relative; }
.w1-page { position: absolute; inset: 8px 8px 4px 2px; border-radius: 6px; background: var(--wiq-raise); border: 1px solid var(--wiq-line); transform-origin: 50% 100%; }
.w1-page:nth-child(1) { rotate: -7deg; translate: -2px 2px; opacity: .55; }
.w1-page:nth-child(2) { rotate: -3.5deg; opacity: .8; }
.w1-page.is-top { overflow: hidden; padding: 12px 10px; }
.w1-scroll { display: flex; flex-direction: column; align-items: flex-start; }
.w1-ln { display: block; width: 90%; height: 4px; border-radius: 2px; background: rgba(228, 241, 244, .16); margin-bottom: 6px; flex: none; }
.w1-mk { display: inline-block; flex: none; margin: 1px 0 7px; padding: 2px 5px; border-radius: 3px; border: 1px solid var(--wiq-cyan-dim); background: rgba(92, 225, 240, .12); color: var(--wiq-cyan); font: 500 8.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.w1-pno { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 6px; background: linear-gradient(to bottom, transparent, var(--wiq-raise) 45%); font: 400 8.5px/1 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; color: var(--wiq-muted); }
.w1-res { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.w1-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.w1-head small { display: block; font: 400 var(--mono-xs)/1.3 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; color: var(--wiq-muted); }
.w1-head b { display: block; margin-top: 4px; font: 600 15px/1.2 var(--sans); }
.w1-score { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.w1-ring { position: relative; width: 56px; height: 56px; display: block; }
.w1-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.w1-ring circle { fill: none; stroke-width: 4; }
.w1-ring .track { stroke: rgba(92, 225, 240, .16); }
.w1-ring .fill { stroke: var(--wiq-cyan); stroke-linecap: round; stroke-dasharray: 163.36; stroke-dashoffset: 11.44; }   /* 93% of 2πr */
.w1-ring > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 14px/1 var(--sans); letter-spacing: -.01em; }
.w1-why { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--wiq-cyan-dim); font: 500 9px/1.3 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; color: var(--wiq-ink); }
.w1-why i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); border: 1px solid var(--wiq-ink); }
.w1-bars { display: flex; flex-direction: column; gap: 7px; }
.w1-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; font-size: 10.5px; line-height: 1.2; }
.w1-bars span { color: var(--wiq-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w1-bars b { font-weight: 600; }
.w1-track { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: rgba(92, 225, 240, .12); overflow: hidden; }
.w1-track i { display: block; height: 100%; width: var(--v); border-radius: 3px; background: var(--wiq-cyan); transform-origin: left center; }
.w1-fly { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; margin: 0; }
@container (max-width: 420px) {
  .w1 { padding: 12px 12px 14px; gap: 8px; }
  .w1-top span { display: none; }
  .w1-main { gap: 12px; grid-template-columns: 28% minmax(0, 1fr); }
  .w1-head b { font-size: 13px; }
  .w1-ring { width: 44px; height: 44px; }
  .w1-ring > span { font-size: 12px; }
  .w1-bars { gap: 5px; }
  .w1-bars li { font-size: 9px; }
  .w1-track { height: 4px; }
}
/* motion: the loop in the page script swaps these states */
.motion .w1-page { transition: rotate var(--t-slow) var(--ease), translate var(--t-slow) var(--ease); }
.motion .w1.is-fan .w1-page:nth-child(1) { rotate: -14deg; translate: -10px 4px; }
.motion .w1.is-fan .w1-page:nth-child(2) { rotate: -7deg; translate: -4px 2px; }
.motion .w1.is-fan .w1-page.is-top { rotate: 2deg; }
.motion .w1.is-read .w1-scroll { animation: w1-scroll 3.4s linear both; }
@keyframes w1-scroll { to { translate: 0 -48%; } }
.motion .w1-track i { transition: scale var(--t-enter) var(--ease); }
.motion .w1-bars b { transition: opacity var(--t-base) var(--ease); }
.motion .w1.is-run li:not(.is-on) .w1-track i { scale: 0 1; }
.motion .w1.is-run li:not(.is-on) b { opacity: 0; }
.motion .w1-ring .fill { transition: stroke-dashoffset 900ms var(--ease); }
.motion .w1.is-run:not(.is-ringed) .w1-ring .fill { stroke-dashoffset: 163.36; }
.motion .w1-why { transition: opacity var(--t-mid) var(--ease), translate var(--t-mid) var(--ease); }
.motion .w1.is-run:not(.is-why) .w1-why { opacity: 0; translate: 0 6px; }
.motion .w1-mk { transition: opacity var(--t-base) var(--ease); }
.motion .w1-mk.is-gone { opacity: .25; }

/* ---- M5 annotated mock: the report, every score with its reasons -------------- */
.w5-inner { padding: 0 300px; }
.w5 .callout { line-height: 1.3; font-size: 22px; padding: 12px 16px; border-radius: var(--r-sm); }
.w5-frame { border: 1px solid var(--wiq-line); border-radius: var(--r-md); overflow: hidden; background: var(--wiq-bg); color: var(--wiq-ink); font-family: var(--sans); }
.w5-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #030A0E; border-bottom: 1px solid var(--wiq-line); }
.w5-bar > i { width: 8px; height: 8px; border-radius: 50%; background: var(--wiq-line); }
.w5-url { margin: 0 auto; transform: translateX(-12px); font: 400 var(--mono-s)/1 var(--mono); color: var(--wiq-muted); background: var(--wiq-bg); border-radius: var(--r-sm); padding: 5px 16px; }
.w5-body { display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.w5-report { padding: 22px 26px 22px; border-right: 1px solid var(--wiq-cyan-dim); display: flex; flex-direction: column; }
.w5-logo { display: inline-flex; align-items: center; gap: 8px; font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.w5-logo i { font: 700 9px/1 var(--sans); letter-spacing: 0; font-style: normal; border: 1px solid var(--wiq-ink); border-radius: 3px; padding: 3px 3px; }
.w5-total { margin: 22px 0 4px; font: 500 26px/1.15 var(--sans); letter-spacing: -.01em; align-self: flex-start; }
.w5-title { margin: 0 0 16px; font-size: 13px; color: var(--wiq-ink); }
.w5-cats { display: flex; flex-direction: column; gap: 10px; }
.w5-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 4px 0; font-size: 13px; font-weight: 500; color: var(--wiq-ink); }
.w5-row:focus-visible { outline: 2px solid var(--wiq-cyan); outline-offset: 2px; }
.w5-row > span { flex: 1; }
.w5-ico, .w5-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--wiq-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w5-chev { width: 16px; height: 16px; }
.w5-cat.is-open .w5-chev { rotate: 180deg; }
.w5-track { display: block; height: 14px; padding: 2px; border: 1px solid var(--wiq-line); margin-top: 4px; }
.w5-track i { display: block; height: 100%; background: var(--wiq-bar); }
.w5-cat.is-open .w5-track { border-color: var(--wiq-cyan); }
.w5-cat.is-open .w5-track i { background: var(--wiq-cyan); }
.w5-flags { padding: 12px 0 4px; font-size: 12px; line-height: 1.45; }
.w5-flags[hidden] { display: none; }
.w5-fh { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.w5-fh + ul + .w5-fh { margin-top: 12px; }
.w5-fh svg { width: 16px; height: 16px; flex: none; }
.w5-fh svg path { stroke: var(--wiq-muted); stroke-width: 1.4; fill: none; }
.w5-fh.is-g svg .f { fill: var(--wiq-green); stroke: none; }
.w5-fh.is-r svg .f { fill: var(--wiq-red); stroke: none; }
.w5-flags ul { padding-left: 16px; }
.w5-flags li { list-style: disc; margin-bottom: 4px; }
.w5-flags li::marker { color: var(--wiq-muted); }
.w5-flags b { font-weight: 600; }
.w5-up { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.w5-upbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--wiq-cyan-dim); border-radius: 8px; font-size: 13px; }
.w5-upbtn svg { width: 15px; height: 15px; fill: none; stroke: var(--wiq-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w5-up small { font-size: 10.5px; color: var(--wiq-muted); }
.w5-chat { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; background: radial-gradient(120% 70% at 0% 50%, rgba(92, 225, 240, .07), transparent 60%), var(--wiq-panel); }
.w5-msgs { display: flex; flex-direction: column; gap: 14px; }
.w5-msg { display: flex; align-items: flex-start; gap: 10px; }
.w5-msg[hidden] { display: none; }
.w5-msg img { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.w5-bub { margin: 0; max-width: 300px; padding: 10px 13px; border: 1px solid var(--wiq-line); border-radius: 12px; font-size: 12.5px; line-height: 1.5; }
.w5-bub p { margin: 0; }
.w5-bub ul { margin: 6px 0; padding-left: 16px; }
.w5-bub li { list-style: disc; }
.w5-bub li::marker { color: var(--wiq-cyan); }
.w5-msg.is-me { justify-content: flex-end; }
.w5-msg.is-me .w5-bub { border-color: var(--wiq-cyan-dim); }
.w5-msg.is-dots .w5-bub { display: flex; gap: 4px; padding: 13px 14px; }
.w5-msg.is-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--wiq-muted); }
.w5-chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.w5-chip { padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--wiq-cyan-dim); font-size: 11.5px; color: var(--wiq-ink); }
.w5-chip[hidden] { display: none; }
.w5-input { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--wiq-line); font-size: 12.5px; }
.w5-input .is-ph { color: #3B5560; }
.w5-input svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #3B5560; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* motion */
.motion .w5-row .w5-chev { transition: rotate 250ms var(--ease); }
.motion .w5-track, .motion .w5-track i { transition: background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
.motion .w5-row.is-press { background: rgba(92, 225, 240, .08); }
.motion .w5-row { transition: background-color var(--t-fast) var(--ease); }
.motion .w5-msg.is-new { animation: fade-up var(--t-mid) var(--ease) backwards; }
.motion .w5-msg.is-new .w5-bub li { animation: fade var(--t-base) var(--ease) backwards; }
.motion .w5-msg.is-new .w5-bub li:nth-child(1) { animation-delay: 250ms; }
.motion .w5-msg.is-new .w5-bub li:nth-child(2) { animation-delay: 450ms; }
.motion .w5-msg.is-new .w5-bub p:last-child { animation: fade var(--t-base) var(--ease) 650ms backwards; }
.motion .w5-msg.is-dots i { animation: ck-type 1.2s ease-in-out infinite; }
.motion .w5-msg.is-dots i:nth-child(2) { animation-delay: .2s; }
.motion .w5-msg.is-dots i:nth-child(3) { animation-delay: .4s; }
.motion .w5-input.is-typing span::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--wiq-ink); animation: ck-caret 1s steps(1) infinite; }

/* ---- P3 try-it: chat-first vs report beside IQBot ------------------------------ */
.tryit-wiq .tryit-stage > div { flex-direction: column; align-items: flex-start; gap: 2px; }
.tryit-wiq .tryit-stage[data-mode="chosen"] { grid-template-columns: 1fr 1fr; grid-template-areas: "s q" "c a"; }
.tryit-wiq .tryit-stage[data-mode="chosen"] .ti-score { grid-area: s; }
.tryit-wiq .tryit-stage[data-mode="chosen"] .ti-cats { grid-area: c; }
.tryit-wiq .tryit-stage[data-mode="chosen"] .ti-q { grid-area: q; }
.tryit-wiq .tryit-stage[data-mode="chosen"] .ti-a { grid-area: a; }
.tryit-wiq .tryit-stage[data-mode="default"] { grid-template-columns: minmax(0, 1fr); }
.tryit-wiq .tryit-stage[data-mode="default"] :is(.ti-score, .ti-cats) { opacity: .45; border-style: dashed; }
.tryit-wiq .tryit-stage[data-mode="default"] :is(.ti-q, .ti-a) { width: 80%; }
.tryit-wiq .tryit-stage[data-mode="default"] .ti-q { justify-self: end; }
.motion .tryit-wiq .tryit-stage > div { transition: opacity var(--t-mid) var(--ease); }

/* ---- M9 banner: a wall of whitepaper text fades as the headline sharpens ------- */
.banner.is-wiq .banner-line { position: relative; z-index: 1; color: var(--yellow); }
.banner.is-wiq .mono { position: relative; z-index: 1; }
.banner-wall { display: none; position: absolute; inset: 20px 24px; z-index: 0; overflow: hidden; pointer-events: none; font: 400 11px/1.7 var(--mono); color: color-mix(in srgb, var(--night-ink) 22%, transparent); }
.banner-wall span { display: block; white-space: nowrap; }
.motion .banner-wall { display: block; }
.motion .banner-wall span { transition: opacity var(--t-mid) var(--ease); transition-delay: calc(300ms + var(--i, 0) * 90ms); }
.motion .banner.is-in .banner-wall span { opacity: 0; }
.motion .banner.is-wiq .banner-line { transition: filter 1400ms var(--ease) 500ms, opacity 1400ms var(--ease) 500ms; }
.motion .banner.is-wiq:not(.is-in) .banner-line { filter: blur(12px); opacity: .3; }

@media (max-width: 860px) {
  .w5-inner { padding: 0; }
}

/* ==========================================================================
   GRID SYSTEM (session 8)
   One 12-column grid for every case page: max width --grid-max (1040px),
   24px gutters, 32px outer margin (20px at 860px and below). Every block
   starts and ends on a column line. Text blocks span columns 1 to 7 and
   share one left edge; media spans columns 1 to 7 or the full 12.
   --gcol is one column, --span-text the 7-column text measure.
   Press G on any case page to show the column overlay.
   ========================================================================== */
.case-wrap { container: page / inline-size; }
.case {
  --gw: min(100cqw, var(--grid-max));
  --gcol: calc((var(--gw) - 11 * var(--grid-gutter)) / 12);
  --span-text: calc(var(--gcol) * 7 + var(--grid-gutter) * 6);
  --col-text: var(--span-text);
}
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }

/* containers: .read sections now share the full grid and keep their content on columns 1 to 7 */
.case main .read { max-width: var(--grid-max); }
.case main .read > *, .case .block-head, .case .text-col { max-width: var(--span-text); }
.case .block-head p, .case .fig figcaption { max-width: var(--span-text); }

/* hero, meta strip, chapter index: 6 + 6, 4 x 3, 3 x 4 columns */
.case .hero { column-gap: var(--grid-gutter); }
.case .meta { column-gap: var(--grid-gutter); }
.case .meta > div { position: relative; padding-left: 0; padding-right: 0; border-left: 0; }
.case .meta > div + div::before { content: ""; position: absolute; left: calc(var(--grid-gutter) / -2); top: 0; bottom: 0; width: 1px; background: var(--line); }
.case .cindex { column-gap: var(--grid-gutter); }

/* opening: copy on columns 1 to 7, TL;DR on 8 to 12 */
.case .opening { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.case .opening > :first-child { grid-column: 1 / span 7; }
.case .opening > :last-child { grid-column: 8 / -1; }
.case .metagrid { column-gap: var(--grid-gutter); }

/* two-up and three-up card grids sit on 6 + 6 and 4 + 4 + 4 */
.case .ev-grid { gap: var(--grid-gutter); }
.case .np5-ds, .case .np-shots, .case .work-grid { column-gap: var(--grid-gutter); }

/* strategy map: evidence 1-4, insight 5-8, decision 9-12, arrows in the gutters */
.case .smap-head, .case .smap-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.case .smap-head > :nth-child(1), .case .smap-row > :nth-child(1) { grid-column: 1 / span 4; grid-row: 1; }
.case .smap-head > :nth-child(3), .case .smap-row > :nth-child(3) { grid-column: 5 / span 4; grid-row: 1; }
.case .smap-head > :nth-child(5), .case .smap-row > :nth-child(5) { grid-column: 9 / span 4; grid-row: 1; }
.case .smap-head > :nth-child(2), .case .smap-head > :nth-child(4) { display: none; }
.case .smap-row > .smap-gutter:nth-child(2) { grid-column: 4; grid-row: 1; }
.case .smap-row > .smap-gutter:nth-child(4) { grid-column: 8; grid-row: 1; }
.case .smap-row > .smap-gutter { justify-self: end; width: var(--grid-gutter); margin-right: calc(var(--grid-gutter) * -1); }
.case .smap-gutter::before { left: 3px; right: 4px; }
.case .smap-gutter::after { right: 4px; }
.case .smap-row { margin-inline: 0; padding-inline: 0; border-radius: 0; }
.case .smap-row:hover, .case .smap-row.is-hover { box-shadow: -8px 0 0 color-mix(in srgb, var(--accent) 6%, transparent), 8px 0 0 color-mix(in srgb, var(--accent) 6%, transparent); }

/* boxes and figures that used their own widths */
.case .tryit.read { margin-inline: 0; max-width: var(--span-text); }
.case .fig.read { margin-inline: 0; max-width: none; }
.case .flow-tabs { max-width: 100%; }

/* story stepper: steps on columns 1 to 3, the panel on 4 to 12 of the box */
.case .stepper-main { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.case .stepper-main > :first-child { grid-column: 1 / span 3; }
.case .stepper-main > :last-child { grid-column: 4 / -1; }

@media (max-width: 860px) {
  :root { --grid-gutter: 16px; --grid-margin: 20px; }
  .case { --col-text: var(--gw); --span-text: var(--gw); }
  .case .opening > :first-child, .case .opening > :last-child { grid-column: 1 / -1; }
  .case .opening { row-gap: 32px; }
  .case .smap-row > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .case .smap-row > .smap-gutter { justify-self: start; margin-right: 0; }
  .case .smap-head { display: none; }
  .case .stepper-main > :first-child, .case .stepper-main > :last-child { grid-column: 1 / -1; }
  .case .meta > div:nth-child(3)::before { display: none; }
}

/* G key: column overlay (dev aid, off by default) */
.grid-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; padding: 0 var(--grid-margin); display: none; }
.grid-overlay.is-on { display: block; }
.grid-overlay > div { max-width: var(--grid-max); height: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.grid-overlay i { background: color-mix(in srgb, var(--red) 12%, transparent); border-inline: 1px solid color-mix(in srgb, var(--red) 40%, transparent); }
.grid-overlay b { position: fixed; left: 8px; bottom: 8px; font: 400 var(--mono-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--red-text); background: var(--bg); padding: 4px 6px; border: 1px solid var(--line); }

/* user flow diagrams (session 8): the geometry is drawn for the full 12-column width,
   labels are 12px (sub labels 10px) at any width; case.js keeps --dg-u = viewBox units per css px */
.case .dg[data-flow] { max-width: none; }
.case .dg[data-flow] text { font-size: calc(12px * var(--dg-u, 1)); }
.case .dg[data-flow] :is(.dg-sub, .dg-edge-label, .dg-lane-label) { font-size: calc(var(--mono-xs) * var(--dg-u, 1)); }

/* ==========================================================================
   Session 8 · live screens, showreel, landing video and browser frame
   (NavisPay and Invnex). Screens sit straight on the page background: only
   the device frame and its own shadow, no panel behind them.
   ========================================================================== */
np-screen, inv-screen { display: block; }

/* showreel (assets/reel.js) */
.reel { position: relative; margin: 0; }
.reel-src { display: none; }
.reel li { list-style: none; }
.reel.is-reel .reel-stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); }
.reel-col { position: absolute; top: 0; display: flex; flex-direction: column; will-change: transform; }
.reel-cell { display: flex; justify-content: center; align-items: flex-start; flex: none; }
.reel.is-static .reel-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
.reel.is-static[data-cols="1"] .reel-stage, .reel.is-static[data-cols="2"] .reel-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reel.is-swipe .reel-stage { display: flex; gap: var(--grid-gutter); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 8px; }
.reel.is-swipe .reel-stage::-webkit-scrollbar { display: none; }
.reel.is-swipe .reel-stage > li { flex: 0 0 100%; scroll-snap-align: center; }
.reel-note { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; }
.reel.is-swipe ~ .reel-note .only-reel, .reel.is-static ~ .reel-note .only-reel { display: none; }

/* screens beside their copy: the five decisions, design-system pairs */
.case .dcards { gap: 0; }
.case .dcard { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 48px 0;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: 32px; align-items: start; }
.case .dcard:last-child { border-bottom: 1px solid var(--line); }
.case .dcard > :first-child { grid-column: 1 / span 4; }
.case .dcard > .dcard-shots { grid-column: 5 / -1; }
.dcard-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
.dcard-shots[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.dcard-shots > .mock-label { grid-column: 1 / -1; }
.dcard-shots figure { margin: 0; }
.dcard-shots figcaption, .np-pair figcaption { margin-top: 12px; font: 400 var(--mono-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
.dcard-shots .shot-img { width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.np-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: 56px; }
.np-pair { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
.np-pair > figcaption { grid-column: 1 / -1; }
.np-pair .tag { font: 400 var(--mono-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); display: block; margin-bottom: 12px; }

/* landing page: the recording, then the explorable page */
.np-video { position: relative; margin: 0; }
.np-video video, .np-video img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.np-video .np-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg); font: 400 var(--mono-s)/1 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); }
.np-video.is-paused .np-play { display: inline-flex; }
.bframe { margin: 0; }
.bframe-win { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--card); box-shadow: var(--shadow-float); }
.bframe-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bframe-bar .dots { display: flex; gap: 6px; }
.bframe-bar .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-strong); }
.bframe-url { font: 400 var(--mono-s)/1 var(--mono); color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 18px; white-space: nowrap; }
.bframe-view { position: relative; height: var(--bf-h, 600px); overflow: hidden; background: var(--tile); }
.bframe.is-active .bframe-view { overscroll-behavior: contain; }   /* only while exploring, so the page never feels stuck */
.bframe-view iframe { position: absolute; left: 0; top: 0; width: 1440px; border: 0; transform-origin: 0 0; background: var(--card); }
.bframe-cover { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 20px; background: none; z-index: 2; cursor: pointer; }
.bframe-cover span { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font: 400 var(--mono-s)/1 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); box-shadow: var(--shadow-float); }
.bframe.is-active .bframe-cover { display: none; }
.bframe-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.bframe-foot a, .np-live a { font: 400 var(--mono-s)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.only-mobile { display: none; }

@media (max-width: 860px) {
  .case .dcard > :first-child, .case .dcard > .dcard-shots { grid-column: 1 / -1; }
  .np-pairs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .dcard-shots, .np-pair { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .bframe { display: none; }
  .only-mobile { display: block; }
}
.dcard-shots.is-stack { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
.dcard-shots inv-screen, .inv-panel-shot inv-screen { --x: 0; }
.inv-panel-shot { margin-top: 16px; }
.dcard-shots.is-stack figure { justify-self: stretch; }
/* looping recordings (Multract) */
.loop-fig { position: relative; margin: 0; }
.loop-fig video { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.loop-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg); font: 400 var(--mono-s)/1 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); }
.loop-fig.is-paused .loop-play { display: inline-flex; }
.dcard-shots .loop-fig .loop-play { top: 40%; }
/* raster screens on Quote to Cash, Multract and Whitepaper IQ: no panel behind, the browser frame keeps its own shadow */
.case .stage { border: 0; border-radius: 0; padding: 0; overflow: visible; }
.case .stage .stripes { display: none; }
.case .stage .frame, .case .frame { max-width: var(--span-text); margin-inline: 0; border-bottom: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-float); }
.case .frame--phone { max-width: 220px; border-radius: 28px 28px 0 0; border-bottom: 0; box-shadow: none; }
.case .dcard:not(:has(.dcard-shots)) > :first-child { grid-column: 1 / span 7; }
.case .dcard > .dcard-crop { grid-column: 10 / -1; }
.case .dcard-crop .ph { border: 0; }
.case .dg.blueprint { max-width: var(--span-text); }
/* number strips and the stat strip: cells on 3 or 4 columns, dividers drawn in the gutters */
.case .numstrip { column-gap: var(--grid-gutter); }
.case .numstrip > div { position: relative; padding-left: 0; padding-right: 0; border-left: 0; }
.case .numstrip > div + div::before { content: ""; position: absolute; left: calc(var(--grid-gutter) / -2); top: 0; bottom: 0; width: 1px; background: var(--line); }
.case .tools.is-stats { column-gap: var(--grid-gutter); border-left: 0; border-bottom: 1px solid var(--line); }
.case .tools.is-stats > div { position: relative; border-right: 0; border-bottom: 0; padding-left: 0; padding-right: 0; }
.case .tools.is-stats > div + div::before { content: ""; position: absolute; left: calc(var(--grid-gutter) / -2); top: 0; bottom: 0; width: 1px; background: var(--line); }
@media (max-width: 860px) {
  .case .numstrip > div:nth-child(3)::before { display: none; }
  .case .tools.is-stats > div + div::before { display: none; }
  .case .tools.is-stats > div + div { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Session 9 · decision screens as large as the grid allows, nothing cropped
   ========================================================================== */
.case .dcard > :first-child, .case .dcard:not(:has(.dcard-shots)) > :first-child { grid-column: 1 / span 7; }
.case .dcard > .dcard-shots, .case .dcard > .dcard-crop { grid-column: 1 / -1; }
.case .dcard-crop { display: block; }
.case .dcard-crop .ph.has-img, .case .stepper-panel .ph.has-img { aspect-ratio: auto; border: 0; background: none; border-radius: 0; }
.case .dcard-crop .ph.has-img > img, .case .stepper-panel .ph.has-img > img { width: auto; max-width: 100%; height: auto; object-fit: initial; border-radius: var(--r-md); }
.motion .case .dcard:not(.is-open) .dcard-crop .ph, .motion .case .dcard.is-open .dcard-crop .ph { scale: none; outline: 0; }
.case .dcard.is-open .dcard-crop .ph { outline: 0; }
.case .dcard-crop .ph:not(.has-img) { max-width: var(--span-text); }
.case .stepper-panel np-screen, .case .stepper-panel inv-screen { margin-top: 4px; }
@media (max-width: 860px) { .case .dcard-crop { display: block; } }

/* ==========================================================================
   Session 10 · live Quote-to-cash screens and prototype
   ========================================================================== */
.case q2c-screen { width: 100%; }
.case .stepper-panel q2c-screen { margin-top: 4px; }
.case .q2c-proto q2c-screen { --q-radius: var(--r-md); }
.case .q2c-proto .lane-tools { margin-top: 12px; }
.case .q2c-proto-cap { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.case .q2c-proto-cap b { color: var(--ink); font-weight: 500; }
/* NavisPay hero: the tap to pay scene, same 4:3 box as before */
.case .np-t2p { position: relative; background: var(--card); }
.case .np-t2p iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; color-scheme: normal; }
/* NavisPay decisions: phones at a quarter of their former area (3 columns each, side by side) */
.case .dcard-shots.is-compact { grid-template-columns: repeat(2, calc(var(--gcol) * 3 + var(--grid-gutter) * 2)); justify-content: start; }
@media (max-width: 860px) { .case .dcard-shots.is-compact { grid-template-columns: repeat(2, minmax(0, 220px)); column-gap: 16px; } }
.case .np-land-m { margin: 0; }
.case .np-land-m img { width: 100%; height: auto; display: block; border-radius: var(--r-md); border: 1px solid var(--line); }
/* Multract decisions: recordings at half the former width (6 of 12 columns) */
.case .dcard > .dcard-shots.is-half { grid-column: 1 / span 6; }
@media (max-width: 860px) { .case .dcard > .dcard-shots.is-half { grid-column: 1 / -1; } }
/* Whitepaper IQ decisions: the whole screen, then a slow zoom into the part the decision is about */
.case .dcard > .dcard-zoom { grid-column: 1 / span 6; }
.zoomfig { margin: 0; }
.zf-view { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--tile); cursor: zoom-in; }
.zoomfig.is-zoomed .zf-view { cursor: zoom-out; }
.zf-move { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
.zoomfig.is-zoomed .zf-move { transform: translate(var(--zx, 0%), var(--zy, 0%)) scale(var(--zs, 1)); }
.zf-move img { width: 100%; height: 100%; display: block; }
.zf-ring { position: absolute; left: var(--rl); top: var(--rt); width: var(--rw); height: var(--rh); border: 2px solid var(--accent); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .28); transition: opacity .6s ease; pointer-events: none; }
.zoomfig.is-zoomed .zf-ring { opacity: 0; }
.zoomfig figcaption { margin-top: 12px; font: 400 var(--mono-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .zf-move, .zf-ring { transition: none; } }
@media (max-width: 860px) { .case .dcard > .dcard-zoom { grid-column: 1 / -1; } }
/* Whitepaper IQ report mock at half its former width */
.case .w5.is-half .fit { width: calc(var(--gcol) * 8 + var(--grid-gutter) * 7); }
.case .w5.is-half .callout-legend, .case .w5.is-half .lane-tools { max-width: calc(var(--gcol) * 8 + var(--grid-gutter) * 7); }
@media (max-width: 860px) { .case .w5.is-half .fit, .case .w5.is-half .callout-legend, .case .w5.is-half .lane-tools { width: auto; max-width: none; } }
.zoomfig.is-still .zf-view { cursor: default; }

/* case hero logo (Invnex), light and dark versions */
.case-logo { display: block; height: 34px; margin-bottom: 28px; }
.case-logo img { height: 100%; width: auto; }
.case-logo-d { display: none; }
[data-theme="dark"] .case-logo-l { display: none; }
[data-theme="dark"] .case-logo-d { display: block; }