/* Letta's research palette and type: Roobert for reading, Fira Code for
   labels and data, square hairline panels rather than filled rounded cards. */

@font-face { font-family: 'Roobert'; src: url('/assets/fonts/Roobert-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('/assets/fonts/Roobert-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('/assets/fonts/FiraCode-VF.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }

:root {
  --bg: #ECEEF0;
  --card: #ECEEF0;
  --ink: #17181A;
  --accent: #2200CC;
  --task-outline: color-mix(in srgb, #70449D 42%, var(--bg));
  --task-hover: color-mix(in srgb, #70449D 10%, var(--bg));
  --selection-bg: #EC6242;
  color-scheme: light;
  --sans: 'Roobert', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --page-max: 1152px;
  --gutter: 24px;
}
:root[data-theme="dark"] {
  --bg: #202020;
  --card: #202020;
  --ink: #C9CDD1;
  --accent: #EC6242;
  --task-outline: color-mix(in srgb, #A685C7 45%, var(--bg));
  --task-hover: color-mix(in srgb, #A685C7 10%, var(--bg));
  --selection-bg: #2200CC;
  color-scheme: dark;
}
:root {
  --ink-70: color-mix(in srgb, var(--ink) 70%, transparent);
  --ink-45: color-mix(in srgb, var(--ink) 45%, transparent);
  --ink-25: color-mix(in srgb, var(--ink) 25%, transparent);
  --ink-12: color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-6: color-mix(in srgb, var(--ink) 6%, transparent);
}
/* Chart series retain distinct, readable hues on both brand backgrounds. */
:root { --c-dreams-max: #2200CC; --c-dreams: #EC6242; --c-hermes: #4E7D6A; --c-claude-code: #7C6AA6; --c-codex: #4F7A8C; --c-none: #8E8B84; }
:root[data-theme="dark"] { --c-dreams-max: #8D9BFF; --c-dreams: #F2876C; --c-hermes: #7FB59E; --c-claude-code: #B0A2D8; --c-codex: #86B3C6; --c-none: #7D7A73; }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: 88px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
::selection { background: var(--selection-bg); color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.container { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }

/* Mono utilities */
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-70); }
.caption { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-45); }
.index { font-family: var(--mono); font-size: 11px; color: var(--ink-45); font-variant-numeric: tabular-nums; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--ink-25); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.wordmark .mark { width: 20px; height: 20px; flex: none; }
.wordmark .divider { width: 1px; height: 20px; background: var(--ink-25); }
/* Small hairline tag: "Preview" in the header, "coming soon" notes beside section headings. */
.badge { padding: 4px 7px; border: 1px solid var(--ink-25); font-family: var(--sans); font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--ink-45); white-space: nowrap; }
.wordmark .badge { margin-left: -4px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* Centre tags on the heading's optical middle (between x-height and cap height), not its
   cap height: about 0.08 of the heading size lower than plain centring. */
.section-head .badge { position: relative; top: var(--badge-nudge, 0px); }
.panel .section-head, .section .section-head, .card-head .section-head { --badge-nudge: 2.5px; }
.page-head .section-head { --badge-nudge: clamp(3.3px, 0.415vw, 4.6px); }
.site-nav { display: flex; align-items: center; gap: 28px; font-family: var(--mono); font-size: 13px; }
.site-nav a { color: var(--ink-45); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a:hover { color: var(--accent); }
.theme-toggle, .nav-toggle { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-45); background: none; border: 0; padding: 0; cursor: pointer; }
.theme-toggle:hover, .nav-toggle:hover { color: var(--accent); }
.nav-toggle { display: none; }

/* Hero: centered layout, same type as before */
.hero { position: relative; overflow: hidden; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.hero-field.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-field { transition: none; } }
.hero-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 40px 64px; padding-block: 120px 339px; }
.hero h1 { font-size: clamp(40px, 6.4vw, 92px); font-weight: 400; line-height: 0.95; letter-spacing: -0.045em; }
.hero-by { display: inline-block; margin-top: 20px; font-size: 16px; color: var(--ink-45); transition: color .15s; }
.hero-by:hover { color: var(--ink); }
/* Letta's lockup (mark + wordmark), sized so its capitals match the 16px text and dropped by
   its own descent (72 of 360 units) so the wordmark sits on the same baseline as "by". */
.hero-lockup { display: inline-block; width: 3.96em; height: 1.17em; margin-left: 0.15em; vertical-align: -0.234em; background: currentColor; mask: url('/assets/images/letta-lockup.svg') left center / contain no-repeat; -webkit-mask: url('/assets/images/letta-lockup.svg') left center / contain no-repeat; }
.hero .tagline { font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-70); max-width: 15em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.button { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 15px; font-weight: 500; padding: 11px 16px 11px 18px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink-25); }
.button.filled { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.button { transition: color .15s, background-color .15s, border-color .15s; }
.button.filled:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .button.filled:hover { color: var(--bg); }
.button:not(.filled):hover { border-color: var(--accent); color: var(--accent); }
.button .icon { width: 16px; height: 16px; flex: none; }
.button .cursor { transform-origin: center; }
.button:hover .icon-terminal .cursor { animation: blink 1s steps(1) infinite; }
.button:hover .icon-blog .line { stroke-dasharray: 8; animation: write 1.4s ease-in-out infinite; }
.button:hover .icon-blog .l2 { animation-delay: 0.2s; }
.button:hover .icon-blog .l3 { animation-delay: 0.4s; }
/* A button for something that isn't live yet: no link, a tooltip says so on hover or focus. */
.button.soon { cursor: default; color: var(--ink-70); }
.button.soon:hover { border-color: var(--ink-25); color: var(--ink-70); }
.button.soon:hover .icon-blog .line { animation: none; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes write { 0% { stroke-dashoffset: 8; } 40%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -8; } }
@media (prefers-reduced-motion: reduce) { .button:hover .icon * { animation: none; } }

/* Chart view segmented control (FrontierSWE style) */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--ink-25); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.segmented button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-70); background: none; border: 0; padding: 6px 12px; cursor: pointer; }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-selected="true"] { color: var(--bg); background: var(--ink); }
.chart-view-panel[hidden] { display: none; }

/* Pareto chart */
.card-sub { margin-top: 12px; }
.chart-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 0 12px 0 44px; }
.chart-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); }
.pareto-wrap { margin-top: 12px; }
.pareto { width: 100%; height: auto; display: block; font-family: var(--sans); }
.pareto .grid { stroke: var(--ink-12); stroke-width: 1; }
.pareto .tick { font-family: var(--mono); font-size: 11px; fill: var(--ink-45); }
.pareto .axis { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-45); }
.pareto .series-label { font-size: 13.5px; font-weight: 400; letter-spacing: -0.01em; }
.pareto .effort { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.pareto .series { transition: opacity .15s; }
.pareto.hovering .series:not(.active) { opacity: 0.22; }
.pareto .dot { transition: r .15s; }
.pareto .dot.active { r: 6.5; }
.pareto .guide { stroke-width: 1; stroke-dasharray: 4 4; }
.pareto .guide-label { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.pareto.hovering .tick { opacity: 0.6; }

/* Intro: two-column card, headline left and body right, like the Submit card */
.intro-section .intro-body { max-width: 46em; }
.intro-section .intro-body p { font-size: 17px; }
.intro-lede { font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.intro-body p { font-size: 16px; line-height: 1.6; color: var(--ink-70); }
.intro-body p + p { margin-top: 14px; }
.intro-body strong { font-weight: 500; color: var(--ink); }
.intro-body a:not(.button) { text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 3px; }
.intro-body a:not(.button):hover { color: var(--accent); }

/* Section cards */
.card { background: var(--card); border: 1px solid var(--ink-25); padding: 40px; margin-bottom: 20px; }
.closing { margin-bottom: 20px; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; }
.section-title, .card-head h2.label { font-family: var(--sans); font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.panel { margin-bottom: 56px; }
.panel > .section-head { margin-bottom: 20px; }
.panel > .panel-sub { margin: -8px 0 20px; }
.panel > .card { margin-bottom: 0; }
.card > .table-wrap:first-child, .card > .chart-row:first-child { margin-top: 0; }
.card-head .caption { flex-basis: 100%; margin-top: 4px; }
.link-pill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-70); border: 1px solid var(--ink-25); padding: 6px 14px; }
.link-pill:hover { color: var(--accent); border-color: var(--accent); }

/* Tables */
.table-wrap { overflow-x: auto; margin-top: 28px; }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink-12); white-space: nowrap; }
td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--ink-6); vertical-align: middle; white-space: nowrap; color: var(--ink-70); }
tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; padding-right: 0; padding-left: 12px; }
th:first-child, td.index:first-child { padding-right: 32px; }
.leaderboard th:not(.num), .leaderboard td:not(.num):not(.bar) { padding-right: 40px; }
.leaderboard th.num, .leaderboard td.num { padding-left: 32px; }
td.wide { white-space: normal; min-width: 12em; }
.entry-name { display: block; font-family: var(--sans); font-size: 14.5px; color: var(--ink); letter-spacing: -0.01em; }
.entry-name[data-tip] { display: inline; text-decoration: underline dotted var(--ink-25); text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: default; outline: none; }
.entry-name[data-tip]:hover, .entry-name[data-tip]:focus-visible { text-decoration-color: var(--ink-70); }
.entry-sub { display: block; font-size: 10.5px; color: var(--ink-45); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; }
.score { color: var(--ink); font-weight: 500; font-size: 13px; }
.effort-tag { color: var(--ink-45); font-size: 11px; }
.score-cell { width: 1%; }
tr.control td { border-top: 1px solid var(--ink-12); }
tr.control .entry-name { color: var(--ink-70); }
.best { color: var(--ink); font-weight: 500; }

/* Inline bar with 20% gridlines */
td.bar { width: 40%; min-width: 220px; padding-left: 16px; }
.bar-track { position: relative; height: 20px; background-image: repeating-linear-gradient(to right, var(--ink-6) 0 1px, transparent 1px 20%); }
.bar-track::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--ink-6); }
.bar-fill { position: absolute; top: 6px; height: 8px; background: var(--ink-25); opacity: .55; }
.bar-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-25); }

/* Pills */
.pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pill { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--ink-25); color: var(--ink-70); white-space: nowrap; }

/* Task grid */
.page-head { padding: 88px 0 40px; }
.page-head h1 { font-size: clamp(40px, 5vw, 56px); line-height: 1; letter-spacing: -0.03em; }
.page-head p { margin-top: 16px; color: var(--ink-70); max-width: 34em; font-size: 17px; }
.page-head .caption { margin-top: 12px; font-size: 11px; }
.task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; margin: 32px 0 96px; }
.task-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; border: 1px solid var(--task-outline); background: var(--card); min-width: 0; transition: background-color .15s; }
.task-card:hover, .task-card:focus-visible { background: var(--task-hover); }
.task-card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.task-card h3 { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.task-card p { font-size: 14px; line-height: 1.5; color: var(--ink-70); }
.highlights-section { padding: 16px 0 8px; margin-bottom: 20px; }
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.highlight { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px 14px 30px; border: 1px solid var(--ink-25); background: var(--card); transition: background-color .15s; }
.highlight:hover, .highlight:focus-visible { background: var(--task-hover); }
.highlight-head, .highlight p { margin-inline: 8px; }
.highlight-head { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.highlight-head .pill { align-self: flex-start; }
.highlight-title { font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.highlight p { font-size: 15.5px; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }

/* About FrontierMemory: two panels following one detail, drawn in the accent colour */
.how-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; counter-reset: step; }
.how-steps li { counter-increment: step; }
.how-figure { position: relative; border: 1px solid var(--ink-25); background: var(--bg); }
.how-figure::before { content: counter(step, decimal-leading-zero); position: absolute; left: 12px; top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-45); }
.how-figure svg { display: block; width: 100%; height: auto; }
.how-steps p { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }
.s-paper { fill: var(--card); stroke: var(--ink-12); }
.s-line { fill: var(--ink-25); }
.s-head { fill: var(--ink-45); }
.s-key, .s-key-fill { fill: var(--accent); }
.s-arrow { fill: none; stroke: var(--ink-45); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.s-pass { fill: var(--ink); }
.s-tick { fill: none; stroke: var(--card); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Task sources: one field of trajectory squares, tinted by benchmark, solved in solid ink */
.sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.sources-figure { align-self: stretch; display: grid; place-items: center; }
/* 21 equal columns that fill the figure, up to 16px squares; never wider than its column. */
.field { display: grid; gap: 6px; padding: 4px; width: 100%; max-width: 464px; }
.field i { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--ink-25); }
.field i { cursor: default; transition: opacity .25s; }
[data-source="1"] { --fill: var(--ink-25); }
[data-source="2"] { --fill: var(--ink-12); }
[data-source="3"] { --fill: var(--ink-6); }
.field i { background: var(--fill); }
.field i[data-solved] { background: var(--ink); border-color: var(--ink); }
.field.focus i:not(.on) { opacity: 0.55; }
.field.intro i { animation: dot-in .5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc((var(--x) + var(--y)) * 22ms); }
@keyframes dot-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .field.intro i { animation: none; } }

/* Narrow reading pages */
.narrow { max-width: 680px; margin-inline: auto; padding: 88px 0 120px; }
.narrow .eyebrow { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.narrow h1 { font-size: clamp(34px, 4.5vw, 46px); line-height: 1.05; letter-spacing: -0.03em; }
.lede { margin-top: 20px; font-size: 18px; line-height: 1.45; color: var(--ink-70); }
.prose { margin-top: 28px; font-size: 16.5px; line-height: 1.6; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-top: 2em; }
.prose h3 { font-size: 17px; font-weight: 500; margin-top: 1.6em; }
.prose a { text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--ink-6); padding: 0.1em 0.35em; }
.prose pre { font-family: var(--mono); font-size: 13px; line-height: 1.55; overflow-x: auto; padding: 16px 20px; background: var(--card); border: 1px solid var(--ink-25); }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--ink-12); margin: 2.5em 0; }
.prose blockquote { margin: 0; padding-left: 1em; border-left: 2px solid var(--ink-12); color: var(--ink-70); }
.prose table { font-size: 13px; }
.prose th, .prose td { white-space: normal; }
.section-label { margin-top: 56px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-12); }
.section-label + .table-wrap { margin-top: 4px; }
.pager { display: flex; justify-content: space-between; margin-bottom: 48px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.pager a { color: var(--ink-45); }
.pager a:hover { color: var(--accent); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; font-family: var(--mono); font-size: 12.5px; margin-top: 24px; }
.kv dt { color: var(--ink-45); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 2px; }
.kv dd { color: var(--ink-70); overflow-wrap: anywhere; }
.kv dd a:hover { color: var(--accent); }
.instruction { margin-top: 20px; padding: 28px 32px; border: 1px solid var(--ink-25); background: var(--card); font-size: 15.5px; }
.notice { margin-top: 20px; padding: 14px 18px; border: 1px solid var(--ink-25); background: var(--card); font-size: 14px; line-height: 1.55; color: var(--ink-70); }

/* Tooltip: one shared element, positioned by site.js above its anchor */
.tip { position: fixed; z-index: 20; max-width: min(420px, calc(100vw - 16px)); width: max-content; padding: 9px 12px 10px; background: var(--bg); border: 1px solid var(--ink-25); box-shadow: 0 6px 24px color-mix(in srgb, #000 14%, transparent); font-family: var(--sans); font-size: 13.5px; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; }
.tip.visible { opacity: 1; transform: none; }
.tip .tip-sub { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--ink-45); }

/* Closing row: Submit and the sign-up side by side, each headline, a sentence and an action */
.closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.closing-card { display: flex; flex-direction: column; margin-bottom: 0; }
.closing-card h2 { font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.closing-card > p { margin-top: 12px; max-width: 34em; font-size: 15.5px; line-height: 1.55; color: var(--ink-70); }
.closing-action { margin-top: auto; padding-top: 28px; }
.signup-form { display: flex; gap: 10px; width: 100%; max-width: 440px; }
.signup-form input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 15px; padding: 11px 14px; border: 1px solid var(--ink-25); background: var(--bg); color: var(--ink); transition: border-color .15s; }
.signup-form input::placeholder { color: var(--ink-45); }
.signup-form input:focus { border-color: var(--accent); }
.signup-form .button { cursor: pointer; }
.signup-form .button:disabled { opacity: 0.6; cursor: default; }
.button:hover .icon-arrow { transform: translateX(2px); }
.icon-arrow { transition: transform .15s; }
.signup-status { min-height: 1.5em; margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-45); }
.signup-status:empty { min-height: 0; margin-top: 0; }
.signup-status a { color: var(--ink-70); text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 3px; }
.signup-status a:hover { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer */
.site-footer { margin-top: 64px; border-top: 1px solid var(--ink-12); }
.site-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 36px 40px; font-size: 14px; color: var(--ink-45); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; }
.footer-links a + a::before { content: ""; display: inline-block; width: 2px; height: 2px; background: var(--ink-25); margin: 0 12px; vertical-align: middle; }
.footer-links a:hover { color: var(--accent); }

/* Home sections follow one rule: the title sits on the page above its content, boxes hold only
   objects (table, chart, diagrams, cards), and every section is the same distance from the next. */
.home-sections > * { margin-top: 0; margin-bottom: 0; }
.home-sections > * + * { margin-top: 96px; }
.home-sections > .highlights-section { padding: 0; }
.section > .section-head { margin-bottom: 20px; }
.section > .how-steps { margin-top: 0; }

@media (max-width: 900px) {
  .sources, .closing { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; padding-block: 80px 206px; }
  .task-grid, .highlights { grid-template-columns: 1fr 1fr; }
  .card { padding: 28px 24px; }
}
@media (max-width: 640px) {
  .home-sections > * + * { margin-top: 64px; }
  :root { --gutter: 16px; }
  .site-nav { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-end; gap: 22px; padding: 20px var(--gutter) 32px; background: var(--bg); border-bottom: 1px solid var(--ink-12); display: none; }
  .site-header[data-open="true"] .site-nav { display: flex; }
  .nav-toggle { display: inline-block; }
  .chart-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0; }
  .task-grid, .highlights { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; }
  .hero .tagline { font-size: 20px; }
  .field { gap: 4px; padding: 2px; }
  .signup-form { flex-direction: column; }
  .signup-form .button { justify-content: center; }
  td.bar, th.bar, .bar-axis { display: none; }
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
  .kv dd { margin-bottom: 12px; }
}