:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }
::selection { background: #e5bf67; color: var(--ink); }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 5px; }
section[id] { scroll-margin-top: 28px; }
.button, .header-cta, .text-link, .walk-presets button { transition: transform 160ms var(--ease-out); }
.button span, .text-link span, .header-cta span { display: inline-block; transition: transform 200ms var(--ease-out); }
.button:active, .walk-presets button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-3px); }
  .button:hover span, .header-cta:hover span { transform: translateX(4px); }
  .text-link:hover span { transform: translate(2px, 2px); }
  .walk-presets button:hover { transform: translateY(-2px); }
}
.reveal-pending { opacity: 0; transform: translateY(24px); }
.reveal { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
.hero-art.is-visible .steps-card { animation: card-arrive 800ms var(--ease-out) both; animation-delay: 180ms; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(20px) rotate(-4deg); } to { opacity: 1; transform: none; } }
.hero-art.is-visible .sun { animation: sunrise 1400ms var(--ease-out) both; }
@keyframes sunrise { from { opacity: .3; transform: translateY(35px) scale(.9); } to { opacity: 1; transform: none; } }
.manifesto em { color: #d9e7ad; }
.walk-demo { max-width: 1240px; padding: 72px 48px; background: #edf1e7; border: 1px solid #dce4d4; border-radius: 36px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 65px; align-items: center; margin-bottom: 90px; }
.walk-demo h2 { font-size: clamp(42px, 4.5vw, 64px); letter-spacing: -3px; }
.walk-demo-copy > p:not(.eyebrow) { color: #52624f; line-height: 1.6; max-width: 340px; margin: 24px 0 0; }
.walk-demo-copy .demo-note { font: 11px/1.7 'DM Mono', monospace; }
.walk-playground { background: #fffefa; border-radius: 26px; padding: 28px; box-shadow: 0 16px 40px #29422c09; min-width: 0; }
.walk-result { display: flex; justify-content: space-between; align-items: center; }
.walk-result > div { display: flex; flex-direction: column; gap: 5px; }
.walk-result .eyebrow { margin: 0; font-size: 10px; letter-spacing: 1px; }
.walk-result strong { font-size: clamp(38px, 4vw, 54px); letter-spacing: -2.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.walk-result > div:last-child strong { color: var(--moss); }
.walk-result > div > span:last-child { font-size: 12px; color: var(--muted); }
.conversion-arrow { color: #8b9c70; font-size: 32px; }
.walking-scene { height: 180px; position: relative; margin: 22px 0; overflow: hidden; background: #eff3e9; border-radius: 16px; }
.scene-sun { position: absolute; right: 22px; top: 20px; width: 35px; height: 35px; border-radius: 50%; background: #edce85; }
.scene-caption { position: absolute; top: 25px; left: 18px; max-width: 160px; font: italic 17px/1.3 'Playfair Display', serif; color: #59684a; }
.trail { position: absolute; bottom: 45px; left: 24px; right: 24px; height: 4px; background: #d2ddc3; border-radius: 5px; overflow: hidden; }
.trail-fill { height: 100%; background: var(--moss); transform-origin: left; transform: scaleX(.16667); transition: transform 250ms var(--ease-out); }
.pip-traveler { position: absolute; left: 24px; bottom: 55px; width: 42px; text-align: center; transition: transform 250ms var(--ease-out); }
.pip-traveler img { display: block; width: 42px; height: 42px; border-radius: 14px; box-shadow: 0 5px 12px #285c4620; }
.pip-traveler span { display: block; font: 10px 'DM Mono', monospace; margin-top: 5px; }
.trail-start, .trail-end { position: absolute; bottom: 19px; font: 9px 'DM Mono', monospace; color: #52624f; }
.trail-start { left: 18px; } .trail-end { right: 18px; }
.walk-playground label { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; }
.walk-playground label span { color: var(--muted); font-size: 10px; font-weight: 500; }
#walk-steps { width: 100%; margin: 10px 0 14px; height: 32px; accent-color: var(--moss); cursor: pointer; }
.walk-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.walk-presets button { font: 600 11px/1.4 'DM Sans', sans-serif; border: 1px solid #d8dfd3; border-radius: 12px; background: transparent; padding: 12px 6px; color: var(--ink); cursor: pointer; min-height: 58px; }
.walk-presets button span { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; }
.walk-presets button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.walk-caption { font-size: 11px; text-align: center; color: var(--muted); margin: 18px 0 0; min-height: 28px; }
@media (max-width: 1200px) and (min-width: 801px) { .section, .closing { padding-left: 32px; padding-right: 32px; } .walk-demo { margin-left: 24px; margin-right: 24px; gap: 30px; } }
@media (max-width: 800px) {
  .walk-demo { display: block; margin: 0 16px 35px; padding: 36px 18px 18px; border-radius: 26px; }
  .walk-demo-copy { padding: 0 6px 28px; }
  .walk-playground { padding: 20px 16px; }
  .hero-actions { flex-wrap: wrap; gap: 20px; }
  .hero-art { min-height: 430px; }
  .phone-frame { margin-left: auto; margin-right: auto; }
  .section h2, .closing h2 { letter-spacing: -3px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: opacity 160ms ease; transition-delay: 0ms; }
  .hero-art.is-visible .sun, .hero-art.is-visible .steps-card { animation: none; }
  .button, .header-cta, .text-link, .walk-presets button, .button span, .text-link span, .header-cta span, .pip-traveler, .trail-fill { transition: none; }
  .button:hover, .button:active, .walk-presets button:hover, .walk-presets button:active, .button:hover span, .header-cta:hover span, .text-link:hover span { transform: none; }
}
/* Let the illustration fill its frame without a hard edge across the sky. */
.hero-art > img { width: 100%; height: 100%; right: 0; bottom: 0; object-fit: cover; object-position: 65% center; }
.hero-art .sun, .hero-art .breeze { display: none; }
.pip-traveler { bottom: 51px; }
.pip-traveler img { width: 48px; height: 58px; object-fit: contain; border-radius: 0; box-shadow: none; }
.pip-traveler span { display: none; }
.walk-landscape { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#eef1df, #f6eed7); }
.landscape-sun { position: absolute; width: 110px; height: 110px; border-radius: 50%; background: #edce85; top: 12%; right: 15%; box-shadow: 0 0 0 22px #edce8518; }
.hill { position: absolute; width: 150%; height: 48%; border-radius: 50% 50% 0 0; }
.hill-far { background: #c9d4b5; bottom: -3%; left: -40%; transform: rotate(-12deg); }
.hill-near { background: #a7b996; bottom: -22%; right: -35%; transform: rotate(12deg); }
.walking-path { position: absolute; width: 140%; height: 23%; background: #e8dab7; bottom: -4%; left: -15%; border-radius: 50%; transform: rotate(-10deg); }
.hero-walker { position: absolute; width: min(82%, 450px); aspect-ratio: 420 / 476; bottom: 12%; left: 9%; z-index: 2; }
.hero-walker > img { width: 100%; height: 100%; object-fit: contain; }
.character .rig-source { visibility: hidden; }
.companion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pip-traveler { width: 48px; height: 58px; }
.pip-motion-toggle { position: absolute; top: 20px; left: 20px; z-index: 4; min-height: 44px; border: 1px solid #c4ceb8; border-radius: 30px; background: #fffaf0d9; padding: 10px 16px; color: var(--ink); font: 500 11px 'DM Mono', monospace; cursor: pointer; }
@media(max-width:800px) { .hero-walker { width: 77%; left: 11%; bottom: 14%; } }
.hero-walker::before { content: ''; position: absolute; left: 34%; bottom: 6%; width: 43%; height: 3%; border-radius: 50%; background: #46503924; }