/* =====================================================================
   Before Starting a Business Together (/before-starting-a-business/) — same build as /intimacy/, /getting-married/ and /money/.
   Loads ../365/365.css + 365.refine.css; body class "page-365 365-page page-business".
   Accent = the deck's brand yellow (cover-before-starting-a-business is yellow) #FCBD4C, for fills AND accent text (her rule
   2026-10-23: brand yellow or blue only, no deep amber/brown). Ink on yellow fills.
   ===================================================================== */

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

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

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

/* 2 · "You don’t talk about your business." (365 #contrast layout) */
html body.page-business .business-under { margin: 0 0 1rem; font-weight: 600; color: var(--ink, #1A1A1A); }
html body.page-business #contrast .alone-close { color: var(--business-accent); }
html body.page-business #contrast .alone-chat__icon { background: var(--business-accent); color: var(--ink, #1A1A1A); }

/* 3 · "Introducing Intimacy Unlocked." (rc-cols) */
html body.page-business #real-conversations .rc-col__title { color: var(--business-accent); }

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

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

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

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

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

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

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

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

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

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

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

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


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

/* =====================================================================
   12 · Her "same feedback as before having kids" fixes + the house spacing &
   type standard (projects/pick-one/design/standards/spacing-and-type.md).
   Desktop ≥1024 / mobile ≤600, linear in between. Hero untouched.
   ===================================================================== */
html body.page-business {
  --bz-h3: clamp(1.875rem, 0.99rem + 2.358vw, 2.5rem);       /* section headline 40 / 30 */
  --bz-h4: clamp(1.375rem, 0.844rem + 1.415vw, 1.75rem);     /* in-section headline 28 / 22 */
  --bz-h5: clamp(1.125rem, 0.948rem + 0.472vw, 1.25rem);     /* item title 20 / 18 */
  --bz-pad: clamp(2.5rem, 1.085rem + 3.774vw, 3.5rem);       /* section padding 56 / 40 */
  --bz-content: clamp(2rem, 1.2925rem + 1.887vw, 2.5rem);    /* lead → content 40 / 32 */
  --bz-c-title: clamp(1.5rem, 0.7925rem + 1.887vw, 2rem);    /* contrast headline → first line 32 / 24 */
  --bz-c-para: clamp(1.25rem, 0.896rem + 0.943vw, 1.5rem);   /* contrast paragraph → paragraph 24 / 20 */
  --bz-c-close: clamp(2rem, 1.2925rem + 1.887vw, 2.5rem);    /* before the closing line 40 / 32 */
}

/* Section headlines (H3 size) */
html body.page-business :is(#contrast .alone-title, .section-header .section-title, .intro-game__title, #different .h-1, #just-one h2) {
  margin-top: 0;
  font-size: var(--bz-h3);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}
html body.page-business #real-conversations .section-header .section-title { font-size: var(--bz-h3); line-height: 1.1; }
/* Headline → lead 12 */
html body.page-business .section-header .section-title { margin-bottom: 0.75rem; }
html body.page-business .section-header .section-lead { margin-top: 0; margin-bottom: 0; }

/* In-section headlines (H4) and item titles (H5) */
html body.page-business :is(#real-conversations, #foundation) .rc-col__title { font-size: var(--bz-h4); line-height: 1.2; }
html body.page-business :is(.mcat__t, #makes-it-safe .safe-card__title, #pricing .pcard__name) {
  font-size: var(--bz-h5);
  line-height: 1.3;
}

/* Section padding 56 / 40, measured to the visible content */
html body.page-business :is(#contrast, #real-conversations, #question-deck, #the-game, #categories, #business-app, #results, #different, #makes-it-safe, #foundation, #pricing, #just-one):is(.section, .just-one-q) {
  padding-top: var(--bz-pad);
}
html body.page-business :is(#contrast, #real-conversations, #question-deck, #the-game, #categories, #results, #different, #makes-it-safe, #foundation, #pricing, #just-one):is(.section, .just-one-q) {
  padding-bottom: var(--bz-pad);
}
/* the reviews rail keeps 8px under the cards for their shadow */
html body.page-business #results.section { padding-bottom: calc(var(--bz-pad) - 8px); }
html body.page-business .section-header > :first-child,
html body.page-business .intro-game__copy > :first-child,
html body.page-business .alone-copy > :first-child,
html body.page-business .alone-chats > :first-child { margin-top: 0; }
html body.page-business .mcat:last-child { padding-bottom: 0; }
@media (min-width: 54.0625rem) {
  html body.page-business :is(#real-conversations, #foundation) .rc-col { padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 54rem) {
  html body.page-business :is(#real-conversations, #foundation) .rc-col:last-child { padding-bottom: 0; }
}

/* Lead → content (phone, cards, grid) 40 / 32 */
html body.page-business :is(#real-conversations, #question-deck, #categories, #business-app, #results, #foundation, #pricing) .section-header { margin-bottom: var(--bz-content) !important; } /* beats 365.refine !important */
html body.page-business :is(#real-conversations, #question-deck, #categories, #business-app, #results, #foundation, #pricing) .section-header + *,
html body.page-business .container:has(> .section-header:last-child) + :is(.business-app__inner, .qdeck) { margin-top: 0; }
html body.page-business #different .bridge-stage { margin-top: var(--bz-content); }

/* Fix 1 · #contrast text rhythm: 32 / 24 / 24 / 24 / 40 (24 / 20 / 20 / 20 / 32 on mobile) */
html body.page-business #contrast .alone-copy > * { margin-top: 0; margin-bottom: 0; }
html body.page-business #contrast#contrast .alone-copy > * + * { margin-top: var(--bz-c-para); }
html body.page-business #contrast#contrast .alone-copy > .alone-title + * { margin-top: var(--bz-c-title); }
html body.page-business #contrast#contrast .alone-copy > .alone-close {
  margin-top: var(--bz-c-close);
  font-size: var(--bz-h4);
  line-height: 1.2;
}

/* Fix 2 · #question-deck header: headline one sentence per line, lead two even lines, no width caps */
html body.page-business #question-deck .section-header,
html body.page-business #question-deck .section-header .section-title,
html body.page-business #question-deck .section-header .section-lead { max-width: none !important; width: 100%; margin-inline: auto; }
html body.page-business #question-deck .section-title .bz-line { display: block; }
html body.page-business #question-deck .section-header .section-lead { text-wrap: balance !important; }