/* Injury Firm Video Prompt Pack: shared styles. Lines up to the site additions are the single-file pack's CSS, unchanged. */
/* Layout (bento restyle, AH-PACK1 2026-10-21): the QOLA bento look from the AI visibility report. Every block sits in a box on a 12-column grid; one glowing frame glides between boxes and between concept tiles (mouse, pen and keyboard; touch ignored; reduced motion jumps). Light/dark switch in the header. Earlier note: a quiet slate workbook. One "your firm" panel up top, then each video as a wide stage with its prompt underneath (portrait videos sit beside their prompt). The videos carry the color; the page stays out of the way. Page chrome uses the QOLA brand (qola-design palette.css): Trust Navy, Compass Teal, slate neutrals, Plus Jakarta Sans. The demo videos keep their own firm colors. */
:root {
  --bg: #F1F5F9; --surface: #FFFFFF; --surface2: #F8FAFC; --ink: #0F172A; --soft: #334155; --muted: #5B6B80; --line: #E2E8F0; --line2: #CBD5E1; --accent: var(--ms-5); --accent-soft: #F0FDFA;
  --mark: var(--ms-p2); --mark-ink: #0F172A; --brand-mark: var(--ms-4); --glow: rgba(var(--ms-rgb-d), .10); --shade: rgba(15, 23, 42, .06);
  --band: #0F172A; --band-ink: #FFFFFF; --band-muted: #CBD5E1; --band-btn: var(--ms-2); --band-btn-ink: #0F172A; --stage: #0F172A;
  --gl-a: var(--ms-rgb-d); --gl-b: var(--ms-rgb-1);
  --f-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-code: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-sans: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-qmode="light"]) {
  --bg: #0F172A; --surface: #131E33; --surface2: #1A2740; --ink: #F1F5F9; --soft: #CBD5E1; --muted: #A9B6C8; --line: rgba(255, 255, 255, .10); --line2: rgba(255, 255, 255, .18); --accent: var(--ms-2); --accent-soft: rgba(var(--ms-rgb), .10);
  --mark: var(--ms-dk); --mark-ink: var(--ms-p2); --brand-mark: var(--ms-2); --glow: rgba(var(--ms-rgb-d), .20); --shade: rgba(0, 0, 0, .35);
  --band: #16233A; --band-ink: #FFFFFF; --band-muted: #CBD5E1; --band-btn: var(--ms-2); --band-btn-ink: #0F172A; --stage: #020617;
  --gl-a: var(--ms-rgb); --gl-b: var(--ms-rgb-p); color-scheme: dark; } }
:root[data-qmode="dark"] {
  --bg: #0F172A; --surface: #131E33; --surface2: #1A2740; --ink: #F1F5F9; --soft: #CBD5E1; --muted: #A9B6C8; --line: rgba(255, 255, 255, .10); --line2: rgba(255, 255, 255, .18); --accent: var(--ms-2); --accent-soft: rgba(var(--ms-rgb), .10);
  --mark: var(--ms-dk); --mark-ink: var(--ms-p2); --brand-mark: var(--ms-2); --glow: rgba(var(--ms-rgb-d), .20); --shade: rgba(0, 0, 0, .35);
  --band: #16233A; --band-ink: #FFFFFF; --band-muted: #CBD5E1; --band-btn: var(--ms-2); --band-btn-ink: #0F172A; --stage: #020617;
  --gl-a: var(--ms-rgb); --gl-b: var(--ms-rgb-p); color-scheme: dark; }

* { box-sizing: border-box; }
body { background: radial-gradient(1100px 640px at 88% -12%, var(--glow) 0%, transparent 62%), var(--bg); overflow-x: clip; color: var(--ink); font: 400 16px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
header.wrap.top { max-width: 1580px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-mark { display: block; height: 30px; width: auto; }
.brand small { font: 500 12px/1 var(--f-code); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); }
.top a { font: 600 14px/1 var(--f-body); text-decoration: none; color: var(--ink); padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); transition: border-color .2s ease-out, color .2s ease-out; }
.top a:hover { border-color: var(--accent); color: var(--accent); }
.top a { white-space: nowrap; }
@media (max-width: 520px) { .brand small { display: none; } }

.hero { padding-block: 28px 32px; display: grid; gap: 18px; max-width: 860px; }
.eyebrow { font: 600 12px/1.3 var(--f-code); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
.hero p { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 60ch; margin: 0; }
.steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--muted); }
.steps b { font: 700 13px/1 var(--f-code); color: var(--accent); background: var(--accent-soft); border-radius: 999px; width: 28px; height: 28px; display: grid; place-items: center; }
.steps strong { color: var(--ink); display: block; font-weight: 650; }

/* firm panel */
.firm { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 18px; margin-bottom: 56px; }
.firm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.firm-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.firm-head p { margin: 0; color: var(--muted); font-size: 14px; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .swatch-group > span { font: 600 12px/1 var(--f-code); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input { width: 100%; font: 500 16px/1.2 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.field input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.firm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.swatch-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.swatches { display: flex; gap: 8px; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; background: var(--c); }
.sw[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); margin-left: auto; }
.legend mark, .legend .todo { font: 500 12px/1 var(--f-code); padding: 3px 6px; }
.btn-text { font: 600 14px/1 var(--f-body); background: none; border: 0; color: var(--accent); cursor: pointer; padding: 6px 0; }

/* sections + demos */
.section-head { display: grid; gap: 8px; margin-bottom: 26px; max-width: 760px; }
.section-head h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.025em; }
.section-head p { margin: 0; color: var(--muted); font-size: 17px; }
.demo { padding-bottom: 64px; scroll-margin-top: 24px; }
.demo-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.demo-title { display: grid; gap: 6px; max-width: 70ch; min-width: 0; }
.demo-kicker { font: 600 12px/1 var(--f-code); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.demo-title h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.demo-title p { margin: 0; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 12px/1 var(--f-code); letter-spacing: .06em; text-transform: uppercase; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface); }
.seg button { font: 600 13px/1 var(--f-body); border: 0; background: none; color: var(--muted); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.demo-body { display: grid; gap: 16px; }
.demo-body.portrait { grid-template-columns: min(380px, 100%) minmax(0, 1fr); align-items: start; gap: 24px; }
.player { display: grid; gap: 10px; min-width: 0; }
.stage { position: relative; width: min(100%, calc(74vh * var(--arn, 1.7778))); max-width: 100%; aspect-ratio: var(--arn, 1.7778); margin-inline: auto; border-radius: 16px; overflow: hidden; background: var(--stage); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(15, 23, 42, .45); cursor: pointer; }
.demo-body.portrait .stage { width: min(380px, calc(74vh * var(--arn, .5625)), 100%); margin: 0; }
.frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.frame * { box-sizing: border-box; }
.controls { display: flex; align-items: center; gap: 12px; width: 100%; }
.demo-body:not(.portrait) .controls { width: min(100%, calc(74vh * var(--arn, 1.7778))); margin-inline: auto; }
.demo-body.portrait .controls { width: min(380px, 100%); }
.play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.play svg { width: 14px; height: 14px; fill: currentColor; }
.scrub { flex: 1; min-width: 0; accent-color: var(--accent); }
.time { font: 500 12px/1 var(--f-code); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.prompts { display: grid; gap: 12px; min-width: 0; }
.prompt { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.prompt-bar span { font: 600 12px/1.3 var(--f-code); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.copy { font: 700 14px/1 var(--f-body); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; white-space: nowrap; transition: background .2s ease-out, border-color .2s ease-out; }
.copy:hover { background: var(--ms-4); border-color: var(--ms-4); color: var(--ms-on); }
.copy:active { transform: scale(.97); }
.prompt pre { margin: 0; padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13.5px/1.6 var(--f-code); color: var(--ink); max-height: 300px; overflow: hidden; position: relative; }
.prompt pre::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
.prompt.open pre { max-height: none; }
.prompt.open pre::after, .prompt.short pre::after { display: none; }
.prompt.short pre { max-height: none; }
.more { display: block; width: 100%; font: 600 13px/1 var(--f-body); color: var(--accent); background: none; border: 0; border-top: 1px solid var(--line); padding: 12px; cursor: pointer; }
.prompt.short .more { display: none; }
mark { background: var(--mark); color: var(--mark-ink); border-radius: 4px; padding: 0 2px; }
.todo { border: 1px dashed var(--muted); border-radius: 4px; padding: 0 2px; color: var(--ink); }
.followup-head { font: 600 14px/1.4 var(--f-body); color: var(--muted); margin: 6px 0 -2px; }

.note { font-size: 14px; color: var(--muted); margin: 0; }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; background: var(--band); color: var(--band-ink); border-radius: 20px; padding: 36px clamp(20px, 4vw, 44px); margin-block: 8px 40px; }
.cta h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.015em; }
.cta p { margin: 8px 0 0; color: var(--band-muted); max-width: 60ch; }
.cta h2 { color: var(--band-ink); font-weight: 800; }
.cta a.go { font: 700 15px/1 var(--f-body); background: var(--band-btn); color: var(--band-btn-ink); text-decoration: none; padding: 15px 22px; border-radius: 999px; white-space: nowrap; transition: background .2s ease-out; }
.cta a.go:hover { background: var(--ms-1); }
.foot { border-top: 1px solid var(--line); padding-block: 24px 48px; color: var(--muted); font-size: 13px; display: grid; gap: 8px; }
.foot p { margin: 0; max-width: 90ch; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; background: var(--ink); color: var(--bg); font: 600 14px/1 var(--f-body); padding: 12px 18px; border-radius: 999px; transition: .25s; pointer-events: none; z-index: 50; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .demo-body.portrait { grid-template-columns: 1fr; }
  .demo-body.portrait .stage, .demo-body.portrait .controls { margin-inline: auto; }
  .legend { margin-left: 0; }
  .cta { grid-template-columns: 1fr; }
  .cta a.go { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- video frames (fixed pixel worlds, scaled to fit) ---------- */
.v-paper { position: absolute; inset: 0; background: var(--bgc, #F7F3EE); }
/* logo */
.lg-cam { position: absolute; inset: 0; transform-origin: 960px 540px; }
.lg-cam svg { position: absolute; left: 0; top: 0; }
.lg-name, .lg-sub { position: absolute; left: 0; right: 0; text-align: center; color: var(--ink); white-space: nowrap; }
.lg-name { top: 628px; font: 600 98px/1 var(--f-serif); }
.lg-sub { top: 762px; font: 500 26px/1 var(--f-code); letter-spacing: .32em; opacity: .72; }
.lg-name span, .lg-sub span { display: inline-block; }
/* crash explainer */
.ce { position: absolute; inset: 0; background: var(--bgc, #F7F3EE); color: var(--ink); overflow: hidden; }
.ce-pill { position: absolute; font: 600 24px/1 var(--f-code); letter-spacing: .1em; text-transform: uppercase; padding: 14px 20px; border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 999px; white-space: nowrap; }
.ce-title { position: absolute; transform-origin: 0 0; font-family: var(--f-serif); font-weight: 600; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.ce-hl { position: absolute; background: #FFFFFF; border-radius: 18px; box-shadow: 0 10px 30px -18px rgba(30, 15, 40, .4); }
.ce-row { position: absolute; display: flex; align-items: center; gap: 22px; font-family: var(--f-sans); font-weight: 600; white-space: nowrap; }
.ce-c { position: relative; flex: none; border-radius: 50%; display: grid; place-items: center; border: 3px solid color-mix(in srgb, var(--ink) 28%, transparent); font-family: var(--f-code); font-weight: 700; }
.ce-c svg { position: absolute; inset: 18%; width: 64%; height: 64%; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ce-persp { position: absolute; perspective: 1800px; }
.ce-card { position: absolute; inset: 0; background: #FFFFFF; border-radius: 36px; box-shadow: 0 50px 90px -50px rgba(30, 15, 40, .55), 0 2px 6px rgba(30, 15, 40, .06); transform-style: preserve-3d; }
.ce-step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 70px; }
.ce-icon svg { width: 100%; height: 100%; display: block; }
.ce-stepn { font: 600 24px/1 var(--f-code); letter-spacing: .14em; opacity: .55; }
.ce-stext { margin-top: 18px; font-family: var(--f-serif); font-weight: 600; line-height: 1.08; text-wrap: balance; }
.ce-end { position: absolute; inset: 0; background: var(--dark); color: var(--bgc, #F7F3EE); }
.ce-end > * { position: absolute; left: 0; right: 0; text-align: center; }
.ce-end .e-name { font-family: var(--f-serif); font-weight: 600; line-height: 1; padding: 0 80px; text-wrap: balance; }
.ce-end .e-call { font-family: var(--f-sans); font-weight: 600; }
.ce-end .e-call b { color: var(--ac); font-weight: 800; }
.ce-end .e-lab { font: 600 26px/1.6 var(--f-code); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.ce-end .e-fine { font: 500 22px/1.6 var(--f-code); letter-spacing: .06em; opacity: .62; padding: 0 60px; }
/* kinetic */
.kt-lab { position: absolute; left: 90px; top: 320px; font: 600 30px/1 var(--f-code); letter-spacing: .16em; color: var(--ink); opacity: .6; }
.kt-box { position: absolute; left: 90px; top: 390px; width: 900px; height: 960px; display: flex; align-items: center; }
.kt-words { font: 800 118px/1.06 var(--f-sans); letter-spacing: -.035em; color: var(--ink); }
.kt-w { display: inline-block; position: relative; margin-right: .22em; isolation: isolate; }
.kt-hl { position: absolute; left: -.07em; right: -.07em; top: .14em; bottom: .02em; background: var(--ac); z-index: -1; transform-origin: 0 50%; border-radius: .2em; }
.kt-foot { position: absolute; left: 90px; right: 90px; top: 1380px; text-align: center; font: 500 26px/1.3 var(--f-code); color: var(--ink); opacity: .6; }
.kt-end > * { position: absolute; left: 0; right: 0; text-align: center; color: var(--ink); }
.kt-end .k-name { top: 760px; font: 600 120px/1 var(--f-serif); padding: 0 60px; }
.kt-end .k-call { top: 930px; font: 800 66px/1 var(--f-sans); letter-spacing: -.02em; }
.kt-end .k-call span { position: relative; isolation: isolate; display: inline-block; }
.kt-end .k-lab { top: 1060px; font: 600 28px/1 var(--f-code); letter-spacing: .16em; opacity: .7; }
/* split flap */
.sf-title { position: absolute; left: 0; right: 0; top: 66px; text-align: center; font: 600 70px/1 var(--f-serif); color: var(--ink); white-space: nowrap; }
.sf-board { position: absolute; left: 230px; top: 196px; width: 1460px; height: 712px; background: var(--ink); border-radius: 28px; box-shadow: 0 50px 90px -40px rgba(20, 10, 30, .6); }
.sf-lab { position: absolute; left: 60px; font: 600 26px/1 var(--f-code); letter-spacing: .14em; color: var(--ac); }
.sf-cell { position: absolute; width: 66px; height: 100px; border-radius: 9px; background: var(--cell); overflow: hidden; }
.sf-cell::after { content: ""; position: absolute; left: 0; right: 0; top: 49px; height: 2px; background: rgba(0, 0, 0, .5); }
.sf-ch { position: absolute; inset: 0; display: grid; place-items: center; font: 700 64px/1 var(--f-code); color: var(--bgc, #F7F3EE); }
.sf-thanks { position: absolute; left: 0; right: 0; top: 950px; text-align: center; font: italic 500 54px/1 var(--f-serif); color: var(--ink); }
/* lower thirds */
.lt { position: absolute; inset: 0; background-color: #DCDCDC; background-image: conic-gradient(#EFEFEF 25%, #DCDCDC 0 50%, #EFEFEF 0 75%, #DCDCDC 0); background-size: 64px 64px; }
.lt-tag { position: absolute; left: 48px; top: 44px; font: 600 22px/1 var(--f-code); letter-spacing: .14em; color: #666666; }
.lt-person { position: absolute; left: 0; top: 0; }
.lt-g { position: absolute; left: 150px; top: 790px; height: 150px; display: flex; }
.lt-bar { width: 12px; background: var(--ac); transform-origin: 50% 100%; }
.lt-plate { background: var(--ink); color: var(--bgc, #F7F3EE); padding: 0 48px 0 36px; min-width: 620px; display: flex; flex-direction: column; justify-content: center; gap: 14px; white-space: nowrap; }
.lt-n { font: 700 56px/1 var(--f-sans); letter-spacing: -.01em; }
.lt-r { font: 500 30px/1 var(--f-sans); opacity: .8; }
.lt-plate.alt { flex-direction: row; align-items: center; gap: 26px; }
.lt-plate.alt .lt-n { font: 600 64px/1 var(--f-serif); letter-spacing: 0; }
.lt-plate.alt i { width: 3px; height: 54px; background: var(--ac); }
/* shared end card + highlighter wrapper */
.ec > * { position: absolute; left: 0; right: 0; text-align: center; }
.ec .x-name { font-family: var(--f-serif); font-weight: 600; line-height: 1; padding: 0 60px; }
.ec .x-call { font-family: var(--f-sans); font-weight: 800; letter-spacing: -.02em; }
.ec .x-call b { color: var(--ac); }
.ec .x-lab { font: 600 26px/1.5 var(--f-code); letter-spacing: .14em; text-transform: uppercase; }
.hlw { position: relative; isolation: isolate; display: inline-block; }
/* phone ad */
.ph-head { position: absolute; left: 90px; top: 300px; width: 900px; font: 800 72px/1.04 var(--f-sans); letter-spacing: -.03em; color: var(--ink); transform-origin: 50% 100%; }
.ph { position: absolute; left: 300px; top: 500px; width: 480px; height: 900px; border-radius: 68px; background: var(--ink); padding: 16px; box-shadow: 0 60px 80px -50px rgba(20, 10, 30, .6); transform-origin: 50% 60%; }
.ph-scr { position: relative; width: 100%; height: 100%; border-radius: 54px; overflow: hidden; background: var(--scr); }
.ph-time { position: absolute; left: 0; right: 0; top: 60px; text-align: center; font: 700 92px/1 var(--f-sans); color: var(--ink); letter-spacing: -.03em; }
.ph-date { position: absolute; left: 0; right: 0; top: 166px; text-align: center; font: 600 22px/1 var(--f-code); letter-spacing: .12em; color: var(--ink); opacity: .6; }
.ph-n { position: absolute; left: 18px; right: 18px; height: 104px; background: #FFFFFF; border-radius: 24px; display: flex; align-items: center; gap: 16px; padding: 0 18px; box-shadow: 0 8px 20px -14px rgba(20, 10, 30, .5); }
.ph-ic { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font: 800 26px/1 var(--f-sans); color: #FFFFFF; }
.ph-tx { min-width: 0; flex: 1; display: grid; gap: 6px; }
.ph-tx b { font: 700 25px/1.1 var(--f-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-tx span { font: 500 21px/1.1 var(--f-sans); color: var(--ink); opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-n i { font: 500 18px/1 var(--f-code); font-style: normal; color: var(--ink); opacity: .5; align-self: flex-start; margin-top: 22px; }
.ph-msg { position: absolute; left: 26px; right: 56px; top: 290px; background: #FFFFFF; border-radius: 30px 30px 30px 8px; padding: 24px 26px; font: 600 28px/1.35 var(--f-sans); color: var(--ink); transform-origin: 0 100%; box-shadow: 0 10px 24px -16px rgba(20, 10, 30, .5); }
.ph-msg small { display: block; font: 700 20px/1 var(--f-code); letter-spacing: .08em; opacity: .6; margin-bottom: 12px; }
.ph-dots { position: absolute; left: 26px; top: 290px; background: #FFFFFF; border-radius: 30px 30px 30px 8px; padding: 26px 30px; display: flex; gap: 10px; }
.ph-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); opacity: .4; }
.ph-dram { position: absolute; left: 0; right: 0; top: 1418px; text-align: center; font: 600 20px/1 var(--f-code); letter-spacing: .14em; color: var(--ink); opacity: .55; }
/* bilingual square */
.bl { position: absolute; inset: 0; background: var(--ink); overflow: hidden; color: var(--bgc, #F7F3EE); }
.bl-line { position: absolute; left: 70px; right: 70px; top: 0; height: 1080px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; text-align: center; font: 800 116px/1.04 var(--f-sans); letter-spacing: -.035em; }
.bl-line span { display: inline-block; margin: 0 .13em; }
.bl-help > div { position: absolute; left: 0; right: 0; text-align: center; font: 600 108px/1 var(--f-serif); }
/* bumper */
.bm { position: absolute; left: 930px; top: 410px; width: 940px; font: 800 96px/1.04 var(--f-sans); letter-spacing: -.035em; color: var(--ink); transform-origin: 0 100%; }
.bm-e { position: absolute; left: 932px; color: var(--ink); white-space: nowrap; }
/* timeline */
.tl-st { position: absolute; top: 300px; width: 320px; text-align: center; color: var(--ink); }
.tl-st small { display: block; font: 600 20px/1 var(--f-code); letter-spacing: .14em; opacity: .55; }
.tl-st b { display: block; margin-top: 14px; font: 600 52px/1 var(--f-serif); }
.tl-st span { display: block; margin-top: 12px; font: 500 26px/1.25 var(--f-sans); opacity: .72; }
/* case file */
.cf-h { position: absolute; left: 0; right: 0; top: 86px; text-align: center; font: 600 80px/1 var(--f-serif); color: var(--ink); padding: 0 70px; }
.cf-d { position: absolute; left: 390px; top: 450px; width: 300px; height: 380px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 30px 50px -30px rgba(20, 10, 30, .55), 0 1px 3px rgba(20, 10, 30, .08); display: flex; flex-direction: column; align-items: center; }
.cf-d svg { width: 190px; height: 190px; margin-top: 50px; }
.cf-d b { margin-top: 22px; font: 700 34px/1.1 var(--f-sans); color: var(--ink); text-align: center; padding: 0 20px; }

/* grids: every style at once */
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tile { display: grid; gap: 10px; padding: 10px; border-radius: 18px; border: 2px solid transparent; cursor: pointer; min-width: 0; }
.tile:hover { background: var(--surface); }
.tile[aria-pressed="true"] { border-color: var(--accent); background: var(--surface); }
.tile .stage { width: 100%; border-radius: 12px; }
.tile-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 4px; }
.tile-cap b { font: 700 16px/1.2 var(--f-display); }
.tile-cap span { font: 500 12px/1 var(--f-code); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.grid-bar { display: flex; align-items: center; gap: 10px; }
.grid-bar .note { min-width: 0; }
.play.snd.on { background: var(--accent); color: var(--surface); border-color: var(--accent); }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; } }
.grid4.tall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.grid4.tall .tile { padding: 7px; gap: 8px; }
.grid4.tall .tile-cap b { font-size: 15px; }
.tile-cap { flex-wrap: wrap; }
@media (max-width: 760px) { .grid4.tall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* homepage demo (fixed pixel world, scaled to fit) */
.hp-host { min-width: 0; }
.hp-stage { position: relative; width: 100%; max-width: 100%; aspect-ratio: var(--arn, 1.6); border-radius: 16px; overflow: hidden; background: #E2E8F0; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(15, 23, 42, .45); }
.demo-body.portrait .hp-stage { width: min(380px, 100%); }
.hp-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; background: #F1F5F9; }
.hp-chrome { flex: none; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #F1F5F9; border-bottom: 1px solid #CBD5E1; }
.hp-chrome i { width: 12px; height: 12px; border-radius: 50%; background: #CBD5E1; }
.hp-url { margin-left: 16px; width: 440px; height: 28px; border-radius: 8px; background: #FFFFFF; font: 500 14px/28px var(--f-code); color: #64748B; padding: 0 12px; }
.hp-screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--bgc, #F7F3EE); position: relative; }
.hp-world.phone { background: #141217; padding: 12px; border-radius: 56px; }
.hp-world.phone .hp-chrome { display: none; }
.hp-world.phone .hp-screen { border-radius: 44px; }
.hp { color: var(--ink); background: var(--paper); font: 400 17px/1.55 var(--f-sans); }
.hp h1, .hp h2, .hp h3 { font-family: var(--f-serif); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; }
.hp-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 28px; padding: 16px 56px; background: var(--paper); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.hp-logo { display: flex; align-items: center; gap: 12px; font: 600 26px/1 var(--f-serif); margin-right: auto; white-space: nowrap; }
.hp-ring { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--ac); display: grid; place-items: center; font: 600 18px/1 var(--f-serif); }
.hp-top nav { display: flex; gap: 26px; font: 600 15px/1 var(--f-sans); opacity: .8; }
.hp-call { background: var(--ink); color: var(--paper); font: 700 15px/1 var(--f-sans); padding: 13px 18px; border-radius: 999px; white-space: nowrap; }
.hp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; padding: 56px 56px 64px; align-items: start; }
.hp-eyebrow { font: 600 13px/1 var(--f-code); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.hp-hero h1 { font-size: 64px; margin-top: 18px; }
.hp-lead { font-size: 20px; margin: 18px 0 0; opacity: .85; }
.hp-trust { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.hp-trust li { display: flex; gap: 12px; align-items: center; font-weight: 650; }
.hp-trust li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); box-shadow: inset 0 0 0 6px var(--ac); flex: none; }
.hp-quiz { background: #FFFFFF; border-radius: 22px; padding: 26px; box-shadow: 0 30px 60px -36px rgba(20, 10, 30, .45), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.hq-head { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 var(--f-code); letter-spacing: .08em; text-transform: uppercase; min-height: 26px; }
.hq-link { background: none; border: 0; font: 700 14px/1 var(--f-sans); color: var(--ink); cursor: pointer; padding: 6px 0; text-transform: none; letter-spacing: 0; }
.hq-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); margin: 12px 0 22px; overflow: hidden; }
.hq-bar i { display: block; height: 100%; background: var(--ac); border-radius: 99px; transition: width .35s ease; }
.hp .hq-q { font-size: 32px; margin-bottom: 18px; }
.hq-p { margin: -6px 0 16px; opacity: .8; }
.hq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hq-opts.one { grid-template-columns: 1fr; }
.hq-opt { min-height: 60px; text-align: left; padding: 14px 18px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); background: #FFFFFF; font: 650 17px/1.25 var(--f-sans); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.hq-opt:hover { border-color: var(--ac); }
.hq-opt[aria-pressed="true"] { border-color: var(--ac); background: var(--soft); }
.hq-form { display: grid; gap: 8px; }
.hq-form label { font: 700 14px/1.2 var(--f-sans); margin-top: 6px; }
.hq-form label i { font-weight: 500; opacity: .7; }
.hq-form input:not([type="checkbox"]) { font: 500 18px/1.2 var(--f-sans); padding: 14px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); background: #FFFFFF; width: 100%; }
.hq-form input:focus { outline: none; border-color: var(--ac); }
.hq-form .hq-consent { display: flex; gap: 10px; font: 500 12.5px/1.45 var(--f-sans); opacity: .85; margin-top: 10px; }
.hq-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--ink); }
.hq-err { font: 650 13px/1.3 var(--f-sans); color: #8A4B00; }
.hq-submit { margin-top: 12px; min-height: 58px; border: 0; border-radius: 14px; background: var(--ink); color: var(--paper); font: 750 18px/1 var(--f-sans); cursor: pointer; }
.hq-done { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 10px 0; }
.hq-done p { margin: 0; }
.hq-check { width: 64px; height: 64px; border-radius: 50%; background: var(--ac); display: grid; place-items: center; }
.hq-check svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hq-demo { font: 600 12px/1 var(--f-code); letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.hq-anim { animation: hqin .32s ease both; }
@keyframes hqin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.hp-sec { padding: 56px; }
.hp .hp-sec h2 { font-size: 42px; margin-bottom: 26px; }
.hp-alt { background: #FFFFFF; }
.hp-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-card { background: #FFFFFF; border-radius: 18px; padding: 24px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.hp .hp-card h3 { font-size: 26px; margin: 14px 0 8px; }
.hp-card p { margin: 0; opacity: .8; font-size: 16px; }
.hp-num { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font: 700 15px/1 var(--f-code); }
.hp-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hp-tile { display: flex; justify-content: space-between; padding: 20px 22px; border-radius: 14px; background: var(--paper); font-weight: 700; }
.hp-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-steps li { counter-increment: s; display: grid; gap: 6px; align-content: start; }
.hp-steps li::before { content: counter(s); font: 600 44px/1 var(--f-serif); color: var(--ink); opacity: .35; }
.hp-steps b { font-size: 19px; }
.hp-steps span { opacity: .8; font-size: 16px; }
.hp-att { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; }
.hp-photo { aspect-ratio: 4 / 5; border-radius: 18px; background: var(--soft); display: grid; place-items: center; font: 600 13px/1 var(--f-code); letter-spacing: .1em; text-transform: uppercase; }
.hp-att p { margin: 12px 0 0; font-size: 18px; opacity: .85; }
.hp-faq { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding: 18px 0; }
.hp-faq summary { font-weight: 700; cursor: pointer; font-size: 18px; }
.hp-faq p { margin: 10px 0 0; opacity: .8; }
.hp-foot { display: grid; gap: 8px; padding: 40px 56px 56px; background: var(--ink); color: var(--paper); font-size: 14px; }
.hp-foot b { font: 600 24px/1 var(--f-serif); }
.hp-foot span { opacity: .8; }
.hp-bar { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 12px 16px 16px; background: var(--paper); box-shadow: 0 -10px 24px -14px rgba(20, 10, 30, .3); }
.hp-bcall, .hp-bgo { display: grid; place-items: center; min-height: 52px; border-radius: 14px; font: 750 16px/1 var(--f-sans); color: var(--ink); }
.hp-bcall { border: 2px solid var(--ink); }
.hp-bgo { background: var(--ac); border: 0; cursor: pointer; }
.hp-m .hp-top { padding: 12px 18px; gap: 12px; }
.hp-m .hp-logo { font-size: 20px; gap: 8px; }
.hp-m .hp-ring { width: 34px; height: 34px; font-size: 14px; }
.hp-m .hp-call { padding: 11px 16px; font-size: 14px; }
.hp-m .hp-hero { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px 28px; }
.hp-m .hp-hero h1 { font-size: 34px; margin-top: 10px; }
.hp-m .hp-lead { font-size: 16px; margin-top: 10px; }
.hp-m .hp-eyebrow { font-size: 11px; }
.hp-m .hp-quiz { padding: 18px; border-radius: 18px; }
.hp-m .hq-q { font-size: 26px; }
.hp-m .hq-opts { grid-template-columns: 1fr; }
.hp-m .hq-opt { min-height: 56px; font-size: 16px; }
.hp-m .hp-trust { margin: 0; }
.hp-m .hp-sec { padding: 36px 18px; }
.hp.hp-m .hp-sec h2 { font-size: 30px; margin-bottom: 18px; }
.hp-m .hp-3, .hp-m .hp-6, .hp-m .hp-steps, .hp-m .hp-att { grid-template-columns: 1fr; }
.hp-m .hp-att .hp-photo { width: 160px; }
.hp-m .hp-foot { padding: 28px 18px 36px; }
@media (prefers-reduced-motion: reduce) { .hq-bar i { transition: none; } }

/* layout: sticky firm panel on the left, drawer on phones */
.layout { max-width: 1580px; margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.layout main .wrap { max-width: none; padding-left: 0; padding-right: 0; }
.side { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 14px; padding-bottom: 16px; scrollbar-width: thin; }
.side .firm { margin: 0; padding: 18px; gap: 14px; }
.side .firm-head { display: grid; gap: 6px; }
.side .fields { grid-template-columns: 1fr; gap: 10px; }
.side .field input { padding: 9px 11px; font-size: 15px; }
.side .firm-row { display: grid; gap: 12px; }
.side .legend { margin-left: 0; }
.side-nav { display: grid; gap: 2px; }
.side-nav a { color: var(--muted); text-decoration: none; font: 600 14px/1.2 var(--f-body); padding: 9px 12px; border-radius: 10px; }
.side-nav a:hover, .side-nav a.on { background: var(--accent-soft); color: var(--ink); }
.side-close, .fab { display: none; }
.style-seg button { padding: 8px 10px; }
.tex { position: absolute; inset: 0; pointer-events: none; }
.tex-grid { background-image: linear-gradient(rgba(20, 20, 40, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 40, .06) 1px, transparent 1px); background-size: 48px 48px; }
.tex-grain { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.tex-dots { background-image: radial-gradient(rgba(20, 10, 30, .1) 1.8px, transparent 2.2px); background-size: 26px 26px; }
.hp.hp-tex-grid { background-image: linear-gradient(rgba(20, 20, 40, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 40, .05) 1px, transparent 1px); background-size: 40px 40px; }
.hp.hp-tex-dots { background-image: radial-gradient(rgba(20, 10, 30, .08) 1.6px, transparent 2px); background-size: 22px 22px; }
/* 1 Nov: the firm panel is a drawer at every width now; the hero form is the way in, the button opens the panel. */
@media (min-width: 0px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: min(360px, 88vw); max-height: none; background: var(--bg); padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); transform: translateX(-105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 0 0 40px rgba(15, 23, 42, .3); }
  .side.open { transform: none; visibility: visible; transition: transform .25s ease; }
  .side-close { display: inline-block; justify-self: start; font: 650 14px/1 var(--f-body); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; }
  .fab { display: flex; align-items: center; gap: 8px; position: fixed; z-index: 55; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); font: 600 14px/1 var(--f-body); padding: 13px 18px; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .5); cursor: pointer; }
  .fab b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .fab svg { width: 15px; height: 15px; flex: none; }
  .scrim { position: fixed; inset: 0; z-index: 58; background: rgba(15, 23, 42, .45); }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none !important; } }
/* crash */
.cm-root, .cp-root, .cn-root { position: absolute; inset: 0; overflow: hidden; }
.cm-world, .cn-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cm-panel { position: absolute; background: #FFFFFF; border-radius: 30px; box-shadow: 0 34px 70px -38px rgba(20, 12, 30, .5), 0 1px 3px rgba(20, 12, 30, .08); }
.cm-dot { position: relative; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: "JetBrains Mono", monospace; font-weight: 700; border: 3px solid var(--line); }
.cm-dot svg { position: absolute; inset: 20%; width: 60%; height: 60%; fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.cp-s { position: absolute; inset: 0; overflow: hidden; }
.cp-s > *, .cp-o > * { position: absolute; }
.cn-w { display: inline-block; position: relative; }
.cn-wt { display: inline-block; }
.cn-pen { position: absolute; left: 0; bottom: var(--pb, 18px); width: var(--penw, 48px); height: var(--penh, 290px); margin-left: calc(var(--penw, 48px) / -2); background: var(--pen) no-repeat center / 100% 100%; transform-origin: 50% 100%; opacity: 0; pointer-events: none; z-index: 4; font-style: normal; }

/* ads */
.an-n { position: absolute; width: 380px; height: 380px; border-radius: 6px; overflow: hidden; transform-origin: 50% 8%; box-shadow: 0 26px 34px -24px rgba(20, 10, 30, .55), 0 1px 2px rgba(20, 10, 30, .12); }
.an-n::before, .an-f::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 17%; background: rgba(0, 0, 0, .05); }
.an-n i { display: block; width: 42px; height: 42px; margin: 90px 0 0 40px; border: 4px solid var(--ink); border-radius: 9px; opacity: .32; }
.an-n div { margin: 20px 36px 0 40px; font: 700 56px/1.06 var(--f-serif); letter-spacing: -.02em; color: var(--ink); }
.an-h { position: absolute; left: 90px; width: 900px; top: 300px; font: 800 86px/1.02 var(--f-serif); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.au-l { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; font: 600 34px/1 var(--f-sans); color: var(--ink); background: #FFFFFF; border-radius: 999px; padding: 15px 26px 15px 20px; box-shadow: 0 12px 26px -16px rgba(20, 10, 30, .55), 0 0 0 2px color-mix(in srgb, var(--ink) 14%, transparent); }
.au-l b { width: 14px; height: 14px; border-radius: 50%; background: var(--ac); }
.al-c { position: absolute; left: 0; top: 0; width: 425px; height: 92px; background: #FFFFFF; border-radius: 18px; display: flex; align-items: center; gap: 18px; padding: 0 22px; font: 600 30px/1.1 var(--f-sans); color: var(--ink); white-space: nowrap; box-shadow: 0 16px 26px -18px rgba(0, 0, 0, .7); }
.al-c i { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ink) 28%, transparent); }
.bb-m { position: absolute; top: 0; max-width: 940px; font: 700 58px/1.12 var(--f-sans); letter-spacing: -.02em; padding: 30px 44px 32px; box-shadow: 0 18px 30px -22px rgba(20, 10, 30, .5); }
.bb-m.l { left: 70px; border-radius: 50px 50px 50px 12px; transform-origin: 0 100%; }
.bb-m.r { right: 160px; border-radius: 50px 50px 12px 50px; transform-origin: 100% 100%; }

/* ---------- bento restyle (page chrome only; nothing under .frame or .hp-world) ---------- */
/* labels in the body face, buttons and chips with soft corners */
.eyebrow, .brand small, .field label, .swatch-group > span, .chip, .demo-kicker, .prompt-bar span, .tile-cap span { font-family: var(--f-body); font-weight: 700; letter-spacing: .08em; }
.top a, .copy, .cta a.go, .side-close, .fab, .toast { border-radius: 10px; }
.top a { display: inline-flex; align-items: center; min-height: 40px; }
.chip { border-radius: 6px; padding: 7px 10px; background: var(--surface2); }
.seg { border-radius: 10px; flex-wrap: wrap; max-width: 100%; background: var(--surface2); }
.seg button { border-radius: 7px; }
.top-acts { display: flex; align-items: center; gap: 10px; }
.theme { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--f-body); cursor: pointer; transition: border-color .2s ease-out, color .2s ease-out; }
.theme:hover { border-color: var(--accent); color: var(--accent); }
.theme svg { width: 18px; height: 18px; flex: none; }
.theme[data-mode="dark"] .moon, .theme:not([data-mode="dark"]) .sun { display: none; }
@media (max-width: 520px) {
  .theme { padding: 9px 10px; }
  .theme .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* bento grid + box */
.bento { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; margin: 0; padding: 0; }
.bx { position: relative; min-width: 0; padding: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px var(--shade); }
.bx:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 16px; }
.bento:not(.quiet) > .bx::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(110% 80% at 50% 0%, rgba(var(--gl-a), .07), rgba(var(--gl-a), 0) 62%); }
.bento:not(.quiet) > .bx.is-awake::after { opacity: 1; }
.w4 { grid-column: span 4; } .w8 { grid-column: span 8; } .w12 { grid-column: 1 / -1; }

/* hero + steps */
.hero-sec { margin-block: 4px 56px; }
.hero.bx { max-width: none; padding: clamp(22px, 3.4vw, 40px); gap: 18px; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; color: var(--muted); }
.step b { font: 700 14px/1 var(--f-body); color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; }
.step strong { display: block; color: var(--ink); font-weight: 750; font-size: 16px; margin-bottom: 2px; }

/* sections: the head sits above its boxes */
.layout main > section.wrap { margin-bottom: 56px; }
.section-head { margin-bottom: 20px; }
.demo.bx { padding: 24px; scroll-margin-top: 24px; }
.demo-head { margin-bottom: 18px; }

/* concept tiles: small boxes inside the demo box; the glide frame marks the one under the pointer */
.grid4 { position: relative; }
.grid4 .tile { background: var(--surface2); border: 1px solid var(--line); border-radius: 14px; }
.grid4 .tile:hover { background: var(--surface2); }
.grid4 .tile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.grid4 .tile:focus-visible { outline-offset: 3px; border-radius: 14px; }
.tile .stage { border-radius: 10px; }

/* prompts */
.prompt { background: var(--surface2); border-radius: 12px; }
.prompt pre::after { background: linear-gradient(transparent, var(--surface2)); }

/* side panel boxes */
.sw { box-shadow: 0 0 0 1px var(--line2); }
.side-bento { gap: 14px; }
.side .firm.bx { border-radius: 16px; }
.side-nav.bx { padding: 8px; }

/* call to action box */
.cta-bento { margin-block: 8px 40px; }
.cta.bx { background: var(--band); border-color: var(--line); margin: 0; padding: 36px clamp(20px, 4vw, 44px); }

/* glide frame (same as the QOLA AI visibility report and apps/markets glide.css) */
.gl-frame { position: absolute; left: 0; top: 0; width: 10px; height: 10px; z-index: 3; pointer-events: none; opacity: 0; border-radius: 16px; will-change: transform, width, height, opacity; contain: layout paint style; overflow-anchor: none; /* never let scroll anchoring follow the moving frame */
  box-shadow: 0 0 0 1px rgba(var(--gl-a), .08), 0 0 18px -4px rgba(var(--gl-a), .34), 0 0 64px -10px rgba(var(--gl-a), .24); }
.gl-ring { position: absolute; inset: -.5px; border-radius: inherit; padding: 1.5px; --ang: 135deg;
  background: linear-gradient(var(--ang), rgb(var(--gl-a)) 0%, rgb(var(--gl-b)) 30%, rgba(var(--gl-b), 0) 70%) border-box, linear-gradient(rgba(var(--gl-a), .22), rgba(var(--gl-a), .22)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.gl-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.gl-spot { position: absolute; left: 0; top: 0; width: 320px; height: 320px; border-radius: 50%; will-change: transform; background: radial-gradient(closest-side, rgba(var(--gl-a), .10), rgba(var(--gl-a), .04) 55%, rgba(var(--gl-a), 0)); }
.gl-flash { position: absolute; inset: 0; border-radius: inherit; opacity: 0; box-shadow: 0 0 0 1.5px rgba(var(--gl-b), .9), 0 0 30px -2px rgba(var(--gl-a), .6); }
:root[data-qmode="dark"] .gl-frame { box-shadow: 0 0 0 1px rgba(var(--gl-a), .08), 0 0 18px -3px rgba(var(--gl-a), .36), 0 0 70px -8px rgba(var(--gl-a), .24), inset 0 0 28px -10px rgba(var(--gl-a), .3); }
:root[data-qmode="dark"] .gl-spot { mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(var(--gl-b), .12), rgba(var(--gl-a), .05) 55%, rgba(var(--gl-a), 0)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-qmode="light"]) .gl-frame { box-shadow: 0 0 0 1px rgba(var(--gl-a), .08), 0 0 18px -3px rgba(var(--gl-a), .36), 0 0 70px -8px rgba(var(--gl-a), .24), inset 0 0 28px -10px rgba(var(--gl-a), .3); }
  :root:not([data-qmode="light"]) .gl-spot { mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(var(--gl-b), .12), rgba(var(--gl-a), .05) 55%, rgba(var(--gl-a), 0)); }
}
/* over videos and big demo boxes the frame keeps its ring and glow but drops the spotlight tint */
.quiet > .gl-frame .gl-spot, .grid4 > .gl-frame .gl-spot { display: none; }
.quiet > .gl-frame { box-shadow: 0 0 0 1px rgba(var(--gl-a), .06), 0 0 40px -12px rgba(var(--gl-a), .22); }

@media (max-width: 1100px) { .w4, .w8 { grid-column: span 6; } .step:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .bento { gap: 12px; }
  .side-bento { gap: 12px; }
  .bx, .demo.bx { padding: 18px 16px; }
  .w4, .w8 { grid-column: 1 / -1; }
  .layout main > section.wrap, .hero-sec { margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) { .bento > .bx::after { transition: none; } }

/* ==========================================================================
   Site additions (AH-PACK2 2026-10-21): Showcase / Prompts tabs, the Showcase
   wall, category menus, Copy link and Coming next. Everything above is the
   single-file pack's CSS, unchanged.
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

/* header tabs */
.tabs { display: flex; gap: 8px; margin-right: auto; margin-left: 8px; }
.top .tabs a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 640px) {
  header.wrap.top { flex-wrap: wrap; row-gap: 12px; }
  .tabs { order: 3; width: 100%; margin: 0; }
  .tabs a { flex: 1; text-align: center; justify-content: center; min-width: 0; padding: 8px 6px; font-size: 13px; white-space: normal; line-height: 1.2; }
}

/* small text buttons that sit with the chips */
.link-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--f-body); padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; transition: border-color .2s ease-out, color .2s ease-out; }
.link-btn:hover, .link-btn.done { border-color: var(--accent); color: var(--accent); }
.link-btn svg { width: 14px; height: 14px; flex: none; }

/* Prompts: a block opened from a direct link */
.demo.bx.is-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Prompts: category menu that stays on screen when the side panel is a drawer */
.catbar { display: none; }
@media (max-width: 1100px) {
  .catbar { display: flex; position: sticky; top: 0; z-index: 40; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin: -16px 0 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .catbar::-webkit-scrollbar { display: none; }
  .catbar a { flex: none; color: var(--muted); text-decoration: none; font: 600 14px/1 var(--f-body); padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; }
  .catbar a.on { color: var(--ink); background: var(--accent-soft); border-color: var(--line); }
  .layout main > section.wrap, .demo.bx { scroll-margin-top: 72px; }
}

/* Coming next boxes (both pages) */
.coming-box { display: grid; gap: 8px; align-content: start; border-style: dashed; box-shadow: none; background: transparent; }
.coming-box h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--soft); }

/* Showcase: filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.filters button { font: 600 14px/1 var(--f-body); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.filters button:hover { border-color: var(--accent); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Showcase: the wall. Rows are 2px tall and each tile spans as many as it needs (set by showcase.js), so tiles of any shape pack tightly. */
.wall { --wall-gap: 16px; grid-auto-rows: 2px; row-gap: 0; column-gap: var(--wall-gap); align-items: start; margin-bottom: 40px; }
.wall > .sc-tile { align-self: start; margin-bottom: var(--wall-gap); padding: 10px; display: grid; gap: 10px; cursor: pointer; }
.wall > .sc-tile[hidden] { display: none; }
.sp-xl { grid-column: span 8; } .sp-l { grid-column: span 4; } .sp-s { grid-column: span 4; } .sp-p { grid-column: span 3; } .sp-h { grid-column: span 6; }
@media (max-width: 1100px) {
  .wall { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sp-xl { grid-column: span 8; } .sp-l { grid-column: span 4; } .sp-s { grid-column: span 3; } .sp-p { grid-column: span 2; } .sp-h { grid-column: span 4; }
}
@media (max-width: 640px) {
  .wall { --wall-gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-xl, .sp-h { grid-column: span 4; } .sp-l, .sp-s, .sp-p { grid-column: span 2; }
  .wall > .sc-tile { padding: 8px; gap: 8px; }
  .sc-title { font-size: 13px; }
  .sc-k { font-size: 11px; }
}
.sc-tile .player { gap: 0; }
.sc-tile .stage { width: 100%; margin: 0; border-radius: 10px; pointer-events: none; cursor: inherit; }
.sc-tile .hp-tile { aspect-ratio: var(--arn, 1.6); position: relative; overflow: hidden; background: #E2E8F0; }
.sc-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sc-link:focus-visible { outline-offset: 2px; }
.sc-cap { display: grid; gap: 6px; padding: 0 4px 2px; min-width: 0; }
.sc-title { font: 700 15px/1.25 var(--f-display); color: var(--ink); }
.sc-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-k { flex: 1; min-width: 0; font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.badge { flex: none; font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.sc-snd { position: relative; z-index: 2; width: 32px; height: 32px; }
.sc-snd.on { border-color: var(--accent); color: var(--accent); }
.sc-coming { cursor: default; }
.sc-coming.bx { border-style: dashed; box-shadow: none; background: transparent; }
.sc-ph { aspect-ratio: 16 / 9; border-radius: 10px; border: 1px dashed var(--line2); display: grid; place-items: center; background: var(--surface2); }
.sc-ph span, .coming-box .eyebrow { font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-coming .sc-title { color: var(--soft); }
.sc-hero.bx { padding: clamp(22px, 3.4vw, 40px); }
.sc-hero { display: grid; gap: 14px; }
.sc-hero h1 { font-size: clamp(32px, 5vw, 58px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.sc-hero p { margin: 0; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 60ch; }
.sc-main { padding-bottom: 8px; }

/* Your firm: custom colors and font presets (2026-10-21). */
.swatches { flex-wrap: wrap; }
.sw-custom { position: relative; display: inline-block; background: conic-gradient(#F5A524, #46A758, #0E7C7B, #3B82F6, #8E4EC6, #F5A524); overflow: hidden; }
.sw-custom.on { background: var(--c); box-shadow: 0 0 0 2px var(--ink); }
.sw-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.sw-custom:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.hex { width: 104px; font: 500 14px/1.2 var(--f-code); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-transform: uppercase; }
.hex:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.hex[aria-invalid="true"] { border-color: #B45309; }
.font-group { display: grid; gap: 10px; }
.fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.fp { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; min-width: 0; }
.fp b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.fp small { font-size: 12px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; }
.fp[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
/* Phone drawer: fill the screen height so the panel scrolls down to Fonts and Reset (align-self: start had sized it to its content). */
@media (max-width: 1100px) { .side { align-self: stretch; } }

/* Showcase: setup banner, "Get the prompt" label, prompt drawer (2026-10-29). */
.sc-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; text-decoration: none; color: var(--ink); padding: 16px 20px; }
.sc-setup-n { font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.sc-setup-t { flex: 1 1 320px; color: var(--soft); font-size: 15px; }
.sc-setup-t b { color: var(--ink); }
.sc-setup-go { font-weight: 700; color: var(--accent); white-space: nowrap; }
.sc-get { font: 700 12.5px/1 var(--f-body); color: var(--accent); }
.sc-get::after { content: " →"; }
.pd { position: fixed; inset: 0; z-index: 80; }
.pd[hidden] { display: none; }
.pd-scrim { position: absolute; inset: 0; background: rgba(2, 6, 23, .55); }
.pd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(920px, 100vw); background: var(--bg); border-left: 1px solid var(--line2); display: grid; grid-template-rows: auto 1fr; box-shadow: -24px 0 60px -20px rgba(2, 6, 23, .6); }
.pd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px 16px; border-bottom: 1px solid var(--line); }
.pd-bar b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-acts { display: flex; align-items: center; gap: 14px; flex: none; font-size: 14px; }
.pd-x { border: 1px solid var(--line2); background: var(--surface); color: var(--ink); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; }
.pd iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }

/* Start here panel and preset themes (2026-10-29). The panel leads with the firm's details, then one-tap looks;
   colors and fonts sit under Fine-tune. No red anywhere in the page chrome. */
.start-tag { justify-self: start; font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 6px 10px; }
.side .firm-head h2 { font-size: 22px; }
.side .firm-head p { font-size: 15px; color: var(--soft); }
.firm details { border-top: 1px solid var(--line); padding-top: 12px; }
.firm details > summary { cursor: pointer; font: 600 14px/1.2 var(--f-body); color: var(--soft); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 28px; }
.firm details > summary::-webkit-details-marker { display: none; }
.firm details > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease-out; flex: none; }
.firm details[open] > summary::before { transform: rotate(45deg); }
.firm details[open] > summary { margin-bottom: 12px; }
.firm details > .fields { margin-top: 0; }
.theme-group { display: grid; gap: 10px; }
.theme-group > span { font: 700 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.theme-group[hidden] { display: none; } /* 7 Nov: the look presets (color schemes) stay out of the firm panel */
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp { display: flex; align-items: center; gap: 10px; min-height: 48px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; min-width: 0; }
.tp b { font-size: 14.5px; font-weight: 700; line-height: 1.15; min-width: 0; }
.tp-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--t-ink) 0 55%, var(--t-ac) 55% 100%); box-shadow: 0 0 0 2px var(--t-paper), 0 0 0 3px var(--line2); }
.tp:hover { border-color: var(--line2); }
.tp[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.firm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.btn-text.quiet { color: var(--muted); font-weight: 600; }
.side .legend { font-size: 12.5px; }

/* Showcase: the firm in four looks */
.th-sec.bx { display: grid; gap: 18px; padding: clamp(18px, 2.6vw, 28px); }
.th-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; }
.th-head h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 6px; overflow-wrap: anywhere; }
.th-head p { margin: 0; color: var(--muted); font-size: 15px; }
.th-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1280px) { .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .th-grid { gap: 10px; } }
.th-card { display: grid; gap: 12px; align-content: start; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface2); min-width: 0; }
.th-card.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.th-info { display: grid; gap: 6px; padding: 0 4px 4px; min-width: 0; }
.th-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.th-name b { font-size: 16px; font-weight: 800; color: var(--ink); }
.th-on { display: none; font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.th-card.is-on .th-on { display: inline; }
.th-feel { color: var(--soft); font-size: 14px; }
.th-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 12.5px; }
.th-meta i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line2); }
.th-meta i:last-of-type { margin-right: 4px; }
.th-use { margin-top: 6px; min-height: 44px; font: 700 14px/1 var(--f-body); border-radius: 10px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.th-use:hover { background: var(--accent-soft); }
.th-use[aria-pressed="true"] { background: var(--accent-soft); cursor: default; }

/* The end card art: sized from its own width so it reads the same in a 4-across row or a phone column. */
.th-art { container-type: inline-size; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--t-paper); color: var(--t-ink); position: relative; }
.ta-in { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--t-fb); }
.ta-name { font-family: var(--t-fh); color: var(--t-ink); overflow-wrap: anywhere; }
.ta-legal { font-size: max(10px, 4.6cqw); letter-spacing: .04em; opacity: .78; }

.ta-classic-trust .ta-in { align-items: center; justify-content: center; text-align: center; gap: 4.5cqw; padding: 9cqw; box-shadow: inset 0 0 0 2.4cqw var(--t-paper), inset 0 0 0 2.8cqw var(--t-ac); }
.ta-classic-trust .ta-ring { width: 24cqw; height: 24cqw; border-radius: 50%; border: 1.2cqw solid var(--t-ac); display: grid; place-items: center; box-shadow: inset 0 0 0 1.6cqw var(--t-paper), inset 0 0 0 2cqw var(--t-ink); }
.ta-classic-trust .ta-ring span { font-family: var(--t-fh); font-weight: 700; font-size: 9cqw; color: var(--t-ink); }
.ta-classic-trust .ta-kick { font-size: max(10px, 4.4cqw); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ta-classic-trust .ta-name { font-size: 11cqw; font-weight: 700; line-height: 1.05; }
.ta-classic-trust .ta-rule { width: 22cqw; height: .9cqw; background: var(--t-ac); }
.ta-classic-trust .ta-phone { font-family: var(--t-fh); font-size: 8cqw; font-weight: 700; }
.ta-classic-trust .ta-legal { margin-top: 2cqw; }

.ta-modern-advocate .ta-in { justify-content: flex-end; gap: 3.6cqw; padding: 10cqw 9cqw; background-image: linear-gradient(rgba(31, 35, 40, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 35, 40, .06) 1px, transparent 1px); background-size: 12cqw 12cqw; }
.ta-modern-advocate .ta-mono { width: 17cqw; height: 17cqw; border-radius: 4cqw; background: var(--t-ink); display: grid; place-items: center; margin-bottom: auto; }
.ta-modern-advocate .ta-mono span { font-family: var(--t-fh); font-weight: 800; font-size: 7cqw; color: #FFFFFF; }
.ta-modern-advocate .ta-name { font-size: 11.5cqw; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; padding-left: 4.5cqw; border-left: 2cqw solid var(--t-ac); }
.ta-modern-advocate .ta-kick { font-size: max(11px, 5.2cqw); color: #3D444D; }
.ta-modern-advocate .ta-phone { align-self: flex-start; margin-top: 3cqw; background: var(--t-ac); color: var(--t-on); font-weight: 700; font-size: 6.4cqw; border-radius: 999px; padding: 3cqw 6cqw; }

.ta-bold-fighter .ta-in { gap: 0; }
.ta-bold-fighter .ta-top { flex: 1 1 58%; background: var(--t-ink); padding: 9cqw 8cqw 7cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 4cqw; }
.ta-bold-fighter .ta-name { color: #FFFFFF; font-size: 15cqw; font-weight: 700; line-height: .95; text-transform: uppercase; letter-spacing: -.005em; }
.ta-bold-fighter .ta-rule { width: 30cqw; height: 3cqw; background: var(--t-ac); }
.ta-bold-fighter .ta-bot { flex: 1 1 42%; padding: 6cqw 8cqw 7cqw; display: flex; flex-direction: column; justify-content: center; gap: 3.6cqw; }
.ta-bold-fighter .ta-kick { font-family: var(--t-fh); font-size: max(11px, 5.4cqw); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ta-bold-fighter .ta-phone { align-self: stretch; text-align: center; background: var(--t-ac); color: var(--t-on); font-family: var(--t-fh); font-weight: 700; font-size: 9cqw; line-height: 1; padding: 3.2cqw 3cqw; }

.ta-warm-neighbor .ta-in { align-items: center; justify-content: center; text-align: center; gap: 4cqw; padding: 10cqw 8cqw; }
.ta-warm-neighbor .ta-sun { position: absolute; left: 50%; top: -34cqw; width: 96cqw; height: 96cqw; margin-left: -48cqw; border-radius: 50%; background: var(--t-ac); opacity: .22; }
.ta-warm-neighbor .ta-mono { position: relative; width: 22cqw; height: 22cqw; border-radius: 50%; background: var(--t-ink); display: grid; place-items: center; box-shadow: 0 0 0 1.6cqw var(--t-paper), 0 0 0 2.6cqw var(--t-ac); }
.ta-warm-neighbor .ta-mono span { font-family: var(--t-fh); font-weight: 700; font-size: 8cqw; color: var(--t-paper); }
.ta-warm-neighbor .ta-name { position: relative; font-size: 10.5cqw; font-weight: 700; line-height: 1.08; margin-top: 2cqw; }
.ta-warm-neighbor .ta-kick { position: relative; font-size: max(11px, 5cqw); }
.ta-warm-neighbor .ta-phone { position: relative; background: var(--t-ac); color: var(--t-on); font-weight: 700; font-size: 6.6cqw; border-radius: 999px; padding: 3cqw 6.5cqw; margin-top: 1cqw; }
.ta-warm-neighbor .ta-legal { position: relative; }

/* Homepage layouts (2026-10-29): Quiz first (default rules above), Call first, Attorney first, Big phone. Colors and fonts come from the theme. */
.hp-call, .hq-submit { background: var(--ink); color: var(--paper); }
.hp-bgo { color: var(--on-ac); }
.hp.hp-tex-grain { background-image: radial-gradient(rgba(60, 40, 20, .05) 1px, transparent 1.2px); background-size: 5px 5px; }
.hp-hero-c { display: grid; justify-items: center; text-align: center; gap: 0; padding: 88px 56px 72px; grid-template-columns: 1fr; }
.hp-hero-c h1 { max-width: 16ch; font-size: 68px; }
.hp-hero-c .hp-lead { max-width: 40ch; }
.hp-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.hp-ctas span { display: grid; place-items: center; min-height: 60px; padding: 0 28px; border-radius: 14px; font: 750 18px/1 var(--f-sans); }
.hp-cta1 { background: var(--ink); color: var(--paper); }
.hp-cta2 { border: 2px solid var(--ink); color: var(--ink); }
.hp-hero-c .hp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.hp-qsec { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.hp-qside p { margin: 12px 0 0; font-size: 18px; opacity: .8; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-chips span { padding: 12px 18px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent); font-weight: 700; }
.hp-hero-a { display: grid; grid-template-columns: 380px 1fr; gap: 56px; padding: 64px 56px; align-items: center; }
.hp-hero-a .hp-photo { aspect-ratio: 4 / 5; border-radius: 6px; box-shadow: 18px 18px 0 0 var(--ac); }
.hp-hero-a h1 { font-size: 60px; font-style: italic; }
.hp-sig { display: grid; gap: 4px; margin-top: 30px; padding-left: 16px; border-left: 3px solid var(--ac); }
.hp-sig b { font: 600 22px/1.1 var(--f-serif); }
.hp-sig span { opacity: .75; font-size: 15px; }
.hp-guide ol { list-style: none; margin: 0; padding: 0; counter-reset: g; display: grid; gap: 26px; max-width: 760px; }
.hp-guide li { counter-increment: g; display: grid; grid-template-columns: 84px 1fr; column-gap: 20px; }
.hp-guide li::before { content: counter(g, decimal-leading-zero); grid-row: span 2; font: 600 60px/1 var(--f-serif); color: var(--ac-t); }
.hp-guide b { font: 600 26px/1.15 var(--f-serif); }
.hp-guide span { opacity: .8; margin-top: 6px; }
.hp-hero-b { background: var(--ink); color: var(--paper); padding: 64px 56px 72px; }
.hp-hero-b h1 { font-size: 74px; text-transform: uppercase; letter-spacing: -.01em; line-height: .98; }
.hp-hero-b .hp-eyebrow { opacity: .85; }
.hp-bigphone { display: inline-block; margin-top: 26px; background: var(--ac); color: var(--on-ac); font: 700 54px/1 var(--f-serif); padding: 18px 26px; border-radius: 6px; letter-spacing: .01em; }
.hp-hero-b .hp-trust li::before { background: var(--paper); box-shadow: inset 0 0 0 6px var(--ac); }
.hp-hero-b .hp-quiz { color: var(--ink); }
.hp-l-bold .hp-tile { font-size: 20px; padding: 28px 24px; background: var(--paper); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 8px; }
.hp-m .hp-hero-c { padding: 36px 18px 32px; }
.hp-m .hp-hero-c h1 { font-size: 34px; }
.hp-m .hp-ctas { flex-direction: column; width: 100%; margin-top: 20px; }
.hp-m .hp-ctas span { min-height: 54px; font-size: 16px; }
.hp-m .hp-qsec, .hp-m .hp-hero-a { grid-template-columns: 1fr; gap: 20px; }
.hp-m .hp-hero-a { padding: 24px 18px 32px; }
.hp-m .hp-hero-a .hp-photo { width: 62%; box-shadow: 10px 10px 0 0 var(--ac); }
.hp-m .hp-hero-a h1 { font-size: 32px; }
.hp-m .hp-guide li { grid-template-columns: 52px 1fr; }
.hp-m .hp-guide li::before { font-size: 38px; }
.hp-m .hp-guide b { font-size: 21px; }
.hp-m .hp-hero-b { padding: 28px 18px 32px; }
.hp-m .hp-hero-b h1 { font-size: 40px; }
.hp-m .hp-bigphone { font-size: 32px; padding: 14px 16px; margin-top: 18px; }

/* Showcase: mission line, founder note, and how-to steps in the prompt drawer (2026-10-29) */
.sc-mission { font-size: 15px !important; color: var(--soft) !important; padding-top: 14px; border-top: 1px solid var(--line); }
.sc-about.bx { display: grid; grid-template-columns: 132px 1fr; gap: 22px; align-items: center; padding: 20px 22px; }
.sc-about img { width: 132px; height: 165px; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--line2); }
.sc-about-t { display: grid; gap: 10px; }
.sc-about-t p { margin: 0; color: var(--soft); font-size: 15.5px; max-width: 70ch; }
.sc-sign { font-size: 14px; color: var(--ink); }
@media (max-width: 560px) { .sc-about.bx { grid-template-columns: 84px 1fr; gap: 14px; align-items: start; } .sc-about img { width: 84px; height: 105px; } }
.pd-panel { grid-template-rows: auto auto 1fr; }
.pd-how { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.pd-how b { color: var(--ink); font-size: 14px; }
.pd-how ol { margin: 0; padding: 0; list-style: none; counter-reset: h; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pd-how li { counter-increment: h; min-width: 0; }
.pd-how li::before { content: counter(h); font-weight: 800; color: var(--accent); margin-right: 6px; }
.pd-panel { grid-template-columns: minmax(0, 1fr); }
.sc-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; text-decoration: none; color: var(--ink); padding: 20px 22px; margin-top: 24px; }
.sc-cta-t { flex: 1 1 320px; color: var(--soft); font-size: 15.5px; }
.sc-cta-t b { color: var(--ink); }
.sc-cta-go { font-weight: 700; color: var(--accent); white-space: nowrap; }

/* Fill from website (2026-10-30) */
.site-row { display: grid; gap: 6px; margin-bottom: 12px; }
.site-row label { font: 700 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.site-in { display: flex; gap: 8px; }
.site-in input { flex: 1; min-width: 0; font: 500 15px/1.2 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.site-in input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.site-go { flex: none; font: 700 14px/1 var(--f-body); color: var(--bg); background: var(--accent); border: 0; border-radius: 10px; padding: 0 14px; cursor: pointer; }
.site-go:disabled { opacity: .6; cursor: progress; }
.site-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-note { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--soft); }

/* Build a video (2026-10-30) */
.sc-add { position: relative; z-index: 2; flex: none; font: 700 12.5px/1 var(--f-body); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.sc-add[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.sc-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vb { display: grid; gap: 10px; }
.vb h2 { margin: 0; font-size: 19px; }
.vb-help { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.vb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vb-list:empty { display: none; }
.vb-list li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; }
.vb-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--f-body); background: var(--accent); color: var(--bg); }
.vb-t { flex: 1; min-width: 0; display: grid; }
.vb-t b { font-size: 13.5px; } .vb-t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-list button { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--soft); cursor: pointer; }
.vb-list button:disabled { opacity: .35; cursor: default; }
.vb-opts { display: grid; gap: 10px; }
.vb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vb-f { display: grid; gap: 6px; min-width: 0; }
.vb-f span { font: 700 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vb-f input, .vb-f select { width: 100%; min-width: 0; font: 500 14px/1.2 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }
.vb-copy, .vb-req { font: 700 15px/1 var(--f-body); color: var(--bg); background: var(--accent); border: 0; border-radius: 10px; padding: 13px 14px; cursor: pointer; }
.vb-copy:focus-visible, .vb-req:focus-visible, .vb-f input:focus-visible, .vb-f select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vb-see summary { cursor: pointer; font-size: 13.5px; color: var(--soft); }
.vb-pre { margin: 8px 0 0; max-height: 280px; overflow: auto; white-space: pre-wrap; font: 12px/1.5 var(--f-code); color: var(--soft); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.sc-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Build a video: the proven hook row (2026-10-30). */
.vb-hook { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.vb-hook:has(.vb-t) { padding: 10px; border: 1px solid var(--line2); border-radius: 10px; }
.vb-hook .vb-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vb-hook .vb-t b { font-size: 14px; overflow-wrap: anywhere; }
.vb-hook .vb-t small { color: var(--muted); font-size: 12.5px; }
.vb-hook button { background: none; border: 1px solid var(--line2); border-radius: 8px; color: var(--soft); width: 32px; height: 32px; cursor: pointer; }
.vb-hook a { font: 600 14px/1 var(--f-body); color: var(--accent); text-decoration: none; }

/* Proven hooks (2026-10-31): ranked chart above the wall, and the proof line on hook-led tiles. */
.hk-rank-wrap { margin-bottom: 16px; }
.hk-rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.hk-rows button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 170px) minmax(0, 1fr) 72px 84px; align-items: center; gap: 12px; padding: 9px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 15px/1.2 var(--f-body); text-align: left; cursor: pointer; }
.hk-rows button:hover, .hk-rows button:focus-visible { background: var(--surface2); }
.hk-n { font: 700 13px/1 var(--f-code); color: var(--muted); }
.hk-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-bar, .sc-hk b { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.hk-bar i, .sc-hk b i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.hk-v { font: 700 14px/1 var(--f-code); text-align: right; font-variant-numeric: tabular-nums; }
.hk-a { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.hk-foot { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.sc-hk { display: grid; gap: 5px; font: 600 11px/1.3 var(--f-code); letter-spacing: .04em; color: var(--muted); }
.sc-hk b { height: 4px; border-radius: 2px; }
@media (max-width: 860px) {
  .hk-rows { grid-template-columns: 1fr; }
  .hk-rows button { grid-template-columns: 20px minmax(0, 1fr) minmax(60px, 90px) 64px; gap: 10px; }
  .hk-a { display: none; }
}

/* proof pills (31 Oct): green = best result, blue = accounts, amber = law firms */
.pl { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 7px; font: 700 12px/1 var(--f-code); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-g { background: rgba(34, 197, 94, .14); color: #4ADE80; } .pl-b { background: rgba(59, 130, 246, .16); color: #7FB0FF; } .pl-a { background: rgba(245, 158, 11, .14); color: #FBBF24; } .pl-n { background: var(--surface2); color: var(--soft); }
.sc-hk { display: flex; flex-wrap: wrap; gap: 5px; }
.hk-rows button { grid-template-columns: 22px minmax(0, 170px) minmax(0, 1fr) 84px 100px; }
.hk-v, .hk-a { display: flex; justify-content: flex-end; }
.hk-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.hk-key > span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 700px) { .hk-rows button { grid-template-columns: 20px minmax(0, 1fr) minmax(40px, 80px) auto; } .hk-a { display: none; } }

/* motion filter row (31 Oct): sits under the category filters */
.mo-filters { margin-top: -6px; align-items: center; }
.mo-filters .mo-l { font: 700 11px/1 var(--f-code); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.mo-filters button { padding: 8px 12px; font-size: 13px; }
.mo-filters[hidden], .mo-filters button[hidden] { display: none; }



/* ===== Theme cards, brand pieces (2026-10-31). Append after the "Showcase: the firm in four looks" rules; it overrides them.
   Each card is a small brand piece in its theme: Classic Trust = printed card on linen, Modern Advocate = homepage hero,
   Bold Fighter = highway billboard at night, Warm Neighbor = vertical video ad on a phone. Everything is sized in cqw
   (the art's own width), so it reads the same 4 across, 2 across or in the phone carousel. --k shrinks long firm names,
   --mk shrinks three letter monograms (both set by themes.js). Text pairs pass 4.5:1; accents are fills only. ===== */
.th-grid { --lk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.th-grid .th-card { transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .2s ease-out; }
.th-grid .th-art { aspect-ratio: 4 / 5; isolation: isolate; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 14px 30px -18px rgba(0, 0, 0, .55); }
.th-grid .th-art .ta-in { display: block; padding: 0; gap: 0; box-shadow: none; background: none; overflow: hidden; text-align: left; }
.th-grid .th-art .ta-in i { font-style: normal; }
.th-grid .th-art .ta-in > * { position: absolute; }
.th-grid .th-art svg { display: block; }
.th-grid .th-art .ta-in [class^="lk-"] { overflow-wrap: anywhere; }
.th-grid .th-card:is(:hover, :focus-within) { transform: translateY(-3px); }
/* Phone: one card at a time in a swipe row, with the next card peeking in. The row scrolls, the page does not. */
@media (max-width: 640px) {
  .th-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 10px; scrollbar-width: thin; }
  .th-grid .th-card { scroll-snap-align: start; }
  .th-grid .th-card:is(:hover, :focus-within) { transform: none; }
}

/* ---- Classic Trust: letterpress card on navy linen ---- */
.ta-classic-trust { --foil: linear-gradient(115deg, color-mix(in srgb, var(--t-ac) 55%, #FFF6DA) 0%, var(--t-ac) 30%, color-mix(in srgb, var(--t-ac) 70%, #3B2A06) 52%, color-mix(in srgb, var(--t-ac) 60%, #FFF3CF) 74%, var(--t-ac) 100%); }
.th-grid .ta-classic-trust .ta-in { background: radial-gradient(90% 70% at 22% 8%, color-mix(in srgb, var(--t-ink) 72%, #8FA3C8), transparent 70%), radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, .55), transparent 60%), var(--t-ink); }
.ta-classic-trust .lk-linen { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), var(--lk-grain); opacity: .85; mix-blend-mode: soft-light; }
.ta-classic-trust .lk-back { left: 38cqw; top: 3cqw; width: 58cqw; height: 36cqw; rotate: 11deg; border-radius: 1cqw; display: grid; place-items: start end; padding: 3.4cqw 2.6cqw; background: linear-gradient(150deg, color-mix(in srgb, var(--t-ink) 82%, #FFFFFF), var(--t-ink) 70%); box-shadow: inset 0 0 0 .5cqw color-mix(in srgb, var(--t-ac) 55%, transparent), 0 3cqw 6cqw -1cqw rgba(0, 0, 0, .6); transition: rotate .5s cubic-bezier(.2, .7, .2, 1), translate .5s cubic-bezier(.2, .7, .2, 1); }
.ta-classic-trust .lk-back span { font: 700 calc(9cqw * var(--mk)) / 1 var(--t-fh); white-space: nowrap; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ta-classic-trust .lk-card { left: 10cqw; top: 12.5cqw; width: 72cqw; min-height: 98cqw; rotate: -2.5deg; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 9cqw 7cqw 8cqw; text-align: center; color: var(--t-ink); border-radius: .6cqw; background: linear-gradient(160deg, rgba(255, 255, 255, .7) 0%, transparent 45%), var(--lk-grain), var(--t-paper); box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .3), 0 5cqw 10cqw -2cqw rgba(0, 0, 0, .65); transition: rotate .5s cubic-bezier(.2, .7, .2, 1), translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.ta-classic-trust .lk-card::before, .ta-classic-trust .lk-card::after { content: ""; position: absolute; pointer-events: none; }
.ta-classic-trust .lk-card::before { inset: 2.6cqw; border: .45cqw solid var(--t-ac); }
.ta-classic-trust .lk-card::after { inset: 3.7cqw; border: .2cqw solid color-mix(in srgb, var(--t-ac) 65%, transparent); }
.ta-classic-trust .lk-ring { width: 19cqw; height: 19cqw; border-radius: 50%; padding: 1cqw; background: var(--foil); box-shadow: 0 .3cqw .6cqw rgba(20, 33, 61, .25); }
.ta-classic-trust .lk-ring span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--t-paper); box-shadow: inset 0 0 0 1cqw var(--t-paper), inset 0 0 0 1.35cqw var(--t-ink); font: 700 calc(7cqw * var(--mk)) / 1 var(--t-fh); color: var(--t-ink); }
.ta-classic-trust .lk-kick { font: 700 max(10px, 3.3cqw) / 1.2 var(--t-fb); letter-spacing: .2em; text-transform: uppercase; margin-top: 1.5cqw; }
.ta-classic-trust .lk-name { font: 700 max(12px, calc(10.5cqw * var(--k))) / 1.04 var(--t-fh); letter-spacing: -.005em; text-wrap: balance; }
.ta-classic-trust .lk-rule { width: 16cqw; height: .7cqw; background: var(--foil); position: relative; }
.ta-classic-trust .lk-phone { font: 700 6.4cqw / 1 var(--t-fh); font-variant-numeric: oldstyle-nums; letter-spacing: .01em; }
.ta-classic-trust .lk-legal { font: 400 max(10px, 3.1cqw) / 1.3 var(--t-fb); letter-spacing: .03em; color: color-mix(in srgb, var(--t-ink) 82%, var(--t-paper)); margin-top: 1cqw; }
.ta-classic-trust .lk-pen { left: 56cqw; top: 101cqw; width: 74cqw; height: 4.4cqw; rotate: 24deg; transform-origin: 0 50%; border-radius: 0 2.4cqw 2.4cqw 0; background: linear-gradient(180deg, #5A6272 0%, #1A1E28 28%, #07090E 62%, #232838 100%); box-shadow: 0 3cqw 3cqw -1cqw rgba(0, 0, 0, .55); transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.ta-classic-trust .lk-pen::before { content: ""; position: absolute; left: 22cqw; top: 0; width: 2.4cqw; height: 100%; background: var(--foil); }
.ta-classic-trust .lk-pen::after { content: ""; position: absolute; left: -7cqw; top: .5cqw; width: 7.4cqw; height: 3.4cqw; background: var(--foil); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.th-card:is(:hover, :focus-within) .ta-classic-trust .lk-card { rotate: -.5deg; translate: 0 -1.4cqw; box-shadow: 0 .6cqw 1cqw rgba(0, 0, 0, .3), 0 8cqw 14cqw -3cqw rgba(0, 0, 0, .7); }
.th-card:is(:hover, :focus-within) .ta-classic-trust .lk-back { rotate: 15deg; translate: 2cqw -1cqw; }
.th-card:is(:hover, :focus-within) .ta-classic-trust .lk-pen { translate: 2cqw 1.5cqw; }

/* ---- Modern Advocate: homepage hero in a browser window ---- */
.th-grid .ta-modern-advocate .ta-in { background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--t-ac) 30%, transparent), transparent 70%), radial-gradient(circle, rgba(31, 35, 40, .14) .5px, transparent 1px) 0 0 / 5cqw 5cqw, var(--t-paper); }
.ta-modern-advocate .lk-glow { left: -20cqw; bottom: -30cqw; width: 80cqw; height: 80cqw; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t-ac) 22%, transparent), transparent); }
.ta-modern-advocate .lk-win { left: 7cqw; top: 9cqw; right: -16cqw; bottom: -8cqw; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 3cqw; color: var(--t-ink); box-shadow: 0 0 0 .3cqw rgba(31, 35, 40, .07), 0 1cqw 2cqw rgba(31, 35, 40, .08), 0 7cqw 14cqw -4cqw rgba(31, 35, 40, .38); overflow: hidden; transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.ta-modern-advocate .lk-bar { display: flex; align-items: center; gap: 1.3cqw; height: 6.6cqw; padding: 0 3.4cqw; background: #F6F7F9; border-bottom: .25cqw solid #E6E8EC; flex: none; }
.ta-modern-advocate .lk-bar i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #D3D7DD; }
.ta-modern-advocate .lk-url { margin-left: 3cqw; width: 42cqw; height: 3cqw; border-radius: 3cqw; background: #E8EAEE; }
.ta-modern-advocate .lk-nav { display: flex; align-items: center; gap: 2.4cqw; padding: 3.4cqw 21cqw 3.4cqw 5.5cqw; border-bottom: .25cqw solid #EEF0F2; flex: none; }
.ta-modern-advocate .lk-mono { flex: none; min-width: 9cqw; height: 9cqw; padding: 0 1.2cqw; white-space: nowrap; border-radius: 2.2cqw; display: grid; place-items: center; background: var(--t-ink); color: #FFFFFF; font: 800 max(9px, calc(4cqw * var(--mk))) / 1 var(--t-fh); letter-spacing: -.03em; box-shadow: inset 0 -.8cqw 0 var(--t-ac); }
.ta-modern-advocate .lk-brand { flex: 1; min-width: 0; font: 800 max(10px, calc(5cqw * var(--k))) / 1.1 var(--t-fh); letter-spacing: -.02em; }
.ta-modern-advocate .lk-burger { flex: none; display: grid; gap: .9cqw; }
.ta-modern-advocate .lk-burger i { width: 4.4cqw; height: .55cqw; border-radius: 1cqw; background: var(--t-ink); }
.ta-modern-advocate .lk-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 2.8cqw; padding: 5.5cqw 21cqw 0 5.5cqw; flex: none; }
.ta-modern-advocate .lk-kick { display: inline-flex; align-items: center; gap: 1.6cqw; font: 700 max(10px, 3.2cqw) / 1 var(--t-fb); letter-spacing: .1em; text-transform: uppercase; color: #3D444D; }
.ta-modern-advocate .lk-kick::before { content: ""; width: 4cqw; height: .6cqw; border-radius: 1cqw; background: var(--t-ac); }
.ta-modern-advocate .lk-h1 { font: 800 7.4cqw / 1.06 var(--t-fh); letter-spacing: -.035em; text-wrap: balance; }
.ta-modern-advocate .lk-h1 em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--t-ac) 30%, transparent) 62%); }
.ta-modern-advocate .lk-cta { display: inline-flex; align-items: center; gap: 1.6cqw; margin-top: 1cqw; padding: 2.5cqw 4.2cqw 2.5cqw 3.4cqw; border-radius: 999px; background: var(--t-ac); color: var(--t-on); font: 700 max(10px, 4.2cqw) / 1 var(--t-fb); white-space: nowrap; box-shadow: 0 2cqw 4cqw -1.5cqw color-mix(in srgb, var(--t-ac) 70%, transparent); }
.ta-modern-advocate .lk-cta svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.ta-modern-advocate .lk-legal { font: 400 max(10px, 3cqw) / 1.2 var(--t-fb); color: #57606A; }
.ta-modern-advocate .lk-media { position: relative; flex: 1 1 auto; min-height: 20cqw; margin: 4.5cqw 21cqw 0 5.5cqw; border-radius: 2.4cqw 2.4cqw 0 0; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--t-ac) 55%, #FFFFFF) 0%, color-mix(in srgb, var(--t-ac) 80%, #FFFFFF) 50%, var(--t-ac) 100%); }
.ta-modern-advocate .lk-media > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ta-modern-advocate .m-sun { fill: #FFFFFF; opacity: .55; }
.ta-modern-advocate .m-far { fill: color-mix(in srgb, var(--t-ac) 55%, var(--t-ink)); }
.ta-modern-advocate .m-road { fill: var(--t-ink); }
.ta-modern-advocate .m-line { stroke: #FFFFFF; stroke-width: 1.2; fill: none; }
.ta-modern-advocate .lk-chat { position: absolute; right: 3cqw; bottom: 11cqw; width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; box-shadow: 0 1cqw 2.5cqw rgba(31, 35, 40, .3); }
.ta-modern-advocate .lk-chat svg { width: 4cqw; height: 4cqw; fill: var(--t-ink); }
.ta-modern-advocate .lk-chip { left: 3cqw; bottom: 30cqw; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 2.2cqw 3.6cqw 2.2cqw 2.6cqw; border-radius: 999px; background: var(--t-ink); color: #FFFFFF; font: 600 max(10px, 3.4cqw) / 1.2 var(--t-fb); max-width: 78cqw; box-shadow: 0 3cqw 6cqw -2cqw rgba(31, 35, 40, .55); transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.ta-modern-advocate .lk-chip svg { width: 1.2em; height: 1.2em; flex: none; fill: color-mix(in srgb, var(--t-ac) 45%, #FFFFFF); }
.th-card:is(:hover, :focus-within) .ta-modern-advocate .lk-win { translate: -2cqw -1.5cqw; }
.th-card:is(:hover, :focus-within) .ta-modern-advocate .lk-chip { translate: 1.5cqw -2cqw; }

/* ---- Bold Fighter: billboard at night (the theme's red is allowed in this card only) ---- */
.th-grid .ta-bold-fighter .ta-in { background: linear-gradient(180deg, #050505 0%, #0E0D0C 40%, #1C1513 68%, #2A1A17 76%, #0A0909 76.2%, #060606 100%); }
.ta-bold-fighter .lk-haze { left: -10cqw; right: -10cqw; top: 70cqw; height: 30cqw; background: radial-gradient(50% 50% at 50% 60%, color-mix(in srgb, var(--t-ac) 30%, transparent), transparent); }
.ta-bold-fighter .lk-city { left: 0; top: 81cqw; width: 100%; height: 14cqw; }
.ta-bold-fighter .lk-city path { fill: #151312; }
.ta-bold-fighter .c-win rect { fill: #E9C98A; opacity: .55; }
.ta-bold-fighter .lk-road { left: 0; top: 95cqw; width: 100%; height: 31cqw; }
.ta-bold-fighter .r-way { fill: #141414; }
.ta-bold-fighter .r-edge { stroke: #3A3A3A; stroke-width: .35; fill: none; }
.ta-bold-fighter .r-mid { stroke: #6B6B6B; stroke-width: .35; stroke-dasharray: 1.6 2.2; fill: none; }
.ta-bold-fighter .r-hl, .ta-bold-fighter .r-tl { fill: none; stroke-width: .9; stroke-linecap: round; }
.ta-bold-fighter .r-hl { stroke: #FFF1CC; filter: drop-shadow(0 0 1.2px #FFE3A0); }
.ta-bold-fighter .r-tl { stroke: var(--t-ac); filter: drop-shadow(0 0 1.4px var(--t-ac)); }
.ta-bold-fighter .b { stroke-width: .5; opacity: .75; }
.ta-bold-fighter .r-run { stroke-width: 1.6; stroke-dasharray: 3 30; opacity: 0; transition: opacity .3s; }
.ta-bold-fighter .lk-board { left: 6cqw; right: 6cqw; top: 9cqw; z-index: 2; }
.ta-bold-fighter .lk-face { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2.6cqw; padding: 4.6cqw 5cqw 0; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, #2B2B2B, var(--t-ink) 60%); box-shadow: 0 0 0 1cqw #262626, 0 0 0 1.4cqw #0B0B0B, 0 4cqw 8cqw rgba(0, 0, 0, .6); }
.ta-bold-fighter .lk-slash { position: absolute; z-index: 2; right: 0; top: 0; width: 22cqw; height: 15cqw; background: var(--t-ac); clip-path: polygon(48% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.ta-bold-fighter .lk-top { display: flex; align-items: center; gap: 2cqw; padding-right: 13cqw; }
.ta-bold-fighter .lk-mono { flex: none; white-space: nowrap; min-width: 7.4cqw; height: 7.4cqw; padding: 0 1cqw; display: grid; place-items: center; background: #FFFFFF; color: var(--t-ink); font: 700 max(10px, calc(4.6cqw * var(--mk))) / 1 var(--t-fh); }
.ta-bold-fighter .lk-kick { font: 600 max(10px, 4.4cqw) / 1 var(--t-fh); letter-spacing: .06em; text-transform: uppercase; color: var(--t-paper); }
.ta-bold-fighter .lk-name { font: 700 max(12px, calc(14.5cqw * var(--k))) / .92 var(--t-fh); text-transform: uppercase; letter-spacing: -.005em; color: #FFFFFF; text-wrap: balance; }
.ta-bold-fighter .lk-phone { display: flex; align-items: center; justify-content: center; margin: 1.4cqw -5cqw 0; padding: 2.6cqw 3cqw 2.4cqw; background: var(--t-ac); color: var(--t-on); font: 700 10.4cqw / 1 var(--t-fh); letter-spacing: .01em; white-space: nowrap; box-shadow: inset 0 .6cqw 0 rgba(255, 255, 255, .14); }
.ta-bold-fighter .lk-legal { margin: 0 -5cqw; padding: 1.8cqw 5cqw 2cqw; background: var(--t-ink); color: #D9D6CF; font: 400 max(10px, 3cqw) / 1.2 var(--t-fb); letter-spacing: .04em; }
.ta-bold-fighter .lk-walk { position: absolute; left: -2cqw; right: -2cqw; top: 100%; margin-top: 1.4cqw; height: 3.4cqw; background: repeating-linear-gradient(90deg, #3A3A3A 0 .4cqw, transparent .4cqw 3cqw) top / 100% 2.2cqw no-repeat, linear-gradient(#3A3A3A, #3A3A3A) bottom / 100% 1.2cqw no-repeat; }
.ta-bold-fighter .lk-pole { position: absolute; left: 50%; top: 100%; width: 7cqw; height: 80cqw; margin-left: -3.5cqw; background: linear-gradient(90deg, #121212, #3B3B3B 40%, #1A1A1A 70%, #0C0C0C); }
.ta-bold-fighter .lk-lamp { position: absolute; z-index: 3; top: -4.6cqw; width: 6cqw; height: 2.4cqw; border-radius: 1cqw 1cqw .4cqw .4cqw; background: #2E2E2E; box-shadow: inset 0 -.5cqw 0 #FFF4D6; }
.ta-bold-fighter .lk-lamp::before { content: ""; position: absolute; left: 50%; top: -3cqw; width: .7cqw; height: 3cqw; background: #2A2A2A; }
.ta-bold-fighter .lk-lamp::after { content: ""; position: absolute; left: 50%; top: 2cqw; width: 30cqw; height: 34cqw; margin-left: -15cqw; background: linear-gradient(180deg, rgba(255, 240, 205, .30), rgba(255, 240, 205, 0) 85%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); mix-blend-mode: screen; pointer-events: none; transition: opacity .4s; opacity: .8; }
.ta-bold-fighter .l1 { left: 14%; } .ta-bold-fighter .l2 { left: 50%; margin-left: -3cqw; } .ta-bold-fighter .l3 { right: 14%; }
.th-card:is(:hover, :focus-within) .ta-bold-fighter .lk-lamp::after { opacity: 1; }
.th-card:is(:hover, :focus-within) .ta-bold-fighter .r-run { opacity: 1; animation: lk-drive 1.6s linear infinite; }
@keyframes lk-drive { from { stroke-dashoffset: 33; } to { stroke-dashoffset: 0; } }

/* ---- Warm Neighbor: vertical video ad on a phone ---- */
.th-grid .ta-warm-neighbor .ta-in { background: linear-gradient(170deg, rgba(255, 255, 255, .6) 0%, transparent 45%), var(--lk-grain), var(--t-paper); }
.ta-warm-neighbor .lk-sun { right: -16cqw; top: -14cqw; width: 66cqw; height: 66cqw; border-radius: 50%; background: radial-gradient(closest-side, var(--t-ac), color-mix(in srgb, var(--t-ac) 55%, var(--t-paper)) 70%, transparent 100%); opacity: .55; }
.ta-warm-neighbor .lk-hill { left: -20cqw; right: -20cqw; bottom: -40cqw; height: 70cqw; border-radius: 50%; background: color-mix(in srgb, var(--t-ink) 14%, var(--t-paper)); }
.ta-warm-neighbor .lk-dev { left: 23cqw; top: 6cqw; width: 63cqw; height: 115cqw; padding: 1.7cqw; border-radius: 8.5cqw; rotate: 4deg; background: linear-gradient(135deg, color-mix(in srgb, var(--t-ink) 70%, #FFFFFF 10%), color-mix(in srgb, var(--t-ink) 70%, #000000)); box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .16), 0 1.4cqw 2cqw rgba(31, 58, 44, .22), 0 8cqw 12cqw -4cqw rgba(31, 58, 44, .55); transition: rotate .5s cubic-bezier(.2, .7, .2, 1), translate .5s cubic-bezier(.2, .7, .2, 1); }
.ta-warm-neighbor .lk-scr { position: relative; width: 100%; height: 100%; border-radius: 7cqw; overflow: hidden; display: flex; flex-direction: column; background: var(--t-ink); }
.ta-warm-neighbor .lk-scene { position: relative; flex: 1 1 auto; min-height: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--t-ac) 50%, var(--t-paper)) 0%, var(--t-paper) 80%); }
.ta-warm-neighbor .lk-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ta-warm-neighbor .s-sun { fill: var(--t-ac); }
.ta-warm-neighbor .s-far { fill: color-mix(in srgb, var(--t-ink) 40%, var(--t-paper)); }
.ta-warm-neighbor .s-near, .ta-warm-neighbor .s-door { fill: var(--t-ink); }
.ta-warm-neighbor .s-house { fill: var(--t-paper); }
.ta-warm-neighbor .s-roof { fill: color-mix(in srgb, var(--t-ac) 55%, var(--t-ink)); }
.ta-warm-neighbor .s-lit { fill: var(--t-ac); }
.ta-warm-neighbor .s-tree { fill: color-mix(in srgb, var(--t-ink) 75%, var(--t-paper)); }
.ta-warm-neighbor .s-trunk { fill: var(--t-ink); }
.ta-warm-neighbor .lk-prog { position: absolute; left: 4cqw; right: 4cqw; top: 6cqw; display: flex; gap: 1cqw; }
.ta-warm-neighbor .lk-prog i { flex: 1; height: .7cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--t-ink) 25%, transparent); }
.ta-warm-neighbor .lk-prog i:first-child { background: var(--t-ink); }
.ta-warm-neighbor .lk-cap { position: absolute; left: 3cqw; right: 3cqw; bottom: 3.5cqw; text-align: center; font: 600 max(10px, 3.6cqw) / 1.5 var(--t-fb); }
.ta-warm-neighbor .lk-cap span { padding: .5cqw 1.6cqw; border-radius: 1.2cqw; background: var(--t-ink); color: var(--t-paper); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-warm-neighbor .lk-low { flex: none; display: flex; flex-direction: column; gap: 2.4cqw; padding: 3.6cqw 3.4cqw 4.6cqw; color: var(--t-paper); }
.ta-warm-neighbor .lk-id { display: flex; align-items: center; gap: 2.2cqw; }
.ta-warm-neighbor .lk-mono { flex: none; width: calc(9.6cqw / var(--mk)); height: calc(9.6cqw / var(--mk)); white-space: nowrap; letter-spacing: -.03em; border-radius: 50%; display: grid; place-items: center; background: var(--t-ac); color: var(--t-ink); font: 700 max(9px, calc(3.8cqw * var(--mk))) / 1 var(--t-fh); box-shadow: 0 0 0 .5cqw var(--t-ink), 0 0 0 .9cqw color-mix(in srgb, var(--t-paper) 60%, transparent); }
.ta-warm-neighbor .lk-who { display: grid; gap: .6cqw; min-width: 0; }
.ta-warm-neighbor .lk-name { font: 700 max(10px, calc(5cqw * var(--k))) / 1.12 var(--t-fh); color: var(--t-paper); }
.ta-warm-neighbor .lk-kick { font: 400 max(10px, 3cqw) / 1.2 var(--t-fb); color: color-mix(in srgb, var(--t-paper) 85%, var(--t-ink)); }
.ta-warm-neighbor .lk-call { display: flex; align-items: center; justify-content: center; gap: 1.4cqw; padding: 2.4cqw 2cqw; border-radius: 999px; background: var(--t-ac); color: var(--t-ink); font: 700 max(10px, 4.1cqw) / 1 var(--t-fb); white-space: nowrap; }
.ta-warm-neighbor .lk-call svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.ta-warm-neighbor .lk-legal { text-align: center; font: 400 max(10px, 2.8cqw) / 1.2 var(--t-fb); color: color-mix(in srgb, var(--t-paper) 85%, var(--t-ink)); }
.ta-warm-neighbor .lk-bubble { left: 3cqw; top: 17cqw; width: 38cqw; padding: 2.6cqw 3.2cqw; border-radius: 4cqw 4cqw 4cqw 1cqw; background: #FFFFFF; color: var(--t-ink); font: 600 max(10px, 3.5cqw) / 1.3 var(--t-fb); box-shadow: 0 1cqw 2cqw rgba(31, 58, 44, .15), 0 5cqw 9cqw -3cqw rgba(31, 58, 44, .4); transform-origin: 0 100%; transition: scale .45s cubic-bezier(.3, 1.5, .5, 1), translate .45s cubic-bezier(.2, .7, .2, 1); }
.th-card:is(:hover, :focus-within) .ta-warm-neighbor .lk-dev { rotate: 1deg; translate: 0 -1.5cqw; }
.th-card:is(:hover, :focus-within) .ta-warm-neighbor .lk-bubble { scale: 1.06; translate: 0 -1cqw; }

@media (prefers-reduced-motion: reduce) {
  .th-grid .th-card, .th-grid .th-art .ta-in * { transition: none !important; animation: none !important; }
  .th-grid .th-card:is(:hover, :focus-within) { transform: none; }
}

.sc-gift { margin: 4px 0 0; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 12px; background: var(--accent-soft); color: var(--soft); font-size: 15.5px; line-height: 1.5; }
.sc-gift b { color: var(--ink); }

/* ---------- Real QOLA work: real films and reels (31 Oct) ---------- */
.rw.bx { background: var(--band); color: var(--band-ink); border-color: transparent; padding: clamp(20px, 3vw, 36px); display: grid; gap: 22px; overflow: hidden; isolation: isolate; }
.rw.bx::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(var(--gl-a), .28), rgba(var(--gl-a), 0)); z-index: -1; pointer-events: none; }
.rw .rw-eye { color: var(--band-btn); }
.rw-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px 32px; align-items: end; }
.rw-head h2 { margin: 6px 0 0; font: 800 clamp(24px, 3.2vw, 38px)/1.08 var(--f-display); letter-spacing: -.02em; color: var(--band-ink); text-wrap: balance; }
.rw-head p { margin: 0; color: var(--band-muted); font-size: 15px; line-height: 1.5; }
.rw-top { display: grid; grid-template-columns: 1fr minmax(0, .56fr); gap: 16px 20px; align-items: start; }
.rw-film { grid-column: 1; grid-row: 1; } .rw-e1 { grid-column: 1; grid-row: 2; }
.rw-top > .rw-reel { grid-column: 2; grid-row: 1 / span 2; }
.rw-side { display: grid; gap: 16px; align-content: start; }
.rw-card { margin: 0; display: grid; gap: 10px; min-width: 0; align-content: start; }
.rw-stage { position: relative; border-radius: 14px; overflow: hidden; background: #020617; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(0, 0, 0, .7); }
.rw-stage.r169 { aspect-ratio: 16 / 9; } .rw-stage.r916 { aspect-ratio: 9 / 16; }
.rw-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #020617; }
.rw-film .rw-stage { box-shadow: 0 0 0 1px rgba(var(--gl-b), .22), 0 0 40px -8px rgba(var(--gl-a), .45), 0 24px 60px -20px rgba(0, 0, 0, .8); }
.rw-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer; background: var(--band-btn); color: var(--band-btn-ink); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(var(--gl-b), .18), 0 12px 30px rgba(0, 0, 0, .45); transition: transform .2s ease, box-shadow .2s ease; }
.rw-play span { width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent currentColor; }
.rw-play.sm { width: 50px; height: 50px; box-shadow: 0 0 0 7px rgba(var(--gl-b), .16), 0 8px 20px rgba(0, 0, 0, .4); }
.rw-play.sm span { margin-left: 4px; border-width: 9px 0 9px 14px; }
.rw-stage:hover .rw-play, .rw-play:focus-visible { transform: scale(1.07); }
.rw-play:focus-visible { outline: 3px solid var(--band-ink); outline-offset: 3px; }
.rw-tag { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(2, 6, 23, .72); color: #fff; font: 700 11px/1.2 var(--f-body); letter-spacing: .04em; backdrop-filter: blur(6px); pointer-events: none; }
.rw-stage.on .rw-play, .rw-stage.on .rw-tag { opacity: 0; pointer-events: none; }
.rw-card figcaption { display: grid; gap: 3px; }
.rw-card figcaption b { font: 700 15px/1.3 var(--f-display); color: var(--band-ink); }
.rw-card figcaption span { font-size: 13.5px; line-height: 1.45; color: var(--band-muted); }
.rw-film figcaption b { font-size: 18px; }
.rw-reels-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rw-reels-head b { font: 700 16px/1.3 var(--f-display); }
.rw-reels-head span { color: var(--band-muted); font-size: 13.5px; }
.rw-reels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.rw-reel figcaption b { font-size: 13.5px; }
.rw-note { margin: 0; color: var(--band-muted); font-size: 12.5px; }
@media (max-width: 900px) {
  .rw-head, .rw-top { grid-template-columns: 1fr; }
  .rw-film, .rw-e1, .rw-top > .rw-reel { grid-column: 1; grid-row: auto; }
  .rw-top > .rw-reel { max-width: 300px; }
  .rw-reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; }
  .rw-reel { flex: 0 0 min(42vw, 190px); scroll-snap-align: start; }
}
@media (max-width: 560px) { .rw-play { width: 62px; height: 62px; } }
@media (prefers-reduced-motion: reduce) { .rw-play { transition: none; } }
/* tile captions: longer concept names (Magnifier, Tear-off calendar) never run into the New badge on a phone */
.sc-k { overflow-wrap: break-word; }
.sc-meta { flex-wrap: wrap; row-gap: 6px; } .sc-meta .sc-k { flex: 1 1 10em; }
@media (max-width: 560px) { .sc-k { letter-spacing: .03em; } .sc-meta { gap: 6px; } }
/* ---------- /Real QOLA work ---------- */

/* dark / light switch (31 Oct) */
.mode-wrap { display: flex; align-items: center; margin-left: auto; }
.mode-wrap + .top-acts { margin-left: 0; }
.mode-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface); color: var(--soft); font: 600 13px/1 var(--f-body); cursor: pointer; }
.mode-btn svg { width: 16px; height: 16px; }
.mode-btn:hover { color: var(--ink); border-color: var(--accent); }
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .mode-btn:not(.qs) span { display: none; } .mode-btn { padding: 0 10px; } }
:root[data-qmode="light"] .pl-g { color: #15803D; } :root[data-qmode="light"] .pl-b { color: #1D4ED8; } :root[data-qmode="light"] .pl-a { color: #B45309; }
/* /dark / light switch */

/* ---------- Limited time + leads band (31 Oct) ---------- */
.lt-strip.bx { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--accent); border-radius: 14px; }
.lt-strip p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--soft); }
.lt-strip b { color: var(--ink); }
.lt-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: lt-pulse 2.2s ease-out infinite; }
@keyframes lt-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.lt-date { font-weight: 700; color: var(--ink); white-space: nowrap; }
.lt-date[data-end=""] { border: 1px dashed var(--muted); border-radius: 4px; padding: 0 4px; }

.ql.bx { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center; padding: clamp(20px, 3vw, 36px); background: var(--surface); }
.ql h2 { margin: 6px 0 8px; font: 800 clamp(24px, 3.2vw, 38px)/1.08 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ql-sub { margin: 0 0 18px; color: var(--muted); font-size: 15.5px; line-height: 1.5; max-width: 52ch; }
.ql-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ql-steps button { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; text-align: left; font: inherit; font-size: 14.5px; line-height: 1.45; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.ql-steps b { color: var(--soft); }
.ql-n { font: 700 13px/1 var(--f-code); width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); transition: background .25s ease, color .25s ease; }
.ql-steps li.on button { background: var(--accent-soft); border-color: var(--line2); color: var(--soft); }
.ql-steps li.on b { color: var(--ink); }
.ql-steps li.on .ql-n { background: var(--accent); color: var(--surface); }
.ql-steps button:hover b { color: var(--ink); }

.ql-phone { justify-self: center; width: min(100%, 268px); aspect-ratio: 9 / 18.5; border-radius: 36px; padding: 10px; background: #0B1222; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 6px #1E293B, 0 30px 60px -24px rgba(2, 6, 23, .55); }
.ql-screen { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: #020617; color: #F1F5F9; font-family: var(--f-body); }
.ql-s { position: absolute; inset: 0; padding: 34px 14px 16px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.ql-screen[data-s="0"] .ql-s0, .ql-screen[data-s="1"] .ql-s1, .ql-screen[data-s="2"] .ql-s2, .ql-screen[data-s="3"] .ql-s3 { opacity: 1; transform: none; }
.ql-pill { align-self: flex-start; font: 700 10px/1 var(--f-code); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: rgba(45, 212, 191, .16); color: #5EEAD4; }
.ql-reel { flex: 1; border-radius: 16px; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; background: radial-gradient(120% 70% at 80% 0%, rgba(45, 212, 191, .35), transparent 60%), linear-gradient(180deg, #0F2A3A, #020617); }
.ql-reel b { font: 800 21px/1.12 var(--f-display); letter-spacing: -.01em; }
.ql-reel i { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .18); width: 86%; }
.ql-reel i + i { width: 64%; } .ql-reel i + i + i { width: 74%; }
.ql-reel small { margin-top: 6px; font-size: 9.5px; color: #94A3B8; letter-spacing: .04em; }
.ql-screen[data-s="0"] .ql-reel b { animation: ql-type 1.2s steps(18) both; }
@keyframes ql-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ql-post-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ql-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--f-display); background: linear-gradient(135deg, #2DD4BF, #3B82F6); color: #020617; flex: 0 0 auto; }
.ql-av.sm { width: 22px; height: 22px; font-size: 10px; background: #334155; color: #E2E8F0; }
.ql-thumb { flex: 1; border-radius: 12px; padding: 14px; display: flex; align-items: flex-end; background: radial-gradient(120% 70% at 80% 0%, rgba(45, 212, 191, .3), transparent 60%), linear-gradient(180deg, #0F2A3A, #0B1222); }
.ql-thumb b { font: 800 16px/1.15 var(--f-display); }
.ql-icons { display: flex; gap: 12px; }
.ql-heart, .ql-bub { width: 18px; height: 18px; border: 2px solid #E2E8F0; border-radius: 50% 50% 50% 4px; }
.ql-heart { border-radius: 50%; }
.ql-screen[data-s="1"] .ql-heart { animation: ql-like .5s .9s ease both; }
@keyframes ql-like { 50% { transform: scale(1.35); } to { background: #2DD4BF; border-color: #2DD4BF; } }
.ql-cap { margin: 0; font-size: 12px; line-height: 1.4; color: #CBD5E1; }
.ql-cap em { font-style: normal; font-weight: 800; color: #5EEAD4; }
.ql-cmt { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.ql-cmt b { margin-right: 4px; }
.ql-dm-h { margin-top: 6px; font: 700 10px/1 var(--f-code); letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.ql-dm { max-width: 88%; font-size: 12.5px; line-height: 1.4; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: #1E293B; }
.ql-dm.card { display: grid; gap: 6px; background: linear-gradient(135deg, rgba(45, 212, 191, .22), rgba(59, 130, 246, .18)); border: 1px solid rgba(94, 234, 212, .3); }
.ql-dm.card span { color: #5EEAD4; font-weight: 700; font-size: 12px; }
.ql-screen[data-s="2"] .ql-cmt { animation: ql-in .4s .1s both; }
.ql-screen[data-s="2"] .ql-dm.in { animation: ql-in .4s .8s both; }
.ql-screen[data-s="2"] .ql-dm.card { animation: ql-in .4s 1.4s both; }
@keyframes ql-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ql-hub { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; border-radius: 16px; background: #F8FAFC; color: #0F172A; }
.ql-hub .ql-pill { background: #CCFBF1; color: #0F766E; }
.ql-hub b { font: 800 18px/1.15 var(--f-display); }
.ql-line { height: 6px; border-radius: 4px; background: #E2E8F0; width: 90%; } .ql-line.s { width: 66%; }
.ql-btn { margin-top: auto; align-self: stretch; text-align: center; padding: 11px; border-radius: 12px; background: #0F766E; color: #fff; font-weight: 700; font-size: 13px; }
.ql-screen[data-s="3"] .ql-btn { animation: ql-tap .5s .6s ease both; }
@keyframes ql-tap { 50% { transform: scale(.94); } }
.ql-note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #1E293B; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); font-size: 12px; }
.ql-note span:last-child { display: grid; gap: 2px; color: #94A3B8; }
.ql-note b { color: #F1F5F9; font-size: 12.5px; }
.ql-chk { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: #2DD4BF; position: relative; }
.ql-chk::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid #020617; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ql-screen[data-s="3"] .ql-note { animation: ql-drop .5s 1.3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ql-drop { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .ql.bx { grid-template-columns: 1fr; }
  .ql-phone { width: min(70vw, 240px); grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-dot, .ql-screen * { animation: none !important; }
  .ql-s { transition: none; }
}
/* ---------- /Limited time + leads band ---------- */

/* ---------- Setup wizard, tour, per-prompt edits (31 Oct) ---------- */
.wz-open { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; max-width: 560px; text-align: left; padding: 14px 18px; border-radius: 14px; border: 0; cursor: pointer; background: var(--accent); color: var(--surface); font: inherit; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.wz-open:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.wz-open b { display: block; font: 800 18px/1.2 var(--f-display); }
.wz-open small { display: block; font-size: 14px; opacity: .85; margin-top: 2px; }
.wz-open-ic { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--surface) 22%, transparent); position: relative; }
.wz-open-ic::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: conic-gradient(from 0deg, #fff 0 25%, transparent 0 50%, #fff 0 75%, transparent 0); opacity: .9; animation: wz-spin 6s linear infinite; }
.wz-open-go { font: 800 22px/1 var(--f-display); }
@keyframes wz-spin { to { transform: rotate(360deg); } }
.wz-lock, .wz-lock body { overflow: hidden; }
.wz { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.wz[hidden] { display: none; }
.wz-scrim { position: absolute; inset: 0; background: rgba(2, 6, 23, .62); backdrop-filter: blur(6px); animation: wz-fade .25s ease both; }
.wz-card { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line2); border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(2, 6, 23, .7); animation: wz-pop .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wz-fade { from { opacity: 0; } }
@keyframes wz-pop { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.wz-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.wz-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 16px; flex-wrap: wrap; flex: 1; }
.wz-dots li { display: flex; align-items: center; gap: 7px; font: 600 13px/1 var(--f-body); color: var(--muted); }
.wz-dots span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--f-code); border: 1px solid var(--line2); }
.wz-dots li.on { color: var(--ink); } .wz-dots li.on span { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.wz-dots li.done span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.wz-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.wz-body { padding: clamp(20px, 4vw, 34px); }
.wz-pane { display: grid; gap: 12px; animation: wz-pop .3s ease both; }
.wz-pane h2 { font: 800 clamp(26px, 3.6vw, 36px)/1.08 var(--f-display); letter-spacing: -.02em; }
.wz-sub { margin: 0 0 6px; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 56ch; }
.wz-site { display: flex; gap: 10px; flex-wrap: wrap; }
.wz-site input { flex: 1 1 240px; min-width: 0; font: 600 18px/1.2 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px; }
.wz-site input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wz-btn { font: 700 16px/1 var(--f-body); padding: 14px 20px; border-radius: 12px; border: 0; background: var(--accent); color: var(--surface); cursor: pointer; white-space: nowrap; }
.wz-btn:disabled { opacity: .7; cursor: progress; }
.wz-skip { justify-self: start; }
.wz-scan { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wz-scan li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; opacity: .45; transition: opacity .3s, border-color .3s, color .3s; }
.wz-scan li span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--accent); animation: wz-spin .8s linear infinite; }
.wz-scan li.go { opacity: 1; border-color: var(--accent); color: var(--ink); }
.wz-scan li.go span { animation: none; border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.wz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.wz-grid .wide { grid-column: 1 / -1; }
.wz-grid input.got { border-color: var(--accent); background: var(--accent-soft); }
.wz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.wz-nav.center { justify-content: center; }
.wz-look { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.wz-prev { aspect-ratio: 9 / 13; border-radius: 18px; background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 22px; text-align: center; box-shadow: 0 24px 50px -24px rgba(2, 6, 23, .6); position: relative; overflow: hidden; transition: background .3s; }
.wz-prev::before { content: ""; position: absolute; inset: auto -30% -40% -30%; height: 70%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ac) 45%, transparent), transparent); }
.wz-pv-n { position: relative; font: 700 clamp(24px, 3vw, 32px)/1.08 var(--fh); letter-spacing: -.01em; }
.wz-pv-q { position: relative; background: var(--paper); color: var(--ink); padding: 8px 14px; font: 700 17px/1.2 var(--fb); border-radius: 6px; }
.wz-pv-b { position: relative; background: var(--ac); color: var(--on); padding: 12px 18px; border-radius: 12px; font: 800 18px/1 var(--fb); }
.wz-pv-s { position: relative; font: 600 11px/1.3 var(--f-code); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.wz-ctl { display: grid; gap: 16px; }
.wz-ctl > div > span, .wz-col > span { display: block; font: 600 12px/1 var(--f-code); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.wz-col { display: grid; grid-template-columns: 1fr; }
.wz-col { grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.wz-col > span { grid-column: 1 / -1; }
.wz-sw { width: 46px; height: 46px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; position: relative; overflow: hidden; }
.wz-sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.wz-col .hex { font: 600 16px/1 var(--f-code); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 13px 12px; width: 100%; max-width: 160px; text-transform: uppercase; }
.wz-fonts > div, .wz-themes > div { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-fonts button, .wz-themes button { font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.wz-themes button { font: 600 14px/1 var(--f-body); }
.wz-themes i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50%); }
.wz-fonts button[aria-pressed="true"], .wz-themes button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.wz-end { text-align: center; justify-items: center; padding: 10px 0; }
.wz-end .wz-sub { margin-inline: auto; }
.wz-burst { width: 74px; height: 74px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; animation: wz-pop .5s cubic-bezier(.2, 1.4, .3, 1) both; box-shadow: 0 0 0 12px var(--accent-soft); margin-bottom: 6px; }
.wz-burst span { width: 18px; height: 32px; border: solid var(--surface); border-width: 0 5px 5px 0; transform: translateY(-4px) rotate(45deg); }
@media (max-width: 640px) {
  .wz { padding: 0; place-items: end stretch; }
  .wz-card { border-radius: 22px 22px 0 0; max-height: 94dvh; }
  .wz-dots li { font-size: 0; gap: 0; } .wz-dots span { font-size: 12px; }
  .wz-grid, .wz-look { grid-template-columns: 1fr; }
  .wz-prev { aspect-ratio: auto; min-height: 220px; }
  .wz-site .wz-btn { flex: 1 1 100%; }
}
/* tour */
.tr { position: fixed; inset: 0; z-index: 210; }
.tr-hole { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(2, 6, 23, .66); outline: 2px solid var(--accent); transition: all .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.tr-tip { position: fixed; background: var(--surface); color: var(--ink); border: 1px solid var(--line2); border-radius: 16px; padding: 16px 18px; display: grid; gap: 6px; box-shadow: 0 30px 60px -20px rgba(2, 6, 23, .6); transition: top .35s ease, left .35s ease; }
.tr-n { font: 600 12px/1 var(--f-code); letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.tr-tip b { font: 800 18px/1.2 var(--f-display); }
.tr-tip p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.tr-acts { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.tr-acts .wz-btn { padding: 10px 16px; font-size: 15px; }
/* per-prompt edits */
.pe { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); }
.pe.is-edited { border-color: var(--accent); }
.pe-tog { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: 0; cursor: pointer; font: 700 15px/1.2 var(--f-body); color: var(--ink); text-align: left; }
.pe-ic { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--accent); position: relative; flex: 0 0 auto; }
.pe-ic::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--accent); box-shadow: 0 4px 0 var(--accent); }
.pe-st { margin-left: auto; font: 600 12px/1 var(--f-code); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.pe-body { padding: 0 14px 14px; display: grid; gap: 12px; }
.pe-help { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.pe-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; }
.pe-fields .pe-hex { font-family: var(--f-code); text-transform: uppercase; }
.pe-none { margin: 0; font-size: 14px; color: var(--muted); }
.pe-acts { display: flex; justify-content: flex-end; }
.pe-on .prompts pre { outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 4px; border-radius: 8px; cursor: text; }
.pe-on .prompts pre:focus { outline-style: solid; }
@media (prefers-reduced-motion: reduce) { .wz-open-ic::before, .wz-scan li span { animation: none; } .wz-card, .wz-pane, .wz-scrim, .wz-burst { animation: none; } }
/* ---------- Studio access: gate + generate (31 Oct) ---------- */
.ga-card { width: min(620px, 100%); }
.ga-eye { flex: 1; font: 600 12px/1 var(--f-code); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ga .field select { width: 100%; font: 500 16px/1.2 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.ga-err { margin: 0; color: #B45309; font-size: 14px; }
.ga-fine { font-size: 13px; color: var(--muted); }
/* Studio gate block screen (10 Nov 2026): heading, one line why, one contact line, Close. Calm, centered, lots of room. */
.ga-block { display: grid; gap: 14px; text-align: center; justify-items: center; padding: 28px 8px 20px; }
.ga-block h2 { margin: 0; max-width: 20ch; }
.ga-block .wz-sub { margin: 0; }
.ga-contact { margin: 0; font-size: 14px; color: var(--muted); }
.ga-contact a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ga-block .wz-nav { margin-top: 10px; }
.ga-err .ga-contact, .sx-ask-err .ga-contact { display: block; margin-top: 4px; font-size: 13px; }
.sx-ask-err .ga-contact, .sx-ask-err .ga-contact a { color: inherit; }
.wz.wz-blocked .wz-dots { visibility: hidden; }
.wz.wz-blocked .wz-card, .wz.v2.wz-blocked .wz-card { width: min(620px, 100%); max-width: 620px; }
/* the email field shows the error too, not only the line under it; the message takes its own full row */
.sx-ask.sx-ask-bad #sx-ae, .sx-ask.sx-ask-bad #sx-ae:focus { border-color: #FDE68A; box-shadow: 0 0 0 2px color-mix(in srgb, #FDE68A 45%, transparent); }
.sx-ask.sx-ask-bad .sx-ask-go { justify-content: space-between; }
.sx-ask.sx-ask-bad .sx-ask-err { flex: 1 1 100%; order: -1; }
.ga-call { justify-self: start; text-decoration: none; display: inline-block; }
.ga-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 6px 0; }
.ga-or::before, .ga-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ga-wait { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); }
.ga-wait b { font: 700 16px/1.3 var(--f-display); }
.ga-wait p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.ga-wait .wz-site input { font-size: 16px; padding: 12px 14px; }
.gen { font: 600 13px/1 var(--f-body); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; margin-right: 8px; white-space: nowrap; }
.gen:hover { background: var(--accent-soft); }
.ga-terms { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface2); font-size: 13.5px; line-height: 1.5; color: var(--soft); cursor: pointer; }
.ga-terms input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
/* Logo, goals and brand sheet (31 Oct evening) */
.wz-logo { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 0 0 14px; border: 1px solid var(--line2); border-radius: 14px; background: var(--surface2); }
.wz-logo-img { display: grid; place-items: center; min-width: 72px; height: 52px; padding: 6px 10px; border-radius: 10px; background: #FFFFFF; }
.wz-logo-img img { max-height: 40px; max-width: 160px; display: block; }
.wz-logo-img.on-dark { background: #0F172A; }
.wz-logo b { display: block; font-size: 15px; } .wz-logo small { color: var(--muted); font-size: 13px; }
.wz-q { border: 0; padding: 0; margin: 0 0 16px; }
.wz-q legend { font: 700 15px/1.35 var(--f-body); color: var(--ink); margin-bottom: 10px; padding: 0; }
.wz-q div { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-q button { font: 600 14px/1.2 var(--f-body); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface2); color: var(--soft); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.wz-q button:hover { border-color: var(--accent); }
.wz-q button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #0F172A; transform: scale(1.03); }
.wz-q button[aria-pressed="true"]::before { content: "✓ "; }
.wz-q-more { margin-bottom: 8px; } .wz-q-more small { color: var(--muted); font-weight: 500; }
.wz-nav > span { display: inline-flex; gap: 6px; align-items: center; }
.wz-sheet-card { display: flex; gap: 16px; align-items: center; text-align: left; margin: 16px auto 8px; max-width: 520px; padding: 14px; border: 1px solid var(--line2); border-radius: 16px; background: var(--surface2); }
.wz-sheet-card > div:last-child { display: grid; gap: 6px; justify-items: start; }
.wz-sheet-card b { font-size: 16px; } .wz-sheet-card small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.wz-sheet-card .wz-btn { margin-top: 4px; padding: 11px 16px; font-size: 15px; }
.wz-sheet-mini { flex: none; width: 110px; height: 132px; border-radius: 10px; background: var(--paper); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 34px; gap: 5px; padding: 8px; }
.wz-sheet-mini img.on-dark { background: #0F172A; padding: 4px 6px; border-radius: 6px; }
.wz-sheet-mini img, .wz-sheet-mini .wz-sm-ring { grid-column: 1 / -1; align-self: center; justify-self: center; max-width: 90px; max-height: 50px; }
.wz-sm-ring { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ac); color: var(--ink); display: grid; place-items: center; font: 800 15px/1 var(--f-display); }
.wz-sheet-mini i { border-radius: 6px; border: 1px solid rgba(15, 23, 42, .12); }
@media (max-width: 520px) { .wz-sheet-card { flex-direction: column; text-align: center; } .wz-sheet-card > div:last-child { justify-items: center; } }
/* ---------- /Setup wizard ---------- */

/* ---------- A-grade switch + Generate (31 Oct) ---------- */
/* Day and night switch. Navy night with stars, a soft teal day with a cloud; the knob springs across. */
.mode-btn.qs { gap: 10px; padding: 4px 12px 4px 4px; min-height: 40px; background: var(--surface); }
.qs-track { position: relative; width: 58px; height: 30px; border-radius: 999px; overflow: hidden; flex: none;
  box-shadow: inset 0 1px 3px rgba(2, 6, 23, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.qs-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #7DD3C8 0%, var(--ms-p2) 100%); transition: opacity .5s ease; }
.qs-track::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60px 40px at 30% 120%, #1E3A5F 0%, transparent 70%), linear-gradient(180deg, #020617 0%, #0F172A 100%); opacity: 0; transition: opacity .5s ease; }
[data-qmode="dark"] .qs-track::before { opacity: 1; }
[data-qmode="dark"] .qs-sky { opacity: 0; }
.qs-stars { position: absolute; inset: 0; }
.qs-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #F1F5F9; opacity: 0; transform: scale(.2); transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.qs-stars i:nth-child(1) { left: 9px; top: 7px; } .qs-stars i:nth-child(2) { left: 18px; top: 16px; width: 1.5px; height: 1.5px; }
.qs-stars i:nth-child(3) { left: 25px; top: 6px; } .qs-stars i:nth-child(4) { left: 12px; top: 21px; width: 1.5px; height: 1.5px; }
.qs-stars i:nth-child(5) { left: 30px; top: 19px; width: 1.5px; height: 1.5px; }
[data-qmode="dark"] .qs-stars i { opacity: .9; transform: scale(1); animation: qs-tw 2.6s ease-in-out infinite; }
[data-qmode="dark"] .qs-stars i:nth-child(2) { transition-delay: .06s; animation-delay: .7s; }
[data-qmode="dark"] .qs-stars i:nth-child(3) { transition-delay: .12s; animation-delay: 1.3s; }
[data-qmode="dark"] .qs-stars i:nth-child(4) { transition-delay: .18s; animation-delay: .4s; }
[data-qmode="dark"] .qs-stars i:nth-child(5) { transition-delay: .24s; animation-delay: 1.9s; }
@keyframes qs-tw { 0%, 100% { opacity: .9; } 50% { opacity: .3; } }
.qs-cloud { position: absolute; right: 7px; bottom: 6px; width: 16px; height: 6px; border-radius: 6px; background: #FFFFFF; opacity: .95; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease; }
.qs-cloud::before { content: ""; position: absolute; left: 3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: inherit; }
[data-qmode="dark"] .qs-cloud { transform: translate(18px, 4px); opacity: 0; }
.qs-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #FEF9C3 45%, #FDE68A 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 14px 2px rgba(253, 230, 138, .75), 0 2px 4px rgba(2, 6, 23, .25);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), background .45s ease, box-shadow .45s ease; }
[data-qmode="dark"] .qs-knob { transform: translateX(28px) rotate(-30deg);
  background: radial-gradient(circle at 35% 35%, #F8FAFC 0%, #E2E8F0 60%, #CBD5E1 100%);
  box-shadow: 0 0 0 3px rgba(var(--ms-rgb), .18), 0 0 16px 2px rgba(var(--ms-rgb), .45), 0 2px 4px rgba(0, 0, 0, .4); }
.qs-moon i { position: absolute; border-radius: 50%; background: #94A3B8; opacity: 0; transition: opacity .35s ease .1s; }
.qs-moon i:nth-child(1) { width: 7px; height: 7px; left: 5px; top: 6px; } .qs-moon i:nth-child(2) { width: 4px; height: 4px; left: 13px; top: 14px; }
[data-qmode="dark"] .qs-moon i { opacity: .55; }
.mode-btn.qs:hover .qs-knob { box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 0 20px 4px rgba(253, 230, 138, .9), 0 2px 4px rgba(2, 6, 23, .25); }
[data-qmode="dark"] .mode-btn.qs:hover .qs-knob { box-shadow: 0 0 0 4px rgba(var(--ms-rgb), .28), 0 0 22px 4px rgba(var(--ms-rgb), .65), 0 2px 4px rgba(0, 0, 0, .4); }
.mode-btn.qs:active .qs-knob { width: 28px; }
[data-qmode="dark"] .mode-btn.qs:active .qs-knob { transform: translateX(24px) rotate(-30deg); }
.qs-l { font: 700 13px/1 var(--f-body); letter-spacing: .01em; min-width: 30px; text-align: left; }
@media (max-width: 560px) { .mode-btn.qs { padding: 4px; } .qs-l { display: none; } }
/* The page change grows as a circle from the switch. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .qs-knob, .qs-cloud, .qs-stars i, .qs-sky, .qs-track::before { transition: none !important; animation: none !important; } }

/* Generate: the hero button under each video's styles. */
.mk { margin: 14px 0 6px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; border-radius: 18px;
  border: 1px solid var(--line2); background: linear-gradient(135deg, rgba(var(--ms-rgb), .07), transparent 55%), var(--surface2); }
.mk-copy { flex: 1 1 240px; min-width: 0; }
.mk-copy b { display: block; font: 700 16px/1.3 var(--f-display); color: var(--ink); }
.mk-copy span { display: block; margin-top: 4px; font: 500 13.5px/1.45 var(--f-body); color: var(--muted); }
@property --mk-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mk-btn { --mk-a: 0deg; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px 0 18px;
  border: 0; border-radius: 999px; cursor: pointer; color: #0F172A; font: 800 15.5px/1 var(--f-display); letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(180deg, var(--ms-1) 0%, var(--ms-2) 55%, var(--ms-3) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 -2px 0 rgba(15, 118, 110, .35) inset, 0 10px 26px -8px rgba(var(--ms-rgb), .65), 0 2px 6px rgba(2, 6, 23, .25);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; animation: mk-spin 4s linear infinite; } /* no filter in the transition (motion-rules rule 13) */
.mk-btn::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--mk-a), rgba(var(--ms-rgb), 0) 0deg, var(--ms-p1) 60deg, #FFFFFF 90deg, var(--ms-p1) 120deg, rgba(var(--ms-rgb), 0) 200deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; }
.mk-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 62%) -160% 0 / 220% 100% no-repeat; transition: background-position .8s ease; }
.mk-btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(15, 118, 110, .35) inset, 0 16px 34px -8px rgba(var(--ms-rgb), .8), 0 2px 6px rgba(2, 6, 23, .25); }
.mk-btn:hover::after { background-position: 160% 0; }
.mk-btn:active { transform: translateY(0) scale(.97); filter: brightness(.96); }
.mk-btn:focus-visible { outline: 3px solid var(--ms-p1); outline-offset: 4px; }
.mk-btn svg { width: 20px; height: 20px; flex: none; }
.mk-btn .mk-s1 { transform-origin: 10px 10px; animation: mk-tw 2.4s ease-in-out infinite; }
.mk-btn .mk-s2 { transform-origin: 16.5px 4.5px; animation: mk-tw 2.4s ease-in-out infinite .8s; }
@keyframes mk-spin { to { --mk-a: 360deg; } }
@keyframes mk-tw { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(.75) rotate(20deg); } }
@media (prefers-reduced-motion: reduce) { .mk-btn, .mk-btn svg * { animation: none !important; } }
@media (max-width: 560px) { .mk { padding: 14px; } .mk-btn { width: 100%; justify-content: center; } }

/* Generate: the production panel. */
.mkm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.mkm[hidden] { display: none; }
.mkm-scrim { position: absolute; inset: 0; background: rgba(2, 6, 23, .72); backdrop-filter: blur(6px); animation: mkm-in .25s ease; }
.mkm-card { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 22px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); animation: mkm-up .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes mkm-in { from { opacity: 0; } } @keyframes mkm-up { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.mkm-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.mkm-steps { display: flex; gap: 6px; flex: 1; min-width: 0; }
.mkm-steps span { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-body); color: var(--muted); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.mkm-steps span b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface2); font-size: 11px; }
.mkm-steps span.on { color: var(--ink); border-color: var(--accent); }
.mkm-steps span.on b, .mkm-steps span.done b { background: var(--accent); color: #0F172A; }
.mkm-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; flex: none; }
.mkm-body { padding: 20px; }
.mkm-body h2 { font-size: clamp(22px, 3.4vw, 28px); line-height: 1.15; }
.mkm-sub { color: var(--muted); margin: 6px 0 16px; }
.mkm-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.mkm-style { position: relative; padding: 0; border: 2px solid var(--line); border-radius: 14px; background: var(--surface2); color: var(--ink); cursor: pointer; text-align: left; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.mkm-style:hover { transform: translateY(-2px); }
.mkm-style[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--ms-rgb), .18); }
.mkm-style .mkm-pv { display: block; background: var(--stage); }
.mkm-style .mkm-pv .stage { pointer-events: none; }
.mkm-style b { display: block; padding: 9px 11px 10px; font: 700 13.5px/1.25 var(--f-body); }
.mkm-style[aria-pressed="true"] b::after { content: " ✓"; color: var(--accent); }
.mkm-script { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mkm-script li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); }
.mkm-t { font: 600 12px/1.3 var(--f-code); color: var(--accent); padding-top: 2px; }
.mkm-beat b { display: block; font: 800 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.mkm-say { font: 700 16px/1.4 var(--f-display); color: var(--ink); }
.mkm-say q { quotes: "\201C" "\201D"; }
.mkm-say + .mkm-say { margin-top: 4px; }
.mkm-beat small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.mkm-firm { background: var(--mark); color: var(--mark-ink); border-radius: 5px; padding: 0 4px; }
.mkm-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.mkm-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.mkm-nav .mk-btn { min-height: 48px; }
.mkm-back { background: none; border: 0; color: var(--soft); font: 600 14px/1 var(--f-body); cursor: pointer; padding: 10px 4px; }
.mkm-make { display: grid; place-items: center; text-align: center; padding: 14px 0 6px; }
.mkm-ring { --p: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1turn), var(--line) 0); transition: --p .3s linear; position: relative; }
.mkm-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.mkm-ring span { position: relative; font: 800 24px/1 var(--f-display); }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.mkm-checks { list-style: none; padding: 0; margin: 18px auto 0; display: grid; gap: 8px; text-align: left; width: min(360px, 100%); }
.mkm-checks li { display: flex; gap: 10px; align-items: center; color: var(--muted); font-weight: 600; transition: color .3s ease; }
.mkm-checks li i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line2); flex: none; display: grid; place-items: center; font-style: normal; font-size: 12px; transition: all .3s ease; }
.mkm-checks li.ok { color: var(--ink); } .mkm-checks li.ok i { background: var(--accent); border-color: var(--accent); color: #0F172A; }
.mkm-checks li.ok i::before { content: "✓"; }
.mkm-done { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 20px; align-items: start; }
.mkm-done.wide { grid-template-columns: 1fr; }
.mkm-done video { width: 100%; border-radius: 14px; background: #000; display: block; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7); }
.mkm-acts { display: grid; gap: 10px; }
.mkm-acts a.mk-btn { text-decoration: none; justify-content: center; }
.mkm-ghost { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--ink); font: 700 14.5px/1 var(--f-body); cursor: pointer; text-decoration: none; }
.mkm-ghost:hover { border-color: var(--accent); }
.mkm-fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 620px) { .mkm { padding: 0; place-items: end stretch; } .mkm-card { border-radius: 22px 22px 0 0; max-height: 94dvh; } .mkm-done { grid-template-columns: 1fr; } .mkm-done video { max-height: 62dvh; width: auto; max-width: 100%; margin: 0 auto; } .mkm-steps span:not(.on) { display: none; } .mkm-script li { grid-template-columns: 1fr; gap: 4px; } }
html.mkm-lock { overflow: hidden; }
/* Generate: layers (motion and each sound as separate files, played in sync). */
.mkl { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.mkl-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); }
.mkl-row.off { opacity: .62; }
.mkl-t { flex: 1; min-width: 0; } .mkl-t b { display: block; font: 700 14px/1.25 var(--f-body); } .mkl-t small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.mkl-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--ms-rgb), .14); position: relative; }
.mkl-ic::before { content: ""; position: absolute; inset: 7px; background: var(--accent); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mkl-motion { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='2'/%3E%3C/svg%3E"); }
.mkl-sfx { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6h3l4-3v10l-4-3H1zM11 4.5a5 5 0 0 1 0 7l-1-1a3.6 3.6 0 0 0 0-5zM13 2.5a8 8 0 0 1 0 11l-1-1a6.5 6.5 0 0 0 0-9z'/%3E%3C/svg%3E"); }
.mkl-vo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='1' width='6' height='9' rx='3'/%3E%3Cpath d='M3 7.5a5 5 0 0 0 10 0h-1.5a3.5 3.5 0 0 1-7 0zM7.2 12.4h1.6V15H7.2z'/%3E%3C/svg%3E"); }
.mkl-mu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2l9-2v11a2.5 2.5 0 1 1-1.5-2.3V3.2L7.5 4.5V13A2.5 2.5 0 1 1 6 10.7z'/%3E%3C/svg%3E"); }
.mkl-tag { flex: none; font: 700 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 9px; }
.mkl-sw { flex: none; position: relative; width: 46px; height: 26px; border-radius: 999px; border: 0; background: var(--line2); cursor: pointer; transition: background .25s ease; }
.mkl-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.mkl-sw[aria-checked="true"] { background: var(--accent); } .mkl-sw[aria-checked="true"] i { transform: translateX(20px); }
.mkl-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mkl-voices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mkl-voices button { font: 700 12.5px/1 var(--f-body); padding: 8px 11px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--soft); cursor: pointer; transition: all .2s ease; }
.mkl-voices button:hover { border-color: var(--accent); }
.mkl-voices button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #0F172A; }
/* ---------- /A-grade switch + Generate ---------- */

/* Hero (1 Nov 2026): one promise, one action. Scan the website, or type the details, and see the videos change. */
.hx.bx { padding: clamp(22px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.hx-copy { display: grid; gap: 16px; justify-items: start; }
.hx h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; max-width: 14ch; }
.hx-sub { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--soft); max-width: 46ch; }
.hx-form { display: flex; gap: 8px; width: 100%; max-width: 560px; padding: 6px; border: 1px solid var(--line2); border-radius: 16px; background: var(--surface2); transition: border-color .2s, box-shadow .2s; }
.hx-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hx-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 600 17px/1 var(--f-body); padding: 14px 12px; outline: none; }
.hx-form input::placeholder { color: var(--muted); font-weight: 500; }
.hx-go { flex: none; border: 0; border-radius: 11px; padding: 0 20px; min-height: 50px; font: 800 16px/1 var(--f-body); color: var(--bg); background: var(--ink); cursor: pointer; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.hx-go:hover { transform: translateY(-1px); } .hx-go:active { transform: scale(.97); }
.hx-go:focus-visible, .hx-manual:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hx-err { margin: -6px 0 0; color: #D9A441; font-size: 14px; font-weight: 600; }
.hx-manual { border: 0; background: none; padding: 2px 0; color: var(--ink); font: 700 15px/1.3 var(--f-body); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; cursor: pointer; }
.hx-manual:hover { text-decoration-color: var(--accent); }
.hx-fine { margin: 0; color: var(--muted); font-size: 14px; }
/* Hero video (3 Nov 2026): the 30 second explainer, explainer/?hero=1 */
.hx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-demo { display: grid; justify-items: center; gap: 14px; min-width: 0; width: 100%; }
.hx-vid { width: 100%; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid var(--line2); background: #020617; box-shadow: 0 40px 80px -40px rgba(2, 6, 23, .8), 0 0 70px -30px rgba(var(--ms-rgb), .45); }
.hx-vid iframe { display: block; width: 100%; height: 100%; border: 0; }
.hx-cap { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.hx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: hx-pulse 2.4s ease-in-out infinite; }
@keyframes hx-pulse { 50% { opacity: .35; } }
/* Firm hero (5 Nov 2026): a loaded firm sees its own header, no website box and no sample-firm explainer. */
.hx-firm.bx { grid-template-columns: 1fr; }
.hx-firm .hx-form, .hx-firm .hx-err, .hx-firm #hx-manual, .hx-firm .hx-demo { display: none !important; }
.hx-firm h1 { max-width: 18ch; }
.hx-firm-go { display: none; }
.hx-firm .hx-firm-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hx-firm-go .hx-go { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 26px; }
@media (max-width: 860px) {
  .hx.bx { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hx-form { flex-direction: column; padding: 6px; } .hx-go { min-height: 52px; }
  .hx h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .hx-dot { animation: none; } }

.fab { transition: opacity .3s ease, transform .3s ease; }
.fab.hx-hide { opacity: 0; transform: translateY(24px); pointer-events: none; }
.layout { max-width: 1320px; }
@media (max-width: 560px) { .top-acts { display: none; } }


/* 2 Nov: on desktop the firm button sits bottom-center and stands out; the panel opens beside the videos (no dark overlay) so firms watch every video change as they type. */
@media (min-width: 1024px) {
  .fab { left: 50%; translate: -50% 0; bottom: 24px; padding: 16px 26px; font-size: 16px; gap: 10px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent), 0 18px 40px -12px rgba(15, 23, 42, .55); }
  .fab svg { width: 17px; height: 17px; }
  html.side-on .scrim { display: none; }
  html.side-on .fab { opacity: 0; pointer-events: none; }
  /* 7 Nov: once the firm is set, the button moves to the corner and drops its glow so it never covers a video card. */
  .fab.fab-set { left: auto; right: 24px; translate: none; padding: 12px 18px; font-size: 14px; box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .5); }
  html.side-on .layout { padding-left: calc(min(360px, 88vw) + 28px); transition: padding-left .25s ease; }
  .side { box-shadow: 18px 0 40px -28px rgba(15, 23, 42, .45); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { html.side-on .layout { transition: none; } }
/* 2 Nov: looks keep the firm's colors; a switch brings each look's own colors. */
.th-side { display: grid; gap: 10px; max-width: 520px; }
.th-sw { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: 600 14px/1.2 var(--f-body); color: var(--ink); padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--surface); }
.th-sw[hidden] { display: none; }
.th-sw input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
/* 2 Nov: Hub partner badge + sheet, and the "two ways" band above the videos. */
.sc-hub { position: relative; z-index: 2; flex: none; font: 700 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 6px; padding: 5px 7px; cursor: pointer; }
.sc-hub:hover, .sc-hub:focus-visible { background: color-mix(in srgb, var(--accent) 36%, transparent); }
.sc-hub-s { display: inline-block; cursor: default; vertical-align: 1px; }
.hubd { border: 0; padding: 0; border-radius: 18px; max-width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .6); }
.hubd::backdrop { background: rgba(15, 23, 42, .5); }
.hubd-in { display: grid; gap: 12px; padding: 24px; }
.hubd-tag { justify-self: start; font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 6px; padding: 5px 7px; }
.hubd h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.hubd-v { margin: -6px 0 0; color: var(--muted); font-size: 14px; }
.hubd-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.hubd-own { margin: 0; font-size: 13px; color: var(--muted); }
.hubd-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.hubd-go { font: 650 15px/1 var(--f-body); padding: 12px 18px; border-radius: 999px; background: var(--accent); color: var(--bg); text-decoration: none; }
.hubd-how { font: 600 14px/1 var(--f-body); color: var(--ink); padding: 12px 8px; }
.hubd-x { margin-left: auto; font: 600 14px/1 var(--f-body); background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.ways { display: grid; gap: 14px; margin-bottom: 18px; }
.ways h2 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.ways-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.way { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.way-hub { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.way-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 14px/1 var(--f-body); background: var(--ink); color: var(--bg); }
.way b { font-size: 16px; }
.way p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.way a { color: var(--ink); font-weight: 650; }
/* 2 Nov: wizard look step keeps scanned colors; opt-in look colors + reset. */
.wz-lc { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 14px/1.2 var(--f-body); color: var(--ink); cursor: pointer; }
.wz-lc input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.wz-themes .wz-reset { display: inline-block; margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--accent); font: 650 14px/1.2 var(--f-body); text-decoration: underline; cursor: pointer; }
.wz-themes .wz-reset[hidden] { display: none; }

/* Saved color sets: main plus one second set */
.csets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cset, .cset-add, .cset-x { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 13px/1 var(--f-body); cursor: pointer; }
.cset i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); margin-right: -3px; }
.cset b { margin-left: 6px; font-weight: 700; }
.cset[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cset-add { border-style: dashed; color: var(--muted); }
.cset-x { border: 0; background: none; color: var(--muted); text-decoration: underline; padding: 6px 4px; }
.cset:focus-visible, .cset-add:focus-visible, .cset-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Where to start: three directions under the hero (Justin, 2 Nov) */
.go { display: grid; gap: 14px; }
.go h2 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.go-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.go-c { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; background: var(--surface); transition: border-color .2s, transform .2s; }
.go-c:hover { border-color: var(--accent); transform: translateY(-2px); }
.go-c:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.go-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 14px/1 var(--f-body); background: var(--ink); color: var(--bg); }
.go-c b { font-size: 18px; }
.go-c p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.go-a { margin-top: 4px; font: 700 13px/1 var(--f-body); color: var(--accent); }
.go-a::after { content: " →"; }

/* Proven ads in the Showcase */
.pv-sec { scroll-margin-top: 80px; margin-top: 28px; }
.pv-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 600px), 1fr)); gap: 16px; }
.pv-wait { color: var(--muted); }
.pv-c { display: grid; grid-template-columns: 326px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start; }
.pv-play { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--ink); }
.pv-play.on { background: #000; }
.pv-play iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv-btn { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 10px; border: 0; cursor: pointer; text-align: center; text-decoration: none; color: var(--bg); background: radial-gradient(120% 80% at 50% 20%, color-mix(in srgb, var(--accent) 45%, var(--ink)), var(--ink)); font: 600 12.5px/1.25 var(--f-body); }
.pv-btn small { opacity: .75; font-size: 11px; word-break: break-word; }
.pv-x { font: 800 26px/1 var(--f-body); letter-spacing: -.02em; }
.pv-tri { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); position: relative; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.pv-tri::after { content: ""; position: absolute; left: 18px; top: 14px; border-left: 14px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.pv-btn:hover .pv-tri { transform: scale(1.06); }
.pv-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.pv-t { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pv-k { font: 600 11.5px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.pv-t h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.pv-t p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.pv-t p b { color: var(--ink); }
.pv-make { justify-self: start; margin-top: 4px; text-decoration: none; white-space: normal; font-size: 15px; padding: 12px 16px; }
/* Proven ads breakdowns (3 Nov 2026): the drop's takeaways, and a full breakdown under each ad */
.pv-takes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 16px; }
.pv-tk { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.pv-tk b { font: 800 26px/1 var(--f-body); letter-spacing: -.02em; color: var(--accent); }
.pv-tk p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.pv-tk strong { color: var(--ink); }
.pv-c:has(.pv-bd[open]) { grid-column: 1 / -1; }
.pv-bd { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; }
.pv-bd > summary { cursor: pointer; font: 700 14px/1.3 var(--f-body); color: var(--accent); list-style: none; }
.pv-bd > summary::-webkit-details-marker { display: none; }
.pv-bd > summary::after { content: " ▾"; } .pv-bd[open] > summary::after { content: " ▴"; }
.pv-bd > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.pv-bd-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.pv-bx { border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.pv-bx.pv-w2 { grid-column: 1 / -1; }
.pv-bx h4 { margin: 0; font: 600 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-bx p, .pv-bx li { margin: 0; font-size: 14px; line-height: 1.45; }
.pv-fine { color: var(--muted); font-size: 12.5px !important; }
.pv-src { display: grid; gap: 6px; }
.pv-src a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.pv-src a:hover { border-color: var(--accent); }
.pv-src span { display: grid; gap: 2px; min-width: 0; } .pv-src .r { text-align: right; } .pv-src small { color: var(--muted); font-size: 12px; }
.pv-gl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.pv-gl dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .pv-gl dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.pv-why2, .pv-dd ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pv-q { font-size: 19px !important; font-weight: 800; line-height: 1.3; }
.pv-shape { font: 700 14px/1.4 var(--f-code); border: 1px dashed var(--accent); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
.pv-beats { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .pv-beats span { display: block; color: var(--muted); font-size: 13.5px; }
.pv-take { font-weight: 700; }
.pv-dd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pv-flip { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.pv-flip > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; align-content: start; }
.pv-flip > div:last-child { border-color: var(--accent); }
.pv-flip small { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pv-flip > span { align-self: center; color: var(--accent); font-weight: 700; }
.pv-tl { display: flex; gap: 3px; height: 26px; border-radius: 8px; overflow: hidden; }
.pv-tl span { display: grid; place-items: center; min-width: 18px; background: var(--accent); color: var(--bg, #020617); font: 700 12px/1 var(--f-body); }
.pv-tl span:nth-child(even) { opacity: .62; }
.pv-tl-ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: -4px; }
.pv-beats i { font-style: normal; font-size: 12px; color: var(--muted); }
@media (max-width: 720px) { .pv-bd-in, .pv-dd, .pv-flip { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .pv-flip > span { justify-self: center; transform: rotate(90deg); line-height: 1; } }
@media (max-width: 700px) { .pv-c { grid-template-columns: 1fr; } .pv-play { max-width: 340px; width: 100%; margin: 0 auto; } }
.ps2-c { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
a.ps2-c:hover { border-color: var(--accent); }
.ps2-c b { font-size: 20px; line-height: 1.25; }
.ps2-c p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.ps2-c.next { opacity: .75; border-style: dashed; }
.ps2-m { font: 600 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#proven-systems { scroll-margin-top: 80px; }

/* QOLA B2B design system v3.1 (locked 2 Nov 2026), dark mode only: deep ink ground #020617, see-through boxes,
   glowing hero with a shining key phrase, closing bands on the hero glow (no second band colour), deep teal buttons,
   teal-line tab pill. The day/night switch stays (Justin, 2 Nov); light mode is unchanged. */
:root[data-qmode="dark"] {
  --bg: #020617; --surface: #0D1324; --surface2: #111829; --glow: rgba(var(--ms-rgb-d), 0);
  --band: transparent; --band-btn: var(--ms-4); --band-btn-ink: #FFFFFF;
}

:root[data-qmode="dark"] body { background: var(--bg); }
:root[data-qmode="dark"] .bx { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow: none; }
:root[data-qmode="dark"] .hx.bx { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(rgba(148,163,184,.10) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); }
:root[data-qmode="dark"] .hx.bx::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 40%; top: -300px; width: min(900px, 140%); height: 600px; translate: -50% 0; border-radius: 50%; background: rgba(var(--ms-rgb-m),.28); filter: blur(120px); }
:root[data-qmode="dark"] .hx h1 .hl { background: linear-gradient(100deg, var(--ms-2) 0%, var(--ms-p2) 42%, var(--ms-2) 84%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
:root[data-qmode="dark"] .cta, :root[data-qmode="dark"] .cta.bx, :root[data-qmode="dark"] .rw.bx { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(var(--ms-rgb-m),.20), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); border: 1px solid var(--line); }
:root[data-qmode="dark"] .cta a.go, :root[data-qmode="dark"] .hx-go, :root[data-qmode="dark"] .site-go, :root[data-qmode="dark"] .vb-copy, :root[data-qmode="dark"] .vb-req, :root[data-qmode="dark"] .sc-add[aria-pressed="true"] { background: var(--ms-4); border-color: var(--ms-4); color: var(--ms-on); }
:root[data-qmode="dark"] .cta a.go { box-shadow: 0 10px 30px -10px rgba(var(--ms-rgb-d),.8); }
:root[data-qmode="dark"] .cta a.go:hover, :root[data-qmode="dark"] .hx-go:hover, :root[data-qmode="dark"] .site-go:hover, :root[data-qmode="dark"] .vb-copy:hover, :root[data-qmode="dark"] .vb-req:hover { background: var(--ms-3); }
:root[data-qmode="dark"] .top .tabs a[aria-current="page"] { background: rgba(var(--ms-rgb),.10); color: var(--ms-1); border-color: rgba(var(--ms-rgb),.45); }
:root[data-qmode="dark"] .qb-rib { background: transparent; border-bottom-color: rgba(255,255,255,.06); }
:root[data-qmode="dark"] .qb-tag { background: rgba(var(--ms-rgb),.12); color: var(--ms-1); border: 1px solid rgba(var(--ms-rgb),.35); }

@media (prefers-reduced-motion: no-preference) {
  :root[data-qmode="dark"] .hx h1 .hl { animation: b2b-sheen 6s ease-in-out infinite; }
  :root[data-qmode="dark"] .hx.bx::before { animation: b2b-breathe 9s ease-in-out infinite; }
}
@media (prefers-color-scheme: dark) {
:root:not([data-qmode="light"]) {
  --bg: #020617; --surface: #0D1324; --surface2: #111829; --glow: rgba(var(--ms-rgb-d), 0);
  --band: transparent; --band-btn: var(--ms-4); --band-btn-ink: #FFFFFF;
}

:root:not([data-qmode="light"]) body { background: var(--bg); }
:root:not([data-qmode="light"]) .bx { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow: none; }
:root:not([data-qmode="light"]) .hx.bx { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(rgba(148,163,184,.10) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); }
:root:not([data-qmode="light"]) .hx.bx::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 40%; top: -300px; width: min(900px, 140%); height: 600px; translate: -50% 0; border-radius: 50%; background: rgba(var(--ms-rgb-m),.28); filter: blur(120px); }
:root:not([data-qmode="light"]) .hx h1 .hl { background: linear-gradient(100deg, var(--ms-2) 0%, var(--ms-p2) 42%, var(--ms-2) 84%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
:root:not([data-qmode="light"]) .cta, :root:not([data-qmode="light"]) .cta.bx, :root:not([data-qmode="light"]) .rw.bx { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(var(--ms-rgb-m),.20), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); border: 1px solid var(--line); }
:root:not([data-qmode="light"]) .cta a.go, :root:not([data-qmode="light"]) .hx-go, :root:not([data-qmode="light"]) .site-go, :root:not([data-qmode="light"]) .vb-copy, :root:not([data-qmode="light"]) .vb-req, :root:not([data-qmode="light"]) .sc-add[aria-pressed="true"] { background: var(--ms-4); border-color: var(--ms-4); color: var(--ms-on); }
:root:not([data-qmode="light"]) .cta a.go { box-shadow: 0 10px 30px -10px rgba(var(--ms-rgb-d),.8); }
:root:not([data-qmode="light"]) .cta a.go:hover, :root:not([data-qmode="light"]) .hx-go:hover, :root:not([data-qmode="light"]) .site-go:hover, :root:not([data-qmode="light"]) .vb-copy:hover, :root:not([data-qmode="light"]) .vb-req:hover { background: var(--ms-3); }
:root:not([data-qmode="light"]) .top .tabs a[aria-current="page"] { background: rgba(var(--ms-rgb),.10); color: var(--ms-1); border-color: rgba(var(--ms-rgb),.45); }
:root:not([data-qmode="light"]) .qb-rib { background: transparent; border-bottom-color: rgba(255,255,255,.06); }
:root:not([data-qmode="light"]) .qb-tag { background: rgba(var(--ms-rgb),.12); color: var(--ms-1); border: 1px solid rgba(var(--ms-rgb),.35); }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-qmode="light"]) .hx h1 .hl { animation: b2b-sheen 6s ease-in-out infinite; }
  :root:not([data-qmode="light"]) .hx.bx::before { animation: b2b-breathe 9s ease-in-out infinite; }
}
}
@keyframes b2b-sheen { 50% { background-position: 100% 0; } }
@keyframes b2b-breathe { 50% { scale: 1.1; opacity: .8; } }

/* ---------- Full videos, coming soon (3 Nov 2026) ---------- */
.go-tag { display: inline-block; vertical-align: 2px; margin-left: 6px; font: 700 10.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 8px; }
.go-c.go-soon { border-style: dashed; }
.fv { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.fv-stage { position: relative; justify-self: center; width: 100%; max-width: 300px; }
.fv-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; border: 1px solid var(--line2); background: var(--surface2); box-shadow: 0 18px 50px rgba(2, 6, 23, .35); }
.fv-tag { position: absolute; left: 10px; bottom: 10px; font: 700 11px/1 var(--f-body); letter-spacing: .04em; color: #F8FAFC; background: rgba(2, 6, 23, .72); border-radius: 999px; padding: 6px 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-copy { display: grid; gap: 14px; min-width: 0; }
.fv-copy h2 { margin: 0; text-wrap: balance; }
.fv-sub { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.5; max-width: 60ch; }
.fv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fv-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--soft); }
.fv-steps b { color: var(--ink); }
.fv-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font: 700 13px/1 var(--f-body); }
.fv-form { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.fv-form label { font: 700 15px/1.2 var(--f-body); color: var(--ink); }
.fv-form .wz-site input { font-size: 16px; padding: 12px 14px; }
.fv-fine { margin: 0; font-size: 13px; color: var(--muted); }
.fv-fine.err { color: var(--ink); font-weight: 700; }
.fv-form.done { border-color: var(--accent); }
@media (max-width: 760px) { .fv { grid-template-columns: minmax(0, 1fr); } .fv-stage { max-width: 240px; } }
.fv-trap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.pv-src b { overflow-wrap: anywhere; }

/* ---------- Accents (3 Nov 2026, Justin: "a little more color variation with the pills and graphics") ----------
   Teal stays the brand. Amber, violet and sky vary step numbers, section labels and graphics. No red. Light values are
   darker so text on white keeps its contrast. */
:root { --c-teal: var(--ms-5); --c-amber: #B45309; --c-violet: #6D28D9; --c-sky: #0369A1; }
@media (prefers-color-scheme: dark) { :root:not([data-qmode="light"]) { --c-teal: var(--ms-2); --c-amber: #F5B544; --c-violet: #A78BFA; --c-sky: #38BDF8; } }
:root[data-qmode="dark"] { --c-teal: var(--ms-2); --c-amber: #F5B544; --c-violet: #A78BFA; --c-sky: #38BDF8; }
.go-g > :nth-child(4n+1), .ql-steps > li:nth-child(4n+1), .diy-steps > li:nth-child(1), .ql-eng > :nth-child(1) { --c: var(--c-teal); }
.go-g > :nth-child(4n+2), .ql-steps > li:nth-child(4n+2), .ways-g > :nth-child(1), .fv-steps > li:nth-child(1), .diy-steps > li:nth-child(2), .ql-eng > :nth-child(2) { --c: var(--c-amber); }
.go-g > :nth-child(4n+3), .ql-steps > li:nth-child(4n+3), .ways-g > :nth-child(2), .fv-steps > li:nth-child(2), .diy-steps > li:nth-child(3), .ql-eng > :nth-child(3) { --c: var(--c-violet); }
.go-g > :nth-child(4n+4), .ql-steps > li:nth-child(4n+4), .fv-steps > li:nth-child(3) { --c: var(--c-sky); }
.go-n, .way-n { background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); color: var(--c, var(--accent)); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 45%, transparent); }
.go-c:hover { border-color: var(--c, var(--accent)); }
.go-c .go-a { color: var(--c, var(--accent)); }
.fv-n { border-color: var(--c, var(--accent)); color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); }
.ql-steps .ql-n { color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); }
.ql-steps li.on .ql-n { background: var(--c, var(--accent)); color: var(--surface); }
.ql-steps li.on button { background: color-mix(in srgb, var(--c, var(--accent)) 9%, transparent); }
#proven-ads .section-head .eyebrow { color: var(--c-amber); }
#proven-systems .section-head .eyebrow, .rw-eye { color: var(--c-violet); }
#full-videos .eyebrow { color: var(--c-sky); }
.ps2-m { color: var(--c-violet); }
.hx-dot { background: linear-gradient(135deg, var(--c-teal), var(--c-sky) 55%, var(--c-violet)); }

/* ---------- Make it yourself (diy.js) ---------- */
.diy-card { width: min(720px, 100%); }
.wz.diy { z-index: 190; } /* the email gate (z 200) opens above it on the first copy */
.diy { gap: 14px; }
.diy .eyebrow { color: var(--c-amber); }
.diy-firm { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--soft) 45%, transparent); background: color-mix(in srgb, var(--soft) 6%, transparent); font-size: 14.5px; color: var(--soft); }
.diy-firm .btn-text { font-weight: 700; color: var(--ink); }
.diy-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 18px; }
.diy-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.diy-steps > li > div { display: grid; gap: 8px; min-width: 0; }
.diy-steps b { font-size: 17px; color: var(--ink); }
.diy-steps p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; }
.diy-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 800 15px/1 var(--f-body); color: var(--surface); background: var(--c, var(--accent)); }
.diy .prompt pre { max-height: 132px; }
.diy .prompt.open pre { max-height: none; } .diy .prompt.open pre::after { display: none; }
.diy .prompt.short pre { max-height: none; } .diy .prompt.short pre::after { display: none; }
.diy .more { border: 0; background: none; color: var(--muted); font: 600 13px/1 var(--f-body); padding: 0 18px 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.diy-call { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); font-size: 14.5px; color: var(--soft); }
.diy-call b { color: var(--ink); }
.diy-call-go { font: 700 14.5px/1 var(--f-body); color: var(--c-violet); text-decoration: none; white-space: nowrap; }
.diy-call-go:hover { text-decoration: underline; }

/* ---------- How the video engine works (leads band, 3 Nov 2026) ---------- */
.ql-eng-wrap { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.ql-eng-h { margin: 0; font: 700 12px/1.3 var(--f-code); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ql-eng { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ql-eng li { padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); background: color-mix(in srgb, var(--c) 7%, transparent); display: grid; gap: 6px; align-content: start; font-size: 14px; line-height: 1.45; color: var(--soft); min-width: 0; }
.ql-eng li b { color: var(--ink); font-size: 15px; }
.ql-eng li i { font-style: normal; font: 700 11px/1 var(--f-code); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
@media (max-width: 760px) { .ql-eng { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hook proof (3 Nov 2026): tier colors and the proof sheet ---------- */
:root .pl-b.pl-t1 { background: color-mix(in srgb, var(--soft) 14%, transparent); color: var(--soft); }
:root .pl-b.pl-t2 { background: color-mix(in srgb, var(--c-sky) 16%, transparent); color: var(--c-sky); }
:root .pl-b.pl-t3 { background: color-mix(in srgb, var(--c-violet) 18%, transparent); color: var(--c-violet); }
:root .pl-b.pl-t4 { background: color-mix(in srgb, var(--c-amber) 20%, transparent); color: var(--c-amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-amber) 45%, transparent); }
.sc-proof { position: relative; z-index: 2; border: 0; background: none; padding: 0; margin: 0; text-align: left; cursor: pointer; color: inherit; align-items: center; }
.sc-proof:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sc-why { font: 700 11.5px/1 var(--f-body); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; letter-spacing: 0; }
.sc-proof:hover .sc-why { text-decoration-color: var(--accent); }
.pfd { max-width: min(480px, calc(100vw - 32px)); }
.pfd-shape { margin: -4px 0 0; color: var(--soft); font-size: 15px; line-height: 1.45; }
.pfd-tier { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--muted); }
.pfd-tier b { color: var(--ink); font-size: 14.5px; }
.pfd-tier > span:last-child { flex-basis: 100%; }
.pfd-bars { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pfd-bars li { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.pfd-l { color: var(--soft); line-height: 1.25; min-width: 0; }
.pfd-l i { font-style: normal; font: 700 10px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); display: block; margin-top: 3px; }
.pfd-b { height: 12px; border-radius: 6px; background: var(--surface2); overflow: hidden; }
.pfd-b i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c-teal), var(--c-sky)); }
.pfd-bars li:first-child .pfd-b i { background: linear-gradient(90deg, var(--c-teal), var(--c-amber)); }
.pfd-bars b { font: 700 13.5px/1 var(--f-code); font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; }
.pfd-key { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
@media (max-width: 420px) { .pfd-bars li { grid-template-columns: minmax(0, 92px) minmax(0, 1fr) auto; } }

/* ---------- Why it's a winner (proven ad breakdown, 3 Nov 2026) ---------- */
.pv-bd > summary { font-size: 15px; }
.pv-win { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.pv-win > div { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.pv-win h4 { margin: 0; font: 600 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-win-proof { background: color-mix(in srgb, var(--c-amber) 6%, transparent); border-color: color-mix(in srgb, var(--c-amber) 30%, var(--line)) !important; }
.pv-win-big { margin: 0; font-size: 15px; color: var(--soft); }
.pv-win-big b { display: block; font: 800 clamp(34px, 4vw, 44px)/1 var(--f-display); letter-spacing: -.03em; color: var(--c-amber); }
.pv-vs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.pv-vs b { font: 700 13px/1 var(--f-code); color: var(--ink); text-align: right; }
.pv-vs-b { height: 10px; border-radius: 5px; background: var(--surface2); overflow: hidden; }
.pv-vs-b i { display: block; height: 100%; border-radius: 5px; background: var(--line2); }
.pv-vs-b.hot i { background: linear-gradient(90deg, var(--c-teal), var(--c-amber)); }
.pv-rs { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 10px; }
.pv-rs li { counter-increment: r; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--soft); }
.pv-rs li::before { content: counter(r); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--f-body); color: var(--surface); background: var(--c-violet); }
.pv-rs li:nth-child(2)::before { background: var(--c-sky); } .pv-rs li:nth-child(3)::before { background: var(--c-teal); }
.pv-rs li b { color: var(--ink); }
.pv-win-f .pv-shape { margin: 0; font-weight: 700; font-size: 15px; }
.pv-steps3 { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--soft); }
.pv-steps3 i { font-style: normal; color: var(--muted); font-size: 12px; }
.pv-more { margin-top: 12px; }
.pv-more > summary { cursor: pointer; font: 600 13.5px/1.3 var(--f-body); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.pv-more > summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) { .pv-win { grid-template-columns: minmax(0, 1fr); } }

/* Full videos / Pieces groups at the front of the filter bar (3 Nov) */
.filters .f-grp { font-weight: 800; padding: 10px 16px; border-color: color-mix(in srgb, var(--c-amber) 55%, var(--line)); }
.filters .f-grp[data-f="g-parts"] { border-color: color-mix(in srgb, var(--c-sky) 55%, var(--line)); }
.filters .f-grp[aria-pressed="true"] { background: var(--c-amber); border-color: var(--c-amber); color: var(--bg); }
.filters .f-grp[data-f="g-parts"][aria-pressed="true"] { background: var(--c-sky); border-color: var(--c-sky); }
.filters .f-sep { width: 1px; align-self: stretch; background: var(--line2); margin: 2px 4px; }
@media (max-width: 560px) { .filters .f-sep { flex-basis: 100%; width: auto; height: 0; background: none; margin: 0; } }

/* Make it yourself: the video prompt is editable (3 Nov) */
.diy .diy-ed .prompt-bar label { font: 600 12px/1.3 var(--f-code); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.diy .diy-ta { display: block; width: 100%; box-sizing: border-box; min-height: 220px; max-height: 46vh; resize: vertical; padding: 14px 16px; border: 0; border-radius: 0 0 12px 12px; background: var(--surface2); color: var(--ink); font: 13px/1.55 var(--f-code); }
.diy .diy-ta:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.diy .diy-ed-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* Full videos shelf + hook detail sheet (3 Nov 2026, assets/fullvideos.js). */
.fv-sec { margin-bottom: 56px; }
.fv-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fv-c { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.fv-c:hover { border-color: var(--accent); transform: translateY(-2px); }
.fv-c:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fv-c.fv-soon { cursor: default; }
.fv-c.fv-soon:hover { border-color: var(--line); transform: none; }
.fv-c.fv-soon .fv-tile { opacity: .55; }
.fv-c.fv-soon .fv-go { background: transparent; color: var(--muted); border: 1px dashed var(--line2); }
.fv-tile { aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; background: var(--surface2); }
.fv-tile .player { height: 100%; aspect-ratio: 9 / 16; }
.fv-tile.off { background: radial-gradient(70% 60% at 50% 40%, var(--accent-soft), transparent 70%), var(--surface2); }
.fv-b { display: grid; gap: 10px; align-content: start; padding: 18px 20px 20px; }
.fv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fv-kind { font: 600 12px/1 var(--f-code); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 10px; color: var(--muted); }
.fv-x { display: grid; justify-items: end; font: 800 22px/1 var(--f-code); color: var(--accent); font-variant-numeric: tabular-nums; }
.fv-x small { font: 600 11px/1.3 var(--f-body); color: var(--muted); }
.fv-t { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.fv-b p { margin: 0; color: var(--soft); font-size: 15px; }
.fv-b .fv-proof { color: var(--ink); font-weight: 700; font-size: 14px; }
.fv-path { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; counter-reset: fp; }
.fv-path li { counter-increment: fp; font: 600 12px/1 var(--f-body); color: var(--muted); padding: 6px 8px; border-radius: 6px; background: var(--surface2); }
.fv-path li::before { content: counter(fp) " "; color: var(--accent); font-family: var(--f-code); }
.fv-go { justify-self: start; margin-top: 4px; font: 700 15px/1 var(--f-body); padding: 12px 16px; border-radius: 10px; background: var(--accent); color: var(--surface); }
.fv-more-w { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.fv-more-w > span { font: 700 13px/1 var(--f-body); color: var(--muted); }
.fv-more { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-more a { font: 600 14px/1 var(--f-body); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line2); color: var(--soft); text-decoration: none; }
.fv-more a:hover { border-color: var(--accent); color: var(--ink); }
.fv-more a.fv-all { color: var(--accent); border-color: var(--accent); }
.sc-get-q { opacity: .8; }
a.vb-req { display: inline-block; text-align: center; text-decoration: none; }
@media (max-width: 980px) { .fv-g { grid-template-columns: 1fr; max-width: 560px; } .fv-tile { aspect-ratio: 16 / 10; } }

dialog.hkd { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line2); border-radius: 20px; background: var(--surface); color: var(--ink); }
dialog.hkd::backdrop { background: rgba(2, 6, 23, .72); backdrop-filter: blur(4px); }
.hkd-in { position: relative; padding: 26px 28px 24px; }
.hkd-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: var(--surface2); color: var(--ink); font-size: 16px; cursor: pointer; }
.hkd h2 { margin: 6px 0 6px; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.hkd-shape { margin: 0 0 16px; font-size: 18px; color: var(--soft); max-width: 60ch; }
.hkd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.hkd-stats div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); display: grid; gap: 4px; }
.hkd-stats dd { margin: 0; font: 800 24px/1 var(--f-code); color: var(--accent); }
.hkd-stats dt { font: 600 12.5px/1.3 var(--f-body); color: var(--muted); }
.hkd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hkd-cols h3 { margin: 0 0 12px; font-size: 17px; }
.hkd-why { margin: 0 0 14px; font-size: 15px; color: var(--soft); }
.hkd-why span, .hkd-won > span { display: block; font: 700 11px/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.hkd-won { margin: 0 0 14px; }
.hkd-won ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hkd-won li { display: grid; grid-template-columns: minmax(0, 150px) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.hkd-won b { font-weight: 600; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hkd-won i { display: block; height: 8px; border-radius: 4px; background: var(--accent); min-width: 4px; }
.hkd-won em { font: 700 13px/1 var(--f-code); font-style: normal; color: var(--ink); }
.hkd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.hkd-tiles figure { margin: 0; display: grid; gap: 6px; }
.hkd-tiles .player { border-radius: 10px; overflow: hidden; }
.hkd-tiles figcaption { font: 600 13px/1.2 var(--f-body); color: var(--muted); }
.hkd-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hkd-lines li { font-size: 14px; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.hkd-lines li span { display: block; font: 700 11px/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hkd-lines li.wait { color: var(--muted); }
.hkd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
.hkd-fine { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .hkd-in { padding: 22px 16px 18px; } .hkd-cols { grid-template-columns: 1fr; } .hkd-stats dd { font-size: 20px; } .hkd-won li { grid-template-columns: minmax(0, 110px) 1fr auto; } }
.fv-ways { margin-top: 22px; }
@media (max-width: 520px) { .hkd-stats { grid-template-columns: 1fr; } .hkd-stats div { grid-template-columns: auto 1fr; align-items: center; gap: 12px; } }

/* About the firm (3 Nov): four full videos sit two by two on wide screens */
@media (min-width: 981px) { .fv-g:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Studio v2 flow (3 Nov 2026): steps 1 to 5, real logo, save, More ---------- */
.st-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--accent); color: var(--surface); font: 800 12px/1 var(--f-body); letter-spacing: 0; vertical-align: 1px; }
.beta-pill { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); font: 700 10.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.br-sec .bento { align-items: stretch; }
.br-film { grid-column: span 7; } .br-copy { grid-column: span 5; }
@media (max-width: 900px) { .br-film, .br-copy { grid-column: 1 / -1; } }
.br-film { padding: 0; overflow: hidden; background: var(--stage); display: flex; align-items: center; }
.br-stage { position: relative; width: 100%; overflow: hidden; min-height: 200px; }
.br-stage iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.br-copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.br-copy h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.025em; }
.br-copy p { margin: 0; color: var(--soft); }
.br-copy .br-fine { color: var(--muted); font-size: 14.5px; }
.br-edit { align-self: flex-start; margin-top: 6px; }
.br-rescan { align-self: flex-start; margin-top: 2px; padding-left: 0; padding-right: 0; }
.wz-btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.st-path { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-path li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--soft); font-size: 15px; }
.st-path .st-n { flex: none; margin: 1px 0 0; }
.sv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 40px); align-items: center; }
.sv h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 8px 0; }
.sv-copy p { margin: 0; color: var(--soft); }
.sv-act { display: grid; gap: 12px; min-width: 0; }
.sv-go { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.sv-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 100%; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 12px; min-width: 0; }
.sv-link a { font: 600 14px/1.4 var(--f-code); overflow-wrap: anywhere; min-width: 0; }
.sv-form { display: grid; gap: 6px; width: 100%; }
.sv-form label { font-weight: 700; font-size: 14px; }
.sv-form .wz-site { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-form input { flex: 1 1 200px; min-width: 0; font: 16px/1.3 var(--f-body); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--surface2); color: var(--ink); }
.sv-msg, .sv-need { margin: 0; color: var(--muted); font-size: 14px; }
.more-head { padding-top: 12px; border-top: 1px solid var(--line); }
.more-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.more-nav a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.more-nav a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) {
  .st-path, .sv { grid-template-columns: 1fr; }
}
.sv-link[hidden], .sv-go[hidden], .sv-need[hidden] { display: none; }
.fv-go .beta-pill { color: inherit; border-color: currentColor; opacity: .75; }

/* Colors found on the firm's site + eyedropper (wizard step 3, 3 Nov 2026) */
.wz-found > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wz-chip { width: 34px; height: 34px; border-radius: 10px; background: var(--c); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); cursor: pointer; padding: 0; }
.wz-chip:hover, .wz-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wz-drop { font: 600 13px/1 var(--f-body); padding: 9px 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); background: transparent; color: var(--ink); cursor: pointer; }
.wz-found small { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* Wizard step 4: voice questions; the old build questions sit in a collapsed block */
.wz-more-q { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding-top: 12px; }
.wz-more-q > summary { cursor: pointer; font-weight: 700; color: var(--soft); }
.wz-more-q > summary small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.wz-q legend small { font-weight: 500; color: var(--muted); margin-left: 6px; }

/* Setup end: straight into a first video (4 Nov 2026) */
.wz-first { display: grid; gap: 6px; margin: 18px 0 4px; padding: 16px; border: 1px solid var(--accent); border-radius: 14px; background: var(--accent-soft, transparent); text-align: left; }
.wz-first b { font-size: 16px; } .wz-first small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.wz-first > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wz-first .wz-btn { text-decoration: none; }
/* 7 Nov: a real firm's Done screen leads with one button, no box around it. */
.wz-first.one { display: flex; justify-content: center; border: 0; background: none; padding: 0; margin: 22px 0 8px; }
.wz-first.one .wz-btn { font-size: 17px; padding: 16px 28px; }
.wz-end .v2-kit .wz-btn.ghost { margin-top: 6px; }
.wz-kitmail { display: grid; gap: 6px; margin: 4px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; text-align: left; }
.wz-kitmail b { font-size: 15px; } .wz-kitmail small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.wz-kitmail > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wz-kitmail input { flex: 1 1 200px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2, transparent); color: var(--ink); font: 500 15px/1.3 var(--f-body, inherit); }
.wz-kitmail .wz-kitmsg:empty { display: none; }

/* ---------- Your style (5 Nov 2026): 4 style sheets + 3 dials, live preview. assets/firm-style.js ---------- */
.fs.bx { display: grid; gap: 18px; padding: clamp(18px, 2.6vw, 28px); }
.fs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 28px; align-items: end; }
.fs-head h2 { margin: 6px 0 0; }
.fs-head p { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.5; }
.fs-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 28px; align-items: start; }
.fs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fs-card { display: grid; gap: 6px; align-content: start; padding: 8px 8px 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s cubic-bezier(.16, 1, .3, 1); }
.fs-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fs-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-sw { position: relative; display: block; height: 104px; border-radius: 10px; padding: 14px 14px 0; overflow: hidden; border: 1px solid var(--line); }
.fs-sw > span { position: relative; z-index: 1; display: block; max-width: 92%; }
.fs-sw > i { position: absolute; left: 14px; right: 30%; bottom: -10px; height: 34px; }
.fs-n { font-size: 15px; padding: 2px 4px 0; color: var(--ink); }
.fs-card small { font-size: 12.5px; line-height: 1.4; color: var(--muted); padding: 0 4px; }
.fs-dials { display: grid; gap: 10px; margin: 16px 0 0; }
.fs-dial { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 10px; }
.fs-dial > span { font: 700 13px/1.2 var(--f-body); color: var(--muted); }
.fs-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); justify-self: start; }
.fs-seg button { border: 0; border-radius: 9px; padding: 9px 14px; background: transparent; color: var(--soft); font: 700 14px/1 var(--f-body); cursor: pointer; }
.fs-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line2), 0 4px 12px -6px var(--shade); }
.fs-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fs-now { margin: 14px 0 0; font-size: 14px; color: var(--muted); } .fs-now b { color: var(--ink); }
.fs-fine { margin: 4px 0 0; font-size: 13px; color: var(--muted); } .fs-fine:empty { display: none; }
.fs-live { position: sticky; top: 16px; display: grid; gap: 10px; justify-items: center; }
.fs-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); }
.fs-tabs button { border: 0; border-radius: 9px; padding: 9px 12px; background: transparent; color: var(--muted); font: 700 13.5px/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.fs-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line2); }
.fs-view { position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--surface2); border: 1px solid var(--line); box-shadow: 0 24px 50px -28px var(--shade); }
.fs-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.fs-soon { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 20px; text-align: center; color: var(--muted); font-size: 14px; }
.fs-soon b { color: var(--ink); font-size: 17px; }
.fs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); } .fs-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.fs-ctl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fs-ctl .wz-btn { padding: 11px 16px; font-size: 15px; }
.fs-ctl .wz-btn.ghost.on { color: var(--accent); }
.fs-ctl .wz-btn[disabled] { opacity: .5; cursor: default; }
.fs-msg { font-size: 12.5px; color: var(--muted); text-align: center; max-width: 34ch; line-height: 1.45; }
.fv-tile:has(> iframe.fv-sheet) { position: relative; }
.fv-tile iframe.fv-sheet { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; aspect-ratio: 9 / 16; border: 0; display: block; pointer-events: none; }
@media (max-width: 860px) {
  .fs-head, .fs-g { grid-template-columns: minmax(0, 1fr); }
  .fs-live { position: static; order: -1; }
  .fs-view { max-width: 240px; }
}
@media (max-width: 420px) { .fs-cards { gap: 8px; } .fs-sw { height: 88px; padding: 10px 10px 0; } .fs-dial { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .fs-card { transition: none; } }
.fs-soon[hidden] { display: none; }
@media (max-width: 520px) { .fs-sw > span { font-size: 15px !important; } .fs-sw { height: 80px; } .fs-card small { font-size: 12px; } }

/* ---------- Studio home: 3 ways to make a video + Library tab (library cleanup, 6 Nov 2026) ---------- */
.mw-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.mw-c { display: grid; gap: 8px; align-content: start; padding: 20px; text-decoration: none; color: inherit; border: 1px solid var(--line); transition: border-color .2s ease, transform .2s ease; }
a.mw-c:hover, a.mw-c:focus-visible { border-color: var(--accent, var(--ms-2)); transform: translateY(-2px); }
.mw-c b { font-size: 18px; line-height: 1.25; }
.mw-c p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.mw-n { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; border: 1px solid currentColor; color: var(--accent, var(--ms-2)); }
.mw-go { font-weight: 700; font-size: 14px; color: var(--accent, var(--ms-2)); margin-top: 4px; }
.mw-soon { cursor: default; }
.mw-soon .mw-n, .mw-soon .mw-go { color: var(--muted); }
.mw-h { font-size: 20px; margin: 0 0 14px; scroll-margin-top: 90px; }
.sc-get.sc-soon { color: var(--muted); font-weight: 600; }
#parts .anchor { display: block; position: relative; top: -90px; visibility: hidden; height: 0; }
#parts .section-head .lib-make { display: inline-flex; width: auto; max-width: 100%; margin-top: 12px; text-decoration: none; }
@media (max-width: 860px) { .mw-g { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mw-c { transition: none; } a.mw-c:hover { transform: none; } }

/* Our videos in tabs that turn on their own (Justin 7 Nov 2026, realwork.js). */
.rw-picks[hidden] { display: none; }
.rw-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.rw-picks button { position: relative; overflow: hidden; display: grid; gap: 4px; text-align: left; font: inherit; color: var(--band-ink, var(--ink)); padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); cursor: pointer; }
.rw-picks button small { font: 600 11px/1 var(--f-code); letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted, var(--muted)); }
.rw-picks button b { font: 700 15px/1.25 var(--f-display); }
.rw-picks button[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 0 2px 0 var(--accent); }
.rw-picks button::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.rw-turning button.rw-tick[aria-selected="true"]::before { opacity: .7; animation: rw-turn var(--rw-turn, 7s) linear both; }
@keyframes rw-turn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rw-top.rw-tabbed { grid-template-columns: minmax(0, 1fr); }
.rw-top.rw-tabbed > .rw-card { grid-column: 1; grid-row: 1; }
.rw-top.rw-tabbed .rw-card[hidden] { display: none; }
.rw-top.rw-tabbed .rw-stage { aspect-ratio: 16 / 9; background: #000; }
.rw-top.rw-tabbed .rw-stage video { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) { .rw-picks { grid-template-columns: minmax(0, 1fr); gap: 8px; } .rw-picks button { padding: 12px 14px; } }
@media (prefers-reduced-motion: reduce) { .rw-turning button.rw-tick[aria-selected="true"]::before { animation: none; opacity: 0; } }

/* The call band (Justin 7 Nov 2026): the studio's one ask, matched to the firm page. */
.ms-call { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 14px; padding: 56px 24px; margin-top: 24px; }
.ms-call::before { content: ""; position: absolute; left: 50%; top: 55%; width: 760px; height: 360px; translate: -50% -50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.ms-call > * { position: relative; }
.ms-call h2 { margin: 0; max-width: 22ch; font: 800 clamp(28px, 3.6vw, 40px)/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.ms-call .ms-mk { color: var(--accent); }
.ms-call p { margin: 0; max-width: 54ch; color: var(--soft); font-size: 17px; }
.ms-call ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; color: var(--soft); font-size: 15.5px; }
.ms-call li { padding-left: 26px; position: relative; }
.ms-call li::before { content: ""; position: absolute; left: 4px; top: .35em; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.ms-call-btn { margin-top: 10px; text-decoration: none; display: inline-block; }
.wz-kitmail[hidden] { display: none; }

/* "Edit your firm" > Proof on your end card (assets/lib/firm-proof.js, 7 Nov 2026) */
#f-proof .pf-note { margin: 8px 0 10px; font: 500 13px/1.4 var(--f-body); color: var(--muted); }
#f-proof .pf-line { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
#f-proof .pf-line:first-of-type { border-top: 0; }
#f-proof .pf-line:not(.on) .pf-two { opacity: .55; }
.side #f-proof .pf-two { grid-template-columns: 1fr 1fr; }