/* SaveHere site. Colors match the app's palette. */

:root {
  color-scheme: light dark;

  --page: #FFF4D6;
  --surface: #FFFFFF;
  --ink: #000000;
  --ink-2: #3A3A3A;
  --action: #FFE14D;
  --on-fill: #000000;
  --inbox: #EDEDED;

  /* Category colors (CategoryColor) */
  --milk-tea: #E9BC8B;
  --pink: #FF8FAB;
  --sky: #7CC8FF;
  --orange: #FF8A4C;
  --purple: #B9A2FF;
  --mint: #7BE0B0;
  --amber: #FFAE3D;

  --border: 3px;
  --shadow: 4px;
  --radius: 10px;
  --shadow-color: var(--ink);

  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 16px;
  --wide: 72rem;
  --measure: 40rem;
}

/* Theme: follows the system unless the visitor picks one (data-theme on <html>, set by
   assets/theme.js). Without JavaScript the system setting applies. */

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #15130F;
    --surface: #221F1A;
    --ink: #F2EDE4;
    --ink-2: #CFC8BC;
    --inbox: #A6A198;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #15130F;
  --surface: #221F1A;
  --ink: #F2EDE4;
  --ink-2: #CFC8BC;
  --inbox: #A6A198;
}

@media (prefers-contrast: more) {
  :root {
    --page: #FFF8E6;
    --ink-2: #1F1F1F;
    --border: 4px;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #000000;
    --surface: #1A1814;
    --ink: #FFFFFF;
    --ink-2: #EDE7DC;
  }
}

@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --page: #000000;
    --surface: #1A1814;
    --ink: #FFFFFF;
    --ink-2: #EDE7DC;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

:lang(zh-Hant) body,
body:lang(zh-Hant) {
  line-height: 1.75;
}

::selection {
  background: var(--action);
  color: var(--on-fill);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a,
button {
  touch-action: manipulation;
}

.button,
.lang,
.media-toggle {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 3px;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--action);
}

code,
pre,
kbd {
  font-family: var(--mono);
  font-size: 0.92em;
}

:not(pre) > code {
  padding: 0.05em 0.35em;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--surface);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--action);
  color: var(--on-fill);
  font-weight: 800;
}

.skip:focus {
  top: var(--gutter);
}

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

@media (min-width: 48rem) {
  :root {
    --gutter: 32px;
  }
}

/* Header: one row at every width. */

.site-header {
  border-bottom: var(--border) solid var(--ink);
  background: var(--page);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0 auto 0 0;
  font-size: 1.25rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 10px;
}

.site-nav ul {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

.lang {
  --accent: var(--sky);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: var(--border) solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--shadow-color);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.lang:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--shadow-color);
}

/* Theme toggle: a small round button next to the language switch. */

.theme-toggle {
  --accent: var(--action);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border) solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow-color);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--shadow-color);
}

.theme-toggle:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--shadow-color);
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle svg {
  display: none;
  width: 20px;
  height: 20px;
}

:root:not([data-theme-choice]) .theme-toggle .ti-system,
:root[data-theme-choice="system"] .theme-toggle .ti-system,
:root[data-theme-choice="light"] .theme-toggle .ti-light,
:root[data-theme-choice="dark"] .theme-toggle .ti-dark {
  display: block;
}

.lang-short {
  display: none;
}

@media (max-width: 24rem) {
  .site-header .wrap {
    gap: 8px;
  }
  .site-nav ul {
    gap: 10px;
  }
  .site-nav a {
    font-size: 0.9375rem;
  }
  .brand img {
    width: 36px;
    height: 36px;
  }
  .lang {
    padding: 0 10px;
  }
  .lang-long {
    display: none;
  }
  .lang-short {
    display: inline;
  }
}

@media (max-width: 26rem) {
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 48rem) {
  .site-header .wrap {
    gap: 24px;
  }
  .site-nav ul {
    gap: 22px;
  }
}

/* Buttons, boxes and the shared hard shadow.
   Light: every hard shadow is ink (black). Dark: it takes the element's --accent color,
   like the app. Color fills keep an ink border so their edge shows on
   the dark page. */

.button {
  --accent: var(--sky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--action);
  color: var(--on-fill);
  font-size: 1.125rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow-color);
}

.button:active {
  transform: translate(var(--shadow), var(--shadow));
  box-shadow: 0 0 0 var(--shadow-color);
}

.button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
}

.box {
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.button, .lang, .theme-toggle, .box, .media, .media-toggle,
    .peek, .hero mark, .step img, .demo-article img, .card, .copy) {
    --shadow-color: var(--accent, var(--action));
  }
}

:root[data-theme="dark"] :is(.button, .lang, .theme-toggle, .box, .media, .media-toggle,
  .peek, .hero mark, .step img, .demo-article img, .card, .copy) {
  --shadow-color: var(--accent, var(--action));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.step img, .steps-more img) {
    border-color: var(--page);
  }
}

:root[data-theme="dark"] :is(.step img, .steps-more img) {
  border-color: var(--page);
}

/* Home: hero */

.hero {
  padding-block: 20px 48px;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-areas: "title" "visual" "cta" "lede";
  row-gap: 22px;
}

.hero h1 {
  grid-area: title;
  margin: 0;
  /* Phones: sized so each of the three English lines fits on one line, down to 320px. */
  font-size: clamp(1.5rem, 7.4vw, 3.5rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero h1 span {
  display: block;
}

.hero h1:lang(zh-Hant) {
  font-size: clamp(1.875rem, 7.6vw, 3.25rem);
  font-stretch: 100%;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.hero mark {
  --accent: var(--pink);
  display: inline;
  padding: 0 0.14em;
  border: var(--border) solid var(--ink);
  border-radius: 10px;
  background: var(--action);
  color: var(--on-fill);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-visual {
  grid-area: visual;
  /* Room below the phone for the slab and the Pause/Play button. */
  padding-bottom: 44px;
}

.hero-cta {
  grid-area: cta;
}

.hero-lede {
  grid-area: lede;
}

.hero .lede {
  margin: 0;
}

.lede {
  max-width: 33rem;
  margin: 0 0 28px;
  color: var(--ink-2);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.lede:lang(zh-Hant) {
  line-height: 1.75;
  text-wrap: pretty;
}

.hero h1 span:last-child {
  /* Keep the mark's border clear of descenders on the line above. */
  margin-top: 0.22em;
}

@media (min-width: 62rem) {
  /* Fixed-width right column for the phone, so a taller window never takes width from the
     headline. The text block is centered against the phone. Font sizes follow only the
     viewport width, so line breaks never change with the window height. */
  .hero {
    padding-block: 48px 64px;
  }
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". visual" "title visual" "lede visual" "cta visual" ". visual";
    column-gap: 3.5rem;
    row-gap: 32px;
  }
  .hero h1 {
    /* Capped so "Save from anywhere." stays on one line in the 72rem frame, 48px or more
       from the phone's slab. */
    font-size: clamp(2.5rem, 4.4vw, 3.625rem);
  }
  .hero h1:lang(zh-Hant) {
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  }
  .hero-visual {
    align-self: center;
    padding-bottom: 64px;
  }
}

/* CTA */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.status {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 800;
}

.status::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--mint);
}

.cta-note {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Product visual: phone frame with source labels placed relative to it. */

/* Product visual: a drawn phone (thick body, side keys, highlight on the bezel) on a tilted
   color slab, with saves from other apps tucked behind it. The dark bezel separates the
   app's cream screen from the cream page. Nothing is ever drawn on top of the screen. */

.stage {
  --bezel: clamp(8px, 3.6cqi, 13px);
  --body-radius: clamp(34px, 15cqi, 50px);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  height: min(52vh, 28rem);
  height: min(52svh, 28rem);
  aspect-ratio: 660 / 1434;
  margin-inline: auto;
}

@media (min-width: 62rem) {
  /* The whole phone and its Pause/Play button fit the first screen: about 60% of the
     window height, at most 16.6rem wide. */
  .stage {
    height: clamp(24rem, calc(100vh - 320px), 36rem);
    height: clamp(24rem, calc(100svh - 320px), 36rem);
    width: auto;
    max-width: 16.6rem;
  }
}

/* The slab behind the phone. Its sides stop 8px short of the viewport on small screens. */
.stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 9%;
  bottom: -6%;
  left: max(-16%, calc((100% - 100vw) / 2 + 8px));
  right: max(-16%, calc((100% - 100vw) / 2 + 8px));
  border: var(--border) solid var(--ink);
  border-radius: 28px;
  background: var(--sky);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-4deg);
}

/* Saves resting behind the phone: a generic post (avatar, source icon, content block in
   a category color). Only their outer part shows. */
.peeks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.peek {
  --accent: var(--ink);
  position: absolute;
  z-index: -1;
  display: grid;
  grid-template-rows: auto 1fr;
  width: 30cqi;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border: var(--border) solid var(--ink);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-color);
}

.peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 7px;
  border-bottom: 2px solid var(--ink);
}

.peek-body {
  margin: 6px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--c);
}

/* Left-hand cards put the source icon on their outer side, where it shows. */
.peek.p1 .peek-head,
.peek.p3 .peek-head {
  flex-direction: row-reverse;
  padding: 0 7px 0 0;
}

.peek.p1 { --c: var(--milk-tea); top: 14%; left: -16cqi; transform: rotate(-9deg); }
.peek.p2 { --c: var(--mint); top: 30%; right: -16cqi; transform: rotate(8deg); }
.peek.p3 { --c: var(--purple); top: 56%; left: -15cqi; transform: rotate(6deg); }
.peek.p4 { --c: var(--pink); top: 72%; right: -15cqi; transform: rotate(-7deg); }

@media (min-width: 62rem) {
  /* Slab and cards stay inside the 22rem column, at least 48px from the text. */
  .stage::before {
    left: -10%;
    right: -10%;
  }
  .peek {
    width: 26cqi;
  }
  .peek.p1 { left: -11cqi; }
  .peek.p2 { right: -11cqi; }
  .peek.p3 { left: -11cqi; }
  .peek.p4 { right: -11cqi; }
}

.media {
  --accent: var(--pink);
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--bezel);
  border: var(--border) solid var(--ink);
  border-radius: var(--body-radius);
  background: #161412;
  box-shadow: inset 3px 3px 0 rgb(255 255 255 / 0.14), 10px 10px 0 var(--shadow-color);
}

/* Side keys: action and volume on the left, power on the right. */
.media::before,
.media::after {
  content: "";
  position: absolute;
  width: 7px;
  border: 2.5px solid var(--ink);
  background: #161412;
}

.media::before {
  left: calc(-7px - var(--border));
  top: 20%;
  height: 16%;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.media::after {
  right: calc(-7px - var(--border));
  top: 26%;
  height: 11%;
  border-left: 0;
  border-radius: 0 4px 4px 0;
}

.media video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--body-radius) - var(--bezel) - 2px);
  background: var(--surface);
  object-fit: cover;
}

/* Pause/Play sits below the phone, on the slab, clear of the body and the screen. */
.media-toggle {
  --accent: var(--sky);
  position: absolute;
  bottom: calc(-44px - var(--border) - 10px);
  left: 50%;
  z-index: 1;
  min-height: 44px;
  padding: 0 16px;
  border: var(--border) solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow-color);
  transform: translateX(-50%);
}

.media-toggle:hover {
  background: var(--action);
  color: var(--on-fill);
}

.media-toggle[hidden] {
  display: none;
}

/* "Saves from" strip: plain text, not chips. */

.from {
  border-top: var(--border) solid var(--ink);
  background: var(--ink);
  color: var(--page);
}

.from .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  padding-block: 26px;
}

.from p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 900;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.platforms li + li::before {
  content: "/";
  padding-inline: 0.45em;
  color: var(--action);
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .platforms li + li::before {
    color: var(--page);
  }
}

:root[data-theme="dark"] .platforms li + li::before {
  color: var(--page);
}

/* Sections */

.band {
  padding-block: 56px;
  border-top: var(--border) solid var(--ink);
}

@media (min-width: 62rem) {
  .band {
    padding-block: 80px;
  }
}

.band-yellow {
  background: var(--action);
  color: var(--on-fill);
  --ink: #000000;
  --ink-2: #000000;
  --surface: #FFFFFF;
  --shadow-color: #000000;
}

.band h2 {
  margin: 0 0 32px;
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.band h2:lang(zh-Hant),
:lang(zh-Hant) .band h2 {
  font-stretch: 100%;
  letter-spacing: 0;
  line-height: 1.25;
}

.problem h2 {
  max-width: 16ch;
  margin-bottom: 20px;
  font-size: clamp(2.25rem, 8.4vw, 4.25rem);
  line-height: 1.02;
}

:lang(zh-Hant) .problem h2 {
  max-width: 12em;
  line-height: 1.2;
}

.problem p {
  max-width: 34rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  text-wrap: pretty;
}

.problem-grid {
  display: grid;
  gap: 48px;
}

@media (min-width: 62rem) {
  .problem-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    column-gap: 64px;
    align-items: center;
  }
  .problem h2 {
    font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  }
}

/* How it works: three numbered steps. Phone: picture beside the text, so all three show in
   one scroll. Desktop: three columns, heading and text above the picture, lined up across
   the steps. Each step keeps one color: 1 sky, 2 mint, 3 the action yellow. */

.steps {
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.step:nth-child(1) { --accent: var(--sky); }
.step:nth-child(2) { --accent: var(--mint); }
.step:nth-child(3) { --accent: var(--action); }

.step img,
.steps-more img {
  box-sizing: content-box;
  width: calc(100% - 2 * var(--border));
  height: auto;
  aspect-ratio: 660 / 1434;
  border: var(--border) solid var(--ink);
  border-radius: 22px;
  background: var(--surface);
}

.step img {
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
}

.step h3 {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

:lang(zh-Hant) .step h3 {
  font-stretch: 100%;
  letter-spacing: 0.02em;
}

.step-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--border) solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-fill);
  font-size: 1.25rem;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.step p,
.steps-more p {
  margin: 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Revisit: one row under the steps, not a fourth step. */
.steps-more {
  display: grid;
  grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 40px;
  padding: 20px;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}

.steps-more img {
  border-radius: 14px;
}

.steps-more h3 {
  margin: 0 0 4px;
  font-size: 1.1875rem;
  font-weight: 900;
}

/* Narrow phones: a smaller picture and heading, so each step title stays on one line. */
@media (max-width: 24rem) {
  .step {
    grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
    gap: 16px;
  }
  .step h3 {
    gap: 10px;
    font-size: 1.5rem;
  }
  .step-no {
    width: 36px;
    height: 36px;
    font-size: 1.0625rem;
  }
}

@media (min-width: 62rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 48px;
    padding: 0 var(--shadow) var(--shadow) 0;
  }
  .step {
    grid-row: span 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    row-gap: 24px;
    align-items: start;
  }
  .step picture {
    order: 2;
    max-width: 17rem;
  }
  .step h3 {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
  }
  .step-no {
    width: 52px;
    height: 52px;
    font-size: 1.375rem;
  }
  .steps-more {
    grid-template-columns: 7rem minmax(0, 40rem);
    margin-top: 56px;
  }
}

.split {
  display: grid;
  gap: 32px;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
}

.split p {
  max-width: var(--measure);
  margin: 0 0 16px;
}

.split .fine {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Rules only between items, thinner than the 3px section dividers, so the list never
   reads as part of the section edge. */
.facts li + li {
  border-top: 2px solid var(--ink);
}

.facts li:first-child {
  padding-top: 0;
}

.facts svg {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 6px;
  border: var(--border) solid var(--ink);
  border-radius: 50%;
  background: var(--c, var(--action));
  color: var(--on-fill);
}

.facts li:nth-child(1) { --c: var(--mint); }
.facts li:nth-child(2) { --c: var(--sky); }
.facts li:nth-child(3) { --c: var(--action); }
.facts li:nth-child(4) { --c: var(--pink); }

.more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
}

.closing {
  --ink: #000000;
  --ink-2: #000000;
  --surface: #FFFFFF;
  --shadow-color: #000000;
  border-top-color: #000000;
  background: var(--pink);
  color: var(--on-fill);
  text-align: center;
}

.closing h2 {
  max-width: 15ch;
  margin-inline: auto;
  font-size: clamp(2.25rem, 8vw, 4.75rem);
  line-height: 1.02;
}

:lang(zh-Hant) .closing h2 {
  max-width: 11em;
  line-height: 1.2;
}

.closing + .site-footer,
.problem + .band {
  border-top-color: #000000;
}

.closing .cta {
  justify-content: center;
}

.closing .status {
  justify-content: center;
}

/* Reading pages */

.doc {
  padding-block: 40px 72px;
}

/* One centered reading column. */
.doc .wrap {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

.doc h1 {
  margin: 0 0 12px;
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.doc h1:lang(zh-Hant),
:lang(zh-Hant) .doc h1 {
  font-stretch: 100%;
  line-height: 1.2;
  letter-spacing: 0;
}

.doc .lede {
  max-width: none;
}

.doc .meta {
  margin: 0 0 32px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.doc h2 {
  scroll-margin-top: 16px;
  margin: 48px 0 12px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.25;
  text-wrap: balance;
}

.doc h3 {
  margin: 28px 0 6px;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
}

.doc p,
.doc ul,
.doc ol {
  margin: 0 0 16px;
}

.doc ul,
.doc ol {
  padding-left: 1.4em;
}

.doc li + li {
  margin-top: 6px;
}

.doc li::marker {
  font-weight: 800;
}

.summary {
  --accent: var(--action);
  margin: 0 0 8px;
  padding: 20px 22px;
}

.summary h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

.summary ul {
  margin: 0;
}

.callout {
  --accent: var(--mint);
  margin: 24px 0;
  padding: 18px 20px;
}

.callout > :last-child {
  margin-bottom: 0;
}

pre {
  margin: 0 0 16px;
  padding: 16px 18px;
  overflow-x: auto;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  line-height: 1.5;
  tab-size: 2;
}

.table-wrap {
  margin: 0 0 16px;
  overflow-x: auto;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9875rem;
}

th,
td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

tr + tr th,
tr + tr td {
  border-top: 2px solid var(--ink);
}

th[scope="row"] {
  width: 32%;
  font-weight: 800;
}

td code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.faq h2 {
  scroll-margin-top: 16px;
}

/* Footer */

.site-footer {
  padding-block: 32px 40px;
  border-top: var(--border) solid var(--ink);
  font-size: 0.9375rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.site-footer p {
  margin: 0;
  color: var(--ink-2);
}

/* 404 */

.lost {
  padding-block: 80px;
}

.lost h1 {
  margin: 0 0 12px;
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.05;
}

.lost p {
  margin: 0 0 24px;
  max-width: var(--measure);
}

/* Sort scene (home, yellow band): three saves sit in their categories. This static layout
   is the end state; assets/motion.js plays the way there (Inbox first, then sorted).
   Sizes follow the scene's own width (cqi), so it scales from 320px phones to desktop. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sort {
  container-type: inline-size;
  width: 100%;
  max-width: 27rem;
  --inbox: #EDEDED;
}

.sort > * {
  --gap: 3.2cqi;
  --pad: 2.4cqi;
  --card-w: calc((100cqi - 2 * var(--gap) - var(--shadow)) / 3 - 2 * var(--pad) - 2 * var(--border));
}

.sort-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: clamp(0.9375rem, 4.4cqi, 1.25rem);
  font-weight: 900;
  line-height: 1.2;
}

.sort-label svg {
  width: 1.4em;
  height: 1.4em;
}

.sort-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}

.sort-tray {
  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  justify-content: space-between;
  margin-right: var(--shadow);
  padding: var(--pad) calc(var(--pad) + var(--border));
  border: var(--border) solid var(--ink);
  border-radius: 14px;
  background: var(--inbox);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
}

.sort-slot {
  aspect-ratio: 1;
  border: 2px dashed rgb(0 0 0 / 0.35);
  border-radius: var(--radius);
}

.sort-arrow {
  display: block;
  width: 36px;
  height: 36px;
  margin: 12px auto;
}

.sort-bins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0 var(--shadow) var(--shadow) 0;
  padding: 0;
  list-style: none;
}

.bin {
  padding: var(--pad);
  border: var(--border) solid var(--ink);
  border-radius: 14px;
  background: var(--bin);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
}

.bin-cafe { --bin: var(--milk-tea); }
.bin-talk { --bin: var(--purple); }
.bin-recipe { --bin: var(--mint); }

.bin-icon {
  display: block;
  width: clamp(22px, 7.5cqi, 32px);
  height: clamp(22px, 7.5cqi, 32px);
  margin: 0 0 var(--pad);
}

.sc-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--shadow-color);
}

/* A generic post: a header row (avatar, then the source app's official icon), then the
   content. SaveHere's own frame; nothing copies a platform's layout or colors. */
.sc-src {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  padding: 1px 0 1px 1.8cqi;
  border-bottom: 2px solid var(--ink);
}

.sc-avatar {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.sc-icon {
  align-self: center;
  justify-self: center;
  width: 46%;
  height: auto;
  aspect-ratio: 1;
}

/* Platform icons: the official one-color files in site/assets/brand/, drawn in the text
   color. Size and clear space follow the platforms' brand guidelines: at least 16px tall
   (YouTube at least 24px wide); 1/4 of the height around Instagram and Threads; about
   0.26 of the width around YouTube. Never larger than a source label. */
.pi {
  flex: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 4px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.pi-instagram { --icon: url("/assets/brand/instagram.svg?v=a036f819"); }
.pi-threads { --icon: url("/assets/brand/threads.svg?v=82b6bfe6"); }
.pi-youtube {
  --icon: url("/assets/brand/youtube.png?v=a1968cad");
  width: 24px;
  height: 17px;
  margin: 4px 6px;
}

svg.pi {
  background: none;
  -webkit-mask: none;
  mask: none;
}

/* Trademark notice: small, last line of every footer. */
.site-footer .trademarks {
  flex-basis: 100%;
  max-width: 60rem;
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.55;
}

.site-footer .trademarks + .trademarks {
  margin-top: 0;
}

/* Page-to-page: the header stays put while the page underneath crossfades. The theme
   switch (theme.js) instead reveals the new theme in a circle from the button. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  :root:not(.theme-switching) .site-header {
    view-transition-name: site-header;
  }

  ::view-transition-group(root) {
    animation-duration: 220ms;
  }

  :root.theme-switching::view-transition-old(root),
  :root.theme-switching::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* FAQ cards open smoothly where the browser supports it. */
  @supports (interpolate-size: allow-keywords) {
    .qa {
      interpolate-size: allow-keywords;
    }
    .qa::details-content {
      height: 0;
      overflow: clip;
      transition: height 240ms cubic-bezier(0.16, 1, 0.3, 1), content-visibility 240ms allow-discrete;
    }
    .qa[open]::details-content {
      height: auto;
    }
  }

  /* A linked section or question marks itself with a short press of its number. */
  .doc-body > section:target > h2::before,
  .qa:target summary::before {
    animation: press 600ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
  }
}

@keyframes press {
  0% { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
  60% { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink); }
  100% { transform: none; box-shadow: 0 0 0 var(--ink); }
}

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

@media print {
  .site-header nav,
  .lang,
  .skip,
  .media video {
    display: none;
  }
  .box,
  .button {
    box-shadow: none;
  }
}

.lost [lang="zh-Hant"] {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 2px solid var(--ink);
}

.lost h2 {
  margin: 0 0 8px;
  font-size: 1.75rem;
  font-weight: 900;
}

/* Demo articles (/demo/): pages for the app to save in screenshots and videos. */

p.brand {
  margin: 0;
}

.demo-article img {
  --accent: var(--action);
  width: 100%;
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
  margin: 8px 0 28px;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
}

.demo-article > p {
  font-size: 1.125rem;
}

.callout > :first-child,
.summary > :first-child {
  margin-top: 0;
}

/* Inner pages (privacy, support, bot): color band head, numbered sections, side contents. */

.page-head {
  --ink: #000000;
  --ink-2: #000000;
  --surface: #FFFFFF;
  --shadow-color: #000000;
  padding-block: 40px 36px;
  border-bottom: var(--border) solid #000000;
  background: var(--action);
  color: var(--on-fill);
}

.page-head h1 {
  max-width: 22ch;
  margin: 0 0 12px;
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:lang(zh-Hant) .page-head h1 {
  font-stretch: 100%;
  line-height: 1.2;
  letter-spacing: 0;
}

.page-summary {
  max-width: 40rem;
  margin: 0 0 20px;
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.updated {
  display: inline-flex;
  margin: 0;
  padding: 4px 12px;
  border: 2px solid #000000;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 800;
}

@media (min-width: 62rem) {
  .page-head {
    padding-block: 64px 52px;
  }
}

.doc-layout {
  display: grid;
  gap: 32px;
}

.doc-body {
  min-width: 0;
  max-width: var(--measure);
  padding-block: 32px 72px;
  counter-reset: section;
}

.toc {
  display: none;
}

@media (min-width: 62rem) {
  .doc-layout {
    grid-template-columns: minmax(0, var(--measure)) 15rem;
    justify-content: space-between;
    column-gap: 48px;
  }
  .doc-body {
    grid-column: 1;
    grid-row: 1;
    padding-top: 48px;
  }
  .toc {
    grid-column: 2;
    grid-row: 1;
    display: block;
    position: sticky;
    top: 24px;
    align-self: start;
    margin-top: 56px;
    padding: 16px 18px;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    font-size: 0.9375rem;
  }
}

.toc p {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 800;
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.toc li::before {
  content: counter(toc);
  flex: none;
  width: 1.5em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.toc a {
  display: inline-block;
  padding-block: 5px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.35;
}

.toc a:hover {
  text-decoration: underline;
}

/* Numbered section headings with a category color per number. */

.doc-body > section {
  counter-increment: section;
  scroll-margin-top: 16px;
}

.doc-body > section > h2 {
  display: flex;
  gap: 12px;
  align-items: center;
}

.doc-body > section > h2::before {
  content: counter(section);
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--n, var(--action));
  color: var(--on-fill);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.doc-body > section:nth-of-type(6n+1) { --n: var(--pink); }
.doc-body > section:nth-of-type(6n+2) { --n: var(--sky); }
.doc-body > section:nth-of-type(6n+3) { --n: var(--mint); }
.doc-body > section:nth-of-type(6n+4) { --n: var(--orange); }
.doc-body > section:nth-of-type(6n+5) { --n: var(--purple); }
.doc-body > section:nth-of-type(6n+6) { --n: var(--action); }

/* Cards (privacy summary, contact, bot ID card). */

.card {
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
}

.doc-body .cards {
  display: grid;
  gap: 20px;
  margin: 0 0 8px;
  padding: 0 var(--shadow) var(--shadow) 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

.cards .card {
  padding: 18px;
}

.cards .card:nth-child(1) { --accent: var(--pink); }
.cards .card:nth-child(2) { --accent: var(--sky); }
.cards .card:nth-child(3) { --accent: var(--mint); }

.card-title {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-fill);
}

.card-icon svg {
  width: 20px;
  height: 20px;
}

.cards h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.3;
}

.cards p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.doc li.card + li.card {
  margin-top: 0;
}

/* FAQ: expandable cards. */

.faq {
  display: grid;
  gap: 14px;
  padding: 0 var(--shadow) var(--shadow) 0;
}

.qa {
  --accent: var(--sky);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
  scroll-margin-top: 16px;
  counter-increment: section;
}

.qa summary {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 60px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary h2 {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
}

.qa summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat;
  transition: background-size 120ms ease-out;
}

.qa[open] summary::after {
  background-size: 100% 3px, 3px 0;
}

.qa summary:hover h2 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.qa[open] {
  --accent: var(--action);
}

.qa[open] summary {
  border-bottom: 2px solid var(--ink);
}

.qa-body {
  padding: 16px 18px 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qa {
    --shadow-color: var(--accent);
  }
}

:root[data-theme="dark"] .qa {
  --shadow-color: var(--accent);
}

.contact-card {
  --accent: var(--mint);
  margin-top: 32px;
  padding: 22px;
}

.contact-card h2 {
  margin: 0 0 8px;
}

.contact-card p {
  margin: 0 0 20px;
}

/* Bot page: ID card and code blocks. */

.id-card {
  --accent: var(--sky);
  margin: 0 var(--shadow) 8px 0;
  padding: 20px;
}

.id-label {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 800;
}

.ua-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.doc .ua,
.ua {
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--page);
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  user-select: all;
}

.id-note {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.id-list {
  margin: 0;
  border-top: 2px solid var(--ink);
}

.id-list div {
  display: grid;
  gap: 2px 16px;
  padding: 10px 0;
  border-bottom: 2px solid var(--ink);
}

.id-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (min-width: 40rem) {
  .id-list div {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

.id-list dt {
  font-weight: 800;
}

.id-list dd {
  margin: 0;
}

.id-list code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.code {
  margin: 0 var(--shadow) 16px 0;
  overflow: hidden;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow) var(--shadow) 0 var(--shadow-color);
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 4px 6px 4px 14px;
  border-bottom: 2px solid var(--ink);
  background: var(--action);
  color: var(--on-fill);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 700;
}

.code pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  font-size: 1rem;
}

.copy {
  --accent: var(--action);
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow-color);
  position: relative;
}

.copy:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-color);
}

.copy[hidden] {
  display: none;
}

.code-head .copy {
  --ink: #000000;
  --surface: #FFFFFF;
  --shadow-color: #000000;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.qa summary::before {
  content: counter(section);
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--n, var(--action));
  color: var(--on-fill);
  font-size: 0.875rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.faq .qa:nth-of-type(6n+1) { --n: var(--pink); }
.faq .qa:nth-of-type(6n+2) { --n: var(--sky); }
.faq .qa:nth-of-type(6n+3) { --n: var(--mint); }
.faq .qa:nth-of-type(6n+4) { --n: var(--orange); }
.faq .qa:nth-of-type(6n+5) { --n: var(--purple); }
.faq .qa:nth-of-type(6n+6) { --n: var(--action); }

.contact-card { --n: var(--action); }

/* Keeps a short phrase on one line, so a heading never breaks inside it. */
.nowrap {
  white-space: nowrap;
}