/* =====================================================================
   The Date Conversations (/date-conversations/), cloned from /getting-married/
   (iteration 240 fixes + the house spacing & type standard). Body class
   "page-365 365-page page-date". Accent = brand yellow #FCBD4C, ink on yellow.
   No reviews section, so from #different down the backgrounds run
   white, cream, white, cream, white.
   ===================================================================== */

html body.page-date {
  --date-accent: #FCBD4C;
  --date-fill: #F06858;
}

/* 1 · Hero: smaller two-part headline, yellow accent line, photo with no left fade. */
html body.page-date .hero365-stage__head { min-width: 0; }
html body.page-date .date-hero__title { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.12; }
html body.page-date .date-hero__title .hero365-stage__title-line { display: inline; white-space: normal; }
html body.page-date .date-hero__title .hero365-stage__title-accent {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.62em;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--date-accent);
}
html body.page-date .hero365-stage__img {
  -webkit-mask-image: none;
  mask-image: none;
  object-position: 30% 50%;
}

/* Hero: one frosted question card on the photo (her signature-moment overlay) */
html body.page-date .date-hero__media { position: relative; }
html body.page-date .date-qcard {
  position: absolute;
  top: clamp(1rem, 4%, 2rem);
  right: clamp(1rem, 4%, 2rem);
  max-width: min(17rem, 46%);
  margin: 0;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 40px -22px rgba(40, 30, 20, 0.45);
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.25;
  text-align: center;
  color: var(--ink, #1A1A1A);
}
html body.page-date .date-qcard__cat {
  display: table;
  margin: 0 auto 0.55rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #FCBD4C;
  font-family: var(--font-body, "Figtree", sans-serif);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* 2 · "Most people spend months dating someone…" (365 #contrast layout) */
html body.page-date .date-under { margin: 0 0 1rem; font-weight: 600; color: var(--ink, #1A1A1A); }
html body.page-date #contrast .alone-close { color: var(--date-accent); }
html body.page-date #contrast .alone-chat__icon { background: var(--date-accent); color: var(--ink, #1A1A1A); }

/* 3 · "Nobody ever told them which conversations to have." (rc-cols) */
html body.page-date #real-conversations .rc-col__title { color: var(--date-accent); }

/* 4 · Questions carousel: yellow + coral bands, closing line */
html body.page-date .qdeck__card--coral .qdeck__band { background-color: var(--date-fill); }
html body.page-date .date-ask {
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  text-align: center;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  color: #3D3A37;
}
html body.page-date .date-ask strong { color: var(--ink, #1A1A1A); }

/* 5 · Game intro with The Date Conversations cover */
html body.page-date .intro-game__eyebrow { color: var(--date-accent); }
html body.page-date .ig-tick { background: var(--date-accent); color: var(--ink, #1A1A1A); }
html body.page-date .date-intro__lead {
  max-width: 36rem;
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: #3D3A37;
}
html body.page-date .date-cover { margin: 0; display: flex; justify-content: center; }
html body.page-date .date-cover img {
  width: min(100%, 380px);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 30px 50px -28px rgba(60, 40, 20, 0.45), 0 8px 18px -10px rgba(60, 40, 20, 0.2);
}
html body.page-date .date-tagline {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  text-align: center;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--ink, #1A1A1A);
}

/* 6 · The 7 areas: two-column numbered list, amber number dots */
html body.page-date .mcat-grid {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
html body.page-date .mcat {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: 1rem;
  padding: 1.35rem 0;
  border-top: 1px solid rgba(26, 26, 26, 0.12);
}
html body.page-date .mcat__n {
  grid-row: 1 / span 2;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber, #FCBD4C);
  color: var(--ink, #1A1A1A);
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: 1rem;
}
html body.page-date .mcat__t {
  margin: 0.2rem 0 0.3rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--ink, #1A1A1A);
}
html body.page-date .mcat__d { margin: 0; font-size: 1rem; line-height: 1.5; color: #3D3A37; }

/* 7 · App overview (homepage app-features component) */
html body.page-date .date-app { padding-bottom: 0; overflow: hidden; background: #FFF9F4; }
html body.page-date .date-app__inner { max-width: 1200px; margin: clamp(1rem, 2vw, 2rem) auto 0; padding: 0 var(--container-pad, 1.25rem); }
html body.page-date .date-app__inner img { display: block; width: 100%; height: auto; }

/* 8 · Reviews: yellow accents on quote marks, monograms and rail buttons */
html body.page-date .date-reel-controls { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
html body.page-date .voice__mark { color: var(--date-accent); }
html body.page-date .voice__monogram[data-tone="coral"] { background: #FCBD4C; color: var(--ink, #1A1A1A); }
html body.page-date .rail-btn { color: var(--date-accent); }
html body.page-date .rail-btn--next,
html body.page-date .rail-btn:hover { background: #FCBD4C; border-color: #FCBD4C; color: var(--ink, #1A1A1A); }

/* 9 · "This is not about finding problems…" — three open columns, ink heads */
html body.page-date #foundation .rc-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
html body.page-date #foundation .rc-col {
  padding: 0.25rem clamp(1.25rem, 3vw, 2.75rem);
  border-left: 1px solid rgba(26, 26, 26, 0.18);
}
html body.page-date #foundation .rc-col:first-child { border-left: 0; padding-left: 0; }
html body.page-date #foundation .rc-col:last-child { padding-right: 0; }
html body.page-date #foundation .rc-col__title {
  margin: 0 0 1rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink, #1A1A1A);
  text-align: left;
  text-wrap: balance;
}
html body.page-date #foundation .rc-col p {
  margin: 0;
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink, #1A1A1A);
  text-align: left;
  text-align-last: left;
}
html body.page-date #foundation .rc-col p.rc-col__kicker { font-weight: 700; }
html body.page-date .date-team {
  max-width: 46rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink, #1A1A1A);
}

/* 10 · Price box: one colour — yellow cover, logo, price, ticks and button */
html body.page-date #pricing .pcard__price { color: var(--date-accent); }
html body.page-date #pricing .pcard .tick { background: #FCBD4C; color: var(--ink, #1A1A1A); }
html body.page-date #pricing .pcard .pcard__cta { background: #FCBD4C; border-color: #FCBD4C; color: var(--ink, #1A1A1A); }
html body.page-date #pricing .pcard::before { background-image: url("../assets/pick-one-mark-amber.svg"); }
html body.page-date .date-family { margin: 2rem auto 0; text-align: center; font-size: 1rem; color: #6E6B67; }

@media (max-width: 54rem) {
  html body.page-date .mcat-grid { grid-template-columns: 1fr; }
  html body.page-date .date-cover img { width: min(70vw, 300px); }
  html body.page-date #foundation .rc-cols { grid-template-columns: 1fr; }
  html body.page-date #foundation .rc-col { border-left: 0; border-top: 1px solid rgba(26, 26, 26, 0.18); padding: 1.5rem 0; }
  html body.page-date #foundation .rc-col:first-child { border-top: 0; padding-top: 0; }
}

/* "Pick One: The Date Conversations exists…" is a full sentence, so the closing line
   runs one step smaller than the money page's three-word close. */
html body.page-date #contrast .alone-close { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; margin-top: 1.25rem; }

/* Mobile: the photo is too narrow for an overlay without covering a face,
   so the card sits under the photo, overlapping its bottom edge. */
@media (max-width: 54rem) {
  html body.page-date .hero365-stage__img { object-position: 60% 50%; }
  html body.page-date .date-qcard { position: relative; top: auto; right: auto; z-index: 1; max-width: 18rem; margin: -2rem auto 0; padding: 0.75rem 1rem 0.85rem; font-size: 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.94); }
  html body.page-date .date-qcard__cat { font-size: 0.7rem; margin-bottom: 0.4rem; }
}

/* 8b · "Here's what makes Pick One different" + safe cards — homepage sections
   copied as-is; undo the 365 page's justified paragraphs so they match home. */
html body.page-date #different .bridge-note { text-align: center; text-align-last: center; }
html body.page-date #makes-it-safe .safe-card__desc { text-align: left; text-align-last: left; }
html body.page-date #makes-it-safe .safe-closing__statement { text-align: center; text-align-last: center; margin-inline: auto; }

/* 11 · "Just one question." — homepage section at the foot of the page, on cream as on home */
html body.page-date #just-one { background: var(--cream, #FEF8EC); }

/* 7b · Space under the app overview before the next section (her ask 2026-10-24):
   iteration 236: no fade, phones cut clean by the section edge as on the approved /money/ frame. */
html body.page-date .date-app { padding-bottom: 0; }

/* =====================================================================
   Iteration 236 — her "Fixes for getting married" + the house spacing &
   type standard (projects/pick-one/design/standards/spacing-and-type.md).
   Desktop ≥1024 / mobile ≤600, linear in between.
   ===================================================================== */
html body.page-date {
  --dc-h3: clamp(1.875rem, 0.99rem + 2.358vw, 2.5rem);      /* section headline 40 / 30 */
  --dc-h4: clamp(1.375rem, 0.844rem + 1.415vw, 1.75rem);    /* in-section headline 28 / 22 */
  --dc-h5: clamp(1.125rem, 0.948rem + 0.472vw, 1.25rem);    /* item title 20 / 18 */
  --dc-pad: clamp(2.5rem, 1.085rem + 3.774vw, 3.5rem);      /* section padding 56 / 40 */
}

/* Section headlines (H3 size). The hero H1 is untouched. */
html body.page-date :is(#contrast .alone-title, #qdeck-title, .section-header .section-title, .intro-game__title, #different .h-1, #just-one h2) {
  margin-top: 0;
  font-size: var(--dc-h3);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* In-section headlines (H4 size) */
html body.page-date :is(#contrast .alone-close, #real-conversations .rc-col__title, #foundation .rc-col__title, .date-tagline, #makes-it-safe .safe-closing__statement) {
  font-size: var(--dc-h4);
  line-height: 1.2;
}

/* Item titles (H5 size) */
html body.page-date :is(.mcat__t, #makes-it-safe .safe-card__title, #pricing .pcard__name) {
  font-size: var(--dc-h5);
  line-height: 1.3;
}

/* Section padding 56 / 40, measured to the visible content */
html body.page-date :is(#contrast, #real-conversations, #question-deck, #the-game, #categories, #date-app, #results, #different, #makes-it-safe, #foundation, #pricing, #just-one):is(.section, .just-one-q) {
  padding-top: var(--dc-pad);
  padding-bottom: var(--dc-pad);
}
html body.page-date #date-app.section { padding-bottom: 0; }
html body.page-date .section-header > :first-child,
html body.page-date .intro-game__copy > :first-child,
html body.page-date .alone-copy > :first-child,
html body.page-date .alone-chats > :first-child { margin-top: 0; }
html body.page-date .mcat:last-child { padding-bottom: 0; }

/* Fix 1 · qdeck headline and its lead: one line each on desktop */
html body.page-date #question-deck .section-header,
html body.page-date #qdeck-title,
html body.page-date #question-deck .section-lead { max-width: none; }

/* Fix 2 · tagline: one sentence per line */
html body.page-date .date-tagline__line { display: block; }

/* Fix 4 · #different: lead → bridge 56 / 40 */
html body.page-date #different .bridge-stage { margin-top: var(--dc-pad); }

/* Fix 5 · "And you walk into your marriage…" on one line on desktop */
html body.page-date .date-team { max-width: none; }
html body.page-date #real-conversations .section-header .section-title { font-size: var(--dc-h3); line-height: 1.1; }
html body.page-date #question-deck .section-header .section-lead { max-width: none !important; width: 100%; } /* beats the shared lead clamp(…48rem) !important */
html body.page-date #results .reel { padding-bottom: 0; margin-bottom: 0; }
html body.page-date #real-conversations .rc-col { padding-bottom: 0; }

/* #contrast story rhythm (as the other mini pages): headline → first line 32 / 24,
   paragraph → paragraph 24 / 20, before the yellow close 40 / 32; close = H4 28 / 22. */
html body.page-date {
  --dc-c-title: clamp(1.5rem, 0.7925rem + 1.887vw, 2rem);
  --dc-c-para: clamp(1.25rem, 0.896rem + 0.943vw, 1.5rem);
  --dc-c-close: clamp(2rem, 1.2925rem + 1.887vw, 2.5rem);
}
html body.page-date #contrast .alone-copy > * { margin-top: 0; margin-bottom: 0; }
html body.page-date #contrast#contrast .alone-copy > * + * { margin-top: var(--dc-c-para); }
html body.page-date #contrast#contrast .alone-copy > .alone-title + * { margin-top: var(--dc-c-title); }
html body.page-date #contrast#contrast .alone-copy > .alone-close {
  margin-top: var(--dc-c-close);
  font-size: var(--dc-h4);
  line-height: 1.2;
}

/* =====================================================================
   /date-conversations/ only
   ===================================================================== */
/* Backgrounds without the reviews section: #date-app cream → #different white →
   #makes-it-safe cream → #foundation white → #pricing cream → #just-one white */
html body.page-date #different { background: #FFFFFF; }
html body.page-date #makes-it-safe { background: var(--cream, #FEF8EC); }
html body.page-date #foundation { background: #FFFFFF; }
html body.page-date #pricing { background: var(--cream, #FEF8EC); }
html body.page-date #just-one { background: #FFFFFF; }

/* Reframe headline: the copy's two sentences, one per line */
html body.page-date .date-found__line { display: block; }

/* #different: centre both quotes (the long app question wrapped ragged under the 365 justify) */
html body.page-date #different .bridge-q { text-align: center; text-align-last: center; }

/* Just one question: "The Date Conversations" is a long app title, so the top
   bubble sits further right on desktop to leave it readable. */
@media (min-width: 62.0625rem) {
  html body.page-date .just-one-q__bubble--top { right: -36%; }
}