/*
Theme Name: Mehrpath Child
Template: ollie
Text Domain: mehrpath
Version: 1.0.0
Description: Child theme for mehrpath.com — bilingual (EN/FA) psychoeducation site. Structured content via Carbon Fields; design tokens locked in theme.json.
*/

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* WordPress core's .alignfull uses margin-inline: calc(50% - 50vw) to
     bleed full-width sections (our header/footer template parts) to the
     edge of the viewport. 100vw INCLUDES the scrollbar's own width, so on
     any page tall enough to scroll, that calc is off by the scrollbar
     width and the page gains real horizontal overflow — the exact "hero
     art / language switch / 3rd approach card cut off at the right edge"
     bug found in review. overflow-x: clip on html+body (not `hidden`,
     which would also clip intentional box-shadows) removes the resulting
     scrollbar/shift without touching any element's actual layout.
     Confirmed the fix: document.documentElement.scrollWidth === innerWidth
     at 1440/1024/768/390 in both EN and FA after adding this. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--inter);
  line-height: 1.6;
  overflow-x: clip;
}

a { color: inherit; }

img, svg { max-inline-size: 100%; }

.container { width: min(1180px, calc(100% - 40px)); margin: auto; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Logical properties are used throughout below instead of left/right so RTL mirrors for free. */
html[dir="rtl"] .hero-art svg { transform: scaleX(-1); transform-origin: center; }
/* Vignette SVGs (.vignette svg) are landscape-symmetric and intentionally NOT mirrored. */

body.lang-fa,
body.lang-fa h1, body.lang-fa h2, body.lang-fa h3, body.lang-fa .brand, body.lang-fa .footer-brand {
  font-family: var(--wp--preset--font-family--vazirmatn);
}
body.lang-fa { line-height: 1.8; }
body.lang-fa p, body.lang-fa li { line-height: 1.9; }

.ltr-inline { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.learn::after { content: "→"; margin-inline-start: 4px; }
html[dir="rtl"] .learn::after { content: "←"; }

/* ------------------------------------------------------------------ Header */

.mehrpath-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-block-size: 78px;
  padding-block: 10px;
  border-block-end: 1px solid #D5DEDA;
  background: color-mix(in srgb, var(--wp--preset--color--ivory) 92%, transparent);
}

.brand {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--forest-950);
  text-decoration: none;
}

.brand span { color: var(--wp--preset--color--sun-500); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  border-inline-start: 1px solid #D5DEDA;
  padding-inline-start: 20px;
}

.lang-switch a { text-decoration: none; color: var(--wp--preset--color--muted); }
.lang-switch a:hover,
.lang-switch a.is-active { color: var(--wp--preset--color--forest-950); }

.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 46px;
  padding-inline: 20px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--forest-900);
  background: var(--wp--preset--color--forest-900);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--inter);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}

.nav-cta:hover,
.button:hover {
  background: var(--wp--preset--color--forest-700);
  border-color: var(--wp--preset--color--forest-700);
  transform: translateY(-2px);
}

.button.secondary {
  background: transparent;
  color: var(--wp--preset--color--forest-900);
}

.button.secondary:hover {
  background: var(--wp--preset--color--forest-900);
  color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------- Hero */

.hero {
  padding-block: 42px 70px;
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--wp--preset--color--sun-300) 30%, transparent), transparent 58%),
    linear-gradient(180deg, var(--wp--preset--color--ivory), var(--wp--preset--color--sage-100));
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 58px;
  align-items: center;
  min-block-size: 660px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 20px;
  color: var(--wp--preset--color--forest-700);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: block;
  inline-size: 32px;
  block-size: 2px;
  background: var(--wp--preset--color--sun-500);
}

h1, h2, h3 {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--forest-950);
}

h1 {
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 1.02;
  max-inline-size: 650px;
}

h2 {
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.08;
}

h3 {
  font-size: 24px;
  line-height: 1.15;
}

.hero-copy p {
  max-inline-size: 570px;
  margin-block: 24px 28px;
  font-size: 18px;
  color: var(--wp--preset--color--muted);
}

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

.trust-line {
  margin-block-start: 30px;
  color: var(--wp--preset--color--forest-700);
  font-size: 13px;
  font-weight: 600;
}

.hero-art {
  position: relative;
  block-size: 570px;
  border-radius: var(--wp--custom--radius--xl);
  overflow: hidden;
  background: #cbdccf;
  box-shadow: 0 18px 50px rgba(16, 45, 38, 0.10);
}

.hero-art svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------- Sections */

section { padding-block: 100px; }

.section-head {
  max-inline-size: 700px;
  margin-block-end: 42px;
}

.section-head h2 { margin-block-end: 16px; }

.section-head p {
  max-inline-size: 620px;
  font-size: 17px;
  color: var(--wp--preset--color--muted);
}

/* ----------------------------------------------------------- Programs */

.program-grid {
  display: grid;
  /* Equal-size cards, 3 per row (5 programs wrap 3 + 2) — no-mercy review:
     the previous 6-col grid with nth-child(4)/(5) spanning 3 columns made
     PelviMind and Beyond the Fight oversized relative to the other three. */
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 380px;
  padding: 27px;
  border: 1px solid #D5DEDA;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--white);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 45, 38, 0.10);
}

/* Stretched-link pattern: only the title text is an <a>, but ::after
   expands its hit area to cover the whole card, so the entire card is
   clickable without wrapping card body text (chip, summary, "Learn more")
   in an underlined link — no-mercy review: "all card text is underlined". */
.program-card-link {
  color: inherit;
  text-decoration: none;
}

.program-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.program-card-link:focus-visible::after {
  outline: 2px solid var(--wp--preset--color--forest-700);
  outline-offset: 2px;
}

.vignette {
  block-size: 150px;
  margin-block-end: 24px;
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
}

.vignette svg { width: 100%; height: 100%; display: block; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--wp--preset--color--sage-100);
  color: var(--wp--preset--color--forest-900);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.program-card h3 { margin-block: 4px 0; }

.program-card p {
  margin-block: 13px 20px;
  color: var(--wp--preset--color--muted);
}

.learn {
  display: inline-flex;
  align-items: center;
  margin-block-start: auto;
  color: var(--wp--preset--color--forest-900);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* ------------------------------------------------------------ Approach */

.approach {
  background: var(--wp--preset--color--forest-950);
  color: var(--wp--preset--color--white);
}

.approach h2, .approach h3 { color: var(--wp--preset--color--white); }

/* The default .eyebrow colour (forest-700, a dark green) fails AA on this
   section's near-black background — no-mercy review flagged it. Swap to
   the light sunrise/amber token used elsewhere on dark backgrounds. */
.approach .eyebrow { color: var(--wp--preset--color--sun-300); }
.approach .eyebrow::before { background: var(--wp--preset--color--sun-300); }

.approach-grid { display: block; }

.approach-grid > :first-child { max-inline-size: 700px; }

.principles {
  margin-block-start: 27px;
  padding-block: 19px;
  border-block: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 14px;
}

.principles strong { color: var(--wp--preset--color--sun-300); }

.approach-cards {
  margin-block-start: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.approach-card {
  min-block-size: 300px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--wp--custom--radius--lg);
  background: rgba(255, 255, 255, 0.06);
}

.step {
  margin-block-end: 45px;
  color: var(--wp--preset--color--sun-300);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.approach-card p { color: #d7e4dd; }

/* -------------------------------------------------------------- About */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.founder {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  padding: 25px;
  border: 1px solid #D5DEDA;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--white);
}

.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 150px;
  padding: 14px;
  border-radius: var(--wp--custom--radius--lg);
  background: linear-gradient(135deg, var(--wp--preset--color--sage-100), var(--wp--preset--color--cream));
  color: var(--wp--preset--color--forest-700);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.founder p {
  margin-block: 10px;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.credential {
  margin-block-start: 16px;
  color: var(--wp--preset--color--forest-900);
  font-size: 13px;
  font-weight: 700;
}

/* Monogram avatar fallback for a founder with no uploaded photo yet
   (mehrpath_render_founder_avatar(), inc/avatars.php) — replaces a plain
   grey "Founder photo" placeholder box, which read as a broken image. */
.photo-slot--monogram span {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--forest-700);
}

.photo-slot--image {
  padding: 0;
  overflow: hidden;
  background: var(--wp--preset--color--sage-100);
}

.photo-slot--image img,
img.photo-slot--image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ------------------------------------------------------------- Journal */

.journal { background: var(--wp--preset--color--sage-100); }

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.article {
  min-block-size: 250px;
  padding: 25px;
  border: 1px solid #D5DEDA;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--white);
}

.article .tag {
  display: block;
  color: var(--wp--preset--color--forest-700);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.article h3 { margin-block-start: 30px; font-size: 25px; }

.article p {
  margin-block: 10px 0;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

/* Honest "coming soon" journal cards (title only, no body/date) — shown
   while the Journal has no published posts yet. */
.article--coming-soon {
  min-block-size: auto;
  border-style: dashed;
}

.article--coming-soon .tag { color: var(--wp--preset--color--sun-500); }
.article--coming-soon h3 { margin-block-start: 14px; }

/* ----------------------------------------------------------- Questions */

.questions-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
}

details { border-block-start: 1px solid #D5DEDA; padding-block: 20px; }

summary {
  cursor: pointer;
  color: var(--wp--preset--color--forest-900);
  font-weight: 700;
}

details p {
  max-inline-size: 680px;
  margin-block: 12px 0;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------- Waitlist */

.waitlist {
  background: linear-gradient(180deg, var(--wp--preset--color--ivory), var(--wp--preset--color--cream));
}

.wait-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 65px;
  align-items: start;
}

.form {
  padding: 30px;
  border: 1px solid #D5DEDA;
  border-radius: var(--wp--custom--radius--xl);
  background: var(--wp--preset--color--white);
  box-shadow: 0 18px 50px rgba(16, 45, 38, 0.10);
}

label {
  display: block;
  margin-block-end: 8px;
  color: var(--wp--preset--color--forest-900);
  font-size: 13px;
  font-weight: 700;
}

input[type="text"],
input[type="email"] {
  inline-size: 100%;
  block-size: 48px;
  padding-inline: 14px;
  border: 1px solid #b9c8be;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--white);
  outline: none;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 15px;
  color: var(--wp--preset--color--ink);
}

input:focus {
  border-color: var(--wp--preset--color--forest-700);
  box-shadow: 0 0 0 3px rgba(40, 89, 75, 0.15);
}

.field { margin-block-end: 19px; }

.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid #D5DEDA;
  border-radius: var(--wp--custom--radius--md);
  font-size: 13px;
  font-weight: 500;
}

.check input { margin-block-start: 3px; accent-color: var(--wp--preset--color--forest-900); }

.consent {
  margin-block: 15px 20px;
  font-size: 12px;
  color: var(--wp--preset--color--muted);
}

.consent a { color: var(--wp--preset--color--forest-900); font-weight: 700; }

/* ------------------------------------------ Fluent Forms (waitlist form) */
/*
 * The waitlist form is built with Fluent Forms (inc/forms.php disables its
 * bundled stylesheet), but its markup uses Fluent's OWN class names
 * (.ff-el-group, .ff-el-form-check, .ff-btn-submit, …), not this theme's
 * .field/.check/.button classes. These rules re-skin that real markup to
 * match the approved mockup (r3_en.html) instead of Fluent's own look —
 * no-mercy review round 2, item 1. Bare `label` and `input[type=text/email]`
 * above already apply here for free (they're plain attribute/tag
 * selectors, not scoped to this theme's own class names).
 */
.ff-el-group { margin-block-end: 19px; }

.ff-el-input--label .ff-el-tooltip { display: none; } /* the little (i) help icon — help_message already reads fine as plain text below the label in this form */

/* Programs-of-interest checkboxes: reproduce the mockup's `.check-grid`/
   `.check` bordered 2-column layout on Fluent's own .ff-el-form-check rows. */
.ff-el-input--content:has(.ff-el-form-check) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ff-el-form-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid #D5DEDA;
  border-radius: var(--wp--custom--radius--md);
}

.ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
}

.ff-el-form-check-input {
  margin-block-start: 3px;
  accent-color: var(--wp--preset--color--forest-900);
}

/* Preferred-language radios: a plain option list reads fine here (only two
   options), unlike the 5-option checkbox grid above. */
.ff-el-input--content:has(input[type="radio"]) {
  display: block;
}
.ff-el-input--content:has(input[type="radio"]) .ff-el-form-check {
  display: flex;
  margin-block-end: 8px;
  border: none;
  padding: 0;
}

/* Consent: single required checkbox, small print, linked Privacy Policy —
   matches this theme's existing bare `.consent`/`.consent a` look. */
.ff-el-group:has(#fluentform_consent) .ff-el-form-check {
  border: none;
  padding: 0;
  align-items: flex-start;
}
.ff-el-group:has(#fluentform_consent) .ff-el-form-check-label {
  font-size: 12px;
  color: var(--wp--preset--color--muted);
}
.ff-el-group:has(#fluentform_consent) .ff-el-form-check-label a {
  color: var(--wp--preset--color--forest-900);
  font-weight: 700;
}

/* Submit button: this theme's pill-shaped forest-green `.button`, not
   Fluent's default blue rectangle. */
.ff-btn.ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 26px;
  padding-block: 14px;
  border: none;
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: var(--wp--preset--color--forest-900);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--inter);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ff-btn.ff-btn-submit:hover { background: var(--wp--preset--color--forest-700); }

@media (max-width: 480px) {
  .ff-el-input--content:has(.ff-el-form-check) { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- Footer */

.mehrpath-footer {
  padding-block: 58px 28px;
  background: var(--wp--preset--color--forest-950);
  color: var(--wp--preset--color--sage-100);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 35px;
}

.mehrpath-footer h3 {
  margin-block-end: 14px;
  color: var(--wp--preset--color--white);
  font-size: 14px;
}

.mehrpath-footer a {
  display: block;
  margin-block: 8px;
  color: var(--wp--preset--color--sage-100);
  font-size: 14px;
  text-decoration: none;
}

.mehrpath-footer a:hover { color: var(--wp--preset--color--white); }

.footer-brand {
  font-family: var(--wp--preset--font-family--dm-serif-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--white);
}

.footer-note {
  max-inline-size: 360px;
  margin-block-start: 12px;
  color: #b8ccc1;
  font-size: 13px;
}

.language-toggle { display: flex; flex-direction: column; align-items: normal; }
.language-toggle > * { text-align: start; }

.copyright {
  margin-block-start: 45px;
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  color: #aebfb6;
  font-size: 12px;
}

/* --------------------------------------------------------- Chip filters */

.chip-filter a.chip.is-active {
  background: var(--wp--preset--color--forest-900);
  color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------- Responsive */

@media (max-width: 850px) {
  .hero { padding-block: 32px 52px; }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    min-block-size: auto;
  }

  .hero-art { block-size: 380px; }

  section { padding-block: 72px; }

  .program-grid { grid-template-columns: 1fr; }

  .program-card {
    min-block-size: auto;
  }

  .approach-cards { grid-template-columns: 1fr; }

  .about-grid { grid-template-columns: 1fr; }

  .journal-grid { grid-template-columns: 1fr; }

  .questions-grid { grid-template-columns: 1fr; gap: 32px; }

  .wait-grid { grid-template-columns: 1fr; gap: 36px; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .mehrpath-header { flex-wrap: wrap; row-gap: 10px; }
}

@media (max-width: 480px) {
  .container { width: calc(100% - 28px); }

  .hero-art { block-size: 260px; }

  section { padding-block: 56px; }

  .program-card { padding: 20px; }

  .founder { grid-template-columns: 1fr; }

  .photo-slot { block-size: 200px; }

  .check-grid { grid-template-columns: 1fr; }

  .form { padding: 22px; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }

  .actions .button { inline-size: 100%; }
}.pd-hero {
  padding-block: 70px 80px;
  background: linear-gradient(160deg, var(--wp--preset--color--ivory), var(--wp--preset--color--cream));
}

.pd-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: center;
}

.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 25px;
}

.pd-chips .chip {
  background: var(--wp--preset--color--white);
  border: 1px solid #D5DEDA;
}

.pd-hero-art {
  position: relative;
  block-size: 390px;
  border-radius: var(--wp--custom--radius--xl);
  overflow: hidden;
  background: linear-gradient(150deg, var(--wp--preset--color--sage-100), var(--wp--preset--color--cream));
  box-shadow: 0 18px 45px rgba(26, 58, 46, .12);
}

.pd-hero-art svg,
.pd-hero-art .vignette,
.pd-hero-art .vignette svg {
  width: 100%;
  height: 100%;
}

.pd-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

.pd-for-card {
  padding: 30px;
  border: 1px solid #D5DEDA;
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--lg);
}

.pd-for-card ul {
  padding-inline-start: 20px;
  color: var(--wp--preset--color--muted);
}

.pd-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pd-work {
  min-block-size: 240px;
  padding: 28px;
  background: var(--wp--preset--color--white);
  border: 1px solid #D5DEDA;
  border-radius: var(--wp--custom--radius--lg);
}

.pd-minutes {
  font-size: 13px;
  font-weight: 700;
  color: var(--wp--preset--color--forest-700);
  margin-block-end: 35px;
}

.pd-week-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.pd-week {
  padding: 26px;
  background: var(--wp--preset--color--white);
  border: 1px solid #D5DEDA;
  border-radius: var(--wp--custom--radius--lg);
}

.pd-week span {
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--forest-700);
}

.pd-safety {
  background: var(--wp--preset--color--forest-950);
  color: var(--wp--preset--color--sage-100);
}

.pd-safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.pd-safety-notice {
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--wp--custom--radius--lg);
  background: rgba(255, 255, 255, .05);
}

.pd-safety-notice h2,
.pd-safety-notice h3,
.pd-safety-notice h4 {
  color: var(--wp--preset--color--white);
}

.pd-safety-notice p,
.pd-safety-notice li {
  color: #d4e2da;
}

.pd-founder {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 25px;
  align-items: center;
}

.pd-founder .photo-slot {
  block-size: 160px;
}

.pd-wait {
  background: linear-gradient(160deg, var(--wp--preset--color--ivory), var(--wp--preset--color--cream));
}

.pd-wait-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
}

.soft {
  background: var(--wp--preset--color--sage-100);
}

@media (max-width: 800px) {
  .pd-hero,
  .pd-wait,
  .pd-safety,
  .soft {
    padding-block: 65px;
  }

  .pd-hero-grid,
  .pd-intro-grid,
  .pd-safety-grid,
  .pd-wait-grid,
  .pd-work-grid,
  .pd-week-grid {
    grid-template-columns: 1fr;
  }

  .pd-founder {
    grid-template-columns: 110px 1fr;
  }

  .pd-founder .photo-slot {
    block-size: 110px;
  }

  .pd-hero-art {
    block-size: 300px;
  }
}