/* The Only Peace of Mind — landing page recreation with video hero background */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --c-blue: #5070f8;
  --c-blue-soft: #9db4ff;
  --c-gold: #f4c95d;
  --c-ink: #070a12;
  /* Section navy, measured from theonlypeaceofmind.org. */
  --c-navy: #090c1a;
  --c-mute: #aeb8cc;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background: var(--c-navy);
  color: #fff;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: min(100vh, 820px);
  min-height: 640px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.hero-video-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 80%),
    linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.65) 12%,
      rgba(0,0,0,0.20) 35%,
      rgba(0,0,0,0.45) 70%,
      rgba(0,0,0,1) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0.7) 0%,
      rgba(0,0,0,0) 12%,
      rgba(0,0,0,0) 88%,
      rgba(0,0,0,0.7) 100%);
}

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 56px;
}

.brand { display: flex; align-items: center; gap: 16px; }

.brand img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 0 2px rgba(244,201,93,0.4);
  object-fit: cover;
}

.wordmark { display: flex; flex-direction: column; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
.wordmark .wm-top { font-weight: 800; font-size: 22px; letter-spacing: 0.3px; }
.wordmark .wm-bot { font-weight: 600; font-size: 14px; letter-spacing: 3px; color: var(--c-gold); text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 16px; }
.nav a { font-size: 15px; opacity: 0.85; padding: 8px 10px; transition: opacity .15s; }
.nav a:hover { opacity: 1; }
.nav a.signin {
  background: var(--c-blue);
  color: #fff;
  padding: 8px 22px;
  border-radius: 999px;
  font-weight: 700;
  opacity: 1;
  box-shadow: 0 8px 22px -6px rgba(80,112,248,.5);
  transition: background .15s, transform .15s;
}
.nav a.signin:hover { background: #6f8bff; transform: translateY(-2px); }

.hero-center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 100px;
}

.headline {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.05;
  max-width: 980px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.9);
  letter-spacing: -1px;
  color: #fff;
}
.headline .gold { color: var(--c-gold); }

.subtitle {
  margin-top: 28px;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  color: var(--c-mute);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}

.ctas {
  margin-top: 36px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  padding: 18px 36px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 22px -6px rgba(80,112,248,.5);
  transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.btn.primary { background: var(--c-blue); color: #fff; }
.btn.primary:hover { background: #6f8bff; }
.btn.secondary {
  background: rgba(255,255,255,0.18);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35);
}
.btn.secondary:hover { background: rgba(255,255,255,0.28); }

.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 13px;
  opacity: 0.5;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---------- Sections ---------- */

.section {
  background: var(--c-navy);
  color: #fff;
  padding: clamp(72px, 11vh, 140px) clamp(24px, 6vw, 88px) clamp(56px, 8vh, 96px);
  position: relative;
}

/* No pill, no ring — gold is a text colour here, nothing encloses it. */
.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 14px;
}

/* No gold rule under section titles. */
.section-title {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
  color: #ffffff;
}
.section-title::after { content: none; }

.row-wrap { position: relative; margin-top: 28px; --gut: clamp(24px, 6vw, 88px); --aw: clamp(38px, 3.8vw, 54px); }

.row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: calc(20px + clamp(180px, 19vw, 268px) * .23) 0 30px;
  scroll-snap-type: x mandatory;
  /* Left at `auto` deliberately: the arrows ask for the animation themselves, per press, in
     script.js. A blanket `smooth` here would also animate drags and anchor jumps, and it was
     what made a press feel laggy when the target was measured from a moving scrollLeft.
     Snapping stays on for dragging; scroll-padding goes to 0 so a card's snap position IS its
     start edge, otherwise the browser corrects every slide by the 8px difference. */
  scroll-padding-left: 0;
  scroll-behavior: auto;
  scrollbar-width: none;
  cursor: grab;
}
.row::-webkit-scrollbar { display: none; }
.row.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* Every card is identical and larger: one 16:9 frame, the charts' own shape, so each
   whole chart fills it with nothing cut and nothing drawn around it. The number sits
   over the picture's top-left corner. */
.card {
  flex: 0 0 auto;
  width: auto;
  height: clamp(240px, 21.5vw, 330px);
  position: relative;
  display: flex;
  align-items: flex-start;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease;
}
.card:hover { transform: scale(1.05); z-index: 2; }

/* Verbatim from the live site: ink-black fill, 4px blue outline. Do not restyle. */
.rank {
  flex: 0 0 clamp(120px, 12vw, 150px);
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: clamp(180px, 19vw, 268px);
  font-weight: 900;
  line-height: 0.78;
  margin-right: -36px;
  margin-top: -.23em;
  z-index: 3;
  user-select: none;
  overflow: visible;
  color: #080a12;
  -webkit-text-fill-color: #080a12;
  -webkit-text-stroke: 4px #5070f8;
  background: none;
  text-shadow: none;
  filter: none;
}

.card-img {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  background: var(--img) center / 100% 100% no-repeat;
  border-radius: 4px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: box-shadow .25s ease;
}
.card:hover .card-img {
  box-shadow: 0 0 22px rgba(80,112,248,.42);
}
.card-title {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  z-index: 2;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  /* No shade over the chart; the title carries its own outline to stay readable. */
  text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.8);
  letter-spacing: 0.2px;
}

/* Arrows sit in the page margin beside the row, so they never cover a chart. */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--aw);
  height: var(--aw);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 calc(var(--aw) * .12);
  border: 0;
  background: none;
  color: #fff;
  font-size: calc(var(--aw) * 1.2);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  transition: background .2s ease, border-color .2s ease, box-shadow .25s ease, opacity .2s ease;
}
.arrow:hover { text-shadow: 0 0 14px rgba(80,112,248,.9), 0 0 28px rgba(80,112,248,.5); }
.arrow:focus-visible { outline: 2px solid #5070f8; outline-offset: 3px; }
.arrow.prev { left: calc((var(--gut) + var(--aw)) / -2); }
.arrow.next { right: calc((var(--gut) + var(--aw)) / -2); }
/* At the start or end of the row an arrow dims, but stays visible. */
.arrow[disabled] { opacity: .35; cursor: default; box-shadow: none; }

/* ---------- Reasons ---------- */

.reasons { background: var(--c-navy); padding: clamp(56px, 8vh, 96px) clamp(24px, 6vw, 88px) clamp(80px, 12vh, 140px); }

/* ---------- Study tiles: four picture cards, the title at the foot of each ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Gap and inset are set so the card lands on the 402px width measured in the screenshot,
     not just its proportions: the section's own padding alone left the cards 12px too wide. */
  gap: clamp(12px, 1.4vw, 27px);
  padding-inline: clamp(0px, 1.15vw, 22px);
  margin-top: 30px;
}

/* One shape for all four, measured off the card in Rod's screenshot (402x510). The pictures
   were re-cut to exactly this ratio, so each one still fills its card corner to corner —
   nothing letterboxed, no grey, no black. */
.tile {
  position: relative;
  display: block;
  aspect-ratio: 402 / 560;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-ink);
  container-type: inline-size;
  transition: transform .25s cubic-bezier(.32,.72,0,1), box-shadow .25s ease;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 0 26px rgba(80,112,248,.45), 0 20px 42px -20px rgba(0,0,0,.85);
}
.tile:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 4px; }

.tile-img { position: absolute; inset: 0; background: var(--img) center / cover no-repeat; }

/* Brand navy rising into the foot of the card, so the title reads over any picture. */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9,12,26,0) 42%, rgba(9,12,26,.55) 70%, rgba(9,12,26,.95) 100%);
}

/* The books card carries the warm brown wash of the reference row's third card — kept light
   enough that both volumes still read clearly. */
.tile.is-books::after {
  background: linear-gradient(180deg, rgba(122,74,22,.20) 0%, rgba(96,56,14,.34) 46%, rgba(52,29,7,.80) 78%, rgba(38,20,4,.97) 100%);
}

/* The two chart cards get the navy fade around the edges as well as under the title. */
.tile.is-chart::after {
  background:
    radial-gradient(125% 88% at 50% 38%, rgba(9,12,26,0) 42%, rgba(9,12,26,.26) 76%, rgba(9,12,26,.62) 100%),
    /* Starts lower than the default fade: on the Great Image card the stone strikes near the
       foot of the frame, and a fade beginning at 34% swallowed the very thing the card is of. */
    linear-gradient(180deg, rgba(9,12,26,.10) 0%, rgba(9,12,26,0) 52%, rgba(9,12,26,.34) 74%, rgba(9,12,26,.93) 100%);
}

.tile-name {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  bottom: 6%;
  /* Sized from the card's own width, so it sits the same on a phone as on a desktop. */
  font-size: clamp(13px, 8.6cqw, 30px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
  text-wrap: balance;
}

@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sealing message: video on the left, words on the right ---------- */

.sealing {
  --w: min(100vw, 1680px);
  width: var(--w);
  margin-left: calc(50% - var(--w) / 2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
  background: var(--c-navy);
  padding: clamp(40px, 7vh, 90px) 0 clamp(20px, 4vh, 50px);
}
.sealing-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #fcfcfc;
  border-radius: 0 10px 10px 0;
}
.sealing-copy { padding-right: clamp(20px, 5vw, 96px); }
.sealing-copy h2 {
  font-size: clamp(28px, 3.5vw, 56px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
/* "the seal of God" in the same bronze-gold glow as "The Last Elijah Message" in the hero. */
.sealing-copy h2 .gold {
  color: #c8871a;
  text-shadow:
    0 0 18px rgba(226,160,52,.95),
    0 0 44px rgba(200,135,26,.72),
    0 0 92px rgba(200,135,26,.42),
    0 2px 24px rgba(0,0,0,.6);
}
.sealing-copy p {
  margin-top: clamp(12px, 1.8vh, 22px);
  font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.55;
  color: var(--c-mute);
  max-width: 46ch;
}
.sealing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(18px, 2.6vh, 32px);
  padding: 16px 36px;
  border-radius: 999px;
  background: var(--c-blue);
  color: #fff;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  transition: background .2s ease, box-shadow .25s ease, transform .2s ease;
}
.sealing-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(80,112,248,.62), 0 10px 26px -8px rgba(80,112,248,.55);
}

@media (max-width: 900px) {
  .sealing { grid-template-columns: 1fr; gap: 20px; }
  .sealing-media video { border-radius: 0; }
  .sealing-copy { padding: 0 20px; }
}

/* ---------- Reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

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

/* The hero owns its own responsive rules in hero.css — nothing here touches it. */



@media (max-width: 768px) {
  .section, .reasons { padding-left: 20px; padding-right: 20px; }
  .card { width: auto; height: min(42vw, 200px); }
  .row { padding-top: calc(20px + min(38vw, 180px) * .23); }
  .rank { font-size: min(38vw, 180px); flex: 0 0 min(24vw, 110px); margin-right: -28px; -webkit-text-stroke-width: 3px; }
  .row-wrap { --aw: 32px; }
  .arrow.prev { left: -16px; }
  .arrow.next { right: -16px; }
}