/* static-rhythm.css: the section rhythm on the last legacy static pages
 * (2026-10-05): /privacy, /terms, /cookies, /how-it-works, /how-we-work,
 * /checklist. Linked by static.tsx right after the page's own legacy sheet
 * for the slugs in RHYTHM_PAGES, so their markup and scripts stay as they
 * are (the checklist's email gate, the forms) and only the look changes.
 *
 * The rhythm, as everywhere else: a dark top, reading on white, the
 * between sections on sand, the closing ask on dark, then the one footer.
 * Sora 400 headlines in ink or cream, DM Sans text (how-we-work was set in
 * Inter), amber only on links, small labels and the button arrow.
 *
 * Every selector starts `html body`, which outranks the legacy sheets'
 * own rules (each carries its own :root, reset and body{}). Colours are
 * the brand's literal values (theme.css / the brand sheet). No :root,
 * reset or bare body{} here.
 */

html body { font-family: 'DM Sans', system-ui, sans-serif; }

/* ═══ /privacy, /terms, /cookies ═══════════════════════════════════════ */
html body #legal-hero { background: #14110E; border-bottom: 0; padding: 8.5rem var(--gutter, 2.5rem) 3.5rem; }
html body #legal-hero .hero-inner { max-width: 760px; margin: 0 auto; }
html body #legal-hero .eyebrow { color: #A9A195; font: 400 15px/1.4 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; }
html body #legal-hero h1 {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #FFFFFF;
}
html body #legal-hero .hero-sub { color: #D9D2C6; font-size: 1.1rem; }
html body #legal-content { background: #FFFFFF; color: #36312B; }
html body .legal-inner h2 { font-family: 'Sora', sans-serif; font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 1.75rem); letter-spacing: -0.025em; color: #16130F; }
html body .legal-inner h3 { font-family: 'Sora', sans-serif; font-weight: 600; color: #16130F; }
html body .legal-inner p,
html body .legal-inner li { color: #36312B; }
html body .legal-inner strong { color: #16130F; }
html body .legal-inner a { color: #16130F; text-decoration: underline; text-decoration-color: #D97706; text-underline-offset: 3px; }
html body .legal-inner a:hover { color: #A44A08; }
html body .legal-effective { color: #5A534A; }
html body .legal-inner ul li::marker { color: #A44A08; }
html body .legal-inner table th,
html body .legal-inner table td { border-color: #E2DBCF; color: #36312B; }
html body .legal-inner table th { color: #16130F; }

/* ═══ /how-it-works ════════════════════════════════════════════════════ */
/* Content lines up with the 1240px column the rebuilt pages use. */
html body .hiw-hero { background: #14110E; text-align: left; padding: 8.5rem max(2.5rem, calc((100vw - 1240px) / 2)) 4.5rem; }
html body .hiw-eyebrow { display: block; color: #A9A195; font: 400 15px/1.4 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; }
html body .hiw-title {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #FFFFFF;
  max-width: 16em;
  text-wrap: balance;
}
html body .hiw-subtitle { color: #D9D2C6; max-width: 40em; margin-left: 0; margin-right: 0; font-size: 1.12rem; }
html body .hiw-title { margin-left: 0; margin-right: 0; }
html body .hiw-stat-strip { justify-content: flex-start; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1.75rem; }
html body .hiw-stat-num { font-family: 'Sora', sans-serif; font-weight: 400; color: #FFFFFF; letter-spacing: -0.03em; }
html body .hiw-stat-lbl { color: #A9A195; }

html body .hiw-steps { background: #FFFFFF; color: #16130F; }
/* Left-aligned like every rebuilt page; the legacy sheet centred these. */
html body .hiw-steps-header,
html body .hiw-faq-header { text-align: left; }
html body .hiw-steps-header p { margin-left: 0; }
html body .hiw-cta { text-align: left; padding-left: max(2.5rem, calc((100vw - 1240px) / 2)); padding-right: max(2.5rem, calc((100vw - 1240px) / 2)); }
html body .hiw-cta p { margin-left: 0; }
html body .hiw-steps-header h2 { font-family: 'Sora', sans-serif; font-weight: 400; letter-spacing: -0.03em; color: #16130F; }
html body .hiw-steps-header p { color: #36312B; }
html body .hiw-steps-header a { color: #16130F; text-decoration: underline; text-decoration-color: #D97706; text-underline-offset: 3px; }
html body .hiw-step { border-top-color: #E2DBCF; }
html body .hiw-step-num { font-family: 'Sora', sans-serif; font-weight: 400; color: #A44A08; }
html body .hiw-step-when { color: #5A534A; letter-spacing: 0.04em; }
html body .hiw-step-title { font-family: 'Sora', sans-serif; font-weight: 400; color: #16130F; letter-spacing: -0.02em; }
html body .hiw-step-desc,
html body .hiw-step-list li { color: #36312B; }
html body .hiw-step-list li::before { color: #A44A08; background: none; }

html body .hiw-faq { background: #ECE5D9; color: #16130F; }
html body .hiw-faq-header h2 { font-family: 'Sora', sans-serif; font-weight: 400; letter-spacing: -0.03em; color: #16130F; }
html body .hiw-faq-item { border-color: #D9D1C4; }
html body .hiw-faq-q { color: #16130F; font-family: 'Sora', sans-serif; font-weight: 500; }
html body .hiw-faq-a { color: #36312B; }

html body .hiw-cta { background: #14110E; }
html body .hiw-cta h2 { font-family: 'Sora', sans-serif; font-weight: 400; letter-spacing: -0.03em; color: #FFFFFF; }
html body .hiw-cta p { color: #D9D2C6; }
html body .hiw-cta-btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: #F7F3EC;
  color: #16130F;
  border: 0;
  box-shadow: none;
  font: 600 16px/1 'DM Sans', sans-serif;
  transform: none;
}
html body .hiw-cta-btn:hover { background: #FFFFFF; color: #16130F; transform: none; box-shadow: none; }

/* ═══ /how-we-work ═════════════════════════════════════════════════════ */
html body #hww-hero { background: #14110E; color: #F7F3EC; padding: 8.5rem var(--gutter, 1.5rem) 3.5rem; }
html body .hww-in { max-width: var(--max-w, 760px); margin: 0 auto; }
html body #hww-hero .breadcrumb { color: #A9A195; margin-bottom: 1.5rem; }
html body #hww-hero .breadcrumb a { color: #A9A195; }
html body #hww-hero .breadcrumb a:hover { color: #FFFFFF; }
html body #hww-hero .article-header { margin: 0; padding: 0; border: 0; }
html body #hww-hero .eyebrow { color: #F59E0B; background: none; padding: 0; letter-spacing: 0.06em; }
html body #hww-hero h1 {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #FFFFFF;
}
html body #hww-hero .lede { color: #D9D2C6; }
html body #hww-hero .meta { color: #A9A195; border-color: rgba(255, 255, 255, 0.14); }
html body #hww-hero .meta strong { color: #F7F3EC; }
/* The article: reading on white. The hero clears the nav now. */
html body:has(#hww-hero) { background: #FFFFFF; color: #16130F; }
html body:has(#hww-hero) main { padding-top: 3.5rem; }
html body:has(#hww-hero) main h2 { font-family: 'Sora', sans-serif; font-weight: 400; letter-spacing: -0.03em; color: #16130F; }
html body:has(#hww-hero) main h2 .q-num { color: #A44A08; background: none; }
html body:has(#hww-hero) main h3 { font-family: 'Sora', sans-serif; font-weight: 600; color: #16130F; }
html body:has(#hww-hero) main p,
html body:has(#hww-hero) main li { color: #36312B; }
html body:has(#hww-hero) main p strong,
html body:has(#hww-hero) .steps strong { color: #16130F; }
html body:has(#hww-hero) main li::marker { color: #A44A08; }
html body:has(#hww-hero) main a { color: #16130F; text-decoration: underline; text-decoration-color: #D97706; text-underline-offset: 3px; }
html body:has(#hww-hero) main a:hover { color: #A44A08; }
html body:has(#hww-hero) .toc { background: #F3EEE6; border: 0; border-radius: 12px; }
html body:has(#hww-hero) .toc-title { color: #5A534A; }
html body:has(#hww-hero) .toc a { color: #16130F; text-decoration: none; }
html body:has(#hww-hero) .toc a:hover { color: #A44A08; }
html body:has(#hww-hero) .callout { background: #F3EEE6; border: 0; border-left: 2px solid #D97706; border-radius: 0 10px 10px 0; }
html body:has(#hww-hero) .doc-table th,
html body:has(#hww-hero) .doc-table td { border-color: #E2DBCF; color: #36312B; }
html body:has(#hww-hero) .doc-table th { color: #16130F; background: #F3EEE6; }
html body:has(#hww-hero) code { background: #F3EEE6; color: #16130F; }
html body:has(#hww-hero) .steps span { color: #5A534A; }
html body:has(#hww-hero) .steps li::before { background: #D97706; border-color: #D97706; }
html body:has(#hww-hero) .cta-card { background: #14110E; border-radius: 16px; text-align: left; padding: 2.5rem; }
html body:has(#hww-hero) .cta-card h3 { font-family: 'Sora', sans-serif; font-weight: 400; font-size: 1.6rem; letter-spacing: -0.025em; color: #FFFFFF; }
html body:has(#hww-hero) .cta-card p { color: #D9D2C6; }
html body:has(#hww-hero) .cta-card button {
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: #F7F3EC;
  color: #16130F;
  font: 600 15px/1 'DM Sans', sans-serif;
  border: 0;
  box-shadow: none;
}
html body:has(#hww-hero) .cta-card button:hover { background: #FFFFFF; }

/* ═══ /checklist ═══════════════════════════════════════════════════════ */
html body:has(#cl-hero) { background: #FFFFFF; }
html body #cl-hero { background: #14110E; text-align: left; padding: 8.5rem var(--gutter, 2.5rem) 3.5rem; }
html body #cl-hero .cl-pill { background: none; border: 0; padding: 0; color: #A9A195; letter-spacing: 0; text-transform: none; font: 400 15px/1.4 'DM Sans', sans-serif; }
html body #cl-hero h1 {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #FFFFFF;
}
html body #cl-hero .lead { color: #D9D2C6; margin-left: 0; }
html body #cl-gate,
html body #cl-content { background: #FFFFFF; color: #16130F; }
html body #cl-gate { padding-top: 3.5rem; padding-bottom: 4.5rem; }
html body .cl-form { background: #FFFFFF; border: 1px solid #D9D1C4; box-shadow: none; }
html body .cl-form h2 { font-family: 'Sora', sans-serif; font-weight: 400; color: #16130F; letter-spacing: -0.02em; }
html body .cl-form p,
html body .cl-fine { color: #5A534A; }
html body .cl-fine a { color: #16130F; }
html body .cl-form label { color: #16130F; }
html body .cl-form input { background: #FFFFFF; border: 1px solid #D9D1C4; color: #16130F; }
html body .cl-form input::placeholder { color: #8A8073; }
html body .cl-form input:focus { border-color: #D97706; outline: 2px solid #D97706; outline-offset: 1px; }
html body .cl-form button { background: #16130F; color: #FFFFFF; border-radius: 999px; box-shadow: none; }
html body .cl-form button:hover { background: #2E2822; }
html body .cl-note { color: #36312B; }
html body .cl-note.is-error { color: #991B1B; }
html body .cl-note.is-ok { color: #166534; }
html body .cl-thanks { color: #36312B; }
html body .cl-section { background: #F3EEE6; border: 0; }
html body .cl-section h3 { font-family: 'Sora', sans-serif; font-weight: 400; color: #16130F; letter-spacing: -0.02em; }
html body .cl-section h3 .cl-section-num { color: #A44A08; }
html body .cl-list li { color: #36312B; border-color: #E2DBCF; }
html body .cl-list li::before { border-color: #A44A08; color: #A44A08; }
html body .cl-cta-block { background: #14110E; border: 0; text-align: left; }
html body .cl-cta-block h3 { font-family: 'Sora', sans-serif; font-weight: 400; color: #FFFFFF; letter-spacing: -0.02em; }
html body .cl-cta-block p { color: #D9D2C6; }
html body .cl-cta-btn { background: #F7F3EC; color: #16130F; border-radius: 999px; box-shadow: none; }
html body .cl-cta-btn:hover { background: #FFFFFF; color: #16130F; }
html body .cl-print-link { color: #16130F; }
/* The print link sits inside the dark closing block. */
html body .cl-cta-block .cl-print-link { color: #D9D2C6; text-decoration: underline; text-decoration-color: #F59E0B; text-underline-offset: 3px; }
html body .cl-cta-block .cl-print-link:hover { color: #FFFFFF; }

/* ── Phones: home.css is not loaded on these pages, but their legacy
   sheets pad the tops for the nav; match the rebuilt pages. ── */
@media (max-width: 768px) {
  html body .hiw-hero,
  html body .hiw-cta { padding-left: 20px; padding-right: 20px; }
  html body #legal-hero,
  html body .hiw-hero,
  html body #hww-hero,
  html body #cl-hero { padding-top: 6.5rem; padding-bottom: 2.5rem; }
  html body #legal-hero h1,
  html body .hiw-title,
  html body #hww-hero h1,
  html body #cl-hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
}

/* /how-it-works alignment: the legacy sheet centred the stats and the
   closing heading and set the FAQ in a narrower centred column. Everything
   starts on the same left edge as the steps now. */
html body .hiw-stat { text-align: left; }
html body .hiw-cta h2 { margin-left: 0; margin-right: 0; }
html body .hiw-faq-inner { max-width: var(--max-w, 1200px); }
html body .hiw-faq-item,
html body .hiw-faq-header { max-width: 820px; }