/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.4s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }

/* Typography */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.18; }
.italic { font-style: italic; }
.lead {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 48ch;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  font-weight: 500;
}
.eyebrow.green { color: var(--accent-green-deep); }
.eyebrow.blue { color: var(--accent-blue-bright); font-weight: 600; }
.eyebrow.warm { color: var(--accent-warm-deep); }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; }

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
section { position: relative; }
.section-pad { padding: clamp(72px, 10vw, 140px) 0; }

/* Header — floating pill */
.site-header {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  pointer-events: none;
  transition: top 0.3s ease;
}
.site-header > .container {
  pointer-events: auto;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}
.site-header.scrolled .nav {
  background: rgba(247, 243, 236, 0.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-color: var(--border-soft);
  box-shadow: 0 1px 2px rgba(40, 32, 20, 0.05), 0 12px 40px rgba(40, 32, 20, 0.08);
}
[data-paper="white"] .site-header.scrolled .nav { background: rgba(253, 252, 249, 0.86); }
@media (max-width: 640px) {
  .site-header { top: 10px; padding: 0 28px; }
  .nav { padding: 8px 8px 8px 16px; gap: 12px; }
  .site-header .nav .btn-primary { gap: 0; padding: 8px 11px; }
  .site-header .nav .btn-primary .btn-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
}
.brand-group {
  display: inline-flex; align-items: center; gap: 12px;
}
.brand-mark {
  display: inline-flex; align-items: center;
  transition: transform 0.2s ease;
}
.brand-mark:hover {
  transform: scale(1.05);
}
.brand-mark img {
  display: block;
  height: 32px; width: auto;
}
.brand .brand-logo,
.brand img {
  height: 26px; width: auto;
}
.brand-sep {
  display: inline-block;
  width: 1px; height: 24px;
  background: var(--border-soft);
  box-shadow: 1px 0 0 var(--border);
}
@media (max-width: 640px) {
  .brand-group { gap: 10px; }
  .brand-mark img { height: 28px; }
  .brand img { height: 22px; }
  .brand-sep { height: 20px; }
}
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav .btn { padding: 7px 16px; font-size: 13px; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255,255,255,0.4);
}
.lang-switch button {
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 500;
  color: var(--ink-mute);
  transition: background-color 0.2s, color 0.2s;
}
.lang-switch button.active {
  background: var(--ink);
  color: var(--paper);
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  transition: transform 0.15s ease, background-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { transform: translateY(-1px); background: #000; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(26,26,26,0.04); }
.btn svg { width: 14px; height: 14px; }
.btn-icon { width: 18px; height: 18px; flex-shrink: 0; display: block; }

/* Marker underline — hand-drawn SVG */
.marker {
  position: relative;
  display: inline;
}
@media (min-width: 700px) {
  .marker { display: inline-block; white-space: nowrap; }
}
.marker::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.10em;
  height: 0.18em;
  background: var(--marker-color, var(--accent-green));
  -webkit-mask: url("../images/underline1.svg") center / 100% 100% no-repeat;
          mask: url("../images/underline1.svg") center / 100% 100% no-repeat;
  opacity: 0.92;
  z-index: -1;
  pointer-events: none;
}
.marker.blue { --marker-color: var(--accent-blue); }
.marker.warm { --marker-color: var(--accent-warm); }

/* Hero */
.hero {
  padding: 140px 0 0;
}
.hero .display.h1 {
  font-size: 68px;
  line-height: 1;
  letter-spacing: -1px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 em {
  font-style: italic;
  color: var(--ink);
}
.hero-sub {
  color: var(--ink-soft);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  max-width: 42ch;
  margin-bottom: 36px;
}
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.appstore-badge { display: inline-block; transition: transform 0.15s; }
.appstore-badge:hover { transform: translateY(-1px); }
.appstore-badge img { display: block; height: 48px; width: auto; }
.store-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-meta {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 12px;
}
.hero-meta .sep { opacity: 0.5; }

/* Hero visual */
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 4.2;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--paper-tint);
  box-shadow: var(--shadow-float);
}
.hero-visual .paint-bg {
  position: absolute; inset: 0;
  background: url("../images/monet-poppies.jpg") center/cover;
}
.hero-visual .paint-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,243,236,0.05) 0%, rgba(247,243,236,0.35) 100%);
}

/* Shared keyframes (pulse for green dot, fixPop for corrected text swap) */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
@keyframes fixPop {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Figma-anchored unit length on .hero-visual.
   Reference: Figma frame is 510×536. --scale is the rendered size of one Figma px
   at the current container width (1px at the 510px reference, clamped to 0.62–1.3px);
   every size below is written as calc(<figma-px> * var(--scale)).
   --scale is a LENGTH, not a unitless factor, on purpose: Firefox/Gecko does not
   support dividing a <length> by a <length> in calc(), so the natural
   `100cqw / 510px` silently invalidates the whole declaration there (keycap/pill
   collapse to their initial sizes). `100cqw / 510` is length÷number — supported
   everywhere — and yields the identical result. */
.hero-visual { container-type: inline-size; container-name: hero-visual; }
.hero-visual { --scale: clamp(0.62px, 100cqw / 510, 1.3px); }

/* Double-tap pill. Figma: top 49 / left 130 in 510×536; h 48, px 16, gap 17,
   bg rgba(245,241,232,0.7), border 2 #ece6d7, radius 8, backdrop-blur 2.
   The keycap (72px) overflows the pill (48px) vertically — that's intentional. */
.dt-pill {
  position: absolute;
  left: 25.5%; top: 12.5%;
  display: inline-flex; align-items: center;
  gap: calc(17 * var(--scale));
  height: calc(48 * var(--scale));
  padding: 0 calc(16 * var(--scale));
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid #ece6d7;
  border-radius: calc(8 * var(--scale));
  box-shadow: 0 calc(2 * var(--scale)) calc(8 * var(--scale)) rgba(26,26,26,0.08);
  z-index: 3;
  white-space: nowrap;
  overflow: visible;
}
.dt-pulse {
  width: calc(8 * var(--scale)); height: calc(8 * var(--scale));
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 calc(3 * var(--scale)) color-mix(in srgb, var(--accent-green) 25%, transparent);
  animation: pulse 2.4s infinite;
  flex-shrink: 0;
}
.dt-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(20 * var(--scale));
  color: #7a7468;
  line-height: 1;
}
.dt-keycap {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(72 * var(--scale));
  height: calc(72 * var(--scale));
  border-radius: calc(14 * var(--scale));
  background: linear-gradient(180deg, #ffffff 0%, #f6f0e3 100%);
  border: 1px solid var(--border);
  box-shadow: 0 calc(1 * var(--scale)) 0 rgba(26,26,26,0.14), inset 0 calc(-3 * var(--scale)) 0 rgba(0,0,0,0.05);
  font-family: var(--font-body);
  font-size: calc(32 * var(--scale));
  color: #000;
  font-weight: 500;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.dt-keycap.pressed {
  transform: translateY(calc(2 * var(--scale))) scale(0.97);
  box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 -1px 0 rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #f0e9dc 0%, #e7e0d1 100%);
}

/* ── OS-adaptive shortcut display ──────────────────────────────────────────
   Both shortcut variants live in the DOM (good for SEO / no-JS). Default =
   Windows variant visible; only a confirmed macOS desktop gets html.os-mac
   (set by the blocking <head> script), which flips which variant shows. */
.os-only-mac { display: none; }
html.os-mac .os-only-win { display: none; }
html.os-mac .os-only-mac { display: inline; }

/* The pill and how-step keycaps are inline-flex — restore that, not `inline`. */
.dt-pill.os-only-mac { display: none; }
html.os-mac .dt-pill.os-only-win { display: none; }
/* The 4-key combo is wider than a single keycap. Center it in the painting at
   every viewport width: pin left:0/right:0, size to content, and let auto margins
   distribute the slack equally — robust across the whole --scale clamp range
   (a fixed left % only centers in the scale's linear region, not at its clamps). */
html.os-mac .dt-pill.os-only-mac {
  display: inline-flex;
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
}
.how-step__keycap.os-only-mac { display: none; }
html.os-mac .how-step__keycap.os-only-win { display: none; }
html.os-mac .how-step__keycap.os-only-mac { display: inline-flex; }

/* The nav quick-download button is a flex pill — keep its Mac variant inline-flex
   (the generic os-only rule would set `inline` and break the icon/label layout). */
html.os-mac .btn.os-only-mac { display: inline-flex; }

/* Windows keycap shows the text "alt" (not the Mac ⌥ glyph) — smaller font. */
.dt-keycap--text { font-size: calc(26 * var(--scale)); letter-spacing: 0.01em; }
.how-step__keycap.dt-keycap--text { font-size: clamp(22px, 9cqw, 34px); }

/* Mac combo keycap: four standalone SQUARE keys (⌃ ⌥ ⌘ C) — no backing tray. */
.dt-keycap--combo {
  width: auto;
  height: auto;
  padding: 0;
  gap: calc(6 * var(--scale));
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.dt-keycap--combo.pressed {            /* keep the tray gone while the combo dips */
  background: none;
  box-shadow: none;
}
.dt-keycap--combo .dt-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(64 * var(--scale));
  height: calc(64 * var(--scale));
  border-radius: calc(12 * var(--scale));
  background: linear-gradient(180deg, #ffffff 0%, #f6f0e3 100%);
  border: 1px solid var(--border);
  box-shadow: 0 calc(1 * var(--scale)) 0 rgba(26,26,26,0.14), inset 0 calc(-2 * var(--scale)) 0 rgba(0,0,0,0.05);
  font-size: calc(30 * var(--scale));
  line-height: 1;
}
/* Combo in the how-step context: square keys sized to that section's scale. */
.how-step__keycap.dt-keycap--combo {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
}
.how-step__keycap.dt-keycap--combo .dt-key {
  width: clamp(44px, 16cqw, 56px);
  height: clamp(44px, 16cqw, 56px);
  font-size: clamp(18px, 7cqw, 26px);
}

/* Step 2 ("press the shortcut"): the keycap and the body card live in one flex
   column overlaying the painting. The keyzone flex-grows to fill whatever space
   the body leaves, so the keycap stays vertically centred in the *visible*
   painting strip no matter how tall the body text becomes (FR/EN, any wrap) —
   the cross-axis analogue of the hero pill's margin:auto. Replaces the old fixed
   `top: 32%`, which decentred the moment the body card grew. */
.how-step--stage .how-step__overlay {
  grid-column: 1; grid-row: 1;
  align-self: stretch;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.how-step--stage .how-step__keyzone {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-step--stage .how-step__body {
  align-self: stretch;   /* override generic align-self:end (cross axis under flex) */
}
.how-step--stage .how-step__keycap {
  position: static;
  transform: none;
}
.how-step--stage .how-step__keycap.pressed {
  transform: translateY(calc(2 * var(--scale))) scale(0.97);
}

/* Small secondary "other-OS" mention lines. */
.hero-sub__alt { display: block; margin-top: 0.5rem; font-size: 0.82em; opacity: 0.7; }
.how-step__alt { display: block; margin-top: 0.4rem; font-size: 0.88em; opacity: 0.68; }

/* Mail mock. Figma: position left 25 / right 26 (in 510 wide), full width 459,
   rounded-top-12, border 1 #c1c1c1. Base font-size 14px = 1em at Figma ref. */
.mail-mock {
  position: absolute;
  left: 4.9%; right: 5.1%;
  bottom: 0;
  background: #ffffff;
  border: 1px solid #c1c1c1;
  border-bottom: 0;
  border-radius: calc(12 * var(--scale)) calc(12 * var(--scale)) 0 0;
  overflow: hidden;
  box-shadow: 0 calc(-2 * var(--scale)) calc(12 * var(--scale)) rgba(26,26,26,0.06);
  font-size: calc(14 * var(--scale));
  line-height: 1.4;
  color: #2f2f2f;
  z-index: 2;
}
/* Topbar: pl-24 pr-12 py-12, bg #2f2f2f, title 14 medium white, icons gap-12. */
.mail-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.857em 0.857em 0.857em 1.714em;
  background: #2f2f2f;
  color: #ffffff;
}
.mail-topbar-title {
  font-weight: 500;
  font-size: 1em;
}
.mail-topbar-icons {
  display: inline-flex; align-items: center;
  gap: 0.857em;
  color: #ffffff;
}
/* Body: pt-12, gap-12 between sections, px-24, pb before toolbar = 16 (outer gap). */
.mail-body {
  display: flex; flex-direction: column;
  gap: 0.857em;
  padding: 0.857em 1.714em 1.143em;
}
.mail-fields {
  display: flex; flex-direction: column;
  gap: 0.571em; /* 8px */
}
.mail-field {
  display: flex; align-items: center;
  gap: 0.714em; /* 10px */
}
.mail-field-label {
  font-weight: 500;
  font-size: 0.857em; /* 12px */
  color: #2f2f2f;
}
.mail-chip {
  display: inline-flex; align-items: center;
  padding: 0.286em 0.571em; /* 4px 8px */
  font-size: 0.857em; /* 12px */
  font-weight: 500;
  border-radius: 4px;
  line-height: 1;
}
.mail-chip--to {
  background: rgba(41, 136, 203, 0.16);
  color: #2988cb;
}
.mail-chip--cc {
  background: rgba(129, 226, 124, 0.21);
  color: #24d17f;
}
.mail-divider {
  height: 1px;
  background: #e4e4e4;
  margin: 0; /* gap handled by parent mail-body */
}
.mail-subject {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.286em; /* 18px */
  color: #2f2f2f;
  line-height: 1.25;
}
.mail-text {
  position: relative;
  font-weight: 500;
  font-size: 1em; /* 14px */
  color: #2f2f2f;
  line-height: 1.4;
}
.mail-text p { margin: 0; position: relative; z-index: 1; }
.mail-text .mail-blank { line-height: 0.4em; height: 0.4em; }

/* OS-style drag-selection overlay. JS measures line rects at start of each
   selecting phase and generates .mail-selection__line children. */
.mail-selection {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.mail-selection__line {
  position: absolute;
  background: rgba(41, 136, 203, 0.22);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  border-radius: 1px;
  will-change: transform, opacity;
}
.mail-mock.is-selecting .mail-selection__line {
  animation: selFill 360ms ease-out both;
  animation-delay: var(--sel-delay, 0ms);
}
.mail-mock.has-selection .mail-selection__line {
  transform: scaleX(1);
  opacity: 1;
}
.mail-mock.is-fading-selection .mail-selection__line {
  animation: selFade 400ms ease-out forwards;
}
@keyframes selFill {
  from { transform: scaleX(0); opacity: 0.85; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes selFade {
  from { transform: scaleX(1); opacity: 1; }
  to { transform: scaleX(1); opacity: 0; }
}
.mail-attach {
  display: inline-flex; align-items: center;
  gap: 0.571em; /* 8px */
  flex-wrap: wrap;
}
.mail-attach-btn {
  display: inline-flex; align-items: center;
  gap: 0.286em; /* 4px */
  padding: 0.429em 0.714em; /* 6px 10px */
  background: #f3f3f3;
  border-radius: 4px;
  font-size: 0.714em; /* 10px */
  font-weight: 500;
  color: #2f2f2f;
}
.mail-chip-file {
  display: inline-flex; align-items: center;
  gap: 0.286em; /* 4px */
  padding: 0.429em 0.714em; /* 6px 10px */
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  font-size: 0.714em; /* 10px */
  font-weight: 500;
  color: #2f2f2f;
}
/* Toolbar: px-24 py-12, bg #f3f3f3 border-t #c1c1c1, groups gap-8, icons 16. */
.mail-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.571em;
  padding: 0.857em 1.714em;
  background: #f3f3f3;
  border-top: 1px solid #c1c1c1;
}
.mail-toolbar-group {
  display: inline-flex; align-items: center;
  gap: 0.571em;
  color: #2f2f2f;
}
.mail-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.143em; height: 1.143em; /* 16px */
  font-size: 1em;
  font-weight: 500;
  color: #2f2f2f;
}
.mail-ic-bold { font-weight: 700; font-family: var(--font-body); }
.mail-ic-italic { font-style: italic; font-family: var(--font-display); }
.mail-ic-under { text-decoration: underline; font-family: var(--font-body); }
/* Send button: px-12 py-6, bg #2988cb, text 14 medium white, radius 6. */
.mail-send {
  display: inline-flex; align-items: center;
  padding: 0.429em 0.857em; /* 6px 12px */
  background: #2988cb;
  color: #ffffff;
  font-size: 1em;
  font-weight: 500;
  border-radius: 0.429em; /* 6px */
  white-space: nowrap;
}

/* Typo words — wavy red underline + fix-swap state.
   No per-word blue highlight: the whole-body selection overlay handles that. */
.mail-text .tw {
  position: relative;
}
.mail-text .tw .fix { display: none; }
.mail-text .tw .bad {
  text-decoration: underline wavy #ff5f5f;
  text-decoration-thickness: 10%;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.18em;
  -webkit-text-decoration: underline wavy #ff5f5f;
  -webkit-text-decoration-thickness: 10%;
  -webkit-text-decoration-skip-ink: none;
}
.mail-mock.is-fixed .mail-text .tw .bad { display: none; }
.mail-mock.is-fixed .mail-text .tw .fix {
  display: inline;
  animation: fixPop 0.5s ease both;
}

/* Mouse cursor. Positioned absolutely inside .mail-mock; JS sets --cx/--cy
   and toggles .has-cursor to fade in / out. */
.mail-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(22 * var(--scale));
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--cx, 0px), var(--cy, 0px));
  transition: opacity 200ms ease, transform 1100ms cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 4;
  will-change: transform, opacity;
  filter: drop-shadow(0 calc(1 * var(--scale)) calc(2 * var(--scale)) rgba(0,0,0,0.2));
}
.mail-mock.has-cursor .mail-cursor {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dt-pulse { animation: none; }
  .dt-keycap { transition: none; }
  .mail-text .tw .bad { display: none; }
  .mail-text .tw .fix { display: inline; animation: none; }
  .mail-cursor,
  .mail-selection { display: none; }
}

/* Keycap demo (keycaps that press) */
.keycap-row {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 4px;
}
.keycap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f0e9dc 100%);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(26,26,26,0.12), inset 0 -2px 0 rgba(0,0,0,0.04);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  transition: transform 0.12s, box-shadow 0.12s;
}
.keycap.pressed {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 -1px 0 rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #f0e9dc 0%, #e7e0d1 100%);
}
/* How it works — illustration shadow extends past the body card on the flanks. */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(40px, 5vw, 64px);
}
.how-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
.how-step__illus {
  grid-column: 1; grid-row: 1;
  position: relative;
  width: 91%;                         /* ≈ 362/400 Figma — lets the shadow show on the flanks */
  aspect-ratio: 362 / 370;
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  background: url("../images/monet-poppies.jpg") center/cover;
  box-shadow: var(--shadow-illus);
  container-type: inline-size;
  container-name: how-illus;
  --scale: clamp(0.65px, 100cqw / 340, 1px);   /* length unit — see .hero-visual note (no length÷length, Firefox) */
}
.how-step__illus::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,243,236,0.04) 0%, rgba(247,243,236,0.18) 100%);
  pointer-events: none;
}
.how-step__body {
  grid-column: 1; grid-row: 1;
  align-self: end;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  padding: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.how-step__num {
  grid-column: 1; grid-row: 1;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.how-step__body h3 {
  grid-column: 2; grid-row: 1;
  margin: 0;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  color: var(--ink);
}
.how-step__body p {
  grid-column: 2; grid-row: 2;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.55;
}
/* Reuses .dt-keycap from the hero for identical gradient/shadow styling,
   overrides the scale-based sizing to land around ~88px at desktop.
   top: 32% centres the key in the *visible* painting area (above the body card),
   not in the illustration — the body covers roughly the bottom 36%. */
.how-step__keycap {
  position: absolute;
  top: 32%;
  left: 50%;
  --scale: 1px;   /* length unit — keep consistent with var(--scale) usages */
  transform: translate(-50%, -50%);
  width: clamp(64px, 25cqw, 92px);
  height: clamp(64px, 25cqw, 92px);
  font-size: clamp(32px, 13cqw, 48px);
  z-index: 3;
}
.how-step__keycap.pressed {
  transform: translate(-50%, -50%) translateY(calc(2 * var(--scale))) scale(0.97);
}
.how-step__badge {
  position: absolute;
  top: 20%;
  right: 9.5%;
  width: 14%;
  transform: rotate(-5.35deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.6, 0.64, 1);
  filter: drop-shadow(0 4px 8px rgba(47,47,47,0.12));
  z-index: 3;
}
.how-step__badge.is-shown {
  opacity: 1;
  transform: rotate(-5.35deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .how-step__badge {
    opacity: 1;
    transform: rotate(-5.35deg) scale(1);
    transition: none;
  }
}
/* Mini modifier — reuses .mail-mock styling from hero, overrides the
   absolute positioning to sit inside .how-step__illus. */
.how-step__illus .mail-mock.mini {
  left: 3.6%; right: 3.6%;
  top: 8.4%;
  bottom: 0;                  /* white fill extends to the illus bottom, body card covers it */
  border-radius: 12px 12px 0 0;
  box-shadow: 0 calc(-2 * var(--scale)) calc(12 * var(--scale)) rgba(26,26,26,0.06);
}
.how-step__illus .mail-mock.mini .mail-text { transition: opacity 0.5s ease; }
.how-step__illus .mail-mock.mini.is-clearing .mail-text { opacity: 0; }
.how-step__illus .mail-mock.mini .mail-text .tw .fix { animation: none; }

/* Section header */
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .eyebrow { margin-bottom: 4px; display: inline-block; }
.section-head h2 { max-width: 18ch; }
@media (min-width: 900px) {
  #how .section-head h2 { max-width: none; white-space: nowrap; }
}
.section-head p { max-width: 54ch; margin-top: 18px; color: var(--ink-soft); font-size: 17px; }

/* Feature row (alternating) */
.feature {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(72px, 11vw, 100px) 0;
}
.feature.reverse { grid-template-columns: 1.1fr 1fr; }
.feature.reverse .feature-text { order: 2; }
.feature-text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.12;
  margin-bottom: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.feature-text p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
  max-width: 48ch;
}
.feature-text .eyebrow { margin-bottom: 4px; display: inline-block; }
.feature-pills {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.feature-tones {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-width: 500px;
}
.feature-tones .tone-btn { width: 100%; }

/* Feature visual — painting + mockup */
.feature-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--paper-tint);
  box-shadow: var(--shadow-card);
}
.feature-visual .paint {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.feature-visual .paint.poppies { background-image: url("../images/monet-poppies.jpg"); }
.feature-visual .paint.field { background-image: url("../images/monet-field.jpg"); }
.feature-visual .paint.cliffs { background-image: url("../images/monet-cliffs.jpg"); }
.feature-visual .paint.bridge { background-image: url("../images/Monet-bridge.jpg"); }
.feature-visual .paint.potager { background-image: url("../images/MaxLiebermann-potager.webp"); }
.feature-visual .paint::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,243,236,0) 40%, rgba(247,243,236,0.25) 100%);
}
.feature-visual .local-ai-mockup {
  position: absolute;
  left: 34px;
  top: 51%;
  transform: translateY(-50%);
  width: auto;
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* SpellFix demo — shared app-window illustration for Correction, Reformulation, Translation */
.spellfix-demo {
  position: relative;
  aspect-ratio: 9 / 7;
}
.spellfix-demo--translate {
  aspect-ratio: 4 / 3;
}
.spellfix-demo__paint {
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--paper-tint);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
}
.spellfix-demo__paint.poppies { background-image: url("../images/monet-poppies.jpg"); }
.spellfix-demo__paint.field   { background-image: url("../images/monet-field.jpg"); }
.spellfix-demo__paint.cliffs  { background-image: url("../images/monet-cliffs.jpg"); }
.spellfix-demo__paint.bridge  { background-image: url("../images/Monet-bridge.jpg"); }
.spellfix-demo__paint::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,243,236,0) 40%, rgba(247,243,236,0.25) 100%);
}
/* Demo-card tokens — mirror Figma's `--basic-*` system. Shared with
   .feature-tones so its .tone-btn instances render identically. */
.spellfix-demo__frame,
.feature-tones {
  --demo-basic-20: #f9f9f9;
  --demo-basic-40: #e1e1e1;
  --demo-basic-50: #c1c1c1;
  --demo-basic-100: #2f2f2f;
  --demo-accent: var(--accent-green-deep);
  --demo-font-ui: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
.spellfix-demo__frame {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: 307px;
  background: rgba(253, 251, 247, 0.6);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--demo-basic-40);
  border-radius: 15px;
  box-shadow: var(--shadow-illus), inset 0 1px 0 rgba(255,255,255,0.8);
  padding: 12px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--demo-basic-100);
}
.spellfix-demo__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
}
.spellfix-demo__brand {
  display: inline-flex; align-items: center;
}
.spellfix-demo__brand img { height: 20px; width: auto; display: block; }
.spellfix-demo__cog { width: 16px; height: 16px; opacity: 0.7; display: block; }
.spellfix-demo__panel {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 8px;
}
.spellfix-demo__panel--bottom {
  background: linear-gradient(195deg, rgba(253,251,247,0.8), rgba(249,249,249,0.8));
  border: 0.75px solid var(--demo-basic-40);
  border-radius: 12px;
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.spellfix-demo__tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--demo-basic-40);
  background: var(--demo-basic-20);
  border-radius: 5px;
  padding: 1px;
  gap: 1px;
}
.spellfix-demo__tab {
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 11px;
  color: var(--demo-basic-100);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap;
}
.spellfix-demo__tab.is-active {
  background: linear-gradient(58deg, #fff 55%, var(--paper) 143%);
  color: var(--demo-basic-100);
  border: 0.75px solid var(--demo-basic-50);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(152,152,152,0.2), inset 0 -2px 1px rgba(113,113,113,0.11);
  font-weight: 400;
}
.spellfix-demo__langs {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px; align-items: stretch;
}
.spellfix-demo__select {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 4px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--demo-basic-50);
  border-radius: 6px;
  font-family: var(--demo-font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--demo-basic-100);
  box-shadow: inset 0 -2px 1px 0 rgba(109,109,109,0.12);
}
.spellfix-demo__select--dst { width: 100%; }
.spellfix-demo__select .caret {
  flex: none;
  color: var(--demo-basic-100);
}
.spellfix-demo__swap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px;
  background: #fff;
  border: 1px solid var(--demo-basic-50);
  border-radius: 6px;
  color: var(--demo-basic-100);
  box-shadow: inset 0 -2px 1px 0 rgba(109,109,109,0.12);
}
.spellfix-demo__swap svg { display: block; }
.spellfix-demo__input,
.spellfix-demo__output {
  background: linear-gradient(187deg, #fff 3%, var(--paper) 85%);
  border: 0.75px solid var(--demo-basic-50);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(152,152,152,0.2), inset 0 1px 1px rgba(255,255,255,0.6);
  padding: 8px 12px;
  font-family: var(--demo-font-ui);
  font-size: 14px;
  line-height: 1.1;
  color: var(--demo-basic-100);
  height: 86px;
  min-height: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
}
.spellfix-demo__output {
  color: var(--demo-accent);
  font-weight: 400;
}
.spellfix-demo--translate .spellfix-demo__output {
  color: var(--demo-basic-100);
}
.spellfix-demo--translate .spellfix-demo__panel--bottom {
  gap: 8px;
}
.spellfix-demo__tones {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px;
}
/* Demo chip — shared base for static tones, interactive tone-btns, and copy */
.spellfix-demo__tone,
.tone-btn,
.spellfix-demo__copy {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 6px 14px;
  background: linear-gradient(to bottom, #fff, #fcfcfc);
  border: 1px solid var(--demo-basic-50);
  border-radius: 6px;
  font-family: var(--demo-font-ui);
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: var(--demo-basic-100);
  box-shadow:
    inset 0 -2px 1px 0 rgba(109,109,109,0.12),
    inset 0 2px 1px 0 rgba(255,255,255,0.11),
    inset 1px 1px 0.25px 0 rgba(255,255,255,0.3);
}
.spellfix-demo__tone--full { grid-column: 1 / -1; }
.spellfix-demo__copy { align-self: flex-end; }

.tone-btn {
  appearance: none;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.tone-btn:hover {
  background: var(--demo-basic-20);
  box-shadow: inset 0 -2px 1px 0 rgba(109,109,109,0.12);
}
.tone-btn:active {
  background: #fff;
  box-shadow: none;
}
.tone-btn:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}
.tone-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; flex: none; }
.tab-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -1px; flex: none; }

/* Non-interactivity for visual-only controls */
.spellfix-demo__tabs,
.spellfix-demo__langs,
.spellfix-demo__copy,
.spellfix-demo:not(.spellfix-demo--tones) .spellfix-demo__tones {
  pointer-events: none;
  user-select: none;
}

.feature-pills .pill {
  cursor: default;
  width: 48px;
  padding: 2px 8px;
  justify-content: center;
  background: rgba(255,255,255,0.4);
  border-color: var(--border);
  color: var(--ink-mute);
  line-height: 26px;
}
.feature-pills .pill .tone-ico { margin-right: 2px; }

/* Pricing */
.pricing-head { text-align: center; }
.pricing-head h2 { margin-left: auto; margin-right: auto; }
.pricing-cards {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--paper);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card .features-list { flex: 1 1 auto; }
.card.pro {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card.pro::before {
  content: "";
  background-color: #F7F3EC;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }
.ribbon {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ribbon img { width: 15px; height: 15px; display: block; }
.card h3 .pro-icon { display: inline-block; vertical-align: -4px; margin-left: 4px; width: 22px; height: 22px; }
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 10px;
}
.price {
  font-family: var(--font-display);
  font-size: clamp(72px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.price small {
  font-size: 0.3em;
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-style: normal;
  margin-left: 4px;
}
.price-suffix {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-mute);
  margin-left: 8px;
  align-self: flex-end;
  padding-bottom: 14px;
}
.price-sub { font-size: 13px; color: var(--ink-mute); margin-top: 8px; }
.features-list {
  margin: 26px 0 28px;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.features-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px;
  color: var(--ink);
}
.features-list li.muted { color: var(--ink-mute); }
.features-list .check { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; display: block; }
.features-list .dash { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; display: block; }
.card .btn { width: 100%; justify-content: center; padding: 14px; }
.card.pro .btn-ghost { background: var(--paper); }
.card.pro .btn-ghost:hover { background: #fff; }
.pricing-sub {
  text-align: center;
  max-width: 660px;
  margin: 32px auto 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 22px 4px;
}
.faq details[open] { padding-bottom: 26px; }
.faq summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--ink);
  cursor: pointer;
  font-weight: 400;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: inline-block;
  color: var(--ink-mute);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.faq summary .chev::before,
.faq summary .chev::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.faq summary .chev::before {
  width: 10px; height: 1.5px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq summary .chev::after {
  width: 1.5px; height: 10px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease 0.1s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq details[open] summary .chev {
  transform: rotate(180deg);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.faq details[open] summary .chev::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}
.faq details p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
  max-width: 68ch;
}

/* Closing hero — big wordmark with painting clip */
.closing {
  padding: clamp(72px, 9vw, 120px) 0 0;
  text-align: center;
}
.closing h2 { max-width: 20ch; margin: 0 auto 40px; }
.bigmark {
  font-family: var(--font-display);
  font-size: clamp(96px, 22vw, 320px);
  line-height: 0.9;
  letter-spacing: -12px;
  background-image: url("../images/monet-field.jpg");
  background-size: cover;
  background-position: center 40%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-style: italic;
  padding: 0 20px;
  margin-top: 24px;
  margin-bottom: -0.35em;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 640px) {
  .bigmark { letter-spacing: -4px; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 40px;
  position: relative;
  z-index: 2;
  background: var(--paper);
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--ink); font-size: 15px; }
.footer-col a:hover { color: var(--accent-green-deep); }
.footer-about p { color: var(--ink-soft); font-size: 14px; max-width: 30ch; margin-top: 10px; }
.footer-about .brand { margin-bottom: 4px; }
.footer-bottom {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--ink-mute);
  font-size: 13px;
  flex-wrap: wrap; gap: 10px;
}

/* Doc pages — support, privacy */
.doc-page {
  padding: clamp(120px, 14vw, 180px) 0 clamp(64px, 8vw, 96px);
}
.doc-hero {
  max-width: 820px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: left;
}
.doc-hero .eyebrow { display: inline-block; margin-bottom: 12px; }
.doc-hero h1 { margin-bottom: 18px; }
.doc-hero p {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
.doc-meta {
  display: flex; gap: 14px; align-items: center;
  margin-top: 18px;
  color: var(--ink-mute);
  font-size: 14px;
}
.doc-meta .sep { opacity: 0.5; }
.doc-body {
  max-width: 720px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.7;
}
.doc-body > * + * { margin-top: 18px; }
.doc-body :is(h2, h3),
.doc-section-head h2 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.015em;
  font-weight: 400;
  line-height: 1.18;
}
.doc-body h2 {
  font-size: clamp(26px, 2.4vw, 32px);
  margin: 56px 0 14px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 32px 0 10px;
}
.doc-body a { color: var(--accent-blue-bright); border-bottom: 1px solid currentColor; }
.doc-body a:hover { color: var(--accent-green-deep); }
.doc-body strong { color: var(--ink); font-weight: 500; }
.doc-body ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.doc-body ul li {
  position: relative;
  padding-left: 22px;
}
.doc-body ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-warm);
}
.doc-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}
.doc-contact-card {
  margin-top: 32px;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doc-contact-card .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.doc-contact-card a {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  color: var(--ink);
  font-style: italic;
}
.doc-contact-card a:hover { color: var(--accent-green-deep); }
.doc-contact-card small {
  color: var(--ink-mute);
  font-size: 13px;
  margin-top: 4px;
}

.doc-section { max-width: 820px; margin: 0 auto; }
.doc-section + .doc-section { margin-top: clamp(48px, 7vw, 80px); }
.doc-section-head {
  margin-bottom: 24px;
}
.doc-section-head .eyebrow { display: inline-block; margin-bottom: 8px; }
.doc-section-head h2 {
  font-size: clamp(28px, 3vw, 38px);
  margin: 0;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: 2; }
  .how-grid { grid-template-columns: 1fr; gap: 48px; }
  .how-step__illus { aspect-ratio: 362 / 300; }
  .feature,
  .feature.reverse { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .feature.reverse .feature-text { order: 1; }
  .feature-visual,
  .spellfix-demo { order: 2; }
  .spellfix-demo,
  .spellfix-demo--translate {
    aspect-ratio: auto;
    padding: 24px 0;
  }
  .spellfix-demo__frame {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
    width: min(82%, 307px);
  }
  .pricing-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}