/* R17 label direction: a museum hung like a fashion house.
   Labels, not headlines. Small tracked type, the mark, three ways in, and
   squares as the only motion and ornament (see square-motion.js).
   Loaded after house-system.css; remove both links to return to R15. */

:root{
  --w-display:20px;--w-overlay:20px;--w-hero:clamp(24px,2vw,30px);
  --w-title-weight:500;--w-title-track:-.01em;
  --w-ui:10.5px;--w-ui-small:10.5px;
  --w-label-track:.12em;
  --sq-ink:var(--w-ink,#eeece6);
}

/* ---------- Type: labels, not headlines ---------- */
html body :is(.shelf-ui .shelf-heading h1,#shelf-title,.product-ui .product-panel h1,#product-heading h1,#product-title,
  .house-work-panel h1,#house-work-title,#wall-title,#work-title,#entrance-title,.house-heading h1,#house-room-title){
  line-height:1.2;margin-block:6px 10px
}
html body :is(#system-one-page .system-hero h1,.product-ui[data-experience] #product-heading h1){line-height:1.12}
html body :is(header nav button,#zoom-out,#motion,#open-films,#gala-tools button,.house-bottom button,
  .house-primary,.house-secondary,.house-text-action,#world-filters button,.system-jumps button,
  #previous,#next,#house-inspect,.dialog-heading button,[data-close],[data-house-close],summary,.gala-disclosure>summary){
  font-size:var(--w-ui);font-weight:500;letter-spacing:var(--w-label-track);text-transform:uppercase
}
/* System 1 is long-form; doubled id outranks its R05 section rules. */
#system-one-page#system-one-page :is(h2,h3){font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
#system-one-page#system-one-page :is(.system-intro,p){font-size:13px;line-height:1.7}
html body #system-one-page :is(.system-hero h1){max-width:none}
html body #house-hover>span{font-size:var(--w-ui);font-weight:500;letter-spacing:var(--w-label-track);text-transform:uppercase}
html body :is(.house-price,.product-offer strong){font-size:18px;font-weight:450;letter-spacing:-.01em}
html body .shelf-card strong{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
html body .shelf-price{font-size:10.5px;letter-spacing:.04em}
html body :is(.worlds-editorial-copy h2,#worlds-future-title,#experience-title,dialog .dialog-heading h2,dialog h2,#index-dialog .dialog-heading h2,#films-dialog .dialog-heading h2,#reading-dialog h2){font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
html body :is(.house-description,#product-description,.product-panel>p){font-size:11px;line-height:1.75}

/* ---------- Copy: say it once ---------- */
.sq-sr,html body :is(.entrance-copy){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
html body :is(.entry-number,.entry-description,.entry-arrow,#shelf-intro,#shelf-status,#shelf-eyebrow,
  .shelf-line,.house-heading>p,.house-heading .house-eyebrow,#house-hover>small,#house-view-note,.house-byline,
  .house-image-caption,#wall-context,.wall-heading .micro,#product-kind,#product-line,.worlds-editorial-copy>p,
  .worlds-path-note,.worlds-film-caption>span,#synth-views>span){display:none!important}

/* ---------- Entrance: the mark and three ways in ---------- */
body[data-mode=entrance] header nav{visibility:hidden}
html body .entry-ways{left:50%;right:auto;transform:translateX(-50%);bottom:72px;width:auto}
html body .entry-choices{display:flex;gap:clamp(28px,5vw,72px);grid-template-columns:none;background:none;border:0;margin:0}
html body .entry-choices button{
  min-height:44px;padding:10px 0;display:inline-flex;flex-direction:row;align-items:center;gap:12px;
  background:none!important;border:0!important;color:var(--w-ink-2)
}
html body .entry-choices button::before{
  content:'';position:static;width:9px;height:9px;flex:none;border:1px solid currentColor;background:transparent;
  transform:none;transition:transform .5s var(--w-ease),background-color .3s
}
html body .entry-name{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1;gap:0}
html body .entry-choices button:is(:hover,:focus-visible,[aria-pressed=true]){color:var(--w-ink)}
html body .entry-choices button:is(:hover,:focus-visible)::before{transform:rotate(180deg)}
html body .entry-choices button[aria-pressed=true]::before{background:currentColor;transform:rotate(90deg)}
html body .entry-choices button:focus-visible{outline:2px solid var(--w-ink);outline-offset:6px}
html body #head-door{border-radius:0}
/* Hover screens enter on click; touch screens preview on tap, so they keep one small Enter. */
@media(hover:hover) and (pointer:fine) and (min-width:701px){html body .entry-intro{display:none}}
html body .entry-intro{justify-content:center;margin-bottom:18px}
html body .entry-intro .entry-prompt{display:none}
html body #enter-scene{min-height:40px;padding:10px 16px;font-size:var(--w-ui);font-weight:500;letter-spacing:var(--w-label-track);text-transform:uppercase}

/* ---------- Squares as ornament ---------- */
html body :is(button,a,summary,dialog,input,.house-primary,.house-secondary,#enter-scene,.shelf-window,#vibes>button){border-radius:0!important}
/* Header: the current section is a filled square, hover flips one in. */
html body header nav button::after{
  left:50%;right:auto;bottom:4px;width:5px;height:5px;margin-left:-2.5px;background:currentColor;
  transform:scale(0) rotate(-90deg);transition:transform .45s var(--w-ease)
}
html body header nav button:hover::after{transform:scale(1) rotate(0deg);background:transparent;outline:1px solid currentColor;outline-offset:-1px}
html body header nav button[aria-current=page]::after{transform:scale(1) rotate(0deg);background:currentColor;outline:0}
html body header nav button[aria-current=page]{border-bottom:0}
/* Nested menus: the + becomes a square that turns and fills when open. */
html body summary>span:last-child{font-size:0;width:8px;height:8px;border:1px solid currentColor;display:inline-block;flex:none;
  transition:transform .45s var(--w-ease),background-color .3s}
html body summary>span:last-child>svg{display:none}
html body details[open]>summary>span:last-child{transform:rotate(90deg);background:currentColor}
/* Gallery rooms: seven squares; the name shows only for the room you're in. */
html body .house-rooms{gap:6px;max-width:none}
html body .house-rooms button{flex:none;gap:10px;border-bottom:0;padding:8px 0}
html body .house-rooms button img{display:none}
html body .house-rooms .gala-room-number{width:28px;height:28px;display:inline-grid;place-items:center;border:1px solid var(--w-line-strong);
  color:var(--w-ink-2);transition:transform .5s var(--w-ease),background-color .3s,color .3s}
html body .house-rooms button:hover .gala-room-number{transform:rotateY(180deg)}
html body .house-rooms button[aria-current=true] .gala-room-number{background:var(--w-ink);color:var(--w-fill);border-color:var(--w-ink)}
html body .house-rooms button>span:not(.gala-room-number){display:none;font-size:10.5px;letter-spacing:var(--w-label-track);text-transform:uppercase}
html body .house-rooms button[aria-current=true]>span:not(.gala-room-number){display:inline}
/* Primary and secondary actions carry a square that turns on hover. */
html body :is(.house-primary,.house-secondary)::after{content:'';width:7px;height:7px;flex:none;margin-left:auto;background:currentColor;transition:transform .45s var(--w-ease)}
html body :is(.house-primary,.house-secondary):hover::after{transform:rotate(90deg) scale(.7)}
html body :is(.house-primary,.house-secondary)>:is(span[aria-hidden],.house-icon){display:none}

/* Films: the Shuffle tile is nine squares that turn in a wave. */
.film-shuffle-mark{display:grid;grid-template-columns:repeat(3,1fr);gap:8%;aspect-ratio:16/10;padding:12% 30%;background:#000}
.film-shuffle-mark>b{display:block;aspect-ratio:1;border:1px solid var(--w-ink-2);animation:sq-turn 2.4s var(--w-ease) infinite;animation-delay:calc(var(--i,0) * 90ms)}
.film-shuffle-mark>b:nth-child(1){--i:0}.film-shuffle-mark>b:nth-child(2),.film-shuffle-mark>b:nth-child(4){--i:1}
.film-shuffle-mark>b:nth-child(3),.film-shuffle-mark>b:nth-child(5),.film-shuffle-mark>b:nth-child(7){--i:2}
.film-shuffle-mark>b:nth-child(6),.film-shuffle-mark>b:nth-child(8){--i:3}.film-shuffle-mark>b:nth-child(9){--i:4}
#film-options button[aria-pressed=true] .film-shuffle-mark>b{background:var(--w-ink);border-color:var(--w-ink)}
@keyframes sq-turn{0%,55%{transform:none}75%{transform:rotate(90deg) scale(.6)}100%{transform:rotate(90deg)}}
body[data-reduced=true] .film-shuffle-mark>b{animation:none}
@media(prefers-reduced-motion:reduce){.film-shuffle-mark>b{animation:none}}

/* ---------- Square motion surfaces (driven by square-motion.js) ---------- */
.sq-veil{position:fixed;inset:0;z-index:60;display:grid;grid-auto-rows:var(--sq);pointer-events:none;perspective:900px}
.sq-veil[hidden]{display:none}
.sq-veil>i{display:block;width:var(--sq);height:var(--sq);background:#080808;backface-visibility:hidden;will-change:transform,opacity}
.sq-veil[data-kind=scatter]>i{background:transparent}
.sq-burst{position:fixed;z-index:61;display:grid;pointer-events:none;perspective:700px}
.sq-burst>i{display:block;background:#0b0b0b;border:1px solid #ffffff12}
dialog[open]{will-change:clip-path}

@media(max-width:700px){
  html body .entry-ways{bottom:64px;width:calc(100% - 40px)}
  html body .entry-choices{justify-content:space-between;gap:12px}
  html body .entry-name{font-size:11px;letter-spacing:.14em}
  html body .house-rooms{left:20px;right:20px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.sq-veil,.sq-burst{display:none!important}}
body[data-reduced=true] :is(.sq-veil,.sq-burst){display:none!important}

/* ---------- The showing (threshold) ---------- */
#showing-card{position:fixed;z-index:13;right:40px;top:196px;width:280px;padding:18px 18px 16px;background:#080808e6;border:1px solid var(--w-line);backdrop-filter:blur(8px);color:var(--w-ink)}
#showing-card[hidden]{display:none}
#showing-card h2{font-size:20px;font-weight:500;letter-spacing:-.01em;margin:8px 0 6px}
#showing-card .showing-line{font-size:11px;line-height:1.7;color:var(--w-ink-2);margin:0 0 12px}
#showing-card .showing-provenance{font-size:10.5px;color:var(--w-ink-3);margin:0 0 12px}
#showing-card .showing-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#showing-card .showing-actions button{min-height:44px;padding:10px 12px;font-size:var(--w-ui);font-weight:500;letter-spacing:var(--w-label-track);text-transform:uppercase;border:1px solid var(--w-line-strong);color:var(--w-ink);background:transparent;display:flex;align-items:center;justify-content:space-between;gap:8px}
#showing-card .showing-actions .house-primary{background:var(--w-ink);color:var(--w-fill);border-color:var(--w-ink)}
#offer-dialog{width:min(440px,calc(100% - 32px));padding:22px;background:#0d0d0d;color:var(--w-ink);border:1px solid var(--w-line)}
#offer-dialog::backdrop{background:#000a}
#offer-dialog form{display:grid;gap:12px;margin-top:14px}
#offer-dialog label{display:grid;gap:6px;font-size:var(--w-ui);font-weight:500;letter-spacing:var(--w-label-track);text-transform:uppercase;color:var(--w-ink-2)}
#offer-dialog :is(input,textarea){font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--w-ink);background:#151515;border:1px solid var(--w-line-strong);padding:10px 12px;min-height:44px}
#offer-dialog :is(input,textarea):focus-visible{outline:2px solid var(--w-ink);outline-offset:2px}
#offer-dialog .offer-terms{font-size:11px;line-height:1.6;color:var(--w-ink-3);margin:2px 0 0}
#offer-dialog .offer-status{font-size:11px;color:var(--w-ink);min-height:1em;margin:0}
#offer-dialog button[type=submit]{min-height:46px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
@media(max-width:700px){#showing-card{left:16px;right:16px;top:auto;bottom:176px;width:auto;padding:14px}#showing-card .showing-line{display:none}}

/* ---------- R18 first paint: a still of the entrance while the 3D arrives ---------- */
#entrance-still{position:fixed;inset:0;z-index:1;pointer-events:none;background:#080808 url('assets/films/01.jpg') center/cover no-repeat;transition:opacity .9s var(--w-ease),visibility 0s}
body:not([data-loading=true]) #entrance-still,body:not([data-mode=entrance]) #entrance-still{opacity:0;visibility:hidden;transition:opacity .9s var(--w-ease),visibility 0s .9s}
#entrance-still>i{position:absolute;left:50%;bottom:150px;width:9px;height:9px;margin-left:-4.5px;border:1px solid var(--w-ink-2);animation:sq-wait 1.6s var(--w-ease) infinite}
@keyframes sq-wait{0%{transform:rotate(0)}50%{transform:rotate(90deg);background:var(--w-ink-2)}100%{transform:rotate(180deg)}}
@media(prefers-reduced-motion:reduce){#entrance-still>i{animation:none}}

/* ---------- R18 the threshold: wall text and the approach ---------- */
#showing-card{width:300px}
#showing-card .showing-artist{font-size:11px;color:var(--w-ink-2);margin:0 0 14px}
#showing-card .showing-label{display:grid;gap:0;margin:0 0 14px;border-top:1px solid var(--w-line)}
#showing-card .showing-label>div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--w-line)}
#showing-card .showing-label>div[hidden]{display:none}
#showing-card .showing-label dt{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--w-ink-3)}
#showing-card .showing-label dd{margin:0;font-size:11px;line-height:1.5;color:var(--w-ink)}
#showing-card .showing-price{font-size:15px!important;letter-spacing:-.01em}
#showing-card .showing-words{font-size:12px;line-height:1.7;color:var(--w-ink);margin:0 0 12px}
#showing-card .showing-actions button:disabled{opacity:.45;cursor:default}
/* The card arrives after you do. */
body[data-threshold=true] #showing-card{animation:showing-arrive 1.1s var(--w-ease) .7s both}
@keyframes showing-arrive{from{opacity:0;transform:translateY(10px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
/* The house quiets: controls fall back until you reach for them, the edges darken. */
body[data-threshold=true] :is(.house-rooms,#gala-tools,.house-bottom,.gala-movement,.house-heading,.gala-navigation){opacity:.28;transition:opacity 1.2s var(--w-ease)}
body[data-threshold=true] :is(.house-rooms,#gala-tools,.house-bottom,.gala-movement,.house-heading,.gala-navigation):is(:hover,:focus-within){opacity:1;transition-duration:.25s}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;background:radial-gradient(ellipse 60% 70% at 50% 46%,transparent 40%,#000000b8 100%);transition:opacity 1.6s var(--w-ease)}
body[data-threshold=true]::after{opacity:1}
@media(prefers-reduced-motion:reduce){body[data-threshold=true] #showing-card{animation:none}}
body[data-reduced=true][data-threshold=true] #showing-card{animation:none}
@media(max-width:700px){
  #showing-card{width:auto}
  #showing-card .showing-label>div:not(:has(.showing-price)):not(.showing-close){display:none}
  #showing-card .showing-artist,#showing-card .showing-words{display:none}
}
@media(hover:none){body[data-threshold=true] :is(.house-rooms,#gala-tools,.house-bottom,.gala-movement,.house-heading,.gala-navigation){opacity:.6}}

/* ---------- R19 the entrance is the films alone ---------- */
html body #head-door{display:none!important}
/* A quiet floor of shade under the three ways in, so the labels hold over any film. */
body[data-mode=entrance] .entrance-ui::before{content:'';position:fixed;inset:auto 0 0 0;height:34vh;pointer-events:none;background:linear-gradient(transparent,#05050599 70%,#050505cc);z-index:-1}

/* ---------- R19 corners are the navigation ---------- */
html body header{border-bottom:0!important;background:none!important}
html body header::before{display:none!important}
html body header .brand{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:21}
html body header nav,body[data-mode=entrance] header nav{visibility:visible!important;position:static}
html body header nav button.corner{position:fixed;z-index:21;display:grid;grid-template-columns:auto auto;column-gap:10px;row-gap:3px;align-items:baseline;justify-content:start;min-height:44px;padding:12px 4px;font-size:11px;letter-spacing:.14em;color:var(--w-ink-2)}
html body header nav button.corner:hover,html body header nav button.corner[aria-current=page]{color:var(--w-ink)}
html body header nav button.corner .corner-no{font-size:10px;letter-spacing:.08em;color:var(--w-ink-3);font-variant-numeric:tabular-nums}
html body header nav button.corner .corner-data{grid-column:2;font-size:9.5px;letter-spacing:.1em;color:var(--w-ink-3);font-variant-numeric:tabular-nums}
html body header nav button.corner>span[aria-hidden]:not(.corner-no):not(.corner-data){display:none}
html body header nav button.corner::after{display:none}
html body header nav button.corner[aria-current=page] .corner-no::before{content:'';display:inline-block;width:5px;height:5px;margin-right:6px;background:currentColor;vertical-align:1px}
html body header nav [data-category=art].corner{top:12px;left:20px}
html body header nav [data-category=instruments].corner{top:12px;right:20px;justify-items:end;text-align:right}
html body header nav [data-category=worlds].corner{bottom:10px;left:20px;top:auto}
html body header nav #open-index.corner{bottom:10px;right:20px;top:auto;justify-items:end;text-align:right}
html body header nav :is([data-category=instruments],#open-index).corner{grid-template-columns:auto auto}
/* Utilities gather at the bottom centre, out of the corners. */
html body #zoom-out,html body body[data-mode] #zoom-out,html body[data-mode] #zoom-out{position:fixed;left:auto;right:calc(50% + 14px);bottom:10px;top:auto;min-height:44px}
html body #motion,html body[data-mode] #motion,html body[data-mode=gala] #motion,html body[data-mode=edition] #motion{position:fixed;left:calc(50% + 14px);right:auto;bottom:10px;top:auto;min-height:44px;font-size:10px}
html body #open-films{position:fixed;left:auto;right:calc(50% + 14px);bottom:10px;min-height:44px}
/* The readout: where you are, in numbers, under the mark. */
#house-readout{position:fixed;z-index:21;left:50%;top:66px;transform:translateX(-50%);font-size:9.5px;letter-spacing:.12em;color:var(--w-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
#house-readout:empty{display:none}
/* The move's own numbers, in the corner it came from. */
.sq-readout{position:fixed;z-index:62;font-size:9.5px;letter-spacing:.12em;color:var(--w-ink);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;padding:4px 0}
.sq-readout[hidden]{display:none}
.sq-readout[data-x=left]{left:20px}.sq-readout[data-x=right]{right:20px}
.sq-readout[data-y=top]{top:62px}.sq-readout[data-y=bottom]{bottom:58px}
/* The entrance: the film, the mark, the four corners. Nothing else. */
html body .entry-ways{display:none!important}
/* Squares only scale: no turning ornaments anywhere. */
html body .entry-choices button::before,html body .house-rooms button .gala-room-number,html body summary>span:last-child,html body :is(.house-primary,.house-secondary)::after{transition:transform .4s var(--w-ease),background-color .3s}
html body .house-rooms button:hover .gala-room-number{transform:scale(.86)}
html body details[open]>summary>span:last-child{transform:scale(.7)}
html body :is(.house-primary,.house-secondary):hover::after{transform:scale(.6)}
.film-shuffle-mark>b{animation-name:sq-pulse}
@keyframes sq-pulse{0%,55%{transform:scale(1)}75%{transform:scale(.5)}100%{transform:scale(1)}}
#entrance-still>i{animation-name:sq-wait-scale}
@keyframes sq-wait-scale{0%,100%{transform:scale(.4)}50%{transform:scale(1);background:var(--w-ink-2)}}
@media(max-width:700px){
  html body header nav button.corner{font-size:10px;letter-spacing:.1em;padding:10px 2px}
  html body header nav button.corner .corner-data{display:none}
  #house-readout{top:58px;font-size:8.5px;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
}
/* Corner labels and readouts hold over any film or room by inverting what is behind them. */
html body header nav button.corner,#house-readout,.sq-readout{mix-blend-mode:difference;color:#e9e7e1}
html body header nav button.corner :is(.corner-no,.corner-data),#house-readout{color:#a9a69f}
@media(max-width:700px){
  html body header nav button.corner :is(.corner-data,.corner-no){display:none!important}
  html body #zoom-out,html body[data-mode] #zoom-out,html body #open-films{bottom:50px!important}
  html body #motion,html body[data-mode] #motion,html body[data-mode=gala] #motion,html body[data-mode=edition] #motion{bottom:50px!important}
}
@media(max-width:700px){
  html body:is([data-mode=gala],[data-mode=edition]) #zoom-out,html body:is([data-mode=gala],[data-mode=edition]) #motion{bottom:auto!important;top:64px;min-height:36px}
  html body:is([data-mode=gala],[data-mode=edition]) #house-readout{display:none}
}

/* ---------- R20 the house line: commissions, socials, founding year ---------- */
#house-line{position:fixed;z-index:21;left:50%;top:84px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;white-space:nowrap;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;mix-blend-mode:difference;color:#a9a69f}
#house-line:empty{display:none}
#house-line a{color:#e9e7e1;text-decoration:none;padding:8px 0}
#house-line a:hover,#house-line a:focus-visible{text-decoration:underline;text-underline-offset:3px}
body[data-threshold=true] #house-line{opacity:.28;transition:opacity 1.2s var(--w-ease)}
@media(max-width:700px){#house-line{top:72px;font-size:8.5px}html body:is([data-mode=gala],[data-mode=edition]) #house-line{display:none}}
/* The bid button carries a longer label. */
#showing-card .showing-actions{grid-template-columns:1fr}
#showing-card .showing-actions .house-primary{order:-1}

/* ---------- R21 the list: invitation and notify-me ---------- */
#house-line button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:#e9e7e1;background:none;border:0;padding:8px 0;cursor:pointer}
#house-line button:hover,#house-line button:focus-visible{text-decoration:underline;text-underline-offset:3px}
#waitlist-dialog{width:min(400px,calc(100% - 32px));padding:22px;background:#0d0d0d;color:var(--w-ink);border:1px solid var(--w-line)}
#waitlist-dialog::backdrop{background:#000a}
#waitlist-dialog h2{font-size:20px;font-weight:500;letter-spacing:-.01em;margin:8px 0 0}
#waitlist-dialog form{display:grid;gap:12px;margin-top:14px}
#waitlist-dialog .waitlist-line{font-size:12px;line-height:1.7;color:var(--w-ink-2);margin:0}
#waitlist-dialog label{display:grid;gap:6px;font-size:var(--w-ui);font-weight:500;letter-spacing:var(--w-label-track);text-transform:uppercase;color:var(--w-ink-2)}
#waitlist-dialog input{font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--w-ink);background:#151515;border:1px solid var(--w-line-strong);padding:10px 12px;min-height:44px}
#waitlist-dialog input:focus-visible{outline:2px solid var(--w-ink);outline-offset:2px}
#waitlist-dialog .waitlist-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#waitlist-dialog .offer-terms{font-size:11px;line-height:1.6;color:var(--w-ink-3);margin:2px 0 0}
#waitlist-dialog .offer-status{font-size:11px;color:var(--w-ink);min-height:1em;margin:0}
#waitlist-dialog button[type=submit]{min-height:46px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.product-ui .product-offer #product-notify{display:block;width:100%;min-height:48px;padding:12px 16px;margin-top:10px;font-size:12px;letter-spacing:var(--w-label-track);text-transform:uppercase;text-align:left;color:var(--w-fill,#0a0a0a);background:var(--w-ink,#eeece6);border:1px solid var(--w-ink,#eeece6);cursor:pointer}
.product-ui .product-offer #product-notify[hidden]{display:none}