:root {
  font-family:'Kanit',Arial,Tahoma,sans-serif;
  color:#19372b;
  background:#f8f8f3;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
}

img {
  display:block;
  max-width:100%;
}

button {
  font:inherit;
}

.hero {
  background:#0c5c50;
}

.hero img {
  width:100%;
  height:auto;
}

.wrap {
  width:min(1160px,calc(100% - 48px));
  margin:auto;
}

.benefits {
  position:relative;
  margin-top:-28px;
  background:white;
  box-shadow:0 15px 35px #153b2e1b;
  border-radius:22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:30px 12px;
  z-index:1;
}

.benefit {
  min-height:125px;
  text-align:center;
  padding:6px 18px;
  border-right:1px solid #e5e8e1;
}

.benefit:last-child {
  border:0;
}

.icon {
  width:48px;
  height:48px;
  border-radius:50%;
  background:#144a36;
  color:#fff;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  font-size:24px;
}

.benefit:nth-child(2) .icon,.benefit:nth-child(3) .icon {
  background:#ac7041;
}

.benefit h2 {
  font-size:18px;
  margin:0 0 5px;
}

.benefit p {
  margin:0;
  color:#5e6b62;
  font-size:15px;
  line-height:1.45;
}

.steps {
  padding:80px 0 96px;
  text-align:center;
}

.eyebrow {
  font-size:13px;
  letter-spacing:.18em;
  color:#a66b3c;
  font-weight:700;
  text-transform:uppercase;
  margin:0 0 8px;
}

.steps h2,.app h2 {
  font-size:clamp(30px,4vw,48px);
  line-height:1.25;
  margin:0 0 12px;
  letter-spacing:0;
}

.steps h2 span {
  color:#aa6939;
}

.lead {
  color:#607066;
  line-height:1.6;
  font-size:17px;
  margin:0 auto 36px;
  max-width:720px;
}

.step-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.step-card {
  position:relative;
}

.number {
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  width:34px;
  height:34px;
  background:#b47845;
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:bold;
  z-index:2;
}

.step-card:first-child .number,.step-card:last-child .number {
  background:#174b37;
}

.phone {
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 30px #0b3b2b1c;
  background:white;
  border:5px solid #e9eee8;
}

.phone img {
  width:100%;
  aspect-ratio:279/605;
  object-fit:cover;
}

.step-card h3 {
  font-size:16px;
  line-height:1.5;
  margin:18px 0 0;
  color:#173a2b;
}

.app {
  background:linear-gradient(130deg,#e8f0e8,#fff 55%,#e7efe9);
  padding:72px 0;
}

.app-inner {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  align-items:center;
}

.app-visual {
  background:#dbeadd;
  border-radius:36px;
  padding:24px;
  max-width:340px;
  margin:auto;
  transform:rotate(-5deg);
  box-shadow:0 30px 60px #1d4b3028;
}

.app-visual img {
  border-radius:22px;
  border:7px solid #18251f;
  width:100%;
}

.app h2 {
  margin:0 0 18px;
}

.app p {
  font-size:18px;
  line-height:1.7;
  color:#445b4d;
}

.app ul {
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:24px 0 30px;
}

.app li {
  padding-left:29px;
  position:relative;
  line-height:1.5;
}

.app li:before {
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  color:#16714c;
  font-weight:bold;
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.action {
  border:0;
  cursor:pointer;
  background:#154c36;
  color:#fff;
  border-radius:12px;
  padding:13px 20px;
  font-weight:bold;
  min-height:48px;
}

.action.secondary {
  background:white;
  color:#154c36;
  border:1px solid #abc9b1;
}

.action:hover {
  filter:brightness(1.12);
}

.action:focus-visible {
  outline:3px solid #dfac65;
  outline-offset:3px;
}

.closing {
  background:linear-gradient(110deg,#103c2e,#236447);
  color:#fff;
  padding:66px 0;
}

.closing-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
}

.closing h2 {
  font-size:clamp(28px,3.5vw,42px);
  margin:0 0 10px;
}

.closing p {
  font-size:17px;
  line-height:1.6;
  margin:0;
  max-width:550px;
  color:#e2eee6;
}

.closing .action {
  background:white;
  color:#164834;
}

.closing .action.secondary {
  background:transparent;
  border:1px solid #cce6d1;
  color:white;
}

footer {
  background:#0d2c22;
  color:#c9ddcf;
  padding:20px 24px;
  text-align:center;
  font-size:14px;
}



@media(max-width:800px) {
  .wrap {
    width:min(100% - 32px,640px);
  }
  .benefits {
    grid-template-columns:repeat(2,1fr);
    margin-top:-14px;
    padding:22px 8px;
  }
  .benefit:nth-child(2) {
    border:0;
  }
  .benefit:nth-child(-n+2) {
    border-bottom:1px solid #e5e8e1;
    padding-bottom:18px;
  }
  .benefit:nth-child(n+3) {
    padding-top:18px;
  }
  .step-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 16px;
  }
  .step-card:last-child {
    grid-column:1/-1;
    width:calc(50% - 8px);
    margin:auto;
  }
  .steps {
    padding:60px 0;
  }
  .app-inner {
    grid-template-columns:1fr;
    gap:45px;
  }
  .app-visual {
    max-width:250px;
    order:2;
  }
  .closing-inner {
    display:block;
  }
  .closing .actions {
    margin-top:24px;
  }
}

@media(max-width:480px) {
  .benefit {
    padding:7px 10px;
    min-height:122px;
  }
  .benefit h2 {
    font-size:15px;
  }
  .benefit p {
    font-size:13px;
  }
  .icon {
    width:42px;
    height:42px;
    font-size:21px;
  }
  .steps h2,.app h2 {
    font-size:31px;
  }
  .lead {
    font-size:15px;
  }
  .step-card h3 {
    font-size:14px;
  }
  .app {
    padding:58px 0;
  }
  .app ul {
    grid-template-columns:1fr;
  }
  .closing {
    padding:54px 0;
  }
  .hero img {
    min-height:245px;
    object-fit:contain;
    background:#0b6755;
  }
}

    .benefits {
  margin-top:28px;
}

.app-visual {
  background:transparent;
  box-shadow:none;
  transform:none;
  padding:0;
  max-width:360px;
}

.app-visual img {
  border:0;
  border-radius:0;
  object-fit:contain;
}

.steps {
  padding-top:72px;
}

.step-grid {
  row-gap:42px;
}

.phone {
  isolation:isolate;
}

.step-card {
  min-width:0;
}

.closing {
  position:relative;
}

.app-inner {
  grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,5vw,80px);
}

.app-visual {
  width:min(100%,330px);
  max-width:none;
  justify-self:center;
  margin:0;
}

.app-visual img {
  width:100%;
  height:auto;
  display:block;
  border-radius:27px;
  box-shadow:0 22px 48px #173e3029;
}

.app .actions .action {
  font-size:15px;
  white-space:normal;
  line-height:1.35;
}

.app-visual {
  transform:rotate(-7deg);
  transform-origin:center center;
  margin:28px auto 30px;
}

.contact-widget {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:20;
  font-family:'Kanit',Arial,sans-serif;
}

.contact-trigger {
  border:0;
  border-radius:999px;
  background:#14583b;
  color:#fff;
  box-shadow:0 10px 26px #0a332a52;
  padding:13px 19px;
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  font-weight:600;
  font-size:16px;
  min-height:52px;
}

.contact-trigger:hover {
  background:#0e6b45;
}

.contact-trigger:focus-visible,.contact-panel a:focus-visible,.contact-panel button:focus-visible {
  outline:3px solid #efb96d;
  outline-offset:3px;
}

.contact-panel {
  position:absolute;
  right:0;
  bottom:66px;
  width:min(315px,calc(100vw - 32px));
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 16px 50px #092c2170;
  border:1px solid #e0e9e0;
}

.contact-panel[hidden] {
  display:none;
}

.contact-panel h2 {
  font-size:19px;
  margin:0 0 3px;
  color:#133b2b;
}

.contact-panel p {
  font-size:14px;
  color:#5f6f65;
  margin:0 0 12px;
  line-height:1.5;
}

.contact-panel a,.contact-panel button {
  display:flex;
  width:100%;
  align-items:center;
  gap:12px;
  padding:12px;
  border:0;
  background:#f2f7f1;
  color:#143c2c;
  text-align:left;
  border-radius:10px;
  text-decoration:none;
  font:500 16px 'Kanit',Arial,sans-serif;
  margin-top:8px;
  cursor:pointer;
}

.contact-panel a:hover,.contact-panel button:hover {
  background:#e3f0e5;
}

.contact-symbol {
  width:32px;
  height:32px;
  border-radius:9px;
  background:#1b6944;
  color:#fff;
  display:grid;
  place-items:center;
  flex:none;
  font-weight:700;
}

.contact-panel .pending {
  font-size:12px;
  color:#708175;
  margin-left:auto;
  white-space:nowrap;
}

@media(max-width:800px) {
  .app-inner {
    grid-template-columns:1fr;
    gap:32px;
  }
  .app-visual {
    order:0;
    width:min(65vw,300px);
    margin:auto;
  }
  .app-inner>div:last-child {
    order:1;
  }
}

@media(max-width:480px) {
  .app-visual {
    width:min(70vw,260px);
    transform:rotate(-6deg);
    margin:24px auto 28px;
  }
  .benefits {
    margin-top:16px;
  }
  .contact-widget {
    right:14px;
    bottom:14px;
  }
  .contact-trigger {
    font-size:14px;
    padding:10px 14px;
    min-height:48px;
  }
  .contact-panel {
    bottom:60px;
  }
}

.phone { border: 0; border-radius: 0; box-shadow: none; background: transparent; filter: drop-shadow(0 12px 30px #0b3b2b1c); }
.phone img { aspect-ratio: auto; object-fit: contain; }
.app-visual { transform: none; }
.app-visual img { border-radius: 0; box-shadow: none; }

:root { --footer-h: 40px; }
html, body { height: 100%; }
.snap {
  height: calc(100dvh - var(--footer-h));
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.screen { min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; }

.screen .hero { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; }
.screen .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.screen .benefits { margin-top: -28px; margin-bottom: 28px; flex: none; }

.screen.steps { justify-content: center; padding: 48px 0 40px; }
.screen.steps .lead { margin-bottom: 24px; }
.screen.steps .phone img { width: auto; max-width: 100%; max-height: 48vh; margin: 0 auto; }
.screen.steps .step-card h3 { margin-top: 12px; }

.screen.app { padding: 0; }
.screen.app .app-inner { flex: 1; padding: 32px 0; }
.screen.app .app-visual { width: min(100%, 300px); }
.screen.app .app-visual img { max-height: 55vh; width: auto; margin: 0 auto; }
.screen.app .closing { padding: 28px 0; }
.screen.app .closing h2 { font-size: clamp(22px, 2.6vw, 30px); }
.screen.app .closing p { font-size: 15px; }
.closing a.action { text-decoration: none; display: inline-flex; align-items: center; }

footer {
  position: fixed; inset: auto 0 0 0;
  height: var(--footer-h);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: center; gap: 24px;
  font-size: 13px; z-index: 15;
}
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
.contact-widget { bottom: calc(var(--footer-h) + 16px); }

@media (max-width: 800px) {
  .snap { scroll-snap-type: y mandatory; }
  .screen { min-height: 0; }
  .screen .hero { flex: none; }
  .screen .hero img { position: static; height: auto; }
  .screen.steps .phone img { max-height: none; }
  .screen.app .app-visual img { max-height: none; }
  .screen.app .app-inner { padding: 40px 0; }
  .contact-widget { bottom: calc(var(--footer-h) + 12px); }
}

.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 14px 0 11px;
  border-radius: 8px; border: 1px solid #a6a6a6;
  background: #000; color: #fff; text-decoration: none;
  font-family: Arial, 'Kanit', sans-serif; line-height: 1.05;
}
.badge svg { width: 26px; height: 26px; flex: none; }
.badge span { display: flex; flex-direction: column; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.badge small { font-size: 9px; font-weight: 400; letter-spacing: .02em; }
.badge:hover { background: #1c1c1c; }
.badge.line { background: #06c755; border-color: #06c755; border-radius: 10px; font-family: 'Kanit', Arial, sans-serif; padding-right: 10px; }
.badge.line img { width: 34px; height: 34px; border-radius: 8px; }
.badge.line small { font-size: 11px; }
.badge.line .chev { font-size: 26px; font-weight: 300; margin-left: 4px; opacity: .9; }
.badge.line:hover { background: #05b34c; }
.badge:focus-visible { outline: 3px solid #dfac65; outline-offset: 3px; }

.hero-download { position: absolute; left: 4%; bottom: 7%; z-index: 1; }
.hero-download p { margin: 0 0 8px; color: #fff; font-weight: 600; font-size: 15px; text-shadow: 0 1px 6px #0006; }
.hero-download .badges { max-width: 360px; }

.contact-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.contact-panel .contact-icons a { flex-direction: column; gap: 6px; padding: 10px 4px; margin: 0; background: transparent; font-size: 13px; text-align: center; }
.contact-panel .contact-icons a:hover { background: #f2f7f1; }
.contact-icons img { width: 48px; height: 48px; }

@media (max-width: 800px) {
  .hero-download { display: none; }   
  .contact-icons img { width: 44px; height: 44px; }
}

.carousel { position: relative; }
.screen.steps .step-grid {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 16px 8px 20px; margin: 0 -8px;
  scrollbar-width: thin; scrollbar-color: #b9c9bd transparent;
}
.screen.steps .step-card { flex: 0 0 clamp(220px, 22vw, 300px); scroll-snap-align: start; }
.screen.steps .step-grid { scroll-padding-inline: 8px; }
.screen.steps .phone img { max-height: 46vh; }
.car-btn {
  position: absolute; top: 40%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #fff; color: #144a36; box-shadow: 0 8px 22px #0b3b2b2e;
  font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 4px;
}
.car-btn:hover { background: #e6efe7; }
.car-btn.prev { left: -22px; } .car-btn.next { right: -22px; }
.car-btn:focus-visible { outline: 3px solid #dfac65; outline-offset: 3px; }
@media (max-width: 800px) {
  .screen.steps .step-grid { grid-template-columns: none; gap: 16px; }
  .screen.steps .step-card { flex: 0 0 72vw; }
  .screen.steps .step-card:last-child { width: auto; margin: 0; }
  .car-btn { display: none; }        
}

@media (min-width: 801px) {
  .screen.steps .step-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; overflow: visible; padding: 20px 0 8px; margin: 0; }
  .screen.steps .step-card { flex: none; transition: transform .25s ease-out; }
  .screen.steps .step-card:hover, .screen.steps .step-card:focus-within { transform: scale(1.1); z-index: 1; }
  .screen.steps .step-card:hover .phone { filter: drop-shadow(0 22px 40px #0b3b2b33); }
  .car-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .screen.steps .step-card { transition: none; } }

.dots { display: none; }
@media (max-width: 800px) {
  .screen.steps { min-height: 100%; justify-content: center; padding: 20px 0 16px; }
  .screen.steps .lead { margin-bottom: 8px; font-size: 14px; }
  .screen.steps .step-grid {
    --card: min(58vw, 240px);
    gap: 16px; padding: 12px calc(50% - var(--card) / 2) 8px; margin: 0;
    scroll-padding-inline: 0; scrollbar-width: none;
  }
  .screen.steps .step-grid::-webkit-scrollbar { display: none; }
  .screen.steps .step-card { flex: 0 0 var(--card); scroll-snap-align: center; scroll-snap-stop: always; }
  .screen.steps .phone img { max-height: 44vh; width: auto; max-width: 100%; margin: 0 auto; }
  .screen.steps .step-card h3 { font-size: 15px; margin-top: 8px; }
  .dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
  .dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c5d3c8; cursor: pointer; transition: width .2s ease-out, background .2s ease-out; }
  .dots button[aria-selected="true"] { width: 22px; border-radius: 4px; background: #b47845; }
  .dots button:focus-visible { outline: 3px solid #dfac65; outline-offset: 3px; }
}

@media (max-width: 800px) {
  .screen:first-child { min-height: 100%; }
  .screen .hero { flex: 1 1 0; min-height: 0; }
  .screen .hero img { position: absolute; inset: 0; height: 100%; min-height: 0; object-fit: cover; object-position: center top; background: none; }
  .screen .benefits { margin-top: -24px; margin-bottom: 20px; }
}

@media (max-width: 800px) {
  .screen.app { min-height: 100%; justify-content: center; }
  .screen.app .app-inner { flex: none; padding: 12px 0 8px; gap: 10px; }
  .screen.app .app-visual { width: auto; }
  .screen.app .app-visual img { max-height: 28vh; width: auto; margin: 0 auto; }
  .screen.app .eyebrow { margin-bottom: 4px; }
  .screen.app h2 { font-size: 24px; line-height: 1.25; margin-bottom: 8px; }
  .screen.app .app-inner > div > p { font-size: 14px; line-height: 1.5; }
  .screen.app ul { grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 12px 0 14px; font-size: 14px; }
  .screen.app .badges { gap: 8px; }
  .screen.app .badge { height: 42px; }
  .screen.app .badge span { font-size: 16px; }
  .screen.app .closing { display: none; }   
}

@media (max-width: 800px) {
  .screen.steps .step-grid { --card: min(64vw, 270px); }
  .screen.steps .phone img { max-height: 50vh; }
  .screen.steps .step-card { transform: scale(.82); opacity: .6; transition: transform .35s ease-out, opacity .35s ease-out; transform-origin: center; }
  .screen.steps .step-card.is-active { transform: scale(1); opacity: 1; }
  .screen.steps .step-card h3 { transition: opacity .35s ease-out; }
}
@media (prefers-reduced-motion: reduce) { .screen.steps .step-card { transition: none; } }

@media (max-width: 800px) {
  .screen.steps .step-grid { --card: min(56vw, 24vh); gap: 8px; }
  .screen.steps .phone img { max-height: none; width: 100%; height: auto; }
  .screen.steps .step-card { transform: scale(.85); opacity: .7; }
  .screen.steps .step-card.is-active { transform: scale(1); opacity: 1; }
}
@media (max-width: 800px) and (max-height: 700px) {
  .screen.steps .lead { display: none; }
}

@media (max-width: 800px) {
  .screen.app h2 br { display: none; }
  .screen.app h2 { font-size: clamp(20px, 6vw, 24px); white-space: nowrap; }
  .screen.app .app-visual img { max-height: 38vh; }
  .screen.app ul { grid-template-columns: 1fr; gap: 6px; }
}

.icon svg { width: 26px; height: 26px; display: block; }

@media (max-width: 800px) {
  .screen .hero { flex: none; }
  .screen .hero img { position: static; height: auto; object-fit: contain; }
  .screen:first-child { justify-content: flex-start; }
}

@media (min-width: 801px) {
  .screen .hero { background: #f8f8f3; }
  .screen .hero img { object-fit: contain; object-position: center; }
}

.hero-frame { position: relative; }
@media (min-width: 801px) {
  .screen .hero { display: flex; align-items: center; justify-content: center; }
  .hero-frame { height: min(100%, calc(100vw * 9 / 16)); aspect-ratio: 16 / 9; }
  .hero-frame img { position: static; width: 100%; height: 100%; object-fit: contain; }
}
@media (min-width: 801px) {
  .screen { height: 100%; }                 
  .hero-frame { max-width: 100%; }
}

@media (min-width: 801px) {
  .screen { height: auto; min-height: 100%; }
  .screen .hero { display: block; flex: none; background: none; overflow: visible; }
  .screen .hero .hero-frame { height: auto; aspect-ratio: auto; max-width: none; }
  .screen .hero .hero-frame img { position: static; width: 100%; height: auto; object-fit: fill; }
}
.hero-download { display: none; }   

.benefits { padding: 16px 12px; }
.benefits .benefit { min-height: 0; padding: 4px 18px; }
.benefits .icon { width: 40px; height: 40px; margin-bottom: 8px; }
.benefits .icon svg { width: 22px; height: 22px; }
.benefits .benefit h2 { font-size: 16px; margin-bottom: 2px; }
.benefits .benefit p { font-size: 14px; }

@media (min-width: 801px) {
  .screen:first-child { height: 100%; }
  .screen .hero { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .screen .hero .hero-frame { height: 100%; }
  .screen .hero .hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
}

.hero-download { display: block; }
.store-badges { display: flex; gap: 10px; }
.store-badges a { display: block; border-radius: 9px; }
.store-badges img { height: 48px; width: auto; display: block; border-radius: 9px; box-shadow: 0 6px 18px rgb(0 0 0 / 35%); }
.store-badges a:hover img { filter: brightness(1.12); }
@media (min-width: 801px) {
  .hero-download { left: 4%; bottom: calc(28px + 5%); }
}
@media (max-width: 800px) {
  .hero-download { position: static; display: flex; justify-content: center; padding: 12px 16px 36px; }
  .hero-download p { display: none; }
  .store-badges img { height: 42px; }
}

.screen .hero .hero-frame .store-badges img { position: static; inset: auto; width: auto; height: 48px; object-fit: contain; }
@media (max-width: 800px) { .screen .hero .hero-frame .store-badges img { height: 42px; } }
.hero-download { z-index: 2; }

@media (min-width: 801px) {
  .screen .hero .hero-frame picture img { width: 100%; height: auto; object-fit: fill; object-position: center top; }
  .screen .hero .hero-frame::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    background: linear-gradient(to bottom, rgb(248 248 243 / 0), #f8f8f3 90%);
    pointer-events: none; z-index: 1;
  }
}

.badges .store-img { display: block; border-radius: 9px; }
.badges .store-img img { height: 46px; width: auto; display: block; border-radius: 9px; box-shadow: 0 4px 14px rgb(0 0 0 / 20%); }
.badges .store-img:hover img { filter: brightness(1.12); }

@media (min-width: 801px) {
  .hero-download { left: max(24px, calc((100% - 1160px) / 2)); }
}
.hero-download p { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; margin-bottom: 10px; }
.store-badges a, .store-badges img, .badges .store-img, .badges .store-img img { border-radius: 0; box-shadow: none; }

@media (min-width: 801px) {
  .screen .hero .hero-frame::after { height: 22%; background: linear-gradient(to bottom, rgb(248 248 243 / 0), #f8f8f3 100%); }
  .screen .benefits { margin-top: -64px; margin-bottom: 16px; }
  .hero-download { bottom: calc(64px + 4%); }
}

@media (min-width: 801px) { .snap { scroll-snap-type: none; } }

@media (max-width: 800px) {
  body { font-size: 17px; }
  .benefits .benefit h2 { font-size: 18px; }
  .benefits .benefit p { font-size: 15px; line-height: 1.5; }
  .eyebrow { font-size: 14px; }
  .screen.steps .lead { font-size: 16px; }
  .screen.steps .step-card h3 { font-size: 17px; line-height: 1.4; }
  .screen.app h2 { font-size: clamp(22px, 6.6vw, 27px); }
  .screen.app .app-inner > div > p { font-size: 16px; line-height: 1.55; }
  .screen.app ul { font-size: 16px; gap: 8px; }
  .screen.app .app-visual img { max-height: 32vh; }
  footer { font-size: 15px; }
  .contact-panel h2 { font-size: 20px; }
  .contact-panel .contact-icons a { font-size: 14px; }
}
@media (max-width: 800px) and (max-height: 700px) {
  .screen.app .app-visual img { max-height: 26vh; }
  .screen.app .app-inner { padding: 8px 0 4px; }
}

@media (max-width: 800px) {
  body { font-size: 18px; }
  .benefits .benefit h2 { font-size: 20px; }
  .benefits .benefit p { font-size: 16px; }
  .benefits .benefit { padding: 4px 10px; }
  .eyebrow { font-size: 15px; }
  .steps h2 { font-size: 34px; }
  .screen.steps .lead { font-size: 17px; }
  .screen.steps .step-card h3 { font-size: 19px; }
  .screen.app h2 { font-size: clamp(24px, 7.2vw, 30px); }
  .screen.app .app-inner > div > p { font-size: 17px; }
  .screen.app ul { font-size: 17px; }
  .screen.app .app-visual img { max-height: 30vh; }
  footer { font-size: 16px; }
  .contact-trigger { font-size: 16px; }
}
@media (max-width: 800px) and (max-height: 700px) {
  .screen.app .app-visual img { max-height: 24vh; }
  .screen.steps .phone img { max-height: 46vh; }
}

@media (hover: hover) and (pointer: fine) {
  .store-badges a, .badges .store-img, .benefit, .app-visual img, .contact-icons a, .action, .contact-trigger, .icon {
    transition: transform .22s ease-out, filter .22s ease-out;
  }
  .store-badges a:hover, .badges .store-img:hover { transform: scale(1.08); }
  .store-badges a:hover img, .badges .store-img:hover img { filter: none; }
  .benefit:hover { transform: scale(1.05); }
  .benefit:hover .icon { transform: scale(1.1); }
  .app-visual img:hover { transform: scale(1.05); }
  .contact-icons a:hover { transform: scale(1.1); }
  .action:hover, .contact-trigger:hover { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .store-badges a, .badges .store-img, .benefit, .app-visual img, .contact-icons a, .action, .contact-trigger, .icon { transition: none; }
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: calc(var(--i, 0) * 70ms); }
.screen.in .reveal { opacity: 1; transform: none; }
.hero-frame { will-change: transform; }
.app-visual { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.store-badges a, .badges .store-img, .contact-trigger, .action { transition: transform .12s ease-out; }
.store-badges a:active, .badges .store-img:active, .contact-trigger:active, .action:active { transform: scale(.95) !important; }
.contact-trigger { position: relative; }
.contact-trigger::after {
  content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid #14583b;
  opacity: 0; pointer-events: none; animation: ring 1.6s ease-out 1.2s 2;
}
@keyframes ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.page-dots { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; z-index: 15; }
.page-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #b9c9bd; cursor: pointer; transition: transform .2s ease-out, background .2s ease-out; }
.page-dots button[aria-current="true"] { background: #14583b; transform: scale(1.4); }
.page-dots button:hover { transform: scale(1.3); }
.page-dots button:focus-visible { outline: 3px solid #dfac65; outline-offset: 3px; }
@media (max-width: 800px) { .page-dots { right: 8px; gap: 8px; } .page-dots button { width: 8px; height: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .app-visual, .contact-trigger::after { animation: none; }
  .hero-frame { transform: none !important; }
}
.screen.in .benefit:hover .icon { transform: scale(1.1); }   

.screen .hero { overflow: hidden; }
.screen .hero .hero-frame picture img { animation: drift 18s ease-in-out infinite alternate; transform-origin: 50% 40%; will-change: transform; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .screen .hero .hero-frame picture img { animation: none; } }

@media (min-width: 801px) {
  .screen .hero .hero-frame::after { height: 30%; background: linear-gradient(to bottom, rgb(248 248 243 / 0) 0%, rgb(248 248 243 / .55) 55%, #f8f8f3 100%); }
}
.screen .hero .hero-frame::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(0 0 0 / .14) 100%);
}
@media (max-width: 800px) {
  @keyframes drift-soft { from { transform: scale(1); } to { transform: scale(1.03); } }
  .screen .hero .hero-frame picture img { animation-name: drift-soft; animation-duration: 22s; }
  .screen .hero .hero-frame::before { background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgb(0 0 0 / .10) 100%); }
}
@media (prefers-reduced-motion: reduce) { .screen .hero .hero-frame picture img { animation: none; } }

.app-visual img { aspect-ratio: 800 / 1052; }
.badges .store-img img, .store-badges img { aspect-ratio: 320 / 106; }
.contact-icons img { aspect-ratio: 1; }

@media (min-width: 801px) { .screen.app .app-visual img { height: 30vh; max-height: none; width: auto; } }
@media (max-width: 800px) { .screen.app .app-visual img { height: 32vh; max-height: none; width: auto; } }
@media (max-width: 800px) and (max-height: 700px) { .screen.app .app-visual img { height: 24vh; } }

.hero-frame { container-type: inline-size; }
.hand {
  position: absolute; left: 49.17%; top: 12.96%; width: 26.04%; height: auto; z-index: 1;
  filter: drop-shadow(0 1.4cqw 2cqw rgb(0 0 0 / .32));
  animation: hand-float 7s ease-in-out infinite;
  transform: translate(calc(var(--px, 0) * 1.2cqw), calc(var(--py, 0) * .8cqw));
  will-change: transform;
}
@keyframes hand-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.9cqw; } }
.screen .hero .hero-frame picture img { animation: none; transform: translate(calc(var(--px, 0) * -.5cqw), calc(var(--py, 0) * -.3cqw)) scale(1.03); transition: transform .6s ease-out; will-change: transform; }
.hero-copy {
  position: absolute; z-index: 2; color: #fff;
  left: 6.8%; top: 25%;
  transform: translate(calc(var(--px, 0) * -.3cqw), calc(var(--py, 0) * -.2cqw)); transition: transform .6s ease-out;
}
.hero-copy h1 { margin: 0; font-weight: 700; font-size: 4.5cqw; line-height: 1.12; letter-spacing: .01em; text-shadow: 0 .15cqw .9cqw rgb(0 0 0 / .35); overflow-wrap: normal; }
.hero-copy h1 span { display: block; }
.hero-copy h1 span + span { padding-left: 1.7cqw; }
.hero-copy .pill {
  display: inline-block; margin: 1.3cqw 0 0 .1cqw; padding: .55cqw 1.7cqw .7cqw; border-radius: 999px;
  background: linear-gradient(135deg, #2f7757, #1a5a3f); box-shadow: 0 .5cqw 1.4cqw rgb(0 0 0 / .25);
  font-weight: 600; font-size: 2.15cqw; line-height: 1.4; white-space: nowrap;
}
.hero-copy .pill small { font-size: 1.75cqw; font-weight: 500; }

@media (max-width: 800px) { .hero-copy { top: 22%; } .hero-copy h1 { font-size: 5.4cqw; } .hero-copy .pill { font-size: 2.6cqw; } }
@media (prefers-reduced-motion: reduce) { .hand { animation: none; } }

.screen .hero .hero-frame img.hand {
  position: absolute; inset: auto; left: 49.17%; top: 12.96%; width: 26.04%; height: auto; max-height: none;
  object-fit: fill; z-index: 1; min-height: 0; background: none;
}

@keyframes drift { from { scale: 1; } to { scale: 1.05; } }
@keyframes drift-soft { from { scale: 1; } to { scale: 1.03; } }
.screen .hero .hero-frame picture img { animation: drift 18s ease-in-out infinite alternate; transform: translate(calc(var(--px, 0) * -.5cqw), calc(var(--py, 0) * -.3cqw)); }
@media (max-width: 800px) { .screen .hero .hero-frame picture img { animation-name: drift-soft; animation-duration: 22s; } }
@media (prefers-reduced-motion: reduce) { .screen .hero .hero-frame picture img { animation: none; } }

.hand { display: none; }

.screen .hero .hero-frame img.pill {
  position: static; inset: auto; display: block; width: 23.75cqw; height: auto; max-height: none; min-height: 0;
  margin: 1.2cqw 0 0 .2cqw; padding: 0; background: none; box-shadow: none; border-radius: 0; object-fit: fill;
  filter: drop-shadow(0 .4cqw 1cqw rgb(0 0 0 / .25));
}

@media (max-width: 800px) {
  .screen:first-child { min-height: 100%; justify-content: flex-start; }
  .screen .hero { flex: 1 1 0; min-height: 0; overflow: hidden; background: none; }
  .screen .hero .hero-frame { height: 100%; }
  .screen .hero .hero-frame picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .hero-copy { top: 5%; left: 6%; }
  .hero-copy h1 { font-size: 8.2cqw; line-height: 1.1; }
  .hero-copy h1 span + span { padding-left: 2.4cqw; }
  .screen .hero .hero-frame img.pill { width: 52cqw; margin-top: 2.2cqw; }
  .hero-download { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; padding: 0 16px; background: none; }
  .hero-download p { display: none; }
  .screen .hero .hero-frame::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / .45)); z-index: 1; pointer-events: none; }
  .screen .benefits { margin-top: -24px; }
}

@media (max-width: 800px) {
  .screen .hero .hero-frame::after { height: 38%; background: linear-gradient(to bottom, rgb(248 248 243 / 0) 0%, rgb(248 248 243 / .55) 55%, #f8f8f3 100%); }
}

.pill-wrap { position: relative; display: inline-block; border-radius: 999px; overflow: hidden; margin: 1.2cqw 0 0 .2cqw; }
.screen .hero .hero-frame .pill-wrap img.pill { margin: 0; filter: none; }
.pill-wrap::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 35%; left: -45%;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .55) 50%, rgb(255 255 255 / 0) 100%);
  transform: skewX(-18deg); animation: sweep 5s ease-in-out infinite; pointer-events: none;
}
@keyframes sweep { 0%, 55% { left: -45%; } 75%, 100% { left: 115%; } }
@media (max-width: 800px) { .pill-wrap { margin-top: 2.2cqw; } .screen .hero .hero-frame .pill-wrap img.pill { width: 52cqw; } }

.icon-glow {
  position: absolute; z-index: 1; pointer-events: none; overflow: hidden;
  border-radius: 22%; transform: translate(-50%, -50%);
  left: 63.5%; top: calc(100cqw * 9 / 16 * .41); width: 14.6cqw; aspect-ratio: 1;
  box-shadow: 0 0 2.2cqw 0.6cqw rgb(255 255 255 / .0);
  animation: icon-pulse 3.2s ease-in-out infinite;
}
.icon-glow::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .5) 50%, rgb(255 255 255 / 0) 100%);
  transform: skewX(-18deg); animation: sweep 5s ease-in-out 1.2s infinite;
}
@keyframes icon-pulse { 0%, 100% { box-shadow: 0 0 1.2cqw .2cqw rgb(255 255 255 / .05); } 50% { box-shadow: 0 0 2.6cqw .8cqw rgb(255 255 255 / .38); } }
@media (max-width: 800px) {
  .screen .hero .hero-frame { container-type: size; }
  .icon-glow { --imgw: calc(100cqh * 0.75); left: calc(.514 * var(--imgw) - (var(--imgw) - 100cqw) / 2); top: 45cqh; width: calc(.194 * var(--imgw)); }
}
@media (prefers-reduced-motion: reduce) { .pill-wrap, .pill-wrap::after, .icon-glow, .icon-glow::after { animation: none; } }

.icon-glow { width: 17.5cqw; left: 63.6%; top: calc(100cqw * 9 / 16 * .40); border-radius: 24%; }
.icon-glow::after { width: 55%; }
@media (max-width: 800px) { .icon-glow { width: calc(.24 * var(--imgw)); top: 44.5cqh; } }

.scene { position: absolute; inset: 0; transform-origin: 50% 40%; animation: drift 18s ease-in-out infinite alternate; will-change: transform; transform: translate(calc(var(--px, 0) * -.5cqw), calc(var(--py, 0) * -.3cqw)); }
.screen .hero .hero-frame picture img { animation: none !important; transform: none !important; scale: none; }
@media (prefers-reduced-motion: reduce) { .scene { animation: none; } }

@media (min-width: 801px) { .scene { height: auto; bottom: auto; } .scene picture img { position: static; display: block; width: 100%; height: auto; } }

.icon-glow { left: 63.4%; top: calc(100cqw * 9 / 16 * .395); width: 15.2cqw; border-radius: 22%; }
.icon-glow::after { background: linear-gradient(105deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .38) 50%, rgb(255 255 255 / 0) 100%); }
@media (max-width: 800px) {
  .icon-glow {
    --imgw: max(100cqw, calc(100cqh * 0.75)); --imgh: calc(var(--imgw) / 0.75);
    left: calc(.509 * var(--imgw) - (var(--imgw) - 100cqw) / 2); top: calc(.462 * var(--imgh)); width: calc(.215 * var(--imgw));
  }
}

.screen .hero .hero-frame::after { bottom: -1px; }
@media (min-width: 801px) { .screen .hero .hero-frame::after { background: linear-gradient(to bottom, rgb(248 248 243 / 0) 0%, rgb(248 248 243 / .55) 55%, #f8f8f3 94%, #f8f8f3 100%); } }
@media (max-width: 800px) { .screen .hero .hero-frame::after { background: linear-gradient(to bottom, rgb(248 248 243 / 0) 0%, rgb(248 248 243 / .55) 55%, #f8f8f3 94%, #f8f8f3 100%); } }

.hero-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -22% -28% -30% -30%;
  background: radial-gradient(ellipse at 40% 45%, rgb(0 0 0 / .34) 0%, rgb(0 0 0 / .18) 45%, rgb(0 0 0 / 0) 75%);
  filter: blur(6px);
}
.hero-copy { isolation: isolate; }
.hero-copy h1 { text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 .3cqw 1.2cqw rgb(0 0 0 / .45), 0 .8cqw 2.4cqw rgb(0 0 0 / .25); }
.hero-download p { text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 4px 16px rgb(0 0 0 / .45); }
.screen .hero .hero-frame .pill-wrap img.pill { filter: drop-shadow(0 .5cqw 1.2cqw rgb(0 0 0 / .35)); }

body { background: #f8f8f3; }

.m-only { display: none; }
@media (max-width: 800px) { .m-only { display: inline; } .screen.steps .lead { white-space: normal; } }
@media (min-width: 801px) { .screen.steps .lead { white-space: nowrap; max-width: none; } }

@keyframes sweep { 0%, 55% { left: -140%; } 75%, 100% { left: 200%; } }
.icon-glow::after, .pill-wrap::after { left: -140%; }

.scene, .hero-copy { transform: none !important; transition: none; }



.screen .hero .hero-frame::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 92%);
  bottom: -2px;
}

@keyframes sweep { 0%, 60% { left: -140%; } 72%, 100% { left: 200%; } }
@keyframes icon-pulse { 0%, 58%, 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } 70% { box-shadow: 0 0 2.4cqw .7cqw rgb(255 255 255 / .32); } 84% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } }
.icon-glow { animation: icon-pulse 5s ease-in-out 1.2s infinite; }
.icon-glow::after { width: 26%; background: linear-gradient(105deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .32) 50%, rgb(255 255 255 / 0) 100%); }
.pill-wrap::after { width: 26%; }

.contact-trigger {
  background: #fff; color: #14583b; font-weight: 700;
  box-shadow: 0 12px 32px rgb(0 0 0 / .32), 0 2px 6px rgb(0 0 0 / .18), inset 0 0 0 2px #14583b;
}
.contact-trigger:hover { background: #14583b; color: #fff; }
.contact-trigger::after { border-color: #fff; }

@keyframes sweep { 0%, 62% { left: -140%; } 82%, 100% { left: 200%; } }
.pill-wrap::after { animation-duration: 8s; }
.icon-glow::after { animation-duration: 8s; animation-delay: 2s; }
@keyframes icon-pulse { 0%, 60%, 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } 72% { box-shadow: 0 0 2.4cqw .7cqw rgb(255 255 255 / .3); } 88% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } }
.icon-glow { animation-duration: 8s; animation-delay: 2s; }

.contact-trigger:hover { background: #fff; color: #14583b; }
@media (hover: hover) and (pointer: fine) { .contact-trigger:hover { background: #14583b; color: #fff; } }
.contact-trigger[aria-expanded="true"], .contact-trigger[aria-expanded="true"]:hover { background: #14583b; color: #fff; }

@media (min-width: 801px) {
  .screen.app .app-visual { width: auto; max-width: none; justify-self: center; }
  .screen.app .app-visual img { height: min(56vh, 600px); width: auto; max-width: none; max-height: none; }
}

.page-dots { transition: opacity .4s ease-out; }
.page-dots.idle { opacity: 0; pointer-events: none; }
.snap { scrollbar-width: none; -ms-overflow-style: none; }
.snap::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .page-dots { transition: none; } }

:root { --footer-h: 52px; }
footer { justify-content: space-between; padding: 0 12px 0 24px; }
footer .contact-widget { position: relative; inset: auto; }
footer .contact-trigger { min-height: 38px; padding: 6px 18px; font-size: 15px; box-shadow: 0 4px 14px rgb(0 0 0 / .35), inset 0 0 0 2px #14583b; }
footer .contact-trigger:hover, footer .contact-trigger[aria-expanded="true"] { box-shadow: 0 4px 14px rgb(0 0 0 / .35), inset 0 0 0 2px #fff; }
footer .contact-panel { bottom: calc(100% + 12px); }
@media (max-width: 800px) { footer { padding: 0 8px 0 16px; } footer .contact-trigger { font-size: 15px; padding: 6px 14px; } }
footer .contact-panel { text-align: left; }
footer .contact-panel a:hover { color: #143c2c; text-decoration: none; }
@media (max-width: 800px) {
  .hero-frame, .scene, .scene picture img { will-change: auto; }
  footer { padding: 0 14px 0 16px; }
}
@media (max-width: 800px) { .screen .hero .hero-frame picture img { will-change: auto; } }
@media (max-width: 800px) {
  .screen .benefits { padding: 1.1svh 8px; }
  .benefits .benefit, .benefits .benefit:nth-child(-n+2), .benefits .benefit:nth-child(n+3) { min-height: 0; padding: .9svh 6px; }
  .benefits .icon { width: clamp(28px, 4.6svh, 48px); height: clamp(28px, 4.6svh, 48px); margin-bottom: .6svh; }
  .benefits .icon svg { width: 55%; height: 55%; }
  .benefits .benefit h2 { font-size: clamp(14px, 2.5svh, 20px); line-height: 1.2; margin: 0 0 .2svh; }
  .benefits .benefit p { font-size: clamp(12px, min(1.9svh, 3.9vw), 16px); line-height: 1.3; white-space: nowrap; }
}
:root { color-scheme: only light; }
@media (max-width: 800px) {
  .screen .hero { position: relative; }
  .screen .hero .hero-frame { position: absolute; inset: 0; height: auto; }
}
@media (max-width: 800px) { .screen.steps .carousel { margin-inline: calc(50% - 50vw); } }
.scene { -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 88%); mask-image: linear-gradient(to bottom, #000 76%, transparent 88%); }
.benefit .icon svg { transform-origin: 50% 50%; animation: 8s ease-in-out infinite both; }
.benefit:nth-child(1) .icon svg { animation-name: icon-swing; transform-origin: 50% 10%; animation-delay: 1.4s; }
.benefit:nth-child(2) .icon svg { animation-name: icon-pop; animation-delay: 2s; }
.benefit:nth-child(3) .icon svg { animation-name: icon-search; animation-delay: 2.6s; }
.benefit:nth-child(4) .icon svg { animation-name: icon-buzz; animation-delay: 3.2s; }
@keyframes icon-swing { 0%, 14%, 100% { transform: rotate(0); } 3% { transform: rotate(-14deg); } 6% { transform: rotate(10deg); } 9% { transform: rotate(-5deg); } 12% { transform: rotate(2deg); } }
@keyframes icon-pop { 0%, 10%, 100% { transform: scale(1); } 4% { transform: scale(1.25); } 7% { transform: scale(.94); } }
@keyframes icon-search { 0%, 14%, 100% { transform: translate(0, 0); } 3.5% { transform: translate(2px, -2px); } 7% { transform: translate(-2px, -1px); } 10.5% { transform: translate(1px, 2px); } }
@keyframes icon-buzz { 0%, 8%, 100% { transform: rotate(0); } 1%, 3%, 5% { transform: rotate(-9deg); } 2%, 4%, 6% { transform: rotate(9deg); } 7% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .benefit .icon svg { animation: none; } }
.app-cta { margin: 18px 0 14px; }
.app-cta h3 { margin: 0 0 4px; font-size: 22px; line-height: 1.3; color: #133b2b; }
.app-cta p { margin: 0; font-size: 16px; line-height: 1.5; color: #5e6b62; }
.app-contacts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.app-contacts a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; color: #143c2c; text-decoration: none; font-size: 13px; font-weight: 500; }
.app-contacts img { width: 44px; height: 44px; }
.app-contacts a:focus-visible { outline: 3px solid #efb96d; outline-offset: 3px; border-radius: 10px; }
@media (max-width: 800px) {
  .screen.app .app-visual img { height: 20svh; }
  .screen.app ul { margin: 8px 0 0; gap: 2px; }
  .app-cta { margin: 10px 0 10px; }
  .app-cta h3 { font-size: clamp(17px, 2.6svh, 20px); }
  .app-cta p { font-size: clamp(14px, 2.1svh, 16px); line-height: 1.4; }
  .app-contacts { margin-top: 10px; gap: 6px 18px; }
  .app-contacts img { width: clamp(34px, 5svh, 44px); height: clamp(34px, 5svh, 44px); }
}
@keyframes drift { from { scale: 1; } to { scale: 1.072; } }
.scene { animation-duration: 12s; }
@media (max-width: 800px) {
  .screen.app .app-visual { margin: 0; }
  .screen.app .app-inner > div > p:not(.eyebrow) { margin: 6px 0 0; font-size: clamp(14px, 2.4svh, 17px); line-height: 1.45; }
  .screen.app ul { font-size: clamp(14px, 2.3svh, 17px); }
}
@media (max-width: 800px) and (max-height: 600px) { .screen.app .app-visual img { height: 12svh; } .screen.app ul { gap: 0; } .screen.app .app-inner { gap: 6px; } }
.app p, .app-cta p { text-wrap: pretty; }
@media (min-width: 801px) { .scene { transform-origin: 0 0; } }
.app-contact-block { margin-top: 18px; }
.app-contact-block > p { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 500; color: #133b2b; }
.app-contact-block .app-contacts { margin-top: 10px; }
@media (max-width: 800px) {
  .app-contact-block { margin-top: 12px; }
  .app-contact-block > p { font-size: clamp(14px, 2.2svh, 16px); }
  .app-contact-block .app-contacts { margin-top: 6px; }
}
.nw { white-space: nowrap; }
@media (max-width: 800px) {
  .screen.app ul { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .screen.app li { padding-left: 24px; }
}
@media (max-width: 800px) {
  .screen.app { height: 100%; min-height: 0; }
  .screen.app .app-inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .screen.app .app-visual { flex: 1 1 0; min-height: 56px; position: relative; margin: 0; }
  .screen.app .app-visual img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; }
  .screen.app .app-inner > div:last-child { flex: none; }
}
@media (max-width: 800px) { .screen.app .app-inner { padding: 12px 0 16px; } }
@media (max-width: 800px) { .screen.app .app-visual { align-self: stretch; width: 100%; max-width: none; } }
@media (max-width: 800px) {
  .screen.app ul { grid-template-columns: auto auto; justify-content: start; gap: 4px 18px; font-size: min(clamp(14px, 2.3svh, 17px), calc((100vw - 88px) / 18)); }
  .screen.app li { white-space: nowrap; padding-left: 20px; }
}
@media (max-width: 800px) { .screen.app .app-inner { padding-top: clamp(24px, 5svh, 48px); } }
@media (min-width: 801px) {
  .screen .benefits { padding: clamp(6px, 1.8vh, 16px) 12px; }
  .benefits .benefit { padding: clamp(0px, .45vh, 4px) 18px; }
  .benefits .icon { width: clamp(24px, 4.45vh, 40px); height: clamp(24px, 4.45vh, 40px); margin-bottom: clamp(3px, .9vh, 8px); }
  .benefits .icon svg { width: 55%; height: 55%; }
  .benefits .benefit h2 { font-size: clamp(13px, 1.78vh, 16px); }
  .benefits .benefit p { font-size: clamp(11px, 1.56vh, 14px); line-height: 1.4; }

  .screen.app .app-inner { padding: clamp(12px, 3.6vh, 32px) 0; }
  .screen.app .eyebrow { font-size: clamp(12px, 2vh, 18px); margin-bottom: clamp(2px, .9vh, 8px); }
  .screen.app h2 { font-size: clamp(24px, 5.33vh, 48px); line-height: 1.25; margin-bottom: clamp(6px, 2vh, 18px); }
  .screen.app .app-inner > div > p:not(.eyebrow) { font-size: clamp(13px, 2vh, 18px); line-height: 1.6; margin: clamp(4px, 2vh, 18px) 0; }
  .screen.app ul { font-size: clamp(13px, 1.78vh, 16px); row-gap: clamp(2px, 1.33vh, 12px); margin: clamp(6px, 2.67vh, 24px) 0 clamp(6px, 3.33vh, 30px); }
  .app-cta { margin: clamp(6px, 2vh, 18px) 0 clamp(6px, 1.56vh, 14px); }
  .app-cta h3 { font-size: clamp(15px, 2.45vh, 22px); }
  .app-cta p { font-size: clamp(13px, 1.78vh, 16px); }
  .screen.app .badges .store-img img { height: clamp(30px, 5.1vh, 46px); }
  .app-contact-block { margin-top: clamp(6px, 2vh, 18px); }
  .app-contact-block > p { font-size: clamp(13px, 1.78vh, 16px); }
  .app-contact-block .app-contacts { margin-top: clamp(4px, 1.1vh, 10px); }
  .screen.app .app-contacts img { width: clamp(28px, 4.9vh, 44px); height: clamp(28px, 4.9vh, 44px); }
  .screen.app .app-contacts a { font-size: clamp(11px, 1.45vh, 13px); }
}
@media (min-width: 801px) {
  .screen .hero .hero-frame { container-type: size; }
  .hero-copy { --u: max(5px, min(1cqw, (70cqh - 170px) / 16)); }
  .hero-copy h1 { font-size: calc(4.5 * var(--u)); }
  .hero-copy h1 span + span { padding-left: calc(1.7 * var(--u)); }
  .pill-wrap { margin-top: calc(1.2 * var(--u)); }
  .screen .hero .hero-frame .pill-wrap img.pill { width: calc(23.75 * var(--u)); }
  .screen .hero .hero-frame .hero-download p { font-size: clamp(14px, min(1.6vw, 3.2cqh), 24px); }
  .screen .hero .hero-frame .store-badges img { height: clamp(32px, 6.5cqh, 48px); }
}
@media (min-width: 801px) {
  .screen.steps { padding: clamp(12px, 5.3vh, 48px) 0 clamp(10px, 4.4vh, 40px); }
  .screen.steps .eyebrow { font-size: clamp(11px, 1.45vh, 13px); margin-bottom: clamp(3px, .9vh, 8px); }
  .screen.steps h2 { font-size: clamp(26px, 5.33vh, 48px); line-height: 1.25; margin-bottom: clamp(4px, 1.33vh, 12px); }
  .screen.steps .lead { font-size: clamp(13px, 1.9vh, 17px); margin-bottom: clamp(8px, 2.67vh, 24px); }
  .screen.steps .step-grid { padding-top: clamp(8px, 2.2vh, 20px); }
  .screen.steps .step-card h3 { font-size: clamp(13px, 1.78vh, 16px); margin-top: clamp(4px, 1.33vh, 12px); }
}
@media (min-width: 801px) { .screen.steps .phone img { max-height: min(46vh, 100vh - 256px); } }
footer { gap: 16px; }
.copyright { flex: none; }
.hotlines { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2px 0; font-size: 13px; line-height: 1.35; }
.hotlines-title, .hotlines-copy { display: none; }
footer .hotlines a { color: #c9ddcf; white-space: nowrap; padding: 0 14px; }
footer .hotlines a + a { border-left: 1px solid rgb(255 255 255 / .18); }
.hotlines .hl-num { color: #fff; font-weight: 600; }
.hotlines .hl-num small, .hotlines .hl-label small { font-size: inherit; }
.hotlines a.urgent .hl-num { color: #ffd27a; }
.hotline-trigger { display: none; }
@media (min-width: 801px) and (max-width: 1279px) { .hotlines .hl-label small { display: none; } }
@media (min-width: 801px) and (max-width: 1099px) { .hotlines { font-size: 12px; } footer .hotlines a { padding: 0 10px; } }
@media (max-width: 800px) {
  .copyright { display: none; }
  .hotline-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .4); background: transparent; color: #fff; font: 600 15px 'Kanit', Arial, sans-serif; cursor: pointer; }
  .hotline-trigger svg { width: 16px; height: 16px; flex: none; }
  .hotline-trigger[aria-expanded="true"] { background: #fff; color: #14583b; border-color: #fff; }
  .hotline-trigger:focus-visible { outline: 3px solid #efb96d; outline-offset: 3px; }
  .hotlines { display: none; position: absolute; left: 8px; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 16px)); flex-direction: column; align-items: stretch; gap: 6px; padding: 16px; background: #fff; border-radius: 18px; border: 1px solid #e0e9e0; box-shadow: 0 16px 50px #092c2170; z-index: 20; font-size: 15px; text-align: left; }
  .hotlines.open { display: flex; }
  .hotlines-title { display: block; margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #133b2b; }
  footer .hotlines a, footer .hotlines a + a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: #f2f7f1; color: #143c2c; white-space: normal; }
  footer .hotlines a:hover { color: #143c2c; text-decoration: none; background: #e3f0e5; }
  .hotlines .hl-label small { display: block; font-size: 12px; color: #5f6f65; }
  .hotlines .hl-num { color: #14583b; font-weight: 700; white-space: nowrap; text-align: right; }
  .hotlines .hl-num small { display: block; font-size: 12px; font-weight: 600; }
  footer .hotlines a.urgent { background: #fff4e0; }
  .hotlines a.urgent .hl-num { color: #a5521b; }
  .hotlines-copy { display: block; margin: 6px 0 0; font-size: 12px; color: #7a8a80; }
}
@media (max-width: 800px) {
  footer .contact-trigger, footer .hotline-trigger { box-sizing: border-box; width: 136px; min-height: 40px; padding: 6px 12px; justify-content: center; gap: 7px; border-radius: 999px; font: 700 15px 'Kanit', Arial, sans-serif; }
  footer .hotline-trigger { border: 0; background: #ac7041; color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .35), inset 0 0 0 2px #c98d5c; }
  footer .hotline-trigger[aria-expanded="true"] { background: #8d5a33; color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .35), inset 0 0 0 2px #fff; }
}
@media (max-width: 800px) { .hotlines.open { display: grid; grid-template-columns: 1fr; grid-template-rows: auto repeat(3, 1fr); } }
@media (max-width: 800px) { footer .contact-trigger:not([aria-expanded="true"]) { box-shadow: 0 4px 14px rgb(0 0 0 / .35), inset 0 0 0 2px #b9dcc5; } }
footer .hotline-trigger { transition: transform .2s ease-out, background-color .2s ease-out, color .2s ease-out; }
@media (max-width: 800px) and (hover: hover) and (pointer: fine) {
  footer .hotline-trigger:not([aria-expanded="true"]):hover { background: #fff; color: #ac7041; }
}
@media (prefers-reduced-motion: reduce) { footer .hotline-trigger { transition: none; } footer .hotline-trigger:hover { transform: none; } }
footer .contact-trigger:hover, footer .hotline-trigger:hover { transform: none; }
footer .contact-trigger svg, footer .hotline-trigger svg { width: 17px; height: 17px; flex: none; }
footer .contact-trigger, footer .hotline-trigger { letter-spacing: .01em; }
footer .contact-trigger:not([aria-expanded="true"]) { background: linear-gradient(180deg, #ffffff 0%, #eaf4ee 100%); box-shadow: 0 6px 16px rgb(0 0 0 / .35), inset 0 0 0 1.5px #b9dcc5, inset 0 1px 0 #fff; }
footer .contact-trigger[aria-expanded="true"] { background: linear-gradient(180deg, #1f6e4b 0%, #14583b 100%); }
@media (max-width: 800px) {
  footer .hotline-trigger { background: linear-gradient(180deg, #c08451 0%, #9d6438 100%); box-shadow: 0 6px 16px rgb(0 0 0 / .35), inset 0 0 0 1.5px #d6a072, inset 0 1px 0 rgb(255 255 255 / .35); }
  footer .hotline-trigger[aria-expanded="true"] { background: linear-gradient(180deg, #8d5a33 0%, #74482a 100%); box-shadow: 0 6px 16px rgb(0 0 0 / .35), inset 0 0 0 1.5px #fff; }
}
@media (max-width: 800px) and (hover: hover) and (pointer: fine) {
  footer .hotline-trigger:not([aria-expanded="true"]):hover { background: #fff; color: #9d6438; box-shadow: 0 6px 16px rgb(0 0 0 / .35), inset 0 0 0 1.5px #d6a072; }
}
@media (hover: hover) and (pointer: fine) {
  footer .contact-trigger:not([aria-expanded="true"]):hover { background: linear-gradient(180deg, #1f6e4b 0%, #14583b 100%); color: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / .35), inset 0 0 0 1.5px #b9dcc5; }
}
@media (max-width: 800px) {
  footer .hotline-trigger, footer .hotline-trigger[aria-expanded="true"] { width: auto; padding: 6px 2px; background: none; border: 0; box-shadow: none; color: #f0d2b0; gap: 7px; }
  footer .hotline-trigger::after { content: ''; width: 6px; height: 6px; margin: 2px 0 0 1px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease-out; }
  footer .hotline-trigger[aria-expanded="true"] { color: #fff; }
  footer .hotline-trigger[aria-expanded="true"]::after { transform: rotate(135deg); margin-top: -4px; }
}
@media (max-width: 800px) and (hover: hover) and (pointer: fine) {
  footer .hotline-trigger:not([aria-expanded="true"]):hover { background: none; box-shadow: none; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
}
footer { background: #05472a; }
@media (hover: hover) and (pointer: fine) {
  .benefit:hover { transform: none; }
  .screen.in .benefit h2, .screen.in .benefit p { transition: opacity .5s ease-out, transform .25s ease-out; }
  .screen.in .benefit:hover h2, .screen.in .benefit:hover p { transform: scale(1.06); transition-delay: 0s; }
  .screen.in .benefit:hover .icon { transition-delay: 0s; }
}
@keyframes panel-pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes item-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.contact-panel { transform-origin: 85% 100%; animation: panel-pop .22s cubic-bezier(.2, .9, .3, 1.15) both; }
.contact-panel .contact-icons a { animation: item-rise .25s ease-out both; }
.contact-panel .contact-icons a:nth-child(2) { animation-delay: .04s; }
.contact-panel .contact-icons a:nth-child(3) { animation-delay: .08s; }
.contact-panel .contact-icons a:nth-child(4) { animation-delay: .12s; }
@media (max-width: 800px) {
  .hotlines.open { transform-origin: 15% 100%; animation: panel-pop .22s cubic-bezier(.2, .9, .3, 1.15) both; }
  .hotlines.open a { animation: item-rise .25s ease-out both; }
  .hotlines.open a:nth-of-type(2) { animation-delay: .05s; }
  .hotlines.open a:nth-of-type(3) { animation-delay: .1s; }
}
@media (prefers-reduced-motion: reduce) { .contact-panel, .contact-panel .contact-icons a, .hotlines.open, .hotlines.open a { animation: none; } }
.app-copy { display: none; }
@media (max-width: 800px) { .screen.app .app-inner > div > p.app-copy { display: block; margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: #7a8a80; } }
@media (max-width: 800px) {
  footer .hotline-trigger::after { margin: 0 0 0 1px; transform: translateY(2.4px) rotate(-45deg); }
  footer .hotline-trigger[aria-expanded="true"]::after { margin: 0 0 0 1px; transform: translateY(-1.8px) rotate(135deg); }
}
.copyright { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.legal { font-size: 11px; color: #a9c7b4; }
footer .legal a, .app-copy .legal a { color: inherit; text-decoration: none; }
footer .legal a:hover, .app-copy .legal a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 800px) {
  .app-copy .legal { display: block; margin-top: 2px; font-size: 12px; color: #7a8a80; }
  .app-copy .legal a { text-decoration: underline; text-underline-offset: 2px; }
  .app-copy .legal a:hover { color: #133b2b; }
}
@media (max-width: 800px) and (max-height: 600px) { .screen.app .app-visual { min-height: 40px; } .screen.app .app-inner > div > p.app-copy { margin-top: 6px; } .app-contact-block { margin-top: 8px; } }
@media (max-width: 800px) { .copyright { display: none; } }
.copyright { text-align: left; align-items: flex-start; }

/* Campaign popup (native <dialog>): desktop art 1920x1280 (3:2), phone art 750x1156. 170px leaves room for the × and the button. */
.promo { border: 0; padding: 0; background: none; max-width: none; max-height: none; overflow: visible; }
.promo::backdrop { background: rgb(0 0 0 / .72); }
.promo-box {
  display: flex; flex-direction: column; gap: 10px;
  width: min(960px, calc(100vw - 48px), (100vh - 170px) * 3 / 2);
  width: min(960px, calc(100vw - 48px), (100dvh - 170px) * 3 / 2);
  font-family: 'Kanit', Arial, Tahoma, sans-serif;
  animation: promo-in .22s ease-out;
}
.promo-x {
  align-self: flex-end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid rgb(255 255 255 / .7); border-radius: 50%; background: rgb(0 0 0 / .35); color: #fff;
  cursor: pointer; transition: background-color .2s;
}
.promo-x:hover { background: rgb(255 255 255 / .18); }
.promo-img { display: block; }
.promo-img img { display: block; width: 100%; height: auto; border-radius: 12px; }
.promo-more {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 26px;
  border-radius: 999px; background: #e3b58c; color: #05472a; font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background-color .2s;
}
.promo-more:hover { background: #f0cba8; }
.promo :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes promo-in { from { opacity: 0; transform: scale(.96); } }
@media (max-width: 800px) {
  .promo-box {
    width: min(460px, calc(100vw - 32px), (100vh - 170px) * 750 / 1156);
    width: min(460px, calc(100vw - 32px), (100dvh - 170px) * 750 / 1156);
  }
  .promo-more { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .promo-box { animation: none; } }