/* wristmaze.com (WM-0046): the frame every page shares, in the v4 look the PO
   approved (WM-0207 round 4c design.md, WM-0206 SITE_UX.md §3–§4; WM-0204):
   the warm off-white ground, Albert Sans, the Heirloom wordmark beside the
   round icon (flat), the header and its Menu, the footer, the cookie bar and
   sheet. The guide and legal pages keep slice 1's reading styles until their
   own round (.doc below); the start page and coming soon add home.css.
   Our own cards stand on the ground with soft shadows; images and video get
   rounded corners and no shadow, and Apple's images never get one
   (APPLE_ASSETS.md §2). Type: Albert Sans and, for the chapters' numerals
   only, Nunito, both SIL OFL 1.1 (fonts/SOURCE.md). */
@font-face {
  font-family: "Albert Sans";
  src: url("/assets/fonts/albertsans-latin.acf304385d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/assets/fonts/albertsans-latin-ext.2260ced3c4.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The game's face, for the chapters' drilled numerals only: the tokens' 1–5
   at 800, nothing else in the file (fonts/SOURCE.md). */
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-800-digits.368e969f49.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0031-0035;
}

:root {
  --ground: #f9f5f2;        /* the warm off-white ground, also the theme colour */
  --light: #fffaf5;         /* its quiet warm light */
  --ink: #211a16;           /* every text on the ground */
  --ink-2: #55483e;         /* supporting text */
  --link: #365d4c;
  --card: #fffdf9;          /* chips, tables, fields, the bar */
  --card-head: #f1e8dc;
  --card-edge: #cabaaa;
  --rule-soft: #ddd1c5;
  --hairline: #cbbcad;
  --edge: #b7a590;          /* the cookie bar's and menu's edge */
  --field-edge: #7e6b5a;
  --choice-edge: #756458;
  --error: #933225;
  --success: #285d40;
  --face: #ffffff;          /* slice 1's cards on the guide and legal pages */
  --face-muted: #4b443c;
  --ring: #c8401e;
  --rule: #cfccc6;
  --shadow-ink: 87 65 43;   /* our shadows: warm, never on a watch */
  --shadow-rest: 0 18px 32px -14px rgb(var(--shadow-ink) / 0.32);

  --font-text: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-numeral: "Nunito", "Albert Sans", system-ui, sans-serif;

  --radius: 32px;
  --radius-s: 20px;

  --size-h: clamp(2rem, 3.6vw, 3.375rem);
  --size-l: clamp(1.3125rem, 1.9vw, 1.75rem);
  --size-body: 1.125rem;
  --size-small: 0.875rem;

  --gutter: 64px;           /* the page's side margin: 64, 32 on tablets, 16 on phones */
  --margin: clamp(16px, 2.4vw, 40px);
  /* The Heirloom wordmark's letter height in the header (BRAND.md §1: never
     under 24 px); the icon is 1.6 times it, the gap half. */
  --mark-h: 24px;
  --header-h: 98px;
  color-scheme: light;
}
@media (max-width: 1023px) {
  :root { --gutter: 32px; }
}
@media (max-width: 599px) {
  :root { --size-h: 1.8125rem; --size-body: 1.0625rem; --gutter: 16px; --header-h: 88px; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--ground); }
html.wm-consent-open { scroll-padding-bottom: calc(var(--wm-consent-h, 0px) + 16px); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--ground);
  font: 450 var(--size-body)/1.55 var(--font-text);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
img, video { max-width: 100%; height: auto; }
h1, h2 { font-weight: 650; text-wrap: balance; }
h3 { font-weight: 650; }
p, li { text-wrap: pretty; }
strong { font-weight: 700; }

/* A link to another page or site moves between them with a cross-fade (M13). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

.skip {
  position: absolute;
  z-index: 120;
  left: 16px;
  top: -64px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--light);
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* The logo: the round icon beside the Heirloom wordmark, flat. The wordmark is
   the image (alt "WristMaze"); the icon beside it is drawn here, so the name
   is read once. */
.brand,
.soon-mark {
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 1.5rem;
}
.brand::before,
.soon-mark::before {
  content: "";
  flex: none;
  width: calc(var(--mark-h) * 1.6);
  height: calc(var(--mark-h) * 1.6);
  background: url("/assets/img/icon-round-80.ff0f53607f.avif") center / contain no-repeat;
  background-image: image-set(url("/assets/img/icon-round-40.013975a9a2.avif") 1x, url("/assets/img/icon-round-80.ff0f53607f.avif") 2x, url("/assets/img/icon-round-120.9e8e845fe8.avif") 3x);
}
.brand img, .soon-mark img { display: block; width: auto; height: var(--mark-h); }
.brand { display: inline-flex; align-items: center; gap: calc(var(--mark-h) / 2); min-height: 44px; }

/* The header: the lockup, the links right-aligned; Menu below 1024 px. Not sticky. */
.top {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(1440px, 100%);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.nav-wide { display: flex; gap: 30px; font-size: 14px; line-height: 22px; font-weight: 600; }
.nav-wide a { position: relative; padding: 11px 0; text-decoration: none; }
.nav-wide a:hover { text-decoration: underline; }
/* The current page: a small ball under its label. */
.nav-wide a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff 0, #b7bdc0 30%, #373d42 75%);
}
.menu { display: none; }
.menu summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  font-weight: 650;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after {
  content: "";
  width: 14px;
  height: 10px;
  background:
    linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 1.5px no-repeat;
}
.menu nav {
  position: absolute;
  z-index: 95;
  left: 16px;
  right: 16px;
  top: 79px;
  padding: 12px 18px;
  border: 1px solid var(--edge);
  border-radius: 15px;
  background: var(--card);
  box-shadow: 0 12px 30px rgb(90 69 51 / 0.1);
}
.menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px solid #e0d4c7;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}
.menu nav a:last-child { border-bottom: 0; }
.menu nav a[aria-current="page"]::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff 0, #b7bdc0 30%, #373d42 75%);
}
@media (max-width: 1023px) {
  .nav-wide { display: none; }
  .menu { display: block; }
  .menu nav { left: var(--gutter); right: var(--gutter); }
}

/* The footer (round 7b's plates): a hairline; the lockup, and the guides,
   News, About and the press kit at its right; the copyright, then the legal
   pages and Cookie settings; Apple's credit. Links 16/24 with 44 px targets,
   the current page's in 650 with a green underline. Below 1024 px the rows
   stack; on phones every link is a row of its own. The legal links share the
   copyright's row through a subgrid (one footer navigation). */
.foot {
  width: min(1200px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 60px 0 64px;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
  line-height: 24px;
}
.foot-in {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 32px 40px;
}
.foot-brand { z-index: 1; grid-row: 1; grid-column: 1 / -1; justify-self: start; }
.foot-nav { grid-row: 1 / 3; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; align-items: center; }
.foot-links { grid-row: 1; grid-column: 1 / -1; justify-self: end; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.foot-legal { grid-row: 2; grid-column: 2; justify-self: start; }
.foot-links a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-links a[aria-current] { font-weight: 650; text-decoration: underline; text-decoration-color: var(--link); text-underline-offset: 5px; }
.foot-copy { z-index: 1; grid-row: 2; grid-column: 1; margin: 0; }
.foot-credit { grid-row: 3; grid-column: 1 / -1; max-width: 1160px; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 22px; }
@media (max-width: 1023px) {
  .foot { padding-top: 48px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .foot-nav { grid-row: 2 / 5; grid-column: 1; }
  .foot-links { grid-column: 1; justify-self: start; margin-top: 32px; }
  .foot-copy { grid-row: 3; margin-top: 32px; }
  .foot-legal { grid-row: 3; grid-column: 1; margin-top: 16px; }
  .foot-credit { grid-row: 5; margin-top: 32px; }
}
@media (max-width: 767px) {
  .foot-links { flex-direction: column; gap: 4px; }
}

/* Content pages (slice 1's reading styles until their own round): the words on
   the ground, tables on lifted cards. */
.doc { flex: 1; width: min(46rem, 100%); margin: 0 auto; padding: 0.5rem var(--margin) 6rem; }
.doc h1 { font-size: var(--size-h); line-height: 1.04; letter-spacing: -0.025em; margin: 1.5rem 0 1rem; }
.doc h2 { font-size: var(--size-l); line-height: 1.2; letter-spacing: -0.01em; margin: 2.5em 0 0.5em; }
.doc h2, .doc h3 { scroll-margin-top: 1rem; }
.doc h3 { font-size: 1.1875rem; line-height: 1.3; margin: 1.75rem 0 0.4rem; }
.doc video, .doc img { display: block; border-radius: var(--radius-s); margin: 2rem 0; background: #000; }
.doc figure { margin: 2rem 0; }
.doc figure video { margin: 0; }
/* Tables (the facts, the policies) on a card: a word too long for its column
   (a cookie name) wraps rather than widen the page; on phones a table wider
   than the card scrolls inside it (the cookie list). */
.doc table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
  line-height: 1.45;
  background: var(--face);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-rest);
}
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--rule); overflow-wrap: break-word; }
.doc th:first-child, .doc td:first-child { padding-left: 1.25rem; }
.doc th:last-child, .doc td:last-child { padding-right: 1.25rem; }
.doc tr:last-child > td, .doc tr:last-child > th { border-bottom: 0; }
.doc thead th { font-weight: 700; border-bottom-color: var(--face-muted); }
@media (max-width: 32rem) {
  .doc table { display: block; overflow-x: auto; font-size: 0.875rem; }
  .doc th, .doc td { padding-right: 0.5rem; }
  .doc th:first-child, .doc td:first-child { padding-left: 0.875rem; }
  .doc th:last-child, .doc td:last-child { padding-right: 0.875rem; }
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: var(--size-small); }
.crumbs li + li::before { content: "›"; content: "›" / ""; margin-right: 0.5rem; }
.meta { font-size: 0.9375rem; }
.list { list-style: none; padding: 0; }
.list li { padding: 1rem 0; border-bottom: 1px solid rgb(33 26 22 / 0.3); }
.list a { font-weight: 650; font-size: var(--size-l); }
.list p { margin: 0.25rem 0 0; }
.badge { display: inline-block; }
.badge img { display: block; height: 44px; width: auto; }
.wm-lead { margin: 2.5rem 0 0; }

/* Forms (slice 1's, on the support page): the button answers at once (pressed
   state, then a moving bar while sending). home.css draws the start page's. */
.wm-form { display: grid; gap: 0.5rem; width: min(30rem, 100%); margin: 1.5rem auto 0; text-align: left; }
.wm-form label { font-weight: 600; }
.wm-row { display: flex; gap: 0.5rem; }
.wm-row input { flex: 1; min-width: 0; }
.wm-form input, .wm-form textarea {
  min-height: 48px;
  font: inherit;
  color: var(--ink);
  background: var(--face);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0 1.125rem;
}
.wm-form textarea { border-radius: var(--radius-s); padding: 0.75rem 1.125rem; }
.wm-form ::placeholder { color: var(--face-muted); opacity: 1; }
.wm-form button {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: #f0b84a;
  border: 0;
  border-radius: 999px;
  padding: 0 1.5rem;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), filter 140ms ease;
}
.wm-form button:active, .wm-form button.is-sending { transform: scale(0.97); filter: brightness(0.94); }
.wm-form button.is-sending::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 40%;
  background: var(--ink);
  animation: wm-progress 0.9s ease-in-out infinite;
}
@keyframes wm-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.wm-note { margin: 0; font-size: var(--size-small); }
.wm-optional { font-weight: 400; }
.wm-status:empty { display: none; }
.wm-status { margin: 0; font-weight: 700; }
.wm-status.is-error { padding-left: 0.625rem; border-left: 4px solid var(--ring); }
.wm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The cookie banner (WM-0082; SITE_UX.md §4.1; WM-0208 variant (b)): a bar
   across the bottom at 768 px and wider, a sheet below; Accept all, Reject
   all and Choose are three equal buttons, in one style. It is
   fixed, so it moves nothing when it appears; the start page keeps every watch
   clear of it at rest. */
.wm-consent {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 50vh;
  max-height: 50svh;
  overflow-y: auto;
  padding: 11px var(--gutter);
  color: #241c16;
  background: var(--card);
  border-top: 1px solid var(--edge);
  box-shadow: 0 -10px 24px rgb(87 65 43 / 0.05);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title actions" "text actions" "choices choices";
  column-gap: 26px;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  animation: wm-slide-up 200ms ease-out;
}
@keyframes wm-slide-up { from { transform: translateY(100%); } }
.wm-consent[hidden], .wm-consent [hidden] { display: none; }
.wm-consent h2 { grid-area: title; margin: 0 0 4px; font-size: 18px; line-height: 22px; font-weight: 700; align-self: end; }
.wm-consent h2:focus { outline: none; }
.wm-consent h2:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* The title and the words: grid items of the banner, a block of their own in the compact sheet. */
.wm-consent-text { display: contents; }
/* The words are body text of the component, 16/24 (PATTERN_SCAN F07). */
.wm-consent-text > p { grid-area: text; margin: 0; align-self: start; max-width: 900px; font-size: 16px; line-height: 24px; }
.wm-consent a { color: var(--link); }
.wm-consent-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; }
.wm-consent-choice {
  min-width: 144px;
  min-height: 44px;
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--choice-edge);
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.wm-consent-choice:hover { background: #f4ece2; }
.wm-consent-choice:active { background: #ece1d4; box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.12); }
.wm-consent-choices { grid-area: choices; display: grid; gap: 12px; margin: 12px 0 4px; padding: 12px 0 0; border: 0; border-top: 1px solid #c9bbad; font-size: 16px; line-height: 24px; }
.wm-consent-choices label { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; max-width: 900px; }
.wm-consent-choices label > span { order: -1; }
/* The categories are switches (checkboxes, so they work as they are). */
.wm-consent-choices input {
  appearance: none;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 12px 50%, var(--card) 8.5px, transparent 9px) #7b7169;
  cursor: pointer;
}
.wm-consent-choices input:checked { background: radial-gradient(circle at 30px 50%, var(--card) 8.5px, transparent 9px) var(--link); }
.wm-consent-choices input:disabled { cursor: default; opacity: 0.75; }
.wm-consent-choices .wm-consent-choice { justify-self: start; }
/* The choices' first paragraph (batch F2): before Necessary. */
.wm-consent-settings { margin: 0; max-width: 900px; }
/* The second layer's actions: Save my choice, Reject all, Accept all. */
.wm-consent-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Your consent record: <ID>", where the browser holds one. */
.wm-consent-record { margin: 0; max-width: 900px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .wm-consent {
    padding: 16px var(--gutter) 20px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title title title" "text text text" "accept reject settings" "choices choices choices";
    gap: 0 12px;
    align-items: start;
    line-height: 20px;
  }
  .wm-consent h2 { align-self: center; margin: 0; }
  .wm-consent-text > p { margin-top: 5px; }
  .wm-consent-actions { display: contents; }
  .wm-consent-actions > [data-wm-consent="accept"] { grid-area: accept; margin-top: 14px; }
  .wm-consent-actions > [data-wm-consent="reject"] { grid-area: reject; margin-top: 14px; }
  .wm-consent-actions > [data-wm-consent="settings"] { grid-area: settings; margin-top: 14px; }
  .wm-consent-choice { min-width: 0; width: 100%; padding: 11px 6px; }
  .wm-consent-choices .wm-consent-choice { width: auto; min-width: 144px; padding: 11px 12px; }
  .wm-consent { grid-template-columns: 1fr 1fr 1fr; }
}
/* Short phones (under 768 × 720), and from 768 px wide the short windows
   where the start page stacks its first screen (home.css, the plate at
   390): a compact banner, so it stays clear of the start page's action
   (Notify me or the badge) before a choice (webco, 2026-10-17): the title
   runs into the words, the three buttons share a row. Where the viewport is
   shorter still, home.css caps it there and its words scroll inside, the
   buttons always in view. */
@media (max-width: 767px) and (max-height: 719.98px), (min-width: 768px) and (max-width: 773px) and (max-height: 903.98px), (min-width: 774px) and (max-width: 799px) and (max-height: 879.98px), (min-width: 800px) and (max-width: 853px) and (max-height: 861.98px), (min-width: 854px) and (max-width: 895px) and (max-height: 671.98px), (min-width: 896px) and (max-width: 991px) and (max-height: 647.98px), (min-width: 992px) and (max-width: 1023px) and (max-height: 623.98px), (min-width: 1024px) and (max-width: 1055px) and (max-height: 647.98px), (min-width: 1056px) and (max-width: 1215px) and (max-height: 623.98px) {
  .wm-consent { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px var(--gutter) 10px; line-height: 24px; }
  .wm-consent-text { display: block; min-height: 48px; overflow-y: auto; }
  .wm-consent h2 { display: inline; margin: 0 4px 0 0; font-size: 16px; line-height: 24px; }
  .wm-consent-text > p { display: inline; margin: 0; }
  .wm-consent-actions { display: flex; flex: none; align-items: stretch; gap: 8px; max-width: 640px; }
  .wm-consent-actions > .wm-consent-choice { flex: 1 1 0; width: auto; margin: 0; padding: 11px 6px; }
  .wm-consent-choices { flex: none; margin: 4px 0 0; }
}
/* The first layer's words are long (WM-0201 batch F: up to 560 characters).
   The bar and the sheet keep the height the start page reserves for them
   (home.css --bar: its value at each width, less its 4 px), so the first
   screen stays as approved, and the words scroll inside, the buttons always in
   view (WM-0208). The choices, once open, take the room they need. */
.wm-consent { --wm-consent-cap: 121px; }
@media (max-width: 1215px) { .wm-consent { --wm-consent-cap: 145px; } }
@media (max-width: 1055px) { .wm-consent { --wm-consent-cap: 169px; } }
@media (max-width: 1023px) { .wm-consent { --wm-consent-cap: 145px; } }
@media (max-width: 991px) { .wm-consent { --wm-consent-cap: 169px; } }
@media (max-width: 895px) { .wm-consent { --wm-consent-cap: 193px; } }
@media (max-width: 839px) { .wm-consent { --wm-consent-cap: 217px; } }
@media (max-width: 799px) { .wm-consent { --wm-consent-cap: 241px; } }
@media (max-width: 773px) { .wm-consent { --wm-consent-cap: 265px; } }
@media (max-width: 767px) { .wm-consent { --wm-consent-cap: 240px; } }
/* At the specificity of .wm-consent, so home.css's own cap for the compact
   banner (which keeps the start page's action clear) still wins there. */
.wm-consent:where(:not(.is-choosing)) {
  max-height: min(50vh, var(--wm-consent-cap));
  max-height: min(50svh, var(--wm-consent-cap));
}
.wm-consent:not(.is-choosing) { grid-template-rows: auto minmax(0, 1fr); }
.wm-consent:not(.is-choosing) .wm-consent-text > p { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 767px) {
  .wm-consent:not(.is-choosing) { grid-template-rows: auto minmax(0, 1fr) auto; }
}
/* Watch-sized screens: the whole width; the sheet scrolls inside. */
@media (max-width: 20rem) {
  .wm-consent { padding: 12px; font-size: 14px; }
  .wm-consent h2 { font-size: 16px; }
}
/* After a choice: a toast for 3 s (consent.js), read out as a status. */
.wm-toast {
  position: fixed;
  z-index: 110;
  left: 16px;
  bottom: 84px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  color: #fffaf5;
  background: #272019;
  font-size: 14px;
  line-height: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.wm-toast:empty { padding: 0; }
.wm-toast.is-shown { opacity: 1; }
@media (min-width: 768px) {
  .wm-toast { left: var(--gutter); bottom: 32px; }
}
/* A watch's <picture> (mkt1's WebP first, then the PNG) adds no box: its
   image is laid out as if it stood alone. */
.pic { display: contents; }
.wm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .wm-form button, .wm-consent-choice { transition: none; }
  .wm-form button.is-sending::after { animation-duration: 2.4s; }
  .wm-consent { animation: none; }
  .wm-toast { transition: none; }
}
@media print {
  .doc table { box-shadow: none; }
  .wm-consent, .wm-toast, .skip { display: none !important; }
}