/* ==========================================================================
   AudioTranscriptor landing · style.css
   Mobile-first: base rules target phones, @media (min-width: …) adds desktop.
   Sections, in page order:
     1. Fonts (self-hosted, no Google requests)
     2. Design tokens (dark default, light theme)
     3. Base and browser surfaces
     4. Layout helpers
     5. Header, desktop nav, mobile menu (hamburger)
     6. Hero and download button
     7. Hero app window (animated: drop, transcribe, correct)
     8. Feature panels and stages (shared)
     9. Scenes A-D (feature animations)
    10. Specs strip
    11. "Who it is for" tabs
    12. Limits and FAQ
    13. Download, first launch
    14. Footer
    15. Privacy page
    16. Reduced motion
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}


/* 2. Design tokens ---------------------------------------------------------
   One blue hue (the download button) drives every blue on the page.
   Red is reserved for the headline's correction mark; green for "stays here". */
:root {
  --paper: #060B16;
  --panel: #0D1421;
  --panel-2: #121A2B;
  --win: #0A101D;
  --line: rgba(116, 161, 255, .14);
  --line-2: rgba(116, 161, 255, .28);
  --win-line: rgba(234, 239, 247, .10);
  --ink: #EAEFF7;
  --ink-2: #A6B1C8;
  --pencil: #84A9F7;
  --hl: #1B2E58;
  --hl-edge: #74A1FF;
  --blue: #3167ED;
  --blue-ink: #FFFFFF;
  --blue-text: #87AFFF;
  --blue-soft: rgba(49, 103, 237, .16);
  --glow: rgba(64, 156, 255, .50);
  --glow-card: rgba(64, 156, 255, .34);
  --red: #FF6B5E;
  --ok: #5FD39A;
  --nav-bg: rgba(6, 11, 22, .78);
  --logo-a: #87AFFF;
  --logo-b: #3167ED;
  --shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-panel: 22px;
  --radius-stage: 18px;
  --gutter: 16px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --paper: #FFFFFF;
  --panel: #F4F7FC;
  --panel-2: #EBF0FA;
  --win: #FFFFFF;
  --line: rgba(21, 77, 233, .14);
  --line-2: rgba(21, 77, 233, .28);
  --win-line: rgba(17, 20, 27, .12);
  --ink: #121824;
  --ink-2: #4E586C;
  --pencil: #3B63BE;
  --hl: #DAE8FF;
  --hl-edge: #154DE9;
  --blue: #154DE9;
  --blue-text: #154DE9;
  --blue-soft: rgba(21, 77, 233, .10);
  --glow: rgba(40, 140, 255, .30);
  --glow-card: rgba(40, 140, 255, .36);
  --red: #C42A1F;
  --ok: #1F8F55;
  --nav-bg: rgba(255, 255, 255, .82);
  --logo-a: #3B7BFF;
  --logo-b: #0A2FB8;
  --shadow: 0 40px 80px -40px rgba(17, 30, 60, .35);
  color-scheme: light;
}


/* 3. Base and browser surfaces ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: var(--blue-text); }
img, svg { display: block; }
button { font: inherit; color: inherit; }
::selection { background: var(--hl); color: var(--ink); }
:focus-visible { outline: 2px solid var(--hl-edge); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--blue); color: var(--blue-ink);
}
.skip-link:focus { top: 12px; }


/* 4. Layout helpers ------------------------------------------------------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: 72px; }
.section-title { font-size: clamp(32px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.04em; max-width: 18ch; }
.section-lead { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 761px) {
  :root { --gutter: 32px; }
  .section { padding-top: 128px; }
}


/* 5. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
.site-header__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.nav-links, .nav-tools { display: none; }
.nav-links a { text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }

.gh {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600;
}
.gh:hover { border-color: var(--line-2); }
.gh__count {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-text); font-size: 12px;
}
.gh__count[hidden] { display: none; }
.gh--nocount { padding-right: 14px; }
.pill-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12px; text-decoration: none; color: var(--ink-2);
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover, .pill-link:hover { color: var(--ink); border-color: var(--line-2); }

/* Hamburger: three bars that morph into an X */
.burger {
  position: relative; width: 44px; height: 44px; margin-left: auto;
  border: 0; border-radius: 12px; background: var(--panel); cursor: pointer;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .35s cubic-bezier(.65, 0, .35, 1), opacity .2s ease, top .35s cubic-bezier(.65, 0, .35, 1);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Mobile menu panel: slides open under the bar */
.mmenu {
  flex-basis: 100%; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-6px);
  transition: max-height .4s cubic-bezier(.65, 0, .35, 1), opacity .25s ease, transform .35s ease;
  visibility: hidden;
}
.menu-open .mmenu { max-height: 560px; opacity: 1; transform: none; visibility: visible; }
.mmenu__nav a {
  display: flex; align-items: center; min-height: 52px; font-size: 22px; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.mmenu__tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 0 12px; }
.mm-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--panel); font-size: 14px; text-decoration: none; cursor: pointer;
}

@media (min-width: 761px) {
  .site-header__inner { gap: 24px; padding-top: 14px; padding-bottom: 14px; }
  .nav-links { display: flex; gap: 24px; font-size: 15px; margin-left: auto; }
  .nav-tools { display: flex; align-items: center; gap: 10px; }
  .burger, .mmenu { display: none; }
}


/* 6. Hero ------------------------------------------------------------------ */
.hero { padding-top: 48px; padding-bottom: 24px; text-align: center; }
.hero__title { margin: 0 auto; max-width: 1060px; font-size: clamp(38px, 5.2vw, 76px); line-height: 1.05; letter-spacing: -0.04em; }
.hero__strike {
  position: relative; display: inline-block; margin-right: .12em;
  color: var(--ink-2); font-weight: 500; font-size: .6em; letter-spacing: -0.02em; vertical-align: .2em;
}
.strike {
  position: absolute; left: -4%; right: -4%; top: 54%; height: 4px; border-radius: 2px;
  background: var(--red); transform-origin: left center; transform: scaleX(1);
}
.strike--draw { animation: draw .7s cubic-bezier(.16, 1, .3, 1) .5s both; }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__sub { margin: 24px auto 0; max-width: 58ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.hero__actions { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.cta {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 16px 28px;
  border-radius: 14px; background: var(--blue); color: var(--blue-ink); text-decoration: none;
  font-weight: 600; font-size: 18px; box-shadow: 0 14px 30px -14px rgba(49, 103, 237, .6);
}
.cta:hover { filter: brightness(1.1); color: var(--blue-ink); }
.cta svg { fill: currentColor; }
.cta svg[fill="none"] { fill: none; stroke: currentColor; }
.cta__icon { display: none; }
.cta__icon.is-active { display: block; }
.cta__note { font-size: 14px; color: var(--ink-2); }
.os-links { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.osicon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2);
}
.osicon:hover { color: var(--ink); border-color: var(--line-2); }
.osicon svg { fill: currentColor; }

@media (min-width: 761px) {
  .hero { padding-top: 80px; padding-bottom: 40px; }
  .hero__sub { font-size: 20px; margin-top: 28px; }
  .hero__actions { margin-top: 36px; }
}


/* 7. Hero app window --------------------------------------------------------
   Three layers on a 16 s loop: drop the file, transcribe, correct while listening.
   Labels match the real app. With reduced motion the last layer shows still. */
.showcase { position: relative; max-width: 1080px; margin: 0 auto; padding-top: 16px; }
.showcase__glow {
  position: absolute; left: 50%; top: -320px; width: 900px; height: 900px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle closest-side, var(--glow), transparent); pointer-events: none;
}
.window { position: relative; background: var(--win); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.window__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--win-line); }
.window__title { font-weight: 600; font-size: 15px; }
.window__foot { padding: 10px 16px; border-top: 1px solid var(--win-line); text-align: center; font-size: 12px; color: var(--ink-2); }
.window__body { position: relative; height: 470px; }
.layer { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ui-pill {
  display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--panel-2);
}
.ui-pill--soft { background: var(--blue-soft); color: var(--blue-text); }
.ui-pill--primary { background: var(--blue); color: var(--blue-ink); }
.ui-pill--plain { background: var(--win); font-weight: 500; color: var(--ink-2); }
.window__bar .ui-pill + .ui-pill { display: none; }
.window__bar .ui-pill:first-of-type { margin-left: auto; }
.desk-only { display: none; }

/* layer 1: drop zone */
.dz {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 2px dashed var(--line-2); border-radius: 16px; text-align: center; padding: 16px;
}
.dz__title { font-weight: 600; font-size: 19px; }
.drag {
  position: absolute; left: 50%; top: 50%; width: 240px; margin: -28px 0 0 -120px;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--panel-2); box-shadow: var(--shadow); font-size: 13px; font-weight: 600;
}
.drag__cursor { position: absolute; right: -10px; bottom: -16px; }

/* layer 2: file card + status */
.card-ui { background: var(--panel-2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-ui__row { display: flex; align-items: center; gap: 12px; }
.card-ui__label { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); flex: none; }
.stack { display: inline-grid; }
.stack > * { grid-area: 1 / 1; }
.pbar-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pbar { height: 100%; width: 100%; border-radius: 4px; background: var(--blue); }

/* layer 3: editor */
.editor-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.player { display: flex; align-items: center; gap: 10px; }
.player__track { flex: 1; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.player__track::after { content: ""; position: absolute; inset: 0 71% 0 0; background: var(--hl-edge); border-radius: 3px; }
.editor { flex: 1; min-height: 0; background: var(--panel-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.editor__pane-head { display: flex; font-size: 12px; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.editor__lines { position: relative; padding: 0 12px; background: var(--win); border-radius: 8px; font-size: 14px; line-height: 38px; }
.editor__lines > div { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor__lines .hl { position: absolute; left: 0; right: 0; top: 0; height: 38px; overflow: visible; background: var(--hl); border-left: 3px solid var(--hl-edge); }
.caret { display: inline-block; width: 2px; height: 18px; margin-left: 1px; vertical-align: -3px; background: var(--ink); }
.caption { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-2); }

@media (min-width: 761px) {
  .window__bar { padding: 14px 20px; }
  .window__bar .ui-pill + .ui-pill { display: inline-flex; }
  .window__body { height: 420px; }
  .layer { padding: 20px 24px; }
  .drag { width: 300px; margin-left: -150px; font-size: 15px; padding: 14px 16px; }
  .dz__title { font-size: 20px; }
  .desk-only { display: inline-flex; }
  div.desk-only { display: block; }
  .editor__lines { font-size: 16px; }
}

/* loop timing (16 s) */
.s-drop { animation: sdrop 16s ease infinite; opacity: 0; }
@keyframes sdrop { 0%, 19% { opacity: 1; } 22%, 97% { opacity: 0; } 100% { opacity: 1; } }
.s-prog { animation: sprog 16s ease infinite; opacity: 0; }
@keyframes sprog { 0%, 20% { opacity: 0; } 23%, 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
.s-edit { animation: sedit 16s ease infinite; opacity: 1; }
@keyframes sedit { 0%, 45% { opacity: 0; } 48%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
.drag { animation: drag 16s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes drag {
  0%, 2% { transform: translate(260px, -150px) rotate(5deg); opacity: 0; }
  5% { opacity: 1; }
  14% { transform: none; opacity: 1; }
  17% { transform: scale(.94); opacity: 1; }
  20%, 100% { transform: scale(.7); opacity: 0; }
}
.dz { animation: dz 16s ease infinite; }
@keyframes dz {
  0%, 10% { background: transparent; border-color: var(--line-2); }
  13%, 19% { background: var(--blue-soft); border-color: var(--blue-text); }
  22%, 100% { background: transparent; border-color: var(--line-2); }
}
.t-btn { animation: tbtn 16s ease-out infinite; }
@keyframes tbtn { 0%, 23% { transform: none; } 25%, 26% { transform: scale(.94); } 28%, 100% { transform: none; } }
.pbar { animation: pbar 16s linear infinite; }
@keyframes pbar { 0%, 26% { width: 0; } 43%, 100% { width: 100%; } }
.st1, .st2, .st3 { opacity: 0; }
.st4 { opacity: 1; }
.st1 { animation: st1 16s steps(1) infinite; }
.st2 { animation: st2 16s steps(1) infinite; }
.st3 { animation: st3 16s steps(1) infinite; }
.st4 { animation: st4 16s steps(1) infinite; }
@keyframes st1 { 0%, 25% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes st2 { 0%, 30% { opacity: 0; } 31%, 36% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes st3 { 0%, 36% { opacity: 0; } 37%, 42% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes st4 { 0%, 42% { opacity: 0; } 43%, 100% { opacity: 1; } }
.hl-run { animation: hl 16s cubic-bezier(.65, 0, .35, 1) infinite; transform: translateY(38px); }
@keyframes hl {
  0%, 52% { transform: translateY(0); }
  55%, 72% { transform: translateY(38px); }
  75%, 80% { transform: translateY(76px); }
  83%, 87% { transform: translateY(114px); }
  90%, 93% { transform: translateY(152px); }
  96%, 100% { transform: translateY(190px); }
}
.w-old { animation: wold 16s steps(1) infinite; opacity: 0; border-radius: 3px; }
@keyframes wold {
  0%, 57% { opacity: 1; background: transparent; }
  58%, 63% { opacity: 1; background: var(--hl-edge); color: var(--win); }
  64%, 100% { opacity: 0; }
}
.w-new { animation: wnew 16s steps(1) infinite; opacity: 1; }
@keyframes wnew { 0%, 63% { opacity: 0; } 64%, 100% { opacity: 1; } }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }


/* 8. Feature panels and stages ----------------------------------------- */
.features { display: flex; flex-direction: column; gap: 20px; }
.panel {
  display: flex; flex-direction: column; gap: 24px; padding: 16px;
  background: var(--panel); border-radius: var(--radius-panel); overflow: hidden;
}
.panel__text { padding: 8px 8px 16px; }
.panel__title { font-size: 30px; line-height: 1.05; letter-spacing: -0.035em; }
.panel__body { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.tile {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  margin-bottom: 20px; border-radius: 14px; background: var(--blue-soft); color: var(--blue-text);
}
.stage { position: relative; padding: 16px; background: var(--panel-2); border-radius: var(--radius-stage); overflow: hidden; }
.stage > * { position: relative; }
.stage > .glow {
  position: absolute; width: 640px; height: 640px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, var(--glow-card), transparent);
}
.g-tl { left: -320px; top: -320px; }
.g-tr { right: -320px; top: -320px; }
.g-bl { left: -320px; bottom: -320px; }
.g-br { right: -320px; bottom: -320px; }
.mock { background: var(--win); border-radius: 14px; box-shadow: var(--shadow); }
.shortcuts { list-style: none; margin: 22px 0 0; padding: 0; font-family: var(--mono); font-size: 12px; line-height: 2.1; color: var(--ink-2); }
.shortcuts b { font-weight: 500; color: var(--blue-text); margin-right: 8px; }
.note-line { margin-top: 22px; display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.55; }
.note-line__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
  border-radius: 10px; background: var(--blue-soft); color: var(--blue-text);
}
.formats { margin-top: 22px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

@media (min-width: 761px) {
  .features { gap: 28px; }
  .panel { flex-direction: row; align-items: center; gap: 48px; padding: 28px 56px 28px 28px; border-radius: 28px; }
  .panel--rev { flex-direction: row-reverse; padding: 28px 28px 28px 56px; }
  .panel > .stage { flex: 1 1 560px; min-width: 0; padding: 28px; min-height: 380px; border-radius: 20px; }
  .panel > .panel__text { flex: 1 1 340px; min-width: 0; padding: 0; }
  .panel__title { font-size: clamp(30px, 3.2vw, 44px); }
  .panel__body { font-size: 18px; }
}


/* 9. Scenes A-D ------------------------------------------------------------ */
.ruled { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--line) 39px, var(--line) 40px); }
.lines40 { position: relative; padding: 0 14px; font-size: 13px; line-height: 40px; }
.lines40 > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lines40 .band { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: var(--hl); border-left: 3px solid var(--hl-edge); }
.key {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: 9px; background: var(--win); font-size: 13px; color: var(--ink); box-shadow: 0 3px 0 var(--win-line);
}
.keys { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.mini-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-2); }

/* A: play from cursor */
.a-band { animation: aband 8s cubic-bezier(.65, 0, .35, 1) infinite; transform: translateY(120px); }
@keyframes aband { 0%, 30% { transform: translateY(0); } 36%, 100% { transform: translateY(120px); } }
.a-key { animation: akey 8s ease-out infinite; }
@keyframes akey {
  0%, 26% { transform: none; box-shadow: 0 3px 0 var(--win-line); }
  29%, 31% { transform: translateY(3px); box-shadow: 0 0 0 var(--win-line); }
  34%, 100% { transform: none; box-shadow: 0 3px 0 var(--win-line); }
}
.a-caret { display: inline-block; width: 2px; height: 20px; margin: 0 1px; vertical-align: -4px; background: var(--ink); animation: blink 1s steps(1) infinite; }

/* B: SRT follows the edited text */
.scene-b { display: grid; gap: 14px; }
.scene-b .mock { padding: 14px; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 12px; }
.cue { padding: 10px 14px; }
.cue__time { font-family: var(--mono); font-size: 11px; color: var(--pencil); }
.cue__text { position: relative; min-height: 20px; margin-top: 4px; font-size: 13px; }
.b-gone { animation: bgone 9s ease infinite; max-height: 24px; overflow: hidden; color: var(--ink-2); }
@keyframes bgone { 0%, 25% { max-height: 24px; opacity: 1; } 30%, 94% { max-height: 0; opacity: 0; } 100% { max-height: 24px; opacity: 1; } }
.b-sel { animation: bsel 9s steps(1) infinite; border-radius: 3px; }
@keyframes bsel { 0%, 15% { background: transparent; color: inherit; } 16%, 25% { background: var(--hl-edge); color: var(--win); } 26%, 100% { background: transparent; color: inherit; } }
.b-old { position: absolute; inset: 0; animation: bold 9s ease infinite; opacity: 0; }
@keyframes bold { 0%, 34% { opacity: 1; } 40%, 94% { opacity: 0; } 100% { opacity: 1; } }
.b-empty { font-family: var(--mono); font-size: 12px; font-style: italic; color: var(--ink-2); animation: bempty 9s ease infinite; opacity: 1; }
@keyframes bempty { 0%, 36% { opacity: 0; } 42%, 94% { opacity: 1; } 100% { opacity: 0; } }
.b-flash { animation: bflash 9s ease infinite; }
@keyframes bflash { 0%, 34% { box-shadow: var(--shadow); } 40%, 60% { box-shadow: 0 0 0 2px var(--blue-text); } 70%, 100% { box-shadow: var(--shadow); } }

/* C: what leaves the computer */
.scene-c { display: grid; gap: 14px; }
.scene-c .mock { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.row-ui { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.row-ui__tag { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: right; }
.row-ui__tag--ok { color: var(--ok); }
.c-links { display: none; }
.c-dest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-dest > div { background: var(--win); border-radius: 14px; padding: 12px 14px; }
.c-dest b { display: block; font-weight: 600; font-size: 15px; }
.c-dest span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.c-dash1 { stroke-dasharray: 6 6; animation: dash 1.6s linear infinite; }
.c-dash2 { stroke-dasharray: 6 6; animation: dash 1.6s linear infinite, c2 10s steps(1) infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
@keyframes c2 { 0%, 45% { opacity: .18; } 46%, 92% { opacity: 1; } 93%, 100% { opacity: .18; } }
.c-btn { animation: cbtn 10s ease-out infinite; }
@keyframes cbtn { 0%, 40% { transform: none; } 43%, 45% { transform: scale(.94); } 48%, 100% { transform: none; } }

/* D: translation with confirmation */
.scene-d__bar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.scene-d__cols { position: relative; display: grid; gap: 12px; }
.scene-d__cols .mock { padding: 14px 16px; font-size: 14px; line-height: 1.55; display: flex; flex-direction: column; gap: 8px; }
.dialog {
  position: absolute; left: 50%; top: 50%; width: min(300px, 92%); transform: translate(-50%, -50%);
  background: var(--win); border-radius: 16px; padding: 18px; box-shadow: var(--shadow);
}
.dialog__title { font-weight: 600; font-size: 15px; }
.dialog__body { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.d-btn { animation: dbtn 10s ease-out infinite; }
@keyframes dbtn { 0%, 22% { transform: none; } 25%, 27% { transform: scale(.96); } 30%, 100% { transform: none; } }
.d-dlg { animation: ddlg 10s cubic-bezier(.16, 1, .3, 1) infinite; opacity: 0; }
@keyframes ddlg {
  0%, 4% { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  9%, 26% { opacity: 1; transform: translate(-50%, -50%); }
  31%, 100% { opacity: 0; transform: translate(-50%, calc(-50% - 6px)); }
}
.d-t1 { animation: dt1 10s ease-out infinite; }
.d-t2 { animation: dt2 10s ease-out infinite; }
.d-t3 { animation: dt3 10s ease-out infinite; }
.d-t4 { animation: dt4 10s ease-out infinite; }
@keyframes dt1 { 0%, 33% { opacity: 0; } 37%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dt2 { 0%, 41% { opacity: 0; } 45%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dt3 { 0%, 49% { opacity: 0; } 53%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dt4 { 0%, 57% { opacity: 0; } 61%, 96% { opacity: 1; } 100% { opacity: 0; } }

@media (min-width: 761px) {
  .lines40 { font-size: 15px; padding: 0 18px; }
  .scene-b { grid-template-columns: 1fr 1fr; gap: 16px; }
  .scene-c { grid-template-columns: minmax(0, 1.1fr) 90px minmax(0, 1fr); align-items: center; gap: 0; }
  .c-links { display: block; }
  .c-dest { grid-template-columns: 1fr; gap: 60px; }
  .scene-d__cols { grid-template-columns: 1fr 1fr; }
}


/* 10. Specs strip ---------------------------------------------------------- */
.specs { display: grid; grid-template-columns: 1fr; padding: 8px 0; background: var(--panel); border-radius: var(--radius-panel); }
.specs__item { padding: 18px 20px; }
.specs__title { font-weight: 600; font-size: 17px; }
.specs__title::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 2px;
  border-radius: 2px; background: var(--blue);
}
.specs__text { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
@media (min-width: 761px) {
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 28px; }
  .specs__item { padding: 24px 32px; }
}


/* 11. Who it is for: tabs ---------------------------------------------- */
.tabs {
  display: flex; gap: 8px; margin: 28px calc(-1 * var(--gutter)) 16px; padding: 0 var(--gutter) 4px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 46px; padding: 12px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--ink-2); font-size: 16px; font-weight: 600;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--blue); color: var(--blue-ink); }
.role-panel[hidden] { display: none; }
.role-panel .panel__title { font-size: 30px; }
.export-grid { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 8px; margin-top: 16px; font-size: 12px; align-items: center; }
.doc { padding: 22px 24px; max-width: 420px; margin: 0 auto; width: 100%; }
.doc__badge { font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 6px; background: var(--blue-soft); color: var(--blue-text); }
.doc__lines { margin-top: 12px; font-size: 13px; line-height: 1.75; }
.sel { background: var(--hl-edge); color: var(--win); border-radius: 3px; padding: 2px 0; }
.scene-note { margin-top: 14px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
@media (min-width: 761px) {
  .tabs { flex-wrap: wrap; margin: 32px 0 20px; padding: 0; overflow: visible; }
  .role-panel .panel__title { font-size: 32px; }
  .role-panel > .stage { min-height: 340px; display: flex; flex-direction: column; justify-content: center; }
}


/* 12. Limits and FAQ ------------------------------------------------------ */
.split { display: flex; flex-direction: column; gap: 48px; }
.split__col { min-width: 0; }
.split__title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -0.035em; }
.limits { list-style: none; margin: 24px 0 0; padding: 0; }
.limits li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; }
.limits li:last-child { border-bottom: 1px solid var(--line); }
.limits span { color: var(--ink-2); }
.faq { margin-top: 28px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0;
  font-size: 18px; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__plus { font-size: 24px; font-weight: 300; color: var(--blue-text); transition: transform .2s; }
.faq details[open] .faq__plus { transform: rotate(45deg); }
.faq p { padding-bottom: 18px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 761px) {
  .split { flex-direction: row; gap: 64px; }
  .split__col { flex: 1 1 440px; }
}


/* 13. Download and first launch ------------------------------------------ */
.download { margin-top: 72px; }
.dl-panel { padding: 48px 20px 32px; text-align: center; background: var(--panel); border-radius: var(--radius-panel); }
.dl-panel__title { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -0.045em; }
.dl-panel__lead { margin: 16px auto 28px; max-width: 52ch; font-size: 18px; color: var(--ink-2); }
.dl-list { list-style: none; margin: 40px auto 0; padding: 0; max-width: 960px; text-align: left; }
.dl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dl-item__file { grid-column: 1 / -1; font-family: var(--mono); font-size: 13px; word-break: break-all; }
.dl-item__who { grid-column: 1; font-size: 14px; color: var(--ink-2); }
.dl-item__size { grid-column: 1; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.dl-item__sum { grid-column: 2; grid-row: 2 / span 2; align-self: center; font-size: 14px; }
.first-launch { margin: 0; max-width: 960px; text-align: left; display: grid; gap: 24px; }
.first-launch h3 { font-size: 22px; }
.first-launch ol { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); line-height: 1.7; }
.first-launch code { font-family: var(--mono); font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--panel-2); color: var(--ink); }
@media (min-width: 761px) {
  .download { margin-top: 128px; }
  .dl-panel { padding: 80px 48px 56px; border-radius: 28px; }
  .dl-item { grid-template-columns: 2fr 2fr 1fr auto; align-items: center; padding: 16px 0; }
  .dl-item__file, .dl-item__who, .dl-item__size, .dl-item__sum { grid-column: auto; grid-row: auto; }
  .first-launch { grid-template-columns: 1fr 1fr 1fr; }
}


/* 14. Footer --------------------------------------------------------------- */
.site-footer { padding-top: 40px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; font-size: 13px; color: var(--ink-2); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
@media (min-width: 761px) {
  .site-footer { flex-direction: row; align-items: center; padding-top: 48px; padding-bottom: 40px; }
  .site-footer__links { margin-left: auto; }
}


/* 15. Privacy page --------------------------------------------------------- */
.prose { max-width: 72ch; padding-top: 48px; padding-bottom: 64px; }
.prose h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; }
.prose h2 { margin-top: 40px; font-size: 24px; }
.prose p, .prose li { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose .todo { padding: 2px 6px; border-radius: 6px; background: var(--blue-soft); color: var(--blue-text); font-family: var(--mono); font-size: 13px; }


/* 16. Reduced motion: show every scene in its final, readable state ------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 17. Overflow guard ----------------------------------------------------------
   Decorative glows and the drag animation extend past their boxes on purpose:
   clip them so phones never get a horizontal scrollbar. */
html, body { overflow-x: clip; }
.window__body { overflow: clip; }

/* 18. Install guide (collapsible) ---------------------------------------------
   Native <details>: closed by default, keyboard accessible, no JS needed. */
.guide { margin: 40px auto 0; max-width: 960px; text-align: left; background: var(--panel-2); border-radius: 20px; overflow: hidden; transition: box-shadow .3s ease; }
.guide[open] { box-shadow: 0 0 0 1px var(--glow-card), 0 20px 60px -30px var(--glow); }
.guide__summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; }
.guide__summary::-webkit-details-marker { display: none; }
.guide__summary:hover .guide__chev { background: var(--blue-soft); }
.guide__summary:focus-visible { outline: 2px solid var(--blue-text); outline-offset: -2px; border-radius: 20px; }
.guide__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-text); }
.guide__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guide__title { font-weight: 600; font-size: 18px; color: var(--ink); }
.guide__sub { font-size: 14px; color: var(--ink-2); }
.guide__chev { flex: none; margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--blue-text); transition: transform .35s cubic-bezier(.65,0,.35,1), background .2s ease; }
.guide[open] .guide__chev { transform: rotate(180deg); }
.guide__body { padding: 4px 20px 24px; }
.guide[open] .guide__body { animation: guide-in .4s cubic-bezier(.2,.7,.2,1); }
@keyframes guide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.guide__step { padding: 20px; border-radius: 14px; background: var(--win); }
.guide__os { display: inline-flex; color: var(--blue-text); margin-bottom: 8px; }
.guide__step h3 { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .guide__chev, .guide[open] .guide__body { transition: none; animation: none; } }
.guide__os svg:not([stroke]) { fill: currentColor; }
@media (max-width: 760px) { .guide__summary { padding: 16px; gap: 12px; } .guide__body { padding: 0 12px 12px; } .guide__step { padding: 16px; } }

/* 19. Cookie banner -------------------------------------------------------------
   Bottom card, never blocks the page. Markup is created by main.js section 8. */
.consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 18px;
  background: var(--win); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45), 0 0 0 1px var(--win-line); }
.consent[hidden] { display: none; }
.consent strong { font-size: 16px; font-weight: 600; }
.consent p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.consent a { color: var(--blue-text); }
.consent__actions { display: flex; gap: 10px; }
.consent__btn { flex: 1; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; background: var(--panel-2); color: var(--ink); }
.consent__btn--primary { background: var(--blue, #2F6BFF); color: #fff; }
.consent__btn:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
@media (min-width: 761px) { .consent { flex-direction: row; align-items: center; left: auto; right: 24px; bottom: 24px; }
  .consent__actions { flex: none; } .consent__btn { flex: none; } }

/* 20. Hero facts line (under the download note) */
.hero__facts { margin: 14px 0 0; font-size: 14px; font-weight: 500; color: var(--ink-2); }

/* 21. Problem scene ("why local") ----------------------------------------------
   Two rows: the online service sends the file away (moving dot), the app keeps it. */
.scene-p { display: grid; gap: 14px; }
.p-row { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.p-flow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-file, .p-end { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); font-size: 13px; font-weight: 600; }
.p-file svg, .p-end svg { color: var(--blue-text); }
.p-end--out svg { color: var(--pencil); }
.p-track { position: relative; flex: 1; min-width: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--pencil) 0 6px, transparent 6px 12px); opacity: .7; }
.p-track--local { background: none; }
.p-dot { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--pencil); animation: p-send 2.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes p-send { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.p-cap { font-size: 13px; color: var(--ink-2); }
.p-cap--ok { color: var(--ok); font-weight: 600; }
.p-row:last-child .p-file { box-shadow: 0 0 0 2px var(--blue-soft); }

/* 22. How it works: three step cards (same card + corner glow language) ------- */
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
.step { position: relative; overflow: hidden; padding: 28px; border-radius: var(--radius-panel); background: var(--panel); }
.step > * { position: relative; }
.step > .glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, var(--glow-card), transparent); }
.step > .g-tl { left: -210px; top: -210px; }
.step > .g-tr { right: -210px; top: -210px; }
.step > .g-br { right: -210px; bottom: -210px; }
.step__num { font-size: 20px; font-weight: 600; }
.step__title { font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; }
.step__body { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.steps__note { margin-top: 20px; font-size: 14px; color: var(--ink-2); max-width: 70ch; }
@media (min-width: 761px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .step { border-radius: 28px; padding: 32px; }
}

/* 23. Technical details: two-column variant of the specs grid ----------------- */
.specs--2 { margin-top: 32px; }
@media (min-width: 761px) { .specs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) { .p-dot { animation: none; left: 50%; } }
@media (max-width: 760px) {
  .p-row { padding: 14px 12px; }
  .p-flow { gap: 6px; }
  .p-file, .p-end { padding: 6px 8px; gap: 6px; font-size: 12px; }
  .p-file svg, .p-end svg { width: 15px; height: 15px; }
}

/* 24. Hero headline: one phrase per line + animated gradient on the promise --- */
.hero__line { display: block; }
.hero__grad {
  background: linear-gradient(90deg, var(--ink) 0%, var(--blue) 35%, var(--blue-text) 50%, var(--blue) 65%, var(--ink) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: hero-grad 7s ease-in-out infinite alternate;
}
@keyframes hero-grad { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (max-width: 760px) { .hero__title .hero__line { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .hero__grad { animation: none; background-position: 50% 0; } }