:root { --brand-50: #f4f0ff; --brand-100: #e8e0ff; --brand-200: #cdbdff; --brand-300: #b39cfa; --brand-400: #9373ee; --brand-500: #7451d6; --brand-600: #5a35b5; --brand-700: #4a1f72; --brand-800: #3a165b; --brand-900: #2b0f45; --brand-950: #1c0830; --brand-975: #241a3a; --sun-100: #fff3cc; --sun-300: #ffc83d; --sun-700: #8a4b00; --mint-100: #ddf9ec; --mint-300: #a6f0cf; --success-700: #0f6b52; --danger-700: #b3261e; --info-700: #1f5ea8; --warning-700: #8a4b00; --warning-300: #ffc83d; --neutral-0: #ffffff; --neutral-25: #fbfaff; --neutral-50: #f5f3fa; --neutral-100: #ece8f4; --neutral-200: #dcd6e8; --neutral-300: #c2bad3; --neutral-400: #a097b4; --neutral-500: #7b7191; --neutral-600: #5e5474; --neutral-700: #463d5a; --neutral-800: #302840; --neutral-850: #261f33; --neutral-900: #1c1626; --neutral-950: #140f1c; --neutral-1000: #0c0912; --bg-canvas: var(--brand-50); --bg-surface: var(--neutral-0); --bg-raised: var(--neutral-0); --bg-sunken: var(--neutral-50); --bg-hover: var(--brand-50); --bg-pressed: var(--brand-100); --bg-selected: var(--brand-100); --bg-inverse: var(--brand-900); --bg-disabled: var(--neutral-50); --bg-overlay: #2b0f4599; --bg-brand: var(--brand-200); --bg-highlight: var(--sun-300); --bg-fresh: var(--mint-300); --border-subtle: var(--neutral-100); --border-default: var(--neutral-200); --border-control: var(--brand-900); --border-strong: var(--brand-900); --border-selected: var(--brand-900); --text-primary: var(--brand-900); --text-secondary: var(--neutral-700); --text-muted: var(--neutral-600); --text-disabled: var(--neutral-400); --text-inverse: var(--brand-50); --text-link: var(--brand-600); --text-link-hover: var(--brand-900); --text-on-highlight: var(--brand-900); --accent: var(--brand-900); --accent-hover: var(--brand-700); --accent-pressed: var(--brand-800); --on-accent: var(--neutral-0); --accent-subtle: var(--brand-100); --accent-text: var(--brand-900); --scribble: var(--sun-300); --scribble-ink: var(--brand-900); --sticker-shadow: var(--brand-900); --focus-ring: var(--brand-600); --success-fg: var(--success-700); --success-bg: var(--mint-100); --success-border: #86c4ad; --success-solid: var(--success-700); --on-success-solid: #ffffff; --warning-fg: var(--warning-700); --warning-bg: var(--sun-100); --warning-border: #e3b366; --warning-solid: var(--sun-300); --on-warning-solid: var(--brand-900); --danger-fg: var(--danger-700); --danger-bg: #fbe8e6; --danger-border: #e3a19a; --danger-solid: var(--danger-700); --danger-solid-hover: #8f1d17; --on-danger-solid: #ffffff; --info-fg: var(--info-700); --info-bg: #e5eefa; --info-border: #9dbde6; --info-solid: var(--info-700); --waiting-fg: var(--neutral-700); --waiting-bg: var(--neutral-50); --waiting-border: var(--neutral-300); --chart-1: var(--brand-900); --chart-2: #a86a00; --chart-grid: var(--neutral-100); --print-ink: var(--brand-900); --print-paper: var(--neutral-0); --elevation-0: none; --elevation-1: 0 3px 0 #2b0f45; --elevation-2: 0 6px 0 #2b0f45; --elevation-3: 0 10px 0 #2b0f45; }
:root { --space-0: 0px; --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --target-min: 24px; --target-touch: 44px; --avatar-sm: 24px; --avatar-md: 32px; --avatar-lg: 48px; --sidenav-width: 256px; --sidenav-width-collapsed: 64px; --topbar-height: 56px; --panel-width: 480px; --modal-width-sm: 440px; --modal-width-md: 600px; --measure: 68ch; --content-max: 1200px; --control-height-sm-comfortable: 32px; --control-height-md-comfortable: 40px; --control-height-lg-comfortable: 48px; --control-height-sm-compact: 28px; --control-height-md-compact: 32px; --control-height-lg-compact: 40px; --row-height-comfortable: 52px; --row-height-compact: 36px; --card-padding-comfortable: 24px; --card-padding-compact: 16px; --radius-none: 0px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-xl: 32px; --radius-note: 6px 28px 6px 28px; --radius-pill: 999px; --radius-full: 9999px; --border-width-hairline: 1px; --border-width-thick: 2px; --border-width-heavy: 3px; --focus-ring-width: 3px; --focus-ring-offset: 3px; --duration-instant: 0ms; --duration-fast: 100ms; --duration-base: 160ms; --duration-slow: 240ms; --duration-toast: 6000ms; --duration-draw: 900ms; --duration-pop: 550ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-pop: cubic-bezier(0.2, 1, 0.3, 1); --ease-draw: cubic-bezier(0.6, 0, 0.2, 1); --bp-xs: 360px; --bp-sm: 600px; --bp-md: 900px; --bp-lg: 1200px; --bp-xl: 1600px; --grid-columns-xs: 4; --grid-columns-sm: 8; --grid-columns-lg: 12; --grid-gutter-xs: 16px; --grid-gutter-lg: 24px; --grid-margin-xs: 16px; --grid-margin-sm: 24px; --grid-margin-lg: 32px; --z-sticky: 10; --z-dropdown: 100; --z-overlay: 200; --z-modal: 210; --z-toast: 300; --z-tooltip: 400; --font-sans: "Gabarito", "Trebuchet MS", system-ui, sans-serif; --font-display: "Gabarito", "Trebuchet MS", system-ui, sans-serif; --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Menlo, monospace; }
/* The site's own layout token, built from the design system's. */
:root { --gutter: max(var(--grid-margin-lg), calc((100% - var(--content-max)) / 2)); }
@font-face { font-family: "Gabarito"; src: url("gabarito.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("atkinson-mono.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-variant-numeric: tabular-nums; scroll-behavior: auto; }
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; background: var(--bg-brand); color: var(--text-primary); font: 400 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }
h1 { font: 900 44px/48px var(--font-display); letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 var(--space-6); }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bg-surface); color: var(--text-primary); font-weight: 700; padding: var(--space-2) var(--space-4); border: var(--border-width-thick) solid var(--border-control); border-radius: var(--radius-pill); }
.skip:focus { left: 8px; z-index: 10; }
#content:focus { outline: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Top bar: a white pill on the lilac, outlined and lifted onto its drop, the horizontal lockup at 28px. */
.top { position: relative; z-index: var(--z-sticky); height: 64px; margin: var(--space-4) var(--gutter); padding: 0 var(--space-3) 0 var(--space-5); background: var(--bg-surface); border: var(--border-width-thick) solid var(--border-control); border-radius: var(--radius-pill); box-shadow: var(--elevation-2); display: flex; align-items: center; gap: var(--space-4); }
.top .brand { display: inline-flex; align-items: center; color: var(--text-primary); border-radius: var(--radius-sm); }
.top .lockup { display: block; height: 28px; width: auto; aspect-ratio: 119.04 / 32; }
.top nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.top nav a:not(.btn) { display: inline-flex; align-items: center; height: var(--control-height-md-comfortable); padding: 0 var(--space-4); border-radius: var(--radius-pill); color: var(--text-primary); font: 700 15px/20px var(--font-sans); text-decoration: none; white-space: nowrap; }
.top nav a:not(.btn):hover { background: var(--bg-hover); }
.top nav .btn { margin-left: var(--space-2); }
main { flex: 1; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; background: var(--bg-surface); overflow-x: clip; }
main > section:last-child { flex: 1; }
/* Buttons (components/Button): pills, one primary per view, the sunflower call to action for marketing. */
.btn { text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height-md-comfortable); min-width: var(--control-height-md-comfortable); padding: 0 var(--space-5); font: 700 15px/20px var(--font-sans); border-radius: var(--radius-pill); border: var(--border-width-thick) solid var(--border-control); background: var(--bg-surface); color: var(--text-primary); white-space: nowrap; }
.btn:hover { color: var(--text-primary); background: var(--bg-hover); box-shadow: var(--elevation-1); transform: translateY(-3px); }
.btn:active { box-shadow: var(--elevation-0); transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-control); }
.btn-sun { background: var(--bg-highlight); color: var(--text-on-highlight); }
.btn-sun:hover { background: var(--bg-highlight); }
.btn-lg { height: var(--control-height-lg-comfortable); padding: 0 var(--space-8); font-size: 17px; }
/* Hero: lilac, the display-xl headline with its double underline, the sunflower call to action, a tilted sticker cluster and the ring badge. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-12); align-items: center; padding: var(--space-16) var(--gutter) var(--space-24); background: var(--bg-brand); }
.hero h1 { font: 900 64px/64px var(--font-display); letter-spacing: -0.025em; margin: 0; max-width: 16ch; }
.hero .sub { font: 400 20px/31px var(--font-sans); color: var(--text-secondary); margin: var(--space-6) 0 0; max-width: 40ch; }
.hero .cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-8) 0 0; }
.hero-art { position: relative; height: 320px; }
.hero-art .s-96 { position: absolute; left: 36px; top: 36px; }
.hero-art .s-72 { position: absolute; left: 180px; top: 0; }
.hero-art .s-56 { position: absolute; left: 84px; top: 196px; }
.ring { position: absolute; right: 8px; bottom: 8px; width: 168px; height: 168px; filter: drop-shadow(0 6px 0 var(--sticker-shadow)); }
.ring-disc { fill: var(--bg-surface); stroke: var(--border-control); stroke-width: 3; }
.ring-text { font: 700 15px var(--font-mono); fill: var(--text-primary); }
.ring-star path { fill: var(--sun-300); stroke: var(--brand-900); stroke-width: 3; stroke-linejoin: round; }
/* Underline (components/Underline): the words stay text; the scribble sits under them, round-capped. */
.ul { position: relative; white-space: nowrap; display: inline-block; z-index: 0; }
.ul > .scribble { position: absolute; left: -2%; width: 104%; bottom: -0.42em; height: 0.56em; z-index: -1; overflow: visible; pointer-events: none; }
.ul path { fill: none; stroke: currentColor; stroke-width: 0.13em; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ul-ink > .scribble { color: var(--scribble-ink); }
.ul-sun > .scribble { color: var(--sun-300); }
/* Sticker (components/Sticker): a round disc, 3px plum outline, hard drop, one pictogram at 42%, tilted a few degrees. */
.sticker { --rot: 0deg; display: inline-grid; place-items: center; flex: none; border-radius: 50%; border: var(--border-width-heavy) solid var(--border-control); box-shadow: var(--elevation-2); color: var(--text-on-highlight); transform: rotate(var(--rot)); }
.sticker .ic { width: 42%; height: 42%; }
.s-56 { width: 56px; height: 56px; } .s-72 { width: 72px; height: 72px; } .s-96 { width: 96px; height: 96px; }
.s-lilac { background: var(--brand-200); } .s-sun { background: var(--sun-300); } .s-mint { background: var(--mint-300); } .s-white { background: var(--neutral-0); }
.tilt-l { --rot: -6deg; } .tilt-r { --rot: 5deg; }
/* Sections: full-bleed bands in the design system's order (white, pale lilac, plum, sunflower); the section label is a display-lg heading. */
.section { font: 800 20px/26px var(--font-sans); margin: var(--space-8) 0 var(--space-3); }
section.block { padding: var(--space-16) var(--gutter); scroll-margin-top: var(--space-4); }
section.block .section { font: 900 44px/48px var(--font-display); letter-spacing: -0.02em; text-transform: none; color: inherit; border: 0; padding: 0; margin: 0 0 var(--space-6); max-width: 20ch; }
.tone-pale { background: var(--bg-canvas); }
.tone-plum { background: var(--bg-inverse); color: var(--text-inverse); }
.tone-plum :focus-visible, footer :focus-visible { outline-color: var(--sun-300); }
.tone-sun { background: var(--bg-highlight); color: var(--text-on-highlight); }
.prose { max-width: var(--measure); }
.prose p { font: 400 17px/27px var(--font-sans); margin: 0 0 var(--space-4); }
section.block .prose p { font: 400 20px/31px var(--font-sans); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font: 800 24px/30px var(--font-display); letter-spacing: -0.01em; margin: var(--space-10) 0 var(--space-2); }
.prose ul { padding-left: var(--space-6); margin: 0 0 var(--space-4); } .prose li { margin: 0 0 var(--space-2); font-size: 17px; line-height: 27px; }
.caption { font: 500 13px/18px var(--font-sans); color: var(--text-secondary); margin: var(--space-3) 0 0; }
.dated { font: 400 14px/20px var(--font-mono); color: var(--text-muted); margin: 0 0 var(--space-6); }
/* How it works, drawn as the evidence timeline (components/EvidenceTimeline): the step in mono, a ringed dot, a 3px rail. */
.steps { list-style: none; max-width: 880px; margin: var(--space-10) 0 0; padding: 0; }
.tl-item { position: relative; display: grid; grid-template-columns: 96px 48px minmax(0, 1fr); gap: 0 var(--space-4); padding-bottom: var(--space-8); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: calc(96px + var(--space-4) + 24px - 1.5px); top: 52px; bottom: 4px; width: 3px; background: var(--border-strong); border-radius: 2px; }
.tl-item:last-child::before { display: none; }
.tl-when { font: 500 15px/20px var(--font-mono); color: var(--text-secondary); text-align: right; padding-top: 14px; }
.tl-dot { --rot: 0deg; position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: var(--border-width-heavy) solid var(--border-control); box-shadow: var(--elevation-1); background: var(--sun-300); color: var(--text-on-highlight); }
.tl-item:nth-child(2) .tl-dot { background: var(--mint-300); }
.tl-item:nth-child(3) .tl-dot { background: var(--brand-200); }
.tl-item:nth-child(4) .tl-dot { background: var(--neutral-0); }
.tl-dot .ic { width: var(--icon-lg); height: var(--icon-lg); }
.tl-body { padding-top: var(--space-2); min-width: 0; }
.steps h3 { font: 800 24px/30px var(--font-display); letter-spacing: -0.01em; margin: 0; }
.steps p { margin: var(--space-2) 0 0; font: 400 17px/27px var(--font-sans); color: var(--text-secondary); max-width: 60ch; }
/* The boundary: the app's two lists, as the evidence pack prints them, each on an outlined card under a sticker. */
.boundary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.bcard { background: var(--bg-surface); border: var(--border-width-thick) solid var(--border-control); border-radius: var(--radius-lg); padding: var(--space-8); }
.bcard .sticker { margin-bottom: var(--space-4); }
.bcard h3 { font: 800 24px/30px var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--space-4); }
.boundary li { font: 400 17px/27px var(--font-sans); }
.boundary .proves li, .boundary .notprove li { margin: 0 0 var(--space-3); }
/* Connecting: three notes (components/Note) in sunflower, mint and lilac, the lopsided corner, a sticker above each heading. */
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.notes > .note { border: var(--border-width-thick) solid var(--border-control); border-radius: var(--radius-note); padding: var(--space-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); color: var(--text-on-highlight); }
.n-sun { background: var(--sun-300); } .n-mint { background: var(--mint-300); } .n-lilac { background: var(--brand-200); }
.notes > .note h3 { margin: 0; font: 900 28px/32px var(--font-display); letter-spacing: -0.01em; }
.notes > .note p { margin: 0; font: 400 17px/26px var(--font-sans); flex: 1; }
/* The badge (components/Badge) in sentence case; the dot, filled or hollow, says available or in flight without colour. */
.st::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.st-filled::before { background: currentColor; }
.st-hollow::before { box-shadow: inset 0 0 0 1.5px currentColor; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); font: 700 13px/18px var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap; border: 1.5px solid var(--waiting-border); background: var(--waiting-bg); color: var(--waiting-fg); }
.chip.st-sent { border-color: var(--border-selected); background: var(--accent-subtle); color: var(--accent-text); }
/* Who it is for: three facts as plain cards (components/Card). */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-10) 0 0; padding: 0; }
.tile { background: var(--bg-surface); border: var(--border-width-thick) solid var(--border-control); border-radius: var(--radius-lg); padding: var(--space-6); }
.tile h3 { font: 800 20px/26px var(--font-sans); margin: 0; }
.tile p { font: 400 16px/24px var(--font-sans); color: var(--text-secondary); margin: var(--space-2) 0 0; }
/* Fields and the form (components/Field, TextInput, TextArea): label above, 2px plum outline, 12px radius, 40px controls. */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.field > label { font: 700 15px/20px var(--font-sans); color: var(--text-primary); }
input:not([type="checkbox"]):not([type="hidden"]), select, textarea { border: var(--border-width-thick) solid var(--border-control); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font: 400 16px/24px var(--font-sans); }
input:not([type="checkbox"]):not([type="hidden"]), select { height: var(--control-height-md-comfortable); padding: 0 var(--space-3); }
textarea { min-height: 120px; padding: var(--space-2) var(--space-3); resize: vertical; }
input:not([type="checkbox"]):not([type="hidden"]):hover, textarea:hover { box-shadow: var(--elevation-1); }
[aria-invalid="true"] { border-color: var(--danger-fg) !important; }
input::placeholder { color: var(--text-muted); opacity: 1; }
.hint { color: var(--text-muted); margin: 0; } .field .error { margin: 0; }
.error { color: var(--danger-fg); font: 700 15px/20px var(--font-sans); }
.error::before, .ok::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
.ok { color: var(--success-fg); }
.muted { color: var(--text-secondary); }
.form { display: flex; flex-direction: column; gap: var(--space-5); padding: 0; } .form .btn { align-self: flex-start; }
.form .problems { margin: 0; padding: var(--space-3) var(--space-4); border: var(--border-width-thick) solid var(--danger-fg); border-radius: var(--radius-md); background: var(--danger-bg); }
.form .problems p { margin: 0; }
.form .note { font: 500 13px/18px var(--font-sans); color: var(--text-muted); margin: 0; max-width: 56ch; }
.hp { position: absolute; left: -999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
/* The certificate: the app's rules unchanged (app/css.ts PROOF_CSS), so the sample is the certificate firms see. */
.proof { background: var(--bg-surface); color: var(--text-primary); border: var(--border-width-thick) solid var(--border-control); outline: var(--border-width-thick) solid var(--brand-200); outline-offset: 4px; padding: var(--space-6); margin: var(--space-3) 0 var(--space-6); break-inside: avoid; }
.proof .statement { font: 400 17px/24px var(--font-sans); margin: 0 0 var(--space-4); }
.proof dl { display: grid; grid-template-columns: 168px 1fr; margin: 0; }
.proof dt { font: 700 13px/18px var(--font-sans); color: var(--text-secondary); padding: var(--space-2) 0; border-top: 1px solid var(--border-default); }
.proof dd { margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--border-default); display: flex; align-items: flex-start; gap: var(--space-2); font: 400 14px/20px var(--font-sans); }
.proof dd > :first-child { min-width: 0; }
.hx { display: inline-grid; grid-template-columns: repeat(4, max-content); gap: 0 var(--space-3); font: 400 13px/18px var(--font-mono); }
/* The certificate's own stacking, so every page that carries it (app, site, view) breaks the hashes at one width: four groups beside the 168px label column need about 730px, which no page's content column has below --bp-md (900px; a media query cannot read the token). */
@media (max-width: 899px) { .hx { grid-template-columns: repeat(2, max-content); } }
.verified { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-default); font: 700 14px/20px var(--font-sans); }
.proves { padding-left: var(--space-6); } .proves li { margin: 0 0 var(--space-2); }
.notprove { list-style: none; padding: 0; } .notprove li { margin: 0 0 var(--space-2); padding-left: var(--space-5); position: relative; }
.notprove li::before { content: "-"; position: absolute; left: 0; color: var(--text-primary); font-weight: 700; }
.mono { font: 400 13px/18px var(--font-mono); }
/* A record, on the plum band: the outer rule turns sunflower, and the hashes step down a size to fit the column. */
.record { margin: var(--space-10) 0 0; }
.record .proof { margin: 0; }
.tone-plum .proof { outline-color: var(--sun-300); outline-offset: 6px; }
.record .hx { font-size: 12px; }
.tone-plum .caption { font: 800 24px/30px var(--font-display); letter-spacing: -0.01em; color: var(--text-inverse); margin: var(--space-8) 0 0; max-width: 22ch; }
/* The sign-up (register your interest, or request access: signup.ts), on the sunflower band: the invitation beside the form on a white marketing panel. */
.request-grid { display: grid; gap: var(--space-10); }
.request-intro .prose p { color: var(--text-on-highlight); }
.panel { background: var(--bg-surface); border: var(--border-width-thick) solid var(--border-control); border-radius: var(--radius-xl); box-shadow: var(--elevation-2); padding: var(--space-8); max-width: 560px; }
/* The plain pages: one reading column on white. */
.page { width: 100%; max-width: calc(var(--content-max) + 2 * var(--grid-margin-lg)); margin: 0 auto; padding: var(--space-16) var(--grid-margin-lg) var(--space-24); }
.prose.page { max-width: calc(var(--measure) + 2 * var(--grid-margin-lg)); }
/* Tables (components/Table): a 2px outline with a 24px outer radius, square cells, sentence case. */
.tbl { width: 100%; }
.tbl caption, .tbl th { text-align: left; }
.tbl td { vertical-align: top; }
.page .tbl { border-collapse: separate; border-spacing: 0; border: var(--border-width-thick) solid var(--border-control); border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-8) 0 var(--space-4); font: 400 16px/24px var(--font-sans); }
.page .tbl th { font: 700 14px/20px var(--font-sans); color: var(--text-primary); background: var(--bg-canvas); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width-thick) solid var(--border-control); }
.page .tbl td { padding: var(--space-4); border-bottom: 1px solid var(--border-default); }
.page .tbl tr:last-child td { border-bottom: 0; }
/* Foot: plum, the reversed lockup, the company line and links, and the franked signature lockup as the sign-off. */
footer { width: 100%; margin: 0; padding: var(--space-16) var(--gutter) var(--space-12); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8) var(--space-12); align-items: start; background: var(--bg-inverse); color: var(--text-inverse); font: 400 14px/20px var(--font-sans); }
footer .lockup { display: block; height: 28px; width: auto; aspect-ratio: 119.04 / 32; color: var(--neutral-0); margin-bottom: var(--space-4); }
footer p { margin: 0; max-width: 64ch; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); }
footer nav a { color: var(--neutral-0); font-weight: 700; }
footer nav a:hover { color: var(--neutral-0); }
.foot-sign { text-align: right; }
footer .franked { display: block; height: 56px; width: auto; aspect-ratio: 122 / 42; color: var(--neutral-0); margin-left: auto; }
footer .label { font: 400 13px/18px var(--font-mono); color: var(--brand-200); margin-top: var(--space-3); }
.page-foot { margin: var(--space-8) 0 0; }
/* Brand motion, once per view: the hero's underline draws in and its stickers pop; further down, scribbles draw and the timeline's rail runs as they scroll into view. */
@keyframes fk-draw { from { stroke-dashoffset: 1; } }
@keyframes fk-pop { from { transform: rotate(var(--rot)) scale(.4); opacity: 0; } }
@keyframes fk-rail { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
  .hero .ul path { animation: fk-draw var(--duration-draw) var(--ease-draw) .25s both; }
  .hero-art .sticker { animation: fk-pop var(--duration-pop) var(--ease-pop) both; }
  .hero-art .s-72 { animation-delay: .12s; } .hero-art .s-56 { animation-delay: .24s; }
  @supports (animation-timeline: view()) {
    section.block .ul path { animation: fk-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    .tl-item::before { transform-origin: top; animation: fk-rail linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
    .tl-dot { animation: fk-pop linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
  }
}
@media (min-width: 900px) {
  .record { display: grid; grid-template-columns: minmax(0, 760px) minmax(220px, 1fr); gap: var(--space-12); align-items: start; }
  .tone-plum .caption { margin-top: var(--space-2); }
  .request-grid { grid-template-columns: minmax(0, 1fr) 560px; gap: var(--space-12); align-items: start; }
}
@media (max-width: 899px) {
  .top nav a.nav-how, .top nav a.nav-proves { display: none; }
  .hero { grid-template-columns: 1fr; gap: var(--space-10); padding: var(--space-12) var(--gutter) var(--space-16); }
  .hero-art { height: 180px; max-width: 420px; }
  .hero-art .s-96 { left: 0; top: 24px; } .hero-art .s-72 { left: 112px; right: auto; top: 0; } .hero-art .s-56 { left: 196px; top: 96px; }
  .ring { width: 150px; height: 150px; right: 0; bottom: 0; }
  .boundary, .notes, .tiles { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  :root { --gutter: var(--grid-margin-xs); }
  .top { height: 56px; margin: var(--space-3) var(--grid-margin-xs); padding: 0 var(--space-2) 0 var(--space-4); }
  .top .lockup { height: 24px; }
  .top nav a.nav-request { display: none; }
  .hero h1 { font-size: 44px; line-height: 48px; letter-spacing: -0.02em; }
  .hero .sub, section.block .prose p { font-size: 17px; line-height: 27px; }
  .hero .cta .btn { flex: 1 1 100%; }
  .hero-art { height: 150px; }
  .hero-art .s-96 { width: 72px; height: 72px; } .hero-art .s-72 { left: 88px; width: 56px; height: 56px; } .hero-art .s-56 { left: 150px; top: 84px; }
  .ring { width: 128px; height: 128px; }
  section.block { padding: var(--space-12) var(--gutter); }
  section.block .section { font: 800 32px/38px var(--font-display); letter-spacing: -0.015em; }
  h1 { font: 800 32px/38px var(--font-display); letter-spacing: -0.015em; }
  .btn, input:not([type="checkbox"]):not([type="hidden"]), select { min-height: var(--target-touch); }
  .form .btn { align-self: stretch; }
  .panel { padding: var(--space-5); border-radius: var(--radius-lg); }
  .bcard, .notes > .note { padding: var(--space-6); }
  .tl-item { grid-template-columns: 48px minmax(0, 1fr); }
  .tl-item::before { left: calc(24px - 1.5px); }
  .tl-when { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 var(--space-1); font-size: 13px; line-height: 18px; }
  .tl-dot { grid-column: 1; grid-row: 1 / span 2; }
  .tl-body { grid-column: 2; grid-row: 2; padding-top: 0; }
  .hx { grid-template-columns: repeat(2, max-content); }
  .proof dl { grid-template-columns: 1fr; } .proof dt { border: 0; padding-bottom: 0; }
  .page { padding: var(--space-10) var(--grid-margin-xs) var(--space-16); }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl, .tbl caption, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl caption.visually-hidden { width: 1px; }
  .page .tbl tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); }
  .page .tbl tr:last-child { border-bottom: 0; }
  .page .tbl td { border: 0; padding: 2px 0; }
  .tbl td::before { content: attr(data-label); display: block; font: 700 13px/18px var(--font-sans); color: var(--text-muted); }
  footer { grid-template-columns: 1fr; padding: var(--space-12) var(--gutter); }
  .foot-sign { text-align: left; } footer .franked { margin-left: 0; }
}
@media print {
  .top nav, .skip, .cta, .request, .hero-art { display: none !important; }
  body, main, .hero, .tone-pale, .tone-sun, .tone-plum, footer { background: var(--print-paper); color: var(--print-ink); }
  footer .lockup, footer .franked, footer nav a, footer .label, .tone-plum .caption { color: var(--print-ink); }
  .proof { break-inside: avoid; }
  .st::before, .ok::before, .error::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}