/* The first-run walkthrough (public/welcome.js): the poster wall. Full-bleed colour, one huge overprinted word, a cream card.
   Square everywhere (nothing tilts), the halftone clear of words and controls, fits 375x667 with no scroll. */
.wl{--wl-blue:#0A5AA8;--wl-orange:#FF6C2F;--wl-navy:#10213F;--wl-cream:#EFEBE1;--wl-ink2:#46526A;--wl-stub:#E4DED0;--wl-blue-soft:rgba(10,90,168,.25);--wl-night:#121314;--wl-yellow:#FFDD00;
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--wl-bg,var(--wl-blue));color:var(--wl-ink,var(--wl-cream));font-family:Onest,"Helvetica Neue",Arial,sans-serif;overflow:hidden;isolation:isolate;overscroll-behavior:none;touch-action:pan-y;transition:background-color .3s ease}
.wl::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:multiply;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
.wl-top{flex:none;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 0;min-height:44px;position:relative;z-index:2}
.wl-brand,.wl-count{font:700 11px Unbounded,"Arial Black",sans-serif;letter-spacing:.14em}
.wl-link{min-height:44px;min-width:44px;padding:0 6px;border:0;background:none;color:inherit;font:600 15px Onest,sans-serif;cursor:pointer;opacity:.9}
.wl-step{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
/* the halftone: upper right, above the word, never under the top row or the words */
.wl-dots{position:absolute;right:-110px;top:2%;width:min(300px,72vw);height:min(300px,72vw);max-height:44vh;max-width:44vh;border-radius:50%;z-index:-1;pointer-events:none;background-image:radial-gradient(var(--wl-dot) 3px,transparent 3.5px);background-size:12px 12px}
.wl-word{padding:0 18px;font:900 min(22vw,11vh,96px)/.86 Unbounded,"Arial Black",sans-serif;letter-spacing:-.045em;text-transform:uppercase;text-shadow:5px 4px 0 var(--wl-shadow);overflow-wrap:normal;word-break:keep-all}
.wl-step[data-step="3"] .wl-word{font-size:min(18.5vw,10vh,78px)}
.wl-card{margin:min(22px,3vh) 14px calc(env(safe-area-inset-bottom,0px) + 18px);background:var(--wl-cream);color:var(--wl-navy);padding:20px 18px 16px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.wl-card h2{margin:0;font:900 20px/1.1 Unbounded,"Arial Black",sans-serif;color:var(--wl-blue);letter-spacing:-.01em}
.wl-card p{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--wl-ink2)}
.wl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.wl-pips{display:flex;gap:6px}.wl-pips i{width:8px;height:8px;border-radius:50%;background:var(--wl-blue-soft)}.wl-pips i.on{width:26px;border-radius:4px;background:var(--wl-blue)}
.wl-next{min-height:52px;padding:0 22px;border:0;background:var(--wl-orange);color:var(--wl-navy);font:900 15px Unbounded,"Arial Black",sans-serif;letter-spacing:.02em;box-shadow:3px 3px 0 var(--wl-blue);cursor:pointer}
.wl-next:active{transform:translate(2px,2px) scale(.97);box-shadow:1px 1px 0 var(--wl-blue)}
.wl-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.wl-chip{min-height:54px;border:3px solid transparent;display:flex;align-items:flex-end;padding:6px;font:700 9px Unbounded,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:var(--pk-a);color:var(--pk-page)}
.wl-chip[data-design=night]{background:var(--wl-night);color:var(--wl-yellow)}
.wl-chip[aria-checked=true]{border-color:var(--wl-navy);outline:2px solid var(--wl-cream);outline-offset:-5px}
/* the last step: their own front, square, in the colourway being tried */
.wl-step.last{justify-content:space-between}
.wl-prev{margin:min(14px,2vh) 26px 0;flex:1;min-height:0;max-height:52vh;background:var(--pk-page);border-radius:22px;padding:14px;box-shadow:0 20px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:8px;overflow:hidden}
.wl-pv-sw{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--pk-line);height:24px;flex:none}.wl-pv-sw i.on{background:var(--pk-a)}
.wl-pv-hero{position:relative;overflow:hidden;flex:none;background:var(--pk-a);color:var(--pk-page);padding:12px;display:flex;flex-direction:column;gap:4px;min-height:96px}
.wl-pv-hero small{font:700 9px Unbounded,sans-serif;letter-spacing:.12em;opacity:.85}.wl-pv-hero b{font:900 22px/.95 Unbounded,sans-serif;position:relative;z-index:1}.wl-pv-hero span{font-size:12px;position:relative;z-index:1}
.wl-pv-dots{position:absolute;right:-30px;bottom:-40px;width:120px;height:120px;border-radius:50%;background-image:radial-gradient(var(--pk-dot) 2.2px,transparent 2.6px);background-size:8px 8px;opacity:.9}
[data-design=night] .wl-pv-hero{background:var(--pk-stub);color:var(--pk-ink)}[data-design=night] .wl-pv-hero b{color:var(--pk-a)}
.wl-pv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:none}
.wl-pv-row span{background:var(--pk-sheet);outline:1.5px solid var(--pk-a);outline-offset:-1.5px;padding:8px;display:flex;flex-direction:column;gap:2px;min-height:56px;justify-content:flex-end}
.wl-pv-row b{font:900 18px Unbounded,sans-serif;color:var(--pk-a)}.wl-pv-row small{font:700 8px Unbounded,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--pk-a)}
.wl-pv-week{display:flex;align-items:center;gap:10px;outline:1.5px solid var(--pk-a);outline-offset:-1.5px;background:var(--pk-sheet);padding:10px;flex:none}
.wl-pv-week small{font:700 8px Unbounded,sans-serif;letter-spacing:.1em;color:var(--pk-a)}
.wl-pv-week span{display:flex;gap:4px}.wl-pv-week i{width:8px;height:10px;background:var(--pk-line)}.wl-pv-week i.on{height:16px;background:var(--pk-btn)}
.wl-step.last .wl-card{margin-top:min(14px,2vh)}
@media (max-height:700px){.wl-card{padding:14px 14px 12px}.wl-card p{font-size:14px}.wl-pv-row span{min-height:44px}.wl-pv-hero{min-height:76px}}
@media (prefers-reduced-motion:reduce){.wl{transition:none}.wl-next:active{transform:none}}
.wl-ground{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;border:2px solid var(--wl-blue)}
.wl-ground button{min-height:44px;border:0;background:transparent;color:var(--wl-blue);font:700 12px Unbounded,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.wl-ground button[aria-checked=true]{background:var(--wl-blue);color:var(--wl-cream)}
.wl-chips{margin-top:8px}
/* the preview in Colour: the colourway's main colour as the ground, cream cards on it */
.wl-prev[data-ground=colour]{background:var(--pk-a)}
.wl-prev[data-ground=colour] .wl-pv-sw{border-color:var(--pk-page)}.wl-prev[data-ground=colour] .wl-pv-sw i.on{background:var(--pk-page)}
.wl-prev[data-ground=colour] .wl-pv-hero{background:var(--pk-sheet);color:var(--pk-a)}
.wl-prev[data-ground=colour] .wl-pv-row span,.wl-prev[data-ground=colour] .wl-pv-week{outline-color:var(--pk-page)}
.wl-prev[data-design=night][data-ground=colour] .wl-pv-hero{background:var(--pk-stub);color:var(--pk-a)}
@media (max-height:700px){.wl-chips .wl-chip{min-height:44px}.wl-ground button{min-height:44px}}