/* Reading pages (privacy, terms, refund, delete-account, and the investor brief): one measure, a sticky numbered
   contents rail generated from the real headings, the closing strip. Loaded only by those five pages, after site.css.
   No held scenes, no GSAP: the title rises once, the date pill drops like a task on the map, and nothing else moves. */

/* ---------- opener: the app's map ground with the title set on it ---------- */
.rd-open { position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 54vh, 560px); padding: calc(var(--nav-h) + 40px) 0 clamp(32px, 4.4vw, 64px); background: var(--map); overflow: hidden; overflow: clip; }
.rd-open .map-bg { opacity: .9; }
.rd-open-in { position: relative; z-index: 1; }
.rd-kick { margin-bottom: clamp(18px, 2.4vw, 32px); }
.rd-kick span { display: inline-block; font: 600 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; border-radius: 8px; padding: 8px 10px 7px; }
.rd-h1 { max-width: 17ch; font: 800 clamp(48px, 8.9vw, 128px)/.92 var(--display); letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 0 .04em var(--map), 0 0 .1em var(--map), 0 0 .18em var(--map); }
html.motion .rd-h1 { animation: rd-rise .9s var(--out) both; }
@keyframes rd-rise { from { opacity: 0; transform: translateY(.3em); } }

/* the meta line under the map: "Last updated" is the pill, the rest sits quiet beside it */
.rd-sub { display: grid; gap: 14px; padding-top: clamp(22px, 2.6vw, 34px); padding-bottom: clamp(22px, 2.6vw, 34px); border-bottom: 1px solid var(--rule); }
.rd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 15px; line-height: 1.4; color: var(--mute); }
.rd-sep { display: none; }
.rd-date { font-size: clamp(18px, 1.6vw, 22px); padding: .2em .6em .08em; }
html.motion .rd-date { animation: pin-drop .55s var(--out) .25s both; }
.rd-co { max-width: 72ch; font-size: 15px; line-height: 1.5; color: var(--mute); }

/* ---------- the reading grid: rail left at desktop, a Contents disclosure on phone ---------- */
.rd { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(28px, 4vw, 72px); padding-bottom: clamp(72px, 8vw, 128px); }
.rd-rail { display: none; }
.rd-rail ol, .rd-toc ol { display: grid; gap: 1px; }
.rd-rail a, .rd-toc a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; gap: 6px; min-height: 40px; padding: 8px 10px; border-radius: 12px; font: 600 14px/1.3 var(--text); color: var(--mute); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .25s var(--out), color .25s var(--out); }
.rd-n { justify-self: start; min-width: 2.4em; text-align: center; padding: .34em .5em .2em; border-radius: 999px; font: 800 13px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; transition: background-color .25s var(--out), box-shadow .25s var(--out); }
@media (hover: hover) { .rd-rail a:hover, .rd-toc a:hover { background: var(--paper); color: var(--ink); } }
.rd-rail a:active, .rd-toc a:active { transform: scale(.98); transition-duration: .1s; }
.rd-rail a[aria-current="true"], .rd-toc a[aria-current="true"] { color: var(--ink); }
.rd-rail a[aria-current="true"] .rd-n, .rd-toc a[aria-current="true"] .rd-n { background: var(--y); box-shadow: inset 0 0 0 2.5px var(--ink); }
.rd-rail .label { margin: 0 0 10px 10px; color: var(--mute); }
/* the rail scrolls inside itself, so its focus ring sits inside the link instead of being clipped */
.rd-rail a:focus-visible { outline-offset: -3px; box-shadow: none; }

.rd-toc { margin-bottom: 28px; border-top: 2.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
.rd-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 64px; touch-action: manipulation; }
.rd-toc summary::-webkit-details-marker { display: none; }
.rd-toc summary > i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--y); box-shadow: inset 0 0 0 2.5px var(--ink); transition: transform .3s var(--out); }
.rd-toc summary > i::before, .rd-toc summary > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2.5px; margin: -1.25px 0 0 -7.5px; background: var(--ink); border-radius: 2px; }
.rd-toc summary > i::after { transform: rotate(90deg); }
.rd-toc[open] summary > i { transform: rotate(45deg); }
.rd-toc summary:active > i { transform: scale(.94); }
.rd-toc[open] summary:active > i { transform: rotate(45deg) scale(.94); }
.rd-toc ol { padding-bottom: 14px; margin: 0 -10px; }
html.motion .rd-toc[open] ol { animation: fadein .25s linear; }

@media (min-width: 1100px) {
  .rd { grid-template-columns: clamp(232px, 19vw, 300px) minmax(0, 68ch); gap: 0 clamp(56px, 6.6vw, 120px); align-items: start; }
  .rd-rail { display: block; position: sticky; top: calc(var(--nav-h) + 28px); max-height: calc(100vh - var(--nav-h) - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px 6px 24px 2px; margin-left: -10px; }
  .rd-toc { display: none; }
}

/* ---------- the legal text: Mukta 17 on a 68ch measure ---------- */
.rd-body { min-width: 0; max-width: 68ch; font-size: 17px; line-height: 1.65; }
.rd-body > * + * { margin-top: 16px; }
.rd-body h2 { margin-top: clamp(52px, 5vw, 76px); font: 800 clamp(26px, 2.3vw, 34px)/1.1 var(--display); letter-spacing: -.015em; text-wrap: balance; scroll-margin-top: calc(var(--nav-h) + 28px); }
.rd-body > h2:first-child { margin-top: 0; }
.rd-body h2 + * { margin-top: 12px; }
.rd-hn { display: inline-block; margin-right: .28em; vertical-align: .14em; padding: .24em .46em .08em; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--y); font-size: .6em; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; }
.rd-body h3 { margin-top: 30px; font: 800 20px/1.25 var(--display); letter-spacing: -.005em; }
.rd-body h3 + * { margin-top: 8px; }
.rd-body strong { font-weight: 600; }
.rd-body .shout { font-weight: 600; letter-spacing: .01em; }
.rd-body ul { display: grid; gap: 10px; }
.rd-body ul > li { position: relative; padding-left: 26px; }
.rd-body ul > li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 2px var(--ink); }
.rd-body ol.lettered { display: grid; gap: 4px; }
.rd-body ol.lettered li { padding-left: 2.4em; text-indent: -2.4em; }
.rd-body ol.lettered .ltr { display: inline-block; width: 2.4em; text-indent: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-body a, .rd-sub a { text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 3px; text-underline-offset: 3px; text-decoration-skip-ink: none; border-radius: 3px; transition: background-color .25s var(--out), text-decoration-color .25s var(--out); }
@media (hover: hover) { .rd-body a:hover, .rd-sub a:hover { background: var(--y); text-decoration-color: var(--ink); } }
.rd-body [id] { scroll-margin-top: calc(var(--nav-h) + 28px); }

/* cards: the plain-English version on yellow, the short versions and notes on the map's cream */
.rd-card { padding: clamp(22px, 2.4vw, 34px); border-radius: var(--r-card); background: var(--paper); font-size: 16px; line-height: 1.55; }
.rd-card + h2 { margin-top: clamp(52px, 5vw, 76px); }
.rd-plain { background: var(--y); }
.rd-plain > strong { display: block; margin-bottom: 14px; font: 800 clamp(24px, 2.2vw, 32px)/1.05 var(--display); letter-spacing: -.015em; }
.rd-plain ul > li::before { background: #fff; }
.rd-summary .summary-kicker { margin-bottom: 12px; font-weight: 600; }
.rd-note a { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }

@media (max-width: 699px) {
  .rd-open { min-height: 300px; padding-top: calc(var(--nav-h) + 28px); }
  .rd-h1 { max-width: none; }
  .rd-body { font-size: 17px; line-height: 1.6; }
  .rd-card { border-radius: 22px; }
}

@media (prefers-contrast: more) {
  .rd-card { box-shadow: inset 0 0 0 2px var(--ink); }
  .rd-h1 { text-shadow: none; }
}

@media print {
  .nav, .sheet, .pillbar, .foot, .rd-rail, .rd-toc, .end-band, .skip, .map-bg { display: none !important; }
  .rd-open { min-height: 0; padding: 0 0 12px; background: none; }
  .rd { display: block; padding: 12px 0 0; }
  .rd-h1 { font-size: 40px; text-shadow: none; animation: none !important; }
  .rd-date { animation: none !important; }
}