:root{
  --bg:#F2F3EE; --bg-2:#E7E9E2; --surface:#FBFBF8; --line:#D3D6CD; --line-2:#C4C8BD;
  --ink:#12151C; --ink-2:#4B5160; --ink-3:#5E6473;
  --accent:#2340F0; --accent-press:#1A32CC; --accent-ink:#F6F7FF; --accent-soft:#DDE2FD;
  --night:#131726; --night-2:#1C2133; --night-3:#252B40; --night-ink:#E8EAF1; --night-ink-2:#A9AFC2; --night-line:#2E3449;
  --ok:#1F7A4D; --wa:#1F7A4D;
  --shadow-1:0 1px 2px rgba(18,21,28,.06),0 4px 14px rgba(18,21,28,.06);
  --shadow-2:0 2px 6px rgba(18,21,28,.08),0 18px 48px rgba(18,21,28,.12);
  --ease:cubic-bezier(0.23,1,0.32,1);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --text:"Geist",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1200px; --gut:clamp(16px,4vw,40px); --header:72px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-padding-top:calc(var(--header) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
p{margin:0;text-wrap:pretty}
a{color:inherit}
button,input{font:inherit;color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
a,button,input,textarea{-webkit-tap-highlight-color:transparent}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;transition:background-color .16s var(--ease),transform .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-press)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-quiet:hover{border-color:var(--ink)}
.btn-sm{height:40px;padding:0 16px;font-size:15px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;height:var(--header);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.hdr.is-scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 94%,transparent)}
.hdr-in{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.logo img{display:block}
.nav{display:flex;align-items:center;gap:2px;margin-right:auto}
.nav-btn,.nav-link{display:inline-flex;white-space:nowrap;align-items:center;gap:6px;height:40px;padding:0 10px;border:0;background:none;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer;transition:background-color .16s var(--ease)}
.nav-btn:hover,.nav-link:hover,.nav-btn[aria-expanded="true"]{background:var(--bg-2)}
.nav-btn svg{transition:transform .17s var(--ease)}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr-right{display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;padding:2px;height:36px}
.lang button{border:0;background:none;padding:0 9px;border-radius:6px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.hdr .burger{display:none}

/* panels */
.nav-item{position:relative}
.panel{position:absolute;top:calc(100% + 10px);left:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);opacity:0;transform:translateY(6px);visibility:hidden;transition:opacity .17s var(--ease),transform .17s var(--ease),visibility 0s linear .17s;z-index:60}
.panel.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .17s var(--ease),transform .17s var(--ease),visibility 0s}
.panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mega{position:fixed;top:calc(var(--header) - 4px);left:50%;width:min(1120px,calc(100vw - 32px));transform:translate(-50%,6px)}
.mega.is-open{transform:translate(-50%,0)}
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:24px}
.mega-col h3{display:flex;align-items:center;gap:10px;font:600 15px/1.2 var(--text);letter-spacing:0;padding:8px 12px 10px;color:var(--ink)}
.mega-col h3 .ic{width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.mlink{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;transition:background-color .14s var(--ease)}
.mlink:hover,.mlink:focus-visible{background:var(--bg)}
.mlink b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.mlink span{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2);margin-top:2px}
.mega-band{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding:14px 36px;background:var(--bg);border-radius:0 0 12px 12px;font-size:14px}
.mega-band strong{font-weight:600}
.mega-band a{color:var(--ink-2);text-decoration:none;padding:4px 0}
.mega-band a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.drop{min-width:280px;padding:8px}
/* official brand files, unchanged (research/logos/SOURCES.md) */
.lgi{display:block;flex:none;background:center/contain no-repeat}
.lgi-shopify{background-image:url("/assets/logos/shopify/shopify_glyph.svg");aspect-ratio:109.5/124.5}
.lgi-bigcommerce{background-image:url("/assets/logos/bigcommerce/BigCommerce-B-Mark-Black.svg");aspect-ratio:1}
.lgi-webflow{background-image:url("/assets/logos/webflow/Mark_Logo_Blue.svg");aspect-ratio:1080/674}
.lgi-wordpress{background-image:url("/assets/logos/wordpress/WordPress-logotype-wmark.png");aspect-ratio:1}
.lgi-shopware{background-image:url("/assets/logos/shopware/shopware-logo-brand-blue.svg");aspect-ratio:320/69;height:20px}
.lgi-prestashop{background-image:url("/assets/logos/prestashop/PREST_LOGO_RVB_noir.svg");aspect-ratio:688.22/181.94;height:20px}
.lgi-wix{background-image:url("/assets/logos/wix/Wix%20logoW.svg");aspect-ratio:166/64;height:20px}
.lgi-squarespace{background-image:url("/assets/logos/squarespace/squarespace-logo-horizontal-black.svg");aspect-ratio:829/196;height:24px}
.lgi-zapier{background-image:url("/assets/logos/zapier/zapier-logo_earth.svg");aspect-ratio:500/136;height:22px}
.lgi-n8n{background-image:url("/assets/logos/n8n/n8n-logo-black-accent.svg");aspect-ratio:480/96;height:20px}
.lgi-hubspot{background-image:url("/assets/logos/hubspot/HubSpot_Logo_Primary.svg");aspect-ratio:1255.82/355.99;height:22px}
.apps .mega-cols{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}
.apps .mega-col+.mega-col{border-left:1px solid var(--line);padding-left:16px}
.apps p.lead{margin:0 12px 6px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.apps-k{margin:16px 12px 8px;font:600 12px/1 var(--text);color:var(--ink-2)}
.apps-shop{display:flex;align-items:center;gap:12px;margin:0 0 2px;padding:9px 12px;border-radius:8px;text-decoration:none;transition:background-color .14s var(--ease)}
.apps-shop:hover,.apps-shop:focus-visible{background:var(--bg)}
.apps-shop .t{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);flex:none}
.apps-shop .t .lgi{height:24px}
.apps-shop .t .ico{width:20px;height:20px;color:var(--ink-2)}
.apps-shop b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.apps-shop span.d{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2);margin-top:2px}
.apps-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:4px 12px 0}
.apps-next a{display:flex;align-items:center;width:96px;height:28px;opacity:.82;transition:opacity .14s var(--ease)}
.apps-next a:hover,.apps-next a:focus-visible{opacity:1}
.apps-next .lgi{width:100%;height:100%;background-position:left center}
.apps-feat{display:block;margin:10px 0 0;padding:14px 16px;border-radius:10px;background:var(--accent-soft);text-decoration:none;transition:background-color .14s var(--ease)}
.apps-feat:hover,.apps-feat:focus-visible{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.apps-feat b{display:block;font-weight:600;font-size:14.5px;color:var(--accent)}
.apps-feat span{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s}
.sheet.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s}
.sheet-top{height:var(--header);display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);flex:none}
.sheet-body{flex:1;overflow:auto;padding:8px 16px 24px}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:56px;border:0;border-bottom:1px solid var(--line);background:none;font:600 18px/1.2 var(--text);text-align:left;cursor:pointer;padding:0 4px}
.acc-btn:active{background:var(--bg-2)}
.acc-btn svg{transition:transform .17s var(--ease)}
.acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc-panel{padding:6px 0 14px}
.acc-panel[hidden]{display:none}
.acc-panel h4{font:600 13px/1.2 var(--text);letter-spacing:0;color:var(--ink-2);padding:12px 4px 4px}
.acc-panel a{display:block;padding:10px 4px;text-decoration:none;font-size:16px}
.sheet-link{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line);padding:0 4px;font:600 18px/1.2 var(--text);text-decoration:none}
.sheet-foot{flex:none;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:grid;gap:8px;background:var(--surface)}
.sheet-foot .row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:8px;background:none;cursor:pointer}

/* ---------- Scroll sections (.s5) ---------- */
@media (max-width:1100px){.s5 .app{grid-template-columns:168px 1fr 260px}
}
@media (max-width:1180px){.nav,.hdr-right .lang,.hdr-right .login{display:none}
.hdr .burger{display:grid}}
@media (max-width:900px){
.hdr-in{gap:12px}
.hdr-right{margin-left:auto}
}
@media (max-width:560px){.s5 .hero h1{font-size:40px;line-height:1.02}
.hdr-right .btn-sm{height:44px;padding:0 12px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
}
.foot{background:var(--night);color:var(--night-ink);padding:0 0 40px}
.foot-in{border-top:1px solid var(--night-line);padding-top:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px}
.foot-brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-brand p{margin:0}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-top:56px;padding-top:20px;border-top:1px solid var(--night-line);font-size:13px}
.foot-bar ul{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0}
.foot-bar a{color:var(--night-ink-2);text-decoration:none}
.foot-bar a:hover{color:var(--night-ink);text-decoration:underline;text-underline-offset:3px}
.foot .logo{color:var(--night-ink)}
.foot-brand p{margin-top:16px;color:var(--night-ink-2);font-size:14.5px;max-width:28ch}
.foot h3{font:600 14px/1.3 var(--text);letter-spacing:0;color:var(--night-ink-2)}
.foot ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.foot ul a{display:inline-block;padding:5px 0;color:var(--night-ink);text-decoration:none;font-size:15px}
.foot ul a:hover{text-decoration:underline;text-underline-offset:3px}
.foot ul .ck-open{display:inline-block;padding:5px 0;font-size:15px;line-height:inherit;color:var(--night-ink)}
.foot ul .ck-open:hover{text-underline-offset:3px}
.foot-cr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 24px;margin-top:12px;padding-top:20px;border-top:1px solid var(--night-line);font-size:13px;color:var(--night-ink-2)}
.foot-cr .eu-mark{display:inline-flex;align-items:center;gap:8px}
.foot-cr .eu-mark i{width:8px;height:8px;border-radius:50%;background:#6FD6A0}
.foot-cr .credit{justify-self:end}
@media (max-width:640px){.foot-cr{grid-template-columns:1fr}.foot-cr .credit{justify-self:start}}
.foot-cr a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-cr a:hover{color:var(--night-ink)}
@media (max-width:980px){.s5 .price-grid,.s5 .eu-head,.s5 .eu-more,.s5 .faq-grid,.s5 .close-in{grid-template-columns:1fr}
.foot-in{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1/-1}
}
@media (max-width:560px){.s5 .price{padding:136px 0 128px}
}
@media (max-width:900px){.logo{min-height:44px}
.hdr-right .btn-sm{height:44px}
.hdr .burger{width:44px;height:44px}
.lang{height:auto}
.lang button{min-width:44px;min-height:44px}
}
/* ---------- Natpost sections (.np) ---------- */
:where(.np) button{background:none;border:0;padding:0;cursor:pointer}
:where(.np) a{text-decoration:none;color:inherit}
:where(.np) img,:where(.np) svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.np .sc-name{transition:opacity .4s linear}.np .sc-name.sw{transform:none;filter:none}}
@media (prefers-reduced-motion:no-preference){.js .np .h1 .ln>span{animation:np-lineUp .9s var(--ease-out) both}
}
@keyframes np-hdrIn{from{opacity:0;transform:translateY(-8px)}}
@keyframes np-lineUp{from{transform:translateY(105%)}}
@keyframes np-fadeUp{from{opacity:0;transform:translateY(14px)}}
@keyframes np-fadeIn{from{opacity:0}}
@keyframes np-cardIn{from{opacity:0;transform:translateX(16px)}}
@media (max-width:520px){.np .cap-opts{grid-template-columns:1fr}}
@property --ba{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes np-beam{to{--ba:360deg}}
@media (min-width:761px){.np .cf .note.one{white-space:nowrap}}
@keyframes np-pvIn{from{opacity:0;transform:translateY(6px)}}
@keyframes np-wire{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){.np .zoom.in .zr{animation:np-ring 3.6s var(--ease-out) infinite}
}
@keyframes np-ring{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(5)}}
/* integrations */
@keyframes igb-l{to{transform:translateX(-50%)}}
@keyframes igb-r{from{transform:translateX(-50%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.np .igb-row{animation:none;width:auto;overflow-x:auto;padding:0 var(--gutter)}.np .igb-set[aria-hidden]{display:none}}
@media (max-width:760px){.np .igb{padding:104px 0 112px}
}
@keyframes np-fadeUp6{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:no-preference){.np .shine::after{animation:np-sweep 2.8s var(--ease-ui) 1s infinite}}
@keyframes np-sweep{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
@media (max-width:1100px){.np .calc{grid-template-columns:minmax(0,1fr) 320px;gap:48px}
}
@media (max-width:860px){.np .price .sec-head,.np .sw-head{grid-template-columns:1fr;gap:16px}
}
@media (max-width:960px){.np .hdr-right{gap:8px}}
@media (max-width:760px){.np .hero{height:auto;min-height:0;max-height:none}
}
@media (max-width:560px){.np .row{grid-template-columns:minmax(0,1fr) auto}
}
@media (max-height:760px) and (min-width:761px){.np .hero-sub{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){.np *,.np *::before,.np *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* light retheme of the night pieces */
@media (min-width:761px){.np .hero{height:calc(100dvh - var(--header));max-height:880px;min-height:620px}.np .hero-in{padding-top:0}}

/* hero meta sits over the dot map: darker ink for 4.5:1 */
/* variant switcher (review tool) */

/* cookie consent */
.ck{position:fixed;left:50%;bottom:16px;z-index:70;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:20px 20px 18px;border-radius:14px;background:var(--night);color:var(--night-ink);box-shadow:0 24px 60px -24px rgba(18,21,28,.55);font-size:14.5px;line-height:1.5}
.ck[hidden]{display:none}
.ck h2{margin:0 0 6px;font:600 17px/1.3 var(--display);color:#fff}
.ck p{margin:0;color:var(--night-ink-2)}
.ck p a{color:var(--night-ink);text-underline-offset:3px}
.ck-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.ck .btn{height:44px;padding:0 12px;font-size:15px;white-space:nowrap}
.ck .ck-b{background:var(--surface);color:var(--ink)}
.ck .ck-b:hover{background:#fff}
.ck .ck-q{background:transparent;color:var(--night-ink);border-color:var(--night-line)}
.ck .ck-q:hover{border-color:var(--night-ink-2)}
.ck .btn:focus-visible,.ck-sw input:focus-visible+i{outline:2px solid #fff;outline-offset:2px}
.ck-list{display:grid;gap:2px;margin:14px 0 0;padding:0;list-style:none}
.ck-list[hidden]{display:none}
.ck-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--night-line)}
.ck-list b{display:block;color:#fff;font-weight:600}
.ck-list span{display:block;color:var(--night-ink-2);font-size:13.5px}
.ck-list em{flex:none;font-style:normal;font-size:13px;color:var(--night-ink-2)}
.ck-sw{position:relative;flex:none;width:44px;height:26px;cursor:pointer}
.ck-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ck-sw i{position:absolute;inset:0;border-radius:13px;background:var(--night-3);border:1px solid var(--night-line);transition:background .2s var(--ease)}
.ck-sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--night-ink-2);transition:transform .2s var(--ease),background .2s var(--ease)}
.ck-sw input:checked+i{background:var(--accent);border-color:var(--accent)}
.ck-sw input:checked+i::after{transform:translateX(18px);background:#fff}
.foot .ck-open{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.foot .ck-open:hover{text-decoration:underline}
@media (max-width:640px){.ck{left:8px;right:8px;bottom:8px;width:auto;transform:none;padding:16px}.ck-acts{grid-template-columns:1fr 1fr}.ck-acts .ck-custom{grid-column:1/-1;order:3}}

/* Added by build-site.mjs after bud 6's CSS, so it lands in home.css and base.css alike. */

/* ---------- footer: compact (Mikkel 5/11: "kolo enorm") ----------
   The brand sits in a narrow column on the left; the eight link groups flow down four balanced
   columns next to it instead of two tall rows across the page. */
.foot-in {
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: 40px clamp(32px, 5vw, 72px);
  padding-top: 56px;
}
.foot-brand {
  grid-column: auto;
  display: block;
}
.foot-brand p {
  margin-top: 14px;
  max-width: 26ch;
  line-height: 1.5;
}
.foot-cols {
  columns: 4;
  column-gap: 32px;
}
.foot-cols nav {
  break-inside: avoid;
  padding-bottom: 28px;
}
.foot h3 {
  font-size: 13px;
}
.foot ul {
  margin-top: 8px;
  gap: 0;
}
.foot ul a,
.foot ul .ck-open {
  padding: 4px 0;
  font-size: 14.5px;
}
@media (max-width: 1080px) {
  .foot-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .foot-brand p {
    max-width: 46ch;
  }
}
@media (max-width: 760px) {
  .foot-cols {
    columns: 2;
    column-gap: 24px;
  }
}
@media (max-width: 900px) {
  /* 44 px touch targets, as bud 6 has for the rest of the page */
  .foot ul a,
  .foot ul .ck-open {
    padding: 10px 0;
  }
  .foot-cols nav {
    padding-bottom: 20px;
  }
}

/* ---------- language globe in the header and the mobile sheet ---------- */
.lpick {
  position: relative;
}
.lpick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: 500 15px/1 var(--text);
  cursor: pointer;
  transition: background-color 0.16s var(--ease);
}
.lpick-btn:hover,
.lpick-btn[aria-expanded='true'] {
  background: var(--bg-2);
}
.lpick-chev {
  transition: transform 0.17s var(--ease);
}
.lpick-btn[aria-expanded='true'] .lpick-chev {
  transform: rotate(180deg);
}
.lpick-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.lpick-menu[hidden] {
  display: none;
}
.lpick.up .lpick-menu {
  top: auto;
  bottom: calc(100% + 8px);
}
.lpick-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: 500 15px/1.2 var(--text);
  text-align: left;
  cursor: pointer;
}
.lpick-menu button:hover {
  background: var(--bg-2);
}
.lpick-menu button[aria-pressed='true'] {
  color: var(--accent-press);
  font-weight: 600;
}
/* a check mark next to the language in use */
.lpick-menu button[aria-pressed='true']::after {
  content: '';
  width: 10px;
  height: 5px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: translateY(-2px) rotate(-45deg);
}
@media (max-width: 1180px) {
  .hdr-right .lpick {
    display: none;
  }
}
@media (max-width: 900px) {
  .lpick-btn,
  .lpick-menu button {
    min-height: 44px;
  }
}

/* ---------- header: the menu sits in the middle between the logo and the waitlist button (Mikkel 5/11) ---------- */
/* Three columns: the outer two share the free space equally, so the menu is centred. When a side is
   wider than its share (narrow screens), that column grows and the menu moves over instead of
   touching the globe. The globe drops its arrow here so the menu fits in the middle from 1280 px. */
@media (min-width: 1181px) {
  .hdr-in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 0;
  }
  .hdr-in > .logo {
    justify-self: start;
  }
  .hdr-in > .nav {
    margin: 0;
  }
  .hdr-in > .hdr-right {
    justify-self: end;
    margin-left: 20px;
  }
  .hdr-right .lpick-chev {
    display: none;
  }
}

/* ---------- cookie banner: the page waits behind a blur until the first choice is made (Mikkel 5/11) ----------
   boot.js sets .ck-wait before the first paint when no choice is saved; site.js/home.js remove it on any answer.
   Only pages that have the banner are blurred, so a page without it can never be left blurred. */
html.ck-wait:has(#ck) body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 69; /* under the banner (70), over the header, menus and the assistant */
  background: rgba(18, 21, 28, 0.18);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}