/* Searchable product guides. All rules are scoped; Studio and hero stay intact. */
.guide-page .kid-nav { grid-template-columns: 1fr auto; }
.guide-main { max-width: 1120px; }
.guide-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; font-size: 14px; font-weight: 800; }
.guide-intro { max-width: 820px; margin-bottom: 34px; }
.guide-intro h1 { margin: 8px 0 22px; font: 900 clamp(36px, 5.5vw, 62px)/1.08 var(--kid-display); letter-spacing: -.025em; text-wrap: balance; }
.guide-eyebrow { color: var(--kid-purple-dark); font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.guide-lead { max-width: 65ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 26px 0 16px; }
.guide-actions > a:not(.kid-button) { font-weight: 800; text-underline-offset: 4px; }
.guide-note { color: var(--kid-muted); font-size: 15px; line-height: 1.6; }
.guide-block { margin: 42px 0; scroll-margin-top: 120px; }
.guide-block h2, .guide-related h2 { font: 900 clamp(25px, 3vw, 34px)/1.2 var(--kid-display); margin: 0 0 18px; }
.guide-block h3 { font-size: 21px; margin: 0 0 10px; }
.guide-block p, .guide-block li { font-size: 17px; line-height: 1.7; max-width: 75ch; }
.guide-block li + li { margin-top: 10px; }
.guide-block a, .guide-related a { text-underline-offset: 4px; }
.guide-panel { padding: clamp(22px, 4vw, 36px); border: 3px solid var(--kid-navy); border-radius: 24px; background: var(--kid-paper); }
.guide-panel > :first-child { margin-top: 0; }
.guide-panel > :last-child { margin-bottom: 0; }
.guide-example { margin: 20px 0; border-left: 5px solid var(--kid-purple); padding: 16px 22px; background: #eee8ff; border-radius: 0 16px 16px 0; }
.guide-example p { margin: 0; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.guide-figure { margin: 30px 0; max-width: 760px; }
.guide-figure img { display: block; width: 100%; height: auto; border: 2px solid var(--kid-navy); border-radius: 20px; }
.guide-figure figcaption { margin-top: 10px; color: var(--kid-muted); font-size: 14px; line-height: 1.5; }
.guide-faq details { padding: 20px 0; border-bottom: 2px solid var(--kid-line); }
.guide-faq summary { font-size: 19px; font-weight: 900; cursor: pointer; }
.guide-faq details p { margin-bottom: 0; }
.guide-related { margin-top: 46px; padding-top: 28px; border-top: 2px solid var(--kid-line); }
.guide-related ul { display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 0; list-style: none; font-weight: 800; }
.home-guides { padding: 60px max(24px, calc((100vw - 1200px) / 2)); background: var(--kid-paper); }
.home-guides h2 { font: 900 clamp(27px, 3vw, 40px)/1.15 var(--kid-display); margin: 0 0 12px; }
.home-guides > p { max-width: 65ch; margin-bottom: 24px; line-height: 1.6; }
.home-guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.home-guides-grid article { border-top: 5px solid var(--kid-purple); padding-top: 18px; }
.home-guides-grid article:nth-child(2) { border-color: var(--kid-coral); }
.home-guides-grid article:nth-child(3) { border-color: var(--kid-aqua); }
.home-guides-grid h3 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
.home-guides-grid p { font-size: 16px; line-height: 1.6; margin: 0; }
.home-guides a { text-underline-offset: 5px; }
@media (max-width: 700px) {
  .guide-grid, .home-guides-grid { grid-template-columns: 1fr; }
  .guide-page .kid-nav { padding-inline: 16px; gap: 12px; }
  .guide-page .kid-nav .kid-button { padding-inline: 16px; font-size: 13px; }
  .guide-page .kid-logo { font-size: 20px; gap: 7px; }
  .guide-page .kid-logo-mark { width: 32px; height: 32px; }
  .guide-actions .kid-button { width: 100%; }
  .guide-main { padding-top: 110px; }
  .guide-block { margin-block: 32px; }
  .guide-block ol, .guide-block ul { padding-left: 23px; }
}