/*
 * The marketing site: a divider home and one landing per side (NIV-120).
 *
 * Colour comes from `tokens.css`, which is generated from the same `tokens.json` the two
 * apps read, and there is no literal colour anywhere in this file — the old version copied
 * the brand ramp by hand and said in its own header that it was a real cost. It was.
 *
 * **Type size is not fully tokenised, and that is a gap rather than a shortcut.** The scale
 * in Figma is fixed pixel values at a 375pt phone. A page that also has to work at 1440
 * needs a headline that grows, and `clamp()` is the only way to say so in CSS — so the four
 * `font-size: clamp(...)` declarations below carry literal numbers, with the design's own
 * value as the minimum. Under CLAUDE.md that is a design-system gap to raise (a fluid type
 * scale in Figma Variables), not a licence to inline more. Everything that does not need to
 * grow takes the token and nothing else.
 *
 * An earlier version of this header claimed there was no literal type size in the file.
 * There were nine, including a bare `20px` inherited from the holding site. An independent
 * review counted them.
 *
 * ## Why three pages and not one
 *
 * A family and a caregiver want opposite things: one is buying trust, the other is selling
 * time. A single page that opens with a headline for both opens with a headline for neither,
 * and the best-established finding in landing-page research is that a focused page beats a
 * general one. So `/families` and `/caregivers` are each written for one reader and are the
 * destination of every ad and every search; the home exists only for somebody who typed the
 * domain, and its whole job is to send them to one of the two.
 *
 * ## Why no build step, still
 *
 * `tokens.css` is generated and committed, so the page ships as plain CSS. A marketing page
 * is the one place where the weight of a framework is paid by the visitor rather than by us:
 * every 100ms of mobile latency costs about 7% of conversions, and the traffic for "near me"
 * searches is almost all mobile. This is also why `packages/ui` is not reused here — it is
 * React Native to the core, and `react-native-web` would put a mobile runtime in front of a
 * page whose entire job is to load before somebody leaves.
 *
 * ## Fonts
 *
 * Both self-hosted. Google Sans Flex because a site that publishes a privacy policy should
 * not hand every visitor's IP to a third party to render its own headline; Recoleta because
 * it is the brand's display face and Nivo holds the webfont licence (confirmed 21 Sep).
 *
 * The Recoleta here is a *subset*: `subset-fonts.sh` reads the characters these pages
 * actually use and builds a WOFF2 from them. The full face is 511 glyphs to draw a few
 * dozen, and the headline is the first thing painted — see docs/FONTS.md.
 */

@font-face {
  font-family: "Ltt Recoleta";
  src: url("/fonts/LttRecoleta-SemiBold.subset.d2288b00.woff2") format("woff2");
  font-weight: 600;
  /* `swap` and not `block`: a headline in Georgia for 80ms is worse than a headline that is
     not there at all only if you never measure it. The fallback is a serif with similar
     colour, so the swap is a shift in shape rather than a flash of the wrong voice. */
  font-display: swap;
}

/* Subset too, and that mattered more than the display face did. Unsubset these two were
   74 KB brotli against Recoleta's 11 KB — six times the weight, in the font that sets every
   word below a heading, and the first version of this file shipped them whole while its own
   header talked about saving bytes. 125 KB each becomes about 10. */
@font-face {
  font-family: "Google Sans Flex";
  src: url("/fonts/GoogleSansFlex-Regular.subset.2cbee8cc.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans Flex";
  src: url("/fonts/GoogleSansFlex-SemiBold.subset.20cdfe51.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: var(--type-body-regular-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color: var(--color-copy-on-light-primary);
  background: var(--color-background-lightest);
}

a {
  color: var(--color-brand-500);
}

img {
  max-width: 100%;
}

/* Keyboard focus stays visible everywhere. The CTA is a link styled as a button, and a
   button somebody cannot tab to is a button somebody cannot press. */
:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- motion

   One entrance, on load, and nothing else.

   Two rules kept it honest. **It runs on load, not on scroll** — no observer, no JavaScript,
   nothing below the fold waiting to be revealed. A marketing page's whole job is that its
   first frame is complete: that frame is what a link preview grabs, what a crawler reads,
   and what somebody who scrolls immediately actually sees.

   And **nothing is parked invisible**. `opacity: 0` exists only inside the keyframe, never
   in a base rule, so the reduced-motion block above — which kills `animation` outright —
   leaves every element at its normal, visible state. An entrance that can strand content is
   worse than no entrance.

   The stagger is small and the distance is 10px. At this scale motion reads as the page
   settling rather than as an effect, which is the difference between a page that feels
   current and a page that feels like it is performing. */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .cta-row,
.hero .cta-note {
  animation: rise 520ms cubic-bezier(0.2, 0.6, 0.2, 1) backwards;
}

.hero h1 {
  animation-delay: 60ms;
}

.hero .lede {
  animation-delay: 120ms;
}

.hero .cta-row {
  animation-delay: 180ms;
}

.hero .cta-note {
  animation-delay: 240ms;
}

/* The tiles come in last and one after another, left to right. They are the page's answer to
   "is this for me", so arriving after the promise rather than with it is the right order to
   read them in. */
.kind {
  animation: rise 460ms cubic-bezier(0.2, 0.6, 0.2, 1) backwards;
}

.kind:nth-child(1) { animation-delay: 240ms; }
.kind:nth-child(2) { animation-delay: 290ms; }
.kind:nth-child(3) { animation-delay: 340ms; }
.kind:nth-child(4) { animation-delay: 390ms; }
.kind:nth-child(5) { animation-delay: 440ms; }
.kind:nth-child(6) { animation-delay: 490ms; }

/* The logo settles a beat before everything else — it is the first thing drawn and the one
   element that should look placed rather than arriving. */
.logo {
  animation: rise 600ms cubic-bezier(0.2, 0.6, 0.2, 1) backwards;
}

/* A card lifts under the pointer. `transform` and `box-shadow` only, so it never reflows
   anything around it. */
.card,
.kind {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.card:hover,
.kind:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-light);
  box-shadow: 0 6px 20px -12px var(--color-brand-950);
}


/* ---------------------------------------------------------------- the logo

   Mark plus wordmark, the pairing `NivoLogo` draws in the apps. The first version of this
   site used the mark alone, which meant the site never wrote the brand's name in type — an
   abstract symbol with nothing beside it reads as unfinished rather than confident.

   **Colour comes from `currentColor`, and that is the fix for a real bug.** The mark was
   hardcoded to `--color-brand-100`, which is 16:1 on the dark home and **1.20:1 on the white
   landing headers** — a pale blob at the top of the page. It is one colour used on two
   grounds; now the ground decides.

   Geometry is the design's own, each number over the design's height (26.622), the same
   proportions `packages/ui/src/logo.tsx` uses. Driven from `--logo-size` so one custom
   property scales the whole lockup. */

.logo {
  --logo-size: 32px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-size) * 0.2945); /* 7.84 / 26.622 */
  color: var(--color-brand-950);
  flex: none;
}

.logo.on-dark {
  color: var(--color-brand-100);
}

.mark {
  display: flex;
  align-items: center;
  gap: calc(var(--logo-size) * 0.09815); /* 2.613 / 26.622 */
  flex: none;
}

.mark span {
  width: calc(var(--logo-size) * 0.52149); /* 13.883 / 26.622 */
  height: var(--logo-size);
  background: currentColor;
  --r: calc(var(--logo-size) * 0.07362); /* 1.96 / 26.622 */
  --open: calc(var(--logo-size) * 0.78525); /* 20.905 / 26.622 */
}

.mark span:first-child {
  border-radius: var(--r) var(--r) var(--open) var(--r);
}

.mark span:last-child {
  border-radius: var(--r) var(--open) var(--r) var(--r);
}

/* The `PRO` badge, which is the product's *only* difference between the two apps — see
   `NivoLogo`'s `pro` prop, whose own comment calls it "how the two apps are told apart at a
   glance, and the only thing that differs between their Login sections".
   So `/caregivers` wears it and `/families` does not, and a caregiver who opens the app
   after the page sees the same lockup they just clicked.

   The badge is `title-2/regular` — 21px, Recoleta, regular weight — rather than a size
   derived from `--logo-size`, because that is what the design specifies. The design draws
   two sizes only, so inventing a scaling rule for a third would be inventing. */
.logo .pro {
  font: var(--type-title2-regular-font);
  margin-left: calc(var(--logo-size) * 0.3005); /* 8 / 26.622 */
  line-height: 1;
}

.wordmark {
  height: calc(var(--logo-size) * 0.69881); /* 18.6036 / 26.622 */
  width: auto;
  fill: currentColor;
}

/* The divider home is gone (NIV-121).
 *
 * `nivo.care` used to be a page whose only job was two doors. Gui's objection was the right
 * one and NIV-120 had already written the argument against it without following it: a
 * divider is the least focused page it is possible to build, and it taxed every direct
 * visitor with a decision in order to spare the caregiver minority one scroll. The root now
 * serves the family landing, and `.closer.band` is how a caregiver gets out.
 *
 * About 70 lines of rules went with it — `.doors`, `.door`, `body.home` and their
 * descendants. Deleted rather than left in place: dead CSS is a trap, because the next
 * person to write `class="door"` gets styling from a page that no longer exists.
 */

/* ---------------------------------------------------------------- the two landings */

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: var(--space-5);
}

body.landing header.bar {
  padding-block: var(--space-5);
}

body.landing header.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

header.bar a.crossover {
  font: var(--type-subheadline-emphasized-font);
  color: var(--color-copy-on-light-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 2px;
}

header.bar a.crossover:hover {
  color: var(--color-brand-500);
  border-color: var(--color-brand-500);
}

/* Drawn rather than typed: neither face the site loads has U+2192, so a text arrow falls
   back to a system font — a different weight sitting right next to the label. */
header.bar a.crossover .chev {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-left: 2px;
}

/* The hero. One screen: the eyebrow says who this page is for — reassurance for somebody who
   has just been made to choose — then the promise, then the one action. */
.hero {
  /* Less below than the section that follows adds above: the two paddings used to stack
     into a gap wide enough to read as the page having ended. */
  padding-block: var(--space-8);
  background: linear-gradient(
    180deg,
    var(--color-brand-50) 0%,
    var(--color-background-lightest) 100%
  );
}

.eyebrow {
  display: inline-block;
  font: var(--type-caption1-regular-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-600);
  background: var(--color-brand-100);
  border-radius: 999px;
  padding: 6px var(--space-3);
  margin-bottom: var(--space-5);
}

/* The caregiver side, one shade deeper.
 *
 * Same ramp, different weight — brand-900 where the family side uses brand-600. The apps do
 * not differentiate by colour at all (their Tailwind configs are identical; the only thing
 * that tells them apart is the PRO badge), so this is a rule the web has and the product
 * does not. It stays inside the existing palette for exactly that reason: a caregiver who
 * lands here and then opens the app should not find a different brand waiting.
 *
 * Contrast measured, not assumed: brand-100 on brand-900 is 12.02:1, brand-900 on white is
 * 14.37:1. Both comfortably past AA.
 */
body.pro .eyebrow {
  background: var(--color-brand-900);
  color: var(--color-brand-100);
}

body.pro .card .glyph,
body.pro .kind svg {
  color: var(--color-brand-900);
}

body.pro .note {
  border-left-color: var(--color-brand-900);
}

body.pro .steps li::before {
  background: var(--color-brand-900);
}

.hero h1 {
  font: var(--type-large-title-emphasized-font);
  font-size: clamp(32px, 6.4vw, 52px);
  line-height: 1.15;
  color: var(--color-copy-on-light-headers);
  margin: 0 0 var(--space-4);
  max-width: 17ch;
  text-wrap: balance;
}

.hero .lede {
  font: var(--type-title3-regular-font);
  color: var(--color-copy-on-light-secondary);
  margin: 0 0 var(--space-8);
  max-width: 52ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* The design's default button: near-black ground, white label, fully rounded. Matches
   `PillButton` in packages/ui rather than approximating it. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-8);
  border-radius: 999px;
  text-decoration: none;
  font: var(--type-body-emphasized-font);
  background: var(--color-button-default-bg);
  color: var(--color-copy-on-dark-headers);
  transition: transform 120ms ease, opacity 120ms ease;
}

.button:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.button.secondary {
  background: var(--color-button-secondary-bg);
  color: var(--color-button-secondary-copy);
}

.cta-note {
  font: var(--type-footnote-regular-font);
  /* `secondary`, not `tertiary`. The tertiary token is 3.39:1 on white — below AA for
     text under 18.7px — and this line sits directly under the primary CTA at 13px. The
     token is not wrong; using it for body text is. */
  color: var(--color-copy-on-light-secondary);
  margin: var(--space-3) 0 0;
  max-width: 44ch;
}

/* The hero's two columns.

   The first version put the copy in a 17ch column and left the other half of the screen
   empty. On a 1400px display that is not restraint, it is a page that looks broken — and it
   was the first thing anybody said about it. The right column now carries the six kinds of
   care, which is the most useful thing a visitor can see in the first screen: it answers
   "is this for me" before they read a word of the pitch. Content doing the visual work,
   rather than an image hired to stand in for it. */

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 860px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* ---------------------------------------------------------------- illustration

   **These colours are a design-system gap, stated rather than hidden.**

   `tokens.json` is a product palette: a brand ramp, copy colours, borders, two feedback
   pairs. It has no skin tones, because no screen in either app draws a person. Illustration
   needs them, and inventing them in a stylesheet is exactly what CLAUDE.md says not to do —
   so they are named here, in one block, as the thing to take to Figma rather than as a
   precedent for inlining a colour anywhere else.

   **The casting rule matters more than the palette.** Care work in the US is done
   disproportionately by women of colour, and imagery where the caregiver is always one
   demographic and the family always another reproduces a hierarchy people notice. The rule
   these illustrations follow is: **never let skin tone predict the role.** Across the six
   scenes the caregiver and the person being cared for both vary, no single figure carries
   representation on its own, and caregivers are drawn doing something competent rather than
   only being warm — "warm but not skilled" is its own stereotype.

   The tones below are a range, used in rotation, and no tone is tied to a role. */

:root {
  --skin-1: #f2d0b8;
  --skin-2: #e0ab84;
  --skin-3: #c08457;
  --skin-4: #8d5524;
  --skin-5: #5c3317;
  --hair-1: #2b2118;
  --hair-2: #6b4a2f;
  --hair-3: #c9a227;
  --hair-4: #8a8f98;
  /* One warm neutral against all that blue. The page is cold without it, and a care page
     that reads cold is the problem this whole section exists to fix. */
  --warm: #f6a97a;
  --warm-deep: #d97b4a;
}

/* The six care types, as a grid of tiles. These are the product's own `CareType` values —
   not a marketing list, which is why there are six rather than the four the first draft
   named. Dropping `special_needs` and `tutoring` undersold the two categories with the most
   demand and the least competition. */

.kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.kind {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-background-lightest);
  border: 1px solid var(--color-border-lighter);
}

.kind > svg {
  display: block;
  width: 100%;
  height: auto;
}

.kind-copy {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.kind-copy h3 {
  font: var(--type-title3-emphasized-font);
  color: var(--color-copy-on-light-headers);
  margin: 0 0 var(--space-0-5);
}

.kind-copy p {
  font: var(--type-callout-regular-font);
  color: var(--color-copy-on-light-secondary);
  margin: 0;
}

/* Three across, because six in two rows of three reads as a set — where 4+2 reads as a list
   that ran out. Stated as a fixed count rather than `auto-fit`, which is what produced the
   4+2 the comment above used to claim was a 3+3. */
.kinds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .kinds {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The hero's illustration. It carries the warmth the page was missing — the first version
   led with verification machinery, which is the second thing somebody wants to know. The
   first is what care looks like. */
.hero-art {
  width: 100%;
  height: auto;
  display: block;
}

.closer .kind {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-brand-100) 28%, transparent);
  color: var(--color-copy-on-dark-headers);
}

/* Questions somebody actually asks before they hand over their evening or their home. It
   is the cheapest section on a page like this and the one most often skipped: every answer
   here is one fewer reason to close the tab, and two of them (what it costs, whether
   anybody is nearby) are the objections that otherwise go unanswered. */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8) var(--space-12);
}

.faq h3 {
  font: var(--type-title3-emphasized-font);
  color: var(--color-copy-on-light-headers);
  margin: 0 0 var(--space-1);
}

.faq p {
  font: var(--type-callout-regular-font);
  color: var(--color-copy-on-light-secondary);
  margin: 0;
}

/* Sections. A landing that scrolls is fine; a landing that hides its action behind a
   carousel is not, so everything below the hero is static and stacked. */
section {
  padding-block: var(--space-12);
}

section.tinted {
  background: var(--color-background-page);
}

h2 {
  font: var(--type-title1-emphasized-font);
  font-size: clamp(24px, 4vw, 32px);
  color: var(--color-copy-on-light-headers);
  margin: 0 0 var(--space-3);
  max-width: 24ch;
  text-wrap: balance;
}

.section-lede {
  font: var(--type-body-regular-font);
  color: var(--color-copy-on-light-secondary);
  margin: 0 0 var(--space-8);
  max-width: 56ch;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* A card here is a claim about what the product does, so it gets a border rather than a
   shadow: these are facts in a list, not objects floating above the page. */
.card {
  padding: var(--space-5);
  border: 1px solid var(--color-border-lighter);
  border-radius: 14px;
  background: var(--color-background-lightest);
}

.card h3 {
  font: var(--type-title3-emphasized-font);
  color: var(--color-copy-on-light-headers);
  margin: 0 0 var(--space-1);
}

.card p {
  font: var(--type-callout-regular-font);
  color: var(--color-copy-on-light-secondary);
  margin: 0;
}

.card .glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-brand-100);
  color: var(--color-brand-600);
  margin-bottom: var(--space-3);
}

.card .glyph svg {
  width: 22px;
  height: 22px;
}

/* The steps. Numbered because this genuinely is a sequence — you find somebody, then you
   talk to them, then you book. The numerals carry information; they are not decoration. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8) var(--space-5);
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font: var(--type-callout-emphasized-font);
  background: var(--color-brand-950);
  color: var(--color-copy-on-dark-headers);
  margin-bottom: var(--space-3);
}

.steps h3 {
  font: var(--type-title3-emphasized-font);
  color: var(--color-copy-on-light-headers);
  margin: 0 0 var(--space-1);
}

.steps p {
  font: var(--type-callout-regular-font);
  color: var(--color-copy-on-light-secondary);
  margin: 0;
}

/* The honesty note. This is a real property of the product — a badge is drawn only once it
   is true, and an absent one means "not checked" rather than "failed" — and saying so is
   worth more than another claim would be. */
.note {
  border-left: 3px solid var(--color-brand-500);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  margin-top: var(--space-8);
  max-width: 60ch;
}

.note p {
  font: var(--type-callout-regular-font);
  color: var(--color-copy-on-light-secondary);
  margin: 0;
}

/* The closing band: the same dark ground as the home, so the page ends where the brand
   started and the last thing on screen is the action. */
.closer {
  background: radial-gradient(
    120% 140% at 50% 0%,
    var(--color-brand-900) 0%,
    var(--color-brand-950) 70%
  );
  color: var(--color-copy-on-dark-primary);
  text-align: center;
}

.closer h2 {
  color: var(--color-copy-on-dark-headers);
  margin-inline: auto;
}

.closer .section-lede {
  color: var(--color-brand-100);
  margin-inline: auto;
}

.closer .cta-row {
  justify-content: center;
}

.closer .button {
  background: var(--color-brand-100);
  color: var(--color-brand-950);
}

.closer .cta-note {
  color: var(--color-brand-300);
  margin-inline: auto;
}

/* The caregiver band. Same surface as the closing one, but it is a signpost rather than an
   ending, so it is quieter: no giant heading, and the label above it does the work of saying
   who should keep reading. */
.closer.band {
  padding-block: var(--space-12);
}

.closer.band h2 {
  font-size: clamp(22px, 3.2vw, 30px);
  margin-bottom: var(--space-3);
}

.band-eyebrow {
  font: var(--type-caption1-regular-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-300);
  margin: 0 0 var(--space-1);
}

footer.feet {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border-lighter);
}

footer.feet .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font: var(--type-footnote-regular-font);
  /* Same reason as `.cta-note` above: 13px text needs 4.5:1 and tertiary gives 3.39. */
  color: var(--color-copy-on-light-secondary);
}

/* The copyright and the company stack, so the nav keeps its own side of the row. */
footer.feet .who {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

footer.feet nav {
  display: flex;
  gap: var(--space-5);
}

footer.feet a {
  color: var(--color-copy-on-light-secondary);
  text-decoration: none;
}

footer.feet a:hover {
  color: var(--color-brand-500);
}

/* ---------------------------------------------------------------- the legal pages

   Documents, so they get a light ground and a reading measure. Unchanged in substance from
   the holding site; only the literals became tokens. */

body.document {
  color: var(--color-copy-on-light-primary);
  background: var(--color-background-lightest);
  padding: var(--space-12) var(--space-5) 96px;
}

.document main {
  max-width: 68ch;
  margin: 0 auto;
}

.document h1 {
  font: var(--type-large-title-emphasized-font);
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.25;
  color: var(--color-copy-on-light-headers);
  margin: 0 0 var(--space-1);
}

.document .updated {
  /* 14px, still under the 18.7px large-text threshold. */
  color: var(--color-copy-on-light-secondary);
  font: var(--type-subheadline-regular-font);
  margin: 0 0 40px;
}

.document h2 {
  font: var(--type-title3-emphasized-font);
  margin: 40px 0 var(--space-3);
}

.document h3 {
  font: var(--type-body-emphasized-font);
  margin: var(--space-8) 0 var(--space-1);
}

.document p,
.document li {
  color: var(--color-copy-on-light-secondary);
  font: var(--type-body-regular-font);
}

.document li {
  margin-bottom: var(--space-1);
}

.document table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font: var(--type-callout-regular-font);
}

.document th,
.document td {
  text-align: left;
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
  color: var(--color-copy-on-light-secondary);
}

.document th {
  font: var(--type-callout-emphasized-font);
  color: var(--color-copy-on-light-primary);
}

.document .home {
  display: inline-block;
  margin-bottom: var(--space-8);
  font: var(--type-callout-regular-font);
}

/* The support form (nivo.care/support). Lives on a `.document` page, so it inherits the
   reading column and only needs the controls. */

.support-form {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-8) 0 var(--space-12);
}

.support-form .field {
  display: grid;
  gap: var(--space-1);
}

.support-form label {
  font: var(--type-body-emphasized-font);
  color: var(--color-copy-on-light-headers);
}

.support-form input,
.support-form textarea {
  font: inherit;
  color: var(--color-copy-on-light-primary);
  background: var(--color-background-lightest);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 14px var(--space-4);
  /* Without this an input is 100% of its *content box* and overflows the column by the
     padding and border, which only shows up on a phone. */
  box-sizing: border-box;
  width: 100%;
}

.support-form textarea {
  /* Vertical only: a textarea a reader can drag wider than the column breaks the layout,
     and nobody has ever wanted that. */
  resize: vertical;
  min-height: 140px;
}

.support-form input:focus-visible,
.support-form textarea:focus-visible {
  outline: 2px solid var(--color-button-default-bg);
  outline-offset: 1px;
}

.support-form .hint {
  font: var(--type-subheadline-regular-font);
  color: var(--color-copy-on-light-secondary);
  margin: 0;
}

/* Off-screen rather than `display: none`: a bot that reads CSS skips a hidden field, and
   one that does not read CSS fills this. `aria-hidden` and `tabindex="-1"` on the markup
   keep every real user out of it. */
.support-form .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.support-form .button {
  justify-self: start;
  border: 0;
  cursor: pointer;
  font: var(--type-body-emphasized-font);
}

.support-form .button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.support-form .form-status {
  margin: 0;
  min-height: 1.4em;
  font: var(--type-subheadline-regular-font);
  color: var(--color-copy-on-light-secondary);
}

.support-form .form-status[data-kind="ok"] {
  color: var(--color-feedback-success-copy);
}

.support-form .form-status[data-kind="warn"] {
  color: var(--color-feedback-warning-copy);
}