/* Marge's marketing sites: one stylesheet for marge.health and blamemarge.com.
   Built from the owner-approved designs in marketing/design/ (Features.dc.html, Founding.dc.html for
   marge.health; Blame.dc.html for blamemarge.com) and the home page's "Direction B" (2026-10-11), all in the
   "Clary Sage A" palette: light sage bands with dark words, deep sage for headlines, buttons and links, and
   Marge's yellow only for Marge's own things (her notes, her avatar, the Founding Clinics button).
   The build (marketing/build.mjs) fingerprints this file and the font files it points at.
   No inline styles anywhere (the pages' Content-Security-Policy refuses them): every look is a class here. */

/* ---------- Fonts: the app's own (owner, 2026-10-18: the site's fonts match the staff app), self-hosted ---------- */
/* Fraunces for headlines (npm @fontsource-variable/fraunces; the opsz files carry the weight and optical-size axes)
   and Figtree for everything else (npm @fontsource-variable/figtree). Bricolage Grotesque until 2026-10-18. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fraunces-latin-opsz-normal.7234ed860a.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fraunces-latin-ext-opsz-normal.a2930b27d1.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/assets/figtree-latin-wght-normal.4ba7d3d096.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/assets/figtree-latin-ext-wght-normal.bf7828e2c2.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
/* Clary Sage A. Contrast (WCAG): ink on page 12.3, on sage 8.1; sage-ink on page 7.9, on white 8.3, on fill 7.0,
   on sage 5.2, on note 5.9; page on sage-ink 7.9 (buttons), on sage-ink-hover 5.8; ink-2 on page 5.7, on white 5.9,
   on fill 5.1; ink-2-on-sage on sage 4.9; input-line against white 3.8, page 3.6, fill 3.2 (control edges).
   marketing/test/build.test.mjs checks these pairs. */
:root {
  --page: #fafaf6;
  --white: #ffffff;
  --fill: #eceee5;
  --line: #dfe2d6; /* hairlines between things; never the only edge of a control */
  --line-soft: #e8eae1;
  --ink: #2e332c;
  --ink-2: #5f665a;
  --ink-2-on-sage: #4d5449;
  --sage: #cccfbc; /* Sherwin-Williams Clary Sage (SW 6178): the big calm areas */
  --sage-light: #e4e6da; /* a paler Clary Sage behind real screens, so the white app screens stand out */
  --sage-ink: #47523f; /* deep sage: headlines, buttons, links */
  --sage-ink-hover: #5a6750;
  --note: #f6d867; /* Marge's yellow: her notes, her avatar, the Founding Clinics button */
  --note-fold: #e2bf45;
  --input-line: #7e8676;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif; /* headlines only (the app's title face) */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --shadow-card: 0 30px 60px -30px rgba(46, 51, 44, 0.35);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--sage-ink);
}
a:hover {
  color: var(--sage-ink-hover);
}
:focus-visible {
  outline: 3px solid var(--sage-ink);
  outline-offset: 3px;
}
[id] {
  scroll-margin-top: 16px;
}
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--sage-ink);
  color: var(--page);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
  color: var(--page);
}

/* A value not set yet in site.config.json. Only preview builds show these; production builds refuse to finish. */
.tbd {
  display: inline;
  padding: 0 0.3em;
  border-radius: 4px;
  outline: 1.5px dashed #c53030;
  outline-offset: 1px;
  background: #fde8e8;
  color: #8a1c1c;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

/* Short nav and footer links still get a 44px square to tap. */
.topnav__links a,
.topnav__login,
.footer__links a,
.bnav__links a,
.bfooter a {
  min-width: 44px;
  justify-content: center;
}

/* ---------- Layout helpers ---------- */
/* Content is 1200px wide at most, plus the gutters (the design's sections are content-box). */
.wrap {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* A light sage band across the page, dark words on it. */
.on-sage {
  background: var(--sage);
  color: var(--ink);
}
/* A band of real screens: the paler sage, so the screens carry the colour. */
.on-sage--light {
  background: var(--sage-light);
}
.on-sage .fine {
  color: var(--ink-2-on-sage);
}
/* sage-ink-hover is 3.8:1 on sage: on a band, a link darkens to the ink instead. */
.on-sage a:not(.btn):hover {
  color: var(--ink);
}
/* A white band across the page, ruled above and below. */
.surface {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.stack {
  display: flex;
  flex-direction: column;
}
.intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.intro--780 {
  max-width: 780px;
}
.intro--820 {
  max-width: 820px;
}
.list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Type ---------- */
/* A small name above a heading, only where it says something the heading doesn't (Founding Clinics, Marge's
   house rules). Sentence case, no tracking. */
.section-label {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  color: var(--sage-ink);
}
/* Section headings: one weight and colour, sizes named by their largest size in the designs. */
.h2 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 750;
  color: var(--sage-ink);
}
.h2--60 {
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.h2--58 {
  font-size: clamp(34px, 4.6vw, 58px);
}
.h2--56 {
  font-size: clamp(32px, 4.4vw, 56px);
}
.h2--50 {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.04;
}
.h2--46 {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.04;
}
.h2--44 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.05;
}
.lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
}
.lead--relaxed {
  line-height: 1.55;
}
.lead--20 {
  font-size: 20px;
  line-height: 1.55;
}
.lead--18 {
  font-size: 18px;
  line-height: 1.55;
}
.fine {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
h3 {
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn--lg {
  font-size: 17px;
  padding: 16px 28px;
}
.btn--md {
  font-size: 17px;
  padding: 15px 26px;
}
.btn--sm {
  font-size: 15px;
  padding: 12px 20px;
}
/* The main action: deep sage with page-coloured words, on every background (7.9:1; its edge 5.2:1 on sage). */
.btn--primary {
  background: var(--sage-ink);
  color: var(--page);
}
.btn--primary:hover {
  background: var(--sage-ink-hover);
  color: var(--page);
}
/* The second action: a deep sage outline. */
.btn--outline {
  border: 1.5px solid var(--sage-ink);
  color: var(--sage-ink);
  background: transparent;
}
.btn--outline:hover {
  background: rgba(71, 82, 63, 0.08);
  color: var(--sage-ink);
}
/* Marge's yellow, only for the Founding Clinics call. Yellow is too close to the page and to sage to be an edge,
   so the button carries a deep sage one. */
.btn--note {
  border: 1.5px solid var(--sage-ink);
  background: var(--note);
  color: var(--sage-ink);
  font-weight: 650;
}
.btn--note:hover {
  background: #f9e38f;
  color: var(--sage-ink);
}
.btn[disabled],
.btn[aria-busy='true'] {
  cursor: progress;
  opacity: 0.75;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Logo ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: var(--sage-ink);
}
.brand:hover {
  color: var(--sage-ink);
}
/* The note's m is the m of "marge": one drawing, the note then "arge" (partials/logo.html). */
.logo {
  display: block;
  flex: none;
  width: 107px;
  height: 34px;
}

/* ---------- Sticky notes (Marge's voice) ---------- */
.note {
  --fold: 22px;
  position: relative;
  filter: drop-shadow(0 10px 12px rgba(46, 51, 44, 0.16));
}
.note__paper {
  margin: 0;
  min-height: var(--note-min, 0);
  padding: 22px 22px calc(var(--fold) + 10px);
  border-radius: 6px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%);
  background: var(--note);
  color: var(--sage-ink);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 650;
}
.note::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--fold);
  height: var(--fold);
  background: var(--note-fold);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ---------- "Coming" tags: built, not shipped yet (they arrive with the Founding Clinics) ---------- */
.tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--fill);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}
h3 .tag {
  vertical-align: middle;
}
.tag--key {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
}
/* On the features and security pages the tags sit on the page or on white, so a shade darker. */
.tag--line {
  background: var(--line);
}
.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* =====================================================================
   marge.health
   ===================================================================== */

/* ---------- Top bar ---------- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.topnav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
}
.topnav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.topnav__links a:hover {
  color: var(--sage-ink-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.topnav__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.topnav__actions .btn--outline {
  padding: 11px 18px;
}
.topnav__login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sage-ink);
  text-decoration: none;
}
.topnav__login:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.topnav__links a[aria-current='page'] {
  color: var(--sage-ink);
  font-weight: 650;
}
@media (max-width: 900px) {
  /* Too narrow for one row: logo and the two buttons share the first row; the two links go underneath. */
  .topnav {
    gap: 4px 12px;
  }
  .topnav__actions {
    margin-left: auto;
  }
  .topnav__links {
    order: 3;
    flex-basis: 100%;
    gap: 0 18px;
  }
}
@media (max-width: 360px) {
  .topnav__login {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ---------- Chat pictures (Try Marge): a question, Marge's answer and the buttons under it ---------- */
.convo__turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.convo__q {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 86%;
}
.convo__who {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.convo__a {
  align-self: flex-start;
  display: flex;
  gap: 10px;
  max-width: 90%;
}
.convo__a svg {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
}
.bubble {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 15px;
  font-size: 16px;
  line-height: 1.4;
}
.bubble--me {
  border-radius: 18px 18px 4px 18px;
  background: var(--sage-ink);
  color: var(--page);
}
.bubble--marge {
  border-radius: 18px 18px 18px 4px;
  background: var(--fill);
}
/* Looks like a button in the product; here it's part of the picture. */
.convo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.convo__chip {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1.5px solid var(--sage-ink);
  border-radius: 999px;
  color: var(--sage-ink);
  font-size: 13px;
  font-weight: 600;
}

/* =====================================================================
   marge.health home ("Direction B", owner-approved 2026-10-11): one line, the real product big in a window,
   See her at work, one sage band, then the questions owners ask.
   ===================================================================== */

/* ---------- An app window around a real screen ---------- */
/* A light title bar, three neutral dots and a small pill naming what's open. The screens are real captures of
   Marge (marketing/screens/), from a pretend practice. */
.win {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 40px 80px -44px rgba(46, 51, 44, 0.45);
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--fill);
}
.win__dot {
  display: block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d3d6cb;
}
.win__pill {
  min-width: 0;
  margin-left: 12px;
  padding: 4px 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.win img {
  display: block;
  width: 100%;
  height: auto;
}
/* Two screens in one window (a plan's journey, then its schedule). */
.win img + img {
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
  .win__bar {
    gap: 6px;
    height: 30px;
    padding: 0 12px;
  }
  .win__dot {
    width: 9px;
    height: 9px;
  }
  .win__pill {
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 11.5px;
  }
}

/* Wide screens only: a window runs off the right edge of the page, its screen at the screen's own size (the
   image's sizes attribute says how wide). Phones and tablets get the whole screen, scaled to the column. */
.bleed-host {
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 1100px) {
  .bleed {
    margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2));
  }
  .bleed .win {
    border-right: 0;
    border-radius: 14px 0 0 14px;
  }
  .bleed .win img[sizes] {
    width: auto;
    max-width: none;
  }
}

/* ---------- Hero: the line, two buttons, Ask Marge in a window ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 88px);
}
.hero__title {
  margin: 0;
  font-size: clamp(56px, 9.2vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--sage-ink);
}
.hero__lead {
  margin: 22px 0 0;
  max-width: 30em;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
}
.actions--center {
  justify-content: center;
}
.hero .actions {
  margin-top: 30px;
}
.hero__stage {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin-top: clamp(44px, 5vw, 64px);
  text-align: left;
}
/* A hand-drawn marker arrow toward the screen, where there's room beside it. */
.hero__arrow {
  display: none;
  position: absolute;
  top: 132px;
  left: -134px;
  width: 120px;
  height: 92px;
}
@media (min-width: 1180px) {
  .hero__arrow {
    display: block;
  }
}
.hero__note {
  --fold: 18px;
  position: absolute;
  z-index: 2;
  top: -30px;
  right: -64px;
  width: 214px;
  transform: rotate(3deg);
}
.hero__note .note__paper {
  padding: 16px 18px 26px;
  font-size: 17px;
  line-height: 1.3;
}
@media (max-width: 1100px) {
  .hero__note {
    right: -8px;
  }
}
/* The role tabs: each opens Try Marge as that person. Provider is shown as the current one: the screen above is a
   provider's morning. */
.roles {
  max-width: 100%;
  margin-top: 28px;
}
.roles__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border-radius: 28px;
  background: var(--fill);
}
.roles__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--sage-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.roles__list a:hover {
  background: var(--white);
  color: var(--sage-ink);
}
.roles__list a[aria-current='true'] {
  background: var(--sage-ink);
  color: var(--page);
}
.hero__fine {
  margin-top: 14px;
}
@media (max-width: 700px) {
  /* The note sits above the window instead of over its corner. */
  .hero__note {
    position: relative;
    top: auto;
    right: auto;
    width: fit-content;
    max-width: 15em;
    margin: 0 4px -10px auto;
    transform: rotate(2deg);
  }
  .hero__note .note__paper {
    padding: 12px 14px 22px;
    font-size: 15.5px;
  }
}
@media (max-width: 600px) {
  .hero {
    padding-top: 36px;
  }
  .hero .actions {
    width: 100%;
  }
  .hero .actions .btn {
    flex: 1 1 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  .roles__list a {
    padding: 0 14px;
  }
}

/* ---------- See her at work: three things, as tabs (marge/home.js), each with its real screen ---------- */
.m101 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 48px;
  align-items: start;
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(64px, 9vw, 112px);
}
@media (min-width: 900px) {
  .m101 {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  }
}
.m101__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.m101__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}
.m101__item {
  border-radius: 12px;
}
/* Without the script each item is plain text; with it, the button inside is the tab. */
.m101__item,
.m101__tab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
}
.m101.is-live .m101__item {
  padding: 0;
}
.m101__tab {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.m101__item:not(.is-on) .m101__tab:hover {
  background: var(--fill);
}
.m101__item.is-on {
  background: var(--white);
  box-shadow:
    inset 3px 0 0 var(--sage-ink),
    0 1px 0 var(--line);
}
.m101__name {
  font-size: 20px;
  font-weight: 750;
  color: var(--sage-ink);
}
.m101__say {
  display: block;
  font-size: 15.5px;
  line-height: 1.5;
}
.m101.is-live .m101__item:not(.is-on) .m101__say {
  display: none;
}
/* A sage panel behind the screen; the window runs past its right edge. */
.m101__stage {
  min-width: 0;
  padding: clamp(16px, 3vw, 40px) 0 clamp(16px, 2.4vw, 28px) clamp(16px, 3vw, 40px);
  overflow: hidden;
  border-radius: 22px;
  background: var(--sage-light);
}
@media (min-width: 900px) {
  .m101__stage .win {
    margin-right: -48px;
    border-right: 0;
  }
  /* The screen itself ends at the panel's edge, so nothing on it is cut off; the window's white runs on. */
  .m101__view img {
    width: calc(100% - 48px);
  }
}
@media (max-width: 899px) {
  /* Narrow: the whole screen, scaled to the panel. */
  .m101__stage {
    padding-right: clamp(16px, 3vw, 40px);
  }
}
.m101__view {
  overflow: hidden;
}
@media (min-width: 900px) {
  /* One height for all three, so the page doesn't jump when the tab changes; the tallest screen is cropped. */
  .m101__view {
    aspect-ratio: 820 / 570;
  }
}
/* A tab can hold more than one screen: they sit side by side and scroll (swipe on a phone; arrows and dots
   from home.js). The room above them keeps each note's top from being clipped. */
.m101__slides {
  display: flex;
  gap: 24px;
  margin-top: -10px;
  padding-top: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.m101__slides::-webkit-scrollbar {
  display: none;
}
.m101__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.m101__pager {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.m101__step {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--input-line);
  border-radius: 50%;
  background: var(--white);
  color: var(--sage-ink);
  cursor: pointer;
}
.m101__step:disabled {
  opacity: 0.35;
  cursor: default;
}
.m101__dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.m101__dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sage);
}
.m101__dot[aria-current='true']::before {
  background: var(--sage-ink);
}
.m101__count {
  margin-left: 6px;
  color: var(--ink-2);
  font-size: 15px;
}

/* Marge's note on each screen: what she did there, in her voice (her yellow, as in the hero). */
.m101__note {
  --fold: 16px;
  position: absolute;
  z-index: 2;
  top: -6px;
  right: 28px;
  width: 250px;
  transform: rotate(2deg);
}
.m101__note .note__paper {
  padding: 14px 16px 24px;
  font-size: 16px;
  line-height: 1.3;
}
/* Over the screen's dimmed side, where it hides nothing (Who's due back: the panel is on the right). */
.m101__note--left {
  right: auto;
  left: 28px;
  transform: rotate(-2deg);
}
@media (max-width: 899px) {
  .m101__note {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    max-width: 320px;
    margin: 0 0 14px;
    transform: rotate(-1deg);
  }
}
/* A wide list (Who’s due back): the list's card on the app's grey, the way the page shows it, with the grey below. */
.m101__view--fill {
  padding: clamp(14px, 2vw, 24px) 0 0 clamp(14px, 2vw, 24px);
  background: var(--fill);
}
.m101__view--fill img {
  border-radius: 12px 0 0 12px;
}
/* The scribe: the small recording bar at its own size, then the drafted note, stacked on the app's grey. */
.m101__view--stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(14px, 2vw, 24px);
  background: var(--fill);
  aspect-ratio: auto !important;
}
.m101__view--stack img {
  /* The window runs off the page's right edge here: keep the note inside the part that shows. */
  width: min(100%, 640px);
  height: auto;
  border-radius: 12px;
}
.win .m101__view--stack img + img {
  border-top: 0;
}
.m101__view--stack img.m101__bar {
  align-self: flex-start;
  width: min(100%, 384px);
  border-radius: 999px;
}
.m101__stage .fine {
  margin-top: 14px;
  padding-right: 16px;
}

/* ---------- The sage band: from the schedule to the order ---------- */
.ahead {
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6vw, 72px);
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(64px, 9vw, 112px);
}
.ahead .h2 {
  max-width: 16em;
}
.ahead .lead {
  max-width: 34em;
}
.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 56px;
  align-items: center;
}
.pair__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 34em;
}
.pair__text h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 750;
  color: var(--sage-ink);
}
.pair__text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}
/* Refills: the words side by side, the whole queue under them at its own size. */
.pair--wide .win {
  max-width: 1118px;
}
@media (min-width: 900px) {
  .pair--wide .pair__text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    align-items: baseline;
    gap: 10px 56px;
    max-width: none;
  }
  .pair--wide .pair__text p {
    grid-column: 2;
  }
  .pair--side {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

/* ---------- Built for someone else (struck out) / built for you ---------- */
.why {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.why .h2 {
  max-width: 15em;
}
.versus {
  display: flex;
  flex-direction: column;
}
.versus__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px 40px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.versus__was {
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  color: var(--ink-2);
}
.versus__was s {
  text-decoration-color: var(--sage-ink);
  text-decoration-thickness: 2px;
}
.versus__now {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.versus__now h3 {
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.15;
  font-weight: 750;
  color: var(--sage-ink);
}
.versus__now p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}
@media (min-width: 760px) {
  .versus__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* Built for someone else, row by row: the complaint large, crossed out by hand in Marge's yellow; her
   answer beside it. One under the other on a phone. */
.why--rows .versus {
  display: flex;
  flex-direction: column;
}
.why--rows .versus__row {
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 12px 64px;
  padding: clamp(24px, 2.6vw, 34px) 0;
}
@media (min-width: 760px) {
  .why--rows .versus__row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}
.why--rows .versus__was {
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.why--rows .versus__was s {
  text-decoration: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 85 10, 125 6 S 178 3, 198 6' fill='none' stroke='%23E2BF45' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
    left 62% / 100% 0.42em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.why--rows .versus__now {
  gap: 8px;
  max-width: 34em;
}
.why--rows .versus__now h3 {
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.15;
}
.why--rows .versus__now p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
}

/* ---------- Is our patient data safe? Then three plain questions ---------- */
.safe {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
  padding-top: clamp(64px, 9vw, 104px);
  padding-bottom: clamp(64px, 9vw, 104px);
}
.safe__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 56px;
  align-items: center;
}
@media (min-width: 900px) {
  .safe__top {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  }
}
.safe__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.safe__copy .lead {
  max-width: 26em;
}
/* A plain link: words, underlined, nothing after them. */
.plain-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 650;
  text-underline-offset: 4px;
}
.qas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 36px 40px;
}
.qa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 2px solid var(--sage-ink);
}
.qa h3 {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 750;
  color: var(--sage-ink);
}
.qa p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- Switching, and the Founding Clinics card ---------- */
.move {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 64px;
  align-items: center;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
@media (min-width: 900px) {
  .move {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}
.move__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.move__copy .h2 {
  line-height: 1;
  letter-spacing: -0.025em;
}
.move__copy .lead {
  max-width: 30em;
}
.move__copy .actions {
  padding-top: 6px;
}
.move__founding {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 20px;
  background: var(--fill);
}
.move__founding h3 {
  font-size: clamp(24px, 2.4vw, 28px);
  line-height: 1.1;
  font-weight: 750;
  color: var(--sage-ink);
}
.move__founding .btn {
  align-self: flex-start;
}
.move__founding p:last-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- Closing: Just ask Marge, again ---------- */
.ask-again {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(64px, 9vw, 104px);
}
.ask-again__title {
  margin: 0;
  font-size: clamp(48px, 6.4vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--sage-ink);
}
.ask-again .lead {
  max-width: 30em;
}
.ask-again .actions {
  padding-top: 10px;
}
@media (max-width: 600px) {
  .ask-again .actions,
  .move__copy .actions {
    width: 100%;
  }
  .ask-again .actions .btn,
  .move__copy .actions .btn {
    flex: 1 1 0;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- Numbered steps (founding: how it works) ---------- */
/* Ruled columns, not boxes. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 28px 32px;
}
.steps--narrow {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--sage-ink);
}
.step__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.step h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--sage-ink);
}
.steps--narrow .step h3 {
  font-size: 21px;
}
.step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Security and HIPAA page ---------- */
.secure {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: clamp(56px, 8vw, 96px);
}
/* Flex bases with padding and border (border-box): the design's 480 / 320 + 2 x 28 + 2. */
.secure__box {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.secure__box h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 750;
  color: var(--sage-ink);
}
.secure__box .secure__then {
  margin-top: 12px;
}
.secure__box--ours {
  flex: 3 1 538px;
  background: var(--white);
}
.secure__box--yours {
  flex: 2 1 378px;
}
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px 28px;
}
.checks li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}
.checks svg {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.checks strong {
  font-weight: 650;
}
.secure__box--yours ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
}
.secure__box--yours .note {
  --fold: 20px;
  margin-top: 8px;
  transform: rotate(-1deg);
}
.secure__box--yours .note__paper {
  padding: 18px 20px 28px;
  font-size: 17px;
  line-height: 1.35;
}
@media (max-width: 400px) {
  .secure__box {
    padding: 24px 20px;
  }
}

/* ---------- Features page ---------- */
.fhead {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: 24px;
}
.fhead__title {
  margin: 0;
  max-width: 16em;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--sage-ink);
}
.fhead .lead {
  max-width: 40em;
}
.fhead--40 {
  padding-bottom: 40px;
}
.fhead__title--15 {
  max-width: 15em;
}
/* "On this page": the features page's sections, as pills under the heading. */
.onpage__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding-top: 8px;
}
.onpage__links a {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--input-line);
  border-radius: 999px;
  color: var(--sage-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.onpage__links a:hover {
  border-color: var(--sage-ink);
  color: var(--sage-ink);
}
.fsection {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.fsection--last {
  padding-bottom: clamp(64px, 9vw, 104px);
}
/* One line under each section's title: the spirit its smaller features share, carried by an example or two. */
.fsection__spirit {
  margin: -8px 0 0;
  max-width: 44em;
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
}
.fsection__title {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sage-ink);
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.02em;
  font-weight: 750;
  color: var(--sage-ink);
}
/* Each feature is a ruled column on the page, not a card. */
/* A real screen under a section's heading, inside the column. Tall ones are cut at a set height and fade out. */
.fshot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 6px;
}
.fshot .win {
  max-width: 980px;
}
.fshot--crop .win {
  max-height: 440px;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent);
}
/* A small capture (Ask Marge's panel) stays at its own size instead of stretching. */
.fshot--narrow .win {
  max-width: 560px;
}
.fshot__cap {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 30px 36px;
}
.fcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.fcard h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--sage-ink);
}
.fcard p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
}
.fcard .fcard__why {
  font-size: 14.5px;
  color: var(--sage-ink-hover);
}
.fcard__why strong {
  font-weight: 650;
}
.fcard__aside {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
/* The two that matter most when choosing (FHIR, your data): a heavier rule. */
.fcard--key {
  border-top: 3px solid var(--sage-ink);
}
.explain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 32px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--fill);
}
.explain h3 {
  flex: 1 1 260px;
  font-size: 19px;
  font-weight: 750;
  color: var(--sage-ink);
}
.explain p {
  flex: 3 1 520px;
  min-width: 0;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}
.explain strong {
  font-weight: 650;
}

/* A closing call on a sage band (features and security pages). */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.cta .h2 {
  flex: 1 1 520px;
  min-width: 0;
}
.cta--88 {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

/* ---------- Try Marge and Book a demo pages ---------- */
.page-title {
  margin: 0;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--sage-ink);
}
.try-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.try-page .intro {
  gap: 12px;
}
.try {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.try__ask {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.try__ask .fine {
  font-size: 14px;
  line-height: 1.5;
}
.try__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.try__role {
  min-height: 44px;
  padding: 11px 16px;
  border: 1.5px solid var(--input-line);
  border-radius: 999px;
  background: var(--white);
  color: var(--sage-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.try__role:hover {
  border-color: var(--sage-ink);
}
.try__role[aria-selected='true'] {
  border-color: var(--sage-ink);
  background: var(--sage-ink);
  color: var(--page);
}
/* Phones: each role picker is one row that scrolls sideways (the cut-off last pill says there's more),
   instead of wrapping 2 + 2 + 1. */
@media (max-width: 600px) {
  .roles {
    align-self: stretch;
  }
  .roles__list,
  .try__roles {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .roles__list::-webkit-scrollbar,
  .try__roles::-webkit-scrollbar {
    display: none;
  }
  .roles__list li,
  .try__role {
    flex: none;
    scroll-snap-align: start;
  }
  .roles__list a,
  .try__role {
    white-space: nowrap;
  }
  /* The buttons fade out at the right edge instead of being cut off hard; the space after the last one lets it
     scroll clear of the fade. The home row's fill moves to the nav so only the buttons fade, not the fill. */
  .roles__list,
  .try__roles {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .roles__list li:last-child,
  .try__role:last-child {
    margin-right: 32px;
  }
  .roles {
    padding: 6px;
    border-radius: 999px;
    background: var(--fill);
  }
  .roles__list {
    padding: 0;
    border-radius: 999px;
    background: none;
  }
}
.try__questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.try__q {
  padding: 14px 16px;
  border: 1px solid var(--input-line);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.try__q:hover {
  border-color: var(--sage-ink);
}
.try__q.is-asked {
  border-color: var(--line);
  background: var(--fill);
  color: var(--ink-2);
  cursor: default;
}
/* Flex basis with its padding and border (border-box): the design's 520 + 2 x 24 + 2. */
.try__chat {
  flex: 2 1 570px;
  min-width: 0;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 30px 60px -30px rgba(46, 51, 44, 0.3);
}
.try__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.try__head svg {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
}
.try__name {
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  color: var(--sage-ink);
}
.try__practice {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-2);
  text-align: right;
}
.try__empty {
  margin: auto 0;
  font-size: 17px;
  color: var(--ink-2);
  text-align: center;
}
.try__log,
.try__static {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.convo__a--wide {
  max-width: 92%;
}
.try .bubble--marge {
  line-height: 1.45;
}
.convo__src {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
@media (max-width: 480px) {
  .try__chat {
    min-height: 360px;
    padding: 18px 14px;
  }
  .convo__a--wide {
    max-width: 100%;
  }
}
/* A closing call in a rounded sage box (Try Marge). */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 22px;
}
.band__copy {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.band__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 750;
  color: var(--sage-ink);
}
.band__copy p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.demo__copy {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.demo__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 17px;
  line-height: 1.5;
}
.demo__aside {
  margin: 0;
  font-size: 16px;
  color: var(--ink-2);
}
.demo__aside a {
  font-weight: 600;
}
/* The design's 460 + 2 x 28 + 2. */
.demo .form {
  flex: 1 1 518px;
}
.field__optional {
  font-weight: 400;
  color: var(--ink-2);
}

/* ---------- Founding Clinics page ---------- */
.fhero {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: clamp(40px, 7vw, 96px);
  padding-bottom: clamp(56px, 8vw, 104px);
}
.fhero__title {
  margin: 0;
  max-width: 14em;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--sage-ink);
}
.fhero__lead {
  margin: 0;
  max-width: 36em;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
}
.fhero .actions {
  align-items: center;
  gap: 14px 22px;
  padding-top: 6px;
}
.fhero__spots {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.deal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 48px;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(64px, 9vw, 112px);
}
.deal__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.deal__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.deal__item h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--sage-ink);
}
.deal__item p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.deal .note {
  --fold: 20px;
  max-width: 360px;
  margin-top: 10px;
  transform: rotate(-1.5deg);
}
.deal .note__paper {
  padding: 20px 22px 30px;
  font-weight: 700;
}
.how {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
}
.apply {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(64px, 9vw, 112px);
}
.apply__copy {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Flex bases include padding here (border-box); the design's were content-box, hence 520 + 2 x 28 + 2. */
.apply .form {
  flex: 1 1 578px;
}

/* ---------- Forms ---------- */
.form {
  position: relative;
  min-width: 0;
  padding: 28px;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
}
@media (max-width: 400px) {
  .form {
    padding: 22px 18px;
  }
}
.form--bordered {
  border: 1px solid var(--line);
}
.form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 14px;
}
.form__row--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field label,
.picks legend {
  font-size: 14px;
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid var(--input-line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.field textarea {
  resize: vertical;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--sage-ink);
  outline-offset: 1px;
  border-color: var(--sage-ink);
}
.field__hint {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}
/* Checkbox choices as pills ("What you offer"). */
.picks {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.picks legend {
  padding: 0 0 8px;
}
.picks__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.pick {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--input-line);
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
}
.pick input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sage-ink);
}
.form .btn {
  width: 100%;
  padding: 15px 22px;
}
.form .btn--strong {
  font-weight: 650;
}
.form__error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fde8e8;
  color: #8a1c1c;
  font-size: 15px;
  line-height: 1.45;
}
.form__error:empty {
  display: none;
}
.form__fine {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.form__done {
  padding: 8px 6px 14px;
}
.form__done:focus {
  outline: none;
}
.form__done .note {
  max-width: 340px;
  transform: rotate(-1.5deg);
}
.form__done .note__paper {
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
}
/* The honeypot: people never see it; bots fill it in. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 36px;
  padding-bottom: 48px;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  font-size: 15px;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Simple pages (404, privacy, terms) ---------- */
.simple {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
  padding-top: clamp(56px, 9vw, 112px);
  padding-bottom: clamp(56px, 9vw, 112px);
}
.simple__title {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 750;
  color: var(--sage-ink);
}
.simple .note {
  max-width: 360px;
  transform: rotate(-1.5deg);
}

/* =====================================================================
   blamemarge.com (and the sage top bar of marge.health/founding)
   ===================================================================== */

.bnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.bnav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  font-size: 15px;
  font-weight: 500;
}
.bnav__links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.bnav__links a:not(.btn):hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bnav__links .btn {
  padding: 11px 18px;
  font-weight: 650;
}
@media (max-width: 760px) {
  .bnav__links {
    gap: 0 18px;
  }
}

.bhero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding-top: clamp(40px, 7vw, 96px);
  padding-bottom: clamp(64px, 9vw, 120px);
}
.bhero__copy {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bhero__title {
  margin: 0;
  font-size: clamp(72px, 12vw, 172px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--sage-ink);
}
.bhero__kicker {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}
.bhero__lead {
  margin: 0;
  max-width: 32em;
  font-size: 19px;
  line-height: 1.55;
}
.bhero .actions {
  padding-top: 6px;
}
.bhero .btn--lg {
  font-weight: 650;
}
.bhero__notes {
  position: relative;
  flex: 1 1 360px;
  min-width: 0;
  min-height: 380px;
}
.bhero__notes .note {
  --fold: 24px;
  position: absolute;
  filter: drop-shadow(0 14px 16px rgba(46, 51, 44, 0.22));
}
.bhero__notes .note__paper {
  padding: 24px 24px 36px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}
.bhero__notes .note:nth-child(1) {
  top: 0;
  left: 6%;
  width: 64%;
  transform: rotate(-5deg);
}
.bhero__notes .note:nth-child(2) {
  top: 34%;
  right: 0;
  width: 60%;
  transform: rotate(4deg);
}
.bhero__notes .note:nth-child(3) {
  bottom: 0;
  left: 0;
  width: 62%;
  transform: rotate(-1.5deg);
}
@media (max-width: 640px) {
  /* Phones: the three notes stack, still a little crooked, with nothing hanging off the edge. */
  .bhero__notes {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 10px;
  }
  .bhero__notes .note:nth-child(n) {
    position: relative;
    inset: auto;
    width: min(290px, 86%);
  }
  .bhero__notes .note__paper {
    font-size: 20px;
  }
  .bhero__notes .note:nth-child(1) {
    transform: rotate(-3deg);
  }
  .bhero__notes .note:nth-child(2) {
    align-self: flex-end;
    transform: rotate(2.5deg);
  }
  .bhero__notes .note:nth-child(3) {
    transform: rotate(-1deg);
  }
}

/* ---------- House rules ---------- */
.rules {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}
.rules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px 28px;
}
.rule {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rule .note {
  --note-min: 84px;
}
.rule .note__paper {
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
}
.rule > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.rule:nth-child(1) .note {
  transform: rotate(-1.5deg);
}
.rule:nth-child(2) .note {
  transform: rotate(1.2deg);
}
.rule:nth-child(3) .note {
  transform: rotate(-0.8deg);
}
.rule:nth-child(4) .note {
  transform: rotate(1.5deg);
}
.rule:nth-child(5) .note {
  transform: rotate(-1.2deg);
}
.rule:nth-child(6) .note {
  transform: rotate(0.8deg);
}

/* ---------- Say it with us ---------- */
.sayit {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.sayit__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(64px, 9vw, 112px);
}
.sayit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px;
}
.sayit blockquote {
  margin: 0;
  padding-top: 18px;
  border-top: 3px solid var(--sage-ink);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  font-weight: 650;
  color: var(--sage-ink);
}
.sayit blockquote p {
  margin: 0;
}

/* ---------- Share yours ---------- */
.share {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}
.share__copy {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.share .form {
  flex: 1 1 518px;
}

/* ---------- Closing call ---------- */
.closing__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
}
.closing__title {
  flex: 1 1 520px;
  min-width: 0;
  margin: 0;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 750;
  color: var(--sage-ink);
}

/* ---------- blamemarge.com footer ---------- */
.bfooter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 36px;
  padding-bottom: 48px;
  font-size: 15px;
  color: var(--ink-2);
}
.bfooter p {
  margin: 0;
}
.bfooter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.bfooter a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* =====================================================================
   Phone polish (2026-10-11): one-row top bar with a menu, flatter chat pictures, wider gutters, a cleaner footer.
   ===================================================================== */
:root {
  --gutter: clamp(24px, 4vw, 48px);
}

/* The menu (phones only): links that don't fit the one-row top bar. */
.topnav__menu {
  display: none;
}
@media (max-width: 600px) {
  .topbar {
    position: relative;
    display: flex;
    align-items: center;
  }
  .topnav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .topnav__links,
  .topnav__login,
  .topnav__actions .btn--outline {
    display: none;
  }
  .topnav__actions {
    flex-wrap: nowrap;
  }
  .topnav__menu {
    display: block;
    padding-right: calc(var(--gutter) - 10px);
  }
  .topnav__menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
  }
  .topnav__menu summary::-webkit-details-marker {
    display: none;
  }
  .topnav__burger,
  .topnav__burger::before,
  .topnav__burger::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: var(--sage-ink);
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .topnav__burger {
    position: relative;
  }
  .topnav__burger::before,
  .topnav__burger::after {
    content: '';
    position: absolute;
    left: 0;
  }
  .topnav__burger::before {
    top: -6px;
  }
  .topnav__burger::after {
    top: 6px;
  }
  .topnav__menu[open] .topnav__burger {
    background: transparent;
  }
  .topnav__menu[open] .topnav__burger::before {
    transform: translateY(6px) rotate(45deg);
  }
  .topnav__menu[open] .topnav__burger::after {
    transform: translateY(-6px) rotate(-45deg);
  }
  .topnav__sheet {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 16px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 18px 30px -24px rgba(46, 51, 44, 0.4);
  }
  .topnav__sheet li + li {
    border-top: 1px solid var(--line-soft);
  }
  .topnav__sheet a {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 17px;
    font-weight: 550;
    color: var(--sage-ink);
    text-decoration: none;
  }
}

/* Chat pictures: Marge's avatar sits at the foot of her bubble (where its tail is); every time label on the left. */
.convo__a {
  align-items: flex-end;
}
.convo__q {
  align-self: stretch;
  max-width: none;
}
.convo__who {
  align-self: flex-start;
}
.convo__q .bubble--me {
  max-width: 86%;
}
@media (max-width: 600px) {
  .convo__q .bubble--me {
    max-width: 88%;
  }
  .bubble {
    font-size: 15.5px;
  }
}

/* Footer: the links as a tidy grid, the © line last. */
.footer__links a {
  text-decoration: none;
  color: var(--sage-ink);
}
.footer__links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 600px) {
  .footer {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-top: 32px;
  }
  .footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .footer__links a {
    justify-content: flex-start;
  }
}

/* ---------- Phones: a little more room between sections ---------- */
/* Each section's padding sits at its minimum on a phone; this gives every section about a quarter more there.
   Last in the file so it wins over the rules above; wider screens are unchanged. */
@media (max-width: 600px) {
  .m101 {
    padding-top: 40px;
  }
  .ahead,
  .why,
  .safe,
  .move,
  .ask-again,
  .deal,
  .apply,
  .rules,
  .sayit__inner,
  .share {
    padding-top: 80px;
  }
  .cta,
  .how,
  .simple,
  .closing__inner {
    padding-top: 72px;
  }
  .hero,
  .why,
  .secure,
  .cta,
  .how,
  .simple,
  .closing__inner,
  .fhero,
  .try-page {
    padding-bottom: 72px;
  }
  .fsection {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .m101,
  .ahead,
  .safe,
  .ask-again,
  .deal,
  .apply,
  .rules,
  .sayit__inner,
  .share,
  .bhero,
  .fsection--last {
    padding-bottom: 80px;
  }
  .move {
    padding-bottom: 40px;
  }
  .cta--88 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .try-page {
    gap: 40px;
  }
  .try {
    gap: 32px;
  }
}

/* ---------- Headlines in Fraunces ---------- */
/* The app's title face at the app's weight (owner, 2026-10-18: the site's fonts match the staff app). Last in the file so
   it sets the face, weight and spacing over each headline's own rule (sizes and colours stay theirs); Fraunces needs
   a little more line height than Bricolage did. */
.bhero__title,
.hero__title,
.fhero__title,
.ask-again__title,
.page-title,
.fhead__title,
.simple__title,
.closing__title,
.h2,
.band__title,
.fsection__title,
.pair__text h3,
.move__founding h3,
.versus__now h3,
.why--rows .versus__now h3,
.secure__box h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bhero__title,
.hero__title,
.fhero__title,
.ask-again__title,
.page-title,
.fhead__title {
  line-height: 1.02;
}