.topics-page { overflow-x: hidden; background: #fff; }
.topics-hero { position: relative; padding: 92px 0 116px; overflow: hidden; background: linear-gradient(120deg, #f8f5ef 0%, #edf7f4 100%); }
.topics-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(7,59,58,.08) .8px, transparent .8px); background-size: 18px 18px; mask-image: linear-gradient(to right, black, transparent 65%); opacity: .42; }
.topics-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.topics-orb-one { width: 370px; height: 370px; top: -180px; right: 2%; border: 72px solid rgba(105,188,174,.12); }
.topics-orb-two { width: 160px; height: 160px; bottom: -80px; left: -60px; background: rgba(232,121,101,.1); }
.topics-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; }
.topics-hero-copy { max-width: 800px; }
.topics-hero h1 { margin: 22px 0 22px; color: var(--green-950); font: 800 clamp(44px,5.2vw,72px)/1.06 "Manrope",sans-serif; letter-spacing: -.048em; }
.topics-hero h1 em { color: var(--coral-dark); font-style: normal; }
.topics-hero-copy > p { max-width: 700px; margin: 0; color: var(--ink-soft); font-size: 19px; line-height: 1.7; }
.library-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 32px; }
.library-trust > span { display: inline-flex; align-items: center; gap: 7px; color: var(--green-800); font-size: 13px; font-weight: 700; }
.library-trust .material-symbols-rounded { color: var(--coral-dark); font-size: 20px; }
.topics-hero-note { min-width: 285px; display: flex; align-items: center; gap: 14px; padding: 22px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px 18px 18px 5px; background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.topics-hero-note > .material-symbols-rounded { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: var(--green-100); color: var(--green-700); font-size: 27px; }
.topics-hero-note p { display: grid; margin: 0; line-height: 1.35; }
.topics-hero-note small { color: var(--coral-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.topics-hero-note strong { margin-top: 3px; color: var(--green-950); font: 700 18px "Manrope",sans-serif; }
.topics-hero-note p > span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.topics-search-bridge { position: relative; z-index: 5; height: 0; }
.library-search-wrap { position: relative; transform: translateY(-50%); padding: 22px 24px 16px; border: 1px solid rgba(7,59,58,.08); border-radius: 20px; background: white; box-shadow: 0 24px 60px rgba(7,59,58,.14); }
.library-search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.library-search > .material-symbols-rounded { color: var(--green-700); font-size: 29px; }
.library-search input { min-width: 0; height: 52px; padding: 0 4px; border: 0; outline: 0; color: var(--ink); font-size: 16px; }
.library-search input::placeholder { color: #879795; }
.search-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 10px 0 0 43px; color: var(--muted); font-size: 12px; }
.search-hint button { padding: 2px 4px; border: 0; background: none; color: var(--green-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.category-ribbon { padding: 130px 0 76px; background: white; }
.ribbon-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.ribbon-heading h2, .library-heading h2 { margin: 9px 0 0; color: var(--green-950); font: 800 clamp(27px,3vw,38px)/1.18 "Manrope",sans-serif; letter-spacing: -.035em; }
.ribbon-heading > p, .library-heading > p { max-width: 320px; margin: 0; color: var(--ink-soft); font-size: 14px; }
.category-tiles { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.category-tile { min-width: 0; display: grid; justify-items: start; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--ink); text-align: left; transition: transform .2s,box-shadow .2s,border-color .2s; }
.category-tile:hover,.category-tile.active { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-sm); }
.category-tile.active { background: var(--green-950); color: white; }
.category-tile > .material-symbols-rounded { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 12px; font-size: 22px; }
.category-tile .mint { background:#dcefeb;color:#17675f; }.category-tile .rose{background:#f6e2e8;color:#9b5264}.category-tile .peach{background:#fce6df;color:#a14f3d}.category-tile .lavender{background:#eee5f1;color:#72507f}.category-tile .blue{background:#e1edf5;color:#365f81}
.category-tile strong { overflow: hidden; font: 700 14px/1.3 "Manrope",sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.category-tile small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.category-tile.active small { color: #afc8c4; }

.topics-library-section { padding: 72px 0 110px; background: var(--cream); }
.library-layout { display: grid; grid-template-columns: 250px 1fr; align-items: start; gap: 42px; }
.library-content { min-width: 0; }
.library-sidebar { position: sticky; top: 110px; display: grid; gap: 28px; }
.filter-header { display: flex; align-items: center; justify-content: space-between; }
.filter-header > div { display: flex; align-items: center; gap: 9px; color: var(--green-950); }
.filter-header strong { font: 700 15px "Manrope",sans-serif; }
.filter-header > div .material-symbols-rounded { color: var(--green-700); }
.filter-header > button { display: none; border: 0; background: none; color: var(--ink); }
.filter-group { display: grid; gap: 9px; margin: 0; padding: 0 0 25px; border: 0; border-bottom: 1px solid var(--line); }
.filter-group legend,.filter-group h3 { width: 100%; margin: 0 0 8px; color: var(--green-800); font: 800 11px "DM Sans",sans-serif; text-transform: uppercase; letter-spacing: .11em; }
.filter-group label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; cursor: pointer; color: var(--ink-soft); font-size: 13px; }
.filter-group label:hover { color: var(--green-800); }
.filter-group input { width: 17px; height: 17px; margin: 0; accent-color: var(--green-700); }
.filter-group label small { min-width: 24px; padding: 2px 6px; border-radius: 99px; background: white; color: var(--muted); font-size: 10px; text-align: center; }
.stage-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.stage-chips button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: white; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.stage-chips button:hover,.stage-chips button.active { border-color: var(--green-700); background: var(--green-700); color: white; }
.ask-card { position: relative; overflow: hidden; padding: 24px; border-radius: 18px 18px 18px 5px; background: var(--green-100); }
.ask-card::after { content:""; position:absolute; width:110px;height:110px;right:-45px;bottom:-45px;border:20px solid rgba(7,59,58,.05);border-radius:50%; }
.ask-card > .material-symbols-rounded { width: 42px;height:42px;display:grid;place-items:center;margin-bottom:15px;border-radius:12px;background:white;color:var(--green-700); }
.ask-card h3 { margin:0 0 7px;color:var(--green-950);font:700 18px/1.3 "Manrope",sans-serif; }
.ask-card p { margin:0 0 17px;color:var(--ink-soft);font-size:13px; }
.ask-card .button { position:relative;z-index:1;width:100%;min-height:42px;padding:0 14px;background:var(--green-900);color:white;font-size:12px; }

.library-toolbar { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px; }
.library-toolbar > p { margin:0;color:var(--ink-soft);font-size:13px; }
.library-toolbar > p strong { color:var(--green-950);font-size:17px; }
.library-toolbar label { display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px; }
.library-toolbar select { height:38px;padding:0 31px 0 11px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);font-weight:700;outline:0; }
.mobile-filter-button { display:none;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--green-800);font-weight:700; }
.alphabet-browser { display:flex;align-items:center;gap:18px;margin-bottom:42px;padding:12px 15px;border:1px solid var(--line);border-radius:13px;background:white;overflow:hidden; }
.alphabet-browser > span { flex:0 0 auto;color:var(--green-950);font-size:12px;font-weight:800; }
.alphabet-browser > div { min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin; }
.alphabet-browser button { width:29px;height:29px;display:grid;place-items:center;flex:0 0 auto;border:0;border-radius:7px;background:transparent;color:var(--ink-soft);font-size:11px;font-weight:700; }
.alphabet-browser button:hover,.alphabet-browser button.active { background:var(--green-900);color:white; }
.topic-clusters { margin: 0 0 72px; }
.topic-cluster-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.topic-cluster-card { position:relative;min-height:180px;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;padding:22px;border:1px solid rgba(7,59,58,.1);border-radius:18px;background:white;color:var(--green-950);text-align:left;box-shadow:0 8px 24px rgba(7,59,58,.045);transition:transform .24s,box-shadow .24s,border-color .24s; }
.topic-cluster-card::after { content:"";position:absolute;width:105px;height:105px;right:-52px;top:-52px;border:22px solid currentColor;border-radius:50%;opacity:.055;transition:transform .35s; }
.topic-cluster-card:hover,.topic-cluster-card:focus-visible { transform:translateY(-5px);border-color:transparent;box-shadow:var(--shadow-lg);outline:none; }
.topic-cluster-card:hover::after { transform:scale(1.16); }
.topic-cluster-card > .material-symbols-rounded { width:44px;height:44px;display:grid;place-items:center;margin-bottom:16px;border-radius:13px;background:rgba(255,255,255,.72);font-size:23px; }
.topic-cluster-card strong { max-width:90%;font:700 17px/1.3 "Manrope",sans-serif; }
.topic-cluster-card small { margin:7px 0 18px;color:var(--ink-soft);font-size:12px;line-height:1.45; }
.topic-cluster-card b { display:inline-flex;align-items:center;gap:6px;margin-top:auto;color:var(--green-700);font-size:11px;text-transform:uppercase;letter-spacing:.06em; }
.topic-cluster-card b .material-symbols-rounded { font-size:16px;transition:transform .2s; }
.topic-cluster-card:hover b .material-symbols-rounded { transform:translateX(4px); }
.topic-cluster-card.rose { background:#fbf0f2;color:#915166; }.topic-cluster-card.blue { background:#edf5f9;color:#38647e; }.topic-cluster-card.peach { background:#fff1eb;color:#a35442; }.topic-cluster-card.lavender { background:#f5eff7;color:#74517c; }.topic-cluster-card.mint { background:#eaf5f2;color:#286d65; }.topic-cluster-card.teal { background:#e7f3f1;color:#17675f; }
.library-heading { display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px; }
.library-heading > p { text-align:right; }
.library-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:19px; }
.library-card { min-width:0;overflow:hidden;border:1px solid rgba(7,59,58,.09);border-radius:18px;background:white;box-shadow:0 8px 28px rgba(7,59,58,.06);transition:transform .25s,box-shadow .25s; }
.library-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg); }
.library-card-image { position:relative;height:178px;display:block;overflow:hidden;background:var(--green-50); }
.library-card-image img { width:100%;height:100%;object-fit:cover;transition:transform .45s; }
.library-card:hover .library-card-image img { transform:scale(1.04); }
.topic-badge { display:inline-flex;align-items:center;padding:5px 9px;border-radius:99px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; }
.library-card-image .topic-badge { position:absolute;left:13px;bottom:13px;box-shadow:0 4px 13px rgba(0,0,0,.1); }
.topic-badge.fertility{background:#e9dded;color:#6f477a}.topic-badge.pregnancy{background:#fce3da;color:#964b3c}.topic-badge.menstrual{background:#f5dfe5;color:#934c5e}.topic-badge.gynaecology{background:#dceaf2;color:#315c7a}.topic-badge.planning{background:#e1eee4;color:#346744}
.topic-badge.prevention{background:#dcefeb;color:#286d65}.topic-badge.sexual{background:#eee5f1;color:#72507f}
.library-card-body { display:flex;flex-direction:column;align-items:flex-start;min-height:280px;padding:20px; }
.card-topline { width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;color:var(--muted);font-size:10px; }
.card-topline span { display:inline-flex;align-items:center;gap:4px; }
.card-topline .material-symbols-rounded { color:var(--green-700);font-size:14px; }
.library-card h3 { margin:0 0 8px;color:var(--green-950);font:700 19px/1.33 "Manrope",sans-serif; }
.library-card h3 a:hover { color:var(--green-700); }
.library-card-body > p { margin:0 0 15px;color:var(--ink-soft);font-size:13px;line-height:1.55; }
.symptom-tags { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px; }
.symptom-tags span { padding:4px 7px;border-radius:99px;background:var(--cream);color:var(--muted);font-size:10px; }
.card-link { display:inline-flex;align-items:center;gap:6px;margin-top:auto;color:var(--green-700);font-size:12px;font-weight:800; }
.card-link .material-symbols-rounded { font-size:17px;transition:transform .2s; }
.card-link:hover .material-symbols-rounded { transform:translateX(4px); }
.recent-library { margin-top:82px; }
.expanded-library { margin-top:82px; }
.recent-grid { display:grid;grid-template-columns:1.45fr .72fr .72fr;gap:18px; }
.recent-feature { display:grid;grid-template-columns:.95fr 1.05fr;overflow:hidden;border-radius:18px;background:white;box-shadow:var(--shadow-sm); }
.recent-image { min-height:340px;overflow:hidden; }
.recent-image img { width:100%;height:100%;object-fit:cover;transition:transform .45s; }
.recent-feature:hover .recent-image img { transform:scale(1.035); }
.recent-copy { display:flex;flex-direction:column;align-items:flex-start;padding:32px; }
.recent-copy h3,.recent-small h3 { margin:14px 0 10px;color:var(--green-950);font:700 23px/1.3 "Manrope",sans-serif; }
.recent-copy p,.recent-small p { margin:0 0 22px;color:var(--ink-soft);font-size:13px; }
.recent-small { display:flex;flex-direction:column;align-items:flex-start;padding:0 28px 28px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#f6f2ed; }
.recent-small.accent { background:var(--green-50); }
.recent-small-image { width:calc(100% + 56px);height:168px;margin:0 -28px 22px;overflow:hidden;background:var(--green-50); }
.recent-small-image img { width:100%;height:100%;object-fit:cover;transition:transform .45s ease; }
.recent-small:hover .recent-small-image img { transform:scale(1.045); }
.recent-small-icon { width:48px;height:48px;display:grid;place-items:center;margin-bottom:25px;border-radius:13px;background:white;color:var(--green-700); }
.recent-small .card-link { margin-top:auto; }
[data-topic-card].filtered-out { display:none; }
.library-empty { padding:65px 25px;border:1px dashed #b9c9c6;border-radius:20px;background:white;text-align:center; }
.library-empty > .material-symbols-rounded { width:62px;height:62px;display:grid;place-items:center;margin:0 auto 18px;border-radius:17px;background:var(--green-50);color:var(--green-700);font-size:30px; }
.library-empty h2 { margin:0 0 8px;color:var(--green-950);font:700 25px "Manrope",sans-serif; }
.library-empty p { margin:0 0 22px;color:var(--ink-soft); }
.filter-backdrop { display:none; }

.topics-newsletter { padding:0 0 95px;background:var(--cream); }
.topics-newsletter-card { display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:65px;padding:48px 55px;border-radius:28px;background:var(--green-800);color:white;box-shadow:var(--shadow-lg); }
.topics-newsletter h2 { margin:8px 0;color:white;font:800 33px/1.2 "Manrope",sans-serif;letter-spacing:-.03em; }
.topics-newsletter p { margin:0;color:#c4d8d5;font-size:14px; }
.topics-newsletter form { display:grid;grid-template-columns:1fr auto;gap:9px; }
.topics-newsletter input { min-width:0;height:54px;padding:0 16px;border:1px solid rgba(255,255,255,.28);border-radius:11px;outline:0;background:rgba(255,255,255,.09);color:white;font-size:16px; }
.topics-newsletter input::placeholder { color:#bdd0cd; }
.topics-newsletter form > p { grid-column:1/-1;min-height:1em;font-size:12px; }

@media(max-width:1100px){
  .category-tiles{grid-template-columns:repeat(3,1fr)}.category-tile:nth-child(n+4){grid-column:span 1}
  .library-layout{grid-template-columns:220px 1fr;gap:28px}.library-grid{grid-template-columns:repeat(2,1fr)}
  .recent-grid{grid-template-columns:1fr 1fr}.recent-feature{grid-column:1/-1}.topics-hero-note{display:none}.topic-cluster-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .topics-hero{padding:72px 0 105px}.topics-hero-grid{grid-template-columns:1fr}.topics-hero-copy{text-align:center}.topics-hero .eyebrow{justify-content:center}.topics-hero-copy>p{margin-inline:auto}.library-trust{justify-content:center}
  .category-ribbon{padding-top:120px}.category-tiles{grid-template-columns:repeat(2,1fr)}
  .library-layout{grid-template-columns:1fr}.library-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:450;width:min(88vw,340px);padding:28px;overflow-y:auto;background:white;box-shadow:20px 0 60px rgba(0,0,0,.2);transform:translateX(-110%);transition:transform .25s}
  .library-sidebar.open{transform:none}.filter-header>button{display:grid;place-items:center}.filter-backdrop{position:fixed;inset:0;z-index:440;background:rgba(3,28,27,.6)}.filter-backdrop.open{display:block}
  .mobile-filter-button{display:inline-flex}.topics-newsletter-card{grid-template-columns:1fr;gap:28px;text-align:center}
}
@media(max-width:600px){
  .topics-hero{padding:54px 0 126px}.topics-hero h1{font-size:42px}.topics-hero-copy>p{font-size:16px}.library-trust{display:grid;justify-content:start;max-width:230px;margin-inline:auto;text-align:left}
  .library-search-wrap{width:calc(100% - 30px);padding:16px}.library-search{grid-template-columns:auto 1fr}.library-search .button{grid-column:1/-1;width:100%;min-height:46px}.search-hint{margin-left:0}
  .category-ribbon{padding:152px 0 58px}.ribbon-heading,.library-heading{align-items:flex-start;flex-direction:column}.ribbon-heading>p,.library-heading>p{text-align:left}.category-tiles{display:flex;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x mandatory}.category-tile{min-width:175px;scroll-snap-align:start}
  .topics-library-section{padding:55px 0 80px}.library-toolbar{flex-wrap:wrap}.library-toolbar>p{order:3;width:100%}.alphabet-browser{align-items:flex-start;flex-direction:column;gap:8px}
  .topic-clusters{margin-bottom:58px}.topic-cluster-grid{display:flex;overflow-x:auto;padding:3px 2px 18px;scroll-snap-type:x mandatory}.topic-cluster-card{min-width:245px;scroll-snap-align:start}.library-grid{grid-template-columns:1fr}.library-card-image{height:205px}.recent-library,.expanded-library{margin-top:65px}.recent-grid{grid-template-columns:1fr}.recent-feature{grid-template-columns:1fr}.recent-image{min-height:235px}.recent-copy{padding:25px}.recent-small{min-height:280px}
  .topics-newsletter-card{padding:37px 20px;border-radius:23px}.topics-newsletter form{grid-template-columns:1fr}.topics-newsletter form>p{grid-column:auto}
}

/* Cinematic inner-page hero — aligned with the pregnancy page visual system. */
.topics-hero {
  min-height: 610px;
  display: flex;
  align-items: center;
  padding: 82px 0 146px;
  background: var(--cream);
}
.topics-hero::before { display: none; }
.topics-hero-image,
.topics-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.topics-hero-image { object-fit: cover; object-position: center; }
.topics-hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(250,247,240,.99) 0%, rgba(250,247,240,.95) 31%, rgba(250,247,240,.65) 52%, rgba(250,247,240,.08) 78%),
    linear-gradient(0deg, rgba(7,59,58,.08), transparent 42%);
}
.topics-orb { display: none; }
.topics-hero-grid {
  z-index: 2;
  grid-template-columns: minmax(0, 760px) minmax(240px, 1fr);
}
.topics-hero-note {
  justify-self: end;
  align-self: end;
  background: rgba(255,255,255,.86);
  box-shadow: 0 22px 60px rgba(7,59,58,.18);
}

@media(max-width:1100px){
  .topics-hero-grid { grid-template-columns: minmax(0, 720px) 1fr; }
}
@media(max-width:820px){
  .topics-hero { min-height: 640px; padding: 72px 0 132px; align-items: flex-end; }
  .topics-hero-image { object-position: 64% center; }
  .topics-hero-shade {
    background: linear-gradient(0deg, rgba(250,247,240,.99) 7%, rgba(250,247,240,.94) 57%, rgba(250,247,240,.3) 100%);
  }
  .topics-hero-copy { max-width: 680px; text-align: left; }
  .topics-hero .eyebrow { justify-content: flex-start; }
  .topics-hero-copy>p { margin-inline: 0; }
  .library-trust { justify-content: flex-start; }
}
@media(max-width:600px){
  .topics-hero { min-height: 675px; padding: 68px 0 146px; }
  .topics-hero-image { object-position: 44% top; }
  .topics-hero h1 { font-size: clamp(39px, 12vw, 48px); }
  .library-trust { max-width: none; margin-inline: 0; }
}