/* The companion layout: original animated KhiawKut, one role per section. */
.hero{grid-template-columns:1.05fr 1.1fr;gap:46px;padding-block:55px 65px;min-height:610px;overflow:clip}
.hero h1{font-size:clamp(34px,3.8vw,51px)}
.hero .trust{margin-top:20px}.hero .hero-lede{line-height:1.9}
.hero-halo{right:0;width:100%;max-width:100%}
:is(.hero,.feature-grid,.care-grid,.preview-section,.steps,.install-with-guide)>*,
:is(.feature-card,.feature-copy,.hero-copy,.preview-copy,.demo-body,.demo-fields label,.release-note>span){min-width:0}
:is(.btn,select){max-width:100%}
.hero-art{position:relative;margin:0;width:100%;min-width:0;align-self:center;text-align:center}
.hero-art figcaption{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.8}
.hero-art>.action-scene{width:100%;max-width:530px;aspect-ratio:1.45;margin-inline:auto}
.pill-on{display:inline-block;border:1px solid #88aa37;border-radius:20px;background:#d2ee87;color:#314b09;padding:3px 9px;font-size:9px;font-weight:700;white-space:nowrap}
.action-scene{position:relative;isolation:isolate;width:100%;aspect-ratio:1.6;margin:0;min-width:0;overflow:clip}
.scene-soft-halo{position:absolute;inset:10% 5% 0;border-radius:50%;background:radial-gradient(ellipse,#c5e98933,transparent 70%);z-index:-1;pointer-events:none}
.action-scene .scene-prop{position:absolute;right:1%;bottom:0;width:64%;height:100%;object-fit:contain;max-width:100%;z-index:1;transform-origin:60% 80%;transition:transform .6s ease}
.pet-unit{display:block;position:relative;width:120px;aspect-ratio:192/208;flex:0 0 auto;min-width:0}
.pet-canvas,.pet-fallback{display:block;width:100%;height:auto;aspect-ratio:192/208;object-fit:contain;max-width:100%}
.pet-fallback{border-radius:28%;opacity:.7}.pet-canvas{filter:drop-shadow(0 5px 5px #18230717)}
.action-scene>.pet-unit{position:absolute;left:3%;bottom:5%;width:43%;z-index:2;transform-origin:50% 100%;animation:pet-attentive 7s ease-in-out infinite}
.action-scene:hover .scene-prop{transform:translateY(-3px) rotate(-1deg)}
.action-watch .scene-prop,.action-background .scene-prop{right:0;width:69%;bottom:-3%}
.action-watch>.pet-unit,.action-background>.pet-unit{left:-1%;width:43%;bottom:3%}
.action-background .scene-prop{filter:brightness(.8) saturate(.6)}
.action-lid>.pet-unit{left:auto;right:1%;bottom:5%;width:39%}
.action-lid .closed-laptop{right:auto;left:0;bottom:-27%;width:78%;height:120%;object-fit:contain}
.action-timer .scene-prop{right:6%;width:43%;height:93%;bottom:1%}.action-timer>.pet-unit{left:7%;width:43%;bottom:6%}
.action-history .scene-prop{right:10%;width:43%;height:98%;bottom:0}.action-history>.pet-unit{left:8%;width:43%;bottom:5%}
.preview-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-block:68px;border-bottom:1px solid var(--line)}
.preview-copy h2{font-size:36px;line-height:1.5;font-weight:500;letter-spacing:-.045em;margin:0 0 18px}
.preview-copy>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.9;max-width:430px;margin:0 0 23px}
.preview-copy .eyebrow{font-size:10px}.preview-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.preview-chips span{padding:6px 11px;border:1px solid var(--line);background:var(--panel);border-radius:20px;font-size:10px;color:var(--muted)}
.preview-section .hero-visual{padding-top:112px;max-width:440px}
.preview-section .keeper{display:block;width:125px;height:136px;top:-1px;right:22px}
.preview-section .keeper canvas,.preview-section .keeper-fallback{width:125px;height:136px}
.preview-section .visual-orbit{display:none}
#features{padding-block:75px}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feature-card{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;padding:28px;gap:14px;align-items:stretch;justify-content:space-between}
.feature-card.wide{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:26px;align-items:center;padding:30px 34px}
.feature-card h3{font-size:21px;line-height:1.55;margin:0 0 10px}.feature-card p{max-width:100%;font-size:13px;line-height:1.95}
.feature-card>.action-scene{width:min(300px,100%);height:175px;aspect-ratio:auto;margin-inline:auto}
.feature-card.wide>.action-scene{width:100%;max-width:355px;height:220px}.feature-card:not(.wide) h3{font-size:19px}
.feature-card .feature-tag{margin-top:15px}
html[data-theme=light] .feature-tag{color:#526f1c;background:#e8f0d7;border-color:#b5c98d}
html[data-theme=light] .step-number{color:#4f6928}
.scene-time-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.scene-time-chips span{display:inline-flex;padding:4px 8px;border:1px solid var(--line);border-radius:20px;font-size:10px;color:var(--muted);background:var(--tint)}
.history-note{display:block;font-size:11px;color:var(--muted);margin-top:13px}
.feature-card.history-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:25px}
.feature-card.history-card>.action-scene{height:185px;width:100%;max-width:310px}
.install-guide{display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line);padding:20px;border-radius:20px;margin-block:20px 30px;position:relative}
.install-guide>.pet-unit{width:125px}.install-guide strong{font-size:16px;font-weight:500}.install-guide p{font-size:11px;line-height:1.8;color:var(--muted);margin:6px 0 0}
.install-with-guide{display:grid;grid-template-columns:.75fr 1.4fr;gap:72px;align-items:start}
.install-with-guide .install-guide{flex-direction:column;align-items:center;text-align:center;padding:35px 25px;margin-top:12px;background:var(--tint);border-color:transparent}
.install-with-guide .steps{grid-template-columns:1fr;gap:22px;margin:0}
.install-with-guide .steps li{display:grid;grid-template-columns:50px 1fr;gap:5px 20px;padding-top:20px}
.install-with-guide .step-number{grid-row:1/3;grid-column:1;font-size:18px;display:grid;place-items:center;background:var(--tint);border-radius:14px;width:50px;height:50px;margin:0}
.install-with-guide .steps h3,.install-with-guide .steps p{grid-column:2}
.install-with-guide .steps h3{font-size:19px;margin:0}.install-with-guide .steps p{margin:0}
.faq-cat{margin:0 0 25px;display:flex;align-items:flex-start;gap:12px;flex-direction:column}.faq-cat>.pet-unit{width:95px}
.illustrated-closing{position:relative;min-height:350px;display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:left;padding:55px 65px;gap:12px 28px}
.illustrated-closing .closing-art{grid-column:1;grid-row:1/6;align-self:center;isolation:isolate;position:relative;overflow:clip;padding-inline:10px}
.closing-art:before{content:'';position:absolute;inset:0 4%;border-radius:50%;background:radial-gradient(ellipse,#c7e97c33,transparent 72%);z-index:-1}
.illustrated-closing>.eyebrow,.illustrated-closing>h2,.illustrated-closing>.btn,.illustrated-closing>p:last-child{grid-column:2;margin-block:0}
.illustrated-closing>.eyebrow{align-self:end;font-size:9px}.illustrated-closing>h2{font-size:30px;line-height:1.5}
.illustrated-closing>.btn{justify-self:start;align-self:start;margin-top:4px}.illustrated-closing>p:last-child{align-self:start;font-size:10px}
.closing-wave{position:relative;isolation:isolate;width:min(330px,100%);height:260px;margin-inline:auto;display:flex;align-items:flex-end;justify-content:center;gap:10px}
.closing-wave>.pet-unit{width:175px;max-width:60%}
.free-sticker{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;flex:0 0 auto;background:#d0eb90;color:#2b3c14;border:1px solid #a8c967;border-radius:50%;width:105px;height:105px;font-size:14px;line-height:1.7;transform:rotate(8deg);box-shadow:0 7px 18px #263d1210}
.free-sticker b{font-size:21px;font-weight:600}
@keyframes pet-attentive{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(.7deg)}}
@media(max-width:1050px){.hero{gap:20px}.hero-art figcaption{font-size:10px}.preview-section{gap:35px}.feature-card.wide{padding:28px;gap:20px}.feature-card.wide>.action-scene{height:195px}.install-with-guide{gap:35px}.illustrated-closing{padding:50px 38px;grid-template-columns:.9fr 1.1fr}}
@media(max-width:760px){
  .hero{display:flex;flex-direction:column;align-items:stretch;padding-block:30px 40px;gap:0;min-height:0}.hero-copy{display:contents}
  .hero .hero-copy>.eyebrow{order:0}.hero h1{order:1;font-size:clamp(34px,7.7vw,48px);margin-bottom:5px}
  .hero-art{order:2;width:min(340px,100%);align-self:center;margin-block:0 18px}.hero-art>.action-scene{aspect-ratio:1.5;max-width:360px}
  .hero-art figcaption{font-size:9px;gap:7px;flex-wrap:wrap;line-height:1.7}
  .hero .hero-actions{order:3;justify-content:center;gap:13px}.hero .release-note{order:4;justify-content:center}
  .hero-lede{order:5;font-size:13px;margin-block:15px 0}.hero .trust{order:6;font-size:9px}.hero-halo{inset-inline:0;width:100%}
  .hero-visual{max-width:100%;min-width:0}.preview-section{grid-template-columns:1fr;padding-block:45px;gap:25px}
  .preview-copy h2{font-size:29px}.preview-copy>p:not(.eyebrow){font-size:12px}.preview-chips{gap:6px;margin-top:18px}.preview-chips span{font-size:9px}
  .preview-section .hero-visual{padding-top:105px;width:100%;max-width:440px}.preview-section .keeper{width:112px;height:122px;right:16px;top:0}
  .preview-section .keeper canvas,.preview-section .keeper-fallback{width:112px;height:122px}
  #features{padding-block:50px}.feature-grid{grid-template-columns:minmax(0,1fr);gap:14px}.feature-card{padding:24px;gap:13px}
  .feature-card.wide{grid-column:auto;display:flex;flex-direction:column;align-items:stretch;padding:24px;gap:12px}
  .feature-card.wide h3{font-size:21px}.feature-card p{font-size:12px;line-height:1.9}
  .feature-card>.action-scene,.feature-card.wide>.action-scene{width:min(280px,100%);max-width:100%;height:160px;flex:0 0 160px}
  .feature-card.history-card{grid-column:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .feature-card.history-card>.action-scene{width:min(275px,100%);max-width:100%;height:155px}
  .install-with-guide{grid-template-columns:1fr;gap:20px}.install-with-guide .install-guide{flex-direction:row;text-align:left;gap:12px;padding:18px 15px;margin-top:0}
  .install-guide>.pet-unit{width:88px}.install-guide strong{font-size:14px}.install-guide p{font-size:10px}
  .install-with-guide .steps li{grid-template-columns:36px 1fr;gap:5px 14px}.install-with-guide .step-number{width:36px;height:36px;border-radius:10px;font-size:13px}.install-with-guide .steps h3{font-size:18px}
  .faq-cat{flex-direction:row-reverse;justify-content:space-between;align-items:center;margin-bottom:20px}.faq-cat>.pet-unit{width:78px}
  .illustrated-closing{display:flex;flex-direction:column;gap:13px;text-align:center;padding:50px 23px 35px;min-height:0}
  .illustrated-closing .closing-art{width:100%;max-width:330px;margin-top:0;order:0}.illustrated-closing>h2{font-size:26px}
  .illustrated-closing>.eyebrow{align-self:center;font-size:8px;margin:5px 0 0}.illustrated-closing>.btn{justify-self:center;align-self:center;font-size:13px;padding-inline:17px}
  .illustrated-closing>p:last-child{align-self:center;font-size:9px}.closing-wave{height:190px;gap:5px}.closing-wave>.pet-unit{width:140px}
  .free-sticker{width:85px;height:85px;font-size:12px}.free-sticker b{font-size:17px}
}
@media(max-width:380px){.hero h1{font-size:32px}.hero-art figcaption{font-size:8px}}
@media(max-width:360px){.feature-card.wide h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.pet-unit,.scene-prop{animation:none!important;transition:none!important}}