/* Tabcat site: page layout. Components come from components.css, values from tokens.css.
   Two layers, kept apart on purpose:
   - Page chrome (header, sections, FAQ, the join form, buttons, footer) uses the brand
     layer: paper, ink and one ginger accent, set in Plus Jakarta Sans.
   - Pictures of the app (.fl-frame, .fl-strip, .fl-tab, the desk, settings, mailbox)
     keep the --app-* colours and the Mac's own type, so they look like the real strip.
   The one signature is the eared tab (.ear): it marks the current page in the nav, the
   current step on the "Down the strip" rail, and bullets in feature lists. Nowhere else. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:root {
  --gutter: 16px;
  /* Field and secondary button edges: 3:1 or more against paper in both themes (WCAG 1.4.11). */
  --control-edge: color-mix(in srgb, var(--ink) 55%, var(--paper));
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/26px var(--font-brand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Short pages (joined, try again, 404) keep the footer at the bottom of the window. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
#main { flex: 1 0 auto; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--ginger-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ginger-text); outline-offset: 2px; }
a:focus-visible { border-radius: 4px; }
code, .mono { font-family: var(--font-mono); font-size: 0.875em; }
strong { font-weight: 700; }

/* Type scale. Display and title-1 step down on phones. */
.display { font-size: clamp(40px, 3.6vw + 14px, 60px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; }
.title-1 { font-size: clamp(30px, 1.6vw + 22px, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
.title-2 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.025em; }
.title-3 { font-size: 21px; line-height: 28px; font-weight: 700; letter-spacing: -0.025em; }
.lead { font-size: 19px; line-height: 30px; }
.small { font-size: 13px; line-height: 20px; }
.label { font-size: 13px; line-height: 20px; font-weight: 500; }
.muted { color: var(--ink-muted); }
.kicker { color: var(--ginger-text); font-size: 15px; line-height: 20px; font-weight: 600; }

/* The eared tab, drawn by tab-ear.svg as a mask so it takes the theme's ginger. */
.site-nav a[aria-current="page"]::before,
.walk__item::after,
.ticks > li::before {
  display: block;
  flex: none;
  width: 14px;
  height: 15px;
  background: var(--ginger);
  -webkit-mask: url("/assets/tab-ear.svg") center / contain no-repeat;
  mask: url("/assets/tab-ear.svg") center / contain no-repeat;
}

.skip {
  position: absolute;
  top: -100px;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-cell);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.skip:focus { top: var(--space-2); }

.wrap {
  width: 100%;
  max-width: calc(1120px + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Buttons and fields in page chrome. The app's own versions stay in components.css. */
.fl-btn {
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: 12px;
  color: var(--ink);
  font: 600 15px/20px var(--font-brand);
  letter-spacing: -0.005em;
}
.fl-btn--primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-raised); }
.fl-btn--primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.fl-btn--primary:active { background: color-mix(in srgb, var(--ink) 76%, var(--paper)); }
.fl-btn--secondary { border-color: var(--control-edge); }
.fl-btn--secondary:hover, .fl-btn--quiet:hover { background: var(--paper-sunken); }
.fl-btn:active { background: var(--paper-sunken); }
.fl-btn--small { min-height: 36px; padding: 0 var(--space-4); border-radius: 10px; font-size: 14px; line-height: 18px; }
.fl-btn:focus-visible { outline: 2px solid var(--ginger-text); outline-offset: 2px; }
.fl-input {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--control-edge);
  border-radius: 12px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 400 16px/20px var(--font-brand);
}
.fl-input::placeholder { color: var(--ink-muted); }
.fl-input:focus-visible { outline: 2px solid var(--ginger-text); outline-offset: 2px; }
.fl-input[aria-invalid="true"] { border: 2px solid var(--ginger-text); padding: 0 calc(var(--space-4) - 1px); }
/* Keycaps in prose and the "Coming soon" label belong to the page, not the app picture. */
.fl-key { border-color: var(--hairline-strong); background: var(--paper-sunken); color: var(--ink); }
.fl-label { border-color: var(--hairline-strong); color: var(--ink-muted); font: 500 13px/1 var(--font-brand); }

/* Pictures of the app use the Mac's own type, whatever the page around them uses. */
.desk, .fl-frame, .pile, .fl-settings-group, .walk__marker, .table .fl-tab { font-family: var(--font-system); }

/* Header */
.site-header { border-bottom: 1px solid var(--hairline); background: var(--paper); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 68px; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: -4px;
  padding: 4px;
  color: var(--ink);
  font: 700 22px/1 var(--font-brand);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.wordmark__mark { display: block; width: 26px; height: 26px; }
.site-nav { display: flex; align-items: center; gap: var(--space-1); padding: 0; list-style: none; }
.site-nav a:not(.fl-btn) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: 10px;
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:not(.fl-btn):hover { background: var(--paper-sunken); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-nav a[aria-current="page"]::before { content: ""; width: 12px; height: 13px; margin-top: -2px; }
.site-nav__cta { margin-left: var(--space-3); }
@media (max-width: 440px) {
  .site-nav__cta { display: none; }
  .site-nav a:not(.fl-btn) { padding: 0 var(--space-2); }
}

/* Sections */
.section { padding-block: var(--space-16); }
@media (min-width: 720px) { .section { padding-block: var(--space-24); } }
.section + .section { padding-top: 0; }
.section__head { display: grid; gap: var(--space-4); max-width: 42rem; margin-bottom: var(--space-12); }

/* Hero */
.hero { display: grid; gap: var(--space-12); align-items: center; padding-block: var(--space-12) var(--space-4); }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); padding-block: var(--space-24) var(--space-8); }
}
.hero__text { display: grid; gap: var(--space-6); max-width: 34rem; }
.hero__title { display: grid; gap: var(--space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Hero demo: a strip on a window; its tabs really switch. */
.demo { display: grid; gap: var(--space-4); }
.demo .fl-frame { min-height: 420px; }
.demo figcaption { max-width: 34rem; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.demo-view { display: grid; gap: var(--space-6); align-content: start; height: 100%; }

/* The desk: a Mac desktop under the demo, so the strip sits where it does in real use.
   It is a picture of the Mac, so it keeps its wallpaper and the app's colours. */
.desk {
  --desk-wall: linear-gradient(165deg, #b9c7dd 0%, #d9d3d0 55%, #f1d3a6 100%);
  --desk-bar: rgb(255 255 255 / 0.6);
  position: relative;
  padding: 48px clamp(16px, 3vw, 36px) clamp(20px, 3vw, 36px);
  border-radius: 22px;
  background: var(--desk-wall);
  box-shadow: inset 0 0 0 1px var(--app-hairline), var(--shadow-raised);
}
@media (prefers-color-scheme: dark) {
  .desk { --desk-wall: linear-gradient(165deg, #1d2536 0%, #2b2a33 55%, #4a3520 100%); --desk-bar: rgb(0 0 0 / 0.35); }
}
.desk__bar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 28px;
  padding: 0 var(--space-4);
  border-radius: 22px 22px 0 0;
  background: var(--desk-bar);
  color: var(--app-ink);
  font-size: 12px;
  line-height: 1;
}
.desk__app { font-weight: 700; }
.desk__clock { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .desk__bar span:nth-child(n+3):not(.desk__clock) { display: none; } }
.desk .fl-window__lights span:nth-child(1) { background: #ff5f57; }
.desk .fl-window__lights span:nth-child(2) { background: #febc2e; }
.desk .fl-window__lights span:nth-child(3) { background: #28c840; }

/* Window content for each demo tab: an editor, the page it renders and an agent queue. */
.ide { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.ide__files { display: grid; gap: 2px; align-content: start; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
.ide__files li { padding: 5px var(--space-2); border-radius: var(--radius-cell); color: var(--app-ink-muted); }
.ide__files .ide__dir { color: var(--app-ink); font-weight: 600; }
.ide__files li:not(.ide__dir) { padding-left: var(--space-5); }
.ide__files [aria-current] { background: var(--app-fill-quiet); color: var(--app-ink); font-weight: 500; }
.ide__code { margin: 0; overflow: hidden; color: var(--app-ink); font: 400 12px/21px var(--font-mono); white-space: pre; }
.ide__code .k { color: var(--app-accent); }
.ide__code .s { color: var(--app-asks); }
.ide__code .t { font-weight: 600; }
.browser { display: grid; gap: var(--space-4); }
.browser__url { justify-self: center; min-width: 50%; padding: 5px var(--space-4); border-radius: var(--radius-cell); background: var(--app-fill-quiet); color: var(--app-ink-muted); font-size: 12px; line-height: 16px; text-align: center; }
.browser__page { display: grid; gap: var(--space-3); justify-self: center; width: min(100%, 18rem); padding: var(--space-6); border: 1px solid var(--app-hairline); border-radius: var(--radius-panel); background: var(--app-surface); }
.browser__title { font-size: 20px; line-height: 26px; font-weight: 600; }
.browser__field { padding: 8px var(--space-3); border: 1px solid var(--app-control-border); border-radius: var(--radius-cell); color: var(--app-ink-muted); font-size: 14px; line-height: 20px; }
.browser__button { padding: 8px var(--space-3); border-radius: var(--radius-cell); background: var(--app-ink); color: var(--app-surface); font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; }
.agents { display: grid; margin: 0; padding: 0; list-style: none; }
.agents li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--app-hairline); font-size: 14px; line-height: 20px; }
.agents li:last-child { border-bottom: 1px solid var(--app-hairline); }
.agents__state { flex: none; padding: 2px var(--space-2); border: 1px solid var(--app-hairline-strong); border-radius: var(--radius-pill); color: var(--app-ink-muted); font-size: 12px; line-height: 16px; font-weight: 600; }
.agents__state[data-state="running"] { border-color: transparent; background: var(--app-asks-fill); color: var(--app-asks); }
.demo-idle { display: grid; gap: var(--space-3); justify-items: start; max-width: 22rem; padding-top: var(--space-8); }
.demo-idle p { color: var(--app-ink-muted); }
@media (max-width: 520px) {
  .demo .fl-frame { min-height: 400px; }
  .demo .fl-window__body { padding: var(--space-4); }
  .ide { grid-template-columns: minmax(0, 1fr); }
  .ide__files { display: none; }
}

/* The problem: a pile of windows beside one window with the strip, at the same size. */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-8); }
.compare__side { display: grid; gap: var(--space-4); align-content: start; }
.compare__side figcaption { max-width: 30rem; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.compare__side figcaption strong { color: var(--ink); }
.compare .fl-frame, .pile { height: 280px; }
.compare .fl-window__body { padding: var(--space-5); }
.pile { position: relative; overflow: hidden; border-radius: var(--radius-window); background: var(--app-surface-sunken); }
.pile__win {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: grid;
  align-content: start;
  gap: var(--space-2);
  overflow: hidden;
  padding: 0 var(--space-3) var(--space-3);
  border-radius: var(--radius-panel);
  background: var(--app-surface-raised);
  color: var(--app-ink);
  box-shadow: var(--app-shadow-window-inactive);
}
.pile__win:last-child { box-shadow: var(--app-shadow-window); }
.pile__bar {
  position: relative;
  margin-inline: calc(-1 * var(--space-3));
  padding: 6px var(--space-3) 6px 46px;
  overflow: hidden;
  border-bottom: 1px solid var(--app-hairline);
  color: var(--app-ink-muted);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Unlit traffic lights: none of these windows is the one in front. */
.pile__bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-fill-strong);
  box-shadow: 11px 0 0 var(--app-fill-strong), 22px 0 0 var(--app-fill-strong);
  transform: translateY(-50%);
}
.pile__line { font-size: 12px; line-height: 16px; }
.pile__line--title { font-size: 15px; line-height: 20px; font-weight: 600; }
.pile__line--mono { font-family: var(--font-mono); }
.pile__win--dark { background: #1d1d1f; color: #f5f5f7; }
.pile__win--dark .pile__bar { border-color: rgba(255, 255, 255, 0.1); color: #a1a1a6; }
.pile__win--dark .pile__bar::before { background: #ffffff29; box-shadow: 11px 0 0 #ffffff29, 22px 0 0 #ffffff29; }

/* Feature lists: each item hangs from an eared tab. */
.ticks { display: grid; padding: 0; list-style: none; }
.ticks > li { position: relative; padding-left: 26px; }
.ticks > li::before { content: ""; position: absolute; left: 0; top: 5px; }
.pains { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-8); margin-top: var(--space-12); }
.pains > li { display: grid; gap: var(--space-2); align-content: start; }
.pains__title { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.pains p { color: var(--ink-muted); }

/* Questions before joining */
.faq { display: grid; gap: 0 var(--space-12); }
@media (min-width: 800px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq > div { display: grid; gap: var(--space-2); align-content: start; padding-block: var(--space-6); border-top: 1px solid var(--hairline); }
.faq dt { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.faq dd { color: var(--ink-muted); }

/* Example setups: a small strip on a window, sketched for what that kind of app shows. */
.examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-12) var(--space-8); margin: 0; padding: 0; list-style: none; }
.example { display: grid; gap: var(--space-2); align-content: start; }
.example .fl-frame { height: 200px; margin-bottom: var(--space-4); }
.example__title { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.example p { color: var(--ink-muted); }
.example .example__apps { color: var(--ink); font-size: 13px; line-height: 20px; font-weight: 500; }
.sk { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); }
.sk > span { width: var(--w, 100%); height: 8px; border-radius: var(--radius-pill); background: var(--app-fill-strong); }
.sk--code .sk-in { margin-left: var(--space-4); }
.sk--code .sk-in2 { margin-left: var(--space-8); }
.sk > .sk-block { height: 56px; border-radius: var(--radius-cell); background: var(--app-fill-quiet); }
.sk > .sk-block--short { height: 32px; }
.sk > .sk-track, .sk > .sk-cards { display: flex; gap: var(--space-1); height: 14px; background: none; }
.sk-track i { flex: var(--f, 1); border-radius: 3px; background: var(--app-fill-strong); }
.sk > .sk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); height: 40px; }
.sk-cards i { border: 1px solid var(--app-hairline); border-radius: var(--radius-cell); background: var(--app-fill-quiet); }
.sk > .sk-url { width: 70%; height: 18px; background: var(--app-fill-quiet); }
.sk > .sk-bubble { justify-self: end; width: 62%; height: 22px; border-radius: var(--radius-panel); background: var(--app-fill-quiet); }
.sk > .sk-bubble--in { justify-self: start; width: 74%; height: 34px; background: var(--app-fill-strong); }
.sk > .sk-chip { width: 96px; height: 22px; border: 1px solid var(--app-hairline); border-radius: var(--radius-cell); background: var(--app-surface-raised); }
.sk--term { background: var(--app-surface-sunken); border-radius: 0 0 var(--radius-window) var(--radius-window); }
.sk--term > span:not(.sk-chip) { height: 6px; }
/* The photos card: photo tiles and a photo for the window. */
.fl-tab__tile--photo { overflow: hidden; }
.fl-tab__tile--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-tab[data-state="active"] .fl-tab__tile--photo { box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--tile-colour); }
.sk--photo { display: block; overflow: hidden; padding: 0; }
.sk--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }

/* App tabs show the app's own icon, as Tabcat does: a ring in the tab's colour when
   active, and grey at half strength with a dashed ring when the app isn't open. */
.fl-tab[data-state] .fl-tab__tile--app { border: 0; background: transparent; }
.fl-tab__tile--app img, .fl-switcher__tile--app img { display: block; width: 100%; height: 100%; }
.fl-tab__tile--app::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--tile-colour); border-radius: calc(var(--radius-tile) + 3px); opacity: 0; }
.fl-tab[data-state="active"] .fl-tab__tile--app::after { opacity: 1; }
.fl-tab[data-state="stopped"] .fl-tab__tile--app::after { border: 1.5px dashed var(--tile-colour); opacity: 1; }
.fl-tab[data-state="stopped"] .fl-tab__tile--app img { filter: grayscale(1); opacity: 0.5; }
.fl-switcher__item .fl-switcher__tile--app { border: 0; background: transparent; }
.fl-switcher__item[data-state="stopped"] .fl-switcher__tile--app img { filter: grayscale(1); opacity: 0.5; }

/* The walk down the strip: one rail drawn like the strip, each feature beside the strip
   element it belongs to. The step in view gets the eared tab, cut into the rail's edge
   the way the logo's tabs cut into its window. */
.walk { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.walk::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--strip-width);
  border: 1px solid var(--app-hairline);
  border-radius: var(--radius-window);
  background: var(--app-surface-raised);
}
.walk__item {
  --pad: var(--space-8);
  position: relative;
  display: grid;
  grid-template-columns: var(--strip-width) minmax(0, 1fr);
  column-gap: clamp(20px, 4vw, 56px);
  padding-block: var(--pad);
}
.walk__item:first-child { --pad: var(--space-tab); }
.walk__item:last-child { padding-bottom: var(--space-5); }
.walk__item::after {
  content: "";
  position: absolute;
  /* Centred on the step's strip element: a 40 pt button or tab, or the set pill up top. */
  top: calc(var(--pad) + 12px);
  left: calc(var(--strip-width) - 7px);
  opacity: 0;
  transform: translateX(-4px);
}
.walk__item:first-child::after { top: calc(var(--pad) + 4px); }
.walk__item[data-current]::after { opacity: 1; transform: none; }
.walk__marker { display: flex; flex-direction: column; align-items: center; gap: var(--space-tab); }
.walk__body { display: grid; gap: var(--space-6); align-items: start; padding-top: var(--space-1); }
@media (min-width: 1040px) {
  .walk__body--aside { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); column-gap: var(--space-12); }
}
.walk__body > .fl-switcher { justify-self: start; }
.walk__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.walk__figure { display: grid; gap: var(--space-2); justify-self: start; width: 100%; max-width: 380px; }
.walk__figure figcaption { color: var(--ink-muted); font-size: 13px; line-height: 20px; }
@media (max-width: 520px) {
  .walk .fl-switcher { gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-window); }
  .walk .fl-switcher__item { width: 58px; height: 76px; }
  .walk .fl-switcher__tile { width: var(--tile-size); height: var(--tile-size); border-radius: var(--radius-tile); font-size: 18px; }
  .walk .fl-switcher__name { max-width: 52px; }
}
.walk__text { display: grid; gap: var(--space-3); max-width: 34rem; }
.walk__text > p:not(.keys-line) { color: var(--ink-muted); }
/* Inline flow, not flex, so the words between keycaps wrap like a sentence. */
.keys-line { font-size: 15px; line-height: 34px; }
.keys-line .fl-key { vertical-align: 1px; }

/* Light and dark app, each with its own strip. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); max-width: 30rem; }
.pair figure { display: grid; gap: var(--space-3); }
.pair .fl-frame { height: 176px; }
.pair .fl-window__body { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); }
.pair .fl-window__body span { height: 8px; border-radius: var(--radius-pill); background: var(--app-fill-strong); }
.pair .fl-window__body span:first-child { width: 70%; }
.pair figcaption { color: var(--ink-muted); font-size: 13px; line-height: 20px; }
@media (max-width: 420px) { .pair { grid-template-columns: minmax(0, 1fr); } }

/* Get Tabcat: the one raised card on the page. */
.get {
  display: grid;
  gap: var(--space-8);
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper-raised);
  box-shadow: var(--shadow-raised);
}
@media (min-width: 900px) { .get { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; column-gap: var(--space-12); } }
.get__intro { display: grid; gap: var(--space-4); justify-items: start; }
.facts { display: grid; }
.facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--hairline); }
.facts > div:last-child { border-bottom: 1px solid var(--hairline); }
.facts dt { color: var(--ink-muted); font-size: 13px; line-height: 26px; font-weight: 500; }
@media (max-width: 520px) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Waitlist form: the field and button share a row until the row is too narrow. */
.join { position: relative; display: grid; gap: var(--space-2); width: 100%; max-width: 30rem; }
.join__label { font-size: 13px; line-height: 20px; font-weight: 500; }
.join__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.join__row .fl-input { flex: 1 1 12rem; }
.join__row .fl-btn { flex: 0 0 auto; }
@media (max-width: 400px) { .join__row .fl-btn { flex: 1 1 100%; } }
.join__status:empty { display: none; }
.join__status { font-weight: 600; }
.join__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.join__done { display: grid; gap: var(--space-2); max-width: 30rem; }
.join__done:focus { outline: none; }

/* Inner pages: a heading column and a body column, like a settings document. */
.page-head { display: grid; gap: var(--space-4); max-width: 44rem; padding-block: var(--space-12) var(--space-12); }
@media (min-width: 720px) { .page-head { padding-block: var(--space-16) var(--space-12); } }
.doc { display: grid; gap: var(--space-16); padding-bottom: var(--space-24); }
.doc-section { display: grid; gap: var(--space-6); padding-top: var(--space-8); border-top: 1px solid var(--hairline); }
@media (min-width: 960px) { .doc-section { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--space-12); } }
.doc-section__body { display: grid; gap: var(--space-4); align-content: start; max-width: 40rem; min-width: 0; }
.doc-section__body--wide { max-width: 52rem; }
.doc-section__body ul:not(.ticks) { display: grid; gap: var(--space-2); padding-left: 1.25em; }
.doc-section__body .ticks { gap: var(--space-3); }

.steps { display: grid; gap: var(--space-8); padding: 0; list-style: none; counter-reset: step; }
.steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-4); counter-increment: step; }
.steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--paper-raised);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.steps h3 { margin-bottom: var(--space-1); font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.steps p { color: var(--ink-muted); }

/* Tables: tab states, shortcuts, files. */
.table-scroll { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.table th, .table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-top: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.table thead th { border-top: 0; color: var(--ink-muted); font-size: 13px; font-weight: 500; }
.table tbody th { font-weight: 600; }
.table tr:last-child td, .table tr:last-child th { border-bottom: 1px solid var(--hairline); }
.table td:first-child, .table th[scope="row"] { white-space: nowrap; }
.table .fl-tab { width: auto; }
.table .fl-keys { flex-wrap: nowrap; }

/* Appearance preview: settings that drive a strip beside them. */
.appearance { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .appearance { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); } }
.appearance .fl-frame { height: 300px; }
.appearance .fl-frame[data-names="off"] .fl-tab__name { display: none; }
.fl-segment__option:focus-visible, .fl-switch:focus-visible { outline: 2px solid var(--ginger-text); outline-offset: 2px; }

/* Footer */
.site-footer { padding-block: var(--space-12); border-top: 1px solid var(--hairline); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.site-footer__inner { display: grid; gap: var(--space-4); }
@media (min-width: 720px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .site-footer__legal { grid-column: 1 / -1; }
}
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.site-footer__brand .wordmark { font-size: 18px; }
.site-footer__brand .wordmark__mark { width: 22px; height: 22px; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); padding: 0; list-style: none; }
.site-footer nav a { color: var(--ink); font-weight: 500; text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer__legal { font-size: 13px; line-height: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .demo-view { animation: view-in 180ms ease-out; }
  @keyframes view-in { from { opacity: 0.4; } to { opacity: 1; } }
  .walk__item::after { transition: opacity 200ms ease-out, transform 200ms ease-out; }
}