/* --------------------------------------------------------------------------
   Literata — self-hosted

   Not linked from fonts.googleapis.com: that sends every visitor's IP to a
   third party, and eight of the nine locales are European. The site otherwise
   loads nothing off-origin and that is worth keeping.

   Literata rather than a sharper display serif because it is the only
   candidate that covers Cyrillic — Ukrainian headlines would otherwise fall
   back to a system serif on the largest text on the page.

   One weight, split by script. unicode-range means an English reader fetches
   21KB and never sees the Cyrillic file at all.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   MyGarage Web App - Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables / Design System
   -------------------------------------------------------------------------- */
:root {
  /* Primary Colors - Default Theme (Blue) */
  --color-primary: #8C3A2E;
  --color-primary-dark: #6E2C22;
  --color-secondary: #55584E;
  --color-accent: #8C3A2E;
  
  /* Backgrounds */
  --color-bg: #EAEBE4;
  --color-bg-secondary: #E1E2D9;
  --color-bg-tertiary: #D8DACE;
  
  /* Text */
  --color-text: #22251F;
  --color-text-secondary: #55584E;
  --color-text-tertiary: #7C8074;
  
  /* Borders & Surfaces */
  --color-border: #C9CBBF;
  --color-surface: #F5F5F0;
  --color-surface-elevated: #F5F5F0;
  
  /* Status Colors */
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
  --gradient-hero: linear-gradient(180deg, #EAEBE4 0%, #EFEFE9 100%);
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  
  /* Typography */
  --font-serif: 'Literata', ui-serif, Georgia, 'Times New Roman', serif;
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* Z-Index */
  /* Height of the Android app banner; the nav and body offset by it. */
  --app-banner-height: 56px;

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-primary: #CC7059;
  --color-primary-dark: #E08A73;
  --color-secondary: #A6A99A;
  --color-accent: #CC7059;
  
  --color-bg: #191B16;
  --color-bg-secondary: #1F211A;
  --color-bg-tertiary: #24271F;
  
  --color-text: #E9EAE1;
  --color-text-secondary: #A6A99A;
  --color-text-tertiary: #7F8373;
  
  --color-border: #363A2E;
  --color-surface: #24271F;
  --color-surface-elevated: #24271F;
  
  --gradient-hero: linear-gradient(180deg, #191B16 0%, #1F211A 100%);
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
}

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

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

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

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Android app banner

   Hidden unless the inline script in _layout.html adds .show-app-banner to
   <html>, which it does before first paint on Android only. iOS never uses
   this — Safari draws its own Smart App Banner above the page.
   -------------------------------------------------------------------------- */
.app-banner {
  display: none;
}

html.show-app-banner .app-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-banner-height);
  box-sizing: border-box;
  padding: 0 var(--spacing-md);
  background: var(--color-surface-elevated);
  border-bottom: 1px solid var(--color-border);
  /* Above the nav, which is also fixed to the top. */
  z-index: calc(var(--z-sticky) + 1);
}

/* The banner occupies the top strip, so everything fixed or flowing below it
   shifts down by exactly its height. Set before paint, so this costs no CLS. */
html.show-app-banner .nav {
  top: var(--app-banner-height);
}

html.show-app-banner body {
  padding-top: var(--app-banner-height);
}

.app-banner-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.app-banner-close svg {
  width: 16px;
  height: 16px;
}

.app-banner-icon {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}

.app-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.app-banner-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.app-banner-sub {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  /* One line only — the banner must never grow tall enough to read as an
     interstitial, which Google demotes on mobile. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-banner-cta {
  flex: none;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

/* Screen-reader-only label, used for the banner's dismiss button. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-base);
}

[data-theme="dark"] .nav {
  background: rgba(0, 0, 0, 0.8);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--color-text);
}

.nav-logo svg {
  width: 32px;
  height: 32px;
}

/* The App Store name in full. The descriptor is set lighter so the wordmark
   still reads as the wordmark, and it drops on narrow screens rather than
   pushing the nav links off the bar. */
.nav-logo-suffix {
  margin-left: 0.4em;
  font-weight: 400;
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .nav-logo-suffix {
    display: none;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.nav-link {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--color-bg-tertiary);
  transform: scale(1.05);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  color: var(--color-text);
}

.theme-toggle .sun-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

/* Language Selector */
.lang-selector {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lang-btn:hover {
  background: var(--color-bg-tertiary);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  right: 0;
  min-width: 160px;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
}

.lang-selector.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  text-decoration: none;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lang-option:first-child {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.lang-option:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.lang-option:hover {
  background: var(--color-bg-secondary);
}

.lang-option.active {
  color: var(--color-primary);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 64px;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(0, 122, 255, 0.1) 0%, transparent 50%),
              radial-gradient(ellipse at 30% 70%, rgba(88, 86, 214, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.hero-badge svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.hero-title {
  font-size: var(--font-size-5xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-tagline {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
  max-width: 500px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--radius-xl);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: white;
}

.btn-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
}

.btn svg {
  width: 20px;
  height: 20px;
}

/* Hero Illustration */
.hero-illustration {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Real device screenshot — the image already carries the phone bezel, so no
   CSS frame around it (that would read as a double border). */
.hero-device {
  width: 300px;
  height: auto;
  display: block;
  /* The image is the device on transparency, so the shadow has to follow its
     alpha. box-shadow would draw a rectangle around a phone-shaped cutout, and
     border-radius has nothing left to round. */
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.18));
}

[data-theme="dark"] .hero-device {
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
}

.phone-mockup {
  width: 280px;
  height: 560px;
  background: var(--color-surface-elevated);
  border-radius: 40px;
  box-shadow: var(--shadow-xl);
  border: 8px solid var(--color-text);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .phone-mockup {
  border-color: #3A3A3C;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
}

.phone-screen svg {
  width: 80px;
  height: 80px;
  color: white;
  margin-bottom: var(--spacing-md);
}

.phone-app-name {
  color: white;
  font-size: var(--font-size-xl);
  font-weight: 700;
}

/* Floating Elements */
.floating-card {
  position: absolute;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  animation: float 6s ease-in-out infinite;
}

.floating-card svg {
  width: 24px;
  height: 24px;
}

.floating-card-1 {
  top: 5%;
  right: -10%;
  animation-delay: 0s;
}

.floating-card-2 {
  bottom: 20%;
  left: 0;
  animation-delay: -2s;
}

.floating-card-3 {
  top: 40%;
  right: -10%;
  animation-delay: -4s;
}

.floating-card-4 {
  bottom: 3%;
  right: 0;
  animation-delay: -1s;
}

.floating-card-5 {
  top: 15%;
  left: -5%;
  animation-delay: -3s;
}

.floating-card-6 {
  bottom: 45%;
  left: 0;
  animation-delay: -5s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* --------------------------------------------------------------------------
   Features Section
   -------------------------------------------------------------------------- */
.features {
  padding: var(--spacing-3xl) 0;
  background: var(--color-bg);
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--spacing-3xl);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-lg);
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon svg {
  width: 32px;
  height: 32px;
  color: white;
}

.feature-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.feature-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Privacy Section
   -------------------------------------------------------------------------- */
.privacy-section {
  padding: var(--spacing-3xl) 0;
  background: var(--color-bg-secondary);
}

.privacy-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

.privacy-illustration {
  display: flex;
  justify-content: center;
}

.shield-icon {
  width: 200px;
  height: 200px;
  color: var(--color-primary);
}

.privacy-text h2 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text);
}

.privacy-text p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.privacy-features {
  list-style: none;
}

.privacy-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.privacy-features li svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.footer-logo svg {
  width: 32px;
  height: 32px;
}

.footer-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.footer-section h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--spacing-sm);
}

.footer-links a {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-primary);
}

.store-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  padding: var(--spacing-xl) 0;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  height: 48px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.store-badge:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.store-badge img {
  height: 48px;
  width: auto;
  max-width: none;
  display: block;
}

/*
 * Google's badge PNG is 646x250 with the artwork occupying only 564x168 —
 * roughly 33% of its height and 13% of its width is transparent padding.
 * Apple's asset (120x40) has none. Rendering both at the same CSS height
 * therefore draws the Play badge two-thirds the size.
 *
 * Scale it by 250/168 so the *artwork* matches Apple's 48px, then pull the
 * transparent margin back in so it still occupies a 48px-tall box and the
 * gap between the two badges stays even.
 */
.store-badge-play img {
  height: 71.43px;         /* 48 * (250 / 168) */
  margin: -11.72px;        /* (71.43 - 48) / 2 */
}

/*
 * Product Hunt ships the badge as two assets rather than one that adapts, so
 * both are in the markup and CSS picks the one that matches the theme. The
 * selectors are qualified with .store-badge img because the shared badge rule
 * sets display: block and would otherwise out-specify a bare class. Light is
 * the default because app.js stamps data-theme after first paint — the wrong
 * choice would flash on every load in the more common case.
 */
.store-badge img.ph-badge-dark {
  display: none;
}

[data-theme="dark"] .store-badge img.ph-badge-light {
  display: none;
}

[data-theme="dark"] .store-badge img.ph-badge-dark {
  display: block;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

.footer-copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* --------------------------------------------------------------------------
   Page Styles (Privacy & Terms)
   -------------------------------------------------------------------------- */
.page {
  padding-top: 100px;
  padding-bottom: var(--spacing-3xl);
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.page-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.page-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.page-content {
  max-width: 800px;
  margin: 0 auto;
}

.page-content h2 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.page-content h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.page-content p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--spacing-md);
}

.page-content ul {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-xl);
}

.page-content li {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--spacing-sm);
}

.page-content strong {
  color: var(--color-text);
  font-weight: 600;
}

.last-updated {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

/* Fade In Up */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* Scale In */
.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide In */
.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Responsive Design
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-tagline {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-illustration {
    margin-top: var(--spacing-2xl);
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .privacy-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .privacy-illustration {
    order: -1;
    margin-bottom: var(--spacing-xl);
  }
  
  .shield-icon {
    width: 150px;
    height: 150px;
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
    text-align: center;
    margin-bottom: var(--spacing-xl);
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --font-size-5xl: 2.5rem;
    --font-size-4xl: 2rem;
    --font-size-3xl: 1.5rem;
  }
  
  .nav-links {
    display: none;
  }
  
  .hero {
    padding-top: 80px;
  }
  
  .hero-title {
    font-size: var(--font-size-4xl);
  }
  
  .phone-mockup {
    width: 220px;
    height: 440px;
  }
  
  .floating-card {
    display: none;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer-section {
    margin-bottom: var(--spacing-xl);
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }
  
  .hero-actions {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Screenshot Gallery
   ========================================================================== */

.screens {
  padding: var(--spacing-3xl) 0;
  background: var(--color-bg-secondary);
}

.screens-scroller {
  display: flex;
  gap: var(--spacing-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
  margin: 0 calc(var(--spacing-md) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.screens-scroller:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.screens-figure {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: center;
}

.screens-figure img {
  display: block;
  width: 240px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-tertiary);
}

@media (max-width: 640px) {
  .screens-figure img {
    width: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screens-scroller {
    scroll-snap-type: none;
  }
}

/* ==========================================================================
   FAQ (what-is-mygarage)
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0 var(--spacing-xl);
}

.faq-item {
  padding: var(--spacing-lg);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.page-content .faq-q {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-lg);
}

.page-content .faq-a {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Releases
   ========================================================================== */

.releases {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.release {
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.release:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.release-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.release-version {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  background: var(--color-bg-secondary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.page-content .release-title {
  margin: 0;
  font-size: var(--font-size-xl);
}

.release-date {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-left: auto;
}

.page-content .release-bullets {
  margin: 0;
}


/* --------------------------------------------------------------------------
   Logbook typography

   Display type is the serif; everything operational — nav, buttons, labels,
   captions — stays in the system sans. Mixing them is the whole point: the
   page reads like a record book, the controls read like software.
   -------------------------------------------------------------------------- */
.hero-title,
.section-title,
.page-title,
.statement-title,
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.hero-title { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
.section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.page-title { font-size: clamp(2rem, 4.4vw, 3.2rem); }

/* Uppercase mono labels are the ledger's own voice — used for eyebrows,
   entry numbers and field stamps. */
.eyebrow {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ==========================================================================
   Logbook home page

   Ported from the concept prototype onto the site's own tokens, so the guides
   and legal pages inherit the same palette instead of needing a parallel one.
   ========================================================================== */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* The opening must land inside one screen — a call to action that needs a
   scroll to reach is not doing its job. svh, so mobile browser chrome cannot
   push the buttons under the fold. */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(1.25rem, 4vh, 3rem) 0;
  background: var(--gradient-hero);
}
.hero .container { width: 100%; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.85rem, 2vh, 1.4rem); }
.hero-sub { font-size: 1.0625rem; color: var(--color-text-secondary); max-width: 46ch; }
.hero-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }

/* --- device ---------------------------------------------------------------- */
.device {
  width: min(100%, 300px);
  max-height: 74svh;
  aspect-ratio: 1206 / 2622;
  background: #1C1C1A;
  border-radius: 12.5% / 5.8%;
  padding: 2.6%;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.45);
  justify-self: end;
  margin: 0;
}
[data-theme="dark"] .device { background: #000; }
@media (max-width: 900px) { .device { justify-self: center; } }
.device .screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 10.5% / 4.6%;
  overflow: hidden;
  background: #FFF;
  /* Safari-only: without this it will not clip the absolutely-positioned
     screenshot to these rounded corners, and the image's square corners
     render over the bezel. Firefox and Chrome clip correctly either way. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}
.device .screen img,
.device .screen video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
#stage img { opacity: 0; transition: opacity 0.55s ease; }
#stage img.on { opacity: 1; }

/* --- benefits -------------------------------------------------------------- */
.benefits { width: 100%; max-width: 40rem; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--color-border); }
@media (min-width: 1100px) { .benefits { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.benefit {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.15rem 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px dotted var(--color-border);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.benefits.in .benefit { opacity: 1; transform: none; }
.benefits.in .benefit:nth-child(1) { transition-delay: 0.05s; }
.benefits.in .benefit:nth-child(2) { transition-delay: 0.14s; }
.benefits.in .benefit:nth-child(3) { transition-delay: 0.23s; }
.benefits.in .benefit:nth-child(4) { transition-delay: 0.32s; }
.benefit-key { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--color-primary); padding-top: 0.28rem; }
.benefit dt { font-weight: 600; font-size: 0.9375rem; }
.benefit dd { grid-column: 2; font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.45; }

/* --- ledger ---------------------------------------------------------------- */
.statement { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: clamp(3.5rem, 9vw, 7rem) 0; }
.ledger { width: 100%; max-width: 30rem; border-top: 1px solid var(--color-border); }
.ledger-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px dotted var(--color-border);
  font-size: 0.875rem; color: var(--color-text-secondary);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ledger.in .ledger-row { opacity: 1; transform: none; }
.ledger.in .ledger-row:nth-child(1) { transition-delay: 0.05s; }
.ledger.in .ledger-row:nth-child(2) { transition-delay: 0.15s; }
.ledger.in .ledger-row:nth-child(3) { transition-delay: 0.25s; }
.ledger.in .ledger-row:nth-child(4) { transition-delay: 0.35s; }
.ledger-row b { font-weight: 500; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--color-text); font-size: 0.8125rem; }

/* --- recognition ----------------------------------------------------------- */
.recognise { padding: clamp(3.5rem, 9vw, 7rem) 0; border-top: 1px solid var(--color-border); }
.recognise-head { display: flex; flex-direction: column; gap: 1rem; max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.recognise-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 860px) { .recognise-grid { grid-template-columns: 1fr; } .recognise-stage { justify-self: center; } }
.recognise-stage { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.recognise-stage .device { width: min(100%, 290px); justify-self: center; }
.recognise-stage .screen { background: #000; }
.stage-meta { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 0.5rem; }
.stage-meta button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--color-primary); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step {
  padding: 1.1rem 0; border-top: 1px solid var(--color-border);
  display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: start;
  gap: 0 1rem; position: relative; cursor: pointer;
}
.step:last-child { border-bottom: 1px solid var(--color-border); }
.step > *:not(.step-bar) { transition: opacity 0.4s ease; }
.step:not(.on) > *:not(.step-bar) { opacity: 0.34; }
.step-no { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--color-primary); padding-top: 0.35rem; }
.step h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.15rem; }
.step p { color: var(--color-text-secondary); font-size: 0.9375rem; }
.step-bar { position: absolute; left: 0; top: -1px; height: 1px; background: var(--color-primary); width: 0; }
.step-thumb {
  width: 74px; aspect-ratio: 1170 / 2532; object-fit: cover; object-position: top center;
  border-radius: 7px; border: 1px solid var(--color-border); background: var(--color-surface);
  transform: scale(0.94); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
  height: auto;
}
.step.on .step-thumb { transform: scale(1); box-shadow: 0 12px 24px -12px rgba(0,0,0,0.4); }
@media (max-width: 560px) { .step-thumb { display: none; } }
.fields { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.field {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6875rem;
  padding: 0.2rem 0.5rem; border: 1px solid var(--color-border); border-radius: 3px;
  color: var(--color-text-secondary); background: var(--color-surface);
  opacity: 0; transform: translateY(4px);
}
.step.on .field { animation: stamp 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes stamp { to { opacity: 1; transform: none; } }

/* --- the record ------------------------------------------------------------ */
.record { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); }
.record-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; max-width: 60ch; }
.record-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.record-stage { position: sticky; top: calc(64px + 2.5rem); align-self: start; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.record-stage .device { justify-self: center; }
.stage-caption { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); text-align: center; min-height: 1.4em; }
.entries { display: flex; flex-direction: column; }
.entry { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--color-bg-tertiary); }
.entry:last-child { border-bottom: 0; }
.entry > * { transition: opacity 0.45s ease; }
.entry:not(.on) > * { opacity: 0.32; }
.entry-no { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--color-primary); display: flex; align-items: center; gap: 0.7rem; }
.entry-no::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.entry h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.entry p { color: var(--color-text-secondary); max-width: 46ch; }
@media (max-width: 860px) {
  .record-grid { grid-template-columns: 1fr; }
  .record-stage { top: 64px; padding: 1rem 0; background: var(--color-bg-secondary); z-index: 5; }
  .record-stage .device { width: min(46vw, 200px); }
  .entry { min-height: 62vh; }
}

/* --- intervals & closing --------------------------------------------------- */
.intervals { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.intervals-head { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.5rem; max-width: 60ch; }
.interval-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.interval { background: var(--color-bg); padding: 1.4rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.interval dt { font-size: 0.8125rem; font-weight: 600; }
.interval dd { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 1.35rem; color: var(--color-text); margin: 0; }
.interval small { font-size: 0.75rem; color: var(--color-text-tertiary); }

.closing { background: var(--color-text); color: var(--color-bg); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.closing-in { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; max-width: 60ch; }
.closing .section-title { color: var(--color-bg); }
.closing .hero-sub { color: var(--color-bg); opacity: 0.72; }
.closing .eyebrow { color: var(--color-primary); filter: brightness(1.5); }
.closing .btn-primary { background: var(--color-bg); color: var(--color-text); }
.closing .btn-secondary { color: var(--color-bg); border-color: rgba(255,255,255,0.25); background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .benefit, .ledger-row { opacity: 1 !important; transform: none !important; transition: none !important; }
  .entry > *, .step > * { transition: none !important; }
  .entry:not(.on) > *, .step:not(.on) > *:not(.step-bar) { opacity: 0.6; }
  .field { opacity: 1 !important; transform: none !important; animation: none !important; }
  #stage img { transition: none; }
}


/* The step stills were small enough to read as decoration rather than evidence. */
.step-thumb { width: 92px; }


/* The long-form guides want a 1200px measure; the home page is a layout, not
   prose, and at 1200px it left large empty margins on a wide display. */
@media (min-width: 1300px) {
  [data-page="home"] .container { max-width: 1400px; }
}


/* ==========================================================================
   "How MyGarage talks to iOS" — four system features, each with prose beside
   an iPhone frame (the home page's .device). Prose and frame alternate sides;
   below 820px they stack, prose first.
   ========================================================================== */
.tech .page-header .eyebrow { display: block; margin-bottom: var(--spacing-sm); }
.tech .tech-lede { max-width: 42rem; font-size: var(--font-size-lg); color: var(--color-text); margin: 0 auto var(--spacing-2xl); text-wrap: pretty; }
.tech-section {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem 3.5rem; align-items: start;
  max-width: 1040px; margin: 2.5rem auto 0; padding-top: 2.5rem; border-top: 1px solid var(--color-border);
}
.tech-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.tech-section.flip { grid-template-columns: 300px minmax(0, 1fr); }
.tech-section.flip .tech-prose { order: 2; }
.tech-prose { max-width: 42rem; }
.tech-prose h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0.35rem 0 0.35rem; text-wrap: balance; }
.tech-prose h3 { font-size: var(--font-size-base); font-weight: 600; margin: 1.6rem 0 0.4rem; color: var(--color-text); }
.tech-prose p { margin: 0 0 1rem; text-wrap: pretty; }
.tech-prose ol, .tech-prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.tech-prose li { margin: 0.35rem 0; }
.tech-kicker { color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.tech-note { border-left: 2px solid var(--color-primary); padding: 0.1rem 0 0.1rem 1rem; color: var(--color-text-secondary); margin: 1.25rem 0; }
.tech-req { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.tech-stage { display: grid; gap: 0.75rem; justify-items: center; }
.tech .device { position: sticky; top: 5rem; justify-self: center; }
.tech .device figcaption, .tech-cap { font-size: 0.8125rem; color: var(--color-text-tertiary); margin-top: 0.75rem; text-align: center; line-height: 1.45; }
.tech-toggle { font: 500 0.8125rem/1 var(--font-family); color: var(--color-primary); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 0.45rem 0.9rem; cursor: pointer; }
.tech-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tech-end { max-width: 1040px; margin: 3.5rem auto 0; padding-top: 2rem; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); }
.tech-end h3 { margin: 0 0 0.5rem; font-size: var(--font-size-base); color: var(--color-text); }
.tech-table { border-collapse: collapse; width: 100%; max-width: 42rem; font-size: var(--font-size-sm); }
.tech-table th, .tech-table td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tech-table th { font-weight: 600; color: var(--color-text-secondary); width: 42%; }
@media (max-width: 820px) {
  .tech-section, .tech-section.flip { grid-template-columns: minmax(0, 1fr); }
  .tech-section.flip .tech-prose { order: 0; }
  .tech .device { position: static; }
}