/* aerozone site. Layout: one dark ground like the app, content in a 1120px column, rounded
   surface cards only where an element is its own object, mint reserved for "in your zone". */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/barlow-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}

:root{
  color-scheme:dark;
  /* the app's own palette */
  --bg:#0D1014; --surface:#171B21; --raised:#20262E; --control:#2B323C;
  --text:#F2F4F7; --body:#C9D1DB; --muted:#9AA4B2;
  --mint:#6FE3B4; --mint-30:rgba(111,227,180,.3); --mint-12:rgba(111,227,180,.12);
  --high:#FF8B3D; --coming:#FFB27A; --low:#5B9BFF; --warm:#A9B6C8;
  --todo:#FFD166;
  /* type */
  --f-body:"Barlow",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-cond:"Barlow Condensed","Barlow",ui-sans-serif,system-ui,sans-serif;
  /* scale */
  --s-xs:.8125rem; --s-sm:.9375rem; --s-md:1.0625rem; --s-lg:1.25rem;
  --h3:clamp(1.5rem,1.2rem + 1vw,1.875rem); --h2:clamp(2.125rem,1.6rem + 2.2vw,3.25rem); --h1:clamp(3rem,2rem + 5vw,5.5rem);
  --r-card:20px; --r-pill:999px;
  --wrap:1120px; --gutter:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--f-body);font-size:var(--s-md);line-height:1.6;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--mint);text-underline-offset:3px}
a:hover{color:var(--text)}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-cond);color:var(--text);font-weight:700;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);line-height:1.1}
h4{font-size:var(--s-lg);font-weight:600;line-height:1.2}
p{margin:0}
.num,.tab{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:8px;background:var(--mint);color:var(--bg);padding:8px 14px;border-radius:8px;font-weight:600;z-index:10}
.skip:focus{left:12px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:68ch}
.stack{display:flex;flex-direction:column;gap:16px}
.eyebrow{font-family:var(--f-cond);font-weight:600;font-size:var(--s-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow.mint{color:var(--mint)}
.lede{font-size:var(--s-lg);color:var(--body);line-height:1.55}
.muted{color:var(--muted)}
.small{font-size:var(--s-sm)}
.mint{color:var(--mint)}

/* header */
.site-head{padding-block:18px;border-bottom:1px solid var(--surface)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;padding:6px 0}
.brand img{height:26px;width:auto}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--body);text-decoration:none;font-weight:500;font-size:var(--s-sm);padding:10px 12px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{background:var(--surface);color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);background:var(--surface)}

/* sections */
.section{padding-block:clamp(56px,8vw,104px)}
.section + .section{border-top:1px solid var(--surface)}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:44rem}

/* store pill and offer */
.store{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.store-pill{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:var(--r-pill);background:var(--mint);color:var(--bg);font-weight:700;font-size:var(--s-md);text-decoration:none}
.store-pill svg{width:18px;height:18px;flex:none}
.store-pill .soon{font-family:var(--f-cond);letter-spacing:.08em;text-transform:uppercase;font-size:var(--s-xs);background:rgba(13,16,20,.14);padding:3px 8px;border-radius:6px}
.offer{color:var(--text);font-weight:600}
.compat{color:var(--muted);font-size:var(--s-sm)}

/* hero */
.hero{padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,104px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1 .line2{display:block;color:var(--mint)}
.hero-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero-shot{justify-self:center;width:min(100%,330px)}

/* phone frame for real screenshots */
.phone{background:#000;border:1px solid var(--control);border-radius:34px;padding:8px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 6px var(--surface)}
.phone img{border-radius:27px;width:100%}
figure{margin:0}
figcaption{font-size:var(--s-xs);color:var(--muted);margin-top:14px;text-align:center}

/* problem */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.problem h2{color:var(--text)}
.problem .copy{display:flex;flex-direction:column;gap:18px;font-size:var(--s-lg)}
.problem .copy p:last-child{color:var(--text)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.step{display:flex;flex-direction:column;gap:14px;min-width:0}
.step .phone{width:min(100%,250px);margin:0 auto 10px}
.step-n{font-family:var(--f-cond);font-weight:700;color:var(--mint);font-size:var(--s-sm);letter-spacing:.14em;text-transform:uppercase}

/* demo: a run screen built in HTML */
.demo{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:start}
.runscreen{background:var(--bg);border:1px solid var(--control);border-radius:28px;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;align-items:center;gap:14px;transition:background-color .5s ease}
.runscreen[data-state="high"],.runscreen[data-state="coming"]{background:#1B1511}
.runscreen[data-state="low"]{background:#0F1523}
.rs-state{font-family:var(--f-cond);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:var(--s-lg);color:var(--mint);transition:color .3s}
.rs-bpm{display:flex;align-items:flex-end;gap:10px}
.rs-num{font-family:var(--f-cond);font-weight:700;font-size:clamp(6rem,4rem + 9vw,9.5rem);line-height:.82;font-variant-numeric:tabular-nums;color:var(--mint);transition:color .3s}
.rs-unit{color:var(--muted);font-size:var(--s-lg);padding-bottom:10px}
.rs-cue{font-weight:600;color:var(--text);font-size:var(--s-lg);text-align:center}
.rs-sub{color:var(--muted);font-size:var(--s-sm);text-align:center;min-height:1.6em}
[data-state="nearing"] .rs-state,[data-state="coming"] .rs-state,[data-state="nearing"] .rs-num,[data-state="coming"] .rs-num{color:var(--coming)}
[data-state="high"] .rs-state,[data-state="high"] .rs-num{color:var(--high)}
[data-state="low"] .rs-state,[data-state="low"] .rs-num{color:var(--low)}
[data-state="warm"] .rs-state,[data-state="warm"] .rs-num{color:var(--warm)}

.gauge{position:relative;width:100%;height:56px;margin-top:6px}
.gauge .track{position:absolute;left:0;right:0;top:10px;height:22px;border-radius:var(--r-pill);background:var(--control)}
.gauge .band{position:absolute;top:10px;height:22px;background:var(--mint-30);border-left:3px solid var(--mint);border-right:3px solid var(--mint)}
.gauge .marker{position:absolute;top:0;width:8px;height:42px;margin-left:-4px;border-radius:4px;background:var(--text);transition:left .25s linear;box-shadow:0 0 0 3px var(--bg)}
.gauge .ticks{position:absolute;top:38px;left:0;right:0;font-size:var(--s-xs);color:var(--body);font-variant-numeric:tabular-nums}
.gauge .ticks span{position:absolute;transform:translateX(-50%)}

.soundcard{width:100%;display:flex;gap:14px;align-items:center;background:var(--surface);border-radius:18px;padding:14px 16px}
.soundcard .ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--raised);color:var(--muted)}
.soundcard .ico svg{width:20px;height:20px}
[data-state="in"] .soundcard .ico{background:rgba(111,227,180,.16);color:var(--mint)}
[data-state="high"] .soundcard .ico,[data-state="coming"] .soundcard .ico,[data-state="nearing"] .soundcard .ico{background:rgba(255,139,61,.16);color:var(--coming)}
[data-state="low"] .soundcard .ico{background:rgba(91,155,255,.16);color:var(--low)}
.soundcard .lab{font-size:var(--s-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--f-cond);font-weight:600}
.soundcard .what{color:var(--text);font-weight:600}
.soundcard .detail{color:var(--muted);font-size:var(--s-sm)}

.demo-side{display:flex;flex-direction:column;gap:24px;min-width:0}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:14px;font:600 var(--s-md)/1 var(--f-body);border:0;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--mint);color:var(--bg)}
.btn-primary:hover{background:#8AEBC4;color:var(--bg)}
.btn-quiet{background:var(--raised);color:var(--text)}
.btn-quiet:hover{background:var(--control)}
.btn svg{width:18px;height:18px}
.seg{display:inline-flex;background:var(--surface);border-radius:14px;padding:4px;gap:4px;flex-wrap:wrap}
.seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{min-height:40px;display:inline-flex;align-items:center;padding:8px 14px;border-radius:10px;color:var(--body);font-weight:500;font-size:var(--s-sm);cursor:pointer}
.seg input:checked + label{background:var(--control);color:var(--text)}
.seg input:focus-visible + label{outline:3px solid var(--mint);outline-offset:2px}
fieldset.seg{border:0;margin:0;position:relative}

.moments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.moment{display:grid;grid-template-columns:12px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border-radius:16px;background:var(--surface);transition:background-color .3s}
.moment.on{background:var(--raised)}
.moment .dot{width:12px;height:12px;border-radius:50%;margin-top:6px}
.moment h4{font-family:var(--f-body);font-size:var(--s-md);font-weight:600}
.moment p{color:var(--muted);font-size:var(--s-sm)}
.d-in{background:var(--mint)} .d-high{background:var(--high)} .d-coming{background:var(--coming)} .d-low{background:var(--low)}

details.explore{background:var(--surface);border-radius:16px}
details.explore > summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:600;color:var(--text);display:flex;justify-content:space-between;align-items:center;min-height:52px}
details.explore > summary::-webkit-details-marker{display:none}
details.explore > summary::after{content:"+";font-family:var(--f-cond);font-size:1.5rem;color:var(--muted)}
details.explore[open] > summary::after{content:"\2212"}
.sound-list{display:flex;flex-wrap:wrap;gap:10px;padding:0 18px 18px}
.chip-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--control);background:transparent;color:var(--text);font:500 var(--s-sm)/1.2 var(--f-body);cursor:pointer}
.chip-btn:hover{background:var(--raised)}
.chip-btn .dot{width:10px;height:10px;border-radius:50%}
.audio-note{font-size:var(--s-xs);color:var(--muted)}

.points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.points li{padding-left:18px;position:relative}
.points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--mint)}
.points strong{color:var(--text)}

/* benefit grids */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,28px)}
.card{background:var(--surface);border-radius:var(--r-card);padding:clamp(20px,2.5vw,28px);display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{font-size:var(--s-lg);font-family:var(--f-body);font-weight:600;line-height:1.3}
.card p{font-size:var(--s-md)}
.plain{display:flex;flex-direction:column;gap:10px;min-width:0;border-top:2px solid var(--control);padding-top:18px}
.plain h3{font-size:var(--h3)}
.plain.mintline{border-top-color:var(--mint)}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-height:44px}
sup.fn{font-size:.7em;line-height:0;margin-left:2px}
sup.fn a{text-decoration:none;font-weight:600}

/* zone */
.zone .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.zone .copy{display:flex;flex-direction:column;gap:18px}
.zone .shot{justify-self:center;width:min(100%,300px)}
.callout{background:var(--surface);border-radius:var(--r-card);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.callout h3{font-family:var(--f-body);font-size:var(--s-md);font-weight:600;color:var(--text);line-height:1.3}

/* features */
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:1000px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
.features li{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-card);background:var(--surface)}
.features h3{font-family:var(--f-body);font-size:var(--s-md);font-weight:600;line-height:1.3}
.features p{font-size:var(--s-sm)}
.features .ico{width:36px;height:36px;border-radius:10px;background:var(--mint-12);color:var(--mint);display:grid;place-items:center;margin-bottom:4px}
.features .ico svg{width:20px;height:20px}

/* need */
.need{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(16px,2.5vw,28px)}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--control)}
.faq details{border-bottom:1px solid var(--control)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;color:var(--text);font-weight:600;font-size:var(--s-lg);position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--f-cond);font-size:1.75rem;color:var(--mint)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 22px;max-width:68ch}

/* closing download band */
.cta{background:var(--surface);border-radius:28px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
.cta h2 .line2{display:block;color:var(--mint)}

/* safety */
.safety{background:transparent;border:1px solid var(--control);border-radius:var(--r-card);padding:clamp(18px,2.5vw,24px);display:flex;flex-direction:column;gap:8px;font-size:var(--s-sm);color:var(--muted);max-width:100%}
.safety h2{font-family:var(--f-body);font-size:var(--s-md);font-weight:600;color:var(--body);letter-spacing:0}

/* sources */
.sources{font-size:var(--s-sm);color:var(--muted)}
.sources ol{margin:10px 0 0;padding-left:1.4em;display:grid;gap:6px}
.sources a{color:var(--body)}
.sources a:hover{color:var(--text)}
:target{scroll-margin-top:24px}
li:target{color:var(--text)}

/* article pages */
.page-head{padding-block:clamp(40px,6vw,80px) clamp(24px,3vw,40px)}
.page-head .wrap{display:flex;flex-direction:column;gap:16px}
.page-head h1{font-size:clamp(2.75rem,2rem + 4vw,4.5rem)}
.article{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,72px);padding-bottom:clamp(56px,8vw,104px)}
.toc{position:sticky;top:24px;align-self:start;font-size:var(--s-sm)}
.toc ol,.toc ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;line-height:1.35}
.toc a:hover{background:var(--surface);color:var(--text)}
.body{min-width:0;display:flex;flex-direction:column;gap:clamp(40px,5vw,56px)}
.body section{display:flex;flex-direction:column;gap:16px;max-width:70ch}
.body h2{font-size:clamp(1.875rem,1.5rem + 1.4vw,2.5rem)}
.body h3{font-size:var(--s-lg);font-family:var(--f-body);font-weight:600;line-height:1.3}
.body ul{margin:0;padding-left:1.2em;display:grid;gap:10px}
.body strong{color:var(--text);font-weight:600}
.evidence{display:inline-flex;align-self:flex-start;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:var(--s-sm);color:var(--body);background:var(--surface);border-radius:12px;padding:8px 12px}
.evidence b{font-family:var(--f-cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:var(--s-xs);color:var(--mint)}
.refs{font-size:var(--s-sm);color:var(--muted);padding-left:1.6em;display:grid;gap:8px;margin:0}
.refs a{color:var(--body);word-break:break-word}

/* three domains diagram */
.domains{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:6px;margin-top:4px}
.domains div{border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.domains .d1{background:var(--mint-30);color:var(--text)}
.domains .d2{background:rgba(255,178,122,.22);color:var(--text)}
.domains .d3{background:rgba(255,139,61,.28);color:var(--text)}
.domains b{font-family:var(--f-cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:var(--s-sm)}
.domains span{font-size:var(--s-sm);color:var(--body);line-height:1.4}
.domains-axis{display:flex;justify-content:space-between;font-size:var(--s-xs);color:var(--muted);margin-top:6px}

/* tables */
.table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--control)}
table{border-collapse:collapse;width:100%;font-size:var(--s-sm);min-width:520px}
th,td{text-align:left;padding:12px 14px;vertical-align:top;border-bottom:1px solid var(--control)}
th{font-family:var(--f-cond);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:var(--s-xs);color:var(--muted);background:var(--surface)}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.state{display:inline-flex;align-items:center;gap:8px}
.state i{width:10px;height:10px;border-radius:50%;flex:none}

/* support */
.flow{font-family:var(--f-cond);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);color:var(--text);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.flow span.arrow{color:var(--mint)}
.numbered{list-style:none;counter-reset:n;margin:0;padding:0;display:grid;gap:14px}
.numbered > li{counter-increment:n;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;background:var(--surface);border-radius:16px;padding:16px 18px}
.numbered > li::before{content:counter(n);width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--bg);font:700 1.25rem/40px var(--f-cond);text-align:center}
.numbered strong{display:block;color:var(--text)}
.fix{display:flex;flex-direction:column;gap:8px;padding-block:6px}
.todo{background:rgba(255,209,102,.14);color:var(--todo);border:1px dashed var(--todo);border-radius:6px;padding:1px 6px;font-size:.9em;white-space:normal}

/* footer */
.site-foot{border-top:1px solid var(--surface);padding-block:40px 48px;font-size:var(--s-sm);color:var(--muted)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.site-foot .who{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.site-foot img{height:22px;width:auto;margin-bottom:6px}
.site-foot nav{display:flex;gap:4px;flex-wrap:wrap}
.site-foot nav a{color:var(--body);text-decoration:none;padding:10px 12px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.site-foot nav a:hover{background:var(--surface);color:var(--text)}
.site-foot .mail{color:var(--body)}

/* responsive */
@media (max-width:900px){
  .hero .wrap,.zone .wrap,.demo,.split,.cta,.need{grid-template-columns:minmax(0,1fr)}
  .article{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
  .toc ol{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .hero-shot{width:min(100%,290px)}
}
@media (max-width:760px){
  .steps,.grid3{grid-template-columns:minmax(0,1fr)}
  .features{grid-template-columns:minmax(0,1fr)}
  .step{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:16px;align-items:start}
  .step .phone{width:100%;margin:0;border-radius:20px;padding:4px}
  .step .phone img{border-radius:16px}
  .step .txt{display:flex;flex-direction:column;gap:8px}
  .domains{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .hero{padding-block:24px 56px}
  .hero-copy{gap:18px}
  .hero .wrap{gap:28px}
  .hero-shot{width:min(100%,260px)}
}
@media (max-width:420px){
  :root{--gutter:16px}
  .brand img{height:22px}
  .nav a{padding:10px 8px}
}