/* Launch 24 wizard (ulaz A). Visual language = live L24 landing (tokens-v3). Prefix l24w-.
   No frames or outlines on choices (owner 2026-10-08): selection = tone, check, dot, underline. */
/* theme: .sw-l24{overflow:hidden} (launch24-v5.css) makes the landing a scroll container and kills position:sticky; clip keeps the clipping without that (verified live 2026-10-08) */
.sw-l24:has(.l24w){overflow:clip}
.l24w{--paper:#F2EEE3;--bone:#F8F5EC;--sand:#E8E1CF;--ink:#14110E;--ink2:#2A2622;--warm:#6E6860;--rule:#D8D1BF;--rule2:#B8B0A0;--clay:#C8553D;--ochre:#E2A03F;--leaf:#2F6A4E;--pool:#2E78B0;--tint:#ECE5D3;
  --display:"strongwebregular",Archivo,"Helvetica Neue",Arial,sans-serif;--sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;--serif:"Instrument Serif",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  background:var(--sand);color:var(--ink);font:400 16px/1.5 var(--sans);padding-block:72px}
.l24w *{box-sizing:border-box}
:where(.l24w) :is(h2,h3,p,ul,ol,fieldset,legend){margin:0;padding:0}
.l24w fieldset{border:0;min-inline-size:0}
:where(.l24w) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.l24w :focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.l24w-lbl{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.l24w-grid{width:min(1240px,100% - 64px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:40px;align-items:start}

/* sketch (left, floating on the section background) */
.l24w-sketch{position:sticky;top:calc(var(--l24w-top,0px) + 24px);display:grid;gap:12px}
.l24w-sketch .l24w-lbl{color:var(--warm)}
.l24w-browser{background:#fff;box-shadow:0 30px 60px -30px rgba(20,17,14,.55),0 2px 6px rgba(20,17,14,.08)}
.l24w-bar{display:flex;gap:6px;align-items:center;padding:8px 10px;background:#efe9dc}
.l24w-bar i{width:8px;height:8px;border-radius:50%;background:var(--rule2)}
.l24w-url{flex:1;margin-inline-start:8px;padding:4px 10px;background:var(--bone);font:12px var(--mono);color:var(--warm);overflow:clip;white-space:nowrap;text-overflow:ellipsis}
.l24w-shot{position:relative}
.l24w-shot img{display:block;width:100%;height:auto;aspect-ratio:640/440;object-fit:cover}
.l24w-logo{position:absolute;inset-inline-start:3%;inset-block-start:3%;max-width:62%;padding:5px 9px;background:#fff;color:var(--ink);font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;overflow:clip;white-space:nowrap;text-overflow:ellipsis}
.l24w-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border-block-start:1px solid #efe9dc;font-size:12.5px}
.l24w-strip b{font-weight:600}
.l24w-chip{background:var(--clay);color:#fff;font:500 10.5px var(--mono);padding:3px 7px;white-space:nowrap}
.l24w-note{font-size:12.5px;color:var(--warm)}
.l24w-sketch-toggle{display:none}

/* step card (right) */
.l24w-card{background:var(--bone);padding:30px 34px 26px;display:grid;grid-template-rows:auto 1fr auto;gap:24px;min-height:520px;box-shadow:0 1px 0 rgba(20,17,14,.04),0 18px 40px -28px rgba(20,17,14,.35)}
.l24w-prog{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.l24w-line{height:2px;background:var(--rule)}
.l24w-line i{display:block;height:2px;background:var(--clay)}
.l24w-body{display:grid;gap:18px;align-content:start}
.l24w-h{scroll-margin-block-start:calc(var(--l24w-top,0px) + 24px);font:400 clamp(28px,3vw,38px)/1.08 var(--display);letter-spacing:-.01em}
.l24w-h em{font:italic 1.06em/1 var(--serif);color:var(--clay)}
.l24w-lead{color:var(--warm);max-inline-size:58ch}
.l24w-tip{font-size:14px;color:var(--ink2)}
.l24w-tip b{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warm);margin-inline-end:8px}
.l24w-foot{display:flex;justify-content:space-between;align-items:center;gap:16px}
.l24w-back{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--warm);min-height:44px;padding-inline:4px}
.l24w-next{background:var(--ink);color:var(--paper);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;min-height:46px;padding:0 22px}
.l24w-next:disabled{opacity:.35;cursor:not-allowed}
.l24w-next:active:not(:disabled),.l24w-opt:active,.l24w-dir:active,.l24w-pal:active{transform:scale(.98)}

/* choices without frames */
.l24w-opts{display:grid}
.l24w-opt{display:grid;gap:2px;text-align:start;padding:14px 16px;border-radius:2px;min-height:44px}
.l24w-opt + .l24w-opt{border-block-start:1px solid #e6dfcf}
.l24w-opt b{font:400 21px/1.2 var(--display)}
.l24w-opt span{font-size:14px;color:var(--warm)}
.l24w-opt[aria-checked=true]{background:var(--tint)}
.l24w-opt[aria-checked=true] b::after{content:"  \2713";color:var(--clay);font:500 13px var(--mono)}
.l24w-other{justify-self:start;font-size:14px;color:var(--warm);text-decoration:underline;text-underline-offset:4px;min-height:44px}
.l24w-field{display:grid;gap:6px}
.l24w-field label{color:var(--warm)}
.l24w-field input{border:0;border-block-end:1px solid var(--rule2);background:transparent;padding:8px 0;font:400 24px var(--display);color:var(--ink);min-height:48px;border-radius:0}
.l24w-field input::placeholder{color:#b9b2a5}
.l24w-field input:focus-visible{outline:2px solid transparent;outline-offset:0;border-block-end:2px solid var(--clay)}
.l24w-field small{font-size:13px;color:var(--warm)}

.l24w-dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.l24w-dir{display:grid;gap:4px;text-align:start}
.l24w-dir img{display:block;inline-size:100%;block-size:auto;aspect-ratio:640/440;object-fit:cover;border-radius:2px;box-shadow:0 10px 24px -18px rgba(0,0,0,.6);opacity:.85}
.l24w-dir[aria-checked=true] img{opacity:1}
.l24w-dir b{font:400 18px var(--display);padding-block-start:6px}
.l24w-dir[aria-checked=true] b::before{content:"\25CF  ";color:var(--clay);font-size:11px}
.l24w-dir span{font-size:12.5px;color:var(--warm);line-height:1.35}
.l24w-pals{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.l24w-pal{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;font-size:13.5px;color:var(--warm)}
.l24w-pal i{inline-size:30px;block-size:30px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--c) 50%);box-shadow:inset 0 0 0 1px rgba(20,17,14,.08)}
.l24w-pal[aria-checked=true]{color:var(--ink)}
.l24w-pal[aria-checked=true] i::after{content:"";position:absolute;inset-inline-start:13px;inset-block-end:0;inline-size:5px;block-size:5px;border-radius:50%;background:var(--ink)}

.l24w-list{display:grid}
.l24w-li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:12px 0;border-block-end:1px solid #e6dfcf;text-align:start;min-height:44px}
.l24w-li .n{font:500 10.5px var(--mono);color:var(--clay)}
.l24w-li b{font:400 19px var(--display)}
.l24w-li small{display:block;color:var(--warm);font-size:13px;line-height:1.35}
.l24w-mark{font:500 11.5px var(--mono);letter-spacing:.04em;white-space:nowrap}
.l24w-li[aria-checked=true] .l24w-mark{color:var(--leaf)}
.l24w-li[aria-checked=false] .l24w-mark{color:var(--warm)}
.l24w-li[aria-disabled=true]{cursor:default}
.l24w-li.studio .l24w-mark{color:var(--pool)}
.l24w-sub{margin-block-start:10px;color:var(--warm)}

.l24w-yn{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:12px 0;border-block-end:1px solid #e6dfcf}
.l24w-yn small{display:block;color:var(--warm);font-size:13px}
.l24w-yn button{min-height:44px;min-width:44px;padding:0 8px;font:500 12px var(--mono);color:var(--warm)}
.l24w-yn button[aria-checked=true]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.l24w-ack{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;cursor:pointer;padding-block:8px}
.l24w-ack input{inline-size:20px;block-size:20px;margin-block-start:2px;accent-color:var(--ink)}
.l24w-nofit{font-size:15px;padding:14px 16px;background:var(--tint)}
.l24w-nofit a{color:var(--ink)}
.l24w-dom{font-size:14px}
.l24w-dom.ok{color:var(--leaf)}.l24w-dom.taken,.l24w-dom.bad{color:var(--clay)}.l24w-dom.wait,.l24w-dom.unknown{color:var(--warm)}
.l24w-check{justify-self:start;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;min-height:44px;text-decoration:underline;text-underline-offset:5px}

.l24w-pack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.l24w-och{background:var(--ochre);padding:20px;display:grid;gap:6px;align-content:start}
.l24w-och .p{font:400 54px/1 var(--display)}
.l24w-och small{font-size:13px}
.l24w-pts{background:var(--ink);color:var(--paper);padding:20px;display:grid;gap:7px;font-size:13.5px;list-style:none}
.l24w-pts li span{color:#d9c79f}
.l24w-pts li.later{color:#b9b2a5}
.l24w-after{font-size:13.5px;color:var(--warm)}

@media (hover:hover) and (pointer:fine){
  .l24w-opt:hover{background:#f1ebdd}
  .l24w-opt[aria-checked=true]:hover{background:var(--tint)}
  .l24w-dir:hover img{opacity:1}
  .l24w-next:hover:not(:disabled){background:#2a2622}
  .l24w-back:hover,.l24w-other:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:no-preference){
  .l24w-line i{transition:inline-size .3s ease-out}
  .l24w-next,.l24w-opt,.l24w-dir,.l24w-pal{transition:transform 120ms ease-out,background-color 150ms ease-out}
}
@media (prefers-reduced-motion:reduce){.l24w-line i{transition:none}}

@media (max-width:900px){
  .l24w{padding-block:0 40px}
  .l24w-grid{grid-template-columns:1fr;gap:0;width:100%}
  .l24w-h{scroll-margin-block-start:calc(var(--l24w-top,0px) + 76px)}
  .l24w-sketch{position:sticky;top:var(--l24w-top,0px);z-index:5;background:var(--bone);gap:0;border-block-end:1px solid #e6dfcf}
  .l24w-sketch > .l24w-lbl,.l24w-sketch > .l24w-note{display:none}
  .l24w-sketch-toggle{display:flex;align-items:center;gap:12px;inline-size:100%;padding:10px 16px;min-height:56px;text-align:start}
  .l24w-sketch-toggle img{inline-size:58px;block-size:40px;object-fit:cover}
  .l24w-sketch-toggle b{font:400 17px var(--display);display:block}
  .l24w-sketch-toggle small{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warm)}
  .l24w-sketch .l24w-browser{display:none;margin:0 16px 14px}
  .l24w-sketch[data-open] .l24w-browser{display:block}
  .l24w-card{min-height:0;padding:22px 16px 18px;box-shadow:none}
  .l24w-dirs{grid-template-columns:1fr}
  .l24w-dir{grid-template-columns:120px minmax(0,1fr);column-gap:12px;align-items:center}
  .l24w-dir img{grid-row:span 2}
  .l24w-pack{grid-template-columns:1fr}
  .l24w-foot{position:sticky;bottom:0;background:var(--bone);padding-block:10px;margin-inline:-16px;padding-inline:16px;border-block-start:1px solid #e6dfcf}
}
