@font-face{font-family:'Sale Plex';src:url('plex-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Sale Plex';src:url('plex-bold.woff') format('woff');font-weight:700;font-display:swap}

:root{
  --bg:#f7f7f5;
  --surface:#ecece8;
  --surface-2:#e2e2dc;
  --ink:#0d2a1c;
  --ink-2:#1b4a33;
  --muted:#4d5d55;
  --paper:#ffffff;
  --warn:#c2410c;
  --green:#0d2a1c;
  --green-surface:#163a28;
  --green-surface-2:#1e4a33;
  --green-ink:#f7f7f5;
  --green-muted:#c4d3ca;
  --yellow:#f6e016;
  --yellow-2:#fff06a;
  --yellow-soft:#fff8b0;
  --yellow-ink:#0d2a1c;
  --mint:#d6ebdd;
  --mint-surface:#c6e1cf;
  --mint-ink:#0d2a1c;

  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;

  --gutter:clamp(16px,4vw,56px);
  --section:clamp(88px,11vw,176px);
  --display:clamp(34px,5.6vw,88px);
  --head:clamp(32px,4.4vw,64px);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;
  --t-hover:180ms;
  --t-ui:240ms;
  --t-reveal:800ms;
  --stagger-item:70ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.7 'Sale Plex',Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-weight:700;text-wrap:balance}
h1{font-size:var(--display);line-height:1.15;letter-spacing:-.01em}
h2{font-size:var(--head);line-height:1.2;letter-spacing:-.01em}
h3{font-size:22px;line-height:1.4}
p{text-wrap:pretty;max-width:62ch}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{cursor:default}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
::selection{background:var(--yellow);color:var(--ink)}
.frame{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:30;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-sm)}
.skip:focus{top:12px}
/* The server-rendered copy of this page (landing.html) stands in until the live one mounts; the app's loading screen stays out of sight under it. */
#landing-prerender~#root{display:none}
/* The live page replacing that copy doesn't replay the intro the copy already played. */
.sale-landing.no-intro .hero .lines [data-line],.sale-landing.no-intro .hero [data-load],.sale-landing.no-intro .hero [data-open],.sale-landing.no-intro .hero [data-open] .product img{animation:none;opacity:1;transform:none;clip-path:none}

/* Buttons: one pill shape, one height scale, press gives way, hover deepens */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:999px;font-weight:700;font-size:17px;line-height:1.2;background:var(--surface);color:var(--ink);isolation:isolate;overflow:clip;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease}
.button::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--surface-2);transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--ease-expo)}
.button:active{transform:scale(.97)}
.button.primary{background:var(--ink);color:var(--bg)}
.button.primary::before{background:var(--ink-2)}
.button.accent{background:var(--yellow);color:var(--yellow-ink)}
.button.accent::before{background:var(--yellow-2)}
.button.large{min-height:60px;padding:14px 30px;font-size:19px}
.button .arrow{flex:none;transition:transform 320ms var(--ease-out)}
.text-link{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:currentColor;transition:text-underline-offset var(--t-hover) ease,text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){
  .button:hover::before{transform:scaleX(1);transform-origin:left}
  .button:hover .arrow{transform:translateX(-5px)}
  .text-link:hover{text-underline-offset:4px}
}

/* Navigation: a plain bar that steps aside while reading down and returns on the way up */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;background:var(--bg);transition:transform 360ms var(--ease-out)}
.nav.is-hidden{transform:translateY(-100%)}
.brand{white-space:nowrap;flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:10px;font:700 22px/1 Arial,'Sale Plex',sans-serif;letter-spacing:-.02em}
.brand svg{flex:none;transition:transform 420ms var(--ease-out)}
.brand-name{overflow:hidden;text-overflow:ellipsis}
.nav nav{display:flex;gap:6px;font-size:17px}
.nav nav a{padding:8px 14px;border-radius:999px;transition:background-color var(--t-hover) ease}
.auth-actions{white-space:nowrap;flex:none;display:flex;align-items:center;gap:18px;font-size:17px}
.auth-actions .button{min-height:46px;padding:10px 22px;font-size:16px}
.login-link{padding:8px 4px}
@media (hover:hover) and (pointer:fine){
  .nav nav a:hover{background:var(--surface)}
  .brand:hover svg{transform:rotate(-8deg)}
  .login-link:hover{text-decoration:underline;text-underline-offset:6px}
}

/* Hero */
.hero{padding-block:clamp(24px,5vw,72px) var(--section)}
.hero-head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.lines .line{display:block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
.lines [data-line]{display:block}
.hero-lead>p:first-child{font-size:20px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.small-note{margin-top:14px;font-size:16px;color:var(--muted)}

/* The live POS: a dark device holding white working panels */
.pos{background:var(--green);color:var(--green-ink);border-radius:var(--r-lg);padding:clamp(10px,1.4vw,18px)}
.pos-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 10px 16px;font-size:15px;color:var(--green-muted)}
.pos-bar strong{color:var(--green-ink)}
.pos-bar>span:first-child{display:inline-flex;align-items:center;gap:10px}
.pos-bar>span:first-child::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--yellow)}
.pos-body{display:grid;grid-template-columns:1.35fr 1fr .8fr;gap:clamp(10px,1.2vw,14px)}
.pos-title{font-size:17px;line-height:1.4;letter-spacing:0;margin-bottom:14px}
.catalogue,.basket{background:var(--paper);color:var(--ink);border-radius:var(--r-md);padding:18px}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.product{position:relative;display:grid;text-align:start;background:var(--bg);border-radius:var(--r-sm);overflow:clip;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.product img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 700ms var(--ease-soft)}
.product strong{padding:10px 12px 0;font-size:16px}
.product span{padding:0 12px 12px;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.product::after{content:'+';position:absolute;top:10px;left:10px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:22px;line-height:1;transition:transform 300ms var(--ease-out),background-color var(--t-hover) ease}
.product:active{transform:scale(.97)}
.product.added::after{background:var(--yellow);color:var(--ink);animation:tap 420ms var(--ease-out)}
@keyframes tap{40%{transform:scale(1.25)}}
@media (hover:hover) and (pointer:fine){
  .product:hover{background:var(--mint)}
  .product:hover img{transform:scale(1.05)}
  .product:hover::after{transform:rotate(90deg)}
}
.basket{display:flex;flex-direction:column}
.basket-head{display:flex;justify-content:space-between;align-items:baseline}
.subtle{font-size:15px;color:var(--muted);padding:4px 10px;border-radius:999px;transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.subtle:hover{background:var(--surface);color:var(--ink)}}
#basket-lines{flex:1;min-height:120px;display:grid;align-content:start;gap:6px}
.basket-line{display:grid;grid-template-columns:1fr auto 34px;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:var(--bg);font-size:16px;font-variant-numeric:tabular-nums}
.basket-line.fresh{animation:line-in 520ms var(--ease-out)}
@keyframes line-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.basket-line button{width:34px;height:34px;border-radius:50%;background:var(--paper);font-size:18px;line-height:1;transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.basket-line button:active{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){.basket-line button:hover{background:var(--surface-2)}}
.empty{color:var(--muted);font-size:16px;padding:18px 12px;border-radius:var(--r-sm);background:var(--bg);text-align:center}
.basket-sums{padding-top:14px;margin-top:8px;font-size:16px;font-variant-numeric:tabular-nums}
.basket-sums div{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}
.basket-sums .total{color:var(--ink);font-size:24px;padding-top:10px}
.basket-sums .total.tick strong:last-child{animation:tick 460ms var(--ease-out)}
@keyframes tick{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.pay{position:relative;margin-top:16px;min-height:58px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;font-size:18px;overflow:clip;isolation:isolate;transition:transform var(--t-press) var(--ease-out),opacity var(--t-ui) ease,background-color var(--t-hover) ease,color var(--t-hover) ease}
.pay::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink-2);transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--ease-expo)}
.pay:active:not(:disabled){transform:scale(.97)}
.pay:disabled{opacity:.3}
.pay.done{background:var(--yellow);color:var(--ink);opacity:1}
@media (hover:hover) and (pointer:fine){.pay:hover:not(:disabled)::before{transform:scaleX(1);transform-origin:left}}
#sale-status{margin-top:10px;font-size:15px;color:var(--muted);min-height:2.6em}
.after-sale{display:flex;flex-direction:column;gap:10px;padding:8px 4px 4px}
.after-sale .pos-title{padding-inline:4px}
.figure{display:grid;gap:2px;padding:18px;border-radius:var(--r-md);background:var(--green-surface);transition:background-color 600ms ease}
.figure-label{font-size:15px;color:var(--green-muted)}
.figure-value{font-size:clamp(26px,2.4vw,36px);font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.figure-note{font-size:14px;color:var(--green-muted)}
.figure.bump{animation:flash 1100ms ease}
.figure.bump .figure-value{animation:tick 520ms var(--ease-out)}
@keyframes flash{0%{background:var(--green-surface)}15%{background:var(--green-surface-2)}100%{background:var(--green-surface)}}

/* Fields */
.field-green{background:var(--green);color:var(--green-ink)}
.field-yellow{background:var(--yellow);color:var(--yellow-ink)}
.field-mint{background:var(--mint);color:var(--mint-ink)}
section{padding-block:var(--section)}
section.hero{padding-top:clamp(24px,5vw,72px)}

/* Features: a plain list, each item marked by a yellow bar that draws in */
.features-head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.features-head p{font-size:20px;color:var(--green-muted)}
.feature-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.feature-list li{padding:28px 24px 30px;border-radius:var(--r-md);transition:background-color var(--t-ui) ease}
.feature-list li::before{content:'';display:block;width:48px;height:4px;border-radius:2px;background:var(--yellow);margin-bottom:22px;transform-origin:right;transition:width 420ms var(--ease-out)}
.feature-list h3{margin-bottom:8px}
.feature-list p{color:var(--green-muted);font-size:17px}
@media (hover:hover) and (pointer:fine){
  .feature-list li:hover{background:var(--green-surface)}
  .feature-list li:hover::before{width:72px}
}

/* How it works: each interface fragment sits on its own coloured mat */
.how-intro{font-size:20px;color:var(--muted);margin-top:16px}
.step{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,112px);align-items:center;margin-top:clamp(56px,7vw,112px)}
.step:nth-of-type(even) .step-text{order:2}
.step-text h3{font-size:clamp(26px,2.6vw,38px);line-height:1.3;margin-bottom:14px}
.step-text p{font-size:19px}
.stage{border-radius:var(--r-lg);padding:clamp(20px,3.6vw,56px);overflow:clip}
.stage-mint{background:var(--mint)}
.stage-sun{background:var(--yellow)}
.stage-ink{background:var(--green)}
.panel{background:var(--paper);border-radius:var(--r-md);padding:clamp(18px,2.4vw,32px);font-size:16px;font-variant-numeric:tabular-nums}
.panel-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px}
.panel-head span{color:var(--muted)}
.panel table{width:100%;border-collapse:collapse}
.panel th{text-align:start;font-weight:400;color:var(--muted);padding:8px 8px;background:var(--bg)}
.panel th:first-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.panel th:last-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.panel td{padding:10px 8px;border-bottom:1px solid var(--surface)}
.panel tr:last-child td{border-bottom:0}
.panel-action{display:inline-block;margin-top:18px;padding:9px 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;font-size:15px}
.stock-row{display:grid;grid-template-columns:7.5em 1fr 4.5em;align-items:center;gap:14px;padding:10px 0}
.stock-row strong{text-align:end}
.stock-bar{height:12px;border-radius:6px;background:var(--surface);overflow:clip}
.stock-bar i{display:block;height:100%;width:var(--level);background:var(--warn);border-radius:6px;transform-origin:right}
.close-total{font-size:clamp(36px,3.6vw,52px);font-weight:700;line-height:1.15;margin-bottom:14px}
.close-row{display:flex;justify-content:space-between;padding:10px 12px;border-radius:var(--r-sm)}
.close-row:nth-child(odd){background:var(--bg)}

/* Languages */
.languages-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,112px);align-items:center}
.languages-grid p{font-size:20px;margin-top:18px}
.language-samples{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.language-samples li{display:grid;gap:6px;background:var(--yellow-soft);border-radius:var(--r-md);padding:clamp(20px,2.4vw,32px);transition:transform var(--t-ui) var(--ease-out),background-color var(--t-hover) ease}
.lang-name{font-size:14px;font-weight:700;opacity:.65}
.language-samples li>span:last-child{font-size:clamp(22px,2.4vw,34px);font-weight:700;line-height:1.4}
@media (hover:hover) and (pointer:fine){.language-samples li:hover{background:var(--paper);transform:rotate(-1deg)}}

/* Pricing */
.plans-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.plans-head p{font-size:20px;color:var(--muted);margin-top:14px}
.billing-choice{position:relative;display:inline-flex;background:var(--surface);border-radius:999px;padding:5px;isolation:isolate}
.billing-thumb{position:absolute;z-index:-1;top:5px;bottom:5px;left:0;width:var(--thumb-w,0);transform:translateX(var(--thumb-x,0));border-radius:999px;background:var(--ink);transition:transform 420ms var(--ease-out),width 420ms var(--ease-out)}
.billing-choice button{min-height:46px;padding:8px 22px;border-radius:999px;font-weight:700;font-size:16px;transition:color var(--t-ui) ease}
.billing-choice [aria-pressed="true"]{color:var(--bg)}
.billing-choice:not(.ready) [aria-pressed="true"]{background:var(--ink)}
.plan-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:16px;align-items:center}
.plan{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,2.8vw,40px);border-radius:var(--r-lg);background:var(--surface);transition:transform var(--t-ui) var(--ease-out)}
.plan.featured{background:var(--green);color:var(--green-ink);padding-block:clamp(36px,4vw,60px)}
.plan h3{font-size:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.plan-tag{font-size:14px;background:var(--yellow);color:var(--yellow-ink);border-radius:999px;padding:3px 12px}
.price{font-size:20px;font-variant-numeric:tabular-nums}
.price-number{display:inline-block;font-size:clamp(44px,4.4vw,64px);font-weight:700;line-height:1.1}
.price-number.swap{animation:tick 460ms var(--ease-out)}
.price-number.quote{font-size:clamp(30px,2.8vw,40px)}
.plan-for{color:var(--muted)}
.plan.featured .plan-for{color:var(--green-muted)}
.plan ul{display:grid;gap:10px;margin-block:6px 18px;flex:1}
.plan li{display:flex;gap:12px;align-items:center}
.plan li::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%230d2a1c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.plan.featured li::before{background-color:var(--yellow)}
.plan .button{background:var(--paper)}
.plan .button.primary{background:var(--yellow);color:var(--yellow-ink)}
.plan .button.primary::before{background:var(--yellow-2)}
.pricing-note{margin-top:28px;font-size:16px;color:var(--muted);max-width:90ch}

/* FAQ: the open question turns to paper; its answer opens smoothly */
.questions-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,6vw,112px);align-items:start}
.questions-grid>div>p{margin-top:18px;font-size:19px}
.faq-list{display:grid;gap:10px}
.faq-list details{background:var(--mint-surface);border-radius:var(--r-md);padding:0 clamp(18px,2vw,28px);transition:background-color var(--t-ui) ease}
.faq-list details[open]{background:var(--paper)}
.faq-list summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-weight:700;font-size:19px;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);font-size:22px;line-height:1;transition:transform 320ms var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease}
.faq-list details[open] summary::after{transform:rotate(45deg);background:var(--ink);color:var(--bg)}
.faq-list details p{padding-bottom:24px;font-size:17px}
.faq-list details[open] p{animation:answer 420ms var(--ease-out)}
@keyframes answer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){.faq-list details:not([open]):hover{background:#b9dac4}}

/* Contact */
.contact-grid>*{min-width:0}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,112px);align-items:center}
.contact-grid>div>p{font-size:20px;color:var(--green-muted);margin-block:20px 32px}
#request-form{display:grid;gap:8px;background:var(--green-surface);border-radius:var(--r-lg);padding:clamp(22px,3vw,40px)}
#request-form h3{font-size:24px;margin-bottom:8px}
#request-form label{font-size:16px;color:var(--green-muted);margin-top:6px}
#request-form input,#request-form select{width:100%;min-width:0;min-height:52px;border:0;border-radius:var(--r-sm);padding:10px 16px;background:var(--green);color:var(--green-ink);transition:background-color var(--t-hover) ease,box-shadow var(--t-hover) ease}
#request-form input:hover,#request-form select:hover{background:#09200f}
#request-form input::placeholder{color:#8fa699}
#request-form input:focus-visible,#request-form select:focus-visible{outline:0;box-shadow:0 0 0 3px var(--yellow)}
#request-form .button{margin-top:16px;background:var(--green-ink);color:var(--ink)}
#request-form .button::before{background:var(--paper)}
#request-status{font-size:15px;color:var(--green-muted)}

/* Footer */
.site-footer{padding-block:0 32px;overflow:clip}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px;padding-top:32px;font-size:17px}
.site-footer nav a{padding:6px 14px;border-radius:999px;transition:background-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.site-footer nav a:hover{background:var(--green-surface)}}
.footer-name{font:700 min(clamp(64px,15.5vw,224px),calc(88vw / (var(--chars,8) * .62)))/1.1 Arial,'Sale Plex',sans-serif;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.04em;max-width:none;margin-block:clamp(40px,6vw,96px) 16px;text-align:center;white-space:nowrap}
.footer-meta{font-size:15px;color:var(--green-muted);max-width:none}
.footer-meta a{text-decoration:underline}

/* Load sequence: headline lines rise from their baselines, then the lead, then the till opens. Settled by ~1.3s. */
@media (prefers-reduced-motion:no-preference){
  .hero .lines [data-line]{transform:translateY(105%);animation:rise-line 900ms var(--ease-expo) forwards;animation-delay:calc(120ms + var(--i) * 110ms)}
  .hero [data-load]{opacity:0;transform:translateY(14px);animation:rise 600ms var(--ease-out) 420ms forwards}
  .hero [data-open]{clip-path:inset(0 0 100% 0 round var(--r-lg));animation:open 1000ms var(--ease-in-out) 260ms forwards}
  .hero [data-open] .product img{transform:scale(1.12);animation:settle 1300ms var(--ease-soft) 300ms forwards}
}
@keyframes rise-line{to{transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes open{to{clip-path:inset(0 0 0 0 round var(--r-lg))}}
@keyframes settle{to{transform:none}}

/* Scroll entrances, choreographed per section (only once the script has started) */
@media (prefers-reduced-motion:no-preference){
  .js-motion .reveal{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-expo);transition-delay:var(--delay,0ms)}
  .js-motion .reveal.in{opacity:1;transform:none}
  .js-motion .feature-list li.reveal::before{width:0}
  .js-motion .feature-list li.reveal.in::before{width:48px;transition-delay:calc(var(--delay,0ms) + 250ms)}
  .js-motion .stage.reveal{opacity:1;transform:none;clip-path:inset(0 0 100% 0 round var(--r-lg));transition:clip-path 1100ms var(--ease-in-out)}
  .js-motion .stage.reveal .panel{transform:translateY(40px) scale(.96);transition:transform 1200ms var(--ease-expo) 150ms}
  .js-motion .stage.reveal.in{clip-path:inset(0 0 0 0 round var(--r-lg))}
  .js-motion .stage.reveal.in .panel{transform:none}
  .js-motion .stage.reveal .stock-bar i{transform:scaleX(0);transition:transform 1000ms var(--ease-expo)}
  .js-motion .stage.reveal.in .stock-bar i{transform:none}
  .js-motion .stage.reveal.in .stock-row:nth-of-type(2) i{transition-delay:500ms}
  .js-motion .stage.reveal.in .stock-row:nth-of-type(3) i{transition-delay:600ms}
  .js-motion .stage.reveal.in .stock-row:nth-of-type(4) i{transition-delay:700ms}
  .js-motion .plan.reveal{transform:translateY(40px)}
  .js-motion .plan.reveal.in{transform:none}
  .js-motion .language-samples li.reveal{transform:translateY(24px) rotate(-2deg)}
  .js-motion .language-samples li.reveal.in{transform:none}
  .js-motion .language-samples li.reveal.in:hover{transform:rotate(-1deg)}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .footer-name{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes grow{from{transform:scale(.86) translateY(20%);opacity:.4}to{transform:none;opacity:1}}
  }
}

/* Rolling digits for the day's closing total */
.roll__digits{display:inline-flex;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;line-height:1.15}
.roll__col{display:inline-block;height:1.15em;overflow:clip}
.roll__strip{display:flex;flex-direction:column;transform:translateY(calc(var(--d) * -1.15em))}
.roll__strip>span{height:1.15em}
@media (prefers-reduced-motion:no-preference){
  .roll:not(.is-in) .roll__strip{transform:none}
  .roll.is-in .roll__strip{transition:transform 1100ms var(--ease-expo) calc(300ms + var(--i) * var(--stagger-item))}
}

@media (max-width:1100px){
  .pos-body{grid-template-columns:1fr 1fr}
  .after-sale{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .after-sale .pos-title{grid-column:1/-1;margin-bottom:0}
  .feature-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav nav{display:none}
  .hero-head,.features-head,.step,.languages-grid,.questions-grid,.contact-grid{grid-template-columns:1fr}
  .hero-head{gap:20px}
  .step:nth-of-type(even) .step-text{order:0}
  .plan-grid{grid-template-columns:1fr}
  .plan.featured{order:-1}
}
@media (max-width:640px){
  body{font-size:17px}
  .nav{min-height:66px}
  .brand{font-size:19px}
  .brand svg{width:22px;height:22px}
  .auth-actions{gap:10px;font-size:15px}
  .auth-actions .button{min-height:42px;padding:8px 16px;font-size:15px}
  .hero-lead>p:first-child,.features-head p,.how-intro,.plans-head p,.languages-grid p,.contact-grid>div>p{font-size:18px}
  .hero-actions .button{width:100%}
  .pos{border-radius:22px}
  .pos-bar>span:last-child{display:none}
  .pos-body{grid-template-columns:1fr}
  .after-sale{grid-template-columns:1fr}
  .catalogue,.basket{padding:14px}
  .feature-list{grid-template-columns:1fr;gap:4px}
  .feature-list li{padding:22px 4px}
  .language-samples{grid-template-columns:1fr}
  .stage{padding:16px;border-radius:22px}
  .stock-row{grid-template-columns:6.5em 1fr 4.2em;gap:10px}
  .panel table{font-size:14px}
  .panel th,.panel td{padding:8px 4px}
  .billing-choice{width:100%}
  .billing-choice button{flex:1;padding-inline:12px}
}
@media (max-width:380px){
  .login-link{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}