/* Pages: home scenes, catalog, service, info pages, order flow. */

.page-head { position: relative; display: grid; justify-items: start; gap: 24px; padding: calc(var(--header-h) + clamp(40px, 8vw, 96px)) 0 clamp(40px, 6vw, 72px); }
/* the dim wheel from the home hero, slowly turning behind every page title */
.page-head::after { content: ""; position: absolute; z-index: -1; right: calc(var(--gutter) * -1 - 6vw); top: -14%; width: min(58vw, 680px); aspect-ratio: 1; background: url(/img/wheel.webp) center / contain no-repeat; mix-blend-mode: screen; opacity: 0.13; pointer-events: none; animation: slow-spin 300s linear infinite; }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .page-head::after { width: 90vw; top: 0; opacity: 0.1; } }
.page-head h1 { max-width: 14em; }
main > section + section, main > .wrap + .wrap { margin-top: clamp(56px, 8vw, 112px); }
main > .page-head + section { margin-top: 0; }

/* ================= HOME: hero ================= */
.hero { --ws: min(132vh, 118vw); position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + 24px) 0 clamp(40px, 7vh, 88px); overflow: hidden; background: radial-gradient(120% 95% at 72% 42%, var(--wine-800), var(--wine-900) 62%); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.18 0.06 18 / 0.88) 0%, oklch(0.18 0.06 18 / 0.5) 38%, transparent 62%); }
.hero-layer { position: absolute; inset: 0; mix-blend-mode: screen; }
.hero-wheel-dim { opacity: 0.17; }
.hero-lantern {
  --lr: clamp(190px, 22vw, 330px);
  opacity: 0.96;
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx, 66%) var(--ly, 44%), #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 100%);
  mask-image: radial-gradient(circle var(--lr) at var(--lx, 66%) var(--ly, 44%), #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 100%);
}
.hero-wheel-pos { position: absolute; width: var(--ws); aspect-ratio: 1; right: calc(var(--ws) * -0.2); top: 50%; margin-top: calc(var(--ws) / -2); }
.hero-spin, .hero-spin img { width: 100%; height: 100%; }
/* procedural overlays (scripts/build-textures.py): a beam from the upper left and incense smoke rising behind the deck */
.hero-shaft { background: url(/img/fx/shaft.webp) 62% 0 / min(1100px, 92vw) auto no-repeat; opacity: 0.34; animation: beam-breathe 11s ease-in-out infinite alternate; }
.hero-smoke { background: url(/img/fx/smoke.webp) 78% 100% / min(1000px, 110vw) auto no-repeat; opacity: 0.3; animation: smoke-drift 48s ease-in-out infinite alternate; }
@keyframes beam-breathe { from { opacity: 0.22; } to { opacity: 0.4; } }
@keyframes smoke-drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.perf-low .hero-shaft, .perf-low .hero-smoke { animation: none; }
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.hero-copy { display: grid; justify-items: start; gap: 28px; }
.hero-copy h1 { max-width: none; }
.hero-copy h1 .line { display: block; }
.hero-sub { font-size: var(--fs-lead); line-height: 1.55; color: var(--bone-dim); max-width: 32ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-top: 8px; }
.js-motion .hero:not(.is-ready) .hero-copy > *:not(h1), .js-motion .hero:not(.is-ready) .deck-wrap, .js-motion .hero:not(.is-ready) h1 { visibility: hidden; }

.deck-wrap { display: grid; justify-items: center; gap: 28px; }
.deck { --hcw: clamp(150px, 17vw, 262px); position: relative; width: min(100%, 640px); height: calc(var(--hcw) * 1.6 + clamp(40px, 5vw, 80px)); }
.deck-card { --cw: var(--hcw); position: absolute; }
.deck-card--0 { left: 1%; top: 17%; rotate: -9deg; }
.deck-card--1 { left: 50%; top: 0; margin-left: calc(var(--hcw) / -2); z-index: 2; }
.deck-card--2 { right: 1%; top: 17%; rotate: 9deg; }
.deck-card.is-flipped { z-index: 3; }
.deck-caption { display: grid; justify-items: center; gap: 6px; min-height: 5.6em; max-width: 36ch; padding: 14px 18px; text-align: center; font-size: var(--fs-small); line-height: 1.5; color: var(--bone-dim); background: oklch(0.14 0.045 18 / 0.82); border-radius: var(--radius); }
.deck-caption strong { font: 400 28px/1.1 var(--font-display); color: var(--bone); }
.deck-caption span { color: var(--bone-dim); }

@media (max-width: 900px) {
  .hero { --ws: 150vw; align-items: start; }
  .hero-wheel-pos { right: -48vw; top: 60%; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy h1 { max-width: none; }
  .deck { --hcw: clamp(112px, 30vw, 200px); }
}

/* ================= HOME: question becomes an image ================= */
.develop { position: relative; height: 320vh; margin-top: 0 !important; }
.develop-stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; background: var(--wine-900); }
.develop-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; mix-blend-mode: screen; }
.develop-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url(/img/fx/dust.webp) 0 0 / 900px auto; mix-blend-mode: screen; opacity: 0.55; pointer-events: none; }
.develop-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wine-900) 14%, oklch(0.18 0.06 18 / 0.78) 42%, transparent 72%); pointer-events: none; }
.develop-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 6vh, 64px); }
.develop-copy h2 { max-width: 9em; }
.develop-steps { list-style: none; display: grid; gap: clamp(20px, 4vh, 36px); max-width: 420px; }
.develop-step h3 { margin-bottom: 8px; }
.develop-step p { color: var(--bone-dim); }
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .develop { height: auto; padding-top: clamp(64px, 12vw, 120px); }
  .develop-stage { position: relative; height: auto; display: grid; gap: 40px; padding-bottom: 0; }
  .develop-stage::after { display: none; }
  .develop-art { position: relative; order: 2; height: auto; aspect-ratio: 1600 / 1340; }
  .develop-copy { height: auto; }
}

/* ================= HOME: atlas ================= */
.atlas { margin-top: clamp(64px, 10vw, 140px); }
.atlas-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.atlas-stage { position: sticky; top: calc(var(--header-h) + 2vh); height: calc(100dvh - var(--header-h) - 6vh); min-height: 420px; background: var(--wine-900); overflow: hidden; }
.atlas-wheel { position: absolute; inset: 0; display: grid; place-items: center; mix-blend-mode: screen; opacity: 0.8; }
.atlas-wheel-spin { width: min(100%, 78vh); aspect-ratio: 1; }
.atlas-wheel-spin img { width: 100%; height: 100%; }
.atlas-card { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; filter: blur(12px) brightness(0.55); scale: 0.94; transition: opacity 0.9s var(--ease-out), filter 1s var(--ease-out), scale 1s var(--ease-out); pointer-events: none; }
.atlas-card .card { --cw: clamp(170px, 17vw, 260px); }
.atlas-card.is-active { opacity: 1; filter: none; scale: 1; }
.atlas-list { padding-bottom: 20vh; }
.atlas-list > h2 { margin-bottom: 20px; }
.atlas-rows { list-style: none; margin: clamp(32px, 5vw, 64px) 0; }
.atlas-row { display: grid; grid-template-columns: 1fr; align-content: center; gap: 10px; min-height: 30vh; padding: 28px 0; border-top: 1px solid var(--line); opacity: 0.74; transition: opacity 0.6s var(--ease-out); }
.atlas-row.is-active { opacity: 1; }
.atlas-row h3 { font-size: clamp(32px, 1.4rem + 2.6vw, 60px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
.atlas-row h3 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .atlas-row h3 a:hover { color: var(--accent); } }
.atlas-row p { color: var(--bone-dim); }
.atlas-row .row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font: 400 13px/1.4 var(--font-mono); color: var(--bone-dim); }
.row-thumb { display: none; }
@media (max-width: 900px) {
  .atlas-grid { grid-template-columns: 1fr; }
  .atlas-stage { display: none; }
  .atlas-list { padding-bottom: 0; }
  .atlas-row { opacity: 1; min-height: 0; grid-template-columns: 1fr 64px; column-gap: 20px; align-content: start; }
  .atlas-row > * { grid-column: 1; }
  .atlas-row .row-thumb { display: block; grid-column: 2; grid-row: 1 / span 3; width: 64px; height: auto; border-radius: 4px; background: var(--wine-800); mix-blend-mode: screen; }
}

/* ================= HOME: how ================= */
.how { margin-top: clamp(64px, 10vw, 140px); }
.how-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.how-grid > h2 { position: sticky; top: calc(var(--header-h) + 32px); max-width: 8em; }
.how-steps { position: relative; }
.how-steps::before, .how-line { content: ""; position: absolute; left: 24px; top: 24px; bottom: 24px; width: 1px; background: var(--wine-600); }
.how-line { background: var(--accent); transform-origin: top; }
.how-steps ol { list-style: none; display: grid; gap: clamp(40px, 7vw, 88px); }
.how-steps li { position: relative; padding-left: 88px; }
.how-num { position: absolute; left: 0; top: -6px; width: 48px; padding: 6px 0; background: var(--wine-900); text-align: center; font: 400 44px/1 var(--font-display); color: var(--accent); }
.how-steps h3 { margin-bottom: 10px; }
.how-steps p { color: var(--bone-dim); max-width: 46ch; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } .how-grid > h2 { position: static; } }

/* ================= HOME: sample + finale ================= */
.sample-band { margin-top: clamp(80px, 12vw, 180px); display: grid; gap: clamp(32px, 5vw, 56px); }
.sample-band blockquote { margin: 0; }
.sample-band blockquote p { max-width: 24em; font: italic 400 clamp(32px, 1.5rem + 2.7vw, 66px)/1.16 var(--font-italic); letter-spacing: -0.01em; text-wrap: balance; }
.sample-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.finale { position: relative; margin-top: clamp(80px, 12vw, 180px); display: grid; justify-items: start; gap: 28px; }
.finale::before { content: ""; position: absolute; z-index: -1; right: -6%; bottom: -30%; width: min(720px, 90%); aspect-ratio: 3 / 2; background: url(/img/fx/smoke.webp) center / contain no-repeat; mix-blend-mode: screen; opacity: 0.22; pointer-events: none; }
.finale h2 { font-size: clamp(40px, 1.8rem + 4.6vw, 92px); max-width: 10em; }

/* ================= CATALOG ================= */
.featured { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(24px, 4vw, 48px); background: var(--wine-800); border: 1px solid var(--wine-700); border-radius: var(--radius); }
.featured-card .card { --cw: clamp(150px, 16vw, 230px); }
.featured-copy { display: grid; justify-items: start; gap: 18px; }
.featured-copy h2 { font-size: clamp(34px, 1.6rem + 2.4vw, 60px); }
.featured-copy p:not(.tag) { color: var(--bone-dim); max-width: 52ch; }
@media (max-width: 640px) { .featured { grid-template-columns: 1fr; justify-items: start; } .featured-card .card { --cw: 150px; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border: 1px solid var(--wine-600); border-radius: 999px; background: none; color: var(--bone-dim); font: 500 14px/1.2 var(--font-body); transition: color 0.25s, border-color 0.25s, background-color 0.25s; }
.filters button span { font: 400 12px var(--font-mono); color: var(--bone-faint); }
.filters button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .filters button:hover { border-color: var(--bone-faint); color: var(--bone); } }
.filters button.is-active { border-color: var(--accent); color: var(--accent); }
.filters button.is-active span { color: inherit; }
.count { margin: 28px 0 8px; }
.index-list { list-style: none; }
.row { border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) 120px 120px 104px; align-items: baseline; gap: 12px 32px; padding: 26px 0; text-decoration: none; transition: opacity 0.4s; }
.row-title { font: 400 clamp(26px, 1.2rem + 1.5vw, 42px)/1.1 var(--font-display); letter-spacing: -0.02em; transition: translate 0.5s var(--ease-out), color 0.3s; }
.row-lead { color: var(--bone-dim); font-size: 16px; line-height: 1.5; }
.row-group { font: 400 13px/1.4 var(--font-mono); color: var(--bone-faint); }
.row-price { font: 400 20px/1.2 var(--font-display); color: var(--bone); text-align: right; white-space: nowrap; }
.row-state { font-size: 13px; color: var(--bone-faint); text-align: right; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 0; }
.price-value { font: 400 clamp(30px, 1.3rem + 1.4vw, 42px)/1 var(--font-display); color: var(--bone); }
.themes { display: grid; gap: 10px; }
.themes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.row-state.is-demo { color: var(--accent); }
.index-list:has(.row a:focus-visible) .row a:not(:focus-visible) { opacity: 0.4; }
@media (hover: hover) and (pointer: fine) { .index-list:has(.row a:hover) .row a:not(:hover) { opacity: 0.4; } }
.row a:focus-visible .row-title { translate: 14px 0; color: var(--bone); }
.row a:active, .queue-list a:active, .orders-list a:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .row a:hover .row-title { translate: 14px 0; color: var(--bone); } }
.empty { padding: 48px 0; color: var(--bone-dim); }
.cursor-card { position: fixed; left: 0; top: 0; z-index: var(--z-float); pointer-events: none; }
.cursor-card .card { --cw: 190px; opacity: 0; filter: blur(10px) brightness(0.6); transform: scale(0.92); transition: opacity 0.35s, filter 0.5s, transform 0.6s var(--ease-out); }
.cursor-card.is-on .card { opacity: 1; filter: none; transform: none; }
@media (hover: none) { .cursor-card { display: none; } }
@media (max-width: 860px) {
  .row a { grid-template-columns: minmax(0, 1fr) 56px; gap: 6px 20px; padding: 22px 0; }
  .row a > * { grid-column: 1; }
  .row-group, .row-state, .row-price { display: inline; text-align: left; }
  .row-price { font-size: 18px; }
  .row-thumb { display: block; grid-column: 2; grid-row: 1 / span 4; width: 48px; height: auto; border-radius: 4px; background: var(--wine-800); mix-blend-mode: screen; }
}

/* ================= SERVICE ================= */
.service { padding-top: calc(var(--header-h) + 32px); }
.service .back { display: inline-block; margin-bottom: clamp(24px, 4vw, 48px); font-size: 15px; }
.service-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.service-card { position: sticky; top: calc(var(--header-h) + 24px); display: grid; justify-items: center; }
.service-card .card { --cw: clamp(200px, 26vw, 380px); }
.service-copy { display: grid; justify-items: start; gap: 24px; }
.service-copy h1 { max-width: 9em; }
.facts { display: grid; width: 100%; margin: 16px 0 0; }
.facts > div { display: grid; grid-template-columns: minmax(120px, 0.32fr) 1fr; gap: 12px 32px; padding: 24px 0; border-top: 1px solid var(--line); }
.facts dt { font: 400 13px/1.5 var(--font-mono); color: var(--bone-faint); padding-top: 4px; }
.facts dd { margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--bone-dim); }
.service-action { display: grid; justify-items: start; gap: 16px; margin-top: 8px; }
.more { margin-top: clamp(64px, 9vw, 120px); padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: baseline; }
.more h2 { font: 400 13px/1.5 var(--font-mono); letter-spacing: 0.02em; color: var(--bone-faint); }
.more ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 32px; }
@media (max-width: 860px) { .service-grid { grid-template-columns: 1fr; } .service-card { position: static; justify-items: start; } .service-card .card { --cw: 180px; } .facts > div { grid-template-columns: 1fr; } }

/* ================= INFO PAGES ================= */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split-lead { position: sticky; top: calc(var(--header-h) + 24px); display: grid; justify-items: start; gap: 20px; }
.split-lead h2 { font-size: clamp(30px, 1.4rem + 1.8vw, 52px); }
.split-lead p { color: var(--bone-dim); }
.steps { list-style: none; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-num { font: 400 44px/1 var(--font-display); color: var(--accent); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--bone-dim); }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--wine-600); border-radius: var(--radius); }
.callout p { max-width: 30ch; font: 400 clamp(24px, 1.2rem + 1.2vw, 36px)/1.25 var(--font-display); }
.plain { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split-lead { position: static; } }

.sample-layout { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sample-context { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }
.sample-context h2 { font-size: clamp(28px, 1.3rem + 1.4vw, 42px); }
.sample-context p { color: var(--bone-dim); }
.document { display: grid; gap: 4px; padding: clamp(28px, 5vw, 64px); background: var(--wine-800); border: 1px solid var(--wine-700); border-radius: var(--radius); }
.document h2 { margin: 12px 0 16px; font-size: clamp(34px, 1.5rem + 2vw, 56px); }
.doc-lead { font: 400 clamp(20px, 1rem + 0.7vw, 26px)/1.55 var(--font-display); color: var(--bone); max-width: 38ch; }
.document section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.document h3 { margin-bottom: 10px; }
.document section p, .document li { color: var(--bone-dim); line-height: 1.75; }
.document ul { padding-left: 1.1em; display: grid; gap: 6px; }
.doc-foot { margin-top: 32px; font-size: var(--fs-small); color: var(--bone-faint); }
@media (max-width: 860px) { .sample-layout { grid-template-columns: 1fr; } .sample-context { position: static; } }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; list-style: none; cursor: pointer; font: 400 clamp(22px, 1rem + 1.4vw, 32px)/1.25 var(--font-display); letter-spacing: -0.01em; transition: color 0.25s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:active { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent); } }
.faq summary i { position: relative; flex: none; width: 18px; height: 18px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; }
.faq summary i::after { transform: rotate(90deg); transition: transform var(--dur-ui) var(--ease-out); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), content-visibility var(--dur-ui) allow-discrete; }
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq details p { padding-bottom: 28px; color: var(--bone-dim); }

.blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.blocks article { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.blocks h2 { font-size: var(--fs-h3); font-weight: 400; }
.blocks p { color: var(--bone-dim); }
.blocks .link { margin-top: auto; }
@media (max-width: 860px) { .blocks { grid-template-columns: 1fr; } }

.status-list { margin: 0 0 32px; }
.status-list > div { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.status-list > div:last-child { border-bottom: 1px solid var(--line); }
.status-list dt { color: var(--bone-dim); }
.status-list dd { margin: 0; font: 400 14px var(--font-mono); color: var(--bone); text-align: right; }
.panel { display: grid; justify-items: start; gap: 16px; padding: clamp(24px, 3vw, 36px); background: var(--wine-800); border: 1px solid var(--wine-700); border-radius: var(--radius); }
.panel p { color: var(--bone-dim); }

.offer { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.offer .panel { position: sticky; top: calc(var(--header-h) + 24px); }
.offer-body { display: grid; gap: 40px; }
.offer-body section { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.offer-body h2 { font-size: var(--fs-h3); font-weight: 400; }
.offer-body h2 span { margin-right: 0.3em; color: var(--accent); }
.offer-body p { max-width: 62ch; color: var(--bone-dim); line-height: 1.7; }
@media (max-width: 860px) { .offer { grid-template-columns: 1fr; } .offer .panel { position: static; } }

.about-card { display: grid; justify-items: center; }
.about-card .card { --cw: clamp(200px, 24vw, 340px); }
.prose { display: grid; gap: 18px; }
.prose h2 { font-size: var(--fs-h3); font-weight: 400; margin-top: 18px; }
.prose h2:first-child { margin-top: 0; }
.prose ol { display: grid; gap: 10px; padding-left: 1.3em; color: var(--bone-dim); }
.prose p { color: var(--bone-dim); }

/* ================= ORDER FLOW ================= */
.checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.checkout-form { display: grid; gap: 40px; justify-items: start; }
.checkout-form > fieldset, .checkout-form > .terms { width: 100%; }
.scenarios { display: grid; gap: 12px; }
.scenario { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 20px 22px; border: 1px solid var(--wine-600); border-radius: var(--radius); cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
@media (hover: hover) and (pointer: fine) { .scenario:hover { border-color: var(--bone-faint); } }
.scenario:has(input:checked) { border-color: var(--accent); background: var(--wine-800); }
.scenario strong { display: block; margin-bottom: 4px; font: 400 22px/1.2 var(--font-display); }
.scenario small { display: block; font-size: 15px; line-height: 1.55; color: var(--bone-dim); }
.terms { display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); background: var(--wine-800); border: 1px solid var(--wine-700); border-radius: var(--radius); }
.terms h2 { font-size: clamp(26px, 1.2rem + 1.2vw, 38px); }
.terms p:not(.mono) { color: var(--bone-dim); }
.terms .check { padding-top: 20px; border-top: 1px solid var(--line); color: var(--bone); font-weight: 500; }
.checkout-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; justify-items: start; gap: 14px; }
.checkout-aside .card { --cw: clamp(150px, 15vw, 220px); margin-bottom: 10px; }
.checkout-aside h2 { font-size: 32px; }
.checkout-aside p:not(.note) { color: var(--bone-dim); }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; width: 100%; padding: 16px 0; border-block: 1px solid var(--line); }
.total strong { font: 400 28px var(--font-display); }
.total--demo { border-top: 0; padding-top: 0; color: var(--bone-dim); }
.total--demo strong { color: var(--accent); }
@media (max-width: 860px) { .checkout { grid-template-columns: 1fr; } .checkout-aside { position: static; } }

.order-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.order-main { display: grid; gap: 16px; justify-items: start; }
.order-main h2 { font-size: var(--fs-h3); font-weight: 400; }
.question { font: italic 400 clamp(23px, 1.05rem + 1vw, 32px)/1.4 var(--font-italic); color: var(--bone-dim); max-width: 34ch; }
.dealt { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 32px); width: 100%; margin: 28px 0; }
.dealt figure { margin: 0; display: grid; gap: 14px; }
.dealt .card { --cw: 100%; }
.dealt figcaption { display: grid; gap: 2px; font: 400 13px/1.4 var(--font-mono); color: var(--bone-faint); }
.dealt figcaption strong { font: 400 22px/1.2 var(--font-display); color: var(--bone); }
.dealt-card[data-wait] { animation: breathe 8s ease-in-out infinite; }
.dealt li:nth-child(2) .dealt-card { animation-delay: 0.8s; } .dealt li:nth-child(3) .dealt-card { animation-delay: 1.6s; }
@keyframes breathe { 50% { transform: translateY(-6px); } }
.waiting { color: var(--bone-dim); }
.result-text { white-space: pre-line; max-width: 58ch; font: 400 clamp(20px, 1rem + 0.7vw, 26px)/1.65 var(--font-display); }
.result-text p { margin: 0 0 1.1em; }
.result-text p:last-child { margin-bottom: 0; }
.result-note { font-size: var(--fs-small); color: var(--bone-faint); }
.order-side { display: grid; justify-items: start; gap: 16px; padding: 24px; border: 1px solid var(--wine-600); border-radius: var(--radius); }
.order-side p { color: var(--bone-dim); font-size: 15px; }
.state { display: inline-block; padding: 4px 12px; border: 1px solid var(--wine-600); border-radius: 999px; font: 400 13px/1.4 var(--font-body); color: var(--bone-dim); }
.state.is-done { border-color: var(--accent); color: var(--accent); }
@media (max-width: 860px) { .order-layout { grid-template-columns: 1fr; } }

.queue-list { list-style: none; }
.queue-list li { border-top: 1px solid var(--line); }
.queue-list li:last-child { border-bottom: 1px solid var(--line); }
.queue-list a { display: grid; grid-template-columns: 150px 1fr 1fr auto; align-items: center; gap: 12px 24px; padding: 22px 0; text-decoration: none; transition: color 0.25s; }
@media (hover: hover) and (pointer: fine) { .queue-list a:hover strong { color: var(--accent); } }
.queue-list strong { font: 400 22px var(--font-display); transition: color 0.25s; }
.queue-list time { font: 400 13px var(--font-mono); color: var(--bone-faint); }
@media (max-width: 760px) { .queue-list a { grid-template-columns: 1fr; } }
.empty-state { display: grid; justify-items: start; gap: 18px; padding: 48px 0; }
.empty-state p { color: var(--bone-dim); }

.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.review-source { display: grid; gap: 32px; }
.review-source section { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.review-source p { color: var(--bone-dim); }
.review-source .result-text { font-size: 18px; max-width: none; }
.review-editor { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.review-editor p { color: var(--bone-dim); font-size: 15px; }
.checks { display: grid; gap: 12px; }
.review-done { color: var(--accent); }
@media (max-width: 960px) { .review { grid-template-columns: 1fr; } .review-editor { position: static; } }

/* ================= ACCOUNT, AUTH, DAILY CARD ================= */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
button.link { padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }

.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.auth-form { display: grid; gap: 22px; justify-items: start; max-width: 460px; }
.auth-aside { display: grid; justify-items: center; gap: 20px; text-align: center; color: var(--bone-dim); }
.auth-aside .card { --cw: clamp(160px, 16vw, 230px); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-aside { display: none; } }

.account-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.account-main { display: grid; gap: clamp(40px, 6vw, 72px); }
.account-side { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 20px); justify-items: start; }
.account-side .panel { width: 100%; }
.account-side h2 { font-size: var(--fs-h3); font-weight: 400; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2, .account-section > h2 { font-size: clamp(28px, 1.3rem + 1.4vw, 42px); }
.account-section > h2 { margin-bottom: 20px; }
@media (max-width: 960px) { .account-grid { grid-template-columns: 1fr; } .account-side { position: static; } }

.daily { padding: clamp(24px, 4vw, 44px); }
.daily-open, .daily-ready { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.daily-open .card, .daily-ready .card { --cw: clamp(150px, 15vw, 220px); }
.daily-text { display: grid; gap: 14px; }
.daily-text h3 { font-size: clamp(26px, 1.2rem + 1.3vw, 38px); font-weight: 400; }
.daily-text section { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.daily-text h4 { margin: 0; font: 400 13px/1.4 var(--font-mono); color: var(--accent); }
.daily-text p { color: var(--bone-dim); }
.daily-ready > div { display: grid; gap: 14px; justify-items: start; }
.daily-ready h3, .daily-locked h3 { font-size: clamp(26px, 1.2rem + 1.3vw, 38px); font-weight: 400; }
.daily-locked { display: grid; gap: 14px; justify-items: start; }
.checklist { list-style: none; display: grid; gap: 10px; }
.checklist li { display: flex; align-items: center; gap: 12px; color: var(--bone-dim); }
.checklist li span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--wine-600); border-radius: 50%; font-size: 13px; }
.checklist li.is-done { color: var(--bone); }
.checklist li.is-done span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
@media (max-width: 640px) { .daily-open, .daily-ready { grid-template-columns: 1fr; justify-items: start; } }

.orders-list { list-style: none; }
.orders-list li { border-top: 1px solid var(--line); }
.orders-list li:last-child { border-bottom: 1px solid var(--line); }
.orders-list a { display: grid; grid-template-columns: 120px minmax(0, 0.9fr) minmax(0, 1.4fr) auto; align-items: center; gap: 10px 24px; padding: 20px 0; text-decoration: none; }
.orders-list strong { font: 400 22px/1.2 var(--font-display); transition: color 0.25s; }
@media (hover: hover) and (pointer: fine) { .orders-list a:hover strong { color: var(--accent); } }
.orders-q { color: var(--bone-dim); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders-list time { font: 400 13px var(--font-mono); color: var(--bone-faint); }
@media (max-width: 760px) { .orders-list a { grid-template-columns: 1fr; } .orders-q { white-space: normal; } }

.daily-history { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.daily-history li { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--wine-700); border-radius: var(--radius); }
.daily-history img { width: 40px; border-radius: 3px; background: var(--wine-800); mix-blend-mode: screen; }
.daily-history span { display: grid; }
.daily-history strong { font: 400 18px var(--font-display); }
.daily-history small { font-size: 13px; color: var(--bone-faint); }

.profile-form { display: grid; gap: 24px; max-width: 720px; justify-items: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; width: 100%; }
.field-row > .field { align-content: start; }
.profile-form + .profile-form { margin-top: 40px; }
#photo-form { width: 100%; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); background: var(--wine-950); }
#photo-form h2 { font-size: clamp(28px, 4vw, 40px); }
.order-profile { min-width: 0; border-top: 1px solid var(--line); padding-top: 18px; }
.order-profile summary { cursor: pointer; color: var(--bone); }
.order-profile summary .note { display: block; margin: 4px 0 0; }
.order-profile-fields { display: grid; gap: 18px; margin-top: 20px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.theme-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; display: inline-block; }
.pick input { position: absolute; inset: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.pick span { display: inline-block; padding: 8px 16px; border: 1px solid var(--wine-600); border-radius: 999px; font-size: 14px; color: var(--bone-dim); cursor: pointer; transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.pick input:checked + span { border-color: var(--accent); color: var(--accent); }
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.order-fields { display: grid; gap: 22px; width: 100%; }
.order-fields-list { display: grid; gap: 10px; margin: 0; width: 100%; }
.order-fields-list > div { display: grid; gap: 2px; }
.order-fields-list dt { font: 400 12px/1.4 var(--font-mono); color: var(--bone-faint); }
.order-fields-list dd { margin: 0; color: var(--bone); font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.dealt--many { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.dealt--one { grid-template-columns: minmax(0, 240px); }

/* ================= HOME: daily card promo ================= */
.daily-promo { margin-top: clamp(80px, 12vw, 160px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.daily-promo-cards { position: relative; height: clamp(320px, 34vw, 460px); }
.promo-card { position: absolute; --cw: clamp(160px, 15vw, 230px); }
.promo-card--back { left: 8%; top: 12%; rotate: -10deg; }
.promo-card--front { left: 34%; top: 0; rotate: 6deg; z-index: 2; }
.daily-promo-copy { display: grid; gap: 22px; justify-items: start; }
.promo-steps { list-style: none; display: grid; gap: 12px; }
.promo-steps li { display: flex; align-items: center; gap: 16px; font-size: var(--fs-lead); }
.promo-steps span { font: 400 30px/1 var(--font-display); color: var(--accent); width: 28px; }
@media (max-width: 860px) { .daily-promo { grid-template-columns: 1fr; } .daily-promo-cards { height: 330px; max-width: 420px; } }

/* practitioner's personal note under the result */
.tarot-note { display: grid; gap: 10px; max-width: 58ch; padding: 24px 28px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--wine-800); }
.tarot-note .mono { color: var(--accent); }
.tarot-note p:last-child { font: italic 400 clamp(21px, 1rem + 0.8vw, 27px)/1.45 var(--font-italic); color: var(--bone); }
.note-input { min-height: 110px; }

/* ---------- admin statistics ---------- */
.stats h2 { margin: 2.4rem 0 .8rem; font-size: var(--fs-h3); }
.stats-range { display: flex; gap: 1.2rem; margin-bottom: 1rem; }
.stats-scroll { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.stats-table th, .stats-table td { padding: .55rem .8rem .55rem 0; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stats-table thead th { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bone-faint); font-weight: 400; }
.stats-table tbody th { font-weight: 400; white-space: normal; }
.stats-table td { font-variant-numeric: tabular-nums; }
.stats-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.stats-bars li { display: grid; grid-template-columns: 3.5rem 1fr 3rem; align-items: center; gap: .6rem; font-size: .85rem; }
.stats-bars .bar { display: block; height: .55rem; background: var(--accent); border-radius: 2px; }
.stats-bars b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.prerender { padding-block: 6rem 3rem; max-width: 46rem; }
.prerender h1 { font-family: var(--font-display); margin-bottom: 1rem; }
.prerender ul { padding-left: 1.2rem; }

/* ---------- mobile fixes (audit at 320, 360, 390 px) ---------- */
/* Forms nested in panels must fill the panel, not shrink to their content. */
.auth-form { grid-template-columns: minmax(0, 1fr); }
.panel .auth-form, .panel form { width: 100%; max-width: none; }
.panel .btn { max-width: 100%; }

@media (max-width: 860px) {
  /* Price and what is included come before the form, so they are visible before the button. */
  .checkout-aside { order: -1; position: static; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .checkout-aside .card { display: none; }

  /* Comfortable targets for fingers. */
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer nav { gap: 0; }
  .site-footer nav .link, .footer-legal .link, .back { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-actions { row-gap: 8px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .link { display: inline-flex; align-items: center; min-height: 44px; }

  /* The "payment is not connected" note flows after the footer instead of covering the page. */
  .demo-tag { position: static; display: block; max-width: none; margin: 0; border-width: 1px 0 0; border-radius: 0; text-align: center; }
  .site-footer { padding-bottom: 40px; }
}

@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; padding-block: 14px; height: auto; }
  .review-editor textarea { min-height: 320px; }
  .stats-table th, .stats-table td { padding-right: 0.6rem; }
}

@media (max-width: 420px) {
  .site-header { gap: 12px; }
  .site-header .brand-note { display: none; }
  .brand-word { font-size: 22px; }
  .menu-toggle { margin-left: 12px; }
}
@media (max-width: 860px) {
  .filters button { min-height: 44px; }
  /* Stand-alone links get a finger-sized target; links inside a sentence keep flowing with the text. */
  .link:not(p .link, .note .link, .check .link) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Decorative layers (engraving behind page headings, hero wheel) may extend past the screen edge; they must not create sideways scroll. */
html, body { overflow-x: clip; }

/* ---------- order states: progress, delay, long question, print ---------- */
.order-steps { width: 100%; justify-self: stretch; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; padding: 0; }
.order-steps li { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 2px solid var(--wine-600); font-size: 14px; line-height: 1.4; color: var(--bone-faint); }
.order-steps strong { font-weight: 500; color: var(--bone-dim); }
.order-steps li.is-done { border-color: var(--accent); }
.order-steps li.is-done strong { color: var(--bone); }
.order-steps li.is-current { border-color: var(--bone); }
.order-steps li.is-current strong { color: var(--bone); }
@media (max-width: 560px) { .order-steps { grid-template-columns: 1fr; gap: 0; } .order-steps li { padding: 10px 0 10px 14px; border-top: 0; border-left: 2px solid var(--wine-600); } }
.late { padding: 14px 16px; border: 1px solid var(--danger); border-radius: var(--radius); color: var(--bone); background: oklch(0.88 0.13 95 / 0.07); }
.state.is-late { border-color: var(--danger); color: var(--danger); }
.order-fields-list dd { overflow-wrap: anywhere; }
.more summary { cursor: pointer; list-style-position: outside; }
.more[open] summary { margin-bottom: 8px; color: var(--bone-faint); }
.question { overflow-wrap: anywhere; }
.order-number { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
@media print {
  .site-header, .site-footer, .menu-panel, .grain, .demo-tag, .toasts, .order-side, .order-steps, #refresh, .skip { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; overflow: visible; }
  main, .wrap, .order-layout { display: block !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .page-head::after { display: none; }
  h1, .question, .result-text, .tarot-note, .tarot-note p, .result-note, .mono { color: #000 !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .dealt { display: none; }
  [data-reveal], .result-text * { opacity: 1 !important; transform: none !important; visibility: visible !important; }
}

/* payment screens */
.payment-state { display: grid; justify-items: start; gap: 28px; }
.payment-state > * { max-width: 720px; }
.payment-state .status-list { width: 100%; margin: 0; }
.payment-text { max-width: 60ch; font-size: var(--fs-lead, 1.15rem); line-height: 1.6; }
.contact-list { display: grid; gap: 8px; }
.price-table td { white-space: normal; min-width: 13rem; vertical-align: top; }
.price-table th[scope=row] { vertical-align: top; min-width: 9rem; }
/* Narrow screens: one card per reading, label above each value, nothing hides behind a horizontal scroll. */
@media (max-width: 640px) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .price-table tr { padding: 20px 0; border-top: 1px solid var(--line); }
  .price-table tr:last-child { border-bottom: 1px solid var(--line); }
  .price-table th, .price-table td { padding: 0; border: 0; white-space: normal; }
  .price-table th[scope=row] { min-width: 0; margin-bottom: 4px; font: 400 22px/1.25 var(--font-display); }
  .price-table td { min-width: 0; margin-top: 10px; }
  .price-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 400 12px/1.4 var(--font-mono); color: var(--bone-faint); }
  .price-table td[data-label="Цена"] { color: var(--bone); font-weight: 500; }
}
.audit-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--bone-dim); }
.audit-list time { display: block; font: 400 12px var(--font-mono); color: var(--bone-faint); }
.placement-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; align-items: end; margin: 1.2rem 0 2rem; }
.placement-form .form-error { grid-column: 1 / -1; }
.follow-up { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.follow-up h2 { margin-bottom: 12px; }
.follow-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.follow-up p { margin-bottom: 16px; color: var(--bone-dim); }
.index .featured { margin: clamp(20px, 3vw, 32px) 0 clamp(8px, 2vw, 16px); }
.regular { margin-top: clamp(40px, 6vw, 72px); }
.regular .note { margin: 8px 0 16px; color: var(--bone-dim); }
/* Practitioner settings under the queue: review time. */
.queue-settings { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 12px; justify-items: start; }
.queue-settings > * { max-width: 640px; }
.queue-settings h2 { font-size: clamp(24px, 1rem + 1.4vw, 32px); }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.field--short input { width: 9ch; }
/* Practitioner: prompt editor. */
.prompts { display: grid; gap: 0; }
.prompts > * { max-width: 860px; }
.prompt-item summary { font-size: 18px; }
.prompt-form { display: grid; gap: 12px; margin-top: 12px; }
.prompt-form textarea { width: 100%; font-size: 15px; line-height: 1.55; }
.prompt-fixed { font-size: 14px; color: var(--bone-dim); line-height: 1.55; }
.queue-tools { margin-top: 24px; }
/* Owner report: the summary tiles and the invite links. */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.kpi { padding: 14px 16px; border: 1px solid var(--wine-700); border-radius: var(--radius); background: var(--wine-800); }
.kpi dt { font: 400 .75rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-faint); }
.kpi dd { margin: 6px 0 0; font: 400 clamp(22px, 1rem + 1vw, 30px) var(--font-display); font-variant-numeric: tabular-nums; }
.spend-inline { display: flex; gap: 6px; align-items: center; }
.spend-inline input { width: 9ch; padding: 4px 8px; }
/* A folded block inside a page: the original draft, the order journal, a prompt, the password form. */
.fold { border-top: 1px solid var(--line); padding: 14px 0; }
.fold > summary { cursor: pointer; font-size: 17px; list-style-position: outside; }
.fold[open] > summary { margin-bottom: 12px; color: var(--bone-faint); }
.review-source .fold { margin-top: 8px; }

/* Team: the code screen, the owner's team block, the list of sessions */
.staff-code { display: grid; gap: 1rem; justify-items: start; }
.staff-code > * { max-width: 640px; }
.staff-code-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.staff-code-form input { max-width: 10ch; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.team { margin-top: 3rem; display: grid; gap: 1rem; }
.staff-grant-form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; max-width: 900px; }
.staff-grant-form > .staff-roles, .staff-grant-form > .form-error { grid-column: 1 / -1; }
.staff-roles { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.staff-roles legend { margin-bottom: .5rem; }
.staff-roles .row-actions { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.staff-grant-form > .btn { justify-self: start; }
.audit, .sessions { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .6rem; font-size: .92rem; }
.audit time { font-variant-numeric: tabular-nums; opacity: .75; margin-right: .4rem; }

/* admin: sections */
.stats-tabs { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: 1.2rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }

/* order form: promo code */
.promo-field { margin: 1rem 0; }
.promo-field summary { cursor: pointer; color: var(--bone-faint); }
.promo-row { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; margin-top: .6rem; }
.promo-row .field { flex: 1 1 14rem; }
.promo-products { border: 0; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.promo-products legend { font: 400 .75rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: .6rem; }

/* Balance of the account (account page): the sum, the ready top-up sums, the history */
.balance-sum { margin: 0; }
.balance-sum strong { font: 400 clamp(30px, 1.2rem + 2vw, 44px) var(--font-display); font-variant-numeric: tabular-nums; }
.balance-form { display: grid; gap: 14px; }
.pick--button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pick--button:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pick--button:hover span { border-color: var(--accent); color: var(--accent); } }
.sessions .plus { color: var(--accent); font-variant-numeric: tabular-nums; }
.sessions .minus { font-variant-numeric: tabular-nums; }

/* People in the owner's list: avatar (or initials) and the lines that tell them apart */
.person { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 14rem; }
.person > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.avatar { flex: none; display: inline-grid; place-items: center; overflow: hidden; border: 1px solid var(--wine-600); border-radius: 50%; background: var(--wine-800); color: var(--bone-dim); font: 400 14px var(--font-mono); letter-spacing: 0.04em; }
.avatar--sm { width: 44px; height: 44px; }
.avatar--lg { width: 88px; height: 88px; font-size: 24px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-head { display: flex; align-items: center; gap: 20px; margin: 8px 0 24px; }
.user-head h2 { margin: 0; }
.user-head .note { margin: 4px 0 0; }
.balance-box { display: grid; gap: 12px; max-width: 560px; padding: clamp(18px, 3vw, 26px); margin-bottom: 32px; border: 1px solid var(--wine-700); border-radius: var(--radius); background: var(--wine-800); }
.balance-box .balance-sum { margin: 0; }
.user-card .status-list { max-width: 760px; }
.user-card h3 { margin-top: 36px; }