/* 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;
  }
}

/* daddy-doula/styles/10-dd.css */
/* Daddy Doula: the masculine side of the pair, written to Dad.
   Light only, on purpose: one light theme and nothing that reacts to the
   visitor's system theme.

   Ground: ivory page, mist for an alternate section, one navy band per page
   (on home, the conversation exercise), navy-deep footer. Navy is the only
   accent. Blush appears only where Suzi Doula is mentioned.

   Shape: Everything is square: buttons, inputs, tabs, photos, bands and
   cards. No rotation, no offset blocks or frames, no shadows, no pills.

   Type: Poppins 500 for display, buttons and UI; Poppins 400 for body.
   There is no Poppins 600 file, so nothing here asks for 600 or 700 and the
   browser never fakes a bold. Sturdiness comes from size, tight tracking,
   uppercase tracked button labels, squareness and navy.
   Uppercase only on buttons and on the field headings of the printable
   support plan. Script only in the logo and Suzi's signature on /about/.
   The full lock is in daddy-doula/DESIGN.md. */

.site-dd {
  /* Ground and regions */
  --bg: var(--ivory); /* #fcfaf7 page */
  --bg-alt: var(--mist); /* #e8ecf1 alternate section */
  --bg-cool: var(--mist);
  --surface: var(--white); /* fields and the conversation card */
  --band: var(--navy); /* the one navy band per page */
  --block: var(--navy); /* the /help/ login block */
  --footer: var(--navy-deep); /* #101f39 */

  /* Ink: navy 13.43:1 on ivory, muted 6.01:1 on ivory and 5.28:1 on mist */
  --text: var(--navy);
  --text-muted: var(--muted-ink);
  --on-navy: var(--ivory);
  --on-navy-muted: #c9d0dc; /* 9.02:1 on navy, 10.6:1 on navy-deep */

  /* Controls */
  --accent: var(--navy);
  --accent-hover: #24406a;
  --accent-press: var(--navy-deep);
  --on-accent: var(--ivory);
  --line-hover: var(--mist); /* outline button hover fill */
  --field-border: var(--muted-ink);
  --focus: var(--navy);

  /* Rules: decorative hairline, and the 2px navy header and ledger rule */
  --line: #d9d3cf;
  --line-strong: var(--navy);

  --shadow: none;

  --display-weight: 600;
  --display-tracking: -0.035em;

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

.site-dd ::selection {
  background: var(--mist);
  color: var(--navy);
}

/* Poppins SemiBold 600 is a real file (shared/fonts), so emphasis uses it; no faked bold. */
.site-dd :is(strong, b) {
  font-weight: 600;
}

/* Headings: one weight, hierarchy by size and tracking */

.site-dd h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.site-dd h2 {
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.site-dd h3 {
  font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.site-dd h4 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Links: navy, Poppins 500, underlined, never an arrow after the words.
   Only links that leave the site carry the small "↗" from extLink. */

.site-dd a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

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

.site-dd .text-link {
  color: var(--text);
  font-weight: 500;
  text-underline-offset: 0.25em;
}

/* A button that reads as a secondary text action */
.site-dd button.text-link {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.site-dd button.text-link:hover {
  text-decoration-thickness: 2px;
}

/* Buttons: square, 48px, 1px border, 14px uppercase Poppins 500.
   One solid button per screen; everything secondary is a text link. */

.site-dd .btn {
  gap: 14px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--accent);
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 120ms var(--ease);
}

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

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

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

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

.site-dd .btn--line:hover {
  background: var(--line-hover);
}

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

.site-dd .btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Fields, tabs and the menu toggle: square, 1px. Field borders come from
   base.css (1px, the muted ink #556175, 6.01:1 on ivory). */

.site-dd :is(button, input, select, textarea) {
  border-radius: 0;
}

.site-dd .nav-toggle {
  border: 1px solid var(--line-strong);
  font-weight: 500;
}

/* Header */

.site-dd .site-header {
  background: var(--bg);
  border-bottom: 2px solid var(--line-strong);
}

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

/* The logo: DADDY caps with a handwritten "Doula". */
.site-dd .wordmark__logo {
  display: block;
  width: auto;
  height: 38px;
  color: var(--text);
  --ddl-accent: var(--text);
}

.site-dd .wordmark__logo svg {
  display: block;
  width: auto;
  height: 100%;
}

.site-dd .site-nav__list a {
  font-weight: 500;
}

.site-dd .site-nav__login {
  min-height: 44px;
  padding: 8px 16px;
}

/* Footer: the one navy-deep block at the end of every page */

.site-dd .site-footer {
  --text: var(--on-navy);
  --text-muted: var(--on-navy-muted);
  --line: rgb(252 250 247 / 0.2);
  --focus: var(--on-navy);
  padding-block: 64px 32px;
  background: var(--footer);
  color: var(--text);
  font-size: 0.9375rem;
}

.site-dd .site-footer a {
  color: var(--text);
  text-decoration-color: rgb(252 250 247 / 0.45);
}

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

.site-dd .site-footer .wordmark__logo {
  height: 44px;
  color: var(--on-navy);
  --ddl-accent: var(--on-navy);
}

.site-dd .site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1fr 1.3fr;
  gap: 40px;
}

.site-dd .site-footer__brand p {
  margin-top: 14px;
  max-width: 28ch;
  color: var(--text-muted);
}

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

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

.site-dd .site-footer__heading {
  font-weight: 600;
  margin-bottom: 6px;
}

.site-dd .site-footer__support,
.site-dd .site-footer__local {
  display: grid;
  gap: 4px;
  align-content: start;
  overflow-wrap: anywhere;
}

.site-dd .site-footer__local p:not(.site-footer__heading) {
  color: var(--text-muted);
}

.site-dd .site-footer__local .text-link {
  color: var(--text);
}

.site-dd .site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 40px;
  margin-top: 56px;
  padding-top: 24px;
  background: linear-gradient(var(--line), var(--line)) no-repeat top center / calc(100% - 2 * var(--gutter)) 1px;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.site-dd .site-footer__base p:first-child {
  max-width: 60ch;
}

.site-dd .site-footer .rv {
  background: var(--ivory);
  color: var(--navy-deep);
}

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

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

/* Shared page pieces used across Daddy Doula pages */

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

/* The 404 sits on the grid's left edge like every other page */
.site-dd .not-found > * {
  max-width: 60ch;
}

.site-dd .not-found h1 {
  font-size: var(--step-4);
  margin-bottom: 16px;
}

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

.site-dd .page-intro {
  padding-block: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

.site-dd .page-intro h1 {
  font-size: var(--step-4);
  max-width: 20ch;
}

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

/* Status badges stay sentence case: uppercase on this site is for button
   labels and the printable plan's field headings only (DESIGN.md). */
.site-dd .badge {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.badge--development {
  background: var(--bg-alt);
  border-color: var(--bg-alt);
  color: var(--text);
}

.badge--draft {
  background: transparent;
  border-style: dashed;
}

.badge--idea {
  background: transparent;
  border-color: var(--line);
  color: var(--text-muted);
}

/* daddy-doula/styles/20-home.css */
/* Daddy Doula home page: sells the course, then the book.
   Ivory page, one navy band (the free conversation), two mist sections (the
   book and the close), one bordered offer, open ruled lists everywhere else.
   Square throughout: no offset blocks, no rotation, no shadows, no filled
   cards.
   Rhythm: the hero hands off with --section-s, the navy band gets
   --section-l, the rest --section-m, and neighbours never share a pair. */

/* The enroll button, used on every page: Suzi's label, then the price after
   a 1px divider. Styled here because the home page is where it lives. */

.site-dd .dd-enroll {
  gap: 14px;
  padding-inline: 22px 18px;
  white-space: nowrap;
}

.dd-enroll__price {
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  letter-spacing: 0.04em;
}

.dd-enroll--wide {
  width: 100%;
}

/* Hero: Suzi's headline, "Dads to be!" opening the lede, the button, a
   straight photo */

.dd-hero {
  padding-block: clamp(40px, 5vw, 72px) var(--section-s);
}

.dd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.dd-hero h1 {
  max-width: 14ch;
}

.dd-hero__text {
  margin-top: 24px;
  max-width: 42ch;
  font-size: var(--step-1);
  line-height: 1.6;
}

.dd-hero__lead {
  font-weight: 600;
}

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

.dd-hero__photo {
  margin: 0;
}

.dd-hero__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-alt);
}

/* Families' words, right under the hero: one navy rule, two quotes */

.dd-words {
  padding-bottom: var(--section-s);
}

.dd-words h2 {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.dd-words__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  margin-top: 24px;
  border-top: 2px solid var(--line-strong);
}

.dd-quote {
  margin: 0;
  padding: 24px clamp(24px, 4vw, 56px) 0 0;
}

.dd-quote + .dd-quote {
  padding-inline: clamp(24px, 4vw, 56px) 0;
  border-left: 1px solid var(--line);
}

.dd-quote blockquote {
  margin: 0;
}

.dd-quote blockquote p {
  font-size: var(--step-1);
  line-height: 1.6;
}

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

/* Who it's for: heading left, the lines right, under a 2px navy rule */

.dd-for {
  padding-bottom: var(--section-m);
}

.dd-for__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: start;
  padding-top: 32px;
  border-top: 2px solid var(--line-strong);
}

.dd-for h2 {
  max-width: 13ch;
}

.dd-for__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-for__list li {
  padding-block: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.dd-for__list li:first-child {
  padding-top: 4px;
  border-top: 0;
}

/* The one navy band on the page: the free conversation. Inside it the
   solid button inverts (ivory fill, navy text, mist hover). */

.dd-try {
  --text: var(--on-navy);
  --text-muted: var(--on-navy-muted);
  --line: rgb(252 250 247 / 0.22);
  --line-strong: var(--on-navy);
  --accent: var(--on-navy);
  --accent-hover: var(--mist);
  --accent-press: var(--on-navy-muted);
  --on-accent: var(--navy);
  --line-hover: var(--on-navy);
  --focus: var(--on-navy);
  --bg-alt: rgb(252 250 247 / 0.1);
  padding-block: var(--section-l);
  background: var(--band);
  color: var(--text);
  scroll-margin-top: 0;
}

.dd-try .btn--line:hover {
  color: var(--navy);
}

.dd-try a {
  color: var(--text);
}

.dd-try__intro h2 {
  max-width: 18ch;
}

.dd-try__intro p {
  margin-top: 20px;
  max-width: 52ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dd-try__intro .dd-try__aside {
  margin-top: 16px;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dd-try__foot {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.dd-try__foot p {
  max-width: 58ch;
}

/* What's inside: every lesson as a counted, ruled index, then the downloads */

.dd-inside {
  padding-block: var(--section-m) var(--section-s);
  scroll-margin-top: 24px;
}

.dd-inside__intro {
  max-width: 60ch;
}

.dd-inside__intro p {
  margin-top: 20px;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dd-inside__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: 48px;
  align-items: start;
}

.dd-inside h3 {
  margin-bottom: 14px;
}

/* Lessons run down the first column, then the second: Intro, then 1 to 12
   (the course's own chapter numbers, as on /course/), under one 2px navy
   rule, each row closed by a hairline. */
.dd-inside__lessons ol {
  columns: 2;
  column-gap: clamp(28px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line-strong);
}

.dd-inside__lessons li {
  display: grid;
  grid-template-columns: 2.75em minmax(0, 1fr);
  gap: 8px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
  font-weight: 500;
  line-height: 1.4;
}

.dd-inside__num {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.dd-inside__downloads ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line-strong);
}

.dd-inside__downloads li {
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* The offer: price once, what you get, one button, inside a 2px navy frame */

.dd-offer {
  padding-bottom: var(--section-m);
  scroll-margin-top: 24px;
}

.dd-offer__box {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3.5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border: 2px solid var(--line-strong);
}

.dd-offer h2 {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.dd-offer__amount {
  margin-top: 8px;
  font-size: clamp(3.2rem, 2.2rem + 3.4vw, 5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dd-offer__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-offer__points li {
  padding-block: 10px;
  border-top: 1px solid var(--line);
}

.dd-offer__points li:first-child {
  border-top: 0;
}

.dd-offer__action {
  display: grid;
  gap: 12px;
}

.dd-offer__note {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* The book: a straight cover on mist */

.dd-book {
  --line-hover: var(--ivory);
  padding-block: var(--section-s) var(--section-m);
  background: var(--bg-alt);
  scroll-margin-top: 24px;
}

.dd-book__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.dd-book__cover {
  margin: 0;
  display: grid;
  justify-items: center;
}

/* The only edge on the page: a 1px hairline so a pale cover holds its shape. */
.dd-book__img {
  width: min(300px, 78%);
  box-shadow: 0 0 0 1px var(--line);
}

.dd-book__copy h2 {
  max-width: 14ch;
}

.dd-book__title {
  margin-top: 24px;
  max-width: 40ch;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.4;
}

.dd-book__specs {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Pages and formats split by a 1px rule, the same divider as the price in
   the enroll button, instead of a middle dot. */
.dd-book__formats {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--text-muted);
}

.dd-book__copy > p:not(.dd-book__title, .dd-book__specs, .dd-book__actions) {
  margin-top: 16px;
  max-width: 46ch;
}

.dd-book__copy > .dd-book__gift {
  font-weight: 500;
}

.dd-book__copy > .dd-book__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 28px;
  max-width: none;
}

/* Meet your teacher: a straight portrait */

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

.dd-teacher__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.dd-teacher__photo {
  max-width: 420px;
  margin: 0;
}

.dd-teacher__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-alt);
}

.dd-teacher__copy h2 {
  margin-bottom: 24px;
}

.dd-teacher__copy > p {
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: 1.7;
}

.dd-teacher__copy > p + p {
  margin-top: 14px;
}

.dd-teacher__copy > .dd-teacher__links {
  margin-top: 20px;
  font-size: var(--step-0);
}

.dd-teacher__copy > .dd-teacher__local {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
  color: var(--text-muted);
}

.dd-teacher__local a {
  color: var(--text);
  font-weight: 500;
}

/* Questions: an open ruled ledger, like /help/ */

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

.dd-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 16px clamp(32px, 5vw, 80px);
  padding-top: 32px;
  border-top: 2px solid var(--line-strong);
}

.dd-faq h2 {
  font-size: var(--step-3);
  line-height: 1.1;
}

.dd-faq__list {
  margin: 0;
}

.dd-faq__item {
  padding-block: 18px 20px;
  border-top: 1px solid var(--line);
}

.dd-faq__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.dd-faq__item dt {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.35;
}

.dd-faq__item dd {
  margin-top: 6px;
  max-width: 60ch;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.dd-faq__item dd p + p {
  margin-top: 2px;
}

.dd-faq__item dd a:not(.rv) {
  color: var(--text);
}

/* Closing: left on the grid, heading and words left, the button right */

.dd-close {
  --line-hover: var(--ivory);
  padding-block: var(--section-m);
  background: var(--bg-alt);
}

.dd-close__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "heading actions"
    "text actions";
  gap: 18px clamp(32px, 5vw, 80px);
  align-items: start;
}

.dd-close h2 {
  grid-area: heading;
  max-width: 18ch;
}

.dd-close__inner > p:not(.dd-close__actions) {
  grid-area: text;
  max-width: 44ch;
  font-size: var(--step-1);
}

.dd-close__inner > .dd-close__actions {
  grid-area: actions;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--step-0);
}

/* Tablet */

@media (max-width: 959px) {
  .dd-offer__box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .dd-offer__action {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .dd-enroll--wide {
    width: auto;
    min-width: min(360px, 100%);
  }

  .dd-inside__grid {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 767px) {
  .dd-hero__grid,
  .dd-words__grid,
  .dd-for__grid,
  .dd-book__grid,
  .dd-teacher__grid,
  .dd-faq__grid,
  .dd-offer__box {
    grid-template-columns: 1fr;
  }

  .dd-quote {
    padding-right: 0;
  }

  .dd-quote + .dd-quote {
    margin-top: 24px;
    padding-inline: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .dd-inside__lessons ol {
    columns: 1;
  }

  .dd-offer__action {
    justify-items: stretch;
  }

  .dd-enroll--wide {
    width: 100%;
    min-width: 0;
  }

  .dd-book__img {
    width: min(220px, 60%);
  }

  .dd-teacher__photo {
    max-width: 320px;
  }

  .dd-close__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "text"
      "actions";
  }

  .dd-close__inner > .dd-close__actions {
    margin-top: 12px;
  }
}

@media (max-width: 400px) {
  .site-dd .dd-enroll {
    padding-inline: 18px 16px;
    gap: 10px;
  }

  .dd-enroll__price {
    padding-left: 10px;
  }
}

/* daddy-doula/styles/30-conversation.css */
/* The conversation exercise and its printable support plan, on the navy
   band. The card and the plan are physical objects (a question card and a
   sheet of paper), so they reset the band's ivory-on-navy tokens back to navy
   ink on a light ground. Square, flat, no shadow: the light fill on navy is
   what separates them. */

.convo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "tabs plan"
    "card plan";
  grid-template-rows: auto 1fr;
  gap: 20px clamp(32px, 4vw, 56px);
  margin-top: 48px;
  align-items: start;
}

.convo__tabs {
  grid-area: tabs;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.convo__panels {
  grid-area: card;
}

.convo__tab {
  min-height: 44px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid rgb(252 250 247 / 0.5);
  color: var(--on-navy);
  font-weight: 500;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}

.convo__tab:hover {
  border-color: var(--on-navy);
}

.convo__tab[aria-selected="true"] {
  background: var(--on-navy);
  border-color: var(--on-navy);
  color: var(--navy);
}

/* The card */

.convo__card {
  --text: var(--navy);
  --text-muted: var(--muted-ink);
  --line: #d9d3cf;
  --line-strong: var(--navy);
  --accent: var(--navy);
  --accent-hover: #24406a;
  --accent-press: var(--navy-deep);
  --on-accent: var(--ivory);
  --line-hover: var(--mist);
  --focus: var(--navy);
  --surface: var(--white);
  --bg-alt: var(--mist);
  padding: clamp(22px, 3vw, 36px);
  background: var(--white);
  color: var(--navy);
}

.convo__card[hidden],
.convo__step[hidden] {
  display: none;
}

.convo .convo__topic-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.convo__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.convo__count {
  margin-top: 20px;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.convo__ask {
  margin-top: 6px;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.22;
  text-wrap: balance;
}

.convo__hint {
  margin-top: 12px;
  color: var(--text-muted);
}

.convo__care {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--mist);
  font-size: 0.9375rem;
}

.convo__field {
  margin-top: 22px;
}

.convo__field label {
  font-size: 0.9375rem;
}

.convo__field textarea {
  min-height: 84px;
  background: var(--ivory);
}

.convo__controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.convo__controls .btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.convo__step.is-entering {
  animation: convo-in 0.35s var(--ease) both;
}

@keyframes convo-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Without JavaScript everything is shown in order */

.convo:not(.is-enhanced) .convo__tabs,
.convo:not(.is-enhanced) .convo__controls,
.convo:not(.is-enhanced) .plan__actions {
  display: none;
}

.convo:not(.is-enhanced) .convo__card + .convo__card {
  margin-top: 24px;
}

.convo:not(.is-enhanced) .convo__step + .convo__step {
  margin-top: 28px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* The plan: a sheet of paper. Its field headings stay small uppercase
   because the sheet is a printable document. */

.plan {
  --text: var(--navy);
  --text-muted: var(--muted-ink);
  --line: #d9d3cf;
  --line-strong: var(--navy);
  --accent: var(--navy);
  --accent-hover: #24406a;
  --accent-press: var(--navy-deep);
  --on-accent: var(--ivory);
  --line-hover: var(--mist);
  --focus: var(--navy);
  --bg-alt: var(--mist);
  grid-area: plan;
  padding: clamp(22px, 3vw, 36px);
  background: var(--ivory);
  color: var(--navy);
  scroll-margin-top: 24px;
}

/* The sheet takes focus after the last question; the ring sits on the band. */
.plan:focus-visible {
  outline: 2px solid var(--on-navy);
  outline-offset: 4px;
}

.plan__head h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.plan__head p {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.plan__topics {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}

.plan__topic h4 {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--navy);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan__topic dl div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 12px;
  padding-block: 7px;
  border-bottom: 1px solid var(--line);
}

.plan__topic dt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding-top: 2px;
}

.plan__topic dd {
  font-size: 0.9375rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.plan__blank {
  display: block;
  min-height: 1.45em;
}

.plan__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
}

@media (max-width: 959px) {
  .convo {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tabs"
      "card"
      "plan";
    grid-template-rows: auto;
  }
}

@media (max-width: 479px) {
  .plan__topic dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .convo__controls .btn {
    padding-inline: 16px;
  }
}

/* Printing only the plan */

@media print {
  .is-printing-plan main > :not(.dd-try) {
    display: none !important;
  }

  .is-printing-plan .dd-try {
    padding: 0;
    background: none;
    color: #000;
  }

  .is-printing-plan .dd-try__intro,
  .is-printing-plan .dd-try__foot,
  .is-printing-plan .convo__tabs,
  .is-printing-plan .convo__panels,
  .is-printing-plan .plan__actions {
    display: none !important;
  }

  .is-printing-plan .convo {
    display: block;
    margin: 0;
  }

  .is-printing-plan .plan {
    padding: 0;
    background: none;
  }

  .plan__topic {
    break-inside: avoid;
  }
}

/* Phones: with the script running, the plan shows only the moment being
   talked about. Printing always shows every moment. */
@media screen and (max-width: 767px) {
  .convo.is-enhanced .plan__topic:not(.is-current) {
    display: none;
  }
}

/* daddy-doula/styles/40-course.css */
/* Daddy Doula course page (dc-). One product, top to bottom: the hero with
   Suzi's portrait and the enroll button, every lesson as a counted, ruled
   index, the downloads as a ruled packing list on mist, families' words, the
   one navy band (how it works, with the price once), questions as an open
   ruled ledger, the close on mist, then the book and Suzi Doula.
   Square throughout: no rotation, no offset frames, no floating shadows and
   no filled cards. No script: the words that were hand-lettered here are
   Poppins now. Blush appears only where Suzi Doula is mentioned, so the buy
   moments sit on navy and mist.
   Rhythm: the hero hands off with --section-s, the navy band gets
   --section-l, the rest --section-m or -s, and neighbours never share a
   pair. The enroll button itself (.dd-enroll) is styled in 20-home.css. */

/* Hero: Suzi's headline, "Baby on the way?" opening the lede, one button,
   her portrait standing straight with a plain caption */

.dc-hero {
  padding-block: clamp(40px, 5vw, 72px) var(--section-s);
}

.dc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.dc-hero h1 {
  max-width: 12ch;
}

.dc-hero__text {
  margin-top: 24px;
  max-width: 42ch;
  font-size: var(--step-1);
  line-height: 1.6;
}

.dc-hero__lead {
  font-weight: 600;
}

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

.dc-hero__photo {
  justify-self: end;
  width: 100%;
  max-width: 440px;
  margin: 0;
}

.dc-hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-alt);
}

.dc-hero__caption {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.dc-hero__photo .photo-note {
  margin-top: 6px;
}

/* Every lesson by name: a counted index in two ruled columns. The list runs
   down the first column and then the second, and the shared grid rows keep
   the hairlines level across both. The schema fixes the count at 13 (the
   intro and chapters 1 to 12), so 7 rows hold them. */

.dc-lessons {
  padding-block: var(--section-s) var(--section-m);
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}

.dc-lessons__intro {
  max-width: 60ch;
}

.dc-lessons__intro p {
  margin-top: 20px;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dc-lessons__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  column-gap: clamp(28px, 4vw, 56px);
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line-strong);
}

.dc-lesson {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-block: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.dc-lesson__num {
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--text-muted);
}

.site-dd .dc-lesson h3 {
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.dc-lesson p {
  margin-top: 6px;
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Downloads on mist: the words left, a ruled packing list right. Hairlines
   here are navy at low strength so they read on mist. */

.dc-downloads {
  --line: color-mix(in srgb, var(--navy) 20%, var(--mist));
  padding-block: var(--section-m);
  background: var(--bg-alt);
}

.dc-downloads__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: start;
}

.dc-downloads__copy h2 {
  max-width: 14ch;
}

.dc-downloads__copy p {
  margin-top: 20px;
  max-width: 40ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dc-sheet {
  border-top: 2px solid var(--line-strong);
}

.dc-sheet__title {
  padding-block: 16px 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.dc-sheet__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each download gets an empty tick box, like a packing list */
.dc-sheet__list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}

.dc-sheet__list li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 1px solid var(--navy);
}

/* Families' words: heading left, quotes right under one navy rule */

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

.dc-words__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: start;
}

.dc-words h2 {
  max-width: 12ch;
  text-wrap: balance;
}

.dc-words__quotes {
  border-top: 2px solid var(--line-strong);
}

.dc-quote {
  margin: 0;
  padding-block: 24px;
}

.dc-quote + .dc-quote {
  border-top: 1px solid var(--line);
}

.dc-quote:last-child {
  padding-bottom: 0;
}

.dc-quote blockquote {
  margin: 0;
}

.dc-quote blockquote p {
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.6;
}

.dc-quote:first-child blockquote p {
  font-size: var(--step-2);
  line-height: 1.45;
  letter-spacing: -0.015em;
}

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

/* The one navy band on the page: how it works, with the price once. The
   words and terms run down the left; the price stands open on the right from
   the top of the band, under a 2px ivory rule, so its button sits well clear
   of the closing button (never two solid buttons on one screen, even on a
   tall portrait tablet). The button inverts: ivory fill, navy text, mist
   hover. */

.dc-offer {
  --bg: var(--band);
  --text: var(--on-navy);
  --text-muted: var(--on-navy-muted);
  --line: rgb(252 250 247 / 0.22);
  --line-strong: var(--on-navy);
  --accent: var(--on-navy);
  --accent-hover: var(--mist);
  --accent-press: var(--on-navy-muted);
  --on-accent: var(--navy);
  --line-hover: var(--on-navy);
  --focus: var(--on-navy);
  --bg-cool: rgb(252 250 247 / 0.14);
  padding-block: var(--section-l);
  background: var(--band);
  color: var(--text);
  scroll-margin-top: 0;
}

.dc-offer a:not(.btn):not(.rv) {
  color: var(--text);
}

.dc-offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "head ticket"
    "rows ticket";
  gap: clamp(32px, 4vw, 48px) clamp(32px, 5vw, 80px);
  align-items: start;
}

.dc-offer__head {
  grid-area: head;
}

.dc-offer__head h2 {
  max-width: 14ch;
}

.dc-offer__text {
  margin-top: 20px;
  max-width: 44ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dc-offer__rows {
  grid-area: rows;
  margin: 0;
  border-top: 2px solid var(--line-strong);
}

.dc-offer__rows div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px 24px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}

.dc-offer__rows dt {
  font-weight: 500;
}

.dc-offer__rows dd {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* The email sits inside a sentence, so it keeps the sentence's line height
   instead of the 44px box a standalone text link gets. */
.dc-offer__rows dd .text-link {
  display: inline;
  min-height: 0;
}

/* The price: open on the band, no panel */

.dc-ticket {
  grid-area: ticket;
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 2px solid var(--line-strong);
}

.site-dd .dc-ticket h3 {
  font-size: var(--step-1);
  line-height: 1.3;
}

.dc-ticket__price {
  font-size: clamp(3.2rem, 2.2rem + 3.4vw, 5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dc-ticket__text {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
}

.dc-ticket .dd-enroll {
  margin-top: 8px;
}

.dc-ticket__note {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Questions: an open ruled ledger, like /help/ */

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

.dc-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 16px clamp(32px, 5vw, 80px);
  padding-top: 32px;
  border-top: 2px solid var(--line-strong);
}

.dc-faq h2 {
  max-width: 10ch;
  font-size: var(--step-3);
  line-height: 1.1;
}

.dc-faq__list {
  margin: 0;
}

.dc-faq__item {
  padding-block: 18px 20px;
  border-top: 1px solid var(--line);
}

.dc-faq__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.dc-faq__item dt {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.35;
}

.dc-faq__item dd {
  margin: 6px 0 0;
  max-width: 60ch;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.dc-faq__item dd p + p {
  margin-top: 2px;
}

.dc-faq__item dd a:not(.rv) {
  color: var(--text);
}

/* Closing on mist: heading and words left on the grid, the button right */

.dc-close {
  --line-hover: var(--ivory);
  padding-block: var(--section-m);
  background: var(--bg-alt);
}

.dc-close__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "heading action"
    "text action";
  gap: 18px clamp(32px, 5vw, 80px);
  align-items: start;
}

.dc-close h2 {
  grid-area: heading;
  max-width: 16ch;
}

.dc-close__inner > p:not(.dc-close__action) {
  grid-area: text;
  max-width: 40ch;
  font-size: var(--step-1);
}

.dc-close__inner > .dc-close__action {
  grid-area: action;
  align-self: end;
}

/* The book and Suzi Doula, last and small */

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

.dc-more__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.site-dd .dc-more h2 {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.dc-more__item p {
  max-width: 44ch;
  color: var(--text-muted);
}

.dc-more__item h2 + p {
  margin-top: 12px;
}

.dc-more__item p + p {
  margin-top: 8px;
}

.dc-more__book {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.dc-more__cover {
  margin: 0;
}

/* A straight cover. The only edge is a 1px hairline so the pale cover holds
   its shape on ivory. */
.dc-more__img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--line);
}

.dc-more__item .dc-more__title {
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}

.dc-more__item .dc-more__action {
  margin-top: 20px;
}

.dc-more__local {
  padding-left: clamp(28px, 4vw, 56px);
  border-left: 1px solid var(--line);
}

.dc-more__local .text-link {
  color: var(--text);
}

/* Tablet */

/* Tablet: the band keeps its two columns, with each term stacked over its
   answer. */

@media (max-width: 959px) {
  .dc-offer__rows div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .dc-more__grid {
    grid-template-columns: 1fr;
  }

  .dc-more__local {
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

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

@media (max-width: 767px) {
  .dc-hero__grid,
  .dc-downloads__grid,
  .dc-words__grid,
  .dc-faq__grid {
    grid-template-columns: 1fr;
  }

  .dc-hero__photo {
    justify-self: start;
    max-width: 360px;
  }

  .dc-lessons__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .dc-lesson {
    grid-template-columns: 3rem minmax(0, 1fr);
    padding-block: 16px 18px;
  }

  .dc-words h2 {
    max-width: 16ch;
  }

  .dc-offer__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "rows"
      "ticket";
  }

  .dc-close__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "text"
      "action";
  }

  .dc-close__inner > .dc-close__action {
    margin-top: 12px;
  }

  .dc-more__book {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

@media (max-width: 400px) {
  .dc-more__book {
    grid-template-columns: 1fr;
  }

  .dc-more__cover {
    max-width: 120px;
  }
}

/* daddy-doula/styles/45-book.css */
/* The book page. Mist hero with the real cover sitting straight (a 1px
   hairline edge, no tilt, no heavy shadow), Suzi's one-liner set large on
   ivory, book and course in one ruled row, and the gift close on mist, left
   on the grid. Square throughout; navy is the only accent. */

.db-hero {
  padding-block: clamp(40px, 6vw, 96px) var(--section-s);
  background: var(--bg-alt);
}

.db-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}

.db-hero__cover {
  margin: 0;
  display: grid;
  justify-items: center;
}

.db-hero__img {
  width: min(360px, 82%);
  box-shadow: 0 0 0 1px var(--line);
}

.db-hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  max-width: 14ch;
}

/* "Want it on paper?" opens the lede in Poppins 500, words unchanged. */
.db-hero__text {
  margin-top: 24px;
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.7;
}

.db-hero__lead {
  font-weight: 600;
}

.db-hero__title {
  margin-top: 28px;
  padding-top: 18px;
  max-width: 40ch;
  border-top: 1px solid var(--line-strong);
  font-weight: 500;
  line-height: 1.45;
}

/* Pages and formats split by a 1px rule, the same divider the home page and
   the enroll button's price use. The date sits on its own line below. */
.db-specs {
  display: flex;
  flex-wrap: wrap;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.db-specs li:nth-child(2) {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--text-muted);
}

.db-specs li:nth-child(3) {
  flex-basis: 100%;
  margin-top: 2px;
}

.db-hero__actions {
  margin-top: 32px;
}

/* Who it's for: Suzi's one-liner, set large, left on the grid */

.db-who {
  padding-block: var(--section-l) var(--section-m);
}

.db-who__quote {
  margin: 0;
}

.db-who__quote p {
  max-width: 24ch;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.db-who__source {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.db-who__text {
  margin-top: 28px;
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: 1.7;
}

/* Book or course: one ruled row, a 2px navy top rule and a 1px divider */

.db-compare {
  padding-block: 0 var(--section-m);
}

.db-compare h2 {
  max-width: 16ch;
}

.db-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 40px;
  border-top: 2px solid var(--line-strong);
}

.db-compare__item {
  padding-top: 24px;
}

.db-compare__item:first-child {
  padding-right: clamp(28px, 5vw, 72px);
}

.db-compare__item + .db-compare__item {
  padding-left: clamp(28px, 5vw, 72px);
  border-left: 1px solid var(--line);
}

.db-compare__item h3 {
  font-size: var(--step-2);
}

.db-compare__item p {
  margin-top: 12px;
  max-width: 42ch;
  font-size: var(--step-1);
  line-height: 1.7;
}

.db-compare__item p + p {
  margin-top: 8px;
}

/* Gift: the close, left on the grid. Heading and words in the left 7
   columns, the one button in the right 5. */

.db-gift {
  --line-hover: var(--ivory);
  padding-block: var(--section-m);
  background: var(--bg-alt);
}

.db-gift__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "heading actions"
    "text actions";
  gap: 18px clamp(32px, 5vw, 80px);
  align-items: start;
}

.db-gift h2 {
  grid-area: heading;
  max-width: 16ch;
}

.db-gift__inner > p:not(.db-gift__actions) {
  grid-area: text;
  max-width: 44ch;
  font-size: var(--step-1);
}

.db-gift__inner > .db-gift__actions {
  grid-area: actions;
  align-self: end;
}

@media (max-width: 767px) {
  .db-hero__grid,
  .db-compare__grid {
    grid-template-columns: 1fr;
  }

  .db-hero__cover {
    justify-items: start;
  }

  .db-hero__img {
    width: min(240px, 62%);
  }

  .db-compare__item:first-child {
    padding-right: 0;
    padding-bottom: 24px;
  }

  .db-compare__item + .db-compare__item {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .db-gift__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "text"
      "actions";
  }

  .db-gift__inner > .db-gift__actions {
    margin-top: 12px;
  }
}

/* daddy-doula/styles/50-tools.css */
/* Daddy Doula tools page (/tools/): an honest shelf. Review-only draft.
   Intro with a label key, what is ready today, the one navy band for drafts
   in development, then a compact list of ideas. Square throughout, no
   shadows beyond the book cover's 1px hairline, no rotation, no script. */

/* Intro: heading on the left, what each label means on the right */

.dt-intro {
  padding-block: clamp(48px, 7vw, 104px) clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
}

.dt-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: end;
}

.dt-intro h1 {
  font-size: clamp(2.5rem, 1.55rem + 3.3vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  max-width: 15ch;
}

.dt-intro__copy p {
  margin-top: 24px;
  max-width: 50ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dt-legend {
  padding-top: 16px;
  border-top: 2px solid var(--line-strong);
}

.dt-legend .dt-legend__heading {
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.dt-legend dl {
  margin-top: 8px;
}

.dt-legend dl div {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}

.dt-legend dd {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Ready today: the course as a spec sheet, the book as an object, set as one
   open ruled row (2px navy top rule, 1px divider), not two filled cards */

.dt-ready__head {
  max-width: 60ch;
}

.dt-ready__head p {
  margin-top: 16px;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dt-ready__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 48px;
  border-top: 2px solid var(--line-strong);
}

.dt-course {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px clamp(28px, 4vw, 56px) 8px 0;
  border-right: 1px solid var(--line);
}

.dt-course .badge,
.dt-book__body .badge {
  align-self: flex-start;
  justify-self: start;
}

.dt-course h3 {
  margin-top: 6px;
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.dt-course__text {
  max-width: 44ch;
  color: var(--text-muted);
}

.dt-course__facts {
  margin-top: 12px;
  border-top: 1px solid var(--line-strong);
}

.dt-course__facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 24px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.dt-course__facts dt {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.dt-course__facts dd {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: right;
}

.dt-course__facts div:last-child dd {
  font-size: var(--step-3);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.dt-course__cta {
  margin-top: auto;
  padding-top: 18px;
}

.dt-book {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  padding: 32px 0 8px clamp(28px, 4vw, 56px);
}

.dt-book__cover {
  display: grid;
  place-items: start;
}

.dt-book__img {
  width: 100%;
  max-width: 210px;
  aspect-ratio: 1190 / 1908;
  object-fit: cover;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

.dt-book__body {
  display: grid;
  gap: 10px;
  align-content: start;
}

.dt-book__body h3 {
  margin-top: 6px;
  font-size: var(--step-1);
  line-height: 1.3;
}

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

.dt-book__body .dt-book__meta {
  font-size: 0.9375rem;
}

.dt-book__body .text-link {
  color: var(--text);
}

/* In development: the page's one navy band, a catalog of three drafts.
   On navy the tokens flip to ivory, with mist hovers and an ivory focus. */

.dt-dev {
  --text: var(--on-navy);
  --text-muted: var(--on-navy-muted);
  --line: rgb(252 250 247 / 0.22);
  --line-strong: var(--on-navy);
  --accent: var(--on-navy);
  --accent-hover: var(--mist);
  --accent-press: var(--on-navy-muted);
  --on-accent: var(--navy);
  --focus: var(--on-navy);
  --bg: var(--band);
  --bg-alt: rgb(252 250 247 / 0.12);
  --bg-cool: rgb(252 250 247 / 0.12);
  padding-block: var(--section-l);
  background: var(--band);
  color: var(--text);
}

.dt-dev__head {
  max-width: 60ch;
}

.dt-dev__head p {
  margin-top: 20px;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dt-dev__list {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line-strong);
}

.dt-row {
  display: grid;
  grid-template-columns: 172px minmax(0, 1.25fr) minmax(0, 0.8fr) 10.5rem;
  gap: 20px clamp(24px, 3.4vw, 48px);
  align-items: center;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}

.dt-row__main {
  display: grid;
  gap: 8px;
}

.dt-row__main .badge {
  justify-self: start;
}

.dt-row__main h3 {
  margin-top: 4px;
  font-size: var(--step-2);
}

.dt-row__main p,
.dt-row__now {
  color: var(--text-muted);
}

.dt-row__now {
  font-size: 0.9375rem;
}

.dt-row__link {
  justify-self: end;
}

.dt-row__link a {
  color: var(--text);
  white-space: nowrap;
}

/* Physical previews: a white sheet, a white card and the top of the real
   protocol page, flat on the navy band. No shadow; white on navy already
   separates them. */

.dt-thumb {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 116px;
  overflow: hidden;
  background: var(--white);
  color: var(--navy);
}

.dt-thumb--sheet {
  padding: 12px 16px;
}

.dt-thumb__text {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--muted-ink);
}

.dt-thumb__line {
  display: block;
  height: 9px;
  border-bottom: 1px solid #cfd5de;
}

.dt-thumb--card {
  align-content: center;
  padding: 14px 16px;
}

.dt-thumb__title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
}

.dt-thumb--image {
  position: relative;
  padding: 0;
}

/* Title band only, at the top of a white page: the image file contains
   nothing below the title. */
.dt-thumb--image img {
  width: 100%;
  height: auto;
}

.dt-dev__customers {
  margin-top: 36px;
  max-width: 60ch;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Ideas for later: compact, quiet, clearly nothing yet */

.dt-ideas__head {
  max-width: 62ch;
}

.dt-ideas__head p {
  margin-top: 16px;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dt-ideas__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.dt-ideas__list li {
  display: grid;
  gap: 4px;
  align-content: start;
  padding-block: 18px 22px;
  border-top: 1px solid var(--line);
}

.dt-ideas__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-weight: 500;
}

.dt-ideas__list li p + p {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Tablet */

@media (max-width: 959px) {
  .dt-intro__grid,
  .dt-ready__grid {
    grid-template-columns: 1fr;
  }

  .dt-legend {
    max-width: 36rem;
  }

  .dt-course {
    padding: 28px 0 36px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dt-book {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
    padding: 32px 0 0;
  }

  .dt-row {
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: start;
  }

  .dt-row__now,
  .dt-row__link {
    grid-column: 2;
  }

  .dt-row__link {
    justify-self: start;
  }
}

/* Phone */

@media (max-width: 767px) {
  .dt-ideas__list {
    grid-template-columns: 1fr;
  }

  .dt-legend dl div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dt-legend dt .badge {
    justify-self: start;
  }

  .dt-book {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .dt-book__cover {
    justify-items: start;
  }

  .dt-book__img {
    max-width: 150px;
  }

  .dt-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 32px;
  }

  .dt-row__now,
  .dt-row__link {
    grid-column: auto;
  }

  .dt-thumb {
    width: 172px;
    height: 104px;
  }
}

/* daddy-doula/styles/60-product.css */
/* Daddy Doula product pages (/tools/<product>/): tools that are not for sale.
   Review-only drafts. Intro and status, what it would include, a real sample
   on the page's one navy band, a checklist of where it stands, and a way
   back, left on the grid. The sheet, the cards and the protocol page are
   physical objects, so they keep their own white paper and navy ink, set
   flat on the band: square, no shadow, no tilt, no script. The situation
   cards still turn over when asked; that flip is the sample's interaction. */

/* Intro */

.dp-intro {
  padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}

.dp-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: end;
}

.dp-intro__back {
  margin-bottom: clamp(20px, 3vw, 36px);
}

.dp-intro__back .text-link {
  font-size: 0.9375rem;
}

.dp-intro__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 18px;
}

.dp-intro__note {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.dp-intro h1 {
  font-size: clamp(2.6rem, 1.55rem + 3.7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 13ch;
}

.dp-intro__job {
  margin-top: 24px;
  max-width: 46ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dp-intro__facts {
  border-top: 2px solid var(--line-strong);
}

.dp-intro__facts div {
  padding-block: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.dp-intro__facts dt {
  font-size: 0.9375rem;
  font-weight: 500;
}

.dp-intro__facts dd {
  margin-top: 6px;
  color: var(--text-muted);
}

.dp-intro__nosale {
  display: block;
  margin-bottom: 2px;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Clinical review status: a navy block, shown before anything else */

.dp-review {
  --text: var(--ivory);
  --text-muted: #d3d9e3;
  --bg: var(--navy-deep);
  --bg-cool: rgb(252 250 247 / 0.14);
  --focus: var(--on-navy);
  display: grid;
  gap: 8px;
  max-width: 40rem;
  margin-top: 28px;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
  background: var(--block);
  color: var(--text);
}

.dp-review__heading {
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.dp-review__status strong {
  font-weight: 500;
}

.dp-review p:not(.dp-review__heading) {
  color: var(--text-muted);
}

.dp-review .dp-review__status,
.dp-review .dp-review__care {
  color: var(--text);
}

.dp-review__care {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgb(252 250 247 / 0.28);
  font-weight: 500;
}

/* What you would receive: a numbered list in two columns, counted 1, 2, 3 */

.dp-receive__head {
  max-width: 60ch;
}

.dp-receive__head p {
  margin-top: 14px;
  color: var(--text-muted);
}

.dp-receive__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: receive;
}

.dp-receive__list li {
  position: relative;
  padding: 20px 0 24px 52px;
  border-top: 1px solid var(--line);
  counter-increment: receive;
}

.dp-receive__list li::before {
  content: counter(receive);
  font-variant-numeric: tabular-nums;
  position: absolute;
  left: 0;
  top: 23px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.dp-receive__title {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.35;
}

.dp-receive__list li p + p {
  margin-top: 4px;
  color: var(--text-muted);
}

/* The sample: the page's one navy band. Tokens flip to ivory, with mist
   hovers and an ivory focus ring. */

.dp-sample {
  --text: var(--on-navy);
  --text-muted: var(--on-navy-muted);
  --line: rgb(252 250 247 / 0.22);
  --line-strong: var(--on-navy);
  --accent: var(--on-navy);
  --accent-hover: var(--mist);
  --accent-press: var(--on-navy-muted);
  --on-accent: var(--navy);
  --focus: var(--on-navy);
  --bg: var(--band);
  --bg-alt: rgb(252 250 247 / 0.12);
  --bg-cool: rgb(252 250 247 / 0.12);
  padding-block: var(--section-l);
  background: var(--band);
  color: var(--text);
}

.dp-sample a {
  color: var(--text);
}

.dp-sample__head {
  max-width: 58ch;
}

.dp-sample__head p {
  margin-top: 20px;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dp-sample__grid {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  margin-top: 56px;
  align-items: start;
}

.dp-sample__grid--sheet {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.dp-sample__grid--cards {
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
}

.dp-sample__side h3 {
  font-size: var(--step-2);
}

.dp-sample__side p {
  margin-top: 12px;
  color: var(--text-muted);
}

.dp-sample__side .dp-sample__subhead {
  margin-top: 40px;
  font-size: var(--step-1);
}

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

.dp-outline li {
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.dp-sample__side .dp-sample__try {
  margin-top: 28px;
}

/* The sheet: one printable section of the workbook draft */

.dp-sheet {
  --text: var(--navy);
  --text-muted: var(--muted-ink);
  --bg: var(--white);
  --bg-cool: var(--mist);
  --focus: var(--navy);
  width: 100%;
  max-width: 640px;
  justify-self: end;
  background: var(--white);
  color: var(--navy);
}

.dp-sheet__head {
  padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 52px) clamp(14px, 2vw, 22px);
  background: var(--mist);
}

.dp-sheet__brand {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.dp-sheet__title {
  margin-top: 6px;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.dp-sheet__section,
.dp-sheet__questions,
.dp-sheet__notes-label,
.dp-sheet__notes,
.dp-sheet__foot {
  margin-inline: clamp(24px, 4vw, 52px);
}

.dp-sheet .dp-sheet__section {
  margin-top: 28px;
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
}

.dp-sheet__questions {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 0;
  padding-left: 1.3em;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.dp-sheet__questions li::marker {
  font-weight: 500;
}

.dp-sheet__notes-label {
  margin-top: 28px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.dp-sheet__notes div {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  padding-top: 16px;
}

.dp-sheet__notes dt {
  font-size: 0.875rem;
  color: var(--muted-ink);
}

.dp-sheet__notes dd {
  min-height: 1.5em;
  border-bottom: 1px solid #b7c0cc;
}

.dp-sheet__foot {
  margin-top: 28px;
  padding-block: 14px clamp(20px, 3vw, 32px);
  border-top: 1px solid #e4dfdb;
  font-size: 0.75rem;
  color: var(--muted-ink);
}

/* The cards */

.dp-sample__side--sticky {
  position: sticky;
  top: 32px;
}

.dp-how {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-left: 1.3em;
  color: var(--text-muted);
}

.dp-how li::marker {
  color: var(--text);
  font-weight: 500;
}

.dp-sample__side .dp-rule {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  color: var(--text);
  font-weight: 500;
}

.dp-sample__side .dp-sample__source {
  margin-top: 24px;
  font-size: 0.875rem;
}

.dp-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  perspective: 1400px;
}

.dp-card__inner {
  display: grid;
  flex: 1;
}

.dp-card__face {
  --text: var(--navy);
  --text-muted: var(--muted-ink);
  --bg: var(--white);
  --bg-cool: var(--mist);
  --focus: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 26px;
  background: var(--white);
  color: var(--navy);
}

.dp-card__kind {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.dp-card .dp-card__title {
  font-size: var(--step-2);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.dp-card__front {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--muted-ink);
}

/* The deck's working title, printed at the foot of every front like a real
   card. Decorative repetition, so it is hidden from screen readers. */
.dp-card__deck {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e4dfdb;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

.dp-card__back {
  display: grid;
  gap: 12px;
}

.dp-card__back div {
  padding-top: 10px;
  border-top: 1px solid #e4dfdb;
}

.dp-card__back dt {
  font-size: 0.8125rem;
  font-weight: 500;
}

.dp-card__back dd {
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.dp-card__turn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 8px 2px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-weight: 500;
}

.dp-card__turn-text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.dp-card__turn[hidden] {
  display: none;
}

.dp-card__turn:hover .dp-card__turn-text {
  text-decoration-thickness: 2px;
}

.dp-card__turn-icon {
  display: inline-block;
  font-size: 1.125rem;
  line-height: 1;
}

/* Without JavaScript: the front and back of each card read in order */

.dp-deck:not(.is-enhanced) .dp-card__face--back {
  border-top: 1px dashed #b7c0cc;
}

/* With JavaScript: the card turns over. Both faces share one grid cell, so
   the card is as tall as its longer side. */

.dp-deck.is-enhanced .dp-card__nojs {
  display: none;
}

.dp-deck.is-enhanced .dp-card__inner {
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
}

.dp-deck.is-enhanced .dp-card__face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.dp-deck.is-enhanced .dp-card__face--back {
  transform: rotateY(180deg);
}

.dp-deck.is-enhanced .dp-card.is-turned .dp-card__inner {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .dp-deck.is-enhanced .dp-card__inner,
  .dp-deck.is-enhanced .dp-card.is-turned .dp-card__inner,
  .dp-deck.is-enhanced .dp-card__face--back {
    transform: none;
    transition: none;
  }

  .dp-deck.is-enhanced .dp-card:not(.is-turned) .dp-card__face--back,
  .dp-deck.is-enhanced .dp-card.is-turned .dp-card__face--front {
    visibility: hidden;
  }
}

/* The protocol preview: the real page, cropped at the title band */

.dp-preview {
  --text: var(--navy);
  --text-muted: var(--muted-ink);
  --bg: var(--white);
  --bg-cool: var(--mist);
  --focus: var(--navy);
  margin: 48px 0 0;
  background: var(--white);
  color: var(--navy);
}

.dp-preview__crop {
  position: relative;
  overflow: hidden;
}

.dp-preview__crop img {
  width: 100%;
  height: auto;
}

.dp-preview__hidden {
  padding: 6px 24px clamp(22px, 3vw, 34px);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted-ink);
}

.dp-sections {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  grid-template-rows: auto 1fr;
  gap: 12px clamp(40px, 5vw, 80px);
  margin-top: 64px;
}

.dp-sections h3 {
  font-size: var(--step-2);
}

.dp-sections > p {
  color: var(--text-muted);
}

.dp-sections__list {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--line-strong);
  counter-reset: section;
}

.dp-sections__list li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
  counter-increment: section;
}

.dp-sections__list li::before {
  content: counter(section);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Where this stands: a vertical checklist */

.dp-stands__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}

.dp-stands__head p {
  margin-top: 16px;
  max-width: 36ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dp-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 30px;
}

.dp-step::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 2px;
  width: 2px;
  background: var(--line);
}

.dp-step:last-child {
  padding-bottom: 0;
}

.dp-step:last-child::before {
  display: none;
}

.dp-step__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  background: var(--bg);
  border: 2px solid var(--line-strong);
}

.dp-step--done .dp-step__mark {
  background: var(--accent);
  border-color: var(--accent);
}

/* The check is drawn, not rotated: an ivory stroke on the navy square. */
.dp-step--done .dp-step__mark::after {
  content: "";
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3.5' fill='none' stroke='%23fcfaf7' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dp-step__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.35;
}

.dp-step__state {
  padding: 1px 8px;
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.dp-step--done .dp-step__state {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.dp-step--open .dp-step__state {
  border-style: dashed;
  color: var(--text-muted);
  border-color: var(--text-muted);
}

.dp-step__detail {
  margin-top: 4px;
  max-width: 58ch;
  color: var(--text-muted);
}

.dp-step__value {
  margin-top: 6px;
  font-weight: 500;
}

/* Closing: a way back to what is ready, left on the grid. Heading and words
   in the left 7 columns, the one button and a text link in the right 5. */

.dp-next {
  --line-hover: var(--ivory);
  padding-block: var(--section-s) var(--section-m);
  background: var(--bg-alt);
}

.dp-next__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "heading actions"
    "text actions";
  gap: 16px clamp(32px, 5vw, 80px);
  align-items: start;
}

.dp-next h2 {
  grid-area: heading;
  max-width: 18ch;
}

.dp-next__inner > p:not(.dp-next__actions) {
  grid-area: text;
  max-width: 50ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.dp-next .dp-next__actions {
  grid-area: actions;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--step-0);
  color: var(--text);
}

/* Tablet */

@media (max-width: 959px) {
  .dp-sample__grid--sheet,
  .dp-sample__grid--cards {
    grid-template-columns: 1fr;
  }

  .dp-sheet {
    justify-self: start;
  }

  .dp-sample__side--sticky {
    position: static;
  }

  .dp-sections {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .dp-sections__list {
    grid-column: auto;
    grid-row: auto;
    margin-top: 12px;
  }
}

/* Phone */

@media (max-width: 767px) {
  .dp-intro__grid,
  .dp-receive__list,
  .dp-stands__grid,
  .dp-deck {
    grid-template-columns: 1fr;
  }

  .dp-intro__grid {
    gap: 32px;
  }

  .dp-receive__list li {
    padding-left: 44px;
  }

  .dp-sections__list {
    columns: 1;
  }

  .dp-sheet__notes div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .dp-sheet__notes dd {
    min-height: 1.9em;
  }

  .dp-next__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "text"
      "actions";
  }

  .dp-next .dp-next__actions {
    margin-top: 12px;
  }
}

/* daddy-doula/styles/70-about.css */
/* About Daddy Doula: short and warm. Suzi's line set large as a typographic
   statement, her story beside her portrait (straight frame, nothing behind
   it) with her handwritten signature, then the course and the book in one
   ruled row on a mist band. Square throughout. The signature is the only
   script on the page besides the logo, and it does not tilt. The enroll
   button styles (.dd-enroll) come from the home page stylesheet. */

/* Hero: an asymmetric statement, no image */

.da-hero {
  padding-block: clamp(56px, 8vw, 120px) clamp(24px, 4vw, 48px);
}

.da-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 28px clamp(40px, 6vw, 96px);
  align-items: end;
}

.da-hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.07;
  letter-spacing: -0.04em;
  max-width: 20ch;
}

.da-hero__text {
  padding-top: 20px;
  border-top: 2px solid var(--line-strong);
  font-size: var(--step-1);
  color: var(--text-muted);
}

/* Suzi's story: her portrait, a short letter, her signature */

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

.da-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.da-story__photo {
  max-width: 440px;
  margin: 0;
}

.da-story__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-alt);
}

.da-story__copy h2 {
  margin-bottom: 24px;
  max-width: 16ch;
}

.da-story__copy > p {
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: 1.7;
}

.da-story__copy > p + p {
  margin-top: 14px;
}

.da-story__copy > .da-story__sign {
  margin-top: 18px;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  line-height: 1;
}

/* The course and the book: one ruled row on a mist band */

.da-made {
  --line-hover: var(--ivory);
  padding-block: var(--section-m);
  background: var(--bg-alt);
}

.da-made__head {
  max-width: 60ch;
}

.da-made__head p {
  margin-top: 18px;
  font-size: var(--step-1);
  color: var(--text-muted);
}

.da-made__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 2px solid var(--line-strong);
  align-items: start;
}

.da-made h3 {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
}

/* The course */

.da-course {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 28px clamp(28px, 4vw, 64px) 8px 0;
}

.da-course > p {
  max-width: 42ch;
  font-size: var(--step-1);
  line-height: 1.6;
}

.da-course__actions,
.da-book__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.da-course__actions {
  margin-top: 8px;
}

.da-course > .da-seller {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
}

/* The book: the real cover beside a short description */

.da-book {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  padding: 28px 0 8px clamp(28px, 4vw, 64px);
  border-left: 1px solid var(--line);
}

.da-book__cover {
  margin: 0;
}

/* The one permitted edge on an image: a 1px hairline for the cover. */
.da-book__img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--line);
}

.da-book__title {
  margin-top: 12px;
  max-width: 40ch;
  font-weight: 500;
  line-height: 1.45;
}

.da-book__specs {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Pages and formats split by a 1px rule instead of a middle dot */
.da-book__formats {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--text-muted);
}

.da-book__copy > p:not(.da-book__title):not(.da-book__specs) {
  margin-top: 14px;
  max-width: 44ch;
}

.da-book__actions {
  margin-top: 22px;
}

/* One line for families near Suzi who want her in person */

.da-local {
  max-width: 62ch;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
  color: var(--text-muted);
}

.da-local .text-link {
  display: inline;
  min-height: 0;
  color: var(--text);
}

/* Laptop and tablet */

@media (max-width: 1099px) {
  .da-book {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}

@media (max-width: 959px) {
  .da-hero__grid,
  .da-made__grid {
    grid-template-columns: 1fr;
  }

  .da-hero__text {
    max-width: 60ch;
  }

  .da-course {
    padding: 28px 0 32px;
  }

  .da-book {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Phone */

@media (max-width: 767px) {
  .da-story__grid,
  .da-book {
    grid-template-columns: 1fr;
  }

  .da-hero__text {
    padding-top: 16px;
  }

  .da-story__photo {
    max-width: 320px;
  }

  .da-book__cover {
    width: min(160px, 50%);
  }
}

/* daddy-doula/styles/80-help.css */
/* Help. Fast and scannable: student login and course questions first in one
   ruled row (login carries the weight), then short answers as a ledger, a
   one-line medical note, and a quiet route to Suzi Doula. Square corners
   throughout; navy is the only accent. */

.dh-intro .page-intro {
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 0;
}

/* Quick help: one ruled row with the course email (SamCart emails students
   their access, so there is no login box). */

.dh-quick__single {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  padding-block: clamp(24px, 3vw, 36px);
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.dh-quick__single h3 {
  font-size: var(--step-2);
  letter-spacing: -0.03em;
}

.dh-quick__single .dh-quick__email {
  font-size: var(--step-1);
  overflow-wrap: anywhere;
}

/* (Older two-cell styles below are unused now.) */

.dh-quick {
  padding-bottom: clamp(56px, 7vw, 96px);
}

.dh-quick__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.dh-quick__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
}

.dh-quick__cell + .dh-quick__cell {
  border-left: 1px solid var(--line);
}

.dh-quick__cell h3 {
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.dh-quick__cell p {
  max-width: 44ch;
}

.dh-quick__small {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.dh-quick__email {
  max-width: 100%;
}

.dh-quick__email .text-link {
  font-size: var(--step-1);
  overflow-wrap: anywhere;
}

/* The login cell is the one navy block on the page. On navy the solid button
   inverts: ivory fill and navy text, mist on hover, #c9d0dc on press, and an
   ivory focus ring. */

.dh-quick__login {
  --text: var(--on-navy);
  --text-muted: var(--on-navy-muted);
  --accent: var(--on-navy);
  --accent-hover: var(--mist);
  --accent-press: var(--on-navy-muted);
  --on-accent: var(--navy);
  --focus: var(--on-navy);
  background: var(--block);
  color: var(--text);
}

.dh-quick__login .rv {
  background: var(--ivory);
  color: var(--navy);
  border-color: var(--navy);
}

.dh-quick__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.dh-quick__action .btn {
  color: var(--on-accent);
}

/* Grouped answers: heading left, questions right */

.dh-more {
  padding-bottom: clamp(64px, 8vw, 112px);
}

.dh-group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 16px clamp(32px, 5vw, 80px);
  padding-block: 32px 40px;
  border-top: 1px solid var(--line-strong);
}

.dh-group h2 {
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  line-height: 1.2;
  max-width: 16ch;
}

.dh-qa__item {
  padding-block: 16px 18px;
  border-top: 1px solid var(--line);
}

.dh-qa__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.dh-qa dt {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.35;
}

.dh-qa dd {
  margin-top: 6px;
  max-width: 60ch;
  color: var(--text-muted);
}

.dh-qa dd p + p {
  margin-top: 4px;
}

.dh-qa__title {
  color: var(--text);
  font-weight: 500;
}

.dh-qa__link {
  color: var(--text);
}

/* Medical line: a plain bordered notice, square */

.dh-medical {
  align-self: start;
  max-width: 60ch;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.5;
}

/* Route to Suzi Doula */

.dh-local {
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--bg-alt);
}

.dh-local__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "heading text"
    "heading link";
  gap: 8px clamp(32px, 5vw, 80px);
  align-items: start;
}

.dh-local h2 {
  grid-area: heading;
  font-size: var(--step-3);
  max-width: 16ch;
}

.dh-local p:not(:last-child) {
  grid-area: text;
  max-width: 54ch;
  color: var(--text-muted);
  font-size: var(--step-1);
}

.dh-local p:last-child {
  grid-area: link;
  font-size: var(--step-1);
}

/* Phone: everything in one column */

@media (max-width: 767px) {
  .dh-quick__grid,
  .dh-group,
  .dh-local__inner {
    grid-template-columns: 1fr;
  }

  .dh-local__inner {
    grid-template-areas:
      "heading"
      "text"
      "link";
    gap: 12px;
  }

  .dh-quick__grid {
    border-bottom: 0;
  }

  .dh-quick__cell + .dh-quick__cell {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* Only the login block has a fill; the other lines up with the page text */
  .dh-quick__cell:not(.dh-quick__login) {
    padding-inline: 0;
  }

  .dh-group {
    padding-block: 28px 32px;
  }
}