:root {
  --black: #1b1b19;
  --paper: #ddd8cd;
  --yellow: #9b8046;
  --pink: #815052;
  --accent-gold: #c19a4b;
  --blue: #667985;
  --green: #59645b;
  --steel: #747a7a;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Archivo Black", "Arial Black", sans-serif;
  --tag: "Sedgwick Ave Display", cursive;
  --mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--black);
  background: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  min-height: 64px;
  padding: 0 clamp(16px, 3vw, 38px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--paper);
  background: rgba(27,27,25,.96);
  border-bottom: 1px solid rgba(221,216,205,.35);
  backdrop-filter: blur(12px);
}
.brand { width: 118px; height: 60px; position: relative; overflow: hidden; display: block; }
.brand img { position: absolute; width: 216px; max-width: none; left: 50%; top: 50%; transform: translate(-50%,-50%); mix-blend-mode: screen; }
.topbar nav { display: flex; gap: clamp(16px, 2.5vw, 32px); font: 700 .67rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.topbar nav a { padding-block: 8px; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--yellow); }
.edition { justify-self: end; color: var(--yellow); font: 700 .64rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }

.product-hero {
  min-height: 100svh;
  padding-top: 64px;
  display: grid;
  grid-template-columns: minmax(380px,.76fr) minmax(0,1.24fr);
  color: var(--paper);
  background: var(--black);
}
.hero-copy {
  padding: clamp(48px, 6vw, 92px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(221,216,205,.4);
}
.kicker, .section-kicker { font: 700 .7rem/1.45 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.kicker { color: var(--yellow); }
.hero-copy h1 {
  margin: 26px 0 28px;
  font: 400 clamp(4.5rem, 9vw, 9.4rem)/.78 var(--display);
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.hero-copy h1 .tag { display: block; margin-top: .08em; color: var(--accent-gold); font: 400 .47em/.9 var(--tag); letter-spacing: 0; text-transform: none; transform: rotate(-2deg); }
.hero-copy h2 { margin: 0 0 22px; max-width: 18ch; font: 700 clamp(1.18rem, 1.7vw, 1.65rem)/1.34 var(--sans); letter-spacing: -.02em; }
.hero-copy p { margin: 0; max-width: 45ch; color: #c9c4b8; font-size: .98rem; line-height: 1.72; }
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 210px; padding: 16px 18px; border: 1px solid var(--yellow); color: var(--black); background: var(--yellow); font: 700 .68rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: transform .18s ease, box-shadow .18s ease; }
.button.secondary { color: var(--paper); background: transparent; border-color: rgba(221,216,205,.55); }
.button:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--accent-gold); }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 4px; }

.hero-visual { position: relative; min-height: calc(100svh - 64px); padding: clamp(24px, 4.5vw, 70px); display: grid; place-items: center; overflow: hidden; }
.asx .hero-visual { background: var(--blue); }
.ny81z .hero-visual { background: var(--green); }
.ny90 .hero-visual { background: var(--steel); }
.hero-visual::before { content: ""; position: absolute; width: min(58vw,760px); aspect-ratio: 1; border: 1px solid rgba(221,216,205,.27); border-radius: 50%; }
.hero-screen { position: relative; z-index: 1; width: 100%; border: 1px solid rgba(221,216,205,.55); box-shadow: 14px 14px 0 rgba(27,27,25,.72); filter: saturate(.72) contrast(1.03) brightness(1.08); }
.asx .hero-screen { filter: saturate(.92) contrast(1.04) brightness(1.02); }
.ny81z .hero-screen { filter: saturate(.9) contrast(1.04) brightness(1.02); }
.ny90 .hero-screen { filter: saturate(.88) contrast(1.03) brightness(.98); }
.screen-note { position: absolute; z-index: 2; right: clamp(22px, 4vw, 62px); bottom: clamp(22px, 4vw, 62px); padding: 11px 14px; color: var(--paper); background: rgba(27,27,25,.92); font: 700 .64rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.ticker { overflow: hidden; border-block: 2px solid var(--black); background: var(--yellow); }
.ticker-track { padding: 12px 0; display: flex; width: max-content; animation: ticker 28s linear infinite; font: 700 .7rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.ticker-track span { padding-right: 38px; }
@keyframes ticker { to { transform: translateX(-50%); } }

.story {
  padding: clamp(78px, 11vw, 160px) clamp(22px, 7vw, 108px);
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: clamp(48px, 9vw, 150px);
  align-items: start;
}
.story-title { position: sticky; top: 110px; }
.story h2 { margin: 20px 0 0; font: 400 clamp(3.4rem, 7vw, 7.6rem)/.83 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.story h2 em { display: block; color: var(--accent-gold); font-family: var(--tag); font-weight: 400; text-transform: none; }
.story-copy { max-width: 60ch; }
.story-copy p { margin: 0 0 1.25em; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.82; }
.statement { margin-top: 46px; padding-top: 25px; border-top: 2px solid var(--black); color: var(--accent-gold); font: 400 clamp(1.7rem, 3vw, 3rem)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }

.feature-section { padding: clamp(72px, 9vw, 130px) clamp(22px, 6vw, 90px); color: var(--paper); background: var(--black); }
.section-head { margin-bottom: 52px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.section-head h2 { margin: 16px 0 0; font: 400 clamp(3rem, 6vw, 6.4rem)/.85 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.section-head p { margin: 0; max-width: 38ch; color: #aaa69c; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid rgba(221,216,205,.45); }
.feature-card { min-height: 300px; padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(221,216,205,.45); }
.feature-card:last-child { border-right: 0; }
.feature-number { color: var(--yellow); font: 700 .7rem/1 var(--mono); }
.feature-card h3 { margin: 52px 0 15px; font: 400 clamp(1.6rem, 2.7vw, 2.7rem)/.95 var(--display); text-transform: uppercase; }
.feature-card p { margin: 0; color: #bdb8ad; line-height: 1.65; }

.workflow { padding: clamp(78px, 10vw, 150px) clamp(22px, 7vw, 108px); }
.workflow h2 { margin: 16px 0 58px; font: 400 clamp(3rem, 6.8vw, 7rem)/.84 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.steps { counter-reset: step; border-top: 2px solid var(--black); }
.step { counter-increment: step; padding: 27px 0; display: grid; grid-template-columns: 80px minmax(160px,.6fr) minmax(0,1fr); gap: 24px; align-items: baseline; border-bottom: 1px solid var(--black); }
.step::before { content: "0" counter(step); font: 700 .72rem/1 var(--mono); }
.step h3 { margin: 0; font: 400 clamp(1.7rem, 3vw, 3rem)/1 var(--display); text-transform: uppercase; }
.step p { margin: 0; max-width: 55ch; line-height: 1.65; }

.specs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); }
.spec { padding: 30px clamp(18px, 3vw, 40px); border-right: 1px solid var(--black); }
.spec:last-child { border-right: 0; }
.spec span { display: block; font: 700 .62rem/1.3 var(--mono); text-transform: uppercase; }
.spec strong { display: block; margin-top: 13px; font: 400 clamp(1.35rem, 2.4vw, 2.35rem)/1 var(--display); text-transform: uppercase; }

.closing { padding: clamp(82px, 12vw, 170px) clamp(22px, 7vw, 108px); color: var(--paper); background: var(--black); text-align: center; }
.closing p { margin: 0 auto 34px; max-width: 14ch; font: 400 clamp(3.1rem, 7.5vw, 8rem)/.82 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.closing p em { color: var(--accent-gold); font-family: var(--tag); font-weight: 400; text-transform: none; }
.closing .button { margin-inline: auto; }

footer { padding: 32px clamp(22px, 6vw, 90px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; color: var(--paper); background: #000; }
.footer-brand { width: 190px; height: 106px; position: relative; overflow: hidden; }
.footer-brand img { position: absolute; width: 390px; max-width: none; left: 50%; top: 50%; transform: translate(-50%,-50%); mix-blend-mode: screen; }
.footer-meta { color: #999; text-align: right; font: 700 .63rem/1.8 var(--mono); text-transform: uppercase; }

@media (max-width: 960px) {
  .product-hero, .story { grid-template-columns: 1fr; }
  .hero-copy { border-right: 0; border-bottom: 1px solid rgba(221,216,205,.4); }
  .hero-visual { min-height: 62vw; }
  .story-title { position: static; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 240px; border-right: 0; border-bottom: 1px solid rgba(221,216,205,.45); }
  .feature-card:last-child { border-bottom: 0; }
  .specs { grid-template-columns: 1fr 1fr; }
  .spec:nth-child(2) { border-right: 0; }
  .spec:nth-child(-n+2) { border-bottom: 1px solid var(--black); }
}

@media (max-width: 640px) {
  .topbar { grid-template-columns: 1fr auto; padding-inline: 14px; }
  .topbar nav { display: none; }
  .edition { font-size: .57rem; }
  .product-hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 52px 20px; }
  .hero-copy h1 { font-size: clamp(4.1rem, 21vw, 6.5rem); }
  .hero-visual { min-height: 68vw; padding: 20px; }
  .screen-note { right: 20px; bottom: 20px; }
  .section-head { align-items: start; flex-direction: column; }
  .story h2, .section-head h2, .workflow h2 { overflow-wrap: anywhere; }
  .step { grid-template-columns: 42px 1fr; }
  .step p { grid-column: 2; }
  .specs { grid-template-columns: 1fr; }
  .spec { border-right: 0; border-bottom: 1px solid var(--black); }
  .spec:nth-child(2) { border-right: 0; }
  .spec:nth-child(-n+2) { border-bottom: 1px solid var(--black); }
  .spec:last-child { border-bottom: 0; }
  footer { grid-template-columns: 1fr; }
  .footer-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
}