/* fiammo — homepage.
 *
 * One idea, shown rather than listed: a prompt answered, friends let in, a
 * line echoed into a private conversation, and the post burning while the
 * conversation stays. The hero loop (home.js) is that idea; the sections
 * under it each hold one piece of it still, so a reader who scrolls past the
 * loop gets the same story. Friend apps' sites say one line and show one
 * object; this page stops after four sections on purpose.
 *
 * Nothing here is a screenshot. The App Store captures carry real people's
 * faces and posts, and a drawing built from these tokens cannot go stale
 * against the app.
 *
 * Type. Headlines are Lora, which departs from style.css's two-tone rule
 * (serif for prose only). It was chosen for this page in the redesign: the
 * editorial serif at display size is what makes the page read as a product
 * rather than a side project. --font-display is the one place that decision
 * lives; set it to var(--font-sans) to go back to two-tone.
 */

.home {
  --font-display: var(--font-serif);
  /* Secondary text on desk paper, from Color+Fiammo (fiammoSecondary, .desk).
     style.css's --muted is lighter and falls under 4.5:1 at caption sizes. */
  --quiet: #76726C;
  --body: #4A4540;
  --page: 1280px;
  --gutter: 80px;
  --arrive: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--font-sans);
  color: var(--ink);
}

@media (max-width: 1100px) { .home { --gutter: 48px; } }
@media (max-width: 700px)  { .home { --gutter: 16px; } }

.home .page {
  max-width: var(--page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: content-box;
}

.home h1, .home h2, .home h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.home h1 em, .home h2 em { font-weight: 400; }
.home p { margin: 0; }

/* ---------- header ---------- */

.home header.site {
  padding-top: 28px;
  padding-bottom: 28px;
  margin-bottom: 0;
}

/* Scoped to beat `nav.legal-links a`, which is more specific than a bare class
   and would paint the label muted grey and uppercase. */
nav.legal-links a.nav-cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 11px 20px;
  border-radius: 999px;
  margin: 0;
}
nav.legal-links a.nav-cta:hover { background: var(--ink); color: var(--bg); }

/* style.css stacks the header under 560px for the documents' row of links;
   here it's a wordmark and one button, which fit side by side on any phone. */
@media (max-width: 560px) {
  .home header.site { flex-direction: row; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
  .home nav.legal-links { margin: 0; }
  nav.legal-links a.nav-cta { font-size: 14px; padding: 11px 16px; }
}

/* ---------- shared bits ---------- */

.home .av {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
}
/* Faces, not initials: letters in circles are what made the old page read
   as a prototype. These are the demo world's stock photos (the accounts the
   App Store screenshots are taken on), cropped to the face, so the people
   here are the same people as in the feed at the bottom of the page. */
.home img.av { object-fit: cover; display: block; background: var(--border); }

.home .avs { display: inline-flex; }
.home .avs .av { border: 2px solid var(--card); box-sizing: content-box; }
.home .avs .av + .av { margin-left: -8px; }
.home .avs > :first-child { margin-left: 0; }

.kicker {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--accent);
}

.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  padding: 0 30px;
  height: 54px;
  border-radius: 999px;
}
.store-btn:hover { color: var(--bg); background: var(--text); }

/* A received message and your reply, drawn the way the app's thread draws
   them: theirs on a white bubble, yours in ink. */
.home .quote {
  align-self: flex-start;
  max-width: 85%;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--accent-strong);
  background: rgba(201, 111, 59, .10);
  border-radius: 14px;
  padding: 8px 14px;
}
.home .msg { display: flex; gap: 8px; align-items: flex-end; }
.home .msg.mine { justify-content: flex-end; }
.home .bubble {
  max-width: 74%;
  font-size: 15px;
  line-height: 1.4;
  border-radius: 18px;
  padding: 10px 14px;
}
.home .msg.theirs .bubble { background: var(--card); box-shadow: 0 1px 0 var(--border); }
.home .msg.mine .bubble { background: var(--ink); color: var(--bg); }

/* ---------- hero ---------- */

.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 64px;
  align-items: center;
  padding-top: 56px;
}

.hero-copy { display: flex; flex-direction: column; gap: 32px; }

.top h1 {
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: .98;
  letter-spacing: -.04em;
}

.lede {
  max-width: 480px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--body);
}

/* Getting it. On a phone that's the App Store; on a laptop the store can't
   install anything, so the laptop gets a code to scan with the phone. */
.get {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 8px;
}
.qr {
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 1px 0 var(--border), 0 12px 30px -18px rgba(18, 11, 4, .25);
  color: var(--ink);
}
.qr-code { width: 100%; height: 100%; display: block; }
.qr-copy { display: flex; flex-direction: column; gap: 6px; }
.qr-title { font-size: 16px; font-weight: 500; }
.qr-note { font-size: 14px; color: var(--quiet); }
.qr-note a { color: var(--accent-strong); }
.get .store-btn, .get .store-note { display: none; }

@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .get { flex-direction: column; align-items: stretch; gap: 10px; }
  .qr, .qr-copy { display: none; }
  .get .store-btn { display: inline-flex; }
  .get .store-note { display: block; text-align: center; font-size: 13px; color: var(--quiet); }
}

@media (max-width: 960px) {
  .top { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 28px; }
  .stage { justify-self: center; width: 100%; max-width: 560px; }
  .lede { font-size: 17px; }
}

/* ---------- the loop ---------- */

.stage { width: 560px; max-width: 100%; }

.stage-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 76px;
  --pad: 28px;
  --body-size: 25px;
}
@media (max-width: 600px) {
  .stage-inner { gap: 14px; --pad: 20px; --body-size: 19px; }
}

/* Your post sits a degree off square with two friends' posts behind it, which
   slide up once you've posted: you read theirs once you've written yours. */
.card-wrap {
  position: relative;
  transform: rotate(-1.2deg);
  transform-origin: 50% 60%;
}

.peek {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 130px;
  border-radius: 22px;
  padding: 10px var(--pad);
  box-sizing: border-box;
  box-shadow: 0 1px 0 var(--border), 0 10px 24px -16px rgba(18, 11, 4, .25);
  opacity: 0;
}
.peek-back { background: #FAF9F7; transform: rotate(3.2deg) scale(.94); }
.peek-front { background: #FDFDFC; transform: rotate(1.6deg) scale(.97); }
.peek-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.peek-row b { font-weight: 500; }
.peek-time { margin-left: auto; color: var(--quiet); }

.post-card {
  position: relative;
  background: var(--card);
  border-radius: 24px;
  padding: var(--pad);
  box-shadow: 0 1px 0 var(--border), 0 24px 60px -30px rgba(18, 11, 4, .28);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
  box-sizing: border-box;
}
@media (max-width: 600px) { .post-card { min-height: 330px; } }

.card-head { display: flex; flex-direction: column; gap: 6px; }
.card-label { font-size: 12px; font-weight: 500; color: var(--accent-strong); }
.card-prompt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: var(--body);
}
@media (max-width: 600px) { .card-prompt { font-size: 15px; } }
.card-rule { height: 1px; background: var(--border); }

.byline { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.byline .who { display: flex; align-items: center; gap: 10px; }
.byline b { font-weight: 500; }
.status { color: var(--accent); }

.card-body {
  font-family: var(--font-serif);
  font-size: var(--body-size);
  line-height: 1.5;
  letter-spacing: -.005em;
  min-height: 150px;
}
@media (max-width: 600px) { .card-body { min-height: 140px; } }

/* The echo is marked the way the app marks it: the phrase, not an underline.
   One inline box across the whole sentence, so the mark sweeps line by line
   instead of breaking up at every word. */
.hl {
  background-image: linear-gradient(rgba(201, 111, 59, .13), rgba(201, 111, 59, .13));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 3px;
}
.caret { color: var(--accent); font-family: var(--font-sans); font-weight: 300; opacity: 0; }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}
.readers { display: flex; align-items: center; gap: 10px; }
.readers-copy { font-size: 13px; color: var(--quiet); opacity: 0; }
.echo-chip {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}

.gone {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--quiet);
  opacity: 0;
  pointer-events: none;
}
.gone span + span { color: var(--ink); }
@media (max-width: 600px) { .gone { font-size: 17px; } }

.thread { display: flex; flex-direction: column; gap: 10px; }
.thread-label { align-self: center; font-size: 12px; color: var(--quiet); }
.thread .quote.burned {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 14px;
  color: var(--quiet);
  background: #F3F1ED;
  padding: 7px 13px;
}
.msg-slot { display: grid; }
.msg-slot > * { grid-area: 1 / 1; }
.typing {
  justify-self: end;
  align-self: start;
  display: flex;
  gap: 5px;
  background: var(--ink);
  border-radius: 18px;
  padding: 12px 16px;
  opacity: 0;
}
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--bg); }
@media (max-width: 600px) {
  .thread .bubble, .thread .quote { font-size: 14px; }
}

.rail { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.rail-bars { display: flex; gap: 6px; }
.rail-bars i { flex: 1; height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; }
.rail-bars b { display: block; height: 100%; width: 0; background: var(--ink); }
.rail-bars i.burn b { background: var(--accent); }
.rail-labels { display: flex; justify-content: space-between; font-size: 12px; color: #B5B0A8; }
.rail-labels span.done { color: var(--quiet); }
.rail-labels span.on { color: var(--ink); font-weight: 600; }

/* ---------- the prompt ---------- */

.band {
  margin-top: 150px;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 110px 0;
}
.band-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 96px;
  align-items: end;
}
.band-copy { display: flex; flex-direction: column; gap: 16px; }
.band h2 { font-size: 44px; line-height: 1.05; letter-spacing: -.03em; }
.band-copy p { font-size: 17px; line-height: 1.6; color: var(--body); }
.band-quote { display: flex; flex-direction: column; gap: 28px; }
.big-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(26px, 3.9vw, 56px);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.answered { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--quiet); }
.answered .av { width: 30px; height: 30px; font-size: 12px; }

@media (max-width: 900px) {
  .band { margin-top: 72px; padding: 56px 0; }
  .band-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .band h2 { font-size: 32px; }
}

/* ---------- write to read ---------- */

.honest {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 96px;
  align-items: center;
  padding-top: 140px;
}
.honest-copy { display: flex; flex-direction: column; gap: 18px; }
.honest h2, .said h2 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1; letter-spacing: -.035em; }
.honest-copy p { max-width: 440px; font-size: 18px; line-height: 1.6; color: var(--body); }

/* Friends' posts, really blurred, behind the one button the app shows. */
.locked { position: relative; display: flex; flex-direction: column; gap: 14px; }
.locked-post {
  background: var(--card);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 1px 0 var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.locked-who { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.locked-who b { font-weight: 500; }
.locked-who span:last-child { margin-left: auto; color: var(--quiet); }
.locked-post p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.45;
  filter: blur(6px);
  user-select: none;
}
.locked-over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unlock {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  padding: 12px 22px 12px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 16px 40px -16px rgba(18, 11, 4, .5);
}
.unlock:hover { color: var(--bg); background: var(--text); }
.unlock .avs .av { border-color: var(--ink); }

@media (max-width: 900px) {
  .honest { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 64px; }
  .honest-copy p { font-size: 16px; }
  .locked-post { padding: 16px 18px; }
  .locked-post p { font-size: 16px; filter: blur(5px); }
  .unlock { font-size: 14px; }
}

/* ---------- said / answered ---------- */

.said { padding-top: 140px; display: flex; flex-direction: column; gap: 64px; }
.said-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.said-head h2 { max-width: 760px; }
.said-head h2 em { color: var(--accent-strong); }
.said-head p { max-width: 380px; font-size: 17px; line-height: 1.6; color: var(--body); }

.said-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.panel {
  background: var(--card);
  border-radius: 28px;
  box-shadow: 0 1px 0 var(--border);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.panel h3 { font-size: 32px; letter-spacing: -.02em; }
.panel-head span { font-size: 14px; color: var(--quiet); white-space: nowrap; }
.panel-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.panel .msg.theirs .bubble { background: var(--bg); box-shadow: none; }

.mini-post {
  background: var(--bg);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.mini-post p { font-family: var(--font-serif); font-size: 18px; line-height: 1.4; }
.mini-meta { font-size: 12px; color: var(--quiet); }
.sending { display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--body);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .18s var(--arrive), border-color .18s var(--arrive), color .18s var(--arrive);
}
.chip:hover { border-color: var(--quiet); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip svg { display: none; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 500; }
.chip.on svg { display: block; }
.members { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--body); padding-top: 6px; min-height: 36px; }
.members .av { width: 32px; height: 32px; font-size: 12px; }
/* Everyone past the three faces, counted rather than drawn. */
.home .av-more {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--quiet);
  font-size: 12px;
  font-weight: 600;
  border: 2px solid var(--card);
  margin-left: -8px;
}
.members-count { margin-left: auto; color: var(--quiet); white-space: nowrap; }
.panel-note { align-self: center; text-align: center; font-size: 12px; color: var(--quiet); padding-top: 6px; }

@media (max-width: 900px) {
  .said { padding-top: 64px; gap: 24px; }
  .said-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .said-head p { font-size: 16px; }
  .said-panels { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .panel { padding: 22px; border-radius: 24px; gap: 16px; }
  .panel-head { flex-direction: column; gap: 2px; }
  .panel h3 { font-size: 22px; }
  .panel-head span { font-size: 13px; }
  .mini-post { padding: 14px 16px; }
  .mini-post p { font-size: 16px; }
  .chip { padding: 7px 12px; font-size: 13px; }
  .members { font-size: 13px; flex-wrap: wrap; }
  .members .av, .home .av-more { width: 28px; height: 28px; font-size: 11px; }
}

/* ---------- closing ---------- */

.closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: 1fr auto 1fr;
  column-gap: 96px;
  row-gap: 36px;
  padding-top: 150px;
}
.closing h2 {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(46px, 6.7vw, 96px);
  line-height: 1;
  letter-spacing: -.04em;
}
.closing .store-btn { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; }

/* A bare screen rather than a drawn iPhone: the corners and a soft lift are
   enough to read as a phone, and a bezel would be the heaviest thing here. */
.real { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.real img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 48px;
  box-shadow: 0 0 0 1px var(--border), 0 40px 80px -40px rgba(18, 11, 4, .35);
}

@media (max-width: 900px) {
  .closing { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 80px; row-gap: 28px; }
  .closing h2, .real, .closing .store-btn { grid-column: 1; grid-row: auto; }
  .real { justify-self: center; width: min(300px, 78%); }
  .real img { border-radius: 40px; }
  .closing .store-btn { justify-self: stretch; }
}

/* ---------- questions ---------- */

/* The shape this section has on every app site, because a reader recognises it
   before they read it: the heading centred, one column of cards under it, a
   way to reach a person at the foot. The page's own card, paper and type do
   the rest, so it is the familiar arrangement without the familiar styling.
   Native <details>, so every answer is in the page for a reader with no script
   and for anything that indexes it, and nothing is open until it's asked for.
   One question at a time is home.js's job; without the script they simply
   open independently. */

.faq { padding-top: 150px; }

.faq-head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.faq h2 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.03em; }
.faq h2 em { color: var(--accent-strong); }
.faq-head p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--body); }

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cards rather than a ruled list: it is what the section looks like
   elsewhere, and a white card lifting off desk paper is what this design
   system already does with a row. */
.qa {
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 1px 0 var(--border);
  padding: 0 26px;
}

.qa summary {
  display: flex;
  align-items: baseline;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent-strong); }
.qa summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* The mark is a plus that becomes a minus, drawn from two rules so it costs
   nothing and turns on the page's own curve. */
.qa summary i {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: auto;
  align-self: center;
  color: var(--accent);
  transition: transform .28s var(--arrive);
}
.qa summary i::before,
.qa summary i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
}
.qa summary i::after { transition: opacity .2s var(--arrive); transform: translateY(-50%) rotate(90deg); }
.qa[open] summary i { transform: rotate(180deg); }
.qa[open] summary i::after { opacity: 0; }

.qa-body { padding: 0 44px 22px 0; }
.qa-body p { font-size: 16px; line-height: 1.65; color: var(--body); }
.qa-body a { color: var(--accent-strong); }

/* Arrive the way everything else on the page does. Height is left alone on
   purpose: <details> has no height to animate to from closed, and the
   measured-and-set version of this stutters on the first open. */
.qa[open] .qa-body { animation: qa-in .3s var(--arrive) both; }
@keyframes qa-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qa[open] .qa-body { animation: none; }
  .qa summary i { transition: none; }
}

/* The way out for a question the list didn't answer. */
.faq-foot { max-width: 760px; margin: 52px auto 0; text-align: center; }
.faq-foot h3 { font-size: 26px; letter-spacing: -.02em; }
.faq-foot p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--quiet); }
.faq-foot a { color: var(--accent-strong); }
/* The link colour above would otherwise beat .store-btn's own, and paint the
   label copper on ink. */
.faq-foot a.store-btn { margin-top: 24px; height: 48px; font-size: 16px; color: var(--bg); }

@media (max-width: 900px) {
  .faq { padding-top: 80px; }
  .faq-head { margin-bottom: 28px; }
  .faq-head p { font-size: 16px; }
  .qa { padding: 0 20px; border-radius: 18px; }
  .qa summary { font-size: 18px; gap: 16px; padding: 17px 0; }
  .qa-body { padding-right: 0; padding-bottom: 19px; }
  .faq-foot { margin-top: 36px; }
}

/* ---------- footer ---------- */

/* Margins rather than .page's padding, so the footer's top rule stops at the
   text edge instead of running out into the gutter. */
.home footer.site {
  max-width: var(--page);
  width: calc(100% - 2 * var(--gutter));
  margin: 70px auto 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 40px;
  box-sizing: border-box;
}