:root {
  --fb-font-sans: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --fb-font-serif: 'Source Serif 4', Georgia, serif;
  --fb-touch: 48px;
  --fb-type-caption-size: 15px;
  --fb-type-caption-line: 22px;
  --fb-type-caption-weight: 400;
  --fb-type-caption-font: var(--fb-font-sans);
  --fb-type-body-size: 17px;
  --fb-type-body-line: 25px;
  --fb-type-body-weight: 400;
  --fb-type-body-font: var(--fb-font-sans);
  --fb-type-bodyStrong-size: 17px;
  --fb-type-bodyStrong-line: 25px;
  --fb-type-bodyStrong-weight: 600;
  --fb-type-bodyStrong-font: var(--fb-font-sans);
  --fb-type-bodyLarge-size: 20px;
  --fb-type-bodyLarge-line: 29px;
  --fb-type-bodyLarge-weight: 400;
  --fb-type-bodyLarge-font: var(--fb-font-sans);
  --fb-type-title-size: 22px;
  --fb-type-title-line: 30px;
  --fb-type-title-weight: 600;
  --fb-type-title-font: var(--fb-font-serif);
  --fb-type-heading-size: 28px;
  --fb-type-heading-line: 36px;
  --fb-type-heading-weight: 600;
  --fb-type-heading-font: var(--fb-font-serif);
  --fb-type-display-size: 34px;
  --fb-type-display-line: 42px;
  --fb-type-display-weight: 600;
  --fb-type-display-font: var(--fb-font-serif);
  --fb-space-xs: 4px;
  --fb-space-s: 8px;
  --fb-space-m: 12px;
  --fb-space-l: 16px;
  --fb-space-xl: 24px;
  --fb-space-xxl: 32px;
  --fb-space-xxxl: 48px;
  --fb-radius-small: 8px;
  --fb-radius-medium: 12px;
  --fb-radius-large: 16px;
  --fb-radius-coverSpine: 2px;
  --fb-radius-coverEdge: 12px;
}
:root {
  --fb-surface-page: #F4F1EA;
  --fb-surface-card: #FBF9F4;
  --fb-surface-sheet: #FBF9F4;
  --fb-text-primary: #1E2A33;
  --fb-text-secondary: #3B4651;
  --fb-text-onCover: #FFFFFF;
  --fb-text-onAction: #FFFFFF;
  --fb-text-onDanger: #FFFFFF;
  --fb-text-onComplete: #2F1F05;
  --fb-cover: #24435A;
  --fb-ribbon: #E3A857;
  --fb-action-primary: #24435A;
  --fb-action-secondary: #24435A;
  --fb-action-danger: #8A2424;
  --fb-status-complete-fill: #F3DDB5;
  --fb-status-complete-edge: #B87A20;
  --fb-status-started: #B87A20;
  --fb-status-empty: #6F757B;
  --fb-border-input: #7A8087;
  --fb-focusRing: #24435A;
  --fb-seal: #B87A20;
  --fb-seal-mark: #1A1103;
}
:root[data-theme="dark"] {
  --fb-surface-page: #141C22;
  --fb-surface-card: #1C262E;
  --fb-surface-sheet: #1C262E;
  --fb-text-primary: #EDE8DD;
  --fb-text-secondary: #C9C3B6;
  --fb-text-onCover: #0F1A22;
  --fb-text-onAction: #0F1A22;
  --fb-text-onDanger: #1A0505;
  --fb-text-onComplete: #F3DDB5;
  --fb-cover: #9DBBD1;
  --fb-ribbon: #7A4E0C;
  --fb-action-primary: #9DBBD1;
  --fb-action-secondary: #9DBBD1;
  --fb-action-danger: #F2A7A7;
  --fb-status-complete-fill: #3A2A0E;
  --fb-status-complete-edge: #E3A857;
  --fb-status-started: #E3A857;
  --fb-status-empty: #8E959B;
  --fb-border-input: #8E959B;
  --fb-focusRing: #E3A857;
  --fb-seal: #E3A857;
  --fb-seal-mark: #1A1103;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --fb-surface-page: #141C22;
  --fb-surface-card: #1C262E;
  --fb-surface-sheet: #1C262E;
  --fb-text-primary: #EDE8DD;
  --fb-text-secondary: #C9C3B6;
  --fb-text-onCover: #0F1A22;
  --fb-text-onAction: #0F1A22;
  --fb-text-onDanger: #1A0505;
  --fb-text-onComplete: #F3DDB5;
  --fb-cover: #9DBBD1;
  --fb-ribbon: #7A4E0C;
  --fb-action-primary: #9DBBD1;
  --fb-action-secondary: #9DBBD1;
  --fb-action-danger: #F2A7A7;
  --fb-status-complete-fill: #3A2A0E;
  --fb-status-complete-edge: #E3A857;
  --fb-status-started: #E3A857;
  --fb-status-empty: #8E959B;
  --fb-border-input: #8E959B;
  --fb-focusRing: #E3A857;
  --fb-seal: #E3A857;
  --fb-seal-mark: #1A1103;
}
}
.hero {
  --fb-cover: #24435A;
  --fb-text-onCover: #FFFFFF;
  --fb-ribbon: #E3A857;
}

@font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/source-serif-4-600.ttf') format('truetype'); }
* { box-sizing: border-box; }
body { margin: 0; color:var(--fb-text-primary);background:var(--fb-surface-page); font:var(--fb-type-bodyLarge-weight) var(--fb-type-bodyLarge-size)/var(--fb-type-bodyLarge-line) var(--fb-type-bodyLarge-font); }
main { max-width: 40rem; margin: 0 auto; padding: var(--fb-space-l) var(--fb-space-m); }
main.wide { max-width: 56rem; }
.measure { max-width: 40rem; margin: 0 auto; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fb-space-s) var(--fb-space-l); max-width: 56rem; margin: 0 auto; padding: var(--fb-space-m); }
.top nav { display: flex; flex-wrap: wrap; gap: var(--fb-space-s) var(--fb-space-l); }
.top a { display: inline-flex; align-items: center; min-height: 48px; }
.theme strong { display: inline-flex; align-items: center; min-height: 48px; }
footer a, .back { display: inline-flex; align-items: center; min-height: 48px; }
.brand { display: inline-flex; align-items: center; gap: var(--fb-space-s); font:var(--fb-type-title-weight) var(--fb-type-title-size)/var(--fb-type-title-line) var(--fb-type-title-font); color:var(--fb-text-primary) /* text.primary on surface.page */; text-decoration: none; }
.mark { position: relative; display: inline-block; flex: none; width: 12px; height: 16px; background: var(--fb-cover) /* cover on surface.page */; border-radius: 2px 1px 1px 2px; }
.mark::after { content: ''; position: absolute; top: 0; right: 3px; width: 2px; height: 10px; background: var(--fb-ribbon) /* ribbon on cover */; }
.hero { color:var(--fb-text-onCover);background:var(--fb-cover); border-left: var(--fb-space-m) solid var(--fb-ribbon) /* ribbon on cover */; border-radius: var(--fb-radius-coverSpine) var(--fb-radius-coverEdge) var(--fb-radius-coverEdge) var(--fb-radius-coverSpine); padding: var(--fb-space-xxl) var(--fb-space-xl); margin-bottom: var(--fb-space-xl); }
.hero h1 { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--fb-space-l); margin-bottom: var(--fb-space-xl); }
.card, .row { color:var(--fb-text-primary);background:var(--fb-surface-card); border: 2px solid var(--fb-border-input) /* border.input on surface.card */; border-radius: var(--fb-radius-large); padding: var(--fb-space-l) var(--fb-space-xl); }
.card h2 { font:var(--fb-type-title-weight) var(--fb-type-title-size)/var(--fb-type-title-line) var(--fb-type-title-font); margin: 0 0 var(--fb-space-s); }
.card p, .row p { margin: 0; }
.lead { font:var(--fb-type-title-weight) var(--fb-type-title-size)/var(--fb-type-title-line) var(--fb-type-title-font); }
.rows { list-style: none; margin: var(--fb-space-l) 0; padding: 0; display: grid; gap: var(--fb-space-m); }
.row h3 { font:var(--fb-type-title-weight) var(--fb-type-title-size)/var(--fb-type-title-line) var(--fb-type-title-font); margin: 0 0 var(--fb-space-s); }
.row .chips { display: flex; flex-wrap: wrap; gap: var(--fb-space-s); margin: 0 0 var(--fb-space-s); }
.chip { font:var(--fb-type-bodyStrong-weight) var(--fb-type-bodyStrong-size)/var(--fb-type-bodyStrong-line) var(--fb-type-bodyStrong-font); border: 2px solid var(--fb-border-input) /* border.input on surface.card */; border-radius: var(--fb-radius-large); padding: var(--fb-space-xs) var(--fb-space-m); }
.chip.can { color:var(--fb-text-onComplete);background:var(--fb-status-complete-fill); border-color: var(--fb-status-complete-edge) /* status.complete.edge on surface.card */; }
.measure > h2 { border-top: 3px solid var(--fb-status-complete-edge) /* status.complete.edge on surface.page */; padding-top: var(--fb-space-m); }
fieldset { border: 0; margin: var(--fb-space-l) 0 var(--fb-space-s); padding: 0; min-width: 0; }
legend { font:var(--fb-type-bodyStrong-weight) var(--fb-type-bodyStrong-size)/var(--fb-type-bodyStrong-line) var(--fb-type-bodyStrong-font); padding: 0; margin-bottom: var(--fb-space-xs); }
details { margin: var(--fb-space-s) 0; }
summary { display: block; min-height: 48px; padding: var(--fb-space-m) 0; font:var(--fb-type-bodyStrong-weight) var(--fb-type-bodyStrong-size)/var(--fb-type-bodyStrong-line) var(--fb-type-bodyStrong-font); cursor: pointer; }
.hp { display: none; }
.promise { margin: var(--fb-space-m) 0 0; }
footer { max-width: 56rem; margin: var(--fb-space-xl) auto 0; padding: var(--fb-space-l) var(--fb-space-m) var(--fb-space-xxl); }
h1 { font:var(--fb-type-display-weight) var(--fb-type-display-size)/var(--fb-type-display-line) var(--fb-type-display-font); margin: 0 0 var(--fb-space-m); }
h2 { font:var(--fb-type-heading-weight) var(--fb-type-heading-size)/var(--fb-type-heading-line) var(--fb-type-heading-font); margin: var(--fb-space-xl) 0 var(--fb-space-s); }
p { margin: 0 0 var(--fb-space-m); }
.secondary { color:var(--fb-text-secondary) /* text.secondary on surface.page */; font:var(--fb-type-body-weight) var(--fb-type-body-size)/var(--fb-type-body-line) var(--fb-type-body-font); }
a { color:var(--fb-action-secondary) /* action.secondary on surface.page */; }
label { display: block; font:var(--fb-type-bodyStrong-weight) var(--fb-type-bodyStrong-size)/var(--fb-type-bodyStrong-line) var(--fb-type-bodyStrong-font); margin-bottom: var(--fb-space-xs); }
input[type="email"] { width: 100%; min-height: 48px; padding: 0 var(--fb-space-m); color:var(--fb-text-primary);background:var(--fb-surface-card); font:var(--fb-type-bodyLarge-weight) var(--fb-type-bodyLarge-size)/var(--fb-type-bodyLarge-line) var(--fb-type-bodyLarge-font); border: 2px solid var(--fb-border-input) /* border.input on surface.card */; border-radius: var(--fb-radius-medium); }
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; margin: 0 var(--fb-space-s) 0 0; flex: none; }
.check { display: flex; align-items: center; min-height: 48px; margin: var(--fb-space-s) 0; }
.check label { display: inline; flex: 1; margin: 0; font:var(--fb-type-body-weight) var(--fb-type-body-size)/var(--fb-type-body-line) var(--fb-type-body-font); }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--fb-space-l); color:var(--fb-text-onAction);background:var(--fb-action-primary); font:var(--fb-type-bodyStrong-weight) var(--fb-type-bodyStrong-size)/var(--fb-type-bodyStrong-line) var(--fb-type-bodyStrong-font); border: 0; border-radius: var(--fb-radius-medium); text-decoration: none; cursor: pointer; }
button.submit { min-width: 16rem; }
.error { color:var(--fb-action-danger);background:var(--fb-surface-page); font:var(--fb-type-bodyStrong-weight) var(--fb-type-bodyStrong-size)/var(--fb-type-bodyStrong-line) var(--fb-type-bodyStrong-font); margin: 0 0 var(--fb-space-m); }
:focus-visible { outline: 3px solid var(--fb-focusRing) /* focusRing on surface.page */; outline-offset: 2px; }
@media (max-width: 40rem) {
  main { padding-top: var(--fb-space-s); }
  .top { padding: var(--fb-space-s) var(--fb-space-m); }
  .hero { padding: var(--fb-space-l); margin-bottom: var(--fb-space-m); }
  .hero h1 { font:var(--fb-type-heading-weight) var(--fb-type-heading-size)/var(--fb-type-heading-line) var(--fb-type-heading-font); }
  .cards { gap: var(--fb-space-s); margin-bottom: var(--fb-space-m); }
  .card { padding: var(--fb-space-m) var(--fb-space-l); }
  .card p { font:var(--fb-type-body-weight) var(--fb-type-body-size)/var(--fb-type-body-line) var(--fb-type-body-font); }
  button.submit { width: 100%; min-width: 0; }
}