/* Terms and Privacy pages: plain scrolling documents in the Moonpane look. */
html.legal-page, html.legal-page body { height: auto; min-height: 100%; overflow: auto; overscroll-behavior: auto; }
body.legal {
  background: var(--bg);
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.doc { max-width: 720px; margin: 0 auto; padding: calc(var(--safe-t) + 18px) 20px calc(var(--safe-b) + 56px); }
.doc .back { display: inline-flex; align-items: center; min-height: 44px; color: var(--a3); font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.doc h1 { margin: 8px 0 6px; font: 700 44px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.doc .updated { margin: 0 0 18px; color: var(--ink-faint); font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.doc .summary { margin: 0 0 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgb(var(--a3-rgb) / .4); background: rgb(var(--a3-rgb) / .07); color: var(--ink); line-height: 1.55; }
.doc h2 { margin: 30px 0 8px; color: var(--a3); font: 700 22px/1.15 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.doc p, .doc li { color: var(--ink-dim); font-size: 16px; line-height: 1.6; }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 12px; padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc b { color: var(--ink); font-weight: 600; }
.doc a { color: var(--a3); text-decoration: underline; text-underline-offset: 3px; }
.doc .foot { margin-top: 36px; padding-top: 16px; border-top: 1px solid rgb(170 200 255 / .15); font-size: 14px; }
[data-look] canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 10px; justify-content: center; margin-top: 18px; }
.samples > div { aspect-ratio: 200 / 433; overflow: hidden; border-radius: 12px; }
.doc .samples-note { margin: 8px 0 0; color: var(--ink-faint); font-size: 13.5px; text-align: center; }

/* Where Nightglass went */
.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(78vh, 720px); padding: calc(var(--safe-t) + 18px) 20px 34px; overflow: hidden; }
.hero-art { position: absolute; inset: 0; }
.hero-mark { position: absolute; top: calc(var(--safe-t) + 18px); left: 20px; display: inline-flex; align-items: center; min-height: 44px; color: var(--a3); font: 600 13px/1 var(--f-mono); letter-spacing: .22em; }
.hero-text { position: relative; width: min(100%, 860px); margin: 0 auto; }
.hero-text::before { content: ""; position: absolute; inset: -60px -40px -34px; z-index: -1; background: linear-gradient(transparent, rgb(var(--bg-rgb) / .86) 42%); }
.hero h1 { max-width: 13ch; font: 500 clamp(40px, 9vw, 72px)/1.04 var(--f-body); letter-spacing: -.025em; }
.hero p { margin: 14px 0 12px; color: var(--ink); font-size: 17px; }
.hero-text a { display: inline-flex; align-items: center; min-height: 44px; color: var(--a3); text-decoration: underline; text-underline-offset: 4px; }

.story { max-width: 860px; margin: 0 auto; padding: 44px 20px calc(var(--safe-b) + 48px); }
.story h2 { margin: 0 0 18px; font: 500 clamp(28px, 6vw, 40px)/1.12 var(--f-body); letter-spacing: -.02em; }
.story p, .story dd { margin: 0 0 16px; color: var(--ink-dim); font-size: 16.5px; line-height: 1.6; }
.story a { color: var(--a3); text-decoration: underline; text-underline-offset: 3px; }
.story .tag { margin: 22px 0 4px; color: var(--ink); font: 600 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.story section { margin-bottom: 64px; }
.story-why, .story-you { display: grid; gap: 28px; }
.story-name { max-width: 34em; }
.crop { margin: 0; }
.crop > div, div.crop { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; }
.crop figcaption { margin-top: 8px; color: var(--ink-faint); font-size: 13.5px; }
.rows { margin: 0 0 26px; }
.rows > div { padding: 14px 0; border-top: 1px solid rgb(170 200 255 / .15); }
.rows dt { color: var(--ink); font-weight: 600; }
.story .rows dd { margin: 2px 0 0; }
.story a.solid { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; background: var(--a3); color: #07080b; font-weight: 600; text-decoration: none; }
.story .foot { margin: 0; padding-top: 16px; border-top: 1px solid rgb(170 200 255 / .15); font-size: 14px; }
.story .foot a { display: inline-block; min-height: 24px; }
@media (min-width: 720px) {
  .hero { padding: 24px 40px 54px; }
  .hero-mark { left: 40px; }
  .story-why { grid-template-columns: 230px 1fr; gap: 48px; }
  .story-why .crop > div { aspect-ratio: 3 / 4; }
  .story-you { grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: stretch; }
  .story-you .crop { aspect-ratio: auto; min-height: 100%; }
  .story a.solid { display: inline-flex; padding: 0 34px; }
}
/* anything still in [[double brackets]] is a blank that must be filled in before publishing */
.todo { padding: 0 4px; border-radius: 4px; background: rgb(255 200 0 / .22); color: #ffd666; }