/* style.css */
:root{--ink:#28231f;--muted:#70675f;--green:#285846;--deep:#173e31;--cream:#f3eee7;--paper:#fffcf8;--red:#b65343;--pink:#f4ded8;--line:#ded7cd}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans','Zen Maru Gothic',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #d99960;outline-offset:4px}button:disabled{opacity:.42;cursor:not-allowed}.wrap{width:min(1400px,calc(100% - 80px));margin:auto}.header{height:100px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:14px;line-height:1.3}.brand img{width:43px;height:43px;border-radius:12px}.brand small{display:block;font:600 9px 'DM Sans',sans-serif;letter-spacing:.18em;color:var(--red);margin-top:4px}.header nav{display:flex;align-items:center;gap:35px;font-size:12px;font-weight:700}.nav-cta{background:var(--green);color:white;padding:15px 21px;border-radius:30px}.nav-cta span{margin-left:20px}.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:690px;align-items:center}.hero-copy{padding:10px 0 100px 5%;z-index:2}.eyebrow,.section-kicker{font:700 11px 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--red);display:flex;align-items:center;gap:13px}.dot{width:8px;height:8px;background:var(--red);border-radius:50%}.hero h1{font-size:clamp(44px,5vw,76px);line-height:1.42;letter-spacing:-.065em;margin:30px 0;font-weight:700}.hero h1 em{font-style:normal;color:var(--green)}.hero-copy>p{font-size:15px;line-height:2.1;color:var(--muted);font-weight:500}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:36px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:55px;border-radius:50px;padding:20px 25px;font-size:13px;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button.dark{background:var(--green);color:white}.button.dark:hover{background:var(--deep)}.text-link{font-size:12px;font-weight:700;border-bottom:1px solid #b7ada2;padding-bottom:6px}.text-link span{margin-left:15px}.hero-note{font-size:11px;color:var(--muted);margin-top:42px}.hero-note span{color:var(--red);font-size:16px;margin-right:8px}.hero-art{height:600px;position:relative;border-radius:38px;overflow:hidden;background:radial-gradient(circle at 75% 25%,#f8dfd5 0,transparent 35%),radial-gradient(circle at 20% 75%,#dcebe2 0,transparent 42%),linear-gradient(135deg,#e9e7db,#f9f1e8)}.orbit{position:absolute;border:1px solid #ffffff99;border-radius:50%;width:570px;height:570px;top:10%;left:4%;transform:rotate(-25deg)}.orbit-two{width:440px;height:440px;top:18%;left:18%;border-color:#ffffff80}.art-label{position:absolute;top:45px;left:45px;color:var(--green);font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.17em}.hero-phone{position:absolute;width:247px;height:550px;left:50%;top:58%;transform:translate(-50%,-50%) rotate(4deg);border:7px solid #282b26;border-radius:35px;overflow:hidden;box-shadow:0 32px 70px #3a514837;background:#eee8de}.hero-phone img{width:100%;display:block}.floating-card{position:absolute;bottom:80px;left:7%;background:#fffcf8eF;border:1px solid #ffffff;border-radius:18px;padding:17px 21px;display:flex;align-items:center;gap:12px;box-shadow:0 14px 45px #3052441c}.paw{background:#f5ded9;color:var(--red);width:38px;height:38px;border-radius:50%;display:grid;place-items:center}.floating-card small,.floating-card strong{display:block;font-size:10px}.floating-card small{color:var(--muted);margin-bottom:6px}.art-index{position:absolute;right:28px;bottom:25px;font:700 9px 'DM Sans',sans-serif;letter-spacing:.12em;color:#73877c}.hero-bottom{position:absolute;bottom:22px;left:5%;right:0;display:flex;align-items:center;gap:15px;font:700 9px 'DM Sans',sans-serif;letter-spacing:.13em;color:#8a8178}.hero-bottom span:last-child{margin-left:auto}.intro{display:grid;grid-template-columns:1fr 2fr auto;gap:30px;padding:150px 5% 160px;align-items:start}.section-kicker span{color:#aa9e92;font-size:10px}.intro h2,.feature-heading h2,.experience h2,.closing h2{font-size:clamp(34px,4vw,56px);line-height:1.5;letter-spacing:-.055em;margin:0;font-weight:700}.intro p,.feature-heading p{font-size:15px;line-height:2.1;color:var(--muted);margin:25px 0 0}.intro-mark{font-size:65px;color:#d1a574;font-weight:400}.experience{background:var(--deep);color:white;padding:115px 0 125px;overflow:hidden}.experience-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;align-items:center}.section-kicker.light{color:#d3aa83}.section-kicker.light span{color:#88a195}.experience h2{margin:38px 0 24px}.experience-copy>p{font-size:14px;line-height:2.1;color:#d2e0d8}.demo-note{margin-top:35px;border-left:2px solid #c99f72;padding-left:16px;color:#b7cec1;font-size:11px;line-height:1.9}.demo-note strong{color:#f4e6d1}.steps{display:flex;align-items:center;gap:9px;margin-top:54px;font-size:11px;color:#d8e4dd}.steps b{font:700 10px 'DM Sans',sans-serif;color:#d5ab82;margin-right:5px}.steps i{height:1px;width:25px;background:#729285}.demo-shell{background:#fbf9f5;color:var(--ink);border-radius:28px;padding:24px;box-shadow:0 30px 80px #071e1738}.demo-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.demo-overline{font:700 9px 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--red)}.demo-top h3{font-size:17px;margin:8px 0 0}.demo-top h3 span{color:#d39280}.status{background:#e2eee7;color:var(--green);font-size:10px;font-weight:700;border-radius:20px;padding:8px 11px;white-space:nowrap}.map{height:215px;border-radius:18px;background:#e4ebe0;position:relative;overflow:hidden}.map:before,.map:after{content:'';position:absolute;background:#d5e2d1;border-radius:50%;width:160px;height:80px;left:9%;top:15%}.map:after{left:67%;top:57%;width:120px;height:70px}.map svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}.road{fill:none;stroke:#f9f7ee;stroke-width:12}.water{fill:none;stroke:#c5ded8;stroke-width:20}.route-back{fill:none;stroke:#ca9587;stroke-width:5;opacity:.25}.route{fill:none;stroke:#bc5b49;stroke-width:6;stroke-linecap:round}.map-label{position:absolute;color:#718b7a;font-size:10px;z-index:2}.map-label-one{top:28%;left:35%}.map-label-two{bottom:20%;right:15%}.map-compass{position:absolute;right:15px;top:12px;color:#698273;font:700 10px 'DM Sans';text-align:center;z-index:2}.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:20px 0}.demo-stats div{padding:0 12px;border-right:1px solid #e5dfd7}.demo-stats div:first-child{padding-left:0}.demo-stats div:last-child{border:0}.demo-stats small{display:block;color:#877e73;font-size:10px;margin-bottom:7px}.demo-stats strong{font:700 25px 'DM Sans',sans-serif}.demo-stats span{font-size:10px;color:#857b72;margin-left:3px}.progress{height:4px;border-radius:10px;background:#e6e5de;overflow:hidden}.progress span{display:block;width:0;height:100%;background:var(--red);transition:width .1s linear}.log-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:20px 0}.log-row>span{font-size:10px;color:#766d64;margin-right:auto}.log-row button{border:0;border-radius:20px;background:#edeae3;color:#4e5f54;padding:9px 11px;font-size:10px;font-weight:700;cursor:pointer}.demo-actions{display:flex;gap:8px}.demo-actions button{border:1px solid #d5ded6;background:white;color:var(--green);border-radius:12px;padding:14px 12px;font-size:11px;font-weight:700;cursor:pointer}.demo-actions button:first-child{flex:1;background:var(--green);border-color:var(--green);color:white}.result{margin-top:15px;background:#e8f1e9;color:var(--green);padding:15px;border-radius:12px;font-size:12px}.result p{margin:6px 0 0;font-size:11px}.features{padding:145px 0}.feature-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:55px}.feature-heading h2{margin-top:25px}.feature-heading p{margin:0 10% 4px 0}.feature-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.feature-card{min-height:520px;border-radius:26px;overflow:hidden;position:relative}.card-green{background:#dce9df}.card-blush{background:#f0ded8}.card-cream{background:#e8dfcd}.card-copy{position:relative;z-index:2;padding:35px}.card-copy>span{font:700 10px 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--red)}.card-copy h3{font-size:25px;line-height:1.5;letter-spacing:-.04em;margin:25px 0 15px}.card-copy p{font-size:12px;line-height:1.9;color:#6f6a60}.feature-card img{position:absolute;width:185px;top:255px;left:50%;transform:translateX(-50%) rotate(3deg);border:5px solid #343631;border-radius:23px;box-shadow:0 18px 40px #523f3629}.mini-route{position:absolute;left:9%;right:9%;bottom:30px;height:190px;border-radius:20px;background:#285846;overflow:hidden}.mini-route svg{width:100%;height:100%}.mini-route div{position:absolute;top:25px;left:25px;color:#d8e7dc;font:700 10px 'DM Sans',sans-serif;letter-spacing:.13em;line-height:1.6}.mini-route div span{color:#e2ae87}.closing{background:#285846;color:white;border-radius:38px 38px 0 0;text-align:center;overflow:hidden}.closing-inner{padding:110px 0 120px;position:relative}.closing .section-kicker{justify-content:center}.closing h2{margin:28px 0 18px}.closing p{font-size:14px;line-height:2;color:#d6e3da;margin-bottom:30px}.button.pale{background:#fffcf8;color:var(--green)}.closing small{display:block;color:#b9d0c0;margin-top:16px;font-size:10px}.closing-flower{position:absolute;right:5%;top:5%;font-size:280px;color:#ffffff09;line-height:1}.footer{min-height:145px;display:flex;align-items:center;gap:45px}.footer p{font-size:11px;color:var(--muted)}.footer>span{margin-left:auto;font:700 9px 'DM Sans',sans-serif;letter-spacing:.12em;color:#9a9188}
@media(max-width:900px){.wrap{width:min(100% - 40px,700px)}.header{height:78px}.header nav>a:not(.nav-cta){display:none}.nav-cta{padding:13px 15px}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:55px 0 45px}.hero h1{font-size:clamp(42px,8vw,65px);margin:24px 0}.hero-art{height:540px}.hero-bottom{position:static;padding:22px 0 0;grid-column:1}.intro{grid-template-columns:1fr;padding:100px 0;gap:26px}.intro-mark{display:none}.experience{padding:85px 0}.experience-inner{grid-template-columns:1fr;gap:45px}.steps{margin-top:30px}.features{padding:100px 0}.feature-heading{display:block}.feature-heading p{margin-top:25px}.feature-grid{grid-template-columns:1fr 1fr}.feature-card:first-child{grid-column:span 2;min-height:400px}.mini-route{left:auto;width:45%;top:100px}.closing-inner{padding:90px 0}.closing-flower{font-size:190px}.footer{gap:20px;flex-wrap:wrap;padding:30px 0}.footer p{display:none}}
@media(max-width:560px){.wrap{width:calc(100% - 32px)}.brand{font-size:12px}.brand img{width:38px;height:38px}.nav-cta{font-size:10px}.nav-cta span{margin-left:8px}.hero-copy{padding:45px 0 35px}.hero h1{font-size:40px}.hero-copy>p{font-size:13px}.hero-actions{gap:20px}.button{padding:17px 19px;gap:25px;font-size:12px}.hero-note{font-size:10px}.hero-art{height:460px;border-radius:25px}.hero-phone{width:195px;height:435px;top:57%}.floating-card{bottom:40px;left:15px;padding:12px}.floating-card strong{font-size:9px}.art-label{left:25px;top:25px}.hero-bottom span:last-child{display:none}.intro h2,.feature-heading h2,.experience h2,.closing h2{font-size:33px}.intro p,.feature-heading p{font-size:13px}.desktop{display:none}.demo-shell{padding:16px;border-radius:20px}.demo-top h3{font-size:14px}.status{font-size:9px}.map{height:180px}.demo-stats strong{font-size:21px}.demo-stats div{padding:0 7px}.log-row>span{width:100%}.demo-actions{flex-wrap:wrap}.demo-actions button:first-child{min-width:100%}.demo-actions button:not(:first-child){flex:1}.feature-grid{grid-template-columns:1fr}.feature-card:first-child{grid-column:auto;min-height:420px}.mini-route{left:8%;right:8%;width:auto;top:auto;bottom:25px;height:160px}.feature-card{min-height:450px}.feature-card img{top:215px;width:170px}.card-copy{padding:28px}.card-copy h3{font-size:23px}.footer>span{width:100%;margin-left:0}.closing-flower{right:-20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.progress span{transition:none}}

/* A short, visible invitation makes the sample walk easy to follow. */
.sim-guide{display:flex;align-items:center;gap:10px;background:#fff1df;color:#70432c;border-radius:12px;padding:11px 14px;margin:17px 0 4px;font-size:11px;line-height:1.6}
.sim-guide strong{font-size:12px}.guide-finger{font-size:24px;line-height:1;animation:point-down .8s ease-in-out infinite alternate}.start-guide{margin:5px 0 10px}.sim-feedback{margin:17px 0 4px;padding:12px 14px;background:#e0eee4;color:#245840;border:1px solid #c5dfcc;border-radius:12px;font-size:12px;font-weight:700}.sim-guide[hidden],.sim-feedback[hidden]{display:none}.log-row button b{display:inline-grid;place-items:center;margin-left:3px;min-width:19px;height:19px;border-radius:50%;background:#fff;color:var(--green);font:700 10px 'DM Sans',sans-serif}.log-row button:not(:disabled){background:#dcece1;box-shadow:0 2px 0 #b8d5c0}.log-row button:not(:disabled):active{transform:scale(.95)}@keyframes point-down{from{transform:translateY(-3px)}to{transform:translateY(4px)}}@media(prefers-reduced-motion:reduce){.guide-finger{animation:none}}
.route{transition:stroke-dashoffset .12s linear}.sim-marker{animation:marker-appear .35s ease-out both}.sim-feedback:not([hidden]),.result:not([hidden]){animation:message-appear .35s ease-out both}@keyframes marker-appear{from{opacity:0}to{opacity:1}}@keyframes message-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.route{transition:none}.sim-marker,.sim-feedback:not([hidden]),.result:not([hidden]){animation:none}}
.hero-pillars{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.hero-pillars span{background:#e3ebe1;color:#456752;padding:8px 12px;border-radius:20px;font-size:10px;font-weight:700}.hero-art:after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;right:-90px;top:-90px;background:#fff7;filter:blur(12px);animation:hero-glow 6s ease-in-out infinite alternate;pointer-events:none}@keyframes hero-glow{from{transform:translate(-5px,10px)}to{transform:translate(-55px,40px)}}@media(prefers-reduced-motion:reduce){.hero-art:after{animation:none}}


/* extras.css */
.daily-demo{background:#eee8df;padding:120px 0}.daily-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:50px}.daily-heading h2{font-size:clamp(34px,4vw,56px);line-height:1.5;letter-spacing:-.055em;margin:25px 0 0}.daily-heading>p{font-size:14px;line-height:2;color:#70675f;margin:0 8% 5px 0}.daily-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.daily-card{border-radius:28px;overflow:hidden;padding:35px;position:relative}.weather-demo{background:#dfece5}.health-demo{background:#f2dfd8}.daily-copy>span{font:700 10px 'DM Sans',sans-serif;color:#b65343;letter-spacing:.12em}.daily-copy h3{font-size:25px;line-height:1.5;letter-spacing:-.04em;margin:20px 0 10px}.daily-copy p{font-size:12px;line-height:1.9;color:#70675f;margin:0 0 22px}.daily-sample-label{font-size:10px;color:#61776b;font-weight:700}.weather-choice,.health-options{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}.weather-choice button,.health-options button{border:1px solid #c4d7ca;border-radius:22px;background:#fffdfa;color:#285846;padding:10px 15px;font:700 11px 'Zen Maru Gothic',sans-serif;cursor:pointer;transition:background .2s,transform .2s}.weather-choice button[aria-pressed=true],.health-options button[aria-pressed=true]{background:#285846;color:white;border-color:#285846}.weather-choice button:active,.health-options button:active{transform:scale(.95)}.daily-guide{font-size:10px;color:#6e8777;margin:10px 0;animation:daily-nudge 1s ease-in-out infinite alternate}.weather-screen,.health-screen{background:#fffcf8;border-radius:22px;padding:23px;box-shadow:0 18px 40px #28584616}.weather-screen-head{display:flex;align-items:center;justify-content:space-between}.weather-screen-head small,.health-head small{display:block;color:#81786e;font-size:11px}.weather-screen-head strong{display:block;font-size:23px;margin-top:5px}.weather-symbol{display:grid;place-items:center;color:#285846;background:#e3efe8;width:50px;height:50px;border-radius:15px;font-size:27px}.weather-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:19px 0}.weather-metrics div{background:#f0ebe4;border-radius:12px;text-align:center;padding:13px 4px}.weather-metrics strong,.weather-metrics small{display:block}.weather-metrics strong{font:700 21px 'DM Sans',sans-serif}.weather-metrics small{font-size:10px;color:#7d7469;margin-top:4px}.weather-message{background:#e2eee5;color:#285846;border-radius:12px;padding:13px 15px;font-size:11px;line-height:1.7;transition:background .3s,color .3s}.weather-message b,.weather-message span{display:block}.weather-message span{margin-top:3px}.road-message{display:flex;gap:12px;margin-top:10px;padding:14px;border-radius:12px;background:#f2e9da;color:#6f583d;transition:background .3s,color .3s}.road-message>span{font-size:22px}.road-message small,.road-message strong{display:block}.road-message small{font-size:10px}.road-message strong{font:700 19px 'DM Sans',sans-serif;margin-top:5px}.road-message p{font-size:10px;line-height:1.7;margin:5px 0 0}.weather-demo.is-hot .weather-message,.weather-demo.is-hot .road-message{background:#f5dfd9;color:#9d473a}.daily-disclaimer{display:block;font-size:9px;color:#8a8179;line-height:1.7;margin-top:14px}.health-demo .daily-copy{min-height:175px}.health-screen{max-width:370px;margin:20px auto 0;transform:rotate(2deg);box-shadow:0 25px 55px #8a57462b}.health-head{display:flex;justify-content:space-between;align-items:center}.health-head strong{font-size:23px;display:block;margin-top:6px}.health-head>span{font-size:31px;color:#ca7d70}.health-date{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin:25px 0 12px}.health-date span{font-size:9px;color:#998c81}.health-options{margin-bottom:16px}.health-options button{padding:8px 12px;border-color:#ded8d0}.health-preview{display:flex;align-items:center;gap:13px;padding:16px;background:#f2eee8;border-radius:14px;min-height:95px}.health-preview>span{display:grid;place-items:center;background:#f3dcd4;color:#b65343;width:45px;height:45px;border-radius:13px;font-size:21px}.health-preview div{flex:1}.health-preview small,.health-preview strong{display:block}.health-preview small{font:700 10px 'DM Sans',sans-serif;color:#a3988d}.health-preview strong{font-size:14px;margin-top:4px}.health-preview p{margin:5px 0 0;color:#786e64;font-size:11px}.health-preview>b{color:#285846}.health-caption{font-size:10px;line-height:1.8;color:#8a8179;margin-top:17px}.daily-caption{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;color:#866b60;margin-top:33px}.daily-caption span{font-size:20px}@keyframes daily-nudge{from{transform:translateY(0)}to{transform:translateY(-4px)}}@media(max-width:900px){.daily-demo{padding:90px 0}.daily-heading{display:block}.daily-heading>p{margin:20px 0 0}.daily-grid{grid-template-columns:1fr}}@media(max-width:560px){.daily-demo{padding:80px 0}.daily-heading h2{font-size:33px}.daily-card{padding:24px 18px}.health-demo .daily-copy{min-height:auto}.health-screen{transform:none}.weather-screen,.health-screen{padding:18px}.daily-copy h3{font-size:23px}}@media(prefers-reduced-motion:reduce){.daily-guide{animation:none}.weather-message,.road-message,.weather-choice button,.health-options button{transition:none}}
.daily-updated{animation:daily-update .35s ease both}@keyframes daily-update{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.daily-updated{animation:none}}
.weather-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.weather-metrics small{font-size:9px}@media(max-width:420px){.weather-metrics strong{font-size:16px}.weather-metrics small{font-size:8px}}


/* premium-story.css */
.premium-story{background:#ede7dd;padding:125px 0 130px;overflow:hidden}.premium-inner{color:#28231f}.premium-intro{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.premium-kicker,.premium-scenes-heading>span{font:700 10px 'DM Sans',sans-serif;letter-spacing:.16em;color:#b65343}.premium-kicker span{font-size:16px;margin-right:7px}.premium-heading h2{font-size:clamp(37px,4.2vw,61px);line-height:1.5;letter-spacing:-.055em;margin:26px 0}.premium-heading>p:not(.premium-kicker){color:#70675f;font-size:14px;line-height:2.1}.premium-label{display:inline-block;background:#f4ded8;color:#a94e40;padding:9px 14px;border-radius:20px;font-size:10px;font-weight:700;margin-top:18px}.premium-visual{height:480px;border-radius:30px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 22%,#f6ddd5 0,transparent 42%),linear-gradient(140deg,#dbe9df,#f3e9dc)}.premium-orbit{position:absolute;border:1px solid #fff9;border-radius:50%;width:430px;height:430px;top:15%;left:13%;transform:rotate(-20deg)}.premium-screen{position:absolute;top:9%;left:50%;width:190px;height:430px;border:6px solid #282b26;border-radius:28px;overflow:hidden;transform:translateX(-50%) rotate(4deg);box-shadow:0 24px 50px #254d3330;background:#efe9e0}.premium-screen img{width:100%;height:auto;display:block}.premium-visual-note{position:absolute;left:7%;bottom:40px;background:#fffcf8ed;border-radius:15px;padding:14px 17px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 35px #3555431f}.premium-visual-note span{color:#b65343;font-size:22px}.premium-visual-note strong{font-size:10px;line-height:1.6;color:#285846}.premium-scenes-heading{display:flex;justify-content:space-between;align-items:end;margin:90px 0 24px}.premium-scenes-heading p{font-weight:700;font-size:16px;margin:0}.premium-scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.premium-scene{min-height:320px;background:#fffcf8;border:1px solid #e5ddd3;border-radius:22px;padding:25px;position:relative;transition:transform .2s ease,box-shadow .2s ease}.premium-scene:hover{transform:translateY(-4px);box-shadow:0 12px 28px #3d493b10}.premium-number{font:700 9px 'DM Sans',sans-serif;letter-spacing:.12em;color:#b65343}.premium-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;margin:24px 0 17px;background:#e1eee5;color:#285846;font-size:23px}.premium-scene:nth-child(2n) .premium-icon{background:#f4ded8;color:#b65343}.premium-scene h3{font-size:17px;line-height:1.5;letter-spacing:-.03em;margin:0 0 14px}.premium-scene p{font-size:11px;color:#70675f;line-height:1.9;margin:0 0 12px}.premium-scene small{display:block;font-size:10px;color:#8b8178;line-height:1.7}.premium-free-note{margin-top:25px;padding:23px 26px;display:flex;gap:16px;align-items:start;border:1px solid #c9d8cc;background:#e3eee5;border-radius:18px}.premium-free-note>span{font-size:23px;color:#b65343}.premium-free-note strong{color:#285846;font-size:13px}.premium-free-note p{font-size:11px;line-height:1.9;color:#5c7163;margin:5px 0 0}
@media(max-width:900px){.premium-story{padding:85px 0}.premium-intro{grid-template-columns:1fr;gap:36px}.premium-visual{height:400px}.premium-screen{height:360px;width:160px}.premium-scenes{grid-template-columns:1fr 1fr}.premium-scenes-heading{margin-top:65px}.premium-scene{min-height:290px}}
@media(max-width:560px){.premium-story{padding:75px 0}.premium-heading h2{font-size:34px}.premium-heading>p:not(.premium-kicker){font-size:12px}.premium-visual{height:350px}.premium-screen{height:320px;width:145px}.premium-scenes-heading{display:block}.premium-scenes-heading p{margin-top:12px}.premium-scenes{grid-template-columns:1fr}.premium-scene{min-height:0;padding:22px}.premium-icon{margin:18px 0 12px}.premium-free-note{padding:20px}}
@media(prefers-reduced-motion:reduce){.premium-scene{transition:none}.premium-scene:hover{transform:none}}


/* feature-catalog.css */
.catalog{padding:135px 0;background:#f9f6f1}.catalog-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:45px}.catalog-heading h2{font-size:clamp(34px,4vw,56px);line-height:1.5;letter-spacing:-.055em;margin:25px 0 0}.catalog-heading>p{font-size:14px;line-height:2;color:#70675f;margin:0 4% 5px 0}.catalog-guide{font-size:11px;font-weight:700;color:#a65b48;margin-bottom:11px}.catalog-guide span{display:inline-block;font-size:19px;animation:catalog-point .8s ease-in-out infinite alternate}.catalog-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.catalog-tabs button{border:1px solid #d8dfd6;border-radius:50px;background:#fffcf8;color:#486a56;font-family:inherit;font-size:12px;font-weight:700;padding:13px 18px;cursor:pointer;transition:background .2s,color .2s,transform .2s}.catalog-tabs button span{margin-left:18px}.catalog-tabs button:hover{transform:translateY(-2px)}.catalog-tabs button[aria-pressed=true]{background:#285846;color:white;border-color:#285846}.catalog-content{background:#e7eee6;border-radius:28px;overflow:hidden}.catalog-panel{padding:40px;display:grid;grid-template-columns:.8fr 1.6fr;gap:6%;animation:catalog-in .4s ease both}.catalog-panel[hidden]{display:none}.catalog-intro>span{font:700 10px 'DM Sans',sans-serif;letter-spacing:.15em;color:#b65343}.catalog-intro h3{font-size:clamp(24px,2.5vw,35px);line-height:1.5;letter-spacing:-.045em;margin:18px 0}.catalog-intro p,.catalog-note{font-size:12px;line-height:1.9;color:#657b6b}.catalog-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-items article{background:#fffcf8;border-radius:16px;padding:18px;display:flex;align-items:flex-start;gap:13px;min-height:115px}.catalog-icon{width:36px;height:36px;flex:none;border-radius:12px;background:#e6efe7;color:#285846;font-size:21px;display:grid;place-items:center;line-height:1}.catalog-items h4{font-size:13px;margin:1px 0 7px;line-height:1.5}.catalog-items p{font-size:11px;line-height:1.8;color:#70675f;margin:0}.catalog-note{grid-column:2;margin:0}.catalog-premium{background:#eae3d4}.catalog-premium .catalog-icon{background:#f4e8cf;color:#916b38}.catalog-premium .catalog-intro>span{color:#a0713a}@keyframes catalog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes catalog-point{from{transform:translateY(-2px)}to{transform:translateY(4px)}}@media(max-width:900px){.catalog{padding:95px 0}.catalog-heading{display:block}.catalog-heading>p{margin-top:22px}.catalog-panel{grid-template-columns:1fr;gap:22px}.catalog-note{grid-column:1}}@media(max-width:560px){.catalog{padding:80px 0}.catalog-heading h2{font-size:33px}.catalog-heading>p{font-size:13px}.catalog-tabs{display:grid;grid-template-columns:1fr 1fr}.catalog-tabs button{padding:12px 10px;font-size:11px}.catalog-tabs button span{margin-left:6px}.catalog-panel{padding:24px 18px}.catalog-items{grid-template-columns:1fr}.catalog-items article{min-height:0;padding:15px}.catalog-intro h3{font-size:25px}.catalog-content{border-radius:20px}}@media(prefers-reduced-motion:reduce){.catalog-guide span,.catalog-panel{animation:none}.catalog-tabs button{transition:none}}


/* futuristic-hero.css */
/* A softer, layered introduction, using the app's existing natural palette. */
.header{height:104px;position:relative;z-index:3}
.header .brand img{box-shadow:0 6px 18px #b6534320}
.header nav{gap:4px;padding:5px;background:#fffdf9b8;border:1px solid #fff;border-radius:999px;box-shadow:0 8px 26px #3653450d}
.header nav>a:not(.nav-cta){padding:13px 17px;border-radius:999px;color:#385648;transition:background .2s,color .2s}
.header nav>a:not(.nav-cta):hover{background:#e7f0e9;color:#173e31}
.header .nav-cta{padding:14px 20px;box-shadow:0 5px 14px #28584624}
.hero{isolation:isolate;overflow:hidden;min-height:710px;border:1px solid #ffffffcc;border-radius:42px;background:radial-gradient(ellipse at 8% 2%,#ffffffb8 0,transparent 42%),radial-gradient(ellipse at 88% 8%,#efcec2a8 0,transparent 45%),radial-gradient(ellipse at 40% 100%,#d3e6d7a8 0,transparent 54%),linear-gradient(125deg,#f4eee5 0%,#eef1e9 47%,#f3e5dc 100%);box-shadow:0 20px 60px #39594510}
.hero:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#ffffff45,transparent 48%);z-index:-1}
.hero-copy{padding:30px 0 120px 10%}
.hero h1{font-size:clamp(43px,4.8vw,73px);line-height:1.4;letter-spacing:-.065em}
.hero h1 em{color:#285846;text-shadow:0 2px 24px #80a89232}
.hero-copy>p{color:#605d54;font-size:15px}
.eyebrow .dot{box-shadow:0 0 0 5px #b6534318}
.hero-actions .button.dark{box-shadow:0 8px 24px #28584630}
.hero-actions .text-link{border-color:#7d9786;color:#285846}
.hero-pillars span{background:#fffcf8a8;border:1px solid #fff;color:#3f6551;box-shadow:0 3px 12px #405e4d0a}
.hero-art{margin:18px 18px 18px 0;height:620px;border:1px solid #ffffffa8;border-radius:32px;background:radial-gradient(circle at 75% 15%,#f8dcd3c9,transparent 38%),radial-gradient(circle at 18% 77%,#c4e4d7c9,transparent 46%),linear-gradient(135deg,#e5eee7cc,#f9efe8c9);box-shadow:inset 0 1px #fff9,0 14px 40px #335c4a0b}
.hero-art:before{content:'';position:absolute;inset:12px;border:1px solid #ffffff70;border-radius:23px;pointer-events:none}
.orbit{border-color:#fff9;box-shadow:inset 0 0 35px #fff2}
.orbit-two{border-color:#fff9}
.art-label{z-index:1}
.hero-phone{top:56%;box-shadow:0 38px 68px #244a3940,0 3px 8px #253a2d2b;animation:sakura-phone-float 7s ease-in-out infinite}
.floating-card{z-index:1;background:#fffcf8dc;border-color:#ffffffed;backdrop-filter:blur(12px);box-shadow:0 14px 45px #30524422;animation:sakura-card-float 6s ease-in-out infinite}
.hero-bottom{left:5%;right:5%;bottom:26px;color:#697b6f}
@keyframes sakura-phone-float{0%,100%{transform:translate(-50%,-50%) rotate(4deg)}50%{transform:translate(-50%,calc(-50% - 8px)) rotate(3deg)}}
@keyframes sakura-card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:900px){
  .header{height:80px}
  .header nav{padding:4px}
  .header .nav-cta{padding:13px 16px}
  .hero{min-height:0;border-radius:32px}
  .hero-copy{padding:52px 7% 38px}
  .hero-art{height:490px;margin:0 14px;border-radius:24px}
  .hero-phone{top:56%;width:210px;height:468px}
  .hero-bottom{position:static;padding:20px 7% 25px}
}
@media(max-width:560px){
  .header{height:76px}
  .header .nav-cta{font-size:10px;padding:12px 14px}
  .hero{border-radius:26px}
  .hero-copy{padding:43px 22px 32px}
  .hero h1{font-size:clamp(35px,9vw,43px);line-height:1.43;letter-spacing:-.065em}
  .hero-copy>p{font-size:13px;line-height:2}
  .hero-note{margin-top:32px;line-height:1.7}
  .hero-pillars{gap:5px}
  .hero-pillars span{font-size:9px;padding:7px 9px}
  .hero-art{height:420px;margin:0 10px;border-radius:20px}
  .hero-art:before{inset:9px;border-radius:14px}
  .hero-phone{width:185px;height:413px;top:57%}
  .floating-card{left:12px;bottom:35px}
  .hero-bottom{padding:19px 22px 22px}
}
@media(prefers-reduced-motion:reduce){
  .hero-phone,.floating-card{animation:none}
  .header nav>a:not(.nav-cta){transition:none}
}

/* The small labels frame the app; they describe features rather than live data. */
.hero-float{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;max-width:155px;padding:10px 12px;border:1px solid #ffffffeb;border-radius:16px;background:#fffcf8e8;color:#285846;box-shadow:0 12px 32px #315c4720;backdrop-filter:blur(12px);pointer-events:none;animation:sakura-label-float 5.8s ease-in-out infinite}
.hero-float .hero-float-icon{flex:none;display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:#e1eee6;color:#285846;font-size:16px}
.hero-float strong,.hero-float small{display:block;line-height:1.35;white-space:nowrap}
.hero-float strong{font-size:10px;font-weight:700}
.hero-float small{font-size:9px;color:#718478;margin-top:3px}
.float-walk{left:3%;top:30%;animation-delay:-1s}
.float-weather{right:3%;top:18%;animation-delay:-3s}
.float-weather .hero-float-icon{background:#f5e9d4;color:#9e7443}
.float-health{right:3%;bottom:18%;animation-delay:-4.5s}
.float-health .hero-float-icon{background:#f5e2dc;color:#b65343}
@keyframes sakura-label-float{0%,100%{margin-top:0}50%{margin-top:-6px}}
@media(max-width:560px){
  .hero-art .art-label{display:none}
  .hero-float{top:9px;bottom:auto;max-width:31%;padding:6px 7px;gap:5px;border-radius:11px;animation:none}
  .hero-float .hero-float-icon{width:23px;height:23px;border-radius:8px;font-size:12px}
  .hero-float strong{font-size:9px}
  .hero-float small{display:none}
  .float-walk{left:8px}
  .float-weather{left:50%;right:auto;transform:translateX(-50%)}
  .float-health{left:auto;right:8px}
  .hero-phone{width:165px;height:368px;top:57%}
}
@media(prefers-reduced-motion:reduce){.hero-float{animation:none}}


/* futuristic-experience.css */
/* Layered, quiet depth keeps the interactive walk the center of attention. */
.experience{position:relative;background:radial-gradient(ellipse at 85% 10%,#3e7660 0,transparent 33%),radial-gradient(ellipse at 8% 85%,#234d40 0,transparent 38%),#153e31}
.experience:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(#ffffff16 1px,transparent 1px),linear-gradient(90deg,#ffffff16 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to right,transparent,#000)}
.experience-inner{position:relative;z-index:1}
.experience-copy h2{letter-spacing:-.065em}
.demo-note{background:#ffffff0b;padding:14px 17px;border-radius:0 14px 14px 0;backdrop-filter:blur(8px)}
.demo-shell{border:1px solid #ffffffa6;background:linear-gradient(150deg,#fffcf8,#f4f2eb);box-shadow:0 35px 90px #061e1759,0 1px 0 #ffffff inset}
.demo-top h3{letter-spacing:-.03em}.demo-overline{letter-spacing:.2em}.status{box-shadow:inset 0 0 0 1px #bdd9c7}
.map{box-shadow:inset 0 0 0 1px #c7d9ce;background:linear-gradient(145deg,#e4ede2,#d8e9e2)}
.demo-stats strong{letter-spacing:-.045em}.progress{background:#dce5dc}.progress span{background:linear-gradient(90deg,#b65343,#d69675)}
.demo-actions button,.log-row button{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.demo-actions button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 7px 18px #28584625}
.demo-actions button:first-child:not(:disabled){background:linear-gradient(115deg,#285846,#376d55)}
.feature-card,.daily-card{box-shadow:inset 0 1px 0 #ffffffa6}
.card-copy p,.daily-copy p,.catalog-items p,.premium-scene p{font-size:13px;line-height:1.9}
.demo-note,.catalog-intro p,.catalog-note,.premium-free-note p{font-size:12px}
.daily-disclaimer,.health-caption,.value-fine,.premium-scene small{font-size:11px;line-height:1.8}
@media(prefers-reduced-motion:reduce){.demo-actions button,.log-row button{transition:none}.demo-actions button:not(:disabled):hover{transform:none}}


/* motion.css */
/* Progressive enhancement: without JavaScript, every section remains visible. */
@media (prefers-reduced-motion: no-preference) {
  .motion-pending,
  .motion-visible {
    transition: opacity 580ms cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms),
      translate 580ms cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms);
  }
  .motion-pending {
    opacity: 0;
    translate: 0 20px;
  }
  .motion-visible {
    opacity: 1;
    translate: 0 0;
  }
}


/* result.css */
.result[hidden],.share-preview[hidden]{display:none}.result{padding:20px;margin-top:18px;background:#e5f0e7;border:1px solid #d4e7d9;animation:result-appear .45s ease both}.result>strong{font-size:15px}.result>p{font-size:11px;line-height:1.8}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:17px 0}.result-metrics div{background:#fffcf8;border-radius:11px;padding:10px 5px;text-align:center}.result-metrics small{display:block;font-size:9px;color:#70675f;margin-bottom:5px}.result-metrics strong{font:700 18px 'DM Sans',sans-serif}.result-metrics span{font-size:10px;margin-left:2px}.share-toggle{width:100%;border:0;border-radius:11px;background:#285846;color:#fff;padding:14px;font-size:12px;font-weight:700;cursor:pointer}.share-toggle:hover{background:#173e31}.share-preview{margin-top:16px;padding-top:16px;border-top:1px solid #c8dece;animation:result-appear .35s ease both}.share-preview>strong{font-size:12px}.share-preview p{font-size:10px;color:#64796c;line-height:1.7}.share-preview img{display:block;width:min(100%,260px);height:auto;border-radius:14px;margin:12px auto 0;box-shadow:0 8px 22px #244a3024}@keyframes result-appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.result,.share-preview{animation:none}}
.result .result-guide{margin:5px 0 9px;color:#4a6e59;font-weight:700}.result-next{display:block;text-align:center;margin-top:16px;font-size:11px;font-weight:700;color:#285846;text-decoration:underline;text-underline-offset:4px}


/* layout-refinement.css */
/* Compact the journey while keeping the demo and its details readable. */
.intro{padding-top:82px;padding-bottom:82px}
.experience{padding:80px 0}
.daily-demo,.catalog{padding:80px 0}
.premium-story{padding:80px 0}
.closing-inner{padding:80px 0}
.premium-scenes-heading{margin:50px 0 22px}
.premium-scene{min-height:0}
.premium-compact-note{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding:20px 24px;background:#fffcf8;border:1px solid #e3d9cc;border-radius:20px}
.premium-compact-note p{flex:1 1 310px;margin:0;color:#59544d;font-size:14px;line-height:1.8}
.premium-compact-note a{font-size:14px;font-weight:700;color:#285846;text-decoration:underline;text-underline-offset:4px}
.premium-compact-note small{flex-basis:100%;font-size:14px;color:#595c51;line-height:1.7}
.hero-note,.closing small,.daily-sample-label,.weather-screen-head small,.road-message small,.road-message p,.weather-message,.health-head small,.health-preview p{font-size:14px;line-height:1.7}
.hero-note,.closing small,.health-preview p{color:#5f685d}
.closing small{color:#d6e6d9}
.weather-metrics small,.demo-stats small{font-size:12px;line-height:1.4;color:#5e6259}
.daily-guide,.catalog-guide,.sim-guide,.sim-guide strong,.result-next,.share-toggle{font-size:14px;line-height:1.5}
.hero-actions{gap:12px;flex-wrap:wrap}
.hero-actions .button{gap:16px;font-size:13px;padding:17px 21px}
.hero-actions .button-outline{background:#fffcf8c9;color:#285846;border:1px solid #285846;box-shadow:none}
.hero-actions .button-outline:hover{background:#fff}
.hero-actions .button.dark{gap:22px}
.hero h1{word-break:keep-all;overflow-wrap:normal}
.demo-note,.daily-copy p,.daily-disclaimer,.health-caption,.catalog-intro p,.catalog-items p,.catalog-note,.premium-heading>p:not(.premium-kicker),.premium-scene p,.premium-scene small,.premium-free-note p,.share-preview p,.result>p{font-size:14px;line-height:1.8}
.daily-disclaimer,.health-caption,.premium-scene small,.catalog-note,.share-preview p{color:#595c51}
.catalog-items h4,.premium-free-note strong{font-size:15px}
.premium-scene p,.catalog-items p{color:#59544d}
.catalog-items article{min-height:0}
@media (min-width:701px) and (max-width:900px){
  .hero{grid-template-columns:1.05fr .95fr;min-height:580px}
  .hero-copy{padding:40px 5% 80px 8%}
  .hero h1{font-size:clamp(31px,4.3vw,38px);margin:22px 0}
  .hero-copy>p{font-size:14px}
  .hero-art{height:500px;margin:14px 14px 14px 0}
  .hero-phone{width:180px;height:400px;top:55%}
  .hero-bottom{position:absolute;bottom:20px;left:5%;right:5%;padding:0}
  .hero-float{max-width:145px}
  .hero-actions .button{font-size:12px;padding:14px 16px}
}
@media(max-width:700px){
  .hero-copy{padding:24px 22px 16px}
  .hero h1{margin:14px 0;font-size:clamp(32px,8.5vw,42px)}
  .hero-copy>p{font-size:14px;line-height:1.8}
  .hero-actions{margin-top:16px}
  .hero-note{margin-top:14px;font-size:14px}
  .hero-pillars{margin-top:8px}
  .hero-art{height:320px}
  .hero-phone{width:145px;height:323px;top:55%}
  .hero-bottom{padding:15px 22px 18px}
  .intro{padding:65px 0}
  .experience,.daily-demo,.premium-story,.catalog{padding:65px 0}
  .closing-inner{padding:65px 0}
  .premium-scenes-heading{margin:40px 0 18px}
  .premium-scenes{grid-template-columns:1fr 1fr}
  .premium-scene{padding:18px}
}
@media(max-width:560px){
  .hero-actions{gap:8px;flex-wrap:nowrap}
  .hero-actions .button,.hero-actions .button.dark{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;font-size:11px;padding:14px 8px;gap:5px}
}
@media(max-width:420px){
  .premium-scenes{grid-template-columns:1fr}
}
@media(max-width:380px){
  .hero-float{justify-content:center}
  .hero-float .hero-float-icon{display:none}
  .hero-float strong{font-size:10px}
}

