/* Kapers product-first system — bright, legible, behavior-led. */
:root {
  --pf-paper: #f7f4ea;
  --pf-paper-2: #eee9dc;
  --pf-ink: #17201b;
  --pf-muted: #59645d;
  --pf-line: rgba(23, 32, 27, .16);
  --pf-green: #406b4d;
  --pf-green-soft: #dce8d9;
  --pf-gold: #bd8740;
  --kris-blue: #5269df;
  --kris-violet: #7b62db;
  --kris-mint: #69c8a4;
  --kris-amber: #d89945;
  --pf-shadow: 0 28px 80px rgba(36, 43, 37, .16);
  --pf-radius: 18px;
  --pf-ease: cubic-bezier(.22, 1, .36, 1);
}

body.page-product { background: var(--pf-paper); color: var(--pf-ink); }
html { scroll-padding-top: 9rem; }
body.page-product::after { opacity: .025; }
.pf-shell { width: min(100% - clamp(2rem, 7vw, 8rem), 1500px); margin-inline: auto; }
.pf-label { font: 600 .66rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pf-muted); }
.pf-status { display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: .4rem .7rem; border: 1px solid currentColor; border-radius: 999px; font: 600 .63rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pf-status::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }

.product-nav { position: sticky; inset: 0 0 auto; z-index: 60; background: rgba(247,244,234,.9); border-bottom: 1px solid var(--pf-line); backdrop-filter: blur(18px); }
.product-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 5rem; }
.product-nav .wordmark { font: 400 2rem/1 var(--serif); text-decoration: none; letter-spacing: -.035em; }
.product-nav .wordmark i { color: var(--pf-green); font-style: normal; }
.product-nav nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.8rem); }
.product-nav nav a, .product-nav__cta { color: var(--pf-muted); text-decoration: none; font: 650 .68rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.product-nav nav a { min-height: 2.75rem; display: grid; place-items: center; border-bottom: 1px solid transparent; }
.product-nav nav a:hover, .product-nav nav a[aria-current='page'] { color: var(--pf-ink); border-color: var(--pf-green); }
.product-nav__cta { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .75rem 1rem; border: 1px solid var(--pf-ink); color: var(--pf-ink); }
.product-nav__cta:hover { background: var(--pf-ink); color: var(--pf-paper); }

.pf-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.7rem; min-height: 3.25rem; padding: .85rem 1rem; border: 1px solid var(--pf-ink); background: transparent; color: var(--pf-ink); text-decoration: none; cursor: pointer; font: 650 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s, transform .2s var(--pf-ease); }
.pf-button:hover { background: var(--pf-ink); color: var(--pf-paper); }
.pf-button:active { transform: translateY(1px); }
.pf-button--green { background: var(--pf-green); border-color: var(--pf-green); color: white; }
.pf-button--soft { border-color: var(--pf-line); background: rgba(255,255,255,.55); }

.pf-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(920px, calc(100svh - 5rem)); padding-block: clamp(4rem, 8vh, 7rem); display: grid; align-items: center; background: linear-gradient(135deg, #f7f4ea 0 42%, #e5ebe2 78%, #eef0e7 100%); }
.pf-hero__world { position: absolute; z-index: -2; inset: 4% -6% 0 28%; display: grid; place-items: center; opacity: .2; mix-blend-mode: multiply; pointer-events: none; }
.pf-hero__world img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(.82) contrast(.95); }
.pf-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(64,107,77,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(64,107,77,.07) 1px, transparent 1px); background-size: 7.5vw 7.5vw; mask-image: linear-gradient(90deg, rgba(0,0,0,.15), #000); }
.pf-hero__grid { display: grid; grid-template-columns: minmax(22rem,.74fr) minmax(38rem,1.45fr); gap: clamp(3rem, 6vw, 7rem); align-items: center; }
.pf-hero__copy { position: relative; z-index: 4; max-width: 38rem; }
.pf-hero h1 { margin-top: 1.2rem; max-width: 11ch; font: 400 clamp(4.5rem, 8vw, 8.6rem)/.82 var(--serif); letter-spacing: -.055em; }
.pf-hero h1 em { color: var(--pf-green); font-weight: 400; }
.pf-hero__deck { max-width: 36rem; margin-top: 2rem; color: #3e4b43; font-size: clamp(1.08rem, 1.35vw, 1.35rem); line-height: 1.48; }
.pf-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.3rem; }
.pf-hero__meta { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--pf-line); display: flex; gap: 1.2rem; color: var(--pf-muted); font: .63rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

.constellation { position: relative; min-height: 650px; perspective: 1500px; }
.product-plane { position: absolute; overflow: hidden; background: #f8f4e9; border: 1px solid rgba(23,32,27,.22); box-shadow: var(--pf-shadow); }
.product-plane img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.product-plane--desktop { inset: 5% 5% 14% 0; border-radius: 16px; transform: rotateY(-4deg) rotateX(1deg); transform-origin: center; }
.product-plane--garden { z-index: 3; right: 0; bottom: 2%; width: 29%; aspect-ratio: 390/844; border-radius: 36px; border: 7px solid #f5f1e6; }
.product-plane--kris { z-index: 4; right: 22%; top: 0; width: 25%; aspect-ratio: 368/800; border-radius: 34px; border: 7px solid #f5f4fb; }
.product-tag { position: absolute; z-index: 8; padding: .55rem .68rem; background: rgba(255,255,255,.92); border: 1px solid var(--pf-line); box-shadow: 0 8px 24px rgba(23,32,27,.08); font: 600 .58rem/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.product-tag--garden { left: 2%; bottom: 8%; color: var(--pf-green); }
.product-tag--kris { right: 2%; top: 8%; color: var(--kris-blue); }
.js .constellation [data-arrival] { opacity: 0; animation: pf-arrive .72s var(--pf-ease) forwards; }
.js .constellation [data-arrival='2'] { animation-delay: .22s; }
.js .constellation [data-arrival='3'] { animation-delay: .4s; }
.js .constellation [data-arrival='4'] { animation-delay: .62s; }
@keyframes pf-arrive { from { opacity: 0; transform: translate3d(0,32px,0); } to { opacity: 1; } }
.js .product-plane--desktop[data-arrival] { animation-name: pf-arrive-desktop; }
@keyframes pf-arrive-desktop { from { opacity:0; transform: translate3d(0,34px,0) rotateY(-4deg) rotateX(1deg); } to { opacity:1; transform: rotateY(-4deg) rotateX(1deg); } }

.pf-section { padding-block: clamp(6rem, 12vw, 11rem); border-top: 1px solid var(--pf-line); }
.pf-section__head { display: grid; grid-template-columns: minmax(15rem,.55fr) minmax(24rem,1fr); gap: clamp(2rem,7vw,8rem); margin-bottom: clamp(3rem,7vw,6rem); }
.pf-section__head h2, .route-hero h1 { font: 400 clamp(3.5rem, 7vw, 7.3rem)/.88 var(--serif); letter-spacing: -.045em; }
.pf-section__head h2 em, .route-hero h1 em { color: var(--pf-green); font-weight: 400; }
.pf-section__intro { align-self: end; max-width: 47rem; color: var(--pf-muted); font-size: clamp(1.05rem,1.4vw,1.3rem); line-height: 1.55; }

.garden-chapter { background: #f2efe4; }
.story-grid { display: grid; grid-template-columns: minmax(15rem,.35fr) minmax(38rem,1fr); gap: clamp(2rem,5vw,5rem); align-items: start; }
.story-copy { position: sticky; top: 8rem; }
.story-copy h3 { margin: .8rem 0 1.2rem; font: 400 clamp(2.2rem,4vw,4.4rem)/.93 var(--serif); letter-spacing: -.03em; }
.story-copy p { color: var(--pf-muted); max-width: 31rem; }
.story-note { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--pf-line); color: var(--pf-muted); font: .64rem/1.6 var(--mono); }
.story-controls { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.6rem; }
.story-controls button { min-height: 2.8rem; padding: .65rem .8rem; border: 1px solid var(--pf-line); background: transparent; color: var(--pf-muted); cursor: pointer; font: 600 .63rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.story-controls button[aria-selected='true'] { background: var(--pf-ink); color: white; border-color: var(--pf-ink); }
.state-stage { position: relative; overflow: hidden; min-height: clamp(420px, 55vw, 760px); background: #e3dfd2; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); }
.state-panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateX(3%); transition: opacity .34s ease, transform .52s var(--pf-ease); }
.state-panel[aria-hidden='false'] { opacity: 1; pointer-events: auto; transform: none; }
.state-panel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.state-caption { position: absolute; z-index: 3; inset: auto 1rem 1rem; display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; background: rgba(247,244,234,.92); border: 1px solid var(--pf-line); color: var(--pf-muted); font: .6rem/1.35 var(--mono); }

.mobile-story { margin-top: clamp(5rem,10vw,10rem); display: grid; grid-template-columns: minmax(26rem,1fr) minmax(18rem,.48fr); gap: clamp(2rem,7vw,7rem); align-items: center; }
.mobile-stage { position: relative; width: min(100%, 440px, calc(78vh * .462)); aspect-ratio: 390/844; margin-inline: auto; overflow: hidden; border: 9px solid #f9f7f0; border-radius: 46px; background: #f3eee0; box-shadow: var(--pf-shadow); touch-action: pan-y; }
.mobile-stage .state-panel img { object-fit: cover; object-position: top; }
.mobile-copy h3 { font: 400 clamp(2.8rem,5vw,5.5rem)/.9 var(--serif); letter-spacing: -.04em; }
.mobile-copy p { max-width: 33rem; margin-top: 1.2rem; color: var(--pf-muted); font-size: 1.08rem; }

.import-chapter { background: #e4ece2; }
.import-demo { display: grid; grid-template-columns: minmax(20rem,.7fr) minmax(28rem,1fr); gap: clamp(2rem,6vw,7rem); align-items: center; }
.import-copy h2 { margin: .9rem 0 1.2rem; font: 400 clamp(3.4rem,6vw,6.8rem)/.88 var(--serif); letter-spacing: -.045em; }
.import-copy p { max-width: 40rem; color: var(--pf-muted); font-size: 1.12rem; }
.import-machine { padding: clamp(1.3rem,3vw,2.5rem); background: rgba(255,255,255,.62); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); }
.import-file { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border: 1px solid var(--pf-line); }
.import-file__icon { display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1; background: var(--pf-green-soft); color: var(--pf-green); font: 700 .7rem var(--mono); }
.import-file b, .import-file span { display: block; }
.import-file span { color: var(--pf-muted); font: .67rem var(--mono); }
.import-steps { display: grid; margin: 1.2rem 0; }
.import-step { display: grid; grid-template-columns: 2rem 1fr auto; gap: .8rem; align-items: center; min-height: 3.6rem; padding: .65rem 0; border-top: 1px solid var(--pf-line); color: var(--pf-muted); }
.import-step i { display: grid; place-items: center; width: 1.65rem; aspect-ratio: 1; border: 1px solid var(--pf-line); border-radius: 50%; font: .6rem var(--mono); font-style: normal; }
.import-step span { opacity: .45; font: .65rem var(--mono); }
.import-step.is-active, .import-step.is-complete { color: var(--pf-ink); }
.import-step.is-complete i { background: var(--pf-green); border-color: var(--pf-green); color: white; }
.import-step.is-active span { opacity: 1; color: var(--pf-green); }
.import-result { min-height: 3rem; padding: .9rem 0 0; border-top: 1px solid var(--pf-line); color: var(--pf-green); font: .7rem/1.5 var(--mono); }

.kris-chapter { background: linear-gradient(145deg, #f5f5fb, #e9ecfb 52%, #edf7f3); }
.kris-chapter .pf-label, .kris-chapter h2 em { color: var(--kris-blue); }
.kris-grid { display: grid; grid-template-columns: minmax(20rem,.62fr) minmax(34rem,1fr); gap: clamp(3rem,8vw,9rem); align-items: center; }
.kris-copy h2 { margin: 1rem 0 1.4rem; font: 400 clamp(3.8rem,7vw,7.6rem)/.86 var(--serif); letter-spacing: -.05em; }
.kris-copy > p { max-width: 41rem; color: #5a6175; font-size: 1.15rem; }
.kris-flow { display: grid; grid-template-columns: minmax(16rem,.55fr) minmax(17rem,.55fr); gap: clamp(1rem,3vw,2.5rem); align-items: center; }
.kris-device { position: relative; width: min(100%, 390px); aspect-ratio: 368/800; overflow: hidden; border: 8px solid rgba(255,255,255,.9); border-radius: 43px; background: #f8f8fc; box-shadow: 0 28px 80px rgba(71,79,136,.2); }
.kris-device .state-panel img { object-fit: cover; object-position: top; }
.kris-flow__controls { display: grid; gap: .5rem; }
.kris-flow__controls button { min-height: 3.25rem; padding: .8rem 1rem; text-align: left; border: 1px solid rgba(82,105,223,.22); background: rgba(255,255,255,.56); color: #555e78; cursor: pointer; }
.kris-flow__controls button[aria-selected='true'] { background: var(--kris-blue); color: white; border-color: var(--kris-blue); }
.kris-flow__receipt { margin-top: 1rem; padding: 1rem; border-left: 3px solid var(--kris-mint); background: rgba(255,255,255,.66); color: #586178; font-size: .85rem; }
.kris-execution { height: 100%; display: grid; place-content: center; gap: 1rem; padding: 2rem; text-align: center; background: radial-gradient(circle at 50% 35%, rgba(105,200,164,.26), transparent 34%), #f5f6fb; color: #323953; }
.kris-execution i { width: 3rem; aspect-ratio: 1; margin-inline: auto; border: 2px solid rgba(82,105,223,.2); border-top-color: var(--kris-blue); border-radius: 50%; animation: kris-confirm 1s linear infinite; }
.kris-execution small { font: .6rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--kris-blue); }
.kris-execution h3 { font: 400 2.2rem/1 var(--serif); }
.kris-execution p { color: #68708a; font-size: .9rem; }
@keyframes kris-confirm { to { transform: rotate(1turn); } }

.reset-demo { margin-top: 4rem; display: grid; grid-template-columns: minmax(18rem,.42fr) minmax(25rem,1fr); gap: clamp(2rem,6vw,6rem); align-items: center; }
.reset-demo__copy h3 { margin: .8rem 0 1rem; font: 400 clamp(2.8rem,5vw,5rem)/.9 var(--serif); }
.reset-demo__copy p { color: #5a6175; }
.reset-stage { position: relative; min-height: 480px; overflow: hidden; border: 1px solid rgba(82,105,223,.18); border-radius: var(--pf-radius); background: rgba(255,255,255,.64); box-shadow: 0 24px 70px rgba(71,79,136,.14); }
.reset-surface { height: 100%; padding: clamp(1.5rem,4vw,3rem); display: grid; align-content: center; gap: 1rem; }
.reset-surface small { color: var(--kris-blue); font: .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.reset-surface h4 { font: 400 clamp(2rem,4vw,3.8rem)/.94 var(--serif); }
.capacity-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.capacity-row span, .reset-proposal { padding: 1rem; border: 1px solid rgba(82,105,223,.18); border-radius: 14px; background: rgba(255,255,255,.72); }
.capacity-row span:nth-child(2) { background: var(--kris-blue); color: white; }
.reset-proposal { display: grid; grid-template-columns: 2rem 1fr auto; gap: .8rem; align-items: center; }
.reset-proposal i { color: var(--kris-blue); font-style: normal; }
.reset-proposal b,.reset-proposal span { display:block; }
.reset-proposal span { color:#717894; font-size:.75rem; }

.widget-chapter { background: #f1f3f9; }
.widget-world { position: relative; min-height: 650px; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,6vw,7rem); align-items: center; }
.widget-copy h2 { margin: .9rem 0 1.2rem; max-width: 8ch; font: 400 clamp(3.8rem,7vw,7.4rem)/.86 var(--serif); letter-spacing: -.045em; }
.widget-copy p { max-width: 34rem; color: var(--pf-muted); }
.widget-contexts { position: relative; min-height: 560px; }
.device-context { position: absolute; border: 1px solid rgba(82,105,223,.18); background: rgba(255,255,255,.55); box-shadow: 0 20px 60px rgba(65,73,112,.13); transition: transform .7s var(--pf-ease), opacity .5s; }
.device-context--phone { inset: 2% auto 0 4%; width: 46%; border-radius: 38px; }
.device-context--mac { inset: 20% 0 auto auto; width: 67%; aspect-ratio: 1.45; border-radius: 16px; }
.widget-card { position: absolute; z-index: 3; padding: 1rem; border: 1px solid rgba(82,105,223,.18); border-radius: 19px; background: rgba(250,250,255,.94); box-shadow: 0 16px 40px rgba(65,73,112,.13); color: #29304f; }
.widget-card small { display: block; color: #757e9d; font: .57rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.widget-card b { display: block; margin-top: .45rem; font-size: .9rem; }
.widget-card span { display: block; margin-top: .2rem; color: #69718e; font-size: .72rem; }
.widget-card--next { left: 8%; top: 12%; width: 38%; }
.widget-card--today { left: 8%; top: 42%; width: 38%; }
.widget-card--lock { left: 13%; bottom: 10%; width: 28%; border-radius: 999px; }
.widget-card--mac { right: 7%; top: 30%; width: 44%; }
.widget-card--capture { right: 18%; bottom: 17%; width: 28%; }
.js .widget-contexts:not(.is-assembled) .widget-card { opacity: .72; transform: translateY(12px); }
.js .widget-contexts:not(.is-assembled) .widget-card--next { opacity: 1; box-shadow: 0 20px 52px rgba(65,73,112,.2); }

.systems-chapter { background: var(--pf-paper); }
.system-index { border-top: 1px solid var(--pf-line); }
.system-row { display: grid; grid-template-columns: 4rem minmax(15rem,.55fr) 1fr auto; gap: clamp(1rem,3vw,3rem); align-items: center; min-height: 9rem; padding-block: 1.4rem; border-bottom: 1px solid var(--pf-line); text-decoration: none; }
.system-row > span { color: var(--pf-muted); font: .62rem var(--mono); }
.system-row h3 { font: 400 clamp(2rem,3vw,3.4rem)/1 var(--serif); }
.system-row p { max-width: 42rem; color: var(--pf-muted); }
.system-row i { font-style: normal; font-size: 1.3rem; transition: transform .25s var(--pf-ease); }
.system-row:hover i { transform: translate(4px,-4px); }

.world-interlude { background: #e9e4d6; }
.world-interlude__grid { display: grid; grid-template-columns: minmax(18rem,.5fr) minmax(30rem,1fr); gap: clamp(2rem,6vw,7rem); align-items: center; }
.world-interlude h2 { margin: .8rem 0 1rem; font: 400 clamp(3.2rem,6vw,6.2rem)/.9 var(--serif); letter-spacing: -.04em; }
.world-interlude p { max-width: 34rem; color: var(--pf-muted); }
.world-frame { min-height: 660px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--pf-line); background: #e1dbc9; }
.world-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

.capability-chapter { background: #d9e7d7; }
.capability-chapter h2 { max-width: 12ch; font: 400 clamp(3.6rem,7vw,7.2rem)/.88 var(--serif); letter-spacing: -.045em; }
.capability-line { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 3rem 0; color: var(--pf-green); font: 650 clamp(.78rem,1vw,1rem) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.capability-line span:not(:last-child)::after { content: '→'; margin-left: 1.1rem; color: var(--pf-muted); }
.capability-proof { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--pf-line); }
.capability-proof a { min-height: 8rem; padding: 1.2rem .8rem; border-right: 1px solid var(--pf-line); text-decoration: none; color: var(--pf-muted); font-size: .88rem; }
.capability-proof b { display: block; margin-bottom: .8rem; color: var(--pf-ink); font: 400 1.7rem var(--serif); }
.pf-contact { padding-block: clamp(6rem,12vw,11rem); background: #bed2b8; }
.pf-contact h2 { max-width: 9ch; font: 400 clamp(4.5rem,9vw,9.5rem)/.8 var(--serif); letter-spacing: -.055em; }
.pf-contact__foot { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-top: 3rem; }
.pf-contact p { max-width: 40rem; color: #455448; }
.pf-contact a.email { font: 400 clamp(1.4rem,2.8vw,3rem) var(--serif); text-decoration-thickness: 1px; text-underline-offset: .3rem; }

.product-footer { padding-block: 3rem; background: #eef0e7; border-top: 1px solid var(--pf-line); }
.product-footer__grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; }
.product-footer .wordmark { font: 400 2rem var(--serif); text-decoration: none; }
.product-footer nav { display: flex; flex-wrap: wrap; justify-content: end; gap: 1.2rem; }
.product-footer nav a { color: var(--pf-muted); font: .65rem var(--mono); text-transform: uppercase; }
.product-footer p { margin-top: 1rem; color: var(--pf-muted); font-size: .8rem; }

.route-hero { position: relative; overflow: hidden; padding-block: clamp(6rem,12vw,11rem); background: linear-gradient(135deg,#f7f4ea,#e5ebe2); border-bottom: 1px solid var(--pf-line); }
.route-hero--kris { background: linear-gradient(135deg,#f7f6fb,#e5e9fa 64%,#e8f4ee); }
.route-hero__grid { display: grid; grid-template-columns: minmax(22rem,.8fr) minmax(25rem,1fr); gap: clamp(3rem,8vw,9rem); align-items: end; }
.route-hero h1 { max-width: 10ch; }
.route-hero__copy > p { max-width: 45rem; color: var(--pf-muted); font-size: clamp(1.08rem,1.5vw,1.35rem); }
.route-hero__copy .pf-actions { margin-top: 1.8rem; }
.route-hero--with-preview { padding-bottom: 0; }
.route-hero__peek { position: relative; min-height: 280px; margin-top: clamp(2rem,5vw,4rem); overflow: hidden; border: 1px solid var(--pf-line); border-bottom: 0; background: rgba(255,255,255,.48); box-shadow: 0 20px 60px rgba(36,43,37,.1); }
.route-hero__peek > img:first-child { width: 78%; height: 100%; min-height: 280px; object-fit: cover; object-position: top left; }
.route-hero__peek > img:last-child { position: absolute; right: 6%; top: 10%; width: min(22%,230px); max-height: 420px; object-fit: cover; object-position: top; border: 6px solid rgba(255,255,255,.92); border-radius: 30px; box-shadow: var(--pf-shadow); }
.route-hero__peek--phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(1rem,4vw,3rem); padding: 2rem; min-height: 460px; }
.route-hero__peek--phones > img:first-child,
.route-hero__peek--phones > img:last-child { position: static; width: min(30%,260px); height: 420px; min-height: 0; max-height: none; object-fit: cover; object-position: top; border: 6px solid rgba(255,255,255,.92); border-radius: 30px; box-shadow: var(--pf-shadow); }
.pf-section,[id] { scroll-margin-top: 9rem; }
.route-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--pf-line); border: 1px solid var(--pf-line); }
.route-card { background: var(--pf-paper); padding: clamp(1.4rem,3vw,2.8rem); }
.route-card--wide { grid-column: 1/-1; }
.route-card h2, .route-card h3 { margin-top: .8rem; font: 400 clamp(2rem,4vw,4rem)/.94 var(--serif); }
.route-card p { margin-top: 1rem; color: var(--pf-muted); }
.route-media { margin-top: 2rem; overflow: hidden; border: 1px solid var(--pf-line); border-radius: 12px; background: var(--pf-paper-2); }
.route-media img { width: 100%; height: auto; }

@media (max-width: 1100px) {
  .pf-hero { min-height: auto; }
  .pf-hero__grid, .story-grid, .kris-grid { grid-template-columns: 1fr; }
  .pf-hero__copy { max-width: 48rem; }
  .pf-hero h1 { max-width: 9ch; }
  .constellation { min-height: 620px; }
  .story-copy { position: static; }
  .mobile-story { grid-template-columns: 1fr 1fr; }
  .world-interlude__grid, .widget-world { grid-template-columns: 1fr; }
  .widget-contexts { min-height: 600px; }
  .capability-proof { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  .pf-shell { width: min(100% - 2rem, 1500px); }
  .product-nav__inner { grid-template-columns: 1fr auto; min-height: 4.5rem; }
  .product-nav nav { order: 3; grid-column: 1/-1; overflow-x: auto; justify-content: space-between; border-top: 1px solid var(--pf-line); }
  .product-nav nav a { min-width: max-content; }
  .product-nav__cta { font-size: .58rem; }
  .pf-hero { padding-top: 3rem; }
  .pf-hero h1 { font-size: clamp(4rem,18vw,6.2rem); }
  .pf-hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .pf-hero__world { inset: 18% -35% 5% 5%; opacity: .12; }
  .constellation { min-height: 490px; }
  .product-plane--desktop { inset: 5% 0 26% 0; transform: none; }
  .product-plane--garden { width: 35%; right: 3%; bottom: 0; border-width: 5px; border-radius: 25px; }
  .product-plane--kris { width: 32%; right: 32%; top: 4%; border-width: 5px; border-radius: 24px; }
  .product-tag--garden { bottom: 18%; }
  .pf-section__head, .route-hero__grid, .import-demo, .mobile-story, .kris-flow, .route-grid { grid-template-columns: 1fr; }
  .pf-section__head h2, .route-hero h1 { font-size: clamp(3.5rem,16vw,6rem); }
  .story-grid { grid-template-columns: 1fr; }
  .state-stage { min-height: 52vw; border-radius: 10px; }
  .story-grid .state-stage { min-height: 360px; }
  .story-grid .state-panel img { width: 800px; max-width: none; height: 100%; object-fit: cover; }
  .story-grid .state-panel[data-state='overview'] img,
  .story-grid .state-panel[data-state='accounts'] img { object-position: left top; }
  .story-grid .state-panel[data-state='transactions'] img { object-position: right top; }
  .story-grid .state-panel[data-state='plan'] img,
  .story-grid .state-panel[data-state='insights'] img { object-position: center top; }
  .mobile-story { display: flex; flex-direction: column-reverse; }
  .mobile-stage { width: min(88vw,390px); }
  .kris-device { width: min(82vw,368px); margin-inline: auto; }
  .reset-demo { grid-template-columns: 1fr; }
  .widget-world { min-height: 900px; }
  .widget-contexts { min-height: 570px; }
  .system-row { grid-template-columns: 2.4rem 1fr auto; }
  .system-row p { grid-column: 2/-1; }
  .world-frame { min-height: 70vh; }
  .capability-proof { grid-template-columns: 1fr; }
  .capability-proof a { min-height: auto; border-right: 0; border-bottom: 1px solid var(--pf-line); }
  .pf-contact__foot, .product-footer__grid { display: grid; }
  .product-footer nav { justify-content: start; }
  .route-card--wide { grid-column: auto; }
  .route-hero { padding-top: 4.2rem; }
  .route-hero__peek { min-height: 230px; margin-top: 2rem; }
  .route-hero__peek > img:first-child { width: 100%; min-height: 230px; }
  .route-hero__peek > img:last-child { width: 28%; right: 5%; top: 12%; border-width: 4px; border-radius: 20px; }
  .route-hero__peek--phones { min-height: 340px; padding: 1.25rem; }
  .route-hero__peek--phones > img:first-child,
  .route-hero__peek--phones > img:last-child { width: min(43%,180px); height: 300px; min-height: 0; border-width: 4px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .constellation [data-arrival] { opacity: 1; animation: none; }
  .product-plane--desktop { transform: none; }
  .state-panel, .device-context, .widget-card { transition: none !important; }
  .kris-execution i { animation: none; }
  .js .widget-contexts:not(.is-assembled) .widget-card { opacity: 1; transform: none; }
}