.faq-page {
  --faq-ink: #17384a;
  --faq-muted: #425d68;
  --faq-line: #c9e4e2;
  --faq-teal: #087c79;
  color: var(--faq-ink);
  background: radial-gradient(circle at 97% 8%, #fff1d8 0, transparent 24rem), #f7fcfa;
}

.faq-page [hidden] { display: none !important; }
.faq-page :focus-visible { outline: 3px solid #087c79; outline-offset: 3px; }
.faq-page a { color: #0b606d; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.faq-page a:hover { color: #063e4a; }
.faq-page p { margin-top: 0; }
.faq-page h1, .faq-page h2, .faq-page h3 { color: var(--faq-ink); line-height: 1.15; }
.faq-main { padding-bottom: clamp(3rem, 7vw, 6rem); }
.faq-main > .faq-hero,
.faq-main > .faq-find,
.faq-layout { width: min(1260px, calc(100% - 36px)); margin-inline: auto; }
.faq-eyebrow { margin-bottom: .65rem; color: #075c68; font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.faq-eyebrow i { margin-right: .3rem; }

.faq-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 250px);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
  padding: clamp(1.3rem, 2.7vw, 2.2rem);
  overflow: hidden;
  border: 1px solid #d6ede8;
  border-radius: 36px;
  background: linear-gradient(115deg, #e8fbf7 0%, #fefaf0 57%, #ffeddf 100%);
  box-shadow: 0 24px 70px rgba(32, 78, 83, .09);
}
.faq-hero::before, .faq-hero::after { position: absolute; width: 230px; height: 230px; border: 2px dashed rgba(11, 129, 124, .16); border-radius: 50%; content: ""; pointer-events: none; }
.faq-hero::before { right: -80px; top: -140px; }
.faq-hero::after { left: 38%; bottom: -175px; }
.faq-hero-copy, .faq-hero-character { position: relative; z-index: 1; }
.faq-hero h1 { max-width: 850px; margin: 0 0 .75rem; font-size: clamp(2.15rem, 3.5vw, 3.2rem); font-weight: 860; letter-spacing: -.055em; }
.faq-hero h1 span { color: #087c79; }
.faq-hero-copy > p:not(.faq-eyebrow) { max-width: 620px; color: var(--faq-muted); font-size: clamp(1.04rem, 1.7vw, 1.24rem); }
.faq-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.faq-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .65rem 1.1rem; border: 1px solid transparent; border-radius: 12px; font-weight: 800; text-decoration: none !important; transition: transform .15s ease, background .15s ease; }
.faq-button:hover { transform: translateY(-2px); }
.faq-button-primary { color: #223441 !important; border-color: #e0a126; background: #ffc542; }
.faq-button-primary:hover { background: #ffb82b; }
.faq-button-outline { color: #205069 !important; border-color: #83c7c2; background: #fff; }
.faq-button-outline:hover { background: #e9faf6; }
.faq-hero-character { display: flex; flex-direction: column; align-items: center; }
.faq-hero-character img { display: block; width: min(100%, 180px); height: auto; filter: drop-shadow(0 14px 20px rgba(23, 60, 75, .14)); animation: faq-float 4s ease-in-out infinite; }
.faq-hero-character span { display: block; margin-top: -.7rem; padding: .6rem 1.1rem; border: 2px solid #edb83f; border-radius: 14px; background: #fffdf5; color: #284251; font-size: 1.05rem; font-weight: 850; transform: rotate(-4deg); }

.faq-find { margin-top: 1.8rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--faq-line); border-radius: 25px; background: #fff; box-shadow: 0 12px 40px rgba(29, 71, 79, .06); }
.faq-find-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.faq-find-heading h2 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 830; }
.faq-find-heading > p { margin-bottom: .2rem; color: var(--faq-muted); }
.faq-search { margin-top: 1.25rem; }
.faq-search > label { display: block; margin-bottom: .4rem; font-weight: 750; }
.faq-search-control { position: relative; display: flex; align-items: center; min-height: 56px; border: 2px solid #a8d2d0; border-radius: 13px; background: #fbffff; }
.faq-search-control:focus-within { border-color: #0a8b85; box-shadow: 0 0 0 4px rgba(8, 139, 133, .12); }
.faq-search-control > i { margin-left: 1.1rem; color: #3c6b75; }
.faq-search-control input { width: 100%; min-width: 0; padding: .85rem 1rem; border: 0; outline: none; background: transparent; color: var(--faq-ink); }
.faq-search-control input:focus-visible { outline: none; }
.faq-search-control button { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; margin-right: .4rem; border: 0; border-radius: 9px; background: #eaf5f4; color: #335666; }
.faq-topics { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.faq-topics button { min-height: 42px; padding: .45rem .85rem; border: 1px solid #c8dcde; border-radius: 999px; background: #fff; color: #315162; font-size: .92rem; font-weight: 750; }
.faq-topics button[aria-pressed="true"] { border-color: #146f73; background: #d8f5ef; color: #06454e; box-shadow: inset 0 0 0 1px #146f73; }
.faq-topics button:hover { background: #edf9f6; }
.faq-results { margin: .8rem 0 0; color: var(--faq-muted); font-size: .88rem; }

.faq-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; margin-top: 1.75rem; }
.faq-sidebar { position: sticky; top: 116px; }
.faq-sidebar nav { display: flex; flex-direction: column; gap: .25rem; max-height: calc(100vh - 130px); padding: 1.2rem; overflow-y: auto; border: 1px solid var(--faq-line); border-radius: 19px; background: #fff; box-shadow: 0 12px 30px rgba(29, 71, 79, .05); }
.faq-sidebar nav strong { margin-bottom: .45rem; color: #12536a; font-size: .81rem; letter-spacing: .1em; text-transform: uppercase; }
.faq-sidebar nav a { padding: .55rem .65rem; border-radius: 9px; color: #365664; font-size: .92rem; font-weight: 650; text-decoration: none; }
.faq-sidebar nav a:hover, .faq-sidebar nav a:focus-visible { background: #eaf8f5; color: #0a555c; }
.faq-sidebar > p { display: flex; gap: .5rem; margin: 1rem .3rem; color: #5d737c; font-size: .78rem; }
.faq-sidebar > p i { margin-top: .2rem; color: #cc9015; }
.faq-content { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.faq-section { min-width: 0; padding: clamp(1.45rem, 3vw, 2.35rem); border: 1px solid var(--faq-line); border-radius: 24px; background: #fff; box-shadow: 0 14px 42px rgba(30, 70, 78, .055); scroll-margin-top: 110px; }
.faq-section:target, .faq-accordion details:target { border-color: #0d8d82; box-shadow: 0 0 0 4px rgba(8, 152, 139, .13); }
.faq-section-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.15rem; }
.faq-section-heading .faq-eyebrow { margin-bottom: .2rem; }
.faq-section-heading h2 { margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.2rem); font-weight: 830; letter-spacing: -.035em; }
.faq-section-icon { display: grid; flex: 0 0 54px; place-items: center; width: 54px; height: 54px; border-radius: 16px; font-size: 1.35rem; }
.faq-icon-teal { background: #d8f5ed; color: #08766d; }
.faq-icon-gold { background: #fff0c4; color: #83550f; }
.faq-icon-purple { background: #eee8ff; color: #61489c; }
.faq-icon-blue { background: #e2f2fa; color: #216987; }
.faq-icon-coral { background: #ffe8e0; color: #af4b38; }
.faq-anchor { display: inline-block; margin-left: .15rem; color: #618f93 !important; font-size: .72em; font-weight: 700; text-decoration: none; opacity: .72; }
.faq-anchor:hover { opacity: 1; }
.faq-section > p { color: #395562; font-size: 1.01rem; line-height: 1.7; }
.faq-section > p:last-child { margin-bottom: 0; }
.faq-text-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem; font-weight: 800; }
.faq-fineprint { color: #62767f !important; font-size: .82rem !important; }

.faq-flow { margin: 1.45rem 0; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid #bddedb; border-radius: 20px; background: linear-gradient(140deg, #ecfaf6, #fffbef 57%, #f6f0ff); }
.faq-flow-intro { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1.5rem; }
.faq-flow-intro h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 830; }
.faq-flow-intro > p { flex: 1 1 220px; max-width: 380px; margin: 0; color: #47616a; font-size: .9rem; line-height: 1.5; }
.faq-flow-tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.25rem 0 1rem; }
.faq-flow-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .65rem .85rem; border: 1px solid #bfd8d7; border-radius: 12px; background: #fff; color: #315466; font-size: .88rem; font-weight: 800; line-height: 1.25; }
.faq-flow-tabs button:hover { border-color: #20807e; background: #f1fbf8; }
.faq-flow-tabs button[aria-selected="true"] { border-color: #17516f; background: #17516f; color: #fff; box-shadow: 0 6px 14px rgba(23, 81, 111, .15); }
.faq-flow-tabs button[aria-selected="true"]:hover { background: #123e55; }
.faq-flow-tabs button i { font-size: 1rem; }
.faq-flow-panel { padding: .15rem .15rem .3rem; }
.faq-flow-panel:focus-visible { border-radius: 8px; }
.faq-flow-summary { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .8rem; color: #365464; font-size: .91rem; font-weight: 680; line-height: 1.45; }
.faq-flow-summary i { margin-top: .12rem; color: #0e7776; }
.faq-flow-track { position: relative; display: grid; gap: .65rem; padding-left: .1rem; }
.faq-flow-track::before { position: absolute; top: 1.2rem; bottom: 1.2rem; left: 1.18rem; width: 2px; background: repeating-linear-gradient(to bottom, #76b8b5 0 6px, transparent 6px 12px); content: ""; }
.faq-flow-track details { position: relative; border: 1px solid #d0e4e2; border-radius: 13px; background: #fff; box-shadow: 0 4px 15px rgba(16, 75, 79, .035); }
.faq-flow-track details[open] { border-color: #72b8b1; box-shadow: 0 8px 20px rgba(16, 75, 79, .08); }
.faq-flow-track summary { display: flex; align-items: center; gap: .8rem; min-height: 62px; padding: .65rem .9rem .65rem .35rem; cursor: pointer; list-style: none; }
.faq-flow-track summary::-webkit-details-marker { display: none; }
.faq-flow-track summary > span:nth-child(2) { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: .15rem; }
.faq-flow-track summary strong { color: #214a5b; font-size: .96rem; line-height: 1.3; }
.faq-flow-track summary small { color: #536c75; font-size: .83rem; line-height: 1.3; }
.faq-flow-track summary > i { color: #277c80; font-size: .8rem; transition: transform .16s ease; }
.faq-flow-track details[open] summary > i { transform: rotate(180deg); }
.faq-flow-track details > p { margin: -.1rem .9rem .85rem 3.1rem; padding-top: .55rem; border-top: 1px solid #e3eeec; color: #425d68; font-size: .89rem; line-height: 1.55; }
.faq-flow-number, .faq-step-num { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #0e827e; color: #fff; font-weight: 850; }
.faq-flow-number { position: relative; z-index: 1; box-shadow: 0 0 0 3px #fff; }
.faq-coach { display: flex; gap: .85rem; align-items: center; margin: 1.35rem 0 0; padding: .85rem 1rem; border: 1px solid #f0d993; border-radius: 15px; background: #fff9e9; }
.faq-coach img { flex: 0 0 58px; width: 58px; height: 58px; object-fit: contain; }
.faq-coach p { margin: 0; color: #3c5361; font-size: .92rem; line-height: 1.5; }
.faq-coach strong { color: #184e5e; }
.faq-steps { display: grid; gap: .75rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.faq-steps li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .63fr); gap: .8rem; align-items: center; padding: 1rem; border: 1px solid #d5e7e5; border-radius: 15px; background: #fbfefe; }
.faq-steps li > div:first-child { position: relative; padding-left: 2.8rem; }
.faq-step-num { position: absolute; left: 0; top: 0; }
.faq-steps h3 { margin: 0 0 .3rem; font-size: 1.08rem; font-weight: 830; }
.faq-steps p { margin: 0; color: #4b6570; font-size: .92rem; line-height: 1.5; }
.faq-step-coach { display: flex; gap: .5rem; align-items: center; padding: .55rem .65rem; border-radius: 12px; background: #fff6df; color: #46525a; font-size: .84rem; line-height: 1.35; }
.faq-step-mascot { position: relative; display: grid; flex: 0 0 70px; place-items: center; width: 70px; height: 60px; }
.faq-step-mascot img { width: 50px; height: 50px; object-fit: contain; }
.faq-step-mascot svg { position: absolute; inset: 0; width: 70px; height: 60px; pointer-events: none; }
.faq-compact-steps { display: grid; gap: .45rem; margin: 1rem 0; padding-left: 1.35rem; color: #405b67; }
.faq-compact-steps li { padding-left: .25rem; line-height: 1.6; }
.faq-compact-steps li::marker { color: #0f7d79; font-weight: 850; }
.faq-callout { margin: 1.25rem 0 0; padding: 1rem 1.1rem; border-left: 4px solid #e5ac28; border-radius: 0 12px 12px 0; background: #fff8e6; color: #4d5960; }
.faq-callout strong { color: #684d17; }
.faq-callout p { margin: .25rem 0 0; line-height: 1.55; }
.faq-callout-restriction { border-left-color: #b45a47; background: #fff0eb; }
.faq-callout-restriction strong { color: #8a3c30; }

.faq-screen { margin: 1.45rem 0 .35rem; overflow: hidden; border: 1px solid #c9dedf; border-radius: 15px; background: #f7faf9; box-shadow: 0 10px 28px rgba(21, 64, 75, .09); }
.faq-screen > a { display: block; }
.faq-screen img { display: block; width: 100%; height: auto; }
.faq-screen-narrow { max-width: 450px; }
.faq-screen figcaption { padding: .85rem 1rem; border-top: 1px solid #d6e6e6; color: #516b73; font-size: .88rem; line-height: 1.5; }
.faq-screen figcaption strong { color: #244c5c; }
.faq-status-grid, .faq-permission-grid, .faq-safety-grid { display: grid; gap: .75rem; margin: 1.25rem 0; }
.faq-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faq-status-grid div { display: flex; flex-direction: column; gap: .4rem; padding: 1rem; border: 1px solid #d2e5e3; border-radius: 13px; background: #f7fcfb; }
.faq-status-grid strong { color: #15566b; font-size: .95rem; }
.faq-status-grid span { color: #4b6570; font-size: .88rem; }
.faq-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-permission-grid article { padding: 1.1rem; border: 1px solid #d9e7e6; border-radius: 14px; background: #fbfdfd; }
.faq-permission-grid i { color: #147b78; font-size: 1.3rem; }
.faq-permission-grid h3, .faq-safety-grid h3 { margin: .55rem 0 .35rem; font-size: 1rem; font-weight: 820; }
.faq-permission-grid p, .faq-safety-grid p { margin: 0; color: #506872; font-size: .9rem; line-height: 1.52; }
.faq-safety-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faq-safety-grid div { padding: 1rem; border: 1px solid #e4dfd5; border-radius: 14px; background: #fffbf2; }
.faq-safety-grid i { color: #ae6940; font-size: 1.25rem; }

.faq-accordion { display: grid; gap: .65rem; margin-top: 1rem; }
.faq-accordion details { border: 1px solid #d4e5e3; border-radius: 12px; background: #fbfefd; scroll-margin-top: 115px; }
.faq-accordion details[open] { border-color: #8cc9c5; background: #f4fbf8; }
.faq-accordion summary { padding: 1rem 1.1rem; color: #234b5c; font-weight: 780; cursor: pointer; }
.faq-accordion summary:hover { color: #0a676c; }
.faq-accordion details > div { padding: 0 1.1rem 1rem; color: #415d69; font-size: .94rem; line-height: 1.62; }
.faq-accordion details > div p { margin: 0 0 .65rem; }
.faq-accordion details > div a { font-size: .88rem; font-weight: 750; }
.faq-empty { padding: 2rem; border: 1px dashed #87bdb8; border-radius: 18px; background: #fff; text-align: center; }
.faq-empty > i { color: #0d7d78; font-size: 1.65rem; }
.faq-empty h2 { margin: .7rem 0 .3rem; font-size: 1.3rem; }
.faq-empty p { color: #60747d; }
.faq-end { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 20px; background: #1b4964; color: #fff; }
.faq-end img { flex: 0 0 82px; width: 82px; height: 82px; object-fit: contain; }
.faq-end > div { flex: 1 1 240px; }
.faq-end h2 { margin: 0 0 .3rem; color: #fff; font-size: 1.2rem; }
.faq-end p { margin: 0; color: #dbe8ec; font-size: .9rem; }

@keyframes faq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 980px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-sidebar { position: static; }
  .faq-sidebar nav { display: flex; flex-flow: row wrap; gap: .2rem .4rem; max-height: none; overflow: visible; }
  .faq-sidebar nav strong { flex-basis: 100%; }
  .faq-sidebar > p { display: none; }
}
@media (max-width: 700px) {
  .faq-main > .faq-hero, .faq-main > .faq-find, .faq-layout { width: min(100% - 22px, 1260px); }
  .faq-hero { grid-template-columns: 1fr; gap: .3rem; padding: 1.5rem; border-radius: 24px; }
  .faq-hero h1 { font-size: clamp(2.1rem, 10vw, 3.7rem); }
  .faq-hero-character { flex-direction: row; justify-content: center; gap: .4rem; }
  .faq-hero-character img { width: 105px; }
  .faq-hero-character span { margin: 0; font-size: .9rem; }
  .faq-status-grid, .faq-safety-grid { grid-template-columns: 1fr; }
  .faq-permission-grid { grid-template-columns: 1fr; }
  .faq-steps li { grid-template-columns: 1fr; }
  .faq-step-coach { margin-left: 2.8rem; }
  .faq-section { border-radius: 18px; }
  .faq-end { padding-bottom: 5rem; }
}
@media (max-width: 480px) {
  .faq-section-heading { align-items: flex-start; gap: .7rem; }
  .faq-section-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; font-size: 1.1rem; }
  .faq-section-heading h2 { font-size: 1.5rem; }
  .faq-topics button { font-size: .84rem; }
  .faq-screen figcaption { font-size: .82rem; }
  .faq-flow-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-flow-tabs button { padding-inline: .45rem; font-size: .78rem; }
  .faq-flow-track summary { gap: .55rem; }
  .faq-flow-track details > p { margin-left: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-hero-character img { animation: none; }
  .faq-button { transition: none; }
  .faq-button:hover { transform: none; }
  .faq-flow-track summary > i { transition: none; }
}