/* ============ Tokens (Supername design system) ============ */
:root{
  --paper:#FBF9F3;--paper-deep:#F3EFE5;--ink:#181511;--ink-soft:#5E574B;--ink-faint:#8A8275;
  --line:rgba(24,21,17,.12);--line-strong:rgba(24,21,17,.22);
  --signal:#FF4B00;
  --butter:#FFD98F;--pistachio:#CDE3AF;--lilac:#DCD2F5;--blush:#FFCDBC;--sky:#BFE2EF;
  --good:#3E7A1E;--bad:#C8401A;
  --radius:1.25rem;--radius-sm:.75rem;
  --display:"Bricolage Grotesque",sans-serif;--body:"Instrument Sans",system-ui,sans-serif;--mono:"Spline Sans Mono",ui-monospace,monospace;
  --wrap:74rem;--pad:clamp(1.125rem,4vw,2.5rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);flex:none;position:relative}
@keyframes pulse{0%,100%{box-shadow:0 0 0 .25rem rgba(255,75,0,.16)}50%{box-shadow:0 0 0 .5rem rgba(255,75,0,.05)}}
/* composited halo: animate scale/opacity on a ::after ring instead of box-shadow (which is not
   GPU-composited and forces a main-thread repaint of the dot every frame, site-wide) */
@keyframes pulse-ring{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.85);opacity:.05}}
.eyebrow .dot::after{content:"";position:absolute;inset:-.06rem;border-radius:50%;background:var(--signal);animation:pulse-ring 2.2s ease-in-out infinite;pointer-events:none}
h1,h2,h3{font-family:var(--display);font-weight:640;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
.section-title{font-size:clamp(2rem,4.4vw,3.1rem);margin-top:1rem;max-width:24ch}
.section-lede{color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.18rem);margin-top:1.1rem;max-width:42rem;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.85rem 1.35rem;min-height:2.9rem;font:600 .95rem/1.2 var(--body);transition:transform .15s ease,box-shadow .15s ease}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 .5rem 1.25rem rgba(24,21,17,.22)}
.btn-signal{background:var(--signal);color:#fff}
.btn-signal:hover{transform:translateY(-1px);box-shadow:0 .5rem 1.25rem rgba(255,75,0,.3)}
.btn-ghost{border:1.5px solid var(--line-strong)}
.btn-ghost:hover{background:rgba(24,21,17,.05)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.arrow{transition:transform .15s ease}
a:hover .arrow{transform:translateX(3px)}

/* ============ Header + dropdown ============ */
header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.5rem}
.logo{font:700 1.45rem/1 var(--display);letter-spacing:-.03em;display:inline-flex;align-items:center}
.logo-mark{height:.92em;width:auto;flex:none;margin-right:.32em}
.logo i{font-style:normal;color:var(--signal);margin-left:.12em;font-size:1.2em;line-height:0;animation:blink 2.4s steps(1) infinite}
@keyframes blink{0%,80%,100%{opacity:1}88%{opacity:.25}}
.nav-links{display:flex;gap:1.6rem;font-size:.94rem;font-weight:500;color:var(--ink-soft);align-items:center}
.nav-links>a:hover,.nav-links .nav-dd>button:hover{color:var(--ink)}
.nav-dd{position:relative}
.nav-dd>button{display:inline-flex;align-items:center;gap:.3rem;font:500 .94rem/1.4 var(--body);color:var(--ink-soft);padding:.35rem 0}
.nav-dd-caret{flex:none;margin-top:.08em;color:var(--ink-faint);transition:transform .2s ease}
.nav-dd.open .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + .75rem);left:50%;transform:translateX(-50%) translateY(-6px);background:#fff;border:1px solid var(--line);border-radius:1rem;box-shadow:0 1.25rem 2.5rem rgba(24,21,17,.14);padding:1rem;width:34rem;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
/* invisible bridge across the gap so moving button → menu doesn't trigger mouseleave */
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-.8rem;height:.8rem}
.nav-dd.open .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.15rem}
.nav-dd-grid a{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:.6rem;font:500 .88rem/1.3 var(--body);color:var(--ink-soft)}
.nav-dd-grid a:hover{background:var(--paper);color:var(--ink)}
.nav-dd-grid a .emo{flex:none;width:1.9rem;height:1.9rem;border-radius:.5rem;display:grid;place-items:center;font-size:.95rem;background:var(--paper-deep)}
.nav-dd-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);margin-top:.85rem;padding-top:.85rem;font:600 .8rem/1 var(--body)}
.nav-dd-foot a{color:var(--signal)}
/* compact single-column menu (For creators), anchored to the right so it doesn't overflow */
.nav-dd-menu--sm{width:15rem;left:auto;right:0;transform:translateY(-6px)}
.nav-dd.open .nav-dd-menu--sm,.nav-dd:focus-within .nav-dd-menu--sm{transform:translateY(0)}
.nav-dd-list{display:grid;gap:.1rem}
.nav-dd-list a{display:block;padding:.55rem .7rem;border-radius:.6rem;font:500 .9rem/1.3 var(--body);color:var(--ink-soft)}
.nav-dd-list a:hover{background:var(--paper);color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:.75rem}
.menu-btn{display:none;padding:.5rem;border-radius:.6rem}
@media (max-width:74rem){.nav-hide-sm{display:none}}  /* drop secondary links on narrower desktop before the hamburger kicks in */
@media (max-width:62rem){.nav-links{display:none}.menu-btn{display:inline-flex}}
.mobile-menu{display:none;border-top:1px solid var(--line);padding:1.1rem var(--pad) 1.5rem;max-height:70vh;overflow:auto}
.mobile-menu.open{display:block}
.mobile-menu .grp{font:600 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:1.1rem 0 .5rem}
.mobile-menu .grp:first-child{margin-top:0}
.mobile-menu a{display:block;font:600 1rem/2.1 var(--body)}
.mobile-menu .mini a{display:inline-block;font:500 .85rem/1 var(--body);border:1px solid var(--line-strong);border-radius:999px;padding:.5rem .85rem;margin:0 .35rem .45rem 0}

/* ============ Mega footer ============ */
footer{border-top:1px solid var(--line);padding-block:3.5rem 2.5rem;background:var(--paper-deep)}
.foot-grid{display:grid;gap:2.25rem}
@media (min-width:53rem){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}}
.foot-grid h4{font:600 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.9rem}
.foot-grid ul{display:grid;gap:.5rem;font-size:.88rem;color:var(--ink-soft)}
.foot-grid a:hover{color:var(--ink)}
.foot-brand p{font-size:.86rem;color:var(--ink-soft);max-width:16rem;margin-top:.8rem}
.foot-brand .loc{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font:600 .76rem/1 var(--mono);background:var(--pistachio);border:1px solid rgba(24,21,17,.1);border-radius:999px;padding:.5rem .8rem}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-faint)}
.foot-bottom .legal{display:flex;gap:1.25rem}
.foot-bottom .legal a:hover{color:var(--ink)}
.foot-bottom .foot-company{flex-basis:100%;text-align:center;line-height:1.55;color:var(--ink-faint)}

/* ===== Country switcher ===== */
.cs-wrap{position:relative}
.country-switch{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem .8rem;font:600 .82rem/1 var(--body);color:var(--ink);cursor:pointer;transition:border-color .15s ease}
.country-switch:hover{border-color:var(--ink)}
.country-switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cs-globe{flex:none;color:var(--ink-soft)}
.cs-flag{width:1.3rem;height:.95rem;border-radius:2px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(24,21,17,.1)}
.cs-caret{flex:none;color:var(--ink-faint)}

/* modal */
.cs-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:1.25rem;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.cs-modal.open{opacity:1;visibility:visible}
.cs-modal-scrim{position:absolute;inset:0;background:rgba(16,14,11,.5);backdrop-filter:blur(3px)}
.cs-modal-card{position:relative;width:min(94vw,540px);max-height:82vh;display:flex;flex-direction:column;background:#fff;border-radius:1.1rem;box-shadow:0 1.6rem 3.4rem rgba(16,14,11,.3);transform:translateY(10px) scale(.985);transition:transform .2s ease;overflow:hidden}
.cs-modal.open .cs-modal-card{transform:none}
.cs-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.3rem;border-bottom:1px solid var(--line)}
.cs-modal-head h3{font-size:1.1rem;font-weight:700}
.cs-modal-close{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:0;border-radius:50%;background:var(--paper-deep);color:var(--ink);cursor:pointer;flex:none;transition:background .15s ease}
.cs-modal-close:hover{background:var(--line)}
.cs-list{list-style:none;margin:0;padding:.55rem;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:.1rem}
.cs-item{display:flex;align-items:flex-start;gap:.65rem;border-radius:.6rem;padding:.6rem .65rem}
.cs-item.is-linked{cursor:pointer}                 /* the whole row navigates to the default language */
.cs-item.is-linked:hover{background:var(--paper-deep)}
.cs-item .cs-flag{width:1.5rem;height:1.1rem;margin-top:.15rem}
.cs-item-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cs-country{font:500 .92rem/1.2 var(--body);color:var(--ink);text-decoration:none}
a.cs-country:hover{color:var(--signal)}
a.cs-country:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
.cs-item.is-current .cs-country{font-weight:700}
.cs-langs{display:flex;flex-wrap:wrap;gap:.1rem .7rem}
.cs-lang{font:500 .76rem/1.4 var(--body);color:var(--ink-soft);text-decoration:none}
a.cs-lang:hover{color:var(--ink);text-decoration:underline}
a.cs-lang:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
.cs-lang.is-current{color:var(--signal);font-weight:600}
.cs-lang-static{color:var(--ink-faint)}
@media (max-width:32rem){.cs-list{grid-template-columns:1fr}}
.reveal{transition:opacity .55s ease,transform .55s ease}
html.js .reveal{opacity:0;transform:translateY(1rem)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
  .mq-track,.ticker-track{animation:none;width:auto}
  .marquee,.ticker{overflow-x:auto}
}

/* animation gate (toggled by site.js): stop CSS animations when the tab is hidden
   or the owning section is off-screen, so the page can fall idle instead of
   compositing/repainting at 60fps forever */
html.anim-off *,html.anim-off *::before,html.anim-off *::after,
.anim-paused,.anim-paused::before,.anim-paused::after,
.anim-paused *,.anim-paused *::before,.anim-paused *::after{animation-play-state:paused!important}

/* Legacy palette aliases (used by older page CSS: index, creators) */
:root{
  --signal-soft:#FFE3D6;
  --butter-deep:#F0B341;--pistachio-deep:#8FBE5E;--lilac-deep:#A28BDD;
  --blush-deep:#F58E66;--sky-deep:#6FB6D3;
}