/* Where I Belong: original card artwork, woodland colour, clear reading order. */
.belong-page { --wb-ink:#233b31; --wb-muted:#566359; --wb-gold:#efc16c; --wb-line:#d8dfd3; background:#fff; color:var(--wb-ink); }
.belong-page :is(h1,h2,h3) { margin:0; text-wrap:balance; }
.belong-page h2 { font-size:clamp(32px,4.1vw,57px); line-height:1.12; }
.belong-page h3 { font-size:clamp(25px,2.3vw,31px); }
.belong-page h2 > span,.wb-promise > span { display:block; white-space:nowrap; }
.belong-page p { margin:0 0 22px; font-size:20px; line-height:1.6; text-wrap:pretty; }
.belong-page .wb-kicker { margin:0 0 20px; font-size:15px; letter-spacing:.09em; line-height:1.5; color:#786039; }
.belong-page :is(section,article,details)[id] { scroll-margin-top:110px; }
.wb-back,.wb-link { font-size:18px; line-height:1.45; text-decoration:underline; text-underline-offset:5px; }
.wb-back { display:inline-block; margin-bottom:34px; color:var(--wb-muted); font-size:16px; }
.wb-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:30px; }
.wb-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; max-width:100%; padding:17px 23px; background:var(--wb-ink); color:#fff; border:2px solid var(--wb-ink); border-radius:7px; font-size:18px; line-height:1.35; text-align:center; cursor:pointer; }
.wb-button:hover,.wb-button:active { background:#efc16c; border-color:#efc16c; color:#233b31; }
.wb-button--small { padding:12px 18px; font-size:17px; }
.belong-page :is(a,button,summary):focus-visible { outline:3px solid #a46a16; outline-offset:5px; }
.wb-hero { padding-top:128px; padding-bottom:64px; }
.wb-hero-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:42px; align-items:center; }
.wb-hero h1 { font-size:clamp(40px,4.6vw,72px); line-height:1.08; white-space:nowrap; margin-bottom:28px; }
.belong-page .wb-promise { font-size:clamp(30px,2.9vw,42px); line-height:1.18; margin-bottom:26px; }
.wb-hero-copy > p:not(.wb-kicker):not(.wb-promise) { max-width:450px; color:var(--wb-muted); }
.wb-hero-photo { margin:0; }
.wb-hero-photo img { display:block; width:100%; height:auto; border-radius:20px; }
.wb-facts { background:var(--wb-ink); color:#fff; }
.wb-facts > .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 28px; padding-block:24px; font-size:18px; }
.wb-cards { padding:80px 0; background:#faf6ed; }
.wb-heading-pair { display:grid; grid-template-columns:1.08fr 1fr; align-items:end; gap:8%; margin-bottom:44px; }
.wb-heading-pair > p { max-width:500px; margin:0; color:var(--wb-muted); }
.wb-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; max-width:1080px; margin:0 auto; }
.wb-card-grid figure { margin:0; min-width:0; }
.wb-card-link { display:block; border-radius:14px; box-shadow:0 16px 30px -16px #233b3155; }
.wb-card-link:hover { box-shadow:0 18px 36px -14px #233b3170; }
.wb-card-link img { display:block; width:100%; height:auto; aspect-ratio:3/5; object-fit:contain; border-radius:14px; }
.wb-card-grid figcaption { padding-top:24px; text-align:center; }
.wb-card-grid h3 { margin-bottom:10px; }
.wb-card-grid figcaption > span { font-size:17px; color:var(--wb-muted); }
.wb-enlarge { color:#725523; text-decoration:underline; text-underline-offset:3px; }
.wb-story { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; background:var(--wb-ink); color:#fff; }
.wb-story > img { display:block; width:100%; height:auto; }
.wb-story > div { padding:44px clamp(30px,4.2vw,66px); }
.wb-story .wb-kicker { color:var(--wb-gold); }
.wb-story h2 { margin-bottom:28px; }
.wb-story p:not(.wb-kicker) { color:#e3eadd; }
.wb-story .wb-link { display:inline-block; color:var(--wb-gold); margin-top:8px; }
.wb-how { padding-top:88px; padding-bottom:88px; }
.wb-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; list-style:none; padding:0; margin:0; }
.wb-steps li { min-width:0; border-top:3px solid #dfb567; padding-top:25px; }
.wb-step-number { display:block; font-size:18px; color:#816130; margin-bottom:18px; }
.wb-steps h3 { margin-bottom:18px; }
.wb-steps p { font-size:18px; color:var(--wb-muted); margin:0; }
.wb-rule-details { margin-top:42px; padding:8px 28px; background:#faf8f2; border:1px solid #dedfd3; border-radius:14px; }
.wb-rule-details details + details { border-top:1px solid #dedfd3; }
.wb-rule-details summary { cursor:pointer; padding:22px 0; font-size:22px; line-height:1.4; text-wrap:pretty; }
.wb-rule-details details > div { padding-bottom:24px; max-width:900px; }
.wb-rule-details p { font-size:18px; color:var(--wb-muted); }
.wb-rule-details p:last-child { margin-bottom:0; }
.wb-rule-details #wb-answer:not([hidden]) { margin-top:22px; border-left:3px solid #bd8e3e; padding:8px 0 8px 24px; }
.wb-rule-details .wb-answer-quote { font-size:25px; color:var(--wb-ink); }
.wb-moments { padding:80px 0; background:#f0f4ed; }
.wb-moment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.wb-moment-grid article { min-width:0; background:#fff; border:1px solid var(--wb-line); border-radius:16px; overflow:hidden; }
.wb-moment-grid article > img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.wb-moment-grid article > div { padding:30px; }
.wb-moment-grid .wb-kicker { margin-bottom:15px; }
.wb-moment-grid h3 { margin-bottom:17px; }
.wb-moment-grid article > div > p:last-child { margin:0; color:var(--wb-muted); font-size:18px; }
.wb-guide { display:grid; grid-template-columns:250px 1fr; align-items:center; gap:9%; max-width:1080px; padding-top:80px; padding-bottom:80px; }
.wb-guide-cover { display:block; max-width:230px; }
.wb-guide-cover img { width:100%; height:auto; box-shadow:0 16px 34px -16px #233b3160; }
.wb-guide h2 { margin-bottom:25px; }
.wb-guide p:not(.wb-kicker) { color:var(--wb-muted); }
.wb-faq { padding:75px 0; background:#faf8f2; }
.wb-faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:9%; }
.wb-faq details { border-top:1px solid #d7dccc; }
.wb-faq details:last-child { border-bottom:1px solid #d7dccc; }
.wb-faq summary { padding:22px 0; cursor:pointer; font-size:21px; line-height:1.45; text-wrap:pretty; }
.wb-faq details p { font-size:18px; color:var(--wb-muted); margin-bottom:24px; }
.wb-faq details p a { text-decoration:underline; text-underline-offset:4px; }
.wb-end { padding:80px 0; background:var(--wb-ink); color:#fff; }
.wb-end .wb-kicker { color:var(--wb-gold); }
.wb-end h2 { max-width:820px; margin-bottom:26px; }
.wb-end p:not(.wb-kicker) { max-width:620px; color:#e0e9dd; }
.wb-end .wb-button { background:var(--wb-gold); border-color:var(--wb-gold); color:#233b31; }
.wb-end .wb-button:hover,.wb-end .wb-button:active { background:#fff; border-color:#fff; color:#233b31; }
.wb-end .wb-link { color:#fff; }
.wb-end small { display:block; max-width:740px; margin-top:42px; color:#bfccbd; font-size:14px; line-height:1.5; }
.belong-page .wb-viewer { position:fixed; inset:0; margin:auto; width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:22px; border:0; border-radius:18px; background:#fff; color:#233b31; overflow:auto; }
.wb-viewer[open] { display:flex; flex-direction:column; gap:18px; }
.wb-viewer::backdrop { background:#10231ce8; }
.wb-viewer-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.wb-viewer-heading h2 { font-size:28px; }
.wb-viewer-close,.wb-viewer-controls button { flex:none; width:44px; height:44px; border:1px solid #b7c8b6; border-radius:6px; background:#fff; color:#233b31; font-size:28px; line-height:1; cursor:pointer; }
.wb-viewer-close:hover,.wb-viewer-controls button:hover { background:#efc16c; color:#233b31; border-color:#a98542; }
.wb-viewer > img { display:block; align-self:center; height:min(66dvh,650px); max-height:calc(100dvh - 190px); width:auto; max-width:100%; object-fit:contain; border-radius:10px; }
.wb-viewer-controls { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.wb-viewer-controls p { margin:0; text-align:center; font-size:17px; line-height:1.3; }
@media (max-width:1100px) {
  .wb-hero-grid { gap:30px; grid-template-columns:1fr 1.15fr; }
  .wb-hero h1 { font-size:clamp(40px,4.7vw,54px); }
  .wb-hero .wb-actions { gap:20px; }
  .wb-story > div { padding:35px 30px; }
  .wb-story h2 { font-size:clamp(32px,3.6vw,44px); }
  .wb-card-grid { gap:30px; }
}
@media (max-width:900px) {
  .wb-hero { padding-top:110px; padding-bottom:48px; }
  .wb-hero-grid { grid-template-columns:1fr; gap:38px; }
  .wb-hero h1 { font-size:clamp(40px,7.7vw,68px); }
  .wb-hero-copy > p:not(.wb-kicker):not(.wb-promise) { max-width:640px; }
  .wb-hero .wb-promise { font-size:36px; }
  .wb-heading-pair { grid-template-columns:1fr; gap:24px; }
  .wb-heading-pair > p { max-width:680px; }
  .wb-story { grid-template-columns:1fr; }
  .wb-story > div { padding:46px clamp(20px,5vw,48px); }
  .wb-story > div > p { max-width:680px; }
  .wb-faq-grid { grid-template-columns:1fr; gap:34px; }
  .wb-guide { gap:40px; grid-template-columns:210px 1fr; }
  .wb-steps { gap:24px; }
  .wb-steps h3 { font-size:25px; }
}
@media (max-width:750px) {
  .wb-facts > .wrap { justify-content:flex-start; font-size:16px; gap:12px 24px; }
  .wb-card-grid { max-width:340px; grid-template-columns:1fr; gap:40px; }
  .wb-moment-grid { grid-template-columns:1fr; }
  .wb-steps { grid-template-columns:1fr; gap:30px; }
  .wb-steps h3 { font-size:28px; }
  .wb-guide { grid-template-columns:1fr; gap:35px; }
  .wb-guide-cover { max-width:210px; margin:auto; }
}
@media (max-width:600px) {
  .belong-page h2 { font-size:clamp(30px,8.4vw,39px); }
  .belong-page p { font-size:18px; }
  .belong-page .wb-kicker { font-size:14px; margin-bottom:16px; }
  .wb-hero { padding-top:102px; padding-bottom:38px; }
  .wb-back { margin-bottom:28px; font-size:15px; }
  .wb-hero h1 { font-size:clamp(40px,10.5vw,58px); margin-bottom:24px; }
  .wb-hero .wb-promise { font-size:32px; margin-bottom:22px; }
  .wb-hero-photo img { border-radius:12px; }
  .wb-actions { gap:22px; margin-top:26px; }
  .wb-button { padding:15px 19px; font-size:18px; gap:14px; }
  .wb-facts > .wrap { display:grid; gap:9px; padding-block:22px; }
  .wb-cards,.wb-moments,.wb-faq,.wb-end { padding-block:52px; }
  .wb-how,.wb-guide { padding-block:56px; }
  .wb-heading-pair { gap:22px; margin-bottom:32px; }
  .wb-card-grid { max-width:300px; }
  .wb-card-grid figcaption { padding-top:20px; }
  .wb-rule-details { margin-top:32px; padding-inline:20px; }
  .wb-rule-details summary { font-size:20px; }
  .wb-moment-grid article > div { padding:25px; }
  .wb-faq summary { font-size:20px; }
  .wb-viewer[open] { gap:14px; padding:16px; }
  .wb-viewer-heading h2 { font-size:25px; }
  .wb-viewer-controls p { font-size:16px; }
}