/* Design tokens bridge */
:root {
  /* Colors — bridged from tailwind.config.js */
  --color-warm-black: oklch(20.70% 0.0075 67.36deg);
  --color-cream: oklch(95.68% 0.0118 79.76deg);
  --color-warm-white: oklch(97.96% 0.0056 84.59deg);
  --color-terracotta: oklch(61.29% 0.1281 36.73deg);
  --color-terracotta-light: oklch(69.38% 0.1035 36.98deg);
  --color-sage: oklch(61.51% 0.0456 133.25deg);
  --color-sage-light: oklch(72.01% 0.0439 133.15deg);
  --color-muted-gold: oklch(72.41% 0.0709 88.67deg);
  --color-stone: oklch(61.10% 0.0165 70.73deg);
  --color-light-stone: oklch(80.15% 0.0147 74.36deg);

  /* Typography */
  --font-display: "Fraunces", serif;
  --font-body: "DM Sans", sans-serif;

  /* Spacing */
  --section-padding: 5rem 1.5rem;
  --section-padding-mobile: 3rem 1rem;
  --max-width: 1200px;

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* ── Animation dials (Interface Craft) ──────────────────── */

  /* Float: hero phone compound Y + scale oscillation */
  --anim-float-duration:     5s;
  --anim-float-distance:     10px;
  --anim-float-scale-peak:   1.008;
  --anim-float-phase-offset: -0.75s; /* 15% phase shift on scale */
  --anim-float-easing:       cubic-bezier(0.45, 0, 0.55, 1); /* sine approx */

  /* Spring easing approximations (no JS required) */
  --anim-spring-enter:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --anim-spring-settle: cubic-bezier(0.16, 1, 0.3, 1);       /* smooth settle */
  --anim-spring-pop:    cubic-bezier(0.175, 0.885, 0.32, 1.275); /* snappy pop */

  /* Feature screen stage timing */
  --anim-screen-stage-1: 0ms;
  --anim-screen-stage-2: 200ms;
  --anim-screen-stage-3: 450ms;

  /* Scroll reveals */
  --anim-reveal-duration:    0.55s;
  --anim-reveal-y-offset:    16px;
  --anim-reveal-scale-from:  0.95;
  --anim-reveal-stagger:     0.08s;
}
/* Base styles */
/* Additions beyond Tailwind Preflight */
html {
  scroll-behavior: smooth;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  background: var(--color-warm-black);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 100;
  transition: top var(--transition-base);
}
.skip-link:focus {
  top: 0;
}
/* Component styles */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1rem 1.5rem;
  background: oklch(97.96% 0.0056 84.59deg / 85%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid oklch(20.70% 0.0075 67.36deg / 8%);
  transition: background var(--transition-base),
    box-shadow var(--transition-base);
}
.site-nav.scrolled {
  background: oklch(97.96% 0.0056 84.59deg / 95%);
  box-shadow: 0 1px 8px oklch(20.70% 0.0075 67.36deg / 6%);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-warm-black);
  letter-spacing: -0.02em;
}
.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-stone);
  transition: color var(--transition-base);
}
.nav-links a:hover {
  color: var(--color-terracotta);
}
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 1.5rem 5rem;
  background: linear-gradient(
    180deg,
    var(--color-warm-white) 0%,
    var(--color-cream) 100%
  );
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    oklch(61.29% 0.1281 36.73deg / 6%) 0%,
    transparent 70%
  );
  pointer-events: none;
}
/* Second glow — behind the phone mockup */
.hero::after {
  content: "";
  position: absolute;
  bottom: 5%;
  right: 18%;
  width: 480px;
  height: 480px;
  background: radial-gradient(
    circle,
    rgb(196 101 74 / 5%) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.hero-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-text {
  max-width: 560px;
}
.hero-tagline {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 1.25rem;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-warm-black);
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-stone);
  margin-bottom: 2rem;
}
.hero-cta-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.phone-mockup {
  position: relative;
  width: 280px;
  height: 560px;
  margin: 0 auto;
}
.phone-frame {
  width: 100%;
  height: 100%;
  background: var(--color-warm-black);
  border-radius: 40px;
  padding: 12px;
  box-shadow:
    0 25px 50px rgb(26 23 20 / 15%),
    0 10px 20px rgb(26 23 20 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
  position: relative;
  overflow: hidden;
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  position: relative;

  /* Fallback color — back camera green */
  background: #4f5e3f;
}
/* Dynamic Island */
.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 34px;
  background: var(--color-warm-black);
  border-radius: 20px;
  z-index: 10;
}
/* Full-screen back camera — fills entire phone screen */
.screen-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    #8b9a7a 0%,
    #6b7a5a 40%,
    #4f5e3f 100%
  );
  border-radius: 30px;
}
/* PiP front camera — bottom-right corner, 16px from edges */
.camera-pip {
  position: absolute;
  bottom: 72px; /* above capture button area */
  right: 14px;
  width: 70px;
  height: 95px;
  border-radius: 12px;
  background: linear-gradient(
    160deg,
    #e8c49a 0%,
    #d4a574 60%,
    #c49464 100%
  );
  border: 2px solid rgb(255 255 255 / 60%);
  overflow: hidden;
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
}
/* Dismiss × button on PiP — top-left */
.camera-pip-dismiss {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(0 0 0 / 50%);
  color: rgb(255 255 255 / 90%);
  font-size: 9px;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Capture button — absolute at bottom of phone screen */
.capture-btn-mock {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 18px;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 40%) 0%,
    rgb(0 0 0 / 12%) 60%,
    transparent 100%
  );
  border-radius: 0 0 30px 30px;
  z-index: 5;
}
.capture-btn-mock::before {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 3px solid rgb(255 255 255 / 30%);
  box-shadow: 0 2px 12px rgb(0 0 0 / 30%);
}
.principles {
  padding: 3rem 0;
  background: var(--color-cream);
  border-top: 1px solid oklch(20.70% 0.0075 67.36deg / 6%);
  border-bottom: 1px solid oklch(20.70% 0.0075 67.36deg / 6%);
  overflow: hidden;
}
.principles-track {
  display: flex;
  gap: 3rem;
  padding: 0 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.principle-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}
.principle-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: oklch(61.29% 0.1281 36.73deg / 8%);
  flex-shrink: 0;
}
.principle-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-terracotta);
}
.principle-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-stone);
  letter-spacing: 0.02em;
}
.features-section {
  padding: var(--section-padding);
}
.feature-block {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
}
.feature-block:not(:last-child) {
  border-bottom: 1px solid rgb(26 23 20 / 6%);
}
.feature-block--reversed {
  direction: rtl;
}
.feature-block--reversed > * {
  direction: ltr;
}
.feature-icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 1.5rem;
}
.feature-icon-wrap svg {
  width: 24px;
  height: 24px;
}
.feature-icon-wrap--terracotta {
  background: rgb(196 101 74 / 10%);
  color: var(--color-terracotta);
}
.feature-icon-wrap--sage {
  background: rgb(122 139 111 / 10%);
  color: var(--color-sage);
}
.feature-icon-wrap--gold {
  background: rgb(184 164 114 / 10%);
  color: var(--color-muted-gold);
}
.feature-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 0.75rem;
}
.feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-warm-black);
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.feature-description {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-stone);
  margin-bottom: 1.5rem;
}
.feature-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feature-detail-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-stone);
}
.feature-detail-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terracotta);
  flex-shrink: 0;
  opacity: 0.6;
}
/* Feature visual — hosts mini screen mockup */
.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(
    135deg,
    var(--color-cream) 0%,
    rgb(196 101 74 / 5%) 100%
  );
  border-radius: 20px;
  border: 1px solid rgb(26 23 20 / 6%);
}
/* ─────────────────────────────────────────────────────────────
 * Feature Screen Mockups — mini phone screens (no frame)
 * Base: 160×340px, floating centered in feature-visual
 * ───────────────────────────────────────────────────────────── */
.feature-screen {
  width: 160px;
  height: 340px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: var(--color-warm-white);
  box-shadow:
    0 20px 40px rgb(26 23 20 / 12%),
    0 8px 16px rgb(26 23 20 / 8%),
    0 2px 6px rgb(26 23 20 / 5%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
  display: flex;
  flex-direction: column;
}
/* Shared navbar */
.fscreen-navbar {
  padding: 12px 14px 8px;
  border-bottom: 1px solid rgb(26 23 20 / 5%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fscreen-nav-title {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-warm-black);
  letter-spacing: -0.01em;
}
/* ── Screen 1: Dual Camera Capture ─────────────────────────── */
.feature-screen--capture {
  background: linear-gradient(
    160deg,
    #8b9a7a 0%,
    #6b7a5a 40%,
    #4f5e3f 100%
  );
}
.fscreen-pip {
  position: absolute;
  bottom: 52px;
  right: 12px;
  width: 50px;
  height: 68px;
  border-radius: 10px;
  background: linear-gradient(
    160deg,
    #e8c49a 0%,
    #d4a574 60%,
    #c49464 100%
  );
  border: 1.5px solid rgb(255 255 255 / 60%);
  overflow: hidden;
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}
.fscreen-pip-dismiss {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgb(0 0 0 / 50%);
  color: rgb(255 255 255 / 90%);
  font-size: 7px;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.fscreen-capture-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 8px 0 12px;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 40%) 0%,
    transparent 100%
  );
}
.fscreen-capture-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 2.5px solid rgb(255 255 255 / 30%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
}
/* ── Screen 2: Daily Ritual (Today View) ───────────────────── */
.feature-screen--today {
  background: var(--color-warm-white);
}
.fscreen-today-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 64px;
  gap: 8px;
  position: relative;
}
.fscreen-aperture {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(196 101 74 / 8%);
  border: 2px solid rgb(196 101 74 / 30%);
  position: relative;
  flex-shrink: 0;
}
.fscreen-aperture::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-terracotta);
  opacity: 0.35;
}
.fscreen-today-headline {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-warm-black);
  letter-spacing: -0.01em;
  margin: 0;
}
.fscreen-notification {
  position: absolute;
  bottom: 12px;
  left: 10px;
  right: 10px;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid rgb(26 23 20 / 8%);
  box-shadow: 0 6px 20px rgb(26 23 20 / 10%);
}
.fscreen-notif-app {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  display: block;
  margin-bottom: 2px;
}
.fscreen-notif-text {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  color: var(--color-warm-black);
  line-height: 1.4;
  margin: 0;
}
/* ── Screen 3: Data Export ─────────────────────────────────── */
.feature-screen--export {
  background: var(--color-warm-white);
}
.fscreen-section-header {
  padding: 6px 14px 4px;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-stone);
  background: var(--color-cream);
  flex-shrink: 0;
}
.fscreen-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgb(26 23 20 / 5%);
  flex-shrink: 0;
}
.fscreen-row-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  flex-shrink: 0;
}
.fscreen-row-icon--gold {
  background: rgb(184 164 114 / 15%);
  color: var(--color-muted-gold);
}
.fscreen-row-icon--sage {
  background: rgb(122 139 111 / 15%);
  color: var(--color-sage);
}
.fscreen-row-icon--terracotta {
  background: rgb(196 101 74 / 10%);
  color: var(--color-terracotta);
}
.fscreen-row-label {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  color: var(--color-warm-black);
  line-height: 1.3;
}
.fscreen-chevron {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-stone);
  opacity: 0.35;
}
/* ── Screen 4: Timeline ────────────────────────────────────── */
.feature-screen--timeline {
  background: var(--color-warm-white);
}
.fscreen-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  overflow: hidden;
}
/* Single-column moment card — back fills frame, front as corner PiP */
.fscreen-moment-card {
  background: linear-gradient(135deg, #8b9a7a 0%, #5a6949 100%);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  flex: 1;
}
/* Front camera PiP overlay — bottom-left corner, matches app layout */
.fscreen-moment-front {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 28px;
  height: 38px;
  border-radius: 4px;
  background: linear-gradient(135deg, #e8c49a 0%, #c49464 100%);
  border: 1px solid rgb(255 255 255 / 50%);
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
}
.fscreen-moment-date {
  position: absolute;
  bottom: 5px;
  right: 6px;
  font-family: var(--font-body);
  font-size: 0.4375rem;
  font-weight: 600;
  color: rgb(255 255 255 / 80%);
  letter-spacing: 0.02em;
}
/* ── Screen 5: Weekly Summary ──────────────────────────────── */
.feature-screen--weekly {
  background: var(--color-warm-white);
}
.fscreen-streak {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 8px;
  gap: 2px;
}
.fscreen-streak-number {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-terracotta);
  line-height: 1;
  letter-spacing: -0.03em;
}
.fscreen-streak-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  color: var(--color-stone);
  letter-spacing: 0.04em;
}
.fscreen-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 10px;
  flex-shrink: 0;
}
.fscreen-stat-tile {
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fscreen-stat-tile--sage {
  background: rgb(122 139 111 / 12%);
}
.fscreen-stat-tile--gold {
  background: rgb(184 164 114 / 12%);
}
.fscreen-stat-num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-warm-black);
}
.fscreen-stat-tile--sage .fscreen-stat-num {
  color: var(--color-sage);
}
.fscreen-stat-tile--gold .fscreen-stat-num {
  color: var(--color-muted-gold);
}
.fscreen-stat-label {
  font-family: var(--font-body);
  font-size: 0.4375rem;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fscreen-encourage {
  padding: 8px 14px 14px;
  font-family: var(--font-display);
  font-size: 0.625rem;
  color: var(--color-stone);
  font-style: italic;
  text-align: center;
  margin: 0;
  flex-shrink: 0;
}
/* Dark navbar variant — used by timelapse screen */
.fscreen-navbar--dark {
  background: #111;
  border-color: rgb(255 255 255 / 5%);
}
.fscreen-nav-title--dark {
  color: rgb(255 255 255 / 80%);
}
/* ── Screen 6: Timelapse ───────────────────────────────────── */
.feature-visual--dark {
  background: linear-gradient(135deg, var(--color-warm-black) 0%, #2d2520 100%);
  border-color: rgb(255 255 255 / 5%);
}
.feature-screen--timelapse {
  background: var(--color-warm-black);
}
.fscreen-timelapse-preview {
  flex: 1;
  position: relative;
  background: linear-gradient(160deg, #6b5a4a 0%, #3d2f24 60%, #1a1714 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fscreen-timelapse-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgb(0 0 0 / 50%) 100%
  );
}
.fscreen-timelapse-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgb(255 255 255 / 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.fscreen-timelapse-play::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent rgb(255 255 255 / 90%);
  margin-left: 2px;
}
.fscreen-timelapse-duration {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.4375rem;
  font-weight: 600;
  color: rgb(255 255 255 / 45%);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 1;
}
.fscreen-filmstrip {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 5px 6px;
  background: #111;
  overflow: hidden;
}
.fscreen-film-frame {
  flex: 1;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  min-width: 0;
  background: linear-gradient(160deg, #8b7a6a 0%, #5a4a3a 100%);
  border: 1px solid rgb(255 255 255 / 6%);
}
.fscreen-film-frame:nth-child(2) { background: linear-gradient(160deg, #7a6a5a 0%, #4a3a2a 100%); }
.fscreen-film-frame:nth-child(3) { background: linear-gradient(160deg, #9a8a7a 0%, #6a5a4a 100%); }
.fscreen-film-frame:nth-child(4) { background: linear-gradient(160deg, #6a5a4a 0%, #3a2a1a 100%); }
.fscreen-film-frame:nth-child(5) { background: linear-gradient(160deg, #857565 0%, #554535 100%); }
.fscreen-film-frame:nth-child(6) { background: linear-gradient(160deg, #9f8f7f 0%, #6f5f4f 100%); }
.fscreen-timelapse-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 10px;
  background: var(--color-warm-black);
}
.fscreen-tl-days {
  font-family: var(--font-display);
  font-size: 0.5625rem;
  font-weight: 600;
  color: rgb(255 255 255 / 75%);
}
.fscreen-tl-badge {
  font-family: var(--font-body);
  font-size: 0.4375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  background: rgb(196 101 74 / 15%);
  padding: 2px 6px;
  border-radius: 4px;
}
/* Pro badge — inline with feature-label */
.pro-badge {
  display: inline-block;
  background: var(--color-terracotta);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.5rem;
  position: relative;
  top: -1px;
}
.philosophy {
  padding: var(--section-padding);
  background: var(--color-warm-black);
  color: var(--color-warm-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.philosophy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    oklch(61.29% 0.1281 36.73deg / 8%) 0%,
    transparent 70%
  );
  pointer-events: none;
}
/* Grain texture overlay for visual depth */
.philosophy::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}
.philosophy-inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.philosophy-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 1.5rem;
}
.philosophy-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.philosophy-text {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-light-stone);
}
.philosophy-text + .philosophy-text {
  margin-top: 1rem;
}
.pricing-section {
  padding: var(--section-padding);
  background: var(--color-cream);
}
.pricing-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 3rem;
}
.pricing-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 0.75rem;
}
.pricing-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-warm-black);
  letter-spacing: -0.025em;
}
.pricing-grid {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.pricing-card {
  background: var(--color-warm-white);
  border-radius: 20px;
  padding: 2rem;
  border: 1.5px solid rgb(26 23 20 / 6%);
  position: relative;
}
.pricing-card--pro {
  border-color: var(--color-terracotta);
  border-width: 2px;
}
.pricing-card-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-terracotta);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.pricing-tier-name {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: 0.75rem;
}
.pricing-price {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-warm-black);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.pricing-price-note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-stone);
  margin-bottom: 1.75rem;
}
.pricing-price-note--strike {
  text-decoration: line-through;
  opacity: 0.5;
}
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-warm-black);
  line-height: 1.4;
}
.pricing-feature::before {
  content: "✓";
  color: var(--color-sage);
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 0.125em;
}
.pricing-divider {
  height: 1px;
  background: rgb(26 23 20 / 6%);
  margin: 1.25rem 0;
}
.pricing-early-note {
  padding: 0.875rem 1rem;
  background: rgb(196 101 74 / 6%);
  border-radius: 10px;
  border-left: 3px solid var(--color-terracotta);
  font-size: 0.8125rem;
  color: var(--color-stone);
  line-height: 1.6;
}
.pricing-early-note strong {
  color: var(--color-warm-black);
  display: block;
  margin-bottom: 0.25rem;
}
.faq-section {
  padding: var(--section-padding);
  background: var(--color-cream);
}
.faq-inner {
  max-width: 720px;
  margin: 0 auto;
}
.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}
.faq-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 1rem;
}
.faq-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-warm-black);
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid oklch(30% 0 0deg / 10%);
}
.faq-item:first-child {
  border-top: 1px solid oklch(30% 0 0deg / 10%);
}
.faq-question {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 1.25rem 2rem 1.25rem 0;
  cursor: pointer;
  color: var(--color-warm-black);
  position: relative;
  list-style: none;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::marker {
  content: "";
}
.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 1.25rem;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-terracotta);
}
.faq-item[open] .faq-question::after {
  content: "\2212";
}
.faq-answer {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-stone);
  padding: 0 0 1.25rem;
}
.cta-section {
  padding: var(--section-padding);
  text-align: center;
  background: linear-gradient(
    180deg,
    var(--color-warm-white) 0%,
    var(--color-cream) 100%
  );
}
.cta-inner {
  max-width: 600px;
  margin: 0 auto;
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-warm-black);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.cta-text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-stone);
  margin-bottom: 2rem;
}
/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--color-terracotta);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.btn-primary:hover {
  background: var(--color-terracotta-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(61.29% 0.1281 36.73deg / 30%);
}
/* Secondary / ghost button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: transparent;
  color: var(--color-warm-black);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid oklch(20.70% 0.0075 67.36deg / 15%);
  cursor: pointer;
  transition: border-color var(--transition-base),
    background var(--transition-base);
}
.btn-secondary:hover {
  border-color: oklch(20.70% 0.0075 67.36deg / 30%);
  background: oklch(20.70% 0.0075 67.36deg / 3%);
}
/* Coming Soon badge */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: oklch(61.51% 0.0456 133.25deg / 10%);
  color: var(--color-sage);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 100px;
  letter-spacing: 0.02em;
}
.coming-soon-badge svg {
  width: 16px;
  height: 16px;
}
.site-footer {
  padding: 2.5rem 1.5rem;
  border-top: 1px solid oklch(20.70% 0.0075 67.36deg / 8%);
  background: var(--color-cream);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-warm-black);
}
.footer-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.footer-links a {
  font-size: 0.8125rem;
  color: var(--color-stone);
  transition: color var(--transition-base);
}
.footer-links a:hover {
  color: var(--color-terracotta);
}
.footer-copy {
  font-size: 0.75rem;
  color: var(--color-light-stone);
}
/* Animations and responsive */
/* ─────────────────────────────────────────────────────────────
 * ANIMATION STORYBOARD — Faciem Landing Page
 *
 *   HERO PHONE (continuous loop, trigger: page load)
 *     0ms   float begins: Y-oscillation on .phone-mockup
 *           scale oscillation on .phone-frame (–15% phase offset)
 *
 *   FEATURE SCREEN (trigger: .feature-visual.reveal → .visible)
 *     0ms   screen wrapper: opacity 0→1, scale 0.92→1.0  [.feature-screen]
 *   200ms   content rows: translateY 8px→0, fade in       [.screen-content-enter]
 *   450ms   accent elements: scale 0.8→1.0, fade in       [.screen-accent-enter]
 *
 *   SCROLL REVEALS (trigger: .reveal → .visible via IntersectionObserver)
 *     0ms   element: opacity 0→1, translateY(16px)→0, scale(0.95)→1
 * ───────────────────────────────────────────────────────────── */
/* ── Scroll reveal ─────────────────────────────────────────── */
/* Elements start visible — animations only kick in once JS is ready */
.reveal {
  opacity: 1;
  transform: none;
}
.js-ready .reveal {
  opacity: 0;
  transform: translateY(var(--anim-reveal-y-offset)) scale(var(--anim-reveal-scale-from));
  transition:
    opacity var(--anim-reveal-duration) var(--anim-spring-settle),
    transform var(--anim-reveal-duration) var(--anim-spring-enter);
}
.js-ready .reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Staggered delays */
.js-ready .reveal-delay-1 { transition-delay: 0.1s; }
.js-ready .reveal-delay-2 { transition-delay: 0.2s; }
.js-ready .reveal-delay-3 { transition-delay: 0.3s; }
/* ── Feature visual reveal — container slides, children stage ── */
/* Override: keep container opaque so children can handle their own opacity */
.js-ready .feature-visual.reveal {
  opacity: 1;
  transform: translateY(var(--anim-reveal-y-offset)) scale(0.97);
}
.js-ready .feature-visual.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* ── Screen entrance Stage 1: screen wrapper ───────────────── */
.js-ready .feature-visual .feature-screen {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--anim-reveal-duration) var(--anim-spring-enter),
    transform var(--anim-reveal-duration) var(--anim-spring-enter);
  transition-delay: var(--anim-screen-stage-1);
}
.js-ready .feature-visual.visible .feature-screen {
  opacity: 1;
  transform: scale(1);
}
/* ── Screen entrance Stage 2: content rows ─────────────────── */
.js-ready .feature-visual .screen-content-enter {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--anim-reveal-duration) var(--anim-spring-settle),
    transform var(--anim-reveal-duration) var(--anim-spring-settle);
  transition-delay: var(--anim-screen-stage-2);
}
.js-ready .feature-visual.visible .screen-content-enter {
  opacity: 1;
  transform: translateY(0);
}
/* ── Screen entrance Stage 3: accent elements ──────────────── */
.js-ready .feature-visual .screen-accent-enter {
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.3s var(--anim-spring-pop),
    transform 0.3s var(--anim-spring-pop);
  transition-delay: var(--anim-screen-stage-3);
}
.js-ready .feature-visual.visible .screen-accent-enter {
  opacity: 1;
  transform: scale(1);
}
/* ── Hero phone float — two-wrapper compound animation ─────── */
/* Outer: Y translation (sine wave) */
@keyframes phoneFloatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(calc(-1 * var(--anim-float-distance))); }
}
/* Inner: scale oscillation, 15% out of phase via negative delay */
@keyframes phoneFloatScale {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(var(--anim-float-scale-peak)); }
}
.js-ready .phone-mockup {
  animation: phoneFloatY var(--anim-float-duration) var(--anim-float-easing) infinite;
}
.js-ready .phone-frame {
  animation: phoneFloatScale var(--anim-float-duration) var(--anim-float-easing) infinite;
  animation-delay: var(--anim-float-phase-offset);
}
/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal,
  .js-ready .feature-visual.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-ready .feature-visual .feature-screen,
  .js-ready .feature-visual .screen-content-enter,
  .js-ready .feature-visual .screen-accent-enter {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-ready .phone-mockup,
  .js-ready .phone-frame {
    animation: none;
  }
}
/* Tablet */
@media (width <= 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .feature-block {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .feature-block--reversed {
    direction: ltr;
  }

  .feature-icon-wrap {
    margin-left: auto;
    margin-right: auto;
  }

  .feature-detail-list {
    align-items: center;
  }

  .feature-visual {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Tablet */
@media (width <= 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}
/* Mobile */
@media (width <= 640px) {
  .hero {
    padding: 6rem 1rem 3rem;
    min-height: auto;
  }

  .hero-title {
    font-size: 2rem;
  }

  /* Principles strip — horizontal scroll on mobile */
  .principles-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 0 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .principles-track::-webkit-scrollbar {
    display: none;
  }

  .principle-item {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .features-section {
    padding: var(--section-padding-mobile);
  }

  .philosophy {
    padding: var(--section-padding-mobile);
  }

  .pricing-section {
    padding: var(--section-padding-mobile);
  }

  .cta-section {
    padding: var(--section-padding-mobile);
  }

  .phone-mockup {
    width: 220px;
    height: 440px;
  }

  .phone-frame {
    border-radius: 32px;
    padding: 10px;
  }

  .phone-screen {
    border-radius: 24px;
  }

  .phone-notch {
    width: 96px;
    height: 28px;
    top: 10px;
  }

  .camera-pip {
    bottom: 58px;
    right: 10px;
    width: 54px;
    height: 73px;
  }

  .nav-links {
    display: none;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  /* Feature screen mockups on mobile */
  .feature-screen {
    width: 140px;
    height: 296px;
  }

  .fscreen-streak-number {
    font-size: 2.75rem;
  }

}
/* Tailwind CSS */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.visible {
  visibility: visible;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.bg-warm-white {
  background-color: oklch(97.96% 0.0056 84.59deg);
}
.pb-24 {
  padding-bottom: 6rem;
}
.pt-24 {
  padding-top: 6rem;
}
.font-body {
  font-family: "DM Sans", sans-serif;
}
.font-display {
  font-family: "Fraunces", serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.font-semibold {
  font-weight: 600;
}
.leading-relaxed {
  line-height: 1.625;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-stone {
  color: oklch(61.10% 0.0165 70.73deg);
}
.text-terracotta {
  color: oklch(61.29% 0.1281 36.73deg);
}
.text-warm-black {
  color: oklch(20.70% 0.0075 67.36deg);
}
.hover\:underline:hover {
  text-decoration-line: underline;
}