/* ============================================================
   Clankmaxx — launch site
   Design tokens mirror the app's own theme (BuddyTheme.swift):
   warm cream surfaces, coral accent, hairlines not borders,
   rounded display type, no decorative shadows except the one
   a real floating panel would cast.
   ============================================================ */

/* Display type: the app's headings are SF Rounded; ui-rounded only
   resolves in Safari, so we self-host Nunito (OFL — see OFL.txt) to keep
   the rounded voice everywhere. Latin subset, 39 KB, headings only. */
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces — light (primary presentation) */
  --bg: #FAF6F1;
  --surface: #FFFFFF;
  --surface-alt: #F1EAE2;
  --hairline: rgba(0, 0, 0, 0.09);
  --hairline-strong: rgba(0, 0, 0, 0.16);

  /* Text — warm charcoal, never pure black */
  --text: #292420;
  --text-2: #6B6259;
  --text-3: #756C65;

  /* Accent — app coral; deep variant for text/CTA contrast (WCAG AA) */
  --accent: #D65C45;
  --accent-strong: #BC4632;
  --accent-deep: #A83E2B;   /* small text on tinted washes */
  --accent-ink: #FFFFFF;

  /* Semantic */
  --success: #269454;
  --success-strong: #1D7340;
  --warning: #C7801A;
  --error: #CC3833;
  --error-strong: #B02A26;

  /* Radii (from the app) */
  --r-card: 12px;
  --r-bubble: 16px;
  --r-field: 10px;
  --r-banner: 10px;
  --r-xl: 24px;

  /* The only shadow on the page: a floating panel's */
  --shadow-window: 0 32px 72px -32px rgba(84, 52, 36, 0.35),
                   0 4px 16px -4px rgba(84, 52, 36, 0.12);

  --font-rounded: "Nunito", ui-rounded, "SF Pro Rounded", "SF Compact Rounded",
    system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1120px;
  --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #221F28;
    --surface: #2D2833;
    --surface-alt: #393441;
    --hairline: rgba(255, 255, 255, 0.12);
    --hairline-strong: rgba(255, 255, 255, 0.22);
    --text: #F0EBE4;
    --text-2: #B9B0AC;
    --text-3: #948B90;
    --accent: #ED8C73;
    --accent-strong: #ED8C73;
    --accent-ink: #221F28;
    --accent-deep: #ED8C73;
    --success-strong: #61C78C;
    --error-strong: #F27A73;
    --wash-user: 30%;
    --success: #61C78C;
    --warning: #F2B859;
    --error: #F27A73;
    --shadow-window: 0 32px 72px -28px rgba(0, 0, 0, 0.6),
                     0 4px 16px -4px rgba(0, 0, 0, 0.4);
  }
}

/* Manual override (?theme=dark) — used for testing both appearances */
:root[data-theme="dark"] {
  --bg: #221F28;
  --surface: #2D2833;
  --surface-alt: #393441;
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.22);
  --text: #F0EBE4;
  --text-2: #B9B0AC;
  --text-3: #948B90;
  --accent: #ED8C73;
  --accent-strong: #ED8C73;
  --accent-ink: #221F28;
  --accent-deep: #ED8C73;
  --success-strong: #61C78C;
  --error-strong: #F27A73;
  --wash-user: 30%;
  --success: #61C78C;
  --warning: #F2B859;
  --error: #F27A73;
  --shadow-window: 0 32px 72px -28px rgba(0, 0, 0, 0.6),
                   0 4px 16px -4px rgba(0, 0, 0, 0.4);
}

/* ---------- Reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win over component display rules (e.g. the
   demo replay buttons, which JS reveals only when a sequence can play). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-rounded);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.pixelated { image-rendering: pixelated; }

/* ---------- Shared atoms ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pill--neutral {
  background: var(--surface-alt);
  color: var(--text-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent-strong);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-strong) 88%, #000 12%);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--hairline-strong);
}
.btn-secondary:hover { background: var(--surface-alt); }

.btn--small { padding: 9px 18px; font-size: 14px; }

.section { padding: 104px 0; }
.section + .section { border-top: 1px solid var(--hairline); }

.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-head .pill { margin-bottom: 18px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 16px; }
.section-head .lede {
  font-size: 18px;
  color: var(--text-2);
  max-width: var(--measure);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 30px; height: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links a {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav-links a:hover {
  color: var(--text);
  background: var(--surface-alt);
  text-decoration: none;
}
.nav-cta { margin-left: 12px; }
/* The nav link rules above are more specific than .btn-primary; keep the
   CTA's ink and hover fill intact. */
.nav-links a.btn-primary { color: var(--accent-ink); }
.nav-links a.btn-primary:hover {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-strong) 88%, #000 12%);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

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

.hero {
  padding: 96px 0 88px;
  text-align: center;
  overflow: hidden;
}
.hero .pill { margin-bottom: 24px; }
.hero h1 {
  font-size: clamp(44px, 7.2vw, 78px);
  letter-spacing: -0.022em;
  max-width: 16ch;
  margin: 0 auto 24px;
}
.hero .lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--text-2);
  max-width: 56ch;
  margin: 0 auto 36px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 18px;
}
.hero-note {
  font-size: 14px;
  color: var(--text-3);
}
.hero-note strong { color: var(--text-2); font-weight: 600; }

.hero-stage {
  margin-top: 72px;
  position: relative;
}
.hero-stage .app-window {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}

/* ---------- The app window (faithful chat-overlay recreation) ---------- */

.app-window {
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-window);
  overflow: hidden;
  font-size: 15px;
}

.aw-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 76px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.aw-traffic {
  position: absolute;
  left: 14px;
  display: flex;
  gap: 8px;
}
.aw-traffic i {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--hairline-strong);
}
.aw-traffic i:nth-child(1) { background: #FF5F57; }
.aw-traffic i:nth-child(2) { background: #FEBC2E; }
.aw-traffic i:nth-child(3) { background: #28C840; }
.aw-wordmark {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 14.5px;
}
.aw-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  color: var(--text-2);
}
.aw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
}
.aw-icon-btn svg { display: block; }

.aw-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aw-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: var(--r-banner);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-2);
  font-size: 12.5px;
}
.aw-banner svg { color: var(--accent); flex: none; }

.aw-msg { max-width: 86%; }
.aw-msg p { font-size: 15px; line-height: 1.55; }
.aw-msg .aw-time {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}
.aw-msg--user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) var(--wash-user, 14%), transparent);
  border-radius: var(--r-bubble);
  padding: 8px 12px;
  max-width: 78%;
}
.aw-msg--user .aw-time {
  text-align: right;
}
.aw-cursor { color: var(--accent); font-weight: 700; }

.aw-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 12px;
}
.aw-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.aw-card-head svg { color: var(--accent); flex: none; margin-top: 2px; }
.aw-card-head > div { min-width: 0; }
.aw-card-title { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.aw-card-detail { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.aw-card-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.aw-btn-confirm {
  background: var(--accent-strong);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
}
.aw-btn-plain {
  color: var(--text-2);
  font-size: 13px;
  padding: 2px 6px;
}
.aw-card.is-confirmed {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
}
.aw-card.is-confirmed .aw-btn-confirm {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success-strong);
}

.aw-notes-chapters {
  margin: 10px 0 0;
  padding: 10px;
  list-style: none;
  background: var(--surface-alt);
  border-radius: var(--r-field);
  display: grid;
  gap: 6px;
}
.aw-notes-chapters li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.aw-notes-chapters li span:last-child { min-width: 0; }
.aw-notes-chapters .t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-deep);
  flex: none;
  padding-top: 1px;
}

.aw-composer {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 8px 12px 8px 0;
}
.aw-dock {
  width: 132px;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: flex-end;
}
.aw-dock img {
  width: 84px;
  height: auto;
  display: block;
  margin-bottom: 2px;
}
.aw-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-alt);
  border-radius: var(--r-field);
  padding: 11px 14px;
  color: var(--text-3);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Demo reveal states (JS adds .demo-armed to enable) */
.demo-armed [data-step] { visibility: hidden; }
.demo-armed [data-step].is-shown { visibility: visible; }
.demo-armed [data-step].is-shown.aw-msg--user,
.demo-armed [data-step].is-shown.aw-card,
.demo-armed [data-step].is-shown.aw-banner {
  animation: demo-pop 0.25s ease-out;
}
@keyframes demo-pop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Demo section ---------- */

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}
.demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  position: sticky;
  top: 96px;
}
.demo-steps li {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: var(--r-card);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.demo-steps li.is-active {
  background: var(--surface);
  border-color: var(--hairline);
}
.demo-step-n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.demo-steps li.is-active .demo-step-n {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-deep);
}
.demo-step-title { font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.demo-step-desc { font-size: 14px; color: var(--text-2); line-height: 1.5; }

.demo-replay {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}
.demo-replay:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Memory section ---------- */

.memory-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.memory-points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.memory-points li {
  display: flex;
  gap: 14px;
}
.memory-points svg { color: var(--accent); flex: none; margin-top: 3px; }
.memory-points strong { display: block; font-size: 16px; margin-bottom: 2px; }
.memory-points span { font-size: 15px; color: var(--text-2); }

.memory-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 24px;
}
.memory-card h3 {
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
}
.memory-note {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 14px 16px;
}
.memory-note + .memory-note { margin-top: 10px; }
.memory-note-cat {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.memory-note p { font-size: 15px; }
.memory-note-actions {
  margin-top: 10px;
  display: flex;
  gap: 14px;
}
.memory-note-actions span {
  font-size: 13px;
  color: var(--text-3);
  font-weight: 500;
}

/* ---------- Week timeline ---------- */

.timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 56px;
}
.moment {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 24px;
}
.moment-when {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.moment h3 { font-size: 21px; margin-bottom: 8px; }
.moment .moment-copy { font-size: 15px; color: var(--text-2); }
.moment-frag {
  margin-top: 16px;
  background: var(--surface-alt);
  border-radius: var(--r-card);
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--text-2);
}
.moment-frag .q {
  font-style: italic;
  color: var(--text);
}
.moment-frag .frag-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  margin-bottom: 6px;
}
.moment-frag ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.moment-frag li { display: flex; gap: 8px; align-items: baseline; }
/* Timestamps never wrap ("Tue 11:59 / PM") and never shrink on narrow screens. */
.moment-frag li .t,
.moment-frag li .due { flex: none; white-space: nowrap; }
.moment-frag li .t { font-family: var(--font-mono); font-size: 12px; color: var(--accent-deep); }
.moment-frag .due { color: var(--error-strong); font-weight: 600; }

/* ---------- Screen-understanding section ---------- */

.screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.screen-facts {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.screen-facts li { display: flex; gap: 14px; font-size: 15px; }
.screen-facts svg { color: var(--accent); flex: none; margin-top: 3px; }
.screen-facts strong { font-weight: 600; }

.screen-demo .app-window { font-size: 14px; }
.kbd {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-alt);
  border: 1px solid var(--hairline-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------- Notes section ---------- */

.notes-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.notes-facts,
.meme-facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.notes-facts li,
.meme-facts li { display: flex; gap: 12px; font-size: 15px; color: var(--text-2); }
.notes-facts svg,
.meme-facts svg { color: var(--accent); flex: none; margin-top: 3px; }
.notes-facts strong,
.meme-facts strong { color: var(--text); font-weight: 600; }

/* ---------- Personality section ---------- */

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
@media (max-width: 720px) {
  .persona-grid { grid-template-columns: 1fr; }
}
.persona {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.persona-default {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-deep);
}
.persona h3 { font-size: 18px; }
.persona .persona-tag { font-size: 13.5px; color: var(--text-2); flex: 1; }
.persona .persona-line {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-alt);
  border-radius: var(--r-field);
  padding: 9px 12px;
  color: var(--text);
}

.forms-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.form-card {
  background: #16151A;
  border-radius: var(--r-card);
  padding: 20px;
  color: #F0EBE4;
  display: flex;
  gap: 18px;
  align-items: center;
}
.form-card img { width: 132px; flex: none; border-radius: 6px; }
.form-card-imgs { display: flex; gap: 12px; flex: none; }
.form-card-imgs img { width: 116px; }
.form-card h3 { font-size: 16px; color: #F0EBE4; margin-bottom: 4px; }
.form-card p { font-size: 13px; color: rgba(240, 235, 228, 0.66); }
.form-dots { display: flex; gap: 6px; margin-top: 10px; }
.form-dots i {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.personality-note {
  margin-top: 24px;
  font-size: 15px;
  color: var(--text-2);
  max-width: var(--measure);
}

/* ---------- Meme mode section ---------- */

.meme-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}

/* The bundled starter set: white cards in both appearances, matching the
   card the app draws behind every meme takeover. */
.meme-lib {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 28px;
}
.meme-lib figure {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.meme-lib img { width: 88px; height: auto; display: block; }
.meme-lib figcaption {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #756C65;   /* sits on the always-white card in both appearances */
}
.meme-lib-own {
  display: flex;
  align-items: center;
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--r-card);
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}

.meme-demo-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
}

/* Dock takeover: the meme briefly replaces the clanker beside the composer,
   exactly like the app's BuddyView takeover — white card, pop in, hold,
   fade out. Hidden unless the demo sequence (or the reduced-motion static
   state) shows it, so the no-JS page never doubles the dock. */
.aw-dock { position: relative; }
.meme-takeover {
  display: none;
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 104px;
  padding: 6px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 10px 24px -10px rgba(84, 52, 36, 0.45);
  pointer-events: none;
  transform: translateX(-50%);
}
.meme-takeover img { display: block; width: 100%; height: auto; border-radius: 6px; }
.demo-armed .meme-takeover.is-shown {
  display: block;
  animation: meme-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
@keyframes meme-pop {
  from { transform: translateX(-50%) scale(0.3); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}
.meme-takeover.is-gone {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.app-window.meme-on .aw-dock > img,
.app-window.meme-static .aw-dock > img { visibility: hidden; }
.app-window.meme-static .meme-takeover { display: block; }

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

.privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.privacy-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 28px;
}
.privacy-card h3 {
  font-size: 19px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.privacy-card h3 svg { color: var(--accent); }
.privacy-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.privacy-card li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--text-2);
}
.privacy-card li svg { flex: none; margin-top: 3px; color: var(--text-3); }
.privacy-card li strong { color: var(--text); font-weight: 600; }

.privacy-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.privacy-controls .pill { font-weight: 500; }

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

.pricing-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 44px;
  text-align: center;
}
.pricing-name { font-size: 15px; font-weight: 600; color: var(--text-2); margin-bottom: 12px; }
.pricing-price {
  font-family: var(--font-rounded);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pricing-price span {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
}
.pricing-includes {
  list-style: none;
  margin: 32px 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 12px;
  text-align: left;
}
.pricing-includes li { display: flex; gap: 12px; font-size: 15.5px; }
.pricing-includes svg { color: var(--accent); flex: none; margin-top: 3px; }
.pricing-card .btn { width: 100%; }
.pricing-secure {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pricing-fine {
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  text-align: left;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}
.pricing-fine p + p { margin-top: 8px; }

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

.faq-list { max-width: 780px; }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-rounded);
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-plus {
  margin-left: auto;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.faq-item[open] summary .faq-plus {
  transform: rotate(45deg);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-deep);
}
.faq-item summary:hover { color: var(--accent-strong); }
.faq-body {
  padding: 0 40px 22px 4px;
  font-size: 15.5px;
  color: var(--text-2);
  max-width: var(--measure);
}
.faq-body p + p { margin-top: 10px; }

/* ---------- Final CTA ---------- */

.final {
  text-align: center;
  padding: 120px 0;
}
.final img.axolotl-final {
  width: 96px;
  margin-bottom: 24px;
}
.final h2 {
  font-size: clamp(34px, 5vw, 52px);
  max-width: 18ch;
  margin: 0 auto 18px;
}
.final .lede {
  font-size: 18px;
  color: var(--text-2);
  max-width: 52ch;
  margin: 0 auto 32px;
}

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

.footer {
  border-top: 1px solid var(--hairline);
  padding: 56px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand { display: flex; align-items: flex-start; gap: 12px; }
.footer-brand img { width: 40px; margin-top: 2px; }
.footer-brand .name {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 16px;
}
.footer-brand p { font-size: 13.5px; color: var(--text-2); margin-top: 4px; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--text-2); font-size: 14.5px; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--text-3);
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: 740px;
  padding: 72px 0 104px;
}
.legal h1 { font-size: clamp(32px, 4.5vw, 44px); margin-bottom: 14px; }
.legal .legal-intro { font-size: 18px; color: var(--text-2); margin-bottom: 48px; }
.legal h2 {
  font-size: 22px;
  margin: 40px 0 12px;
}
.legal p, .legal li { font-size: 15.5px; color: var(--text-2); }
.legal p + p { margin-top: 10px; }
.legal ul, .legal ol {
  margin: 10px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}
.legal strong { color: var(--text); }
.legal .legal-callout {
  margin-top: 48px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 18px 20px;
  font-size: 14.5px;
  color: var(--text-2);
}

/* ---------- 404 ---------- */

.notfound {
  text-align: center;
  padding: 120px 0 140px;
}
.notfound img { width: 110px; margin-bottom: 28px; }
.notfound h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 14px; }
.notfound p { color: var(--text-2); font-size: 17px; margin-bottom: 32px; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .demo-grid,
  .memory-grid,
  .screen-grid,
  .notes-grid,
  .meme-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .demo-steps { position: static; }
  .section { padding: 80px 0; }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 16px 16px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 16px; }
  .nav-cta { margin: 8px 0 0; }
  .nav-cta .btn { width: 100%; }

  .timeline { grid-template-columns: 1fr; }
  .privacy-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .hero { padding: 64px 0 64px; }
  .aw-dock { width: 72px; }
  .aw-dock img { width: 56px; }
  .aw-msg { max-width: 94%; }
  .aw-msg--user { max-width: 88%; }
  .aw-card-head { flex-wrap: wrap; }
  .aw-card-actions { flex-direction: row; align-items: center; margin-left: 0; width: 100%; }
  .form-card { flex-wrap: wrap; }
  .form-card img { width: 96px; }
  .faq-body { padding-right: 8px; }
  .pricing-card { padding: 32px 24px; }
  .pricing-price { font-size: 60px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .aw-cursor { animation: none !important; }
}

@keyframes cursor-blink {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0; }
}
.aw-cursor { animation: cursor-blink 1.06s steps(1) infinite; }