/* Self-hosted fonts (SIL OFL, see fonts/OFL.txt). The fallbacks match their metrics so the swap does not shift the layout. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/dm-sans-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/instrument-serif-italic-latin.woff2') format('woff2')}
@font-face{font-family:'DM Sans Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto');size-adjust:103.5%;ascent-override:95.8%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:'Instrument Serif Fallback';font-style:italic;src:local('Georgia Italic'),local('Georgia-Italic'),local('Georgia');size-adjust:77.4%;ascent-override:127.9%;descent-override:40.1%;line-gap-override:0%}
:root{--green:#164b37;--green-dark:#123d2f;--cream:#f7f7eb;--yellow:#f5ef97;--ink:#183f32;--muted:#64736b;--line:#dce2d6;--page:#f7f7eb;--page-ink:#183f32;--surface:#edf0e5;--panel:#f7f7eb;--secondary:#64736b;--accent:#164b37;--rule:#c7d1bf;color-scheme:light;--sans:'DM Sans','DM Sans Fallback',sans-serif;--serif:'Instrument Serif','Instrument Serif Fallback',Georgia,serif;font-family:var(--sans);color:var(--page-ink);background:var(--page);font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #be7c19;outline-offset:6px}button{color:inherit}::selection{background:var(--yellow);color:var(--green)}svg{display:block}button{border:0}p,h1,h2,h3{margin:0}section[id]{scroll-margin-top:36px}.skip-link{color:var(--ink);position:fixed;top:10px;left:10px;z-index:50;background:var(--cream);padding:16px;transform:translateY(-150%)}.skip-link:focus{transform:none}
.hero{height:100svh;min-height:710px;position:relative;overflow:hidden;background:#3988b4;color:var(--cream);isolation:isolate}.header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;margin:0 4.6%;height:112px;border-bottom:1px solid #ffffff36}.brand{display:flex;align-items:center;gap:6px;font-size:30px;font-weight:650;letter-spacing:-1.5px;white-space:nowrap}.brand svg{width:30px;height:32px;margin-right:2px}.desktop-nav{display:flex;gap:34px;font-size:15px;font-weight:500}.desktop-nav a{position:relative;padding:12px 0}.desktop-nav a:after{content:'';height:1px;background:currentColor;position:absolute;bottom:7px;left:0;right:100%;transition:right .2s}.desktop-nav a:hover:after{right:0}.button{min-height:60px;padding:10px 25px;border-radius:7px;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;font-size:16px;font-weight:550;transition:transform .12s ease,box-shadow .2s,background .2s}.button-yellow{background:var(--yellow);color:var(--green-dark)}.button-cream{background:var(--cream);color:var(--green-dark)}.button-green{background:var(--green);color:var(--cream)}.button-small{min-height:48px;padding:10px 20px;font-size:14px;gap:25px}.hero-content{position:relative;z-index:2;padding:clamp(70px,10vh,130px) 4.6% 0;max-width:1020px;pointer-events:none}.hero-content a{pointer-events:auto}.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.9px;line-height:1.5;display:flex;align-items:center;gap:12px}h1{font-size:clamp(76px,7.4vw,126px);font-weight:500;letter-spacing:-.065em;line-height:1.02}h1 em{font-family:var(--serif);font-size:1.2em;font-weight:400;color:var(--yellow);letter-spacing:-.04em;line-height:.85}.hero-content p{font-size:18px;line-height:1.6;margin:28px 0 30px;letter-spacing:-.1px}.hero-actions{display:flex;align-items:center;gap:28px}.menu-toggle,.mobile-nav{display:none}.menu-toggle{position:relative;width:44px;height:44px;background:transparent}.menu-toggle span{position:absolute;left:10px;top:calc(50% - .5px);display:block;width:24px;height:1px;background:currentColor;margin:0;transform-origin:center;transition:transform 240ms cubic-bezier(.4,0,.2,1)}.menu-toggle span:first-child{transform:translateY(-4px)}.menu-toggle span:last-child{transform:translateY(4px)}.menu-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}.mobile-nav[hidden]{display:none}

.section-space{padding:112px 6.5%}.ticker{overflow:hidden;background:var(--green);color:var(--yellow);padding:25px 0}.ticker-track{--ticker-gap:50px;display:flex;width:max-content;align-items:center;gap:0;white-space:nowrap;font-size:31px;font-weight:450;letter-spacing:-1px}.ticker-track em{font-family:var(--serif);font-weight:400;font-size:39px}.ticker-star{font-size:30px;font-weight:400}h2 em{font-family:var(--serif);font-weight:400;font-size:1.12em}.platform{background:var(--surface);padding-top:95px;padding-bottom:38px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:48px}.section-heading .eyebrow{margin-bottom:26px}h2{font-size:clamp(40px,4.5vw,72px);line-height:1.04;font-weight:500;letter-spacing:-.05em}.section-heading>p{font-size:16px;line-height:1.7;color:var(--secondary);margin-bottom:6px}.feature-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #b9c8b9;margin-bottom:28px;gap:28px}.feature-tabs button{display:flex;align-items:center;gap:12px;min-height:68px;padding:0 4px;background:transparent;color:#536555;font-weight:500;font-size:17px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}.feature-tabs button[aria-selected=true]{color:var(--green);border-color:var(--green)}.feature-tabs button:hover{color:var(--green)}.tab-number{font-size:12px;margin-right:5px}.feature-panel{display:grid;grid-template-columns:1fr 1.7fr;min-height:510px;background:var(--panel);border-radius:14px;overflow:hidden}.feature-panel[hidden]{display:none}.feature-copy{padding:43px 36px 38px 42px}.feature-copy h3{font-size:35px;letter-spacing:-1.4px;line-height:1.12;font-weight:500}.feature-copy>p{font-size:16px;line-height:1.65;color:var(--secondary);margin-top:20px;max-width:310px}.small-checks,.price-features{list-style:none;padding:0}.small-checks{margin:23px 0 26px;font-size:13px;line-height:1.6}.small-checks li{margin:7px 0;display:flex;gap:9px}.small-checks li:before,.price-features li:before{content:'';display:block;width:1em;height:1em;flex:0 0 1em;margin-top:.28em;background:currentColor;-webkit-mask:var(--check-icon) center/contain no-repeat;mask:var(--check-icon) center/contain no-repeat}.inline-link{display:inline-flex;gap:30px;align-items:center;border-bottom:1px solid var(--green);padding-bottom:7px;font-size:14px}.inline-link:hover{gap:38px}.how-it-works{padding-top:110px;padding-bottom:115px}.how-it-works .section-heading{margin-bottom:60px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.steps h3{font-size:24px;font-weight:500;letter-spacing:-.7px;margin:8px 0 17px}.steps p{font-size:16px;line-height:1.7;color:var(--secondary);max-width:320px}.pricing{background:var(--yellow);color:var(--ink);display:grid;grid-template-columns:1fr 1.2fr;gap:90px;padding-top:95px;padding-bottom:95px}.pricing-intro>.eyebrow{margin:8px 0 35px}.pricing-intro h2{font-size:clamp(46px,5vw,77px)}.pricing-intro>p{font-size:18px;line-height:1.7;margin-top:29px}.pricing-aside{display:flex;align-items:center;gap:22px;margin-top:70px;transform:rotate(-6deg);margin-left:8px}.pricing-aside>span{font-size:55px}.pricing-aside p{font-family:var(--serif);font-size:28px;font-style:italic;line-height:1.1}.pricing-card{background:var(--green);color:var(--cream);border-radius:14px;padding:38px}.pricing-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.pricing-card-top h3{font-size:23px;font-weight:500;letter-spacing:-.6px}.all-included{font-size:8px;letter-spacing:1px;border:1px solid #f7f7eb4d;padding:8px 10px;border-radius:4px;color:var(--yellow)}.price{display:flex;align-items:center;gap:22px;margin:30px 0 25px}.price-amount{font-size:100px;letter-spacing:-7px;line-height:1.1;font-weight:450}.price>span:last-child{font-size:14px;line-height:1.5;opacity:.7}.pricing-rule{height:1px;background:#f7f7eb35}.price-features{display:grid;grid-template-columns:1fr 1fr;gap:17px 20px;margin:28px 0 35px;font-size:12px;line-height:1.5}.price-features li{display:flex;align-items:baseline;gap:9px}.price-features li:before{color:var(--yellow)}.pricing-card .button{width:100%;font-size:14px}.closing{position:relative;overflow:hidden;min-height:540px;padding:90px 6.5%;display:flex;align-items:center;justify-content:space-between;color:var(--cream);isolation:isolate}.closing-content>.eyebrow{margin-bottom:28px}.closing h2{font-size:clamp(54px,6.5vw,94px);line-height:1;letter-spacing:-4px}.closing h2 em{color:var(--yellow)}.closing-content>.button{margin-top:32px;min-width:225px}.closing-stamp{width:210px;height:210px;border:1px solid #f5ef97aa;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--yellow);transform:rotate(12deg);margin-right:5%}.closing-stamp>span{font-size:8px;letter-spacing:1.3px}.closing-stamp strong{font-size:33px;line-height:1;font-weight:450;letter-spacing:-1px;text-align:center}.closing-stamp em{font-family:var(--serif);font-size:1.2em;font-weight:400}.footer{background:var(--green-dark);color:var(--cream);padding:56px 6.5% 28px}.footer-top{display:flex;align-items:flex-start;gap:50px;padding-bottom:55px}.footer-top>.brand{font-size:32px}.footer-top>p{font-size:13px;line-height:1.7;opacity:.65;margin-top:4px}.footer-bottom a:hover{color:var(--yellow)}.footer-bottom{border-top:1px solid #f7f7eb30;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#c2cfc3}.footer-bottom>div{display:flex;gap:25px}.back-top{margin-left:20px}@keyframes ticker-loop{to{transform:translateX(-50%)}}
@media(max-width:1100px){.section-space{padding-left:5%;padding-right:5%}.feature-panel{grid-template-columns:1fr 1.4fr}.feature-copy{padding:35px 28px}.feature-copy h3{font-size:30px}.feature-copy>p{font-size:15px}.feature-tabs{gap:15px}.feature-tabs button{font-size:15px}.pricing{gap:40px;grid-template-columns:1fr 1.25fr}.pricing-card{padding:28px}.price-features{font-size:11px;gap:17px 12px}.all-included{font-size:7px}.footer-top{gap:25px}}
@media(max-width:760px){.section-space{padding:72px 6%}.ticker{padding:17px 0}.ticker-track{font-size:23px;--ticker-gap:30px}.ticker-track em{font-size:29px}.ticker-star{font-size:24px}.section-heading{display:block;margin-bottom:30px}.section-heading .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:24px}h2{font-size:43px}.section-heading>p{font-size:15px;margin-top:24px}.section-heading>p br{display:none}.feature-tabs{gap:12px;margin-bottom:20px}.feature-tabs button{display:flex;flex-wrap:wrap;align-content:center;justify-content:flex-start;text-align:left;font-size:13px;line-height:1.4;gap:5px;padding:12px 2px;min-height:87px}.tab-number{display:block;width:100%;font-size:10px}.feature-panel{grid-template-columns:1fr;min-height:0}.feature-copy{padding:30px}.feature-copy h3{font-size:34px}.feature-copy h3 br{display:none}.feature-copy>p{max-width:none;font-size:16px}.small-checks{font-size:13px}.how-it-works .section-heading{margin-bottom:40px}.how-it-works .section-heading>.button{margin-top:28px;min-height:50px;font-size:14px}.steps{grid-template-columns:1fr;gap:26px}.steps h3{font-size:25px}.steps p{max-width:none}.pricing{grid-template-columns:1fr;gap:38px}.pricing-intro>.eyebrow{font-size:10px;letter-spacing:1.5px;margin:0 0 26px}.pricing-intro h2{font-size:56px}.pricing-intro>p{font-size:16px;margin-top:22px}.pricing-aside{display:none}.pricing-card{padding:28px 25px}.pricing-card-top{gap:8px}.pricing-card-top h3{font-size:23px}.all-included{font-size:7px;padding:7px;letter-spacing:.6px}.price-amount{font-size:90px}.price-features{font-size:12px;grid-template-columns:1fr;gap:13px;margin:24px 0 30px}.pricing-card .button{font-size:13px;padding:14px 18px;gap:12px}.closing{padding:70px 6%;min-height:500px}.closing-stamp{display:none}.closing h2{font-size:62px;letter-spacing:-2.5px}.closing-content>.eyebrow{font-size:10px;letter-spacing:1.5px}.closing-content>.button{font-size:14px;min-height:55px}.footer{padding:42px 6% 26px}.footer-top{flex-wrap:wrap;gap:22px;padding-bottom:32px}.footer-top>.brand{font-size:30px}.footer-top>p{font-size:12px;margin-left:auto}.footer-bottom{flex-direction:column;gap:22px;font-size:10px}.footer-bottom>div{justify-content:space-between;gap:15px}.back-top{margin-left:0}}
@media(min-width:1800px){.hero-content{padding-top:14vh;max-width:1200px}.hero-content p{font-size:20px}h1{font-size:142px}}
@media(max-width:1000px){.header{height:92px}.desktop-nav{gap:22px}.hero{min-height:700px}.hero-content{padding-top:90px}h1{font-size:clamp(72px,8.3vw,100px)}.hero-content p{font-size:17px}.hero-actions{gap:22px}.hero-content{max-width:85%}}
@media(max-width:700px){.hero{min-height:790px;max-height:1100px}.header{margin:0 6%;height:88px}.brand{font-size:26px}.brand svg{width:26px}.desktop-nav,.nav-demo{display:none}.menu-toggle{display:block}.mobile-nav{display:flex;position:absolute;top:76px;left:0;right:0;background:var(--cream);color:var(--green);padding:20px;border-radius:12px;flex-direction:column;box-shadow:0 20px 60px #123d2f44}.mobile-nav a{padding:14px}.hero-content{padding:54px 6% 0;max-width:none}h1{font-size:clamp(54px,10.5vw,74px);letter-spacing:-.058em}.hero-content p{font-size:16px;margin:22px 0;line-height:1.5}.hero-actions{gap:20px}.hero-actions .button{min-height:53px;padding:10px 18px;gap:20px;font-size:14px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Official AllWedge artwork: the source paths are preserved in the SVG.
   A mask lets the same mark inherit the cream, green or yellow brand ink. */
.ghost-mark {
  display: inline-block;
  width: 1em;
  aspect-ratio: 1;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('assets/allwedge-ghost.svg') center / contain no-repeat;
  mask: url('assets/allwedge-ghost.svg') center / contain no-repeat;
}
.brand { gap: 12px; }
.brand-ghost { width: 39px; }
.hero-content p { max-width: 510px; }

.hero-actions { gap: 25px; }

.feature-copy > p { max-width: 345px; }
.closing-stamp { gap: 15px; }
.operation-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; margin-top: 60px; padding: 34px 0 30px; border-top: 1px solid #c7d1bf; }

.operation-details h3 { font-size: 23px; letter-spacing: -.7px; font-weight: 500; margin: 20px 0 15px; line-height: 1.2; }
.operation-details p { font-size: 16px; line-height: 1.65; color: var(--secondary); }
.small-checks { font-size: 14px; }
.price-features { font-size: 13px; }
.price-features li { min-width: 0; }
.all-included { font-size: 9px; }
.feature-copy > p { font-size: 16px; }

@media (max-width: 1100px) {

  .operation-details { gap: 26px; }
  .operation-details h3 { font-size: 21px; }
  .price-features { grid-template-columns: 1fr; font-size: 14px; gap: 12px; }
}
@media (max-width: 760px) {
  
  
  
  
  
  .feature-panel { min-height: 0; }
  .feature-copy > p { max-width: none; }
  .section-heading > p { font-size: 16px; }
  .operation-details { grid-template-columns: 1fr; gap: 28px; margin-top: 38px; padding-top: 30px; }
  .operation-details h3 { font-size: 25px; margin-top: 12px; }
  .small-checks { font-size: 14px; }
  .pricing-card .button { font-size: 13px; }
  .closing h2 { font-size: clamp(42px, 8.6vw, 62px); }
}
@media (max-width: 700px) {
  .brand-ghost { width: 33px; }
  
  .hero-content p { max-width: 440px; }
  .hero-actions { gap: 17px; }
  
  .hero-actions .button { padding: 10px 17px; gap: 16px; }

}
@media (max-width: 380px) {
  .hero-actions { gap: 13px; }
  .hero-actions .button { padding: 10px 12px; gap: 12px; font-size: 13px; }
  
  .hero-content p { font-size: 15px; }
  
}

/* The sky, foliage, and clouds share one fixed coordinate system. The sky mask keeps cloud color off the original tree pixels. */

/* The initial system preference and explicit toggle share the same theme. */

:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #0e1c20;
    --page-ink: #e8eee4;
    --surface: #14262a;
    --panel: #1b3032;
    --secondary: #b2c4bd;
    --accent: #dcefae;
    --rule: #38514e;
  }
:root[data-theme="dark"] .hero { background: #101d37; }

:root[data-theme="dark"] .ticker { background: #172f30; }

 :root[data-theme="dark"] .operation-details, :root[data-theme="dark"] .feature-tabs{ border-color: var(--rule); }
 :root[data-theme="dark"] .feature-tabs button { color: var(--secondary); }
:root[data-theme="dark"] .feature-tabs button[aria-selected=true], :root[data-theme="dark"] .feature-tabs button:hover { color: var(--accent); }
:root[data-theme="dark"] .feature-tabs button[aria-selected=true], :root[data-theme="dark"] .inline-link { border-color: var(--accent); }
:root[data-theme="dark"] .inline-link { color: var(--accent); }
:root[data-theme="dark"] .button-green { background: #cde6a7; color: #153d2c; }
:root[data-theme="dark"] .pricing { background: #273833; color: var(--page-ink); }
:root[data-theme="dark"] .pricing-card { background: #12382f; }

:root[data-theme="dark"] .footer { background: #09181d; }

/* Compact official brand in the header, sized to sit with the navigation. */
.header .brand { font-size: 20px; letter-spacing: -1.1px; gap: 7px; }
.header .brand-ghost { width: 24px; }

@media (max-width: 700px) {
  .header .brand { font-size: 19px; gap: 7px; }
  .header .brand-ghost { width: 22px; }
  .hero { display: flex; flex-direction: column; height: auto; min-height: 100svh; max-height: none; }
  .header { flex-shrink: 0; }
  .hero-content { flex-shrink: 0; }
}

/* Sun-to-moon switch: a real button, with an animated thumb and icon. */
.header-actions { display: flex; align-items: center; gap: 16px; }
.theme-toggle { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent; border-radius: 999px; }
.theme-toggle[hidden] { display: none; }
.theme-track { display: block; width: 36px; height: 36px; padding: 3px; border: 1px solid #f7f7eb70; border-radius: 999px; background: #e1f2f23b; box-shadow: inset 0 1px 4px #143d4820; transition: background 500ms ease, border-color 500ms ease; }
.theme-thumb { display: grid; place-items: center; position: relative; width: 28px; height: 28px; border-radius: 50%; background: #fff2ab; color: #705429; box-shadow: 0 2px 5px #12342c30; transition: transform 650ms cubic-bezier(.22,1,.36,1), background 500ms ease; }
.theme-thumb svg { position: absolute; width: 21px; height: 21px; transition: opacity 350ms ease, transform 650ms cubic-bezier(.22,1,.36,1); }
.theme-moon { opacity: 0; transform: rotate(-70deg) scale(.55); }
.theme-toggle:hover .theme-track { border-color: #fffde9; }
:root[data-theme="dark"] .theme-track { background: #0b1d3fba; border-color: #c2d4df77; }
:root[data-theme="dark"] .theme-thumb { background: #e5ece1; color: #294668; }
:root[data-theme="dark"] .theme-sun { opacity: 0; transform: rotate(90deg) scale(.55); }
:root[data-theme="dark"] .theme-moon { opacity: 1; transform: rotate(0) scale(1); }
@media (max-width: 1000px) { .header-actions { gap: 12px; } .desktop-nav { gap: 16px; font-size: 14px; } }
@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .mobile-nav { display: flex; position: absolute; top: 76px; left: 0; right: 0; background: var(--cream); color: var(--green); padding: 20px; border-radius: 12px; flex-direction: column; box-shadow: 0 20px 60px #123d2f44; }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav a { padding: 14px; }
}
@media (max-width: 700px) { .header-actions { gap: 12px; } }

/* Let the illustrated hero rest outside the viewport or in a hidden tab. */
.hero.scene-resting *, .hero.scene-resting *::before, .hero.scene-resting *::after { animation-play-state: paused !important; }

/* The clubhouse shares one coordinate system: furniture never shifts relative to the room. */
.hero { background: #253d30; }
.hero .header { border-bottom: 0; }

.hero-content { max-width: 880px; padding-top: max(clamp(68px, 12vh, 140px), calc(24vh - 100px)); }
.hero-content h1 { font-size: clamp(70px, 6.3vw, 112px); }
.hero-content p { max-width: 475px; }
:root[data-theme="dark"] .hero { background: #142b29; }

@media (min-width: 1800px) { .hero-content { padding-top: max(13vh, calc(24vh - 100px)); max-width: 1000px; } }
@media (max-width: 1000px) and (min-width: 701px) {
  .hero-content { max-width: 690px; padding-top: 85px; }
  .hero-content h1 { font-size: clamp(66px, 7.5vw, 78px); }
  .hero-content p { max-width: 400px; font-size: 16px; }
  
}
@media (max-width: 700px) {
  .hero { overflow: hidden; }
  .header { order: 0; }
  .hero-content { order: 1; padding-top: 38px; max-width: none; }
  .hero-content h1 { font-size: clamp(54px, 10.5vw, 74px); }
  .hero-content p { max-width: 440px; }
  /* Fill the hero below the copy, including spare height on taller phones. */
  
  
  .hero-actions { flex-wrap: wrap; row-gap: 12px; }
  
  
  

}

/* Keep the daylight image opaque under the fading night layer, so lamp cores do not dip in brightness mid-transition. */

/* Alpha glass fills the aperture behind the room artwork, with no inset border or blend pass. */

/* A fixed navigation rail with a translucent material that appears after scrolling. */
:root {
  --header-height: 112px;
  --header-glass: rgb(247 250 243 / .97);
  --header-glass-solid: #f1f5ec;
  --header-rim: rgb(255 255 255 / .76);
  --header-reflection: rgb(255 255 255 / .42);
  scroll-padding-top: 104px;
}
:root[data-theme="dark"] {
  --header-glass: rgb(13 34 34 / .97);
  --header-glass-solid: #142c2b;
  --header-rim: rgb(227 245 236 / .24);
  --header-reflection: rgb(232 255 247 / .15);
}
section[id] { scroll-margin-top: 16px; }
.hero { padding-top: var(--header-height); }
.header {
  position: fixed;
  isolation: isolate;
  z-index: 40;
  top: 0;
  left: 4.6%;
  right: 4.6%;
  height: var(--header-height);
  margin: 0;
  border: 0;
  color: var(--cream);
  transition: top 320ms ease, height 320ms ease, color 240ms ease;
}
.header::before, .header::after {
  content: '';
  position: absolute;
  inset: 0 -24px;
  z-index: -1;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}
.header::before {
  background: var(--header-glass);
  box-shadow: 0 12px 38px rgb(9 34 25 / .12), 0 2px 8px rgb(9 34 25 / .06);
}
.header::after {
  border: 1px solid var(--header-rim);
  background: linear-gradient(125deg, var(--header-reflection), transparent 24%, transparent 72%, rgb(233 255 230 / .07));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(20 60 46 / .10);
}
.header.is-scrolled { top: 12px; height: 76px; color: var(--page-ink); }
.header.is-scrolled::before, .header.is-scrolled::after { opacity: 1; }
.header.is-scrolled::before {
  -webkit-backdrop-filter: blur(18px) saturate(180%) contrast(105%);
  backdrop-filter: blur(18px) saturate(180%) contrast(105%);
}
.header.is-scrolled .nav-demo {
  background: var(--green);
  color: var(--cream);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 2px 5px rgb(15 50 30 / .10);
}
.header.is-scrolled .theme-track { border-color: rgb(22 75 55 / .24); background: rgb(255 255 255 / .42); }
:root[data-theme="dark"] .header.is-scrolled .nav-demo { background: var(--cream); color: var(--green-dark); }
:root[data-theme="dark"] .header.is-scrolled .theme-track { border-color: rgb(225 241 236 / .30); background: rgb(9 23 42 / .6); }
.header .mobile-nav {
  top: calc(100% + 12px);
  max-height: calc(100svh - 124px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--page-ink);
  background: var(--header-glass);
  border: 1px solid var(--header-rim);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--header-reflection), 0 16px 40px rgb(9 34 25 / .18);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
@media (max-width: 1000px) { :root { --header-height: 92px; } }
@media (max-width: 700px) {
  :root { --header-height: 88px; scroll-padding-top: 96px; }
  .header { left: 6%; right: 6%; }
  .header::before, .header::after { inset-inline: -12px; border-radius: 21px; }
  .header.is-scrolled { top: 10px; height: 68px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-scrolled::before, .header .mobile-nav { background: var(--header-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .header.is-scrolled::before, .header .mobile-nav {
    background: var(--header-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .header::after { background: none; }
}
@media (forced-colors: active) {
  .header.is-scrolled { color: CanvasText; }
  .header.is-scrolled::before, .header .mobile-nav { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header::after { background: none; border-color: CanvasText; }
}

/* A fade along the top of the window, behind the bar, once the page has moved (app.js sets its opacity). */
.header-fade {
  position: fixed;
  inset: 0 0 auto;
  z-index: 39;
  height: 7rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-mask-image: linear-gradient(#000, rgb(0 0 0 / .92) 38%, transparent);
  mask-image: linear-gradient(#000, rgb(0 0 0 / .92) 38%, transparent);
}

/* Phones and tablets: a "Menu" button at the far right of the bar. Opening it turns the bar itself into the
   menu: the logo and "Book a demo" fade, the button becomes "Close", the bar's glass grows down (only its
   pseudo-element layers resize, so nothing reflows) and the links rise in one after another. Closing fades
   the links first, then folds the glass back up into the bar. */
@media (max-width: 900px) {
  /* The button sits over the end of the bar (its space is reserved in the actions) so it can stretch across
     the whole bar as the menu opens, the way spacefs.com's does. */
  .header .header-actions { padding-right: calc(92px + 8px); }
  .header .menu-toggle {
    position: absolute;
    z-index: 2;
    top: calc(50% - 20px);
    right: 0;
    width: 92px;
    height: 40px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 7%, transparent);
    font-size: 13.5px;
    font-weight: 500;
    transition: width 600ms cubic-bezier(.32,.72,0,1) 60ms, background-color 200ms ease, border-color 200ms ease;
  }
  .header.menu-open .menu-toggle { width: 100%; transition-delay: 0s; }
  /* Icon and label stay centred as a group, so they stay in the middle while the button stretches. */
  .header .menu-toggle span { left: calc(50% - 31px); width: 15px; height: 1.6px; border-radius: 2px; }
  .header .menu-toggle span:first-child { transform: translateY(-3px); }
  .header .menu-toggle span:last-child { transform: translateY(3px); }
  .header .menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .header .menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .header .menu-toggle::before, .header .menu-toggle::after {
    position: absolute;
    top: 50%;
    left: calc(50% - 8px);
    line-height: 1;
    transition: transform 460ms cubic-bezier(.32,.72,0,1), opacity 260ms ease;
  }
  .header .menu-toggle::before { content: 'Menu'; transform: translateY(-50%); }
  .header .menu-toggle::after { content: 'Close'; transform: translateY(70%); opacity: 0; }
  .header .menu-toggle[aria-expanded="true"]::before { transform: translateY(-170%); opacity: 0; }
  .header .menu-toggle[aria-expanded="true"]::after { transform: translateY(-50%); opacity: 1; }

  /* The bar's glass layers grow down to hold the links. */
  .header::before, .header::after {
    transition: opacity 320ms ease 260ms, bottom 600ms cubic-bezier(.32,.72,0,1) 90ms;
  }
  .header.menu-open { color: var(--page-ink); }
  .header.menu-open::before, .header.menu-open::after {
    opacity: 1;
    bottom: calc(-1 * var(--menu-height, 320px));
    transition: opacity 200ms ease, bottom 600ms cubic-bezier(.32,.72,0,1);
  }
  .header.menu-open::before {
    -webkit-backdrop-filter: blur(18px) saturate(180%) contrast(105%);
    backdrop-filter: blur(18px) saturate(180%) contrast(105%);
  }
  .header :is(.brand, .nav-demo) { transition: opacity 220ms ease 200ms; }
  .header.menu-open :is(.brand, .nav-demo) { opacity: 0; pointer-events: none; transition-delay: 0s; }

  .header .mobile-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100svh - 120px);
    padding: 4px 0 22px;
    overflow-y: auto;
    color: var(--page-ink);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 700ms;
  }
  .header.menu-open .mobile-nav { visibility: visible; pointer-events: auto; transition-delay: 0s; }
  /* The palette's highlight for the old dropdown would draw a line where the bar used to end. */
  .header #mobile-nav { box-shadow: none; }
  .header .mobile-nav a {
    grid-column: 1 / -1;
    width: fit-content;
    padding: 3px 0;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1.2;
  }
  .header .mobile-nav a:last-of-type, .header .mobile-nav .theme-toggle { grid-row: 7; align-self: stretch; margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--page-ink) 12%, transparent); }
  .header .mobile-nav a:last-of-type { grid-column: 1; display: flex; align-items: center; width: auto; font-size: 14px; letter-spacing: 0; }
  .header .mobile-nav .theme-toggle { grid-column: 2; height: auto; padding-bottom: 0; border-radius: 0; }
  .header .mobile-nav > * {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
    transition: opacity 140ms ease, transform 200ms ease, filter 140ms ease;
  }
  .header.menu-open .mobile-nav > * {
    --delay: calc(170ms + var(--n, 5) * 45ms);
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity 420ms ease var(--delay), transform 640ms cubic-bezier(.32,.72,0,1) var(--delay), filter 420ms ease var(--delay);
  }
  /* The theme switch lives in the menu here. */
  .header-actions .theme-toggle { display: none; }
}

/* Lite mode: app.js turns this on when scrolling measurably struggles (a slow GPU, or a display driven through
   another adapter). Live blurs become solid fills, the fade strip becomes a plain gradient and the hero silk
   stops, so the page stays responsive. */
.is-lite .header.is-scrolled::before, .is-lite .header.menu-open::before { background: var(--header-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-lite .button-glass, .is-lite .proof-deck.is-deck > .proof-card.is-active { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { .header-fade { display: none; } }

/* The header never blurs what is behind it live. The fade strip and the bar each re-blurred the page on every
   scroll frame, the bar on top of the strip's own blur, which some displays (notably one driven through a second
   graphics adapter) cannot keep up with. A denser tint keeps the glass look, and the strip fades the page into
   its own colour instead. */
.header.is-scrolled::before, .header.menu-open::before, .header .mobile-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
.header-fade {
  height: 5.5rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  background: linear-gradient(var(--page) 30%, color-mix(in srgb, var(--page) 60%, transparent) 62%, transparent);
}

/* Keep day and night together inside each season, so the year never restarts on a theme change. */

/* Retire a lower layer only once its successor is fully opaque. */

/* Compact operator examples reuse the platform's existing accessible tabs. */
.hero-content .hero-actions { margin-top: 34px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.facility-questions { margin-top: 45px; border-top: 1px solid var(--rule); }
.facility-questions details { border-bottom: 1px solid var(--rule); }
.facility-questions summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; }
.facility-questions summary::-webkit-details-marker { display: none; }
.facility-questions summary > span { font-size: 22px; font-weight: 400; transition: transform 180ms ease; }
.facility-questions details[open] summary > span { transform: rotate(45deg); }
.facility-questions details p { max-width: 690px; color: var(--secondary); font-size: 15px; line-height: 1.7; margin: 0 35px 22px 0; }

/* Tilted product cards keep the story clear without recreating a full dashboard. */
.feature-panel > * { min-width: 0; }
#platform .feature-copy > p { font-size: 17px; line-height: 1.65; }
#platform .small-checks { font-size: 15px; }
#platform .feature-copy h3 { text-wrap: balance; }
.platform-art { --art-surface: #e5eadd; --art-paper: #fffef5; --art-ink: #193f31; --art-muted: #586b52; --art-line: #d1dcc7; --art-shadow: #b9c9ab; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 470px; min-width: 0; margin: 24px 24px 24px 0; padding: 38px 36px 24px; border-radius: 12px; background: var(--art-surface); color: var(--art-ink); overflow: hidden; }
.story-composition { width: 100%; max-width: 408px; display: flex; flex-direction: column; align-items: flex-start; padding-top: 8px; }
.story-card { --card-angle: -5deg; width: calc(100% - 25px); padding: 25px 27px; border: 1px solid var(--art-line); border-radius: 15px; background: var(--art-paper); transform: rotate(var(--card-angle)); box-shadow: 7px 10px 0 var(--art-shadow), 0 18px 30px rgb(24 50 31 / .08); animation: story-arrive 550ms cubic-bezier(.2,.7,.25,1) both; }
.story-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.story-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.3px; }
.story-brand .ghost-mark { width: 24px; flex-shrink: 0; }
.card-eyebrow { font-size: 11px; font-weight: 550; letter-spacing: 1.2px; line-height: 1.5; }
.story-card h4 { position: relative; font-size: clamp(36px, 3.1vw, 46px); font-weight: 450; letter-spacing: -1.6px; line-height: 1.04; margin: 22px 0 25px; }
.story-card h4 em { font-family: var(--serif); font-size: 1.16em; font-weight: 400; }
.ticket-details { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; }
.ticket-details div > span { display: block; font-size: 13px; line-height: 1.5; color: var(--art-muted); }
.ticket-details strong { display: block; font-size: 16px; line-height: 1.5; font-weight: 550; margin-top: 2px; }
.ticket-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px dashed var(--art-line); font-size: 13px; line-height: 1.5; }
.guest-count { display: flex; align-items: center; gap: 7px; }
.guest-count svg { width: 18px; height: 18px; }
.ticket-booked { font-weight: 550; }
.story-notification { --notice-angle: 3deg; position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: calc(100% - 34px); align-self: flex-end; margin-top: -5px; padding: 18px; border-radius: 12px; border: 1px solid var(--art-line); background: var(--art-paper); box-shadow: 0 8px 0 rgb(26 60 36 / .06), 0 12px 26px rgb(26 60 36 / .12); transform: rotate(var(--notice-angle)); animation: notice-arrive 500ms cubic-bezier(.16,.7,.2,1) 180ms both; }
.notification-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--cream); }
.notification-icon svg { width: 24px; height: 24px; }
.story-notification div { min-width: 0; }
.story-notification strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.25px; }
.story-notification div > span { display: block; font-size: 13px; line-height: 1.5; color: var(--art-muted); margin-top: 4px; }
.payment-notification { background: var(--yellow); color: var(--green-dark); border-color: #e3dda1; }
.payment-notification div > span { color: #46613e; }
.notification-spark { font-size: 25px; color: #547343; margin-left: auto; }
.confirmation-check { stroke-dasharray: 30; stroke-dashoffset: 0; animation: confirm-payment 500ms ease-out 400ms both; }
.platform-art figcaption { text-align: center; font-size: 11px; font-weight: 550; letter-spacing: .85px; color: var(--art-muted); line-height: 1.5; margin-top: 31px; }
.platform-art figcaption > span { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 5px; }
.access-art { background: #e0e9db; }
.access-pass { --card-angle: 4deg; align-self: flex-end; background: #1b4939; color: var(--cream); border-color: #4c6d53; box-shadow: -7px 10px 0 var(--art-shadow), 0 18px 30px rgb(24 50 31 / .08); }
.access-pass .story-brand { font-size: 13px; }
.session-live { display: inline-flex; align-items: center; gap: 5px; color: #e2edca; white-space: nowrap; font-size: 11px; }
.session-live > span { width: 5px; height: 5px; background: #d5eea7; border-radius: 50%; }
.access-title { position: relative; isolation: isolate; margin-top: 27px; }
.access-title > .card-eyebrow { color: #d4e4c4; }
.access-title h4 { margin: 8px 0 26px; }
.access-title h4 em { color: var(--yellow); }

.access-timing { display: flex; justify-content: space-between; gap: 12px; color: #d4e4c4; font-size: 12px; line-height: 1.5; }
.access-timing > span:last-child { text-align: right; }
.access-timing strong { display: block; color: var(--cream); font-size: 15px; font-weight: 500; margin-top: 2px; }
.access-progress { height: 4px; background: #54775c; margin-top: 12px; border-radius: 4px; overflow: hidden; }
.access-progress > span { display: block; width: 60%; height: 100%; background: var(--yellow); }
.unlock-notification { --notice-angle: -3deg; align-self: flex-start; margin-top: 0; }
.retention-art { background: #e5e8d9; }
.return-card { --card-angle: -6deg; background: var(--green); color: var(--yellow); border-color: #486b47; padding: 28px; }

.return-card h4 { margin: 25px 0 29px; font-size: clamp(38px, 3.2vw, 47px); }
.return-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #f5ef9750; padding-top: 15px; font-size: 13px; line-height: 1.5; }
.card-wordmark { font-size: 19px; letter-spacing: -.8px; }
.return-notification { --notice-angle: 2deg; }
.return-notification .notification-icon { background: #e7edd9; color: var(--green); }

@keyframes story-arrive { from { opacity: 0; transform: translateY(10px) rotate(calc(var(--card-angle) + 2deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--card-angle)); } }
@keyframes notice-arrive { from { opacity: 0; transform: translateY(12px) rotate(var(--notice-angle)); } to { opacity: 1; transform: translateY(0) rotate(var(--notice-angle)); } }
@keyframes confirm-payment { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
:root[data-theme="dark"] .platform-art { --art-paper: #263e33; --art-ink: #edf3e4; --art-muted: #bfd0b7; --art-line: #4c6654; --art-shadow: #405640; background: #20362f; }
:root[data-theme="dark"] .access-art { background: #203830; }
:root[data-theme="dark"] .retention-art { background: #293c30; }
:root[data-theme="dark"] .story-notification { box-shadow: 0 8px 0 rgb(9 24 15 / .12), 0 12px 26px rgb(6 20 14 / .2); }
:root[data-theme="dark"] .payment-notification { border-color: #dcd797; }
@media (max-width: 1100px) {
  
  
  
  .platform-art { padding-inline: 25px; margin: 20px 20px 20px 0; min-height: 475px; }
  .story-card { padding: 23px; }
  .story-brand { font-size: 13px; }
  .story-notification { width: calc(100% - 14px); padding: 15px; gap: 10px; }
  .story-notification strong { font-size: 15px; }
  .notification-spark { display: none; }
  .ticket-details strong { font-size: 15px; }
  .access-pass .story-card-top { flex-wrap: wrap; gap: 8px; }
  .access-title { margin-top: 18px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .story-card { width: calc(100% - 14px); padding-inline: 20px; }
  .story-card h4 { font-size: 35px; }
  .ticket-details { grid-template-columns: 1fr; gap: 8px; }
  .ticket-details div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .ticket-details strong { font-size: 14px; }
  .booking-ticket > .story-card-top > .card-eyebrow { display: none; }
  .story-notification { width: 100%; }
  .notification-icon { flex-basis: 33px; height: 33px; }
  .return-card-bottom { font-size: 12px; }
  .card-wordmark { font-size: 17px; }
}
@media (max-width: 760px) {
  .hero-content .hero-actions { margin-top: 28px; }
  
  
  
  
  #platform .feature-tabs button { font-size: 15px; min-height: 93px; }
  #platform .feature-copy h3 { text-wrap: initial; }
  #platform .feature-copy { padding: 30px 27px; }
  .platform-art { margin: 0 20px 20px; min-height: 470px; padding: 38px 32px 23px; }
  .story-card { width: calc(100% - 20px); }
  .story-card h4 { font-size: 43px; }
  .story-notification { width: calc(100% - 20px); }
  .facility-questions summary { font-size: 15px; }
}
@media (max-width: 420px) {
  
  
  
  #platform .feature-copy { padding-inline: 24px; }
  #platform .feature-tabs { gap: 8px; }
  .platform-art { min-height: 455px; margin-inline: 14px; padding: 30px 23px 22px; }
  .story-card { --card-angle: -4deg; width: calc(100% - 8px); padding: 22px 20px; }
  .story-brand { font-size: 12px; }
  .story-brand .ghost-mark { width: 21px; }
  .story-card h4 { font-size: 38px; }
  .booking-ticket > .story-card-top > .card-eyebrow { display: none; }
  .ticket-details { grid-template-columns: 1fr; gap: 8px; }
  .ticket-details div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .ticket-details strong { font-size: 14px; }
  .story-notification { width: 100%; padding: 14px; gap: 10px; }
  .story-notification strong { font-size: 15px; }
  .notification-icon { flex-basis: 33px; height: 33px; }
  .notification-icon svg { width: 21px; height: 21px; }
  .platform-art figcaption { font-size: 10px; letter-spacing: .6px; }
  .access-pass { --card-angle: 3deg; }
  .return-card { --card-angle: -5deg; }
  .return-card-bottom { font-size: 12px; }
  .card-wordmark { font-size: 17px; }
}

/* On phones, browse the illustration first and read its details underneath. */
.tab-label-short, .feature-details > summary { display: none; }

@media (min-width: 761px) {
  .feature-panel > .feature-copy { grid-column: 1; grid-row: 1; }
  .feature-panel > .platform-art { grid-column: 2; grid-row: 1; }
  
  
  
}

@media (max-width: 760px) {
  #platform .feature-tabs { gap: 14px; margin-bottom: 12px; padding: 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; }
  #platform .feature-tabs button { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; align-items: center; gap: 8px 4px; min-width: 0; min-height: 76px; padding: 10px 2px 12px; text-align: left; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; font-size: 14px; line-height: 1.3; }
  #platform .feature-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
  #platform .feature-tabs .tab-number { display: block; grid-column: 1; grid-row: 1; width: auto; margin: 0; font-size: 12px; }
  
  
  #platform .feature-tabs .tab-label-full { display: none; }
  #platform .tab-label-short { display: block; grid-column: 1 / -1; grid-row: 2; }
  #platform .platform-art { margin: 0; min-height: 390px; padding: 26px 20px 16px; border-radius: 14px 14px 0 0; touch-action: pan-y pinch-zoom; }
  #platform .story-composition { max-width: 350px; }
  #platform .story-card { padding: 18px; }
  #platform .story-card h4 { font-size: 32px; margin-block: 12px 16px; }
  #platform .ticket-bottom { margin-top: 12px; padding-top: 12px; }
  #platform .access-title { margin-top: 14px; }
  #platform .story-notification { padding: 12px; }
  #platform .platform-art figcaption { margin-top: 20px; font-size: 0; letter-spacing: 0; }
  #platform .platform-art figcaption > span { margin: 0; font-size: 11px; }
  #platform .feature-copy { padding: 20px; }
  
  #platform .feature-copy h3 { font-size: 26px; line-height: 1.15; letter-spacing: -.8px; }
  #platform .feature-copy > p { margin-top: 12px; font-size: 15px; line-height: 1.55; }
  .feature-details { margin-top: 12px; }
  .feature-details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 12px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 550; }
  .feature-details > summary::-webkit-details-marker { display: none; }
  .feature-details > summary::after { content: ''; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 180ms ease; }
  .feature-details[open] > summary::after { transform: rotate(225deg); }
  #platform .feature-details .small-checks { margin: 0 0 12px; font-size: 14px; }
  #platform .feature-copy > .inline-link { margin-top: 4px; min-height: 44px; font-size: 14px; }
  
  
  
  
  
}

/* Product-faithful brand previews; styles and colors are scoped to this feature. */
.brand-continuity { display:grid; grid-template-columns:minmax(300px,.75fr) minmax(0,1.35fr); align-items:center; gap:clamp(32px,4vw,64px); border-bottom:1px solid var(--rule); }
.brand-feature-copy > .eyebrow { margin-bottom:18px; }
.brand-feature-copy h2 { font-size:clamp(36px,3.7vw,54px); }
.brand-feature-copy > p { max-width:410px; margin-top:18px; font-size:16px; line-height:1.6; color:var(--secondary); }
.brand-feature-list { display:grid; gap:14px; list-style:none; padding:0; margin:22px 0 0; }
.brand-feature-list li { padding-left:18px; border-left:2px solid var(--rule); }
.brand-feature-list h3 { font-size:15px; font-weight:550; letter-spacing:-.2px; }
.brand-feature-list p { margin-top:3px; font-size:14px; line-height:1.5; color:var(--secondary); }
.brand-preview { --sample-brand:#315345; --sample-solid:#315345; --sample-bg:#fff; --sample-card:#fcfbf9; --sample-body:#18181b; --sample-muted:#71717a; --sample-rule:#e4e4e7; --email-bg:#f4f4f5; --email-paper:#fff; --email-card:#fafafa; --email-body:#3f3f46; --email-button:#315345; --email-ink:#fff; margin:0; min-width:0; }
.brand-preview[data-preview-mode="dark"] { --sample-bg:#0f0f0f; --sample-card:#262626; --sample-body:#fafafa; --sample-muted:#a1a1aa; --sample-rule:#3f3f46; --email-bg:#161618; --email-paper:#232326; --email-card:#2e2e33; --email-body:#d4d4d8; }

/* Browser cards and the inert, real-product booking canvas. */
.brand-examples { container:brand-preview / inline-size; margin:0; min-width:0; width:100%; max-width:900px; justify-self:center; }
.brand-venue-card, .brand-email-card { color:var(--sample-body); border:1px solid var(--sample-rule); border-radius:13px; box-shadow:0 12px 32px rgb(0 0 0 / .12); overflow:hidden; background:var(--sample-bg); }
.brand-examples > figcaption { margin-top:16px; text-align:center; color:var(--secondary); font-size:11px; }
.brand-preview-stage::before { content:""; position:absolute; inset:14% 1% 9% 6%; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--sample-brand) 7%,transparent),transparent 70%); pointer-events:none; }
.brand-preview-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:5px 12px; border-bottom:1px solid var(--sample-rule); color:var(--sample-muted); background:var(--sample-card); font-size:10px; letter-spacing:.2px; }
.brand-window-controls { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.brand-window-controls i { width:6px; height:6px; border-radius:50%; background:var(--sample-muted); opacity:.35; }
.brand-email-window .brand-preview-bar { min-height:34px; font-size:9px; padding-inline:10px; }
.brand-email-window .brand-window-controls { gap:3px; }
.brand-email-window .brand-window-controls i { width:5px; height:5px; }
.brand-email-window .brand-email-paper { border-radius:2cqw; }
.brand-preview-stage { position:relative; width:100%; container-type:inline-size; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding:78px 0 12px; aspect-ratio:auto; }
.brand-preview-window { container-type:inline-size; border:1px solid var(--sample-rule); border-radius:14px; background:var(--sample-bg); box-shadow:0 2px 4px rgb(0 0 0 / .04),0 20px 45px -15px rgb(0 0 0 / .2); overflow:hidden; position:relative; top:auto; right:auto; left:auto; }
.brand-venue-window { grid-column:1; grid-row:1; align-self:start; width:90%; aspect-ratio:auto; transform:none; }
.brand-email-window { z-index:2; box-shadow:0 3px 6px rgb(0 0 0 / .04),0 22px 40px -12px rgb(0 0 0 / .24); grid-column:1; grid-row:1; justify-self:end; align-self:start; width:36%; margin-top:clamp(130px,23cqw,190px); aspect-ratio:auto; transform:rotate(3deg); }
.brand-preview-window > .brand-venue-card, .brand-preview-window > .brand-email-card { width:100%; margin:0; border:0; border-radius:0; box-shadow:none; height:auto; }
.brand-booking-render { width:100%; aspect-ratio:1024 / 700; overflow:hidden; position:relative; background:var(--sample-bg); -webkit-user-select:none; user-select:none; }
/* Keep gesture hit testing in the host page, including Safari's iframe scrolling layer. */
.brand-booking-render::after { content:""; position:absolute; inset:0; z-index:1; touch-action:pan-y pinch-zoom; }
/* Keep the iframe viewport at 1024px; CSS zoom changes its layout width in WebKit. */
.brand-booking-render iframe { display:block; position:absolute; inset:0; width:1024px; height:700px; max-width:none; border:0; transform:scale(var(--booking-preview-scale,.4)); transform-origin:top left; pointer-events:none; }
.brand-email-window .brand-email-canvas { height:auto; padding:12px 10px; }
.brand-email-window .brand-email-heading { padding:14px 10px 0; }
.brand-email-window .brand-email-logo { border-radius:1.5cqw; gap:5px; padding:4px 5px; margin-bottom:8px; }
.brand-email-window .brand-email-logo .northline-mark { width:20px; height:20px; }
.brand-email-window .brand-email-logo strong { font-size:clamp(10px,4.8cqw,12px); }
.brand-email-window .brand-email-heading h3 { letter-spacing:-.2px; font-size:clamp(12px,6cqw,16px); }
.brand-email-window .brand-email-body { padding:6px 10px 14px; }
.brand-email-window .brand-email-session { gap:4px; margin:10px 0; padding:10px; border-radius:6px; }
.brand-email-window .brand-email-session strong { font-size:clamp(11px,5cqw,13px); }
.brand-email-window .brand-email-session > span { font-size:clamp(9px,4cqw,11px); }
.brand-email-window .brand-email-session small { font-size:clamp(8px,3.8cqw,10px); }
.brand-email-window .brand-email-cta { font-size:clamp(9px,4.3cqw,11px); padding:9px 10px; margin:12px auto 0; border-radius:5px; }
.brand-email-window .brand-email-access .brand-email-cta { margin:0 auto 7px; }

/* Branded booking email. */
.northline-mark { display:block; flex-shrink:0; }
.brand-email-card { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.brand-email-canvas { background:var(--email-bg); padding:12px; }
.brand-email-paper { background:var(--email-paper); border:1px solid var(--sample-rule); border-radius:8px; overflow:hidden; }
.brand-email-heading { padding:14px 14px 0; text-align:center; }
.brand-email-logo { display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-bottom:12px; padding:5px 8px; border-radius:6px; background:#fff; color:#18181b; }
.brand-email-logo .northline-mark { width:25px; height:25px; color:var(--email-button); }
.brand-email-logo strong { font-size:14px; font-weight:600; }
.brand-email-heading h3 { font-size:18px; font-weight:600; letter-spacing:-.2px; }
.brand-email-body { padding:6px 14px 12px; color:var(--email-body); }
.brand-email-body > p { font-size:12px; line-height:1.6; }
.brand-email-session { display:flex; flex-direction:column; gap:4px; margin:10px 0 8px; background:var(--email-card); border:1px solid var(--sample-rule); border-radius:8px; padding:14px; }
.brand-email-session strong { font-size:14px; font-weight:600; color:var(--sample-body); }
.brand-email-session > span { font-size:12px; }
.brand-email-session small { color:var(--sample-muted); font-size:11px; }
.brand-email-cta { display:table; margin:12px auto 0; padding:10px 18px; border-radius:6px; background:var(--email-button); color:var(--email-ink); font-size:12px; font-weight:600; }
.brand-email-access { text-align:center; margin-top:9px; padding-top:9px; border-top:1px solid var(--sample-rule); }
.brand-email-access small { display:block; line-height:1.5; }
.brand-email-receipt { margin-top:12px; font-size:clamp(8px,3.8cqw,11px); }
.brand-email-receipt > div { display:flex; justify-content:space-between; gap:8px; padding:4px 0; }
.brand-email-receipt > div:last-child { margin-top:3px; padding-top:7px; border-top:1px solid var(--sample-rule); }
.brand-email-receipt small { font-size:.8em; font-weight:400; color:var(--sample-muted); }

/* Attached palette and accessible color popover. */
.brand-studio[hidden], .brand-color-error[hidden] { display:none; }
.brand-studio-heading, .brand-studio-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand-presets legend { width:100%; }
#brand-palette-name { float:right; color:var(--page-ink); font-weight:500; margin-left:10px; }
.brand-presets, .brand-preview-mode { border:0; margin:0; padding:0; min-width:0; }
.brand-presets legend, .brand-custom-color > label { display:block; font-size:12px; color:var(--secondary); margin-bottom:8px; }
.brand-presets button:active { transform:scale(.94); }
.brand-presets button:focus-visible, .brand-color-input:focus-within, .brand-preview-mode label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
.brand-color-input input[type="color"] { appearance:none; -webkit-appearance:none; border:0; padding:0; width:26px; height:26px; background:none; cursor:pointer; flex-shrink:0; }
.brand-color-input input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.brand-color-input input[type="color"]::-webkit-color-swatch { border:0; border-radius:5px; }
.brand-color-input input[type="color"]::-moz-color-swatch { border:0; border-radius:5px; }
.brand-color-error { color:var(--page-ink); font-size:12px; margin-top:10px; }
.brand-preview-mode { display:flex; padding:3px; background:var(--surface); border:1px solid var(--rule); border-radius:8px; }
.brand-preview-mode label { position:relative; padding:6px 13px; font-size:12px; border-radius:5px; cursor:pointer; }
.brand-preview-mode input { position:absolute; opacity:0; width:1px; height:1px; }
.brand-preview-mode label:has(input:checked) { background:var(--panel); box-shadow:0 1px 4px rgb(0 0 0 / .13); }
.brand-customize[hidden] { display:none; }
.brand-studio-heading { font-size:15px; font-weight:550; margin-bottom:10px; }
.brand-studio-close { display:grid; place-items:center; width:36px; height:36px; padding:0; margin:0; border-radius:8px; color:var(--secondary); background:transparent; }
.brand-studio-close:hover { background:var(--surface); color:var(--page-ink); }
.brand-studio-controls { flex-wrap:wrap; gap:14px; }
.brand-presets { width:100%; }
.brand-presets > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; justify-items:center; }
.brand-presets button { position:relative; border:0; background:none; cursor:pointer; transition:transform 160ms ease; display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; }
.brand-presets button::before { content:""; display:block; background:var(--swatch); border-radius:50%; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16); width:24px; height:24px; }
.brand-presets button[aria-pressed="true"]::after { content:""; position:absolute; border:3px solid var(--accent); border-radius:50%; inset:50% auto auto 50%; width:34px; height:34px; transform:translate(-50%,-50%); }
.brand-custom-color { width:100%; }
.brand-color-input { display:flex; align-items:center; gap:8px; border:1px solid var(--rule); border-radius:8px; height:44px; padding:8px; background:var(--panel); width:100%; }
.brand-color-input input[type="text"] { border:0; outline:0; background:none; color:var(--page-ink); font:16px var(--sans); width:88px; padding:0; flex:1; min-width:0; }
.brand-mode-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; margin-top:14px; border-top:1px solid var(--rule); font-size:12px; color:var(--secondary); }
.brand-mode-row .brand-preview-mode { color:var(--page-ink); }
.brand-customizer-dock { position:absolute; z-index:3; top:98px; right:0; width:192px; padding:12px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); color:var(--page-ink); box-shadow:0 3px 8px rgb(0 0 0 / .06),0 15px 32px -12px rgb(0 0 0 / .25); }
.brand-customizer-dock[hidden] { display:none; }
.brand-customize { font-size:11px; font-weight:550; white-space:nowrap; position:static; display:flex; align-items:center; gap:9px; width:100%; min-height:40px; padding:0 5px; text-align:left; border:0; border-radius:7px; color:inherit; background:transparent; box-shadow:none; transform:none; }
.brand-customize:hover, .brand-customize[aria-expanded="true"] { background:var(--surface); }
.brand-customize > strong { font-size:14px; font-weight:650; letter-spacing:-.3px; }
.brand-customize-message { position:relative; display:grid; place-items:center; flex-shrink:0; width:24px; height:24px; }
.brand-customize-message > svg { display:block; width:23px; height:23px; }
.brand-customize-message i { position:absolute; width:8px; height:8px; border-radius:50%; right:-2px; top:-1px; background:var(--sample-solid); border:2px solid var(--panel); }
.brand-quick-colors { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; margin-top:5px; }
.brand-quick-colors button { display:grid; place-items:center; min-width:0; height:40px; padding:0; border:0; border-radius:50%; background:transparent; color:inherit; transition:background 150ms ease; }
.brand-quick-colors button:hover { background:var(--surface); }
.brand-quick-colors button > span { display:block; width:24px; height:24px; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .15); }
.brand-quick-colors button[aria-pressed="true"] > span { outline:3px solid currentColor; outline-offset:3px; }
.brand-quick-colors button svg { width:32px; height:32px; padding:6px; border:1px dashed var(--rule); border-radius:50%; }
.brand-studio { position:absolute; z-index:5; width:min(350px,100%); margin:0; padding:16px; color:var(--page-ink); border:1px solid var(--rule); border-radius:12px; background:var(--panel); box-shadow:0 5px 15px rgb(0 0 0 / .08),0 24px 60px -14px rgb(0 0 0 / .22); top:220px; left:auto; right:0; }
.brand-studio::before { content:""; position:absolute; top:-5px; width:8px; height:8px; background:var(--panel); border-left:1px solid var(--rule); border-top:1px solid var(--rule); transform:rotate(45deg); left:auto; right:80px; }

@media (max-width:1100px) {
  .brand-continuity { grid-template-columns:minmax(280px,.85fr) minmax(0,1.2fr); gap:32px; }
}

@media (max-width:900px) and (min-width:761px) {
  .brand-continuity { grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); gap:24px; }
}

@media (max-width:760px) {
  .brand-continuity { grid-template-columns:minmax(0,1fr); gap:28px; }
  .brand-feature-copy > p { max-width:none; }
  .brand-feature-list { gap:12px; }
  .brand-examples { max-width:460px; margin-inline:auto; }
  .brand-customize { font-size:10px; }
  .brand-preview-bar { padding-inline:9px; }
  .brand-venue-window .brand-preview-bar > span:nth-child(2) { font-size:9px; }
}

@media (prefers-reduced-motion:reduce) {
  .brand-presets button { transition:none; }
}

@container brand-preview (max-width:600px) {
  .brand-preview-stage { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); column-gap:12px; aspect-ratio:auto; padding:8px 0 12px; }
  .brand-email-window { grid-column:1; grid-row:1; justify-self:start; width:100%; max-width:260px; margin-top:0; aspect-ratio:auto; transform:rotate(-3deg); }
  .brand-venue-window { grid-column:1 / -1; grid-row:2; justify-self:center; width:100%; margin-top:-68px; aspect-ratio:auto; }
  .brand-customizer-dock { position:relative; grid-column:2; grid-row:1; align-self:center; justify-self:end; top:auto; right:auto; width:100%; max-width:168px; padding:8px; }
  .brand-customize { justify-content:center; min-height:44px; padding:0; gap:5px; }
  .brand-customize > strong { font-size:12px; }
  .brand-customize-message { width:20px; height:20px; }
  .brand-customize-message > svg { width:20px; height:20px; }
  .brand-quick-colors { grid-template-columns:repeat(2,44px); justify-content:center; gap:2px 4px; margin-top:4px; }
  .brand-quick-colors button { width:44px; height:44px; }
  .brand-studio { top:100px; left:0; right:0; margin-inline:auto; }
  .brand-studio::before { display:none; }
  .brand-email-window .brand-email-canvas { padding:10px 6px; }
  .brand-email-window .brand-email-heading { padding-inline:7px; }
  .brand-email-window .brand-email-body { padding-inline:7px; }
  .brand-email-window .brand-email-session { padding:8px; }
}

@container brand-preview (max-width:300px) {
  .brand-customize { gap:4px; }
  .brand-customize > strong { font-size:11px; }
  .brand-customize-message, .brand-customize-message > svg { width:16px; height:16px; }
}

/* A real typographic seal: both phrases follow arcs inside the outer ring. */
.closing { gap: 28px; }
.closing-stamp { display: block; position: relative; width: clamp(200px, 18vw, 240px); height: auto; aspect-ratio: 1; flex-shrink: 0; border: 0; border-radius: 0; transform: rotate(8deg); }
.closing-emblem { display: block; width: 100%; height: 100%; overflow: visible; }
.emblem-type { font-family: var(--sans); }

/* Legal pages share the site typography, palette, header, and theme preference. */
.legal-page .header { color: var(--page-ink); }
.legal-page .header:not(.is-scrolled) .nav-demo { background: var(--accent); color: var(--page); }
.legal-page .theme-track { border-color: var(--rule); }
.legal-main { padding-top: calc(var(--header-height) + 60px); padding-bottom: 100px; }
.legal-intro, .legal-layout { width: min(1160px, 87%); margin-inline: auto; }
.legal-intro { padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.page-heading .eyebrow { margin-bottom: 20px; }
.page-heading-copy { min-width: 0; }
.page-heading h1 { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: clamp(52px, 6.3vw, 84px); line-height: 1.1; letter-spacing: -.055em; overflow-wrap: break-word; }
.page-heading-meta { color: var(--secondary); font-size: 14px; line-height: 1.6; margin-top: 24px; }
.page-heading-mark { width: 105px; color: var(--accent); transform: rotate(-9deg); margin-right: 4%; }
.legal-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); padding-top: 50px; align-items: start; }
/* Pin the sidebar only while its full contents fit below the shared header. */
.legal-sidebar { --sidebar-top: 116px; min-width: 0; padding: 0 10px 10px 0; }
@media (min-width: 900px) {
  .legal-sidebar.is-sticky { position: sticky; top: var(--sidebar-top); align-self: start; }
}
.legal-contents-title { margin: 0 0 18px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.legal-contents ol { list-style: none; margin: 0; padding: 0; }
.legal-contents li { margin: 0; }
.legal-contents a { display: block; padding: 7px 2px; font-size: 13px; line-height: 1.5; color: var(--secondary); }
.legal-contents a:hover, .legal-contents a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.legal-contact { margin: 0 0 25px; padding: 0 0 23px; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.7; }
.legal-contact > span { display: block; color: var(--secondary); }
.legal-contact a { font-weight: 500; overflow-wrap: anywhere; }
.legal-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legal-prose { min-width: 0; max-width: 740px; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
.legal-prose p { margin: 0 0 20px; }
.legal-prose ul, .legal-prose ol { margin: 0 0 24px; padding-left: 25px; }
.legal-prose li { padding-left: 5px; margin: 7px 0; }
.legal-prose li p { margin-bottom: 0; }
.legal-prose li::marker { color: var(--accent); }
.legal-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legal-prose strong, .legal-prose b { font-weight: 650; }
.legal-section { padding-top: 33px; margin-top: 33px; border-top: 1px solid var(--rule); scroll-margin-top: 20px; }
.legal-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-section h2 { font-size: 27px; font-weight: 550; letter-spacing: -.7px; line-height: 1.3; margin: 0 0 20px; text-wrap: balance; }
.legal-end { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 14px; }
.legal-end a { text-decoration: none; display: inline-flex; gap: 15px; }
@media (max-width: 899px) {
  .legal-main { padding-top: calc(var(--header-height) + 35px); padding-bottom: 72px; }
  .legal-intro, .legal-layout { width: 88%; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; padding-top: 30px; }
  .legal-sidebar { padding: 0; }
  .legal-contents { border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; background: var(--surface); }
  .legal-contact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; margin-bottom: 18px; padding-bottom: 16px; }
  .page-heading-mark { width: 78px; margin: 0; }
}
@media (max-width: 760px) {
  .closing-stamp { display: none; }
  .legal-intro { padding-bottom: 28px; }
  .page-heading { gap: 18px; }
  .page-heading h1 { font-size: clamp(45px, 8vw, 62px); }
  .page-heading-mark { width: 58px; }
  .legal-prose { font-size: 16px; line-height: 1.8; }
  .legal-section h2 { font-size: 25px; }
}
@media (max-width: 400px) {
  .page-heading h1 { font-size: 43px; }
  .page-heading-mark { display: none; }
}
@media print {
  .legal-page { background: white; color: black; }
  .legal-page .header, .legal-page .footer, .legal-sidebar, .page-heading-mark, .legal-end { display: none; }
  .legal-main { padding: 0; }
  .legal-intro, .legal-layout { width: 100%; }
  .legal-layout { display: block; padding-top: 25px; }
  .legal-prose { max-width: none; font-size: 11pt; }
  .page-heading h1 { font-size: 32pt; }
  .legal-prose a, .page-heading-meta { color: black; }
  .legal-section h2 { break-after: avoid; font-size: 17pt; }
}

/* Two equal groups tile the viewport. Each sequence owns its trailing spacing. */
.ticker-group { display: flex; align-items: center; flex: 0 0 auto; gap: 0; }
.ticker-sequence { display: flex; flex: 0 0 auto; align-items: center; gap: var(--ticker-gap); padding-right: var(--ticker-gap); }
.ticker-ready .ticker-track { animation: ticker-loop var(--ticker-duration, 55s) linear infinite; }
.ticker-resting .ticker-track, .ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { width: 100%; transform: none; }
  .ticker-group { width: 100%; }
  .ticker-group + .ticker-group, .ticker-sequence + .ticker-sequence { display: none; }
  .ticker-sequence { width: 100%; flex-wrap: wrap; justify-content: center; white-space: normal; gap: 12px 24px; padding: 0 20px; }
}

/* One vector vocabulary across Safari, Android and desktop, independent of fonts. */
:root { --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ui-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.14em; }
.ticker-star, .notification-spark { display: inline-flex; align-items: center; justify-content: center; }
.ticket-booked { display: inline-flex; align-items: center; gap: .3em; }
.facility-questions summary > span { display: inline-flex; flex-shrink: 0; }
/* Reserve the toggle's footprint while its script initializes to prevent header shift. */
.header-actions .theme-toggle[hidden] { display: grid; visibility: hidden; }

/* Centered section layout: a narrower content column, centered headings and bento cards below them.
   One spacing scale keeps every main section on the same rhythm. */
.section-space {
  --gutter: 6.5%; --content-max: 1080px;
  --section-pad: 88px; --space-label: 14px; --space-lede: 18px; --space-content: 40px; --space-card: 16px;
  padding: var(--section-pad) max(var(--gutter), calc((100% - var(--content-max)) / 2));
}
.section-space h2 { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; font-weight: 500; letter-spacing: -.045em; }
 .section-heading > p, .brand-feature-copy > p, .pricing-intro > p { font-size: 16px; line-height: 1.65; }
 .operation-details article, .steps article, .brand-feature-list li { padding: 26px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); text-align: left; }

/* Heading blocks: label, title, lede, then content. */
 .section-heading .eyebrow, .brand-continuity .eyebrow, .pricing-intro > .eyebrow { justify-content: center; margin: 0 0 var(--space-label); }
 .section-heading > p, .brand-feature-copy > p, .pricing-intro > p { margin: var(--space-lede) 0 0; }
.section-heading > .button { margin-top: calc(var(--space-lede) + 8px); }
 .section-heading, .how-it-works .section-heading, .brand-examples, .facility-questions { margin-top: 0; margin-bottom: 0; }
 .brand-examples, .facility-questions { margin-top: var(--space-content); }
.section-heading, .how-it-works .section-heading { margin-bottom: var(--space-content); }

.section-heading { flex-direction: column; align-items: center; gap: 0; max-width: 760px; margin-inline: auto; text-align: center; }
#platform .feature-tabs { margin-bottom: var(--space-card); }
.operation-details { gap: var(--space-card); margin-top: var(--space-card); padding: 0; border-top: 0; }
.operation-details h3 { margin: 16px 0 10px; font-size: 21px; }
.operation-details p, .steps p { font-size: 15px; }

.brand-continuity { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.brand-feature-copy { display: contents; }
.brand-feature-copy > p { max-width: 520px; }
.brand-examples { order: 1; }
.brand-examples figcaption { margin-top: 12px; }
.brand-feature-list { order: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-card); width: 100%; margin: var(--space-content) 0 0; }
.brand-feature-list li { border-left-width: 1px; }
@container brand-preview (min-width: 601px) {
  .brand-preview-stage { padding-top: 0; }
  .brand-customizer-dock { top: 20px; }
  .brand-studio { top: 142px; }
}

.steps { gap: var(--space-card); }

.steps h3 { font-size: 22px; margin: 4px 0 12px; }

.pricing { display: flex; flex-direction: column; align-items: center; gap: var(--space-content); text-align: center; }
.pricing-aside { display: none; }
.pricing-card { width: 100%; max-width: 640px; text-align: left; }

#faq > h2 { text-align: center; }
.facility-questions { max-width: 760px; margin-inline: auto; }

@media (max-width: 1100px) {
  .section-space { --gutter: 5%; --section-pad: 76px; }
  
}
@media (max-width: 760px) {
  .section-space { --gutter: 6%; --section-pad: 60px; --space-label: 12px; --space-lede: 16px; --space-content: 28px; --space-card: 12px; }
  .section-space h2 { font-size: 40px; }
  .section-space .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
   .section-heading > p, .brand-feature-copy > p, .pricing-intro > p { font-size: 15px; }
   .operation-details, .brand-feature-list { grid-template-columns: 1fr; }
  
  .operation-details article, .steps article, .brand-feature-list li { padding: 22px; }
  .operation-details h3 { margin-top: 12px; }
  #platform .feature-tabs { margin-bottom: 12px; }
}
@media (max-width: 380px) {
  .section-space h2 { font-size: 35px; }
}

/* Hero stage: a dark, centered stage. The ghost drifts in on a silk trail drawn by hero.js. */
:root[data-palette] .hero {
  display: grid; place-items: center; height: auto; min-height: max(720px, 100svh); max-height: none;
  padding: calc(var(--header-height, 112px) + 40px) 0 120px; overflow: hidden; isolation: isolate; color: #fafafa;
  background:
    radial-gradient(70% 55% at 50% -8%, rgb(255 255 255 / .09), transparent 70%),
    radial-gradient(45% 40% at 88% 18%, rgb(170 180 255 / .08), transparent 70%),
    radial-gradient(50% 45% at 8% 92%, rgb(255 220 200 / .05), transparent 70%),
    #08080a;
}
.hero-silk { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: radial-gradient(ellipse 40% 30% at 50% 50%, rgb(0 0 0 / .3), #000 85%);
  mask-image: radial-gradient(ellipse 40% 30% at 50% 50%, rgb(0 0 0 / .3), #000 85%); }
/* hero.js fades the silk in once it starts drawing, after the page has painted. */
.silk-ready .hero-silk { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-silk { transition: none; } }

.hero .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 24px; text-align: center; pointer-events: auto; }
.hero h1, .hero .hero-content h1 { font-size: clamp(56px, 7.6vw, 120px); font-weight: 500; line-height: .98; letter-spacing: -.06em; color: #fafafa; text-wrap: balance; }
/* "In full" stays solid; only "swing." carries the gradient. */
.hero-line { color: inherit; }
.hero h1 em { display: inline-block; padding: 0 .08em .24em .14em; margin: 0 0 -.18em -.14em; line-height: 1; font-size: 1.14em; color: transparent;
  background: linear-gradient(100deg, #ffffff 0%, #d4d9ff 28%, #ffe4d6 52%, #ffffff 74%, #dfe3ff 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; animation: pearl-shift 9s ease-in-out infinite alternate; }
@keyframes pearl-shift { to { background-position: 100% 0; } }
.hero .hero-lede { max-width: 540px; margin: 28px auto 0; font-size: 18px; line-height: 1.6; letter-spacing: -.1px; color: rgb(255 255 255 / .62); }
.hero .hero-content .hero-actions { flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }
.hero-actions .button { min-height: 54px; padding: 0 26px; font-size: 15px; }

/* Floating feature cards: drawn in the platform illustrations' language, each showing a feature the page covers only in text. */
.hero-chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; text-align: left;
  --art-paper: var(--mono-paper); --art-ink: var(--mono-paper-ink); --art-muted: var(--mono-paper-muted); --art-line: var(--mono-paper-line); }
/* Each card drifts gently on its own, out of step with the others. The pointer does not move them. */
.hero-float { position: absolute; color: var(--art-ink); animation: hero-drift var(--drift, 7s) ease-in-out var(--drift-delay, 0s) infinite;
  filter: drop-shadow(0 3px 5px var(--mono-cast)) drop-shadow(0 18px 26px var(--mono-cast)); }
@keyframes hero-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--depth, 10px) * -.6); } }
/* Scaled down from each card's own corner so they stay anchored where they sit. */
.hero-float { scale: .74; }
.hero-float--ticket { top: 22%; left: 5%; rotate: -6deg; transform-origin: top left; --depth: 12px; --drift: 7.5s; }
.hero-float--member { top: max(17%, calc(var(--header-height, 112px) + 40px)); right: 5.5%; rotate: 5deg; transform-origin: top right; --depth: 9px; --drift: 8.5s; --drift-delay: -3s; }
.hero-float--door { bottom: 12%; left: 6%; rotate: 4deg; transform-origin: bottom left; --depth: 8px; --drift: 6.5s; --drift-delay: -1.5s; }
.hero-float--reward { right: 6%; bottom: 9%; rotate: -4deg; transform-origin: bottom right; --depth: 14px; --drift: 9s; --drift-delay: -5s; }
.hero-chips .card-eyebrow { font-size: 9.5px; }
.hero-chips h4 em { font-family: var(--serif); font-size: 1.16em; font-weight: 400; }

/* Event ticket: a paper ticket with a tear-off stub, notched where it tears. */
.event-ticket { display: flex; width: 252px; border-radius: 12px; background: var(--art-paper);
  --notch: radial-gradient(circle 8px at calc(100% - 66px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at calc(100% - 66px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  -webkit-mask: var(--notch); mask: var(--notch); }
.event-ticket-main { flex: 1; min-width: 0; padding: 16px 16px 15px 18px; }
.event-ticket h4 { margin: 10px 0 12px; font-size: 25px; font-weight: 450; line-height: 1.04; letter-spacing: -1px; }
.event-ticket-meta { font-size: 11px; color: var(--art-muted); }
.event-ticket-stub { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; width: 66px; border-left: 1.5px dashed var(--art-line); text-align: center; }
.event-ticket-stub span, .event-ticket-stub strong { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; }
.event-ticket-stub span { font-size: 9px; font-weight: 600; letter-spacing: 1px; color: var(--art-muted); }
.event-ticket-stub strong { font-size: 12px; font-weight: 600; }

/* Door access: laid out like the app's door access tile, with its unlocked state and access window. */
.door-tile { width: 244px; padding: 14px; border: 1px solid var(--art-line); border-radius: 14px; background: var(--art-paper); }
.door-tile-head { display: flex; align-items: center; gap: 11px; }
.door-tile-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--art-ink) 8%, transparent); }
.door-tile-icon svg, .door-tile-unlocked svg { width: 17px; height: 17px; }
.door-tile-head strong { font-size: 14px; font-weight: 600; }
.door-tile-unlocked { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 10px; border-radius: 9px; background: var(--art-ink); color: var(--art-paper); font-size: 12.5px; font-weight: 600; }
.door-tile-window { margin: 0; padding-top: 8px; font-size: 11px; text-align: center; color: var(--art-muted); }

/* Reward: laid out like the app's reward card, with a caption over a darkened lower edge. */
.reward-card { position: relative; width: 196px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; color: #ffffff;
  background: radial-gradient(90% 70% at 30% 20%, #4a4a52, transparent 70%), linear-gradient(150deg, #34343a, #101012); }
.reward-card-art { position: absolute; top: 13%; left: 50%; width: 46px; translate: -50% 0; opacity: .7; }
.reward-card-caption { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 3px; padding: 46px 14px 14px; background: linear-gradient(to top, rgb(0 0 0 / .82), rgb(0 0 0 / .5) 60%, transparent); }
.reward-card-caption > strong { font-size: 16px; font-weight: 600; line-height: 1.25; }
.reward-card-caption > span { font-size: 11px; color: rgb(255 255 255 / .85); }
.reward-card-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 9px; }
.reward-card-row b { font-size: 14px; font-weight: 600; }
.reward-card-cta { padding: 6px 11px; border-radius: 7px; background: #ffffff; color: #18181b; font-size: 11px; font-weight: 600; }
:root[data-theme="light"] .reward-card { border: 1px solid var(--art-line); color: #18181b;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .55) 44%, transparent 58%), radial-gradient(90% 70% at 30% 20%, #ffffff, transparent 70%), linear-gradient(150deg, #f7f7f9, #d6d6dc 62%, #c4c4cc); }
:root[data-theme="light"] .reward-card-caption { background: linear-gradient(to top, rgb(255 255 255 / .82), rgb(255 255 255 / .45) 60%, transparent); }
:root[data-theme="light"] .reward-card-caption > span { color: rgb(24 24 27 / .62); }
:root[data-theme="light"] .reward-card-cta { background: #18181b; color: #fafafa; }

/* Points sticker: slapped on the reward card's corner. */
.points-sticker { position: absolute; top: -24px; left: -30px; z-index: 1; display: grid; place-content: center; width: 66px; height: 66px; border-radius: 50%; rotate: -14deg; text-align: center;
  background: var(--art-ink); color: var(--art-paper); box-shadow: inset 0 0 0 4px var(--art-ink), inset 0 0 0 5px color-mix(in srgb, var(--art-paper) 35%, transparent); }
.points-sticker strong { font-size: 17px; font-weight: 650; letter-spacing: -.6px; line-height: 1; }
.points-sticker span { font-size: 8.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: .75; }
@media (max-width: 1240px) { .hero-chips { display: none; } }
@media (max-width: 760px) {
  :root[data-palette] .hero { min-height: max(640px, 100svh); padding: calc(var(--header-height, 88px) + 24px) 0 72px; }
  .hero .hero-content { padding: 0 6%; }
  .hero h1, .hero .hero-content h1 { font-size: clamp(46px, 13.5vw, 66px); }
  .hero .hero-lede { margin-top: 22px; font-size: 16px; }
  .hero .hero-content .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em, .hero-float { animation: none; }
}

/* Light theme: the same stage in daylight. A charcoal ghost, graphite silk and frosted white cards. */
:root[data-palette][data-theme="light"] .hero { color: #18181b;
  background:
    radial-gradient(70% 55% at 50% -8%, #ffffff, transparent 70%),
    radial-gradient(45% 40% at 88% 18%, rgb(120 130 220 / .1), transparent 70%),
    radial-gradient(50% 45% at 8% 92%, rgb(230 170 140 / .1), transparent 70%),
    #f1f1f3; }
:root[data-theme="light"] .hero h1, :root[data-theme="light"] .hero .hero-content h1 { color: #18181b; }
:root[data-theme="light"] .hero h1 em { background-image: linear-gradient(100deg, #18181b 0%, #4b5290 28%, #93604c 52%, #18181b 74%, #4b5290 100%); }
:root[data-theme="light"] .hero .hero-lede { color: rgb(24 24 27 / .64); }
:root[data-palette][data-theme="light"] .hero .button-yellow { background: #18181b; color: #fafafa; }
:root[data-theme="light"] .hero .button-glass { color: #18181b; border-color: rgb(24 24 27 / .14); background: rgb(255 255 255 / .6); }
/* Over the light stage the navigation reads dark before it turns into the scrolled glass rail. */
:root[data-theme="light"] .header:not(.is-scrolled) { color: #18181b; }
:root[data-palette][data-theme="light"] .header:not(.is-scrolled) .nav-demo { background: #18181b; color: #fafafa; }

/* Buttons carry no arrow icon; the label is centered. */
.button { justify-content: center; gap: 10px; }
.button-glass { color: #fafafa; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Over the moving silk a live blur would be redone on every frame, so the hero's glass button is a tint instead. */
.hero .button-glass { background: rgb(255 255 255 / .1); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Conversion pass: price line, highlights strip, proof, switching points and the bay estimate. */
/* Proof in the first screen: the reviewers' logos link down to their reviews. */
.hero .hero-content .hero-proof { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; font-size: 13px; line-height: 1.4; color: rgb(255 255 255 / .72); transition: color .2s ease; }
.hero .hero-content .hero-proof:hover { color: #fff; }
:root[data-theme="light"] .hero .hero-content .hero-proof { color: rgb(24 24 27 / .72); }
:root[data-theme="light"] .hero .hero-content .hero-proof:hover { color: #18181b; }
.hero-proof-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.hero-proof-logos img { width: 26px; height: 26px; object-fit: contain; }
.hero-proof-more { margin-left: 2px; }
@media (max-width: 760px) {
  .hero .hero-content .hero-proof { margin-top: 18px; font-size: 12.5px; }
}
.hero .hero-content .hero-price { max-width: none; margin: 18px 0 0; font-size: 13px; line-height: 1.5; letter-spacing: .1px; color: rgb(255 255 255 / .55); }
:root[data-theme="light"] .hero .hero-content .hero-price { color: rgb(24 24 27 / .55); }

/* Highlights: the three reasons sit right under the hero, without restating it. */
.section-space.highlights { padding-block: 56px; }

/* Proof: a deck of glass review cards. The active review sits in front and the others wait behind it, peeking above.
   app.js turns the list into the deck and adds the logo switcher; without it the cards simply stack as a list. */
@property --proof-glow { syntax: "<color>"; inherits: true; initial-value: transparent; }
.proof { overflow-x: clip; --proof-glass: color-mix(in srgb, var(--panel) 78%, transparent); --proof-edge: color-mix(in srgb, var(--page-ink) 10%, transparent); }
.proof-stage { --proof-glow: var(--active-brand, transparent); position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 820px; margin-inline: auto; isolation: isolate; transition: --proof-glow .9s ease; }
/* A soft light in the active facility's brand colour sits behind the glass. */
.proof-stage::before { content: ""; position: absolute; inset: -12% -10% 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 55% at 50% 45%, color-mix(in srgb, var(--proof-glow) 34%, transparent), transparent 72%); }
.proof-deck { display: grid; gap: var(--space-card); width: 100%; }
.proof-card { position: relative; padding: 34px 38px 38px; border: 1px solid var(--proof-edge); border-radius: var(--radius-container);
  background: var(--proof-glass); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 60px -34px rgb(0 0 0 / .5); }
.proof-deck.is-deck { grid-template-areas: "card"; padding-top: 36px; touch-action: pan-y; }
.proof-deck.is-deck > .proof-card { grid-area: card; z-index: calc(3 - var(--depth, 0)); cursor: pointer;
  transform: translateY(calc(var(--depth, 0) * -18px)) scale(calc(1 - var(--depth, 0) * .05)); transform-origin: 50% 0; opacity: calc(1 - var(--depth, 0) * .32);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
.proof-deck.is-deck > .proof-card > * { transition: opacity .4s ease .12s; }
.proof-deck.is-deck > .proof-card:not(.is-active) > * { opacity: 0; transition-delay: 0s; }
.proof-deck.is-deck > .proof-card.is-active { cursor: auto; -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
.proof-card figure { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.proof-card blockquote { margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 450; line-height: 1.45; letter-spacing: -.3px; color: color-mix(in srgb, var(--page-ink) 74%, transparent); }
.proof-card figcaption { order: -1; display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.35; }
.proof-card figcaption strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.2px; }
.proof-card figcaption span span { color: var(--secondary); }
/* Facility logos stand on their own, unframed. One-colour dark logos carry a light version for the dark theme. */
.proof-logo { display: block; flex-shrink: 0; width: 52px; height: 52px; }
.proof-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
:root .on-dark, :root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark { display: block; }
/* The switcher: each facility's logo and name. A bar under the active one fills while it is shown, then the deck moves on. */
.proof-tabs { display: flex; justify-content: center; gap: 28px; }
.proof-tab { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 4px 14px; background: transparent; color: var(--page-ink); font-size: 14px; font-weight: 600; letter-spacing: -.1px; opacity: .45; transition: opacity .3s ease; }
.proof-tab:hover { opacity: .8; }
.proof-tab[aria-selected="true"] { opacity: 1; }
.proof-tab .proof-logo { width: 34px; height: 34px; }
.proof-tab img { filter: grayscale(1); transition: filter .3s ease; }
.proof-tab:hover img, .proof-tab[aria-selected="true"] img { filter: none; }
.proof-progress { position: absolute; right: 4px; bottom: 0; left: 4px; height: 2px; border-radius: 2px; background: var(--page-ink); opacity: .6; transform: scaleX(0); transform-origin: 0 50%; }
.proof-tab[aria-selected="true"] .proof-progress { animation: proof-progress var(--proof-duration, 14s) linear forwards; }
.proof.is-paused .proof-progress { animation-play-state: paused; }
@keyframes proof-progress { to { transform: scaleX(1); } }
@media (max-width: 760px) {
  .proof-card { padding: 24px 22px 26px; }
  .proof-card figure { gap: 20px; }
  .proof-card blockquote { font-size: 17px; }
  .proof-card figcaption strong { font-size: 16px; }
  .proof-logo { width: 44px; height: 44px; }
  .proof-tabs { width: 100%; gap: 8px; }
  .proof-tab { flex: 1 1 0; flex-direction: column; gap: 6px; padding-inline: 0; font-size: 12px; line-height: 1.25; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-tab[aria-selected="true"] .proof-progress { animation: none; }
  .proof-stage, .proof-deck.is-deck > .proof-card, .proof-deck.is-deck > .proof-card > * { transition: none; }
}
/* Key phrases get a hand-drawn underline so owners can skim the reviews. */
.proof { --sketch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none' fill='none' stroke='%2318181b' stroke-linecap='round'%3E%3Cpath d='M1 6.5C22 4.2 48 5.6 70 4.6S94 3.8 99 5' stroke-width='2.2' stroke-opacity='.75' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M5 8.6C30 7 62 7.8 96 6.4' stroke-width='1.4' stroke-opacity='.45' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .proof { --sketch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none' fill='none' stroke='%23fafafa' stroke-linecap='round'%3E%3Cpath d='M1 6.5C22 4.2 48 5.6 70 4.6S94 3.8 99 5' stroke-width='2.2' stroke-opacity='.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M5 8.6C30 7 62 7.8 96 6.4' stroke-width='1.4' stroke-opacity='.45' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.proof-card mark { padding-bottom: .16em; background: var(--sketch) no-repeat 0 100% / 100% .38em; color: var(--page-ink); font-weight: 560;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .8s cubic-bezier(.65, 0, .35, 1); }
/* Each review's underlines draw in, one after another, when it comes to the front of the deck. */
.proof.is-sketch-armed mark { background-size: 0 .38em; transition-delay: 0s; }
.proof.is-sketch-armed.is-sketched .is-active mark { background-size: 100% .38em; transition-delay: var(--sketch-delay, 0s); }

/* Switching: answers the hardware and migration questions right under the steps. */
.switch-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-card); margin: var(--space-card) 0 0; padding: 0; list-style: none; }
.switch-points li { display: flex; gap: 12px; padding: 20px 22px; border: 1px solid var(--rule); border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--secondary); }
.switch-points strong { color: var(--page-ink); font-weight: 600; }
.switch-points svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--page-ink); }

/* Bay estimate: plain arithmetic on the published price. */
.bay-estimate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 25px; padding: 12px 14px; border: 1px solid rgb(255 255 255 / .14); border-radius: 12px; background: rgb(255 255 255 / .04); font-size: 13px; }
.bay-estimate-label { color: rgb(255 255 255 / .7); }
.bay-stepper { display: flex; align-items: center; gap: 4px; }
.bay-stepper button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgb(255 255 255 / .2); border-radius: 8px; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.bay-stepper button:hover { background: rgb(255 255 255 / .1); }
.bay-stepper output { min-width: 34px; font-size: 16px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.bay-estimate-total { margin-left: auto; color: rgb(255 255 255 / .7); }
.bay-estimate-total strong { font-size: 18px; font-weight: 600; color: #fafafa; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .section-space.highlights { padding-block: 36px; }
  .switch-points { grid-template-columns: 1fr; }
}

/* Phones keep "Book a demo" in the header. */
@media (max-width: 700px) {
  .header .nav-demo { display: inline-flex; min-height: 36px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; white-space: nowrap; }
  .header .header-actions { gap: 8px; }
}
@media (max-width: 400px) {
  .header .brand { font-size: 18px; gap: 6px; }
  .header .brand-ghost { width: 21px; }
}

/* Feature tabs: one underline glides between tabs, and the incoming panel fades up into place. */
.feature-tabs { position: relative; }
.feature-tabs-indicator { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; border-radius: 3px; background: var(--accent); pointer-events: none; opacity: 0; }
.feature-tabs.has-indicator .feature-tabs-indicator { opacity: 1; transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1); }
:root[data-palette] .feature-tabs.has-indicator button, :root[data-palette] .feature-tabs.has-indicator button[aria-selected="true"], #platform .feature-tabs.has-indicator button[aria-selected="true"] { border-bottom-color: transparent; }
.feature-tabs button { transition: color .3s ease; }
.feature-panel.is-entering { animation: panel-enter .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes panel-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .feature-tabs.has-indicator .feature-tabs-indicator { transition: none; }
  .feature-panel.is-entering { animation: none; }
}

/* Closing call to action: the hero's stage again, centered, with the emblem turning slowly above it. */
:root[data-palette][data-theme] .closing { display: block; min-height: 0; padding: 112px max(6.5%, calc((100% - 1080px) / 2)) 120px; text-align: center; color: #fafafa;
  background:
    radial-gradient(60% 70% at 50% 110%, rgb(255 255 255 / .08), transparent 70%),
    radial-gradient(40% 50% at 90% 10%, rgb(170 180 255 / .07), transparent 70%),
    radial-gradient(40% 50% at 8% 20%, rgb(255 220 200 / .05), transparent 70%),
    #08080a; }
.closing .closing-content { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; }
.closing .closing-stamp { display: block; width: 132px; height: auto; margin: 0 0 28px; transform: none; }
.closing .closing-content > .eyebrow { justify-content: center; margin-bottom: 16px; }
.closing h2 { font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -.055em; }
.closing h2 em { display: inline-block; padding: 0 .08em .24em .14em; margin: 0 0 -.18em -.14em; line-height: 1; color: transparent;
  background: linear-gradient(100deg, #ffffff 0%, #d4d9ff 28%, #ffe4d6 52%, #ffffff 74%, #dfe3ff 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; animation: pearl-shift 9s ease-in-out infinite alternate; }
.closing-lede { max-width: 480px; margin: 22px auto 0; font-size: 17px; line-height: 1.6; color: rgb(255 255 255 / .62); }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.closing-actions .button { min-height: 54px; padding: 0 26px; font-size: 15px; }
.closing-price { margin: 18px 0 0; font-size: 13px; color: rgb(255 255 255 / .55); }
:root[data-palette][data-theme="light"] .closing { color: #18181b;
  background:
    radial-gradient(60% 70% at 50% 110%, #ffffff, transparent 70%),
    radial-gradient(40% 50% at 90% 10%, rgb(120 130 220 / .1), transparent 70%),
    radial-gradient(40% 50% at 8% 20%, rgb(230 170 140 / .1), transparent 70%),
    #ebebee; }
:root[data-palette][data-theme="light"] .closing-emblem { color: #18181b; }
:root[data-theme="light"] .closing h2 em { background-image: linear-gradient(100deg, #18181b 0%, #4b5290 28%, #93604c 52%, #18181b 74%, #4b5290 100%); }
:root[data-theme="light"] .closing-lede { color: rgb(24 24 27 / .64); }
:root[data-theme="light"] .closing-price { color: rgb(24 24 27 / .55); }
:root[data-palette][data-theme="light"] .closing .button-yellow { background: #18181b; color: #fafafa; }
:root[data-theme="light"] .closing .button-glass { color: #18181b; border-color: rgb(24 24 27 / .14); background: rgb(255 255 255 / .6); }

/* Footer: the same 1080px column, brand on the left and three link columns. */
.footer { padding: 64px max(6.5%, calc((100% - 1080px) / 2)) 28px; }
.footer .footer-top { display: flex; justify-content: space-between; gap: 48px; padding-bottom: 48px; }
.footer-brand > .brand { font-size: 26px; }
.footer-brand > p { margin-top: 12px; font-size: 13px; line-height: 1.7; opacity: .62; }
.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(120px, auto)); gap: 56px; }
.footer-columns > div { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-heading { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; opacity: .72; }
.footer-columns a { opacity: .82; transition: opacity .2s ease; }
.footer-columns a:hover { opacity: 1; }
.footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; font-size: 12px; }
.footer .back-top { margin-left: 0; }
:root[data-palette][data-theme="light"] .footer { background: #ebebee; color: #18181b; border-top: 1px solid var(--rule); }
:root[data-palette][data-theme="light"] .footer-bottom { color: #63636a; border-color: var(--rule); }
@media (max-width: 760px) {
  :root[data-palette][data-theme] .closing { padding: 80px 6% 88px; }
  .closing .closing-stamp { width: 104px; margin-bottom: 22px; }
  .closing-lede { font-size: 16px; }
  .closing-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .footer { padding: 48px 6% 26px; }
  .footer .footer-top { flex-direction: column; gap: 36px; padding-bottom: 36px; }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .closing h2 em { animation: none; } }

/* Lighter wordmark and navigation. */
.brand { font-weight: 500; }
.header .brand { letter-spacing: -.5px; }
.desktop-nav { font-weight: 400; letter-spacing: .1px; }
.header .nav-demo { font-weight: 500; }

/* Membership card: a card-shaped pass with a sheen, matching the reward card's theme. */
.member-card { position: relative; display: flex; flex-direction: column; width: 256px; aspect-ratio: 1.586; padding: 15px 17px; overflow: hidden; border: 1px solid var(--mono-dark-line); border-radius: 14px; color: #fafafa;
  background: radial-gradient(90% 80% at 15% 0%, #4a4a52, transparent 70%), linear-gradient(145deg, #333338, #121214 85%); }
.member-card-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .1) 46%, transparent 60%); pointer-events: none; }
.member-card .card-eyebrow { margin-top: auto; color: rgb(255 255 255 / .6); }
.member-card-perks { margin-top: 4px; font-size: 11px; color: rgb(255 255 255 / .72); }
:root[data-theme="light"] .member-card { border-color: var(--art-line); color: #18181b;
  background: radial-gradient(90% 80% at 15% 0%, #ffffff, transparent 70%), linear-gradient(145deg, #f4f4f6, #dcdce1 85%); }
:root[data-theme="light"] .member-card-sheen { background: linear-gradient(115deg, transparent 34%, rgb(255 255 255 / .28) 46%, transparent 58%); }
:root[data-theme="light"] .member-card .card-eyebrow { color: rgb(24 24 27 / .55); }
:root[data-theme="light"] .member-card-perks { position: relative; color: rgb(24 24 27 / .78); }

/* Hero cards share one type scale: eyebrow labels, a display title with a serif accent, compact titles, values and meta. */
.hero-chips .card-eyebrow, .event-ticket-stub span { font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px; }
.hero-chips h4 { margin: 10px 0 12px; font-size: 24px; font-weight: 450; line-height: 1.04; letter-spacing: -1px; }
.door-tile-head strong, .reward-card-caption > strong { font-size: 15px; font-weight: 500; letter-spacing: -.2px; }
.event-ticket-stub strong, .reward-card-row b { font-size: 13px; font-weight: 500; }
.door-tile-unlocked { font-size: 12px; font-weight: 500; }
.reward-card-cta { font-weight: 500; }
.event-ticket-meta, .member-card-perks, .door-tile-window, .reward-card-caption > span { font-size: 11px; }
.member-card .card-eyebrow { margin-top: 0; }
.member-card h4 { margin: auto 0 6px; }
.member-card-perks { margin-top: 0; white-space: nowrap; }

/* Cell grid: every group of tiles shares one system. Hairline dividers, one outer radius, the same label, title and body type. */
.cell-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; }
:root .cell-grid > .cell { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 28px; border: 0; border-radius: 0; background: transparent; text-align: left;
  box-shadow: 1px 0 0 0 var(--rule), 0 1px 0 0 var(--rule); isolation: isolate; }
/* app.js rounds the corners of cells that sit in the grid's corners, so the glow and frame follow the outer curve. */
.cell::before, .cell::after { content: ""; position: absolute; inset: 0; border-radius: var(--cell-corners, 0); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.cell::before { z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--page-ink) 7%, transparent), transparent 70%),
    radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, #b8c2ff 9%, transparent), transparent 70%); }
/* A one-pixel frame lit only near the pointer, so the dividers shimmer as it passes. */
.cell::after { z-index: 1; padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--page-ink) 55%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cell-grid:hover > .cell::before, .cell-grid:hover > .cell::after { opacity: 1; }

:root .cell-grid .cell-title { margin: 4px 0 0; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.35px; color: var(--page-ink); }
:root .cell-grid .cell-body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--secondary); }

/* Groups that follow another group keep the same gap as cards elsewhere. */
.operation-details.cell-grid, .switch-points.cell-grid { margin-top: var(--space-card); }
.brand-feature-list.cell-grid { width: 100%; margin-top: var(--space-content); }

/* Highlight snippets: tiny product fragments instead of icons. */
.cell-visual { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 14px; }
.snip-swatches { display: flex; }
.snip-swatches i { width: 22px; height: 22px; border: 2px solid var(--page); border-radius: 50%; background: #315345; }
.snip-swatches i + i { margin-left: -7px; background: #92523d; }
.snip-swatches i + i + i { background: #3f547c; }
.snip-pill { padding: 6px 12px; border-radius: 8px; background: var(--page-ink); color: var(--page); font-size: 11.5px; font-weight: 500; }
.snip-chip { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--page-ink); font-variant-numeric: tabular-nums; }
.snip-rows { display: grid; gap: 5px; width: 100%; max-width: 210px; }
.snip-rows > span { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--page-ink); }
.snip-rows i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--secondary); }
.snip-rows i.is-on { background: var(--mono-success); box-shadow: none; }
.snip-rows em { margin-left: auto; font-style: normal; font-weight: 400; color: var(--secondary); }

@media (max-width: 760px) {
  .cell-grid { grid-template-columns: 1fr; }
  :root .cell-grid > .cell { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .cell::before, .cell::after { transition: none; } }

/* "swing." and "grow." in polished metal, like the hero cards. Still, with no moving sheen. */
.hero h1 em, .closing h2 em {
  background-image: linear-gradient(180deg, #ffffff 0%, #e4e4ea 30%, #9a9aa4 50%, #f2f2f6 62%, #b9b9c2 82%, #8a8a94 100%);
  background-size: 100% 100%; background-repeat: no-repeat; animation: none;
}
:root[data-theme="light"] .hero h1 em, :root[data-theme="light"] .closing h2 em {
  background-image: linear-gradient(180deg, #5c5c66 0%, #26262b 34%, #0f0f12 50%, #6e6e78 62%, #2c2c32 82%, #46464e 100%);
}

/* Phones: the three features become a stack of cards. Each pins under the header and the next slides over it.
   app.js sets --covered from the scroll position, so the motion follows the finger exactly. */
.feature-step-label { display: none; }
.stack-hold { display: none; view-timeline-inset: 0px; }
/* The waiting card starts lifted by the hold distance and settles to 0 while its spacer scrolls past the hold point. */
@keyframes stack-hold { from { translate: 0 calc(var(--dwell) * -1); } to { translate: 0 0; } }
@media (max-width: 760px) {
  #platform .feature-tabs, #platform .feature-tabs.has-indicator { display: none; }
  #platform .feature-panel[hidden] { display: grid; }
  #platform .feature-panel { position: sticky; top: calc(var(--header-height, 88px) - 2px + var(--stack-offset, 0px)); margin-bottom: 20px; overflow: hidden;
    transform: scale(calc(1 - var(--covered, 0) * .06)); transform-origin: 50% 0;
    box-shadow: 0 -14px 34px -18px rgb(0 0 0 / .55); animation: none; will-change: transform; }
  /* Covered cards dim through an overlay's opacity, which stays on the GPU instead of repainting the card. */
  #platform .feature-panel::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #000; opacity: calc(var(--covered, 0) * .4); pointer-events: none; will-change: opacity; }
  :root[data-theme="light"] #platform .feature-panel::after { opacity: calc(var(--covered, 0) * .14); }
  #platform .feature-panel:last-child { margin-bottom: 0; }
  #platform .feature-stage.is-holding .stack-hold { display: block; height: var(--dwell); }
  #platform .feature-stage.is-holding .feature-panel { animation-name: stack-hold; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: var(--hold-timeline, none); animation-range: exit-crossing calc(var(--hold-at, 0px) * -1) exit-crossing calc(var(--dwell) - var(--hold-at, 0px)); }
  #panel-control { --stack-offset: 12px; }
  #panel-loyalty { --stack-offset: 24px; }
  #platform .feature-panel > .feature-copy { order: 1; }
  #platform .feature-panel > .platform-art { order: 2; min-height: 0; padding: 16px 16px 12px; border-radius: 0; }
  #platform .story-composition { zoom: .66; }
  #platform .platform-art figcaption { margin-top: 10px; }
  #platform .feature-copy { padding: 20px 20px 14px; }
  #platform .feature-copy h3 { font-size: 23px; }
  .feature-step-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--secondary); }
  .feature-step-label b { font-weight: 600; color: var(--page-ink); }
  .feature-details > summary { min-height: 0; margin-bottom: 8px; pointer-events: none; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--secondary); }
  .feature-details > summary::after { display: none; }
  #platform .feature-details .small-checks { margin-bottom: 8px; }
}

/* Type system: one size per role, so every section reads the same.
   Display: h1 (hero), h2 60px, closing h2 84px. Titles: feature h3, card titles 18px. Ledes 16px (hero and closing 18px).
   Body 16px, card body 14.5px. Labels 11px / 600 / 1.1px uppercase. Buttons 15px (14px on phones). */
.closing-lede { font-size: 18px; }
#platform .feature-copy > p { font-size: 16px; }
main .button, .hero-actions .button, .closing-actions .button, .section-heading > .button, .pricing-card .button { min-height: 52px; padding: 0 24px; font-size: 15px; }
 .feature-step-label, .feature-details > summary, .footer-heading, .pricing-card .all-included { font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; }
@media (max-width: 760px) {
  main .button, .hero-actions .button, .closing-actions .button, .section-heading > .button, .pricing-card .button { min-height: 50px; font-size: 14px; }
  .section-space .eyebrow, .closing-content > .eyebrow, .eyebrow { font-size: 11px; letter-spacing: 1.4px; }
  .section-heading > p, .brand-feature-copy > p, .pricing-intro > p, .hero .hero-lede, .closing-lede { font-size: 16px; }
  #platform .feature-copy > p { font-size: 15px; }
}

/* Feature tabs: a smaller illustration leaves more room for the copy. */
@media (min-width: 761px) {
  #platform .feature-panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 440px; }
  #platform .platform-art { min-height: 400px; }
  #platform .story-composition { zoom: .86; }
}
@media (max-width: 760px) {
  #platform .story-composition { zoom: .56; }
  #platform .feature-panel > .platform-art { padding: 12px 16px 10px; }
}

/* Highlights: a hairline that fades out to the right separates each snippet from its text. */
.cell-visual { position: relative; box-sizing: border-box; height: 66px; margin-bottom: 18px; padding-bottom: 18px; }
.cell-visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--rule), transparent 90%); }

/* FAQ: the same outlined container and hairlines as the tile grids, with answers that glide open. */
.facility-questions { overflow: hidden; border: 1px solid var(--rule); border-radius: 18px; }
.facility-questions details { border-bottom: 1px solid var(--rule); }
.facility-questions details:last-child { border-bottom: 0; }
.facility-questions summary { padding: 20px 24px; font-size: 16px; font-weight: 500; transition: background .25s ease; }
.facility-questions summary:hover { background: color-mix(in srgb, var(--page-ink) 3%, transparent); }
.facility-questions summary > span { transition: transform .34s cubic-bezier(.22, 1, .36, 1); }
.facility-questions details.is-closing summary > span { transform: none; }
.faq-answer { overflow: hidden; }
.facility-questions details .faq-answer p { max-width: 640px; margin: 0; padding: 16px 24px 24px; font-size: 15px; line-height: 1.7; color: var(--secondary); }
@media (max-width: 760px) {
  .facility-questions summary { padding: 18px 20px; font-size: 15px; }
  .facility-questions details .faq-answer p { padding: 14px 20px 20px; }
}

/* Radii: 18px for large containers, 14px for cards and windows inside them, smaller for controls. */
:root { --radius-container: 18px; --radius-card: 14px; }
.feature-panel, #platform .feature-panel, .pricing-card, .cell-grid, .facility-questions { border-radius: var(--radius-container); }
.story-card, .story-notification, .brand-preview-window, .brand-venue-card, .brand-email-card, .event-ticket, .door-tile, .reward-card, .member-card { border-radius: var(--radius-card); }
@media (min-width: 761px) { #platform .platform-art { border-radius: var(--radius-card); } }

/* Pricing card in light mode: a light card like the others, with the same hierarchy. */
:root[data-palette="mono"][data-theme="light"] .pricing-card { color: #18181b; background: linear-gradient(145deg, #ffffff, #ededf1 75%);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 1px 0 #ffffff, 0 18px 40px rgb(20 20 30 / .08); }
:root[data-palette="mono"][data-theme="light"] .all-included { background: rgb(24 24 27 / .04); color: #18181b; border-color: var(--rule); }
:root[data-palette="mono"][data-theme="light"] .pricing-rule { background: var(--rule); }
:root[data-theme="light"] .pricing-card .price > span:last-child { color: rgb(24 24 27 / .62); opacity: 1; }
:root[data-theme="light"] .pricing-card .price-features li::before { color: #18181b; }
:root[data-theme="light"] .bay-estimate { border-color: var(--rule); background: rgb(255 255 255 / .7); }
:root[data-theme="light"] .bay-estimate-label, :root[data-theme="light"] .bay-estimate-total { color: rgb(24 24 27 / .62); }
:root[data-theme="light"] .bay-estimate-total strong { color: #18181b; }
:root[data-theme="light"] .bay-stepper button { border-color: rgb(24 24 27 / .16); }
:root[data-theme="light"] .bay-stepper button:hover { background: rgb(24 24 27 / .05); }
:root[data-palette][data-theme="light"] .pricing-card .button-yellow { background: #18181b; color: #fafafa; }

/* Touch: footer links get a taller hit area without changing their spacing. */
@media (pointer: coarse) {
  .footer-columns a { padding-block: 6px; margin-block: -6px; }
}