/*
 * pillo.center: the shared stylesheet of the «Блістер 2.0» site (W6).
 *
 * WHAT THIS FILE IS. The base every page of the public site links: tokens (light + dark), the
 * self-hosted Inter, the page chrome (skip link, sticky header, footer), and the components the
 * app and the doctor cabinet already have (buttons, chips, cards, the foil card, the dose well, the
 * store badges), plus what every INNER page shares (W7): the page head, the callouts, the mail card with
 * its copy button, the print rules. Page-only layout lives in a file of its own (home.css for the landing
 * page, doc.css for the documents, help.css for support and delete-account, handoff.css for invite and
 * get) so a long document does not download the landing page's hero. Every page also loads /site.js.
 *
 * SOURCE OF TRUTH. docs/design/2026-10-01-blister-2-site-mockups.html, section #shared and the 2.0
 * column of #home / #home-phone. Token VALUES are the app's (mobile/lib/theme/tokens.dart) and the
 * dashboard's (backend/dashboard/src/theme.css), which are the same numbers: a colour changed in one
 * of the three belongs in all three, and SiteStylesheetTests reads all three and fails when a shared
 * token drifts. Where the site deliberately differs it says so at the token: --r-card (a site card is
 * 24, the dashboard's table card 12), --head-glass (the header's own, more opaque glass, below) and
 * the band / lock-card / QR tokens, which only the site has. The old site palette (slate for the
 * doctor, clay for family, amber for notes, monospace labels, system fonts) is RETIRED: the doctor
 * section is a dark band now, and there is no per-audience colour.
 *
 * THEMING. Light and dark by `prefers-color-scheme` ONLY. The site ships no JavaScript for it and
 * no theme switch (the dashboard has one because it has an account to store the choice on). A token
 * added here goes in BOTH blocks below, or a dark machine renders the light value.
 *
 * TYPE. Inter, four weights (400 / 600 / 700 / 800), served from this origin: /fonts/inter-*.woff2.
 * No Google Fonts, no CDN, no third-party request of any kind: infra/site/privacy.html lists every
 * third-party load and a test enforces the list. Provenance, subset command and licence are in
 * docs/fonts/inter-web.md; OFL.txt ships next to the files. A face a page does not use is never
 * fetched (@font-face is lazy), and `font-display: swap` keeps the text readable in the system face
 * while a file loads. A character outside the subset falls through to the system face.
 *
 * SIZES. The mockups are drawn on a 1120 px canvas at 13.5 px body; the real page is rem-based so a
 * visitor's browser font size is honoured, with a 17 px floor for body text (the audience skews
 * older) and 56 px for the primary touch targets.
 *
 * NO INLINE STYLES, no colour literals in a rule: colours are tokens, so a new theme is a token
 * block, not a hunt.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/inter-800.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --paper: #FAFAF7;
  --surface: #FFFFFF;
  --ink: #16211B;
  --muted: #5C6B62;
  --line: #E3E7E2;
  --well: #F1F3EF;
  --dashed: #C6CCC5;

  --brand: #0E6B4A;
  --brand-ink: #0A4A34;
  --brand-tint: #E3F0EA;
  --on-brand: #FFFFFF;

  --warn-bg: #FFF4E2;
  --warn-ink: #8A4B00;
  --warn-body: #6E4210;
  --warn-border: #EAC98F;

  --danger: #B3261E;
  --danger-bg: #FBEAE8;
  --danger-border: #E5B5B0;

  --nodata: #5F6673;
  --nodata-bg: #EEF0F2;

  /* The foil card: gradient foil-hi -> foil-lo plus a faint 115deg sheen. */
  --foil-hi: #FFFFFF;
  --foil-lo: #E6EAE4;
  --sheen: rgba(255, 255, 255, .06);
  --btn-highlight: rgba(255, 255, 255, .16);

  /* The frosted layer over scrolling content: the app's and the dashboard's tab bar / top bar. */
  --glass: rgba(255, 255, 255, .74);
  --glass-line: rgba(20, 33, 27, .08);
  /* The SITE HEADER's own, more opaque glass (both themes .92). The header is sticky over a page whose
     doctor band and Lock Screen card are dark in BOTH themes: at .74 a nav link (--muted) over the
     dark band measured 3.27:1, under AA; at .92 it is 4.8:1 and the frost still reads as glass. The
     dark theme has the mirror problem (the white QR frame and the light store badges scroll under a
     dark header). SiteStylesheetTests composites this token over black, white, the band and the Lock
     Screen card in both themes and requires the nav text to stay at 4.5:1 over all of them. */
  --head-glass: rgba(255, 255, 255, .92);

  --shadow: rgba(20, 33, 27, .10);
  --shadow-strong: rgba(20, 33, 27, .20);

  /* The dark band (the doctor section) is dark in BOTH themes, as a phone's lock screen is. */
  --band-bg: #12261D;
  --band-ink: #E8ECE9;
  --band-muted: #A9B8AF;
  --band-line: rgba(232, 236, 233, .14);
  --band-card: rgba(255, 255, 255, .06);
  --band-accent: #8FD3B4;
  --band-btn: #5FBF97;
  --band-on-btn: #06231A;
  --band-good: #5FBF97;
  --band-bad: #F28B82;
  --band-warn: #F2C48A;

  /* The Lock Screen card is drawn as iOS draws it: dark glass in both themes. */
  --la-bg: rgba(16, 20, 18, .94);
  --la-text: #FFFFFF;
  --la-dim: rgba(255, 255, 255, .68);
  --la-line: rgba(255, 255, 255, .12);
  --la-ok: #5FBF97;
  --la-on-ok: #06231A;
  --la-ring: rgba(95, 191, 151, .28);
  --la-ring-peak: rgba(95, 191, 151, .2);
  --la-btn: rgba(255, 255, 255, .14);

  /* The QR frame stays white in both themes on purpose: scanners need the light quiet zone. */
  --qr-ink: #111814;
  --qr-paper: #FFFFFF;

  --gutter: clamp(20px, 4vw, 40px);
  --maxw: 70rem;
  --r-card: 24px;
  --r-btn: 999px;

  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Roboto Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121613;
    --surface: #1E2420;
    --ink: #E8ECE9;
    --muted: #9AA69E;
    --line: #2A322C;
    --well: #191F1B;
    --dashed: #3A423C;

    --brand: #5FBF97;
    --brand-ink: #8FD3B4;
    --brand-tint: #163127;
    --on-brand: #0A2018;

    --warn-bg: #2E2213;
    --warn-ink: #F2C48A;
    --warn-body: #E2B37B;
    --warn-border: #5C4520;

    --danger: #F28B82;
    --danger-bg: #2E1614;
    --danger-border: #6B2F2A;

    --nodata: #9BA3AE;
    --nodata-bg: #22272A;

    --foil-hi: #242B26;
    --foil-lo: #181D1A;

    --glass: rgba(30, 36, 32, .72);
    --glass-line: rgba(232, 236, 233, .08);
    --head-glass: rgba(30, 36, 32, .92);

    --shadow: rgba(0, 0, 0, .35);
    --shadow-strong: rgba(0, 0, 0, .55);

    --band-bg: #1C2D25;
    --band-muted: #9FB0A6;
    --band-line: rgba(232, 236, 233, .12);
    --band-card: rgba(255, 255, 255, .05);
  }
}

/* ============================== base ============================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* An in-page link lands below the sticky header, not under it. The header is 72 px tall (`.site-head-in`'s
     min-height) plus its 1 px border, in px and not in rem: its height does not follow the reader's text size,
     so a rem value put the target 53 px under it at Chrome's Very large (4.5rem is 108 px there) while the
     header stayed 73 px tall (W7 review 1, A4). */
  scroll-padding-top: 73px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-size: clamp(1.0625rem, .25vw + 1rem, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  /* A word wider than its box (a 20 px heading's «Нагадування,» or the landing headline's «будильників»
     at Largest text on a 320 px phone) breaks instead of pushing the page sideways. `break-word`, not
     `anywhere`: it leaves the word's min-content alone, so a heading that is a flex item (the plan
     card's «Family» beside its chip) is not squeezed into a broken word. */
  overflow-wrap: break-word;
}
/* The site's type scale. It lives here, not in a page's file, because every page uses it: a page
   that links /site.css alone must not fall back to the browser's own heading sizes. The landing
   page's larger headline is `.hero h1` in home.css. */
h1 {
  font-size: 2rem;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.03em;
}
h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  letter-spacing: -.03em;
}
h3 {
  font-size: 1.25rem;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.lede {
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.1875rem;
  font-size: clamp(1.125rem, .95rem + .5vw, 1.3125rem);
  line-height: 1.55;
}

p {
  margin: 0;
}

a {
  color: var(--brand-ink);
  text-underline-offset: 3px;
}

strong,
b {
  font-weight: 700;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visually hidden, still read by a screen reader. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The inline icon sprite: in the document, but occupying nothing. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ic {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.num {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

/* Keyboard focus: always visible, three pixels, in the brand colour. The dark band restates it. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 40;
  padding: 14px 20px;
  border-radius: var(--r-btn);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}
.skip:focus {
  top: 12px;
}

/* ============================== buttons ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn .ic {
  width: 20px;
  height: 20px;
}
.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: inset 0 1px 0 var(--btn-highlight), 0 8px 16px -10px var(--brand);
}
.btn-primary:hover {
  background: var(--brand-ink);
}
.btn-tonal {
  background: var(--brand-tint);
  color: var(--brand-ink);
}
.btn-outline {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.btn-outline:hover {
  border-color: var(--brand);
}
.btn-sm {
  min-height: 48px;
  padding: 0 20px;
  font-size: .9375rem;
}

/* ============================== store badges ============================== */

/* Google Play and the App Store are THE SAME badge: one solid style, one size. Google Play comes
   first. Both are always shown, on every device and every page; nothing here or in any script
   chooses one by user agent (an iPad in desktop mode reports macOS, and a visitor reading a link
   on a laptop wants both). */
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  min-width: 11.5rem;
  padding: 0 24px 0 18px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.store .ic {
  width: 26px;
  height: 26px;
  stroke: none;
}
.store small {
  display: block;
  margin-bottom: 2px;
  font-size: .75rem;
  font-weight: 600;
  opacity: .85;
}
.store:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -12px var(--shadow-strong);
}

/* ============================== chips ============================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.chip-b {
  background: var(--brand-tint);
  border-color: transparent;
  color: var(--brand-ink);
}
.chip-s {
  background: var(--brand);
  border-color: transparent;
  color: var(--on-brand);
}
.chip-n {
  background: var(--well);
  border-color: transparent;
  color: var(--muted);
}

/* ============================== cards, foil, icon well ============================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: 0 10px 24px -20px var(--shadow-strong);
}

.foil {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(160deg, var(--foil-hi), var(--foil-lo));
  box-shadow: 0 12px 26px -18px var(--shadow-strong);
}
.foil::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(115deg, transparent 0 14px, var(--sheen) 14px 15px);
  pointer-events: none;
}
.foil > * {
  position: relative;
}

.iw {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--brand-tint);
  color: var(--brand-ink);
}
.iw .ic {
  width: 24px;
  height: 24px;
}

/* ============================== the dose well ============================== */

/* The app's signature: a round well. Taken is filled with a check, the next dose is a ring that
   pulses, a later dose is plain. The check and the number are drawn for the eye only; every place a
   well appears on a page carries its meaning in text beside it or in an aria-label on the group. */
.w {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 35%, var(--foil-hi), var(--well));
  box-shadow: 0 2px 3px -1px var(--shadow), inset 0 -2px 4px var(--shadow);
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1;
}
.w .ic {
  width: 17px;
  height: 17px;
  stroke-width: 3;
}
.w-t {
  background: var(--brand);
  border-color: var(--brand-ink);
  box-shadow: inset 0 3px 6px var(--shadow-strong);
  color: var(--on-brand);
}
.w-n {
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
  color: var(--brand-ink);
  animation: well-pulse 2.4s ease-in-out infinite;
}
.w-sm {
  width: 32px;
  height: 32px;
  font-size: .8125rem;
}
.w-sm .ic {
  width: 14px;
  height: 14px;
}
.w-lg {
  width: 56px;
  height: 56px;
  font-size: 1.0625rem;
}
@keyframes well-pulse {
  50% {
    box-shadow: 0 0 0 8px var(--brand-tint);
  }
}

/* ============================== header ============================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--glass-line);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-head {
    background: var(--head-glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}
.site-head-in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.grow {
  flex: 1 1 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
}
.brand .mk {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand);
}
.brand .mk i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--on-brand);
}

.site-nav {
  display: none;
  gap: 4px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 600;
  /* «Як це працює» must never break onto two lines in a 44 px link. */
  white-space: nowrap;
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--ink);
  background: var(--well);
}
/* The page you are on, in the brand colour (the mockup's «Підтримка» on /support). Set by hand in the markup
   of the one page that has an entry in the nav. */
.site-nav a[aria-current="page"],
.menu-pop a[aria-current="page"] {
  color: var(--brand-ink);
}

.head-doc .short {
  display: none;
}

/* The phone's menu: a <details>, so it opens and closes with no script at all. */
.menu {
  position: relative;
}
.menu summary {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 3px 8px -5px var(--shadow-strong);
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu[open] summary {
  background: var(--brand-tint);
  border-color: transparent;
  color: var(--brand-ink);
}
.menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 35;
  display: flex;
  flex-direction: column;
  width: min(18rem, calc(100vw - 2 * var(--gutter)));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 18px 40px -16px var(--shadow-strong);
}
.menu-pop a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.menu-pop a:hover {
  background: var(--well);
}

/* The full nav needs a little under 1000 px beside the brand and the doctor button; below that the menu
   button carries the same links. (It switched at 900 px until review 1 measured «Як це працює»
   wrapping at 900-955.) The breakpoint is in EM, not px, on purpose: a media query's em is the BROWSER's
   own font size (Chrome's Font size setting: Medium 16 px, Large 20, Very large 24), not the page's, so
   62.5em is 1000 px at the default and 1250 / 1500 px at Large / Very large. In px the full nav stayed
   at 1000 px while its text grew, and with nowrap links the header overflowed by 38 px at 1000 (Large)
   and 173 px (Very large) (review 2). SiteStylesheetTests pins this switch at 62.5em. */
@media (min-width: 62.5em) {
  .site-nav {
    display: flex;
    /* Chrome's separate «Minimum font size» setting grows the nav text while this em bound does not move
       (it only follows «Font size»), so the five nowrap links can outgrow the header between 1000 and
       1300 px. Wrapping the ROW (the links themselves stay nowrap) keeps the header inside the page; at the
       default size nothing wraps and the header is pixel-identical (W6 review 3, R3-2). */
    flex-wrap: wrap;
  }
  .menu {
    display: none;
  }
}
/* EVERY breakpoint below is in em, not px, for the reason the nav's one is (above): the content each one
   guards is rem-sized, and a media query's em is the BROWSER's font size, so the switch moves with the
   visitor's Font size setting (Chrome Medium 16 / Large 20 / Very large 24 px) instead of staying put
   while the text outgrows it. 639 / 16 = 39.9375em, 359 / 16 = 22.4375em: the same pixels at the default
   size. SiteStylesheetTests refuses a px width breakpoint in this file. */
@media (max-width: 39.9375em) {
  /* The phone header is the brand, «Лікарю» as plain text, and the menu button. */
  .head-doc .long,
  .head-doc .ic {
    display: none;
  }
  .head-doc .short {
    display: inline;
  }
  .site-head-in {
    gap: 12px;
    min-height: 68px;
  }
}
@media (max-width: 22.4375em) {
  /* 320 px: the brand, the doctor button and the menu button must all fit beside two 20 px gutters. */
  .site-head-in {
    gap: 8px;
  }
}

/* ============================== footer ============================== */

.site-foot {
  margin-top: clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--line);
  padding-block: 44px 56px;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px clamp(28px, 5vw, 72px);
  align-items: start;
}
.foot-about {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--muted);
  font-size: .9375rem;
}
.foot-about .brand {
  align-self: flex-start;
}
.foot-about p {
  max-width: 62ch;
}
.foot-about strong {
  color: var(--ink);
}
.foot-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px clamp(20px, 4vw, 48px);
  justify-content: start;
}
.foot-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
.foot-links a:hover {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The page you are on, as in the header's nav: a footer link that points at its own page says so. */
.foot-links a[aria-current="page"] {
  color: var(--brand-ink);
}
@media (max-width: 24.9375em) {
  /* "конфіденційності" in 700 weight is wider than half of a 320 px screen: one column below 399 px at the
     default size, 499 / 599 px at Chrome's Large / Very large (W6 review 3, R3-1). */
  .foot-links {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 35em) {
  /* Two columns from 560 px at the default size, 700 / 840 px at Large / Very large: the links are rem-sized,
     and a px bound let the pair spill 22 px past the page at 560-582 px under Very large text. */
  .foot-links {
    grid-template-columns: repeat(2, max-content);
  }
}
@media (min-width: 56.25em) {
  .foot-grid {
    grid-template-columns: minmax(0, 1.3fr) auto;
  }
}

/* ============================== inner pages (W7) ============================== */

/* Every page but the landing page: invite, get, support, delete-account, privacy, terms, problems.
   `.page` is the <main>'s padding; the page's own file (doc.css, help.css, handoff.css) lays it out. */
.page {
  padding-block: clamp(28px, 4vw, 56px) clamp(48px, 7vw, 96px);
  /* A word wider than its box (the legal text's «інформаційно-рекомендаційний», joined with a non-breaking
     hyphen, in a note on a 320 px phone at Very large text) breaks instead of running out of its card. */
  overflow-wrap: break-word;
}
.page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 46rem;
}
.page-head > * {
  margin: 0;
  /* A flex item that hugs its content is as wide as its longest WORD, and `overflow-wrap: break-word` does not
     shrink that: «конфіденційності» in a 48 px h1 is 400 px wide, on a 320 px phone at Very large text. Capped to
     the column the word breaks instead of pushing the page sideways. */
  min-width: 0;
  max-width: 100%;
}
/* Section headings of a long page are smaller than the landing page's (the shared h2 is a landing-page
   section title, 40 px at most). 1.375-1.625 rem is 22-26 px at the default size. */
.page h2 {
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.page h3 {
  font-size: 1.1875rem;
  letter-spacing: -.01em;
  line-height: 1.25;
  font-weight: 700;
}

/* Icon wells in the colours of the app's states. `.iw` (52 px) is the base; the smaller two sit in callouts
   and lists. A well and its icon are for the eye only: the page says the same thing in words beside it. */
.iw-sm {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.iw-sm .ic {
  width: 22px;
  height: 22px;
}
.iw-xs {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.iw-xs .ic {
  width: 18px;
  height: 18px;
}
.iw-n {
  background: var(--well);
  color: var(--muted);
}
.iw-w {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.iw-d {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ============================== callouts ============================== */

/* A note that must not be skimmed past: an icon well and the text. Three tones, as the app's banners: the
   neutral one (info), amber (a warning or a limit) and red (the one destructive thing on the site). The
   text colours are tokens judged in SiteStylesheetTests against the tone's own background in both themes. */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}
.callout-body {
  min-width: 0;
}
.callout-body > * + * {
  margin-top: 10px;
}
.callout strong {
  color: var(--ink);
}
.callout-title {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}
.callout-w {
  border-color: var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-body);
}
.callout-w strong,
.callout-w .callout-title {
  color: var(--warn-ink);
}
.callout-x {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--ink);
}
.callout-x .callout-title {
  color: var(--danger);
}
.callout a {
  color: var(--brand-ink);
  font-weight: 600;
}
/* Where the icon column costs the text too much of the line, the icon sits above the text. 20em is the width of
   a 320 px phone at the default text size, so nothing changes there; at Chrome's Large / Very large text the same
   cut falls at 400 / 480 px, where the icon and its gap would leave the text 1-2 words a line (W7 review 1, A5). */
@media (max-width: 19.9375em) {
  .callout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* ============================== the mail card and its copy button ============================== */

.mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 24px -20px var(--shadow-strong);
}
.mail-body {
  display: flex;
  flex: 1 1 9rem;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mail-label {
  display: block;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.35;
}
.mail-addr {
  display: block;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.mail-addr a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.mail-addr a:hover {
  color: var(--brand-ink);
}
/* The copy button exists only where a script can make it work (site.js un-hides it); without one the
   address is still a mailto link and selectable text. */
.copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.copy[hidden] {
  display: none;
}
.copy:hover {
  background: var(--well);
}

/* ============================== print ============================== */

/* A legal page is printed, and a printed page needs no navigation, no frosted header and no card shadows.
   The tokens are redefined to plain black on white: print never shows a dark theme, and a foil card or a
   callout becomes a ruled box. doc.css adds what only a document needs. */
@media print {
  :root {
    --paper: #FFFFFF;
    --surface: #FFFFFF;
    --ink: #000000;
    --muted: #333333;
    --line: #999999;
    --well: #F2F2F2;
    --brand: #000000;
    --brand-ink: #000000;
    --brand-tint: #F2F2F2;
    --on-brand: #FFFFFF;
    --warn-bg: #FFFFFF;
    --warn-ink: #000000;
    --warn-body: #000000;
    --warn-border: #999999;
    --danger: #000000;
    --danger-bg: #FFFFFF;
    --danger-border: #999999;
    --foil-hi: #FFFFFF;
    --foil-lo: #FFFFFF;
    --shadow: transparent;
    --shadow-strong: transparent;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-size: 11pt;
    line-height: 1.5;
  }
  .skip,
  .site-head,
  .foot-links {
    display: none;
  }
  .site-foot {
    margin-top: 24pt;
    padding-block: 12pt 0;
  }
  .foil,
  .callout,
  .card,
  .mail {
    background: var(--paper);
    box-shadow: none;
    break-inside: avoid;
  }
  .foil::before {
    display: none;
  }
  a {
    color: var(--ink);
  }
}

/* ============================== motion ============================== */

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