/* Plantify pixel layer: onboarding laid out 1:1 on the reference's 440 x 956 pt canvas.
   Values are measured from the reference recording (ref/hr). --sa / --sb stand in for the iOS status bar (55) and home bar (34). */
:root {
  --sa: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --mont: 'Montserrat', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --pg: #009855;
}
@media (min-width: 560px) {
  #stage { width: 440px; height: min(956px, calc(100dvh - 48px)); }
}

.px { display: block; font-family: var(--mont); color: #333; zoom: var(--z, 1); }
.px > * { position: absolute; }

/* Splash + wordmark */
.px-logo { left: 0; right: 0; height: 163px; display: flex; justify-content: center; padding-right: 2px; animation: logoIn 0.9s var(--ease) both; }
.px-logo svg { width: 163px; height: 163px; }
.px-tag { left: 0; right: 0; text-align: center; font: 500 21.8px/26px var(--mont); color: #10955B; letter-spacing: -0.01em; animation: rise 0.7s 0.2s var(--ease) both; }
.px-legal { left: 48px; right: 48px; margin: 0; text-align: center; font: 400 11.6px/20px var(--sf); color: #494949; }
.px-legal a { color: #494949; }
.px-btn { left: 28.7px; right: 28.7px; height: 68px; border: 0; border-radius: 34px; background: var(--pg); color: #fff; font: 500 19px var(--sf); cursor: pointer; }
.px-btn:active { filter: brightness(0.94); }
.px-login { left: 0; right: 0; text-align: center; font: 400 13px/20px var(--sf); color: #333; }
.px-login button { border: 0; background: none; padding: 0; font: 700 13px var(--sf); color: var(--pg); cursor: pointer; }
.px-word { left: 0; right: 0; text-align: center; font: 600 40px/48px var(--mont); color: #13A065; letter-spacing: -0.015em; animation: rise 0.8s 0.25s var(--ease) both; }

/* Hero badge */
.px-badge { left: 60px; width: 317px; height: 162.7px; display: flex; align-items: center; justify-content: space-between; animation: logoIn 0.8s var(--ease) both; }
.px-mark { height: 150px; width: 92px; }
.px-badge .laurel { flex: none; }
.px-hero-a { left: 0; right: 0; text-align: center; font: 700 30.6px/30px var(--mont); }
.px-hero-b { left: 0; right: 0; text-align: center; font: 400 23.3px/30px var(--mont); color: #B3CBBD; }
.px-hero-h { left: 0; right: 0; margin: 0; text-align: center; font: 500 42.4px/48.7px var(--mont); }
.px-hero-h span { display: block; font: 600 50.8px/61px var(--mont); color: #FE8E00; }
.px-hero-f { left: 0; right: 0; margin: 0; text-align: center; font: 400 14px/18px var(--mont); color: #DCE8E1; }

/* Feature slides */
.px-bar { left: 24px; width: 142.7px; height: 10px; border-radius: 5px; background: #D6EBD9; overflow: hidden; }
.px-bar i { display: block; height: 100%; border-radius: 5px; background: var(--pg); transition: width 0.5s var(--ease); }
.px.dk .px-bar { background: #fff; }
.px-t { left: 24px; right: 20px; margin: 0; font: 700 35.6px/43.9px var(--mont); color: #333; letter-spacing: 0; }
.px-t .hl { color: var(--pg); }
.px.dk .px-t { color: #fff; }
.px-s { left: 24px; right: 24px; margin: 0; font: 400 15.9px/19.7px var(--mont); color: #000; }
.px.dk .px-s { color: #E8E8E8; }
.px-art { left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 0; }
.px-bar, .px-t, .px-s { z-index: 2; }
.px-art img, .px-art video { width: 100%; height: 100%; object-fit: cover; }
/* Art melts into the page instead of starting on a hard edge under the copy. */
.px-art .mv { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%); mask-image: linear-gradient(to bottom, transparent, #000 13%); }
.px-seal { position: absolute; left: 304px; width: 88px; height: 88px; border-radius: 50%; border: 1.5px solid #fff; z-index: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }

/* Chart */
.px-chart { left: 0; right: 0; height: 373px; }
.px-chart .ln { position: absolute; left: 4.7px; right: 4px; height: 0; border-top: 1px dashed rgba(255,255,255,0.22); }
.px-chart .arc { position: absolute; left: 143px; top: 0; width: 160px; height: 160px; transform-origin: 0 100%; animation: fade 0.6s 0.5s both; }
.px-chart .bar { position: absolute; width: 115px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 28px; gap: 22px; transform-origin: bottom; animation: grow 0.9s var(--ease) both; }
.px-chart .them { background: #474747; color: #fff; padding-bottom: 6px; gap: 2px; }
.px-chart .them b { font: 700 18px var(--sf); }
.px-chart .us { background: #2EB67D; animation-delay: 0.25s; }
.px-chart .bi { width: 46px; height: 46px; border-radius: 11px; background: #fff; display: grid; place-items: center; color: #8a8a8a; font-size: 26px; }
.px-chart .them .bi { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; }
.px-chart .star { position: absolute; width: 92px; height: 92px; animation: popIn 0.6s 1s var(--ease) both; }
.px-chart .star > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.px-chart .star span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 17px; }
.px-chart .star span .ic { stroke-width: 3; }
.px-chart .star b { font: 700 21px var(--sf); margin-top: -2px; }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
.px-chart-l { left: 0; right: 0; height: 44px; }
.px-chart-l span { position: absolute; top: 0; width: 115px; text-align: center; font: 700 17px/22px var(--sf); color: #fff; }
.px-chart-l span.us { color: #2EB67D; }

/* Loved / features fan */
.px-laurels { left: 0; right: 0; height: 91.3px; }
.px-laurels .lr { position: absolute; top: 18px; width: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; font: 400 16px/18px var(--sf); }
.px-laurels .lr .ic { font-size: 30px; margin-bottom: 6px; }
.px-laurels .lr b { font: 700 16px/18px var(--sf); }
.px-laurels .lr-w { position: absolute; top: 0; display: flex; gap: 6px; }
.px-card { height: 172px; overflow: hidden; border-radius: 18px; padding: 16px 18px 14px; transform: rotate(var(--r)); box-shadow: 0 10px 30px rgba(0,0,0,0.35); font-family: var(--sf); }
.px-card .ci { font-size: 22px; color: inherit; opacity: 0.9; }
.px-card p { margin: 8px 0 10px; font: 400 13px/17px var(--sf); opacity: 0.92; }
.px-card hr { border: 0; border-top: 1px solid currentColor; opacity: 0.2; margin: 0 0 8px; }
.px-card b { font: 500 16px var(--sf); }
.px-card.fly { animation: flyIn 0.7s var(--ease) both; }
@keyframes flyIn { from { opacity: 0; transform: translateY(60px) rotate(calc(var(--r) * 2)); } to { opacity: 1; transform: rotate(var(--r)); } }

/* Paywall (reference f_50) */
.pwx { background: #000; color: #fff; font-family: var(--sf); }
.pwx-glow { position: absolute; border-radius: 50%; background: #151515; }
.pwx-glow.a { left: -40px; top: calc(var(--sa) + 75px); width: 210px; height: 130px; transform: rotate(14deg); }
.pwx-glow.b { left: 70px; top: calc(var(--sa) + 120px); width: 420px; height: 260px; transform: rotate(-12deg); background: #121212; }
.pwx-cancel { right: 18px; border: 0; background: none; padding: 0; font: 400 15.4px var(--sf); color: #8C8C8C; cursor: pointer; }
.pwx-rate { left: 30px; display: flex; flex-direction: column; }
.pwx-rate small { font: 500 13px/16px var(--sf); letter-spacing: 0.02em; color: #E6E6E6; }
.pwx-rate b { font: 600 25px/34px var(--sf); color: #fff; margin-top: 4px; }
.pwx-rate span { font: 500 13px/18px var(--sf); color: #FBAF2A; }
.pwx-leaf { left: 172px; width: 270px; height: 240px; }
.pwx-leaf svg { width: 100%; height: 100%; display: block; }
.pwx-card { left: 0; right: 0; bottom: 0; background: #191919; border-radius: 22px 22px 0 0; }
.pwx h2 { left: 0; right: 0; margin: 0; text-align: center; font: 700 19.4px/26px var(--sf); letter-spacing: -0.02em; }
.pwx-lead { left: 36px; right: 36px; margin: 0; text-align: center; font: 400 14px/18px var(--sf); color: #E6E6E6; }
.pwx-remind { left: 28px; right: 28.7px; height: 44.6px; border: 1px solid #3C3C3C; border-radius: 23px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 17px; font: 400 15px var(--sf); color: #E6E6E6; }
.pwx-sw { width: 51px; height: 31px; border: 0; border-radius: 16px; background: #E9E9EA; position: relative; cursor: pointer; transition: background 0.2s; }
.pwx-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.25); transition: left 0.2s var(--ease); }
.pwx-sw.on { background: #34C759; }
.pwx-sw.on::after { left: 22px; }
.pwx-plan { left: 28px; right: 28.7px; height: 50.3px; border: 1.3px solid #3C3C3C; border-radius: 26px; background: transparent; color: #fff; display: flex; align-items: center; padding: 0 18px 0 20px; cursor: pointer; text-align: left; font-family: var(--sf); }
.pwx-plan[data-plan="trial"] { height: 69.3px; border-radius: 35px; }
.pwx-plan.on { border: 1.6px solid #23A86A; background: #14211A; }
.pwx-plan .l { flex: 1; font: 400 13px var(--sf); color: #A6A6A6; }
.pwx-plan .r { display: flex; flex-direction: column; align-items: flex-end; margin-right: 15px; }
.pwx-plan .r b { font: 600 16.5px/20px var(--sf); color: #fff; }
.pwx-plan:not(.on) .r b { font-weight: 400; color: #A6A6A6; }
.pwx-plan .r small { font: 400 12.6px/18px var(--sf); color: #E6E6E6; }
.pwx-plan .rd { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #6A6A6A; display: grid; place-items: center; font-size: 13px; flex: none; }
.pwx-plan.on .rd { background: #23A86A; border-color: #23A86A; color: #fff; }
.pwx-plan.on .rd .ic { stroke-width: 3.2; }
.pwx-sum { left: 0; right: 0; text-align: center; font: 400 15px/22px var(--sf); color: #fff; }
.pwx-sum b { font: 700 17px var(--sf); }
.pwx-go { left: 20px; right: 20.7px; height: 57.7px; border: 0; border-radius: 29px; background: var(--pg); color: #fff; font: 700 21px var(--sf); cursor: pointer; }
.pwx-go:active { filter: brightness(0.94); }
.pwx-go[disabled] { opacity: 0.7; cursor: wait; }
.pwx-links { left: 0; right: 0; text-align: center; font: 400 11.6px/16px var(--sf); color: #888; }
.pwx-links a, .pwx-links button { color: #888; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Thank-you (reference 68.6 s - 79 s): toggle -> congratulations -> wipe -> words -> pills */
.px.ty2 { background: #F3F3F3; color: #fff; }
.ty2 .ty2-intro { position: absolute; inset: 0; display: block; color: #333; animation: fadeOut 0.3s 3.1s forwards; }
.ty2 .ty2-toggle { position: absolute; left: 60px; width: 136px; height: 80px; border-radius: 40px; background: #E2E2E2; animation: tgGrow 0.9s var(--ease) both, tgOn 0.3s 0.95s forwards, fadeOut 0.3s 2.2s forwards; }
.ty2 .ty2-toggle i { position: absolute; top: 6px; left: 6px; width: 68px; height: 68px; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.18); animation: tgKnob 0.3s 0.95s var(--ease) forwards; }
@keyframes tgGrow { 0%, 25% { transform: translate(92px, 130px) scale(1.6, 2.72); border-radius: 50%; } 60% { transform: translate(64px, 112px) scale(1.3); } to { transform: none; } }
@keyframes tgOn { to { background: #13B24F; } }
@keyframes tgKnob { to { left: 62px; } }
.ty2 .ty2-intro b { position: absolute; left: 60px; margin: 0; font: 700 29px/40px var(--mont); color: #0F9D58; animation: rise 0.5s 1.25s var(--ease) both; }
.ty2 .ty2-intro span { position: absolute; left: 60px; right: 20px; font: 400 19px/34px var(--sf); color: #333; animation: rise 0.5s 1.4s var(--ease) both; }
.ty2 .ty2-intro em { font: 700 38px/1 var(--mont); font-style: normal; color: #0F9D58; vertical-align: -3px; }
.ty2 .ty2-mark { position: absolute; left: 0; right: 0; text-align: center; font: 700 33px/40px var(--mont); color: #13A065; letter-spacing: -0.01em; }
.ty2 .ty2-wipe { background: #0B9A55; clip-path: circle(0% at 50% 50%); animation: wipe 0.6s 3.0s cubic-bezier(0.65,0,0.35,1) forwards; }
.ty2 .ty2-wipe::after { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.06) 0 3deg, transparent 3deg 15deg); }
.ty2 .ty2-words .w { position: relative; font: 800 64px/1 var(--mont); letter-spacing: -0.01em; }
.ty2 .ty2-words .w i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(3.2); font-style: normal; opacity: 0.07; white-space: nowrap; }
.ty2 .ty2-final { display: block; }
.ty2 .pill { position: absolute; border-radius: 999px; overflow: hidden; transform: rotate(var(--r)); opacity: 0; animation: pillIn 0.7s var(--ease) forwards; }
.ty2 .pill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes pillIn { from { opacity: 0; transform: rotate(var(--r)) scale(0.3); } to { opacity: 1; transform: rotate(var(--r)); } }
.ty2 .cf { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; transform: rotate(45deg); opacity: 0; animation: fade 0.4s forwards reverse; animation-direction: normal; animation-name: cfIn; animation-duration: 0.5s; animation-fill-mode: forwards; }
.ty2 .cf.t { border: 0; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid #fff; transform: rotate(18deg); }
@keyframes cfIn { to { opacity: 0.9; } }
.ty2 .ty2-h { position: absolute; left: 20px; right: 10px; margin: 0; font: 800 48.5px/52px var(--mont); letter-spacing: -0.01em; color: #fff; opacity: 0; animation: rise 0.6s var(--ease) both; }
.pwx-go { display: flex; align-items: center; justify-content: center; }
.pwx-go[disabled] { opacity: 1; }
.pwx-ring { position: absolute; right: 22px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; border-top-color: transparent; animation: rot 0.9s linear infinite; }

/* Welcome stories (reference 79 - 93 s) */
.stx { color: #fff; cursor: pointer; font-family: var(--sf); }
.stx-art { left: 0; right: 0; top: 0; height: 74%; overflow: hidden; }
.stx-art video, .stx-art img { width: 100%; height: 100%; object-fit: cover; }
.stx-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, var(--bg)); }
.stx-dots { left: 0; right: 0; height: 4px; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: -2px; }
.stx-dots i { width: 4px; height: 4px; border-radius: 2px; background: rgba(103,135,125,0.55); }
.stx-dots i.done { background: rgba(30,90,60,0.75); }
.stx-dots i.now { width: 28px; position: relative; overflow: hidden; }
.stx-dots i.now b { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: #0B5130; animation: bar 4.5s linear forwards; }
.stx-copy { left: 33px; right: 44px; display: flex; flex-direction: column; }
.stx-eb { font: 600 10.2px/14px var(--sf); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-bottom: 12px; }
.stx-copy h1 { margin: 0; font: 700 30.5px/40px var(--sf); letter-spacing: -0.035em; animation: rise 0.6s 0.15s var(--ease) both; }
.stx-copy p { margin: 16px 0 0; font: 400 13.6px/17px var(--sf); opacity: 0.62; animation: rise 0.6s 0.3s var(--ease) both; }

/* Prepared plant (reference 96 s) */
.prx { font-family: var(--sf); color: #1A1A1A; }
.prx-bg { left: 0; right: 0; top: 0; height: calc(var(--sa) + 285px); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; opacity: 0.38; }
.prx-bg img { width: 100%; height: 100%; object-fit: cover; }
.prx-bg::after { content: ""; position: absolute; inset: 35% 0 0 0; background: linear-gradient(rgba(255,255,255,0), #fff 92%); }
.prx-x { left: 18px; width: 30px; height: 30px; border: 0; background: none; padding: 0; color: #111; font-size: 26px; display: grid; place-items: center; cursor: pointer; }
.prx-card { left: 133px; width: 172px; height: 206px; border-radius: 22px; background: #fff; padding: 7px; transform: rotate(-14deg); box-shadow: 0 20px 50px rgba(0,0,0,0.18); }
.prx-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.prx-card.drop { animation: prxDrop 0.8s var(--ease) both; }
@keyframes prxDrop { from { opacity: 0; transform: translateY(-40px) rotate(4deg) scale(0.9); } to { opacity: 1; transform: rotate(-14deg); } }
.prx-h { left: 0; right: 0; margin: 0; text-align: center; font: 700 31px/40.5px var(--sf); letter-spacing: -0.02em; }
.prx-p { left: 0; right: 0; margin: 0; text-align: center; font: 400 17.2px/24px var(--sf); color: #8A8A8A; }
.prx-b { left: 70px; right: 70.7px; height: 56px; border-radius: 28px; font: 500 19.5px var(--sf); cursor: pointer; }
.prx-b.fill { border: 0; background: var(--pg); color: #fff; }
.prx-b.line { height: 57.3px; border: 1.5px solid var(--pg); background: #fff; color: var(--pg); }

/* Guided camera (reference 100 s) */
.camx .cam-view img.frame { animation: none; }
.camx-back { position: absolute; left: 14px; width: 34px; height: 34px; border: 0; background: none; color: #fff; font-size: 30px; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.camx-back .ic { stroke-width: 1.6; }
.camx .brackets { top: calc(var(--sa) + 323.5px); width: 228px; height: 227px; }
.camx .brackets i { width: 44px; height: 44px; border-width: 3px; border-color: rgba(255,255,255,0.62); }
.camx .cam-bar { height: calc(var(--sb) + 164px); padding: 52px 20px 0; background: #fff; border-radius: 0; box-shadow: none; }
.camx .cam-side { margin-left: 57px; color: #444; opacity: 1; }
.camx .cam-side .ic { font-size: 28px; stroke-width: 1.6; }
.camx .shutter { width: 74px; height: 74px; border: 5px solid #fff; outline: 2.5px solid #00A35C; outline-offset: 0; background: #00A35C; box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
.camx > .tooltip { position: absolute; left: 116px; width: 208px; height: 73px; bottom: auto; transform: none; display: grid; place-items: center; border-radius: 8px;
  background: rgba(228,228,228,0.94); color: #333; font: 600 16px var(--sf); box-shadow: 0 6px 20px rgba(0,0,0,0.08); z-index: 3; animation: fade 0.5s 0.4s both; }
.camx > .tooltip::after { border-top-color: rgba(228,228,228,0.94); }

/* Plant profile (reference 108 s) */
.pp { background: #F7F7F7; font-family: var(--sf); }
.pp .gallery { height: calc(var(--sa) + 320px); gap: 3px; background: #F7F7F7; }
.pp-top { top: calc(var(--sa) + 12px); left: 11px; right: 11px; }
.pp-top .icon-btn { width: 32px; height: 32px; font-size: 18px; background: rgba(0,0,0,0.32); color: #fff; box-shadow: none; }
.pp-title { background: transparent; padding: 15px 12px 4px; }
.pp-title h1 { font: 700 19.5px/26px var(--sf); letter-spacing: -0.01em; color: #111; }
.pp-title .latin { font: italic 400 14px/20px var(--sf); color: #111; margin-top: 3px; }
.pp-title .aka { font: 400 13.6px/17.6px var(--sf); color: #555; margin: 10px 0 0; }
.pp .tabs { background: #F7F7F7; margin: 12px 16px 0; border-bottom: 1px solid #DCDCDC; }
.pp .tabs button { height: 52px; font: 600 15.5px var(--sf); color: #8A8A8A; }
.pp .tabs button.on { color: #009855; }
.pp .tabs button.on::after { left: calc(50% - 8px); right: auto; width: 16px; bottom: -1px; height: 3px; background: #009855; }
.pp .bi-h { display: flex; justify-content: space-between; align-items: center; padding: 27px 16px 13px 17px; }
.pp .bi-h h3 { margin: 0; font: 700 19px var(--sf); color: #111; }
.pp .bi-h span { font-size: 11px; letter-spacing: 1px; color: #666; }
.pp .sec { margin: 12px 16px; border-radius: 10px; box-shadow: none; }
.pp .sec.bi { margin-top: 0; padding: 0 16px; }
.kv2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0 16px; border-top: 1px solid #E8E8E8; }
.kv2:first-child { border-top: 0; }
.kv2 span { display: flex; align-items: center; gap: 6px; font: 400 15px var(--sf); color: #666; }
.kv2 span .ic { font-size: 14px; color: #888; }
.kv2 b { display: block; margin-top: 7px; font: 400 15.5px/20px var(--sf); color: #111; }
.kv2 > .ic { font-size: 18px; color: #999; flex: none; }
.pp-foot { background: #fff; border-top: 0; padding: 18px 16px calc(var(--sb) + 10px); }
.pp-foot .btn { height: 47px; border-radius: 24px; font: 400 17.5px var(--sf); background: var(--pg); box-shadow: none; }

/* Review fixes 18.10 */
.pwx.busy { pointer-events: none; }
.pwx-card { top: auto; }
.pwx-plan .r small { white-space: nowrap; }
.ty2 .ty2-note { position: absolute; left: 60px; right: 28px; margin: 0; font: 400 14px/20px var(--sf); color: #555; animation: rise 0.5s 1.6s var(--ease) both; }
.ty2 .ty2-note a { color: #0F9D58; font-weight: 600; }
.camx > .tooltip { top: auto; bottom: calc(var(--sb) + 137px); }
.px-laurels .lr { width: 120px; }
.px-card .ci { display: flex; align-items: center; gap: 8px; }
.px-card .ci b { font: 600 15px var(--sf); }
.px-card p { margin: 10px 0 0; }
.px-chart .star b { font: 700 18px var(--sf); margin: 0; }
.ty2 .ty2-wipe, .ty2 .ty2-words, .ty2 .ty2-final { pointer-events: none; }

/* Investor demo bundle only (window.PLANTIFY_DEMO_COPY): reference badge, chart value, review stars */
.px-badge .px-one { width: 62px; height: 157px; margin: 3px 6px 0 0; }
.px-chart .them .pct { font: 700 18px var(--sf); margin-bottom: 30px; }
.px-chart .them:has(.pct) { padding-bottom: 28px; gap: 0; }
.px-chart .them:has(.pct) .bi { width: 46px; height: 46px; border-radius: 11px; font-size: 26px; }
.px-card.rv .stars { font-size: 20px; letter-spacing: 3px; color: #F7B500; }
.px-card.rv[style*="#0B4A24"] .stars, .px-card.rv[style*="#21B26B"] .stars { color: #7CF07A; }
.px-card.rv p { font-style: italic; }
.pwx-rate .st { color: #FBAF2A; font-size: 15px; letter-spacing: 1px; }

/* Searching (reference 104 s) */
.srx { font-family: var(--sf); }
.srx-photo { left: 72px; width: 296px; height: 422px; overflow: hidden; background: #000; }
.srx-photo img { width: 100%; height: 100%; object-fit: cover; }
.srx-sweep { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(rgba(30,220,140,0), rgba(30,220,140,0.55)); border-bottom: 2px solid rgba(160,255,210,0.9); transform: translateY(-100%); animation: srxSweep 1.6s cubic-bezier(0.45,0,0.55,1) infinite; }
@keyframes srxSweep { to { transform: translateY(218%); } }
.srx-ring { left: calc(50% - 57.5px); width: 115px; height: 115px; }
.srx-ring svg { width: 100%; height: 100%; }
.srx-ring .arc { stroke-dasharray: 345.6; stroke-dashoffset: 345.6; animation: srxArc 3.6s ease-out forwards; }
@keyframes srxArc { to { stroke-dashoffset: 30; } }
.srx-ring span { position: absolute; inset: 0; display: grid; place-items: center; }
.srx-ring span svg { width: 60px; height: 64px; }
.srx-t { left: 0; right: 0; margin: 0; text-align: center; font: 400 15.4px/22px var(--sf); color: #555; }

/* Collage (reference 7 s): three staggered columns, pull-back onto the logo tile */
.cg2 { left: 0; right: 0; height: 956px; transform-origin: 214.9px 482px; animation: cgPull 1.5s 0.1s var(--ease) both; }
.cg2-col { position: absolute; display: flex; flex-direction: column; gap: 2.3px; }
.cg2-tile { position: relative; height: 175px; overflow: hidden; background: #e9efe9; animation: fade 0.35s both; }
.cg2-tile img { width: 100%; height: 100%; object-fit: cover; }
.cg2-center { background: #014720; animation: none; }
.cg2-center .cg-logo { background: #014720; }
.cg2-center .cg-logo svg { width: 62px; height: 66px; }
.cg2-center .cg-logo svg { width: 76px; height: 80px; }
.pp .gallery { position: relative; }
.g-more { position: absolute; right: 0; bottom: 0; width: calc(33.333% - 2px); height: calc(50% - 1.5px); display: grid; place-items: center; background: rgba(0,0,0,0.28); color: #fff; font: 600 21px var(--sf); pointer-events: none; }
.aka-more { border: 0; background: none; padding: 0; font: inherit; color: #009855; cursor: pointer; }
.px-word .wm-i { position: relative; display: inline-block; }
.px-word .wm-i svg { position: absolute; left: 50%; top: -4px; width: 14px; height: 16px; transform: translateX(-30%) rotate(18deg); }

/* iOS-style alert (investor demo only) */
.ios-alert { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,0.25); animation: fade 0.2s both; }
.ios-alert > div { width: 270px; border-radius: 22px; background: rgba(235,235,235,0.96); backdrop-filter: blur(20px); padding: 18px 16px 12px; font-family: var(--sf); color: #111; animation: popIn 0.25s var(--ease) both; }
.ios-alert b { display: block; font: 600 16px var(--sf); }
.ios-alert span { display: block; font: 400 13px/17px var(--sf); color: #333; margin: 4px 0 14px; }
.ios-alert button { width: 100%; height: 44px; border: 0; border-radius: 22px; background: #0A7CFF; color: #fff; font: 600 16px var(--sf); cursor: pointer; }
.px-card.rv { padding: 14px 16px 12px; height: auto; max-height: 200px; }
.px-card.rv .stars { font-size: 19px; letter-spacing: 4px; line-height: 1; }
.px-card.rv p { margin: 10px 0 10px; font: italic 400 12.4px/16.4px var(--sf); }
.px-card.rv b { font: 500 16px var(--sf); }
.px-card.rv[style*="#0B4A24"] p, .px-card.rv[style*="#21B26B"] p, .px-card.rv[style*="#0B4A24"] b, .px-card.rv[style*="#21B26B"] b { color: #C9F8D6; }

/* StrikkeSteg-style paywall (.ss-pw) branded in Plantegeni green (#00A862) */
.ss-pw { background: #090909; color: #fff; overflow-y: auto; scrollbar-width: none; font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.ss-pw::-webkit-scrollbar { display: none; }
.ss-pw-hero { position: absolute; left: 0; top: 38px; width: 440px; height: 347px; object-fit: cover; pointer-events: none; }
.ss-pw-cancel { position: absolute; right: 20px; font-size: 16px; color: #A1A1A6; background: none; border: 0; cursor: pointer; z-index: 3; font-family: inherit; }
.ss-pw-c { position: absolute; left: 20px; right: 20px; padding-bottom: 24px; z-index: 2; }
.ss-pw-c h2 { text-align: center; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; line-height: 30px; margin: 0 0 10px; color: #fff; }
.ss-pw-ul { list-style: none; margin: 0 0 0 4px; padding: 0; }
.ss-pw-ul li { position: relative; padding-left: 20px; font-size: 14px; line-height: 27px; color: #DCDCDC; letter-spacing: -0.15px; }
.ss-pw-ul li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 5px; height: 10px; border: solid #00A862; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.ss-tiles { display: flex; gap: 10px; margin-top: 14px; height: 74px; }
.ss-tile { flex: 1; position: relative; border: 1.5px solid #2E2E30; border-radius: 14px; background: #121212; padding: 11px 12px; text-align: left; color: #fff; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.ss-tile[aria-checked="true"] { background: #0C2E1F; border-color: #00A862; }
.ss-tile b { display: block; font-size: 17px; font-weight: 700; }
.ss-tile small { display: block; font-size: 12.5px; color: #B5B5B5; margin-top: 2px; }
.ss-tile .r { position: absolute; right: 12px; top: 15px; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid #8E8E93; }
.ss-tile[aria-checked="true"] .r { background: #00A862; border-color: #00A862; }
.ss-tile[aria-checked="true"] .r::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ss-guar { display: flex; align-items: center; justify-content: space-between; height: 42px; margin-top: 12px; border: 1px solid #2E2E30; border-radius: 23px; padding: 0 6px 0 16px; font-size: 14px; color: #E5E5E5; background: #121212; }
.ss-sw { position: relative; width: 51px; height: 31px; border-radius: 16px; background: #3A3A3C; border: 0; padding: 0; cursor: pointer; transition: background .2s; flex: none; }
.ss-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s; }
.ss-sw[aria-checked="true"] { background: #00A862; }
.ss-sw[aria-checked="true"]::after { transform: translateX(20px); }
.ss-price { text-align: center; font-size: 14.5px; color: #E5E5E5; margin: 14px 0 10px; }
.ss-price strong { color: #fff; font-weight: 700; }
.ss-cta { display: flex; width: 100%; height: 54px; border-radius: 27px; background: #00A862; color: #fff; font-size: 19px; font-weight: 700; border: 0; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; box-shadow: 0 6px 20px rgba(0, 168, 98, 0.32); }
.ss-links { text-align: center; font-size: 12px; color: #8A8A8E; margin-top: 14px; }
.ss-links a, .ss-links button { color: inherit; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0 2px; }