/*
 * The marketing site's shared structure: fonts, type, buttons, header, menu, footer, the theme
 * control and the device drawings. Colour comes only from theme.colors.css (generated from the
 * tokens); nothing here holds a hex except device bezels, the play button and artwork, which
 * the design draws as literal and which do not theme.
 *
 * Breakpoints are in em so they move with the reader's text size, which is the token ladder's
 * "effective width" rule: 56.5625em is breakpoint.expanded (905px at 16px).
 */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-700.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-800.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/newsreader-300.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400-italic.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}
html {
  background: var(--background);
  /* Keep the scrollbar's room, so locking the page under a dialog never shifts it sideways. */
  scrollbar-gutter: stable;
}
/* While any modal dialog is open the page behind it stays still, and scrolling inside the
   dialog never passes through to the page (Clinton's review, 29 September 2026). */
html:has(dialog[open]) {
  overflow: hidden;
}
dialog {
  overscroll-behavior: contain;
}
body {
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--background);
  color: var(--textPrimary);
  font-size: 18px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a {
  color: var(--textPrimary);
}
a:hover {
  color: var(--textAccent);
}
img {
  max-width: 100%;
}
:focus-visible {
  outline: 2px solid var(--focusRing);
  outline-offset: 2px;
}
/* A heading or panel that script focuses (a dialog's title, a step's heading, the first new
   item on a wall) is where reading starts, not a control, so it takes no ring; browsers
   otherwise draw one on it after a keyboard-like interaction (Clinton's review, 29 September
   2026). Controls with a roving tabindex, such as the console's tabs, keep theirs. */
[tabindex="-1"]:not(a, button, input, select, textarea, [role="tab"]):focus {
  outline: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[hidden] {
  /* biome-ignore lint/complexity/noImportantStyles: `hidden` must beat every component's own display, or a hidden step stays on screen. */
  display: none !important;
}

/* Type */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--textAccent);
}
.display,
.h1,
.h2,
.h3-serif {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
.h1 {
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.h2 {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
}
.h2-sm {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  margin: 0;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.1;
}
.lede {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  max-width: 34em;
  text-wrap: pretty;
}
.muted {
  color: var(--textSecondary);
}
.small {
  font-size: 16px;
}
.pretty {
  text-wrap: pretty;
}

/* Layout */
main {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* A device drawing's no-script scale can be wider than a phone; never scroll sideways. */
  overflow-x: clip;
}
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}
.section {
  padding: 0 20px 48px;
}
.stack {
  display: flex;
  flex-direction: column;
}

/* Buttons: pills, 48 minimum, 56 for the large call to action. */
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 100px;
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: var(--strong) solid var(--borderStrong);
  background: var(--surface);
  color: var(--textPrimary);
}
.btn:hover {
  color: var(--textPrimary);
  background: var(--hoverTint);
}
.btn-primary {
  background: var(--primaryAction);
  color: var(--onPrimaryAction);
  border-color: var(--primaryAction);
}
.btn-primary:hover {
  background: var(--primaryActionHover);
  border-color: var(--primaryActionHover);
  color: var(--onPrimaryAction);
}
.btn-lg {
  min-height: 56px;
  padding: 0 28px;
  font-size: 19px;
}
.btn-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* Skip link: first focusable element on every page. */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
}
.skip:focus {
  left: 12px;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: var(--hair) solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--textPrimary);
  min-height: 48px;
}
.brand:hover {
  color: var(--textPrimary);
}
.wordmark {
  font-size: 20px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wordmark b {
  font-weight: 800;
}
.wordmark span {
  font-weight: 400;
  color: var(--wellness);
}
.nav-main,
.header-actions {
  display: none;
  align-items: center;
  flex-wrap: wrap;
}
.nav-main {
  gap: 6px;
}
.header-actions {
  gap: 10px;
}
/* The header's main action changes label by page ("Get a launch invitation", "Start my free
   trial", "Talk to us"). One minimum width, the longest label's, keeps the actions the same width
   on every page, so the links between the logo and the actions never move as you go from page to
   page (Clinton's review, 3 October 2026). Shorter labels sit centred. */
.header-actions .btn-primary {
  min-width: 13.5em;
  justify-content: center;
}
.nav-main a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
}
.nav-main a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.header-phone {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.header-phone .signin {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.menu-button {
  min-height: 48px;
  min-width: 48px;
  gap: 6px;
  padding: 0 12px;
  font-size: 16px;
  white-space: nowrap;
}
.site-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 20px;
  background: var(--surface);
  border-bottom: var(--hair) solid var(--border);
}
.site-menu > a:not(.btn) {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  border-bottom: var(--hair) solid var(--divider);
}
.site-menu .btn {
  margin-top: 10px;
  min-height: 52px;
}
.site-menu .theme-control {
  margin-top: 8px;
}
@media (min-width: 56.5625em) {
  .nav-main,
  .header-actions {
    display: flex;
  }
  .header-phone,
  .site-menu {
    display: none;
  }
}

/* Theme control: a real radio group with a visible "Selected" word, never colour alone. */
.theme-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.theme-control legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--textSecondary);
}
.theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.theme-option {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: var(--textPrimary);
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.theme-option input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--positive);
  flex: none;
}
.theme-option:has(input:checked) {
  background: var(--selectedTint);
  border-color: var(--positive);
}
.theme-option .selected-word {
  font-weight: 600;
  color: var(--textSecondary);
}
.theme-option:has(input:focus-visible) {
  outline: 2px solid var(--focusRing);
  outline-offset: 2px;
}

/* Footer */
.site-footer {
  margin-top: auto;
  padding: 28px 20px 40px;
  background: var(--surface);
  border-top: var(--hair) solid var(--border);
}
.site-footer .wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
}
.footer-nav-main,
.footer-nav-minor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}
.footer-nav-minor {
  font-size: 15px;
  color: var(--textSecondary);
}
.footer-nav-minor a {
  color: var(--textSecondary);
}
.footer-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-note {
  margin: 0;
}
.footer-nav a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
/* The mark alone, first in the footer links, as a quiet way home (Clinton's review, 29
   September 2026). A 48px target around a 28px mark; its name is in words for a screen
   reader, and its dots take the text colour so it holds in all three themes. */
.footer-nav a.footer-home {
  min-width: 48px;
  justify-content: center;
  color: var(--textPrimary);
}

/* FAQ: an accordion in one column at a reading width, so opening a question never leaves a
   hole beside it; generous padding; and a plus that becomes a minus, so "this opens" is shown
   by shape as well as by the question itself. */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 880px;
}
.faq {
  border-radius: 18px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.faq[open] {
  border-color: var(--borderStrong);
}
.faq summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 18px 24px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  border-radius: 18px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--textAccent);
}
.faq summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--strong) solid var(--borderStrong);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
}
.faq[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
}
/* The answer: every child of the details after the question, however many paragraphs or
   lists it has, shares the side padding; the last one closes the card. */
.faq > :not(summary) {
  margin: 0;
  padding: 0 24px;
}
.faq > :not(summary) + :not(summary) {
  margin-top: 10px;
}
.faq > :last-child:not(summary) {
  padding-bottom: 22px;
}
.faq p {
  color: var(--textSecondary);
  font-size: 18px;
  text-wrap: pretty;
}
.cta-band {
  max-width: 880px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.cta-band .btn {
  flex: none;
}
.cta-band span {
  flex: 2 1 240px;
  font-weight: 600;
}

/*
 * Device drawings. Each is drawn at real device points and reduced WHOLE (CLAUDE.md,
 * "Devices are drawn at approved sizes"): the outer box keeps the aspect ratio, the inner
 * box is the device at 1:1, and site.js sets --s from the outer box's width. Without script
 * the fallback scale is a reasonable desktop value, and the drawing is an illustration with
 * its own label, so nothing is lost to a reader.
 */
/*
 * The bezel is artwork, drawn in Ink as the design draws it. In dark Ink IS the surface, so an
 * Ink device vanished into its section (Clinton, 29 September 2026). Dark re-thinks it rather
 * than recolouring: a near-black body, which cannot separate from a dark page on its own
 * (1.1 to 1.2:1), with a light rim that carries the outline at 3.27:1 or more on every dark
 * ground (background, surface, surfaceAlt). Light and high contrast keep Ink on a light page.
 */
:root {
  --bezel: #241f27;
  --bezelRim: var(--borderStrong);
  --phoneBezel: #1a161c;
  --phoneBezelRim: #4a4550;
}
[data-theme="dark"] {
  --bezel: #0c0a0e;
  --bezelRim: #7a7180;
  --phoneBezel: #0c0a0e;
  --phoneBezelRim: #7a7180;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bezel: #0c0a0e;
    --bezelRim: #7a7180;
    --phoneBezel: #0c0a0e;
    --phoneBezelRim: #7a7180;
  }
}
.device {
  width: 100%;
  position: relative;
}
.device > .device-body {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  transform: scale(var(--s, 0.44));
}
.device-ipad {
  aspect-ratio: 1286 / 926;
}
.device-ipad > .device-body {
  width: 1286px;
  height: 926px;
  background: var(--bezel);
  border-radius: 81px;
  padding: 53px;
  box-shadow:
    0 0 0 2px var(--bezelRim),
    0 50px 90px -55px rgba(36, 31, 39, 0.6);
}
.device-ipad .camera {
  position: absolute;
  top: 20.5px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #0b0a0c;
  box-shadow: inset 0 0 0 3px #2e2a31;
}
.device-ipad .screen {
  width: 1180px;
  height: 820px;
  background: var(--background);
  color: var(--textPrimary);
  border-radius: 28px;
  overflow: hidden;
}
.device-phone {
  aspect-ratio: 390 / 822;
}
.device-phone > .device-body {
  width: 390px;
  height: 822px;
  background: var(--bezel);
  border-radius: 56px;
  padding: 11px;
  box-shadow:
    0 0 0 2px var(--bezelRim),
    0 40px 70px -45px rgba(36, 31, 39, 0.6);
}
/* High contrast takes no shadow, as `--shadow1` and `--shadow2` say: the rim carries the edge. */
[data-theme="highContrast"] .device-ipad > .device-body,
[data-theme="highContrast"] .device-phone > .device-body {
  box-shadow: 0 0 0 2px var(--bezelRim);
}
@media (prefers-contrast: more) {
  :root:not([data-theme]) .device-ipad > .device-body,
  :root:not([data-theme]) .device-phone > .device-body {
    box-shadow: 0 0 0 2px var(--bezelRim);
  }
}
.device-phone .screen {
  width: 368px;
  height: 800px;
  background: var(--background);
  color: var(--textPrimary);
  border-radius: 46px;
  overflow: hidden;
}

/* The play button on a video still: Eucalypt, bottom left, artwork rather than theme. */
.play {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 62px;
  height: 40px;
  border-radius: 8px;
  background: #4c6b57;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label,
.label {
  font-weight: 700;
  font-size: 18px;
}
.input {
  min-height: 56px;
  padding: 0 16px;
  border-radius: 14px;
  font: inherit;
  font-size: 18px;
  color: var(--textPrimary);
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
  width: 100%;
}
textarea.input {
  padding: 14px 16px;
  min-height: 120px;
  resize: vertical;
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 48px;
  cursor: pointer;
}
.check input {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--positive);
  flex: none;
}
.error-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--errorTint);
  color: var(--errorText);
  border: var(--strong) solid var(--error);
  font-weight: 600;
}

/* Store badges: official artwork, shown so people know Able is an app. Not links until the
   listings are live. The Apple badge has a reverse colourway, swapped by site.js in dark. */
.store-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.store-badges img {
  display: block;
  height: 52px;
  width: auto;
}

/* Shown until the page script has attached its handlers; see ableFormsReady in site.js. */
.script-note {
  margin: 0;
  font-weight: 600;
  color: var(--textPrimary);
}

/* The footer's last row: the note, and the registered NDIS provider mark. The mark is official
   artwork in its own colours, so it always sits on a white plate; on a dark page the plate is
   what keeps its grey lettering legible. */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ndis-mark {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: var(--hair) solid var(--border);
}
.ndis-mark img {
  display: block;
  width: 180px;
  height: auto;
}

/*
 * The family app inside a phone drawing, shared by Home and For organisations so both phones
 * match each other and the app. The tab bar is component.tabPill.phone from the tokens, drawn
 * as apps/mobile/src/ui/PillTabBar.tsx draws it: five equal tabs, icon stacked over label, 56
 * high, radius 14, label 14 bold, each an outlined pill on surface; selected is the tint, the
 * positive border and a filled positive icon together, never colour alone.
 */
.app-status {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px 0 30px;
  font-size: 15px;
  font-weight: 700;
}
.app-island {
  width: 96px;
  height: 28px;
  border-radius: 14px;
  background: #0c0a0e;
}
.app-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.app-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 16px 0;
}
.app-back,
.app-me {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.app-back {
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.app-me {
  font-size: 15px;
  font-weight: 700;
  background: var(--clayTint);
  border: var(--hair) solid var(--fillEdge);
}
.app-bar-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--textSecondary);
}
.app-head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 20px 12px;
}
.app-title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.1;
}
.app-sub {
  font-size: 15px;
  color: var(--textSecondary);
}
.app-tabs {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 8px 6px 22px;
  background: var(--surface);
  border-top: var(--hair) solid var(--border);
}
.app-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--textSecondary);
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.app-tab svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-tab.is-selected {
  color: var(--textPrimary);
  background: var(--selectedTint);
  border-color: var(--positive);
}
.app-tab.is-selected svg {
  fill: var(--positive);
  stroke: var(--positive);
}

/*
 * The Ask Able lockup (typography.askAbleLockup, tokens 1.16.0): Ask Able is written, not drawn.
 * The ordinary mark, then "Ask" in Newsreader italic at 1.1x, then "Able" in Hanken Grotesk
 * bold, one baseline, and the Beta pill while the beta lasts. "Able" sets the size; nothing
 * under 24px (below that, write "Ask Able" plainly). Headings and titles only.
 */
.ask-lockup {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: clamp(32px, 3.6vw, 40px);
  line-height: 1.15;
  color: var(--textPrimary);
}
.ask-lockup-row {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.25em;
}
/* Sizes by place, never under the 24px minimum for "Able". */
.ask-lockup-card {
  font-size: 26px;
}
.ask-lockup-dialog {
  font-size: clamp(30px, 3.4vw, 38px);
}
/* A line under the lockup that says who it is for, in the surrounding type. */
.ask-lockup-for {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--textPrimary);
}
.ask-lockup-dialog .ask-lockup-for {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 0.7em;
}
.ask-lockup-mark {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.12em;
  align-self: center;
  flex: none;
}
.ask-lockup-ask {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
}
.ask-lockup-able {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ask-lockup-beta {
  align-self: baseline;
  padding: 5px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--askBetaFill);
  color: var(--askBetaText);
  /* Aligned by its text baseline, the pill hangs its padding and descent below the line; the
     lockup puts the pill's BOTTOM EDGE on the baseline, so lift it by that much. */
  position: relative;
  top: -7px;
}

/* Every dialog's top row (eyebrow and Close) stays in view while the dialog scrolls, so Close
   never scrolls away: the home page's video and recipe dialog (.vd-top) and the For
   organisations panels (.og-d-top). Both dialogs pad their content 24px, which the row cancels
   to run edge to edge on the dialog's own surface, with a hairline beneath it; the line carries
   the edge in high contrast, where there is no shadow. (Clinton, 12 October 2026: parity.) */
.vd-top,
.og-d-top {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -24px -24px 0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border-bottom: var(--hair) solid var(--divider);
}