/* Free Resources Hub — page layer on top of site.css */
/* ---- Hub building blocks (hub-*): hero extras, section heads, card variants, promos, newsletter card ---- */
.hub-hero .hero__inner { min-height: clamp(360px, 31vw, 470px); }
.hub-hero .hero__copy { max-width: 590px; }
.hub-hero .breadcrumb { margin-bottom: 1rem; }
.hub-hero .hero__title { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4rem); line-height: 1.05; }
.hub-hero .hero__title .accent--inline { display: inline; }
.hub-script { max-width: 17rem; text-align: center; line-height: 1.05; padding: 2.25rem 1.25rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9) 70%, rgba(255, 255, 255, 0) 100%); }
.hub-hero.hero--bleed .hero__bg::after { background: linear-gradient(90deg, rgba(250, 252, 249, .97) 0%, rgba(250, 252, 249, .92) 40%, rgba(250, 252, 249, .4) 56%, rgba(250, 252, 249, 0) 70%); }
@media (max-width: 899px) { .hub-hero.hero--bleed .hero__bg::after { background: linear-gradient(180deg, rgba(250, 252, 249, 0) 55%, rgba(250, 252, 249, 1) 100%); } }
.hub-feats { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; }
.hub-feats li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 500; color: var(--ink); line-height: 1.3; max-width: 10.5rem; }
.hub-feats .icon { width: 34px; height: 34px; color: var(--green-700); }

.hub-h2 { margin: 0; }
.hub-h2--line { display: flex; align-items: center; gap: 1rem; }
.hub-h2--line::after { content: ""; flex: none; width: 46px; height: 3px; border-radius: 2px; background: var(--green-600); }
.hub-h2--under::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--green-600); margin-top: .55rem; }
.hub-head-icon { display: flex; align-items: center; gap: .9rem; }
.hub-head-icon__icon { width: 44px; height: 44px; color: var(--green-700); }
.hub-list { list-style: none; padding: 0; margin: 0; }

/* Category card: picture on top, centred copy, soft "Explore" chip */
.hub-cat .card__media { aspect-ratio: 4 / 3; }
.hub-cat .card__body { align-items: center; text-align: center; gap: .35rem; }
.hub-cat .card__title { font-size: 1rem; }
.hub-cat .card__text { font-size: .82rem; }
.hub-chip-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding: .4rem 1.1rem; border-radius: var(--radius-sm); background: var(--green-100); color: var(--green-800); font-weight: 600; font-size: .85rem; position: relative; z-index: 2; }
.hub-chip-link .icon { width: 1em; height: 1em; }
.hub-cat .hub-chip-link { margin-top: .5rem; }

/* Product cards */
.hub-products .product-card .card__media img { padding: .75rem; }
.hub-products .product-card .card__media .badge { border-radius: var(--radius-pill); text-transform: none; letter-spacing: 0; font-size: .74rem; }
.hub-products--center .card__body { align-items: center; text-align: center; }
.hub-products .card__text { font-size: .85rem; }

/* Comparison + buying-guide promo panels */
.hub-promos { display: grid; gap: 1.25rem; }
@media (min-width: 980px) { .hub-promos { grid-template-columns: 1fr 1fr; } }
.hub-promo { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1rem, .8rem + 1vw, 1.35rem); border-radius: var(--radius-lg); background: #eef6fb; border: 1px solid #dbe9f3; }
.hub-promo__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .85rem; align-items: start; }
.hub-promo__head > .icon { width: 40px; height: 40px; color: #1f6fb8; grid-column: 1; grid-row: 1 / span 3; }
.hub-promo__head h2 { grid-column: 2; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); margin: 0; }
.hub-promo__head p { grid-column: 2; margin: 0; font-size: .85rem; color: var(--muted); }
.hub-promo__head .link-arrow { grid-column: 2; grid-row: 3; font-size: .82rem; color: #1f6fb8; }
@media (min-width: 560px) {
  .hub-promo__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hub-promo__head > .icon { grid-row: 1 / span 2; }
  .hub-promo__head .link-arrow { grid-column: 3; grid-row: 1; padding-top: .3rem; }
  .hub-promo__head p { grid-column: 2 / span 2; grid-row: 2; }
}
.hub-promo__body { position: relative; display: grid; gap: 1rem; padding: .85rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-xs); }
@media (min-width: 560px) { .hub-promo__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; } }
.hub-promo__media { border-radius: var(--radius-sm); overflow: hidden; min-height: 200px; background: var(--mint-50); }
.hub-promo__media img { width: 100%; height: 100%; object-fit: cover; }
.hub-kicker { margin: 0; font-size: .76rem; font-weight: 600; color: var(--green-700); }
.hub-promo__body h3 { font-size: 1.15rem; margin: .1rem 0 .6rem; }
.hub-promo__body h3 a { color: inherit; text-decoration: none; }
.hub-promo__body .check-list { gap: .3rem; margin-bottom: .9rem; }
.hub-promo__body .check-list li { font-size: .86rem; }

/* Latest articles + newsletter card */
.hub-split { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .hub-split { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; } }
.hub-articles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.hub-article .card__media { aspect-ratio: 16 / 10; }
.hub-article .card__body { padding: .75rem .85rem .9rem; gap: .35rem; }
.hub-article .card__title { font-size: .9rem; }
.hub-meta { flex-direction: column; gap: .15rem; }
.hub-meta .icon { width: 1em; height: 1em; }
.card__meta .icon { width: 1em; height: 1em; }

.hub-news { position: relative; overflow: hidden; display: grid; gap: 1rem; padding: clamp(1.1rem, .9rem + 1vw, 1.5rem); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--mint-50), #fff 70%); border: 1px solid var(--mint-100); }
.hub-news__head { display: flex; gap: .85rem; align-items: flex-start; position: relative; z-index: 1; }
.hub-news__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green-700); color: #fff; }
.hub-news__icon .icon { width: 24px; height: 24px; }
.hub-news h2 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); margin: 0 0 .35rem; padding-right: 2.5rem; }
.hub-news p { margin: 0; font-size: .86rem; color: var(--muted); }
.hub-news .inline-form { position: relative; z-index: 1; }
.hub-news__leaf { position: absolute; right: -24px; top: -12px; width: 96px; opacity: .8; transform: scaleX(-1); pointer-events: none; }
.hub-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .82rem; color: var(--ink); }
.hub-checks li { display: inline-flex; align-items: center; gap: .35rem; }
.hub-checks .icon { color: var(--green-600); width: 1.05em; height: 1.05em; }

/* Small circle arrow and row variants */
.hub-circle { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); }
.hub-circle .icon { width: 15px; height: 15px; }

/* Process steps with arrows between them */
.hub-steps { margin-top: 1rem; }
.hub-steps .step__icon { background: var(--green-700); color: #fff; box-shadow: 0 0 0 6px var(--green-100); }
@media (min-width: 1000px) {
  .hub-steps { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; }
  .hub-steps .step { position: relative; }
  .hub-steps .step:not(:last-child)::after { content: ""; position: absolute; right: -1.45rem; top: 24px; width: 10px; height: 10px; border-top: 2px solid var(--teal-800); border-right: 2px solid var(--teal-800); transform: rotate(45deg); }
}

/* Placeholder values in narrow cards: break at spaces, keep stars on their own line */
#main .rating { flex-wrap: wrap; row-gap: .1rem; }
#main .rating .ph, #main .card__title .ph, #main .price .ph, #main .card__meta .ph { word-break: normal; overflow-wrap: anywhere; }
#main .card__title .ph { font-size: .82em; }
.hub-products--center .rating { flex-direction: column; }
#main > .section--tight + .section--tight { padding-top: .5rem; }

.fr-tight { padding-top: .5rem; }
.hub-hero .hero__lead { max-width: 29rem; }
.fr-leafy { background: linear-gradient(90deg, rgba(230, 242, 225, .6), #fff 7%, #fff 93%, rgba(230, 242, 225, .6)); }
.hub-feats .icon { width: 30px; height: 30px; }

/* Categories: 8 small tiles */
.fr-cats { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
@media (min-width: 1100px) { .fr-cats { grid-template-columns: repeat(8, 1fr); } }
.fr-cat .card__media { aspect-ratio: 4 / 3; margin: .45rem .45rem 0; border-radius: var(--radius-sm); }
.fr-cat .card__body { padding: .65rem .8rem .8rem; gap: .5rem; }
.fr-cat .card__title { font-size: .92rem; }
.fr-go { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--green-600); color: var(--green-700); display: grid; place-items: center; }
.fr-go .icon { width: 14px; height: 14px; }

/* Featured covers: CSS booklet on a mint stage */
.fr-cover__media { display: grid; place-items: center; padding: 1rem .75rem .5rem; background: linear-gradient(180deg, var(--mint-50), #fff); }
.fr-cover .book { width: min(150px, 78%); transform: perspective(900px) rotateY(-10deg) rotate(-2deg); }
.fr-cover .book__title { font-size: .95rem; }
.fr-cover .book__kicker { font-size: .6rem; }
.fr-cover .card__title { font-size: .95rem; }
.fr-cover .card__text { font-size: .8rem; }

/* Popular resources */
.fr-pops { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.fr-pop { flex-direction: row; gap: .8rem; padding: .8rem; }
.fr-pop__media { flex: 0 0 38%; }
.fr-pop__media img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; border-radius: var(--radius-sm); }
.fr-pop__body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.fr-pop .card__title { font-size: .92rem; }
.fr-pop .card__text { font-size: .78rem; }
.fr-pop .rating { flex-wrap: wrap; font-size: .72rem; }
.fr-pop .btn { margin-top: auto; align-self: flex-start; white-space: normal; }

/* Resources by goal */
.fr-goals__title { font-size: 1.3rem; padding-bottom: .5rem; border-bottom: 2px solid var(--green-200); }
.fr-goals ul { display: grid; }
.fr-goals li + li { border-top: 1px solid var(--mint-100); }
.fr-goals a { display: flex; align-items: center; gap: .75rem; padding: .7rem .25rem; color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; }
.fr-goals a:hover { color: var(--green-700); }
.fr-goal__icon { width: 26px; height: 26px; color: var(--green-700); }
.fr-goal__chev { width: 16px; height: 16px; margin-left: auto; color: var(--muted); }

/* Lead band + process */
.fr-lead .eyebrow { margin-bottom: .4rem; }
.fr-process__title { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.75rem); margin-bottom: 1.25rem; }
.fr-process__note { margin: 1.5rem auto 0; max-width: 60rem; }

/* Review fixes */
.fr-consent { margin: .6rem 0 0; font-size: .76rem; }
.fr-consent a { color: inherit; text-decoration: underline; }
@media (max-width: 480px) { .fr-cover .card__foot .btn { font-size: .78rem; padding-inline: .45rem; gap: .25rem; min-width: 0; } .fr-cover .card__foot .btn .icon { width: 14px; height: 14px; } }

/* ===== Push-to-95: match the design's density at desktop (design scaled to 1280: H1 ~54px, H2 ~28px, body 14-15px) ===== */
#main .link-pill { border: 0; background: none; padding: .35rem 0; min-height: 40px; color: var(--teal-800); text-decoration: underline; text-decoration-color: var(--green-600); text-underline-offset: 4px; font-size: .84rem; }
#main .link-pill:hover { color: var(--green-700); }
.hub-h2, .fr-goals__title { letter-spacing: -.015em; }
@media (min-width: 900px) {
  .hub-hero .hero__inner { min-height: 0; padding-block: 1.1rem 2rem; }
  .hub-hero .breadcrumb { margin-bottom: .9rem; }
  .hub-hero .hero__title { font-size: 3.45rem; line-height: 1; margin-bottom: .3em; }
  .hub-hero .hero__lead { font-size: 1rem; line-height: 1.5; max-width: 28.5rem; margin: 0; }
  .hub-hero .hero__actions { margin-top: 1.1rem; }
  .hub-hero .hub-feats { margin-top: 1.25rem; gap: .6rem 1.75rem; }
  .hub-hero .hub-feats li { font-size: .84rem; max-width: 10rem; }
  .hub-hero .hero__bg img { object-position: 62% 35%; }
  .hub-script { top: .75rem; right: 9%; font-size: 2.1rem; padding: 1.5rem 1rem; }
  .hub-h2 { font-size: 1.75rem; }
  .fr-leafy > .section--tight { padding-block: 1.6rem .4rem; }
  .fr-leafy .section-head { margin-bottom: .9rem; }
  /* categories */
  .fr-cat .card__media { aspect-ratio: 3 / 2; margin: .4rem .4rem 0; }
  .fr-cat .card__body { padding: .5rem .7rem .65rem; gap: .4rem; }
  .fr-cat .card__title { font-size: .88rem; line-height: 1.25; }
  .fr-go { width: 24px; height: 24px; }
  /* featured covers */
  .fr-covers { gap: .9rem; }
  .fr-cover__media { padding: .55rem .5rem .35rem; }
  .fr-cover .book { width: 122px; }
  .fr-cover .card__body { padding: .6rem .7rem .75rem; gap: .3rem; }
  .fr-cover .card__title { font-size: .88rem; }
  .fr-cover .card__text { font-size: .78rem; line-height: 1.4; }
  .fr-cover .card__foot { margin-top: .35rem; }
  .fr-cover .card__foot .btn { min-height: 36px; padding-block: .4rem; font-size: .82rem; border-radius: var(--radius-xs); }
  /* popular + sidebar */
  .fr-leafy .layout-sidebar { grid-template-columns: minmax(0, 1fr) 262px; gap: 1.5rem; }
  .fr-leafy > .section--tight:last-child { padding-bottom: 1.5rem; }
  .fr-pops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .fr-pop { gap: .7rem; padding: .6rem; }
  .fr-pop__media { flex: 0 0 104px; }
  .fr-pop__media img { min-height: 0; height: 128px; }
  .fr-pop__body { gap: .25rem; }
  .fr-pop .card__title { font-size: .86rem; line-height: 1.25; }
  .fr-pop .card__text { font-size: .76rem; line-height: 1.35; }
  .fr-pop .rating { font-size: .75rem; gap: .3rem; }
  .fr-pop .stars .icon { width: 12px; height: 12px; }
  .fr-pop .btn { min-height: 32px; padding: .35rem .8rem; font-size: .78rem; border-radius: var(--radius-xs); margin-top: .3rem; }
  .fr-goals { padding: 1rem 1.1rem; }
  .fr-goals__title { font-size: 1.2rem; margin-bottom: .35rem; }
  .fr-goals a { padding: .55rem .15rem; font-size: .84rem; }
  .fr-goal__icon { width: 22px; height: 22px; }
  /* lead band */
  .fr-lead-sec.section--tight { padding-block: 1rem; }
  .fr-lead.lead-band { grid-template-columns: 230px minmax(0, 1.5fr) minmax(0, .9fr); padding: .9rem 2rem .9rem 1.25rem; gap: 2rem; }
  .fr-lead .book { width: 170px; }
  .fr-lead h2 { font-size: 1.5rem; margin-bottom: .3rem; }
  .fr-lead .muted { font-size: .9rem; line-height: 1.5; margin: 0 0 .7rem; }
  .fr-lead .inline-form input[type="email"], .fr-lead .inline-form .btn { height: 44px; }
  .fr-lead .check-inline { margin-top: .6rem; font-size: .78rem; }
  .fr-lead .lead-band__perks { gap: .9rem; font-size: .86rem; }
  .fr-consent { margin-top: .35rem; font-size: .75rem; }
  /* process */
  .fr-process.section--tight { padding-block: 1.2rem 1rem; }
  .fr-process__title { font-size: 1.45rem; margin-bottom: .8rem; }
  .fr-process .hub-steps { margin-top: 0; gap: 2.5rem; }
  .fr-process .step { gap: .75rem; }
  .fr-process .step__icon { width: 46px; height: 46px; box-shadow: 0 0 0 4px var(--green-100); }
  .fr-process .step__icon .icon { width: 22px; height: 22px; }
  .fr-process .step h3 { font-size: .92rem; margin-bottom: .1rem; }
  .fr-process .step p { font-size: .8rem; line-height: 1.4; }
  .fr-process .hub-steps .step:not(:last-child)::after { top: 18px; right: -1.6rem; }
  .fr-process__note { margin-top: .9rem; font-size: .75rem; }
}
.fr-lead__book { display: block; text-decoration: none; border-radius: 10px; }
.fr-lead__book:focus-visible { outline: 3px solid var(--green-600); outline-offset: 4px; }
.fr-lead .muted a { color: var(--green-700); font-weight: 600; }
@media (min-width: 700px) and (max-width: 899px) { .fr-pops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 999px) { .fr-leafy .layout-sidebar { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) {
  .hub-hero .hero__inner { padding-block: .5rem 1.5rem; }
  .hub-hero .hero__title { margin-bottom: .2em; }
  .hub-hero .hero__actions { margin-top: .9rem; }
  .hub-hero .hub-feats { margin-top: 1rem; }
  .fr-cat .card__media { aspect-ratio: 6 / 5; }
  .fr-cover .card__foot { margin-top: auto; padding-top: .35rem; }
  .fr-lead.lead-band { grid-template-columns: 250px minmax(0, 1.5fr) minmax(0, .9fr); padding-block: .75rem; overflow: hidden; }
  .fr-lead .book { width: 210px; margin: -2.4rem 0 -3.2rem .4rem; transform: perspective(900px) rotateY(-12deg) rotate(-7deg); }
  .fr-lead .book .book__title { font-size: 1.25rem; }
  .fr-lead .book .book__sub { font-size: 1.15rem; }
}
.fr-lead__side { display: grid; gap: 1rem; align-content: center; }
.fr-lead__guide { font-size: .86rem; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.fr-lead__guide .icon { width: 1em; height: 1em; flex: none; }
.fr-pop .rating { flex-wrap: nowrap; }
@media (min-width: 900px) {
  .hub-hero .hero__inner { padding-block: .4rem 1.25rem; }
  .hub-hero .hub-feats { margin-top: .85rem; }
  .fr-cat .card__body { padding: .4rem .65rem .5rem; gap: .3rem; }
  .fr-cat .card__title { line-height: 1.2; }
  .fr-cover .book { width: 114px; }
  .fr-lead.lead-band { grid-template-columns: 240px minmax(0, 1.9fr) minmax(0, .85fr); gap: 1.75rem; }
  .fr-lead .lead-band__perks { gap: .75rem; }
  .fr-lead__side { gap: .6rem; }
  .fr-lead__guide { min-height: 0; }
  .fr-process .hub-steps { gap: 2.25rem; }
  .fr-process .step p { font-size: .78rem; }
  .fr-process__note { max-width: 78rem; margin-top: .75rem; }
  .fr-process.section--tight { padding-block: 1.1rem .9rem; }
}
#main .fr-pop .rating { flex-wrap: nowrap; }
@media (min-width: 900px) {
  .fr-lead.lead-band { grid-template-columns: 230px minmax(0, 1.65fr) minmax(0, 1fr); padding-block: .6rem; }
  .fr-lead-sec.section--tight { padding-block: .75rem; }
  .fr-lead .eyebrow { margin-bottom: .25rem; }
  .fr-lead .muted { margin-bottom: .6rem; }
  .fr-lead .check-inline { margin-top: .5rem; }
  .fr-lead .lead-band__perks { font-size: .84rem; gap: .65rem; }
  .fr-lead .lead-band__perks .icon { width: 22px; height: 22px; }
  .fr-pop { padding: .55rem; }
  .fr-pop .btn { margin-top: .2rem; }
  .fr-leafy .section-head { margin-bottom: .75rem; }
  .fr-leafy > .section--tight { padding-block: 1.4rem .3rem; }
}
@media (min-width: 900px) {
  .fr-pop .stars .icon { width: 11px; height: 11px; }
  #main .fr-pop .rating { gap: .25rem; }
  .fr-cover .card__body { padding-inline: .6rem; }
  .fr-cover .card__title { font-size: .8rem; letter-spacing: -.01em; }
  .fr-cover .card__text { font-size: .76rem; line-height: 1.38; }
}
@media (min-width: 900px) {
  .hub-hero .hero__title { font-size: 3.3rem; }
  .hub-hero .breadcrumb { margin-bottom: .7rem; }
  .hub-hero .hero__inner { padding-block: .35rem 1.1rem; }
  .fr-lead-sec.section--tight { padding-block: .6rem; }
  .fr-lead h2 { font-size: 1.45rem; }
  .fr-process.section--tight { padding-block: 1rem .8rem; }
  .fr-process__title { margin-bottom: .65rem; }
}
/* Hero guide booklet (design shows the guide standing at the right of the hero) */
.fr-hero-book { display: none; }
@media (min-width: 1000px) {
  .fr-hero-book { display: block; position: absolute; z-index: 2; right: max(2.5rem, calc((100vw - 1200px) / 2 + .5rem)); bottom: 1.4rem; width: 148px; margin: 0; transform: perspective(900px) rotateY(-16deg) rotate(1deg); }
  .fr-hero-book .book__title { font-size: 1.05rem; }
  .hub-script { right: max(11rem, calc((100vw - 1200px) / 2 + 10.5rem)); top: .5rem; }
}
@media (min-width: 1000px) {
  .hub-script { right: max(1.5rem, calc((100vw - 1200px) / 2 - .5rem)); top: .1rem; font-size: 1.9rem; padding: 1.1rem 1rem; }
  .fr-hero-book { bottom: 1.1rem; width: 140px; }
}
@media (min-width: 1000px) { .fr-hero-book .book__sub { font-size: .92rem; } }
.fr-lead__guide { display: block; line-height: 1.5; padding-block: .3rem; } .fr-lead__guide .icon { display: inline-block; vertical-align: -2px; margin-left: .2rem; }
