.mobile-welcome{display:none}
@media(max-width:820px){
  .v3 .variation-nav{display:none}
  .v3 .mobile-welcome{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:20px;min-height:100svh;padding:22px 26px max(27px,env(safe-area-inset-bottom));color:#fff9f0;background:radial-gradient(ellipse at 50% 32%,#7b443b40,transparent 65%),#4a2c2a}
  .welcome-brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:800 27px/1 var(--display);letter-spacing:-.045em}
  .welcome-brand img{border-radius:10px;width:35px;height:35px}
  .welcome-content{display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;text-align:center}
  .welcome-illustration{width:248px;height:202px;overflow:hidden;margin-bottom:23px;flex-shrink:0}
  .welcome-illustration img{width:248px;max-width:none;height:248px;transform:translateY(-30px);object-fit:contain}
  .welcome-content h1{font:800 clamp(31px,8.5vw,42px)/1.04 var(--display);letter-spacing:-.045em;margin:0;color:#fff9f0}
  .welcome-content h1 em{font-style:normal;color:var(--yellow)}
  .welcome-content>p{color:#e3cfc5;font-size:15px;line-height:1.55;font-weight:600;margin-top:20px;max-width:355px;text-wrap:pretty}
  .welcome-actions{display:grid;width:100%;max-width:370px;gap:13px}
  .welcome-actions a,.welcome-actions button{min-height:53px;display:flex;align-items:center;justify-content:center;border-radius:14px;font:900 15px/1.2 var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
  .welcome-download{gap:21px;color:#4a2c2a;background:var(--yellow);border:1px solid #f8d579;box-shadow:0 4px 0 #b58136}
  .welcome-platforms{display:flex;align-items:center;gap:8px}.welcome-platforms svg{width:23px;height:23px}.platform-divider{height:17px;width:1px;background:#4a2c2a40}
  .welcome-try{color:#fff4e5;border:1.5px solid #a27a67;background:#ffffff04;box-shadow:0 3px 0 #301c1a}
  .welcome-actions a:active,.welcome-actions button:active{transform:translateY(3px);box-shadow:none}
  .welcome-actions a:focus-visible,.welcome-actions button:focus-visible{outline:3px solid #fff;outline-offset:5px}

  body.v3.demo-locked{overflow:auto}
  .v3 .demo-shell{display:flex;position:relative;flex-direction:column;min-height:0;height:100dvh;overflow:hidden}
  .v3 .demo-nav{flex:0 0 66px;height:66px;width:calc(100% - 36px)}
  .v3 .demo-layout{flex:1;min-height:0;width:100%;height:auto;gap:0;padding:0 14px max(14px,env(safe-area-inset-bottom))}
  .v3 .demo-story,.v3 .demo-shell[data-step]:not([data-step=topic]) .demo-story{display:none}
  .v3 .phone-stage{flex:1;min-height:0;gap:14px;width:100%;display:flex;flex-direction:column}
  .v3 .try-head{flex-shrink:0;border:0;padding:0;text-align:center;display:block}
  .v3 .try-head .live-label{font-size:8px;margin-bottom:6px}
  .v3 .try-head h3{font-size:21px;margin-bottom:5px}.v3 .try-head h3 br{display:none}
  .v3 .try-head p{font-size:11px}.v3 .try-head small{display:none}
  .v3 .phone{flex:1;min-height:0;height:100%;max-height:680px;width:min(340px,calc(100vw - 38px));border-radius:44px}
  .v3 .demo-shell[data-step]:not([data-step=topic]) .try-head{display:none}
  .v3 .skip-demo{display:block}
}
@media(max-width:820px) and (max-height:730px){.v3 .mobile-welcome{padding-top:17px;gap:15px;padding-bottom:23px}.welcome-illustration{width:200px;height:160px;margin-bottom:16px}.welcome-illustration img{width:200px;height:200px;transform:translateY(-25px)}.welcome-content h1{font-size:32px}.welcome-content>p{font-size:14px;margin-top:14px}.welcome-actions a,.welcome-actions button{min-height:49px}}
@media(prefers-reduced-motion:reduce){.welcome-actions a,.welcome-actions button{transition:none}}
@media(max-width:820px){.v3 .phone{overscroll-behavior:auto}}
/* A continuous mobile landing, with the demo emerging as you scroll. */
@media(max-width:820px){
  body.v3{background:#4a2c2a}
  .v3 .mobile-welcome{background:#4a2c2a;padding-bottom:20px}
  .v3 .demo-shell{background:#4a2c2a;padding-top:18px;scroll-margin-top:12px}
  .v3 .demo-grain,.v3 .demo-shell::after{display:none}
  .v3 .demo-nav{flex:0 0 30px;height:30px;justify-content:flex-end;margin-bottom:8px}
  .v3 .demo-nav>.brand,.v3 .demo-nav .language-switcher{display:none}
  .v3 .skip-demo{padding:3px 0;border:0;border-radius:0;background:none;box-shadow:none;color:#d9bbb0;font-size:11px;text-decoration:underline;text-underline-offset:4px}
  .v3 .try-head{padding-bottom:8px}
  .v3 .try-head h3{font-size:24px;line-height:1.15;max-width:300px;margin:0 auto 10px}
  .v3 .try-head .live-label{margin-bottom:12px;letter-spacing:.16em}
  .v3 .try-head p{font-size:12px;color:#dfc7bb}
  .v3 .phone{box-shadow:0 24px 60px #210e0e35,0 0 0 3px #ffffff08}
  .v3.scroll-motion .try-head{opacity:var(--demo-reveal,1);transform:translateY(calc((1 - var(--demo-reveal,1))*18px));will-change:transform,opacity}
  .v3.scroll-motion .phone{opacity:calc(.4 + var(--demo-reveal,1)*.6);transform:translateY(calc((1 - var(--demo-reveal,1))*45px)) scale(calc(.96 + var(--demo-reveal,1)*.04));transform-origin:50% 90%;will-change:transform,opacity;transition:none}
  .welcome-scroll-cue{display:flex;align-items:center;justify-content:center;gap:8px;color:#c6a899;font-size:10px;margin-top:4px;font-weight:700;letter-spacing:.015em}
  .welcome-scroll-cue span{display:inline-block;font-size:17px;line-height:1;animation:landing-cue 2.4s ease-in-out infinite}
  .v3 .site-nav{height:0;min-height:0;padding:0;border:0;overflow:hidden;position:relative}
  .v3 .site-nav>*{display:none}
  .v3 .early-evidence{display:none}
  .v3 .landing-hero{border-radius:32px 32px 0 0;margin-top:24px;scroll-margin-top:0}
}
@keyframes landing-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.welcome-scroll-cue span{animation:none}.v3.scroll-motion .phone,.v3.scroll-motion .try-head{transform:none;opacity:1;will-change:auto}}
@media(max-width:820px){.v3 main{background:var(--cream-2);border-radius:32px 32px 0 0;overflow:clip}.v3 .landing-hero{margin-top:0}}
/* The demo is a warm paper surface that opens out of the brown introduction. */
@media(max-width:820px){
  .v3 .mobile-welcome{padding-bottom:34px}
  .v3 .demo-shell{
    background:radial-gradient(ellipse at 50% 72%,#f4d69b70,transparent 68%),#f5ecdc;
    color:#4a2c2a;
    border-radius:50% 50% 0 0 / calc(62px - var(--demo-reveal,1)*32px) calc(62px - var(--demo-reveal,1)*32px) 0 0;
    box-shadow:0 -6px 0 #dcb879,0 -13px 0 #704337;
    padding-top:24px;
    height:100svh;
    scroll-margin-top:0;
  }
  .v3 .demo-shell::before{content:'';position:absolute;top:14px;left:calc(50% - 18px);width:36px;height:3px;background:#b88b53;border-radius:3px;opacity:.4}
  .v3 .demo-nav{width:calc(100% - 48px);margin-bottom:10px}
  .v3 .skip-demo{color:#8a6b5b}
  .v3 .try-head{padding-bottom:12px}
  .v3 .try-head .live-label{color:#ad533d;font-size:9px}
  .v3 .try-head .live-label i{box-shadow:0 0 0 4px #ad533d0d}
  .v3 .try-head h3{color:#4a2c2a;font-size:26px;letter-spacing:-.045em}
  .v3 .try-head p{color:#896d5e}
  .v3 .phone{box-shadow:0 24px 48px #673a242b,0 0 0 3px #72462f12}
  .v3.scroll-motion .try-head{opacity:calc(.2 + var(--demo-reveal,1)*.8);transform:translateY(calc((1 - var(--demo-reveal,1))*25px))}
  .v3.scroll-motion .phone{opacity:1;transform:translateY(calc((1 - var(--demo-reveal,1))*80px)) rotate(calc((var(--demo-reveal,1) - 1)*4deg)) scale(calc(.88 + var(--demo-reveal,1)*.12));transform-origin:50% 70%;transition:none}
  .v3 main{border-radius:0;background:var(--cream-2)}
  .v3 .landing-hero{border-radius:0}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){.v3 .demo-shell{border-radius:50% 50% 0 0 / 30px 30px 0 0}.v3.scroll-motion .phone,.v3.scroll-motion .try-head{transform:none;opacity:1}}
@media(max-width:820px){.v3 .phone{border-color:#191516;box-shadow:0 24px 48px #673a242b}.v3 .phone-screen{background:var(--brown);clip-path:inset(0 round 36px)}.v3 .phone-step{inset:-1px}}
@media(max-width:820px){.v3 .topic-step{background:linear-gradient(to bottom,var(--brown) 0 160px,var(--cream) 160px)}}