/* Colors are the app's Palette (Kinboard/Design/Theme.swift). */
@font-face {
  font-family: "Fredoka";
  src: url("/fonts/Fredoka-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Patrick Hand";
  src: url("/fonts/PatrickHand-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --board: #d6b687;
  --paper: #f6efdc;
  --card: #fcf8ec;
  --ink: #4a3726;
  --muted: #584536;
  --brick: #a63a26;
  --link: #742314;
  --line: #7a6046;
  --shadow: #5a4022;
  --sticky: #f5dc82;
  --tape: #f3e6c4;
  /* The app icon's other three pin colors (Marker.color in Theme.swift); brick is --brick. */
  --teal: #23667f;
  --mustard: #9a6f0a;
  --pine: #2f6b3f;
  /* The cork's flecks and glow, fainter than the App Store screenshots' so text on the board keeps its contrast. */
  --fleck: rgba(122, 86, 44, 0.05);
  --fleck-small: rgba(122, 86, 44, 0.035);
  --fleck-light: rgba(255, 244, 220, 0.06);
  --glow: rgba(255, 240, 210, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --board: #3a2c1e;
    --paper: #1e1913;
    --card: #2a231b;
    --ink: #f2e8d5;
    --muted: #b5a68e;
    --brick: #ee8670;
    --link: #ee8670;
    --line: #987852;
    --shadow: #0e0b08;
    --sticky: #e8c96a;
    --tape: #7a5d3b;
    --teal: #6db6d6;
    --mustard: #e5bc4c;
    --pine: #82c493;
    --fleck: rgba(14, 11, 8, 0.11);
    --fleck-small: rgba(14, 11, 8, 0.08);
    --fleck-light: rgba(242, 232, 213, 0.02);
    --glow: rgba(255, 230, 190, 0.04);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* The cork board from the App Store screenshots: three fleck grids of different sizes,
     offset so they never line up, under a soft glow toward the top. */
  background-color: var(--board);
  background-image:
    radial-gradient(var(--fleck) 1.6px, transparent 2.2px),
    radial-gradient(var(--fleck-small) 1.2px, transparent 1.8px),
    radial-gradient(var(--fleck-light) 1.4px, transparent 2px),
    radial-gradient(ellipse at 50% 30%, var(--glow), transparent 70%);
  background-size: 23px 19px, 31px 37px, 17px 29px, 100% 100%;
  background-position: 0 0, 11px 7px, 5px 13px, 0 0;
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header, main, footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 20px;
}
/* The header spans the board as wide as the home page does, on every page. */
header { max-width: 1160px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 24px "Fredoka", sans-serif;
  color: var(--ink);
  text-decoration: none;
}

.brand img { width: 36px; height: 36px; border-radius: 9px; }
/* The home page's hero already shows the logo and name, so its header holds only the nav. */
.home header { justify-content: flex-end; }

nav { display: flex; align-items: center; gap: 28px; }
nav a, nav .dropdown > button { color: var(--ink); font-weight: 600; text-decoration: none; }
nav a:hover, nav a[aria-current="page"], nav .dropdown > button:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Resources reads like the other links, with a caret, and opens a list of pages under it (nav.js). */
nav .dropdown { position: relative; }
nav .dropdown > button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
nav .dropdown > button::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
nav .dropdown > button[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
nav .menu { display: none; }
nav .dropdown > button[aria-expanded="true"] + .menu { display: block; }
.menu-toggle { display: none; }

/* Wide screens: the links sit in a row, and Resources drops down an index card. */
@media (min-width: 720px) {
  nav .menu {
    position: absolute;
    z-index: 10;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    padding: 6px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--shadow) 12%, transparent), 0 6px 14px color-mix(in srgb, var(--shadow) 28%, transparent);
  }
  nav .menu a { display: block; padding: 8px 12px; border-radius: 6px; }
  nav .menu a:hover { background: color-mix(in srgb, var(--line) 14%, transparent); text-decoration: none; }
}

/* Narrow screens: a menu button opens the links as a card under the header, with Resources' pages indented. */
@media (max-width: 719px) {
  .menu-toggle {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 2px 0 var(--shadow);
    cursor: pointer;
  }
  .menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0;
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--shadow);
  }
  .menu-toggle[aria-expanded="true"] + nav { display: flex; }
  nav a, nav .dropdown > button { display: flex; width: 100%; padding: 11px 20px; }
  nav .dropdown > button { justify-content: space-between; }
  nav .menu a { padding-left: 36px; }
}

main {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--shadow);
  padding: 28px 32px 32px;
}

@media (max-width: 600px) {
  main { margin: 0 12px; padding: 22px 20px 26px; }
}

h1, h2, h3 { font-family: "Fredoka", sans-serif; font-weight: 700; line-height: 1.25; }
h1 { font-size: 32px; margin: 0 0 4px; }
h2 { font-size: 22px; margin: 32px 0 8px; }
h3 { font-size: 18px; margin: 22px 0 4px; }

p, ul { margin: 0 0 14px; }
li { margin-bottom: 6px; }
a { color: var(--link); }
.updated { color: var(--muted); margin-bottom: 22px; }

/* Home page: the hero, the note, and the features all sit on the board.
   Phones stack them; wide screens pin the note beside the page. */
.home header, .home footer, .layout { max-width: 1160px; }
.layout { margin: 0 auto; padding: 0 20px; display: grid; gap: 28px; }
/* Like the app's sections: a tape label stuck on the board, then an index card. */
.layout main { max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }

/* The app's TapeLabel (Kinboard/Design/Paper.swift): masking tape with torn ends, tilted a little. */
.layout main h2, .fit h2, .faq h2 {
  width: fit-content;
  margin: 30px 0 16px 4px;
  font-size: 15px;
  line-height: 34px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-wrap: balance;
  transform: rotate(-2deg);
  /* Shadows the tape's outline, torn ends included; the text sits on the tape, so it casts none. */
  filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--shadow) 25%, transparent));
}
.layout main h2:first-child { margin-top: 4px; }
.layout main h2:nth-of-type(2) { transform: rotate(1.5deg); }
.layout main h2:nth-of-type(3) { transform: rotate(-1deg); }
/* A heading too long for one line gets a strip of tape per line. */
.layout main h2 span, .fit h2 span, .faq h2 span {
  padding: 5px 14px;
  background: var(--tape);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* Zig-zag torn ends, three notches a side like the app's TornTape. */
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0L3 1L0 2L0 4L3 5L0 6L0 8L3 9L0 10H3V0Z'/%3E%3C/svg%3E") left / 3px 100% no-repeat,
    linear-gradient(#000 0 0) center / calc(100% - 6px) 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 10' preserveAspectRatio='none'%3E%3Cpath d='M3 0L0 1L3 2L3 4L0 5L3 6L3 8L0 9L3 10H0V0Z'/%3E%3C/svg%3E") right / 3px 100% no-repeat;
}

/* The app's indexCard: a card with a brown rule, lifted off the board. */
.layout main p, .faq .card {
  position: relative;
  margin: 0;
  padding: 16px 20px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--shadow) 12%, transparent), 0 3px 8px color-mix(in srgb, var(--shadow) 28%, transparent);
}

/* Each feature card is pinned to the board, in the pin colors the phone and the notes beside it don't use. */
.layout main p:nth-of-type(1)::before { background: var(--pine); }
.layout main p:nth-of-type(2)::before { background: var(--mustard); }
.layout main p:nth-of-type(3)::before { background: var(--teal); }
/* Each card plays its part of the tour in the phone; the part on screen is outlined in red marker. */
.layout main p[data-at] { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.layout main p.current {
  border-color: var(--brick);
  box-shadow: 0 0 0 1.5px var(--brick), 0 3px 8px color-mix(in srgb, var(--shadow) 28%, transparent);
}
.layout main .chapter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brick);
  font: 700 13px/1 "Fredoka", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.layout main .chapter::before { content: ""; width: 8px; height: 9px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

.hero { text-align: center; padding: 8px 0 0; }
.hero > img { width: 112px; height: 112px; border: 2px solid var(--line); border-radius: 26px; box-shadow: 0 4px 0 var(--shadow); }
.hero h1 { font-size: 40px; margin-top: 18px; }
.hero p { font-size: 19px; color: var(--muted); max-width: 520px; margin: 8px auto 0; }

/* Apple's badge, unmodified: at least 40px tall with a quarter of its height clear around it. */
.app-store { display: inline-block; margin-top: 22px; }
.app-store img { display: block; height: 52px; }

/* A real week from the app, in a phone's dark bezel, pinned up on the board. */
.screenshot {
  position: relative;
  justify-self: center;
  width: min(260px, 72vw);
  margin: 12px 0 0;
  transform: rotate(1.2deg);
}
.screenshot video {
  display: block;
  width: 100%;
  height: auto;
  border: 7px solid #1d1a17;
  border-radius: 38px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
/* Play and pause, a round button on the phone's bottom edge where it covers none of the app. */
.screenshot .toggle {
  position: absolute;
  left: calc(50% - 17px);
  bottom: -15px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.screenshot .toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 12px;
  background: var(--brick);
  clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}
.screenshot .toggle.playing::before { width: 10px; clip-path: none; background: linear-gradient(90deg, var(--brick) 0 35%, transparent 35% 65%, var(--brick) 65%); }

/* A sticky note pushpinned to the board, like the app's: dark ink in both light and dark mode. */
.letter {
  position: relative;
  background: var(--sticky);
  color: #2b2118;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: rotate(-0.8deg);
  margin: 12px 4px 0;
  padding: 26px 30px 24px;
  font: 21px/1.45 "Patrick Hand", "Marker Felt", cursive;
}
/* The app's PushPin (Kinboard/Design/Components.swift): a brick-red head with a white glint, centered on the top edge. */
.letter::before, .letter::after, .screenshot::before, .screenshot::after, .note::before, .note::after, .faq .card::before, .faq .card::after, .layout main p::before, .layout main p::after, .release::before, .release::after {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 50%;
}
.letter::before, .screenshot::before, .note::before, .faq .card::before, .layout main p::before, .release::before {
  width: 22px;
  height: 22px;
  top: -8px;
  left: calc(50% - 11px);
  background: var(--brick);
  border: 1.5px solid color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow: 0 2px 3px color-mix(in srgb, var(--shadow) 35%, transparent);
}
.letter::after, .screenshot::after, .note::after, .faq .card::after, .layout main p::after, .release::after {
  width: 6.6px;
  height: 6.6px;
  top: -4px;
  left: calc(50% - 7px);
  background: rgba(255, 255, 255, 0.5);
}
.letter h2 { margin-top: 0; font-size: 24px; }
.letter p { margin-bottom: 12px; }
.letter .signature { font-size: 26px; margin: 18px 0 0; text-align: right; }
.letter summary, .letter .fold {
  width: fit-content;
  cursor: pointer;
  list-style: none;
  color: #a63a26;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.letter summary::-webkit-details-marker { display: none; }
.letter details[open] summary { display: none; }
/* Room for the pin and polaroid above the note when Done reading scrolls back to it. */
.letter { scroll-margin-top: 56px; }
.letter .fold { display: block; margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; }

/* A snapshot taped to the note's corner. */
.polaroid {
  position: relative;
  float: right;
  width: 118px;
  margin: -42px -24px 10px 14px;
  padding: 7px 7px 22px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
  transform: rotate(4deg);
}
.polaroid::before {
  content: "";
  position: absolute;
  top: -10px;
  left: calc(50% - 28px);
  width: 56px;
  height: 20px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transform: rotate(-7deg);
}
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* Who Kinboard is for, on the app's pinned sticky notes (StickyColor in Kinboard/Design/Theme.swift). */
.fit { display: flex; flex-wrap: wrap; gap: 26px 20px; align-content: start; }
.fit h2 { flex-basis: 100%; margin: 4px 0 0 4px; }
.note {
  position: relative;
  flex: 1 1 220px;
  max-width: 320px;
  padding: 26px 20px 14px;
  background: #f6b8c6;
  color: #2b2118;
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: rotate(-1.5deg);
  font: 20px/1.35 "Patrick Hand", "Marker Felt", cursive;
}
.note.green { background: #c5e1a0; transform: rotate(1.2deg); }
.note h3 {
  margin: 0 0 6px;
  color: #8f2d1c;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.note p { margin: 0; }
.note .from { text-align: right; margin-top: 6px; }
@media (prefers-color-scheme: dark) {
  .note { background: #e2a1b1; }
  .note.green { background: #aecb88; }
}

@media (max-width: 600px) {
  .layout { padding: 0 12px; }
  .letter { padding: 22px 20px 20px; font-size: 20px; margin: 12px 0 0; }
  .polaroid { width: 104px; margin: -36px -12px 8px 12px; }
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "hero letter" "shot letter" "main letter" "fit letter";
    /* The letter's extra length goes into the last row, so the fit notes sit right under the features. */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 48px;
    align-items: start;
  }
  /* The icon beside the name and tagline, like an App Store listing, with the badge underneath. */
  .hero { grid-area: hero; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; text-align: left; padding-top: 16px; }
  .hero > img { width: 120px; height: 120px; border-radius: 28px; }
  .hero h1 { margin: 0; font-size: 52px; line-height: 1.05; }
  /* Always the two lines split at the <br>, even where the column is a hair narrow. */
  .hero p { margin-left: 0; font-size: 18px; white-space: nowrap; }
  .app-store { grid-column: 1 / -1; justify-self: start; margin-top: 28px; }
  .screenshot { grid-area: shot; justify-self: start; }
  /* Low enough that the polaroid's top lines up with the app icon's. */
  .letter { grid-area: letter; position: sticky; top: 40px; margin-top: 39px; padding: 24px 24px 22px; font-size: 19px; }
  .letter .fold { display: none; }
  .layout main { grid-area: main; }
  /* Who it's for, under the features and the phone: the notes side by side under a centered label. */
  .fit { grid-area: fit; justify-content: center; margin-top: 28px; }
  .fit h2 { margin: 0; text-align: center; }
  .polaroid { width: 140px; }
}

/* Wide enough for the phone to stand between the description and the note. */
@media (min-width: 1120px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 260px 340px;
    grid-template-areas: "hero shot letter" "main shot letter" "fit fit letter";
    grid-template-rows: auto auto 1fr;
  }
  /* A little lower than the hero, so the phone sits between the top of the page and the fit notes. */
  .screenshot { justify-self: center; margin-top: 60px; }
}

/* Matthew's note on AI, between the page and the FAQ: a big blue sticky note (NoteColor.blue in Theme.swift)
   taped down at all four corners instead of pinned, so it reads as its own thing. Dark ink in both modes. */
.ai { max-width: 1160px; margin: 64px auto 0; padding: 0 20px; }
.ai-note {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 34px 40px 30px;
  background: #aad6ea;
  color: #2b2118;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  transform: rotate(-0.6deg);
  font: 21px/1.45 "Patrick Hand", "Marker Felt", cursive;
}
/* The note's own corners hold the top two strips of tape; the unpositioned .tape inside holds the bottom two,
   which still place against the note. */
.ai-note::before, .ai-note::after, .ai-note .tape::before, .ai-note .tape::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 28px;
  background: color-mix(in srgb, var(--tape) 82%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}
.ai-note::before { top: -6px; left: -26px; transform: rotate(-38deg); }
.ai-note::after { top: -6px; right: -26px; transform: rotate(38deg); }
.ai-note .tape::before { bottom: -6px; left: -26px; transform: rotate(40deg); }
.ai-note .tape::after { bottom: -6px; right: -26px; transform: rotate(-36deg); }
.ai-note h2 { margin: 0 0 12px; font-size: 26px; text-wrap: balance; }
.ai-note p { margin: 0 0 12px; }
.ai-note a { color: #8f2d1c; }
.ai-note .signature { font-size: 26px; margin: 16px 0 0; text-align: right; }
@media (prefers-color-scheme: dark) { .ai-note { background: #92c1d6; } }
@media (max-width: 600px) {
  .ai { margin-top: 48px; padding: 0 12px; }
  .ai-note { padding: 30px 22px 26px; font-size: 20px; }
  .ai-note::before, .ai-note::after, .ai-note .tape::before, .ai-note .tape::after { width: 72px; }
  .ai-note::before, .ai-note .tape::before { left: -4px; }
  .ai-note::after, .ai-note .tape::after { right: -4px; }
}

/* Home page FAQ: below everything else, a tape label over pinned index cards that open to their answer. */
.faq { max-width: 1160px; margin: 56px auto 0; padding: 0 20px; }
/* A line drawn across the board in brown marker, closing off the page above before the questions start. */
.faq .divider {
  display: block;
  width: 100%;
  height: 16px;
  margin: 0 0 48px;
  overflow: visible;
  fill: none;
  stroke: color-mix(in srgb, var(--line) 70%, transparent);
  stroke-width: 3;
  stroke-linecap: round;
}
.faq .divider path { vector-effect: non-scaling-stroke; }
.faq h2 { margin: 0 0 22px 4px; }
/* Two independent columns, so opening a card only pushes down the cards under it in its own column. */
.faq .cards, .faq .col { display: flex; flex-direction: column; gap: 26px; }
@media (min-width: 800px) {
  .faq .cards { flex-direction: row; align-items: flex-start; gap: 22px; }
  .faq .col { flex: 1 1 0; min-width: 0; }
}
.faq .card { position: relative; padding: 0; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  cursor: pointer;
  list-style: none;
  font: 700 17px/1.3 "Fredoka", sans-serif;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--brick); font: 400 30px/0.8 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: transform 0.2s; }
.faq .card[open] summary::after { transform: rotate(45deg); }
.faq .card.closing summary::after { transform: none; }
/* The answer is a flap folded under the question, with a faint crease where it folds. The script below
   swings it down when it opens; the card's own color lets it look like paper while it turns. */
.faq .card summary + * {
  margin: 0 20px;
  padding: 12px 0 18px;
  border-top: 1.5px dashed color-mix(in srgb, var(--line) 35%, transparent);
  background: var(--card);
  transform-origin: top;
}
.faq .card summary + div p { margin: 0 0 8px; }
/* Prices by country, in the pricing answer and the press kit's fact sheet. */
.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices th, .prices td { padding: 5px 0; text-align: left; border-bottom: 1px dashed color-mix(in srgb, var(--line) 30%, transparent); }
.prices th { color: var(--muted); font: 700 14px/1.3 "Fredoka", sans-serif; }
.prices :is(th, td) + :is(th, td) { padding-left: 12px; text-align: right; white-space: nowrap; }
.prices tbody tr:last-child td { border-bottom: 0; }
/* The pins come from the app icon's four colors, like the app's sticky notes (Note.pinColor in Theme.swift),
   scattered so neighbors never match, side by side or stacked on a phone. Brick is the default. */
.faq .col:first-child .card:nth-child(2)::before, .faq .col:last-child .card:nth-child(1)::before { background: var(--teal); }
.faq .col:first-child .card:is(:nth-child(3), :nth-child(5))::before, .faq .col:last-child .card:nth-child(4)::before { background: var(--mustard); }
.faq .col:first-child .card:nth-child(4)::before, .faq .col:last-child .card:nth-child(2)::before { background: var(--pine); }
/* A note from Matthew at the end, on the app's blue sticky (NoteColor.blue in Theme.swift). */
.faq .note { flex: none; align-self: center; width: 100%; margin-top: 10px; transform: rotate(1.5deg); }
.faq .note.blue { background: #aad6ea; }
.note a { color: #8f2d1c; }
@media (prefers-color-scheme: dark) { .faq .note.blue { background: #92c1d6; } }
@media (max-width: 600px) {
  .faq { margin-top: 44px; padding: 0 12px; }
  .faq .divider { margin-bottom: 36px; }
  .faq .cards, .faq .col { gap: 24px; }
}

footer {
  padding-top: 22px;
  padding-bottom: 36px;
  color: var(--ink);
  font-size: 15px;
  text-align: center;
}
footer a { color: var(--ink); }

/* Press kit: plain reference facts, then the images to download. */
.press .facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 14px; }
.press .facts dt { font-weight: 700; }
.press .facts dd { margin: 0; }
.press .prices { max-width: 420px; margin-top: 6px; }
@media (max-width: 600px) {
  .press .facts { grid-template-columns: 1fr; gap: 0; }
  .press .facts dd { margin-bottom: 10px; }
}
.press .download {
  display: inline-block;
  padding: 8px 16px;
  background: var(--brick);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--shadow);
}
.press .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 14px; }
.press .shots img { display: block; width: 100%; height: auto; border: 1.5px solid var(--line); border-radius: 12px; }
.press .icons { display: flex; gap: 14px; margin-bottom: 10px; }
.press .icons img { display: block; width: 96px; height: 96px; border: 1.5px solid var(--line); border-radius: 22px; }
.press .headshot img { display: block; width: 180px; height: auto; margin-bottom: 12px; border: 1.5px solid var(--line); border-radius: 12px; }

/* The Gazette: each release is a newspaper clipping cut out and pinned to the board, newest first.
   Newsprint keeps its own colors in dark mode, like the app's sticky notes. */
.gazette main { max-width: 680px; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 20px 8px; }
/* The nameplate: the paper's name cut out of newsprint and taped to the top of the board at both corners. */
.gazette .masthead {
  position: relative;
  max-width: 560px;
  margin: 14px auto 56px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
  transform: rotate(-1deg);
}
.gazette .masthead .plate {
  padding: 22px 26px 18px;
  text-align: center;
  clip-path: polygon(0.5% 3%, 22% 0, 48% 2.5%, 74% 0.5%, 100% 2%, 99.3% 50%, 100% 97%, 71% 100%, 44% 97.5%, 19% 100%, 0 97%, 0.8% 48%);
}
.gazette .masthead h1 {
  margin: 0;
  padding: 6px 0 8px;
  border-top: 1px solid #1f1a14;
  border-bottom: 4px double #1f1a14;
  color: #1f1a14;
  font: 700 44px/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -1px;
}
.gazette .masthead p { margin: 8px 0 0; font: italic 18px/1.4 Georgia, serif; color: #4f4537; }
.gazette .masthead::before, .gazette .masthead::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -12px;
  width: 84px;
  height: 26px;
  background: color-mix(in srgb, var(--tape) 85%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}
.gazette .masthead::before { left: -22px; transform: rotate(-24deg); }
.gazette .masthead::after { right: -22px; transform: rotate(22deg); }
/* The shadow is a filter so it follows the clipping's scissor-cut edges. */
.release {
  position: relative;
  margin: 0 auto 14px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
  transform: rotate(-0.7deg);
  scroll-margin-top: 30px;
}
.release.minor { max-width: 440px; transform: rotate(1.2deg); }
.release.minor::before { background: var(--teal); }
.gazette .masthead .plate, .clip {
  background-color: #f4efe2;
  /* Newsprint grain. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.clip {
  padding: 26px 28px 22px;
  color: #1f1a14;
  font: 17px/1.55 Georgia, "Times New Roman", serif;
  /* Holds the photo in, however short the story under it. */
  display: flow-root;
  /* Cut out with scissors: straight-ish edges that wander a little. */
  clip-path: polygon(0.4% 1.2%, 18% 0, 41% 0.9%, 63% 0.2%, 86% 1%, 100% 0.3%, 99.4% 22%, 100% 47%, 99.2% 71%, 99.8% 100%, 77% 99.1%, 52% 100%, 28% 99.2%, 6% 100%, 0 98.8%, 0.7% 74%, 0 51%, 0.6% 27%);
}
/* The version and date, centered between rules like a newspaper's dateline. */
.clip .mast {
  margin: 0 0 14px;
  text-align: center;
  padding: 5px 0 4px;
  border-top: 1px solid #1f1a14;
  border-bottom: 3px double #1f1a14;
  font: 700 11px/1.3 "Fredoka", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.clip h2 { margin: 0 0 8px; text-wrap: balance; color: #1f1a14; font: 700 32px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -0.5px; }
.release.major .clip h2 { font-size: 46px; letter-spacing: -1px; }
.clip p { margin: 0 0 10px; }
.clip .deck { font-style: italic; font-size: 20px; line-height: 1.35; color: #3d342a; }
.clip em { color: #4f4537; }
.clip .byline { margin: -2px 0 14px; color: #6b5d4c; font: 700 12px/1.3 "Fredoka", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.clip ul { margin: 0 0 10px; padding-left: 22px; }
.clip figure { float: right; width: 170px; margin: 4px 0 10px 22px; }
/* The screenshot in the home page's iPhone bezel (.screenshot video), scaled to the clipping. */
.clip figure img { display: block; width: 100%; height: auto; border: 5px solid #1d1a17; border-radius: 25px; filter: sepia(0.2) saturate(0.8); }
.clip figcaption { margin-top: 4px; font: italic 13px/1.35 Georgia, serif; color: #4f4537; }
/* Under each clipping, a small Share button for that clipping's own link, and on an issue's own page, a link back to every issue. */
.gazette .share { margin: 0 0 60px; text-align: center; }
.gazette .share :is(button, a) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: 700 14px/1.2 "Fredoka", sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.gazette .share :is(button, a):hover { background: color-mix(in srgb, var(--card) 60%, transparent); }
.gazette .share svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 600px) {
  .gazette main { padding: 0 14px 8px; }
  .gazette .masthead { margin: 14px 8px 48px; }
  .gazette .masthead .plate { padding: 18px 16px 14px; }
  .gazette .masthead h1 { font-size: 30px; letter-spacing: -0.5px; }
  .gazette .masthead p { font-size: 16px; }
  .gazette .masthead::before, .gazette .masthead::after { width: 64px; }
  .gazette .masthead::before { left: -14px; }
  .gazette .masthead::after { right: -14px; }
  .clip { padding: 22px 18px 18px; font-size: 16px; }
  .clip h2 { font-size: 28px; }
  .release.major .clip h2 { font-size: 36px; }
  .clip .deck { font-size: 18px; }
  .clip figure { width: 112px; margin-left: 14px; }
  .clip figure img { border-width: 4px; border-radius: 17px; }
}

/* Feature requests (requests.html, requests.js): the ideas are index cards on the board, each with a vote tab on its
   left and a rubber stamp saying where it stands. New ideas go on a sticky note pinned beside them. */
.requests main { max-width: 1040px; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 20px 8px; display: grid; gap: 28px; }
.requests .intro h1 { font-size: 40px; margin: 8px 0 6px; }
.requests .intro p { max-width: 560px; margin: 0; color: var(--ink); font-size: 18px; }
@media (min-width: 900px) {
  .requests main { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "intro idea" "list idea"; grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; }
  .requests .intro { grid-area: intro; }
  .requests .list { grid-area: list; }
  .requests .idea { grid-area: idea; position: sticky; top: 32px; margin-top: 30px; }
}

/* The sticky note to write on, pushpinned like the home page's letter. Dark ink in both modes. */
.idea {
  position: relative;
  padding: 26px 22px 20px;
  background: var(--sticky);
  color: #2b2118;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: rotate(0.8deg);
  font: 19px/1.4 "Patrick Hand", "Marker Felt", cursive;
}
.idea::before, .idea::after { content: ""; position: absolute; z-index: 1; border-radius: 50%; }
.idea::before { width: 22px; height: 22px; top: -8px; left: calc(50% - 11px); background: var(--teal); border: 1.5px solid color-mix(in srgb, var(--line) 85%, transparent); box-shadow: 0 2px 3px color-mix(in srgb, var(--shadow) 35%, transparent); }
.idea::after { width: 6.6px; height: 6.6px; top: -4px; left: calc(50% - 7px); background: rgba(255, 255, 255, 0.5); }
.idea h2 { margin: 0 0 10px; font-size: 22px; color: #2b2118; }
.idea label { display: block; margin-top: 8px; }
.idea label span { color: #6b5636; }
/* Ruled lines on the note, written on in the same hand. */
.idea input, .idea textarea {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 2px 2px 0;
  border: 0;
  border-bottom: 1.5px solid rgba(43, 33, 24, 0.35);
  border-radius: 0;
  background: transparent;
  color: #2b2118;
  font: inherit;
  font-size: 20px;
  line-height: 30px;
}
.idea textarea { resize: vertical; min-height: 92px; border-bottom: 0; background: repeating-linear-gradient(transparent 0 28.5px, rgba(43, 33, 24, 0.35) 28.5px 30px); background-attachment: local; }
.idea input::placeholder { color: rgba(43, 33, 24, 0.45); }
.idea input:focus, .idea textarea:focus { outline: 2px solid rgba(166, 58, 38, 0.6); outline-offset: 2px; }
.idea .trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.idea button {
  margin-top: 14px;
  padding: 8px 18px;
  border: 0;
  border-radius: 10px;
  background: #a63a26;
  color: #fff;
  font: 700 16px/1.2 "Fredoka", sans-serif;
  box-shadow: 0 3px 0 #5a4022;
  cursor: pointer;
}
.idea button:disabled { opacity: 0.6; cursor: default; }
.idea .fine { margin: 12px 0 0; font-size: 16px; color: #5b4a33; }
.idea .message { margin: 6px 0 0; color: #8f2d1c; }
.idea .message:empty { display: none; }

/* Show and Sort: little tabs of tape, the pressed one inked in. */
.requests .controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.requests .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.requests .chips button {
  padding: 5px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 700 14px/1.2 "Fredoka", sans-serif;
  cursor: pointer;
}
.requests .chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }

.requests #board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.request {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 18px 14px 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--shadow) 12%, transparent), 0 3px 8px color-mix(in srgb, var(--shadow) 28%, transparent);
  scroll-margin: 24px;
}
.request.fresh { border-color: var(--brick); box-shadow: 0 0 0 1.5px var(--brick), 0 3px 8px color-mix(in srgb, var(--shadow) 28%, transparent); }
.request .vote {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 58px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--shadow);
  font: 700 18px/1 "Fredoka", sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.request .vote svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.request .vote:hover:not(:disabled) { border-color: var(--brick); }
.request .vote[aria-pressed="true"] { background: var(--brick); border-color: var(--brick); color: var(--card); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--shadow) 40%, transparent); }
.request .vote:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.request .body { flex: 1; min-width: 0; }
.request .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.request h3 { margin: 4px 0 0; font-size: 18px; overflow-wrap: anywhere; }
.request .details { margin: 4px 0 0; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.request .oops { margin: 6px 0 0; color: var(--brick); font-size: 15px; }
.request .oops:empty { display: none; }
/* Matthew's rubber stamp, in the app icon's pin colors: inked, a little crooked, and never wrapped. */
.request .stamp {
  flex: none;
  margin-top: 2px;
  padding: 3px 8px 2px;
  border: 2px solid currentColor;
  border-radius: 5px;
  color: var(--muted);
  font: 700 12px/1.3 "Fredoka", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-3deg);
}
.request[data-status="planned"] .stamp { color: var(--teal); }
.request[data-status="in-progress"] .stamp { color: var(--mustard); }
.request[data-status="shipped"] .stamp { color: var(--pine); }
.requests .list .empty { margin: 16px 4px; color: var(--ink); }
.requests .list .empty:empty { display: none; }
@media (max-width: 600px) {
  .requests main { padding: 0 12px 8px; margin: 0; }
  .requests .intro h1 { font-size: 32px; }
  .request { padding: 12px 14px 12px 12px; gap: 12px; }
  .request .top { flex-direction: column; gap: 6px; }
  .request .stamp { order: -1; }
}

/* The family board in a browser (/board), at the end of every page's nav. */
nav a.open-board { padding: 6px 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--ink); color: var(--card); box-shadow: 0 2px 0 var(--shadow); }
nav a.open-board:hover, nav a.open-board[aria-current="page"] { text-decoration: none; background: var(--brick); }
@media (max-width: 719px) {
  nav a.open-board { width: auto; margin: 8px 20px 6px; justify-content: center; }
}