/* ==========================================================================
   custsat, public pages
   Sign in and the other account pages, and the marketing pages: home, features
   and pricing (written 2026-09-13, from what was built).

   The home page opens with its headline and both ends of one survey, real
   screenshots. A large working survey in Plezo's speech bubble was tried there
   first and taken out as too much (2026-09-13). The bubble (the logo's straight
   left side and its tail) stays for the closing call to action and the small notes
   pinned on the Overview. Named links are the thread through the page: the lime
   tags on each place a survey is shared come back as the rows of "By link".

   Canopy as everywhere: Onest only, forest for the bubble, lime as a fill with
   forest words. Every picture of the product is a real screenshot
   (tools/capture-screens.js, src/_includes/screens.njk).
   ========================================================================== */

:root {
  /* The speech bubble. In dark mode it is lifted above the ground rather than sunk
     below it, so it still reads as a shape. */
  --bubble:       #0e2a1c;
  --bubble-ink:   #e6efe8;
  --bubble-soft:  #9db3a5;
  /* A note pinned on a screenshot. It floats, so it gets the large shadow. */
  --callout:      #0e2a1c;
  --callout-ink:  #e6efe8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bubble:       #173222;
    --bubble-ink:   #e6efe8;
    --bubble-soft:  #a3b5aa;
    --callout:      #21402d;
    --callout-ink:  #e6efe8;
  }
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-veil);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }

.site-nav { display: flex; align-items: center; gap: .9rem; }
.site-header .brand, .site-nav a { white-space: nowrap; flex: none; }
@media (max-width: 480px) { .nav-collapse { display: none; } }

/* The marketing header's links. `.site-nav > a` rather than `.site-nav a`, so the
   buttons inside keep their own colours; Contact sits in `.nav-collapse` so it can step out
   on a phone, and is named beside it. */
.site-nav > a,
.nav-collapse > a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500; }
.site-nav > a:hover, .site-nav > a[aria-current="page"],
.nav-collapse > a:hover, .nav-collapse > a[aria-current="page"] { color: var(--ink); }
.js-auth-links { display: flex; align-items: center; gap: .5rem; }
.site-nav:has(.js-auth-links) { gap: 1.4rem; }

@media (max-width: 640px) {
  .site-header .brand { font-size: 1.1rem; }
  .site-nav:has(.js-auth-links) { gap: 1rem; }
  .site-nav .nav-trial { display: none; }
}

/* --- Sign in ------------------------------------------------------------- */

.auth-main { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.form-sheet {
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.form-sheet h1 { font-size: 2rem; }

/* --- Contact ---------------------------------------------------------------
   Bellbee's: a heading over the form, and a thanks page with a tick drawn in CSS, since the
   public pages load no icon set.
   ------------------------------------------------------------------------ */

.hero-tight { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.5rem); }
.hero-tight h1 { margin: 0; max-width: none; font-size: clamp(2rem, 3.8vw, 2.8rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.contact { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.contact-done { padding-top: clamp(3rem, 7vw, 5rem); }
.done-mark {
  position: relative;
  width: 56px; height: 56px; margin: 0 0 1.5rem;
  border: 2px solid var(--done); border-radius: var(--radius-lg);
}
.done-mark::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 11px;
  border-left: 3px solid var(--done); border-bottom: 3px solid var(--done);
  transform: translate(-50%, -70%) rotate(-45deg);
}
.auth-aside,
.auth-alt { margin: 1.25rem 0 0; font-size: .9rem; color: var(--ink-soft); text-align: center; }
.auth-wait { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--ink-soft); }
/* Whose account a link is for, stated above the password field rather than asked. */
.invite-who {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  margin: 0 0 1.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  max-width: none;
}
.invite-who .ico { color: var(--ink-soft); font-size: .92rem; }

/* --- Type ------------------------------------------------------------------
   One family, three sizes that matter: the page's headline, a section's heading,
   and the body. The headline is set very large and very tight, the way the score
   is on the Overview.
   ------------------------------------------------------------------------ */

.lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }

.m-h2 {
  margin: 0; max-width: 17ch;
  font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -.035em;
  text-wrap: balance;
}

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section + .section { border-top: 1px solid var(--rule); }

.section-head { display: grid; gap: 1rem 3rem; margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.section-head p { margin: 0; font-size: 1.08rem; color: var(--ink-soft); max-width: 46ch; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
}

figure { margin: 0; }
.cap { margin: .9rem 0 0; font-size: .95rem; color: var(--ink-soft); max-width: 42ch; text-wrap: pretty; }
.cap strong { display: block; margin-bottom: .1rem; font-size: 1.05rem; color: var(--ink); }

/* --- The speech bubble -----------------------------------------------------
   Plezo's logo at the size of a section: rounded, except the bottom left, which is
   square and runs straight down into the tail. The tail hangs below the box, so
   whatever holds a bubble leaves room under it.
   ------------------------------------------------------------------------ */

.bubble {
  --tail: clamp(34px, 5vw, 64px);
  position: relative;
  color: var(--bubble-ink);
  background: var(--bubble);
  border-radius: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0;
  padding: clamp(1.4rem, 4.5vw, 3.75rem);
  margin-bottom: calc(var(--tail) * .85);
}
.bubble::after {
  content: ""; position: absolute; left: 0; top: calc(100% - 1px);
  width: var(--tail); height: calc(var(--tail) * .85);
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* --- Home: the headline ---------------------------------------------------- */

.hero { padding-top: clamp(2.5rem, 6vw, 5rem); }
/* The words beside the headline start at its top, a little below the cap height, so no
   empty space opens above them. The headline is capped so it stays three lines on a wide
   screen: "Ask your / customers / one question." */
.hero-top { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 960px) {
  .hero-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hero-side { padding-top: clamp(.25rem, 1vw, .9rem); }
}
.hero h1 {
  margin: 0; max-width: 11ch;
  font-size: clamp(2.9rem, 8.4vw, 5.6rem); font-weight: 800;
  line-height: .93; letter-spacing: -.05em;
}
.hero-side .lede { margin: 0; }
.hero-acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.hero-note { margin: .8rem 0 0; font-size: .875rem; color: var(--ink-soft); }

/* --- Home: the product under the headline -----------------------------------
   Both ends of one survey: a survey's results in the browser on the right, and the
   same survey on a customer's phone in front of it at the bottom left, lifted off the
   page with a ring of the ground and the large shadow, because it floats.
   ------------------------------------------------------------------------ */

.hero { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.hero-stage {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.hero-stage .browser { grid-column: 3 / 13; grid-row: 1; }
.hero-phone { grid-column: 1 / 5; grid-row: 1; z-index: 1; max-width: 300px; margin-bottom: -2.5rem; }
.hero-phone .screen { border: 6px solid var(--paper); box-shadow: var(--shadow-lg); box-sizing: content-box; }
@media (max-width: 700px) {
  .hero-stage .browser { grid-column: 2 / 13; }
  .hero-phone { grid-column: 1 / 6; margin-bottom: -2rem; }
}

/* --- Screens ---------------------------------------------------------------
   A browser window for a whole screen; the survey on its own, cropped to what is on
   it; a part of a screen as it is, or on a sheet when it has no card of its own.
   Flat, with hairlines, like the product.
   ------------------------------------------------------------------------ */

.browser picture, .screen picture, .part picture { display: block; }
.browser img, .part img { display: block; width: 100%; height: auto; }

.browser {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; justify-content: center;
  height: 2.2rem; padding-inline: .8rem;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--rule);
}
.browser-url {
  max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .1rem .95rem;
  font-size: .72rem; color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
}

/* The phone's screen is 390 by 844 and the survey sits in its middle, so the frame
   keeps the middle 540. */
.screen {
  aspect-ratio: 390 / 540;
  overflow: hidden;
  background: var(--forest);
  border-radius: clamp(18px, 2.6vw, 28px);
}
.screen picture { height: 100%; }
.screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }

.part-framed {
  padding: clamp(.8rem, 2vw, 1.4rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 14px;
}

/* A named link, as a lime luggage tag hanging on the thing it names, with a punched
   hole. Tilted a little, because it has been tied on by hand. */
.linktag {
  position: absolute; z-index: 2; top: -.95rem; left: 1.1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem .35rem .55rem;
  font-size: .88rem; font-weight: 700; white-space: nowrap;
  color: var(--brand-ink); background: var(--brand-fill);
  border-radius: 8px;
  transform: rotate(-3deg);
}
.linktag::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--paper);
}

/* --- Home: where it is asked ------------------------------------------------ */

.places { display: grid; gap: 3rem 1.5rem; }
.place { position: relative; }
@media (min-width: 860px) {
  .places { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 3.25rem 2rem; }
  .place-phone { grid-column: 1 / 5; grid-row: 1 / 3; }
  .place-email { grid-column: 5 / 13; grid-row: 1; }
  .place-web   { grid-column: 5 / 13; grid-row: 2; }
}
@media (max-width: 859px) {
  .place-phone .screen { max-width: 22rem; }
}

.bylink {
  display: grid; gap: 1.5rem 3rem; align-items: center;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 860px) {
  .bylink { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}
.bylink h3 {
  margin: 0 0 .6rem;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
.bylink p { margin: 0; color: var(--ink-soft); max-width: 40ch; }

/* --- Home: the console, with notes pinned on it -----------------------------
   Each note is a small speech bubble whose tail points at what it names. The
   position is where the tail's tip goes, as a share of the screenshot. Below 1080px
   the screenshot is too small to pin words on, so they are a plain list under it.
   ------------------------------------------------------------------------ */

.console { position: relative; }
.callouts { display: grid; gap: 1.2rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.callout {
  position: relative; justify-self: start;
  max-width: 24ch; padding: .65rem 1rem;
  font-size: .95rem; font-weight: 600; line-height: 1.3;
  color: var(--callout-ink); background: var(--callout);
  border-radius: 14px 14px 14px 0;
}
.callout::after {
  content: ""; position: absolute; left: 0; top: calc(100% - 1px);
  width: 14px; height: 12px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
@media (min-width: 1080px) {
  .callouts { position: absolute; inset: 2.2rem 0 0; margin: 0; display: block; pointer-events: none; }
  /* One line each when pinned: a second line would cover what is under the note. */
  .callout { position: absolute; left: var(--x); bottom: calc(100% - var(--y) + 12px); max-width: none; white-space: nowrap; box-shadow: var(--shadow-lg); }
}


/* --- Home: four types ------------------------------------------------------ */

.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; }
@media (min-width: 900px) {
  .types { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .types > :nth-child(even) { margin-top: 3.5rem; }
}
.types .cap { font-size: .9rem; }
/* Two surveys beside a screenshot on Features: always a pair, never offset. */
.types.types-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.types.types-two > :nth-child(even) { margin-top: 2.5rem; }

/* --- Home: what it leaves out ---------------------------------------------- */

.leftout { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 900px) { .leftout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

.nots { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.nots li { display: grid; gap: .2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.nots strong { font-size: 1.1rem; }
.nots span { color: var(--ink-soft); max-width: 52ch; }

.switching {
  margin: 2rem 0 0; padding: 1.1rem 1.25rem; max-width: 44ch;
  background: var(--brand-tint); border-radius: 14px;
}

/* --- The closing call to action -------------------------------------------- */

.cta { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.cta-bubble { display: grid; gap: 1.5rem 3rem; align-items: end; }
@media (min-width: 860px) { .cta-bubble { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.cta-bubble h2 {
  margin: 0; max-width: 13ch;
  font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: var(--bubble-ink);
}
.cta-side p { margin: 0 0 1.25rem; color: var(--bubble-soft); max-width: 36ch; }

/* --- Footer ---------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; font-size: .92rem; color: var(--ink-soft); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem 3rem; }
.footer-brand p { margin: .8rem 0 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-nav a { color: var(--ink-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.footer-fine { flex-basis: 100%; margin: 0; color: var(--ink-faint); }

/* --- Features ---------------------------------------------------------------- */

.page-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
.page-hero h1 {
  margin: 0 0 1.2rem; max-width: 13ch;
  font-size: clamp(2.5rem, 6.6vw, 5rem); font-weight: 800;
  line-height: .96; letter-spacing: -.045em;
}

.chapters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.chapters a {
  padding: .42rem .95rem;
  font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-pill);
}
.chapters a:hover { background: var(--paper-sunken); color: var(--ink); }

.chapter { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--rule); scroll-margin-top: 72px; }

.spec { display: grid; gap: 1.6rem 2.5rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
@media (min-width: 700px)  { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec dt { margin-bottom: .3rem; font-weight: 700; }
.spec dd { margin: 0; color: var(--ink-soft); }

.shots-row { display: grid; gap: 2.5rem 2rem; align-items: start; }
@media (min-width: 860px) { .shots-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.shots-row + .shots-row, .browser + .shots-row, .shots-row + .browser { margin-top: clamp(2rem, 4vw, 3rem); }

/* The embed, switched between in the page and in a corner with two radio buttons and
   no script: :has() shows the chosen screenshot and what is true of it. A browser
   without :has() shows the page one only. The code itself is not shown here, on
   purpose (2026-09-13): it is for the survey's page in the console. */
.embed-demo { display: grid; gap: 2rem 3rem; align-items: start; }
@media (min-width: 980px) { .embed-demo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
@media (min-width: 980px) { .embed-side { padding-top: 3.6rem; } }

.embed-switch {
  display: inline-flex; gap: 2px; margin: 0 0 1rem; padding: 4px;
  background: var(--paper-sunken); border: 0; border-radius: var(--radius-pill);
}
.embed-switch input { position: absolute; opacity: 0; pointer-events: none; }
.embed-switch label {
  margin: 0; padding: .45rem 1.05rem;
  font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  border-radius: var(--radius-pill); cursor: pointer;
}
.embed-switch input:checked + label { color: var(--ink); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule-strong); }
.embed-switch input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

.for-corner { display: none; }
.embed-demo:has(#embed-corner:checked) .for-page { display: none; }
.embed-demo:has(#embed-corner:checked) .for-corner { display: block; }
.embed-facts { margin: 0; padding: 0; list-style: none; }
.embed-facts li { padding: .8rem 0; color: var(--ink-soft); border-top: 1px solid var(--rule); }
.embed-facts strong { color: var(--ink); }

.partner { display: flex; gap: 1rem; align-items: flex-start; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.25rem 1.35rem; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 14px; }
.partner img { flex: none; width: 44px; height: 44px; }
.partner p { margin: 0; color: var(--ink-soft); }
.partner strong { color: var(--ink); }

/* --- Pricing ---------------------------------------------------------------- */

.cur-usd { display: none; }
[data-currency="usd"] .cur-eur { display: none; }
[data-currency="usd"] .cur-usd { display: inline; }

/* Three plans, joined into one strip on a wide screen, with the recommended one in
   the middle standing a little proud of the others in forest. */
.plans { display: grid; gap: 1rem; margin-top: 1rem; }
.plan {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: 20px;
}
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.plan-name { margin: 0; font-size: 1.2rem; }
.plan-size { margin: .35rem 0 0; font-weight: 600; }
.plan-day { margin: .1rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.plan-price {
  margin: 2.25rem 0 .1rem;
  font-size: clamp(3.2rem, 6vw, 4.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.plan-per { margin: 0 0 1.75rem; color: var(--ink-soft); }
.plan .btn { margin-top: auto; }

.plan-mid { color: var(--forest-ink); background: var(--forest); border-color: var(--forest); }
.plan-mid .plan-day, .plan-mid .plan-per { color: var(--forest-soft); }
.plan-mid .tag { color: var(--brand-ink); background: var(--brand-fill); }

@media (min-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
  .plan:first-child { border-right: 0; border-radius: 20px 0 0 20px; }
  .plan:last-child  { border-left: 0;  border-radius: 0 20px 20px 0; }
  .plan-mid { position: relative; z-index: 1; margin-block: -1.25rem; padding-block: calc(clamp(1.5rem, 3vw, 2.25rem) + 1.25rem); }
}

/* The plans follow the headline closely: the page is about them. */
.page-hero + .section { padding-top: clamp(1.5rem, 3.5vw, 2.75rem); }

.included { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: 1.25rem 3rem; }
@media (min-width: 900px) { .included { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.included h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ticks { margin: 0; padding: 0; list-style: none; columns: 2 15rem; column-gap: 2.5rem; }
.ticks li { position: relative; break-inside: avoid; padding: .6rem 0 .6rem 1.7rem; border-bottom: 1px solid var(--rule); }
.ticks li::before {
  content: ""; position: absolute; left: .1rem; top: 1rem;
  width: .8rem; height: .42rem;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.price-fine { margin: 2rem 0 0; font-size: .92rem; color: var(--ink-soft); }
/* Past the largest plan, under the three: Bellbee's line. Clear of the middle plan, which
   hangs 1.25rem below the others on a wide screen. */
.plans-more { margin: clamp(2rem, 4vw, 2.75rem) 0 0; color: var(--ink-soft); }

.faq { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 900px) { .faq { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list details:first-child { border-top: 1px solid var(--rule); }
.faq-list summary {
  position: relative; padding: 1.1rem 2.25rem 1.1rem 0;
  font-size: 1.05rem; font-weight: 600;
  list-style: none; cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: .55rem; height: .55rem; margin-top: -.4rem;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .15s;
}
.faq-list details[open] summary::after { transform: translateY(.25rem) rotate(-135deg); }
.faq-list details p { margin: 0 0 1.2rem; color: var(--ink-soft); }

/* --- Long-form pages -------------------------------------------------------- */

/* The terms and privacy notice, as Bellbee's: a section's heading and a line under it on
   the left, the text on the right, stacked on a phone. The lime bar over each heading is
   a fill, as lime always is. */
.sheet { display: grid; gap: 1.5rem clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .sheet { grid-template-columns: minmax(0, 25ch) minmax(0, 1fr); }
}
.sheet-head h1 { margin: 0; font-size: clamp(2rem, 3.8vw, 2.8rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.sheet-head h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.sheet-head h2::before {
  content: ""; display: block;
  width: 34px; height: 3px; border-radius: 2px;
  margin-bottom: .95rem;
  background: var(--brand-fill);
}
.sheet-head p { margin: .7rem 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 34ch; }

.prose { max-width: var(--measure); }
.prose h3 { margin: 2rem 0 .5rem; }
.prose h3:first-child { margin-top: 0; }
.prose li { margin-bottom: .4em; }