/* Distinct chapters after the opening. Shared device frames and app flows stay intact. */
main { --section-space: clamp(64px, 7.5vw, 112px); --content-space: clamp(32px, 4vw, 64px); --text-space: 24px; overflow: clip; }
.site-header { height: 96px; }
.hero { padding-block: var(--section-space); text-align: left; }
.hero > .wrap { display: grid; grid-template-columns: .92fr 1.08fr; gap: 34px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero .eyebrow { justify-content: flex-start; }
.hero h1 { margin: var(--text-space) 0; }
.hero-description { margin: 0 0 18px; color: #f5f7f2; }
.hero-context { max-width: 390px; margin: 0; }
.hero-actions { justify-content: flex-start; gap: 12px; margin-top: var(--text-space); }
.hero-actions .button { padding-inline: 20px; }
.hero > .wrap > .screen-note { grid-column: 1 / -1; margin-top: 0; color: #8e9a8b; }
.hero .product-pair { width: 100%; max-width: none; margin: 0; padding: 85px 3% 115px 0; }
.hero .product-pair::before { inset: 2% -4% 2% 6%; border: 1px solid #313b2e; border-radius: 50% 50% 8px 8px; background: #141c12; }
.hero .product-pair > .desktop-device { width: 100%; }
.hero .product-pair > .phone-device { width: 35%; bottom: 20px; right: -1%; z-index: 2; }
.hero-ticket { position: absolute; left: -8%; bottom: 105px; display: flex; align-items: center; gap: 14px; padding: 20px 25px; background: #dcff77; color: #20251d; border-radius: 13px; box-shadow: 0 18px 50px #0004; transform: rotate(-6deg); z-index: 5; }
.ticket-check { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #20251d44; border-radius: 50%; }
.hero-ticket small, .hero-ticket strong { display: block; }
.hero-ticket small { margin-bottom: 7px; }
.hero .pair-label { margin: 48px 0 0 20px; max-width: 200px; }
.word-ribbon { overflow: hidden; background: #dcff77; padding-block: var(--text-space); border-block: 1px solid #20251d; }
.word-ribbon-track { display: flex; width: max-content; align-items: center; gap: 45px; margin-left: -90px; transform: translateX(var(--travel, 0px)); }
.word-ribbon .icon { width: 65px; height: 65px; stroke-width: 1; }
/* Give the first product section room below the word ribbon. */
.how-section { padding-block: var(--section-space); }
.how-section .section-heading, .operator-section .section-heading { text-align: left; }
.how-section .section-heading h2, .operator-section .section-heading h2 { margin-top: var(--text-space); }
.how-section .section-heading h2 span { color: #768264; }
.how-section .section-heading > p:last-child { position: absolute; width: 300px; max-width: 26%; right: 0; bottom: 0; margin: 0; }
.guest-tour { margin-top: var(--content-space); }
.guest-tour .tour-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 0; }
.guest-tour .tour-tabs button { display: flex; align-items: center; gap: 16px; border: 0; border-top: 1px solid #cbd1c1; border-radius: 0; padding: 24px; }
.guest-tour .tour-tabs button + button { border-left: 1px solid #cbd1c1; }
.guest-tour .tour-tabs button span { opacity: .6; }
.guest-tour .tour-tabs button b { margin-left: auto; }
.guest-tour .tour-tabs button[aria-selected=true] { background: #20251d; color: #dcff77; }
.guest-panel { position: relative; isolation: isolate; min-height: 720px; gap: 65px; padding: 55px 65px; background: #e3ebf0; border-radius: 0 0 24px 24px; }
.guest-panel::before { content: '01'; position: absolute; top: 5px; left: 15px; color: #cddbe1; z-index: -1; }
.guest-screen-stage { padding: 12px 0 0; border-radius: 0; background: transparent; min-width: 0; }
.guest-screen-stage .phone-device { width: 260px; max-width: 80%; }
.floating-detail { position: absolute; bottom: 90px; left: -20px; width: 285px; border-radius: 14px; padding: 22px; background: #fafbf7; color: #20251d; box-shadow: 0 22px 50px #283a292b; transform: rotate(-7deg); z-index: 6; }
.floating-detail small, .floating-detail strong, .floating-detail > span { display: block; }
.floating-detail small { color: #5d6357; }
.floating-detail strong { margin-block: 13px 20px; }
.floating-detail > span { padding-top: 14px; border-top: 1px solid #dfe3d6; }
.floating-detail b { float: right; }
.stage-caption { position: relative; margin-top: 42px; }
.tour-copy { min-width: 0; }
.tour-copy h3 { margin-block: var(--text-space); }
.tour-copy .button { margin-top: var(--text-space); }
#guest-panel-pay { background: #e9eddc; }
#guest-panel-pay::before { content: '02'; color: #d4dec0; }
#guest-panel-pay .guest-screen-stage { order: 2; }
#guest-panel-pay .floating-detail { background: #dcff77; transform: rotate(6deg); left: 0; }
#guest-panel-access { --muted: #b8c2b4; --ring: #dcff77; background: #202b1f; color: #fafbf7; }
#guest-panel-access::before { content: '03'; color: #354530; }
#guest-panel-access .floating-detail { background: #dcff77; transform: rotate(-5deg); }
#guest-panel-access .stage-caption { color: #b8c2b4; }
#guest-panel-access .primary { background: #dcff77; color: #20251d; }
.operator-section { position: relative; isolation: isolate; padding-block: var(--section-space) 0; }
.operator-section > .wrap { position: relative; }
.operator-section .section-heading h2 span { color: #dcff77; }
.operator-section .section-heading > p:last-child { margin: var(--text-space) 0 0; max-width: 450px; }
.operator-section .section-heading { padding-right: 224px; }
.owner-stamp { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 184px; height: 184px; padding: 24px; text-align: center; background: #dcff77; color: #20251d; border: 1px solid #e8ffa4; border-radius: 50%; box-shadow: 0 7px 0 #779a39, 0 14px 32px #0003; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s; }
.owner-stamp::before { content: ''; position: absolute; inset: 9px; border: 1px solid #20251d26; border-radius: inherit; pointer-events: none; }
.owner-stamp-copy { font: var(--type-h5); letter-spacing: -.015em; }
.owner-stamp-arrow { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: #20251d; color: #dcff77; border-radius: 50%; transition: transform .3s; }
.owner-stamp-arrow .arrow-icon { display: block; width: 24px; height: 24px; }
.owner-stamp:focus-visible { outline: 3px solid #dcff77; outline-offset: 12px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .owner-stamp:hover { transform: translateY(-5px) rotate(-6deg); box-shadow: 0 12px 0 #779a39, 0 22px 36px #0004; background: #e6ff9f; }
  .owner-stamp:hover .owner-stamp-arrow { transform: rotate(6deg) translateY(3px); }
}
.owner-stamp:active { transform: translateY(5px); box-shadow: 0 2px 0 #779a39, 0 7px 16px #0003; }
@media (prefers-reduced-motion: reduce) { .owner-stamp, .owner-stamp-arrow { transition: none; } .owner-stamp:active { transform: none; } }
.access-lab { background: #dcff77; padding-block: var(--section-space); }
.access-lab-heading { display: grid; grid-template-columns: 1fr 350px; column-gap: 60px; }
.access-lab-heading h2 { grid-column: 1; margin-top: var(--text-space); }
.access-lab-heading h2 span { color: #52672e; }
.access-lab-heading > p:last-child { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.access-clock { margin-top: var(--content-space); border: 1px solid #748e36; border-radius: 24px; padding: 30px 40px; background: #e7ffa3; --door-light: #e55858; }
.clock-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #a6c36a; }
.clock-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 30%); gap: 25px; align-items: center; padding-block: 22px; }
.clock-face { display: flex; align-items: baseline; gap: 12px; }
.clock-face > span:first-child { display: inline-flex; }
[data-clock-digit] { width: .78em; text-align: center; }
.clock-colon { width: .2em; text-align: center; }
.clock-door-visual { position: relative; height: 290px; isolation: isolate; }
.clock-door-glow { position: absolute; inset: 4% -5% 7%; border-radius: 50%; background: radial-gradient(ellipse, var(--door-light), transparent 68%); opacity: .12; transition: opacity .8s, background .8s; }
.clock-door-frame { position: absolute; width: 132px; height: 217px; left: 50%; top: 18px; translate: -50% 0; border: 7px solid #50653a; background: #253720; box-shadow: 5px 5px 0 #2c4126, 12px 17px 24px #39502726; perspective: 650px; }
.clock-door-frame::after { content: ''; position: absolute; width: 180%; height: 24px; left: -40%; bottom: -21px; z-index: -1; border-radius: 50%; background: #49612a33; filter: blur(7px); }
.clock-door-room { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 30% 28%, #4c326873, transparent 57%), radial-gradient(ellipse at 75% 70%, #254a6b80, transparent 60%), #070b17; opacity: .3; transition: opacity .8s; }
.clock-door-room::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 12px 18px, #eaf0ff 0 .7px, transparent 1px), radial-gradient(circle at 31px 9px, #bdcceb 0 .6px, transparent 1px), radial-gradient(circle at 20px 39px, #f8eaff 0 1px, transparent 1.5px); background-size: 33px 47px, 57px 71px, 83px 97px; opacity: .85; }
.clock-door-room::after { content: ''; position: absolute; inset: -18% 16%; background: linear-gradient(115deg, transparent 25%, #746da14d 42%, #e4d5fc55 50%, #344b7580 58%, transparent 70%); transform: rotate(-24deg); filter: blur(7px); }
.clock-door-leaf { position: absolute; inset: 0; background: linear-gradient(115deg, #8c9f6c, #536d40 65%, #384f2e); border: 1px solid #bdd595; transform-origin: left; transform: rotateY(0deg); backface-visibility: hidden; box-shadow: inset 0 0 0 7px #ebffc50c; transition: transform 1s cubic-bezier(.22,.7,.2,1); }
.clock-door-keypad, .clock-door-handle { left: 82%; translate: -50% 0; }
.clock-door-keypad { position: absolute; top: 39%; width: 28px; height: 44px; border: 1px solid #93aa78; border-radius: 4px; background: #1f301b; display: grid; place-content: center; justify-items: center; gap: 4px; }
.clock-door-keypad i { width: 7px; height: 7px; border-radius: 50%; background: var(--door-light); box-shadow: 0 0 8px var(--door-light); transition: background .4s, box-shadow .4s; }
.clock-door-keypad b { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; }
.clock-door-keypad b span { display: grid; place-items: center; height: 7px; border-radius: 1px; background: #34472d; color: #acc595; }
.clock-door-handle { position: absolute; top: 66%; width: 5px; height: 23px; border-radius: 3px; background: linear-gradient(90deg, #a9c985, #f3ffda, #829b60); box-shadow: 2px 2px 3px #23361c; }
.clock-door-label { position: absolute; bottom: 7px; left: -10px; right: -10px; display: grid; text-align: center; color: #42562d; }
.clock-door-label > span { grid-area: 1/1; opacity: 0; transition: opacity .4s; }
.access-clock[data-state=active] { --door-light: #79e35b; }
.access-clock[data-state=active] .clock-door-leaf { transform: rotateY(-72deg); }
.access-clock[data-state=active] .clock-door-glow { opacity: .32; }
.access-clock[data-state=active] .clock-door-room { opacity: 1; }
.access-clock[data-state=pending] [data-door-state=pending], .access-clock[data-state=active] [data-door-state=active], .access-clock[data-state=expired] [data-door-state=expired] { opacity: 1; }
.access-clock.is-enhanced[data-state=active] .clock-door-leaf { transition-delay: 1.65s; }
.access-clock.is-enhanced[data-state=active] [data-door-state=active] { transition-delay: 1.65s; }
.access-clock.is-enhanced[data-state=active] .clock-door-entry { animation: clock-enter-code 1.65s both; }
.access-clock.is-enhanced[data-state=active] .clock-door-keypad b span { animation: clock-keypress .22s .35s both; }
.access-clock.is-enhanced[data-state=active] .clock-door-keypad b span:nth-child(2) { animation-delay: .55s; }
.access-clock.is-enhanced[data-state=active] .clock-door-keypad b span:nth-child(3) { animation-delay: .75s; }
.access-clock.is-enhanced[data-state=active] .clock-door-keypad b span:nth-child(4) { animation-delay: .95s; }
.access-clock.is-enhanced[data-state=active] .clock-door-keypad b span:nth-child(5) { animation-delay: 1.15s; }
.access-clock.is-enhanced[data-state=active] .clock-door-keypad b span:nth-child(6) { animation-delay: 1.35s; }
@keyframes clock-keypress { 0%,100% { background: #34472d; color: #acc595; transform: none; box-shadow: none; } 40%,70% { background: #79e35b; color: #172c11; transform: scale(.88); box-shadow: 0 0 7px #79e35b; } }
@keyframes clock-enter-code { 0%,100% { opacity: 0; } 15%,85% { opacity: 1; } }
.clock-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-bottom: 28px; }
.clock-code { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border: 1px solid #9bb95e; border-radius: 9px; transition: opacity .4s, background .4s; }
[data-state=active] .clock-code { background: #dcff77; }
[data-state=pending] .clock-code, [data-state=expired] .clock-code { opacity: .55; }
.clock-code > span { position: relative; }
.clock-code > span::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s; }
[data-state=expired] .clock-code > span::after { transform: scaleX(1); }
.clock-status { display: flex; gap: 14px; align-items: center; }
.clock-status .status-dot { box-shadow: none; background: var(--door-light); transition: background .4s; }
.clock-status-messages { display: grid; max-width: 360px; }
.clock-status-messages > span { grid-area: 1/1; opacity: 0; transform: translateY(5px); transition: opacity .35s, transform .35s; }
[data-state=pending] [data-clock-state=pending], [data-state=active] [data-clock-state=active], [data-state=expired] [data-clock-state=expired] { opacity: 1; transform: none; }
.clock-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.clock-controls { border-top: 1px solid #a6c36a; padding-top: 25px; }
.clock-controls[hidden] { display: none; }
.clock-controls label { display: flex; gap: 12px; align-items: center; }
.clock-playback { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.clock-playback button { min-width: 78px; min-height: 44px; padding: 8px 17px; border: 1px solid #748e36; border-radius: 24px; background: transparent; color: #20251d; cursor: pointer; }
.clock-playback button:hover { background: #dcff77; }
.clock-playback button:focus-visible { outline: 3px solid #20251d; outline-offset: 3px; }
.clock-controls input { appearance: none; display: block; width: 100%; height: 34px; margin: 15px 0 0; background: transparent; cursor: ew-resize; }
.clock-controls input::-webkit-slider-runnable-track { height: 4px; border-radius: 8px; background: linear-gradient(to right,#20251d var(--clock-progress,50%),#aec278 var(--clock-progress,50%)); }
.clock-controls input::-moz-range-track { height: 4px; border-radius: 8px; background: linear-gradient(to right,#20251d var(--clock-progress,50%),#aec278 var(--clock-progress,50%)); }
.clock-controls input::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #20251d; }
.clock-controls input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #20251d; }
.clock-controls input:focus-visible { outline: 3px solid #20251d; outline-offset: 5px; border-radius: 5px; }
.clock-labels { display: flex; justify-content: space-between; margin-top: 8px; }
.clock-labels span { opacity: .5; transition: opacity .35s; }
[data-state=pending] .clock-labels span:first-child, [data-state=active] .clock-labels span:nth-child(2), [data-state=expired] .clock-labels span:last-child { opacity: 1; }
.access-lab-notes { display: flex; justify-content: space-between; gap: 55px; margin-top: var(--text-space); }
.access-lab-notes p { max-width: 400px; }
.access-lab-notes p:last-child { color: #52672e; }
.faq-section { margin-top: 0; padding-block: var(--section-space); }
.faq-heading { margin-bottom: var(--content-space); }
.faq-heading h2 { margin-block: var(--text-space); }
.closing-section { position: relative; overflow: hidden; padding-top: var(--section-space); padding-bottom: 0; }
.closing-word { color: #2c3627; white-space: nowrap; width: max-content; margin-left: -35px; }
.contact-section { position: relative; border-radius: 0; background: #050505; color: #f8faf4; padding: var(--content-space) 0 var(--section-space); }
.contact-section h2 { max-width: 950px; margin-block: var(--text-space); }
.contact-section .button { margin-top: var(--text-space); }
.contact-section h2 span { color: #dcff77; }
.contact-section > p:not(.eyebrow) { color: #adb6a5; }
.contact-section .primary { background: #dcff77; color: #20251d; }
.contact-section .primary:hover { background: #eaffad; }
@media (max-width: 1100px) {
  .hero .product-pair { padding-block: 60px 110px; }
  .hero .product-pair > .phone-device { width: 37%; }
  .hero-ticket { left: -5%; bottom: 90px; padding: 16px; gap: 10px; }
  .guest-panel { padding: 42px 35px; gap: 45px; min-height: 650px; }
  .floating-detail { width: 240px; left: -10px; padding: 18px; }
  .guest-tour .tour-tabs button { padding: 22px 15px; gap: 12px; }
  .access-lab-heading { grid-template-columns: 1fr 280px; column-gap: 35px; }
}
@media (max-width: 800px) {
  main { --text-space: 20px; }
  .hero > .wrap { grid-template-columns: 1fr; gap: 25px; }
  .hero-context { max-width: 440px; }
  .hero .product-pair { width: 90%; max-width: 620px; margin: 0 auto; padding-block: 50px 110px; }
  .hero .product-pair > .phone-device { width: 30%; }
  .hero-ticket { bottom: 100px; left: -4%; }
  .hero > .wrap > .screen-note { text-align: center; }
  .word-ribbon-track { gap: 30px; }
  .word-ribbon .icon { width: 45px; height: 45px; }
  .how-section .section-heading > p:last-child { position: static; max-width: 420px; width: auto; margin: var(--text-space) 0 0; }
  .guest-panel { min-height: 560px; padding: 35px 25px; gap: 35px; }
  .guest-screen-stage .phone-device { width: 220px; max-width: 82%; }
  .floating-detail { width: 210px; bottom: 75px; left: -5px; }
  .owner-stamp { width: 144px; height: 144px; padding: 18px; gap: 8px; }
  .owner-stamp-arrow { width: 32px; height: 32px; }
  .owner-stamp-arrow .arrow-icon { width: 20px; height: 20px; }
  .operator-section .section-heading { padding-right: 172px; }
  .access-lab-heading { grid-template-columns: 1fr; gap: 0; }
  .access-lab-heading > p:last-child { grid-column: 1; grid-row: auto; max-width: 480px; margin-top: var(--text-space); }
  .access-clock { padding: 25px; }
  .clock-code { padding: 12px; }
  .access-lab-notes { gap: 25px; }
}
@media (max-width: 600px) {
  .hero .product-pair { width: 96%; padding: 45px 5% 95px 2%; }
  .hero .product-pair > .phone-device { width: 34%; right: 0; bottom: 30px; }
  .hero-ticket { bottom: 72px; left: -2%; padding: 13px 15px; border-radius: 9px; }
  .ticket-check { width: 27px; height: 27px; }
  .hero .pair-label { max-width: 165px; margin: 42px 0 0 2px; }
  .hero > .wrap > .screen-note { margin-top: -25px; }
  .guest-tour .tour-tabs button { justify-content: center; flex-direction: column; gap: 8px; padding: 18px 6px; }
  .guest-tour .tour-tabs button b { display: none; }
  .guest-panel { display: flex; flex-direction: column; gap: var(--content-space); padding: var(--content-space) 25px; }
  .guest-screen-stage { width: 100%; padding-top: 0; }
  .guest-screen-stage .phone-device { width: 200px; max-width: 72%; }
  .floating-detail { width: 222px; max-width: 95%; left: -5px; bottom: 75px; padding: 17px; }
  .floating-detail strong { margin-block: 10px 15px; }
  .stage-caption { margin-top: 36px; }
  #guest-panel-pay .guest-screen-stage { order: 0; }
  .owner-stamp { position: relative; display: flex; flex-direction: row; justify-content: space-between; width: 100%; height: auto; min-height: 66px; margin-top: var(--text-space); padding: 13px 20px; border-radius: 40px; gap: 16px; }
  .owner-stamp::before { display: none; }
  .owner-stamp-copy { font: var(--type-button); letter-spacing: 0; }
  .owner-stamp-copy br { display: none; }
  .operator-section .section-heading { padding-right: 0; }
  .access-clock { padding: 22px 18px; border-radius: 15px; }
  .clock-top { gap: 8px; flex-direction: column; padding-bottom: 16px; }
  .clock-body { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 12px 20px; }
  .clock-face { gap: 7px; padding-block: 10px; justify-content: center; }
  .clock-door-visual { height: 260px; }
  .clock-door-frame { top: 8px; height: 205px; width: 126px; }
  .clock-bottom { align-items: flex-start; flex-direction: column; gap: 20px; padding-bottom: 22px; }
  .clock-status { align-items: flex-start; gap: 10px; }
  .clock-status .status-dot { margin-top: 7px; }
  .clock-controls { padding-top: 18px; }
  .access-lab-notes { flex-direction: column; gap: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .word-ribbon-track { transform: none; }
  .clock-door-visual * { animation: none !important; transition: none !important; }
  .clock-code, .clock-code > span::after, .clock-status .status-dot, .clock-status-messages > span, .clock-labels span { transition: none; }
}

/* Website, business index, real-world origin, setup: four different page rhythms. */
.brand-stage{display:block;background:#e3ebf0;color:#20251d;border-radius:0;padding:var(--section-space) 0;overflow:hidden}
.brand-stage-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:var(--text-space);border-bottom:1px solid #20251d40}
.brand-stage-layout{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:80px;padding-block:var(--content-space)}
.brand-stage .brand-stage-copy h2{margin:0 0 var(--text-space)}
.brand-stage .brand-stage-copy h2 br{display:block}
.brand-stage .brand-stage-copy>p{color:#455045;max-width:420px;margin:0}
.brand-stage .brand-stage-copy>p+p{margin-top:16px}
.brand-stage-link{display:inline-flex;align-items:center;gap:24px;min-height:44px;border-bottom:1px solid currentColor;padding-block:12px;margin-top:var(--text-space)}
.brand-browser-stage{position:relative;padding:0 15px 24px 0;perspective:1600px}
.brand-browser{position:relative;background:#fafbf7;border:1px solid #788079;box-shadow:8px 9px 0 #bdc9ca,17px 30px 50px #20251d21;transform:rotateY(-7deg) rotateZ(3deg);border-radius:10px;overflow:hidden}
.brand-browser-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#edf0e6;padding:15px 19px;border-bottom:1px solid #c9d0c3;color:#57604e}
.brand-browser-page{padding:27px 30px 24px}
.brand-browser-nav{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:31px}
.brand-browser-nav>span{color:#67715d;border:1px solid #cfd6c5;border-radius:20px;padding:6px 9px}
.brand-browser-room{display:flex;align-items:center;gap:16px;border-top:1px solid #c5cfb3;padding-top:16px;color:#586344}
.brand-browser-room .icon{width:30px;height:30px}
.brand-browser-room>span:last-child{margin-left:auto;color:#93a478}
.brand-browser-page h3{margin:27px 0 16px}
.brand-stage .brand-browser-page>p{margin:0;color:#5d6357}
.brand-book-button{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px;background:#dcff77;border:1px solid #b7d26d;border-radius:5px;padding:16px 20px;margin-top:30px;color:#20251d;transition:background .2s}
.brand-book-button:hover{background:#d0f95b}
.brand-browser-footer{display:flex;justify-content:space-between;gap:20px;margin-top:15px;color:#646d59}
.brand-browser-sticker{position:absolute;right:-20px;bottom:-4px;z-index:2;display:flex;align-items:center;gap:16px;background:#20251d;color:#dcff77;padding:18px 24px;box-shadow:0 8px 14px #20251d20;transform:rotate(-6deg)}
.brand-stage-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #20251d40;padding-top:var(--text-space);color:#455045}
.venue-index{background:#20251d;color:#f5f6ee;padding-block:var(--section-space);--ring:#dcff77}
.venue-index-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:var(--content-space)}
.venue-index-heading .eyebrow{color:#dcff77}
.venue-index h2{margin-top:var(--text-space)}
.venue-index-heading>p{max-width:340px;color:#c0c7b9}
.venue-index-list{border-bottom:1px solid #606a53}
.venue-index-list details{border-top:1px solid #606a53}
.venue-index-list summary{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:20px;padding:27px 0;cursor:pointer;list-style:none}
.venue-index-list summary::-webkit-details-marker{display:none}
.venue-index-number{align-self:start;padding-top:10px;color:#b2c199}
.venue-index-plus{display:grid;place-items:center;width:42px;height:42px;border:1px solid #8e9b7d;border-radius:50%;transition:transform .25s,background .25s}
.venue-index-list details[open] .venue-index-plus{transform:rotate(45deg);background:#dcff77;border-color:#dcff77;color:#20251d}
.venue-index-list summary:hover{color:#dcff77}
.venue-index-list summary:focus-visible{outline:2px solid #dcff77;outline-offset:8px}
.venue-index-answer{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:55px;margin:0 66px 32px 72px;color:#c0c7b9}
.venue-index-answer>p{max-width:500px}
.venue-index-answer>div{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:3px}
.venue-index-answer>div>span{padding:5px 12px;border:1px solid #556146;border-radius:20px;white-space:nowrap}
.venue-index-answer>a{justify-self:end;display:inline-flex;gap:15px;border-bottom:1px solid #a0ad8e;color:#dcff77;padding-bottom:5px}
.venue-index-foot{display:flex;align-items:center;gap:22px;padding-top:var(--text-space)}
.venue-index-foot>.icon{width:46px;height:46px;stroke-width:1.1;color:#dcff77}
.venue-index-foot>p{color:#bec7b4}
.venue-index-foot strong{color:#f5f6ee}
.venue-index-foot>a{margin-left:auto;color:#dcff77;display:flex;gap:22px;align-items:center}
.setup-runway{display:block;background:#f4f0e6;color:#20251d;border-radius:0;padding:var(--section-space) 0}
.setup-runway-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.setup-runway h2{margin-top:var(--text-space)}
.setup-runway-heading>p{max-width:310px;color:#5d6357;flex-shrink:0}
.setup-tour{margin-top:var(--content-space);background:#182016;color:#f4f6eb;border-radius:24px;overflow:hidden}
.setup-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #43503b}
.setup-tabs button{display:flex;justify-content:center;align-items:center;gap:12px;min-height:76px;padding:18px 14px;border:0;border-right:1px solid #43503b;border-radius:0;background:transparent;color:#c0cab4;cursor:pointer;transition:background .2s,color .2s}
.setup-tabs button:last-child{border-right:0}
.setup-tabs button:hover{background:#2b3823;color:#f4f6eb}
.setup-tabs button[aria-selected=true]{background:#dcff77;color:#20251d}
.setup-tabs button:focus-visible,.setup-panel:focus-visible{outline:3px solid #a1c54d;outline-offset:-6px}
.setup-panel:not([hidden]){display:grid;grid-template-columns:1fr 1.15fr;min-height:490px}
.setup-copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,4vw,54px);min-width:0}
.setup-kicker{color:#d0e9a2}
.setup-copy h3{margin-block:var(--text-space);max-width:440px}
.setup-copy>p{color:#bbc6b2;max-width:390px}
.setup-outcome{display:flex;align-items:flex-start;gap:12px;margin-top:auto;padding-top:32px;color:#dce8ce;max-width:380px}
.setup-outcome>.icon{width:18px;height:18px;color:#dcff77}
.setup-visual{position:relative;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:30px 38px;min-width:0;overflow:hidden;background:#283624;border-left:1px solid #43503b}
.setup-visual-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;color:#d1dec3;margin-bottom:auto}
.setup-visual-top>span:last-child{color:#a3b396}
.setup-visual-note{display:flex;justify-content:center;align-items:center;gap:9px;color:#c7d6b7;margin-top:auto}
.setup-status-dot{width:7px;height:7px;border-radius:50%;background:#dcff77;box-shadow:0 0 12px #dcff7740;flex-shrink:0}
.setup-floorplan{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:400px;margin:auto;transform:perspective(1000px) rotateX(12deg) rotateZ(-5deg);transition:transform .4s}
.setup-room{position:relative;min-height:120px;padding:14px;display:flex;flex-direction:column;gap:8px;border:1px solid #92ad79;background:#34462b;color:#e3f1d2}
.setup-room::after{content:'';position:absolute;left:22px;bottom:-1px;width:28px;height:27px;background:#283624;border:1px solid #8fa776;border-left:0;border-bottom:0;border-radius:0 100% 0 0}
.setup-room>.icon{width:20px;height:20px;color:#b7db81}
.setup-room-studio{background:#cced92;color:#213418;box-shadow:0 8px 0 #16210e80}
.setup-room-studio>.icon{color:#385325}
.setup-room-studio::after{border-color:#cced92}
.setup-corridor{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 16px;color:#a3b995}
.setup-room-training{grid-column:1/-1;min-height:90px}
.setup-room-bench{position:absolute;right:14px;top:14px;width:18px;height:64px;border:1px solid #718b4b;border-radius:4px}
.setup-room-table{position:absolute;right:14px;top:14px;width:30px;height:62px;border:1px solid #718b4b;border-radius:20px;box-shadow:7px 0 0 -4px #718b4b,-7px 0 0 -4px #718b4b}
.setup-room-mats{position:absolute;right:14px;top:16px;width:20px;height:45px;border:1px solid #718b4b;border-radius:4px;box-shadow:-30px 0 0 -1px #34462b,-30px 0 0 0 #718b4b,-60px 0 0 -1px #34462b,-60px 0 0 0 #718b4b}
.setup-rule-card{width:100%;max-width:390px;margin:auto;padding:26px;background:#f3f5e9;color:#202c1b;border-radius:14px;box-shadow:10px 12px 0 #17221070;transform:rotate(3deg);transition:transform .4s}
.setup-rule-brand{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.setup-rule-brand>span>span{display:block;margin-top:3px;color:#5c6a51}
.setup-brand-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#d8e7c3;flex-shrink:0}
.setup-rule-row{display:flex;align-items:center;gap:10px;padding-block:17px;border-top:1px solid #d4ddc9}
.setup-rule-row>.icon{width:17px;height:17px;color:#526c3a}
.setup-rule-row>b{margin-left:auto;text-align:right}
.setup-rule-window{padding:16px;border-radius:9px;background:#ddf5ae;margin-top:4px}
.setup-rule-window>div{display:flex;align-items:center;gap:12px;margin-top:14px}
.setup-rule-window i{height:1px;background:#9eb971;flex:1}
.setup-test-scene{position:relative;width:100%;max-width:400px;height:310px;margin:auto;perspective:900px}
.setup-test-door{position:absolute;right:3%;top:0;width:52%;height:100%;border:5px solid #758b63;background:#101b0c;box-shadow:9px 10px 0 #17221070;perspective:900px}
.setup-test-leaf{position:relative;width:100%;height:100%;padding-top:45px;background:#405831;border:1px solid #93ac79;transform-origin:left center;transform:rotateY(-28deg);transition:transform .7s cubic-bezier(.2,.7,.2,1);text-align:center;color:#e2edce}
.setup-test-lock{position:absolute;right:12%;top:48%;width:21px;height:35px;border:1px solid #819d66;background:#1c2c15;border-radius:5px}
.setup-test-lock b{display:block;width:5px;height:5px;margin:8px auto;background:#dcff77;border-radius:50%;box-shadow:0 0 9px #dcff7780}
.setup-test-handle{position:absolute;right:14%;top:64%;width:5px;height:24px;border-radius:4px;background:#bacba3}
.setup-test-pass{position:absolute;z-index:1;left:0;top:64px;width:65%;padding:23px;background:#f3f5e9;color:#202c1b;border-radius:12px;box-shadow:0 16px 30px #111a0c66;transform:rotate(-5deg);transition:transform .4s}
.setup-test-pass>span,.setup-test-pass>strong{display:block}
.setup-test-pass>strong{margin-block:10px}
.setup-test-pass>div{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #d4ddc9;padding-top:16px;margin-top:16px}
.setup-test-pass>.setup-pass-ready{display:flex;align-items:center;gap:7px;color:#3e5c27;margin-top:12px}
.setup-pass-ready>.icon{width:16px;height:16px}
.setup-runway-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:32px}
.setup-runway-bottom>span{color:#5d6357}
.setup-runway-bottom .button{background:#20251d;color:#dcff77}
.setup-runway-bottom .button:hover{background:#38402f}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .setup-map:hover .setup-floorplan{transform:perspective(1000px) rotateX(0deg) rotateZ(0deg)}
  .setup-config:hover .setup-rule-card{transform:rotate(0deg) translateY(-5px)}
  .setup-rehearsal:hover .setup-test-leaf{transform:rotateY(-65deg)}
  .setup-rehearsal:hover .setup-test-pass{transform:rotate(-2deg) translateY(-5px)}
}
@media(prefers-reduced-motion:no-preference){
  .setup-panel:not([hidden]) .setup-copy,.setup-panel:not([hidden]) .setup-visual{animation:setup-arrive .45s ease-out both}
  @keyframes setup-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
}
@media(prefers-reduced-motion:reduce){.setup-tour *,.setup-tabs button{transition:none}}
@media(max-width:1050px){
  .brand-stage-layout{gap:42px}
  .brand-browser-page{padding:24px}
  .brand-browser-footer{flex-wrap:wrap;gap:5px 12px}
  .brand-browser-sticker{padding:15px 20px;right:-8px}
  .venue-index-answer{margin-left:72px;grid-template-columns:1.15fr 1fr;gap:30px}
  .setup-panel:not([hidden]){grid-template-columns:1fr 1fr;min-height:510px}
  .setup-visual{padding:26px}
}
@media(max-width:800px){
  .brand-stage-layout{grid-template-columns:1fr;gap:var(--content-space)}
  .brand-stage .brand-stage-copy>p{max-width:510px}
  .brand-browser-stage{width:min(560px,95%);margin-inline:auto}
  .brand-stage-bottom{flex-direction:column;gap:6px}
  .venue-index-heading{gap:35px}
  .venue-index-heading>p{max-width:280px}
  .venue-index-list summary{grid-template-columns:30px 1fr 34px;gap:16px;padding-block:24px}
  .venue-index-number{padding-top:6px}
  .venue-index-plus{width:34px;height:34px}
  .venue-index-answer{margin-left:46px;margin-right:0;grid-template-columns:1fr;gap:18px}
  .venue-index-answer>div{justify-content:flex-start}
  .venue-index-answer>a{justify-self:start}
  .venue-index-foot{flex-wrap:wrap;gap:20px}
  .venue-index-foot>a{margin-left:66px;width:100%}
  .setup-runway-heading{gap:35px}
  .setup-runway-heading>p{max-width:240px}
  .setup-panel:not([hidden]){grid-template-columns:1fr;min-height:0}
  .setup-copy{padding:32px}
  .setup-copy h3,.setup-copy>p{max-width:520px}
  .setup-outcome{margin-top:0;max-width:none}
  .setup-visual{min-height:420px;padding:26px 32px;border-left:0;border-top:1px solid #43503b}
}
@media(max-width:560px){
  .brand-stage-top .eyebrow{max-width:210px}
  .brand-browser-stage{width:100%;padding-right:9px}
  .brand-browser{transform:rotateZ(2deg)}
  .brand-browser-page{padding:21px 19px 22px}
  .brand-browser-nav{margin-bottom:22px;gap:8px}
  .brand-browser-nav>span{padding:5px 7px}
  .brand-browser-page h3{margin-top:21px}
  .brand-browser-sticker{bottom:-10px;padding:13px 18px}
  .brand-book-button{padding-inline:14px}
  .venue-index-heading{display:block}
  .venue-index-heading>p{max-width:360px;margin-top:var(--text-space)}
  .venue-index-list summary{grid-template-columns:22px minmax(0,1fr) 30px;gap:10px}
  .venue-index-plus{width:30px;height:30px}
  .venue-index-answer{margin-left:32px}
  .venue-index-answer>div>span{white-space:normal}
  .venue-index-foot{gap:14px}
  .venue-index-foot>.icon{width:36px;height:36px}
  .venue-index-foot>a{margin-left:50px;gap:15px}
  .setup-runway-heading{display:block}
  .setup-runway-heading>p{max-width:none;margin-top:var(--text-space)}
  .setup-tabs button{flex-direction:column;gap:8px;padding:16px 5px;min-height:84px}
  .setup-tabs button>.icon{width:20px;height:20px}
  .setup-tabs button>span{display:grid;place-items:center;min-height:2.4em}
  .setup-copy{padding:26px 22px}
  .setup-copy h3{margin-block:20px}
  .setup-copy h3 br{display:none}
  .setup-visual{padding:22px;gap:22px;min-height:405px}
  .setup-visual-top{flex-direction:column;gap:3px}
  .setup-rule-card{padding:20px;transform:rotate(0deg)}
  .setup-rule-row{gap:7px}
  .setup-test-pass{padding:17px;width:70%}
  .setup-test-scene{height:285px}
  .setup-room{padding:10px;min-height:125px}
  .setup-room-training{min-height:95px}
  .setup-room-bench,.setup-room-table{top:auto;bottom:12px;right:10px;height:18px;width:36px}
  .setup-room>span{max-width:90px}
  .setup-room-mats{width:14px;height:36px;right:12px;top:45px;box-shadow:-23px 0 0 -1px #34462b,-23px 0 0 0 #718b4b}
  .setup-runway-bottom{flex-direction:column;align-items:flex-start;gap:22px}
  .setup-runway-bottom .button{padding-inline:19px;gap:18px;width:100%;justify-content:space-between}
}
@media(max-width:380px){.setup-test-scene{height:325px}.setup-test-pass{top:50px}}
@media(prefers-reduced-motion:reduce){.brand-book-button,.venue-index-plus{transition:none}}
@media(prefers-reduced-motion:no-preference){
  .brand-browser{translate:0 calc(var(--travel,0px) * -.18)}
}
/* The keypad is a miniature object, so scale its complete key grid. */
.clock-door-keypad b{zoom:.4;grid-template-columns:repeat(3,15px);gap:5px}
.clock-door-keypad b span{height:22px}
.brand-browser-sticker{bottom:-45px}
.brand-browser-stage{padding-bottom:50px}