/* Generated by scripts/render-art.mjs from landing-src/. Edit the sources there. */
/* core/00-tokens.css */
:root {
  --paper: #f4f4ef;
  --paper-raised: #fbfbf8;
  --paper-sunk: #e7e7e1;
  --paper-btn: #efefe9;
  --tile: #efefe9;
  --ink-rgb: 28 33 29;
  --ink: rgb(var(--ink-rgb) / .86);
  --ink-2: rgb(var(--ink-rgb) / .68);
  /* --ink-3 is the faintest text that still meets AA at small sizes (4.5:1+ on paper and wells);
     --ink-dim is for the faint half of large two-tone headlines only (3.5:1, AA for large text). */
  --ink-3: rgb(var(--ink-rgb) / .64);
  --ink-dim: rgb(var(--ink-rgb) / .54);
  --ink-4: rgb(var(--ink-rgb) / .28);
  --ink-solid: #1c211d;
  --line: rgb(var(--ink-rgb) / .08);
  --line-2: rgb(var(--ink-rgb) / .12);
  --forest: #1f3a2c;
  --forest-2: #2e5843;
  --leaf: #5cc234;
  --live: #9be15d;
  --sky-top: #2f8fe6;
  --sky-bottom: #79bff0;
  --f-text: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-pixel: 'Departure Mono', 'Geist Mono', ui-monospace, monospace;
  --f-brand: 'Nunito', ui-rounded, system-ui, sans-serif;
  --r-chip: 4px; --r-btn: 8px; --r-row: 10px; --r-panel: 12px; --r-frame: 16px; --r-outer: 20px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  /* Dayroom's surface finish is pixel UI: crisp 1px bevels and hard 2px drops, never blur or halos. */
  --emboss: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(var(--ink-rgb) / .05);
  --frame-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(31 58 44 / .2), 0 2px 0 1px rgb(18 44 32 / .1);
  --card-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .08), 0 2px 0 rgb(var(--ink-rgb) / .05);
  --wrap: 1100px;
  --gutter: 24px;
  --header-h: 88px;
}
@media (max-width: 475px) { :root { --gutter: 16px; } }
@media (max-width: 999px) { :root { --header-h: 76px; } }

/* Shared notification material, used by the hero and product scenes. */
:root {
  --notification-glass: linear-gradient(rgb(22 69 61 / .6), rgb(22 69 61 / .8));
  --notification-shadow: inset 0 -1px #0000001f, inset 0 -1px 2px #0000001a, inset 0 1px 1px #ffffff3d;
}

/* core/10-base.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 440 16px/1.55 var(--f-text); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 420; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgb(var(--ink-rgb) / .8); outline-offset: 2px; border-radius: 4px; }
/* Dayroom's supplied Bell-d lockup (art/logo.svg). Each context sets --logo-h. */
.brand-logo { display: block; height: var(--logo-h, 26px); width: auto; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 400; padding: 12px 18px; border-radius: var(--r-btn); background: var(--forest); color: #fff; font-weight: 520; }
.skip:focus { top: 12px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 112px 0; position: relative; }
@media (max-width: 767px) { .section { padding: 88px 0; } }

/* Type */
.eyebrow { font: 400 11px/1.4 var(--f-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.title { font-size: 42px; line-height: 1.12; letter-spacing: -.012em; color: var(--ink); }
.title .dim, .subtitle .dim { color: var(--ink-dim); }
.subtitle { font-size: 36px; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.lede { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 560px; }
.small { font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 460; }
.mono { font-family: var(--f-mono); }
.pixel { font-family: var(--f-pixel); }
@media (max-width: 899px) { .title { font-size: 36px; } .subtitle { font-size: 32px; } }
@media (max-width: 767px) { .title { font-size: 30px; line-height: 1.15; } .subtitle { font-size: 28px; line-height: 1.15; } }

/* Buttons */
.btn {
  --h: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 16px; border-radius: var(--r-btn); border: 1px solid transparent;
  font: 480 15px/1 var(--f-text); letter-spacing: .01em; white-space: nowrap; position: relative; isolation: isolate;
  transition: transform .14s var(--ease-out), background-color .14s var(--ease-out), box-shadow .2s var(--ease-out), color .14s;
  user-select: none;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn .arrow { display: inline-block; transition: transform .2s var(--ease-out); }
.btn:hover .arrow { transform: translateX(2px); }
/* Glass buttons share the cards' lens edge, with a forest tint for primary actions. */
.btn-dark, .btn-light {
  border-radius: 16px;
  border-color: rgb(255 255 255 / .5);
  background-image: linear-gradient(150deg, rgb(255 255 255 / .22), transparent 48%, rgb(255 255 255 / .06));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), inset 0 -1px 0 rgb(10 35 22 / .18), 0 2px 4px rgb(18 44 30 / .1), 0 10px 20px -10px rgb(18 44 30 / .3);
}
.btn-dark { color: #fff; background-color: #234835; }
.btn-light { color: var(--ink-solid); background-color: #edf2eb; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-dark, .btn-light { -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
  .btn-dark { background-color: rgb(18 53 34 / .84); }
  .btn-light { background-color: rgb(242 248 240 / .58); }
}
@media (hover: hover) {
  .btn-dark:hover { background-color: rgb(23 64 42 / .92); }
  .btn-light:hover { background-color: rgb(255 255 255 / .76); }
}
.btn-dark:active, .btn-light:active {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 1px 2px rgb(10 35 22 / .16), inset 0 -1px 0 rgb(255 255 255 / .4), 0 2px 6px rgb(18 44 30 / .12);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .btn-dark, .btn-light { background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn-dark { background-color: #234835; }
  .btn-light { background-color: #f5f7f3; border-color: #647367; }
}
@media (forced-colors: active) {
  .btn-dark, .btn-light { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (pointer: coarse) { .btn { --h: 44px; } }

/* Frames and wells */
/* .frame: a stepped pixel bezel, drawn like the hero's status bubbles: a 1px forest
   outline with pixel-rounded corners, a flat paper face and a hard 2px drop beneath
   (one 13x15 nine-slice; border width 0 so the layout is unchanged). */
.frame {
  padding: 10px; border: 0 solid transparent; border-radius: 6px; background: none;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='15' shape-rendering='crispEdges'%3E%3Cpath fill='%23122c20' fill-opacity='.16' d='M0 8h1v1h-1zM12 8h1v1h-1zM0 9h1v1h-1zM12 9h1v1h-1zM1 10h1v1h-1zM11 10h1v1h-1zM1 11h2v1h-2zM10 11h2v1h-2zM2 12h3v1h-3zM8 12h3v1h-3zM3 13h7v1h-7zM5 14h3v1h-3z'/%3E%3Cpath fill='%23efefe9' d='M5 1h3v1h-3zM3 2h7v1h-7zM2 3h9v1h-9zM2 4h9v1h-9zM1 5h11v1h-11zM1 6h11v1h-11zM1 7h11v1h-11zM2 8h9v1h-9zM2 9h9v1h-9zM3 10h7v1h-7zM5 11h3v1h-3z'/%3E%3Cpath fill='%231f3a2c' d='M5 0h3v1h-3zM3 1h2v1h-2zM8 1h2v1h-2zM2 2h1v1h-1zM10 2h1v1h-1zM1 3h1v1h-1zM11 3h1v1h-1zM1 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM12 5h1v1h-1zM0 6h1v1h-1zM12 6h1v1h-1zM0 7h1v1h-1zM12 7h1v1h-1zM1 8h1v1h-1zM11 8h1v1h-1zM1 9h1v1h-1zM11 9h1v1h-1zM2 10h1v1h-1zM10 10h1v1h-1zM3 11h2v1h-2zM8 11h2v1h-2zM5 12h3v1h-3z'/%3E%3C/svg%3E") 6 6 8 6 fill / 6px 6px 8px 6px / 0 0 2px 0 stretch;
}
/* .well: a recessed tray with hard inner edges. */
.well { background: var(--paper-sunk); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .06), inset 0 2px 0 rgb(var(--ink-rgb) / .04), 0 1px 0 #fff; overflow: hidden; position: relative; }
/* .dots (kept as the class name the demos use): the office's checked floor tiles at a
   whisper, 8px squares at 3.5% ink. Dayroom's own floor, not a dotted stage. */
.dots {
  background-color: #f1f1ec;
  background-image: conic-gradient(rgb(var(--ink-rgb) / .035) 25%, transparent 0 50%, rgb(var(--ink-rgb) / .035) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.card { background: #fff; border-radius: 8px; box-shadow: 0 0 0 .7px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px rgb(155 225 93 / .18); flex: none; }

/* Numbered feature rows (sections 41-44) */
.rows { display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px;
  border-radius: var(--r-row); border: 1px solid rgb(0 0 0 / .1); background: rgb(255 255 255 / .6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8); text-align: left;
  transition: transform .15s var(--ease-out), border-color .15s, background-color .15s;
}
.row .num { font: 400 11px/1 var(--f-mono); color: var(--ink-3); min-width: 22px; }
.row .label { font-size: 14px; font-weight: 520; color: var(--ink); flex: 1; }
.row .plus { width: 16px; height: 16px; color: var(--ink-3); transition: transform .25s var(--ease-out), color .15s; flex: none; }
.row[aria-current="true"] { background: #fff; border-color: rgb(0 0 0 / .18); }
@media (hover: hover) and (pointer: fine) {
  .row:hover { transform: translateY(-1px); border-color: rgb(0 0 0 / .2); background: #fff; }
  .row:hover .plus { transform: rotate(90deg); color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* core/90-glass.css */
/* Remaining controls and popup surfaces. Keep artwork, message content and
   semantic status colours outside this material layer. */
:root {
  --glass-control: linear-gradient(145deg, rgb(255 255 255 / .8), rgb(255 255 255 / .22) 48%, rgb(220 232 224 / .35));
  --glass-control-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(40 66 49 / .12), 0 2px 4px rgb(28 50 36 / .06), 0 10px 22px -15px rgb(28 50 36 / .28);
}
html body :is(.dh .dh-menu-btn,
  .dh .dh-close,
  .dh .dh-row,
  .chapter .row,
  .plat-fit,
  .plat-num,
  .lg-toc-sum,
  #talk .td-iconbtn,
  .plat-tab .plat-tab-ico,
  .plat-controls span,
  .plat-btn,
  #plan .pl-btn,
  #plan .pl-iconbtn,
  #plan .pl-card-more,
  #catch-up .cu-btn,
  #talk .td-name-chip,
  #office .of-key,
  #yourself .ys-body button,
  #dayroom-drawer .drawer-close,
  #dayroom-drawer .drawer-page,
  .aw-row,
  .lh-menu-btn,
  .lh-menu-panel a,
  #faq .faq-icon),
html body :is(.dh-sheet .dh-panel,
  #dayroom-drawer .drawer-panel,
  #plan .pl-menu,
  #plan .pl-status-menu,
  #catch-up .cu-peek,
  .lh-menu-panel,
  .chapter .rows,
  .aw-rows,
  #yourself .ys-body,
  .plat-cta-bar) {
  background: var(--glass-control), #edf2eb;
  box-shadow: var(--glass-control-shadow);
  border-color: rgb(255 255 255 / .7);
}
html body :is(.dh .dh-menu-btn,
  .dh .dh-close,
  .dh .dh-row,
  .chapter .row,
  .plat-fit,
  .plat-num,
  .lg-toc-sum,
  #talk .td-iconbtn,
  .plat-tab .plat-tab-ico,
  .plat-controls span,
  .plat-btn,
  #plan .pl-btn,
  #plan .pl-iconbtn,
  #plan .pl-card-more,
  #catch-up .cu-btn,
  #talk .td-name-chip,
  #office .of-key,
  #yourself .ys-body button,
  #dayroom-drawer .drawer-close,
  #dayroom-drawer .drawer-page,
  .aw-row,
  .lh-menu-btn,
  .lh-menu-panel a,
  #faq .faq-icon) { border-radius: 12px; color: var(--ink-solid); }
html body :is(.plat-btn.is-dark,
  #plan .pl-btn-dark,
  #catch-up .cu-btn-dark,
  #talk .td-name-chip.is-picked,
  #office .of-plate,
  #office .dr-door-label) {
  background: var(--notification-glass); color: #fff;
  border-image: none; border: 1px solid rgb(255 255 255 / .24); border-radius: 8px;
  box-shadow: var(--notification-shadow); filter: none;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body :is(.dh .dh-menu-btn,
  .dh .dh-close,
  .dh .dh-row,
  .chapter .row,
  .plat-fit,
  .plat-num,
  .lg-toc-sum,
  #talk .td-iconbtn,
  .plat-tab .plat-tab-ico,
  .plat-controls span,
  .plat-btn,
  #plan .pl-btn,
  #plan .pl-iconbtn,
  #plan .pl-card-more,
  #catch-up .cu-btn,
  #talk .td-name-chip,
  #office .of-key,
  #yourself .ys-body button,
  #dayroom-drawer .drawer-close,
  #dayroom-drawer .drawer-page,
  .aw-row,
  .lh-menu-btn,
  .lh-menu-panel a,
  #faq .faq-icon),
  html body :is(.dh-sheet .dh-panel,
  #dayroom-drawer .drawer-panel,
  #plan .pl-menu,
  #plan .pl-status-menu,
  #catch-up .cu-peek,
  .lh-menu-panel,
  .chapter .rows,
  .aw-rows,
  #yourself .ys-body,
  .plat-cta-bar),
  html body :is(.plat-btn.is-dark,
  #plan .pl-btn-dark,
  #catch-up .cu-btn-dark,
  #talk .td-name-chip.is-picked,
  #office .of-plate,
  #office .dr-door-label) { -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
  html body :is(.dh .dh-menu-btn,
  .dh .dh-close,
  .dh .dh-row,
  .chapter .row,
  .plat-fit,
  .plat-num,
  .lg-toc-sum,
  #talk .td-iconbtn,
  .plat-tab .plat-tab-ico,
  .plat-controls span,
  .plat-btn,
  #plan .pl-btn,
  #plan .pl-iconbtn,
  #plan .pl-card-more,
  #catch-up .cu-btn,
  #talk .td-name-chip,
  #office .of-key,
  #yourself .ys-body button,
  #dayroom-drawer .drawer-close,
  #dayroom-drawer .drawer-page,
  .aw-row,
  .lh-menu-btn,
  .lh-menu-panel a,
  #faq .faq-icon) { background-color: rgb(240 246 240 / .48); }
  html body :is(.dh-sheet .dh-panel,
  #dayroom-drawer .drawer-panel,
  #plan .pl-menu,
  #plan .pl-status-menu,
  #catch-up .cu-peek,
  .lh-menu-panel,
  .chapter .rows,
  .aw-rows,
  #yourself .ys-body,
  .plat-cta-bar) { background-color: rgb(240 246 240 / .82); }
}
/* A panel provides the blur for its children, avoiding stacked filters. */
html body :is(#dayroom-drawer, #anywhere, #yourself, #talk, #plan, #catch-up, #office, .dh, .lh-menu) :is(.dh-panel, .drawer-panel, .pl-menu, .pl-status-menu, .lh-menu-panel, .rows, .aw-rows, .ys-body) :is(button, .row, .dh-row, .aw-row, .pl-mi, a) { -webkit-backdrop-filter: none; backdrop-filter: none; }
html body .chapter .row[aria-current="true"],
html body #yourself .ys-body button[aria-checked="true"],
html body .aw-row[aria-selected="true"],
html body .plat-fit[aria-pressed="true"] {
  background: var(--glass-control), rgb(225 240 221 / .82);
  box-shadow: var(--glass-control-shadow), inset 0 0 0 1px rgb(42 83 51 / .42);
}
html body .aw-hl { background: transparent; box-shadow: none; }
html body #dayroom-drawer .drawer-bar { background: rgb(255 255 255 / .2); }
html body #catch-up .cu-peek::before { background: rgb(240 246 240 / .9); }
html body #office .of-plate::after { display: none; }
html body .plat-controls .is-leave { background: linear-gradient(rgb(255 255 255 / .18), transparent), rgb(159 47 31 / .9); color: #fff; }
html body :is(.dh .dh-menu-btn,
  .dh .dh-close,
  .dh .dh-row,
  .chapter .row,
  .plat-fit,
  .plat-num,
  .lg-toc-sum,
  #talk .td-iconbtn,
  .plat-tab .plat-tab-ico,
  .plat-controls span,
  .plat-btn,
  #plan .pl-btn,
  #plan .pl-iconbtn,
  #plan .pl-card-more,
  #catch-up .cu-btn,
  #talk .td-name-chip,
  #office .of-key,
  #yourself .ys-body button,
  #dayroom-drawer .drawer-close,
  #dayroom-drawer .drawer-page,
  .aw-row,
  .lh-menu-btn,
  .lh-menu-panel a,
  #faq .faq-icon):disabled { opacity: .45; cursor: default; }
@media (hover: hover) {
  html body :is(.dh .dh-menu-btn,
  .dh .dh-close,
  .dh .dh-row,
  .chapter .row,
  .plat-fit,
  .plat-num,
  .lg-toc-sum,
  #talk .td-iconbtn,
  .plat-tab .plat-tab-ico,
  .plat-controls span,
  .plat-btn,
  #plan .pl-btn,
  #plan .pl-iconbtn,
  #plan .pl-card-more,
  #catch-up .cu-btn,
  #talk .td-name-chip,
  #office .of-key,
  #yourself .ys-body button,
  #dayroom-drawer .drawer-close,
  #dayroom-drawer .drawer-page,
  .aw-row,
  .lh-menu-btn,
  .lh-menu-panel a,
  #faq .faq-icon):not(:disabled):hover { background-color: rgb(255 255 255 / .78); }
  html body :is(.plat-btn.is-dark,
  #plan .pl-btn-dark,
  #catch-up .cu-btn-dark,
  #talk .td-name-chip.is-picked,
  #office .of-plate,
  #office .dr-door-label):hover { background: linear-gradient(rgb(22 69 61 / .76), rgb(22 69 61 / .92)); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html body :is(.dh .dh-menu-btn,
  .dh .dh-close,
  .dh .dh-row,
  .chapter .row,
  .plat-fit,
  .plat-num,
  .lg-toc-sum,
  #talk .td-iconbtn,
  .plat-tab .plat-tab-ico,
  .plat-controls span,
  .plat-btn,
  #plan .pl-btn,
  #plan .pl-iconbtn,
  #plan .pl-card-more,
  #catch-up .cu-btn,
  #talk .td-name-chip,
  #office .of-key,
  #yourself .ys-body button,
  #dayroom-drawer .drawer-close,
  #dayroom-drawer .drawer-page,
  .aw-row,
  .lh-menu-btn,
  .lh-menu-panel a,
  #faq .faq-icon,
  .dh-sheet .dh-panel,
  #dayroom-drawer .drawer-panel,
  #plan .pl-menu,
  #plan .pl-status-menu,
  #catch-up .cu-peek,
  .lh-menu-panel,
  .chapter .rows,
  .aw-rows,
  #yourself .ys-body,
  .plat-cta-bar,
  .plat-btn.is-dark,
  #plan .pl-btn-dark,
  #catch-up .cu-btn-dark,
  #talk .td-name-chip.is-picked,
  #office .of-plate,
  #office .dr-door-label) { -webkit-backdrop-filter: none; backdrop-filter: none; background: #f5f7f3; color: #20392a; border-color: #647367; }
  html body :is(.plat-btn.is-dark,
  #plan .pl-btn-dark,
  #catch-up .cu-btn-dark,
  #talk .td-name-chip.is-picked,
  #office .of-plate,
  #office .dr-door-label) { background: #16453d; color: #fff; }
}
@media (forced-colors: active) {
  html body :is(.dh .dh-menu-btn,
  .dh .dh-close,
  .dh .dh-row,
  .chapter .row,
  .plat-fit,
  .plat-num,
  .lg-toc-sum,
  #talk .td-iconbtn,
  .plat-tab .plat-tab-ico,
  .plat-controls span,
  .plat-btn,
  #plan .pl-btn,
  #plan .pl-iconbtn,
  #plan .pl-card-more,
  #catch-up .cu-btn,
  #talk .td-name-chip,
  #office .of-key,
  #yourself .ys-body button,
  #dayroom-drawer .drawer-close,
  #dayroom-drawer .drawer-page,
  .aw-row,
  .lh-menu-btn,
  .lh-menu-panel a,
  #faq .faq-icon,
  .dh-sheet .dh-panel,
  #dayroom-drawer .drawer-panel,
  #plan .pl-menu,
  #plan .pl-status-menu,
  #catch-up .cu-peek,
  .lh-menu-panel,
  .chapter .rows,
  .aw-rows,
  #yourself .ys-body,
  .plat-cta-bar,
  .plat-btn.is-dark,
  #plan .pl-btn-dark,
  #catch-up .cu-btn-dark,
  #talk .td-name-chip.is-picked,
  #office .of-plate,
  #office .dr-door-label) { background: Canvas; color: CanvasText; border: 1px solid ButtonText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body :is(.row[aria-current="true"], .aw-row[aria-selected="true"], button[aria-checked="true"], .plat-fit[aria-pressed="true"]) { outline: 2px solid Highlight; }
}

/* sections/00-header */
/* Fixed header, written in Dayroom's own syntax: the chapters are rooms
   (# talk, # plan, # catch-up, # office) and a presence dot sits beside the
   room you are in. Over the hero the bar is transparent with white type; once
   the hero has scrolled under it, paper and a hairline fade in. Below 1000px
   the rooms move into a left sheet styled like the app's phone sidebar.
   All selectors live under .dh. */
.dh {
  --dh-ink: #fbfbf8;
  --dh-hash: rgb(251 251 248 / .9);
  --dh-quiet: rgb(251 251 248 / .95);
  --dh-ease: cubic-bezier(.4, 0, .2, 1);
  position: fixed; inset: 0 0 auto; z-index: 200; height: var(--header-h);
  color: var(--dh-ink);
  transition: color .2s var(--dh-ease);
}
.dh[data-over="paper"] { --dh-ink: var(--ink); --dh-hash: var(--ink-3); --dh-quiet: var(--ink-2); }

/* Paper and hairline are separate layers so they can keep separate timings. */
.dh::before, .dh::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
.dh::before { inset: 0; background: var(--paper); transition: opacity .12s var(--dh-ease) .03s; }
.dh::after { left: 0; right: 0; bottom: -1px; height: 1px; background: rgb(var(--ink-rgb) / .09); box-shadow: 0 1px 0 #fff; transition: opacity .02s linear; }
.dh[data-over="paper"]::before { opacity: 1; transition: opacity .2s var(--dh-ease); }
.dh[data-over="paper"]::after { opacity: 1; transition: opacity .2s var(--dh-ease) .05s; }

/* Up to 1440px the bar spans the window. Wider, it narrows toward the content
   column (the logo comes to rest over the headline's left edge), which also
   keeps the links clear of the hero's cumulus and branches on big screens. */
.dh-bar {
  position: relative; z-index: 1; height: 100%; max-width: max(calc(var(--wrap) + var(--gutter) * 2), calc(2880px - 100vw)); margin: 0 auto;
  padding: 0 var(--gutter); display: flex; align-items: center; gap: 12px;
}

/* Wordmark: the supplied Bell-d lockup (an image, never typed). */
.dh .dh-mark {
  --logo-h: 26px;
  display: inline-flex; align-items: center; margin-right: auto; min-height: 44px; padding: 0 4px 0 0; border-radius: 6px;
}
.dh .brand-logo-paper, .dh[data-over="hero"] .dh-bar .brand-logo-ink { display: none; }
.dh[data-over="hero"] .dh-bar .brand-logo-paper { display: block; }

/* ---------- Room switcher ---------- */
.dh-nav { display: flex; align-items: center; gap: 22px; margin-right: 10px; }
.dh-roomset { position: relative; }
.dh-rooms, .dh-links { display: flex; align-items: center; }
.dh .dh-room, .dh .dh-link {
  display: inline-flex; align-items: center; height: 44px; border-radius: 8px;
  font: 460 15px/1 var(--f-text); letter-spacing: .005em; white-space: nowrap; color: inherit;
  transition: color .2s var(--dh-ease);
}
/* Room names inherit the bar's colour; their own transition would lag behind it (white on paper). */
.dh .dh-room { gap: 5px; padding: 0 12px; transition: none; }
.dh .dh-hash { color: var(--dh-hash); font-weight: 460; transition: color .2s var(--dh-ease); }
/* Reserves the heavier width so names never shift when the weight changes. */
.dh .dh-name { display: inline-flex; flex-direction: column; align-items: flex-start; transition: font-weight .2s var(--dh-ease); }
.dh .dh-name::after { content: attr(data-text); height: 0; visibility: hidden; overflow: hidden; font-weight: 560; pointer-events: none; user-select: none; }
.dh .dh-room[aria-current] .dh-name { font-weight: 560; }
.dh .dh-link { padding: 0 9px; color: var(--dh-quiet); }
.dh[data-over="hero"] .dh-room, .dh[data-over="hero"] .dh-link, .dh[data-over="hero"] .dh-menu-btn { text-shadow: 0 1px 1px rgb(0 24 56 / .3), 0 0 6px rgb(0 24 56 / .18); }
@media (hover: hover) and (pointer: fine) {
  .dh .dh-room:hover .dh-hash { color: inherit; }
  .dh .dh-link:hover { color: var(--dh-ink); }
}

/* Presence: one live dot in the gap before the room you are in. It pops in
   where it is needed and hops over the names to the next room (script). */
.dh .dh-here {
  position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 1px rgb(20 52 30 / .4);
  translate: var(--x, 0px) 0; scale: 0; opacity: 0; pointer-events: none;
  transition: scale .34s var(--ease-spring), opacity .2s var(--ease-out);
}
.dh[data-over="hero"] .dh-here { box-shadow: 0 0 0 1.5px rgb(0 30 60 / .3); }
.dh .dh-here.is-on { scale: 1; opacity: 1; }

/* ---------- CTA: forest throughout ---------- */
.dh .top-cta { --h: 44px; padding: 0 18px; }


/* ---------- Menu button (below 1000px): opens the rooms sheet ---------- */
.dh .dh-menu-btn {
  display: none; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -11px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: inherit; transition: background-color .15s var(--dh-ease), transform .14s var(--ease-out);
}
.dh .dh-menu-btn svg { filter: drop-shadow(0 1px 1px rgb(0 30 70 / .2)); }
.dh[data-over="paper"] .dh-menu-btn svg { filter: none; }
.dh .dh-menu-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .dh[data-over="paper"] .dh-menu-btn:hover { background: rgb(var(--ink-rgb) / .055); }
  .dh[data-over="hero"] .dh-menu-btn:hover { background: rgb(255 255 255 / .12); }
}

/* Focus rings follow the surface. */
.dh .dh-room:focus-visible, .dh .dh-link:focus-visible { outline-offset: -3px; }
.dh[data-over="hero"] .dh-bar :focus-visible { outline: 2px solid rgb(255 255 255 / .92); }

@media (max-width: 1099px) {
  .dh-nav { gap: 12px; margin-right: 4px; }
  .dh .dh-room { padding: 0 10px; }
  .dh .dh-link { padding: 0 7px; }
}
@media (max-width: 999px) {
  .dh .dh-nav { display: none; }
  .dh .dh-menu-btn { display: grid; }
  .dh .dh-bar { gap: 6px; }
  .dh .dh-mark { --logo-h: 22px; }
}
@media (max-width: 359px) {
  .dh .top-cta { padding: 0 12px; }
  .dh .dh-mark { --logo-h: 20px; }
}

/* ---------- Rooms sheet: the app's phone sidebar, sliding in from the left ---------- */
.dh-sheet {
  --dh-ink: var(--ink); --dh-hash: var(--ink-3); --dh-quiet: var(--ink-2);
  position: fixed; inset: 0; z-index: 2; color: var(--ink); text-shadow: none;
}
.dh-sheet .dh-scrim {
  position: absolute; inset: 0; background: rgb(var(--ink-rgb) / .18);
  opacity: 0; transition: opacity .22s var(--ease-in);
}
.dh-sheet .dh-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, calc(100vw - 56px));
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
  background: var(--paper-raised); border-right: 1px solid var(--line-2);
  box-shadow: 14px 0 44px rgb(17 24 19 / .12), 2px 0 6px rgb(17 24 19 / .04);
  transform: translate3d(calc(-100% - 2px), 0, 0); transition: transform .24s var(--ease-in);
}
.dh-sheet.is-open .dh-scrim { opacity: 1; transition: opacity .36s var(--ease-drawer); }
.dh-sheet.is-open .dh-panel { transform: none; transition: transform .36s var(--ease-drawer); }
.dh-sheet[data-dragging] .dh-panel, .dh-sheet[data-dragging] .dh-scrim { transition: none; }

.dh-sheet .dh-panel-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 8px 0 20px; }
.dh-sheet .dh-mark { margin: 0; --logo-h: 22px; }
.dh .dh-close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--ink-2); transition: background-color .14s var(--ease-out), color .14s, transform .14s var(--ease-out);
}
.dh .dh-close:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .dh .dh-close:hover { background: rgb(var(--ink-rgb) / .055); color: var(--ink); } }

.dh-sheet .dh-panel-nav { flex: none; padding-bottom: 8px; }
.dh-sheet .dh-sec { margin: 10px 0 6px; padding: 0 22px; font: 400 11px/1.4 var(--f-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dh-sheet .dh-rows { display: grid; gap: 2px; padding: 0 10px; }
.dh .dh-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  font: 520 15px/1.2 var(--f-text); letter-spacing: .005em; color: var(--ink); transition: background-color .14s var(--ease-out);
}
.dh .dh-ic { flex: none; width: 18px; display: grid; place-items: center; color: var(--ink-3); }
.dh .dh-ic.dh-hash { font: 600 16px/1 var(--f-text); }
.dh .dh-row-name { flex: none; white-space: nowrap; }
.dh .dh-row-note { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 460 12.5px/1.2 var(--f-text); color: var(--ink-3); }
.dh .dh-spot {
  flex: none; width: 6px; height: 6px; margin-left: auto; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 1px rgb(20 52 30 / .4); scale: 0; transition: scale .3s var(--ease-spring);
}
.dh .dh-row[aria-current] { background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); }
.dh .dh-row[aria-current] .dh-spot { scale: 1; }
.dh-sheet.is-open .dh-row[aria-current] .dh-spot { transition-delay: .22s; }
.dh .dh-row-quiet { font-weight: 480; color: var(--ink-2); }
.dh .dh-row:focus-visible { outline-offset: -2px; border-radius: 10px; }
.dh .dh-row:active { background: rgb(var(--ink-rgb) / .07); }
@media (hover: hover) and (pointer: fine) { .dh .dh-row:not([aria-current]):hover { background: rgb(var(--ink-rgb) / .045); } }
.dh-sheet .dh-rule { display: block; height: 1px; margin: 12px 22px; background: var(--line-2); }
.dh-sheet .dh-panel-foot { margin-top: auto; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }
.dh-sheet .dh-panel-cta { --h: 46px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dh .dh-here, .dh-sheet .dh-panel, .dh-sheet .dh-scrim, .dh .dh-spot { transition: none !important; }
}

/* docs */
/* Docs (usedayroom.com/docs): the home page's header and footer around a guide
   built from the home page's own parts. Each topic is a room (#claude, #webhooks)
   with the chapter chip and presence dot, steps are Works checklists like the
   drawer's "Try it", side notes are its info pills and troubleshooting is the
   FAQ's accordion. */

/* The page you are on, in the header's quiet links. */
.dh .dh-link[aria-current="page"] { color: var(--dh-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgb(var(--ink-rgb) / .3); }

/* ---------- Hero: paper, not sky ---------- */
.docs-hero { padding: calc(var(--header-h) + 72px) 0 72px; }
.docs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 64px; align-items: center; }
.docs-title { margin-top: 14px; font-size: 48px; line-height: 1.06; font-weight: 430; letter-spacing: -.016em; text-wrap: balance; }
.docs-title .dim { display: block; }
.docs-hero .lede { margin-top: 18px; max-width: 540px; }
.docs-paths { display: grid; gap: 8px; margin-top: 28px; max-width: 520px; }
.docs-path { text-decoration: none; color: inherit; }
.docs-path .label { font-size: 15px; }
.docs-path .arrow { color: var(--ink-3); transition: transform .2s var(--ease-out), color .2s; }
@media (hover: hover) and (pointer: fine) {
  .docs-path:hover { background: #fff; border-color: rgb(0 0 0 / .16); }
  .docs-path:hover .arrow { transform: translateX(2px); color: var(--ink); }
}

/* The approval Dayroom shows, as an illustration. */
.docs-consent-well { padding: 28px; }
.docs-consent-card { max-width: 320px; margin: 0 auto; padding: 20px 22px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.docs-consent-card .eyebrow { color: var(--forest-2); }
.docs-consent-h { margin-top: 6px; font-size: 20px; line-height: 1.2; font-weight: 520; color: var(--ink); }
.docs-consent-p { margin-top: 6px; }
.docs-consent-p b, .docs-consent-check b { font-weight: 560; color: var(--ink); }
.docs-consent-label { margin-top: 14px; font-weight: 560; color: var(--ink); }
.docs-consent-opt, .docs-consent-check { display: flex; align-items: center; gap: 9px; margin-top: 7px; padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
.docs-consent-check { align-items: flex-start; }
.docs-consent-check b { display: block; }
.docs-radio { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px rgb(var(--ink-rgb) / .34); }
.docs-consent-opt.is-on .docs-radio { box-shadow: inset 0 0 0 3.5px var(--forest-2); }
.docs-tick { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 3px; background: var(--forest-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M5 0h1v1H5zM4 1h1v1H4zM0 2h1v1H0zM3 2h1v1H3zM1 3h1v1H1zM2 3h1v1H2z'/%3E%3C/svg%3E") center / 8px no-repeat; }
.docs-consent-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.docs-consent-actions .btn { --h: 32px; padding: 0 14px; font-size: 13px; }

/* ---------- Layout: rooms down the side, topics beside them ---------- */
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; align-items: start; padding-bottom: 112px; }
.docs-body { min-width: 0; max-width: 760px; }

.docs-nav { position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.docs-nav::-webkit-scrollbar { display: none; }
.docs-nav-label { margin: 0 0 8px; }
.docs-rooms + .docs-nav-label { margin-top: 26px; }
.docs-rooms { display: grid; gap: 1px; }
.docs-room {
  display: flex; align-items: center; gap: 3px; min-height: 32px; padding: 0 10px 0 20px; border-radius: 7px;
  font: 460 14px/1.2 var(--f-text); color: var(--ink-3); text-decoration: none; transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.docs-hash { color: var(--ink-3); opacity: .8; }
.docs-room[aria-current] { color: var(--ink); background: rgb(var(--ink-rgb) / .045); }
@media (hover: hover) and (pointer: fine) { .docs-room:hover { color: var(--ink-solid); } }
.docs-room:focus-visible { outline-offset: -2px; }
/* One presence dot beside the room you are reading, the way the header marks a chapter. */
.docs-nav { --y: 0px; }
.docs-here {
  position: absolute; left: 7px; top: 0; width: 6px; height: 6px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: var(--live); box-shadow: 0 0 0 1px rgb(20 52 30 / .4); transform: translateY(var(--y)) scale(.4);
  transition: transform .45s var(--ease-out), opacity .2s var(--ease-out);
}
.docs-here.is-on { opacity: 1; transform: translateY(var(--y)) scale(1); }

/* ---------- Topics ---------- */
.docs-group + .docs-group { margin-top: 112px; padding-top: 48px; border-top: 1px solid var(--line-2); }
.docs-group-label { margin-bottom: 40px; }
/* Beside the sidebar the first group is already named; on narrow screens the label stays. */
@media (min-width: 1000px) { .docs-group:first-child > .docs-group-label { display: none; } }
.docs-chapter { scroll-margin-top: calc(var(--header-h) + 24px); }
.docs-chapter + .docs-chapter { margin-top: 88px; }
.docs-h { margin-top: 16px; font-size: 34px; font-weight: 420; text-wrap: balance; }
.docs-chapter .lede { margin-top: 14px; max-width: 620px; }

/* Room chips, as the home page's chapters wear them (same values). */
.docs .room-chip, .docs-hero .room-chip {
  display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 7px; border-radius: var(--r-chip);
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--line);
  font: 400 11px/1 var(--f-pixel); letter-spacing: .03em; color: var(--ink); white-space: nowrap;
}
.docs .room-chip > [aria-hidden], .docs-hero .room-chip > [aria-hidden] { color: var(--ink-3); margin-right: 1px; }
.docs .room-tag { display: flex; align-items: center; gap: 10px; }
.docs .room-of { font: 460 13px/1 var(--f-text); color: var(--ink-3); white-space: nowrap; }
.docs .room-tag .room-chip::before {
  content: ""; flex: none; width: 0; height: 6px; margin-right: 0; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 1px rgb(20 52 30 / .4); scale: 0;
  transition: width .36s var(--ease-out), margin-right .36s var(--ease-out), scale .3s var(--ease-spring) .08s;
}
.docs-chapter[data-here] .room-tag .room-chip::before { width: 6px; margin-right: 6px; scale: 1; }

/* Code: an address, a command or a request in a sunk well, with its own Copy button. */
.docs-code { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 6px 6px 6px 16px; }
.docs-code code { flex: 1; min-width: 0; padding: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14px/1.6 var(--f-mono); color: var(--ink); }
.docs-copy { --h: 34px; flex: none; padding: 0 14px; font-size: 14px; }
.docs-copy[hidden] { display: none; }
.docs-pre { margin-top: 22px; }
.docs-pre-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 0 16px; min-height: 46px; }
.docs-pre-label { font: 400 11px/1 var(--f-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.docs-pre pre { margin: 0; padding: 6px 18px 18px; overflow-x: auto; font: 400 13px/1.7 var(--f-mono); color: var(--ink); tab-size: 2; }
.docs-chapter p code, .docs-chapter li code, .docs-chapter td code, .docs-note code {
  padding: 1px 5px; border-radius: var(--r-chip); background: var(--paper-sunk); font: 400 .88em/1.4 var(--f-mono); color: var(--ink); overflow-wrap: anywhere;
}
.docs-chapter td:first-child code { background: none; padding: 0; overflow-wrap: normal; }

/* Steps: a Works checklist, one unticked box per step (the drawer's "Try it"). */
.docs-how { margin-top: 24px; border-radius: var(--r-row); background: #fff; overflow: hidden; box-shadow: 0 0 0 .75px rgb(0 0 0 / .1), 0 1px 2px rgb(0 0 0 / .04); }
.docs-how-h { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 580 13px/1 var(--f-text); color: var(--ink); }
.docs-how-h .how-ico { width: 20px; height: 20px; display: grid; place-items: center; flex: none; border-radius: 5px; background: var(--forest); color: #fff; }
.docs-how-h .how-ico svg { width: 10px; height: 9px; display: block; shape-rendering: crispEdges; }
.docs-how-h .how-n { margin-left: auto; font: 400 10.5px/1 var(--f-mono); color: var(--ink-3); }
.docs-steps { display: grid; padding: 4px 0; }
.docs-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; font-size: 15px; line-height: 1.5; font-weight: 460; color: var(--ink); }
.docs-steps li + li { box-shadow: inset 0 1px 0 var(--line); }
.docs-steps b { font-weight: 580; }
.step-box { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 4px; box-shadow: inset 0 0 0 1.25px rgb(var(--ink-rgb) / .34); background: #fff; }
.step-t { min-width: 0; text-wrap: pretty; }

/* Notes: the drawer's info pill. */
.docs-note {
  display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; margin-top: 18px; padding: 12px 14px; border-radius: var(--r-row);
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.docs-note .note-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; image-rendering: pixelated; }

/* Cards, prompts and the two-sided privacy list */
.docs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.docs-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docs-card { padding: 16px 18px 18px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.docs-card-h { margin-bottom: 6px; font-size: 15px; font-weight: 560; color: var(--ink); }
.docs-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.docs-prompt { padding: 16px 18px; }
.docs-prompt-q { font-size: 15px; line-height: 1.45; font-weight: 520; color: var(--ink); }
.docs-you { display: inline-flex; align-items: center; height: 18px; margin-right: 8px; padding: 0 6px; border-radius: var(--r-chip); background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); font: 400 10px/1 var(--f-pixel); letter-spacing: .06em; color: var(--ink-3); vertical-align: 2px; }
.docs-prompt-a { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.docs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.docs-split-col { padding: 16px 18px 18px; }
.docs-label { font: 400 11px/1.4 var(--f-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.docs-list { display: grid; gap: 8px; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.docs-chapter > .docs-list { margin-top: 20px; max-width: 640px; }
.docs-list li { position: relative; padding-left: 18px; }
.docs-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; background: var(--forest-2); opacity: .75; }
.is-never .docs-list li::before { background: rgb(var(--ink-rgb) / .3); opacity: 1; }

/* Small product moments: a message sent through an app, and the Connected AI apps row. */
.docs-message, .docs-row-mock { margin-top: 22px; padding: 20px; }
.docs-message-card, .docs-row-card { display: flex; align-items: flex-start; gap: 12px; max-width: 520px; padding: 12px 14px; }
.docs-avatar, .docs-row-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--forest-2); color: #fff; font: 400 13px/1 var(--f-pixel); }
.docs-avatar.is-hook { background: var(--tile); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.docs-message-body { min-width: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.docs-message-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.docs-message-head b, .docs-row-name b { font-weight: 580; color: var(--ink); }
.docs-via, .docs-row-tag { padding: 0 5px; border-radius: 5px; background: var(--paper-sunk); color: var(--ink-3); font-size: 11px; font-weight: 520; line-height: 17px; }
.docs-message-head time { font: 400 11px/1 var(--f-mono); color: var(--ink-3); }
.docs-caption { margin-top: 12px; max-width: 620px; }
.docs-row-card { align-items: center; }
.docs-row-ico { font: 400 15px/1 var(--f-text); }
.docs-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.docs-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.docs-row-meta { font-size: 12.5px; color: var(--ink-3); }
.docs-row-btn { --h: 32px; padding: 0 12px; font-size: 13px; }

/* The webhook flow, as three small cards */
.docs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.docs-flow .card { padding: 10px 14px; font: 400 13px/1 var(--f-mono); color: var(--ink); }
.docs-flow b { color: var(--ink-3); font-weight: 400; }

/* Tables on a frame */
.docs-table { margin-top: 24px; }
.docs-pre pre:focus-visible, .docs-table-in:focus-visible { outline: 2px solid var(--forest-2); outline-offset: -2px; }
.docs-table-in { overflow-x: auto; border-radius: 10px; background: #fff; box-shadow: 0 0 0 .75px rgb(0 0 0 / .08); }
.docs-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; line-height: 1.5; }
.docs-table th { padding: 12px 14px; font: 400 11px/1.4 var(--f-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.docs-table td { padding: 11px 14px; color: var(--ink-2); vertical-align: top; }
.docs-table tr + tr td { border-top: 1px solid var(--line); }
.docs-table td:first-child { white-space: nowrap; color: var(--ink); font-family: var(--f-mono); font-size: 13px; }
.docs-scope { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-chip); font: 400 10.5px/1 var(--f-pixel); letter-spacing: .06em; }
.docs-scope.is-read { background: var(--tile); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.docs-scope.is-write { background: var(--forest-2); color: #fff; }

/* Troubleshooting: the FAQ's accordion (native details) */
.docs-faq { margin-top: 24px; border-top: 1px solid var(--line-2); }
.docs-faq-item { border-bottom: 1px solid var(--line-2); }
.docs-faq-q {
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 4px 14px 0; cursor: pointer; list-style: none;
  font: 480 17px/1.35 var(--f-text); color: var(--ink); border-radius: 6px; -webkit-user-select: none; user-select: none;
}
.docs-faq-q::-webkit-details-marker { display: none; }
.docs-faq-q::marker { content: ""; }
.docs-faq-num { flex: none; width: 22px; font: 400 11px/1 var(--f-mono); color: var(--ink-3); transform: translateY(1px); }
.docs-faq-text { flex: 1; min-width: 0; text-wrap: pretty; }
.docs-faq-icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-btn); color: var(--ink-2); background: var(--paper-raised);
  box-shadow: 0 0 0 .75px rgb(var(--ink-rgb) / .13), 0 1px 2px rgb(0 0 0 / .06), inset 0 1px #fff;
}
.docs-faq-icon svg { transition: transform .5s var(--ease-spring); }
.docs-faq-item[open] .docs-faq-icon svg { transform: rotate(135deg); }
@media (hover: hover) and (pointer: fine) { .docs-faq-q:hover .docs-faq-icon { background: #fff; color: var(--ink-solid); } }
.docs-faq-a p { max-width: 600px; padding: 0 56px 22px 38px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Narrower screens ---------- */
@media (max-width: 999px) {
  .docs-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .docs-consent { max-width: 460px; }
  .docs-layout { display: block; }
  /* The rooms become a strip you can swipe, held under the header. */
  .docs-nav {
    position: sticky; top: var(--header-h); z-index: 5; max-height: none; display: flex; align-items: center; gap: 4px;
    margin: 0 calc(var(--gutter) * -1) 40px; padding: 10px var(--gutter); overflow-x: auto; overflow-y: hidden;
    background: rgb(244 244 239 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line-2);
  }
  .docs-nav-label { display: none; }
  .docs-rooms { display: flex; gap: 4px; }
  .docs-rooms + .docs-nav-label + .docs-rooms { margin-left: 10px; padding-left: 10px; box-shadow: inset 1px 0 0 var(--line-2); }
  .docs-room { flex: none; min-height: 36px; padding: 0 10px; white-space: nowrap; }
  .docs-here { display: none; }
  .docs-chapter { scroll-margin-top: calc(var(--header-h) + 72px); }
}
@media (max-width: 767px) {
  .docs-hero { padding: calc(var(--header-h) + 40px) 0 48px; }
  .docs-title { font-size: 34px; line-height: 1.1; }
  .docs-h { font-size: 27px; line-height: 1.16; }
  .docs-chapter + .docs-chapter { margin-top: 72px; }
  .docs-group + .docs-group { margin-top: 88px; }
  .docs-cards, .docs-cards-2, .docs-prompts, .docs-split { grid-template-columns: minmax(0, 1fr); }
  .docs-consent-well, .docs-message, .docs-row-mock { padding: 14px; }
  .docs-faq-a p { padding: 0 8px 20px 38px; }
  .docs-row-card { flex-wrap: wrap; }
  .docs-row-btn { margin-left: 44px; }
}
@media (pointer: coarse) { .docs-copy { --h: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .docs-here, .docs .room-tag .room-chip::before, .docs-faq-icon svg { transition: none; }
}

/* REST reference uses the existing docs wells, tables and chapter rhythm. */
.docs-rest-subtitle { margin-top: 28px; font-size: 19px; line-height: 1.4; color: var(--ink); }
.docs-rest .docs-p { margin-top: 16px; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.docs-rest .docs-p a, .docs-rest li a { text-decoration: underline; text-underline-offset: 3px; }
.docs-rest code { overflow-wrap: anywhere; }
.docs-rest .docs-p code, .docs-rest li code { font: 400 13px/1.5 var(--f-mono); background: var(--paper-sunk); border-radius: var(--r-chip); padding: 2px 4px; }
.docs-rest-steps { list-style: decimal; padding-left: 24px; margin-top: 22px; color: var(--ink-2); }
.docs-rest-steps li { padding-left: 4px; margin: 12px 0; }
.docs-rest-note { margin-top: 24px; padding: 20px 22px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.docs-rest-endpoint { border-bottom: 1px solid var(--line-2); padding: 12px 0 20px; margin-top: 12px; }
.docs-rest-endpoint summary { cursor: pointer; padding: 12px 0; line-height: 1.6; }
.docs-rest-endpoint summary code { font: 400 13px/1.6 var(--f-mono); }
.docs-rest-endpoint .docs-table { margin-top: 18px; }
.docs-rest .docs-table td:first-child { white-space: normal; min-width: 110px; }
.docs-rest .docs-table table { min-width: 440px; }

/* Direct access stays visible beside the reference navigation. */
.docs-token-action { margin-top: 24px; }
.docs-token-action .btn { gap: 10px; }
.docs-token-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; margin-bottom: 22px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper-raised); color: var(--forest); font-size: 14px; text-decoration: none; }
.docs-token-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* sections/90-footer */
/* Footer: the finale on paper. The closing line and the links up top; below
   them, your spot in the park: your status, in a card of liquid glass floating
   over a living pixel meadow (core/30-park.js, preset footer-grass), its tail
   reaching down to your own character, who acts out the status you pick. */
.foot {
  /* Dayroom's presence colours, as the app paints them (client-source window.css --st-*). */
  --st-available: #3DAA6D; --st-working: #E3A33B; --st-dnd: #E05A4F; --st-away: #A3ABA6;
  --foot-quiet: rgb(var(--ink-rgb) / .64);
  position: relative; isolation: isolate; overflow: clip;
  padding-top: 104px; background: var(--paper);
}

/* ---- Closing line and links ------------------------------------------- */
.foot .foot-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: start; }
.foot .foot-head { min-width: 0; }
.foot .foot-title { font-size: 42px; line-height: 1.12; }
.foot .foot-title .dim { color: rgb(var(--ink-rgb) / .52); }
.foot .foot-line { display: block; }
.foot .foot-cta { margin-top: 28px; }

/* One chip glides between links (JS); without script each link draws its own chip. */
.foot .foot-nav {
  position: relative; isolation: isolate; justify-self: end; align-self: start;
  display: flex; flex-wrap: wrap; column-gap: 72px; row-gap: 32px; max-width: 100%; padding-top: 8px;
}
.foot .foot-col { min-width: 0; }
.foot .foot-col-title {
  margin: 0 0 14px; font: 400 11px/1.4 var(--f-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--foot-quiet);
}
.foot .foot-list { display: grid; gap: 2px; justify-items: start; }
.foot .foot-link {
  position: relative; display: inline-flex; align-items: center; min-height: 30px;
  font: 460 15px/1.4 var(--f-text); letter-spacing: .01em; color: var(--ink-2);
  transition: color .18s var(--ease-out);
}
.foot .foot-link::before {
  content: ""; position: absolute; inset: 2px -6px; z-index: -1; border-radius: var(--r-chip);
  background: rgb(231 231 225 / .9); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .06);
  opacity: 0; transition: opacity .18s var(--ease-out);
}
.foot .foot-link:focus-visible { outline: none; }
.foot .foot-link:focus-visible::before { opacity: 1; box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / .8); }
.foot .foot-chip {
  position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0; border-radius: var(--r-chip);
  background: rgb(231 231 225 / .9); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .06);
  opacity: 0; pointer-events: none;
  transition: transform .26s var(--ease-out), width .26s var(--ease-out), height .26s var(--ease-out), opacity .16s var(--ease-out);
}
.foot .foot-chip.is-on { opacity: 1; }
.foot .foot-chip.is-snap { transition: opacity .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .foot .foot-link:hover { color: var(--ink-solid); }
  .foot .foot-nav:not(.is-glide) .foot-link:hover::before { opacity: 1; }
}
.foot .foot-nav.is-glide .foot-link.is-chip { color: var(--ink-solid); }

/* ---- Your spot in the park --------------------------------------------- */
/* The glass card sits right above you, its tail pointing straight down at your
   head (the user, 2026-10-24: the card belongs on top of your character on
   desktop too). Script sets --tuck (how far the card's bottom edge reaches into
   the meadow) and slides the meadow so you stand under the card's centre.
   --meadow-h is 70 world rows at the hero's own pixel scale. */
.foot .foot-scene { position: relative; margin-top: 72px; }
.foot .foot-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; column-gap: 32px;
  margin-bottom: calc(-1 * var(--tuck, 0px));
}

/* ---- Your status, in liquid glass ----------------------------------------- */
/* The user, 2026-10-24: "The status should have this liquid glass feel". A pane
   of frosted glass over the meadow: the grass, flowers and passers-by show
   through it blurred and brightened; a thin bright rim that catches the light
   top-left, a brighter specular top edge, a sheen across the top third and a
   faint shade along the bottom; a soft green shadow on the grass. The tail is
   the same glass and reaches down to your character. This is the one place the
   page blurs (core's pixel finish holds everywhere else), and the presence dots
   inside stay crisp, stepped pixels. Script draws the outline (tail included);
   without it the card is a plain rounded pane of the same glass. */
.foot .foot-stage { grid-column: 2; width: 404px; max-width: 100%; }
.foot .fs {
  --fs-dot: var(--st-available);
  /* The glass tint thickens as the meadow darkens, so text keeps AA contrast at any hour. */
  --glass: rgb(255 255 255 / .34);
  --glass-hi: rgb(255 255 255 / .6);
  --glass-ink-2: rgb(var(--ink-rgb) / .88);
  --glass-ink-3: rgb(var(--ink-rgb) / .84);
  position: relative; padding: 8px 8px 6px; border-radius: 24px;
}
.foot .fs[data-glass="dusk"] { --glass: rgb(255 255 255 / .46); --glass-hi: rgb(255 255 255 / .66); }
.foot .fs[data-glass="night"] { --glass: rgb(250 252 250 / .56); --glass-hi: rgb(255 255 255 / .72); }
.foot .fs[data-status="focusing"] { --fs-dot: var(--st-working); }
.foot .fs[data-status="call"] { --fs-dot: var(--st-dnd); }
.foot .fs[data-status="off"] { --fs-dot: var(--st-away); }
.foot .fs-head, .foot .fs-set { position: relative; z-index: 3; }

.foot .fs-glass {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: 24px; background-color: var(--glass);
  background-image: linear-gradient(rgb(255 255 255 / .4), rgb(255 255 255 / .12) 20%, rgb(255 255 255 / 0) 46%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
  backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .64), inset 0 1.5px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(23 58 36 / .1),
    0 1px 2px rgb(20 48 30 / .14), 0 18px 34px -14px rgb(22 70 38 / .34);
  transition: background-color .9s var(--ease-out);
}
/* Shaped by script: the outline (tail included) clips the glass; the SVG layers paint the light. */
.foot .fs-shade, .foot .fs-rim { position: absolute; left: 0; top: 0; display: none; max-width: none; overflow: visible; pointer-events: none; }
.foot .fs.is-shaped .fs-shade, .foot .fs.is-shaped .fs-rim { display: block; }
.foot .fs.is-shaped .fs-glass { inset: auto; border-radius: 0; background-image: none; box-shadow: none; }
.foot .fs-shade { z-index: 0; }
.foot .fs-rim { z-index: 2; }
.foot .fs-shade-soft { fill: rgb(22 72 40 / .3); }
.foot .fs-shade-touch { fill: rgb(20 48 30 / .17); }

/* Header: the app's own user panel (picture with a presence dot, name, status). */
.foot .fs-head { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; }
.foot .fs-head::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px;
  background: rgb(var(--ink-rgb) / .08); box-shadow: 0 1px 0 rgb(255 255 255 / .6);
}
.foot .fs-face { position: relative; flex: none; width: 56px; height: 56px; }
.foot .fs-portrait {
  display: block; width: 56px; height: 56px; max-width: none; border-radius: 14px; image-rendering: pixelated;
  background: var(--paper-sunk); box-shadow: 0 1px 2px rgb(20 48 30 / .16), 0 4px 10px -4px rgb(20 48 30 / .22);
}
.foot .fs-face::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), inset 0 1px 0 1px rgb(255 255 255 / .35);
}
/* Presence: a stepped pixel dot in a white ring, its colour switched in one step. */
.foot .fs-dot {
  position: absolute; right: -4px; bottom: -4px; z-index: 1; width: 16px; height: 16px; background: #fff;
  clip-path: polygon(4px 0, 12px 0, 12px 2px, 14px 2px, 14px 4px, 16px 4px, 16px 12px, 14px 12px, 14px 14px, 12px 14px, 12px 16px, 4px 16px, 4px 14px, 2px 14px, 2px 12px, 0 12px, 0 4px, 2px 4px, 2px 2px, 4px 2px);
}
.foot .fs-dot::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background: var(--fs-dot);
  clip-path: polygon(2px 0, 10px 0, 10px 2px, 12px 2px, 12px 10px, 10px 10px, 10px 12px, 2px 12px, 2px 10px, 0 10px, 0 2px, 2px 2px);
}
.foot .fs-who { min-width: 0; flex: 1; }
.foot .fs-name { position: relative; display: flex; align-items: center; gap: 10px; min-height: 26px; font: 560 15px/1.3 var(--f-text); letter-spacing: .005em; color: var(--ink-solid); }
.foot .fs-line { display: flex; align-items: center; margin-top: 1px; font: 480 13px/1.4 var(--f-text); color: var(--glass-ink-3); }
/* "See you tomorrow.": a brighter drop of glass beside your name that pops in two 12fps frames. */
.foot .fs-say {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  visibility: hidden; transform-origin: 0 50%; pointer-events: none; white-space: nowrap;
  font: 500 13px/1 var(--f-text); letter-spacing: .005em; color: var(--ink-solid);
  background: rgb(255 255 255 / .78);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgb(var(--ink-rgb) / .1), 0 1px 2px rgb(20 48 30 / .14), 0 6px 12px -6px rgb(20 48 30 / .3);
}
.foot .fs-say.is-up { visibility: visible; }

/* Options: native radios (arrow keys move between them), 44px pills, two by two,
   each led by a small pixel icon. The chosen pill is a brighter drop of glass.
   No status-coloured dots here: your portrait's corner dot is the card's one
   presence dot (the user, 2026-10-24: "i am noticing two green dots"). */
.foot .fs-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.foot .fs-legend {
  float: left; width: 100%; padding: 12px 10px 7px;
  font: 400 11px/1.4 var(--f-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--glass-ink-3);
}
.foot .fs-opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.foot .fs-opt {
  position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; cursor: pointer;
  font: 480 15px/1.3 var(--f-text); color: var(--glass-ink-2);
  transition: background-color .18s var(--ease-out), box-shadow .18s var(--ease-out), color .18s var(--ease-out);
}
.foot .fs-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border-radius: 999px; }
.foot .fs-ico { justify-self: center; width: 11px; height: 11px; color: var(--glass-ink-3); shape-rendering: crispEdges; }
.foot .fs-opt:has(.fs-radio:checked) {
  background-color: var(--glass-hi); color: var(--ink-solid);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .5), inset 0 -1px 0 rgb(23 58 36 / .06),
    0 1px 2px rgb(20 48 30 / .12), 0 6px 14px -8px rgb(20 48 30 / .3);
}
.foot .fs-opt:has(.fs-radio:checked) .fs-ico { color: var(--ink-2); }
.foot .fs-opt:has(.fs-radio:focus-visible) { outline: 2px solid rgb(var(--ink-rgb) / .82); outline-offset: 1px; }
/* High-contrast modes drop the glass, so the chosen option keeps an outline. */
@media (forced-colors: active) { .foot .fs-opt:has(.fs-radio:checked) { outline: 2px solid CanvasText; outline-offset: -2px; } }
@media (hover: hover) and (pointer: fine) {
  .foot .fs-opt:hover:not(:has(.fs-radio:checked)) { background-color: rgb(255 255 255 / .26); color: var(--ink); }
}
/* Without backdrop blur the glass would let busy grass through: use a near-solid pane instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .foot .fs, .foot .fs[data-glass] { --glass: rgb(251 251 248 / .96); --glass-hi: #fff; }
}
/* ---- The meadow -------------------------------------------------------- */
/* The engine draws the world at its own resolution (canvas = world window) and
   CSS scales it by the hero's exact integer device ratio, anchored bottom-left.
   Its top rows are the page's own paper, where heads and butterflies pass. */
.foot .foot-meadow {
  position: relative; overflow: hidden;
  height: calc(var(--meadow-h, 280px) + env(safe-area-inset-bottom, 0px));
}
.foot .foot-grass { position: absolute; left: 0; bottom: 0; display: block; max-width: none; image-rendering: pixelated; }
.foot .foot-meadow:not([data-painted]) .foot-grass { visibility: hidden; }
/* Until the engine paints (or without script): a stepped meadow in the page's grass palette. */
.foot .foot-meadow:not([data-painted])::before {
  content: ""; position: absolute; left: 0; right: 0; top: 24%; bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 40' shape-rendering='crispEdges'%3E%3Cpath fill='%23a6d46e' d='M2 19h1v1h-1zM18 19h1v1h-1zM27 19h1v1h-1zM35 19h1v1h-1zM56 19h1v1h-1zM65 19h1v1h-1zM70 19h1v1h-1zM80 19h1v1h-1zM3 20h1v1h-1zM11 20h2v1h-2zM19 20h1v1h-1zM34 20h1v1h-1zM44 20h3v1h-3zM54 20h1v1h-1zM57 20h2v1h-2zM64 20h1v1h-1zM68 20h2v1h-2zM71 20h1v1h-1zM81 20h1v1h-1zM84 20h2v1h-2zM87 20h1v1h-1z'/%3E%3Cpath fill='%2372b34f' d='M2 21h1v1h-1zM18 21h1v1h-1zM27 21h1v1h-1zM35 21h1v1h-1zM56 21h1v1h-1zM65 21h1v1h-1zM70 21h1v1h-1zM80 21h1v1h-1zM1 22h3v1h-3zM11 22h3v1h-3zM17 22h3v1h-3zM26 22h3v1h-3zM34 22h3v1h-3zM44 22h5v1h-5zM54 22h5v1h-5zM63 22h4v1h-4zM68 22h5v1h-5zM79 22h3v1h-3zM83 22h5v1h-5z'/%3E%3C/svg%3E") 0 -40px / 176px 80px repeat-x,
    linear-gradient(transparent 4px, #93ca5f 4px 10px, #73ab4d 10px 34%, #5a944e 34% 69%, #1a3529 69% 74%, #3e6a40 74%);
}

/* ---- Narrower screens ---------------------------------------------------- */
@media (max-width: 1099px) { .foot .foot-nav { column-gap: 56px; } .foot .foot-inner { column-gap: 48px; } }
@media (max-width: 899px) {
  .foot .foot-nav { column-gap: 40px; }
  .foot .foot-title { font-size: 36px; }
  .foot .foot-stage { width: 384px; }
}
/* Phones: the closing line, the links, the small print, then your card just above the meadow. */
@media (max-width: 767px) {
  .foot { padding-top: 80px; }
  .foot .foot-inner { grid-template-columns: minmax(0, 1fr); }
  .foot .foot-title { font-size: 30px; line-height: 1.15; }
  .foot .foot-cta { margin-top: 24px; }
  .foot .foot-nav {
    justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px;
    width: 100%; margin-top: 52px; padding-top: 0;
  }
  .foot .foot-col-product { grid-row: span 2; }
  .foot .foot-scene { margin-top: 44px; }
  .foot .foot-row { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .foot .foot-stage { grid-column: 1; justify-self: center; width: 100%; max-width: 420px; }
}
@media (max-width: 419px) {
  .foot .fs-opt { padding: 0 8px 0 12px; }
  .foot .fs-head { gap: 10px; padding-inline: 6px; }
}
@media (pointer: coarse) {
  .foot .foot-link { min-height: 44px; }
  .foot .foot-list { gap: 0; }
}