/* Shared brand surfaces and a dedicated readable text accent; the flagship palette below is the explicitly retained exception. */
:root{
 --accent-text:#058f9b;--brand:#01bccd;--brand-rgb:1,188,205;--white:#ffffff;--sample-ink:#171717;--sample-muted:#525252;--sample-line:#e5e5e5;--ink:#171717;--muted:#525252;--page:#fafafa;--surface:#ffffff;--surface-2:#f5f5f5;--line:#e5e5e5;--soft:rgba(var(--brand-rgb),.055);--glow:rgba(var(--brand-rgb),.2);--on-primary:var(--white);
 --flag-base:var(--page);--flag-glow:transparent;--flag-surface:var(--surface);--flag-border:var(--line);--flag-text:var(--ink);--flag-muted:var(--muted);--flag-accent:var(--accent-text);
 --font:'Shabnam',Tahoma,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);--shadow:0 12px 35px rgba(0,0,0,.055);--primary:var(--brand);--primary-ink:var(--ink);--text:var(--ink);--text-muted:var(--muted);--border:var(--line);--primary-soft:var(--soft);--surface-3:var(--line);
}
html[data-theme=dark]{--ink:#f5f5f5;--muted:#bdbdbd;--page:#101010;--surface:#171717;--surface-2:#202020;--line:#383838;--shadow:0 12px 35px rgba(0,0,0,.12)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--page);color:var(--ink);font:15.5px/1.9 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
a,button,input,summary{touch-action:manipulation}
button,summary{cursor:pointer}
a{color:inherit;text-decoration:none}
button{color:inherit}
p,h1,h2,h3,h4,figure,blockquote{margin:0}
h1,h2,h3,h4{line-height:1.5;letter-spacing:-.025em}
h1{font-size:clamp(28px,3.2vw,42px)}
h2{font-size:clamp(24px,2.6vw,32px)}
h3{font-size:20px}
p{color:var(--muted)}
small{font-size:14px}
ul{padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--brand);outline-offset:5px}
::selection{background:var(--brand);color:var(--white)}
.container{width:min(1120px,calc(100% - 48px));margin-inline:auto;position:relative;z-index:1}
.narrow-container{max-width:960px}
.section{padding:72px 0}
.section-heading{max-width:700px;margin:0 auto 34px;text-align:center}
.section-heading>p:last-child:not(.eyebrow){margin-top:12px}
.eyebrow{font-size:14px;color:var(--ink);font-weight:700;margin-bottom:12px}
.icon{width:23px;height:23px;flex-shrink:0;vertical-align:middle}
.pet-art{width:60px;height:60px;object-fit:contain;display:block}
.sample-label{font-size:14px;color:var(--muted)}
.skip-link{position:fixed;top:-100px;right:12px;padding:10px 18px;background:var(--surface);z-index:100}
.skip-link:focus{top:10px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Every button uses the exact accent and white text; hierarchy comes from size and elevation. */
button,.btn{background:var(--brand);color:var(--white);font-size:16px;font-weight:700;text-shadow:none;min-height:48px;border:0;border-radius:12px;padding:12px 20px;line-height:1.5;transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn>.icon{width:21px;height:21px}
.btn-primary{box-shadow:0 8px 24px var(--glow)}
.btn-secondary{padding-inline:17px;box-shadow:0 3px 8px rgba(0,0,0,.04)}
button:hover,.btn:hover{filter:brightness(1.04);box-shadow:0 10px 26px var(--glow)}
button:active,.btn:active{filter:brightness(.97)}
button:disabled{cursor:not-allowed;opacity:.55}
.magnetic{transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.tilt-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.header{position:relative;z-index:30;margin:12px auto -2px;width:min(960px,calc(100% - 32px))}
.nav-shell{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:5px 8px 5px 16px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.brand{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:24px;font-weight:700;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--brand);color:var(--white);flex-shrink:0}
.brand-mark>.icon{width:26px;height:26px}
.desktop-nav{display:flex;gap:22px;align-items:center;font-size:14px}
.desktop-nav a{display:flex;align-items:center;min-height:44px}
.desktop-nav a:hover{text-decoration:underline;text-decoration-color:var(--accent-text);text-underline-offset:7px}
.nav-actions{display:flex;gap:8px}
.nav-actions .btn{padding:11px 15px}
.mobile-nav{display:none}
.mobile-nav summary{list-style:none;display:grid;place-items:center;width:44px;height:48px}
.mobile-nav nav{position:absolute;right:0;left:0;top:66px;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.mobile-nav nav>a{display:block;padding:10px;min-height:44px}
.pointer-glow{position:fixed;left:-220px;top:-220px;width:440px;height:440px;background:radial-gradient(circle,rgba(var(--brand-rgb),.055),transparent 68%);z-index:0;pointer-events:none;opacity:0}
.pointer-glow.visible{opacity:1}
main{position:relative}
.care-thread{position:absolute;top:100px;bottom:80px;right:max(8px,calc((100vw - 1200px)/2));width:24px;pointer-events:none;z-index:0;opacity:.4}
.care-thread>svg{position:absolute;inset:0;width:24px;height:100%;fill:none;stroke:var(--brand);stroke-width:1;opacity:.35}
.thread-progress{position:absolute;top:0;bottom:0;right:11px;width:1px;background:var(--brand);transform:scaleY(var(--scroll-progress,0));transform-origin:top}
.thread-stop{position:absolute;right:0;width:24px;height:24px;display:grid;place-items:center;background:transparent;color:var(--accent-text)}
.thread-stop>.icon{width:17px;height:17px}
.stop-one{top:20%}
.stop-two{top:48%}
.stop-three{top:77%}
.hero{background:radial-gradient(ellipse at 76% 12%,rgba(var(--brand-rgb),.065),transparent 52%),radial-gradient(ellipse at 18% 50%,rgba(var(--brand-rgb),.04),transparent 48%);padding:42px 0 52px;overflow:clip}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}
.hero-copy{min-width:0}
.hero h1 span{color:var(--accent-text)}
.hero-lead{font-size:15.5px;line-height:2.05;max-width:520px;margin:20px 0 24px}
.hero-pills{display:flex;gap:10px 17px;align-items:center;flex-wrap:wrap;margin-top:22px;font-size:14px}
.hero-pills>span{display:flex;align-items:center;gap:6px}
.hero-pills .icon{width:19px;height:19px;color:var(--accent-text)}
.audience-note{font-size:14px;margin-top:16px}
.hero-preview{max-width:440px;width:100%;justify-self:end;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 16px 45px var(--soft),var(--shadow);padding:18px;position:relative;isolation:isolate}
.hero-preview:before{content:'';position:absolute;inset:-9px;border:1px solid rgba(var(--brand-rgb),.13);border-radius:25px;z-index:-1;transform:rotate(-2deg)}
.preview-header{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.preview-header>span{display:flex;gap:6px;align-items:center;font-weight:700}
.preview-header .icon{color:var(--accent-text);width:21px;height:21px}
.preview-header small{font-size:14px;color:var(--muted)}
.sms-section{padding:25px 0 40px}
.sms-demo-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:center;padding:22px 30px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);min-height:325px}
.sms-content .eyebrow{margin-bottom:6px}
.sms-content h2{font-size:26px}
.sms-content>p:not(.eyebrow){font-size:14px;margin:8px 0 16px;line-height:1.9}
.demo-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.lead-demo-form label{font-size:14px;display:block;margin-bottom:5px}
.form-control{width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:10px 12px;font-size:16px}
.form-control::placeholder{color:var(--muted)}
.form-control:focus{border-color:var(--accent-text)}
.honeypot{position:absolute!important;clip-path:inset(50%);height:1px;width:1px;overflow:hidden}
.demo-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.demo-actions>.btn{font-size:16px}
.demo-actions>p{font-size:14px;min-height:20px;flex:1}
.is-error,.is-success{color:var(--ink)}
/* Feature section follows the same surfaces and text tokens as the page. */
.flagship-section{background:var(--page);color:var(--flag-text)}
.flagship-section .eyebrow{color:var(--accent-text)}
.flagship-section p{color:var(--flag-muted)}
.flagship-section .section-heading{max-width:760px}
.flagship-experience{display:grid;grid-template-columns:320px minmax(0,1fr);gap:44px;align-items:center}
.hub-panels{min-width:0}
.hub-panel{border:1px solid var(--flag-border);border-radius:20px;padding:28px;background:var(--flag-surface);min-height:320px}
.flagship-section.is-running .hub-panel:not([hidden]){animation:panel-in .45s var(--ease)}
.hub-panel h3{font-size:23px;color:var(--flag-text)}
.hub-panel>p{font-size:15px;line-height:2;margin-top:12px}
.feature-specs{display:flex;gap:14px;margin:18px 0 0;padding-top:17px;border-top:1px solid var(--line)}
.feature-specs>li{display:flex;gap:7px;flex:1;font-size:14px;min-width:0}
.feature-specs>li>.icon{color:var(--accent-text);width:17px;height:17px;margin-top:4px}
.feature-specs strong,.feature-specs small{display:block;font-size:14px;line-height:1.85}
.feature-specs small{color:var(--muted);font-weight:400;margin-top:3px}
.flagship-section .feature-specs{border-color:var(--flag-border)}
.flagship-section .feature-specs small{color:var(--flag-muted)}
.pet-timeline{display:flex;align-items:center;gap:22px;margin-top:20px}
.timeline-pet{display:flex;flex-direction:column;gap:8px;align-items:center;font-size:14px;flex-shrink:0}
.timeline-pet .pet-art{width:68px;height:68px}
.pet-timeline>div{display:flex;flex:1;gap:12px;position:relative}
.pet-timeline>div:before{content:'';position:absolute;right:15px;left:15px;top:17px;border-top:1px dashed var(--flag-border)}
.pet-timeline>div>span{flex:1;font-size:14px;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.pet-timeline>div .icon{width:32px;height:32px;padding:6px;border:1px solid var(--flag-border);background:var(--flag-base);color:var(--accent-text);border-radius:50%;animation:timeline-pulse 3s ease-in-out infinite}
.pet-timeline>div>span:nth-child(2) .icon{animation-delay:.6s}
.pet-timeline>div>span:nth-child(3) .icon{animation-delay:1.2s}
.pet-timeline strong,.pet-timeline small{font-size:14px}
.pet-timeline small{color:var(--flag-muted)}
.loyalty-board{display:flex;gap:25px;align-items:center;margin-top:20px}
.brand-security{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:22px}
.brand-preview{width:225px;border-radius:13px;background:var(--white);color:var(--sample-ink);padding:16px;transform:rotate(-3deg)}
.brand-preview strong{font-size:14px;display:block;margin-top:10px}
.brand-preview>span:last-child{font-size:14px;display:block;margin-top:14px;color:var(--sample-muted)}
.brand-preview>i{display:block;height:4px;background:var(--sample-line);border-radius:3px;width:85%;margin-top:9px}
.brand-preview>i+i{width:60%}
.security-lock{max-width:160px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.security-lock>.icon{width:42px;height:42px;color:var(--accent-text);animation:lock-pulse 3s ease-in-out infinite}
.security-lock strong,.security-lock small{font-size:14px}
.security-lock small{color:var(--flag-muted)}
.flagship-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px}
.flagship-footer>span{display:flex;align-items:center;gap:8px;color:var(--flag-muted);font-size:14px}
.flagship-footer .icon{color:var(--accent-text)}
.flagship-footer .btn>.icon{color:var(--white)}
.feature-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.feature-card{grid-column:span 3;min-width:0;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;flex-direction:column}
.feature-card:hover{box-shadow:0 14px 35px var(--soft)}
.feature-card-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.icon-tile{width:44px;height:44px;display:grid;place-items:center;color:var(--accent-text);border-radius:13px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.15);flex-shrink:0}
.icon-tile>.icon{width:25px;height:25px}
.feature-card h3{font-size:20px;line-height:1.6}
.feature-card>p{font-size:15px;line-height:2}
.feature-visual{position:relative;min-height:170px;margin:18px 0 0;padding:35px 18px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.feature-visual>.sample-label{position:absolute;top:9px;right:14px}
.feature-card .feature-specs{flex:1}
.feature-card .feature-specs>li{align-self:flex-start}
.sales-visual{display:flex;gap:25px;align-items:center;width:100%;max-width:360px}
.sales-visual>div{display:flex;flex-direction:column;gap:8px;font-size:14px}
.sales-visual>div>span{color:var(--muted)}
.mini-radar{position:relative;display:grid;place-items:center;width:110px;height:110px;border-radius:50%;border:1px solid rgba(var(--brand-rgb),.4);background:repeating-radial-gradient(circle,transparent 0 19px,rgba(var(--brand-rgb),.17) 20px 21px,transparent 22px 40px);overflow:hidden;flex-shrink:0}
.mini-radar>i{position:absolute;inset:0;background:conic-gradient(transparent 0deg 270deg,rgba(var(--brand-rgb),.3));animation:orbit-spin 7s linear infinite}
.mini-radar>.icon{position:relative;color:var(--accent-text)}
.health-card{display:flex;align-items:center;gap:12px;padding:18px 15px;max-width:390px;width:100%;background:var(--surface);border:1px solid rgba(var(--brand-rgb),.2);border-radius:12px;box-shadow:var(--shadow)}
.health-card .pet-art{width:52px;height:52px}
.health-card>div{display:flex;flex-direction:column;gap:6px;flex:1}
.health-card strong,.health-card span,.health-card small{font-size:14px}
.health-card span,.health-card small{color:var(--muted)}
.scan-frame{width:35px;height:40px;border:1px solid var(--brand);border-radius:6px;position:relative;display:grid;place-items:center;color:var(--accent-text)!important;overflow:hidden;flex-shrink:0}
.scan-frame>i{position:absolute;left:0;right:0;top:0;height:2px;background:var(--brand);animation:scan-pulse 2.8s ease-in-out infinite}
.calendar-preview{max-width:360px;width:100%;font-size:14px}
.calendar-days{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;color:var(--muted);margin-bottom:10px}
.calendar-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.calendar-slots>*{height:35px;border-radius:6px}
.calendar-slots>span{padding:4px 7px;background:rgba(var(--brand-rgb),.1);border-right:2px solid var(--brand);font-size:14px}
.calendar-slots>i{border:1px dashed var(--line)}
.doctor-preview{display:flex;align-items:center;gap:18px;width:100%;max-width:360px}
.doctor-preview>.pet-art{width:55px;height:55px}
.doctor-preview>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);flex:1;min-width:0}
.doctor-preview strong,.doctor-preview span{font-size:14px;display:block}
.doctor-preview span{color:var(--muted);margin-top:10px}
.doctor-preview i{height:4px;width:90%;display:block;border-radius:5px;background:var(--line);margin-top:10px}
.doctor-preview i+i{width:65%}
.record-network{display:flex;align-items:center;justify-content:center;width:100%;max-width:390px;gap:10px}
.record-network>span{display:flex;align-items:center;gap:5px;flex-direction:column;font-size:14px;text-align:center}
.record-network .icon{color:var(--accent-text);width:23px;height:23px}
.record-network>.pet-art{width:48px;height:48px}
.record-network>i{height:2px;background:var(--brand);position:relative;min-width:12px;flex:1;opacity:.3}
.record-network>i:after{content:'';position:absolute;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--brand);animation:record-travel 2s ease-in-out infinite}
.record-network>i:nth-of-type(2):after{animation-delay:1s}
.network-note{font-size:14px!important;text-align:center;margin-top:15px}
.network-note>.icon{width:16px;height:16px;color:var(--accent-text)}
.feedback-preview{width:100%;max-width:350px;padding:18px 20px 15px;background:var(--surface);border:1px solid var(--line);border-radius:17px;box-shadow:0 7px 20px rgba(0,0,0,.035);font-size:14px;text-align:center}
.feedback-card-heading{display:flex;align-items:center;gap:9px;text-align:right;margin-bottom:17px}
.feedback-avatar{display:grid;place-items:center;width:35px;height:35px;background:var(--soft);color:var(--accent-text);border:1px solid rgba(var(--brand-rgb),.18);border-radius:12px;flex-shrink:0}
.feedback-avatar>.icon{width:22px;height:22px}
.feedback-card-heading>div{display:flex;flex-direction:column;gap:2px;flex:1}
.feedback-card-heading strong{font-size:14px}
.feedback-card-heading>div>span{font-size:12px;color:var(--muted)}
.feedback-note{font-size:12px;color:var(--muted)}
.feedback-question{font-size:17px;display:block;line-height:1.7}
.feedback-invitation{font-size:13px;line-height:1.8;margin-top:4px}
.rating-stars{display:flex;justify-content:center;align-items:center;gap:9px;direction:rtl;margin:17px auto 16px;padding:12px 8px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px}
.rating-star{width:34px;height:34px;display:grid;place-items:center;position:relative;flex-shrink:0}
.rating-star .icon{width:31px;height:31px;stroke-width:1.35}
.star-outline{display:grid;place-items:center;color:var(--line)}
.star-outline .icon{fill:var(--surface)}
.star-lit{position:absolute;inset:0;display:grid;place-items:center;color:var(--brand);transform-origin:50% 65%;animation:rating-light 5.8s var(--ease) infinite;animation-delay:calc(var(--star-order)*.2s)}
.star-lit .icon{fill:var(--brand);filter:drop-shadow(0 2px 3px rgba(var(--brand-rgb),.15))}
.star-lit:after{content:'';position:absolute;inset:1px;border:1px solid rgba(var(--brand-rgb),.3);border-radius:50%;animation:rating-ripple 5.8s ease-out infinite;animation-delay:calc(var(--star-order)*.2s)}
.feedback-receipt{display:flex;justify-content:center;align-items:center;gap:7px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.feedback-check{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--soft);color:var(--accent-text);flex-shrink:0;animation:feedback-confirm 5.8s var(--ease) infinite}
.feedback-check>.icon{width:14px;height:14px}
@keyframes rating-light{0%,8%{opacity:0;transform:translateY(4px) scale(.65) rotate(-9deg)}18%{opacity:1;transform:translateY(-2px) scale(1.12) rotate(3deg)}26%,74%{opacity:1;transform:translateY(0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translateY(0) scale(.92) rotate(0)}}
@keyframes rating-ripple{0%,12%{opacity:0;transform:scale(.55)}18%{opacity:.8}35%,100%{opacity:0;transform:scale(1.45)}}
@keyframes feedback-confirm{0%,32%{opacity:.4;transform:scale(.85)}42%,75%{opacity:1;transform:scale(1)}90%,100%{opacity:.4;transform:scale(.85)}}
@media(max-width:420px){.feedback-preview{padding:16px 13px 13px}.rating-stars{gap:6px;padding-inline:5px}.rating-star{width:30px;height:30px}.rating-star .icon{width:28px;height:28px}.feedback-question{font-size:16px}}
@media(prefers-reduced-motion:reduce){.star-lit,.feedback-check{opacity:1;transform:none}.star-lit:after{display:none}}
.mini-feature{grid-column:span 3;display:block;padding:23px 25px}
.mini-feature>.icon-tile{float:right;margin-left:12px}
.mini-feature h3{font-size:19px;margin:8px 0 14px}
.mini-feature>p{clear:both}
.mini-feature .feature-specs{margin-top:15px;padding-top:14px}
.calculator-section{background:var(--page)}
input[type=range]{--fill:20%;appearance:none;width:100%;height:48px;background:transparent;cursor:pointer;margin:0}
.assumption{font-size:14px;line-height:1.9;color:var(--muted)}
.pricing-section{background:var(--page)}
.pricing-status{font-size:14px;text-align:center;margin-top:20px;min-height:24px}
.pricing-links{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;font-size:14px;margin-top:12px}
.pricing-links>span{color:var(--muted);display:flex;align-items:center;gap:7px}
.pricing-links .icon{width:20px;height:20px;color:var(--accent-text)}
.pricing-links .btn .icon{color:var(--white)}
.plan-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;padding:24px;border:1px solid var(--line);border-radius:17px;margin-top:20px;background:var(--surface)}
.plan-details h3{font-size:18px}
.plan-details li{font-size:14px;line-height:1.9;margin-top:9px}
.start-steps{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;gap:20px;padding:18px 0 0;margin:28px 0 0;border-top:1px solid var(--line);counter-reset:steps}
.start-steps>li{display:flex;gap:9px;align-items:center;font-size:14px;counter-increment:steps}
.start-steps>li:before{content:counter(steps,persian);display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(var(--brand-rgb),.3);border-radius:50%;background:var(--soft);flex-shrink:0;color:var(--ink)}
.toast-box{position:fixed;bottom:20px;right:20px;z-index:100;max-width:calc(100% - 40px)}
.toast-item{padding:13px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-top:8px;font-size:14px}

@keyframes pulse-wave{50%{transform:scaleY(.55)}

}

@keyframes orbit-spin{to{transform:rotate(360deg)}

}

@keyframes timeline-pulse{50%{transform:translateY(-3px);opacity:.65}

}

@keyframes lock-pulse{50%{transform:scale(1.08)}

}

@keyframes panel-in{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}

}

@keyframes message-in{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}

}

@keyframes scan-pulse{0%,100%{transform:translateY(0);opacity:.2}
50%{transform:translateY(38px);opacity:1}

}

@keyframes record-travel{0%{transform:translateX(0);opacity:0}
30%{opacity:1}
100%{transform:translateX(-32px);opacity:0}

}

@keyframes vip-shimmer{0%,65%{transform:translateX(0);opacity:0}
75%{opacity:1}
100%{transform:translateX(450%);opacity:0}

}

@keyframes tick-in{from{opacity:0;transform:translateY(4px)}
to{opacity:1;transform:translateY(0)}

}

.motion-area{--motion-state:paused}
.motion-area.is-running{--motion-state:running}
.motion-area,.motion-area::before,.motion-area::after,.motion-area *,.motion-area *::before,.motion-area *::after{animation-play-state:var(--motion-state,paused)}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important}
.js-motion [data-reveal]{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-motion [data-reveal]:not(.is-visible){opacity:0;transform:translateY(16px)}

@media(max-width:1050px){.desktop-nav{gap:15px}
.nav-shell{gap:15px}
.hero-grid{gap:25px}
.hero h1{font-size:36px}
.hero-preview{padding:19px}
.sms-demo-grid{grid-template-columns:205px minmax(0,1fr);gap:25px;padding:22px}
.sms-content h2{font-size:24px}
.demo-fields{gap:10px}
.flagship-experience{grid-template-columns:290px minmax(0,1fr);gap:26px}
.hub-panel{padding:23px}
.hub-panel h3{font-size:22px}
.loyalty-board{gap:18px}
.brand-security{gap:18px}
.feature-card{padding:22px}
.feature-card .feature-specs{flex-wrap:wrap}
.feature-card .feature-specs>li{flex-basis:100%}

}

@media(max-width:820px){.hero-grid{grid-template-columns:1fr 1fr}
.hero h1{font-size:32px}
.hero .actions{align-items:stretch;flex-direction:column}
.hero .actions .btn{width:100%}
.hero-pills{gap:9px}
.hero-preview{padding:17px}
.preview-header{flex-wrap:wrap;gap:5px}
.sms-demo-grid{grid-template-columns:180px minmax(0,1fr);gap:23px}
.demo-fields{grid-template-columns:1fr 1fr}
.demo-fields>div:last-child{grid-column:1/-1}
.sms-demo-grid{min-height:0}
.sms-content>p:not(.eyebrow){font-size:14px}
.flagship-experience{grid-template-columns:1fr;gap:25px}
.hub-panel{min-height:0}
.feature-bento{gap:17px}
.feature-card{padding:20px}
.feature-card-head{gap:10px;align-items:flex-start}
.feature-card h3{font-size:19px}
.feature-card>p{font-size:15px}
.feature-visual{padding-inline:14px}
.sales-visual{gap:14px}
.mini-radar{width:85px;height:85px}
.health-card{flex-wrap:wrap;padding:14px;gap:9px}
.health-card .pet-art{width:44px;height:44px}
.scan-frame{display:none}
.record-network{gap:7px}
.record-network>.pet-art{width:40px;height:40px}
.feature-specs{flex-direction:column;gap:10px}
.start-steps{gap:14px}

}

@media(max-width:720px){.container{width:calc(100% - 32px)}
.section{padding:46px 0}
.section-heading{margin-bottom:25px}
.section-heading>p:last-child:not(.eyebrow){font-size:15px}
.header{top:8px;width:calc(100% - 16px);margin-top:8px}
.nav-shell{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1fr) 44px;gap:6px;min-height:56px;padding:4px 6px}
.nav-shell>.brand{grid-column:1;grid-row:1}
.nav-shell>.desktop-nav{display:none}
.mobile-nav{display:block;grid-column:4;grid-row:1}
.nav-actions{display:contents}
.nav-actions>.btn{font-size:16px;padding:10px 8px;white-space:nowrap;min-width:0}
.nav-actions>[data-login]{grid-column:2;grid-row:1}
.nav-actions>[data-register]{grid-column:3;grid-row:1}
.brand{font-size:23px;gap:6px}
.brand-mark{width:32px;height:32px;border-radius:10px}
.brand-mark>.icon{width:24px;height:24px}
.pointer-glow{display:none}
.care-thread{right:3px;opacity:.2;width:16px}
.care-thread>svg{width:16px}
.thread-progress{right:7px}
.thread-stop{width:16px;right:0}
.thread-stop>.icon{width:12px;height:12px}
.hero{padding:30px 0 36px}

.hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
.hero h1{font-size:clamp(28px,7.4vw,34px);line-height:1.5}
.hero-lead{font-size:15.5px;margin-top:17px;line-height:2}
.hero .actions{flex-direction:row;gap:10px}
.hero .actions>.btn{width:auto;flex:1;font-size:16px;padding-inline:14px}
.hero-pills{gap:10px 16px;margin-top:18px}
.audience-note{font-size:14px;margin-top:12px}
.hero-preview{justify-self:center;max-width:440px;padding:21px}
.preview-header{flex-wrap:nowrap}
.sms-section{padding:8px 0 35px}
.sms-demo-grid{display:flex;flex-direction:column-reverse;gap:24px;padding:24px 20px}
.sms-content h2{font-size:24px}
.sms-content>p:not(.eyebrow){font-size:14px;margin-top:10px}
.demo-fields{grid-template-columns:1fr;gap:12px}
.demo-fields>div:last-child{grid-column:auto}
.demo-actions{flex-direction:column;align-items:stretch;gap:9px}
.demo-actions .btn{width:100%;font-size:16px}
.flagship-section .section-heading h2{font-size:27px}
.flagship-experience{gap:23px}
.hub-panel{padding:23px}
.hub-panel h3{font-size:22px}
.hub-panel>p{font-size:15px}
.pet-timeline{align-items:flex-start;gap:15px;flex-direction:column}
.timeline-pet{flex-direction:row;gap:11px}
.timeline-pet .pet-art{width:45px;height:45px}
.pet-timeline>div{width:100%;gap:12px}
.pet-timeline strong{font-size:14px}
.feature-specs{flex-direction:column;gap:10px;margin-top:17px;padding-top:15px}
.loyalty-board{gap:15px;flex-direction:column}
.brand-security{gap:15px;flex-direction:column}
.brand-preview{width:230px;max-width:95%}
.security-lock{max-width:none;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center}
.security-lock>.icon{width:32px;height:32px}
.security-lock small{flex-basis:100%}
.flagship-footer{flex-direction:column;align-items:flex-start;gap:17px}
.flagship-footer>.btn{width:100%}
.feature-bento{grid-template-columns:minmax(0,1fr);gap:18px}
.feature-card,.mini-feature{grid-column:auto;padding:23px}
.feature-card-head{align-items:center;gap:13px}
.feature-card h3{font-size:20px}
.feature-card .feature-specs>li{flex-basis:auto}
.feature-visual{min-height:165px;margin-top:17px;padding:35px 15px 17px}
.sales-visual{gap:20px}
.mini-radar{width:100px;height:100px}
.health-card{flex-wrap:nowrap;padding:15px}
.scan-frame{display:grid}
.calendar-preview{max-width:360px}
.record-network{gap:10px}
.record-network>.pet-art{width:48px;height:48px}
.doctor-preview{gap:13px}
.mini-feature h3{font-size:20px}
.plan-details{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px}
.pricing-links{gap:16px}
.pricing-links>.btn{width:100%}
.start-steps{grid-template-columns:1fr;gap:14px;margin-top:23px}

}

@media(max-width:420px){.nav-shell{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px;gap:5px}
.nav-shell>.brand{justify-content:center}
.nav-shell>.brand>strong{display:none}
.header{width:calc(100% - 12px)}
.hero .actions{flex-direction:column;align-items:stretch}
.hero .actions>.btn{width:100%}
.hero-preview{padding:18px}
.preview-header{flex-wrap:wrap}
.preview-header small{font-size:14px}
.pet-timeline>div{gap:9px}
.hub-panel{padding:21px}
.feature-card,.mini-feature{padding:21px}
.feature-card-head{gap:10px}
.feature-card h3{font-size:19px}
.sales-visual{gap:13px}
.mini-radar{width:85px;height:85px}
.health-card{padding:13px;gap:8px}
.health-card .pet-art{width:42px;height:42px}
.scan-frame{display:none}
.doctor-preview>.pet-art{width:44px;height:44px}
.record-network{gap:7px}
.record-network>span{font-size:14px}
.record-network>.pet-art{width:40px;height:40px}
.record-network>i{min-width:7px}

}

@media(max-width:350px){.header{width:calc(100% - 8px)}
.nav-shell{gap:4px;padding:4px 2px}
.nav-actions>.btn{padding-inline:5px}
.container{width:calc(100% - 28px)}
.hero h1{font-size:28px}
.hero-preview{padding:16px}
.feature-card-head{align-items:flex-start}
.feature-card h3{font-size:18px}
.health-card>div strong{font-size:14px}
.pet-timeline>div>span{font-size:14px}

}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.js-motion [data-reveal]:not(.is-visible){opacity:1;transform:none}
.pointer-glow{display:none}
.tilt-card,.magnetic{transform:none!important}
.thread-progress{transform:scaleY(1)}

}
.pet-timeline,.loyalty-board,.brand-security{max-width:480px;margin-inline:auto}
.feature-visual{max-width:480px;width:100%;align-self:center}
.motion-paused *{transition:none!important}

@media(min-width:821px){.sms-demo-grid{padding-block:14px}
.sms-content .eyebrow{margin-bottom:4px}
.sms-content>p:not(.eyebrow){margin-bottom:12px}

}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.mobile-nav summary{background:var(--brand);color:var(--white);border-radius:12px}

@media(min-width:821px){.sms-demo-grid{padding-block:12px}

}
/* Version 4: content stays visible; motion adds detail rather than changing views. */
button,.btn,button *,.btn *{text-shadow:none!important}
.header{margin:16px auto 0}
.nav-shell{padding:10px 16px;min-height:66px;gap:20px}
.nav-actions{gap:10px}
.nav-actions .btn{min-height:42px;font-size:14px;font-weight:700;padding:9px 13px;gap:7px;border-radius:10px;box-shadow:none}
.nav-actions .btn>.icon{width:18px;height:18px}
.mobile-nav summary{height:42px;width:42px}
.mobile-nav nav{top:calc(100% + 8px)}
.care-overview{padding:20px;max-width:460px}
.overview-patient{display:flex;align-items:center;gap:12px;padding:18px 0 16px}
.overview-patient>.pet-art{width:53px;height:53px}
.overview-patient>div{flex:1;min-width:0}
.overview-patient strong{font-size:20px;display:block}
.overview-patient>div>span{font-size:14px;color:var(--muted)}
.overview-state{display:flex;align-items:center;gap:5px;color:var(--accent-text);font-size:14px}
.overview-state>.icon{width:17px;height:17px}
.overview-journey{display:flex;align-items:center;gap:8px;padding:15px 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px}
.overview-journey>div{display:flex;align-items:center;flex-direction:column;gap:8px;text-align:center;flex:1;font-size:14px;white-space:nowrap}
.overview-journey .icon{color:var(--accent-text);width:25px;height:25px;animation:timeline-pulse 3s ease-in-out infinite}
.overview-journey>div:nth-of-type(2) .icon{animation-delay:.6s}
.overview-journey>div:nth-of-type(3) .icon{animation-delay:1.2s}
.overview-journey>i{width:24px;height:1px;background:var(--brand);position:relative;opacity:.6;flex-shrink:1}
.overview-journey>i:after{content:'';position:absolute;width:5px;height:5px;top:-2px;right:0;background:var(--brand);border-radius:50%;animation:care-travel 2.8s ease-in-out infinite}
.overview-cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:15px}
.overview-cards h3{font-size:16px;line-height:1.65}
.overview-cards p,.overview-signal{font-size:14px;line-height:1.8}
.overview-opportunity{display:flex;align-items:center;gap:16px;padding:13px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.17);border-radius:13px}

.overview-signal{display:block;color:var(--accent-text);margin-top:5px}
.overview-passport{padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.passport-heading{display:flex;gap:11px;align-items:center}
.passport-heading>.pet-art{width:38px;height:38px}
.passport-line{display:flex;align-items:center;gap:8px;font-size:14px;padding:10px 0 7px}
.passport-line>.icon{color:var(--accent-text);width:18px;height:18px}
.mini-radar:before{content:'';position:absolute;inset:9%;border:1px solid rgba(var(--brand-rgb),.4);border-radius:50%;animation:radar-ring 3.4s ease-out infinite}
.mini-radar>b{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--brand);animation:radar-dot 3.5s ease-in-out infinite;box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12)}
.mini-radar>b:nth-of-type(1){top:24%;left:28%;animation-delay:.4s}
.mini-radar>b:nth-of-type(2){top:51%;right:19%;animation-delay:1.5s}
.mini-radar>b:nth-of-type(3){bottom:20%;left:40%;animation-delay:2.6s}
.mini-radar>i{animation-duration:4.8s;background:conic-gradient(transparent 0deg 230deg,rgba(var(--brand-rgb),.03) 270deg,rgba(var(--brand-rgb),.5) 359deg,transparent)}
/* SMS demo layout. */
.sms-demo-grid{grid-template-columns:250px minmax(0,1fr);gap:42px;padding:28px 34px;min-height:0}

.demo-disclosure{font-size:14px;line-height:1.9;margin:12px 0;color:var(--muted)}
/* All three flagship features remain visible without tabs or selection. */
.flagship-experience{display:flex;flex-direction:column;gap:22px}
.hub-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;align-items:stretch}
.hub-panel{padding:23px 20px;min-height:0;display:flex;flex-direction:column;gap:0}
.hub-panel h3{font-size:21px}
.hub-panel>p{font-size:14px;line-height:1.95;flex:1}
.flagship-section.is-running .hub-panel{animation:none}
.hub-panel .feature-specs{flex-direction:column;gap:11px}
.hub-panel .pet-timeline,.hub-panel .loyalty-board,.hub-panel .brand-security{min-height:210px;width:100%;margin-top:20px;justify-content:center}
.hub-panel .pet-timeline{flex-direction:column;gap:17px}
.hub-panel .timeline-pet{flex-direction:row;gap:11px}
.hub-panel .timeline-pet .pet-art{width:42px;height:42px}
.hub-panel .pet-timeline>div{width:100%;flex:none}
.hub-panel .loyalty-board{gap:15px;flex-direction:column}
.hub-panel .brand-security{flex-direction:column;gap:18px}
.hub-panel .brand-preview{width:200px;max-width:100%;padding:13px}
.hub-panel .security-lock{max-width:100%;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:7px}
.hub-panel .security-lock>.icon{width:25px;height:25px}
.hub-panel .security-lock small{flex-basis:100%}
.hub-panel .security-lock strong{font-size:13px}

@keyframes radar-ring{0%{transform:scale(.4);opacity:0}
20%{opacity:.7}
100%{transform:scale(1.2);opacity:0}
}

@keyframes radar-dot{0%,100%{transform:scale(.7);opacity:.3}
35%{transform:scale(1.5);opacity:1}
60%{transform:scale(1);opacity:.7}
}

@keyframes care-travel{0%{transform:translateX(0);opacity:0}
30%{opacity:1}
100%{transform:translateX(-22px);opacity:0}
}

@media(max-width:1050px){.nav-shell{gap:14px}
.sms-demo-grid{grid-template-columns:220px minmax(0,1fr);gap:28px;padding:26px}
.hub-panels{gap:13px}
.hub-panel{padding:21px 17px}
.hub-panel h3{font-size:19px}
.hub-panel .pet-timeline>div{flex-direction:column;gap:8px}
.hub-panel .pet-timeline>div>span{flex-direction:row;align-items:center;flex-wrap:wrap;gap:7px}
.hub-panel .pet-timeline>div:before{display:none}
.hub-panel .pet-timeline>div small{flex-basis:100%;padding-right:39px}
.overview-state{display:none}
}

@media(max-width:820px){.hub-panels{grid-template-columns:1fr}
.hub-panel{padding:25px}
.hub-panel h3{font-size:22px}
.hub-panel .pet-timeline>div{flex-direction:row}
.hub-panel .pet-timeline>div>span{flex-direction:column;align-items:flex-start}
.hub-panel .pet-timeline>div small{padding:0}
.hub-panel .pet-timeline,.hub-panel .loyalty-board,.hub-panel .brand-security{min-height:0}
.hub-panel .loyalty-board,.hub-panel .brand-security{flex-direction:row;gap:25px}
.hub-panel .security-lock{max-width:190px;flex-direction:column}
.overview-journey{padding-inline:7px;gap:4px}
.overview-journey>div{font-size:13px}
.care-overview{padding:16px}
.overview-opportunity{gap:11px;padding:11px}

.overview-cards h3{font-size:15px}
.sms-demo-grid{grid-template-columns:216px minmax(0,1fr);padding:24px;gap:24px}
}

@media(max-width:720px){.header{margin:12px auto 0;width:calc(100% - 24px)}
.nav-shell{display:flex;flex-wrap:wrap;gap:10px;padding:10px 12px;min-height:64px}
.nav-shell>.brand{order:0;min-height:40px}
.nav-actions{display:flex;order:1;margin-right:auto;gap:8px}
.nav-actions .btn{min-height:40px;font-size:13px;padding:9px 10px;gap:5px}
.nav-actions .btn>.icon{width:16px;height:16px}
.mobile-nav{order:2}
.mobile-nav summary{width:36px;height:40px}
.care-overview{padding:20px;max-width:440px}
.overview-state{display:flex}
.overview-journey>div{font-size:14px}

.overview-cards h3{font-size:16px}
.sms-demo-grid{padding:24px 20px;gap:30px}
.hub-panel{padding:24px}
.hub-panel .loyalty-board,.hub-panel .brand-security{flex-direction:column;gap:18px}
.hub-panel .security-lock{max-width:100%;flex-direction:row}
}

@media(max-width:420px){.nav-shell{gap:8px;padding:10px}
.nav-shell>.brand>strong{display:none}
.nav-shell>.brand{width:30px}
.nav-shell .brand-mark{width:30px;height:30px}
.nav-actions{gap:7px}
.nav-actions .btn{font-size:13px;padding-inline:8px;min-height:40px}
.mobile-nav summary{width:32px}
.care-overview{padding:17px}
.overview-state{display:none}
.overview-journey{gap:4px;padding-inline:6px}
.overview-journey>div{font-size:13px}
.overview-journey>i{width:16px}
.overview-opportunity{gap:12px}

.hub-panel .pet-timeline>div{gap:10px}
.hub-panel .pet-timeline strong{font-size:13px}
.nav-actions .btn>.icon{display:none}
}

@media(prefers-reduced-motion:reduce){.overview-journey>i:after{transform:none;opacity:.7}
.mini-radar>b{opacity:1;transform:none}
}
.hub-panel .pet-timeline>div>span{min-width:0}
.hub-panel .pet-timeline strong,.hub-panel .pet-timeline small{max-width:100%;overflow-wrap:anywhere;flex-basis:auto}
.hub-panel .pet-timeline>div>span{flex-wrap:nowrap}
.hub-panel .pet-timeline>div small{flex-basis:auto}
.header .nav-actions .btn,.header .mobile-nav summary{min-height:44px}
.header .mobile-nav summary{width:44px}

/* The sender controls and form share the page button and input styles. */


.demo-fields{grid-template-columns:1fr 1fr;gap:16px}

.demo-type-picker{grid-column:1/-1;padding:0;border:0;margin:0;min-width:0}

.demo-type-picker legend{font-size:14px;color:var(--ink);padding:0;margin-bottom:8px}

.demo-type-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.lead-demo-form .demo-type-option{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 13px;margin:0;background:var(--brand);color:var(--white);font-size:15px;font-weight:700;border-radius:11px;border:1px solid transparent;cursor:pointer;text-shadow:none;transition:box-shadow .2s,transform .2s}

.demo-type-option>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}

.demo-type-option>.icon{width:20px;height:20px}

.type-indicator{display:grid;place-items:center;width:18px;height:18px;border:1px solid rgba(255,255,255,.65);border-radius:50%;margin-inline-start:auto}

.type-indicator>.icon{width:13px;height:13px;opacity:0}

.demo-type-option:has(input:checked){box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent-text)}

.demo-type-option:has(input:checked) .type-indicator{background:var(--white);color:var(--accent-text)}

.demo-type-option:has(input:checked) .type-indicator>.icon{opacity:1}

.demo-type-option:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:5px}

.demo-type-option:hover{transform:translateY(-1px)}

@media(max-width:820px){.sms-demo-grid{grid-template-columns:240px minmax(0,1fr)}
.demo-type-options{grid-template-columns:1fr}
.demo-type-option{justify-content:flex-start}
}

@media(max-width:720px){

.demo-type-options{grid-template-columns:1fr 1fr}
.demo-fields{grid-template-columns:1fr}
.lead-demo-form .demo-type-option{font-size:14px;padding:10px;gap:6px}
.demo-type-option>.icon{width:18px;height:18px}
.type-indicator{width:16px;height:16px}
.type-indicator>.icon{width:11px;height:11px}
}

@media(max-width:350px){.demo-type-options{gap:10px}
.lead-demo-form .demo-type-option{font-size:13px;padding-inline:8px;gap:4px}
.demo-type-option>.icon{width:16px;height:16px}
}

@media(max-width:420px){.demo-type-option>.icon{display:none}
}

.brand-preview{border:1px solid var(--line);box-shadow:var(--shadow)}

/* Three distinct stories: replenishment, customer cohorts, and one sales radar. */
.overview-opportunity{gap:16px}
.overview-opportunity>div:last-child{min-width:0;flex:1}
.refill-cue{width:75px;height:83px;position:relative;flex-shrink:0;display:grid;place-items:center}
.refill-cue>svg{width:75px;height:83px;stroke:var(--accent-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.refill-bag{fill:var(--surface);stroke-width:2}
.refill-paw{fill:var(--brand);stroke:none;opacity:.65}
.refill-kibble{fill:var(--brand);stroke:none;animation:kibble-fall 3.8s var(--ease) infinite;transform-origin:40px 12px}
.refill-check{position:absolute;bottom:7px;left:0;display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--surface);background:var(--brand);color:var(--white);border-radius:7px;animation:refill-confirm 3.8s var(--ease) infinite}
.refill-check>.icon{width:14px;height:14px}
.refill-progress{height:3px;display:block;width:100%;max-width:155px;overflow:hidden;border-radius:3px;background:rgba(var(--brand-rgb),.12);margin-top:10px}
.refill-progress>i{display:block;width:100%;height:100%;border-radius:3px;background:var(--brand);transform-origin:right;animation:refill-meter 3.8s var(--ease) infinite}
.hub-panel .loyalty-board{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;max-width:290px;margin:20px auto 0}
.cohort-caption{font-size:12px;color:var(--muted);text-align:center;margin-bottom:3px}
.cohort-row{position:relative;display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.cohort-row:after{content:'';position:absolute;inset:-1px;border:1px solid var(--brand);border-radius:10px;pointer-events:none;animation:cohort-highlight 6.4s var(--ease) infinite;animation-delay:calc(var(--cohort-order)*.8s)}
.cohort-avatar{display:grid;place-items:center;width:28px;height:28px;background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--accent-text);flex-shrink:0}
.cohort-avatar>.icon{width:17px;height:17px}
.cohort-label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;flex:1}
.cohort-label>strong{font-size:13px;font-weight:500}
.cohort-label>small{font-size:11px;color:var(--muted)}
.cohort-tag{color:var(--accent-text);display:grid;place-items:center;animation:cohort-tag 6.4s var(--ease) infinite;animation-delay:calc(var(--cohort-order)*.8s)}
.cohort-tag>.icon{width:15px;height:15px}
/* A precise distribution rail connects PaVet to the three aligned feature cards. */
.flagship-experience{gap:0}
.care-conductor{width:100%;position:relative;display:flex;flex-direction:column;align-items:center}
.conductor-brand{display:flex;align-items:center;gap:12px;width:286px;max-width:100%;min-height:76px;padding:13px 16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 25px var(--soft);position:relative;isolation:isolate;overflow:hidden}
.conductor-brand:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,rgba(var(--brand-rgb),.08),transparent 85%);z-index:-1;animation:conductor-breath 4.8s ease-in-out infinite}
.conductor-emblem{width:40px;height:40px;display:grid;place-items:center;background:var(--brand);color:var(--white);border-radius:12px;flex-shrink:0}
.conductor-emblem>.icon{width:26px;height:26px}
.conductor-brand>div{flex:1}
.conductor-brand strong{font-size:20px;line-height:1.4;display:block}
.conductor-brand>div>span{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.conductor-status{display:flex;gap:3px;align-items:center;height:20px}
.conductor-status>i{width:3px;height:9px;border-radius:3px;background:var(--brand);animation:pulse-wave 1.8s ease-in-out infinite}
.conductor-status>i:nth-child(2){height:18px;animation-delay:.2s}
.conductor-status>i:nth-child(3){height:12px;animation-delay:.4s}
.conductor-rails{width:100%;height:70px;overflow:visible}
.conductor-track{stroke:var(--line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.conductor-signal{transform:translate(var(--signal-x),70px);animation:conductor-distribute 4.8s var(--ease) infinite;animation-delay:var(--signal-delay);fill:var(--brand)}
.conductor-signal>circle:first-child{opacity:.12}
.conductor-ports{fill:var(--surface);stroke:var(--brand);stroke-width:1;opacity:.8}
.conductor-stem{display:none}
.hub-panel{position:relative}
@keyframes kibble-fall{0%,10%{opacity:0;transform:translateY(-4px)}
20%{opacity:1}
50%,100%{opacity:0;transform:translateY(18px)}
}
@keyframes refill-confirm{0%,35%{opacity:.35;transform:scale(.8)}
50%,82%{opacity:1;transform:scale(1)}
100%{opacity:.35;transform:scale(.8)}
}
@keyframes refill-meter{0%,10%{transform:scaleX(.15);opacity:.6}
60%,85%{transform:scaleX(1);opacity:1}
100%{transform:scaleX(.15);opacity:.6}
}
@keyframes cohort-highlight{0%,5%{opacity:0}
15%,30%{opacity:.8}
48%,100%{opacity:0}
}
@keyframes cohort-tag{0%,5%{opacity:.2;transform:translateX(3px)}
17%,35%{opacity:1;transform:translateX(0)}
50%,100%{opacity:.2;transform:translateX(0)}
}
@keyframes conductor-breath{0%,100%{opacity:.35;transform:translateX(-25%)}
50%{opacity:1;transform:translateX(25%)}
}
@keyframes conductor-distribute{0%{opacity:0;transform:translate(600px,0)}
10%{opacity:1;transform:translate(600px,0)}
25%{opacity:1;transform:translate(600px,30px)}
68%{opacity:1;transform:translate(var(--signal-x),30px)}
85%{opacity:1;transform:translate(var(--signal-x),70px)}
100%{opacity:0;transform:translate(var(--signal-x),70px)}
}
@keyframes conductor-down{0%{opacity:0;transform:translateY(-3px)}
20%{opacity:1}
85%{opacity:1}
100%{opacity:0;transform:translateY(30px)}
}
@media(max-width:1050px){.cohort-label{flex-direction:column;align-items:flex-start;gap:0}
.cohort-label>strong{font-size:12px}
.cohort-row{gap:7px;padding-inline:8px}
}
@media(max-width:820px){.care-conductor{margin-bottom:0}
.conductor-rails{display:none}
.conductor-stem{display:block;position:relative;width:1px;height:36px;background:var(--line)}
.conductor-stem>i{position:absolute;top:0;left:-2px;width:5px;height:8px;border-radius:3px;background:var(--brand);animation:conductor-down 3s var(--ease) infinite}
.cohort-label{flex-direction:row;align-items:center;gap:8px}
.cohort-label>strong{font-size:13px}
.hub-panel:not(:last-child):after{content:'';position:absolute;bottom:-19px;left:50%;height:18px;width:1px;background:var(--line)}
.hub-panel:not(:last-child):before{content:'';position:absolute;bottom:-10px;left:calc(50% - 2px);width:5px;height:5px;background:var(--brand);border-radius:2px}
.hub-panels{gap:18px}
}
@media(max-width:420px){.overview-opportunity{gap:12px}
.refill-cue,.refill-cue>svg{width:63px;height:74px}
.refill-check{bottom:6px;left:-2px}
.conductor-brand{width:270px;min-height:70px;padding:12px 14px}
.conductor-brand>div>span{font-size:11px}
.conductor-brand strong{font-size:19px}
.cohort-label{flex-direction:column;align-items:flex-start;gap:0}
}
@media(prefers-reduced-motion:reduce){.refill-kibble{opacity:.7;transform:none}
.refill-check,.cohort-tag{opacity:1;transform:none}
.refill-progress>i{transform:scaleX(1)}
.cohort-row:after{opacity:0}
.conductor-signal{opacity:1;transform:translate(var(--signal-x),70px)}
.conductor-stem>i{transform:translateY(28px)}
}
.refill-kibble,.refill-check,.refill-progress>i,.cohort-row:after,.cohort-tag,.conductor-brand:before,.conductor-status>i,.conductor-signal,.conductor-stem>i{animation-play-state:var(--motion-state,paused)}

/* Calculator: a care ledger, an honest comparison, and a clear net result. */
.calculator-grid{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.12fr);gap:12px;align-items:stretch}
.calculator-controls,.calculator-result{min-width:0;border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:25px;box-shadow:0 8px 25px rgba(0,0,0,.025)}
.calculator-controls{display:flex;flex-direction:column}
.calc-card-heading{display:flex;align-items:center;gap:11px;margin-bottom:25px}
.calc-heading-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(var(--brand-rgb),.2);border-radius:13px;background:var(--soft);color:var(--accent-text);flex-shrink:0}
.calc-heading-icon>.icon{width:25px;height:25px}
.calc-card-heading h3{font-size:18px}
.calc-card-heading p{font-size:14px;margin-top:3px}
.range-field{padding:17px 0 15px;border-top:1px solid var(--line)}
.range-field label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:700;flex-wrap:wrap}
.range-field output{font-size:14px;color:var(--accent-text);font-weight:700;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.15);border-radius:8px;padding:3px 8px;white-space:nowrap}
.range-field input::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to left,var(--brand) var(--fill),var(--line) var(--fill))}
.range-field input::-webkit-slider-thumb{appearance:none;width:23px;height:23px;margin-top:-8.5px;background:var(--white);border:6px solid var(--brand);box-shadow:0 0 0 4px var(--surface);border-radius:50%;transition:box-shadow .2s}
.range-field input:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--soft),0 0 0 8px rgba(var(--brand-rgb),.1)}
.range-field input::-moz-range-track{height:6px;border-radius:6px;background:var(--line)}
.range-field input::-moz-range-progress{height:6px;background:var(--brand);border-radius:6px}
.range-field input::-moz-range-thumb{width:14px;height:14px;background:var(--white);border:5px solid var(--brand);box-shadow:0 0 0 4px var(--surface);border-radius:50%}
.range-limits{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted);margin-top:-5px}
.roi-services{border:0;padding:0;margin:6px 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.roi-services legend{font-size:14px;font-weight:700;margin-bottom:12px}
.roi-services label{position:relative;display:flex;align-items:center;gap:7px;padding:10px 9px;min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:14px;cursor:pointer;transition:box-shadow .2s,transform .2s}
.roi-services input{width:16px;height:16px;accent-color:var(--accent-text);margin:0;flex-shrink:0}
.roi-services label>.icon{width:18px;height:18px;color:var(--accent-text);flex-shrink:0}
.roi-services label:has(input:checked){border-color:rgba(var(--brand-rgb),.45);background:var(--soft)}
.roi-services label:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.calculator-controls>.assumption{font-size:14px;line-height:1.95;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.roi-connector{display:flex;align-items:center;justify-content:center;position:relative}
.roi-connector>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--accent-text);position:relative;z-index:1}
.roi-connector .icon{width:18px;height:18px}
.roi-connector>i{position:absolute;top:50%;right:-12px;left:-12px;height:1px;background:var(--brand);opacity:.25}
.calculator-result{position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.calc-result-heading{display:flex;align-items:center;justify-content:center;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.calc-result-heading>strong{font-size:14px}
.calc-signal{width:6px;height:6px;border-radius:3px;background:var(--brand);box-shadow:0 0 0 4px var(--soft);animation:calc-signal 3s ease-in-out infinite;flex-shrink:0}
.missed-visits{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted);margin-top:15px}
.missed-visits>strong{font-size:14px;color:var(--ink);white-space:nowrap}
.roi-comparison{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:10px;align-items:center;margin:18px 0 16px;padding:16px 12px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:15px}
.roi-comparison-column{display:flex;align-items:center;flex-direction:column;text-align:center;min-width:0}
.roi-bar-track{display:flex;align-items:flex-end;justify-content:center;width:100%;height:80px;position:relative;margin-bottom:10px;border-bottom:1px solid var(--line)}
.roi-bar-fill{position:relative;display:block;width:52px;max-width:80%;height:78px;border-radius:8px 8px 0 0;transform-origin:bottom;transform:scaleY(var(--bar-scale,1));transition:transform .4s var(--ease)}
.bar-missed{background:var(--muted);opacity:.18}
.bar-returned{background:var(--brand);box-shadow:0 0 20px rgba(var(--brand-rgb),.12);--bar-scale:.78}
.roi-bar-glint{position:absolute;left:50%;width:52px;max-width:80%;height:10px;bottom:0;background:linear-gradient(transparent,rgba(255,255,255,.45),transparent);transform:translateX(-50%);animation:roi-bar-glint 4.8s var(--ease) infinite;pointer-events:none}
.roi-comparison-column>span:not(.roi-bar-track){font-size:14px;line-height:1.8;color:var(--muted)}
.roi-comparison output{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.9;margin-top:4px}
.roi-recovery-link{position:relative;align-self:start;display:grid;place-items:center;height:80px;color:var(--accent-text)}
.roi-recovery-link>.icon{width:19px;height:19px}
.roi-recovery-link>i{position:absolute;top:calc(50% - 1px);right:-6px;width:4px;height:3px;border-radius:2px;background:var(--brand);animation:roi-recover 3s var(--ease) infinite}
.roi-gain{position:relative;text-align:center;padding:15px 12px 13px;isolation:isolate;border:1px solid rgba(var(--brand-rgb),.2);border-radius:15px;background:var(--soft);overflow:hidden}
.roi-gain:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 10%,rgba(var(--brand-rgb),.09),transparent 90%);z-index:-1;animation:roi-result-light 6s ease-in-out infinite}
.roi-gain>span{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.roi-gain-amount{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin:5px 0 3px}
.roi-gain-amount>strong{font-size:clamp(28px,2.6vw,36px);font-weight:700;line-height:1.45;color:var(--accent-text);direction:ltr;font-variant-numeric:tabular-nums}
.roi-gain-amount>span{font-size:14px;color:var(--ink);text-align:right}
.roi-gain-amount small{display:block;font-size:14px;color:var(--muted)}
.roi-gain>p:not(.sr-only){font-size:14px}
.estimate-note{display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;color:var(--muted);margin-top:11px}
.estimate-note>.icon{width:14px;height:14px;color:var(--accent-text)}
#roi-payback{font-size:14px;line-height:1.9;margin:9px 0 13px}
.calculator-result>.btn{margin-top:auto;width:100%;font-size:16px}
.calculator-result>.assumption{font-size:14px;line-height:1.9;margin-top:12px}
/* Membership cards: a distinct visual for each duration and a luminous six-month frame. */
.trial-banner{position:relative;isolation:isolate;display:flex;align-items:center;gap:20px;padding:22px 25px;margin-bottom:30px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 25px rgba(0,0,0,.025);overflow:hidden}
.trial-banner:before{content:'';position:absolute;right:0;bottom:0;width:160px;height:2px;background:linear-gradient(to left,transparent,var(--brand),transparent);animation:trial-light 6s ease-in-out infinite;z-index:-1}
.trial-number{display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:72px;min-height:70px;padding:10px 8px;font-size:42px;font-weight:700;line-height:1.2;color:var(--accent-text);background:var(--soft);border:1px solid rgba(var(--brand-rgb),.18);border-radius:18px;transform:rotate(-5deg)}
.trial-number small{font-size:14px;color:var(--ink)}
.trial-banner>div{flex:1}
.trial-banner h3{font-size:20px}
.trial-banner p{font-size:14px;margin-top:5px}
.trial-banner>.btn{flex-shrink:0}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;padding-top:8px}
.pricing-card{position:relative;isolation:isolate;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:26px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.035)}
.pricing-card>*{position:relative;z-index:2}
.pricing-card.popular{border-color:rgba(var(--brand-rgb),.5);box-shadow:0 12px 35px rgba(var(--brand-rgb),.14)}
.pricing-card.popular:before{content:'';position:absolute;inset:-60%;background:conic-gradient(transparent 0 80deg,rgba(var(--brand-rgb),.25) 110deg,var(--brand) 155deg,transparent 180deg 260deg,rgba(var(--brand-rgb),.25) 290deg,var(--brand) 335deg,transparent 360deg);z-index:0;animation:orbit-spin 6s linear infinite}
.pricing-card.popular:after{content:'';position:absolute;inset:3px;border-radius:21px;background:var(--surface);z-index:1}
.pricing-card.vip{border-color:rgba(var(--brand-rgb),.35);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 95%,var(--brand)))}
.pricing-card.vip:before{content:'';position:absolute;top:-15%;bottom:-15%;left:-75%;width:55%;background:linear-gradient(110deg,transparent,rgba(var(--brand-rgb),.13),transparent);z-index:1;animation:membership-sheen 7s var(--ease) infinite;pointer-events:none}
.plan-ribbon,.popular-ribbon,.vip-ribbon{align-self:flex-start;padding:4px 9px;font-size:14px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:8px;background:var(--surface-2);margin-bottom:12px;max-width:calc(100% - 80px)}
.popular-ribbon{color:var(--accent-text);border-color:rgba(var(--brand-rgb),.25);background:var(--soft)}
.vip-ribbon{color:var(--accent-text);background:var(--soft);border-color:rgba(var(--brand-rgb),.2)}
.pricing-card h3{font-size:21px;min-height:64px;max-width:calc(100% - 75px);line-height:1.5}
.plan-period{font-size:14px;color:var(--muted);margin-top:4px}
.pricing-card>.plan-art{position:absolute;left:16px;top:20px;width:88px;height:78px;overflow:visible;z-index:3;color:var(--accent-text)}
.art-paper{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.art-back{fill:var(--brand);fill-opacity:.08;stroke:var(--brand);stroke-opacity:.18;stroke-width:1}
.art-line{stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art-grid{stroke:var(--line);stroke-width:3;stroke-linecap:round}
.art-day{fill:var(--brand);animation:calendar-day 4.8s ease-in-out infinite}
.art-check{stroke:var(--white);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plan-calendar{animation:calendar-float 5s ease-in-out infinite;transform-origin:50px 40px}
.art-heart{fill:var(--brand);fill-opacity:.14;stroke:var(--brand);stroke-width:1.6}
.plan-heart{animation:membership-heart 3.4s var(--ease) infinite;transform-origin:50px 40px}
.heart-trace{stroke-width:2.5}
.art-heart-base{opacity:.35}
.art-shield{fill:var(--surface);stroke:var(--brand);stroke-width:1.7}
.art-shield-inner{fill:var(--brand);fill-opacity:.09;stroke:var(--brand);stroke-opacity:.25;stroke-width:1}
.art-spark{stroke:var(--brand);stroke-width:1.5;stroke-linecap:round;animation:crest-spark 4.5s ease-in-out infinite}
.plan-crest{animation:crest-float 5s ease-in-out infinite;transform-origin:50px 40px}
.plan-total{font-size:30px;line-height:1.5;color:var(--ink);font-weight:700;margin-top:21px;white-space:nowrap;font-variant-numeric:tabular-nums}
.plan-total small{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:3px}
.price-old{font-size:14px;text-decoration:line-through;color:var(--muted);min-height:22px;margin-top:5px}
.monthly-price{font-size:14px;font-weight:500;color:var(--accent-text);margin-top:6px;padding:7px 10px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.1);border-radius:9px}
.plan-capacity{font-size:14px;font-weight:700;padding-top:17px;margin-top:20px;border-top:1px dashed var(--line)}
.plan-discount{font-size:14px;font-weight:700;color:var(--accent-text);margin-top:7px}
.pricing-card ul{font-size:14px;margin:16px 0 24px;display:grid;gap:11px;flex:1;align-content:start}
.pricing-card li{display:flex;align-items:flex-start;gap:9px;line-height:1.9}
.plan-tick{display:grid;place-items:center;width:19px;height:19px;margin-top:4px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.15);border-radius:6px;flex-shrink:0;color:var(--accent-text);animation:tick-in .5s var(--ease) both}
.plan-tick>.icon{width:13px;height:13px}
.pricing-card>.btn{width:100%;margin-top:auto;min-height:48px;font-size:16px}
.pricing-card.popular>.btn{box-shadow:0 8px 24px rgba(var(--brand-rgb),.28)}
@keyframes calc-signal{50%{opacity:.4;transform:scale(.8)}}
@keyframes roi-bar-glint{0%,20%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}75%,100%{opacity:0;transform:translate(-50%,-62px)}}
@keyframes roi-recover{0%,10%{opacity:0;transform:translateX(0)}30%{opacity:1}80%,100%{opacity:0;transform:translateX(-25px)}}
@keyframes roi-result-light{0%,100%{opacity:.3;transform:translateX(-40%)}50%{opacity:1;transform:translateX(40%)}}
@keyframes trial-light{0%,100%{opacity:0;transform:translateX(0)}35%,65%{opacity:1}90%{opacity:0;transform:translateX(-650px)}}
@keyframes membership-sheen{0%,40%{opacity:0;transform:translateX(0) skewX(-12deg)}55%{opacity:1}85%,100%{opacity:0;transform:translateX(400%) skewX(-12deg)}}
@keyframes calendar-float{0%,100%{transform:translateY(1px) rotate(-3deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes calendar-day{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes membership-heart{0%,50%,100%{transform:scale(1)}15%{transform:scale(1.07)}28%{transform:scale(1)}38%{transform:scale(1.04)}}
@keyframes crest-float{0%,100%{transform:translateY(1px) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes crest-spark{0%,100%{opacity:.25}50%{opacity:1}}
@media(max-width:1050px){.calculator-controls,.calculator-result{padding:21px}.calculator-grid{gap:8px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1.12fr)}.roi-services{grid-template-columns:1fr}.roi-services label{font-size:14px;min-height:44px}.roi-connector>span{width:26px;height:26px}.pricing-card{padding:23px}.pricing-card h3{font-size:20px}.plan-total{font-size:27px}.pricing-card>.plan-art{width:76px;height:70px;left:13px}.plan-ribbon,.popular-ribbon,.vip-ribbon{font-size:14px;max-width:calc(100% - 60px)}.monthly-price{font-size:14px;padding-inline:8px}.pricing-grid{gap:18px}}
@media(max-width:820px){.calculator-grid{grid-template-columns:minmax(0,1fr) 20px minmax(0,1.12fr);gap:7px}.calculator-controls,.calculator-result{padding:20px}.calc-card-heading{gap:8px}.calc-card-heading h3{font-size:17px}.calc-card-heading p{font-size:14px}.calc-heading-icon{width:35px;height:35px}.range-field label{font-size:14px;gap:6px}.roi-comparison{grid-template-columns:1fr 1fr;gap:14px;padding-inline:8px}.roi-recovery-link{position:absolute;left:calc(50% - 9px);top:13px;width:18px}.roi-comparison output{font-size:14px}.roi-gain-amount>strong{font-size:29px}.roi-gain-amount{gap:6px}.roi-gain-amount>span{font-size:14px}.pricing-grid{gap:16px}.pricing-card{padding:20px}.pricing-card h3{font-size:19px;max-width:calc(100% - 50px);min-height:60px}.pricing-card>.plan-art{width:64px;height:62px;left:9px;top:23px}.plan-ribbon,.popular-ribbon,.vip-ribbon{font-size:14px;padding:4px 7px;max-width:calc(100% - 40px)}.plan-total{font-size:25px}.monthly-price{font-size:14px;padding-inline:7px}.trial-banner{gap:15px;padding:20px}.trial-banner h3{font-size:19px}}
@media(max-width:720px){.calculator-grid{grid-template-columns:1fr;gap:0}.calculator-controls,.calculator-result{padding:24px}.roi-connector{height:34px}.roi-connector>span{width:28px;height:28px;transform:rotate(-90deg)}.roi-connector>i{width:1px;top:0;bottom:0;right:50%;height:auto;left:auto}.calc-card-heading{gap:11px}.calc-card-heading h3{font-size:18px}.calc-card-heading p{font-size:14px}.calc-heading-icon{width:42px;height:42px}.range-field label{font-size:14px;gap:10px}.roi-services{grid-template-columns:1fr 1fr}.roi-services label{font-size:14px;min-height:48px}.roi-comparison{grid-template-columns:1fr 24px 1fr;gap:10px;padding-inline:14px}.roi-recovery-link{position:relative;left:auto;top:auto;width:auto}.roi-comparison output{font-size:14px}.roi-gain-amount>strong{font-size:34px}.roi-gain-amount>span{font-size:14px}.pricing-grid{grid-template-columns:1fr;gap:22px;max-width:440px;margin-inline:auto}.pricing-card{padding:26px}.pricing-card h3{font-size:22px;min-height:60px;max-width:calc(100% - 85px)}.pricing-card>.plan-art{width:94px;height:82px;left:19px;top:22px}.plan-ribbon,.popular-ribbon,.vip-ribbon{font-size:14px;max-width:calc(100% - 80px);margin-bottom:12px}.plan-total{font-size:30px}.monthly-price{font-size:14px;padding-inline:11px}.trial-banner{flex-wrap:wrap;gap:16px;padding:22px}.trial-banner>div{flex-basis:calc(100% - 90px)}.trial-banner>.btn{width:100%}.trial-banner h3{font-size:20px}}
@media(max-width:420px){.calculator-controls,.calculator-result{padding:20px}.roi-services{grid-template-columns:1fr}.roi-services label{font-size:14px;min-height:46px}.roi-comparison{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding-inline:10px}.roi-recovery-link{position:absolute;left:calc(50% - 8px);top:15px;width:16px}.roi-comparison-column>span:not(.roi-bar-track){font-size:14px}.roi-comparison output{font-size:14px}.roi-gain-amount>strong{font-size:32px}.roi-gain-amount>span{font-size:14px}.calc-result-heading>strong{font-size:14px}.missed-visits{font-size:14px}.pricing-card{padding:24px}.pricing-card h3{font-size:21px}.pricing-card>.plan-art{width:85px;height:77px;left:13px}.plan-total{font-size:29px}.trial-banner>div{flex-basis:100%}}
.calc-signal,.roi-bar-glint,.roi-recovery-link>i,.roi-gain:before,.trial-banner:before,.pricing-card:before,.pricing-card:after,.plan-calendar,.art-day,.plan-heart,.plan-crest,.art-spark,.plan-tick{animation-play-state:var(--motion-state,paused)}
@media(prefers-reduced-motion:reduce){.roi-bar-glint,.roi-recovery-link>i,.trial-banner:before,.pricing-card.vip:before{display:none}.plan-calendar,.plan-heart,.plan-crest,.trial-number{transform:none}.calc-signal,.art-day,.art-spark{opacity:1}}
/* Small ticket cuts connect the price and the included services. */
.pricing-card{--pass-inset:26px}
.plan-capacity:before,.plan-capacity:after{content:'';position:absolute;top:-8px;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;background:var(--page);pointer-events:none}
.plan-capacity:before{right:calc(-1 * var(--pass-inset) - 8px)}
.plan-capacity:after{left:calc(-1 * var(--pass-inset) - 8px)}
.pricing-card.popular:before,.pricing-card.popular:after,.pricing-card.vip:before{animation-play-state:var(--motion-state,paused)}
@media(max-width:1050px){.pricing-card{--pass-inset:23px}}
@media(max-width:820px){.pricing-card{--pass-inset:20px}}
@media(max-width:720px){.pricing-card{--pass-inset:26px}}
@media(max-width:420px){.pricing-card{--pass-inset:24px}.roi-services{grid-template-columns:1fr 1fr}.roi-services label{align-items:flex-start;line-height:1.7}.roi-services input{margin-top:4px}.roi-services label>.icon{display:none}.range-field{padding-block:13px}}

/* Testimonials keep the original words and names, presented as considered quote cards. */
.quotes-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.quote-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:27px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 28px rgba(0,0,0,.025);overflow:hidden}
.quote-card:before{content:'';position:absolute;top:18px;right:0;width:2px;height:90px;background:linear-gradient(transparent,var(--brand),transparent);animation:quote-margin 7s ease-in-out infinite;pointer-events:none}
.quote-card:nth-child(2):before{animation-delay:1.4s}
.quote-card-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}
.quote-kind{display:flex;align-items:center;gap:7px;color:var(--accent-text);font-size:14px}
.quote-kind>.icon{width:18px;height:18px}
.quote-mark{width:36px;height:30px;color:var(--brand);opacity:.22;flex-shrink:0;animation:quote-mark 7s ease-in-out infinite}
.quote-card blockquote{font-size:15px;line-height:2.1;color:var(--ink);flex:1}
.quote-card figcaption{display:flex;align-items:center;gap:11px;margin-top:23px;padding-top:18px;border-top:1px dashed var(--line)}
.quote-avatar{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.18);color:var(--accent-text);font-size:21px;font-weight:700;flex-shrink:0}
.quote-card figcaption>div{flex:1;min-width:0}
.quote-card figcaption strong{font-size:14px;display:block}
.quote-card figcaption>div>span{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.quote-thread{display:flex;gap:3px;align-items:center;flex-shrink:0}
.quote-thread>i{width:4px;height:4px;border-radius:2px;background:var(--brand);animation:quote-dot 3s ease-in-out infinite}
.quote-thread>i:nth-child(2){animation-delay:.2s}
.quote-thread>i:nth-child(3){animation-delay:.4s}
/* Topic panels retain every existing answer and native keyboard disclosure behavior. */
.faq-section{padding-top:40px}
.faq-groups{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.faq-group{padding:23px 24px 9px;border:1px solid var(--line);border-radius:22px;background:var(--surface);min-width:0}
.faq-group-heading{display:flex;align-items:center;gap:11px;padding-bottom:18px;margin-bottom:1px}
.faq-group-heading>span{display:grid;place-items:center;width:40px;height:40px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.16);border-radius:12px;color:var(--accent-text);flex-shrink:0}
.faq-group-heading>span>.icon{width:23px;height:23px}
.faq-group h3{font-size:18px}
.faq-group-heading p{font-size:14px;margin-top:3px}
.faq-item{border-top:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:16px 0;list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-question{font-size:14px;font-weight:700;line-height:1.9}
.faq-toggle{display:block;position:relative;width:25px;height:25px;background:var(--brand);border-radius:8px;flex-shrink:0;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.faq-toggle>i{position:absolute;top:12px;left:7px;width:11px;height:1.5px;background:var(--white);border-radius:1px}
.faq-toggle>i+i{transform:rotate(90deg);transition:transform .2s var(--ease),opacity .2s}
.faq-item[open] .faq-question{color:var(--accent-text)}
.faq-item[open] .faq-toggle{box-shadow:0 0 0 4px var(--soft)}
.faq-item[open] .faq-toggle>i+i{transform:rotate(0);opacity:0}
.faq-answer{padding:0 0 18px;animation:faq-unfold .23s var(--ease)}
.faq-answer p{font-size:14px;line-height:2.05;color:var(--muted)}
.faq-item summary:hover .faq-toggle{transform:translateY(-1px);box-shadow:0 3px 10px var(--soft)}
/* A compact closing footer, without a replacement sales section. */
.site-footer{padding:34px 0 0;background:var(--surface);border-top:1px solid var(--line);position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) minmax(0,1fr) 120px;gap:40px;align-items:start;padding-bottom:28px}
.footer-brand>.brand{font-size:29px;gap:10px}
.footer-brand .brand-mark{width:42px;height:42px;border-radius:13px}
.footer-brand .brand-mark>.icon{width:29px;height:29px}
.footer-brand>p{font-size:14px;line-height:2;margin-top:13px;max-width:300px}
.footer-thread{display:block;position:relative;width:210px;max-width:100%;height:28px;margin-top:18px;overflow:hidden}
.footer-thread>svg{width:100%;height:100%;stroke:var(--brand);stroke-width:1.2;opacity:.3}
.footer-thread>i{position:absolute;top:14px;left:0;width:34px;height:2px;border-radius:2px;background:linear-gradient(to right,transparent,var(--brand),transparent);animation:footer-flow 6s ease-in-out infinite}
.footer-grid h3{font-size:15px;font-weight:700;margin:5px 0 14px}
.footer-nav{display:flex;flex-direction:column;align-items:stretch}
.footer-nav>a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;font-size:14px;color:var(--muted);max-width:175px}
.footer-nav>a>.icon{width:15px;height:15px;color:var(--accent-text);opacity:0;transform:translateX(4px);transition:opacity .2s,transform .2s}
.footer-nav>a:hover,.footer-nav>a:focus-visible{color:var(--accent-text)}
.footer-nav>a:hover>.icon,.footer-nav>a:focus-visible>.icon{opacity:1;transform:none}
.footer-contact-icon{display:grid;place-items:center;width:34px;height:34px;background:var(--soft);color:var(--accent-text);border:1px solid rgba(var(--brand-rgb),.14);border-radius:10px;margin-bottom:10px}
.footer-contact-icon>.icon{width:21px;height:21px}
.contact-placeholder{font-size:14px;line-height:2;color:var(--muted)}
.footer-trust>h3{font-size:14px;text-align:center}
#trust-badge-slot{width:120px;height:120px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:15px;background:var(--surface-2);padding:13px;text-align:center;font-size:14px;line-height:1.9;color:var(--muted)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0 16px;border-top:1px solid var(--line);font-size:14px}
.footer-bottom>small{font-size:14px;color:var(--muted)}
.footer-top-link{display:flex;align-items:center;gap:7px;min-height:44px;color:var(--muted);font-size:14px}
.footer-top-link>.icon{width:17px;height:17px;transform:rotate(90deg);color:var(--accent-text)}
.theme-control{display:flex;align-items:center;gap:10px;position:relative;min-height:44px;cursor:pointer;font-size:14px;color:var(--muted);flex-shrink:0}
.theme-control>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.theme-switch{position:relative;display:block;width:39px;height:23px;border:1px solid var(--line);background:var(--surface-2);border-radius:15px;transition:background .2s,border-color .2s;pointer-events:none}
.theme-switch>i{position:absolute;top:3px;left:3px;width:15px;height:15px;background:var(--muted);border-radius:50%;transition:transform .2s var(--ease),background .2s}
.theme-control:has(input:checked) .theme-switch{background:var(--brand);border-color:var(--brand)}
.theme-control:has(input:checked) .theme-switch>i{transform:translateX(16px);background:var(--white)}
.theme-control:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:4px;border-radius:5px}
@keyframes quote-margin{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.6;transform:translateY(130px)}}
@keyframes quote-mark{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes quote-dot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.9;transform:scale(1)}}
@keyframes faq-unfold{from{opacity:.65;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@keyframes footer-flow{0%,100%{opacity:0;transform:translateX(0)}20%{opacity:.5}80%{opacity:.5;transform:translateX(180px)}90%{opacity:0;transform:translateX(180px)}}
.quote-card:before,.quote-mark,.quote-thread>i,.footer-thread>i{animation-play-state:var(--motion-state,paused)}
@media(max-width:1050px){.footer-grid{gap:25px;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr) minmax(0,1fr) 120px}.quote-card{padding:24px}.faq-group{padding:21px 22px 7px}}
@media(max-width:820px){.footer-grid{grid-template-columns:1.2fr 1fr;gap:25px 40px}.footer-trust{display:flex;align-items:center;gap:20px}.footer-trust>h3{text-align:right;margin:0;order:1}.footer-bottom{flex-wrap:wrap;gap:8px 20px}.footer-bottom>small{flex-basis:100%}.footer-top-link{margin-left:auto}.quote-card{padding:22px}.quote-card-top{gap:10px}.quote-kind{font-size:14px;line-height:1.8}.quote-mark{width:29px;height:25px}.quote-card blockquote{font-size:14px}.quote-thread{display:none}.quote-card figcaption{gap:9px}.quote-avatar{width:36px;height:36px;font-size:19px}.faq-group{padding:20px 20px 6px}.faq-group-heading{align-items:flex-start;gap:10px}.faq-group h3{font-size:17px}.faq-group-heading p{font-size:14px}.faq-item summary{gap:10px}}
@media(max-width:720px){.quotes-grid,.faq-groups{grid-template-columns:1fr;gap:18px}.quote-card{padding:23px}.quote-card blockquote{font-size:15px;line-height:2.05}.quote-thread{display:flex}.quote-mark{width:34px;height:28px}.quote-card figcaption{margin-top:20px;padding-top:16px}.quote-avatar{width:39px;height:39px}.faq-section{padding-top:10px}.faq-group{padding:22px 22px 7px}.faq-group h3{font-size:18px}.faq-group-heading{align-items:center}.faq-item summary{min-height:64px}.faq-question{font-size:14px}.faq-answer p{font-size:14px}.site-footer{padding-top:28px}.footer-grid{gap:24px;grid-template-columns:1.15fr 1fr;padding-bottom:25px}.footer-brand{grid-column:1/-1}.footer-brand>p{max-width:none}.footer-thread{margin-top:12px;width:190px}.footer-contact{min-width:0}.footer-trust{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;gap:22px}.footer-trust>h3{max-width:120px;line-height:1.9}.footer-bottom{padding-top:12px;gap:7px 14px}.footer-bottom>small{font-size:14px}.footer-top-link{font-size:14px}.footer-nav>a{min-height:44px}.footer-nav>a>.icon{opacity:.6;transform:none}}
@media(max-width:420px){.quote-card{padding:21px}.quote-card-top{align-items:flex-start;gap:10px;margin-bottom:14px}.quote-mark{width:27px;height:25px}.quote-kind{font-size:14px}.quote-card blockquote{font-size:14px}.quote-thread{display:none}.quote-card figcaption>div>span{font-size:14px}.quote-avatar{width:34px;height:34px}.faq-group{padding:20px 19px 6px}.faq-group h3{font-size:17px}.faq-group-heading{gap:9px}.faq-group-heading>span{width:35px;height:35px}.faq-group-heading>span>.icon{width:21px;height:21px}.faq-toggle{width:23px;height:23px;border-radius:7px}.faq-toggle>i{top:11px;left:6px}.footer-grid{gap:22px 18px;grid-template-columns:1fr}.footer-brand,.footer-trust{grid-column:auto}.footer-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.footer-nav>h3{grid-column:1/-1;margin-bottom:5px}.footer-contact{display:grid;grid-template-columns:36px 1fr;column-gap:10px;align-items:center}.footer-contact>h3{grid-column:1/-1;margin-bottom:10px}.footer-contact-icon{margin:0}.contact-placeholder{font-size:14px}.footer-top-link{margin-left:0;flex:1}.theme-control{gap:8px}}
@media(prefers-reduced-motion:reduce){.quote-mark{transform:none}.quote-thread>i{opacity:.6;transform:none}.quote-card:before{opacity:.4;transform:none}.footer-thread>i{display:none}}
.motion-paused .faq-answer{animation:none!important;opacity:1}

/* Checkout: real stages, native plan choices, and an always-readable order summary. */
.auth-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.modal-backdrop{display:none;position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.54);backdrop-filter:blur(6px);padding:22px;overflow:hidden;align-items:center;justify-content:center}
.modal-backdrop.open{display:flex}
.auth-modal-card{--motion-state:paused;width:min(940px,100%);max-height:calc(100dvh - 44px);display:flex;flex-direction:column;overflow:hidden;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.22);position:relative}
.modal-backdrop.open .auth-modal-card{--motion-state:running;animation:auth-enter .24s var(--ease)}
.auth-modal-card:focus-visible{outline:none}
.auth-modal-card .icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auth-modal-card button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;font-size:14px;font-weight:700;line-height:1.6;padding:9px 13px;border:0!important;background:var(--brand)!important;color:var(--white)!important;text-shadow:none!important;border-radius:10px;box-shadow:none;white-space:normal}
.auth-modal-card button .icon{width:17px;height:17px}
.auth-modal-card button:hover{box-shadow:0 4px 15px var(--glow);transform:translateY(-1px)}
.auth-modal-card button:disabled{transform:none;box-shadow:none;cursor:wait;opacity:.6}
.auth-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:21px 24px 18px;background:var(--surface);border-bottom:1px solid var(--line);flex-shrink:0;position:relative;z-index:8}
.auth-heading{display:flex;align-items:center;gap:11px;min-width:0}
.auth-brand-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.18);color:var(--accent-text);flex-shrink:0}
.auth-brand-icon>.icon{width:26px;height:26px}
.auth-heading h2{font-size:22px;line-height:1.5;letter-spacing:0}
.auth-heading p{font-size:14px;margin-top:4px;line-height:1.8}
.auth-modal-card .auth-close{width:40px;min-width:40px;min-height:40px;padding:0;flex-shrink:0;margin-top:1px;border-radius:11px}
.auth-close>.icon{width:19px;height:19px}
.auth-tabs{display:flex;gap:7px;flex-shrink:0}
.auth-modal-card .auth-tab-btn{font-size:13px;min-height:36px;padding:7px 11px;border-radius:8px}

.auth-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:25px;align-items:start;padding:25px}
.auth-content{min-width:0}
.auth-step-heading{grid-column:1/-1;margin-bottom:2px}
.auth-step-heading h3{font-size:18px;line-height:1.6;letter-spacing:0}
.auth-step-heading p{font-size:14px;line-height:1.9;margin-top:5px}
.auth-plan-picker{padding:0;border:0;min-width:0;margin:17px 0 0}
.auth-plan-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-plan-card{position:relative;min-width:0;display:flex;flex-direction:column;gap:9px;padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--surface);cursor:pointer;transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s}
.auth-plan-card>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.auth-plan-card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}
.auth-plan-card-heading>strong{font-size:14px;line-height:1.7}
.auth-choice-dot{position:relative;display:block;width:17px;height:17px;border:1px solid var(--line);border-radius:50%;background:var(--surface);flex-shrink:0}
.auth-choice-dot:after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--white);opacity:0}
.auth-plan-card:has(input:checked),.gateway-option:has(input:checked){border-color:var(--brand);background:var(--soft);box-shadow:0 0 0 1px var(--brand)}
.auth-plan-card:has(input:checked) .auth-choice-dot,.gateway-option:has(input:checked) .auth-choice-dot{background:var(--brand);border-color:var(--brand)}
.auth-plan-card:has(input:checked) .auth-choice-dot:after,.gateway-option:has(input:checked) .auth-choice-dot:after{opacity:1}
.auth-plan-card:has(input:focus-visible),.gateway-option:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:4px}
.auth-plan-card:hover{transform:translateY(-2px);border-color:rgba(var(--brand-rgb),.5)}
.auth-plan-card-price{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font-size:20px;font-weight:700;line-height:1.5;pointer-events:none}
.auth-plan-card-price>small{font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap}
.auth-plan-card-note{font-size:13px;color:var(--muted);line-height:1.8;pointer-events:none}
.auth-plan-badge{font-size:12px;font-weight:700;align-self:flex-start;line-height:1.7;color:var(--accent-text);background:var(--surface);border:1px solid rgba(var(--brand-rgb),.2);border-radius:6px;padding:1px 7px;pointer-events:none}
.auth-plan-hint{font-size:14px;margin-top:15px;line-height:1.8}
.auth-choose-actions{display:flex;justify-content:flex-start;margin-top:21px}
.auth-modal-card .auth-primary{min-width:160px;box-shadow:0 5px 16px var(--soft)}
.auth-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 10px;min-width:0}
.auth-form>.form-group,.auth-form>fieldset,.auth-form>.auth-step-heading{grid-column:1/-1;margin:0;padding:0;border:0;min-width:0}
.auth-modal-card label:not(.auth-plan-card):not(.gateway-option),.auth-gateways>legend{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.auth-modal-card .form-control{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:16px;color:var(--ink);line-height:1.5}
.auth-modal-card .form-control:focus{border-color:var(--brand)}
.auth-modal-card .form-control[aria-invalid=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.field-hint{display:block;font-size:13px;color:var(--muted);line-height:1.8;margin-top:6px;font-weight:400}
.field-error{display:block;font-size:14px;line-height:1.8;margin-top:6px;color:var(--ink);font-weight:700}
.auth-error{padding:11px 13px;border:1px solid var(--line);border-right:3px solid var(--ink);background:var(--surface-2);border-radius:9px;font-size:14px;line-height:1.9;margin-bottom:17px}
.auth-password-field{position:relative}
.auth-password-field>.form-control{padding-right:53px}
.auth-modal-card .auth-eye{position:absolute;right:3px;top:3px;width:40px;min-height:40px;padding:0;border-radius:8px}
.password-help-row{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:6px}
.password-help-row .field-hint{margin:0;flex:1}
.auth-modal-card .auth-small-button{min-height:36px;padding:6px 9px;font-size:13px;border-radius:8px;flex-shrink:0}
.pwd-meter-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px;background:var(--surface-2)}
.pwd-meter-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.pwd-meter-heading>strong{font-size:13px;color:var(--accent-text)}
.pwd-bars{display:flex;gap:5px;margin:7px 0 0}
.pwd-seg{height:3px;flex:1;background:var(--line);border-radius:3px;transition:transform .2s,opacity .2s}
.pwd-seg.is-filled{background:var(--brand)}
.pwd-guide{margin-top:7px}
.pwd-guide>summary{font-size:13px;min-height:32px;cursor:pointer;color:var(--muted);padding:4px 0}
.pwd-reqs{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;font-size:13px;line-height:1.8;padding-top:5px}
.pwd-reqs>span:before{content:'';display:inline-block;width:4px;height:4px;border:1px solid var(--muted);border-radius:50%;margin-left:5px;vertical-align:middle}
.pwd-reqs>.met{color:var(--accent-text)}
.pwd-reqs>.met:before{background:var(--brand);border-color:var(--brand)}
.auth-gateways>legend{padding:0}
.gateway-selector{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gateway-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px;cursor:pointer}
.gateway-option>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.auth-submit{grid-column:1;align-self:end;max-width:260px}
.auth-back{grid-column:2;align-self:end}
.auth-single-submit{grid-column:1/-1;justify-self:start;min-width:175px}
.auth-modal-card button.is-loading:before{content:'';width:13px;height:13px;flex-shrink:0;border:2px solid rgba(255,255,255,.35);border-top-color:var(--white);border-radius:50%;animation:auth-spin .8s linear infinite}
.auth-order-summary{position:sticky;top:0;min-width:0;padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}
.auth-order-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:36px;font-size:14px;font-weight:700;margin-bottom:13px}
.auth-ticket{position:relative;padding:15px 14px;background:var(--surface);border:1px solid var(--line);border-radius:13px;overflow:hidden;isolation:isolate}
.auth-ticket:before{content:'';position:absolute;top:-30%;bottom:-30%;left:-100%;width:50%;background:linear-gradient(110deg,transparent,rgba(var(--brand-rgb),.07),transparent);animation:auth-ticket-light 8s var(--ease) infinite;pointer-events:none;z-index:-1}
.auth-ticket-art{display:grid;place-items:center;width:67px;height:65px;margin-bottom:9px}
.auth-plan-art{width:72px;height:65px;overflow:visible}
.auth-ticket-art>strong{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--soft);color:var(--accent-text);border:1px solid rgba(var(--brand-rgb),.2);font-size:33px}
.auth-ticket-kicker{font-size:12px;color:var(--muted)}
.auth-ticket h3{font-size:18px;margin:4px 0 5px;line-height:1.7;letter-spacing:0}
#auth-order-duration{font-size:13px;color:var(--muted)}
.auth-order-price{margin-top:15px;padding-top:13px;border-top:1px dashed var(--line)}
.auth-order-price>strong{display:block;font-size:25px;line-height:1.5;font-weight:700;font-variant-numeric:tabular-nums}
.auth-order-price>span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
#auth-order-capacity{font-size:13px;margin-top:12px;line-height:1.9;color:var(--muted)}
#auth-order-capacity:empty{display:none}
.auth-order-context{font-size:14px;line-height:1.9;color:var(--ink);margin-top:16px}
.auth-order-note{font-size:13px;line-height:1.9;margin-top:7px}
.auth-order-flow{display:flex;align-items:center;gap:8px;color:var(--accent-text);margin-top:15px;opacity:.7}
.auth-order-flow>.icon{width:18px;height:18px}
.auth-order-flow>span{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.auth-order-flow>span:before{content:'';position:absolute;right:0;top:0;width:15px;height:1px;background:var(--brand);animation:auth-flow 4s ease-in-out infinite}
.auth-order-flow>span:nth-of-type(2):before{animation-delay:.7s}
.auth-otp-form{row-gap:17px}
.otp-introduction{grid-column:1/-1;text-align:center;padding:4px 0 0}
.otp-phone-icon{display:grid;place-items:center;width:47px;height:47px;border:1px solid rgba(var(--brand-rgb),.2);border-radius:15px;background:var(--soft);color:var(--accent-text);margin:0 auto 12px}
.otp-phone-icon>.icon{width:28px;height:28px}
.otp-introduction h3{font-size:17px;line-height:1.9;letter-spacing:0}
.otp-introduction p{font-size:14px;line-height:1.9;margin-top:7px;overflow-wrap:anywhere}
.auth-modal-card .otp-input-group>label{text-align:center;font-size:14px;margin-bottom:9px}
.auth-modal-card #otp-code-input{display:block;max-width:260px;min-height:57px;margin:0 auto;text-align:center;font-size:25px;font-weight:700;letter-spacing:8px;line-height:1.4;padding:10px 12px 10px 20px;font-variant-numeric:tabular-nums;background:var(--surface-2)}
.otp-input-group>.field-error{text-align:center}
.auth-confirm-summary{grid-column:1/-1;padding:13px 14px;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;font-size:14px}
.auth-confirm-summary>div{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.auth-confirm-summary>div>span{color:var(--muted)}
.auth-confirm-summary>div>strong{font-size:14px;overflow-wrap:anywhere;text-align:left}
.auth-otp-help{grid-column:1/-1;font-size:13px;line-height:1.9;text-align:center}
.auth-modal-card[data-mode=login]{width:min(520px,100%)}
.auth-modal-card[data-mode=login] .auth-layout{display:block}
.auth-modal-card[data-mode=login] .auth-order-summary{display:none}

.auth-modal-card .form-group [role=status]{font-size:14px!important;line-height:1.8}
.auth-modal-card .form-group>small{line-height:1.8}
.auth-open main .motion-area,.auth-open main .motion-area::before,.auth-open main .motion-area::after,.auth-open main .motion-area *,.auth-open main .motion-area *::before,.auth-open main .motion-area *::after{animation-play-state:paused!important}
.auth-open .pointer-glow{opacity:0}
@keyframes auth-enter{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@keyframes auth-ticket-light{0%,50%{opacity:0;transform:translateX(0) skewX(-12deg)}65%{opacity:1}90%,100%{opacity:0;transform:translateX(550%) skewX(-12deg)}}
@keyframes auth-flow{0%,100%{opacity:0;transform:translateX(0)}35%{opacity:1}80%{opacity:0;transform:translateX(-70px)}}
.auth-ticket:before,.auth-order-flow>span:before,.auth-modal-card button.is-loading:before{animation-play-state:var(--motion-state,paused)}
@media(max-width:1000px){.auth-layout{grid-template-columns:minmax(0,1fr) 245px;gap:20px;padding:22px}.auth-order-summary{padding:15px}.auth-header{padding:20px 22px 17px}}
@media(max-width:820px){.auth-modal-card{width:min(650px,100%)}.auth-layout{grid-template-columns:minmax(0,1fr);gap:18px}.auth-modal-card[data-stage=plan] .auth-order-summary{display:none}.auth-order-summary{position:static;order:-1;display:grid;grid-template-columns:1fr;gap:7px;padding:13px 15px}.auth-order-heading{margin:0;min-height:30px}.auth-ticket{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}.auth-ticket:before,.auth-ticket-art,.auth-ticket-kicker,#auth-order-capacity,.auth-order-flow,.auth-order-note{display:none}.auth-ticket h3{font-size:16px;margin:0;grid-column:1;grid-row:1;align-self:center}.auth-ticket #auth-order-duration{grid-column:1;grid-row:2;font-size:13px}.auth-order-price{grid-column:2;grid-row:1/3;border:0;padding:0;margin:0;text-align:left;align-self:center}.auth-order-price>strong{font-size:21px}.auth-order-price>span{font-size:12px}.auth-order-context{font-size:13px;margin:0;line-height:1.9}.auth-tabs .auth-tab-btn{min-height:36px}.auth-header .auth-heading h2{font-size:21px}}
@media(max-width:620px){.modal-backdrop{padding:10px}.auth-modal-card{max-height:calc(100dvh - 20px);border-radius:20px;scroll-padding-top:105px}.auth-header{padding:16px;gap:10px}.auth-heading{gap:9px;align-items:flex-start}.auth-heading p{font-size:13px}.auth-brand-icon{width:33px;height:33px;border-radius:10px;margin-top:3px}.auth-brand-icon>.icon{width:22px;height:22px}.auth-header .auth-heading h2{font-size:19px}.auth-modal-card .auth-close{width:36px;min-width:36px;min-height:36px;border-radius:10px}.auth-modal-card .auth-tab-btn{font-size:13px;padding:6px 10px;min-height:34px}.auth-layout{padding:18px 16px;gap:16px}.auth-step-heading h3{font-size:17px}.auth-step-heading p{font-size:14px}.auth-plan-options{gap:10px}.auth-plan-card{padding:13px 12px;border-radius:13px;gap:8px}.auth-plan-card-heading{gap:6px;align-items:flex-start}.auth-plan-card-heading>strong{font-size:13px;line-height:1.9}.auth-choice-dot{width:15px;height:15px;margin-top:4px}.auth-choice-dot:after{inset:3px}.auth-plan-card-price{font-size:19px;line-height:1.6}.auth-plan-card-price>small{font-size:12px}.auth-plan-card-note{font-size:12px}.auth-plan-badge{font-size:12px}.auth-plan-hint{font-size:13px}.auth-choose-actions{margin-top:18px}.auth-choose-actions>.auth-primary{width:100%}.auth-form{row-gap:15px;column-gap:9px}.auth-modal-card .auth-submit{min-width:0;max-width:none;width:100%}.auth-modal-card .auth-back{padding-inline:11px;font-size:13px}.auth-modal-card .auth-primary{font-size:14px}.auth-order-price>strong{font-size:20px}.auth-order-summary{padding:12px 13px}.auth-order-heading{font-size:13px}.auth-ticket h3{font-size:15px}.auth-order-context{font-size:13px}.auth-modal-card .auth-small-button{font-size:12px;padding-inline:8px;min-height:34px}.field-hint{font-size:13px}.auth-otp-help{font-size:13px}.otp-introduction h3{font-size:16px}.auth-confirm-summary{font-size:13px}.auth-confirm-summary>div>strong{font-size:13px}.pwd-reqs{font-size:12px}.password-help-row{gap:8px}.password-help-row .field-hint{font-size:12px}}
@media(max-width:350px){.auth-header{padding:14px 12px}.auth-heading{gap:7px}.auth-heading p{font-size:12px}.auth-header .auth-heading h2{font-size:18px}.auth-brand-icon{display:none}.auth-layout{padding:16px 13px}.auth-plan-card{padding:12px 10px}.auth-plan-card-heading>strong{font-size:12px}.auth-plan-card-price{font-size:18px}.auth-plan-card-price>small{font-size:11px}.auth-plan-card-note{font-size:11px}.auth-order-price>strong{font-size:18px}.auth-ticket h3{font-size:14px}.pwd-reqs{grid-template-columns:1fr}.auth-modal-card .auth-primary{padding-inline:10px}.auth-modal-card .auth-back{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.auth-ticket:before,.auth-order-flow>span:before{display:none}.auth-modal-card button:hover,.auth-plan-card:hover{transform:none}}
/* Compact typography keeps the touch area generous. */
.auth-modal-card .auth-close,.auth-modal-card .auth-eye{width:44px;min-width:44px;min-height:44px}
.auth-modal-card .auth-close{padding:0}
.auth-modal-card .auth-eye{top:1px;right:1px;padding:0}
.auth-modal-card .auth-small-button,.auth-modal-card .auth-tab-btn{min-height:44px}
.auth-plan-card-heading>strong{font-size:14px}
.auth-plan-card-note,.field-hint,.auth-order-note,.auth-order-context,.auth-otp-help{font-size:14px}
.auth-plan-card-price>small,.auth-order-price>span{font-size:13px}
.password-help-row .field-hint{font-size:13px}
.auth-modal-card .form-group img[alt^="تصویر کد امنیتی"]{background:var(--white);border:1px solid var(--line);padding:4px}
/* Login has its own welcome scene and a two-step identity, separate from checkout. */
.auth-login-story{display:none}
.auth-modal-card[data-mode=login]{width:min(860px,100%)}
.auth-modal-card[data-mode=login] .auth-layout{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:25px;padding:25px}
.auth-login-form{row-gap:22px}
.login-welcome{padding-bottom:2px}
.login-eyebrow{display:inline-block;font-size:13px;line-height:1.8;color:var(--accent-text);margin-bottom:5px}
.auth-login-form .login-welcome h3{font-size:24px;line-height:1.5}
.auth-login-form .login-welcome p{font-size:14px;margin-top:7px}
.login-input-wrap{position:relative}
.login-input-wrap>.form-control{padding-right:43px}
.login-input-icon{position:absolute;right:13px;top:13px;display:grid;place-items:center;color:var(--accent-text);pointer-events:none}
.login-input-icon>.icon{width:19px;height:19px}
.login-next-hint{grid-column:1/-1;display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.9;padding:11px 12px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.14);border-radius:10px;color:var(--muted)}
.login-next-hint>.icon{width:17px;height:17px;color:var(--accent-text);flex-shrink:0;margin-top:3px}
.auth-modal-card[data-mode=login] #login-submit{width:100%;max-width:none;min-height:46px;position:relative;isolation:isolate;overflow:hidden;box-shadow:0 5px 18px var(--glow)}
#login-submit:after{content:'';position:absolute;bottom:0;left:-30%;height:2px;width:35%;background:linear-gradient(to right,transparent,rgba(255,255,255,.6),transparent);animation:login-button-light 5s var(--ease) infinite;pointer-events:none}
.auth-modal-card[data-mode=login] .auth-login-story{display:flex;flex-direction:column;align-self:stretch;position:relative;isolation:isolate;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);border-radius:19px;padding:19px 18px}
.auth-login-story:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(var(--brand-rgb),.08),transparent 65%);z-index:-1;pointer-events:none}
.login-story-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.login-story-signal{display:flex;align-items:center;gap:3px;height:15px;color:var(--brand)}
.login-story-signal>i{display:block;width:3px;height:7px;border-radius:3px;background:var(--brand)}
.login-story-signal>i:nth-child(2){height:13px}
.login-story-signal>i:nth-child(3){height:9px}
.login-scene{position:relative;display:grid;place-items:center;min-height:219px;margin:17px 0 15px}
.login-workspace{width:218px;max-width:100%;height:158px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 25px rgba(0,0,0,.04);overflow:hidden;position:relative;align-self:start;margin-top:8px}
.login-workspace-top{display:flex;align-items:center;gap:4px;height:31px;padding:0 11px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.login-workspace-top>span{width:48px;height:4px;background:var(--line);border-radius:3px;margin-left:auto}
.login-workspace-top>i{width:4px;height:4px;background:var(--brand);opacity:.4;border-radius:2px}
.login-workspace-body{display:grid;grid-template-columns:25px 1fr;gap:13px;padding:15px 13px}
.login-mini-nav{display:flex;align-items:center;flex-direction:column;gap:12px;padding-top:1px}
.login-mini-nav>i{width:15px;height:15px;border:1px solid var(--line);background:var(--surface-2);border-radius:5px}
.login-mini-nav>i:first-child{background:var(--soft);border-color:rgba(var(--brand-rgb),.3)}
.login-mini-content{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.login-mini-content>i{display:block;grid-column:1/-1;width:82%;height:4px;background:var(--line);border-radius:3px;margin-top:3px}
.login-mini-content>i+i{width:57%;margin:0}
.login-mini-content>span{height:41px;margin-top:4px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}
.login-workspace-light{position:absolute;top:31px;bottom:0;left:-40%;width:35%;background:linear-gradient(110deg,transparent,rgba(var(--brand-rgb),.1),transparent);animation:login-workspace-light 6s var(--ease) infinite;pointer-events:none}
.login-pet-pass{position:absolute;top:114px;left:50%;width:220px;max-width:calc(100% - 4px);transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:12px 13px;background:var(--surface);border:1px solid rgba(var(--brand-rgb),.25);border-radius:13px;box-shadow:0 12px 24px rgba(0,0,0,.065);animation:login-pass-float 5s ease-in-out infinite}
.login-pet-pass>img{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.login-pet-pass>span{flex:1;min-width:0}
.login-pet-pass strong{display:block;font-size:15px;line-height:1.7;color:var(--ink)}
.login-pet-pass small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.7}
.login-pet-pass>.icon{width:19px;height:19px;color:var(--accent-text);opacity:.7}
.login-story-copy{margin-top:auto;text-align:center}
.login-story-copy h3{font-size:18px;line-height:1.8;letter-spacing:0}
.login-story-copy p{font-size:14px;line-height:1.9;margin-top:8px}
.login-story-otp{display:none}
.login-story-foot{display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid var(--line);margin-top:18px;padding-top:13px;font-size:12px;color:var(--muted)}
.login-story-foot>i{width:22px;height:1px;background:var(--brand);opacity:.4;position:relative}
.login-story-foot>i:after{content:'';position:absolute;right:0;top:-1px;width:4px;height:3px;background:var(--brand);border-radius:2px;animation:login-trace 3s var(--ease) infinite}
.login-code-card{display:none;position:absolute;top:80px;left:50%;transform:translateX(-50%);width:197px;max-width:calc(100% - 8px);padding:15px 13px;background:var(--surface);border:1px solid rgba(var(--brand-rgb),.27);border-radius:15px;box-shadow:0 12px 24px rgba(0,0,0,.05);text-align:center}
.login-code-symbol{display:grid;place-items:center;width:36px;height:36px;background:var(--soft);border:1px solid rgba(var(--brand-rgb),.18);color:var(--accent-text);border-radius:11px;margin:0 auto 8px}
.login-code-symbol>.icon{width:22px;height:22px}
.login-code-card>span:nth-child(2){display:block;font-size:13px;font-weight:700;line-height:1.8}
.login-code-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:12px;direction:ltr}
.login-code-dots>i{display:block;width:7px;height:7px;background:var(--brand);border-radius:3px;animation:login-code-dot 3.4s ease-in-out infinite}
.login-code-dots>i:nth-child(2){animation-delay:.14s}
.login-code-dots>i:nth-child(3){animation-delay:.28s}
.login-code-dots>i:nth-child(4){animation-delay:.42s}
.login-code-dots>i:nth-child(5){animation-delay:.56s}
.login-code-dots>i:nth-child(6){animation-delay:.7s}
.auth-modal-card[data-mode=login][data-stage=otp] .login-pet-pass,.auth-modal-card[data-mode=login][data-stage=otp] .login-story-before{display:none}
.auth-modal-card[data-mode=login][data-stage=otp] .login-code-card,.auth-modal-card[data-mode=login][data-stage=otp] .login-story-otp{display:block}
.auth-modal-card[data-mode=login] .auth-otp-form{align-content:center;min-height:100%}
@keyframes login-workspace-light{0%,25%{opacity:0;transform:translateX(0)}40%{opacity:1}80%,100%{opacity:0;transform:translateX(450%)}}
@keyframes login-pass-float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
@keyframes login-trace{0%,100%{opacity:0;transform:translateX(0)}25%{opacity:1}80%{opacity:0;transform:translateX(-20px)}}
@keyframes login-code-dot{0%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}60%{opacity:.8;transform:translateY(0)}}
@keyframes login-button-light{0%,35%{opacity:0;transform:translateX(0)}50%{opacity:1}85%,100%{opacity:0;transform:translateX(450%)}}
.login-workspace-light,.login-pet-pass,.login-story-foot>i:after,.login-code-dots>i,#login-submit:after{animation-play-state:var(--motion-state,paused)}
@media(max-width:1000px){.auth-modal-card[data-mode=login] .auth-layout{grid-template-columns:minmax(0,1fr) 252px;gap:22px;padding:22px}.auth-login-story .login-scene{min-height:211px}.login-workspace{width:207px}.login-pet-pass{width:208px}.login-story-copy h3{font-size:17px}}
@media(max-width:720px){.auth-modal-card[data-mode=login]{width:min(570px,100%)}.auth-modal-card[data-mode=login] .auth-layout{grid-template-columns:minmax(0,1fr);gap:21px;padding:20px}.auth-modal-card[data-mode=login] .auth-login-story{order:-1;display:grid;grid-template-columns:133px minmax(0,1fr);gap:0 14px;padding:13px 14px;align-items:center}.login-story-heading,.login-story-foot{display:none}.auth-login-story .login-scene{grid-column:1;grid-row:1/3;min-height:122px;height:122px;margin:0}.login-workspace{width:126px;height:98px;border-radius:11px;margin-top:0}.login-workspace-top{height:21px;padding-inline:8px}.login-workspace-top>span{width:29px;height:3px}.login-workspace-top>i{width:3px;height:3px}.login-workspace-body{grid-template-columns:15px 1fr;gap:7px;padding:10px 8px}.login-mini-nav{gap:7px}.login-mini-nav>i{width:10px;height:10px;border-radius:3px}.login-mini-content{gap:4px}.login-mini-content>i{height:3px}.login-mini-content>span{height:22px;border-radius:4px}.login-pet-pass{top:65px;width:128px;max-width:100%;padding:8px 9px;gap:6px;border-radius:10px}.login-pet-pass>img{width:31px;height:31px}.login-pet-pass strong{font-size:13px}.login-pet-pass small{font-size:10px;margin-top:1px}.login-pet-pass>.icon{display:none}.login-story-copy{grid-column:2;grid-row:1/3;margin:0;text-align:right}.login-story-copy h3{font-size:16px;line-height:1.9}.login-story-copy p{font-size:13px;line-height:1.9;margin-top:7px}.login-story-copy p br{display:none}.login-code-card{top:35px;width:119px;max-width:100%;padding:9px 7px;border-radius:11px}.login-code-symbol{width:26px;height:26px;margin-bottom:5px;border-radius:8px}.login-code-symbol>.icon{width:16px;height:16px}.login-code-card>span:nth-child(2){font-size:11px}.login-code-dots{gap:5px;margin-top:8px}.login-code-dots>i{width:5px;height:5px;border-radius:2px}.auth-login-form{row-gap:18px}.auth-login-form .login-welcome h3{font-size:22px}.auth-modal-card[data-mode=login] .auth-otp-form{min-height:0}.login-next-hint{font-size:13px}}
@media(max-width:420px){.auth-modal-card[data-mode=login] .auth-layout{padding:18px 16px;gap:18px}.auth-modal-card[data-mode=login] .auth-login-story{grid-template-columns:111px minmax(0,1fr);gap:10px;padding:12px}.auth-login-story .login-scene{height:112px;min-height:112px}.login-workspace{width:110px;height:89px}.login-workspace-body{gap:6px;padding:8px 7px}.login-pet-pass{top:59px;width:112px;padding:7px;gap:4px}.login-pet-pass>img{width:28px;height:28px}.login-pet-pass strong{font-size:12px}.login-pet-pass small{font-size:9px}.login-story-copy h3{font-size:15px}.login-story-copy p{font-size:12px;line-height:1.85}.auth-login-form .login-welcome h3{font-size:21px}.login-code-card{width:107px;top:30px}.login-code-card>span:nth-child(2){font-size:10px}.login-code-dots{gap:4px}}
@media(max-width:350px){.auth-modal-card[data-mode=login] .auth-layout{padding:16px 13px}.auth-modal-card[data-mode=login] .auth-login-story{grid-template-columns:96px minmax(0,1fr);gap:9px;padding:11px}.login-workspace{width:95px;height:84px}.login-pet-pass{width:96px;top:55px;gap:4px;padding:7px 5px}.login-pet-pass>img{width:25px;height:25px}.login-pet-pass small{font-size:8px}.login-story-copy h3{font-size:14px}.login-story-copy p{font-size:11px}.login-code-card{width:93px;padding:8px 5px}.login-code-card>span:nth-child(2){font-size:9px}}
@media(prefers-reduced-motion:reduce){.login-workspace-light,.login-story-foot>i:after,#login-submit:after{display:none}.login-pet-pass{transform:translateX(-50%)}.login-code-dots>i{opacity:.8;transform:none}}
@media(max-width:720px){.auth-login-form .login-eyebrow,.auth-login-form .login-welcome>p{display:none}.auth-login-form{row-gap:16px}.login-next-hint{padding:0;border:0;background:transparent;font-size:13px}.auth-login-form .login-welcome h3{font-size:21px}}

/* A shared RTL journey: completed links, a current station and quiet next steps. */
.auth-flow-heading{flex-shrink:0;padding:14px 25px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.auth-stepper{display:flex;align-items:start;justify-content:center;list-style:none;margin:0 auto;padding:0;width:100%;max-width:650px}
.auth-stepper[hidden],.login-progress{display:none}
.auth-modal-card[data-mode=login] .login-progress{display:flex;max-width:510px}
.auth-stepper>li{position:relative;flex:1;min-width:0;display:grid;justify-items:center;align-content:start;gap:5px;text-align:center;color:var(--muted)}
.auth-stepper>li:not(:last-child):before,.auth-stepper>li:not(:last-child):after{content:"";position:absolute;top:17px;inset-inline-start:calc(50% + 24px);width:calc(100% - 48px);height:2px;border-radius:2px;background:var(--line);pointer-events:none}
.auth-stepper>li:not(:last-child):after{background:var(--brand);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.auth-stepper>li.is-complete:after{transform:scaleX(1)}
.auth-step-node{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);position:relative;transition:background .2s,border-color .2s,box-shadow .2s}
.auth-step-node>.icon{width:19px;height:19px;grid-area:1/1}
.auth-step-node>.auth-step-check{display:none}
.auth-stepper strong{font-size:13px;line-height:1.7;font-weight:500;white-space:nowrap}
.auth-step-state{display:block;font-size:12px;line-height:1.5;margin-top:-4px}
.auth-step-state>span{display:none}
.auth-stepper>li:not([aria-current]):not(.is-complete) .step-state-next{display:inline}
.auth-stepper>li[aria-current=step] .step-state-current,.auth-stepper>li.is-complete .step-state-complete{display:inline}
.auth-stepper>li[aria-current=step]{color:var(--ink)}
.auth-stepper>li[aria-current=step] strong{font-weight:700}
.auth-stepper>li[aria-current=step] .auth-step-node{color:var(--accent-text);background:var(--soft);border-color:rgba(var(--brand-rgb),.5);box-shadow:0 0 0 4px var(--surface),0 0 0 5px rgba(var(--brand-rgb),.15)}
.auth-stepper>li[aria-current=step] .auth-step-state{color:var(--accent-text)}
.auth-stepper>li.is-complete{color:var(--ink)}
.auth-stepper>li.is-complete .auth-step-state{color:var(--muted)}
.auth-stepper>li.is-complete .auth-step-node{background:var(--brand);color:var(--white);border-color:var(--brand)}
.auth-stepper>li.is-complete .auth-step-icon{display:none}
.auth-stepper>li.is-complete .auth-step-check{display:block}
.auth-account-switch{align-items:center;justify-content:center;gap:12px;margin-top:22px;padding-top:17px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.auth-account-switch>span{line-height:1.8}
.auth-account-switch .auth-tab-btn.active,.account-switch-login{display:none}
.auth-modal-card[data-mode=login] .account-switch-register{display:none}
.auth-modal-card[data-mode=login] .account-switch-login{display:inline}
.auth-modal-card .auth-account-switch .auth-tab-btn{min-height:44px;font-size:13px;padding:7px 12px;border-radius:9px}
.auth-account-switch .auth-tab-btn>.icon{width:15px;height:15px}
@media(max-width:620px){.auth-flow-heading{padding:13px 16px 11px}.auth-stepper{max-width:380px}.auth-stepper strong{font-size:12px}.auth-stepper>li{gap:6px}.auth-step-node{width:32px;height:32px;border-radius:10px}.auth-step-node>.icon{width:18px;height:18px}.auth-stepper>li:not(:last-child):before,.auth-stepper>li:not(:last-child):after{top:15px;inset-inline-start:calc(50% + 21px);width:calc(100% - 42px)}.auth-account-switch{margin-top:17px;padding-top:13px;gap:10px}}
@media(max-width:350px){.auth-flow-heading{padding-inline:10px}.auth-stepper strong{font-size:11px}.auth-step-state{font-size:11px}.auth-account-switch{gap:8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.auth-stepper>li:after,.auth-step-node{transition:none}}

/* The message preview uses the same neutral surfaces and fine outlines as the page. */
.sms-demo-grid{grid-template-columns:270px minmax(0,1fr);gap:40px;padding:28px 32px}
.sms-preview{position:relative;display:flex;flex-direction:column;align-items:center;gap:15px;padding:8px 0;min-width:0}
.sms-preview-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);line-height:1.7}
.sms-preview-label>.icon{width:17px;height:17px;color:var(--accent-text)}
.sms-preview-label>i{width:27px;height:1px;background:var(--brand);margin-inline-start:4px;opacity:.5}
.sms-handset{width:232px;max-width:100%;padding:6px;border:1px solid var(--line);border-radius:34px;background:var(--surface);box-shadow:0 15px 35px -20px rgba(0,0,0,.22),0 0 0 4px var(--soft)}
.sms-screen{position:relative;display:flex;flex-direction:column;aspect-ratio:230/480;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:27px;background:var(--surface-2);color:var(--ink)}
.sms-statusbar{display:flex;align-items:center;justify-content:space-between;position:relative;direction:ltr;height:37px;flex-shrink:0;padding:0 14px;font-size:11px;font-weight:700}
.sms-statusbar>svg{width:32px;height:12px}
.sms-camera{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:48px;height:13px;border-radius:20px;background:var(--sample-ink);box-shadow:inset 0 0 0 1px var(--line)}
.sms-sender{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;padding:8px 12px 12px;border-bottom:1px solid var(--line);background:var(--surface);flex-shrink:0}
.sms-sender-back{position:absolute;right:13px;top:30px;color:var(--accent-text);transform:rotate(180deg)}
.sms-sender-back>.icon{width:17px;height:17px}
.sms-sender-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;border:1px solid rgba(var(--brand-rgb),.2);background:var(--soft);color:var(--accent-text);margin-bottom:2px}
.sms-sender-avatar>.icon{width:23px;height:23px}
.sms-sender>strong{font-size:13px;line-height:1.7}
.sms-sender>small{font-size:11px;line-height:1.7;color:var(--muted)}
.sms-conversation{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;padding:14px 13px 12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sms-thread-date{text-align:center;font-size:10px;color:var(--muted);margin:0 0 3px;line-height:1.7;flex-shrink:0}
.sms-message{position:relative;align-self:flex-end;width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:15px 15px 15px 4px;background:var(--surface);color:var(--ink);flex-shrink:0;transition:border-color .2s,box-shadow .2s}
.sms-message>strong{display:block;font-size:13px;line-height:1.9;font-weight:700;overflow-wrap:anywhere}
.sms-message>p{font-size:12px;line-height:2;color:var(--ink);margin-top:5px;overflow-wrap:anywhere}
.sms-message.sent{border-color:rgba(var(--brand-rgb),.5);box-shadow:0 0 0 3px var(--soft)}
.sms-message-note{align-self:flex-end;max-width:100%;font-size:10px;line-height:1.9;color:var(--muted);padding-inline:2px;flex-shrink:0}
.sms-compose{display:flex;align-items:center;gap:9px;padding:10px 12px 22px;flex-shrink:0;border-top:1px solid var(--line);background:var(--surface);color:var(--muted)}
.sms-compose>span:first-child{font-size:22px;line-height:1}
.sms-compose>i{flex:1;padding:4px 11px;border:1px solid var(--line);border-radius:18px;font-size:11px;font-style:normal;line-height:1.6;background:var(--surface-2)}
.sms-compose .icon{width:18px;height:18px;color:var(--accent-text)}
.sms-home-indicator{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);height:3px;width:62px;border-radius:5px;background:var(--ink);opacity:.65}
.sms-preview-caption{font-size:12px;line-height:1.9;text-align:center;max-width:230px;color:var(--muted)}
/* Only the body scrolls; the shell and headings stay aligned with its rounded frame. */
.auth-body{display:block;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable both-edges;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 64%,var(--surface)) transparent;scroll-padding-block:20px;flex:0 1 auto}
.auth-body::-webkit-scrollbar{width:6px;height:0}
.auth-body::-webkit-scrollbar-track{background:transparent;margin-block:12px}
.auth-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 64%,var(--surface));border-radius:10px}
.auth-body::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.auth-content{min-height:0}
.auth-modal-card[data-mode=login] .auth-otp-form{min-height:0}
.auth-login-form{row-gap:18px}
.auth-login-form .login-welcome>p{display:none}
.auth-login-form .login-welcome h3{font-size:22px}
.login-next-hint{padding:8px 10px}
@media(min-width:821px) and (max-height:820px){.modal-backdrop{padding:16px}.auth-modal-card{max-height:calc(100dvh - 32px)}.auth-header{padding-block:13px 11px}.auth-layout,.auth-modal-card[data-mode=login] .auth-layout{padding-block:15px}.auth-order-summary{padding:14px}.auth-order-note,.auth-order-flow,.auth-ticket-kicker{display:none}.auth-order-heading{margin-bottom:9px}.auth-ticket-art{height:42px;margin-bottom:5px}.auth-plan-art{height:47px}.auth-ticket{padding:12px}.auth-order-price{padding-top:9px;margin-top:10px}.auth-order-context{margin-top:10px}.auth-plan-card{padding:10px;gap:7px}.auth-plan-picker{margin-top:10px}.auth-choose-actions{margin-top:12px}.auth-account-switch{margin-top:12px;padding-top:10px}.auth-login-story .login-scene{min-height:190px}}
@media(max-width:1000px){.sms-demo-grid{grid-template-columns:232px minmax(0,1fr);gap:26px;padding:25px}}
@media(max-width:720px){.sms-demo-grid{gap:27px;padding:24px 20px}.sms-preview{width:100%;gap:13px;padding:8px 0 0}.sms-handset{width:222px}.sms-preview-caption{max-width:250px}.auth-header{padding-block:13px}.auth-stepper>li{gap:5px}.auth-body{scroll-padding-block:16px}.auth-modal-card[data-mode=login] .auth-layout{padding-block:16px;gap:16px}.auth-login-form{row-gap:14px}.auth-account-switch{margin-top:12px;padding-top:8px}.auth-plan-picker{margin-top:14px}.auth-choose-actions{margin-top:11px}.login-next-hint{padding:0}}

@media(min-width:821px){#register-step1-form{grid-template-columns:repeat(2,minmax(0,1fr))}#register-step1-form>.form-group:nth-child(2),#register-step1-form>.form-group:nth-child(3){grid-column:auto}#register-step1-form>.auth-back{justify-self:end}}