/* Dovito AI marketing system, v2 (2026-11-11). Loads after styles.css. Rules: docs/marketing-brief.md (v2 section).
   Reference: docs/marketing-components.md. Page-scoped rules go in public/pages/<page>.css, never here. */

/* ---- Tokens. data-theme on <body> only picks the hero mesh colors. Brand tokens are neutral navy now:
   v2 keeps product colors for icons and scene tints, never for buttons, links, text or section grounds. ---- */
:root, [data-theme="lab"] {
  --brand: var(--btn-bg); --brand-ink: var(--btn-ink); --brand-fg: var(--accent); --brand-tint: rgba(26, 54, 93, 0.07);
  --mesh-1: #1A365D; --mesh-2: #2840F0; --mesh-3: #6B4EE6; --mesh-4: #D2462F;
  --grey-ground: #F5F5F7; --card-on-grey: #FFFFFF;
}
[data-theme="pdf"] { --mesh-1: #D2462F; --mesh-2: #F28C5B; --mesh-3: #FFC9A8; --mesh-4: #1A365D; }
[data-theme="canvas"] { --mesh-1: #6B4EE6; --mesh-2: #A48BFF; --mesh-3: #4FC3F7; --mesh-4: #1A365D; }
.dark, .dark [data-theme] { --brand-tint: rgba(244, 243, 238, 0.09); --grey-ground: #1C1C1E; --card-on-grey: #2C2C2E; }
:root { --guide: var(--rule); --nav-h: 66px; --mk-skew: 0px; }
html { scroll-padding-top: 72px; }

/* ---- Type scale (v2). 700 for display, H1, H2; 600 for H3. Sizes are fluid below 1024px and land on the v2 numbers from 1024px:
   display 64 (72 from 1280px with .display-lg), H1 56, H2 48, H3 28, lede 21, body 17. ---- */
.display, .h1, .headline, .h2, .h3 { color: var(--ink); text-wrap: balance; margin: 0; }
.display { font-size: clamp(40px, 6.25vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
.h1 { font-size: clamp(34px, 5.47vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.07; }
.headline, .h2 { font-size: clamp(30px, 4.7vw, 48px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.h3 { font-size: clamp(22px, 2.73vw, 28px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
@media (min-width: 1280px) { .display.display-lg { font-size: 72px; } }
.lede { font-size: clamp(18px, 2.05vw, 21px); line-height: 1.5; color: var(--ink-3); max-width: 65ch; text-wrap: pretty; }
.copy { font-size: 17px; line-height: 1.6; color: var(--ink-3); max-width: 65ch; text-wrap: pretty; }
.lede .s { display: block; } /* a hero sub breaks at the sentence: wrap each sentence in <span class="s"> */
.center { text-align: center; }
.center .lede, .lede.center, .center .copy, .copy.center { margin-left: auto; margin-right: auto; }
.figure { font-size: clamp(48px, 7vw, 88px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
.figure small { font-size: 0.32em; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-3); margin-left: 0.15em; }
.brand-fg { color: var(--accent); }
.btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }
/* Buttons: .btn is the one filled style, .btn-outline (same as .btn-ghost) the one outline style. One filled button per screen. */
.btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--ghost-edge); }
.btn-outline:hover { background: transparent; border-color: var(--accent); }
.mk-section { padding: clamp(72px, 10vw, 128px) 0; }
/* ---- Grounds: sections are white. One .ground-grey section per page holds cards (light #F5F5F7, dark surface). ---- */
.ground-grey { background: var(--grey-ground); }
.ground-grey .bento-card, .ground-grey .price-card, .ground-grey .scene-card { background: var(--card-on-grey); }

/* ---- Hero mesh: a soft glow inside the hero only. It fades to the page ground at the bottom edge. ---- */
.mesh-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(112px, 14vw, 176px) 0 clamp(64px, 8vw, 112px);
  background: var(--bg);
  --scrim-x: 32%;
}
.mesh-hero.center { --scrim-x: 50%; text-align: center; }
.mesh-hero.center .lede { margin-left: auto; margin-right: auto; }
.mesh-hero.center .btn-row { justify-content: center; }
.mesh-hero::before {
  content: ""; position: absolute; inset: -25%; z-index: -2;
  background:
    radial-gradient(38% 42% at 18% 28%, var(--mesh-1) 0%, transparent 70%),
    radial-gradient(34% 40% at 82% 20%, var(--mesh-2) 0%, transparent 70%),
    radial-gradient(40% 44% at 70% 82%, var(--mesh-3) 0%, transparent 70%),
    radial-gradient(36% 40% at 26% 86%, var(--mesh-4) 0%, transparent 70%);
  filter: blur(56px); opacity: 0.55;
  animation: mk-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.dark .mesh-hero::before { opacity: 0.42; }
/* Scrim: the ground color sits behind the copy so text keeps 4.5:1 on the mesh, and closes the bottom edge. */
.mesh-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--ground-rgb), 0) 55%, rgb(var(--ground-rgb)) 100%),
    radial-gradient(ellipse 62% 78% at var(--scrim-x) 46%, rgba(var(--ground-rgb), 0.93) 0%, rgba(var(--ground-rgb), 0.84) 52%, rgba(var(--ground-rgb), 0) 100%);
}
@media (max-width: 760px) {
  .mesh-hero::after { background: linear-gradient(to bottom, rgba(var(--ground-rgb), 0.9) 0%, rgba(var(--ground-rgb), 0.86) 70%, rgb(var(--ground-rgb)) 100%); }
}
.mesh-hero.is-paused::before { animation-play-state: paused; }
@keyframes mk-drift {
  0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, 4%, 0) rotate(5deg) scale(1.08); }
  100% { transform: translate3d(5%, -2%, 0) rotate(-4deg) scale(1.03); }
}
.mesh-hero .display { max-width: 12em; }
.mesh-hero.center .display { margin-left: auto; margin-right: auto; }
.mesh-hero .lede { margin-top: 24px; }
.mesh-hero .btn-row { margin-top: 36px; }

/* ---- Retired in v2, kept so old markup still renders: angled and tinted bands now sit flat on white. ---- */
.angled, .angled.tint, .angled.solid, .angled.flip {
  position: relative; margin-top: 0; clip-path: none; background: var(--bg);
  padding: clamp(64px, 8vw, 104px) 0;
}

/* ---- Guide lines: thin 1px verticals behind the content, as on stripe.com ---- */
.guides { position: relative; isolation: isolate; }
.guides::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: max(16px, calc((100% - 1200px) / 2 + 24px)); right: max(16px, calc((100% - 1200px) / 2 + 24px));
  background-image: linear-gradient(to right, var(--guide) 1px, transparent 1px);
  background-size: 25% 100%; background-repeat: repeat-x;
  border-right: 1px solid var(--guide);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
@media (max-width: 760px) { .guides::before { background-size: 50% 100%; } }

/* ---- Bento: 6-column tile wall ---- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.bento-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  grid-column: span 2; min-width: 0; padding: 28px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 20px;
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.3s;
}
a.bento-card { text-decoration: none; }
a.bento-card:hover, .bento-card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-3 { grid-column: span 3; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-6 { grid-column: span 6; }
.bento-card.tall { grid-row: span 2; }
/* .tint and .solid are retired: they render as plain cards. */
.bento-card h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.bento-card p { font-size: 15px; color: var(--ink-3); }
.bento-card .figure { font-size: clamp(44px, 5vw, 72px); }
.bento-icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--brand-tint); color: var(--brand-fg);
}
.bento-icon svg, .bento-icon .ficon { width: 24px; height: 24px; }
.bento-media { margin: auto -28px -28px; padding-top: 12px; min-height: 140px; overflow: hidden; }
.bento-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-top: 1px solid var(--rule); }
.bento-card.has-media { padding-bottom: 0; }
.bento-card.has-media .bento-media { flex: 1; }
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-card, .bento-card.span-2, .bento-card.span-3, .bento-card.span-4, .bento-card.span-6 { grid-column: 1 / -1; }
  .bento-card.tall { grid-row: auto; }
  .bento-card { padding: 24px; }
  .bento-media { margin: auto -24px 0; }
}

/* Feature icons as a mask, so they take currentColor from any parent: <span class="ficon" style="--i:url(/img/icons/feature/edit.svg)"></span> */
.ficon { display: inline-block; width: 24px; height: 24px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* ---- Stage: one idea per full-height section, a big screen below ---- */
.stage {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(72px, 9vw, 112px) 0 clamp(56px, 7vw, 88px);
}
.stage .lede { margin: 20px auto 0; }
.stage .headline { max-width: 14em; }
.stage-screen { width: min(1080px, 100%); margin: clamp(32px, 5vw, 56px) auto 0; transform-origin: 50% 0; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease; }
.stage-screen .browser { border-radius: 14px; box-shadow: 0 60px 100px -30px rgba(26, 40, 80, 0.35), 0 30px 60px -30px rgba(0, 0, 0, 0.3), 0 0 0 0.5px var(--rule); text-align: left; }
.stage-screen .browser img { width: 100%; height: auto; }
.stage-screen .duo { padding-bottom: 14%; }
.stage-caption { margin-top: 20px; font-size: 15px; color: var(--ink-3); }

/* ---- Reveal ---- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .mk-js .reveal, .mk-js .reveal-group > * { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
  .mk-js .reveal.is-in, .mk-js .reveal-group.is-in > * { opacity: 1; transform: none; }
  .mk-js .reveal-group.is-in > *:nth-child(2) { transition-delay: 0.07s; }
  .mk-js .reveal-group.is-in > *:nth-child(3) { transition-delay: 0.14s; }
  .mk-js .reveal-group.is-in > *:nth-child(4) { transition-delay: 0.21s; }
  .mk-js .reveal-group.is-in > *:nth-child(5) { transition-delay: 0.28s; }
  .mk-js .reveal-group.is-in > *:nth-child(n+6) { transition-delay: 0.35s; }
  .mk-js .stage .stage-screen { transform: scale(0.9); opacity: 0.4; }
  .mk-js .stage.is-in .stage-screen { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-hero::before { animation: none; }
  .reveal, .reveal-group > *, .stage-screen { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Product sub-nav: sticky under the main nav ---- */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--glass); border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: top 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}
.nav-hidden .subnav { top: 0; }
@media (max-width: 767px) { .subnav { top: 0; } }
.subnav-in { display: flex; align-items: center; gap: 12px; height: 54px; }
.subnav-name { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.subnav-name img { width: 28px; height: 28px; border-radius: 22%; }
.subnav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a { flex: none; font-size: 13px; font-weight: 500; color: var(--ink-3); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.subnav-links a:hover { color: var(--ink); }
.subnav-links a[aria-current="true"] { color: var(--brand-fg); background: var(--brand-tint); font-weight: 600; }
.subnav .btn { flex: none; }

/* ---- Retired in v2: shape decorations draw nothing. ---- */
.has-shapes { position: relative; }
.shapes { display: none; }

/* ---- Price card and stats ---- */
.price-card {
  display: flex; flex-direction: column; gap: 14px; max-width: 420px;
  padding: 32px; border-radius: 24px; background: var(--surface); border: 1px solid var(--rule);
}
.price-card.featured { border: 1.5px solid var(--accent); box-shadow: 0 30px 60px -30px rgba(12, 12, 15, 0.25); }
.price-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.price-card .figure { font-size: clamp(56px, 7vw, 80px); }
.price-per { font-size: 18px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.price-year { font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.price-year b { color: var(--ink); font-weight: 700; }
.price-vs { padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; }
.price-card li .ficon { width: 20px; height: 20px; color: var(--ink-3); margin-top: 2px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { padding: 32px 24px; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .figure { font-size: clamp(44px, 5.5vw, 72px); }
.stat-label { margin-top: 10px; font-size: 15px; color: var(--ink-3); max-width: 16em; }
@media (max-width: 560px) { .stat { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; } .stat:first-child { border-top: 0; } }
@media (max-width: 480px) { .subnav-name span { display: none; } }

/* ---- Feature rows and statement lists (v2) ----
   .feature-row: words beside one scene; .flip alternates the sides; stacks on phones and tablets (words first).
   .three-up: three short statements across from 1024px. */
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 48px); align-items: center; padding: clamp(48px, 7vw, 96px) 0; }
.feature-copy { min-width: 0; }
.feature-copy .copy, .feature-copy .lede { margin-top: 16px; }
.feature-copy .btn-row, .feature-copy .link-row { margin-top: 28px; }
.feature-media { min-width: 0; }
@media (min-width: 900px) {
  .feature-row { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(32px, 4vw, 64px); }
  .feature-row.flip { grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); }
  .feature-row.flip .feature-copy { order: 2; }
}
.three-up { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.three-up > * { min-width: 0; }
.three-up h3, .three-up .h3 { font-size: clamp(22px, 2.2vw, 24px); }
.three-up p { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ink-3); max-width: 65ch; }
@media (min-width: 1024px) { .three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }

/* ---- Icons (set A, public/img/icons/v2/). Icon colors live in the files, never in text, links or buttons. ----
   .app-icon: bevel tile for where a product is shown as an app (28 to 96px). .mark-icon: standalone duotone for cards and menus.
   <img class="app-icon s56" src="/img/icons/v2/pdf-app-bevel.svg" width="56" height="56" alt="">   sizes: --s or .s28 .s32 .s40 .s48 .s56 .s64 .s80 .s96
   <span class="mark-icon s40" data-icon="pdf" role="img" aria-label="Dovito PDF"></span>   or an <img class="mark-icon"> of the standalone file */
.app-icon, .mark-icon { display: inline-block; flex: none; width: var(--s, 48px); height: var(--s, 48px); background: center / contain no-repeat; vertical-align: middle; }
img.app-icon, img.mark-icon { background: none; }
.app-icon { border-radius: 22%; }
.s24 { --s: 24px; } .s28 { --s: 28px; } .s32 { --s: 32px; } .s40 { --s: 40px; } .s48 { --s: 48px; }
.s56 { --s: 56px; } .s64 { --s: 64px; } .s80 { --s: 80px; } .s96 { --s: 96px; }
.app-icon[data-icon="pdf"] { background-image: url(/img/icons/v2/pdf-app-bevel.svg); }
.app-icon[data-icon="canvas"] { background-image: url(/img/icons/v2/canvas-app-bevel.svg); }
.app-icon[data-icon="ai"] { background-image: url(/img/icons/v2/ai-app-bevel.svg); }
.mark-icon[data-icon="pdf"] { background-image: url(/img/icons/v2/pdf-standalone.svg); }
.mark-icon[data-icon="canvas"] { background-image: url(/img/icons/v2/canvas-standalone.svg); }
.mark-icon[data-icon="ai"] { background-image: url(/img/icons/v2/ai-standalone.svg); }
/* The AI mark is dark by design: white on dark grounds until the set has a dark-ground file. */
.dark .mark-icon[data-icon="ai"], .dark img.mark-icon[src*="ai-standalone"], .on-dark .mark-icon[data-icon="ai"], .on-dark img.mark-icon[src*="ai-standalone"] { filter: brightness(0) invert(1); }
.subnav-name .app-icon { --s: 28px; }

/* ---- Scenes (v2). One moment of the app, redrawn on a tinted card in the product's icon color. Port of dovito.com's scene system.
   Everything inside .scene-stage is sized in em off the stage width: 1em = 14px when the stage is 760px wide, so the scene scales as one picture.
   Under 560px of room the stage stays 560px and the card crops its right edge, except under 540px of card width, where the panels stack. ---- */
.scene {
  --hue: #1A365D; --hue-2: #38BDF2;
  --panel: #ffffff; --ink: #1d1d1f; --muted: #6e6e73; --line: rgba(0, 0, 0, 0.09); --wash: #f5f5f7;
  position: relative; overflow: hidden; border-radius: 28px;
  container: scene / inline-size;
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--hue-2) 30%, #ffffff) 0%, transparent 60%),
    color-mix(in srgb, var(--hue) 8%, #ffffff);
}
.dark .scene, .scene.scene-dark {
  --panel: #232326; --ink: #f5f5f7; --muted: #a1a1a6; --line: rgba(255, 255, 255, 0.12); --wash: #2c2c2f;
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--hue-2) 26%, #141416) 0%, transparent 60%),
    color-mix(in srgb, var(--hue) 22%, #141416);
}
.scene-pdf { --hue: #D2462F; --hue-2: #FFA06A; }
.scene-canvas { --hue: #6B4EE6; --hue-2: #9DB2FF; }
.scene-lab { --hue: #1A365D; --hue-2: #38BDF2; }
.scene-flush { border-radius: 0; }
.scene-stage { position: relative; width: max(100%, 560px); aspect-ratio: 16 / 10.4; container-type: inline-size; color: var(--ink); font-size: 14px; }
.scene-stage > * { font-size: 14px; font-size: 1.842cqw; }
.scene-stage p { margin: 0; color: inherit; }
.scene-panel {
  position: absolute; background: var(--panel); border-radius: 1.15em;
  box-shadow: 0 0 0 1px var(--line), 0 1.6em 3em -1.4em color-mix(in srgb, var(--hue) 55%, #0c0c0f);
}
.scene-float { box-shadow: 0 0 0 1px var(--line), 0 1.4em 2.6em -0.9em color-mix(in srgb, var(--hue) 70%, #0c0c0f); }
.scene-title { font-size: 1.5em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.scene-title-lg { font-size: 2em; }
.scene-sub { margin-top: 0.45em !important; font-size: 1em; line-height: 1.45; color: var(--muted); }
.scene-over { font-size: 0.78em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.scene-float-title { font-size: 1.04em; font-weight: 600; margin-bottom: 0.8em !important; color: var(--ink); }
.scene-chip { display: inline-flex; align-items: center; gap: 0.4em; border-radius: 999px; padding: 0.18em 0.7em; font-size: 0.78em; font-weight: 600; line-height: 1.5; background: var(--wash); color: var(--muted); }
.scene-chip-hue { background: color-mix(in srgb, var(--hue) 12%, var(--panel)); color: color-mix(in srgb, var(--hue) 70%, var(--ink)); }
.scene-chip-ok { background: color-mix(in srgb, #2E7D52 14%, var(--panel)); color: color-mix(in srgb, #2E7D52 55%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #2E7D52 35%, transparent); }
.scene-chip-dot::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.scene-pill { flex: none; padding: 0.35em 0.9em; border-radius: 999px; background: var(--wash); font-size: 0.82em; font-weight: 600; color: var(--ink); }
.scene-tag { flex: none; padding: 0.2em 0.6em; border-radius: 0.4em; background: var(--wash); font-size: 0.7em; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); }
.scene-num, .scene-avatar { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--wash); font-weight: 600; color: var(--muted); }
.scene-num { width: 1.9em; height: 1.9em; font-size: 0.82em; }
.scene-avatar { width: 2.4em; height: 2.4em; font-size: 0.8em; }
.scene-check { flex: none; position: relative; width: 1.4em; height: 1.4em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); }
.scene-check.on { background: #2E7D52; box-shadow: none; }
.scene-check.on::after { content: ""; position: absolute; left: 0.47em; top: 0.25em; width: 0.28em; height: 0.55em; border: solid #ffffff; border-width: 0 0.14em 0.14em 0; transform: rotate(45deg); }
.scene-rows { border-radius: 0.8em; box-shadow: 0 0 0 1px var(--line); }
.scene-row { display: flex; align-items: center; gap: 0.9em; padding: 0.8em 1em; }
.scene-row + .scene-row { box-shadow: 0 -1px 0 var(--line); }
.scene-row-solo { border-radius: 0.8em; box-shadow: 0 0 0 1px var(--line); }
.scene-row-lift { box-shadow: 0 0 0 1px var(--line), 0 0.8em 1.6em -1em color-mix(in srgb, var(--hue) 60%, #0c0c0f); }
.scene-row-title { font-size: 1.04em; font-weight: 500; line-height: 1.3; color: var(--ink); }
.scene-row-stack { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.scene-row-stack small { font-size: 0.86em; color: var(--muted); }
.scene-row-tag { margin-left: auto; padding-left: 1em; font-size: 0.82em; color: var(--muted); white-space: nowrap; }
.scene-btn { flex: none; display: inline-block; padding: 0.6em 1.25em; border-radius: 999px; background: var(--navy, #1a365d); color: #ffffff; font-size: 0.95em; font-weight: 600; }
.dark .scene-btn { background: var(--paper, #f4f3ee); color: #1a365d; }
.scene-btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hue) 55%, var(--line)); padding: 0.45em 1em; font-size: 0.88em; }
.dark .scene-btn-quiet { background: transparent; color: var(--ink); }
.scene-input { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.55em 0.6em 0.55em 1em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.scene-input > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.scene-input i { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--navy, #1a365d); }
.dark .scene-input i { background: var(--paper, #f5f5f7); }
.scene-bubble { font-size: 1.02em; line-height: 1.45; color: var(--ink); }
.scene-bubble-me { align-self: flex-end; max-width: 88%; padding: 0.7em 0.95em; border-radius: 1.1em; background: var(--wash); }
.scene-chat { display: flex; flex-direction: column; gap: 0.9em; padding: 1.3em 1.2em 1.1em; }
.scene-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.scene-stat { display: flex; flex-direction: column; gap: 0.2em; padding: 0.9em 1em 1em; border-radius: 0.8em; box-shadow: 0 0 0 1px var(--line); }
.scene-stat b { font-size: 1.9em; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.scene-stat small { font-size: 0.84em; color: var(--muted); }
.scene-dl { margin: 0; display: flex; flex-direction: column; gap: 0.6em; }
.scene-dl > div { display: grid; grid-template-columns: 7em 1fr; gap: 0.8em; }
.scene-dl dt { font-size: 0.95em; color: var(--muted); }
.scene-dl dd { margin: 0; font-size: 0.98em; line-height: 1.35; }
/* Drawing aids for documents and boards: a white page, skeleton text lines, a sticky note. */
.scene-sheet { background: #ffffff; color: #1d1d1f; border-radius: 0.5em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1.2em 2.4em -1.2em color-mix(in srgb, var(--hue) 60%, #0c0c0f); }
.scene-line { display: block; height: 0.55em; border-radius: 0.3em; background: color-mix(in srgb, var(--muted) 28%, transparent); }
.scene-sheet .scene-line { background: rgba(0, 0, 0, 0.1); }
.scene-note { position: absolute; padding: 0.9em 1em; border-radius: 0.35em; font-size: 1em; font-weight: 500; line-height: 1.3; color: #1d1d1f; background: #FFE27A; box-shadow: 0 0.9em 1.4em -0.9em rgba(0, 0, 0, 0.4); }
.scene-card { padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: var(--surface); }

/* Narrow room: the card keeps its own width, the main panels stack, and the small floating card is dropped (unless it carries .scene-keep). */
@container scene (max-width: 540px) {
  .scene-stage { width: 100%; aspect-ratio: auto; padding: 6% 5% 7%; display: flex; flex-direction: column; gap: 3cqw; }
  .scene-stage > * { font-size: 3.2cqw; }
  .scene-stage > .scene-panel { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; height: auto; }
  .scene-stage > .scene-float:not(.scene-keep) { display: none; }
  .scene-stage > .scene-first { order: -1; }
  .scene-stage > .scene-board { aspect-ratio: 16 / 11.5; }
  .scene-row-tag { display: none; }
}

/* Scene motion (marketing.js). Parts marked data-a ease in and out while the scene plays. Without JS or under reduced motion nothing hides. */
.scene [data-a] { transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.scene [data-a].a-off { opacity: 0; transform: translateY(0.6em) scale(0.98); transition-duration: 0.3s; }
.scene-playing { cursor: pointer; }
.scene-input:has(> span.a-typing) { align-items: flex-end; border-radius: 1.3em; padding-top: 0.7em; padding-bottom: 0.55em; }
.scene-input > span.a-typing { white-space: normal; overflow: visible; color: var(--ink); line-height: 1.45; }
.scene-input > span.a-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--ink); animation: scene-caret 1s steps(1) infinite; }
@keyframes scene-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scene [data-a] { transition: none; } .scene-input > span.a-typing::after { animation: none; } }