/* Join the waitlist: a short, five-step flow on top of the page (pen.dev "Waitlist V5" + "V6" custom example).
   Everything is prefixed wl- so it never clashes with the page. */
.wl { position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; color:#fff; overflow-y:auto; overscroll-behavior:contain;
  font-family:Inter, system-ui, sans-serif; font-optical-sizing:none; font-variation-settings:'opsz' 14;
  background:#1E130B url(https://public.homefig.com/landing/waitlist/img/typing-blur-poster.jpg) center/cover no-repeat; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s .35s; }
.wl::before { content:""; position:fixed; inset:0; pointer-events:none;   /* V44: soft darkening towards the edges instead of a flat layer */
  background:radial-gradient(ellipse 70% 75% at 50% 50%, rgba(30,19,11,.18) 0%, rgba(30,19,11,.38) 55%, rgba(20,12,6,.78) 100%); }
.wl { isolation:isolate; }
.wl > video.wl-bg { position:fixed; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.wl.open > video.wl-bg { animation:wl-push 24s ease-in-out infinite alternate; }   /* V44: a very slow push in */
@keyframes wl-push { from { transform:scale(1); } to { transform:scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .wl.open > video.wl-bg { animation:none; } }   /* V42: blurred typing video behind everything */
.wl.open { opacity:1; visibility:visible; transition:opacity .35s ease; }
.wl > * { position:relative; }
:where(.wl) button { all:unset; cursor:pointer; box-sizing:border-box; }   /* :where keeps this weaker than the button styles below */
.wl em { font-style:normal; }
.wl :focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* top bar: back + wordmark | progress | close */
.wl-bar { display:grid; grid-template-columns:220px 1fr 220px; align-items:center; padding:24px 34px; flex:none; }
.wl-left { display:flex; align-items:center; gap:16px; }
.wl-mark { font-family:'Funnel Display', Inter, sans-serif; font-weight:340; font-size:25px; letter-spacing:-.06em; line-height:1; }
.wl-round { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .2s, opacity .2s; }
.wl-round:hover { background:rgba(255,255,255,.26); }
.wl-round[disabled] { opacity:0; pointer-events:none; }
.wl-round svg { width:18px; height:18px; }
.wl-close { justify-self:end; }
.wl-prog { display:flex; gap:8px; justify-content:center; }
.wl-seg { width:140px; display:flex; flex-direction:column; gap:7px; }
.wl-track { height:3px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden; }
.wl-fill { height:100%; width:0; background:#fff; border-radius:99px; transition:width .5s cubic-bezier(.22,1,.36,1); }
.wl-seg span { font-size:14px; font-weight:300; letter-spacing:-.02em; color:rgba(255,255,255,.55); transition:color .3s; }
.wl-seg.on span { color:#fff; }

/* body + screens */
.wl-body { flex:1; display:grid; place-items:center; padding:0 24px 40px; }
.wl-screen { width:100%; display:flex; justify-content:center; animation:wl-in .45s cubic-bezier(.22,1,.36,1) backwards; }   /* V44: 'backwards', not 'both': a held animation stops the card frosting what is behind it */
.wl-screen.back { animation-name:wl-in-back; }
@keyframes wl-in { from { opacity:0; transform:translateY(14px); } }
@keyframes wl-in-back { from { opacity:0; transform:translateY(-14px); } }

.wl-panel { width:560px; max-width:100%; display:flex; flex-direction:column; gap:24px; padding:32px 32px 28px; border-radius:24px;
  background:rgba(30,19,11,.34); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 30px 80px rgba(0,0,0,.3);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); }
.wl-panel.wide { width:600px; }
.wl-h { font-weight:500; font-size:36px; line-height:1.02; letter-spacing:-.064em; }
.wl-help { margin-top:8px; font-size:17px; font-weight:300; letter-spacing:-.024em; color:rgba(255,255,255,.7); }

/* answers */
.wl-answers { display:flex; flex-direction:column; gap:8px; }
.wl-ans { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 20px; border-radius:999px; font-size:16px; letter-spacing:-.019em;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); transition:background .2s, color .2s, box-shadow .2s; }
.wl-ans:hover { background:rgba(255,255,255,.18); }
.wl-ans .wl-radio { flex:none; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); display:grid; place-items:center; transition:background .2s, box-shadow .2s; }
.wl-ans .wl-radio svg { width:11px; height:11px; opacity:0; }
.wl-ans.on { background:#fff; color:#1E130B; font-weight:500; box-shadow:inset 0 0 0 1px #fff; }
.wl-ans.on .wl-radio { background:#1E130B; box-shadow:none; }
.wl-ans.on .wl-radio svg { opacity:1; }
.wl-foot { display:flex; flex-direction:column; align-items:center; gap:8px; }
.wl-hint { font-size:13px; font-weight:300; color:rgba(255,255,255,.6); }
.wl-link { font-size:14px; font-weight:300; color:rgba(255,255,255,.75); text-decoration:underline; text-underline-offset:3px; }
.wl-link:hover { color:#fff; }

/* buttons */
.wl-btn { display:flex; align-items:center; justify-content:center; height:52px; padding:0 30px; border-radius:999px; background:#fff; color:#1E130B;
  font-size:16px; font-weight:600; letter-spacing:-.019em; transition:background .2s, transform .2s; }
.wl-btn:hover { background:#F3EDE5; }
.wl-btn:active { transform:scale(.985); }
.wl-btn.full { width:100%; }

/* demo screen */
.wl-demo { width:min(1248px, 100%); display:flex; align-items:center; justify-content:space-between; gap:64px; padding:0 72px 16px; }
.wl-copy { width:440px; flex:none; display:flex; flex-direction:column; gap:20px; }
.wl-chip { align-self:flex-start; padding:6px 13px; border-radius:999px; font-size:13px; font-weight:300; color:rgba(255,255,255,.8); background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.wl-big { font-weight:500; font-size:46px; line-height:1; letter-spacing:-.065em; }
.wl-sub { font-size:19px; font-weight:300; line-height:1.4; letter-spacing:-.026em; color:rgba(255,255,255,.8); }
.wl-copy .wl-btn { margin-top:8px; }
.wl-stage { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.wl-cap { font-size:13px; font-weight:300; color:rgba(255,255,255,.65); }

/* email screen */
.wl-rows > div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.18); font-size:15px; }
.wl-rows span { font-weight:300; color:rgba(255,255,255,.7); }
.wl-rows b { font-weight:500; text-align:right; }
.wl-see { display:flex; flex-direction:column; gap:10px; }
.wl-see > p { font-size:14px; font-weight:500; }
.wl-see > p span { font-weight:300; color:rgba(255,255,255,.6); }
.wl-opts { display:flex; flex-wrap:wrap; gap:8px; }
.wl-opt { padding:8px 14px; border-radius:999px; font-size:14px; letter-spacing:-.01em; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); transition:background .2s, color .2s; }
.wl-opt:hover { background:rgba(255,255,255,.18); }
.wl-opt[aria-pressed="true"] { background:#fff; color:#1E130B; font-weight:500; }
.wl-form { display:flex; flex-direction:column; gap:12px; padding-top:4px; }
.wl-form h3 { font-weight:500; font-size:20px; letter-spacing:-.035em; }
.wl-form label { font-size:14px; font-weight:500; }
.wl-form label span { font-weight:300; color:rgba(255,255,255,.6); }   /* homefig.com: optional first + last name, styled like the see-first question */
.wl-names { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wl-names > div { display:flex; flex-direction:column; gap:12px; min-width:0; }
.wl-input { all:unset; box-sizing:border-box; width:100%; height:50px; padding:0 20px; border-radius:999px; font-size:16px; color:#fff;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); transition:box-shadow .2s, background .2s; }
.wl-input::placeholder { color:rgba(255,255,255,.5); font-weight:300; }
.wl-input:focus { box-shadow:inset 0 0 0 1.5px #fff; }
.wl-form.err #wlEmail { background:rgba(229,72,77,.12); box-shadow:inset 0 0 0 1.5px #FF8A80; }
.wl-err { display:none; align-items:center; gap:6px; font-size:13.5px; color:#FFB4AC; }
.wl-err svg { width:14px; height:14px; flex:none; }
.wl-form.err .wl-err { display:flex; }
.wl-note { font-size:12.5px; font-weight:300; line-height:1.4; color:rgba(255,255,255,.6); }
.wl-note a { color:rgba(255,255,255,.85); }

/* confirmation */
.wl-done { width:520px; align-items:center; text-align:center; gap:18px; padding:44px 40px 36px; }
.wl-check { width:60px; height:60px; border-radius:50%; background:#fff; color:#1E130B; display:grid; place-items:center; animation:wl-pop .6s cubic-bezier(.34,1.56,.64,1) .1s both; }
.wl-check svg { width:26px; height:26px; }
@keyframes wl-pop { from { transform:scale(.4); opacity:0; } }
.wl-done .wl-h { font-size:40px; }
.wl-done p { font-size:17px; font-weight:300; line-height:1.5; color:rgba(255,255,255,.8); }
.wl-done .wl-btn { margin-top:6px; }

/* ---------- custom examples (one per answer) ---------- */
.wl-ex { position:relative; container-type:inline-size; --fs:clamp(11px, 1.95cqw, 14px); font-size:var(--fs); color:#1E130B; }
.wl-card { position:relative; border-radius:20px; overflow:hidden; background:#F4EFE8; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.wl-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.wl-pop { opacity:0; transform:translateY(10px) scale(.94); transition:opacity .35s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
.wl-fade { opacity:0; transition:opacity .8s ease; }
.wl-ex.s1 .a1, .wl-ex.s2 .a2, .wl-ex.s3 .a3, .wl-ex.s4 .a4 { opacity:1; transform:none; }   /* steps are cumulative: s1 s2 s3 … */
.wl-bubble { position:absolute; z-index:3; padding:12px 16px; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.wl-bubble small { display:block; font-size:.82em; font-weight:500; color:rgba(30,19,11,.5); margin-bottom:3px; }
.wl-bubble b { font-weight:500; font-size:1.15em; letter-spacing:-.02em; }
.wl-tag { position:absolute; z-index:2; display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:rgba(30,19,11,.8); color:#fff; font-size:.9em;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); white-space:nowrap; }
.wl-tag svg { width:13px; height:13px; }
.wl-num { font-variant-numeric:tabular-nums; }

/* E1 client feedback: editor card with finishes and the total */
.ex-fb { padding-top:40px; }
.ex-fb .wl-card { display:grid; grid-template-columns:1fr 32%; aspect-ratio:720/420; }
.ex-fb .view { position:relative; }
.ex-fb .side { padding:24px 20px; display:flex; flex-direction:column; gap:14px; }
.ex-fb .side > p { font-weight:500; font-size:.95em; }
.ex-fb .sw { display:flex; flex-direction:column; gap:6px; }
.ex-fb .sw div { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:12px; box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow .35s, background .35s; }
.ex-fb .sw i { width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(30,19,11,.15); flex:none; }
.ex-fb .sw .sel { background:#fff; box-shadow:inset 0 0 0 1.5px #1E130B; font-weight:500; }
.ex-fb .total { margin-top:auto; padding-top:14px; border-top:1px solid rgba(30,19,11,.12); }
.ex-fb .total small { display:block; font-size:.9em; font-weight:300; color:rgba(30,19,11,.6); }
.ex-fb .total .now { display:flex; align-items:baseline; gap:8px; margin-top:4px; }
.ex-fb .total s { color:rgba(30,19,11,.4); font-weight:300; opacity:0; transition:opacity .3s; }
.ex-fb .total b { font-size:1.6em; font-weight:600; letter-spacing:-.03em; }
.ex-fb .delta { font-size:.9em; font-weight:500; color:#3F7A4E; }
.ex-fb.s3 .total s { opacity:1; }
.ex-fb .wl-bubble { left:-3%; top:0; }
.ex-fb .wl-tag { right:3%; bottom:4%; }

/* E2 first layout: measurements become a plan (drawn, dark like the film) */
.ex-lay .wl-card { aspect-ratio:720/440; background:#171512; }
.ex-lay svg { position:absolute; inset:0; width:100%; height:100%; }
.ex-lay .wall { fill:none; stroke:#F4F1EC; stroke-width:6; stroke-linecap:square; stroke-dasharray:1700; stroke-dashoffset:1700; transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1); }
.ex-lay.s1 .wall { stroke-dashoffset:0; }
.ex-lay .grid { stroke:#2A2724; stroke-width:1; }
.ex-lay .cab { fill:#2B2620; stroke:#BDB7AF; stroke-width:1.5; opacity:0; transform:translateY(-6px); transform-box:fill-box; transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.ex-lay .cab.isl { fill:#3A3128; }
.ex-lay.s3 .cab { opacity:1; transform:none; }
.ex-lay .dimp { position:absolute; transform:translate(-50%,-50%); padding:3px 8px; border-radius:5px; background:#262626; border:1px solid #3A3A3A; color:#EDE9E3; font-size:.85em; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ex-lay .wl-tag { left:50%; bottom:5%; transform:translateX(-50%); background:#F26A00; color:#1E130B; font-weight:600; }
.ex-lay .wl-tag.wl-pop { transform:translate(-50%,10px) scale(.94); }
.ex-lay.s4 .wl-tag.wl-pop { transform:translateX(-50%); }

/* E3 products and prices: the quote updates when a product is swapped */
.ex-pr .wl-card { display:grid; grid-template-columns:42% 1fr; aspect-ratio:720/420; }
.ex-pr .view { position:relative; }
.ex-pr .quote { padding:22px 22px 18px; display:flex; flex-direction:column; }
.ex-pr .quote > p { font-weight:500; font-size:.95em; margin-bottom:8px; }
.ex-pr .row { position:relative; display:flex; justify-content:space-between; gap:10px; padding:10px 8px; border-top:1px solid rgba(30,19,11,.1); border-radius:8px; transition:background .35s; }
.ex-pr .row span { color:rgba(30,19,11,.6); font-weight:300; }
.ex-pr .row em { font-style:normal; font-weight:400; color:#1E130B; }
.ex-pr .row b { font-weight:500; font-variant-numeric:tabular-nums; }
.ex-pr.s1 .row.hot { background:rgba(242,106,0,.12); }
.ex-pr .menu { position:absolute; right:8px; top:calc(100% + 4px); z-index:2; width:68%; padding:6px; border-radius:12px; background:#fff; box-shadow:0 14px 34px rgba(30,19,11,.22); }
.ex-pr .menu div { display:flex; justify-content:space-between; padding:7px 9px; border-radius:8px; }
.ex-pr .menu div.pick { background:#F4EFE8; font-weight:500; }
.ex-pr.s3 .menu { opacity:0; transform:translateY(-4px); pointer-events:none; }
.ex-pr .tot { margin-top:auto; display:flex; justify-content:space-between; align-items:baseline; padding:12px 8px 0; border-top:1px solid rgba(30,19,11,.2); }
.ex-pr .tot b { font-size:1.5em; font-weight:600; letter-spacing:-.03em; }
.ex-pr .tot .delta { margin-left:8px; font-size:.9em; font-weight:500; color:#3F7A4E; }

/* E4 drawings and quotes: both come out of the same kitchen */
.ex-dq { aspect-ratio:720/440; }
.ex-dq .wl-card { position:absolute; }
.ex-dq .k { left:0; top:6%; width:52%; height:88%; }
.ex-dq .d, .ex-dq .q { left:58%; width:42%; opacity:0; transform:translateX(-40px) scale(.96); transition:opacity .4s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.ex-dq .d { top:0; height:52%; background:#fff; }
.ex-dq .q { top:56%; height:44%; padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.ex-dq.s1 .d, .ex-dq.s2 .q { opacity:1; transform:none; }
.ex-dq .d img { object-fit:contain; padding:8px; }
.ex-dq .lbl { position:absolute; left:10px; bottom:10px; z-index:2; padding:4px 9px; border-radius:999px; background:#1E130B; color:#fff; font-size:.82em; font-weight:500; }
.ex-dq .q > div { display:flex; justify-content:space-between; font-size:.92em; }
.ex-dq .q > div span { color:rgba(30,19,11,.6); font-weight:300; }
.ex-dq .q .t { margin-top:auto; padding-top:8px; border-top:1px solid rgba(30,19,11,.2); }
.ex-dq .q .t b { font-size:1.3em; font-weight:600; }
.ex-dq .link { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.ex-dq .link path { fill:none; stroke:rgba(255,255,255,.55); stroke-width:1.5; stroke-dasharray:4 5; opacity:0; transition:opacity .5s; }
.ex-dq.s1 .link .p1, .ex-dq.s2 .link .p2 { opacity:1; }

/* E5 client deciding: two options side by side, the client picks one */
.ex-dc { padding-top:74px; }
.ex-dc .opts { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ex-dc .wl-card { aspect-ratio:4/3.3; transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s, box-shadow .4s; }
.ex-dc .wl-card .meta { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:12px 14px; background:#F4EFE8; display:flex; justify-content:space-between; align-items:baseline; }
.ex-dc .meta span { font-weight:500; }
.ex-dc .meta b { font-weight:600; font-variant-numeric:tabular-nums; }
.ex-dc .wl-card .wl-img { height:calc(100% - 44px); }
.ex-dc .letter { position:absolute; left:10px; top:10px; z-index:2; width:26px; height:26px; border-radius:50%; background:#fff; display:grid; place-items:center; font-weight:600; font-size:.9em; }
.ex-dc.s2 .a-opt { opacity:.45; transform:scale(.97); }
.ex-dc.s2 .b-opt { transform:translateY(-6px); box-shadow:0 0 0 2.5px #fff, 0 30px 70px rgba(0,0,0,.45); }
.ex-dc .chosen { right:10px; top:10px; }
.ex-dc .wl-bubble { right:4%; top:0; }

/* E6 overview + E8 student: one kitchen, step by step */
.ex-ov .tabs { display:flex; gap:6px; margin-bottom:12px; }
.ex-ov .tabs span { padding:7px 14px; border-radius:999px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:background .3s, color .3s; font-size:.95em; }
.ex-ov .tabs span.on { background:#fff; color:#1E130B; font-weight:500; }
.ex-ov .wl-card { aspect-ratio:720/420; background:#171512; }
.ex-ov .wl-img { opacity:0; transition:opacity .7s ease; }
.ex-ov .wl-img.on { opacity:1; }
.ex-ov .wl-img.contain { object-fit:contain; background:#fff; }

/* E7 manufacturers: their range, placed in a designer's kitchen */
.ex-mk { display:grid; grid-template-columns:30% 1fr; gap:14px; aspect-ratio:720/420; }
.ex-mk .range { padding:18px 16px; display:flex; flex-direction:column; gap:10px; }
.ex-mk .range > p { font-weight:500; font-size:.95em; }
.ex-mk .range > p span { display:block; font-weight:300; color:rgba(30,19,11,.55); font-size:.9em; margin-top:2px; }
.ex-mk .door { display:flex; align-items:center; gap:10px; padding:7px; border-radius:12px; transition:background .35s, box-shadow .35s; }
.ex-mk .door i { width:34px; height:48px; border-radius:3px; flex:none; box-shadow:inset 0 0 0 1px rgba(30,19,11,.18); }
.ex-mk .door .shaker { background:#C49A6C; box-shadow:inset 0 0 0 5px #B98C5D, inset 0 0 0 6px rgba(30,19,11,.18); }
.ex-mk .door .slab { background:linear-gradient(180deg,#6B4A33,#4E3322); }
.ex-mk .door .fluted { background:repeating-linear-gradient(90deg,#8E9B86 0 4px,#7D8A76 4px 6px); }
.ex-mk .door small { display:block; color:rgba(30,19,11,.55); font-weight:300; }
.ex-mk.s1 .door.pick { background:#fff; box-shadow:inset 0 0 0 1.5px #1E130B; }
.ex-mk .pin { right:4%; bottom:5%; }

.wl-demo .wl-next { display:none; }

/* demo screen: side by side down to tablets, then stacked */
@media (max-width: 1100px) {
  .wl-demo { flex-direction:column; align-items:stretch; gap:28px; padding:8px 0 24px; max-width:720px; }
  .wl-copy { width:auto; }
}
/* phones (pen "Waitlist V5 phone"): no panel, content from the top, rounder answers */
@media (max-width: 640px) {
  .wl-bar { grid-template-columns:auto 1fr auto; padding:14px 20px 10px; gap:0; }
  .wl-left { display:contents; }
  .wl-mark { justify-self:center; grid-column:2; grid-row:1; font-size:22px; }
  .wl-left .wl-round { grid-column:1; grid-row:1; }
  .wl-round { width:36px; height:36px; }
  .wl-close { grid-column:3; grid-row:1; }
  .wl-prog { grid-column:1 / -1; grid-row:2; gap:6px; margin-top:14px; }
  .wl-seg { flex:1; width:auto; }
  .wl-seg span { display:none; }
  .wl-body { place-items:start stretch; padding:0 20px 28px; }
  .wl-screen { justify-content:stretch; }
  .wl-panel, .wl-panel.wide, .wl-done { width:100%; padding:28px 0 0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; gap:22px; }
  .wl-h { font-size:30px; letter-spacing:-.06em; line-height:1.05; }
  .wl-help { font-size:16px; }
  .wl-ans { border-radius:16px; padding:15px 18px; font-size:15.5px; line-height:1.25; min-height:52px; }
  .wl-hint { display:none; }
  .wl-demo { padding-top:24px; gap:18px; }
  .wl-copy { gap:14px; }
  .wl-big { font-size:30px; letter-spacing:-.06em; line-height:1.05; }
  .wl-sub { font-size:16px; }
  .wl-copy .wl-btn { display:none; }
  .wl-demo .wl-next { display:flex; margin-top:6px; }
  .wl-done { padding-top:18vh; }
  .wl-done .wl-h { font-size:32px; }
  .wl-done p { font-size:16px; }
  .wl-done .wl-btn { width:100%; }
  .wl-rows > div { font-size:14px; padding:10px 0; }
  /* examples become a little simpler */
  .ex-fb { padding-top:44px; }
  .ex-fb .wl-card { grid-template-columns:1fr; aspect-ratio:auto; }
  .ex-fb .view { aspect-ratio:16/10; }
  .ex-fb .side { padding:14px 14px; gap:10px; display:grid; grid-template-columns:1fr auto; align-items:end; }
  .ex-fb .side > p { display:none; }
  .ex-fb .sw { flex-direction:row; gap:4px; }
  .ex-fb .sw div { padding:5px; }
  .ex-fb .sw div em { display:none; }
  .ex-fb .total { margin:0; padding:0; border:0; text-align:right; }
  .ex-pr .wl-card { grid-template-columns:1fr; aspect-ratio:auto; }
  .ex-pr .view { aspect-ratio:16/7; }
  .ex-pr .quote { padding:14px; }
  .ex-dq { aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .ex-dq .wl-card { position:relative; inset:auto; width:auto; height:auto; }
  .ex-dq .k { grid-column:1 / -1; aspect-ratio:16/9; top:0; }
  .ex-dq .d, .ex-dq .q { left:auto; top:auto; height:auto; aspect-ratio:1.1; transform:translateY(-16px) scale(.96); }
  .ex-dq .link { display:none; }
  .ex-dc { padding-top:70px; }
  .ex-dc .opts { gap:10px; }
  .ex-dc .wl-card .meta { flex-direction:column; gap:2px; padding:8px 10px; }
  .ex-dc .wl-card .wl-img { height:calc(100% - 52px); }
  .ex-mk { grid-template-columns:1fr; aspect-ratio:auto; }
  .ex-mk .kit { aspect-ratio:16/10; }
  .ex-mk .range { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:12px; }
  .ex-mk .range > p { grid-column:1 / -1; }
  .ex-mk .door { flex-direction:column; align-items:flex-start; gap:6px; }
}
.wl-noscroll { overflow:hidden !important; }
@media (prefers-reduced-motion: reduce) {
  .wl, .wl-screen, .wl-fill, .wl-check, .wl-pop, .wl-fade, .wl-ex *, .wl-ex { transition:none !important; animation:none !important; }
}

/* V47: the V45 side layout is gone again: questions centred in the frosted card, as before. */

/* V46: intro. Over the video, one large line fades in where the questions will be, then lifts away as they rise in. */
.wl-intro { position:fixed; left:24px; right:24px; top:50%; margin:0; text-align:center; font-size:clamp(44px,4.4vw,72px); font-weight:500; line-height:.98; letter-spacing:-.06em;
  opacity:0; transform:translateY(-40%); pointer-events:none; z-index:1; }
.wl.wl-introing .wl-intro { opacity:1; transform:translateY(-50%); transition:opacity .9s ease .25s, transform 1s cubic-bezier(.22,1,.36,1) .25s; }   /* V48: transitions, not an animation, so the fade-out starts from where it is */
.wl.wl-introing.wl-outroing .wl-intro { opacity:0; transform:translateY(-62%); transition:opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.wl-body, .wl-prog, .wl-back { transition:opacity .55s ease .1s, transform .65s cubic-bezier(.22,1,.36,1) .1s; }
.wl.wl-introing:not(.wl-outroing) .wl-body { opacity:0; transform:translateY(24px); }
.wl.wl-introing:not(.wl-outroing) .wl-prog, .wl.wl-introing:not(.wl-outroing) .wl-back { opacity:0; }
@media (max-width: 640px) { .wl-intro { left:20px; right:20px; font-size:44px; } }
@media (prefers-reduced-motion: reduce) { .wl-intro { display:none; } }
/* V58: when the waitlist opens, the questions start hidden (no fade-out flash); they only animate in after the intro line */
.wl.wl-introing:not(.wl-outroing) .wl-body, .wl.wl-introing:not(.wl-outroing) .wl-prog, .wl.wl-introing:not(.wl-outroing) .wl-back { transition:none; }