/* Home page — layout pieces unique to this page (page-scoped: this file loads only on the Home page) */

/* ---------- Rhythm: the design is a dense page; sections sit close together ---------- */
#main > .section { padding-block: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
#main > .section--tight { padding-block: clamp(1rem, .8rem + .6vw, 1.35rem); }
#main .section-head h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.85rem); }
#main .section-head { margin-bottom: 1rem; align-items: center; }
#main .section-head p { margin-top: .15rem; font-size: .95rem; }
#main .link-pill { border: 0; padding: 0; background: none; font-size: .85rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--green-200); }

/* ---------- Hero ---------- */
.hero--bleed .hero__script { top: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 4vw, 4rem); }
@media (min-width: 900px) {
  .hero--bleed .hero__inner { min-height: 0; padding-block: 2.4rem 2.6rem; }
  .hero--bleed .hero__copy { max-width: 600px; margin-left: 2.25rem; }
  .hero--bleed .eyebrow { margin-bottom: .5rem; }
  .hero--bleed .hero__title { font-size: clamp(2.4rem, 1.2rem + 2.6vw, 3.15rem); margin-bottom: .3em; }
  .hero--bleed .hero__lead { font-size: 1.08rem; line-height: 1.5; max-width: 33rem; margin: 0; }
  .hero--bleed .hero__actions { margin-top: 1.1rem; }
  .hero--bleed .hero__actions .btn--lg { min-height: 46px; padding: .55rem 1.6rem; font-size: .98rem; }
  .hero--bleed .hero__checks { margin-top: 1.4rem; font-size: .8rem; }
  .hero--bleed .hero__script { font-size: clamp(2.2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.02; right: clamp(1rem, 5vw, 5.5rem); top: 2rem; }
}
.hero__checks .icon { width: 20px; height: 20px; fill: var(--green-600); stroke: #fff; stroke-width: 1.4; }

/* ---------- Stats: bare filled icons like the design ---------- */
.home-stats .trust-strip__list { padding-block: .95rem; }
.home-stats .trust-item__icon { width: 42px; height: 42px; background: none; box-shadow: none; color: var(--green-600); }
.home-stats .trust-item__icon .icon { width: 36px; height: 36px; fill: currentColor; stroke: var(--mint-50); stroke-width: 1.4; }
.home-stats .stat__value, .home-stats .stat__value.ph { font-size: 1.4rem; }
.home-stats .trust-item__title { font-size: .9rem; }
.home-stats .trust-item__text { font-size: .76rem; }

/* ---------- Categories: photo fills the right of the card and fades behind the text ---------- */
.home-cats { list-style: none; padding: 0; margin: 0; gap: 1.1rem; }
.home-cats .cat-card { min-height: 168px; isolation: isolate; }
.home-cats .cat-card .card__body { flex: 0 0 64%; max-width: 64%; padding: .9rem .75rem .9rem .9rem; gap: .2rem; }
.home-cats .cat-card__img { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: -1; }
.home-cats .cat-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .6) 28%, rgba(255, 255, 255, 0) 62%); }
.home-cats .cat-card__icon { width: 30px; height: 30px; margin-bottom: .35rem; }
.home-cats .card__title { font-size: .95rem; line-height: 1.2; }
.home-cats .card__text { font-size: .74rem; line-height: 1.38; }
.home-cats .circle-arrow { width: 26px; height: 26px; margin-top: auto; }
/* multicolour category icons, as in the design */
.home-cats li:nth-child(1) .cat-card__icon { color: var(--green-600); }
.home-cats li:nth-child(2) .cat-card__icon { color: var(--orange-500); }
.home-cats li:nth-child(3) .cat-card__icon { color: #2a74c9; }
.home-cats li:nth-child(4) .cat-card__icon { color: var(--teal-700); }
.home-cats li:nth-child(5) .cat-card__icon { color: #5b54c8; }
.home-cats li:nth-child(6) .cat-card__icon { color: var(--gold-500); }
@media (min-width: 1100px) and (max-width: 1240px) { .home-cats { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Featured guides: wide, short photos ---------- */
.home-guides .card__media { aspect-ratio: 2.25 / 1; }
.home-guides .card__media img { object-position: 50% 30%; }
.home-guides .card__body { padding: .85rem 1rem 1rem; gap: .35rem; }
.home-guides .card__title { font-size: .98rem; }
.home-guides .card__text { font-size: .84rem; line-height: 1.45; }
.home-guides .card__foot { padding-top: .25rem; }
.home-guides .link-arrow { font-size: .85rem; }

/* ---------- Product picks ---------- */
.home-note { display: flex; gap: .45rem; align-items: flex-start; margin: -.35rem 0 .9rem; font-size: .74rem; line-height: 1.45; color: var(--muted); }
.home-note .icon { flex: none; width: 14px; height: 14px; margin-top: .12rem; color: var(--teal-800); }
.home-note a { color: var(--teal-800); text-decoration: underline; }
.home-picks { gap: 1.1rem; }
.home-picks .card__media { aspect-ratio: auto; height: 132px; }
.home-picks .card__media img { padding: .7rem; }
.home-picks .card__body { padding: .55rem .9rem .9rem; gap: .25rem; }
.home-picks .card__title { font-size: .92rem; line-height: 1.25; }
.home-picks .rating { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .76rem; }
.home-picks .card__foot { padding-top: .45rem; }
.home-picks .btn { border-radius: 6px; min-height: 36px; padding-block: .4rem; font-size: .84rem; gap: .4rem; }
@media (max-width: 599px) {
  .home-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .home-picks li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .375rem); }
  .home-picks .card__body { padding: .6rem .75rem .8rem; }
  .home-picks .card__title { font-size: .86rem; }
  .home-picks .btn { font-size: .78rem; padding-inline: .4rem; }
}

/* ---------- Reviews & comparisons ---------- */
.home-reviews { display: grid; gap: 1.1rem; }
@media (min-width: 1000px) { .home-reviews { grid-template-columns: 1.2fr 1fr .95fr; } }
.home-review .card__body, .home-compare .card__body { gap: .45rem; padding: .9rem 1rem 1rem; }
.home-review .badge, .home-compare .badge { align-self: flex-start; }
.home-review__row { display: grid; grid-template-columns: 132px 1fr; gap: .9rem; align-items: center; margin-top: .35rem; }
.home-review__row img { width: 132px; height: 140px; object-fit: cover; border-radius: var(--radius-sm); }
.home-review .card__title, .home-compare .card__title { font-size: 1rem; }
.home-review .card__text { font-size: .8rem; line-height: 1.45; margin: .3rem 0 .45rem; }
.home-review .rating, .home-roundup .rating { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .76rem; }
.home-review .link-arrow, .home-compare .link-arrow { font-size: .85rem; }
.home-compare .card__body { text-align: center; align-items: center; }
.home-compare .card__text { font-size: .82rem; }
.home-compare__products { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: 100%; margin: .15rem 0 .25rem; }
.home-compare__products img { width: 100%; height: 92px; object-fit: contain; }

/* roundups: one card, three rows separated by lines */
.home-roundups > ul { list-style: none; margin: 0; padding: .15rem .9rem; display: flex; flex-direction: column; height: 100%; }
.home-roundup { position: relative; flex: 1; display: grid; grid-template-columns: 70px minmax(0, 1fr) 16px; gap: .8rem; align-items: center; padding: .6rem 0; }
.home-roundup + .home-roundup { border-top: 1px solid var(--line); }
.home-roundup img { width: 70px; height: 56px; object-fit: cover; border-radius: 8px; }
.home-roundup__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.home-roundup .card__title { font-size: .86rem; line-height: 1.25; }
.home-roundup .link-arrow { font-size: .8rem; position: relative; z-index: 2; }
.home-roundups__chev { width: 16px; height: 16px; color: var(--ink); }

@media (max-width: 599px) {
  .home-review__row { grid-template-columns: 1fr; }
  .home-review__row img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

/* ---------- Lead magnet band ---------- */
@media (min-width: 960px) {
  .home-lead.lead-band { grid-template-columns: 170px minmax(0, 1.75fr) minmax(0, .85fr); gap: 2rem; padding: 1.1rem 2rem 1.1rem 1.5rem; }
  .home-lead .lead-band__perks { border-left: 1px solid var(--line); padding-left: 1.75rem; }
}
.home-lead .book { width: min(150px, 50vw); }
.home-lead .eyebrow { margin-bottom: .3rem; font-size: .7rem; }
.home-lead h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.45rem); margin-bottom: .3rem; }
.home-lead .muted { font-size: .88rem; line-height: 1.5; margin: 0 0 .75rem; }
.home-lead .inline-form input[type="email"], .home-lead .inline-form .btn { height: 46px; }
.home-lead .check-inline { margin-top: .6rem; font-size: .78rem; }
.home-lead .lead-band__perks { gap: .65rem; font-size: .88rem; }
.home-lead .lead-band__perks .icon { width: 24px; height: 24px; }

/* ---------- How we review ---------- */
#main > .home-sec-process { padding-block: 1.6rem 1.75rem; }
.home-sec-process .section-head { margin-bottom: 1.1rem; }
.home-sec-process .section-head p { font-size: .9rem; }
.home-steps { gap: 1.25rem; }
.home-steps .step { gap: .8rem; align-items: center; }
.home-steps .step__icon { width: 50px; height: 50px; background: var(--green-600); color: #fff; }
.home-steps .step__icon .icon { width: 24px; height: 24px; }
.home-steps .step h3 { font-size: .92rem; margin-bottom: .15rem; }
.home-steps .step p { font-size: .8rem; line-height: 1.45; }
@media (min-width: 1000px) {
  .home-steps { grid-template-columns: repeat(4, 1fr); }
  .home-steps .step { position: relative; }
  .home-steps .step:not(:last-child)::after {
    content: "\2192"; position: absolute; right: -1.05rem; top: 50%; transform: translateY(-50%);
    font-size: 1.1rem; line-height: 1; color: var(--green-600);
  }
}

/* ---------- Community (dark band) ---------- */
.community { padding-block: 1.35rem; }
.community .community__inner { position: relative; z-index: 1; }
@media (min-width: 900px) { .community__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; } }
.community .inline-form input[type="email"], .community .inline-form .btn { height: 46px; }
.community .check-inline { gap: .35rem 1rem; font-size: .76rem; }
.home-comm__leaf { width: 96px; opacity: .55; }
.home-comm__leaf.leaf-deco--left { left: -24px; bottom: -22px; }
.home-comm__leaf.leaf-deco--right { right: -24px; top: auto; bottom: -22px; }

/* ---------- Closing CTA band (leaves on the left, text + button on one row) ---------- */
#main > .home-sec-cta { padding-block: 1.25rem 2rem; }
.home-sec-cta .cta-band { padding: 1.25rem; }
.home-sec-cta .cta-band > div { position: relative; z-index: 1; flex: 1 1 100%; min-width: 0; }
.home-sec-cta .cta-band h2 { text-wrap: wrap; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.38rem); }
.home-sec-cta .cta-band p { font-size: .9rem; }
.home-cta__leaves { width: 135px; left: 1.5rem; bottom: -30px; filter: brightness(.62) saturate(1.2); opacity: .95; }
@media (min-width: 900px) {
  .home-sec-cta .cta-band { flex-wrap: nowrap; padding: 1.15rem 2.5rem 1.15rem 10.5rem; }
  .home-sec-cta .cta-band > div { flex: 1 1 0; }
  .home-sec-cta .cta-band .btn { flex: none; }
}
@media (max-width: 899px) { .home-cta__leaves, .home-comm__leaf { display: none; } }

/* ---------- Refinements (after side-by-side checks) ---------- */
.home-cats .cat-card { border-color: transparent; box-shadow: 0 4px 16px rgba(15, 47, 54, .08); }
.home-cats .cat-card .card__body { padding-top: 1.05rem; }
.home-cats .cat-card__img { width: 54%; }
.home-cats .cat-card__img::after { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .75) 30%, rgba(255, 255, 255, 0) 66%); }
.home-cats .cat-card__icon { width: 32px; height: 32px; stroke-width: 2.3; }
.home-cats li:is(:nth-child(1), :nth-child(2), :nth-child(5)) .cat-card__icon { fill: currentColor; stroke: #fff; stroke-width: 1.3; }

.home-sec-picks.section--mint { background: linear-gradient(180deg, #edf5ea 0%, #f3f8f1 70%, #f7faf5 100%); }
.home-picks { list-style: none; padding: 0; margin: 0; }
.home-picks .card__media { height: 140px; }
.home-picks .card__media img { padding: .35rem; }

.home-review__row { margin-block: auto; }
.home-review .card__body > *, .home-roundup__body > * { margin: 0; }
.home-review .card__text { margin: .35rem 0 .5rem; }
.home-roundup { padding: .5rem 0; }
.home-roundup .card__title { font-size: .84rem; }
.home-roundup .rating { font-size: .72rem; }
.home-roundup .stars .icon { width: 13px; height: 13px; }

.home-sec-process.section--soft { background: linear-gradient(180deg, #eef5eb, #f3f8f1); }
.home-steps .step h3 { text-wrap: wrap; }
@media (min-width: 1000px) {
  .home-steps { column-gap: 1.9rem; }
  .home-steps .step:not(:last-child)::after { right: -1.4rem; }
  .home-steps .step__icon { width: 46px; height: 46px; }
}

/* ---------- density pass (keeps body text >= 11.5px) ---------- */
@media (min-width: 900px) { .hero--bleed .hero__inner { padding-block: 2.1rem 2.3rem; } }
.home-picks .card__media { height: 126px; }
#main > .home-sec-picks { padding-block: 1.75rem 1.9rem; }
@media (min-width: 1000px) { .home-reviews { grid-template-columns: 1.15fr 1fr 1.05fr; } }
#main > .home-sec-reviews { padding-block: 1.75rem 1.25rem; }
.home-sec-process .section-head { margin-bottom: .9rem; }
.home-sec-process .section-head h2 { margin-bottom: 0; }
.home-sec-process .section-head p { margin-top: .1rem; }
@media (min-width: 900px) {
  .community__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; }
  .community p { font-size: .88rem; }
  .community .check-inline { font-size: .72rem; gap: .3rem .85rem; }
}

/* ---------- clarified-rubric pass ---------- */
/* solid category icons (design): fill the closed shapes of the remaining line icons */
.home-cats li:nth-child(3) .cat-card__icon rect,
.home-cats li:nth-child(4) .cat-card__icon path:nth-of-type(-n+2),
.home-cats li:nth-child(6) .cat-card__icon circle { fill: currentColor; }
/* lead band: bigger book that bleeds past the band edges, as in the design */
@media (min-width: 960px) {
  .home-lead.lead-band { grid-template-columns: 185px minmax(0, 1.6fr) minmax(0, 1fr); padding-block: .9rem; }
  .home-lead .book { width: 172px; margin-block: -1.9rem -2.4rem; }
}