/* ------------------------------------------------------------------
   Sigma Geoscience — Stereogram website
   Base styles shared across all pages
   ------------------------------------------------------------------ */

:root {
  --bg-deep: #0b1418;
  --bg-mid: #142028;
  --bg-soft: #1c2e3a;
  --accent: #d99548;          /* warm sandstone */
  --accent-bright: #f0b878;
  --accent-cool: #4ea3c7;     /* glacier blue */
  --text: #e8eef3;
  --text-dim: #9fb1bd;
  --text-faint: #6c8290;
  --border: rgba(255, 255, 255, 0.08);
  --max-width: 1100px;
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.55);
  --font-display: "Montserrat", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;  /* vertical padding removed so the brand logo can fill the full nav height */
  background: rgba(11, 20, 24, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

.nav__brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
}

/* PNG logo for the nav — opaque PNG of black artwork on white bg.
   Invert flips the artwork to white; screen-blend drops the (now black)
   background against the dark nav. The sepia + hue-rotate chain warms
   the resulting white toward the sandstone brand accent. */
/* Vertical Sigma Geoscience company logo — pre-colored (gold σ wave +
   black wordmark). No filter chain needed. */
.nav__brand-logo {
  height: 64px;
  width: auto;
  display: block;
  transition: opacity 0.2s ease;
  opacity: 0.95;
}

.nav__brand:hover .nav__brand-logo {
  opacity: 1;
}

.nav__links {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  display: inline-block;
  padding: 8px 16px;
  color: var(--text-dim);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav__links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.nav__links a.active {
  color: var(--accent-bright);
}

/* Email/contact icon link in the nav */
.nav__icon-link {
  padding: 8px 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav__icon-link svg {
  width: 20px;
  height: 20px;
}

/* Prominent 'Try Now' CTA in the nav — filled pill in the accent color */
.nav__links a.nav__cta {
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 700;
  padding: 8px 18px;
  margin-left: 6px;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.nav__links a.nav__cta:hover {
  background: var(--accent-bright);
  color: var(--bg-deep);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Splash screen
   ------------------------------------------------------------------ */

.splash {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #1f3a4a 0%, #0b1418 70%);
}

.splash__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}

/* LineCreekFront photo: Beartooth Front hero backdrop. We use a real
   <img> element (not CSS background) so the browser honors EXIF
   orientation. object-fit:cover crops to fill the viewport. */
.splash__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.65) saturate(1.05) contrast(1.05);
  animation: slowZoom 24s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  from { transform: scale(1.00); }
  to   { transform: scale(1.08); }
}

.splash__vignette {
  position: absolute;
  inset: 0;
  background:
    /* sandstone wash from upper right */
    radial-gradient(ellipse 60% 50% at 75% 20%, rgba(217, 149, 72, 0.18), transparent 60%),
    /* cool blue wash from lower left */
    radial-gradient(ellipse 70% 60% at 20% 90%, rgba(78, 163, 199, 0.16), transparent 65%),
    /* deep vignette */
    radial-gradient(ellipse at center, transparent 25%, rgba(11, 20, 24, 0.78) 75%, rgba(11, 20, 24, 0.96) 100%);
  pointer-events: none;
  z-index: 1;
}

.splash__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  animation: fadeUp 1.2s ease-out;
}

.splash__company {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  opacity: 0;
  animation: fadeIn 1s ease-out 0.3s forwards;
}

.splash__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 1;
  margin: 0;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fff 0%, #d4dde3 55%, #8aa1ae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.5s forwards;
}

/* The Stereogram lockup (stereonet + sigma + wordmark) as a hero image.
   Same invert + screen trick to drop the white PNG background. Layered
   sandstone and glacier-blue drop-shadows give a chromatic, structural
   halo that "colorizes" the otherwise white silhouette. A tinted
   gradient overlay clipped to the logo via mask-image adds a soft
   warm-to-cool duotone wash. */
.splash__logo-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.5s forwards;
}

.splash__logo {
  display: block;
  width: clamp(240px, 32vw, 380px);
  height: auto;
}

/* Hovering / hero feel — soft warm ambient that lives behind the logo */
.splash__logo-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgba(217, 149, 72, 0.18) 0%,
              rgba(78, 163, 199, 0.10) 45%,
              transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
  animation: pulse 6s ease-in-out infinite;
}

.splash__tagline {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 28px 0 0;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: fadeIn 1s ease-out 1s forwards;
}

.splash__divider {
  width: 80px;
  height: 1px;
  background: var(--accent);
  margin: 36px auto 0;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.2s forwards;
}

.splash__cta {
  margin-top: 40px;
  opacity: 0;
  animation: fadeUp 1s ease-out 1.4s forwards;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-bright);
  transition: all 0.25s ease;
}

.btn:hover {
  background: var(--accent);
  color: var(--bg-deep);
  transform: translateY(-1px);
}

.btn--solid {
  background: var(--accent);
  color: var(--bg-deep);
}

.btn--solid:hover {
  background: var(--accent-bright);
  color: var(--bg-deep);
}

/* ------------------------------------------------------------------
   Content pages
   ------------------------------------------------------------------ */

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 36px 120px;
}

.page--narrow {
  max-width: 540px;
}

.page--with-corner-logo {
  position: relative;
}

/* Decorative Stereogram lockup in the upper-right of the page. The
   wrapper carries the absolute positioning + fixed width so the img and
   the product-label ("Pro" / "Go") stack cleanly beneath it. */
.page__corner-brand {
  position: absolute;
  top: 40px;
  right: 36px;
  width: 140px;
  text-align: center;
  pointer-events: none;
}

.page__corner-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  opacity: 0.92;
}

.page__corner-label {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

@media (max-width: 900px) {
  .page__corner-brand {
    position: static;
    display: block;
    width: 120px;
    margin: 0 0 24px;
  }
}


.page__eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.page__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--text);
}

.page__lede {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 720px;
  margin: 0 0 56px;
}

.section {
  margin-bottom: 64px;
}

.section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--text);
}

.section h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  color: var(--accent-bright);
}

.section p {
  color: var(--text-dim);
  margin: 0 0 16px;
  max-width: 760px;
}

.section ul {
  padding-left: 20px;
  color: var(--text-dim);
}

.section li {
  margin-bottom: 8px;
}

/* Feature cards */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.feature {
  padding: 28px 24px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.feature__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  color: var(--accent);
}

.feature h3 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 1.05rem;
}

.feature p {
  font-size: 0.95rem;
  color: var(--text-dim);
  margin: 0;
}

/* Download row */

.download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.download-group__title {
  margin: 56px 0 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.download-group__title:first-of-type {
  margin-top: 40px;
}

/* Pricing cards — Web App (subscription) + Phone App (free) */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 36px 0 8px;
}

.pricing__card {
  padding: 32px 28px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pricing__card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.pricing__card--primary {
  border-color: rgba(217, 149, 72, 0.55);
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.05), transparent 60%),
    var(--bg-mid);
}

.pricing__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 12px;
}

.pricing__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 18px;
}

.pricing__price-unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
}

.pricing__desc {
  color: var(--text-dim);
  margin: 0 0 24px;
  font-size: 0.97rem;
  flex: 1;
}

.pricing__card .btn,
.pricing__card .download-row {
  margin-top: auto;
}

/* Compact two-tier pricing callout on the Web App page */
.webapp-price-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 32px;
  padding: 24px 28px;
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.06), transparent 70%),
    var(--bg-mid);
  border: 1px solid rgba(217, 149, 72, 0.35);
  border-radius: 6px;
}

.webapp-price-callout__tier {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webapp-price-callout__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.webapp-price-callout__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
}

.webapp-price-callout__unit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
}

.webapp-price-callout__divider {
  font-size: 0.85rem;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.webapp-price-callout__cta {
  margin-left: auto;
}

@media (max-width: 640px) {
  .webapp-price-callout__cta {
    margin-left: 0;
  }
}

/* Two-column feature comparison on the Pricing page */
.pricing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.pricing-features__col {
  padding: 28px 28px 32px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pricing-features__col:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* --primary keeps a faint gold wash but no default border tint — the
   hover border comes from the base .pricing-features__col:hover rule,
   so both cards behave identically at rest. */
.pricing-features__col--primary {
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.05), transparent 60%),
    var(--bg-mid);
}

.pricing-features__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
}

.pricing-features__tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 20px;
  padding: 4px 10px;
  border: 1px solid rgba(217, 149, 72, 0.4);
  border-radius: 3px;
}

.pricing-features__col ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-dim);
}

.pricing-features__col li {
  margin-bottom: 10px;
  line-height: 1.55;
}

.pricing-features__col li strong {
  color: var(--text);
  font-weight: 600;
}

/* Single-card web-app subscription pricing with monthly + yearly + savings */
.pricing-single {
  margin-top: 28px;
  padding: 36px 32px;
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.06), transparent 70%),
    var(--bg-mid);
  border: 1px solid rgba(217, 149, 72, 0.4);
  border-radius: 8px;
}

.pricing-single__tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
}

.pricing-single__tier {
  position: relative;
  flex: 1 1 220px;
  padding: 24px 28px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
}

.pricing-single__tier--best {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.12), rgba(217, 149, 72, 0.03)),
    var(--bg-deep);
}

.pricing-single__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--accent);
  color: var(--bg-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
}

.pricing-single__divider {
  align-self: center;
  font-size: 0.85rem;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pricing-single__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 10px;
}

.pricing-single__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--text);
}

.pricing-single__unit {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.pricing-single__savings {
  margin: 28px 0 4px;
  padding: 16px 20px;
  background: rgba(78, 163, 199, 0.08);
  border-left: 3px solid var(--accent-cool);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 0.97rem;
}

.pricing-single__savings strong {
  color: var(--text);
  font-weight: 600;
}

.pricing-single__cta {
  display: block;
  margin: 24px auto 0;
  width: fit-content;
}

/* App screenshot gallery */

.shot {
  margin: 28px 0 0;
  padding: 0;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.shot:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: #0a0f13;
}

.shot figcaption {
  padding: 14px 20px 18px;
  font-size: 0.9rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.shot--wide {
  margin-top: 32px;
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.shot-grid .shot {
  margin-top: 0;
}

/* Placeholder card shown until a real demo GIF is dropped in. */
.shot--placeholder {
  background: var(--bg-mid);
}

.shot__placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.95rem;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 8px,
      transparent 8px,
      transparent 16px
    ),
    var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.shot__placeholder code {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: var(--bg-deep);
  border-radius: 3px;
  color: var(--accent-bright);
  font-size: 0.85rem;
}

/* Feature comparison table (Stereogram vs App A/B/C) */

.compare-table-wrap {
  overflow-x: auto;
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-mid);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 640px;
}

.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.compare-table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-deep);
}

.compare-table tbody th {
  font-weight: 500;
  color: var(--text);
  width: 38%;
}

.compare-table td {
  color: var(--text-dim);
  text-align: center;
  font-size: 1rem;
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table__hero {
  background: linear-gradient(180deg, rgba(217, 149, 72, 0.10), rgba(217, 149, 72, 0.04));
  color: var(--text) !important;
  font-weight: 600;
}

.compare-table thead th.compare-table__hero {
  background: rgba(217, 149, 72, 0.18);
  color: var(--accent-bright);
}

.compare-table__yes {
  color: var(--accent-bright);
  font-size: 1.15rem;
  font-weight: 700;
}

.compare-table__no {
  color: var(--text-faint);
}

.compare-table__partial {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
}

.compare-table__price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}

/* Resource list — tutorials index */

.resource-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}

.resource-list__item {
  padding: 20px 24px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 4px;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.resource-list__item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.resource-list__item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 6px;
  padding-right: 120px;  /* reserve room for the absolute-positioned "COMING SOON" tag */
  letter-spacing: 0;
  text-transform: none;
}

.resource-list__item p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.resource-list__tag {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 10px;
  border: 1px solid rgba(217, 149, 72, 0.4);
  border-radius: 3px;
}

/* Embedded user-manual viewer */

.manual-frame {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-mid);
}

.manual-frame__pdf {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}

.manual-frame__fallback {
  padding: 48px 32px;
  text-align: center;
  color: var(--text-dim);
}

.manual-frame__fallback p {
  margin-bottom: 20px;
}

/* Founder cards */

.founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.founder {
  padding: 32px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.founder__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-cool));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--bg-deep);
  margin-bottom: 20px;
}

/* Square portrait photo above each founder's bio.
   The 4:5 ratio shows full upper body without cropping aggressively. */
.founder__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 4px;
  margin: -32px -32px 24px;
  width: calc(100% + 64px);
  border-bottom: 3px solid var(--accent);
  filter: saturate(1.05) contrast(1.04);
}

.founder__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--text);
}

.founder__role {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.founder p {
  color: var(--text-dim);
  margin: 0 0 12px;
  font-size: 0.97rem;
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--border);
  padding: 28px 36px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-12px, -8px); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

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

@media (max-width: 720px) {
  .nav {
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px;
  }
  .nav__links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav__links a {
    padding: 6px 12px;
    font-size: 0.82rem;
  }
  .page {
    padding: 56px 22px 80px;
  }
}

/* ------------------------------------------------------------------
   Phone-screenshot carousel (mobile.html "See it in action")
   Coverflow-style: active phone centered at full opacity, adjacent
   phones peek in on either side dimmed. Each slide has its own frame
   so the "stack of phones" reads even when siblings are faded.
   ------------------------------------------------------------------ */

.phone-carousel {
  --phone-h: 620px;
  --phone-w: 286px;  /* 620 * (1242/2688) ≈ 286 */
  --slide-gap: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 40px auto 0;
  outline: none;
  user-select: none;
}

/* The stage is wider than one phone so adjacent slides peek in. */
.phone-carousel__stage {
  width: min(760px, 90vw);
  height: calc(var(--phone-h) + 20px);  /* room for scale-out shadow */
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
}

.phone-carousel__track {
  display: flex;
  align-items: center;
  gap: var(--slide-gap);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.phone-carousel__slide {
  flex: 0 0 var(--phone-w);
  height: var(--phone-h);
  opacity: 0.28;
  transform: scale(0.86);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;  /* only active slide accepts clicks */
}

.phone-carousel__slide--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.phone-carousel__frame {
  width: 100%;
  height: 100%;
  border: 8px solid #1f2c34;
  border-radius: 40px;
  padding: 4px;
  background: #000;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 40px rgba(217, 149, 72, 0.10);
  overflow: hidden;
  box-sizing: border-box;
}

.phone-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
}

.phone-carousel__nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-mid);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.phone-carousel__nav:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
  color: var(--accent-bright);
}

.phone-carousel__nav:active {
  transform: scale(0.94);
}

.phone-carousel__nav svg {
  width: 20px;
  height: 20px;
}

.phone-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.phone-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(159, 177, 189, 0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.phone-carousel__dot:hover {
  background: rgba(217, 149, 72, 0.6);
}

.phone-carousel__dot--active {
  background: var(--accent);
  transform: scale(1.35);
}

@media (max-width: 640px) {
  .phone-carousel {
    --phone-h: 520px;
    --phone-w: 240px;
    gap: 12px;
  }
  .phone-carousel__nav {
    width: 36px;
    height: 36px;
  }
}

/* Small "try free" note under the splash CTA */
.splash__note {
  margin-top: 18px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  opacity: 0;
  animation: fadeUp 1s ease-out 1.6s forwards;
}

/* ------------------------------------------------------------------
   "I'm interested in Stereogram" modal (contact page)
   ------------------------------------------------------------------ */

.interest-dialog {
  border: 1px solid rgba(217, 149, 72, 0.45);
  border-radius: 8px;
  background: var(--bg-mid);
  color: var(--text);
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.interest-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.interest-form {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.interest-form__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.interest-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.interest-form__close {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 1.8rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.interest-form__close:hover {
  color: var(--text);
}

.interest-form__intro {
  font-size: 0.92rem;
  color: var(--text-dim);
  margin: 0;
}

.interest-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.interest-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.interest-form__field > span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.interest-form__field input {
  padding: 10px 12px;
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.interest-form__field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-soft);
}

.interest-form__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 6px;
}

@media (max-width: 480px) {
  .interest-form__row {
    grid-template-columns: 1fr;
  }
}

/* Inline accent link — same sandstone as the Try Now nav button */
.accent-link {
  color: var(--accent) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.accent-link:hover {
  color: var(--accent-bright) !important;
  border-bottom-color: var(--accent-bright);
}

/* Resources page — two equal columns (Tutorials + Blog) with a
   centered manual-download link underneath. */
.resources-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.resources-column > h2 {
  margin-top: 0;
}

.resources-column .resource-list {
  height: 100%;
}

/* Divider line: 48px of air ABOVE the line (between columns and line)
   and 64px of air BELOW the line (between line and manual button). Both
   margins are explicit on the divider so nothing collapses them away. */
.resources-divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 48px 0 64px;
}

/* Manual button sits under the columns, left-justified with the rest of
   the page content. */
.resources-manual-link {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

@media (max-width: 780px) {
  .resources-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Clickable tier inside the Get-the-app callout (iPhone → App Store) */
.webapp-price-callout__tier-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.webapp-price-callout__tier-link:hover {
  color: inherit;
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* ------------------------------------------------------------------
   Demo-GIF grid + click-to-enlarge lightbox (webapp.html)
   ------------------------------------------------------------------ */

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 48px;  /* extra row-gap so the caption + a breathing space live above the next image */
  margin-top: 24px;
}

.demo-item {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.demo-caption {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.45;
  text-align: center;
}

.demo-cell {
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-mid);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-cell:hover,
.demo-cell:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  outline: none;
}

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

@media (max-width: 720px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 40px 40px;
}

.lightbox.is-open {
  display: flex;
  animation: fadeIn 0.15s ease-out;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

@media (max-width: 640px) {
  .lightbox { padding: 56px 16px 16px; }
  .lightbox__close { top: 12px; right: 12px; }
}