/* Panchangamanam website (CW-1385). The shared app-site page system
   (CW-1381) in the Panchangamanam skin, "Brass and Vermilion": maroon night,
   brass, ivory and vermilion bands. Fonts are self-hosted; no scripts, no
   requests to anyone else.

   Floors the browser tests hold: no text under 13px (0.8125rem), every link
   at least 24 by 24 px, no sideways scroll at 320px or at 200% and 235% text
   size. Type is in rem so it follows the reader's text size; spacing is
   capped with vw so large text does not push the layout off the screen. */

@font-face {
  font-family: "Mandali";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/mandali-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Telugu";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-telugu-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Telugu";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-telugu-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Telugu";
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-telugu-semibold.woff2") format("woff2");
}

/* The site has one look in both colour schemes: the maroon night of the app's
   dark theme with planned brass, ivory and vermilion bands. The tokens are
   restated for each scheme so a forced scheme keeps the same contrast. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --font-display: "Mandali", "Noto Sans Telugu", sans-serif;
  --font-body: "Noto Sans Telugu", system-ui, sans-serif;
  --m: clamp(min(1rem, 16px), 5vw, 7.5rem);
  --g: 1.5rem;
  --radius: 1.25rem;
  --bg: #1e0c10;
  --ink: #f2e8d5;
  --muted: #c0ad94;
  --line: #4a2630;
  --card: #301319;
  --accent: #e8b54a;
  --on-accent: #1e0c10;
  --brass: #eed99a;
  --b-bg: #c9a227; --b-ink: #1e0c10; --b-muted: #4d3210; --b-line: #a58318; --b-card: #dcbb4f; --b-accent: #6a1d10; --b-on-accent: #f2e8d5;
  --c-bg: #f2e8d5; --c-ink: #2a1014; --c-muted: #6d5248; --c-line: #dccaa6; --c-card: #fbf5e7; --c-accent: #9e3d22; --c-on-accent: #f2e8d5;
  --d-bg: #9e3d22; --d-ink: #fbf1dc; --d-muted: #f3cfb6; --d-line: #b9593c; --d-card: #8a3219; --d-accent: #f8dc8c; --d-on-accent: #2a1014;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #1e0c10; --ink: #f2e8d5; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
/* Long words (Telugu compounds, the brand name, email) wrap at large text sizes instead of pushing the page sideways. */
h1, h2, h3, h4, p, li, dt, dd, figcaption, td, th { overflow-wrap: break-word; }
ul, ol { list-style: none; }
main { display: block; }
main:focus { outline: none; }

/* Telugu: never tracked or upper-cased, with taller lines. */
:lang(te) { letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; }
h1:lang(te), h2:lang(te), h3:lang(te) { line-height: 1.35; }
.te-name, .te-display { font-family: "Mandali", "Noto Sans Telugu", sans-serif; font-weight: 400; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 20;
  padding: 0.5rem 0.9rem;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
}
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: calc(75rem + 2 * var(--m)); margin: 0 auto; padding: 0 var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g); }
.grid > * { min-width: 0; }
.c-2 { grid-column-end: span 2; } .c-3 { grid-column-end: span 3; } .c-4 { grid-column-end: span 4; } .c-5 { grid-column-end: span 5; }
.c-6 { grid-column-end: span 6; } .c-7 { grid-column-end: span 7; } .c-8 { grid-column-end: span 8; }
.c-12 { grid-column: 1 / -1; }
.s-2 { grid-column-start: 2; } .s-5 { grid-column-start: 5; } .s-6 { grid-column-start: 6; }
.s-7 { grid-column-start: 7; } .s-8 { grid-column-start: 8; }
.center { align-items: center; }
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid > * { grid-column: 1 / -1; }
  .grid > .t-4 { grid-column: span 4; }
}
@media (max-width: 700px) {
  :root { --g: 1rem; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid > *, .grid > .t-4 { grid-column: 1 / -1; }
  .grid > .m-2 { grid-column: span 2; }
}

/* Colour bands. A band re-points the working tokens. */
.band { background: var(--bg); color: var(--ink); padding: clamp(4rem, 8vw, 6.25rem) 0; position: relative; }
.band-b { --bg: var(--b-bg); --ink: var(--b-ink); --muted: var(--b-muted); --line: var(--b-line); --card: var(--b-card); --accent: var(--b-accent); --on-accent: var(--b-on-accent); }
.band-c { --bg: var(--c-bg); --ink: var(--c-ink); --muted: var(--c-muted); --line: var(--c-line); --card: var(--c-card); --accent: var(--c-accent); --on-accent: var(--c-on-accent); }
.band-d { --bg: var(--d-bg); --ink: var(--d-ink); --muted: var(--d-muted); --line: var(--d-line); --card: var(--d-card); --accent: var(--d-accent); --on-accent: var(--d-on-accent); }
.band-e { --bg: #eed99a; --ink: #1e0c10; --muted: #5a4313; --line: #cfb565; --card: #f7e9b9; --accent: #7c2415; --on-accent: #f2e8d5; }

/* Type roles */
.eyebrow { font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
/* Display sizes: they grow with the reader's text size, up to the width at which the longest word in a heading still fits the line on a narrow screen (WCAG 1.4.10 reflow), so words never split. The px floor is the 100% size. */
.display { font-family: var(--font-display); font-weight: 400; font-size: min(clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), max(32px, 15vw)); line-height: 1.1; letter-spacing: -0.01em; }
/* A display heading holding the 15-letter app name keeps it whole on a narrow screen with a lower cap. */
.display-long { font-size: min(clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), max(32px, 10.4vw)); }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: min(clamp(1.875rem, 1.3rem + 2.4vw, 3.375rem), max(30px, 16vw)); line-height: 1.12; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: min(clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem), max(22px, 13vw)); line-height: 1.25; }
.lede { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--muted); }
.small { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.muted { color: var(--muted); }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 1.5rem; } .mt-l { margin-top: 2.25rem; }
.measure { max-width: 60ch; }

/* Header */
.site-header { position: relative; z-index: 5; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; min-height: 4.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem;
  font-family: var(--font-display); font-size: 1.3125rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem; flex: none; }
/* Only the label wrapper: the product name inside it (.bn) keeps its own no-break rules. */
.brand > span, .foot-brand > span { min-width: 0; }
.brand { max-width: 100%; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
/* Inline links inside sentences reach the 24 px target height without changing the line. */
main :is(p, li, dd, td) > a:not([class]) { padding-block: 0.1875rem; }
.site-nav ul { display: flex; gap: 0.375rem; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.5rem 0.875rem; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted); text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.nav-end { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.875rem; max-width: 100%; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.875rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 500; border: 1px solid var(--line); white-space: nowrap;
}
.pill::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--accent); flex: none; }
.lang { display: inline-flex; align-items: center; padding: 0.1875rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.lang a, .lang .on {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.8125rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; line-height: 1.4; text-decoration: none;
}
.lang a { color: var(--muted); }
.lang a:hover { color: var(--ink); }
.lang .on { background: var(--accent); color: var(--on-accent); }

/* The phone menu: a disclosure, no script. */
.menu { display: none; position: relative; }
.menu summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border-radius: 999px; border: 1px solid var(--line); font-size: 0.875rem; font-weight: 500; cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary i { display: block; width: 1rem; height: 0.625rem; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu ul {
  position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: min(12rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: 0.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.6);
}
.menu a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.875rem; border-radius: 0.75rem; text-decoration: none; }
.menu a[aria-current="page"] { background: var(--bg); color: var(--accent); }
@media (max-width: 860px) {
  .nav-in { min-height: 4rem; gap: 0.5rem 0.75rem; flex-wrap: wrap; padding-block: 0.5rem; }
  .site-nav, .site-header .pill, .lang .on { display: none; }
  .lang a { color: var(--ink); }
  .menu { display: block; }
  .nav-end { gap: 0.5rem; }
  .brand { font-size: min(1.125rem, max(18px, 6.5vw)); }
  .brand img { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; }
}
@media (max-width: 480px) {
  /* Icon-only menu button on phones, as on the board; the label stays for screen readers. */
  .menu summary { justify-content: center; min-width: 2.75rem; padding-inline: 0.75rem; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Store chips: the app is in testing, so a slot only says it is not yet
   available. No store badge artwork, no store link. */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.store {
  display: flex; flex-direction: column; justify-content: center; min-width: min(11rem, 100%); min-height: 3.75rem;
  padding: 0.5rem 1.25rem; border-radius: 1rem; border: 1.5px dashed var(--muted); color: var(--ink); text-align: left;
}
.store-k { font-size: 0.8125rem; line-height: 1.2; color: var(--muted); letter-spacing: 0.04em; }
.store-v { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; }
.stores-note { margin-top: 0.875rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); max-width: 44ch; }
@media (max-width: 480px) { .store { min-width: 0; flex: 1 1 9rem; padding-inline: min(1rem, 16px); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3.25rem; padding: 0.5rem 1.625rem;
  border-radius: 999px; font-weight: 600; font-size: 1rem; background: var(--accent); color: var(--on-accent); text-decoration: none;
  text-align: center; max-width: 100%;
}
/* Words stay whole whenever they fit a line. Once the page is narrower than
   20 root text sizes (a phone with enlarged text), an English word wider than
   the line is hyphenated at a syllable instead of cut (page text only:
   labels and the footer never hyphenate); break-word stays only
   as the last resort for words that cannot be hyphenated. The product name
   is never broken or hyphenated (see .bn below). Only addresses (the contact
   email and URLs) may break at any character. */
main, .site-footer { container: page / inline-size; }
.contact { container: contact / inline-size; }
@container page (width < 20rem) {
  main :lang(en) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}
/* The support card is a narrow desktop column: the same at about 200% text. */
@container contact (width < 12rem) {
  :lang(en) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}
:is(.sp, .cw, .url, a[href^="mailto:"], .contact .addr), :is(.sp, .cw) * { hyphens: manual; -webkit-hyphens: manual; }
.url, .contact .addr { overflow-wrap: anywhere; }
/* The product name (CW-1385): the build wraps every word containing it in
   .bn. It never breaks or hyphenates; instead, only when it would be wider
   than its column, it scales down to fit, from the width of its container
   (cqi) and the name's widest measured width (about 9.6em in Latin with
   punctuation, 7.5em in Telugu). Text in the page column measures the page
   container, less the side margins; boxes and narrow columns that hold the
   name measure themselves, so their padding is already allowed for. */
.bn {
  --bn-fit: 9.4cqi;
  white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
  hyphens: manual; -webkit-hyphens: manual;
  font-size: min(1em, var(--bn-fit));
}
.bn-te { --bn-fit: 12cqi; }
/* Headings are set in the narrower display face (about 8.6em). */
:is(h1, h2) .bn { --bn-fit: 10.4cqi; }
:is(h1, h2) .bn-te { --bn-fit: 13.3cqi; }
:is(.fc, .callout, .summary, .honest, .foot-note, .calc .cell) { container-type: inline-size; }
/* Inside a box, less a list item's bullet indent. */
:is(.fc, .callout, .summary, .honest, .foot-note, .calc .cell, .contact) .bn { --bn-fit: 9.6cqi; }
:is(.fc, .callout, .summary, .honest, .foot-note, .calc .cell, .contact) .bn-te { --bn-fit: 13.3cqi; }
.nf a, .site-footer li a, .legal-meta a, .contact .addr a { max-width: 100%; }
/* Labels (navigation, footer headings and links, store chips, buttons) are
   never cut or hyphenated: they wrap only between words, and the columns that
   hold them reflow at enlarged text (footer and support card below) so every
   word fits whole. The footer is never hyphenated. */
:is(.site-nav a, .menu a, .menu summary, .lang a, .site-footer h2, .site-footer li a:not([href^="mailto:"]), .store, .btn),
:is(.site-nav a, .menu a, .menu summary, .lang a, .site-footer h2, .site-footer li a:not([href^="mailto:"]), .store, .btn) * {
  overflow-wrap: normal; word-break: normal; hyphens: none; -webkit-hyphens: none;
}
.site-footer, .site-footer * { hyphens: none; -webkit-hyphens: none; }
.btn { padding-inline: min(1.625rem, 32px); }
@media (max-width: 480px) { .btn { padding-inline: min(1.625rem, 5vw, 32px); } }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }

.honest { margin-top: 3.5rem; padding: clamp(1.375rem, 3vw, 1.875rem) min(clamp(1.375rem, 3vw, 2.125rem), 34px); border-radius: var(--radius); border: 1px solid #c9a22766; background: #301319; color: #f2e8d5; font-size: 1.0625rem; }
.honest a { color: #eed99a; }

/* Home: the dial hero */
.hero { padding: 0; background: radial-gradient(90% 70% at 50% 38%, #4a1d26 0, #1e0c10 62%, #150709 100%); text-align: center; }
/* The dial and its text share one grid cell, so text enlarged past the dial
   grows the hero instead of overlapping what follows. The top margin (a share
   of the cell width) puts the text at 47% of the dial, as on the board. */
.hero .arc { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 67.5rem; margin: 0 auto; padding: 3.5rem var(--m) 0; container-type: inline-size; }
.hero .dial { grid-area: 1 / 1; align-self: start; width: 100%; height: auto; }
.hero .in { grid-area: 1 / 1; justify-self: center; align-self: start; min-width: 0; max-width: 100%; width: min(100%, calc(54% + 1.08 * var(--m))); margin-top: calc(26% - 1.75rem); }
.hero .wm { font-family: "Mandali", sans-serif; font-size: min(clamp(2.125rem, 1rem + 3.9vw, 4.5rem), max(34px, 16vw)); line-height: 1.25; color: var(--brass); }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: min(clamp(1.375rem, 0.625rem + 1.8vw, 2.25rem), max(22px, 15vw)); line-height: 1.3; margin-top: 0.625rem; }
.hero h1:lang(te) { font-size: clamp(1.25rem, 0.55rem + 1.6vw, 1.9375rem); line-height: 1.45; }
.hero .sub { padding-top: 2.25rem; padding-bottom: 4rem; }
.hero .lede { max-width: 56ch; margin: 0 auto; }
.hero .stores { justify-content: center; margin-top: 1.75rem; }
.hero .stores-note { margin: 0.875rem auto 0; }
/* Enlarged text widens the wordmark faster than the dial grows, so once the
   dial is narrower than 39 times the root text size (about 175% text at
   1280 px) the text moves below the dial instead of touching its arc. */
@container (max-width: 39rem) {
  .hero .in { grid-area: 2 / 1; width: auto; margin-top: 1.375rem; }
}
/* The sample strip takes as many columns as its words fit. Its widths are
   container queries in rem, so the column count falls as text grows: five
   columns (the Rahu Kalam range sized to fit on one line) on a desktop wide
   enough for 50 root text sizes, two columns down to 15, then one. Labels,
   Telugu names and times stay whole; each time (11:52 AM) never breaks, and
   the range breaks only after its dash when the line is too narrow for it. */
.hero .wrap { container-type: inline-size; }
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); text-align: left; }
.strip > div { padding: 1.5rem min(1.5rem, 24px) 1.75rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.strip > div:nth-child(even), .strip > div:last-child { border-right: 0; }
.strip > div:last-child { grid-column: 1 / -1; }
.t { white-space: nowrap; }
@container (min-width: 14rem) { .strip .v.time { white-space: nowrap; } }
@container (max-width: 15rem) {
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip > div { border-right: 0; }
}
@media (min-width: 1001px) {
  @container (min-width: 50rem) {
    .strip { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
    .strip > div { border-bottom: 0; }
    .strip > div:nth-child(even) { border-right: 1px solid var(--line); }
    .strip > div:last-child { grid-column: auto; border-right: 0; }
  }
}
.strip .k { display: block; font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.strip .v { display: block; font-family: "Mandali", sans-serif; font-weight: 400; font-size: clamp(1.4375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.4; color: var(--brass); margin-top: 0.25rem; }
.strip .v.time { font-family: var(--font-body); font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.4375rem); line-height: 1.5; }
.strip .u { display: block; font-size: 0.875rem; color: var(--muted); }
.sample { font-size: 0.8125rem; color: var(--muted); text-align: left; padding: 0.625rem 0 2.5rem; }
@media (max-width: 700px) {
  .hero .arc { padding-top: 1.75rem; }
  .hero .in { grid-area: 2 / 1; width: auto; margin-top: 1.375rem; }
  .hero .sub { padding-top: 1.125rem; padding-bottom: 2.75rem; }
  .strip > div { padding: 1rem min(0.875rem, 14px) 1.125rem; }
}

.list li { padding: 1.125rem 0 1.125rem min(2.5rem, 40px); border-top: 1px solid var(--line); position: relative; font-size: 1.125rem; }
.list li::before { content: ""; position: absolute; left: min(0.25rem, 4px); top: 1.625rem; width: min(0.875rem, 14px); height: min(0.875rem, 14px); border-radius: 50%; background: var(--accent); }

/* The Today illustration. Drawn in HTML, not a screenshot, so every word is
   real text at 13px or more. */
.phone {
  position: relative; width: min(100%, 21.25rem); margin: 0 auto; padding: min(0.5625rem, 9px); border-radius: 2.875rem; background: #08080a;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 2.5rem 5rem -1.25rem rgba(0, 0, 0, 0.55);
}
/* Notch: a centred 84 x 24 px pill, 20 px below the top of the phone (board Home A). Fixed px so enlarged text does not resize the hardware. */
.phone::after { content: ""; position: absolute; top: 20px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 999px; background: #08080a; z-index: 2; pointer-events: none; }
.pscr {
  position: relative; border-radius: 2.3125rem; min-height: 36rem; padding: 2.75rem min(1rem, 16px) 0;
  background: radial-gradient(120% 60% at 50% 0, #4a1d26 0, #1e0c10 60%, #150709 100%); color: #f2e8d5; font-size: 0.8125rem; line-height: 1.4;
  display: flex; flex-direction: column;
}
.pscr .top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pscr .top b { font-family: "Mandali", sans-serif; font-weight: 400; font-size: 1.5rem; }
.pscr .top span { color: #c0ad94; font-size: 0.8125rem; }
.pscr .dial { width: 100%; margin-top: 0.625rem; }
.pscr .st { margin-top: 0.5rem; text-align: center; }
.pscr .st b { display: block; font-size: 0.9375rem; font-weight: 600; color: #f0c75e; line-height: 1.45; }
.pscr .st span { color: #c0ad94; font-size: 0.8125rem; }
/* Two tiles across at normal text; one per row once enlarged text would squeeze them. */
.pscr .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: 0.4375rem; margin-top: 0.75rem; }
.pscr .cards > div { background: #301319; border: 1px solid #4a2630; border-radius: 0.875rem; padding: 0.5625rem min(0.6875rem, 11px); min-width: 0; }
.pscr .cards .k { display: block; color: #c0ad94; font-size: 0.8125rem; }
.pscr .cards .v { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
.pscr .cards .u { display: block; color: #e0c77a; font-size: 0.8125rem; }
/* Tabs reflow to fewer columns when enlarged text no longer fits five across, so labels stay whole. */
.pscr .tabs {
  margin: auto calc(-1 * min(1rem, 16px)) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8ch), 1fr)); row-gap: 0.5rem; padding: 0.625rem 0.25rem 1.125rem;
  background: #150709; border-top: 1px solid #4a2630; font-size: 0.8125rem; text-align: center; color: #b8a6a8;
  border-radius: 0 0 2.3125rem 2.3125rem;
}
.pscr .tabs .on { color: #e8b54a; font-weight: 600; }
.pscr .tabs span { min-width: 0; overflow-wrap: break-word; }
.phone-cap { margin-top: 1rem; font-size: 0.8125rem; color: var(--muted); text-align: center; max-width: 21.25rem; margin-left: auto; margin-right: auto; }
.kc .phone-col { min-width: 0; }
@media (max-width: 1000px) { .kc .phone-col { margin-bottom: 1rem; } }

/* Two cities */
.cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, (100% - var(--g)) / 2)), 1fr)); gap: var(--g); }
.city { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.625rem min(1.625rem, 26px) 1.25rem; box-shadow: 0 1.5rem 3.125rem -1.875rem rgba(42, 16, 20, 0.45); min-width: 0; }
.city h3 { font-family: "Mandali", sans-serif; font-weight: 400; font-size: min(1.875rem, max(30px, 14vw)); line-height: 1.3; }
.city h3 .k { display: block; font-family: var(--font-body); font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.city dl { margin-top: 1rem; }
:is(.city, .alm) dl > div > * { min-width: 0; max-width: 100%; }
.city dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 1rem; padding: 0.6875rem 0; border-top: 1px solid var(--line); font-size: 0.96875rem; }
.city dd { font-weight: 600; }
@media (max-width: 700px) { .cities { grid-template-columns: minmax(0, 1fr); margin-top: 2.25rem; } }

/* Five tools */
/* Up to --cols columns; fewer once enlarged text makes a column narrower than 9rem. */
.tools { --cols: 5; --tg: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9rem, (100% - (var(--cols) - 1) * var(--tg)) / var(--cols))), 1fr)); gap: var(--tg); margin-top: 3.5rem; }
.tool { background: var(--card); border-radius: var(--radius); padding: 1.625rem min(1.375rem, 22px) 1.5rem; border: 1px solid var(--line); min-height: 14.375rem; display: flex; flex-direction: column; min-width: 0; }
.tool .te-name { font-size: clamp(1.5625rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.35; color: var(--accent); }
.tool .k { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tool p { margin-top: auto; padding-top: 0.875rem; font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 1000px) { .tools { --cols: 2; } }
@media (max-width: 700px) { .tools { --tg: 0.75rem; margin-top: 2.25rem; } .tool { min-height: 0; padding: 1.125rem min(1rem, 16px); } .tool .te-name { font-size: 1.375rem; } }

/* How it is worked out */
.calc-head { align-items: end; margin-bottom: 3rem; }
.calc .num { font-family: "Mandali", sans-serif; font-size: min(clamp(3rem, 1.5rem + 5vw, 5.5rem), max(48px, 16.5vw)); line-height: 1; color: var(--brass); }
.calc .years { text-align: right; }
.calc .cell { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.calc .cell h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }
.calc .cell p { color: var(--muted); margin-top: 0.5rem; font-size: 1rem; }
.limits { margin-top: 3.5rem; }
.limits h2 { font-family: var(--font-display); font-weight: 400; font-size: min(clamp(1.5rem, 1.2rem + 1vw, 2rem), max(24px, 15vw)); line-height: 1.25; }
.limits ul { margin-top: 1rem; }
.limits li { padding: 0.75rem 0 0.75rem min(1.5rem, 24px); position: relative; border-top: 1px solid var(--line); color: var(--muted); }
.limits li::before { content: ""; position: absolute; left: min(0.125rem, 2px); top: 1.45rem; width: min(0.5rem, 10px); height: 2px; background: var(--accent); }
@media (max-width: 1000px) { .calc .years { text-align: left; } }

.close { text-align: center; }
.close .stores { justify-content: center; margin-top: 1.875rem; }
.close .lede { margin: 1.125rem auto 0; max-width: 52ch; }
.close .store { border-color: var(--b-muted); }

/* Features */
.fh { padding: clamp(3rem, 6vw, 5rem) 0 0; background: radial-gradient(80% 90% at 80% 0, #4a1d26 0, #1e0c10 60%); }
.fh .display { max-width: 17ch; margin-top: 1.125rem; }
.fh .lede { max-width: 60ch; margin-top: 1.375rem; }
.areas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(2.25rem, 5vw, 4rem); }
.areas a:first-child { border-top-left-radius: 1.75rem; }
.areas a:nth-child(5) { border-top-right-radius: 1.75rem; }
.areas a { display: block; min-height: 2.75rem; padding: 1.375rem min(1.25rem, 20px) 1.625rem; color: #1e0c10; text-decoration: none; min-width: 0; }
.areas a .te-name { display: block; font-size: min(clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem), max(24px, 10.5vw)); line-height: 1.3; }
.areas a .k { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.areas a:nth-child(1) { background: #c9a227; }
.areas a:nth-child(2) { background: #f2e8d5; }
.areas a:nth-child(3) { background: #9e3d22; color: #fbf1dc; }
.areas a:nth-child(4) { background: #eed99a; }
.areas a:nth-child(5) { background: #301319; color: #f2e8d5; }
.areas a:focus-visible { outline-offset: -4px; outline-color: currentColor; }
@media (max-width: 700px) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas a:first-child { border-top-left-radius: 1.25rem; }
  .areas a:nth-child(2) { border-top-right-radius: 1.25rem; }
  .areas a:nth-child(5) { border-top-right-radius: 0; }
  .areas a { padding: 0.875rem min(1rem, 16px) 1rem; }
  .areas a:last-child { grid-column: 1 / -1; }
}
/* Five tiles a row on a desktop, two once enlarged text would cut an area
   name there, then one. */
.fh .wrap { container-type: inline-size; }
@container (max-width: 32rem) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas a:first-child { border-top-left-radius: 1.25rem; }
  .areas a:nth-child(2) { border-top-right-radius: 1.25rem; }
  .areas a:nth-child(5) { border-top-right-radius: 0; }
  .areas a:last-child { grid-column: 1 / -1; }
}
@container (max-width: 16rem) {
  .areas { grid-template-columns: minmax(0, 1fr); }
  .areas a:first-child { border-top-right-radius: 1.25rem; }
  .areas a:nth-child(2) { border-top-right-radius: 0; }
}
.area { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--bg); color: var(--ink); scroll-margin-top: 1rem; }
.area-h { display: flex; align-items: baseline; gap: 0.375rem 1.25rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); flex-wrap: wrap; }
.area-h > * { min-width: 0; }
.area-h h2 { font-family: "Mandali", sans-serif; font-weight: 400; font-size: min(clamp(3rem, 1.8rem + 4vw, 5.5rem), max(48px, 24vw)); line-height: 1.2; }
.area-h .k { font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.area-h p { margin-left: auto; max-width: 36ch; color: var(--muted); font-size: 1rem; }
@media (max-width: 700px) { .area-h p { margin-left: 0; } }
.fc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.625rem min(1.625rem, 26px) 1.75rem; height: 100%; }
.fc h3 { font-family: var(--font-display); font-weight: 400; font-size: min(clamp(1.375rem, 1.2rem + 0.5vw, 1.5625rem), max(22px, 11.5vw)); line-height: 1.25; }
.fc p { margin-top: 0.625rem; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.fc .tag { display: inline-block; margin-top: 1rem; padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid var(--line); font-size: 0.8125rem; }
/* Feature cards: three, then two, across at normal text. Each card keeps a minimum width that grows with the text, so cards wrap to fewer per row as text is enlarged and their words never split. */
.cards-grid { display: flex; flex-wrap: wrap; gap: var(--g); }
.cards-grid > * { flex: 1 1 100%; min-width: min(100%, 15rem); }
@media (min-width: 1001px) {
  .cards-grid > .c-4 { flex-basis: calc((100% - 2 * var(--g)) / 3); }
  .cards-grid > .c-6 { flex-basis: calc((100% - var(--g)) / 2); }
}
/* The four-card row (c-3): four across when four 15rem cards fit, else two
   by two, else one per row. Measured in rem on the row itself, so it never
   leaves three cards and one stretched card, at any width or text size. */
.cards-grid:has(> .c-3) { container: cards4 / inline-size; }
@container cards4 (min-width: 31.5rem) { .cards-grid > .c-3 { flex-basis: calc((100% - var(--g)) / 2); } }
@container cards4 (min-width: 64.5rem) { .cards-grid > .c-3 { flex-basis: calc((100% - 3 * var(--g)) / 4); } }

/* The sample day, set like an almanac column */
.alm { border-left: 1px solid var(--ink); padding-left: 1.75rem; }
.alm h3 { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding-bottom: 0.625rem; border-bottom: 1px solid var(--ink); }
.alm dl > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; padding: 0.6875rem 0; border-bottom: 1px dotted #b79d7c; }
.alm dt { font-size: 0.875rem; color: var(--muted); }
.alm dd { margin-left: auto; text-align: right; }
.alm dd b { font-family: "Mandali", sans-serif; font-weight: 400; font-size: 1.4375rem; line-height: 1.3; color: var(--accent); }
.alm dd b.time { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
.alm dd span { display: block; font-size: 0.8125rem; color: var(--muted); }
.alm .small { margin-top: 0.75rem; }
@media (max-width: 1000px) { .alm { border-left: 0; padding-left: 0; margin-top: 2rem; } }

/* Legal pages: privacy and terms */
.legal-head { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.legal-head .display { margin-top: 1rem; max-width: 18ch; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.75rem; font-size: 0.875rem; color: var(--muted); }
.legal-meta b { color: var(--ink); font-weight: 500; }
.legal-meta a { color: var(--ink); display: inline-flex; align-items: center; min-height: 1.5rem; }
.legal-body { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); align-items: start; }
/* Sticky only while it fits: capped to the viewport and scrollable, so every entry stays reachable and focused links scroll into view at enlarged text. */
.toc { position: sticky; top: 1.5rem; font-size: 0.9375rem; max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 0.5rem; }
.toc h2 { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 0.75rem; }
.toc li { border-left: 2px solid var(--line); }
.toc a { display: flex; align-items: center; min-height: 2.25rem; padding: 0.375rem 0 0.375rem 1rem; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); }
@media (max-width: 1000px) { .toc { position: static; max-height: none; overflow: visible; } .toc ul { columns: 2; column-gap: 1.5rem; } .toc li { break-inside: avoid; } }
@media (max-width: 700px) { .toc ul { columns: 1; } }
.prose { max-width: 42.5rem; }
.prose section { padding-top: 2.75rem; scroll-margin-top: 1rem; }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: min(clamp(1.5625rem, 1.3rem + 0.8vw, 1.875rem), max(25px, 15vw)); line-height: 1.25; }
/* Inline number, so a long first word wraps whole onto the next line instead of overflowing beside it. */
.prose h2 .num { display: inline-block; margin-right: 1rem; font-size: 0.875rem; color: var(--accent); letter-spacing: 0.06em; min-width: 1.5rem; font-family: var(--font-body); }
.prose p, .prose li { margin-top: 0.875rem; }
.prose .cta { margin-top: 1.5rem; }
.prose ul li { padding-left: min(1.375rem, 22px); position: relative; }
.prose ul li::before { content: ""; position: absolute; left: min(0.125rem, 2px); top: 0.8em; width: min(0.5rem, 10px); height: 2px; background: var(--accent); }
.prose a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a:not(.btn) { display: inline-block; min-height: 1.5rem; }
.prose .btn { text-decoration: none; margin-top: 1.5rem; }
.prose .updated { color: var(--muted); font-size: 0.9375rem; }
.summary { padding: 1.75rem min(1.875rem, 30px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.summary h2 { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; font-family: var(--font-body); display: block; }
.summary li { margin-top: 0.75rem; }
.callout { margin-top: 1.75rem; padding: 1.375rem min(1.5rem, 24px); border-left: 4px solid var(--accent); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
@media (max-width: 700px) { .summary { padding: 1.375rem min(1.25rem, 20px); } .prose h2 .num { margin-right: 0.75rem; } }

/* A table can scroll sideways on a narrow screen or with large text, so its
   container is a named, keyboard-reachable region (role="region",
   aria-labelledby, tabindex="0"). */
.table-scroll { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: 0.75rem; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
caption { text-align: left; font-weight: 600; padding: 0.75rem 1rem 0.25rem; }
th, td { text-align: left; vertical-align: top; padding: 0.75rem 1rem; border-top: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 0.875rem; }
/* Inside the scroll region, keep whole words and give each column a readable width instead of breaking into single characters. */
.table-scroll :is(th, td) { overflow-wrap: break-word; word-break: normal; min-width: 9em; }
.table-scroll td:first-child { min-width: 11em; }

/* Support */
.sh { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.sh .display { margin-top: 1rem; max-width: 15ch; }
.sh .lede { margin-top: 1.25rem; max-width: 54ch; }
.sb { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(4rem, 8vw, 6.25rem); align-items: start; }
.contact { padding: min(2rem, 6vw, 40px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.contact h2 { font-family: var(--font-display); font-weight: 400; font-size: min(1.875rem, max(30px, 20vw)); line-height: 1.25; }
.contact p { margin-top: 0.75rem; color: var(--muted); }
.contact .btn { margin-top: 1.375rem; width: 100%; }
.contact .addr { margin-top: 0.75rem; color: var(--ink); }
.contact .addr a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.contact .warn { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink); }
@media (max-width: 1000px) { .contact { margin-bottom: 2.25rem; } }
/* At enlarged text on a desktop (the page narrower than 48 root text sizes)
   the support card and the questions stack, as on a tablet, so the card's
   heading and button keep whole words. */
@container page (width < 48rem) {
  .sb > * { grid-column: 1 / -1; }
  .contact { margin-bottom: 2.25rem; }
}
/* Support questions: native disclosure widgets (details/summary), keyboard operable with no script; the browser exposes each one's expanded state. */
.faq-item { border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: min(1rem, 16px); min-height: 2.75rem; padding: 1.125rem 0;
  font-family: var(--font-display); font-weight: 400; font-size: min(clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem), max(19px, 13vw)); line-height: 1.35;
}
/* The question holding the 15-letter app name keeps it whole with a lower cap. */
#where-to-get:lang(en) summary { font-size: min(clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem), max(19px, 8.6vw)); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-family: var(--font-body); color: var(--accent); font-size: min(1.5rem, 24px); line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 0.25rem; }
.faq-item p { margin: 0 0 1.375rem; color: var(--muted); max-width: 60ch; }
.faq-item a, .faq-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; display: inline-block; min-height: 1.5rem; }
.faq-note { margin-top: 2rem; }
.faq-note h3 { font-family: var(--font-display); font-weight: 400; font-size: min(clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem), max(19px, 11vw)); line-height: 1.35; }
.faq-note p { margin-top: 0.75rem; color: var(--muted); max-width: 60ch; }
.faq-group + .faq-group { margin-top: 2.5rem; }
.faq-group > h2 { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.75rem; }

/* Not found */
.nf { padding: clamp(4rem, 8vw, 6rem) 0; }
.nf ul { margin-top: 1.5rem; }
.nf li + li { margin-top: 0.5rem; }
/* Inline-block, not inline-flex, so a long hyphenated name wraps inside the link. */
.nf a { display: inline-block; min-height: 2.75rem; padding-block: max(0px, calc((2.75rem - 1lh) / 2)); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Footer */
.site-footer { background: var(--bg); color: var(--ink); padding: clamp(3rem, 6vw, 4.5rem) 0 2.25rem; border-top: 1px solid var(--line); }
.site-footer .grid { row-gap: 1.75rem; }
/* At enlarged text the footer is measured in text sizes, not pixels: once it
   is narrower than 40 root text sizes (a phone, or a desktop at about 200%
   text), the brand takes a full row and the link columns share the rest at
   no less than 9 text sizes each, stacking when two no longer fit. Every
   heading, link and the product name then fit whole. At normal text on a
   desktop the 12-column layout is unchanged. */
@container page (width < 40rem) {
  .site-footer .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
  .site-footer .grid > * { grid-column: auto; }
  .site-footer .grid > :not(nav) { grid-column: 1 / -1; }
}
.site-footer h2 { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 0.5rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: 0.9375rem; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.site-footer li a[aria-current="page"] { color: var(--accent); }
.foot-brand { font-family: var(--font-display); font-size: min(1.3125rem, max(21px, 7.5vw)); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.foot-brand img { width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem; }
.foot-blurb { margin-top: 1rem; max-width: 36ch; font-size: 0.9375rem; color: var(--muted); }
.site-footer .stores { margin-top: 1.375rem; }
.foot-note { margin-top: 3rem; padding: 1.125rem min(1.375rem, 22px); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.875rem; color: var(--muted); }
.foot-base { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; font-size: 0.875rem; color: var(--muted); }
.cw { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--ink); flex-wrap: wrap; }
.cw img { height: 0.9375rem; width: auto; }
.foot-base .sp { margin-left: auto; }
:is(.foot-base, .legal-meta) > span { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
@media (max-width: 700px) { .foot-base .sp { margin-left: 0; width: 100%; } }

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