/* ============================================================
   Mella validation site - design system
   Palette + voice come straight from MELLA_PRODUCT_VISION.docx:
   tidepool, coral, citrus, sea glass, warm sand, deep navy.
   Signature motif: the "tan line" (stepped color-progress strip).
   ============================================================ */

:root {
  --navy: #0e2a3a;
  --navy-deep: #0a1f2c;
  --tidepool: #147d8f;
  --tidepool-deep: #0f6373;
  --coral: #ff6b57;
  --coral-deep: #e14e3a;
  --citrus: #ffb937;
  --citrus-deep: #f0a11f;
  --seaglass: #c9e8d9;
  --sand: #f8eedd;
  --paper: #fffdf8;
  --ink: var(--navy);
  --ink-soft: rgba(14, 42, 58, 0.72);
  --ink-faint: rgba(14, 42, 58, 0.52);
  --hairline: rgba(14, 42, 58, 0.14);
  --radius-card: 8px;
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Avenir Next", system-ui, sans-serif;
  --font-mono: "Space Mono", "SF Mono", ui-monospace, monospace;
  --maxw: 1120px;
}

* { box-sizing: border-box; }

/* author display rules beat the [hidden] UA style - restore it */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* without this, an img's height ATTRIBUTE wins over the max-width squeeze
   and the image stretches - exactly what old-cached CSS did to the photo
   gallery on 2026-08-14. Never remove. */
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0;
  margin: 0 0 0.5em;
  color: var(--navy);
}

p { margin: 0 0 1em; }

a { color: var(--tidepool-deep); }

:focus-visible {
  outline: 2px solid var(--tidepool);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- eyebrow / labels ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tidepool-deep);
  margin: 0 0 14px;
}

.band--dark .eyebrow { color: var(--citrus); }
.band--coral .eyebrow { color: var(--navy); }

/* ---------- nav ---------- */

/* Fixed nav sits over the full-bleed photo hero: transparent at the top so
   the sky shows through, sand-blur once scrolled. Without JS the solid
   background stays on at all times (progressive enhancement). */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(248, 238, 221, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.js .nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.js .nav.scrolled {
  background: rgba(248, 238, 221, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
}

/* fixed nav would cover jump targets without this */
section[id], main[id] {
  scroll-margin-top: 72px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--navy);
  text-decoration: none;
  line-height: 1;
}

.wordmark .dot { color: var(--coral); }

/* ---------- buttons + forms ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  padding: 14px 24px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--coral);
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(225, 78, 58, 0.35);
}

.btn--primary:hover { background: var(--coral-deep); color: #fff; }

.btn--dark {
  background: var(--navy);
  color: #fff;
}

.btn--dark:hover { background: var(--navy-deep); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}

.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }

.btn .lucide { width: 18px; height: 18px; }

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.68;
  pointer-events: none;
}

.signup {
  display: flex;
  gap: 10px;
  max-width: 460px;
}

.signup input[type="email"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
}

.signup input[type="email"]:focus {
  border-color: var(--tidepool);
  outline: none;
}

.form-note {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-top: 10px;
}

.form-status {
  font-size: 14px;
  margin-top: 10px;
  min-height: 20px;
}

.form-status[data-state="error"] { color: var(--coral-deep); }
.form-status[data-state="ok"] { color: var(--tidepool-deep); }

/* success panel replaces the form after signup */
.signup-success {
  background: var(--paper);
  border: 1.5px solid var(--seaglass);
  border-radius: var(--radius-card);
  padding: 22px;
  max-width: 520px;
}

.signup-success h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

.chip {
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.chip:disabled { cursor: default; }
.chip:disabled:not([aria-pressed="true"]) { opacity: 0.5; }

.reason-status {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.reason-status[data-state="ok"] { color: var(--tidepool-deep); }
.reason-status[data-state="error"] { color: var(--coral-deep); }

/* ---------- hero ---------- */

/* Full-bleed real prototype photo (photos/beach/mella-hero-beach). The frame
   was finished for exactly this slot: copy lives in the open sky upper-left,
   and the crop anchor is `right bottom` so the device/hand survive any
   viewport. Scrim is a paper tint, not a dark one - the bright beach air is
   the mood, navy ink on it is already high-contrast. */
.hero {
  position: relative;
  min-height: clamp(620px, 92vh, 940px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* <picture> is inline by default - harmless while absolutely positioned,
   but the mobile layout makes it in-flow, where an inline box would give
   the absolutely-positioned img a zero-height containing block */
.hero-media { display: block; }

.hero-media img {
  object-fit: cover;
  object-position: right bottom;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 253, 248, 0.84) 0%,
    rgba(255, 253, 248, 0.52) 38%,
    rgba(255, 253, 248, 0) 68%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 104px;   /* clear the fixed nav */
  padding-bottom: 132px; /* room for the tan-line card overlap */
}

.hero-copy {
  max-width: 600px;
}

.hero h1 {
  font-size: clamp(3rem, 7.2vw, 5.4rem);
  margin-bottom: 18px;
}

.hero h1 .hl { color: var(--coral-deep); }

.hero .sub {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 28px;
}

/* one orchestrated load moment: the photo settles in, copy rises behind it */
.js .hero-media img {
  animation: hero-settle 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes hero-settle {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

.js .hero-copy > * {
  animation: hero-rise 0.7s ease both;
}

.js .hero-copy > *:nth-child(1) { animation-delay: 0.25s; }
.js .hero-copy > *:nth-child(2) { animation-delay: 0.35s; }
.js .hero-copy > *:nth-child(3) { animation-delay: 0.45s; }
.js .hero-copy > *:nth-child(n+4) { animation-delay: 0.55s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- the tan line (signature motif) ----------
   The strip now rides in a paper card that overlaps the hero photo's
   bottom edge - brand signature doubling as the seam between the
   full-bleed photo and the page flow. */

.tanline-band {
  background: var(--sand);
}

.tanline--card {
  margin: -72px auto 0;
  position: relative;
  z-index: 5;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px rgba(14, 42, 58, 0.14);
  padding: 26px 28px 30px;
}

.tanline {
  position: relative;
}

.tanline-track {
  display: flex;
  gap: 6px;
  /* the sweep marker lives inside the track so its 100% endpoint is the
     track edge, not the card's padding box */
  position: relative;
}

.tanline-step {
  flex: 1;
  height: 54px;
  border-radius: 6px;
  position: relative;
}

.tanline-step span {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.tanline-marker {
  position: absolute;
  top: -9px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(255, 107, 87, 0.28);
  transform: translateX(-50%);
}

.tanline.in .tanline-marker {
  animation: tan-sweep 2.8s cubic-bezier(0.45, 0, 0.2, 1) 0.4s forwards;
}

@keyframes tan-sweep {
  from { left: 0; }
  to { left: 100%; }
}

.tanline-caption {
  margin-top: 34px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: center;
}

/* thin divider variant */
.tanline--divider { margin: 0; }
.tanline--divider .tanline-step { height: 14px; }
.tanline--divider .tanline-step span { display: none; }
.tanline--divider .tanline-marker,
.tanline--divider .tanline-caption { display: none; }

/* ---------- bands ---------- */

.band {
  padding: 88px 0;
}

.band--paper { background: var(--paper); }
.band--sand { background: var(--sand); }
.band--tidepool { background: var(--tidepool-deep); }
.band--navy { background: var(--navy); }
.band--coral { background: var(--coral); }

.band--dark h2, .band--dark h3 { color: #fff; }
.band--dark p { color: rgba(255, 255, 255, 0.82); }
.band--coral h2, .band--coral h3 { color: var(--navy); }
.band--coral p { color: rgba(14, 42, 58, 0.8); }

/* the softened tan ramp's deeper steps sit close to the coral band - a
   frosted trough keeps the six steps reading as a track without
   changing the (now plausible) ramp colors */
.band--coral .tanline-track {
  background: rgba(255, 253, 248, 0.3);
  padding: 5px;
  border-radius: 10px;
  gap: 4px;
}

.band--coral .tanline-step {
  height: 10px;
  border-radius: 4px;
}

.band h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin-bottom: 16px;
}

.band .lede {
  font-size: 19px;
  max-width: 56ch;
  margin-bottom: 40px;
}

/* ---------- ritual steps (real sequence, so numbering is earned) ---------- */

.ritual-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

/* editorial list variant: hairline-separated rows beside the photo */
.steps--list {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 10px;
}

.steps--list .step {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--hairline);
  padding: 22px 44px 22px 58px;
}

.steps--list .step:last-child {
  border-bottom: 1px solid var(--hairline);
}

.steps--list .step-num {
  position: absolute;
  left: 0;
  top: 26px;
  margin: 0;
}

.steps--list .step h3 {
  margin: 0 0 6px;
}

.steps--list .step .lucide {
  top: 26px;
  right: 4px;
}

.step {
  background: var(--sand);
  border-radius: var(--radius-card);
  padding: 26px 24px 24px;
  position: relative;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--coral-deep);
  letter-spacing: 0.1em;
}

.step h3 {
  font-size: 24px;
  margin: 10px 0 8px;
}

.step p { color: var(--ink-soft); margin: 0; }

.step .lucide {
  width: 26px;
  height: 26px;
  color: var(--tidepool-deep);
  position: absolute;
  top: 26px;
  right: 24px;
}

/* ---------- camera band ---------- */

.camera-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.proof-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

/* stacked horizontal rows beside the app preview */
.proof-cards--list {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 34px;
}

.proof-cards--list .proof {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 20px;
}

.proof-cards--list .proof-swatches {
  margin-bottom: 0;
  flex-shrink: 0;
  padding-top: 3px;
}

.proof {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-card);
  padding: 22px;
}

.proof-swatches {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.proof-swatches i {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.proof h3 {
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 600;
  margin: 0 0 6px;
}

.proof p { font-size: 14.5px; margin: 0; }

.proof--winner {
  background: var(--citrus);
  border-color: var(--citrus);
}

.proof--winner h3 { color: var(--navy); }
.proof--winner p { color: rgba(14, 42, 58, 0.78); }

/* ---------- app concept preview (camera band) ----------
   The brand's tan-line motif doubles as the chart's x-axis: graph above,
   six-step ramp below, week labels shared. Illustrative UI - the caption
   under the phone keeps that honest. */

.app-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
}

/* quiet halo so the phone lifts off the tidepool band */
.app-preview::before {
  content: "";
  position: absolute;
  inset: -6% -12%;
  background: radial-gradient(closest-side, rgba(201, 232, 217, 0.16), transparent 72%);
  pointer-events: none;
}

.phone {
  width: 300px;
  max-width: 100%;
  background: var(--navy-deep);
  border-radius: 48px;
  padding: 10px;
  position: relative;
  box-shadow:
    0 40px 80px rgba(10, 31, 44, 0.45),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}

/* side buttons: volume pair left, power right - the silhouette details
   that make the frame read as a real phone instead of a rounded card */
.phone::before {
  content: "";
  position: absolute;
  left: -2.5px;
  top: 124px;
  width: 3px;
  height: 54px;
  border-radius: 2px;
  background: #081a25;
  box-shadow: 0 66px 0 #081a25;
}

.phone::after {
  content: "";
  position: absolute;
  right: -2.5px;
  top: 168px;
  width: 3px;
  height: 84px;
  border-radius: 2px;
  background: #081a25;
}

.phone-screen {
  background: var(--paper);
  border-radius: 39px;
  padding: 14px 22px 12px;
  /* full iPhone proportions (~19.5:9) - a short screen reads as a toy */
  min-height: 620px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  border-radius: 999px;
  background: var(--navy-deep);
  z-index: 2;
}

.app-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 26px;
  margin-bottom: 14px;
}

.app-time {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--navy);
  letter-spacing: 0.02em;
  padding-left: 8px;
}

.app-sbicons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.app-sbicons svg {
  width: auto;
  height: 12px;
  fill: var(--navy);
  stroke: var(--navy);
  display: block;
}

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.app-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--navy);
  line-height: 1;
}

.app-wordmark .dot { color: var(--coral); }

.app-week {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--navy);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 999px;
}

/* .band--dark p would paint screen text white on the paper card - the
   .phone-screen scope keeps the app's ink colors intact (cookie crumb:
   specificity here must beat the band rule, not tie it) */
.phone-screen .app-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}

.phone-screen .app-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: var(--navy);
  margin: 0 0 6px;
}

.phone-screen .app-big .app-plus { color: var(--coral-deep); }

.phone-screen .app-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.app-graph {
  width: 100%;
  height: auto;
  /* two auto margins (here and .app-stats) split the tall screen's free
     space evenly: header top, chart middle, actions bottom */
  margin-top: auto;
}

/* soft sonar ring on the current reading - echoes the tan-line marker */
.app-now-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: now-pulse 2.4s ease-out infinite;
}

@keyframes now-pulse {
  0% { opacity: 0.55; transform: scale(0.6); }
  70% { opacity: 0; transform: scale(2.3); }
  100% { opacity: 0; transform: scale(2.3); }
}

.app-ramp {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.app-ramp .r { flex: 1; min-width: 0; }

.app-ramp .r i {
  display: block;
  height: 34px;
  border-radius: 5px;
}

.app-ramp .r--now i {
  box-shadow: 0 0 0 1.5px var(--navy);
}

.app-ramp .r span {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 6px;
}

.app-stats {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  border-top: 1px solid var(--hairline);
  margin-top: auto; /* pinned to the bottom of the tall screen */
  padding-top: 16px;
}

.app-streak {
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-streak i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--seaglass);
}

.app-streak i.on { background: var(--coral); }

.app-streak span,
.app-next {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-left: 6px;
  white-space: nowrap;
}

.app-next { margin-left: 0; }

.app-share {
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  background: var(--coral);
  border-radius: 999px;
  padding: 13px 0;
  margin-top: 16px;
}

.app-home {
  width: 110px;
  height: 4px;
  border-radius: 99px;
  background: rgba(14, 42, 58, 0.28);
  margin: 14px auto 2px;
}

.photo-cap--dark {
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* ---------- device band ---------- */

.device-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.colorways {
  display: flex;
  gap: 12px;
  margin: 22px 0 30px;
}

.colorway {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.colorway i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  /* pastel as-printed colors need a hairline to read on the sand band */
  border: 2px solid rgba(14, 42, 58, 0.16);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.colorway:hover i { transform: scale(1.08); }
.colorway[aria-pressed="true"] i { border-color: var(--navy); }

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.facts li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
}

.facts .lucide {
  width: 20px;
  height: 20px;
  color: var(--coral-deep);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ---------- real prototype photography ----------
   Placement + disclosure contract: photos/beach/README.md. Captions on
   prototype shots are claims hygiene, not decoration - keep them. */

figure.photo-card {
  margin: 0;
}

.photo-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: 0 22px 48px rgba(14, 42, 58, 0.16);
}

.photo-cap {
  margin: 12px 2px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: var(--ink-faint);
}

.device-gallery {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

/* colorway labels sit on the open sand the frame was composed to reserve.
   They anchor to .cw-frame (the image box), NOT the figure - the caption's
   height varies with viewport and would push the percentages off the sand. */
.cw-frame {
  position: relative;
}

.cw-label {
  position: absolute;
  top: 86%;
  left: var(--x);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(255, 253, 248, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(14, 42, 58, 0.1);
  white-space: nowrap;
}

.gallery-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.colorway-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: -16px 0 26px;
}

/* ---------- scope band ---------- */

.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

.scope {
  border-radius: var(--radius-card);
  padding: 28px;
}

.scope--is { background: rgba(201, 232, 217, 0.14); border: 1px solid rgba(201, 232, 217, 0.3); }
.scope--isnt { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }

.scope h3 {
  font-size: 21px;
  margin-bottom: 14px;
}

.scope ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scope li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15.5px;
}

.scope .lucide {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 4px;
}

.scope--is .lucide { color: var(--seaglass); }
.scope--isnt .lucide { color: var(--coral); }

.scope-footnote {
  margin-top: 28px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 68ch;
}

/* ---------- reserve band ---------- */

.reserve-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.price-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 34px 32px;
  color: var(--ink);
  box-shadow: 0 24px 48px rgba(14, 42, 58, 0.22);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 4px;
}

.price-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  color: var(--navy);
  line-height: 1;
}

.price-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.price-card ul {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
}

.price-card li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.price-card .lucide {
  width: 18px;
  height: 18px;
  color: var(--tidepool-deep);
  flex-shrink: 0;
  margin-top: 3px;
}

.deposit-note {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 12px;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 760px;
}

.faq details {
  border-top: 1px solid var(--hairline);
  padding: 20px 0;
}

.faq details:last-child { border-bottom: 1px solid var(--hairline); }

.faq summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  cursor: pointer;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary .lucide {
  width: 18px;
  height: 18px;
  color: var(--coral-deep);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq details[open] summary .lucide { transform: rotate(45deg); }

.faq details p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- footer ---------- */

.footer {
  background: var(--navy-deep);
  padding: 48px 0 56px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 0 0 6px;
}

.footer .wordmark { color: #fff; font-size: 22px; }

.footer a { color: rgba(255, 255, 255, 0.8); }

.footer .fine {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
  max-width: 52ch;
}

/* ---------- exit survey sheet ---------- */

.exit-sheet {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  width: min(360px, calc(100vw - 40px));
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(14, 42, 58, 0.35);
  padding: 22px;
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.exit-sheet.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.exit-sheet h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.exit-sheet p { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }

.exit-sheet .chips { display: flex; flex-wrap: wrap; gap: 8px; }

.exit-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-faint);
  padding: 6px;
}

.exit-close .lucide { width: 16px; height: 16px; }

/* ---------- reveal on scroll ----------
   Progressive enhancement: hidden state only applies when JS is
   active (html.js). Without JS the page is fully visible. */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero-media img,
  .js .hero-copy > * { animation: none; }
  .app-now-ring { animation: none; opacity: 0.4; }
  .tanline.in .tanline-marker { animation: none; left: 100%; }
}

/* ---------- toast (demo mode / misconfig notice) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(14, 42, 58, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 90;
  max-width: calc(100vw - 48px);
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .device-grid,
  .ritual-grid,
  .camera-grid,
  .reserve-grid,
  .scope-grid {
    grid-template-columns: 1fr;
  }

  .camera-grid { gap: 48px; }

  /* Keep the decorative halo inside the mobile grid gutter. Clipping the
     whole section would hide real regressions and trim the phone shadow. */
  .app-preview::before { inset-inline: 0; }

  .ritual-grid { gap: 44px; }

  .steps, .proof-cards { grid-template-columns: 1fr; }

  .band { padding: 64px 0; }

  .hero .sub { font-size: 17.5px; }
}

/* Mobile hero: same full-bleed overlay as desktop (founder call 2026-08-14 -
   the earlier split "photo above copy" read as broken). Tuned for the
   portrait crop: copy pinned to the sky at top, stronger paper scrim
   falling off downward, form controls carry their own solid fills so they
   stay legible wherever they land. The 760px breakpoint matches the
   <picture> source swap. */
@media (max-width: 760px) {
  .hero {
    min-height: max(600px, 96svh);
    align-items: flex-start;
  }

  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(255, 253, 248, 0.9) 0%,
      rgba(255, 253, 248, 0.68) 32%,
      rgba(255, 253, 248, 0.22) 60%,
      rgba(255, 253, 248, 0) 78%);
  }

  .hero-inner {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 11.5vw, 3.4rem);
  }

  .hero .sub {
    font-size: 17px;
    max-width: 38ch;
  }

  /* the full eyebrow is ~327px of mono - slightly tighter tracking keeps
     it on one line instead of breaking mid-phrase */
  .hero .eyebrow {
    letter-spacing: 0.08em;
  }

  /* the form note lands on the device body down here - it needs its own
     chip to stay legible (same treatment as the colorway labels) */
  .hero .form-note,
  .hero .form-status[data-state] {
    background: rgba(255, 253, 248, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(14, 42, 58, 0.08);
  }

  .tanline--card {
    margin-top: -64px;
  }
}

/* mono eyebrows wrap orphans on narrow screens - balance the break */
.eyebrow {
  text-wrap: balance;
}

@media (max-width: 640px) {
  .gallery-row { grid-template-columns: 1fr; }

  .tanline--card { padding: 20px 18px 24px; }

  .cw-label { font-size: 9.5px; padding: 4px 8px; }

  /* swatch trios stack above their text - side-by-side starves the column */
  .proof-cards--list .proof {
    flex-direction: column;
    gap: 12px;
  }

  .proof-cards--list .proof-swatches { padding-top: 0; }

  /* keep the sweep marker off the card's corner on tight layouts */
  .tanline-marker { width: 13px; height: 13px; top: -6px; }
  @keyframes tan-sweep {
    from { left: 0; }
    to { left: calc(100% - 6px); }
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .tanline.in .tanline-marker { left: calc(100% - 6px); }
}

@media (max-width: 520px) {
  .signup { flex-direction: column; }
  .signup .btn { justify-content: center; }
  .tanline-step { height: 40px; }
  .price-big { font-size: 52px; }
}