/* EskoAI — Apple dark product page. SF Pro, true black, Apple blue. */

:root {
  --bg: #000000;
  --bg-alt: #161617;
  --panel: #1d1d1f;
  --panel-2: #262629;
  --ink: #f5f5f7;
  --ink-2: #86868b;
  --ink-3: #6e6e73;
  --hair: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.16);
  --blue: #3bf58a;
  --blue-btn: #28c840;
  --blue-btn-hover: #34d158;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, monospace;
  --radius: 28px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(59, 245, 138, 0.35); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

/* ---------- shells ---------- */

.shell { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.shell-narrow { max-width: 820px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

/* ---------- nav (Apple global bar) ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: 48px;
  background: rgba(22, 22, 23, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease);
}

.nav.scrolled { border-bottom-color: var(--hair); }

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.wordmark .ai { color: var(--ink-2); font-weight: 400; }

.nav-links { display: flex; align-items: center; gap: 1.9rem; }

.nav-links a {
  font-size: 0.8rem;
  color: rgba(245, 245, 247, 0.8);
  letter-spacing: -0.01em;
  transition: color 200ms var(--ease);
}

.nav-links a:hover { color: #fff; }

.nav-cta {
  background: var(--blue-btn);
  color: #04150a !important;
  font-weight: 600;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.85rem;
  border-radius: 980px;
  transition: background-color 200ms var(--ease) !important;
}

.nav-cta:hover { background: var(--blue-btn-hover); }

/* ---------- buttons & links (Apple pills) ---------- */

.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding: 0.72rem 1.4rem;
  border-radius: 980px;
  border: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), transform 150ms var(--ease);
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--blue-btn); color: #04150a; font-weight: 500; }
.btn-primary:hover { background: var(--blue-btn-hover); }

.link-more { color: var(--blue); font-size: 1.0625rem; letter-spacing: -0.01em; }
.link-more::after { content: " ›"; }
.link-more:hover { text-decoration: underline; }

/* ---------- typography ---------- */

.h-hero {
  font-size: clamp(2.8rem, 7vw, 5.3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.lede {
  margin-top: 1.1rem;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}

.lede b, .lede strong { color: var(--ink); font-weight: 600; }

.center { text-align: center; }

.caption {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.01em;
  margin-bottom: 0.7rem;
}

/* ---------- hero ---------- */

.hero {
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  text-align: center;
  position: relative;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 42% at 50% 62%, rgba(59, 245, 138, 0.1), transparent 70%);
}

.hero-brand {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}

.hero .lede { max-width: 34rem; margin-left: auto; margin-right: auto; }

.hero-actions {
  margin-top: 1.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* ---------- macOS window ---------- */

.mac-window {
  position: relative;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  max-width: 860px;
  text-align: left;
  border-radius: 12px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    0 30px 70px rgba(0, 0, 0, 0.65),
    0 70px 160px -40px rgba(59, 245, 138, 0.14);
  overflow: hidden;
  will-change: transform;
}

.mac-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.045) 50%, transparent 58%);
}

.mac-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 1rem;
  background: rgba(40, 40, 42, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  position: relative;
}

.lights { display: flex; gap: 8px; }

.lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.lights i:nth-child(1) { background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.mac-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(245, 245, 247, 0.55);
  letter-spacing: -0.01em;
}

/* Homebrew terminal: phosphor green on near-black */
.mac-body {
  padding: 1.5rem 1.7rem 1.8rem;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 2;
  height: 20rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(59, 245, 138, 0.025), transparent 40%),
    #050a06;
}

.t-you { color: #9fe7b8; }
.t-you::before { content: "you  ▸ "; color: var(--blue); }
.t-esko { color: #e0ffe9; }
.t-esko::before { content: "esko ▸ "; color: #4e8563; }

.t-code {
  color: #6faf85;
  white-space: pre;
  font-size: 0.78rem;
  line-height: 1.75;
}

.t-code.err { color: #ff6961; }
.t-code.ok { color: var(--blue); }

.t-chip {
  display: inline-block;
  margin: 0.3rem 0.35rem 0 0;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  background: rgba(59, 245, 138, 0.07);
  font-size: 0.66rem;
  color: #7fca96;
  letter-spacing: 0.02em;
}

.t-chip.hit { background: rgba(59, 245, 138, 0.16); color: var(--blue); }

.t-cursor {
  display: inline-block;
  width: 7px;
  height: 15px;
  background: var(--blue);
  vertical-align: -2px;
  animation: blink 1.05s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* ---------- stats strip ---------- */

.stats {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat .num {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat .num i { font-style: normal; color: var(--blue); }

.stat .lbl { margin-top: 0.3rem; font-size: 0.9rem; color: var(--ink-2); letter-spacing: -0.01em; }

/* ---------- sections ---------- */

section { position: relative; }

.section-pad { padding-top: clamp(5.5rem, 11vw, 9rem); padding-bottom: clamp(5.5rem, 11vw, 9rem); }

.section-alt { background: var(--bg-alt); }

.section-head { max-width: 46rem; margin: 0 auto; text-align: center; }

/* ---------- cards (Apple bento) ---------- */

.bento {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: clamp(1.9rem, 3.5vw, 2.8rem);
  overflow: hidden;
  position: relative;
}

.section-alt .card { background: #0d0d0d; }

.card.full { grid-column: 1 / -1; }

.card h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.card p { color: var(--ink-2); font-size: 1rem; letter-spacing: -0.005em; }
.card p + p { margin-top: 0.75rem; }
.card p b { color: var(--ink); font-weight: 600; }

.card .caption { margin-bottom: 0.55rem; }

.card-foot { margin-top: 1.1rem; font-size: 0.85rem; color: var(--ink-3); }

/* two-column interior for wide cards */
.card-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.card-cols p:first-child { margin-top: 0; }

/* ---------- manifesto (scroll-lit text) ---------- */

.manifesto { height: 230vh; position: relative; }

.manifesto-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
}

.manifesto-text {
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 54rem;
  margin: 0 auto;
  text-align: center;
}

.manifesto-text .mw {
  color: rgba(245, 245, 247, 0.16);
  transition: color 260ms var(--ease);
}

.manifesto-text .mw.lit { color: var(--ink); }
.manifesto-text .mw.lit.key { color: var(--blue); }

/* ---------- feature story (pinned scrollytelling) ---------- */

.story { height: 560vh; position: relative; }

.story-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

.story-caps { position: relative; min-height: 16rem; }

.story-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  pointer-events: none;
}

.story-cap.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.story-cap .caption { margin-bottom: 0.6rem; }

.story-cap h3 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 0.9rem;
}

.story-cap p { color: var(--ink-2); font-size: 1.08rem; letter-spacing: -0.008em; max-width: 26rem; }

.story-dots { display: flex; gap: 0.55rem; margin-top: 1.7rem; }

.story-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}

.story-dot.active { background: var(--blue); transform: scale(1.25); }

/* story window + swappable screens */

.story .mac-window { margin: 0; max-width: none; }

.screens {
  position: relative;
  height: 21rem;
  background:
    linear-gradient(180deg, rgba(59, 245, 138, 0.025), transparent 40%),
    #050a06;
}

.screen {
  position: absolute;
  inset: 0;
  padding: 1.4rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.95;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms var(--ease), transform 450ms var(--ease);
  overflow: hidden;
}

.screen.active { opacity: 1; transform: translateY(0); }

.s-head { color: var(--ink-2); margin-bottom: 0.5rem; }
.s-head b { color: var(--ink); font-weight: 600; }
.s-row { display: flex; justify-content: space-between; gap: 1rem; color: #b9e8c8; border-bottom: 1px solid rgba(59, 245, 138, 0.06); padding: 0.32rem 0; }
.s-row .dim { color: var(--ink-3); }
.s-row .del { color: #ff6961; }
.s-ok { color: #30d158; }
.s-run { color: var(--blue); }
.s-dim { color: var(--ink-3); }
.s-err { color: #ff6961; }
.s-note { margin-top: 0.9rem; color: var(--ink-3); font-size: 0.72rem; }

.s-bar { margin-top: 0.9rem; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.s-bar i { display: block; height: 100%; width: 34%; background: var(--blue); border-radius: 2px; }

/* ---------- languages showcase (scroll-driven belts) ---------- */

.langs { overflow: hidden; }

.lang-rows {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 0.85rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.lang-row {
  display: flex;
  gap: 0.7rem;
  width: max-content;
  margin-left: -18%;
  will-change: transform;
}

.lang {
  flex: none;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.lang.hot { color: var(--blue); background: rgba(59, 245, 138, 0.1); border-color: rgba(59, 245, 138, 0.2); }

.lang-note {
  margin-top: 1.9rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.lang-note b { color: var(--ink-2); font-weight: 600; }

/* ---------- scroll-scaled card ---------- */

.js-scale { will-change: transform, opacity; }

/* ---------- more grid (compact) ---------- */

.more-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.more {
  background: var(--panel);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.6rem;
}

.section-alt .more { background: #0d0d0d; }

.more b { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.more span { color: var(--ink-2); font-size: 0.88rem; letter-spacing: -0.005em; line-height: 1.45; }

/* ---------- privacy feature list ---------- */

.features {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.feature .glyph {
  width: 54px;
  height: 54px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(59, 245, 138, 0.12);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.feature b { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.feature span { color: var(--ink-2); font-size: 0.93rem; }

/* ---------- pricing ---------- */

.price-card {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--panel);
  border-radius: var(--radius);
  padding: clamp(2.2rem, 5vw, 3.5rem);
  text-align: center;
}

.price-figures {
  display: flex;
  justify-content: center;
  margin: 2rem 0 2.2rem;
}

.price-figure { padding: 0 clamp(1.4rem, 3.5vw, 3rem); border-left: 1px solid var(--hair); }
.price-figure:first-child { border-left: none; }

.price-figure .amount {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-figure .amount sup { font-size: 0.5em; top: -0.7em; color: var(--ink-2); font-weight: 400; }

.price-figure .label { margin-top: 0.3rem; font-size: 0.85rem; color: var(--ink-2); }

.req-note { margin-top: 1.6rem; font-size: 0.8rem; color: var(--ink-3); }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--hair);
  padding: 1.6rem 0 2.4rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.foot-grid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.foot-links { display: flex; gap: 1.6rem; }
.foot-links a { color: var(--ink-2); transition: color 200ms var(--ease); }
.foot-links a:hover { color: var(--ink); }

/* ---------- license page ---------- */

.page-head {
  padding-top: clamp(7.5rem, 13vh, 9.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.page-head .lede { max-width: 36rem; margin-left: auto; margin-right: auto; }

.license-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.panel {
  background: var(--panel);
  border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.3rem);
}

.panel + .panel { margin-top: 1.2rem; }

.panel-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 1.3rem;
}

/* term selector — Apple configurator tiles */

.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }

.term {
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  padding: 0.8rem 0.5rem 0.7rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 150ms var(--ease);
}

.term:active { transform: scale(0.97); }
.term:hover { border-color: rgba(255, 255, 255, 0.3); }

.term.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.term .m { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.term .m::after { content: " mo"; font-weight: 400; font-size: 0.78rem; color: var(--ink-2); }
.term .d { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--blue); }
.term .d.zero { color: var(--ink-3); }

.term-hint { margin-top: 1.15rem; font-size: 0.82rem; color: var(--ink-3); }

.meter { margin-top: 1.4rem; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }

.meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--blue);
  transition: width 500ms var(--ease);
}

.meter-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--ink-3);
}

/* form — Apple style */

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.field input, .field select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.75rem 0.95rem;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2386868b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 245, 138, 0.25);
}

.field input::placeholder { color: var(--ink-3); }

.field .err { display: none; margin-top: 0.4rem; font-size: 0.8rem; color: #ff6961; }
.field.invalid input { border-color: #ff6961; }
.field.invalid .err { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* summary */

.summary-sticky { position: sticky; top: 4.5rem; }

.summary-rows { border-top: 1px solid var(--hair); }

.srow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.93rem;
  letter-spacing: -0.005em;
}

.srow .l { color: var(--ink-2); }
.srow .l small { display: block; color: var(--ink-3); font-size: 0.78rem; margin-top: 0.1rem; }
.srow .v { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }

.srow.discount .v { color: var(--blue); }

.srow.total { border-bottom: none; padding-top: 1.25rem; }
.srow.total .l { color: var(--ink); font-weight: 600; font-size: 1rem; }
.srow.total .v { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }

.savings-note {
  margin-top: 0.4rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(59, 245, 138, 0.12);
  font-size: 0.84rem;
  color: var(--blue);
}

.summary-cta {
  width: 100%;
  margin-top: 1.5rem;
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
  text-align: center;
}

.secure-note { margin-top: 1rem; text-align: center; font-size: 0.75rem; color: var(--ink-3); }

/* confirmation */

.confirm { text-align: center; padding: 0.8rem 0; }

.confirm .seal {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  background: rgba(48, 209, 88, 0.15);
  color: #30d158;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  animation: seal-pop 600ms var(--ease) both;
}

@keyframes seal-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.confirm h3 { font-weight: 600; font-size: 1.4rem; letter-spacing: -0.015em; margin-bottom: 0.7rem; }
.confirm p { color: var(--ink-2); font-size: 0.93rem; max-width: 25rem; margin: 0 auto; }

.order-ref {
  margin: 1.5rem auto 0;
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--panel-2);
  border-radius: 10px;
  padding: 0.65rem 1.3rem;
}

.included { list-style: none; }

.included li {
  display: flex;
  gap: 0.8rem;
  padding: 0.55rem 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  align-items: baseline;
  letter-spacing: -0.005em;
}

.included li::before { content: "✓"; color: #30d158; font-weight: 600; font-size: 0.85rem; }

/* ---------- legal pages ---------- */

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(4rem, 8vw, 7rem);
}

.legal .updated { color: var(--ink-3); font-size: 0.8rem; margin-bottom: 2rem; }

.legal h2 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 2.4rem 0 0.7rem;
}

.legal h2:first-of-type { margin-top: 0; }

.legal p, .legal li {
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.65;
  letter-spacing: -0.005em;
}

.legal p + p { margin-top: 0.7rem; }

.legal ul { padding-left: 1.25rem; margin: 0.7rem 0; }
.legal li { margin: 0.4rem 0; }

.legal strong { color: var(--ink); font-weight: 600; }

.legal a { color: var(--blue); }
.legal a:hover { text-decoration: underline; }

.legal .page-head { text-align: left; padding-left: 0; padding-right: 0; }

/* ---------- reveals (Apple-calm) ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  transition-delay: var(--d, 0ms);
}

html.js .reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .t-cursor { animation: none; }
  .confirm .seal { animation: none; }
  .mac-window { transform: none !important; }
  .manifesto { height: auto; padding: 5rem 0; }
  .manifesto-pin { position: static; height: auto; }
  .manifesto-text .mw { color: var(--ink); }
  .story { height: auto; padding: 4rem 0; }
  .story-pin { position: static; height: auto; overflow: visible; }
  .story-caps { min-height: 0; }
  .story-cap { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 2.2rem; }
  .story-dots { display: none; }
  .screens { height: auto; }
  .screen { position: static; opacity: 1; transform: none; display: none; }
  .screen:first-child { display: block; }
  .lang-row { transform: none !important; margin-left: 0; flex-wrap: wrap; width: auto; }
  .js-scale { transform: none !important; opacity: 1 !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1rem; }
  .bento { grid-template-columns: 1fr; }
  .card-cols { grid-template-columns: 1fr; gap: 1rem; }
  .features { grid-template-columns: 1fr 1fr; }
  .license-grid { grid-template-columns: 1fr; }
  .summary-sticky { position: static; }
  .terms { grid-template-columns: repeat(3, 1fr); }
  .story-grid { grid-template-columns: 1fr; gap: 1.4rem; align-content: center; }
  .story-caps { min-height: 12.5rem; }
  .story-cap h3 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .screens { height: 17rem; }
  .screen { font-size: 0.72rem; line-height: 1.8; padding: 1.1rem 1.2rem; }
  .more-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .features { grid-template-columns: 1fr; }
  .more-grid { grid-template-columns: 1fr; }
  .terms { grid-template-columns: repeat(3, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .price-figures { flex-direction: column; gap: 1.4rem; }
  .price-figure { border-left: none; padding: 0; }
}