/* PlotTwin site: Cinema tokens from CLAUDE.md. Dark only, like the app. Fonts are self-hosted (OFL), no third-party requests. */
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/bigshouldersdisplay_extrabold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree_semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --screen: #0E0C0B;
  --raised: #1C1917;
  --raised-hi: #26221F;
  --text: #F6EEE3;
  --text-dim: #A8A097;
  --you: #FFC069;
  --twin: #8AD8F0;
  --on-light: #1A120B;
  --line: rgba(246, 238, 227, 0.14);
  --fill-others: #3B3734;
  --accent: #3A2A20;
  --gutter: 20px;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--screen); color: var(--text); font: 400 16px/1.5 var(--ui); }
a { color: var(--text); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.wordmark { font: 700 20px/24px var(--ui); color: var(--text); text-decoration: none; letter-spacing: 0.01em; }
.top nav { display: flex; gap: 20px; font: 600 14px/18px var(--ui); }
.top nav a { color: var(--text-dim); text-decoration: none; padding: 12px 0; }
.top nav a:hover { color: var(--text); }

/* Display type */
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.005em; margin: 0; }
.eyebrow { font: 600 14px/18px var(--ui); color: var(--text); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 16px; }
.dim { color: var(--text-dim); }

/* Hero: a PlotTwin theme instead of a poster. Accent tint, a diagonal pattern, fading into the warm black base. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 12, 11, 0) 0%, rgba(14, 12, 11, 0.55) 55%, var(--screen) 100%),
    repeating-linear-gradient(135deg, rgba(255, 192, 105, 0.07) 0 2px, transparent 2px 22px),
    radial-gradient(120% 80% at 80% 0%, #5A3B26 0%, var(--accent) 45%, var(--screen) 100%);
}
.hero-grid { display: grid; gap: 40px; padding: 48px 0 64px; align-items: center; }
.hero h1 { font-size: clamp(56px, 14vw, 112px); }
.lede { font-size: 19px; line-height: 1.45; max-width: 34ch; margin: 20px 0 28px; }

.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 28px; border-radius: 999px; font: 600 17px/22px var(--ui); }
.store-badge { display: inline-flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 8px 22px; border-radius: 16px; background: var(--raised-hi); border: 1px solid var(--line); }
.store-badge small { font: 400 13px/18px var(--ui); color: var(--text-dim); }
.store-badge b { font: 600 17px/22px var(--ui); color: var(--text); }
.soon { font: 400 13px/18px var(--ui); color: var(--text-dim); margin: 12px 0 0; }

/* Sample reveal card: the app's signature moment, drawn with its tokens. */
figure { margin: 0; }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.card .q { font-size: clamp(30px, 8vw, 40px); margin: 8px 0 20px; }
.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.row { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 16px; background: var(--screen); font: 500 15px/21px var(--ui); }
.row .bar { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--fill-others); z-index: 0; transform-origin: left; animation: fill 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 300ms; }
.row:nth-child(2) .bar { animation-delay: 380ms; }
.row.p88 { --pct: 88%; }
.row.p12 { --pct: 12%; }
.row.mine { box-shadow: inset 0 0 0 1.5px var(--you); }
.row.mine .bar { background: #4E3E29; }
.row.mine .pct, .row.mine .you-tag { color: var(--you); }
.row > span { position: relative; z-index: 1; }
.row .pct { font: 800 24px/1 var(--display); }
.row.mine .you-tag { font: 600 13px/18px var(--ui); margin-left: 8px; }
.stamp { display: inline-block; margin-top: 16px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--you); color: var(--you); font: 700 15px/20px var(--ui); }
.card .note { font-size: 13px; line-height: 18px; color: var(--text-dim); margin: 16px 0 0; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .row .bar { animation: none; } }

/* Sections */
section.block { padding: 56px 0; border-top: 1px solid var(--line); }
section.block h2 { font-size: clamp(40px, 9vw, 56px); margin-bottom: 28px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { background: var(--raised); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.steps .num { font: 800 44px/0.92 var(--display); display: block; margin-bottom: 12px; color: var(--text); }
.steps h3 { font: 600 17px/22px var(--ui); margin: 0 0 6px; }
.steps p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 21px; }

.contact p { margin: 0 0 8px; }
.contact a { font-weight: 600; }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--text-dim); font-size: 13px; line-height: 18px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
footer nav a { color: var(--text-dim); padding: 6px 0; }
footer p { margin: 0 0 6px; }

/* Legal pages */
.legal { padding-top: 32px; padding-bottom: 56px; }
.legal h1 { font-size: clamp(48px, 12vw, 72px); margin: 8px 0 16px; }
.legal h2 { font: 700 20px/26px var(--ui); margin: 40px 0 12px; }
.legal p, .legal li { font-size: 16px; line-height: 1.6; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.draft { background: var(--raised-hi); border: 1px solid rgba(246, 238, 227, 0.5); border-radius: 16px; padding: 16px 20px; margin: 0 0 24px; font-size: 15px; line-height: 21px; }
.draft strong { color: var(--text); }
.tbc { color: var(--text); font-weight: 600; background: var(--fill-others); padding: 0 4px; border-radius: 4px; }
.table-scroll { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 21px; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { background: var(--raised); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

@media (min-width: 820px) {
  :root { --gutter: 32px; }
  .hero-grid { grid-template-columns: 1.1fr 1fr; padding: 72px 0 96px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}