:root {
  color-scheme: light;
  --ossia-green: #07543b;
  --ossia-green-deep: #03452f;
  --ossia-green-dark: #063f30;
  --ossia-green-mid: #147b57;
  --ossia-green-soft: #1d805b;
  --ossia-mint: #cce9db;
  --ossia-pale: #eff7f2;
  --ossia-yellow: #f4b52c;
  --ossia-white: #f8fffb;
  --ossia-muted: #b5d3c5;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-heading: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--ossia-white);
  background: radial-gradient(circle at 50% 15%, #fafffc, #e9f3ed 68%, #dcebe3);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
button:focus-visible, .slides:focus-visible { outline: 3px solid var(--ossia-yellow); outline-offset: 4px; }

.landing-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.phone-shell {
  width: min(100%, 430px);
  height: min(860px, calc(100svh - 48px));
  min-height: 650px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr) auto;
  border-radius: 36px;
  background: linear-gradient(155deg, #07583f 0%, #064b36 56%, #03432f 100%);
  box-shadow: 0 26px 70px rgba(4, 60, 42, .22), 0 3px 10px rgba(4, 60, 42, .08);
}
.phone-shell::before,
.phone-shell::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(153, 216, 186, .12);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.phone-shell::before { width: 390px; height: 390px; right: -205px; top: 110px; box-shadow: 0 0 0 30px rgba(160, 222, 191, .018), 0 0 0 68px rgba(160, 222, 191, .015); }
.phone-shell::after { width: 220px; height: 220px; left: -150px; bottom: -90px; background: rgba(131, 205, 166, .035); }
.decor { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.decor-one { width: 250px; height: 250px; top: 45px; right: -150px; background: rgba(35, 128, 91, .08); }
.decor-two { width: 190px; height: 190px; bottom: 8%; left: -142px; background: rgba(57, 160, 113, .055); }

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 24px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #f8fffb;
  z-index: 2;
}
.status-icons { display: flex; align-items: center; gap: 3px; height: 13px; }
.status-icons i { width: 3px; display: block; background: currentColor; border-radius: 2px; }
.status-icons i:nth-child(1) { height: 5px; }
.status-icons i:nth-child(2) { height: 8px; }
.status-icons i:nth-child(3) { height: 11px; }
.status-icons b { width: 17px; height: 9px; border: 1.3px solid currentColor; border-radius: 3px; margin-left: 4px; position: relative; }
.status-icons b::after { content: ""; position: absolute; width: 2px; height: 4px; background: currentColor; right: -4px; top: 1.2px; border-radius: 0 2px 2px 0; }

.slides {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  z-index: 1;
}
.slides::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  min-height: 0;
  height: 100%;
  padding: 20px 27px 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  scrollbar-width: none;
}
.slide::-webkit-scrollbar { display: none; }
.brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px auto 25px; flex: 0 0 auto; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  position: relative; color: var(--ossia-green); background: var(--ossia-white);
  font-family: var(--font-heading); font-size: 27px; font-weight: 800; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}
.brand-spark { position: absolute; top: -3px; right: -3px; height: 11px; width: 11px; background: var(--ossia-yellow); border: 2px solid var(--ossia-green); border-radius: 50%; }
.brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 25px; letter-spacing: -.04em; }
.eyebrow { color: #9ccbb4; font: 700 9px/1.4 var(--font-body); letter-spacing: .2em; text-align: center; margin: 0 0 14px; }
.slide h1, .slide h2 { font: 700 clamp(27px, 7vw, 32px)/1.17 var(--font-heading); letter-spacing: -.045em; text-align: center; margin: 0; color: var(--ossia-white); }
.slide h1 span, .slide h2 span { color: var(--ossia-yellow); }
.slide-copy { color: #d6e9df; font-size: 13px; line-height: 1.6; text-align: center; margin: 15px 0 0; }

/* Slide 1 */
.hand-illustration { flex: 1 1 auto; min-height: 160px; max-height: 270px; margin: 8px 0 3px; position: relative; display: flex; justify-content: center; align-items: center; }
.hand-glow { position: absolute; width: 205px; height: 205px; border-radius: 50%; background: radial-gradient(circle, rgba(74, 161, 116, .24), rgba(33, 126, 86, .06) 67%, transparent 68%); }
.hand-illustration svg { width: min(100%, 240px); height: 100%; max-height: 260px; position: relative; overflow: visible; }
.bone-lines { color: #b6e0c9; stroke-width: 2.6; opacity: .9; }
.medical-note { margin: 0; color: #a6cbb8; font-size: 10px; font-weight: 500; line-height: 1.5; text-align: center; }
.medical-note span { display: block; width: 26px; height: 2px; border-radius: 4px; background: #8ac7a7; margin: 0 auto 10px; }

/* Slide 2 */
.slide-features .brand { margin-bottom: 24px; }
.slide-features .slide-copy { margin-bottom: 20px; }
.feature-list { display: grid; gap: 11px; margin-top: 2px; }
.feature-card { display: flex; align-items: center; gap: 13px; padding: 13px; min-height: 77px; border: 1px solid rgba(183, 229, 204, .13); border-radius: 16px; background: linear-gradient(110deg, rgba(168, 224, 192, .10), rgba(168, 224, 192, .055)); }
.feature-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; color: #f6fffa; background: rgba(31, 139, 96, .72); box-shadow: inset 0 1px rgba(255,255,255,.09); }
.feature-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature-card strong { display: block; font-size: 12px; line-height: 1.4; font-weight: 700; color: #f5fff9; }
.feature-card small { display: block; margin-top: 4px; color: #b9d8c7; font-size: 10px; line-height: 1.45; }

/* Slide 3 */
.slide-security .slide-copy { margin-bottom: 7px; }
.security-art { flex: 1 1 auto; min-height: 150px; max-height: 250px; display: grid; place-items: center; position: relative; margin: 0 0 2px; }
.security-halo { width: 200px; height: 180px; border-radius: 48%; background: radial-gradient(ellipse, rgba(75, 162, 116, .21), rgba(55, 142, 99, .05) 68%, transparent 70%); position: absolute; }
.security-art svg { position: relative; z-index: 1; width: min(100%, 220px); height: 100%; max-height: 225px; }
.shield-shadow { fill: rgba(16, 120, 79, .3); stroke: rgba(157, 220, 184, .3); stroke-width: 4; }
.shield-line, .lock-line { fill: none; stroke: #e1f7eb; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.security-list { list-style: none; padding: 0; margin: 0 0 7px; display: grid; gap: 10px; }
.security-list li { display: flex; align-items: flex-start; gap: 9px; color: #d7eae0; font-size: 11px; line-height: 1.45; }
.security-list li span { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 19px; border-radius: 50%; background: #1b805b; color: white; font-size: 12px; font-weight: 800; }

.slide-controls { padding: 10px 23px calc(18px + env(safe-area-inset-bottom)); position: relative; z-index: 2; background: linear-gradient(180deg, rgba(5, 75, 53, 0), rgba(4, 69, 49, .28)); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.dot { width: 9px; height: 9px; border: 0; padding: 0; border-radius: 50%; background: rgba(194, 227, 208, .30); cursor: pointer; transition: width .2s ease, background .2s ease, transform .2s ease; }
.dot.is-active { background: #f5fff9; transform: scale(1.08); }
.dot:hover { background: #c6ead7; }
.start-button { width: 100%; min-height: 49px; display: flex; justify-content: center; align-items: center; gap: 12px; border: 0; border-radius: 999px; background: #f7fff9; color: #087650; font-family: var(--font-heading); font-size: 13px; font-weight: 800; box-shadow: 0 7px 18px rgba(0,0,0,.08); cursor: pointer; transition: transform .18s ease, background .18s ease; }
.start-button:hover { background: #e6f7ec; transform: translateY(-1px); }
.start-button:active { transform: translateY(0); }
.start-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-note { margin: 13px 0 0; text-align: center; color: #9bc4b0; font-size: 8px; line-height: 1.4; letter-spacing: .01em; }

@media (max-height: 760px) and (min-width: 481px) {
  .phone-shell { min-height: 600px; }
  .slide { padding-top: 12px; }
  .brand { margin-bottom: 16px; }
  .hand-illustration { max-height: 190px; min-height: 120px; }
  .security-art { max-height: 165px; min-height: 110px; }
  .feature-card { min-height: 66px; padding: 10px 12px; }
  .feature-list { gap: 8px; }
  .slide-controls { padding-bottom: 11px; }
}
@media (max-width: 480px) {
  body { background: var(--ossia-green-deep); }
  .landing-page { padding: 0; min-height: 100svh; }
  .phone-shell { width: 100%; height: 100svh; min-height: 560px; max-height: none; border-radius: 0; box-shadow: none; }
  .status-bar { padding: max(14px, env(safe-area-inset-top)) 25px 0; }
  .slide { padding: 17px 27px 9px; }
  .brand { margin-bottom: 21px; }
  .slide h1, .slide h2 { font-size: clamp(27px, 7.4vw, 32px); }
  .slide-copy { font-size: 12.5px; margin-top: 13px; }
  .hand-illustration { min-height: 150px; max-height: 240px; margin-top: 3px; }
  .slide-controls { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .slide { padding-left: 21px; padding-right: 21px; }
  .brand { margin-bottom: 17px; }
  .brand-mark { width: 36px; height: 36px; font-size: 24px; }
  .brand-name { font-size: 23px; }
  .slide-copy { font-size: 12px; }
  .feature-card { gap: 10px; padding: 10px; min-height: 70px; }
  .feature-icon { width: 39px; height: 39px; flex-basis: 39px; }
  .feature-card strong { font-size: 11px; }
  .feature-card small { font-size: 9.5px; }
  .security-list li { font-size: 10.5px; }
  .pagination { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}