/* ==========================================================================
   Butler — public pages, plus sign in

   The home, features and pricing pages, the header and footer, the sign-in
   sheet and long-form pages, in the same stationery as everything else: paper,
   hairlines, the serif for headings. These pages must render fully without
   JavaScript, so there is no state here.

   The public pages spend their boldness in one place: the product on a field
   of butter under the home page's headline. Everything else is paper and rules,
   so the screenshots do the talking.

   Screenshots are real screens of the running app, never drawn: taken with
   Playwright against `npm run mock`, light and dark, and saved as WebP in
   assets/images/screens/ (phones 780 wide, tablets 1600, the console 1800).
   Retake them when a screen they show changes. screens.njk puts them in a frame.
   ========================================================================== */

:root {
  /* The closing band is the one dark surface on the public pages. */
  --band-ink:      #1d1c1a;
  --band-ink-text: #f6f3ec;
  --band-ink-soft: rgba(246, 243, 236, .72);

  /* The field of butter behind the product on the home page, and the words on it.
     In dark mode it is a muted gold, still with ink on it: the one bold thing stays
     bold, and the devices cover most of it, so it does not glare. */
  --stage:         var(--brand-fill);
  --stage-ink:     var(--brand-ink);
  /* A device's edge. In dark mode it has to be lighter than the page to be seen. */
  --bezel:         #1d1c1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --band-ink:      #0d0c0b;
    --band-ink-text: #ece8df;
    --band-ink-soft: rgba(236, 232, 223, .7);
    --stage:         #c9a642;
    --stage-ink:     #1d1c1a;
    --bezel:         #3b3831;
  }
}

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

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  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: 1.35rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
/* `.site-nav a` outranks the button classes, so they are restated here. */
.site-nav .btn,
.site-nav .btn:hover { color: var(--ink); }
.site-nav .btn-primary,
.site-nav .btn-primary:hover { color: var(--brand-ink); }
.js-auth-links { display: flex; align-items: center; gap: .6rem; }
/* Nothing in the bar may wrap or be squeezed: a two-line "Sign in" or a brand run
   into the links is what a phone shows otherwise. */
.site-header .brand, .site-nav a { white-space: nowrap; flex: none; }

/* On a phone the trial button steps out (every page has its own further down), and
   the brand and the gaps get smaller so Features, Pricing and Sign in fit on one line
   from 360px up. */
@media (max-width: 700px) {
  .site-header .wrap { gap: .75rem; }
  .site-header .brand { font-size: 1.2rem; gap: .6rem; }
  .site-nav { gap: .9rem; }
  .site-nav a { font-size: .9rem; }
  .site-nav .btn-sm { padding: .36em .65em; }
  .site-nav .nav-collapse,
  .site-nav .nav-trial { display: none; }
}
/* The narrowest phones keep the bee and lose the name, which stays for a screen reader. */
@media (max-width: 350px) {
  .site-header .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* --- Shared type ---------------------------------------------------------- */

.lede { font-size: clamp(1.05rem, 1.9vw, 1.2rem); color: var(--ink-soft); max-width: 48ch; }

/* A section's own heading. One size for all of them, so the page reads as one
   document and the home page's headline stays the only large thing. */
.story-head h2, .fit-head h2, .leftout-head h2, .setup-copy h2, .team-copy h2,
.owner-head h2, .chapter-head h2, .faq-grid h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.04; letter-spacing: -.025em;
  margin: 0;
}

/* --- Hero (404 and long-form pages) --------------------------------------- */

.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.hero h1 {
  font-size: clamp(2.4rem, 5.8vw, 3.9rem);
  max-width: 15ch; line-height: 1.04; letter-spacing: -.02em;
}
.hero .lede { margin-top: 1.1rem; }
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 2rem; }

.hero-tight { padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.75rem, 3.5vw, 2.5rem); }
.hero-tight h1 { font-size: clamp(2rem, 3.8vw, 2.8rem); max-width: none; }

.section { padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--rule); }

/* --- Devices ---------------------------------------------------------------
   The frames around a screenshot, sized off the device's own width so a phone
   looks the same at 120px as at 320px. Flat: an ink edge, no shadow.

   The device is the size container and the <picture> inside it is the edge:
   container units on the container itself would measure the viewport instead.
   ------------------------------------------------------------------------ */

.device { container-type: inline-size; position: relative; }
.device picture { display: block; }
.device img { display: block; width: 100%; height: auto; }

.device-phone picture {
  padding: 3.4cqi;
  background: var(--bezel);
  border-radius: 14cqi;
}
.device-phone img { border-radius: 10.6cqi; }

.device-tablet picture {
  padding: 2.1cqi;
  background: var(--bezel);
  border-radius: 3.6cqi;
}
.device-tablet img { border-radius: 1.6cqi; }

.device-browser {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; justify-content: center;
  height: 2.1rem;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--rule);
}
.browser-url {
  font-size: .72rem; color: var(--ink-soft);
  padding: .12rem .9rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

figure { margin: 0; }
figcaption { margin-top: .8rem; font-size: .88rem; color: var(--ink-soft); }

/* --- Home: headline and stage -------------------------------------------- */

.hero-home { padding-top: clamp(2.5rem, 6vw, 5rem); }
.hero-copy { display: grid; gap: 1.5rem 3rem; align-items: end; }
@media (min-width: 900px) {
  .hero-copy { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.hero-home h1 {
  margin: 0;
  font-size: clamp(3.1rem, 9.4vw, 7rem);
  line-height: .92; letter-spacing: -.04em;
}
.hero-side .lede { margin: 0; }
.hero-note { margin: .9rem 0 0; font-size: .875rem; color: var(--ink-soft); }

/* The tablet on the right, the phone overlapping it at the front left, and the
   butter starting a quarter of the way down so both straddle its edge. */
.hero-stage {
  position: relative; isolation: isolate;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.hero-stage::before {
  content: ""; position: absolute; z-index: -1;
  inset: 24% 0 0 0;
  background: var(--stage);
}
.stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}
.stage .device-tablet { grid-column: 3 / 13; grid-row: 1; }
.stage .device-phone {
  grid-column: 1 / 5; grid-row: 1;
  margin-bottom: -7%; z-index: 1;
  max-width: 290px;
}
.stage-cap {
  grid-row: 2; margin: 1.1rem 0 0;
  font-size: .9rem; font-weight: 500; color: var(--stage-ink);
}
.stage-cap-phone  { grid-column: 1 / 7; margin-top: calc(1.1rem + 7%); }
.stage-cap-tablet { grid-column: 7 / 13; text-align: right; }
@media (max-width: 700px) {
  .stage .device-tablet { grid-column: 2 / 13; }
  .stage .device-phone  { grid-column: 1 / 6; }
}

/* The page's one moment of motion: the guest's phone arrives in front of the desk. */
@media (prefers-reduced-motion: no-preference) {
  .stage .device-phone { animation: stage-rise .9s cubic-bezier(.2, .7, .2, 1) .2s both; }
}
@keyframes stage-rise {
  from { opacity: 0; transform: translateY(2.5rem); }
}

/* --- Home: one request, by the clock -------------------------------------- */

.story { padding-block: clamp(4rem, 9vw, 7rem); }
.story-head { display: grid; gap: 1rem 3rem; align-items: end; }
.story-head p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
@media (min-width: 900px) {
  .story-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* A step per column, the times on one continuous rule: no column gap, so the
   rule runs unbroken and each step pads its own right side. */
.story-steps {
  list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 3rem;
}
@media (min-width: 1000px) {
  .story-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.story-step { padding-right: clamp(1rem, 2.5vw, 2rem); }
.story-time {
  position: relative; margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.story-time::before {
  content: ""; position: absolute; left: 0; top: -5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand);
}
.story-step .device-phone { max-width: 240px; margin: 1.4rem 0 1.3rem; }
.story-step h3 { margin: 0 0 .35rem; }
.story-step p { margin: 0; font-size: .95rem; color: var(--ink-soft); max-width: 30ch; }
.story-step .story-time { color: var(--ink); max-width: none; }
.story-end .story-done {
  margin: 1.4rem 0 1rem;
  font-family: var(--font-serif); color: var(--ink);
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.03em;
}

/* --- Home: not a hotel ------------------------------------------------------
   Six kinds of place, each with where its codes go and what gets asked there.
   ------------------------------------------------------------------------ */

.fit { padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--rule); }
.fit-head { display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.fit-head p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
@media (min-width: 900px) {
  .fit-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.fit-list { display: grid; gap: 0 2.5rem; margin: 0; }
@media (min-width: 700px)  { .fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fit-list > div { padding: 1.1rem 0 1.5rem; border-top: 1px solid var(--rule-strong); }
.fit-list dt { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2; margin-bottom: .4rem; }
.fit-list dd { margin: 0; color: var(--ink-soft); max-width: 36ch; }

/* --- Home: what we left out ------------------------------------------------ */

.leftout {
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background: var(--paper-sunken);
  border-block: 1px solid var(--rule);
}
.leftout-grid { display: grid; gap: 2rem 4rem; }
@media (min-width: 900px) {
  .leftout-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.leftout-head p { margin: 1.1rem 0 0; color: var(--ink-soft); max-width: 40ch; }

/* Struck through, in ochre: the list is of things that are not there. */
.leftout-list { margin: 0; border-bottom: 1px solid var(--rule-strong); }
.leftout-list > div {
  display: grid; gap: .3rem 2rem; align-items: baseline;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule-strong);
}
@media (min-width: 700px) {
  .leftout-list > div { grid-template-columns: 14rem minmax(0, 1fr); }
}
.leftout-list dt {
  font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2;
  text-decoration: line-through;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
}
.leftout-list dd { margin: 0; color: var(--ink-soft); }

/* --- Home: setup ---------------------------------------------------------- */

.setup { padding-block: clamp(4rem, 9vw, 7rem); }
.setup-grid { display: grid; gap: 2.5rem 4rem; align-items: start; }
@media (min-width: 1000px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); }
}
.setup-steps { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: step; }
.setup-steps li {
  counter-increment: step;
  position: relative;
  padding: 1.1rem 0 1.2rem 2.75rem;
  border-top: 1px solid var(--rule);
}
.setup-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: .9rem;
  font-family: var(--font-serif); font-size: 1.7rem; line-height: 1;
  color: var(--brand-text);
}
.setup-steps h3 { margin: 0 0 .3rem; }
.setup-steps p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* --- Home: the team ------------------------------------------------------- */

.team { padding-block: clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--rule); }
.team-grid { display: grid; gap: 3rem 4rem; align-items: center; }
@media (min-width: 1000px) {
  .team-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); }
}
.team-copy > p { margin: 1.1rem 0 0; color: var(--ink-soft); max-width: 44ch; }
.facts { margin: 1.75rem 0 0; }
.facts > div { padding: .9rem 0; border-top: 1px solid var(--rule); }
.facts dt { font-weight: 600; }
.facts dd { margin: .15rem 0 0; color: var(--ink-soft); max-width: 44ch; }

.team-devices { position: relative; padding-bottom: 9%; }
.team-devices .device-tablet { width: 88%; margin-left: auto; }
.team-devices .device-phone { position: absolute; left: 0; bottom: 0; width: 27%; }

/* --- Home: the owner ------------------------------------------------------ */

.owner { padding-block: clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--rule); }
.owner-head { display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.owner-head p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
@media (min-width: 900px) {
  .owner-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Closing band -------------------------------------------------------- */

.cta-band {
  background: var(--band-ink);
  color: var(--band-ink-text);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.cta-band h2 {
  color: var(--band-ink-text); max-width: 16ch; margin: 0 0 1rem;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em;
}
.cta-band p { color: var(--band-ink-soft); max-width: 46ch; margin: 0 0 2rem; }

/* --- Features and pricing: page head --------------------------------------- */

.page-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 {
  margin: 0; max-width: 15ch;
  font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1; letter-spacing: -.035em;
}
.page-hero .lede { margin: 1.25rem 0 0; }

.chapter-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: 2rem; }
.chapter-nav a {
  color: var(--ink); text-decoration: none; font-weight: 500;
  padding-bottom: .15rem; border-bottom: 3px solid var(--mark);
}
.chapter-nav a:hover { border-bottom-color: var(--brand); }

/* --- Features: chapters ---------------------------------------------------- */

.chapter { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--rule); scroll-margin-top: 72px; }
.chapter-head { display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.chapter-head p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
@media (min-width: 900px) {
  .chapter-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Three phones side by side; on a phone, a row to swipe through. */
.phones {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem clamp(1.25rem, 4vw, 3.5rem);
  max-width: 920px;
}
@media (max-width: 700px) {
  .phones {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 64%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
  }
  .phones figure { scroll-snap-align: start; }
}

.duo {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem); align-items: end;
}

.pair { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 800px) {
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.spec { display: grid; gap: 0 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: 1100px) { .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec > div { padding: 1rem 0 1.4rem; border-top: 1px solid var(--rule-strong); }
.spec dt { font-weight: 600; margin-bottom: .3rem; }
.spec dd { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.spec + .device { margin-top: clamp(2rem, 4vw, 3rem); }

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

/* Both amounts are in the markup; currency.njk says which one this reader sees. */
.cur-usd { display: none; }
[data-currency="usd"] .cur-usd { display: inline; }
[data-currency="usd"] .cur-eur { display: none; }

.pricing { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.plans { display: grid; gap: 1rem; }
@media (min-width: 800px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.plan {
  display: flex; flex-direction: column;
  padding: 1.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.plan-mid { border-color: var(--brand-edge); box-shadow: inset 0 3px 0 var(--brand-fill); }
.plan-name { margin: 0; font-size: 1.6rem; }
.plan-blurb { margin: .3rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.plan-amount {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 1.5rem 0 1.75rem;
  font-family: var(--font-serif); font-size: 3.2rem; line-height: 1; letter-spacing: -.02em;
}
.plan-per { font-family: var(--font-body); font-size: .9rem; letter-spacing: 0; color: var(--ink-soft); }.plan .btn { margin-top: auto; }

.included {
  display: grid; gap: 1rem 3rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--rule-strong);
}
@media (min-width: 800px) {
  .included { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.included h2 { margin: 0; font-size: 1.6rem; }
.included ul { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 2.5rem; }
.included li { position: relative; padding: .3rem 0 .3rem 1.6rem; break-inside: avoid; }
.included li::before {
  content: ""; position: absolute; left: .15rem; top: .85em;
  width: .7rem; height: .36rem;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.price-fine { margin: 2rem 0 0; font-size: .875rem; color: var(--ink-faint); max-width: 72ch; }
.plans-more { margin: 1rem 0 0; color: var(--ink-soft); }

.contact { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.contact-done { padding-top: clamp(3rem, 7vw, 5rem); }
.done-mark {
  width: 56px; height: 56px; margin: 0 0 1.5rem;
  border: 2px solid var(--done); border-radius: var(--radius-lg);
  display: grid; place-items: center; color: var(--done);
}
.done-mark::before { width: 34px; height: 34px; }

.faq { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }
.faq-grid { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
}
.faq-list { border-bottom: 1px solid var(--rule-strong); }
.faq-list details { border-top: 1px solid var(--rule-strong); }
.faq-list summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-weight: 600;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: .3rem; top: .85rem;
  font-size: 1.35rem; font-weight: 400; line-height: 1.2; color: var(--brand);
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { margin: 0 0 1.25rem; color: var(--ink-soft); }

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

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-sunken);
  padding: 3rem 0 2.5rem; color: var(--ink-soft); font-size: .9rem;
}
.site-footer .wrap { display: grid; gap: 2rem; }
@media (min-width: 700px) {
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr) auto; }
}
.footer-brand p { margin: .75rem 0 0; }
.footer-nav { display: flex; gap: .6rem 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .brand:hover { text-decoration: none; }
.footer-fine {
  grid-column: 1 / -1; margin: 0; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .82rem; color: var(--ink-faint); max-width: 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; }
.auth-aside { margin: 1.25rem 0 0; font-size: .9rem; color: var(--ink-soft); text-align: center; }
.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); }
/* Who an invitation 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);
}
.invite-who .ico { font-size: .9rem; color: var(--ink-soft); }

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

/* The terms and privacy notice: a section's heading and a line under it on the
   left, the text on the right, stacked on a phone. The butter mark over each
   heading is the one under the brand name. */
.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); }
.sheet-head h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.sheet-head h2::before {
  content: ""; display: block;
  width: 34px; height: 3px; border-radius: 2px;
  margin-bottom: .95rem;
  background: var(--mark);
}
.sheet-head p { margin: .7rem 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 34ch; }
.prose h3:first-child { margin-top: 0; }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.5rem; }
.prose li { margin-bottom: .4em; }