/* ===== Why? v2: a bright notepad with scribbles (pinned scene, answers step on scroll) ===== */
.why { position: relative; height: 420vh; color: var(--ink); background: #fffdf3; }
.why-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 112px clamp(112px, 11vw, 180px) 76px clamp(70px, 11vw, 150px); gap: clamp(20px, 3vw, 44px);
  background:
    linear-gradient(90deg, transparent calc(clamp(52px, 8.4vw, 124px) - 1px), rgba(242,72,60,.55) calc(clamp(52px, 8.4vw, 124px) - 1px), rgba(242,72,60,.55) calc(clamp(52px, 8.4vw, 124px) + 1px), transparent calc(clamp(52px, 8.4vw, 124px) + 1px)),
    repeating-linear-gradient(180deg, transparent 0 41px, rgba(29,78,216,.16) 41px 43px),
    #fffdf3; }
/* spiral binding along the top */
.why-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px; background: radial-gradient(circle at 50% 50%, #14110f 0 5px, transparent 6px) 0 0 / 34px 34px repeat-x, linear-gradient(#fff 0 0) ; background-color: #f1ead6; box-shadow: 0 6px 12px rgba(20,17,15,.1); z-index: 3; }
.why-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 26px; background: radial-gradient(ellipse 10px 16px at 50% 50%, #cfd3da 0 55%, transparent 60%) 0 0 / 34px 26px repeat-x; z-index: 4; pointer-events: none; }
.why-paws { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.why-paws svg { position: absolute; width: 40px; height: 40px; fill: rgba(255,159,28,.55); animation: whyPaw 9s linear infinite; }
.why-paws svg:nth-child(1) { left: 8%; top: 88%; } .why-paws svg:nth-child(2) { left: 18%; top: 88%; animation-delay: 1.5s; } .why-paws svg:nth-child(3) { left: 30%; top: 88%; animation-delay: 3s; }
.why-paws svg:nth-child(4) { left: 42%; top: 88%; animation-delay: 4.5s; } .why-paws svg:nth-child(5) { left: 54%; top: 88%; animation-delay: 6s; } .why-paws svg:nth-child(6) { left: 66%; top: 88%; animation-delay: 7.5s; }
@keyframes whyPaw { 0% { transform: translateY(0) rotate(-12deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-85vh) rotate(14deg); opacity: 0; } }

.why-big { position: relative; display: flex; align-items: flex-end; font-family: var(--display); font-weight: 700; line-height: .8; letter-spacing: -.03em; font-size: clamp(6.5rem, 17vw, 16rem); white-space: nowrap; user-select: none; padding: .08em .12em; }
.why-big span { position: relative; display: block; color: var(--ink); transform: translateX(calc(var(--p, 0) * -2vw)) rotate(-2deg); }
.why-big span::before { content: ""; position: absolute; left: -2%; right: -2%; bottom: 6%; height: 34%; background: rgba(255,225,77,.9); z-index: -1; transform: skewX(-6deg) rotate(-1deg); border-radius: 6px 22px 8px 18px; }
.why-big b { display: block; margin-left: .06em; color: var(--pink); transform: rotate(calc(var(--p, 0) * 12deg + 6deg)); transform-origin: 50% 80%; }
.why-ring { position: absolute; inset: -6% -10%; width: 120%; height: 112%; fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; overflow: visible; }
.why-ring path { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: whyDraw 1.8s .3s var(--ease) forwards; }
.why-arrow { position: absolute; right: -6%; bottom: -16%; width: clamp(60px, 8vw, 120px); fill: none; stroke: var(--cobalt); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.why-arrow path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: whyDraw 1.2s 1.6s var(--ease) forwards; }
.why-note { position: absolute; right: -2%; bottom: -34%; font: italic 700 clamp(1rem, 1.6vw, 1.5rem) var(--display); color: var(--cobalt); transform: rotate(-6deg); font-style: normal; white-space: nowrap; }
@keyframes whyDraw { to { stroke-dashoffset: 0; } }

.why-cards { position: relative; display: grid; align-items: center; min-width: 0; }
.why-card { position: relative; grid-area: 1 / 1; padding: clamp(26px, 2.8vw, 44px); display: grid; align-content: start; gap: clamp(10px, 1.8vh, 16px); border-radius: 3px; box-shadow: 0 2px 3px rgba(20,17,15,.12), 0 22px 40px rgba(20,17,15,.2); opacity: 0; transform: translateY(60px) rotate(3deg) scale(.96); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(20,17,15,.07) 35px 36px); }
.why-card.w1 { background-color: #fff2a0; } .why-card.w2 { background-color: #ffc7de; } .why-card.w3 { background-color: #bdf0c8; } .why-card.w4 { background-color: #c4e8ff; }
.why-card .tape { position: absolute; left: 50%; top: -16px; width: 110px; height: 32px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,255,255,.65); border-left: 2px dashed rgba(20,17,15,.12); border-right: 2px dashed rgba(20,17,15,.12); box-shadow: 0 2px 4px rgba(20,17,15,.12); }
.why-card .doodle { position: absolute; right: 22px; top: 18px; width: 56px; height: 56px; fill: none; stroke: var(--red); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(10deg); }
.why-card.w2 .doodle { stroke: var(--pink); } .why-card.w3 .doodle { stroke: #15803d; } .why-card.w4 .doodle { stroke: var(--cobalt); fill: var(--cobalt); stroke: none; }
.why-card .q { font: 800 .85rem var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .7; padding-right: 70px; }
.why-card h3 { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, min(3.1vw, 5.4vh), 2.8rem); line-height: 1; letter-spacing: -.02em; background: linear-gradient(transparent 62%, rgba(255,225,77,.75) 62% 90%, transparent 90%); align-self: start; width: fit-content; max-width: 100%; }
.why-card p:not(.q) { font-weight: 600; font-size: clamp(.95rem, min(1.3vw, 2.5vh), 1.15rem); line-height: 1.5; max-width: 34em; }
.why-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .why-card li { border: 2.5px solid var(--ink); background: #fff; font-weight: 800; font-size: .85rem; padding: 4px 12px; border-radius: 999px 18px 999px 22px; transform: rotate(-1.2deg); } .why-card li:nth-child(even) { transform: rotate(1.4deg); }
.why[data-step="0"] .w1, .why[data-step="1"] .w2, .why[data-step="2"] .w3, .why[data-step="3"] .w4 { opacity: 1; transform: rotate(-1.2deg); pointer-events: auto; }
.why[data-step="1"] .w2 { transform: rotate(1deg); } .why[data-step="3"] .w4 { transform: rotate(1.2deg); }
.why[data-step="1"] .w1, .why[data-step="2"] .w1, .why[data-step="3"] .w1, .why[data-step="2"] .w2, .why[data-step="3"] .w2, .why[data-step="3"] .w3 { opacity: 0; transform: translateY(-70px) rotate(-7deg) scale(.94); }
.why-dog { position: absolute; right: clamp(16px, 4vw, 64px); bottom: 4vh; width: clamp(110px, 12vw, 190px); z-index: 2; }
.why-dog img { width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(20,17,15,.3)); animation: whyTilt 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes whyTilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.bubble-why { position: absolute; right: 96%; bottom: 76%; white-space: nowrap; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); font-weight: 800; padding: 6px 14px; border-radius: 18px 18px 4px 18px; font-size: .9rem; transform: rotate(-3deg); }
.why-dots { position: absolute; left: 50%; bottom: 3.5vh; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; }
.why-dots li { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; transition: background .3s, transform .3s var(--ease); } .why-dots li.on { background: var(--yellow); transform: scale(1.4); }
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .why { height: auto; }
  .why-stage { position: relative; height: auto; display: block; padding: 80px 20px 80px 54px; overflow: hidden; background-size: auto; }
  .why-big { font-size: clamp(5.5rem, 30vw, 10rem); margin-bottom: 34px; } .why-big span { transform: rotate(-2deg); } .why-big b { transform: rotate(10deg); } .why-note { display: none; } .why-arrow { display: none; }
  .why-cards { height: auto; display: grid; gap: 26px; }
  .why-card { position: relative; inset: auto; opacity: 1 !important; transform: none !important; pointer-events: auto; padding: 28px 22px 24px; }
  .why-card.w2 { transform: rotate(.6deg) !important; } .why-card.w3 { transform: rotate(-.6deg) !important; }
  .why-dog { position: relative; right: auto; bottom: auto; margin: 28px 0 0 auto; width: 120px; } .bubble-why, .why-dots, .why-paws { display: none; }
}
@media (prefers-reduced-motion: reduce) { .why-ring path, .why-arrow path { animation: none; stroke-dashoffset: 0; } }

/* v9: Humphrey lives bottom-left under the big WHY (never over the note), his bubble sits to his right */
.why-dog { right: auto; left: clamp(80px, 12vw, 190px); bottom: 7vh; width: clamp(90px, 17vh, 170px); }
.bubble-why { right: auto; left: 92%; bottom: 62%; }
.why-dots { bottom: 3vh; }
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .why-stage { padding: 0 clamp(24px, 6vw, 96px) 0 clamp(70px, 11vw, 150px); }
  .why-cards { display: grid; }
  .why-card { grid-area: auto; }
}
@media (max-width: 820px) { .why-card .doodle { width: 42px; height: 42px; top: 12px; right: 14px; } .why-card .q { margin-bottom: 8px; } }

/* v10: the "(go on, ask)" note reads cleanly: no inherited tight spacing, a real line height */
.why-big .why-note { letter-spacing: 0; line-height: 1.2; font: 700 clamp(1.05rem, 1.7vw, 1.5rem)/1.2 var(--display); font-style: normal; color: var(--cobalt); text-shadow: 0 1px 0 rgba(255,255,255,.8); right: 0; bottom: -40%; }
.why-cta { display: inline-block; justify-self: start; margin-top: 8px; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 600; padding: 12px 22px; border-radius: 12px; min-height: 44px; transform: rotate(-1.5deg); box-shadow: 4px 5px 0 rgba(20,17,15,.25); }
.why-cta:hover { transform: rotate(0) translateY(-2px); }