/* Hitz Bakery site styles. Tokens first, then one block per component. */
/* Layout: a violet-black counter stacked with full-bleed candy bands (cyan, pink, yellow, purple)
   that drip into each other. Sticker rules from the logo: ink outlines and hard offset shadows. */
:root{
  color-scheme:dark;
  --oven:#130B24;      /* page ground, violet-biased black */
  --rack:#1F1439;      /* raised surface */
  --soot-d:#3B2B60; --dust-d:#B9ACD6;
  --soot:var(--soot-d);/* hairlines */
  --dust:var(--dust-d);/* muted text */
  --flour:#FCF6EA;     /* text on dark */
  --pink:#FF4F8B;      /* the logo lettering */
  --yellow:#FFE23D;
  --cyan:#27DEC9;      /* the mascot's frosting */
  --lime:#B4F03F;
  --purple:#7A3CF0;
  --pink-clip:#FF5984; /* the pink the animated clips render with, so they sit flush in their panel */
  --paper:#FFF8EA;     /* printed matter */
  --enamel-hi:#FFFCF4; --enamel-lo:#EEE5D9;
  --ink:#120A1F;       /* sticker outline, text on colour */
  --ink-soft:#4A3D66;
  --knob-hi:#3D2B66; --knob-lo:#0D0718;
  --scrim:rgba(8,4,18,.76);
  --acc:var(--pink);
  --pop:var(--pink);   /* hard-shadow colour, flips to ink on colour bands */
  --heat:.4;
  --display:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;
  --body:'Instrument Sans',system-ui,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;
  /* big screens: the whole page is scaled up by --z (see "Big screens" below). Inside body,
     viewport units are scaled with it, so --screen is one real screen height in page units */
  --z:1;
  --screen:calc(100svh / var(--z));
  --bar-h:45px;        /* announcement bar, one line from 900px up */
  --nav-h:81px;        /* sticky nav with its border */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--oven);color:var(--flour);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--flour);outline-offset:3px}
.on-color{color:var(--ink);--soot:color-mix(in srgb,var(--ink) 30%,transparent);--dust:var(--ink-soft);--pop:var(--ink)}
.on-color :focus-visible{outline-color:var(--ink)}
.on-dark{color:var(--flour);--soot:var(--soot-d);--dust:var(--dust-d);--pop:var(--pink)}
.on-dark :focus-visible{outline-color:var(--flour)}
.bg-cyan{background:var(--cyan)} .bg-yellow{background:var(--yellow)}
.c-cyan{color:var(--cyan)} .c-pink{color:var(--pink)} .c-yellow{color:var(--yellow)} .c-purple{color:var(--purple)}
[data-p="crust"]{--acc:var(--pink)} [data-p="proof"]{--acc:var(--yellow)}
[data-p="glaze"]{--acc:var(--cyan)} [data-p="crumb"]{--acc:var(--lime)}
[data-p="sprinkle"]{--acc:var(--purple)}

/* 1180px up to a laptop; on wider screens the content spans 86% of the screen */
.wrap{max-width:max(1180px,calc(86vw / var(--z)));margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sec{position:relative;padding-block:clamp(64px,9vw,124px)}
.sec.has-drip{padding-top:calc(clamp(64px,9vw,124px) + 64px)}
/* drips: the band above runs down into this one */
.drip{position:absolute;inset:-1px 0 auto 0;height:150px;overflow:hidden;pointer-events:none;z-index:1}
.drip svg{display:block}
/* sprinkles, as on the mascot's frosting */
.sprinkles{position:absolute;inset:0 0 auto 0;pointer-events:none}
.sprinkles i{position:absolute;width:20px;height:8px;border-radius:99px;box-shadow:0 0 0 2.5px var(--ink)}
.display{font-family:var(--display);font-weight:800;font-stretch:80%;letter-spacing:-.03em;line-height:.94;text-wrap:balance}
h2.display{font-size:clamp(2.4rem,5.6vw,4.4rem)}
.eyebrow{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.lede{color:var(--dust);max-width:34em;font-size:1.08rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:700 .96rem/1.1 var(--body);padding:.95em 1.4em;border-radius:999px;border:2.5px solid var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .1s ease,box-shadow .1s ease,background-color .12s ease}
.btn-hot{background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 var(--pop)} .btn-hot:hover{background:var(--flour)}
.btn-ink{background:var(--ink);color:var(--flour);box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 35%,transparent)} .btn-ink:hover{background:var(--oven)}
.btn-hot:active,.btn-ink:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pop)}
.btn-line{border-color:var(--dust);color:inherit;background:transparent} .btn-line:hover{border-color:currentColor}
.btn-sm{padding:.7em 1.05em;font-size:.86rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* announcement */
.bar{background:var(--yellow);color:var(--ink);font-size:.86rem;font-weight:500}
.bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding-block:9px;text-align:center}
.bar a{font-weight:700}
.bar .mono{font-size:.74rem;font-weight:600;background:var(--ink);color:var(--yellow);padding:.35em .7em;border-radius:4px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--oven) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--soot)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:80px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{display:block;height:58px;width:auto}
.foot .logo img{height:76px}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:.93rem}
.nav-links a{text-decoration:none;color:var(--dust)} .nav-links a:hover{color:var(--flour)}
.nav-act{display:flex;align-items:center;gap:10px}
.cart-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1.5px solid var(--soot);border-radius:999px;padding:.6em .9em;cursor:pointer;font:500 .78rem var(--mono)}
.cart-btn:hover{border-color:var(--dust)}
.cart-btn svg{width:18px;height:18px}
@media (max-width:820px){.nav-links{display:none}.nav-act{margin-left:auto}}
@media (max-width:560px){.nav .acct{display:none}}
@media (max-width:420px){.nav .btn{display:none}}
/* with Moonbase live, its checkout collects the email for the free plugin */
.mb-freebie .free-form label,.mb-freebie #freeEmail{display:none}

/* hero */
.hero{position:relative;padding-block:clamp(40px,6vw,84px) 0;isolation:isolate}
.hero::before,.pd-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(46% 62% at 76% 56%,color-mix(in srgb,var(--acc) calc(var(--heat)*52%),transparent),transparent 72%),
  radial-gradient(38% 50% at 0% 52%,color-mix(in srgb,var(--purple) 50%,transparent),transparent 72%),
  radial-gradient(34% 46% at 100% 100%,color-mix(in srgb,var(--cyan) 24%,transparent),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(3rem,7.6vw,6.3rem);margin-block:18px 22px}
.hero h1 span{color:var(--pink);background:linear-gradient(100deg,var(--pink) 8%,var(--yellow) 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em}
.hero-unit{position:relative;--m:clamp(190px,25vw,300px);padding-top:calc(var(--m)*.934 - 20px)}
.hero-unit .sprinkles{height:calc(var(--m)*.934)}
.hero-art{position:absolute;top:0;right:4%;width:var(--m);z-index:2;pointer-events:none}
.mascot{display:block;width:100%;height:auto;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.is-playing .mascot{animation:bob .682s cubic-bezier(.3,0,.3,1) infinite}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-2.2deg)}}
.hero .lede{margin-bottom:30px}
.fine{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font:400 .7rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dust)}
.unit-note{margin-top:14px;font-size:.84rem;color:var(--dust);text-align:center}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-unit{max-width:520px;width:100%;margin-inline:auto}}

/* the plugin panel */
.unit{background:linear-gradient(180deg,var(--enamel-hi),var(--enamel-lo));color:var(--ink);border-radius:20px;padding:clamp(14px,2.4vw,20px);
  border:3px solid var(--ink);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ink) 14%,transparent),10px 10px 0 var(--acc),0 0 120px -20px color-mix(in srgb,var(--acc) calc(var(--heat)*90%),transparent)}
.unit-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.unit-name{font-family:var(--display);font-weight:800;font-stretch:76%;font-size:1.9rem;letter-spacing:-.02em;line-height:1}
.unit-kind{font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pilot{margin-left:auto;align-self:center;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 28%,transparent);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 50%,transparent)}
.unit.is-live .pilot{background:var(--acc);box-shadow:0 0 0 1.5px var(--ink),0 0 10px 2px var(--acc)}
.window{position:relative;height:clamp(130px,19vw,176px);border-radius:12px;overflow:hidden;background:
  radial-gradient(90% 80% at 50% 115%,color-mix(in srgb,var(--acc) 36%,transparent),transparent 70%),var(--oven);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 80%,transparent),inset 0 10px 24px #000}
.window canvas{position:absolute;inset:14px 14px 0;width:calc(100% - 28px);height:calc(100% - 14px)}
.readout{position:absolute;top:12px;right:14px;font:600 1.5rem/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--flour)}
.window-tag{position:absolute;top:14px;left:14px;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.unit-ctl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin-top:14px}
.play{justify-self:start;display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--flour);border:0;border-radius:999px;padding:.75em 1.15em .75em .95em;font:600 .9rem/1 var(--body);cursor:pointer}
.play-ico{width:0;height:0;border-left:11px solid var(--flour);border-block:7px solid transparent}
.unit.is-live .play-ico{width:11px;height:12px;border:0;background:var(--flour);border-radius:1px}
.dial{position:relative;width:112px;height:112px;cursor:grab;touch-action:none;border-radius:50%}
.dial:active{cursor:grabbing}
.ticks{position:absolute;inset:0;width:100%;height:100%}
.ticks line{stroke:var(--ink);stroke-width:2;stroke-linecap:round;opacity:.2}
.ticks line.on{opacity:1}
.knob{position:absolute;inset:19px;border-radius:50%;background:radial-gradient(circle at 34% 26%,var(--knob-hi),var(--knob-lo) 72%);box-shadow:0 7px 12px -4px color-mix(in srgb,var(--ink) 70%,transparent),inset 0 1px 1px color-mix(in srgb,var(--flour) 22%,transparent);transform:rotate(var(--rot,0deg))}
.knob i{position:absolute;top:7px;left:50%;width:4px;height:17px;margin-left:-2px;border-radius:2px;background:var(--acc)}
.seg{justify-self:end;display:inline-flex;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.seg button{border:0;background:none;border-radius:999px;padding:.72em .9em;font:600 .64rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--flour)}
@media (max-width:400px){.play-txt{display:none}.play{padding:.9em 1em}.dial{width:100px;height:100px}.knob{inset:17px}}

/* runs in */
.runs{border-block:1px solid var(--soot);margin-top:clamp(48px,7vw,96px)}
.runs .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;padding-block:22px}
.runs li{font-family:var(--display);font-weight:700;font-stretch:80%;font-size:1.12rem;color:var(--dust)}
.runs ul{display:flex;flex-wrap:wrap;gap:8px 28px}

/* menu */
.menu-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-bottom:clamp(28px,4vw,52px)}
.menu-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:start}
.rows{border-top:1px solid var(--soot)}
.row{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--soot);padding:22px 0;cursor:pointer}
.row-main{display:flex;align-items:baseline;gap:14px}
.row-name{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.025em;line-height:1;color:var(--dust);transition:color .15s}
.row-name::before{content:"";display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--acc);margin-right:.28em;vertical-align:.2em;transform:scale(0);transition:transform .15s}
.row[aria-pressed="true"] .row-name,.row:hover .row-name{color:var(--flour)}
.row[aria-pressed="true"] .row-name::before{transform:scale(1)}
.row-dots{flex:1;min-width:18px;border-bottom:2px dotted var(--soot);transform:translateY(-.3em)}
.row-price{font:500 1rem/1 var(--mono);font-variant-numeric:tabular-nums}
.row-sub{display:block;margin-top:8px;color:var(--dust);font-size:.95rem}
.row-sub b{font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-right:.8em}
.case{position:sticky;top:108px;display:grid;gap:20px}
.case-copy{display:grid;gap:16px}
.case-copy p{color:var(--dust)}
.text-link{font-weight:600;text-underline-offset:4px}
@media (max-width:900px){.menu-grid{grid-template-columns:minmax(0,1fr)}.case{position:static;max-width:520px;width:100%;margin-inline:auto}}

/* facts */
.facts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(36px,6vw,96px);align-items:center}
.facts-copy{display:grid;gap:22px}
.claims{display:grid;gap:0;margin-top:8px;border-top:1px solid var(--soot)}
.claims li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:8px 24px;padding:18px 0;border-bottom:1px solid var(--soot)}
.claims b{font-family:var(--display);font-stretch:82%;font-weight:700;font-size:1.25rem;line-height:1.15}
.claims span{color:var(--dust)}
@media (max-width:560px){.claims li{grid-template-columns:minmax(0,1fr)}}
.label{background:var(--paper);color:var(--ink);padding:16px 18px 18px;border-radius:3px;transform:rotate(1.4deg);box-shadow:9px 9px 0 var(--ink);font-size:.92rem;line-height:1.35}
.label h3{font-family:var(--display);font-weight:800;font-stretch:76%;font-size:2.7rem;letter-spacing:-.02em;line-height:.95}
.label .serv{padding-block:4px 6px;border-bottom:10px solid var(--ink)}
.label .amt{font-weight:700;font-size:.78rem;padding-block:5px;border-bottom:4px solid var(--ink)}
.label dl div{display:flex;justify-content:space-between;gap:16px;padding-block:6px;border-bottom:1px solid var(--ink)}
.label dt{font-weight:700} .label dd{font-family:var(--mono);font-size:.76rem;text-align:right;font-variant-numeric:tabular-nums}
.label .ingr{padding-top:10px;font-size:.8rem} .label .ingr + .ingr{padding-top:6px}
.label .ingr b{letter-spacing:.04em}
@media (max-width:900px){.facts-grid{grid-template-columns:minmax(0,1fr)}.label{max-width:400px;width:100%;margin-inline:auto}}

/* the full tray */
.tray{background:var(--pink);color:var(--ink)}
.tray .eyebrow,.tray .lede{color:var(--ink-soft)}
.tray-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(36px,6vw,96px);align-items:center}
.tray-copy{display:grid;gap:22px;justify-items:start}
.tray h2{font-size:clamp(2.8rem,7vw,5.6rem)}
.tray-points{display:grid;gap:8px;font-weight:500}
.tray-points li::before{content:"+";font-family:var(--mono);margin-right:.7em}
.receipt{--z:9px;background:var(--paper);color:var(--ink);font:400 .76rem/1.5 var(--mono);font-variant-numeric:tabular-nums;padding:26px 22px calc(var(--z) + 24px);transform:rotate(-2deg);
  filter:drop-shadow(0 26px 30px color-mix(in srgb,var(--ink) 38%,transparent));
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%}
.receipt header{text-align:center;padding-bottom:14px;border-bottom:1.5px dashed var(--ink)}
.receipt header b{display:block;font-family:var(--display);font-stretch:76%;font-weight:800;font-size:1.7rem;letter-spacing:-.01em;line-height:1}
.receipt ul{padding-block:12px;border-bottom:1.5px dashed var(--ink)}
.receipt li,.receipt .sum div{display:flex;justify-content:space-between;gap:12px}
.receipt .sum{padding-block:12px}
.receipt .total{font-weight:600;font-size:1.15rem;padding-top:6px}
.receipt .save{margin-top:12px;text-align:center;background:var(--ink);color:var(--paper);padding:8px;font-weight:600;letter-spacing:.08em}
.barcode{height:40px;margin-top:16px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 9px,var(--ink) 9px 13px,transparent 13px 15px)}
.receipt footer{text-align:center;margin-top:10px}
@media (max-width:900px){.tray-grid{grid-template-columns:minmax(0,1fr)}.receipt{max-width:380px;width:100%;margin-inline:auto}}

/* free sample */
.free-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy unit" "form unit";grid-template-rows:auto 1fr;gap:clamp(24px,3vw,36px) clamp(28px,5vw,72px);align-items:start}
.free-copy{grid-area:copy;display:grid;gap:18px}
.free-copy .tray-points li{display:flex}
/* the free plugin's panel, with its three settings as a short list under it */
.free-unit{grid-area:unit;--heat:0} /* no glow around the panel here: on yellow it reads as a smudge */
.free-unit .zones{grid-template-columns:minmax(0,1fr);margin-top:30px}
.free-unit .zones .zone{grid-template-columns:minmax(0,6.6em) minmax(0,1fr);gap:5px 16px;padding:13px 16px;border-right:0;border-bottom:1px solid var(--soot);background-image:none}
.free-unit .zones .zone:last-child{border-bottom:0}
.free-unit .zones .zone:hover{background-color:color-mix(in srgb,var(--ink) 9%,transparent)}
.free-unit .zone .mono{align-self:end}
.free-unit .zone b{font-size:1.5rem}
.free-unit .zone span:last-child{grid-area:1/2/3/3;align-self:center;font-size:.9rem}
.free-form{grid-area:form;display:grid;gap:12px;padding:clamp(20px,3vw,32px);background:var(--oven);border:3px solid var(--ink);border-radius:16px;box-shadow:9px 9px 0 var(--ink)}
.free-form label{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.field{display:flex;flex-wrap:wrap;gap:10px}
.field input{flex:1 1 200px;min-width:0;background:var(--rack);border:1.5px solid var(--soot);border-radius:999px;padding:.9em 1.2em;color:var(--flour);font:inherit}
.field input::placeholder{color:var(--dust)}
.form-note{font-size:.84rem;color:var(--dust)}
.form-note.ok{color:var(--yellow)}
@media (max-width:900px){.free-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "unit" "form";grid-template-rows:auto}.free-unit{max-width:520px;width:100%;margin-inline:auto}}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px);margin-top:clamp(28px,4vw,48px)}
.quote{display:grid;gap:16px;align-content:start;padding-top:20px;border-top:1px solid var(--soot)}
.quote blockquote{font-family:var(--display);font-stretch:86%;font-weight:600;font-size:1.4rem;line-height:1.2;letter-spacing:-.01em}
.quote figcaption{font-size:.88rem;color:var(--dust)}
.ph{justify-self:start;font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);border:1px dashed var(--yellow);padding:.5em .7em;border-radius:3px}
@media (max-width:820px){.quotes{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px)}
.faq{border-top:1px solid var(--soot)}
.faq details{border-bottom:1px solid var(--soot)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 1.3rem/1 var(--mono);color:var(--pink)}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding-bottom:22px;color:var(--dust);max-width:38em}
@media (max-width:820px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* closing + footer */
.close{background:var(--purple);--pop:var(--ink);--dust:var(--flour)}
.close-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.close h2{font-size:clamp(2.8rem,7vw,5.8rem);margin-bottom:30px}
.close h2 span{color:var(--yellow)}
.close-logo{position:relative;width:100%;max-width:480px;margin-inline:auto}
.close-logo img{position:relative;display:block;width:100%;height:auto}
.close-logo .sprinkles{height:100%}
@media (max-width:820px){.close-grid{grid-template-columns:minmax(0,1fr)}.close-logo{order:-1;max-width:330px}}
.foot{position:relative;padding-block:150px 56px;font-size:.9rem;color:var(--dust)}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px 64px;justify-content:space-between}
.foot h4{margin:0 0 12px;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--flour)}
.foot li{margin-bottom:6px} .foot a{text-decoration:none} .foot a:hover{color:var(--flour)}
body:not([data-page="home"]) .foot{padding-top:48px;border-top:1px solid var(--soot)}
body:not([data-page="home"]) .foot .drip{display:none}
.proto{margin-top:36px;padding-top:20px;border-top:1px dashed var(--soot);font:400 .7rem/1.6 var(--mono)}

/* product page */
.pd-hero{position:relative;isolation:isolate;padding-block:28px clamp(48px,7vw,96px)}
.back{display:inline-block;margin-bottom:28px;font-size:.9rem;color:var(--dust);text-decoration:none} .back:hover{color:var(--flour)}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.pd-copy{display:grid;gap:16px;justify-items:start}
.pd-name{font-size:clamp(4.2rem,13vw,9.5rem);line-height:.82}
.pd-tag{font-family:var(--display);font-stretch:84%;font-weight:600;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.15;color:var(--acc)}
.buy{display:grid;gap:16px;margin-top:10px;padding-top:22px;border-top:1px solid var(--soot);width:100%}
.buy-price{display:flex;align-items:baseline;gap:14px}
.price{font:600 2.3rem/1 var(--mono);font-variant-numeric:tabular-nums}
.price-note{color:var(--dust);font-size:.92rem}
@media (max-width:900px){.pd-grid{grid-template-columns:minmax(0,1fr)}.pd-unit{max-width:520px;width:100%;margin-inline:auto}}
.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(24px,4vw,44px);border:1px solid var(--soot);border-radius:14px;overflow:hidden}
.zone{display:grid;gap:10px;align-content:start;text-align:left;padding:clamp(18px,3vw,30px);background:none;border:0;border-right:1px solid var(--soot);cursor:pointer;transition:background-color .15s}
.zone:last-child{border-right:0}
.zone:hover{background:var(--rack)}
.zone .mono{font-size:.7rem;letter-spacing:.08em;color:var(--acc)}
.zone b{font-family:var(--display);font-stretch:78%;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.02em;line-height:1}
.zone span:last-child{color:var(--dust);font-size:.95rem}
.zone:nth-child(1){background-image:linear-gradient(180deg,color-mix(in srgb,var(--acc) 5%,transparent),transparent)}
.zone:nth-child(2){background-image:linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,transparent),transparent)}
.zone:nth-child(3){background-image:linear-gradient(180deg,color-mix(in srgb,var(--acc) 22%,transparent),transparent)}
@media (max-width:760px){.zones{grid-template-columns:minmax(0,1fr)}.zone{border-right:0;border-bottom:1px solid var(--soot)}.zone:last-child{border-bottom:0}}
.spec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px)}
.feats{margin-top:24px;border-top:1px solid var(--soot)}
.feats li{padding:16px 0;border-bottom:1px solid var(--soot);font-family:var(--display);font-stretch:86%;font-weight:600;font-size:1.3rem;line-height:1.2}
.specs{margin-top:24px;border-top:1px solid var(--soot)}
.specs div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--soot);font-size:.95rem}
.specs dt{font:500 .68rem/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
@media (max-width:820px){.spec-grid{grid-template-columns:minmax(0,1fr)}}
.pair-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:24px}
.pair-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:18px 0;border-bottom:1px solid var(--soot)}
.pair-row:first-child{border-top:1px solid var(--soot)}
.pair-row a{flex:1 1 220px;min-width:0;text-decoration:none}
.pair-row .row-name{font-size:1.9rem}
.pair-row a:hover .row-name{color:var(--flour)}
.buybar{position:fixed;inset:auto 0 0 0;z-index:25;background:var(--rack);border-top:1px solid var(--soot);padding-bottom:env(safe-area-inset-bottom,0px)}
.buybar .wrap{display:flex;align-items:center;gap:14px;padding-block:10px}
.buybar b{font-family:var(--display);font-stretch:78%;font-weight:800;font-size:1.4rem;line-height:1}
.buybar .mono{margin-right:auto;font-size:.9rem}
@media (max-width:520px){.buybar .btn-line{display:none}}

/* sign-in, account and owner console */
.page{padding-block:clamp(28px,5vw,64px) clamp(64px,9vw,110px)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:26px}
.page-head h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.chip{font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.6em .85em;border-radius:4px;border:1px dashed var(--yellow);color:var(--yellow)}
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:22px;background:var(--rack);border:1px solid var(--soot)}
.tabs button{border:0;background:none;border-radius:999px;padding:.7em 1.15em;font:600 .88rem/1 var(--body);color:var(--dust);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--flour);color:var(--ink)}
.card{background:var(--rack);border:1px solid var(--soot);border-radius:16px;padding:clamp(18px,2.6vw,26px);min-width:0}
.card h2{font:700 1.05rem/1.2 var(--body);margin-bottom:14px}
.muted{color:var(--dust);font-size:.95rem}
.k{font:500 .64rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.mini{background:none;border:1px solid var(--dust);border-radius:999px;padding:.5em .85em;font:600 .74rem/1 var(--body);color:inherit;cursor:pointer;white-space:nowrap}
.mini:hover{border-color:currentColor}
.pill{display:inline-flex;align-items:center;gap:.4em;font:600 .7rem/1 var(--body);padding:.45em .7em;border-radius:999px;border:1px solid var(--soot);white-space:nowrap}
.pill.warn{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.f{display:grid;gap:7px}
.f label{font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.f input{background:var(--oven);border:1.5px solid var(--soot);border-radius:12px;padding:.85em 1em;color:var(--flour);font:inherit;min-width:0;width:100%}
.check{display:flex;gap:10px;align-items:center;font-size:.95rem}
.check input{width:18px;height:18px;accent-color:var(--pink)}
.auth-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:stretch}
.auth-card{display:grid;gap:18px;align-content:start;justify-items:start}
.auth-card > *{width:100%} .auth-card > .tabs{width:auto}
.social{display:grid;gap:10px}
.soc{display:flex;align-items:center;gap:12px;width:100%;background:var(--flour);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:.72em 1.1em;font:600 .95rem/1 var(--body);cursor:pointer;box-shadow:0 4px 0 var(--purple)}
.soc:active{transform:translateY(3px);box-shadow:0 1px 0 var(--purple)}
.soc span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--flour);font:700 .85rem/1 var(--body)}
.or{display:flex;align-items:center;gap:14px;color:var(--dust);font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--soot)}
#authForm{display:grid;gap:14px}
#authForm .btn{justify-self:start}
.auth-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.link-btn{background:none;border:0;padding:4px 0;color:var(--dust);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.9rem;justify-self:start}
.auth-side{background:var(--pink-clip);overflow:hidden;border:3px solid var(--ink);border-radius:22px;box-shadow:10px 10px 0 var(--purple);padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;gap:18px}
.auth-logo{flex:1;position:relative;display:grid;place-items:center;min-height:0;padding-block:6px 14px}
.auth-logo::after{content:"";position:absolute;left:27%;bottom:0;width:46%;height:20px;border-radius:50%;background:color-mix(in srgb,var(--ink) 36%,transparent);filter:blur(7px)}
.mascot-stage{position:relative;z-index:1;width:min(85%,468px);aspect-ratio:821/800}
.mascot-stage img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s ease}
.mascot-stage.is-clip.is-keyed img{opacity:0}
/* action clips are 16:9 with the logo at 800/1080 of the frame height, so the video is scaled to sit exactly over the still logo */
.mascot-vid{position:absolute;left:50%;top:50%;height:calc(100% / var(--logo-h,.7407));width:auto;aspect-ratio:16/9;max-width:none;transform:translate(-50%,calc(-50% - var(--logo-dy,0%)));opacity:0;transition:opacity .35s ease;pointer-events:none;
  -webkit-mask-image:linear-gradient(#0000,#000 var(--fade,9%),#000 calc(100% - var(--fade,9%)),#0000);mask-image:linear-gradient(#0000,#000 var(--fade,9%),#000 calc(100% - var(--fade,9%)),#0000)}
.mascot-stage.is-clip canvas.mascot-vid{opacity:1}
/* the source video keeps the same on-screen box (browsers pause muted video that is off screen) but is never shown */
video.mascot-vid{opacity:0;-webkit-mask-image:none;mask-image:none}
.auth-side h2{font-size:clamp(1.9rem,4vw,3.2rem)}
@media (max-width:860px){.auth-grid{grid-template-columns:minmax(0,1fr)}.mascot-stage{width:min(65%,252px)}}
.offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--pink);padding:18px 22px;margin-block:26px}
.offer div{flex:1 1 280px;min-width:0}
.offer b{display:block;font-family:var(--display);font-stretch:82%;font-weight:800;font-size:1.55rem;line-height:1.1;margin-bottom:4px}
.own-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.own-grid{grid-template-columns:minmax(0,1fr)}}
.own{display:grid;gap:18px;align-content:start}
.own h2{margin-bottom:0}
.own-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.own-head b{font-family:var(--display);font-stretch:78%;font-weight:800;font-size:2.2rem;letter-spacing:-.02em;line-height:1}
.own-head b::before{content:"";display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--acc);margin-right:.28em;vertical-align:.18em}
.own-head .pill{margin-left:auto}
.own-sub{font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.kv{display:grid;gap:9px}
.dl{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.key{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 .8rem/1.3 var(--mono);background:var(--oven);border:1px solid var(--soot);border-radius:10px;padding:9px 12px}
.key code{flex:1 1 180px;min-width:0;overflow-wrap:anywhere;font:inherit}
.meter{height:8px;border-radius:99px;background:var(--oven);overflow:hidden}
.meter i{display:block;height:100%;background:var(--acc);border-radius:99px}
.devs li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--soot);font-size:.92rem}
.devs small{display:block;color:var(--dust);font-size:.8rem}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.tbl th{text-align:left;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust);padding:10px 14px 10px 0;border-bottom:1px solid var(--soot)}
.tbl td{padding:12px 14px 12px 0;border-bottom:1px solid var(--soot);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-block:22px 16px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{display:grid;gap:8px;align-content:start}
.kpi .v{font:600 clamp(1.45rem,3vw,2.1rem)/1.1 var(--mono);font-variant-numeric:tabular-nums}
.kpi .d{font-size:.8rem;color:var(--dust)}
.adm-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
@media (max-width:900px){.adm-grid{grid-template-columns:minmax(0,1fr)}}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--soot);stroke-width:1}
.chart .ax{fill:var(--dust);font:500 10.5px var(--mono)}
.chart .bar{fill:var(--cyan)} .chart .bar.on{fill:var(--flour)}
.chart .hit{fill:transparent}
.tip{position:absolute;pointer-events:none;z-index:2;background:var(--flour);color:var(--ink);border-radius:8px;padding:7px 10px;font-size:.8rem;line-height:1.35;white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.tip b{display:block;font-family:var(--mono);font-size:.74rem}
.barrow{display:grid;grid-template-columns:minmax(0,8.2em) minmax(40px,1fr) auto;gap:12px;align-items:center;padding:9px 0;font-size:.9rem}
.barrow .track{height:10px;border-radius:99px;background:var(--oven)}
.barrow .track i{display:block;height:100%;min-width:4px;border-radius:99px;background:var(--cyan)}
.barrow .num{font:500 .78rem/1.2 var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--dust)}
.barrow .num b{display:block;color:var(--flour);font-weight:600}
.attn li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--soot);font-size:.92rem}
.attn li:first-child{border-top:0;padding-top:0}
.attn .ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 .74rem/1 var(--mono);background:var(--yellow);color:var(--ink)}
.attn .ic.info{background:var(--soot);color:var(--flour)}
.attn small{display:block;color:var(--dust);font-size:.82rem}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;width:max-content;max-width:min(520px,calc(100% - 32px));background:var(--flour);color:var(--ink);border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 5px 0 var(--pink);padding:12px 16px;font-size:.9rem;font-weight:500}
/* long-form pages: legal, 404 */
.doc{max-width:44rem;display:grid;gap:18px}
.doc h1{font-size:clamp(2.6rem,6vw,4.2rem);margin-bottom:6px}
.doc h2{font:700 1.25rem/1.25 var(--body);margin-top:18px}
.doc p,.doc li{color:var(--dust)}
.doc ul{display:grid;gap:8px;padding-left:1.2em;list-style:disc}
.doc a{color:var(--flour)}
.draft-note{font:500 .7rem/1.5 var(--mono);color:var(--yellow);border:1px dashed var(--yellow);padding:.8em 1em;border-radius:4px}
/* the 404 page: copy | the mascot on a soft shadow with sprinkles behind, the hero's glow under both.
   The mascot (--m) floats gently, except for people who ask for less motion */
.nf{position:relative;isolation:isolate;overflow:hidden}
.nf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(42% 60% at 74% 50%,color-mix(in srgb,var(--pink) 22%,transparent),transparent 72%),
  radial-gradient(38% 50% at 0% 40%,color-mix(in srgb,var(--purple) 46%,transparent),transparent 72%),
  radial-gradient(34% 46% at 100% 100%,color-mix(in srgb,var(--cyan) 20%,transparent),transparent 70%)}
.nf-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.nf h1{font-size:clamp(3rem,7.6vw,6.3rem);margin-block:18px 22px}
.nf h1 span{color:var(--pink);background:linear-gradient(100deg,var(--pink) 8%,var(--yellow) 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em}
.nf .lede{margin-bottom:28px}
.nf-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:30px;padding-top:18px;border-top:1px solid var(--soot)}
.nf-more .eyebrow{flex-basis:100%}
.nf-more a{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:1.5rem;letter-spacing:-.02em;line-height:1;color:var(--dust);text-decoration:none}
.nf-more a:hover{color:var(--flour)}
.nf-art{position:relative;--m:clamp(220px,30vw,380px);width:var(--m);justify-self:center;margin-bottom:calc(var(--m) * .06)}
.nf-art .sprinkles{inset:-6% -18% auto;height:100%}
.nf-art::after{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(var(--m) * -.05);width:70%;height:calc(var(--m) * .08);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,#000 55%,transparent),transparent)}
.nf .mascot{position:relative}
@media (prefers-reduced-motion:no-preference){.nf .mascot{animation:nf-float 3.2s ease-in-out infinite}}
@keyframes nf-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@media (max-width:900px){.nf-grid{grid-template-columns:minmax(0,1fr);gap:28px}.nf-art{order:-1;--m:clamp(170px,48vw,260px)}}
@media (min-width:900px) and (min-height:600px){
  .nf{min-height:calc(var(--screen) - var(--bar-h) - var(--nav-h));display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(40px,calc(var(--screen) * .06),124px)}
  .nf > .wrap{width:100%}
}
/* from 1600px the mascot and headline grow with the screen's height, as the home hero does */
@media (min-width:1600px){
  .nf-art{--m:clamp(380px,calc(var(--screen) * .44),560px)}
  .nf h1{font-size:clamp(6.3rem,calc(var(--screen) * .115),9rem)}
  .nf .lede{font-size:1.24rem}
  .nf-more a{font-size:1.9rem}
}
/* dialogs */
dialog{border:0;padding:0;background:var(--rack);color:var(--flour);max-width:100%}
dialog::backdrop{background:var(--scrim)}
#cart{margin:0 0 0 auto;width:min(430px,100%);height:100%;max-height:100%}
.cart-in{display:flex;flex-direction:column;height:100%;padding:22px clamp(18px,4vw,26px)}
.cart-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cart-top h2{font-size:2rem}
.x{background:none;border:1.5px solid var(--soot);border-radius:50%;width:38px;height:38px;cursor:pointer;font:400 1.1rem/1 var(--mono)}
.cart-items{flex:1;overflow:auto;margin-block:10px}
.cart-item{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--soot)}
.cart-item b{font-family:var(--display);font-stretch:78%;font-weight:800;font-size:1.5rem;line-height:1}
.cart-item small{display:block;color:var(--dust);font-size:.82rem;margin-top:3px}
.cart-item .mono{margin-left:auto}
.rm{background:none;border:0;color:var(--dust);cursor:pointer;font-size:.8rem;text-decoration:underline;padding:4px}
.empty{color:var(--dust);padding-block:24px}
.upsell{display:grid;gap:12px;justify-items:start;background:var(--pink);color:var(--ink);padding:16px 18px;border-radius:12px;font-size:.92rem;margin-bottom:14px}
.upsell b{font-weight:700}
.cart-note{font-size:.84rem;color:var(--yellow);margin-bottom:12px}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;padding-block:14px;border-top:1px solid var(--soot);font-weight:600}
.cart-total .mono{font-size:1.4rem}
.cart-in .btn-hot{width:100%}
.cart-fine{margin-top:12px;font-size:.8rem;color:var(--dust);text-align:center}
#trial{border-radius:18px;width:min(460px,calc(100% - 32px))}
.trial-in{display:grid;gap:18px;padding:clamp(22px,4vw,32px)}
.trial-in h2{font-size:2.2rem}
.trial-in p{color:var(--dust)}
.os{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.os button{display:grid;gap:4px;text-align:left;background:var(--oven);border:1.5px solid var(--soot);border-radius:12px;padding:16px;cursor:pointer}
.os button:hover{border-color:var(--pink)}
.os b{font-weight:600} .os small{color:var(--dust);font-size:.8rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Big screens ----------
   1. Scale: past a 1920x1080 screen the whole page is zoomed by --z, so type, panels and cards grow
      together and keep the laptop design's proportions. --z grows gently: 1 + 0.6 x (the smaller of
      width/1920 and height/1080 - 1), in steps, at most 1.8 (about 1.2 at 2560x1440 and 3440x1440,
      1.6 at 3840x2160).
   2. Width: .wrap spans 86% of the screen (see .wrap above).
   3. Height: from 900x600 up, each home and product section is at least one screen tall with its
      content centred, so one section fills the screen. site.js finishes a scroll that stops close to
      the next section (see "one section per screen" there). */
@supports (zoom:1){
  @media (min-width:2080px) and (min-height:1170px){:root{--z:1.05}}
  @media (min-width:2240px) and (min-height:1260px){:root{--z:1.1}}
  @media (min-width:2400px) and (min-height:1350px){:root{--z:1.15}}
  @media (min-width:2560px) and (min-height:1440px){:root{--z:1.2}}
  @media (min-width:2880px) and (min-height:1620px){:root{--z:1.3}}
  @media (min-width:3200px) and (min-height:1800px){:root{--z:1.4}}
  @media (min-width:3520px) and (min-height:1980px){:root{--z:1.5}}
  @media (min-width:3840px) and (min-height:2160px){:root{--z:1.6}}
  @media (min-width:4160px) and (min-height:2340px){:root{--z:1.7}}
  @media (min-width:4480px) and (min-height:2520px){:root{--z:1.8}}
  body{zoom:var(--z)}
}
@media (min-width:900px){
  .bar .wrap{flex-wrap:nowrap;height:var(--bar-h);padding-block:0;white-space:nowrap}
}
@media (min-width:900px) and (min-height:600px){
  html{scroll-padding-top:calc(var(--nav-h) * var(--z))}
  .hero,.pd-hero{min-height:calc(var(--screen) - var(--bar-h) - var(--nav-h));display:flex;flex-direction:column}
  .hero-grid,.pd-hero > .wrap{flex:1 0 auto;width:100%;align-content:center}
  .pd-hero > .wrap{display:flex;flex-direction:column}
  .pd-grid{flex:1 0 auto;align-content:center}
  .hero{padding-top:clamp(16px,calc(var(--screen) * .04),84px)}
  .hero-unit{--m:clamp(190px,min(25vw,calc(var(--screen) * .26)),300px)}
  .runs{margin-top:clamp(20px,calc(var(--screen) * .04),96px)}
  .sec{min-height:calc(var(--screen) - var(--nav-h));display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(40px,calc(var(--screen) * .06),124px)}
  .sec.has-drip{padding-top:calc(clamp(40px,calc(var(--screen) * .06),124px) + 64px)}
  .sec > .wrap{width:100%}
  .row{padding-block:clamp(14px,calc(var(--screen) * .018),22px)}
  .free-unit .zones{margin-top:clamp(16px,calc(var(--screen) * .02),30px)}
  .free-unit .zones .zone{padding-block:clamp(8px,calc(var(--screen) * .01),13px)}
  .menu-head{margin-bottom:clamp(24px,calc(var(--screen) * .04),52px)}
}

/* hero from 1600px: copy | the live demo with the mascot sitting on it, both grown to fill the screen.
   The mascot is sized from the hero's height (--hh), so mascot plus panel fill most of it */
@media (min-width:1600px){
  /* the panel (--uw) widens with the hero's height and the mascot (--m) grows with it (leaving room for
     the panel on a short screen), so the pair keeps its shape from a laptop-tall screen to 4K */
  .hero-grid{--hh:calc(var(--screen) - var(--bar-h) - var(--nav-h));--gap:clamp(32px,5vw,96px);
    --uw:clamp(520px,calc(var(--hh) * .7),760px);--m:clamp(190px,min(calc(var(--hh) * .35),calc(var(--hh) - 560px)),420px);
    grid-template-columns:auto minmax(0,1fr);gap:var(--gap)}
  .hero-unit{width:var(--uw);justify-self:center;--m:inherit}
  /* the copy is sized from the pair: its type is set in em of a base that grows with the pair's height
     (the mascot, .934 x --m, plus about 405px of panel and caption), so the copy is about as tall as the
     pair and both are centred on the same line. On a tall, narrow screen the base also stays small
     enough for the copy to fit beside the panel; the small print never gets smaller than on a laptop.
     The headline breaks before "loud." */
  .hero-copy{--room:calc(max(1180px,86vw / var(--z)) - 80px - var(--gap) - var(--uw));
    font-size:clamp(13px,min(calc((var(--m) * .934 + 405px) / 36.3),calc(var(--room) / 34.5)),30px);max-width:34em}
  .hero-copy .eyebrow{font-size:max(.72em,.72rem)}
  .hero h1{font-size:10em;margin-block:.1em .12em}
  .hero h1 span{display:block;width:fit-content}
  .hero .lede{font-size:max(1.2em,1.18rem);max-width:none;margin-bottom:1.45em}
  .hero .cta-row{gap:.6em}
  .hero .btn{font-size:max(.96em,.96rem)}
  .hero .fine{font-size:max(.7em,.7rem);gap:.4em 1.6em;margin-top:1.5em}
  .hero-art{right:6%}
  /* a soft contact shadow on the panel's top edge, under the mascot's feet */
  .hero-art::before{content:"";position:absolute;z-index:-1;left:53%;bottom:calc(var(--m) * -.02);width:64%;height:calc(var(--m) * .075);
    transform:translateX(-50%);border-radius:50%;filter:blur(calc(var(--m) * .01));
    background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 62%,transparent),color-mix(in srgb,var(--ink) 28%,transparent) 55%,transparent)}
  .hero-art .mascot{filter:drop-shadow(0 calc(var(--m) * .012) calc(var(--m) * .012) color-mix(in srgb,var(--ink) 45%,transparent))}
}
/* the other sections from 1600px: panels and printed matter grow so the wide rows stay full */
@media (min-width:1600px){
  .lede{font-size:1.18rem}
  h2.display{font-size:clamp(2.4rem,calc(var(--screen) * .085),6rem)}
  .menu-grid{grid-template-columns:minmax(0,1fr) minmax(0,640px)}
  .facts-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
  .claims{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,56px);border-top:0}
  .claims li{grid-template-columns:minmax(0,1fr);align-content:start;border-top:1px solid var(--soot);border-bottom:0}
  .label{font-size:1rem} .label h3{font-size:3rem}
  .tray-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
  .tray h2{font-size:clamp(2.8rem,calc(var(--screen) * .11),8rem)}
  .receipt{font-size:.88rem} .receipt header b{font-size:2rem}
  .free-grid{grid-template-columns:minmax(0,1fr) minmax(0,640px)}
  .close-logo{max-width:min(600px,calc(var(--screen) * .62))}
  .pd-grid{grid-template-columns:minmax(0,1fr) minmax(0,680px)}
}