/* Subset WOFF2 — latin + latin-ext (Polish), self-hosted, OFL */
@font-face{font-family:Alegreya;src:url(/assets/fonts/Alegreya-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Alegreya;src:url(/assets/fonts/Alegreya-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:optional}
@font-face{font-family:Alegreya;src:url(/assets/fonts/Alegreya-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Alegreya;src:url(/assets/fonts/Alegreya-ExtraBold.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Alegreya;src:url(/assets/fonts/Alegreya-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:optional}
@font-face{font-family:Alegreya;src:url(/assets/fonts/Alegreya-BoldItalic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:optional}
@font-face{font-family:'Alegreya Sans';src:url(/assets/fonts/AlegreyaSans-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(/assets/fonts/AlegreyaSans-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:optional}
@font-face{font-family:'Alegreya Sans';src:url(/assets/fonts/AlegreyaSans-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(/assets/fonts/AlegreyaSans-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:optional}

/* Hey Rosalie www — wspólna warstwa (warianty A i B). Tokeny 1:1 z ui-ksiazeczka.md §2.1 / §3. */











:root{
  /* light */
  --bg:#F8F5EF; --surface:#FFFDF8; --ink:#2B2A3A; --mute:#5A5C70; --value:#B23C28; --label:#1C7372;
  --strong:#2D478A; --on-strong:#FFF8EA; --sun:#FFBE2E; --coral:#EE6A52; --line:rgba(45,71,138,.14); --focus:#2D478A;
  --line-strong:rgba(45,71,138,.32); --field:#7C84A3;
  /* typografia (fluid; 393 → 1440) */
  --serif:Alegreya, Georgia, serif; --sans:'Alegreya Sans', system-ui, sans-serif;
  --fs-display:clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem);
  --fs-h2:clamp(2rem, 1.35rem + 2.3vw, 3.25rem);
  --fs-h3:clamp(1.375rem, 1.2rem + .55vw, 1.75rem);
  --fs-diary:clamp(1.25rem, 1.08rem + .75vw, 1.875rem);
  --fs-lead:clamp(1.125rem, 1.04rem + .38vw, 1.375rem);
  --fs-body:clamp(1.0625rem, 1.03rem + .12vw, 1.125rem);
  --fs-small:.9375rem; --fs-label:.8125rem;
  --margin:clamp(20px, 6.4vw, 104px); --gutter:clamp(16px, 2vw, 28px); --maxw:1232px;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:clamp(56px, 7vw, 96px); --sp-7:clamp(80px, 11vw, 168px);
}
.pal-night{ --bg:#1C151D; --surface:#2A2029; --ink:#E3C9A8; --mute:#B89D84; --value:#E89A7E; --label:#8FC2B8;
  --strong:#E6B672; --on-strong:#24191D; --line:rgba(255,230,200,.12); --line-strong:rgba(255,230,200,.26); --focus:#E6B672; --field:#8C7A6E; }
.pal-strong{ /* granatowe pasmo (B: Powiedz) */
  --bg:#2D478A; --ink:#FFF8EA; --mute:#D9DCEB; --label:#FFBE2E; --value:#FFF8EA; --line:rgba(255,248,234,.22); --focus:#FFBE2E; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.55 var(--sans);font-kerning:normal;
  -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;text-wrap:balance;font-variant-numeric:lining-nums}
p{margin:0;text-wrap:pretty}
.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--margin));margin:0 auto;padding:0 var(--margin)}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
section, footer{background:var(--bg);color:var(--ink)}

.label{font:700 var(--fs-label)/1.25 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--label)}
.lead{font:400 var(--fs-lead)/1.5 var(--sans);color:var(--ink)}
.mute{color:var(--mute)}
.h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.012em}
.h3{font-size:var(--fs-h3);line-height:1.18}
.diary{font:400 var(--fs-diary)/1.45 var(--serif)}
/* ValueLink — wartości w zdaniu (jak w aplikacji: koralowy 700 + kropkowane podkreślenie) */
.v{font-weight:700;color:var(--value);text-decoration:underline dotted 0.09em;text-underline-offset:.2em;white-space:nowrap}

/* wordmark (SVG z handoff/assets/wordmark-v2) */
.wm{display:block;height:34px;width:auto}

/* ---------- formularz bety ---------- */
.wl{max-width:470px}
.wl-row{display:flex;gap:8px;align-items:stretch}
.wl label.wl-lab{display:block;font:700 var(--fs-label)/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--label);margin:0 0 8px}
.wl input{flex:1;min-width:0;height:56px;padding:0 20px;border-radius:999px;border:1.5px solid var(--field);background:var(--surface);
  color:var(--ink);font:400 1.0625rem/1 var(--sans)}
.wl input::placeholder{color:var(--mute);opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;border:0;
  background:var(--strong);color:var(--on-strong);font:700 1.0625rem/1 var(--sans);white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.btn .mic{color:var(--sun)}
.pal-night .btn .mic{color:var(--on-strong)}
.wl-note{margin-top:12px;font:400 var(--fs-small)/1.45 var(--sans);color:var(--mute)}
.wl-note b{font-weight:700;color:var(--ink)}

/* ---------- ramka telefonu ---------- */
.phone{--w:300px;position:relative;width:var(--w);padding:calc(var(--w)*.032);border-radius:calc(var(--w)*.158);
  background:#1B1A21;box-shadow:inset 0 0 0 1.5px #3A3843, inset 0 0 0 3px #0E0D12,
  0 calc(var(--w)*.1) calc(var(--w)*.16) calc(var(--w)*-.08) rgba(43,30,40,.38), 0 4px 10px -4px rgba(43,30,40,.3)}
.phone img{width:100%;border-radius:calc(var(--w)*.128)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2A2830}
.phone::before{left:-2px;top:22%;height:7%}
.phone::after{right:-2px;top:27%;height:11%}

/* ---------- płytka ilustracji (scena z nierówną krawędzią) ---------- */
.plate{margin:0}
.plate img{width:100%}
.plate figcaption{margin-top:10px;font:italic 400 1.0625rem/1.4 var(--serif);color:var(--mute)}
.plate figcaption b{font:700 var(--fs-label)/1 var(--sans);letter-spacing:.07em;font-style:normal;color:var(--label);margin-right:8px}

/* ---------- karta potwierdzenia głosu (jak w aplikacji, §5.6 pkt 3) ---------- */
.confirm{background:var(--surface);border-radius:24px;padding:22px 22px 20px;box-shadow:0 1px 0 var(--line),0 24px 48px -28px rgba(43,42,58,.35);
  border:1px solid var(--line)}
.confirm .t{font:700 1.4375rem/1.2 var(--serif)}
.confirm .m{font:400 .9375rem/1.4 var(--sans);color:var(--mute);margin-top:4px}
.confirm .row{display:flex;gap:10px;margin-top:18px}
.confirm .b2{flex:1;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:700 1rem/1 var(--sans)}
.confirm .b2.sec{border:1.5px solid var(--strong);color:var(--strong)}
.confirm .b2.pri{background:var(--strong);color:var(--on-strong)}

/* ---------- FAQ ---------- */
.faq details{border-top:1px solid var(--line-strong);padding:0}
.faq details:last-child{border-bottom:1px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:22px 0;font:700 var(--fs-h3)/1.25 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--strong);border-bottom:2px solid var(--strong);
  transform:translateY(-4px) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq details p{padding:0 0 26px;max-width:62ch;color:var(--ink);font:400 var(--fs-body)/1.6 var(--sans)}

/* ---------- stopka ---------- */
.foot{padding:var(--sp-5) 0 var(--sp-5);font:400 var(--fs-small)/1.5 var(--sans);color:var(--mute)}
.foot .row{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;border-top:1px solid var(--line-strong);padding-top:28px}
.foot nav{display:flex;gap:28px}
.foot a{color:var(--ink);text-underline-offset:.2em}
.wl-note a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.icon{width:56px;height:56px;border-radius:13px;box-shadow:0 0 0 1px var(--line)}

@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
.shot .reveal{animation:none!important}

/* oś: osobny rysunek dla wąskich ekranów (czytelne etykiety ≥ 12 px) */
.tl-m{display:none}
.tl-d .drawn-tl,.tl-m .drawn-tl{width:100%;height:auto;display:block}
@media (max-width:900px){.tl-d{display:none}.tl-m{display:block}}

/* Wariant A — „Od rana do nocy” */
.a-top{position:absolute;inset:0 0 auto 0;z-index:3;padding-top:22px}
.a-top-row{display:flex;justify-content:space-between;align-items:center}
.a-top-r{display:flex;gap:20px;align-items:center;font:700 1rem/1 var(--sans)}
.a-top-r a{color:var(--strong);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.28em;padding:12px 0}

.a-scene{position:relative;width:100%;overflow:hidden}
.a-scene img{width:100%;height:auto}

/* hero */
.a-hero{position:relative;padding-bottom:var(--sp-6)}
.a-hero-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:start;margin-top:clamp(20px,2.4vw,40px)}
.a-h1col{grid-column:1 / span 5}
.a-h1col .label{margin-bottom:18px}
.a-hero h1{font-size:var(--fs-display);line-height:.98;letter-spacing:-.022em;color:var(--strong);font-weight:800}
.a-leadcol{grid-column:6 / span 4;padding-top:34px}
.a-leadcol .lead{margin-bottom:28px}
.a-phonecol{grid-column:10 / span 3;position:relative}
.a-phonecol .phone{position:absolute;right:0;bottom:-48px}
.a-phonecol{align-self:end;height:100%}

/* znacznik pory dnia (narracja: przewijanie = upływ doby) */
.a-mark{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:400 1.0625rem/1 var(--sans);color:var(--mute)}
.a-mark b{font:700 1.0625rem/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;margin-right:4px}
.a-mark .glyph{flex:none}

.a-sec{padding:var(--sp-7) 0 0}
.a-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:center}
.a-col-text{grid-column:1 / span 5}
.a-col-art{grid-column:7 / span 6}
.a-grid-rev .a-col-text{grid-column:8 / span 5;grid-row:1}
.a-grid-rev .a-col-art{grid-column:1 / span 6;grid-row:1}
.a-p{margin-top:22px;max-width:34em}
.a-notes{list-style:none;padding:0;margin:32px 0 0;max-width:34em}
.a-notes li{padding:16px 0 16px 0;border-top:1px solid var(--line-strong);font:400 var(--fs-body)/1.55 var(--sans)}
.a-notes li b{font-weight:700}

/* Powiedz */
.a-voice-art{display:flex;flex-direction:column;align-items:flex-start;padding-left:clamp(0px,4vw,64px)}
.a-quote{font:italic 500 clamp(2.25rem,1.4rem + 3vw,4rem)/1.05 var(--serif);color:var(--strong);margin:10px 0 18px;letter-spacing:-.01em}
.a-voice-art .wave{width:min(400px,100%);height:auto;margin-bottom:28px}
.a-voice-art .confirm{width:min(420px,100%)}
.a-say{margin-top:22px}
.a-saybtn{height:64px;padding:0 30px;font-size:1.0625rem;pointer-events:none}

/* Strona dnia */
.a-daypage{background:var(--surface);border-radius:28px;padding:clamp(24px,3.4vw,52px);border:1px solid var(--line)}
.a-big{font:800 clamp(3.5rem,2.4rem + 4vw,6.25rem)/.95 var(--serif);color:var(--strong);margin:6px 0 18px;letter-spacing:-.02em}
.a-big small{font-size:.5em;font-weight:700}
.a-sentence{max-width:24em}
.a-axiscap{display:flex;justify-content:space-between;gap:12px;margin:30px 0 4px;flex-wrap:wrap}
.a-daypage .drawn-tl{width:100%;height:auto}
.drawn-tl text{font-family:var(--sans);font-weight:700;font-variant-numeric:tabular-nums}

/* Spis */
.a-toc{list-style:none;padding:0;margin:34px 0 0}
.a-toc li{display:grid;grid-template-columns:48px auto 1fr auto;align-items:center;column-gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.a-toc li:last-child{border-bottom:1px solid var(--line)}
.a-toc .n{display:flex;flex-direction:column}
.a-toc .n b{font:700 1.375rem/1.15 var(--serif)}
.a-toc .n span{font:400 var(--fs-small)/1.3 var(--sans);color:var(--mute)}
.a-toc .dots{align-self:end;margin-bottom:9px;border-bottom:2px dotted var(--line-strong);min-width:16px}
.a-toc .ex{font:400 1.0625rem/1.2 var(--serif);font-style:italic;color:var(--ink);white-space:nowrap}
.a-who{margin-top:24px;font:400 var(--fs-body)/1.5 var(--sans);color:var(--ink);max-width:34em}
.a-index-text{grid-column:1 / span 6}
.a-index-art{grid-column:8 / span 5;position:relative;min-height:620px}
.a-index-art .phone{position:absolute;right:0;top:0}
.a-index-art .a-ph2{right:auto;left:0;top:120px}

/* Pora dnia */
.a-hours-head{max-width:720px}
.a-plates{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:var(--sp-5)}
.a-stages{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:var(--gutter);margin-top:var(--sp-6);align-items:end}
.a-stages-t{font:400 var(--fs-body)/1.55 var(--sans);align-self:center;max-width:22em}
.a-stages-t b{font:700 1.375rem/1.25 var(--serif);display:block;margin-bottom:8px}

/* Noc */
.a-night{background:var(--bg);margin-top:var(--sp-7)}
.a-nightscene{position:relative}
.a-nightscene .a-scene{clip-path:polygon(0 6px,8% 2px,19% 7px,31% 1px,46% 6px,58% 2px,71% 7px,84% 1px,93% 5px,100% 2px,100% 100%,0 100%)}
.a-night-over{position:absolute;left:0;right:0;top:31%}
.a-night-over .h2{max-width:9.5em;color:var(--ink)}
.a-privacy{padding-top:var(--sp-5)}
.a-privacy-art{display:flex;justify-content:center}
.a-faq-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter)}
.a-faq-grid > div:first-child{grid-column:1 / span 4}
.a-faq-grid .faq{grid-column:6 / span 7}
.a-end{padding-bottom:var(--sp-6)}
.a-end-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.a-end-h{font:800 clamp(3rem,2rem + 4vw,6rem)/1 var(--serif);color:var(--ink);letter-spacing:-.02em;margin-bottom:36px}
.a-end-h span{display:block;font-weight:400;font-style:italic;font-size:.5em;color:var(--mute);margin-top:12px}
.a-end .wl{text-align:left}
.a-end .a-mark{justify-content:center}

/* ---------- mobile ---------- */
@media (max-width: 900px){
  .a-top{padding-top:14px}
  .a-top-r .label{display:none}
  .wm{height:28px}
  .a-hero .a-scene{margin-top:64px}
  .a-hero .a-scene img{width:180%;max-width:none;margin-left:-38%}
  .a-hero-grid,.a-grid,.a-faq-grid{display:block}
  .a-hero h1{font-size:2.875rem;line-height:1}
  .a-leadcol{padding-top:20px}
  .a-phonecol{height:auto;margin-top:48px;display:flex;justify-content:center}
  .a-phonecol .phone{position:relative;bottom:auto}
  .a-col-art{margin-top:40px}
  .a-voice-art{padding-left:0}
  .a-index-art{min-height:0;display:flex;gap:12px;justify-content:center}
  .a-index-art .phone,.a-index-art .a-ph2{position:relative;top:auto;left:auto;right:auto;--w:168px!important}
  .a-toc li{grid-template-columns:44px 1fr;row-gap:2px}
  .a-toc .dots{display:none}
  .a-toc .ex{grid-column:2;font-size:1rem;color:var(--mute)}
  .a-plates{grid-template-columns:1fr 1fr;row-gap:28px}
  .a-stages{grid-template-columns:1fr 1fr 1fr;gap:12px}
  .a-stages-t{grid-column:1 / -1}
  .a-stages figcaption{font-size:.95rem}
  .a-stages figcaption b{display:block;margin-bottom:2px}
  .a-nightscene .a-scene img{width:220%;max-width:none;margin-left:-110%}
  .a-night-over{position:relative;top:auto;margin-top:28px}
  .a-faq .faq{margin-top:24px}
  .wl-row{flex-direction:column}
  .wl input{flex:none;width:100%}
  .wl .btn{width:100%}
  .a-daypage{padding:22px 18px}
  .foot nav{gap:20px}
}

/* Wersja finalna = wariant A + szeroka oś (sekcja 14:20) + siatka pokoi 3×2 (sekcja 19:00). Reszta: a.css */
.f-tl{margin-top:var(--sp-6)}
.f-tl-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line-strong);margin-bottom:28px}
.f-tl-cap .label{color:var(--mute)}
.f-tl-notes{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gutter)}
.f-tl-notes li{padding:16px 0 0;border-top:1px solid var(--line-strong);font:400 var(--fs-body)/1.5 var(--sans);color:var(--mute);max-width:22em}
.f-tl-notes b{font-weight:700;color:var(--ink)}
.final .a-daypage{align-self:center}

.f-rooms-head{max-width:720px}
.f-rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:var(--sp-5)}
.f-stage-h{font:700 1.375rem/1.2 var(--serif);padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line-strong)}
.f-stage .plate + .plate{margin-top:28px}
.a-hours + .f-rooms{padding-top:var(--sp-7)}

@media (max-width:900px){
  .f-tl-notes{grid-template-columns:1fr 1fr;row-gap:18px}
  .f-tl-notes li{font-size:var(--fs-small)}
  .f-tl-cap{margin-bottom:16px}
  .f-rooms-grid{grid-template-columns:1fr;gap:40px}
  .f-stage{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  .f-stage-h{grid-column:1 / -1}
  .f-stage .plate + .plate{margin-top:0}
  .f-stage figcaption b{display:block;margin-bottom:2px}
}
@media (max-width:900px){
  .final .a-grid-rev .a-col-text{margin-top:48px}
  .final .foot .row{flex-direction:column;align-items:flex-start}
  .final .foot nav{flex-direction:column;gap:12px}
  .final .foot nav a{padding:4px 0}
}

/* Production additions on top of handoff base/a/final.css */

:root {
  color-scheme: light;
}

/* ---- phone widths (was inline style=; CSP forbids style attributes) ---- */
.a-phonecol .phone,
.phone-hero {
  --w: 272px;
}
.a-index-art .phone,
.phone-index {
  --w: 262px;
}
.a-index-art .a-ph2,
.phone-twins {
  --w: 236px;
}
.a-privacy-art .phone,
.phone-night {
  --w: 280px;
}
@media (max-width: 900px) {
  .a-index-art .phone,
  .a-index-art .a-ph2 {
    --w: 168px !important;
  }
}

/* ---- footer brand (was inline flex) ---- */
.foot-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.foot-name {
  font: 700 1.125rem / 1.2 var(--serif);
  color: var(--ink);
}
.foot-medical {
  margin-top: 12px;
  font: 400 var(--fs-small) / 1.45 var(--sans);
  color: var(--mute);
  max-width: 36em;
  flex-basis: 100%;
}
/* P3-4: medical disclaimer as second line under © when space allows */
.foot .row {
  align-items: flex-start;
}
.foot .row > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
 * Footer: no cream strip under the night footer.
 * Overscroll below the page uses night via html; body stays light so the
 * hero/header never sit on #1C151D. Do NOT use a large box-shadow on
 * .pal-night — spread paints night upward into light sections.
 */
html {
  background: #1c151d;
}
body {
  background: #f8f5ef;
  min-height: 100dvh;
}
.pal-night.a-night {
  position: relative;
  background: var(--bg);
  /* night fill only below the section (overscroll), not upward */
  box-shadow: 0 100vh 0 0 var(--bg);
}
.pal-night .foot {
  margin-bottom: 0;
  padding-bottom: var(--sp-5);
}

/* BLOCKER: solid header so dark html never shows through (mobile 393) */
.a-top {
  background: #f8f5ef;
  background-color: #f8f5ef;
  /* cover full bleed including any blur/backdrop state */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.a-top .wrap {
  background: transparent;
}

.btn {
  text-decoration: none;
}

/* ---- privacy lead + voice wave ---- */
.a-privacy .lead {
  margin-top: 0;
}
.wave rect {
  mix-blend-mode: multiply;
}

/* ---- day card: avoid orphan “Ostatnio” (P2-3) ---- */
.a-sentence {
  text-wrap: pretty;
  max-width: 24em;
}
@media (min-width: 1200px) {
  .a-sentence {
    text-wrap: pretty;
  }
}

/* ---- form: consent + clause ---- */
.wl-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 14px 0 0;
  font: 400 var(--fs-small) / 1.45 var(--sans);
  color: var(--ink);
}
.wl-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--strong);
}
.wl-consent label {
  cursor: pointer;
}
.wl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wl input:focus-visible,
.wl-consent input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.wl input[aria-invalid="true"] {
  border-color: var(--value);
}
.wl-err {
  margin: 8px 0 0;
  font: 400 var(--fs-small) / 1.45 var(--sans);
  color: var(--value);
}
.wl.is-sending .btn {
  opacity: 0.72;
  cursor: wait;
}
.wl-success {
  max-width: 470px;
  padding: 20px 0;
  font: 400 var(--fs-lead) / 1.5 var(--sans);
  color: var(--ink);
}
.wl-success:focus {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 8px;
}
/* Public beta counter (progressive enhancement; reserved height → no CLS) */
.wl-count {
  margin: 12px 0 0;
  min-height: calc(var(--fs-small) * 1.45);
  font: 400 var(--fs-small) / 1.45 var(--sans);
  color: var(--mute);
  max-width: 34em;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.wl-count.is-ready {
  opacity: 1;
}
.wl-soon {
  font: 400 var(--fs-body) / 1.5 var(--sans);
  color: var(--ink);
  margin: 8px 0 0;
  max-width: 34em;
}
.wl-soon b {
  font-weight: 700;
  color: var(--strong);
}
.wl-soon a {
  color: var(--strong);
  text-underline-offset: 0.2em;
}
.a-end .wl-soon {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* P1-3: Dobranoc → footer gap like mockup (~96px), no orphan privacy note */
.a-end {
  padding-bottom: 96px;
}

.hero-privacy {
  margin-top: 14px;
  font: 400 var(--fs-body) / 1.5 var(--sans);
  color: var(--ink);
  max-width: 34em;
}

/* ---- button interaction ---- */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    filter: brightness(1.06);
    transform: scale(1.02);
  }
  .btn:active {
    transform: scale(0.98);
  }
  .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active {
    transform: none;
    filter: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---- picture / responsive scenes ---- */
.a-scene picture,
.plate picture {
  display: block;
  width: 100%;
}
.a-scene picture img,
.plate picture img {
  width: 100%;
  height: auto;
}
.wm-pic {
  display: block;
  line-height: 0;
}
.wm-pic .wm {
  height: 34px;
  width: auto;
}
@media (max-width: 900px) {
  .wm-pic .wm {
    height: 28px;
  }
  /* P2-2: show the full hero room on mobile (not the aggressive 180% crop) */
  .a-hero .a-scene img,
  .a-hero .a-scene picture img {
    width: 100%;
    max-width: none;
    margin-left: 0;
    object-fit: cover;
    object-position: 50% 40%;
  }
  .a-hero .a-scene {
    margin-top: 48px;
  }
}

/* ---- privacy / legal pages (P2-4: same horizontal inset as logo) ---- */
.legal {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f8f5ef;
}
.legal-top {
  padding: 22px 0;
}
.legal-main,
.legal main.wrap {
  flex: 1;
  /* keep .wrap horizontal padding — do not zero it */
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
  max-width: calc(680px + 2 * var(--margin));
}
.legal h1 {
  font-size: var(--fs-h2);
  color: var(--strong);
  margin-bottom: 20px;
}
.legal .lead {
  max-width: 36em;
  margin-bottom: 28px;
}
.legal .back {
  display: inline-block;
  margin-top: 32px;
  color: var(--strong);
  font-weight: 700;
  text-underline-offset: 0.2em;
}
.legal-card {
  max-width: 40em;
  margin: 0 0 28px;
  padding: 0;
}
.legal-card h2 {
  font: 700 var(--fs-h3) / 1.25 var(--serif);
  color: var(--ink);
  margin: 0 0 8px;
}
.legal-card p {
  margin: 0;
  color: var(--mute);
  max-width: 40em;
}

/* ---- 404 ---- */
.err404 {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f8f5ef;
}
.err404-main {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-6) var(--margin);
}
.err404 h1 {
  font-size: var(--fs-display);
  color: var(--strong);
  font-weight: 800;
  margin-bottom: 16px;
}
.err404 p {
  max-width: 28em;
  margin: 0 auto 28px;
}

.store-links[hidden] {
  display: none !important;
}