/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: 'Tobias-Web';
  src: url('../fonts/Tobias-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GT Flexa';
  src: url('../fonts/GT-Flexa-Extended-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GT Flexa';
  src: url('../fonts/GT-Flexa-Extended-Thin.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GT Flexa';
  src: url('../fonts/GT-Flexa-Extended-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GT Flexa';
  src: url('../fonts/GT-Flexa-Extended-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GT Flexa Text Light';
  src: url('../fonts/GT-Flexa-Standard-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GT Flexa Text';
  src: url('../fonts/GT-Flexa-Standard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GT Flexa Mono';
  src: url('../fonts/GT-Flexa-Mono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
  /* Colors - sRGB fallback */
  --color-bg: #000000;
  --color-bg-gray: #111111;
  --color-white: #ffffff;
  --color-orange: #ff4000;
  --color-orange-dim: #7c1f00;
  --color-gray-lighter: #e0e0e0;
  --color-gray-light: #cacaca;
  --color-gray: #6d6d6d;
  --color-gray-dark: #2f2f2f;
  --color-card-bg: rgba(47, 47, 47, 0.7);
}

/* P3 Wide Gamut Colors */
@supports (color: color(display-p3 1 0 0)) {
  :root {
    --color-bg: color(display-p3 0 0 0);
    --color-bg-gray: color(display-p3 0.067 0.067 0.067);
    --color-white: color(display-p3 1 1 1);
    --color-orange: color(display-p3 1 0.2 0);
    --color-orange-dim: color(display-p3 0.486 0.122 0);
    --color-gray-lighter: color(display-p3 0.878 0.878 0.878);
    --color-gray-light: color(display-p3 0.792 0.792 0.792);
    --color-gray: color(display-p3 0.427 0.427 0.427);
    --color-gray-dark: color(display-p3 0.184 0.184 0.184);
    --color-card-bg: color(display-p3 0.184 0.184 0.184 / 0.7);
  }
}

:root {
  /* Layout */
  --content-width: calc(100vw - 48px);
  --column-width: calc((var(--content-width) - (var(--space-md) * 11)) / 12);

  /* Typography */
  --font-heading: 'Tobias-Web', Georgia, serif;
  --font-body: 'GT Flexa', system-ui, sans-serif;
  --font-body-text: 'GT Flexa Text', system-ui, sans-serif;
  --font-body-text-light: 'GT Flexa Text Light', system-ui, sans-serif;
  --font-mono: 'GT Flexa Mono', 'SF Mono', monospace;

  /* Spacing */
  --space-none: 0px;
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  /* Border radius */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Patterns */
  --pattern-dots: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  --pattern-dots-size: 12px 12px;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  background-color: var(--color-bg);
  color-scheme: dark;
  color: var(--color-white);
  line-height: 1.2;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-variant-numeric: slashed-zero proportional-nums;
  cursor: url(../assets/images/cursors/pointer-1.svg) 10 10, default;
  text-wrap: pretty;
}

::selection {
  background: var(--color-orange);
  color: var(--color-white);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
}

button,
[role="button"],
label[for] {
  font-family: inherit;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  border: none;
  background: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
li,
blockquote,
figcaption,
label,
.text {
  cursor: url(../assets/images/cursors/pointer-3.svg) 10 10, text;
}

/* ==========================================================================
   Layout - 12 Column Grid
   ========================================================================== */

.content {
  width: 100%;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
}

.grid-center {
  align-items: center;
}

.self-center {
  align-self: center;
}

/* Column spans */
.col-1 { grid-column-end: span 1; }
.col-2 { grid-column-end: span 2; }
.col-3 { grid-column-end: span 3; }
.col-4 { grid-column-end: span 4; }
.col-5 { grid-column-end: span 5; }
.col-6 { grid-column-end: span 6; }
.col-7 { grid-column-end: span 7; }
.col-8 { grid-column-end: span 8; }
.col-9 { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

/* Column start positions */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* Glass effect */
.glass {
  background: linear-gradient(90deg, rgba(47, 47, 47, 0.9) 0%, rgba(38, 38, 38, 0.9) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

@supports (color: color(display-p3 1 0 0)) {
  .glass {
    background: linear-gradient(90deg, color(display-p3 0.1857 0.1838 0.1838 / 0.9) 0%, color(display-p3 0.1506 0.1506 0.1506 / 0.9) 100%);
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */

.text-gray {
  color: var(--color-gray);
}

.text-gray-light {
  color: var(--color-gray-light);
}

.text-orange {
  color: var(--color-orange);
}

.text-center {
  text-align: center;
}

.font-heading {
  font-family: var(--font-heading);
  font-weight: 300;
}

.font-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

/* Standard Header (visible at page load) */
.header-standard {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
}

.header-standard .logo {
  gap: 0;
}

.header-standard .nav a {
  font-size: 31px;
}

/* Fixed Header (appears on scroll) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-xs) var(--space-md) 11px;
}

.header.header-fixed {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.2s linear, transform 0.2s linear, visibility 0.2s;
  pointer-events: none;
  visibility: hidden;
}

.header.header-fixed.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.2s;
}

.header::before {
  content: '';
  position: absolute;
  inset: 11px var(--space-md);
  background: #000;
  border-radius: 20px;
  filter: blur(48px);
  opacity: 0.6;
  transform: translateY(12px);
  z-index: -1;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, rgba(47, 47, 47, 0.9) 0%, rgba(38, 38, 38, 0.9) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 0 8px 0 12px;
  height: 52px;

  /* Squircle corners */
  border-radius: 0;
  border: none;
  position: relative;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
}

@supports (color: color(display-p3 1 0 0)) {
  .header-inner {
    background: linear-gradient(90deg, color(display-p3 0.1857 0.1838 0.1838 / 0.9) 0%, color(display-p3 0.1506 0.1506 0.1506 / 0.9) 100%);
  }
}

.header-inner-border {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-md);
  right: var(--space-md);
  bottom: 11px;
  pointer-events: none;
  z-index: 10;
}

.header-inner-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 24px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-20px.png') 48 / 24px round;
  border-image: url('../assets/images/squircle-border-20px.png') 48 / 24px round;
}

.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 31px;
  letter-spacing: -1.24px;
}

img.logo-text {
  height: 18px;
  width: auto;
}

.logo-dot {
  width: 12px;
  height: 12px;
  background-color: var(--color-orange);
  border-radius: 50%;
  box-shadow:
    0 0 21px var(--color-orange),
    0 0 7px var(--color-orange);
}

.header .btn-waitlist {
  font-size: 22px;
  letter-spacing: -0.88px;
  height: 36px;
  padding: 0 10px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  perspective: 1px;
}

.nav a:not(.btn-waitlist) {
  font-family: var(--font-heading);
  font-size: 31px;
  letter-spacing: -1.24px;
  transition: opacity var(--transition-fast);
}

.nav a:not(.btn-waitlist):hover {
  opacity: 0.7;
}

.nav-separator {
  font-family: var(--font-heading);
  font-size: 31px;
}

.btn-waitlist {
  font-family: var(--font-heading);
  font-size: 31px;
  letter-spacing: -1.24px;
  background-color: transparent;
  color: var(--color-white);
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 0;
  transition: transform 0.2s ease;
  will-change: transform;
}

/* Glow layer - no mask, behind everything */
.btn-waitlist::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: transparent;
  border-radius: 12px;
  box-shadow:
    0 0 22px var(--color-orange),
    0 0 8px var(--color-orange);
  z-index: -2;
}

/* Background layer - with squircle mask */
.btn-waitlist::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-orange);
  z-index: -1;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-12px.png') 36 fill / 18px;
  mask-border: url('../assets/images/squircle-mask-12px.png') 36 fill / 18px;
}

.btn-waitlist:hover {
  transform: translateZ(0) scale(1.05);
}

.btn-waitlist:active {
  transform: translateZ(0) scale(0.98);
}

.btn-subscribe::before { box-shadow: none; }
.btn-subscribe::after {
  background: transparent;
  border: 18px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-12px-light.png') 36 / 18px round;
  border-image: url('../assets/images/squircle-border-12px-light.png') 36 / 18px round;
  -webkit-mask-box-image: none;
  mask-border: none;
}

.hero-cta-price-old {
  color: var(--color-gray);
  text-decoration: line-through;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  padding-top: 0;
  padding-bottom: 0;
}

.hero-intro {
  height: 90vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--space-md);
}

.hero-intro .title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.hero-cta-wrapper {
  position: relative;
  width: calc(var(--column-width) * 4 + var(--space-md) * 3);
  height: 96px;
  flex-shrink: 0;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 100%;
  width: 100%;

  /* Squircle corners */
  border-radius: 0;
  box-shadow: none;
  border: none;
  position: relative;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-16px.png') 60 fill / 30px;
  perspective: 1px;
}

.hero-cta-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.hero-cta-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-16px.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-16px.png') 60 / 30px round;
}

.hero-cta-text {
  display: flex;
  flex-direction: column;
}

.hero-cta-title {
  font-family: var(--font-body-text);
  font-size: 21px;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.1;
}

.hero-cta-subtitle {
  font-family: var(--font-body-text);
  font-size: 21px;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1.1;
}

.hero-image {
  width: 100%;
  position: absolute;
  top: 40%;
  left: 0;
  transform: translateY(-50%);
}

.hero-image img,
.hero-image video {
  width: 100%;
  height: auto;
}

.hero-video {
  position: relative;
  z-index: 1;
}

.hero-video-poster {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.hero-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-video-poster.visible {
  opacity: 1;
  z-index: 2;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 83px;
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -6px;
  margin-top: var(--space-lg);
}

.hero-tagline {
  font-family: var(--font-body-text);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-gray);
  margin-top: var(--space-none);
}

.hero .section-label {
  margin-top: var(--space-sm);
}

.hero-description {
  font-family: var(--font-body);
  font-size: 51px;
  line-height: 0.95;
  letter-spacing: -3px;
  font-weight: 400;
  margin-top: var(--space-none);
  width: calc(var(--column-width) * 9 + var(--space-md) * 8);
  max-width: 100%;
}

.hero-description .highlight {
  color: var(--color-white);
}

/* ==========================================================================
   Mechanical Section
   ========================================================================== */

.mechanical-section {
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card-row {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px var(--space-md);
  margin-top: var(--space-md);
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: url(../assets/images/cursors/pointer-5.svg) 10 10, grab;
  user-select: none;
  -webkit-user-select: none;
  perspective: 1px;
}

.card-row:active {
  cursor: url(../assets/images/cursors/pointer-4.svg) 10 10, grabbing;
}

.card-row img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.card-row::-webkit-scrollbar {
  display: none;
}

.card-row::after {
  content: '';
  flex-shrink: 0;
  width: calc(100vw - 24px - var(--column-width) * 4 - var(--space-md) * 3);
}


.card-row > .card,
.card-row > .card-item {
  scroll-snap-align: start;
}

.card-row > .card-item:first-child,
.card-row > .card:first-child {
  scroll-margin-left: 0;
}

/* Carousel pagination dots - hidden by default */
.carousel-dots {
  display: none;
}

.card-item {
  flex-shrink: 0;
}

.card-item .card {
  width: 100%;
}

.card-item .card-text {
  margin-top: var(--space-sm);
}

.card {
  flex-shrink: 0;
  height: 480px;
  background: #1B1B1B;
  overflow: hidden;
  position: relative;

  /* Squircle corners */
  border-radius: 0;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
}

@media (min-width: 769px) {
  .card-row-tall .card {
    height: 681px;
  }
}

/* Animate cards inside card-row */
.card-row > .card,
.card-row > .card-item > .card {
  transition: transform 0.2s ease;
  will-change: transform;
}

.card-row > .card:hover,
.card-row > .card-item > .card:hover {
  transform: translateZ(0) scale(1.02);
}

.card-row > .card:active,
.card-row > .card-item > .card:active {
  transform: translateZ(0) scale(0.99);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
}

.card-hero-outer {
  position: relative;
  margin-top: var(--space-md);
}

.card-hero-outer .card-hero {
  margin-top: 0;
}

.card-has-video::after {
  display: none;
}

.card-video-outer {
  position: relative;
}

.card-video-outer .card {
  width: 100%;
}

.card-video-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.card-video-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
}

.card-hero-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.card-hero-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
}

.video-control-btn {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 11;
  padding: 0;
  border: 3px solid var(--color-gray);
  border-radius: 50%;
  background: none;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  transition: transform 0.2s ease;
  perspective: 1px;
  will-change: transform;
}

.video-control-btn:hover {
  transform: translateZ(0) scale(1.05);
}

.video-control-btn:active {
  transform: translateZ(0) scale(0.95);
}

.video-control-btn img {
  display: block;
  width: 42px;
  height: 42px;
}

.video-progress-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.video-progress-ring circle {
  fill: none;
  stroke: var(--color-gray-light);
  stroke-width: 3;
  stroke-linecap: round;
}

.card-black {
  background-color: var(--color-bg);
}

.card-xl { width: calc(var(--column-width) * 10 + var(--space-md) * 9); }
.card-lg { width: calc(var(--column-width) * 8 + var(--space-md) * 7); }
.card-md { width: calc(var(--column-width) * 5 + var(--space-md) * 4); }
.card-sm { width: calc(var(--column-width) * 4 + var(--space-md) * 3); }

.card img,
.card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blurred accessory items — tease the sticker pack / carrying case without
   revealing the final artwork before launch. */
.card-blurred img {
  filter: blur(28px);
}

.card-hero.card-dampening {
  background-color: #000;
}

.card-hero.card-dampening video {
  width: auto;
  max-height: 100%;
  object-fit: contain;
  margin-left: auto;
}

.hero-card-1 img {
  width: auto;
  height: 100%;
  object-position: top right;
}

.hero-card-2 img {
  width: auto;
  height: 100%;
  object-position: top;
  margin-left: auto;
  margin-right: auto;
}

.hero-card-3 img,
.hero-card-4 img {
  width: auto;
  height: 100%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

.hero-full-width {
  width: 100%;
  margin-top: var(--space-lg);
}

.hero-full-width img {
  display: block;
  width: 100%;
  /* Matches the intrinsic ratio of hero-insitu.jpg (3060x1720) to reserve
     space before load; identical to the rendered ratio, so visually invisible. */
  aspect-ratio: 3060 / 1720;
}

/* The <picture> swaps to hero-insitu-mobile.jpg (1128x1616) at this breakpoint. */
@media (max-width: 768px) {
  .hero-full-width img {
    aspect-ratio: 1128 / 1616;
  }
}

.card-caption {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 43px;
  letter-spacing: -4.3px;
  color: var(--color-gray-light);
  text-align: center;
  width: 90%;
}

/* ==========================================================================
   Section Styles
   ========================================================================== */

.section {
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  overflow: visible;
}

.section-dark {
  background-color: var(--color-bg-gray);
}

.section-gray {
  background-color: var(--color-bg-gray);
}

.section-header {
  display: flex;
  align-items: flex-start;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--color-orange);
  text-transform: uppercase;
  margin-bottom: var(--space-none);
  width: calc(var(--column-width) * 5 + var(--space-md) * 4);
  flex-shrink: 0;
}

.card-overlay-label {
  position: absolute;
  top: var(--space-md);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 21px;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}

.section-title {
  font-family: var(--font-body);
  font-size: 65px;
  font-weight: 400;
  font-kerning: normal;
  line-height: 0.98;
  letter-spacing: -4px;
  width: calc(var(--column-width) * 7 + var(--space-md) * 6);
}

.section-title-full-width {
  width: calc(var(--column-width) * 12 + var(--space-md) * 11);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.section-title-lg {
  font-family: var(--font-body);
  font-size: 108px;
  font-weight: 400;
  letter-spacing: -7.56px;
  width: auto;
  line-height: 0.85;
}

.card-hero {
  width: 100%;
  height: 681px;
  margin-top: var(--space-md);
}


.card-row .card-comparison {
  grid-template-columns: repeat(8, 1fr);
  height: 308px;
}

.card-row .card-comparison .comparison-info {
  grid-column: span 3;
}

.card-row .card-comparison picture {
  grid-column: span 5;
}

.comparison-model-m picture {
  align-self: start;
}

.section-title + .grid,
.section-header + .grid,
.section-label + .grid,
.section-description + .grid {
}

.grid + .section-title {
}

.grid + .grid {
}

.card-row + .content {
}

.card-audio {
  height: 454px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  overflow: hidden;
  background-color: var(--color-bg-gray);
  background-image: var(--pattern-dots);
  background-size: var(--pattern-dots-size);
}

.card-audio-img {
  grid-column-end: span 6;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top right;
  margin-top: var(--space-md);
}

.card-audio-text {
  grid-column-end: span 6;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  padding-left: 0;
  gap: var(--space-sm);
}

.card-audio-text .section-label {
  margin-bottom: auto;
}

.audio-samples {
  display: flex;
  gap: var(--space-xs);
}

.btn-audio-sample {
  font-family: 'GT Flexa', sans-serif;
  font-size: 21px;
  letter-spacing: -0.84px;
  color: var(--color-gray);
  background: none;
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border: 2px solid var(--color-gray);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease;
  will-change: transform;
}

.btn-audio-sample:hover {
  transform: translateZ(0) scale(1.05);
}

.btn-audio-sample:active {
  transform: translateZ(0) scale(0.95);
}

.card-with-text {
  display: flex;
  flex-direction: column;
}

.card-with-text img {
  height: 681px;
  border-radius: var(--radius-md);
  }

.card-text {
  font-family: var(--font-body-text);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.card-text-inner {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  margin-top: 0;
}

.card-stat {
  position: relative;
  background-image: var(--pattern-dots);
  background-size: var(--pattern-dots-size);
}

.stat {
  position: absolute;
  top: 243px;
  left: 24px;
}

.stat-label,
.stat-unit {
  font-family: var(--font-body-text);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.stat-value {
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -6.4px;
  margin: 8px 0;
}

.section-detail {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.section-detail-image img {
  width: 100%;
  border-radius: var(--radius-md);
  }

.section-detail-text {
  font-family: var(--font-body-text);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  max-width: 720px;
}

.text-white {
  color: var(--color-white);
}

.body-text {
  font-family: var(--font-body-text);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.rounded {
  border-radius: var(--radius-md);
}

/* ==========================================================================
   M-Dial section
   ========================================================================== */

.M-Dial .section-label {
  padding-bottom: var(--space-sm);
}

.M-Dial .section-title {
  padding-top: var(--space-sm);
}

.M-Dial .card-hero-outer {
  margin-top: 0;
}

/* ==========================================================================
   Thickness Comparison Section
   ========================================================================== */

.thickness-comparison-section .grid .card-comparison {
  margin-top: var(--space-md);
}

/* ==========================================================================
   Comparison Cards
   ========================================================================== */

.section-description {
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 1;
}

.thinness-comparison-intro {
  padding-bottom: var(--space-md);
  width: calc(var(--column-width) * 6 + var(--space-md) * 5);
}

.card-comparison {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  align-items: center;
  height: 308px;
}

.grid .card-comparison {
  height: 282px;
}

.grid .card-comparison img {
  transform: translateY(-30px);
}

.card-comparison picture {
  grid-column: span 9;
}

.card-comparison img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.comparison-info {
  grid-column: span 3;
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
}

.comparison-label {
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--color-orange);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.comparison-value {
  font-family: var(--font-body);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -2px;
  color: var(--color-white);
  line-height: 1;
}

.comparison-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--color-gray);
  text-transform: uppercase;
  border: 1px solid var(--color-gray);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: var(--space-sm);
}

.comparison-badge.badge-gray {
  color: var(--color-gray);
  border-color: var(--color-gray);
}

/* ==========================================================================
   Haptic Feedback Section
   ========================================================================== */

.haptic-feedback-section {
}

/* ==========================================================================
   Dampening Field Section
   ========================================================================== */

.dampening-field-intro {
  padding-bottom: var(--space-md);
}

.dampening-exploded {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.dampening-diagram {
  position: relative;
  margin-right: calc(-1 * var(--space-md));
}

.dampening-diagram-img {
  width: calc(100% + var(--space-md));
  height: auto;
}

.dampening-labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

.dampening-label {
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--color-gray);
  text-transform: uppercase;
  white-space: nowrap;
}


/* Typing Test Card */
.card-typing-test {
  height: 671px;
  background-color: #000000;
  position: relative;
  overflow: hidden;
}

.card-typing-test::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('http://localhost:3845/assets/feac53243f244714fca4de2b79d38cce1f111963.png') center center / cover no-repeat;
  opacity: 0.6;
}


.typing-test-title {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -6.4px;
  color: var(--color-white);
}

.typing-test-specs {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  display: flex;
  gap: var(--space-lg);
}

.typing-test-spec-labels,
.typing-test-spec-values {
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--color-gray);
  text-transform: uppercase;
  line-height: 1.2;
}

.typing-test-spec-labels {
  text-align: left;
}

.typing-test-spec-values {
  text-align: right;
}

.typing-test-spec-labels p,
.typing-test-spec-values p {
  margin: 0;
}

.typing-test-mute {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  width: 48px;
  height: 48px;
  background-color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 7px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1);
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  transition: transform var(--transition-fast);
}

.typing-test-mute:hover {
  transform: scale(1.05);
}

.typing-test-mute img {
  width: 26px;
  height: 28px;
  object-fit: contain;
}

.typing-test-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: rgba(217, 217, 217, 0.2);
  z-index: 2;
}

.typing-test-progress {
  height: 100%;
  width: 33.33%;
  background-color: var(--color-white);
}

/* Live typing test card (with visualizer) */
.card-typing-test-live {
  -webkit-border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
  margin: -3px;
}

.card-typing-test-live::before,
.card-typing-test-live::after {
  display: none;
}

.typing-test-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ==========================================================================
   Wrist-y Business Section (Ergonomics)
   ========================================================================== */

.ergonomics-cards {
  margin-top: var(--space-lg);
}

.ergonomics-cards .card {
  height: 681px;
}

.card-wrist {
  height: 681px;
  background: #000;
}

.card-wrist img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 136%;
  max-width: none;
  object-fit: cover;
}

.card-wrist-text {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 251px;
}

.card-wrist-text .body-text {
  font-size: 21px;
  line-height: 1;
}

/* ==========================================================================
   Feature Showcase Section
   ========================================================================== */

.section-features {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-none);
}

.features-label {
  text-align: center;
  width: 100%;
  margin-bottom: var(--space-md);
}

.features-list {
  text-align: center;
  line-height: 0.82;
}

.feature-item {
  font-family: var(--font-heading);
  font-size: 124px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: -12.4px;
  line-height: 1;
  margin: 0;
}

.trademark {
  font-size: 0.6em;
  font-weight: 500;
  vertical-align: 0.3em;
}

.reg-mark {
  font-size: 0.5em;
}

.harmonic-synthesiser-detail .body-text .trademark {
  font-size: 0.8em;
  font-weight: inherit;
  vertical-align: 0.15em;
}

.feature-item .trademark {
  font-family: var(--font-heading);
  font-size: 0.5em;
  vertical-align: super;
}

.features-title {
  font-family: var(--font-heading);
  font-size: 124px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: -12.4px;
  line-height: 1;
  text-align: center;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-none);
}

.features-keyboard {
  width: calc(100% - var(--space-lg) * 2);
  margin: 0 auto;
}

.features-keyboard img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   NiteLite Backlight Section
   ========================================================================== */

.section-nitelite {
  background-color: #000000;
}

.section-nitelite .card-nitelite .section-label {
  color: var(--color-orange);
  padding-bottom: 0;
}

.text-nitelite-orange {
  color: var(--color-orange);
}

.text-nitelite-dark {
  color: var(--color-orange-dim);
}

.card-nitelite {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
}

.section-nitelite .video-control-btn {
  border-color: var(--color-orange-dim);
}

.section-nitelite .video-progress-ring circle {
  stroke: var(--color-orange);
}

.card-nitelite .section-label {
  padding: var(--space-md);
}

.card-nitelite picture {
  margin-top: auto;
}

.card-nitelite img {
  width: 100%;
  height: auto;
  max-width: none;
}

.card-nitelite-title {
  padding: 0 var(--space-md);
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -6.4px;
}

/* Wavelength Spectrum Card */
/* Sleep Better Card */
.card-sleep-better {
  background-image: radial-gradient(circle, rgba(124, 31, 0, 0.5) 1px, transparent 1px);
  background-size: var(--pattern-dots-size);
  display: flex;
  align-items: center;
}

.card-sleep-better img {
  width: 100%;
  height: auto;
  object-fit: unset;
}

/* ==========================================================================
   Technical Specifications Section
   ========================================================================== */

.section-specs {
  padding-top: var(--space-md);
  padding-bottom: var(--space-xl);
}

.section-specs .section-title {
  margin-bottom: var(--space-sm);
}

.specs-title {
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 420;
  line-height: 1;
  letter-spacing: -6.4px;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.specs-table {
  display: flex;
  flex-direction: column;
}

.specs-row {
  display: flex;
  align-items: baseline;
  min-height: 42px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-gray);
  font-family: var(--font-mono);
  font-size: 21px;
  line-height: 0.82;
  text-transform: uppercase;
}

.specs-label {
  color: var(--color-gray);
  width: 344px;
  flex-shrink: 0;
}

.specs-value {
  color: var(--color-white);
}

.specs-value + .specs-value {
  margin-left: 125px;
}

.technical-staff-table .specs-row:first-child .specs-label + .specs-value {
  width: calc(32ch + 2px);
  flex-shrink: 0;
}

.technical-staff-table .specs-row:nth-child(3) .specs-label {
  line-height: 1.1;
}

.specs-value a {
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.specs-value a:hover {
  opacity: 0.7;
}

.specs-value a::after {
  content: '↗';
  margin-left: 2px;
}

/* ==========================================================================
   Native macOS App Section
   ========================================================================== */

.native-macos-section {
  padding-top: var(--space-xl);
}

.section-label.section-lable-centred {
  width: auto;
  text-align: center;
}

.native-macos-section .section-title-hero {
  margin-top: var(--space-sm);
}

.section-title-hero {
  font-family: var(--font-heading);
  font-size: 200px;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -16px;
  text-align: center;
  margin-top: var(--space-md);
}

.macos-hero {
  width: calc(9 / 12 * 100%);
  margin: 0 auto;
  margin-top: var(--space-none);
  margin-bottom: var(--space-lg);
  position: relative;
}

.macos-hero-mask {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.macos-hero-video {
  position: absolute;
  top: 1.5%;
  left: 1%;
  width: 98%;
  height: auto;
  z-index: 0;
}

/* ==========================================================================
   Harmonic Synthesiser section
   ========================================================================== */

.harmonic-synthesiser-detail {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
}

.card-audio {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
  height: inherit;
}

/* ==========================================================================
   Design Section
   ========================================================================== */

.design-section .section-label {
  padding-top: var(--space-lg);
}

.design-section .grid {
  padding-top: var(--space-lg);
}

.design-section .section-title-centered {
  display: block !important;
  text-align: center !important;
  color: #cacaca !important;
  width: calc(var(--column-width) * 6 + var(--space-md) * 5) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.design-hero {
  width: 100%;
  margin: var(--space-lg) auto;
}

.design-hero img,
.design-hero video {
  width: 100%;
  height: auto;
}

.card-xs {
  width: 348px;
}

.card-detail {
  height: 454px;
  position: relative;
}

.card-detail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 43px));
  width: auto;
  height: 536px;
  max-width: none;
}

.detail-cards-container {
  padding-top: var(--space-md);
}

.card-detail-text {
  position: absolute;
  bottom: 21px;
  left: 21px;
  right: 21px;
  font-family: var(--font-body-text);
  font-size: 21px;
  line-height: 1;
  font-weight: 400;
}

/* ==========================================================================
   Ergonomics Section
   ========================================================================== */



/* ==========================================================================
   Technology Section
   ========================================================================== */

.technology-section {
}

/* ==========================================================================
   Sustainability Section
   ========================================================================== */

.sustainability-section {
}

/* ==========================================================================
   Power Section
   ========================================================================== */

.power-section .grid {
  margin-top: var(--space-md);
}

.card-power {
  height: 454px;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: var(--pattern-dots);
  background-size: var(--pattern-dots-size);
}

.power-prefix {
  font-family: var(--font-body-text);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-gray);
}

.power-stat {
  font-family: var(--font-body);
  font-size: 67px;
  font-weight: 550;
  letter-spacing: -6.7px;
  color: var(--color-white);
  line-height: 1;
}

.power-suffix {
  font-family: var(--font-body-text);
  font-size: 30px;
  color: var(--color-gray);
}

.power-suffix sup {
  font-size: 19px;
  vertical-align: super;
  line-height: 0;
}

.card-footnote {
  font-family: var(--font-body-text);
  font-size: 30px;
  line-height: 1;
  margin-top: var(--space-sm);
}

/* ==========================================================================
   Accessories Section
   ========================================================================== */

.accessories-section {
}

/* ==========================================================================
   In the Box Section
   ========================================================================== */

.in-the-box-section {
  background-color: var(--color-black);
}

.card-inbox {
  height: auto;
  position: relative;
  margin-top: var(--space-sm);
}

.inbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--space-md);
}

.inbox-illustrations {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.inbox-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-xl);
  width: 100%;
}

.inbox-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.inbox-item img {
  display: block;
}

.inbox-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  font-family: var(--font-body-text);
  font-size: 21px;
  color: var(--color-white);
}

.inbox-keyboard .inbox-marker,
.inbox-manual .inbox-marker {
  padding-bottom: 4px;
}

.card img.inbox-text-marker {
  display: inline;
  width: 68px;
  height: auto;
  vertical-align: -7px;
  object-fit: contain;
}

.inbox-description {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-body-text);
  font-size: 64px;
  letter-spacing: -6.4px;
  line-height: 1;
}

/* ==========================================================================
   Waitlist Section
   ========================================================================== */

.section-waitlist {
  padding-top: 0;
}

.waitlist-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

.waitlist-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.section-waitlist .content {
  position: relative;
  z-index: 1;
}

.card-waitlist {
  background-color: var(--color-white);
  padding: 22px 21px;
  height: auto;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-30px.png') 120 fill / 65px;
  mask-border: url('../assets/images/squircle-mask-30px.png') 120 fill / 65px;
}

.card-waitlist::after {
  display: none;
}

.card-waitlist .section-label {
  color: var(--color-orange);
}

.card-waitlist .section-title {
  width: calc(var(--column-width) * 10 + var(--space-md) * 9);
}

.waitlist-title {
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 420;
  letter-spacing: -6.4px;
  line-height: 1;
  margin-top: var(--space-md);
}

.text-black {
  color: #000000;
}

.reserve-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.reserve-action-btn {
  width: 100%;
  height: 216px;
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 400;
  font-stretch: 175%;
  letter-spacing: -6.4px;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-50px.png') 100 fill / 50px;
  mask-border: url('../assets/images/squircle-mask-50px.png') 100 fill / 50px;
  transition: transform 0.2s ease;
  will-change: transform;
  perspective: 1px;
}

.reserve-action-btn:hover {
  transform: translateZ(0) scale(1.02);
}

.reserve-action-btn:active {
  transform: translateZ(0) scale(0.99);
}

.reserve-action-primary {
  background: var(--color-orange);
  color: var(--color-white);
}

.reserve-action-outline {
  background: transparent;
  color: #000;
  -webkit-mask-box-image: none;
  mask-border: none;
  border: 50px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-50px-black.png') 150 / 50px round;
  border-image: url('../assets/images/squircle-border-50px-black.png') 150 / 50px round;
}

.btn-subscribe-link {
  text-decoration: underline;
  color: var(--color-gray);
}

.btn-film-link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-body-text);
  font-size: 30px;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  color: var(--color-gray);
  transition: color 0.2s ease;
}

.btn-film-link:hover {
  color: var(--color-white);
}

.waitlist-form {
  display: flex;
  height: 216px;
  margin-top: var(--space-md);
  background-color: #e0e0e0;
  overflow: hidden;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-50px.png') 100 fill / 50px;
  mask-border: url('../assets/images/squircle-mask-50px.png') 100 fill / 50px;
  transition: transform 0.2s ease;
  will-change: transform;
}

.waitlist-form:hover {
  transform: translateZ(0) scale(1.02);
}

.waitlist-form:has(.waitlist-input:focus) {
  transform: translateZ(0) scale(1);
}

.waitlist-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0 var(--space-md);
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -5px;
  color: #000000;
}

.waitlist-input::placeholder {
  color: #a8a6a6;
}

.waitlist-input:focus {
  outline: none;
}

.waitlist-submit {
  width: 450px;
  height: 100%;
  background-color: var(--color-orange);
  border: none;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.waitlist-submit span {
  font-family: 'GT America', system-ui, sans-serif;
  font-size: 200px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: -20px;
  line-height: 1;
}

.M-Dial .section-title .trademark {
  vertical-align: 0.5em;
}

.card img.waitlist-arrow {
  width: auto;
  height: 116px;
  object-fit: contain;
}

.waitlist-disclaimer {
  font-family: var(--font-body-text);
  font-size: 30px;
  margin-top: var(--space-lg);
  width: calc(var(--column-width) * 5 + var(--space-lg) * 4);
  line-height: 1;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.footer-copyright {
  font-family: var(--font-heading);
  font-size: 32px;
  letter-spacing: -2px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-column a {
  font-family: var(--font-heading);
  font-size: 32px;
  letter-spacing: -2px;
  transition: opacity var(--transition-fast);
}

.footer-column a:hover {
  opacity: 0.7;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.mobile-show {
  display: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --space-xs: 3px;
    --space-sm: 6px;
    --space-md: 12px;
    --space-lg: 24px;
    --space-xl: 48px;
  }

  /* Show/hide utilities */
  .hide-mobile {
    display: none !important;
  }

  .mobile-show {
    display: block !important;
  }

  .header {
    top: 5px; /* outside Safari 26's 4px sampling threshold for Liquid Glass toolbar tinting */
    padding: var(--space-xs) var(--space-md);
  }

  .header.header-fixed {
    transform: none; /* no slide — prevents passing through Safari's 0-4px sampling zone */
  }

  .header.header-fixed.visible {
    transform: none;
  }

  .header::before {
    filter: blur(12px);
    transform: translate3d(0, 4px, 0);
  }

  .header-standard {
    padding: 24px var(--space-md);
  }

  .header-standard .logo-dot {
    width: 8px;
    height: 8px;
  }

  .header-standard .nav a,
  .header-standard .nav a:first-child {
    font-size: 24px;
    letter-spacing: -0.96px;
    display: block;
  }

  .header-inner {
    height: 48px;
    padding: 0 var(--space-md);
    padding-right: 10px;
    /* Squircle corners for mobile */
    -webkit-mask-box-image: url('../assets/images/header-mobile-mask.png') 48 fill / 24px;
    mask-border: url('../assets/images/header-mobile-mask.png') 48 fill / 24px;
  }

  .header-inner-border {
    top: var(--space-xs);
    bottom: var(--space-xs);
  }

  .header-inner-border::after {
    border: 24px solid transparent;
    -webkit-border-image: url('../assets/images/header-mobile-border.png') 48 / 24px round;
    border-image: url('../assets/images/header-mobile-border.png') 48 / 24px round;
  }

  img.logo-text {
    height: 12px;
    width: auto;
  }

  .logo-dot {
    width: 6px;
    height: 6px;
  }

  .nav-separator {
    display: none;
  }

  .nav a,
  .nav-separator {
    font-size: 24px;
  }

  .nav .btn-waitlist {
    font-size: 16px;
    letter-spacing: -0.5px;
    height: 28px;
    padding: 0 5px;
    display: flex;
    align-items: center;
  }

  .btn-waitlist::before {
    border-radius: 10px;
  }

  /* Smaller squircle for mobile */
  .btn-waitlist::after {
    -webkit-mask-box-image: url('../assets/images/squircle-mask-9px.png') 30 fill / 15px;
    mask-border: url('../assets/images/squircle-mask-9px.png') 30 fill / 15px;
  }

  .btn-subscribe::after {
    border-width: 15px;
    -webkit-border-image: url('../assets/images/squircle-border-9px-light.png') 30 / 15px round;
    border-image: url('../assets/images/squircle-border-9px-light.png') 30 / 15px round;
  }

  .hero {
    padding-bottom: 0;
  }

  .hero-intro {
    height: 98vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .hero-image {
    position: static;
    transform: translateZ(0);
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-image img,
  .hero-image video {
    height: 100%;
    width: auto;
  }

  .hero-video-poster {
    overflow: hidden;
  }

  .hero-intro .title-block {
    width: 100%;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .hero-cta-wrapper {
    width: 100%;
    height: 72px;
    margin-top: var(--space-md);
    z-index: 1;
  }

  .hero-cta-border::after {
    border: 20px solid transparent;
    -webkit-border-image: url('../assets/images/squircle-border-16px.png') 40 / 20px round;
    border-image: url('../assets/images/squircle-border-16px.png') 40 / 20px round;
  }

  .hero-cta .btn-waitlist {
    height: 36px;
    font-size: 18px;
    padding: 0 12px;
  }

  .hero-cta-title,
  .hero-cta-subtitle {
    font-size: 18px;
    line-height: 1.2;
  }

  .hero-title {
    font-size: 60px;
    letter-spacing: -4px;
    margin-top: 0;
  }

  .hero-label {
    font-size: 16px;
  }

  .hero-tagline {
    font-size: 21px;
  }

  .btn-film-link {
    font-size: 18px;
    text-underline-offset: 4px;
  }

  .hero-description {
    font-size: 24px;
    letter-spacing: -2px;
    width: 100%;
    line-height: 0.98;
  }

  .card-caption {
    font-size: 24px;
    letter-spacing: -2px;
    left: var(--space-md);
    transform: none;
    text-align: left;
  }

  .harmonic-synthesiser-detail img {
    width: calc(50% - 2 * var(--space-md));
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Full-width single column layout */
  .grid {
    grid-template-columns: 1fr;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    grid-column-end: span 1;
  }

  .col-start-1, .col-start-2, .col-start-3, .col-start-4, .col-start-5, .col-start-6,
  .col-start-7, .col-start-8, .col-start-9, .col-start-10, .col-start-11, .col-start-12 {
    grid-column-start: 1;
  }

  /* Override column-width based widths to full width */
  .section-label,
  .section-title,
  .section-title-full-width,
  .thinness-comparison-intro,
  .card-waitlist .section-title {
    width: 100%;
  }

  .section-label {
    font-size: 13px;
    padding-bottom: var(--space-xs);
  }

  .hero .section-label {
    padding-top: var(--space-lg);
    margin-top: 0;
  }

  .hero .card-row-hero-summary {
    padding-top: var(--space-lg);
    margin-top: 0;
  }

  .section-title {
    font-size: 24px;
    letter-spacing: -1px;
  }

  .macos-hero {
    width: 100%;
  }

  .native-macos-section .card-row {
    padding-top: var(--space-lg);
  }

  .native-macos-section .section-title-hero {
    margin-top: 0;
  }

  .native-macos-section .section-label.section-lable-centred {
    padding-top: var(--space-lg);
  }

  .section-nitelite .card-nitelite-title {
  padding-top: var(--space-sm);
  }

  .section-title-hero {
    font-size: 60px;
    line-height: 1.0;
    letter-spacing: -4px;
  }

  .dampening-field-section .card-hero {
    margin-top: var(--space-lg);
  } 

  .card-nitelite-title {
    font-size: 24px;
    letter-spacing: -2px;
  }

  .section-title-lg {
    font-size: 60px;
    line-height: 0.85;
    letter-spacing: -4px;
  }

  .dampening-exploded .grid {
    grid-template-columns: 1fr;
  }

  .dampening-exploded .grid > .col-5.self-center {
    grid-column: 1;
    order: 2;
  }

  .dampening-exploded .dampening-diagram {
    display: none;
  }

  .dampening-exploded .dampening-diagram-img {
    width: calc(100% + var(--space-md) * 2);
  }

  .dampening-exploded {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
  }

 .dampening-exploded .body-text {
  padding-top: var(--space-lg);
  width: 85%;
 }

  .body-text,
  .card-text {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .card-audio {
    grid-template-columns: 1fr;
    height: auto;
    margin-top: var(--space-xl);
  }

  .section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .card-audio-img,
  .card-audio-text {
    grid-column-end: span 1;
  }

  .card-audio-img,
  .card.card-audio img {
    margin-left: 0;
    margin-top: 0;
    width: calc(100% - var(--space-md));
    margin-right: var(--space-md);
    object-fit: cover;
    order: 2;
  }

  .mechanical-section .card-hero {
    margin-top: var(--space-md);
  }

  .card-hero-outer .card-hero {
    margin-top: 0;
  }

  .haptic-feedback-section .card-hero {
    margin-top: 0;
  }

  .card-audio-text {
    order: 1;
    padding-left: var(--space-md);
    padding-bottom: 0;
    justify-content: flex-start;
  }

  .card-audio-text .section-label {
    margin-bottom: auto;
  }

  .btn-audio-sample {
    font-size: 16px;
    height: 26px;
    border-width: 1px;
  }

  .audio-samples {
    gap: var(--space-md);
  }

  /* Stack flex containers vertically */
  .section-header,
  .section-detail,
  .specs-row,
  .inbox-row {
    flex-direction: column;
  }

  .card-row > .card,
  .card-row > .card-item {
    width: calc(100vw - var(--space-md) * 3);
  }

  /* Comparison cards - mobile */
  .card.card-comparison {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 0;
    height: 270px;
  }

  .card.card-comparison picture {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    padding-left: var(--space-md);
    padding-top: var(--space-md);
  }

  .card.card-comparison.comparison-k2,
  .card.card-comparison.comparison-model-m {
    row-gap: var(--space-md);
    align-content: end;
    overflow: hidden;
  }

  .card.card-comparison.comparison-k2 picture,
  .card.card-comparison.comparison-model-m picture {
    align-self: start;
    padding-top: 0;
  }


  .card.card-comparison img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    transform: none;
  }

  .card.card-comparison .comparison-info {
    grid-column: 1;
    grid-row: 2;
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
  }

  .ergonomics-section .card-hero {
    margin-top: var(--space-md);
  }

  .card-hero.card-dampening video {
    width: 100%;
    max-height: none;
    object-fit: cover;
    margin-left: 0;
  }

   .ergonomics-section .body-text {
        margin-top: var(--space-sm);
   }

  .ergonomics-cards {
    margin-top: var(--space-md);
  }

  .ergonomics-cards .col-6 {
    grid-column: span 12;
  }

  .ergonomics-cards {
    row-gap: var(--space-lg);
  }

  .ergonomics-cards .card {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .card-overlay-label {
    font-size: 13px;
  }

  .card.card-comparison .comparison-label {
    font-size: 13px;
  }

  .card.card-comparison .comparison-value {
    font-size: 30px;
    letter-spacing: -2px;
  }

  .card.card-comparison .comparison-badge {
    font-size: 13px;
  }

  .card-row > .card.card-comparison {
    width: calc(100vw * 0.75);
  }

  .card-row-wrapper {
    position: relative;
  }

  .card-item .card-text {
  margin-top: var(--space-sm);
}

  .card {
    height: 560px;
    /* Squircle for mobile */
    -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 40 fill / 20px;
    mask-border: url('../assets/images/squircle-mask-16px.png') 40 fill / 20px;
  }

  .card::after,
  .card-video-border::after,
  .card-hero-border::after {
    border: 20px solid transparent;
    -webkit-border-image: url('../assets/images/squircle-border-16px.png') 40 / 20px round;
    border-image: url('../assets/images/squircle-border-16px.png') 40 / 20px round;
  }

  .card:not(.card-dampening) video {
    width: 102%;
    max-width: 102%;
    height: auto;
    margin-left: -1%;
  }

  /* Disable card animations on mobile */
  .card-row > .card,
  .card-row > .card-item > .card {
    transition: none;
    will-change: auto;
  }

  .card-row > .card:hover,
  .card-row > .card-item > .card:hover,
  .card-row > .card:active,
  .card-row > .card-item > .card:active {
    transform: none;
  }

  .card-row {
    overscroll-behavior-x: contain;
  }

  .carousel-dots {
    position: absolute;
    top: calc(560px - 16px - var(--space-md));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 16px;
    padding: 0 8px;
    width: fit-content;
    background: rgba(9, 9, 9, 0.9);
    border-radius: 999px;
    z-index: 10;
  }

  .thickness-comparison-section .carousel-dots {
    top: calc(270px + 24px);
  }

  .card-row-wrapper:has(.card-row-hero-summary) .carousel-dots {
    top: calc(560px - 16px - var(--space-md) + var(--space-lg));
  }

  .carousel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(217, 217, 217, 0.2);
    padding: 0;
    cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
    transition: background 0.2s;
  }

  .carousel-dots .dot.active {
    background: rgba(255, 255, 255, 1);
  }

  .footer-inner {
    flex-direction: column;
  }

  .footer-copyright {
    font-size: 24px;
    max-width: 100%;
  }

  .footer-column a {
    font-size: 24px;
  }

  .design-hero {
    width: 100%;
  }

  .card-hero {
    margin-top: var(--space-sm);
  }

  .M-Dial .section-label {
    padding-bottom: 0;
  }

  .M-Dial .section-title {
    padding-top: var(--space-lg);
  }

  .design-section .section-title-centered {
    width: 60% !important;
    font-size: 70px;
  }

  .section-features {
    padding-bottom: 0;
  }

  .section-waitlist {
    padding-top: 0;
  }

  .features-label {
    margin-bottom: 0;
  }

  .design-section .card-row {
    margin-top: var(--space-lg);
  }

   .design-section .card-row:first-child {
    margin-top: var(--space-xl);
  }

  .feature-item {
    font-size: 48px;
    letter-spacing: -4px;
  }

  .specs-value + .specs-value {
    margin-left: 0;
  }

 .specs-value {
    margin-top: var(--space-sm);
  }

  .sustainability-section .card-row-mini-mobile {
    margin-top: var(--space-sm);
  }

  .accessories-section .card-row-mini-mobile {
    margin-top: var(--space-sm);
  }

  .power-section .card-row-mini-mobile {
    margin-top: var(--space-sm);
  }

  .in-the-box-section .card {
    height: auto;
  }

  .card img.inbox-text-marker {
    width: 1.1em;
    vertical-align: -3px;
  }

  .section-specs {
    padding-top: var(--space-md);
  }

  .power-stat {
   font-size: 32px; 
   letter-spacing: -2px;
  }

  .power-prefix, .power-suffix {
    font-size: 21px;
  }

  .power-prefix {
    padding-bottom: var(--space-sm);
  }

  .power-suffix {
    padding-top: var(--space-sm);
  }

  .specs-label,
  .specs-value {
    font-size: 16px;
    line-height: 1.1;
  }

  .typing-test-title {
    font-size: 30px;
    letter-spacing: -3px;
  }

  .typing-test-specs {
    display: none;
  }

  .card-typing-test-live {
    border-style: solid;
    margin: -4px;
  }

  /* Mini card row - mobile only (dynamic sizing) */
  .card-row-mini-mobile > .card-item {
    width: calc(100vw * 0.6);
  }

  .card-row-mini-mobile > .card-item .card,
  .card-row-mini-mobile > .card-item .card.card-detail {
    width: calc(100vw * 0.6);
    height: calc(100vw * 0.6 * 1.357);
  }

  .card-row-mini-mobile {
    margin-top: var(--space-lg);
  }

  .card-row-mini-mobile .card-detail-text {
    font-size: 16px;
    line-height: 1.2;
    bottom: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
  }

  .card-row-mini-mobile .card-detail img {
    height: calc(100vw * 0.6 * 1.667);
    width: auto;
    transform: translate(-50%, calc(-50% - 21px));
  }

  .section-waitlist .card {
    padding: var(--space-md) var(--space-md) var(--space-lg);
    height: auto;
  }

  .waitlist-disclaimer {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: 400;
    width: 100%;
  }

  .waitlist-form {
    flex-direction: column;
    height: auto;
    background: none;
    gap: var(--space-sm);
    overflow: visible;
    -webkit-mask-box-image: none;
    mask-border: none;
    margin-top: var(--space-lg);
  }

  .waitlist-input {
    flex: none;
    font-size: 30px;
    letter-spacing: -2px;
    width: 100%;
    height: 96px;
    background-color: #e0e0e0;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
    mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  }

  .waitlist-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    height: 96px;
    border-radius: 0;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
    mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  }

  .waitlist-submit span {
    font-family: var(--font-body);
    font-size: 30px;
    font-weight: 400;
    color: var(--color-white);
    letter-spacing: -2px;
}

  .card img.waitlist-arrow {
    height: 1.5em;
    transform: translateY(2px);
  }

  .reserve-action-btn {
    height: 96px;
    font-size: 30px;
    letter-spacing: -2px;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
    mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  }

  .reserve-action-outline {
    border-width: 30px;
    -webkit-border-image: url('../assets/images/squircle-border-30px-black.png') 90 / 30px round;
    border-image: url('../assets/images/squircle-border-30px-black.png') 90 / 30px round;
  }
}

/* ==========================================================================
   Waitlist Modal
   ========================================================================== */

.modal-waitlist,
.modal-reserve {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  pointer-events: none;
}

.modal-waitlist.open,
.modal-reserve.open {
  display: block;
  pointer-events: auto;
}

/* Modal containers receive programmatic focus on open (so focus moves into
   the dialog without ringing the close button) — never show a ring on them. */
.modal-waitlist:focus,
.modal-reserve:focus,
.modal-film:focus {
  outline: none;
}

/* Scroll-lock while a modal is open. The padding-right compensates for the
   width of the removed classic scrollbar so the page does not reflow on lock
   (overlay-scrollbar platforms measure 0 and are unaffected). --scrollbar-comp
   is set from JS before the class is applied. */
body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-comp, 0);
}

@media (min-width: 769px) {
  .modal-waitlist,
  .modal-reserve {
    background: rgba(0, 0, 0, 0.5);
  }
}

.modal-waitlist-panel,
.modal-reserve-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--column-width) * 8 + var(--space-md) * 9);
  background-color: var(--color-white);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s linear;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px-modal-desktop.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px-modal-desktop.png') 60 fill / 30px;
}


.modal-waitlist.open .modal-waitlist-panel,
.modal-reserve.open .modal-reserve-panel {
  transform: translateX(0);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modal-waitlist-close,
.modal-reserve-close,
.modal-film-close {
  position: absolute;
  top: 22px;
  right: 25px;
  width: 48px;
  height: 48px;
  background: #e0e0e0;
  border: none;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  perspective: 1px;
  will-change: transform;
}

.modal-waitlist-close:hover,
.modal-reserve-close:hover,
.modal-film-close:hover {
  transform: translateZ(0) scale(1.05);
}

.modal-waitlist-close:active,
.modal-reserve-close:active,
.modal-film-close:active {
  transform: translateZ(0) scale(0.95);
}

.modal-waitlist-close img,
.modal-reserve-close img,
.modal-film-close img {
  width: 16px;
  height: auto;
}

/* Film modal: full-screen dark overlay with a centered native video player */
.modal-film {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-film.open {
  pointer-events: auto;
  opacity: 1;
}

/* Solid takeover with a generous responsive gutter and the largest 16:9 player
   that fits inside it, centered — sized from the viewport, never from the
   stream (intrinsic video dimensions vary by browser and ABR rendition). */
.modal-film-panel {
  --film-gutter: clamp(30px, 7vw, 110px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--film-gutter);
}

.modal-film video {
  display: block;
  width: min(100%, calc((100vh - var(--film-gutter) * 2) * (16 / 9)));
  width: min(100%, calc((100dvh - var(--film-gutter) * 2) * (16 / 9)));
  aspect-ratio: 16 / 9;
  background: #000;
}

/* 9:16 mobile cut (class set by loadFilmSource when the portrait stream is used) */
.modal-film.modal-film-portrait video {
  width: min(100%, calc((100vh - var(--film-gutter) * 2) * (9 / 16)));
  width: min(100%, calc((100dvh - var(--film-gutter) * 2) * (9 / 16)));
  aspect-ratio: 9 / 16;
}

.modal-waitlist-label {
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--color-orange);
  line-height: 0.82;
  margin-top: 13px;
}

.modal-waitlist-content {
  margin-top: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.modal-waitlist-title {
  font-family: var(--font-body);
  font-size: 47px;
  font-weight: 400;
  font-stretch: 175%;
  color: #000000;
  letter-spacing: -3px;
  line-height: 1;
}

.modal-waitlist-description {
  font-family: var(--font-body-text);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1;
  margin-top: var(--space-sm);
  width: 75%;
}

.modal-waitlist-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  perspective: 1px;
}

.modal-waitlist-input {
  width: 100%;
  height: 96px;
  background-color: #e0e0e0;
  border: none;
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  font-stretch: 125%;
  letter-spacing: -1.5px;
  color: #000000;
  padding: 0 12px;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  transition: transform 0.2s ease;
  will-change: transform;
}

.modal-waitlist-input:hover {
  transform: translateZ(0) scale(1.02);
}

.modal-waitlist-input:focus {
  outline: none;
  transform: translateZ(0) scale(1);
}

.modal-waitlist-input::placeholder {
  color: #a8a6a6;
}

.modal-waitlist-submit {
  width: 100%;
  height: 96px;
  background-color: var(--color-orange);
  border: none;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  transition: transform 0.2s ease;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  perspective: 1px;
  will-change: transform;
}

.modal-waitlist-submit:hover {
  transform: translateZ(0) scale(1.02);
}

.modal-waitlist-submit:active {
  transform: translateZ(0) scale(0.99);
}

.modal-waitlist-submit span {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  font-stretch: 125%;
  letter-spacing: -1.5px;
  color: var(--color-white);
  cursor: inherit;
}

.modal-waitlist-arrow {
  height: 0.7em;
  width: auto;
  transform: translateY(2px);
  cursor: inherit;
}

.modal-waitlist-disclaimer {
  font-family: var(--font-body-text);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1.1;
  max-width: 395px;
  margin-top: auto;
}

/* Reservation Modal - Label */
.modal-reserve-label {
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--color-orange);
  line-height: 0.82;
  margin-top: 13px;
}

/* Reservation Modal - Content */
.modal-reserve-content {
  margin-top: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.modal-reserve-title {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  font-stretch: 125%;
  color: #000000;
  letter-spacing: -1.5px;
  line-height: 1;
}

/* Reservation Modal - Product Card */
.modal-reserve-product {
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-20px-grey.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px-grey.png') 60 / 30px round;
  padding: 0;
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: 190px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--space-md);
}

.modal-reserve-product-body {
  display: contents;
}

.modal-reserve-product-header {
  display: contents;
}

.modal-reserve-product-image {
  grid-column: 1;
  grid-row: 1 / -1;
  background: #e0e0e0;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-16px.png') 60 fill / 30px;
}

.modal-reserve-product-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.modal-reserve-product-info {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.modal-reserve-product-name {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  color: #000;
  letter-spacing: -1.5px;
  line-height: 1;
}

.modal-reserve-product-price {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  color: #000;
  letter-spacing: -1.5px;
  line-height: 1;
  align-self: center;
  justify-self: end;
}

.modal-reserve-price-old {
  color: var(--color-gray);
  text-decoration: line-through;
}

.modal-reserve-product-launch {
  font-family: var(--font-body-text);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1;
  margin-top: var(--space-xs);
}

.modal-reserve-product-divider {
  grid-column: 2;
  grid-row: 2;
  height: 2px;
  background: #e0e0e0;
  margin: var(--space-sm) 0;
}

.modal-reserve-product-features {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.modal-reserve-feature-title {
  font-family: var(--font-body-text);
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 1.1;
}

.modal-reserve-feature-desc {
  font-family: var(--font-body-text);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1.1;
  margin-top: var(--space-none);
}

/* Reservation Modal - Legal */
.modal-reserve-bottom {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-sm);
}

.modal-reserve-legal {
  grid-column: 1 / -1;
  max-width: calc(4 / 8 * 100%);
  font-family: var(--font-body-text);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1.1;
  align-self: center;
}

.modal-reserve-legal a {
  color: var(--color-gray);
  text-decoration: underline;
}

/* Reservation Modal - Due Today */
.modal-reserve-due {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-16px-grey-2px-stroke.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-16px-grey-2px-stroke.png') 60 / 30px round;
  padding: 0;
  height: 55px;
  box-sizing: border-box;
}

.modal-reserve-due-label {
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--color-gray);
}

.modal-reserve-due-amount {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  color: #000;
  letter-spacing: -1.5px;
  line-height: 1;
}

/* Reservation Modal - Apple Pay Button */
.modal-reserve-apple-pay {
  width: 100%;
  height: 95px;
  background: #000;
  border: none;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  transition: transform 0.2s ease;
  perspective: 1px;
  will-change: transform;
}

.modal-reserve-apple-pay:hover {
  transform: translateZ(0) scale(1.02);
}

.modal-reserve-apple-pay:active {
  transform: translateZ(0) scale(0.99);
}

/* Reservation Modal - Checkout Button */
.modal-reserve-checkout {
  width: 100%;
  height: 95px;
  background-color: var(--color-orange);
  border: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 420;
  font-stretch: 175%;
  letter-spacing: -1.5px;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  grid-column: 1 / -1;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  transition: transform 0.2s ease;
  perspective: 1px;
  will-change: transform;
}

.modal-reserve-checkout-arrow {
  height: 0.7em;
  width: auto;
  transform: translateY(2px);
  cursor: inherit;
}

.modal-reserve-checkout span {
  cursor: inherit;
}

.modal-reserve-checkout:hover {
  transform: translateZ(0) scale(1.02);
}

.modal-reserve-checkout:active {
  transform: translateZ(0) scale(0.99);
}

/* Mobile waitlist modal */
@media (max-width: 768px) {
  .modal-waitlist-panel {
    width: 100%;
    height: 75%;
    top: auto;
    bottom: 0;
    padding: var(--space-md);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.2s linear;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-20px-modal-mobile.png') 60 fill / 30px;
    mask-border: url('../assets/images/squircle-mask-20px-modal-mobile.png') 60 fill / 30px;
  }

  .modal-waitlist.open .modal-waitlist-panel {
    transform: translateY(0);
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .modal-waitlist-close {
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
  }

  .modal-waitlist-label {
    font-size: 14px;
    margin-top: 8px;
  }

  .modal-waitlist-content {
    margin-top: var(--space-lg);
  }

  .modal-waitlist-title {
    font-size: 32px;
    letter-spacing: -2px;
  }

  .modal-waitlist-description {
    font-size: 18px;
    margin-top: var(--space-sm);
    width: 100%;
  }

  .modal-waitlist-form {
    margin-top: var(--space-sm);
  }

  .modal-waitlist-input {
    height: 96px;
    font-size: 30px;
    letter-spacing: -2px;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 48 fill / 24px;
    mask-border: url('../assets/images/squircle-mask-16px.png') 48 fill / 24px;
  }

  .modal-waitlist-submit {
    height: 96px;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 48 fill / 24px;
    mask-border: url('../assets/images/squircle-mask-16px.png') 48 fill / 24px;
  }

  .modal-waitlist-submit span {
    font-family: var(--font-body);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -2px;
  }

  .modal-waitlist-arrow {
    height: 0.7em;
    transform: translateY(2px);
  }

  .modal-waitlist-disclaimer {
    font-size: 12px;
    max-width: 100%;
  }

  /* Reserve modal mobile */
  .modal-reserve-panel {
    width: 100%;
    height: calc(100% - 65px);
    top: auto;
    bottom: 0;
    padding: var(--space-md);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.2s linear;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-20px-modal-mobile.png') 60 fill / 30px;
    mask-border: url('../assets/images/squircle-mask-20px-modal-mobile.png') 60 fill / 30px;
  }

  .modal-reserve.open .modal-reserve-panel {
    transform: translateY(0);
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .modal-reserve-close {
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
  }

  .modal-reserve-label {
    font-size: 14px;
    margin-top: 8px;
  }

  .modal-reserve-title {
    font-size: 18px;
    letter-spacing: -1px;
  }

  .modal-reserve-product {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    border: none;
    position: relative;
    gap: 0;
  }

  .modal-reserve-product::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 30px solid transparent;
    -webkit-border-image: url('../assets/images/squircle-border-20px-grey-1px-stroke.png') 60 / 30px round;
    border-image: url('../assets/images/squircle-border-20px-grey-1px-stroke.png') 60 / 30px round;
    pointer-events: none;
  }

  .modal-reserve-product-body {
    display: flex;
    flex-direction: column;
  }

  .modal-reserve-product-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .modal-reserve-product-image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-12px.png') 36 fill / 18px;
    mask-border: url('../assets/images/squircle-mask-12px.png') 36 fill / 18px;
  }

  .modal-reserve-product-info {
    flex: 1;
    align-self: start;
    margin-top: var(--space-sm);
  }

  .modal-reserve-product-price {
    flex-shrink: 0;
    text-align: right;
    align-self: start;
    margin-top: var(--space-sm);
  }

  .modal-reserve-product-name,
  .modal-reserve-product-price {
    font-size: 16px;
    letter-spacing: -1px;
  }

  .modal-reserve-product-launch {
    font-size: 14px;
  }

  .modal-reserve-product-divider {
    height: 1px;
    margin: var(--space-sm) 0;
  }

  .modal-reserve-product-features {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .modal-reserve-feature {
    padding: var(--space-sm) 0;
  }

  .modal-reserve-feature:first-child {
    padding-bottom: var(--space-md);
  }

  .modal-reserve-feature + .modal-reserve-feature {
    border-top: 1px solid #e0e0e0;
    padding-top: var(--space-md);
  }

  .modal-reserve-feature-title,
  .modal-reserve-feature-desc {
    font-size: 14px;
  }

  .modal-reserve-bottom {
    grid-template-columns: 1fr;
  }

  .modal-reserve-legal {
    grid-column: 1;
    font-size: 14px;
    max-width: 100%;
  }

  .modal-reserve-due {
    grid-column: 1;
    padding: var(--space-md);
    height: 55px;
    border: none;
    position: relative;
  }

  .modal-reserve-due::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    -webkit-border-image: url('../assets/images/squircle-border-16px-grey-1px-stroke.png') 60 / 30px round;
    border-image: url('../assets/images/squircle-border-16px-grey-1px-stroke.png') 60 / 30px round;
    pointer-events: none;
  }

  .modal-reserve-due-label {
    font-size: 14px;
  }

  .modal-reserve-due-amount {
    font-size: 16px;
    letter-spacing: -1px;
  }

  .modal-reserve-apple-pay img {
    height: 28px;
  }

  .modal-reserve-apple-pay,
  .modal-reserve-checkout {
    height: 55px;
    border-radius: 0;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 60 fill / 30px;
  }

  .modal-reserve-checkout {
    font-size: 24px;
    margin: 0;
    padding: 0;
    transform: none;
    perspective: none;
    will-change: auto;
  }

  .modal-reserve-checkout:hover,
  .modal-reserve-checkout:active {
    transform: none;
  }

}

/* Reservation Modal - Express Checkout Element */
.modal-reserve-express-checkout {
  grid-column: 1 / -1;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 60 fill / 30px;
}


/* Reservation Modal - Error */
.modal-reserve-error {
  grid-column: 1 / -1;
  font-family: var(--font-body-text);
  font-size: 16px;
  color: #d32f2f;
  line-height: 1.2;
  min-height: 0;
}

.modal-reserve-error:empty {
  display: none;
}

/* Reservation Modal - Checkout disabled */
.modal-reserve-checkout:disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 768px) {
  .modal-reserve-express-checkout {
    min-height: 44px;
  }
}

/* ==========================================================================
   Reservation Confirmed Page
   ========================================================================== */

.reservation-confirmed {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  min-height: calc(100vh - 200px);
}

.reservation-confirmed-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.reservation-confirmed-heading {
  grid-column-start: 7;
  padding-left: var(--space-lg);
}

.reservation-confirmed-heading h1 {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.reservation-confirmed-card {
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-20px-grey.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px-grey.png') 60 / 30px round;
  padding: 0;
  display: grid;
  grid-template-columns: 190px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--space-md);
}

.reservation-confirmed-card-header {
  display: contents;
}

.reservation-confirmed-card-image {
  grid-column: 1;
  grid-row: 1 / -1;
  background: #e0e0e0;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-16px.png') 60 fill / 30px;
}

.reservation-confirmed-card-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.reservation-confirmed-card-info {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.reservation-confirmed-card-name {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  color: #000;
  letter-spacing: -1.5px;
  line-height: 1;
}

.reservation-confirmed-card-meta {
  font-family: var(--font-body-text);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1;
  margin-top: var(--space-xs);
}

.reservation-confirmed-card-price {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 400;
  color: #000;
  letter-spacing: -1.5px;
  line-height: 1;
  align-self: start;
  justify-self: end;
}

.reservation-confirmed-card-divider {
  grid-column: 2;
  grid-row: 2;
  height: 2px;
  background: #e0e0e0;
  margin: var(--space-sm) 0;
}

.reservation-confirmed-card-total {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

.reservation-confirmed .modal-waitlist-submit {
  margin-top: var(--space-md);
}

.reservation-confirmed-help {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1.1;
  margin-top: var(--space-sm);
  max-width: calc(var(--column-width) * 3 + var(--space-md) * 2);
}

.reservation-confirmed-help a {
  color: var(--color-gray);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .reservation-confirmed {
    padding-top: calc(56px + var(--space-lg));
  }

  .reservation-confirmed-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .reservation-confirmed-heading,
  .reservation-confirmed-sidebar {
    grid-column: 1;
  }

  .reservation-confirmed-heading {
    padding-left: 0;
    order: -1;
  }

  .reservation-confirmed .modal-waitlist-submit {
    margin-top: var(--space-lg);
    height: 72px;
  }

  .reservation-confirmed-heading h1 {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  .reservation-confirmed-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    border: none;
    position: relative;
    gap: 0;
  }

  .reservation-confirmed-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 30px solid transparent;
    -webkit-border-image: url('../assets/images/squircle-border-20px-grey-1px-stroke.png') 60 / 30px round;
    border-image: url('../assets/images/squircle-border-20px-grey-1px-stroke.png') 60 / 30px round;
    pointer-events: none;
  }

  .reservation-confirmed-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .reservation-confirmed-card-image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-12px.png') 36 fill / 18px;
    mask-border: url('../assets/images/squircle-mask-12px.png') 36 fill / 18px;
  }

  .reservation-confirmed-card-info {
    flex: 1;
    align-self: start;
    margin-top: var(--space-sm);
  }

  .reservation-confirmed-card-name {
    font-size: 16px;
    letter-spacing: -1px;
    padding-bottom: var(--space-sm);
  }

  .reservation-confirmed-card-price {
    font-size: 16px;
    letter-spacing: -1px;
  }

  .reservation-confirmed-card-price {
    flex-shrink: 0;
    text-align: right;
    align-self: start;
    margin-top: var(--space-sm);
  }

  .reservation-confirmed-card-meta {
    font-size: 14px;
  }

  .reservation-confirmed-card-divider {
    height: 1px;
    margin: var(--space-md) 0;
    margin-left: calc(60px + var(--space-sm));
  }

  .reservation-confirmed-card-total {
    font-size: 14px;
    color: var(--color-gray);
    margin-left: calc(60px + var(--space-sm));
    padding-bottom: var(--space-sm);
  }

  .reservation-confirmed-help {
    font-size: 14px;
    max-width: none;
  }
}

/* ==========================================================================
   Reservation Checkout Page
   ========================================================================== */

.reservation-checkout-container {
  min-height: 400px;
}

.reservation-checkout-cancel {
  margin-top: var(--space-md);
  font-family: var(--font-body-text);
  font-size: 18px;
  color: var(--color-gray);
}

.reservation-checkout-cancel a {
  color: var(--color-gray);
  text-decoration: underline;
}

/* ==========================================================================
   About Page
   ========================================================================== */

.about-page {
  background-color: var(--color-white);
  color: var(--color-bg);
  color-scheme: light;
}

/* Always show fixed header on about page */
.about-page .header.header-fixed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* About page header styles */
.about-page .header::before {
  display: none;
}

.about-page .header-inner {
  background: rgba(224, 224, 224, 0.9);
  padding-right: 12px;
}

@supports (color: color(display-p3 1 0 0)) {
  .about-page .header-inner {
    background: color(display-p3 0.878 0.878 0.878 / 0.9);
  }
}

.about-page .logo-text {
  filter: invert(1);
}

.about-page .header-inner-border::after {
  -webkit-border-image: url('../assets/images/squircle-border-20px-light.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px-light.png') 60 / 30px round;
}

.about-divider {
  width: 100%;
  display: block;
}

.about-divider img {
  width: 100%;
  display: block;
}

/* About content typography */
.about-content {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  min-height: calc(100vh - 200px);
  font-weight: 300;
  font-feature-settings: "pnum" 1, "ss04" 1, "ss05" 1, "ss06" 1, "ss07" 1, "ss08" 1, "ss10" 1, "ss11" 1, "ss12" 1;
}

.about-content h1,
.about-content p {
  font-family: var(--font-heading);
  font-size: 136px;
  line-height: 0.9;
  letter-spacing: -10px;
  font-kerning: normal;
  font-optical-sizing: auto;
}

.about-content h1 {
  margin-bottom: var(--space-lg);
  font-weight: 300;
}

.about-content p {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Ligature spans - reset letter-spacing and enable all ligatures */
.liga {
  letter-spacing: 0;
  font-feature-settings: "liga" 1, "dlig" 1, "clig" 1;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1, "clig" 1;
}


.about-content a {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  color: inherit;
  transition: opacity var(--transition-fast);
}

.about-content a:hover {
  opacity: 0.7;
}

/* About page mobile */
@media (max-width: 768px) {
  .about-content {
    padding-top: 56px;
    padding-bottom: var(--space-lg);
  }

  .about-content h1,
  .about-content p {
    font-size: 48px;
    line-height: 0.85;
    letter-spacing: -3px;
  }

  .about-content h1 {
    margin-bottom: var(--space-md);
  }

  .about-content p {
    margin: var(--space-md) 0;
  }

  .about-content a {
    text-decoration-thickness: 2px;
  }

  /* Mobile header - show nav button and light border for about page */
  .about-page .nav a:first-child {
    display: flex;
  }

  .about-page .header-inner-border::after {
    -webkit-border-image: url('../assets/images/header-mobile-border-light.png') 48 / 24px round;
    border-image: url('../assets/images/header-mobile-border-light.png') 48 / 24px round;
  }

.M-Dial .card-hero-outer {
  margin-top: var(--space-md);
}

}

/* ==========================================================================
   Business Page
   ========================================================================== */

/* Always show fixed header on business page */
.business-page .header.header-fixed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.business-content {
  padding-top: calc(52px + var(--space-md) * 2);
}

/* Hero */
.business-hero {
  align-items: stretch;
}

.business-hero-card {
  width: 100%;
  height: 681px;
  background: var(--color-card-bg);
}

.business-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.business-hero-bottom {
  margin-top: auto;
}

.business-title {
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -6.4px;
}

/* Body text */
.business-body {
  margin-top: var(--space-xl);
}

.business-body p + p {
  margin-top: var(--space-md);
}

/* Form card */
.business-form {
  background-color: #1e1e1e;
  padding: var(--space-lg) var(--space-lg);
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
}

.business-form-heading {
  font-family: var(--font-body-text);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-white);
}

.business-field {
  display: flex;
  flex-direction: column;
}

.business-field-label {
  font-family: var(--font-body-text);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.business-input {
  width: 100%;
  height: 72px;
  background-color: var(--color-bg-gray);
  border: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--color-white);
  font-family: var(--font-body-text);
  font-size: 18px;
  font-weight: 400;
  padding: 0 var(--space-md);
  -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 40 fill / 20px;
  mask-border: url('../assets/images/squircle-mask-16px.png') 40 fill / 20px;
}

.business-input:focus {
  outline: none;
}

.business-input::placeholder {
  color: var(--color-gray);
}

.business-textarea {
  height: 144px;
  padding: var(--space-md);
  resize: none;
}

.business-apply-btn {
  margin-top: var(--space-sm);
  width: fit-content;
}

.business-send-btn {
  align-self: center;
}

/* Business page mobile */
@media (max-width: 768px) {
  .business-content {
    padding-top: calc(48px + var(--space-md) * 2);
  }

  .business-hero-card {
    height: 400px;
  }

  .business-hero-card img {
    object-position: bottom;
  }

  .business-hero-bottom {
    margin-top: 0;
  }

  .business-title {
    font-size: 32px;
    letter-spacing: -2px;
  }

  .business-apply-btn {
    margin-top: var(--space-md);
  }

  .business-body {
    margin-top: var(--space-lg);
  }

  .business-body p + p {
    margin-top: var(--space-md);
  }

  .business-form {
    padding: var(--space-md);
    gap: var(--space-md);
    margin-top: var(--space-lg);
    -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 40 fill / 20px;
    mask-border: url('../assets/images/squircle-mask-16px.png') 40 fill / 20px;
  }

  .business-form-heading {
    font-size: 24px;
  }

  .business-field-label {
    font-size: 14px;
  }

  .business-input {
    height: 56px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Scroll Reveal
   ========================================================================== */

/* Reveal targets start hidden only when the user has NOT asked for reduced
   motion. Under reduce they remain at their natural visible state. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    will-change: transform, opacity;
  }

  [data-reveal-cards] > .card,
  [data-reveal-cards] > .card-item,
  [data-reveal-cards] > .updates-card,
  [data-reveal-cards] > .press-download-outer {
    opacity: 0;
    transform: translateY(24px);
    will-change: transform, opacity;
  }

  [data-reveal-with-keyboard] {
    opacity: 0;
    transform: translateY(24px);
    will-change: transform, opacity;
  }
}

/* Safety net: if GSAP fails to load (or reduced motion is active) main.js adds
   .gsap-fallback to <body>. Force every reveal/entrance target to its final
   visible state so no content is ever stranded at opacity:0. */
.gsap-fallback .reveal,
.gsap-fallback [data-reveal-cards] > .card,
.gsap-fallback [data-reveal-cards] > .card-item,
.gsap-fallback [data-reveal-cards] > .updates-card,
.gsap-fallback [data-reveal-cards] > .press-download-outer,
.gsap-fallback [data-reveal-with-keyboard],
body.gsap-fallback .header-standard,
body.gsap-fallback .title-block,
body.gsap-fallback .hero-cta-wrapper,
body.gsap-fallback #heroCardRow > .card {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Legal / Policy Pages
   ========================================================================== */

.legal-content {
  overflow: hidden;
}

.legal-content h1 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 85px;
  line-height: 85px;
  letter-spacing: -4px;
  padding-top: 128px;
  margin-bottom: 48px;
}

.legal-page-content {
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 32px;
}

.legal-page-content a {
  color: #000;
  text-decoration: underline;
}

.legal-intro {
  font-size: 32px;
  line-height: 42px;
}

.legal-page-content h2 {
  color: #9D9D9D;
  font-size: 26px;
  line-height: 120%;
  font-weight: 300;
  width: 23%;
  margin: 0;
  padding: 0;
}

.legal-section-main-content li {
  padding: 2px 0;
}

.legal-section {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-bottom: 1px solid #9D9D9D;
  margin: 24px 0 0 0;
  padding: 0 0 8px 0;
  font-variant-numeric: tabular-nums slashed-zero;
  justify-content: space-between;
}

.legal-section-main-content {
  width: 75%;
}

.legal-section-main-content p {
  margin: 0 0 24px;
  padding: 0;
}

@media (max-width: 768px) {
  .legal-page-content h1 {
    font-size: 34px;
    line-height: 38px;
    letter-spacing: -2px;
    padding-top: 56px;
    margin-bottom: 0;
  }

  .legal-section {
    flex-wrap: wrap;
  }

  .legal-page-content h2 {
    width: 100%;
  }

  .legal-section-main-content {
    width: 100%;
  }

  .legal-section-main-content ul {
    padding-left: 21px;
  }

  .legal-section-main-content li {
    padding: 0;
  }

  .legal-section,
  .legal-section h2 {
    font-size: 18px;
    line-height: 24px;
  }

  .legal-section h2 {
    padding-bottom: 16px;
  }
}

/* ==========================================================================
   Firmware
   --------------------------------------------------------------------------
   Body content uses legacy classes (.about-page-content, .tech-specs-table-
   container, .table-row, .download-table-version etc.) preserved verbatim
   from _archive/altar-i-firmware.html so the page renders as it did on the
   old site. Rules below are transplanted from _archive/css/main.css with
   the following adaptations:
     - Every selector scoped under `.firmware-page` to prevent leakage onto
       altar-i-field-manual.html (which uses the same legacy class names).
     - Font families swapped from the old 'Tobias-light' / 'GT-Flexa' (no
       longer @font-face'd) to the project font variables.
     - .col-4 / .col-8 widths re-asserted as flex-basis since the new
       site's .col-N classes are CSS Grid spans.
   ========================================================================== */

/* Always show fixed header on firmware page (new shell behavior) */
.firmware-page .header.header-fixed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* .grey-text — _archive/css/main.css:478 */
.firmware-page .grey-text {
  color: #9D9D9D;
}

/* Tech-specs table — _archive/css/main.css:563-606 */
.firmware-page .tech-specs-table-container {
  width: 100%;
}

.firmware-page .table-row {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #9D9D9D;
  padding: 16px 0;
  transition: background-color .2s ease-out, color .3s;
}

.firmware-page .table-row:hover {
  background-color: #fff;
  color: #000;
}

.firmware-page .table-row:hover a {
  color: #000;
}

.firmware-page .table-row-heading,
.firmware-page .table-row-entries,
.firmware-page .download-table-link {
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 34px;
  font-variant-numeric: tabular-nums slashed-zero;
}

.firmware-page .table-row-heading {
  width: 25%;
  padding-left: 24px;
}

.firmware-page .table-row-entries {
  width: 75%;
}

.firmware-page .table-row-entries a {
  color: #9D9D9D;
  text-decoration: underline;
}

/* Re-assert col-4 / col-8 as flex widths (new site .col-N are grid spans) */
.firmware-page .table-row > .col-4 {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.firmware-page .table-row > .col-8 {
  flex: 0 0 66.666%;
  max-width: 66.666%;
}

/* H1 typography — mirrors .about-content h1 (see line 4314), in white */
.firmware-page .about-page-content h1 {
  font-family: var(--font-heading);
  font-size: 136px;
  line-height: 0.9;
  letter-spacing: -10px;
  font-weight: 300;
  font-kerning: normal;
  font-optical-sizing: auto;
  color: var(--color-white);
  padding-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.firmware-page .about-page-content a {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  color: inherit;
}

/* Download table version pill / installation heading — _archive/css/main.css:1701-1768 */
.firmware-page .download-table-version-container {
  display: flex;
}

.firmware-page .download-table-version {
  margin: 0 0 12px 0;
  font-family: var(--font-body);
  font-size: 68px;
  line-height: 68px;
  font-weight: 200;
  border: 3px solid #ffffff;
  border-radius: 50px;
  padding: 8px 32px;
  font-variant-numeric: tabular-nums;
}

.firmware-page .installation-heading {
  margin: 0 0 12px 0;
  font-family: var(--font-body);
  font-size: 68px;
  line-height: 68px;
  font-weight: 200;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.firmware-page .slashed-zero {
  font-variant-numeric: slashed-zero;
}

.firmware-page .download-table-link {
  margin-bottom: 8px;
  color: #ffffff;
}

.firmware-page .download-table-link a {
  text-decoration: underline;
}

.firmware-page .download-table-link a:hover {
  color: #ffffff;
}

.firmware-page .download-table ul {
  margin: 0;
}

.firmware-page .download-table ol {
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 34px;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: normal;
}

/* Suppress the .table-row hover invert specifically inside .downloads — _archive/css/main.css:1756-1768 */
.firmware-page .downloads .table-row {
  background-color: inherit;
  color: inherit;
}

.firmware-page .downloads .table-row:hover {
  background-color: inherit;
  color: inherit;
}

.firmware-page .downloads .table-row:hover a {
  color: #ffffff;
}

/* Mobile — _archive/css/main.css:1950-1960 + 2380-2418 */
@media (max-width: 768px) {
  .firmware-page .about-page-content h1 {
    font-size: 48px;
    line-height: 0.85;
    letter-spacing: -3px;
    padding-top: calc(56px + var(--space-md));
    margin-bottom: var(--space-md);
  }

  .firmware-page .about-page-content a {
    text-decoration-thickness: 2px;
  }

  .firmware-page .table-row {
    flex-wrap: wrap;
  }

  .firmware-page .table-row-heading,
  .firmware-page .table-row-entries {
    font-size: 21px;
    line-height: 24px;
    width: 100%;
    padding-left: 8px;
  }

  .firmware-page .download-table-version {
    margin: 0 0 12px 0;
    font-family: var(--font-body);
    font-size: 30px;
    line-height: 100%;
    border: 2px solid #ffffff;
    border-radius: 50px;
    padding: 8px 16px;
  }

  .firmware-page .installation-heading {
    margin: 0 0 12px 0;
    font-family: var(--font-body);
    font-size: 30px;
    line-height: 100%;
    font-weight: 200;
    padding: 0;
  }

  .firmware-page .download-table .col-4,
  .firmware-page .download-table .col-8 {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto;
  }

  .firmware-page .download-table .table-row-entries {
    padding-left: 0;
    padding-top: 8px;
  }

  .firmware-page .download-table ul {
    padding-left: 24px;
  }

  .firmware-page .download-table ol {
    font-size: 21px;
    line-height: 24px;
    width: 100%;
    padding-left: 24px;
  }
}

/* ==========================================================================
   Field Manual
   --------------------------------------------------------------------------
   Body content uses legacy classes (.about-page-content.field-guide,
   .field-guide-section, .table-row, .hot-swap-*, .index-table-button etc.)
   preserved verbatim from _archive/altar-i-field-manual.html. Rules below
   are wholesale-copied from _archive/css/main.css (desktop ~1432-1697,
   mobile ~2244-2378) and wrapped under .field-manual-page using CSS
   nesting so all rules are scoped to this page only. Fonts swapped from
   old 'Tobias-light' / 'GT-Flexa-Mono' to project font variables.
   Includes base shared rules (.table-row, .grey-text, etc.) duplicated
   from the firmware section so the two pages stay independent.
   ========================================================================== */

/* Always show fixed header on field manual page */
.field-manual-page .header.header-fixed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.field-manual-page {
  /* Push content below fixed header */
  .about-page-content {
    padding-top: var(--space-xl);
  }

  /* Base shared rules — _archive/css/main.css:478, 563-606 */
  .grey-text { color: #9D9D9D; }

  .tech-specs-table-container { width: 100%; }

  .table-row {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #9D9D9D;
    padding: 16px 0;
    transition: background-color .2s ease-out, color .3s;
  }

  .table-row-heading,
  .table-row-entries {
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 34px;
    font-variant-numeric: tabular-nums slashed-zero;
  }

  .table-row-heading {
    width: 25%;
    padding-left: 24px;
  }

  .table-row-entries {
    width: 75%;
  }

  .table-row-entries a {
    color: #9D9D9D;
    text-decoration: underline;
  }

  /* Field-guide-specific rules — _archive/css/main.css:1432-1697 */

  .field-guide h1 {
    text-transform: uppercase;
    max-width: 100%;
    width: 100%;
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 9.3vw;
    letter-spacing: -10px;
    text-align-last: justify;
    line-height: 50%;
  }

  .field-guide h2 {
    text-transform: uppercase;
    font-size: 42px;
    line-height: 100%;
    font-family: var(--font-mono);
    font-weight: 300;
    padding-top: 16px;
  }

  .field-guide-subheader {
    display: flex;
    justify-content: space-between;
  }

  .field-guide-regulatory-logos {
    align-self: flex-end;
    margin-bottom: 16px;
  }

  .field-guide .field-guide-header img {
    height: 72px;
    width: auto;
  }

  .field-guide-section {
    border: #fff 2px solid;
    box-sizing: border-box;
    margin-top: 56px;
  }

  .field-guide-section-header {
    height: 180px;
    border-bottom: #fff 2px solid;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .field-guide-heading-mobile-line-break {
    display: inline;
  }

  .field-guide-section-header h3 {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 115px;
    line-height: 85px;
    letter-spacing: -7px;
    text-align: center;
    height: auto;
  }

  .field-guide-table-container {
    width: 100%;
  }

  .field-guide .table-row-entries {
    padding: 0 24px 0 0;
  }

  .field-guide .table-row-heading {
    padding-right: 24px;
  }

  .field-guide .table-row a {
    text-decoration-thickness: 1px;
  }

  .field-guide .table-row {
    border-bottom: 2px solid #fff;
  }

  .field-guide .no-bottom-border {
    border-bottom: none;
    flex-grow: 2;
  }

  .field-guide .table-row-heading,
  .field-guide .table-row-entries,
  .field-guide ol {
    font-family: var(--font-mono);
    font-size: 22px;
    line-height: 100%;
    font-variant-numeric: tabular-nums slashed-zero;
    text-transform: uppercase;
    letter-spacing: normal;
    margin: 0;
  }

  .lower-alpha-list {
    list-style-type: lower-alpha;
  }

  button.index-table-button img {
    height: 15px;
    width: auto;
  }

  button.index-table-button {
    height: 24px;
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
    box-shadow: none;
    border: 2px solid #ffffff;
    border-radius: 12px;
    padding: 2px 16px 2px 16px;
    margin-right: 24px;
  }

  .table-row:hover button.index-table-button {
    background-color: #000;
    border: 2px solid #000;
    transition: border .2s;
    transition: background-color .2s;
  }

  .field-guide .image-row {
    padding: 24px;
    justify-content: space-around;
    border-bottom: 2px solid #fff;
  }

  .field-guide .index .table-row-heading {
    width: 8.33%;
  }

  .field-guide .index .table-row-entries {
    width: 80.33%;
  }

  .field-guide .index .index-table-button-wrapper {
    width: 8.33%;
    display: flex;
    justify-content: flex-end;
  }

  .field-guide .index .table-row {
    justify-content: space-between;
  }

  .field-guide .index a {
    text-decoration: none;
  }

  .field-guide .index .table-row:hover {
    background-color: #fff;
    color: #000;
  }

  .field-guide .index .table-row:hover a {
    color: #000;
  }

  .field-guide .index .table-row:hover .index-table-button {
    background-color: #000;
    border-color: #fff;
  }

  .field-guide .index .table-row:hover .index-table-button img {
    filter: invert(1);
  }

  .field-guide-section img,
  .field-guide-section svg {
    width: 100%;
    height: auto;
  }

  .field-guide .image-row {
    padding: 48px 24px;
    margin: 0;
  }

  .field-guide .field-guide-split-section {
    border-bottom: none;
  }

  .field-guide .field-guide-split-section {
    padding: 0;
  }

  .field-guide .field-guide-split-section .field-guide-table-container {
    display: flex;
    flex-direction: column;
  }

  .field-guide-split-section img {
    align-self: center;
  }

  .split-section-image-container {
    display: flex;
    justify-content: center;
    padding: 48px 24px;
    border-right: 2px solid #fff;
  }

  .field-guide svg path {
    stroke-width: 2px;
  }

  .charging-battery-life .split-section-image-container {
    padding: 0;
  }

  .hot-swap-instruction-container {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
  }

  .hot-swap-instruction-step-container {
    width: 25%;
    border-right: 2px solid #fff;
    display: flex;
    flex-direction: column;
  }

  .hot-swap-instruction-step-container:last-child {
    border: none;
  }

  .hot-swap-instruction-step-container .table-row {
    flex-direction: column;
  }

  .hot-swap-step-text-container .table-row {
    padding-top: 0;
  }

  .hot-swap-step-text-container {
    border-top: 2px solid #fff;
  }

  .hot-swap-instruction-step-container .table-row-heading,
  .hot-swap-instruction-step-container .table-row-entries {
    padding: 12px;
  }

  .hot-swap-step-image-container img {
    height: 100%;
  }

  .hot-swap-step-text-container {
    flex-grow: 1;
  }

  .hot-swap-step-text-container .field-guide-table-container {
    height: 100%;
  }

  .hot-swap-step-text-container .table-row {
    height: inherit;
  }

  .regulatory .field-guide-regulatory-logos {
    height: 68px;
    width: auto;
    position: relative;
    align-self: flex-start;
    margin-top: 16px;
  }

  .regulatory .regulatory-table {
    display: flex;
    flex-direction: column;
  }

  .field-guide ul {
    padding-left: 16px;
  }

  .field-manual-lowercase {
    text-transform: lowercase;
  }

  /* Mobile — _archive/css/main.css:2244-2378 */
  @media (max-width: 768px) {
    .about-page-content {
      padding-top: calc(56px + var(--space-md));
    }

    .field-guide-subheader {
      flex-wrap: wrap;
    }

    .field-guide-header h1 {
      font-size: 54px;
      line-height: 90%;
      letter-spacing: -2px;
      margin: 0;
      text-align-last: left;
    }

    .field-guide-header h2 {
      padding-top: 8px;
      margin: 0;
    }

    .field-guide-header .col-9,
    .field-guide .col-6 {
      height: auto;
    }

    .field-guide .field-guide-header img {
      height: 38px;
      margin: 32px 0 16px 0;
    }

    .field-guide-heading-mobile-line-break {
      display: block;
    }

    .field-guide-subheader h2 {
      font-size: 22px;
    }

    .field-guide-section-header {
      min-height: 80px;
      height: auto;
    }

    .field-guide-section-header h3 {
      font-size: 45px;
      line-height: 110%;
      letter-spacing: -4px;
    }

    .field-guide .table-row {
      flex-wrap: wrap;
      padding: 8px 0;
    }

    .field-guide .index .table-row-heading,
    .field-guide .index .table-row-entries,
    .field-guide .index .index-table-button-wrapper {
      width: 100%;
      padding: 0 8px 8px 8px;
      justify-content: flex-start;
    }

    .field-guide .index-table-button {
      width: 100%;
      margin: 0;
    }

    .field-guide .table-row-heading,
    .field-guide .table-row-entries,
    .field-guide ol {
      font-size: 18px;
      width: 100%;
      padding: 0 8px;
    }

    .field-guide .table-row-heading {
      padding-bottom: 4px;
    }

    .field-guide-section {
      margin-top: 16px;
    }

    .field-guide .typical-contents .image-row {
      flex-wrap: nowrap;
    }

    .cable-image {
      padding-right: 24px;
    }

    .hot-swap-instruction-container {
      flex-wrap: wrap;
    }

    .hot-swap-instruction-step-container {
      border-top: 2px solid #fff;
      width: 100%;
    }

    .hot-swap-instruction-step-container:first-child {
      border-top: none;
    }

    .hot-swap-instruction-step-container:last-child {
      border-top: 2px solid #fff;
    }

    .field-guide .image-row {
      padding: 0;
    }

    .typical-contents .image-row {
      padding: 12px;
    }

    .split-section-image-container {
      border-right: none;
      border-bottom: 2px solid #fff;
    }

    .split-section-image-container {
      padding: 12px 8px;
    }

    .table-row-entries ol {
      padding-left: 36px;
    }

    .regulatory .field-guide-regulatory-logos {
      height: 42px;
    }

    .field-guide svg path {
      stroke-width: 1px;
    }

    circle {
      stroke-width: 1px;
    }
  }
}

/* ==========================================================================
   Updates
   ========================================================================== */

.updates-page {
  overflow-x: hidden;
}

.updates-page .header.header-fixed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* Larger row-gap on the listing grid per Figma (1748:3131) */
.updates-page .grid {
  row-gap: var(--space-lg);
}

.updates-page .waitlist-form {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Page heading */
.updates-hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xs);
}

.updates-hero h1 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 136px;
  line-height: 0.9;
  letter-spacing: -10px;
  color: var(--color-white);
  text-wrap: auto;
  margin: 0;
}

/* Subscribe bar — white pill with orange submit */
/* Update card — shared base (used by grid + hero variants) */
.updates-card {
  position: relative;
  height: 634px;
  background: var(--color-card-bg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'zero' 1;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  transition: transform 0.2s ease;
  will-change: transform;
}

.updates-card * {
  cursor: inherit;
}

.updates-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
}

.updates-card:hover {
  transform: translateZ(0) scale(1.02);
}

.updates-card:active {
  transform: translateZ(0) scale(0.99);
}

.updates-card:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.updates-card-image {
  aspect-ratio: 424 / 365;
  background: var(--color-bg);
  overflow: hidden;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
}

.updates-card-top {
  margin-top: var(--space-sm);
}

.updates-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.updates-card-tag,
.update-centre-post .update-centre-card-content .pill-tag-text {
  font-family: var(--font-mono);
  font-size: 21px;
  line-height: 0.82;
  color: var(--color-orange);
  text-transform: uppercase;
}

.updates-card-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-stretch: 125%;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -2.4px;
  color: var(--color-white);
  margin: 0;
}

.updates-card-date {
  font-family: var(--font-body-text);
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
  color: var(--color-gray);
  margin-top: auto;
}

/* Hero card — image left, text right */
.updates-card-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-md);
}

.updates-card-hero .updates-card-image {
  aspect-ratio: auto;
  height: 100%;
  background: var(--color-bg);
}

.updates-card-hero-body {
  display: flex;
  flex-direction: column;
}

.updates-card-hero .updates-card-title {
  font-size: 64px;
  letter-spacing: -4px;
}

.updates-card-hero .updates-card-date {
  font-size: 30px;
}

@media (max-width: 768px) {
  .updates-hero {
    padding-top: calc(48px + var(--space-md) * 2);
  }

  .updates-hero h1 {
    font-size: 48px;
    letter-spacing: -3px;
  }

  .updates-card {
    height: 542px;
  }

  .updates-card-hero {
    display: flex;
  }

  .updates-card-hero .updates-card-image {
    aspect-ratio: 424 / 365;
    height: auto;
  }

  .updates-card-hero-body {
    flex: 1;
    margin-top: var(--space-md);
  }

  .updates-card-top {
    margin-top: var(--space-md);
  }

  .updates-card-tag,
  .update-centre-post .update-centre-card-content .pill-tag-text {
    font-size: 13px;
  }

  .updates-card-title {
    font-size: 24px;
    letter-spacing: -1px;
    margin-top: var(--space-xs);
  }

  .updates-card-hero .updates-card-title {
    font-size: 24px;
    letter-spacing: -1px;
    margin-top: var(--space-xs);
  }

  .updates-card-date {
    font-size: 14px;
  }

  .updates-card-hero .updates-card-date {
    font-size: 14px;
  }

  .waitlist-input {
    font-size: 30px;
    letter-spacing: -2px;
  }

  .updates-page .waitlist-form {
    -webkit-mask-box-image: url('../assets/images/squircle-mask-30px.png') 120 fill / 30px;
    mask-border: url('../assets/images/squircle-mask-30px.png') 120 fill / 30px;
  }

  .updates-page .waitlist-submit {
    border-radius: 0;
  }
}

/* ==========================================================================
   Press Page
   ========================================================================== */

.press-page {
  overflow-x: hidden;
}

.press-page .header.header-fixed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.press-hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.press-hero h1 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 136px;
  line-height: 0.9;
  letter-spacing: -10px;
  color: var(--color-white);
  text-wrap: auto;
  margin: 0;
}

.press-hero h1 a {
  color: inherit;
  text-decoration: underline;
}

.press-page .grid {
  row-gap: var(--space-sm);
}

.press-page .updates-card-hero {
  margin-bottom: calc(var(--space-lg) - var(--space-sm));
}

.press-download-outer {
  position: relative;
}

.press-download-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 161px;
  padding: 0 var(--space-md);
  background: var(--color-card-bg);
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'zero' 1;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
}

.press-download-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.press-download-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 30px solid transparent;
  -webkit-border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
  border-image: url('../assets/images/squircle-border-20px.png') 60 / 30px round;
}

.press-download-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.press-download-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-stretch: 125%;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--color-white);
  margin: 0;
}

.press-download-meta {
  font-family: var(--font-body-text);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--color-gray);
  margin: 0;
}

.press-download-button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 313px;
  height: 72px;
  background: var(--color-orange);
  text-decoration: none;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, pointer;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  transition: transform 0.2s ease;
  will-change: transform;
}

.press-download-button:hover {
  transform: scale(1.04);
}

.press-download-button:active {
  transform: scale(0.98);
}

.press-download-button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.press-download-arrow {
  width: 32px;
  height: auto;
  display: block;
  transform: rotate(90deg);
}

/* External-link rows: base → asset rotated to ↗ instead of the download ↓ */
.press-download-arrow-external {
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
  .press-hero {
    padding-top: calc(48px + var(--space-md) * 2);
    padding-bottom: var(--space-md);
  }

  .press-hero h1 {
    font-size: 48px;
    line-height: 0.9;
    letter-spacing: -3px;
  }

  .press-page .updates-card-hero {
    margin-bottom: calc(var(--space-md) - var(--space-sm));
  }

  .press-download-row {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: var(--space-md);
    gap: var(--space-md);
    -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 40 fill / 20px;
    mask-border: url('../assets/images/squircle-mask-16px.png') 40 fill / 20px;
  }

  .press-download-border::after {
    border: 20px solid transparent;
    -webkit-border-image: url('../assets/images/squircle-border-16px.png') 40 / 20px round;
    border-image: url('../assets/images/squircle-border-16px.png') 40 / 20px round;
  }

  .press-download-title {
    font-size: 24px;
    letter-spacing: -1px;
  }

  .press-download-meta {
    font-size: 14px;
  }

  .press-download-button {
    width: 100%;
    height: 56px;
    -webkit-mask-box-image: url('../assets/images/squircle-mask-16px.png') 48 fill / 24px;
    mask-border: url('../assets/images/squircle-mask-16px.png') 48 fill / 24px;
  }

  .press-download-arrow {
    width: 22px;
  }
}

/* ==========================================================================
   Updates Posts (transplanted from _archive/css/main.css, scoped under
   .update-centre-post to avoid collisions with the new design's globals)
   ========================================================================== */

.update-centre-post .image-row {
  display: flex;
  margin-left: -4px;
  margin-right: -4px;
  margin-top: var(--space-md);
}

.update-centre-post .col-4 {
  flex-grow: 1;
  flex-shrink: 3;
  flex-basis: 33%;
  max-width: 33%;
}

.update-centre-post .col-6 {
  flex-grow: 1;
  flex-shrink: 3;
  flex-basis: 50%;
  max-width: 50%;
}

.update-centre-post .col-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.update-centre-post .col-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.update-centre-post .card {
  background-color: #202020;
  overflow: hidden;
  position: relative;
  margin: 4px;
  display: flex;
  height: auto;
  -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
}

.update-centre-post .card::after {
  content: none;
}

.update-centre-post .grey-text {
  color: #9D9D9D;
}

.update-centre-post .card-heading,
.update-centre-post .card-text-small {
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 28px;
}

.update-centre-post .card-text-large {
  font-family: var(--font-body);
  font-size: 68px;
  line-height: 72px;
  font-weight: 200;
}

.update-centre-post .update-post-header {
  display: flex;
  padding-top: 96px;
}

.update-centre-post .update-post-header .card {
  margin: 0 0 32px 0;
}

.update-centre-post .update-centre-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 24px;
}

.update-centre-post .update-centre-card-content .pill-tag-container {
  display: block;
}

.update-centre-post .update-centre-card-content .filed-under {
  display: none;
}

.update-centre-post .update-centre-card-content .pill-tag-text {
  border: 0;
  height: auto;
  padding: 0;
  margin: 0;
}

.update-centre-post .update-centre-card-content .card-heading {
  font-family: var(--font-body);
  font-weight: 400;
  font-stretch: 125%;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--color-white);
  margin-top: var(--space-xs);
}

.update-centre-post .update-centre-card-content .card-text-small {
  font-family: var(--font-body-text);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--color-gray);
  margin-top: var(--space-sm);
}

.update-centre-post .update-centre-card-image {
  margin: 24px;
}

.update-centre-post .update-centre-card-image img {
  border-radius: 20px;
}

.update-centre-post .pill-tag-text {
  border: 3px solid #ffffff;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 100%;
  border-radius: 22px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  margin-bottom: 8px;
  color: #fff;
}

.update-centre-post .filed-under {
  color: #fff;
  margin-bottom: 8px;
}

.update-centre-post .update-post-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.update-centre-post .update-post-content a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.update-centre-post .card-text-small {
  position: inherit;
  margin-top: 12px;
}

.update-centre-post h2 {
  font-family: var(--font-body);
  color: #fff;
  margin: var(--space-md) 0 8px 0;
  width: 100%;
  align-self: center;
  font-size: 34px;
  font-weight: 500;
  line-height: 100%;
}

.update-centre-post p,
.update-centre-post ul,
.update-centre-post ol {
  color: #fff;
  font-family: var(--font-body-text);
  font-size: 24px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 0;
  margin: 0 0 var(--space-md) 0;
  align-self: center;
  width: 100%;
}

.update-centre-post ul,
.update-centre-post ol {
  padding-left: 24px;
}

.update-centre-post .footnotes {
  color: var(--color-gray);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

.update-centre-post li {
  margin-bottom: var(--space-md);
}

.update-centre-post .lede {
  font-family: var(--font-body);
  font-size: 34px;
  line-height: 36px;
  margin: var(--space-sm) 0 var(--space-lg) 0;
  align-self: flex-end;
}

.update-centre-post sup {
  font-feature-settings: 'sups' 1;
  font-size: inherit;
  vertical-align: baseline;
  top: 0;
}

.update-centre-post .caption {
  color: #6d6d6d;
  font-size: 19px;
  line-height: 22px;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.update-centre-post .text-small {
  font-family: var(--font-body-text);
  font-size: 18px;
  line-height: 21px;
}

.update-centre-post h2.text-small {
  font-weight: 600;
}

.update-centre-post .text-small li {
  margin-bottom: var(--space-sm);
}

.small-caps {
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 600;
}

.bold {
  font-weight: 600;
}

.update-centre-post .update-post-content img {
  margin-bottom: 32px;
}

.update-centre-post .post-sign-off {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: var(--color-orange);
  display: inline-block;
}

.update-centre-post .card-waitlist {
  background-color: #202020;
  margin-top: var(--space-lg);
}

.update-centre-post .card-waitlist .section-title {
  font-family: var(--font-body);
  font-size: 65px;
  font-weight: 400;
  letter-spacing: -4px;
  line-height: 0.98;
}

.update-centre-post .subscribe-card-container {
  background-color: #202020;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin: 48px 4px 4px 4px;
  padding: 32px 16px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  height: auto;
}

.update-centre-post .subscribe-card-container .card-text-large {
  color: #fff;
  margin-bottom: 16px;
}

.update-centre-post .waitlist-email-field {
  border-radius: 20px;
  background-color: #EAEAEA;
}

.update-centre-post .waitlist-email-field input {
  border: none;
  background-color: #EAEAEA;
  border-radius: 20px 0 0 20px;
  font-family: var(--font-body);
  font-size: 24px;
  color: #000000;
  font-weight: 200;
  padding-left: 21px;
}

.update-centre-post .waitlist-email-field button {
  border: none !important;
  background-color: #F45500 !important;
  color: #fff !important;
  max-width: 200px !important;
  border-radius: 20px !important;
  transition: transform .2s !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: url(../assets/images/cursors/pointer-2.svg) 10 10, default !important;
}

.update-centre-post .waitlist-email-field img {
  width: 48px;
  height: auto;
}

.update-centre-post .waitlist-email-field button:hover {
  transform: scale(1.02);
}

.update-centre-post .waitlist-email-field button:active {
  transform: scale(0.99);
}

.update-centre-post .tweet-wall {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  justify-content: center;
  padding-bottom: 32px;
}

.update-centre-post .tweet-wall img {
  margin-bottom: 0;
  width: 100%;
  padding: 10px;
  border-radius: 14px;
}

.update-centre-post .testimonial-tweets-update {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

.update-centre-post .testimonial-tweets-update .twitter-tweet {
  flex-shrink: 1;
}

.update-centre-post .instagram-media {
  border-radius: 14px !important;
  margin: 10px !important;
  width: calc(100% - 20px) !important;
}

@media (max-width: 768px) {
  .update-centre-post .card-heading,
  .update-centre-post .card-text-small {
    font-size: 21px;
    line-height: 24px;
  }

  .update-centre-post .card-waitlist {
    -webkit-mask-box-image: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
    mask-border: url('../assets/images/squircle-mask-20px.png') 60 fill / 30px;
  }

  .update-centre-post .card-waitlist .section-title {
    font-size: 24px;
    letter-spacing: -1px;
  }

  .update-centre-post .image-row {
    flex-wrap: wrap;
  }

  .update-centre-post .card {
    -webkit-mask-box-image: url('../assets/images/squircle-mask-9px.png') 30 fill / 15px;
    mask-border: url('../assets/images/squircle-mask-9px.png') 30 fill / 15px;
  }

  .update-centre-post .col-4,
  .update-centre-post .col-6,
  .update-centre-post .col-8,
  .update-centre-post .col-9 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .update-centre-post .col-12 {
    flex-wrap: wrap;
  }

  .update-centre-post .card-text-large {
    font-size: 30px;
    line-height: 32px;
    width: 100%;
  }

  .update-centre-post .update-centre-card-content {
    margin: 12px 12px 28px 12px;
  }

  .update-centre-post .update-centre-card-content .card-heading {
    font-size: 24px;
    line-height: 0.98;
    letter-spacing: -2px;
  }

  .update-centre-post .update-centre-card-content .card-text-small {
    position: inherit;
    margin-top: 4px;
  }

  .update-centre-post .card-text-small.grey-text {
    font-family: var(--font-body-text);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-gray);
    letter-spacing: 0;
  }


  .update-centre-post .subscribe-card-container {
    margin-top: 16px;
    padding: 24px 12px 24px;
  }

  .update-centre-post .update-centre-card-image {
    margin: 12px;
  }

  .update-centre-post .update-post-header {
    padding-top: calc(48px + var(--space-md) * 2);
    margin-bottom: var(--space-md);
  }

  .update-centre-post .update-post-header .col-6 {
    margin-bottom: 16px;
  }

  .update-centre-post .update-post-header .update-centre-card-content {
    margin: 0;
  }

  .update-centre-post .lede {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0;
  }

  .update-centre-post .caption {
    font-size: 14px;
    line-height: 1.2;
  }

  .update-centre-post .text-small {
    font-size: 14px;
    line-height: 1.2;
  }

  .small-caps {
    font-size: 14px;
  }

  .update-centre-post p,
  .update-centre-post ul,
  .update-centre-post ol {
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0;
  }

  .update-centre-post h2 {
    font-size: 24px;
    line-height: 26px;
  }

  .update-centre-post p {
    margin: 0 0 var(--space-md) 0;
  }

  .update-centre-post .tweet-wall {
    flex-wrap: wrap;
  }

  .update-centre-post .tweet-wall .twitter-tweet {
    margin: 0;
    padding: 0;
  }

  .update-centre-post .instagram-media {
    margin: 0 !important;
    width: 100% !important;
  }

  .update-centre-post .tweet-wall img {
    padding: 10px 0;
  }
}

/* Subscription Confirmed */
.subscription-confirmed h1 {
  text-wrap: auto;
}

/* Home control is an anchor styled as a button; suppress the .about-content a underline */
.subscription-confirmed .subscription-confirmed-btn {
  text-decoration: none;
}

@media (max-width: 768px) {
  .subscription-confirmed h1 {
    margin-top: var(--space-lg);
  }

  .subscription-confirmed .subscription-confirmed-btn {
    margin-top: var(--space-lg);
  }
}