/* PinnaPetta — pinnapetta.com
   Product-led presentation: porcelain, graphite, restrained rose, and native materials. */

:root {
  --paper: #fcfaff;
  --paper-2: #f1ecfa;
  --paper-3: #e4dbf4;
  --ink: #28213f;
  --ink-2: #615570;
  --ink-3: #756984;
  --line: rgb(54 32 83 / 0.11);
  --line-strong: rgb(54 32 83 / 0.22);
  --glass: rgb(255 255 255 / 0.62);
  --glass-strong: rgb(255 255 255 / 0.82);
  --card: #ffffff;
  --accent: #7446b9;
  --accent-ink: #ffffff;
  --accent-soft: rgb(116 70 185 / 0.09);
  --thumb: #ffffff;
  --p1: #ffa47a;
  --p2: #ff5e73;
  --p3: #e2409b;
  --p4: #9b4dea;
  --p5: #5b6cf2;
  --dusk: var(--accent);
  --shadow-lg: 0 24px 60px -32px rgb(20 24 25 / 0.28), 0 1px 3px rgb(20 24 25 / 0.06);
  --shadow-md: 0 10px 24px -16px rgb(20 24 25 / 0.22), 0 1px 2px rgb(20 24 25 / 0.05);
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 16px;
  --r-sm: 11px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171225;
    --paper-2: #201831;
    --paper-3: #322546;
    --ink: #f7f0ff;
    --ink-2: #c8bbdb;
    --ink-3: #ad9bbf;
    --line: rgb(239 223 255 / 0.12);
    --line-strong: rgb(239 223 255 / 0.25);
    --glass: rgb(35 24 52 / 0.78);
    --glass-strong: rgb(35 24 52 / 0.92);
    --card: #281e3b;
    --accent: #d0b0ff;
    --accent-soft: rgb(208 176 255 / 0.12);
    --thumb: #514263;
    --shadow-lg: 0 40px 90px -40px rgb(0 0 0 / 0.8), 0 2px 8px rgb(0 0 0 / 0.3);
    --shadow-md: 0 18px 40px -20px rgb(0 0 0 / 0.7), 0 1px 3px rgb(0 0 0 / 0.3);
  }
}

@media (prefers-contrast: more) {
  :root { --line: rgb(27 20 48 / 0.4); --ink-3: var(--ink-2); --glass: var(--card); --glass-strong: var(--card); }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font: 1.0625rem/1.55 var(--font);
  letter-spacing: -0.003em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 3px; border-radius: 6px; }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.55em; padding: 0 0.35em;
  margin: 0 0.08em; font: 600 0.82em/1 var(--font-round); color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px;
  vertical-align: 0.08em;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; color: var(--ink); }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.028em; font-weight: 700; }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.012em; font-weight: 650; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--card); border-radius: 8px; }
.skip:focus { left: 8px; }
.sprite { position: absolute; }

.dusk-text { color: var(--ink-2); }
.eyebrow {
  font: 600 0.82rem/1.2 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--ink-2); letter-spacing: -0.008em; }

/* ---------- Buttons ---------- */

.button {
  --bg: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35em;
  padding: 0.72em 1.35em; border-radius: 999px; border: 0;
  font: 600 1rem/1 var(--font); letter-spacing: -0.005em; color: var(--accent-ink);
  background: var(--bg);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25);
  cursor: pointer; text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), filter 160ms;
  -webkit-tap-highlight-color: transparent;
}
.button:hover { text-decoration: none; filter: brightness(1.06); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.button:active { transform: scale(0.97); transition-duration: 80ms; }
.button--small { padding: 0.55em 1em; font-size: 0.88rem; }
.button--large { padding: 0.9em 1.6em; font-size: 1.08rem; }
.button--block { display: flex; width: 100%; }
.button--ghost { --bg: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.button--ghost:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px transparent; }
.link-button { background: none; border: 0; color: var(--ink-3); font: 500 0.92rem var(--font); cursor: pointer; padding: 6px 4px; }
.link-button:hover { color: var(--accent); }

/* ---------- Nav (translucent chrome, content scrolls under) ---------- */

.nav { position: sticky; top: 0; z-index: 50; padding: 10px 16px 0; }
.nav__inner {
  max-width: 1080px; margin: 0 auto; height: 54px; padding: 0 10px 0 16px;
  display: flex; align-items: center; gap: 24px;
  border-radius: 999px; border: 1px solid transparent;
  transition: background 300ms var(--ease), border-color 300ms, box-shadow 300ms, backdrop-filter 300ms;
}
.nav.is-scrolled .nav__inner {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-color: var(--line);
  box-shadow: 0 10px 30px -18px rgb(20 24 25 / 0.35);
}
.nav__brand { display: inline-flex; align-items: center; gap: 9px; font: 700 1.05rem var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.nav__brand:hover { text-decoration: none; }
.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__links a { color: var(--ink-2); font-size: 0.93rem; font-weight: 500; }
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav .button { margin-left: 4px; }
.nav__price { opacity: 0.85; font-weight: 500; }
@media (max-width: 760px) { .nav__links { display: none; } .nav .button { margin-left: auto; } }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: clip; padding: clamp(40px, 8vh, 96px) 16px clamp(72px, 12vh, 140px); text-align: center; }
.hero__petals { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; z-index: 0; }
.hero__petals svg { position: absolute; left: 50%; top: 42%; width: min(1400px, 150vw); height: auto; translate: -50% -50%; opacity: 0.55; filter: blur(60px) saturate(130%); will-change: transform; }
@media (prefers-color-scheme: dark) { .hero__petals svg { opacity: 0.42; } }
.hero__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.hero__icon { width: clamp(150px, 19vw, 236px); margin: 0 auto 22px; transform-style: preserve-3d; will-change: transform; }
.hero__icon img { width: 100%; filter: drop-shadow(0 40px 60px rgb(20 24 25 / 0.35)); }
.hero__title { font-size: clamp(2.7rem, 7.4vw, 5.6rem); line-height: 1.02; letter-spacing: -0.038em; font-weight: 750; margin-bottom: 22px; }
.hero__lede { max-width: 650px; margin: 0 auto 32px; font-size: clamp(1.12rem, 1.9vw, 1.36rem); color: var(--ink-2); line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__fine { margin-top: 18px; font-size: 0.88rem; color: var(--ink-3); }

/* ---------- Sections ---------- */

.section { padding: clamp(72px, 11vw, 140px) 16px; position: relative; }
.section__head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.section__head h2 { margin-bottom: 18px; }
.section--tint { background: var(--paper-2); }

/* Reveal: subtle rise. Elements are visible by default; JS opts in. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: var(--delay, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: opacity 400ms ease; } }

/* ---------- Desk (interactive demo) ---------- */

.desk {
  --desk-h: clamp(420px, 60vw, 600px);
  position: relative; max-width: var(--max); height: var(--desk-h); margin: 0 auto;
  border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  user-select: none; -webkit-user-select: none; touch-action: none;
  background: #424e55;
}
.desk__wallpaper {
  position: absolute; inset: 0; z-index: -1;
  background: #424e55;
}
@media (prefers-color-scheme: dark) { .desk__wallpaper { filter: brightness(0.62) saturate(1.1); } }
.desk__menubar {
  position: absolute; inset: 0 0 auto; height: 28px; z-index: 5;
  display: flex; align-items: center; gap: 16px; padding: 0 14px;
  font-size: 13px; color: rgb(255 255 255 / 0.95);
  background: rgb(15 24 28 / 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
.desk__menubar strong { font-weight: 700; }
.desk__menubar [data-clock] { white-space: nowrap; }
@media (max-width: 560px) { .desk__menubar > span:nth-of-type(n+3):nth-of-type(-n+6) { display: none; } }
.desk__apple { width: 12px; height: 12px; border-radius: 50%; background: rgb(255 255 255 / 0.9); }
.desk__spacer { flex: 1; }
.desk__status { position: relative; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; transition: background 160ms; }
.desk__status.is-target { background: rgb(255 255 255 / 0.28); }
.desk__glyph { width: 16px; height: 16px; color: #fff; transition: transform 300ms var(--ease); }
.desk__ring { position: absolute; inset: 0; width: 22px; height: 22px; transform: rotate(-90deg); opacity: 0; transition: opacity 200ms; }
.desk__ring circle { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 0 100; }
.desk__status.is-busy .desk__glyph { transform: scale(0.62); }
.desk__status.is-busy .desk__ring { opacity: 1; }

.desk__files {
  /* Like the macOS desktop: icons start top-right and fill columns toward the left. */
  list-style: none; margin: 0; padding: 44px 22px 70px; position: absolute; inset: 0;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px 8px;
  direction: rtl;
}
.desk__files > li { direction: ltr; }
.file {
  width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 4px; border-radius: 10px; cursor: grab; touch-action: none; position: relative;
  background: none; border: 0; color: inherit; font: inherit;
}
.file:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.file.is-selected .file__name { background: rgb(42 98 236 / 0.9); }
.file.is-lifted { opacity: 0.4; }
.file.is-new { animation: none; }
.file__icon { width: 64px; height: 76px; filter: drop-shadow(0 6px 10px rgb(15 24 28 / 0.3)); pointer-events: none; }
.file__name {
  max-width: 100px; padding: 1px 6px; border-radius: 5px;
  font-size: 12px; line-height: 1.25; color: #fff; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
.desk__layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.ghost { position: absolute; left: 0; top: 0; z-index: 2; width: 64px; height: 76px; will-change: transform; filter: drop-shadow(0 18px 24px rgb(15 24 28 / 0.45)); }
.ghost-cursor { position: absolute; left: 0; top: 0; z-index: 12; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35)); will-change: transform; }
.ghost__count { position: absolute; right: -8px; top: -8px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: #fff; font: 700 12px/22px var(--font-round); text-align: center; }

.desk__hint {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 6;
  padding: 9px 16px; border-radius: 999px; font-size: 14px; color: #fff; white-space: nowrap;
  background: rgb(15 24 28 / 0.35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 0.18);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.desk__hint kbd, .notif kbd { color: #1b1430; background: rgb(255 255 255 / 0.92); border-color: rgb(255 255 255 / 0.6); }
.desk__hint.is-pulsing { animation: hint-pulse 1.2s var(--ease) 2; }
@keyframes hint-pulse { 50% { transform: scale(1.06); } }
@media (max-width: 560px) { .desk__hint { font-size: 12.5px; white-space: normal; width: max-content; max-width: 88%; text-align: center; } }

/* Wheel */
/* No will-change here: a pre-composited layer stops backdrop-filter from seeing the desktop behind the glass. */
.wheel { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.wheel__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 24px 50px -16px rgb(15 24 28 / 0.55), inset 0 0 0 0.5px rgb(255 255 255 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.55);
}
.wheel svg { position: absolute; inset: 0; overflow: visible; }
.wheel__petal path { fill: rgb(255 255 255 / 0.16); stroke: rgb(255 255 255 / 0.32); stroke-width: 0.75; transition: fill 140ms, stroke 140ms; }
.wheel__petal { transform-box: view-box; transform-origin: center; transition: transform 260ms var(--ease); }
.wheel__petal.is-hot { transform: scale(1.05); }
.wheel__petal.is-hot path { stroke: rgb(255 255 255 / 0.85); stroke-width: 1.2; }
.wheel__label { position: absolute; width: 78px; translate: -50% -50%; text-align: center; color: #fff; font: 650 12px/1.15 var(--font-round); text-shadow: 0 1px 2px rgb(30 0 60 / 0.4); transition: transform 260ms var(--ease); }
.wheel__label svg { position: static; display: block; width: 16px; height: 16px; margin: 0 auto 3px; }
.wheel__label.is-hot { transform: scale(1.08); }
.wheel--crowded .wheel__label { font-size: 10.5px; width: 66px; }
.wheel__hub { position: absolute; border-radius: 50%; background: rgb(255 255 255 / 0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.5); }
.wheel__hub svg { position: static; width: 40%; height: auto; }
.wheel__mode { font: 700 8.5px/1 var(--font-round); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.85); }

/* Notification banner */
.notif {
  position: absolute; right: 12px; top: 38px; z-index: 8; width: min(330px, calc(100% - 24px));
  display: flex; gap: 11px; align-items: center; padding: 11px 13px;
  border-radius: 18px; color: var(--ink);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 20px 40px -18px rgb(15 24 28 / 0.5), inset 0 0 0 0.5px var(--line-strong);
  opacity: 0; transform: translateY(-12px) scale(0.96); pointer-events: none;
  transition: opacity 260ms var(--ease), transform 420ms var(--ease);
}
.notif.is-shown { opacity: 1; transform: none; }
.notif img { border-radius: 8px; flex: none; }
.notif div { display: grid; min-width: 0; }
.notif strong { font-size: 13px; }
.notif span { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Action popover (keyboard path) */
.popover {
  position: absolute; z-index: 9; min-width: 210px; max-height: 70%; overflow: auto; padding: 6px;
  border-radius: 14px; background: var(--glass-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 24px 50px -18px rgb(15 24 28 / 0.55), inset 0 0 0 0.5px var(--line-strong);
  transform-origin: top left; animation: pop-in 220ms var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } }
.popover__label { padding: 6px 10px 4px; font-size: 11px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.popover button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: 13.5px var(--font); cursor: pointer; }
.popover button:hover, .popover button:focus-visible { background: var(--accent); color: #fff; outline: none; }

/* QR result card */
.qr-card { position: absolute; z-index: 9; width: 240px; padding: 14px; border-radius: 16px; background: var(--glass-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 24px 50px -18px rgb(15 24 28 / 0.55), inset 0 0 0 0.5px var(--line-strong); animation: pop-in 260ms var(--ease); }
.qr-card b { display: block; font-size: 13px; margin-bottom: 8px; }
.qr-card code { display: block; padding: 8px 10px; border-radius: 9px; background: var(--paper-2); font: 13px var(--font-mono); }

/* Controls under the desk */
.desk-controls { max-width: var(--max); margin: 18px auto 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.desk-controls__note { color: var(--ink-3); font-size: 0.9rem; }
.keys { display: flex; gap: 8px; }
.key {
  min-width: 58px; height: 52px; padding: 6px 10px; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center; gap: 0; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong); border-bottom-width: 3px;
  font: 600 18px/1 var(--font-round); transition: transform 80ms, background 120ms, border-color 120ms, color 120ms;
  -webkit-tap-highlight-color: transparent;
}
.key small { font: 500 10px/1 var(--font); color: var(--ink-3); }
.key--wide { min-width: 96px; }
.key[aria-pressed="true"], .key.is-down { background: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, black); color: #fff; transform: translateY(2px); border-bottom-width: 1px; }
.key[aria-pressed="true"] small, .key.is-down small { color: rgb(255 255 255 / 0.85); }

/* ---------- Steps ---------- */

.section--steps { padding-top: 40px; padding-bottom: 40px; }
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { padding: 26px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); }
.step__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dusk); color: #fff; font: 700 14px var(--font-round); margin-bottom: 14px; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: 0.98rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Tools ---------- */

.tools { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tools { grid-template-columns: 1fr; } }
.tool { padding: 14px 14px 22px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.tool:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); }
.tool h3 { margin: 18px 8px 6px; }
.tool p { margin: 0 8px; color: var(--ink-2); font-size: 0.96rem; }
.tool__stage { position: relative; height: 190px; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: var(--paper-2); }
.tool__readout { position: absolute; left: 12px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: var(--glass-strong); font: 600 12px var(--font-round); color: var(--ink-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tools__more { max-width: 820px; margin: 36px auto 0; text-align: center; color: var(--ink-3); font-size: 0.98rem; line-height: 1.8; }

/* Trim */
.demo-trim { position: relative; width: 82%; height: 64px; }
.demo-trim__strip { position: absolute; inset: 0; border-radius: 10px; background: repeating-linear-gradient(90deg, #6c8289 0 13%, #ccd2ce 13% 14%, #a7b0a7 14% 27%, #ccd2ce 27% 28%); opacity: 0.85; }
.demo-trim__sel { position: absolute; top: -4px; bottom: -4px; left: var(--l, 0%); right: var(--r, 0%); border: 3px solid var(--accent); border-radius: 11px; box-shadow: 0 0 0 999px rgb(15 24 28 / 0.35); transition: left 900ms var(--ease), right 900ms var(--ease); }
.demo-trim__sel i { position: absolute; top: 50%; width: 4px; height: 22px; translate: 0 -50%; border-radius: 2px; background: #fff; }
.demo-trim__sel i:first-child { left: -3.5px; } .demo-trim__sel i:last-child { right: -3.5px; }

/* Crop */
.demo-crop { position: relative; width: 74%; aspect-ratio: 3 / 2; }
.demo-crop__photo { position: absolute; inset: 0; border-radius: 8px; background: var(--paper-3) url(/assets/img/sample-art.svg?v=2) center / cover; }
.demo-crop__photo::after { content: ""; position: absolute; inset: 55% 0 0; background: transparent; clip-path: polygon(0 60%, 25% 20%, 45% 55%, 70% 10%, 100% 50%, 100% 100%, 0 100%); }
.demo-crop__box { position: absolute; left: var(--x, 0%); top: var(--y, 0%); width: var(--w, 100%); height: var(--h, 100%); border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 999px rgb(15 24 28 / 0.45); transition: all 900ms var(--ease);
  background: linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)) 33.3% 0 / 1px 100% no-repeat, linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)) 66.6% 0 / 1px 100% no-repeat, linear-gradient(90deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)) 0 33.3% / 100% 1px no-repeat, linear-gradient(90deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)) 0 66.6% / 100% 1px no-repeat; }

/* Compress */
.demo-compress { width: 78%; display: grid; gap: 10px; }
.demo-compress__size { font: 700 2.2rem/1 var(--font-round); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.demo-compress__bar { height: 12px; border-radius: 6px; background: var(--paper-3); overflow: hidden; }
.demo-compress__bar i { display: block; height: 100%; width: var(--w, 100%); border-radius: 6px; background: var(--dusk); transition: width 1400ms var(--ease); }
.demo-compress__save { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 13px var(--font-round); font-variant-numeric: tabular-nums; }

/* Metadata */
.demo-meta { display: flex; gap: 14px; align-items: center; }
.demo-meta__photo { width: 84px; height: 100px; border-radius: 10px; background: var(--paper-3) url(/assets/img/sample-art.svg?v=2) center / cover; box-shadow: var(--shadow-md); }
.demo-meta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.demo-meta li { padding: 5px 10px; border-radius: 8px; background: var(--card); font-size: 12px; box-shadow: inset 0 0 0 1px var(--line); transition: opacity 500ms var(--ease), transform 500ms var(--ease), filter 500ms; transition-delay: calc(var(--i, 0) * 120ms); }
.demo-meta.is-clean li { opacity: 0; transform: translateX(26px); filter: blur(4px); }

/* QR */
.demo-qr { position: relative; display: grid; justify-items: center; gap: 12px; }
.demo-qr__code { width: 112px; height: 112px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-md); }
.demo-qr__code svg { display: block; width: 100%; height: 100%; }
.demo-qr__scan { position: absolute; left: 50%; top: 0; width: 124px; height: 3px; translate: -50% 0; border-radius: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: qr-scan 1.8s var(--ease) infinite; }
@keyframes qr-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(102px); } }
.demo-qr__text { padding: 4px 12px; border-radius: 999px; background: var(--card); font: 600 13px var(--font-mono); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(6px); transition: all 500ms var(--ease); }
.demo-qr.is-found .demo-qr__text { opacity: 1; transform: none; }
.demo-qr.is-found .demo-qr__scan { animation-play-state: paused; opacity: 0; }

/* Join */
.demo-join { display: flex; gap: var(--gap, 18px); transition: gap 900ms var(--ease); }
.demo-join i { width: 64px; height: 44px; border-radius: 8px; background: var(--c); box-shadow: var(--shadow-md); }
.demo-join i:nth-child(1) { --c: #6c8289; }
.demo-join i:nth-child(2) { --c: #a7b0a7; }
.demo-join i:nth-child(3) { --c: #be9e91; }
.demo-join.is-joined i:nth-child(1) { border-radius: 8px 0 0 8px; } .demo-join.is-joined i:nth-child(2) { border-radius: 0; } .demo-join.is-joined i:nth-child(3) { border-radius: 0 8px 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .demo-qr__scan { animation: none; opacity: 0; }
  .demo-trim__sel, .demo-crop__box, .demo-compress__bar i, .demo-join, .demo-meta li { transition-duration: 1ms; }
}

/* ---------- Everywhere ---------- */

.everywhere { max-width: var(--max); margin: 0 auto; }
.segmented { position: relative; display: flex; gap: 2px; width: max-content; max-width: 100%; overflow-x: auto; margin: 0 auto 30px; padding: 4px; border-radius: 999px; background: var(--paper-3); scrollbar-width: none; }
.segmented button { position: relative; z-index: 1; padding: 9px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 0.92rem var(--font); cursor: pointer; white-space: nowrap; transition: color 200ms; }
.segmented button[aria-selected="true"] { color: var(--ink); }
.segmented__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--thumb); box-shadow: 0 3px 10px -3px rgb(20 24 25 / 0.3), inset 0 0 0 0.5px var(--line); transition: transform 420ms var(--ease), width 420ms var(--ease); }
.stage { position: relative; }
.panel { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; }
.panel[hidden] { display: none; }
.panel.is-active .mock { animation: panel-in 600ms var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.panel__copy h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; margin-bottom: 12px; }
.panel__copy p { color: var(--ink-2); font-size: 1.08rem; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; gap: 22px; } }

.mock { position: relative; height: 380px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
  background: #424e55; }
@media (prefers-color-scheme: dark) { .mock { filter: brightness(0.85); } }

.mock-bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 26px; padding: 0 12px; color: #fff; font-size: 12px; background: rgb(15 24 28 / 0.2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mock-bar span:first-child { margin-right: auto; }
.mock-bar__glyph { width: 22px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgb(255 255 255 / 0.3); }
.mock-bar__glyph svg { width: 15px; height: 15px; color: #fff; }
.mock-menu { position: absolute; right: 30px; top: 32px; width: 270px; padding: 6px; border-radius: 12px; background: var(--glass-strong); color: var(--ink); font-size: 13px;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 24px 50px -20px rgb(15 24 28 / 0.6), inset 0 0 0 0.5px var(--line-strong); transform-origin: top right; }
.panel.is-active .mock-menu { animation: menu-drop 520ms var(--ease) 180ms both; }
@keyframes menu-drop { from { opacity: 0; transform: scale(0.92) translateY(-6px); } }
.mock-menu__item { display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 6px; }
.mock-menu__item i { order: 2; font-style: normal; color: var(--ink-3); }
.mock-menu__item:nth-child(1) { background: var(--accent); color: #fff; }
.mock-menu__item.is-checked::before { content: "✓"; margin-right: 6px; }
.mock-menu__label { padding: 6px 10px 2px; font-size: 11px; font-weight: 650; color: var(--ink-3); }
.mock-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 8px; }
.mock-job { padding: 4px 10px 6px; display: grid; gap: 4px; }
.mock-job b { font-size: 12.5px; }
.mock-job small { color: var(--ink-3); font-size: 11px; }
.mock-job__bar { height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.mock-job__bar i { display: block; height: 100%; width: 40%; border-radius: 2px; background: var(--accent); animation: job 3.2s var(--ease) infinite; }
@keyframes job { from { width: 8%; } to { width: 96%; } }
.mock-dropfile { position: absolute; left: 40px; bottom: 40px; width: 56px; height: 66px; border-radius: 6px 16px 6px 6px; background: #f7f7f4; box-shadow: 0 14px 24px -8px rgb(15 24 28 / 0.5); }
.panel.is-active .mock-dropfile { animation: fly-to-bar 2.6s var(--ease) 600ms both; }
@keyframes fly-to-bar { 0% { transform: none; } 60% { transform: translate(min(46vw, 470px), -290px) scale(0.5); opacity: 1; } 75%, 100% { transform: translate(min(46vw, 470px), -290px) scale(0.2); opacity: 0; } }

.mock-window { position: absolute; left: 30px; top: 34px; width: 62%; height: 72%; border-radius: 14px; background: var(--card); box-shadow: 0 24px 50px -20px rgb(15 24 28 / 0.6); overflow: hidden; }
.mock-window__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.mock-window__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .mock-window__bar i:nth-child(2) { background: #febc2e; } .mock-window__bar i:nth-child(3) { background: #28c840; }
.mock-window__bar span { margin-left: 8px; }
.mock-finder { display: grid; gap: 2px; padding: 10px; }
.mock-file { padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.mock-file.is-selected { background: #2a62ec; color: #fff; }
.mock-context { position: absolute; left: 34%; top: 38%; width: 260px; padding: 6px; border-radius: 10px; background: var(--glass-strong); color: var(--ink); font-size: 13px;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 24px 50px -20px rgb(15 24 28 / 0.6), inset 0 0 0 0.5px var(--line-strong); transform-origin: top left; }
.panel.is-active .mock-context { animation: menu-drop 480ms var(--ease) 300ms both; }
.mock-context div { padding: 4px 10px; border-radius: 6px; } .mock-context hr { border: 0; border-top: 1px solid var(--line); margin: 4px 8px; }
.mock-context .is-hl { background: var(--accent); color: #fff; }

.mock--shortcuts { display: grid; align-content: center; justify-items: center; gap: 14px; padding: 20px; }
.sc-card { width: min(420px, 92%); display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--glass-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 20px 40px -20px rgb(15 24 28 / 0.6), inset 0 0 0 0.5px var(--line-strong); }
.panel.is-active .sc-card { animation: panel-in 600ms var(--ease) both; }
.panel.is-active .sc-card--b { animation-delay: 120ms; } .panel.is-active .sc-card--c { animation-delay: 240ms; }
.sc-card__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: url(/assets/img/icon-256.webp) center / cover; }
.sc-card b { display: block; font-size: 14.5px; } .sc-card small { font-size: 13px; color: var(--ink-2); }
.sc-card em { font-style: normal; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.mock--spotlight { display: grid; align-content: center; justify-items: center; padding: 20px; }
.spot { display: flex; align-items: center; gap: 10px; width: min(460px, 94%); padding: 14px 18px; border-radius: 22px 22px 0 0; background: var(--glass-strong); color: var(--ink); font-size: 22px;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 0.5px var(--line-strong); }
.spot__glass { color: var(--ink-3); }
.spot__caret { width: 2px; height: 24px; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.spot-results { width: min(460px, 94%); padding: 6px; border-radius: 0 0 22px 22px; background: var(--glass-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 30px 50px -24px rgb(15 24 28 / 0.6), inset 0 0 0 0.5px var(--line-strong); }
.spot-row { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; }
.spot-row.is-hl { background: var(--accent); color: #fff; } .spot-row.is-hl small { color: rgb(255 255 255 / 0.85); }
.spot-row__icon { width: 34px; height: 34px; border-radius: 8px; background: url(/assets/img/icon-256.webp) center / cover; }
.spot-row b { display: block; font-size: 14.5px; } .spot-row small { font-size: 12px; color: var(--ink-3); }
.spot-row kbd { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .spot__caret { animation: none; } .panel.is-active .mock-dropfile { animation: none; } }

.mock--app { display: grid; place-items: center; padding: 20px; }
.app-win { width: min(560px, 96%); height: 300px; display: flex; border-radius: 14px; overflow: hidden; background: var(--card); color: var(--ink); box-shadow: 0 30px 60px -24px rgb(15 24 28 / 0.65), inset 0 0 0 0.5px var(--line-strong); }
.app-win__side { width: 150px; padding: 12px 8px; display: grid; align-content: start; gap: 2px; background: var(--paper-2); }
.app-win__lights { display: flex; gap: 7px; padding: 2px 6px 12px; }
.app-win__lights b { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .app-win__lights b:nth-child(2) { background: #febc2e; } .app-win__lights b:nth-child(3) { background: #28c840; }
.app-win__side button { text-align: left; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: 500 13px var(--font); cursor: pointer; }
.app-win__side button.is-on { background: var(--accent); color: #fff; }
.app-win__main { flex: 1; position: relative; padding: 16px; }
.app-pane { position: absolute; inset: 16px; opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease), transform 360ms var(--ease); pointer-events: none; }
.app-pane.is-on { opacity: 1; transform: none; pointer-events: auto; }
.app-drop { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; border: 1.5px dashed var(--line-strong); border-radius: 14px; text-align: center; }
.app-drop b { font-size: 15px; } .app-drop small { color: var(--ink-3); }
.app-btn { margin-top: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-grid span { padding: 12px; border-radius: 10px; background: var(--paper-2); font-size: 13px; font-weight: 600; }
.app-list { display: grid; gap: 6px; }
.app-list div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--paper-2); }
.app-list div b { font-size: 13px; } .app-list div small { grid-column: 2; color: var(--ink-3); font-size: 12px; }
.app-list i { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; align-self: center; }
.app-list i.ok { background: #2fbf6a; } .app-list i.run { border: 2.5px solid var(--paper-3); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Formats ---------- */

.formats { max-width: 920px; margin: 0 auto; padding: 28px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); }
.formats__groups { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 18px; }
.formats__groups button { padding: 8px 15px; border-radius: 999px; border: 0; background: var(--paper-2); color: var(--ink-2); font: 600 0.9rem var(--font); cursor: pointer; transition: background 200ms, color 200ms; }
.formats__groups button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.formats__inputs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.chip { padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: 650 0.9rem var(--font-round); letter-spacing: 0.01em; cursor: pointer; transition: transform 140ms var(--ease), background 160ms, color 160ms, border-color 160ms; }
.chip:active { transform: scale(0.95); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.formats__flow { display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: center; padding: 26px 4px 6px; min-height: 104px; }
.formats__from { font: 800 clamp(1.6rem, 3.4vw, 2.4rem)/1 var(--font-round); color: var(--ink); }
.formats__arrow { width: 46px; height: 2px; background: var(--line-strong); position: relative; }
.formats__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--line-strong); border-right: 0; }
.formats__targets { display: flex; flex-wrap: wrap; gap: 8px; }
.target { padding: 8px 14px; border-radius: 10px; background: var(--paper-2); font: 650 0.95rem var(--font-round); animation: target-in 520ms var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes target-in { from { opacity: 0; transform: translateX(-10px) scale(0.92); } }
.formats__tools { padding: 10px 4px 0; color: var(--ink-3); font-size: 0.95rem; }
@media (max-width: 620px) { .formats { padding: 20px 16px; } .formats__flow { grid-template-columns: 1fr; gap: 10px; } .formats__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .target { animation: none; } }

/* ---------- Privacy ---------- */

.section--privacy { overflow: clip; }
.privacy { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.privacy__copy h2 { margin-bottom: 18px; }
.privacy__art { position: relative; aspect-ratio: 1; max-width: 440px; width: 100%; margin: 0 auto; display: grid; place-items: center; }
.privacy__mac { width: 54%; aspect-ratio: 16 / 11; border-radius: 14px; background: #424e55; box-shadow: var(--shadow-lg), inset 0 0 0 6px #1b1430; position: relative; }
.privacy__mac span { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 22%; background: url(/assets/img/icon-256.webp) center / cover; box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.5); }
.privacy__mac::after { content: ""; position: absolute; left: -9%; right: -9%; bottom: -10%; height: 9%; border-radius: 0 0 14px 14px; background: #9b9f9c; }
.orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--line-strong); animation: orbit 40s linear infinite; }
.orbit i { position: absolute; left: 50%; top: 50%; width: 38px; height: 46px; margin: -23px 0 0 -19px; border-radius: 4px 12px 4px 4px; background: var(--card); box-shadow: var(--shadow-md); transform: rotate(calc(var(--n) * 72deg)) translateY(-50%) translateY(-110px) rotate(calc(var(--n) * -72deg)); }
.orbit i::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 9px; border-radius: 3px; background: var(--c); }
.orbit i:nth-child(1) { --n: 0; --c: var(--p1); } .orbit i:nth-child(2) { --n: 1; --c: var(--p2); } .orbit i:nth-child(3) { --n: 2; --c: var(--p3); } .orbit i:nth-child(4) { --n: 3; --c: var(--p4); } .orbit i:nth-child(5) { --n: 4; --c: var(--p5); }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }
.stats { display: flex; gap: 34px; margin: 30px 0 0; }
.stats div { display: grid; }
.stats dt { order: 2; color: var(--ink-3); font-size: 0.92rem; }
.stats dd { margin: 0; font: 750 3rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
@media (max-width: 860px) { .privacy { grid-template-columns: 1fr; gap: 30px; } .privacy__art { max-width: 320px; } .orbit i { transform: rotate(calc(var(--n) * 72deg)) translateY(-50%) translateY(-80px) rotate(calc(var(--n) * -72deg)); } }

/* ---------- Pricing ---------- */

.price-card { position: relative; max-width: 480px; margin: 0 auto; padding: 40px 34px 30px; border-radius: var(--r-xl); text-align: center; background: var(--card); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; }
.price-card__icon { margin: 0 auto 14px; filter: drop-shadow(0 16px 24px rgb(20 24 25 / 0.35)); }
.price { margin: 14px 0 6px; font: 750 4.2rem/1 var(--font-display); letter-spacing: -0.04em; }
.price-card__sub { color: var(--ink-2); margin-bottom: 22px; }
.checks { list-style: none; margin: 0 0 26px; padding: 0; text-align: left; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; color: var(--ink-2); font-size: 0.97rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 5 8.8l4.6-5.6' fill='none' stroke='%23f23d6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.price-card__fine { margin-top: 14px; font-size: 0.85rem; color: var(--ink-3); }

/* ---------- FAQ ---------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 2px; position: relative; font: 600 1.1rem/1.35 var(--font-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform 300ms var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { padding: 0 2px 22px; color: var(--ink-2); }

/* ---------- Footer ---------- */

.footer { padding: 40px 16px 56px; border-top: 1px solid var(--line); }
.footer__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer nav a { color: var(--ink-2); font-size: 0.92rem; }
.footer p { width: 100%; color: var(--ink-3); font-size: 0.84rem; }

/* ---------- Sheet ---------- */

.sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgb(13 9 23 / 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade 260ms var(--ease); }
.sheet__card { position: relative; width: min(400px, 100%); padding: 30px 26px 18px; border-radius: 26px; text-align: center; display: grid; justify-items: center; gap: 12px; background: var(--card); box-shadow: var(--shadow-lg); animation: sheet-in 460ms var(--ease); }
.sheet__card h2 { font-size: 1.8rem; }
.sheet__card p { color: var(--ink-2); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Article pages (help, privacy) ---------- */

.article { max-width: 720px; margin: 0 auto; padding: 40px 16px 96px; }
.article h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.08; margin: 10px 0 14px; }
.article h2 { font-size: 1.5rem; letter-spacing: -0.015em; margin: 40px 0 10px; }
.article p, .article li { color: var(--ink-2); }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin: 6px 0; }
.article code { font: 0.9em var(--font-mono); padding: 1px 6px; border-radius: 6px; background: var(--paper-2); }

/* ---------- Accessibility fallbacks ---------- */

@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled .nav__inner, .notif, .popover, .qr-card, .mock-menu, .mock-context, .sc-card, .spot, .spot-results { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wheel__disc { background: rgb(40 25 70 / 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Product presentation ----------
   The original interaction timelines stay intact. Color, hierarchy and material
   now put the app and its file operations at the center of the page. */
.button { --bg: var(--accent); color: var(--accent-ink); border-radius: 10px; box-shadow: none; font-weight: 550; }
.button:hover { box-shadow: none; filter: brightness(1.15); }
.button--ghost { --bg: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.button--ghost:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.eyebrow { color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 600; }
h2 { font-weight: 600; letter-spacing: -0.045em; line-height: 1.12; }
.nav { padding: 0 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav__inner { max-width: var(--max); height: 76px; padding: 0; border: 0; border-radius: 0; }
.nav.is-scrolled .nav__inner { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav__brand { font-weight: 600; }
.nav__links a { font-size: 0.82rem; }
.hero { padding: 100px 32px 110px; text-align: left; }
.hero__inner { max-width: var(--max); display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 28px; }
.hero__copy { position: relative; z-index: 2; }
.hero__title { font-size: clamp(3rem, 5.25vw, 4.5rem); line-height: 1.06; letter-spacing: -0.055em; font-weight: 620; margin: 24px 0; }
.hero__title .dusk-text { color: var(--accent); }
.hero__lede { max-width: 510px; margin: 0 0 30px; font-size: 1.1rem; line-height: 1.65; }
.hero__cta { justify-content: flex-start; }
.hero__fine { font-size: 0.75rem; margin-top: 22px; }
.hero__product { position: relative; display: grid; align-content: center; justify-items: center; min-height: 430px; }
.hero__petals { inset: 0; height: 100%; }
.hero__petals svg { top: 45%; width: 110%; opacity: 1; filter: none; }
.hero__petals svg path { fill-opacity: 0.22; stroke-width: 0.8; stroke: var(--line-strong); }
.hero__icon { width: clamp(190px, 23vw, 280px); margin: 0; position: relative; }
.hero__icon img { filter: drop-shadow(0 22px 18px rgb(20 24 25 / 0.12)); }
.hero__conversion { display: flex; align-items: center; gap: 28px; position: relative; margin-top: 24px; }
.hero__file { display: grid; place-items: center; width: 59px; height: 73px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px 18px 6px 6px; font: 500 11px var(--font-mono); color: var(--ink-2); box-shadow: var(--shadow-md); }
.hero__file--result { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.hero__arrow { color: var(--ink-3); font-size: 24px; }
.section { padding-left: 32px; padding-right: 32px; }
.section__head { max-width: var(--max); text-align: left; }
.section__head h2 { max-width: 820px; margin-bottom: 24px; }
.section__head .lede { max-width: 690px; font-size: 1.12rem; }
.section--try { padding-top: 80px; border-top: 1px solid var(--line); background: var(--card); }
.desk { border-radius: 14px; box-shadow: 0 24px 50px -30px rgb(15 24 28 / 0.4), 0 0 0 1px var(--line-strong); }
.desk__menubar { background: rgb(15 24 28 / 0.35); }
.desk__wallpaper { background: #19132f url(/assets/img/petal-wallpaper.jpg) center / cover; }
.desk-controls { max-width: var(--max); }
.section--steps { background: var(--card); padding-bottom: 90px; }
.steps { gap: 40px; }
.step { border-radius: 0; background: none; box-shadow: none; padding: 24px 0 0; border-top: 1px solid var(--line-strong); }
.step__n { color: var(--accent); background: none; width: auto; height: auto; display: block; font: 500 12px var(--font-mono); margin-bottom: 28px; }
.step__n::before { content: "0"; }
.step h3 { font-size: 1.5rem; font-weight: 550; margin-bottom: 12px; }
.tools { gap: 48px 24px; }
.tool { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.tool:hover { box-shadow: none; }
.tool__stage { height: 220px; border: 1px solid var(--line); border-radius: 14px; }
.tool h3 { margin: 22px 0 10px; font-weight: 600; }
.tool p { margin: 0; line-height: 1.6; }
.tools__more { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 48px; text-align: left; max-width: var(--max); font-size: 0.86rem; }
.demo-qr__scan { box-shadow: none; }
.segmented { margin-left: 0; border-radius: 10px; padding: 5px; background: var(--paper-3); }
.segmented button, .segmented__thumb { border-radius: 7px; }
.panel { gap: 64px; }
.mock { border-radius: 14px; box-shadow: none; border: 1px solid var(--line-strong); }
.formats { max-width: var(--max); border-radius: 16px; padding: 36px; box-shadow: none; border: 1px solid var(--line-strong); }
.formats__groups, .formats__inputs { justify-content: flex-start; }
.formats__groups button { border-radius: 7px; font-weight: 500; }
.formats__from { font-family: var(--font-mono); font-weight: 500; }
.formats__flow { padding-top: 32px; padding-bottom: 18px; }
.chip, .target { font-family: var(--font-mono); font-weight: 500; font-size: 0.82rem; border-radius: 6px; }
.section--privacy { background: var(--paper-2); }
.privacy__mac { box-shadow: var(--shadow-lg), inset 0 0 0 6px #242a2c; }
.orbit { border-style: solid; }
.orbit i::after { background: #6c8289; }
.stats { gap: 0; }
.stats div { padding: 0 28px; border-left: 1px solid var(--line-strong); }
.stats div:first-child { padding-left: 0; border: 0; }
.stats dd { font-weight: 500; font-size: 2.75rem; margin-bottom: 6px; }
.price-card { max-width: var(--max); padding: 48px; border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: none; text-align: left; display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 72px; }
.price-card__icon { width: 68px; height: 68px; margin: 0 0 22px; filter: none; }
.price-card h3, .price, .price-card__sub, .price-card__icon { grid-column: 1; }
.price { font-weight: 500; font-size: 4.5rem; margin-top: 26px; }
.price-card__sub { margin: 12px 0 0; max-width: 300px; font-size: 1rem; }
.checks { grid-column: 2; grid-row: 1 / 5; align-self: center; margin: 0; gap: 18px; }
.checks li { padding-left: 24px; }
.checks li::before { background: none; content: "✓"; color: var(--accent); }
.price-card > .button { grid-column: 2; margin-top: 28px; }
.price-card__fine { grid-column: 2; text-align: center; }
.section--faq { border-top: 1px solid var(--line); }
.faq { max-width: var(--max); }
.faq summary { font-weight: 500; padding-top: 25px; padding-bottom: 25px; }
.faq details p { max-width: 780px; }
.footer { background: var(--paper-2); padding: 48px 32px; }
.footer__inner > .nav__brand { margin-right: auto; }
.article { padding-top: 80px; }
@media (max-width: 860px) {
  .hero { padding-top: 60px; padding-bottom: 64px; }
  .hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .hero__copy { max-width: 640px; }
  .hero__title { font-size: clamp(3rem, 7vw, 4rem); }
  .hero__product { min-height: 290px; max-width: 380px; width: 100%; margin: 10px auto 0; }
  .hero__icon { width: 180px; }
  .hero__petals svg { width: 88%; }
  .hero__conversion { margin-top: 12px; gap: 20px; }
  .hero__file { width: 42px; height: 52px; font-size: 9px; }
  .panel { gap: 28px; }
  .price-card { column-gap: 32px; padding: 32px; }
}
@media (max-width: 620px) {
  .nav { padding: 0 20px; }
  .nav__inner { height: 64px; }
  .hero, .section { padding-left: 22px; padding-right: 22px; }
  .hero__title { font-size: clamp(2.75rem, 10.5vw, 3.8rem); }
  .hero__lede { font-size: 1rem; }
  .hero__cta { gap: 10px; }
  .hero__cta .button { font-size: 0.92rem; padding: 15px 17px; }
  .section__head .lede { font-size: 1rem; }
  .steps { gap: 30px; }
  .step__n { margin-bottom: 16px; }
  .formats { padding: 24px 18px; }
  .formats__groups button { padding: 8px 10px; font-size: 0.8rem; }
  .price-card { display: block; padding: 28px; }
  .price-card__sub { margin-bottom: 32px; }
  .checks { gap: 16px; }
  .price-card__fine { font-size: 0.75rem; }
  .segmented { width: 100%; }
  .segmented button { padding: 10px 12px; font-size: 0.8rem; }
  .stats div { padding: 0 20px; }
}
@media (prefers-color-scheme: dark) {
  .hero__petals svg { opacity: 0.6; }
  .desk__wallpaper { filter: none; }
  .mock { filter: none; }
  .chip[aria-pressed="true"], .key[aria-pressed="true"], .key.is-down,
  .mock-menu__item:nth-child(1), .mock-context .is-hl, .spot-row.is-hl,
  .app-win__side button.is-on, .app-btn { color: #28213f; }
  .key[aria-pressed="true"] small, .key.is-down small, .spot-row.is-hl small { color: #483459; }
}
@media (prefers-contrast: more) {
  :root { --line: var(--ink-3); --line-strong: var(--ink-2); }
  .hero__petals { opacity: 0.3; }
}
/* Keep the product demonstrations fully visible on narrow screens. */
.section__head h2 .dusk-text { display: block; }
@media (max-width: 620px) {
  .segmented button { flex: 1; padding: 10px 6px; font-size: 0.73rem; }
  .mock-context { left: 18px; top: 40%; width: calc(100% - 36px); font-size: 12px; }
  .mock-menu { right: 14px; width: min(270px, calc(100% - 28px)); font-size: 12px; }
  .mock-window { left: 18px; width: 78%; }
  .app-win__side { width: 100px; flex-shrink: 0; }
  .app-win__main { min-width: 0; padding: 10px; }
  .app-pane { inset: 10px; }
  .app-grid { gap: 5px; }
  .app-grid span { padding: 9px 5px; font-size: 11px; }
  .app-drop b { font-size: 13px; }
  .app-drop small { font-size: 11px; }
  .app-list div { padding: 6px; column-gap: 5px; }
  .app-list div b { font-size: 11px; }
  .app-list div small { font-size: 10px; overflow-wrap: anywhere; }
}

/* Brand geometry: five precise petal hues, with color anchored to the product. */
:root { --accent-ink: #fff; --petal-peach: #fff0e6; --petal-coral: #ffedf1; --petal-violet: #f1e7fc; --petal-blue: #e9edff; }
.nav__brand { gap: 9px; flex-shrink: 0; }
.nav__brand .brand-icon { width: 34px; height: 34px; }
.nav__brand .wordmark { width: 150px; height: auto; }
.footer .nav__brand .wordmark { width: 180px; }
.hero__brand { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.hero__brand .wordmark { width: 190px; height: auto; }
.hero__brand > span { border-left: 1px solid var(--line-strong); padding-left: 16px; font: 500 12px var(--font); letter-spacing: 0; color: var(--ink-2); text-transform: none; }
.hero__petals svg path:nth-child(1) { fill: var(--p1); }
.hero__petals svg path:nth-child(2) { fill: var(--p2); }
.hero__petals svg path:nth-child(3) { fill: var(--p3); }
.hero__petals svg path:nth-child(4) { fill: var(--p4); }
.hero__petals svg path:nth-child(5) { fill: var(--p5); }
.hero__file { border-bottom: 3px solid #5b6cf2; }
.hero__file--result { border-bottom-color: #e2409b; }
.eyebrow { color: var(--accent); }
.dusk-text { color: var(--accent); }
.step:nth-child(1) { border-top-color: #e5a17f; }
.step:nth-child(2) { border-top-color: #d56eac; }
.step:nth-child(3) { border-top-color: #8a78d5; }
.step:nth-child(1) .step__n { color: #a45c36; }
.step:nth-child(2) .step__n { color: #ae3e7d; }
.step:nth-child(3) .step__n { color: #7446b9; }
.tool:nth-child(6n+1) .tool__stage { background: var(--petal-peach); }
.tool:nth-child(6n+2) .tool__stage { background: var(--petal-coral); }
.tool:nth-child(6n+3) .tool__stage { background: var(--petal-violet); }
.tool:nth-child(6n+4) .tool__stage { background: var(--petal-blue); }
.tool:nth-child(6n+5) .tool__stage { background: var(--petal-violet); }
.tool:nth-child(6n+6) .tool__stage { background: var(--petal-coral); }
.demo-join i:nth-child(1) { --c: #ee9b7d; }
.demo-join i:nth-child(2) { --c: #cf69b2; }
.demo-join i:nth-child(3) { --c: #8271dc; }
.demo-trim__strip { background: repeating-linear-gradient(90deg, #edaa8c 0 13%, #fff0e6 13% 14%, #c994c9 14% 27%, #fff0e6 27% 28%, #9a8bda 28% 41%, #fff0e6 41% 42%); }
.mock { background: #19132f url(/assets/img/petal-wallpaper.jpg) center / cover; }
.privacy__mac { background: #19132f url(/assets/img/petal-wallpaper.jpg) center / cover; }
.orbit i:nth-child(1)::after { background: var(--p1); }
.orbit i:nth-child(2)::after { background: var(--p2); }
.orbit i:nth-child(3)::after { background: var(--p3); }
.orbit i:nth-child(4)::after { background: var(--p4); }
.orbit i:nth-child(5)::after { background: var(--p5); }
.price-card { background: var(--petal-peach); border-color: color-mix(in srgb, #ffa47a 35%, var(--line)); }
@media (prefers-color-scheme: dark) {
 :root { --accent-ink: #241536; --petal-peach: #362332; --petal-coral: #352039; --petal-violet: #2d2145; --petal-blue: #222c49; }
 .hero__petals svg { opacity: 1; }
 .hero__petals svg path { fill-opacity: 0.27; stroke: rgb(218 183 255 / 0.13); }
 .step:nth-child(1) .step__n { color: #ffa47a; }
 .step:nth-child(2) .step__n { color: #f094ca; }
 .step:nth-child(3) .step__n { color: #bda2f0; }
}
@media (max-width: 620px) {
 .nav__brand .wordmark { width: 128px; }
 .nav__brand .brand-icon { width: 29px; height: 29px; }
 .hero__brand .wordmark { width: 166px; }
 .hero__brand { gap: 12px; }
 .hero__brand > span { padding-left: 12px; }
}
@media (max-width: 360px) {
 .nav__inner { gap: 8px; }
 .nav__brand { gap: 6px; }
 .nav__brand .wordmark { width: 110px; }
 .nav__brand .brand-icon { width: 26px; height: 26px; }
 .nav .button { font-size: 0.8rem; }
}

/* Link downloads: the native workflow, with a local-only format preview. */
.section--downloads { background: var(--paper-2); border-block: 1px solid var(--line); }
.link-downloads { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 70px; }
.link-downloads h2 { margin-bottom: 24px; }
.link-downloads .lede { font-size: 1.1rem; }
.download-platforms { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0 30px; }
.download-platforms li { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: 550 0.78rem var(--font); }
.download-platforms li:nth-child(1) { border-bottom: 2px solid var(--p2); }
.download-platforms li:nth-child(2) { border-bottom: 2px solid var(--p5); }
.download-platforms li:nth-child(3) { border-bottom: 2px solid var(--p4); }
.download-platforms li:nth-child(4) { border-bottom: 2px solid var(--p3); }
.download-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.download-benefits strong { display: block; font-size: 0.98rem; font-weight: 600; margin-bottom: 5px; }
.download-benefits span { display: block; color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }
.download-shortcut { margin: 28px 0 12px; font-size: 0.85rem; color: var(--ink-2); line-height: 1.8; }
.download-help { font-size: 0.88rem; font-weight: 550; }
.download-preview-wrap { min-width: 0; }
.download-preview { border: 1px solid var(--line-strong); border-radius: 18px; background: var(--card); overflow: hidden; box-shadow: var(--shadow-lg); }
.download-preview .mock-window__bar { height: 42px; background: var(--paper); }
.download-preview .mock-window__bar span { font-size: 12px; }
.download-preview__body { padding: 28px; }
.download-preview__intro { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.download-preview__intro > span { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; background: var(--accent-soft); color: var(--accent); border-radius: 50%; font-size: 28px; }
.download-preview__intro h3 { font-size: 1.1rem; }
.download-preview__intro p { font-size: 0.72rem; color: var(--ink-3); margin-top: 5px; }
.download-preview__label { font-size: 0.82rem; font-weight: 600; margin-bottom: 8px; }
.download-preview__url { padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; font: 0.78rem var(--font-mono); color: var(--ink-2); background: var(--paper); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.download-format { display: flex; gap: 5px; padding: 4px; margin: 20px 0 10px; background: var(--paper-2); border-radius: 10px; }
.download-format button { flex: 1; padding: 12px 8px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--ink-2); font: 600 0.88rem var(--font); cursor: pointer; transition: background 180ms, color 180ms; }
.download-format button span { font-weight: 400; margin-left: 5px; }
.download-format button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.download-preview__description { min-height: 44px; color: var(--ink-2); font-size: 0.79rem; line-height: 1.5; }
.download-preview__folder { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.download-preview__folder strong { font-weight: 500; }
.download-preview__folder-note { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.72rem; }
.download-output { display: flex; gap: 16px; align-items: center; min-height: 80px; }
.download-output__file { flex-shrink: 0; display: grid; place-items: end center; width: 58px; height: 74px; border: 1px solid var(--line-strong); border-bottom: 3px solid var(--p3); border-radius: 6px 18px 6px 6px; background: var(--paper-2); padding-bottom: 12px; font: 600 11px var(--font-mono); color: var(--accent); }
[data-format="mp4"] .download-output__file { border-bottom-color: var(--p5); }
.download-output small, .download-output strong, .download-output > div > span { display: block; }
.download-output small { color: var(--ink-3); font-size: 0.7rem; margin-bottom: 4px; }
.download-output strong { font: 550 0.85rem var(--font-mono); }
.download-output > div > span { color: var(--ink-2); font-size: 0.75rem; margin-top: 5px; }
.download-preview__note { text-align: center; margin: 18px 0 12px; color: var(--ink-2); font-size: 0.73rem; }
.download-preview__limits { margin: 0 auto; max-width: 420px; text-align: center; color: var(--ink-3); font-size: 0.75rem; line-height: 1.6; }
@media (max-width: 960px) {
 .link-downloads { grid-template-columns: 1fr; gap: 40px; }
 .download-preview-wrap { max-width: 520px; width: 100%; margin: 0 auto; }
 .nav__links { display: none; }
 .nav .button { margin-left: auto; }
}
@media (max-width: 620px) {
 .download-preview__body { padding: 20px; }
 .download-preview__intro { gap: 8px; }
 .download-preview__intro > span { width: 32px; height: 32px; font-size: 24px; }
 .download-preview__intro h3 { font-size: 0.9rem; }
 .download-preview__intro p { font-size: 0.62rem; }
 .download-format button { font-size: 0.8rem; }
 .link-downloads .lede { font-size: 1rem; }
 .download-output { gap: 10px; }
 .download-output strong { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { .download-format button { transition: none; } }

/* The reason to own a native converter: keep the entire path on the Mac. */
.section--local { border-top: 1px solid var(--line); }
.section--local .section__head .lede { max-width: 760px; }
.local-comparison { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; }
.local-route { border: 1px solid var(--line); border-radius: 18px; padding: 30px; min-width: 0; }
.local-route--web { background: var(--paper-2); }
.local-route--mac { background: var(--card); border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); }
.local-route__heading { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.local-route__heading h3 { font-size: 1rem; font-weight: 600; }
.local-route__number { font: 500 11px var(--font-mono); color: var(--ink-3); margin-right: 4px; }
.local-offline { margin-left: auto; padding: 5px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.local-search { display: flex; align-items: center; gap: 10px; padding: 13px 14px; margin: 28px 0; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink-2); font: 0.85rem var(--font-mono); }
.local-search svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.local-web-steps { padding: 0; list-style: none; counter-reset: web-step 1; display: grid; gap: 20px; margin: 0; }
.local-web-steps li { position: relative; padding-left: 30px; }
.local-web-steps li::before { counter-increment: web-step; content: "0" counter(web-step); position: absolute; left: 0; top: 2px; color: var(--ink-3); font: 11px var(--font-mono); }
.local-web-steps strong { display: block; font-size: 0.88rem; font-weight: 550; }
.local-web-steps span { display: block; font-size: 0.8rem; color: var(--ink-2); margin-top: 4px; }
.local-conversion { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 34px 0 24px; }
.local-document { display: grid; place-items: end center; width: 65px; height: 84px; padding-bottom: 14px; border: 1px solid var(--line-strong); border-bottom: 3px solid var(--p5); border-radius: 7px 20px 7px 7px; background: var(--paper-2); color: var(--ink-2); font: 600 12px var(--font-mono); }
.local-document--result { border-bottom-color: var(--p3); background: var(--petal-coral); color: var(--accent); }
.local-conversion__arrow { color: var(--ink-3); font-size: 22px; }
.local-pinwheel { flex-shrink: 0; }
.local-route__promise { text-align: center; font: 600 1.5rem var(--font-display); letter-spacing: -0.025em; margin: 0 0 12px; }
.local-route__description { max-width: 370px; margin: 0 auto; color: var(--ink-2); font-size: 0.9rem; text-align: center; line-height: 1.65; }
.local-route__link { display: block; text-align: center; margin: 22px 0 0; font-size: 0.88rem; font-weight: 550; }
.local-principles { max-width: var(--max); margin: 40px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; }
.local-principles h3 { font-size: 1rem; margin-bottom: 10px; }
.local-principles p { color: var(--ink-2); font-size: 0.9rem; line-height: 1.65; }
.local-network-note { max-width: var(--max); margin: 24px auto 0; color: var(--ink-3); font-size: 0.75rem; line-height: 1.6; }
@media (max-width: 960px) { .local-comparison { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
 .local-route { padding: 22px 18px; }
 .local-route__heading { flex-wrap: wrap; gap: 8px; }
 .local-offline { margin-left: 0; }
 .local-conversion { gap: 12px; }
 .local-pinwheel { width: 58px; height: 58px; }
 .local-document { width: 52px; height: 70px; font-size: 10px; }
 .local-search { font-size: 0.75rem; padding-inline: 10px; }
 .local-principles { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 360px) {
 .local-conversion { gap: 8px; }
 .local-pinwheel { width: 42px; height: 42px; }
 .local-document { width: 44px; height: 62px; }
 .local-conversion__arrow { font-size: 18px; }
}

/* The native comparison card plays the same drag → wheel → conversion story. */
.local-motion { margin: 14px 0 18px; position: relative; }
.local-motion__stage { display: block; width: 100%; max-width: 440px; margin: 0 auto; height: auto; overflow: visible; }
.local-motion .file__icon { width: 52px; height: 62px; filter: drop-shadow(0 3px 4px rgb(15 8 30 / .15)); }
.lm-wheel { transform-origin: 236px 106px; }
.lm-disc { fill: var(--glass-strong); stroke: var(--line-strong); stroke-width: 1; }
.lm-petal { fill: var(--paper-2); stroke: var(--line-strong); stroke-width: .75; }
.lm-hub { fill: var(--card); stroke: var(--line); }
.lm-label { fill: var(--ink); font: 600 11px var(--font-round); }
.lm-filename { fill: var(--ink-2); font: 11px var(--font); }
.lm-caption { fill: var(--ink-2); font: 500 12px var(--font); }
.lm-progress { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transform-origin: 236px 106px; transform: rotate(-90deg); }
.lm-check-disc { fill: var(--accent); }
.lm-check { fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lm-wheel, .lm-drag, .lm-cursor, .lm-processing, .lm-result, .lm-caption { opacity: 0; }
.local-motion__control { display: block; margin: 7px auto 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-3); background: none; font: 500 11px var(--font); cursor: pointer; }
.local-motion__control[hidden] { display: none; }
.local-motion__control:hover { color: var(--accent); border-color: var(--accent); }
.local-motion.is-reduced .lm-result, .local-motion.is-reduced .lm-caption--done { opacity: 1; }