/* ==========================================================================
   /50-animal-facts/ — the lead-magnet landing page.
   Layers on style.css, which supplies the tokens, .section/.container,
   .eyebrow/.section-h2/.lede, .hill, .torn-edge, .peek, .cloud, .tile-texture,
   the store buttons and the footer.

   Background ladder, per BRAND §11: sky → paper → cream → paper → green → ink.
   The hero and the closing band are the only saturated surfaces.

   The signup form appears twice, and both times it sits on a saturated ground.
   That is deliberate: BRAND §7i bars craft cards from a sky, so the form is
   built as chrome (pill input, pill button, Paper-at-alpha thread per §7a
   rule B) rather than as a stitched cream card.
   ========================================================================== */

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

.mag-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #3E76B4 0%, #4A88C8 42%, #6FA8E8 78%, #A9DDF5 100%);
}
.mag-hero-texture {
  background-image: url('../assets/naturebg_white.png');
  opacity: .15;
  animation: tilepan 80s linear infinite;
}
.mag-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(44px, 7vh, 78px) clamp(20px, 4vw, 40px) clamp(140px, 18vh, 178px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 68px);
}
.mag-hero-copy { flex: 1 1 480px; min-width: 300px; max-width: 620px; }
.mag-hero-art { flex: 0 1 380px; min-width: 240px; display: grid; place-items: center; }

/* style.css scopes the hero hill geometry to `.hero`, so this hero has to state
   its own. Same three ellipses, same chained gradient ladder (§7c) — each hill's
   bottom colour is the next one's top, which is what makes them read as one
   landform rather than three shapes. */
.mag-hero .hill-1 { bottom: -50px; left: -15%; width: 75%; height: 230px; background: linear-gradient(180deg, #9AD46E, #7BC142); }
.mag-hero .hill-2 { bottom: -80px; right: -18%; width: 85%; height: 260px; background: linear-gradient(180deg, #7BC142, #5FA836); }
.mag-hero .hill-3 { bottom: -120px; left: 10%; width: 95%; height: 270px; background: linear-gradient(180deg, #5FA836, #4E9A3C); }

.mag-h1 {
  margin: 18px 0 10px;
  font: 700 clamp(40px, 5.8vw, 68px)/1.04 Fredoka;
  color: var(--paper);
  text-shadow: 0 4px 0 rgba(26, 58, 47, .18);
  text-wrap: balance;
}
.mag-h1 span { color: var(--sun-400); }
.mag-h1-sub {
  display: block;
  margin-top: 4px;
  font: 500 clamp(20px, 2.6vw, 30px) Fredoka;
  color: rgba(253, 251, 242, .88);
  text-shadow: none;
}
.mag-hero-sub {
  margin: 0 0 26px;
  font: 600 clamp(16px, 2vw, 19px)/1.6 'Nunito Sans';
  color: var(--paper);
  text-shadow: 0 1px 8px rgba(26, 58, 47, .45), 0 1px 2px rgba(26, 58, 47, .4);
  max-width: 48ch;
  text-wrap: pretty;
}

/* The book, standing on the landscape. Not a craft card — an object, like the
   shipped hero's phone, so it may sit on the sky. */
.mag-book { position: relative; z-index: 1; width: min(360px, 76vw); transform: rotate(-3deg); }
.mag-book img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  /* The cover is a blue page on a blue sky and carries the same doodle texture,
     so it needs its own paper edge to separate — a hairline disappears. */
  box-shadow: 0 26px 52px rgba(26, 58, 47, .38), 0 0 0 3px rgba(253, 251, 242, .85);
}
.mag-book-flag {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: -14px;
  transform: rotate(4deg);
  background: var(--coral-400);
  color: var(--paper);
  font: 600 13px Fredoka;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px dashed rgba(253, 251, 242, .55);
  box-shadow: 0 8px 16px rgba(224, 104, 64, .4);
  white-space: nowrap;
}

/* Signup form ------------------------------------------------------------- */

.mag-form { max-width: 520px; }
.mag-form--center { margin: 0 auto; }
.mag-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mag-form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mag-form-input {
  flex: 1 1 240px;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 20px;
  border-radius: 999px;
  border: 2px dashed rgba(253, 251, 242, .55);
  background: rgba(26, 58, 47, .3);
  color: var(--paper);
  font: 600 16px 'Nunito Sans';
  -webkit-appearance: none;
  appearance: none;
  transition: background .2s, border-color .2s;
}
.mag-form-input::placeholder { color: rgba(253, 251, 242, .62); }
.mag-form-input:focus {
  outline: none;
  background: rgba(26, 58, 47, .44);
  border-color: var(--sun-400);
}
.mag-form-input:user-invalid { border-color: var(--sun-400); }
.mag-form-btn {
  flex: 0 0 auto;
  cursor: pointer;
  font: 600 17px Fredoka;
  color: var(--paper);
  background: linear-gradient(180deg, var(--coral-400), var(--coral-600));
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px dashed rgba(253, 251, 242, .45);
  box-shadow: 0 6px 16px rgba(224, 104, 64, .35);
  transition: transform .25s var(--spring), box-shadow .25s;
}
.mag-form-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px rgba(224, 104, 64, .45); }
.mag-form-btn:active { transform: scale(.95); }
.mag-form-btn[disabled] { opacity: .6; cursor: default; transform: none; }
.mag-form-note {
  margin: 14px 0 0;
  font: 700 13px/1.55 'Nunito Sans';
  color: rgba(253, 251, 242, .88);
  text-shadow: 0 1px 6px rgba(26, 58, 47, .4);
}
.mag-form-note a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.mag-form-note a:hover { color: var(--sun-400); }

/* One status line for both outcomes; JS sets the modifier and the text. */
.mag-form-msg {
  margin: 14px 0 0;
  padding: 13px 18px;
  border-radius: 14px;
  border: 2px dashed rgba(253, 251, 242, .5);
  background: rgba(26, 58, 47, .32);
  font: 700 14.5px/1.6 'Nunito Sans';
  color: var(--paper);
}
.mag-form-msg--ok { border-color: var(--sun-400); }
.mag-form-msg i { font-size: 18px; vertical-align: -3px; margin-right: 7px; color: var(--sun-400); }

/* What's inside ----------------------------------------------------------- */

.mag-inside { position: relative; overflow: hidden; background: var(--paper); }
.mag-inside-texture {
  background-image: url('../assets/naturebg.png');
  opacity: .045;
  animation: tilepan 120s linear infinite;
}
.mag-inside .container { position: relative; }

.mag-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.mag-fact {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--cream);
  border: 2px dashed var(--tan);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 12px 30px rgba(26, 58, 47, .08);
  transition: transform .3s var(--spring), box-shadow .3s;
}
.mag-fact:nth-child(1) { transform: rotate(-.7deg); }
.mag-fact:nth-child(2) { transform: rotate(.6deg); }
.mag-fact:nth-child(3) { transform: rotate(-.5deg); }
.mag-fact:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 18px 36px rgba(26, 58, 47, .13); }
.mag-fact-num {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sun-400), var(--sun-600));
  border: 2px dashed rgba(253, 251, 242, .5);
  display: grid;
  place-items: center;
  font: 600 18px Fredoka;
  color: var(--ink);
}
.mag-fact-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mag-fact h3 { font: 600 21px/1.2 Fredoka; color: var(--ink); text-wrap: balance; }
.mag-fact p { font: 600 15px/1.6 'Nunito Sans'; color: var(--slate); text-wrap: pretty; }
.mag-fact-who {
  font: 800 11px 'Nunito Sans';
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--leaf-700);
}
.mag-fact-src {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 2px dashed rgba(220, 200, 158, .8);
  font: 600 12.5px/1.5 'Nunito Sans';
  color: var(--slate);
}

/* Sourcing split — the spread photo beside the case for trusting it --------- */

.mag-source {
  margin-top: clamp(48px, 7vh, 76px);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.mag-spread { position: relative; }
.mag-spread-polaroid {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-radius: 14px;
  padding: 10px 10px 0;
  transform: rotate(-2deg);
  border: 1px solid rgba(184, 201, 190, .5);
  box-shadow: 0 18px 40px rgba(26, 58, 47, .18);
  transition: transform .3s var(--spring);
}
.mag-spread-polaroid:hover { transform: rotate(0) scale(1.015); }
.mag-spread-polaroid img { display: block; width: 100%; height: auto; border-radius: 8px 8px 0 0; }
.mag-spread-caption {
  text-align: center;
  font: 600 13.5px Fredoka;
  color: var(--slate);
  padding: 11px 0 12px;
}
.mag-source-copy h2 { margin-bottom: 14px; }
.mag-source-copy p {
  font: 600 16px/1.65 'Nunito Sans';
  color: var(--slate);
  text-wrap: pretty;
}
.mag-source-copy p + p { margin-top: 14px; }
.mag-cuts {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--mint);
}
.mag-cuts-title {
  font: 800 11px 'Nunito Sans';
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--leaf-700);
}
.mag-cuts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mag-cuts li {
  display: flex;
  gap: 10px;
  font: 600 14.5px/1.55 'Nunito Sans';
  color: var(--slate);
  text-wrap: pretty;
}
.mag-cuts li i { flex: none; font-size: 18px; color: var(--coral-600); }
.mag-cuts strong { color: var(--ink); }

/* The app ----------------------------------------------------------------- */

.mag-app { position: relative; overflow: hidden; background: var(--cream); }
.mag-app-texture {
  background-image: url('../assets/naturebg.png');
  opacity: .05;
  animation: tilepan 110s linear infinite;
}
.mag-app .container { position: relative; }
/* .lede centres itself inside its 52ch measure; this column is left-aligned. */
.mag-app-copy .lede { margin-left: 0; }
.mag-app-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.mag-app-points { display: flex; flex-direction: column; gap: 16px; margin: 26px 0 30px; }
.mag-app-point { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.mag-app-point-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
}
.mag-app-point-icon i { font-size: 24px; }
.mag-app-point-icon--coral { background: rgba(255, 138, 91, .18); }
.mag-app-point-icon--coral i { color: var(--coral-600); }
.mag-app-point-icon--blue { background: rgba(111, 168, 232, .18); }
.mag-app-point-icon--blue i { color: var(--sky-500); }
.mag-app-point-icon--green { background: rgba(123, 193, 66, .16); }
.mag-app-point-icon--green i { color: var(--leaf-700); }
.mag-app-point h3 { font: 600 19px/1.25 Fredoka; color: var(--ink); margin-bottom: 3px; }
.mag-app-point p { font: 600 14.5px/1.55 'Nunito Sans'; color: var(--slate); text-wrap: pretty; }

/* The snap: a real animal photograph, the most prominent animal on the page
   (BRAND §7k), dressed in the shipped snap-card frame rather than left bare. */
.mag-snap { position: relative; justify-self: center; width: min(320px, 82vw); }
.mag-snap-card {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-radius: 12px;
  padding: 10px 10px 30px;
  transform: rotate(3.4deg);
  border: 1px solid rgba(184, 201, 190, .5);
  box-shadow: 0 20px 42px rgba(26, 58, 47, .24);
  transition: transform .3s var(--spring);
}
.mag-snap-card:hover { transform: rotate(0) scale(1.02); }
.mag-snap-plate { overflow: hidden; border-radius: 8px; border: 1.5px dashed var(--photo-stitch); }
.mag-snap-plate img { display: block; width: 100%; height: auto; }
.mag-snap-stamp {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--leaf-500);
  color: var(--paper);
  font: 600 13px Fredoka;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px dashed rgba(253, 251, 242, .55);
  white-space: nowrap;
  box-shadow: 0 6px 12px rgba(78, 154, 60, .35);
}

/* What arrives ------------------------------------------------------------ */

.mag-expect { background: var(--paper); }
.mag-expect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.mag-expect-card {
  background: var(--paper);
  border: 2px dashed var(--sage);
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 8px 22px rgba(26, 58, 47, .06);
}
.mag-expect-card i { font-size: 28px; color: var(--leaf-700); }
.mag-expect-card h3 { font: 600 19px Fredoka; color: var(--ink); }
.mag-expect-card p { font: 600 14.5px/1.6 'Nunito Sans'; color: var(--slate); text-wrap: pretty; }

/* Closing band ------------------------------------------------------------ */

.mag-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #7BC142, #5FA836);
}
.mag-cta-texture {
  background-image: url('../assets/naturebg_white.png');
  opacity: .14;
  animation: tilepan 90s linear infinite reverse;
}
.mag-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(68px, 9vh, 100px) 24px 0;
}
.mag-cta-inner h2 {
  margin: 0 0 14px;
  font: 600 clamp(32px, 4.4vw, 48px)/1.1 Fredoka;
  color: var(--paper);
  text-shadow: 0 3px 0 rgba(26, 58, 47, .18);
  text-wrap: balance;
}
.mag-cta-inner > p {
  margin: 0 auto 28px;
  max-width: 46ch;
  font: 600 17px/1.6 'Nunito Sans';
  color: rgba(253, 251, 242, .95);
  text-wrap: pretty;
}
.mag-cta-foot { position: relative; height: 200px; margin-top: 30px; }
.mag-cta-foot .hill-1 { bottom: -70px; left: -12%; width: 70%; height: 230px; background: linear-gradient(180deg, #FFE29A, #FFD34E); }
.mag-cta-foot .hill-2 { bottom: -100px; right: -15%; width: 85%; height: 250px; background: linear-gradient(180deg, #FFD34E, #E6B84D); }

/* Sticker peeks ----------------------------------------------------------- */

/* Anchored to the book, not to a hill. The hero's hill crest sits ~168px above
   its base and the crab is ~124px tall, so a hill peek here is either fully
   swallowed or shoved up into the form copy. The book's lower-left corner is a
   valid occluder (§7j lists card and frame edges) and leaves the copy alone.
   z-index -1 puts it behind the cover inside the book's own stacking context,
   which the rotate() on .mag-book creates. */
.peek--mag-crab { z-index: -1; bottom: -34px; left: -46px; width: clamp(94px, 10vw, 126px); --tilt: -12deg; --hide: translate(36%, 48%); }
.peek--mag-crab img { animation-delay: -1.6s; }
.peek--mag-cardinal { top: -74px; right: -22px; width: clamp(88px, 9vw, 116px); --tilt: 8deg; --hide: translate(-24%, 70%); }
/* it hides behind the snap card — an unclipped drop shadow smears past the frame */
.peek--mag-cardinal img { animation-delay: -2.8s; filter: none; }
/* Sized off the shipped .peek--cta-monkey: about a third of it clears the gold
   crest, the rest is behind the hill. Raising it further pushes into the form. */
.peek--mag-turtle { bottom: 40px; left: calc(50% - 84px); width: 168px; --tilt: -5deg; --hide: translateY(95%); }
.peek--mag-turtle img { animation-delay: -3.2s; }

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

@media (max-width: 960px) {
  .mag-source { grid-template-columns: 1fr; }
  .mag-spread { max-width: 420px; margin: 0 auto; }
  .mag-app-split { grid-template-columns: 1fr; }
  .mag-snap { order: -1; }
  .peek--mag-cardinal { top: -62px; right: 4px; width: 92px; }
}
@media (max-width: 620px) {
  .mag-hero-inner { padding-bottom: clamp(120px, 16vh, 150px); }
  .mag-book { width: min(260px, 68vw); }
  .mag-book-flag { top: 12px; right: -8px; font-size: 12px; padding: 5px 11px; }
  .mag-fact { padding: 22px 20px 20px; grid-template-columns: 38px 1fr; gap: 13px; }
  .mag-fact-num { width: 38px; height: 38px; font-size: 16px; }
  .mag-form-btn { flex: 1 1 100%; }
  .peek--mag-crab { bottom: -24px; left: -30px; width: 84px; }
  .peek--mag-turtle { bottom: 30px; left: calc(50% - 62px); width: 124px; }
}