docs(landing): replace stray hero shadow with card aura, widen ask body

[youtalk]

Summary

Two visual issues on the docs landing page (docs/index.html):

1. Hero — stray shadow under the yokai cards. The .hero::after radial gradient (520×520, anchored bottom-right) floated unattached to anything on the page and read as a meaningless dark patch — especially on mobile, where it covered the empty band below the stacked cards.
2. "I built Mora for one kid I love." — narrow body, wasted right margin. The right column body had max-width:50ch inside a 1.4fr grid column, which left a noticeable unused gutter at common laptop widths.

Changes

Hero

• Removed .hero::after corner gradient
• Added .yokai-stack::before — a soft warm aura positioned behind the cards themselves, so the warmth reads as the cards' glow rather than a stray shadow

Ask section

• Rebalanced .ask-grid: 1.1fr 1.4fr (gap 80) → 0.85fr 1.6fr (gap 64)
• Bumped body max-width 50ch → 62ch
• Made the heading column position:sticky; top:96px so "I built Mora for one kid I love." anchors while the body scrolls past

Single-column collapse (≤1080px)

• .ask-grid collapses to grid-template-columns:1fr. At that point sticky on .col-left would float over the body as it scrolls past, so we disable sticky and clear the 62ch cap so the body fills the available width.

Mobile-specific (≤680px)

• Tightened .yokai-stack height 420 → 380px and adjusted card positions so there is no empty band below the cards
• Suppressed the aura on mobile (it would smear awkwardly across the narrow stack)

Test plan

• Verified visually at desktop width (~1280px) — aura sits behind the yokai cards, ask body fills the column
• Verified visually at mobile width — no stray dark band below the cards, single-column ask section reads at full width
• Reviewer eyeball check at intermediate (~1024px) viewport

[Copilot]

Pull request overview

Updates the docs landing page hero and “ask” section styling to remove an unanchored corner glow/shadow, add a card-anchored aura behind the yokai stack, and better utilize horizontal space in the “ask” body copy.

Changes:

• Remove .hero::after corner radial gradient and introduce .yokai-stack::before aura behind the cards (disabled on small screens).
• Rebalance .ask-grid columns/gap and widen right-column paragraph max width.
• Make the ask section’s left column sticky on larger viewports; disable sticky and width caps at narrower breakpoints.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

.yokai-card is declared twice back-to-back solely to set z-index: 1, which makes the CSS harder to maintain and easy to miss during future edits. Please fold the z-index into the existing .yokai-card{ ... } rule (or, if the intent is to apply only when the aura exists, consider targeting .yokai-stack .yokai-card).

Suggested change

	.yokai-card{z-index:1}
	.yokai-card{
	position:absolute;
	.yokai-card{
	position:absolute;
	z-index:1;

[Copilot]

The PR description says the sticky heading is disabled on mobile (≤680px), but the CSS disables it at @media (max-width:1080px) by setting .ask-grid .col-left{position:static}. If the sticky behavior is intended to apply on intermediate/tablet widths too, the PR description should be updated; otherwise, consider moving this override to the ≤680px breakpoint (or whichever breakpoint matches the intended behavior).

[youtalk]

Good catch on the inconsistency. The CSS breakpoint is intentional — 1080px is where .ask-grid itself collapses to grid-template-columns:1fr, so once the layout is single-column the sticky heading becomes awkward (it would float over the body as it scrolls). Disabling sticky at the same point the layout collapses is what we want.

The PR description was the wrong side of the inconsistency — I'll update it to say "≤1080px (single-column layout) — disable sticky" instead of "Mobile (≤680px)".