:root{--ink:#19372d;--forest:#28634e;--muted:#68756b;--cream:#f9f8f3;--sage:#eaf0e5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans','Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid #e6ae40;outline-offset:4px}.skip{position:absolute;top:-100px;background:#fff;padding:14px;z-index:99}.skip:focus{top:0}.header{height:94px;max-width:1320px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:32px;padding:0 36px}.logo img{width:126px;height:auto;max-height:72px;object-fit:contain}.header nav{display:flex;gap:43px;margin-left:auto}.header nav a{font-size:13px;font-weight:700;min-height:44px;display:flex;align-items:center;color:#38574a}.header nav a:hover{color:#1d9165}.navcta{background:var(--forest);color:#fff;padding:14px 24px;border-radius:100px;font-size:13px;font-weight:750;white-space:nowrap;box-shadow:0 10px 26px #265d4728}.navcta span{padding-left:14px}.hero{max-width:1320px;margin:auto;padding:36px 36px 90px;min-height:665px;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:34px}.hero-copy{padding-left:36px;padding-bottom:24px;z-index:1}.eyebrow{display:flex;align-items:center;gap:13px;color:#567e6b;font-size:13px;font-weight:600;letter-spacing:-.4px}.line{width:19px;height:1px;background:#5e9b7c}.hero h1{font-size:clamp(42px,4.6vw,70px);letter-spacing:-4.1px;line-height:1.35;font-weight:750;word-break:keep-all;margin:25px 0}.hero h1 span{color:#2b956d}.hero-copy>p{font-size:18px;line-height:1.9;color:#566b5d;letter-spacing:-.5px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:39px}.button{min-height:58px;display:inline-flex;justify-content:center;align-items:center;gap:30px;padding:17px 28px;border-radius:100px;font-size:14px;font-weight:800;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}.button:hover{transform:translateY(-3px)}.primary{background:linear-gradient(135deg,#398f6e,#175d43);color:#fff;box-shadow:0 12px 28px #357c5a40,inset 0 1px #ffffff70}.secondary,.white{background:#fff;color:#1f513c;border:1px solid #e0e9df;box-shadow:0 9px 24px #34574015}.hero-foot{display:flex;align-items:center;gap:14px;margin-top:45px;color:#67796b;font-size:12px;line-height:1.9}.round-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#e2f1e5;color:#37795a;font-size:24px}.hero-image{position:relative;height:570px;border-radius:260px 260px 34px 34px;background:#e7e8dd url('/images/hero-generated.webp') center 42%/cover no-repeat;box-shadow:0 24px 54px #23493426;isolation:isolate}.image-shade{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(0deg,#15362433,transparent 35%)}.float-card{position:absolute;background:#fffffff0;backdrop-filter:blur(15px);box-shadow:0 15px 35px #1b4b3127;display:flex;gap:14px;align-items:center;border:1px solid #fff;border-radius:19px;padding:17px 20px;z-index:1;animation:float 5s ease-in-out infinite}.float-card div{display:grid;gap:4px}.float-card small{color:#687c6e;font-size:10px}.float-card strong{color:#315540;font-size:12px}.emoji{font-size:27px;color:#47966b}.emotion{top:95px;left:-45px;transform:rotate(-4deg)}.walk{bottom:90px;right:-35px;animation-delay:1.2s}.ribbon{background:#e9f1e8;border-block:1px solid #dde9db;display:flex;justify-content:center;gap:35px;flex-wrap:wrap;align-items:center;min-height:83px;padding:18px 25px}.ribbon span{color:#698074;font-size:12px}.ribbon b{color:#2f634c;font-size:15px;font-weight:700}.shell{max-width:1240px;margin:auto}.features{padding:132px 30px 115px}.section-heading{text-align:center}.overline{font-size:12px!important;color:#4b9068!important;font-weight:800;letter-spacing:.3px}.section-heading h2,.how h2{font-size:clamp(35px,3.8vw,52px);line-height:1.36;letter-spacing:-2.5px;margin:20px 0}.section-heading>p:last-child{font-size:16px;line-height:1.85;color:#718174}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px;margin-top:65px}.feature{min-width:0;border-radius:22px;background:#fff;padding:11px;box-shadow:0 11px 36px #355a4020;transition:transform .28s ease,box-shadow .28s ease}.feature:hover{transform:translateY(-7px);box-shadow:0 22px 48px #355a402b}.picture{border-radius:15px;overflow:hidden;position:relative;height:192px;background:#eff1e7}.picture img{width:100%;height:100%;object-fit:cover}.bubble{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:15px;background:#ffffffd9;display:grid;place-items:center;color:#3a9266;font-size:23px;backdrop-filter:blur(9px)}.cardcontent{padding:18px 10px 43px;position:relative}.cardtitle{display:flex;justify-content:space-between;align-items:center}.cardtitle h3{margin:0;font-size:20px;letter-spacing:-.8px}.cardtitle span{font-size:10px;color:#97a799}.cardcontent p{font-size:13px;line-height:1.85;color:#68776a}.cardcontent a{position:absolute;right:12px;bottom:0;width:32px;height:32px;border:1px solid #d8e3da;border-radius:50%;display:grid;place-items:center;font-size:17px;transition:background .2s}.cardcontent a:hover{background:#e4f2e8}.story{margin-top:35px;border-radius:34px;overflow:hidden;min-height:460px;background:#f4eada;display:grid;grid-template-columns:43% 57%;box-shadow:0 18px 46px #5a6d4e21}.story-text{padding:73px 20px 62px 72px;z-index:1}.story-text h2{font-size:clamp(31px,3vw,44px);letter-spacing:-2px;line-height:1.46;margin:19px 0 23px}.story-text>p:not(.overline){font-size:14px;line-height:2;color:#6d766a;word-break:keep-all;margin-bottom:35px}.story-image{background:url('/images/story-generated.webp') center 47%/cover;position:relative}.handwritten{position:absolute;right:28px;top:28px;font-size:18px;font-style:italic;line-height:1.65;color:#fff;text-shadow:0 3px 12px #192e29e0;text-align:right;transform:rotate(-7deg)}.how{text-align:center;padding:115px 30px 130px}.how h2{margin-bottom:45px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.steps>div{text-align:left;border:1px solid #e5eae2;border-radius:22px;padding:31px;background:#fff}.steps span{color:#4a8b69;font-size:12px;font-weight:800}.steps h3{font-size:20px;letter-spacing:-.6px}.steps p{line-height:1.9;color:#6d7b71;font-size:14px}.closing{margin-bottom:80px;min-height:410px;border-radius:32px;overflow:hidden;position:relative;background:#e5efdc url('/images/cta-generated.webp') right 42%/cover no-repeat;display:flex;align-items:center;box-shadow:0 22px 49px #365b441d}.closing:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#edf2e9fa 0%,#edf2e9ed 40%,#edf2e999 62%,transparent 100%)}.closing-copy{padding:58px 70px;position:relative;z-index:1}.closing h2{font-size:clamp(33px,3.6vw,49px);letter-spacing:-2.4px;line-height:1.4;margin:17px 0}.closing-copy>p:not(.overline){color:#556959;font-size:15px;margin-bottom:28px}footer{border-top:1px solid #e4e9e3;padding:36px max(calc((100vw - 1240px)/2),34px);display:flex;gap:25px;align-items:center;color:#687b6c;font-size:12px}footer .footerlogo{font-size:23px;font-weight:800;color:#276046}footer>span{flex:1}footer div{display:flex;gap:25px}.mobile-sticky{display:none}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:1050px){.header nav{gap:18px}.hero{grid-template-columns:1fr 1fr;padding:25px 30px 70px;gap:16px}.hero-copy{padding-left:0}.hero-image{height:515px}.hero h1{font-size:46px}.cards{grid-template-columns:repeat(2,1fr)}.picture{height:240px}.story-text{padding:50px 26px}.closing{margin-inline:20px}}@media(max-width:700px){.header{height:72px;padding:0 20px}.logo img{width:108px}.header nav{display:none}.navcta{padding:13px 16px;font-size:12px}.navcta span{padding-left:5px}.hero{display:flex;flex-direction:column;gap:30px;min-height:auto;padding:38px 22px 58px}.hero-copy{width:100%;padding:0}.eyebrow{font-size:12px}.hero h1{font-size:clamp(37px,8.5vw,50px);line-height:1.36;letter-spacing:-2.8px;margin:20px 0 15px}.hero-copy>p{font-size:15px;line-height:1.85}.actions{margin-top:25px;gap:11px}.button{min-height:52px}.actions .button{width:100%}.hero-foot{margin-top:27px}.hero-image{height:410px;min-height:410px;width:100%;background-position:center 43%;border-radius:170px 170px 25px 25px}.float-card{padding:10px 12px;gap:7px;border-radius:14px}.float-card strong{font-size:10px}.float-card small{font-size:9px}.float-card .emoji{font-size:21px}.emotion{top:42px;left:-7px}.walk{bottom:33px;right:-7px}.ribbon{min-height:78px;gap:10px 16px}.ribbon span{width:100%;text-align:center}.ribbon b{font-size:12px}.features{padding:84px 20px 74px}.section-heading h2,.how h2{font-size:34px;letter-spacing:-1.5px}.section-heading>p:last-child{font-size:14px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}.feature{padding:7px;border-radius:16px}.picture{height:145px;border-radius:11px}.bubble{right:8px;top:8px;width:30px;height:30px;font-size:17px;border-radius:10px}.cardcontent{padding:13px 7px 35px}.cardtitle h3{font-size:16px}.cardcontent p{font-size:11px;line-height:1.75;word-break:keep-all}.cardcontent a{width:30px;height:30px}.story{margin:0 18px;border-radius:24px;display:flex;flex-direction:column-reverse}.story-image{width:100%;height:280px;background-position:center 38%}.story-text{padding:36px 25px 45px}.story-text h2{font-size:30px}.story-text>p:not(.overline){font-size:13px}.handwritten{font-size:14px}.how{padding:83px 22px}.steps{grid-template-columns:1fr;gap:10px}.steps>div{padding:23px}.steps h3{margin:9px 0;font-size:17px}.steps p{margin:0;font-size:13px}.closing{min-height:440px;align-items:flex-start;margin:0 18px 70px;border-radius:23px;background-position:72% center}.closing:before{background:linear-gradient(180deg,#edf2e9fd,#edf2e9ed 45%,transparent 100%)}.closing-copy{padding:33px 22px}.closing h2{font-size:31px}.closing-copy>p:not(.overline){font-size:12px}footer{padding:30px 22px 100px;flex-wrap:wrap;gap:10px}footer>span{width:100%;flex-basis:100%}footer div{width:100%;justify-content:space-between;margin-top:10px}.mobile-sticky{display:block;position:fixed;bottom:0;left:0;right:0;z-index:20;padding:9px 16px calc(9px + env(safe-area-inset-bottom));background:#ffffffea;backdrop-filter:blur(16px);border-top:1px solid #e3eae4}.mobile-sticky a{display:flex;justify-content:center;gap:28px;align-items:center;min-height:51px;border-radius:100px;background:linear-gradient(135deg,#348666,#1c5e45);color:white;font-size:14px;font-weight:800;box-shadow:0 8px 18px #1c604528}}@media(max-width:370px){.hero h1{font-size:34px}.navcta{padding:12px 10px}.cards{gap:8px}.picture{height:130px}.cardtitle h3{font-size:14px}}
/* Apple-inspired understated photo caption: readable without a heavy badge. */
.story-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,rgba(15,35,27,.10) 45%,rgba(11,27,21,.68) 100%);pointer-events:none}.story-image .handwritten{top:auto;bottom:32px;right:34px;z-index:2;font-style:normal;transform:none;text-align:right;color:#fff;font-size:clamp(21px,2vw,29px);font-weight:800;letter-spacing:-.045em;line-height:1.48;text-shadow:0 2px 14px rgba(0,0,0,.48),0 1px 3px rgba(0,0,0,.3)}@media(max-width:700px){.story-image .handwritten{top:auto;bottom:24px;right:22px;font-size:25px;line-height:1.4}.story-image::after{background:linear-gradient(180deg,transparent 20%,rgba(13,32,24,.10) 40%,rgba(13,32,24,.74) 100%)}}

/* Warm ivory / peach / sage Apple-inspired refinement */
:root{--ink:#303d32;--forest:#438567;--muted:#70766a;--cream:#fffaf3;--sage:#f0f4e9}body{background:var(--cream);color:var(--ink)}.header nav a{color:#455b48}.header nav .navCta{background:#438567;color:white;box-shadow:0 6px 20px #67774e24}.hero{min-height:615px;padding-bottom:62px}.hero h1{letter-spacing:-3.3px}.hero h1 span{color:#41916e}.eyebrow{color:#6d856b}.hero-copy>p,.hero-foot{color:#697668}.hero-image{box-shadow:0 20px 55px #806a4a2b;background-color:#fae8d6}.round-icon{background:#f4e8d7;color:#498366}.primary{background:linear-gradient(135deg,#5c9b76,#347957);box-shadow:0 9px 23px #48774e38,inset 0 1px #ffffff59}.secondary,.white{background:#fffefb;border-color:#e9e7dd;box-shadow:0 5px 19px #66553c17}.ribbon{background:#f3f1e5;border-color:#ede9dc}.ribbon b{color:#507b57}.ribbon span{color:#787b6f}.features{padding-top:100px}.feature{box-shadow:0 10px 28px #6c5b3f1b;border:1px solid #f2eee5}.feature:hover{box-shadow:0 16px 32px #6c5b3f26}.story{background:#f7eadb;box-shadow:0 14px 37px #806a4a1f}.how{padding-top:90px;padding-bottom:100px}.steps>div{border-color:#eee8db;box-shadow:0 4px 19px #85785a0f}.closing{box-shadow:0 18px 38px #806a4a22}.button{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1)}.button:active,.navCta:active,.mobile-sticky a:active{transform:scale(.978)}.float-card{animation:none;box-shadow:0 11px 28px #443e3026}.feature{transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s cubic-bezier(.2,.8,.2,1)}@media(max-width:700px){.hero{padding-top:27px;gap:19px}.hero h1{font-size:clamp(34px,8.4vw,45px);line-height:1.3}.hero-foot{margin-top:19px}.hero-image{height:350px;min-height:350px;background-position:center 44%}.features{padding-top:74px}.float-card{animation:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* OUR STORY founder narrative: warm editorial copy and comfortable long-form rhythm */
.story-text{align-self:center}.story-text h2{font-size:clamp(28px,2.65vw,39px);line-height:1.5;word-break:keep-all}.story-text>p:not(.overline){font-size:14px;line-height:1.94;color:#576b5a;margin:0 0 16px;word-break:keep-all}.story-text>p strong{color:#275e43;font-weight:800}.story-signature{color:#498468;font-size:12px;font-weight:750;line-height:1.6;margin:11px 0 25px}.story-signature span{color:#e39c81;font-size:19px}.story{min-height:565px}.story-text{padding-top:52px;padding-bottom:50px}@media(max-width:700px){.story-text{padding:35px 24px 42px}.story-text h2{font-size:26px;letter-spacing:-1.3px;line-height:1.5}.story-text>p:not(.overline){font-size:13px;line-height:1.85;margin-bottom:14px}.story-signature{font-size:11px;margin-bottom:24px}.story{min-height:auto}}

/* Founder story — real Chihuahua & Pomeranian experience; isolated preview */
.story{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);scroll-margin-top:90px}
.story-text{padding:56px clamp(30px,4.5vw,66px);min-width:0}
.story-text h2{letter-spacing:-.055em;line-height:1.45;margin:16px 0 22px}
.story-text>p:not(.overline){color:#526755;font-size:14px;line-height:1.93;margin:0 0 16px;word-break:keep-all}
.story-text>p strong{color:#245b40}
.story-quote{margin:25px 0 25px;padding:20px 24px;background:rgba(255,255,255,.68);border:1px solid rgba(111,143,116,.22);border-left:4px solid #75a58a;border-radius:0 16px 16px 0;word-break:keep-all}
.story-quote span{display:block;font-size:12px;color:#738676;font-weight:700;margin-bottom:8px}
.story-quote strong{display:block;font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:#2a6149;letter-spacing:-.04em}
.story-signature{margin:13px 0 24px}
@media(max-width:900px) and (min-width:701px){.story{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}.story-text{padding:40px 28px}.story-text h2{font-size:28px}.story-quote{padding:15px 17px}}
@media(max-width:700px){.story{display:flex;flex-direction:column-reverse}.story-text{padding:35px 24px 43px}.story-text h2{font-size:clamp(26px,6.4vw,31px);margin:13px 0 20px}.story-text>p:not(.overline){font-size:13px;line-height:1.85;margin-bottom:15px}.story-quote{margin:22px 0;padding:18px 17px}.story-quote strong{font-size:17px}.story-signature{font-size:11px;line-height:1.7}.story-image{height:280px}}
/* Usogae AI care motion story — independent marketing site, 2026-10-26 */
.care-section{padding:104px 30px 116px;scroll-margin-top:30px}
.care-section .section-heading{max-width:800px;margin:0 auto;text-align:center}
.care-section .section-heading h2{font-size:clamp(31px,3.4vw,47px);letter-spacing:-.042em;line-height:1.38;margin:19px 0}
.care-section .section-heading>p:last-child{color:#667669;font-size:16px;line-height:1.95}
.care-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-top:46px}
.care-steps article{min-width:0;min-height:230px;border-radius:25px;background:#fffdf9;border:1px solid #ebe7de;padding:28px 24px;box-shadow:0 12px 32px rgba(91,81,61,.075);transition:transform .23s cubic-bezier(.22,1,.36,1),box-shadow .23s cubic-bezier(.22,1,.36,1)}
.care-steps article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#eaf2e8;color:#397a56;font:800 14px 'DM Sans',sans-serif;margin-bottom:21px}
.care-steps article:nth-child(2)>span{background:#f8ead9;color:#986642}.care-steps article:nth-child(3)>span{background:#f9e8e3;color:#aa6d59}
.care-steps article:nth-child(4)>span{background:#e7f0ed;color:#3b7971}
.care-steps h3{font-size:19px;letter-spacing:-.048em;color:#303d32;line-height:1.42;margin:0 0 13px;word-break:keep-all}
.care-steps p{font-size:13px;line-height:1.85;color:#657468;margin:0;word-break:keep-all}
.comparison{margin-top:70px;padding:48px 44px 43px;background:linear-gradient(160deg,#fffaf2 0%,#fffefa 49%,#f5f8ef 100%);border:1px solid #ece5d8;border-radius:34px;box-shadow:0 22px 55px rgba(94,81,57,.085);position:relative}
.comparison-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.comparison-head h3{font-size:clamp(29px,3vw,40px);font-weight:800;line-height:1.3;letter-spacing:-.047em;margin:11px 0 13px;color:#283d32;word-break:keep-all}
.comparison-head p:last-child{font-size:15px;color:#657367;line-height:1.85;margin:0}
.comparison-head .overline{font-size:12px!important;letter-spacing:1.3px}
.compare-heart{font-size:75px;font-weight:300;color:#e3a18b;line-height:1}
.difference-showcase{display:grid;grid-template-columns:minmax(0,1fr) 55px minmax(0,1fr);gap:12px;align-items:center;margin-top:34px}
.diff-lane{min-width:0;min-height:465px;padding:27px 29px;border-radius:25px;border:1px solid #e9e9e0;background:#fff;position:relative}
.diff-generic{background:#f7f6f2;border-color:#eae8e1}
.diff-usogae{background:linear-gradient(160deg,#f4fbf1,#fefefa 87%);border-color:#cfe7d4;box-shadow:0 14px 29px rgba(60,115,76,.095)}
.diff-lane-header{display:flex;gap:13px;align-items:center;padding-bottom:20px;border-bottom:1px solid #e6e8df}
.diff-lane-header .diff-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:#e9e9e4;color:#69776b;font-size:25px;flex-shrink:0}
.diff-usogae .diff-icon{background:#e0f3e4;color:#38875d}
.diff-lane-header span:last-child{display:grid;gap:4px}
.diff-lane-header small{font-size:12px;color:#66776a}
.diff-lane-header strong{font-size:17px;letter-spacing:-.035em;line-height:1.35;word-break:keep-all}
.diff-versus{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;font-weight:900;font-size:13px;letter-spacing:-.04em;z-index:1;color:#986f50;background:#fff4e5;border:1px solid #f1e3ce;box-shadow:0 5px 17px #7d63431b}
.diff-flow{padding:20px 0 12px;display:flex;flex-direction:column;align-items:stretch}
.diff-node{display:flex;gap:13px;align-items:center;min-height:52px;font-size:14px;font-weight:730;line-height:1.6;border-radius:14px;padding:10px 15px;background:#fff;color:#48574c;border:1px solid #e9e9e3;word-break:keep-all}
.diff-node-index{color:#8b9589;font-weight:800;font-size:11px;letter-spacing:.5px;flex-shrink:0}
.diff-progress .diff-node{border-color:#dfebdb;color:#29563d;background:#fffefa;box-shadow:0 4px 14px #63926e10}
.diff-progress .diff-node-index{color:#4b9769}
.diff-connector{position:relative;align-self:flex-start;width:2px;height:17px;margin-left:24px;background:#dce2dc;overflow:hidden}
.diff-progress .diff-connector{background:#d5e5d7}
.diff-progress .diff-connector:after{content:"";display:block;width:100%;height:100%;background:#4eaf75;transform:scaleY(0);transform-origin:top}
.lane-note{font-size:12px;line-height:1.75;color:#7c857c;margin:11px 0 0}
.diff-usogae .lane-note{color:#438362}
.compare-replay-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:15px 3px 24px;font-size:12px;color:#778175}
.compare-replay{font:800 12px 'DM Sans','Noto Sans KR',sans-serif;cursor:pointer;border:1px solid #dce6d8;background:#fffefa;color:#3e7654;border-radius:100px;padding:11px 17px;display:inline-flex;gap:8px;align-items:center;min-height:42px;transition:background .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1)}
.compare-replay:hover{background:#ecf6eb}.compare-replay:active{transform:scale(.97)}
.compare-replay:focus-visible{outline:3px solid #e4aa63;outline-offset:3px}
.comparison-detail{padding:24px 24px 17px;border-radius:22px;border:1px solid #e7e5da;background:#fff}
.comparison-detail h4{font-size:21px;letter-spacing:-.035em;color:#334d3a;margin:0 0 6px}
.comparison-detail>p{font-size:13px;color:#748174;line-height:1.6;margin:0 0 17px}
.comparison-scroll{overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid #e6e6dd;border-radius:15px}
.comparison-scroll:focus-visible{outline:3px solid #e4aa63}
.comparison-grid{display:grid;grid-template-columns:minmax(135px, .76fr) repeat(2,minmax(180px,1fr));min-width:615px;background:#fff;border:0}
.comparison-grid>div{padding:15px 16px;border-right:1px solid #e7e9e2;border-bottom:1px solid #e7e9e2;font-size:13px;line-height:1.65;color:#5e7062}
.comparison-grid>div:nth-child(3n){border-right:0;background:#f5fbf3;color:#366947}
.comparison-grid>div:nth-last-child(-n+3){border-bottom:0}
.comparison-grid>div:nth-child(-n+3){font-weight:800;background:#f7f6f1;color:#536256}
.comparison-grid>div.compare-usogae{background:#e7f3e7;color:#2d7450}
.comparison-grid .compare-row-title{font-weight:800;color:#415748;background:#fcfbf7}
.comparison-swipe{display:none}
.comparison-note{font-size:12px;color:#7c8178;line-height:1.8;margin:19px 4px}
.compare-cta{margin:4px 0 0}
@media(hover:hover) and (pointer:fine){.care-steps article:hover{transform:translateY(-4px);box-shadow:0 17px 37px rgba(91,81,61,.12)}}
@media(max-width:1050px){.care-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.care-steps article{min-height:190px}.comparison{padding:38px 28px}.diff-lane{padding:23px 18px}.diff-node{font-size:12px;padding:9px 11px}.diff-lane-header strong{font-size:15px}}
@media(max-width:700px){.care-section{padding:82px 17px 80px}.care-section .section-heading h2{font-size:clamp(30px,7vw,35px)}.care-section .section-heading>p:last-child{font-size:14px}.care-steps{gap:12px;margin-top:32px;grid-template-columns:1fr}.care-steps article{min-height:auto;padding:23px 22px}.care-steps article>span{margin-bottom:12px}.care-steps h3{font-size:18px}.care-steps p{font-size:13px}.comparison{margin-top:49px;padding:28px 17px 22px;border-radius:26px}.comparison-head h3{font-size:28px}.comparison-head p:last-child{font-size:13px}.compare-heart{font-size:47px}.difference-showcase{grid-template-columns:1fr;gap:13px;margin-top:23px}.diff-lane{min-height:auto;padding:22px 20px}.diff-versus{width:39px;height:39px;margin:-3px auto;font-size:11px}.diff-node{font-size:13px}.diff-lane-header strong{font-size:16px}.compare-replay-row{align-items:flex-start}.compare-replay-row>span{max-width:175px;line-height:1.6}.comparison-detail{padding:20px 13px 13px;border-radius:18px}.comparison-detail h4{font-size:19px}.comparison-detail>p{font-size:12px}.comparison-grid>div{font-size:12px;padding:13px 12px}.comparison-swipe{display:block;font-size:11px!important;margin-top:10px!important}.comparison-note{font-size:11px}.compare-cta{width:100%;white-space:normal;text-align:center}}
/* Purposeful entrance-only motion, GPU-friendly, JS progressive enhancement. */
html.motion-ready .care-steps article{opacity:0;transform:translateY(15px);transition:opacity .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1),box-shadow .23s cubic-bezier(.22,1,.36,1)}
html.motion-ready .care-steps.is-visible article{opacity:1;transform:translateY(0)}
html.motion-ready .care-steps.is-visible article:nth-child(2){transition-delay:.08s}
html.motion-ready .care-steps.is-visible article:nth-child(3){transition-delay:.16s}
html.motion-ready .care-steps.is-visible article:nth-child(4){transition-delay:.24s}
html.motion-ready .difference-showcase .diff-progress .diff-node{opacity:0;transform:translateY(8px)}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-node{animation:careNodeIn .36s cubic-bezier(.22,1,.36,1) both}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-node:nth-child(1){animation-delay:.12s}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-node:nth-child(3){animation-delay:.31s}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-node:nth-child(5){animation-delay:.50s}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-node:nth-child(7){animation-delay:.69s}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-connector:after{animation:careLinkFill .2s cubic-bezier(.22,1,.36,1) both}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-connector:nth-child(2):after{animation-delay:.25s}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-connector:nth-child(4):after{animation-delay:.44s}
html.motion-ready .difference-showcase.is-visible .diff-progress .diff-connector:nth-child(6):after{animation-delay:.63s}
@keyframes careNodeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes careLinkFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){html.motion-ready .care-steps article,html.motion-ready .difference-showcase .diff-progress .diff-node{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}html.motion-ready .difference-showcase.is-visible .diff-progress .diff-connector:after{animation:none!important;transform:scaleY(1)!important}.compare-replay{transition:none!important}}

.compare-replay[hidden]{display:none!important}

body{font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR",sans-serif}

/* Long-term memory spotlight — Usogae's strongest differentiator. */
.memory-highlight{position:relative;margin:48px 0 58px;border:1px solid #ecdcc7;border-radius:31px;padding:41px 38px 32px;background:linear-gradient(145deg,#fff8ef 0%,#fffdf9 45%,#eef7ec 100%);box-shadow:0 18px 42px rgba(121,90,55,.085);overflow:hidden;isolation:isolate}
.memory-highlight:before{content:"";position:absolute;inset:-100px -100px auto auto;width:310px;height:310px;background:radial-gradient(circle,rgba(248,210,168,.27) 0%,transparent 72%);pointer-events:none;z-index:-1}
.memory-heading{display:flex;justify-content:space-between;align-items:center;gap:22px}
.memory-heading h3{font-size:clamp(28px,3vw,39px);line-height:1.34;letter-spacing:-.05em;color:#304637;word-break:keep-all;margin:12px 0 15px}
.memory-heading p:not(.overline){font-size:15px;color:#6d766b;line-height:1.85;margin:0}
.memory-heading p strong{color:#3b7953;font-weight:800}
.memory-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100px;height:100px;border-radius:32px;background:#fff6f0;border:1px solid #f3dfd4;box-shadow:0 12px 22px rgba(166,116,88,.13);color:#df9f82;font-size:45px;flex-shrink:0;transform:rotate(7deg)}
.memory-badge small{font-size:10px;color:#98766b;font-weight:800;white-space:nowrap}
.memory-timeline{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr);gap:10px;align-items:stretch;margin-top:35px}
.memory-phase{position:relative;min-width:0;background:#fff;border:1px solid #eae9df;border-radius:22px;padding:23px 20px;min-height:260px;box-shadow:0 10px 24px rgba(82,90,59,.058)}
.memory-phase:nth-of-type(2){background:#f8fff6;border-color:#cfe5d0}
.memory-phase-tag{font-size:12px;font-weight:800;color:#5f8267;display:flex;align-items:center;gap:10px}
.memory-phase-tag>span{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:#e6f0e5;color:#39815c;font:800 11px 'DM Sans',system-ui,sans-serif}
.memory-phase-icon{font-size:34px;color:#91bd91;height:44px;margin:20px 0 7px}
.memory-phase:nth-of-type(2) .memory-phase-icon{color:#43976b}
.memory-phase h4{font-size:17px;line-height:1.48;color:#344738;letter-spacing:-.04em;margin:0 0 10px;word-break:keep-all}
.memory-phase p{color:#6b786b;line-height:1.75;font-size:12px;word-break:keep-all;margin:0 0 42px}
.memory-chip{position:absolute;bottom:18px;left:19px;right:19px;border-radius:100px;padding:9px 12px;background:#f5f3ec;color:#697c66;font-size:11px;font-weight:800;text-align:center}
.memory-chip-hot{background:#e7f5e6;color:#348357}
.memory-phase-arrow{align-self:center;justify-self:center;display:grid;place-items:center;color:#8dba90;font-size:23px;font-weight:700;opacity:.8}
.memory-bottom{display:flex;align-items:center;gap:17px;padding:23px 25px;margin-top:22px;background:#eef6e9;border:1px solid #e3eddd;border-radius:18px}
.memory-bottom-icon{font-size:27px;color:#569574;flex-shrink:0}
.memory-bottom p{font-size:13px;line-height:1.85;color:#5f7261;margin:0}
.memory-bottom p strong{font-size:16px;color:#356948}
.memory-disclaimer{color:#888779;font-size:11px;line-height:1.65;margin:16px 0 0}
@media(max-width:1050px){.memory-timeline{gap:7px;grid-template-columns:minmax(0,1fr) 21px minmax(0,1fr) 21px minmax(0,1fr)}.memory-phase{padding:19px 14px}.memory-phase h4{font-size:15px}}
@media(max-width:700px){.memory-highlight{margin:36px 0 45px;padding:29px 17px 23px;border-radius:24px}.memory-heading h3{font-size:clamp(25px,7vw,33px)}.memory-heading p:not(.overline){font-size:13px}.memory-badge{width:60px;height:60px;border-radius:20px;font-size:27px;transform:rotate(6deg)}.memory-badge small{display:none}.memory-timeline{display:flex;flex-direction:column;gap:10px;margin-top:22px}.memory-phase{min-height:190px;padding:19px 19px 18px;border-radius:18px}.memory-phase-icon{display:none}.memory-phase h4{font-size:16px;margin-top:16px}.memory-phase p{font-size:12px;padding-bottom:8px;margin-bottom:36px}.memory-chip{bottom:16px;left:18px;right:18px}.memory-phase-arrow{height:22px;transform:rotate(90deg)}.memory-bottom{padding:17px 17px;margin-top:19px;gap:10px}.memory-bottom p strong{font-size:14px}.memory-bottom p{font-size:12px}.memory-disclaimer{font-size:10px}}
/* progressive enhancement: cards are never hidden if scripts are unavailable */
html.motion-ready .memory-timeline .memory-phase{transition:opacity .47s cubic-bezier(.22,1,.36,1),transform .47s cubic-bezier(.22,1,.36,1);opacity:0;transform:translateY(16px)}
html.motion-ready .memory-timeline.is-visible .memory-phase{opacity:1;transform:translateY(0)}
html.motion-ready .memory-timeline.is-visible .memory-phase:nth-of-type(2){transition-delay:.17s}
html.motion-ready .memory-timeline.is-visible .memory-phase:nth-of-type(3){transition-delay:.34s}
html.motion-ready .memory-timeline .memory-phase-arrow{transition:opacity .4s cubic-bezier(.22,1,.36,1);opacity:.2}
html.motion-ready .memory-timeline.is-visible .memory-phase-arrow{opacity:1}
@media(prefers-reduced-motion:reduce){html.motion-ready .memory-timeline .memory-phase{opacity:1!important;transform:none!important;transition:none!important}html.motion-ready .memory-timeline .memory-phase-arrow{opacity:1!important;transition:none!important}}


/* === Soft editorial landing refresh | isolated preview only | 2026-10-26 === */
:root {
  --ink:#435349;
  --forest:#567b63;
  --muted:#778379;
  --cream:#fcfaf6;
  --sage:#f1f5ed;
}
html { scroll-behavior:smooth; }
body { color:var(--ink); background:#fcfaf6; }
.header {
  background:rgba(252,250,246,.95);
  border-bottom:1px solid rgba(116,133,111,.11);
  box-shadow:none;
  backdrop-filter:blur(18px);
}
.header nav a { color:#657369; font-weight:650; }
.header nav a:hover { color:#426e54; }
.navcta,.header .navcta {
  background:#648a71; color:#fff; border:1px solid #648a71;
  box-shadow:0 6px 18px rgba(77,118,84,.13);
}
.navcta:hover,.header .navcta:hover { background:#527b60; }
.hero {
  position:relative;
  isolation:isolate;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  width:min(1330px,calc(100% - 52px));
  max-width:1330px;
  min-height:630px;
  margin:22px auto 0;
  padding:66px clamp(34px,5.6vw,82px);
  border-radius:38px;
  overflow:hidden;
  background-color:#f4eee3;
  background-image:
    linear-gradient(90deg,#fffcf6 0%,rgba(255,252,246,.99) 24%,rgba(255,252,246,.94) 39%,rgba(255,252,246,.7) 54%,rgba(255,252,246,.04) 83%),
    url('/images/hero-owner-wheat-pexels-5281967.jpg');
  background-position:center,center 54%;
  background-size:cover,cover;
  background-repeat:no-repeat;
  box-shadow:0 18px 58px rgba(102,91,70,.08);
}
.hero:before {
  content:"";
  position:absolute; z-index:0; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,252,247,.20),transparent 53%,rgba(250,242,232,.23));
}
.hero-copy {
  position:relative; z-index:1;
  width:min(57%,620px); max-width:620px;
  padding:0; margin:0;
}
.hero-image { display:none; }
.eyebrow { color:#688670; font-size:13px; letter-spacing:.035em; font-weight:750; }
.eyebrow .line { background:#93b89c; }
.hero h1 {
  margin:23px 0 21px;
  color:#485849;
  font-size:clamp(45px,4.7vw,68px);
  line-height:1.30;
  letter-spacing:-.06em;
  font-weight:800;
  word-break:keep-all;
}
.hero h1 span { color:#669478; }
.hero-copy>p {
  color:#67766a; font-size:clamp(15px,1.28vw,17px);
  line-height:1.91; letter-spacing:-.018em; word-break:keep-all;
}
.actions { gap:12px; margin-top:33px; }
.button { border-radius:100px; }
.button.primary,.primary {
  background:#698e73; border-color:#698e73;
  box-shadow:0 10px 22px rgba(81,121,87,.17);
}
.button.primary:hover { background:#557b62; box-shadow:0 10px 24px rgba(81,121,87,.21); }
.button.secondary,.button.white {
  background:rgba(255,255,255,.80);
  border:1px solid rgba(112,139,119,.17);
  color:#58715e;
  box-shadow:0 6px 18px rgba(119,104,84,.055);
  backdrop-filter:blur(10px);
}
.hero-foot { margin-top:37px; color:#718174; font-size:13px; }
.round-icon { color:#729e81; background:rgba(255,255,255,.8); }
.ribbon {
  width:min(1240px,calc(100% - 52px));
  margin:24px auto 0;
  border:1px solid #eaeee5;
  border-radius:18px;
  background:#f5f6ef;
  box-shadow:none;
}
.ribbon b { color:#66826d; }
.ribbon span { color:#798779; }
.features { padding-top:105px; }
.section-heading .overline,.overline { color:#72907b; }
.section-heading h2,.how h2 { color:#44594a; letter-spacing:-.052em; }
.section-heading>p:last-child { color:#738174; }
.feature {
  background:#fffefb;
  border:1px solid rgba(147,165,142,.18);
  border-radius:25px;
  box-shadow:0 8px 28px rgba(94,106,88,.055);
  transform:none;
}
.feature:hover { box-shadow:0 15px 30px rgba(94,106,88,.10); }
.picture { border-radius:19px; }
.cardcontent h3 { color:#435949; }
.cardcontent p { color:#788378; }
.cardcontent a { background:#eff5ed; color:#578365; }
.care-section { background:#fafbf7; }
.care-steps article {
  background:#fffefa; border-color:#e5ebe0;
  box-shadow:0 8px 24px rgba(109,134,110,.045);
}
.care-steps h3 { color:#4c6956; }
.memory-highlight {
  background:linear-gradient(135deg,#fff9f0 0%,#fffdf8 52%,#f1f5ec 100%);
  border:1px solid #ede8dc;
  box-shadow:0 12px 35px rgba(99,112,88,.06);
}
.memory-heading h3,.comparison-head h3 { color:#4a6050; }
.memory-badge { background:#fffaf6; box-shadow:0 8px 20px rgba(130,111,92,.075); }
.memory-phase { background:rgba(255,255,255,.9); box-shadow:0 7px 20px rgba(89,113,91,.04); }
.memory-bottom { background:#edf4ea; }
.comparison {
  background:#fffdf9;
  border-color:#e9ebe3;
  box-shadow:0 12px 36px rgba(104,114,91,.05);
}
.diff-usogae {
  background:linear-gradient(155deg,#f2f8f0,#fffefa);
  border-color:#dbe8d8;
  box-shadow:0 7px 24px rgba(91,127,91,.065);
}
.diff-generic { background:#f8f8f4; }
.comparison-detail { background:#fffefa; }
.story {
  background:#f7f2e9;
  box-shadow:0 14px 39px rgba(102,91,70,.065);
  border:1px solid #eee8dc;
  border-radius:32px;
  overflow:hidden;
}
.story-text { padding-top:59px; padding-bottom:58px; }
.story-text h2 { color:#45594b; font-size:clamp(27px,2.7vw,39px); line-height:1.48; }
.story-text>p:not(.overline) { color:#6b766b; font-size:14px; line-height:2; }
.story-quote {
  background:rgba(255,255,255,.70);
  border-color:#e4ebdf;
  border-left-color:#a2bfa4;
  box-shadow:none;
}
.story-quote strong { color:#54745e; font-weight:750; }
.story-signature { color:#7b927f; }
.story-image { background-position:center 46%; }
.how { background:#fcfaf6; }
.steps>div {
  background:#fffefb;
  border-color:#e7ebe2;
  box-shadow:0 7px 22px rgba(101,117,101,.055);
}
.steps h3 { color:#496150; }
.steps p { color:#748076; }
.closing {
  background-color:#ecf2e9;
  box-shadow:0 12px 38px rgba(95,116,87,.07);
}
.closing:before {
  background:linear-gradient(90deg,rgba(242,247,237,.99) 0%,rgba(242,247,237,.89) 45%,rgba(242,247,237,.12) 90%);
}
.closing h2 { color:#4b6854; }
footer { background:#faf9f4; color:#7a867a; }
footer a { color:#5f7964; }
@media(max-width:1050px) {
  .hero { min-height:590px; }
  .hero-copy { width:60%; }
  .hero h1 { font-size:clamp(37px,5vw,53px); }
  .hero-copy>p { font-size:15px; }
}
@media(max-width:700px) {
  .header { background:rgba(252,250,246,.96); }
  .hero {
    display:flex;
    align-items:flex-start;
    width:calc(100% - 26px);
    min-height:680px;
    margin:13px auto 0;
    padding:42px 23px 310px;
    border-radius:27px;
    background-color:#f3e9d9;
    background-image:
      linear-gradient(180deg,#fffcf6 0%,rgba(255,252,246,.99) 28%,rgba(255,252,246,.91) 47%,rgba(255,252,246,.15) 76%,rgba(255,252,246,.02) 100%),
      url('/images/hero-owner-wheat-pexels-5281967.jpg');
    background-position:center,64% center;
    background-size:cover,cover;
  }
  .hero-copy { width:100%; max-width:none; padding:0; }
  .hero h1 { font-size:clamp(37px,9vw,47px); line-height:1.37; letter-spacing:-.06em; margin:17px 0; }
  .hero-copy>p { font-size:14px; line-height:1.85; }
  .eyebrow { font-size:11px; }
  .actions { margin-top:24px; gap:10px; }
  .actions .button { width:100%; }
  .hero-foot { margin-top:22px; font-size:11px; }
  .ribbon { width:calc(100% - 26px); margin-top:14px; padding:17px 12px; border-radius:18px; gap:8px 12px; }
  .ribbon b { font-size:11px; }
  .features { padding-top:77px; }
  .section-heading h2,.how h2 { font-size:clamp(30px,8vw,35px); }
  .feature { border-radius:18px; }
  .picture { border-radius:12px; }
  .care-section { padding-top:82px; }
  .story { border-radius:25px; }
  .story-text { padding:33px 24px 40px; }
  .story-text h2 { font-size:clamp(25px,6.8vw,31px); }
  .story-text>p:not(.overline) { font-size:13px; line-height:1.91; }
  .story-image { background-position:center 42%; }
  .closing:before {
    background:linear-gradient(180deg,rgba(243,247,238,.99) 0%,rgba(243,247,238,.89) 53%,rgba(243,247,238,.04) 100%);
  }
  .mobile-sticky { background:rgba(252,250,246,.96); border-color:#e2e9df; }
  .mobile-sticky a { background:#63886e; box-shadow:0 7px 20px rgba(91,127,95,.17); }
}
@media(max-width:380px) {
  .hero { min-height:700px; padding-bottom:300px; }
  .hero h1 { font-size:34px; }
  .hero-foot { margin-top:18px; }
}


/* Refined, consistent outline icon system across the complete landing page. */
svg.ui-icon{
  display:inline-block;width:20px;height:20px;flex:none;box-sizing:content-box;
  fill:none;stroke:currentColor;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:middle;
}
.header .navcta,.button,.mobile-sticky a{align-items:center}
.header .navcta>span,.button>span,.mobile-sticky a>span{
  display:inline-flex;align-items:center;justify-content:center;
}
.header .navcta .ui-icon,.button .ui-icon,.mobile-sticky .ui-icon{width:16px;height:16px}
.header .navcta>span{padding-left:8px}
.button>span{margin-left:1px}
.round-icon{background:rgba(255,255,255,.87);border:1px solid #e4eade}
.round-icon .ui-icon{width:23px;height:23px;stroke-width:1.65}
.float-card .emoji{display:inline-flex;align-items:center;justify-content:center}
.float-card .emoji .ui-icon{width:24px;height:24px}
.ribbon b{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:720;letter-spacing:-.02em;
}
.ribbon b .ui-icon{width:16px;height:16px;stroke-width:1.8;color:#72937b}
.feature .bubble{
  background:rgba(255,255,255,.94);
  color:#648673;border:1px solid rgba(117,142,117,.16);
  border-radius:13px;box-shadow:0 5px 14px rgba(74,89,73,.07)
}
.feature .bubble .ui-icon{width:22px;height:22px;stroke-width:1.75}
.feature .cardcontent a{display:grid;place-items:center}
.feature .cardcontent a .ui-icon{width:17px;height:17px;stroke-width:1.9}
.memory-badge .ui-icon{width:36px;height:36px;stroke-width:1.5;color:#8da78d}
.memory-badge small{font-size:10px}
.memory-phase-icon{display:flex;align-items:center;justify-content:flex-start}
.memory-phase-icon .ui-icon{width:32px;height:32px;stroke-width:1.7}
.memory-phase-arrow .ui-icon{width:20px;height:20px;stroke-width:1.8}
.memory-bottom-icon{display:inline-flex;align-items:center}
.memory-bottom-icon .ui-icon{width:27px;height:27px;stroke-width:1.7}
.compare-heart{display:inline-flex;align-items:center;justify-content:center;color:#d8a69b}
.compare-heart .ui-icon{width:58px;height:58px;stroke-width:1.25}
.diff-lane-header .diff-icon .ui-icon{width:23px;height:23px;stroke-width:1.65}
.diff-usogae .diff-icon .ui-icon{color:#619276}
.diff-lane .lane-note>.ui-icon,.diff-lane .lane-note>span .ui-icon{width:16px;height:16px}
.diff-usogae .lane-note>span{display:inline-flex;vertical-align:middle;margin-right:5px}
.compare-replay>span{display:inline-flex;align-items:center}
.compare-replay .ui-icon{width:16px;height:16px}
.story-signature>span{display:inline-flex;vertical-align:middle;margin-left:5px;color:#cf9b94}
.story-signature .ui-icon{width:17px;height:17px;stroke-width:1.6}
.story-image .handwritten .ui-icon{width:20px;height:20px;vertical-align:-.12em;stroke-width:1.7}
.how .steps>div{position:relative}
.how .how-icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-top:17px;margin-bottom:6px;
  color:#648b74;background:#f0f6ed;
  border:1px solid #e4eee2;border-radius:15px;
}
.how .how-icon .ui-icon{width:22px;height:22px;stroke-width:1.75}
@media(max-width:700px){
  .ribbon{gap:11px 15px}
  .ribbon b{font-size:11px;gap:5px}
  .ribbon b .ui-icon{width:14px;height:14px}
  .feature .bubble{border-radius:11px}
  .feature .bubble .ui-icon{width:18px;height:18px}
  .memory-badge .ui-icon{width:26px;height:26px}
  .compare-heart .ui-icon{width:40px;height:40px}
  .memory-phase-icon{display:flex!important;height:27px;margin:10px 0 4px}
  .memory-phase-icon .ui-icon{width:23px;height:23px}
  .memory-phase h4{margin-top:8px}
  .memory-phase{min-height:208px}
  .story-image .handwritten .ui-icon{width:17px;height:17px}
  .how .how-icon{width:40px;height:40px;margin-top:12px}
  .how .how-icon .ui-icon{width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){.ui-icon{animation:none!important;transition:none!important}}


/* ===================================================================
   Readability-first refresh: explicit hierarchy, contrast, clear CTAs.
   Isolated preview only. No production landing/app changes.
   =================================================================== */
:root{
  --ink:#293d32;--forest:#285f46;--muted:#506358;--cream:#fdfaf5;
  --sage:#eaf3e9;
}
body{background:#fdfaf5;color:#293d32;font-size:16px;line-height:1.65}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #d48a4e;outline-offset:4px
}
.header nav a{font-size:14px;color:#3f5548}
.header .navcta{font-size:14px;font-weight:800;background:#286747;border-color:#286747;color:#fff}
.hero{box-shadow:0 16px 42px rgba(63,69,52,.09)}
.hero:before{background:linear-gradient(90deg,rgba(255,252,246,.19),transparent 75%)}
.eyebrow{font-size:14px;color:#4d6f57;font-weight:850}
.hero h1{color:#263b30;letter-spacing:-.058em;font-weight:830}
.hero h1 span{color:#327251}
.hero-copy>p{font-size:17px;line-height:1.85;color:#415b48;font-weight:520}
.hero-foot{font-size:13px;line-height:1.7;color:#506557}
.button{font-size:15px;font-weight:800;letter-spacing:-.02em}
.button.primary,.primary{background:#286747;border-color:#286747;color:white}
.button.primary:hover{background:#205b3d}
.button.secondary,.button.white{color:#285940;border-color:#ccd9cc;background:rgba(255,255,255,.92)}
.ribbon{padding:19px 20px;gap:16px 27px}
.ribbon>span{font-size:13px;color:#4a6150;font-weight:720}
.ribbon b{font-size:14px;font-weight:800;color:#315e45}
.ribbon b .ui-icon{width:19px;height:19px;color:#3f7859}
.features{padding:88px 28px 95px}
.overline,.section-heading .overline{font-size:13px!important;font-weight:850;letter-spacing:.03em;color:#386b4a!important}
.section-heading h2,.how h2{font-size:clamp(34px,3.8vw,47px);color:#263b30;line-height:1.32;margin:17px 0;letter-spacing:-.05em;font-weight:830}
.section-heading>p:last-child{font-size:16px;line-height:1.8;color:#516459}
.cards{margin-top:43px;gap:17px}
.feature{padding:9px 9px 16px;border:1px solid #e0e7de;border-radius:22px;box-shadow:0 8px 24px rgba(52,83,60,.065)}
.picture{height:204px;border-radius:14px}
.feature .bubble{width:42px;height:42px;background:rgba(255,255,255,.96);border-color:#d8e6d8}
.feature .bubble .ui-icon{width:22px;height:22px;color:#31654a}
.cardcontent{padding:17px 11px 4px;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.cardtitle h3{font-size:20px;line-height:1.3;color:#284432;letter-spacing:-.045em}
.cardtitle span{font-size:12px;color:#55745c;font-weight:700}
.cardcontent p{font-size:14px;color:#526257;line-height:1.65;min-height:49px;margin:0;word-break:keep-all}
.cardcontent a{
  position:static;display:inline-flex;width:auto;height:44px;margin-top:7px;
  border-radius:12px;align-self:stretch;padding:0 12px 0 14px;
  align-items:center;justify-content:space-between;
  font-size:13px;font-weight:820;color:#245b3d;
  background:#edf5ec;border:1px solid #d9e8d8;transition:background .16s
}
.cardcontent a:hover{background:#dcefdc}
.cardcontent a .ui-icon{height:18px;width:18px}
.story{margin:0 auto 0;min-height:unset;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);border-color:#e8e5dc}
.story-text{padding:48px clamp(28px,4vw,55px);align-self:center}
.story-text h2{font-size:clamp(30px,2.85vw,39px);font-weight:830;color:#2e4738;line-height:1.43;margin:14px 0 24px}
.story-text>p:not(.overline){font-size:15px;line-height:1.83;color:#46594b;margin-bottom:17px}
.story-text>p strong{color:#215a3d}
.story-quote{margin:22px 0;padding:18px 21px;background:#fffcf7;border-left-color:#398057}
.story-quote span{font-size:13px;color:#556b5a}
.story-quote strong{font-size:clamp(17px,1.6vw,21px);color:#23593d;line-height:1.5}
.story-signature{font-size:13px;font-weight:780;color:#507158;margin:10px 0 20px}
.story-image{min-height:100%;background-position:center 47%}
.story-image .handwritten{font-size:clamp(20px,2vw,27px)}
.care-section{padding:82px 28px 91px;scroll-margin-top:88px}
.care-section .section-heading{max-width:800px}
.care-section .section-heading h2{font-size:clamp(33px,3.6vw,46px);color:#283f32;line-height:1.3}
.care-section .section-heading>p:last-child{font-size:16px;line-height:1.75;color:#53675a}
.memory-highlight{margin:33px 0 36px;padding:32px 31px 25px;border-radius:26px;box-shadow:0 9px 29px rgba(63,91,66,.06)}
.memory-heading h3{font-size:clamp(27px,3vw,36px);color:#2b4533;line-height:1.36;margin:9px 0 11px}
.memory-heading p:not(.overline){font-size:15px;line-height:1.75;color:#4d6152}
.memory-heading p strong{color:#285e40}
.memory-badge{width:82px;height:82px;border-radius:23px;transform:none}
.memory-timeline{margin-top:28px}
.memory-phase{min-height:225px;padding:20px 18px 49px;border-radius:17px;box-shadow:0 7px 20px rgba(63,95,65,.04)}
.memory-phase-tag{font-size:13px;color:#2c6445;font-weight:800}
.memory-phase-icon{height:32px;margin:12px 0 8px;color:#468161}
.memory-phase-icon .ui-icon{width:25px;height:25px}
.memory-phase h4{font-size:17px;line-height:1.45;color:#2d4936;margin-bottom:8px}
.memory-phase p{font-size:13px;color:#4b5f51;line-height:1.65;margin:0 0 26px;padding:0}
.memory-chip{bottom:14px;left:14px;right:14px;font-size:12px;padding:8px 10px;color:#35573c}
.memory-bottom{padding:17px 20px;margin-top:17px}
.memory-bottom p{font-size:13px;color:#3d5946;line-height:1.6}
.memory-bottom p strong{font-size:15px;color:#29593f}
.memory-disclaimer{font-size:12px;color:#607064;line-height:1.65}
.comparison{margin-top:24px;padding:31px 31px 30px;border-radius:27px;box-shadow:0 9px 28px rgba(58,87,60,.045)}
.comparison-head h3{font-size:clamp(27px,2.8vw,36px);color:#2a4734;line-height:1.36;margin:10px 0}
.comparison-head p:last-child{font-size:15px;color:#53685b;line-height:1.65}
.compare-heart{align-self:flex-start}
.compare-heart .ui-icon{height:45px;width:45px}
.difference-showcase{margin-top:23px;gap:14px;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)}
.diff-lane{min-height:unset;padding:21px 20px;border-radius:20px}
.diff-lane-header{padding-bottom:13px}
.diff-lane-header small{font-size:12px;color:#4e6455;font-weight:700}
.diff-lane-header strong{font-size:17px;color:#293f31;line-height:1.4}
.diff-node{font-size:14px;min-height:45px;padding:9px 11px;color:#334e3a;line-height:1.45}
.diff-progress .diff-node{color:#26573c}
.diff-node-index{font-size:12px;color:#486958}
.diff-flow{padding:15px 0 6px}
.diff-connector{height:12px}
.lane-note,.diff-usogae .lane-note{font-size:12px;line-height:1.65;margin:12px 0 0;color:#4e6354}
.compare-cta{margin:18px 0 0;min-height:50px}
.comparison-note{font-size:12px;line-height:1.75;color:#59695d;margin:16px 0}
.comparison-detail{padding:0;border:1px solid #dce7dc;border-radius:16px;background:#fffefa;margin-top:20px}
.comparison-detail summary{
  list-style:none;cursor:pointer;padding:17px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#285b3e;font-size:15px;font-weight:850;min-height:54px
}
.comparison-detail summary::-webkit-details-marker{display:none}
.comparison-detail summary .summary-icon{
  width:26px;height:26px;display:inline-grid;place-items:center;flex:none;
  border-radius:50%;background:#eaf3e9;color:#275a3e;
  font-size:19px;font-weight:600;line-height:1
}
.comparison-detail[open] .summary-icon{transform:rotate(45deg)}
.comparison-detail-inner{padding:0 17px 18px}
.comparison-grid{min-width:615px}
.comparison-grid>div{font-size:13px;color:#354e3d}
.comparison-grid .compare-row-title{color:#345640}
.comparison-swipe{color:#52695a}
.how{padding:86px 28px 95px}
.how h2{margin-bottom:31px}
.steps{gap:16px}
.steps>div{padding:23px 23px 27px;border-color:#dee7de}
.steps h3{font-size:19px;color:#294934}
.steps p{font-size:14px;line-height:1.65;color:#536659}
.steps .how-icon{margin-top:13px;margin-bottom:8px}
.closing{min-height:355px;margin-bottom:70px;box-shadow:0 10px 28px rgba(62,88,61,.07)}
.closing h2{font-size:clamp(31px,3.3vw,44px);color:#274731}
.closing-copy>p:not(.overline){font-size:15px;color:#4f6657}
footer{font-size:14px}
footer a{font-size:14px;color:#3b6449}
/* Important information should never disappear while scrolling/loading. */
html.motion-ready .memory-timeline .memory-phase,
html.motion-ready .memory-timeline .memory-phase-arrow,
html.motion-ready .care-steps article,
html.motion-ready .difference-showcase .diff-progress .diff-node{
  opacity:1!important;transform:none!important;animation:none!important;
  transition:none!important;
}
html.motion-ready .difference-showcase .diff-progress .diff-connector:after{
  transform:scaleY(1)!important;animation:none!important;
}
@media(max-width:1050px) and (min-width:701px){
  .story-text{padding:37px 26px}
  .story-text>p:not(.overline){font-size:14px}
  .feature .picture{height:185px}
  .memory-phase{padding:18px 13px 51px}
}
@media(max-width:700px){
  body{font-size:15px}
  .header{height:68px;padding:0 16px}
  .logo img{width:112px}
  .header .navcta{font-size:13px;padding:11px 13px}
  .hero{min-height:680px;padding:36px 21px 280px;margin-top:9px}
  .hero h1{font-size:clamp(36px,9.1vw,43px);line-height:1.32;margin:17px 0}
  .hero-copy>p{font-size:15px;line-height:1.68}
  .hero-foot{font-size:12px;margin-top:21px}
  .eyebrow{font-size:12px}
  .actions{margin-top:23px}
  .button{font-size:14px;min-height:51px}
  .ribbon{display:none}
  .features{padding:65px 18px 65px}
  .section-heading h2,.how h2{font-size:clamp(29px,8vw,35px);margin:13px 0;line-height:1.35}
  .section-heading>p:last-child{font-size:14px;line-height:1.65}
  .cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
  .feature{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;padding:8px;min-height:145px;border-radius:17px}
  .picture,.feature .picture{width:112px;height:100%;min-height:145px;border-radius:12px}
  .feature .bubble{top:8px;right:8px;width:29px;height:29px;border-radius:9px}
  .feature .bubble .ui-icon{width:17px;height:17px}
  .cardcontent{min-width:0;padding:11px 5px 8px 0;gap:6px}
  .cardtitle h3{font-size:17px;line-height:1.35}
  .cardtitle span{font-size:11px}
  .cardcontent p{font-size:13px;line-height:1.5;min-height:0;margin-top:0}
  .cardcontent a{min-height:39px;height:39px;align-self:flex-start;padding:0 11px;gap:13px;margin-top:auto;font-size:12px}
  .cardcontent a .ui-icon{width:15px;height:15px}
  .story{margin:0 16px;border-radius:21px;display:flex;flex-direction:column-reverse}
  .story-image{height:255px;min-height:255px;background-position:center 40%}
  .story-image .handwritten{font-size:23px}
  .story-text{padding:28px 23px 34px}
  .story-text h2{font-size:clamp(26px,7.3vw,31px);line-height:1.38;margin:13px 0 19px}
  .story-text>p:not(.overline){font-size:14px;line-height:1.75;margin-bottom:14px}
  .story-quote{padding:15px 16px;margin:19px 0}
  .story-quote span{font-size:12px}
  .story-quote strong{font-size:17px}
  .story-signature{font-size:12px;line-height:1.6}
  .care-section{padding:73px 16px 71px}
  .care-section .section-heading h2{font-size:clamp(29px,8vw,35px);line-height:1.33}
  .care-section .section-heading>p:last-child{font-size:14px;line-height:1.7}
  .memory-highlight{padding:22px 18px 22px;margin:25px 0 24px;border-radius:20px}
  .memory-heading h3{font-size:clamp(25px,6.8vw,30px);line-height:1.4}
  .memory-heading p:not(.overline){font-size:13px;line-height:1.7}
  .memory-badge{width:48px;height:48px;border-radius:14px}
  .memory-badge .ui-icon{width:23px;height:23px}
  .memory-timeline{display:grid;grid-template-columns:1fr;gap:9px;margin-top:17px}
  .memory-phase{min-height:unset;border-radius:15px;padding:16px 16px 48px}
  .memory-phase-icon{display:none!important}
  .memory-phase h4{font-size:16px;margin:10px 0 6px;line-height:1.4}
  .memory-phase p{font-size:13px;line-height:1.55;margin:0}
  .memory-chip{font-size:11px;padding:7px 9px;bottom:10px}
  .memory-phase-arrow{height:18px;transform:rotate(90deg)!important}
  .memory-bottom{padding:14px;gap:10px;margin-top:15px}
  .memory-bottom p{font-size:12px}
  .memory-bottom p strong{font-size:13px}
  .memory-disclaimer{font-size:11px;line-height:1.55}
  .comparison{padding:21px 16px 24px;margin-top:22px;border-radius:21px}
  .comparison-head h3{font-size:clamp(25px,7vw,31px)}
  .comparison-head p:last-child{font-size:13px;line-height:1.65}
  .compare-heart .ui-icon{width:36px;height:36px}
  .difference-showcase{margin-top:20px;gap:9px}
  .diff-lane{padding:17px 16px;border-radius:17px}
  .diff-lane-header{gap:11px;padding-bottom:12px}
  .diff-lane-header strong{font-size:16px}
  .diff-lane-header small{font-size:12px}
  .diff-flow{padding:12px 0 5px}
  .diff-node{font-size:13px;min-height:42px;padding:8px 10px}
  .lane-note,.diff-usogae .lane-note{font-size:12px;line-height:1.55}
  .comparison-detail{margin-top:16px;border-radius:14px}
  .comparison-detail summary{font-size:14px;padding:13px 14px}
  .comparison-detail-inner{padding:0 10px 12px}
  .comparison-note{font-size:11px;margin:14px 0;line-height:1.65}
  .compare-cta{margin-top:16px}
  .how{padding:72px 18px 75px}
  .how h2{margin-bottom:25px}
  .steps{gap:11px}
  .steps>div{padding:19px 18px}
  .steps h3{font-size:18px}
  .steps p{font-size:13px;line-height:1.6}
  .steps .how-icon{width:39px;height:39px;margin-top:7px}
  .closing{min-height:405px;margin:0 16px 68px;border-radius:20px}
  .closing-copy{padding:31px 20px}
  .closing h2{font-size:30px}
  .closing-copy>p:not(.overline){font-size:13px}
  footer{padding:30px 22px 105px}
  footer a{font-size:13px}
  .mobile-sticky{background:rgba(255,253,249,.96)}
  .mobile-sticky a{font-size:14px;font-weight:830}
}
@media(max-width:360px){
  .hero{padding-bottom:270px;min-height:715px}
  .feature{grid-template-columns:98px minmax(0,1fr)}
  .picture,.feature .picture{width:98px;min-height:150px}
  .cardtitle h3{font-size:16px}
  .cardcontent p{font-size:12px}
  .cardcontent a{font-size:11px}
}


/* Mobile readability corrections found in actual browser screenshots. */
.feature .cardcontent a{
  display:inline-flex!important;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;gap:9px;white-space:nowrap;
}
.feature .cardcontent a>span{white-space:nowrap}
.feature .cardcontent a .ui-icon{display:inline-block;flex:none}
@media(max-width:700px){
  .difference-showcase{
    display:flex;flex-direction:column;align-items:stretch;gap:11px;
    grid-template-columns:none;
  }
  .difference-showcase .diff-lane{width:100%;min-width:0;min-height:unset}
  .difference-showcase .diff-versus{
    align-self:center;flex:none;margin:-1px auto;min-width:40px;
    min-height:40px;width:40px;height:40px;display:grid;place-items:center;
  }
  .diff-node{word-break:keep-all}
  .diff-lane-header span:last-child{min-width:0}
  .diff-lane-header strong{word-break:keep-all}
  .diff-flow .diff-node{font-size:14px;line-height:1.52}
  .feature .cardcontent a{display:inline-flex!important;max-width:100%;gap:9px}
}
@media(max-width:360px){
  .comparison{padding:18px 12px 21px}
  .diff-lane{padding:16px 13px}
  .diff-node{padding:8px 9px}
  .hero h1{font-size:34px}
  .cardcontent a{padding-inline:9px;font-size:11px}
}


/* === Illustrated AI comparison for the isolated landing preview (v17) === */
.comparison.comparison-visual{
  margin-top:26px;padding:44px clamp(22px,3.2vw,43px) 34px;
  background:linear-gradient(145deg,#fffdfa,#f8faf4 90%);
  border:1px solid #e8e9df;border-radius:32px;overflow:visible;
  box-shadow:0 12px 40px rgba(59,84,63,.065);
}
.visual-comparison-head{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:0;margin-bottom:34px
}
.visual-comparison-head .overline{font-size:13px!important;color:#4a8661!important;letter-spacing:.03em}
.visual-comparison-head h3{
  margin:13px 0 12px;font-size:clamp(30px,3.5vw,46px);
  color:#263d30;line-height:1.31;font-weight:850;letter-spacing:-.055em;
}
.visual-comparison-head h3 em{font-style:normal;color:#39805a}
.visual-comparison-head>p:last-child{
  margin:0;max-width:670px;font-size:16px;color:#57695c;line-height:1.7;
}
.visual-comparison-head>p strong{color:#315e43;font-weight:800}
.visual-compare-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;position:relative;align-items:stretch
}
.visual-panel{
  display:flex;flex-direction:column;min-width:0;min-height:655px;
  padding:25px 23px 21px;border-radius:27px;position:relative;
  border:1px solid #e4dfd7;box-shadow:0 8px 22px rgba(67,71,63,.045)
}
.visual-panel-general{background:linear-gradient(155deg,#f6f2ec 0%,#f8f6f2 100%)}
.visual-panel-usogae{
  background:linear-gradient(155deg,#eff7ed 0%,#f5faf0 100%);
  border:1.5px solid #a9c9ae;box-shadow:0 12px 33px rgba(63,112,68,.08)
}
.visual-panel-head{
  display:grid;grid-template-columns:minmax(0,1fr) 162px;
  align-items:center;gap:8px;min-height:167px;margin-bottom:13px
}
.visual-panel-title{min-width:0;position:relative;z-index:1}
.visual-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:max-content;max-width:100%;border-radius:100px;
  padding:10px 17px;font-size:14px;font-weight:850;line-height:1.35;
  word-break:keep-all;white-space:nowrap
}
.visual-pill-neutral{background:#e5dfd8;color:#544e48}
.visual-pill-primary{background:#347854;color:#fff}
.visual-panel-title h4{
  margin:15px 0 7px;font-size:clamp(19px,1.78vw,23px);
  color:#293e31;font-weight:850;letter-spacing:-.047em;
  word-break:keep-all;line-height:1.37;
}
.visual-panel-title p{
  margin:0;font-size:13px;line-height:1.55;color:#5c6a60;word-break:keep-all
}
.visual-robot{width:162px;display:flex;align-items:center;justify-content:center;max-height:155px}
.visual-robot .robot-drawing{width:100%;height:auto;max-height:153px}
.visual-owner-dog{
  position:relative;width:160px;height:160px;isolation:isolate;
  border-radius:50%;background:#e2f0de;overflow:hidden;
  box-shadow:0 7px 22px rgba(65,103,67,.13)
}
.visual-owner-dog:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(246,253,241,.12),transparent 65%);
  pointer-events:none
}
.visual-owner-dog img{width:100%;height:100%;object-fit:cover;object-position:54% 51%}
.visual-heart{
  display:grid;place-items:center;position:absolute;right:5px;top:9px;
  width:35px;height:35px;color:#2c734d;background:rgba(255,255,255,.94);
  border-radius:50%;box-shadow:0 3px 10px #395f3930;z-index:1
}
.visual-heart .ui-icon{width:20px;height:20px}
.visual-versus{
  position:absolute;z-index:3;top:46%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:55px;height:55px;border-radius:50%;
  background:#2e6545;color:#fff;border:5px solid #fffdf9;
  font-size:17px;font-weight:900;letter-spacing:-.03em;
  box-shadow:0 5px 17px rgba(50,90,56,.16);pointer-events:none
}
.visual-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.visual-step{
  display:grid;grid-template-columns:33px 47px minmax(0,1fr);
  align-items:center;gap:11px;min-width:0;min-height:84px;
  padding:11px 14px;border-radius:17px;background:#fffefa;
  border:1px solid #ebe8df;position:relative
}
.visual-step+.visual-step:before{
  content:"";position:absolute;top:-12px;left:30px;height:11px;
  border-left:2px dashed #c5c9bd
}
.visual-panel-usogae .visual-step{background:rgba(255,255,255,.93);border-color:#dcebdd}
.visual-panel-usogae .visual-step+.visual-step:before{border-left-color:#94bba0}
.visual-step-num{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#e9e3da;color:#665f53;font-size:12px;font-weight:850
}
.visual-panel-usogae .visual-step-num{background:#4d9468;color:#fff}
.visual-step-icon{
  display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  background:#f5f3f0;color:#66685d
}
.visual-panel-usogae .visual-step-icon{background:#e8f4e7;color:#2f7851}
.visual-step-icon .ui-icon{width:22px;height:22px;stroke-width:1.85}
.visual-step-copy{display:grid;gap:3px;min-width:0}
.visual-step-copy strong{
  color:#354337;font-size:15px;font-weight:820;line-height:1.4;
  letter-spacing:-.035em;word-break:keep-all
}
.visual-panel-usogae .visual-step-copy strong{color:#20583d}
.visual-step-copy small{
  font-size:12px;font-weight:500;line-height:1.52;
  color:#647268;word-break:keep-all
}
.visual-benefits{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;margin-top:12px
}
.visual-benefits>span{
  display:flex;align-items:center;justify-content:center;
  padding:9px 4px;gap:6px;border-radius:12px;
  background:#fff;color:#356249;font-size:12px;font-weight:790;white-space:nowrap
}
.visual-benefits .ui-icon{width:16px;height:16px;stroke-width:1.8}
.visual-panel-takeaway{
  display:flex;gap:11px;align-items:center;justify-content:center;
  margin-top:auto;padding:14px 13px;border-radius:15px;
  min-height:58px;font-size:12px;line-height:1.52;word-break:keep-all;
}
.visual-panel-takeaway .ui-icon{width:22px;height:22px;flex:none}
.visual-panel-takeaway strong{font-weight:800}
.visual-panel-takeaway-neutral{
  margin-top:auto;background:#eae4df;color:#555b55
}
.visual-panel-takeaway-primary{
  margin-top:11px;background:#dbefdb;color:#275e3e;font-size:13px
}
.visual-summary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:20px;padding:21px 12px;border-radius:23px;
  background:#fff;border:1px solid #e9e8df;
  box-shadow:0 5px 22px rgba(73,95,69,.03)
}
.visual-summary-item{
  min-width:0;display:flex;flex-direction:column;
  gap:8px;padding:0 15px
}
.visual-summary-item+.visual-summary-item{border-left:1px solid #ebeae4}
.visual-summary-icon{
  display:grid;place-items:center;background:#f1f4ee;
  color:#4c7e5d;width:39px;height:39px;border-radius:13px
}
.visual-summary-icon .ui-icon{width:20px;height:20px}
.visual-summary-item>strong{font-size:15px;font-weight:840;color:#2b4935}
.visual-summary-item>span:not(.visual-summary-icon){
  display:flex;align-items:center;gap:8px;min-height:38px;
  padding:8px 10px;border-radius:10px;background:#f7f6f3;
  color:#5b665b;font-size:12px;line-height:1.45;word-break:keep-all
}
.visual-summary-item>span.is-usogae{background:#eaf4e8;color:#285e40;font-weight:770}
.visual-summary-item small{
  display:inline-block;min-width:56px;color:#667667;font-size:11px;font-weight:800
}
.visual-summary-item .is-usogae small{color:#32704a}
.comparison-visual>.comparison-detail{margin-top:21px}
.comparison-visual>.comparison-note{margin-top:16px}
.comparison-visual>.compare-cta{margin-top:14px}
@media(max-width:1050px) and (min-width:701px){
 .visual-panel{padding:21px 16px;min-height:685px}
 .visual-panel-head{grid-template-columns:minmax(0,1fr) 116px;min-height:135px}
 .visual-robot,.visual-owner-dog{width:116px}
 .visual-owner-dog{height:116px}
 .visual-step{grid-template-columns:28px 36px minmax(0,1fr);gap:8px;padding:9px 8px}
 .visual-step-icon{width:35px;height:35px}
 .visual-step-icon .ui-icon{width:19px;height:19px}
 .visual-benefits>span{font-size:11px;gap:4px}
 .visual-benefits .ui-icon{width:14px;height:14px}
 .visual-summary-item{padding:0 9px}
}
@media(max-width:700px){
 .comparison.comparison-visual{padding:29px 14px 23px;border-radius:22px;overflow:hidden}
 .visual-comparison-head{margin-bottom:24px}
 .visual-comparison-head .overline{font-size:12px!important}
 .visual-comparison-head h3{font-size:clamp(26px,7vw,33px);margin:10px 0 11px}
 .visual-comparison-head>p:last-child{font-size:13px;line-height:1.6}
 .visual-compare-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
 .visual-panel{min-height:unset;padding:18px 14px;border-radius:20px}
 .visual-panel-head{grid-template-columns:minmax(0,1fr) 111px;min-height:117px;margin-bottom:13px;gap:7px}
 .visual-pill{padding:8px 12px;font-size:12px}
 .visual-panel-title h4{font-size:18px;margin:10px 0 4px;line-height:1.35}
 .visual-panel-title p{font-size:12px;line-height:1.45}
 .visual-robot{width:112px}
 .visual-robot .robot-drawing{max-height:109px}
 .visual-owner-dog{width:112px;height:112px}
 .visual-heart{width:28px;height:28px}
 .visual-heart .ui-icon{width:16px;height:16px}
 .visual-step{grid-template-columns:29px 37px minmax(0,1fr);gap:9px;min-height:68px;padding:9px;border-radius:13px}
 .visual-step-num{width:27px;height:27px;font-size:11px}
 .visual-step-icon{width:35px;height:35px;border-radius:11px}
 .visual-step-icon .ui-icon{width:19px;height:19px}
 .visual-step-copy strong{font-size:13px}
 .visual-step-copy small{font-size:11px;line-height:1.48}
 .visual-step+.visual-step:before{left:23px}
 .visual-panel-takeaway{margin-top:12px;font-size:12px;padding:12px 10px}
 .visual-versus{
   position:relative;top:auto;left:auto;transform:none;
   width:47px;height:47px;margin:-4px auto;flex:none;
   border-width:5px;font-size:14px;
 }
 .visual-benefits{gap:5px;margin-top:10px}
 .visual-benefits>span{padding:8px 3px;gap:4px;font-size:10.5px}
 .visual-benefits .ui-icon{width:14px;height:14px}
 .visual-panel-takeaway-primary{font-size:12px}
 .visual-summary{margin-top:14px;padding:13px;border-radius:18px;grid-template-columns:1fr;gap:11px}
 .visual-summary-item{padding:0 0 10px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px 11px;border-bottom:1px solid #e7eae4}
 .visual-summary-item:last-child{border-bottom:0;padding-bottom:0}
 .visual-summary-item+.visual-summary-item{border-left:0}
 .visual-summary-icon{width:36px;height:36px;grid-row:1/span 3}
 .visual-summary-icon .ui-icon{width:19px;height:19px}
 .visual-summary-item>strong{font-size:14px;align-self:center}
 .visual-summary-item>span:not(.visual-summary-icon){min-height:32px;padding:6px 8px;font-size:11.5px}
 .visual-summary-item small{min-width:48px}
}
@media(max-width:360px){
 .comparison.comparison-visual{padding:22px 10px 18px}
 .visual-panel{padding:14px 10px}
 .visual-panel-head{grid-template-columns:minmax(0,1fr) 83px}
 .visual-robot,.visual-owner-dog{width:83px}
 .visual-owner-dog{height:83px}
 .visual-panel-title h4{font-size:16px}
 .visual-panel-title p{font-size:11px}
 .visual-step{grid-template-columns:24px 30px minmax(0,1fr);gap:6px;padding:8px}
 .visual-step-num{width:23px;height:23px;font-size:10px}
 .visual-step-icon{width:29px;height:29px}
 .visual-step-icon .ui-icon{width:17px;height:17px}
 .visual-step-copy strong{font-size:12px}
 .visual-step-copy small{font-size:10.5px}
 .visual-benefits>span{font-size:10px;gap:3px}
}


/* ==========================================================
   Landing v18 — icon-led storytelling + restrained motion
   Applies to isolated preview only, not production landing.
   ========================================================== */
html{scroll-behavior:smooth}
#features,#story,#ai-care,#ai-comparison,#how,#expert{scroll-margin-top:95px}
.hero-promise{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:31px
}
.hero-promise-item{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 12px;border:1px solid rgba(135,163,139,.33);
  background:rgba(255,255,255,.85);backdrop-filter:blur(9px);
  border-radius:12px;color:#345f47;white-space:nowrap;
  box-shadow:0 5px 13px rgba(71,96,72,.035)
}
.hero-promise-item .ui-icon{width:17px;height:17px;stroke-width:1.9;flex:none}
.hero-promise-item b{font-size:12px;font-weight:800;letter-spacing:-.025em}
.features{padding-top:87px;padding-bottom:89px}
.feature{overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.feature:hover{
  transform:translateY(-5px);border-color:#bed4c1;
  box-shadow:0 14px 32px rgba(41,88,54,.115)
}
.picture img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feature:hover .picture img{transform:scale(1.04)}
.feature .bubble{box-shadow:0 5px 14px rgba(73,94,76,.11)}
/* Short illustrated origin story, with optional details retaining factual background */
.story.story-redesign{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);min-height:unset}
.story-redesign .story-text{padding:42px clamp(26px,4vw,53px) 40px}
.story-redesign .story-text h2{font-size:clamp(30px,2.9vw,39px);margin:11px 0 9px;line-height:1.41}
.story-redesign .story-text h2 span{color:#43845f}
.story-redesign .story-lead{
  margin:0 0 21px!important;color:#546b59!important;font-size:14px!important;
  font-weight:630;line-height:1.55!important
}
.story-milestones{display:grid;gap:10px;margin:23px 0 18px}
.story-milestone{
  display:flex;gap:13px;align-items:center;padding:12px 13px;
  background:rgba(255,255,255,.83);border:1px solid #e0e8dc;
  border-radius:16px;box-shadow:0 5px 18px rgba(62,81,53,.035)
}
.story-milestone-icon{
  display:grid;place-items:center;flex:none;width:47px;height:47px;
  background:#e9f4e9;color:#418061;border-radius:14px
}
.story-milestone:nth-child(2) .story-milestone-icon{background:#f8eddf;color:#b6804e}
.story-milestone:nth-child(3) .story-milestone-icon{background:#e8edeb;color:#5d8072}
.story-milestone-icon .ui-icon{width:23px;height:23px;stroke-width:1.7}
.story-milestone-text{display:grid;gap:2px;min-width:0;word-break:keep-all}
.story-milestone-text small{font-size:11px;color:#648171;font-weight:750;line-height:1.35}
.story-milestone-text strong{font-size:16px;line-height:1.37;color:#2b563d;font-weight:820}
.story-milestone-text>span{font-size:13px;line-height:1.45;color:#5b6a5f}
.story-thought{
  border-left:3px solid #80aa8d;margin:18px 0!important;
  padding:7px 0 7px 14px;font-size:14px!important;line-height:1.65!important;
  color:#4a6552!important;word-break:keep-all
}
.story-thought strong{font-size:15px;color:#256044}
.story-more{
  border:1px solid #dce8dc;border-radius:13px;background:#fffdfa;
  margin:13px 0 17px;overflow:hidden
}
.story-more summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  min-height:48px;padding:12px 14px;color:#2a6749;
  font-size:13px;font-weight:800;gap:10px
}
.story-more summary::-webkit-details-marker{display:none}
.story-more summary span{
  width:25px;height:25px;display:grid;place-items:center;border-radius:50%;
  background:#e8f2e6;color:#2e704f;font-size:18px;font-weight:450;
  transition:transform .2s ease
}
.story-more[open] summary span{transform:rotate(45deg)}
.story-more-content{border-top:1px solid #edf0ea;padding:14px 15px}
.story-more-content p{
  margin:0 0 12px;font-size:13px;line-height:1.77;color:#4e6455;word-break:keep-all
}
.story-more-content p:last-child{margin-bottom:0}
.story-redesign .story-cta{min-height:45px}
.story-redesign .story-image{height:auto;min-height:100%;background-position:50% 50%}
.story-photo-note{
  position:absolute;right:15px;bottom:13px;color:#fff;font-size:10px;
  text-shadow:0 1px 5px rgba(0,0,0,.45);z-index:2
}
.story-image .handwritten{position:relative;z-index:2}
/* Visual memory cards: generous symbols and a highlighted story flow. */
.care-section{padding-top:80px}
.memory-highlight{margin-top:24px}
.memory-heading .overline{display:none}
.memory-heading h3{margin-top:0}
.memory-phase{
  border:1px solid #dce9dc;background:#fffdf9;
  transition:box-shadow .25s ease,transform .25s ease;
}
.memory-phase:nth-of-type(2){background:#f4faf1}
.memory-phase:hover{transform:translateY(-3px);box-shadow:0 9px 25px rgba(54,99,65,.09)}
.memory-phase-icon{
  width:49px;height:49px;border-radius:14px;background:#edf4ed;
  color:#42805d;display:grid;place-items:center!important;margin:14px 0 12px
}
.memory-phase-icon .ui-icon{width:27px;height:27px}
.memory-phase h4{font-size:16px;font-weight:840}
.memory-chip{background:#eaf3e7;color:#346f4c}
/* Four icon-led cards above become obvious routes, not prose-heavy. */
.cardcontent a{transition:background .22s ease,transform .22s ease}
.cardcontent a:hover{transform:translateX(2px)}
/* Image storyboards for onboarding; no new image generation. */
.how{padding-top:84px;padding-bottom:93px}
.how-lead{font-size:15px;color:#5b705f;margin:-9px 0 30px}
.how .how-visual-steps{gap:18px}
.how .how-card{
  padding:0!important;overflow:hidden;text-align:left;background:#fffefb;
  border:1px solid #dce8dc;border-radius:22px;
  display:block;position:relative;box-shadow:0 7px 24px rgba(65,92,62,.055);
  transition:transform .26s ease,box-shadow .26s ease
}
.how .how-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(65,92,62,.1)}
.how-card-picture{height:178px;position:relative;overflow:hidden;background:#eaf0e5}
.how-card-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.how-card-picture:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 70%,rgba(37,58,42,.14))}
.how-card-badge{
  position:absolute;bottom:-1px;right:18px;width:53px;height:53px;border-radius:18px 18px 0 0;
  display:grid;place-items:center;background:#f8fcf5;color:#397453;
  z-index:1;box-shadow:0 0 0 1px #e3ece2
}
.how-card-badge .ui-icon{width:27px;height:27px}
.how-card-detail{padding:20px 22px 23px}
.how-card-no{font-size:12px;font-weight:850;color:#548264;letter-spacing:.05em}
.how-card-detail h3{font-size:21px;line-height:1.4;color:#2d523a;margin:7px 0 7px}
.how-card-detail p{font-size:14px;line-height:1.5;color:#52685a;margin:0}
.how .how-card:not(:last-child):after{
  content:"";position:absolute;top:50%;right:-19px;width:20px;height:20px;
  background:#fff;transform:translateY(-50%) rotate(45deg);z-index:2;border-radius:3px
}
.closing-copy h2{line-height:1.32}
.closing .button.primary{min-height:50px}
@media(max-width:1050px) and (min-width:701px){
 .hero-promise-item{padding:9px 8px}
 .hero-promise-item b{font-size:11px}
 .story.story-redesign{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
 .story-redesign .story-text{padding:29px 25px}
 .story-milestone-text>span{font-size:12px}
 .how-card-picture{height:160px}
}
@media(max-width:700px){
 .hero{padding-bottom:292px}
 .hero-promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:19px}
 .hero-promise-item{display:flex;justify-content:center;gap:5px;min-width:0;white-space:normal;padding:9px 4px;border-radius:11px}
 .hero-promise-item .ui-icon{width:15px;height:15px}
 .hero-promise-item b{font-size:10px;line-height:1.33;text-align:center;word-break:keep-all}
 .features{padding-top:67px;padding-bottom:66px}
 .feature:hover{transform:none}
 .story.story-redesign{margin:0 16px;display:flex;flex-direction:column-reverse}
 .story-redesign .story-image{height:240px;min-height:240px;background-position:50% 42%}
 .story-redesign .story-text{padding:29px 19px 33px}
 .story-redesign .story-text h2{font-size:clamp(27px,7.4vw,32px);line-height:1.38;margin-bottom:9px}
 .story-redesign .story-lead{font-size:13px!important;margin-bottom:16px!important}
 .story-milestones{gap:8px;margin:15px 0}
 .story-milestone{padding:10px 11px;gap:9px;border-radius:13px}
 .story-milestone-icon{width:39px;height:39px;border-radius:12px}
 .story-milestone-icon .ui-icon{width:21px;height:21px}
 .story-milestone-text small{font-size:10px}
 .story-milestone-text strong{font-size:14px}
 .story-milestone-text>span{font-size:12px;line-height:1.38}
 .story-thought{font-size:12.5px!important;line-height:1.6!important;margin:13px 0!important}
 .story-thought strong{font-size:13px}
 .story-more{margin:13px 0}
 .story-more summary{font-size:12px}
 .story-redesign .story-cta{min-height:46px}
 .care-section{padding-top:75px}
 .memory-heading h3{font-size:26px}
 .memory-phase-icon{width:40px;height:40px;margin:9px 0}
 .memory-phase-icon .ui-icon{width:23px;height:23px}
 .memory-phase{padding-top:13px}
 .how{padding-top:73px;padding-bottom:73px}
 .how-lead{font-size:13px;margin:-5px 0 24px}
 .how .how-visual-steps{display:grid;grid-template-columns:1fr;gap:12px}
 .how .how-card{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:133px;border-radius:16px}
 .how-card-picture{height:100%;min-height:133px}
 .how-card-badge{right:0;bottom:0;width:39px;height:39px;border-radius:13px 0 0 0}
 .how-card-badge .ui-icon{width:21px;height:21px}
 .how-card-detail{align-self:center;padding:12px 15px}
 .how-card-detail h3{font-size:18px;margin:7px 0 5px}
 .how-card-detail p{font-size:12px}
 .how .how-card:not(:last-child):after{display:none}
}
@media(max-width:360px){
 .hero-promise{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hero-promise-item b{font-size:9px}
 .story-milestone-text strong{font-size:13px}
 .story-milestone-text>span{font-size:11px}
 .how .how-card{grid-template-columns:106px minmax(0,1fr)}
 .how-card-detail{padding:10px 11px}
 .how-card-detail h3{font-size:16px}
}
/* Reveals keep text readable even before entering the viewport. */
@media(prefers-reduced-motion:no-preference){
 .js-animated .reveal:not(.is-visible){
   opacity:.78;transform:translateY(12px);
 }
 .js-animated .reveal{
   transition:opacity .65s ease,transform .7s cubic-bezier(.22,.65,.2,1);
   transition-delay:var(--enter-delay,0ms)
 }
 .js-animated .reveal.is-visible{opacity:1;transform:translateY(0)}
 .hero-promise-item .ui-icon{animation:tiny-breathe 4.8s ease-in-out infinite}
 .hero-promise-item:nth-child(2) .ui-icon{animation-delay:.5s}
 .hero-promise-item:nth-child(3) .ui-icon{animation-delay:1s}
 .visual-robot .robot-drawing{animation:robot-bob 5.5s ease-in-out infinite}
 .visual-heart{animation:tiny-breathe 4s ease-in-out infinite}
 @keyframes tiny-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
 @keyframes robot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .js-animated .reveal{opacity:1!important;transform:none!important;transition:none!important}
 .feature,.memory-phase,.how .how-card{transition:none!important}
 .hero-promise-item .ui-icon,.visual-heart,.visual-robot .robot-drawing{animation:none!important}
}

/* Final visual QA: keep the handwriting inside the photo, not in content flow. */
.story-redesign .story-image .handwritten{
  position:absolute!important;top:auto!important;bottom:45px!important;
  right:24px!important;left:auto!important;max-width:85%;
  font-size:clamp(20px,2.1vw,28px)!important;
  color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.58);
  text-align:right;line-height:1.45
}
.story-redesign .story-image .story-photo-note{
  position:absolute;right:20px;bottom:13px;font-size:10px;z-index:3
}
@media(max-width:700px){
  .story-redesign .story-image .handwritten{
    bottom:41px!important;right:17px!important;font-size:23px!important
  }
}


/* === v19: bring AI comparison forward; prioritize readable comparison cards === */
.care-section{padding-top:70px}
.care-section>.section-heading{margin-bottom:12px}
.care-section>.comparison.comparison-visual{
  margin-top:18px;
  padding:34px clamp(23px,3vw,40px) 30px;
  box-shadow:0 12px 35px rgba(46,81,58,.075)
}
.care-section>.memory-highlight{
  margin-top:37px;
  margin-bottom:14px;
  border-color:#e3e9df
}
.visual-comparison-head{margin-bottom:26px}
.visual-comparison-head h3{font-size:clamp(32px,3.4vw,46px);margin:10px 0 11px}
.visual-comparison-head>p:last-child{font-size:16px;line-height:1.75;color:#465f4e}
.visual-comparison-head>p strong{font-weight:780}
.visual-compare-grid{gap:21px}
.visual-panel{min-height:0;padding:22px 21px 20px}
.visual-panel-general{border-color:#dfddd6}
.visual-panel-usogae{border:2px solid #8cba99;background:linear-gradient(155deg,#edf7ec,#f5faf1)}
.visual-panel-head{min-height:150px;margin-bottom:12px}
.visual-panel-title h4{font-size:clamp(20px,1.8vw,24px);margin:12px 0 6px;line-height:1.37}
.visual-panel-title p{font-size:14px;color:#51675a}
.visual-step{min-height:81px;gap:12px;padding:12px 13px}
.visual-step-num{height:32px;width:32px;font-size:13px}
.visual-step-icon{width:44px;height:44px}
.visual-step-icon .ui-icon{width:23px;height:23px}
.visual-step-copy strong{font-size:16px;letter-spacing:-.02em}
.visual-step-copy small{font-size:13px;line-height:1.55;color:#506354}
.visual-panel-general .visual-steps{flex:1;align-content:space-evenly;gap:13px}
.visual-panel-usogae .visual-step-copy strong{color:#1e583c}
.visual-panel-takeaway{font-size:13px;line-height:1.55;padding:13px}
.visual-panel-takeaway-primary{font-size:14px;min-height:61px}
.visual-benefits>span{font-size:12.5px;padding:10px 5px}
.visual-summary-item>strong{font-size:17px}
.visual-summary-item>span:not(.visual-summary-icon){font-size:13.5px;line-height:1.55}
.visual-summary-item small{font-size:12px;min-width:62px}
.comparison-visual>.comparison-detail summary{font-size:15px}
.comparison-visual>.comparison-note{max-width:100%;font-size:12.5px;line-height:1.7}
@media(max-width:1050px) and (min-width:701px){
  .visual-compare-grid{gap:14px}
  .visual-panel{padding:18px 14px}
  .visual-step{gap:8px;padding:10px 9px;min-height:80px}
  .visual-step-icon{width:36px;height:36px}
  .visual-step-icon .ui-icon{width:19px;height:19px}
  .visual-step-copy strong{font-size:14px}
  .visual-step-copy small{font-size:12px}
  .visual-panel-title p{font-size:12.5px}
  .visual-summary-item>span:not(.visual-summary-icon){font-size:12px}
  .visual-summary-item small{font-size:11px}
}
@media(max-width:700px){
 .care-section{padding-top:58px}
 .care-section>.section-heading{margin-bottom:5px}
 .care-section>.comparison.comparison-visual{margin-top:13px;padding:25px 13px 20px}
 .care-section>.memory-highlight{margin-top:24px}
 .visual-comparison-head{margin-bottom:21px}
 .visual-comparison-head h3{font-size:clamp(28px,7.6vw,34px);line-height:1.28}
 .visual-comparison-head>p:last-child{font-size:13.5px;line-height:1.65}
 .visual-panel{padding:17px 13px;min-height:0}
 .visual-panel-head{min-height:117px;margin-bottom:12px}
 .visual-panel-title h4{font-size:19px;line-height:1.35}
 .visual-panel-title p{font-size:12.5px}
 .visual-step{min-height:75px;padding:10px;gap:10px}
 .visual-step-num{width:29px;height:29px;font-size:11px}
 .visual-step-icon{width:38px;height:38px}
 .visual-step-icon .ui-icon{width:20px;height:20px}
 .visual-step-copy strong{font-size:14px;line-height:1.4}
 .visual-step-copy small{font-size:12px;line-height:1.47}
 .visual-panel-general .visual-steps{gap:10px}
 .visual-benefits>span{font-size:11px}
 .visual-panel-takeaway{font-size:12.5px}
 .visual-panel-takeaway-primary{font-size:13px}
 .visual-summary-item>strong{font-size:15px}
 .visual-summary-item>span:not(.visual-summary-icon){font-size:12.5px}
 .visual-summary-item small{font-size:11.5px;min-width:54px}
 .comparison-visual>.comparison-note{font-size:11.5px}
}
@media(max-width:360px){
 .care-section>.comparison.comparison-visual{padding:22px 9px 19px}
 .visual-panel{padding:14px 9px}
 .visual-panel-title h4{font-size:17px}
 .visual-panel-title p{font-size:11.5px}
 .visual-step{grid-template-columns:24px 30px minmax(0,1fr);min-height:75px;padding:8px;gap:7px}
 .visual-step-num{width:24px;height:24px;font-size:10.5px}
 .visual-step-icon{width:30px;height:30px}
 .visual-step-icon .ui-icon{width:17px;height:17px}
 .visual-step-copy strong{font-size:13px}
 .visual-step-copy small{font-size:11px}
 .visual-panel-takeaway{font-size:11.5px}
 .visual-benefits>span{font-size:10px}
}


/* v19 final review: the comparison should remain immediately legible. */
.js-animated .comparison-visual .reveal,
.js-animated .comparison-visual .reveal:not(.is-visible){
  opacity:1!important;transform:none!important;transition:none!important
}
.visual-comparison-head>p:last-child{color:#405845}
.visual-step-copy strong{color:#293e2f}
.visual-step-copy small{color:#455d4b}
.visual-panel-usogae .visual-step-copy strong{color:#22583a}
.visual-panel-general .visual-steps{
  display:grid;gap:12px;align-content:start;flex:0 0 auto
}
.visual-panel-general .visual-panel-takeaway{margin-top:auto}
@media(max-width:700px){
  .visual-panel-general .visual-steps{gap:10px}
  .visual-step-copy strong{font-size:14px}
  .visual-step-copy small{font-size:12px}
}


/* ===========================================================
   v20 conversion-first landing: clear promise, honest example
   private Cloudflare Pages preview only
   =========================================================== */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
 margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hero{min-height:595px;padding-top:55px;padding-bottom:55px}
.hero h1{font-size:clamp(43px,4.5vw,66px);line-height:1.30;max-width:690px}
.hero-copy{width:59%;max-width:650px}
.hero-copy>p{font-size:17px;font-weight:580;color:#3b5946;max-width:555px}
.hero-promise{margin-top:25px}
.hero .button.primary,.experience .button.primary{background:#286847;color:#fff;border-color:#286847}
.header .navcta{white-space:nowrap}
#experience,#features,#ai-care,#story,#how{scroll-margin-top:92px}
.experience{
  display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);
  gap:clamp(32px,4vw,65px);align-items:center;
  margin:72px auto 82px;padding:clamp(30px,4.5vw,60px);
  background:linear-gradient(132deg,#ecf5eb,#fbfcf7 64%,#f7f1e8);
  border:1px solid #e0e9dd;border-radius:33px;
  box-shadow:0 15px 44px rgba(46,83,57,.07);
}
.experience-copy{min-width:0}
.experience h2{
  font-size:clamp(34px,3.7vw,51px);line-height:1.35;
  letter-spacing:-.058em;color:#2d4836;font-weight:860;
  margin:15px 0 14px;word-break:keep-all
}
.experience h2 span{color:#36845c}
.experience-lead{font-size:16px;line-height:1.83;color:#506758;margin:0 0 26px;word-break:keep-all}
.experience-benefits{display:grid;gap:10px}
.experience-benefits>div{
  display:flex;align-items:center;gap:13px;padding:14px 16px;
  border:1px solid #dfebdd;border-radius:15px;background:rgba(255,255,255,.8);
}
.experience-symbol{
  display:grid;place-items:center;flex:none;width:40px;height:40px;
  border-radius:12px;background:#e5f1e3;color:#377e54;font-weight:850;font-size:13px
}
.experience-benefits>div>span:last-child{display:grid;gap:2px;min-width:0}
.experience-benefits strong{font-size:16px;color:#2e5940;line-height:1.5}
.experience-benefits small{font-size:13px;color:#627468;line-height:1.5}
.experience-cta{margin-top:24px;min-height:51px;display:inline-flex}
.experience-cta>span{font-size:18px;font-weight:700}
.experience-visual{width:100%;min-width:0;max-width:520px;justify-self:center}
.demo-tabs{
  display:flex;gap:6px;padding:6px;
  border:1px solid #d8e7d6;background:#e5eee3;border-radius:16px;
  margin:0 auto 12px;max-width:430px
}
.demo-tabs button{
  appearance:none;border:0;border-radius:12px;min-height:42px;
  padding:10px 15px;flex:1;background:transparent;color:#607666;
  font-size:14px;font-weight:770;cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease
}
.demo-tabs button[aria-selected="true"]{
  background:#fffefa;color:#286742;box-shadow:0 4px 15px rgba(49,84,56,.085)
}
.demo-tabs button:focus-visible{outline:3px solid #de9454;outline-offset:1px}
.demo-phone{
  width:100%;max-width:430px;margin:0 auto;
  background:#fffefa;border:1px solid #d5e2d2;
  border-radius:27px;overflow:hidden;
  box-shadow:0 20px 49px rgba(39,83,53,.12),0 1px 7px rgba(40,81,54,.05)
}
.demo-phone-head{
  display:flex;gap:11px;align-items:center;
  padding:17px 18px;background:#f6faf3;border-bottom:1px solid #e4eae0
}
.demo-brandmark{
  display:grid;place-items:center;flex:none;width:39px;height:39px;
  border-radius:13px;background:#3b815b;color:white;font-size:19px;font-weight:900
}
.demo-phone-head>div{display:grid;gap:2px;flex:1;min-width:0}
.demo-phone-head strong{font-size:15px;color:#274632}
.demo-phone-head small{font-size:11px;color:#6b7d70;line-height:1.5}
.demo-head-heart{font-size:24px;color:#63a07a}
.demo-phone-body{min-height:358px;padding:18px 18px 22px;background:linear-gradient(180deg,#fffefa,#fbfcf7)}
.demo-panel[hidden]{display:none!important}
.demo-day{text-align:center;margin:0 auto 21px;padding:6px 12px;width:max-content;border-radius:20px;
 background:#eff3ee;font-size:11px;color:#5f7767;font-weight:760}
.demo-chat{font-size:13px;line-height:1.69;padding:12px 15px;border-radius:16px;word-break:keep-all}
.demo-chat-user{background:#e8f4e7;margin-left:auto;max-width:79%;color:#2b593e;border-bottom-right-radius:4px;font-weight:680}
.demo-chat-ai{background:white;margin-top:15px;max-width:92%;border:1px solid #e6eae3;
 border-bottom-left-radius:4px;box-shadow:0 5px 12px rgba(66,88,59,.04);color:#3b5342}
.demo-agent{display:block;margin-bottom:7px;color:#36815a;font-size:12px;font-weight:870}
.demo-chat-ai p{margin:0;font-size:13px;line-height:1.75}
.demo-chat-ai strong{color:#265f44}
.demo-question{font-weight:780;color:#405a46;margin:20px 0 10px;font-size:12px}
.demo-options{display:flex;gap:6px;flex-wrap:wrap}
.demo-options span{padding:8px 11px;border:1px solid #cddfd0;border-radius:99px;
 background:#f6fbf5;color:#4d7159;font-size:11px;font-weight:680}
.demo-record{display:grid;gap:4px;background:#f1f7ed;border:1px solid #dce8d9;border-radius:15px;
 padding:14px 16px;margin:0 0 15px;font-size:13px}
.demo-record-label{font-size:11px;color:#34774e;font-weight:850}
.demo-record strong{font-size:13px;color:#2b533a}
.demo-record small{font-size:11px;color:#5d7464}
.demo-phone-foot{border-top:1px solid #e8ece6;padding:12px 14px;background:#fff;
 display:flex;align-items:center;gap:9px}
.demo-phone-foot>span:first-child{flex:1;padding:12px 13px;color:#8b9a8e;
 border:1px solid #e6ede6;border-radius:14px;font-size:11px;background:#fafcf9}
.demo-send{display:grid;place-items:center;flex:none;width:37px;height:37px;
 border-radius:11px;background:#5c976d;color:#fff;font-size:22px;font-weight:750}
.experience-disclaimer{max-width:440px;margin:13px auto 0;font-size:11px;line-height:1.65;color:#687d6c;text-align:center;word-break:keep-all}
.features{padding-top:40px;padding-bottom:75px}
.features .section-heading h2{font-size:clamp(34px,3.7vw,46px)}
.features .cards{margin-top:33px}
.care-section{padding-top:55px;padding-bottom:55px}
.care-section>.comparison.comparison-visual{margin-top:0}
.memory-expand{
  margin:22px 0 0;border:1px solid #d7e8d8;border-radius:20px;
  background:#fffefa;overflow:hidden
}
.memory-expand>summary{display:flex;align-items:center;gap:14px;padding:16px 19px;
 list-style:none;cursor:pointer;min-height:70px}
.memory-expand>summary::-webkit-details-marker{display:none}
.memory-expand>summary>span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}
.memory-expand>summary strong{font-size:16px;line-height:1.45;color:#285b40}
.memory-expand>summary small{font-size:12px;color:#607566}
.memory-expand-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
 background:#edf5eb;color:#428361;font-size:23px}
.memory-expand-plus{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;
 background:#eaf4e9;color:#367a52;font-size:20px;transition:transform .2s ease}
.memory-expand[open] .memory-expand-plus{transform:rotate(45deg)}
.memory-expand .memory-highlight{margin:0 15px 16px;box-shadow:none;background:#fafcf6}
.story.story-redesign{margin-top:35px}
.story .story-milestones{margin-top:18px}
.how{padding-top:75px}
.closing{margin-top:0}
@media(max-width:1050px) and (min-width:701px){
 .experience{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px;padding:32px 25px}
 .experience h2{font-size:clamp(29px,3.65vw,39px)}
 .experience-lead{font-size:14px}
 .experience-benefits>div{padding:11px 10px}
 .experience-benefits strong{font-size:14px}
 .experience-benefits small{font-size:12px}
 .demo-phone-body{min-height:370px}
}
@media(max-width:700px){
 .hero{min-height:670px;padding:39px 22px 275px}
 .hero h1{font-size:clamp(35px,9.3vw,43px);line-height:1.31}
 .hero-copy{width:100%}
 .hero-copy>p{font-size:14.5px;line-height:1.73}
 .hero .actions{margin-top:22px}
 .header .navcta{font-size:12px}
 .experience{
  display:flex;flex-direction:column;gap:22px;align-items:stretch;
  margin:29px 16px 55px;padding:27px 15px 24px;border-radius:22px
 }
 .experience h2{font-size:clamp(29px,7.8vw,36px);line-height:1.35;margin:11px 0}
 .experience-lead{font-size:13px;line-height:1.7;margin-bottom:15px}
 .experience-benefits{gap:7px}
 .experience-benefits>div{padding:9px 10px;gap:9px;border-radius:11px}
 .experience-symbol{width:31px;height:31px;font-size:11px;border-radius:9px}
 .experience-benefits strong{font-size:13px}
 .experience-benefits small{font-size:11px}
 .experience-cta{width:100%;min-height:47px;margin-top:17px;font-size:14px;justify-content:center}
 .demo-tabs{max-width:none;margin-bottom:10px}
 .demo-tabs button{font-size:12px;min-height:40px}
 .demo-phone{max-width:none;border-radius:19px}
 .demo-phone-head{padding:13px 14px}
 .demo-phone-body{padding:14px 12px 17px;min-height:355px}
 .demo-day{margin-bottom:14px}
 .demo-chat{font-size:12px;line-height:1.7;padding:11px 12px}
 .demo-chat-ai p{font-size:12px}
 .experience-disclaimer{font-size:10px;line-height:1.7}
 .features{padding-top:15px;padding-bottom:64px}
 .features .section-heading h2{font-size:clamp(29px,7.5vw,35px)}
 .care-section{padding-top:52px;padding-bottom:50px}
 .memory-expand{margin:15px 0 0;border-radius:16px}
 .memory-expand>summary{gap:9px;padding:14px 12px}
 .memory-expand>summary strong{font-size:13px}
 .memory-expand>summary small{font-size:11px}
 .memory-expand-icon{width:33px;height:33px;font-size:20px}
 .memory-expand .memory-highlight{margin:0 7px 9px;padding:17px 11px}
 .story.story-redesign{margin-top:0}
}
@media(max-width:360px){
 .hero h1{font-size:33px}
 .experience{margin-inline:13px;padding:23px 11px 20px}
 .experience h2{font-size:27px}
 .demo-phone-head strong{font-size:14px}
 .demo-phone-body{min-height:380px}
 .memory-expand>summary strong{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .demo-tabs button,.memory-expand-plus{transition:none!important}
}


/* ============================================================
   WOO-SOGAE landing v21 | visual hierarchy and color zoning.
   Private review site only. Retains media, interactions and text.
   ============================================================ */
:root {
  --page-sand:#eee7dc;
  --ink-deep:#20392a;
  --ink-body:#3d5444;
  --green-rich:#225d40;
  --green-accent:#347e55;
  --green-soft:#c9e2cd;
  --outline-natural:#d5c9b8;
}
body {
  background:var(--page-sand);
  color:var(--ink-deep);
}
.header {
  background:rgba(249,242,232,.96);
  border-bottom:1px solid #e4d7c8;
  box-shadow:0 4px 22px rgba(77,72,49,.045);
}
.header nav a{color:#34513c}
.header nav a:hover{color:#1f6541}
.header .navcta{
  background:#276547;color:#fff;border-color:#276547;
  box-shadow:0 8px 20px rgba(34,82,52,.18);
}
.header .navcta:hover{background:#1e5138}
.hero{
  background-color:#e9dfd0;
  background-image:
    linear-gradient(90deg,rgba(251,244,232,.99) 0%,rgba(251,244,232,.96) 24%,rgba(251,244,232,.85) 42%,rgba(251,244,232,.45) 61%,rgba(251,244,232,.04) 85%),
    url('/images/hero-owner-wheat-pexels-5281967.jpg');
  border:1px solid #e3d8c9;
  box-shadow:0 17px 40px rgba(77,67,49,.12);
}
.hero:before{background:linear-gradient(180deg,rgba(255,249,239,.09),transparent 58%,rgba(105,76,42,.04))}
.hero h1{color:#263a2b}
.hero h1 span{color:#2e7850}
.hero-copy>p{color:#395342;font-weight:580}
.eyebrow{color:#477650}
.hero-promise-item{
  background:rgba(255,248,237,.95);border:1px solid #ddceb9;
  color:#2c6749;box-shadow:0 4px 16px rgba(65,70,43,.08)
}
.hero-promise-item:nth-child(2){background:rgba(230,244,226,.94);border-color:#c6dac5}
.hero-promise-item:nth-child(3){background:rgba(246,226,212,.96);border-color:#e1c9b9}
.hero .button.primary,.header .navcta,.experience .button.primary{
  background:#276548;border-color:#276548;color:#fff;
  box-shadow:0 10px 23px rgba(38,92,60,.21)
}
.hero .button.secondary{
  background:#f0e4d4;border:1px solid #d2c0a9;color:#305541;
  box-shadow:0 5px 17px rgba(91,72,55,.08)
}
.hero .button.secondary:hover{background:#e7d8c5}
.ribbon{
  background:#e3e9d9;border:1px solid #cbd9c6;
  box-shadow:0 6px 18px rgba(62,90,65,.05)
}
.ribbon b{color:#295f41}
.ribbon b .ui-icon{color:#347b54}
.experience{
  background:linear-gradient(128deg,#d4e9d9 0%,#dfedde 51%,#e9f0db 100%);
  border:1px solid #bbd5c2;
  box-shadow:0 15px 39px rgba(57,102,64,.1);
}
.experience h2{color:#203e2e}
.experience h2 span{color:#286e4b}
.experience-lead{color:#405d4a}
.experience-benefits>div{
  background:#f5f2e9;border:1px solid #c7d9c3;
  box-shadow:0 5px 17px rgba(52,92,58,.07);
}
.experience-benefits>div:nth-child(2){
  background:#e5f1e3;border-color:#bad6c0
}
.experience-benefits>div:nth-child(3){
  background:#f0e8d9;border-color:#dfd3bd
}
.experience-symbol{
  background:#ccdfce;color:#245d3e;border:1px solid #b6cfbc
}
.experience-benefits strong{color:#285739}
.experience-benefits small{color:#536858}
.demo-tabs{
  background:#bfd8c5;border:1px solid #9dbda6
}
.demo-tabs button{color:#355b43}
.demo-tabs button[aria-selected="true"]{
  background:#fdf5e9;color:#205c3c;box-shadow:0 3px 10px rgba(43,91,55,.1)
}
.demo-phone{
  background:#faf6ec;border:2px solid #94b59d;
  box-shadow:0 17px 45px rgba(41,83,52,.16)
}
.demo-phone-head{background:#dcebdd;border-bottom-color:#c6d9c4}
.demo-phone-body{background:linear-gradient(180deg,#f9f4e9 0%,#f3f4e8 100%)}
.demo-chat-user{background:#cee5d1;color:#22533b}
.demo-chat-ai{background:#fffcf5;border-color:#d9dfce}
.demo-day,.demo-question{color:#3d674d}
.demo-phone-foot{background:#f6f2e7}
.demo-phone-foot>span:first-child{background:#fffdf7;border-color:#d5dfd1}
.experience-disclaimer{color:#4f7057}
.features{
  background:linear-gradient(150deg,#f1ddc5 0%,#f4e6d3 49%,#ede0ce 100%);
  border:1px solid #e3cdb4;border-radius:31px;
  box-shadow:0 10px 32px rgba(106,76,53,.065);
  padding-top:66px;padding-bottom:67px;
}
.features .overline{
  display:inline-flex;padding:7px 14px;background:#e4ceb1;
  border:1px solid #d8bb9d;border-radius:100px
}
.features .section-heading h2{color:#2d4233}
.features .section-heading>p:last-child{color:#5a6251}
.feature{
  border:1px solid #d4cbb8;
  box-shadow:0 9px 25px rgba(85,74,49,.095);
  background:#faf1e6;
}
.feature:nth-child(2){background:#e3efe4;border-color:#bad5c1}
.feature:nth-child(3){background:#f6e7da;border-color:#e1c6ae}
.feature:nth-child(4){background:#e4ece6;border-color:#c2d3c5}
.feature .bubble{
  background:#f6f0df;border:1px solid #d8cfbb;
  box-shadow:0 5px 14px rgba(54,74,54,.1)
}
.feature:nth-child(2) .bubble,.feature:nth-child(4) .bubble{background:#cfe6d0;border-color:#a8cbb1}
.cardtitle h3{color:#26452f}
.cardtitle span{color:#42644b}
.cardcontent p{color:#4e6251}
.cardcontent a{
  background:#d9e8d6;border:1px solid #b5cfb7;color:#20593d
}
.feature:nth-child(2) .cardcontent a,.feature:nth-child(4) .cardcontent a{background:#c2dec7;border-color:#a0c9aa}
.feature:nth-child(3) .cardcontent a{background:#ecd4bd;border-color:#dcb99d;color:#654a32}
.cardcontent a:hover{background:#c1d9bd}
.care-section{
  background:linear-gradient(145deg,#cedfce,#d8e8da 65%,#d0e3d4);
  border:1px solid #afc8b3;
  border-radius:31px;
  box-shadow:0 11px 36px rgba(62,99,67,.08);
  padding-top:52px;padding-bottom:60px;
}
.care-section .comparison.comparison-visual{
  background:linear-gradient(155deg,#f5efe3,#f6f0e5 75%,#eef1e1);
  border:1px solid #d9cbb5;
  box-shadow:0 10px 31px rgba(59,93,58,.1)
}
.visual-comparison-head h3{color:#23432f}
.visual-comparison-head h3 em{color:#2c7b50}
.visual-comparison-head>p:last-child{color:#455d49}
.visual-panel-general{
  background:linear-gradient(140deg,#eadcc9,#f1e6d8);
  border:1px solid #d2bda1
}
.visual-panel-usogae{
  background:linear-gradient(145deg,#cbe7cf,#dceede);
  border:2px solid #82b28f;
  box-shadow:0 10px 32px rgba(38,96,59,.11)
}
.visual-pill-neutral{background:#d7c4af;color:#54452f}
.visual-pill-primary{background:#236747;color:#fff}
.visual-step{background:#faf5eb;border-color:#dccbb7}
.visual-panel-usogae .visual-step{background:#f4faef;border-color:#b4d4b8}
.visual-step-num{background:#ddc8ac;color:#554632}
.visual-panel-usogae .visual-step-num{background:#2e8052;color:white}
.visual-step-icon{background:#ebddc9}
.visual-panel-usogae .visual-step-icon{background:#d1e9d4;color:#236b46}
.visual-step-copy small{color:#4e6252}
.visual-panel-takeaway-neutral{background:#ddcbb5;color:#484c3e}
.visual-panel-takeaway-primary{background:#b9dfc1;color:#1f5939}
.visual-benefits>span{background:#f7f7ed;border:1px solid #bcdbbe}
.visual-summary{background:#e5ebdb;border:1px solid #ccd9c7}
.visual-summary-item>span:not(.visual-summary-icon){background:#f5edde;color:#4d5445}
.visual-summary-item>span.is-usogae{background:#c4e1c8;color:#1e5839}
.comparison-detail{background:#faf5ea;border-color:#c9d6c1}
.comparison-detail summary{color:#235e3b}
.comparison-detail summary .summary-icon{background:#cee4cf}
.memory-expand{
  background:#eaf0de;border:1px solid #bbd2bb
}
.memory-expand>summary strong{color:#24593d}
.memory-expand-icon{background:#c7e0c9}
.memory-expand .memory-highlight{background:#e5eddf}
.memory-phase{background:#faf7ed;border:1px solid #ceddcb}
.memory-phase:nth-of-type(2){background:#d5e6d4}
.story.story-redesign{
  background:linear-gradient(140deg,#f1d8cb,#f5e2d6 52%,#ebd3c6);
  border:1px solid #dfb9a9;
  box-shadow:0 11px 31px rgba(120,75,59,.1)
}
.story-redesign .story-text h2{color:#2c4032}
.story-redesign .story-text h2 span{color:#327b50}
.story-redesign .story-lead{color:#5f594c!important}
.story-milestone{
  background:#fdf3e7;border:1px solid #ddc2ae;
  box-shadow:0 5px 14px rgba(105,71,49,.065)
}
.story-milestone:nth-child(2){background:#e2ede2;border-color:#bcd2bf}
.story-milestone:nth-child(3){background:#efdfca;border-color:#dec8ae}
.story-milestone-text small{color:#76664f}
.story-milestone-text strong{color:#33563a}
.story-milestone-text>span{color:#5a5b4d}
.story-thought{
  background:rgba(255,247,231,.68);border-left:4px solid #53815b;
  padding:13px 16px;border-radius:0 13px 13px 0;color:#435946!important
}
.story-more{background:#faeee2;border-color:#d4bba6}
.story-more summary{color:#315a3b}
.story-more summary span{background:#d1e4ce}
.story-more-content{background:#fff7ea;border-top-color:#dbcbbb}
.story-redesign .button.white{background:#2b694b;border-color:#2b694b;color:#fff}
.how{
  background:linear-gradient(140deg,#d9e8e8 0%,#e2ece7 60%,#d4e6df);
  border:1px solid #bad3d0;border-radius:31px;
  box-shadow:0 11px 31px rgba(52,92,90,.075);
}
.how>.overline{
  display:inline-flex;border-radius:100px;padding:7px 13px;
  background:#b8d7cf;color:#255c4d!important
}
.how h2{color:#2b4e43}
.how-lead{color:#52695e}
.how .how-card{
  background:#f8f3e9;border:1px solid #c1d5ce;
  box-shadow:0 7px 20px rgba(57,94,85,.09)
}
.how .how-card:nth-child(2){background:#dfeee4;border-color:#abcdbb}
.how .how-card:nth-child(3){background:#f4e5d5;border-color:#dec9b3}
.how-card-badge{background:#bcd9ce;color:#205d43}
.how-card-detail h3{color:#265343}
.how-card-detail p{color:#4b6358}
.closing{
  background-color:#23583e;
  background-image:
    linear-gradient(90deg,rgba(20,69,47,.98) 0%,rgba(23,74,50,.94) 39%,rgba(22,73,49,.44) 76%,rgba(20,68,46,.24) 100%),
    url('/images/cta-generated.webp');
  background-position:center,center;
  background-size:cover,cover;
  border:1px solid #285b42;
  box-shadow:0 16px 38px rgba(36,73,47,.2)
}
.closing:before{background:none}
.closing h2,.closing .closing-copy>p:not(.overline){color:#fff9e9}
.closing .overline{color:#e1edc9!important}
.closing .button.primary{
  background:#f6e3b9!important;color:#20523a!important;border:1px solid #f6e3b9!important;
  box-shadow:0 9px 23px rgba(12,45,26,.17)
}
.closing .button.primary:hover{background:#ffefcf!important}
footer{background:#e7dfd2;color:#4a6251;border-top:1px solid #d7cdbd}
footer a{color:#255c3f}
.mobile-sticky{background:rgba(235,227,214,.97);border-color:#d0c7b7}
.mobile-sticky a{background:#266546;color:#fff}
@media(max-width:700px){
  .header{background:rgba(249,243,233,.97)}
  .hero{
    background-image:
      linear-gradient(180deg,#f9f0e2 0%,rgba(249,240,226,.98) 27%,rgba(249,240,226,.89) 44%,rgba(249,240,226,.08) 75%,rgba(249,240,226,.02) 100%),
      url('/images/hero-owner-wheat-pexels-5281967.jpg');
    background-position:center,64% center
  }
  .ribbon{background:#e0e9da}
  .experience{background:linear-gradient(150deg,#d4e9d8,#e5eccc)}
  .experience-benefits>div{background:#f8f3e8}
  .experience-benefits>div:nth-child(2){background:#e4f1e0}
  .experience-benefits>div:nth-child(3){background:#f1e5d5}
  .features{
    background:linear-gradient(150deg,#efdec7,#f6e8d6);
    border-radius:24px;padding-top:35px;padding-bottom:43px
  }
  .feature{background:#faf0e4}
  .care-section{
    background:linear-gradient(160deg,#d0e2d0,#d8e9da);
    border-radius:24px;padding-top:33px;padding-bottom:42px
  }
  .care-section .comparison.comparison-visual{background:#f4eddd}
  .story.story-redesign{background:linear-gradient(145deg,#efd3c5,#f6e3d7)}
  .how{background:#dae9e5;border-radius:24px}
  .closing{
    background-image:
      linear-gradient(180deg,rgba(24,73,50,.98) 0%,rgba(25,73,49,.93) 49%,rgba(24,73,50,.36) 100%),
      url('/images/cta-generated.webp');
    background-position:center,center bottom;
    background-size:cover,cover
  }
  .closing h2,.closing .closing-copy>p:not(.overline){color:#fff9ec}
  .closing .button.primary{background:#f6e3b9!important;color:#24503b!important}
}
@media(prefers-reduced-motion:reduce){
  .feature,.how .how-card,.visual-panel,.story-milestone{transition:none!important}
}


/* v21 clarity follow-up: vital feature cards are never visually delayed. */
.js-animated .features .feature.reveal,
.js-animated .features .feature.reveal:not(.is-visible){
  opacity:1!important;transform:none!important;transition:box-shadow .25s ease,border-color .25s ease!important;
}
.features .feature .cardcontent,
.features .feature .picture,
.features .feature .picture img{
  opacity:1!important;visibility:visible!important;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .js-animated .features .feature:hover{
    transform:translateY(-3px)!important;
    transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease!important;
  }
}


/* ============================================================
   Landing v22 — continuous editorial surfaces, gentle transitions.
   Isolated Cloudflare preview. Keep controls/card contrast intact.
   ============================================================ */
:root{
  --flow-ink:#294232;
  --flow-copy:#4b604f;
  --flow-mint:#dcead9;
  --flow-cream:#f5efe5;
  --flow-peach:#f2e6d9;
}
body{background:#f4eee4;color:var(--flow-ink)}
main{
  position:relative;isolation:isolate;
  background:
    radial-gradient(ellipse 75% 11% at 83% 17%,rgba(201,228,201,.47),transparent 90%),
    radial-gradient(ellipse 78% 14% at 10% 44%,rgba(228,209,181,.29),transparent 88%),
    radial-gradient(ellipse 72% 18% at 87% 70%,rgba(229,208,197,.40),transparent 86%),
    radial-gradient(ellipse 75% 13% at 12% 89%,rgba(188,217,203,.35),transparent 86%),
    linear-gradient(180deg,#f6eee2 0%,#edf0e5 19%,#f4eee4 38%,#e8f0e7 57%,#f3e6dd 75%,#e8efe8 93%,#e7ebe1 100%);
}
.header{background:rgba(248,243,234,.88);border-bottom:1px solid rgba(128,138,113,.11);box-shadow:none}
.hero{
  background-color:transparent;
  border:0;border-radius:31px;box-shadow:0 7px 24px rgba(88,75,58,.065);
  background-image:
    linear-gradient(90deg,rgba(250,244,233,.98) 0%,rgba(250,244,233,.95) 30%,rgba(250,244,233,.76) 47%,rgba(250,244,233,.24) 70%,rgba(250,244,233,.05) 100%),
    url('/images/hero-owner-wheat-pexels-5281967.jpg');
  margin-bottom:0;
}
.hero:before{background:linear-gradient(180deg,transparent 78%,rgba(248,240,226,.12))}
.hero .button.secondary{background:rgba(248,240,226,.93);border-color:#ded1bd}
.hero-promise-item,.hero-promise-item:nth-child(2),.hero-promise-item:nth-child(3){
  box-shadow:none;border:1px solid rgba(129,153,123,.2);
}
.ribbon{background:rgba(223,234,217,.75);border:0;box-shadow:none}
.experience{
  margin-top:35px;margin-bottom:26px;
  background:
    radial-gradient(ellipse 75% 80% at 77% 38%,rgba(212,234,212,.57),transparent 83%),
    linear-gradient(180deg,rgba(224,237,219,0) 0%,rgba(219,235,216,.62) 16%,rgba(226,239,222,.68) 69%,rgba(229,237,220,0) 100%);
  border:0;border-radius:38px;
  box-shadow:none;
}
.experience-benefits>div{
  background:rgba(252,248,239,.84);border:1px solid rgba(159,187,156,.39);box-shadow:none
}
.experience-benefits>div:nth-child(2){background:rgba(225,242,225,.87)}
.experience-benefits>div:nth-child(3){background:rgba(246,232,212,.78)}
.demo-phone{background:#fcf8ef;box-shadow:0 13px 35px rgba(49,83,56,.11)}
.demo-tabs{background:rgba(197,222,198,.73)}
.features{
  margin-top:0;margin-bottom:0;
  padding-top:70px;padding-bottom:75px;
  background:
    radial-gradient(ellipse 78% 78% at 25% 35%,rgba(239,221,195,.46),transparent 88%),
    linear-gradient(180deg,rgba(245,234,216,0) 0%,rgba(240,225,204,.53) 23%,rgba(242,229,210,.56) 72%,rgba(238,225,210,0) 100%);
  border:0;border-radius:0;box-shadow:none;
}
.features .overline{background:rgba(228,210,188,.68);border:0}
.features .section-heading h2{color:#314935}
.features .section-heading>p:last-child{color:#546557}
.feature,.feature:nth-child(2),.feature:nth-child(3),.feature:nth-child(4){
  border:1px solid rgba(179,184,159,.35);
  box-shadow:0 6px 20px rgba(65,88,64,.07)
}
.feature{background:rgba(250,242,230,.92)}
.feature:nth-child(2){background:rgba(228,240,226,.94)}
.feature:nth-child(3){background:rgba(247,232,216,.93)}
.feature:nth-child(4){background:rgba(230,239,229,.94)}
.feature .bubble{box-shadow:0 4px 9px rgba(51,77,54,.075)}
.cardcontent a{border-color:rgba(132,172,134,.25)}
.care-section{
  margin-top:0;margin-bottom:0;
  padding-top:55px;padding-bottom:65px;
  background:
    radial-gradient(ellipse 88% 90% at 55% 48%,rgba(205,227,206,.56),transparent 83%),
    linear-gradient(180deg,rgba(211,232,212,0) 0%,rgba(212,232,214,.57) 18%,rgba(216,234,216,.67) 81%,rgba(211,230,210,0) 100%);
  border:0;border-radius:0;box-shadow:none;
}
.care-section .comparison.comparison-visual{
  background:linear-gradient(150deg,rgba(250,246,237,.83),rgba(245,246,233,.79));
  border:1px solid rgba(177,190,161,.28);
  border-radius:28px;
  box-shadow:0 7px 23px rgba(65,98,64,.07);
}
.visual-panel-general{background:linear-gradient(150deg,#eadecc,#f0e6d8);border-color:#dfd0bb}
.visual-panel-usogae{background:linear-gradient(150deg,#d3e9d4,#e0eee0);border-color:#9ec8a4}
.visual-step{box-shadow:none}
.visual-summary{
  background:rgba(235,239,224,.8);border-color:rgba(173,192,168,.33);
  box-shadow:none
}
.memory-expand{background:rgba(235,240,226,.79);border-color:rgba(154,187,151,.43)}
.memory-expand .memory-highlight{background:rgba(243,246,234,.8)}
.story.story-redesign{
  margin-top:0;margin-bottom:0;
  background:
    linear-gradient(135deg,rgba(243,226,210,.57),rgba(244,225,215,.68));
  border:0;border-radius:30px;box-shadow:none;
}
.story-redesign .story-milestone{
  border-color:rgba(185,172,152,.38);
  box-shadow:0 4px 12px rgba(83,82,63,.04)
}
.story-redesign .story-milestone:nth-child(2){background:rgba(228,241,226,.89)}
.story-redesign .story-milestone:nth-child(3){background:rgba(242,228,209,.87)}
.story-thought{background:rgba(254,248,237,.48)}
.story-more{background:rgba(250,240,227,.84)}
.how{
  margin-top:0;margin-bottom:0;
  padding-top:95px;padding-bottom:95px;
  background:
    radial-gradient(ellipse 80% 84% at 65% 43%,rgba(205,228,221,.47),transparent 87%),
    linear-gradient(180deg,rgba(213,232,225,0),rgba(217,235,230,.55) 18%,rgba(216,232,225,.61) 79%,rgba(214,231,223,0));
  border:0;border-radius:0;box-shadow:none;
}
.how>.overline{background:rgba(194,223,212,.63);border:0}
.how .how-card,.how .how-card:nth-child(2),.how .how-card:nth-child(3){
  box-shadow:0 6px 19px rgba(63,94,82,.065);
  border-color:rgba(163,186,164,.37)
}
.how .how-card{background:rgba(251,247,236,.91)}
.how .how-card:nth-child(2){background:rgba(227,242,232,.92)}
.how .how-card:nth-child(3){background:rgba(248,235,219,.92)}
.closing{
  margin-top:35px;margin-bottom:50px;
  border:0;border-radius:31px;
  box-shadow:0 9px 28px rgba(39,79,54,.1);
  background-image:
    linear-gradient(90deg,rgba(30,80,57,.96) 0%,rgba(32,83,58,.88) 44%,rgba(39,92,59,.53) 76%,rgba(30,76,48,.35) 100%),
    url('/images/cta-generated.webp');
}
.closing:before{background:none}
footer{
  background:linear-gradient(180deg,#e7ebe1,#eae8dd);
  border-top:0;color:#566759
}
@media(max-width:700px){
  .hero{border-radius:24px;background-image:
    linear-gradient(180deg,rgba(250,243,231,.99) 0%,rgba(250,243,231,.98) 26%,rgba(250,243,231,.86) 42%,rgba(250,243,231,.10) 79%,transparent 100%),
    url('/images/hero-owner-wheat-pexels-5281967.jpg')}
  .experience{
    margin-top:13px;margin-bottom:18px;
    border:0;border-radius:26px;box-shadow:none;
    background:linear-gradient(180deg,rgba(218,235,217,0),rgba(216,234,217,.73) 9%,rgba(224,237,219,.7) 90%,rgba(220,236,217,0))
  }
  .features{
    border:0;border-radius:0;margin-left:0;margin-right:0;
    padding-top:57px;padding-bottom:55px;
    background:linear-gradient(180deg,rgba(245,231,211,0) 0%,rgba(243,230,211,.70) 13%,rgba(244,232,216,.68) 85%,rgba(244,231,213,0) 100%)
  }
  .care-section{
    margin:0;padding-top:65px;padding-bottom:70px;
    border:0;border-radius:0;
    background:linear-gradient(180deg,rgba(215,235,216,0) 0%,rgba(208,231,210,.72) 12%,rgba(215,233,215,.78) 89%,rgba(211,232,210,0) 100%)
  }
  .care-section .comparison.comparison-visual{border-radius:24px}
  .story.story-redesign{
    margin:0 15px;
    border-radius:23px;border:0;
    background:linear-gradient(140deg,rgba(245,227,213,.72),rgba(244,225,215,.8))
  }
  .how{
    margin:0;padding-top:75px;padding-bottom:80px;
    border:0;border-radius:0;
    background:linear-gradient(180deg,rgba(217,235,227,0) 0%,rgba(216,236,229,.70) 14%,rgba(216,234,226,.73) 86%,rgba(211,233,224,0) 100%)
  }
  .closing{
    margin-top:10px;margin-bottom:55px;border:0;border-radius:24px;
    background-image:
      linear-gradient(180deg,rgba(28,79,54,.97) 0%,rgba(30,78,53,.9) 42%,rgba(34,82,57,.35) 100%),
      url('/images/cta-generated.webp')
  }
}
@media(prefers-reduced-motion:reduce){
  .feature,.how .how-card{transition:none!important}
}


/* Landing v23: visitor-first information architecture after competitor review.
   Show a concrete problem and preserve visual comparison without repetition. */
.hero-issues{display:grid;gap:12px;margin-top:25px;max-width:575px}
.hero-issues-label{
  font-size:13px;font-weight:800;color:#4c6c55;line-height:1.45;
  letter-spacing:-.015em
}
.hero-issue-links{display:flex;flex-wrap:wrap;gap:9px}
.hero-issue-link{
  display:inline-flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:43px;padding:10px 12px 10px 16px;
  background:rgba(254,249,239,.91);border:1px solid #d3dccd;
  border-radius:999px;color:#315a40;font-size:13px;font-weight:800;
  white-space:nowrap;text-decoration:none;box-shadow:0 4px 14px rgba(63,87,55,.045);
  transition:background .18s,border-color .18s,transform .18s
}
.hero-issue-link .ui-icon{width:15px;height:15px;flex:none}
.hero-issue-link.is-selected{
  background:#dcebdc;border-color:#a7cab0;color:#215d3e
}
.hero-issue-link:hover{background:#cce4d0;border-color:#9abd9f;transform:translateY(-2px)}
.hero-issue-link:focus-visible{outline:3px solid #ba8050;outline-offset:3px}
.hero h1{letter-spacing:-.055em}
.hero-copy>p{font-size:17px;line-height:1.75}
.experience-benefits>div{min-height:68px}
.experience-benefits strong{font-size:15px}
.experience-cta{font-size:15px;min-height:53px}
.features .cards{margin-top:30px}
.comparison-visual>.comparison-detail{margin-top:23px}
.comparison-visual>.comparison-note{margin-top:12px}
.comparison-summary-inside{margin-bottom:18px}
.comparison-summary-inside .visual-summary{
  margin-top:0;background:#eef1e9;box-shadow:none
}
.visual-panel{padding:18px 19px 18px;border-radius:22px}
.visual-compare-grid{gap:18px}
.visual-panel-head{min-height:132px;margin-bottom:9px}
.visual-step{min-height:67px;padding:9px 11px;gap:10px;border-radius:14px}
.visual-step-num{width:28px;height:28px;font-size:11px}
.visual-step-icon{width:36px;height:36px;border-radius:10px}
.visual-step-icon .ui-icon{width:19px;height:19px}
.visual-step-copy strong{font-size:15px}
.visual-step-copy small{font-size:12px}
.visual-steps{gap:8px}
.visual-panel-general .visual-steps{gap:10px}
.visual-panel-takeaway{margin-top:11px;min-height:50px;padding:10px 12px;font-size:12px}
.visual-benefits{margin-top:9px}
.visual-benefits>span{font-size:11px}
.visual-summary-item>span:not(.visual-summary-icon){font-size:12px}
.visual-comparison-head{margin-bottom:20px}
.visual-comparison-head h3{font-size:clamp(30px,3.15vw,42px)}
.visual-comparison-head>p:last-child{font-size:15px;max-width:590px}
.memory-expand{margin-top:14px}
@media(max-width:1050px) and (min-width:701px){
  .hero-issue-links{gap:6px}
  .hero-issue-link{font-size:12px;padding-inline:11px;gap:6px}
  .visual-step{padding:8px}
  .visual-step-copy strong{font-size:13px}
  .visual-step-copy small{font-size:11.5px}
}
@media(max-width:700px){
  .hero{padding-bottom:285px}
  .hero-issues{gap:9px;margin-top:18px}
  .hero-issues-label{font-size:12px}
  .hero-issue-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .hero-issue-link{
    min-width:0;min-height:41px;gap:3px;padding:7px 7px 7px 10px;
    font-size:11px;justify-content:space-between;white-space:nowrap
  }
  .hero-issue-link .ui-icon{width:12px;height:12px}
  .experience{margin-top:24px}
  .comparison.comparison-visual{padding:24px 12px 20px}
  .visual-comparison-head h3{font-size:clamp(27px,7.4vw,33px)}
  .visual-comparison-head>p:last-child{font-size:13px}
  .visual-panel{padding:15px 12px;min-height:0}
  .visual-panel-head{min-height:103px}
  .visual-step{min-height:63px;padding:8px;gap:8px}
  .visual-step-icon{width:33px;height:33px}
  .visual-step-copy strong{font-size:13px}
  .visual-step-copy small{font-size:11px;line-height:1.4}
  .visual-benefits{margin-top:9px}
  .visual-panel-takeaway{min-height:50px;padding:9px;font-size:11.5px}
  .visual-panel-takeaway-primary{font-size:12px}
  .comparison-summary-inside .visual-summary{padding:10px}
  .comparison-summary-inside .visual-summary-item{padding-bottom:8px}
  .comparison-summary-inside .visual-summary-item>span:not(.visual-summary-icon){font-size:11px}
}
@media(max-width:360px){
  .hero-issue-link{font-size:10px;padding:7px 5px}
  .hero-issue-link .ui-icon{width:10px}
  .visual-step{grid-template-columns:24px 30px minmax(0,1fr);gap:6px}
  .visual-step-copy strong{font-size:12px}
  .visual-step-copy small{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .hero-issue-link{transition:none!important;transform:none!important}
}

/* Accessible topic buttons must not inherit native browser button styling. */
.hero-issue-link{appearance:none;cursor:pointer;font-family:inherit;line-height:1.2;text-align:left}
.hero-issue-link[aria-pressed="true"]{background:#dcebdc;border-color:#a7cab0;color:#215d3e}

/* v24 / 2026-11-02: app-store CTA, interactive consultation and story. */
.header .navcta.play-badge,.play-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:53px;padding:10px 19px;border:1px solid rgba(255,255,255,.23);
  border-radius:16px;background:#183b2c;color:#fff;
  box-shadow:0 9px 25px rgba(24,55,40,.19);font-family:inherit;
  font-weight:750;text-decoration:none;line-height:1.25;
  transition:transform .2s,box-shadow .2s,background .2s
}
.header .navcta.play-badge:hover,.play-badge:hover{
  background:#25523e;transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(24,55,40,.23)
}
.play-badge .play-mark{width:25px;height:25px;flex:none}
.play-badge span{display:grid;gap:1px;padding:0!important;text-align:left}
.play-badge small{font-size:10px;letter-spacing:.035em;font-weight:600;opacity:.85}
.play-badge strong{font-size:14px;white-space:nowrap;font-weight:800}
.hero .actions{align-items:stretch;gap:10px}
.hero .actions .play-badge{min-height:57px;padding-inline:19px}
.ios-launch{
  appearance:none;cursor:pointer;border:1px solid #afc9b3;
  background:#fffdf5;color:#2f6547;gap:9px;min-height:53px;
  padding:13px 18px;box-shadow:0 6px 18px rgba(64,88,59,.10);
  font-family:inherit;font-size:13px
}
.ios-launch:hover{background:#eff7ed}
.ios-launch:focus-visible,.ios-form-submit:focus-visible,.ios-dialog-close:focus-visible{outline:3px solid #dcaa65;outline-offset:3px}
.ios-apple{font-size:19px;line-height:1}
.hero-issues-help{font-size:12px;line-height:1.5;color:#758675;margin-top:-7px}
.hero-issue-link{box-shadow:0 5px 15px rgba(42,92,63,.08)}
.hero-issue-link[aria-pressed=true]{
  background:#d4ebd5;border-color:#67a77e;box-shadow:0 0 0 2px rgba(99,171,120,.10)
}
.demo-download-cta{
  display:flex;margin-top:18px;min-height:51px;
  width:100%;white-space:normal;text-align:center;gap:12px
}
.story-redesign .story-bridge{
  display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  align-items:stretch;gap:8px;margin:23px 0 16px;
}
.story-bridge-label,.story-bridge-solution{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:16px 14px;border-radius:15px;min-width:0
}
.story-bridge-label{background:#fff9ec;border:1px solid #dfd4c4}
.story-bridge-solution{background:#e0f1df;border:1px solid #a7c8ab}
.story-bridge-label>span,.story-bridge-solution>span{
  font-size:10px;font-weight:850;color:#8f6a49;letter-spacing:.035em
}
.story-bridge-solution>span{color:#3b8053}
.story-bridge strong{color:#2e4c39;font-size:14px;line-height:1.5;word-break:keep-all}
.story-bridge small{font-size:11px;line-height:1.6;color:#687168;word-break:keep-all}
.story-bridge-arrow{display:grid;place-items:center;color:#669d72;font-size:21px;font-weight:800}
.story-redesign blockquote.story-thought{
  margin:12px 0 19px;padding:21px 24px;
  border-left:4px solid #4f946e;border-radius:0 17px 17px 0;
  background:#fff9ee;box-shadow:0 8px 22px rgba(71,80,55,.07);
}
.story-thought p{margin:0 0 10px!important;font-weight:750;font-size:15px;line-height:1.75;color:#315a40;word-break:keep-all}
.story-thought strong{font-size:13px;color:#518262;line-height:1.5}
.closing .closing-downloads{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:24px}
.closing .closing-downloads .play-badge{background:#143d2b;border-color:#729b7d}
.closing .closing-downloads .ios-launch{background:#fff9ef;color:#27583f}
footer{flex-wrap:wrap}
footer .landing-disclosures{
  display:block;flex-basis:100%;width:100%;
  border-top:1px solid #e6e5db;margin-top:13px;padding-top:16px;
  color:#7d837a;font-size:11px;line-height:1.8;
}
footer .landing-disclosures strong{font-size:12px;color:#536759}
footer .landing-disclosures ul{margin:5px 0 0;padding-left:17px;display:grid;gap:5px}
.ios-dialog{
  width:min(92vw,460px);max-height:min(90vh,740px);
  padding:34px 30px 30px;border:1px solid #dce5d8;border-radius:27px;
  background:#fffaf3;color:#254532;box-shadow:0 26px 90px rgba(18,48,31,.30);
  overflow-y:auto
}
.ios-dialog::backdrop{background:rgba(17,37,27,.58);backdrop-filter:blur(5px)}
.ios-dialog-close{
  position:absolute;right:18px;top:14px;width:36px;height:36px;
  border-radius:50%;border:1px solid #e1e4d8;cursor:pointer;
  color:#526959;background:#fff;font-size:24px
}
.ios-dialog-top{display:flex;align-items:center;gap:12px;font-weight:800;color:#4d8d64}
.ios-dialog-top>span{font-size:34px}.ios-dialog-top>small{font-size:12px}
.ios-dialog h2{font-size:clamp(27px,5vw,35px);line-height:1.35;letter-spacing:-.05em;margin:15px 0 10px}
.ios-dialog>p{font-size:13px;line-height:1.85;color:#667769;margin:0 0 21px}
.ios-dialog form>label:not(.ios-agree){display:block;font-size:13px;font-weight:850;margin-bottom:9px}
.ios-dialog input[type=email]{
  width:100%;height:53px;border:1px solid #cfdccc;border-radius:12px;
  padding:0 15px;background:#fff;color:#263e31;font:inherit;font-size:15px
}
.ios-dialog input[type=email]:focus{outline:3px solid #c5e3cb;border-color:#569b71}
.ios-agree{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:12px;font-weight:700;line-height:1.6;margin-top:17px}
.ios-agree input{width:17px;height:17px;margin-top:1px;accent-color:#358257;flex:none}
.ios-privacy-copy{font-size:11px!important;color:#849082!important;line-height:1.65;margin:9px 0 18px!important}
.ios-privacy-copy a{text-decoration:underline;text-underline-offset:3px;color:#346947}
.ios-form-submit{
  width:100%;min-height:53px;border:0;border-radius:13px;background:#2b7653;
  color:#fff;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;padding:13px
}
.ios-form-submit:hover{background:#1c5c3c}
.ios-form-status{font-size:12px;color:#476b50;line-height:1.75;margin:13px 0 0}
.ios-form-status:empty{display:none}
.landing-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:#1e3c2e;color:white;padding:14px 19px;border-radius:13px;
  max-width:min(90vw,430px);width:max-content;z-index:200;
  text-align:center;line-height:1.55;font-weight:750;font-size:13px;
  box-shadow:0 16px 35px rgba(20,56,35,.24)
}
.landing-toast[hidden]{display:none}
@media(max-width:1050px){
  .header .navcta.play-badge{min-height:47px;padding:8px 12px}
  .header .navcta.play-badge strong{font-size:12px}
}
@media(max-width:700px){
  .header .navcta.play-badge{border-radius:12px;min-height:44px;padding:8px 11px;gap:6px}
  .header .navcta.play-badge .play-mark{width:19px;height:19px}
  .header .navcta.play-badge strong{font-size:11px}
  .header .navcta.play-badge small{font-size:9px}
  .hero .actions .play-badge,.hero .actions .ios-launch{width:100%;justify-content:center}
  .hero .actions .play-badge span{text-align:left}
  .hero-issues-help{font-size:11px;margin-top:-4px}
  .story-redesign .story-bridge{grid-template-columns:1fr;gap:4px}
  .story-bridge-arrow{transform:rotate(90deg);height:25px}
  .story-bridge-label,.story-bridge-solution{padding:15px}
  .story-redesign blockquote.story-thought{padding:17px}
  .closing .closing-downloads{align-items:stretch;flex-direction:column}
  .closing .closing-downloads .play-badge,.closing .closing-downloads .ios-launch{width:100%}
  .mobile-sticky .play-badge{min-height:51px;border-radius:13px;box-shadow:0 7px 17px rgba(22,57,35,.18)}
  .mobile-sticky .play-badge strong{font-size:14px}
  .ios-dialog{padding:31px 21px 24px}
  .landing-toast{bottom:82px}
  footer .landing-disclosures{margin-top:8px}
}

/* Download badge labels must stack rather than inherit old arrow-caption flex row. */
.header .navcta.play-badge>span,.play-badge>span,.mobile-sticky a.play-badge>span{
 display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
 gap:2px;min-width:0;margin:0;padding:0!important
}
@media(max-width:700px){.header{gap:9px}.header .navcta.play-badge{flex-shrink:0}}