/* ============================================================
   Constantin — landing page styles
   Dark, athletic, mobile-first. No frameworks.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — near-black charcoal base */
  --bg:            #0a0c0e;
  --bg-2:          #101317;
  --surface:       #161a1f;
  --surface-2:     #1c2127;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text:          #f4f6f8;
  --text-muted:    #aeb6bf;
  --text-faint:    #79828c;

  /* Trend accents — echo the watch face */
  --green:         #3ddc6e;
  --green-deep:    #27b257;
  --red:           #ff4d4d;
  --red-deep:      #e23535;
  --yellow:        #ffd23f;

  /* Type */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --wave-divider-h: 56px;

  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-green: 0 0 0 1px rgba(61, 220, 110, 0.25), 0 18px 50px -18px rgba(61, 220, 110, 0.35);

  --maxw: 1180px;
  --transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  /* clip (not hidden) prevents horizontal overflow without creating a scroll
     container — keeps the story section's position:sticky background working. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin: 0;
  text-transform: uppercase;
}

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--green);
  color: #04140a;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--space-24);
  position: relative;
}
.section:not(.story) {
  padding-bottom: calc(var(--space-24) + var(--space-8));
}

@media (min-width: 768px) {
  .section { padding-block: var(--space-32); }
  .section:not(.story) {
    padding-bottom: calc(var(--space-32) + var(--space-8));
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  color: #04140a;
  box-shadow: var(--shadow-green);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(61, 220, 110, 0.4), 0 22px 50px -16px rgba(61, 220, 110, 0.55);
}
.btn--primary:active { transform: translateY(0); }

.btn--sm  { padding: 0.6rem 1.1rem; font-size: 0.95rem; }
.btn--lg  { padding: 1rem 2rem;     font-size: 1.2rem; }

/* ---------- Eyebrows / labels ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.9rem;
  color: var(--text-faint);
  margin: 0 0 var(--space-4);
}
.eyebrow--green { color: var(--green); }
.eyebrow--red   { color: var(--red); }

/* ---------- Section titles ---------- */
.section__title {
  font-size: clamp(2rem, 6vw, 3.1rem);
  margin-bottom: var(--space-6);
}
.section__title--center {
  text-align: center;
  margin-inline: auto;
  max-width: 16ch;
  margin-bottom: var(--space-16);
}
.section__lead {
  color: var(--text-muted);
  font-size: 1.08rem;
  max-width: 60ch;
  margin: 0;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 12, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  gap: var(--space-4);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--text);
}
.nav__mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
}
.nav__mark svg { width: 100%; height: 100%; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-20);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: -2;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,12,14,0.55) 0%, rgba(10,12,14,0.35) 35%, rgba(10,12,14,0.9) 100%),
    linear-gradient(90deg, rgba(10,12,14,0.85) 0%, rgba(10,12,14,0.25) 70%, rgba(10,12,14,0) 100%);
}
.hero__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
.hero__copy { max-width: 36rem; }
.hero__title {
  font-size: clamp(2.8rem, 13vw, 6.6rem);
  font-weight: 800;
  margin-bottom: var(--space-6);
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.hero__title span {
  display: inline-block;
  white-space: nowrap;
}
.hero__subhead {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--text);
  opacity: 0.95;
  margin: 0 0 var(--space-8);
  max-width: 46ch;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}

/* Hero device render */
.hero__device {
  display: flex;
  justify-content: center;
}
.hero-watch {
  width: min(78vw, 420px);
  margin: 0;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.6));
}
.hero-watch img {
  width: 100%;
  object-fit: contain;
}

/* ---------- Watch device frame ---------- */
.device {
  --d-size: min(78vw, 340px);
  width: var(--d-size);
  height: var(--d-size);
  border-radius: 50%;
  padding: 14px;
  background:
    radial-gradient(circle at 30% 25%, #2a2f36 0%, #14171b 55%, #050607 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.08),
    inset 0 -6px 18px rgba(0,0,0,0.8),
    var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.06);
}
.device img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 880px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
  }
  .hero__copy { max-width: 38rem; }
  .hero__title {
    font-size: clamp(3.7rem, 6.6vw, 5.6rem);
    white-space: nowrap;
  }
  .hero-watch { width: min(36vw, 460px); }
  .device { --d-size: min(40vw, 420px); }
}

/* ============================================================
   SPLIT sections (problem / one-screen)
   ============================================================ */
.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.problem__media {
  position: relative;
  padding-bottom: clamp(4rem, 12vw, 7.5rem);
}
.problem__photo {
  position: relative;
  z-index: 1;
}
.split__media .problem__watch {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: clamp(8.5rem, 24vw, 13rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 12px solid #252a30;
  background: #252a30;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  object-fit: cover;
}

@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split--reverse .split__body { order: 2; }
  .split--reverse .split__media { order: 1; }
}

.problem {
  background:
    radial-gradient(1200px 500px at 85% 0%, rgba(255,77,77,0.10), transparent 60%),
    var(--bg);
}
.one-screen {
  background:
    radial-gradient(1200px 500px at 15% 0%, rgba(61,220,110,0.10), transparent 60%),
    var(--bg-2);
}

/* ============================================================
   REFERENCE accordion (algorithm / FAQ / changelog / known issues)
   ============================================================ */
.reference {
  background:
    radial-gradient(1000px 420px at 75% 0%, rgba(61,220,110,0.08), transparent 60%),
    radial-gradient(900px 420px at 20% 100%, rgba(255,77,77,0.08), transparent 60%),
    var(--bg);
}
.reference__head {
  max-width: 62ch;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.reference__head .section__title { margin-bottom: var(--space-4); }
.reference__head .section__lead { margin-inline: auto; }

.accordion {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.accordion__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.accordion__item[open] { border-color: var(--border-strong); }

.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  transition: color var(--transition);
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head:hover { color: var(--green); }
.accordion__chevron {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--text-muted);
  transition: transform var(--transition), color var(--transition);
}
.accordion__item[open] > .accordion__head .accordion__chevron {
  transform: rotate(180deg);
  color: var(--green);
}

.accordion__panel {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--text-muted);
}
.accordion__panel > :first-child { margin-top: 0; }
.accordion__panel p { margin: 0 0 var(--space-4); line-height: 1.7; }
.accordion__panel p:last-child { margin-bottom: 0; }
.accordion__panel a {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}
.accordion__panel a:hover { text-decoration: underline; }
.accordion__panel strong { color: var(--text); font-weight: 600; }

/* "For the nerds" spec list (algorithm panel) */
.spec-lead { margin-bottom: var(--space-2) !important; }
.spec-list {
  margin: 0 0 var(--space-4);
  padding-left: 1.2em;
}
.spec-list li { margin-bottom: var(--space-2); line-height: 1.6; }
.spec-list li:last-child { margin-bottom: 0; }

/* FAQ pairs */
.faq__q {
  color: var(--text);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-1) !important;
}
.faq__q:first-child { margin-top: 0 !important; }
.faq__a { line-height: 1.7; }

/* Changelog */
.changelog__version {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green);
  font-size: 1.05rem;
  margin: var(--space-6) 0 var(--space-3);
}
.changelog__version:first-child { margin-top: 0; }
.changelog ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.2em;
}
.changelog li { margin-bottom: var(--space-2); line-height: 1.6; }
.changelog li:last-child { margin-bottom: 0; }

/* ============================================================
   ONE SCREEN — annotations
   ============================================================ */
.annotated {
  margin: 0;
  display: flex;
  justify-content: center;
}
.watch-switcher {
  width: 100%;
}
.watch-switcher__frame {
  position: relative;
  width: min(78vw, 420px);
  margin-inline: auto;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.52));
}
.split__media .watch-switcher__image {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.watch-switcher__button {
  position: absolute;
  top: 30%;
  right: 1%;
  width: clamp(3rem, 10vw, 4rem);
  height: clamp(3rem, 10vw, 4rem);
  padding: 0;
  transform: translate(22%, -50%) rotate(18deg);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--green);
  -webkit-tap-highlight-color: transparent;
}
.watch-switcher__button::before,
.watch-switcher__button::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.65;
  box-shadow: 0 0 18px rgba(61, 220, 110, 0.38);
  animation: watch-button-pulse 1800ms ease-out infinite;
}
.watch-switcher__button::after {
  animation-delay: 900ms;
}
.watch-switcher__button:hover,
.watch-switcher__button:focus-visible {
  color: var(--text);
}
@keyframes watch-button-pulse {
  0% {
    transform: scale(0.72);
    opacity: 0.72;
  }
  75% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
/* Annotated watch is shown clean — no device frame, border, or shadow.
   The img override beats the .split__media img framing used by section photos. */
.device--annotated {
  --d-size: min(80vw, 380px);
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.device--annotated img {
  border: none;
  box-shadow: none;
  border-radius: 50%;
}

/* Color-coded legend beneath the device (all breakpoints) */
.annotated__list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  width: 100%;
  max-width: 380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.annotated__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.92rem;
}
.swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex: none;
}
.swatch--green  { background: var(--green); }
.swatch--red    { background: var(--red); }
.swatch--white  { background: #ffffff; }
.swatch--yellow { background: var(--yellow); }

/* Desktop: enlarge the device and present the legend, centered, beneath it.
   (Floating side-labels were dropped — they clipped against the column edge.) */
@media (min-width: 920px) {
  .watch-switcher__frame { width: min(34vw, 430px); }
  .device--annotated { --d-size: min(34vw, 360px); }
  .annotated__list {
    margin-inline: auto;
    max-width: 420px;
  }
}

/* ============================================================
   FEATURES grid
   ============================================================ */
.features { background: var(--bg); }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(61, 220, 110, 0.4);
  box-shadow: var(--shadow-md);
}
.card__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(61, 220, 110, 0.12);
  color: var(--green);
  margin-bottom: var(--space-6);
}
.card__icon svg { width: 26px; height: 26px; }
.card__title {
  font-size: 1.35rem;
  margin-bottom: var(--space-3);
}
.card__text {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
}
@media (min-width: 640px) {
  .card:nth-child(2n) { margin-top: var(--space-4); }
}
@media (min-width: 1040px) {
  .card:nth-child(2n) { margin-top: 0; }
  .card:nth-child(2) { margin-top: var(--space-4); }
  .card:nth-child(3) { margin-top: var(--space-8); }
  .card:nth-child(4) { margin-top: var(--space-4); }
}

/* ============================================================
   PLATFORM & HOW TO USE
   ============================================================ */
.howto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.howto__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.howto__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,12,14,0.92) 0%, rgba(10,12,14,0.8) 50%, rgba(10,12,14,0.94) 100%);
}
.howto__head { margin-bottom: var(--space-12); max-width: 44ch; }
.howto__compat {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-items: start;
  gap: var(--space-6);
}
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .step:nth-child(2) { margin-top: var(--space-4); }
  .step:nth-child(3) { margin-top: var(--space-8); }
}
.step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: rgba(22, 26, 31, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.step__num {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: #04140a;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
}
.step__title {
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
}
.step__text {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(61,220,110,0.10), transparent 65%),
    var(--bg);
  border-top: 1px solid var(--border);
  padding-block: var(--space-24);
  text-align: center;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.footer__title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  max-width: 22ch;
  margin-bottom: var(--space-2);
}
.footer__lead {
  color: var(--text-muted);
  font-size: 1.08rem;
  max-width: 42ch;
  margin: 0;
}
.footer__links a {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}
.footer__links a:hover { text-decoration: underline; }
.footer__sep {
  margin-inline: var(--space-3);
  color: var(--text-faint);
}
.footer__contact {
  color: var(--text-muted);
  margin: 0;
}
.footer__contact a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__copy {
  color: var(--text-faint);
  font-size: 0.9rem;
  margin-top: var(--space-4);
}
.footer__copy a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__copy a:hover { color: var(--text); }
.footer__legal {
  color: var(--text-faint);
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 52ch;
  margin: var(--space-2) auto 0;
}

/* ============================================================
   STORY (personal note — dimmed full-bleed background photo)
   Łukasz's face sits lower-left of the photo, so text lives on the
   RIGHT and the overlay stays lighter over the left to keep him visible.
   Mobile: the background is pinned (position: sticky) while the note
   scrolls over it — no background-attachment: fixed, no JS.
   ============================================================ */
.story {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: bounds the full-bleed photo without becoming a scroll
     container (which would scope the sticky background to this box and kill
     the mobile viewport pin). */
  overflow: clip;
  background: var(--bg-2);
  /* The background must reach the section edges, so move the vertical
     rhythm from the section onto the inner content instead. */
  padding-block: 0;
}

/* Sticky background layer: one viewport tall, pinned to the top of the
   viewport while the section is in view. The photo and its scrim live
   inside, so the face stays put as the text scrolls past on mobile. */
.story__bg {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  /* Pull the layer out of normal flow height so it overlaps the content
     instead of stacking above it. */
  margin-bottom: -100vh;
  background-image: url("../assets/maker.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* Keep his face (lower-left) in frame on every width. */
  background-position: left center;
}

/* Gradient scrim: a small global dim, plus a left→right wash that stays
   light over his face (left) and darkens behind the text (right). */
.story__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(10, 12, 14, 0.12) 0%,
      rgba(10, 12, 14, 0.30) 38%,
      rgba(10, 12, 14, 0.78) 70%,
      rgba(10, 12, 14, 0.90) 100%
    ),
    linear-gradient(180deg, rgba(10, 12, 14, 0.28) 0%, rgba(10, 12, 14, 0.42) 100%);
}

/* On narrow screens the text column is full-width, so darken the lower
   band (where the words sit) while leaving the face perceptible up top. */
@media (max-width: 859px) {
  .story__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(10, 12, 14, 0.30) 0%,
        rgba(10, 12, 14, 0.45) 32%,
        rgba(10, 12, 14, 0.82) 70%,
        rgba(10, 12, 14, 0.92) 100%
      );
  }
}

.story__inner {
  position: relative;
  /* Give the pin enough scroll length to be felt on mobile: the note
     occupies the lower portion, the face shows through above it. */
  min-height: 168vh;
  padding-block: var(--space-24);
  display: flex;
  align-items: flex-end;
}

/* The note itself — a readable column over the dimmed area. */
.story__body {
  max-width: 56ch;
}

@media (min-width: 860px) {
  .story__inner {
    min-height: 100vh;
    padding-block: var(--space-16);
    align-items: center;
    /* Push the note into the right column, over the face on the left. */
    justify-content: flex-end;
  }
  .story__body { max-width: 46ch; }
}

.story__mark {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 0 var(--space-5);
}
.story__mark svg { width: 100%; height: 100%; }

/* Lighten the muted body text and add a faint shadow so it clears WCAG AA
   over the dimmed photo. */
.story__body p {
  color: #e7ebef;
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.story__body .section__title,
.story__body .eyebrow {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
/* Lift the eyebrow off its faint default so it clears AA over the photo. */
.story__body .eyebrow { color: var(--text-muted); }
.story__close { color: var(--text); font-weight: 600; }
.story__sign {
  margin: var(--space-6) 0 0;
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Setup section: "how to get started" link */
.howto__help {
  margin: var(--space-12) 0 0;
  font-size: 1.05rem;
  color: var(--text-muted);
}
.howto__help a {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}
.howto__help a:hover { text-decoration: underline; }

/* ============================================================
   CHART DIVIDERS (hero→problem green, setup→footer red)
   A near-flat, irregular trend line that shifts on scroll.
   ============================================================ */
.wave-divider {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--wave-divider-h);
  margin-block: calc(0px - var(--wave-divider-h));
  line-height: 0;
  pointer-events: none;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: var(--wave-divider-h);
  overflow: visible;
}
.wave-divider + .section,
.wave-divider + .footer {
  position: relative;
  z-index: 1;
  --wave-clip: polygon(
    0 var(--wave-y0),
    20% var(--wave-y1),
    40% var(--wave-y2),
    60% var(--wave-y3),
    80% var(--wave-y4),
    100% var(--wave-y5),
    100% 100%,
    0 100%
  );
}
.wave-divider + .section:not(.howto),
.wave-divider + .footer {
  clip-path: var(--wave-clip);
}
.wave-divider + .howto .howto__bg,
.wave-divider + .howto .howto__overlay {
  clip-path: var(--wave-clip);
}
.wave-divider + .section {
  padding-top: calc(var(--space-24) + var(--wave-divider-h));
}
.wave-divider + .story {
  padding-top: 0;
}
.wave-divider + .footer {
  padding-top: calc(var(--space-24) + var(--wave-divider-h));
}
.wave-divider--green + .section,
.wave-divider--green + .footer {
  --wave-y0: 29px;
  --wave-y1: 22px;
  --wave-y2: 32px;
  --wave-y3: 25px;
  --wave-y4: 32px;
  --wave-y5: 27px;
}
.wave-divider--red + .section,
.wave-divider--red + .footer {
  --wave-y0: 27px;
  --wave-y1: 32px;
  --wave-y2: 25px;
  --wave-y3: 31px;
  --wave-y4: 24px;
  --wave-y5: 29px;
}
.wave-divider__line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wave-divider--green .wave-divider__line {
  stroke: var(--green);
  filter: drop-shadow(0 0 6px rgba(61, 220, 110, 0.45));
}
.wave-divider--red .wave-divider__line {
  stroke: var(--red);
  filter: drop-shadow(0 0 6px rgba(255, 77, 77, 0.45));
}
@media (min-width: 768px) {
  :root {
    --wave-divider-h: 78px;
  }
  .wave-divider + .section {
    padding-top: calc(var(--space-32) + var(--wave-divider-h));
  }
  .wave-divider + .story {
    padding-top: 0;
  }
  .wave-divider--green + .section,
  .wave-divider--green + .footer {
    --wave-y0: 41px;
    --wave-y1: 31px;
    --wave-y2: 44px;
    --wave-y3: 35px;
    --wave-y4: 45px;
    --wave-y5: 37px;
  }
  .wave-divider--red + .section,
  .wave-divider--red + .footer {
    --wave-y0: 37px;
    --wave-y1: 45px;
    --wave-y2: 34px;
    --wave-y3: 44px;
    --wave-y4: 33px;
    --wave-y5: 41px;
  }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  /* Release the GPU layer once revealed — keeping will-change here makes
     backdrop-filtered children (the .step cards) render text softly. */
  will-change: auto;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .watch-switcher__button::before,
  .watch-switcher__button::after {
    animation: none;
    opacity: 0.55;
    transform: none;
  }
}