/* ============================================================
   VARIANT C — "Vermilion Poster"
   Loud, confident, launch-ready. Full-bleed vermilion fields
   alternating with paper and the app's warm dark theme.
   Poster typography, a CSS-drawn isolaite phone, a marquee.
   Palette from ui/theme/Color.kt (light + warm dark).
   Zero JS · zero webfonts · zero external requests.
   ============================================================ */

:root {
  --vermilion: #6b3a5b;
  --vermilion-deep: #4a2740;
  --on-vermilion: #fdf5fa;
  --paper-bright: #fdfbf6;
  --paper: #f8f4ec;
  --paper-deep: #f0e9db;
  --ink: #1d1812;
  --ink-soft: #5c5547;
  --ink-faint: #8e8674;
  --hairline: #e5dccb;
  --warm-bg: #14100b;
  --warm-surface: #1c160e;
  --warm-surface-2: #2a2116;
  --warm-ink: #ece3d3;
  --warm-ink-faint: #9e9481;
  --warm-hairline: #3a2f20;
  --warm-accent: #c994b7;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { margin: 0; background: var(--paper-bright); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; margin: 0 0 0.4em; }
p { margin: 0 0 1em; }
a { color: var(--vermilion); }

.tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }

/* ---- Header (on vermilion) ------------------------------------------ */

header.site { background: var(--vermilion); color: var(--on-vermilion); }
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { display: block; height: 30px; width: auto; }
nav.site a { color: var(--on-vermilion); opacity: 0.8; text-decoration: none; font-size: 0.9rem; font-weight: 600; margin-left: 1.6rem; }
nav.site a:hover { opacity: 1; }
@media (max-width: 760px) { nav.site { display: none; } }

/* ---- Hero: vermilion poster ----------------------------------------- */

.hero { background: var(--vermilion); color: var(--on-vermilion); overflow: hidden; position: relative; }
.hero .shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; padding-top: clamp(2rem, 4.5vw, 3.4rem); padding-bottom: clamp(2.2rem, 5vw, 3.8rem); }
@media (max-width: 940px) { .hero .shell { grid-template-columns: 1fr; } }

/* Sized so the whole hero — headline, sub, buttons — fits one screen even on
   a short laptop viewport: cap by viewport height as well as width. */
.hero h1 {
  font-size: clamp(2.1rem, min(6.4vw, 7.2vh), 4.4rem);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 0.3em;
}
.hero h1 span { display: block; }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 1.5px var(--on-vermilion); }
.hero .sub { font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 42ch; opacity: 0.92; margin-top: 1.1rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.btn { display: inline-flex; align-items: center; padding: 0.8rem 1.6rem; font-weight: 700; font-size: 0.95rem; text-decoration: none; border-radius: 999px; border: 2px solid var(--on-vermilion); }
.btn-solid { background: var(--on-vermilion); color: var(--vermilion); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper-bright); }
.btn-ghost { color: var(--on-vermilion); }
.btn-ghost:hover { background: rgba(255, 246, 236, 0.12); }

.hero .note { font-size: 0.82rem; opacity: 0.75; margin-top: 1.1rem; }

/* iOS stamp */
/* Sits in the text column so it can never collide with the device mockup. */
.stamp {
  display: inline-block;
  margin-top: 0.7rem;
  border: 1px dashed var(--on-vermilion);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-vermilion);
  opacity: 0.85;
  white-space: nowrap;
}

/* ---- CSS-drawn isolaite phone --------------------------------------- */

.phone { width: min(100%, 268px); margin-inline: auto; background: var(--ink); border-radius: 34px; padding: 9px; box-shadow: 0 24px 48px rgba(29, 24, 18, 0.35); }
.screen { background: var(--paper); border-radius: 32px; overflow: hidden; color: var(--ink); font-size: 0.82rem; line-height: 1.5; }
.screen .app-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem 0.7rem; border-bottom: 1px solid var(--hairline); font-family: var(--serif); font-weight: 700; font-size: 1rem; }
.screen .app-bar .burger { width: 16px; height: 2px; background: var(--ink); position: relative; flex: none; }
.screen .app-bar .burger::before, .screen .app-bar .burger::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink); }
.screen .app-bar .burger::before { top: -5px; } .screen .app-bar .burger::after { top: 5px; }
.screen .chat { padding: 1rem 1rem 1.1rem; display: grid; gap: 0.7rem; }
.bubble-user { justify-self: end; background: var(--ink); color: var(--paper-bright); border-radius: 18px 18px 4px 18px; padding: 0.6rem 0.9rem; max-width: 85%; }
.ai-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.2rem; }
.ai-text { color: var(--ink); max-width: 95%; margin: 0; }
.offline-chip { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--hairline); background: var(--paper-bright); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.offline-chip::before { content: "✈"; color: var(--vermilion); }
.screen .input { margin: 0 0.9rem 0.9rem; border: 1px solid var(--hairline); background: var(--paper-bright); border-radius: 22px; padding: 0.65rem 0.9rem; }
.screen .input .ph { color: var(--ink-faint); display: flex; justify-content: space-between; align-items: center; }
.screen .input .send { width: 26px; height: 26px; border-radius: 50%; background: var(--vermilion); color: var(--on-vermilion); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; flex: none; }
.screen .modes { display: flex; gap: 0.35rem; margin-top: 0.55rem; }
.screen .modes span { border: 1px solid var(--hairline); border-radius: 999px; padding: 0.18rem 0.55rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.screen .modes span.on { background: var(--ink); border-color: var(--ink); color: var(--paper-bright); }

/* ---- Marquee --------------------------------------------------------- */

.marquee { background: var(--ink); color: var(--paper-bright); overflow: hidden; padding: 0.85rem 0; border-block: 4px solid var(--vermilion); }
.marquee .track { display: flex; gap: 3rem; white-space: nowrap; font-family: var(--serif); font-size: 1.05rem; font-style: italic; animation: slide 28s linear infinite; width: max-content; }
.marquee .track span::after { content: "·"; color: var(--vermilion); margin-left: 3rem; font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }

/* ---- Paper: manifesto features --------------------------------------- */

.features { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.features h2, .dark-block h2, .price h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -0.03em; max-width: 18ch; }
.features h2 em { color: var(--vermilion); font-style: italic; }

.poster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; margin-top: 3rem; border: 2px solid var(--ink); background: var(--ink); grid-gap: 2px; }
.poster-cell { background: var(--paper-bright); padding: 2rem 1.8rem 2.2rem; position: relative; }
.poster-cell:hover { background: var(--paper); }
.poster-cell .n { font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--paper-deep); -webkit-text-stroke: 1.5px var(--vermilion); font-weight: 700; display: block; margin-bottom: 1.1rem; }
.poster-cell h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.poster-cell p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; max-width: 40ch; }
.grid-note { font-size: 0.84rem; color: var(--ink-faint); margin: 1.3rem 0 0; max-width: 74ch; }
.dark-note { font-size: 0.82rem; color: var(--warm-ink-faint); margin: 1rem 0 0; max-width: 74ch; }

/* ---- Warm dark: knowledge + screenshots ------------------------------ */

.dark-block { background: var(--warm-bg); color: var(--warm-ink); padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.dark-block .tag { color: var(--warm-accent); }
.dark-block h2 { color: var(--warm-ink); }
.dark-block h2 em { color: var(--warm-accent); font-style: italic; }
.dark-block .lede { color: var(--warm-ink-faint); font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 52ch; }

.shots { display: flex; gap: 1.4rem; overflow-x: auto; padding: 2.8rem 0 1rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.shot { flex: none; width: min(72vw, 270px); scroll-snap-align: start; }
.shot .frame { background: var(--warm-surface-2); border: 1px solid var(--warm-hairline); border-radius: 30px; padding: 9px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 22px; }
.shot figcaption { font-size: 0.85rem; color: var(--warm-ink-faint); margin-top: 0.8rem; padding-left: 0.4rem; }
.shot { margin: 0; }

.dark-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin-top: 2.2rem; }
.dark-card { border: 1px solid var(--warm-hairline); background: var(--warm-surface); border-radius: 18px; padding: 1.5rem 1.5rem 1.6rem; }
.dark-card h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.4rem; color: var(--warm-ink); }
.dark-card p { color: var(--warm-ink-faint); font-size: 0.95rem; margin: 0; }
.dark-card .dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--warm-accent); margin-bottom: 1rem; }

/* Engine strip inside dark block */
.engine-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; background: var(--warm-hairline); border: 1px solid var(--warm-hairline); border-radius: 16px; overflow: hidden; margin-top: 2.6rem; }
.engine-cell { background: var(--warm-surface); padding: 1.5rem 1.5rem 1.6rem; }
.engine-cell .k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm-ink-faint); display: block; margin-bottom: 0.5rem; }
.engine-cell .v { font-family: var(--serif); font-size: 1.6rem; color: var(--warm-ink); letter-spacing: -0.02em; }
.engine-cell .s { display: block; font-size: 0.8rem; color: var(--warm-ink-faint); margin-top: 0.3rem; }

/* ---- Vermilion price poster ------------------------------------------ */

.price { background: var(--vermilion); color: var(--on-vermilion); padding: clamp(3.5rem, 9vw, 6.5rem) 0; text-align: center; }
.price .tag { opacity: 0.8; }
.price h2 { max-width: none; }
.price .giant { font-family: var(--serif); font-size: clamp(4.5rem, 14vw, 9.5rem); line-height: 0.9; font-weight: 700; letter-spacing: -0.05em; display: block; }
.price .giant sup { font-size: 0.16em; vertical-align: 3.2em; letter-spacing: 0.2em; font-family: var(--sans); font-weight: 700; text-transform: uppercase; }
.price .once { font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 600; opacity: 0.9; margin-top: 0.5rem; }
.price ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 2.2rem 0 0; padding: 0; }
.price li { border: 1px solid rgba(255, 246, 236, 0.5); border-radius: 999px; padding: 0.5rem 1.2rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.price .actions { justify-content: center; }
.price .fine { font-size: 0.82rem; opacity: 0.75; max-width: 54ch; margin: 1.8rem auto 0; }

/* ---- Paper FAQ + footer ----------------------------------------------- */

.faq { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.faq h2 { font-size: clamp(2rem, 5vw, 3rem); }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 3rem; margin-top: 1.6rem; max-width: 980px; }
details { border-bottom: 2px solid var(--ink); padding: 1.1rem 0; }
details summary { cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "→"; float: right; color: var(--vermilion); }
details[open] summary::after { content: "↓"; }
details p { margin: 0.8rem 0 0; color: var(--ink-soft); font-size: 0.96rem; }

footer.site { background: var(--ink); color: var(--paper-deep); padding: 3rem 0 3.8rem; }
footer.site .rows { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: space-between; align-items: baseline; }
footer.site .wordmark img { height: 26px; }
footer.site p { color: var(--ink-faint); font-size: 0.88rem; margin: 0.8rem 0 0; }
footer.site nav a { color: var(--paper-deep); text-decoration: none; margin-right: 1.5rem; font-size: 0.9rem; font-weight: 600; }
footer.site nav a:hover { color: var(--paper-bright); }

/* moved out of inline style attributes (CSP: style-src 'self') */
.section-lede { color: var(--ink-soft); max-width: 56ch; font-size: 1.1rem; }
.tag-ink { color: var(--accent); }