/* =====================================================================
   Cadento site.css
   The whole site's styles, ported from the approved homepage design (C3).
   Plain CSS on custom properties. No framework, no build step.

   Rules for page authors
   - Use the classes below. Page-specific CSS stays rare and small, and it
     goes at the end of this file under "Page extras", never inline.
   - No style="" attributes, <style> blocks, inline <script> or onclick=""
     anywhere: the Content-Security-Policy in _headers blocks them.
     SVG presentation attributes (fill, stroke, width, height) are fine.
   - Tokens live in :root. Use var(--...) instead of raw values.

   CLASS REFERENCE (class: what it is for)

   Layout
     .container            Centered column, max 1240px, fluid side gutter.
     .section              Vertical section padding (64px to 96px).
     .section--surface     White section with hairline rules top and bottom.
     .section--flush-top   Drops the top padding (a section that continues
                           the one above it, like "Who gets what").
     .section--roomy       Larger bottom padding (up to 104px).
     .split                Two columns that wrap: heading left, content right.
     .split--tight         Same, with a smaller row gap (the dark band).
     .split__head          Left column (a section title). Max 460px.
     .split__body          Right column (steps, checks, text).
     .measure              Caps a block of text at a comfortable line length.

   Header, menu and footer (in partials/; do not copy into pages)
     .skip-link            "Skip to content" link, visible on focus.
     .site-header          Top bar. .site-header__inner is its flex row.
     .brand                Logo mark plus "Cadento" wordmark link.
                           .brand__mark (img), .brand__word, .brand--sm.
     .site-nav             Desktop nav. .site-nav__list, .site-nav__link.
                           Active link gets aria-current="page" from build.py.
     .site-header__actions "Sign in" plus "Book a call".
     .site-header__signin  The "Sign in" text link.
     .menu                 Phone menu: a <details> that works without JS.
                           .menu__button (summary), .menu__label,
                           .menu__icon-open, .menu__icon-close,
                           .menu__panel, .menu__list, .menu__link.
     .site-footer          Footer. __top, __nav, __link, __legal, __bottom.

   Type
     .display              The big h1 (homepage size).
     .display--md          Smaller h1 for inner pages.
     .display__serif       Serif italic first line of a display heading.
     .display__line        Second line of a display heading (block).
     .accent               Accent color, for the period after a headline.
     .eyebrow              Small label with a 2px rule above it, starts a
                           section. Works on <p> or on <h2>.
     .section-title        Section h2 (2rem to 2.9rem, heavy, tight).
     .section-title--wide  Full-width section title with space below.
     .statement            One big bold sentence ("Who it's for").
     .lead                 Serif intro paragraph (1.125rem to 1.28rem).
     .text                 Serif body paragraph (17px).
     .small                Small grotesk text (13px, muted).
     .source               A source or "as of" note under a fact (13px).
     .link-like            Underlined text that looks like a link but is
                           not one (inside sample emails).
     .visually-hidden      Hidden on screen, read by screen readers.

   Buttons
     .btn                  Base button or button-styled link (52px tall).
     .btn--primary         Accent fill, white text. The main action.
     .btn--outline         Ink outline. The secondary action.
     .btn--sm              44px tall (header).
     .btn--lg              60px tall, bigger text (one big action).
     .btn__icon            Inline SVG icon inside a button.
     .btn-row              Row of buttons with C3 spacing (36px above).

   Homepage components
     .hero                 Hero section padding. .hero--page for inner pages.
     .hero__grid           Copy and media side by side, wrapping.
     .hero__copy           Left column of the hero.
     .hero__media          Right column of the hero (the sample email).
     .hero__eyebrow        Plain small line above the h1.
     .hero__sub            Serif subhead under the h1. <strong> is ink.
     .email-card           Sample email (a <figure>). Parts:
                           __caption (figcaption), __count, __frame,
                           __context, __context-label, __meta, __aside,
                           __subject, __body, __sig, __sig-name, __optout,
                           __actions, __status, __status-icon, __btn,
                           __btn--primary.
     .pill                 Small rounded label ("Example").
     .dot                  3px dot separator.
     .works                "Works with" strip (white band). __inner, __title.
     .marquee              Scrolling list. __track, __list, __list--dup
                           (aria-hidden copy for the loop), __item, __sep,
                           __toggle (pause button, needs site.js),
                           __icon--pause, __icon--play, __toggle-text.
                           .marquee--rtl scrolls right to left instead.
                           Stops for prefers-reduced-motion and with JS off.
     .steps                Numbered step list (<ol>). __item, __num,
                           __title (h3), __text.
     .groups               "Who gets what" definition grid (<dl>).
                           __item (div), __term (dt), __desc (dd).
     .band                 Dark full-width band. Re-colors everything inside
                           it (rules, eyebrow, muted text, focus ring).
                           .band__intro is its intro paragraph.
     .checks               Ruled list of checks (<ul>). __item,
                           __item--wide (spans the row), __label.
     .closer               Big bold closing line with a check icon.
                           .closer__icon for the SVG.
     .note                 Founder note layout. __body, __lead, __text,
                           __sign, __name, __role.
     .stat                 One sourced statistic. <strong> for numbers,
                           .stat__source for the source line.
     .faq                  Question list. __item (<details>), __q
                           (<summary>), __icon, __a (answer <p> or <div>).
     .cta                  Closing call to action. __inner, __title,
                           __text, __note (small line under the button).

   Inner-page components
     .page-head            Text-only page heading block (max 900px).
     .prose                Long-form text for Privacy and Terms: headings,
                           lists, links, tables. .prose__meta for the
                           "Effective" line.
     .table-wrap           Scroll wrapper for a table on phones. Give it
                           role="region", tabindex="0" and an aria-label.
     .table                Simple ruled table (compare, pricing).
                           .table--wide keeps a minimum width on phones.
                           .table__muted for secondary cell text.
     .prices               Grid of price cards.
     .price                Price card, C3 style: a rule on top, no box.
                           .price--surface puts it on a white card.
                           __for, __amount, __unit, __tiers, __tier,
                           __tier-amount, __tier-limit, __list, __note,
                           __cta.
     .link-list            Ruled list of large links (404 page).
                           __item, __link.

   Page extras (each is described where it is defined, at the end)
     .cta__note--link      A .cta__note holding one standalone link (44px).
     .compare__choose      "Choose X if / Choose Cadento if" pair (compare).
     .compare__asof        "As of November 2026" source line (compare).
     .compare__us          Cadento's own row in the compare table.
     .table--stack         Table that stacks into label/value blocks at
                           900px and below (labels from data-label).
     .legal                Privacy and Terms layout. __summary, __toc,
                           __toc-list, __toc-link, __body.
     .summary              "The short version" card. __title, __list,
                           __item, __note.
     .skips                "What you can skip" grid of "No ___." items (home,
                           /realestate/, /lo/). __item, __title, __text.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------- */
:root {
  /* Color */
  --c-bg: #F4F3F0;             /* page background, warm paper */
  --c-surface: #FFFFFF;        /* white sections and cards */
  --c-surface-2: #F8F7F4;      /* bars inside cards */
  --c-ink: #1C1B19;            /* headings and primary text */
  --c-ink-2: #2A2926;          /* answers and definitions */
  --c-text: #3A3935;           /* serif body text */
  --c-muted: #4A4844;          /* nav links, secondary labels */
  --c-subtle: #6B6964;         /* captions, numbers, footer (4.9:1 on bg) */
  --c-rule: #DEDBD4;           /* list rules, header and footer borders */
  --c-rule-section: #E4E1DA;   /* borders of white sections */
  --c-rule-card: #ECEAE4;      /* rules inside cards */
  --c-card-border: #E2DFD8;    /* card outline */
  --c-control-border: #8E8A82; /* outlines of small buttons (3:1) */
  --c-pill-border: #B9B5AC;    /* decorative pill and separator dots */
  --c-dot: #8E8A82;
  --c-accent: #5B3DF6;         /* the brand violet: buttons, small marks */
  --c-accent-hover: #4A2FE0;
  --c-on-accent: #FFFFFF;      /* 6.1:1 on the accent */
  --c-link-hover: #5B3DF6;
  --c-focus: #5B3DF6;

  /* Dark band */
  --c-dark: #1C1B19;
  --c-dark-text: #F4F3F0;
  --c-dark-muted: #BEBBB3;
  --c-dark-rule: rgba(244, 243, 240, 0.18);
  --c-dark-accent: #A99BFF;    /* focus and hover on dark (7.2:1) */

  /* "Works with" names, one color each, in list order. A Cadento set built
     on the brand violet, the logo blue and the video's teal; never a
     product's own brand color. Contrast: on the white strip / on paper.
     Palettes may override these. */
  --mq-1: #5B3DF6;  /* Gmail: brand violet      6.1:1 / 5.5:1 */
  --mq-2: #08767E;  /* Outlook: teal-green      5.4:1 / 4.9:1 */
  --mq-3: #2060D0;  /* HubSpot: deep blue       5.8:1 / 5.2:1 */
  --mq-4: #8E3A7E;  /* Salesforce: plum         6.9:1 / 6.2:1 */
  --mq-5: #B4441F;  /* LeadConnector: coral     5.5:1 / 5.0:1 */
  --mq-6: #34399A;  /* Excel: indigo            9.6:1 / 8.6:1 */
  --mq-7: #11698C;  /* CSV files: ocean         6.1:1 / 5.5:1 */

  /* Type */
  --font-sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --fs-display: clamp(2.4rem, 1.1rem + 4.2vw, 4.6rem);
  --fs-display-md: clamp(2.25rem, 1.2rem + 3.2vw, 3.9rem);
  --fs-display-2: clamp(2.3rem, 1.2rem + 3.4vw, 4.2rem);
  --fs-title: clamp(2rem, 1.2rem + 2.2vw, 2.9rem);
  --fs-statement: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem);
  --fs-term: clamp(1.5rem, 1.15rem + 1vw, 2.1rem);
  --fs-quote: clamp(1.375rem, 1rem + 1vw, 1.95rem);
  --fs-closer: clamp(1.3rem, 1rem + 0.8vw, 1.75rem);
  --fs-lead-hero: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.35vw, 1.28rem);
  --fs-h3: 1.375rem;      /* 22px */
  --fs-faq: 1.3125rem;    /* 21px */
  --fs-marquee: 1.3125rem;
  --fs-check: 1.125rem;   /* 18px */
  --fs-body: 1.0625rem;   /* 17px */
  --fs-email: 1.03125rem; /* 16.5px */
  --fs-base: 1rem;        /* 16px */
  --fs-ui: 0.9375rem;     /* 15px */
  --fs-small: 0.875rem;   /* 14px */
  --fs-xs: 0.8125rem;     /* 13px */

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --gutter: clamp(16px, 4vw, 48px);
  --hero-top: clamp(44px, 6vw, 88px);
  --section-y: clamp(64px, 7vw, 96px);
  --section-y-lg: clamp(64px, 7vw, 104px);
  --band-y: clamp(64px, 7vw, 100px);
  --cta-y: clamp(72px, 8vw, 120px);

  /* Widths */
  --container: 1240px;
  --container-text: 880px;
  --measure: 40em;

  /* Radii and shadow */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(28, 27, 25, 0.06), 0 28px 56px -28px rgba(28, 27, 25, 0.28);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }

img { max-width: 100%; height: auto; }

a { color: var(--c-ink); text-underline-offset: 3px; }
a:hover { color: var(--c-link-hover); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

main:focus { outline: none; }

strong { font-weight: 700; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--c-bg); }

/* ---------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: var(--section-y) 0; }
.section--surface {
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule-section);
  border-bottom: 1px solid var(--c-rule-section);
}
.section--flush-top { padding-top: 0; }
.section--roomy { padding-bottom: var(--section-y-lg); }

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 72px;
}
.split--tight { gap: 32px 72px; }
.split__head { flex: 1 1 360px; max-width: 460px; min-width: 0; }
.split__body { flex: 1.4 1 520px; min-width: 0; }

.measure { max-width: var(--measure); }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header {
  position: relative;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-rule);
}
.site-header__inner {
  min-height: 76px;
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--c-ink);
  text-decoration: none;
}
.brand:hover { color: var(--c-ink); }
.brand__mark { display: block; width: 27px; height: 30px; }
.brand__word {
  font-size: 23px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brand--sm .brand__mark { width: 23px; height: 26px; }
.brand--sm .brand__word { font-size: 20px; }

.site-nav { flex: 1 1 auto; }
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-ui);
  font-weight: 500;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-muted);
  text-decoration: none;
}
.site-nav__link:hover { color: var(--c-ink); text-decoration: underline; }
.site-nav__link[aria-current="page"] {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.site-header__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-header__signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--c-ink);
  font-size: var(--fs-ui);
  font-weight: 500;
  text-decoration: none;
}
.site-header__signin:hover { color: var(--c-ink); text-decoration: underline; }

/* Phone menu (a <details>, so it opens without JS) */
.menu { display: none; }
.menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--c-control-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__button::marker { content: ""; }
.menu__icon-open, .menu__icon-close { flex: none; display: block; }
.menu__icon-close { display: none; }
.menu[open] .menu__icon-open { display: none; }
.menu[open] .menu__icon-close { display: block; }
.menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 4px var(--gutter) 16px;
  background: var(--c-bg);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  box-shadow: 0 24px 40px -24px rgba(28, 27, 25, 0.28);
}
.menu__list { margin: 0; padding: 0; list-style: none; }
.menu__list li + li { border-top: 1px solid var(--c-rule); }
.menu__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  color: var(--c-ink);
  font-size: var(--fs-check);
  font-weight: 600;
  text-decoration: none;
}
.menu__link:hover { color: var(--c-ink); text-decoration: underline; }
.menu__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.menu__link--quiet { color: var(--c-muted); font-weight: 500; }

@media (max-width: 900px) {
  .site-nav { order: 3; flex: 1 1 100%; }
  .site-nav__list { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .site-header__inner {
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px 12px;
  }
  .site-nav, .site-header__signin { display: none; }
  .site-header__actions { gap: 8px; }
  .site-header__actions .btn--sm { padding: 0 14px; }
  .menu { display: block; }
}

@media (max-width: 400px) {
  .brand__word { font-size: 21px; }
  .menu__button { padding: 0; width: 44px; }
  .menu__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--outline {
  padding: 0 22px;
  border: 1.5px solid var(--c-ink);
  color: var(--c-ink);
}
.btn--outline:hover { background: rgba(28, 27, 25, 0.05); color: var(--c-ink); }
.band .btn--outline:hover { background: rgba(244, 243, 240, 0.08); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: var(--fs-ui); }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: 1.1875rem; }
.btn__icon { flex: none; display: block; }

.btn-row {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

/* ---------------------------------------------------------------------
   Type
   --------------------------------------------------------------------- */
.display {
  font-size: var(--fs-display);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.display--md { font-size: var(--fs-display-md); line-height: 1.04; }
.display__serif {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.display__line { display: block; margin-top: 0.14em; }

.accent { color: var(--c-accent); }

.eyebrow {
  margin: 0 0 40px;
  padding-top: 14px;
  border-top: 2px solid var(--c-ink);
  font-size: var(--fs-small);
  line-height: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.section-title {
  font-size: var(--fs-title);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-title--wide { max-width: 820px; margin-bottom: 40px; }

.statement {
  max-width: 900px;
  font-size: var(--fs-statement);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lead {
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}
.section-title + .lead { margin-top: 20px; }
.section-title--wide + .lead { margin-top: -16px; margin-bottom: 40px; }

.text {
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}
.text + .text { margin-top: 14px; }

.small { font-size: var(--fs-xs); line-height: 1.6; color: var(--c-subtle); }
.source { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-subtle); }
.source a, .small a { color: var(--c-muted); }

.link-like {
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero { padding: var(--hero-top) 0 var(--section-y-lg); }
.hero--page { padding-bottom: var(--section-y); }
.hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px 72px;
}
.hero__copy { flex: 1.25 1 520px; min-width: 0; }
.hero__media { flex: 1 1 440px; max-width: 540px; min-width: 0; margin: 0; }
.hero__eyebrow {
  margin: 0 0 28px;
  font-size: var(--fs-base);
  line-height: 1.4;
  font-weight: 500;
  color: var(--c-muted);
}
.hero__sub {
  margin-top: 28px;
  max-width: 30em;
  font-family: var(--font-serif);
  font-size: var(--fs-lead-hero);
  line-height: 1.55;
  color: var(--c-text);
  text-wrap: pretty;
}
.hero__sub strong { font-weight: 600; color: var(--c-ink); }

.page-head { max-width: 900px; }

/* ---------------------------------------------------------------------
   Sample email card
   --------------------------------------------------------------------- */
.email-card { margin: 0; }
.email-card__caption {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-subtle);
}
.email-card__count { margin-left: auto; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--c-pill-border);
  border-radius: var(--radius-pill);
  color: var(--c-ink);
  font-weight: 700;
}
.email-card__frame {
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.email-card__context {
  margin: 0;
  padding: 12px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-rule-card);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-text);
}
.email-card__context-label { font-weight: 700; color: var(--c-ink); }
.dot {
  flex: none;
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-dot);
}
.email-card__meta {
  margin: 0;
  padding: 14px 22px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 6px 12px;
  font-size: var(--fs-small);
  line-height: 1.45;
  border-bottom: 1px solid var(--c-rule-card);
}
.email-card__meta dt { color: var(--c-subtle); }
.email-card__meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.email-card__aside { color: var(--c-subtle); }
.email-card__subject { font-weight: 600; }
.email-card__body {
  padding: 20px 22px 18px;
  font-family: var(--font-serif);
  font-size: var(--fs-email);
  line-height: 1.6;
  color: var(--c-ink);
}
.email-card__body p { margin: 0 0 14px; }
.email-card__body .email-card__sig {
  margin: 16px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text);
}
.email-card__sig span { display: block; }
.email-card__sig .email-card__sig-name { font-weight: 600; color: var(--c-ink); }
.email-card__body .email-card__optout {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-subtle);
}
.email-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 22px;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-rule-card);
}
.email-card__status {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  font-weight: 700;
  color: var(--c-ink);
}
.email-card__status-icon { flex: none; display: block; color: var(--c-accent); }
.email-card__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-control-border);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 600;
}
.email-card__btn--primary {
  padding: 0 18px;
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* ---------------------------------------------------------------------
   "Works with" strip and marquee
   --------------------------------------------------------------------- */
.works {
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule-section);
  border-bottom: 1px solid var(--c-rule-section);
  overflow: hidden;
}
.works__inner {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 40px;
}
.works__title {
  flex: none;
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee {
  flex: 1 1 300px; /* 300, not 520: keeps the Pause button on the same row from 601px up */
  min-width: 0;
  overflow: hidden;
  padding: 2px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
  animation-direction: reverse; /* "Left to right", the C3 default */
}
.marquee--rtl .marquee__track { animation-direction: normal; }
.marquee:hover .marquee__track,
.is-paused .marquee__track { animation-play-state: paused; }
.marquee__list {
  flex: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: 0 40px;
  padding-right: 40px;
  font-size: var(--fs-marquee);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--c-subtle);
  white-space: nowrap;
}
/* Each name in its own color (--mq-1 to --mq-7). Counted per list, so the
   aria-hidden copy and the still, wrapped layout match. Dots stay neutral. */
.marquee__item:nth-child(7n+1) { color: var(--mq-1); }
.marquee__item:nth-child(7n+2) { color: var(--mq-2); }
.marquee__item:nth-child(7n+3) { color: var(--mq-3); }
.marquee__item:nth-child(7n+4) { color: var(--mq-4); }
.marquee__item:nth-child(7n+5) { color: var(--mq-5); }
.marquee__item:nth-child(7n+6) { color: var(--mq-6); }
.marquee__item:nth-child(7n+7) { color: var(--mq-7); }
.marquee__sep {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-pill-border);
}
.marquee__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 92px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-control-border);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}
.marquee__icon { flex: none; display: block; }
.marquee__icon--play { display: none; }
.is-paused .marquee__icon--play { display: block; }
.is-paused .marquee__icon--pause { display: none; }

@media (max-width: 600px) {
  .marquee__toggle { order: 1; }
  .marquee { order: 2; flex-basis: 100%; }
}

/* Reduced motion, and no JS (so no pause button): a still, wrapped list. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; transform: none; width: auto; }
  .marquee__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
  .marquee__item { padding-right: 0; }
  .marquee__sep, .marquee__list--dup, .marquee__toggle { display: none; }
}
@media (scripting: none) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; transform: none; width: auto; }
  .marquee__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
  .marquee__item { padding-right: 0; }
  .marquee__sep, .marquee__list--dup, .marquee__toggle { display: none; }
}

/* ---------------------------------------------------------------------
   Steps
   --------------------------------------------------------------------- */
.steps { margin: 0; padding: 0; list-style: none; }
.steps__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0 12px;
  padding: 24px 0;
  border-top: 1px solid var(--c-rule);
}
.steps__item:last-child { border-bottom: 1px solid var(--c-rule); }
.steps__num {
  padding-top: 5px;
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--c-subtle);
}
.steps__title {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.steps__text {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   Who gets what
   --------------------------------------------------------------------- */
.groups {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px 40px;
}
/* Every .groups list on the site has exactly 3 items (home, /realestate/,
   /lo/, /pricing/). From 680px they sit in one row of three, so none is left
   alone on a second row; below 680px they stack. Wider screens look the same
   as with auto-fit. A list with another item count needs its own rule. */
@media (min-width: 680px) {
  .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.groups__item {
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--c-rule);
}
.groups__term {
  min-width: 0;
  margin: 0 0 8px;
  font-size: var(--fs-term);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.groups__desc {
  min-width: 0;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   Dark band (re-colors everything inside it)
   --------------------------------------------------------------------- */
.band {
  --c-ink: var(--c-dark-text);
  --c-ink-2: var(--c-dark-text);
  --c-text: var(--c-dark-muted);
  --c-muted: var(--c-dark-muted);
  --c-subtle: var(--c-dark-muted);
  --c-rule: var(--c-dark-rule);
  --c-focus: var(--c-dark-accent);
  --c-link-hover: var(--c-dark-accent);
  padding: var(--band-y) 0;
  background: var(--c-dark);
  color: var(--c-ink);
  border-top: 1px solid var(--c-dark-rule);
  border-bottom: 1px solid var(--c-dark-rule);
}
.band__intro { margin: 0 0 12px; line-height: 1.5; }

.checks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0 40px;
  font-size: var(--fs-check);
  line-height: 1.4;
  font-weight: 600;
}
.checks__item { padding: 16px 0; border-top: 1px solid var(--c-rule); }
.checks__item--wide { grid-column: 1 / -1; }
.checks__label { font-weight: 500; color: var(--c-muted); }

.closer {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--c-rule);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--fs-closer);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.closer__icon { flex: none; display: block; margin-top: 0.12em; }

/* ---------------------------------------------------------------------
   Founder note and statistic
   --------------------------------------------------------------------- */
.note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 40px 72px;
}
.note__body {
  flex: 2 1 560px;
  max-width: 800px;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-quote);
  line-height: 1.4;
  color: var(--c-ink);
}
.note__lead {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.note__text { margin: 0; text-wrap: pretty; }
.note__text + .note__text { margin-top: 20px; }
.note__sign {
  margin: 32px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.4;
}
.note__name { display: block; font-weight: 700; color: var(--c-ink); }
.note__role { display: block; color: var(--c-subtle); }

.stat {
  flex: 1 1 260px;
  max-width: 340px;
  min-width: 0;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--c-text);
}
.stat strong { font-weight: 700; color: var(--c-ink); }
.stat__source { display: block; margin-top: 8px; color: var(--c-subtle); }

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */
.faq { max-width: var(--container-text); border-bottom: 1px solid var(--c-rule); }
.faq__item { border-top: 1px solid var(--c-rule); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 20px 0;
  font-size: var(--fs-faq);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--c-ink); }
.faq__icon { flex: none; display: block; transition: transform 0.2s; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a {
  margin: 0 0 24px;
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink-2);
  text-wrap: pretty;
}
.faq__a p + p { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .faq__icon { transition: none; }
}

/* ---------------------------------------------------------------------
   Closing call to action
   --------------------------------------------------------------------- */
.cta { padding: var(--cta-y) 0; }
.cta__inner { max-width: 900px; }
.cta__title {
  font-size: var(--fs-display-2);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.cta__text { margin-top: 24px; }
.cta__note {
  margin-top: 16px;
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--c-subtle);
}
.cta__note a { color: var(--c-muted); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer {
  padding: 48px 0 36px;
  border-top: 1px solid var(--c-rule);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-ui);
}
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-muted);
  text-decoration: none;
}
.site-footer__link:hover { color: var(--c-ink); text-decoration: underline; }
.site-footer__link[aria-current="page"] { color: var(--c-ink); }
.site-footer__legal {
  margin: 28px 0 0;
  max-width: var(--container-text);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-subtle);
}
.site-footer__bottom {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--c-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  font-size: var(--fs-xs);
  color: var(--c-subtle);
}
.site-footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-muted);
}
.site-footer__bottom a:hover { color: var(--c-link-hover); }

/* ---------------------------------------------------------------------
   Prose (Privacy, Terms)
   --------------------------------------------------------------------- */
.prose {
  max-width: 46rem;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink-2);
}
.prose > * + * { margin-top: 1em; }
.prose h2 {
  margin-top: 2.4em;
  padding-top: 14px;
  border-top: 1px solid var(--c-rule);
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--c-ink);
}
.prose h3 {
  margin-top: 1.8em;
  font-family: var(--font-sans);
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.prose > :first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li > ul, .prose li > ol { margin-top: 0.4em; }
.prose strong { font-weight: 600; color: var(--c-ink); }
.prose a { color: var(--c-ink); }
.prose a:hover { color: var(--c-link-hover); }
.prose .table-wrap { font-family: var(--font-sans); }
.prose__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-subtle);
}

/* ---------------------------------------------------------------------
   Table (compare, pricing)
   --------------------------------------------------------------------- */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-ink);
}
.table--wide { min-width: 36rem; }
.table caption {
  caption-side: top;
  padding-bottom: 12px;
  text-align: left;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.table th, .table td {
  padding: 14px 20px 14px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-rule);
}
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th {
  padding-top: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 2px solid var(--c-ink);
}
.table tbody th { font-weight: 700; }
.table__muted { color: var(--c-subtle); font-size: var(--fs-small); }

/* ---------------------------------------------------------------------
   Price cards
   --------------------------------------------------------------------- */
.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 56px 72px;
  align-items: stretch;
}
.price {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 20px;
  border-top: 2px solid var(--c-ink);
}
.price--surface {
  padding: clamp(22px, 3vw, 32px);
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-lg);
}
.price__for {
  font-size: var(--fs-small);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.price__amount {
  margin-top: 20px;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.price__unit {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-text);
}
.price__tiers { margin: 20px 0 0; padding: 0; list-style: none; }
.price__tier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--c-rule);
}
.price__tier:last-child { border-bottom: 1px solid var(--c-rule); }
.price__tier-amount {
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.price__tier-limit {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--c-text);
}
.price__list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-base);
  line-height: 1.45;
}
.price__list li { padding: 12px 0; border-top: 1px solid var(--c-rule); }
.price__list li:last-child { border-bottom: 1px solid var(--c-rule); }
.price__note {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-text);
  text-wrap: pretty;
}
.price__cta { margin-top: auto; padding-top: 28px; }

/* ---------------------------------------------------------------------
   Link list (404)
   --------------------------------------------------------------------- */
.link-list {
  max-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--c-rule);
}
.link-list__item { border-top: 1px solid var(--c-rule); }
.link-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  font-size: var(--fs-check);
  font-weight: 600;
  text-decoration: none;
}
.link-list__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Print
   --------------------------------------------------------------------- */
@media print {
  .skip-link, .menu, .marquee__toggle, .btn-row { display: none !important; }
  .band { background: none; color: #000; }
  .marquee__track { animation: none; }
}

/* ---------------------------------------------------------------------
   Page extras (keep this short)
   --------------------------------------------------------------------- */

/* Real estate agents page (/realestate/)
   .cta__note--link: a .cta__note that holds one quiet, standalone link
   ("See agent pricing" under the closing button). The link keeps its
   small underlined look but gets a 44px touch target; the smaller top
   margin keeps the visible gap the same. Any page may reuse it. */
.cta__note--link { margin-top: 4px; }
.cta__note--link a { display: inline-flex; align-items: center; min-height: 44px; }

/* Compare page (/compare/)
   .compare__choose   The "Choose X if / Choose Cadento if" pair under each
                      competitor: a .checks list with room above it.
   .compare__asof     The "As of November 2026" source line, with room above.
   .compare__us       Cadento's own row in the comparison table.
   .table--stack      A .table that, at 900px and below, turns each row into
                      its own block of label and value pairs. Labels come
                      from data-label on each <td>. The markup keeps explicit
                      table roles, so screen readers still read a table. */
.compare__choose { margin-top: 28px; }
.compare__asof { margin-top: 16px; }
.compare__us th { color: var(--c-accent); }

@media (max-width: 900px) {
  .table--stack, .table--stack caption, .table--stack tbody,
  .table--stack tr, .table--stack th, .table--stack td { display: block; }
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .table--stack tbody tr { padding-top: 16px; border-top: 2px solid var(--c-ink); }
  .table--stack tbody tr + tr { margin-top: 32px; }
  .table--stack tbody th {
    padding: 0 0 6px;
    border-bottom: 0;
    font-size: var(--fs-h3);
    line-height: 1.25;
    letter-spacing: -0.015em;
  }
  .table--stack tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
  .table--stack td {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: 0 16px;
    padding: 10px 0;
  }
  .table--stack td:last-child { border-bottom: 0; }
  .table--stack td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.55;
    color: var(--c-subtle);
  }
}

/* Privacy policy and Terms of service (/privacy/, /terms/)
   .legal             The document layout under the page head. One column
                      in source order (summary, contents, text) below
                      1000px; from 1000px the contents sit in a sticky left
                      column beside the summary and the text.
   .legal__summary    Grid slot for the summary card.
   .legal__toc        "On this page" contents nav (a <nav>). Its heading is
                      an .eyebrow with less space below.
                      .legal__toc-list (<ol>), .legal__toc-link (44px rows
                      below 1000px).
   .legal__body       Grid slot for the .prose document. Its h2s keep a
                      little room above them when reached from the contents.
   .summary           "The short version": a white card. __title (h2),
                      __list, __item (<strong> lead-in), __note (the line
                      saying the full text is what applies). */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}
.legal__toc .eyebrow { margin-bottom: 8px; }
.legal__toc-list { margin: 0; padding: 0; list-style: none; }
.legal__toc-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-ui);
  line-height: 1.35;
  color: var(--c-muted);
  text-decoration: none;
}
.legal__toc-link:hover { color: var(--c-link-hover); text-decoration: underline; }
.legal__body h2 { scroll-margin-top: 24px; }
.legal__body .table-wrap { margin-top: 1.2em; }
.legal__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  color: var(--c-ink);
}

@media (min-width: 600px) and (max-width: 999px) {
  .legal__toc-list { columns: 2; column-gap: 40px; }
  .legal__toc-list li { break-inside: avoid; }
}
@media (min-width: 1000px) {
  .legal {
    grid-template-columns: 232px minmax(0, 46rem);
    grid-template-areas: "toc summary" "toc body";
    gap: 56px clamp(56px, 6vw, 96px);
  }
  .legal__summary { grid-area: summary; }
  .legal__body { grid-area: body; }
  .legal__toc {
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
  .legal__toc-link {
    min-height: 34px;
    padding: 5px 0;
    border-bottom: 0;
    font-size: var(--fs-small);
  }
}

.summary {
  padding: clamp(22px, 3vw, 32px);
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-lg);
}
.summary__title {
  font-size: var(--fs-small);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.summary__list { margin: 12px 0 0; padding: 0; list-style: none; }
.summary__item {
  padding: 14px 0;
  border-top: 1px solid var(--c-rule-card);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-ink-2);
  text-wrap: pretty;
}
.summary__item:last-child { padding-bottom: 0; }
.summary__item strong {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.summary__note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--c-rule-card);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-subtle);
}

/* ---------------------------------------------------------------------
   Video (homepage: "See it in 30 seconds", after the "Works with" strip)
   .video             The framed product video (a <div data-video>). It
                      holds the <video> and a <link rel="preload"
                      data-video-poster> for the phone cut's poster, which
                      loads only on narrow screens and which site.js swaps
                      in. Never taller than the screen.
   .video__media      The <video>: muted, looping, native controls, framed
                      like the sample email (hairline, radius, card shadow).
                      site.js plays it while it is in view and never starts
                      it for prefers-reduced-motion.
   .section--flush-bottom  Drops a section's bottom padding when the next
                      section is also on paper (the video's section, above
                      "How it works"), so the gap is one section, not two.
   The box keeps the shape of the cut that plays: 16:9, and 4:5 at 640px
   and below (the same query as the phone <source>), so nothing jumps while
   it loads. --video-paper is the paper color baked into the MP4, so the
   empty frame matches the video before the poster arrives.
   --------------------------------------------------------------------- */
.section--flush-bottom { padding-bottom: 0; }
.video {
  --video-paper: #F4F3F0;
  max-width: calc((100vh - 48px) * 16 / 9);
  max-width: calc((100svh - 48px) * 16 / 9);
}
.video__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--video-paper);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
  .video {
    max-width: min(30rem, calc((100vh - 48px) * 4 / 5));
    max-width: min(30rem, calc((100svh - 48px) * 4 / 5));
  }
  .video__media { aspect-ratio: 4 / 5; }
}

/* ---------------------------------------------------------------------
   What you can skip (home, /realestate/, /lo/: after "How it works")
   .skips             The "No ___." list (a <ul>), placed as the
                      .split__body beside the section title. One column on
                      phones; from 600px a 2x2 grid. Each item has a rule
                      on top, like .steps and .groups.
   .skips__item       One item (<li>).
   .skips__title      The bold "No ___." line (an <h3>, sized like
                      .steps__title).
   .skips__text       One short serif line under it.
   The violet palette turns the rules violet (palette-violet.css).
   --------------------------------------------------------------------- */
.skips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 40px; /* row gap, not item padding: the last row adds no space */
}
.skips__item {
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--c-rule);
}
.skips__title {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.skips__text {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}

@media (min-width: 600px) {
  .skips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}