/* Pocket Aurora Papers — shared stylesheet.
   Palette and type stack are fixed by growth/document-vault/visual-identity.md
   and the campaign brief; only layout, spacing and structural devices below
   are this file's own decisions. System font stack only, no third-party
   requests, no framework. */

:root {
  --bg: #F7F6F3;
  --surface: #FFFDF9;
  --ink: #1A1A18;
  --muted: #6E6A62;
  --line: #E2DFD8;
  --border-strong: #C9C3B7;
  --accent: #1F5F5B;
  --accent-hover: #164340;
  --on-accent: var(--surface); /* text set on top of an --accent background */
  --amber-text: #8A6D1F;   /* accessible variant; #C8912F fails as text on light */
  --amber-bg: #FFFDF9;     /* = surface; #8A6D1F on this pairing measures 4.82:1 (AA pass) */
  --retry: #B8503C;
  --radius: 2px;
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --measure: 40rem;

  /* Spacing scale: a steadier vertical rhythm than ad hoc em values. */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* Publisher accent (palette A): the mark and the header/footer strip only,
     per growth/shared/publisher-brand.md §3 rule 1. Never UI chrome. */
  --publisher-gradient: linear-gradient(90deg, #159E93, #4B44D8, #C42F8E);
}

/* Dark mode: derived from the one dark surface the brand already documents
   (the in-app capture screens, visual-identity.md §1 and §6), not invented
   from nothing. Ratios measured and recorded in this pass's hand-off. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141412;
    --surface: #1C1B18;
    --ink: #F7F6F3;
    --muted: #8A857C;
    --line: #2A2A25;
    --border-strong: #6E6A62;
    --accent: #7FD3CB;
    --accent-hover: #5EC2B7;
    --on-accent: #141412;
    --amber-text: #C8912F; /* raw amber passes 6.6:1 on this dark bg; only the light theme needs the darker variant */
    --amber-bg: var(--surface);
    --retry: #D9705C;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
}

main { display: block; }

/* Type scale: a steady progression from the 17px body size, each step
   legible against the one below it (h3 was previously smaller than body
   text — fixed here). */
h1, h2, h3 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 1.55rem + 2vw, 2.75rem); line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.85vw, 1.75rem); margin-top: var(--space-6); }
h3 { font-size: 1.1875rem; }

p { margin: 0 0 1em; }
p.lede { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); color: var(--muted); max-width: 42rem; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

span[lang]:not([lang="en"]) { font-style: italic; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.75rem 1.1rem;
  z-index: 10;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2.25rem);
}
.prose { max-width: var(--measure); }

/* Header. The publisher rule is palette A (growth/shared/publisher-brand.md
   §3): it appears here and in the footer only, never as UI chrome. */
.site-header {
  background: var(--bg);
  border-bottom: 2px solid transparent;
  border-image: var(--publisher-gradient) 1;
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}
.brand img { display: block; }
.brand-text { line-height: 1.2; }
.brand-text .wordmark {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}
.brand-text .byline {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.35rem;
}
.site-nav a:not(.btn) {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
}
.site-nav a:not(.btn):hover { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover { background: var(--accent); color: var(--on-accent); }

/* Hero (landing pages only) — folded-corner motif on the text block, one
   signature device. Wide screens pair the headline with a real screenshot;
   phones stack them, copy first. */
.hero { padding: 3rem 0 2.5rem; }
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
.hero-copy {
  position: relative;
  overflow: hidden;
  padding-right: 1.1rem;
}
.hero-copy::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 56px 56px 0;
  border-color: transparent var(--surface) transparent transparent;
  filter: drop-shadow(-2px 2px 2px rgba(26, 26, 24, 0.06));
}
@media (prefers-color-scheme: dark) {
  .hero-copy::before { filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.45)); }
}
.hero .platform-line {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 1.25rem;
}
.hero .btn-primary { margin-top: 0.5rem; }
.hero-shot {
  margin: 0;
  max-width: 20rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem;
}
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.hero-shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}
@media (min-width: 860px) {
  .hero-inner { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-5); }
  .hero-shot { max-width: 22rem; margin-left: auto; }
  /* Variant B's hero has no screenshot; let its copy use the full width
     rather than leaving an empty second column. */
  .hero-inner:not(:has(.hero-shot)) { grid-template-columns: 1fr; }
  .hero-inner:not(:has(.hero-shot)) .hero-copy { max-width: var(--measure); }
}

/* Proof points — hairline rows, not cards */
.proof-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.proof-item {
  display: grid;
  grid-template-columns: minmax(180px, 340px) 1fr;
  gap: 0.5rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.proof-item h3 { margin: 0; }
.proof-item p { margin: 0.35rem 0 0; color: var(--muted); }
@media (max-width: 640px) {
  .proof-item { grid-template-columns: 1fr; }
}

/* Screenshot placeholders */
.shot-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 1.75rem 0 0;
}
@media (max-width: 720px) {
  .shot-strip { grid-template-columns: 1fr; }
}
.shot-placeholder {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  text-align: center;
}
.shot-placeholder .shot-tag {
  font-size: 0.78rem;
  color: var(--muted);
}
.shot-placeholder .shot-caption {
  font-weight: 600;
  color: var(--ink);
}

/* Real app screenshots: a quiet panel behind each, so the photo's own white
   chrome doesn't meet the page background edge-on (most noticeable in dark
   mode, where the effect also softens the jump from dark page to light UI). */
.shot-strip--two { grid-template-columns: repeat(2, minmax(0, 280px)); }
@media (max-width: 720px) { .shot-strip--two { grid-template-columns: minmax(0, 280px); } }
.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem;
}
.shot img { width: 100%; height: auto; border-radius: 16px; display: block; }
.shot figcaption { font-weight: 600; color: var(--ink); }

/* Steps (how it works — a genuine sequence). Two of the five steps are
   illustrated with the real screenshot that matches them; the rest stay
   text-only rather than forcing an image that doesn't exist. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 54rem;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.5rem 0 1.5rem 3.5rem;
  border-bottom: 1px solid var(--line);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.steps h2 { margin: 0 0 0.35em; font-size: 1.15rem; margin-top: 0; }
.steps p { margin: 0; color: var(--muted); }
.step-body { max-width: var(--measure); }
.steps li:has(.step-shot) .step-body { max-width: none; }
.steps li:has(.step-shot) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .steps li:has(.step-shot) { grid-template-columns: 1fr 9rem; align-items: start; }
}
img.step-shot {
  display: block;
  width: 100%;
  max-width: 9rem;
  height: auto;
  margin: 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* Sections that hold Designed/plan content */
.section-note {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.75rem;
}
.claim-list { padding-left: 1.15rem; }
.claim-list li { margin-bottom: 0.6em; }

/* Banner (pricing target-pricing notice) */
.banner {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--retry);
  padding: 1rem 1.25rem;
  font-weight: 600;
  margin: 1.25rem 0 2rem;
  max-width: var(--measure);
}

/* Plan list (pricing) */
.plans {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--surface);
}
.plan.is-later { border-style: dashed; }
.plan h2 { margin-top: 0; font-size: 1.15rem; }
.plan .badge-later {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.05rem 0.4rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.plan ul { padding-left: 1.1rem; margin: 0.75rem 0 0; }
.plan li { margin-bottom: 0.4em; color: var(--muted); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.faq-item h3 { margin: 0 0 0.4em; }
.faq-item p { margin: 0; color: var(--muted); }

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
  max-width: 30rem;
}
label { font-weight: 600; font-size: 0.95rem; }
.hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
input[type="email"],
input[type="text"],
select,
textarea {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
textarea { resize: vertical; min-height: 6rem; }
.consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  max-width: 40rem;
  margin: 1.25rem 0 1.5rem;
}
.consent input { margin-top: 0.3rem; flex: none; }
.consent label { font-weight: 400; font-size: 0.92rem; color: var(--ink); }

.placeholder {
  color: var(--amber-text);
  background: var(--amber-bg);
  border-bottom: 1px dashed var(--amber-text);
  padding: 0 0.2rem;
}

/* Waitlist section */
.waitlist { padding: 2.5rem 0; border-top: 1px solid var(--line); }
.waitlist form { margin-top: 1.25rem; }

/* Cards used sparingly, e.g. product card on the publisher page */
.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--surface);
  max-width: var(--measure);
}
.no-top-margin { margin-top: 0; }

section + section { margin-top: clamp(2.25rem, 1.8rem + 1.6vw, 3.75rem); }

/* Footer. Same thin palette-A rule as the header (publisher-brand.md §3). */
.site-footer { margin-top: var(--space-6); }
.footer-rule {
  height: 2px;
  background: var(--publisher-gradient);
}
.footer-content {
  padding: 1.5rem 0 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer-content a { color: var(--muted); }
.footer-content a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

.consent-translations{margin-top:1.5rem}
.consent-translations details{border-top:1px solid var(--line,#E2DFD8);padding:.5rem 0}
.consent-translations summary{cursor:pointer;font-weight:600}
.consent-translations details p{max-width:65ch}

/* Publisher home page. The aurora gradient is an accent shape only; all text
   sits on --bg or --surface, never on the gradient. */
:root {
  --aurora-wash: linear-gradient(135deg, #159E93, #4B44D8 55%, #C42F8E);
  --aurora-fade: linear-gradient(180deg, rgba(75, 68, 216, 0.10), rgba(75, 68, 216, 0));
  --status-dev-bg: #E3F2F0;
  --status-dev-ink: #124B47;
  --status-planned-ink: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root {
    --aurora-wash: linear-gradient(135deg, #2FD9C8, #7A6BFF 55%, #F05BBE);
    --aurora-fade: linear-gradient(180deg, rgba(122, 107, 255, 0.16), rgba(122, 107, 255, 0));
    --status-dev-bg: #12312E;
    --status-dev-ink: #BDEFE9;
  }
}

.home-hero {
  background: var(--aurora-fade);
  padding: var(--space-5) 0 var(--space-4);
}
.home-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
.home-hero h1 { font-size: clamp(2.5rem, 1.8rem + 3.5vw, 4rem); margin-bottom: 0.25em; }
.home-tagline {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}
.home-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.aurora-panel {
  margin: 0;
  background: var(--aurora-wash);
  border-radius: 24px;
  padding: clamp(1.25rem, 5vw, 2.25rem) clamp(1.25rem, 5vw, 2.25rem) 0;
  max-width: 24rem;
  overflow: hidden;
}
.aurora-panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
}
.aurora-panel figcaption {
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.6rem 0.5rem;
  margin: 0 calc(-1 * clamp(1.25rem, 5vw, 2.25rem));
}
@media (min-width: 860px) {
  .home-hero { padding: var(--space-6) 0 var(--space-5); }
  .home-hero-inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); }
  .aurora-panel { margin-left: auto; }
}

.home-section h2 { margin-top: 0; }
.pillars, .how-steps { list-style: none; margin: var(--space-4) 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3); }
.pillars { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.pillar, .how-steps li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.pillar h3, .how-steps h3 { margin-bottom: 0.35em; }
.pillar p, .how-steps p { margin: 0; color: var(--muted); }
.how-steps { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); counter-reset: how; }
.how-steps li { counter-increment: how; border-top-color: var(--line); }
.how-steps li::before {
  content: counter(how);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-1);
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 700;
}

.family-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 860px) { .family-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.family-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-4) var(--space-3);
}
.family-card h3 { font-size: 1.4rem; margin-top: 0; }
.family-card--lead { border-top: 3px solid var(--accent); }
.family-card:not(.family-card--lead) { border-style: dashed; border-color: var(--border-strong); background: transparent; }
.status {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.status-dev { background: var(--status-dev-bg); color: var(--status-dev-ink); }
.status-planned { border: 1px solid var(--border-strong); color: var(--status-planned-ink); }
.family-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); max-width: 28rem; margin: var(--space-3) 0; }
.family-shots img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }

/* ==== Home page concept versions (web/drafts/). Everything below is scoped to
   body.home-draft and one of .home-v1 to .home-v5, so no other page changes. ==== */
.home-draft {
  --ha-1: #159E93; --ha-2: #4B44D8; --ha-3: #C42F8E;
  --ha-grad: linear-gradient(135deg, var(--ha-1), var(--ha-2) 55%, var(--ha-3));
  --ha-card: #FFFFFF;
  --ha-warm: #FBF3EA;
  --ha-shadow: 0 1px 2px rgba(25, 20, 70, 0.10), 0 18px 40px -12px rgba(50, 40, 140, 0.30);
  --ha-glow-a: rgba(21, 158, 147, 0.24);
  --ha-glow-b: rgba(196, 47, 142, 0.18);
  --ha-glow-c: rgba(75, 68, 216, 0.20);
  --ha-big: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem);
  overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  .home-draft {
    --ha-1: #2FD9C8; --ha-2: #7A6BFF; --ha-3: #F05BBE;
    --ha-card: #24221E;
    --ha-warm: #1D1916;
    --ha-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -12px rgba(0, 0, 0, 0.75);
    --ha-glow-a: rgba(47, 217, 200, 0.20);
    --ha-glow-b: rgba(240, 91, 190, 0.16);
    --ha-glow-c: rgba(122, 107, 255, 0.24);
  }
}
.home-draft h1, .home-draft h2, .home-draft h3 { margin-top: 0; }
.home-draft h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); letter-spacing: -0.02em; }
.home-draft section + section { margin-top: 0; }
.home-draft .site-footer { margin-top: 0; }
.home-draft .btn {
  font-size: 1.05rem;
  padding: 0.85rem 1.6rem;
  min-height: 3rem;
  border-radius: 999px;
}
.home-draft .btn-primary { box-shadow: 0 10px 24px -8px var(--ha-2); }
.home-draft .kicker {
  display: block;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.home-draft .lead {
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 36rem;
}
.home-draft .fine { font-size: 0.95rem; color: var(--muted); }
.home-draft .band { padding: clamp(2.75rem, 2rem + 4vw, 6rem) 0; }
.home-draft .app-icon {
  display: block;
  width: var(--s, 96px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 2px 4px rgba(20, 15, 60, 0.20), 0 14px 30px -8px rgba(40, 30, 120, 0.45);
}
.home-draft .phone {
  --pw: 260px;
  margin: 0;
  width: var(--pw);
  max-width: 100%;
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.16);
  background: linear-gradient(150deg, #3a3a46, #0c0c10 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -18px rgba(30, 20, 110, 0.55);
}
.home-draft .phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--pw) * 0.125);
}
.home-draft .app-list { list-style: none; margin: 0; padding: 0; }
.home-draft .app-name { font-weight: 700; }
.home-draft .status { margin: 0; }
.home-draft .status-planned { background: transparent; }
.home-draft .app-link { color: inherit; text-decoration: none; }
.home-draft .app-link:hover .app-name { text-decoration: underline; }
.home-draft .apps-note { margin-top: 1.25rem; }

/* Concept 1: the family shelf */
.home-v1 .v1-hero {
  text-align: center;
  padding: clamp(2.25rem, 1.5rem + 3vw, 4.5rem) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background:
    radial-gradient(60% 70% at 12% 0%, var(--ha-glow-a), transparent 70%),
    radial-gradient(55% 70% at 92% 8%, var(--ha-glow-b), transparent 70%);
}
.home-v1 .v1-hero h1 { font-size: var(--ha-big); letter-spacing: -0.035em; margin-bottom: 0.2em; }
.home-v1 .v1-hero .lead { margin: 0 auto clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.home-v1 .shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.3rem + 2vw, 2rem);
  max-width: 44rem;
  margin: 0 auto;
  padding-bottom: 14px;
  position: relative;
}
.home-v1 .shelf::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: 0;
  height: 14px;
  border-radius: 8px;
  background: var(--ha-grad);
  box-shadow: 0 14px 28px -8px var(--ha-2);
}
.home-v1 .shelf-card {
  --s: clamp(76px, 52px + 8vw, 140px);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: clamp(1rem, 0.6rem + 1.6vw, 1.75rem) 0.75rem clamp(1.1rem, 0.7rem + 1.6vw, 1.9rem);
  background: var(--ha-card);
  border: 1px solid var(--line);
  border-radius: clamp(20px, 3vw, 32px);
  box-shadow: var(--ha-shadow);
  text-align: center;
}
.home-v1 .shelf-card .app-name { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); line-height: 1.2; }
.home-v1 .shelf-card .app-line { margin: 0; font-size: 0.95rem; color: var(--muted); max-width: 16rem; }
.home-v1 .v1-cta { margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0; }
.home-v1 .v1-pillars { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.home-v1 .v1-pillars li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem 1.5rem 1.5rem;
  overflow: hidden;
}
.home-v1 .v1-pillars li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ha-grad); }
.home-v1 .v1-pillars h3 { font-size: 1.35rem; }
.home-v1 .v1-pillars p { margin: 0; color: var(--muted); }
.home-v1 .v1-papers { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-v1 .v1-papers-grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
.home-v1 .v1-phones { display: flex; justify-content: center; gap: clamp(0.75rem, 3vw, 2rem); }
.home-v1 .v1-phones .phone { --pw: clamp(130px, 40vw, 230px); }
.home-v1 .v1-phones .phone + .phone { margin-top: 3rem; }
.home-v1 .v1-planned { display: flex; align-items: center; gap: 1.25rem; max-width: 40rem; --s: 88px; }
@media (min-width: 860px) {
  .home-v1 .v1-papers-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* Concept 2: the paperwork problem */
.home-v2 { --v2-bg: #F4F1FA; }
@media (prefers-color-scheme: dark) { .home-v2 { --v2-bg: #17151F; } }
.home-v2 { background: var(--v2-bg); }
.home-v2 .site-header { background: var(--v2-bg); }
.home-v2 .v2-hero { padding: clamp(2rem, 1.2rem + 3vw, 4rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.home-v2 .v2-hero-inner { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.home-v2 .v2-hero h1 { font-size: clamp(2.35rem, 1.3rem + 4.4vw, 4.6rem); letter-spacing: -0.035em; line-height: 1.04; }
.home-v2 .v2-hero .lead { margin-bottom: 1.5rem; }
.home-v2 .chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.home-v2 .chip {
  --s: 56px;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 1.1rem 0.55rem 0.55rem;
  background: var(--ha-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--ha-shadow);
  line-height: 1.25;
}
.home-v2 .chip .app-name { display: block; font-size: 0.98rem; }
.home-v2 .stage { position: relative; min-height: 400px; display: flex; justify-content: center; align-items: flex-start; isolation: isolate; }
.home-v2 .stage::before {
  content: ""; position: absolute; inset: -10% -6%; z-index: -1;
  background:
    radial-gradient(45% 45% at 30% 30%, var(--ha-glow-a), transparent 70%),
    radial-gradient(45% 45% at 75% 60%, var(--ha-glow-b), transparent 70%),
    radial-gradient(50% 50% at 55% 20%, var(--ha-glow-c), transparent 70%);
}
.home-v2 .stage .phone { --pw: clamp(170px, 46vw, 250px); }
.home-v2 .stage .phone-back { transform: rotate(-7deg) translate(18%, 6%); }
.home-v2 .stage .phone-front { transform: rotate(5deg) translate(-14%, 14%); }
.home-v2 .stage { height: clamp(440px, 80vw, 600px); overflow: hidden; border-radius: 32px; }
.home-v2 .v2-moment { background: var(--ha-card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-v2 .v2-moment blockquote { margin: 0; max-width: 46rem; }
.home-v2 .v2-moment blockquote p { font-size: clamp(1.4rem, 1rem + 1.9vw, 2.35rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.6em; }
.home-v2 .v2-moment .quiet { color: var(--muted); }
.home-v2 .v2-grid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr)); counter-reset: v2; }
.home-v2 .v2-grid li {
  counter-increment: v2;
  position: relative;
  padding: 4.25rem 1.5rem 1.5rem;
  background: var(--ha-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--ha-shadow);
}
.home-v2 .v2-grid li::before {
  content: counter(v2);
  position: absolute; left: 1.5rem; top: 1.25rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; color: #fff;
  background: #3B37B8;
  box-shadow: 0 0 0 5px var(--ha-glow-c);
}
.home-v2 .v2-grid h3 { font-size: 1.3rem; }
.home-v2 .v2-grid p { margin: 0; color: var(--muted); }
.home-v2 .v2-apps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); margin-top: 2rem; }
.home-v2 .v2-app { --s: 88px; display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; background: var(--ha-card); border: 1px solid var(--line); border-radius: 24px; }
.home-v2 .v2-app h3 { margin-bottom: 0.3rem; font-size: 1.3rem; }
.home-v2 .v2-app p { margin: 0.5rem 0 0; color: var(--muted); }
.home-v2 .v2-app .app-icon { flex: none; }
@media (min-width: 900px) {
  .home-v2 .v2-hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
  .home-v2 .stage { height: min(620px, calc(100vh - 140px)); min-height: 460px; }
}

/* Concept 3: a quiet manifesto */
.home-v3 .v3-sky {
  --sky-ink: #F1EFFF;
  --sky-muted: #BDB9EC;
  position: relative;
  overflow: hidden;
  color: var(--sky-ink);
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(240, 91, 190, 0.38), transparent 70%),
    radial-gradient(70% 90% at 15% 110%, rgba(47, 217, 200, 0.32), transparent 70%),
    radial-gradient(60% 70% at 55% 40%, rgba(122, 107, 255, 0.30), transparent 70%),
    #0E0C26;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
}
.home-v3 .v3-sky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ha-grad);
}
.home-v3 .v3-sky-inner { position: relative; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.home-v3 .v3-sky .kicker { color: #8FF0E6; }
.home-v3 .v3-sky h1 { font-size: clamp(3rem, 1.4rem + 8vw, 8rem); line-height: 0.95; letter-spacing: -0.045em; margin-bottom: 0.25em; }
.home-v3 .v3-sky .lead { color: var(--sky-muted); max-width: 32rem; margin-bottom: 1.75rem; }
.home-v3 .v3-sky .btn-primary { background: #F1EFFF; color: #19163F; box-shadow: 0 10px 30px -8px #C42F8E; }
.home-v3 .v3-sky .btn-primary:hover { background: #fff; color: #19163F; }
.home-v3 .v3-sky a:focus-visible { outline-color: #8FF0E6; }
.home-v3 .v3-mark { position: absolute; right: 3%; top: 12%; width: min(24vw, 300px); height: auto; opacity: 0.95; pointer-events: none; }
@media (max-width: 700px) { .home-v3 .v3-mark { width: 60vw; right: -12%; top: 4%; opacity: 0.22; } }
.home-v3 .glass { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.home-v3 .glass li {
  --s: clamp(64px, 50px + 3vw, 88px);
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1.4rem 0.85rem 0.85rem;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}
.home-v3 .glass .app-name { display: block; font-size: 1.05rem; color: var(--sky-ink); }
.home-v3 .glass .status { margin-top: 0.3rem; }
.home-v3 .glass .status-dev { background: #12312E; color: #BDEFE9; }
.home-v3 .glass .status-planned { color: var(--sky-ink); border-color: rgba(255, 255, 255, 0.55); }
.home-v3 .v3-sky .app-link { color: var(--sky-ink); }
.home-v3 .rules { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.home-v3 .rules li {
  display: grid; gap: 0.5rem 2rem; grid-template-columns: minmax(0, 1fr);
  padding: 2rem 0 2rem 1.5rem; border-bottom: 1px solid var(--line); position: relative;
}
.home-v3 .rules li::before { content: ""; position: absolute; left: 0; top: 2.1rem; bottom: 2.1rem; width: 6px; border-radius: 3px; background: var(--ha-grad); }
.home-v3 .rules h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); letter-spacing: -0.025em; margin: 0; }
.home-v3 .rules p { margin: 0; color: var(--muted); font-size: 1.1rem; max-width: 34rem; }
.home-v3 .v3-two { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); margin-top: 2rem; }
.home-v3 .v3-app { --s: 96px; padding: 1.75rem; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.home-v3 .v3-app .app-icon { margin-bottom: 1.25rem; }
.home-v3 .v3-app h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.home-v3 .v3-app p { color: var(--muted); }
@media (min-width: 860px) {
  .home-v3 .rules li { grid-template-columns: 1fr 1fr; align-items: baseline; }
}

/* Concept 4: product demo first */
.home-v4 .v4-hero { padding: clamp(1.75rem, 1rem + 2.5vw, 3.5rem) 0 0; overflow: hidden; }
.home-v4 .v4-hero-inner { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.home-v4 .v4-hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.4rem); letter-spacing: -0.035em; line-height: 1.04; }
.home-v4 .v4-hero .lead { margin-bottom: 1.5rem; }
.home-v4 .strip { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.home-v4 .v4-hero .lead { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); }
.home-v4 .strip li { --s: 52px; display: flex; align-items: center; gap: 0.85rem; line-height: 1.25; }
.home-v4 .strip .app-name { display: block; }
.home-v4 .stage {
  position: relative;
  height: clamp(340px, 92vw, 520px);
  display: flex; justify-content: center; align-items: flex-start; gap: clamp(0.5rem, 3vw, 1.5rem);
  padding-top: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: 32px 32px 0 0;
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(255, 255, 255, 0.35), transparent 70%),
    var(--ha-grad);
  overflow: hidden;
}
.home-v4 .stage .phone { --pw: clamp(140px, 36vw, 250px); flex: none; }
.home-v4 .stage .phone + .phone { margin-top: clamp(2rem, 8vw, 4.5rem); }
.home-v4 .v4-steps { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); counter-reset: v4; }
.home-v4 .v4-steps li { counter-increment: v4; border-top: 4px solid var(--ha-2); padding-top: 1.25rem; }
.home-v4 .v4-steps li::before { content: "0" counter(v4); display: block; font-size: 3.2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--accent); margin-bottom: 0.75rem; }
.home-v4 .v4-steps h3 { font-size: 1.4rem; }
.home-v4 .v4-steps p { color: var(--muted); margin: 0; }
.home-v4 .v4-cta { background: var(--surface); border-top: 1px solid var(--line); }
.home-v4 .v4-cta-inner { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.home-v4 .v4-cta .app-list { display: grid; gap: 1.25rem; }
.home-v4 .v4-cta .app-list li { --s: 80px; display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem; border-radius: 24px; background: var(--ha-card); border: 1px solid var(--line); }
.home-v4 .v4-cta .app-list p { margin: 0.3rem 0 0; color: var(--muted); }
@media (min-width: 900px) {
  .home-v4 .v4-hero-inner { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; }
  .home-v4 .stage { height: min(560px, calc(100vh - 110px)); }
  .home-v4 .v4-cta-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
}

/* Concept 5: a home for what matters */
.home-v5 { background: var(--ha-warm); --serif: ui-serif, "New York", Georgia, "Times New Roman", serif; }
.home-v5 .site-header { background: var(--ha-warm); }
.home-v5 h1, .home-v5 h2, .home-v5 h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.home-v5 .v5-hero { padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0 clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.home-v5 .v5-hero-inner { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.home-v5 .v5-hero h1 { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.8rem); line-height: 1.05; }
.home-v5 .v5-hero .lead { margin-bottom: 1.5rem; }
.home-v5 .v5-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.home-v5 .arch {
  position: relative;
  width: min(100%, 24rem);
  margin: 0 auto;
  padding: 10px;
  border-radius: 999px 999px 28px 28px;
  background: var(--ha-grad);
  box-shadow: 0 30px 60px -20px var(--ha-2);
}
.home-v5 .arch-inner {
  border-radius: 999px 999px 20px 20px;
  background:
    radial-gradient(70% 45% at 50% 8%, var(--ha-glow-a), transparent 75%),
    var(--ha-card);
  padding: clamp(3.5rem, 22vw, 7rem) clamp(0.75rem, 4vw, 1.5rem) 1.5rem;
}
.home-v5 .arch-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.home-v5 .arch-apps li { --s: clamp(80px, 22vw, 120px); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; line-height: 1.25; }
.home-v5 .arch-apps .app-name { font-size: 1rem; }
.home-v5 .arch-apps .status { font-size: 0.78rem; }
.home-v5 .v5-room { padding: clamp(2.5rem, 2rem + 3vw, 5.5rem) 0; }
.home-v5 .v5-room--tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-v5 .v5-room-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.home-v5 .arch-shot {
  width: min(100%, 22rem); margin: 0 auto; padding: 10px;
  border-radius: 999px 999px 24px 24px; background: var(--ha-grad);
  box-shadow: 0 30px 60px -22px var(--ha-3);
}
.home-v5 .arch-shot > div { height: clamp(360px, 90vw, 520px); overflow: hidden; border-radius: 999px 999px 16px 16px; background: var(--ha-card); }
.home-v5 .arch-shot img { display: block; width: 100%; height: auto; margin-top: 18%; }
.home-v5 .things { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.home-v5 .things li { padding: 0.4rem 1rem; border-radius: 999px; background: var(--ha-card); border: 1px solid var(--line); font-size: 0.98rem; }
.home-v5 .doors { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.home-v5 .doors li { padding: 2.75rem 1.5rem 1.5rem; background: var(--ha-card); border: 1px solid var(--line); border-radius: 999px 999px 24px 24px; text-align: center; box-shadow: var(--ha-shadow); }
.home-v5 .doors h3 { font-size: 1.35rem; }
.home-v5 .doors p { margin: 0; color: var(--muted); }
.home-v5 .v5-photos { display: flex; gap: 1.5rem; align-items: center; --s: 112px; max-width: 42rem; }
.home-v5 .v5-photos .app-icon { flex: none; }
@media (min-width: 900px) {
  .home-v5 .v5-hero-inner { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .home-v5 .v5-room-grid { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; }
  .home-v5 .v5-room-grid.flip { grid-template-columns: 1.2fr 0.8fr; }
}

/* Drafts index */
.home-draft .index-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.home-draft .index-list li { background: var(--ha-card); border: 1px solid var(--line); border-radius: 24px; padding: 1.5rem; box-shadow: var(--ha-shadow); }
.home-draft .index-list h2 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.home-draft .index-list p { margin: 0 0 0.75rem; color: var(--muted); }
.home-draft .draft-switch { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }

.home-draft .sample-note { font-size: 0.8125rem; color: var(--muted); margin: 0.75rem 0 0; text-align: center; }

/* Version 3: app cards that sell, each benefit with where it stands. */
.home-v3 .v3-app-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.home-v3 .v3-app-head .app-icon { --s: 72px; margin-bottom: 0; }
.home-v3 .v3-app-head h3 { margin: 0 0 0.35rem; }
.home-v3 .v3-app .v3-pitch { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0.25rem 0 0.75rem; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-v3 .v3-app .v3-pitch { background: linear-gradient(110deg, #159E93, #4B44D8 55%, #C42F8E); -webkit-background-clip: text; background-clip: text; color: transparent; }
  @media (prefers-color-scheme: dark) {
    .home-v3 .v3-app .v3-pitch { background: linear-gradient(110deg, #2FD9C8, #7A6BFF 55%, #F05BBE); -webkit-background-clip: text; background-clip: text; }
  }
}
.home-v3 .v3-benefits { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: 0.9rem; }
.home-v3 .v3-benefits li { padding: 0.9rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); }
.home-v3 .v3-benefits h4 { font-size: 1.02rem; margin: 0.45rem 0 0.25rem; color: var(--ink); }
.home-v3 .v3-app .v3-benefits p { margin: 0; font-size: 0.95rem; }
.home-v3 .chip { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.15rem 0.55rem; border-radius: 999px; }
.home-v3 .chip-now { background: var(--status-dev-bg); color: var(--status-dev-ink); }
.home-v3 .chip-dev { background: #EAE7FF; color: #3A33A8; }
.home-v3 .chip-planned { border: 1px solid var(--border-strong); color: var(--status-planned-ink); }
@media (prefers-color-scheme: dark) {
  .home-v3 .chip-dev { background: #2B2760; color: #D6D2FF; }
}

/* The brand's "aurora" in bold, in the aurora gradient. */
.home-v3 .aurora-word { font-weight: 800; background: linear-gradient(100deg, #159E93, #4B44D8 55%, #C42F8E); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) {
  .home-v3 .aurora-word { background-image: linear-gradient(100deg, #2FD9C8, #7A6BFF 55%, #F05BBE); }
}
/* The night-sky hero is navy in both schemes, so it always takes the bright gradient. */
.home-v3 .v3-sky .aurora-word { background-image: linear-gradient(100deg, #2FD9C8, #7A6BFF 55%, #F05BBE); }
.home-v3 .wordmark { font-weight: 500; }
.home-v3 .brand-eyebrow { display: block; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: lowercase; color: var(--muted); margin-bottom: 0.1rem; }
.home-v3 .brand-eyebrow .aurora-word { font-weight: 800; }
@media (forced-colors: active) { .home-v3 .aurora-word { color: CanvasText; background: none; } }

/* Version 3: both cards end on one line; the hero pills say what each app is for. */
.home-v3 .v3-app { display: flex; flex-direction: column; }
.home-v3 .v3-app .v3-benefits { flex: 1 0 auto; align-content: start; }
.home-v3 .v3-app-foot { margin: auto 0 0; padding-top: 0.5rem; }
.home-v3 .v3-soon { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.4rem; border-radius: 999px; border: 1px dashed var(--border-strong); color: var(--muted); font-weight: 600; }
.home-v3 .v3-app .v3-purpose { color: var(--ink); font-weight: 600; padding-left: 0.85rem; border-left: 3px solid #4B44D8; margin: 0 0 0.6rem; }
@media (prefers-color-scheme: dark) { .home-v3 .v3-app .v3-purpose { border-left-color: #7A6BFF; } }
.home-v3 .glass li { flex: 1 1 15rem; }
.home-v3 .glass .app-purpose { display: block; font-size: 0.85rem; color: var(--sky-ink); opacity: 0.85; margin-top: 0.1rem; }

/* Concept 3 alternatives: 3b apps in the hero, 3c benefit wall, 3d two bands, 3e compact */
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: var(--sky-ink);
}
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card h2 { font-size: 1.4rem; margin: 0 0 0.35rem; color: var(--sky-ink); }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .brand-eyebrow { color: var(--sky-muted); }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .v3-pitch { background-image: linear-gradient(110deg, #2FD9C8, #A99DFF 55%, #F58AD2); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .v3-purpose { color: var(--sky-ink); border-left-color: #A99DFF; }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .status-dev { background: #12312E; color: #BDEFE9; }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .status-planned { color: var(--sky-ink); border-color: rgba(255, 255, 255, 0.55); }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .v3-benefits li { background: rgba(14, 12, 38, 0.45); border-color: rgba(255, 255, 255, 0.16); }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .v3-benefits h4 { color: var(--sky-ink); }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .v3-benefits p { color: var(--sky-muted); }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .chip-now { background: #12312E; color: #BDEFE9; }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .chip-dev { background: #2B2760; color: #D6D2FF; }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .chip-planned { border-color: rgba(255, 255, 255, 0.55); color: var(--sky-ink); }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card .v3-soon { border-color: rgba(255, 255, 255, 0.55); color: var(--sky-ink); }
body.home-draft:is(.home-v3b, .home-v3e) .v3-sky .v3-two { margin-top: 0.5rem; }

body.home-draft.home-v3b .v3-sky h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 5.5rem); }
body.home-draft.home-v3b .v3b-intro .lead { margin-bottom: 0.5rem; }
body.home-draft.home-v3b .v3-sky { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
body.home-draft.home-v3b .v3-mark { width: min(16vw, 190px); top: 8%; }
@media (max-width: 700px) { body.home-draft.home-v3b .v3-mark { width: 50vw; } }

body.home-draft.home-v3c .v3-sky h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 5.5rem); }
body.home-draft.home-v3c .v3-mark { width: min(16vw, 190px); top: 10%; }
@media (max-width: 700px) { body.home-draft.home-v3c .v3-mark { width: 50vw; } }
body.home-draft.home-v3c .v3c-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; color: var(--muted); margin: 0.5rem 0 0; }
body.home-draft.home-v3c .v3c-group { margin-top: 2.25rem; }
body.home-draft.home-v3c .v3c-group h2 { font-size: 1.5rem; border-left: 6px solid #4B44D8; padding-left: 0.75rem; }
body.home-draft.home-v3c .v3c-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
body.home-draft.home-v3c .v3c-tile { padding: 1.1rem 1.2rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
body.home-draft.home-v3c .v3c-tile h3 { font-size: 1.1rem; margin: 0; }
body.home-draft.home-v3c .v3c-tile p { margin: 0; color: var(--muted); font-size: 0.95rem; }
body.home-draft.home-v3c .v3c-from { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
body.home-draft.home-v3c .v3c-from .app-icon { --s: 28px; }
body.home-draft.home-v3c .v3c-apps { margin-top: 3rem; }
body.home-draft.home-v3c .v3c-apps p:not(.v3-pitch) { color: var(--muted); }

body.home-draft.home-v3d .v3-mark { width: min(16vw, 190px); top: 10%; }
@media (max-width: 700px) { body.home-draft.home-v3d .v3-mark { width: 50vw; } }
body.home-draft.home-v3d .v3-sky h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 5.5rem); }
body.home-draft.home-v3d .v3d-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { body.home-draft.home-v3d .v3d-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3.5rem; } }
body.home-draft.home-v3d .v3d-papers { background: var(--surface); }
body.home-draft.home-v3d h2 { margin: 0 0 0.35rem; font-size: 1.6rem; }
body.home-draft.home-v3d .v3d-pitch { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; margin: 1rem 0 0.75rem; background: linear-gradient(110deg, #159E93, #4B44D8 55%, #C42F8E); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) { body.home-draft.home-v3d .v3d-pitch { background-image: linear-gradient(110deg, #2FD9C8, #7A6BFF 55%, #F05BBE); } }
body.home-draft.home-v3d .v3d-purpose { font-weight: 600; color: var(--ink); padding-left: 0.85rem; border-left: 3px solid #4B44D8; }
body.home-draft.home-v3d .v3d-papers .v3-benefits li { background: var(--bg); }
body.home-draft.home-v3d .v3d-papers .v3-benefits p { color: var(--muted); margin: 0; font-size: 0.95rem; }
body.home-draft.home-v3d .v3d-phones { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
body.home-draft.home-v3d .v3d-phone-row { display: flex; gap: 1.25rem; align-items: flex-start; justify-content: center; }
body.home-draft.home-v3d .v3d-phone-row .phone { --pw: clamp(130px, 38vw, 230px); flex: 0 1 auto; }
body.home-draft.home-v3d .v3d-phone-row .phone + .phone { margin-top: 3rem; }
body.home-draft.home-v3d .v3d-photos { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; }
body.home-draft.home-v3d .v3d-photos .v3-mark { display: none; }
body.home-draft.home-v3d .v3d-photos-inner { position: relative; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { body.home-draft.home-v3d .v3d-photos-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; } }
body.home-draft.home-v3d .v3d-photos-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
body.home-draft.home-v3d .v3d-bigicon { --s: clamp(120px, 80px + 12vw, 220px); }
body.home-draft.home-v3d .v3d-photos .brand-eyebrow { color: var(--sky-muted); }
body.home-draft.home-v3d .v3d-photos h2 { color: var(--sky-ink); font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }
body.home-draft.home-v3d .v3d-photos .v3d-pitch { background-image: linear-gradient(110deg, #2FD9C8, #A99DFF 55%, #F58AD2); }
body.home-draft.home-v3d .v3d-photos p.v3d-purpose { color: var(--sky-ink); border-left-color: #A99DFF; }
body.home-draft.home-v3d .v3d-photos p:not(.v3d-pitch) { color: var(--sky-muted); }
body.home-draft.home-v3d .v3d-photos .status-planned { color: var(--sky-ink); border-color: rgba(255, 255, 255, 0.55); }
body.home-draft.home-v3d .v3d-photos .v3-benefits li { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
body.home-draft.home-v3d .v3d-photos .v3-benefits h4 { color: var(--sky-ink); }
body.home-draft.home-v3d .v3d-photos .v3-benefits p { color: var(--sky-muted); margin: 0; font-size: 0.95rem; }
body.home-draft.home-v3d .v3d-photos .chip-planned { border-color: rgba(255, 255, 255, 0.55); color: var(--sky-ink); }
body.home-draft.home-v3d .v3d-photos .v3-soon { border-color: rgba(255, 255, 255, 0.55); color: var(--sky-ink); }
body.home-draft.home-v3d .v3d-photos .v3-benefits { margin-bottom: 1rem; }

body.home-draft.home-v3e .v3-sky { padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
body.home-draft.home-v3e .v3-sky h1 { font-size: clamp(2.5rem, 1.4rem + 4.5vw, 4.5rem); margin: 0; }
body.home-draft.home-v3e .v3e-intro { display: grid; gap: 0.75rem; }
body.home-draft.home-v3e .v3e-intro .lead { margin: 0; }
body.home-draft.home-v3e .v3-mark { width: min(12vw, 130px); top: 14%; }
@media (max-width: 700px) { body.home-draft.home-v3e .v3-mark { width: 40vw; top: 6%; } }
body.home-draft.home-v3e .v3-app { padding: 1.4rem; }
body.home-draft.home-v3e .v3-app .v3-pitch { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); }
body.home-draft.home-v3e .v3e-lines { list-style: none; padding: 0; margin: 0.75rem 0 1.25rem; display: grid; gap: 0.6rem; flex: 1 0 auto; align-content: start; }
body.home-draft.home-v3e .v3e-lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; font-weight: 600; color: var(--ink); }
body.home-draft.home-v3e .v3e-lines .chip { flex: none; }
body.home-draft.home-v3e .v3-app .v3-purpose { font-size: 0.95rem; }
body.home-draft.home-v3e .v3x-card .v3e-lines li { color: var(--sky-ink); }
body.home-draft.home-v3e .v3-sky .v3-two { margin-top: 1.25rem; }
body.home-draft.home-v3e .v3e-note { color: var(--sky-muted); margin: 1rem 0 0; font-size: 0.95rem; }
body.home-draft:is(.home-v3b, .home-v3e) .v3x-card p.v3b-desc { color: var(--sky-muted); margin: 0 0 0.25rem; font-size: 0.95rem; }
body.home-draft.home-v3b .v3b-cards .v3-benefits { margin-top: 0.75rem; }

/* The versions-on-every-screen preview (drafts only). */
.home-preview { background: var(--bg); color: var(--ink); }
.home-preview .pv-header, .home-preview .pv-footer { padding: 1rem clamp(1rem, 4vw, 3rem); }
.home-preview .pv-intro { max-width: 52rem; padding: 0 clamp(1rem, 4vw, 3rem); }
.home-preview .pv-intro p { color: var(--muted); }
.home-preview .pv-device { padding: 1.5rem clamp(1rem, 4vw, 3rem) 2.5rem; border-top: 1px solid var(--line); }
.home-preview .pv-size { font-weight: 400; color: var(--muted); font-size: 0.8em; }
.home-preview .pv-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); align-items: start; }
.home-preview .pv-grid-phone-landscape, .home-preview .pv-grid-tablet-landscape, .home-preview .pv-grid-pc { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.home-preview .pv-shot { margin: 0; }
.home-preview .pv-shot figcaption { margin-bottom: 0.6rem; }
.home-preview .pv-shot figcaption span { display: block; color: var(--muted); font-size: 0.9rem; }
.home-preview .pv-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(18, 23, 42, 0.18); background: #12172A; }
.home-preview .pv-phone-portrait .pv-frame, .home-preview .pv-phone-landscape .pv-frame { border: 6px solid #12172A; border-radius: 28px; }
.home-preview .pv-frame img { display: block; width: 100%; height: auto; }
.home-preview details { margin-top: 0.75rem; }
.home-preview summary { cursor: pointer; color: var(--muted); }
.home-preview details .pv-frame { margin-top: 0.6rem; }
.home-preview .pv-full { margin: 0.6rem 0 0; font-size: 0.9rem; }

/* Version 3 on a phone held sideways: both apps in the first screen. */
@media (orientation: landscape) and (max-height: 520px) {
  .home-v3 .site-header .wrap { padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .home-v3 .v3-sky { padding: 0.9rem 0 1rem; }
  .home-v3 .v3-sky-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 1.25rem; }
  .home-v3 .v3-sky .kicker { font-size: 0.68rem; margin-bottom: 0.2rem; }
  .home-v3 .v3-sky h1 { font-size: clamp(2.2rem, 6vh + 1rem, 3rem); margin-bottom: 0.2em; }
  .home-v3 .v3-sky .lead { font-size: 0.92rem; line-height: 1.4; margin-bottom: 0.7rem; }
  .home-v3 .v3-sky .v3-aside { display: none; }
  .home-v3 .v3-sky .btn { padding: 0.55rem 1.1rem; font-size: 0.92rem; }
  .home-v3 .v3-sky p { margin-bottom: 0; }
  .home-v3 .glass { flex-direction: column; flex-wrap: nowrap; gap: 0.6rem; }
  .home-v3 .glass li { --s: 46px; flex: none; padding: 0.45rem 0.9rem 0.45rem 0.45rem; border-radius: 20px; gap: 0.7rem; }
  .home-v3 .glass .app-name { font-size: 0.98rem; }
  .home-v3 .glass .app-purpose { font-size: 0.78rem; }
  .home-v3 .glass .status { margin-top: 0.2rem; }
  .home-v3 .v3-mark { width: 150px; top: 4%; right: 2%; opacity: 0.16; }
}

/* Version 3: the way to Papers sits on its card, not under the headline. */
.home-v3 .glass .pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.3rem; }
.home-v3 .glass .pill-row .status { margin-top: 0; }
.home-v3 .glass .pill-cta { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem; border-radius: 999px; background: #F1EFFF; color: #19163F; font-weight: 700; font-size: 0.92rem; text-decoration: none; box-shadow: 0 8px 22px -8px #C42F8E; }
.home-v3 .glass .pill-cta:hover { background: #fff; }
.home-v3 .glass .pill-cta:focus-visible { outline: 3px solid #8FF0E6; outline-offset: 2px; }
.home-v3 .v3-sky .lead { margin-bottom: 1.5rem; }
/* Sideways phone: the band fills what is visible under the header. */
@media (orientation: landscape) and (max-height: 520px) {
  .home-v3 .v3-sky { min-height: calc(100svh - var(--v3-header, 3.125rem)); display: flex; align-items: center; box-sizing: border-box; }
  .home-v3 .v3-sky-inner { width: 100%; }
  .home-v3 .v3-sky .lead { margin-bottom: 0; }
  .home-v3 .glass .pill-cta { min-height: 2rem; padding: 0 0.85rem; font-size: 0.85rem; }
}

/* The card's link: glass with an aurora edge, quieter than the white pill. */
.home-v3 .glass .pill-cta {
  min-height: 2rem; padding: 0 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--sky-ink);
  background: linear-gradient(rgba(14, 12, 38, 0.55), rgba(14, 12, 38, 0.55)) padding-box,
              linear-gradient(100deg, #2FD9C8, #7A6BFF 55%, #F05BBE) border-box;
  border: 1px solid transparent; box-shadow: none;
}
.home-v3 .glass .pill-cta:hover { background: linear-gradient(rgba(122, 107, 255, 0.28), rgba(122, 107, 255, 0.28)) padding-box,
              linear-gradient(100deg, #2FD9C8, #7A6BFF 55%, #F05BBE) border-box; color: #fff; }
.home-v3 .glass .pill-cta span { margin-left: 0.35rem; transition: transform 0.15s ease; }
.home-v3 .glass .pill-cta:hover span { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .home-v3 .glass .pill-cta span { transition: none; } }
@media (forced-colors: active) { .home-v3 .glass .pill-cta { border-color: LinkText; } }

/* Papers page in the design of home version 3 (draft). */
.papers-v3 .v3-sky .brand-eyebrow { color: var(--sky-muted); }
.papers-v3 .v3-sky .status-dev { background: #12312E; color: #BDEFE9; }
.papers-v3 .v3-mark { opacity: 0.3; }
.papers-v3 .p3-title { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; }
.papers-v3 .p3-title .app-icon { --s: clamp(64px, 48px + 4vw, 104px); flex: none; }
.papers-v3 .v3-sky h1 { font-size: clamp(3rem, 1.6rem + 6vw, 6.5rem); margin: 0; }
.papers-v3 .v3-sky h1 .brand-eyebrow { font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem); font-weight: 500; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.papers-v3 .p3-pitch { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 0.9rem; max-width: 22ch; background: linear-gradient(110deg, #2FD9C8, #A99DFF 55%, #F58AD2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.papers-v3 .v3-sky .lead { margin-bottom: 1.25rem; }
.papers-v3 .p3-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 0 1rem; }
.papers-v3 .p3-actions .status { margin: 0; }
.papers-v3 .p3-platform { color: var(--sky-muted); font-size: 0.95rem; max-width: 32rem; margin: 0; }
.papers-v3 .p3-shots { position: relative; }
.papers-v3 .p3-phones { display: flex; gap: 1.25rem; justify-content: center; align-items: flex-start; }
.papers-v3 .p3-phones .phone { --pw: clamp(130px, 38vw, 230px); flex: 0 1 auto; }
.papers-v3 .p3-phones .phone + .phone { margin-top: 3rem; }
.papers-v3 .p3-note { color: var(--sky-muted); font-size: 0.85rem; text-align: center; margin: 1rem 0 0; }
@media (min-width: 900px) {
  .papers-v3 .p3-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; align-items: center; }
  .papers-v3 .p3-phones .phone { --pw: clamp(170px, 17vw, 250px); }
}
.papers-v3 .p3-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.papers-v3 .p3-benefits { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); margin: 2rem 0 0; gap: 1.1rem; }
.papers-v3 .p3-benefits li { padding: 1.3rem 1.4rem; border-radius: 24px; background: var(--surface); box-shadow: var(--ha-shadow); }
.papers-v3 .p3-benefits h3 { font-size: 1.2rem; margin: 0.6rem 0 0.35rem; }
.papers-v3 .p3-benefits p { margin: 0; color: var(--muted); font-size: 1rem; }
.papers-v3 .p3-steps { counter-reset: p3; }
.papers-v3 .p3-steps li { counter-increment: p3; padding-left: 1.75rem; }
.papers-v3 .p3-steps h3 { display: inline-block; margin-top: 0.4rem; }
.papers-v3 .p3-steps h3::before { content: counter(p3) ". "; }
.papers-v3 .p3-steps li { align-items: center; }
.papers-v3 .p3-privacy { display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.papers-v3 .p3-privacy h2 { margin: 0 0 0.6rem; }
.papers-v3 .p3-privacy p { margin: 0 0 0.8rem; max-width: 38rem; font-size: 1.1rem; }
@media (min-width: 860px) { .papers-v3 .p3-privacy { grid-template-columns: 1fr 1.4fr; } }
.papers-v3 .p3-wait { max-width: 46rem; margin: 0 auto; padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border-radius: 28px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--ha-shadow); position: relative; }
.papers-v3 .p3-wait::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--ha-grad); }
.papers-v3 .p3-wait h2 { margin-bottom: 0.4rem; }
.papers-v3 .p3-wait input:focus-visible, .papers-v3 .p3-wait select:focus-visible, .papers-v3 .p3-wait textarea:focus-visible { outline: 3px solid var(--ha-2); outline-offset: 2px; }
.papers-v3 .p3-faq .faq-item { max-width: 40rem; }
.papers-v3 .p3-hero a:focus-visible { outline-color: #8FF0E6; }
@media (orientation: landscape) and (max-height: 520px) {
  .papers-v3 .p3-hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; }
  .papers-v3 .p3-title { gap: 0.7rem; margin-bottom: 0.4rem; }
  .papers-v3 .p3-title .app-icon { --s: 44px; }
  .papers-v3 .v3-sky h1 { font-size: clamp(1.8rem, 6vh + 0.6rem, 2.6rem); }
  .papers-v3 .v3-sky h1 .brand-eyebrow { font-size: 0.7rem; margin-bottom: 0.1rem; }
  .papers-v3 .p3-pitch { font-size: clamp(1.15rem, 5vh, 1.6rem); margin-bottom: 0.4rem; }
  .papers-v3 .v3-sky .lead { font-size: 0.85rem; margin-bottom: 0.5rem; }
  .papers-v3 .p3-actions { margin-bottom: 0; gap: 0.5rem 0.75rem; }
  .papers-v3 .p3-platform, .papers-v3 .p3-note { display: none; }
  .papers-v3 .p3-phones { gap: 0.9rem; }
  .papers-v3 .p3-phones .phone { --pw: calc((100svh - 5.2rem) / 2.1); }
  .papers-v3 .p3-phones .phone + .phone { margin-top: 0; }
  .papers-v3 .v3-mark { display: none; }
}
@media (forced-colors: active) { .papers-v3 .p3-pitch { color: CanvasText; background: none; } }

/* ==== Inner pages in the design of the home page and Papers (body.site-v3).
   Rides on .home-draft and .home-v3 for the variables, header, footer, sky band
   and the aurora word; everything below only turns the big hero into a compact
   title band and styles the reading column. ==== */
body.site-v3 { overflow-x: clip; }
body.site-v3 .v3-sky.s3-title {
  display: block;
  min-height: 0;
  padding: clamp(1.9rem, 1.3rem + 3vw, 3.75rem) 0 clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
}
body.site-v3 .s3-title:not(.s3-hero) .v3-sky-inner { display: block; width: auto; }
body.site-v3 .s3-hero .v3-sky-inner { width: auto; }
body.site-v3 .s3-title .v3-mark {
  width: clamp(64px, 16vw, 150px);
  right: 3%; top: 50%;
  transform: translateY(-50%);
  opacity: 0.22;
}
body.site-v3 .s3-title .kicker,
/* Breadcrumbs: the way up, ending at the parent; on phones only the parent, as a back link. */
body.site-v3 .crumbs ol { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; font-size: 0.85rem; }
body.site-v3 .crumbs li { display: flex; align-items: center; gap: 0.45rem; }
body.site-v3 .crumbs a { display: inline-flex; align-items: center; color: var(--sky-muted); text-decoration: none; border-radius: 4px; }
body.site-v3 .crumbs a:hover { color: var(--sky-ink); text-decoration: underline; text-underline-offset: 3px; }
body.site-v3 .crumbs a:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 2px; }
body.site-v3 .crumbs .sep { color: var(--sky-muted); opacity: 0.7; }
body.site-v3 .crumbs svg { width: 0.95rem; height: 0.95rem; display: block; }
body.site-v3 .crumbs .crumb-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.site-v3 .crumbs .back { display: none; }
@media (max-width: 640px) {
  body.site-v3 .crumbs .far { display: none; }
  body.site-v3 .crumbs .back { display: inline; margin-right: 0.35rem; font-size: 1.1rem; line-height: 1; }
  body.site-v3 .crumbs .parent a { padding: 0.3rem 0.75rem 0.3rem 0.55rem; border-radius: 999px; min-height: 2rem;
    background: color-mix(in srgb, var(--sky-ink) 12%, transparent); color: var(--sky-ink); }
  body.site-v3 .crumbs .parent svg { display: none; }
  body.site-v3 .crumbs .parent .crumb-text { position: static; width: auto; height: auto; clip-path: none; }
}
body.site-v3 .s3-title a { color: var(--sky-ink); }
body.site-v3 .s3-title a:hover { color: #fff; }
body.site-v3 .s3-title a:focus-visible { outline: 3px solid #8FF0E6; outline-offset: 2px; }
body.site-v3 .s3-title .aurora-word { background-image: linear-gradient(100deg, #2FD9C8, #7A6BFF 55%, #F05BBE); }
body.site-v3 .v3-sky.s3-title h1 {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 0.35em;
  max-width: 24ch;
  overflow-wrap: break-word;
}
body.site-v3 .v3-sky.s3-title .lead {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.5;
  max-width: 40rem;
  margin: 0 0 1rem;
  color: var(--sky-muted);
}
body.site-v3 .s3-title .lead:last-child,
body.site-v3 .s3-title h1:last-child { margin-bottom: 0; }
body.site-v3 .s3-title .platform-line { color: var(--sky-muted); font-size: 0.95rem; max-width: 32rem; margin: 1rem 0 0; }
body.site-v3 .s3-title .s3-act { margin: 1.25rem 0 0; }

body.site-v3 .s3-hero-inner { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
body.site-v3 .s3-shot { margin: 0; }
body.site-v3 .s3-shot .phone { --pw: clamp(150px, 46vw, 220px); margin: 0 auto; }
body.site-v3 .s3-shot figcaption { margin-top: 0.8rem; text-align: center; font-size: 0.9rem; color: var(--muted); }
body.site-v3 .s3-title .s3-shot figcaption { color: var(--sky-muted); }
@media (min-width: 860px) {
  body.site-v3 .s3-hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 3rem; }
  body.site-v3 .s3-shot .phone { --pw: clamp(190px, 18vw, 250px); }
  body.site-v3 .s3-hero .v3-mark { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  body.site-v3 .v3-sky.s3-title { padding: 1rem 0 1.1rem; }
  body.site-v3 .v3-sky.s3-title h1 { font-size: clamp(1.6rem, 6vh + 0.6rem, 2.4rem); }
  body.site-v3 .v3-sky.s3-title .lead { font-size: 0.95rem; }
  body.site-v3 .s3-hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 1.5rem; }
  body.site-v3 .s3-shot .phone { --pw: clamp(120px, 38vh, 170px); }
  body.site-v3 .s3-shot figcaption { display: none; }
  body.site-v3 .s3-title .v3-mark { display: none; }
}

body.site-v3 .s3-body { padding-top: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
body.site-v3 .s3-col { max-width: 46rem; margin: 0; }
body.site-v3 .s3-col.s3-wide { max-width: none; }
body.site-v3 .s3-col > section + section,
body.site-v3 .s3-col > * + section { margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
body.site-v3 .s3-col h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}
body.site-v3 .s3-col section > h2::before {
  content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--ha-grad); margin-bottom: 0.7rem;
}
body.site-v3 .s3-col h3 { font-size: 1.2rem; letter-spacing: -0.015em; margin: 0 0 0.4em; }
body.site-v3 .s3-col p { margin: 0 0 1em; }
body.site-v3 .s3-col :is(ul, ol) { padding-left: 1.3rem; margin: 0 0 1em; }
body.site-v3 .s3-col li { margin-bottom: 0.5em; }
body.site-v3 .s3-col li::marker { color: var(--ha-2); }
body.site-v3 .s3-col .hint { font-size: 0.9rem; color: var(--muted); }
body.site-v3 .s3-col a { text-underline-offset: 0.15em; }
body.site-v3 .s3-col strong { font-weight: 700; }
body.site-v3 .s3-col .section-note,
body.site-v3 .s3-col .badge-later {
  display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.15rem 0.7rem;
  font-size: 0.85rem; font-weight: 700; color: var(--ink); margin: 0 0 0.9rem;
}
body.site-v3 .s3-col .badge-later { font-size: 0.78rem; margin: 0 0 0 0.4rem; padding: 0.05rem 0.55rem; vertical-align: middle; }
body.site-v3 .s3-col table { width: 100%; border-collapse: collapse; margin: 0 0 1.25em; font-size: 0.98rem; }
body.site-v3 .s3-col :is(th, td) { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
body.site-v3 .s3-col th { font-weight: 700; border-bottom-color: var(--border-strong); }
body.site-v3 .s3-col dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 1em; border-top: 1px solid var(--line); }
body.site-v3 .s3-col dt { font-weight: 700; padding-top: 0.9rem; }
body.site-v3 .s3-col dd { margin: 0; padding: 0.2rem 0 0.9rem; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  body.site-v3 .s3-col dl { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); column-gap: 1.5rem; }
  body.site-v3 .s3-col dt { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  body.site-v3 .s3-col dd { padding: 0.9rem 0; }
}

body.site-v3 .s3-col details {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0.2rem 1.1rem; margin: 0.6rem 0;
}
body.site-v3 .s3-col summary { cursor: pointer; font-weight: 600; padding: 0.7rem 0; }
body.site-v3 .s3-col details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 0.7rem; }
body.site-v3 .s3-col details p { max-width: 65ch; }
body.site-v3 .s3-col details[open] summary + dl { border-top: 0; }

body.site-v3 .s3-col .faq-item { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
body.site-v3 .s3-col .faq-item:first-child { padding-top: 0; }
body.site-v3 .s3-col .faq-item h3 { margin: 0 0 0.4em; }
body.site-v3 .s3-col .faq-item p { margin: 0; color: var(--ink); }

body.site-v3 .s3-col .banner {
  max-width: none; margin: 0 0 1.5rem; padding: 1rem 1.25rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--ha-3); border-radius: 16px;
}
body.site-v3 .s3-col .waitlist ~ .banner,
body.site-v3 .s3-col .waitlist .banner { margin: 1.25rem 0 0; }

body.site-v3 .s3-col .waitlist {
  position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.25rem); border: 1px solid var(--line); border-radius: 28px;
  background: var(--surface); box-shadow: var(--ha-shadow);
}
body.site-v3 .s3-col .waitlist::before {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--ha-grad);
}
body.site-v3 .s3-col .waitlist > h2::before { display: none; }
body.site-v3 .s3-col .waitlist > :last-child { margin-bottom: 0; }
body.site-v3 .s3-col .waitlist form { margin-top: 1.25rem; }
body.site-v3 .s3-col .waitlist .consent-translations details { background: var(--bg); }
body.site-v3 .s3-col .consent-translations { margin-top: 1.5rem; }
body.site-v3 .s3-col .consent-translations h3 { font-size: 1.05rem; }

body.site-v3 .s3-col .field { max-width: 32rem; }
/* Off screen rather than display:none, which some form-filling scripts skip. */
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
body.site-v3 .s3-col .contact form { margin-top: 1rem; }
/* The share-link page's password and its two actions. */
body.site-v3 .s3-col .share-password { display: grid; gap: 0.6rem; max-width: 24rem; margin: 1rem 0 2rem; }
body.site-v3 .s3-col .share-password[hidden], body.site-v3 .s3-col .share-actions[hidden] { display: none; }
body.site-v3 .s3-col .share-password label { font-weight: 600; }
body.site-v3 .s3-col .share-password button { justify-self: start; }
body.site-v3 .s3-col .share-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 2rem; }
body.site-v3 .s3-col :is(input[type="email"], input[type="text"], input[type="password"], select, textarea) {
  padding: 0.75rem 0.9rem; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink);
}
body.site-v3 .s3-col :is(input, select, textarea):focus-visible { outline: 3px solid var(--ha-2); outline-offset: 2px; }
body.site-v3 .s3-col .consent { max-width: 40rem; }
body.site-v3 .s3-col .consent input { width: 1.15rem; height: 1.15rem; accent-color: var(--ha-2); }
body.site-v3 .s3-col .btn-secondary { color: var(--accent); border: 2px solid var(--accent); background: transparent; box-shadow: none; }
body.site-v3 .s3-col .btn-secondary:hover { background: var(--accent); color: var(--on-accent); }

body.site-v3 .s3-col .steps { margin: 0; max-width: none; border-top: 1px solid var(--line); counter-reset: step; list-style: none; padding: 0; }
body.site-v3 .s3-col .steps li { margin: 0; padding: 1.5rem 0 1.5rem 3.5rem; }
body.site-v3 .s3-col .steps li::before {
  width: 2.25rem; height: 2.25rem; top: 1.5rem; border: 2px solid transparent; color: #F1EFFF;
  background: linear-gradient(#0E0C26, #0E0C26) padding-box, var(--ha-grad) border-box;
}
body.site-v3 .s3-col .steps h2 { font-size: 1.3rem; margin: 0 0 0.3em; }
body.site-v3 .s3-col .steps h2::before { display: none; }
body.site-v3 .s3-col .steps p { margin: 0; color: var(--ink); }
body.site-v3 .s3-col .steps p + p { margin-top: 0.75em; }
body.site-v3 .s3-col .steps li:has(.step-shot) { gap: 1.25rem; }
@media (min-width: 720px) { body.site-v3 .s3-col .steps li:has(.step-shot) { grid-template-columns: minmax(0, 1fr) 10rem; } }
body.site-v3 img.step-shot {
  max-width: 10rem; padding: 6px; border: 0; border-radius: 26px;
  background: linear-gradient(150deg, #3a3a46, #0c0c10 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 40px -16px rgba(30, 20, 110, 0.55);
}

body.site-v3 .s3-col .proof-list {
  list-style: none; margin: 1.25rem 0 0; padding: 0; border: 0;
  display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
body.site-v3 .s3-col .proof-item { display: block; padding: 1.3rem 1.4rem; margin: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--ha-shadow); }
body.site-v3 .s3-col .proof-item h3 { font-size: 1.15rem; margin: 0 0 0.4em; }
body.site-v3 .s3-col .proof-item p { margin: 0; color: var(--muted); }

body.site-v3 .s3-col .plans { margin: 1.25rem 0 0; padding: 0; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
body.site-v3 .s3-col .plan { margin: 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--ha-shadow); }
body.site-v3 .s3-col .plan.is-later { border-style: dashed; border-color: var(--border-strong); box-shadow: none; }
body.site-v3 .s3-col .plan h2 { font-size: 1.3rem; margin: 0 0 0.5em; }
body.site-v3 .s3-col .plan h2::before { display: none; }
body.site-v3 .s3-col .plan ul { padding-left: 1.15rem; margin: 0.75rem 0 0; }
body.site-v3 .s3-col .plan li { color: var(--muted); margin-bottom: 0.4em; }

body.site-v3 .s3-shots { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-start; margin: 1.25rem 0 0; }
body.site-v3 .s3-shots .s3-shot { flex: 0 1 auto; }

body.site-v3 .s3-col .placeholder { border-radius: 4px; }
body.site-v3 .s3-col .claim-list { padding-left: 1.3rem; }
@media (forced-colors: active) {
  body.site-v3 .s3-col .steps li::before { border-color: CanvasText; }
  body.site-v3 .s3-col .waitlist::before, body.site-v3 .s3-col section > h2::before { background: CanvasText; }
}
body.site-v3 .footer-content { padding-left: clamp(1.1rem, 4vw, 2.25rem); padding-right: clamp(1.1rem, 4vw, 2.25rem); }

/* Pricing: the plan available today in the full aurora, the planned ones each
   in one brand colour, muted rather than grey so the palette still reads. */
body.site-v3 .s3-col .plan { position: relative; overflow: hidden; }
body.site-v3 .s3-col .plan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--plan-colour, var(--publisher-gradient)); }
.plan-free { --plan-colour: var(--publisher-gradient); }
.plan-lite { --plan-colour: #159E93; --plan-ink: #0E7C73; }
.plan-personal { --plan-colour: #4B44D8; --plan-ink: #3A33A8; }
.plan-family { --plan-colour: #C42F8E; --plan-ink: #9E2373; }
@media (prefers-color-scheme: dark) {
  .plan-lite { --plan-colour: #2FD9C8; --plan-ink: #2FD9C8; }
  .plan-personal { --plan-colour: #7A6BFF; --plan-ink: #A99FFF; }
  .plan-family { --plan-colour: #F05BBE; --plan-ink: #F58BD0; }
}
body.site-v3 .s3-col .plan.is-active { border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--publisher-gradient) border-box; }
body.site-v3 .s3-col .plan.is-inactive { opacity: 0.72; box-shadow: none; }
.plan .plan-price { font-weight: 600; margin: 0.25rem 0 0; color: var(--plan-ink, inherit); }
.plan-free .plan-price { background: var(--publisher-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan li::marker { color: var(--plan-ink, #4B44D8); }
.plan .badge-now { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; vertical-align: middle; background: var(--publisher-gradient); color: #fff; }