@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,650&display=swap');

.guide-page {
  --forest: #173a32;
  --forest-dark: #0d2b24;
  --cream: #f4eedf;
  --paper: #fbf8ee;
  --sun: #efad3f;
  --sage: #c7d8be;
  --sky: #a9cbd0;
  --coral: #e99b7b;
  --line: #cbd5c8;
  --muted: #52685e;
  --guide-header-height: 100px;
  margin: 0;
  background: var(--paper);
  color: var(--forest);
  font: 400 1rem/1.7 'DM Sans', Arial, sans-serif;
}
.guide-page *, .guide-page *::before, .guide-page *::after { box-sizing: border-box; }
.guide-page [hidden] { display: none !important; }
.guide-page a { color: inherit; text-underline-offset: .22em; }
.guide-page button, .guide-page input { font: inherit; }
.guide-page button, .guide-page summary { -webkit-tap-highlight-color: transparent; }
.guide-page a:focus-visible, .guide-page button:focus-visible, .guide-page summary:focus-visible, .guide-page input:focus-visible { outline: 3px solid #b8512d; outline-offset: 4px; }
.guide-page h1, .guide-page h2, .guide-page h3 { margin-top: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; line-height: 1.15; }
.guide-page p { margin: 0 0 1rem; }
.guide-page p:last-child { margin-bottom: 0; }
.guide-page svg { display: block; width: 28px; height: 28px; }
.guide-page [id] { scroll-margin-top: calc(var(--guide-header-height) + 24px); }
.guide-skip { position: fixed; top: 8px; left: 8px; z-index: 1200; padding: .7rem 1rem; border-radius: 12px; background: #fff; transform: translateY(-150%); }
.guide-skip:focus { transform: none; }
.guide-header { position: sticky; top: 0; z-index: 950; background: var(--forest-dark); color: var(--cream); border-bottom: 1px solid #405c4e; box-shadow: 0 8px 22px #0d2b2412; }
.guide-header-inner, .guide-footer > div { width: min(1280px, calc(100% - 64px)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.guide-header-inner { min-height: 94px; padding-block: 1rem; }
.guide-brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; text-decoration: none; letter-spacing: .08em; }
.guide-brand > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sun); color: var(--forest); font-size: 1.25rem; }
.guide-brand strong { margin-left: .3em; }
.guide-brand small { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .75; }
.guide-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.5rem; }
.guide-header nav > a { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; font-weight: 700; }
.guide-page .guide-button, .guide-page a.family-button, .guide-page a.eq-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; max-width: 100%; border: 1px solid transparent; border-radius: 999px; padding: .75rem 1.3rem; background: var(--sun); color: var(--forest-dark); font-weight: 700; font-size: .88rem; line-height: 1.4; text-decoration: none; text-align: center; }
.guide-button:hover, .guide-page a.family-button:hover, .guide-page a.eq-button:hover { background: #f8c565; }
.guide-hero { background: var(--forest); color: var(--cream); border-radius: 0 0 34px 34px; }
.guide-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 225px; align-items: center; gap: clamp(2rem, 6vw, 6rem); width: min(1200px, calc(100% - 80px)); margin: auto; padding-block: clamp(2.25rem, 4vw, 4rem); }
.guide-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a44a2f; }
.guide-hero .guide-eyebrow { color: var(--sage); }
.guide-hero h1 { max-width: 880px; margin: .4rem 0 1.1rem; font-size: clamp(2.7rem, 4.8vw, 4.7rem); letter-spacing: -.04em; text-wrap: balance; }
.guide-hero h1 em { color: var(--sun); font-weight: 500; }
.guide-lead { max-width: 710px; color: #d7e0d2; font-size: 1.02rem; }
.guide-hero-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; margin-top: .5rem; color: var(--cream); font-size: .9rem; font-weight: 700; }
.guide-hero-note { display: flex; flex-direction: column; align-items: flex-start; padding: 1.4rem 1.5rem; border: 1px solid #d1d9c4; border-radius: 22px 8px 24px 8px; background: var(--paper); color: var(--forest); box-shadow: 5px 6px 0 #071e1733; transform: rotate(2deg); }
.guide-note-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .5rem; border-radius: 13px; background: #fbe5ab; }
.guide-hero-note > strong { font-family: 'Fraunces', Georgia, serif; font-size: 2.6rem; font-weight: 500; line-height: 1.3; }
.guide-hero-note > span { font-size: .84rem; }
.guide-note-caption { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line); color: var(--muted); }
.guide-spark { position: absolute; right: -24px; bottom: 34px; color: var(--sun); font-size: 2rem; pointer-events: none; }
.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 3.5vw, 3.5rem); width: min(1280px, calc(100% - 64px)); margin: 2.5rem auto 4rem; }
.guide-sidebar { position: sticky; top: calc(var(--guide-header-height) + 20px); min-width: 0; }
.guide-toc { border: 1px solid var(--line); border-radius: 19px; background: #eef1e5; overflow: clip; }
.guide-toc > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 56px; padding: .85rem 1.1rem; font-weight: 700; cursor: pointer; list-style: none; }
.guide-toc > summary::-webkit-details-marker, .guide-chapter > summary::-webkit-details-marker { display: none; }
.guide-toc[open] > summary { border-bottom: 1px solid var(--line); }
.guide-toc > summary span { transition: transform .15s; }
.guide-toc[open] > summary span { transform: rotate(180deg); }
.guide-toc nav { max-height: calc(100dvh - var(--guide-header-height) - 170px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: .55rem; }
.guide-toc ol { padding: 0; margin: 0; list-style: none; }
.guide-toc a { display: flex; gap: .6rem; align-items: baseline; min-height: 44px; padding: .65rem .6rem; border-radius: 10px; font-size: .8rem; line-height: 1.45; text-decoration: none; }
.guide-toc a > span:first-child { flex: 0 0 1.3rem; color: #687e68; font-size: .7rem; font-variant-numeric: tabular-nums; }
.guide-toc a:hover, .guide-toc a[aria-current] { background: var(--forest); color: #fff; }
.guide-toc a:hover > span:first-child, .guide-toc a[aria-current] > span:first-child { color: var(--sun); }
.guide-sidebar-note { padding: .8rem 1rem; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.guide-reading { min-width: 0; }
.guide-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .9rem 1.4rem; margin: 0 0 1.2rem; }
.guide-search { display: grid; gap: .4rem; font-size: .82rem; font-weight: 700; }
.guide-search input { min-width: 0; width: 100%; min-height: 49px; border: 1px solid #a9bbae; border-radius: 13px; padding: .75rem 1rem; background: #fff; color: var(--forest); font-size: 1rem; line-height: 1.4; }
.guide-search input::placeholder { color: #6a7c72; font-size: .9rem; font-weight: 400; }
.guide-tool-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.guide-tool-actions button, .guide-empty button { min-height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: .65rem .95rem; background: #fff; color: var(--forest); font-size: .8rem; font-weight: 700; cursor: pointer; }
.guide-tool-actions button:hover, .guide-empty button:hover { background: #fbe5ab; }
.guide-search-status { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.guide-search-status:empty { display: none; }
.guide-empty { padding: 1.5rem; border: 1px dashed #b3c0aa; border-radius: 16px; }
.guide-chapter { margin-bottom: .85rem; border: 1px solid var(--line); border-radius: 18px; background: #fffefa; box-shadow: 0 4px 0 #173a3206; }
.guide-chapter > summary { display: block; min-height: 85px; padding: 1.15rem 1.35rem; list-style: none; cursor: pointer; border-radius: 17px; }
.guide-chapter > summary:hover { background: #f5f6ed; }
.guide-chapter > summary:focus-visible { outline-offset: 2px; }
.guide-chapter > summary h2 { display: grid; grid-template-columns: 36px minmax(0, 1fr) 30px; align-items: center; gap: .85rem; margin: 0; font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.3; }
.guide-chapter-number { display: grid; place-items: center; width: 36px; height: 36px; background: #eff2e8; color: var(--forest); border: 1px solid #d4deca; border-radius: 50%; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.guide-chapter-toggle { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef1e5; font-size: 1.3rem; line-height: 1; }
.guide-chapter[open] { border-color: #96ad93; }
.guide-chapter[open] > summary { border-radius: 17px 17px 0 0; background: #f0f3e9; }
.guide-chapter[open] .guide-chapter-number { background: var(--sun); border-color: var(--sun); }
.guide-chapter[open] .guide-chapter-toggle { transform: rotate(45deg); background: var(--forest); color: #fff; }
.guide-chapter-body { padding: 1.4rem clamp(1.2rem, 3vw, 2rem) 1.8rem; font-size: .96rem; overflow-wrap: anywhere; }
.guide-chapter-body h2 { margin: 1.7rem 0 .9rem; font-size: 1.65rem; }
.guide-chapter-body h3 { margin: 1.5rem 0 .7rem; font-size: 1.35rem; }
.guide-chapter-body ul, .guide-chapter-body ol { padding-left: 1.4rem; margin: .9rem 0 1.35rem; }
.guide-chapter-body li { margin-bottom: .6rem; padding-left: .15rem; }
.guide-chapter-body li::marker { color: #a44a2f; font-weight: 700; }
.guide-chapter-body strong { font-weight: 700; }
.guide-chapter-body a { font-weight: 600; }
.guide-chapter-body .family-eyebrow, .guide-chapter-body .eyebrow { color: #a44a2f; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.guide-chapter-body .family-notice-steps { counter-reset: guide-step; padding: 0; list-style: none; }
.guide-chapter-body .family-notice-step { position: relative; padding: 1rem 0 1.4rem 3.2rem; border-bottom: 1px solid #e2e7dd; counter-increment: guide-step; }
.guide-chapter-body .family-notice-step::before { content: counter(guide-step, decimal-leading-zero); position: absolute; top: 1rem; left: 0; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: #fbe5ab; font-size: .75rem; font-weight: 700; }
.guide-chapter-body .family-notice-step h3 { margin-top: .2rem; }
.guide-chapter-body .family-notice-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.guide-chapter-body .family-notice-post, .guide-chapter-body .family-notice-callout, .guide-chapter-body .family-main-card, .guide-chapter-body .note, .guide-note { margin-block: 1rem; padding: 1rem 1.2rem; border-left: 4px solid #df9c37; border-radius: 4px 14px 14px 4px; background: #fbf2d9; }
.guide-chapter-body address { margin-block: 1rem; font-style: normal; font-weight: 700; }
.guide-chapter-body code { font-size: .85em; padding: .1em .3em; border-radius: 4px; background: #edf0e8; }
.guide-chapter-body pre { max-width: 100%; overflow-x: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #edf0e8; white-space: pre-wrap; }
.guide-table-wrap { max-width: 100%; overflow-x: auto; margin-block: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.guide-table-wrap:focus-visible { outline: 3px solid #b8512d; outline-offset: 3px; }
.guide-chapter-body table { width: 100%; border-collapse: collapse; font-size: .87rem; line-height: 1.55; }
.guide-chapter-body th, .guide-chapter-body td { padding: .85rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.guide-chapter-body th { background: #edf1e6; font-weight: 700; }
.guide-chapter-body caption { padding: .85rem; text-align: left; background: #edf1e6; font-weight: 700; }
.guide-chapter-body img { max-width: 100%; height: auto; }
.guide-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px dashed #adbeaa; }
.guide-related h2 { font-size: 1.9rem; margin-bottom: 1.2rem; }
.guide-related > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.guide-related > div > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #edf1e6; font-size: .85rem; font-weight: 700; text-decoration: none; }
.guide-related > div > a:hover { background: #dce8d4; }
.guide-bottom-action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; font-size: .85rem; }
.guide-footer { padding: 2rem 0; background: var(--forest-dark); color: var(--cream); }
.guide-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.guide-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; }
.guide-footer small { font-size: .7rem; color: #c3d1c1; }
.guide-directory { width: min(1200px, calc(100% - 64px)); margin: 2.7rem auto 4rem; }
.guide-directory-search { max-width: 580px; margin-bottom: 2.8rem; }
.guide-directory-search [role='status'] { margin-top: .6rem; font-size: .8rem; color: var(--muted); }
.guide-directory-group { margin-bottom: 2.5rem; }
.guide-directory-group > h2 { font-size: 1.8rem; margin-bottom: 1.1rem; }
.guide-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.guide-directory-card { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: 22px 9px 22px 9px; background: #fffefa; box-shadow: 0 5px 0 #173a3207; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.guide-directory-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #173a320a; border-color: #879f84; }
.guide-card-icon { display: grid; place-items: center; flex: 0 0 54px; height: 54px; border-radius: 17px; }
.tone-sky { background: #d9e9eb; }.tone-sun { background: #fbe5ab; }.tone-sage { background: #e0e9d6; }.tone-coral { background: #f5ded2; }
.guide-card-text { display: block; min-width: 0; }
.guide-card-tag { display: block; margin-bottom: .4rem; color: #a44a2f; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.guide-card-text h3 { margin: 0 0 .7rem; font-size: 1.65rem; }
.guide-card-text p { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.guide-card-action { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; font-size: .84rem; font-weight: 700; }
.guide-directory-help { padding-top: 1.5rem; border-top: 1px dashed var(--line); font-size: .9rem; }
.guide-directory-help a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .guide-hero h1 { animation: guide-title-in .65s ease-out both; }
  @keyframes guide-title-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .guide-directory-card, .guide-toc > summary span { transition: none; }
  .guide-directory-card:hover { transform: none; }
}
@media (max-width: 1100px) { .guide-tools { grid-template-columns: 1fr; }.guide-tool-actions { justify-content: flex-start; } }
@media (max-width: 900px) {
  .guide-header-inner, .guide-footer > div { width: calc(100% - 40px); }
  .guide-layout { grid-template-columns: 1fr; gap: 1.25rem; width: calc(100% - 40px); margin-top: 1.5rem; }
  .guide-sidebar { position: static; }
  .guide-sidebar-note { display: none; }
  .guide-toc nav { max-height: 45vh; }
  .guide-hero-inner { width: calc(100% - 48px); grid-template-columns: minmax(0, 1fr) 170px; gap: 2rem; }
  .guide-hero-note { padding: 1.2rem; }
  .guide-spark { right: -13px; bottom: 16px; }
  .guide-footer > div { flex-wrap: wrap; }
  .guide-directory { width: calc(100% - 40px); }
}
@media (max-width: 600px) {
  .guide-header-inner { width: calc(100% - 32px); gap: .6rem; padding-block: .7rem; flex-wrap: wrap; }
  .guide-brand { font-size: .84rem; }.guide-brand > span:first-child { width: 31px; height: 31px; }
  .guide-brand small { font-size: .5rem; }
  .guide-header nav { width: 100%; gap: .5rem; justify-content: space-between; }
  .guide-header nav > a { font-size: .75rem; }
  .guide-header nav > .guide-button { max-width: calc(100% - 104px); padding: .6rem .8rem; }
  .guide-hero { border-radius: 0 0 22px 22px; }
  .guide-hero-inner { grid-template-columns: 1fr; width: calc(100% - 40px); padding-block: 2rem; gap: 1.5rem; }
  .guide-hero h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .guide-lead { font-size: .95rem; }
  .guide-hero-note { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .65rem; padding: .8rem 1rem; border-radius: 14px; transform: rotate(-1deg); }
  .guide-note-icon { width: 32px; height: 32px; margin: 0; border-radius: 9px; }
  .guide-note-icon svg { width: 23px; height: 23px; }
  .guide-hero-note > strong { font-size: 1.5rem; }.guide-hero-note > span:not(.guide-note-icon) { flex: 1; min-width: 120px; font-size: .76rem; }
  .guide-hero-note .guide-note-caption { display: none; }
  .guide-spark { display: none; }
  .guide-layout { width: calc(100% - 28px); margin-bottom: 2.5rem; }
  .guide-tools { gap: .7rem; padding-inline: 4px; }
  .guide-tool-actions { gap: .4rem; }.guide-tool-actions button { padding: .6rem .8rem; font-size: .76rem; }
  .guide-chapter > summary { min-height: 79px; padding: 1rem .85rem; }
  .guide-chapter > summary h2 { grid-template-columns: 30px minmax(0, 1fr) 26px; gap: .65rem; font-size: 1.25rem; }
  .guide-chapter-number { width: 30px; height: 30px; font-size: .68rem; }.guide-chapter-toggle { width: 26px; height: 26px; }
  .guide-chapter-body { padding: 1.2rem 1rem 1.4rem; font-size: .93rem; }
  .guide-chapter-body h3 { font-size: 1.23rem; }
  .guide-chapter-body .family-notice-step { padding-left: 2.6rem; }
  .guide-chapter-body .family-notice-step::before { width: 28px; height: 28px; font-size: .65rem; }
  .guide-chapter-body .family-notice-post, .guide-chapter-body .family-notice-callout, .guide-chapter-body .family-main-card { padding: .85rem; }
  .guide-chapter-body th, .guide-chapter-body td { padding: .7rem .6rem; }
  .guide-related { margin-top: 2rem; padding-inline: 4px; }
  .guide-related > div { grid-template-columns: 1fr; }
  .guide-bottom-action { padding-inline: 4px; }
  .guide-footer > div { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .guide-directory { width: calc(100% - 32px); margin-top: 1.8rem; }
  .guide-directory-grid { grid-template-columns: 1fr; }
  .guide-directory-card { padding: 1.2rem; gap: .85rem; }
  .guide-card-icon { flex-basis: 44px; height: 44px; border-radius: 13px; }
  .guide-card-text h3 { font-size: 1.45rem; }
}
@media print {
  .guide-page { color: #000; background: #fff; font: 10pt/1.5 Arial, sans-serif; }
  .guide-header, .guide-sidebar, .guide-tools, .guide-related, .guide-bottom-action, .guide-footer, .guide-directory-search, .guide-hero-note, .guide-hero-link, .guide-spark, .guide-skip, .back-to-top, [data-support-open], .guide-empty { display: none !important; }
  .guide-hero { color: #000; background: transparent; border-radius: 0; }
  .guide-hero-inner { display: block; width: 100%; padding: 0 0 1.2rem; }
  .guide-hero h1 { font-size: 26pt; animation: none; }.guide-hero h1 em, .guide-hero .guide-eyebrow, .guide-lead { color: #000; }
  .guide-layout, .guide-directory { display: block; width: 100%; margin: 0; }
  .guide-chapter { box-shadow: none; border: 0; border-top: 1px solid #aaa; border-radius: 0; margin: 0 0 1rem; }
  .guide-chapter > summary { display: flex; min-height: 0; padding: .8rem 0; background: none !important; break-after: avoid; }
  .guide-chapter > summary h2 { display: flex; gap: .6rem; font-size: 16pt; }.guide-chapter-number { background: none !important; border: 0; width: auto; height: auto; }.guide-chapter-toggle { display: none; }
  .guide-chapter-body { padding: 0; font-size: inherit; }.guide-chapter-body h3 { break-after: avoid; }
  .guide-chapter::details-content { content-visibility: visible; display: block; }
  .guide-chapter:not([open]) > .guide-chapter-body { display: block !important; }
  .guide-chapter-body pre, .guide-table-wrap { overflow: visible; }
  .guide-directory-card { box-shadow: none; break-inside: avoid; transform: none; }
}