/* pinfolk.app, Direction A "Gold Pin".
   Brand tokens come from tokens.css, a verbatim copy of docs/brand/tokens.css
   (generated from docs/brand/tokens.json, version 2026-10-22-c), linked before
   this file. This file only adds the dark-mode roles and the page layout.
   Every colour, font and size below is a --pf-* token from that file. */

/* ------------------------------------------------------------------ page roles */

:root {
  /* site-only roles that tokens.css does not define */
  --pf-hairline: rgba(15, 74, 54, 0.14);
  --pf-badge-bg: var(--pf-pine);
  --pf-badge-text: var(--pf-cream);
  --pf-surface-warm: var(--pf-parchment);
  --pf-band-rule: transparent;
  --pf-wrap: 1180px;
  --pf-gutter: 16px;
  color-scheme: light dark;
}

/* Dark mode: the cream ground turns to deep forest. Sampled from the same icon field. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pf-bg: var(--pf-forest-deep);
    --pf-surface: #062f1f;
    --pf-surface-warm: #213b20;          /* forest-deep with 16% antique: the origin band */
    --pf-band-rule: rgba(241, 171, 29, 0.18);
    --pf-heading: var(--pf-cream);       /* 14.48:1 */
    --pf-text: #e9e3d2;                  /* 11.86:1 */
    --pf-text-muted: #b9c4b2;            /* 8.40:1 */
    --pf-kicker: var(--pf-gold);         /* 7.66:1 */
    --pf-rule: rgba(241, 171, 29, 0.55);
    --pf-focus: var(--pf-gold-light);
    --pf-hairline: rgba(255, 249, 235, 0.14);
    --pf-badge-bg: var(--pf-gold);
    --pf-badge-text: var(--pf-forest-deep);
  }
}
:root[data-theme="dark"] {
  --pf-bg: var(--pf-forest-deep);
  --pf-surface: #062f1f;
  --pf-surface-warm: #213b20;
  --pf-band-rule: rgba(241, 171, 29, 0.18);
  --pf-heading: var(--pf-cream);
  --pf-text: #e9e3d2;
  --pf-text-muted: #b9c4b2;
  --pf-kicker: var(--pf-gold);
  --pf-rule: rgba(241, 171, 29, 0.55);
  --pf-focus: var(--pf-gold-light);
  --pf-hairline: rgba(255, 249, 235, 0.14);
  --pf-badge-bg: var(--pf-gold);
  --pf-badge-text: var(--pf-forest-deep);
}

@media (min-width: 768px) {
  :root { --pf-gutter: 32px; }
}

/* ------------------------------------------------------------------ base */

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

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

body {
  margin: 0;
  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: var(--pf-font-text);
  font-size: var(--pf-size-body);
  line-height: var(--pf-leading-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; }
a:focus-visible {
  outline: 3px solid var(--pf-focus);
  outline-offset: 4px;
  border-radius: 6px;
}

.nowrap { white-space: nowrap; }

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

.skip {
  position: absolute;
  left: var(--pf-gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--pf-radius-button);
  background: var(--pf-cream);
  color: var(--pf-pine);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--pf-wrap) + 2 * var(--pf-gutter));
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

.kicker {
  font-size: var(--pf-size-kicker);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pf-kicker);
}

.display {
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  line-height: var(--pf-leading-display);
  letter-spacing: var(--pf-tracking-display);
}

/* ------------------------------------------------------------------ forest ground
   .pf-on-forest (tokens.css) swaps the roles; this adds the painted field texture,
   generated from the icon's own forest strokes. */

.pf-on-forest {
  background-color: var(--pf-bg);
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(3, 44, 28, 0) 40%, rgba(2, 24, 15, 0.55) 100%),
    url("images/forest-texture.webp");
  background-size: auto, 480px 480px;
  color: var(--pf-text);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--pf-radius-button);
  background: var(--pf-button-bg);
  color: var(--pf-button-text);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  transition: transform 160ms ease, filter 160ms ease;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------------ header */

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  /* the header sits on the forest wash, outside .pf-on-forest, so it takes the forest focus ring */
  --pf-focus: var(--pf-gold-light);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.brand { display: inline-flex; padding: 6px 0; text-decoration: none; }
/* the flat horizontal lockup, 36 px tall on phones and 44 px from tablets up (guide: 32 to 48 px) */
.brand img { width: 114px; height: auto; filter: drop-shadow(0 1px 8px rgba(3, 44, 28, 0.6)); }
/* a solid forest chip, so the cream label holds AA over any part of the painting */
.topbar-x {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 249, 235, 0.3);
  border-radius: var(--pf-radius-button);
  background: rgba(3, 44, 28, 0.78);
  color: var(--pf-cream);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.topbar-x:hover { border-color: var(--pf-gold); color: var(--pf-gold-light); }
.topbar-x svg { width: 15px; height: 15px; }

@media (min-width: 768px) {
  .topbar .wrap { min-height: 88px; }
  .brand img { width: 139px; }
}

/* ------------------------------------------------------------------ hero
   The painting comes first. The .stage is the painting's own 3:2 box, so the pin, its
   ground shadow and the dotted route are placed in painting coordinates and always
   land on the same dry bank, whatever the screen: the tip at (70%, 45.5%), the route
   climbing the golden slope to the right. The painting is never drawn wider than its
   1536 px master; past that it sits on the forest field. */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-scene {
  position: relative;
  height: clamp(420px, 116vw, 620px);
  overflow: hidden;
  container-type: size;
}
/* Phones and tablets: the bank lands at 66% of the scene (0.66 / 0.455 = 1.4505, so the
   stage is 145% of the scene tall) and the pin is centred (0.70 x 1.5 = 1.05). */
.stage {
  --h: 145.05cqh;
  position: absolute;
  top: 0;
  left: calc(50cqw - var(--h) * 1.05);
  width: calc(var(--h) * 1.5);
  height: var(--h);
}
.hero-painting,
.stage::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  /* the painting dissolves into the forest ground before the words, so there is no seam */
  -webkit-mask-image: linear-gradient(to bottom, #000 47%, rgba(0, 0, 0, 0.5) 58%, transparent 68%);
  mask-image: linear-gradient(to bottom, #000 47%, rgba(0, 0, 0, 0.5) 58%, transparent 68%);
}
/* a fine paper grain, so the painting reads as paint rather than pixels when it is enlarged */
.stage::after {
  content: "";
  background: url("images/grain.webp") 0 0 / 128px 128px;
  mix-blend-mode: soft-light;
  opacity: 0.32;
  pointer-events: none;
}
.hero-scene::before,
.hero-scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
/* top wash: the header reads on the bright sky */
.hero-scene::before {
  top: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(3, 44, 28, 0.82), rgba(3, 44, 28, 0.38) 55%, rgba(3, 44, 28, 0));
}
/* a little evening shade on the lower painting, so the dots and the shadow read */
.hero-scene::after {
  bottom: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(3, 44, 28, 0), rgba(3, 44, 28, 0.3));
}

/* The planted pin (guide section 4: 200 px tall and up, tip on dry ground, a ground shadow). */
.route,
.ground,
.pin { position: absolute; z-index: 2; }
.route {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
}
.route path { stroke-dasharray: 0 14; }
.route-under { stroke: rgba(3, 44, 28, 0.55); stroke-width: 10px; }
.route-dots { stroke: var(--pf-gold); stroke-width: 5.5px; }
.ground {
  left: 70%;
  top: 45.5%;
  width: 9.5%;
  height: 2.8%;
  transform: translate(-50%, -45%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 14, 7, 0.62), rgba(0, 14, 7, 0));
}
.pin {
  left: 70%;
  top: 45.5%;
  width: auto;
  height: 32%;
  max-width: none;
  /* the tip is the bottom centre of the image (row 900 of 903) */
  transform: translate(-50%, -99.67%);
  filter: drop-shadow(0 14px 18px rgba(0, 12, 6, 0.5));
}

.hero-inner {
  position: relative;
  z-index: 2;
  margin-top: -36px;
  padding-bottom: 60px;
}
.hero-copy { text-align: center; }
.status {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 10px;
  color: var(--pf-text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
}
.status .lead { color: var(--pf-text); font-weight: 600; }
.status .lead::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--pf-gold);
  box-shadow: 0 0 0 4px rgba(241, 171, 29, 0.22);
  vertical-align: 0.08em;
}
.status .sep { color: var(--pf-gold); }

.hero h1 {
  margin-top: 14px;
  /* the one place the page goes past display-xl: the line is the hero */
  font-size: clamp(2.75rem, 1.5rem + 5.4vw, 6rem);
  color: var(--pf-heading);
  text-wrap: balance;
}
/* one rule for either line: only the last word is gold */
.hero h1 .gold { color: var(--pf-gold); }
.lede {
  max-width: 30ch;
  margin: 16px auto 0;
  color: var(--pf-text-muted);
  font-size: var(--pf-size-body-l);
  line-height: 1.5;
}
.hero .actions { margin-top: 28px; }

@media (max-width: 519px) {
  .status { flex-direction: column; }
  .status .sep { display: none; }
}

@media (min-width: 768px) {
  .hero-inner { margin-top: -44px; padding-bottom: 80px; }
}

@media (min-width: 960px) {
  .hero {
    display: grid;
    align-items: center;
    min-height: min(900px, 100vh);
    min-height: min(900px, 100svh);
  }
  .hero-scene { position: absolute; inset: 0; height: auto; }
  /* cover the hero, but never wider than the 1536 px master: past that the painting is
     pinned right on the forest field and its left edge feathers out */
  .stage {
    --w: min(max(100cqw, 150cqh), 1536px);
    width: var(--w);
    height: calc(var(--w) / 1.5);
    left: max(calc((100cqw - var(--w)) / 2), calc(100cqw - var(--w)));
    /* crop more water than sky, so the pin always clears the header */
    top: calc((100cqh - var(--w) / 1.5) / 4);
  }
  .hero-painting,
  .stage::after {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%);
    mask-image: linear-gradient(to right, transparent, #000 12%);
  }
  .hero-scene::before { height: 130px; background: linear-gradient(to bottom, rgba(3, 44, 28, 0.55), rgba(3, 44, 28, 0)); }
  /* the forest wash ends a little past the words, wherever the wrap puts them */
  .hero-scene::after {
    --copy-end: calc(max(var(--pf-gutter), (100vw - var(--pf-wrap)) / 2) + 540px);
    top: 0;
    height: auto;
    /* and an evening shade over the lower water, so the eye stays on the pin */
    background:
      linear-gradient(to bottom, rgba(3, 44, 28, 0) 58%, rgba(3, 44, 28, 0.42) 100%),
      linear-gradient(to right,
      rgba(3, 44, 28, 0.96) 0,
      rgba(3, 44, 28, 0.9) calc(var(--copy-end) - 120px),
      rgba(3, 44, 28, 0.72) var(--copy-end),
      rgba(3, 44, 28, 0.22) calc(var(--copy-end) + 160px),
      rgba(3, 44, 28, 0) calc(var(--copy-end) + 260px));
  }
  .hero-inner { margin-top: 0; padding-top: 104px; padding-bottom: 72px; }
  .hero-copy { max-width: 540px; text-align: left; }
  .status { justify-content: flex-start; }
  .lede { margin-left: 0; }
}

/* ------------------------------------------------------------------ strip
   Paintings with one line of voice each. Unnumbered, no medallion, no steps:
   a tease, never a "how it works". */

.strip { padding: 72px 0 80px; border-top: 1px solid var(--pf-band-rule); }
.section-head { max-width: 640px; }
.voice-line {
  margin-top: 10px;
  font-family: var(--pf-font-voice);
  font-style: italic;
  font-weight: 400;
  font-size: var(--pf-size-display-l);
  line-height: 1.15;
  color: var(--pf-heading);
  text-wrap: balance;
}
.strip-list {
  display: grid;
  gap: 40px;
  margin-top: 36px;
}
.tile img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--pf-radius-image);
  background: var(--pf-surface);
  box-shadow: 0 0 0 1px var(--pf-hairline);
}
.tile figcaption {
  max-width: 22ch;
  margin-top: 18px;
  font-family: var(--pf-font-display);
  font-size: var(--pf-size-display-m);
  font-weight: var(--pf-weight-display);
  line-height: 1.18;
  letter-spacing: var(--pf-tracking-display);
  color: var(--pf-heading);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .strip { padding: 96px 0 104px; }
  .strip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
  .tile img { aspect-ratio: 4 / 5; }
  /* keep each painting's subject in the tall crop */
  .strip-list li:nth-child(1) .tile img { object-position: 74% 50%; }
  .strip-list li:nth-child(2) .tile img { object-position: 62% 50%; }
  .strip-list li:nth-child(3) .tile img { object-position: 64% 50%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tile figcaption { font-size: 1.3125rem; }
}

@media (min-width: 1200px) {
  .strip-list { gap: 32px; }
}

/* ------------------------------------------------------------------ voice band */

.voice {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 520px;
  overflow: hidden;
  background: var(--pf-forest-deep);
  color: var(--pf-cream);
}
.voice-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 36% 40%;
}
.voice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 44, 28, 0.94) 0%, rgba(3, 44, 28, 0.82) 34%, rgba(3, 44, 28, 0.2) 66%, rgba(3, 44, 28, 0) 82%);
}
.voice .wrap { position: relative; z-index: 1; padding-block: 56px; }
.voice blockquote p {
  max-width: 24ch;
  font-family: var(--pf-font-voice);
  font-style: italic;
  font-weight: 400;
  font-size: var(--pf-size-display-l);
  line-height: 1.18;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(3, 44, 28, 0.5), 0 0 28px rgba(3, 44, 28, 0.55);
}
.voice blockquote span { display: block; }
.voice blockquote .turn { color: var(--pf-gold); font-weight: 700; }

@media (min-width: 768px) {
  .voice { min-height: 560px; }
  .voice .wrap { padding-block: 72px; }
}
@media (min-width: 960px) {
  .voice { min-height: 600px; align-items: center; }
  .voice::after {
    background: linear-gradient(to right, rgba(3, 44, 28, 0.94) 0%, rgba(3, 44, 28, 0.88) 36%, rgba(3, 44, 28, 0.55) 52%, rgba(3, 44, 28, 0.18) 68%, rgba(3, 44, 28, 0) 82%);
  }
  .voice-art { object-position: 50% 45%; }
  .voice blockquote p { font-size: clamp(2.5rem, 1.6rem + 1.6vw, 3.25rem); max-width: none; }
}

/* ------------------------------------------------------------------ origin */

.origin { padding: 80px 0; background: var(--pf-surface-warm); border-top: 1px solid var(--pf-band-rule); }
.origin-grid { display: grid; gap: 40px; align-items: center; }
.origin-art img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--pf-radius-image);
  outline: 1px solid var(--pf-rule);
  outline-offset: 7px;
}
.origin-copy h2 {
  margin-top: 10px;
  font-size: var(--pf-size-display-l);
  color: var(--pf-heading);
  text-wrap: balance;
}
.origin-copy p:not(.kicker) {
  margin-top: 16px;
  max-width: 36ch;
  font-size: var(--pf-size-body-l);
  line-height: var(--pf-leading-text);
  text-wrap: pretty;
}
.origin-copy .aside {
  margin-top: 22px;
  color: var(--pf-kicker);
  font-family: var(--pf-font-voice);
  font-style: italic;
  font-size: 1.25rem;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .origin-art img { outline-offset: 5px; }
}

@media (min-width: 768px) {
  .origin { padding: 104px 0; }
}
@media (min-width: 768px) {
  .origin-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}
@media (min-width: 960px) {
  .origin-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; }
}

/* ------------------------------------------------------------------ follow band */

.follow { padding: 80px 0; text-align: center; }
/* the painted mark, at its 96 px minimum width or larger */
.follow .mark { width: 96px; margin: 0 auto; filter: drop-shadow(0 10px 18px rgba(0, 12, 6, 0.5)); }
.follow h2 {
  max-width: 20ch;
  margin: 22px auto 0;
  font-size: var(--pf-size-display-l);
  color: var(--pf-heading);
  text-wrap: balance;
}
.follow p.sub {
  max-width: 32ch;
  margin: 12px auto 0;
  color: var(--pf-text-muted);
  font-size: var(--pf-size-body-l);
}
.follow .actions { margin-top: 28px; }
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}
.facts li {
  padding: 8px 14px;
  border: 1px solid rgba(241, 171, 29, 0.42);
  border-radius: var(--pf-radius-button);
  color: var(--pf-text);
  font-size: 0.875rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .follow { padding: 104px 0; }
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  padding: 48px 0 40px;
  border-top: 1px solid var(--pf-band-rule);
  background: var(--pf-bg);
  color: var(--pf-text-muted);
  font-size: 0.9375rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--pf-hairline);
}
.footer-brand { display: inline-flex; flex-direction: column; gap: 8px; text-decoration: none; }
.footer-brand img { width: 139px; }
.footer-brand span { color: var(--pf-heading); font-family: var(--pf-font-voice); font-style: italic; font-size: 1.0625rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--pf-text); }
.footer-links a[href] { text-decoration: underline; text-decoration-color: var(--pf-rule); text-underline-offset: 4px; }
.footer-links a[href]:hover { color: var(--pf-heading); text-decoration-color: currentColor; }
.fineprint { margin-top: 22px; max-width: 70ch; font-size: var(--pf-size-caption); line-height: 1.6; }
.fineprint + .fineprint { margin-top: 8px; }

/* ------------------------------------------------------------------ 404 */

.lost {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 104px 0 64px;
}
.lost-grid { display: grid; gap: 36px; align-items: center; }
.lost-art img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--pf-radius-image);
  outline: 1px solid rgba(241, 171, 29, 0.55);
  outline-offset: 7px;
}
.lost h1 { margin-top: 12px; font-size: var(--pf-size-display-xl); color: var(--pf-heading); text-wrap: balance; }
.lost p.sub { margin-top: 14px; max-width: 32ch; color: var(--pf-text-muted); font-size: var(--pf-size-body-l); }
.lost .actions { margin-top: 28px; }

@media (max-width: 767px) {
  .lost-art img { outline-offset: 5px; }
}

@media (min-width: 960px) {
  .lost-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
}

/* ------------------------------------------------------------------ footer: current page and forest grounds */

.footer-links a[aria-current="page"] { color: var(--pf-heading); text-decoration-color: currentColor; }
/* the 404 page's footer sits on the textured forest field: let it show through, with forest hairlines */
.pf-on-forest .site-footer {
  --pf-hairline: rgba(255, 249, 235, 0.14);
  --pf-band-rule: rgba(241, 171, 29, 0.18);
  background: transparent;
}

/* ------------------------------------------------------------------ documents
   /privacy, /terms and /support: the forest masthead, then one readable column with an
   "On this page" list beside it on wide screens. These pages load no web fonts, so the
   reading text is the serif stack (Charter on Apple devices, Georgia or Cambria elsewhere)
   and the interface text is a system sans serif. system-ui is left out on purpose: on
   Apple devices it is SF, which the brand never uses. */

.doc-page { --pf-font-text: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.doc-grid { display: grid; gap: 32px; }
.doc-hero { padding: 108px 0 44px; }
.doc-hero h1 {
  margin-top: 10px;
  font-size: var(--pf-size-display-l);
  color: var(--pf-heading);
  text-wrap: balance;
}
.doc-meta { margin-top: 10px; color: var(--pf-text-muted); font-size: 0.9375rem; }
.doc-lede {
  max-width: 46ch;
  margin-top: 14px;
  color: var(--pf-text-muted);
  font-size: var(--pf-size-body-l);
  line-height: 1.5;
  text-wrap: pretty;
}
.doc-hero .actions { margin-top: 24px; }
.doc-hero .btn { max-width: 100%; overflow-wrap: anywhere; }

.doc { padding: 36px 0 88px; }

/* On this page: one collapsed line above the text on phones and tablets (.doc-toc-compact),
   a sticky list beside it on desktops (.doc-toc). Only one of the two is ever displayed. */
.doc-toc { display: none; }
.doc-toc-compact {
  border: 1px solid var(--pf-hairline);
  border-radius: var(--pf-radius-card);
  background: var(--pf-surface);
  font-size: 0.9375rem;
}
.doc-toc-compact summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: var(--pf-radius-card);
  color: var(--pf-heading);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.doc-toc-compact summary::-webkit-details-marker { display: none; }
/* a small chevron that turns when the list is open */
.doc-toc-compact summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--pf-kicker);
  border-bottom: 2px solid var(--pf-kicker);
  transform: translateY(-2px) rotate(45deg);
}
.doc-toc-compact[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.doc-toc-compact summary:focus-visible {
  outline: 3px solid var(--pf-focus);
  outline-offset: 2px;
}
.doc-toc-compact ul { padding: 6px 20px 12px; border-top: 1px solid var(--pf-hairline); }
.doc-toc ul { margin-top: 8px; }
.doc-toc a,
.doc-toc-compact a {
  display: block;
  padding: 7px 0;
  color: var(--pf-text-muted);
  line-height: 1.35;
  text-decoration: none;
}
.doc-toc a:hover,
.doc-toc-compact a:hover { color: var(--pf-heading); text-decoration: underline; text-underline-offset: 3px; }

.doc-body {
  min-width: 0;
  font-family: var(--pf-font-voice);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--pf-text);
}
.doc-body > * + * { margin-top: 44px; }
.doc-body > section + section { padding-top: 40px; border-top: 1px solid var(--pf-hairline); }
.doc-body > .doc-card + section { padding-top: 0; border-top: 0; }
.doc-intro { font-size: 1.125rem; }
.doc-body h2 {
  font-family: var(--pf-font-display);
  font-size: var(--pf-size-display-m);
  font-weight: var(--pf-weight-display);
  line-height: 1.2;
  letter-spacing: var(--pf-tracking-display);
  color: var(--pf-heading);
  text-wrap: balance;
  scroll-margin-top: 24px;
}
.doc-body h3 {
  margin-top: 32px;
  font-family: var(--pf-font-text);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pf-heading);
  scroll-margin-top: 24px;
}
.doc-body p,
.doc-body ul,
.doc-body table { margin-top: 16px; }
.doc-body h3 + p,
.doc-body h3 + ul { margin-top: 8px; }
.doc-intro > :first-child,
.doc-body section > h2:first-child { margin-top: 0; }
.doc-body ul { padding-left: 1.3em; list-style: disc; }
.doc-body li + li { margin-top: 10px; }
.doc-body li::marker { color: var(--pf-rule); }
.doc-body strong { font-weight: 700; color: var(--pf-heading); }
.doc-body a,
.fineprint a {
  color: var(--pf-heading);
  text-decoration: underline;
  text-decoration-color: var(--pf-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.doc-body a:hover,
.fineprint a:hover { text-decoration-color: currentColor; }

/* a highlighted section: the privacy policy's short version, the support contact */
.doc-card {
  padding: 24px 22px 26px;
  border: 1px solid var(--pf-hairline);
  border-radius: var(--pf-radius-card);
  background: var(--pf-surface);
}

/* tables: two columns from 640 px; below that each row stacks, its first cell as a label.
   The explicit roles in the markup keep the table's meaning for screen readers either way. */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.6;
}
.doc-table th,
.doc-table td {
  padding: 14px 18px 14px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--pf-hairline);
}
.doc-table thead th {
  padding-top: 0;
  padding-bottom: 10px;
  border-top: 0;
  font-family: var(--pf-font-text);
  font-size: var(--pf-size-kicker);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pf-kicker);
}
.doc-table tbody th { width: 32%; font-weight: 700; color: var(--pf-heading); }
.doc-table tbody td { padding-right: 0; }
.doc-table tbody tr:last-child > * { border-bottom: 1px solid var(--pf-hairline); }

@media (max-width: 639px) {
  .doc-table,
  .doc-table tbody,
  .doc-table tr,
  .doc-table th,
  .doc-table td { display: block; width: auto; }
  .doc-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .doc-table tbody tr { padding: 14px 0; border-top: 1px solid var(--pf-hairline); }
  .doc-table tbody tr:last-child { border-bottom: 1px solid var(--pf-hairline); }
  .doc-table tbody th,
  .doc-table tbody td,
  .doc-table tbody tr:last-child > * { width: auto; padding: 0; border: 0; }
  .doc-table tbody td { margin-top: 4px; }
}

@media (min-width: 768px) {
  .doc-hero { padding: 140px 0 56px; }
  .doc { padding: 56px 0 112px; }
  .doc-card { padding: 30px 32px 32px; }
}

@media (min-width: 1024px) {
  .doc-grid { grid-template-columns: 236px minmax(0, 720px); justify-content: center; column-gap: 72px; }
  .doc-grid-single { grid-template-columns: minmax(0, 720px); }
  /* the title lines up with the text column, not the list beside it */
  .doc-grid:not(.doc-grid-single) .doc-hero-copy { grid-column: 2; }
  .doc-toc-compact { display: none; }
  .doc-toc {
    display: block;
    position: sticky;
    top: 28px;
    align-self: start;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    font-size: 0.9375rem;
  }
  .doc-toc a { padding: 6px 0; }
}