/* Where I Belong uses the shared collection hero, grid and Play Best controls. */
.belong-page { --wb-ink:#171717; --wb-muted:#444; --wb-gold:#efbd65; --wb-cream:#fff6e5; --wb-line:#e7dfe3; background:#fff; color:var(--wb-ink); }
.belong-page :is(h1,h2,h3) { margin:0; text-wrap:balance; }
.belong-page h2 { font-size:clamp(36px,4.2vw,62px); }
.belong-page h3 { font-size:clamp(25px,2.2vw,32px); }
.belong-page :is(h1,h2) > span { display:block; }
.belong-page p { font-size:20px; line-height:1.6; text-wrap:pretty; margin:0 0 22px; }
.belong-page .wb-kicker { font-size:15px; letter-spacing:.07em; line-height:1.45; margin:0 0 22px; color:var(--wb-ink); }
.belong-page :is(section,div)[id] { scroll-margin-top:110px; }
.belong-page :is(a,button,summary):focus-visible { outline:3px solid #ff2e88; outline-offset:5px; }
.wb-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.wb-text-link { display:inline-block; font-size:18px; line-height:1.5; color:var(--wb-ink); text-decoration:underline; text-underline-offset:5px; }
.wb-text-link:hover { color:#ff2e88; }
.wb-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; max-width:100%; padding:16px 24px; border:2px solid var(--wb-ink); border-radius:7px; background:var(--wb-ink); color:#fff; font-size:18px; line-height:1.4; text-align:center; cursor:pointer; }
.wb-button:hover,.wb-button:active { background:var(--wb-gold); color:var(--wb-ink); border-color:var(--wb-ink); }
.wb-button--small { font-size:17px; padding:12px 20px; }
.belong-page .wb-hero h1 { font-size:clamp(68px,6.7vw,98px); margin:0 0 25px; color:var(--wb-ink); }
.belong-page .wb-hero .hero__tag { font-size:12px; letter-spacing:.07em; }
.belong-page .wb-hero-lead { font-size:25px; color:var(--wb-ink); margin-bottom:16px; }
.belong-page .wb-hero .lead { max-width:440px; color:var(--wb-muted); }
.wb-hero .product-editorial-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.wb-hero .hero__actions { flex-wrap:wrap; }
.wb-hero .product-editorial-image { border-color:#e8dfe0; box-shadow:0 22px 50px -25px #44233145; }
.wb-facts { background:var(--wb-gold); }
.wb-facts .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 30px; padding-block:24px; font-size:18px; }
.wb-try { padding:76px 0; background:var(--wb-cream); }
.wb-try-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"copy preview" "controls preview"; column-gap:80px; align-items:center; }
.wb-try-copy { grid-area:copy; align-self:end; }
.wb-try-controls { grid-area:controls; align-self:start; }
.wb-try h2 { margin-bottom:30px; }
.wb-try-copy > p:not(.wb-kicker) { max-width:460px; color:var(--wb-muted); }
.wb-draw-controls { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:10px; }
#wb-draw-count { font-size:17px; white-space:nowrap; color:var(--wb-muted); }
.wb-try-controls > .wb-text-link { margin-top:24px; }
.wb-featured-card { grid-area:preview; margin:0; text-align:center; }
.wb-featured-card > a { display:block; width:min(100%,330px); margin:auto; border-radius:15px; transform:rotate(3deg); box-shadow:0 24px 35px -18px #512b3c66; }
.wb-featured-card img { display:block; width:100%; height:auto; aspect-ratio:3/5; border-radius:15px; }
.wb-featured-card figcaption { margin-top:27px; font-size:15px; line-height:1.5; color:var(--wb-muted); }
.wb-life > img { display:block; width:100%; height:auto; }
.wb-life-caption { background:var(--wb-ink); color:#fff; }
.wb-life-caption .wrap { display:grid; grid-template-columns:.7fr 1.5fr; gap:60px; align-items:center; padding-block:38px; }
.wb-life-caption .wb-kicker { color:#fff; margin:0; font-size:16px; }
.wb-life h2 { font-size:clamp(30px,3.2vw,47px); }
.wb-how { padding-top:90px; padding-bottom:76px; }
.wb-how-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.wb-how-intro { max-width:410px; margin-top:26px!important; color:var(--wb-muted); }
.wb-steps { margin:0; padding:0; list-style:none; }
.wb-steps li { display:grid; grid-template-columns:30px 1fr; gap:23px; padding:26px 0; border-bottom:1px solid var(--wb-line); }
.wb-steps li:first-child { padding-top:0; }
.wb-step-number { font-size:16px; color:var(--wb-muted); padding-top:4px; }
.wb-steps h3 { margin:0 0 14px; }
.wb-steps p { font-size:18px; color:var(--wb-muted); margin:0; }
.wb-rule-details { margin-top:50px; border-top:2px solid var(--wb-gold); }
.wb-rule-details details { border-bottom:1px solid var(--wb-line); }
.wb-rule-details summary,.wb-questions summary { cursor:pointer; font-size:21px; line-height:1.4; text-wrap:pretty; padding:22px 0; }
.wb-rule-details details > div { max-width:900px; padding-bottom:26px; }
.wb-rule-details p { color:var(--wb-muted); font-size:18px; }
.wb-rule-details p:last-child { margin-bottom:0; }
#wb-answer:not([hidden]) { margin-top:24px; border-left:3px solid var(--wb-gold); padding:8px 0 8px 25px; }
.wb-rule-details .wb-answer-quote { color:var(--wb-ink); font-size:27px; }
.wb-cards { padding:76px 0 80px; background:#faf6f1; }
.wb-section-intro { max-width:720px; margin-bottom:46px; }
.wb-section-intro > p:last-child { margin:24px 0 0; max-width:630px; color:var(--wb-muted); }
.wb-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:46px; }
.wb-card-grid figure { min-width:0; margin:0; }
.wb-card-link { display:block; max-width:305px; margin:0 auto; border-radius:14px; box-shadow:0 18px 30px -14px #38232f55; }
.wb-card-link:hover { box-shadow:0 22px 36px -12px #38232f66; }
.wb-card-link img { display:block; width:100%; height:auto; aspect-ratio:3/5; border-radius:14px; }
.wb-card-grid figcaption { border-top:3px solid var(--wb-gold); margin-top:34px; padding-top:23px; }
.wb-card-meta { display:block; color:var(--wb-ink); font-size:14px; line-height:1.4; margin-bottom:13px; }
.wb-card-grid h3 { margin-bottom:13px; font-size:28px; }
.wb-card-grid figcaption p { font-size:18px; color:var(--wb-muted); margin:0 0 16px; }
.wb-card-grid .wb-text-link { font-size:17px; }
.wb-moments { padding-top:80px; padding-bottom:80px; }
.wb-moment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.wb-moment-grid figure { margin:0; min-width:0; background:#fff; border:1px solid var(--wb-line); border-radius:20px; overflow:hidden; }
.wb-moment-grid img { display:block; width:100%; height:auto; aspect-ratio:3/2; }
.wb-moment-grid figcaption { border-top:4px solid var(--wb-gold); padding:28px; }
.wb-moment-grid .wb-kicker { font-size:14px; margin-bottom:15px; }
.wb-moment-grid h3 { margin-bottom:15px; }
.wb-moment-grid figcaption > p:last-child { margin:0; color:var(--wb-muted); font-size:18px; }
.wb-faq { border-top:1px solid var(--wb-line); padding:65px 0 80px; }
.wb-faq-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; }
.wb-faq h2 { font-size:clamp(36px,3.7vw,54px); }
.wb-guide { display:flex; align-items:center; gap:23px; margin-top:36px; max-width:420px; }
.wb-guide > img { display:block; flex:none; width:100px; height:auto; box-shadow:0 9px 20px -8px #38232f44; }
.wb-guide > span { font-size:22px; line-height:1.4; }
.wb-guide small { display:block; color:var(--wb-muted); font-size:16px; line-height:1.5; margin:8px 0 12px; }
.wb-guide .wb-text-link { font-size:17px; }
.wb-questions details { border-bottom:1px solid var(--wb-line); }
.wb-questions details:first-child { border-top:1px solid var(--wb-line); }
.wb-questions p { font-size:18px; color:var(--wb-muted); }
.wb-questions p a { text-decoration:underline; text-underline-offset:4px; }
.wb-end { padding:74px 0 56px; text-align:center; background:var(--wb-gold); }
.wb-end .wb-kicker { color:var(--wb-ink); }
.wb-end h2 { margin-bottom:25px; }
.wb-end p:not(.wb-kicker) { margin-bottom:28px; }
.wb-end .wb-button:hover,.wb-end .wb-button:active { background:#fff; color:var(--wb-ink); }
.wb-custom-link { display:block; width:fit-content; max-width:100%; margin:24px auto 0; font-size:18px; line-height:1.5; text-decoration:underline; text-underline-offset:5px; }
.wb-end small { display:block; max-width:760px; margin:40px auto 0; color:var(--wb-muted); font-size:13px; line-height:1.6; }
.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:var(--wb-ink); overflow:auto; }
.wb-viewer[open] { display:flex; flex-direction:column; gap:18px; }
/* The open state controls scroll locking immediately, including rapid reopen/Escape. */
body:has(.belong-page .wb-viewer[open]) { overflow:hidden; }
.wb-viewer::backdrop { background:#25131eee; }
.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 #ccbfc5; border-radius:6px; background:#fff; color:var(--wb-ink); font-size:28px; line-height:1; cursor:pointer; }
.wb-viewer-close:hover,.wb-viewer-controls button:hover { background:var(--wb-gold); color:var(--wb-ink); border-color:#8c6432; }
.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-try-grid { column-gap:48px; }
  .wb-how-grid,.wb-faq-grid { gap:48px; }
  .wb-card-grid { gap:30px; }
  .wb-card-grid h3 { font-size:26px; }
  .wb-life-caption .wrap { gap:35px; }
  .belong-page .wb-hero h1 { font-size:70px; }
}
@media (max-width:900px) {
  .wb-life-caption .wrap { grid-template-columns:1fr; gap:20px; }
  .wb-life-caption .wb-kicker br { display:none; }
  .wb-how-grid,.wb-faq-grid { grid-template-columns:1fr; gap:40px; }
  .wb-how-intro { max-width:580px; }
  .wb-card-grid { gap:24px; }
  .wb-card-grid h3 { font-size:24px; }
  .wb-guide { margin-top:30px; }
  .wb-facts .wrap { font-size:16px; }
}
@media (max-width:760px) {
  .wb-hero .product-editorial-grid,.wb-try-grid { grid-template-columns:1fr; }
  .belong-page .wb-hero h1 { font-size:clamp(62px,12vw,90px); }
  .wb-hero .hero__actions { flex-direction:row; align-items:center; }
  .belong-page .wb-hero-lead { font-size:24px; }
  .wb-try-grid { grid-template-areas:"copy" "preview" "controls"; gap:36px; }
  .wb-try-copy > p:last-child { margin-bottom:0; }
  .wb-try-controls { justify-self:center; text-align:center; }
  .wb-try-controls .wb-draw-controls { justify-content:center; margin-top:0; }
  .wb-try { padding:52px 0; }
  .wb-featured-card > a { width:min(80%,310px); }
  .wb-featured-card figcaption { margin-top:24px; }
  .wb-card-grid { grid-template-columns:1fr; gap:48px; max-width:380px; margin-inline:auto; }
  .wb-card-link { max-width:300px; }
  .wb-card-grid figcaption { margin-top:28px; }
  .wb-card-grid h3 { font-size:29px; }
  .wb-moment-grid { grid-template-columns:1fr; gap:32px; }
  .wb-moment-grid figure { max-width:580px; }
  .wb-facts .wrap { justify-content:center; gap:14px 24px; padding-block:20px; }
}
@media (max-width:600px) {
  .belong-page h2 { font-size:clamp(32px,9.3vw,42px); }
  .belong-page h3 { font-size:28px; }
  .belong-page p { font-size:18px; }
  .belong-page .wb-kicker { font-size:14px; margin-bottom:18px; }
  .belong-page .wb-hero .hero__tag { font-size:11px; padding-inline:13px; }
  .wb-hero .product-editorial-image { border-radius:16px; }
  .wb-hero .hero__actions .btn { flex:0 0 auto; white-space:nowrap; }
  .wb-try h2 { margin-bottom:24px; }
  .wb-draw-controls { gap:16px; }
  .wb-button { font-size:17px; padding:15px 19px; gap:15px; }
  .wb-facts .wrap { display:grid; grid-template-columns:1fr 1fr; font-size:15px; text-align:center; gap:12px 18px; }
  .wb-facts span:last-child { grid-column:1/-1; }
  .wb-life-caption .wrap { padding-block:28px; }
  .wb-life-caption .wb-kicker { margin:0; font-size:13px; }
  .wb-life h2 { font-size:clamp(24px,6.8vw,36px); }
  .wb-how,.wb-moments { padding-block:54px; }
  .wb-how-grid { gap:35px; }
  .wb-how-intro { margin-top:22px!important; }
  .wb-steps li { gap:17px; }
  .wb-rule-details { margin-top:34px; }
  .wb-rule-details summary,.wb-questions summary { font-size:20px; padding-block:20px; }
  .wb-cards { padding-block:52px; }
  .wb-section-intro { margin-bottom:34px; }
  .wb-section-intro > p:last-child { margin-top:20px; }
  .wb-moment-grid figcaption { padding:24px; }
  .wb-faq { padding-block:48px 56px; }
  .wb-guide { gap:20px; }
  .wb-guide > img { width:82px; }
  .wb-guide > span { font-size:20px; }
  .wb-guide small { font-size:15px; }
  .wb-end { padding-block:52px 44px; }
  .wb-custom-link { font-size:17px; max-width:270px; }
  .wb-viewer[open] { gap:14px; padding:16px; }
  .wb-viewer-heading h2 { font-size:25px; }
  .wb-viewer-controls p { font-size:16px; }
}
@media (max-width:360px) {
  .wb-hero .hero__actions .btn { width:100%; }
}