/* zipka · raw color primitives — the only place literal hex values live.
   Discipline: a deep neutral ink scale + ONE primary accent (Klein Blue, the brand
   constant) + ONE warm "art" accent encoding the tech↔art duality + muted statuses.
   Semantic tokens (semantic.css) reference these; components reference semantics. */

:root {
  /* ---- Neutrals · cool near-black → paper ---- */
  --c-ink-900: #0E0E10;
  --c-ink-800: #121214; /* brand ink */
  --c-ink-700: #232327;
  --c-ink-600: #3A3A3F; /* ink-soft */
  --c-ink-500: #6C6C72; /* muted */
  --c-ink-400: #94949A;
  --c-ink-300: #C2C2C7;
  --c-ink-200: #DEDEE1;
  --c-ink-100: #ECECEE;
  --c-ink-50:  #F6F6F7; /* soft surface */
  --c-paper:   #FFFFFF;

  /* ---- Klein Blue · primary / "tech" accent ---- */
  --c-blue-700: #00227A; /* pressed */
  --c-blue-600: #002FA7; /* Klein — base */
  --c-blue-500: #1E47C8;
  --c-blue-400: #4D6FE0;
  --c-blue-300: #7E97EC; /* dark-theme accent */
  --c-blue-200: #B9C6EC;
  --c-blue-100: #E6EBF7; /* tint surface */

  /* ---- Vermilion · secondary / "art" accent ---- */
  --c-verm-700: #B8330F;
  --c-verm-600: #E1431B; /* base */
  --c-verm-500: #F2542D;
  --c-verm-300: #F4977E;
  --c-verm-100: #FBE7E0; /* tint surface */

  /* ---- Cobalt · alternate accent (voltage) ---- */
  --c-cobalt-700: #0F3DD6;
  --c-cobalt-600: #1F53FF;
  --c-cobalt-300: #7E9BFF;
  --c-cobalt-100: #E7ECFF;

  /* ---- Status ---- */
  --c-green-600: #157F3C;
  --c-green-300: #34C76A;
  --c-green-100: #E3F1E8;

  --c-amber-700: #8A5200;
  --c-amber-600: #B26B00; /* text-safe */
  --c-amber-fill: #F2A20C;
  --c-amber-300: #F2B33B;
  --c-amber-100: #FBEFD9;

  --c-red-700: #A81F14;
  --c-red-600: #D12B1E;
  --c-red-300: #FF6B5E;
  --c-red-100: #FBE7E5;
}

:root{--ink:var(--c-ink-800);--blue:var(--c-blue-600);--line:var(--c-ink-200);--muted:var(--c-ink-500);--paper:var(--c-paper);--soft:var(--c-ink-50);--mono:'JetBrains Mono',monospace;--body:'Hanken Grotesk','Arial',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--body);font-size:17px;line-height:1.5}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid var(--c-verm-600);outline-offset:5px}h1,h2,h3,p,figure{margin:0}h1,h2,h3,button,.eyebrow,.hero-meta,.launch,.price,.bundle-price{font-family:var(--mono)}h1,h2,h3{font-weight:500;letter-spacing:-.06em}.catalog-unused-header,main,footer{max-width:1320px;margin:auto}.catalog-unused-header{display:flex;align-items:center;justify-content:space-between;padding:28px 40px;border-bottom:1px solid var(--line);gap:28px}.brand{display:flex}.catalog-unused-header nav{display:flex;gap:28px;font-size:14px}.catalog-unused-header nav a:hover{color:var(--blue)}.launch{font-size:11px;color:var(--blue);white-space:nowrap}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:680px;border-bottom:1px solid var(--line)}.hero-copy{padding:64px 40px 48px;display:flex;align-items:flex-start;flex-direction:column}.eyebrow{font-size:11px;letter-spacing:0;line-height:1.6;color:var(--muted)}h1{font-size:clamp(58px,7.2vw,98px);line-height:1.06;margin:28px 0}h1 span{color:var(--c-verm-600)}.intro{font-size:20px;max-width:390px;line-height:1.55;margin-bottom:32px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:17px 21px;font-family:var(--mono);font-size:13px;border:1px solid var(--ink);transition:background .2s,transform .2s}.button:hover{transform:translateY(-1px)}.primary{background:var(--blue);color:var(--paper);border-color:var(--blue)}.primary:hover{background:var(--c-blue-700)}.hero-meta{display:flex;gap:20px;font-size:10px;margin-top:auto;padding-top:36px;color:var(--muted)}.hero-art{position:relative;overflow:hidden;border-left:1px solid var(--line);background:var(--ink)}.hero-art>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:center;transition:transform .7s}.hero-art:hover>img{transform:scale(1.025)}figcaption{position:absolute;bottom:24px;left:24px;right:24px;background:var(--paper);display:grid;grid-template-columns:1fr 48px;padding:18px 20px;align-items:center}figcaption span{font:10px var(--mono);color:var(--muted)}figcaption strong{font:20px var(--mono);grid-column:1}figcaption button{grid-column:2;grid-row:1/3;background:var(--paper);border:1px solid var(--line);height:48px;font-size:24px}.collection,#bundles{padding:76px 40px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}.section-heading h2{font-size:clamp(28px,3vw,42px);line-height:1.25;margin-top:18px}.section-heading>p{max-width:390px;color:var(--muted);font-size:16px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}.filters button{font-size:11px;border:1px solid var(--line);background:var(--paper);padding:13px 16px}.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.filters span{opacity:.65;margin-left:6px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.product-card{display:flex;flex-direction:column;padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:292px;animation:appear .3s ease both;transition:background .2s}.product-card:hover{background:var(--soft)}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;gap:12px}.card-tag{color:var(--blue);font:10px var(--mono)}.card-symbol{color:var(--c-ink-300);font:25px var(--mono)}.product-card h3{font-size:23px;line-height:1.25;letter-spacing:-.045em;margin-bottom:14px}.product-card p{font-size:15px;color:var(--muted);max-width:310px}.card-bottom{margin-top:auto;padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:15px}.price{font-size:16px}.details{background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0;font-size:11px}.details:hover{color:var(--blue);border-color:var(--blue)}.how{background:var(--blue);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;padding:60px 40px;gap:70px}.how .eyebrow{color:var(--c-blue-200)}.how h2{font-size:clamp(30px,3.5vw,48px);line-height:1.25;margin-top:24px}.how em{font-style:normal;color:var(--c-blue-200)}.steps article{display:flex;gap:24px;padding:23px 0;border-bottom:1px solid var(--c-blue-400)}.steps article:first-child{padding-top:0}.steps article:last-child{border:0;padding-bottom:0}.steps article>span{font:12px var(--mono);color:var(--c-blue-200);padding-top:4px}.steps h3{font-size:19px;margin-bottom:8px;letter-spacing:-.03em}.steps p{color:var(--c-blue-100);font-size:16px;max-width:360px}.bundle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line)}.bundle{padding:24px;border-right:1px solid var(--line);display:flex;flex-direction:column}.bundle:last-child{border:0}.bundle h3{font-size:20px;line-height:1.3;margin:18px 0}.bundle p{font-size:14px;color:var(--muted);margin-bottom:28px}.bundle-price{margin-top:auto;font-size:23px}.bundle-price s{font:12px var(--body);color:var(--muted);margin-left:7px}.bundle button{align-self:flex-start;margin-top:18px}footer{padding:32px 40px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px;color:var(--muted)}dialog{border:1px solid var(--ink);padding:34px;max-width:590px;width:calc(100% - 32px);max-height:90vh;color:var(--ink);background:var(--paper)}dialog::backdrop{background:rgb(14 14 16 / .65)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}#close-detail{font-size:28px;line-height:1;width:40px;height:40px;border:1px solid var(--line);background:var(--paper)}dialog h2{font-size:34px;line-height:1.2;margin-bottom:20px}dialog h3{font-size:16px;letter-spacing:-.03em;margin-top:25px}dialog ul{padding-left:22px;font-size:16px}dialog li{margin:9px 0}.requirements{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}.dialog-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:25px}.dialog-bottom strong{font:26px var(--mono)}.dialog-bottom span{font-size:12px;color:var(--muted)}#detail-demo{margin-top:23px;width:100%}[hidden]{display:none!important}.skip,.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}.skip:focus{position:fixed;z-index:10;top:12px;left:12px;width:auto;height:auto;clip:auto;background:white;padding:12px}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){body{padding:0 30px}.catalog-unused-header,main,footer{border-left:1px solid var(--line);border-right:1px solid var(--line)}}@media(max-width:950px){.catalog-unused-header{padding:24px}.hero-copy{padding:42px 24px}.hero{min-height:620px}.hero-meta{gap:12px}.collection,#bundles{padding:56px 24px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.how{padding:42px 24px;gap:35px}.bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bundle:nth-child(2){border-right:0}.bundle:nth-child(-n+2){border-bottom:1px solid var(--line)}}@media(max-width:650px){.catalog-unused-header{padding:20px;gap:12px}.catalog-unused-header nav{gap:16px;font-size:12px}.catalog-unused-header nav a:last-child,.launch{display:none}.brand img{width:90px}.hero{display:flex;flex-direction:column}.hero-copy{padding:36px 20px}h1{font-size:67px;margin:22px 0}.intro{font-size:18px}.hero-meta{font-size:9px;gap:22px}.hero-art{height:370px;border-left:0;border-top:1px solid var(--line)}.hero-art>img{object-position:center 60%}.section-heading{display:block}.section-heading>p{margin-top:22px}.collection,#bundles{padding:44px 20px}.filters{gap:7px}.filters button{padding:11px 12px;font-size:10px}.product-grid{grid-template-columns:1fr}.product-card{min-height:245px;padding:23px}.card-top{margin-bottom:25px}.how{grid-template-columns:1fr;padding:40px 20px;gap:35px}.bundle-grid{grid-template-columns:1fr}.bundle{border-right:0;border-bottom:1px solid var(--line)}.bundle p{margin-bottom:20px}.bundle-price{margin-top:0}footer{padding:25px 20px;flex-wrap:wrap}footer p{order:3;width:100%}dialog{padding:22px}dialog h2{font-size:28px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}