@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-variable.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body:is(.st-shell-hub, .st-shell-peeko) { margin: 0; background: #f6f5ee; color: #213b32; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
.studio-site, .studio-site *, .studio-site *::before, .studio-site *::after { box-sizing: border-box; }
.studio-site { min-height: 100vh; overflow: clip; background-image: radial-gradient(#dadcd0 .6px, transparent .6px); background-size: 8px 8px; }
.studio-site :is(h1, h2, p, ul) { margin: 0; }
.studio-site a { color: inherit; text-decoration: none; }
.studio-site a:focus-visible { outline: 3px solid #13734d; outline-offset: 6px; }
.studio-width { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.studio-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: #163f30; color: #fff; }
.studio-skip:focus { left: 0; }
.studio-topbar { height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dbdfd3; gap: 20px; }
.studio-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: -.6px; }
.studio-brand-light { font-weight: 500; color: #839083; }
.studio-mark { width: 30px; height: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; transform: rotate(-7deg); }
.studio-mark b { background: #264d3a; border-radius: 3px; }
.studio-mark b:nth-child(2) { background: #b9cda2; border-radius: 50%; }
.studio-mark b:nth-child(3) { background: #b8afcc; border-radius: 50%; }
.studio-toplink { display: flex; align-items: center; gap: 9px; font-size: 10px; color: #73816d !important; font-weight: 700; letter-spacing: .2px; }
.studio-live-dot { width: 6px; height: 6px; background: #568d54; border-radius: 50%; box-shadow: 0 0 0 4px #e4eddb; }
.hub-intro { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 60px; padding: 60px 0 42px; }
.studio-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: 2.3px; color: #6a8262; text-transform: uppercase; margin-bottom: 17px !important; }
.studio-eyebrow > span { color: #2d6143; font-size: 19px; line-height: 1; }
.hub-intro h1 { font-size: clamp(46px, 5.2vw, 66px); font-weight: 800; line-height: 1.07; letter-spacing: -3.5px; }
.hub-intro h1 > span { color: #557d4b; }
.hub-intro-aside { padding-bottom: 3px; max-width: 330px; justify-self: end; position: relative; }
.hub-intro-aside p { color: #6e7f68; font-size: 14px; line-height: 1.85; }
.hub-prompt { display: block; margin-top: 15px; font-size: 10px; color: #88947e; }
.hub-doodle { font-family: Georgia, serif; position: absolute; font-size: 61px; color: #a4b29a; right: 15px; top: -72px; transform: rotate(8deg); }
.hub-destinations { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.hub-card { position: relative; display: flex; flex-direction: column; border-radius: 24px; padding: 26px 30px 25px; min-width: 0; isolation: isolate; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.hub-card:hover { transform: translateY(-6px); box-shadow: 0 18px 35px rgb(31 52 34 / 12%); }
.hub-card:focus-visible { outline-offset: 7px !important; }
.hub-tunnel { background: #173e2e; color: #f3f8eb !important; }
.hub-peeko { background: #e4dff0; color: #463a65 !important; border: 1px solid #d5cde5; }
.hub-card-top { display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.hub-category { font-size: 9px; letter-spacing: 1.8px; font-weight: 800; }
.hub-category > span { opacity: .45; }
.hub-status { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #537055; border-radius: 6px; padding: 6px 9px; color: #c5dbaf; font-size: 8px; font-weight: 700; }
.hub-status > i { width: 4px; height: 4px; background: #c5dbaf; border-radius: 50%; }
.hub-peeko .hub-status { background: #ebe7f5; color: #756492; border-color: #ccc1df; }
.hub-tunnel-art { height: 190px; position: relative; margin: 0 -10px 5px; display: grid; place-items: center; }
.hub-tunnel-art > img { position: absolute; width: 310px; height: 310px; top: -67px; right: -14px; opacity: .12; transform: rotate(-22deg); }
.hub-shield { position: relative; width: 88px; height: 98px; display: grid; place-items: center; color: #d0e7b3; border-radius: 26px; background: linear-gradient(140deg, #477350, #254e39); border: 1px solid #71906b; transform: rotate(-8deg); box-shadow: 0 16px 28px rgb(3 24 12 / 25%); }
.hub-shield > svg { width: 40px; height: 49px; }
.hub-orbit { position: absolute; border: 1px solid #416a49; width: 210px; height: 125px; border-radius: 50%; transform: rotate(-22deg); }
.hub-orbit-two { width: 160px; height: 155px; transform: rotate(45deg); border-style: dashed; opacity: .55; }
.hub-art-label { position: absolute; top: 40px; left: 24px; border: 1px solid #547250; padding: 7px 10px; border-radius: 7px; font-size: 8px; font-weight: 700; letter-spacing: 1px; background: #284e37; transform: rotate(-9deg); }
.hub-art-dot { width: 10px; height: 10px; background: #cae7a4; border: 2px solid #315539; border-radius: 50%; box-shadow: 0 0 0 6px rgb(204 231 164 / 10%); position: absolute; right: 105px; bottom: 28px; }
.hub-peeko-art { height: 190px; position: relative; display: grid; place-items: center; margin-bottom: 5px; }
.hub-number-grid { display: grid; grid-template-columns: repeat(3, 49px); gap: 7px; transform: rotate(-12deg); z-index: 1; }
.hub-number-grid > span { width: 49px; height: 49px; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #8873ad; border: 1px solid #c8bbdc; border-radius: 11px; background: #f0ecf8; box-shadow: 0 4px 0 #c9bddb; }
.hub-number-grid > .hub-number-picked { background: #d4e799; color: #56662c; border-color: #b4c775; box-shadow: 0 4px 0 #afc073; transform: translateY(-4px) scale(1.08); position: relative; }
.hub-number-picked small { position: absolute; right: -8px; top: -10px; font-size: 23px; color: #637b32; }
.hub-spark { position: absolute; font-size: 38px; color: #a38ac3; font-weight: 400; }
.hub-spark-one { left: 41px; top: 57px; transform: rotate(13deg); }
.hub-spark-two { right: 46px; top: 115px; font-size: 48px; }
.hub-game-orbit { position: absolute; width: 300px; height: 133px; border: 1px solid #c6b9da; border-radius: 50%; transform: rotate(-23deg); }
.hub-card-copy h2 { font-size: 32px; font-weight: 800; letter-spacing: -1.3px; margin-bottom: 12px; }
.hub-card-copy > p { font-size: 12px; line-height: 1.8; color: #b3c7a8; max-width: 395px; }
.hub-peeko .hub-card-copy > p { color: #7a6b8f; max-width: 340px; }
.hub-peeko-wordmark { display: inline-block; color: #8f77b0; font-size: 31px; margin-left: 12px; transform: rotate(12deg); vertical-align: baseline; }
.hub-features { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 24px 0 29px !important; }
.hub-features > li { display: flex; align-items: center; gap: 8px; font-size: 10px; line-height: 1.6; color: #d0ddc3; }
.hub-features > li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #abc88e; flex-shrink: 0; }
.hub-peeko .hub-features > li { color: #75628b; }
.hub-peeko .hub-features > li::before { background: #ab95c3; }
.hub-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: auto; border-top: 1px solid #426146; padding-top: 19px; font-size: 11px; font-weight: 700; }
.hub-peeko .hub-card-bottom { border-color: #c6b9d6; }
.hub-enter { width: 37px; height: 37px; display: grid; place-items: center; font-size: 23px; border-radius: 50%; background: #cbe6a4; color: #294d30; transition: transform .25s; }
.hub-peeko .hub-enter { color: #665080; background: #f3eff9; }
.hub-card:hover .hub-enter { transform: rotate(45deg); }
.hub-signoff { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 35px 0 42px; }
.hub-signoff p { color: #87957b; font-size: 10px; text-align: center; }
.hub-signoff-line { width: 44px; height: 1px; background: #d2dccc; }
.studio-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #dbdfd3; padding-block: 24px 28px; font-size: 9px; color: #87917e; }
.studio-footer-note { display: flex; align-items: center; gap: 10px; }
.studio-footer-note > span { font-size: 19px; color: #77936c; }

/* Peeko has a separate, readable policy page. */
body.st-shell-peeko { background: #faf8fc; color: #463a65; }
body.st-shell-peeko .studio-site { background-image: none; }
body.st-shell-peeko .studio-topbar, body.st-shell-peeko .studio-footer { border-color: #e7dfef; }
.peeko-brand { font-size: 25px; }
.peeko-brand-icon { background: #e4dff0; width: 35px; height: 35px; display: grid; place-items: center; font-size: 21px; border-radius: 11px; transform: rotate(-8deg); color: #8971ad; }
.studio-back { display: inline-flex; gap: 7px; align-items: center; font-size: 11px; color: #89799e !important; }
.studio-back > span { font-size: 22px; }
.peeko-policy { padding-block: 65px 80px; }
.peeko-policy-intro { max-width: 710px; }
.peeko-policy-intro .studio-eyebrow { color: #8c71ab; }
.peeko-policy h1 { font-size: clamp(36px, 4.5vw, 58px); letter-spacing: -2.5px; line-height: 1.15; font-weight: 800; }
.peeko-policy-intro > p:not(.studio-eyebrow) { color: #8a7b9c; font-size: 13px; line-height: 1.9; }
.peeko-policy-intro .peeko-policy-date { display: inline-block; font-size: 10px !important; background: #ece7f3; color: #8c74a7 !important; border-radius: 7px; padding: 7px 12px; margin-block: 23px 18px; }
.peeko-policy-layout { display: grid; grid-template-columns: 230px 1fr; gap: 65px; margin-top: 50px; align-items: start; }
.peeko-policy-toc { position: sticky; top: 35px; display: flex; flex-direction: column; gap: 17px; font-size: 11px; padding-block: 24px; border-top: 1px solid #ded4e9; }
.peeko-policy-toc > span { font-size: 9px; text-transform: uppercase; font-weight: 800; letter-spacing: 1.5px; color: #ac99bf; margin-bottom: 5px; }
.peeko-policy-toc > a { color: #8e7ca3; line-height: 1.5; }
.peeko-policy-toc > a:hover { color: #594470; }
.peeko-policy-sections > section { position: relative; padding: 30px 35px 35px; border: 1px solid #e6dfec; border-radius: 16px; background: #fff; margin-bottom: 18px; }
.peeko-policy-sections h2 { font-size: 20px; line-height: 1.4; letter-spacing: -.5px; font-weight: 800; margin-bottom: 15px; max-width: 90%; }
.peeko-policy-sections p { color: #81738f; font-size: 13px; line-height: 1.95; }
.peeko-policy-sections p > a { color: #81619e; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.peeko-section-num { position: absolute; right: 23px; top: 30px; font-size: 12px; font-weight: 700; color: #c6b6d6; }

@media (max-width: 900px) {
  .studio-width { width: calc(100% - 56px); }
  .hub-intro { gap: 25px; padding-top: 45px; }
  .hub-intro h1 { font-size: 51px; letter-spacing: -2.7px; }
  .hub-intro-aside p { font-size: 12px; }
  .hub-doodle { font-size: 49px; top: -62px; }
  .hub-card { padding-inline: 24px; }
  .hub-card-copy h2 { font-size: 27px; }
  .hub-tunnel-art > img { right: -70px; }
  .hub-art-label { left: 0; }
  .hub-number-grid { grid-template-columns: repeat(3, 44px); gap: 6px; }
  .hub-number-grid > span { width: 44px; height: 44px; font-size: 20px; }
  .hub-spark-one { left: 0; }
  .hub-spark-two { right: 0; }
  .hub-game-orbit { width: 235px; }
  .peeko-policy-layout { grid-template-columns: 190px 1fr; gap: 28px; }
  .peeko-policy-sections > section { padding-inline: 27px; }
}
@media (max-width: 650px) {
  .studio-width { width: calc(100% - 40px); }
  .studio-topbar { height: 80px; }
  .studio-brand { font-size: 18px; gap: 9px; }
  .studio-mark { width: 25px; height: 25px; gap: 3px; }
  .studio-toplink { font-size: 8px; gap: 7px; max-width: 120px; line-height: 1.6; }
  .studio-live-dot { flex-shrink: 0; }
  .hub-intro { grid-template-columns: 1fr; gap: 22px; padding: 38px 0 30px; }
  .hub-intro h1 { font-size: clamp(42px, 10vw, 57px); letter-spacing: -2.5px; }
  .studio-eyebrow { font-size: 8px; margin-bottom: 17px !important; }
  .hub-intro-aside { justify-self: start; max-width: none; padding-right: 32px; }
  .hub-intro-aside p { font-size: 12px; }
  .hub-prompt { font-size: 9px; margin-top: 8px; }
  .hub-doodle { right: 0; top: 0; font-size: 50px; }
  .hub-destinations { grid-template-columns: 1fr; gap: 22px; }
  .hub-card { border-radius: 20px; padding: 23px 25px; }
  .hub-card-copy h2 { font-size: 31px; }
  .hub-tunnel-art, .hub-peeko-art { height: 180px; }
  .hub-tunnel-art > img { right: -10px; }
  .hub-art-label { left: 20px; }
  .hub-game-orbit { width: 280px; }
  .hub-spark-one { left: 30px; }
  .hub-spark-two { right: 25px; }
  .hub-features { margin-top: 22px !important; }
  .hub-signoff { gap: 12px; padding-block: 28px 32px; }
  .hub-signoff-line { width: 24px; flex-shrink: 0; }
  .hub-signoff p { font-size: 9px; line-height: 1.7; }
  .studio-footer { flex-wrap: wrap; font-size: 8px; gap: 12px; padding-block: 22px; }
  .studio-footer-note { display: none; }
  .peeko-policy { padding-block: 38px 50px; }
  .peeko-policy h1 { font-size: 37px; letter-spacing: -1.6px; }
  .peeko-policy-layout { grid-template-columns: 1fr; gap: 23px; margin-top: 30px; }
  .peeko-policy-toc { position: static; padding-block: 20px; gap: 13px; }
  .peeko-policy-sections > section { padding: 26px 23px; }
  .peeko-policy-sections h2 { font-size: 18px; padding-right: 20px; max-width: none; }
  .peeko-policy-sections p { font-size: 12px; }
  .studio-back { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .studio-site *, .studio-site *::before, .studio-site *::after { transition: none !important; animation: none !important; }
}