/* Product explanation extends the existing Klubio visual tokens. */
.skip-link:not(:focus){clip-path:inset(50%)}
.platform-section,.tables-section,.benefits-section{background:var(--paper);color:var(--ink);color-scheme:light}
.platform-section :focus-visible,.tables-section :focus-visible,.benefits-section :focus-visible,.faq-section :focus-visible,.experience :focus-visible{outline-color:#76519f}
.platform-steps{list-style:none;padding:0;margin:52px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.platform-steps li{border-top:1px solid #cfceda;padding-top:24px}
.platform-steps .step-number{color:#76519f}
.platform-steps h3{font-size:18px;margin-top:22px;min-height:49px}
.platform-steps p{font-size:13px;color:#656273;margin-top:12px;line-height:1.85}
.section-note{font-size:11px;color:#656273;margin-top:35px}
.platform-section .section-heading>p:last-child{max-width:390px;line-height:1.85}
.brand-copy>p+p{margin-top:16px!important}
.brand-copy h2{font-size:clamp(44px,4.5vw,66px)}
.brand-copy .brand-points{font-size:12px;line-height:1.7}
.mini-browser{display:flex;gap:16px;justify-content:center;align-items:center;padding:11px 15px;border-bottom:1px solid #13142744;font-size:9px}
.mini-browser>span:first-child{font-size:6px;letter-spacing:3px}
.mini-site .brand-poster{padding:24px 25px 18px}
.mini-site .brand-poster>strong{font-size:80px;margin-top:23px;line-height:.94}
.mini-site .poster-bottom{margin-top:22px;font-size:8px}
.mini-site .poster-star{font-size:135px;bottom:24px;right:8px}
.mini-ticket-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 25px;padding:15px 0;border-top:1px solid #13142744;font-size:11px}
.mini-ticket-row span>strong,.mini-ticket-row small{display:block}
.mini-ticket-row small{font-size:9px;margin-top:3px}
.mini-ticket-row>strong{white-space:nowrap}
.mini-site .brand-preview-footer{margin-top:4px}
.detail-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center}
.detail-copy .eyebrow{margin-bottom:24px;color:#656273}
.detail-copy h2{font-size:clamp(43px,4.7vw,68px)}
.detail-copy h2>span{color:#76519f}
.detail-copy>p:not(.eyebrow){font-size:14px;line-height:1.85;color:#656273;margin-top:24px;max-width:510px}
.detail-copy>p+p:not(.eyebrow){margin-top:15px}
.detail-list{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:14px}
.detail-list li{position:relative;padding-left:24px;font-size:13px;line-height:1.75}
.detail-list li:before{content:'↗';position:absolute;left:0;top:-1px;color:#76519f;font-size:17px}
.detail-copy>.detail-note{font-size:11px!important;border-top:1px solid #d7d4e0;padding-top:18px;line-height:1.85}
.reservation-demo{background:#e9e3f3;border:1px solid #d2c9dd;border-radius:10px;padding:29px;min-width:0}
.demo-card-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.demo-card-heading .eyebrow{font-size:9px;color:#655b75}
.demo-card-heading .demo-badge{font-size:8px;color:#655b75}
.table-plan{position:relative;width:172px;height:141px;margin:28px auto}
.table-plan>div{position:absolute;inset:16px 25px;background:var(--ink);color:var(--lilac);border-radius:15px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:9px;letter-spacing:.12em}
.table-plan strong{font-family:var(--display);font-size:45px;line-height:1.2;letter-spacing:0}
.table-plan i{position:absolute;background:#b394db;width:29px;height:35px;border-radius:6px;top:24px;left:0}
.table-plan i:nth-child(2){left:auto;right:0}
.table-plan i:nth-last-child(2){top:auto;bottom:24px}
.table-plan i:last-child{top:auto;bottom:24px;left:auto;right:0}
.reservation-demo>h3{font-size:20px;text-align:center}
.reservation-subtitle{font-size:11px;color:#655b75;text-align:center;margin-top:8px}
.quantity-row{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #cfc5df;padding-top:22px;margin-top:28px;font-size:12px}
.quantity-row small{display:block;font-size:9px;color:#655b75;margin-top:4px}
.quantity-control{display:flex;align-items:center;border:1px solid #bbaeCA;border-radius:6px;background:#f6f3fa}
.quantity-control button{width:44px;height:44px;background:transparent;color:var(--ink);font-size:23px;border-radius:5px}
.quantity-control button:hover:not(:disabled){background:#d8c5f4}
.quantity-control button:disabled{opacity:.35;cursor:not-allowed}
.quantity-control output{width:28px;text-align:center;font-size:17px;font-weight:600}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0;margin-top:6px;border-bottom:1px solid #cfc5df}
.price-row>span{font-size:12px;color:#655b75}
.price-row strong{font-size:25px;white-space:nowrap}
.reservation-status{font-size:12px;line-height:1.7;background:#dcefe5;color:#24533d;border:1px solid #b7d6c6;padding:14px;border-radius:6px;margin-top:20px;min-height:72px;display:flex;align-items:center}
.reservation-status[data-eligible=false]{background:#f9ecce;border-color:#ddc487;color:#62460e}
.simulation-note{font-size:10px;color:#655b75;line-height:1.8;margin-top:15px}
.entry-section{background:var(--ink);color:var(--paper)}
.entry-layout{grid-template-columns:1fr 1.1fr}
.entry-section .detail-copy .eyebrow,.entry-section .detail-copy>p{color:var(--muted)}
.entry-section .detail-copy h2>span,.entry-section .detail-list li:before{color:var(--lilac)}
.entry-section .detail-note{border-color:var(--line)}
.entry-demo{max-width:430px;width:100%;justify-self:center}
.staff-device{background:var(--paper);color:var(--ink);border:7px solid #414156;border-radius:32px;padding:26px 25px;max-width:315px;margin:0 auto;box-shadow:0 20px 50px #0003}
.staff-header{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid #d7d4e0;padding-bottom:18px}
.staff-header strong{font-size:23px;line-height:1;letter-spacing:-1.5px}
.staff-header>span{font-size:6px;letter-spacing:.04em}
.staff-event{text-align:center;margin-top:20px}
.staff-event>span{font-size:8px;letter-spacing:.1em;color:#656273;display:block}
.staff-event>strong{font-size:20px;display:block;margin-top:5px}
.scanner-frame{position:relative;width:142px;height:142px;margin:23px auto;display:grid;place-items:center}
.scanner-frame>span{width:77px;height:77px;border-radius:50%;display:grid;place-items:center;font-size:37px;background:#dcefe5;color:#24533d}
.scanner-frame[data-used=true]>span{background:#f9ecce;color:#62460e}
.scanner-frame i{width:25px;height:25px;position:absolute;border:2px solid #8a74a6;border-radius:3px}
.scanner-frame i:nth-of-type(1){top:0;left:0;border-right:0;border-bottom:0}
.scanner-frame i:nth-of-type(2){top:0;right:0;border-left:0;border-bottom:0}
.scanner-frame i:nth-of-type(3){bottom:0;left:0;border-right:0;border-top:0}
.scanner-frame i:nth-of-type(4){bottom:0;right:0;border-left:0;border-top:0}
.scan-result{background:#dcefe5;border:1px solid #b7d6c6;color:#24533d;border-radius:6px;padding:14px;min-height:124px}
.scan-result[data-scan-result=used]{background:#f9ecce;color:#62460e;border-color:#ddc487}
.scan-result strong{font-size:12px;display:block}
.scan-result p{font-size:10px;line-height:1.75;margin-top:7px}
.scan-ticket{text-align:center;border-top:1px solid #d7d4e0;margin-top:20px;padding-top:16px}
.scan-ticket>*{display:block}
.scan-ticket>span{font-size:8px;letter-spacing:.07em;color:#656273}
.scan-ticket>strong{font-size:12px;margin-top:5px}
.scan-ticket small{font-size:8px;margin-top:4px;color:#656273}
.scan-controls{display:flex;justify-content:center;gap:8px;margin-top:27px}
.scan-controls button{border:1px solid #666278;border-radius:6px;background:transparent;min-height:44px;padding:10px 13px;font-size:10px}
.scan-controls button:hover{border-color:var(--lilac);background:var(--surface)}
.scan-controls button[aria-pressed=true]{background:var(--lilac);border-color:var(--lilac);color:var(--ink)}
.entry-demo .small-note{font-size:9px;margin-top:13px}
.benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 35px;margin-top:52px}
.benefits-grid article{border-top:1px solid #cfceda;padding-top:25px;display:flex;flex-direction:column}
.benefit-symbol{font-size:30px;line-height:1;color:#76519f;margin-bottom:22px}
.benefits-grid h3{font-size:19px}
.benefits-grid article>p{font-size:13px;line-height:1.85;color:#656273;margin-top:13px;margin-bottom:20px}
.benefit-caption{font-size:11px;line-height:1.7;color:#60447d;margin-top:auto}
.benefits-cta{margin-top:44px;padding-top:25px;border-top:1px solid #cfceda;display:flex;justify-content:space-between;align-items:center;gap:30px}
.benefits-cta p{font-size:13px;color:#656273}
.benefits-cta .text-link{color:#60447d}
.experience-heading>p{max-width:360px;line-height:1.85}
.pilot-heading>p:last-child{max-width:570px}
.faq-list details p{line-height:1.9}
@media(max-width:1150px){
  .detail-layout{gap:55px}.platform-steps{gap:22px}.platform-steps h3{font-size:16px}.platform-steps p{font-size:12px}
  .reservation-demo{padding:24px}.reservation-demo>h3{font-size:18px}.detail-copy h2{font-size:54px}.quantity-row{gap:8px}.quantity-row small{font-size:8px}
  .mini-site .brand-poster>strong{font-size:72px}.mini-site .poster-star{font-size:112px}.brand-copy .brand-points{font-size:11px}
}
@media(max-width:820px){
  .platform-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.platform-steps h3{min-height:0;font-size:18px;margin-top:15px}
  .platform-steps p{font-size:13px}.section-note{font-size:10px}.detail-layout{gap:35px}.detail-copy h2{font-size:45px}
  .detail-copy>p:not(.eyebrow){font-size:12px}.detail-list li{font-size:11px}.reservation-demo{padding:20px}.quantity-row{flex-wrap:wrap;gap:12px}.reservation-status{font-size:11px;min-height:82px}
  .reservation-demo>h3{font-size:17px}.staff-device{padding:22px 18px}.scan-controls{flex-wrap:wrap}.mini-site .brand-poster>strong{font-size:62px}
  .mini-site .brand-poster{padding-inline:20px}.mini-site .poster-star{font-size:90px}.mini-ticket-row{margin-inline:20px;font-size:9px}.mini-ticket-row small{font-size:8px}
  .brand-copy .brand-points{font-size:10px}.benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.benefits-grid h3{font-size:18px}
}
@media(max-width:600px){
  .platform-steps{grid-template-columns:1fr;gap:26px;margin-top:34px}.platform-steps li{display:grid;grid-template-columns:35px 1fr;gap:0 16px;padding-top:23px}
  .platform-steps .step-number{grid-row:1/3;font-size:32px}.platform-steps h3{font-size:17px;margin:0}.platform-steps p{font-size:12px;margin-top:10px;line-height:1.85}
  .section-note{font-size:10px;line-height:1.8;margin-top:25px}.platform-section .section-heading>p:last-child{max-width:100%}
  .brand-copy h2{font-size:49px}.brand-copy .brand-points{font-size:11px;gap:12px}.mini-site .brand-poster>strong{font-size:77px}
  .mini-site .poster-star{font-size:112px}.mini-ticket-row{font-size:10px}.mini-ticket-row small{font-size:8px}.brand-customize{font-size:9px}
  .detail-layout{grid-template-columns:1fr;gap:32px}.detail-copy h2{font-size:49px}.detail-copy .eyebrow{font-size:9px;margin-bottom:22px}
  .detail-copy>p:not(.eyebrow){font-size:13px;margin-top:22px}.detail-list{gap:13px;margin-top:21px}.detail-list li{font-size:12px;padding-left:22px}
  .detail-copy>.detail-note{font-size:10px!important}.reservation-demo{padding:23px 20px}.reservation-demo>h3{font-size:18px}.quantity-row{flex-wrap:nowrap}
  .quantity-row small{font-size:8px}.reservation-status{font-size:11px;min-height:82px}.simulation-note{font-size:9px}
  .entry-demo{order:2}.entry-layout>.detail-copy{order:1}.staff-device{padding:24px 22px;max-width:300px}.scan-result{min-height:122px}
  .scan-controls{gap:7px;flex-wrap:nowrap}.scan-controls button{font-size:10px;padding-inline:11px}.entry-demo .small-note{font-size:8px}
  .benefits-grid{grid-template-columns:1fr;gap:28px;margin-top:35px}.benefits-grid article{display:grid;grid-template-columns:30px 1fr;gap:0 15px;padding-top:23px}
  .benefit-symbol{grid-row:1/4;font-size:25px;margin:0}.benefits-grid h3{font-size:17px}.benefits-grid article>p{font-size:12px;margin:10px 0 13px}
  .benefit-caption{font-size:10px}.benefits-cta{flex-direction:column;align-items:start;gap:10px;margin-top:30px;padding-top:23px}.benefits-cta p{font-size:12px}
  .experience-heading>p{max-width:100%}
}
@media(max-width:360px){
  .detail-copy h2,.brand-copy h2{font-size:43px}.reservation-demo{padding-inline:16px}.quantity-row{flex-wrap:wrap}.quantity-row small{font-size:9px}
  .mini-ticket-row{margin-inline:17px}.mini-site .brand-poster{padding-inline:17px}.mini-site .brand-poster>strong{font-size:69px}
  .scan-controls{flex-wrap:wrap}.platform-section .section-heading h2{font-size:45px}
}
@media(forced-colors:active){.quantity-control,.reservation-status,.scan-result,.scan-controls button{border:1px solid ButtonText}.scan-controls button[aria-pressed=true]{outline:2px solid Highlight}}