/* Landing TOPTAN 2000 components — from design-system-v2/components/bundle.css (no Google Fonts). */

/* TOPTAN 2000 — neo-2000s components. Every colour, depth, size and timing reads a token from tokens.css. */

/* ---------- utilities ---------- */
.ty-desk{background-color:var(--surface-desk);background-image:radial-gradient(var(--line) 1px,#0000 1.2px);background-size:8px 8px;padding:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start;font:400 14px/20px var(--font-sans);color:var(--ink)}
.ty-screen{background-color:var(--screen-bg);background-image:radial-gradient(var(--screen-grid) 0.8px,#0000 1px);background-size:4px 4px;color:var(--screen-ink);border-radius:var(--radius-md);box-shadow:var(--well)}
.ty-field{display:flex;align-items:center;gap:var(--space-3);min-height:var(--size-control);box-sizing:border-box;padding:0 var(--space-4);background:var(--surface-well);color:var(--ink);box-shadow:var(--well);border-radius:var(--radius-sm);font:400 12px/16px var(--font-mono)}
.ty-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.ty-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.ty-label{font:500 10px/12px var(--font-mono);letter-spacing:.8px;text-transform:uppercase;color:var(--ink-muted)}
.ty-caption{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.ty-grille{flex:1;align-self:stretch;min-width:12px;margin:9px 0;background-image:radial-gradient(var(--line) 1.1px,#0000 1.3px);background-size:5px 5px;opacity:1}

/* dither ramps: the "resolve" texture (noise → solid). Colour = currentColor. */
.ty-d1{background:radial-gradient(currentColor .9px,#0000 1px) 0 0/3px 3px}
.ty-d2{background:repeating-conic-gradient(currentColor 0 25%,#0000 0 50%) 0 0/2px 2px}
.ty-d3{background:radial-gradient(#0000 .9px,currentColor 1px) 0 0/3px 3px}
.ty-d4{background:currentColor}

/* ---------- ActivityMatrix ---------- */
.ty-matrix{display:inline-grid;gap:var(--g,2px);padding:var(--p,3px);background:var(--screen-bg);border-radius:calc(var(--radius-xs) + 1px);box-shadow:var(--well);vertical-align:middle;flex:none}
.ty-matrix i{display:block;width:var(--d,3px);height:var(--d,3px);border-radius:var(--radius-full);background:var(--screen-grid)}
.ty-matrix i.on{background:var(--screen-live);box-shadow:var(--glow-live)}
.ty-matrix.is-idle i.on{background:var(--screen-muted);box-shadow:none}
.ty-matrix.is-error i.on{background:var(--led-red);box-shadow:none}

/* ---------- CartridgeMenu ---------- */
.ty-cart{position:relative;box-sizing:border-box;padding:var(--space-5);outline:none;user-select:none;font:500 14px/20px var(--font-mono)}
.ty-cart:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ty-cart__top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.ty-cart__title{margin:0;font:800 20px/24px var(--font-display);letter-spacing:1px;color:var(--screen-ink);white-space:nowrap}
.ty-cart__title b{font-weight:900;color:var(--accent)}
.ty-cart__head{font:500 10px/12px var(--font-mono);letter-spacing:.8px;color:var(--screen-muted);text-align:right}
.ty-cart__grid{display:grid;grid-auto-flow:column;column-gap:var(--space-6);row-gap:var(--space-1);margin:0;padding:0;list-style:none}
.ty-cart__item{display:flex;align-items:center;gap:var(--space-3);height:var(--size-row);padding:0 var(--space-3) 0 var(--space-2);border-radius:var(--radius-xs);white-space:nowrap;cursor:pointer;min-width:0;color:var(--screen-ink)}
.ty-cart__cursor{width:8px;flex:none;color:var(--on-accent);visibility:hidden}
.ty-cart__num{flex:none;color:var(--screen-muted);font-variant-numeric:tabular-nums}
.ty-cart__label{flex:1;min-width:0;overflow:hidden}
.ty-cart__label>span{display:inline-block}
.ty-cart__meta{flex:none;font:500 10px/12px var(--font-mono);letter-spacing:.8px;color:var(--screen-muted)}
.ty-cart__item.is-selected{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow-accent)}
.ty-cart__item.is-selected .ty-cart__num,.ty-cart__item.is-selected .ty-cart__meta{color:var(--on-accent)}
.ty-cart__item.is-selected .ty-cart__cursor{visibility:visible;animation:ty-blink calc(var(--dur-blink) * 2) var(--ease-step) infinite}
.ty-cart__item.is-selected .ty-cart__label.is-long>span{animation:ty-marquee 4800ms steps(60) infinite}
.ty-cart__item.is-disabled,.ty-cart__item.is-disabled .ty-cart__num{color:var(--screen-dim)}
.ty-cart__item.is-resolving{color:var(--accent);background:none;box-shadow:none;animation:ty-resolve calc(var(--dur-step) * 4) var(--ease-step) 1 forwards}
.ty-cart__item.is-resolving>*{visibility:hidden}
.ty-cart__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-4);font:500 10px/12px var(--font-mono);letter-spacing:.8px;color:var(--screen-muted)}
.ty-cart__status{display:flex;align-items:center;gap:var(--space-3);color:var(--screen-live)}
.ty-cart__blink{animation:ty-blink calc(var(--dur-blink) * 2) var(--ease-step) infinite}
@keyframes ty-blink{0%{visibility:visible}50%{visibility:hidden}}
@keyframes ty-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ty-resolve{
  0%{background:radial-gradient(currentColor .9px,#0000 1px) 0 0/3px 3px}
  25%{background:repeating-conic-gradient(currentColor 0 25%,#0000 0 50%) 0 0/2px 2px}
  50%{background:radial-gradient(#0000 .9px,currentColor 1px) 0 0/3px 3px}
  75%,100%{background:currentColor}
}

/* ---------- Button (keys) ---------- */
.ty-btn{appearance:none;border:0;margin:0;padding:0 var(--space-4);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-width:72px;height:var(--size-control);background:var(--surface-key);color:var(--ink);box-shadow:var(--key);border-radius:var(--radius-sm);font:500 13px/16px var(--font-sans);cursor:pointer;transition:transform var(--dur-press) var(--ease-mech);-webkit-tap-highlight-color:transparent;white-space:nowrap}
.ty-btn:hover:not(:disabled){background:var(--surface-key-hover)}
.ty-btn:active:not(:disabled),.ty-btn.is-pressed{box-shadow:var(--key-pressed);transform:translateY(1px)}
.ty-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ty-btn:disabled{color:var(--ink-faint);box-shadow:0 0 0 1px var(--line);background:transparent;cursor:default}
.ty-btn__led{width:6px;height:6px;border-radius:var(--radius-full);background:var(--screen-grid);box-shadow:inset 0 0 0 1px #00000040;flex:none}
.ty-btn.is-pressed .ty-btn__led{background:var(--phosphor);box-shadow:var(--glow-live)}
.ty-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 0 0 1px #00000040,inset 0 1px 0 #ffffff59,0 1px 0 #0000001a,0 2px 4px -1px #ff5a1f66}
.ty-btn--primary:hover:not(:disabled){background:var(--accent-hover)}
.ty-btn--primary:active:not(:disabled){box-shadow:0 0 0 1px #00000040,inset 0 2px 3px #00000040}
.ty-btn--ghost{background:transparent;box-shadow:none}
.ty-btn--ghost:hover:not(:disabled){background:var(--surface-well);box-shadow:var(--well)}
.ty-btn--sm{height:var(--size-control-sm);min-width:0;padding:0 var(--space-3);font-size:12px}
.ty-btn--lg{height:44px;min-width:120px;padding:0 var(--space-5);font-size:14px;border-radius:var(--radius-md)}
.ty-btn--hero{height:56px;min-width:200px;padding:0 var(--space-6);border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font:900 22px/24px var(--font-display);letter-spacing:.5px;text-transform:uppercase;box-shadow:0 0 0 1px #00000052,inset 0 1px 0 #ffffff66,inset 0 -3px 0 #00000026,0 4px 0 -1px #b0380a,0 10px 20px -8px #ff5a1f99}
.ty-btn--hero:hover:not(:disabled){background:var(--accent-hover)}
.ty-btn--hero:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 1px #00000052,inset 0 2px 4px #00000040,0 1px 0 -1px #b0380a}
.ty-btn--hero:disabled{font:900 22px/24px var(--font-display)}
.ty-btn--deck{min-width:32px;height:var(--size-control-sm);padding:0 var(--space-3);border-radius:var(--radius-xs);background:linear-gradient(180deg,var(--graphite-500),var(--graphite-700));color:var(--graphite-100);box-shadow:0 0 0 1px #000000,inset 0 1px 0 #ffffff26;font:500 11px/1 var(--font-mono)}
.ty-btn--deck:hover:not(:disabled){background:linear-gradient(180deg,#464a51,var(--graphite-500))}
.ty-btn--deck:active:not(:disabled),.ty-btn--deck.is-pressed{background:var(--graphite-900);box-shadow:0 0 0 1px #000000,inset 0 2px 3px #000000;color:var(--signal-orange)}
.ty-btn--deck:disabled{background:transparent;color:var(--graphite-500);box-shadow:0 0 0 1px #000000}

/* ---------- LedDisplay (dot matrix) ---------- */
.ty-led{--led:var(--led-green);display:inline-flex;flex-direction:column;gap:var(--space-2);padding:10px 12px 8px;background:var(--screen-bg);box-shadow:var(--well);border-radius:var(--radius-md);vertical-align:top}
.ty-led--amber{--led:var(--led-amber)}
.ty-led--orange{--led:var(--led-orange)}
.ty-led--ice{--led:var(--led-ice)}
.ty-led--red{--led:var(--led-red)}
.ty-led__svg{display:block;overflow:visible}
.ty-led__svg .off{fill:var(--screen-grid)}
.ty-led__svg .on{fill:var(--led)}
.ty-led__svg .glow{filter:drop-shadow(0 0 2px var(--led))}
.ty-led__meta{display:flex;justify-content:space-between;gap:var(--space-4);font:500 10px/12px var(--font-mono);letter-spacing:.8px;color:var(--screen-muted);text-transform:uppercase}

/* ---------- Logo ---------- */
.ty-logo{display:inline-flex;align-items:center;vertical-align:middle;line-height:0}
.ty-logo__mark{display:block;flex:none;overflow:visible}
.ty-logo__tile{fill:var(--screen-bg)}
.ty-logo__mark .off{fill:var(--screen-grid)}
.ty-logo--dots .off{fill:transparent}
.ty-logo__mark .on{fill:var(--accent)}
.ty-logo--orange.has-glow .on{filter:drop-shadow(0 0 2px var(--accent))}
.ty-logo--ink .on{fill:var(--ink)}
.ty-logo--white .on{fill:var(--graphite-100)}
.ty-logo__word{display:block;fill:var(--ink)}
.ty-logo:has(.ty-logo--white) .ty-logo__word{fill:var(--graphite-100)}

.ty-stop{display:inline-block;width:.11em;height:.11em;margin-left:.05em;background:currentColor;vertical-align:baseline}
.ty-nowrap{white-space:nowrap}
.ty-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= Landing pages (designed for the aluminum theme; work in graphite) ================= */
.ty-page{background:var(--surface-window);color:var(--ink);font:400 14px/20px var(--font-sans);-webkit-font-smoothing:antialiased}
.ty-container{max-width:var(--size-content);margin:0 auto;padding:0 var(--space-6);box-sizing:border-box}
.ty-band{padding:96px 0}
.ty-band--desk{background-color:var(--surface-desk);background-image:radial-gradient(var(--line) 1px,#0000 1.2px);background-size:8px 8px}
.ty-band--rule{box-shadow:inset 0 1px 0 var(--line)}
.ty-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.ty-eyebrow{display:flex;align-items:center;gap:var(--space-3);font:500 10px/12px var(--font-mono);letter-spacing:.8px;text-transform:uppercase;color:var(--ink-muted)}
.ty-eyebrow__index{color:var(--accent-text)}
.ty-link{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.ty-btn{text-decoration:none;box-sizing:border-box}

/* SiteNav */
.ty-nav{position:relative;z-index:20;background:linear-gradient(180deg,var(--metal-hi),var(--metal-mid));box-shadow:inset 0 -1px 0 var(--line),0 1px 0 #ffffff80}
.ty-nav.is-sticky{position:sticky;top:0}
.ty-nav__inner{display:flex;align-items:center;gap:var(--space-5);height:var(--size-nav);max-width:var(--size-content);margin:0 auto;padding:0 var(--space-6);box-sizing:border-box}
.ty-nav__brand{display:inline-flex;align-items:center;flex:none;border-radius:var(--radius-sm)}
.ty-nav__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.ty-nav__grille{margin:22px 0}
.ty-nav__links{display:flex;align-items:center;gap:var(--space-1)}
.ty-nav__link{padding:6px 10px;border-radius:var(--radius-xs);font:500 13px/16px var(--font-sans);color:var(--ink-muted);text-decoration:none}
.ty-nav__link:hover{color:var(--ink);background:var(--surface-well);box-shadow:var(--well)}
.ty-nav__link.is-active{color:var(--ink)}
.ty-nav__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ty-nav__actions{display:flex;align-items:center;gap:var(--space-3);flex:none}
.ty-nav__menu{display:none}

/* Hero */
.ty-hero{padding:88px 0 96px}
.ty-hero__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;max-width:var(--size-content);margin:0 auto;padding:0 var(--space-6);box-sizing:border-box}
.ty-hero__inner.is-solo{grid-template-columns:minmax(0,1fr);max-width:880px}
.ty-hero__copy{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}
.ty-hero__title{margin:0;font:900 clamp(48px,7.4vw,88px)/0.91 var(--font-display);letter-spacing:-2px;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.ty-hero__lead{margin:0;max-width:520px;font:400 18px/28px var(--font-sans);color:var(--ink-muted)}
.ty-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-top:var(--space-3)}
.ty-hero__note{margin:0;font:500 10px/12px var(--font-mono);letter-spacing:.8px;text-transform:uppercase;color:var(--ink-muted)}
.ty-hero__visual{display:flex;justify-content:center;min-width:0}

/* SectionHeader */
.ty-sechead{display:flex;flex-direction:column;gap:var(--space-4);max-width:680px;margin-bottom:48px}
.ty-sechead.is-center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.ty-sechead__title{margin:0;font:800 clamp(28px,4.4vw,44px)/1 var(--font-display);letter-spacing:-.5px;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.ty-sechead__lead{margin:0;font:400 18px/28px var(--font-sans);color:var(--ink-muted)}

/* FeatureCard */
.ty-card{position:relative;display:flex;flex-direction:column;background:var(--surface-key);border-radius:var(--radius-lg);box-shadow:var(--panel);overflow:hidden;min-width:0}
.ty-card__visual{margin:12px 12px 0;min-height:132px;display:flex;align-items:center;justify-content:center;padding:var(--space-5);box-sizing:border-box}
.ty-card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);flex:1}
.ty-card__top{display:flex;justify-content:space-between;align-items:center}
.ty-card__index{font:500 12px/16px var(--font-mono);color:var(--accent-text);font-variant-numeric:tabular-nums}
.ty-card__title{margin:0;font:600 18px/24px var(--font-sans);letter-spacing:-.2px;color:var(--ink)}
.ty-card__text{margin:0;font:400 14px/22px var(--font-sans);color:var(--ink-muted)}

/* PricingCard */
.ty-price .ty-card__body{gap:var(--space-4)}
.ty-price__led{align-self:stretch}
.ty-price__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.ty-price__list li{position:relative;padding-left:20px;font:400 14px/20px var(--font-sans);color:var(--ink)}
.ty-price__list li::before{content:"";position:absolute;left:3px;top:7px;width:6px;height:6px;border-radius:var(--radius-full);background:var(--accent-text)}
.ty-price__cta{margin-top:auto;padding-top:var(--space-3);display:flex}
.ty-price__cta>*{flex:1}
.ty-price.is-featured{box-shadow:0 0 0 2px var(--accent),var(--panel)}
.ty-price__badge{position:absolute;top:16px;right:16px;padding:4px 8px;border-radius:var(--radius-xs);background:var(--accent);color:var(--on-accent);font:600 10px/12px var(--font-mono);letter-spacing:.8px;text-transform:uppercase}

/* SiteFooter — the graphite base of the device, fixed in both themes */
.ty-footer{background:var(--graphite-900);color:var(--graphite-300);font:400 14px/20px var(--font-sans)}
.ty-footer__inner{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(140px,1fr));gap:var(--space-8);max-width:var(--size-content);margin:0 auto;padding:64px var(--space-6) 48px;box-sizing:border-box}
.ty-footer__brand{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.ty-footer .ty-logo__word{fill:var(--graphite-100)}
.ty-footer__tagline{margin:0;max-width:300px;color:var(--graphite-300)}
.ty-footer__status{display:inline-flex;align-items:center;gap:var(--space-3);font:500 10px/12px var(--font-mono);letter-spacing:.8px;text-transform:uppercase;color:var(--phosphor)}
.ty-footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.ty-footer__head{font:500 10px/12px var(--font-mono);letter-spacing:.8px;text-transform:uppercase;color:var(--graphite-100)}
.ty-footer__link{color:var(--graphite-300);text-decoration:none;font:400 14px/20px var(--font-sans)}
.ty-footer__link:hover{color:var(--graphite-100);text-decoration:underline;text-underline-offset:3px}
.ty-footer__link:focus-visible{outline:2px solid var(--graphite-100);outline-offset:2px;border-radius:2px}
.ty-footer__base{display:flex;align-items:center;gap:var(--space-5);max-width:var(--size-content);margin:0 auto;padding:16px var(--space-6) 24px;box-sizing:border-box;box-shadow:inset 0 1px 0 #ffffff14;font:500 10px/12px var(--font-mono);letter-spacing:.8px;text-transform:uppercase}
.ty-footer__grille{margin:0;height:10px;background-image:radial-gradient(var(--graphite-500) 1.1px,#0000 1.3px)}

@media (max-width: 900px){
  .ty-hero{padding:56px 0 64px}
  .ty-hero__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .ty-grid{grid-template-columns:minmax(0,1fr)}
  .ty-band{padding:64px 0}
  .ty-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ty-footer__brand{grid-column:1 / -1}
}
@media (max-width: 760px){
  .ty-container,.ty-nav__inner,.ty-hero__inner{padding:0 16px}
  .ty-nav__links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;background:var(--surface-window);box-shadow:inset 0 -1px 0 var(--line),0 12px 24px -12px #00000040}
  .ty-nav.is-open .ty-nav__links{display:flex}
  .ty-nav__link{padding:12px 8px;font-size:15px}
  .ty-nav__menu{display:inline-flex}
  .ty-nav__grille{visibility:hidden}
  .ty-nav__actions .ty-btn--primary{display:none}
  .ty-footer__inner,.ty-footer__base{padding-left:16px;padding-right:16px}
}

@media (prefers-reduced-motion: reduce){
  .ty-cart__item.is-selected .ty-cart__cursor,.ty-cart__blink{animation:none}
  .ty-cart__item.is-selected .ty-cart__label.is-long>span{animation:none}
  .ty-cart__item.is-resolving{animation:none;background:currentColor}
  .ty-toggle__thumb,.ty-btn,.ty-cap{transition:none}
}