/* ============================================================
   Litranite — cinematic, Apple-style scrolling site
   Warm paper palette · serif (Lora) display type · textured
   ============================================================ */

:root {
  --paper:      #f4ece0;
  --paper-2:    #ece0cf;
  --card:       #fbf7f0;
  --card-line:  rgba(46, 32, 22, .10);

  --ink:        #2c1e14;
  --ink-70:     rgba(44, 30, 20, .70);
  --ink-55:     rgba(44, 30, 20, .55);
  --ink-40:     rgba(44, 30, 20, .40);

  --espresso:   #241811;
  --espresso-2: #34241a;

  --cream:      #f4ece0;
  --cream-70:   rgba(244, 236, 224, .72);
  --cream-45:   rgba(244, 236, 224, .45);

  --terracotta: #83502f;   /* warm brown — the dominant accent (~70%) */
  --terracotta-2:#5f3a22;
  --pop:        #c15f38;    /* orange — reserved for CTAs & the hero (~30%) */
  --pop-2:      #a94a29;
  --gold:       #d9a24c;

  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, serif;

  --ease: cubic-bezier(.22, .68, .16, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.62;
  /* fluid, flowing warm background — one gradient across the whole page */
  background:
    radial-gradient(120% 60% at 80% 0%, #fbf3e7 0%, transparent 55%),
    radial-gradient(90% 50% at 0% 30%, #f6ecdd 0%, transparent 50%),
    linear-gradient(180deg, #f7efe3 0%, #f1e6d6 40%, #f4ecdf 70%, #efe3d2 100%);
  background-attachment: fixed;
}

/* paper grain overlay — kills the flat feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 18px;
}

.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-70); }

a { color: inherit; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.btn-solid {
  background: linear-gradient(180deg, var(--pop) 0%, var(--pop-2) 100%);
  color: var(--on-pop, #fdf6ee);
  box-shadow: 0 6px 20px rgba(169, 74, 41, .30), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(169, 74, 41, .38), inset 0 1px 0 rgba(255, 255, 255, .25); }

.btn-outline {
  border: 1.5px solid rgba(44, 30, 20, .28);
  color: var(--ink);
  background: rgba(255, 255, 255, .4);
}
.btn-outline:hover { transform: translateY(-2px); border-color: var(--ink); background: rgba(255, 255, 255, .7); }

.btn-ghost { color: var(--terracotta); padding: 13px 8px; }
.btn-ghost::after { content: " ›"; }
.btn-ghost:hover { color: var(--terracotta-2); }

.btn:active { transform: translateY(0) scale(.98); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 40px;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(46, 32, 22, .08);
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 28px; height: 28px; object-fit: contain; transition: transform .35s var(--ease); }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.08); }
.logo-word { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

.nav-links { display: flex; gap: 30px; font-size: 15px; }
.nav-links a { position: relative; text-decoration: none; color: var(--ink-70); padding-bottom: 3px; transition: color .25s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--terracotta); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav .btn { padding: 9px 22px; font-size: 14px; }

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

.hero { text-align: center; padding: 96px 24px 120px; overflow: visible; }

.hero h1 {
  font-size: clamp(46px, 8vw, 92px);
  line-height: 1.02;
}
.hero .accent { color: var(--pop); }

.hero .lead { max-width: 560px; margin: 46px auto 0; }

.hero-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero-media {
  margin: 56px auto 0;
  max-width: 1040px;
  perspective: 1600px;
  will-change: transform;
}

.hero-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(46, 32, 22, .12);
  box-shadow:
    0 2px 6px rgba(46, 32, 22, .10),
    0 30px 60px -20px rgba(46, 32, 22, .35),
    0 60px 120px -40px rgba(46, 32, 22, .30);
  will-change: transform;
}

/* ============================================================
   SLIDESHOW SCENE — full screenshots swap (slide, never zoom),
   with pointer labels that pop in over each screen
   ============================================================ */

.pin { position: relative; }

/* fallback (no JS / narrow): simple stacked showcase */
.pin-track { display: none; }
.scrolly-on .pin-track { display: block; }

.pin-fallback {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.scrolly-on .pin-fallback { display: none; }
.fb-item .eyebrow { color: var(--terracotta); }
.fb-item h2 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 20px; line-height: 1.08; }
.fb-shot { width: 100%; border-radius: 14px; border: 1px solid var(--card-line); box-shadow: 0 24px 50px -28px rgba(46,32,22,.4); }

/* carousel */
.pin-track { position: relative; }

.pin-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.2vh, 34px);
  padding: clamp(50px, 8vh, 88px) clamp(24px, 5vw, 80px);
  background:
    radial-gradient(90% 80% at 50% 42%, #fdf7ec 0%, #f4ecdf 58%, #efe4d3 100%);
}

/* prev / next arrows flank the frame */
.car-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  width: 100%;
}
.car-arrow {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-size: 26px; line-height: 1;
  color: var(--ink);
  background: rgba(251, 247, 240, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(46, 32, 22, .16);
  box-shadow: 0 6px 16px -8px rgba(46, 32, 22, .4);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.car-arrow:hover { background: #fff; transform: scale(1.08); box-shadow: 0 10px 22px -10px rgba(46, 32, 22, .5); }
.car-arrow:active { transform: scale(.96); }
.car-arrow span { display: block; margin-top: -3px; }

/* heading above the frame, cross-fades per screen */
.pin-heads { position: relative; flex: none; height: clamp(72px, 12vh, 116px); width: 100%; text-align: center; }
.phead {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.phead.active { opacity: 1; transform: none; }
.phead .eyebrow { color: var(--terracotta); margin-bottom: 8px; }
.phead h2 { color: var(--ink); font-size: clamp(26px, 3.4vw, 46px); line-height: 1.05; }

/* the framed screenshot */
.pin-frame {
  position: relative;
  flex: none;
  width: min(66vw, calc(58vh * 1.6), 1000px);
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #fbf7f0;
  border: 1px solid rgba(46, 32, 22, .12);
  box-shadow:
    0 2px 6px rgba(46, 32, 22, .10),
    0 40px 80px -30px rgba(46, 32, 22, .45),
    0 0 0 1px rgba(46, 32, 22, .04);
}

/* each screenshot is a sliding layer; JS positions them so an opaque
   image always fills the frame — screens slide, never fade */
.slideimg {
  position: absolute;
  inset: 0;
  transform: translateX(102%);
  transition: transform .6s var(--ease);
  will-change: transform;
}
.slideimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* pointer labels ------------------------------------------------ */
.hot { position: absolute; z-index: 5; }
.hot-dot {
  position: absolute;
  left: 0; top: 0;
  width: 12px; height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 2px solid #fff;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.hot-label {
  position: absolute;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  color: var(--ink);
  background: rgba(251, 247, 240, .93);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(46, 32, 22, .14);
  border-radius: 100px;
  padding: 6px 12px;
  box-shadow: 0 6px 16px -6px rgba(46, 32, 22, .45);
  opacity: 0;
  translate: 0 6px;
  transition: opacity .5s var(--ease), translate .5s var(--ease);
}
/* label placement relative to the dot */
.hot-label            { left: 16px; top: 0; transform: translateY(-50%); }   /* right (default) */
.hot--l .hot-label    { left: auto; right: 16px; top: 0; transform: translateY(-50%); }
.hot--t .hot-label    { left: 0; bottom: 16px; top: auto; transform: translateX(-50%); }
.hot--b .hot-label    { left: 0; top: 16px; transform: translateX(-50%); }

/* reveal when this screen is the current one */
.slideimg.current .hot-dot { opacity: 1; }
.slideimg.current .hot-dot { animation: hotpulse 2.2s var(--ease) infinite; }
.slideimg.current .hot-label { opacity: 1; translate: 0 0; }
.slideimg.current .hot:nth-of-type(1) .hot-label { transition-delay: .15s; }
.slideimg.current .hot:nth-of-type(2) .hot-label { transition-delay: .30s; }
.slideimg.current .hot:nth-of-type(3) .hot-label { transition-delay: .45s; }

@keyframes hotpulse {
  0%   { box-shadow: 0 0 0 0 rgba(193, 95, 56, .5); }
  70%  { box-shadow: 0 0 0 11px rgba(193, 95, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(193, 95, 56, 0); }
}

/* clickable progress dots below the frame */
.pin-rail {
  flex: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 12px;
}
.pdot {
  width: 9px; height: 9px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(46, 32, 22, .2);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.pdot:hover { background: rgba(46, 32, 22, .4); }
.pdot.on { background: var(--terracotta); transform: scale(1.5); }

/* ---------- statement (type-driven, fluid) ---------- */

.statement { padding: clamp(120px, 18vh, 200px) 24px; text-align: center; }
.statement p {
  max-width: 880px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4.2vw, 52px);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink);
}
.statement .soft { color: var(--ink-40); }
.statement em { font-style: normal; color: var(--terracotta); }

/* ---------- features trio ---------- */

.features { padding: 40px 24px clamp(80px, 12vh, 140px); }
.features-head { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.features-head h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; }
.features-head p { margin-top: 16px; }

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
}

.card {
  position: relative;
  padding: 34px 30px 30px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fdfaf4 0%, #f7efe2 100%);
  border: 1px solid rgba(46, 32, 22, .08);
  box-shadow: 0 1px 2px rgba(46, 32, 22, .04), 0 24px 40px -28px rgba(46, 32, 22, .4);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .04;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(46, 32, 22, .04), 0 34px 56px -30px rgba(46, 32, 22, .5); }

.card-glyph {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, var(--card)), color-mix(in srgb, var(--gold) 48%, var(--card)));
  border: 1px solid rgba(169, 74, 41, .18);
  margin-bottom: 20px;
  color: var(--terracotta-2);
  transition: transform .45s var(--ease);
}
.card:hover .card-glyph { transform: rotate(-6deg) scale(1.06); }
.card-glyph svg { width: 24px; height: 24px; }

.card h3 { font-size: 22px; margin-bottom: 8px; }
.card p { margin: 0; font-size: 15px; color: var(--ink-70); }

/* ---------- download ---------- */

.download { padding: clamp(30px, 5vh, 56px) 24px clamp(80px, 12vh, 130px); text-align: center; scroll-margin-top: 40px; }
.download h2 { font-size: clamp(32px, 4.4vw, 52px); }
.download .lead { max-width: 520px; margin: 16px auto 0; }
.download-version { font-size: 14px; color: var(--ink-55); margin-top: 8px; }

.platforms {
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  max-width: 820px; margin: 44px auto 0;
}
.platform {
  display: block; text-decoration: none; color: inherit;
  flex: 1; min-width: 210px; max-width: 240px;
  padding: 30px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--card) 0%, var(--paper-2) 100%);
  border: 1px solid rgba(46, 32, 22, .08);
  box-shadow: 0 24px 40px -30px rgba(46, 32, 22, .45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.platform:hover { transform: translateY(-6px); box-shadow: 0 34px 56px -30px rgba(46, 32, 22, .55); }
.platform-glyph { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--ink); }
.platform-glyph svg { width: 40px; height: 40px; }
.platform h3 { font-size: 19px; }
.platform-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pop) 8%, var(--card)) 0%, color-mix(in srgb, var(--pop) 18%, var(--card)) 100%);
  border-color: rgba(169, 74, 41, .3);
  box-shadow: 0 30px 50px -28px rgba(169, 74, 41, .5);
  transform: scale(1.06);
}
.platform-primary:hover { transform: scale(1.06) translateY(-6px); }
.platform-primary h3 { color: var(--terracotta-2); }
.platform-primary .platform-glyph { color: var(--terracotta-2); }
.platform .btn { margin-top: 16px; width: 100%; }
.platform-alt { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-55); }
.platform-alt a { color: var(--terracotta); }

/* ---------- install ---------- */

.install { padding: clamp(60px, 9vh, 100px) 24px clamp(90px, 13vh, 150px); }
.install-head { text-align: center; margin-bottom: 34px; }
.install-head h2 { font-size: clamp(30px, 4vw, 46px); }

.tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; }
.tab {
  padding: 9px 22px; border-radius: 100px;
  font-family: var(--font-body); font-size: 14px; color: var(--ink-70);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(46, 32, 22, .12);
  cursor: pointer; transition: all .25s var(--ease);
}
.tab:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .85); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.tab-panel { max-width: 560px; margin: 0 auto; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; }
.step-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, var(--card)), color-mix(in srgb, var(--gold) 48%, var(--card))); color: var(--terracotta-2);
}
.install-note {
  margin-top: 24px; padding: 14px 18px; border-radius: 16px;
  background: rgba(217, 162, 76, .16);
  border: 1px solid rgba(217, 162, 76, .35);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-70);
}
.install-note strong { color: var(--ink); }
.install-note code {
  font-family: ui-monospace, Menlo, monospace; font-size: .85em;
  background: color-mix(in srgb, var(--ink) 10%, transparent); padding: 2px 6px; border-radius: 5px;
}

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

.footer {
  padding: 44px 40px;
  background: var(--espresso);
  color: var(--cream-45);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; font-size: 13px;
}
.footer .logo-word { color: var(--cream); font-size: 20px; }
.footer .foot-brand { display: flex; align-items: center; gap: 10px; }
.footer a { color: var(--cream-70); text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer nav { display: flex; gap: 20px; align-items: center; }

/* ---------- scroll reveal ---------- */

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Custom cursor — inked pen
   ============================================================ */

/* Contextual cursor: system default for reading/browsing; pen only on
   interactive elements; highlighter over the reader demo (set elsewhere). */
a, button, .tab, [role="tab"], .platform, .card, .feature-tab, .maker, summary, label {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M25%203%2029%207%2012%2024%207%2025%208%2020Z%27%20fill%3D%27%23c15f38%27%20stroke%3D%27%23faf6ee%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M7%2025%208%2020%2012%2024Z%27%20fill%3D%27%232c1e14%27%2F%3E%3C%2Fsvg%3E") 7 24, pointer;
}

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

@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; max-width: 460px; }
  .platform-primary { transform: none; }
  .platform-primary:hover { transform: translateY(-6px); }
}

@media (max-width: 700px) {
  .nav { padding: 12px 18px; }
  .nav-links { display: none; }
  .platforms { flex-direction: column; align-items: center; }
  .platform { width: 100%; max-width: 300px; }
  .footer { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .slideimg, .phead, .hot-label, .hot-dot { transition: none; }
  .slideimg.current .hot-dot { animation: none; }
}

/* ============================================================
   NIGHT READING — dark theme (Ink & Ember)
   ============================================================ */
:root[data-scheme="dark"] {
  --paper:      #191410;
  --paper-2:    #14100c;
  --card:       #241c15;
  --card-line:  rgba(236, 227, 208, .12);

  --ink:        #ece3d0;
  --ink-70:     rgba(236, 227, 208, .72);
  --ink-55:     rgba(236, 227, 208, .55);
  --ink-40:     rgba(236, 227, 208, .38);

  --espresso:   #120e0a;
  --espresso-2: #1c150f;

  --cream:      #ece3d0;
  --cream-70:   rgba(236, 227, 208, .72);
  --cream-45:   rgba(236, 227, 208, .45);

  --terracotta: #c9915f;   /* light brown for dark mode */
  --terracotta-2:#b57a48;
  --pop:        #e08a5f;
  --pop-2:      #d0724a;
  --gold:       #e3b96a;
}

:root[data-scheme="dark"] body {
  background:
    radial-gradient(120% 60% at 80% 0%, #241a12 0%, transparent 55%),
    radial-gradient(90% 50% at 0% 30%, #1e1610 0%, transparent 50%),
    linear-gradient(180deg, #191410 0%, #15100b 45%, #1a140f 70%, #120e0a 100%);
  background-attachment: fixed;
}
:root[data-scheme="dark"] body::before { opacity: .09; mix-blend-mode: screen; }

:root[data-scheme="dark"] .nav { border-bottom-color: rgba(236, 227, 208, .08); }
:root[data-scheme="dark"] .hero-shot,
:root[data-scheme="dark"] .fb-shot { border-color: rgba(236, 227, 208, .14); }

:root[data-scheme="dark"] .pin-stage {
  background: radial-gradient(90% 80% at 50% 42%, #241b12 0%, #1a140e 58%, #14100b 100%);
}
:root[data-scheme="dark"] .pin-frame { background: #241c15; border-color: rgba(236,227,208,.12); }
:root[data-scheme="dark"] .car-arrow {
  background: rgba(36, 28, 21, .8);
  color: var(--ink);
  border-color: rgba(236, 227, 208, .18);
}
:root[data-scheme="dark"] .car-arrow:hover { background: #2c2219; }
:root[data-scheme="dark"] .hot-label {
  background: rgba(36, 28, 21, .94);
  color: var(--ink);
  border-color: rgba(236, 227, 208, .16);
}
:root[data-scheme="dark"] .pdot { background: rgba(236, 227, 208, .22); }

:root[data-scheme="dark"] .card,
:root[data-scheme="dark"] .platform {
  background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--card) 80%, #000) 100%);
  border-color: rgba(236, 227, 208, .1);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 24px 40px -28px rgba(0,0,0,.7);
}
:root[data-scheme="dark"] .platform-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pop) 14%, var(--card)) 0%, color-mix(in srgb, var(--pop) 8%, var(--card)) 100%);
  border-color: rgba(224, 138, 95, .38);
  box-shadow: 0 30px 50px -28px rgba(224, 138, 95, .28);
}
:root[data-scheme="dark"] .card-glyph,
:root[data-scheme="dark"] .step-num {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 30%, var(--card)), color-mix(in srgb, var(--gold) 46%, var(--card)));
  border-color: rgba(224, 138, 95, .3);
  color: #f4d9b0;
}
:root[data-scheme="dark"] .btn-outline {
  border-color: rgba(236, 227, 208, .26);
  background: rgba(236, 227, 208, .06);
  color: var(--ink);
}
:root[data-scheme="dark"] .btn-outline:hover { border-color: var(--ink); background: rgba(236, 227, 208, .12); }
:root[data-scheme="dark"] .tab {
  background: rgba(236, 227, 208, .06);
  border-color: rgba(236, 227, 208, .14);
  color: var(--ink-70);
}
:root[data-scheme="dark"] .tab[aria-selected="true"] { background: var(--terracotta); color: #1a130d; border-color: var(--terracotta); }
:root[data-scheme="dark"] .install-note {
  background: rgba(227, 185, 106, .1);
  border-color: rgba(227, 185, 106, .28);
}
:root[data-scheme="dark"] .reader-demo { background: linear-gradient(180deg, #271e16, #201810); }
:root[data-scheme="dark"] .reader-chrome { background: rgba(236,227,208,.05); border-bottom-color: var(--card-line); }
:root[data-scheme="dark"] .story { background: linear-gradient(180deg, transparent, rgba(236,227,208,.03), transparent); }

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.logo .lm-dark { display: none; }
:root[data-scheme="dark"] .logo .lm-light { display: none; }
:root[data-scheme="dark"] .logo .lm-dark { display: inline-block; }

.nav-right { display: flex; align-items: center; gap: 14px; }
/* the old round day/night button was replaced by the theme picker */

/* ============================================================
   HAND-DRAWN UNDERLINE (draws in on reveal)
   ============================================================ */
[data-underline] { position: relative; display: table; margin-left: auto; margin-right: auto; margin-bottom: .5em; }
/* section headings: a small, tidy accent that never crowds the text below */
[data-underline]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -.22em;
  width: 58px; height: 3px; border-radius: 3px;
  background: var(--terracotta);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  opacity: .9;
  pointer-events: none;
}
.js [data-underline]::after { transition: transform .7s var(--ease); }
[data-underline].uline-in::after { transform: translateX(-50%) scaleX(1); }

/* the hero keeps the expressive full-width hand-drawn wave (its own spacing) */
.hero h1[data-underline] { margin-bottom: 0; }
.hero h1[data-underline]::after {
  left: -2%; width: 104%; bottom: -.46em; height: .3em; border-radius: 0;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 60 2, 110 11, 160 6 S 250 2, 298 7' fill='none' stroke='%2383502f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  transform: translateX(0) scaleX(0);
  transform-origin: left center;
}
.hero h1[data-underline].uline-in::after { transform: translateX(0) scaleX(1); }
:root[data-scheme="dark"] .hero h1[data-underline]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 60 2, 110 11, 160 6 S 250 2, 298 7' fill='none' stroke='%23c9915f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============================================================
   INTERACTIVE CLOSE-READING DEMO (hero)
   ============================================================ */
.reader-demo {
  max-width: 900px;
  margin: 44px auto 0;
  text-align: left;
  border-radius: 18px;
  background: linear-gradient(180deg, #fefbf6 0%, #f7efe2 100%);
  border: 1px solid var(--card-line);
  box-shadow: 0 2px 6px rgba(46,32,22,.08), 0 34px 70px -34px rgba(46,32,22,.42);
  overflow: hidden;
}
.reader-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px;
  background: rgba(46, 32, 22, .035);
  border-bottom: 1px solid var(--card-line);
  font-family: var(--font-body);
  font-size: 12.5px; color: var(--ink-55);
}
.reader-dots { display: inline-flex; gap: 6px; }
.reader-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(46,32,22,.16); }
:root[data-scheme="dark"] .reader-dots i { background: rgba(236,227,208,.2); }
.reader-file { font-weight: 600; letter-spacing: .01em; }

/* chrome call-to-action */
.reader-cta { margin-left: auto; color: var(--terracotta); font-weight: 600; letter-spacing: .01em; animation: ctapulse 2.4s var(--ease) infinite; }
@keyframes ctapulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.reader-cta.gone { opacity: 0; animation: none; transition: opacity .4s; }

/* floating annotation toolbar (appears on selection) */
.sel-bar {
  position: absolute; z-index: 80;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 6px; border-radius: 12px;
  background: var(--espresso);
  box-shadow: 0 14px 34px -12px rgba(46,32,22,.7), 0 0 0 1px rgba(0,0,0,.2);
  transform: translate(-50%, -8px) scale(.92);
  transform-origin: bottom center;
  opacity: 0; pointer-events: none;
  transition: opacity .16s var(--ease), transform .18s var(--ease);
}
.sel-bar.show { opacity: 1; transform: translate(-50%, -14px) scale(1); pointer-events: auto; }
.sel-bar::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--espresso);
}
.sb-sw {
  width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--sw); border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
  transition: transform .15s var(--ease);
}
.sb-sw:hover { transform: scale(1.15); }
.sb-sw.on { border-color: #fff; }
.sb-div { width: 1px; height: 18px; background: rgba(255,255,255,.18); margin: 0 3px; }
.sb-act {
  display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 11px;
  border: none; border-radius: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: #f4ece0;
  background: rgba(255,255,255,.1); transition: background .18s var(--ease), transform .12s var(--ease);
}
.sb-act svg { width: 15px; height: 15px; }
.sb-act:hover { background: rgba(255,255,255,.2); }
.sb-act:active { transform: scale(.95); }
.sb-define { background: linear-gradient(180deg, var(--terracotta), var(--terracotta-2)); }
.sb-define:hover { background: linear-gradient(180deg, #cf6c43, var(--terracotta-2)); }
/* word selected → show Define (book), hide Save quote; phrase → the reverse */
.sel-bar .sb-define { display: none; }
.sel-bar.word .sb-define { display: inline-flex; }
.sel-bar.word .sb-quote { display: none; }

/* two-pane split: the page + your study panel */
.reader-split { display: grid; grid-template-columns: 1.45fr 1fr; align-items: stretch; }
.reader-page { padding: 24px 26px 18px; border-right: 1px solid var(--card-line); min-width: 0; }
.reader-body {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.7; color: var(--ink);
  -webkit-user-select: text; user-select: text;
}
.reader-body p { margin: 0 0 13px; }
.reader-body p:last-child { margin-bottom: 0; }
.reader-body ::selection { background: rgba(193, 95, 56, .28); }
.reader-body mark.hl {
  background: var(--hl, rgba(233,196,106,.6));
  color: inherit; border-radius: 3px; padding: .05em .04em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  animation: markin .4s var(--ease);
}
@keyframes markin { from { background-color: transparent; } }
.reader-body mark.vocabmark { background: rgba(193,95,56,.14); border-bottom: 2px solid var(--terracotta); }
:root[data-scheme="dark"] .reader-body mark.vocabmark { background: rgba(224,138,95,.2); }
.reader-page-hint { margin: 16px 0 0; font-family: var(--font-body); font-size: 12px; color: var(--ink-40); }
.reader-page-hint.done { color: var(--terracotta); }

.reader-panel { padding: 20px; background: rgba(46,32,22,.028); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:root[data-scheme="dark"] .reader-panel { background: rgba(0,0,0,.18); }
.rp-section { min-width: 0; }
.rp-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 10px;
}
.rp-head svg { width: 15px; height: 15px; color: var(--terracotta); flex: none; }
.rp-count {
  margin-left: auto; font-size: 11px; letter-spacing: 0; color: #fff;
  background: var(--terracotta); border-radius: 100px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rp-count:empty { display: none; }
.rp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rp-empty { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-40); font-style: italic; }
.rp-item {
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 10px; padding: 9px 11px;
}
.rp-item.in { opacity: 1; transform: none; }
.vocab-item .rp-word { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--terracotta-2); }
:root[data-scheme="dark"] .vocab-item .rp-word { color: var(--terracotta); }
.vocab-item .rp-def { display: block; font-family: var(--font-body); font-size: 12px; line-height: 1.4; color: var(--ink-70); margin-top: 2px; }
.quote-item { display: flex; gap: 8px; align-items: flex-start; }
.quote-item .rp-quote { font-family: var(--font-display); font-style: italic; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.quote-item .rp-page {
  flex: none; font-family: var(--font-body); font-size: 10px; font-weight: 600;
  color: var(--terracotta); background: color-mix(in srgb, var(--pop) 12%, transparent); border-radius: 6px;
  padding: 2px 6px; margin-top: 2px;
}
:root[data-scheme="dark"] .quote-item .rp-page { background: rgba(224,138,95,.16); }

.reader-foot {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 20px; border-top: 1px solid var(--card-line);
  font-family: var(--font-body); font-size: 12px; color: var(--ink-40);
}
.reader-tag { letter-spacing: .02em; text-align: center; }

@media (max-width: 720px) {
  .reader-split { grid-template-columns: 1fr; }
  .reader-page { border-right: none; border-bottom: 1px solid var(--card-line); }
  /* stacked: reserve room for the auto-demo's quote + word and the longer
     hint, so the hero doesn't grow twice in the first few seconds */
  .reader-panel { min-height: 256px; }
  .reader-page-hint { min-height: 39px; }
  .reader-tools .tool-label { display: none; }
}

/* floating "saved" note that pops by a fresh highlight */
.note-pop {
  position: absolute;
  z-index: 60;
  font-family: 'Caveat', var(--font-body), cursive;
  font-size: 20px; font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, var(--terracotta), var(--terracotta-2));
  padding: 5px 13px; border-radius: 12px;
  box-shadow: 0 12px 26px -10px rgba(169,74,41,.6);
  transform: translate(-50%, -6px) rotate(-3deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .5s var(--ease);
  white-space: nowrap;
}
.note-pop.show { opacity: 1; transform: translate(-50%, -14px) rotate(-3deg); }
.note-pop::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--terracotta-2);
}

.hero-sub { margin-top: 20px; font-size: 13.5px; color: var(--ink-55); font-family: var(--font-body); }

/* ============================================================
   STORY
   ============================================================ */
.story { padding: clamp(90px, 15vh, 170px) 24px; text-align: center; }
.story-inner { max-width: 780px; margin: 0 auto; }
.story-lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
  margin: 6px 0 0;
}
.story-lead em { font-style: italic; color: var(--terracotta); }
.story-body { margin: 26px auto 0; max-width: 620px; font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-70); line-height: 1.7; }
.story-sign { margin-top: 26px; font-family: 'Caveat', cursive; font-size: 26px; color: var(--terracotta); }

/* ============================================================
   SMART DOWNLOAD
   ============================================================ */
.smart-dl { margin: 30px auto 6px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.btn-lg { padding: 16px 40px; font-size: 17px; }
.btn-download::before, .btn-lg .os-ico { }
.smart-guide { font-size: 14px; color: var(--terracotta); text-decoration: none; }
.smart-guide:hover { color: var(--terracotta-2); text-decoration: underline; }
.platform-guide {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--terracotta); text-decoration: none;
}
.platform-guide:hover { color: var(--terracotta-2); text-decoration: underline; }
.download-help { max-width: 560px; margin: 40px auto 0; font-size: 14px; color: var(--ink-55); line-height: 1.7; }
.download-help a { color: var(--terracotta); font-weight: 600; text-decoration: none; }
.download-help a:hover { text-decoration: underline; }

/* ============================================================
   FOOTER SOCIAL
   ============================================================ */
.foot-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.foot-social { display: inline-flex; align-items: center; gap: 10px; }
.soc { width: 22px; height: 22px; display: grid; place-items: center; color: var(--cream-45); }
.soc svg { width: 18px; height: 18px; }
.soc.soon { opacity: .5; cursor: default; position: relative; }
.soon-tag {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(217,162,76,.4);
  padding: 2px 7px; border-radius: 100px;
}

/* ============================================================
   INSTALL PAGES (mac / windows / linux)
   ============================================================ */
.ip-main { max-width: 860px; margin: 0 auto; padding: 60px 24px 100px; }
.ip-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 14px; color: var(--ink-55); text-decoration: none; margin-bottom: 34px; }
.ip-back:hover { color: var(--terracotta); }
.ip-head { text-align: center; margin-bottom: 14px; }
.ip-eyebrow { color: var(--terracotta); }
.ip-head h1 { font-family: var(--font-display); font-size: clamp(38px, 6vw, 64px); line-height: 1.02; letter-spacing: -.02em; }
.ip-head h1 em { font-style: italic; color: var(--terracotta); }
.ip-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 2.2vw, 24px); color: var(--ink-55); margin-top: 8px; }

.ip-osbar { display: flex; justify-content: center; gap: 8px; margin: 30px 0 10px; }
.ip-osbar a {
  padding: 8px 20px; border-radius: 100px; font-family: var(--font-body); font-size: 14px;
  text-decoration: none; color: var(--ink-70);
  background: rgba(255,255,255,.45); border: 1px solid var(--card-line);
  transition: all .25s var(--ease);
}
:root[data-scheme="dark"] .ip-osbar a { background: rgba(236,227,208,.06); }
.ip-osbar a:hover { color: var(--ink); }
.ip-osbar a[aria-current="page"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
:root[data-scheme="dark"] .ip-osbar a[aria-current="page"] { background: var(--terracotta); color: #1a130d; border-color: var(--terracotta); }

.ip-download { text-align: center; margin: 34px auto 60px; }
.ip-download .btn { min-width: 240px; }
.ip-dl-alt { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-55); }
.ip-dl-alt a { color: var(--terracotta); }

/* step list */
.ip-steps { display: flex; flex-direction: column; gap: 18px; counter-reset: ipstep; }
.ip-step {
  position: relative;
  display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start;
  padding: 26px 28px 26px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fdfaf4 0%, #f7efe2 100%);
  border: 1px solid var(--card-line);
  box-shadow: 0 1px 2px rgba(46,32,22,.04), 0 24px 40px -30px rgba(46,32,22,.4);
}
:root[data-scheme="dark"] .ip-step { background: linear-gradient(180deg, #271e16 0%, #201810 100%); }
.ip-num {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 46px; line-height: 1; color: var(--terracotta);
  text-align: center;
}
.ip-step h3 { font-family: var(--font-display); font-size: 23px; margin: 2px 0 8px; }
.ip-step p { margin: 0 0 8px; font-size: 15.5px; color: var(--ink-70); line-height: 1.65; }
.ip-step .kbd {
  font-family: ui-monospace, Menlo, monospace; font-size: .85em;
  background: rgba(46,32,22,.1); padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
:root[data-scheme="dark"] .ip-step .kbd { background: rgba(236,227,208,.12); }
.ip-shot { margin-top: 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--card-line); box-shadow: 0 10px 26px -14px rgba(46,32,22,.5); }
.ip-shot img { width: 100%; display: block; }

/* copy-command block */
.cmd-box {
  margin-top: 14px;
  display: flex; align-items: stretch; gap: 0;
  background: #211a12; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.5);
}
.cmd-box code {
  flex: 1; min-width: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  color: #f2ecde; padding: 14px 16px; overflow-x: auto; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.cmd-box code .prompt { color: var(--terracotta); }
.cmd-copy {
  flex: none; padding: 0 18px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: #211a12; background: var(--gold);
  border: none; cursor: pointer; transition: background .2s;
}
.cmd-copy:hover { background: #e6b45c; }
.cmd-copy.copied { background: #7fa15a; color: #fff; }
.cmd-note { margin-top: 10px; font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-55); border-left: 2px solid var(--terracotta); padding-left: 12px; }

/* mocked OS dialogs */
.mock {
  margin-top: 16px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--card-line);
  box-shadow: 0 14px 34px -18px rgba(46,32,22,.55);
  background: #fbfbfd; color: #1d1d1f;
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.mock-smartscreen { background: #f3f3f3; }
.mock-ss-top { background: #fff; padding: 20px 22px 16px; }
.mock-ss-top .ss-title { font-size: 20px; font-weight: 600; color: #1d1d1f; }
.mock-ss-top .ss-desc { font-size: 13.5px; color: #444; margin-top: 6px; line-height: 1.5; }
.mock-ss-moreinfo { display: inline-block; margin-top: 10px; color: #0067c0; font-size: 13.5px; text-decoration: underline; position: relative; }
.mock-ss-moreinfo .ss-point {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: 'Caveat', cursive; font-size: 20px; color: var(--terracotta);
}
.mock-ss-moreinfo .ss-point::before { content: "← "; }
.mock-ss-app { font-size: 13.5px; color: #444; margin-top: 14px; line-height: 1.6; }
.mock-ss-app b { color: #1d1d1f; }
.mock-ss-btns { background: #f3f3f3; padding: 16px 22px; display: flex; gap: 10px; justify-content: flex-end; }
.mock-ss-btns .mbtn { font-size: 13.5px; padding: 7px 20px; border-radius: 4px; border: 1px solid #c8c8c8; background: #fdfdfd; color: #1d1d1f; }
.mock-ss-btns .mbtn.hi { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(193,95,56,.25); font-weight: 600; }

/* mac gatekeeper mock */
.mock-mac { max-width: 320px; margin-left: auto; margin-right: auto; text-align: center; padding: 22px 22px 18px; background: #ececec; }
.mock-mac .mac-ico { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 12px; background: linear-gradient(180deg,#fff,#e7e7e7); display: grid; place-items: center; }
.mock-mac .mac-ico img { width: 40px; height: 40px; }
.mock-mac .mac-msg { font-size: 13px; color: #1d1d1f; line-height: 1.5; }
.mock-mac .mac-msg b { font-weight: 600; }
.mock-mac .mac-btns { margin-top: 14px; display: flex; gap: 8px; justify-content: center; }
.mock-mac .mbtn { font-size: 12.5px; padding: 6px 16px; border-radius: 6px; border: 1px solid #c2c2c2; background: #fff; }

.ip-final {
  margin-top: 46px; text-align: center;
  padding: 40px 28px; border-radius: 20px;
  background: linear-gradient(180deg, #fdf0e2 0%, #f8e2cd 100%);
  border: 1px solid rgba(169,74,41,.22);
}
:root[data-scheme="dark"] .ip-final { background: linear-gradient(180deg,#33241a,#2a1d13); border-color: rgba(224,138,95,.32); }
.ip-final h2 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 38px); }
.ip-final p { margin: 10px auto 0; max-width: 440px; color: var(--ink-70); }
.ip-final .btn { margin-top: 20px; }
.ip-support { margin-top: 34px; text-align: center; font-size: 14px; color: var(--ink-55); }
.ip-support a { color: var(--terracotta); font-weight: 600; text-decoration: none; }
.ip-support a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .ip-step { grid-template-columns: 46px 1fr; gap: 14px; padding: 22px 18px; }
  .ip-num { font-size: 34px; }
  .mock-ss-moreinfo .ss-point { display: none; }
}

/* ============================================================
   SHOWCASE — big switchable screenshots (tabbed)
   ============================================================ */
.showcase { max-width: 1040px; margin: 0 auto; padding: clamp(30px,5vh,70px) 24px clamp(14px,3vh,34px); }
.sc-head { text-align: center; max-width: 680px; margin: 0 auto clamp(30px,5vh,48px); }
.sc-head h2 { font-size: clamp(30px,4.4vw,50px); line-height: 1.06; }
.sc-head .lead { margin-top: 14px; }

.feature-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.feature-tab {
  padding: 9px 20px; border-radius: 100px;
  font-family: var(--font-body); font-size: 14px; color: var(--ink-70);
  background: rgba(255,255,255,.5); border: 1px solid var(--card-line);
  cursor: pointer; transition: all .25s var(--ease);
}
:root[data-scheme="dark"] .feature-tab { background: rgba(236,227,208,.06); }
.feature-tab:hover:not(.on) { color: var(--ink); background: rgba(255,255,255,.85); }
:root[data-scheme="dark"] .feature-tab:hover:not(.on) { background: rgba(236,227,208,.12); }
.feature-tab.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
:root[data-scheme="dark"] .feature-tab.on { background: var(--terracotta); color: #1a130d; border-color: var(--terracotta); }

/* All slides share one grid cell, so the stage is always as tall as the
   tallest slide. Swapping with display:none changed the page height every
   5s and shoved every section below up and down. */
.feature-stage { position: relative; display: grid; }
.feature-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.feature-slide.on { visibility: visible; opacity: 1; transition: opacity .5s var(--ease); }
@keyframes ftin { from { opacity: 0; transform: translateY(12px); } }

.feature-shot {
  margin: 0; border-radius: 16px; overflow: hidden;
  background: var(--card); border: 1px solid var(--card-line);
  box-shadow: 0 2px 6px rgba(46,32,22,.1), 0 44px 84px -36px rgba(46,32,22,.52);
}
:root[data-scheme="dark"] .feature-shot { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 44px 84px -36px rgba(0,0,0,.72); }
.feature-shot img { display: block; width: 100%; height: auto; }

.feature-cap { text-align: center; max-width: 660px; margin: clamp(28px,4vh,48px) auto 0; }
.feature-cap h3 { font-family: var(--font-display); font-size: clamp(22px,2.7vw,32px); line-height: 1.12; margin: 0 0 10px; letter-spacing: -.01em; }
.feature-cap p { margin: 0; color: var(--ink-70); font-size: clamp(15px,1.5vw,17.5px); line-height: 1.65; }

.feature-progress { height: 3px; max-width: 220px; margin: 26px auto 0; border-radius: 100px; background: var(--card-line); overflow: hidden; }
.fp-bar { display: block; height: 100%; width: 0; background: var(--terracotta); border-radius: 100px; }
.fp-bar.run { width: 100%; transition: width var(--fp-dur, 5s) linear; }

/* ============================================================
   COLOPHON — the story + the two makers
   ============================================================ */
.colophon { position: relative; padding: clamp(30px,6vh,64px) 24px clamp(40px,6vh,66px); text-align: center; }
.colophon-inner { max-width: 760px; margin: 0 auto; }
.colophon-lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px,3.4vw,38px); line-height: 1.32; letter-spacing: -.01em;
  color: var(--ink); margin: 6px 0 0;
}
.colophon-lead em { font-style: italic; color: var(--terracotta); }
.colophon-body { margin: 24px auto 0; max-width: 600px; font-size: clamp(16px,1.6vw,18px); color: var(--ink-70); line-height: 1.75; }

.use-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px auto 0; }
.use-chips span {
  font-family: var(--font-body); font-size: 13px; letter-spacing: .03em; color: var(--ink-70);
  padding: 7px 16px; border-radius: 100px;
  background: rgba(255,255,255,.5); border: 1px solid var(--card-line);
}
:root[data-scheme="dark"] .use-chips span { background: rgba(236,227,208,.06); }

.makers { margin-top: clamp(52px,8vh,84px); }
.rule-orn { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 22px; }
.rule-orn::before, .rule-orn::after { content: ""; height: 1px; width: min(120px,22vw); background: var(--card-line); }
.rule-orn span { color: var(--terracotta); font-size: 20px; line-height: 1; animation: ornpulse 4.5s ease-in-out infinite; }
@keyframes ornpulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.16); opacity: 1; } }
.makers-label {
  font-family: var(--font-body); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-55); margin: 0 0 28px;
}
.maker-row { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px,4vw,46px); flex-wrap: wrap; }
.maker {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
  padding: 16px 22px 14px; border-radius: 20px;
  transition: background .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.maker:hover { background: rgba(255,255,255,.5); transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(46,32,22,.45); }
:root[data-scheme="dark"] .maker:hover { background: rgba(236,227,208,.06); }
.maker:hover .maker-name { color: var(--terracotta); }

.monogram {
  position: relative;
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: .02em;
  color: #fff; background: linear-gradient(180deg, var(--terracotta), var(--terracotta-2));
  box-shadow: 0 12px 26px -10px rgba(169,74,41,.5);
  animation: floaty 6s ease-in-out infinite;
}
.monogram::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px dashed rgba(193,95,56,.32); opacity: .7;
  transition: transform .5s var(--ease), opacity .3s;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.maker:nth-of-type(2) .monogram {
  background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 70%, #000));
  box-shadow: 0 12px 26px -10px rgba(217,162,76,.5);
  animation-delay: -3s;
}
.maker:nth-of-type(2) .monogram::after { border-color: rgba(217,162,76,.4); }
.maker:hover .monogram { box-shadow: 0 18px 34px -8px rgba(169,74,41,.6); }
.maker:hover .monogram::after { transform: scale(1.14); opacity: 1; }

.maker-amp { align-self: center; margin-top: 12px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(26px,4vw,42px); color: var(--ink-40); }

.maker-name { font-family: var(--font-display); font-size: 19px; color: var(--ink); transition: color .25s; }
.maker-role { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-55); }
.maker-in {
  display: inline-block; margin-top: 4px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--terracotta); background: rgba(193,95,56,.1);
  padding: 3px 11px; border-radius: 100px;
  transition: background .25s, color .25s;
}
.maker:hover .maker-in { background: var(--terracotta); color: #fff; }
:root[data-scheme="dark"] .maker-in { background: rgba(224,138,95,.16); }

.makers-sign { margin: 34px auto 0; max-width: 470px; font-family: 'Caveat', cursive; font-size: 24px; line-height: 1.4; color: var(--terracotta); }

/* highlighter sweeps — the story lights up its own key phrases on scroll */
.sweep {
  background-image: linear-gradient(to right, var(--sw-color), var(--sw-color));
  background-repeat: no-repeat; background-position: 0 60%;
  background-size: 0% 76%; border-radius: 3px; padding: 0 .05em;
  transition: background-size .8s var(--ease);
}
.sweep.lit { background-size: 100% 76%; }
.sweep[data-c="amber"] { --sw-color: rgba(233,196,106,.6); }
.sweep[data-c="rose"]  { --sw-color: rgba(232,153,141,.55); }
.sweep[data-c="green"] { --sw-color: rgba(163,177,138,.62); }

/* handwritten margin notes in the story */
.margin-note {
  position: absolute; z-index: 2; pointer-events: none;
  font-family: 'Caveat', cursive; font-size: clamp(19px,1.9vw,26px);
  color: var(--terracotta); line-height: 1.1; max-width: 175px;
  opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.margin-note.in { opacity: .92; }
/* pinned just outside the centred text column so their arrows reach the text */
.mn-1 { top: 25%; left: max(12px, calc(50% - 545px)); transform: translateY(10px) rotate(-5deg); }
.mn-1.in { transform: rotate(-5deg); }
.mn-2 { top: 45%; right: max(12px, calc(50% - 545px)); text-align: right; transform: translateY(10px) rotate(4deg); }
.mn-2.in { transform: rotate(4deg); }
.mn-3 { bottom: 20%; right: max(12px, calc(50% - 470px)); transform: translateY(10px) rotate(-4deg); }
.mn-3.in { transform: rotate(-4deg); }
@media (max-width: 1180px) { .margin-note { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .monogram, .rule-orn span { animation: none; }
  .sweep { transition: none; }
}

/* ============================================================
   READING PROGRESS BAR (a book's progress, at the top)
   ============================================================ */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; }
.read-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--terracotta));
  box-shadow: 0 0 10px rgba(193,95,56,.45);
}

/* highlighter cursor while hovering the live reader text */
.reader-body {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='32'%20viewBox='0%200%2028%2032'%3E%3Crect%20x='8'%20y='2'%20width='12'%20height='18'%20rx='2'%20fill='%23e9c46a'%20stroke='%232c1e14'%20stroke-width='1.4'/%3E%3Cpath%20d='M8%2020%20L20%2020%20L14%2030%20Z'%20fill='%23c15f38'%20stroke='%232c1e14'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3C/svg%3E") 14 30, text;
}

/* logo flip on tap */
@keyframes logoflip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.logo-mark.flip { animation: logoflip .7s var(--ease); }

/* ============================================================
   CREATIVE LAYER — hero entrance, ambient, nav, burst, polish
   ============================================================ */

/* --- hero staggered entrance --- */
.hero { position: relative; }
.hero > *:not(.ambient) { position: relative; z-index: 1; }
.js .hero .eyebrow,
.js .hero h1,
.js .hero .lead,
.js .hero .reader-demo,
.js .hero .hero-ctas,
.js .hero .hero-sub {
  opacity: 0;
  animation: heroUp .9s var(--ease) forwards;
}
.js .hero .eyebrow    { animation-delay: .05s; }
.js .hero h1          { animation-delay: .18s; }
.js .hero .lead       { animation-delay: .32s; }
.js .hero .reader-demo{ animation-delay: .46s; }
.js .hero .hero-ctas  { animation-delay: .60s; }
.js .hero .hero-sub   { animation-delay: .70s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* --- marker sweep behind "closely" in the headline --- */
.hero-hl {
  background-image: linear-gradient(to right, rgba(233,196,106,.6), rgba(233,196,106,.6));
  background-repeat: no-repeat; background-position: 0 82%;
  background-size: 0% 40%; border-radius: 4px;
  transition: background-size .75s var(--ease);
}
.hero-hl.lit { background-size: 100% 40%; }

/* --- ambient floating glyphs --- */
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.amb { position: absolute; color: var(--ink); opacity: .06; width: 40px; height: 40px; will-change: transform; }
:root[data-scheme="dark"] .amb { color: var(--cream); opacity: .055; }
.amb-1 { top: 13%; left: 7%;  width: 46px; animation: drift1 17s ease-in-out infinite; }
.amb-2 { top: 21%; right: 9%; width: 38px; animation: drift2 20s ease-in-out infinite; }
.amb-3 { top: 60%; left: 5%;  width: 34px; animation: drift1 23s ease-in-out infinite reverse; }
.amb-4 { top: 54%; right: 6%; width: 40px; animation: drift2 19s ease-in-out infinite; }
.amb-5 { top: 40%; left: 13%; width: 28px; animation: drift1 25s ease-in-out infinite; opacity: .05; }
.amb-6 { top: 30%; right: 15%;width: 16px; animation: drift2 15s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(10px,-16px) rotate(6deg); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) rotate(5deg); }  50% { transform: translate(-12px,-14px) rotate(-8deg); } }
@media (max-width: 920px) { .ambient { display: none; } }

/* --- scroll-aware nav --- */
.nav { transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease); }
.nav.scrolled { padding-top: 10px; padding-bottom: 10px; background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 8px 26px -16px rgba(46,32,22,.45); }
:root[data-scheme="dark"] .nav.scrolled { box-shadow: 0 8px 26px -16px rgba(0,0,0,.7); }

/* --- download cards: glyph pop + shine on primary --- */
.platform-glyph { transition: transform .4s var(--ease); }
.platform:hover .platform-glyph { transform: translateY(-3px) scale(1.12) rotate(-5deg); }
.btn-solid { position: relative; overflow: hidden; }
.btn-solid::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn-solid:hover::after { animation: shine .8s var(--ease); }
@keyframes shine { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* --- ink-burst celebration --- */
.ink-burst { position: absolute; z-index: 65; pointer-events: none; }
.ink-dot { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .js .hero .eyebrow, .js .hero h1, .js .hero .lead,
  .js .hero .reader-demo, .js .hero .hero-ctas, .js .hero .hero-sub { opacity: 1; animation: none; }
  .amb { animation: none; }
  .hero-hl { transition: none; }
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq { max-width: 760px; margin: 0 auto; padding: clamp(50px,8vh,100px) 24px; }
.faq-head { text-align: center; margin-bottom: clamp(30px,5vh,48px); }
.faq-head h2 { font-size: clamp(30px,4.4vw,50px); line-height: 1.06; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid var(--card-line); border-radius: 16px;
  background: linear-gradient(180deg,#fdfaf4,#f7efe2); overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s;
}
:root[data-scheme="dark"] .faq-item { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 80%, #000)); }
.faq-item[open] { box-shadow: 0 22px 44px -30px rgba(46,32,22,.42); border-color: rgba(193,95,56,.25); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px; font-family: var(--font-display); font-size: clamp(17px,1.9vw,20px); font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--terracotta); }
.faq-q-icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-body); font-size: 20px; line-height: 1;
  background: color-mix(in srgb, var(--pop) 12%, transparent); color: var(--terracotta);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.faq-item[open] .faq-q-icon { transform: rotate(135deg); background: var(--terracotta); color: #fff; }
.faq-a { padding: 0 22px 20px; color: var(--ink-70); font-size: 16px; line-height: 1.7; }
.faq-item[open] .faq-a { animation: faqIn .38s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
.faq-a a { color: var(--terracotta); font-weight: 600; text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }
.faq-a code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: rgba(46,32,22,.1); padding: 2px 6px; border-radius: 5px; }
:root[data-scheme="dark"] .faq-a code { background: rgba(236,227,208,.12); }

/* typewriter eyebrow */
.type-rot { color: var(--terracotta); }
.type-caret { display: inline-block; width: 2px; height: 1em; background: var(--terracotta); margin-left: 3px; vertical-align: -2px; animation: caretblink 1s step-end infinite; }
@keyframes caretblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .type-caret { animation: none; } }

/* reader shuffle button + source-link pulse */
.reader-shuffle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-70);
  background: rgba(46,32,22,.06); border: 1px solid var(--card-line); border-radius: 100px;
  padding: 5px 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .1s;
}
:root[data-scheme="dark"] .reader-shuffle { background: rgba(236,227,208,.06); }
.reader-shuffle svg { width: 13px; height: 13px; }
.reader-shuffle:hover { color: var(--terracotta); border-color: var(--terracotta); background: rgba(193,95,56,.08); }
.reader-shuffle:active { transform: scale(.95); }

.reader-body mark.pulse { animation: markpulse .9s var(--ease); }
@keyframes markpulse { 0% { box-shadow: 0 0 0 0 rgba(193,95,56,.5); } 100% { box-shadow: 0 0 0 10px rgba(193,95,56,0); } }
.rp-item[data-linked] { cursor: pointer; }
.rp-item[data-linked]:hover { border-color: rgba(193,95,56,.45); }
:root[data-scheme="dark"] .rp-item[data-linked]:hover { border-color: rgba(224,138,95,.5); }

/* ============================================================
   WAX SEAL — a little "sealed by two students" stamp
   ============================================================ */
.seal-strip { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(30px,6vh,64px) 24px clamp(24px,4vh,44px); }
.wax-seal {
  width: 96px; height: 92px;
  border-radius: 49% 51% 48% 52% / 52% 48% 51% 49%;   /* smooth, gently organic */
  background:
    radial-gradient(circle at 36% 26%, var(--gold), transparent 46%),
    radial-gradient(circle at 66% 80%, rgba(66,44,16,.4), transparent 55%),
    radial-gradient(circle at 50% 46%, #c8a05f, #a77f42 56%, var(--gold));
  box-shadow:
    0 16px 26px -10px rgba(66,44,16,.55),
    inset 0 3px 9px rgba(255,244,214,.45),
    inset 0 -11px 18px rgba(58,38,14,.4);
  display: grid; place-items: center; color: #6e5124;
  transform: rotate(-6deg); position: relative;
  transition: transform .45s var(--ease);
}
/* recessed inner field where the design is stamped */
.wax-seal::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #c19a58, #a2793d 72%);
  box-shadow: inset 0 3px 8px rgba(58,38,14,.5), inset 0 -2px 4px rgba(255,244,214,.28);
}
.wax-seal:hover { transform: rotate(0) scale(1.06); }
.ws-inner { position: relative; z-index: 1; text-align: center; line-height: 1; }
/* embossed relief — raised out of the field (highlight top, shadow bottom) */
.ws-page {
  width: 30px; height: 30px; display: block; margin: 0 auto; color: #b98f4c;
  filter: drop-shadow(0 1.5px 0.5px rgba(58,38,14,.55)) drop-shadow(0 -1px 0.5px rgba(255,244,214,.5));
}
.ws-txt {
  display: block; margin-top: 3px;
  font-family: var(--font-body); font-weight: 800; font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  color: #a2793d;
  text-shadow: 0 1px 0 rgba(58,38,14,.55), 0 -0.5px 0 rgba(255,244,214,.45);
}
.seal-cap { margin: 0; font-family: 'Caveat', cursive; font-size: 20px; color: var(--ink-55); }

/* ============================================================
   404 — a page torn from the book
   ============================================================ */
.notfound { min-height: 62vh; display: grid; place-items: center; padding: 60px 24px; text-align: center; }
.nf-page {
  position: relative; max-width: 520px; padding: 54px 46px 46px;
  background: linear-gradient(180deg,#fdfaf4,#f6eede);
  border: 1px solid var(--card-line); border-radius: 6px 6px 4px 4px;
  box-shadow: 0 30px 70px -34px rgba(46,32,22,.5);
  transform: rotate(-1.2deg);
}
:root[data-scheme="dark"] .nf-page { background: linear-gradient(180deg,#271e16,#201810); }
.nf-page::after { /* folded dog-ear corner */
  content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 46px;
  background: linear-gradient(225deg, var(--paper-2) 0 50%, transparent 50%);
  border-left: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line);
  border-radius: 0 6px 0 6px;
}
:root[data-scheme="dark"] .nf-page::after { background: linear-gradient(225deg, #14100c 0 50%, transparent 50%); }
.nf-page h1 { font-family: var(--font-display); font-size: clamp(38px,6vw,58px); line-height: 1.02; margin: 8px 0 0; }
.nf-page h1 .accent { color: var(--terracotta); }
.nf-page p { margin: 18px auto 26px; max-width: 400px; color: var(--ink-70); line-height: 1.7; }

/* ============================================================
   BRIDGE — "any subject" icon strip between showcase & story
   ============================================================ */
.bridge { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(24px,5vh,52px) 24px; }
.bridge-row { display: flex; align-items: center; gap: clamp(12px,2.5vw,24px); }
.bridge-rule { height: 1px; width: clamp(24px,7vw,84px); background: var(--card-line); }
.bridge-icons { display: flex; gap: clamp(10px,1.6vw,16px); }
.bi {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--terracotta);
  background: rgba(131,80,47,.08); border: 1px solid var(--card-line);
  transition: transform .3s var(--ease), background .3s, color .3s;
  animation: bifloat 5s ease-in-out infinite;
}
:root[data-scheme="dark"] .bi { background: rgba(201,145,95,.1); }
.bi svg { width: 20px; height: 20px; }
.bi:nth-child(1) { animation-delay: 0s; }
.bi:nth-child(2) { animation-delay: -1s; }
.bi:nth-child(3) { animation-delay: -2s; }
.bi:nth-child(4) { animation-delay: -3s; }
.bi:nth-child(5) { animation-delay: -4s; }
.bi:hover { transform: translateY(-5px) scale(1.08); background: rgba(131,80,47,.16); color: var(--pop); }
@keyframes bifloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.bridge-cap { margin: 0; font-family: 'Caveat', cursive; font-size: clamp(18px,2vw,23px); color: var(--ink-55); }
@media (prefers-reduced-motion: reduce) { .bi { animation: none; } }

/* ============================================================
   FAQ reveal — items stagger in on scroll
   ============================================================ */
.js .faq-list.reveal { opacity: 1; transform: none; }   /* the list itself stays put; items animate */
.js .faq-list .faq-item { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .faq-list.in .faq-item { opacity: 1; transform: none; }
.faq-list .faq-item:nth-child(1) { transition-delay: .04s; }
.faq-list .faq-item:nth-child(2) { transition-delay: .10s; }
.faq-list .faq-item:nth-child(3) { transition-delay: .16s; }
.faq-list .faq-item:nth-child(4) { transition-delay: .22s; }
.faq-list .faq-item:nth-child(5) { transition-delay: .28s; }
.faq-list .faq-item:nth-child(6) { transition-delay: .34s; }
.faq-list .faq-item:nth-child(7) { transition-delay: .40s; }
.faq-list .faq-item:nth-child(8) { transition-delay: .46s; }
.faq-list .faq-item:nth-child(9) { transition-delay: .52s; }
.faq-list .faq-item:nth-child(10) { transition-delay: .58s; }
.faq-list .faq-item:nth-child(11) { transition-delay: .64s; }
.faq-list .faq-item:nth-child(12) { transition-delay: .70s; }

@media (prefers-reduced-motion: reduce) {
  .js .faq-list .faq-item { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   LEGAL PAGES (privacy / terms)
   ============================================================ */
.legal { max-width: 720px; margin: 0 auto; padding: 54px 24px 96px; }
.legal .ip-back { margin-bottom: 28px; }
.legal h1 { font-family: var(--font-display); font-size: clamp(34px,5vw,52px); line-height: 1.05; letter-spacing: -.02em; }
.legal-updated { margin: 10px 0 0; font-size: 14px; color: var(--ink-55); }
.legal-body { margin-top: 34px; }
.legal-body h2 { font-family: var(--font-display); font-size: clamp(21px,3vw,27px); line-height: 1.2; margin: 42px 0 12px; }
.legal-body p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.75; color: var(--ink-70); }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-70); }
.legal-body li { margin-bottom: 7px; line-height: 1.65; }
.legal-body a { color: var(--terracotta); font-weight: 600; text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-body code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; background: rgba(46,32,22,.1); padding: 2px 6px; border-radius: 5px; }
:root[data-scheme="dark"] .legal-body code { background: rgba(236,227,208,.12); }
.legal-note {
  border-left: 3px solid var(--terracotta);
  padding: 2px 0 2px 16px; margin: 0 0 14px;
  font-family: var(--font-display); font-size: 17.5px; font-style: italic; color: var(--ink);
}

/* ============================================================
   WHO IT'S FOR — honestly, everyone (marquee + characters + finale)
   ============================================================ */
.who { position: relative; max-width: 1100px; margin: 0 auto; padding: clamp(52px,9vh,110px) 24px clamp(70px,11vh,120px); }
.who-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.who-ambient svg { position: absolute; color: var(--ink); opacity: .05; width: 42px; }
:root[data-scheme="dark"] .who-ambient svg { color: var(--cream); opacity: .045; }
.wa1 { top: 10%; left: 4%; animation: whodrift 19s ease-in-out infinite; }
.wa2 { top: 70%; right: 5%; width: 34px; animation: whodrift 23s ease-in-out infinite reverse; }
.wa3 { top: 44%; left: 7%; width: 26px; animation: whodrift 26s ease-in-out infinite; }
@keyframes whodrift { 0%,100%{transform:translate(0,0) rotate(-6deg)} 50%{transform:translate(10px,-16px) rotate(8deg)} }

.who-head { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto clamp(26px,4vh,40px); }
.who-head h2 { font-size: clamp(34px,5.4vw,60px); line-height: 1.02; }
.who-head h2 .big { color: var(--pop); }
.who-head .lead { margin-top: 16px; }

.marquee { position: relative; z-index: 1; margin: 8px -24px clamp(34px,5vh,52px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-row { display: flex; gap: 12px; width: max-content; will-change: transform; }
.marquee-row.r1 { animation: scrollL 44s linear infinite; }
.marquee-row.r2 { animation: scrollR 52s linear infinite; margin-top: 12px; }
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes scrollL { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes scrollR { from{transform:translateX(-50%)} to{transform:translateX(0)} }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border-radius: 100px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #fff), var(--card)); border: 1px solid var(--card-line);
  font-family: var(--font-body); font-size: 15px; color: var(--ink); white-space: nowrap; }
:root[data-scheme="dark"] .chip { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 80%, #000)); }
.chip .em { font-size: 17px; line-height: 1; }
.chip.you { background: linear-gradient(180deg,var(--pop),var(--pop-2)); color: #fff; border-color: transparent; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(169,74,41,.5); }

.who-eg { position: relative; z-index: 1; text-align: center; font-family: 'Caveat', cursive; font-size: clamp(20px,2.4vw,26px); color: var(--ink-55); margin: 0 0 22px; }

.who-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 760px) { .who-grid { grid-template-columns: 1fr; } }

/* Cards stay put: no hover lift, and the back face is absolutely positioned
   so its demos can never change the card's height and nudge the page. */
.who-card { position: relative; perspective: 1400px; cursor: pointer; }
.who-inner { position: relative; display: grid; transform-style: preserve-3d; height: 100%;
  transition: transform .75s cubic-bezier(.3,.7,.2,1); }
.who-card.flipped .who-inner { transform: rotateY(180deg); }
.who-face { grid-area: 1 / 1; position: relative; overflow: hidden; padding: 28px 30px 26px; border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #fff), var(--card)); border: 1px solid var(--card-line);
  box-shadow: 0 28px 50px -32px rgba(46,32,22,.44);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: box-shadow .4s var(--ease); }
:root[data-scheme="dark"] .who-face { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 80%, #000)); }
.who-card:hover .who-face { box-shadow: 0 46px 70px -36px rgba(46,32,22,.55); }
.who-face::after { content:""; position:absolute; top:-50px; right:-50px; width:180px; height:180px; border-radius:50%;
  background: var(--tint, rgba(217,162,76,.18)); filter: blur(12px); pointer-events:none; opacity:.75;
  transition: opacity .4s, transform .5s var(--ease); }
.who-card:hover .who-face::after { opacity: 1; transform: scale(1.15); }
.who-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; cursor: default; padding: 22px 24px 20px; }
.who-illus { position: relative; z-index: 1; width: 100%; height: 168px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.char-svg { display: block; height: 168px; width: 214px; flex: none; overflow: visible; }
.who-card h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 25px; margin-bottom: 8px; }
.who-card p { position: relative; z-index: 1; color: var(--ink-70); font-size: 15px; line-height: 1.65; margin: 0 0 14px; }
.who-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.who-tag, .wb-tab { font-family: var(--font-body); font-size: 12px; color: var(--terracotta); background: color-mix(in srgb, var(--terracotta) 12%, transparent);
  border: 1px solid transparent; border-radius: 100px; padding: 4px 11px 4px 10px; line-height: 1.5;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.who-tag::before { content: "↻"; font-size: 11px; opacity: .55; transition: transform .35s var(--ease), opacity .2s; }
.who-tag:hover, .who-tag:focus-visible { background: var(--terracotta); color: #fff; transform: translateY(-1px); }
.who-tag:hover::before { transform: rotate(180deg); opacity: 1; }
:root[data-scheme="dark"] .who-tag, :root[data-scheme="dark"] .wb-tab { background: color-mix(in srgb, var(--terracotta) 16%, transparent); }
:root[data-scheme="dark"] .who-tag:hover { background: var(--terracotta); color: #1a130d; }
.who-tag:focus-visible, .wb-tab:focus-visible, .wb-close:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }

/* back face */
.wb-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wb-role { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.wb-close { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-70); background: none; border: 1px solid var(--card-line);
  border-radius: 100px; padding: 4px 12px; transition: color .2s, border-color .2s, background .2s; }
.wb-close:hover { color: var(--pop); border-color: var(--pop); }
.wb-tabs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wb-tab[aria-selected="true"] { background: var(--terracotta); color: #fff; }
:root[data-scheme="dark"] .wb-tab[aria-selected="true"] { background: var(--terracotta); color: #1a130d; }
.wb-stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; }
.wb-cap { position: relative; z-index: 1; margin: 12px 0 0 !important; font-size: 14px !important; }

/* shared demo pieces — each replays when its tag is picked */
.dm { flex: 1; position: relative; background: var(--card); border: 1px solid var(--card-line); border-radius: 16px;
  padding: 12px 16px; font-size: 14px; line-height: 1.6; color: var(--ink); overflow: hidden; }
.dm-file { font-size: 11px; letter-spacing: .04em; color: var(--ink-55); border-bottom: 1px solid var(--card-line); padding-bottom: 7px; margin-bottom: 10px; }
.dm-h { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.dm-n { font-family: var(--font-body); font-size: 11px; background: var(--pop); color: #fff; border-radius: 100px; padding: 0 7px; }
.dm-text { margin: 0 !important; font-size: 14.5px !important; color: var(--ink) !important; line-height: 1.7 !important; }
.dm-hl { color: inherit; background-image: linear-gradient(var(--hl, rgba(233,196,106,.62)), var(--hl, rgba(233,196,106,.62)));
  background-repeat: no-repeat; background-position: 0 60%; background-size: 0% 80%; background-color: transparent; border-radius: 3px;
  animation: dmsweep .7s var(--ease) forwards; animation-delay: var(--d, .3s); }
@keyframes dmsweep { to { background-size: 100% 80%; } }
.pop { opacity: 0; transform: translateY(8px) scale(.97); animation: dmpop .5s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes dmpop { to { opacity: 1; transform: none; } }
.dm-quote { margin-top: 12px; padding: 9px 12px; border-left: 3px solid var(--pop); background: rgba(193,95,56,.08); border-radius: 0 10px 10px 0;
  font-style: italic; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dm-pg, .dm-cite { font-style: normal; font-size: 11px; color: var(--pop); background: color-mix(in srgb, var(--pop) 12%, transparent); border-radius: 100px; padding: 1px 8px; white-space: nowrap; }
.dm-note { font-family: 'Caveat', cursive; font-size: 20px; line-height: 1.1; color: var(--pop); }
.dm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dm-list li { display: flex; gap: 10px; align-items: baseline; padding: 5px 10px; border-radius: 10px; background: rgba(131,80,47,.06); }
:root[data-scheme="dark"] .dm-list li { background: rgba(236,227,208,.05); }
.dm-list b { font-family: var(--font-display); font-weight: 600; min-width: 88px; }
.dm-list span { color: var(--ink-70); font-size: 13px; }
.dm-check { width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1.5px solid var(--terracotta); position: relative; align-self: center; }
.dm-check::after { content: "✓"; position: absolute; inset: -4px 0 0 1px; font-size: 14px; font-weight: 700; color: var(--pop);
  opacity: 0; transform: scale(.3); animation: dmpop .35s var(--ease) forwards; animation-delay: var(--d, 0s); }
.dm-done { position: relative; }
.dm-done::after { content: ""; position: absolute; left: 36px; right: 12px; top: 50%; height: 1.5px; background: var(--ink-40);
  transform: scaleX(0); transform-origin: left; animation: dmstrike .45s var(--ease) forwards; animation-delay: calc(var(--d, 0s) + .15s); }
@keyframes dmstrike { to { transform: scaleX(1); } }
.dm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dm-edge { stroke: var(--terracotta); stroke-width: 1.6; fill: none; stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: dmdraw .8s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes dmdraw { to { stroke-dashoffset: 0; } }
.dm-node { opacity: 0; animation: dmfade .45s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes dmfade { to { opacity: 1; } }
.dm-node rect { fill: var(--card); stroke: var(--terracotta); stroke-width: 1.4; }
.dm-node.main rect { fill: var(--pop); stroke: none; }
.dm-node text { font-family: var(--font-body); font-size: 12px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.dm-node.main text { fill: #fff; font-weight: 600; }
.dm-lbl { font-family: 'Caveat', cursive; font-size: 15px; fill: var(--pop); text-anchor: middle; }
.dm-type::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: var(--pop); margin-left: 1px; vertical-align: -2px; animation: caretblink 1s steps(1) infinite; }
.dm-bars { display: grid; gap: 9px; margin-top: 4px; }
.dm-bars i { display: block; height: 7px; border-radius: 4px; background: var(--card-line); }
.dm-badges { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 12px; }
.dm-badges span { font-size: 12px; padding: 4px 11px; border-radius: 100px; background: rgba(163,177,138,.22); color: var(--ink); }

/* reveal: stagger only the entrance, never the hover */
.js .who-card.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .who-card.reveal.in { opacity: 1; transform: none; }
.js .who-card.reveal:not(.in):nth-child(2){ transition-delay:.09s } .js .who-card.reveal:not(.in):nth-child(3){ transition-delay:.18s } .js .who-card.reveal:not(.in):nth-child(4){ transition-delay:.27s }

.who-cta { position: relative; z-index: 1; overflow: hidden; margin-top: 26px; padding: clamp(38px,6vw,56px) 32px;
  border-radius: 28px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pop) 9%, var(--card)), color-mix(in srgb, var(--pop) 17%, var(--card))); border: 1px solid color-mix(in srgb, var(--pop) 24%, transparent); }
:root[data-scheme="dark"] .who-cta { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 82%, #000)); border-color: color-mix(in srgb, var(--pop) 30%, transparent); }
.who-cta .wave-char { display: block; margin: 0 auto 6px; width: 128px; height: 104px; overflow: visible; }
.who-cta h3 { font-family: var(--font-display); font-size: clamp(26px,4.4vw,42px); line-height: 1.06; }
.who-cta h3 em { font-style: italic; color: var(--pop); }
.who-cta p { max-width: 560px; margin: 14px auto 0; color: var(--ink-70); font-size: clamp(16px,1.7vw,18px); line-height: 1.65; }
.who-cta .btn { margin-top: 24px; }

/* character animation */
.who .anim { transform-box: fill-box; transform-origin: center; }
.who .char { transform-box: fill-box; transform-origin: bottom center; }
.who .bk { transform-box: fill-box; transform-origin: center; }
.who .bob { animation: cbob 3.6s ease-in-out infinite; } .who .bob2 { animation: cbob 4.3s ease-in-out infinite .4s; }
.who .tw { animation: ctw 2.6s ease-in-out infinite; } .who .tw.d { animation-delay: 1.1s; } .who .tw.d2 { animation-delay:.6s; }
.who .wig { animation: cwig 3s ease-in-out infinite; } .who .capbob { animation: ccap 3.6s ease-in-out infinite; }
.who .mmpulse { animation: mmpulse 2.4s ease-in-out infinite; } .who .scan { animation: cscan 4.6s ease-in-out infinite; }
.who .glow { animation: cglow 3.4s ease-in-out infinite; } .who .heart { animation: cheart 3.6s ease-in-out infinite; }
.who .wave { animation: cwave 1.5s ease-in-out infinite; transform-box: fill-box; }
.who .check { stroke-dasharray: 66; stroke-dashoffset: 66; animation: cdraw 4s ease-in-out infinite; }
.who .eyes { animation: cblink 4s infinite; } .who .eyes2 { animation: cblink 5.3s infinite; }
.who .eyes3 { animation: cblink 4.6s infinite; } .who .eyes4 { animation: cblink 5.9s infinite; } .who .eyes5 { animation: cblink 5s infinite; }
@keyframes cbob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes ctw { 0%,100%{transform:scale(1) rotate(0);opacity:1} 50%{transform:scale(.4) rotate(40deg);opacity:.3} }
@keyframes cwig { 0%,100%{transform:rotate(2deg)} 50%{transform:rotate(-10deg)} }
@keyframes ccap { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(-4deg)} }
@keyframes mmpulse { 0%,100%{transform:scale(1);opacity:.82} 50%{transform:scale(1.13);opacity:1} }
@keyframes cscan { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-10px,-8px) rotate(-4deg)} }
@keyframes cglow { 0%,100%{opacity:.14} 50%{opacity:.32} }
@keyframes cheart { 0%{transform:translateY(8px) scale(.85);opacity:0} 25%{opacity:1} 100%{transform:translateY(-30px) scale(1.05);opacity:0} }
@keyframes cwave { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(20deg)} }
@keyframes cdraw { 0%{stroke-dashoffset:66} 45%{stroke-dashoffset:0} 88%{stroke-dashoffset:0} 100%{stroke-dashoffset:66} }
@keyframes cblink { 0%,94%,100%{transform:scaleY(1)} 97%{transform:scaleY(.12)} }

.who-card:hover .cheek { opacity: .55; }
.who .cheek { transition: opacity .3s; }

@media (prefers-reduced-motion: reduce) {
  .who .bob,.who .bob2,.who .tw,.who .wig,.who .capbob,.who .mmpulse,.who .scan,.who .glow,.who .heart,.who .wave,.who .check,.who .eyes,.who .eyes2,.who .eyes3,.who .eyes4,.who .eyes5,.wa1,.wa2,.wa3,.marquee-row { animation: none; }
  .who .check { stroke-dashoffset: 0; }
  .who-inner { transition: none; }
  .who-card.flipped .who-inner { transform: none; }
  .who-card.flipped .who-front { visibility: hidden; }
  .who-back { transform: none; visibility: hidden; }
  .who-card.flipped .who-back { visibility: visible; }
  .dm *, .dm *::after { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* who-section: a more prominent eyebrow */
.who-head .eyebrow { font-size: 16px; letter-spacing: .2em; margin-bottom: 20px; }

/* ============================================================
   WHY WE STARTED — the problems behind the app
   ============================================================ */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 28px; }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }
.why-card { position: relative; padding: 30px 30px 24px 58px; border-radius: 6px 18px 18px 6px;
  background:
    linear-gradient(90deg, transparent 38px, rgba(193,95,56,.28) 38px, rgba(193,95,56,.28) 39.5px, transparent 39.5px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(46,32,22,.07) 27px 28px),
    var(--card);
  border: 1px solid var(--card-line); box-shadow: 0 26px 44px -30px rgba(46,32,22,.45);
  rotate: var(--r, 0deg); transition: rotate .45s var(--ease), box-shadow .45s var(--ease); }
:root[data-scheme="dark"] .why-card { background:
    linear-gradient(90deg, transparent 38px, color-mix(in srgb, var(--pop) 30%, transparent) 38px, color-mix(in srgb, var(--pop) 30%, transparent) 39.5px, transparent 39.5px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(236,227,208,.06) 27px 28px),
    var(--card); }
.why-card:hover { rotate: 0deg; box-shadow: 0 34px 60px -32px rgba(46,32,22,.55); }
.why-card { display: flex; flex-direction: column; padding-top: 26px; }
.why-card h3 { font-size: clamp(20px,2.1vw,24px); line-height: 1.3; margin-bottom: 10px; font-style: italic; font-weight: 600; }
.why-card p em { font-style: italic; color: var(--ink); }
.why-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.why-mono { width: 44px; height: 44px; font-size: 16px; animation: none; }
.why-card:nth-child(2) .why-mono { background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 70%, #000)); box-shadow: 0 12px 26px -10px rgba(217,162,76,.5); }
.why-mono::after { inset: -4px; }
.why-who b { display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.2; }
.why-who span:not(.monogram) { font-size: 12px; letter-spacing: .04em; color: var(--ink-55); }

/* before → after strip */
.why-ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin: 18px 0 4px; }
.ba-side { position: relative; overflow: hidden; border-radius: 12px; padding: 26px 12px 12px; min-height: 118px; border: 1px solid var(--card-line); }
.ba-before { background: rgba(46,32,22,.04); }
.ba-after { background: rgba(163,177,138,.14); }
:root[data-scheme="dark"] .ba-before { background: rgba(236,227,208,.04); }
.ba-lbl { position: absolute; top: 7px; left: 12px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); }
.ba-arrow { align-self: center; font-size: 20px; color: var(--pop); }
.ba-page { position: relative; height: 84px; }
.ba-page i { display: block; height: 5px; width: 74%; margin: 0 0 9px; border-radius: 3px; background: var(--card-line); }
.scr { position: absolute; font-family: 'Caveat', cursive; color: var(--pop); line-height: 1; white-space: nowrap; }
.s1 { right: 4px; top: -3px; font-size: 14px; rotate: -5deg; }
.s2 { left: 34%; top: 20px; font-size: 15px; rotate: -8deg; color: var(--terracotta); }
.s3 { right: 10%; top: 38px; font-size: 18px; rotate: 10deg; }
.s4 { left: 4%; top: 56px; font-size: 14px; rotate: 4deg; color: var(--terracotta); }
.ba-after ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ba-after li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
.ba-after li b { margin-left: auto; font-size: 11px; color: var(--ink-55); font-weight: 600; }
.ba-after li em { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.d1 { background: #e9c46a; } .d2 { background: #e8998d; } .d3 { background: #a3b18a; } .d4 { background: var(--terracotta); }
.why-card .ba-q { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.why-card .ba-s { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-55); }
.why-card .why-fix { margin-top: auto; padding-top: 14px; }
@media (max-width: 460px) { .why-ba { grid-template-columns: 1fr; } .ba-arrow { justify-self: center; rotate: 90deg; } }
.why-card p { margin: 0; color: var(--ink-70); font-size: 15.5px; line-height: 1.7; }
.why-card .why-fix { margin-top: 12px; font-family: 'Caveat', cursive; font-size: 23px; line-height: 1.15; color: var(--terracotta); }
.why-fix span { color: var(--pop); display: inline-block; transition: transform .35s var(--ease); }
.why-card:hover .why-fix span { transform: translateX(4px); }
.why-close { text-align: center; max-width: 640px; margin: clamp(34px,5vh,50px) auto 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px,2.4vw,26px); line-height: 1.45; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .why-card { transition: none; } }

/* ============================================================
   PARTNER — IB Way 2 Seven announcement bar + section.
   Deliberately set apart from Litranite's own features: a
   dashed border, a cooler sage tint and a "Partner" label.
   ============================================================ */
.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; }

.partner-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 52px; background: linear-gradient(90deg, var(--terracotta-2), var(--pop) 55%, var(--terracotta)); color: #fdf6ee; }
.pb-dismissed .partner-bar { display: none; }
.pb-text { margin: 0; font-size: 14px; line-height: 1.4; text-align: center; }
.pb-text b { font-weight: 600; }
.pb-text a { color: inherit; font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.pb-text a::after { content: " ↓"; }
.pb-text a:hover { text-decoration-thickness: 2px; }
.pb-close { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 20px; line-height: 1; transition: background .2s; }
.pb-close:hover { background: rgba(255,255,255,.18); }
.pb-close:focus-visible, .pb-text a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
:root[data-scheme="dark"] .partner-bar { color: #1a130d; }
:root[data-scheme="dark"] .pb-close:hover { background: rgba(0,0,0,.12); }
@media (max-width: 640px) { .pb-long { display: none; } .partner-bar { padding: 8px 46px; } }

/* The partner section is one compact "referral pass": a ticket in the site's
   own paper colours (so it follows light/dark), set apart from Litranite's
   features by its perforated stub, notches and a rubber stamp. */
.partner { max-width: 940px; margin: 0 auto; padding: clamp(36px,6vh,64px) 20px clamp(12px,2vh,24px); scroll-margin-top: 70px; }
.pass-wrap { filter: drop-shadow(0 22px 26px rgba(46,32,22,.16)); }
:root[data-scheme="dark"] .pass-wrap { filter: drop-shadow(0 22px 26px rgba(0,0,0,.45)); }
.pass { --cut: 64%; position: relative; display: grid; grid-template-columns: 64fr 36fr;
  background: var(--card);
  border-radius: 22px;
  /* two semicircle notches where the stub tears off */
  -webkit-mask: radial-gradient(circle 13px at var(--cut) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 13px at var(--cut) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 13px at var(--cut) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 13px at var(--cut) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.pass-main { padding: 26px 30px 24px; text-align: left; }
.partner-tag { display: inline-block; padding: 2px 11px; border-radius: 100px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--terracotta); border: 1px solid currentColor; opacity: .85; }
.pass-logos { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
/* both logos sit in matching tiles; the tile colour is the Litranite icon's
   own background in each theme, so the two read as a pair */
.pl-tile { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1px solid var(--card-line); box-shadow: 0 8px 18px -12px rgba(46,32,22,.45); }
:root[data-scheme="dark"] .pl-tile { background: #212120; box-shadow: 0 8px 18px -12px rgba(0,0,0,.7); }
.pl-tile img { width: 44px; height: 44px; object-fit: contain; }
.pl-tile .lm-light, .pl-tile .lm-dark { width: 50px; height: 50px; }
.pass-logos .lm-dark { display: none; }
:root[data-scheme="dark"] .pass-logos .lm-light { display: none; }
:root[data-scheme="dark"] .pass-logos .lm-dark { display: block; }
.pl-x { font-family: var(--font-display); font-size: 22px; color: var(--pop); transition: rotate .5s var(--ease); }
.pass:hover .pl-x { rotate: 90deg; }
.pass-logos .partner-tag { margin-left: 6px; }
.partner h2 { margin: 0; font-size: clamp(22px,2.6vw,28px); line-height: 1.15; }
.partner-x { color: var(--pop); font-weight: 500; display: inline-block; margin: 0 .08em; transition: rotate .5s var(--ease); }
.pass:hover .partner-x { rotate: 90deg; }
.partner-intro { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-70); }
.pass-roles { margin: 16px 0 0; display: grid; gap: 12px; }
.pass-roles dt { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); }
.pass-roles dt i { width: 8px; height: 8px; border-radius: 50%; }
.dot-lit { background: var(--pop); } .dot-ib { background: #8fa36d; }
.pass-roles dd { margin: 3px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-70); }

.pass-stub { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0;
  padding: 26px 26px 24px 28px; text-align: left; border-left: 2px dashed var(--card-line);
  background: linear-gradient(180deg, rgba(193,95,56,.06), rgba(193,95,56,.02)); }
:root[data-scheme="dark"] .pass-stub { border-left-color: rgba(236,227,208,.2); background: linear-gradient(180deg, rgba(224,138,95,.08), rgba(224,138,95,.02)); }
.pass-kicker { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--terracotta); }
.pass-big { margin: 2px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3vw,32px); line-height: 1.05; color: var(--pop); }
.partner-offer { margin: 0 0 16px; font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pass-stub .btn { padding: 11px 20px; font-size: 14px; }
.pass-stamp { position: absolute; top: 12px; right: 12px; width: 70px; height: 70px; color: var(--pop); opacity: .5; rotate: 14deg;
  transition: rotate .6s var(--ease), opacity .3s; pointer-events: none; }
.pass-stamp text { font-family: var(--font-body); font-size: 8.5px; font-weight: 600; fill: currentColor; }
.pass-stamp .st-mid { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 0; }
.pass:hover .pass-stamp { rotate: -6deg; opacity: .75; }
.partner-fine { max-width: 560px; margin: 14px auto 0; text-align: center; font-size: 12px; line-height: 1.55; color: var(--ink-55); }

@media (max-width: 700px) {
  .pass { grid-template-columns: 1fr;
    -webkit-mask: radial-gradient(circle 13px at 0 var(--cut), #0000 97%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 13px at 100% var(--cut), #0000 97%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 13px at 0 var(--cut), #0000 97%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 13px at 100% var(--cut), #0000 97%, #000) right / 51% 100% no-repeat; }
  .pass-main { padding: 22px 20px 20px; }
  .pass-stub { border-left: 0; border-top: 2px dashed var(--card-line); padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) { .partner-x, .pass-stamp { transition: none; } }

/* hero hook: a pinned sticky note pointing at the partnership */
.hero > .ib-note { position: absolute; z-index: 3; top: 118px; right: max(16px, calc(50% - 620px)); width: 230px; text-align: left; }
.ib-note { display: block; padding: 22px 18px 16px; text-decoration: none; color: #3a2a18; font-size: 14px; line-height: 1.5;
  background: linear-gradient(180deg, #fbeaa6, #f5dd86); box-shadow: 0 18px 30px -16px rgba(60,40,10,.45), 0 2px 0 rgba(0,0,0,.04);
  border-radius: 3px 3px 14px 3px; rotate: 5deg; transition: rotate .45s var(--ease), translate .45s var(--ease), box-shadow .45s var(--ease);
  animation: notein .9s var(--ease) 1.6s backwards; }
.ib-note:hover { rotate: 1deg; translate: 0 -4px; box-shadow: 0 26px 40px -18px rgba(60,40,10,.5); }
.ib-pin { position: absolute; top: -7px; left: 50%; translate: -50% 0; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f08a64, #b8492a 70%); box-shadow: 0 3px 5px rgba(0,0,0,.3); }
.ib-note-k { display: block; font-family: 'Caveat', cursive; font-size: 27px; line-height: 1; color: #a94a29; margin-bottom: 6px; }
.ib-note b { font-weight: 700; }
.ib-note-go { display: inline-block; margin-top: 8px; font-family: 'Caveat', cursive; font-size: 20px; color: #a94a29; transition: translate .3s var(--ease); }
.ib-note:hover .ib-note-go { translate: 4px 0; }
.ib-note:focus-visible { outline: 2px solid var(--pop); outline-offset: 4px; }
@keyframes notein { from { opacity: 0; translate: 0 -16px; rotate: 14deg; } }
@media (max-width: 1240px) {
  .hero > .ib-note { position: relative; top: auto; right: auto; width: auto; max-width: 330px; margin: 30px auto 0; rotate: -2deg; }
  .hero > .ib-note:hover { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) { .ib-note { animation: none; transition: none; } }

/* merged story: founders sit inside the story section */
.story-bridge { margin: 34px auto 0; font-family: var(--font-display); font-size: clamp(19px,2.2vw,24px); font-weight: 500; color: var(--ink); }
.story-bridge span { display: block; margin-top: 4px; font-family: 'Caveat', cursive; font-size: 22px; color: var(--terracotta); }
.story-founders { max-width: 1100px; margin: clamp(26px,4vh,40px) auto 0; text-align: left; }
.story-founders .why-close { text-align: center; }
a.why-who { text-decoration: none; color: inherit; border-radius: 14px; margin: -6px -8px 8px; padding: 6px 8px; align-self: flex-start; transition: background .25s; }
a.why-who:hover { background: rgba(131,80,47,.08); }
a.why-who:hover b { color: var(--terracotta); }
.colophon .makers { margin-top: clamp(40px,6vh,64px); }

/* merged story is much taller now, so pin the margin notes to the text they
   point at instead of to percentages of the section */
.colophon .mn-1 { top: 400px; }
.colophon .mn-2 { top: 470px; }
.colophon .mn-3 { top: 585px; bottom: auto; right: max(12px, calc(50% - 500px)); }

@media (max-width: 560px) {
  .partner-lockup { flex-direction: column; gap: 4px; }
}

/* ============================================================
   THEMES — the app's nine palettes, previewed on a mock window.
   Every value below is copied from the app's design-system.css.
   ============================================================ */







.th-chip { display: flex; width: 100%; align-items: center; gap: 9px; padding: 7px 12px 7px 8px; border-radius: 10px;
  font-family: var(--font-body); font-size: 13.5px; text-align: left; color: var(--ink-70);
  background: transparent; border: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }

.th-chip .sw { width: 26px; height: 18px; border-radius: 5px; flex: none; border: 1px solid rgba(0,0,0,.18);
  background: linear-gradient(90deg, var(--s1) 0 34%, var(--s2) 34% 67%, var(--s3) 67% 100%); }
.th-chip:hover { transform: translateY(-1px); border-color: var(--terracotta); color: var(--ink); }
.th-chip.on { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
:root[data-scheme="dark"] .th-chip.on { color: #1a130d; }
.th-chip:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }

/* swatches — bg / surface / accent of each theme */
.th-chip[data-t="light"]       { --s1:#ffffff; --s2:#f3f3f3; --s3:#2c2c2c; }
.th-chip[data-t="dark"]        { --s1:#1e1e1e; --s2:#252526; --s3:#4fc1ff; }
.th-chip[data-t="serif-light"] { --s1:#fdf8f1; --s2:#f5efe5; --s3:#3b2f26; }
.th-chip[data-t="serif-dark"]  { --s1:#1c1712; --s2:#252019; --s3:#d4a06a; }
.th-chip[data-t="amoled"]      { --s1:#000000; --s2:#0a0a0a; --s3:#6cb4ee; }
.th-chip[data-t="nord"]        { --s1:#2e3440; --s2:#3b4252; --s3:#88c0d0; }
.th-chip[data-t="blush"]       { --s1:#fde0eb; --s2:#faccda; --s3:#c2185b; }
.th-chip[data-t="catppuccin"]  { --s1:#1e1e2e; --s2:#181825; --s3:#cba6f7; }
.th-chip[data-t="everforest"]  { --s1:#2d353b; --s2:#272e33; --s3:#a7c080; }

/* ============================================================
   TESTIMONIALS — a pinboard: one quote up in lights, then the
   rest as taped-up notes at slight angles.
   ============================================================ */
.testi { max-width: 1120px; margin: 0 auto; padding: clamp(40px,7vh,84px) 24px clamp(20px,3vh,40px); }
.te-head { text-align: center; max-width: 780px; margin: 0 auto clamp(24px,4vh,36px); }
.te-head h2 { font-size: clamp(30px,4.4vw,50px); line-height: 1.06; }
.te-head h2 .accent { color: var(--pop); }

.te-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px,3vw,28px); margin-top: 26px; }
.te-stamp { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 14px;
  border: 2px dashed color-mix(in srgb, var(--pop) 55%, transparent); rotate: -1.5deg;
  transition: rotate .4s var(--ease); }
.te-stamp:nth-child(2) { rotate: 1.2deg; } .te-stamp:nth-child(3) { rotate: -.6deg; }
.te-stamp:hover { rotate: 0deg; }
.te-stamp b { font-family: var(--font-display); font-size: clamp(26px,3vw,34px); line-height: 1; color: var(--pop); }
.te-stamp span { font-size: 11.5px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55); text-align: left; }

/* the featured quote */
.te-featured { margin: 0 auto clamp(28px,4vh,40px); max-width: 820px; text-align: center; }
.te-featured blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(20px,2.6vw,30px); line-height: 1.45; color: var(--ink); }
.te-featured blockquote::before, .te-featured blockquote::after { content: "“"; color: var(--gold); font-style: normal; }
.te-featured blockquote::after { content: "”"; }
.te-featured figcaption { margin-top: 16px; }
.tf-name { font-family: 'Caveat', cursive; font-size: 26px; color: var(--terracotta); margin-right: 10px; }
.tf-role { font-size: 12.5px; color: var(--ink-55); }

/* the wall of notes */
.te-wall { columns: 3; column-gap: 22px; }
@media (max-width: 900px) { .te-wall { columns: 2; } }
@media (max-width: 620px) { .te-wall { columns: 1; max-width: 420px; margin: 0 auto; } }
.tnote { position: relative; break-inside: avoid; margin: 0 0 26px; padding: 26px 22px 18px;
  border-radius: 2px 14px 4px 12px; rotate: var(--r, 0deg);
  background: color-mix(in srgb, var(--tint) 26%, var(--card));
  box-shadow: 0 16px 26px -18px rgba(46,32,22,.55), 0 1px 0 color-mix(in srgb, var(--tint) 40%, transparent);
  transition: rotate .4s var(--ease), translate .4s var(--ease), box-shadow .4s var(--ease); }
:root[data-scheme="dark"] .tnote { background: color-mix(in srgb, var(--tint) 15%, var(--card)); }
.tnote::before { content: ""; position: absolute; top: -9px; left: 50%; translate: -50% 0; width: 84px; height: 20px;
  background: color-mix(in srgb, var(--cream, #fff) 55%, transparent); border: 1px solid rgba(255,255,255,.25);
  rotate: -2deg; opacity: .65; }
:root[data-scheme="light"] .tnote::before { background: rgba(255,255,255,.62); }
.tnote:nth-child(even)::before { rotate: 3deg; left: 42%; }
.tnote:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 0 26px 40px -20px rgba(46,32,22,.6); }
.tnote blockquote { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.tnote figcaption { display: flex; flex-direction: column; gap: 1px; margin-top: 14px; }
.tn-name { font-family: 'Caveat', cursive; font-size: 23px; line-height: 1.1; color: var(--terracotta); }
.tn-name.tn-anon { font-size: 19px; color: var(--ink-55); }
.tn-role { font-size: 12px; color: var(--ink-55); }
.te-note { text-align: center; margin: 4px 0 0; font-size: 13px; color: var(--ink-55); }
@media (prefers-reduced-motion: reduce) { .tnote, .te-stamp { transition: none; } }

/* ============================================================
   THE APP'S THEMES, ON THE WEBSITE.
   data-theme picks the palette; data-scheme (light|dark) decides
   which set of contrast rules applies.
   ============================================================ */
:root[data-theme="serif-light"] {
  --paper:#fdf8f1; --paper-2:#f5efe5; --card:#fffdf8; --card-line:rgba(42,31,22,.13);
  --ink:#2a1f16; --ink-70:rgba(42,31,22,.72); --ink-55:rgba(42,31,22,.55); --ink-40:rgba(42,31,22,.4);
  --espresso:#3b2f26; --espresso-2:#4a3b2f; --cream:#f5efe5; --cream-70:rgba(245,239,229,.72); --cream-45:rgba(245,239,229,.45);
  --terracotta:#7a4e2d; --terracotta-2:#5e4e3e; --pop:#a9632f; --pop-2:#8a4f25; --gold:#c99a4e;
}
:root[data-theme="serif-dark"] {
  --paper:#1c1712; --paper-2:#16120e; --card:#252019; --card-line:rgba(230,221,208,.14);
  --ink:#e6ddd0; --ink-70:rgba(230,221,208,.72); --ink-55:rgba(230,221,208,.55); --ink-40:rgba(230,221,208,.38);
  --espresso:#120e0a; --espresso-2:#1c150f; --cream:#e6ddd0; --cream-70:rgba(230,221,208,.72); --cream-45:rgba(230,221,208,.45);
  --terracotta:#d4a06a; --terracotta-2:#b8874f; --pop:#e0a06a; --pop-2:#c98a52; --gold:#e6c07a; --on-pop:#1c1712;
}
:root[data-theme="amoled"] {
  --paper:#000000; --paper-2:#000000; --card:#0c0c0c; --card-line:rgba(240,240,240,.16);
  --ink:#f0f0f0; --ink-70:rgba(240,240,240,.72); --ink-55:rgba(240,240,240,.55); --ink-40:rgba(240,240,240,.38);
  --espresso:#000000; --espresso-2:#0a0a0a; --cream:#f0f0f0; --cream-70:rgba(240,240,240,.72); --cream-45:rgba(240,240,240,.45);
  --terracotta:#6cb4ee; --terracotta-2:#4f9fdb; --pop:#6cb4ee; --pop-2:#4f9fdb; --gold:#9ecbf5; --on-pop:#001020;
}
:root[data-theme="nord"] {
  --paper:#2e3440; --paper-2:#272c38; --card:#3b4252; --card-line:rgba(236,239,244,.15);
  --ink:#eceff4; --ink-70:rgba(236,239,244,.74); --ink-55:rgba(236,239,244,.56); --ink-40:rgba(236,239,244,.4);
  --espresso:#242933; --espresso-2:#2e3440; --cream:#eceff4; --cream-70:rgba(236,239,244,.72); --cream-45:rgba(236,239,244,.45);
  --terracotta:#88c0d0; --terracotta-2:#6fa8ba; --pop:#88c0d0; --pop-2:#6fa8ba; --gold:#ebcb8b; --on-pop:#242933;
}
:root[data-theme="blush"] {
  --paper:#fde0eb; --paper-2:#faccda; --card:#fff4f8; --card-line:rgba(92,26,56,.15);
  --ink:#5c1a38; --ink-70:rgba(92,26,56,.74); --ink-55:rgba(92,26,56,.56); --ink-40:rgba(92,26,56,.4);
  --espresso:#7b2447; --espresso-2:#8d2c53; --cream:#ffeef4; --cream-70:rgba(255,238,244,.75); --cream-45:rgba(255,238,244,.5);
  --terracotta:#9a4565; --terracotta-2:#7d3350; --pop:#c2185b; --pop-2:#a3134c; --gold:#e88bb0;
}
:root[data-theme="catppuccin"] {
  --paper:#1e1e2e; --paper-2:#181825; --card:#26283c; --card-line:rgba(205,214,244,.15);
  --ink:#cdd6f4; --ink-70:rgba(205,214,244,.74); --ink-55:rgba(205,214,244,.56); --ink-40:rgba(205,214,244,.4);
  --espresso:#11111b; --espresso-2:#181825; --cream:#cdd6f4; --cream-70:rgba(205,214,244,.72); --cream-45:rgba(205,214,244,.45);
  --terracotta:#cba6f7; --terracotta-2:#b18cf0; --pop:#cba6f7; --pop-2:#b18cf0; --gold:#f9e2af; --on-pop:#1e1e2e;
}
:root[data-theme="everforest"] {
  --paper:#2d353b; --paper-2:#272e33; --card:#343f44; --card-line:rgba(211,198,170,.16);
  --ink:#d3c6aa; --ink-70:rgba(211,198,170,.74); --ink-55:rgba(211,198,170,.56); --ink-40:rgba(211,198,170,.4);
  --espresso:#1e2326; --espresso-2:#272e33; --cream:#d3c6aa; --cream-70:rgba(211,198,170,.72); --cream-45:rgba(211,198,170,.45);
  --terracotta:#a7c080; --terracotta-2:#8fae6b; --pop:#e69875; --pop-2:#d3845f; --gold:#dbbc7f; --on-pop:#2d353b;
}

/* every palette paints its own page background */
:root[data-theme="serif-light"] body, :root[data-theme="serif-dark"] body, :root[data-theme="amoled"] body,
:root[data-theme="nord"] body, :root[data-theme="blush"] body, :root[data-theme="catppuccin"] body,
:root[data-theme="everforest"] body {
  background:
    radial-gradient(120% 60% at 80% 0%, color-mix(in srgb, var(--pop) 10%, var(--paper)) 0%, transparent 55%),
    radial-gradient(90% 50% at 0% 30%, var(--paper-2) 0%, transparent 50%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 45%, var(--paper) 100%);
  background-attachment: fixed;
}
/* pieces that were pinned to the original brown palette */
:root[data-theme="nord"] .partner-box, :root[data-theme="catppuccin"] .partner-box,
:root[data-theme="everforest"] .partner-box, :root[data-theme="amoled"] .partner-box,
:root[data-theme="blush"] .partner-box, :root[data-theme="serif-dark"] .partner-box,
:root[data-theme="serif-light"] .partner-box { background: var(--card); }
:root[data-theme="blush"] .pl-tile, :root[data-theme="serif-light"] .pl-tile { background: #fff; }

/* Touch devices: no 3D flip. backface-visibility is unreliable there (both
   faces render at once and overlap mid-turn), so cross-fade instead. */
@media (hover: none), (max-width: 760px) {
  .who-inner { transform-style: flat; transition: none; }
  .who-card.flipped .who-inner { transform: none; }
  .who-face { transition: opacity .28s var(--ease), visibility 0s linear .28s; }
  .who-front { opacity: 1; visibility: visible; }
  .who-back { transform: none; opacity: 0; visibility: hidden; }
  .who-card.flipped .who-front { opacity: 0; visibility: hidden; }
  .who-card.flipped .who-back { opacity: 1; visibility: visible; transition: opacity .28s var(--ease); }
}

.theme-menu[hidden] { display: none; }

/* Surfaces that were painted in the original cream/ember follow the palette
   instead, so Nord, Blush, Catppuccin etc. don't show brown patches. */
.reader-demo { background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #fff) 0%, var(--card) 100%); }
:root[data-scheme="dark"] .reader-demo { background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--card) 80%, #000) 100%); }
.reader-chrome { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.reader-panel, .rp-list, .rp-item { background-color: transparent; }
.reader-panel { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.rp-item { background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--card-line); }
.use-chips span, .te-stats div, .maker:hover, .th-chip { background-color: color-mix(in srgb, var(--card) 65%, transparent); }
.btn-outline { background: color-mix(in srgb, var(--card) 55%, transparent); }
.btn-outline:hover { background: color-mix(in srgb, var(--card) 85%, transparent); }
.tnote::before { background: color-mix(in srgb, var(--paper) 65%, transparent); }
.theme-toggle { flex: none; }
.tt-name { white-space: nowrap; }
.nav-right { flex: none; }

/* contrast: white banner text needs the darker end of the gradient on the
   light palettes, and the pale accents need dark button labels */
:root[data-scheme="light"] .partner-bar {
  background: linear-gradient(90deg, var(--terracotta-2), var(--pop-2) 55%, var(--terracotta));
}
:root[data-theme="dark"], :root[data-theme="everforest"] { --on-pop: #1a1207; }

/* ---------- day / night button (back where it was) ---------- */
.theme-toggle {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--ink-70);
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid var(--card-line);
  transition: transform .3s var(--ease), color .25s, background .25s, border-color .25s;
}
.theme-toggle:hover { transform: rotate(-12deg) scale(1.08); color: var(--terracotta); border-color: var(--terracotta); }
.theme-toggle:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-moon { display: none; }
:root[data-scheme="dark"] .theme-toggle .ic-sun { display: none; }
:root[data-scheme="dark"] .theme-toggle .ic-moon { display: block; }

/* ---------- quiet theme touches ----------
   No pickers on show: one dot in the demo's window bar, three words in the
   FAQ, and the wax seal. Each one just changes the palette. */
.peb-one { width: 22px; height: 22px; margin-left: auto; margin-right: 10px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; border-radius: 50%; transition: transform .3s var(--ease); }
.peb-one span { display: block; width: 13px; height: 13px; border-radius: 50%;
  background: conic-gradient(var(--pop), var(--gold), var(--terracotta), var(--pop));
  box-shadow: 0 0 0 1px var(--card-line); }
.peb-one:hover { transform: rotate(120deg) scale(1.18); }
.peb-one:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; }

.faq-peb { font-family: var(--font-body); font-size: 13px; color: var(--terracotta); background: none;
  border: 0; border-bottom: 1.5px dashed currentColor; padding: 0 1px; margin: 0 2px; }
.faq-peb:hover { color: var(--pop); }
.faq-peb:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }

.wax-seal { cursor: pointer; }
.wax-seal:focus-visible { outline: 2px solid var(--pop); outline-offset: 6px; }
.wax-seal:active { transform: rotate(0) scale(.97); }
.seal-hint { opacity: 0; transition: opacity .4s var(--ease); }
.seal-strip:hover .seal-hint, .wax-seal:focus-visible + .seal-cap .seal-hint { opacity: .75; }

/* the little note that names whichever theme you just landed on */
.theme-toast { position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 400;
  padding: 10px 18px; border-radius: 100px; font-size: 14px; color: var(--ink);
  background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 18px 34px -18px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.theme-toast.show { opacity: 1; transform: none; }
.theme-toast b { color: var(--pop); }
@media (prefers-reduced-motion: reduce) { .peb-one, .theme-toast, .seal-hint { transition: none; } }

/* Touch devices: no 3D flip. backface-visibility is unreliable there (both
   faces render at once and overlap mid-turn), so cross-fade instead. */
@media (hover: none), (max-width: 760px) {
  .who-inner { transform-style: flat; transition: none; }
  .who-card.flipped .who-inner { transform: none; }
  .who-face { transition: opacity .28s var(--ease), visibility 0s linear .28s; }
  .who-front { opacity: 1; visibility: visible; }
  .who-back { transform: none; opacity: 0; visibility: hidden; }
  .who-card.flipped .who-front { opacity: 0; visibility: hidden; }
  .who-card.flipped .who-back { opacity: 1; visibility: visible; transition: opacity .28s var(--ease); }
}

.theme-menu[hidden] { display: none; }

/* Surfaces that were painted in the original cream/ember follow the palette
   instead, so Nord, Blush, Catppuccin etc. don't show brown patches. */
.reader-demo { background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #fff) 0%, var(--card) 100%); }
:root[data-scheme="dark"] .reader-demo { background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--card) 80%, #000) 100%); }
.reader-chrome { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.reader-panel, .rp-list, .rp-item { background-color: transparent; }
.reader-panel { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.rp-item { background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--card-line); }
.use-chips span, .te-stats div, .maker:hover, .th-chip { background-color: color-mix(in srgb, var(--card) 65%, transparent); }
.btn-outline { background: color-mix(in srgb, var(--card) 55%, transparent); }
.btn-outline:hover { background: color-mix(in srgb, var(--card) 85%, transparent); }
.tnote::before { background: color-mix(in srgb, var(--paper) 65%, transparent); }
.theme-toggle { flex: none; }
.tt-name { white-space: nowrap; }
.nav-right { flex: none; }

/* contrast: white banner text needs the darker end of the gradient on the
   light palettes, and the pale accents need dark button labels */
:root[data-scheme="light"] .partner-bar {
  background: linear-gradient(90deg, var(--terracotta-2), var(--pop-2) 55%, var(--terracotta));
}
:root[data-theme="dark"], :root[data-theme="everforest"] { --on-pop: #1a1207; }

/* ---------- day / night button (back where it was) ---------- */
.theme-toggle {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--ink-70);
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid var(--card-line);
  transition: transform .3s var(--ease), color .25s, background .25s, border-color .25s;
}
.theme-toggle:hover { transform: rotate(-12deg) scale(1.08); color: var(--terracotta); border-color: var(--terracotta); }
.theme-toggle:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-moon { display: none; }
:root[data-scheme="dark"] .theme-toggle .ic-sun { display: none; }
:root[data-scheme="dark"] .theme-toggle .ic-moon { display: block; }

/* ---------- theme pebbles: little palette dots dotted around the page ---------- */
.pebbles { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.peb-label { font-family: 'Caveat', cursive; font-size: 19px; color: var(--ink-55); margin-right: 4px; }
.peb { width: 19px; height: 19px; padding: 0; border: 0; background: none; border-radius: 50%;
  display: grid; place-items: center; transition: transform .25s var(--ease); }
.peb span { display: block; width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(135deg, var(--p1) 0 50%, var(--p2) 50% 100%);
  box-shadow: 0 0 0 1px var(--card-line), 0 2px 4px rgba(0,0,0,.18); transition: box-shadow .25s; }
.peb:hover { transform: scale(1.25) rotate(8deg); }
.peb:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; border-radius: 50%; }
.peb.on span { box-shadow: 0 0 0 2px var(--pop), 0 2px 6px rgba(0,0,0,.25); }
.peb[data-t="light"]       { --p1:#ffffff; --p2:#2c2c2c; }
.peb[data-t="dark"]        { --p1:#252526; --p2:#4fc1ff; }
.peb[data-t="serif-light"] { --p1:#fdf8f1; --p2:#3b2f26; }
.peb[data-t="serif-dark"]  { --p1:#1c1712; --p2:#d4a06a; }
.peb[data-t="amoled"]      { --p1:#000000; --p2:#6cb4ee; }
.peb[data-t="nord"]        { --p1:#2e3440; --p2:#88c0d0; }
.peb[data-t="blush"]       { --p1:#fde0eb; --p2:#c2185b; }
.peb[data-t="catppuccin"]  { --p1:#1e1e2e; --p2:#cba6f7; }
.peb[data-t="everforest"]  { --p1:#2d353b; --p2:#a7c080; }

/* where each cluster sits */
.peb-hero { margin: 26px auto 0; display: flex; }
.peb-chrome { margin-left: auto; margin-right: 10px; gap: 5px; }
.peb-chrome .peb-label { font-size: 15px; opacity: .8; }
.peb-chrome .peb { width: 15px; height: 15px; }
.peb-chrome .peb span { width: 11px; height: 11px; }
.peb-story { margin: 26px auto 0; display: flex; }
.peb-foot { gap: 5px; }
.peb-foot .peb-label { color: var(--cream-45); font-size: 17px; }
.peb-foot .peb span { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.peb-foot .peb.on span { box-shadow: 0 0 0 2px var(--gold); }
@media (max-width: 700px) { .peb-chrome { display: none; } }
@media (prefers-reduced-motion: reduce) { .peb, .theme-toggle { transition: none; } }

.testi { scroll-margin-top: 60px; }
.story-founders { scroll-margin-top: 60px; }

/* ============================================================
   MAC GUIDE — which chip, the walkthrough, troubleshooting
   ============================================================ */
.which { max-width: 820px; margin: 0 auto clamp(26px,4vh,40px); padding: 26px clamp(18px,4vw,34px) 24px;
  border-radius: 24px; background: var(--card); border: 1px solid var(--card-line);
  box-shadow: 0 26px 46px -34px rgba(46,32,22,.5); scroll-margin-top: 70px; }
.which-kicker { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pop); margin-bottom: 8px; }
.which h2 { font-family: var(--font-display); font-size: clamp(24px,3vw,32px); margin: 0 0 10px; }
.which-head p { margin: 0; color: var(--ink-70); font-size: 15.5px; line-height: 1.7; }
.which-check { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 20px 0 4px; }
.which-result { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.which-result b { color: var(--pop); }
.which-result.unknown b { color: var(--terracotta); }

.which-manual { margin-top: 16px; border-top: 1px solid var(--card-line); padding-top: 14px; }
.which-manual > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.which-manual > summary::-webkit-details-marker { display: none; }
.which-manual[open] > summary .faq-q-icon { transform: rotate(45deg); }
.which-manual-body { padding-top: 14px; color: var(--ink-70); font-size: 15px; line-height: 1.7; }
.which-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 0; }
@media (max-width: 640px) { .which-cards { grid-template-columns: 1fr; } }
.which-card { padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--card-line); }
.wc-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px; margin-bottom: 10px; }
.wc-arm { color: var(--pop); background: color-mix(in srgb, var(--pop) 14%, transparent); }
.wc-intel { color: var(--terracotta); background: color-mix(in srgb, var(--terracotta) 14%, transparent); }
.wc-win { border-radius: 12px; overflow: hidden; border: 1px solid var(--card-line); background: var(--card); }
.wc-win-bar { display: flex; gap: 5px; padding: 8px 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.wc-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.wc-win-body { padding: 12px 14px; display: grid; gap: 7px; }
.wc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.wc-row span { color: var(--ink-55); }
.wc-row b { color: var(--ink); font-weight: 600; }
.wc-say { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-70); }
.which-note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-55); }

/* walkthrough */
.walk { max-width: 820px; margin: 0 auto clamp(30px,5vh,46px); }
.walk-head { text-align: center; margin-bottom: 18px; }
.walk-head h2 { font-family: var(--font-display); font-size: clamp(24px,3vw,32px); margin: 0 0 6px; }
.walk-head p { margin: 0; color: var(--ink-70); font-size: 15px; }
.walk-stage { padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 26px 46px -34px rgba(46,32,22,.5); }
.walk-screen { position: relative; height: 290px; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 6%, var(--card)); border: 1px solid var(--card-line); }
.scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.scene.on { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.walk-cap { text-align: center; margin: 14px 0 0; font-family: var(--font-display); font-size: 17px; color: var(--ink); min-height: 2.4em; }
.walk-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.walk-btn { font-family: var(--font-body); font-size: 13px; color: var(--ink-70); background: none;
  border: 1px solid var(--card-line); border-radius: 100px; padding: 5px 14px; transition: color .2s, border-color .2s; }
.walk-btn:hover { color: var(--pop); border-color: var(--pop); }
.walk-dots { display: flex; gap: 6px; }
.walk-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 20%, transparent); transition: background .3s, width .3s; }
.walk-dots i.on { width: 18px; border-radius: 4px; background: var(--pop); }

/* scene props */
.sc-dl { width: min(380px, 100%); padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-line); }
.sc-file { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 10px; }
.sc-bar { display: block; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.sc-bar i { display: block; height: 100%; width: 0; background: var(--pop); border-radius: 4px; }
.scene.on .sc-bar i { animation: scfill 2.4s var(--ease) forwards; }
@keyframes scfill { to { width: 100%; } }

.sc-finder { display: flex; width: min(430px,100%); height: 180px; border-radius: 12px; overflow: hidden; border: 1px solid var(--card-line); background: var(--card); }
.sc-side { width: 86px; padding: 12px 10px; display: grid; gap: 9px; align-content: start; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.sc-side i { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.sc-side i.on { background: var(--pop); }
.sc-files { position: relative; flex: 1; padding: 12px; display: grid; gap: 8px; align-content: start; }
.sc-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-70); padding: 6px 8px; border-radius: 8px; }
.sc-row.on { background: color-mix(in srgb, var(--pop) 16%, transparent); color: var(--ink); }
.sc-click { position: absolute; left: 86px; top: 26px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--pop); opacity: 0; }
.scene.on .sc-click { animation: scclick 1.6s ease-out .5s 2; }
.sc-click-2 { left: 50%; top: 58%; }
@keyframes scclick { 0% { opacity: .9; transform: scale(.4); } 70% { opacity: .5; } 100% { opacity: 0; transform: scale(2.2); } }

.sc-dmg { display: flex; align-items: center; gap: 26px; }
.sc-dmg-icon { display: grid; justify-items: center; gap: 7px; font-size: 12px; color: var(--ink-70); }
.sc-dmg-icon img { width: 48px; height: 48px; }
.sc-folder { font-size: 42px; line-height: 1; }
.sc-arrow { font-family: 'Caveat', cursive; font-size: 30px; color: var(--pop); }
.scene.on .sc-drag { animation: scdrag 3s var(--ease) infinite; }
@keyframes scdrag { 0%, 12% { transform: none; } 55%, 100% { transform: translateX(104px) scale(.92); opacity: .35; } }

.sc-ctx { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.sc-app { display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--ink-70); }
.sc-app img { width: 44px; height: 44px; }
.sc-menu { list-style: none; margin: 0; padding: 6px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--card-line); box-shadow: 0 16px 30px -18px rgba(0,0,0,.5); font-size: 12.5px; min-width: 128px; }
.sc-menu li { padding: 6px 10px; border-radius: 6px; color: var(--ink-70); }
.sc-menu li.on { background: var(--pop); color: var(--on-pop, #fff); }

.sc-dialog { width: min(360px,100%); padding: 18px 20px; border-radius: 14px; text-align: center;
  background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 20px 36px -22px rgba(0,0,0,.45); }
.sc-dialog-ico { font-size: 26px; }
.sc-dialog b { display: block; margin: 8px 0 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.sc-dialog p { margin: 0; font-size: 12px; color: var(--ink-55); line-height: 1.5; }
.sc-dialog-btns { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.sc-dialog-btns span { font-size: 12.5px; padding: 6px 16px; border-radius: 7px; border: 1px solid var(--card-line); color: var(--ink-70); }
.sc-dialog-btns .on { background: var(--pop); border-color: var(--pop); color: var(--on-pop, #fff); }

.sc-term { width: min(430px,100%); border-radius: 12px; overflow: hidden; background: #1d1d1f; border: 1px solid rgba(255,255,255,.12); }
.sc-term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #2c2c2e; color: rgba(255,255,255,.6); font-size: 11px; }
.sc-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); }
.sc-term-bar span { margin-left: 6px; }
.sc-term code { display: block; padding: 16px 14px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: #e8e8e8; min-height: 60px; }
.sc-type::after { content: "▌"; margin-left: 1px; animation: caretblink 1s steps(1) infinite; }

.sc-done { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sc-done img { width: 58px; height: 58px; }
.scene.on .sc-done img { animation: scpop .6s var(--ease); }
@keyframes scpop { from { transform: scale(.6); opacity: 0; } }
.sc-done b { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.sc-done span { font-size: 13px; color: var(--ink-55); }

/* troubleshooting */
.tsho { max-width: 760px; margin: clamp(30px,5vh,52px) auto 0; }
.tsho h2 { font-family: var(--font-display); font-size: clamp(24px,3vw,32px); text-align: center; margin: 0 0 6px; }
.tsho-sub { text-align: center; margin: 0 0 22px; color: var(--ink-70); font-size: 15px; }
.tsho .faq-item summary { font-size: 16px; }
.ip-warn { margin-top: 12px; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.6;
  background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent); }
.ip-letter { font-family: var(--font-display); font-style: italic; color: var(--terracotta); font-size: 18px; }
@media (prefers-reduced-motion: reduce) {
  .scene, .scene.on .sc-bar i, .scene.on .sc-drag, .scene.on .sc-click, .scene.on .sc-done img { animation: none; transition: none; }
}

/* install pages: stop the step content forcing the page wider than the phone
   (a grid item defaults to min-width:auto, so the no-wrap command line and
   long words pushed the whole page sideways) */
.ip-step > div { min-width: 0; }
.ip-step h3, .ip-step p { overflow-wrap: anywhere; }
.ip-step { background: linear-gradient(180deg, var(--card) 0%, var(--paper-2) 100%); }
:root[data-scheme="dark"] .ip-step { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 80%, #000)); }
.ip-step .kbd { background: color-mix(in srgb, var(--ink) 10%, transparent); overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 560px) {
  .ip-step { grid-template-columns: 1fr; gap: 10px; padding: 22px 18px; }
  .ip-num { text-align: left; font-size: 38px; }
  .cmd-box code { font-size: 12.5px; padding: 12px; }
  .walk-screen { height: 320px; }
}

/* the two Mac builds, side by side and equally visible */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: 0 auto clamp(10px,2vh,16px); }
@media (max-width: 680px) { .choice-grid { grid-template-columns: 1fr; } }
.choice { position: relative; padding: 24px 22px 20px; border-radius: 20px; text-align: center;
  background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 22px 40px -32px rgba(46,32,22,.45);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.choice:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgba(46,32,22,.5); }
.choice h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 6px; }
.choice-who { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-70); }
.choice .btn { width: 100%; }
.choice-file { display: block; margin-top: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink-40); }
.choice-badge { position: absolute; top: -11px; left: 50%; translate: -50% 0; padding: 3px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: var(--pop); color: var(--on-pop, #fff); opacity: 0; transition: opacity .3s; }
.choice.is-match { border-color: var(--pop); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop) 18%, transparent), 0 26px 46px -30px rgba(46,32,22,.5); }
.choice.is-match .choice-badge { opacity: 1; }
.choice-note { max-width: 640px; margin: 0 auto clamp(26px,4vh,40px); text-align: center; font-size: 13.5px; color: var(--ink-55); }
.which-why { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-55); }
.cmd-label { margin: 14px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); }

/* which build these instructions are for */
.build-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  max-width: 820px; margin: 0 auto clamp(18px,3vh,26px); padding: 12px 18px; border-radius: 100px;
  background: color-mix(in srgb, var(--pop) 7%, var(--card)); border: 1px solid var(--card-line); scroll-margin-top: 70px; }
.bb-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); }
.bb-switch { display: flex; gap: 4px; padding: 3px; border-radius: 100px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.bb-opt { font-family: var(--font-body); font-size: 13.5px; color: var(--ink-70); background: none; border: 0;
  border-radius: 100px; padding: 5px 14px; transition: background .2s, color .2s; }
.bb-opt:hover { color: var(--ink); }
.bb-opt.on { background: var(--pop); color: var(--on-pop, #fff); font-weight: 600; }
.bb-opt:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }
.bb-file { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink-55); }
@media (max-width: 560px) { .build-bar { border-radius: 18px; } .bb-file { width: 100%; text-align: center; } }