/* The opening journey is full bleed. The existing forms retain their reading width. */
body { background: #f5f1e8; }
body:has(#kn-app[data-screen="landing"]) { background: #fff; }
#kn-app[data-screen="landing"] { max-width: none; padding: 0; }
#kn-app[data-screen="landing"] .kn-product { max-width: none; border: 0; border-radius: 0; overflow: visible; position: relative; background: #fff; }
#kn-app[data-screen="landing"] .kn-header { position: absolute; z-index: 5; inset: 0 0 auto; padding: 26px 4.5vw; background: transparent; border: 0; }
#kn-app .kn-wordmark { font-family:var(--kn-font-ui); font-size: 32px; font-weight: 600; letter-spacing: -.075em; gap: 14px; }
#kn-app .kn-wordmark span { font-size: 8px; line-height: 1.6; letter-spacing: .15em; max-width: none; font-weight: 400; }
#kn-app[data-screen="landing"] .kn-header .kn-text-button { font-size: 12px; text-decoration: none; letter-spacing: .01em; }
#kn-app[data-screen="landing"] .kn-block { max-width: 760px; margin: 0 auto; padding: 64px 48px; background: #fff; }
#kn-app[data-screen="landing"] .kn-footer { max-width: 760px; margin: auto; }
#kn-app[data-screen="landing"] > .kn-test-bar { margin: 40px auto 18px; width: calc(100% - 32px); }

#kn-app .kn-journey { position: relative; height: 100svh; min-height: 650px; background: #33a1fa; isolation: isolate; }
#kn-app .kn-journey[data-enhanced="true"] { height: 690svh; }
#kn-app .kn-journey-stage { position: sticky; top: 0; height: 100svh; min-height: 650px; overflow: hidden; overflow: clip; background: #33a1fa; }
#kn-app .kn-journey-art, #kn-app .kn-journey-poster, #kn-journey-canvas, #kn-app .kn-journey-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
#kn-app .kn-journey-poster { object-fit: cover; object-position: center; transform: translateY(var(--journey-opening-offset, 24svh)); }
#kn-journey-canvas { display: block; opacity: 0; }
#kn-app .kn-journey[data-ready="true"] #kn-journey-canvas { opacity: 1; }
#kn-app .kn-journey[data-ready="true"] .kn-journey-poster { visibility: hidden; }
#kn-app .kn-journey[data-reduced-motion="true"] .kn-journey-film, #kn-app .kn-journey[data-compact="true"] .kn-journey-film, #kn-app .kn-journey[data-static="true"] .kn-journey-film { visibility: hidden; }
#kn-app .kn-journey-vignette { pointer-events: none; background: linear-gradient(0deg, #f7fbf3b5 0%, #f7fbf300 18%, #f7fbf300 90%, #f7fbf32b 100%); }
#kn-app .kn-journey-intro { position: absolute; z-index: 2; left: 50%; top: clamp(88px, 10svh, 116px); width: min(740px, 90%); text-align: center; transform: translateX(-50%); will-change: opacity, transform; }
#kn-app p.kn-journey-kicker, #kn-app .kn-journey-kicker { display: block; margin: 0 0 16px; color: #667066; font: 600 10px/1.5 var(--kn-font-ui); font-weight: 500; letter-spacing: .23em; }
#kn-app .kn-journey-intro .kn-journey-kicker { color: #172620; font-weight: 800; letter-spacing: .16em; }
#kn-app .kn-journey-intro h1 { margin: 0; font-family:var(--kn-font-ui); font-weight: 900; font-size: clamp(44px, min(5.4vw, 7.8svh), 76px); line-height: 1.04; letter-spacing: -.055em; text-transform: uppercase; color: #172620; }
#kn-app .kn-journey-intro h1 em { display: inline-block; margin-top: 12px; padding: .10em .22em .16em; border: 3px solid #172620; background: #fff07d; box-shadow: 6px 6px 0 #172620; font-size: .82em; font-style: normal; font-weight: 900; line-height: 1.05; letter-spacing: -.05em; color: #172620; transform: rotate(-1deg); }
#kn-app .kn-journey-description { color: #20362e; margin: 26px auto 0; font-size: 13px; font-weight: 600; line-height: 1.65; letter-spacing: .005em; }
#kn-app .kn-journey-ending { position: absolute; top: 42%; left: 50%; width: min(650px, 84%); transform: translate(-50%, 20px); text-align: center; opacity: 0; pointer-events: none; }
#kn-app .kn-journey-ending h2 { color: #29433b; font: 800 clamp(40px, 4.5vw, 66px)/1.09 var(--kn-font-ui); letter-spacing: -.045em; margin: 0; }
#kn-app .kn-journey-ending p { color: #576451; font-size: 14px; margin: 18px 0 0; }
#kn-app .kn-journey-bottom { position: absolute; z-index: 3; bottom: max(36px, env(safe-area-inset-bottom)); left: 4.5vw; right: 4.5vw; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#kn-app .kn-journey-scroll { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #213c31; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; text-shadow: 0 1px 3px #fffbed; pointer-events: none; }
#kn-app .kn-journey-scroll-arrow { display: block; filter: drop-shadow(0 1px 2px #fffbed); animation: kn-scroll-invitation 2s ease-in-out infinite; }
@keyframes kn-scroll-invitation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
#kn-app .kn-journey-stops { order: -1; display: flex; align-items: center; gap: 5px; }
#kn-app .kn-journey-stops button { display: grid; place-items: center; padding: 0; width: 36px; height: 44px; background: transparent; border: 0; }
#kn-app .kn-journey-stops button span { height: 2px; width: 22px; background: #46634745; transition: background .2s, width .2s; }
#kn-app .kn-journey-stops button[aria-current="step"] span { background: #29483d; width: 32px; }
#kn-app .kn-journey-skip { position: absolute; z-index: 3; right: 4.5vw; top: 34px; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #f7f1e6e8; border: 1px solid #e1d9c766; border-radius: 2px; color: #344c3f; font-size: 11px; text-decoration: none; opacity: 0; pointer-events: none; }
#kn-app .kn-journey-skip:focus-visible { opacity: 1 !important; pointer-events: auto; background: #f7f1e6; padding: 0 12px; }
#kn-app .kn-journey[data-phase]:not([data-phase="gate"]) .kn-journey-skip { opacity: 1; pointer-events: auto; }
#kn-app .kn-journey:not([data-enhanced="true"]) .kn-journey-stops { display: none; }
#kn-app .kn-journey[data-reduced-motion="true"], #kn-app .kn-journey[data-static="true"] { height: 100svh; }
#kn-app .kn-journey[data-reduced-motion="true"] .kn-journey-stops, #kn-app .kn-journey[data-static="true"] .kn-journey-stops { display: none; }
#kn-app .kn-journey[data-reduced-motion="true"] .kn-journey-scroll-arrow { animation: none; }

@media (max-width: 700px) {
  #kn-app[data-screen="landing"] .kn-header { padding: 22px 22px; }
  #kn-app .kn-wordmark { font-size: 29px; gap: 10px; }
  #kn-app .kn-wordmark span { font-size: 7px; }
  #kn-app[data-screen="landing"] .kn-header .kn-text-button { font-size: 11px; }
  #kn-app .kn-journey, #kn-app .kn-journey-stage { min-height: 600px; }
  #kn-app .kn-journey[data-enhanced="true"] { height: 610svh; }
  #kn-app .kn-journey-intro { top: 122px; width: calc(100% - 32px); }
  #kn-app .kn-journey-intro h1 { font-size: clamp(34px, 9.4vw, 64px); line-height: 1.04; }
  #kn-app .kn-journey-intro h1 em { margin-top: 10px; border-width: 2px; box-shadow: 4px 4px 0 #172620; }
  #kn-app p.kn-journey-kicker, #kn-app .kn-journey-kicker { font-size: 8px; letter-spacing: .2em; margin-bottom: 16px; }
  #kn-app .kn-journey-description { font-size: 12px; max-width: 290px; margin-top: 23px; }
  #kn-app .kn-journey-desktop-break { display: none; }
  #kn-app .kn-journey-bottom { bottom: max(28px, env(safe-area-inset-bottom)); left: 22px; right: 22px; }
  #kn-app .kn-journey-stops { gap: 2px; }
  #kn-app .kn-journey-stops button { width: 25px; }
  #kn-app .kn-journey-stops button span { width: 16px; }
  #kn-app .kn-journey-stops button[aria-current="step"] span { width: 24px; }
  #kn-app .kn-journey-scroll { font-size: 9px; }
  #kn-app .kn-journey-skip { right: 22px; top: 25px; font-size: 10px; }
  #kn-app .kn-journey-ending { top: 42%; width: 90%; }
  #kn-app .kn-journey-ending h2 { font-size: clamp(34px, 10vw, 50px); }
  #kn-app[data-screen="landing"] .kn-block { padding: 40px 24px; }
  #kn-app .kn-journey[data-reduced-motion="true"], #kn-app .kn-journey[data-static="true"] { height: 100svh; }
}
@media (max-width: 380px) {
  #kn-app .kn-journey-intro h1 { font-size: 32px; }
}
#kn-app .kn-journey[data-compact="true"] { height: 620px; min-height: 620px; }
#kn-app .kn-journey[data-compact="true"] .kn-journey-stage { height: 620px; min-height: 620px; position: relative; }
#kn-app .kn-journey[data-compact="true"] .kn-journey-stops { display: none; }
@media (max-height: 690px) and (min-width: 701px) {
  #kn-app .kn-journey, #kn-app .kn-journey-stage { min-height: 500px; }
  #kn-app .kn-journey-intro { top: 85px; }
  #kn-app .kn-journey-intro h1 { font-size: 50px; }
  #kn-app .kn-journey-description { font-size: 11px; margin-top: 12px; }
  #kn-app .kn-journey-bottom { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #kn-app .kn-journey[data-enhanced="true"] { height: 100svh; }
  #kn-app .kn-journey-stops { display: none; }
  #kn-app .kn-journey-scroll-arrow { animation: none; }
}