/* Whendoo website */

:root {
  --ink: #1d1d1f;
  --ink-2: #3a3a3c;
  --muted: #6e6e73;
  --muted-2: #6c6c70;
  --nav: #424245;
  --link: #0066d6;
  --link-hover: #004fa8;
  --blue: #007aff;
  --surface: #ffffff;
  --surface-translucent: rgba(255, 255, 255, 0.85);
  --grey-bg: #f2f2f7;
  --line: #e5e5ea;
  --segment-track: #e3e3e8;
  /* The page's side margin: 20px on phones, growing to 48px on wide screens. */
  --gutter: clamp(20px, 4vw, 48px);
  --bezel: #1d1d1f;
  --grey-icon: #8e8e93;
  --ring-track: #d1d1d6;
  --health: #ff2d55;

  /* App status colours (light) */
  --done: #34c759;
  --soon-from: #69cc34;
  --soon-to: #94bf20;
  --ready-from: #e09b00;
  --ready-to: #ff9500;
  --attention: #ff3b30;
  --done-tint: #e8f6ec;
  --soon-tint: #eef8e6;
  --ready-tint: #fdf3dc;
  --attention-tint: #fde8e6;
  /* The app's text colour for each status, used on its tint in a pill. */
  --done-text: #1a7a33;
  --soon-text: #3d7a1e;
  --ready-text: #946500;
  --attention-text: #c02420;

  color-scheme: light;
}

* { box-sizing: border-box; }

/* The padding keeps a link's target clear of the header, which stays on screen. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* clip, where it is supported: hidden can make the body a scroll container,
     and the header would then stop staying at the top of the screen. */
  overflow-x: hidden;
  overflow-x: clip;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

img { max-width: 100%; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shown only when a keyboard user tabs to it. */
.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.skip:focus { top: 12px; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header and footer */

/* The header stays at the top of the screen. Its font sizes are in rem, and
   header.js measures whether the row fits, so a larger text size is handled
   like a narrower screen. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* Solid while the menu is open: the menu under it is solid too. */
.site-header.is-open { background: var(--surface); }

/* Without header.js the row wraps: the links, right-aligned, go onto a second
   row when they do not fit, and "Download" onto a third on the narrowest
   screens. With it the row never wraps and the links move into the menu. */
.site-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.has-script .site-header-row { flex-wrap: nowrap; }
.site-header-row > * { flex-shrink: 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.site-nav { display: flex; align-items: center; gap: 0 6px; margin-left: auto; font-size: 0.9375rem; }
.site-nav a { padding: 12px 10px; color: var(--nav); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* "Download": the link is 44px tall to tap, the pill inside it is shorter. */
.header-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 6px;
  border-radius: 22px;
  text-decoration: none;
}
.header-download span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 17px;
  background: var(--link);
  color: var(--surface);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
/* header.js hides "Download" while an App Store badge is on screen. It keeps
   its place, so nothing else in the row moves. */
.header-download { transition: opacity 0.15s ease, visibility 0.15s; }
.is-download-hidden .header-download { opacity: 0; visibility: hidden; }
.header-download:focus-visible, .menu-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The negative margin puts the icon's edge, not the button's, on the page's gutter. */
.menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -11px;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--nav);
  cursor: pointer;
}
.menu-button[hidden] { display: none; }
.menu-button .icon-close, .menu-button[aria-expanded="true"] .icon-menu { display: none; }
.menu-button[aria-expanded="true"] .icon-close { display: block; }

@media (hover: hover) {
  .header-download:hover span { background: var(--link-hover); }
  .menu-button:hover { color: var(--ink); }
}

/* The links do not fit: they are in the menu, which the menu button opens
   under the header. The button comes before the links in the page, so it is
   reached first by keyboard, and after "Download" on screen. */
.is-compact .site-nav { display: none; }
.is-compact .header-download { order: 1; margin-left: auto; }
.is-compact .menu-button { order: 2; }
.is-compact.is-open .site-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 20px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* 100% is the header's height: the menu is placed against the header. */
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  font-size: 1.0625rem;
}
.is-compact.is-open .site-nav a { display: flex; align-items: center; min-height: 44px; padding: 0; }

/* Still too wide: the word "Whendoo" is hidden and stays the link's name. */
.is-tight .brand { min-width: 44px; }
.is-tight .brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* No row gap: when the links wrap under the line of text, their own padding
     is the space between the two rows. */
  gap: 0 16px;
  padding-top: 16px;
  padding-bottom: 20px;
  font-size: 14px;
  color: var(--muted);
}
.site-footer { align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-footer a { display: inline-block; padding: 12px 0; color: var(--nav); }

/* Apple's "Download on the App Store" badge. The artwork is Apple's own and
   must not be redrawn or recoloured. */

.app-store { display: inline-block; border-radius: 10px; line-height: 0; }
.app-store img { display: block; width: 168px; height: 56px; }
.app-store:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Home: hero */

.hero {
  padding-top: clamp(16px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* One gap between every block of the hero. The badge and the line under it
     are a pair, so they alone sit closer (.hero-cta). */
  gap: 18px;
}
/* The h1's width is in em so it scales with its font. Its last phrase is one
   inline block, so the headline breaks before "on a flexible schedule." whatever
   the font's exact widths; on a phone the phrase wraps inside itself. At full
   size the lede is two lines, narrower than the headline. */
.hero h1 {
  margin: 0;
  max-width: 13.5em;
  text-wrap: pretty;
  font-size: clamp(40px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.hero-tail { display: inline-block; }
.hero .lede {
  margin: 0;
  max-width: 740px;
  /* Evens the two lines, so they break after "weeks." rather than leaving
     "Whendoo" at the end of the first. */
  text-wrap: balance;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.45;
  color: var(--muted);
}
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fine { margin: 0; font-size: 14px; color: var(--muted); }

/* Home: phones under the hero */

.phones {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  overflow: hidden;
}
.phone {
  flex-shrink: 0;
  width: 250px;
  padding: 9px;
  border-radius: 44px;
  background: var(--bezel);
  margin-bottom: 88px;
}
.phone img { display: block; width: 100%; height: auto; border-radius: 36px; }
.phone--main {
  width: 300px;
  padding: 10px;
  border-radius: 52px;
  /* The shadow reaches 60px below the phone; the margin leaves room for all of
     it, so .phones' overflow does not cut it off in a hard line. */
  margin-bottom: 64px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}
.phone--main img { border-radius: 42px; }

/* On narrow screens show only the main phone; the side phones would be cut off. */
@media (max-width: 899px) {
  .phones { margin-top: 44px; }
  .phone:not(.phone--main) { display: none; }
  .phone--main { width: min(280px, 72vw); }
}

/* Wide screens: the intro on the left, the three phones overlapping on the right,
   so the phones sit beside the text instead of below it. */
@media (min-width: 1000px) {
  .hero-row {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px var(--gutter) 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: center;
    gap: 48px;
  }
  .hero-row > .hero {
    max-width: none;
    margin: 0;
    padding: 0;
    align-items: flex-start;
    text-align: left;
  }
  /* Three fixed lines: "Keep track of / recurring tasks / on a flexible schedule."
     The last is the widest, about 9.6em, which fits the column from 1000px up. */
  .hero h1 { max-width: none; font-size: clamp(40px, 4.4vw, 54px); }
  /* nowrap: in a wider font the last line may run a few px into the 48px gap
     rather than drop "schedule." to a fourth line. */
  .hero-mid, .hero-tail { display: block; white-space: nowrap; }
  .hero .lede { max-width: 30em; text-wrap: pretty; }
  .hero-cta { align-items: flex-start; }
  .hero-row > .phones { margin-top: 0; gap: 0; align-items: center; overflow: visible; }
  .hero-row .phone { width: 180px; margin-bottom: 0; }
  /* In front of the side phones, which it overlaps by 70px each. */
  .hero-row .phone--main {
    position: relative;
    z-index: 1;
    width: 220px;
    margin: 0 -70px;
  }
}

/* Home: schedule section */

/* The schedule and features sections share one grey ground, 64px apart. The
   examples section after them is white, and the price section is grey again. */
.schedule { background: var(--grey-bg); padding: 40px 20px 64px; }
.schedule-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.section-title {
  margin: 0;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
}
/* The negative margin takes .schedule-inner's 18px gap down to 12px under the title. */
.schedule-sub { margin: -6px 0 0; font-size: 19px; line-height: 1.5; color: var(--muted-2); }

.example {
  width: 100%;
  max-width: 640px;
  margin-top: 22px;
  padding: 26px 24px 22px;
  background: var(--surface);
  border-radius: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.example-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.example-name { font-size: 19px; font-weight: 600; }
.example-range { font-size: 15px; color: var(--muted-2); }

/* The status bar. Spec: status-bar.md */

.status-bar-figure { margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.status-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; }
.status-bar span { display: block; }
.status-bar .done { flex: 0 1 53.7%; background: var(--done); }
.status-bar .soon { flex: 0 1 7.7%; background: linear-gradient(90deg, var(--soon-from), var(--soon-to)); }
.status-bar .ready { flex: 0 1 30.6%; margin: 0 2px; background: linear-gradient(90deg, var(--ready-from), var(--ready-to)); }
.status-bar .attention { flex: 0 1 8%; background: var(--attention); }
.status-bar-labels { position: relative; height: 18px; font-size: 13px; color: var(--muted-2); }
.status-bar-labels span { position: absolute; top: 0; }
.status-bar-labels .at-start { left: 0; }
/* Each label is centred on a gap. The gaps' 4px comes out of the pieces, so
   a gap's centre is a little left of the widths' sum. */
.status-bar-labels .at-8w { left: calc(61.4% - 1.5px); transform: translateX(-50%); }
.status-bar-labels .at-12w { left: calc(92% - 0.7px); transform: translateX(-50%); }

.statuses { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.statuses li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 600;
}
.statuses svg { flex-shrink: 0; }
.statuses .done { background: var(--done-tint); }
.statuses .soon { background: var(--soon-tint); }
.statuses .ready { background: var(--ready-tint); }
.statuses .attention { background: var(--attention-tint); }
/* The rings' colours. The SVGs carry shapes only. */
.statuses circle, .statuses path { fill: none; }
.statuses .done circle { fill: var(--done); }
.statuses .done path { stroke: var(--surface); }
.statuses .soon circle { stroke: var(--ring-track); }
.statuses .soon path { stroke: var(--soon-from); }
.statuses .ready circle { stroke: var(--ready-from); }
.statuses .attention circle { stroke: var(--attention); }

/* Home: feature cards you swipe through */

.features { background: var(--grey-bg); padding: 0 0 64px; }
.feature-row {
  position: relative;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Lines the first card up with .wrap's content edge. */
  padding: 0 max(var(--gutter), calc((100% - 1120px) / 2 + var(--gutter))) 16px;
  scroll-padding-inline: max(var(--gutter), calc((100% - 1120px) / 2 + var(--gutter)));
  -webkit-overflow-scrolling: touch;
}
.feature-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.feature {
  flex: 0 0 290px;
  scroll-snap-align: start;
  background: var(--surface);
  border-radius: 32px;
  padding: 28px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
}
.feature h3 {
  margin: 0;
  min-height: 56px;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.feature-shot {
  aspect-ratio: 242 / 380;
  overflow: hidden;
  border: 8px solid var(--bezel);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
}
.feature-shot img { display: block; width: 100%; height: auto; }
/* Shows the screenshot's lower part: its bottom edge sits on the frame's, and
   the top is cut off, whatever the card's width. */
.feature-shot--bottom { display: flex; align-items: flex-end; }

.feature-shot { margin-top: auto; }

/* Arrows for the sideways row. Shown by the script; hidden on wide screens. */
/* They sit over the row, one at each edge, level with the middle of the
   screenshots. The cards' middle is the section's height less its 64px bottom
   padding and the row's 16px, halved; the screenshot's middle is 53px under
   that, half of the 106px of padding, title and gap above it. Only the
   buttons take taps, so the row between them still swipes. */
.features { position: relative; }
.feature-nav {
  position: absolute;
  top: calc((100% - 80px) / 2 + 53px);
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
}
.feature-nav[hidden] { display: none; }
.feature-arrow {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: var(--surface-translucent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Only with a real pointer: on a phone the hover style stays on the button
   last tapped, which makes it look unavailable. */
@media (hover: hover) {
  .feature-arrow:hover { background: var(--surface); }
}
/* aria-disabled, not disabled: a disabled button drops keyboard focus. */
/* At the row's end the arrow that leads nowhere is not shown. features.js
   moves the keyboard's focus to the other arrow first. */
.feature-arrow[aria-disabled="true"] { visibility: hidden; }
.feature-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Wide screens: the four cards in one row, no sideways scrolling.
   The widget card is hidden because the widget is already under the hero. */
@media (min-width: 900px) {
  .feature-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    overflow: visible;
    scroll-snap-type: none;
  }
  .feature { flex: none; padding: 26px 20px 0; }
  .feature h3 { font-size: 22px; }
  .feature.mobile-only { display: none; }
  .feature-nav { display: none !important; }
}

/* Home: examples. Plain HTML in index.html; use-cases.js runs the split buttons. */

.uc { background: var(--surface); padding: 64px var(--gutter); }
/* The same content width as .wrap, so the cards line up with the header. */
.uc-inner {
  max-width: calc(1120px - 2 * var(--gutter));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.uc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 12px;
}
.uc-more-heading { margin: 28px 0 0; font-size: 24px; letter-spacing: -0.02em; }

/* Two columns when there's room, one on phones. Cards in a row are the same height. */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 20px;
}
.uc-card {
  background: var(--grey-bg);
  border-radius: 28px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.uc-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.uc-emoji { flex-shrink: 0; font-size: 26px; line-height: 1; }

/* The white list. flex: 1 lets it fill the card when its neighbour is taller. */
.uc-list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
}
.uc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.uc-row:first-child { border-top: 0; }
/* 1px less above the text than below: the text is centred on its capitals,
   and the lower-case letters beside them leave more air on top. */
.uc-row .pill { flex-shrink: 0; margin-right: 0; padding-top: 2px; padding-bottom: 4px; }
.uc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uc-name { font-size: 16px; font-weight: 500; }
.uc-every { font-size: 13px; color: var(--muted-2); }
.uc-ring { flex-shrink: 0; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.uc-ring circle { stroke: var(--ring-track); }
.uc-ring path { stroke: var(--soon-from); }
.uc-ring--ready circle { stroke: var(--ready-from); }
.uc-ring--done path { stroke: var(--done); }

/* Workout splits: full width, text on the left and the example list on the
   right; the two halves stack on phones. */
.uc-workouts { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 20px 40px; }
.uc-workouts-text { flex: 1 1 340px; display: flex; flex-direction: column; gap: 14px; }
.uc-workouts-text > p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.uc-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.4;
}
.uc-notes li { display: flex; gap: 10px; align-items: flex-start; }
.uc-note-icon { flex-shrink: 0; margin-top: 1px; }
.uc-note-icon--pause { fill: var(--link); }
.uc-note-icon--health { fill: var(--health); }
.uc-workouts-examples { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.uc-splits-label { font-size: 14px; color: var(--muted-2); }
/* A segmented control, like the app's: segments in a grey track, the chosen one
   raised in white. Each segment is as wide as its label plus an even share of the
   spare room, and every state has the same weight, so choosing one moves no text.
   The HTML puts a no-break space before each "/", so on the narrowest phones a
   label that must wrap breaks after a slash. */
.uc-splits {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--segment-track);
}
.uc-splits[hidden] { display: none; }
.uc-split {
  min-height: 38px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
  cursor: pointer;
  position: relative;
}
/* Takes the tap area out over the track's 3px padding, to the 44px minimum. Sideways
   it reaches 1px, so neighbours meet in the middle of the 2px gap. */
.uc-split::after { content: ""; position: absolute; inset: -3px -1px; }
.uc-split[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
/* z-index keeps the ring above the next segment, which is painted after it. */
.uc-split:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; z-index: 1; }
.uc-workouts-examples .uc-list { margin-top: 4px; }

/* Phones: less padding around and inside the list and a slightly smaller name,
   so the longest name ("Replace water pitcher filter") stays on one line from
   375px up. */
@media (max-width: 599px) {
  .uc-card { padding: 12px; border-radius: 24px; }
  .uc-card > .uc-card-title, .uc-workouts-text { padding: 6px 6px 0; }
  .uc-row { gap: 10px; padding: 12px; }
  .uc-name { font-size: 15px; }
  /* Keeps the three split labels on one line each from 375px up. */
  .uc-split { padding: 6px; font-size: 13px; }
}

/* Home: price */

.price { background: var(--grey-bg); padding: 64px 20px 80px; }
.price-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.price p { margin: 0; max-width: 600px; font-size: clamp(19px, 2.4vw, 22px); line-height: 1.5; }

/* Inner pages: privacy, help */

.page { background: var(--grey-bg); min-height: 100vh; }
.page-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.page-title {
  margin: 0;
  font-size: clamp(36px, 6vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.page-meta { margin: 8px 0 0; font-size: 15px; color: var(--muted); }

.card { background: var(--surface); border-radius: 18px; }

.summary { overflow: hidden; }
.summary li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  font-size: 17px;
  border-bottom: 1px solid var(--line);
}
.summary li:last-child { border-bottom: 0; }
.summary ul { margin: 0; padding: 0; list-style: none; }
.summary-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--surface);
}
.summary-icon--green { background: var(--done); }
.summary-icon--blue { background: var(--blue); }
.summary-icon--grey { background: var(--grey-icon); }
.summary-icon--amber { background: var(--ready-from); }

.policy { display: flex; flex-direction: column; gap: 22px; font-size: 17px; line-height: 1.55; }
.policy section { padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; }
.policy h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.policy p { margin: 0; color: var(--ink-2); }

.contact {
  padding: 26px 24px;
  border-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.contact-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.contact h2 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }
.contact p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--muted); }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  /* The link blue, not the accent: white on the accent is 4.0:1, too little
     for text this size. */
  background: var(--link);
  color: var(--surface);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}
.button:hover { color: var(--surface); background: var(--link-hover); }
button.button { border: 0; font-family: inherit; cursor: pointer; }

/* The invite page: the App Store badge, the line under it and Copy link. */
.invite {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.invite p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); }

.faq-group { display: flex; flex-direction: column; gap: 8px; }
.faq-group h2 {
  margin: 0 0 0 20px;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.faq { overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  min-height: 52px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 17px;
  /* Semibold, so an open item's title stands apart from its answer. */
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 12px; }
.faq summary svg { flex-shrink: 0; color: var(--grey-icon); transition: transform 0.15s ease; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 20px 18px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* A status name drawn as the app's pill: the status's tint, its text colour,
   13px semibold, a 6px corner. */
.pill {
  display: inline-block;
  margin-right: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: 1px;
}
.pill--done { background: var(--done-tint); color: var(--done-text); }
.pill--soon { background: var(--soon-tint); color: var(--soon-text); }
.pill--ready { background: var(--ready-tint); color: var(--ready-text); }
.pill--attention { background: var(--attention-tint); color: var(--attention-text); }

/* A help item with a screenshot: beside the text, or under it on a phone. */
.faq-body { display: flex; align-items: flex-start; padding: 0 20px 22px 0; }
.faq-text { flex: 1; min-width: 0; }
.faq-shot {
  flex: 0 0 200px;
  border: 6px solid var(--bezel);
  border-radius: 28px;
  overflow: hidden;
}
.faq-shot img { display: block; width: 100%; height: auto; }

@media (max-width: 599px) {
  .faq-body { flex-direction: column; align-items: center; padding-right: 0; }
  .faq-text { align-self: stretch; }
  .faq-shot { flex: none; width: min(240px, 70%); }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary svg { transition: none; }
  .header-download { transition: none; }
}