:root {
  --ice: #edf5f8;
  --snow: #f8fbfc;
  --mist: #d8e7ed;
  --slate: #27465a;
  --deep: #0d293b;
  --line: rgba(39, 70, 90, .22);
  --accent: #7fc9e1;
  --shadow: rgba(6, 30, 45, .24);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  color: var(--deep);
  background:
    radial-gradient(circle at 84% 8%, rgba(255,255,255,.95), transparent 30rem),
    linear-gradient(145deg, #d9e9ef 0%, var(--snow) 42%, #cbdfe7 100%);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  z-index: 0;
}

.snowfield {
  position: absolute;
  inset: 0 0 auto 0;
  height: 52rem;
  overflow: hidden;
  pointer-events: none;
}

.snowfield::before,
.snowfield::after {
  content: "";
  position: absolute;
  width: 45rem;
  height: 18rem;
  background: rgba(255,255,255,.42);
  transform: rotate(-12deg) skewX(-25deg);
  filter: blur(2px);
}

.snowfield::before { right: -20rem; top: 11rem; }
.snowfield::after { left: -24rem; top: 31rem; opacity: .5; }

.landing, footer {
  width: min(100% - 2.25rem, 72rem);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.hero { padding: 3rem 0 4rem; }

.eyebrow,
.section-label,
.field-note,
.elevation-mark,
cite,
footer > span {
  font: 700 .78rem/1 "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  letter-spacing: .22em;
}

.eyebrow { display: flex; align-items: center; gap: .9rem; color: var(--slate); margin: 0 0 2.25rem; }
.eyebrow span { width: 2.4rem; height: 1px; background: var(--slate); }

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 1.4rem;
  font: 800 clamp(3.55rem, 16vw, 6.6rem)/.83 "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

h1 em { color: transparent; -webkit-text-stroke: 1.2px var(--slate); font-style: italic; }

.intro { max-width: 30rem; color: var(--slate); font-size: .98rem; line-height: 1.65; }

.book-stage {
  position: relative;
  width: min(76vw, 19rem);
  margin: 3.2rem auto 2.2rem;
  perspective: 900px;
}

.book-stage img {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 1.3rem 1.6rem 2.8rem var(--shadow), -.5rem -.4rem 1.5rem rgba(255,255,255,.8);
  transform: rotateY(-4deg) rotateZ(-1.2deg);
}

.book-shadow { position: absolute; inset: 8% -5% -5% 12%; background: var(--shadow); filter: blur(2rem); }
.elevation-mark { position: absolute; right: -2.4rem; top: 30%; writing-mode: vertical-rl; color: var(--slate); }
.field-note { position: absolute; z-index: 3; left: -2.2rem; bottom: 2.2rem; background: var(--deep); color: white; padding: .8rem 1rem; line-height: 1.35; box-shadow: .5rem .6rem 1.4rem var(--shadow); }

.price { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid var(--line); padding-top: 1rem; font: 700 1.65rem/1 "Arial Narrow", "Roboto Condensed", Impact, sans-serif; }
.price span { color: var(--slate); font: 600 .72rem/1.2 Inter, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .08em; }

.primary-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.9rem;
  padding: 0 1.25rem;
  color: white;
  background: var(--deep);
  border: 1px solid var(--deep);
  text-decoration: none;
  font: 700 .84rem/1 Inter, "Segoe UI", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.primary-cta svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.primary-cta:hover { background: transparent; color: var(--deep); transform: translateY(-2px); }
.primary-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.format-note { text-align: center; margin: .75rem 0 0; color: var(--slate); font-size: .69rem; letter-spacing: .06em; text-transform: uppercase; }
.purchase-action { width: 100%; }

.inside { border-top: 1px solid var(--line); padding: 3.5rem 0; }
.section-label { color: var(--slate); margin-bottom: 1.1rem; }
h2 { max-width: 28rem; font: 700 2.6rem/.95 "Arial Narrow", "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; }
.benefits { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--line); }
.benefits li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.number { color: #7396a8; font: 600 1rem/1 "Arial Narrow", "Roboto Condensed", Impact, sans-serif; }
.benefits strong, .benefits div > span { display: block; }
.benefits strong { margin-bottom: .4rem; font: 700 1.2rem/1 "Arial Narrow", "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; }
.benefits div > span { color: var(--slate); font-size: .82rem; line-height: 1.45; }

blockquote { margin: 0; padding: 3.2rem 0; border-top: 1px solid var(--line); text-align: center; }
blockquote p { margin-bottom: 1.2rem; font: italic 600 2.25rem/1 "Arial Narrow", "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; }
cite { color: var(--slate); font-style: normal; }

footer { display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid var(--line); padding: 1.8rem 0 2.5rem; color: var(--slate); }
footer p { margin: 0; max-width: 34rem; font-size: .67rem; line-height: 1.5; }

@media (min-width: 860px) {
  .landing, footer { width: min(100% - 6rem, 74rem); }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .8fr); grid-template-rows: auto auto; align-items: center; column-gap: 7vw; min-height: 48rem; padding: 4rem 0 5rem; }
  .eyebrow { margin-bottom: 3.4rem; }
  h1 { font-size: clamp(5.3rem, 8.1vw, 7.7rem); }
  .intro { font-size: 1.05rem; }
  .book-stage { grid-column: 2; grid-row: 1 / 3; width: min(27vw, 23rem); margin: 0 auto; }
  .purchase-action { grid-column: 1; grid-row: 2; max-width: 27rem; align-self: start; margin-top: 2.7rem; }
  .inside { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; padding: 6rem 0; }
  .benefits { margin-top: 0; }
  h2 { font-size: 3.6rem; }
  blockquote { padding: 5.5rem 0; }
  blockquote p { font-size: 3.8rem; }
  footer { flex-direction: row; justify-content: space-between; align-items: start; padding: 2.2rem 0 3rem; }
  footer p { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .book-stage img, .primary-cta:hover { transform: none; }
}