/* ============================================================
   NewMeans design system v2 (see DESIGN_SYSTEM.md, REFACTOR_PLAN.md)
   Faces: SUIT for Korean, UI and body. Pally for headers only. DNF BitBit for the wordmark
   and Typer's pixel numbers and the letters the Dopamine field spells out.
   One accent per page (mint here, coral on dopamine.html), neutrals tinted with the ink hue.
   ============================================================ */
@font-face{font-family:"SUIT";src:url("assets/fonts/SUIT-Variable.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Pally";src:url("assets/fonts/Pally-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Pally";src:url("assets/fonts/Pally-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DNFBitBit";src:url("assets/fonts/DNFBitBitv2.otf") format("opentype");font-display:swap}

:root{
  --n-50:#FCFBF7; --n-100:#F9F5F1; --n-200:#F1ECE6; --n-300:#DFDAD4; --n-400:#BCB6B0; --n-500:#97918A; --n-600:#706B64; --n-700:#514D48; --n-800:#3B3732; --n-900:#24211D;
  --m-50:#E9FCF2; --m-100:#DAF7E8; --m-200:#C3EDD8; --m-300:#A8E0C5; --m-400:#85C6A8; --m-500:#6BAB8E; --m-600:#538F74; --m-700:#3E765E; --m-800:#305D4A; --m-900:#234234;
  --c-50:#FFF3F1; --c-100:#FFE6E2; --c-200:#FFD2CC; --c-300:#FFB5AD; --c-400:#FF6666; --c-500:#FF554B; --c-600:#DA3B34; --c-700:#B92E2A; --c-800:#8E2320; --c-900:#611A18;

  --bg:var(--n-50); --surface:var(--n-100); --surface-hover:var(--n-200);
  --line:var(--n-200); --line-strong:var(--n-300);
  --text-1:var(--n-800); --text-2:var(--n-600); --text-display:var(--n-700);
  --accent:var(--m-700); --accent-strong:var(--m-800); --accent-soft:var(--m-100); --accent-soft-2:var(--m-200); --brand:var(--m-400); --focus:var(--m-600);
  --btn-bg:var(--n-800); --btn-bg-hover:var(--n-900); --btn-text:var(--n-50);
  --r-pill:999px; --r-tile:20px; --r-media:12px; --r-small:8px;
  --ease:cubic-bezier(.16,1,.3,1); --dur:200ms;
  --font-ui:"SUIT",system-ui,"Apple SD Gothic Neo",sans-serif;
  --font-display:"Pally",var(--font-ui);
  --font-pixel:"DNFBitBit",monospace;

  /* aliases still read by hero.js and older rules */
  --paper:var(--bg); --ink:var(--text-1); --ink-2:var(--text-2); --ink-3:var(--n-500);
  --mint:var(--m-400); --mint-text:var(--m-700); --mint-bg:var(--m-100);
  --coral:var(--c-400); --coral-text:var(--c-700); --coral-bg:var(--c-100);
  --card:var(--surface); --line-2:var(--line);
  --font:var(--font-ui); --pixel:var(--font-pixel); --display:var(--font-display); --mono:ui-monospace,Menlo,monospace;
}
:root[data-theme="cyber"]{--bg:#0B0A14;--surface:#15132A;--surface-hover:#1E1B38;--line:#26224A;--line-strong:#3A3570;--text-1:#EDE9FF;--text-2:#A9A3D6;--text-display:#F4F0FF;--accent:#3AF0FF;--accent-strong:#8AF7FF;--accent-soft:#12202E;--accent-soft-2:#1A3446;--brand:#FF3AD6;--focus:#3AF0FF;--btn-bg:#F0FF3A;--btn-bg-hover:#FFFF7A;--btn-text:#0B0A14}
:root[data-theme="cyber"] .nav__logo,:root[data-theme="cyber"] .foot__logo{filter:invert(1) hue-rotate(180deg)}
body,.nav,.scene,.foot{transition:background-color .6s var(--ease),color .6s var(--ease)}
body[data-accent="coral"]{--accent:var(--c-600); --accent-strong:var(--c-700); --accent-soft:var(--c-100); --accent-soft-2:var(--c-200); --brand:var(--c-400); --focus:var(--c-600);
  --cta:var(--c-400); --cta-text:#fff}   /* the product's own coral, white on it, as dodae.me runs it */

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{font-family:var(--font-ui);color:var(--text-1);background:var(--bg);line-height:1.6;font-size:16px;overflow-x:clip;-webkit-font-smoothing:antialiased}
:lang(ko),[lang="ko"]{word-break:keep-all}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--m-200);color:var(--text-1)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
/* a tap should leave nothing behind: no grey flash box, and no focus ring on the art you touched */
html{-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){.runner:focus-visible,.crew__close:focus-visible,.pc:focus-visible,.brandart:focus-visible{outline:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--btn-bg);color:var(--btn-text);padding:10px 16px;border-radius:var(--r-small)}
.skip-link:focus{left:12px;top:12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(22px,4vw,40px)}

h1,h2,h3{font-weight:600;letter-spacing:-.015em;line-height:1.2}
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.02;color:var(--text-display)}
.body-s{font-size:14px;line-height:1.5;color:var(--text-2)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--bg)}
.nav__in{display:flex;align-items:center;gap:16px;height:64px}
.nav__brand{flex:none;display:flex}
.nav__logo{height:16px;width:auto}
.nav__here{font-weight:500;font-size:13px;color:var(--text-2);white-space:nowrap}
.nav__spacer{flex:1}
.nav__links{display:flex;gap:2px;background:var(--surface);border-radius:var(--r-pill);padding:3px}
.nav__links a{padding:9px 14px 10px;border-radius:var(--r-pill);font-size:13px;line-height:1;font-weight:500;color:var(--text-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav__links a:hover{background:var(--surface-hover);color:var(--text-1)}
.nav__links a.is-here{color:var(--text-1)}
.nav__tools{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;font-size:13px;line-height:1;font-weight:500}
.lang button{padding:7px 10px 8px;border-radius:var(--r-pill);color:var(--text-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.lang button.is-active{background:var(--btn-bg);color:var(--btn-text)}
.lang span{display:none}

/* ---------- buttons, tags, links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px 1px;border-radius:var(--r-pill);font-size:14px;line-height:1;font-weight:500;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--solid,.btn--primary{background:var(--btn-bg);color:var(--btn-text)}
.btn--solid:hover,.btn--primary:hover{background:var(--btn-bg-hover)}
.btn--brand{background:var(--cta,var(--accent));color:var(--cta-text,var(--btn-text))}
.btn--brand:hover{filter:brightness(.94)}
.btn--sm{height:36px;padding:0 14px 1px;font-size:13px}
.btn--lg{height:48px;padding:0 22px 1px;font-size:15px}
.btn--icon{width:44px;padding:0;color:var(--text-2)}
.btn--icon:hover{background:var(--surface-hover);color:var(--text-1)}
.btn--icon svg{width:18px;height:18px}
.cta-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.tags{display:flex;justify-content:center;gap:6px}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px 1px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:12.5px;line-height:1;font-weight:500;color:var(--text-2);white-space:nowrap}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:14px;color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{color:var(--accent-strong)}
.badges{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.badges img{height:44px;width:auto}

/* ---------- reveal (product pages) ---------- */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.btn{transition:none}}

/* ---------- footer: links and business information, the same on every page ---------- */
.foot{border-top:1px solid var(--line);margin-top:clamp(64px,10vh,120px);padding:26px 0 40px}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:13px;color:var(--text-2)}
.foot__logo{height:14px;width:auto;margin-right:4px}
.foot__in a{transition:color var(--dur) var(--ease)}
.foot__in a:hover{color:var(--text-1)}
.foot__copy{margin-left:auto}
.foot__business{margin-top:24px;font-size:13px;color:var(--text-2)}
.foot__business h2{margin-bottom:8px;font-size:13px;font-weight:600;color:var(--text-1)}
.foot__business dl{display:flex;flex-wrap:wrap;gap:4px 24px}
.foot__business dl>div{max-width:100%}
.foot__business dt,.foot__business dd{display:inline}
.foot__business dt::after{content:": "}
.foot__business dd{overflow-wrap:anywhere}
.foot__address{flex-basis:100%}
.foot__business a{text-decoration:underline;text-underline-offset:3px}
.foot__business a:hover{color:var(--text-1)}

@media (max-width:680px){
  .nav__links{display:none}
  .nav__in{gap:10px}
  .nav__tools{gap:8px}
  .foot__copy{margin-left:0;flex-basis:100%}
  .foot__business dl{flex-direction:column;gap:6px}
}