/* shared/css/tokens.css */
/* Shared family tokens for Suzi Doula and Daddy Doula.
   Palette and type from brand-identity/BRAND-DIRECTION.md. Each site maps the
   semantic tokens to its own personality in its first stylesheet. */

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oooh Baby";
  src: url("fonts/OoohBaby-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Approved family palette */
  --navy: #172c4c;
  --navy-deep: #101f39;
  --blush: #f1e8e4;
  --ivory: #fcfaf7;
  --white: #ffffff;
  --mist: #e8ecf1;
  --muted-ink: #556175;

  /* Semantic tokens (light) */
  --bg: var(--ivory);
  --bg-alt: var(--blush);
  --bg-cool: var(--mist);
  --surface: var(--white);
  --text: var(--navy);
  --text-muted: var(--muted-ink);
  --line: #d9d3cf;
  --line-strong: var(--navy);
  --accent: var(--navy);
  --accent-hover: #24406a;
  --on-accent: var(--ivory);
  --focus: var(--navy);
  --shadow: 0 1px 2px rgb(23 44 76 / 0.06), 0 12px 32px rgb(23 44 76 / 0.10);

  /* Type */
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Oooh Baby", "Segoe Script", cursive;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.55rem + 2.9vw, 3.9rem);

  /* Space and shape */
  --wrap: 1180px;
  --gutter: clamp(16px, 4.5vw, 48px);
  /* Section rhythm: the hero hands off with s, the page's one brand region
     gets l, everything else m. Adjacent sections should not share a pair. */
  --section-s: clamp(48px, 6vw, 80px);
  --section-m: clamp(64px, 9vw, 128px);
  --section-l: clamp(96px, 12vw, 176px);
  --section: var(--section-m);
  --radius-card: 0px; /* Retired: both sites keep photos, panels and cards square. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Light only, on purpose (Tim, 2026-09-25): no dark theme on either site,
     and "only" asks browsers not to auto-darken the pages. */
  color-scheme: only light;
}


/* shared/css/base.css */
/* Base layer shared by both sites: reset, type, layout, header and nav
   mechanics, buttons, forms, disclosure, badges, photo slots, print. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: clip;
}

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

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

h1,
h2,
h3,
h4 {
  font-weight: var(--display-weight, 400);
  letter-spacing: var(--display-tracking, -0.02em);
  line-height: 1.15;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

::selection {
  background: var(--bg-alt);
  color: var(--text);
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}

.skip-link:focus {
  top: 12px;
}

.hand {
  font-family: var(--font-hand);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.muted {
  color: var(--text-muted);
}

.nowrap {
  white-space: nowrap;
}

.prose > * + * {
  margin-top: 1em;
}

.prose {
  max-width: 62ch;
}

/* Buttons and text links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--accent);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--solid {
  background: var(--accent);
  color: var(--on-accent);
}

.btn--solid:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--line {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}

.btn--line:hover {
  background: var(--bg-alt);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.text-link .arrow,
.btn .arrow {
  transition: transform 0.2s var(--ease);
}

.text-link:hover .arrow,
.btn:hover .arrow {
  transform: translateX(3px);
}

/* Header and navigation mechanics. Each site styles the look. */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

.nav-toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  font-size: 0.9375rem;
  font-weight: 500;
}

@media (max-width: 879px) {
  .site-header {
    position: relative;
  }

  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .site-nav__list {
    flex-wrap: wrap;
    gap: 4px 20px;
  }

  .js .site-nav {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px var(--gutter) 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
  }

  .js .site-nav[data-open="true"] {
    display: flex;
  }

  .js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .site-nav__list a {
    width: 100%;
    min-height: 52px;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
  }

  .js .site-nav .btn {
    width: 100%;
  }
}

/* Disclosure lists (FAQs, curriculum) */

.disclosure {
  border-top: 1px solid var(--line-strong);
}

.disclosure details {
  border-bottom: 1px solid var(--line);
}

.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding-block: 18px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.2s var(--ease);
}

.disclosure details[open] > summary::after {
  transform: rotate(45deg);
}

.disclosure__body {
  padding-bottom: 24px;
  max-width: 64ch;
  color: var(--text-muted);
}

.disclosure__body > * + * {
  margin-top: 0.8em;
}

/* Availability badges: real product states only */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--available {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Forms */

.field {
  display: grid;
  gap: 8px;
}

.field + .field {
  margin-top: 22px;
}

.field label,
.field legend {
  font-weight: 500;
}

.field__hint {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--text-muted);
  border-radius: 0;
  color: var(--text);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--text);
}

.field [aria-invalid="true"] {
  border: 2px solid var(--text);
}

.field__error {
  font-size: var(--step--1);
  font-weight: 500;
}

.field__error:empty {
  display: none;
}

/* Reserved photo spaces in review builds */

.photo-slot {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
  padding: 24px;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgb(23 44 76 / 0.04) 14px 15px), var(--bg-alt);
  border: 1px dashed var(--text-muted);
  text-align: center;
}

.photo-slot figcaption {
  display: grid;
  gap: 6px;
  max-width: 26ch;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.photo-slot__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

/* Motion: gentle and optional */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .review-ribbon,
  .skip-link,
  .rv,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* suzi-doula/styles/10-suzi.css */
/* Suzi Doula personality, written to Mom. A white page, one blush region per
   page plus the blush footer, berry serif headings in Libre Caslon, rose
   controls, navy body text in Poppins, and Suzi's hand only for the logo,
   the home greeting and her signature. Light only.
   Color rule: rose and blush are Suzi and Mom; the cool mist only marks
   Daddy Doula (Dad's brand), so blue stays the secondary color.
   Shape rule: Controls (buttons, inputs, menu toggle, skip link) have 3px
   corners. Photos, panels and everything else are square. No pills, circles,
   arches, cards or shadows. This overrides any skill advice to use pill
   buttons.
   The full lock (tokens, type roles, script budget, bans) is in
   suzi-doula/DESIGN.md. */

/* Libre Caslon (SIL OFL 1.1, license files beside the fonts). One upright
   weight each; the browser must never fake a bolder or slanted style. */
@font-face {
  font-family: "Libre Caslon Display";
  src: url("fonts/LibreCaslonDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("fonts/LibreCaslonText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.site-suzi {
  /* Light tokens. WCAG ratios: body navy 13.99:1 on white, 10.74:1 on blush,
     11.79:1 on mist; muted 6.47:1 on white, 4.97:1 on blush; berry 8.03:1 on
     white, 6.17:1 on blush, 6.77:1 on mist; rose 5.47:1 on white. Rose text
     never sits on blush or mist (4.20:1), so links there switch to berry.
     White on rose 5.47:1, on hover 7.19:1, on press 8.03:1. Field border
     3.70:1 on white. */
  --bg: #ffffff;
  --surface: #ffffff;
  --blush: #f3ddd6; /* the one in-page region, and the footer */
  --blush-soft: #f9ede8; /* tiny fills only: hover, selection, focused field */
  --bg-cool: var(--mist); /* only where Daddy Doula is mentioned */
  --bg-alt: var(--blush-soft); /* older name for the tiny fill, never a section */
  --bg-deep: var(--blush); /* older name for the blush region */
  --text: #172c4c;
  --text-muted: #6a5a60;
  --heading: #7a3e4a;
  --accent: #a44f59;
  --accent-hover: #8c3f49;
  --accent-press: #7a3e4a;
  --on-accent: #ffffff;
  --link: var(--accent); /* berry inside blush and mist regions */
  --line: #ebd8d2;
  --line-strong: var(--heading); /* the one berry rule */
  --field-border: #9c7d84;
  --focus: #7a3e4a;
  --shadow: none;
  --radius-control: 3px;
  --radius-field: 3px;

  /* Type */
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --display-weight: 400;
  --display-tracking: -0.005em;
  --step-h1: clamp(2.4rem, 1.5rem + 3.2vw, 3.75rem);
  --step-h2: clamp(1.85rem, 1.35rem + 1.9vw, 2.75rem);
  --step-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-quote: clamp(1.6rem, 1.1rem + 1.9vw, 2.625rem);

  caret-color: var(--accent);
  font-synthesis: none;
}

.site-suzi ::selection {
  background: var(--blush-soft);
  color: var(--text);
}

/* Emphasis stays upright and within the loaded weights. */
.site-suzi :where(em, i, cite, address, dfn, var) {
  font-style: normal;
}

.site-suzi :where(strong, b) {
  font-weight: 500;
}

/* Headings: Libre Caslon Display for h1 and h2, Libre Caslon Text for h3 */

.site-suzi h1,
.site-suzi h2,
.site-suzi h3 {
  color: var(--heading);
  font-weight: 400;
}

.site-suzi h1,
.site-suzi h2 {
  font-family: var(--font-display);
}

.site-suzi h1 {
  font-size: var(--step-h1);
  line-height: 1.08;
  letter-spacing: -0.005em;
}

.site-suzi h2 {
  font-size: var(--step-h2);
  line-height: 1.12;
  letter-spacing: -0.005em;
}

.site-suzi h3 {
  font-family: var(--font-serif);
  font-size: var(--step-h3);
  line-height: 1.25;
  letter-spacing: 0;
}

.site-suzi .serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

.site-suzi .hand {
  color: var(--accent);
}

.site-suzi .section h2 + p,
.site-suzi .section h2 + .prose {
  margin-top: 20px;
}

/* Regions. The page's one blush region and the Daddy Doula mist strip are
   full-bleed and flat. Links and small text inside them turn berry. */

.site-suzi .region-blush {
  background: var(--blush);
  --link: var(--heading);
  --line: color-mix(in srgb, var(--heading) 24%, transparent);
}

.site-suzi .region-mist {
  background: var(--bg-cool);
  --link: var(--heading);
}

/* Links. Body links keep the ink color; standalone text links are serif. */

.site-suzi a {
  text-underline-offset: 4px;
}

.site-suzi .text-link {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}

.site-suzi .text-link:hover {
  color: var(--heading);
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* A text link that sits inside a sentence keeps the line's height. */
.site-suzi .text-link--inline {
  display: inline;
  min-height: 0;
  font-size: inherit;
}

/* Buttons: 3px corners, a serif label in sentence case, one solid button per
   viewport. The outline variant is rare. */

.site-suzi .btn {
  gap: 12px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}

.site-suzi .btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.site-suzi .btn--solid:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.site-suzi .btn--solid:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
  transform: translateY(1px);
}

.site-suzi .btn--line {
  background: transparent;
  border-color: var(--link);
  color: var(--link);
}

.site-suzi .btn--line:hover {
  background: var(--blush-soft);
}

.site-suzi .btn--line:active {
  transform: translateY(1px);
}

/* Focus: a 2px berry ring, square except where the control has 3px corners. */
.site-suzi :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.site-suzi .skip-link {
  border-radius: var(--radius-control);
}

/* Form fields */

.site-suzi input,
.site-suzi textarea,
.site-suzi select {
  border-radius: var(--radius-field);
}

.site-suzi .field input,
.site-suzi .field select,
.site-suzi .field textarea {
  border: 1px solid var(--field-border);
  background: var(--surface);
}

.site-suzi .field input:focus-visible,
.site-suzi .field select:focus-visible,
.site-suzi .field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent);
  background: var(--blush-soft);
}

.site-suzi .field [aria-invalid="true"] {
  border: 2px solid var(--accent);
}

/* Reserved photo spaces (review view only): square, with a warm stripe. */
.site-suzi .photo-slot {
  border-radius: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--heading) 7%, transparent) 14px 15px), var(--blush-soft);
}

/* Header */

.site-suzi .site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-suzi .wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}

.site-suzi .wordmark__name {
  font-family: var(--font-hand);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0;
  padding-top: 6px;
  color: var(--heading);
}

.site-suzi .site-nav__list a {
  color: var(--text);
}

.site-suzi .site-nav__list a:hover,
.site-suzi .site-nav__list a[aria-current="page"] {
  text-decoration-color: var(--accent);
}

/* The header's contact link is the outline button, so the page's own solid
   button stays the only solid one in the first view. */
.site-suzi .site-nav__cta {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 1rem;
}

/* Phone and tablet menu */
.site-suzi .nav-toggle {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 160ms var(--ease);
}

.site-suzi .nav-toggle:hover {
  background: var(--blush-soft);
}

@media (max-width: 879px) {
  .js .site-suzi .site-nav {
    border-bottom-color: var(--line);
    border-radius: 0;
  }
}

/* Footer: the blush block */

.site-suzi .site-footer {
  margin-top: 0;
  padding-block: 64px 32px;
  background: var(--blush);
  font-size: 0.9375rem;
  --link: var(--heading);
  --line: color-mix(in srgb, var(--heading) 24%, transparent);
}

.site-suzi .site-footer .wordmark__name {
  color: var(--heading);
}

.site-suzi .site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.3fr 1.2fr;
  gap: 40px;
}

.site-suzi .site-footer__brand .wordmark__name {
  font-size: 2.5rem;
}

.site-suzi .site-footer__brand p {
  margin-top: 8px;
  color: var(--text-muted);
  max-width: 26ch;
}

.site-suzi .site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

/* Standalone footer links meet the 44px touch target. */
.site-suzi .site-footer ul a,
.site-suzi .site-footer__contact a:not(.rv) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-suzi .site-footer a {
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.site-suzi .site-footer a:hover {
  text-decoration-color: currentColor;
}

.site-suzi .site-footer__contact {
  display: grid;
  gap: 0;
  align-content: start;
  overflow-wrap: anywhere;
}

.site-suzi .site-footer__cross {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}

.site-suzi .site-footer__cross-heading {
  font-weight: 500;
}

.site-suzi .site-footer__cross p + p {
  margin-top: 6px;
  color: var(--text-muted);
}

.site-suzi .site-footer__cross .text-link {
  color: var(--link);
}

.site-suzi .site-footer__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 40px;
  margin-top: 56px;
  padding-top: 24px;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* The hairline above the base line sits inside the gutters. */
.site-suzi .site-footer__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--line);
}

.site-suzi .site-footer__base p:first-child {
  max-width: 70ch;
}

@media (max-width: 959px) {
  .site-suzi .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-suzi .site-footer__cross {
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid var(--line);
    grid-column: 1 / -1;
  }
}

@media (max-width: 559px) {
  .site-suzi .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Shared page pieces used across Suzi's pages */

.photo-note {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Sits on the grid's left edge like every other page; only the text is capped. */
.not-found > * {
  max-width: 60ch;
}

.not-found h1 {
  margin-bottom: 16px;
}

.not-found p + p {
  margin-top: 28px;
}

.page-intro {
  padding-block: var(--section-s) clamp(32px, 5vw, 64px);
}

.page-intro h1 {
  max-width: 18ch;
}

.page-intro p {
  margin-top: 20px;
  max-width: 56ch;
  font-size: var(--step-1);
  color: var(--text);
}

/* The /review/ page (review builds only): keep its section headings below the
   page title, and its items square. */
.site-suzi .review h2 {
  font-size: var(--step-2);
}

.site-suzi .review__item h3 {
  font-size: var(--step-1);
}

.site-suzi .review__item {
  border-radius: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .site-suzi main > section:first-child {
    animation: suzi-rise 0.9s var(--ease) both;
  }

  @keyframes suzi-rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* suzi-doula/styles/20-home.css */
/* Suzi Doula home page, written to Mom. Colors come only from the Suzi tokens
   in 10-suzi.css. The page is white; "Don't take my word for it!" is its one
   blush region, and the mist strip marks only the Daddy Doula line. Photos are
   square with no mats, nothing sits in a panel or card, and 1px rules carry
   the structure. Sections vary their padding: the hero hands off with s, the
   blush region gets l, the rest m. */

/* A 12-column grid from 768px up; every split is one column below that. */

.s-hero__grid,
.s-you__grid,
.s-letter__grid,
.s-words__grid,
.s-help__list,
.s-invite__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}

/* Hero: a letter. The headline first, then Suzi's handwritten hello opens the
   first paragraph. Her portrait runs off the right edge on wide screens. */

.s-hero {
  padding-block: var(--section-s);
  overflow: clip;
}

.s-hero__grid {
  align-items: center;
}

.s-hero__copy {
  grid-column: 1 / span 7;
}

.s-hero h1 {
  max-width: 15ch;
}

.s-hero__text {
  margin-top: 28px;
  max-width: 40ch;
  font-size: var(--step-1);
  color: var(--text);
}

.s-hero__greeting {
  margin-right: 0.1em;
  font-size: clamp(1.9rem, 1.6rem + 0.8vw, 2.25rem);
  line-height: 1;
  color: var(--accent);
}

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  margin-top: 36px;
}

.s-hero__photo {
  grid-column: 8 / -1;
  margin: 0;
}

.s-hero__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--blush-soft);
}

@media (min-width: 960px) {
  /* The distance from the grid's right edge to the window's right edge. */
  .s-hero {
    --bleed: max(var(--gutter), (100vw - var(--wrap)) / 2);
  }

  .s-hero__photo {
    margin-right: calc(-1 * var(--bleed));
  }

  .s-hero__img {
    max-height: 640px;
  }
}

/* For you: what Suzi wants for Mom. Open, no panel; the question that used to
   sit above the heading now starts it. */

.s-you {
  padding-block: var(--section-s) var(--section-m);
}

.s-you__grid {
  row-gap: 28px;
  align-items: start;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

.s-you__heading {
  grid-column: 1 / span 6;
  max-width: 17ch;
}

.s-you__kicker {
  display: block;
}

.s-you__copy {
  grid-column: 7 / -1;
  padding-top: 6px;
}

.s-you__copy p {
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.7;
}

.s-you__copy p + p {
  margin-top: 16px;
}

/* Letter: a family photo, Suzi's story, her signature */

.s-letter {
  padding-bottom: var(--section-m);
}

.s-letter__grid {
  row-gap: 40px;
  align-items: center;
}

.s-letter__photo {
  grid-column: 1 / span 5;
  margin: 0;
}

.s-letter__img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  background: var(--blush-soft);
}

.s-letter__copy {
  grid-column: 7 / -1;
}

.s-letter__copy h2 {
  max-width: 18ch;
}

.s-letter__copy > p {
  margin-top: 18px;
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.75;
}

.s-letter__copy > .s-letter__sign {
  margin-top: 16px;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--accent);
}

/* Families' words: the page's one blush region. The lead quote is set large
   in Caslon with no card; the others sit between hairline rules. */

.s-words {
  padding-block: var(--section-l);
}

.s-words__grid {
  row-gap: 40px;
  margin-top: 48px;
  align-items: start;
}

.s-quote,
.s-quote blockquote {
  margin: 0;
}

.s-quote--lead {
  grid-column: 1 / span 6;
}

.s-quote--lead blockquote p {
  font-family: var(--font-display);
  font-size: var(--step-quote);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  text-indent: -0.4em;
}

.s-words__more {
  grid-column: 8 / -1;
  display: grid;
}

.s-words__more .s-quote {
  padding-block: 24px;
  border-top: 1px solid var(--line);
}

.s-words__more .s-quote:first-child {
  padding-top: 8px;
  border-top: 0;
}

.s-words__more blockquote p {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text);
}

.s-quote figcaption {
  margin-top: 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

.s-quote--lead figcaption {
  margin-top: 24px;
}

/* Two ways to help: two open columns under one berry rule. The close below
   holds the page's next solid button, so both actions here are text links. */

.s-help {
  padding-block: var(--section-m) var(--section-s);
}

.s-help__list {
  row-gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
}

.s-offer:first-child {
  grid-column: 1 / span 5;
}

.s-offer:last-child {
  grid-column: 7 / span 5;
}

.s-offer p {
  margin-top: 12px;
  max-width: 44ch;
  line-height: 1.7;
}

.s-help__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  margin-top: 48px;
}

/* The one Daddy Doula mention: a flat, square, full-width mist strip */

.s-dad {
  padding-block: clamp(28px, 4vw, 44px);
}

.s-dad__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 40px;
  align-items: center;
}

.site-suzi .s-dad h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  line-height: 1.2;
}

.s-dad__copy p {
  margin-top: 6px;
  max-width: 52ch;
}

/* Close: left-aligned on the grid. The heading on the left, the one button
   and the other ways to reach Suzi on the right. */

.s-invite {
  padding-block: var(--section-m) var(--section-l);
}

.s-invite__grid {
  row-gap: 32px;
  align-items: end;
}

.s-invite__head {
  grid-column: 1 / span 6;
}

.s-invite__head h2 {
  max-width: 16ch;
}

.s-invite__text {
  margin-top: 20px;
  max-width: 44ch;
  font-size: var(--step-1);
}

.s-invite__act {
  grid-column: 8 / -1;
}

.s-invite__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.s-invite .s-invite__elsewhere {
  margin-top: 20px;
  max-width: 34ch;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.s-invite__elsewhere a {
  color: var(--text);
}

/* Wide screens: the second column moves out to leave a gutter column. */

@media (min-width: 960px) {
  .s-you__heading,
  .s-quote--lead,
  .s-invite__head {
    grid-column: 1 / span 7;
  }

  .s-you__copy,
  .s-words__more,
  .s-invite__act {
    grid-column: 9 / -1;
  }
}

/* Phone: every split becomes one column */

@media (max-width: 767px) {
  .s-hero__grid,
  .s-you__grid,
  .s-letter__grid,
  .s-words__grid,
  .s-help__list,
  .s-invite__grid,
  .s-dad__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-hero__grid > *,
  .s-you__grid > *,
  .s-letter__grid > *,
  .s-words__grid > *,
  .s-help__list > .s-offer,
  .s-invite__grid > * {
    grid-column: 1 / -1;
  }

  .s-hero__grid {
    row-gap: 40px;
  }

  .s-letter__copy {
    order: -1;
  }

  .s-words__more .s-quote:first-child {
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }

  /* The narrow gutter leaves no room to hang the opening mark. */
  .s-quote--lead blockquote p {
    text-indent: 0;
  }
}

/* suzi-doula/styles/30-meet.css */
/* Suzi Doula: Meet Suzi page (sm-) */

/* One letter to Mom on a white page. The square portrait sits in the left five
   columns with no mat, and on wide screens it stays in view while the letter
   is read in the right six. "My heart's desire for you" continues in the same
   columns under a hairline, and its Dad line is one plain sentence with a
   text link. One mom's words fill the page's one blush region. The close sits
   left-aligned on the grid. Colors come only from the tokens in 10-suzi.css.
   Section padding: the letter opens with s, the blush region gets l, the rest
   m. */

.sm-letter__grid,
.sm-you__grid,
.sm-words__grid,
.sm-invite__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}

/* The letter: portrait on the left, the words on the right */

.sm-letter {
  padding-block: var(--section-s) var(--section-m);
}

.sm-letter__head {
  grid-column: 7 / -1;
  grid-row: 1;
}

.sm-letter h1 {
  max-width: 11em;
  text-wrap: balance;
}

.sm-letter__lede {
  margin-top: 24px;
  max-width: 36ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text);
}

.sm-letter__portrait {
  grid-column: 1 / span 5;
  grid-row: 1 / span 2;
  align-self: start;
  position: sticky;
  top: 32px;
  margin: 0;
}

.sm-letter__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--blush-soft);
}

.sm-letter__body {
  grid-column: 7 / -1;
  grid-row: 2;
  max-width: 58ch;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.sm-letter__body h2 {
  margin-bottom: 20px;
}

.sm-letter__body p,
.sm-you__copy p {
  font-size: var(--step-1);
  line-height: 1.75;
}

/* Spacing by paragraph, not by neighbor: the photo slot between paragraphs
   is hidden in the clean view, which would otherwise break "p + p". */
.sm-letter__body > p {
  margin-top: 1.1em;
}

.sm-letter__body > h2 + p {
  margin-top: 0;
}

/* Reserved photo space (review view only), square like the photos */
.sm-letter__slot {
  margin-block: 40px;
}

/* Her signature: the page's one handwritten line, upright */
.sm-letter__body .sm-letter__signature {
  margin-top: 20px;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--accent);
}

.sm-letter__body .sm-letter__training {
  margin-top: 24px;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* My heart's desire for you: the heading in the portrait column, the words in
   the letter column, so it reads as the rest of the same letter. */

.sm-you {
  padding-bottom: var(--section-m);
}

.sm-you__grid {
  row-gap: 24px;
  align-items: start;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

.sm-you__side {
  grid-column: 1 / span 5;
}

.sm-you__side h2 {
  max-width: 11ch;
}

.sm-you__slot {
  margin-top: 32px;
  max-width: 320px;
}

.sm-you__copy {
  grid-column: 7 / -1;
  max-width: 58ch;
}

/* Her call-out opens the section a size up, like a spoken hello. */
.sm-you__copy > p:first-child {
  font-size: var(--step-2);
  line-height: 1.45;
  text-wrap: balance;
}

.sm-you__copy > p + p {
  margin-top: 1.1em;
}

/* The page's one Dad line: a plain sentence with a text link, no box. */
.sm-you__copy > .sm-you__dad {
  margin-top: 32px;
  font-size: var(--step-0);
  line-height: 1.65;
}

/* One mom's words: the page's one blush region. The only quote on the page,
   so it is set a size above home's lead quote, in Caslon with the opening
   mark hung in the margin, and no card. */

.sm-words {
  padding-block: var(--section-l);
}

.sm-quote {
  grid-column: 1 / span 10;
  margin: 0;
}

.sm-quote blockquote {
  margin: 0;
}

.sm-quote blockquote p {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  text-indent: -0.4em;
}

.sm-quote figcaption {
  margin-top: 28px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

/* Invitation: the page's one solid button, left-aligned on the grid. The
   heading on the left, her line and the button on the right. */

.sm-invite {
  padding-block: var(--section-m) var(--section-l);
}

/* The heading and her line share a first baseline. */
.sm-invite__grid {
  row-gap: 24px;
  align-items: baseline;
}

.sm-invite__head {
  grid-column: 1 / span 6;
  max-width: 14ch;
}

.sm-invite__act {
  grid-column: 8 / -1;
}

.sm-invite__act p {
  max-width: 34ch;
  font-size: var(--step-1);
}

.sm-invite .sm-invite__action {
  margin-top: 28px;
}

@media (min-width: 960px) {
  .sm-invite__head {
    grid-column: 1 / span 7;
  }

  .sm-invite__act {
    grid-column: 9 / -1;
  }
}

/* Phone and small tablet: one column */

@media (max-width: 767px) {
  .sm-letter__grid,
  .sm-you__grid,
  .sm-words__grid,
  .sm-invite__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sm-letter__grid > *,
  .sm-you__grid > *,
  .sm-words__grid > *,
  .sm-invite__grid > * {
    grid-column: 1 / -1;
  }

  .sm-letter__head {
    grid-row: 1;
  }

  .sm-letter__portrait {
    grid-row: 2;
    position: static;
    max-width: 420px;
    margin-top: 32px;
  }

  .sm-letter__body {
    grid-row: 3;
    margin-top: 40px;
  }

  .sm-letter__slot {
    margin-block: 32px;
  }

  .sm-you__side h2 {
    max-width: none;
  }

  .sm-you__slot {
    margin-top: 24px;
  }

  .sm-invite__grid {
    align-items: start;
  }

  /* The narrow gutter leaves no room to hang the opening mark. */
  .sm-quote blockquote p {
    text-indent: 0;
  }
}

/* suzi-doula/styles/40-work.css */
/* Suzi Doula: Work with Suzi page (sw-)
   Written to Mom. Colors come only from the Suzi tokens in 10-suzi.css. The
   page is white; the zoom hour is its one full-bleed blush region. Photos are
   square with no mats, nothing sits in a panel or card, and 1px rules carry
   the structure: the details ledger, the ruled price block and the numbered
   steps. The Daddy Doula line is a plain sentence with a text link, no box.
   Sections vary their padding: the hero hands off with s, the blush region
   gets l, the rest m. */

/* A 12-column grid from 768px up; every split is one column below that. */

.sw-intro__grid,
.sw-birth__grid,
.sw-zoom__grid,
.sw-reach__grid,
.sw-close__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}

/* Intro: the greeting, then a wide family photo. From 960px up the photo runs
   off the right edge of the window. */

.sw-intro {
  padding-top: var(--section-s);
  overflow: clip;
}

.sw-intro__grid {
  row-gap: clamp(40px, 5vw, 64px);
}

.sw-intro__copy {
  grid-column: 1 / span 7;
}

.sw-intro h1 {
  max-width: 15ch;
}

.sw-intro__lede {
  margin-top: 24px;
  max-width: 44ch;
  font-size: var(--step-1);
  color: var(--text);
}

.sw-intro__photo {
  grid-column: 1 / -1;
  margin: 0;
}

.sw-intro__img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--blush-soft);
}

@media (min-width: 960px) {
  /* The distance from the grid's right edge to the window's right edge. */
  .sw-intro {
    --bleed: max(var(--gutter), (100vw - var(--wrap)) / 2);
  }

  .sw-intro__photo {
    margin-right: calc(-1 * var(--bleed));
  }

  .sw-intro__img {
    max-height: 620px;
  }
}

/* The line under each offer name: Suzi speaking, in the small serif */

.sw-callout {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  line-height: 1.4;
  color: var(--text);
}

.sw-actions {
  margin-top: 28px;
}

/* Birth doula support: Suzi's words to Mom on the left, the details ledger
   and the page's first solid button on the right */

.sw-birth {
  padding-block: var(--section-s) var(--section-m);
}

.sw-birth__grid {
  row-gap: 40px;
  align-items: end;
}

.sw-birth__copy {
  grid-column: 1 / span 6;
}

.sw-birth__side {
  grid-column: 8 / -1;
}

.sw-birth__copy h2 {
  max-width: 16ch;
}

.sw-birth__copy .sw-callout {
  max-width: 28ch;
}

.sw-birth__copy > p:not(.sw-callout) {
  margin-top: 18px;
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.7;
}

.sw-birth__copy > .sw-callout + p {
  margin-top: 28px;
}

.sw-details {
  margin: 0;
  border-top: 1px solid var(--line-strong);
}

.sw-details__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 6px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.sw-details dt {
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.6;
  color: var(--heading);
}

.sw-details dd {
  margin: 0;
  line-height: 1.55;
}

/* An hour on zoom: the page's one blush region. The two reasons Mom books it
   sit between hairlines; the price is a ruled block (no card, no shadow) with
   a text link, because the solid button just above is in the same view; then
   one family's words, set large in Caslon. */

.sw-zoom {
  padding-block: var(--section-l);
}

.sw-zoom__grid {
  row-gap: clamp(40px, 5vw, 56px);
  align-items: start;
}

.sw-zoom__head {
  grid-column: 1 / span 8;
}

.sw-zoom__head .sw-callout {
  max-width: 34ch;
}

.sw-zoom__uses {
  grid-column: 1 / span 6;
  display: grid;
  gap: 32px;
}

.sw-use {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.sw-use p {
  margin-top: 10px;
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.7;
}

.sw-price {
  grid-column: 8 / -1;
  padding-block: 24px 28px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.sw-price__line {
  color: var(--text-muted);
}

.sw-price__amount {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--heading);
}

.sw-price__action {
  margin-top: 12px;
}

/* The one Daddy Doula mention on this page: a plain sentence beside the
   course discount, with a text link. No box and no second color. */

.sw-dad {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.sw-dad strong {
  font-weight: 500;
}

/* Keep the short link and its arrow together on one line. */
.sw-dad .text-link {
  white-space: nowrap;
}

.sw-quote {
  grid-column: 1 / span 8;
  margin: clamp(16px, 3vw, 40px) 0 0;
}

.sw-quote blockquote {
  margin: 0;
}

.sw-quote blockquote p {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--step-quote);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  text-indent: -0.4em;
}

.sw-quote figcaption {
  margin-top: 24px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

/* What happens when you reach out: the heading on the left, a real numbered
   list on the right, Caslon numerals between hairlines */

.sw-reach {
  padding-block: var(--section-m) var(--section-s);
}

.sw-reach__grid {
  row-gap: 32px;
  align-items: start;
}

.sw-reach__heading {
  grid-column: 1 / span 5;
  max-width: 14ch;
}

.sw-reach__body {
  grid-column: 7 / -1;
}

.sw-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line);
}

.sw-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
  line-height: 1.6;
}

.sw-steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1;
  color: var(--heading);
  font-variant-numeric: lining-nums tabular-nums;
}

.sw-open {
  margin-top: 32px;
  max-width: 60ch;
  padding: 16px 20px;
  border: 1px dashed var(--text-muted);
  border-radius: 0;
  font-size: var(--step--1);
}

.sw-open ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* Close: left-aligned on the grid under a hairline. Suzi's square portrait,
   the invitation and its serif sign-off, then the one button and a text link
   on the right. */

.sw-close {
  padding-block: var(--section-s) var(--section-l);
}

.sw-close__grid {
  row-gap: 28px;
  align-items: end;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

.sw-close__photo {
  grid-column: 1 / span 2;
  margin: 0;
}

.sw-close__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--blush-soft);
}

.sw-close__copy {
  grid-column: 3 / span 5;
}

.sw-close__copy h2 {
  max-width: 16ch;
}

.sw-close__copy p {
  margin-top: 14px;
  max-width: 44ch;
  font-size: var(--step-1);
}

.sw-close__copy .sw-close__after {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  line-height: 1.3;
  color: var(--heading);
}

.sw-close__act {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Wide screens: the right-hand column moves out to leave a gutter column. */

@media (min-width: 960px) {
  .sw-birth__copy,
  .sw-zoom__uses {
    grid-column: 1 / span 7;
  }

  .sw-birth__side,
  .sw-price {
    grid-column: 9 / -1;
  }

  .sw-close__copy {
    grid-column: 3 / span 6;
  }
}

/* Until the details column is wide enough, each label sits above its value. */

@media (min-width: 768px) and (max-width: 1199px) {
  .sw-details__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tablet: the close stacks its copy and actions beside the portrait. */

@media (min-width: 768px) and (max-width: 959px) {
  .sw-close__copy,
  .sw-close__act {
    grid-column: 4 / -1;
  }

  .sw-close__photo {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .sw-close__act {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
  }
}

/* Phone: every split becomes one column */

@media (max-width: 767px) {
  .sw-intro__grid,
  .sw-birth__grid,
  .sw-zoom__grid,
  .sw-reach__grid,
  .sw-close__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sw-intro__grid > *,
  .sw-birth__grid > *,
  .sw-zoom__grid > *,
  .sw-reach__grid > *,
  .sw-close__grid > * {
    grid-column: 1 / -1;
  }

  .sw-intro__img {
    aspect-ratio: 4 / 3;
  }

  .sw-close__photo {
    width: 128px;
  }

  /* The numbered list's closing rule already ends the section above. */
  .sw-close__grid {
    padding-top: 0;
    border-top: 0;
  }

  .sw-steps li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: 12px;
  }

  /* The narrow gutter leaves no room to hang the opening mark. */
  .sw-quote blockquote p {
    text-indent: 0;
  }
}

@media (max-width: 479px) {
  .sw-details__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* suzi-doula/styles/50-questions.css */
/* Suzi Doula: Questions (/questions/).
   Written to Mom, in her FAQ style. The page is white and reads as one
   hairline ledger, like the Daddy Doula /help/ page: each question sits in the
   left five columns in Libre Caslon Text, the answer in Poppins in the right
   seven, with a 1px rule between rows and one berry rule on top. No cards,
   numbers or labels. Her "Pregnant?" call-out opens the h1 in the heading's
   serif. The one Daddy Doula mention is a plain sentence with a text link.
   The page ends left-aligned on the grid, with Suzi's signature and the one
   "Let's talk!" button. Colors come only from the tokens in 10-suzi.css. */

/* Intro */

.sq-intro {
  padding-block: var(--section-s) clamp(40px, 5vw, 64px);
}

.sq-intro h1 {
  max-width: 16ch;
}

.sq-intro__kicker {
  display: block;
}

.sq-intro__text {
  margin-top: 20px;
  max-width: 40ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text);
}

/* The ledger: one berry rule on top, a hairline under every row */

.sq-list {
  border-top: 1px solid var(--line-strong);
}

.sq-item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px 24px;
  align-items: baseline;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
}

.site-suzi .sq-item h2 {
  grid-column: 1 / span 5;
  scroll-margin-top: 32px;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.2rem + 0.45vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: 0;
}

.sq-item__answer {
  grid-column: 6 / -1;
  max-width: 50ch;
}

.sq-item__answer > p {
  font-size: 1.125rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.sq-item__answer > * + * {
  margin-top: 14px;
}

.sq-item__answer > .sq-item__link {
  margin-top: 4px;
}

/* The one Daddy Doula mention: a plain sentence with a text link, no box */

.sq-item__answer > .sq-dad {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.65;
}

/* A family's words, if an answer carries them: set in the small serif under
   a hairline, never in a card */

.sq-quote {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.sq-item__answer > .sq-quote {
  margin-top: 24px;
}

.sq-quote blockquote {
  margin: 0;
}

.sq-quote blockquote p {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text);
}

.sq-quote figcaption {
  margin-top: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

/* Close: left-aligned on the grid. The heading, her line and her signature on
   the left; the one button on the right. */

.sq-close {
  padding-block: var(--section-m) var(--section-l);
}

.sq-close__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px 24px;
  align-items: end;
}

.sq-close__head {
  grid-column: 1 / span 7;
}

.sq-close__head h2 {
  max-width: 18ch;
}

.sq-close__head p {
  margin-top: 16px;
  max-width: 42ch;
  font-size: var(--step-1);
}

.sq-close__head .sq-close__sign {
  margin-top: 12px;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--accent);
}

.sq-close__action {
  grid-column: 9 / -1;
}

/* Phone: each answer stacks under its question, and the close is one column */

@media (max-width: 767px) {
  .sq-item,
  .sq-close__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-suzi .sq-item h2,
  .sq-item__answer,
  .sq-close__head,
  .sq-close__action {
    grid-column: 1 / -1;
  }
}

/* Keep the short Daddy Doula link and its arrow together on one line. */
.sq-dad .text-link {
  white-space: nowrap;
}

/* suzi-doula/styles/60-contact.css */
/* Suzi Doula: Let's talk! (/contact/). Written to Mom.
   "Let's talk!" and a hello about her and her baby, signed with Suzi's square
   portrait and her hand, beside two ruled rows with the ways to reach her.
   Then the page's one blush region: what she'd love to know as ruled rows,
   closed by her afterthought in Caslon. Last, one Mom-facing sentence about
   Daddy Doula with a text link and no box. The demo form only exists in
   review builds and is hidden until review notes are on.
   Colors come only from the tokens in 10-suzi.css. Nothing here has a panel,
   card, shadow or round corner; only the form controls keep 3px corners.
   Section padding: the hello and the Dad line use s, the blush region gets
   l, the review-only form m. */

.sc-hello__grid,
.sc-include__grid,
.sc-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}

/* Hello: the heading, her line and signature, beside the ways to reach her */

.sc-hello {
  padding-block: var(--section-s);
}

.sc-hello__grid {
  row-gap: 48px;
  align-items: end;
}

.sc-hello__copy {
  grid-column: 1 / span 6;
}

.sc-hello__text {
  margin-top: 24px;
  max-width: 34ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text);
}

/* Signed like a note: her square portrait and her name in her hand */

.sc-sign {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
}

.site-suzi main .sc-sign__img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: var(--blush-soft);
}

.sc-sign__name {
  font-size: 2.75rem;
  line-height: 1;
  color: var(--accent);
  padding-top: 6px;
}

/* The ways to reach her: two open ruled rows under one berry rule. Each
   label sits above its value, so the address set large keeps the full
   width and breaks only before the @ sign when it must. */

.sc-ways {
  grid-column: 7 / -1;
}

.sc-ways__list {
  margin: 0;
  border-top: 1px solid var(--line-strong);
}

.sc-way {
  padding-block: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.sc-way dt {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
}

.sc-way dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.sc-way__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}

.sc-way__link:hover {
  color: var(--heading);
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

.sc-way__link .arrow {
  font-size: 0.6em;
  margin-left: 6px;
}

.sc-way__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 8px;
}

.sc-way__number {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.25;
  color: var(--heading);
  font-variant-numeric: lining-nums;
}

.sc-way .sc-way__line {
  margin-top: 2px;
  font-size: var(--step-0);
}

.sc-review {
  display: grid;
  gap: 8px;
  max-width: 54ch;
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px dashed var(--text-muted);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* A few things she'd love to know: the page's one blush region. The list is
   ruled rows with no card and no bullets, and her afterthought closes the
   region on the grid, in Caslon. */

.sc-include {
  padding-block: var(--section-l);
}

.sc-include__grid {
  row-gap: 32px;
  align-items: start;
}

.sc-include__intro {
  grid-column: 1 / span 5;
}

.sc-include h2 {
  max-width: 14ch;
}

.sc-include__lead {
  margin-top: 20px;
  max-width: 32ch;
  font-size: var(--step-1);
  line-height: 1.6;
}

.sc-include__body {
  grid-column: 7 / -1;
}

.sc-include__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.sc-include__list li {
  padding-block: 18px 20px;
  font-size: var(--step-1);
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}

.sc-include__privacy {
  margin-top: 24px;
  max-width: 52ch;
  color: var(--text-muted);
}

.sc-include__after {
  grid-column: 1 / -1;
  margin-top: clamp(16px, 3vw, 40px);
  font-family: var(--font-display);
  font-size: var(--step-h2);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--heading);
  text-wrap: balance;
}

/* The demo form (review builds, review notes on): open, under one rule */

.sc-form-section {
  padding-block: var(--section-m) var(--section-s);
}

.sc-form-grid {
  row-gap: 32px;
  align-items: start;
}

.sc-form-intro {
  grid-column: 1 / span 4;
  position: sticky;
  top: 32px;
}

.sc-form-intro p {
  margin-top: 16px;
  max-width: 30ch;
  color: var(--text-muted);
}

.sc-sheet {
  grid-column: 6 / -1;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
}

.sc-notice {
  margin-bottom: 32px;
  padding: 14px 16px 16px;
  border: 1px solid var(--field-border);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.sc-notice__label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

.sc-form__fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sc-field input,
.sc-field select,
.sc-field textarea {
  border-radius: var(--radius-field);
}

.sc-field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.sc-field__flag {
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--text-muted);
}

/* A field with an error: its message turns berry; the field itself gets the
   2px rose border from 10-suzi.css. */
.sc-field--invalid .field__error {
  color: var(--heading);
}

.sc-select {
  position: relative;
}

.sc-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
}

/* A drawn chevron, so the select looks the same in every browser */
.sc-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  background: currentColor;
  clip-path: polygon(0 0, 50% 74%, 100% 0, 100% 26%, 50% 100%, 0 26%);
  pointer-events: none;
}

.sc-form__fields:disabled input,
.sc-form__fields:disabled select,
.sc-form__fields:disabled textarea {
  background: var(--bg);
  border-style: dashed;
  cursor: not-allowed;
}

.sc-form__submit {
  margin-top: 32px;
}

.sc-form__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sc-summary,
.sc-status {
  scroll-margin-top: 24px;
}

.sc-summary[hidden],
.sc-status[hidden] {
  display: none;
}

.sc-summary {
  margin-bottom: 28px;
  padding: 18px 20px;
  border: 2px solid var(--accent);
}

.sc-summary h3,
.sc-status h3 {
  font-size: var(--step-1);
}

.sc-summary ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}

.sc-summary li + li {
  margin-top: 4px;
}

.sc-summary a {
  font-weight: 500;
}

.sc-status {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  overflow-wrap: anywhere;
}

.sc-status p {
  margin-top: 6px;
}

/* One Mom-facing sentence about Daddy Doula, with a text link and no box */

.sc-dad {
  padding-block: var(--section-s);
}

.sc-dad__text {
  max-width: 60ch;
  font-size: var(--step-1);
  line-height: 1.6;
}

/* Tablet: stack the hello so the address set large keeps its room */

@media (max-width: 959px) {
  .sc-hello__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .sc-hello__copy,
  .sc-ways {
    grid-column: 1 / -1;
  }

  .sc-ways {
    max-width: 640px;
  }
}

/* Phone: every multi-column layout becomes one column */

@media (max-width: 767px) {
  .sc-include__grid,
  .sc-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-include__grid > *,
  .sc-form-grid > * {
    grid-column: 1 / -1;
  }

  .sc-hello__grid {
    row-gap: 40px;
  }

  .sc-way {
    padding-block: 16px 18px;
  }

  .sc-way__link {
    font-size: 1.3125rem;
  }

  .site-suzi main .sc-sign__img {
    width: 64px;
    height: 64px;
  }

  .sc-include__lead {
    max-width: none;
  }

  .sc-include__body {
    margin-top: 8px;
  }

  .sc-form-intro {
    position: static;
  }

  .sc-form-intro p {
    max-width: none;
  }

  .sc-form__submit {
    width: 100%;
  }
}