/* AYVI landing page, art direction "Schreibtisch".
   The product is the page: a desk with an app window (your text) and the AYVI panel next to it, right under the headline.
   Below it the compositions change on purpose: oversized words, a pinned flow, a dark band for the data path, Mac as the
   main surface and Windows dashed because it is alpha. Colour comes from site.css tokens; the selection mark is the signature. */

:root {
  --mark: color-mix(in srgb, var(--accent) 26%, transparent);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --desk: color-mix(in srgb, var(--ink) 6%, var(--page));
}
body.home { background: var(--page); }
body.home h1, body.home h2, body.home h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; }
body.home h3 { font-size: 1.25rem; }
body.home p { max-width: 66ch; }
body.home .wrap { width: min(calc(100% - 3rem), 76rem); }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: 0 0.4rem;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface);
  color: var(--ink); font: 600 0.78rem/1.5 var(--mono);
}
.hl { padding: 0 0.12em; background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 100% 46%; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.text-button {
  min-height: 2.75rem; padding: 0 0.5rem; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.88rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.text-button:hover { color: var(--accent-h); }
.text-button:focus-visible, .tour-step:focus-visible, .chip:focus-visible, .tab:focus-visible, .ask-input:focus-visible,
.faq summary:focus-visible, .mode-opt input:focus-visible + span, .suggest button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
/* Hero ------------------------------------------------------------------------------------------------------ */
.hero { display: block; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-top { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
body.home .hero h1 { max-width: 22ch; margin: 0; font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.025em; }
.hero-side { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.hero-side .lead { grid-row: span 2; margin: 0; font-size: 1.15rem; }
.hero-side .hero-actions { margin: 0; }
.hero-side .fine-print { margin: 0.5rem 0 0; max-width: 32rem; }
/* Workbench ------------------------------------------------------------------------------------------------ */
.bench { margin-top: clamp(2rem, 4vw, 3.5rem); scroll-margin-top: 1.5rem; }
.bench-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 0.9rem; }
.bench .tabs { margin: 0; gap: 0.25rem; }
.bench .tab { min-height: 2.5rem; padding: 0 1rem; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font-size: 0.92rem; transition: background-color 0.12s var(--ease), color 0.12s var(--ease); }
.bench .tab:hover { color: var(--ink); background: var(--page-2); }
.bench .tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--page); }
.mode { display: inline-flex; gap: 0.25rem; margin: 0; padding: 0.2rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.mode-opt { position: relative; display: inline-flex; }
.mode-opt input { position: absolute; opacity: 0; inset: 0; }
.mode-opt span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.8rem; border-radius: 7px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.mode-opt input:checked + span { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.mode-opt.is-off span { color: var(--muted); cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--line-strong); }
.desk {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: stretch;
  padding: clamp(1rem, 3vw, 2.25rem); border-radius: 24px; background: var(--desk); border: 1px solid var(--line);
}
.win { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--code); color: var(--code-ink); box-shadow: var(--shadow); }
.win-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid rgb(255 255 255 / 10%); color: #9aa4b2; font-size: 0.78rem; }
.win-bar .lights i { background: rgb(255 255 255 / 22%); }
body.home .win-title { margin: 0; font: 500 0.78rem/1.4 var(--mono); color: #c3cbd6; letter-spacing: 0; }
.counter { margin-left: auto; font: 0.72rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.demo-text {
  display: block; flex: 1; width: 100%; min-height: 17rem; resize: none; padding: 1rem 1.1rem; border: 0; border-radius: 0;
  background: transparent; color: var(--code-ink); font: 0.9rem/1.7 var(--mono); tab-size: 4; transition: background-color 0.18s var(--ease);
}
.demo-text:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.win-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.25rem 0.9rem 0.25rem 1.1rem; border-top: 1px solid rgb(255 255 255 / 10%); color: #9aa4b2; font-size: 0.78rem; }
.win-tools { display: inline-flex; }
.win-foot .text-button { color: #ffa070; }
.lens { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; }
.lens-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--line); background: var(--page); }
.lens-head h3 { margin: 0; font-size: 1.05rem; }
.lens-keys { display: inline-flex; gap: 0.2rem; }
.lens-keys kbd { transition: border-color 0.12s var(--ease), background-color 0.12s var(--ease), transform 0.12s var(--ease); }
.demo-tag { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--muted); }
.tag { padding: 0.05rem 0.5rem; border-radius: 4px; font-size: 0.74rem; font-weight: 600; }
.lens-body { padding: 0.9rem 1rem 1rem; }
.demo-context { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 1.75rem; }
.demo-context .pill { padding: 0.1rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8rem; }
.demo-context .pill.strong { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.lens .chips { margin-top: 0.7rem; gap: 0.4rem; }
.lens .chip { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; transition: border-color 0.12s var(--ease), background-color 0.12s var(--ease); }
.lens .chip kbd { min-width: 1.25rem; padding: 0 0.3rem; font-size: 0.7rem; color: var(--muted); }
.ask { margin-top: 0.7rem; }
.ask-row { display: flex; gap: 0.5rem; }
.ask-input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 0.8rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--page); color: var(--ink); font: inherit; font-size: 0.92rem; }
.suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.suggest button { min-height: 2.25rem; padding: 0 0.7rem; border: 1px dashed var(--line-strong); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 0.82rem; cursor: pointer; transition: border-color 0.12s var(--ease); }
.suggest button:hover { border-style: solid; border-color: var(--accent); }
.demo-out { min-height: 16rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.demo-idle { margin: 0; color: var(--muted); }
.out-title { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.out-text { margin: 0; font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
.out-note { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.86rem; }
.out-warn { margin: 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--warn); background: var(--page-2); font-size: 0.92rem; }
.out-meta { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0.75rem 0 0; font-size: 0.88rem; }
.out-meta dt { color: var(--muted); }
.out-meta dd { margin: 0; overflow-wrap: anywhere; }
.out-prompt { margin: 0.5rem 0 0; padding: 0.7rem 0.85rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--code); color: var(--code-ink); font: 0.8rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.out-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.out-actions .button { min-height: 2.5rem; }
.out-status { margin: 0.6rem 0 0; font-size: 0.88rem; font-weight: 600; }
.demo-out .diff { margin-top: 0; }
.demo-out[aria-busy="true"] .out-text::after { content: ""; display: inline-block; width: 0.5ch; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); }
.mode-off { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.82rem; max-width: none; }
.shortcut-note { display: block; margin-top: 0.15rem; }
/* Guided flow states: set by the script only while the flow plays */

/* Use cases: oversized words ----------------------------------------------------------------------------------- */
.uses { border-top: 1px solid var(--line); }
.lede { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 1rem 4rem; margin-bottom: 3rem; }
.lede h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
.lede p { margin: 0; color: var(--muted); }
.use-rows { border-bottom: 1px solid var(--line-strong); }
.use { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 3rem; padding: 2rem 0 2.25rem; border-top: 1px solid var(--line-strong); }
.use-word { margin: 0; overflow-wrap: anywhere; font-size: clamp(2.4rem, 4.4vw, 3.75rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
body.home .use-word { font-size: clamp(2.4rem, 4.4vw, 3.75rem); }
.use-lead { margin: 0 0 0.75rem; font-size: 1.15rem; }
.use .flist li { padding: 0.55rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.use .flist li > span:first-child { color: var(--ink); }
/* Flow: pinned heading, large numerals --------------------------------------------------------------------- */
.flow2 { background: var(--page-2); }
.flow2-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 5rem; align-items: start; }
.flow2-head { position: sticky; top: 2rem; }
.flow2-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
.flow2-head p { margin: 1rem 0 0; color: var(--muted); }
body.home .flow2-head .flow2-keys { display: flex; gap: 0.3rem; margin-top: 1.5rem; }
.flow2-keys kbd { min-width: 2.5rem; min-height: 2.5rem; font-size: 1rem; }
.walk { display: block; margin: 0; padding: 0; list-style: none; }
.walk-step { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 1.25rem; padding: 1.75rem 0; border-top: 1px solid var(--line-strong); }
.walk-step:last-child { border-bottom: 1px solid var(--line-strong); }
.walk-n { grid-row: span 2; font: 500 3.5rem/1 var(--display); color: var(--accent); }
.walk-step h3 { margin: 0; font-size: 1.5rem; }
.walk-step p { margin: 0.4rem 0 0; color: var(--muted); }
.flow2 .note { margin-top: 1.5rem; }
/* Data path: dark band ---------------------------------------------------------------------------------------- */
.band {
  --page: #14171b; --page-2: #0f1113; --surface: #1a1e23; --ink: #ecebe7; --muted: #a9afb6; --line: #2d3238; --line-strong: #3b4148;
  --accent: #ff7a3d; --accent-soft: #3a2418; --accent-h: #ff9a66; --focus: #ff9a66; --warn: #e6b04f;
  background: var(--page); color: var(--ink); border-top: 0;
}
.band a { color: var(--accent); }
.routes { border-top: 1px solid var(--line-strong); }
.route { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem 3rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line-strong); }
.route-head h3 { margin: 0; font-size: 1.6rem; }
.ai-tag { display: flex; align-items: center; gap: 0.55rem; margin: 0.6rem 0 0; font-size: 0.88rem; font-weight: 600; }
.ai-tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.route:nth-child(2) .ai-tag::before { background: var(--warn); }
.route:nth-child(3) .ai-tag::before { background: var(--muted); }
.route ul { margin: 0; padding-left: 1.1rem; color: var(--muted); columns: 2; column-gap: 2.5rem; }
.route li { margin-bottom: 0.6rem; break-inside: avoid; }
.band-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; }
body.home .sub { margin: 2.5rem 0 0.75rem; font-size: 1.35rem; }
.band .pillars { grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line-strong); }
.band .pillars li, .band .pillars li + li { padding: 1rem 1.25rem 1rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
.band .pillars li:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
body.home .pillars h4 { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
.band .limits { color: var(--muted); }
.band .more-qa { border-color: var(--line-strong); }
.band .qa { grid-template-columns: 1fr; }
/* Platforms: Mac is the main surface, Windows is dashed (alpha) ------------------------------------------------ */
.pf-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: stretch; }
.pf { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--ink); border-radius: 16px; background: var(--surface); }
.pf.is-alpha { border: 1px dashed var(--line-strong); background: none; }
.pf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.pf-head h3 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.pf-state { color: var(--muted); font: 0.8rem/1.4 var(--mono); }
.pf ul { margin: 1rem 0 0; padding-left: 1.1rem; font-size: 0.95rem; }
.pf li { margin-block: 0.45rem; }
.pf-install { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.pf ul + .pf-install { margin-top: 1.25rem; }
.install-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--page-2); }
.install-strip h3 { font-size: 1.1rem; margin: 0; }
.install-strip ol { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0 0 0 1.2rem; flex: 1; font-size: 0.92rem; }
.install-strip .button { margin-left: auto; }
/* FAQ and closing ---------------------------------------------------------------------------------------------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 5rem; align-items: start; }
.faq-wrap h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
.faq-wrap .links { grid-column: 2; margin-top: 0; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { position: relative; display: flex; align-items: center; min-height: 3.5rem; padding: 0.5rem 2.5rem 0.5rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; right: 0.25rem; content: "+"; color: var(--accent); font: 500 1.4rem/1 var(--mono); transition: transform 0.18s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq details p { margin: 0 0 1rem; color: var(--muted); }
.closing { background: var(--page-2); }
.closing h2 { max-width: 16ch; margin: 0; font-size: clamp(2.4rem, 5.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.025em; }
.closing .lead { margin-top: 1.5rem; }
/* Responsive ------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-side { grid-template-columns: 1fr; }
  .hero-side .lead { grid-row: auto; }
  .hero-top, .lede, .use, .flow2-grid, .faq-wrap, .route, .band-split, .pf-grid { grid-template-columns: 1fr; }
  .flow2-head { position: static; }
  .faq-wrap .links { grid-column: 1; }
  .desk { grid-template-columns: 1fr; }
  .lens { margin-top: 0; }
  .route ul { columns: 1; }
}
@media (max-width: 640px) {
  body.home .wrap { width: min(calc(100% - 2rem), 76rem); }
  .desk { padding: 0.6rem; border-radius: 16px; }
  .demo-text { min-height: 12rem; font-size: 0.85rem; }
  .bench-bar { flex-direction: column; align-items: stretch; }
  .bench .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bench .tab { padding: 0 0.25rem; font-size: 0.85rem; justify-content: center; }
  .mode { width: 100%; }
  .out-meta { grid-template-columns: 1fr; }
  .band .pillars { grid-template-columns: 1fr; }
  .band .pillars li:nth-child(even) { padding-left: 0; border-left: 0; }
  .walk-step { grid-template-columns: 3rem minmax(0, 1fr); gap: 0 0.75rem; }
  .walk-n { font-size: 2.5rem; }
  .install-strip .button { margin-left: 0; }
  .lens-head { flex-wrap: wrap; }
  .demo-tag { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lens, .lens-keys kbd, .demo-text, .faq summary::after { transition: none; }
}
[hidden] { display: none !important; }
/* =====================================================================================================================
   v3 "Arbeitsraum": dark spatial stage, sans typography, floating nav, dark-to-light transitions.
   (Overrides the earlier rules by cascade; the light content sections keep their layouts.)
   ===================================================================================================================== */
:root { --stage: #07090b; --stage-2: #0d1115; --glow: #ff7a3d; --sans: ui-sans-serif, "SF Pro Display", "Segoe UI Variable Display", system-ui, -apple-system, "Helvetica Neue", sans-serif; }
body.home h1, body.home h2, body.home h3, body.home .use-word, body.home .walk-n, body.home .pillars h4 { font-family: var(--sans); font-weight: 560; letter-spacing: -0.035em; }
body.home h3 { letter-spacing: -0.02em; }
body.home .walk-n { font-weight: 300; font-family: var(--mono); letter-spacing: -0.05em; }

/* Product film hero: cinematic motion behind the headline and actions */
.hero-v4.product-hero {
  --page: #07090b; --page-2: #0d1115; --surface: #12171c; --ink: #ecebe7; --muted: #aab1b8;
  --line: #2a3036; --line-strong: #3a4148; --accent: #ff6b00; --accent-soft: rgb(255 107 0 / 14%);
  --accent-h: #ff9952; --focus: #ff9952; --glow: #ff6b00;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 85vh; display: flex; align-items: center; justify-content: flex-start;
  padding: clamp(3rem, 7vw, 6rem) 0;
  color: #ecebe7; background: #0a0a0c;
}
.product-hero::before {
  content: ""; position: absolute; z-index: 0; right: 0; top: 50%; transform: translateY(-50%);
  width: 62vw; height: 72%; pointer-events: none;
  background: radial-gradient(ellipse at 62% 50%, rgb(255 255 255 / 42%) 0%, rgb(255 107 0 / 38%) 34%, transparent 76%);
  filter: blur(80px); opacity: 0.2;
}
.hero-bg-media {
  position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
  width: min(47vw, 44rem); aspect-ratio: 16 / 9; z-index: 1; pointer-events: none;
  overflow: hidden; border-radius: 20px; border: 1px solid rgb(255 255 255 / 8%);
  background: #171b20 url("video/ivy-poster.png") center / cover no-repeat;
  background: #0a0a0c; box-shadow: 0 36px 96px rgb(0 0 0 / 42%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%);
  mask-image: linear-gradient(to right, transparent 0%, #000 25%);
}
.hero-bg-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: 1; }
.hero-bg-overlay {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 64% 42%, rgb(255 255 255 / 5%), transparent 68%),
    linear-gradient(to bottom, rgb(10 10 12 / 12%), transparent 24% 74%, rgb(10 10 12 / 20%));
}
.product-hero > .wrap { position: relative; z-index: 2; width: min(calc(100% - 3rem), 76rem); display: flex; justify-content: flex-start; }
.hero-content { position: relative; z-index: 2; width: min(40vw, 34rem); max-width: 34rem; margin: 0 0 0 1.5%; text-align: left; }
.product-hero .product-copy h1 { max-width: none; margin: 0; }
.product-hero .product-copy .lead { max-width: 42rem; margin: 1rem 0 0; color: #b3b9c0; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.product-hero .hero-actions { justify-content: flex-start; gap: 0.7rem; margin-top: 1.35rem; }
.product-hero .button.primary { background: #ff6b00; border-color: #ff6b00; color: #1a0e07; }
.product-hero .button.primary:hover { background: #ff9952; border-color: #ff9952; }
.product-hero .button:focus-visible { outline: 2px solid #ff9952; outline-offset: 3px; }
.product-hero .hero-actions .button:active, .demo-dark .button:active { transform: translateY(1px); }
@media (max-width: 900px) {
  .hero-v4.product-hero { min-height: 85svh; padding-block: clamp(3rem, 8vw, 5rem); }
  .product-copy h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .demo-dark .win, .demo-dark .lens { transform: none; }
}
@media (max-width: 767px) {
  .hero-v4.product-hero { min-height: 0; flex-direction: column; align-items: stretch; gap: 0; padding-block: clamp(3rem, 10vw, 5rem); }
  .product-hero::before { top: auto; right: 0; bottom: 0; transform: none; width: 100%; height: 45%; }
  .product-hero > .wrap { order: 0; width: min(calc(100% - 2rem), 38rem); justify-content: center; }
  .hero-content { width: 100%; max-width: 580px; margin: 0 auto; text-align: center; }
  .product-hero .product-copy h1 { max-width: none; margin: 0 auto; font-size: clamp(2rem, 8vw, 2.8rem); }
  .product-hero .product-copy .lead { margin: 1rem auto 0; }
  .product-hero .hero-actions { justify-content: center; }
  .hero-bg-media { position: relative; order: 1; inset: auto; transform: none; width: min(90vw, 620px); max-width: none; margin: clamp(2rem, 8vw, 3rem) auto 0; }
}
@media (max-width: 640px) {
  .product-hero .hero-actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-dark .win, .demo-dark .lens { transform: none; transition: none; }
}

/* Dark demo desk, same look and a little depth */
.demo-dark {
  --page: #07090b; --page-2: #0d1115; --surface: #12171c; --ink: #ecebe7; --muted: #aab1b8; --line: #2a3036; --line-strong: #3a4148;
  --accent: #ff7a3d; --accent-soft: rgb(255 122 61 / 14%); --accent-h: #ff9a66; --focus: #ff9a66; --warn: #e6b04f; --code: #0a0d10; --code-ink: #e9eef5;
  --shadow: 0 40px 80px -30px rgb(0 0 0 / 80%);
  position: relative; border-top: 0; color: var(--ink); padding-bottom: clamp(9rem, 16vw, 14rem);
  background: linear-gradient(to bottom, var(--stage) 0, var(--stage) calc(100% - 9rem), var(--paper, #f4f2ee) 100%);
}
.demo-dark .lede h2 { color: #f4f6f7; }
.demo-dark .bench { margin-top: 0; }
.demo-dark .bench .tab[aria-selected="true"] { background: var(--glow); border-color: var(--glow); color: #1a0e07; }
.demo-dark .desk { perspective: 1800px; background: radial-gradient(60% 90% at 50% 0, rgb(255 122 61 / 9%), transparent 70%), #0b0f13; border-color: rgb(255 255 255 / 9%); --px: 0; --py: 0; }
.demo-dark .win { transform: rotateY(calc(4deg + var(--px) * 3deg)) rotateX(calc(var(--py) * -2deg)); transition: transform 0.2s var(--ease); background: #080b0e; }
.demo-dark .lens { transform: translateZ(0) rotateY(calc(-3deg + var(--px) * 3deg)) rotateX(calc(var(--py) * -2deg)); transition: transform 0.2s var(--ease); border-color: rgb(255 122 61 / 25%); }
.demo-dark .button { background: #1a2026; border-color: #3a4148; color: #ecebe7; }
.demo-dark .button.primary { background: var(--glow); border-color: var(--glow); color: #1a0e07; }
.demo-dark .ask-input { background: #0b0f13; }
.demo-dark .mode { background: #12171c; }
.demo-dark .lens-head { background: #161c22; }
.demo-dark a { color: var(--glow); }
.uses { --paper: #f4f2ee; }
/* Responsive: simplified scene, no pin */
@media (max-width: 900px) {
  .demo-dark .win, .demo-dark .lens { transform: none; }
}
@media (max-width: 640px) {
  
}
@media (prefers-reduced-motion: reduce) {
  .demo-dark .win, .demo-dark .lens { transform: none; transition: none; }
}
/* App replica demo: website controls and the simulated document outside, the real panel inside .ad-fit ---------------- */
.appdemo { margin-top: 0; }
.ad-language-tools { display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; align-items: center; gap: 0.65rem 1rem; margin: 0 0 1rem; }
.ad-language-switch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; padding: 0.22rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(255 255 255 / 2%); }
.ad-language-label { padding: 0 0.55rem; color: var(--muted); font-size: 0.78rem; }
.ad-language-switch button { min-height: 2rem; padding: 0 0.7rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; transition: color 0.14s var(--ease), background-color 0.14s var(--ease), border-color 0.14s var(--ease); }
.ad-language-switch button:hover { color: var(--ink); }
.ad-language-switch button[aria-pressed="true"] { border-color: rgb(255 107 0 / 40%); background: rgb(255 107 0 / 14%); color: var(--ink); }
.ad-language-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ad-language-explanation { max-width: 44rem; margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.ad-shortcut-hints { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.55rem; color: var(--muted); font-size: 0.74rem; }
.ad-shortcut-hints span { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.ad-shortcut-hints kbd { transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease), color 0.14s var(--ease), transform 0.14s var(--ease); }
.appdemo.is-demo-focused .ad-shortcut-hints kbd { border-color: rgb(255 107 0 / 42%); color: #ffd4b7; box-shadow: 0 0 12px rgb(255 107 0 / 15%); }
.appdemo .ad-shortcut-hints kbd.is-pressed { border-color: #ff8c42; color: #fff; background: rgb(255 107 0 / 24%); box-shadow: 0 0 18px rgb(255 107 0 / 34%); transform: translateY(-1px); }
.ad-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.ad-controls .tabs { margin: 0; gap: 0.25rem; }
.ad-controls .tab { min-height: 2.5rem; padding: 0 1rem; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font-size: 0.92rem; transition: background-color 0.12s var(--ease), color 0.12s var(--ease); }
.ad-controls .tab:hover { color: var(--ink); background: var(--page-2); }
.ad-controls .tab[aria-selected="true"] { background: var(--glow); border-color: var(--glow); color: #1a0e07; }
.ad-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ad-seg { display: inline-flex; gap: 0.2rem; padding: 0.2rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.ad-seg button { min-height: 2.25rem; padding: 0 0.85rem; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 560; cursor: pointer; transition: background-color 0.12s var(--ease), color 0.12s var(--ease); }
.ad-seg button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.ad-seg button:hover { color: var(--ink); }
.ad-seg button:focus-visible, .ad-doc textarea:focus-visible, .ad-doc .button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ad-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: clamp(1rem, 3vw, 2rem); border: 1px solid rgb(255 255 255 / 9%); border-radius: 24px; background: radial-gradient(60% 90% at 50% 0, rgb(255 122 61 / 8%), transparent 70%), #0b0f13; }
.ad-doc { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--code); color: var(--code-ink); position: sticky; top: 5rem; }
.ad-doc-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.ad-doc-bar .lights i { background: rgb(255 255 255 / 22%); }
body .appdemo .ad-doc .ad-doc-bar h2[data-doc-title] { max-width: none; margin: 0; font: 500 0.78rem/1.4 var(--mono); color: #c3cbd6; letter-spacing: 0; text-wrap: nowrap; }
.ad-doc textarea { display: block; width: 100%; min-height: 15rem; resize: vertical; padding: 1rem 1.1rem; border: 0; background: transparent; color: var(--code-ink); font: 0.9rem/1.7 var(--mono); }
.ad-doc textarea::selection { background: rgb(255 122 61 / 40%); }
.ad-doc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0.9rem; border-top: 1px solid rgb(255 255 255 / 10%); color: #9aa4b2; font-size: 0.8rem; }
.ad-doc-foot kbd { background: #1a2026; border-color: #3a4148; color: #ecebe7; }
.ad-doc-btns { display: inline-flex; align-items: center; gap: 0.5rem; }
.ad-doc-foot .text-button { color: #ffa070; }
.ad-app { min-width: 0; }
.ad-fit { width: 560px; transform-origin: 0 0; transform: scale(var(--k, 1)); }
.ad-notice { margin: 0.75rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--warn); background: #12171c; font-size: 0.88rem; max-width: 36rem; color: #e8edf1; }
.ad-demo-result { margin: 0.65rem 0 0; padding: 0.45rem 0.7rem; border-left: 2px solid var(--accent); color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.ad-app-foot { margin-top: 0.25rem; }
.ad-app-foot .text-button { color: #ffa070; }
.ad-legend { margin: 1rem 0 0; max-width: 60rem; color: var(--muted); font-size: 0.84rem; }
.ad-dialog { width: min(100vw - 1rem, 620px); max-height: 94vh; padding: 0.75rem; border: 1px solid var(--line-strong); border-radius: 14px; background: #0b0f13; color: #ecebe7; }
.ad-dialog::backdrop { background: rgb(0 0 0 / 70%); }
.ad-dialog-body { overflow: auto; max-height: calc(94vh - 5rem); margin-bottom: 0.75rem; }
.collapsed { display: grid; gap: 0.75rem; justify-items: start; padding: 1rem; color: #e8edf1; }
.collapsed p { margin: 0; }
.winapp.winwin { width: 560px; padding: 0; }
.winapp.winwin .ov-root { height: 680px; width: 560px; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.appdemo[data-os-current="win"] [data-os-note-mac], .appdemo[data-os-current="mac"] [data-os-note-win] { display: none; }
.appdemo[data-os-current="win"] [data-os-note-win] { display: inline; }

/* Conversion flow: keep the post-demo story in the same restrained graphite surface. */
.home .demo-dark {
  padding-bottom: clamp(5rem, 8vw, 8rem);
  background: linear-gradient(to bottom, #0a0a0c 0%, #0a0a0c 100%);
}
.home .workflow-section,
.home .inline-assistant-section,
.home .business-section,
.home .security-section,
.home .compatibility-section {
  --ink: #f1f2f3;
  --muted: #aab1b8;
  --line: rgb(255 255 255 / 8%);
  --line-strong: rgb(255 255 255 / 12%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid rgb(255 255 255 / 5%);
  background: #0a0a0c;
  color: var(--ink);
}
.home .glow-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -10rem;
  right: max(-12rem, calc((100vw - 76rem) / 2));
  width: min(55vw, 48rem);
  height: 34rem;
  pointer-events: none;
  background: radial-gradient(ellipse at 55% 45%, rgb(255 255 255 / 8%), rgb(255 107 0 / 7%) 36%, transparent 72%);
  filter: blur(54px);
  opacity: 0.7;
}
.home .workflow-section > .wrap,
.home .glow-section > .wrap { position: relative; z-index: 1; }
.home .workflow-section .lede,
.home .inline-assistant-section .lede,
.home .business-section .lede,
.home .security-section .lede,
.home .compatibility-section .lede { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.home .workflow-section .lede h2,
.home .inline-assistant-section .lede h2,
.home .business-section .lede h2,
.home .security-section .lede h2,
.home .compatibility-section .lede h2 { color: #f4f6f7; }
.home .workflow-section .lede p,
.home .inline-assistant-section .lede p,
.home .business-section .lede p,
.home .security-section .lede p,
.home .compatibility-section .lede p { color: #aab1b8; }
.workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.workflow-step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
  min-height: 11rem;
  padding: 1.5rem;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 20px;
  background: rgb(255 255 255 / 2%);
  box-shadow: 0 20px 54px rgb(0 0 0 / 16%);
}
.workflow-number { color: #ff8b45; font: 500 1rem/1.4 var(--mono); }
.workflow-step h3,
.bento-card h3,
.trust-card h3,
.compat-card h3 { margin: 0; color: #f1f2f3; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -0.02em; }
.workflow-step p,
.bento-card > p:last-child,
.trust-card > p:last-child,
.compat-card p { margin: 0.7rem 0 0; color: #aab1b8; font-size: 0.97rem; line-height: 1.65; }
.bento-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.bento-card,
.trust-card,
.compat-card {
  min-width: 0;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 20px;
  background: rgb(255 255 255 / 2%);
  box-shadow: 0 24px 60px rgb(0 0 0 / 18%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.bento-card-1 { grid-column: span 5; }
.bento-card-2 { grid-column: span 7; }
.bento-card-3 { grid-column: 1 / -1; }
.card-eyebrow { margin: 0 0 0.8rem; color: #ff9858; font: 600 0.73rem/1.4 var(--mono); letter-spacing: 0.045em; text-transform: uppercase; }
.section-note { max-width: 66rem; margin: 1.25rem 0 0; color: #929ba4; font-size: 0.84rem; line-height: 1.6; }
.trust-grid,
.compat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.trust-card,
.compat-card { min-height: 15rem; }
.inline-assistant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.inline-card {
  min-width: 0; overflow: hidden; padding: 0.75rem 0.75rem 1.5rem; border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 20px; background: rgb(255 255 255 / 2%); box-shadow: 0 24px 60px rgb(0 0 0 / 18%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.inline-art {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 13rem; overflow: hidden;
  padding: 1rem; border: 1px solid rgb(255 255 255 / 5%); border-radius: 13px;
  background: radial-gradient(ellipse at 55% 105%, rgb(255 107 0 / 14%), transparent 60%), linear-gradient(145deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%));
}
.inline-card-copy { padding: 1.3rem 1.1rem 0; }
.inline-card-copy h3 { margin: 0; color: #f1f2f3; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -0.02em; }
.inline-card-copy > p:last-child { margin: 0.7rem 0 0; color: #aab1b8; font-size: 0.97rem; line-height: 1.65; }
.inline-art-mail { justify-content: flex-start; }
.inline-mail-window {
  display: flex; flex-direction: column; width: 78%; min-height: 10.5rem; overflow: hidden; border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 10px; background: #151719; box-shadow: 0 20px 36px rgb(0 0 0 / 35%); color: #c4c8cb; transform: perspective(700px) rotateY(5deg) rotateX(1deg);
}
.inline-window-bar { display: flex; align-items: center; gap: 0.3rem; height: 1.8rem; padding: 0 0.55rem; border-bottom: 1px solid rgb(255 255 255 / 7%); color: #92989d; font-size: 0.67rem; }
.inline-window-bar i { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: rgb(255 255 255 / 24%); }
.inline-window-bar span { margin-left: 0.35rem; }
.inline-mail-copy { display: grid; gap: 0.45rem; padding: 0.8rem; font-size: 0.68rem; }
.inline-mail-copy b { color: #f1f2f3; font-size: 0.72rem; }
.inline-marked { display: block; width: fit-content; margin-top: 0.25rem; padding: 0.18rem 0.3rem; border-radius: 3px; background: rgb(255 107 0 / 22%); color: #f1d7c6; }
.inline-hud {
  position: absolute; right: 4%; bottom: 1.3rem; display: grid; gap: 0.55rem; width: min(47%, 14rem); padding: 0.8rem;
  border: 1px solid rgb(255 255 255 / 14%); border-radius: 11px; background: rgb(28 30 32 / 94%); box-shadow: 0 14px 32px rgb(0 0 0 / 42%);
  color: #b9bec2; font-size: 0.65rem; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.inline-hud-brand { color: #f2f3f4; font-size: 0.7rem; font-weight: 650; }
.inline-hud-brand i { display: inline-block; width: 0.42rem; height: 0.42rem; margin-right: 0.25rem; border-radius: 50%; background: #ff6b00; }
.inline-hud b { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem; border-radius: 6px; background: #ff6b00; color: #17100a; font-weight: 650; }
.inline-hud b i { font-style: normal; }
.inline-art-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; align-content: center; }
.inline-art-label { color: #8e969d; font: 600 0.62rem/1.4 var(--mono); letter-spacing: 0.06em; }
.inline-diff-line { padding: 0.8rem 0.6rem; border-radius: 7px; color: #c4c8cb; font: 0.68rem/1.55 var(--mono); overflow-wrap: anywhere; }
.inline-diff-before { background: rgb(248 81 73 / 9%); border: 1px solid rgb(248 81 73 / 22%); }
.inline-diff-after { background: rgb(46 160 67 / 10%); border: 1px solid rgb(46 160 67 / 24%); }
.inline-art-languages { flex-wrap: wrap; gap: 0.7rem; align-content: center; }
.inline-language-pill { padding: 0.55rem 0.7rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 8px; background: rgb(255 255 255 / 4%); color: #d5d9dc; font: 600 0.72rem/1 var(--mono); }
.inline-language-pill i { margin: 0 0.35rem; color: #ff9858; font-style: normal; }
.inline-language-count { color: #ff9858; font: 600 1.3rem/1 var(--mono); }
.inline-art-snippet { justify-content: flex-start; gap: 0.75rem; color: #cbd0d4; }
.inline-snippet-key { padding: 0.42rem 0.6rem; border: 1px solid rgb(255 255 255 / 13%); border-radius: 7px; background: rgb(255 255 255 / 5%); font: 600 0.75rem/1.2 var(--mono); }
.inline-snippet-arrow { color: #ff9858; font-size: 1.15rem; }
.inline-snippet-text { max-width: 18rem; color: #aab1b8; font-size: 0.76rem; line-height: 1.5; }
.inline-art-ghost { justify-content: flex-start; font: 0.78rem/1.5 var(--mono); white-space: nowrap; }
.inline-ghost-code { color: #d1d5d8; }
.inline-ghost-suggestion { color: #858c92; }
.inline-ghost-tab { position: absolute; right: 0.8rem; bottom: 0.8rem; padding: 0.28rem 0.45rem; border: 1px solid rgb(255 255 255 / 13%); border-radius: 5px; color: #c2c8cc; font-size: 0.62rem; }
.inline-art-grammar { flex-direction: column; gap: 0.55rem; font: 0.76rem/1.5 var(--mono); }
.inline-grammar-before { color: #c8a5a1; text-decoration: line-through; text-decoration-color: #ff6b00; }
.inline-grammar-arrow { color: #ff9858; }
.inline-grammar-after { color: #e0e4e7; }
.inline-grammar-caption { margin-top: 0.25rem; color: #939ba2; font-size: 0.6rem; letter-spacing: 0.08em; }
.inline-metric-badge { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.65rem; width: fit-content; margin: 1.25rem 0 0; padding: 0.6rem 0.85rem; border: 1px solid rgb(255 255 255 / 9%); border-radius: 999px; background: rgb(255 255 255 / 3%); color: #aab1b8; }
.inline-metric-badge strong { color: #f1f2f3; font: 650 0.78rem/1.3 var(--mono); }
.inline-metric-badge span { font-size: 0.8rem; }
.inline-metric-badge small { color: #929ba4; font-size: 0.72rem; }
.section-link { margin: 1.5rem 0 0; }
.section-link a { color: #ff995c; font-weight: 560; text-underline-offset: 0.22em; }
.section-link a:hover { color: #ffc19b; }
.home .closing-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid rgb(255 255 255 / 8%);
  background: radial-gradient(ellipse at 50% 115%, rgb(255 107 0 / 14%), transparent 56%), #0a0a0c;
  color: #f1f2f3;
  text-align: center;
}
.home .closing-hero h2 { max-width: none; margin-inline: auto; color: #f4f6f7; }
.home .closing-hero .lead { max-width: 43rem; margin: 1.2rem auto 0; color: #aab1b8; }
.home .closing-hero .hero-actions { justify-content: center; }
.home .closing-hero .button.primary { background: #ff6b00; border-color: #ff6b00; color: #1a0e07; }
.home .closing-hero .button.primary:hover { background: #ff9952; border-color: #ff9952; }
@media (max-width: 800px) {
  .workflow-steps,
  .inline-assistant-grid,
  .trust-grid,
  .compat-grid { grid-template-columns: 1fr; }
  .workflow-step,
  .inline-card,
  .trust-card,
  .compat-card { min-height: 0; }
}
@media (max-width: 640px) {
  .bento-card-1,
  .bento-card-2,
  .bento-card-3 { grid-column: 1 / -1; }
  .workflow-step { padding: 1.2rem; }
  .home .closing-hero .hero-actions .button { flex: 1 1 100%; }
}

/* Disclosure FAQ and a small, scroll-triggered download rail. */
body.home .hero-subnav {
  position: fixed;
  z-index: 40;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  width: min(calc(100% - 2rem), 76rem);
  min-height: 3.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.55rem 0.45rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 16px;
  background: rgb(20 22 25 / 82%);
  box-shadow: 0 16px 48px rgb(0 0 0 / 34%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -145%);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
}
body.home .hero-subnav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s;
}
.hero-subnav-brand { display: inline-flex; min-width: 0; align-items: center; gap: 0.65rem; color: #f1f2f3; font-size: 0.94rem; font-weight: 600; text-decoration: none; }
.hero-subnav-brand img { display: block; width: 1.75rem; height: 1.75rem; flex: none; }
.hero-subnav-cta { display: inline-flex; min-height: 2.45rem; align-items: center; justify-content: center; padding: 0 1rem; border: 1px solid #ff6b00; border-radius: 10px; background: #ff6b00; color: #1a0e07; font-size: 0.86rem; font-weight: 650; text-decoration: none; transition: background-color 140ms var(--ease), border-color 140ms var(--ease), transform 140ms var(--ease); }
.hero-subnav-cta:hover { border-color: #ff9952; background: #ff9952; }
.hero-subnav-cta:active { transform: translateY(1px); }
.hero-subnav a:focus-visible { outline: 2px solid #ffb27f; outline-offset: 3px; }
.home-faq-section { padding-bottom: clamp(4rem, 8vw, 7rem); }
.home-faq-section .faq-accordion { max-width: 58rem; margin-inline: auto; border-top: 1px solid rgb(255 255 255 / 10%); }
.home-faq-section .faq-item { padding: 0; border: 0; border-bottom: 1px solid rgb(255 255 255 / 9%); }
.home-faq-section .faq-item summary {
  position: relative;
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  padding: 0.9rem 3rem 0.9rem 0;
  color: #f1f2f3;
  font-size: clamp(1rem, 2vw, 1.12rem);
  font-weight: 560;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.home-faq-section .faq-item summary::-webkit-details-marker { display: none; }
.home-faq-section .faq-item summary::after {
  position: absolute;
  right: 0.5rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid #ff995c;
  border-bottom: 1.5px solid #ff995c;
  content: "";
  transform: rotate(45deg) translateY(-0.1rem);
  transition: transform 220ms var(--ease);
}
.home-faq-section .faq-item[open] summary::after { transform: rotate(225deg) translate(-0.05rem, -0.05rem); }
.home-faq-section .faq-item summary:hover { color: #ffc19b; }
.home-faq-section .faq-answer { overflow: hidden; height: auto; }
.home-faq-section .faq-answer > div { padding: 0 3rem 1.35rem 0; }
.home-faq-section .faq-answer p { margin: 0; color: #aab1b8; line-height: 1.7; }
.home-faq-section .faq-answer a { display: inline-flex; margin-top: 0.75rem; color: #ff995c; font-size: 0.9rem; font-weight: 560; text-underline-offset: 0.2em; }
.home-faq-section .faq-answer a:hover { color: #ffc19b; }
@media (max-width: 640px) {
  body.home .hero-subnav { top: max(0.5rem, env(safe-area-inset-top)); width: calc(100% - 1rem); min-height: 3.4rem; padding-left: 0.7rem; border-radius: 14px; }
  .hero-subnav-brand { font-size: 0.86rem; }
  .hero-subnav-brand img { width: 1.55rem; height: 1.55rem; }
  .hero-subnav-cta { min-height: 2.3rem; padding-inline: 0.8rem; }
  .home-faq-section .faq-item summary { min-height: 4rem; padding-right: 2rem; }
  .home-faq-section .faq-answer > div { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .hero-subnav,
  .hero-subnav-cta,
  .home-faq-section .faq-item summary::after { transition: none; }
}
@media (max-width: 1100px) {
  .ad-stage { grid-template-columns: 1fr; }
  .ad-doc { position: static; }
}
@media (max-width: 800px) {
  .ad-language-tools { grid-template-columns: 1fr; justify-items: start; }
  .ad-shortcut-hints { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-language-switch button, .ad-shortcut-hints kbd { transition: none; }
}
.winapp kbd { display: inline; min-width: 0; background: none; font: inherit; font-size: var(--fs-1); line-height: inherit; }
.winapp { border-radius: 8px; overflow: hidden; }

/* v5: warm graphite stages, a clearer product frame, and quieter supporting sections. */
:root { --stage: #11151a; --stage-raised: #171c22; --stage-panel: #1b2128; --stage-line: rgb(255 255 255 / 10%); --stage-text: #f2f3f4; --stage-muted: #b0b7bf; --stage-accent: #ff6b00; --stage-focus: #8bc6ff; }
body.home:is(.home, .dark-top) .site-header {
  --accent: var(--stage-accent);
  min-height: 4.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
}
body.home:is(.home, .dark-top) .site-header :focus-visible { outline-color: var(--stage-focus); }

.hero-v4.product-hero {
  --page: var(--stage); --page-2: #171c22; --surface: var(--stage-panel); --ink: var(--stage-text); --muted: var(--stage-muted);
  --line: var(--stage-line); --line-strong: rgb(255 255 255 / 16%); --accent: var(--stage-accent); --accent-soft: rgb(255 107 0 / 14%);
  --accent-h: #ff9a58; --focus: var(--stage-focus); --glow: var(--stage-accent);
  min-height: max(42rem, calc(100svh - 4.5rem));
  padding: clamp(3.25rem, 6vw, 5.5rem) 0;
  background: radial-gradient(ellipse 52% 70% at 78% 44%, rgb(104 142 181 / 10%), transparent 72%),
    linear-gradient(180deg, #11151a 0%, #151a20 76%, #191e24 100%);
}
.product-hero::before {
  top: 48%; right: max(1rem, calc((100vw - 84rem) / 2)); width: min(54vw, 48rem); height: 68%;
  background: radial-gradient(ellipse at 64% 48%, rgb(255 107 0 / 17%), rgb(105 146 188 / 8%) 42%, transparent 72%);
  filter: blur(58px); opacity: 0.62;
}
.product-hero > .wrap { position: relative; z-index: 2; display: flex; width: min(calc(100% - 3.5rem), 96rem); min-height: 33rem; margin-inline: auto; align-items: center; }
.hero-content { width: 38%; max-width: 36rem; margin: 0; }
.hero-kicker { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.3rem; color: #c1c7cd; font-size: 0.88rem; font-weight: 550; letter-spacing: 0.015em; }
.hero-mascot { display: inline-grid; width: 2.75rem; height: 2.75rem; flex: none; place-items: center; border: 1px solid rgb(255 255 255 / 9%); border-radius: 12px; background: linear-gradient(145deg, #20262d, #171b20); }
.mascot-sprite { --mascot-end: -18rem; display: block; width: 2rem; height: 2rem; background: url("mascot-sprite.svg") 0 0 / 20rem 2rem no-repeat; image-rendering: pixelated; }
@media (hover: hover) and (pointer: fine) {
  .hero-mascot:hover .mascot-sprite { animation: mascot-wave 1.125s steps(9, end) both; }
}
@keyframes mascot-wave { to { background-position-x: var(--mascot-end); } }
.product-hero .product-copy h1 { max-width: 100%; margin: 0; color: #f4f5f6; font-size: clamp(3.1rem, 4.4vw, 4.45rem); line-height: 0.99; letter-spacing: -0.052em; text-wrap: balance; }
.product-hero .product-copy h1 .ln { overflow-wrap: normal; word-break: normal; hyphens: none; }
.product-hero .product-copy h1 .ln:last-child { font-size: clamp(1.55rem, 2.35vw, 2.15rem); line-height: 1.15; letter-spacing: -0.045em; }
.product-hero .hero-copy .hl,
.product-hero .product-copy .hl { background-image: linear-gradient(rgb(255 107 0 / 25%), rgb(255 107 0 / 25%)); }
.product-hero .product-copy .lead { max-width: 34rem; margin: 1.35rem 0 0; color: #bac1c8; font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.7; }
.product-hero .hero-actions { justify-content: flex-start; gap: 0.65rem; margin-top: 1.6rem; }
.product-hero .hero-actions .button { min-height: 2.9rem; padding-inline: 1.1rem; border-radius: 10px; transition: transform 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.product-hero .hero-actions .button.primary { background: var(--stage-accent); border-color: var(--stage-accent); color: #1a0e07; box-shadow: 0 7px 20px rgb(255 107 0 / 16%); }
.product-hero .hero-actions .button.primary:hover { transform: translateY(-1px); background: #ff8a35; border-color: #ff8a35; box-shadow: 0 10px 24px rgb(255 107 0 / 22%); }
.product-hero .hero-actions .button.ghost { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 16%); color: #edf0f2; }
.product-hero .hero-actions .button.ghost:hover { transform: translateY(-1px); background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 25%); }
.product-hero .hero-actions .button:focus-visible { outline: 2px solid var(--stage-focus); outline-offset: 3px; }
.hero-fine { max-width: 34rem; margin: 1.15rem 0 0; color: #929ba4; font-size: 0.78rem; line-height: 1.55; }
.hero-bg-media { --hero-media-mask-x: linear-gradient(90deg, transparent 0%, #000 14%, #000 96%, transparent 100%); --hero-media-mask-y: linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%); position: absolute; z-index: 1; top: 48%; right: max(1.75rem, calc((100vw - 96rem) / 2)); width: min(calc(62vw - 1.75rem), 59.5rem); max-width: none; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: none; }
.hero-bg-media::before, .hero-bg-video { -webkit-mask-image: var(--hero-media-mask-x), var(--hero-media-mask-y); -webkit-mask-composite: source-in; mask-image: var(--hero-media-mask-x), var(--hero-media-mask-y); mask-composite: intersect; }
.hero-bg-media::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #171b20 url("video/ivy-poster.png") center / cover no-repeat; pointer-events: none; }
.hero-bg-video { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; filter: none; }
.hero-reduced-poster { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg-overlay { position: absolute; inset: 0; z-index: 1; background: transparent; pointer-events: none; }
.hero-media-caption { position: absolute; z-index: 2; top: calc(48% + min(17.45vw, 16.75rem) - 0.8rem); right: max(1.75rem, calc((100vw - 96rem) / 2)); width: fit-content; max-width: min(55vw, 790px); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: #f2f3f4; font-size: 0.72rem; line-height: 1.45; text-shadow: 0 1px 8px rgb(0 0 0 / 75%); }
.hero-media-caption span:first-child { color: #ffb27f; font-size: 0.67rem; font-weight: 650; letter-spacing: 0.075em; text-transform: uppercase; }
.hero-content, .hero-bg-media { animation: hero-settle 720ms var(--ease) both; }
.hero-content { animation-delay: 90ms; }
.hero-bg-media { animation-delay: 190ms; }
@keyframes hero-settle { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* The app replica is the real product interaction on this page; give it its own slate stage. */
.home .demo-dark {
  --page: #171c22; --page-2: #1c2229; --surface: #20262d; --ink: #f0f2f4; --muted: #bac1c8;
  --line: rgb(255 255 255 / 9%); --line-strong: rgb(255 255 255 / 15%); --accent: #ff8a35; --accent-soft: rgb(255 138 53 / 14%); --accent-h: #ffad72; --focus: #8bc6ff;
  padding-block: clamp(4rem, 7vw, 6rem) clamp(6rem, 9vw, 9rem);
  background: linear-gradient(180deg, #191e24 0%, #20262d 68%, var(--page-2) 100%);
}
.home .demo-dark .lede h2 { color: #f4f5f6; }
.home .demo-dark .lede p { color: #b4bdc6; }
.home .demo-dark .ad-stage { border-color: rgb(255 255 255 / 12%); background: radial-gradient(70% 120% at 68% 0, rgb(104 142 181 / 11%), transparent 68%), #14191f; box-shadow: 0 30px 72px -44px rgb(0 0 0 / 84%); }
.home .demo-dark .ad-doc { border-color: rgb(255 255 255 / 14%); }
.home .demo-dark .ad-seg button[aria-pressed="true"], .home .demo-dark .ad-controls .tab[aria-selected="true"] { background: #ff8a35; border-color: #ff8a35; color: #1b1109; }
.home .demo-dark .ad-doc textarea:focus-visible, .home .demo-dark button:focus-visible { outline-color: #8bc6ff; }
.home .demo-dark .fine-print { color: #aab2ba; }

/* Alternating open layouts replace a long run of same-sized cards. */
.home .workflow-section { background: var(--page-2); color: var(--ink); border-color: var(--line); }
.home .workflow-section .lede h2 { color: var(--ink); }
.home .workflow-section .lede p { color: var(--muted); }
.home .workflow-steps { gap: clamp(1.25rem, 3.5vw, 3.5rem); }
.home .workflow-step { min-height: 0; padding: 1.35rem 0 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: none; box-shadow: none; }
.home .workflow-number { color: var(--accent); font-size: 0.95rem; }
.home .workflow-step h3 { color: var(--ink); }
.home .workflow-step p { color: var(--muted); }
.home .inline-assistant-section { background: linear-gradient(155deg, #151a20, #11151a 72%); }
.home .inline-assistant-section::before { right: 4%; top: -6rem; opacity: 0.48; }
.visual-note { margin: -1.3rem 0 1.3rem; color: #9ca5ad; font-size: 0.78rem; }
.home .inline-assistant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3.2vw, 3rem); }
.home .inline-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.home .inline-art { min-height: clamp(11rem, 18vw, 15rem); border-color: rgb(255 255 255 / 8%); border-radius: 16px; }
.home .inline-card-copy { padding: 1rem 0.25rem 0; }
.home .inline-card-copy > p:last-child { max-width: 48ch; }
.home .business-section { background: var(--page-2); color: var(--ink); }
.home .business-section::before { display: none; }
.home .business-section .lede h2, .home .business-section .bento-card h3 { color: var(--ink); }
.home .business-section .lede p, .home .business-section .bento-card > p:last-child { color: var(--muted); }
.home .bento-grid { gap: 1.5rem; border-top: 1px solid var(--line-strong); }
.home .bento-card, .home .bento-card-1, .home .bento-card-2, .home .bento-card-3 {
  grid-column: span 4; min-height: 0; padding: 1.35rem 1.25rem 0 0; border: 0; border-right: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.home .bento-card:last-child { border-right: 0; }
.home .bento-card .card-eyebrow { color: var(--accent); }
.home .security-section { background: #14191f; }
.home .security-section::before { right: 2%; width: min(42vw, 34rem); opacity: 0.42; }
.home .security-section .trust-card { min-height: 0; padding: 1.25rem 1.35rem 0 0; border: 0; border-top: 1px solid rgb(255 255 255 / 14%); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.home .compatibility-section { background: var(--page); color: var(--ink); }
.home .compatibility-section::before { display: none; }
.home .compatibility-section .lede h2, .home .compatibility-section .compat-card h3 { color: var(--ink); }
.home .compatibility-section .lede p, .home .compatibility-section .compat-card p { color: var(--muted); }
.home .compat-grid { gap: 0; border-top: 1px solid var(--line-strong); }
.home .compat-card { min-height: 0; padding: 1.35rem 1.35rem 0 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.home .compat-card:last-child { border-right: 0; }
.home .closing-hero { background: radial-gradient(ellipse at 76% 50%, rgb(93 125 160 / 11%), transparent 40%), linear-gradient(180deg, #171c22, #11151a); }
.home .home-faq-section { background: var(--page-2); color: var(--ink); }
.home .home-faq-section::before { display: none; }
.home .home-faq-section .lede h2, .home .home-faq-section .faq-item summary { color: var(--ink); }
.home .home-faq-section .lede p, .home .home-faq-section .faq-answer p { color: var(--muted); }
.home .home-faq-section .faq-accordion { border-color: var(--line-strong); }
.home .home-faq-section .faq-item { border-color: var(--line); }
.home .home-faq-section .faq-item summary:hover { color: var(--accent); }
.home .home-faq-section .faq-item summary::after { border-color: var(--accent); }
.home .home-faq-section .faq-answer a { color: var(--accent); }

/* Short reveals opt in only after JS and IntersectionObserver are available; the page remains visible without JS. */
[data-reveal][data-reveal-state="waiting"] { opacity: 0; transform: translateY(14px); }
[data-reveal][data-reveal-state="visible"] { opacity: 1; transform: translateY(0); transition: opacity 460ms var(--ease), transform 460ms var(--ease); }
.home a, .home button { -webkit-tap-highlight-color: transparent; }
@media (max-width: 1100px) {
  .hero-v4.product-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 3.25rem; }
  .product-hero > .wrap { order: 0; min-height: 0; justify-content: center; }
  .hero-content { width: min(100%, 620px); max-width: 620px; margin: 0; }
  .product-hero .product-copy h1 { max-width: 16ch; font-size: clamp(2.8rem, 6vw, 4rem); }
  .product-hero > .hero-bg-media { position: relative; top: auto; right: auto; order: 1; transform: none; width: min(calc(100% - 3.5rem), 60rem); margin: 2.5rem auto 0; }
  .hero-bg-media { --hero-media-mask-x: linear-gradient(90deg, transparent 0%, #000 8%, #000 96%, transparent 100%); --hero-media-mask-y: linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%); }
  .hero-bg-overlay { background: transparent; }
  .hero-media-caption { position: relative; top: auto; right: auto; order: 2; width: min(calc(100% - 3.5rem), 60rem); margin: 0.65rem auto 0; }
  .hero-availability-band > .wrap { grid-template-columns: auto minmax(0, 1fr); padding-block: 0.65rem; }
  .availability-meta { grid-column: 1 / -1; justify-content: flex-start; }
  .home .demo-dark { padding-bottom: clamp(4rem, 8vw, 7rem); }
}
@media (max-width: 767px) {
  .hero-v4.product-hero { min-height: 0; padding-block: clamp(2.5rem, 10vw, 4rem) 2.25rem; }
  .product-hero > .wrap { width: min(calc(100% - 2rem), 42rem); min-height: 0; order: 0; }
  .hero-content { width: 100%; max-width: none; margin: 0; text-align: center; }
  .hero-kicker { justify-content: center; margin-bottom: 1rem; font-size: 0.82rem; }
  .hero-mascot { width: 2.5rem; height: 2.5rem; }
  .mascot-sprite { --mascot-end: -16.65rem; width: 1.85rem; height: 1.85rem; background-size: 18.5rem 1.85rem; }
  .product-hero .product-copy h1 { max-width: none; margin-inline: auto; font-size: clamp(2.1rem, 9.5vw, 3.75rem); line-height: 1.01; }
  .product-hero .product-copy h1 .ln:last-child { font-size: clamp(1.2rem, 5.2vw, 1.65rem); }
  .product-hero .product-copy .lead { max-width: 40rem; margin-inline: auto; font-size: 1rem; }
  .product-hero .hero-actions { flex-wrap: wrap; justify-content: center; }
  .product-hero .hero-actions .button { flex: 0 1 auto; }
  .product-hero > .hero-bg-media { width: min(calc(100% - 2rem), 42rem); max-width: none; margin: 2.25rem auto 0; }
  .hero-media-caption { width: min(calc(100% - 2rem), 42rem); max-width: none; margin-top: 0.55rem; font-size: 0.67rem; }
  .home .workflow-steps, .home .inline-assistant-grid, .home .trust-grid, .home .compat-grid { grid-template-columns: 1fr; }
  .home .workflow-step { padding-top: 1.1rem; }
  .home .bento-grid { grid-template-columns: 1fr; gap: 0; }
  .home .bento-card, .home .bento-card-1, .home .bento-card-2, .home .bento-card-3 { grid-column: 1; padding: 1.2rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .home .bento-card:last-child { border-bottom: 0; }
  .home .compat-card { padding: 1.1rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .home .compat-card:last-child { border-bottom: 0; }
  .home .trust-card { padding: 1rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content, .hero-bg-media { animation: none; }
  .product-hero .hero-bg-media:not(.is-film-playing) .hero-bg-video { opacity: 0; }
  .product-hero .hero-bg-media.is-film-playing .hero-bg-video { opacity: 1; }
  .hero-mascot:hover .mascot-sprite { animation: none; background-position: 0 0; }
  [data-reveal][data-reveal-state] { opacity: 1; transform: none; transition: none; }
  .product-hero .hero-actions .button { transition: none; }
  .hero-motion-toggle { transition: none; }
}

/* Product page: one integrated, local walkthrough followed by alternating examples. */
.product-page-head { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.product-showcase-section {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 7vw, 6rem);
  background: linear-gradient(180deg, var(--page), var(--page-2));
}
.product-showcase-heading,
.product-reference-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.product-showcase-heading > div { max-width: 54rem; }
.product-showcase-heading h2,
.product-story-copy h2,
.product-control-layout h2,
.product-reference-heading h2,
.product-final-cta h2 {
  max-width: 20ch; color: var(--ink); font-size: clamp(1.85rem, 3.7vw, 3rem); line-height: 1.05;
}
.product-showcase-heading > div > p:last-child,
.product-reference-heading > p { max-width: 54rem; margin: .8rem 0 0; color: var(--muted); }
.product-playback {
  flex: none; min-height: 2.65rem; padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: .86rem; font-weight: 600; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.product-playback:hover { border-color: var(--accent); background: var(--accent-soft); }
.product-playback:active { transform: scale(.98); }
.product-window {
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow);
}
.product-window-top {
  display: flex; align-items: center; gap: .65rem; min-height: 3.2rem; padding: .55rem 1rem;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page-2) 74%, transparent);
}
.product-window-top > strong { font-size: .9rem; font-weight: 650; }
.product-window-lights { display: inline-flex; gap: .28rem; }
.product-window-lights i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--line-strong); }
.product-window-mode { margin-left: auto; color: var(--muted); font-size: .76rem; }
.product-scenario-tabs { display: flex; gap: .35rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.product-scenario-tab {
  min-height: 2.55rem; padding: .48rem .8rem; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: .87rem; font-weight: 560; cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.product-scenario-tab:hover { color: var(--ink); background: var(--page-2); }
.product-scenario-tab[aria-selected="true"] { border-color: var(--line-strong); background: var(--page-2); color: var(--ink); }
.product-scenario-tab:focus-visible, .product-playback:focus-visible, .product-confirm:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.product-workspace { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(21rem, .98fr); min-height: 23rem; }
.product-editor { min-width: 0; padding: clamp(1rem, 2.4vw, 1.7rem); border-right: 1px solid var(--line); background: radial-gradient(ellipse at 5% 0, var(--accent-soft), transparent 44%), var(--page-2); transition: box-shadow .28s ease; }
.product-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .78rem; font-weight: 600; }
.product-editor-head span:last-child { font: 600 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.product-code-selection { position: relative; margin-top: .8rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-soft) 24%, var(--code)); transition: border-color .28s ease, box-shadow .28s ease; }
.product-code-selection::after { position: absolute; inset: .35rem auto .35rem 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); content: ""; opacity: 0; transform: scaleY(.08); transform-origin: top; transition: opacity .22s ease, transform .38s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.product-code-selection pre { position: relative; z-index: 1; }
.product-code-selection pre { max-height: 16.5rem; overflow: auto; margin: 0; padding: 1rem; color: var(--code-ink); font: .82rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; white-space: pre; }
.product-code-selection code { color: inherit; }
.product-editor-summary { max-width: 52ch; margin: .85rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.product-assistant { min-width: 0; padding: clamp(1rem, 2.4vw, 1.7rem); transition: box-shadow .28s ease; }
.product-assistant-head { display: flex; align-items: center; gap: .55rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.product-assistant-head > strong { font-size: .9rem; }
.product-assistant-mark { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: .48rem; background: var(--accent); color: var(--accent-ink); font-size: .78rem; font-weight: 750; }
.product-prepared-label { margin-left: auto; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; }
.product-action-block { margin-top: 1rem; padding-left: .8rem; border-left: 2px solid var(--accent); transition: opacity .25s ease, border-color .25s ease; }
.product-action-block p, .product-result-label, .product-change-block h4 { margin: 0; color: var(--muted); font-size: .75rem; font-weight: 620; letter-spacing: .025em; }
.product-action-block h3 { margin: .15rem 0 0; color: var(--ink); font-size: 1rem; line-height: 1.35; }
.product-result-block { margin-top: 1rem; transition: opacity .25s ease; }
.product-result-block > p:last-child { max-width: 56ch; margin: .35rem 0 0; color: var(--ink); font-size: .91rem; line-height: 1.55; }
.product-change-block { margin-top: 1rem; }
.product-diff { overflow: hidden; margin-top: .45rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--code); }
.product-diff-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .45rem; padding: .22rem .55rem; color: var(--code-ink); font: .75rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.product-diff-row code { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; font: inherit; }
.product-diff-sign { text-align: center; color: var(--muted); }
.product-diff-row.is-del { background: var(--del-bg); color: var(--del-ink); }
.product-diff-row.is-del .product-diff-sign { color: var(--del-ink); }
.product-diff-row.is-add { background: var(--add-bg); color: var(--add-ink); }
.product-diff-row.is-add .product-diff-sign { color: var(--add-ink); }
.product-confirm { min-height: 2.35rem; margin-top: .7rem; padding: .45rem .75rem; font-size: .78rem; }
.product-confirm:disabled { opacity: .58; cursor: default; }
.product-confirm-status, .product-no-change { margin: .65rem 0 0; color: var(--muted); font-size: .83rem; line-height: 1.5; }
[data-product-confirm-status][hidden], [data-product-no-change][hidden], [data-product-change][hidden], [data-product-playback][hidden] { display: none; }
.product-sequence { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: .95rem 1rem; border-top: 1px solid var(--line); list-style: none; }
.product-sequence li { display: flex; min-width: 0; align-items: baseline; gap: .5rem; color: var(--muted); font-size: .78rem; transition: color .2s ease; }
.product-sequence li > span { color: var(--muted); font: 600 .68rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.product-sequence li[aria-current="step"] { color: var(--ink); }
.product-sequence li[aria-current="step"] > span { color: var(--accent); }
.product-illustration-note { max-width: 80ch; margin: .8rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.product-showcase-section[data-phase="selection"] .product-code-selection { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.product-showcase-section[data-phase="selection"] .product-code-selection::after { opacity: 1; transform: scaleY(1); }
.product-showcase-section[data-phase="action"] .product-action-block,
.product-showcase-section[data-phase="result"] .product-result-block,
.product-showcase-section[data-phase="diff"] .product-change-block { box-shadow: -4px 0 0 -2px var(--accent-soft); }
.product-showcase-section [data-product-step="diff"],
.product-showcase-section [data-product-step="confirm"] { transition: opacity .25s ease; }
.product-story { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); width: min(calc(100% - 3rem), 76rem); margin-inline: auto; padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.product-story:nth-of-type(even) { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
.product-story:nth-of-type(even) .product-story-copy { order: 2; }
.product-story:nth-of-type(even) .product-story-art { order: 1; }
.product-story-copy .eyebrow { font-size: .78rem; }
.product-story-copy h2 { max-width: 16ch; font-size: clamp(1.7rem, 3.1vw, 2.5rem); }
.product-story-copy > p:not(.eyebrow) { max-width: 48ch; margin: .85rem 0 1rem; color: var(--muted); }
.product-story-copy > a { display: inline-flex; min-height: 2.65rem; align-items: center; font-size: .9rem; font-weight: 600; text-decoration: none; }
.product-story-copy > a::after { margin-left: .45rem; content: "↗"; transition: transform .16s ease; }
.product-story-copy > a:hover::after { transform: translate(2px, -2px); }
.product-story-art { min-width: 0; margin: 0; padding: clamp(.8rem, 2vw, 1.4rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(ellipse at 50% 0, var(--accent-soft), transparent 66%), var(--page-2); box-shadow: var(--shadow); }
.product-story-window { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.product-story-window-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.6rem; padding: .45rem .75rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .73rem; }
.product-story-window pre { overflow: auto; margin: 0; padding: .85rem; color: var(--code-ink); font: .73rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.product-story-selection { margin: .75rem .8rem 0; color: var(--accent); font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.product-story-annotation { margin: .15rem .8rem .8rem; padding: .65rem .75rem; border-left: 2px solid var(--accent); color: var(--muted); font-size: .82rem; line-height: 1.55; }
.product-story-art .product-diff { margin: .85rem; }
.product-story-art .product-story-annotation { margin-top: 0; }
.product-text-comparison { padding-bottom: .25rem; }
.product-text-before, .product-text-after { display: grid; gap: .35rem; margin: .85rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: .83rem; line-height: 1.55; }
.product-text-before > span, .product-text-after > span { color: var(--muted); font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.product-text-before { background: var(--del-bg); color: var(--del-ink); }
.product-text-after { background: var(--add-bg); color: var(--add-ink); }
.product-control-section { padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); background: var(--page-2); }
.product-control-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.product-control-layout > div > p:not(.eyebrow) { max-width: 52ch; margin: .85rem 0 0; color: var(--muted); }
.product-control-points { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.product-control-points li { display: grid; grid-template-columns: minmax(9rem, .6fr) minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.product-control-points strong { font-size: .88rem; font-weight: 600; }
.product-control-points span { color: var(--muted); font-size: .85rem; }
.product-reference-section { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--line); }
.product-reference-heading { margin-bottom: 1.3rem; }
.product-reference-heading h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.product-reference-heading > p { max-width: 42rem; margin: 0; }
.product-final-cta { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--line); background: radial-gradient(ellipse at 80% 10%, var(--accent-soft), transparent 38%), var(--page-2); }
.product-final-cta > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 3rem; }
.product-final-cta h2 { font-size: clamp(2rem, 4vw, 3rem); }
.product-final-cta .wrap > div:first-child > p:last-child { max-width: 55ch; margin: .75rem 0 0; color: var(--muted); }
.product-final-cta .wrap > div:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1rem; }
.product-secondary-cta { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: .35rem; font-size: .9rem; font-weight: 600; text-decoration: none; }
.product-platform-status { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--line-strong); list-style: none; }
.product-platform-status li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .15rem .7rem; padding: .65rem 0; }
.product-platform-status strong { font-size: .86rem; }
.product-platform-status span, .product-platform-status small { color: var(--muted); font-size: .78rem; }
.product-platform-status small { grid-column: 1 / -1; }
@media (max-width: 850px) {
  .product-workspace { grid-template-columns: minmax(0, 1fr) minmax(18rem, .95fr); }
  .product-story, .product-story:nth-of-type(even) { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 680px) {
  .product-showcase-heading, .product-reference-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .product-showcase-heading h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .product-workspace { grid-template-columns: minmax(0, 1fr); }
  .product-editor { border-right: 0; border-bottom: 1px solid var(--line); }
  .product-code-selection pre { max-height: 13rem; font-size: .74rem; }
  .product-assistant { padding-top: 1rem; }
  .product-scenario-tabs { flex-wrap: wrap; }
  .product-scenario-tab { flex: 0 1 auto; min-width: 0; }
  .product-sequence { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
  .product-sequence li { display: grid; gap: .15rem; font-size: .62rem; line-height: 1.35; }
  .product-story, .product-story:nth-of-type(even) { grid-template-columns: 1fr; width: min(calc(100% - 2.5rem), 40rem); gap: 1.35rem; padding-block: 3.25rem; }
  .product-story:nth-of-type(even) .product-story-copy, .product-story:nth-of-type(even) .product-story-art { order: initial; }
  .product-control-layout { grid-template-columns: 1fr; gap: 2rem; }
  .product-control-points li { grid-template-columns: 1fr; gap: .25rem; }
  .product-final-cta > .wrap { grid-template-columns: 1fr; }
  .product-final-cta .wrap > div:nth-child(2) { justify-content: flex-start; }
  .product-platform-status { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .product-playback, .product-scenario-tab, .product-editor, .product-code-selection, .product-assistant,
  .product-action-block, .product-result-block, .product-change-block, .product-sequence li,
  .product-story-copy > a::after { transition: none !important; animation: none !important; }
}
/* Full feature inventory ---------------------------------------------------------------------------------------------- */
.inventory { background: var(--page); }
.inv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
.inv-filter { min-height: 2.5rem; padding: 0 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 0.88rem; font-weight: 560; cursor: pointer; transition: background-color 0.12s var(--ease), color 0.12s var(--ease), border-color 0.12s var(--ease); }
.inv-filter:hover { color: var(--ink); border-color: var(--ink); }
.inv-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); }
.inv-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.inv-count { margin-left: auto; color: var(--muted); font: 0.8rem/1 var(--mono); }
.inv-legend { max-width: 62rem; margin: 0 0 2rem; color: var(--muted); font-size: 0.9rem; }
.inv-group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0.5rem 3rem; padding: 1.5rem 0; border-top: 1px solid var(--line-strong); }
.inv-group[hidden] { display: none; }
.inv-group h3 { margin: 0; font-size: 1.35rem; position: sticky; top: 5rem; align-self: start; }
.inv-list { margin: 0; padding: 0; list-style: none; }
.inv-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.5rem; padding: 0.8rem 0; border-top: 1px solid var(--line); }
.inv-item:first-child { border-top: 0; padding-top: 0; }
.inv-item[hidden] { display: none; }
.inv-main b { display: block; font-weight: 560; }
.inv-main span { display: block; max-width: 52rem; margin-top: 0.15rem; color: var(--muted); font-size: 0.92rem; }
.inv-meta { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 0.35rem; }
.plat { padding: 0.1rem 0.55rem; border: 1px solid var(--ink); border-radius: 4px; font-size: 0.76rem; font-weight: 600; line-height: 1.5; }
.plat.off { border: 1px dashed var(--line-strong); color: var(--muted); font-weight: 400; text-decoration: line-through; }
.inv-tests { padding: 0.1rem 0.45rem; color: var(--muted); font: 0.74rem/1.5 var(--mono); }
.inv-tests.off { opacity: 0.8; }
@media (max-width: 900px) {
  .inv-group { grid-template-columns: 1fr; }
  .inv-group h3 { position: static; }
  .inv-item { grid-template-columns: 1fr; }
  .inv-meta { justify-content: flex-start; }
}

/* =====================================================================================================================
   v4: calm header and restrained code-first positioning
   ===================================================================================================================== */
body:is(.home, .dark-top) .site-header {
  --ink: #ecebe7; --muted: #b3b9c0; --line: rgb(255 255 255 / 12%); --line-strong: rgb(255 255 255 / 22%); --surface: #1a1e23; --accent: #ff7a3d;
  position: relative; z-index: 5; width: min(calc(100% - 3rem), 76rem); min-height: 4.25rem; margin: 0 auto; padding: 0; border: 0; border-radius: 0; gap: 1.25rem;
  background: var(--stage); color: var(--ink); box-shadow: 0 0 0 100vmax var(--stage); clip-path: inset(0 -100vmax);
}
body:is(.home, .dark-top) .site-header .brand { color: var(--ink); font-size: 1.05rem; }
body:is(.home, .dark-top) .site-header .nav-links { gap: 0.1rem; }
body:is(.home, .dark-top) .site-header .nav-links a { min-height: 2.25rem; padding: 0 0.7rem; border-bottom: 0; border-radius: 8px; font-size: 0.9rem; transition: background-color 0.12s var(--ease), color 0.12s var(--ease); }
body:is(.home, .dark-top) .site-header .nav-links a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
body:is(.home, .dark-top) .site-header .nav-links a[aria-current] { background: none; color: var(--ink); font-weight: 560; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
body:is(.home, .dark-top) .site-header .nav-links a.nav-cta { margin-left: 0.5rem; padding: 0 1rem; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-weight: 600; border-radius: 999px; }
body:is(.home, .dark-top) .site-header .nav-links a.nav-cta:hover { border-color: var(--ink); background: var(--surface); }
body:is(.home, .dark-top) .site-header .nav-links a.lang-switch { margin-left: 0.5rem; border: 1px solid var(--line-strong); border-radius: 999px; background: none; }
body:is(.home, .dark-top) .site-header .theme-toggle, body:is(.home, .dark-top) .site-header .menu-toggle { min-width: 2.25rem; min-height: 2.25rem; color: var(--ink); border-color: var(--line-strong); background: transparent; }
body:is(.home, .dark-top) .site-header a:focus-visible, body:is(.home, .dark-top) .site-header button:focus-visible { outline: 2px solid #ff9a66; outline-offset: 2px; }
@media (max-width: 1040px) {
  body:is(.home, .dark-top) .site-header .nav-links { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; }
  body:is(.home, .dark-top) .site-header .nav-links a { min-height: 2.75rem; }
  body:is(.home, .dark-top) .site-header .nav-links a.nav-cta { margin: 0.25rem 0 0; justify-content: center; }
}

.hero-v4 {
  --page: #07090b; --page-2: #0d1115; --surface: #12171c; --ink: #ecebe7; --muted: #aab1b8; --line: #2a3036; --line-strong: #3a4148;
  --accent: #ff7a3d; --accent-soft: rgb(255 122 61 / 14%); --accent-h: #ff9a66; --focus: #ff9a66; --warn: #e6b04f; --code: #0a0d10; --code-ink: #e9eef5;
  --shadow: 0 40px 80px -30px rgb(0 0 0 / 80%);
  background: linear-gradient(to bottom, var(--stage) 0, var(--stage) calc(100% - 3rem), var(--paper, #f4f2ee) 100%);
  color: var(--ink); padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.hero-v4 h1 { margin: 0; font-size: clamp(2rem, 3.1vw, 2.8rem); line-height: 1.06; letter-spacing: -0.035em; color: #f4f6f7; }
.hero-v4 h1 .ln { display: block; }
.hero-v4 .hl { background: linear-gradient(rgb(255 122 61 / 34%), rgb(255 122 61 / 34%)) no-repeat 0 90% / 100% 44%; color: inherit; padding: 0 0.1em; margin-left: -0.1em; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center; }
.hero-row { display: grid; gap: 1rem; }
.hero-v4 .lead { margin: 0; max-width: 40rem; color: var(--muted); font-size: 1rem; }
.hero-cta .hero-actions { margin: 0; }
.hero-v4 .button { background: #1a2026; border-color: #3a4148; color: #ecebe7; }
.hero-v4 .button:hover { background: #222a31; border-color: #5a646d; }
.hero-v4 .button.primary { background: var(--glow); border-color: var(--glow); color: #1a0e07; }
.hero-v4 .button.primary:hover { background: #ff9a66; border-color: #ff9a66; }
.hero-v4 .fine-print { margin: 0.75rem 0 0; max-width: 30rem; }
.hero-demo { margin-top: clamp(1.25rem, 3vw, 2rem); scroll-margin-top: 1rem; }
.demo-intro { margin: 0 0 0.75rem; max-width: 52rem; color: var(--muted); font-size: 0.92rem; }
.demo-intro b { color: #f4f6f7; font-weight: 600; }
.demo-intro span { display: block; margin-top: 0.15rem; font-size: 0.85rem; }
.hero-v4 .ad-controls .tab[aria-selected="true"] { background: var(--glow); border-color: var(--glow); color: #1a0e07; }
.hero-v4 .ad-controls .tab { color: var(--muted); }
.hero-v4 .ad-controls .tab:hover { background: #12171c; color: #ecebe7; }

/* The one animation: after the code is selected the real panel rises into place, once; then everything stands still. */
[data-mount] { transition: opacity 0.2s var(--ease); }
[data-mount].is-hidden { opacity: 0; visibility: hidden; }
[data-mount].is-rise { animation: panel-rise 0.7s var(--ease) both; transform-origin: 50% 100%; }
@keyframes panel-rise { from { opacity: 0; transform: perspective(900px) translate3d(0, 18px, -60px) rotateX(5deg); } to { opacity: 1; transform: none; } }
.ad-doc textarea::selection { background: rgb(255 122 61 / 38%); }
@media (max-width: 900px) { .hero-top { grid-template-columns: 1fr; } .hero-v4 h1 { font-size: clamp(2rem, 8.5vw, 3rem); } }
@media (prefers-reduced-motion: reduce) { [data-mount].is-rise { animation: none; } [data-mount] { transition: none; } }

/* Start-page entry points: open editorial columns with the same spacing and actions as the rest of the site. */
.home-pathways { padding-block: var(--space-section); background: var(--page-2); color: var(--ink); }
.pathways-heading { max-width: 22ch; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.08; }
.pathways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line-strong); }
.pathway { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: clamp(1.25rem, 2.4vw, 2rem); }
.pathway:first-child { padding-left: 0; }
.pathway + .pathway { border-left: 1px solid var(--line); }
.pathway:last-child { padding-right: 0; }
.pathway-index { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 1.2rem; color: var(--accent); font: 650 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pathway-index span { color: var(--muted); font: 600 .75rem/1.4 var(--font-sans); letter-spacing: .08em; }
.pathway h3 { max-width: 22ch; margin: 0; color: var(--ink); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.18; }
.pathway > p:not(.pathway-index) { max-width: 43ch; margin: .7rem 0 0; color: var(--muted); line-height: 1.65; }
.pathway-sequence { display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--ink); font-size: .88rem; font-weight: 560; }
.pathway-sequence li + li::before { margin-right: .75rem; color: var(--muted); content: "→"; }
.pathway-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: auto 0 0; padding-top: var(--space-5); }
.pathway-links a, .pathway-main-link { min-height: 2.7rem; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.pathway-links a:first-child, .pathway-main-link { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.pathway-links a:hover, .pathway-main-link:hover { border-color: var(--accent-h); background: var(--accent-h); color: var(--accent-ink); }
.pathway-links a:focus-visible, .pathway-main-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pathway-main-link { margin: auto 0 0; }

/* Multi-page: sub pages share the typography, start teasers, help and download pieces ------------------------------------ */
body.sub h1, body.sub h2, body.sub h3, body.sub .use-word, body.sub .walk-n, body.sub .pillars h4 { font-family: var(--sans); font-weight: 560; letter-spacing: -0.03em; }
body.sub h3 { letter-spacing: -0.02em; }
body.sub p { max-width: 66ch; }
body.sub .wrap { width: min(calc(100% - 3rem), 76rem); }
body.sub .sub, body.sub .walk-n { margin-top: 2.5rem; }
body.sub .walk-n { margin-top: 0; font-family: var(--mono); font-weight: 300; }
body.sub .sub { font-size: 1.35rem; }
.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem); }
.page-head h1 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; }
.page-head .lead { margin-top: 1rem; max-width: 44rem; }
body.sub .section { padding-block: clamp(2.25rem, 5vw, 4rem); }
body.dark-top .hero-v4.demo-page { padding-top: clamp(1rem, 3vw, 2rem); }
.demo-page h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.benefit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.benefit-list li { padding: 1.5rem 1.5rem 0.5rem 0; }
.benefit-list li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.benefit-list h3 { margin: 0; font-size: 1.5rem; }
.benefit-list p { margin: 0.5rem 0 0; color: var(--muted); }
.teasers { padding-block: clamp(1rem, 3vw, 2rem); }
.teaser-list { border-top: 1px solid var(--line-strong); }
.teaser { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr) auto; gap: 1rem 2rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color 0.12s var(--ease), padding 0.12s var(--ease); }
.teaser:hover { background: var(--page-2); }
.teaser:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.teaser-t { font: 560 1.6rem/1.1 var(--sans); letter-spacing: -0.03em; }
.teaser-x { color: var(--muted); }
.teaser-go { color: var(--accent); font-size: 1.25rem; }
.help-toc { border-block: 1px solid var(--line); background: var(--page-2); position: sticky; top: 0; z-index: 4; }
.help-toc .wrap { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding-block: 0.4rem; }
.help-toc a { min-height: 2.5rem; display: inline-flex; align-items: center; padding: 0 0.8rem; border-radius: 8px; color: var(--muted); font-size: 0.92rem; text-decoration: none; }
.help-toc a:hover { color: var(--ink); background: var(--surface); }
.table-wrap { overflow-x: auto; }
.keytable { width: 100%; max-width: 56rem; border-collapse: collapse; font-size: 0.95rem; }
.keytable th, .keytable td { padding: 0.65rem 1rem 0.65rem 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.keytable thead th { color: var(--muted); font-size: 0.8rem; font-weight: 600; border-top: 0; }
.keytable tbody th { font-weight: 560; }
.keytable td { font-family: var(--mono); font-size: 0.88rem; }
[id] { scroll-margin-top: 4rem; }
@media (max-width: 800px) {
  .pathways-grid { grid-template-columns: 1fr; }
  .pathway, .pathway:first-child, .pathway:last-child { padding: 1.35rem 0; }
  .pathway + .pathway { border-top: 1px solid var(--line); border-left: 0; }
  .pathway-links, .pathway-main-link { margin-top: 1.1rem; }
  .benefit-list { grid-template-columns: 1fr; }
  .benefit-list li, .benefit-list li + li { padding: 1.25rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .benefit-list li:first-child { border-top: 0; }
  .teaser { grid-template-columns: 1fr auto; }
  .teaser-x { grid-column: 1; }
  .teaser-go { grid-row: 1; grid-column: 2; }
}
body.sub:not(.dark-top) .site-header .nav-links a.nav-cta { margin-left: 0.5rem; padding: 0 1rem; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-weight: 600; border-radius: 999px; }
body.sub:not(.dark-top) .site-header .nav-links a.nav-cta:hover { border-color: var(--ink); background: var(--surface); }
body.sub:not(.dark-top) .site-header .nav-links a.nav-cta[aria-current] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

/* Availability and primary action are visible before the visitor reaches the interactive app preview. */
.product-hero .hero-content,
.product-hero .hero-bg-media { animation: none; }
.product-hero .hero-bg-media { pointer-events: none; }
.product-hero .hero-bg-video { opacity: 1; background: #101317; }
.product-hero .hero-bg-overlay { z-index: 1; }
.product-hero .hero-bg-overlay { pointer-events: none; }
.hero-media-caption { pointer-events: none; }
.product-hero .hero-bg-media.is-film-static .hero-bg-video { opacity: 0; }
.product-hero .hero-bg-media.is-film-playing .hero-bg-video { opacity: 1; }
.hero-motion-toggle {
  position: absolute; right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); z-index: 3;
  display: grid; width: 2.5rem; height: 2.5rem; place-items: center; padding: 0;
  border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%; background: rgb(14 18 22 / 74%);
  color: #f4f5f6; font: 600 0.9rem/1 var(--sans); cursor: pointer; pointer-events: auto;
  box-shadow: 0 2px 12px rgb(0 0 0 / 22%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
}
.hero-motion-toggle:hover { transform: translateY(-1px); border-color: rgb(255 255 255 / 48%); background: rgb(25 30 36 / 92%); }
.hero-motion-toggle:focus-visible { outline: 2px solid var(--stage-focus); outline-offset: 3px; }
.hero-motion-toggle:disabled { cursor: not-allowed; opacity: 0.68; }
.hero-motion-toggle[hidden] { display: none !important; }
.hero-availability-band { position: relative; z-index: 2; border-block: 1px solid rgb(255 255 255 / 6%); background: linear-gradient(180deg, #171c22, #191e24); }
.hero-availability-band > .wrap { display: grid; width: min(calc(100% - 3.5rem), 96rem); min-height: 4.6rem; margin-inline: auto; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem clamp(1rem, 2vw, 2rem); }
.hero-availability-title { margin: 0; color: #929ba4; font-size: 0.66rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-availability { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.hero-availability a { display: inline-flex; min-height: 2.15rem; align-items: center; gap: 0.4rem; padding: 0.28rem 0.45rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #eff1f3; text-decoration: none; transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
.hero-availability a:hover { border-color: rgb(255 255 255 / 10%); background: rgb(255 255 255 / 5%); }
.hero-availability a:focus-visible { outline: 2px solid var(--stage-focus); outline-offset: 2px; }
.hero-platform-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.45rem; }
.hero-platform-top strong { font-size: 0.77rem; font-weight: 650; }
.hero-platform-top > span { color: #ffb27f; font-size: 0.7rem; font-weight: 600; }
.hero-availability small { display: block; color: #b5bdc5; font-size: 0.66rem; line-height: 1.35; }
.availability-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem 0.75rem; }
.availability-note, .availability-meta .hero-fine { margin: 0; color: #929ba4; font-size: 0.7rem; line-height: 1.4; }
.availability-note { color: #c3cad1; }
@media (max-width: 767px) {
  .hero-availability-band > .wrap { width: min(calc(100% - 2rem), 42rem); padding-block: 0.8rem; grid-template-columns: 1fr; gap: 0.25rem; }
  .hero-availability { gap: 0.1rem 0.35rem; }
  .hero-availability a { min-height: 2rem; padding-inline: 0.25rem; }
  .availability-meta { justify-content: flex-start; }
}
.download-device-label { display: none; }
.is-current-platform .download-device-label { display: inline-flex; align-items: center; margin-bottom: 0.42rem; color: var(--accent); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.hero-availability li.is-current-platform a { border-color: rgb(255 138 53 / 48%); background: rgb(255 138 53 / 7%); }
.downloads-section { background: linear-gradient(155deg, #171c22, #13171c 75%); }
.downloads-section { color: #eff1f3; }
.downloads-section .lede h2 { color: #f4f5f6; }
.downloads-section .lede p { color: #bac1c8; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 2rem; border-top: 1px solid rgb(255 255 255 / 16%); }
.download-platform { position: relative; min-width: 0; padding: 1.2rem 1.25rem 1.3rem 0; border-bottom: 1px solid rgb(255 255 255 / 11%); }
.download-platform.is-current-platform { border-color: rgb(255 138 53 / 45%); }
.download-platform-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 0.8rem; }
.download-platform-head h3 { margin: 0; font-size: 1.1rem; }
.download-platform-head > span { color: #ffb27f; font-size: 0.76rem; font-weight: 600; }
.download-unavailable { margin: 0.75rem 0 0; color: #bac1c8; font-size: 0.9rem; }
.download-file { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-top: 0.8rem; padding: 0.85rem 0.95rem; border: 1px solid rgb(255 107 0 / 38%); border-radius: 10px; background: rgb(255 107 0 / 10%); color: #fff; text-decoration: none; transition: border-color 140ms var(--ease), background-color 140ms var(--ease), transform 140ms var(--ease); }
.download-file:hover { transform: translateY(-1px); border-color: #ff9952; background: rgb(255 107 0 / 15%); }
.download-file:focus-visible { outline: 2px solid #8bc6ff; outline-offset: 3px; }
.download-file > span { color: #ffb27f; font-size: 0.9rem; font-weight: 650; }
.download-file small { color: #c1c7cd; font: 0.7rem/1.4 var(--mono); overflow-wrap: anywhere; }
.download-fallback { margin: 1.25rem 0 0; }
.downloads-section .download-fallback .button.ghost { border-color: rgb(255 255 255 / 18%); background: rgb(255 255 255 / 4%); color: #eff1f3; }
.downloads-section .download-fallback .button.ghost:hover { background: rgb(255 255 255 / 8%); }
.download-cta.is-direct-download { border-color: var(--stage-accent, #ff6b00); background: var(--stage-accent, #ff6b00); color: #1a0e07; }
.download-cta.is-direct-download:hover { border-color: #ff9952; background: #ff9952; }
@media (max-width: 767px) {
  .download-grid { grid-template-columns: 1fr; gap: 0; }
  .download-platform { padding: 1rem 0; }
  .download-platform-head { justify-content: flex-start; }
  .download-file { align-items: flex-start; flex-direction: column; }
  .download-fallback .button { width: 100%; }
}

/* Demo page on phones: the demo document and the panel come first; display options follow below them. */
@media (max-width: 680px) {
  .demo-page .appdemo { display: flex; flex-direction: column; }
  .demo-page .ad-controls { display: contents; }
  .demo-page .ad-controls .tabs { order: 1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 0.75rem; }
  .demo-page .ad-controls .tab { min-height: 2.75rem; padding: 0 0.5rem; }
  .demo-page .ad-doc-btns { flex-wrap: wrap; }
  .demo-page .ad-stage { order: 2; }
  .demo-page .ad-toggles { order: 3; margin-top: 1.25rem; }
  .demo-page .ad-language-tools { order: 4; margin: 1rem 0 0; }
  .demo-page .ad-legend, .demo-page .appdemo > noscript { order: 5; }
  .demo-page .demo-intro { display: none; }
}

/* Pages with a dark top start flush: no light strip above the graphite header. */
body.dark-top { margin-top: 0; }