/* nodal — 스타일. 색·글자·간격은 tokens.css 의 변수만 쓴다.
   두 겹이다: 기본(정지 컷 — reduced-motion·스크립트 차단에서 내용이 다 보인다) / html.motion(장면 고정·스크롤 타임라인). */

/* ---------- 리셋 ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ol, ul, figure, table) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(img, canvas, svg) { display: block; max-width: 100%; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

html {
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--spacing-4); top: var(--spacing-2); z-index: 20;
  padding: var(--spacing-3) var(--spacing-4); background: var(--color-ink); color: var(--color-bg);
  transform: translateY(-200%); text-decoration: none;
}
.skip:focus-visible { transform: none; }
.fic { color: inherit; opacity: 1; font-size: var(--text-small); }
.arrow { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; }

/* ---------- 머리: ruler ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: calc(var(--spacing-header) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--spacing-gutter) 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-8);
  /* 방이 가라앉는 만큼 머리 바탕도 따라간다(--room 0~1, main.js) */
  background: color-mix(in oklab, var(--color-room-top) calc(var(--room, 0) * 100%), var(--color-bg));
  border-bottom: 1px solid var(--color-hiss);
}
.wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em;
  text-decoration: none; line-height: 1; display: inline-flex; align-items: center; min-height: 44px;
}
.ruler { position: relative; align-self: stretch; }
.ruler ol { display: flex; height: 100%; }
.ruler li { flex: var(--w, 1) 1 0; min-width: 4.75rem; border-left: 1px solid var(--color-hiss); }
.ruler li:last-child { border-right: 1px solid var(--color-hiss); }
.ruler a {
  display: flex; align-items: center; height: 100%; padding-left: var(--spacing-2);
  font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-mute);
  text-decoration: none; white-space: nowrap; overflow: hidden;
}
.ruler a:hover { color: var(--color-ink); }
.ruler li.is-on a { color: var(--color-ink); }
.needle {
  position: absolute; left: 0; bottom: 0; width: 2px; height: 12px;
  background: var(--color-accent); will-change: transform;
}
.hdr-end { display: flex; align-items: center; gap: var(--spacing-4); }
.readout { font-family: var(--font-mono); font-size: var(--text-small); font-variant-numeric: tabular-nums; min-width: 5.5ch; text-align: right; }
.pause {
  min-width: 44px; min-height: 44px; padding: 0 var(--spacing-2);
  font-size: var(--text-small); font-weight: 600; letter-spacing: 0.01em;
  user-select: none; -webkit-user-select: none;
}
.pause-short { display: none; font-family: var(--font-mono); }
.buy {
  font-size: var(--text-small); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  min-height: 44px; display: inline-flex; align-items: center;
}

@media (max-width: 1023px) { .r-name { display: none; } .ruler li { min-width: 0; } }
/* <720 — 눈금은 머리 둘째 줄 전폭으로 내려가 칸마다 44px 터치 칸을 얻는다(qa-1 P2-1). 모양은 같다: 칸 사이 세로 눈금만 */
@media (max-width: 719px) {
  .hdr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: var(--spacing-header-row) var(--spacing-ruler-row);
    gap: 0 var(--spacing-3);
  }
  .wordmark { font-size: 1.125rem; grid-row: 1; grid-column: 1; }
  .hdr-end { grid-row: 1; grid-column: 3; }
  .ruler { grid-row: 2; grid-column: 1 / -1; border-top: 1px solid var(--color-hiss); }
  .ruler li { min-width: auto; } /* 링크의 44px 최소 폭을 칸이 따라간다 */
  .ruler a { padding-left: var(--spacing-2); min-width: 2.75rem; } /* 칸이 넓어져 720~1023 의 번호 변형을 쓴다 — 빈 칸으로 보이지 않게 */
  .hdr-end { gap: var(--spacing-1); }
  .pause-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pause-short { display: inline; }
}

/* ---------- 고정 층 ---------- */
.room {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--color-room-top), var(--color-room-mid) 50%, var(--color-room-bottom));
  opacity: var(--room, 0);
}
.field { position: fixed; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; }
.field.is-on { visibility: visible; }
.field-cv { width: 100%; height: 100%; }
main { position: relative; z-index: 2; }

/* ---------- 장면 공통 ---------- */
.scene { position: relative; }
.stage { position: relative; min-height: 100svh; overflow: hidden; }

html.motion .s-noise { --seg: 120svh; }
html.motion .s-silence { --seg: 200svh; }
html.motion .s-still { --seg: 100svh; }
html.motion .s-burst { --seg: 160svh; }
@media (max-width: 719px) {
  html.motion .s-noise { --seg: 90svh; }
  html.motion .s-silence { --seg: 160svh; }
  html.motion .s-still { --seg: 80svh; }
  html.motion .s-burst { --seg: 140svh; }
}
/* 장면 n+1 의 고정이 장면 n 의 고정이 풀리는 바로 그 위치에서 시작한다(이음매 0, 위에 칠해진다) */
html.motion .scene { height: calc(100svh + var(--seg)); }
html.motion .scene + .scene { margin-top: -100svh; }
html.motion .scene > .stage { position: sticky; top: 0; height: 100svh; min-height: 0; }

/* ---------- 장면 1 — Noise ---------- */
.s-noise .stage { background: var(--color-bg) url(/nodal/media/noise-still.webp?v=2b2217ba) center / cover no-repeat; }
html.motion .s-noise .stage { background: none; }
html.motion.no-gl .s-noise .stage { background: var(--color-bg) url(/nodal/media/noise-still.webp?v=2b2217ba) center / cover no-repeat; }

.hl-wrap { position: absolute; left: var(--spacing-gutter); right: var(--spacing-gutter); bottom: 17svh; will-change: transform, opacity; }
.hl {
  font-family: var(--font-display); font-size: var(--text-mega); line-height: var(--text-mega--line-height);
  font-weight: 600; font-stretch: 100%; letter-spacing: -0.02em;
}
.hl .ln { display: block; }
.noise-notes {
  position: absolute; right: var(--spacing-gutter); bottom: 5svh;
  max-width: 24rem; text-align: right; color: var(--color-mute); font-size: var(--text-small);
}

html.motion .hl .char {
  display: inline-block;
  --n: 0; --na: 0; --ey: 0;
  transform: translateY(calc((var(--n) * 0.08 * var(--A, 1) + var(--ey)) * 1em)) rotate(calc(var(--n) * var(--rot, 4deg) * var(--A, 1)));
  font-weight: calc(300 + 500 * var(--A, 1));
  font-stretch: calc((100 - 25 * var(--na) * var(--A, 1)) * 1%);
}
/* 등장 전 숨김 — main.js 가 없으면 2.5초 뒤 스스로 보인다(정지 상태 보장) */
html.motion:not(.ready) .hl-wrap { opacity: 0; animation: nodal-failsafe 1ms linear 2.5s forwards; }
@keyframes nodal-failsafe { to { opacity: 1; } }

@media (max-width: 719px) {
  .hl { font-size: var(--text-mega-m); }
  .hl .w { display: block; }
  .hl-wrap { top: calc(var(--spacing-header) + env(safe-area-inset-top) + var(--spacing-6)); bottom: auto; }
  .noise-notes { left: var(--spacing-gutter); right: var(--spacing-gutter); text-align: left; bottom: calc(var(--spacing-6) + env(safe-area-inset-bottom)); }
  html.motion .hl .char { --rot: 2deg; }
}

/* ---------- 장면 2 — Silence ---------- */
.s-silence .stage {
  background: linear-gradient(var(--color-room-top), var(--color-room-mid) 50%, var(--color-room-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) min(64svh, 44%) minmax(0, 1fr); align-items: center; gap: var(--spacing-8);
  padding: calc(var(--spacing-header) + var(--spacing-12)) var(--spacing-gutter) var(--spacing-12);
}
.seq {
  position: relative; width: 100%; aspect-ratio: 1; grid-column: 2; grid-row: 1;
  /* 프레임 가장자리를 방 색으로 녹인다 — 이음매가 안 보이게 */
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-ink) 14%, var(--color-ink) 86%, transparent), linear-gradient(transparent, var(--color-ink) 9%, var(--color-ink) 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--color-ink) 14%, var(--color-ink) 86%, transparent), linear-gradient(transparent, var(--color-ink) 9%, var(--color-ink) 91%, transparent);
  mask-composite: intersect;
}
.seq-cv { display: none; width: 100%; height: 100%; }
.seq-still { width: 100%; height: 100%; object-fit: cover; }
.horizon { display: none; }
.meter { grid-column: 1; grid-row: 1; }
.meter-label { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-mute-room); margin-bottom: var(--spacing-2); }
.meter-val { display: none; }
.meter-static {
  font-family: var(--font-mono); font-size: var(--text-h2); line-height: 1; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 0.25em; white-space: nowrap;
}
.meter-static .arrow { width: 0.8em; height: 0.8em; }
.caps { grid-column: 3; grid-row: 1; display: grid; gap: var(--spacing-4); font-size: var(--text-lead); line-height: 1.35; max-width: 22rem; }

html.motion .s-silence .stage { display: block; padding: 0; background: none; }
html.motion .seq {
  position: absolute; left: 50%; top: 50%; width: var(--side, 100svh); margin: 0;
  translate: -50% -50%; will-change: transform, opacity;
}
html.motion .seq-cv { display: block; }
html.motion .seq-still { display: none; }
html.motion .meter { position: absolute; left: var(--spacing-gutter); bottom: 9svh; }
html.motion .meter-val {
  display: block; font-family: var(--font-mono); font-size: var(--text-meter); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em; white-space: nowrap;
}
.meter-unit { font-size: 0.42em; letter-spacing: 0; margin-left: 0.2em; color: var(--color-mute-room); }
html.motion .meter-static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.motion .caps { position: absolute; right: var(--spacing-gutter); top: 50%; translate: 0 -50%; width: min(22rem, 26vw); }
html.motion .caps li { will-change: transform, opacity; }

@media (max-width: 1023px) {
  .s-silence .stage { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .seq, .meter, .caps { grid-column: 1; grid-row: auto; }
  .seq { justify-self: center; width: min(100%, 64svh); }
}
/* 720~1023: 무대가 화면 폭을 다 덮는다 — 계기·캡션을 프레임 위쪽의 빈 하늘로 */
@media (min-width: 720px) and (max-width: 1023px) {
  html.motion .seq { --side: min(100svh, 100vw); top: 57%; }
  html.motion .meter { top: calc(var(--spacing-header) + var(--spacing-6)); bottom: auto; }
  html.motion .caps { top: calc(var(--spacing-header) + var(--spacing-8)); translate: none; width: min(20rem, 40vw); }
}
@media (max-width: 719px) {
  html.motion .seq { --side: min(100svh, 165vw); }
  html.motion .meter { top: calc(var(--spacing-header) + env(safe-area-inset-top) + var(--spacing-4)); bottom: auto; }
  html.motion .caps {
    top: auto; bottom: calc(var(--spacing-8) + env(safe-area-inset-bottom)); translate: none;
    left: var(--spacing-gutter); width: auto; height: 3.5em; display: block;
  }
  html.motion .caps li { position: absolute; inset: 0 0 auto 0; }
}

/* ---------- 장면 3 — Still ---------- */
.s-still .stage {
  display: grid; align-content: center; background: var(--color-bg);
  padding: calc(var(--spacing-header) + var(--spacing-12)) var(--spacing-gutter);
}
.still-txt {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-still);
  line-height: var(--text-still--line-height); letter-spacing: -0.025em; padding-left: 12vw;
}
.sl { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.sl > span { display: block; }
.slit, .still-horizon { display: none; }
html.motion .still-txt { position: absolute; left: var(--spacing-gutter); top: 50%; translate: 0 -50%; will-change: transform; }
html.motion .sl > span { will-change: transform; }
/* 장면 2 가 100% 에 남긴 수평선(셰이더 먹색 2px 선)을 같은 높이에서 이어 받는다 — top 은 main.js 가 잰다 */
html.motion .still-horizon {
  display: block; position: absolute; left: 0; right: 0; top: 75%; height: 2px; translate: 0 -1px;
  background: var(--color-ink); pointer-events: none;
}
html.motion .slit {
  display: block; position: absolute; left: 0; right: 0; top: 46svh; height: 8svh;
  background: var(--color-ink); transform: scaleY(0);
}
@media (max-width: 719px) { .still-txt { padding-left: 0; } }

/* ---------- 장면 4 — Burst ---------- */
.s-burst .stage { min-height: 0; background: var(--color-bg); }
.pnl {
  position: relative; min-height: 86svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
}
.pnl-ink { background: var(--color-ink); color: var(--color-bg); }
.pnl-paper { background: var(--color-bg); color: var(--color-ink); }
.pnl-txt {
  display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-6);
  padding: calc(var(--spacing-header) + var(--spacing-8)) var(--spacing-gutter) var(--spacing-12);
}
.pnl-fig { position: relative; overflow: hidden; min-height: 0; }
.pnl-fig img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.pnl-flip .pnl-fig { order: -1; }
.pnl-solo { grid-template-columns: minmax(0, 1fr); }
.pnl-solo .pnl-txt { align-items: center; text-align: center; }
.pnl-solo .pnl-line { max-width: 40ch; }
.num {
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%;
  font-size: var(--text-burst); line-height: 0.88; letter-spacing: -0.03em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.num-vis { display: inline-flex; align-items: baseline; gap: 0.08em; will-change: transform; }
.pnl-paper .sg, .pnl-paper .un { color: var(--color-accent); }
.pnl-ink .sg, .pnl-ink .un { color: var(--color-accent-soft); }
.pnl-3 .num { font-size: calc(var(--text-burst) * 1.6); }
.pnl-line { font-size: var(--text-lead); line-height: 1.4; max-width: 24ch; }
.pnl-paper .pnl-line { color: var(--color-mute); }
.pnl-paper .pnl-line .fic, .pnl-ink .pnl-line .fic { display: block; margin-top: var(--spacing-1); }

html.motion .s-burst .stage { overflow: hidden; }
html.motion .pnl { position: absolute; inset: 0; min-height: 0; will-change: clip-path, transform; }
html.motion .pnl:not(.pnl-1) { clip-path: inset(0 100% 0 0); }

@media (max-width: 719px) {
  .pnl { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; padding-top: calc(var(--spacing-header) + env(safe-area-inset-top)); }
  .pnl-fig { order: -1; aspect-ratio: 4 / 3; }
  .pnl-txt { justify-content: flex-start; padding: var(--spacing-8) var(--spacing-gutter); }
  .pnl-solo { grid-template-rows: 1fr; }
  .pnl-solo .pnl-txt { justify-content: center; }
}

/* ---------- 장면 5 — Spec ---------- */
.s-spec {
  position: relative; background: var(--color-bg); overflow-x: clip;
  padding: var(--spacing-32) var(--spacing-gutter) var(--spacing-24);
}
.spec-head { display: grid; gap: var(--spacing-4); }
.spec-title {
  font-family: var(--font-display); font-size: var(--text-burst); line-height: 0.9;
  font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; will-change: transform;
}
.spec-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-4); }
.price { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 500; line-height: 1; }
.spec-price .fic { color: var(--color-mute); }
.spec-body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-16);
  margin-top: var(--spacing-16); align-items: start;
}
.spec-fig {
  position: relative; aspect-ratio: 1;
  background: linear-gradient(var(--color-room-top), var(--color-room-mid) 50%, var(--color-room-bottom));
}
.spec-cv { display: none; width: 100%; height: 100%; }
.spec-img { width: 100%; height: 100%; object-fit: cover; }
html.motion .spec-cv { display: block; }
html.motion .spec-img { display: none; }
.spec-side { display: grid; gap: var(--spacing-4); align-content: start; }
.lbl { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-mute); }
.swatches { display: flex; gap: var(--spacing-2); margin-left: -8px; }
.sw { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-full); transition: transform 120ms var(--ease-out-quad); }
.sw:active { transform: scale(0.96); }
.dot { width: 28px; height: 28px; border-radius: var(--radius-full); }
.dot-graphite { background: var(--color-ink); }
.dot-chalk { background: var(--color-paper-dim); box-shadow: inset 0 0 0 1px var(--color-hiss); }
.dot-signal { background: var(--color-accent); }
.sw[aria-checked="true"] .dot { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink); }
.sw[aria-checked="true"] .dot-chalk { box-shadow: inset 0 0 0 1px var(--color-hiss), 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink); }
.sw-status { font-size: var(--text-small); }
.spec-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-6); }
.spec-table tr:nth-child(odd) { background: var(--color-paper-dim); }
.spec-table th, .spec-table td { padding: 12px 16px; text-align: left; font-weight: 400; }
.spec-table th { font-size: var(--text-small); color: var(--color-mute); }
.spec-table td { font-family: var(--font-mono); font-size: var(--text-small); text-align: right; font-variant-numeric: tabular-nums; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-3);
  min-height: 52px; padding: 0 24px; justify-self: start; margin-top: var(--spacing-8);
  background: var(--color-ink); color: var(--color-bg); border-radius: var(--radius-none);
  font-weight: 600; text-decoration: none; user-select: none; -webkit-user-select: none;
  transition: transform 120ms var(--ease-out-quad);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink); }
html.motion .spec-table tr { will-change: transform, opacity; }

@media (max-width: 719px) {
  .s-spec { padding: var(--spacing-24) var(--spacing-gutter) var(--spacing-16); }
  .spec-body { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-8); margin-top: var(--spacing-8); }
  .btn { justify-self: stretch; }
}

/* ---------- 장면 6 — Land ---------- */
.s-land { position: relative; }
.cta {
  min-height: 70svh; display: grid; align-content: center; justify-items: start; gap: var(--spacing-4);
  padding: var(--spacing-24) var(--spacing-gutter);
}
.cta-title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-still);
  line-height: var(--text-still--line-height); letter-spacing: -0.025em;
}
.cta-title .ln { display: block; }
html.motion .cta-title .char {
  display: inline-block; --n: 0; --na: 0;
  transform: translateY(calc(var(--n) * 0.08 * var(--A, 0) * 1em)) rotate(calc(var(--n) * var(--rot, 4deg) * var(--A, 0)));
  font-weight: calc(300 + 500 * var(--A, 0));
  font-stretch: calc((100 - 25 * var(--na) * var(--A, 0)) * 1%);
}
.faq {
  background: var(--color-bg); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--spacing-16);
  padding: var(--spacing-24) var(--spacing-gutter);
}
.faq-title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.faq-list details { border-top: 1px solid var(--color-hiss); }
.faq-list details:last-child { border-bottom: 1px solid var(--color-hiss); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-6);
  min-height: 44px; padding: var(--spacing-6) 0; font-size: var(--text-lead); line-height: 1.35;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.5rem; line-height: 1; flex: none;
  transition: transform 160ms var(--ease-out-quad);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 var(--spacing-6); max-width: 60ch; color: var(--color-mute); }
html.motion .faq-list details { will-change: transform, opacity; }

@media (max-width: 719px) {
  .cta { min-height: 64svh; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-8); padding: var(--spacing-16) var(--spacing-gutter); }
  html.motion .cta-title .char { --rot: 2deg; }
}

/* ---------- 꼬리 ---------- */
.foot {
  position: relative; z-index: 2; background: var(--color-bg); border-top: 1px solid var(--color-hiss);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4) var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-gutter) calc(var(--spacing-8) + env(safe-area-inset-bottom));
  font-size: var(--text-small); color: var(--color-mute);
}
.foot-mark { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; color: var(--color-ink); letter-spacing: -0.02em; }
.foot-note { flex: 1 1 22rem; }
.foot-links { display: flex; align-items: center; gap: var(--spacing-6); }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 0.2em; }
.pause-foot { color: var(--color-ink); font-weight: 400; }

@media (hover: hover) {
  .buy:hover, .foot-links a:hover { text-decoration-thickness: 2px; }
}