/* ============================================================
   Pick One · 365 Daily Ritual Refinement Layer
   ------------------------------------------------------------
   Loaded after 365.css and pick-one-ds.css.

   This refinement layer enforces:
     1 · Strict container alignment and 8px grid vertical rhythm
     2 · Hero focus with signature frosted glass simulator card
     3 · CSS grid equal heights across cards and feature boxes
     4 · Ragged-right text-align: start on narrow prose (fixing rivers)
     5 · High contrast WCAG AA validation on all panels
   ============================================================ */

/* ---------- 1 · Container & Section Rhythm ------------------- */
:is(.page-365, .365-page) .container,
:is(.page-365, .365-page) .wrap {
  width: 100%;
  max-width: var(--container-max-w, 80rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* 02_LP_365 Blueprint: Hero & Honest Pause Split Layout */
:is(.page-365, .365-page) .hero-decision__grid,
:is(.page-365, .365-page) .honest-pause__grid {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem) !important;
  align-items: center !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 48rem) {
  :is(.page-365, .365-page) .hero-decision__grid,
  :is(.page-365, .365-page) .honest-pause__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  }
}
:is(.page-365, .365-page) .hero-decision__media,
:is(.page-365, .365-page) .honest-pause__media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 48px -10px rgba(26, 46, 34, 0.15);
  background: #fbf0dd;
}
:is(.page-365, .365-page) .hero-decision__img,
:is(.page-365, .365-page) .honest-pause__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
:is(.page-365, .365-page) .hero-decision__card {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 290px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  z-index: 2;
}
:is(.page-365, .365-page) .honest-pause__media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 48px -10px rgba(26, 46, 34, 0.15);
  background: #fbf0dd;
  aspect-ratio: 4 / 3;
}
:is(.page-365, .365-page) .honest-pause__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
:is(.page-365, .365-page) .honest-pause__cards-stack {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  max-width: 275px;
  z-index: 2;
}
:is(.page-365, .365-page) .honest-pause__qcard {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  padding: 0.65rem 0.95rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

:is(.page-365, .365-page) .section {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

:is(.page-365, .365-page) .section--tight {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
}

:is(.page-365, .365-page) .section--white {
  background-color: #ffffff;
}

:is(.page-365, .365-page) .section--muted {
  background-color: var(--cream, #fef8ec);
}

/* ---------- 2 · Section Header Rhythm ------------------------ */
:is(.page-365, .365-page) .section-header {
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
  text-align: center;
}

:is(.page-365, .365-page) .section-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink, #1a1a1a);
  text-wrap: balance;
}

:is(.page-365, .365-page) .section-subtitle {
  margin: 0.875rem auto 0;
  max-width: 58ch;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--muted, #6e6b67);
  text-align: center;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: pretty;
}

:is(.page-365, .365-page) .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.875rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-coral-ink, #b8402d);
}

/* ---------- 3 · Hero Section --------------------------------- */
:is(.page-365, .365-page) .hero-365 {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 6.5vw, 6rem);
  background:
    radial-gradient(110% 80% at 90% 10%, rgba(252, 189, 76, 0.16) 0%, rgba(252, 189, 76, 0) 55%),
    radial-gradient(100% 70% at 5% 95%, rgba(240, 104, 88, 0.12) 0%, rgba(240, 104, 88, 0) 60%),
    linear-gradient(180deg, #fffdf8 0%, var(--cream, #fef8ec) 100%);
}

:is(.page-365, .365-page) .hero-365__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  :is(.page-365, .365-page) .hero-365__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

:is(.page-365, .365-page) .hero-365__title {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

:is(.page-365, .365-page) .hero-365__title .highlight {
  color: var(--coral, #f06858);
}

:is(.page-365, .365-page) .hero-365__preheadline {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted, #6e6b67);
  max-width: 50ch;
  margin-bottom: 0.75rem;
}

:is(.page-365, .365-page) .hero-365__subtitle {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--body, #302f2e);
  max-width: 52ch;
  margin-bottom: 2rem;
}

:is(.page-365, .365-page) .hero-365__cta-wrap {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  margin-bottom: 1.75rem;
  flex-wrap: nowrap;
}

@media (max-width: 36rem) {
  :is(.page-365, .365-page) .hero-365__cta-wrap {
    flex-wrap: wrap;
  }
  :is(.page-365, .365-page) .hero-365__cta-wrap .btn {
    width: 100%;
  }
}

:is(.page-365, .365-page) .hero-365__trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--muted, #6e6b67);
}

:is(.page-365, .365-page) .hero-365__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Frosted glass signature simulator card */
:is(.page-365, .365-page) .streak-card-frame {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgba(26, 26, 26, 0.04),
    0 24px 50px -20px rgba(26, 26, 26, 0.22);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

:is(.page-365, .365-page) .streak-flame-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  color: var(--accent-coral-ink, #b8402d);
  font-size: 0.75rem;
  font-weight: 700;
}

:is(.page-365, .365-page) .card-category-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-ink, #b8402d);
  margin-bottom: 0.5rem;
}

:is(.page-365, .365-page) .card-question-text {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.35;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1rem;
}

/* ---------- 4 · Card Grids & Equal Heights ------------------- */
:is(.page-365, .365-page) .framework-step-tab {
  background: #ffffff;
  border: 1px solid rgba(26, 46, 34, 0.08);
  border-radius: var(--radius-md, 16px);
  padding: 1.15rem 1rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
:is(.page-365, .365-page) .framework-step-tab:hover {
  border-color: var(--coral, #f06858);
  background: #fff8f6;
  transform: translateY(-2px);
}
:is(.page-365, .365-page) .framework-step-tab.is-active {
  border-color: var(--coral, #f06858) !important;
  background: #ffffff !important;
  color: var(--ink, #1a1a1a) !important;
  box-shadow: 0 4px 16px rgba(240, 104, 88, 0.16) !important;
  border-width: 1.5px !important;
}
:is(.page-365, .365-page) .framework-step-tab.is-active .step-num {
  background: var(--coral, #f06858) !important;
  color: #ffffff !important;
}
:is(.page-365, .365-page) .framework-step-tab.is-active .step-title {
  color: var(--coral-deep, #d9503f) !important;
  font-weight: 800 !important;
}
:is(.page-365, .365-page) .framework-step-tab.is-active .step-desc {
  color: var(--body, #302f2e) !important;
}

/* Monthly Theme Explorer Brand Token Lock */
:is(.page-365, .365-page) .theme-pill-btn {
  background: #ffffff;
  border: 1px solid rgba(26, 46, 34, 0.08);
  border-radius: var(--radius-md, 16px);
  padding: 0.85rem 1.15rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
:is(.page-365, .365-page) .theme-pill-btn:hover {
  border-color: var(--coral, #f06858);
  background: #fff8f6;
  transform: translateX(3px);
}
:is(.page-365, .365-page) .theme-pill-btn.is-active {
  background: #ffffff !important;
  color: var(--ink, #1a1a1a) !important;
  border-color: var(--coral, #f06858) !important;
  border-width: 1.5px !important;
  box-shadow: 0 4px 16px rgba(240, 104, 88, 0.16) !important;
}
:is(.page-365, .365-page) .theme-pill-btn.is-active .month-badge {
  background: var(--coral, #f06858) !important;
  color: #ffffff !important;
}
:is(.page-365, .365-page) .theme-pill-btn.is-active .month-name {
  color: var(--coral-deep, #d9503f) !important;
  font-weight: 800 !important;
}
:is(.page-365, .365-page) .theme-pill-btn.is-active .month-sub {
  color: var(--body, #302f2e) !important;
}
:is(.page-365, .365-page) .showcase-month-tag {
  background: var(--surface-peach, #fcece5) !important;
  color: var(--accent-coral-ink, #b8402d) !important;
  border: 1px solid rgba(240, 104, 88, 0.2) !important;
}
:is(.page-365, .365-page) .showcase-prompt-card {
  background: var(--cream, #fef8ec) !important;
  border: 1px solid rgba(26, 46, 34, 0.08) !important;
  border-radius: var(--radius-md, 16px) !important;
  padding: 1.35rem 1.2rem !important;
  text-align: left !important;
}
:is(.page-365, .365-page) .showcase-prompt-card:hover {
  background: #ffffff !important;
  border-color: var(--coral, #f06858) !important;
  box-shadow: 0 10px 24px rgba(26, 46, 34, 0.08) !important;
}
:is(.page-365, .365-page) .prompt-card-text {
  text-align: left !important;
  text-align-last: left !important;
  text-wrap: pretty !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  letter-spacing: -0.01em !important;
  font-size: 1.05rem !important;
  line-height: 1.45 !important;
}

:is(.page-365, .365-page) .experience-visual-card {
  background: #ffffff;
  border: 1px solid var(--border-card, rgba(26, 46, 34, 0.08));
  border-radius: var(--radius-lg, 20px);
  padding: 1.5rem;
  box-shadow: var(--shadow-subtle, 0 10px 30px -5px rgba(26, 46, 34, 0.08));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:is(.page-365, .365-page) .experience-visual-card picture,
:is(.page-365, .365-page) .experience-visual-card img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius-md, 12px);
  margin-bottom: 1rem;
}
:is(.page-365, .365-page) :is(
  .framework-grid, .stories-grid, .pricing-grid, .ripple-grid, .showcase-prompts-grid
) {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

:is(.page-365, .365-page) .framework-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

:is(.page-365, .365-page) .framework-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.25rem, 2vw, 1.625rem);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

:is(.page-365, .365-page) .framework-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

:is(.page-365, .365-page) .framework-card > :last-child,
:is(.page-365, .365-page) .framework-card__header > :last-child {
  margin-top: auto;
}

:is(.page-365, .365-page) .framework-card__prompt-box {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--cream, #fef8ec);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
}

:is(.page-365, .365-page) .ripple-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

:is(.page-365, .365-page) .ripple-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.25rem, 2vw, 1.625rem);
}

:is(.page-365, .365-page) .ripple-card > :last-child {
  margin-top: auto;
}

:is(.page-365, .365-page) .stories-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
}

:is(.page-365, .365-page) .story-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.25rem, 2vw, 1.625rem);
}

:is(.page-365, .365-page) .story-card > :last-child {
  margin-top: auto;
}

:is(.page-365, .365-page) .pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  max-width: 60rem;
  margin-inline: auto;
}

:is(.page-365, .365-page) .pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}

:is(.page-365, .365-page) .pricing-card--flagship {
  border-color: var(--coral, #f06858);
  box-shadow: 0 4px 12px rgba(240, 104, 88, 0.12), 0 20px 48px -12px rgba(240, 104, 88, 0.22);
}

:is(.page-365, .365-page) .pricing-card > :last-child {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* ---------- 5 · Justified Text & Rivers Fix ------------------ */
/* Switch off justified text on narrow components to eliminate rivers */
:is(.page-365, .365-page) :is(
  .hero-365__preheadline, .hero-365__subtitle, .hero-365__trust-item,
  .checklist-trap-box, .checklist-trap-list li, .breakthrough-box, .problem-photo-overlay,
  .silent-drift-callout, .framework-card__rationale, .prompt-quote, .prompt-label,
  .framework-step-tab, .showcase-objective, .showcase-prompt, .theme-nav-btn,
  .experience-feature-item, .feature-desc, .feature-title,
  .ripple-card, .ripple-desc, .ripple-title,
  .story-card, .story-quote, .story-author-tag, .metric-label, .metric-value,
  .pricing-card, .pricing-summary, .pricing-feature-item, .pricing-guarantee-note,
  .faq-item, .faq-answer-panel p, .guarantee-card, .guarantee-text,
  .closing-card, .closing-subtitle
) :is(p, li, span, div, strong, em),
:is(.page-365, .365-page) :is(
  .checklist-trap-list li, .pricing-features-list li, .experience-feature-list li
) {
  text-align: start;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ---------- 6 · Buttons, Controls & Tap Targets -------------- */
:is(.page-365, .365-page) :is(.btn, .faq-question-btn, .theme-nav-btn, .experience-tab-btn) {
  min-height: 2.75rem;
  cursor: pointer;
}

:is(.page-365, .365-page) .btn--gold {
  background: var(--coral, #f06858);
  color: #ffffff;
  border: 1px solid transparent;
}
:is(.page-365, .365-page) .btn--gold:hover {
  background: var(--coral-deep, #d9503f);
}

/* ============================================================
   Follow-up pass (Finn, iteration 58)
   Fixes found by eye on the live preview that the first pass
   did not catch.
   ============================================================ */

/* The headline was running to five lines at 1440px. It now carries a
   small setup line and a large payoff, the same two-tier treatment
   the family hero uses, which holds the big line to two lines. */
.page-365 .hero-365__title {
  display: grid;
  gap: 0.5rem;
  font-size: inherit;
}
.page-365 .hero-365__kicker {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--muted, #6e6b67);
  max-width: 34ch;
}
.page-365 .hero-365__title .highlight {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink, #1a1a1a);
  max-width: 20ch;
  text-wrap: balance;
}

/* Hero copy sat at roughly 40 characters a line, which is too narrow
   for the site-wide flush rule to work with. */
.page-365 .hero-365__subtitle {
  max-width: 48ch;
  text-align: start;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Photo column and text column were centring against each other, so
   the taller text column left a tall blank above the photograph. */
.page-365 .problem-365__grid { align-items: start; }

/* The caption plate over the couch photo was rendering olive green.
   It uses the approved frosted treatment instead. */
.page-365 .problem-photo-overlay {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: var(--ink, #1a1a1a);
}
.page-365 .problem-photo-overlay p,
.page-365 .problem-photo-overlay strong { color: var(--ink, #1a1a1a); }

/* The hero wash puts an amber radial at 90% across / 10% down, which
   is exactly where the app-demo card sits. Seen through an 88% white
   translucent panel with saturate(1.3) it turned the whole demo a
   muddy gold. The demo is the product shot, so it reads as clean
   white glass: higher opacity, no saturation boost. The amber is
   moved left and down so it still warms the hero without sitting
   behind the card. */
.page-365 .hero-365 {
  background:
    radial-gradient(90% 70% at 62% 4%, rgba(252, 189, 76, 0.13) 0%, rgba(252, 189, 76, 0) 60%),
    radial-gradient(100% 70% at 5% 95%, rgba(240, 104, 88, 0.12) 0%, rgba(240, 104, 88, 0) 60%),
    linear-gradient(180deg, #fffdf8 0%, var(--cream, #fef8ec) 100%);
}
.page-365 .streak-card-frame.glass {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* The separator dots between the trust items were their own inline
   children, so a wrap stranded one at the end of a line. */
.page-365 .hero-365__trust-item + .hero-365__trust-item::before {
  content: "\00b7";
  margin-right: 0.75rem;
  color: var(--line, rgba(26, 26, 26, 0.3));
}
@media (max-width: 46rem) {
  .page-365 .hero-365__trust-item + .hero-365__trust-item::before { content: none; }
}

/* The gold cast on the demo card was NOT the hero wash. 365.css paints
   a full gold-foil gradient behind the card via
   `.streak-card-frame::before { inset:-2px; opacity:.45 }`. Because the
   card face is translucent, that wash came straight through and turned
   the product shot the colour of weak tea.

   The gold-foil cue belongs to the physical keepsake box, so it stays,
   but as a hairline rim rather than a full-face wash, and the card face
   itself is now solid white. */
.page-365 .streak-card-frame,
.page-365 .streak-card-frame.glass {
  background-color: #ffffff;
  background-image: none;
  border: 1px solid rgba(212, 175, 55, 0.45);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.page-365 .streak-card-frame::before {
  inset: -1px;
  opacity: 0.28;
}

/* The trust row wraps to two lines in this column even at 1440px, and
   a CSS separator cannot know it is first on a line, so it stranded a
   dot at the start of line two. The row uses spacing alone. */
.page-365 .hero-365__trust-item + .hero-365__trust-item::before { content: none; }
.page-365 .hero-365__trust { gap: 0.4rem 1.25rem; }


/* ==============================================================
   ITERATION 79 · JUSTYNA COPY FLOW & VISUAL ALIGNMENT
   ============================================================== */

:root {
  --po-forest: #1a2e22;
  --po-coral: #f06858;
  --po-coral-deep: #d9503f;
  --po-ochre: #ffbd48;
  --po-sage: #c0cb6d;
  --po-pink: #faaab1;
  --po-teal: #96ccca;
  --po-blue: #94b7d5;
  --po-cream: #faf6ee;
  --po-white: #ffffff;
  --po-body: #302f2e;
  --po-muted: #686963;
  --po-line: rgba(26, 46, 34, 0.12);
}

body.page-365 {
  color: var(--po-body);
  background: var(--po-cream);
  font-family: "Figtree", "Plus Jakarta Sans", system-ui, sans-serif;
}

body.page-365 :is(h1, h2, h3, h4, button, .btn) {
  font-family: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
}

body.page-365 :is(p, li, blockquote, figcaption) {
  text-align: start;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

body.page-365 .btn,
body.page-365 button {
  font-size: max(19px, 1rem);
}

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

.container--narrow { width: min(820px, calc(100% - 2.5rem)); }
.section { padding: clamp(5rem, 8vw, 8rem) 0; }
.section--white { background: var(--po-white); }
.section--muted { background: var(--po-cream); }

.section-header { max-width: 820px; margin-bottom: 3.5rem; }
.section-header--center { text-align: center; margin-inline: auto; }
.section-header--center :is(p, h2) { text-align: center; }
.section-title { color: var(--po-forest); font-size: clamp(2.35rem, 4.8vw, 4.5rem); line-height: 1.03; letter-spacing: -0.045em; margin: 0.65rem 0 1rem; text-wrap: balance; }
.section-lead { color: var(--po-muted); font-size: clamp(1.06rem, 1.5vw, 1.25rem); line-height: 1.6; margin: 0; }
.section-title--light { color: #fff; }
.section-lead--light { color: rgba(255,255,255,.78); }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow--coral { color: var(--po-coral-deep); }
.eyebrow--forest { color: var(--po-forest); }
.eyebrow--light { color: var(--po-ochre); }

/* Roommate problem */
.problem-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.problem-copy { display: grid; gap: 1.6rem; }
.logistics-list { display: grid; gap: .7rem; }
.logistics-list p { margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--po-line); border-radius: 14px; background: var(--po-cream); color: var(--po-muted); font-weight: 650; }
.problem-insight h3 { color: var(--po-forest); font-size: 1.55rem; margin-bottom: .7rem; }
.problem-insight p { line-height: 1.7; }
.problem-photo-card { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 24px 55px rgba(26,46,34,.14); }
.problem-photo-card img { width: 100%; height: 100%; object-fit: cover; }
.problem-photo-overlay { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-radius: 16px; color: var(--po-forest); }

/* Conversational contrast */
.contrast-section { background: #f5e8d4; }
.contrast-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.contrast-dialogues { display: grid; gap: .8rem; margin-top: 2rem; }
.dialogue-card { padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--po-line); }
.dialogue-card p { margin: .35rem 0 .2rem; }
.dialogue-card--muted { background: rgba(255,255,255,.55); color: #73746f; }
.dialogue-card--bright { background: var(--po-white); border-color: var(--po-coral); color: var(--po-forest); box-shadow: 0 12px 30px rgba(240,104,88,.12); }
.dialogue-label { color: var(--po-coral-deep); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.contrast-media { margin: 0; position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 55px rgba(26,46,34,.15); }
.contrast-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.contrast-media__caption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; border-radius: 14px; padding: .85rem 1rem; background: rgba(255,255,255,.9); color: var(--po-forest); font-weight: 700; backdrop-filter: blur(12px); }

/* Why nothing has worked */
.pressure-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.pressure-card { min-height: 230px; padding: 1.45rem; border-radius: 20px; border: 1px solid var(--po-line); background: var(--po-white); }
.pressure-card h3 { color: var(--po-forest); font-size: 1.25rem; margin: 1rem 0 .55rem; }
.pressure-card p { margin: 0; color: var(--po-muted); line-height: 1.55; }
.pressure-card__icon { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: #f8dad6; color: var(--po-coral-deep); font-weight: 900; font-size: 1.2rem; }
.pressure-card--solution { background: var(--po-forest); border-color: var(--po-forest); }
.pressure-card--solution :is(h3,p) { color: #fff; }
.pressure-card--solution .pressure-card__icon { background: var(--po-ochre); color: var(--po-forest); }
.app-asks-panel { margin-top: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: center; background: var(--po-white); border: 1px solid var(--po-line); border-radius: 24px; }
.app-asks-panel__copy h3 { color: var(--po-forest); font-size: clamp(1.8rem,3vw,2.8rem); margin: 1rem 0; }
.app-asks-panel img { width: 100%; border-radius: 20px; }
.check-list { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .75rem; }
.check-list li { position: relative; padding-left: 1.65rem; color: var(--po-body); line-height: 1.5; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--po-coral-deep); font-weight: 900; }

/* Cost cards */
.cost-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; align-items: stretch; }
.cost-card { min-height: 300px; padding: 1.35rem; border: 1px solid var(--po-line); border-radius: 22px; background: #fff; display: flex; flex-direction: column; }
.cost-card h3 { color: var(--po-forest); font-size: 1.2rem; line-height: 1.25; margin: 1.4rem 0 .65rem; }
.cost-card p { color: var(--po-muted); line-height: 1.58; margin: 0; }
.cost-card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; }
.cost-card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cost-card__icon--blue { background: #e4eff7; color: #376d9e; }
.cost-card__icon--coral { background: #fce5e1; color: var(--po-coral-deep); }
.cost-card__icon--sage { background: #edf2ce; color: #5f7128; }
.cost-card__icon--pink { background: #fbe6e9; color: #a7475c; }
.cost-card__icon--amber { background: #fff0cb; color: #a86e00; }

/* Couple stories */
.stories-intro-grid { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 3rem; }
.stories-intro-media { margin: 0; border-radius: 24px; overflow: hidden; }
.stories-intro-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; display: block; }
.couple-stories-reel { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; }
.couple-story-card { min-height: 330px; padding: 1.6rem; border: 1px solid var(--po-line); border-radius: 22px; background: #fff; }
.couple-story-card--feature { grid-row: span 3; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.6rem, 3vw, 2.5rem); background: var(--po-forest); color: #fff; }
@media (max-width: 760px) {
  .couple-stories-reel { grid-template-columns: 1fr; }
  .couple-story-card--feature { grid-row: auto; }
}
.couple-story-card h3 { font-size: 1.45rem; line-height: 1.25; color: var(--po-forest); }
.couple-story-card--feature h3 { color: #fff; }
.couple-story-card p, .couple-story-card blockquote { line-height: 1.62; }
.couple-story-card blockquote { margin: 1rem 0; color: var(--po-ochre); font-size: 1.1rem; font-weight: 700; }
.couple-story-card__meta { color: var(--po-coral-deep); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.couple-story-card--feature .couple-story-card__meta { color: var(--po-ochre); }
.couple-story-card:not(.couple-story-card--feature) h3 { font-size: 1.2rem; margin-block: .4rem; }
.couple-story-card:not(.couple-story-card--feature) p { margin: 0; }
@media (min-width: 761px) {
  .couple-story-card--feature h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-top: .6rem; }
  .couple-story-card--feature blockquote { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 1.4rem 0; }
  .couple-story-card--feature p { font-size: 1.05rem; }
}
.week-progression { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1rem; align-items: center; }
.week-progression article { min-height: 165px; padding: 1.25rem; border-radius: 18px; background: #fff; border: 1px solid var(--po-line); }
.week-progression article span { color: var(--po-coral-deep); font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.week-progression article h3 { color: var(--po-forest); margin: .5rem 0; }
.week-progression article p { margin: 0; color: var(--po-muted); }
.week-progression__arrow { color: var(--po-coral); font-size: 1.5rem; }

/* Framework */
.framework-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.framework-step-tab { min-height: 185px; display: flex; flex-direction: column; align-items: flex-start; text-align: start; border: 1px solid var(--po-line); border-radius: 20px; background: #fff; padding: 1.25rem; color: var(--po-forest); cursor: pointer; }
.framework-step-tab.is-active { border-color: var(--po-coral) !important; box-shadow: 0 14px 34px rgba(240,104,88,.14) !important; }
.framework-step-tab .step-num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: #f9e5e1; color: var(--po-coral-deep); font-size: .8rem; font-weight: 900; }
.framework-step-tab.is-active .step-num { background: var(--po-coral) !important; color: #fff !important; }
.framework-step-tab .step-title { margin-top: 1.2rem; font-weight: 800; }
.framework-step-tab .step-desc { margin-top: .35rem; color: var(--po-muted); font-family: "Figtree", sans-serif; font-size: .88rem; }
.framework-showcase { margin-top: 1.5rem; padding: clamp(1.6rem,4vw,3rem); display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; border-radius: 26px; background: var(--po-forest); }
.framework-showcase__copy h3 { color: #fff; font-size: clamp(2rem,3.5vw,3.4rem); margin: 1rem 0; }
.framework-showcase__copy p { color: rgba(255,255,255,.76); line-height: 1.65; }
.framework-benefits { display: flex; flex-wrap: wrap; gap: .6rem; }
.framework-benefits span { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .5rem .75rem; color: #fff; font-size: .8rem; }
.framework-prompt-stack { display: grid; gap: .8rem; }
.framework-prompt-card { padding: 1.25rem 1.4rem; border-radius: 18px; background: #fff; }
.framework-prompt-card span { font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.framework-prompt-card p { margin: .55rem 0 0; color: var(--po-forest); font-family: "Gabarito", sans-serif; font-size: 1.1rem; font-weight: 750; }
.framework-prompt-card--coral { border-left: 6px solid var(--po-coral); }
.framework-prompt-card--sage { border-left: 6px solid var(--po-sage); }
.framework-prompt-card--blue { border-left: 6px solid var(--po-blue); }

/* Daily ritual visuals */
.ritual-visual-grid { display: grid; grid-template-columns: 1.55fr .65fr; gap: 1.2rem; align-items: stretch; }
.ritual-photo, .ritual-phone { margin: 0; border-radius: 26px; overflow: hidden; position: relative; background: var(--po-forest); }
.ritual-photo img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; display: block; }
.ritual-photo figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem; border-radius: 14px; background: rgba(255,255,255,.9); color: var(--po-forest); font-weight: 750; backdrop-filter: blur(12px); }
.ritual-phone { display: grid; place-items: center; padding: 1.2rem; }
.ritual-phone img { width: 100%; height: 100%; max-height: 540px; object-fit: contain; }
.notification-caption { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.3rem; display: flex; flex-direction: column; gap: .2rem; padding: .9rem; border-radius: 14px; background: rgba(255,255,255,.92); color: var(--po-forest); }
.notification-caption span { color: var(--po-coral-deep); font-size: .75rem; font-weight: 900; }
.experience-tabs { margin: 2.5rem auto 1rem; width: fit-content; display: flex; gap: .4rem; padding: .4rem; background: #eee8dd; border-radius: 999px; }
.experience-tab { border: 0; border-radius: 999px; padding: .7rem 1rem; background: transparent; color: var(--po-forest); cursor: pointer; }
.experience-tab.is-active { background: #fff; box-shadow: 0 4px 15px rgba(26,46,34,.1); }
.experience-panel { padding: clamp(1.5rem,4vw,3rem); display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: center; border: 1px solid var(--po-line); border-radius: 24px; background: var(--po-cream); }
.experience-panel[hidden] { display: none; }
.experience-panel__copy h3 { color: var(--po-forest); font-size: clamp(2rem,3vw,3rem); margin: 1rem 0; }
.experience-panel img { width: 100%; max-height: 430px; object-fit: contain; border-radius: 18px; }

/* Science */
.science-section { background: var(--po-forest); }
.science-grid { display: block; }
.science-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.science-pillars article { min-height: 230px; padding: 1.35rem; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: rgba(255,255,255,.06); }
.science-pillars article span { color: var(--po-ochre); font-weight: 900; }
.science-pillars article h3 { color: #fff; font-size: 1.3rem; margin: 1rem 0 .6rem; }
.science-pillars article p { color: rgba(255,255,255,.7); line-height: 1.6; }

@media (max-width: 68rem) {
  .science-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Testimonials */
.testimonial-reel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
.testimonial-card { flex: 0 0 min(360px,86vw); min-height: 330px; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 22px; border: 1px solid var(--po-line); background: #fff; scroll-snap-align: start; }
.testimonial-stars { color: #e89a18; letter-spacing: .12em; }
.testimonial-card blockquote { margin: 1.3rem 0; color: var(--po-forest); font-family: "Gabarito", sans-serif; font-size: 1.2rem; line-height: 1.55; font-weight: 650; }
.testimonial-card footer { margin-top: auto; display: flex; flex-direction: column; gap: .25rem; border-top: 1px solid var(--po-line); padding-top: 1rem; }
.testimonial-card footer strong { color: var(--po-forest); }
.testimonial-card footer span { color: var(--po-muted); font-size: .82rem; }

/* Ripple */
.ripple-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.ripple-card { min-height: 260px; padding: 1.45rem; border: 1px solid var(--po-line); border-radius: 22px; background: #fff; }
.ripple-card:nth-child(2n) { background: #f7eddc; }
.ripple-card__num { color: var(--po-coral-deep); font-size: .8rem; font-weight: 900; letter-spacing: .08em; }
.ripple-card h3 { color: var(--po-forest); font-size: 1.35rem; margin: 1.3rem 0 .65rem; }
.ripple-card p { color: var(--po-muted); line-height: 1.6; }

/* Pricing and guarantee */
.pricing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; max-width: 980px; margin-inline: auto; align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--po-line); border-radius: 24px; background: #fff; }
.pricing-card--featured { border: 2px solid var(--po-coral); box-shadow: 0 20px 48px rgba(240,104,88,.15); }
.pricing-card__image { height: 260px; border-radius: 18px; overflow: hidden; background: #f5eee3; margin-bottom: 1.2rem; }
.pricing-card__image img { width: 100%; height: 100%; object-fit: cover; }
.pricing-card__badge { color: var(--po-coral-deep); font-size: .77rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.pricing-card h3 { color: var(--po-forest); font-size: 1.7rem; margin: .6rem 0; }
.pricing-card__price { display: flex; align-items: baseline; gap: .55rem; }
.pricing-card__price span { color: var(--po-forest); font-family: "Gabarito", sans-serif; font-size: 3rem; font-weight: 850; }
.pricing-card__price small { color: var(--po-muted); }
.pricing-card .btn { margin-top: auto; }
.pricing-card__ribbon { position: absolute; top: 1rem; right: 1rem; z-index: 2; padding: .45rem .7rem; border-radius: 999px; background: var(--po-coral); color: #fff; font-size: .72rem; font-weight: 900; }
.guarantee-panel { max-width: 780px; margin: 2rem auto 0; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; padding: 1.4rem; border-radius: 20px; background: var(--po-forest); color: #fff; }
.guarantee-panel__seal { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 999px; background: var(--po-ochre); color: var(--po-forest); font-family: "Gabarito", sans-serif; font-size: 1.5rem; font-weight: 900; }
.guarantee-panel h3 { color: #fff; margin: 0 0 .35rem; }
.guarantee-panel p { margin: 0; color: rgba(255,255,255,.75); }

/* FAQ and closing */
.faq-list { display: grid; gap: .7rem; }
.faq-item { border: 1px solid var(--po-line); border-radius: 16px; background: #fff; overflow: hidden; }
.faq-question-btn { width: 100%; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border: 0; background: #fff; color: var(--po-forest); text-align: start; cursor: pointer; }
.faq-answer { padding: 0 1.25rem 1.15rem; }
.faq-answer p { margin: 0; color: var(--po-muted); line-height: 1.65; }
.closing-cta { padding: clamp(5rem,8vw,8rem) 0; background: var(--po-forest); }
.closing-cta__grid { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.closing-cta__copy h2 { color: #fff; font-size: clamp(2.7rem,5vw,5rem); line-height: 1.02; letter-spacing: -.05em; margin: .8rem 0 1rem; }
.closing-cta__copy p { color: rgba(255,255,255,.76); font-size: 1.15rem; line-height: 1.65; }
.closing-cta__micro { display: block; margin-top: .8rem; color: rgba(255,255,255,.6); font-size: .82rem; }
.closing-cta__media { margin: 0; position: relative; border-radius: 26px; overflow: hidden; }
.closing-cta__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.closing-cta__media figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem; border-radius: 14px; background: rgba(255,255,255,.9); color: var(--po-forest); font-weight: 750; }

/* Tweaks */
.tweaks-trigger { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; border: 0; border-radius: 999px; padding: .7rem 1rem; background: var(--po-forest); color: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.2); }
.tweaks-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end; padding: 1rem; background: rgba(10,20,14,.35); }
.tweaks-modal[hidden] { display: none; }
.tweaks-modal__content { width: min(360px,100%); padding: 1.2rem; border-radius: 20px; background: #fff; box-shadow: 0 25px 70px rgba(0,0,0,.25); }
.tweaks-modal__header { display: flex; justify-content: space-between; align-items: center; }
.tweaks-modal__header h3 { color: var(--po-forest); margin: 0; }
.tweaks-modal__header button { border: 0; background: transparent; }
.tweaks-modal label { display: grid; gap: .4rem; margin-top: 1rem; color: var(--po-forest); font-weight: 700; }
.tweaks-modal select { min-height: 44px; border: 1px solid var(--po-line); border-radius: 10px; padding: .5rem; background: #fff; }

@media (max-width: 980px) {
  .problem-layout, .contrast-grid, .app-asks-panel, .stories-intro-grid, .framework-showcase, .experience-panel, .science-grid, .closing-cta__grid { grid-template-columns: 1fr; }
  .pressure-grid, .framework-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cost-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ripple-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ritual-visual-grid { grid-template-columns: 1fr .75fr; }
}

@media (max-width: 680px) {
  .container, .container--narrow { width: min(100% - 1.25rem, 1180px); }
  .section { padding: 4.25rem 0; }
  .section-title { font-size: clamp(2.15rem,11vw,3.4rem); }
  .pressure-grid, .framework-tabs, .cost-grid, .science-pillars, .ripple-grid, .pricing-grid, .ritual-visual-grid { grid-template-columns: 1fr; }
  .week-progression { grid-template-columns: 1fr; }
  .week-progression__arrow { transform: rotate(90deg); justify-self: center; }
  .ritual-photo img { min-height: 390px; }
  .ritual-phone img { max-height: 520px; }
  .experience-tabs { width: 100%; border-radius: 16px; }
  .experience-tab { flex: 1; border-radius: 12px; }
  .guarantee-panel { grid-template-columns: 1fr; text-align: center; }
  .guarantee-panel__seal { margin-inline: auto; }
  .closing-cta__copy h2 { font-size: clamp(2.5rem,12vw,4rem); }
}

.results-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.results-metrics article {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.15rem;
  border: 1px solid var(--po-line);
  border-radius: 18px;
  background: var(--po-white);
}
.results-metrics strong {
  color: var(--po-coral-deep);
  font-family: "Gabarito", sans-serif;
  font-size: 2rem;
}
.results-metrics span {
  color: var(--po-muted);
  font-size: .86rem;
}
@media (max-width: 680px) {
  .results-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.tweak-density-compact .section { padding-block: clamp(3rem, 5vw, 5rem); }
body.tweak-density-compact :is(.cost-card, .ripple-card, .testimonial-card, .couple-story-card) { min-height: auto; }
body.tweak-motion-reduced *,
body.tweak-motion-reduced *::before,
body.tweak-motion-reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }


/* Iteration 82 visual-critic corrections */
:is(.page-365, .365-page) .section-title--light {
  color: #ffffff !important;
}

:is(.page-365, .365-page) .hero-365__title {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

:is(.page-365, .365-page) .eyebrow--light {
  color: var(--po-ochre, #ffbd48) !important;
}

:is(.page-365, .365-page) .framework-showcase .pill--coral {
  background: rgba(255, 255, 255, .12) !important;
  color: var(--po-ochre, #ffbd48) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
}

.yellow-marquee-strip {
  background: var(--po-ochre, #ffbd48) !important;
  color: var(--po-forest, #1a2e22) !important;
  padding: .85rem 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Gabarito", sans-serif;
  font-weight: 800;
}

.yellow-marquee-track {
  display: flex;
  width: max-content;
  gap: 2rem;
  animation: po-marquee-scroll 32s linear infinite;
}

.yellow-marquee-item {
  display: block;
  flex: none;
}

@keyframes po-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

:is(.page-365, .365-page) .streak-island {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: 24px !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  box-shadow: 0 20px 50px -10px rgba(26, 46, 34, .14) !important;
}

:is(.page-365, .365-page) .trust-pill-item svg {
  stroke: var(--ochre-warm, #d9822b) !important;
  fill: none !important;
}

.app-asks-panel img {
  object-fit: contain;
  max-height: 520px;
  background: var(--po-cream);
}

#hero-audio-time {
  margin-left: .5rem;
}

@media (max-width: 48rem) {
  :is(.page-365, .365-page) .honest-pause__media {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  :is(.page-365, .365-page) .honest-pause__img {
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    box-shadow: 0 16px 38px rgba(26, 46, 34, .12);
  }

  :is(.page-365, .365-page) .honest-pause__cards-stack {
    position: static;
    margin-top: 1.25rem;
    max-width: 100%;
  }

  :is(.page-365, .365-page) .nav__inner .nav__cta {
    display: none !important;
  }
}

/* ============================================================
   VISUAL CRITIC AUDIT REFINEMENTS (Iteration 83)
   ============================================================ */

/* 1 · Science & Closing White Headings */
:is(.page-365, .365-page) .section-title--light,
:is(.page-365, .365-page) #science .section-title,
:is(.page-365, .365-page) #closing .section-title {
  color: #ffffff !important;
}

:is(.page-365, .365-page) #science .section-subtitle,
:is(.page-365, .365-page) #closing .closing-sub {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* 2 · Hero 365 Responsive Title Scale */
:is(.page-365, .365-page) .hero-365__title {
  font-family: var(--font-display, 'Gabarito', sans-serif) !important;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  color: var(--ink, #1a1a1a) !important;
  margin-bottom: 1.25rem !important;
  text-wrap: balance !important;
}

/* 3 · Honest Pause Mobile Unstack */
@media (max-width: 48rem) {
  :is(.page-365, .365-page) .honest-pause__media {
    aspect-ratio: auto !important;
    overflow: visible !important;
  }
  :is(.page-365, .365-page) .honest-pause__cards-stack {
    position: static !important;
    margin-top: 1.25rem !important;
    max-width: 100% !important;
  }
}

/* 4 · Mobile Header Clean Alignment */
@media (max-width: 48rem) {
  .nav__inner .nav__cta {
    display: none !important;
  }
}

/* 5 · Eyebrows & Contrast on Forest Green Panels */
:is(.page-365, .365-page) .eyebrow--light,
:is(.page-365, .365-page) #science .section-eyebrow,
:is(.page-365, .365-page) #closing .section-eyebrow {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffbd48 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.framework-showcase .pill--coral {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffbd48 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* 6 · Yellow Marquee Accent Strip Styling */
.yellow-marquee-strip {
  background: #ffbd48 !important;
  color: #1a2e22 !important;
  padding: 0.85rem 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
  font-family: var(--font-display, 'Gabarito', sans-serif) !important;
  letter-spacing: 0.04em !important;
  font-size: 0.95rem !important;
}
.yellow-marquee-track {
  display: inline-flex !important;
  gap: 1.5rem !important;
  animation: yellow-marquee-anim 35s linear infinite !important;
  will-change: transform !important;
}
@keyframes yellow-marquee-anim {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 7 · Hero Simulator Island Frosted Container */
.streak-island {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 24px !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  box-shadow: 0 20px 50px -10px rgba(26, 46, 34, 0.14) !important;
}
.trust-pill-item svg {
  stroke: #d9822b !important;
  fill: none !important;
}

/* 8 · Audio Diary Meta Separation */
#hero-audio-meta {
  margin-right: 0.65rem;
  display: inline-block;
}
#hero-audio-time {
  color: var(--terracotta, #c2573f);
  font-weight: 700;
  display: inline-block;
}

/* 9 · Decision Card Position */
:is(.page-365, .365-page) .hero-decision__card {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  max-width: 290px;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 20px;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18) !important;
  z-index: 2;
}

/* ============================================================
   8 · Viewport + anti-slop pass (2026-08-31)
   ------------------------------------------------------------
   Rules that override the layers above. Every block fits one desktop
   viewport (900px at 1440). The dark forest panels (#14221a is not a
   brand colour) become white or cream; the numbered labels, the fake
   app simulator, the invented stats and the "WEEK 01/02/03" strip are
   gone from the markup. The FAQ was rendering every answer open.
   ============================================================ */

/* Yellow strip: the client mockup's copy, ink on amber (10.4:1), the
   brand mark as separator instead of a star glyph. */
.yellow-marquee-strip { color: var(--ink, #1a1a1a) !important; text-transform: none; letter-spacing: 0 !important; font-size: 1.05rem !important; font-weight: 700 !important; }
.yellow-marquee-item { display: inline-flex !important; align-items: center; gap: 0.75rem; }
.ym-mark { display: inline-block; width: auto; height: 1em; vertical-align: -0.12em; margin-inline: 0.15rem; }

/* Second hero: the client render carries the right column. */
.hero-365__media { margin: 0; align-self: center; }
.hero-365__media img {
  display: block; width: 100%; height: auto;
  border-radius: 26px;
  box-shadow: 0 2px 6px rgba(26,26,26,.05), 0 34px 70px -28px rgba(26,26,26,.34);
}
:is(.page-365, .365-page) .hero-365 { padding-block: clamp(2.5rem, 4vw, 3.5rem) !important; }
:is(.page-365, .365-page) .hero-365__grid { align-items: center; }
:is(.page-365, .365-page) .hero-365__cta-cluster { margin-bottom: 0; }

/* Comparison stage on this page carries four points, not five. */

/* Couple stories: the lead card is cream with ink, not a dark slab. */
.couple-story-card--feature { background: var(--cream, #fef8ec) !important; color: var(--ink, #1a1a1a) !important; border-color: var(--border-card) !important; }
.couple-story-card--feature blockquote, .couple-story-card--feature p, .couple-story-card--feature h3 { color: inherit !important; }
.couple-story-card--feature .couple-story-card__meta { color: var(--coral-deep, #d9503f) !important; }
.couple-story-card { min-height: 0 !important; }
.couple-stories-reel { margin-top: 2rem !important; }

/* Framework: tabs without numbers sit lower; the showcase is a white
   card on cream instead of a dark panel. */
.framework-step-tab { min-height: 0 !important; padding: 1.1rem 1.15rem !important; }
.framework-step-tab .step-title { margin-top: 0 !important; }
.framework-showcase { background: #ffffff !important; border: 1px solid var(--border-card); padding: clamp(1.4rem, 3vw, 2.25rem) !important; gap: 2rem !important; }
.framework-showcase__copy h3, .framework-showcase__copy p { color: var(--ink, #1a1a1a) !important; }
.framework-showcase__copy p { color: var(--body, #302f2e) !important; }
.framework-showcase__copy h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important; margin: 0 0 0.75rem !important; }
.framework-benefits span { background: var(--sage-tint) !important; color: var(--sage-dark) !important; border: 0 !important; }
.framework-prompt-card { background: var(--cream, #fef8ec) !important; color: var(--ink, #1a1a1a) !important; }
.framework-prompt-card span { color: var(--muted, #6e6b67) !important; }
.framework-prompt-card p { color: var(--ink, #1a1a1a) !important; }
.framework-prompt-card--coral { border-left-color: var(--coral, #f06858) !important; }
.framework-prompt-card--sage { border-left-color: var(--brand-green, #c0cb6d) !important; }
.framework-prompt-card--blue { border-left-color: var(--brand-blue, #94b7d5) !important; }

/* Themes explorer: same content, tighter rows so the block fits a screen. */
.themes-explorer { align-items: start !important; }
.theme-pill-btn { padding: 0.55rem 0.8rem !important; }
.theme-showcase-panel { min-height: 0 !important; padding: clamp(1.25rem, 2.5vw, 1.75rem) !important; }
.showcase-prompts-grid { gap: 0.75rem !important; }

/* Daily habit: header + one photo row. The format tabs are gone; the
   two formats live in pricing where the choice is actually made. */
.ritual-visual-grid { margin-top: 0 !important; }
.ritual-photo, .ritual-phone { background: var(--cream, #fef8ec) !important; }
.ritual-photo img { max-height: 520px; object-fit: cover; }
.ritual-phone img { max-height: 520px; object-fit: cover; object-position: top; }

/* Science: white band, ink text, no numbers. */
.science-section { background: #ffffff !important; }
.science-section .section-title--light, .science-section .section-lead--light { color: var(--ink, #1a1a1a) !important; }
.science-section .section-lead--light { color: var(--body, #302f2e) !important; }
.science-pillars article { background: var(--cream, #fef8ec) !important; color: var(--ink, #1a1a1a) !important; border: 1px solid var(--border-card) !important; }
.science-pillars article h3, .science-pillars article p { color: inherit !important; }
.science-pillars article p { color: var(--body, #302f2e) !important; }

/* Ripple: three columns of light cards, no numbers. */
.ripple-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; }
.ripple-card { padding: 1.25rem 1.35rem !important; min-height: 0 !important; }
.ripple-card h3 { font-size: 1.1rem !important; margin: 0 0 0.5rem !important; }
@media (max-width: 60rem) { .ripple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 36rem) { .ripple-grid { grid-template-columns: 1fr !important; } }

/* Pricing: no card images, tighter internals, light guarantee. */
.pricing-card { padding: clamp(1.25rem, 2.2vw, 1.75rem) !important; }
.pricing-card h3 { font-size: 1.45rem !important; margin: 0.35rem 0 !important; }
.pricing-card__price span { font-size: 2.6rem !important; }
.pricing-card .check-list { margin: 0.75rem 0 1.25rem !important; gap: 0.5rem !important; }
.pricing-card__badge { text-transform: none !important; letter-spacing: 0 !important; }
.pricing-card__ribbon { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.8rem !important; }
.guarantee-panel { background: #ffffff !important; color: var(--body, #302f2e) !important; border: 1px solid var(--border-card); margin-top: 1.5rem !important; padding: 1.1rem 1.4rem !important; }
.guarantee-panel h3, .guarantee-panel p { color: inherit !important; }
.guarantee-panel h3 { color: var(--ink, #1a1a1a) !important; font-size: 1.05rem !important; margin: 0 0 0.25rem !important; }
.guarantee-panel__seal { background: var(--coral, #f06858) !important; color: #ffffff !important; }

/* FAQ: answers closed until asked. One open at a time is the JS. */
.faq-item:not(.is-open) .faq-answer { display: none; }
.faq-list { gap: 0.6rem !important; }
.faq-question-btn { padding: 1rem 1.15rem !important; }

/* Closing: an amber card on cream, like the homepage CTA panel. Not a
   dark forest slab. */
.closing-cta { background: var(--cream, #fef8ec) !important; padding: clamp(3rem, 5vw, 4.5rem) 0 !important; }
.closing-cta__grid { background: var(--amber, #fcbd4c); border-radius: 26px; padding: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.closing-cta__copy h2, .closing-cta__copy p { color: var(--ink, #1a1a1a) !important; }
.closing-cta__copy h2 { font-size: clamp(1.75rem, 3vw, 2.6rem) !important; }
.closing-cta__micro { color: var(--ink, #1a1a1a) !important; opacity: 0.75; }
.closing-cta .btn--ochre { background: var(--coral, #f06858) !important; color: #ffffff !important; }
.closing-cta .btn--ochre:hover { background: var(--coral-deep, #d9503f) !important; }
.closing-cta__media img { aspect-ratio: 4 / 3 !important; max-height: 460px; }
.closing-cta__media figcaption { color: var(--ink, #1a1a1a) !important; }

/* Remaining over-budget blocks, measured at 1440x900 after the pass above. */
/* Roommate phase: 923px. The height budget was spent on a tighter list and a
   4:3 crop of the photo. iteration-126 replaced that structure entirely (the
   card, the crop and the `.problem-copy` column are gone, and the list moved
   onto the picture), so only the heading rule survives; the rest matched
   nothing and its `!important` gap fought the new overlay rail. */
.problem-insight h3 { font-size: 1.35rem !important; margin-bottom: 0.5rem !important; }
/* Framework: 907px. */
.framework-tabs { gap: 0.75rem !important; }
.framework-showcase { margin-top: 1rem !important; padding: clamp(1.25rem, 2.5vw, 1.75rem) !important; }
.framework-prompt-stack { gap: 0.6rem !important; }
.framework-prompt-card { padding: 0.9rem 1.1rem !important; }
/* Themes: 1046px. The month list scrolls inside the height of the showcase. */
.themes-sidebar { max-height: 30rem !important; overflow-y: auto !important; }
.themes-explorer { gap: 1.25rem !important; }
/* Daily habit: 934px. */
.ritual-photo img, .ritual-phone img { max-height: 440px !important; }
/* Pricing: 966px. */
.pricing-grid { margin-top: 0 !important; gap: 1.25rem !important; }
.pricing-card { gap: 0 !important; }
.pricing-card .check-list li { padding: 0 !important; font-size: 0.95rem !important; }
/* FAQ: 990px with eight closed items. Two columns at desktop. */
@media (min-width: 60rem) {
  .faq-list { grid-template-columns: 1fr 1fr !important; align-items: start; }
  :is(.page-365, .365-page) #faq .container--narrow { max-width: var(--container-max-w, 80rem) !important; }
}
/* Section headers on this page carried up to 3rem of bottom margin; 2rem
   keeps the rhythm and brings the last three blocks under one screen. */
:is(.page-365, .365-page) .section-header--center { margin-bottom: clamp(1.25rem, 2.5vw, 2rem) !important; }
.ritual-photo img, .ritual-phone img { max-height: 400px !important; }
.pricing-card__price span { font-size: 2.4rem !important; }
.pricing-card .check-list { gap: 0.4rem !important; margin-bottom: 1rem !important; }
.guarantee-panel { margin-top: 1rem !important; }
.themes-sidebar { max-height: 28rem !important; }
:is(.page-365, .365-page) #pricing.section { padding-block: clamp(2.5rem, 4vw, 3.5rem) !important; }

/* ---------- 9 · Her decks, second pass (2026-08-31) ---------------------
   Centred headlines everywhere (her 365 comment: "use same design as
   home page"), the product stream in place of five static cost cards,
   her single $89 digital offer, the mom-and-child render she asked
   for beside the "what's for dinner" loop. */
:is(.page-365, .365-page) :is(.hero-decision__content, .honest-pause__content, .hero-365__content) { text-align: center; align-items: center; justify-items: center; }
:is(.page-365, .365-page) :is(.hero-decision__title, .honest-pause__title, .hero-365__title, .hero-decision__sub, .honest-pause__lead, .honest-pause__body, .hero-365__preheadline, .hero-365__sub) { text-align: center !important; margin-inline: auto !important; }
:is(.page-365, .365-page) :is(.hero-decision__content .store-badges, .hero-365__cta-cluster) { justify-content: center; }
.pstream--costs { margin-top: 1.5rem; --pstream-bg: #ffffff; }
.cost-close { max-width: 52rem; margin: 1.5rem auto 0; text-align: center; text-align-last: center; font-size: 1.05rem; line-height: 1.55; color: var(--body, #302f2e); }
.cost-close strong { color: var(--coral-deep, #d9503f); font-family: var(--font-display); }
.pattern-line { max-width: 60rem; margin: 1.5rem auto 0; text-align: center; text-align-last: center; font-size: 1.05rem; line-height: 1.6; color: var(--body, #302f2e); }
.pattern-line strong { color: var(--ink, #1a1a1a); font-family: var(--font-display); }
.pricing-single { max-width: 52rem; margin-inline: auto; }
.pricing-card--solo { display: grid !important; gap: .75rem !important; text-align: start; }
.pricing-card--solo h3 { font-size: 1.5rem !important; margin: 0 !important; }
.whatyouget { list-style: none; margin: .5rem 0 .75rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; }
.whatyouget li { text-align: start; -webkit-hyphens: manual; hyphens: manual; }
.whatyouget strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink, #1a1a1a); line-height: 1.25; margin-bottom: .1rem; }
.whatyouget span { font-size: .9rem; line-height: 1.45; color: var(--body, #302f2e); }
@media (max-width: 40rem) { .whatyouget { grid-template-columns: 1fr; } }
.contrast-media { background: none !important; box-shadow: none !important; border: 0 !important; }
.contrast-media img { object-fit: contain !important; }
.closing-cta__media { background: transparent !important; }
:is(.page-365, .365-page) .reel { padding-bottom: .5rem; }
:is(.page-365, .365-page) .voice { width: min(24rem, 82vw); flex: none; margin: 0; scroll-snap-align: start; }
/* Measured after her single offer: 1,072px. Three columns of items, tighter card. */
.whatyouget { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1.25rem; margin: .4rem 0 .5rem; }
.whatyouget span { font-size: .85rem; line-height: 1.4; }
.pricing-card--solo { padding: clamp(1.1rem, 2vw, 1.5rem) !important; gap: .5rem !important; }
.pricing-card--solo h3 { font-size: 1.3rem !important; }
:is(.page-365, .365-page) #pricing .guarantee-panel { margin-top: .9rem !important; padding: .9rem 1.2rem !important; }
@media (max-width: 60rem) { .whatyouget { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .whatyouget { grid-template-columns: 1fr; } }
/* Real-cost stream measured 1,005px: smaller product tiles, name over meta
   so no tile grows a second line, one-line lead, tighter close. */
#real-cost .section-lead { max-width: 60rem; }
.pstream--costs { margin-top: 1.25rem; }
.pstream--costs .pcard-mini { width: 14rem; }
.pstream--costs .pcard-mini__body { flex-direction: column; align-items: flex-start; gap: .05rem; padding: .55rem .8rem .65rem; }
.pstream--costs .pcard-mini__name { font-size: .95rem; line-height: 1.25; }
.pstream--costs .pcard-mini__meta { font-size: .75rem; }
.pstream--costs .mv-card { width: 280px; }
.cost-close { margin-top: 1.25rem; font-size: .98rem; max-width: 58rem; }
/* Pricing: her six items at a size that keeps the offer on one screen. */
.whatyouget strong { font-size: .95rem; }
.whatyouget span { font-size: .82rem; line-height: 1.38; }
.pricing-card--solo { padding: 1.25rem 1.5rem !important; }


/* ============================================================
   10 · Round 3 (2026-08-31): how it works, why it works, the offer
   ============================================================ */
/* The science title was white on white: an earlier rule for the dark
   panel (#science .section-title, id specificity) outranked the light
   override below it. This one carries the id and the body class. */
html body.page-365 #science .section-title { color: var(--ink, #1a1a1a) !important; }
html body.page-365 #science .section-lead { color: var(--body, #302f2e) !important; }

/* How it works: her four stages read as ONE ladder down the page, Day 1
   at the top, Day 365 at the foot. The warming spine and the dot on each
   step carry the "goes deeper" idea, so the copy does not have to, and
   the shape is identical at 1440 and at 390: no four-column wall to
   compare across, no sideways rail on phones (iteration-101's lesson).
   --arc-gutter is the one number that ties the spine, the dots and the
   text column together; the dot is 16px wide at x=0 of .arc__steps and
   the spine is 4px at x=6px, so both share a centre of 8px. */
.arc { --arc-gutter: clamp(2.25rem, 3.5vw, 2.75rem); max-width: 60rem; margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0; }
.arc__edge { margin: 0; padding-inline-start: var(--arc-gutter); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6e6b67); text-align: start; }
.arc__steps { position: relative; list-style: none; margin: .55rem 0; padding: 0 0 0 var(--arc-gutter); display: grid; gap: clamp(1.35rem, 2.75vw, 2rem); }
.arc__steps::before { content: ""; position: absolute; top: .35rem; bottom: .35rem; inset-inline-start: 6px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, #fde6bf 0%, var(--amber, #fcbd4c) 30%, var(--coral, #f06858) 68%, var(--coral-ink, #b8402d) 100%); }
.arc__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; text-align: start; }
.arc__step::before { content: ""; position: absolute; inset-inline-start: calc(var(--arc-gutter) * -1); top: .35rem; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--arc-c, var(--coral, #f06858)); }
.arc__step--1 { --arc-c: #f6c777; } .arc__step--2 { --arc-c: #f6a24e; } .arc__step--3 { --arc-c: #ee6d5a; } .arc__step--4 { --arc-c: #bf4834; }
.arc__say h3 { margin: 0 0 .4rem; font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.25; color: var(--ink, #1a1a1a); text-wrap: balance; }
.arc__say p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--body, #302f2e); text-wrap: pretty; max-width: 34rem; }
.arc__q { margin: 0; display: grid; gap: .5rem; justify-items: start; padding: .9rem 1.1rem 1rem; background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); }
.arc__q .mv-card__tag { margin: 0; }
.arc__q p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink, #1a1a1a); }
.arc__themes { margin: clamp(1.5rem, 3vw, 2rem) auto 0; max-width: 58rem; text-align: center; font-size: 1.05rem; line-height: 1.7; color: var(--body, #302f2e); }
.arc__themes span { font-family: var(--font-display); font-weight: 700; color: var(--ink, #1a1a1a); }
.theme-pill { display: inline-block; padding: .1rem .7rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: .88rem; line-height: 1.5; margin: 0 .05rem; }
.theme-pill--coral { background: #ffeae8; color: #d9503f; }
.theme-pill--pink { background: #fcebee; color: #b84360; }
.theme-pill--blue { background: #e5f1fc; color: #2062a3; }
.theme-pill--teal { background: #e3f6f5; color: #1e7a76; }
.theme-pill--amber { background: #fff4db; color: #b87a00; }
.theme-pill--lilac { background: #efe8fa; color: #6a4ab0; }
.theme-pill--sage { background: #eff5db; color: #5a7322; }
@media (max-width: 56rem) {
  /* Phone: the same ladder, one column. The question sits under its own
     stage rather than beside it, and nothing scrolls sideways. */
  .arc { --arc-gutter: 1.85rem; }
  .arc__steps { gap: 1.65rem; }
  .arc__step { grid-template-columns: minmax(0, 1fr); row-gap: .8rem; }
  .arc__say p { max-width: none; }
  .arc__q { padding: .8rem .95rem .9rem; }
  .arc__themes { font-size: .95rem; line-height: 1.65; }
}

/* Why it works: her four foundations as one strip, then the shift she
   describes, as two speech bubbles. */
.science-strip { list-style: none; margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0; padding: 0; max-width: 66rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.science-strip li { padding: .25rem 1.25rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.3; color: var(--ink, #1a1a1a); border-inline-start: 1px solid var(--line); text-wrap: balance; }
.science-strip li:first-child { border-inline-start: 0; }
.science-strip li::before { content: ""; display: block; width: .5rem; height: .5rem; margin: 0 auto .65rem; border-radius: 50%; background: var(--coral, #f06858); }
.shift { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; max-width: 60rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; }
.shift__bubble { position: relative; margin: 0; padding: 1rem 1.3rem 1.1rem; border-radius: 1.25rem; font-family: var(--font-display); font-weight: 700; line-height: 1.3; font-size: clamp(1.05rem, 1.6vw, 1.3rem); text-align: start; }
.shift__from { background: #f1eee8; color: var(--muted, #6e6b67); border-bottom-left-radius: .35rem; }
.shift__to { background: var(--terracotta-light, #fdeeeb); color: var(--coral-ink, #b8402d); border-bottom-right-radius: .35rem; }
.shift__label { display: block; font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; opacity: .85; }
.shift__arrow { width: 2.5rem; height: 2.5rem; color: var(--coral, #f06858); }
.science-close { max-width: 52rem; margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0; text-align: center; text-align-last: center; font-size: 1.05rem; line-height: 1.55; color: var(--body, #302f2e); }
.science-close strong { color: var(--ink, #1a1a1a); font-family: var(--font-display); }
@media (max-width: 56rem) {
  .science-strip { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .science-strip li:nth-child(3) { border-inline-start: 0; }
}
@media (max-width: 40rem) {
  .shift { grid-template-columns: 1fr; gap: .5rem; }
  .shift__arrow { transform: rotate(90deg); margin-inline: auto; }
}

/* The offer: product left, price and button under it, her six "what
   you get" items right, the guarantee as the card's footer. */
.offer { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); grid-template-areas: "media list" "buy list" "foot foot"; column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: 1rem; max-width: 62rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle); }
.offer__media { grid-area: media; position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 5 / 4; }
.offer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer__badge { position: absolute; left: .75rem; top: .75rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--coral-ink, #b8402d); font-family: var(--font-display); font-weight: 700; font-size: .82rem; }
.offer__buy { grid-area: buy; display: grid; gap: .8rem; align-content: start; }
.offer__price { margin: 0; display: flex; align-items: center; gap: .9rem; }
.offer__amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1; color: var(--ink, #1a1a1a); }
.offer__terms { font-size: .9rem; line-height: 1.35; color: var(--muted, #6e6b67); }
.offer__cta { justify-self: stretch; text-align: center; }
.offer__fine { margin: 0; display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted, #6e6b67); }
.offer__fine svg { width: 1.1rem; height: 1.1rem; color: var(--coral, #f06858); }
.offer__list { grid-area: list; }
.offer__list > h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink, #1a1a1a); }
.offer__items { list-style: none; margin: 0; padding: 0; }
.offer__items li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--line); align-items: start; }
.offer__items li:first-child { border-top: 0; padding-top: .35rem; }
.offer__items svg { width: 1.4rem; height: 1.4rem; color: var(--coral, #f06858); margin-top: .05rem; }
.offer__items strong { display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.3; color: var(--ink, #1a1a1a); }
.offer__items span { display: block; margin-top: .1rem; font-size: .88rem; line-height: 1.4; color: var(--body, #302f2e); }
.offer__foot { grid-area: foot; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: var(--radius-md); background: var(--cream, #fef8ec); }
.offer__seal { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--coral, #f06858); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.offer__foot h3 { margin: 0 0 .15rem; font-family: var(--font-display); font-size: 1rem; color: var(--ink, #1a1a1a); }
.offer__foot p { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--body, #302f2e); }
@media (max-width: 56rem) {
  .offer { grid-template-columns: 1fr; grid-template-areas: "media" "buy" "list" "foot"; }
  .offer__media { aspect-ratio: 16 / 10; }
}

/* Alignment: pick-one.css justifies p and li. */
.arc__say p, .arc__q p, .shift__bubble, .offer__items li, .offer__items span, .offer__foot p, .offer__terms { text-align: start; text-align-last: start; }
.arc__themes, .science-close { text-align: center; text-align-last: center; }
.arc__themes { max-width: none; text-wrap: balance; }
/* The why-it-works block: her three-line title plus the stage; same rhythm as the family page. */
html body.page-365 #why-it-works.section { padding-block: clamp(2.5rem, 4vw, 3.25rem); }
/* The offer measured 908 / 1,481 (mobile). */
.offer__items li { padding: .6rem 0; }
.offer__items span { font-size: .86rem; line-height: 1.38; }
.offer__list > h3 { margin-bottom: .25rem; }
@media (max-width: 56rem) {
  .offer { padding: 1rem; row-gap: .75rem; }
  .offer__items li { padding: .5rem 0; gap: .55rem; }
  .offer__items strong { font-size: .95rem; }
  .offer__items span { font-size: .84rem; line-height: 1.35; }
  .offer__foot { padding: .75rem .9rem; }
}

/* ============================================================================
/* ============================================================================
   ITERATION 135 · APPROVED HERO SPEC 1:1 REFINEMENT (.hero365-stage)
   2-column desktop split layout with warm cream background (#FAF6EE).
   Left: Flush-left subhead, 3-line Gabarito headline (line 3 in coral #F06858),
         Amber (#FCBD4C) pill CTA button, 3 feature badge pills.
   Right: Couple on couch + floating question bubble + iPhone spin wheel mockup.
   ========================================================================== */

html body.page-365 .hero365-stage {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background-color: #FAF6EE;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(252, 189, 76, 0.15) 0%, rgba(252, 189, 76, 0) 58%),
    radial-gradient(90% 60% at 8% 92%, rgba(240, 104, 88, 0.08) 0%, rgba(240, 104, 88, 0) 62%),
    linear-gradient(180deg, #FAF6EE 0%, #FEF8EC 100%);
  overflow: clip;
}

html body.page-365 .hero365-stage__grid {
  width: min(80rem, calc(100% - 2.5rem));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
}

html body.page-365 .hero365-stage__head {
  max-width: 36rem;
  margin: 0;
  text-align: start;
}

html body.page-365 .hero365-stage__pre {
  font-family: var(--text, "Figtree", system-ui, sans-serif);
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  font-weight: 500;
  line-height: 1.45;
  color: #6B655D;
  max-width: 38rem;
  margin: 0 0 clamp(1.25rem, 2vw, 1.65rem);
  text-align: start;
  text-align-last: start;
  text-indent: 0;
  text-wrap: pretty;
  hyphens: none;
  display: block;
}

html body.page-365 .hero365-stage__title {
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: clamp(2.35rem, 3.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #1A1A1A;
  max-width: 38rem;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
  text-align: start;
  text-wrap: normal;
  hyphens: none;
}

html body.page-365 .hero365-stage__title-line {
  display: block;
  white-space: nowrap;
}

html body.page-365 .hero365-stage__title-accent,
html body.page-365 .hero365-stage__title-highlight {
  color: #F06858;
}

html body.page-365 .hero365-stage__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

html body.page-365 .hero365-stage__btn {
  min-height: 3.4rem;
  width: fit-content;
  margin: 0;
  padding: 0.85rem clamp(1.5rem, 2.2vw, 2.25rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 0;
  border-radius: var(--radius-pill, 9999px);
  background: #FCBD4C;
  color: #1A1A1A;
  box-shadow: 0 6px 16px rgba(252, 189, 76, 0.35);
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

html body.page-365 .hero365-stage__btn:hover {
  background: #f5b33d;
  color: #1A1A1A;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(252, 189, 76, 0.45);
}

html body.page-365 .hero365-stage__btn:focus-visible {
  outline: 3px solid #F06858;
  outline-offset: 3px;
}

/* Feature Badges Row */
html body.page-365 .hero365-stage__trust {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

html body.page-365 .hero365-stage__trust-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #1A1A1A;
  font-family: var(--text, "Figtree", system-ui, sans-serif);
  text-align: start;
}

html body.page-365 .hero365-stage__trust-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

html body.page-365 .hero365-stage__trust-item--coral .hero365-stage__trust-icon {
  background: #FDE8E5;
  color: #F06858;
}

html body.page-365 .hero365-stage__trust-item--green .hero365-stage__trust-icon {
  background: #E8F4EC;
  color: #38764B;
}

html body.page-365 .hero365-stage__trust-item--blue .hero365-stage__trust-icon {
  background: #EAF2F8;
  color: #3B729E;
}

html body.page-365 .hero365-stage__trust-text {
  display: flex;
  flex-direction: column;
}

html body.page-365 .hero365-stage__trust-text strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1A1A1A;
}

html body.page-365 .hero365-stage__trust-text small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  color: #6B655D;
}

/* ---- Right Column: Media composition ------------------------------------ */

html body.page-365 .hero365-stage__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 1500 / 1208;
  align-self: center;
  margin: 0;
}

html body.page-365 .hero365-stage__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.08);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%);
}

html body.page-365 .hero365-stage__qcard {
  position: absolute;
  z-index: 2;
  left: 4%;
  top: 58%;
  right: auto;
  bottom: auto;
  width: max-content;
  max-width: min(17.5rem, 46%);
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-md, 1rem);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 24px rgba(26, 26, 26, 0.12);
  color: #1A1A1A;
  font-family: var(--text, "Figtree", system-ui, sans-serif);
  font-size: clamp(0.75rem, 0.85vw, 0.85rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: start;
}

@supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  html body.page-365 .hero365-stage__qcard { background: rgba(255, 255, 255, 0.96); }
}

html body.page-365 .hero365-stage__qicon {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FDE8E5;
  color: #F06858;
}

html body.page-365 .hero365-stage__qicon svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
}

html body.page-365 .hero365-stage__qtext {
  font-family: var(--text, "Figtree", system-ui, sans-serif);
  font-size: inherit;
  font-weight: 600;
  line-height: 1.25;
  color: #1A1A1A;
  text-wrap: balance;
  hyphens: none;
}

html body.page-365 .hero365-stage__phone {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 8%;
  width: clamp(10.5rem, 18vw, 15rem);
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(26, 26, 26, 0.22));
}

/* ---- Responsive: Tablet & Mobile (max-width: 62rem / 992px) -------------- */

@media (max-width: 62rem) {
  html body.page-365 .hero365-stage {
    padding-block: clamp(2.25rem, 6vw, 3.5rem);
  }

  html body.page-365 .hero365-stage__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
  }

  html body.page-365 .hero365-stage__head {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
  }

  html body.page-365 .hero365-stage__pre,
  html body.page-365 .hero365-stage__title {
    margin-inline: auto;
    text-align: center;
  }

  html body.page-365 .hero365-stage__cta {
    justify-content: center;
  }

  html body.page-365 .hero365-stage__trust {
    justify-content: center;
  }

  html body.page-365 .hero365-stage__media {
    max-width: 38rem;
    margin-inline: auto;
    aspect-ratio: 1500 / 1208;
  }

  html body.page-365 .hero365-stage__img {
    border-radius: var(--radius-lg, 1.5rem);
    -webkit-mask-image: none;
    mask-image: none;
  }

  html body.page-365 .hero365-stage__phone {
    width: clamp(9.5rem, 25vw, 13.5rem);
  }
}

/* ---- Mobile viewport (max-width: 36rem / 576px) --------------------------- */

@media (max-width: 36rem) {
  html body.page-365 .hero365-stage {
    padding-block: 2rem 2.5rem;
  }

  html body.page-365 .hero365-stage__grid {
    width: min(calc(100% - 1.75rem), 80rem);
  }

  html body.page-365 .hero365-stage__pre {
    font-size: 0.84rem;
  }

  html body.page-365 .hero365-stage__title {
    font-size: clamp(2rem, 9.5vw, 2.5rem);
  }

  html body.page-365 .hero365-stage__title-line {
    display: inline;
    white-space: normal;
  }

  html body.page-365 .hero365-stage__btn {
    width: 100%;
  }

  html body.page-365 .hero365-stage__trust {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
    gap: 0.75rem;
  }

  html body.page-365 .hero365-stage__trust-text strong {
    font-size: 0.8125rem;
  }

  html body.page-365 .hero365-stage__trust-text small {
    font-size: 0.75rem;
  }

  html body.page-365 .hero365-stage__media {
    aspect-ratio: 1500 / 1208;
    width: 100%;
  }

  html body.page-365 .hero365-stage__qcard {
    left: 0.5rem;
    top: auto;
    bottom: 0.65rem;
    width: 62%;
    max-width: none;
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
  }

  html body.page-365 .hero365-stage__phone {
    right: 3%;
    bottom: 4%;
    width: 32%;
  }
}

/* ============================================================================
   ITERATION 103 · CONTRAST SECTION IS COUPLES ONLY
   Her note: this is a product for couples and the block was showing a mother and
   child. Copy replaced with hers, and the Family Edition cut-out swapped for the
   client's own couple-at-the-kitchen-table render. That render is a photograph,
   not a white cut-out, so the frame that was flattened for the cut-out at line
   ~1369 is restored here for this one figure.
   ========================================================================== */

html body.page-365 .contrast-copy .contrast-intro {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--body, #302f2e);
  margin: 0 0 1.25rem;
  text-wrap: pretty;
  hyphens: none;
}

html body.page-365 .contrast-copy .contrast-cue {
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin: 0;
  text-align: start;
  text-align-last: start;
  hyphens: none;
}

html body.page-365 .contrast-copy .contrast-dialogues { margin-top: 0.9rem; }

html body.page-365 .contrast-copy .dialogue-card p {
  margin: 0 0 0.15rem;
  text-align: start;
  text-align-last: start;
  hyphens: none;
}

html body.page-365 .contrast-copy .dialogue-card strong {
  display: block;
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: 1.0625rem;
  color: var(--ink, #1a1a1a);
}

html body.page-365 .contrast-copy .contrast-close {
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--coral-ink, #b8402d);
  margin: 1.35rem 0 0;
  text-align: start;
  text-align-last: start;
  text-wrap: balance;
  hyphens: none;
}

/* The photograph gets its frame back: the flattening rule above is for cut-outs. */
html body.page-365 .contrast-media--photo {
  border-radius: var(--radius-lg, 1.75rem) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-floating, 0 2px 6px rgba(26, 26, 26, 0.06), 0 28px 60px -22px rgba(26, 26, 26, 0.26)) !important;
}

html body.page-365 .contrast-media--photo img {
  object-fit: cover !important;
  aspect-ratio: 5 / 4;
  object-position: 50% 40%;
}

html body.page-365 .contrast-media--photo .contrast-media__caption {
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  color: var(--ink, #1a1a1a);
  hyphens: none;
}

/* The testimonial rail in #stories scrolls inside itself, but its section was
   letting that width out to the document, so /365/ carried 650px of sideways
   scroll at 1440 and the whole page sat off-centre. `clip` contains it without
   making the section a scroll container, so nothing inside it stops sticking. */
html body.page-365 #stories { overflow-x: clip; }

/* ============================================================================
   iteration-126 (2026-09-09) · #problem, "The Roommate Phase"

   Her two notes, in her words: "Add this to the image of the couple like the
   attached example" (the four logistics lines) and "Remove the background from
   that image of the couple on phones."

   Her example is the homepage disconnection block she signed off in
   iterations 124/125, so this reuses that block's measured geometry rather
   than inventing a second one. Same asset (couple-phones-couch-far-corners),
   same channel, same pill treatment; four rows here instead of three.

   NO BACKGROUND: the section is white, the asset is a cut-out whose backdrop
   is flattened to pure 255 white, and `mix-blend-mode: multiply` maps that
   white onto the section ground exactly. So the card, its radius, its shadow
   and the 4/3 cover-crop all go: the sofa now stands directly on the page and
   nothing is trimmed off it (House rules 7 and 12).

   THE PILLS: measured on this asset, the man's right knee ends at 33.7% of the
   frame and the woman's cardigan starts at 70.0%, so the free channel is
   33.7% to 70.0%. The rail is 29.6% wide on a centre of 52%, which puts it at
   37.2% to 66.8%: it clears each of them by over 3% of the picture at every
   width. Four rows centred at 36% run roughly 23% to 49% down, which is the
   empty sofa back. Change the photograph and every number here is void.
   ========================================================================= */

html body.page-365 .problem-layout {
  display: block;
  max-width: 68rem;
  margin-inline: auto;
}

html body.page-365 .problem-scene {
  position: relative;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

html body.page-365 .problem-scene > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2400 / 1610;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
}

/* iteration-128: the rail was optically off-centre in the channel. Measured on
   the served page: 3.70% of the picture to the man on the left, but only 1.53%
   to the woman's draped knee on the right. Centre moved 52% -> 51% and the rail
   narrowed 29.6% -> 28.4%, which puts it at 36.8% to 65.2%: 3.3% to him, 3.1%
   to her. */
html body.page-365 .problem-scene .logistics-list {
  position: absolute;
  left: 51%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: min(23rem, 28.4%);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.3rem, 0.7vw, 0.7rem);
}

html body.page-365 .problem-scene .logistics-list li {
  margin: 0;
  padding: clamp(0.4rem, 0.75vw, 0.8rem) clamp(0.6rem, 1vw, 1.1rem);
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.12);
  color: var(--ink, #1a1a1a);
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(0.6rem, 0.98vw, 0.95rem);
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;   /* one line each, never two */
  hyphens: none;
}

/* The caption that used to sit as a glass panel over her legs. Same move as
   the homepage: the sentence lives under the photograph, centred. */
/* iteration-129, her note: "make this line to stand out more". It was a 17px
   muted-grey caption and it disappeared under the photograph. Now it reads as
   the pull-line it is: the display face, ink instead of grey, and the lead-in
   in coral. Held at 1.3rem so it stays under the 1.35rem `.problem-insight h3`
   that opens the block below it: louder than a caption, never louder than the
   heading. Coral on white is 3.08:1, so the coral lead-in is bold and above
   18.66px, which is the WCAG AA large-text threshold (House rule 4); the rest
   of the sentence is ink at 15.3:1. */
html body.page-365 .problem-scene-caption {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  text-align: center;
  text-align-last: center;
  text-wrap: balance;
  color: var(--ink, #1a1a1a);
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  /* The floor is 1.1875rem, not 1.1rem: at 390 the clamp resolved to 17.6px,
     which puts the bold coral lead-in UNDER the 18.66px large-text threshold
     and fails AA at coral-deep's 4.2:1 on white. 19px clears it. */
  font-size: clamp(1.1875rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.45;
  hyphens: none;
}

html body.page-365 .problem-scene-caption strong {
  color: var(--coral-deep, #d9503f);
  font-weight: 700;
}

html body.page-365 .problem-insight {
  max-width: 52rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  text-align: center;
}

html body.page-365 .problem-insight h3 {
  text-align: center;
  text-wrap: balance;
}

html body.page-365 .problem-insight p {
  text-align: center;
  text-align-last: center;
  text-wrap: pretty;
}

/* Below 60rem the picture is too short to carry an overlay: the rows drop
   under it and stop being nowrap. Same threshold as the homepage. */
@media (max-width: 60rem) {
  html body.page-365 .problem-scene {
    display: flex;
    flex-direction: column;
  }

  html body.page-365 .problem-scene > img { order: 1; }

  html body.page-365 .problem-scene .logistics-list {
    order: 2;
    position: static;
    transform: none;
    width: auto;
    margin-top: 1rem;
    gap: 0.55rem;
  }

  html body.page-365 .problem-scene .logistics-list li {
    padding: 0.7rem 1.05rem;
    font-size: 0.95rem;
    border-radius: 1.4rem;
    white-space: normal;
    text-align: left;
  }
}

/* ============================================================================
   iteration-131 (2026-09-09) · #contrast, "You're not alone in this."

   Her two notes: (1) the 4.7 million intro "design the same was as the attached
   image with 3.2 milion", and (2) the three logistics exchanges "design same was
   as attched image: mother with kids. Change this to a couple."

   (1) is the Family page's 3.2 million block ported verbatim: same white card,
   same 28px radius, same coral display number, same cream bubble rows. Values
   copied from `family/family.refine.css` .stat-32m-*, not re-derived, so the two
   pages stay one design. Renamed .stat-47m-* here; `.stat-bubble` is shared.

   (2) is the Family page's dinner-asking photograph, whose speech bubbles are
   BAKED INTO the pixels. Baking them again would mean generating text inside an
   image, which is how garbled copy gets onto a page (House rule 13), so the
   photograph here is clean and the bubbles are real HTML on top of it.
   ========================================================================= */

:root {
  /* Brand pink #f4a9b0 at 20% on white. The wash the question bubbles sit on. */
  --po-pink-wash: #fdeeef;
}

/* --- 4a · the 4.7 million card ------------------------------------------- */

html body.page-365 .stat-47m-card {
  background: #ffffff;
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: 0 10px 40px rgba(26, 46, 34, 0.06);
  border: 1px solid rgba(26, 46, 34, 0.08);
}

html body.page-365 .stat-47m-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 58rem) {
  html body.page-365 .stat-47m-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

html body.page-365 .stat-47m-left,
html body.page-365 .stat-47m-right { display: flex; flex-direction: column; }

html body.page-365 .stat-47m-number-wrap {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
}

html body.page-365 .stat-47m-huge {
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: clamp(5.5rem, 11vw, 8.5rem);
  font-weight: 800;
  color: var(--po-coral, #f06858);
  line-height: 0.85;
  letter-spacing: -0.04em;
}

html body.page-365 .stat-47m-unit {
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 800;
  color: var(--po-coral, #f06858);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: -0.2rem;
}

html body.page-365 .stat-47m-desc {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  color: var(--po-forest, #1a2e22);
  line-height: 1.35;
  margin: 1.5rem 0 0;
  text-align: start;
  text-align-last: start;
  text-wrap: pretty;
  hyphens: none;
}

html body.page-365 .stat-47m-heading {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 700;
  color: var(--po-forest, #1a2e22);
  margin: 0 0 1.25rem;
  text-align: start;
  text-align-last: start;
  text-wrap: pretty;
  hyphens: none;
}

html body.page-365 .stat-47m-bubbles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

html body.page-365 .stat-47m-bubbles .stat-bubble {
  background: #faf6ee;
  border-radius: 20px;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border: 1px solid rgba(26, 46, 34, 0.08);
  box-shadow: 0 2px 8px rgba(26, 46, 34, 0.03);
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease;
}

@media (min-width: 58rem) {
  html body.page-365 .stat-47m-bubbles .stat-bubble::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #faf6ee;
  }
}

html body.page-365 .stat-47m-bubbles .stat-bubble:hover {
  transform: translateX(4px);
  background: #fdfaf4;
}

html body.page-365 .stat-47m-bubbles .stat-bubble__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #fcece5;
  color: var(--po-coral, #f06858);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html body.page-365 .stat-47m-bubbles .stat-bubble__text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--po-forest, #1a2e22);
  line-height: 1.45;
  margin: 0;
  text-align: start;
  text-align-last: start;
}

@media (prefers-reduced-motion: reduce) {
  html body.page-365 .stat-47m-bubbles .stat-bubble { transition: none; }
  html body.page-365 .stat-47m-bubbles .stat-bubble:hover { transform: none; }
}

/* --- 4b · the routine, written onto the photograph ------------------------ */

/* --- 4b · the routine, on the site's own frosted glass -------------------

   Rebuilt at her note: "use design tokens ... look again on refference and how
   we are doing illustration of the communicaton on frosted glass on images on
   other". The six scattered pink pills are gone. This is the same overlay the
   hero at the top of this page already uses (`.hero365-stage__qcard`): the
   values below are that card's, not new ones, and the tag pill is the site's
   `--terracotta-light` chip with `--coral-ink` on it (4.8:1).

   Alignment was the other half of her note. The exchanges now sit on one two
   column grid inside the card, questions flush left and answers flush right on
   a shared baseline, with a hairline between rows, so the block reads as one
   aligned transcript rather than six things floating at six angles.

   Placement is measured on `couple-dinner-checklist.webp`: the wall is empty
   from the top of the frame to 38% down (his head starts at 39%, hers at 41%),
   so the card is centred at 50% and hangs from 6%. Swap the photograph and this
   number has to be re-measured. */

html body.page-365 .checklist-scene {
  position: relative;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  max-width: 62rem;
  border-radius: var(--radius-lg, 1.75rem);
  overflow: hidden;
  box-shadow: var(--shadow-floating, 0 2px 6px rgba(26, 26, 26, 0.06), 0 28px 60px -22px rgba(26, 26, 26, 0.26));
}

html body.page-365 .checklist-scene > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1800 / 1344;
  object-fit: contain;   /* House rule 7: nothing is cropped off the picture */
}

html body.page-365 .routine-glass {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: min(34rem, 62%);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(0.9rem, 1.6vw, 1.35rem) clamp(1rem, 1.8vw, 1.5rem);
  text-align: start;
  text-align-last: start;
  border-radius: var(--radius-md, 1.25rem);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 1px 1px rgba(26, 26, 26, 0.04),
    0 18px 40px -20px rgba(26, 26, 26, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  html body.page-365 .routine-glass { background: rgba(255, 255, 255, 0.95); }
}

html body.page-365 .routine-glass__tag {
  align-self: flex-start;
  font-family: var(--text, "Figtree", system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral-ink, #b8402d);
  background: var(--terracotta-light, #fdeeeb);
  border-radius: var(--radius-full, 62.5rem);
  padding: 0.3rem 0.7rem;
  width: fit-content;
}

html body.page-365 .routine-glass__lead {
  margin: 0;
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: clamp(0.95rem, 1.2vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #1a1a1a);
  text-wrap: balance;
  hyphens: none;
}

html body.page-365 .routine-glass__log {
  margin: 0.15rem 0 0;
  display: grid;
  gap: 0;
}

/* Question flush left, answer flush right, one shared baseline per row. */
html body.page-365 .routine-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(0.6rem, 1.4vw, 1.25rem);
  padding: clamp(0.42rem, 0.85vw, 0.62rem) 0;
  border-top: 1px solid var(--border-card, rgba(26, 26, 26, 0.08));
}

html body.page-365 .routine-line:first-child { border-top: 0; padding-top: 0.15rem; }
html body.page-365 .routine-line:last-child { padding-bottom: 0.15rem; }

html body.page-365 .routine-line dt {
  margin: 0;
  font-family: var(--text, "Figtree", system-ui, sans-serif);
  font-size: clamp(0.8rem, 1.02vw, 1rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink, #1a1a1a);
  hyphens: none;
}

/* The answers are the point of the block: present, and going nowhere. */
html body.page-365 .routine-line dd {
  margin: 0;
  justify-self: end;
  text-align: end;
  font-family: var(--text, "Figtree", system-ui, sans-serif);
  font-size: clamp(0.8rem, 1.02vw, 1rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--muted, #6e6b67);
  white-space: nowrap;
  hyphens: none;
}

html body.page-365 .checklist-close {
  max-width: 46rem;
  margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
  text-align: center;
  text-align-last: center;
  font-family: var(--display, "Gabarito", "Trebuchet MS", system-ui, sans-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--po-coral-deep, #d9503f);
  hyphens: none;
}

/* Phone: the same move the hero card makes at this width. The glass comes off
   the photograph and becomes a solid card under it, because at 390 a 62% card
   over the picture leaves no room for either the text or the couple. */
@media (max-width: 48rem) {
  html body.page-365 .checklist-scene {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md, 1.25rem);
    box-shadow: none;
    overflow: visible;
  }

  html body.page-365 .checklist-scene > img {
    order: 1;
    border-radius: var(--radius-md, 1.25rem);
  }

  html body.page-365 .routine-glass {
    order: 2;
    position: static;
    transform: none;
    width: 100%;
    margin-top: 0.9rem;
    background: var(--white, #ffffff);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--border-card, rgba(26, 26, 26, 0.08));
    box-shadow: var(--shadow-subtle, 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 20px -14px rgba(26, 26, 26, 0.14));
  }

  html body.page-365 .routine-line dt,
  html body.page-365 .routine-line dd { font-size: 0.95rem; }
}

/* ============================================================
   365 FULL SCRIPT REDESIGN BLUEPRINT
   ============================================================ */

/* 1. Hero rating */
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 0.4rem 0.95rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border-card, rgba(26, 26, 26, 0.08));
  border-radius: var(--radius-pill, 9999px);
  box-shadow: var(--shadow-subtle, 0 2px 8px rgba(0,0,0,0.04));
}
.hero-rating__stars {
  display: flex;
  gap: 2px;
  align-items: center;
}
.hero-rating__text {
  font-size: 0.92rem;
  color: var(--ink, #1A1A1A);
  line-height: 1;
}

/* 2. Section: But Real Conversations (3 cards) */
.real-conv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.5rem;
}
@media (max-width: 54rem) {
  .real-conv-grid {
    grid-template-columns: 1fr;
  }
}
.real-conv-card {
  background: var(--cream, #FEF8EC);
  border: 1px solid var(--border-card, rgba(26, 26, 26, 0.08));
  border-radius: var(--radius-lg, 1.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.real-conv-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-subtle, 0 8px 24px -12px rgba(26, 26, 26, 0.12));
}
.real-conv-card__tag {
  display: inline-block;
  align-self: flex-start;
  background: #FFF0EE;
  color: var(--coral-deep, #D9503F);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill, 9999px);
}
.real-conv-card p {
  color: var(--ink, #1A1A1A);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* 3. Stat 4.7m card footer notes */
.checklist-footer-note {
  margin-top: 2.5rem;
  text-align: center;
}
.checklist-summary {
  font-family: var(--display, "Gabarito", system-ui, sans-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--ink, #1A1A1A);
  margin-bottom: 0.4rem;
}

/* 4. Bridge Narrative */
.bridge-narrative {
  max-width: 44rem;
  margin: 3rem auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.bridge-narrative p {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink, #1A1A1A);
  margin: 0;
}
.bridge-narrative strong {
  color: var(--coral-deep, #D9503F);
  font-weight: 700;
}

/* 5. Section: The conversation game that gets your partner talking */
.game-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 54rem) {
  .game-intro-grid {
    grid-template-columns: 1fr;
  }
}
.game-intro__copy h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--ink, #1A1A1A);
}
.game-intro__sub {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--muted, #6E6B67);
  margin-bottom: 1.75rem;
}
.game-intro__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.game-intro__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink, #1A1A1A);
}
.game-intro__list li svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--coral, #F06858);
}
.game-intro__media {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.game-intro__media img {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.08));
}

/* 6. Breakthrough block */
.breakthrough-block {
  margin-top: 4rem;
  background: var(--cream, #FEF8EC);
  border: 1px solid var(--border-card, rgba(26, 26, 26, 0.08));
  border-radius: var(--radius-xl, 2rem);
  padding: clamp(2rem, 4vw, 3.5rem);
}
.breakthrough-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 54rem) {
  .breakthrough-grid {
    grid-template-columns: 1fr;
  }
}
.breakthrough-title {
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  line-height: 1.25;
  margin-bottom: 0.5rem;
  color: var(--ink, #1A1A1A);
}
.breakthrough-lead {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--muted, #6E6B67);
  margin-bottom: 1.5rem;
}
.breakthrough-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.breakthrough-steps li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.breakthrough-steps li strong {
  font-size: 1.1rem;
  color: var(--coral-deep, #D9503F);
}
.breakthrough-steps li span {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink, #1A1A1A);
}
.breakthrough-closing {
  font-size: 1.1rem;
  color: var(--ink, #1A1A1A);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border-card, rgba(26, 26, 26, 0.08));
}
.breakthrough-media {
  margin: 0;
  border-radius: var(--radius-lg, 1.5rem);
  overflow: hidden;
  box-shadow: var(--shadow-medium, 0 12px 32px -8px rgba(0,0,0,0.12));
}
.breakthrough-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 7. Questions Preview */
.questions-preview-card {
  max-width: 68rem;
  margin: 0 auto;
  background: var(--cream, #FEF8EC);
  border: 1px solid var(--border-card, rgba(26, 26, 26, 0.08));
  border-radius: var(--radius-xl, 2rem);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.questions-preview-media {
  margin: 0;
  display: flex;
  justify-content: center;
}
.questions-preview-media img {
  max-width: 440px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 1rem);
}
.questions-preview-content {
  width: 100%;
}
.questions-preview-title {
  text-align: center;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  margin-bottom: 2rem;
  color: var(--ink, #1A1A1A);
}
.questions-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 48rem) {
  .questions-preview-grid {
    grid-template-columns: 1fr;
  }
}
.qp-col {
  background: var(--white, #FFFFFF);
  border: 1px solid var(--border-card, rgba(26, 26, 26, 0.08));
  border-radius: var(--radius-lg, 1.25rem);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.qp-col--highlight {
  border-color: rgba(240, 104, 88, 0.35);
  box-shadow: 0 4px 20px -6px rgba(240, 104, 88, 0.12);
}
.qp-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill, 9999px);
}
.qp-badge--muted {
  background: #F0EEE9;
  color: var(--muted, #6E6B67);
}
.qp-badge--coral {
  background: #FFF0EE;
  color: var(--coral-deep, #D9503F);
}
.qp-quote {
  font-family: var(--display, "Gabarito", system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink, #1A1A1A);
  margin: 0;
}
.qp-outcome {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}
.qp-outcome--neg { color: #8C8782; }
.qp-outcome--pos { color: var(--coral, #F06858); }
.qp-detail {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted, #6E6B67);
  margin: 0;
}

/* 8. Results Impact block & Banner — iteration 198: her approved frame (direction A).
   Full-width photo panel (the phone shows the real app), frosted cream card on the right.
   Stacks to photo + solid cream card at ≤72rem, where the card would cover the phone. */
.results-impact-block.rr-panel {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 660px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 2.5%;
  background: #EFE6D8;
}
.rr-media {
  position: absolute;
  inset: 0;
  margin: 0;
}
/* 112% wide, shifted left 12%: trims the far-left edge so the phone always clears the card. */
.rr-media img {
  width: 112%;
  max-width: none;
  height: 100%;
  margin-left: -12%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.rr-card {
  position: relative;
  width: 37%;
  background: #FEF8EC;
  border: 1px solid rgba(240, 104, 88, 0.18);
  border-radius: 28px;
  box-shadow: 0 24px 60px -24px rgba(26, 26, 26, 0.28);
  padding: 2.25rem 2.25rem 1.75rem;
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .rr-card {
    background: rgba(254, 248, 236, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
html body.page-365 #results .eyebrow.rr-pre {
  display: block;
  margin: 0 0 0.6rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body, "Figtree", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--coral-deep, #D9503F);
}
html body.page-365 #results .rr-title {
  font-family: var(--font-display, "Gabarito", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink, #1A1A1A);
  margin: 0 0 1.25rem;
  text-align: left;
}
html body.page-365 #results .rr-title__accent { color: var(--coral, #F06858); }
.rr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
}
.rr-row {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.rr-row:last-child { border-bottom: 0; }
.rr-pill {
  justify-self: start;
  background: var(--amber, #FCBD4C);
  color: var(--ink, #1A1A1A);
  font-family: var(--font-body, "Figtree", system-ui, sans-serif);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
}
html body.page-365 #results .rr-text {
  font-family: var(--font-body, "Figtree", system-ui, sans-serif);
  font-size: 0.98rem;
  line-height: 1.38;
  color: var(--ink, #1A1A1A);
  text-align: left;
}
@media (max-width: 72rem) {
  .results-impact-block.rr-panel {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: none;
  }
  .rr-media {
    position: static;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  /* crop to the couple + phone: the left two-thirds of the photo */
  .rr-media img { width: 150%; margin-left: 0; object-position: 50% 50%; }
  .rr-card,
  .rr-card:is(*) {
    width: auto;
    margin-top: 1rem;
    background: #FEF8EC;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(26, 26, 26, 0.08);
    box-shadow: none;
    border-radius: 22px;
    padding: 1.75rem 1.5rem 1.25rem;
  }
}
@media (max-width: 30rem) {
  .rr-row { grid-template-columns: 1fr; gap: 0.4rem; padding: 0.8rem 0; }
}
.relationship-banner {
  margin-top: 3rem;
  background: #FFF0EE;
  border: 1px solid rgba(240, 104, 88, 0.25);
  border-radius: var(--radius-lg, 1.5rem);
  padding: 1.5rem 2rem;
  text-align: center;
}
.relationship-banner p {
  font-family: var(--display, "Gabarito", system-ui, sans-serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--ink, #1A1A1A);
  margin: 0;
}
.relationship-banner strong {
  color: var(--coral-deep, #D9503F);
}

/* Iteration 142: one-line close under the 4.7m card; the two-phone shot on its own. */
html body.page-365 .checklist-footer-note, html body.page-365 .checklist-summary { text-align: center; text-align-last: center; text-wrap: balance; }
.checklist-summary__part { white-space: nowrap; }
.checklist-summary__close { color: var(--coral-deep, #D9503F); }
@media (max-width: 30rem) {
  .checklist-summary__part { white-space: normal; }
}
.questions-preview-media--solo { max-width: 52rem; margin: 0 auto; }
#questions-preview .questions-preview-media--solo img { width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-lg, 1.5rem); }
/* Iteration 143: the two-phone photo is a transparent cut-out of her original (grey studio
   backdrop removed), no frame, full-bleed so the hands enter from the screen edges. */
html body.page-365 #questions-preview.section { padding-block: clamp(1.25rem, 3vw, 2.5rem); overflow-x: clip; }
html body.page-365 #questions-preview .questions-preview-media--solo {
  width: min(100vw, 100rem); max-width: none;
  margin-inline: calc(50% - min(50vw, 50rem));
  background: none; border: 0; box-shadow: none; padding: 0;
}
html body.page-365 #questions-preview .questions-preview-media--solo img { border-radius: 0; box-shadow: none; background: none; }
@media (min-width: 100.01rem) {
  html body.page-365 #questions-preview .questions-preview-media--solo img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}
/* The guarantee strip is gone, so the offer card has no foot row. */
html body.page-365 .offer { grid-template-areas: "media list" "buy list"; }
@media (max-width: 56rem) {
  html body.page-365 .offer { grid-template-areas: "media" "buy" "list"; }
}

/* Iteration 144: the relationship statement is the happy amber band — the same strip as
   "This is why we created Pick One." (ochre, ink, Gabarito 700, coral brand marks), full width,
   static so the whole sentence reads at once. */
html body.page-365 .relationship-banner {
  margin: 0; border: 0; border-radius: 0;
  background: #ffbd48; color: var(--ink, #1a1a1a);
  padding: 1rem 1.25rem; text-align: center;
}
html body.page-365 .relationship-banner p {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  margin: 0 auto; max-width: 72rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-size: 1.05rem; font-weight: 700; line-height: 1.4; letter-spacing: 0;
  color: var(--ink, #1a1a1a); text-wrap: balance;
}
html body.page-365 .relationship-banner strong { color: inherit; font-weight: 800; }
html body.page-365 .relationship-banner .ym-mark { flex: none; height: 1em; margin: 0; }
@media (max-width: 30rem) {
  html body.page-365 .relationship-banner p { font-size: 1rem; gap: 0.5rem; }
}
html body.page-365 .relationship-banner p > span { text-align: center; }

/* Iteration 146 — her three notes on 2026-10-01.
   1. The "Logistics. Bills. Schedules. But nothing real." close sits in equal, tighter space. */
html body.page-365 #contrast.contrast-section { padding-bottom: clamp(1.75rem, 3vw, 2.25rem); }
html body.page-365 #contrast .checklist-footer-note { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
html body.page-365 #contrast .checklist-summary { margin: 0; line-height: 1.25; }

/* 2. Daily ritual: the heading is real text above ONE photo — her couple-on-the-bed shot, its
      question card already part of the photograph. Nothing is laid over the people. */
html body.page-365 #experience .ritual-single { max-width: 60rem; margin: 0 auto; }
html body.page-365 #experience .ritual-single img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 26px; max-height: none;
}
html body.page-365 #experience .ritual-single figcaption {
  margin-top: 1rem; text-align: center; color: var(--po-forest, #1A2E22);
  font-weight: 700; font-size: clamp(0.95rem, 1.2vw, 1.05rem); text-wrap: balance;
}
@media (max-width: 36rem) {
  html body.page-365 #experience .ritual-single img { border-radius: 18px; }
}

/* 3. Hero store badges under the benefit row. Not links until the real listing URLs exist. */
html body.page-365 .hero365-stage__stores {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
}
html body.page-365 .hero365-stage__stores .store-badge {
  padding: 0.5rem 1.05rem; gap: 0.6rem; min-height: 3rem; border-radius: 12px;
}
html body.page-365 .hero365-stage__stores .store-badge__icon { width: 1.5rem; height: 1.5rem; }
html body.page-365 .hero365-stage__stores .store-badge__name { font-size: 1.05rem; }
html body.page-365 .store-badge--static,
html body.page-365 .store-badge--static:hover { cursor: default; transform: none; }
html body.page-365 .store-badge--static:hover { background: #1a1a1a; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }

/* 4. Third benefit keeps its two lines: "For every" / "stage of your journey", never broken mid-phrase. */
html body.page-365 .hero365-stage__trust-text small { white-space: nowrap; }

@media (max-width: 62rem) {
  html body.page-365 .hero365-stage__stores { justify-content: center; }
}
@media (max-width: 36rem) {
  html body.page-365 .hero365-stage__stores { gap: 0.5rem; }
  html body.page-365 .hero365-stage__stores .store-badge { padding: 0.45rem 0.8rem; gap: 0.5rem; }
  html body.page-365 .hero365-stage__stores .store-badge__name { font-size: 1rem; }
}

/* Iteration 148 — daily ritual back to two columns: her couple-on-the-bed photo left (caption
   below it), a plain phone on the right whose lock screen carries ONLY the Pick One notification.
   Heading stays real text above. Nothing laid over the people. */
html body.page-365 #experience .ritual-duo {
  /* columns 3.08 : 1 so the 9:18.5 phone is exactly as tall as the 3:2 photo */
  display: grid; grid-template-columns: minmax(0, 3.08fr) minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: clamp(1.25rem, 3vw, 2.5rem); row-gap: 1rem;
  max-width: 64rem; margin: 0 auto; align-items: start;
}
html body.page-365 #experience .ritual-duo__photo {
  grid-column: 1; grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; margin: 0;
}
html body.page-365 #experience .ritual-duo__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 26px;
}
html body.page-365 #experience .ritual-duo__photo figcaption {
  text-align: center; color: var(--po-forest, #1A2E22); font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem); text-wrap: balance;
}
html body.page-365 #experience .ritual-duo__phone {
  grid-column: 2; grid-row: 1; justify-self: center; width: 100%;
  aspect-ratio: 9 / 18.5; padding: 9px; border-radius: 42px; background: #1a1a1a;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 24px 48px -20px rgba(26,26,26,.45);
}
html body.page-365 #experience .ritual-lock {
  position: relative; height: 100%; border-radius: 34px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding: 18% 7% 0;
  background: radial-gradient(120% 70% at 85% 100%, #c8692a 0%, #5a2f14 38%, #161210 72%);
  color: #fff;
}
html body.page-365 #experience .ritual-lock::before {
  content: ""; position: absolute; top: 10px; left: 50%; width: 32%; height: 22px;
  transform: translateX(-50%); border-radius: 999px; background: #000;
}
html body.page-365 #experience .ritual-lock__time {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 4.2vw, 3.4rem);
  line-height: 1; letter-spacing: -0.02em;
}
html body.page-365 #experience .ritual-notif {
  margin-top: 22%; width: 100%; display: flex; gap: .6rem; align-items: center;
  padding: .7rem .7rem; border-radius: 18px; background: rgba(255,255,255,.92); color: #1a1a1a;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
html body.page-365 #experience .ritual-notif__icon {
  flex: none; width: 34px; height: 34px; padding: 5px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
html body.page-365 #experience .ritual-notif__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
html body.page-365 #experience .ritual-notif__app {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #5f5a55; white-space: nowrap;
}
html body.page-365 #experience .ritual-notif__app em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; }
html body.page-365 #experience .ritual-notif strong { font-size: .9rem; line-height: 1.25; font-weight: 700; }
@media (max-width: 48rem) {
  html body.page-365 #experience .ritual-duo { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  html body.page-365 #experience .ritual-duo__photo { grid-row: 1 / span 2; }
  html body.page-365 #experience .ritual-duo__phone { grid-column: 1; grid-row: 3; width: min(15rem, 66vw); margin-top: 1rem; }
  html body.page-365 #experience .ritual-duo__photo img { border-radius: 18px; }
}

/* Iteration 149 — her original bed photo is back on the left (365-ritual-bed-notification: the clean
   365-bed-notification original with ONLY the generic logo tile swapped for her Drive coral wordmark).
   Phone: notification first, today's question below it. Same Drive wordmark in the notification icon. */
html body.page-365 #experience .ritual-lock { padding-top: 15%; }
html body.page-365 #experience .ritual-notif { margin-top: 14%; }
html body.page-365 #experience .ritual-notif__icon {
  display: grid; place-items: center; padding: 4px;
}
html body.page-365 #experience .ritual-notif__icon img { display: block; width: 100%; height: auto; }
html body.page-365 #experience .ritual-q {
  margin-top: .75rem; width: 100%; padding: 1rem .9rem 1.1rem; border-radius: 18px;
  background: var(--cream, #fef8ec); color: var(--po-forest, #1A2E22);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
html body.page-365 #experience .ritual-q__label {
  display: block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--po-coral, #F06858);
}
html body.page-365 #experience .ritual-q__text {
  margin: .4rem 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.45vw, 1.15rem); line-height: 1.22; text-wrap: balance;
}

/* Iteration 150 — right phone rebuilt as a smaller, realistic handset (no hand): titanium frame + side keys,
   black bezel, Dynamic Island, status bar, date/clock, frosted notification that mirrors the photo's card
   (coral wordmark tile, "Pick One" · now, "Your question of the day is here", same body line), today's question below. */
html body.page-365 #experience .ritual-duo {
  grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 4.5rem);
}
html body.page-365 #experience .ritual-duo__phone {
  grid-column: 2; grid-row: 1; align-self: center; justify-self: center;
  width: clamp(184px, 16.5vw, 200px); aspect-ratio: 71.6 / 147.6; padding: 0; border-radius: 0;
  background: none; box-shadow: none; margin-right: 6px;
}
html body.page-365 #experience .iph {
  --r: 34px; position: relative; height: 100%; padding: 3px; border-radius: var(--r);
  background: linear-gradient(145deg, #5b5856 0%, #2b2a29 22%, #1b1b1b 50%, #3a3836 78%, #6a6763 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 1px rgba(0,0,0,.3),
              0 30px 50px -22px rgba(26,26,26,.55), 0 12px 20px -12px rgba(26,26,26,.35);
}
/* side keys: action + volume on the left, power on the right */
html body.page-365 #experience .iph::before,
html body.page-365 #experience .iph::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2a2928, #57534f);
}
html body.page-365 #experience .iph::before {
  left: -2.5px; top: 17%; height: 5%;
  box-shadow: 0 calc(var(--r) * 1.4) 0 0 #3d3a38, 0 calc(var(--r) * 2.5) 0 0 #3d3a38;
}
html body.page-365 #experience .iph::after { right: -2.5px; top: 26%; height: 11%; background: linear-gradient(270deg, #2a2928, #57534f); }
html body.page-365 #experience .iph__screen {
  position: relative; height: 100%; overflow: hidden; border: 6px solid #050505;
  border-radius: calc(var(--r) - 3px);
  display: flex; flex-direction: column; align-items: center; padding: 0 9px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; color: #fff;
  background:
    radial-gradient(90% 55% at 80% 105%, rgba(240,104,88,.85) 0%, rgba(240,104,88,0) 70%),
    radial-gradient(80% 50% at 0% 0%, rgba(54,92,72,.9) 0%, rgba(54,92,72,0) 70%),
    linear-gradient(180deg, #1d3328 0%, #2a2420 55%, #4a2a22 100%);
}
/* faint glass reflection */
html body.page-365 #experience .iph__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%);
}
html body.page-365 #experience .iph__status {
  position: relative; width: 100%; height: 30px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 2px 8px 0 12px; font-size: 11px; font-weight: 600; letter-spacing: -.01em;
}
html body.page-365 #experience .iph__island {
  position: absolute; left: 50%; top: 7px; width: 34%; height: 17px; transform: translateX(-50%);
  border-radius: 999px; background: #000; box-shadow: inset -9px 0 0 -6px #14161c;
}
html body.page-365 #experience .iph__sys { display: inline-flex; gap: 3px; align-items: center; }
html body.page-365 #experience .iph__sys svg { fill: currentColor; display: block; }
html body.page-365 #experience .iph__date {
  margin-top: 8px; font-size: 11.5px; font-weight: 600; opacity: .85; letter-spacing: .01em;
}
html body.page-365 #experience .iph__time {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -.035em; margin-top: 1px;
  color: rgba(255,255,255,.94);
}
/* notification — same card as the one baked into the photo */
html body.page-365 #experience .ritual-notif {
  margin-top: auto; width: 100%; display: flex; gap: 7px; align-items: flex-start;
  padding: 8px 9px 9px 8px; border-radius: 15px;
  background: rgba(246,240,236,.86); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  color: #111; box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
html body.page-365 #experience .ritual-notif__icon {
  flex: none; width: 28px; height: 28px; padding: 4px; border-radius: 7px; background: #fbf7f4;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08); display: grid; place-items: center;
}
html body.page-365 #experience .ritual-notif__body { gap: 1px; flex: 1; }
html body.page-365 #experience .ritual-notif__app {
  display: flex; justify-content: space-between; gap: 6px; text-transform: none; letter-spacing: -.01em;
  font-size: 10.5px; font-weight: 600; color: #111;
}
html body.page-365 #experience .ritual-notif__app em { font-weight: 400; color: #77716c; }
html body.page-365 #experience .ritual-notif strong { font-size: 10.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
html body.page-365 #experience .ritual-notif__msg { font-size: 10px; line-height: 1.3; color: #2b2724; }
/* today's question */
html body.page-365 #experience .ritual-q {
  margin-top: 6px; padding: 10px 10px 11px; border-radius: 15px; box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
html body.page-365 #experience .ritual-q__label { font-size: 9px; }
html body.page-365 #experience .ritual-q__text { margin-top: 4px; font-size: 14px; line-height: 1.22; }
html body.page-365 #experience .iph__dock {
  width: 100%; flex: none; display: flex; justify-content: space-between; padding: 10px 14px 0;
}
html body.page-365 #experience .iph__btn {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(30,26,24,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html body.page-365 #experience .iph__home {
  flex: none; width: 36%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.9); margin: 9px 0 6px;
}
@media (max-width: 48rem) {
  html body.page-365 #experience .ritual-duo { grid-template-columns: 1fr; }
  html body.page-365 #experience .ritual-duo__phone { grid-column: 1; grid-row: 3; width: min(204px, 56vw); margin: 1rem auto 0; }
}
html body.page-365 #experience .iph__island { width: 26%; height: 15px; }
html body.page-365 #experience .iph__status { padding: 2px 9px 0 14px; font-size: 10.5px; }
html body.page-365 #experience .iph__sys { gap: 2px; }
html body.page-365 #experience .iph__sys svg { height: 8px; width: auto; }

/* Iteration 151 — her correction: the notification card moves INTO the phone (her attached card, cut from
   the photo with its real edges: coral tile, Pick One · now, bell + red 1); the photo's baked card is
   retouched out (365-ritual-bed-clean) and her white "Relationships" question card sits in the same spot,
   lower right on the bedding, clear of both faces. Phone = notification only, no second question. */
html body.page-365 #experience .ritual-duo__frame { position: relative; container-type: inline-size; }
html body.page-365 #experience .ritual-qcard {
  position: absolute; right: 3.5%; bottom: 5%; width: 31%;
  display: flex; flex-direction: column; align-items: center; gap: .55em; text-align: center;
  padding: 1.15em 1em 1.25em; border-radius: 1.1em; background: #fdfdfd; color: #242424;
  font-family: var(--font-body, "Inter", system-ui, sans-serif); font-size: clamp(11px, 2.05cqi, 15px);
  box-shadow: 0 10px 28px -10px rgba(40,30,20,.35), 0 0 0 1px rgba(0,0,0,.03);
}
html body.page-365 #experience .ritual-qcard__tag {
  padding: .3em .95em; border-radius: 999px; background: #fbe9e9; color: #e07e71;
  font-size: .9em; font-weight: 600; line-height: 1.3;
}
html body.page-365 #experience .ritual-qcard__text {
  margin: 0; font-size: 1.32em; font-weight: 500; line-height: 1.28; letter-spacing: -.01em; text-wrap: balance;
}
html body.page-365 #experience .ritual-notif-img {
  display: block; width: calc(100% + 6px); max-width: none; height: auto; margin: auto -3px 0;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.28));
}
@media (max-width: 48rem) {
  html body.page-365 #experience .ritual-qcard { width: 42%; right: 3%; bottom: 4%; font-size: clamp(10px, 2.9cqi, 13px); padding: .9em .8em 1em; }
}
html body.page-365 #experience .ritual-qcard p.ritual-qcard__text { text-align: center; max-width: none; color: #242424; }

/* Iteration 152 — the notification phone now wears the SAME handset as every other phone on the site:
   device-frame.webp is cut from device-q-myself.webp (thin graphite rim + silver ring, soft corners,
   Dynamic Island, contact shadow) with the screen punched out; the live lock screen sits in that exact
   screen window (32,34 → 764,1542 of 796×1576, radius 60). CSS frame, side keys and fake island retired. */
html body.page-365 #experience .ritual-duo__phone { aspect-ratio: 796 / 1576; width: clamp(196px, 17.5vw, 214px); }
html body.page-365 #experience .iph {
  height: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none;
}
html body.page-365 #experience .iph::before,
html body.page-365 #experience .iph::after { content: none; }
html body.page-365 #experience .iph__screen {
  position: absolute; left: 4.02%; right: 4.02%; top: 2.157%; bottom: 2.157%; height: auto;
  border: 0; border-radius: 8.2% / 3.98%; padding: 0 8px;
}
html body.page-365 #experience .iph__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; z-index: 2;
}
html body.page-365 #experience .iph__status { height: 26px; padding: 3px 12px 0 16px; }
html body.page-365 #experience .iph__date { margin-top: 12px; }
@media (max-width: 48rem) {
  html body.page-365 #experience .ritual-duo__phone { width: min(214px, 58vw); }
}
html body.page-365 #experience .iph { filter: drop-shadow(0 18px 22px rgba(40,30,20,.28)) drop-shadow(0 3px 4px rgba(40,30,20,.22)); }

/* Iteration 153 — House rule: nothing over faces OR bodies. The question card becomes a wide, short card on
   the bedding strip below his forearm (photo y > 83%), clear of every hand and arm. Mobile: that strip is
   too thin for legible type, so the card straddles the photo's bottom edge on the bedding, the rest below. */
html body.page-365 #experience .ritual-qcard {
  right: 2.5%; bottom: 2.5%; top: auto; left: auto; width: auto; max-width: 48%;
  align-items: flex-start; text-align: left; gap: .35em; padding: .65em 1.05em .75em; border-radius: .95em;
  font-size: clamp(10px, 2.15cqi, 16px);
}
html body.page-365 #experience .ritual-qcard__tag { font-size: .76em; padding: .25em .85em; }
html body.page-365 #experience .ritual-qcard p.ritual-qcard__text { text-align: left; font-size: 1.06em; white-space: nowrap; }
@media (max-width: 48rem) {
  html body.page-365 #experience .ritual-duo__frame { margin-bottom: 46px; }
  html body.page-365 #experience .ritual-qcard {
    top: 89.5%; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); max-width: 92%;
    align-items: center; font-size: 12px; padding: .6em 1em .7em;
  }
  html body.page-365 #experience .ritual-qcard p.ritual-qcard__text { text-align: center; font-size: 1.08em; }
}
@media (min-width: 48.01rem) { html body.page-365 #experience .ritual-qcard { bottom: 1.4%; } }
@media (max-width: 48rem) { html body.page-365 #experience .ritual-qcard { top: 91.5%; } html body.page-365 #experience .ritual-duo__frame { margin-bottom: 50px; } }

/* Iteration 194 — #contrast "You're not alone in this." restyled to her reference:
   open two-column layout, left text stack (giant coral 4.7 million, "But nothing real." close),
   three white icon chat cards on the right. Replaces the .stat-47m-card + footer note markup. */
html body.page-365 #contrast.contrast-section { padding-bottom: clamp(4rem, 7vw, 6rem); }
html body.page-365 #contrast .alone-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
html body.page-365 #contrast .alone-copy p { margin: 0; text-align: left; }
html body.page-365 #contrast .alone-title {
  font-family: var(--font-display, "Gabarito", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink, #1A1A1A);
  text-align: left;
  margin: 0 0 0.35rem;
}
html body.page-365 #contrast .alone-stat {
  font-family: var(--font-display, "Gabarito", system-ui, sans-serif);
  font-weight: 900;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--coral, #F06858);
  white-space: nowrap;
}
html body.page-365 #contrast .alone-copy .alone-stat { margin: 0.25rem 0 1rem; }
html body.page-365 #contrast .alone-strong {
  font-family: var(--font-body, "Figtree", system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--ink, #1A1A1A);
  max-width: 29rem;
}
html body.page-365 #contrast .alone-copy .alone-strong--gap { margin-top: 1.75rem; }
html body.page-365 #contrast .alone-routine {
  font-family: var(--font-body, "Figtree", system-ui, sans-serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink, #1A1A1A);
}
html body.page-365 #contrast .alone-copy .alone-routine { margin-top: 1.25rem; }
html body.page-365 #contrast .alone-copy .alone-repeat { margin-top: 1.5rem; }
html body.page-365 #contrast .alone-close {
  font-family: var(--font-display, "Gabarito", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--coral, #F06858);
}
html body.page-365 #contrast .alone-chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
html body.page-365 #contrast .alone-chat {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.04);
  border-radius: 20px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 18px 40px -18px rgba(26, 26, 26, 0.14);
}
html body.page-365 #contrast .alone-chat__icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FDEEEB;
  color: var(--coral, #F06858);
  display: grid;
  place-items: center;
}
html body.page-365 #contrast .alone-chat__icon svg,
html body.page-365 #contrast .alone-chat__icon svg * { fill: none !important; stroke: currentColor; }
html body.page-365 #contrast .alone-chat__text { display: flex; flex-direction: column; gap: 0.2rem; }
html body.page-365 #contrast .alone-chat__q,
html body.page-365 #contrast .alone-chat__a {
  font-family: var(--font-body, "Figtree", system-ui, sans-serif);
  font-size: 1.15rem;
  line-height: 1.35;
}
html body.page-365 #contrast .alone-chat__q { color: var(--ink, #1A1A1A); }
html body.page-365 #contrast .alone-chat__a { color: var(--muted, #6E6B67); }
@media (max-width: 54rem) {
  html body.page-365 #contrast .alone-grid { grid-template-columns: 1fr; }
  html body.page-365 #contrast .alone-stat { font-size: clamp(3.4rem, 16vw, 5rem); }
  html body.page-365 #contrast .alone-strong { font-size: 1.2rem; }
  html body.page-365 #contrast .alone-chat { padding: 1.25rem 1.25rem; gap: 1rem; }
  html body.page-365 #contrast .alone-chat__q,
  html body.page-365 #contrast .alone-chat__a { font-size: 1.08rem; }
}

/* Iteration 195 — her pre-headline above the #why-it-works title. House rule: pre-headlines
   are sentence case, never all caps. Scoped to this one eyebrow. */
html body.page-365 #why-it-works .eyebrow.why-pre {
  display: block;
  margin: 0 auto 0.75rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body, "Figtree", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--coral-deep, #D9503F);
  text-align: center;
}

/* Iteration 196 — "Walls go up" note: each quoted question on its own line, then the
   explanation as its own paragraph; everything centred. Scoped to the ask side on /365. */
html body.page-365 #why-it-works .bridge-side--ask .bridge-note--stack {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
}
html body.page-365 #why-it-works .bridge-note--stack p {
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  text-align-last: center;
}
html body.page-365 #why-it-works .bridge-note--stack .bridge-note__quote + .bridge-note__quote { margin-top: 0.35rem; }
html body.page-365 #why-it-works .bridge-note--stack .bridge-note__why { margin-top: 0.9rem; }

/* =====================================================================
   Iteration 199 — her approved 365 design ("Yes, build it all now").
   Ported from the design preview (revs 3–16) with the stacked overrides
   resolved to their final values, plus the ripple (option A).
   The "Real couples. Real results." block (#results .rr-panel) is LOCKED
   at iteration-198 and is not touched here.
   ===================================================================== */

html body.page-365 .nowrap { white-space: nowrap; }

/* Three lines set like "But nothing real.": the Logistics caption, the
   why-it-works pre-headline and the "No awkward pauses…" close. */
html body.page-365 .problem-scene-caption,
html body.page-365 .problem-scene-caption strong,
html body.page-365 #why-it-works .eyebrow.why-pre,
html body.page-365 #why-it-works .bridge-narrative p strong {
  font-family: var(--font-display, "Gabarito", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--coral, #F06858);
  text-transform: none;
  text-wrap: balance;
}
html body.page-365 #why-it-works .bridge-narrative p strong { display: block; }
html body.page-365 #why-it-works .eyebrow.why-pre { margin-bottom: 0.6rem; }

/* "But real conversations…": open three columns, hairlines, coral heads. */
html body.page-365 #real-conversations .section-header { max-width: none; width: 100%; }
html body.page-365 #real-conversations .section-header .section-title {
  max-width: none; width: 100%;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  text-wrap: wrap !important;
}
html body.page-365 #real-conversations .section-header .section-lead {
  max-width: none !important; width: 100%;
  margin-inline: auto;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-soft, #3D3A37);
  text-wrap: wrap !important;
}
html body.page-365 #real-conversations .rc-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
html body.page-365 #real-conversations .rc-col {
  padding: 0.25rem clamp(1.25rem, 3vw, 2.75rem);
  border-left: 1px solid rgba(26, 26, 26, 0.18);
}
html body.page-365 #real-conversations .rc-col:first-child { border-left: 0; padding-left: 0; }
html body.page-365 #real-conversations .rc-col:last-child { padding-right: 0; }
html body.page-365 #real-conversations .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(--coral-deep, #D9503F);
  text-align: left;
  text-wrap: balance;
}
html body.page-365 #real-conversations .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-365 #real-conversations .rc-col p.rc-col__kicker { font-weight: 700; }
@media (max-width: 54rem) {
  html body.page-365 #real-conversations .rc-cols { grid-template-columns: 1fr; }
  html body.page-365 #real-conversations .rc-col { border-left: 0; border-top: 1px solid rgba(26, 26, 26, 0.18); padding: 1.5rem 0; }
  html body.page-365 #real-conversations .rc-col:first-child { border-top: 0; padding-top: 0; }
}

/* #why-it-works: headline and narrative run the full diagram width. */
html body.page-365 #why-it-works .section-header { max-width: none; width: 100%; }
html body.page-365 #why-it-works .section-header .section-title,
html body.page-365 #why-it-works .section-header .section-lead { max-width: none; width: 100%; margin-inline: auto; }
html body.page-365 #why-it-works .section-header .section-title {
  font-size: clamp(2.2rem, 3.85vw, 3.3rem);
  line-height: 1.05;
  text-wrap: wrap !important;
}
html body.page-365 #why-it-works .bridge-narrative { max-width: none; width: 100%; margin-inline: 0; }
html body.page-365 #why-it-works .bridge-narrative p { max-width: none; width: 100%; }

/* Introducing Pick One: copy left, three real-app phones right. */
html body.page-365 .intro-game__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
html body.page-365 .intro-game__eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--font-body, "Figtree", sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--coral-deep, #D9503F);
}
html body.page-365 .intro-game__title {
  margin: 0 0 1.75rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink, #1A1A1A);
  text-align: left;
  text-wrap: balance;
}
html body.page-365 .intro-game__why {
  margin: 0 0 0.9rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.2rem, 1.55vw, 1.4rem);
  letter-spacing: -0.015em;
  color: var(--ink, #1A1A1A);
}
html body.page-365 .intro-game__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
html body.page-365 .intro-game__list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.4;
  color: var(--ink, #1A1A1A);
}
html body.page-365 .ig-tick {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: #FDE8E4;
  color: var(--coral, #F06858);
  display: inline-flex; align-items: center; justify-content: center;
}
html body.page-365 .ig-tick svg { width: 1rem; height: 1rem; }
html body.page-365 .intro-game__phones { position: relative; height: clamp(440px, 42vw, 600px); }
html body.page-365 .ig-phone {
  position: absolute;
  bottom: 4%;
  height: 74%;
  width: auto;
  filter: drop-shadow(0 22px 28px rgba(60, 30, 10, 0.16));
}
html body.page-365 .ig-phone--left { left: 2%; }
html body.page-365 .ig-phone--right { right: 2%; }
html body.page-365 .ig-phone--center {
  left: 50%;
  bottom: 0;
  height: 100%;
  transform: translateX(-50%);
  z-index: 2;
  filter: drop-shadow(0 30px 40px rgba(60, 30, 10, 0.24));
}
@media (max-width: 54rem) {
  html body.page-365 .intro-game__grid { grid-template-columns: 1fr; }
  html body.page-365 .intro-game__phones { height: 380px; order: -1; }
  html body.page-365 .intro-game__list li { align-items: flex-start; }
}

/* Couple stories: kitchen photo left (phone on the counter), four equal cards right. */
html body.page-365 #couple-stories .cs-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.6vw, 1.25rem);
  align-items: stretch;
}
html body.page-365 #couple-stories .cs-split__photo { position: relative; margin: 0; min-height: 100%; border-radius: 22px; overflow: hidden; }
html body.page-365 #couple-stories .cs-split__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}
html body.page-365 #couple-stories .cs-split__list { display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.25rem); }
html body.page-365 #couple-stories .cs-split__list .couple-story-card {
  min-height: 0;
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 54rem) {
  html body.page-365 #couple-stories .cs-split { grid-template-columns: 1fr; }
  html body.page-365 #couple-stories .cs-split__photo { aspect-ratio: 4 / 4.6; min-height: 0; }
  html body.page-365 #couple-stories .cs-split__photo img { object-position: 50% 78%; }
}

/* Spin the wheel: physical question cards loop behind the real-app phone. */
html body.page-365 .qdeck-section { overflow: hidden; }
html body.page-365 .qdeck {
  position: relative;
  height: clamp(470px, 44vw, 640px);
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
html body.page-365 .qdeck__track {
  position: absolute; top: 50%; left: 0;
  display: flex;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin: 0; padding: 0;
  list-style: none;
  transform: translateY(-50%);
  animation: qdeck-move 70s linear infinite;
  will-change: transform;
}
@keyframes qdeck-move {
  from { transform: translate(0, -50%); }
  to { transform: translate(-50%, -50%); }
}
html body.page-365 .qdeck__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 20.5vw, 300px);
  aspect-ratio: 5 / 7.4;
  border-radius: 22px;
  background: #FFFDF8;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 #EFE6D6, 0 2px 0 #E6DAC4, 0 3px 0 #DCCDB2, 0 22px 38px -20px rgba(60, 35, 10, 0.35);
}
html body.page-365 .qdeck__card:nth-child(3n+1) { transform: rotate(-1.6deg) translateY(6px); }
html body.page-365 .qdeck__card:nth-child(3n+2) { transform: rotate(1.2deg) translateY(-8px); }
html body.page-365 .qdeck__card:nth-child(3n) { transform: rotate(-0.4deg) translateY(2px); }
html body.page-365 .qdeck__q {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.2rem, 1.8vw, 1.7rem);
  text-align: center;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.95vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink, #1A1A1A);
  text-wrap: balance;
}
html body.page-365 .qdeck__band {
  position: relative;
  flex: 0 0 24%;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 1rem 0.9rem;
  background-color: var(--amber, #FCBD4C);
  background-image: url("../assets/pick-one-mark-white.svg");
  background-size: 30px 30px;
  background-repeat: space;
}
html body.page-365 .qdeck__band::before { content: ""; position: absolute; inset: 0; background-color: inherit; opacity: 0.9; }
html body.page-365 .qdeck__band img { position: relative; width: clamp(70px, 6.6vw, 96px); height: auto; }
html body.page-365 .qdeck__card--coral .qdeck__band { background-color: var(--coral, #F06858); }
html body.page-365 .qdeck__phone {
  position: absolute; z-index: 2;
  left: 50%; top: 50%;
  height: 100%; width: auto;
  transform: translate(-50%, -50%);
}
@media (max-width: 54rem) {
  html body.page-365 .qdeck { height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.page-365 .qdeck__track { animation: none; }
}

/* The ripple (option A): the Pick One wordmark at the centre, three outcomes each side. */
html body.page-365 #results .ripple { margin-top: 4rem; --ripple-logo: clamp(180px, 16vw, 240px); --ripple-core: calc(var(--ripple-logo) + 7rem); }
html body.page-365 #results .ripple__head {
  margin: 0 auto clamp(3rem, 6vw, 5.5rem);
  max-width: none;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.1vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink, #1A1A1A);
  text-align: center;
}
html body.page-365 #results .ripple__head-accent { color: var(--coral, #F06858); }
html body.page-365 #results .ripple__map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ripple-core) minmax(0, 1fr);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
html body.page-365 #results .ripple__side { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); }
html body.page-365 #results .ripple__side--left { padding-right: 4.5rem; justify-items: end; }
html body.page-365 #results .ripple__side--right { padding-left: 4.5rem; justify-items: start; }
html body.page-365 #results .ripple__item { max-width: 17rem; }
html body.page-365 #results .ripple__item--left { text-align: right; }
html body.page-365 #results .ripple__item--right { text-align: left; }
html body.page-365 #results .ripple__title {
  position: relative;
  margin: 0 0 0.35rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.75vw, 1.65rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink, #1A1A1A);
  text-align: inherit;
}
html body.page-365 #results .ripple__desc { margin: 0; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.4; color: var(--muted, #6E6B67); text-align: inherit; }
/* coral dot beside each title (iteration 212: leader lines removed, her ask) */
html body.page-365 #results .ripple__title::after { content: ""; position: absolute; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--coral, #F06858); bottom: 0.3em; }
html body.page-365 #results .ripple__item--left .ripple__title::after { right: -1.75rem; }
html body.page-365 #results .ripple__item--right .ripple__title::after { left: -1.75rem; }
html body.page-365 #results .ripple__core { position: relative; width: var(--ripple-core); display: flex; align-items: center; justify-content: center; }
html body.page-365 #results .ripple__logo { display: block; width: var(--ripple-logo); height: auto; aspect-ratio: 624 / 320; }
@media (max-width: 54rem) {
  html body.page-365 #results .ripple { --ripple-logo: 140px; --ripple-core: auto; }
  html body.page-365 #results .ripple__map { display: flex; flex-direction: column; align-items: stretch; gap: 1.6rem; }
  html body.page-365 #results .ripple__core { order: -1; align-self: center; }
  html body.page-365 #results .ripple__side--left,
  html body.page-365 #results .ripple__side--right { padding: 0; justify-items: stretch; gap: 1.25rem; }
  html body.page-365 #results .ripple__item,
  html body.page-365 #results .ripple__item--left,
  html body.page-365 #results .ripple__item--right { max-width: none; text-align: left; padding-left: 1.75rem; }
  html body.page-365 #results .ripple__item--left .ripple__title::after,
  html body.page-365 #results .ripple__item--right .ripple__title::after { left: -1.75rem; right: auto; bottom: auto; top: 0.3em; }
}

/* Pricing: the homepage .pcard, one-time price, standard store badges. */
html body.page-365 #pricing .flagship--single { display: block; max-width: 34rem; margin: 0 auto; }
/* Iteration 204 — her split: 1/3 vertical 365 photo, 2/3 the existing price card. */
html body.page-365 #pricing .flagship--split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: center;
  max-width: 64rem;
}
html body.page-365 #pricing .flagship--split .pcard { max-width: none; width: 100%; }
/* Iteration 205 — her mock: the Pick One: 365 deck cover (homepage .deck-cover file), shown whole. */
/* Iteration 206 — near-equal pair: the cover's height follows the price card's. */
html body.page-365 #pricing .pricing-cover { position: relative; margin: 0; align-self: stretch; min-height: 20rem; }
html body.page-365 #pricing .pricing-cover img {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 100%; width: auto;
  max-width: 100%;
  object-fit: contain;
  aspect-ratio: 620 / 810;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}
@media (max-width: 54rem) {
  html body.page-365 #pricing .flagship--split { grid-template-columns: 1fr; max-width: 34rem; }
  html body.page-365 #pricing .pricing-cover { min-height: 0; }
  html body.page-365 #pricing .pricing-cover img { position: static; transform: none; margin: 0 auto; width: min(20rem, 100%); height: auto; }
}
html body.page-365 #pricing .pcard__chev { width: 1.1rem; height: 1.1rem; }
html body.page-365 #pricing .pcard__list .tick svg { width: 14px; height: 14px; }
html body.page-365 #pricing .pcard__stores { display: flex; flex-wrap: nowrap; gap: 0.6rem; margin-top: 0.9rem; }
html body.page-365 #pricing .pcard__stores .store-badge { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0.55rem 0.6rem; gap: 0.45rem; white-space: nowrap; }
html body.page-365 #pricing .pcard__stores .store-badge__sub { font-size: 0.6rem; white-space: nowrap; }
html body.page-365 #pricing .pcard__stores .store-badge__name { font-size: 0.95rem; white-space: nowrap; }
html body.page-365 #pricing .pcard__note { margin-top: 0.9rem; }

/* #experience: lock-screen phone as one real image; standard store badges below. */
/* Iteration 212 — home-screen phone with the pop-out question: beside the photo at about its height. */
html body.page-365 #experience .ritual-duo { grid-template-columns: minmax(0, 1fr) clamp(220px, 20vw, 290px); }
html body.page-365 #experience .ritual-duo__phone { width: 100%; aspect-ratio: auto; margin-right: 0; align-self: start; }
html body.page-365 #experience .ritual-duo__phone .iph-lock-img {
  display: block;
  width: 100%; height: auto;
  margin: 0 auto;
}
html body.page-365 #experience .ritual__stores { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
@media (max-width: 54rem) {
  html body.page-365 #experience .ritual-duo { grid-template-columns: 1fr; }
  html body.page-365 #experience .ritual-duo__phone { grid-column: 1; grid-row: 3; justify-self: stretch; width: 100%; margin: 1.25rem 0 0; display: flex; justify-content: center; transform: none; }
  html body.page-365 #experience .ritual-duo__phone .iph-lock-img { width: min(20rem, 84vw); }
}

/* Every CTA amber with ink text, nav and mobile menu included. */
html body.page-365 :is(.btn--terracotta, .nav__cta) {
  background: var(--amber, #FCBD4C);
  border-color: var(--amber, #FCBD4C);
  color: var(--ink, #1A1A1A);
}
html body.page-365 :is(.btn--terracotta, .nav__cta):hover {
  background: var(--ochre-hover-amber, #F0AA2C);
  border-color: var(--ochre-hover-amber, #F0AA2C);
  color: var(--ink, #1A1A1A);
}

/* Reviews reel: its cards' .sr-only spans were positioned against the page, not the
   scroller, so they escaped it and made the whole page scroll sideways on phones. */
html body.page-365 #results .reel { position: relative; }

/* Iteration 207 — her mock overrides the house rules for this card only: the homepage
   price card as it was — coral CTA with white text, five ticks, no store badges. */
html body.page-365 #pricing .pcard .pcard__cta { background: var(--coral, #F06858); border-color: var(--coral, #F06858); color: #FFFFFF; }
html body.page-365 #pricing .pcard .pcard__cta { justify-content: space-between; padding-inline: 1.6rem; border-radius: 14px; }
html body.page-365 #pricing .pcard .pcard__cta:hover { background: var(--coral-deep, #D9503F); border-color: var(--coral-deep, #D9503F); color: #FFFFFF; }
/* Pair centred exactly: columns sized to their content, the pair centred as one. */
@media (min-width: 54.01rem) {
  html body.page-365 #pricing .flagship--split { grid-template-columns: auto minmax(0, 34rem); justify-content: center; }
  html body.page-365 #pricing .flagship--split .pricing-cover { aspect-ratio: 620 / 810; width: auto; }
}

/* Iteration 209 — pricing heading: break after "One year." on desktop; "A" never ends a line. */
@media (min-width: 54.01rem) {
  html body.page-365 #pricing .pricing-title__line { display: block; }
}

/* =====================================================================
   Iteration 212 — her approved preview ("ok implement and go into web coding").
   Ported from design-preview revs 19–30, stacked overrides resolved.
   Locked blocks (#results .rr-panel, #question-deck, #pricing apart from her
   cover change) are not touched here.
   ===================================================================== */

/* #pattern: amber timeline, centred, no image. Her rules: no coral, no highlighter, black text. */
html body.page-365 #pattern.pattern--timeline { text-align: center; padding-block: clamp(4rem, 8vw, 6.5rem); }
html body.page-365 #pattern .pt-eyebrow { display: block; margin-bottom: 0.6rem; font-weight: 600; font-size: 1.05rem; color: var(--ink, #1A1A1A); }
html body.page-365 #pattern .pt-title {
  margin: 0;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink, #1A1A1A);
  text-wrap: balance;
}
html body.page-365 #pattern .pt-track {
  position: relative;
  list-style: none;
  max-width: 64rem;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
html body.page-365 #pattern .pt-track::before {
  content: "";
  position: absolute;
  left: 16.66%; right: 16.66%; top: 2.75rem;
  height: 2px;
  background: linear-gradient(90deg, #F6E3B8, #FCBD4C);
}
html body.page-365 #pattern .pt-step { position: relative; }
html body.page-365 #pattern .pt-dot {
  position: relative; z-index: 1;
  width: 5.5rem; height: 5.5rem;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  color: var(--ink, #1A1A1A);
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px #F3DDAA, 0 12px 24px -16px rgba(140, 100, 20, 0.5);
}
html body.page-365 #pattern .pt-step:nth-child(2) .pt-dot { box-shadow: 0 0 0 2px #F8CC74, 0 12px 24px -16px rgba(140, 100, 20, 0.5); }
html body.page-365 #pattern .pt-step--on .pt-dot { background: var(--amber, #FCBD4C); box-shadow: 0 0 0 6px rgba(252, 189, 76, 0.25), 0 16px 30px -14px rgba(160, 110, 20, 0.6); }
html body.page-365 #pattern .pt-step p,
html body.page-365 #pattern .pt-quote,
html body.page-365 #pattern .pt-close { text-align: center; text-align-last: center; }
html body.page-365 #pattern .pt-step p {
  max-width: 17rem;
  margin: 0 auto;
  font-family: var(--font-body, "Figtree", sans-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  color: #3D3A37;
  text-wrap: balance;
}
html body.page-365 #pattern .pt-quote { max-width: none; margin: clamp(2.75rem, 5vw, 4rem) auto 0; font-size: 1.15rem; color: #3D3A37; }
html body.page-365 #pattern .pt-quote strong { font-weight: 600; color: var(--ink, #1A1A1A); }
html body.page-365 #pattern .pt-close {
  max-width: none;
  margin: 0.9rem auto 0;
  font-family: var(--font-body, "Figtree", sans-serif);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  letter-spacing: -0.01em;
  color: var(--ink, #1A1A1A);
}
@media (max-width: 54rem) {
  html body.page-365 #pattern .pt-track { grid-template-columns: 1fr; gap: 2rem; max-width: 22rem; }
  html body.page-365 #pattern .pt-track::before {
    left: 50%; right: auto; top: 2.75rem; bottom: 6rem;
    width: 2px; height: auto;
    transform: translateX(-1px);
    background: linear-gradient(180deg, #F6E3B8, #FCBD4C);
  }
  html body.page-365 #pattern .pt-step p { position: relative; z-index: 1; padding: 0.2rem 0; background: #FFFFFF; }
}

/* #results ripple on desktop: one 3-row grid so left and right rows line up; dots only. */
@media (min-width: 54.01rem) {
  html body.page-365 #results .ripple { --ripple-logo: clamp(170px, 15vw, 220px); --gap: clamp(1.25rem, 2vw, 1.75rem); }
  html body.page-365 #results .ripple__map {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    column-gap: 0;
    row-gap: clamp(1.75rem, 3vw, 2.5rem);
    align-items: center;
    max-width: 72rem;
    margin-inline: auto;
  }
  html body.page-365 #results .ripple__side { display: contents; }
  html body.page-365 #results .ripple__side--left > .ripple__item { grid-column: 1; }
  html body.page-365 #results .ripple__side--right > .ripple__item { grid-column: 3; }
  html body.page-365 #results .ripple__side > .ripple__item:nth-child(1) { grid-row: 1; }
  html body.page-365 #results .ripple__side > .ripple__item:nth-child(2) { grid-row: 2; }
  html body.page-365 #results .ripple__side > .ripple__item:nth-child(3) { grid-row: 3; }
  html body.page-365 #results .ripple__core { grid-column: 2; grid-row: 1 / 4; width: auto; padding-inline: calc(var(--gap) + 0.7rem + 2.5rem); }
  html body.page-365 #results .ripple__item { position: relative; min-width: 0; max-width: none; }
  html body.page-365 #results .ripple__item--left { justify-self: end; text-align: right; }
  html body.page-365 #results .ripple__item--right { justify-self: start; text-align: left; }
  html body.page-365 #results .ripple__title { margin: 0 0 0.3rem; font-size: clamp(1.2rem, 1.6vw, 1.5rem); white-space: nowrap; }
  html body.page-365 #results .ripple__desc { white-space: nowrap; }
  html body.page-365 #results .ripple__title::after { width: 0.7rem; height: 0.7rem; top: 50%; bottom: auto; transform: translateY(-50%); }
  html body.page-365 #results .ripple__item--left .ripple__title::after { right: calc(-1 * var(--gap) - 0.7rem); }
  html body.page-365 #results .ripple__item--right .ripple__title::after { left: calc(-1 * var(--gap) - 0.7rem); }
}
@media (min-width: 54.01rem) and (max-width: 78rem) {
  html body.page-365 #results .ripple__title,
  html body.page-365 #results .ripple__desc { white-space: normal; }
  html body.page-365 #results .ripple__item { max-width: 15rem; }
}