/* zerofinger.com — "Ruled Sheet".
   One sheet drawn on a visible grid: two rails at the edge of the 1240 column,
   full-width rules between sections, cells that carry their own padding.
   No boxes, tints or shadows; the only color is the action and the product.
   Palette = the app's graphite slate + blue-500 → cyan-400; theme-toggle.js owns .dark. */
@import url("./site-tokens.css?v=0.1.69");

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--fg-1); font: 400 16px/1.55 Geist, system-ui, -apple-system, sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a, button, summary, input { -webkit-tap-highlight-color: transparent; transition: var(--state); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--selection); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.theme-switching, .theme-switching * { transition: none !important; }

/* The sheet: rails at the column edge, rules across the viewport. */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; border-inline: 1px solid var(--rule); }
main > section { border-bottom: 1px solid var(--rule); }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 50; display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--fg-1); font-size: 14px; font-weight: 500; transition: none; }
.skip-link:focus { top: 8px; }

/* Type ramp: 96 / 72 / 40 / 20 / 18 / 16 / 14 / 13 */
.hero h1 { font-size: clamp(48px, 6.6vw, 96px); line-height: .94; letter-spacing: var(--track-display); text-wrap: balance; }
.page-head h1 { font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: var(--track-h1); text-wrap: balance; }
h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; letter-spacing: var(--track-h2); }
h3 { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: var(--track-h3); text-wrap: balance; }
.how-card p, .principles-list p, .example-request, .plate-list > p, .application-questions details p { text-wrap: pretty; }

/* Hover lives with a fine pointer; a state arrives at once and leaves over 150ms. */
@media (hover: hover) and (pointer: fine) {
  .header-nav a:hover, .header-signin:hover, .header-cta:hover, .landing-theme-trigger:hover,
  .sample-switch button:hover, .application-questions summary:hover { background: var(--hover); color: var(--fg-1); transition-duration: 0ms; }
  .sample-prompts button:hover, .sample-next button:hover, .landing-theme-option:hover { background: var(--hover); color: var(--fg-1); transition-duration: 0ms; }
  .footer-row a:hover, .signup-note a:hover, .application-questions a:hover, .text-button:hover { color: var(--fg-1); transition-duration: 0ms; }
  .primary-action:hover { filter: brightness(.95); transition-duration: 0ms; }
  input:hover:not(:focus) { border-color: var(--control-hover); transition-duration: 0ms; }
  .preference-choice:hover > span { border-color: var(--control-hover); transition-duration: 0ms; }
}
.header-nav a:active, .header-signin:active, .header-cta:active, .landing-theme-trigger:active,
.sample-switch button:active, .sample-prompts button:active, .sample-next button:active, .application-questions summary:active, .landing-theme-option:active { background: var(--active); transition-duration: 0ms; }

/* Primary: the app's own primary button, sized up. */
.primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--action); color: #ffffff; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; white-space: nowrap; box-shadow: var(--action-shadow); transition: filter 150ms var(--ease-state); }
.primary-action:active { filter: brightness(.90); transition-duration: 0ms; }
.primary-action:disabled { cursor: progress; }
.text-button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--fg-3); font-size: 14px; font-weight: 500; }

/* Header: a ruled strip of cells. */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--rule); background: var(--bg); }
.header-row { display: flex; align-items: stretch; height: var(--bar); }
.header-brand { display: flex; align-items: center; padding: 0 24px 0 var(--cell); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-1); font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -.02em; white-space: nowrap; }
.brand img { display: block; flex: none; }
.header-nav { display: flex; margin-right: auto; border-inline: 1px solid var(--rule); }
.header-nav a, .header-signin, .header-cta { display: flex; align-items: center; padding: 0 24px; color: var(--fg-2); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.header-nav a + a { border-left: 1px solid var(--rule); }
.header-nav a[aria-current="page"] { color: var(--fg-1); box-shadow: inset 0 -2px 0 var(--fg-1); }
/* -1px: when the row is full, the nav's closing rule and Log in's rule draw as one line. */
.header-actions { display: flex; align-items: stretch; margin-left: -1px; }
.header-signin, .header-cta, .landing-theme-menu { border-left: 1px solid var(--rule); }
.header-cta { color: var(--fg-1); font-weight: 600; }
:where(.header-row) :focus-visible { outline-offset: -4px; }

/* Theme menu (Navbar ThemeMenu landing): the last cell, and the one floating layer. */
.landing-theme-menu { position: relative; }
.landing-theme-trigger { display: flex; align-items: center; justify-content: center; width: 64px; height: var(--bar); color: var(--fg-2); list-style: none; cursor: pointer; }
.landing-theme-trigger > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.landing-theme-trigger::-webkit-details-marker { display: none; }
.landing-theme-menu[open] .landing-theme-trigger { background: var(--active); color: var(--fg-1); }
.landing-theme-panel { position: absolute; top: calc(100% + 8px); right: 8px; z-index: 40; display: grid; width: 168px; padding: 4px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); box-shadow: var(--menu-shadow); transform-origin: top right; }
.landing-theme-menu[open] .landing-theme-panel { animation: menu-in 200ms var(--ease-enter); }
@keyframes menu-in { from { opacity: 0; scale: .98; } }
.landing-theme-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); font-size: 14px; font-weight: 500; text-align: left; }
@media (max-width: 759px), (pointer: coarse) { .landing-theme-option { min-height: 44px; } }
.landing-theme-option-icon { display: flex; color: var(--fg-4); }
.landing-theme-option[data-theme-active="true"] { color: var(--fg-1); }
.landing-theme-option[data-theme-active="true"]::after { content: ""; width: 10px; height: 6px; margin: -4px 2px 0 auto; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; }

/* Hero: two ruled cells. */
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hero-copy { grid-column: 1 / 9; padding: 64px var(--cell) 48px; }
/* 45ch holds one sentence per line at 18px. */
.hero-lead { max-width: 45ch; margin-top: 32px; color: var(--fg-2); font-size: 18px; line-height: 28px; text-wrap: balance; }
/* The form starts on the headline's top line; the cell is drawn by its rule, never a fill. */
.hero-card { grid-column: 9 / 13; padding: 64px 32px 48px; border-left: 1px solid var(--rule); }
@media (min-width: 900px) { .hero-card .quick-waitlist { margin-top: calc(clamp(48px, 6.6vw, 96px) * .115); } }

/* Waitlist (QuickWaitlist markup, early-access.js behavior) */
.quick-waitlist { min-width: 0; scroll-margin-top: 80px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.text-label { display: block; margin-bottom: 8px; color: var(--fg-3); font-size: 13px; font-weight: 500; line-height: 20px; }
.quick-waitlist > form > .text-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(input:not([type=checkbox]):not([type=radio])) { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--control); border-radius: 8px; outline: none; background: var(--field); color: var(--fg-1); font-size: 16px; }
input::placeholder { color: var(--fg-4); opacity: 1; }
/* A transparent outline keeps a ring in forced colors, where the halo is dropped. */
input:focus, input:focus:hover { border-color: var(--field-focus); box-shadow: var(--field-halo); outline: 2px solid transparent; outline-offset: 2px; transition-duration: 0ms; }
input[aria-invalid="true"], input[aria-invalid="true"]:hover { border-color: var(--error); }
input[aria-invalid="true"]:focus { box-shadow: var(--error-halo); }
.signup-row { display: flex; flex-direction: column; gap: 8px; }
.signup-row > .primary-action { width: 100%; }
.signup-note { margin-top: 12px; color: var(--fg-4); font-size: 13px; line-height: 20px; }
.signup-note a { margin-left: 4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.form-error { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--error-soft); color: var(--error); font-size: 13px; line-height: 20px; }
.signup-confirmation { display: flex; gap: 12px; align-items: flex-start; }
/* The mark is an inline SVG stroke in currentColor, never a typed glyph. */
.completion-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9999px; background: var(--ok-soft); color: var(--ok); }
.signup-confirmation h3 { padding-top: 4px; outline: none; scroll-margin-top: 96px; }
.signup-confirmation p { margin-top: 4px; color: var(--fg-3); font-size: 14px; line-height: 20px; }
.preferences-status { margin-top: 12px; color: var(--fg-4); font-size: 13px; line-height: 20px; }
.preferences-toggle { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--fg-1); }
.preferences-toggle > span, .preferences-heading > span { color: var(--fg-4); font-size: 13px; font-weight: 500; }
.quick-waitlist [data-preferences] { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--rule); }
.preferences-heading { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.preferences-heading h4 { font-size: 16px; font-weight: 500; }
.preferences-intro { margin: 4px 0 24px; color: var(--fg-3); font-size: 13px; line-height: 20px; }
.preference-group { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.preference-group legend { margin-bottom: 8px; padding: 0; color: var(--fg-1); font-size: 13px; font-weight: 500; }
.preference-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preference-choice { position: relative; min-width: 0; cursor: pointer; }
.preference-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); }
.preference-choice > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control); border-radius: 8px; background: var(--field); color: var(--fg-2); font-size: 14px; font-weight: 500; line-height: 20px; transition: var(--state); }
.preference-choice input:checked + span { border-color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--fg-1); color: var(--fg-1); }
.preference-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-check { display: none; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }

/* Live sample: the real app, flush in a ruled cell. */
.sample { border-bottom: 0; }
/* The bar keeps the hero's columns: the switch sits under the form cell, so that cell's rule runs on to the window. */
.sample-bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 56px; border-bottom: 1px solid var(--rule); }
.sample-meta { grid-column: 1 / 9; display: flex; align-items: center; min-width: 0; padding: 0 24px 0 var(--cell); overflow: hidden; color: var(--fg-4); font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; }
/* A click on something the sample leaves out is named here for a few seconds, in the same type. */
.sample-meta.is-note { color: var(--fg-1); }
.sample-switch { grid-column: 9 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sample-switch button { display: flex; align-items: center; justify-content: center; padding: 0 24px; border: 0; border-left: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--fg-4); font-size: 14px; font-weight: 500; line-height: 20px; transition-property: background-color, color; }
.sample-switch button[aria-pressed="true"] { color: var(--fg-1); box-shadow: inset 0 -2px 0 var(--fg-1); }
.sample-switch :focus-visible { outline-offset: -4px; }
.app-window { border-bottom: 1px solid var(--rule); background: var(--bg); }
.app-window-frame { display: block; width: 100%; height: clamp(540px, calc(100svh - 178px), 738px); border: 0; background: transparent; color-scheme: normal; }
/* 12 + 32px chips + 12, and its rule; chips wrap under their own first line, with Try beside it. */
.sample-try { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 12px var(--cell); border-bottom: 1px solid var(--rule); }
.sample-try > span { flex: none; color: var(--fg-4); font-size: 13px; font-weight: 500; line-height: 32px; }
.sample-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--cell); border-bottom: 1px solid var(--rule); }
.sample-next p { margin: 0; color: var(--fg-3); font-size: 13px; line-height: 1.5; }
.sample-next button { flex: none; }
.sample-prompts { display: flex; flex: 1 1 0; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sample-prompts button, .sample-next button { min-height: 32px; padding: 0 12px; border: 1px solid var(--chip); border-radius: 8px; background: transparent; color: var(--fg-1); font-size: 14px; font-weight: 500; line-height: 20px; }

/* Footer: one ruled strip. */
.footer-row { display: flex; align-items: stretch; min-height: 64px; color: var(--fg-4); font-size: 13px; font-weight: 500; line-height: 20px; }
.footer-row > span { display: flex; align-items: center; margin-right: auto; padding: 0 var(--cell); }
.footer-row > nav { display: flex; }
.footer-row a { display: flex; align-items: center; padding: 0 24px; border-left: 1px solid var(--rule); }
.footer-row :focus-visible { outline-offset: -2px; }

/* Subpages: one ruled table template. */
.page-head > .wrap { padding: 96px var(--cell) 64px; }
.page-head p { max-width: 45ch; margin-top: 24px; text-wrap: balance; color: var(--fg-2); font-size: 18px; line-height: 28px; }

.how-grid, .example-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.example-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.how-card, .example-card { min-width: 0; }
.how-card + .how-card, .example-card + .example-card { border-left: 1px solid var(--rule); }
.how-card { display: flex; flex-direction: column; min-height: 280px; padding: 32px var(--cell) 48px; }
@media (min-width: 1100px) {
  .how-grid { grid-template-rows: repeat(3, auto); }
  .how-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-height: 0; }
}
.how-num { color: var(--fg-4); font-size: 13px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; }
.how-card h3 { margin-top: 16px; }
.how-card p { margin-top: 12px; color: var(--fg-3); font-size: 16px; line-height: 1.55; }

.principles-grid, .plate-grid, .request-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.principles-grid > h2, .plate-grid > h2 { grid-column: 1 / 7; padding: 32px var(--cell) 48px; }
.principles-list, .plate-list { grid-column: 7 / 13; border-left: 1px solid var(--rule); }
.principles-list > div { display: grid; gap: 8px; padding: 32px var(--cell); }
/* The heading's first line sits level with the first 56px row. */
@media (min-width: 900px) { .plate-grid > h2 { padding-top: 16px; } }
.principles-list > div + div { border-top: 1px solid var(--rule); }
.principles-list p { color: var(--fg-3); font-size: 16px; line-height: 26px; }

.example-card { display: flex; flex-direction: column; padding: 32px var(--cell); }
.example-role { color: var(--fg-4); font-size: 13px; font-weight: 500; line-height: 20px; }
/* Four across, titles hold two lines so every request starts on one line of the table. */
.example-card h3 { min-height: 52px; margin-top: 16px; }
.example-request { margin-top: 12px; color: var(--fg-2); font-size: 16px; line-height: 1.55; }
.example-pattern { margin-top: auto; padding-top: 24px; color: var(--fg-4); font-size: 13px; font-weight: 500; line-height: 20px; }
.fine-print { display: flex; align-items: center; min-height: 48px; padding: 12px var(--cell); border-top: 1px solid var(--rule); color: var(--fg-4); font-size: 13px; line-height: 20px; }

.plate-list li, .plate-list > p { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding: 0 var(--cell); }
.plate-list li + li, .plate-list > p { border-top: 1px solid var(--rule); }
.plate-list li > span:first-child { color: var(--fg-1); font-size: 16px; line-height: 24px; }
.plate-result { flex: none; color: var(--fg-4); font-size: 14px; font-weight: 500; line-height: 20px; }
.plate-list > p { color: var(--fg-3); font-size: 16px; line-height: 24px; }

.page-next > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; padding: 0 var(--cell); }
.page-next p { color: var(--fg-4); font-size: 13px; font-weight: 500; line-height: 20px; text-align: right; }

.application-questions details + details { border-top: 1px solid var(--rule); }
.application-questions summary { position: relative; padding: 24px 96px 24px var(--cell); font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: var(--track-h3); list-style: none; cursor: pointer; }
.application-questions summary::-webkit-details-marker { display: none; }
.application-questions summary::after { content: ""; position: absolute; top: 50%; right: var(--cell); width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--fg-4); border-bottom: 1.5px solid var(--fg-4); rotate: -45deg; transition: rotate 150ms var(--ease-state); }
.application-questions details[open] summary::after { rotate: 45deg; }
.application-questions summary:focus-visible { outline-offset: -2px; }
.application-questions details p { max-width: calc(62ch + var(--cell) * 2); padding: 0 var(--cell) 24px; color: var(--fg-3); font-size: 16px; line-height: 1.55; }
.application-questions a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.request-intro { grid-column: 1 / 7; display: flex; flex-direction: column; }
.request-intro h2 { padding: 64px var(--cell) 48px; }
.cohort-fit { margin-top: auto; }
.cohort-fit div { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding: 0 var(--cell); border-top: 1px solid var(--rule); }
.cohort-fit strong { color: var(--fg-1); font-size: 16px; font-weight: 500; line-height: 24px; }
.cohort-fit span { color: var(--fg-4); font-size: 13px; font-weight: 500; line-height: 20px; text-align: right; }
.request-card { grid-column: 7 / 13; padding: 64px var(--cell) 48px; border-left: 1px solid var(--rule); container-type: inline-size; }
.request-card .step-kicker { margin-bottom: 16px; color: var(--fg-1); font-size: 13px; font-weight: 600; line-height: 20px; }
.request-card .signup-row { flex-direction: row; }
.request-card .signup-row > .primary-action { width: auto; flex: none; }
@container (max-width: 419px) { .request-card .signup-row { flex-direction: column; } .request-card .signup-row > .primary-action { width: 100%; } }

/* The header's and footer's right-hand cells take the form cell's columns, split where Mail | Agent splits. */
@media (min-width: 960px) {
  .header-actions { flex: 0 0 calc(100% / 3); display: grid; grid-template-columns: 50% minmax(0, 1fr) auto; margin-left: 0; }
  .header-signin, .header-cta { justify-content: center; padding-inline: 8px; }
}
@media (min-width: 900px) {
  .footer-row > nav { flex: 0 0 calc(100% / 3); display: grid; grid-template-columns: 1fr 1fr; }
  .footer-row a { justify-content: center; padding-inline: 8px; }
}
/* 900–1099: the headline takes 7 columns, the form 5; cells pad 16 in the header. */
@media (max-width: 1099px) {
  :root { --cell: 32px; }
  .header-nav a, .header-signin, .header-cta { padding: 0 16px; }
  .hero-copy { grid-column: 1 / 8; }
  .hero-card { grid-column: 8 / 13; }
  .sample-meta { grid-column: 1 / 8; }
  .sample-switch { grid-column: 8 / 13; }
  .footer-row > nav { flex-basis: calc(100% * 5 / 12); }
  .how-card { min-height: 0; }
  .example-card h3 { min-height: 0; }
  .how-grid, .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-card:nth-child(odd), .example-card:nth-child(odd) { border-left: 0; }
  .how-card:nth-child(n+3), .example-card:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (min-width: 960px) and (max-width: 1099px) { .header-actions { flex-basis: calc(100% * 5 / 12); } }
/* Under 900: 24 gutters and cell padding; every two-cell row stacks with a rule between. */
@media (max-width: 899px) {
  :root { --gutter: 24px; --cell: 24px; }
  .hero-copy, .hero-card, .principles-grid > h2, .plate-grid > h2, .principles-list, .plate-list, .request-intro, .request-card { grid-column: 1 / -1; }
  .hero-card, .principles-list, .plate-list, .request-card { border-left: 0; border-top: 1px solid var(--rule); }
  .sample-bar { display: flex; }
  .sample-meta { flex: 1; }
  .sample-switch { display: flex; }
  .header-nav a, .header-signin, .header-cta { padding: 0 12px; }
  .header-brand { padding-right: 16px; }
  .landing-theme-trigger { width: 56px; }
  .hero-copy { padding: 48px var(--cell) 32px; }
  .hero-card { padding: 24px var(--cell); }
  .page-head > .wrap { padding: 64px var(--cell) 48px; }
  .request-intro h2 { padding: 48px var(--cell) 32px; }
  .request-card { padding: 32px var(--cell); }
}
/* Under 760: the header becomes two rows — brand and actions, then the three pages — and stops sticking. */
@media (max-width: 759px) {
  :root { --bar: 56px; }
  .site-header { position: static; }
  html { scroll-padding-top: 0; }
  .header-row { flex-wrap: wrap; height: auto; }
  .header-brand { height: var(--bar); padding: 0 16px 0 var(--cell); }
  .header-actions { margin-left: auto; }
  .header-nav { order: 3; flex-basis: 100%; height: 45px; margin-right: 0; border-inline: 0; border-top: 1px solid var(--rule); }
  .header-nav a { flex: 1; justify-content: center; padding: 0 8px; }
  .quick-waitlist { scroll-margin-top: 16px; }
}
/* Under 600: the rails go; cells run edge to edge and only the horizontal rules remain. */
@media (max-width: 599px) {
  :root { --gutter: 0px; --cell: 16px; }
  .wrap { width: 100%; border-inline: 0; }
  .header-brand { padding: 0 12px 0 var(--cell); }
  .landing-theme-trigger { width: 48px; }
  .hero-copy { padding: 24px var(--cell); }
  .hero h1 { font-size: 48px; }
  .hero-lead, .page-head p { margin-top: 24px; font-size: 16px; line-height: 24px; }
  /* No rails to carry an empty row: the window's own rule ends the section. */
  .sample-bar { flex-direction: column; height: auto; }
  .sample-meta { min-height: 44px; padding: 0 var(--cell); border-bottom: 1px solid var(--rule); }
  .sample-switch button { flex: 1; height: 44px; }
  .sample-switch button:first-child { border-left: 0; }
  .app-window-frame { height: clamp(540px, calc(100svh - 160px), 640px); }
  .sample-try > span { line-height: 44px; }
  .sample-prompts button, .sample-next button { min-height: 44px; }
  .footer-row a { padding: 0 var(--cell); }
  .page-head > .wrap { padding: 48px var(--cell) 32px; }
  .how-grid, .example-grid { grid-template-columns: minmax(0, 1fr); }
  .how-card, .example-card { border-left: 0 !important; padding: 24px var(--cell) 32px; min-height: 0; }
  .how-card + .how-card, .example-card + .example-card { border-top: 1px solid var(--rule); }
  .how-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
  .how-num { grid-row: 1; line-height: 26px; }
  .how-card h3 { grid-column: 2; margin-top: 0; }
  .how-card p { grid-column: 2; }
  .example-card h3 { margin-top: 12px; }
  .principles-grid > h2, .plate-grid > h2 { padding: 32px var(--cell); }
  .principles-list > div { padding: 24px var(--cell); }
  .plate-list li { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 12px var(--cell); }
  .plate-list > p { padding: 16px var(--cell); }
  .page-next > .wrap { flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; padding: 24px var(--cell); }
  .page-next p { text-align: left; }
  .application-questions summary { padding: 24px 56px 24px var(--cell); font-size: 18px; line-height: 24px; text-wrap: balance; }
  .request-card { padding: 24px var(--cell); }
  .cohort-fit div { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 12px var(--cell); }
  .cohort-fit span { text-align: left; }
}

/* Under 375 (360 Android): the first header row still holds brand, Log in, Join waitlist and the theme. */
@media (max-width: 374px) {
  .header-brand { padding-right: 8px; }
  .header-signin, .header-cta { padding: 0 10px; }
  .landing-theme-trigger { width: 44px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hero-copy, .hero-card { padding-top: 32px; }
}
/* Forced colors drop box-shadows: the current page and view keep an underline. */
@media (forced-colors: active) {
  .header-nav a[aria-current="page"], .sample-switch button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 6px; }
  .primary-action { border: 1px solid ButtonText; }
  .preference-choice input:checked + span { border: 2px solid Highlight; padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* The direct signup uses the same sheet and form as the homepage. */
.join-grid { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 620px; }
.join-copy { padding: 96px var(--cell); }
.join-copy h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.02; letter-spacing: var(--track-h1); }
.join-copy > p { max-width: 360px; margin-top: 24px; font-size: 18px; color: var(--fg-2); }
.join-copy > a { display: inline-flex; gap: 32px; margin-top: 40px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.join-form { border-left: 1px solid var(--rule); padding: 96px var(--cell); }
.join-form h2 { font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.join-form .quick-waitlist { margin-top: 28px; }
.join-form .quick-waitlist > form > .text-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.direct-join { min-height: 100svh; display: flex; flex-direction: column; }
.direct-join main { flex: 1; display: flex; }
.direct-join .join-route { display: flex; width: 100%; }
.join-signin { margin-top: 32px; color: var(--fg-3); font-size: 14px; }
.join-signin a { text-decoration: underline; text-underline-offset: 4px; color: var(--fg-1); }
@media (max-width: 759px) {
  .join-grid { grid-template-columns: 1fr; }
  .join-copy { padding-block: 48px; }
  .join-form { border-left: 0; border-top: 1px solid var(--rule); padding-block: 40px; }
}

/* One product stage, with outcome choices outside the application. */
.sample-bar { display: flex; height: 42px; }
.sample-meta { padding: 0 var(--cell); font-size: 12px; }
.sample-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.sample-switch button { min-height: 52px; padding: 10px 14px; }
.sample-switch button:first-child { border-left: 0; }
.sample-guide { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 16px var(--cell); border-bottom: 1px solid var(--rule); }
.sample-guide strong { color: var(--fg-1); font-size: 14px; font-weight: 600; }
.sample-guide > span { color: var(--fg-3); font-size: 13px; line-height: 1.5; }
.sample-writing-switch { display: flex; gap: 4px; margin-left: auto; }
.sample-writing-switch button { border: 1px solid var(--rule); border-radius: 6px; background: transparent; color: var(--fg-3); padding: 6px 12px; font: inherit; font-size: 12px; }
.sample-writing-switch button[aria-pressed="true"] { color: var(--fg-1); background: var(--hover); }
@media (max-width: 600px) {
  .sample-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample-switch button { font-size: 12px; }
  .sample-writing-switch { margin-left: 0; }
}