@font-face{font-family:"ZnDisplay";src:url(/glyphs/livvic-900i.woff2) format("woff2");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:"ZnDisplay";src:url(/glyphs/livvic-700i.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"ZnText";src:url(/glyphs/radiocanada.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"ZnDisplayFB";src:local("Arial Black"),local("Arial");font-style:italic;size-adjust:92%;ascent-override:96%;descent-override:26%}
@font-face{font-family:"ZnTextFB";src:local("Arial");size-adjust:97%;ascent-override:98%;descent-override:26%}

:root{
  --zn-night:#17123E;--zn-ink:#1E2168;--zn-ink2:#22205C;--zn-panel:#1E1D5A;--zn-panel2:#262a70;
  --zn-line:rgba(160,164,236,.38);--zn-line2:rgba(160,164,236,.2);
  --zn-cream:#FFF5DD;--zn-blue:#2F3C92;--zn-slate:#4D5065;
  --zn-sun:#FFE600;--zn-flame:#FF8400;--zn-lime:#9AFF8A;--zn-gold:#E4B94E;
  --zn-text:#EEF0FF;--zn-mute:#BFC2EC;
  --zn-d:"ZnDisplay","ZnDisplayFB",system-ui,sans-serif;
  --zn-t:"ZnText","ZnTextFB",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --zn-head:76px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--zn-head) + 18px);overflow-x:clip}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;background:var(--zn-ink) url(/flora/jungle.webp) center top/100% auto no-repeat;
  color:var(--zn-text);font:400 17px/1.68 var(--zn-t);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--zn-sun)}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--zn-lime);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--zn-d);font-style:italic;font-weight:900;line-height:1.12;margin:0}
p{margin:0 0 1em}
svg{flex-shrink:0}
.zn-sprite{position:absolute;width:0;height:0;overflow:hidden}
.zn-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.zn-skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--zn-sun);color:var(--zn-night);padding:10px 16px;border-radius:10px;font-weight:700}
.zn-skip:focus{left:12px}
.zn-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}

/* ------------------------------------------------------------ buttons -- */
.zn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;
  border-radius:12px;font:italic 900 15px/1.1 var(--zn-d);text-transform:uppercase;letter-spacing:.2px;
  text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.zn-btn--sun{background:var(--zn-sun);color:var(--zn-night);box-shadow:0 5px 0 var(--zn-flame)}
.zn-btn--sun:hover{color:var(--zn-night);transform:translateY(2px);box-shadow:0 3px 0 var(--zn-flame)}
.zn-btn--ghost{background:var(--zn-panel);color:var(--zn-sun);box-shadow:inset 0 0 0 2px var(--zn-line)}
.zn-btn--ghost:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--zn-sun)}
.zn-btn--play{background:var(--zn-lime);color:var(--zn-night);box-shadow:0 5px 0 #3fb86a}
.zn-btn--play:hover{color:var(--zn-night);transform:translateY(2px);box-shadow:0 3px 0 #3fb86a}
/* Log in keeps its word on wide screens and becomes a key on a phone; the
   word stays in the accessibility tree, so the name still matches. */
.zn-btn--in .zn-ico{display:none;width:20px;height:20px}
.zn-btn--lg{min-height:58px;padding:14px 38px;font-size:19px;border-radius:16px}

/* ------------------------------------------------------------- header -- */
.zn-head{position:sticky;top:0;z-index:60;background:var(--zn-night);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.zn-head__bar{position:relative;max-width:1680px;margin:0 auto;height:var(--zn-head);padding:0 28px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.zn-head__l,.zn-head__r{display:flex;align-items:center;gap:12px;min-width:0}
.zn-head__r{justify-content:flex-end}
.zn-burger{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--zn-panel);
  color:var(--zn-sun);border:0;box-shadow:inset 0 0 0 2px var(--zn-line);cursor:pointer}
.zn-burger:hover{box-shadow:inset 0 0 0 2px var(--zn-sun)}
.zn-burger .zn-ico{width:22px;height:22px}
.zn-hnav{display:flex;gap:22px;margin-left:12px}
.zn-hnav a{font:italic 900 16px/1 var(--zn-d);text-transform:uppercase;color:var(--zn-sun);text-decoration:none;white-space:nowrap}
.zn-hnav a:hover{color:#fff}
/* The logo hangs below the bar the way it does on the brand's own header: the
   bar stays 76px, the mark is taller and overlaps the page by a third. */
.zn-logolink{display:block;align-self:start;margin-top:6px;position:relative;z-index:2}
.zn-logo{height:104px;width:auto;filter:drop-shadow(0 6px 10px rgba(8,8,40,.55))}
.zn-search{width:42px;height:42px;display:grid;place-items:center;color:#c9cbf0;text-decoration:none;border-radius:10px}
.zn-search:hover{color:var(--zn-sun)}
.zn-search .zn-ico{width:24px;height:24px}
.zn-flag{width:30px;height:22px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.zn-age{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--zn-lime);
  color:var(--zn-lime);font:italic 900 13px/1 var(--zn-d)}

/* -------------------------------------------------------------- drawer -- */
.zn-scrim{position:fixed;inset:0;z-index:80;background:rgba(10,10,34,.62);opacity:0;visibility:hidden;transition:opacity .2s ease}
.zn-scrim.zn-show{opacity:1;visibility:visible}
.zn-drawer{position:fixed;z-index:90;top:0;left:0;bottom:0;width:min(360px,88vw);display:flex;flex-direction:column;gap:14px;
  padding:16px 22px 18px;background:linear-gradient(180deg,#1c2260,#1a1e55);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-102%);visibility:hidden;transition:transform .25s ease,visibility .25s}
.zn-drawer.zn-open{transform:none;visibility:visible}
.zn-drawer__top{display:flex;align-items:flex-start;justify-content:center;position:relative}
.zn-drawer__top img{height:96px;width:auto}
.zn-drawer__x{position:absolute;right:-6px;top:0;width:40px;height:40px;border:0;background:none;color:#c9cbf0;cursor:pointer;display:grid;place-items:center}
.zn-drawer__x:hover{color:#fff}
.zn-drawer__cta{display:grid;gap:12px}
.zn-drawer__cta .zn-btn{width:100%}
.zn-dnav{display:grid;gap:2px}
.zn-dnav a{display:flex;align-items:center;gap:14px;padding:9px 8px;border-radius:10px;
  font:italic 900 16.5px/1.15 var(--zn-d);text-transform:uppercase;color:var(--zn-sun);text-decoration:none}
.zn-dnav a:hover{background:rgba(255,255,255,.06);color:#fff}
.zn-dnav .zn-ico{width:21px;height:21px}
.zn-dlabel{font:700 12px/1 var(--zn-t);letter-spacing:1.6px;text-transform:uppercase;color:var(--zn-mute);margin:6px 8px 2px}
.zn-dsec{display:flex;flex-wrap:wrap;gap:6px 8px;padding:0 4px}
.zn-dsec a{display:inline-flex;align-items:center;min-height:44px;font:600 13.5px/1 var(--zn-t);color:var(--zn-text);text-decoration:none;padding:8px 12px;border-radius:9px;background:rgba(255,255,255,.06)}
.zn-dsec a:hover{background:rgba(255,255,255,.12)}
.zn-drawer__promo{margin-top:auto}
.zn-lang{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border-radius:12px;
  box-shadow:inset 0 0 0 2px var(--zn-line);font:italic 900 14px/1 var(--zn-d);color:#fff}

/* ------------------------------------------------------- speech bubble -- */
/* The cream card with a tail at the lower left is the brand's signature shape,
   used here for the hero offer, the floating card and the tier cards. */
.zn-bubble{position:relative;background:var(--zn-cream);color:var(--zn-blue);border-radius:22px;
  box-shadow:0 0 0 2px #0f0f33,0 14px 30px rgba(8,8,40,.35)}
.zn-bubble::after{content:"";position:absolute;left:-12px;bottom:28px;width:22px;height:22px;background:var(--zn-cream);
  clip-path:polygon(100% 0,100% 100%,0 100%);border-bottom-left-radius:4px}
.zn-promo{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;text-decoration:none}
.zn-promo__t{display:block;font:italic 700 13px/1.2 var(--zn-d);text-transform:uppercase;color:var(--zn-slate)}
.zn-promo__o{display:block;font:italic 900 17px/1.15 var(--zn-d);color:var(--zn-blue);margin-top:4px}
.zn-promo img{width:64px;height:64px;margin-left:auto}

/* ---------------------------------------------------------------- hero -- */
.zn-hero{padding:52px 0 26px}
.zn-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:28px 40px}
.zn-hero__card{padding:36px 38px 58px;margin-bottom:34px}
.zn-hero h1{font-weight:700;font-size:25px;text-transform:uppercase;color:var(--zn-slate);letter-spacing:.2px}
.zn-offer{font:italic 900 clamp(38px,4.1vw,56px)/1.04 var(--zn-d);text-transform:uppercase;color:var(--zn-blue);margin:12px 0 10px}
.zn-offer span{display:block}
.zn-hero__sub{font-size:17px;line-height:1.5;color:#2c3570;margin:0;max-width:30em}
.zn-hero__btn{position:absolute;left:40px;bottom:-30px}
.zn-hero__note{display:flex;align-items:center;gap:10px;margin:0 0 0 44px;font:italic 900 21px/1.2 var(--zn-d);
  text-transform:uppercase;color:var(--zn-lime)}
.zn-hero__note .zn-ico{width:26px;height:26px;stroke-width:2.2}
.zn-hero__art{width:100%;height:auto}

.zn-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 0 6px}
.zn-chips a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;border-radius:999px;background:rgba(20,20,55,.6);
  box-shadow:inset 0 0 0 2px var(--zn-line2);color:#fff;text-decoration:none;font:italic 900 14px/1 var(--zn-d);text-transform:uppercase}
.zn-chips a:hover{box-shadow:inset 0 0 0 2px var(--zn-sun);color:var(--zn-sun)}
.zn-chips .zn-ico{width:17px;height:17px;color:var(--zn-sun)}

/* --------------------------------------------------- facts and banner -- */
.zn-facts{display:grid;grid-template-columns:repeat(3,minmax(0,260px));justify-content:center;gap:18px 26px;max-width:880px;padding:34px 0 26px;list-style:none;margin:0 auto}
.zn-facts li{display:grid;justify-items:center;padding:10px 20px;border:2px solid var(--zn-gold);border-radius:6px;
  background:rgba(12,12,40,.72);text-align:center}
.zn-facts b{font:italic 900 22px/1.1 var(--zn-d);color:#f4e7c0;text-transform:uppercase}
.zn-facts span{font:700 13px/1.2 var(--zn-t);letter-spacing:1px;text-transform:uppercase;color:var(--zn-gold);margin-top:3px}

.zn-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 30px;
  margin:6px auto 0;max-width:1180px;padding:16px 34px;border:2px solid var(--zn-line);border-radius:20px;background:rgba(24,28,88,.78)}
.zn-banner img{width:118px;height:118px}
.zn-banner__t{font:italic 900 22px/1.15 var(--zn-d);text-transform:uppercase;color:#fff;margin:0}
.zn-banner__o{font:italic 900 clamp(28px,3.2vw,44px)/1.05 var(--zn-d);color:var(--zn-sun);margin:4px 0 0;
  text-shadow:0 3px 0 #10103a,2px 0 0 #10103a,-2px 0 0 #10103a,0 -2px 0 #10103a}
.zn-banner__s{margin:6px 0 0;color:var(--zn-mute);font-size:15px}

.zn-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:30px 0 10px;list-style:none;margin:0}
.zn-tiles li{flex:0 1 calc((100% - 12px * (var(--n) - 1)) / var(--n))}
.zn-tiles a{display:grid;height:100%;justify-items:center;gap:8px;padding:16px 8px 14px;border-radius:16px;background:rgba(20,20,55,.66);
  box-shadow:inset 0 0 0 2px var(--zn-line2);color:#fff;text-decoration:none;font:italic 900 13.5px/1.15 var(--zn-d);
  text-transform:uppercase;text-align:center}
.zn-tiles a:hover{box-shadow:inset 0 0 0 2px var(--zn-sun)}
.zn-tiles .zn-ico{width:30px;height:30px;color:var(--zn-sun);stroke-width:1.7}

/* ------------------------------------------------------------ content -- */
.zn-main{display:block}
.zn-content{max-width:940px;margin:0 auto;padding:18px 0 10px}
.zn-sec{padding:46px 0 8px;border-top:1px solid rgba(160,164,236,.12)}
.zn-sec:first-child{border-top:0}
.zn-sec h2{font-size:clamp(27px,3vw,36px);text-transform:uppercase;color:#fff;margin:0 0 20px}
.zn-sec h2::after{content:"";display:block;width:74px;height:5px;border-radius:4px;background:var(--zn-sun);margin-top:12px;box-shadow:0 3px 0 var(--zn-flame)}
.zn-sec h3{font-size:21px;color:var(--zn-sun);margin:28px 0 10px}
.zn-sec p,.zn-sec li{color:#e2e4fb}
.zn-sec strong{color:#fff}
.zn-list{margin:0 0 1.1em;padding-left:1.3em}
.zn-list li{margin:0 0 .45em}
.zn-list li::marker{color:var(--zn-sun)}
.zn-steps{counter-reset:st;list-style:none;margin:6px 0 1.2em;padding:0;display:grid;gap:12px}
.zn-steps li{counter-increment:st;position:relative;padding:14px 18px 14px 64px;border-radius:14px;background:rgba(20,20,55,.62);box-shadow:inset 0 0 0 1px var(--zn-line2)}
.zn-steps li::before{content:counter(st);position:absolute;left:16px;top:12px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--zn-sun);color:var(--zn-night);font:italic 900 18px/1 var(--zn-d);box-shadow:0 3px 0 var(--zn-flame)}
.zn-note{margin:4px 0 1.3em;padding:20px 24px 20px 26px;font-size:16.5px;line-height:1.6}
.zn-note p{color:#26306a;margin:0 0 .6em}
.zn-note p:last-child{margin:0}
.zn-note strong{color:var(--zn-blue)}
.zn-note__t{display:block;font:italic 900 15px/1.2 var(--zn-d);text-transform:uppercase;color:var(--zn-slate);margin-bottom:6px}

.zn-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:10px 0 1.4em;list-style:none;padding:0}
.zn-tiers li{padding:20px 20px 22px 22px}
.zn-tiers .zn-bubble::after{bottom:22px}
.zn-tier__n{display:block;font:italic 700 13.5px/1.2 var(--zn-d);text-transform:uppercase;color:var(--zn-slate)}
.zn-tier__v{display:block;font:italic 900 30px/1.05 var(--zn-d);color:var(--zn-blue);margin:8px 0 6px}
.zn-tier__s{display:block;font-size:15px;line-height:1.45;color:#2c3570}

.zn-tablewrap{overflow-x:auto;margin:6px 0 1.3em;border-radius:14px;box-shadow:inset 0 0 0 1px var(--zn-line2)}
.zn-table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.zn-table th,.zn-table td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(160,164,236,.14);vertical-align:top}
.zn-table th{font:italic 900 14px/1.2 var(--zn-d);text-transform:uppercase;color:var(--zn-sun);background:rgba(20,20,55,.7)}
.zn-table td{color:#e2e4fb;background:rgba(20,20,55,.38)}
.zn-table tr:last-child td{border-bottom:0}

.zn-inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:8px 0 1.4em;padding:18px 22px;border-radius:16px;
  background:rgba(20,20,55,.66);box-shadow:inset 0 0 0 2px var(--zn-line2)}
.zn-inline-cta p{margin:0;flex:1 1 280px;color:#fff;font-weight:600}

.zn-faq details{border-radius:14px;background:rgba(20,20,55,.6);box-shadow:inset 0 0 0 1px var(--zn-line2);margin:0 0 10px}
.zn-faq summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;position:relative;font:italic 900 17px/1.3 var(--zn-d);color:#fff}
.zn-faq summary::-webkit-details-marker{display:none}
.zn-faq summary::after{content:"+";position:absolute;right:20px;top:12px;font:900 24px/1 var(--zn-t);color:var(--zn-sun)}
.zn-faq details[open] summary::after{content:"\2212"}
.zn-faq details>div{padding:0 20px 16px}
.zn-faq details>div p{margin:0}

/* ------------------------------------------------------- closing band -- */
.zn-band{margin:50px 0 0;padding:34px 0}
.zn-band__in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 34px;padding:30px 36px;border-radius:24px;
  background:linear-gradient(100deg,#27307c,#1d2166 60%,#1a1d5c);box-shadow:inset 0 0 0 2px var(--zn-line)}
.zn-band__t{font:italic 900 clamp(24px,2.6vw,32px)/1.1 var(--zn-d);text-transform:uppercase;color:#fff;margin:0 0 6px}
.zn-band__o{font:italic 900 20px/1.2 var(--zn-d);color:var(--zn-sun);margin:0 0 6px}
.zn-band__s{margin:0;color:var(--zn-mute);font-size:15px}
.zn-band__b{display:flex;gap:14px;flex-wrap:wrap}

/* -------------------------------------------------------------- legal -- */
.zn-doc{max-width:900px;margin:0 auto;padding:40px 0 20px}
.zn-crumbs{font-size:14px;color:var(--zn-mute);margin:0 0 14px}
.zn-crumbs a{color:var(--zn-mute)}
.zn-doc h1{font-size:clamp(32px,4vw,46px);text-transform:uppercase;color:#fff;margin:0 0 10px}
.zn-doc .zn-stamp{font-size:14px;color:var(--zn-mute);margin:0 0 26px}
.zn-doc h2{font-size:23px;color:var(--zn-sun);margin:34px 0 10px;text-transform:none}
.zn-doc h3{font-size:18px;color:#fff;margin:22px 0 8px}
.zn-doc p,.zn-doc li{color:#e2e4fb}
.zn-lead{font-size:19px;color:#fff}

/* ------------------------------------------------------------- footer -- */
.zn-foot{background:var(--zn-night);margin-top:40px;padding:46px 0 110px}
.zn-foot__in{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:28px 30px}
.zn-foot__brand img{height:92px;width:auto;margin:0 0 12px}
.zn-foot__brand p{font-size:14.5px;line-height:1.6;color:var(--zn-mute);margin:0 0 12px}
.zn-foot__h{font:italic 900 15px/1.2 var(--zn-d);text-transform:uppercase;color:#fff;margin:0 0 12px}
.zn-foot__col a,.zn-foot__ck{display:flex;align-items:center;min-height:44px;font-size:14.5px;line-height:1.3;color:var(--zn-mute);text-decoration:none;padding:4px 0;
  background:none;border:0;cursor:pointer;font-family:var(--zn-t);text-align:left}
.zn-foot__col a:hover,.zn-foot__ck:hover{color:var(--zn-sun)}
.zn-foot__cta{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.zn-foot__badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 0}
.zn-foot__badges span,.zn-foot__badges a{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:9px;font:700 12.5px/1 var(--zn-t);
  color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--zn-line2);text-decoration:none}
.zn-foot__bot{margin-top:30px;padding-top:20px;border-top:1px solid rgba(160,164,236,.14);font-size:13.5px;line-height:1.6;color:var(--zn-mute)}
.zn-foot__bot a{color:var(--zn-sun)}

/* ------------------------------------------------ floating card, dock -- */
.zn-float{position:fixed;left:22px;bottom:22px;z-index:50;width:300px;display:none}
.zn-float.zn-show{display:block}
.zn-float__x{position:absolute;right:-10px;top:-12px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:var(--zn-night);color:#fff;box-shadow:0 0 0 2px var(--zn-line);font:700 14px/1 var(--zn-t)}
.zn-float .zn-promo__t{font-size:12px}
.zn-dock{display:none}

.zn-cookie{position:fixed;right:18px;bottom:18px;z-index:70;width:min(420px,calc(100vw - 24px));padding:18px 18px 16px;border-radius:18px;
  background:#171a4d;box-shadow:0 0 0 2px var(--zn-line),0 18px 40px rgba(0,0,0,.45);display:none;font-size:14px;line-height:1.5}
.zn-cookie.zn-show{display:block}
.zn-cookie p{margin:0 0 10px;color:#e2e4fb}
.zn-cookie__cats{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.zn-cookie__cats li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.zn-cookie__cats b{display:block;color:#fff}
.zn-cookie__cats span{font-size:12.5px;color:var(--zn-mute)}
.zn-sw{width:44px;height:26px;border-radius:999px;border:0;background:#4a4f93;position:relative;cursor:pointer;flex-shrink:0}
.zn-sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s ease}
.zn-sw[aria-checked="true"]{background:#3fb86a}
.zn-sw[aria-checked="true"]::after{left:21px}
.zn-sw:disabled{opacity:.7;cursor:default}
.zn-cookie__row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zn-cookie__row button{min-height:44px;border-radius:10px;border:0;cursor:pointer;font:italic 900 13px/1 var(--zn-d);text-transform:uppercase;
  background:var(--zn-panel2);color:#fff;box-shadow:inset 0 0 0 2px var(--zn-line)}
.zn-cookie__row button:hover{box-shadow:inset 0 0 0 2px var(--zn-sun)}

/* The floating card only where there is a free margin beside the 940px text
   column; below 1600 it would sit on top of the prose. */
@media(max-width:1599px){.zn-float.zn-show{display:none}}

/* ------------------------------------------------------ breakpoints -- */
@media(max-width:1440px){.zn-hnav{gap:18px}.zn-hnav a{font-size:15px}}
@media(max-width:1280px){
  .zn-hnav a:nth-child(n+3){display:none}
  .zn-tiles li{flex-basis:calc(25% - 9px)}
}
@media(max-width:1180px){
  .zn-hnav,.zn-flag{display:none}
  .zn-float.zn-show{display:none}
  .zn-foot__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zn-foot__brand{grid-column:1/-1}
}
@media(max-width:980px){
  .zn-hero{padding:36px 0 16px}
  .zn-hero__in{grid-template-columns:1fr;gap:18px}
  .zn-hero__card{max-width:640px;margin:0 auto 34px;width:100%}
  .zn-hero__note{justify-content:center;margin:0}
  .zn-hero__art{max-width:720px;margin:0 auto}
  .zn-banner{grid-template-columns:auto minmax(0,1fr);padding:16px 22px}
  .zn-banner .zn-btn{grid-column:1/-1;justify-self:start}
  .zn-band__in{grid-template-columns:1fr}
  .zn-tiers{grid-template-columns:1fr;max-width:560px}
  .zn-search,.zn-age{display:none}
}
@media(max-width:720px){
  :root{--zn-head:62px}
  body{font-size:16.5px}
  .zn-head__bar{padding:0 12px;gap:8px;grid-template-columns:auto 1fr auto}
  .zn-burger{width:42px;height:42px}
  .zn-logolink{justify-self:center;margin-top:4px}
  .zn-logo{height:74px}
  .zn-head__r{gap:8px}
  .zn-head__r .zn-btn{min-height:44px;padding:8px 11px;font-size:13px;border-radius:10px}
  .zn-btn--in{width:44px;padding:0!important}
  .zn-btn--in .zn-ico{display:block}
  .zn-btn--in span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .zn-head__r .zn-btn--play{box-shadow:0 4px 0 #3fb86a}
  .zn-head__r .zn-btn--sun{box-shadow:0 4px 0 var(--zn-flame)}
  /* On a phone the art goes above the offer, scaled rather than cropped, so
     the first screen holds the picture, the offer and the button together. */
  /* The logo hangs 16px below the 62px bar; the art starts under it, not behind it. */
  .zn-hero{padding:20px 0 10px}
  body{background-image:url(/flora/jungle-768.webp)}
  .zn-hero__in{gap:6px}
  .zn-hero__art{order:-1;width:min(100%,310px)}
  .zn-hero__card{padding:22px 22px 48px}
  .zn-hero h1{font-size:19px}
  .zn-offer{font-size:clamp(31px,9vw,42px)}
  .zn-hero__sub{font-size:15.5px}
  .zn-hero__btn{left:22px;bottom:-28px}
  .zn-hero__note{font-size:17px}
  .zn-tiles li{flex-basis:calc(50% - 6px)}
  .zn-facts{gap:12px}
  .zn-facts li{padding:9px 12px}
  .zn-facts b{font-size:18px}
  .zn-banner{grid-template-columns:1fr;justify-items:center;text-align:center;padding:18px 16px}
  .zn-banner .zn-btn{justify-self:center}
  .zn-banner img{width:96px;height:96px}
  .zn-sec{padding:36px 0 6px}
  .zn-note{padding:18px 18px 18px 20px}
  .zn-band__in{padding:24px 20px}
  .zn-foot{padding-bottom:150px}
  .zn-foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zn-dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:var(--zn-night);box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -10px 24px rgba(0,0,0,.35)}
  .zn-dock__t{display:block;text-align:center;font:italic 900 13.5px/1.2 var(--zn-d);color:var(--zn-sun);text-transform:uppercase;margin:0 0 7px}
  .zn-dock__row{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px}
  .zn-dock__row .zn-btn{min-height:44px;font-size:14px;padding:8px 6px}
  .zn-cookie{left:12px;right:12px;bottom:106px;width:auto}
}
/* Fact frames stack on a phone instead of wrapping into a 2+1 pair. */
@media(max-width:600px){.zn-facts{grid-template-columns:1fr;max-width:340px}}
@media(max-width:400px){
  .zn-head__bar{padding:0 8px;gap:6px}
  .zn-burger{width:38px;height:38px;border-radius:10px}
  .zn-logo{height:62px}
  .zn-head__r{gap:6px}
  .zn-head__r .zn-btn{padding:8px 9px;font-size:12px}
  .zn-foot__in{grid-template-columns:1fr}
  .zn-hero__art{width:min(100%,250px)}
  .zn-hero__card{padding:18px 18px 46px}
  .zn-hero__sub{font-size:14.5px}
  .zn-dock__w{display:none}
}
@media(max-width:340px){
  .zn-logo{height:46px}
  .zn-burger{width:36px;height:36px}
  .zn-head__r .zn-btn{padding:8px 7px;font-size:11.5px}
  .zn-btn--in{width:40px}
}
/* A phone on its side has ~340px of height: the dock and the cookie card would
   eat half of it, so the dock shrinks to one row and the card moves right. */
@media(orientation:landscape) and (max-height:620px){
  :root{--zn-head:58px}
  .zn-logo{height:66px}
  .zn-dock__t{display:none}
  .zn-cookie{left:auto;right:10px;bottom:72px;max-width:400px;max-height:calc(100vh - 150px);overflow-y:auto}
  .zn-drawer__top img{height:70px}
}
/* Same phone on its side: stacked, the button fell below the fold at 844x390.
   Two columns put offer, button and art on the one screen. */
@media(orientation:landscape) and (max-height:500px) and (min-width:600px){
  .zn-hero{padding:10px 0 6px}
  .zn-hero__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:10px 18px}
  .zn-hero__art{order:0;width:100%}
  .zn-hero__card{padding:16px 20px 40px;margin:0 0 28px}
  .zn-hero h1{font-size:16px}
  .zn-offer{font-size:28px;margin:6px 0}
  .zn-hero__sub{font-size:13.5px}
  .zn-hero__btn{left:20px;bottom:-24px;min-height:48px;padding:10px 26px;font-size:16px}
  .zn-hero__note{font-size:14px;justify-content:flex-start;margin-left:24px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}