/* =====================================================================
   Couples and Money (/money/) — iteration 219, her approved preview.
   The page reuses the approved 365 components: it loads ../365/365.css and
   ../365/365.refine.css and carries body class "page-365 365-page page-money".
   This file holds only what is specific to the money page.
   Her rules: accent = brand blue, not coral (text #5F8FBA, fills #94B7D5);
   the price box is one colour; no left-edge photo fade; CTAs amber except
   the price-box button.
   ===================================================================== */

html body.page-money {
  --money-blue: #5F8FBA;
  --money-blue-soft: #E3EDF6;
  --money-blue-fill: #94B7D5;
}

/* 1 · Hero: smaller two-part headline, blue accent line, photo with no left fade. */
html body.page-money .hero365-stage__head { min-width: 0; }
html body.page-money .money-hero__title { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.12; }
html body.page-money .money-hero__title .hero365-stage__title-line { display: inline; white-space: normal; }
html body.page-money .money-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(--money-blue);
}
html body.page-money .hero365-stage__img {
  -webkit-mask-image: none;
  mask-image: none;
  object-position: 30% 50%;
}

/* 2 · "And you never see it coming." (365 #contrast layout) */
html body.page-money .money-under { margin: 0 0 1rem; font-weight: 600; color: var(--ink, #1A1A1A); }
html body.page-money #contrast .alone-close { color: var(--money-blue); }
html body.page-money #contrast .alone-chat__icon { background: var(--money-blue-soft); color: var(--money-blue); }

/* 3 · "Nobody taught you this." (rc-cols) — blue column heads */
html body.page-money #real-conversations .rc-col__title { color: var(--money-blue); }

/* 4 · Questions carousel: amber + brand-blue bands, closing line */
html body.page-money .qdeck__card--blue .qdeck__band { background-color: var(--money-blue-fill); }
html body.page-money .money-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-money .money-ask strong { color: var(--ink, #1A1A1A); }

/* 5 · Game intro with the blue Couples and Money cover */
html body.page-money .intro-game__eyebrow { color: var(--money-blue); }
html body.page-money .ig-tick { background: var(--money-blue-soft); color: var(--money-blue); }
html body.page-money .money-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-money .money-cover { margin: 0; display: flex; justify-content: center; }
html body.page-money .money-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-money .money-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 14 areas: two-column numbered list, amber number dots */
html body.page-money .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-money .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-money .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-money .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-money .mcat__d { margin: 0; font-size: 1rem; line-height: 1.5; color: #3D3A37; }

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

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

/* 9 · "This is not about finding problems…" — three open columns, ink heads */
html body.page-money #foundation .rc-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
html body.page-money #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-money #foundation .rc-col:first-child { border-left: 0; padding-left: 0; }
html body.page-money #foundation .rc-col:last-child { padding-right: 0; }
html body.page-money #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-money #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-money #foundation .rc-col p.rc-col__kicker { font-weight: 700; }
html body.page-money .money-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 — blue cover, deep-blue logo, blue price, ticks and button */
html body.page-money #pricing .pcard__price { color: var(--money-blue); }
html body.page-money #pricing .pcard .tick { background: var(--money-blue); color: #FFFFFF; }
html body.page-money #pricing .pcard .pcard__cta { background: var(--money-blue); border-color: var(--money-blue); color: #FFFFFF; }
html body.page-money #pricing .pcard::before { background-image: url("../assets/pick-one-mark-blue.svg"); }
html body.page-money .money-family { margin: 2rem auto 0; text-align: center; font-size: 1rem; color: #6E6B67; }

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

/* 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-money #different .bridge-note { text-align: center; text-align-last: center; }
html body.page-money #makes-it-safe .safe-card__desc { text-align: left; text-align-last: left; }
html body.page-money #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-money #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-money .money-app { padding-bottom: 0; }