:root {
  --txt-main: #121212;
  --txt-secondary: #787878;
  --ui-frame: #e6e6e6;
  --ui-bg: #f2f2f2;
  --bg-main: #fdfdfc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg-main);
  color: var(--txt-main);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  /* Stop scroll anchoring from nudging scrollY while the sticky nav shrinks,
     which otherwise makes the chips flip stuck/unstuck and jitter. */
  overflow-anchor: none;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ui-frame);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: currentColor;
}

/* 1336px content + 32px side padding = 1400px max */
.site {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: stretch;
}

.rule {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--ui-frame);
}

/* Block spacing (Figma): each block's divider hugs the block above, with 120px
   of air to the next block. Section dividers are direct children of .stack — the
   60px stack gap sits above each, and this margin makes the space below 120px.
   The Zerion→nav divider stays tight so the nav reads as part of the Zerion
   block; the intro carries its own bottom gap (its divider is internal). */
.stack > .rule {
  margin-bottom: 60px;
}
.stack > .rule--tight {
  margin-bottom: 0;
}

/* Two-column rows: content pushed to the right 660px column */

.row {
  display: flex;
  justify-content: flex-end;
}

.row .col {
  width: 660px;
}

/* Intro block: name + bio / work history / links */

.intro {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 40px;
  margin-bottom: 60px; /* its divider is internal — carry the 120px block gap */
}

.intro-name {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--txt-main);
}

.intro-logo {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.intro-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.bio {
  width: 660px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.jobs {
  width: 435px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--txt-main);
}

.job {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

.links {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
}

/* Zerion #1 intro */

.zerion-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.zerion-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.zerion-wordmark {
  display: block;
  width: 108px;
  height: auto;
}

.zerion-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  line-height: 16px;
  color: var(--txt-secondary);
  white-space: nowrap;
}

.zerion-io {
  font-size: 12px;
  line-height: 16px;
  color: var(--txt-secondary);
}

.zerion-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zerion-body p {
  font-size: 14px;
  line-height: 20px;
  color: var(--txt-main);
}

/* Stats (plain text, no card) */

.stats {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat .num {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--txt-main);
  white-space: nowrap;
}

.stat .lbl {
  font-size: 12px;
  line-height: 16px;
  color: var(--txt-secondary);
}

/* Showcase sections (Mobile, Wallet view, Swap) */

.showcase {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.showcase--right {
  align-items: flex-end;
}

/* Mobile section header: 18px title (flex, centred) + 655px caption */
.mobile-head {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.mobile-app-title {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.48px;
  font-weight: 500;
  color: var(--txt-main);
}

/* Larger section title (Zerion DNA) */
.dna-title {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.48px;
  font-weight: 500;
  color: var(--txt-main);
}

.showcase-caption {
  width: 655px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cap-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--txt-main);
}

/* Caption title + small URL link grouped 8px apart */
.cap-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.cap-link {
  font-size: 12px;
  line-height: 16px;
  color: var(--txt-secondary);
}

.cap-desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--txt-main);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "Case Study (Soon)" chip */
.case-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-frame);
  color: var(--txt-secondary);
  border-radius: 8px;
  padding: 12px 40px;
  font-size: 14px;
  font-weight: 500;
}

/* ===== Case-study CTA (Apple-style reveal) ===== */

/* The CTA travels with the scroll across three states (see app.js):
   - rest A: under the caption description (its first home)
   - pinned: 20px above the viewport bottom while you scroll the section
   - rest B: at the end of the block, ~60px above the next divider
   Each hand-off happens where the rest and pinned positions coincide, so the
   button moves continuously and never jumps. .cta-rail and .cta-dock reserve the
   two resting slots so the layout never reflows; the button is positioned by JS. */
.cta-zone {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-self: stretch;
}

/* the section is the positioning context for its travelling button */
.cta-section {
  position: relative;
}

/* rest A — reserves the button's slot under the caption description */
.cta-rail {
  height: 48px;
}

/* rest B — reserves the button's slot at the end of the block. Sits 60px above
   the next divider (via the stack gap). Aligned to the 655px caption column. */
.cta-dock {
  width: 655px;
  max-width: 100%;
  align-self: flex-end;
  height: 48px;
}

/* The button — a pink pill with a label (left) and a dark circle-arrow knob
   (right). Positioned by app.js (absolute at rest A/B, fixed when pinned). The
   bg, label and knob are layered so the reveal can animate each independently:
   the bg grows from a centred dot, the label fades in, the knob rides out to
   the right edge. Hidden until its reveal fires (see app.js). */
.cta-btn {
  position: absolute;
  z-index: 30;
  display: inline-block;
  height: 48px;
  padding: 0 52px 0 20px;
  border-radius: 24px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
}
.cta-btn.is-revealed {
  opacity: 1;
}

/* pink pill background — the reveal grows it from a centred 48px circle */
.cta-bg {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: #ffd3f3;
  transition: background 0.15s ease;
}
.cta-btn:hover .cta-bg {
  background: #ffc4ee;
}

.cta-label {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 48px;
  font-weight: 500;
  color: #3d0003;
}

/* dark circle with the arrow, pinned to the right edge */
.cta-knob {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3d0003;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd3f3; /* arrow matches the pink pill */
}
.cta-knob svg {
  display: block;
  transition: transform 0.2s ease;
}
.cta-btn:hover .cta-knob svg {
  transform: translateX(2px);
}

@media (max-width: 900px) {
  .cta-dock {
    align-self: stretch;
    width: auto;
    height: auto;
  }
  /* no travel on small screens — the button just sits at the end of the block */
  .cta-rail {
    display: none;
  }
  .cta-btn {
    position: relative; /* still a positioning context for bg/knob */
  }
}

/* ===== Case study page ===== */
.cs-top {
  padding-top: 40px;
}

.cs-back {
  font-size: 14px;
  line-height: 20px;
  color: var(--txt-secondary);
  text-decoration: none;
}

.cs-back:hover {
  color: var(--txt-main);
}

.cs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.cs-title {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  font-weight: 500;
  color: var(--txt-main);
}

.cs-headmeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
}

.cs-sub {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--txt-main);
}

.cs-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.cs-impact {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--txt-secondary);
}

/* ===== Long-form case study (660px centred column) ===== */
.cs-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.cs-stack {
  width: 660px;
  max-width: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Sticky left section nav. The ::after spacer mirrors the nav width so the
   660px content column stays centred while the nav sits in the left margin. */
.cs-nav {
  position: sticky;
  top: 40px;
  flex: none;
  width: 209px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-wrap::after {
  content: "";
  flex: none;
  width: 209px;
}

.cs-nav-item {
  font-size: 12px;
  line-height: 16px;
  color: var(--txt-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cs-nav-item:hover {
  color: var(--txt-main);
}

.cs-nav-item.is-active {
  color: var(--txt-main);
  font-weight: 500;
}

@media (max-width: 1160px) {
  .cs-nav,
  .cs-wrap::after {
    display: none;
  }

  .cs-wrap {
    max-width: 660px;
    gap: 0;
  }
}

.cs-name {
  display: inline-block;
  align-self: flex-start;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--txt-main);
  text-decoration: none;
}

.cs-name:hover {
  color: var(--txt-secondary);
}

.cs-sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 40px;
}

.cs-sec--intro {
  gap: 32px;
}

.cs-h {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.48px;
  font-weight: 500;
  color: var(--txt-main);
}

.cs-lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--txt-main);
}

.cs-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--txt-main);
}

/* Quote / highlight callout with a left accent bar (14px semibold) */
.cs-callout {
  border-left: 2px solid var(--ui-frame);
  padding-left: 16px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: var(--txt-main);
}

.cs-callout ol,
.cs-callout ul {
  margin: 0;
  padding-left: 21px;
}

/* Inline accent labels (Role/Scope/Team) */
.cs-text strong {
  font-weight: 600;
}

/* Perps demo video inside a grey case-study card */
.cs-video {
  align-self: stretch;
  width: 100%;
  padding: 60px 40px;
}

.cs-video .video-inner {
  max-width: 290px;
  margin-left: auto;
  margin-right: auto;
}

.cs-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.cs-card {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (max-width: 900px) {
  .cs-head {
    align-items: flex-start;
  }

  .cs-headmeta {
    align-items: flex-start;
    text-align: left;
  }

  .cs-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }
}

/* Showcase screen images — each is one grey card (mobile, wallet, swap) */
.screens {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Zoomable images: click to open, hover to magnify */
.zoomable {
  cursor: zoom-in;
}

.zoomable:focus,
.zoomable:focus-visible {
  outline: none;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(18, 18, 18, 0.88);
  cursor: zoom-out;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Wallet view: full-width card image, then two side-by-side card images */
.wallet-screens {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.wallet-row {
  display: flex;
  gap: 16px;
}

.wallet-row .screens {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

/* Multi-card rows (Swap, Perps, Safety, Web) */
.screens-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.screens-row > .screens {
  width: auto;
  min-width: 0;
}

.flex-1 { flex: 1 1 0; }
.flex-322 { flex: 322 1 0; }
.flex-435 { flex: 435 1 0; }
.flex-554 { flex: 554 1 0; }
.flex-660 { flex: 660 1 0; }
.flex-766 { flex: 766 1 0; }
.flex-885 { flex: 885 1 0; }

/* Perps right column: two stacked card images */
.stack-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.stack-col .screens {
  width: 100%;
}

/* Web: 2x2 grid of card images */
.web-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Video card (Swap / Safety) with minimal hover controls */
.video-card {
  position: relative;
  align-self: flex-start;
  min-width: 0;
  border: 1px solid var(--ui-frame);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ui-bg);
}

/* extra grey breathing room above the video (Swap) */
.video-card--inset {
  padding: 60px 0 0;
}

/* Perps demo: portrait phone video centred in the grey card, sized to match the Swap video height */
.video-card--perps {
  padding: 26px 0;
}

.video-card--perps .video-inner {
  max-width: 285px;
  margin-left: auto;
  margin-right: auto;
}

/* narrower video centred (Safety) — block keeps its border; video bg (#f2f2f2) matches the card so no stroke around it; controls span the block */
.video-card--narrow .video-inner {
  max-width: 285px;
  margin-left: auto;
  margin-right: auto;
}

/* Extension video cards — #e6e6e6 card with inset padding (video sits inside) */
.video-card--ext {
  background: var(--ui-frame);
  padding: 60px 40px;
}

.video-card--ext-sm {
  background: var(--ui-frame);
  padding: 40px 20px;
}

/* Round the video corners inside the grey extension cards */
.video-card--ext .video-inner video,
.video-card--ext-sm .video-inner video {
  border-radius: 16px;
}

/* Branding section: full-width brand graphics video + collage + foundations */
.branding-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.branding-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Closing note under the branding visuals — right-aligned 655px, 12px grey subtext */
.branding-note {
  align-self: flex-end;
  width: 655px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--txt-secondary);
}

/* Full-width brand graphics video (400px tall band, object-cover) */
.video-card--graphics {
  align-self: stretch;
  width: 100%;
  height: 480px;
  border: 0;
  border-radius: 20px;
}

.video-card--graphics .video-inner {
  height: 100%;
}

.video-card--graphics .video-inner video {
  height: 100%;
  object-fit: cover;
}

/* Full-width brand-design video (natural aspect, replaces the foundations image) */
.video-card--brand {
  align-self: stretch;
  width: 100%;
  border: 0;
  border-radius: 20px;
}

/* Full-width DNA hero video (natural aspect, replaces the hero image) */
.video-card--dna {
  align-self: stretch;
  width: 100%;
  border: 0;
  border-radius: 16px;
}

/* The recording has a 1px dark line on its very top row — clip it off
   (shift the video up 1px inside a clipped inner, so no gap at the bottom) */
.video-card--brand .video-inner {
  overflow: hidden;
}

.video-card--brand .video-inner video {
  margin-top: -1px;
}

.video-inner {
  position: relative;
  width: 100%;
  font-size: 0;
}

.video-inner video {
  display: block;
  width: 100%;
  height: auto;
}

.vc-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 0.18s ease;
}

.video-card:hover .vc-bar,
.video-card:focus-within .vc-bar {
  opacity: 1;
}

.vc-toggle {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.vc-toggle .ic-pause {
  display: none;
}

.video-card.is-playing .vc-toggle .ic-play {
  display: none;
}

.video-card.is-playing .vc-toggle .ic-pause {
  display: block;
}

.vc-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.vc-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #fff;
}

/* Responsive */

@media (max-width: 900px) {
  .site {
    padding: 0 20px 56px;
  }

  .row {
    justify-content: stretch;
  }

  .row .col,
  .zerion-col {
    width: 100%;
  }

  .intro-row {
    flex-direction: column;
    gap: 32px;
  }

  .bio,
  .jobs {
    width: 100%;
  }

  .stats {
    flex-wrap: wrap;
    gap: 24px 32px;
  }

  .stat {
    flex: 1 1 calc(50% - 16px);
  }

  .mobile-head {
    flex-direction: column;
    gap: 20px;
  }

  .mobile-app-title,
  .showcase-caption {
    width: auto;
  }

  .showcase--right {
    align-items: stretch;
  }

  .wallet-row {
    flex-direction: column;
  }

  .screens-row {
    flex-direction: column;
  }

  .screens-row > .flex-1,
  .screens-row > .flex-322,
  .screens-row > .flex-435,
  .screens-row > .flex-554,
  .screens-row > .flex-660,
  .screens-row > .flex-766,
  .screens-row > .flex-885 {
    flex: none;
    width: 100%;
  }

  .video-card--graphics {
    height: 240px;
  }

  .branding-note {
    width: auto;
  }
}

@media (max-width: 520px) {
  .stat {
    flex-basis: 100%;
  }
}

/* ============================================================
   Section navigation
   Inline (large) before Mobile; on scroll it sticks to the top,
   shrinks, blurs, and each chip fills grey as you scroll its
   section. Chips anchor-link to their section.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* anchor targets land just below the stuck nav */
#mobile,
#web,
#extension,
#branding,
#dna,
#design-system {
  scroll-margin-top: 84px;
}

.section-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 16px;
  align-items: stretch;
  /* large (default) state */
  --snav-h: 88px;
  --snav-label: 18px;
  --snav-label-weight: 500;
  transition: padding 0.28s ease, margin 0.28s ease;
}

.section-nav.is-stuck {
  --snav-h: 48px;
  --snav-label: 14px;
  --snav-label-weight: 600;
  padding: 12px 0;
  /* When stuck, the chip row extends 16px beyond the content on each side so it
     reads as a distinct bar and doesn't blend with the content it overlays.
     Figma: content is x=32/w=1336, the sticky bar is x=16/w=1368. */
  margin-left: -16px;
  margin-right: -16px;
}

/* subtle rounded band behind the chips (flush with the row), only when stuck.
   The blur itself lives on the chips. */
.section-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  bottom: -4px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  pointer-events: none;
  z-index: -1;
  transition: background 0.28s ease, backdrop-filter 0.28s ease;
}

.section-nav.is-stuck::before {
  background: rgba(255, 255, 255, 0.1);
}

.snav-chip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--snav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 16px;
  border: 0;
  /* stroke as an inset shadow so the grey fill can paint over it */
  box-shadow: inset 0 0 0 1px var(--ui-frame);
  border-radius: 24px;
  background: rgba(253, 253, 252, 0);
  text-decoration: none;
  overflow: hidden;
  transition: height 0.28s ease, background 0.2s ease, box-shadow 0.28s ease;
}

.section-nav.is-stuck .snav-chip {
  box-shadow: inset 0 0 0 1px var(--ui-bg);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.snav-chip:hover {
  box-shadow: inset 0 0 0 1px var(--txt-secondary);
}

/* grey progress fill — above the chip stroke, below the text.
   Clipped to the chip's rounded shape by the chip's overflow:hidden. */
.snav-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--ui-frame);
  transition: width 0.12s linear;
}

.snav-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.snav-label {
  font-size: var(--snav-label);
  font-weight: var(--snav-label-weight);
  line-height: 24px;
  color: var(--txt-main);
  white-space: nowrap;
  transition: font-size 0.28s ease;
}

.snav-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--txt-secondary);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .section-nav {
    position: static;
    flex-wrap: wrap;
    gap: 12px;
  }

  .section-nav.is-stuck {
    margin-left: 0;
    margin-right: 0;
  }

  .section-nav::before {
    display: none;
  }

  .snav-chip {
    flex: 1 1 calc(33.333% - 8px);
  }
}