/* 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. */
/* The field keeps its label for VoiceOver; the placeholder and the button say what it is on screen. */
.join .hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.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; }
/* The links' tap areas reach --space-4 above them, so the gap above is that big and they never cover the field. */
.join .note { font: var(--type-label); color: var(--textMuted); margin: var(--space-4) 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, and the AI section's title is the size of Why it works, so a window holds at
   most 2 large titles and 3 text sizes beside the findings. */
.more .again h2, .more .ai h2 { font: var(--type-headline); }
.more .ai h2 { margin-bottom: var(--space-2); }
.ai > p { color: var(--textMuted); max-width: var(--layout-column); }
.ai ol { list-style: none; counter-reset: step; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-3); }
.ai li { counter-increment: step; display: flex; gap: var(--space-3); align-items: baseline; }
/* 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, .ai li::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 { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-5); }
.findings > li { display: grid; align-content: start; 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); }
/* Each finding shows its evidence first: the ratings, or one card's recall. */
.findings figure { margin: 0 0 var(--space-3); display: grid; align-content: start; gap: var(--space-3); }
.findings figcaption, .ratings dt, .ticks, .axis, .legend, .cite { font: var(--type-label); }
.findings figcaption { color: var(--text); }
/* The ratings: one row per rating, its name in a column of its own, then its methods as chips that wrap. */
.ratings dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
.ratings .tier { display: contents; }
.ratings dt { padding-block: var(--space-1); color: var(--textMuted); }
.ratings dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chip { font: var(--type-label); padding: var(--space-1) var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius-capsule); color: var(--textMuted); }
.chip.ours { color: var(--text); background: var(--surfaceRaised); border-color: var(--accent); }
.chip small { font: inherit; color: var(--accent); margin-left: var(--space-1); }
.chip small::before { content: "✓\00a0" / ""; }
/* The recall chart: 100% at the top, 60% at the foot, so the 90% mark is a quarter down; the side labels sit on rows
   in that ratio (1fr 3fr), as the SVG stretches to its box. */
.plot { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: calc(var(--space-12) * 3) auto; gap: var(--space-1) var(--space-2); }
.ticks { display: grid; grid-template-rows: 1fr 3fr; margin: 0; color: var(--textMuted); text-align: right; }
/* Each label is centered on its line: the top of its row. */
.ticks span { align-self: start; transform: translateY(-50%); }
.plot svg { width: 100%; height: 100%; overflow: visible; border-bottom: 1px solid var(--hairline); }
.plot path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.plot .mark { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 4 4; }
.plot .once { stroke: var(--textMuted); stroke-width: 1.5; stroke-dasharray: 2 4; }
.plot .ours { stroke: var(--accent); stroke-width: 2; }
.plot .dot { stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.axis { grid-column: 2; display: flex; justify-content: space-between; margin: 0; color: var(--textMuted); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--textMuted); }
.legend li::before { content: ""; display: inline-block; width: var(--space-4); vertical-align: middle; margin-right: var(--space-2); border-top: 2px solid var(--accent); }
.legend .key-once::before { border-top: 2px dotted var(--textMuted); }
/* 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 { list-style: none; margin: 0; display: grid; 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); }
.sources p { margin: var(--space-2) 0 0; }
/* 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); }
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); }
  /* The steps side by side, each as wide as a third of the page, so the three read as one line of work. */
  .ai ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .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; }
  /* The findings sit side by side only when each can be a column wide (`layout.column`); an iPad in portrait keeps one
     under the other, so the chips have room. Each spans four rows, its graphic, its claim, its line and its source, so
     side by side the claims start level; the subgrid keeps its own gap, and the list's gap spaces the findings. */
  .findings { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-column)), 1fr)); gap: var(--space-5) var(--space-8); }
  .findings > li { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-2); }
  /* The chart is wider here, so a lower one keeps its shape and leaves no gap under the ratings beside it. */
  .plot { grid-template-rows: calc(var(--space-12) * 2) auto; }
  /* 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; }
.doc footer { width: min(var(--layout-column), 100% - var(--page-gutter) * 2); max-width: none; padding-bottom: var(--space-12); }
.doc footer p { font: inherit; color: inherit; }
.nowrap { white-space: nowrap; }