/* Home page only (every rule is scoped to a home section). Loaded after styles.css, features.css and pages.css.
   Jobs: shorter page (tighter sections, merged blocks), the Plus line, the hero chips, no single words on a last line. */

/* ---- No single word alone on a line: balanced headings and short blocks, pretty everything else ---- */
[data-section^="home."] :is(h1, h2, h3, h4) { text-wrap: balance; }
[data-section^="home."] :is(p, li, blockquote, figcaption, dd) { text-wrap: pretty; }
[data-section^="home."] :is(.sp-line, .lead, .world__note, .hstep__txt p, .day__body, .pil__copy p, .every__notes p, .every__g,
  .voice blockquote p, .counter span, .finder__feat p, .showcase__step .lead, .sp-plus, .hero__fine, .scope__row, .problem__body p) { text-wrap: balance; }

/* ---- Tighter rhythm between sections ---- */
.section[data-section^="home."], [data-section^="home."].section { padding-block: clamp(1.5rem, 4vw, 3.3rem); }
.section--tight[data-section^="home."] { padding-block: clamp(1.2rem, 2.6vw, 2rem); }
[data-section^="home."] .section-head { margin-bottom: var(--s-5); }
.hero[data-section="home.hero"] { padding-top: clamp(1.6rem, 4vw, 3.4rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero__world { margin-top: clamp(var(--s-4), 3vw, var(--s-6)); }

/* ---- Hero chips: one shared width, never more than two lines, never clipped ---- */
.hero__chips .drift { width: 100%; max-width: 13rem; min-width: 0; box-sizing: border-box; }
@media (min-width: 70rem) {
  .hero__stage { grid-template-columns: var(--hero-phone) minmax(10.5rem, 1fr); }
  .hero__chips { align-items: flex-start; }
  .hero__chips .drift { align-items: center; overflow-wrap: anywhere; }
}
@media (max-width: 69.99rem) {
  .hero__chips .drift { width: auto; max-width: min(100%, 15rem); }
}

/* ---- Problem: smaller headline, shorter threads ---- */
.night > .section[data-section="home.problem"] { padding-top: clamp(1.8rem, 4vw, 3rem); padding-bottom: clamp(0.8rem, 2vw, 1.4rem); }
[data-section="home.problem"] .bigtype { font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.6rem); }
[data-section="home.problem"] .stack--lg { margin-top: var(--s-5); }
[data-section="home.problem"] .mt-6 { margin-top: var(--s-4); }
.problem__threads { height: clamp(6.5rem, 18vw, 11.5rem); margin-top: var(--s-4); }

/* ---- How it works: compact cards (art, then icon + title + number, then text); two wide rows on large screens ---- */
.hsteps { gap: var(--s-4) var(--s-5); }
.hstep { grid-row: auto; grid-template-rows: none; align-content: start; row-gap: var(--s-3); margin-bottom: 0; padding: var(--s-3); }
.hstep__art { padding: var(--s-2) var(--s-3); }
.hstep__head { display: flex; align-items: center; gap: 0.55rem; margin: 0; }
.hstep__head h3 { flex: 1; min-width: 0; margin: 0; }
.hstep__head .icon-bubble { flex: none; width: 2.5rem; height: 2.5rem; }
.hstep__head .icon-bubble .icon { width: 1.3rem; height: 1.3rem; }
.hstep__no { flex: none; font-size: var(--fs-base); }
[data-section="home.how"] .hstep__head h3 { font-size: var(--fs-lg); line-height: 1.2; text-wrap: pretty; }
.hstep__txt p { margin-top: 0.5rem; }
@media (min-width: 64rem) {
  .hsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsteps > .hstep:last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (min-width: 72rem) {
  .hstep { grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--s-4); align-items: center; }
}
@media (max-width: 39.99rem) {
  .hsteps { gap: var(--s-3); }
  .hstep { padding: var(--s-2); row-gap: var(--s-2); }
  .hstep__txt { padding: 0 var(--s-2) var(--s-2); }
}
[data-section="home.how"] .mt-6 { margin-top: var(--s-5); }

/* ---- A typical day ---- */
.day__beat { padding-bottom: var(--s-4); }
@media (max-width: 39.99rem) { .day__beat { padding-bottom: var(--s-3); row-gap: 0.2rem; } }

/* ---- Spark and Perfect day: tighter rows, and the Plus line is one inline paragraph (icon, sentence, link) ---- */
.sp-rows { gap: var(--s-6); }
.sp-row { gap: var(--s-4) var(--s-7); }
.sp-row .scene { padding: var(--s-5) var(--s-4); }
.sp-row .phone { --phone-w: var(--phone-w-base); }
.sp-row .phone--fit .phone__screen { min-height: calc(var(--phone-w) * 1.45); }
.sp-copy { gap: var(--s-2); }
.sp-plus { display: block; margin: var(--s-2) 0 0; }
.sp-plus::before { content: none; }
.sp-plus__ic { color: var(--plus-ink); margin-right: 0.45rem; }
.sp-plus a { white-space: nowrap; }
@media (max-width: 39.99rem) { .sp-row .phone { --phone-w: var(--phone-w-md); } .sp-row .scene { padding: var(--s-4) var(--s-3); } }

/* ---- Finder: shorter panel ---- */
.finder__panel-in { padding: var(--s-5); }
.finder__feats { gap: var(--s-3); }
.finder__result .stack--lg > * + * { margin-top: var(--s-3); }
.finder__opt { min-height: 3.1rem; padding: 0.55rem 1rem; }
@media (min-width: 56rem) { .finder__result { gap: var(--s-6); } }
@media (max-width: 55.99rem) {
  .finder__demo .phone { --phone-w: min(16.5rem, calc(100vw - 6.5rem)); }
  .finder__demo { padding: var(--s-3); }
  .finder__panel-in { padding: var(--s-4); }
}
[data-section="home.finder"] .mt-6 { margin-top: var(--s-4); }

/* ---- All genders band ---- */
.every { padding: var(--s-5) var(--s-4); gap: var(--s-4); }
.every__ic { width: 3.6rem; height: 3.6rem; }
.every__ic .gi { width: 2.1rem; height: 2.1rem; }
.every__icons { gap: var(--s-4) var(--s-3); }

/* ---- Showcase: short steps, no repeated counter row beside the index, a compact counter grid on phones ---- */
.showcase--side .showcase__step { min-height: 0; padding-block: var(--s-4); }
.showcase--side .showcase__step .lead { font-size: var(--fs-base); }
.showcase--side .showcase__step h3 { font-size: var(--fs-xl); }
@media (min-width: 64rem) {
  .showcase--side .showcase__step { min-height: 10.5rem; display: grid; align-content: center; }
  [data-section="home.showcase"] > .container > .counters { display: none; }
}
@media (max-width: 63.99rem) {
  [data-section="home.showcase"] > .container > .counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: var(--s-4); }
  [data-section="home.showcase"] > .container > .counters .counter { max-width: none; padding: 0.5rem 0.6rem; }
  [data-section="home.showcase"] > .container > .counters .counter b { font-size: 1.5rem; }
  [data-section="home.showcase"] > .container > .counters .counter span { font-size: var(--fs-xs); line-height: 1.25; }
  .showcase--side .showcase__step { padding-block: var(--s-3); }
}
[data-section="home.showcase"] .mt-6 { margin-top: var(--s-4); }

/* ---- What couples say: even grid, tighter cards ---- */
[data-section="home.voices"] .voices { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
[data-section="home.voices"] .voice { display: block; margin: 0; padding: var(--s-4); }
[data-section="home.voices"] .voice__top { margin-bottom: var(--s-3); }
[data-section="home.voices"] .voice blockquote p, [data-section="home.voices"] .voice--lead blockquote p { font-size: var(--fs-lg); line-height: 1.35; }
[data-section="home.voices"] .voice figcaption { margin-top: var(--s-3); }
@media (min-width: 40rem) { [data-section="home.voices"] .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 64rem) { [data-section="home.voices"] .voices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 76rem) { [data-section="home.voices"] .voices { grid-template-columns: repeat(4, minmax(0, 1fr)); } [data-section="home.voices"] .voice { padding: var(--s-4) var(--s-4); } }

/* ---- Threads (map beside the words) and Private ---- */
.thr { display: grid; gap: var(--s-4); align-items: center; }
.thr__copy .section-head { margin-bottom: var(--s-3); max-width: none; }
.thr__copy > p { margin-top: var(--s-3); }
.thr__map .threads-wide { margin-inline: auto; max-width: 100%; }
.thr__map .small { margin-top: var(--s-2); }
@media (min-width: 64rem) { .thr { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-7); } }
[data-section="home.private"] .split { gap: var(--s-5) var(--s-7); }
[data-section="home.private"] .stack--lg > * + * { margin-top: var(--s-3); }

/* ---- What Intimate does: four compact cards, each with a cropped phone ---- */
.pils { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .pils { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pils { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
.pil { display: grid; gap: var(--s-3); align-content: start; }
.pil .scene { display: block; min-height: 0; height: 11rem; padding: var(--s-4) var(--s-3) 0; text-align: center; }
.pil .scene .phone { --phone-w: min(15rem, 100%); margin: 0 auto; }
@media (min-width: 64rem) { .pil .scene { height: 13rem; } }
.pil__copy > * + * { margin-top: 0.4rem; }
.pil__h { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-card); line-height: 1.2; }
.pil__copy p:not(.pillar__no) { font-size: var(--fs-base); color: var(--ink-2); }

/* ---- Closing band ---- */
[data-section="home.cta"] .cta-band { padding-block: var(--s-5); }

/* ==== Phones: the page was about 38 screens tall; these rules take out repeats and slack ==== */
@media (max-width: 39.99rem) {
  /* hero: a smaller phone, no flag row (the world card below says the same) */
  .hero[data-section="home.hero"] { --hero-phone: var(--phone-w-sm); }
  .hero__world-line .flags { display: none; }
  .hero__world-line { margin-top: var(--s-3); }
  .hero__copy > * + * { margin-top: var(--s-3); }
  .hero__aside { margin-top: var(--s-3); }
  /* Spark and Perfect day: the three chips repeat the three lines, and one button is enough between the two */
  .sp-chips { display: none; }
  .sp-row--spark .sp-copy .cluster { display: none; }
  .sp-row .scene { padding: var(--s-3); }
  /* How it works: a slightly smaller picture */
  .hstep__art { max-width: 17rem; margin-inline: auto; width: 100%; }
  /* Finder: the phone is cropped like the showcase phone */
  .finder__demo .phone { aspect-ratio: 9 / 12; --phone-w: min(15.5rem, calc(100vw - 6.5rem)); }
  .finder__demo .phone__body { border-radius: 3.4em 3.4em 0 0; padding-bottom: 0; }
  .finder__demo .phone__screen { border-radius: 2.95em 2.95em 0 0; }
  .finder__demo .app-tabs { display: none; }
  .finder__demo { padding: var(--s-3) var(--s-3) 0; align-items: end; }
  /* What Intimate does */
  .pil .scene { height: 9rem; }
  .pils { gap: var(--s-5); }
  /* What couples say */
  [data-section="home.voices"] .voice { padding: var(--s-3) var(--s-4); }
  [data-section="home.voices"] .voice blockquote p, [data-section="home.voices"] .voice--lead blockquote p { font-size: var(--fs-base); line-height: 1.4; }
  [data-section="home.voices"] .voice__top { margin-bottom: var(--s-2); }
  [data-section="home.voices"] .voice figcaption { margin-top: var(--s-2); }
  /* Private */
  [data-section="home.private"] .scope { gap: 0.4rem; }
}
@media (max-width: 39.99rem) {
  /* A typical day: two columns of label + title (the full sentence of each beat is in How it works just above) */
  .day { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-3); }
  .day__beat { grid-row: auto; grid-template-rows: none; padding: 0 0 0.2rem 1.9rem; }
  .day__beat::before { display: none; }
  .day__body { display: none; }
  .day__dot { width: 0.95rem; height: 0.95rem; top: 0.35rem; }
  .day__label { font-size: var(--fs-xs); }
  .day__title { font-size: var(--fs-lg); }
  /* Showcase steps and counters */
  .showcase--side .showcase__step { padding-block: 0.8rem; }
  .showcase--side .showcase__step > * + * { margin-top: 0.3rem; }
  .showcase--side .showcase__step .lead { font-size: var(--fs-sm); line-height: 1.45; }
  [data-section="home.showcase"] > .container > .counters { gap: 0.4rem; margin-bottom: var(--s-3); }
  [data-section="home.showcase"] > .container > .counters .counter { padding: 0.4rem 0.55rem; }
  [data-section="home.showcase"] > .container > .counters .counter b { font-size: 1.35rem; }
  /* Finder options */
  .finder__opt { min-height: 2.7rem; padding: 0.4rem 0.9rem; font-size: var(--fs-sm); }
  .finder__opts { gap: 0.4rem; }
}
@media (max-width: 39.99rem) {
  .hero .hero__stage { --hero-phone: var(--phone-w-sm); }
  .world .clocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world .clocks__thread { display: none; }
  .world { padding: var(--s-4); gap: var(--s-3); }
}
@media (max-width: 39.99rem) {
  .sp-row .scene { max-height: 29rem; align-items: start; }
  [data-section="home.private"] .scope__row { padding-block: 0.55rem; }
}

/* Spark and Perfect day chips: smaller, so the three sit in one row */
.sp-chips { gap: 0.4rem; }
.sp-chips li { padding: 0.25rem 0.7rem; font-size: var(--fs-xs); }
@media (max-width: 39.99rem) {
  .hstep__art { max-width: 15.5rem; padding: var(--s-2); }
  /* counters that repeat a step's own text are left out on phones */
  [data-section="home.showcase"] > .container > .counters .counter:nth-child(1),
  [data-section="home.showcase"] > .container > .counters .counter:nth-child(5),
  [data-section="home.showcase"] > .container > .counters .counter:nth-child(6),
  [data-section="home.showcase"] > .container > .counters .counter:nth-child(8) { display: none; }
  .pil .scene { height: 8rem; }
  .pils { gap: var(--s-4); }
  .finder__result .stack--lg > * + * { margin-top: var(--s-2); }
}