/* Hallmark · macrostructure: Photographic · tone: night, quiet · anchor: Nightfall accent
   The page's styles, from design/tokens.css only (web/DESIGN.md, The page and Components). */
@import url("art.css");

html, body { margin: 0; overflow-x: clip; }
body { font: var(--type-body); color: var(--text); background: var(--bgEnd); -webkit-text-size-adjust: 100%; }
a { color: inherit; text-underline-offset: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* A heading that takes focus only so a screen reader reads it is not a control, so it draws no ring. */
[tabindex="-1"]:focus-visible { outline: none; }
.mark { font: var(--type-headline); font-family: var(--font-serif); margin: 0; }
h1, h2 { overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }

/* The first screen. Compact: one column, and the picture takes the height the words and the form leave, so the
   whole first screen is in view at 360 x 640. The picture is drawn at the column's width, or smaller when its box is
   short, so that --fit u of its screen stay in view: the Lock Screen's clock and widgets. The screen is 560 u tall at
   most and is cropped to its box. */
.hero { --sky-fade: linear-gradient(transparent 70%, var(--bgEnd)); min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-3) var(--page-gutter) var(--space-5); }
/* In a window at least 700 px tall the first screen leaves room for the next section's title, so a visitor sees the
   page goes on. A shorter window is a small phone, and its first screen is the picture and the form. */
@media (min-height: 700px) { .hero { min-height: calc(100svh - 72px); } }
/* The stage: the words and the form, then the picture, which a compact window draws first. After a sign-up the
   thank-you card takes the whole stage, centered, so nothing else on the first screen competes with it and nothing
   below it moves. */
.stage, .stage > .layer { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.stage .card-block { margin: auto; width: 100%; max-width: var(--layout-column); box-sizing: border-box; }
.art { flex: 1 1 0; min-height: 100px; container-type: size; display: grid; place-items: center; }
.stage .art { order: -1; }
.art .pic { container-type: normal; width: auto; }
.art .pic > .frame { --fit: 230; --u: min(100cqw / 390, 100cqh / var(--fit)); width: calc(var(--u) * 390); box-sizing: border-box;
  aspect-ratio: auto; height: min(calc(var(--u) * 560), 100cqh); }
/* In a short window (iOS Safari on an iPhone SE leaves 549 px) the box cannot hold the whole 230 u at a size where the
   widgets' text fits in them, so the picture shows the widgets alone, 138 u tall, with the same 15 u of sky on every side. */
@container (max-height: 170px) {
  .art .pic > .frame { --fit: 138; height: calc(var(--u) * 138); }
  .art .lock { padding: calc(var(--u) * 15) 0; }
  .art .lock .date, .art .lock .clock { display: none; }
  .art .lock .widgets { margin-top: 0; }
}
.words { text-align: center; }
.words h1 { font: var(--type-wordSmall); margin: 0; }
.words p { font: var(--type-body); color: var(--textMuted); margin: var(--space-2) auto 0; max-width: 34ch; text-wrap: balance; }
.side { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: var(--layout-column); margin-inline: auto; }
.swapping { display: grid; }
.swapping > .layer { grid-area: 1 / 1; min-width: 0; }
.layer { display: flex; flex-direction: column; gap: var(--space-5); }

/* The form: one field and one filled button, the page's only accent-filled control. */
.join label { display: block; font: var(--type-label); color: var(--textMuted); margin-bottom: var(--space-2); }
.join .row { display: grid; gap: var(--space-2); }
.join input { height: 56px; box-sizing: border-box; width: 100%; min-width: 0; border-radius: var(--radius-tile); border: 1px solid var(--textMuted);
  padding: 0 var(--space-5); background: var(--surface); color: var(--text); font: var(--type-body); }
.join input::placeholder { color: var(--textMuted); }
.join input[aria-invalid="true"] { border-color: var(--danger); }
.join button, .confirm button { display: grid; place-items: center; height: 56px; border-radius: var(--radius-capsule); border: 0; padding: 0 var(--space-6);
  background: var(--accent); color: var(--onAccent); box-shadow: inset 0 0 0 0.5px var(--glass-edgeTint);
  font: var(--type-headline); white-space: nowrap; cursor: pointer; transition: transform var(--dur-press) var(--ease-press); }
.join button:active, .confirm button:active { transform: scale(0.97); }
.join button[aria-busy="true"] { cursor: progress; }
.join button span { grid-area: 1 / 1; }
.confirm button { width: 100%; }
.join .error { font: var(--type-label); color: var(--danger); margin: 0; }
.join .error:empty { display: none; }
.join .note { font: var(--type-label); color: var(--textMuted); margin: var(--space-3) 0 0; }
/* Inline links: padding on an inline box widens the tap area to 48 px without changing the line height. */
.join .note a, footer a { color: var(--text); padding: var(--space-4) var(--space-1); margin-inline: calc(var(--space-1) * -1); }

/* After joining, and after confirming: an opaque card, the inbox line, then two optional questions. A checked box takes
   an accent edge and an accent check, not an accent fill, so the page keeps one filled control. */
.card-block { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-6); }
.card-block h1, .card-block h2 { font: var(--type-wordSmall); margin: 0; text-wrap: pretty; }
.card-block > p { font: var(--type-body); color: var(--textMuted); margin: var(--space-2) 0 var(--space-4); overflow-wrap: anywhere; text-wrap: pretty; }
.card-block strong { color: var(--text); font-weight: 600; }
.check { display: flex; gap: var(--space-3); align-items: center; min-height: 44px; padding-top: var(--space-4); border-top: 1px solid var(--hairline); cursor: pointer; }
/* The checkbox: a textMuted edge on surface, then an accent edge and an accent check. */
.check input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; flex: none;
  border-radius: var(--radius-block); border: 1.5px solid var(--textMuted); background: var(--surface); cursor: pointer; }
.check input::after { content: "✓"; font: var(--type-headline); color: var(--accent); opacity: 0; }
.check input:checked { border-color: var(--accent); }
.check input:checked::after { opacity: 1; }
/* The tool question is one native list, drawn like the email field. */
.pick { position: relative; display: block; margin-top: var(--space-4); }
.pick span { display: block; font: var(--type-label); color: var(--textMuted); margin-bottom: var(--space-2); }
.pick select { appearance: none; -webkit-appearance: none; width: 100%; height: 48px; box-sizing: border-box; border-radius: var(--radius-tile);
  border: 1px solid var(--textMuted); padding: 0 var(--space-12) 0 var(--space-5); background: var(--surface); color: var(--text); font: var(--type-body); cursor: pointer; }
/* The chevron is drawn, not read: its alt text is empty, so the list's name is the question alone. */
.pick::after { content: "⌄"; content: "⌄" / ""; position: absolute; right: var(--space-5); bottom: var(--space-4); font: var(--type-headline); color: var(--textMuted); pointer-events: none; }
.card-block > .saved { font: var(--type-label); color: var(--positive); margin: var(--space-3) 0 0; }
.card-block > .saved.no { color: var(--danger); }
.card-block > .saved:empty { display: none; }
.joined { font: var(--type-body); color: var(--textMuted); margin: 0; overflow-wrap: anywhere; }
.joined strong { color: var(--text); font-weight: 600; }
.link { border: 0; background: none; padding: 0; min-height: 44px; color: var(--text); font: var(--type-label); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; margin: calc(var(--space-3) * -1) 0 var(--space-2); }

/* The rest of the page: one reading column at compact width. */
.more { padding: var(--space-6) var(--page-gutter) var(--space-8); }
.more > section { max-width: var(--layout-column); margin: 0 auto var(--space-12); }
.more h2 { font: var(--type-wordSmall); margin: 0 0 var(--space-5); }
/* A reset with no weight, so a card that a sign-up puts here keeps its own spacing. */
:where(.more) p { margin: 0; }
/* The lower box spaces its title and form with the gap a swap's layer uses, so "Change it" puts them back as drawn. */
.again > div { display: flex; flex-direction: column; gap: var(--space-5); }
.again h2 { margin: 0; }
/* The form's title reads as its label, not as a fourth section title, so a window holds at most 2 large titles. */
.more .again h2 { font: var(--type-headline); }
/* How it works: one screen of the app per step, in a row that scrolls sideways when the window is narrower than the
   five. The row runs into the gutters to the window's edges, so a screen that does not fit shows at the edge. */
.flow { --bleed: var(--page-gutter); list-style: none; counter-reset: step; margin: 0 calc(var(--bleed) * -1); padding: var(--space-2) var(--bleed) var(--space-4);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--space-2) var(--space-6);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bleed); overscroll-behavior-x: contain; }
.flow li { counter-increment: step; scroll-snap-align: start; display: grid; align-content: start; gap: var(--space-2); }
.flow img { display: block; width: 100%; height: auto; margin-bottom: var(--space-3); border-radius: var(--radius-group); background: var(--surface);
  box-shadow: var(--shadow1), 0 0 0 1px var(--hairline); }
.flow h3 { font: var(--type-headline); margin: 0; display: flex; gap: var(--space-2); align-items: baseline; }
/* The number is drawn, not read: the list already numbers its steps for a screen reader. */
.flow h3::before { content: counter(step); content: counter(step) / ""; flex: none; display: inline-grid; place-items: center; width: var(--space-6); height: var(--space-6);
  border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); font: var(--type-label); }
.flow p, .why > p, .findings p { color: var(--textMuted); }
.findings, .sources ol { list-style: none; padding: 0; margin: 0; display: grid; }
.findings { gap: var(--space-5); margin-top: var(--space-5); }
.findings li { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-group); }
.why { margin-top: var(--space-12); }
.why h3, .findings h4 { font: var(--type-headline); margin: 0; }
.why h3 { margin-bottom: var(--space-2); }
.cite { font: var(--type-label); }
/* A summary at least 48 px tall, the size of the links around it. The list sits in from it, so it reads as its own. */
.sources { margin-top: var(--space-5); font: var(--type-label); color: var(--textMuted); }
.sources ol { padding-left: var(--space-4); }
.sources summary { padding-block: var(--space-4); width: fit-content; cursor: pointer; color: var(--text); }
/* Each source is its own row, at least 48 px tall: inline links on lines 18 px apart would share their tap areas. */
.sources li a { display: inline-block; color: var(--text); padding: var(--space-4) var(--space-1); margin-inline: calc(var(--space-1) * -1); }
/* A press answers on every link and on the Sources toggle, as the buttons' scale does (UX checklist rule 16). */
.join .note a:active, footer a:active, .sources a:active, .sources summary:active, .link:active { color: var(--textMuted); }
.sources p { margin: var(--space-2) 0 0; }
footer { max-width: var(--layout-column); margin: 0 auto; padding: var(--space-6) 0 0; border-top: 1px solid var(--hairline); font: var(--type-label); color: var(--textMuted); }
footer p { margin: 0 0 var(--space-2); }

@media (min-width: 744px) {
  /* The first screen is as tall as its content, so the steps start in the first window. The words and the form sit
     under the wordmark, and the picture beside them is --pic-h tall: 64% of the window's height, from 420 to 600 px, or
     less when its column is narrower. */
  .hero { --col: calc((min(100vw - 2 * var(--page-gutter-wide), var(--page-max)) - var(--space-12)) / 2);
    --pic-h: min(clamp(420px, 64svh, 600px), var(--col) * 540 / 390);
    min-height: 0; display: grid; grid-template-rows: auto auto; row-gap: var(--space-6);
    padding: var(--space-8) max(var(--page-gutter-wide), (100% - var(--page-max)) / 2) var(--space-12); }
  .stage, .stage > .layer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-12); align-items: start; }
  /* The words start space.12 below the picture's top, not centered beside it, so a line that appears under the form
     moves only what is under it. */
  .stage .side { padding-top: var(--space-12); margin-inline: 0; }
  .hero .art { order: 0; container-type: normal; min-height: 0; display: flex; justify-content: center; }
  .hero .art .pic > .frame { --u: calc(var(--pic-h) / 540); width: calc(var(--u) * 390); height: var(--pic-h); }
  /* After a sign-up the stage keeps the picture's height, so the thank-you card is centered where the two were and
     nothing below it moves. A swap's layer fills the stage, so what it brings back sits where it was drawn. */
  .hero .stage { min-height: var(--pic-h); }
  .stage > .layer { align-self: stretch; grid-area: 1 / 1 / 2 / -1; }
  .stage .card-block { align-self: center; grid-column: 1 / -1; }
  .words { text-align: left; }
  /* A card's title takes the headline's size at each width, so a window never holds a fourth text size (UX rule 5). */
  .words h1, .card-block h1, .card-block h2 { font: var(--type-title); }
  .words p { max-width: none; margin-left: 0; text-wrap: pretty; }
  /* The button sits beside the field once the form has room for an address beside it (`layout.preview`); on an iPad
     in portrait, the column is narrower, and the button goes under the field, as on a phone. */
  .join { container-type: inline-size; }
  @container (min-width: 400px) {
    .join .row { grid-template-columns: minmax(0, 1fr) auto; }
    .join .error { grid-column: 1 / -1; grid-row: 2; }
  }
  .more { padding: var(--space-12) var(--page-gutter-wide) var(--space-8); }
  .more h2 { font: var(--type-title); }
  .more > section, footer { max-width: var(--page-max); }
  .more > section { margin-bottom: var(--page-section-wide); }
  .flow { --bleed: var(--page-gutter-wide); }
  /* Side by side, each step spans three rows of the list, its screen, its title and its line, so the titles and the
     lines start level. */
  .flow li { grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
  .findings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  /* The second form, its title and what a sign-up swaps in share one centered box, the card's, so the card takes the
     form's own place. */
  .again > div { width: 100%; max-width: var(--layout-column); margin-inline: auto; }
}

/* The share image, 1200 x 630: the picture and the headline. */
.share-page { width: 1200px; height: 630px; overflow: hidden; }
.share { height: 100%; box-sizing: border-box; display: grid; grid-template-columns: 560px minmax(0, 1fr); grid-template-rows: auto 1fr;
  gap: var(--space-6) var(--space-12); padding: var(--space-8) var(--space-12); }
.share .mark { grid-column: 1 / -1; font: var(--type-title); font-family: var(--font-serif); }
.share .hint { visibility: hidden; }
.share .art { height: 100%; }
/* A preview is about a third of this size, so the picture is cropped to its clock and widgets and drawn large. */
.share .art .pic > .frame { --fit: 230; height: calc(var(--u) * 260); }
.share h1 { font: var(--type-word); align-self: center; margin: 0; }

/* Document pages: Privacy and Terms. One column at a reading width. */
.doc { background: var(--bg); }
.doc main { max-width: var(--layout-column); margin: 0 auto; padding: var(--space-6) var(--page-gutter) var(--space-12); }
.doc .back { display: inline-flex; align-items: center; min-height: 44px; font: var(--type-headline); font-family: var(--font-serif); text-decoration: none; }
.doc h1 { font: var(--type-title); margin: var(--space-6) 0 var(--space-2); }
.doc .updated { font: var(--type-label); color: var(--textMuted); margin: 0 0 var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--hairline); }
.doc h2 { font: var(--type-headline); margin: var(--space-8) 0 var(--space-2); }
.doc p, .doc li { font: var(--type-body); color: var(--text); margin: 0 0 var(--space-3); }
.doc ul { padding-left: var(--space-5); margin: 0; }
.nowrap { white-space: nowrap; }