@font-face { font-family: "NType82 Headline"; src: url(/guides/assets/fonts/NType82-Headline.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NType82"; src: url(/guides/assets/fonts/NType82-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NDot 55"; src: url(/guides/assets/fonts/NDot-55.woff2) format("woff2"); font-weight: 400; font-display: swap; }
/* Guides: the app's tours, kept on the web. The hub lists them the way Settings › Guides does;
   a tour's page opens with the card the app offers it with, then walks its steps beside the
   real screen, the white ring moving from target to target as you read. One look: dark only. */
:root {
  color-scheme: dark;
  --black: #000000;      /* NothingBlack: page and every LED that is off */
  --surface: #121212;    /* SurfaceDark: plates and cards */
  --control: #1a1a1a;    /* NothingDarkGrey: controls at rest */
  --variant: #2a2a2a;    /* SurfaceVariant */
  --outline: #404040;    /* OutlineDark: 1px borders */
  --hairline: #242424;   /* dividers */
  --line-art: #333333;   /* SheetBorder: the phone's line art */
  --grey: #808080;       /* secondary text */
  --on: #e0e0e0;         /* body text */
  --lead: #a3a3a3;       /* the line under a title */
  --white: #ffffff;      /* titles, selection, focus, the tour's ring */
  --led-off: #0e0e0e;
  --dim: rgba(0, 0, 0, 0.66);   /* the tour's dim over everything but its target (DimColor) */
  --f-head: "NType82 Headline", "NType82", Georgia, serif;
  --f-brand: "NType82", Georgia, serif;
  --f-ui: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-dot: "NDot 55", "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --glide: cubic-bezier(0.22, 1, 0.36, 1);   /* the ring and the card travel on one spring-like curve */
}
*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
img { max-width: 100%; }
[hidden] { display: none !important; }
html { background: var(--black); scroll-padding-top: 80px; }
body {
  margin: 0; color: var(--on); background: var(--black);
  font: 400 14px/1.6 var(--f-ui); letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--black); }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--white); text-wrap: balance; }
.wrap {
  width: 100%; max-width: 1360px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) {
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
.ico { width: 20px; height: 20px; flex: none; }

/* Buttons: white is the one commitment per view */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: 500 15px/1 var(--f-ui); letter-spacing: 0.15px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.btn-primary { background: var(--white); border-color: var(--white); color: var(--black); }
.btn-primary:hover { background: var(--on); border-color: var(--on); }
.btn-primary:active { background: #bdbdbd; border-color: #bdbdbd; }
.btn-outline { background: var(--black); border-color: var(--outline); color: var(--on); }
.btn-outline:hover { border-color: var(--grey); color: var(--white); }
.btn-outline:active { background: var(--control); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* Header: the home's bar, with the way back to the guides beside the mark */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--black); border-bottom: 1px solid transparent; transition: border-color 180ms var(--ease); }
.nav.scrolled { border-bottom-color: var(--hairline); }
.bar { display: flex; align-items: center; gap: 14px; height: 64px; }
.brand { display: inline-flex; align-items: center; color: var(--white); flex: none; border-radius: 8px; }
.brand svg { width: 30px; height: 30px; flex: none; }
.crumb { font: 500 14px/1 var(--f-ui); color: var(--grey); text-decoration: none; padding: 8px 4px; border-radius: 8px; white-space: nowrap; }
.crumb:hover, .crumb[aria-current="page"] { color: var(--white); }
/* the way back as a path, > Guides > the guide: Guides stays whole, a long title ends in an ellipsis */
.crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: -6px; }
.crumbs .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumbs a.crumb { flex: none; }
.crumb-sep { width: 18px; height: 18px; flex: none; color: var(--outline); }
@media (max-width: 420px) { .crumbs { gap: 0; margin-left: -8px; } .crumbs .crumb { padding: 8px 2px; } .crumb-sep { width: 16px; height: 16px; } }
/* on a phone the title joins the path only once the page's h1 has scrolled under the bar (tour.js sets .titled) */
@media (max-width: 699px) {
  .crumbs > .crumb-sep:nth-of-type(2), .crumbs > span.crumb { display: none; }
  .nav.titled .crumbs > .crumb-sep:nth-of-type(2), .nav.titled .crumbs > span.crumb { display: block; animation: crumb-in 220ms var(--ease); }
}
@keyframes crumb-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .crumbs > * { animation: none !important; } }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.btn-nav { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-nav .ico { display: none; width: 17px; height: 17px; }
@media (max-width: 959px) {
  .btn-nav { width: 36px; padding: 0; }
  .btn-nav .ico { display: block; margin-left: 2px; }
  .btn-nav span { display: none; }
}
/* The phone, chosen once and remembered with the home: the words and the screens follow it */
.phone-menu { position: relative; flex: none; }
.phone-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 8px 0 13px; border-radius: 18px; border: 1px solid var(--outline); background: var(--black); color: var(--on); font: 500 13px/1 var(--f-ui); white-space: nowrap; cursor: pointer; }
.phone-pill:hover, .phone-pill[aria-expanded="true"] { border-color: var(--grey); color: var(--white); }
.phone-pill svg.res { width: 14px; height: 14px; flex: none; }
.phone-pill .ico { width: 18px; height: 18px; transition: transform 220ms var(--ease); }
.phone-pill[aria-expanded="true"] .ico { transform: rotate(180deg); }
.phone-pop { position: absolute; z-index: 30; right: 0; top: calc(100% + 10px); width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 24px; border: 1px solid var(--outline); background: var(--surface); }
.phone-pop button { display: grid; gap: 10px; padding: 5px 5px 11px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--black); color: var(--grey); font: 500 13px/1 var(--f-ui); text-align: left; cursor: pointer; transition: border-color 160ms var(--ease), color 160ms var(--ease); }
.phone-pop button:hover { border-color: var(--outline); color: var(--white); }
.phone-pop button[aria-checked="true"] { border-color: var(--white); color: var(--white); }
.phone-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 7px; }
.phone-row i { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--led-off); box-shadow: inset 0 0 0 1px var(--outline); }
.phone-pop [aria-checked="true"] .phone-row i { background: var(--white); box-shadow: none; }
@media (max-width: 959px) {
  .phone-pop { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); top: calc(68px + env(safe-area-inset-top, 0px)); width: auto; }
}
.plate { position: relative; display: block; aspect-ratio: 1; width: 100%; overflow: hidden; border: 1px solid var(--hairline); border-radius: 11px; background: var(--black); }
.plate .dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 13px 13px; }
.plate .art { position: absolute; inset: 0; color: var(--line-art); }
.plate .art svg { display: block; }
.plate .disc { position: absolute; left: 18%; top: 18%; width: 64%; }
.plate .art { transform: scale(1.4222); }
.plate .disc canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; }

/* A tour's LED art on its black disc: one cell wider than the shape (glyph-matrix.md), the rim the
   renderer draws itself, so the art fills the disc. It always sits on a surface, so the disc reads. */
.led-disc { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--black); flex: none; }
.led-disc canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; }
/* the offer card's line over the title: GUIDE · 8 STEPS · 1 MIN, as the app sets it */
.meta { font: 500 11px/1.3 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); font-variant-numeric: tabular-nums; }

/* Hub: Settings › Guides on the web. The four tours first, as "In the app" lists them */
.hub { padding-block: clamp(36px, 6vw, 88px) clamp(64px, 9vw, 120px); }
.hub-head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.hub-head h1 { font: 400 clamp(52px, 8vw, 112px)/0.9 var(--f-head); letter-spacing: -0.02em; }
.hub-head p { font-size: 15px; color: var(--lead); max-width: 44ch; }
/* every guide card is one height, row by row and across the grid */
.tours { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 12px; }
.tours > li { display: grid; min-width: 0; }
.tcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px;
  padding: 18px 20px 18px 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline);
  text-decoration: none; color: inherit; transition: border-color 180ms var(--ease);
}
.tcard:hover { border-color: var(--outline); }
.tcard:active { background: var(--control); }
.tcard .led-disc { width: 76px; align-self: center; }
.tcard-text { display: grid; gap: 6px; min-width: 0; }
.tcard h3 { font: 400 26px/1.1 var(--f-head); }
.tcard p { font-size: 13px; line-height: 1.5; color: var(--lead); }
@media (min-width: 700px) {
  .tours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tcard { padding: 22px 24px 22px 22px; gap: 22px; }
  .tcard .led-disc { width: 96px; }
  .tcard h3 { font-size: 30px; }
}
@media (max-width: 699px) { .hub-head { justify-items: center; text-align: center; } .tcard-text { align-self: center; } }

/* A tour: the offer card, then one fixed stage, the phone and one card. The page's scroll drives
   the steps: a tall track holds the stage pinned under the bar, and while it passes neither the
   phone nor the card moves. Only the ring glides and the card's words change. */
.t-intro { padding-block: clamp(28px, 5vw, 72px) clamp(32px, 5vw, 64px); }
/* the header is the app's offer card itself: surface, the disc, the count, the title, the line, the two buttons */
.offer { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 28px 20px 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); }
.offer .led-disc { width: clamp(128px, 36vw, 160px); margin-bottom: 6px; }
.offer h1 { font: 400 clamp(44px, 7vw, 96px)/0.92 var(--f-head); letter-spacing: -0.02em; }
.offer .line { font-size: 15px; line-height: 1.55; color: var(--lead); max-width: 46ch; text-wrap: balance; }
.offer .ctas { justify-content: center; margin-top: 12px; }
@media (min-width: 700px) {
  .offer { max-width: 1040px; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: clamp(32px, 5vw, 56px); row-gap: 14px; padding: clamp(28px, 4vw, 48px); }
  .offer .led-disc { grid-row: 1 / span 4; align-self: center; margin: 0; width: clamp(160px, 17vw, 216px); }
  .offer .ctas { justify-content: flex-start; }
}

.t-steps { border-bottom: 1px solid var(--hairline); }
.track { --bar: calc(65px + env(safe-area-inset-top, 0px)); --pin: calc(100svh - var(--bar)); --step: 52svh; position: relative; height: calc(var(--pin) + var(--n) * var(--step)); }
.pin { position: sticky; top: var(--bar); height: var(--pin); overflow: hidden; }
/* Touch: the stage is one full screen and the steps are not scroll positions at all. A swipe
   changes the step and nothing else, so neither a hard flick nor the address bar collapsing can
   carry it past one, and the page does not move while you walk the tour. Past either end a swipe
   leaves the stage. The page itself has three stops: the header, the stage, the next section. */
@media (pointer: coarse) {
  html.tour { scroll-snap-type: y mandatory; scroll-padding-top: calc(65px + env(safe-area-inset-top, 0px)); }
  html.tour .pin, html.tour .nav { touch-action: pinch-zoom; }
  .track { --pin: calc(100dvh - var(--bar)); height: var(--pin); scroll-snap-align: start; scroll-snap-stop: always; }
  .t-intro, .t-next { scroll-snap-align: start; }
  .foot { scroll-snap-align: end; }
}
.stage { height: 100%; }

/* The one box: the screen's capture and the ring are both in .sheet, which is exactly 1260:2800.
   The ring's sizes are the app's, in the capture's pixels: 3 to a dp. */
.window { position: relative; overflow: hidden; background: var(--black); }
.sheet { position: absolute; left: 0; top: 0; aspect-ratio: 1260 / 2800; container-type: inline-size; transform-origin: 0 0; }
.shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.shot.under { opacity: 1; }
.shot.on { opacity: 1; z-index: 1; transition: opacity 200ms var(--ease); }
/* the box is the ring's outer edge: the app's 2 dp stroke is centred on the hole, 6 dp out from the target */
.hole {
  position: absolute; z-index: 2; pointer-events: none; display: block;
  /* an inset shadow, not a border: browsers snap borders to whole pixels, and this one is 1.6 px wide */
  --ring: calc(6 * 100cqw / 1260);
  box-shadow: inset 0 0 0 var(--ring) var(--white), 0 0 0 300vmax var(--dim);
  transition: left 620ms var(--glide), top 620ms var(--glide), width 620ms var(--glide), height 620ms var(--glide), border-radius 620ms var(--glide), box-shadow 200ms var(--ease);
}
.hole.none { box-shadow: inset 0 0 0 var(--ring) transparent, 0 0 0 300vmax var(--dim); }

/* The card: the app's, one surface. Its words all sit in the page, stacked in one place, so it
   keeps one size; the step's fade in. A step about Nothing's own screens opens the clip in it. */
.tc { display: grid; gap: 12px; padding: 18px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); min-width: 0; }
.tc-media { height: 0; overflow: hidden; border-radius: 16px; background: #070707 no-repeat center / contain; margin-bottom: -12px; transition: height 420ms var(--glide), margin-bottom 420ms var(--glide); }
.tc-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tc.media .tc-media { height: var(--mh, 320px); margin-bottom: 0; }
.prog { display: flex; align-items: center; gap: 10px; }
.cells { display: flex; gap: 4px; }
.cells i { width: 8px; height: 8px; border-radius: 2px; background: var(--led-off); box-shadow: inset 0 0 0 1px var(--outline); }
.cells i.lit { background: var(--white); box-shadow: none; }
.count { font: 500 12px/1 var(--f-ui); color: var(--grey); font-variant-numeric: tabular-nums; }
.tc-words { list-style: none; margin: 0; padding: 0; display: grid; }
.tc-words li { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; opacity: 0; transition: opacity 220ms var(--ease); }
.tc-words li.on { opacity: 1; }
.tc-words h2 { font: 400 clamp(24px, 2.4vw, 32px)/1.12 var(--f-head); }
.tc-words p { font-size: 14px; line-height: 1.55; color: var(--lead); white-space: pre-line; }
.tc-ctrl { display: flex; align-items: center; gap: 10px; }
.skip { margin: 0 auto 0 -4px; padding: 10px 4px; border: 0; border-radius: 8px; background: none; color: var(--grey); font: 500 13px/1 var(--f-ui); cursor: pointer; }
.skip:hover { color: var(--white); }
.back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--control); color: var(--on); cursor: pointer; transition: background-color 180ms var(--ease); }
.back:hover:not(:disabled) { background: var(--variant); }
.back:disabled { color: var(--outline); cursor: default; }
.next { min-width: 122px; }   /* Next and End tour, one width */
.still, .still * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sheet, .hole, .shot.on, .tc-words li, .tc-media { transition: none !important; } }

/* Wide: the phone and the card side by side, the whole screen in the phone */
@media (min-width: 700px) {
  /* the card stands on the phone's foot: Back and Next keep one spot through the tour, and a clip grows it upward only */
  .stage { display: grid; grid-template-columns: auto minmax(0, 500px); justify-content: center; align-content: center; align-items: end; column-gap: clamp(40px, 7vw, 112px); }
  .phone { --ph: min(820px, calc(var(--pin) - 48px)); padding: 6px; border: 1px solid var(--line-art); border-radius: 40px; background: var(--black); }
  /* the frame comes from the box, never the other way round */
  .window { height: calc(var(--ph) - 14px); aspect-ratio: 1260 / 2800; border-radius: 33px; }
  .sheet { width: 100%; }
  .tc { padding: 22px 24px; }
  .tc-words p { font-size: 15px; }
}
/* Phones: the screen fits the width and a camera keeps the target in view above the card, which
   stays at the foot with Back and Next under the thumb. A clip opens the card over the screen. */
@media (max-width: 699px) {
  .stage { position: relative; }
  .phone { position: absolute; left: 0; right: 0; top: 8px; height: var(--wh, 400px); }
  .window { height: 100%; border-radius: 22px; border: 1px solid var(--line-art); }
  .sheet { width: var(--sw, 100%); transition: transform 620ms var(--glide); }
  .tc { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; padding: 14px 16px; }
  .tc-words h2 { font-size: 24px; }
  .tc-words p { font-size: 13.5px; line-height: 1.5; }
}

/* The other tours, after the last step */
.t-next { padding-block: clamp(48px, 7vw, 96px); }
.t-next h2 { font: 400 clamp(30px, 3.4vw, 44px)/1.05 var(--f-head); margin-bottom: clamp(24px, 3vw, 36px); }
@media (max-width: 699px) { .t-next h2 { text-align: center; } }

.foot { padding-block: 28px 40px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--grey); display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }

/* Behind the page, the home's soft grid: the Matrix's lattice (a cell is four LEDs of the Phone (3),
   two of the (4a) Pro), hairlines with a faint + where they cross, the full width of the screen from
   the bar to the footer. Cards, plates and the phone are opaque, so it only shows around them. */
body { overflow-x: clip; }
main { position: relative; isolation: isolate; --grid-cell: 80px; --grid-cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'80'%20height%3D'80'%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C0.1)'%3E%3Crect%20width%3D'5'%20height%3D'1'%2F%3E%3Crect%20x%3D'76'%20width%3D'4'%20height%3D'1'%2F%3E%3Crect%20width%3D'1'%20height%3D'5'%2F%3E%3Crect%20y%3D'76'%20width%3D'1'%20height%3D'4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
main::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none;
  background-image: var(--grid-cross), linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell); background-position: 50% 0; }
@media (max-width: 1099px) { main { --grid-cell: 64px; --grid-cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'64'%20height%3D'64'%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C0.1)'%3E%3Crect%20width%3D'4'%20height%3D'1'%2F%3E%3Crect%20x%3D'61'%20width%3D'3'%20height%3D'1'%2F%3E%3Crect%20width%3D'1'%20height%3D'4'%2F%3E%3Crect%20y%3D'61'%20width%3D'1'%20height%3D'3'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } }
@media (max-width: 699px) { main { --grid-cell: 48px; --grid-cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C0.1)'%3E%3Crect%20width%3D'4'%20height%3D'1'%2F%3E%3Crect%20x%3D'45'%20width%3D'3'%20height%3D'1'%2F%3E%3Crect%20width%3D'1'%20height%3D'4'%2F%3E%3Crect%20y%3D'45'%20width%3D'1'%20height%3D'3'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } }

/* A guide to read (Widgets, which has no tour): the topics as cards on the grid, the picture or
   clip beside the words on a wide screen and under them on a phone; what is in it on the left. */
.t-read { display: grid; gap: 12px; padding-block: 0 clamp(48px, 7vw, 96px); }
.r-toc { display: none; }
.r-cards { display: grid; gap: 12px; min-width: 0; }
.r-card { display: grid; gap: 22px; padding: 22px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); min-width: 0; scroll-margin-top: 88px; }
.r-text h2 { font: 400 clamp(28px, 3vw, 40px)/1.05 var(--f-head); margin-bottom: 14px; }
.r-text p { margin: 0 0 12px; color: var(--lead); max-width: 62ch; }
.r-text p:last-child { margin-bottom: 0; }
.r-text strong { color: var(--white); font-weight: 500; }
.r-text a { color: var(--white); text-underline-offset: 3px; }
.r-note { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--black); border: 1px solid var(--hairline); max-width: 62ch; }
.r-note h3 { font: 500 13px/1.3 var(--f-ui); margin-bottom: 6px; }
.r-note p { margin: 0; }
.r-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.r-media { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #070707; border: 1px solid var(--hairline); }
.r-media img, .r-media video { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.r-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.r-play { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--outline); background: rgba(0, 0, 0, 0.6); color: var(--white); cursor: pointer; }
.r-play .ico, .r-close .ico { width: 20px; height: 20px; }
.r-box { max-width: 92vw; max-height: 92vh; padding: 0; border: 1px solid var(--hairline); border-radius: 16px; background: var(--black); overflow: hidden; }
.r-box::backdrop { background: rgba(0, 0, 0, 0.86); }
.r-box img { display: block; max-width: 90vw; max-height: 88vh; object-fit: contain; }
.r-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--outline); background: rgba(0, 0, 0, 0.6); color: var(--white); cursor: pointer; }
@media (min-width: 700px) { .r-card { padding: clamp(24px, 3vw, 36px); } }
@media (min-width: 1100px) {
  .t-read { grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: start; }
  .r-toc { display: block; position: sticky; top: 88px; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); }
  .r-toc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
  .r-toc a { display: block; padding: 6px 0; font-size: 13px; color: var(--grey); text-decoration: none; }
  .r-toc a:hover { color: var(--white); }
  .r-card.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: start; }
  /* two pictures share the side, next to each other */
  .r-side:has(> .r-media + .r-media) { grid-template-columns: 1fr 1fr; }
}

/* Legal pages on the same shell: an opening card with no Matrix, the sections as cards */
.offer.offer-plain { grid-template-columns: minmax(0, 1fr); }
.offer-plain .ctas { flex-wrap: wrap; }
.r-text h3 { font: 500 14px/1.4 var(--f-ui); color: var(--white); margin: 22px 0 8px; }
.r-text h2 + h3 { margin-top: 4px; }
.r-text ul, .r-text ol { margin: 0 0 12px; padding-left: 20px; color: var(--lead); max-width: 62ch; }
.r-text li { margin: 0 0 6px; }
.r-text li::marker { color: var(--grey); }
.r-text .uppercase-text { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.r-info .r-text p { margin-bottom: 4px; }
.r-alert { background: var(--black); border-color: var(--outline); }
.r-alert .r-text p { color: var(--white); margin: 0; }
.r-fine { margin: 8px 4px 0; font-size: 12px; color: var(--grey); }
.foot-links { display: inline-flex; gap: 16px; }
.foot-links a { color: var(--grey); text-decoration: none; }
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--white); }
/* a long list of contents scrolls inside its card instead of running past the screen */
@media (min-width: 1100px) { .r-toc { max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--outline) transparent; } }
/* a reading section on a tour's page has no list beside it: the cards take the whole column */
.t-read.t-solo { grid-template-columns: minmax(0, 1fr); }
.r-text ol { counter-reset: none; }
.r-text ol li { padding-left: 2px; }
.r-side { align-items: start; }
.r-side .r-wide { grid-column: 1 / -1; }