/* Fundus homepage. Plain CSS, no build step. Shared pages keep site.css. */

:root {
  color-scheme: light dark;

  --bg: #fbfbfc;
  --surface: #f0f1f3;
  --surface-strong: #e6e7ea;
  --ink: #1b1c1f;
  --muted: #5c5f65;
  --accent: #086aee;
  --accent-strong: #0759c9;
  --on-accent: #ffffff;
  --stage: #086aee;
  --stage-ink: #ffffff;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* taste-skill-ignore: used only in the real <pre><code> block */

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --step-head: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);
  --step-display: clamp(3rem, 1.2rem + 5.6vw, 6.75rem);

  --margin: clamp(20px, 2.2vw, 32px);
  --page: 1200px;
  --outer: clamp(16px, 4vw, 48px);
  --inset: clamp(12px, 1.4vw, 20px);
  --panel-radius: 16px;
  --panel-pad: clamp(20px, 3.5vw, 48px);
  --gap: clamp(96px, 10vw, 160px);
  --radius: 10px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131415;
    --surface: #1d1e20;
    --surface-strong: #27282b;
    --ink: #f2f2f3;
    --muted: #a4a6ac;
    --accent: #2f80ff;
    --accent-strong: #5596ff;
    --stage: #0a5bd0;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, ul, pre { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.skip-link { position: fixed; left: var(--margin); top: -64px; z-index: 20; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: 12px; }

h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
p { text-wrap: pretty; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.4em;
  border-radius: 5px;
  background: var(--surface-strong);
  font: inherit;
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.link { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color var(--t-hover) ease; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button-light { background: #ffffff; color: #0a3e8a; }

@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
  .button:hover { background: var(--accent-strong); }
  .button-light:hover { background: #e8f0ff; }
}

/* The page is one centred column; the blue panels and the footer sit inside it. */

.hero, main > section, .board { width: min(100% - 2 * var(--outer), var(--page)); margin-left: auto; margin-right: auto; }

/* Pictures of the app are screenshots of the real thing, in light and dark. */

.evidence, .proof-panel { border-radius: var(--panel-radius); background: var(--surface); overflow: hidden; }

/* Header: a plain top bar, then one field of Fundus blue with the words and the app's window. */

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--step-body); text-decoration: none; }
.mark-icon { width: 28px; height: 28px; }
.topbar nav { display: flex; gap: clamp(16px, 2.4vw, 32px); }
.topbar nav a { padding: 6px 0; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .topbar nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; } }

.hero-panel {
  padding: 0 clamp(20px, 4vw, 56px);
  border-radius: var(--panel-radius);
  background: var(--stage);
  color: var(--stage-ink);
  overflow: hidden;
}
.hero-copy { max-width: 44rem; padding-top: clamp(40px, 6vw, 88px); }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines [data-line] { display: block; }
.hero-lead { max-width: 30em; margin-top: 20px; font-size: var(--step-body); }
.hero-copy .button { margin-top: 32px; }
.hero-panel .button:focus-visible { outline-color: #fff; }

/* The window rises from the panel's lower edge, which cuts off its rounded bottom. */
.hero-shot { width: min(100%, 1000px); margin-top: clamp(40px, 5vw, 64px); }
.hero-shot img { width: 100%; margin-bottom: -0.8%; }

/* What you can add: one statement with small pictures between the words. */

.intro { padding: var(--gap) 0 calc(var(--gap) * 0.8); }
.statement {
  max-width: 58rem;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: min(2.25rem, 1rem + 1.6vw);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
  text-align: center;
  text-wrap: balance;
}
.frame {
  display: inline-block;
  width: 1.05em; height: 0.82em;
  margin: 0 0.16em 0 0.04em;
  vertical-align: -0.08em;
  border-radius: 0.14em;
  overflow: hidden;
  background: var(--surface);
}
.frame-wide { width: 1.3em; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* Paste a link: the words, and the Add Source sheet as the app shows it. */

.paste {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}
.paste-text { grid-column: 1 / span 5; }
.paste h2 { font-size: var(--step-head); }
.paste-text p { max-width: 28rem; margin-top: 20px; }
.paste-note { color: var(--muted); }
.paste-shot { grid-column: 6 / span 7; display: grid; place-items: center; padding: var(--panel-pad); border-radius: var(--panel-radius); background: var(--surface); }
.paste-shot img { width: min(100%, 480px); }

/* The Inbox rule: a reading column of claims, each followed by its screenshot. */

.rule { padding: var(--gap) 0 0; }
.rule h2, .stage > p { width: min(100%, 36rem); margin-left: auto; margin-right: auto; }
.rule h2 { font-size: var(--step-head); margin-bottom: 40px; }
.stage + .stage { margin-top: clamp(72px, 8vw, 112px); }
.stage > p { line-height: 1.6; }
.stage p strong { font-weight: 650; }
.evidence { width: min(100%, 880px); margin: 28px auto 0; }
.evidence-window { display: grid; place-items: center; padding: var(--panel-pad); }
.evidence-window img { width: min(100%, 600px); }
/* Crops of the main window keep their cut edges against the panel's edges. */
.evidence-bleed-right { padding: var(--panel-pad) 0 0 var(--panel-pad); }
.evidence-bleed-right img { width: min(100%, 655px); margin-left: auto; }
.evidence-bleed-left { padding: var(--panel-pad) var(--panel-pad) 0 0; }

/* Your library: short proofs beside short text. */

.own { padding: var(--gap) 0 0; }
.own h2, .own .proof, .own-more { width: min(100%, 1080px); margin-left: auto; margin-right: auto; }
.own h2 { font-size: var(--step-head); margin-bottom: 64px; }
.proof { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.proof + .proof { margin-top: clamp(64px, 7vw, 96px); }
.proof-panel { display: grid; place-items: center; min-height: 220px; padding: var(--panel-pad); }
.proof-panel-code { place-items: stretch; padding: 0; background: #17181a; }
.proof-window { width: min(100%, 460px); }
.proof-player { width: min(100%, 515px); border-radius: 14px; }
.proof-text h3, .own-more h3 { font-size: var(--step-lead); }
.proof-text { max-width: 28rem; }
.proof-text p, .own-more p { margin-top: 12px; }
.own-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin-top: clamp(64px, 7vw, 96px); }
.own-more p { max-width: 28rem; }

pre {
  padding: 22px 24px;
  overflow-x: auto;
  color: #e9e9ec;
  font-family: var(--font-code);
  font-size: var(--step-small);
  line-height: 1.6;
  tab-size: 2;
}
pre:focus-visible { outline-offset: -3px; }
.code-out { color: #9fc3ff; }

/* Questions: the list on the left, the selected answer large on the right. */

.faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding: var(--gap) 0 0;
}
.faq-index { grid-column: 1 / span 5; }
.faq h2 { font-size: var(--step-head); margin-bottom: 28px; }
.faq-q {
  position: relative;
  display: block; width: 100%;
  padding: 9px 0 9px 24px;
  border: 0; background: none;
  color: var(--muted);
  font-size: var(--step-body);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-hover) ease;
}
.faq-q::before { content: ""; position: absolute; left: 2px; top: calc(9px + 0.78em - 4px); width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); transition: background-color var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
.faq-q.is-current { color: var(--ink); }
.faq-q.is-current::before { background: var(--accent); transform: scale(1.15); }
@media (hover: hover) and (pointer: fine) { .faq-q:hover { color: var(--ink); } }
.faq-a { display: none; }
.faq-more { margin-top: 32px; padding-left: 24px; color: var(--muted); }
.faq-pane { grid-column: 7 / span 6; position: sticky; top: 120px; align-self: start; padding-top: calc(var(--step-head) * 1.12 + 28px + 6px); }
.faq-pane p { max-width: 30ch; font-size: var(--step-lead); line-height: 1.32; transition: opacity 150ms ease; }
.faq-pane p.is-swapping { opacity: 0; }

/* The close: Fundus's first screen, on a field of Fundus blue. */

.close {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  min-height: 90svh;
  margin-top: var(--gap);
  padding: clamp(56px, 7vw, 96px) var(--margin) clamp(40px, 4vw, 56px);
  border-radius: var(--panel-radius);
  background: var(--stage);
  color: var(--stage-ink);
}
.close-text { grid-column: 1 / span 6; align-self: end; }
.close-heading { font-size: var(--step-display); font-weight: 650; letter-spacing: -0.04em; line-height: 0.95; }
.close-text p { max-width: 28em; margin-top: 24px; }
.close-text .button { margin-top: 28px; }
.close .button:focus-visible { outline-color: #fff; }
.close-shot { grid-column: 7 / span 6; align-self: start; justify-self: end; width: min(100%, 560px); }

/* Footer: the last two rows of the board. */

.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  margin-bottom: var(--inset);
}
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 220px; padding: 24px; border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.tile-statement { grid-column: span 4; }
.tile-statement p:first-child { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; }
.tile-legal { color: var(--muted); font-size: var(--step-small); }
.tile-nav { grid-column: span 3; justify-content: flex-start; gap: 4px; }
.tile-nav a { align-self: flex-start; padding: 3px 0; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .tile-nav a:hover { text-decoration: underline; text-underline-offset: 0.22em; } }
.tile-facts { grid-column: span 2; justify-content: flex-start; gap: 4px; }
.tile-help { grid-column: span 3; }
.tile-help .link { align-self: flex-start; }
.tile-word {
  grid-column: span 8;
  min-height: 320px;
  display: grid; place-items: center; place-content: center;
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
}
.tile-word span { font-family: var(--font-display); font-size: var(--step-display); font-weight: 650; letter-spacing: -0.045em; line-height: 1; padding-bottom: 0.08em; transition: transform 600ms var(--ease-expo); }
@media (hover: hover) and (pointer: fine) { .tile-word:hover span { transform: translateY(-6px); } }
.tile-go { grid-column: span 4; min-height: 320px; background: var(--accent); color: var(--on-accent); }
.tile-go span { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.tile-go svg { align-self: flex-end; width: 56px; height: 56px; transition: transform var(--t-ui) var(--ease-out); }
.tile-go svg use { stroke-width: 2.4; }
.tile-go:focus-visible, .tile-word:focus-visible { outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .tile-go:hover svg { transform: translate(4px, -4px); } }
.tile-go:active, .tile-word:active { transform: scale(0.995); }

@media (prefers-color-scheme: dark) {
  .proof-panel-code { background: var(--surface); }
  .tile-word { background: var(--surface-strong); color: var(--ink); }
}

/* Motion: the headline rises once on load. Nothing appears on scroll. */

@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-expo) forwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(12px); animation: load-rise 600ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .hero .hero-shot { opacity: 0; transform: translateY(18px); animation: load-rise 900ms var(--ease-expo) 220ms forwards; }
}
@keyframes line-up { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Tablet */

@media (max-width: 1080px) {
  .paste-text { grid-column: 1 / span 12; }
  .paste-shot { grid-column: 1 / span 12; }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .proof-text { max-width: 36rem; }
  .faq-index { grid-column: 1 / span 6; }
  .faq-pane { grid-column: 7 / span 6; }
  .close-text { grid-column: 1 / span 12; }
  .close-shot { grid-column: 1 / span 12; justify-self: start; }
  .tile-statement { grid-column: span 6; }
  .tile-nav { grid-column: span 6; }
  .tile-facts { grid-column: span 6; }
  .tile-help { grid-column: span 6; }
  .tile-word { grid-column: span 12; }
  .tile-go { grid-column: span 12; min-height: 200px; }
}

/* Phone */

@media (max-width: 700px) {
  .topbar { height: 64px; }
  .topbar nav a:not(:first-child) { display: none; }
  .hero-panel { padding: 0 16px; }
  .hero h1 { font-size: 2.125rem; }
  .hero-copy .button { width: 100%; }
  /* The phone shows the Inbox list alone, its top part. */
  .hero-shot img { height: 420px; margin-bottom: 0; object-fit: cover; object-position: top; border-radius: 12px 12px 0 0; }

  .intro { padding-top: 96px; padding-bottom: 96px; }
  .statement { font-size: var(--step-lead); line-height: 1.34; text-align: left; }
  .frame-phone-hide { display: none; }

  .paste { gap: 28px; }
  .paste-shot { padding: 16px; }

  .rule h2 { margin-bottom: 32px; }
  .stage + .stage { margin-top: 56px; }
  .evidence { margin-top: 20px; }
  .evidence-window { padding: 16px; }
  .evidence-bleed-right { padding: 16px 0 0 16px; }
  .evidence-bleed-left { padding: 16px 16px 0 0; }

  .proof + .proof { margin-top: 64px; }
  .proof-panel { min-height: 0; padding: 20px 16px; }
  pre { padding: 18px; }
  .own-more { grid-template-columns: minmax(0, 1fr); margin-top: 64px; }

  .faq { display: block; }
  .faq-q, .faq-more { padding-left: 22px; }
  .faq-pane { display: none; }
  .faq-a { padding: 0 0 12px 22px; color: var(--ink); }
  .faq-q.is-current + .faq-a { display: block; }

  .close { display: flex; flex-direction: column; gap: 40px; min-height: 84svh; padding-top: 72px; }
  .close-text { align-self: stretch; }
  .close-text .button { width: 100%; min-height: 52px; }
  .close-shot { width: 100%; }

  .board { gap: 6px; }
  .tile { min-height: 0; padding: 20px; }
  .tile-word { order: -2; grid-column: span 12; min-height: 160px; }
  .tile-go { order: -1; grid-column: span 12; min-height: 160px; }
  .tile-nav, .tile-help { grid-column: span 6; }
  .tile-facts, .tile-statement { grid-column: span 6; }
  .tile-statement p:first-child { font-size: var(--step-body); }
}

@media (max-width: 420px) {
  .tile-nav, .tile-help, .tile-facts, .tile-statement { grid-column: span 12; }
}