/* Shared layer for every page: base, header and menu sheet, buttons and links, hover/press layer,
   section nav, FAQ, closing band, footer and motion states. Tokens come from tokens.css.
   Page files (studio.css, udb.css, demo.css, uql.css, docs.css, uql-docs.css) hold page rules. */

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]:not([hidden="until-found"]){display:none!important}
body{margin:0;background:var(--canvas);color:var(--white);font-family:var(--font);font-size:1rem;-webkit-font-smoothing:antialiased}
/* Lock scrolling on the root only: an overflow on body would make it the sticky header's scroll container. */
body.modal-open,html.menu-open{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
button:disabled{cursor:default}
button,img{max-width:100%}
img{display:block;width:100%;height:auto}
h1,h2,h3{text-wrap:balance}
h1,h2{line-height:var(--leading-heading)}
p{line-height:1.6}
p,li,dd,summary{text-wrap:pretty}
h1{letter-spacing:var(--track-display)}
h2{font-weight:400;font-size:var(--step-4);line-height:var(--leading-heading);letter-spacing:var(--track-h2);margin:0}
h1 em,h2 em{font-style:normal;color:var(--green)}
::selection{background:var(--green);color:var(--on-green)}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.shell{width:min(1280px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.prose{max-width:var(--measure)}

/* Small labels. One per section at most, and only when it states a status. */
.eyebrow,.mono{font-family:var(--mono);font-size:var(--label);font-weight:400;letter-spacing:var(--track-label);line-height:1.6}
.eyebrow{margin:0 0 var(--s-5);color:var(--muted)}
.label{display:inline-flex;align-items:center;gap:var(--s-2);font:400 var(--label)/1.6 var(--mono);letter-spacing:var(--track-label);color:var(--accent-soft)}
.status-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:9px;vertical-align:1px}
.skip-link{position:fixed;left:20px;top:-80px;padding:12px 16px;background:var(--green);color:var(--on-green);font-weight:600;z-index:1000}
.skip-link:focus{top:15px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--header-bg);border-bottom:1px solid var(--line);color:var(--white)}
.header-inner{height:var(--header-h);display:flex;align-items:center;gap:var(--s-5)}
.brand{display:flex;align-items:center;flex:none;min-height:44px;font-size:26px;font-weight:600;letter-spacing:-.06em;line-height:1;white-space:nowrap;color:var(--white)}
.brand-main{display:inline-flex;align-items:center;min-height:44px}
.brand-symbol{font-size:32px;color:var(--green);margin-right:10px;font-weight:400;transform:rotate(-10deg);letter-spacing:0}
.brand-symbol.uql-brand-symbol{font:400 22px/1 var(--mono);transform:none;letter-spacing:-.2em;margin-right:16px}
.brand-dot{color:var(--green)}
.brand-by{display:inline-flex;align-items:center;min-height:44px;margin-left:12px;font-size:var(--step--1);font-weight:400;letter-spacing:0;color:var(--muted)}
.beak-mark{flex:none;width:30px;height:30px;margin-right:10px;color:var(--green)}
.beak-mark .beak-eye{stroke:var(--beak-eye,#111915)}
.studio-brand{letter-spacing:-.05em}
.desktop-nav{display:flex;align-items:stretch;gap:var(--s-5);margin-left:auto;height:100%;font-size:14px}
.desktop-nav a{position:relative;display:flex;align-items:center;white-space:nowrap;color:var(--text-soft)}
.desktop-nav a[aria-current]{color:var(--white)}
.desktop-nav a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--green)}
.header-actions{display:flex;align-items:center;flex:none;gap:var(--s-3)}
.theme-toggle{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-2);background:var(--surface-1);color:var(--white);font:500 13px/1 var(--font);white-space:nowrap;transition:background-color var(--dur-in) var(--ease-ui),border-color var(--dur-in) var(--ease-ui)}
.theme-toggle [data-theme-icon]{display:grid;place-items:center;flex:none;width:18px;height:18px;font:19px/1 var(--font)}
.theme-toggle [data-theme-icon] svg{display:block;width:18px;height:18px}
@keyframes db-icon-turn{from{transform:rotate(-90deg)}}
.theme-toggle [data-theme-icon].is-turning{animation:db-icon-turn var(--dur-panel) var(--ease-out)}
.menu-toggle{display:none;flex:none;width:44px;height:44px;padding:11px 10px;background:none}
.menu-toggle span{display:block;height:1px;margin:6px 0;background:var(--white);transition:transform var(--dur-panel) var(--ease-ui)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
html:not(.js) :is(.theme-toggle,.menu-toggle){display:none}

/* Menu sheet. Without JS it is a plain list under the header on phones. */
.mobile-nav{display:none}
.mobile-nav-inner{padding-block:var(--s-3) var(--s-6)}
.sheet-list{list-style:none;margin:0;padding:0}
.sheet-list a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line);font-size:var(--step-1);color:var(--white)}
.sheet-list a[aria-current]{color:var(--green)}
.sheet-sections{margin-top:var(--s-6)}
.sheet-sections .sheet-list a{font-size:var(--step-0);color:var(--text-soft)}
.sheet-label{margin:0 0 var(--s-2);font:400 var(--label)/1.6 var(--mono);letter-spacing:var(--track-label);color:var(--muted)}
.sheet-cta{margin-top:var(--s-6);width:100%}

/* ---------- Buttons and links ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-4);min-height:48px;padding:14px 22px;border:1px solid transparent;border-radius:var(--radius-1);font-size:14px;font-weight:600;line-height:1.2;text-align:center;transition:transform var(--dur-in) var(--ease-ui),background-color var(--dur-in) var(--ease-ui),border-color var(--dur-in) var(--ease-ui),color var(--dur-in) var(--ease-ui)}
.button:active{transform:scale(.97);transition-duration:var(--dur-press)}
.button-primary{background:var(--green);color:var(--on-green)}
.button-small{min-height:44px;padding:10px 16px;gap:var(--s-3);font-size:13px}
.button-outline{border-color:var(--line-strong);background:transparent;color:var(--white)}
.button-dark-outline{background:transparent;color:var(--paper-heading);border-color:var(--line-strong)}
.text-button{display:inline-flex;gap:var(--s-3);align-items:center;justify-content:center;min-height:44px;padding:10px 0;font-size:14px;font-weight:500;background:linear-gradient(var(--green),var(--green)) 0 100%/0 1px no-repeat;transition:background-size var(--dur-in) var(--ease-ui),color var(--dur-in) var(--ease-ui)}
.text-link{display:inline-flex;gap:var(--s-4);align-items:center;min-height:44px;padding:10px 0;font-size:14px;background:linear-gradient(var(--green),var(--green)) 0 100%/0 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;transition:background-size var(--dur-in) var(--ease-ui),color var(--dur-in) var(--ease-ui)}
:where(main p,main li,main dd) a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--green-40);transition:text-decoration-color var(--dur-in) var(--ease-ui),color var(--dur-in) var(--ease-ui)}

/* External links only (Asset Store, YouTube, mailto) carry the ↗ glyph. */
.ext,a[target="_blank"]>[aria-hidden="true"]:last-child,a[href^="mailto:"]>[aria-hidden="true"]:last-child{display:inline-block;transition:transform var(--dur-in) var(--ease-ui)}

/* Linked cards and product visuals: .hover-card lifts; .hover-zoom only scales its image. */
.hover-card{transition:transform var(--dur-in) var(--ease-ui),border-color var(--dur-in) var(--ease-ui),box-shadow var(--dur-in) var(--ease-ui)}
:is(.hover-card,.hover-zoom){overflow:hidden}
:is(.hover-card,.hover-zoom) img{transition:transform var(--dur-panel) var(--ease-ui)}

/* ---------- Hover and press layer: fine pointers, mirrored on keyboard focus ---------- */
@media (hover:hover) and (pointer:fine){
  .desktop-nav a:hover,.brand-by:hover{color:var(--white)}
  .theme-toggle:hover{background:var(--hover-fill);border-color:var(--green-40)}
  .button-primary:hover{background:var(--green-hover);transform:translateY(-1px)}
  :is(.button-outline,.button-dark-outline):hover{background:var(--hover-fill);border-color:var(--green-40)}
  .button:active:hover{transform:scale(.97)}
  :is(.text-link,.text-button):hover{color:var(--green);background-size:100% 1px,100% 1px}
  :where(main p,main li,main dd) a:not([class]):hover{color:var(--green);text-decoration-color:var(--green)}
  a:hover>.ext,a[target="_blank"]:hover>[aria-hidden="true"]:last-child,a[href^="mailto:"]:hover>[aria-hidden="true"]:last-child{transform:translate(2px,-2px)}
  .hover-card:hover{transform:translateY(-2px);border-color:var(--green-40)}
  :is(.hover-card,.hover-zoom):hover img{transform:scale(1.02)}
  .site-footer a:hover,.sheet-list a:hover{color:var(--green)}
  .section-nav-links a:hover{color:var(--white)}
}
.desktop-nav a:focus-visible,.brand-by:focus-visible{color:var(--white)}
.button-primary:focus-visible{background:var(--green-hover)}
:is(.button-outline,.button-dark-outline):focus-visible{background:var(--hover-fill)}
:is(.text-link,.text-button):focus-visible{color:var(--green);background-size:100% 1px,100% 1px}
a:focus-visible>.ext,a[target="_blank"]:focus-visible>[aria-hidden="true"]:last-child,a[href^="mailto:"]:focus-visible>[aria-hidden="true"]:last-child{transform:translate(2px,-2px)}
.hover-card:focus-visible{transform:translateY(-2px);border-color:var(--green-40)}
:is(.hover-card,.hover-zoom):focus-visible img{transform:scale(1.02)}

/* ---------- Section nav ("On this page"), see motion.js ---------- */
.section-nav{position:sticky;top:calc(var(--header-h) + 1px);z-index:25;background:var(--header-bg);border-bottom:1px solid var(--line)}
.section-nav-inner{display:flex;align-items:stretch;gap:var(--s-5);height:var(--subnav-h)}
.section-nav-title{display:flex;align-items:center;flex:none;font-size:14px;font-weight:600;color:var(--white);white-space:nowrap}
.section-nav-links{position:relative;display:flex;align-items:stretch;gap:var(--s-5);min-width:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.section-nav-links::-webkit-scrollbar{display:none}
.section-nav-links a{display:flex;align-items:center;flex:none;min-height:44px;scroll-snap-align:start;font-size:14px;white-space:nowrap;color:var(--muted);transition:color var(--dur-in) var(--ease-ui)}
.section-nav-links a[aria-current]{color:var(--white)}
.section-nav-indicator{position:absolute;left:0;bottom:0;width:1px;height:2px;background:var(--green);transform-origin:0 50%;transform:translateX(0) scaleX(0);opacity:0;pointer-events:none;transition:transform var(--dur-panel) var(--ease-ui),opacity var(--dur-in) var(--ease-ui)}
html.has-section-nav{scroll-padding-top:calc(var(--header-h) + var(--subnav-h) + 24px)}
:root:has([data-section-nav]){scroll-padding-top:calc(var(--header-h) + var(--subnav-h) + 24px)}

/* ---------- Shared sections: FAQ and closing band ---------- */
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;min-height:44px;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:var(--step-0);font-weight:500;line-height:1.4}
summary::-webkit-details-marker{display:none}
summary>span{flex:none;color:var(--accent-soft);font-size:22px;font-weight:400;transition:transform var(--dur-in) var(--ease-ui)}
details[open] summary>span{transform:rotate(45deg)}
details p{max-width:var(--measure);margin:0 35px 23px 0;font-size:var(--step-0);line-height:1.7;color:var(--paper-muted)}
.faq-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;padding-block:95px}
.faq-section .text-link{margin-top:28px}
.faq-list{border-top:1px solid var(--line)}
.closing-section{background:var(--band);border-block:1px solid var(--band-line)}
.closing-inner{display:flex;justify-content:space-between;align-items:center;gap:50px;padding-block:60px}
.closing-inner .eyebrow{color:var(--accent-soft);margin-bottom:18px}
.closing-inner h2{font-size:clamp(2.25rem,1.9rem + 1.4vw,3rem)}
.closing-inner>div:last-child{display:flex;flex-direction:column;align-items:center;gap:8px}

/* ---------- Footer: the same on every page ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-6);font-size:var(--step--1);color:var(--muted)}
.footer-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s-7) var(--s-6)}
.footer-mark{display:inline-flex;align-items:center;min-height:44px;font-size:24px;font-weight:600;letter-spacing:-.05em;color:var(--white)}
.footer-mark .beak-mark{width:28px;height:28px}
.footer-tagline{margin:var(--s-3) 0 0;max-width:30ch;font-size:var(--step-0);line-height:1.5;color:var(--text-soft)}
.footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.footer-heading{margin:0 0 var(--s-2);font-size:var(--step--1);font-weight:600;color:var(--white)}
.footer-nav ul{list-style:none;margin:0;padding:0}
.footer-nav a{display:inline-flex;align-items:center;min-height:36px;color:var(--muted);transition:color var(--dur-in) var(--ease-ui)}
.footer-nav a[aria-current]{color:var(--white)}
.footer-legal{grid-column:1/-1;margin:0;padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--step--1);color:var(--muted)}

/* ---------- Motion states. Hidden start states only with JS and motion allowed. ---------- */
@keyframes db-enter-up{from{opacity:0;translate:0 12px}}
@keyframes db-line-rise{from{translate:0 105%}}
@keyframes db-settle{from{scale:.985}}
@media (prefers-reduced-motion:no-preference){
  html.js [data-enter]:not([data-enter="lines"]):not([data-enter="settle"]){animation:db-enter-up var(--dur-enter) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms)}
  html.js [data-enter="settle"]{animation:db-settle var(--dur-hero) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms)}
  html.js .enter-line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  html.js .enter-line>span{display:inline-block;animation:db-line-rise var(--dur-hero) var(--ease-out) backwards;animation-delay:calc(var(--l,0) * 80ms)}
  html.js.motion-pending :is([data-enter],.enter-line>span){animation-play-state:paused}
  html.js.motion-pending [data-enter="lines"]:not(.is-split){opacity:0}
  html.reveal-ready [data-reveal]:not(.in){opacity:0}
  html.reveal-ready [data-reveal].in{animation:db-enter-up var(--dur-enter) var(--ease-out) backwards}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:200ms;animation-timing-function:var(--ease-ui)}
}
@media (prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color!important}
  [data-reveal],[data-enter],.enter-line>span{opacity:1!important;transform:none!important;translate:none!important;scale:none!important}
}
@media print{
  [data-reveal],[data-enter],.enter-line>span{opacity:1!important;transform:none!important;translate:none!important;scale:none!important;animation:none!important}
  .site-header,.section-nav{position:static}
  :is(.menu-toggle,.theme-toggle,.mobile-nav,.section-nav){display:none!important}
}

/* ---------- Responsive chrome ---------- */
@media (max-width:1099.98px){
  .theme-toggle{width:44px;padding:0;gap:0}
  .theme-toggle [data-theme-label]{display:none}
  .faq-section{gap:50px}
}
@media (max-width:799.98px){
  .desktop-nav{display:none}
  .header-actions{margin-left:auto}
  html.js .menu-toggle{display:block}
  .mobile-nav{display:block;border-top:1px solid var(--line)}
  html:not(.js) .site-header{position:relative}
  html:not(.js) .section-nav{top:0}
  html:not(.js) .mobile-nav-inner{padding-block:var(--s-2) var(--s-4)}
  html:not(.js) .sheet-list{display:flex;flex-wrap:wrap;column-gap:var(--s-5)}
  html:not(.js) .sheet-list a{min-height:44px;border-bottom:0;font-size:var(--step-0)}
  html:not(.js) .sheet-sections{margin-top:var(--s-2)}
  html:not(.js) .sheet-cta{margin-top:var(--s-3)}
  html.js .mobile-nav{position:fixed;top:calc(var(--header-h) + 1px);left:0;right:0;bottom:0;z-index:31;overflow-y:auto;overscroll-behavior:contain;background:var(--canvas);border-top:0;visibility:hidden;opacity:0;translate:0 -10px;transition:opacity var(--dur-panel) var(--ease-ui),translate var(--dur-panel) var(--ease-ui),visibility 0s linear var(--dur-panel)}
  html.js .mobile-nav.is-open{visibility:visible;opacity:1;translate:none;transition-delay:0s}
  .faq-section{grid-template-columns:1fr;gap:32px;padding-block:58px}
  .faq-section .text-link{margin-top:20px}
  summary{padding-block:18px}
  .closing-inner{display:block;padding-block:43px}
  .closing-inner>div:last-child{align-items:flex-start;margin-top:28px}
  .footer-inner{grid-template-columns:1fr}
  .footer-nav a{min-height:44px}
}
@media (max-width:639.98px){
  .brand{font-size:22px}
  .brand-symbol{font-size:27px;margin-right:7px}
  .brand-symbol.uql-brand-symbol{font-size:19px;margin-right:13px}
  .beak-mark{width:26px;height:26px;margin-right:8px}
  .brand-by{margin-left:10px}
}
@media (max-width:479.98px){
  .header-actions>.button{display:none}
  .header-inner{gap:var(--s-3)}
  .footer-nav{gap:var(--s-4)}
}
@media (max-width:359.98px){
  .brand-by{display:none}
}

/* UDB Lite release switch (lite.js): keep the hidden state of coming-soon and live elements even on .button and other display rules. */
[data-lite-pending][hidden],[data-lite-live][hidden]{display:none!important}