/* Invenva marketing site. Mirrors the app's design language: flat surfaces,
   one monochrome accent, hairline dividers, capsule controls, spring-like
   motion. No cards stacked on cards, no colour except for status.
   Sep 11 2026 pass: the page is FLAT again. Feature and problem grids lost
   their boxes (hairlines separate, whitespace groups), the audience marquee
   became one quiet line, the hero glow is gone, and every App Store link is
   Apple's own badge. Dead hero layers (v1 phones, v2 centred frame) removed.
   The marketing site is LIGHT ONLY (owner-decided Sep 11 2026): a white page
   is what the shop software this audience already trusts looks like, and one
   theme means one set of screenshots and one set of colours to get right.
   The web app under /app/ keeps following the system theme. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --ink: #0a0a0a;
  --ink-2: #2c2c2e;
  --muted: #6e6e73;
  --faint: #aeaeb2;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.2);
  --inverse: #ffffff;
  --fill: linear-gradient(180deg, #2b2b2b 0%, #0a0a0a 100%);
  --fill-flat: #0a0a0a;
  --phone-body: #0d0d0d;
  --phone-edge: rgba(255, 255, 255, 0.09);
  --shadow-phone: 0 60px 90px -40px rgba(0, 0, 0, 0.42), 0 24px 40px -24px rgba(0, 0, 0, 0.3);
  --positive: #34c759;
  --max: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.44, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(ja) body, :lang(zh-Hans) body, :lang(zh-Hant) body, :lang(ko) body { letter-spacing: 0; }
:lang(ja) .display, :lang(zh-Hans) .display, :lang(zh-Hant) .display, :lang(ko) .display { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.16; letter-spacing: 0; }
:lang(ja) .title, :lang(zh-Hans) .title, :lang(zh-Hant) .title, :lang(ko) .title { line-height: 1.2; letter-spacing: 0; }
:lang(ko) .display, :lang(ko) .title, :lang(ko) .subtitle { word-break: keep-all; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; overflow-wrap: anywhere; }
ul { margin: 0; padding: 0; list-style: none; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--fill-flat); color: var(--inverse); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.shell { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.shell-narrow { width: min(100% - var(--gutter) * 2, 820px); margin-inline: auto; }

/* Typography ------------------------------------------------------------- */
.display { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04; font-weight: 700; letter-spacing: -0.045em; text-wrap: balance; }
.title { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.subtitle { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; font-weight: 650; letter-spacing: -0.025em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--line-strong); }
:lang(ja) .eyebrow, :lang(zh-Hans) .eyebrow, :lang(zh-Hant) .eyebrow, :lang(ko) .eyebrow, :lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; }
.lead { color: var(--muted); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; max-width: 640px; }
.lead strong { color: var(--ink); font-weight: 600; }

/* Buttons ---------------------------------------------------------------- */
.button {
  --pad: 22px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 var(--pad);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--fill);
  color: var(--inverse);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 260ms var(--spring), opacity 200ms var(--ease), background-color 200ms var(--ease);
  will-change: transform;
}
.button:hover { transform: translateY(-1px) scale(1.01); }
.button:active { transform: scale(0.985); }
.button svg { width: 18px; height: 18px; flex: none; }
.button-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button-quiet:hover { border-color: var(--ink); }
.button-ghost { background: transparent; color: var(--muted); border-color: transparent; padding-inline: 12px; }
.button-ghost:hover { color: var(--ink); transform: none; }
.button-large { min-height: 56px; --pad: 26px; font-size: 17px; }

/* App Store badge + rating laurel ----------------------------------------- */
/* Apple's official artwork, never redrawn or recoloured. The link is the
   whole image; the image carries the localized label as alt text. */
.store-badge { display: inline-flex; flex: none; border-radius: 8px; line-height: 0; transition: transform 260ms var(--spring), opacity 200ms var(--ease); }
.store-badge img { width: auto; height: auto; max-width: none; }
.store-badge:hover { transform: translateY(-1px) scale(1.01); }
.store-badge:active { transform: scale(0.985); }
.store-badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Badge and laurel are the SAME height (44px), so the pair reads as two
   equal marks, not a big one and a small one. */
.store-proof { display: inline-flex; align-items: center; gap: 22px; }
.laurel { display: inline-flex; align-items: center; height: 44px; color: var(--ink); }
.laurel-branch { width: 27px; height: 44px; flex: none; fill: currentColor; }
.laurel-branch:last-child { transform: scaleX(-1); }
.laurel-body { display: grid; justify-items: center; gap: 3px; min-width: 50px; }
.laurel-body strong { font-size: 21px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.laurel-stars { display: inline-flex; gap: 1px; }
.laurel-stars svg { width: 9px; height: 9px; fill: currentColor; }

/* Header ----------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 60; transition: background-color 260ms var(--ease), border-color 260ms var(--ease); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom-color: var(--line); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
.header-row { min-height: 68px; display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.brand-mark { width: 24px; height: 30px; object-fit: contain; }
.brand-mark { filter: brightness(0); }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 8px; }
.nav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 160ms var(--ease), background-color 160ms var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { background: var(--bg-soft); }
.nav .nav-cta { display: none; }
.header-tools { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.language-wrap { position: relative; display: inline-flex; align-items: center; }
.language-wrap svg { position: absolute; inset-inline-start: 10px; width: 16px; height: 16px; pointer-events: none; color: var(--muted); }
.language-select { appearance: none; -webkit-appearance: none; max-width: 112px; min-height: 36px; padding: 0 8px 0 28px; text-overflow: ellipsis; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; }
[dir="rtl"] .language-select { padding: 0 34px 0 14px; }
.language-select:hover { color: var(--ink); border-color: var(--line); }
.header-signin { min-height: 40px; font-size: 14px; }
.header-cta { min-height: 40px; --pad: 16px; font-size: 14px; }
.menu-button { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; place-items: center; }
.menu-button svg { width: 18px; height: 18px; }
.menu-button .icon-close { display: none; }
.menu-button[aria-expanded="true"] .icon-menu { display: none; }
.menu-button[aria-expanded="true"] .icon-close { display: block; }

/* Language suggestion: a small pill at the foot of the viewport, never a
   strip above the header (owner, Sep 11 2026: the strip "was disturbing").
   Still a suggestion, never a redirect. */
.lang-banner { display: none; position: fixed; inset-inline: 0; bottom: 18px; z-index: 80; padding-inline: var(--gutter); pointer-events: none; }
.lang-banner.is-visible { display: flex; justify-content: center; }
.lang-banner-row { display: inline-flex; align-items: center; gap: 12px; width: auto; max-width: 100%; margin: 0; padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.35); font-size: 14px; color: var(--muted); pointer-events: auto; }
.lang-banner-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-banner a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.lang-banner button { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.lang-banner button:hover { color: var(--ink); background: var(--bg-soft); }
.lang-banner button svg { width: 14px; height: 14px; }
@media (max-width: 720px) { .lang-banner-row span { white-space: normal; } }

/* Phone frame ------------------------------------------------------------ */
.phone {
  --phone-w: 300px;
  position: relative;
  width: var(--phone-w);
  padding: calc(var(--phone-w) * 0.03);
  border-radius: calc(var(--phone-w) * 0.17);
  background: var(--phone-body);
  box-shadow: var(--shadow-phone), inset 0 0 0 1px var(--phone-edge);
  flex: none;
}
/* The screen keeps the capture's exact 1206×2622 ratio, so nothing is cropped
   or squeezed: the frame wraps the image, never the other way round. */
.phone picture { display: block; width: 100%; aspect-ratio: 1206 / 2622; }
.phone img { width: 100%; height: 100%; object-fit: fill; border-radius: calc(var(--phone-w) * 0.145); background: #000; }

/* MacBook frame ---------------------------------------------------------- */
.mac { position: relative; margin-inline-end: 34px; }
.mac-screen { position: relative; padding: 12px 10px 12px; border-radius: 16px 16px 4px 4px; background: #101012; box-shadow: var(--shadow-phone), inset 0 0 0 1px var(--phone-edge); }
.mac-cam { position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #2c2c30; }
.mac-screen picture { display: block; aspect-ratio: 2880 / 1800; border-radius: 6px; overflow: hidden; background: #000; min-width: 0; }
.mac-screen img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.mac-base { position: relative; height: 13px; margin: 0 -4.5%; border-radius: 2px 2px 12px 12px; background: linear-gradient(#2b2b2f, #17171a); box-shadow: 0 34px 50px -30px rgba(0, 0, 0, 0.6); }
.mac-base::after { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 4px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #0b0b0c; }

/* Hero: copy left, a MacBook + iPhone composition right, two callouts ---- */
.hero { position: relative; padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 110px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-copy-col { display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy { max-width: 520px; margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }
.hero-visual { position: relative; min-width: 0; }
.device-stage { position: relative; width: min(100%, 700px); margin-inline: auto; padding: 36px 0 34px; }
.device-stage .hero-phone { display: block; position: absolute; inset-inline-end: 0; bottom: 0; --phone-w: 138px; animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* The proof line belongs to the product, not to the copy: badge and rating
   centred under the devices, so the left column stays message + actions. */
.hero-proof { display: flex; justify-content: center; margin-top: 30px; }

/* Sections --------------------------------------------------------------- */
.section { padding: clamp(64px, 9vw, 130px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .lead { margin-top: 18px; }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head.is-centered .lead { margin-inline: auto; }

/* Problems: three quoted pains, each answered. Columns, not boxes. -------- */
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
/* Whitespace separates the columns; a rule above each one read as an empty
   line (owner, Sep 11 2026). */
.problem { display: grid; align-content: start; gap: 14px; }
.problem-pain { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.problem-pain::before { content: "\201C"; color: var(--faint); margin-inline-end: 2px; }
.problem-pain::after { content: "\201D"; color: var(--faint); margin-inline-start: 2px; }
.problem-fix { color: var(--muted); font-size: 16.5px; line-height: 1.6; }

/* Story (sticky phone + steps) ------------------------------------------- */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.story-steps { display: grid; }
.story-step { position: relative; min-height: 56vh; display: grid; align-content: center; padding-block: 6vh; transition: opacity 400ms var(--ease); }
.story-step:not(.is-active) { opacity: 0.38; }
.story-step:first-child { min-height: 40vh; padding-top: 2vh; }
.story-step-index { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 22px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease); }
.story-step.is-active .story-step-index { background: var(--fill-flat); color: var(--inverse); border-color: transparent; }
.story-step p { margin-top: 14px; color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 460px; }
.story-step .phone { display: none; }
.story-stage { position: sticky; top: clamp(60px, 10vh, 110px); display: grid; place-items: center; height: min(82vh, 760px); }
.story-stage .phone { --phone-w: clamp(250px, 28vw, 320px); }
.story-shots { position: relative; width: 100%; aspect-ratio: 1206 / 2622; }
.story-shot { position: absolute; inset: 0; opacity: 0; transform: scale(0.985) translateY(10px); transition: opacity 520ms var(--ease), transform 640ms var(--spring); }
.story-shot.is-active { opacity: 1; transform: none; }
.story-shot img { width: 100%; height: 100%; object-fit: fill; }
.story-progress { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.story-progress span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: width 300ms var(--spring), background-color 300ms var(--ease); }
.story-progress span.is-active { width: 22px; background: var(--ink); }

/* Everywhere: the web app and the phone side by side ---------------------- */
.everywhere-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: end; margin-top: clamp(28px, 4vw, 48px); }
.everywhere-grid .mac { margin-inline-end: 0; }
.everywhere-grid .mac-base { margin: 0 -3%; }
.everywhere-phone { --phone-w: clamp(200px, 20vw, 250px); margin-inline: auto; }
/* Action, then the proof line under it: a capsule and a rectangle never
   share a row. */
.everywhere-actions { display: grid; justify-items: center; gap: 22px; margin-top: clamp(32px, 4vw, 48px); }

/* Feature grid: a flat grid of eight, no boxes, no rules ------------------ */
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.feature { display: grid; align-content: start; gap: 12px; }
.feature-icon { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 2px; color: var(--ink); }
.feature-icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.feature p { color: var(--muted); font-size: 15.5px; line-height: 1.5; }

/* Audiences: one quiet line, wrapping, no motion --------------------------- */
.audiences { padding-block: clamp(56px, 7vw, 96px); }
.audiences .section-head { margin-bottom: 0; }
/* Two centred rows, a dot between neighbours. Rows are split in the
   generator so a dot never opens a line. */
.audience-rows { display: grid; gap: 12px; margin-top: 28px; }
.audience-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; color: var(--ink-2); font-size: 17px; font-weight: 500; }
.audience-list li { display: inline-flex; align-items: center; }
.audience-list li + li::before { content: ""; width: 4px; height: 4px; margin-inline: 16px; border-radius: 50%; background: var(--faint); }

/* Pricing ---------------------------------------------------------------- */
.plan-toggle { display: flex; width: max-content; gap: 4px; padding: 4px; margin: 0 auto 26px; border: 1px solid var(--line); border-radius: 999px; }
.plan-toggle button { min-height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 180ms var(--ease), color 180ms var(--ease); }
.plan-toggle button.is-active { background: var(--fill-flat); color: var(--inverse); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 22px; padding: clamp(26px, 3.2vw, 40px); border: 1px solid var(--line); border-radius: 28px; background: var(--bg); }
.plan-pro { background: var(--fill); color: var(--inverse); border-color: transparent; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.plan-name { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.plan-pro .plan-name { color: color-mix(in srgb, var(--inverse) 70%, transparent); }
.plan-badge { padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--inverse) 28%, transparent); font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--inverse) 80%, transparent); }
.plan-price { display: flex; align-items: baseline; gap: 8px; row-gap: 6px; flex-wrap: wrap; min-height: 60px; }
.plan-price strong { font-size: clamp(40px, 5vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan-price span { color: var(--muted); font-size: 16px; }
.plan-price[data-plan-short] { margin-bottom: 0; }
.plan-pro .plan-price span { color: color-mix(in srgb, var(--inverse) 70%, transparent); }
.plan-compare { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-top: -10px; }
.plan-was { color: color-mix(in srgb, var(--inverse) 45%, transparent); font-size: 15px; font-weight: 500; text-decoration-thickness: 1.5px; }
.plan-save { padding: 3px 8px; border-radius: 999px; background: var(--inverse); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; }
.plan-tagline { min-height: 26px; font-size: 17px; font-weight: 500; }
.plan-sub { min-height: 22px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.plan-pro .plan-sub { color: color-mix(in srgb, var(--inverse) 72%, transparent); }
.plan-list { display: grid; gap: 12px; flex: 1; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.plan-pro .plan-list { border-top-color: color-mix(in srgb, var(--inverse) 16%, transparent); }
.plan-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; }
.plan-list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.plan .button { width: 100%; margin-top: auto; }
.plan-pro .button { background: var(--inverse); color: var(--ink); }
.pricing-note { margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 760px; }

/* FAQ -------------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.015em; }
.faq-item summary:hover { color: var(--ink-2); }
.faq-item summary::after { content: ""; flex: none; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23808080' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E"); transition: transform 360ms var(--spring), background-color 200ms var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 24px; max-width: 720px; color: var(--muted); font-size: 16.5px; line-height: 1.6; }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

/* Final CTA -------------------------------------------------------------- */
.cta { padding: clamp(80px, 11vw, 150px) 0; text-align: center; }
.cta .lead { margin: 18px auto 34px; }
.cta-actions { display: grid; justify-items: center; gap: 22px; }

/* Footer ----------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 64px) 0 40px; color: var(--muted); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr)); gap: 36px; }
.footer-brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.footer-brand .brand { color: var(--ink); }
.footer-brand p { max-width: 320px; line-height: 1.5; }
.footer-col h4 { margin-bottom: 14px; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }

/* Inner pages ------------------------------------------------------------ */
.page-hero { padding: clamp(56px, 8vw, 110px) 0 clamp(36px, 5vw, 64px); }
.page-hero .lead { margin-top: 20px; }
.legal-wrap { width: min(100% - var(--gutter) * 2, 760px); margin: 0 auto; padding: clamp(56px, 8vw, 96px) 0 120px; }
.legal-updated { margin-top: 14px; color: var(--muted); font-size: 14px; }
.legal-lead { margin-top: 28px; color: var(--muted); font-size: 19px; line-height: 1.55; }
.legal-section { padding: 32px 0; border-top: 1px solid var(--line); }
.legal-section:first-of-type { margin-top: 44px; }
.legal-section h2 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 12px; }
.legal-section p { color: var(--ink-2); line-height: 1.75; }
.legal-section p + p { margin-top: 12px; }
.legal-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.support-contact { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; text-decoration: none; }
.support-contact svg { width: 16px; height: 16px; }

.join-page { min-height: 100svh; display: grid; place-items: center; padding: 28px; }
.join-card { width: min(100%, 460px); text-align: center; }
.join-logo { width: 52px; height: 66px; margin: 0 auto 24px; object-fit: contain; }
.join-logo { filter: brightness(0); }
.join-card h1 { font-size: 32px; letter-spacing: -0.03em; }
.join-card p { margin-top: 12px; color: var(--muted); }
.invite-code { min-height: 52px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 28px 0; }
.invite-code span { min-width: 40px; height: 50px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 700; }
.join-card .button { width: 100%; }
.join-card .button + .button { margin-top: 14px; }
.join-card #join-store { margin-top: 0; }
.join-card .store-badge { margin-top: 14px; }
.join-hint { margin-top: 22px; font-size: 13px; }

.not-found { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 40px 0; }
.not-found .lead { margin: 16px auto 28px; }

/* Guides ----------------------------------------------------------------- */
.guide .eyebrow a { color: inherit; text-decoration: none; }
.guide .legal-updated time { color: var(--muted); }
.guide-section { padding: 28px 0 8px; }
.guide-section h2 { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 14px; }
.guide-section p { color: var(--ink-2); font-size: 17px; line-height: 1.75; margin-bottom: 16px; }
.guide-section ul { list-style: disc outside; margin: 4px 0 16px; padding-inline-start: 24px; color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.guide-section li::marker { color: var(--muted); }
.guide-section li { margin-bottom: 8px; }
.guide-cta { margin-top: 40px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-cta p { margin-bottom: 16px; font-size: 17px; font-weight: 600; }
.guide-cta .cta-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.guide-more { margin-top: 36px; }
.guide-more h2 { font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.guide-more ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.guide-more a { color: var(--ink); font-weight: 600; text-decoration: none; }
.guide-more a:hover { text-decoration: underline; }
.guide-list { list-style: none; padding: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.guide-list li { border-bottom: 1px solid var(--line); }
.guide-list a { display: grid; gap: 6px; padding: 22px 0; color: inherit; text-decoration: none; }
.guide-list strong { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.guide-list span { color: var(--muted); line-height: 1.6; }
.guide-list a:hover strong { text-decoration: underline; }
.guide-group { margin-top: 40px; }
.guide-group h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guide-group .guide-list { margin-top: 10px; }

/* Download card on template guides --------------------------------------- */
.download-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; }
.download-meta { display: grid; gap: 3px; min-width: 0; }
.download-meta strong { font-size: 15px; overflow-wrap: anywhere; }
.download-meta span { color: var(--muted); font-size: 13px; }
.download-card .button { gap: 8px; }

/* Calculator on tool guides ---------------------------------------------- */
.calc { margin-top: 28px; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: 18px; }
.calc h2 { margin-bottom: 16px; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.calc-field { display: grid; align-content: end; gap: 6px; min-width: 0; }
.calc-field span { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.35; }
.calc-field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; }
.calc-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.calc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.calc-result { display: grid; align-content: start; gap: 2px; min-width: 0; }
.calc-result span { color: var(--muted); font-size: 13px; font-weight: 500; }
.calc-result output { font-size: 36px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-result small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-hint { margin-top: 16px; font-size: 15px; font-weight: 600; }
.calc-formulas { display: grid; gap: 4px; margin-top: 10px; }
.calc-formulas p { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Reveal ----------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 800ms var(--spring); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1040px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-stage .hero-phone { --phone-w: 120px; }
}
@media (max-width: 900px) {
  .header-signin { display: none; }
  .nav-cta { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 12px; }
  .device-stage { width: min(100%, 600px); padding: 28px 0; }
  .device-stage .hero-phone { --phone-w: 118px; }
  .problem-grid { grid-template-columns: 1fr; gap: 28px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-stage { display: none; }
  .story-step { min-height: 0; padding-block: 28px; opacity: 1 !important; }
  .story-step .phone { display: block; --phone-w: min(280px, 72vw); margin: 0 auto 26px; }
  .story-step .story-step-index { background: var(--fill-flat); color: var(--inverse); border-color: transparent; }
  .everywhere-grid { grid-template-columns: 1fr; justify-items: center; }
  .everywhere-phone { --phone-w: 220px; }
  .plans { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .header-row { min-height: 62px; gap: 10px; }
  .menu-button { display: grid; }
  .nav { display: none; position: absolute; inset: 62px var(--gutter) auto; padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35); z-index: 70; }
  .nav.is-open { display: grid; }
  .nav a { padding: 13px 14px; font-size: 16px; }
  .nav .nav-cta { display: block; padding: 13px 14px; color: var(--ink); font-weight: 650; }
  .language-select { max-width: 104px; }
  .header-cta { display: none; }
  .hero { padding-top: 28px; }
  .hero-actions { width: 100%; }
  .store-proof { gap: 20px; }
  .hero-proof { margin-top: 26px; }
  .hero-actions .button, .cta-actions .button, .everywhere-actions .button { width: 100%; }
  .device-stage { padding: 24px 0 20px; }
  .device-stage .hero-phone { --phone-w: 96px; }
  .problem-pain { font-size: 21px; }
  .feature-grid { grid-template-columns: 1fr; gap: 28px; }
  /* A phone cannot hold a row, so the dots go and the list becomes two
     quiet columns. */
  .audience-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; max-width: 420px; margin-inline: auto; }
  .audience-list { display: grid; gap: 10px; justify-content: start; font-size: 16px; }
  .audience-list li { display: block; }
  .audience-list li + li::before { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .download-card .button { width: 100%; }
  .calc-grid, .calc-results { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .device-stage .hero-phone { animation: none; }
  .story-shot, .story-step, .button, .store-badge { transition: none; }
}

@media print {
  .site-header, .site-footer, .hero-actions, .hero-proof, .lang-banner, .menu-button { display: none !important; }
  body { background: #fff; color: #000; }
}