/* Cleanavo site styles. Shared by every page so the header, footer and
   palette stay identical across the home page, the inner pages, the invite
   pages and the generated policy and credits pages. Fonts are self-hosted from
   assets/fonts so the site loads nothing from third parties.

   The 2026-10-30 redesign (the founder's mockup, from the V5 concept and the
   live site): Libre Baskerville headings, Poppins text, white and a warm tan
   in alternating sections, a white header, and the one Cleanavo red. No
   coloured dots, no small coloured label above a heading, and no tinted
   shape behind an icon. */

/* ---- fonts ---- */
/* Montserrat Alternates, the face the name "Cleanavo" is set in and nothing else. */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/montserrat-alternates-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Libre Baskerville for headings, Poppins for everything else (both SIL OFL). */
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/libre-baskerville-400.woff2") format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/libre-baskerville-700.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format('woff2'); }

/* ---- tokens ---- */
:root {
  --ink: #1F1D1B;
  --body: #3B3734;
  --muted: #6F6761;
  --faint: #746C65;
  --cream: #FBF6F0;
  --cream-2: #F3EBE2;
  --line: #E6DCD1;
  --hair: #E6DCD1;
  --border: #E6DCD1;
  --border-strong: #D6CBBE;
  --card: #FBF6F0;
  /* The one Cleanavo red. Both apps use this exact value (BRAND_RED); there
     is no darker or lighter red anywhere, so hover states use a lift or a
     ring rather than a second shade. --accent-soft is a tint behind it. */
  --accent: #C93A22;
  --accent-soft: #FBE9E4;
  --green: #22613C;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(31, 29, 27, 0.08);
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px;
  --nav-h: 72px;
  --section: 92px;
  color-scheme: light;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  background: #FFFFFF;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1 0 auto; position: relative; }
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; color: var(--ink); line-height: 1.15; }
h1 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 3vw, 40px); }
h3 { font-size: 21px; }
p { margin: 0; }
.wordmark { font-family: 'Montserrat Alternates', sans-serif; font-weight: 500; letter-spacing: 0; }
/* Every section's content sits in one centred column, 1160px at most, a
   gutter in from the edges on narrower screens. */
.inner { width: min(1160px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.lead { font-size: 19px; color: var(--muted); max-width: 62ch; }
/* A link inside running text: the text's own colour and weight, underlined. */
.text-link, .lead a, .intro a, .card p a, .price-copy a { color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover, .lead a:hover, .intro a:hover, .card p a:hover, .price-copy a:hover { color: var(--accent); }
.icon { width: 24px; height: 24px; color: var(--ink); flex: none; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(201, 58, 34, 0.22);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { color: #FFFFFF; transform: translateY(-1px); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.secondary:hover { color: var(--ink); border-color: var(--ink); }
.btn.light { background: #FFFFFF; color: var(--accent); box-shadow: none; }
.btn.light:hover { color: var(--accent); }
.btn.small { padding: 10px 20px; font-size: 15px; }

/* ---- header (sticky on every page) ----
   White, the red mark and the name in ink; For cleaners as a quiet
   underlined link, then Log in and Sign up. No menu: every other page is
   linked from the footer (SITE_HEADER in scripts/site-page.mjs). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1160px, calc(100% - 2 * var(--gutter)));
  height: var(--nav-h);
  margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 21px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { width: 34px; height: 34px; flex: none; }
.nav-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.nav-cleaners { font-size: 14px; color: var(--muted); border-bottom: 1px dashed var(--muted); }
.nav-cleaners:hover { color: var(--ink); border-color: var(--ink); }
.nav-login { font-size: 15px; font-weight: 500; color: var(--body); }

/* ---- breadcrumbs ----
   Top left of every page but the home page, above the title. */
.crumbs { width: min(1160px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding-top: 22px; font-size: 14px; line-height: 20px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; color: var(--faint); }
.crumbs li + li::before { content: "\203A"; margin: 0 8px; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---- footer ----
   The logo and a line on what Cleanavo is, three columns of links, both apps,
   the platform disclaimer, and a bottom line with the copyright and the
   credits pages. The same on every page (SITE_FOOTER in scripts/site-page.mjs). */
.site-footer { margin-top: auto; padding: 60px 0 36px; background: #FFFFFF; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer .inner { display: flex; flex-direction: column; gap: 32px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr) auto; gap: 32px 48px; align-items: start; }
.site-footer .foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer .brand { font-size: 20px; }
.site-footer .brand img { width: 30px; height: 30px; }
/* Each network's own file and colours (Facebook may only be blue, LinkedIn blue,
   black or white). 28px clears Instagram's minimum, and the gap is its clear space. */
.foot-social { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.foot-social a { display: block; line-height: 0; }
.foot-social img { height: 28px; width: auto; }
.foot-social a:hover img { opacity: 0.8; }
.foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.site-footer .foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.site-footer .foot-col a { overflow-wrap: anywhere; }
.site-footer h2 { margin: 0 0 4px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
/* Both apps, each under who it is for. The badge at 40px keeps Google's clear
   space of a quarter of its height (10px) from the label and the next app. */
.foot-apps { display: flex; flex-direction: column; gap: 14px; }
.foot-apps h2 { margin-bottom: 0; }
.foot-app { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-app span { font-size: 13px; color: var(--muted); }
.site-footer .play-badge { margin: 0; }
.site-footer .play-badge img { height: 40px; }
/* Legal-review §111.2: "prominent", so the footer's own size and a darker colour, not faint. */
.foot-disclaimer { margin: 0; font-size: 14px; color: var(--body); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ---- sections ----
   White and tan alternate down a page: the hero white, the next section tan,
   and so on. The dark testimonial band and the red closing band keep their own. */
section { padding: var(--section) 0; }
.tan { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 680px; margin: 0 auto 54px; text-align: center; }
.section-head .lead { margin: 14px auto 0; }

/* ---- hero (home, and the inner pages that have a picture) ---- */
.hero { padding: 72px 0 60px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
/* On the home page the keyword line is the h1 (what search reads) and the big
   line under it is display text. */
.hero h1.kicker { margin-bottom: 14px; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--muted); }
.display { font-family: var(--serif); font-size: clamp(34px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--ink); }
.hero .lead { margin: 22px 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
/* A plain text link with an arrow beside a button (the home hero's See pricing). */
.see-link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.see-link svg { width: 18px; height: 18px; transition: transform 0.15s; }
.see-link:hover { color: var(--ink); }
.see-link:hover svg { transform: translateX(3px); }
.hero-note { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.hero-img { border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; background: var(--cream-2); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.trust div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); font-size: 14.5px; font-weight: 500; }
.trust .icon { width: 22px; height: 22px; }

/* ---- three steps ---- */
.how { padding-top: 64px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #FFFFFF; box-shadow: var(--shadow); }
.step .pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); }
.step .pic img { width: 100%; height: 100%; object-fit: cover; }
.num { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-size: 15px; font-weight: 700; box-shadow: 0 4px 12px rgba(31, 29, 27, 0.18); }
.step .txt { padding: 26px 26px 30px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--muted); }

/* ---- pricing: the words beside the estimator ---- */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.price-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 22px 0 14px; font-family: var(--serif); font-size: 64px; font-weight: 700; line-height: 1; color: var(--ink); }
.price-big small { font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--muted); }
.price-list { list-style: none; display: grid; gap: 14px; margin: 26px 0 0; padding: 0; }
.price-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.price-list .icon { width: 22px; height: 22px; margin-top: 2px; }

/* The estimator (assets/estimate.js): bedrooms and bathrooms, the total at the
   standard rate, its three lines, and the button to sign-up. Its amounts sit
   in divs, not a p, li or table: legal-review's pricing-page-numbers reads
   those, and the service fee is on its own line here regardless. */
.est { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: #FFFFFF; }
.tan .est { background: #FFFFFF; }
.est h3 { margin-bottom: 12px; font-family: var(--sans); font-size: 17px; font-weight: 600; }
.est-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.est-row span:first-child { font-weight: 500; }
.stepper { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; }
.stepper button { width: 42px; height: 40px; border: 0; background: transparent; font: inherit; font-size: 20px; color: var(--ink); cursor: pointer; }
.stepper button:hover { background: var(--cream-2); }
.stepper button:disabled { opacity: 0.35; cursor: default; background: transparent; }
.stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stepper b { min-width: 34px; text-align: center; font-weight: 600; }
.est-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 22px; }
.est-total .amt { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--ink); }
.est-total .lbl { font-size: 14px; color: var(--muted); }
.est-lines { display: grid; gap: 4px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.est-lines div { display: flex; justify-content: space-between; }
.est .btn { width: 100%; margin-top: 22px; }
.fine { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---- why, cards ---- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.why .lead { margin-top: 16px; }
.why-img { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; background: var(--cream-2); }
.why-img img { width: 100%; height: 100%; object-fit: cover; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.why .cards { margin-top: 48px; }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.tan .card { background: #FFFFFF; }
.card .icon { width: 28px; height: 28px; margin-bottom: 16px; }
.card h3 { margin-bottom: 8px; font-size: 19px; }
.card p { font-size: 15.5px; color: var(--muted); }

/* ---- testimonial band ---- */
.band { padding: 84px 0; background: var(--ink); color: #F4EDE7; }
.band .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.band-line { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; color: #FFFFFF; }
.band-sub { margin-top: 22px; font-size: 15px; color: #C9BFB5; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stat { padding: 24px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; }
.stat b { display: block; font-family: var(--serif); font-size: 34px; line-height: 1; color: #FFFFFF; }
.stat span { display: block; margin-top: 8px; font-size: 14px; color: #C9BFB5; }

/* ---- questions ----
   The question on the left, an arrow on the right, a line between rows. The
   arrow turns over and the answer slides open in the same 0.3s
   (assets/site.js). A <details>, so every answer is in the HTML whether it is
   open or not. Five show; View more slides open the rest. */
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.qa { padding: 20px 0; border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.qa summary h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.4; }
.qa summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 4px 0 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform 0.3s ease; }
.qa.is-open summary::after { transform: rotate(225deg); }
/* Without the script the rows still open (the browser does it), the arrow
   turns on [open], and the extra questions are simply shown. */
html:not(.js) .qa[open] summary::after { transform: rotate(225deg); }
html:not(.js) .more-qs { height: auto; }
html:not(.js) .view-more { display: none; }
.qa .ans { overflow: hidden; transition: height 0.3s ease; }
.qa p { padding-top: 12px; font-size: 15.5px; color: var(--muted); }
.qa p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.qa p a:hover { color: var(--accent); }
.more-qs { overflow: hidden; height: 0; transition: height 0.3s ease; }
.view-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; }
.view-more::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform 0.3s ease; }
.view-more[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(225deg); }
.view-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* ---- the red closing band ---- */
.final { padding: 96px 0; background: var(--accent); color: #FFFFFF; text-align: center; }
.final h2 { color: #FFFFFF; }
.final p { margin: 16px auto 32px; max-width: 62ch; font-size: 18px; color: #FFFFFF; }

/* ---- inner pages: /pricing, /cleaners, /guides/*, /join ----
   The hero white, then sections alternating tan and white. Each section's
   title over its text in one reading column, left-aligned. */
.page-hero { padding: 40px 0 72px; }
/* With no breadcrumb above it (the cleaners page, 2026-10-30), the hero takes the
   breadcrumb's room itself, so the heading sits where it did. */
.page-hero.no-crumbs { padding-top: 82px; }
.page-hero.centered .inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 820px; text-align: center; }
.page-hero.centered .lead { margin: 0 auto; }
.join-section .inner { max-width: 820px; display: flex; flex-direction: column; gap: 18px; }
.join-section h2 { margin-bottom: 8px; }
.join-section.wide .inner { max-width: 1160px; }
.intro { font-size: 16.5px; line-height: 1.65; color: var(--body); }
.price-notes { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-left: 20px; }
.price-notes li { font-size: 16.5px; line-height: 1.6; color: var(--body); }
.price-notes li::marker { color: var(--muted); }
.price-notes strong, .intro strong { color: var(--ink); font-weight: 600; }
.price-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.5; background: #FFFFFF; border-radius: 16px; overflow: hidden; }
.price-table th, .price-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table thead th { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.price-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.price-table td { color: var(--body); }
.price-table td:nth-child(n+3) { color: var(--ink); font-weight: 600; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }

/* Who each app is for, above its Google Play badge. */
.app-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.app-audience { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* Google's "Get it on Google Play" badge, used as Google ships it
   (assets/google-play-badge.svg, unaltered). Its rules: at least 28px tall,
   clear space of a quarter of its height on every side, a solid background,
   never recoloured, cropped or rearranged. */
.play-badge { display: inline-flex; align-self: flex-start; margin: 0 14px 14px 0; }
.play-badge img { display: block; height: 56px; width: auto; }
.page-hero.centered .play-badge { align-self: center; margin: 4px 14px 14px; }

/* ---- invite pages (/join/host, /join/cleaner) ----
   The code with a line under it, letter-spaced, and a copy icon beside it;
   the buttons and the Play badge centred under it. */
.invite-code-row { position: relative; display: flex; justify-content: center; width: 100%; max-width: min(320px, calc(100% - 104px)); margin-top: 12px; }
.invite-code { width: 100%; padding: 0 0 12px; border-bottom: 2px solid var(--border-strong); font-family: var(--sans); font-size: clamp(30px, 9vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: 0.28em; text-indent: 0.28em; text-align: center; white-space: nowrap; color: var(--ink); }
.invite-code-row .copy-icon { position: absolute; left: 100%; bottom: 10px; margin-left: 8px; }
.invite-code.empty { white-space: normal; font-size: 16px; font-weight: 400; letter-spacing: 0; text-indent: 0; color: var(--body); border-bottom: 0; }
.copy-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--body); cursor: pointer; }
.copy-icon svg { width: 22px; height: 22px; }
.copy-icon:hover { color: var(--accent); }
.copy-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.invite-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 320px; margin-top: 12px; }
.invite-actions .btn { width: 100%; }
.join-section .fine { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.join-section .fine a { color: var(--body); text-decoration: underline; text-underline-offset: 2px; }

/* ---- /join (the older invite page, kept until the apps' links move) ---- */
.code-card { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #FFFFFF; text-align: left; }
.code-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.code { flex: 1 1 auto; min-width: 0; padding: 12px 18px; border-radius: 14px; background: var(--cream); font-size: 26px; font-weight: 700; letter-spacing: 2px; color: var(--ink); overflow-wrap: anywhere; }
.code.empty { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--body); }
.copy { padding: 12px 20px; font-size: 15px; }
.copy.done { background: var(--green); }
.code-card p { font-size: 14px; line-height: 1.6; color: var(--body); }
.code-card p a { color: inherit; text-decoration: underline; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
.panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #FFFFFF; }
.panel.emphasis { border: 2px solid var(--accent); padding: 27px; }
.panel.muted { opacity: 0.6; }
.panel .who { font-size: 13px; font-weight: 600; color: var(--muted); }
.panel h3 { font-size: 24px; }
.panel p, .panel li { font-size: 15px; line-height: 1.6; color: var(--body); }
.panel strong { color: var(--ink); }
.panel ol { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; }
.panel .fine { font-size: 13px; line-height: 1.55; color: var(--muted); }
.get { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-top: 4px; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 8px; }
.badges .app-col { align-items: center; }
.badges .play-badge { align-self: center; margin: 0 14px 14px; }
.join-section .aside { font-size: 14px; color: var(--body); text-align: center; }
.join-section .aside a { color: inherit; text-decoration: underline; }

/* ---- guides (/guides/turnover-checklist) ---- */
.byline { margin-top: 16px; font-size: 14px; color: var(--muted); }
/* The checklist rows as the host app's ChecklistView draws them: a row per
   step with a bare icon, "Default" in small type on the standard steps, lines
   between, and the additional instructions as the last row. */
.cl-steps { padding: 6px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #FFFFFF; }
.cl-step { padding: 18px 0; border-top: 1px solid var(--line); }
.cl-step:first-child { border-top: 0; }
.cl-step h3 { display: flex; align-items: center; gap: 11px; font-family: var(--sans); font-size: 17px; font-weight: 600; }
/* Bullets sit under the label, not under the icon: 18px icon + 11px gap. */
.cl-step ul { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0 29px; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.cl-step p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.default { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--faint); }
.step-icon { flex: none; width: 18px; height: 18px; background: var(--ink); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.subhead { margin-top: 20px; font-size: 22px; }
.plain-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.plain-list strong, .included strong { color: var(--ink); font-weight: 600; }
.included { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.included li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.included .step-icon { margin-top: 5px; }

/* ---- legal pages: the six policies (scripts/build-policies.mjs) and the two
   credits pages (scripts/build-credits.mjs) ----
   The structure long legal documents use elsewhere: numbered headings in
   sentence case, stepped by level, and body text at 16px. Lists are lettered
   clauses, (a), (b), drawn with their letter in a hanging indent so a
   cross-reference can be found on the page. Bold, italic and code are drawn
   plain -- the renderer does not emit them -- and the only thing that stands
   out in the text is a link. */
.legal { width: 100%; max-width: 760px; margin: 0 auto; padding: 48px var(--gutter) 96px; }
.legal h1, .legal h2, .legal h3, .legal h4 { color: var(--ink); line-height: 1.3; scroll-margin-top: calc(var(--nav-h) + 16px); }
.legal h1 { margin-bottom: 20px; font-size: 32px; }
.legal h2 { margin: 44px 0 12px; font-size: 21px; }
.legal h3, .legal h4 { margin: 28px 0 8px; font-family: var(--sans); font-size: 17px; font-weight: 600; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--body); font-weight: 400; }
.legal p { margin-bottom: 14px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal li > ul { margin: 6px 0 0; }
.legal ol.clauses { list-style: none; padding-left: 0; }
.legal ol.clauses > li { position: relative; padding-left: 2.4em; }
.legal .clause-mark { position: absolute; left: 0; top: 0; }
.legal a { color: var(--accent); font-weight: 400; }
.legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.legal p, .legal li, .legal td { overflow-wrap: break-word; }
.legal .table-wrap { overflow-x: auto; margin: 4px 0 16px; border: 0; border-radius: 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.legal th { text-align: left; font-size: 14px; font-weight: 600; color: var(--ink); }
.legal th, .legal td { padding: 9px 12px 9px 0; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 140px; }
.legal tbody tr:last-child td { border-bottom: 0; }
/* The credits pages: a licence's own text keeps its line breaks. */
.legal pre { margin: 6px 0 22px; font: inherit; font-size: 12.5px; line-height: 1.55; color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.callout { margin-bottom: 8px; padding: 22px 24px; border-radius: 20px; background: var(--cream); }
.callout p:last-child { margin-bottom: 0; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .trust { grid-template-columns: 1fr 1fr; }
  .cards.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  :root { --section: 72px; }
  .hero-grid, .price-grid, .faq-grid, .why-grid, .band .inner { grid-template-columns: 1fr; gap: 40px; }
  .cards, .steps { grid-template-columns: 1fr 1fr; }
  .foot-top { grid-template-columns: minmax(0, 1fr) auto; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --section: 60px; --nav-h: 64px; }
  body { font-size: 16px; }
  .steps, .cards, .cards.four, .trust, .stats { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 40px; }
  .brand { font-size: 19px; }
  .brand img { width: 30px; height: 30px; }
  .nav-actions { gap: 14px; }
  .nav-login { display: none; }
  .price-big { font-size: 52px; }
  .est { padding: 20px; }
  .band { padding: 64px 0; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .cl-steps { padding: 4px 18px; }
  .legal { padding-top: 36px; padding-bottom: 72px; }
  .code { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .qa .ans, .more-qs, .qa summary::after, .view-more::after, .btn { transition: none; }
}
/* A generated document: the trail over its text column. */
.document .crumbs { width: min(760px, calc(100% - 2 * var(--gutter))); }
/* Inner pages' heroes: the title a step smaller than the home page's display line. */
.page-hero h1 { font-size: clamp(32px, 3.8vw, 48px); }
.page-hero .lead { margin-top: 22px; }
.page-hero .play-badge { margin-top: 28px; }
/* /join (kept until the apps' share links move): its own hero, centred. */
.join-hero { padding: 40px 0 72px; }
.join-hero .inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 820px; text-align: center; }
.join-hero .lede { font-size: 19px; color: var(--muted); max-width: 62ch; }
.join-hero .play-badge { align-self: center; margin: 4px 14px 14px; }