/* The static pages' one look (DESIGN.md §12): the Certified Pre-Owned explainer, the Terms,
   Privacy and Cookies notices and the api's reference pages (/rolex-cpo/{REF}), in every
   language. Plain CSS: Hosting serves the sheet as it is, outside the app and its Tailwind
   build, so each value is written out here as the design
   tokens hold it (packages/shared/src/design-tokens.ts), under the name the app's theme gives it,
   and src/static-pages/static-css.test.ts fails when one drifts. Light only, as the app is: no
   dark mode. The app's black header (the vitrine), then the ivory page: the words ink, graphite
   and stone, one ink button, hairlines between sections, 2px corners, the reading frame (720px). */

/* The brand fonts, the app's own (DESIGN.md §3), in the weights these pages set: the latin
   subset, which holds every letter the four languages use. The build writes the files from
   @fontsource into dist/fonts, and the dev server serves them there (src/static-pages/plugin.ts),
   so no font file is committed. Until one arrives, the stack's next family shows the words. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-600-normal.woff2) format('woff2');
}

:root {
  color-scheme: light;

  /* Colours (DESIGN.md §2), with their contrast on ivory (WCAG 2.2 AA). */
  --background: #f7f5f0; /* ivory: the page */
  --foreground: #16151a; /* ink: titles, links, the current page: 16.7:1 */
  --foreground-2: #45413b; /* graphite: reading text: 9.3:1 */
  --muted-foreground: #6b665e; /* stone: dates, notes, the notice, the navs: 5.2:1 */
  --border: #e3ded4; /* hairlines between sections and rows: decorative */
  --primary: #16151a; /* the one button */
  --primary-foreground: #f7f5f0; /* its words: 16.7:1, 10.9:1 on its hover */
  --ring: #16151a; /* the focus ring: 16.7:1 */
  --brand-green: #176449; /* Certified Pre-Owned: the guarantee's rule, 6.5:1 */

  /* The header's black (the app's vitrine), with its contrast there. */
  --vitrine: #111015; /* the header, and the browser bar above it (theme-color) */
  --on-vitrine: #f3f0ea; /* the wordmark, the current language, the focus ring: 16.6:1 */
  --on-vitrine-muted: #a8a39a; /* the eyebrow, the subline, the other languages: 7.5:1 */

  --radius: 2px;

  /* The families (the serif with lining figures, the sans with Inter's own forms) and weights. */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-serif--font-feature-settings: 'lnum';
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-sans--font-feature-settings: 'cv11', 'ss01';
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --tracking-wordmark: 0.24em;

  /* The type styles these pages use (DESIGN.md §3), phone first; they step up below. */
  --text-title-1: 2.25rem;
  --text-title-1--line-height: 1.05;
  --text-title-1--font-weight: 500;
  --text-title-2: 1.75rem;
  --text-title-2--line-height: 1.25;
  --text-title-2--font-weight: 500;
  --text-title-3: 1.5rem;
  --text-title-3--line-height: 1.25;
  --text-title-3--font-weight: 500;
  --text-card-title: 1.25rem;
  --text-card-title--line-height: 1.1;
  --text-card-title--font-weight: 600;
  --text-body-lg: 1rem;
  --text-body-lg--line-height: 1.55;
  --text-body-lg--font-weight: 400;
  --text-body: 0.875rem;
  --text-body--line-height: 1.25rem;
  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.25rem;
  --text-label: 0.8125rem;
  --text-label--line-height: 1.25rem;
  --text-label--font-weight: 500;
  --text-label--letter-spacing: 0.12em;
  --text-wordmark-20: 1.25rem;
  --text-wordmark-20--line-height: 1.75rem;

  /* Spacing (DESIGN.md §4): the named steps; the others are the 4px scale's 4, 12, 16 and 32. */
  --spacing-stack: 0.5rem;
  --spacing-gutter: 0.75rem;
  --spacing-group: 1.5rem;
  --spacing-section: 3rem;

  /* The reading frame (DESIGN.md §6), its gutter inside it. */
  --container-reading: 45rem;

  /* Motion (DESIGN.md §10): a hover's colour, on the one easing. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
}

/* md (768px): the titles grow, the gutter and the space between sections too. */
@media (min-width: 48rem) {
  :root {
    --text-title-1: 2.75rem;
    --text-title-2: 2rem;
    --spacing-gutter: 1.5rem;
    --spacing-section: 4rem;
  }
}

/* lg (1024px). */
@media (min-width: 64rem) {
  :root {
    --text-title-1: 3.25rem;
    --text-card-title: 1.375rem;
  }
}

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

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-sans--font-feature-settings);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
  font-weight: var(--text-body-lg--font-weight);
  -webkit-font-smoothing: antialiased;
}

/* The reading frame: header, main and footer on one left edge. */
.wrap {
  max-width: var(--container-reading);
  margin: 0 auto;
  padding-inline: var(--spacing-gutter);
}

/* Words that go somewhere (the app's Link): ink, underlined 4px below, stone under the pointer. */
a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
  border-radius: var(--radius);
  touch-action: manipulation;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
  color: var(--muted-foreground);
}

/* The one focus ring (DESIGN.md §9): 2px of ink on the edge; off the button's fill, inside a
   question's row. An outline, which forced colours paint. */
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 0;
}

/* The header: the app's black header (DESIGN.md §6), which the browser bar above it meets
   (theme-color). The wordmark leads home, the languages sit beside it on a computer and below it
   on a phone. On the black: ivory and its muted words only (stone there is 3.3:1, never), and the
   focus ring ivory, as the app's zone-vitrine draws it (an ink ring is lost on the black). */
header {
  background-color: var(--vitrine);
  color: var(--on-vitrine);
  --ring: var(--on-vitrine);
}
header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--spacing-group);
  padding-block: 4px;
}
.home {
  display: block;
  padding-block: 12px;
  color: var(--on-vitrine);
  text-decoration: none;
}
.home:hover {
  color: var(--on-vitrine);
}
.eyebrow {
  display: block;
  margin: 0 0 4px;
  color: var(--on-vitrine-muted);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  font-weight: var(--text-label--font-weight);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}
.wordmark {
  display: block;
  margin: 0;
  color: var(--on-vitrine);
  font-family: var(--font-serif);
  font-feature-settings: var(--font-serif--font-feature-settings);
  font-size: var(--text-wordmark-20);
  line-height: var(--text-wordmark-20--line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  white-space: nowrap;
}
.chip {
  margin: 0 0 12px;
  color: var(--on-vitrine-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

/* The languages, as the app's header tabs on the black: muted, the current one ivory with a
   hairline under it. */
nav.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}
nav.langs a {
  color: var(--on-vitrine-muted);
  text-decoration: none;
}
nav.langs a:hover,
nav.langs a[aria-current='page'] {
  color: var(--on-vitrine);
}
nav.langs a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* The three notices, as the app's footer links: stone and underlined, the current one ink. */
nav.legal {
  color: var(--muted-foreground);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}
nav.legal a {
  color: var(--muted-foreground);
}
nav.legal a:hover,
nav.legal a[aria-current='page'] {
  color: var(--foreground);
}
nav.legal a[aria-current='page'] {
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
main nav.legal {
  margin: 0 0 16px;
}
footer nav.legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-group);
  margin-top: 4px;
}

/* Every link in a nav is 48px tall to the finger below md (ACCESSIBILITY.md › Touch targets),
   and keeps a 24px target from md (SC 2.5.8). A word narrower than 48px ("Terms") is 48px wide
   to the finger too: a 48px ::before centred on it, as the app's COMPACT_TARGET draws a tap area
   (DESIGN.md §5), so the words keep their places and their gaps. */
nav.langs a,
nav.legal a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
nav.langs a::before,
nav.legal a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 48px;
  transform: translateX(-50%);
}
@media (min-width: 48rem) {
  nav.langs a,
  nav.legal a {
    min-height: 32px;
  }
  nav.langs a::before,
  nav.legal a::before {
    content: none;
  }
}
/* A reference page's link to the explainer is 48 x 48 to the finger below md, 32px tall from md
   (its other references are rows, below). */
.more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
}
@media (min-width: 48rem) {
  .more a {
    min-height: 32px;
    min-width: 0;
  }
}

/* The page: titles in the serif, reading text in graphite, hairlines between sections. */
h1,
h2,
h3 {
  color: var(--foreground);
  font-family: var(--font-serif);
  font-feature-settings: var(--font-serif--font-feature-settings);
  overflow-wrap: break-word;
  text-wrap: balance;
}
/* A notice's title is a page's title (title-2); the explainer's headline is larger (title-1). */
h1 {
  margin: var(--spacing-section) 0 var(--spacing-stack);
  font-size: var(--text-title-2);
  line-height: var(--text-title-2--line-height);
  font-weight: var(--text-title-2--font-weight);
}
h1.headline {
  margin-bottom: 16px;
  font-size: var(--text-title-1);
  line-height: var(--text-title-1--line-height);
  font-weight: var(--text-title-1--font-weight);
}
h2 {
  margin: var(--spacing-section) 0 var(--spacing-stack);
  padding-top: var(--spacing-group);
  border-top: 1px solid var(--border);
  font-size: var(--text-title-3);
  line-height: var(--text-title-3--line-height);
  font-weight: var(--text-title-3--font-weight);
}
h3 {
  margin: 0 0 4px;
  font-size: var(--text-card-title);
  line-height: var(--text-card-title--line-height);
  font-weight: var(--text-card-title--font-weight);
}
p {
  margin: 12px 0;
  color: var(--foreground-2);
}
ul {
  margin: 12px 0;
  padding-left: 24px;
  color: var(--foreground-2);
}
li {
  margin: 8px 0;
}
address {
  margin: 12px 0;
  color: var(--foreground-2);
  font-style: normal;
}
/* An address written out in the words (the Privacy notice's privacy.microsoft.com/privacystatement)
   breaks where it must rather than push a 320px page sideways (SC 1.4.10). */
p,
li,
address {
  overflow-wrap: break-word;
}
strong {
  color: var(--foreground);
  font-weight: var(--font-weight-semibold);
}
/* A storage key the Cookies notice names: no monospace (DESIGN.md §3), the sans with tabular
   figures, in ink beside the graphite words. */
code {
  color: var(--foreground);
  font-family: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.nowrap {
  white-space: nowrap;
}

/* Metadata: a notice's date, the note under the button, the footer's notice (which, like the
   lede, keeps a short last word off a line of its own: "Rolex SA.", "the US."). */
.updated,
.note,
.disclaimer {
  color: var(--muted-foreground);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}
.updated {
  margin: 0 0 var(--spacing-stack);
}
.note {
  margin: var(--spacing-stack) 0 0;
}
.disclaimer {
  margin: 0;
  text-wrap: pretty;
}

/* A notice's tables: hairline rows, the heads in ink; a table wider than a phone scrolls. */
.table {
  margin: 12px 0;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  color: var(--foreground-2);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}
th,
td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
th:last-child,
td:last-child {
  padding-right: 0;
}
th {
  color: var(--foreground);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  font-weight: var(--font-weight-medium);
}
/* A cell's long words hyphenate (from ten letters, four kept on each side), so a table fits a
   320px phone in every language rather than scroll in a box a keyboard can't reach (the German,
   French and Italian Cookies notice's first table). A word still too wide for its column breaks
   where it must (`break-word`, as a paragraph's address does), which never narrows a column.
   Never `overflow-wrap: anywhere` in a cell: it takes a column's narrowest width down to one
   letter, and the table then splits short words ("How", "days") to share the line out. */
.table th,
.table td {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}
/* A column's head is a short label, and Chromium holds what is left of a word after one break to
   the same ten letters: German "Speicherdauer" broke once ("Spei-") and its nine-letter rest not
   again, 12px past a 320px phone's box (the Reddit table). Eight lets it break again
   ("Spei-cher-dauer"); English heads fit unbroken. */
.table th {
  hyphenate-limit-chars: 8 4 4;
}
/* A storage key (`emailForSignInLink`) never takes a hyphen, which would read as part of its
   name: it breaks where it must, without one. */
.table code {
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: anywhere;
}
/* One rule where a section ends: a table's last hairline gives way to the next section's, where
   its heading follows at once. */
.table:has(+ h2) tr:last-child > * {
  border-bottom: 0;
}

/* The explainer. */
.lede {
  margin: 0 0 var(--spacing-group);
  text-wrap: pretty;
}
.actions {
  margin: var(--spacing-group) 0 var(--spacing-stack);
}
/* The one button (the app's Button, size lg): the ink fill, 48px tall below md, 40px from md. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--spacing-group);
  border-radius: var(--radius);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.cta:hover {
  background-color: color-mix(in srgb, var(--primary) 85%, transparent);
  color: var(--primary-foreground);
}
.cta:focus-visible {
  outline-offset: 2px;
}
@media (min-width: 48rem) {
  .cta {
    min-height: 40px;
  }
}
/* The guarantee: its words in ink beside the Certified Pre-Owned green, no box. */
.guarantee {
  margin: var(--spacing-group) 0;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--brand-green);
  color: var(--foreground);
}
/* Three points as hairline rows, side by side from 640px; no boxes. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
  margin: var(--spacing-group) 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cards li {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.cards p,
.sources {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}
.cards p {
  margin: 0;
}

/* A reference page's figures and specifications, drawn as the watch page's specifications
   (WatchDetail.tsx): on a phone one row a fact, its label beside it; from md two to a row, the
   label over the value; a hairline under each. An odd last fact (the countries, a lone figure,
   a fifth specification) takes the row. Values in ink, text-body, with tabular figures. */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 32px;
  margin: var(--spacing-group) 0;
  border-top: 1px solid var(--border);
}
h2 + .facts {
  margin-top: 16px;
}
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.facts dt,
.facts dd {
  min-width: 0;
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.facts dt {
  color: var(--muted-foreground);
}
.facts dd {
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 40rem) {
  .facts > div {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  }
}
@media (min-width: 48rem) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts > div {
    display: block;
    padding: 8px 0;
  }
  .facts > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .facts dt {
    font-size: var(--text-caption);
    line-height: var(--text-caption--line-height);
  }
}

/* A reference page's other references: hairline rows, as the explainer's questions and the
   app's Browse by model (ListRow) draw them: the words in ink, a drawn chevron at the icons' 1.5
   stroke, 48px tall; two across from 640px. */
.refs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 32px;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}
@media (min-width: 40rem) {
  .refs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.refs li {
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.refs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 12px 0;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.refs a::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.refs a:focus-visible {
  outline-offset: -2px;
}

/* Words for screen readers alone: "approximately" where the eye reads the sign (COPY.md ›
   Numbers, prices, dates), as the app's sr-only does. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The questions: native disclosures as hairline rows (the app's ListRow), each with a drawn
   plus, a minus once open, at the icons' 1.5 stroke (no text to read aloud). */
.faq h2 {
  margin-bottom: 16px;
}
details {
  border-bottom: 1px solid var(--border);
}
details:first-of-type {
  border-top: 1px solid var(--border);
}
/* The last question's rule gives way to what follows the section: the Sources heading's rule. */
.faq details:last-of-type {
  border-bottom: 0;
}
/* A question in ink, stone under the pointer, as a link is. */
summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 0;
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  transition: color var(--duration-fast) var(--ease-standard);
}
summary:hover {
  color: var(--muted-foreground);
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
}
details[open] summary::before {
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat;
}
summary:focus-visible {
  outline-offset: -2px;
}
details p {
  margin: 0 0 16px 32px;
}

/* The footer: a hairline above, the notice, then (on the explainer) the three notices. */
footer {
  margin-top: var(--spacing-section);
  border-top: 1px solid var(--border);
}
footer .wrap {
  padding-block: var(--spacing-group) 32px;
}

/* Every motion has its reduced-motion story (ACCESSIBILITY.md › Motion). */
@media (prefers-reduced-motion: reduce) {
  a,
  .cta,
  summary {
    transition: none;
  }
}