/* ============================================================================================
   Review Reels · app pages
   THE SET: near-black warm floor, one gold key light from above, a faint ice fill bottom-right, a
   soft vignette and grain. SET DRESSING: warm-charcoal sheets, wells and hairlines that never
   compete. PRODUCT: the phone standing in the light on a floor glow, and the one gold action.
   Gold is the light and the action; ice carries information.

   MOTION BUDGET: movement is transform/opacity only. Colour crossfades on controls may transition
   background/border-color at 160 ms. Never animate width, height, top, left, box-shadow, filter or
   clip-path. Exceptions, documented: the progress bar transitions width (it reports real progress)
   and the mobile studio's pinned stage transitions width at 200 ms. No tween longer than 400 ms;
   a page take may last ~600 ms through overlap but no element moves for more than 360 ms. Exits
   are 60-70 % of entrances. Everything is off under prefers-reduced-motion: final states render
   immediately and no key light, tilt or magnet listener is attached.

   FONTS: the four files are static cuts (Fraunces roman 680, Fraunces italic 560, Instrument Sans
   450 and 640), so hierarchy comes from size, italic, colour and space, never from weight axes.

   SECTIONS: 1 tokens · 2 base + the set · 3 type · 4 layout · 5 nav · 6 page head · 7 surfaces ·
   8 buttons · 9 inputs and controls · 10 pills, tags, messages · 11 phone frames · 12 tables ·
   13 skeletons · 14 overlays · 15 dashboard · 16 brand kit · 17 library · 18 result · 19 studio ·
   20 terms · 21 legacy · 22 motion.

   HOOKS FOR PAGE MARKUP (all optional, all presentational):
     <span class="em-mask"><em>word</em></span>   the h1's foil word, rising from below its baseline
     <span class="spec">…</span> × n               a spec list (hairline separators, replaces " · ")
     <div class="phone-glow" aria-hidden="true">   floor glow; place it right AFTER the stage phone
     .live-pill · .login-lock / .icon-tile · .well · body.terms-page · .tile .ic svg · .drop-icon svg
   app.js wires the rest by id on DOMContentLoaded (RR.stagecraft): the key light on every page, tilt on
   #stage / #phone-frame / #live-stage, and the magnet on [data-magnet], else #create, #share or the page
   head's primary. RR.keylight(), RR.tilt(stage, phone) and RR.magnet(el) are idempotent if called again.
   ============================================================================================ */
@font-face { font-family: "Fraunces L"; src: url("/static/fonts/landing/Fraunces-Display.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces L"; src: url("/static/fonts/landing/Fraunces-DisplayItalic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans L"; src: url("/static/fonts/landing/InstrumentSans-Regular.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Instrument Sans L"; src: url("/static/fonts/landing/InstrumentSans-Semibold.woff2") format("woff2"); font-weight: 501 900; font-display: swap; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 98%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }

/* ---- 1. tokens ------------------------------------------------------------------------------ */
:root {
  /* set: floor and light */
  --bg: #070708; --bg-deep: #030304;
  --key: 232,176,75;              /* gold key light: rgba(var(--key), a) */
  --fill: 156,195,230;            /* faint ice fill: rgba(var(--fill), a) */

  /* surfaces: warm charcoal, never blue-black */
  --surface-0: #0c0b0c;           /* wells: inputs, caption boxes, message templates, seg track */
  --surface-1: #121113;           /* sheets: cards, plans, steps, modal */
  --surface-2: #18171a;           /* menus, toast, results dropdown, chips, skeleton base */
  --surface-3: #1f1d20;           /* hover of surface-2, seg thumb, toggle track, drop icon tile */

  /* text (muted 5.5:1 on surface-1, muted-2 4.6:1 on bg) */
  --text: #f4f1ea; --text-2: #d2cdc2; --muted: #9a968c; --muted-2: #7d7a72;

  /* hairlines: structure comes from rules, not shadows */
  --hair: rgba(244,241,234,.08); --hair-2: rgba(244,241,234,.14); --hair-3: rgba(244,241,234,.24);
  --hair-gold: rgba(232,176,75,.40);

  /* gold scale + foil */
  --gold-100: #fbe9bf; --gold-300: #f3c66a; --gold-500: #e8b04b; --gold-700: #c48d2c; --gold-900: #5a3f14;
  --gold: var(--gold-500); --gold-2: var(--gold-300); --gold-ink: #1b1508;
  --gold-soft: rgba(232,176,75,.12); --gold-line: var(--hair-gold);
  --foil: linear-gradient(180deg, #f7d98e 0%, #e8b04b 46%, #c48d2c 100%);
  --foil-btn: linear-gradient(180deg, #f3c66a 0%, #e8b04b 55%, #d9a03c 100%);
  --foil-slide: linear-gradient(180deg, #f9dc95 0%, #f3c66a 39.4%, #e8b04b 72.7%, #d9a03c 100%);   /* buttons: drawn at 165 % height; the lower 60 % is exactly --foil-btn, hover slides up to the brighter top */
  --sheen: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);

  /* supporting tones */
  --ice: #9cc3e6; --ice-soft: rgba(156,195,230,.10); --ice-line: rgba(156,195,230,.32);
  --ok: #8fd8ac; --ok-soft: rgba(143,216,172,.12); --ok-line: rgba(143,216,172,.32);
  --danger: #ef8a8a; --danger-soft: rgba(239,138,138,.10); --danger-line: rgba(239,138,138,.32); --danger-fill: #c94b4b;

  /* light (pre-blurred gradients, never filter: blur) */
  --set: radial-gradient(60% 42% at 50% -8%, rgba(var(--key),.10), transparent 70%),
         radial-gradient(45% 36% at 100% 100%, rgba(var(--fill),.045), transparent 70%);
  --vignette: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.5) 100%);
  --keylight: radial-gradient(closest-side, rgba(var(--key),.10), rgba(var(--key),.035) 45%, transparent 70%);
  --stage-key: radial-gradient(70% 55% at 50% 0%, rgba(var(--key),.18), transparent 70%);
  --stage-floor: radial-gradient(90% 80% at 50% 110%, rgba(0,0,0,.6), transparent);
  --floor-glow: radial-gradient(50% 50% at 50% 50%, rgba(var(--key),.38), transparent 70%);
  --card-light: linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%);
  --scrim-bottom: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.62));

  /* spacing (4-base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px; --s-11: 120px;

  /* radii: a hierarchy */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --r-phone: 34px; --r-screen: 26px; --r-pill: 999px;

  /* shadows: static, never transitioned, only under phones and floating panels */
  --shadow-pop: 0 24px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-phone: 0 40px 90px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.10), inset 0 0 0 1px rgba(0,0,0,.6);
  --shadow-stage: 0 60px 120px -40px rgba(0,0,0,.95), 0 30px 80px -30px rgba(var(--key),.28);
  --shadow-thumb: 0 30px 60px -34px rgba(0,0,0,.95), 0 24px 40px -30px rgba(var(--key),.25);
  --shadow-gold: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(110,72,10,.35), 0 12px 30px -14px rgba(var(--key),.6);
  --inset: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
  --ring: 0 0 0 3px var(--gold-soft);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1); --ease-in: cubic-bezier(.5,0,.8,.2); --ease-spring: cubic-bezier(.3,1.4,.4,1);
  --t-press: 100ms; --fast: 160ms; --med: 240ms; --t-enter: 320ms; --t-sheen: 380ms;

  /* layout. viewport-fit=cover lets the page reach under a notch, so the side gutters are the larger of the
     design gutter and the safe area: in landscape on an iPhone nothing sits under the sensor housing. Anything
     that used to pull itself out to the screen edge with -var(--gutter) uses -var(--pad-l) / -var(--pad-r). */
  --container: 1120px; --gutter: 24px;
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));

  /* fonts */
  --display: "Fraunces L", "Fraunces Fallback", Georgia, serif;
  --sans: "Instrument Sans L", "Instrument Sans Fallback", system-ui, sans-serif;

  /* icons (inline data URIs: zero requests) */
  --i-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a968c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --i-caret-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b04b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>");
  --i-back: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a968c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M12 5l-7 7 7 7'/></svg>");
  --i-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd8ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>");
  --i-check-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2216' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>");
  --i-check-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1508' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>");
  --i-pin: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b04b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6-5.3-6-11a6 6 0 0 1 12 0c0 5.7-6 11-6 11z'/><circle cx='12' cy='10' r='2.2'/></svg>");
  --i-kebab: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='5' cy='12' r='1.6' fill='%23f4f1ea'/><circle cx='12' cy='12' r='1.6' fill='%23f4f1ea'/><circle cx='19' cy='12' r='1.6' fill='%23f4f1ea'/></svg>");
  --i-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='%23f4f1ea' fill-opacity='.85'/></svg>");
  --i-plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b04b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
  --i-lock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b04b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");
  --i-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e8b04b' stroke-width='1.8' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");

  /* legacy aliases so every existing rule keeps resolving */
  --bg-2: var(--surface-0); --bg-3: var(--surface-2); --surface: var(--surface-1);
  --line: var(--hair); --line-2: var(--hair-2); --line-3: var(--hair-3);
  --r: var(--r-md); --shadow: inset 0 1px 0 rgba(255,255,255,.04);
  --accent: var(--gold); --accent-2: var(--gold-2); --accent-ink: var(--gold-ink); --accent-soft: var(--gold-soft);
}

/* ---- 2. base + the set ----------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }   /* no background here: body's must propagate so the key light sits under everything */
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; background: url("/static/landing/grain.png") repeat; background-size: 128px 128px; opacity: .028; pointer-events: none; z-index: 999; mix-blend-mode: overlay; }
body::after { content: ""; position: fixed; inset: 0; background: var(--set), var(--vignette); pointer-events: none; z-index: 0; }
.keylight { position: fixed; left: -450px; top: -450px; width: 900px; height: 900px; border-radius: 50%; background: var(--keylight); pointer-events: none; z-index: -1; will-change: transform; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
button { font: inherit; }
code { font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-xs); color: var(--text-2); }
::selection { background: rgba(232,176,75,.28); color: var(--text); }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-r) 112px var(--pad-l); position: relative; z-index: 1; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, label:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ---- 3. type -------------------------------------------------------------------------------- */
h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 5vw, 62px); line-height: .98; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.04; letter-spacing: -.025em; }
h3 { font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
h1 em { font-style: italic; color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .05em; }
}
.em-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .08em .16em 0; margin: 0 0 -.16em 0; }
.em-mask em { display: inline-block; }
p { margin: 0; }
.lede { color: var(--text-2); font-size: 17px; line-height: 1.55; max-width: 58ch; }
.eyebrow { font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.2; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text-2); display: flex; align-items: baseline; gap: 10px; }
.eyebrow i { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: .08em; color: var(--gold); }
.card .eyebrow, .preset-head .eyebrow, .unlock .eyebrow, .kit-live .eyebrow { font-size: 15px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.tiny.muted, .muted-2 { color: var(--muted-2); }
.small.muted { color: var(--muted); }
.spec { display: inline-block; color: var(--text-2); }
.spec:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--hair-3); margin: 0 12px -1px; }   /* trails, so a wrapped line never starts with a rule */
.num, .count, .who, .preview-meta, .price, .tabular, .admin-table td, .copy-table td, #render-info, #ptime, #pv-ms { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- 4. layout ------------------------------------------------------------------------------ */
.grid { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; } .row > .fixed, .row > .pill, .row > .btn { flex: 0 0 auto; }
.between { justify-content: space-between; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.two-col.result { grid-template-columns: 400px minmax(0, 1fr); gap: 40px; }
.sticky { position: sticky; top: 92px; }
.steps, .step, .two-col > * { min-width: 0; }
hr.sep { border: 0; border-top: 1px solid var(--hair); margin: 24px 0; }
.demo-wrap { padding-top: 22px; }
@media (max-width: 960px) { .two-col, .two-col.result { grid-template-columns: minmax(0, 1fr); } .sticky { position: static; } }
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .cols-2 { grid-template-columns: 1fr; }
  .stack-sm > * { flex: 1 1 100%; } .stack-sm .demo-wrap { padding-top: 0; } .stack-sm .btn { width: 100%; }
  .card > .row.between > h3 { flex: 1 1 100%; }
  #form > .row > * { flex: 1 1 100%; }
}

/* ---- 5. nav --------------------------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(7,7,8,.72); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hair-2) 20%, var(--hair-2) 80%, transparent); pointer-events: none; }
.nav .wrap { padding-bottom: 0; }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 18px; }
.brand-mark { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 21px; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark em { color: var(--gold); font-style: italic; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: var(--r-sm); position: relative; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--gold); transform: scaleX(1); transform-origin: left; transition: transform 200ms var(--ease); }
.nav-links a:not(.active)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.nav-links a.btn, .nav-cta.bar { color: var(--gold-ink); background: var(--gold-500) var(--foil-slide) 0 100% / 100% 165% no-repeat; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(110,72,10,.35); }   /* the cast-metal edge without the outer glow: no light leaks across the bar's hairline */
.nav-links a.btn:hover, .nav-cta.bar:hover { color: var(--gold-ink); background-position: 0 0; }
.nav-links a.btn::after { display: none; }
.nav-account { display: flex; align-items: center; gap: 2px; margin: 0 8px 0 4px; padding-left: 12px; border-left: 1px solid var(--hair); }
/* the signed-in name is the door to /account: a quiet link, never a second button in a crowded bar */
.nav-user, .nav-links a.nav-user { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--muted-2); padding: 8px 10px; }
.nav-links a.nav-user:hover { color: var(--text-2); background: rgba(255,255,255,.04); }
.nav-links a.nav-user.active { color: var(--gold-2); }
.nav-signout { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-radius: var(--r-sm); transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.nav-signout:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-signout:focus-visible { outline: 0; box-shadow: var(--ring); }
.nav-links a.nav-upgrade { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; margin-right: 6px; border: 1px solid var(--hair-gold); border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.nav-links a.nav-upgrade b { color: var(--gold-2); font-weight: 600; }
.nav-links a.nav-upgrade::after { display: none; }
.nav-links a.nav-upgrade:hover { background: var(--gold-soft); color: var(--text-2); }
.pro-tag { font-style: normal; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); background: var(--foil-btn); border-radius: var(--r-pill); padding: 2px 7px; line-height: 1.4; }
.look-opt .thumb .pro-tag { position: absolute; top: 8px; right: 8px; z-index: 2; }
.preset .ph .pro-tag { position: absolute; top: 6px; right: 6px; z-index: 3; font-size: 9px; padding: 1px 5px; }
.chips button .pro-tag { margin-left: 8px; }
.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--hair-2); background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--text); transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.nav.open .nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.open .nav-toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (min-width: 761px) { .nav-cta.bar { display: none; } }
@media (max-width: 760px) {
  .nav-in { height: 60px; }
  .nav-toggle { display: inline-flex; }
  .nav-links { position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; align-items: stretch; gap: 0; padding: 6px var(--pad-r) 14px var(--pad-l); background: var(--surface-2); border-bottom: 1px solid var(--hair-2); box-shadow: var(--shadow-pop); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform var(--med) var(--ease), opacity var(--med) var(--ease); max-height: calc(100dvh - 60px); overflow-y: auto; }
  .nav.open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; padding: 14px 0; border-radius: 0; color: var(--text); opacity: 0; transform: translateY(-6px); transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), color var(--fast) var(--ease); }
  .nav-links a + a { border-top: 1px solid var(--hair); }
  .nav-links a:hover { background: transparent; }
  .nav-account { order: 9; justify-content: space-between; margin: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
  .nav-user, .nav-links a.nav-user { max-width: 52vw; font-family: var(--sans); font-size: 14px; letter-spacing: 0; padding: 10px 0; border-top: 0; }
  .nav-links a.nav-user.active { padding-left: 14px; }
  .nav-signout { font-size: 14px; padding: 10px 0 10px 12px; }
  .nav-account { flex-wrap: wrap; row-gap: 10px; }
  .nav-links a.nav-upgrade { flex: 1 0 100%; justify-content: space-between; margin: 0; padding: 10px 14px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; border: 1px solid var(--hair-gold); border-radius: var(--r-md); }
  .nav.open .nav-links a { opacity: 1; transform: none; }
  .nav.open .nav-links a:nth-child(2) { transition-delay: 40ms; } .nav.open .nav-links a:nth-child(3) { transition-delay: 80ms; } .nav.open .nav-links a:nth-child(4) { transition-delay: 120ms; }
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--gold); padding-left: 18px; }
  .nav-links a.active::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold); }
  .nav-links .nav-cta { display: none; }
  .nav-cta.bar { display: inline-flex; margin-left: auto; }
}

/* ---- 6. page head --------------------------------------------------------------------------- */
.page-head { padding: 48px 0 28px; border-bottom: 1px solid var(--hair); margin-bottom: 32px; }
.page-head h1 { margin: 12px 0 12px; }
.page-head .lede { margin-top: 0; }
.page-head .row.between { align-items: flex-end; }
.back { display: flex; width: max-content; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; margin-bottom: 20px; transition: color var(--fast) var(--ease); }
.back:hover { color: var(--text); }
.back::before { content: ""; width: 14px; height: 14px; background: var(--i-back) center / contain no-repeat; opacity: .9; transition: transform var(--fast) var(--ease); }
.back:hover::before { transform: translateX(-2px); }
.studio-head h1 { margin: 6px 0 0; }
.studio-head .row.between { align-items: flex-end; }
.brand-pick label { margin: 0 0 6px; }
.brand-pick select { width: auto; min-width: 240px; height: 44px; padding-top: 10px; padding-bottom: 10px; }
.page-head select { height: 44px; padding-top: 10px; padding-bottom: 10px; }
/* under 760 the head stacks: copy first, then its control at full width (must follow the flex-end rules above) */
@media (max-width: 760px) {
  .page-head .row.between, .studio-head .row.between { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .page-head .row.between > * { flex: 0 0 auto; }
  .page-head .row.between > .btn { width: 100%; }
  .page-head .row.between > .fixed.row { flex-direction: row; flex-wrap: wrap; }
  .page-head .row.between > .fixed.row > select { flex: 1 1 100%; min-width: 0; }
  .page-head .row.between > .fixed.row > .btn { flex: 1 1 100%; }
  .brand-pick select { width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
  .page-head { padding: 28px 0 20px; margin-bottom: 24px; }
  .page-head h1 { margin: 10px 0 10px; }
  .eyebrow { font-size: 16px; }
  .lede { font-size: 16px; }
}

/* ---- 7. surfaces: sheet, stage, well ------------------------------------------------------- */
.card { background: var(--card-light), var(--surface-1); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 28px; box-shadow: none; }
.card + .card { margin-top: 20px; }
.grid > .card, .lib-grid > .card, .steps > .card { margin-top: 0; }   /* grids space their own children */
.card.pad-lg { padding: 36px; }
.card.lift { transition: border-color var(--fast) var(--ease); }
.card.lift:hover { border-color: var(--hair-2); }
.card > .row.between:first-child { padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: 18px; }
.card > .row.between:first-child > h3 { margin: 0; }
.card > p.muted, .card > p.small { color: var(--text-2); }
.card p { max-width: 66ch; }
@media (max-width: 600px) { .card { padding: 20px; } .card.pad-lg { padding: 24px; } }

.stage { position: relative; padding: 32px 32px 20px; border-radius: var(--r-xl); border: 1px solid var(--hair); overflow: hidden; background: var(--stage-key), var(--stage-floor), var(--surface-1); }
.stage::before { content: ""; position: absolute; inset: 0; background: url("/static/landing/grain.png") repeat; background-size: 128px 128px; opacity: .06; pointer-events: none; mix-blend-mode: overlay; }
.stage::after, .kit-live::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(244,241,234,.07); border-radius: var(--r-lg); pointer-events: none; }
.stage > * { position: relative; }

.well, .tpl, .caption-box, .reading, .review-card, .picked, .drop, .tile { background: var(--surface-0); border: 1px solid var(--hair); border-radius: var(--r-md); box-shadow: var(--inset); }

/* ---- 8. buttons ----------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 22px; border: 0; border-radius: var(--r-md);
  background: var(--gold-500) var(--foil-slide) 0 100% / 100% 165% no-repeat; color: var(--gold-ink); font-weight: 600; font-size: 15px; letter-spacing: .01em; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;   /* a taller foil: hover slides it (background-position), so the metal brightens instead of snapping to a flat colour */
  box-shadow: var(--shadow-gold); transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.btn::after { content: ""; position: absolute; inset: 0; background: var(--sheen); transform: translateX(-130%); pointer-events: none; }
.btn:hover { background-position: 0 0; transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 1px)); }
.btn:hover::after { transform: translateX(130%); transition: transform var(--t-sheen) var(--ease); }
.btn:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.975); transition-duration: var(--t-press); transition-timing-function: var(--ease-in); }
.btn.is-magnet { transition: transform 100ms linear, background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.btn.is-releasing { transition: transform 320ms var(--ease-spring), background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: default; transform: none; pointer-events: none; }
.btn:disabled::after { display: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--hair-2); box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.04); border-color: var(--hair-3); color: var(--text); }
.btn.soft { background: var(--surface-2); color: var(--text); box-shadow: none; }
.btn.soft:hover { background: var(--surface-3); color: var(--text); }
.btn.ghost::after, .btn.soft::after, .btn.danger::after, .btn.danger-text::after { display: none; }
.btn.danger { background: var(--danger-fill); color: #fff; box-shadow: none; }
.btn.danger:hover { background: #d95c5c; color: #fff; }
.btn.danger-text { background: transparent; color: var(--danger); box-shadow: none; padding: 8px 10px; min-height: 36px; font-weight: 600; font-size: 13px; opacity: .85; }
.btn.danger-text:hover { background: var(--danger-soft); color: var(--danger); opacity: 1; transform: none; }
.btn.lg { min-height: 52px; padding: 16px 28px; font-size: 16px; border-radius: var(--r-md); }
.btn.sm { min-height: 36px; padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn .arrow { display: inline-block; transition: transform var(--fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.is-copied { background: var(--ok); color: #0b2216; border-color: transparent; animation: copied .3s var(--ease); }
.btn.is-copied::before { content: ""; width: 14px; height: 14px; background: var(--i-check-ink) center / contain no-repeat; animation: check-in var(--med) var(--ease-spring) both; }
.btn.is-copied::after { display: none; }
@keyframes copied { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes check-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.linkbtn { background: none; border: 0; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; text-decoration-color: var(--hair-gold); text-underline-offset: 3px; }
.close-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-2); background: rgba(0,0,0,.35); color: var(--text); cursor: pointer; display: inline-grid; place-items: center; font: 14px/1 var(--sans); padding: 0; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.close-x:hover { background: rgba(255,255,255,.08); border-color: var(--hair-3); } .close-x:active { transform: scale(.94); }
.menu-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair-2); background: var(--i-kebab) center / 20px no-repeat; color: transparent; cursor: pointer; font-size: 0; line-height: 1; display: inline-grid; place-items: center; padding: 0; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--med) var(--ease); }
.menu-btn:hover { background-color: rgba(255,255,255,.05); border-color: var(--hair-3); }
body:has(.menu-pop.open) .menu-btn { transform: rotate(90deg); }
@media (max-width: 600px) { .btn.sm { min-height: 40px; } .menu-btn { width: 40px; height: 40px; } }

/* ---- 9. inputs and controls ----------------------------------------------------------------- */
label { display: block; font-size: 13px; line-height: 1.4; color: var(--text-2); margin: 16px 0 6px; font-weight: 600; }
label:first-child, form > label:first-of-type { margin-top: 0; }
label .muted { font-weight: 500; }
form > .row:not(.between) { margin-top: 16px; align-items: flex-start; }   /* rows of fields keep the label rhythm (their labels are :first-child) */
input[type=text], input[type=url], input[type=number], input[type=password], input[type=email], input[type=search], select, textarea {
  width: 100%; background: var(--surface-0); border: 1px solid var(--hair-2); color: var(--text); border-radius: var(--r-md); padding: 12px 14px; font: inherit; font-size: 16px; line-height: 20px; box-shadow: var(--inset);
  transition: border-color var(--fast) var(--ease); }   /* the focus ring is a static shadow: it appears, the border crossfades */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--inset), var(--ring); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input.flash, textarea.flash { border-color: var(--gold); box-shadow: var(--inset), var(--ring); }
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
select { appearance: none; -webkit-appearance: none; background-image: var(--i-caret); background-position: right 14px center; background-size: 16px; background-repeat: no-repeat; padding-right: 40px; text-overflow: ellipsis; cursor: pointer; }
select option { background: var(--surface-2); color: var(--text); }
input[type=color] { width: 44px; height: 44px; border: 1px solid var(--hair-2); background: var(--surface-0); border-radius: var(--r-sm); padding: 3px; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
input[type=file] { color: var(--muted); font-size: 13px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.field-head label { margin-bottom: 6px; }
.count { font-size: 11px; color: var(--muted-2); }
.count.over { color: var(--danger); }

/* toggle */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; color: var(--text); font-size: 14px; margin: 0; font-weight: 500; line-height: 1.3; }
.toggle input { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--hair-2); position: relative; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); margin: 0; cursor: pointer; flex: 0 0 auto; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--fast) var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.toggle input:checked { background: var(--foil-btn); border-color: transparent; box-shadow: inset 0 0 0 1px var(--gold-900); }
.toggle input:checked::after { transform: translateX(20px); }
.toggle input:disabled { opacity: .45; cursor: default; }
.toggle input:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }

/* segmented control: a sliding thumb with zero JS */
.seg { --n: 2; position: relative; display: inline-flex; background: var(--surface-0); border: 1px solid var(--hair-2); border-radius: var(--r-md); padding: 4px; gap: 0; box-shadow: var(--inset); }
.seg::before { content: ""; position: absolute; inset: 4px auto 4px 4px; width: calc((100% - 8px) / var(--n, 2)); background: var(--surface-3); border-radius: var(--r-sm); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform var(--fast) var(--ease); }
.seg:has(button:nth-child(2).active)::before { transform: translateX(100%); }
.seg:has(button:nth-child(3).active)::before { transform: translateX(200%); }
.seg button { position: relative; flex: 1 1 0; background: transparent; border: 0; color: var(--muted); padding: 8px 14px; min-height: 36px; border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.seg button.active { color: var(--text); }
.seg button:hover:not(.active) { color: var(--text); }
.seg button:active { transform: scale(.97); }
@supports not selector(:has(a)) { .seg::before { display: none; } .seg button.active { background: var(--surface-3); } }

/* chips and tabs */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .src-tabs button { background: var(--surface-2); border: 1px solid var(--hair-2); color: var(--text); border-radius: var(--r-pill); padding: 6px 14px; min-height: 36px; cursor: pointer; font-size: 13px; font-weight: 600; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.chips button:hover, .src-tabs button:hover { border-color: var(--hair-3); transform: translateY(-1px); }
.chips button:active { transform: scale(.975); }
.chips button.active, .src-tabs button.active { border-color: var(--hair-gold); background: rgba(232,176,75,.06); color: var(--gold); }
.chips button.locked, .chips button:disabled { opacity: .5; cursor: default; transform: none; }
.src-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.src-tabs button { flex: 1; border-radius: var(--r-md); }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { background: var(--surface-2); border: 1px solid var(--hair-2); color: var(--muted); border-radius: var(--r-sm); padding: 8px 13px; min-height: 36px; cursor: pointer; font-size: 13px; font-weight: 600; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease); }
.tabs button:hover { color: var(--text); border-color: var(--hair-3); }
.tabs button.active { border-color: var(--hair-gold); color: var(--gold); background: rgba(232,176,75,.06); }
.tabs button.locked { opacity: .5; cursor: default; }
@media (max-width: 600px) { .chips button, .tabs button, .src-tabs button { min-height: 40px; font-size: 14px; } }

/* progress: the one width transition, it reports real progress */
.progress { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; margin: 14px 0 8px; }
.progress > div { height: 100%; width: 0; background: var(--foil-btn); transition: width 260ms var(--ease); border-radius: 2px; }

/* stars */
.stars { display: inline-flex; gap: 3px; color: var(--gold); font-size: 17px; line-height: 1; }
.stars span { display: inline-block; }
.stars .off { color: rgba(255,255,255,.16); }
.star-pick { display: inline-flex; gap: 0; }
.star-pick button { width: 28px; height: 28px; display: inline-grid; place-items: center; background: none; border: 0; padding: 0; font-size: 24px; line-height: 1; color: rgba(255,255,255,.18); cursor: pointer; transition: transform var(--fast) var(--ease), color var(--fast) var(--ease); }
.star-pick button.on { color: var(--gold); }
.star-pick button:hover { transform: scale(1.18); }
@keyframes star-flash { from { color: var(--gold-100); transform: scale(1.25); } to { color: var(--gold-500); transform: none; } }

/* search hero + results (brand kit) */
.search-hero { position: relative; }
.search-hero input { font-size: 18px; line-height: 22px; padding: 16px 20px 16px 54px; border-radius: 16px; background: var(--surface-0) var(--i-search) no-repeat 20px 50%; }
.search-hero input:focus { box-shadow: var(--inset), 0 0 0 4px var(--gold-soft); }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: var(--r-md); padding: 6px; z-index: 20; box-shadow: var(--shadow-pop); max-height: 360px; overflow: auto; }
.results .results-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 14px; color: var(--text-2); font-family: var(--display); font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; }
.results .r { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 48px; text-align: left; background: transparent; border: 0; color: var(--text); padding: 12px 14px; border-radius: var(--r-sm); cursor: default; font: inherit; }
.results button.r { padding-left: 50px; position: relative; cursor: pointer; transition: background var(--fast) var(--ease); }
.results button.r::before { content: ""; position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 8px; background: var(--gold-soft) var(--i-pin) center / 16px no-repeat; border: 1px solid var(--hair-gold); }
.results button.r:hover, .results button.r:focus { background: var(--surface-3); }
.results .r b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; line-height: 1.1; }
.picked { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 14px; padding: 18px 20px; border-color: var(--hair-gold); overflow: hidden; }
.picked::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; background: var(--foil); }
.picked b { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }

/* drop zones */
.drop { position: relative; border: 1px dashed rgba(232,176,75,.28); padding: 20px; cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.drop:hover, .drop:focus-visible { border-color: var(--gold); }
.drop.over { border-color: var(--gold); background: var(--gold-soft); transform: scale(1.01); }
.drop:has(.drop-preview:not(.hidden)) { border-style: solid; border-color: var(--hair); }
.drop-empty { display: flex; align-items: center; gap: 16px; min-height: 48px; text-align: left; }
.drop-empty b { font-size: 15px; } .drop-empty .small { font-size: 13px; }
.drop-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--hair); display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--gold); flex: 0 0 auto; }
.drop-icon svg { width: 22px; height: 22px; stroke: var(--gold); }
.drop-preview { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.drop-preview img { max-height: 64px; max-width: 220px; background: #0a0a0b; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--hair); }
.drop-preview .small { font-size: 13px; }
.swatches { display: inline-flex; gap: 8px; }
.swatches .sw { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); cursor: pointer; padding: 0; transition: transform var(--fast) var(--ease); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.swatches .sw:hover { transform: scale(1.12); }
.saved { display: inline-flex; align-items: center; gap: 8px; }
.saved::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; }
.saved:empty::before { display: none; }
.saved.muted::before { background: var(--gold); }
.saved.ok { color: var(--ok); }
.saved.ok::before { background: var(--ok); }
.advanced { margin-top: 16px; background: var(--surface-0); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 14px; }
.advanced summary { cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before { content: ""; width: 14px; height: 14px; background: var(--i-caret-gold) center / contain no-repeat; transition: transform var(--fast) var(--ease); }
.advanced[open] summary::before { transform: rotate(90deg); }
.advanced input { margin-top: 10px; }
#colour-hint { color: var(--muted-2); font-size: 12px; }
#hex { font-variant-numeric: tabular-nums; }

/* ---- 10. pills, tags, messages -------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-family: var(--sans); font-style: normal; letter-spacing: 0; font-size: 12px; font-weight: 600; background: transparent; color: var(--muted); border: 1px solid var(--hair-2); white-space: nowrap; line-height: 1.4; }
.pill.ok, .pill.warn { position: relative; }
.pill.ok::before, .pill.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pill.ok { color: var(--ok); border-color: var(--ok-line); }
.pill.warn { color: var(--gold); border-color: var(--hair-gold); }
.pill.pro { color: var(--gold-ink); background: var(--foil-btn); border-color: transparent; font-weight: 600; letter-spacing: .06em; font-size: 11px; text-transform: uppercase; padding: 3px 9px; }
/* information, not success: ice via stable ids (the class stays green elsewhere) */
#source .pill.ok, #provider-pill.ok, #sys .pill.ok, #copy-status .pill.ok, .admin-table .pill, #source .pill.warn { color: var(--ice); border-color: var(--ice-line); }
.pill.tag { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.12); color: var(--text); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; }
.pill.tag::before { display: none; }
.msg { position: relative; padding: 12px 14px 12px 18px; border-radius: var(--r-md); font-size: 14px; margin-top: 12px; line-height: 1.5; border: 1px solid var(--hair-2); overflow: hidden; }
.msg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; opacity: .8; }
.msg.error { background: var(--danger-soft); color: #ffc4c4; border-color: var(--danger-line); }
.msg.error::before { background: var(--danger); }
.msg.info { background: var(--ice-soft); color: #cfe3ee; border-color: var(--ice-line); }
.msg.info::before { background: var(--ice); }
.msg.ok { background: var(--ok-soft); color: #cdf1db; border-color: var(--ok-line); }
.msg.ok::before { background: var(--ok); }

/* ---- 11. phone frames ----------------------------------------------------------------------- */
.phone { position: relative; aspect-ratio: 9 / 16; width: 100%; background: #0a0a0b; border-radius: var(--r-phone); padding: 10px; border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow-phone); }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; background: #050505; box-shadow: 0 0 0 1px rgba(255,255,255,.06); border-radius: 12px; z-index: 3; }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: var(--r-screen); overflow: hidden; background: #000; }
.phone video, .phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone.sm { border-radius: 26px; padding: 7px; } .phone.sm::before { width: 60px; height: 16px; top: 13px; } .phone.sm .screen { border-radius: 20px; }
.preview-stage { position: relative; background: #000; border-radius: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow-phone); }
.preview-stage::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 72px; height: 18px; background: #050505; box-shadow: 0 0 0 1px rgba(255,255,255,.06); border-radius: 10px; z-index: 3; }
.preview-stage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--fast) var(--ease); }
.preview-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* bezel-only specular highlight (progressive) */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .phone::after, .preview-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: linear-gradient(125deg, rgba(255,255,255,.12), transparent 30%); padding: 10px; -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, linear-gradient(#000 0 0); mask-composite: exclude; }
  .preview-stage::after { padding: 5px; }
  .phone.sm::after { padding: 7px; }
}
/* the floor glow: a sibling right after the phone, so its top edge is the phone's bottom edge */
.phone-glow { position: relative; height: 0; width: 84%; max-width: 320px; margin: 0 auto; pointer-events: none; z-index: 0; opacity: .85; transition: opacity var(--med) var(--ease); }
.phone-glow::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 76px; background: var(--floor-glow); }   /* brightest just under the phone's foot */
.stage .preview-stage, .stage .phone, .kit-live .preview-stage { z-index: 1; }
.stage .preview-stage { max-width: 340px; margin: 0 auto; box-shadow: var(--shadow-stage), 0 0 0 1px rgba(255,255,255,.08); }
.stage .phone { max-width: 340px; margin: 0 auto; box-shadow: var(--shadow-stage), 0 0 0 1px rgba(255,255,255,.10); }
@media (hover: hover) { .stage:hover .phone-glow, .kit-live:hover .phone-glow { opacity: 1; } }
/* pointer tilt (JS sets --rx/--ry and toggles the classes; pointer:fine only) */
.is-tilting { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 120ms linear; }
.is-tilting.is-settling { transition: transform 320ms var(--ease-spring); }
/* stage chrome */
.preview-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 16px; gap: 10px; }
.stage .preview-meta { position: relative; justify-content: space-between; }
.preview-stage .replay { position: absolute; right: 10px; top: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.55); color: var(--text); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.preview-stage .replay svg { width: 14px; height: 14px; }
.preview-stage .replay:hover { background: rgba(0,0,0,.75); } .preview-stage .replay:active { transform: scale(.96); }
#hots { position: absolute; inset: 0; z-index: 5; }
.preview-stage .hot { position: absolute; border: 1.5px dashed transparent; border-radius: 8px; cursor: text; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.preview-stage .hot:hover { border-color: rgba(232,176,75,.85); background: rgba(232,176,75,.08); }
.preview-stage .inline-edit { position: absolute; background: rgba(10,10,12,.94); color: #fff; border: 1px solid var(--gold); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 16px; line-height: 1.3; resize: none; z-index: 5; box-shadow: 0 16px 40px rgba(0,0,0,.6); outline: none; }
.preview-stage .inline-close { position: absolute; z-index: 6; }
.pv-badge { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.6); color: var(--text); font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); z-index: 4; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; }
.live-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ---- 12. tables ----------------------------------------------------------------------------- */
.copy-table, .admin-table { border-collapse: collapse; width: 100%; }
.copy-table td, .admin-table td { padding: 12px 12px 12px 0; vertical-align: top; font-size: 14px; line-height: 1.5; border-bottom: 1px solid var(--hair); }
.copy-table tr:last-child td, .admin-table tr:last-child td { border-bottom: 0; }
.copy-table td:first-child { color: var(--muted); font-family: var(--display); font-style: italic; font-size: 14px; white-space: nowrap; width: 120px; }
.copy-table tr:hover td, .admin-table tr:hover td { background: rgba(244,241,234,.02); }
.admin-table { margin-top: 4px; }
.admin-table th { text-align: left; color: var(--text-2); font-family: var(--display); font-style: italic; font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair-2); }
.admin-table td { vertical-align: middle; }
.admin-table th:nth-child(3), .admin-table td:nth-child(3), .admin-table th:nth-child(4), .admin-table td:nth-child(4) { text-align: right; }
.admin-table td:first-child { min-width: 0; }
.admin-table b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.admin-table .tiny a { color: var(--muted); text-decoration: none; }
.admin-table .tiny a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.admin-table th:last-child, .admin-table td:last-child { width: 204px; padding-left: 24px; padding-right: 0; }
.admin-table .seg { display: flex; width: 100%; min-width: 120px; }
.admin-table .seg button { padding: 6px 12px; min-height: 28px; }
.sys { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sys .pill { min-height: 26px; white-space: normal; }
@media (max-width: 720px) { .admin-table th:nth-child(2), .admin-table td:nth-child(2) { display: none; } }
@media (max-width: 480px) {
  .admin-table th:nth-child(3), .admin-table td:nth-child(3) { display: none; }
  .admin-table th, .admin-table td { padding-right: 8px; }
  .admin-table th:last-child, .admin-table td:last-child { width: 1%; padding-left: 4px; }
  .admin-table .seg { min-width: 104px; } .admin-table .seg button { padding: 6px 8px; }
  .admin-table td:first-child { overflow-wrap: anywhere; } .admin-table .pill { white-space: normal; }
  .admin-table b { font-size: 16px; }
  #login .row > * { flex: 1 1 100%; }
}
#login { max-width: 520px; }
#login .row { align-items: stretch; gap: 10px; }
.login-lock, .icon-tile { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--hair-2); background: var(--surface-0) var(--i-lock) center / 20px no-repeat; margin-bottom: 18px; }
.icon-tile svg { width: 20px; height: 20px; }

/* ---- 13. skeletons -------------------------------------------------------------------------- */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(var(--key),.07), transparent); transform: translateX(-100%); animation: shimmer 1.2s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 12px; margin: 10px 0; } .skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; } .skel-line.w80 { width: 80%; }
.skel-block { height: 120px; } .skel-card { min-height: 232px; border-radius: var(--r-lg); }

/* ---- 14. overlays: menu, modal, toast ------------------------------------------------------- */
.menu-pop { position: absolute; z-index: 60; min-width: 200px; background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: var(--r-md); padding: 6px; box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(-4px); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.menu-pop.open { opacity: 1; transform: none; }
.menu-pop button { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text); padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; transition: background var(--fast) var(--ease); }
.menu-pop button:hover { background: var(--surface-3); }
.menu-pop button.danger { color: var(--danger); }
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(7,7,8,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity 140ms var(--ease); }
.modal-backdrop.open { opacity: 1; transition-duration: 200ms; }
.modal { position: relative; width: min(460px, 100%); background: var(--card-light), var(--surface-1); border: 1px solid var(--hair-2); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-pop); transform: translateY(8px) scale(.98); transition: transform 140ms var(--ease); }
.modal-backdrop.open .modal { transform: none; transition-duration: 200ms; }
.modal .modal-x { position: absolute; top: 14px; right: 14px; }
.modal h3 { padding-right: 40px; }
.modal label { margin-top: 16px; }
.modal p { color: var(--text-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 95; display: flex; align-items: center; gap: 14px; background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: var(--r-md); padding: 12px 12px 12px 18px; box-shadow: var(--shadow-pop); opacity: 0; transition: opacity 140ms var(--ease), transform 140ms var(--ease); max-width: calc(100vw - 32px); font-size: 14px; }
.toast.open { opacity: 1; transform: translate(-50%, 0); transition-duration: 200ms; }
.toast-undo { background: transparent; border: 0; color: var(--gold); font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: var(--r-sm); white-space: nowrap; transition: background var(--fast) var(--ease); }
.toast-undo:hover { background: var(--gold-soft); }
.toast-undo em { font-style: normal; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---- 15. dashboard -------------------------------------------------------------------------- */
.brand-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 16px 20px; align-items: start; padding: 28px; }
.brand-card::before { content: ""; position: absolute; left: -10%; top: -80%; width: 90%; height: 160%; background: radial-gradient(closest-side at 18% 0%, var(--brand, #e8b04b), transparent 70%); opacity: .12; pointer-events: none; transition: opacity var(--med) var(--ease); }
.brand-card::after { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand, #e8b04b), transparent); opacity: .5; pointer-events: none; }
.brand-card:hover::before { opacity: .2; }
.brand-card > * { position: relative; }
.brand-card .swatch { width: 88px; height: 88px; border-radius: 22px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; background: #000; box-shadow: 0 16px 34px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.14); }
.brand-card .swatch img { max-width: 72%; max-height: 72%; }
.brand-card .swatch.has-logo { background: linear-gradient(160deg, #17171b, #0c0c0e); box-shadow: 0 16px 34px -18px rgba(0,0,0,.9), inset 0 0 0 2px var(--ring, var(--gold)), inset 0 0 0 4px rgba(0,0,0,.5); }
.brand-card .swatch.has-logo img { max-width: 66%; max-height: 66%; }
.brand-card .swatch .initial { font-family: var(--display); font-size: 34px; font-weight: 700; color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.brand-card h3 { font-size: 24px; margin: 4px 0 6px; padding-right: 64px; display: block; }
.brand-card h3 .pill { position: absolute; top: -10px; right: -10px; }
.brand-card .muted.small { color: var(--text-2); }
.brand-card .recent { grid-column: 1 / -1; align-self: stretch; display: flex; gap: 10px; align-items: flex-end; min-height: 20px; border-top: 1px solid var(--hair); padding-top: 18px; }
.brand-card .mini { width: 76px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.16); position: relative; transform: rotate(var(--tilt, 0deg)); transition: transform var(--med) var(--ease), border-color var(--fast) var(--ease); box-shadow: 0 14px 28px -18px rgba(0,0,0,.95); text-decoration: none; }
.brand-card .mini.photo { aspect-ratio: 4 / 5; }
.brand-card .mini::after { content: ""; position: absolute; inset: 0; background: var(--scrim-bottom); pointer-events: none; }
.brand-card:hover .mini { transform: rotate(0) translateY(-3px); border-color: var(--hair-3); }
.brand-card:hover .mini:nth-child(2) { transition-delay: 40ms; } .brand-card:hover .mini:nth-child(3) { transition-delay: 80ms; }
.brand-card .mini:hover { transform: rotate(0) translateY(-3px) scale(1.05); z-index: 2; transition-delay: 0ms; }
.brand-card .mini video, .brand-card .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-card .mini .tag { position: absolute; left: 5px; bottom: 5px; z-index: 1; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); padding: 2px 6px; border-radius: var(--r-pill); color: var(--text); font-weight: 600; }
.brand-card .recent .none { font-family: var(--display); font-style: italic; color: var(--muted); font-size: 15px; align-self: center; }
.brand-card .links { grid-column: 1 / -1; margin-left: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; align-items: center; border-top: 1px solid var(--hair); padding-top: 18px; }
.empty { text-align: center; padding: 64px 24px; }
.empty .phone { width: 150px; margin: 0 auto 28px; }
.empty .phone .screen { background: radial-gradient(80% 60% at 50% 35%, #2a2420, #0a0a0b); }
.empty .phone::after { content: ""; position: absolute; left: 12%; right: 12%; top: auto; bottom: -22px; height: 48px; inset: auto 12% -22px 12%; padding: 0; border-radius: 0; background: var(--floor-glow); -webkit-mask: none; mask: none; z-index: -1; opacity: .9; }
.empty .phone { z-index: 0; }
.empty h2 { margin-bottom: 10px; font-size: 32px; }
.empty p { color: var(--text-2); max-width: 42ch; margin: 0 auto; }
.empty .actions { justify-content: center; margin-top: 24px; }
@media (max-width: 600px) {
  .brand-card { grid-template-columns: 64px minmax(0, 1fr); padding: 20px; gap: 14px 16px; }
  .brand-card::after { left: 20px; right: 20px; }
  .brand-card .swatch { width: 64px; height: 64px; border-radius: 18px; } .brand-card h3 { font-size: 20px; }
  .brand-card .mini { width: 64px; }
  .brand-card .links { gap: 8px; }
}

/* ---- 16. brand kit -------------------------------------------------------------------------- */
.kit-live { position: relative; padding: 28px 24px 18px; overflow: hidden; background: var(--stage-key), var(--stage-floor), var(--surface-1); }
.kit-live::before { content: ""; position: absolute; inset: 0; background: url("/static/landing/grain.png") repeat; background-size: 128px 128px; opacity: .06; pointer-events: none; mix-blend-mode: overlay; }
.kit-live > * { position: relative; }
.kit-live .eyebrow { justify-content: center; text-align: center; font-size: 16px; }
.kit-live .preview-stage { max-width: 260px; margin: 0 auto; box-shadow: var(--shadow-stage), 0 0 0 1px rgba(255,255,255,.08); }
.kit-live .preview-meta { justify-content: center; margin-top: 12px; text-align: center; }
@keyframes ring-flash { from { border-color: rgba(232,176,75,.9); } to { border-color: rgba(244,241,234,.07); } }
.two-col:has(.saved.ok) .kit-live::after { animation: ring-flash 400ms var(--ease) both; }
.kit-grid { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.kit-card-wrap { perspective: 900px; }
.kit-card { width: 100%; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-pop); transform: rotateY(-4deg) rotateX(2deg); transition: transform var(--med) var(--ease), opacity var(--med) var(--ease); }
.kit-card-wrap:hover .kit-card { transform: none; }
.tpl { position: relative; padding: 18px 20px 18px 24px; font-size: 16px; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tpl::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--gold); }
.tpl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0 8px; }
.tpl-head b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; line-height: 1.15; }
#kit > .msg { margin-top: 0; }
#danger-row:has(.btn:not(.hidden)) { border-top: 1px solid var(--hair); padding-top: 24px; }
@media (max-width: 720px) { .kit-grid { grid-template-columns: 1fr; } }

/* ---- 17. library ---------------------------------------------------------------------------- */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 24px; }
.lib-item { min-width: 0; padding-top: 16px; border-top: 1px solid var(--hair); }
.lib-item .shot { position: relative; display: block; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-thumb); aspect-ratio: 9 / 16; transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.lib-item .shot.photo { aspect-ratio: 4 / 5; border-radius: 12px; }
.lib-item .shot:hover { transform: translateY(-3px); border-color: var(--hair-3); }
.lib-item .shot video, .lib-item .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib-item .shot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 0%, rgba(var(--key),.07), transparent); pointer-events: none; z-index: 1; }
.lib-item .shot::after { content: ""; position: absolute; inset: 0; background: var(--scrim-bottom); pointer-events: none; z-index: 1; }
.lib-item .shot:has(video:not([src]))::after { background: var(--i-play) center / 40px no-repeat, var(--scrim-bottom); }
.lib-item .shot .tag { position: absolute; top: 10px; left: 10px; z-index: 2; }
.lib-item .shot .tag.ok, .lib-item .shot .tag.warn { color: var(--text); border-color: rgba(255,255,255,.12); }
.lib-item .shot .notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 46px; height: 12px; border-radius: 8px; background: #050505; box-shadow: 0 0 0 1px rgba(255,255,255,.06); z-index: 2; }
.lib-item .q { margin-top: 14px; font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-item .who { color: var(--muted); font-size: 12px; margin-top: 6px; }
.lib-item .who .stars { font-size: 14px; }
.lib-item .meta { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.lib-item .meta .pill.ok { display: none; }
.lib-item .actions { margin-top: 12px; gap: 8px; }
.lib-item .actions .btn { flex: 1; background: transparent; color: var(--text); border: 1px solid var(--hair-2); box-shadow: none; }
.lib-item .actions .btn::after { display: none; }
.lib-item .actions .btn:hover { background: rgba(255,255,255,.04); border-color: var(--hair-3); }
.lib-item .actions .btn.is-copied { background: var(--ok); color: #0b2216; border-color: transparent; }
.lib-grid > .card.empty { grid-column: 1 / -1; }
@media (min-width: 601px) and (max-width: 960px) { .lib-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 32px 18px; } }
@media (max-width: 600px) {
  .lib-grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .lib-item .meta .pill:not(:first-child) { display: none; }
  .lib-item .q { font-size: 14px; } .lib-item .who { font-size: 12px; }
  .lib-item .actions { flex-direction: column; } .lib-item .actions .btn { min-height: 40px; }
}

/* ---- 18. result ----------------------------------------------------------------------------- */
.stage .tabs, #tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--surface-0); padding: 4px; border-radius: var(--r-md); box-shadow: var(--inset); margin-bottom: 18px; }
.stage .tabs button, #tabs button { border: 0; background: transparent; min-height: 34px; padding: 8px 6px; font-size: 12px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; border-radius: var(--r-sm); }
.stage .tabs button.active, #tabs button.active { background: var(--gold-soft); color: var(--gold); }
.stage .actions { position: relative; justify-content: center; }
.stage .actions #share { flex: 1 1 100%; }
.stage .actions #dl, .stage .actions #zip { flex: 1 1 calc(50% - 5px); }
#phone-frame video, #phone-frame img { transition: opacity var(--med) var(--ease); }
@starting-style { #phone-frame video:not(.hidden), #phone-frame img:not(.hidden) { opacity: 0; } }
#share-note { color: var(--muted-2); font-size: 12px; max-width: 40ch; margin: 10px auto 0; }
#render-info { color: var(--muted); font-size: 12px; }
#render-info b { color: var(--text-2); font-weight: 600; }
.caption-box { position: relative; white-space: pre-wrap; padding: 18px 20px 18px 22px; font-size: 16px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.caption-box::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--gold); }
.caption-box.locked { color: transparent; text-shadow: 0 0 9px rgba(244,241,234,.55); user-select: none; }
#caption { margin-top: 12px; }
.caption-edit { margin-top: 14px; }
.caption-edit textarea { min-height: 128px; line-height: 1.6; }   /* four full lines: a caption is never cut mid-line at rest */
.unlock { position: relative; border: 1px solid var(--hair-gold); background: var(--surface-0); border-radius: var(--r-lg); padding: 24px 26px; overflow: hidden; box-shadow: var(--inset); }
.unlock::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 2px; background: var(--foil); }
.unlock .eyebrow { color: var(--gold); font-size: 15px; }
.unlock ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--text-2); font-size: 14px; }
.unlock li { display: flex; align-items: center; gap: 10px; }
.unlock li::before { content: ""; width: 10px; height: 1px; background: var(--gold); flex: 0 0 auto; }
.unlock p { color: var(--muted-2); }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.small-note { font-size: 13px; color: var(--muted); }
@media (min-width: 961px) { .two-col.result > div:last-child > .actions { justify-content: flex-end; } }
@media (max-width: 960px) {
  .two-col.result > div:first-child { width: 100%; max-width: 520px; margin: 0 auto; }   /* a tablet never gets a 700 px stage around a 300 px phone */
  .two-col.result .stage { padding: 16px; } .two-col.result .stage .phone { max-width: 300px; }
  .two-col.result .stage::after { inset: 8px; }
}

/* ---- 19. new post studio -------------------------------------------------------------------- */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: start; }
.stage-col { position: sticky; top: 92px; }
/* short laptop screens: the pinned phone shrinks so its meta line never falls below the fold */
@media (min-width: 961px) { .stage-col .stage .preview-stage { max-width: min(340px, calc((100vh - 236px) * 9 / 16)); min-width: 220px; } }
.flow { align-items: start; }
.steps { display: grid; gap: 16px; }
.step { padding: 0; overflow: visible; transition: opacity var(--fast) var(--ease); scroll-margin-top: 84px; }
.step:not(.active):not(.done) { opacity: .6; }
.step-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; cursor: pointer; }
.step-head .num { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1; border: 1px solid var(--hair-2); background: transparent; color: var(--muted); flex: 0 0 auto; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.step.done .step-head .num { color: transparent; border-color: rgba(143,216,172,.5); background: var(--i-check) center / 16px no-repeat; animation: check-in var(--med) var(--ease-spring) both; }
.step.active .step-head .num { background: var(--foil-btn); border-color: transparent; color: var(--gold-ink); animation: num-pop var(--med) var(--ease-spring) both; }
@keyframes num-pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
.step-head h3 { margin: 0; font-size: 20px; flex: 0 0 auto; }
.step-head .summary { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--med) var(--ease); }
.step.done .step-head .summary { opacity: 1; }
.step-head .edit { display: none; }
.step.done:not(.active) .step-head .edit { display: inline-flex; }
.step-body { padding: 0 24px 24px; transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); }
@starting-style { .step-body { opacity: 0; transform: translateY(-6px); } }
.step.done:not(.active) .step-body { display: none; }
.step-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); }
/* step 1: intake */
.intake { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 168px; padding: 18px; margin: 0; text-align: center; cursor: pointer; border-radius: 18px; color: var(--text); font: inherit; line-height: 1.4; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), background var(--fast) var(--ease); }
.tile:hover, .tile.over { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-2px); }
.tile:active { transform: scale(.98); }
.tile .ic { font-size: 26px; line-height: 1; margin-bottom: 6px; color: var(--gold); display: inline-grid; place-items: center; }
.tile .ic svg { width: 28px; height: 28px; stroke: var(--gold); }
.tile b { font-size: 15px; } .tile > span:not(.ic) { color: var(--muted); font-size: 13px; max-width: 26ch; }
.tile > .tiny { font-size: 13px; color: var(--muted); }
.tile.drop { border: 1px dashed rgba(232,176,75,.28); padding: 18px; }
.tile.drop.over, .tile.drop:hover { border-color: var(--gold); }
.drop b { font-size: 15px; } .drop .thumb-shot { max-height: 120px; border-radius: var(--r-sm); }
.drop.has-shot { padding: 10px; }
.reading { position: relative; padding: 18px 20px; }
.reading .small { display: block; margin-top: 8px; }
.review-card { padding: 18px; }
.rc-head { display: flex; align-items: center; gap: 12px; }
.rc-head .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--foil-btn); color: var(--gold-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1; flex: 0 0 auto; box-shadow: var(--shadow-gold); }
.rc-who { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rc-who input { height: auto; background: transparent; border: 0; border-bottom: 1px dashed var(--hair-3); border-radius: 0; padding: 4px 0; font-weight: 600; font-size: 17px; line-height: 1.3; box-shadow: none; }
.rc-who input:focus { border-bottom-color: var(--gold); box-shadow: none; }
.review-card textarea { margin-top: 12px; min-height: 84px; resize: none; overflow: hidden; line-height: 1.55; }
.rc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; font-size: 13px; }
/* step 2: look */
.preset-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.preset-head .tiny { font-size: 13px; }
.preset-strip { display: flex; gap: 10px; overflow-x: auto; margin: 0 -12px; padding: 6px 12px 12px; scroll-snap-type: x mandatory; scroll-padding: 0 12px; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 28px), transparent); }
.preset-strip::-webkit-scrollbar { height: 6px; } .preset-strip::-webkit-scrollbar-thumb { background: var(--hair-3); border-radius: 3px; }
.preset { position: relative; flex: 0 0 auto; width: 112px; background: var(--surface-0); border: 1px solid var(--hair-2); border-radius: var(--r-md); padding: 6px 6px 8px; cursor: pointer; color: var(--text); font: inherit; text-align: left; scroll-snap-align: start; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.preset::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 3px var(--gold-soft); opacity: 0; pointer-events: none; transition: opacity var(--fast) var(--ease); }
.preset:hover { transform: translateY(-2px); border-color: var(--hair-3); }
.preset.active { border-color: var(--hair-gold); }
.preset.active::after { opacity: 1; }
.preset .ph { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #000; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.1); }
.preset .ph::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 28px; height: 7px; border-radius: 4px; background: #050505; z-index: 2; }
.preset .ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
.preset b { display: block; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset > span:last-child { color: var(--muted); font-size: 11px; }
.look-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.look-opt { position: relative; border: 1px solid var(--hair-2); border-radius: var(--r-md); padding: 8px; cursor: pointer; background: var(--surface-0); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.look-opt::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 3px var(--gold-soft); opacity: 0; pointer-events: none; transition: opacity var(--fast) var(--ease); }
.look-opt:hover { transform: translateY(-2px); border-color: var(--hair-3); }
.look-opt.active { border-color: var(--gold); }
.look-opt.active::after { opacity: 1; }
.look-opt .thumb { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: var(--surface-2); }
.look-opt .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 200ms var(--ease); }
.look-opt .thumb img:not([src]) { opacity: 0; }
.look-opt .thumb .skel { position: absolute; inset: 0; border-radius: 0; }
.look-opt.active .thumb::after { content: ""; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--foil-btn) var(--i-check-gold) center / 12px no-repeat; box-shadow: 0 4px 12px rgba(0,0,0,.5); z-index: 2; animation: check-in var(--med) var(--ease-spring) both; }
.look-opt .sw { height: 84px; border-radius: 8px; margin-bottom: 10px; display: flex; align-items: flex-end; padding: 10px; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: -.02em; position: relative; overflow: hidden; }
.look-opt .sw::before { content: ""; position: absolute; left: 10px; right: 40%; top: 12px; height: 1px; background: currentColor; opacity: .5; }
.look-opt b { display: block; font-size: 14px; }
.look-opt span { color: var(--muted); font-size: 12px; }
.finetune-toggle { background: none; border: 0; color: var(--gold); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.finetune-toggle:hover { text-decoration: underline; text-decoration-color: var(--hair-gold); text-underline-offset: 3px; }
.finetune { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); display: grid; gap: 18px; }
.finetune h4 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); font-family: var(--display); font-style: italic; font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.finetune h4 .tiny { font-family: var(--sans); font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.adv-grid { display: grid; gap: 12px; margin-top: 12px; }
.adv-grid .adv-key { margin-left: 26px; }
.adv-grid .toggle { display: flex; align-items: center; gap: 10px; }
.colour-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ice); margin: 2px 0 8px; }
.colour-note .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); display: inline-block; }
/* step 3: output */
#type-note { font-size: 13px; }
#hashtags { font-size: 13px; color: var(--muted); }
#plan-note { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#done { transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); }
@starting-style { #done:not(.hidden) { opacity: 0; transform: translateY(8px); } }
@media (max-width: 720px) { .look-picker { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .look-opt { padding: 6px; } .look-opt .sw { height: 64px; font-size: 13px; } .look-opt span { display: none; } .look-opt b { font-size: 12px; } .adv-grid .adv-key { margin-left: 0; } }
/* phones: the pinned preview strip (the width transition at 200 ms is the documented exception) */
@media (max-width: 960px) {
  .studio { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stage-col { order: -1; position: sticky; top: 64px; z-index: 20; }   /* sits exactly under the nav (64 px; 60 px under 760) */
  .stage-col .stage { padding: 8px 10px 4px; border-radius: 0 0 22px 22px; margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l)); border-width: 0 0 1px; background: rgba(7,7,8,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .stage-col .stage::after, .stage-col .phone-glow { display: none; }
  .stage-col .stage .preview-stage { width: 128px; max-width: none; border-radius: 22px; box-shadow: var(--shadow-phone); transition: width 200ms var(--ease); }
  .stage-col .stage .preview-stage::before { width: 36px; height: 9px; top: 7px; }
  .stage-col .stage .preview-stage .replay { padding: 3px 7px; font-size: 10px; right: 6px; top: 6px; }
  .stage-col .stage .preview-meta { justify-content: center; font-size: 11px; margin-top: 6px; }
  .stage-col.compact .stage { padding: 6px 10px 4px; }
  .stage-col.compact .stage .preview-stage { width: 96px; border-radius: 14px; }
  .stage-col.compact .stage .preview-stage::before { width: 30px; height: 8px; top: 6px; }
  .stage-col.compact .stage .preview-stage .replay { padding: 2px 6px; font-size: 9px; right: 4px; top: 4px; }
  .stage-col.compact .stage .preview-meta { display: none; }
  .stage-col.compact .stage #hots { display: none; }
  .intake { grid-template-columns: 1fr; } .tile { min-height: 120px; }
  .step-body > .actions > .btn.lg { width: 100%; }
  #plan-note { flex: 1 1 100%; }
  .step-head { padding: 16px 16px; } .step-body { padding: 0 16px 18px; }
  .step-head .summary { display: none; } .step.done:not(.active) .step-head .summary { display: block; }
  .studio-head { padding-top: 8px; padding-bottom: 14px; margin-bottom: 20px; }
  .studio-head .back { margin-bottom: 8px; }
  .studio-head h1 { margin: 4px 0 6px; font-size: 30px; }
  .studio-head .row.between.stack-sm { gap: 6px; }
  .brand-pick label { margin-bottom: 4px; }
  .brand-pick select { min-width: 0; width: 100%; }
}
@media (max-width: 760px) { .stage-col { top: 60px; } }

/* ---- 20. terms ------------------------------------------------------------------------------ */
.terms-page .wrap { max-width: 720px; }
.terms-page .card { background: none; border: 0; box-shadow: none; padding: 0; }
.terms-page .card h3 { font-size: 26px; padding-top: 28px; border-top: 1px solid var(--hair); margin-top: 40px; }
.terms-page .card h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.terms-page .card p { font-size: 17px; line-height: 1.7; color: var(--text-2); max-width: 64ch; margin-top: 12px; }
.terms-page .card p.msg { font-size: 14px; }
.terms-page .card p.tiny { font-size: 12px; }
@media (max-width: 600px) { .terms-page .card h3 { font-size: 22px; } .terms-page .card p { font-size: 16px; } }

/* ---- 21. legacy rules still referenced by older markup -------------------------------------- */
.review-block { position: relative; border: 1px solid var(--hair); border-radius: var(--r-md); padding: 18px; margin-top: 12px; background: var(--surface-0); }
.review-block .remove { position: absolute; top: 12px; right: 12px; }
.review-block label { margin-top: 10px; }
.reel-card { padding: 12px; }
.reel-card .thumb { position: relative; border-radius: var(--r-md); overflow: hidden; background: #000; }
.reel-card .thumb img, .reel-card > a > img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--r-md); background: #000; }
.reel-card .tag { position: absolute; top: 10px; left: 10px; z-index: 2; }
.reel-card .body { padding: 12px 8px 4px; }
.reel-card .q { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 10px 0 6px; letter-spacing: -.015em; line-height: 1.15; }
.reel-card .cap { color: var(--muted); font-size: 13px; white-space: pre-wrap; max-height: 5.5em; overflow: hidden; }
.reel-card .meta { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 960px) { .flow .preview-col { order: -1; position: sticky; top: 58px; z-index: 20; background: linear-gradient(var(--bg) 82%, transparent); padding: 6px 0 14px; } .flow .preview-stage { width: 190px; margin: 0 auto; border-radius: 22px; } }

/* ---- 22. motion: the take, reveals, hover (pointer:fine), reduced motion -------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes em-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes stage-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes glow-in { from { opacity: 0; } to { opacity: .85; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  /* the take: kicker, h1 (its gold word rising from below the baseline), lede, control, then content.
     Fill is "backwards" everywhere: once a beat has played nothing of it lingers, so hover, press, magnet
     and tilt transforms on the same elements keep working and sticky columns never inherit a transform. */
  .page-head .back, .page-head .eyebrow, .page-head h1, .page-head .lede, .page-head .row.between > .fixed, .page-head .row.between > .btn { animation: rise var(--t-enter) var(--ease) backwards; }
  .page-head h1 { animation-delay: 40ms; }
  .page-head .lede { animation-delay: 100ms; }
  .page-head .row.between > .fixed, .page-head .row.between > .btn { animation-delay: 140ms; }
  .em-mask em { animation: em-rise 360ms var(--ease) 120ms backwards; }
  .wrap > .card, .wrap > .two-col, .wrap > .grid, .wrap > .studio, .wrap > .row, .wrap > .actions { animation: rise var(--t-enter) var(--ease) 200ms backwards; }
  .wrap > :nth-child(3):is(.card, .two-col, .grid, .studio, .row, .actions) { animation-delay: 260ms; }
  .wrap > :nth-child(4):is(.card, .two-col, .grid, .studio, .row, .actions) { animation-delay: 320ms; }
  .wrap > :nth-child(n+5):is(.card, .two-col, .grid, .studio, .row, .actions) { animation-delay: 380ms; }
  .stage .preview-stage, .stage .phone, .kit-live .preview-stage { animation: stage-in 360ms var(--ease) 120ms backwards; }
  .stage .phone-glow, .kit-live .phone-glow { animation: glow-in 400ms var(--ease) 200ms backwards; }
  .stars span { animation: pop .3s var(--ease) both; }
  .stars span:nth-child(2) { animation-delay: .05s; } .stars span:nth-child(3) { animation-delay: .1s; } .stars span:nth-child(4) { animation-delay: .15s; } .stars span:nth-child(5) { animation-delay: .2s; }
  .pill { animation: fade .25s var(--ease) both; }
  .star-pick button.on { animation: star-flash var(--med) var(--ease) both; }
  .star-pick button.on:nth-child(2) { animation-delay: 30ms; } .star-pick button.on:nth-child(3) { animation-delay: 60ms; } .star-pick button.on:nth-child(4) { animation-delay: 90ms; } .star-pick button.on:nth-child(5) { animation-delay: 120ms; }
  .swatches .sw { animation: pop .3s var(--ease) both; }
  .swatches .sw:nth-child(2) { animation-delay: 40ms; } .swatches .sw:nth-child(3) { animation-delay: 80ms; } .swatches .sw:nth-child(4) { animation-delay: 120ms; } .swatches .sw:nth-child(5) { animation-delay: 160ms; }
  .results { animation: results-in 200ms var(--ease) both; }
  .picked { animation: results-in 240ms var(--ease) both; }
  #form-card { animation: results-in 240ms var(--ease) both; }
}
@keyframes results-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
/* touch: hover sticks after a tap, so nothing stays lifted and no sheen is left mid-sweep; press feedback stays */
@media (hover: none) {
  .btn:hover, .chips button:hover, .src-tabs button:hover, .tile:hover, .preset:hover, .look-opt:hover, .lib-item .shot:hover, .swatches .sw:hover, .star-pick button:hover { transform: none; }
  .btn:hover::after { transform: translateX(-130%); transition: none; }
  .btn:hover .arrow { transform: none; }
  .brand-card:hover .mini, .brand-card .mini:hover { transform: rotate(var(--tilt, 0deg)); }
  .btn:active, .chips button:active { transform: scale(.975); } .tile:active { transform: scale(.98); }
}
[data-reveal] { opacity: 0; transform: translateY(12px); }
@media print { [data-reveal] { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* belt and braces: every keyframe and transition resolves at once, so final states render immediately */
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-reveal], .em-mask em { opacity: 1; transform: none; }
  .step-head .summary { transition: none; }
  .btn, .btn .arrow, .toggle input, .toggle input::after, .seg::before, .seg button, .chips button, .tabs button, .src-tabs button, .look-opt, .preset, .tile, .lib-item .shot, .card.lift, .brand-card .mini, .brand-card::before, .nav-links a, .nav-links a::after, .menu-btn, .swatches .sw, .star-pick button, .step-body, #done, .back::before, .advanced summary::before, .close-x, .drop { transition: none; }
  .btn::after, .skel::after { display: none; }
  .btn:hover, .chips button:hover, .tabs button:hover, .look-opt:hover, .preset:hover, .tile:hover, .lib-item .shot:hover { transform: none; }
  .btn, .btn:hover, .btn:active { transform: none; }
  .is-tilting { transform: none; }
  .brand-card:hover .mini, .brand-card .mini:hover { transform: rotate(var(--tilt, 0deg)); }
  .keylight { display: none; }
}

/* ---- 23. addenda (shared fixes found on /brand; additive, nothing above is renamed) --------- */
/* Tilt without perspective. perspective() made Chromium re-raster the rounded, clipped phone at 1x on
   retina screens, so the post went soft for the whole hover. An orthographic lean about a pivot 44 px
   behind the glass stays crisp (checked at device scale 2) and still drifts ~4.6 px toward the pointer at
   6 deg, with no typed calc() for older engines to choke on; the floor glow and the bezel light carry the
   depth. Same 120 ms follow and 320 ms spring. */
@media (prefers-reduced-motion: no-preference) {
  .is-tilting { transform-origin: 50% 50% -44px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}
/* The nav is dense enough, and dims what it blurs, so a foil button passing under it no longer smears gold across the bar. */
.nav { background: rgba(7,7,8,.9); backdrop-filter: blur(16px) saturate(.7) brightness(.6); -webkit-backdrop-filter: blur(16px) saturate(.7) brightness(.6); }
@media (max-width: 760px) { .nav-toggle { width: 44px; height: 44px; } }   /* a full 44 px target */

/* ---- 24. addenda (shared fixes found on /app; additive) ------------------------------------- */
/* Touch: a tapped foil button does not stay on its hover (brighter) frame. */
@media (hover: none) { .btn:hover { background-position: 0 100%; } }
/* The open mobile menu dims the page beneath it. Absolute, not fixed: .nav has a backdrop-filter, so it
   is the containing block for fixed descendants anyway. A tap on the scrim only closes the menu. */
@media (max-width: 760px) {
  .nav::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 100%); height: calc(100dvh - 100%); background: rgba(7,7,8,.62); opacity: 0; pointer-events: none; transition: opacity var(--med) var(--ease); }
  .nav.open::before { opacity: 1; pointer-events: auto; }
}
/* 44 px targets in the bar on phones: the brand mark and the "New post" button. */
@media (max-width: 600px) {
  .brand-mark { display: inline-block; line-height: 44px; }
  .nav .btn.sm { min-height: 44px; }
}
/* Colophon for app pages: <footer class="app-foot"><div class="wrap">…</div></footer> right after the main
   .wrap. With it the body becomes a column, so a short page still ends on the colophon at the bottom. */
.app-foot { position: relative; z-index: 1; border-top: 1px solid var(--hair); }
.app-foot .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 20px var(--pad-r) max(32px, env(safe-area-inset-bottom)) var(--pad-l); font-size: 13px; line-height: 1.5; color: var(--muted); }
.app-foot nav { display: flex; gap: 24px; }
.app-foot a { position: relative; color: var(--text-2); text-decoration: none; transition: color var(--fast) var(--ease); }
.app-foot a::before { content: ""; position: absolute; inset: -12px -8px; }   /* a 44 px hit area around a 13 px link */
.app-foot a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--hair-gold); text-underline-offset: 3px; }
body:has(> .app-foot) { display: flex; flex-direction: column; }
body:has(> .app-foot) > .wrap { flex: 1 0 auto; width: 100%; padding-bottom: 72px; }
@media (max-width: 600px) { .app-foot .wrap { justify-content: flex-start; } .app-foot .wrap > span:last-child { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .nav::before, .app-foot a { transition: none; } }

/* ---- 25. addenda (shared fixes found on /new; additive) ------------------------------------- */
/* A disabled button is unavailable, not broken: a quiet charcoal slab with no gold glow, instead of foil at
   45 % (which rendered as muddy mustard). Covers ghost, soft and danger too; still no pointer, no sheen. */
.btn:disabled, .btn[disabled] { opacity: 1; background: var(--surface-2); color: var(--muted-2); border-color: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn:disabled .arrow, .btn[disabled] .arrow { opacity: .5; }
/* A switch that is off rests: a visible track and a warm-grey knob, so a column of off toggles no longer reads
   as stray white dots that outshine their labels. On, the knob is white on foil as before. */
.toggle input { background: rgba(244,241,234,.08); border-color: var(--hair-3); }
.toggle input::after { background: #b9b4a9; }
.toggle input:checked::after { background: #fff; }
/* On and locked (the watermark on the free plan): a dim gold track at full opacity, not foil at 45 %. */
.toggle input:checked:disabled { opacity: 1; background: rgba(232,176,75,.18); border-color: var(--hair-gold); box-shadow: none; }

/* ---- 26. addenda (phone-first QA: targets, the drawer, the popover) ------------------------- */
/* TARGETS. Everything a thumb lands on is 44 px, but the SET keeps its proportions: a 34 px glyph stays
   34 px and grows an invisible hit area around it (an absolutely positioned ::after, so it is never a flex
   or grid item and never moves a layout). Where a control is a block of its own, it simply gets the height. */
.close-x { position: relative; }
.close-x::after { content: ""; position: absolute; inset: -6px; }                               /* a 34 px glyph, a 46 px target */
.toast-undo { min-height: 44px; min-width: 44px; padding: 10px 12px; }                          /* the only way back from a delete, on a 10 s clock */
.toast .close-x { flex: 0 0 auto; }
.menu-pop button { min-height: 44px; padding: 11px 12px; }
.back { position: relative; }
.back::after { content: ""; position: absolute; inset: -15px -8px; }                            /* 18 -> 48 */
.linkbtn { position: relative; }
.linkbtn::after { content: ""; position: absolute; inset: -14px -8px; }
.terms-foot-nav a { position: relative; display: inline-block; padding: 12px 0; margin: -12px 0; }
.terms-foot-nav a::after { content: ""; position: absolute; inset: 0 -8px; }
.err-card .notice-body .tiny a { position: relative; }
.err-card .notice-body .tiny a::after { content: ""; position: absolute; inset: -16px -6px; }
.btn.acct-cta, .btn.sm.acct-cta { min-height: 44px; }

/* THE DRAWER (phones). Closed it is `hidden` + `inert` (app.js), so it leaves the tab order and the reading
   order; the class rules below only decide what a shown drawer looks like. An open one holds the page still. */
.nav-links[hidden] { display: none !important; }
body.nav-open { overflow: hidden; }
@media (max-width: 760px) {
  .nav-links a { min-height: 44px; }                                                            /* flex items: the height applies */
  .nav-user, .nav-links a.nav-user, .nav-signout { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
}

/* THE POPOVER. It may be taller than a phone screen, and app.js flips it above its button when there is no
   room below, so the entrance comes from the side it opens on. */
.menu-pop { overflow-y: auto; overscroll-behavior: contain; }
.menu-pop.flip { transform: translateY(4px); }
.menu-pop.flip.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .menu-pop, .menu-pop.flip { transition: none; } }
.toggle input:checked:disabled::after { background: #b9b4a9; box-shadow: none; }