:root{
    --green:#0ca66a;
    --green-dark:#088a57;
    --green-bright:#16c47f;
    --ink:#0d1712;
    --muted:#5f6b65;
    --site-font:"Inter",system-ui,-apple-system,sans-serif;
    --mint:#e7f5f0;
    --mint-border:#cdefdf;
    --light:#f3f8f5;
    --black:#000;
    --white:#fff;
    --grey:#777;
    --page-width:1320px;
    --feature-icon-size:56px;
    --feature-icon-symbol:17px;
    --radius:28px
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
main section[id]{
    scroll-margin-top:94px
}
body{
    margin:0;
    color:var(--black);
    background:var(--white);
    font-family:var(--site-font);
    font-size:16px;
    line-height:1.4;
    -webkit-font-smoothing:antialiased
}
h1,h2,h3,h4,h5,h6{
    line-height:1;
    font-weight:600
}
strong,b{
    font-weight:600
}
button,input{
    font:inherit
}
button,a{
    -webkit-tap-highlight-color:transparent
}
button{
    cursor:pointer
}
a{
    color:inherit;
    text-decoration:none
}
img{
    display:block;
    max-width:100%
}
.wrap{
    width:min(calc(100% - 120px),var(--page-width));
    margin-inline:auto
}
.soft-background{
    background:linear-gradient(115deg,#f0f7f3 46%,#e7f5f0 100%)
}
.announcement{
    background:#f0f7f3;
    font-size:16px
}
.announcement-inner{
    min-height:51px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.site-header{
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .2s
}
.site-header.scrolled{
    border-bottom-color:#e9eeeb
}
.header-inner{
    min-height:76px;
    display:flex;
    align-items:center;
    gap:45px
}
.logo{
    flex:none;
    width:128px
}
.logo img{
    width:100%
}
.main-nav{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    font-size:14px;
    font-weight:600
}
.main-nav a{
    padding:6px 12px;
    color:#4b4b4b;
    transition:color .2s
}
.main-nav a:hover{
    color:var(--green)
}
.main-nav a[aria-current="location"]{
    color:var(--green)
}
.footer-links a:hover{
    color:var(--green-bright)
}
.header-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:26px;
    white-space:nowrap
}
.login-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:14px
}
.login-link img{
    width:20px
}
.button{
    min-height:52px;
    padding:0 26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:32px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    transition:background .2s,color .2s,transform .2s,box-shadow .2s
}
.button:hover{
    transform:translateY(-2px)
}
.button.green{
    background:var(--green);
    color:#fff
}
.button.green:hover{
    background:var(--green-dark);
    box-shadow:0 10px 24px -10px rgba(12,166,106,.7)
}
.button:focus-visible,.phone-field:focus-within,.assistant-label:focus-within,summary:focus-visible,a:focus-visible{
    outline:3px solid var(--green-bright);
    outline-offset:3px
}
.button.black{
    background:var(--black);
    color:#fff
}
.button.black:hover{
    background:#222
}
.outline-button{
    background:transparent;
    color:var(--green);
    border-color:var(--green)
}
.outline-button:hover{
    background:var(--green);
    color:#fff
}
.menu-button{
    display:none
}
.hero{
    padding:64px 0 80px
}
.hero-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:center;
    gap:58px
}
.eyebrow{
    margin:0 0 22px;
    color:var(--green);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:14px;
    font-weight:600
}
.eyebrow:before{
    content:"";
    display:inline-block;
    width:9px;
    height:9px;
    margin-right:11px;
    border-radius:50%;
    background:currentColor;
    vertical-align:2px
}
.hero h1{
    max-width:690px;
    margin:0 0 26px;
    font-size:clamp(42px,4.1vw,60px);
    line-height:1;
    letter-spacing:-.028em;
    font-weight:600;
    text-wrap:balance
}
.hero-description{
    max-width:560px;
    margin:0 0 28px;
    color:#5f6b65;
    font-size:15px;
    line-height:1.5
}
.hero-tab-desc{
    max-width:500px;
    margin:0 0 36px;
    color:#2d3833;
    font-size:17px;
    line-height:1.5
}
.hero-heading,.hero-tab-desc{
    transition:opacity .3s ease,transform .3s ease
}
.hero-heading.fade-out,.hero-tab-desc.fade-out{
    opacity:0;
    transform:translateY(6px);
    position:absolute;
    pointer-events:none
}
.hero-heading.fade-in,.hero-tab-desc.fade-in{
    opacity:1;
    transform:translateY(0)
}
.hero-copy{
    position:relative
}
.product-tabs{
    margin:0 0 32px
}
.product-tabs-bar{
    display:flex;
    gap:8px;
    margin-bottom:16px;
    flex-wrap:wrap
}
.product-tab{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 20px;
    border-radius:50px;
    border:1px solid #d4dbd7;
    background:#fff;
    font-size:14px;
    font-weight:600;
    color:#3d5248;
    cursor:pointer;
    transition:all .2s
}
.product-tab:hover{
    border-color:var(--green);
    color:var(--green)
}
.product-tab.active{
    background:var(--green);
    border-color:var(--green);
    color:#fff
}
.product-tab img{
    width:18px;
    height:18px;
    opacity:.65
}
.product-tab.active img{
    filter:brightness(0) invert(1);
    opacity:1
}
.hero-visual-wrap{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:0
}
.hero-panel{
    min-height:0;
    transition:opacity .35s ease
}
.hero-panel.leaving{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none
}
@keyframes slideIn{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
}
.chat-bubble{
    opacity:0;
    transform:translateY(14px)
}
.animating .chat-bubble{
    animation:slideIn .4s ease forwards
}
.animating .chat-bubble:nth-child(1){animation-delay:.2s}
.animating .chat-bubble:nth-child(2){animation-delay:.7s}
.animating .chat-bubble:nth-child(3){animation-delay:1.2s}
.animating .chat-bubble:nth-child(4){animation-delay:1.7s}
.animating .chat-bubble:nth-child(5){animation-delay:2.2s}
.voice-line,.voice-mock-lead{
    opacity:0;
    transform:translateY(10px)
}
.animating .voice-line{
    animation:slideIn .5s ease forwards
}
.animating .voice-line:nth-child(1){animation-delay:.6s}
.animating .voice-line:nth-child(2){animation-delay:1.8s}
.animating .voice-line:nth-child(3){animation-delay:3s}
.animating .voice-mock-lead{
    animation:slideIn .5s ease forwards;
    animation-delay:4.2s
}
.chat-mock{
    position:relative;
    z-index:2;
    width:88%;
    max-width:340px;
    margin:auto;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 20px 60px -20px rgba(13,23,18,.18),0 0 0 1px #e2ece7
}
.chat-mock-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 20px;
    font-size:14px;
    font-weight:600;
    border-bottom:1px solid #edf2ef
}
.chat-mock-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green)
}
.chat-mock-body{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:20px 16px;
    min-height:200px
}
.chat-bubble{
    max-width:82%;
    padding:12px 16px;
    border-radius:18px;
    font-size:14px;
    line-height:1.45
}
.chat-ai{
    background:#f0f7f3;
    color:#1a2e22;
    align-self:flex-start;
    border-bottom-left-radius:6px
}
.chat-user{
    background:var(--green);
    color:#fff;
    align-self:flex-end;
    border-bottom-right-radius:6px
}
.chat-mock-input{
    padding:14px 20px;
    border-top:1px solid #edf2ef;
    font-size:14px;
    color:#999
}
.voice-mock{
    position:relative;
    z-index:2;
    width:88%;
    max-width:340px;
    margin:auto;
    border-radius:20px;
    overflow:hidden;
    background:#0d1712;
    color:#fff;
    box-shadow:0 20px 60px -20px rgba(13,23,18,.4)
}
.voice-mock-status{
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 20px 14px;
    font-size:14px;
    font-weight:600;
    color:var(--green-bright);
    letter-spacing:.03em
}
.voice-mock-pulse{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green-bright);
    animation:ring 2s ease-in-out infinite
}
.voice-mock-caller{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 20px 18px;
    border-bottom:1px solid #1e2e25
}
.voice-mock-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#1e3528;
    display:grid;
    place-items:center;
    font-weight:600;
    font-size:16px;
    color:var(--green-bright)
}
.voice-mock-caller strong{
    font-size:16px;
    font-weight:600
}
.voice-mock-caller>span{
    margin-left:auto;
    font-size:14px;
    color:#6b8b7a
}
.voice-mock-transcript{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px 20px
}
.voice-line{
    display:flex;
    gap:10px;
    font-size:14px;
    line-height:1.45
}
.voice-line b{
    flex:none;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    padding-top:2px;
    min-width:36px
}
.voice-ai b{
    color:var(--green-bright)
}
.voice-caller b{
    color:#8ba99a
}
.voice-line span{
    color:#c0d5c9
}
.voice-mock-lead{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 20px;
    background:#132119;
    font-size:14px;
    font-weight:600;
    color:var(--green-bright)
}
.voice-mock-lead img{
    width:16px;
    height:16px;
    filter:brightness(0) saturate(100%) invert(60%) sepia(70%) saturate(350%) hue-rotate(100deg) brightness(95%)
}
.call-row{
    display:flex;
    gap:12px
}
.call-row input{
    width:290px;
    min-width:0;
    min-height:61px;
    padding:0 21px;
    border:1px solid var(--black);
    border-radius:32px;
    background:transparent;
    text-align:center;
    color:var(--black);
    outline:none
}
.call-row input:focus{
    border-color:var(--green);
    box-shadow:0 0 0 3px #0e9f6e20
}
.call-row .button{
    min-height:58px
}
.small-note{
    margin:15px 0 0;
    color:var(--grey);
    font-size:16px
}
.hero-photo{
    position:relative;
    overflow:hidden;
    aspect-ratio:592/550;
    border-radius:28px;
    box-shadow:0 19px 40px #00000020
}
.hero-person{
    position:absolute;
    top:-3%;
    left:-10%;
    width:120%;
    height:120%;
    max-width:none;
    object-fit:cover
}
.recording,.hero-folder,.hero-controls{
    position:absolute
}
.recording{
    top:26px;
    left:24px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:16px;
    text-shadow:0 1px 3px #0005
}
.recording i{
    width:14px;
    height:14px;
    background:#0bc879;
    border-radius:50%
}
.hero-folder{
    top:24px;
    right:24px;
    width:57px;
    height:57px;
    border-radius:19px;
    display:grid;
    place-items:center;
    background:#ffffff38;
    backdrop-filter:blur(12px)
}
.hero-folder img{
    width:23px
}
.hero-controls{
    inset:auto 25px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px
}
.hero-controls span{
    display:grid;
    place-items:center;
    width:58px;
    height:58px
}
.hero-controls img{
    width:100%;
    height:100%
}
.facts{
    padding:60px 0 40px
}
.facts-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:#fff;
    border-radius:30px;
    box-shadow:0 20px 45px #00000010
}
.facts-grid>div{
    min-height:165px;
    padding:35px 37px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.facts-grid>div+div{
    border-left:1px solid #e8e8e8
}
.facts-grid strong{
    font-size:38px;
    letter-spacing:-.03em;
    line-height:1.4;
    font-variant-numeric:tabular-nums
}
.facts-grid span{
    margin-top:14px;
    color:var(--muted);
    font-size:15px;
    line-height:1.4
}
.section-pad{
    padding:112px 0
}
.section-pad h2{
    margin:0;
    font-size:44px;
    line-height:1;
    letter-spacing:-.028em;
    font-weight:600;
    text-wrap:balance
}
.steps{
    padding-top:78px
}
.steps h2{
    margin-bottom:83px
}
.timeline{
    position:relative;
    height:2px;
    background:repeating-linear-gradient(90deg,#8edaba 0 8px,transparent 8px 14px);
    background-size:14px 2px;
    animation:flow 1.1s linear infinite
}
@keyframes flow{
    to{background-position:14px 0}
}
.step-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.step-card{
    position:relative;
    min-height:0;
    margin-top:44px;
    padding:25px 25px 27px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    background:#fff;
    border-radius:30px;
    box-shadow:0 15px 35px #00000008
}
.time-pill{
    position:absolute;
    top:-68px;
    left:0;
    min-width:97px;
    height:44px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--green);
    border:1px solid var(--green);
    border-radius:25px;
    color:#fff;
    font-size:15px
}
.time-pill.outline{
    background:#fff;
    border-color:#d4dbd7;
    color:var(--green)
}
.time-pill img{
    width:16px;
    height:16px;
    flex:none
}
.step-copy{
    margin-top:30px
}
.round-icon{
    display:grid;
    place-items:center;
    width:var(--feature-icon-size);
    height:var(--feature-icon-size);
    border-radius:50%;
    background:var(--mint)
}
.round-icon img{
    width:var(--feature-icon-symbol);
    height:var(--feature-icon-symbol);
    object-fit:contain
}
.step-card h3{
    max-width:330px;
    margin:0 0 15px;
    font-size:23px;
    line-height:1.25;
    letter-spacing:-.02em
}
.step-card p{
    margin:0;
    color:#2d3833;
    font-size:16px;
    line-height:1.4;
    transition:opacity .25s
}
.promise{
    min-height:110px;
    margin-top:24px;
    padding:20px 24px;
    display:flex;
    align-items:center;
    gap:17px;
    border:1px solid var(--mint-border);
    border-radius:30px;
    background:var(--mint)
}
.promise-icon{
    width:var(--feature-icon-size);
    height:var(--feature-icon-size);
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff
}
.promise-icon img{
    width:var(--feature-icon-symbol)
}
.promise strong{
    font-size:22px
}
.promise p{
    margin:6px 0 0;
    font-size:16px
}
.assistant-label{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    user-select:none;
    padding:14px 18px 14px 22px;
    border-radius:35px;
    background:#fff;
    border:1px solid #d4dbd7;
    text-transform:uppercase;
    white-space:nowrap;
    letter-spacing:.12em;
    font-size:14px;
    font-weight:600
}
.assistant-label input{
    position:absolute;
    opacity:0;
    pointer-events:none
}
.assistant-label i{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
    margin-left:14px;
    border-radius:12px;
    background:#c5d3cc;
    transition:background .2s
}
.assistant-label i:after{
    position:absolute;
    left:3px;
    top:3px;
    content:"";
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
    transition:transform .2s
}
.assistant-label input:checked+i{
    background:var(--green)
}
.assistant-label input:checked+i:after{
    transform:translateX(20px)
}
.product{
    background:linear-gradient(100deg,#e6f8f0 0,#fff 68%)
}
.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:35px;
    margin-bottom:56px
}
.section-head .button{
    margin-bottom:10px
}
.section-head h2{
    max-width:650px
}
.section-intro{
    max-width:500px;
    margin:31px 0 0;
    font-size:17px
}
.product-list{
    display:grid;
    gap:24px
}
.product-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    overflow:hidden;
    padding:24px;
    border-radius:30px;
    background:var(--light)
}
.product-card.reverse .product-copy{
    order:2
}
.product-card.reverse .product-image{
    order:1
}
.product-copy{
    display:flex;
    flex-direction:column;
    align-items:start;
    padding:2px 0 3px
}
.card-number{
    color:var(--green);
    font-size:17px;
    font-weight:600
}
.product-copy h3{
    margin:15px 0 17px;
    font-size:30px;
    letter-spacing:-.03em
}
.product-copy h4{
    margin:0 0 17px;
    font-size:23px;
    letter-spacing:-.02em
}
.product-copy p{
    max-width:500px;
    margin:0;
    color:#2d3833;
    font-size:17px;
    line-height:1.4
}
.product-copy .button{
    min-height:58px;
    margin-top:28px;
    padding-inline:24px
}
.product-image{
    min-width:0;
    min-height:320px;
    overflow:hidden;
    border-radius:25px;
    background:var(--green)
}
.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}
.product-image .pv-inner{
    transition:transform .1s linear;
    will-change:transform
}
.included{
    padding-top:95px
}
.section-head.compact .section-intro{
    max-width:600px;
    margin-top:20px;
    font-size:16px
}
.section-head.compact{
    align-items:end
}
.included-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding:24px;
    border-radius:30px;
    background:var(--light)
}
.included-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px
}
.included-item{
    min-height:175px;
    padding:25px;
    display:flex;
    flex-direction:column;
    gap:16px;
    background:#fff;
    border-radius:29px;
    box-shadow:0 13px 27px #00000008
}
.included-item .round-icon{
    background:#d5f3e7
}
.included-item h3{
    max-width:235px;
    margin:0 0 6px;
    font-size:20px;
    line-height:1.25
}
.included-item p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.4
}
.dashboard-image{
    position:relative;
    overflow:hidden;
    border-radius:29px;
    background:var(--mint)
}
.dashboard-image img{
    position:absolute;
    top:-3%;
    left:-8%;
    width:116%;
    height:116%;
    max-width:none;
    object-fit:cover
}
.demo-banner{
    min-height:373px;
    margin-top:45px;
    margin-bottom:50px;
    padding:57px 20px 45px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:28px;
    background:var(--green);
    color:#fff;
    text-align:center;
    box-shadow:0 22px 35px #00000023
}
.demo-banner .eyebrow{
    margin-bottom:16px;
    color:#fff
}
.demo-banner h2{
    margin:0;
    font-size:44px;
    letter-spacing:-.04em
}
.demo-banner>p:not(.eyebrow){
    width:90%;
    margin:18px 0 38px;
    font-size:17px
}
.demo-banner .call-row input{
    border-color:#fff;
    color:#fff
}
.demo-banner .call-row input::placeholder{
    color:#fff
}
.demo-banner>span{
    margin-top:20px;
    font-size:16px
}
.demo-banner .call-row .button{
    min-width:290px
}
.install{
    padding-top:76px;
    background:linear-gradient(110deg,#ebfaf4,#fff 50%)
}
.code-panel{
    min-height:400px;
    padding:75px 78px 48px;
    border-radius:30px;
    background:var(--light);
    text-align:center
}
.code-window{
    max-width:1150px;
    margin:auto;
    padding:0 24px 30px;
    border-radius:30px;
    background:#000;
    color:#fff;
    text-align:left
}
.code-header{
    min-height:91px;
    display:flex;
    align-items:center;
    gap:23px;
    border-bottom:1px solid #333
}
.window-dots{
    display:flex;
    gap:7px
}
.window-dots i{
    width:13px;
    height:13px;
    border-radius:50%;
    background:#ff5c56
}
.window-dots i:nth-child(2){
    background:#ffcf24
}
.window-dots i:nth-child(3){
    background:#2cc56f
}
.code-header button{
    margin-left:auto;
    padding:10px 18px;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    border-radius:25px;
    background:var(--green);
    color:#fff
}
.code-header button img{
    width:17px
}
.code-window pre{
    overflow:auto;
    margin:55px 0 0;
    font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace
}
.line-number{
    color:#a1a1a1
}
.code-green{
    color:#10c888
}
.code-panel>p{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:24px 0 0;
    font-size:16px
}
.check-dot{
    display:inline-grid;
    place-items:center;
    width:28px;
    height:28px;
    flex:none;
    border-radius:50%;
    background:var(--green);
    color:#fff;
    font-weight:600
}
.check-dot img{
    width:18px
}
.check-dot svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round
}
.pricing{
    background:linear-gradient(105deg,#eaf8f3,#fff 60%,#e8f7f0)
}
.pricing .section-head{
    margin-bottom:50px
}
.billing-switch{
    display:flex;
    padding:3px;
    border-radius:28px;
    background:#eee
}
.billing-switch button{
    min-width:157px;
    min-height:52px;
    border:0;
    border-radius:27px;
    background:transparent;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:14px;
    font-weight:600
}
.billing-switch button.selected{
    background:var(--green);
    color:#fff
}
.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.price-card{
    min-height:0;
    padding:27px 24px;
    display:flex;
    flex-direction:column;
    border:1px solid transparent;
    border-radius:30px;
    background:#fff;
    box-shadow:0 17px 30px #0000000a
}
.price-card.featured{
    border-color:var(--green);
    background:var(--mint)
}
.plan-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px
}
.plan-heading h3{
    margin:0;
    font-size:30px;
    letter-spacing:-.04em
}
.plan-heading span{
    padding:7px 15px;
    border-radius:18px;
    background:var(--green);
    color:#fff;
    white-space:nowrap;
    font-size:14px
}
.plan-description{
    max-width:280px;
    min-height:49px;
    margin:11px 0 23px;
    font-size:16px
}
.plan-price{
    display:flex;
    align-items:baseline;
    gap:5px
}
.plan-price strong{
    font-size:52px;
    line-height:1.4;
    letter-spacing:-.035em;
    font-variant-numeric:tabular-nums
}
.plan-price span,.plan-usage small{
    color:#888;
    font-size:16px;
    font-weight:400
}
.plan-usage{
    margin-top:26px;
    padding-top:24px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    border-top:1px solid #e7e7e7
}
.plan-usage div{
    display:grid;
    gap:4px
}
.plan-usage strong{
    font-size:26px;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums
}
.plan-usage span{
    color:var(--muted);
    font-size:14px
}
.price-card ul{
    display:grid;
    gap:12px;
    margin:28px 0 32px;
    padding:0;
    list-style:none
}
.price-card li{
    display:flex;
    align-items:start;
    gap:9px;
    font-size:15px
}
.price-card li img{
    width:18px;
    height:18px;
    flex:none
}
.price-card .button{
    width:100%;
    margin-top:auto
}
.assurance{
    display:grid;
    grid-template-columns:1.7fr .7fr .75fr .75fr;
    margin-top:17px;
    padding:20px 22px;
    border:1px solid var(--mint-border);
    border-radius:29px;
    background:#fff
}
.assurance>div{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 19px;
    font-size:15px
}
.assurance>div+div{
    border-left:1px solid #e8e8e8
}
.assurance>div:first-child{
    padding-left:0
}
.assurance>div:last-child{
    padding-right:0
}
.faq{
    background:linear-gradient(105deg,#f0f7f3,#e7f5f0)
}
.faq h2{
    margin-bottom:60px
}
.faq-list{
    display:grid;
    gap:24px
}
.faq-list details{
    padding:22px 25px;
    border-radius:30px;
    background:#fff;
    box-shadow:0 13px 30px #00000008
}
.faq-list summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    list-style:none;
    cursor:pointer;
    font-size:20px;
    font-weight:600
}
.faq-list summary::-webkit-details-marker{
    display:none
}
.faq-list p{
    max-width:1150px;
    margin:0;
    font-size:16px;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .35s ease,opacity .25s ease,margin .35s ease
}
.faq-list details[open] p{
    max-height:300px;
    opacity:1;
    margin:19px 0 0
}
.faq-toggle{
    width:32px;
    height:32px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--green)
}
.faq-toggle img{
    width:19px;
    height:19px;
    transition:transform .2s
}
.faq-list details[open] .faq-toggle img{
    transform:rotate(45deg)
}
.site-footer{
    padding:55px 0 35px;
    background:#000;
    color:#fff
}
.footer-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-bottom:42px;
    border-bottom:1px solid #333
}
.footer-cta h2{
    margin:0 0 22px;
    font-size:44px;
    letter-spacing:-.04em
}
.footer-cta p{
    margin:0;
    font-size:16px
}
.footer-cta>div:last-child{
    min-width:335px
}
.footer-cta>div:last-child p{
    margin-bottom:22px;
    font-weight:600
}
.footer-cta .title-accent{
    color:var(--green-bright)
}
.footer-cta strong{
    color:#0bc384
}
.footer-cta .button{
    width:100%
}
.footer-links{
    min-height:114px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    border-bottom:1px solid #333
}
.footer-links .logo{
    width:128px
}
.footer-links .logo img{
    width:100%
}
.footer-links nav,.legal-links{
    display:flex;
    align-items:center;
    gap:28px;
    white-space:nowrap;
    font-size:14px;
    font-weight:600
}
.legal-links{
    color:#888;
    font-weight:400
}
.legal-links a{
    transition:color .2s
}
.copyright{
    padding-top:28px;
    color:#8a8a8a;
    font-size:14px;
    line-height:1.4
}
@media(max-width:1250px){
    .wrap{
        width:min(calc(100% - 72px),var(--page-width))
    }
    .header-inner{
        gap:25px
    }
    .logo{
        width:124px
    }
    .header-actions{
        gap:15px
    }
    .header-actions .button{
        padding-inline:20px
    }
    .hero-grid{
        gap:30px
    }
    .hero h1{
        font-size:clamp(42px,4.5vw,58px)
    }
    .call-row .button{
        min-width:220px
    }
    .footer-links{
        flex-wrap:wrap;
        padding:25px 0
    }
    .legal-links{
        width:100%
    }
}
@media(max-width:900px){
    .wrap{
        width:min(calc(100% - 40px),var(--page-width))
    }
    .announcement-inner{
        min-height:42px;
        font-size:14px
    }
    .header-inner{
        min-height:76px
    }
    .main-nav{
        display:none;
        position:absolute;
        z-index:20;
        top:100%;
        left:0;
        right:0;
        padding:20px;
        flex-direction:column;
        align-items:stretch;
        background:#fff;
        box-shadow:0 12px 20px #0002
    }
    .main-nav a[aria-current="location"]{
        background:var(--light);
        border-radius:8px
    }
    .main-nav.open{
        display:flex
    }
    .header-actions{
        margin-left:auto
    }
    .header-actions .button{
        min-height:45px;
        font-size:14px
    }
    .menu-button{
        width:40px;
        height:40px;
        padding:8px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        border:0;
        background:transparent
    }
    .menu-button span{
        width:100%;
        height:2px;
        background:#000
    }
    .hero{
        padding:65px 0
    }
    .hero-grid{
        grid-template-columns:1fr 1fr
    }
    .hero h1{
        font-size:40px
    }
    .hero h1 br{
        display:none
    }
    .hero-description{
        font-size:15px
    }
    .call-row{
        flex-wrap:wrap
    }
    .call-row input,.call-row .button{
        width:100%;
        min-width:0
    }
    .step-card{
        min-height:360px
    }
    .step-card h3{
        font-size:20px
    }
    .product-copy h3{
        font-size:26px
    }
    .product-copy h4{
        font-size:19px
    }
    .included-item{
        min-height:140px
    }
    .included-item h3{
        font-size:17px
    }
    .price-card{
        padding:22px 16px
    }
    .plan-heading h3{
        font-size:24px
    }
    .plan-heading span{
        font-size:14px
    }
    .price-card li{
        font-size:14px
    }
    .assurance{
        grid-template-columns:repeat(2,1fr);
        gap:20px
    }
    .assurance>div{
        border:0!important;
        padding:0
    }
    .footer-cta h2{
        font-size:34px
    }
}
@media(max-width:680px){
    .announcement-inner>span:first-child{
        max-width:290px
    }
    .header-actions .login-link{
        display:none
    }
    .header-actions .button{
        padding:0 13px;
        letter-spacing:.06em
    }
    .logo{
        width:112px
    }
    .hero-grid{
        grid-template-columns:1fr;
        gap:38px
    }
    .hero h1{
        font-size:clamp(39px,11vw,56px)
    }
    .hero h1 br{
        display:none
    }
    .hero-photo{
        max-width:500px
    }
    .call-row{
        display:grid;
        grid-template-columns:1fr
    }
    .section-pad{
        padding:76px 0
    }
    .section-pad h2{
        font-size:34px
    }
    .facts{
        padding:35px 0
    }
    .facts-grid{
        grid-template-columns:1fr
    }
    .facts-grid>div{
        min-height:105px;
        padding:22px 26px
    }
    .facts-grid>div+div{
        border-left:0;
        border-top:1px solid #eee
    }
    .facts-grid strong{
        font-size:30px
    }
    .facts-grid span{
        margin-top:7px
    }
    .steps h2{
        margin-bottom:30px
    }
    .timeline{
        display:none
    }
    .step-grid{
        grid-template-columns:1fr;
        gap:24px
    }
    .step-card{
        min-height:230px;
        margin-top:26px
    }
    .time-pill{
        top:-25px
    }
    .promise{
        align-items:flex-start;
        flex-wrap:wrap
    }
    .assistant-label{
        margin-left:0
    }
    .section-head{
        display:block
    }
    .section-head .button{
        margin-top:25px
    }
    .section-intro{
        margin-top:18px
    }
    .product-card{
        display:flex;
        flex-direction:column;
        gap:20px;
        padding:20px
    }
    .product-card.reverse .product-copy,.product-card.reverse .product-image{
        order:initial
    }
    .product-image{
        min-height:240px
    }
    .included-panel{
        grid-template-columns:1fr
    }
    .included-item{
        min-height:130px;
        padding:18px
    }
    .dashboard-image{
        min-height:260px
    }
    .demo-banner{
        width:calc(100% - 40px);
        min-height:0;
        margin-top:15px;
        padding:50px 20px
    }
    .demo-banner .call-row{
        width:100%
    }
    .install{
        padding-top:60px
    }
    .code-panel{
        min-height:0;
        padding:25px 15px
    }
    .code-window{
        padding-inline:15px
    }
    .code-window pre{
        margin-top:25px;
        font-size:14px
    }
    .billing-switch{
        margin-top:25px;
        width:max-content
    }
    .pricing-grid{
        grid-template-columns:1fr
    }
    .price-card{
        min-height:0;
        padding:28px
    }
    .price-card ul{
        margin:30px 0
    }
    .faq h2{
        margin-bottom:35px
    }
    .faq-list summary{
        font-size:18px
    }
    .footer-cta{
        display:block
    }
    .footer-cta>div:last-child{
        min-width:0;
        margin-top:28px
    }
    .footer-links{
        display:grid;
        gap:20px
    }
    .footer-links nav,.legal-links{
        flex-wrap:wrap;
        gap:15px
    }
    .footer-links .logo img{
        width:112px
    }
}
@media(max-width:420px){
    .wrap{
        width:calc(100% - 32px)
    }
    .announcement-inner>span:first-child{
        font-size:14px
    }
    .header-inner{
        gap:12px
    }
    .hero{
        padding-top:48px
    }
    .call-row{
        grid-template-columns:1fr
    }
    .hero-controls span{
        width:45px;
        height:45px
    }
    .hero-controls img{
        width:100%;
        height:100%
    }
    .hero-controls{
        inset:auto 14px 14px
    }
    .included-grid{
        gap:10px
    }
    .included-item h3{
        font-size:15px
    }
    .demo-banner{
        width:calc(100% - 32px)
    }
    .assurance{
        grid-template-columns:1fr
    }
}
.hero h1,.section-pad h2,.demo-banner h2,.footer-cta h2{
    font-weight:600
}
.language-links{
    display:flex;
    align-items:center;
    gap:10px
}
.language-links a{
    font-size:15px
}
.language-links a[aria-current="page"]{
    font-weight:600
}
.language-links a:not(:last-child):after{
    content:"/";
    margin-left:10px;
    color:#aaa
}

/* ---------- phone field ---------- */
.phone-field{
    position:relative;
    flex:1 1 320px;
    min-width:0;
    max-width:380px;
    height:58px;
    display:flex;
    align-items:center;
    border:1px solid #d4dbd7;
    border-radius:32px;
    background:#fff;
    transition:border-color .2s,box-shadow .2s
}
.phone-field:focus-within{
    border-color:var(--green);
    box-shadow:0 0 0 4px rgba(12,166,106,.14);
    outline:none
}
.phone-field select{
    display:none
}
.country-trigger{
    flex:none;
    display:flex;
    align-items:center;
    gap:6px;
    height:100%;
    padding:0 6px 0 18px;
    border:0;
    border-radius:32px 0 0 32px;
    background:transparent;
    color:var(--ink);
    font:600 15px/1.4 var(--site-font);
    cursor:pointer;
    white-space:nowrap
}
.country-trigger::after{
    content:"";
    display:block;
    width:10px;
    height:10px;
    background:url("/assets/arrow_down.svg") no-repeat center/contain;
    opacity:.5
}
.country-dropdown{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    z-index:40;
    width:280px;
    max-height:320px;
    display:none;
    flex-direction:column;
    background:#fff;
    border:1px solid #d4dbd7;
    border-radius:16px;
    box-shadow:0 12px 32px #0001,0 4px 12px #0001;
    overflow:hidden
}
.country-dropdown.open{
    display:flex
}
.country-search-wrap{
    padding:10px 12px;
    border-bottom:1px solid #edf2ef
}
.country-search{
    width:100%;
    padding:8px 12px;
    border:1px solid #d4dbd7;
    border-radius:10px;
    font:600 14px/1.4 var(--site-font);
    color:var(--ink);
    outline:none;
    background:#fafbfa
}
.country-search:focus{
    border-color:var(--green)
}
.country-search::placeholder{
    color:#9aa6a0;
    font-weight:400
}
.country-list{
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:4px
}
.country-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:10px;
    font:600 14px/1.4 var(--site-font);
    color:var(--ink);
    cursor:pointer;
    transition:background .15s
}
.country-option:hover{
    background:var(--light)
}
.country-option.selected{
    background:var(--light);
    color:var(--green)
}
.country-option .co-prefix{
    margin-left:auto;
    color:#8a9690;
    font-weight:400
}
.phone-sep{
    width:1px;
    height:26px;
    flex:none;
    background:#d9e0dc
}
.call-row .phone-field input{
    flex:1;
    width:auto;
    min-width:0;
    height:100%;
    min-height:0;
    padding:0 20px 0 14px;
    border:0;
    border-radius:0 32px 32px 0;
    background:transparent;
    box-shadow:none;
    text-align:left;
    color:var(--ink);
    font:600 16px/1.4 var(--site-font);
    letter-spacing:.01em;
    outline:none
}
.phone-field input::placeholder{
    color:#9aa6a0
}
.demo-banner .phone-field{
    border-color:#fff;
    background:#fff
}
.demo-banner .phone-field:focus-within{
    box-shadow:0 0 0 4px rgba(255,255,255,.35)
}
.demo-banner .call-row{
    justify-content:center;
    width:min(100%,640px)
}
.demo-call-form{
    flex-wrap:wrap
}
.demo-call-form .button{
    font-family:inherit
}
.demo-call-form .button:disabled{
    opacity:.65;
    cursor:wait
}
.hero .demo-call-form .button.green:not(:hover):not(:focus-visible):not(:disabled){
    animation:hero-cta-pulse 3.2s ease-out infinite
}
@keyframes hero-cta-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(12,166,106,0)}
    35%{box-shadow:0 0 0 6px rgba(12,166,106,.16)}
    70%{box-shadow:0 0 0 11px rgba(12,166,106,0)}
}
.phone-field.is-invalid,.phone-field.is-invalid:focus-within{
    border-color:#c93636;
    box-shadow:0 0 0 4px rgba(201,54,54,.2)
}
.demo-call-message{
    flex-basis:100%;
    margin:0;
    font-size:14px;
    text-align:left
}
.demo-call-message.is-error{
    color:#c93636
}
.demo-banner .demo-call-message.is-error{
    color:#fff;
    font-weight:600
}
.demo-call-security{
    flex-basis:100%;
    display:flex;
    justify-content:center
}

/* ---------- hero demo ---------- */
.hero-visual{
    position:relative;
    aspect-ratio:1/1;
    max-height:600px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:32px;
    background:radial-gradient(circle at 58% 42%,#d4f2e4 0,#e8f6ef 45%,#f3f8f5 100%);
    box-shadow:inset 0 0 0 1px #dcefe6
}
.hero-rings{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    transition:opacity .4s
}
.hero-rings i{
    position:absolute;
    left:50%;
    top:50%;
    width:58%;
    aspect-ratio:1;
    margin:-29% 0 0 -29%;
    border:1.5px solid var(--green);
    border-radius:50%;
    opacity:0;
    animation:ring 3.6s cubic-bezier(.2,.6,.3,1) infinite
}
.hero-rings i:nth-child(2){animation-delay:1.2s}
.hero-rings i:nth-child(3){animation-delay:2.4s}
@keyframes ring{
    0%{transform:scale(.62);opacity:.5}
    100%{transform:scale(1.45);opacity:0}
}
[data-state="ai"] .hero-rings,[data-state="done"] .hero-rings{
    opacity:0
}
.device{
    position:absolute;
    z-index:2;
    top:7%;
    bottom:7%;
    left:50%;
    margin-left:-19%;
    aspect-ratio:9/18.5;
    padding:9px;
    border-radius:42px;
    background:#0b0f0d;
    box-shadow:0 40px 70px -30px rgba(13,23,18,.6),0 0 0 1px #1d2420;
    transform:translateX(18%)
}
.device-screen{
    position:relative;
    height:100%;
    padding:48px 16px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
    border-radius:34px;
    background:radial-gradient(120% 70% at 50% 0%,#11402e 0,#101814 55%,#0a0d0b 100%);
    color:#fff;
    text-align:center
}
.device-screen:before{
    content:"";
    position:absolute;
    top:11px;
    left:50%;
    width:84px;
    height:24px;
    margin-left:-42px;
    border-radius:14px;
    background:#000
}
.scr-label{
    color:var(--green-bright);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:14px;
    font-weight:600
}
.scr-view{
    display:none;
    flex:1;
    width:100%;
    flex-direction:column;
    align-items:center
}
[data-state="static"] .scr-ring,[data-state="ring"] .scr-ring,
[data-state="ai"] .scr-ai,[data-state="done"] .scr-ai{
    display:flex;
    animation:screen-in .35s ease both
}
@keyframes screen-in{
    from{opacity:0;transform:translateY(6px)}
}
.scr-title{
    margin-top:14px;
    font-size:16px;
    line-height:1.4;
    letter-spacing:-.02em;
    font-weight:600
}
.scr-sub{
    margin-top:7px;
    color:#a9b8b0;
    font:600 14px/1.4 var(--site-font)
}
.scr-whisper{
    width:100%;
    margin:22px 0 0;
    padding:11px 13px;
    border-radius:14px;
    background:rgba(255,255,255,.07);
    color:#dde6e1;
    font-size:14px;
    line-height:1.4;
    text-align:left
}
.scr-whisper small{
    display:block;
    margin-bottom:3px;
    color:#7f8f87;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:14px
}
.scr-status{
    margin-top:auto;
    color:#a9b8b0;
    font:600 14px/1.4 var(--site-font);
    font-variant-numeric:tabular-nums
}
.scr-buttons{
    width:100%;
    margin-top:16px;
    padding:0 8px;
    display:flex;
    justify-content:space-between
}
.scr-btn{
    display:grid;
    justify-items:center;
    gap:7px
}
.scr-btn b{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:50%;
    transition:transform .15s,box-shadow .15s
}
.scr-btn img{
    width:19px;
    height:19px;
    filter:brightness(0) invert(1)
}
.scr-btn.decline b{
    background:#e5484d
}
.scr-btn.decline img{
    transform:rotate(135deg)
}
.scr-btn.accept b{
    background:var(--green-bright)
}
.scr-btn em{
    color:#a9b8b0;
    font-size:14px;
    font-style:normal
}
.scr-btn.accept{
    animation:nudge 1.6s ease-in-out infinite
}
@keyframes nudge{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
}
.declining .scr-btn.decline b{
    transform:scale(.88);
    box-shadow:0 0 0 10px rgba(229,72,77,.28)
}
.scr-badge{
    margin-top:22px;
    padding:8px 14px 8px 10px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:20px;
    background:rgba(22,196,127,.14);
    color:var(--green-bright);
    font-size:14px;
    font-weight:600
}
.scr-badge img{
    width:18px;
    height:18px
}
.scr-wave{
    width:100%;
    height:64px;
    margin-top:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px
}
.scr-wave i{
    width:4px;
    height:30%;
    border-radius:2px;
    background:var(--green-bright);
    opacity:.85
}
[data-state="ai"] .scr-wave i{
    animation:talk .9s ease-in-out infinite alternate;
    animation-delay:calc(var(--i) * -73ms)
}
@keyframes talk{
    0%{height:14%}
    40%{height:78%}
    100%{height:32%}
}
.summary-card{
    position:absolute;
    z-index:3;
    left:24px;
    bottom:24px;
    width:min(280px,58%);
    padding:16px 18px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 24px 50px -22px rgba(13,23,18,.45);
    font-size:14px;
    line-height:1.4;
    transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.3,1)
}
[data-state="ring"] .summary-card,[data-state="ai"] .summary-card{
    opacity:0;
    transform:translateY(18px)
}
.summary-label{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--green);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:14px;
    font-weight:600
}
.summary-label img{
    width:16px
}
.summary-card p{
    margin:8px 0 0;
    color:var(--ink)
}
.summary-next{
    display:block;
    margin-top:10px;
    color:var(--muted);
    font:600 14px/1.4 var(--site-font)
}

/* ---------- misc ---------- */
.works-on{
    margin-top:28px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px 28px;
    color:#34403a;
    font-size:15px;
    font-weight:600
}
.works-on small{
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:14px
}
.overage{
    margin:18px 0 0;
    color:var(--muted);
    text-align:center;
    font-size:15px
}
.step-card[data-off] h3,.step-card[data-off] p{
    opacity:.92
}
@media(max-width:900px){
    .phone-field{
        max-width:none;
        flex-basis:100%
    }
    .device{
        transform:translateX(10%)
    }
}
@media(max-width:680px){
    .hero-visual{
        aspect-ratio:4/5;
        max-height:none
    }
    .device{
        top:6%;
        bottom:6%;
        margin-left:-24%;
        transform:translateX(22%)
    }
    .summary-card{
        left:12px;
        bottom:14px;
        width:62%;
        padding:13px 14px;
        font-size:14px
    }
    .plan-usage strong{
        font-size:22px
    }
}
@media(max-width:420px){
    .scr-whisper{font-size:14px}
    .scr-btn b{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
        animation:none!important;
        transition:none!important
    }
    html{scroll-behavior:auto}
}

/* =========================================================
   v3: richer hero scene, animated product visuals, pricing
   ========================================================= */
.login-link{
    font-weight:600;
    padding:10px 4px;
    border-bottom:1.5px solid transparent;
    transition:border-color .2s,color .2s
}
.login-link:hover{
    color:var(--green);
    border-bottom-color:currentColor
}

/* hero scene */
.hero-visual{
    box-shadow:none;
    background:
        radial-gradient(circle at 62% 45%,rgba(22,196,127,.22) 0,rgba(22,196,127,0) 55%),
        linear-gradient(160deg,#eaf7f1 0,#f4f8f6 100%)
}
.device{
    left:auto;
    right:9%;
    margin-left:0;
    transform:none
}
.hero-visual .device{
    left:50%;
    right:auto;
    top:6%;
    bottom:6%;
    transform:translateX(-50%)
}
.hero-visual .scr-avatar{
    color:#fff;
    font-size:30px;
    font-weight:600
}
.hero-visual .scr-ring{
    justify-content:flex-start
}
.hero-visual .scr-status{
    margin-top:auto;
    margin-bottom:8px
}
.scr-avatar{
    width:64px;
    height:64px;
    margin-top:18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 1px rgba(255,255,255,.08)
}
.scr-avatar img{
    width:30px;
    height:30px;
    filter:brightness(0) invert(1);
    opacity:.9
}
.scr-avatar.small{
    width:36px;
    height:36px;
    margin:0;
    flex:none;
    background:rgba(22,196,127,.16)
}
.scr-avatar.small img{
    width:20px;
    height:20px;
    filter:none
}
.scr-whisper{
    margin-top:18px
}
.scr-ai{
    justify-content:flex-start;
    padding-top:14px
}
.scr-ai-head{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left
}
.scr-ai-head div{
    flex:1;
    min-width:0;
    display:grid
}
.scr-ai-head strong{
    font-size:16px;
    font-weight:600
}
.scr-ai-head span{
    color:var(--green-bright);
    font-size:14px
}
.scr-ai-head b{
    color:#a9b8b0;
    font:600 14px/1.4 var(--site-font);
    font-variant-numeric:tabular-nums
}
.scr-bubbles{
    width:100%;
    margin-top:16px;
    display:grid;
    gap:8px;
    text-align:left
}
.bubble{
    max-width:88%;
    margin:0;
    padding:8px 11px;
    border-radius:14px 14px 14px 4px;
    background:rgba(255,255,255,.09);
    color:#e6eee9;
    font-size:14px;
    line-height:1.4
}
.bubble.c{
    justify-self:end;
    border-radius:14px 14px 4px 14px;
    background:rgba(22,196,127,.22);
    color:#fff
}
[data-state="ai"] .bubble{
    animation:bubble .4s cubic-bezier(.2,.8,.3,1) both;
    animation-delay:calc(var(--n) * 1.1s + .2s)
}
@keyframes bubble{
    from{opacity:0;transform:translateY(8px) scale(.97)}
}
.scr-wave{
    height:34px;
    margin-top:auto
}
.scr-wave i{
    width:3px
}
.widget-card{
    position:absolute;
    z-index:3;
    top:9%;
    left:6%;
    width:min(250px,50%);
    padding:14px 16px 15px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 22px 44px -22px rgba(13,23,18,.4);
    font-size:14px
}
.wc-site{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--muted);
    font:600 14px/1.4 var(--site-font)
}
.wc-site i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green-bright)
}
.widget-card strong{
    display:block;
    margin:8px 0 10px;
    font-size:15px;
    line-height:1.4;
    letter-spacing:-.01em
}
.wc-row{
    display:flex;
    gap:6px
}
.wc-input{
    flex:1;
    min-width:0;
    height:34px;
    padding:0 10px;
    display:flex;
    align-items:center;
    overflow:hidden;
    white-space:nowrap;
    border-radius:10px;
    box-shadow:inset 0 0 0 1px #dfe6e2;
    font:600 14px/1.4 var(--site-font)
}
.wc-btn{
    height:34px;
    padding:0 12px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--green);
    color:#fff;
    font-size:14px;
    font-weight:600
}
.wc-status{
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--muted);
    font-size:14px
}
.wc-status b{
    color:var(--green);
    font:600 18px/1.4 var(--site-font);
    font-variant-numeric:tabular-nums
}
.summary-card{
    left:6%;
    bottom:8%
}

/* product + feed visual stage */
.product-image.pv,.dashboard-image.pv{
    position:relative;
    min-height:380px;
    display:grid;
    place-items:center;
    padding:32px;
    overflow:hidden;
    background:
        radial-gradient(circle at 80% 10%,rgba(255,255,255,.22),rgba(255,255,255,0) 50%),
        var(--green)
}
.dashboard-image.pv{
    background:
        radial-gradient(circle at 20% 0%,rgba(22,196,127,.25),rgba(22,196,127,0) 55%),
        var(--mint)
}
.ui-card{
    position:relative;
    width:100%;
    max-width:390px;
    padding:22px;
    border-radius:22px;
    background:#fff;
    color:var(--ink);
    box-shadow:0 30px 60px -28px rgba(0,0,0,.45)
}
.nc-av{
    width:38px;
    height:38px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--mint);
    color:var(--green-dark);
    font-weight:600
}
.nc-av img{
    width:22px
}

/* 01 widget in a browser */
.browser{
    width:100%;
    max-width:460px;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 30px 60px -28px rgba(0,0,0,.5)
}
.browser-bar{
    height:38px;
    padding:0 14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#f1f4f2
}
.browser-bar .window-dots i{
    width:9px;
    height:9px
}
.browser-url{
    flex:1;
    height:22px;
    padding:0 10px;
    display:flex;
    align-items:center;
    border-radius:7px;
    background:#fff;
    color:var(--muted);
    font:600 14px/1.4 var(--site-font);
    white-space:nowrap;
    overflow:hidden
}
.browser-page{
    position:relative;
    height:280px;
    padding:16px 18px
}
.bp-nav{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px
}
.bp-nav b{
    margin-right:auto;
    font-weight:600
}
.bp-nav i,.bp-hero i,.bp-grid i{
    display:block;
    height:8px;
    border-radius:4px;
    background:#e8ecea
}
.bp-nav i{
    width:34px
}
.bp-hero{
    margin-top:22px;
    display:grid;
    gap:9px
}
.bp-hero i:first-child{
    width:70%;
    height:14px
}
.bp-hero i:nth-child(2){
    width:52%
}
.bp-hero span{
    width:90px;
    height:26px;
    margin-top:4px;
    border-radius:13px;
    background:#f3d9e0
}
.bp-grid{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px
}
.bp-grid i{
    height:74px;
    border-radius:10px;
    background:linear-gradient(160deg,#f6e6ea,#eef3f0)
}
.mini-widget{
    position:absolute;
    right:14px;
    bottom:14px;
    width:230px;
    padding:14px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 40px -14px rgba(13,23,18,.45),0 0 0 1px #edf1ef;
    font-size:14px;
    opacity:0;
    transform:translateY(14px) scale(.96);
    transform-origin:bottom right;
    transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.3,1)
}
.mini-widget small{
    color:var(--green);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:14px;
    font-weight:600
}
.mini-widget strong{
    display:block;
    margin:5px 0 10px;
    font-size:14px;
    line-height:1.4
}
.mw-row{
    display:flex;
    gap:6px
}
.mw-input{
    flex:1;
    min-width:0;
    height:32px;
    padding:0 9px;
    display:flex;
    align-items:center;
    border-radius:9px;
    box-shadow:inset 0 0 0 1px #dfe6e2;
    font:600 14px/1.4 var(--site-font);
    white-space:nowrap;
    overflow:hidden
}
.mw-input:after{
    content:"";
    width:1px;
    height:14px;
    margin-left:1px;
    background:var(--ink);
    animation:caret 1s steps(1) infinite
}
@keyframes caret{50%{opacity:0}}
.mw-btn{
    height:32px;
    padding:0 11px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:var(--green);
    color:#fff;
    font-weight:600;
    transition:transform .15s,background .15s
}
.mw-count{
    height:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--muted);
    transition:height .3s,margin .3s
}
.mw-count b{
    color:var(--green);
    font:600 17px/1.4 var(--site-font);
    font-variant-numeric:tabular-nums
}
.mw-launcher{
    position:absolute;
    right:14px;
    bottom:14px;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 10px 20px -8px rgba(12,166,106,.8);
    transition:opacity .25s,transform .25s
}
.mw-launcher img{
    width:20px;
    filter:brightness(0) invert(1)
}
.mw-launcher:after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid var(--green);
    animation:launcher 1.6s ease-out infinite
}
@keyframes launcher{
    from{transform:scale(1);opacity:.7}
    to{transform:scale(1.7);opacity:0}
}
[data-step="1"] .mini-widget,[data-step="2"] .mini-widget,[data-step="3"] .mini-widget{
    opacity:1;
    transform:none
}
[data-step="1"] .mw-launcher,[data-step="2"] .mw-launcher,[data-step="3"] .mw-launcher{
    opacity:0;
    transform:scale(.6)
}
[data-step="2"] .mw-btn{
    transform:scale(.94);
    background:var(--green-dark)
}
[data-step="3"] .mw-count{
    height:26px;
    margin-top:10px
}
[data-step="3"] .mw-input:after{
    display:none
}

/* 02 number rings the team */
.number-card small,.lc-label,.feed-head small{
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:14px;
    font-weight:600
}
.nc-number{
    margin-top:8px;
    font:600 26px/1.4 var(--site-font);
    letter-spacing:-.02em;
    white-space:nowrap
}
.nc-list{
    margin-top:18px;
    display:grid;
    gap:8px
}
.nc-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:14px;
    background:#f5f8f6;
    transition:background .3s,box-shadow .3s
}
.nc-row div{
    flex:1;
    min-width:0;
    display:grid
}
.nc-row b{
    font-size:14px
}
.nc-row em{
    color:var(--muted);
    font-size:14px;
    font-style:normal
}
.nc-state{
    font:600 14px/1.4 var(--site-font);
    color:var(--muted);
    white-space:nowrap
}
.nc-row.ringing{
    background:#fff;
    box-shadow:0 0 0 1.5px var(--green),0 10px 24px -14px rgba(12,166,106,.7)
}
.nc-row.ringing .nc-av{
    animation:ringav 1s ease-in-out infinite
}
@keyframes ringav{
    0%,100%{box-shadow:0 0 0 0 rgba(12,166,106,.45)}
    50%{box-shadow:0 0 0 7px rgba(12,166,106,0)}
}
.nc-row.ringing .nc-state{
    color:var(--green)
}
.nc-row.missed .nc-state{
    color:#b4534f
}
.nc-row.answered{
    background:var(--mint);
    box-shadow:0 0 0 1.5px var(--green)
}
.nc-row.answered .nc-state{
    color:var(--green-dark)
}

/* 03 lead card */
.lc-top{
    display:flex;
    align-items:center;
    gap:12px
}
.lc-top div{
    flex:1;
    min-width:0;
    display:grid
}
.lc-top b{
    font-size:16px
}
.lc-top em{
    color:var(--muted);
    font:600 14px/1.4 var(--site-font);
    font-style:normal
}
.lc-badge{
    padding:5px 10px;
    border-radius:20px;
    background:#fff3df;
    color:#95590a;
    font-size:14px;
    font-weight:600
}
.lc-source{
    margin:14px 0 16px;
    padding:9px 11px;
    border-radius:10px;
    background:#f5f8f6;
    color:#34403a;
    font:600 14px/1.4 var(--site-font);
    overflow-wrap:anywhere
}
.lc-label{
    color:var(--green)
}
.lc-summary{
    min-height:62px;
    margin:6px 0 0;
    font-size:14px;
    line-height:1.4
}
.lc-summary.typing:after{
    content:"";
    display:inline-block;
    width:2px;
    height:14px;
    margin-left:2px;
    vertical-align:-2px;
    background:var(--green);
    animation:caret 1s steps(1) infinite
}
.lc-next{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:14px
}
.lc-player{
    margin-top:16px;
    display:flex;
    align-items:center;
    gap:10px
}
.lc-play{
    width:32px;
    height:32px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--ink)
}
.lc-play svg{
    width:11px;
    height:11px;
    margin-left:2px;
    fill:#fff
}
.lc-wave{
    position:relative;
    flex:1;
    min-width:0;
    height:28px;
    display:flex;
    align-items:center;
    gap:2px
}
.lc-wave i{
    flex:1;
    height:var(--h);
    border-radius:2px;
    background:#cfd9d4
}
.lc-wave i.on{
    background:var(--green)
}
.lc-player time{
    color:var(--muted);
    font:600 14px/1.4 var(--site-font)
}

/* feed */
.feed-card{
    max-width:440px;
    padding:20px
}
.feed-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding-bottom:14px;
    border-bottom:1px solid #edf1ef
}
.feed-head p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:14px
}
.feed-head strong{
    color:var(--ink);
    font-size:30px;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums
}
.feed-chip{
    padding:6px 11px;
    border-radius:20px;
    background:#fff3df;
    color:#95590a;
    font-size:14px;
    font-weight:600
}
.feed-list{
    margin:6px 0 0;
    padding:0;
    list-style:none
}
.feed-list li{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 2px;
    border-bottom:1px solid #f1f4f2
}
.feed-list li:last-child{
    border-bottom:0
}
.feed-list .nc-av{
    width:32px;
    height:32px;
    font-size:14px
}
.feed-list div{
    flex:1;
    min-width:0;
    display:grid
}
.feed-list b{
    font-size:14px
}
.feed-list em{
    overflow:hidden;
    color:var(--muted);
    font-size:14px;
    font-style:normal;
    white-space:nowrap;
    text-overflow:ellipsis
}
.feed-state{
    padding:4px 9px;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap
}
.feed-state.waiting{background:#fff3df;color:#95590a}
.feed-state.ai{background:var(--mint);color:var(--green-dark)}
.feed-state.done{background:#f1f4f2;color:var(--muted)}
.feed-list time{
    width:42px;
    color:var(--muted);
    text-align:right;
    font:600 14px/1.4 var(--site-font)
}
.feed-list li.enter{
    animation:feedin .5s cubic-bezier(.2,.8,.3,1) both;
    background:linear-gradient(90deg,rgba(22,196,127,.08),rgba(22,196,127,0))
}
@keyframes feedin{
    from{opacity:0;transform:translateY(-10px)}
}

/* how it works: tighter */
.steps h2{
    margin-bottom:56px
}
.step-card{
    padding:28px
}
.step-copy{
    margin-top:22px
}
.step-card h3{
    font-size:22px;
    line-height:1
}
.promise{
    min-height:0;
    padding:18px 20px
}
.steps.section-pad{
    padding-bottom:96px
}

/* pricing */
.tick{
    width:22px;
    height:22px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--mint)
}
.tick svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:var(--green);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round
}
.featured .tick{
    background:#fff
}
.price-card li{
    align-items:center;
    font-size:15.5px
}
.pricing-grid{
    align-items:center;
    padding-block:18px
}
.price-card.featured{
    position:relative;
    z-index:1;
    margin-block:-18px;
    padding-block:45px;
    border-width:2px;
    box-shadow:0 30px 60px -30px rgba(12,166,106,.55)
}
.assurance .check-dot img{
    filter:brightness(0) invert(1)
}
@media(max-width:900px){
    .widget-card{
        width:min(230px,52%)
    }
}
@media(max-width:680px){
    .product-image.pv,.dashboard-image.pv{
        min-height:0;
        padding:20px 14px
    }
    .browser-page{
        height:250px
    }
    .bp-grid i{
        height:56px
    }
    .pricing-grid{
        padding-block:0
    }
    .price-card.featured{
        margin-block:0;
        padding-block:28px
    }
    .widget-card{
        top:5%;
        left:4%;
        width:56%;
        padding:11px 12px;
        font-size:14px
    }
    .widget-card strong{
        font-size:14px
    }
    .device{
        right:5%
    }
    .summary-card{
        left:4%;
        bottom:5%
    }
}
@media(max-width:680px){
    .hero-visual{
        aspect-ratio:4/5
    }
    .hero-visual .device{
        top:5%;
        bottom:5%;
        margin-left:0
    }
}

/* ---------- install: editor + live preview ---------- */
.install-stage{
    padding:28px;
    border-radius:32px;
    background:var(--light)
}
.install-steps{
    margin:0 0 20px;
    padding:0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
.install-steps li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 16px 8px 8px;
    border-radius:30px;
    background:#fff;
    color:var(--muted);
    font-size:15px;
    font-weight:600;
    transition:color .3s,box-shadow .3s,background .3s
}
.install-steps b{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eef2f0;
    color:var(--muted);
    font:600 14px/1.4 var(--site-font);
    transition:background .3s,color .3s
}
.install-stage[data-step="1"] [data-s="1"],
.install-stage[data-step="2"] [data-s="2"],
.install-stage[data-step="3"] [data-s="3"]{
    color:var(--ink);
    box-shadow:0 0 0 1.5px var(--green),0 10px 24px -14px rgba(12,166,106,.6)
}
.install-stage[data-step="1"] [data-s="1"] b,
.install-stage[data-step="2"] [data-s="2"] b,
.install-stage[data-step="3"] [data-s="3"] b,
.install-stage[data-step="2"] [data-s="1"] b,
.install-stage[data-step="3"] [data-s="1"] b,
.install-stage[data-step="3"] [data-s="2"] b{
    background:var(--green);
    color:#fff
}
.install-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:24px;
    align-items:stretch
}
.editor{
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:22px;
    background:#0e1512;
    box-shadow:0 30px 60px -32px rgba(13,23,18,.6)
}
.editor-tabs{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 10px 0 14px;
    background:#0a100d
}
.editor-tab{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:12px 12px 0 0;
    background:#0e1512;
    color:#dfe8e3;
    font:600 14px/1.4 var(--site-font)
}
.editor-tab i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#f0a45b
}
.copy-button{
    margin:0 0 8px auto;
    padding:9px 16px;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    border-radius:20px;
    background:var(--green);
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:background .2s,transform .2s,box-shadow .2s
}
.copy-button img{
    width:16px;
    filter:brightness(0) invert(1)
}
.install-stage[data-step="1"] .copy-button{
    animation:copy-pulse 1s ease-in-out 2
}
@keyframes copy-pulse{
    50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(22,196,127,.25)}
}
.editor-code{
    flex:1;
    padding:18px 0;
    font:600 14px/1.4 var(--site-font);
    color:#c9d4ce
}
.ln{
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    padding-right:18px
}
.ln i{
    padding-right:16px;
    color:#4d5c55;
    font-style:normal;
    text-align:right;
    user-select:none
}
.ln code{
    min-width:0;
    font:inherit;
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
.ln.dim{
    opacity:.55
}
.ln .t{color:#7fd1ae}
.ln .a{color:#9ec9ff}
.ln .s{color:#f1d38a}
.ln.add{
    margin:4px 0;
    padding-block:6px;
    background:linear-gradient(90deg,rgba(22,196,127,.16),rgba(22,196,127,.04));
    box-shadow:inset 3px 0 0 var(--green-bright)
}
.ln.add i{
    color:var(--green-bright)
}
.ln.add i:before{
    content:"+ "
}
.ln.add code{
    color:#b8f5d9
}
.caret{
    display:none;
    width:2px;
    height:1.1em;
    margin-left:1px;
    vertical-align:-3px;
    background:var(--green-bright);
    animation:caret 1s steps(1) infinite
}
.install-stage[data-step="2"] .caret{
    display:inline-block
}
.install-stage[data-step="0"] .ln.add,
.install-stage[data-step="1"] .ln.add{
    background:none;
    box-shadow:none
}
.editor-status{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border-top:1px solid #1c2622;
    color:#8fa098;
    font:600 14px/1.4 var(--site-font)
}
.status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#5b6862;
    transition:background .3s,box-shadow .3s
}
.install-stage[data-step="2"] .status-dot{
    background:#f0a45b
}
.install-stage[data-step="3"] .status-dot{
    background:var(--green-bright);
    box-shadow:0 0 0 4px rgba(22,196,127,.2)
}
.install-stage[data-step="3"] .editor-status{
    color:var(--green-bright)
}
.site-preview{
    position:relative;
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    box-shadow:0 30px 60px -32px rgba(13,23,18,.35),0 0 0 1px #e6ece9
}
.sp-page{
    position:relative;
    flex:1;
    min-height:260px;
    padding:16px 18px
}
.sp-toast{
    position:absolute;
    left:14px;
    right:14px;
    top:14px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 36px -16px rgba(13,23,18,.35),0 0 0 1px #e6ece9;
    opacity:0;
    transform:translateY(-10px);
    transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.3,1)
}
.sp-toast div{
    display:grid;
    gap:2px;
    min-width:0
}
.sp-toast b{
    font-size:14px
}
.sp-toast small{
    color:var(--muted);
    font-size:14px
}
.sp-launcher{
    opacity:0;
    transform:scale(.4)
}
.install-stage[data-step="3"] .sp-toast{
    opacity:1;
    transform:none;
    transition-delay:.35s
}
.install-stage[data-step="3"] .sp-launcher{
    opacity:1;
    transform:none;
    transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)
}
.install-stage .works-on{
    margin-top:22px;
    justify-content:flex-start
}
.works-on span{
    padding:7px 14px;
    border-radius:20px;
    background:#fff;
    font-size:14px
}
@media(max-width:900px){
    .install-grid{
        grid-template-columns:1fr
    }
    .sp-page{
        min-height:220px
    }
}
@media(max-width:680px){
    .install-stage{
        padding:16px;
        border-radius:24px
    }
    .install-steps li{
        font-size:14px
    }
    .editor-code{
        font-size:14px
    }
    .ln{
        grid-template-columns:38px minmax(0,1fr);
        padding-right:12px
    }
    .ln i{
        padding-right:10px
    }
    .copy-button span{
        display:none
    }
    .ln.add i:before{
        content:""
    }
}
.works-on span.any{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px 7px 12px;
    background:var(--ink);
    color:#fff;
    box-shadow:0 10px 22px -12px rgba(13,23,18,.6)
}
.works-on span.any:before{
    content:"</>";
    color:var(--green-bright);
    font:600 14px/1.4 var(--site-font)
}

/* ---------- facts strip ---------- */
.facts-grid>div.fact{
    min-height:0;
    padding:32px 34px 28px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:10px
}
.fact strong{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:46px;
    letter-spacing:-.03em;
    line-height:1
}
.fact strong small{
    color:var(--muted);
    font-size:18px;
    font-weight:600;
    letter-spacing:0
}
.facts-grid .fact-label{
    margin:0;
    color:#34403a;
    font-size:15.5px
}
.fact-viz{
    margin-top:auto;
    padding-top:22px;
    display:grid;
    gap:10px
}
.facts-grid .speed-ends,.facts-grid .speed-ends span{
    margin:0;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font:600 14px var(--mono);
    letter-spacing:.01em
}
.speed-track{
    position:relative;
    height:8px;
    border-radius:4px;
    background:#edf2ef
}
.speed-track i{
    position:absolute;
    inset:0 auto 0 0;
    width:100%;
    border-radius:4px;
    background:linear-gradient(90deg,#9fe2c3,var(--green))
}
.speed-track b{
    position:absolute;
    top:50%;
    right:-4px;
    width:30px;
    height:30px;
    margin-top:-15px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px #fff
}
.speed-track b img{
    width:14px;
    filter:brightness(0) invert(1)
}
.fact.live .speed-track i{
    animation:speed 3.6s cubic-bezier(.4,0,.2,1) infinite
}
.fact.live .speed-track b{
    animation:ringdot 3.6s ease-out infinite
}
@keyframes speed{
    0%{width:0}
    42%{width:100%}
    88%{width:100%;opacity:1}
    100%{width:100%;opacity:0}
}
@keyframes ringdot{
    0%,38%{transform:scale(.75);background:#c9d6cf}
    44%{transform:scale(1.12);background:var(--green)}
    52%,90%{transform:scale(1);background:var(--green);box-shadow:0 0 0 5px #fff,0 0 0 10px rgba(12,166,106,.18)}
    100%{transform:scale(.75);background:#c9d6cf}
}
.days{
    display:flex;
    gap:6px
}
.days i{
    flex:1;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:var(--green);
    color:#fff;
    font:600 14px var(--mono);
    font-style:normal
}
.fact.live .days i{
    animation:day 3.5s ease-in-out infinite;
    animation-delay:calc(var(--d) * .18s)
}
@keyframes day{
    0%,24%,100%{transform:none;background:var(--green)}
    10%{transform:translateY(-3px);background:var(--green-bright)}
}
.langs{
    display:flex;
    gap:5px
}
.langs i{
    flex:1;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#f1f4f2;
    color:var(--muted);
    font:600 14px var(--mono);
    font-style:normal;
    transition:background .3s,color .3s,transform .3s
}
.langs i.on{
    background:var(--green);
    color:#fff;
    transform:translateY(-2px)
}
.facts-grid .speed-ends .hello{
    color:var(--ink);
    font:600 14px var(--mono);
    transition:opacity .25s
}
@media(max-width:1100px){
    .facts-grid>div.fact{
        padding:26px 24px 22px
    }
    .fact strong{
        font-size:38px
    }
}
@media(max-width:680px){
    .facts-grid>div.fact{
        padding:24px
    }
    .fact-viz{
        padding-top:14px
    }
}
.hero-visual .device{
    left:auto;
    right:4%;
    transform:none
}
.hero-visual .summary-card{
    width:min(230px,48%)
}
@media(max-width:1000px){
    .included-panel{
        grid-template-columns:1fr
    }
}
@media(max-width:900px){
    .step-grid,.pricing-grid{
        grid-template-columns:1fr
    }
    .step-card{
        min-height:0
    }
}
@media(max-width:420px){
    .included-grid{
        grid-template-columns:1fr
    }
}

@media (min-width:681px) and (max-width:1150px){
    .hero-grid{
        grid-template-columns:1fr
    }
    .hero-visual{
        width:min(100%,600px);
        margin-inline:auto;
        aspect-ratio:1
    }
}
@media(max-width:680px){
    .hero-visual{
        width:100%;
        min-height:680px;
        height:auto;
        padding:20px;
        aspect-ratio:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-between;
        gap:20px
    }
    .hero-visual .widget-card,.hero-visual .summary-card{
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        width:min(100%,280px);
        flex:none
    }
    .hero-visual .widget-card{
        align-self:flex-start
    }
    .hero-visual .summary-card{
        align-self:flex-end
    }
    .hero-visual .device{
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        width:clamp(160px,40%,215px);
        height:auto;
        margin:0;
        aspect-ratio:9/18.5;
        flex:none;
        transform:none
    }
    .hero-visual .device-screen{
        padding:38px 10px 12px
    }
    .hero-visual .scr-avatar{
        width:48px;
        height:48px;
        margin-top:12px;
        font-size:24px
    }
    .hero-visual .scr-sub{
        margin-top:4px;
        font-size:14px
    }
    .hero-visual .scr-status{
        margin-bottom:0;
        font-size:14px
    }
    .hero-visual .scr-buttons{
        margin-top:10px;
        padding:0
    }
    .hero-visual .scr-btn b{
        width:42px;
        height:42px
    }
    .hero-visual .scr-btn em{
        font-size:14px
    }
}

/* ---- Language switcher ---- */
.lang-toggle{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:36px;
    padding:0 12px;
    border:1px solid #d4dbd7;
    border-radius:20px;
    background:transparent;
    font-family:var(--site-font);
    font-size:14px;
    font-weight:600;
    letter-spacing:.04em;
    color:var(--ink);
    cursor:pointer;
    transition:border-color .2s,background .2s
}
.lang-toggle:hover{
    border-color:var(--green);
    background:var(--mint)
}
.lang-toggle:focus-visible{
    outline:3px solid var(--green-bright);
    outline-offset:3px
}
.lang-toggle svg{
    width:16px;
    height:16px;
    flex:none;
    opacity:.55
}

/* Overlay */
.lang-overlay{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease
}
.lang-overlay[hidden]{
    display:flex !important;
    pointer-events:none
}
.lang-overlay.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto
}
.lang-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px)
}

/* Modal */
.lang-modal{
    position:relative;
    z-index:1;
    width:min(700px,calc(100% - 40px));
    max-height:calc(100vh - 60px);
    overflow-y:auto;
    padding:44px 40px 40px;
    background:var(--white);
    border-radius:20px;
    box-shadow:0 24px 64px rgba(0,0,0,.18);
    transform:scale(.95);
    transition:transform .25s cubic-bezier(.22,1,.36,1)
}
.lang-overlay.open .lang-modal{
    transform:scale(1)
}
.lang-close{
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:var(--light);
    color:var(--ink);
    cursor:pointer;
    transition:background .15s
}
.lang-close:hover{
    background:#e0e0e0
}
.lang-close:focus-visible{
    outline:3px solid var(--green-bright);
    outline-offset:3px
}
.lang-title{
    margin:0 0 28px;
    font-size:22px;
    font-weight:600;
    color:var(--ink)
}

/* Grid of language cards */
.lang-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px
}
.lang-card{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:14px 16px;
    border:1px solid #e5e9e7;
    border-radius:12px;
    text-decoration:none;
    color:var(--ink);
    transition:border-color .15s,background .15s,transform .15s
}
.lang-card:hover{
    border-color:var(--green);
    background:var(--mint);
    transform:translateY(-1px)
}
.lang-card:focus-visible{
    outline:3px solid var(--green-bright);
    outline-offset:2px
}
.lang-card.current{
    border-color:var(--green);
    background:rgba(12,166,106,.08)
}
.lang-name{
    font-size:15px;
    font-weight:400;
    line-height:1.3
}
.lang-code{
    font-size:14px;
    color:var(--muted);
    letter-spacing:.05em
}

@media(max-width:680px){
    .lang-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .lang-modal{
        padding:32px 24px 28px
    }
    .lang-title{
        font-size:19px;
        margin-bottom:20px
    }
}
@media(min-width:681px) and (max-width:900px){
    .lang-grid{
        grid-template-columns:repeat(3,1fr)
    }
}

/* ---- Legal pages ---- */
.legal-page{
    padding:48px 0 80px
}
.legal-wrap{
    max-width:780px
}
.legal-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:32px;
    font-size:14px;
    font-weight:500;
    color:var(--green);
    text-decoration:none;
    transition:color .2s
}
.legal-back:hover{
    color:var(--green-dark)
}
.legal-page h1{
    margin:0 0 12px;
    font-size:clamp(32px,5vw,44px);
    font-weight:600;
    letter-spacing:-.03em;
    line-height:1.1;
    color:var(--ink)
}
.legal-updated{
    margin:0 0 48px;
    font-size:14px;
    color:var(--muted)
}
.legal-page section{
    margin-bottom:40px
}
.legal-page h2{
    margin:0 0 16px;
    font-size:22px;
    font-weight:600;
    letter-spacing:-.02em;
    line-height:1.2;
    color:var(--ink)
}
.legal-page h3{
    margin:24px 0 10px;
    font-size:17px;
    font-weight:600;
    line-height:1.3;
    color:var(--ink)
}
.legal-page p{
    margin:0 0 14px;
    font-size:15.5px;
    line-height:1.7;
    color:#2a2a2a
}
.legal-page ul{
    margin:0 0 16px;
    padding-left:22px
}
.legal-page li{
    margin-bottom:8px;
    font-size:15.5px;
    line-height:1.7;
    color:#2a2a2a
}
.legal-page a{
    color:var(--green);
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color .2s
}
.legal-page a:hover{
    color:var(--green-dark)
}
.legal-page code{
    padding:2px 6px;
    background:var(--light);
    border-radius:4px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:13.5px;
    color:var(--ink)
}
.legal-page strong{
    font-weight:600;
    color:var(--ink)
}
.legal-footer-links{
    padding-top:30px
}
.cookie-table-wrapper{
    overflow-x:auto;
    margin:0 0 16px;
    -webkit-overflow-scrolling:touch
}
.cookie-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    line-height:1.5
}
.cookie-table th{
    padding:10px 14px;
    background:var(--light);
    border:1px solid #e0e5e2;
    text-align:left;
    font-weight:600;
    font-size:13px;
    color:var(--ink);
    white-space:nowrap
}
.cookie-table td{
    padding:10px 14px;
    border:1px solid #e0e5e2;
    vertical-align:top;
    color:#2a2a2a
}
.cookie-table code{
    padding:1px 5px;
    background:var(--light);
    border-radius:3px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:12.5px;
    white-space:nowrap
}

/* ---- Cookie consent banner ---- */
.cookie-banner{
    position:fixed;
    bottom:24px;
    left:24px;
    z-index:55;
    max-width:380px;
    padding:20px 22px;
    background:var(--white);
    border:1px solid #e0e5e2;
    border-radius:16px;
    box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
    font-family:var(--site-font);
    opacity:0;
    transform:translateY(12px);
    transition:opacity .35s ease,transform .35s ease;
    pointer-events:none
}
.cookie-banner.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto
}
.cookie-banner p{
    margin:0 0 14px;
    font-size:14px;
    line-height:1.55;
    color:var(--ink)
}
.cookie-banner a{
    color:var(--green);
    text-decoration:underline;
    text-underline-offset:2px;
    font-weight:500
}
.cookie-banner a:hover{
    color:var(--green-dark)
}
.cookie-banner-buttons{
    display:flex;
    gap:10px
}
.cookie-banner-buttons button{
    flex:1;
    min-height:40px;
    padding:0 16px;
    border-radius:20px;
    font-family:var(--site-font);
    font-size:13px;
    font-weight:600;
    letter-spacing:.03em;
    cursor:pointer;
    transition:background .2s,color .2s,border-color .2s,transform .15s
}
.cookie-banner-buttons button:active{
    transform:scale(.97)
}
.cookie-btn-accept{
    background:var(--green);
    color:#fff;
    border:1px solid var(--green)
}
.cookie-btn-accept:hover{
    background:var(--green-dark);
    border-color:var(--green-dark)
}
.cookie-btn-decline{
    background:transparent;
    color:var(--ink);
    border:1px solid #d0d5d2
}
.cookie-btn-decline:hover{
    border-color:#aaa;
    background:#f8f8f8
}
@media(max-width:480px){
    .cookie-banner{
        left:12px;
        right:12px;
        bottom:12px;
        max-width:none
    }
}
@media(max-width:600px){
    .legal-page{
        padding:32px 0 60px
    }
    .legal-page h1{
        font-size:28px
    }
    .legal-page h2{
        font-size:19px
    }
    .legal-wrap{
        max-width:100%
    }
}
/* Keep translated calls to action within narrow viewports. */
@media(max-width:639px){.button{max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:12px 20px;line-height:1.5}.header-inner{gap:10px}.header-inner .logo{width:90px}.header-actions{gap:10px;min-width:0}.header-actions .login-link{display:none}.header-actions .button{padding:8px 12px;letter-spacing:.04em}.menu-button{flex:0 0 36px;width:36px}.marketing-chat-panel{max-height:calc(100dvh - 108px)}}