/*
 * Our Question Diary - microsite styles.
 * Tokens follow docs/concept/design-concept.md (sections 2-4).
 * Colour world: html[data-world], contrast mode: html[data-contrast] or prefers-contrast.
 */

/* ---------- Fonts (self-hosted, SIL OFL, see fonts/OFL.txt) ---------- */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/literata-latin-normal.woff2") format("woff2");
  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: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/literata-latin-italic.woff2") format("woff2");
  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: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/literata-latin-ext-normal.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/literata-latin-ext-italic.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Colour worlds (design-concept 3.3 and 3.5) ---------- */
/* l = light, d = dark, hi/lo = gradient top/bottom, text = accent as text colour, c = contrast mode */

:root,
[data-world="petrol"] {
  --w-l-hi: #26708A; --w-l-lo: #1A566A; --w-l-text: #1A566A;
  --w-d-hi: #8CCAD9; --w-d-lo: #6DB5C7; --w-d-text: #8CCAD9;
  --w-cl: #0F4C5F; --w-cd: #A8DCE8;
  --w-angle: 180deg;
}
[data-world="ink"] {
  --w-l-hi: #3A57BA; --w-l-lo: #273F96; --w-l-text: #273F96;
  --w-d-hi: #9AAEF0; --w-d-lo: #7F97E8; --w-d-text: #9AAEF0;
  --w-cl: #1E3380; --w-cd: #B8C8F7;
}
[data-world="sage"] {
  --w-l-hi: #3A7A66; --w-l-lo: #2A5E4E; --w-l-text: #2A5E4E;
  --w-d-hi: #93CDB8; --w-d-lo: #76B8A1; --w-d-text: #93CDB8;
  --w-cl: #1D4A3D; --w-cd: #A9DCC9;
}
[data-world="plum"] {
  --w-l-hi: #7A4A85; --w-l-lo: #5C3566; --w-l-text: #5C3566;
  --w-d-hi: #CDA8D6; --w-d-lo: #B88FC3; --w-d-text: #CDA8D6;
  --w-cl: #4A2654; --w-cd: #DDC2E4;
}
[data-world="bordeaux"] {
  --w-l-hi: #9A4452; --w-l-lo: #76323E; --w-l-text: #76323E;
  --w-d-hi: #E3A2AC; --w-d-lo: #D48894; --w-d-text: #E3A2AC;
  --w-cl: #5E2430; --w-cd: #F0BDC5;
}
[data-world="dusk"] {
  --w-l-hi: #6C4FA6; --w-l-lo: #A24A6E; --w-l-text: #6C4FA6;
  --w-d-hi: #B9A6EC; --w-d-lo: #E6A0BA; --w-d-text: #B9A6EC;
  --w-cl: #4E3585; --w-cd: #CDBEF5;
  --w-angle: 135deg;
}

/* ---------- Base tokens: light ---------- */

:root {
  color-scheme: light dark;

  --paper: #F3F4F6;
  --surface: #FFFFFF;
  --ink: #181B22;
  --ink-2: #4F5562;
  --ink-3: #656B78;
  --line: #DDE0E6;
  --line-strong: #868C98;
  --accent: var(--w-l-text);
  --accent-hi: var(--w-l-hi);
  --accent-lo: var(--w-l-lo);
  --on-accent: #FFFFFF;
  --border-width: 1px;
  --focus-width: 2px;
  --link-decoration: none;
  --shadow: 0 1px 2px rgb(24 27 34 / 0.06), 0 8px 24px rgb(24 27 34 / 0.08);

  --font-content: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px;
  --radius: 12px;
  --measure: 36rem;
  --page: 68rem;
}

/* ---------- Dark ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111318;
    --surface: #191C22;
    --ink: #E7E9ED;
    --ink-2: #A9AEB9;
    --ink-3: #8D93A0;
    --line: #2C3039;
    --line-strong: #757C89;
    --accent: var(--w-d-text);
    --accent-hi: var(--w-d-hi);
    --accent-lo: var(--w-d-lo);
    --on-accent: #111318;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
  }
}

/* ---------- Contrast mode (design-concept 3.5) ---------- */
/* Applies when chosen by hand, or when the browser asks for more contrast and nothing else was chosen. */

:root[data-contrast="more"] {
  --paper: #FFFFFF; --surface: #FFFFFF;
  --ink: #000000; --ink-2: #2E333D; --ink-3: #2E333D;
  --line: #4F5562; --line-strong: #4F5562;
  --accent: var(--w-cl); --accent-hi: var(--w-cl); --accent-lo: var(--w-cl);
  --on-accent: #FFFFFF;
  --border-width: 2px; --focus-width: 3px; --link-decoration: underline; --shadow: none;
}
@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]) {
    --paper: #FFFFFF; --surface: #FFFFFF;
    --ink: #000000; --ink-2: #2E333D; --ink-3: #2E333D;
    --line: #4F5562; --line-strong: #4F5562;
    --accent: var(--w-cl); --accent-hi: var(--w-cl); --accent-lo: var(--w-cl);
    --on-accent: #FFFFFF;
    --border-width: 2px; --focus-width: 3px; --link-decoration: underline; --shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="more"] {
    --paper: #000000; --surface: #000000;
    --ink: #FFFFFF; --ink-2: #D0D4DB; --ink-3: #D0D4DB;
    --line: #A0A6B1; --line-strong: #A0A6B1;
    --accent: var(--w-cd); --accent-hi: var(--w-cd); --accent-lo: var(--w-cd);
    --on-accent: #000000;
  }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root:not([data-contrast="normal"]) {
    --paper: #000000; --surface: #000000;
    --ink: #FFFFFF; --ink-2: #D0D4DB; --ink-3: #D0D4DB;
    --line: #A0A6B1; --line-strong: #A0A6B1;
    --accent: var(--w-cd); --accent-hi: var(--w-cd); --accent-lo: var(--w-cd);
    --on-accent: #000000;
  }
}

/* ---------- Reset and base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-content);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.53;         /* 26px */
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-wrap: break-word;
  hyphens: auto;
}

img, svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a {
  color: var(--accent);
  text-decoration: var(--link-decoration);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration: underline; }

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

h1, h2, h3 {
  font-family: var(--font-content);
  font-weight: 450;
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  hyphens: manual;
}
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }
h3 { font-size: 1.3125rem; line-height: 1.33; }

p, ul, ol, dl, table { margin: 0 0 var(--space-4); }
p, li { max-width: var(--measure); }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--space-2); }

strong { font-weight: 600; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  border: var(--border-width) solid var(--line-strong);
  border-radius: 8px;
}
.skip-link:focus { top: var(--space-4); }

.ui, .eyebrow, .meta, .site-header, .site-footer, .badge, .button {
  font-family: var(--font-ui);
}

.eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  color: var(--ink-3);
  font-size: 0.75rem;
  line-height: 1.33;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meta { color: var(--ink-3); font-size: 0.8125rem; line-height: 1.38; }

.lead { font-size: 1.3125rem; line-height: 1.43; color: var(--ink); }
.muted { color: var(--ink-2); }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 48rem) { .wrap { padding: 0 var(--space-6); } }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-content);
  font-style: italic;
  font-size: 1.1875rem;
  font-weight: 450;
}
.brand:hover { text-decoration: none; }
.brand .mark { width: 34px; height: 24px; flex: none; }

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.main-nav li { margin: 0; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 0.9375rem; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--accent); }
@media (max-width: 39.99rem) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0; }
  .main-nav { order: 3; flex-basis: 100%; margin-left: 0; }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

main { display: block; }

.section {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 48rem) { .section { padding: var(--space-8) 0; } }

.section-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 56rem) {
  .section-grid { grid-template-columns: 16rem 1fr; gap: var(--space-7); }
}

/* ---------- Two-circle motif ---------- */

.mark .c1 { fill: none; stroke: var(--accent); stroke-width: 2; }
.mark .c2 { fill: none; stroke: var(--accent); stroke-width: 2; }
.mark .f { fill: var(--accent); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-6) 0 var(--space-8);
}
@media (min-width: 56rem) {
  .hero { grid-template-columns: 1.15fr 0.85fr; padding-top: var(--space-7); }
}

.hero h1 { font-style: italic; margin-bottom: var(--space-3); }
.hero .subtitle {
  font-size: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);
  line-height: 1.3;
  margin: 0 0 var(--space-5);
  color: var(--ink-2);
}
.hero .intro { font-size: 1.1875rem; line-height: 1.5; max-width: 32rem; }

.availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  background: linear-gradient(var(--w-angle, 180deg), var(--accent-hi), var(--accent-lo));
  color: var(--on-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.availability .meta { font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- App mock-ups (invented example content, drawn in HTML) ---------- */
/* Sizes inside the phone are in em: 1em equals 15px of the 390px wide design canvas. */

.preview {
  justify-self: center;
  width: min(100%, 20rem);
  margin: 0;
}
.preview figcaption { margin-top: var(--space-3); text-align: center; }

.phone {
  --bezel: #181B22;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 390 / 844;
  padding: 2.4%;
  border-radius: 13% / 6%;
  background: var(--bezel);
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) { .phone { --bezel: #3A3F4A; } }
:root[data-contrast="more"] .phone { --bezel: var(--ink); }

.app-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 11% / 5.2%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-size: calc(100cqw / 26);
  line-height: 1.4;
  font-variant-numeric: lining-nums;
  hyphens: manual;
}
.app-screen p { margin: 0; max-width: none; }
.app-screen ul { list-style: none; margin: 0; padding: 0; }
.app-screen li { max-width: none; margin: 0; }

.app-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: none;
  padding: 1.1em 2em 0.6em;
  font-size: 0.93em;
  font-weight: 600;
}
.app-sys { display: flex; gap: 0.3em; align-items: flex-end; }
.app-sys i { display: block; width: 0.3em; background: var(--ink); border-radius: 1px; }
.app-sys i:nth-child(1) { height: 0.45em; }
.app-sys i:nth-child(2) { height: 0.65em; }
.app-sys i:nth-child(3) { height: 0.85em; width: 1.5em; border-radius: 0.2em; }

.app-body {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  flex: 1;
  min-height: 0;
  padding: 0.6em 1.6em 1.6em;
}
.app-spacer { flex: 1; }
.app-centered { align-items: center; text-align: center; padding-top: 2.5em; }

.app-nav { display: flex; justify-content: space-between; align-items: center; gap: 1em; min-height: 2em; }
.app-nav-center { display: grid; grid-template-columns: 1fr auto 1fr; }
.app-link { color: var(--accent); font-weight: 500; }
.app-center { text-align: center; justify-content: center; }
.app-title-sm { font-weight: 600; font-size: 1.13em; }
.app-h1 { font-family: var(--font-content); font-weight: 450; font-size: 2em; line-height: 1.25; }
.app-label { color: var(--ink-3); font-size: 0.87em; font-weight: 600; letter-spacing: 0.02em; }
.app-meta { color: var(--ink-3); font-size: 0.87em; }
.app-small { color: var(--ink-2); font-size: 0.93em; line-height: 1.45; }
.app-ink { color: var(--ink); }
.app-row { display: flex; align-items: center; gap: 0.45em; }
.status { width: 22px; height: 14px; flex: none; }
.status .o { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.status .a { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.status .af { fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; }
.app-row .status { width: 1.5em; height: auto; }

.app-q { font-family: var(--font-content); font-weight: 450; font-size: 1.4em; line-height: 1.33; }
.app-q-large { font-size: 1.6em; }
.app-q-list { font-size: 1.2em; margin-bottom: 0.3em; }
.app-note, .app-text { font-family: var(--font-content); font-size: 1.07em; line-height: 1.5; color: var(--ink-2); }
.app-text { color: var(--ink); }
.app-who { color: var(--ink-3); font-size: 0.87em; margin-bottom: 0.25em; }

.app-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--accent);
}

.app-icon { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.8em;
  border: var(--border-width) solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.87em;
}
.app-pill .status { width: 1.4em; height: auto; }
.app-pill-on { border-color: var(--accent); color: var(--accent); }
.app-status { display: inline-flex; align-items: center; gap: 0.4em; color: var(--accent); font-size: 0.87em; font-weight: 500; }
.app-status .status { width: 1.5em; height: auto; }

.app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 1em;
  border-radius: 0.8em;
  background: linear-gradient(var(--w-angle, 180deg), var(--accent-hi), var(--accent-lo));
  color: var(--on-accent);
  font-weight: 600;
  font-size: 1.07em;
  text-align: center;
}
.app-btn-ghost { background: none; color: var(--accent); border: var(--border-width) solid var(--line-strong); }
.app-actions { display: grid; gap: 0.6em; }

.app-fab {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.7em;
  height: 3.7em;
  border-radius: 50%;
  background: linear-gradient(var(--w-angle, 180deg), var(--accent-hi), var(--accent-lo));
  color: var(--on-accent);
}
.app-fab .app-icon { width: 1.6em; height: 1.6em; stroke-width: 2; }

.app-list li { padding: 0.9em 0; border-top: 1px solid var(--line); }
.app-list li:last-child { border-bottom: 1px solid var(--line); }
.app-body > .app-label { margin-bottom: -0.5em; }

.app-days li { display: grid; grid-template-columns: 2.4em 1fr; gap: 0.6em; }
.app-day { display: flex; flex-direction: column; align-items: center; color: var(--ink-3); font-size: 0.8em; line-height: 1.2; }
.app-day b { color: var(--ink); font-size: 1.6em; font-weight: 500; }
.app-days li.is-lookback { margin: 0 -0.8em; padding: 0.9em 0.8em; border: 1px solid var(--accent); border-radius: 0.8em; }
.app-days li.is-lookback + li { border-top: 0; }
.app-flag { display: block; margin-bottom: 0.3em; color: var(--accent); font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em; }

/* Locked answer: lined placeholder (design-concept 5) */
.app-answer { padding-left: 0.9em; border-left: 2px solid var(--line); }
.app-locked { display: grid; gap: 0.75em; padding: 0.5em 0 0.7em; }
.app-locked span { height: 0.5em; border-radius: 1em; background: var(--line); }
.app-locked span:nth-child(2) { width: 85%; }
.app-locked span:nth-child(3) { width: 55%; }
.app-answer .app-icon { width: 1.15em; height: 1.15em; }

.app-field { padding: 0.9em 1em; border: var(--border-width) solid var(--line-strong); border-radius: 0.8em; background: var(--surface); }
.app-field .app-label { margin-bottom: 0.3em; }
.app-input { font-family: var(--font-content); font-size: 1.07em; line-height: 1.5; }

.app-comments { display: grid; gap: 0.8em; padding-top: 0.9em; border-top: 1px solid var(--line); }
.app-compose {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75em 1em;
  border: var(--border-width) solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-3);
}
.app-compose .app-icon { color: var(--accent); }

/* Bottom sheet over a dimmed screen */
.app-dimmed { opacity: 0.35; }
.app-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 0.7em 1.6em 2em;
  border-radius: 1.6em 1.6em 0 0;
  background: var(--surface);
  box-shadow: 0 -0.5em 2em rgb(24 27 34 / 0.12);
}
.app-grabber { align-self: center; width: 2.6em; height: 0.3em; border-radius: 1em; background: var(--line-strong); margin-bottom: 0.4em; }
.app-sheet-title { font-family: var(--font-content); font-size: 1.47em; font-weight: 450; }
.app-motif { width: 3.2em; height: auto; fill: none; stroke: var(--accent); stroke-width: 0.7; }

/* Impulse */
.app-chips { display: flex; gap: 0.5em; }
.app-chip { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.9em; border: var(--border-width) solid var(--line-strong); border-radius: 999px; font-size: 0.93em; }
.app-chip.is-on { border-color: var(--accent); }
.app-cat { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; flex: none; }
.app-cat-1 { background: #C9A227; }
.app-cat-2 { background: #7A5BA6; }
.app-impulse { display: grid; gap: 0.7em; padding: 1.4em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Appearance */
.app-dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5em; justify-items: center; }
.app-dot {
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: var(--border-width) solid var(--line-strong);
  background: linear-gradient(var(--dot-angle, 180deg), var(--dot-hi), var(--dot-lo));
}
:root:not([data-world]) .app-dot-petrol,
[data-world="petrol"] .app-dot-petrol, [data-world="ink"] .app-dot-ink, [data-world="sage"] .app-dot-sage,
[data-world="plum"] .app-dot-plum, [data-world="bordeaux"] .app-dot-bordeaux, [data-world="dusk"] .app-dot-dusk {
  box-shadow: 0 0 0 0.15em var(--paper), 0 0 0 0.3em var(--ink);
}
.app-segments { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.2em; border-radius: 0.7em; background: var(--line); font-size: 0.93em; text-align: center; }
.app-segments span { padding: 0.45em 0; border-radius: 0.55em; }
.app-segments .is-on { background: var(--surface); font-weight: 600; }
.app-switch-row { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 0.9em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.app-switch-row > span:first-child { display: grid; gap: 0.15em; }
.app-switch { position: relative; flex: none; width: 3.4em; height: 2em; border-radius: 1em; background: var(--line-strong); }
.app-switch::after { content: ""; position: absolute; top: 0.2em; left: 0.2em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--surface); }
:root[data-contrast="more"] .app-switch-row .app-switch, .app-switch.is-on { background: var(--accent); }
:root[data-contrast="more"] .app-switch-row .app-switch::after, .app-switch.is-on::after { left: auto; right: 0.2em; }
.app-switch-item { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.app-switch-item > span:first-child { display: grid; gap: 0.1em; }
.app-list li.app-switch-item { padding: 0.65em 0; }
.app-time { padding-top: 0.2em; }

/* Invitation */
.app-code { width: 62%; height: auto; padding: 0.8em; border-radius: 0.8em; background: #FFFFFF; fill: #181B22; }
.app-centered .app-btn { align-self: stretch; }

/* Separation test mode */
.app-banner { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 0.7em 1.6em; background: var(--ink); color: var(--paper); font-size: 0.87em; line-height: 1.35; }
.app-banner b { flex: none; font-weight: 600; }
.app-blur { filter: blur(0.35em); margin-bottom: 0.6em; }

.app-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: none;
  padding: 0.6em 0.6em 1.6em;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.app-tab { display: flex; flex-direction: column; align-items: center; gap: 0.2em; color: var(--ink-3); font-size: 0.73em; }
.app-tab .app-icon { width: 1.9em; height: 1.9em; }
.app-tab.is-active { color: var(--accent); font-weight: 600; }

/* ---------- App tour: four steps with a phone each ---------- */

.section-head { max-width: 44rem; margin-bottom: var(--space-7); }
.section-head p { color: var(--ink-2); }

.tour { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-8); }
.tour > li {
  max-width: none;
  margin: 0;
  display: grid;
  gap: var(--space-6);
  align-items: center;
  counter-increment: step;
}
@media (min-width: 48rem) {
  .tour > li { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .tour > li:nth-child(even) .tour-text { order: 2; }
}
.tour-text h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); margin-bottom: var(--space-3); }
.tour-text h3::before {
  content: counter(step, decimal);
  display: block;
  margin-bottom: var(--space-3);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
}
.tour-text > p { color: var(--ink-2); }
.tour .preview { width: min(100%, 17rem); }

/* ---------- Colour worlds on the home page ---------- */

.colours { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 48rem) { .colours { grid-template-columns: 1fr 1fr; } }
.colours .preview { width: min(100%, 17rem); }
.colours-text > p { color: var(--ink-2); }
.picker { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.picker .worlds legend { margin-bottom: var(--space-3); }
.picker .world-options { gap: var(--space-2) var(--space-3); }
.picker .world-options label {
  flex-direction: column;
  width: auto;
  min-width: 64px;
  height: auto;
  padding: var(--space-2) var(--space-1);
  gap: var(--space-2);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.picker .world-options .dot { width: 36px; height: 36px; }
.picker .world-options input:checked + label .dot::after { margin-top: 9px; }
.picker .world-options input:checked + label { color: var(--ink); font-weight: 600; }
.picker .contrast-toggle { font-family: var(--font-ui); font-size: 0.9375rem; }
.no-js .picker { display: none; }

/* ---------- Gallery: more screens ---------- */

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-7) var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.gallery > li { max-width: none; margin: 0; }
.gallery .phone { max-width: 15rem; margin: 0 auto var(--space-5); }
.gallery > li > h3 { font-size: 1.1875rem; margin-bottom: var(--space-2); }
.gallery > li > p { color: var(--ink-2); font-size: 1rem; margin: 0; }
@media (min-width: 40rem) and (max-width: 63.99rem) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-7); } }
@media (max-width: 39.99rem) {
  /* Swipe through the screens on small displays instead of a long column. */
  .gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding: 0 20px;
  }
  .gallery > li { scroll-snap-align: start; }
}
.gallery:focus-visible { outline-offset: 6px; }

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
}
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  margin: 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--line-strong);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal);
  display: block;
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-family: var(--font-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.steps h3 { margin-bottom: var(--space-2); }
.steps p { margin: 0; color: var(--ink-2); }

/* ---------- Lists with markers ---------- */

.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 1.75em; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.5em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}

/* ---------- Table ---------- */

.table-scroll { overflow-x: auto; margin: 0 0 var(--space-4); }
table {
  border-collapse: collapse;
  width: 100%;
  max-width: 44rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
caption {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  padding-bottom: var(--space-3);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
thead th {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: var(--border-width) solid var(--line-strong);
}
tbody th { font-weight: 500; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); max-width: 44rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  min-height: 44px;
  padding: var(--space-4) 0;
  cursor: pointer;
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 450;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 1.5rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 var(--space-4); color: var(--ink-2); }

/* ---------- Buttons and links ---------- */

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid var(--line-strong);
  border-radius: 999px;
  color: var(--accent);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.button:hover { border-color: var(--accent); text-decoration: none; }
.button-filled {
  border-color: transparent;
  background: linear-gradient(var(--w-angle, 180deg), var(--accent-hi), var(--accent-lo));
  color: var(--on-accent);
  font-weight: 600;
}
.button-filled:hover { border-color: transparent; text-decoration: underline; }
.support-note { margin-top: var(--space-4); max-width: 32rem; }

.closing { text-align: left; }
.closing h2 { font-style: italic; }

/* ---------- Legal and text pages ---------- */

.page-head { padding: var(--space-6) 0 var(--space-5); }
.prose { padding-bottom: var(--space-8); max-width: 44rem; }
.prose h2 { margin-top: var(--space-7); font-size: 1.5rem; }
.prose h3 { margin-top: var(--space-5); font-size: 1.1875rem; }
.prose address { font-style: normal; margin-bottom: var(--space-4); }
.summary-box {
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.summary-box > :last-child { margin-bottom: 0; }

/* ---------- Footer with appearance controls ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-7) 0 var(--space-6);
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1fr auto; align-items: start; } }

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}
.footer-nav li { margin: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }

.appearance { display: grid; gap: var(--space-4); }
.no-js .appearance { display: none; }

.worlds { border: 0; margin: 0; padding: 0; min-width: 0; }
.worlds legend { padding: 0; margin-bottom: var(--space-2); font-weight: 500; color: var(--ink); }
.world-options { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.world-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.world-options label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 50%;
}
.world-options .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--border-width) solid var(--line-strong);
  background: linear-gradient(var(--dot-angle, 180deg), var(--dot-hi), var(--dot-lo));
}
.world-options input:checked + label .dot {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}
.world-options input:checked + label .dot::after {
  content: "";
  display: block;
  width: 7px;
  height: 12px;
  margin: 5px auto 0;
  border: solid #FFFFFF;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.world-options input:focus-visible + label {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: 1px;
}
@media (prefers-color-scheme: dark) {
  .world-options input:checked + label .dot::after { border-color: #111318; }
}

.dot-petrol   { --dot-hi: #26708A; --dot-lo: #1A566A; }
.dot-ink      { --dot-hi: #3A57BA; --dot-lo: #273F96; }
.dot-sage     { --dot-hi: #3A7A66; --dot-lo: #2A5E4E; }
.dot-plum     { --dot-hi: #7A4A85; --dot-lo: #5C3566; }
.dot-bordeaux { --dot-hi: #9A4452; --dot-lo: #76323E; }
.dot-dusk     { --dot-hi: #6C4FA6; --dot-lo: #A24A6E; --dot-angle: 135deg; }
@media (prefers-color-scheme: dark) {
  .dot-petrol   { --dot-hi: #8CCAD9; --dot-lo: #6DB5C7; }
  .dot-ink      { --dot-hi: #9AAEF0; --dot-lo: #7F97E8; }
  .dot-sage     { --dot-hi: #93CDB8; --dot-lo: #76B8A1; }
  .dot-plum     { --dot-hi: #CDA8D6; --dot-lo: #B88FC3; }
  .dot-bordeaux { --dot-hi: #E3A2AC; --dot-lo: #D48894; }
  .dot-dusk     { --dot-hi: #B9A6EC; --dot-lo: #E6A0BA; }
}

.contrast-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: var(--border-width) solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  justify-self: start;
}
.contrast-toggle .switch {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  border: var(--border-width) solid var(--line-strong);
  background: var(--paper);
  flex: none;
}
.contrast-toggle .switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink-2);
}
.contrast-toggle[aria-pressed="true"] .switch { background: var(--accent); border-color: var(--accent); }
.contrast-toggle[aria-pressed="true"] .switch::after { left: auto; right: 3px; background: var(--on-accent); }

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.8125rem;
}
.footer-bottom p { margin: 0; max-width: none; }

/* ---------- Cookie notice (only with analytics configured) ---------- */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-5) 0;
  background: var(--surface);
  border-top: var(--border-width) solid var(--line-strong);
  box-shadow: 0 -8px 24px rgb(24 27 34 / 0.12);
}
.consent:focus { outline: none; }
.consent h2 { font-size: 1.3125rem; margin-bottom: var(--space-2); }
.consent p { font-size: 0.9375rem; color: var(--ink-2); margin-bottom: var(--space-2); max-width: 44rem; }
.consent .button-row { margin-top: var(--space-3); }

.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: var(--link-decoration);
}
.link-button:hover { text-decoration: underline; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .faq summary::after, .contrast-toggle .switch, .button { transition: all 200ms ease; }
}

/* ---------- Print ---------- */

@media print {
  .site-footer .appearance, .skip-link, .preview, .gallery .phone { display: none; }
  body { background: #FFFFFF; color: #000000; }
}