/* Platform landing — one stylesheet for every page. Mobile first: the base rules are the
   phone layout, every @media (min-width) adds the desktop. One accent (--brand), white
   ground, 80–100 px between sections on desktop, cards radius 16–20 with a soft shadow. */
:root{
  --ink:#1d2b26; --muted:#5c6b64; --paper:#ffffff; --paper-2:#f6f8f7; --card:#ffffff;
  --brand:#6b47e6; --brand-dark:#5636c9; --brand-deep:#3c2494; --brand-soft:#efeafd; --brand-100:#dcd3fa; --brand-300:#cdbdff;
  --line:#e2e8e5; --amber:#c07c1d; --amber-soft:#fbf1dd; --ok:#178a4c; --danger:#b3261e; --danger-soft:#fbe9e7;
  --shadow:0 10px 30px rgba(60,36,148,.08); --shadow-lg:0 24px 60px rgba(60,36,148,.14);
  --r:16px; --r-lg:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Manrope,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:15.5px;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--brand)}
h1,h2,h3,h4{line-height:1.18;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(24px,6.4vw,38px);margin-bottom:12px}
h3{font-size:19px}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:6px 14px;margin-bottom:14px}
.sub{color:var(--muted);max-width:660px;font-size:16px}
.sub b{color:var(--ink)}
section{padding:52px 0}
.center{text-align:center}
.center .sub{margin:0 auto}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:14px;font-weight:700;text-decoration:none;font-size:16px;transition:.15s;border:0;font-family:inherit;cursor:pointer;line-height:1.2}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 22px rgba(107,71,230,.3)}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn-ghost{border:2px solid var(--brand-100);color:var(--brand);background:#fff}
.btn-ghost:hover{border-color:var(--brand);background:var(--brand-soft)}
.btn-white{background:#fff;color:var(--brand)}
.btn-white:hover{background:var(--brand-soft)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;border-radius:999px;padding:4px 12px;background:var(--brand-soft);color:var(--brand);white-space:nowrap}
.badge-amber{background:var(--amber-soft);color:var(--amber)}
.badge-design{background:#eef0ff;color:#3b3f9e}
.badge-real{position:absolute;top:-12px;right:14px;z-index:2;background:var(--amber-soft);color:var(--amber);font-size:12px;font-weight:800;border-radius:999px;padding:4px 12px;box-shadow:var(--shadow)}
.check-list{list-style:none;margin-top:14px}
.check-list li{padding:6px 0 6px 32px;position:relative;font-size:15.5px}
.check-list li::before{content:"✓";position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.check-list li.no::before{content:"—";background:#f0f3f1;color:#9aa8a2}
.check-list li.no{color:#8a9691}

/* ---- ticker + header ---- */
.ticker{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--brand-soft);color:var(--brand-deep);text-decoration:none;padding:10px 16px;font-weight:700;font-size:14px;border-bottom:1px solid var(--brand-100)}
.ticker-arrow{display:inline-block;transition:transform .2s}
.ticker:hover .ticker-arrow{transform:translateX(4px)}
.ticker-badge{background:var(--brand);color:#fff;border-radius:999px;font-size:11.5px;font-weight:800;padding:4px 10px;white-space:nowrap;letter-spacing:.02em}
header.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px}
.logo{font-weight:800;font-size:20px;text-decoration:none;color:var(--brand);letter-spacing:-.01em}
nav.menu{display:none}
nav.menu a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
nav.menu a:hover{color:var(--brand)}
header .cta{margin-left:auto;padding:10px 14px;font-size:14px;box-shadow:none}
.burger{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
/* Phone menu (2026-09-10): a full-screen brand-colour sheet like Horoshop's — lives OUTSIDE header.top,
   because the header's backdrop-filter made it the containing block of a position:fixed child and the old
   drawer was clipped to the 60 px header (links floated over the hero with no background). */
body.menu-open{overflow:hidden}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mmenu{display:none;position:fixed;inset:0;z-index:80;background:var(--brand);color:#fff;flex-direction:column;padding:14px 22px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
body.menu-open .mmenu{display:flex;animation:mmenu-in .22s ease-out}
@keyframes mmenu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mmenu-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.mmenu-brand{color:#fff;font-weight:800;font-size:22px;text-decoration:none;letter-spacing:-.01em}
.mmenu-close{width:44px;height:44px;margin-right:-10px;border:0;background:transparent;color:#fff;font-size:38px;line-height:1;cursor:pointer;font-weight:300}
.mmenu-links{display:flex;flex-direction:column;gap:4px;margin-top:26px;flex:1}
.mmenu-links a{color:#fff;text-decoration:none;font-weight:800;font-size:30px;line-height:1.4;letter-spacing:-.015em}
.mmenu-links a:active{opacity:.75}
.mmenu-links .mmenu-login{color:rgba(255,255,255,.72);font-size:20px;font-weight:700;margin-top:14px}
.mmenu-form{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.mmenu-form input{height:52px;border-radius:12px;border:0;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.mmenu-form input::placeholder{color:#8a8a99}
.mmenu-cta{height:52px;border-radius:12px;border:0;background:#ffc93c;color:#1e1548;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.mmenu-cta:active{background:#ffd65e}
@media(min-width:1080px){.mmenu{display:none!important}}
@media(min-width:1080px){
  nav.menu{display:flex;gap:22px;margin-left:14px}
  .burger{display:none}
  header .cta{padding:11px 18px;font-size:15px}
}

/* ---- hero ---- */
.hero{background:linear-gradient(160deg,var(--brand) 0%,var(--brand-deep) 100%);color:#fff;padding:40px 0 0;overflow:hidden}
.hero .wrap{display:grid;gap:30px}
.hero h1{font-size:clamp(28px,7.4vw,50px);margin-bottom:14px;color:#fff}
.hero h1 em{font-style:normal;color:var(--brand-300)}
.hero .lead{font-size:16px;color:#d6eadf;max-width:560px;margin-bottom:22px}
.hero .free{font-weight:800;font-size:15.5px;color:#fff;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.email-form{display:grid;gap:10px;max-width:520px}
.email-form input{font:inherit;font-weight:600;padding:14px 16px;border:0;border-radius:14px;background:#fff;color:var(--ink);min-width:0;width:100%}
.email-form input:focus{outline:3px solid var(--brand-300)}
.email-form .btn{white-space:nowrap}
.hero .email-form .btn-primary{background:#fff;color:var(--brand);box-shadow:none}
.hero .email-form .btn-primary:hover{background:var(--brand-soft)}
.hero .under{margin-top:12px;font-size:13.5px;color:#b9d8c8}
.hero .under a{color:#fff}
@media(min-width:520px){.email-form{grid-template-columns:1fr auto}}
.hero-stage{position:relative;display:grid;justify-items:center;padding-top:8px}
.hero-stage .frame-phone{width:min(250px,70vw);position:relative;z-index:2}
.hero-stage .frame-laptop{display:none}
@media(min-width:960px){
  .hero{padding:80px 0 0}
  .hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:44px}
  .hero-stage{align-self:end;justify-items:end;min-height:460px}
  .hero-stage .frame-laptop{display:block;width:100%;max-width:600px;margin-bottom:-2px}
  .hero-stage .frame-phone{position:absolute;left:-36px;bottom:24px;width:180px}
}

/* device frames — real screenshots inside */
.frame-browser{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.frame-browser .fb-bar{display:flex;align-items:center;gap:7px;background:#f1f4f2;border-bottom:1px solid var(--line);padding:9px 13px}
.frame-browser .fb-bar i{width:10px;height:10px;border-radius:50%;display:block}
.frame-browser .fb-bar i:nth-child(1){background:#ff5f57}.frame-browser .fb-bar i:nth-child(2){background:#febc2e}.frame-browser .fb-bar i:nth-child(3){background:#28c840}
.frame-browser .fb-url{margin-left:6px;background:#fff;border:1px solid var(--line);border-radius:7px;font-size:12px;color:var(--muted);padding:3px 12px;flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-phone{background:#101b16;border-radius:30px;padding:9px;box-shadow:var(--shadow-lg);display:block}
.frame-phone .fp-scr{border-radius:22px;overflow:hidden;display:block;background:#fff}
.frame-laptop{background:#1b2622;border-radius:18px 18px 6px 6px;padding:12px 12px 0;box-shadow:var(--shadow-lg);position:relative}
.frame-laptop .fl-scr{border-radius:8px 8px 0 0;overflow:hidden;display:block;background:#fff}
.frame-laptop::after{content:"";display:block;height:14px;margin:0 -30px;background:#2b3833;border-radius:0 0 14px 14px}
.shot-img{display:block;width:100%;height:auto;cursor:zoom-in}
.shot-cap{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px}
.crop-h{max-height:420px;overflow:hidden}
.crop-h img{object-fit:cover;object-position:top}
.proof{position:relative}
.mock{background:var(--paper-2);border:1px dashed var(--brand-100);border-radius:var(--r);padding:16px;position:relative}
.mock .badge-design{position:absolute;top:-11px;left:14px}

/* ---- stats ---- */
.stats{background:var(--paper-2);border-bottom:1px solid var(--line);padding:30px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;text-align:center}
.stat b{display:block;font-size:clamp(26px,6vw,34px);font-weight:800;color:var(--brand);line-height:1.1}
.stat span{font-size:13.5px;color:var(--muted);display:block;margin-top:4px}
.stats .live{grid-column:1/-1;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.stats .live a{font-weight:700}
@media(min-width:760px){.stats .wrap{grid-template-columns:repeat(4,1fr)}.stats .live{grid-column:1/-1}}

/* ---- 4 steps ---- */
.steps{display:grid;gap:8px;margin-top:30px;position:relative}
.step{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;padding:14px 0}
.step .ico{width:56px;height:56px;border-radius:16px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.step .ico svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-size:17px;margin-bottom:4px}
.step p{color:var(--muted);font-size:14.5px}
.step .n{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.1em;text-transform:uppercase}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:22px}
  .step{grid-template-columns:1fr;text-align:center;justify-items:center;padding:0}
  .step .ico{width:72px;height:72px;border-radius:22px}
  .step .ico svg{width:34px;height:34px}
}

/* ---- tabs ---- */
.tabs{margin-top:26px}
.tab-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.tab-list::-webkit-scrollbar{display:none}
.tab-list button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font:inherit;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer}
.tab-list button[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.tab-panel{margin-top:18px}
.tab-panel[hidden]{display:none}
.feature{display:grid;gap:22px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.feature h3{font-size:clamp(20px,5vw,26px);margin-bottom:8px}
.feature p{color:var(--muted)}
.feature .viz{min-width:0}
@media(min-width:900px){.feature{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;padding:32px}}

/* ---- marketplace cards ---- */
.mp-grid{display:grid;gap:14px;margin-top:26px}
.mp{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mp-name{font-weight:800;font-size:18px}
.mp .term{font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--brand-soft);color:var(--brand);white-space:nowrap}
.mp .term.warn{background:var(--amber-soft);color:var(--amber)}
.mp ul{list-style:none;font-size:14px;color:var(--muted)}
.mp li{padding:3px 0 3px 22px;position:relative}
.mp li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:800}
.mp li.who{color:var(--ink);font-weight:600}
.mp li.who::before{content:"👤"}
.mp a.more{margin-top:auto;font-weight:700;font-size:14px;text-decoration:none}
@media(min-width:700px){.mp-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.mp-grid{grid-template-columns:repeat(5,1fr);gap:12px}.mp{padding:16px}.mp-name{font-size:16px}}

/* ---- compare tables ---- */
.cmp{width:100%;min-width:600px;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px}
.cmp-wrap{overflow-x:auto;margin-top:16px;border-radius:var(--r)}
.cmp th,.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp th{background:var(--paper-2);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cmp th.us{color:var(--brand)}
.cmp td.us{background:#f3faf6;font-weight:700}
.cmp tr:last-child td{border-bottom:0}
.cmp .y{color:var(--ok);font-weight:800}
.cmp .n{color:#9aa8a2}
.cmp .p{color:var(--amber);font-weight:700}
.cmp td:first-child{font-weight:600;min-width:150px}

/* ---- CRM proofs ---- */
.gal{display:grid;gap:26px;margin-top:30px}
@media(min-width:900px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
.split{display:grid;gap:26px;align-items:center;margin-top:30px}
.split>*{min-width:0}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}.split.rev>.viz{order:2}}
.split h3{font-size:clamp(20px,5vw,26px);margin-bottom:8px}
.split p{color:var(--muted)}
.split p+p{margin-top:10px}

/* ---- AI mock ---- */
.chat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.chat .m{border-radius:14px;padding:10px 14px;font-size:14px;max-width:88%;line-height:1.45}
.chat .m.u{background:var(--brand);color:#fff;justify-self:end;border-bottom-right-radius:4px}
.chat .m.a{background:var(--paper-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat .m.a b{color:var(--brand)}
.chat .photo{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.chat .photo i{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#e9f2ed,#d5e7de);display:block}

/* ---- demo gallery ---- */
.demo-grid{display:grid;gap:18px;margin-top:30px}
.demo{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.demo .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);position:relative}
.demo .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.demo .thumb .soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;font-size:14px;background:repeating-linear-gradient(45deg,#f6f8f7,#f6f8f7 12px,#eef3f0 12px,#eef3f0 24px)}
.demo .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.demo .body h3{font-size:17px}
.demo .body p{color:var(--muted);font-size:14px}
.demo .body .btn{margin-top:auto;align-self:flex-start;padding:10px 16px;font-size:14px}
@media(min-width:700px){.demo-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.demo-grid{grid-template-columns:repeat(3,1fr)}}

/* ---- pricing ---- */
.bill-toggle{display:inline-flex;background:#e9efec;border-radius:12px;padding:5px;margin-top:20px;gap:4px;width:100%;justify-content:center}
.bill-toggle .bt{border:0;background:transparent;font:inherit;font-weight:700;font-size:14px;color:var(--muted);padding:10px 12px;border-radius:9px;cursor:pointer;flex:1}
.bill-toggle .bt.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(19,52,42,.12)}
.bill-toggle .disc{background:var(--brand-soft);color:var(--brand);border-radius:999px;font-size:12px;padding:2px 8px;margin-left:6px}
@media(min-width:600px){.bill-toggle{width:auto}.bill-toggle .bt{padding:10px 20px;font-size:15px;flex:none}}
.price-grid{display:grid;gap:18px;margin-top:28px}
@media(min-width:900px){.price-grid{grid-template-columns:repeat(3,1fr)}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative}
.plan.hot{border:2px solid var(--brand);box-shadow:var(--shadow-lg)}
.plan .best{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:13px;font-weight:700;border-radius:999px;padding:4px 16px;white-space:nowrap}
.plan h3{font-size:21px}
.plan .for{font-size:14px;color:var(--muted);margin:2px 0 14px}
.plan .amount{font-size:36px;font-weight:800;line-height:1.1}
.plan .amount small{font-size:15px;font-weight:600;color:var(--muted)}
.plan .per-year{font-size:13px;color:var(--muted);margin-top:4px;min-height:20px}
.plan .free{font-size:13px;font-weight:700;color:var(--amber);background:var(--amber-soft);border-radius:999px;padding:4px 12px;align-self:flex-start;margin:12px 0 16px}
.plan ul{list-style:none;margin-bottom:22px}
.plan li{padding:6px 0 6px 28px;position:relative;font-size:14.5px}
.plan li::before{content:"✓";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.plan li.no{color:#9aa8a2}
.plan li.no::before{content:"—";background:#f0f3f1;color:#9aa8a2}
.plan li.sep{border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.plan .btn{margin-top:auto}
.oneoff{display:grid;gap:14px;margin-top:26px}
.oneoff .card{display:flex;flex-direction:column;gap:6px}
.oneoff .price{font-weight:800;font-size:22px;color:var(--brand)}
@media(min-width:900px){.oneoff{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.card h3{font-size:18px;margin-bottom:6px}
.card p{font-size:14.5px;color:var(--muted)}
.buyout{margin-top:22px;background:var(--brand-deep);color:#fff;border-radius:var(--r-lg);padding:26px 22px;display:grid;gap:18px;align-items:center;box-shadow:var(--shadow-lg)}
@media(min-width:860px){.buyout{grid-template-columns:1fr auto;padding:32px}}
.buyout h3{font-size:clamp(20px,5vw,26px);margin-bottom:8px}
.buyout p{color:#d6cffa;font-size:15px;max-width:640px}
.buyout .sum{font-size:clamp(30px,8vw,40px);font-weight:800;color:var(--brand-300);white-space:nowrap;line-height:1.1}
.buyout .sum small{display:block;font-size:13.5px;color:#b9c8c1;font-weight:600;margin-top:4px}
.legal{font-size:13px;color:var(--muted);margin-top:20px;max-width:820px}

/* ---- faq ---- */
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:10px;box-shadow:var(--shadow)}
details summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:22px;color:var(--brand);font-weight:600;flex:none}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--muted);font-size:15px}
details p+p{margin-top:8px}

/* ---- final CTA ---- */
.final{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;text-align:center}
.final h2{color:#fff}
.final p{color:#e2dcfb;max-width:600px;margin:0 auto 24px;font-size:16px}
.final .email-form{margin:0 auto}
.final .email-form .btn-primary{background:#fff;color:var(--brand);box-shadow:none}
.final .always{margin-top:16px;font-size:14px;color:#a9ccbc}
.final .always a{color:#fff}

/* ---- footer ---- */
.foot{padding:44px 0 26px;border-top:1px solid var(--line);background:var(--paper-2);font-size:14px}
.foot-grid{display:grid;gap:26px}
.foot h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.foot-grid a{display:block;color:var(--ink);text-decoration:none;padding:4px 0}
.foot-grid a:hover{color:var(--brand)}
.foot-logo{font-weight:800;font-size:20px;color:var(--brand)}
.foot-tag{color:var(--muted);margin:6px 0 10px;max-width:280px}
.foot-live{color:var(--muted);font-size:13.5px}
.foot-live a{display:inline;padding:0;font-weight:700;color:var(--brand)}
.foot-note{display:block;color:var(--muted);padding:4px 0}
.foot-bottom{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media(min-width:700px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}

/* ---- lightbox ---- */
#lb{position:fixed;inset:0;background:rgba(16,27,22,.9);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
#lb img{max-width:96vw;max-height:94vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
@media(max-width:899px){#lb{overflow:auto;align-items:flex-start;justify-content:flex-start;padding:10px}#lb img{max-width:none;max-height:none;width:920px;border-radius:8px}}

/* ---- inner pages ---- */
.page-head{padding:40px 0 10px}
.page-head h1{font-size:clamp(28px,7vw,44px);margin-bottom:12px}
.prose{max-width:760px}
.prose h2{font-size:clamp(21px,5vw,28px);margin-top:36px}
.prose h3{margin-top:22px;margin-bottom:6px}
.prose p,.prose li{color:var(--muted);font-size:15.5px}
.prose ul,.prose ol{padding-left:22px;margin-top:8px}
.prose li{margin:4px 0}
.prose b{color:var(--ink)}
.notice{background:var(--amber-soft);border:1px solid #f1dfb6;color:#7a4d0c;border-radius:14px;padding:14px 16px;font-size:14px;margin:18px 0}
.notice b{color:#5c3a06}
.kv{display:grid;grid-template-columns:1fr;gap:2px 14px;font-size:14.5px;margin-top:10px}
.kv dt{color:var(--muted);margin-top:8px}
.kv dd{font-weight:600;overflow-wrap:anywhere}
@media(min-width:600px){.kv{grid-template-columns:auto 1fr;gap:6px 14px}.kv dt{margin-top:0}}
.prose code,.login-note code{font-size:.92em;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* ---- desktop spacing ---- */
@media(min-width:900px){
  body{font-size:16.5px}
  section{padding:88px 0}
  h2{font-size:clamp(28px,4vw,40px);margin-bottom:14px}
  .sub{font-size:17.5px}
  .stats{padding:34px 0}
  .card{padding:26px}
}


/* 2026-09-08: two-way entry (самі / під ключ), plain-language blocks */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 10px; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 28px; }
.way { background: var(--paper, #fff); border: 1px solid var(--line, #dfe3e8); border-radius: 16px; padding: 22px 24px; }
.way.hot { border-width: 2px; border-color: var(--brand); }
.way h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.25; }
.way ol { padding-left: 20px; margin: 8px 0 14px; }
.way li { margin-bottom: 6px; }
.way p { margin: 0 0 12px; }
.way .small { font-size: 14px; opacity: .85; }
.way .btn { margin-top: 4px; }


/* 2026-09-08 (2): shorter hero, the scheme, the strip, click-to-open lists */
.lead-big { font-weight: 700; font-size: 1.15em; }
.hero-points { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.hero-points li { position: relative; padding-left: 26px; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 3px rgba(255,255,255,.9); }
.how { padding: 48px 0 40px; border-bottom: 1px solid var(--line, #e2e8e5); }
.scheme { display: grid; grid-template-columns: 1fr 100px 1.2fr 130px 1fr; align-items: center; gap: 12px; margin-top: 28px; }
.sc-node { text-align: center; padding: 18px 14px; border: 1px solid var(--line, #e2e8e5); border-radius: 16px; background: #fff; }
.sc-node.sc-main { border: 2px solid var(--brand); box-shadow: 0 10px 30px rgba(107,71,230,.14); }
.sc-node b { display: block; font-size: 17px; margin: 6px 0 4px; }
.sc-node span { display: block; font-size: 13px; opacity: .75; line-height: 1.35; }
.sc-ico { width: 44px; height: 44px; margin: 0 auto; }
.sc-ico svg { width: 44px; height: 44px; fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-arrow { text-align: center; font-size: 12px; opacity: .8; display: grid; gap: 2px; }
.sc-arrow svg { width: 100%; height: 22px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-under { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.sc-under div { text-align: center; font-size: 14px; }
.sc-under b { display: block; margin-bottom: 2px; }
.sc-under span { opacity: .75; }
.strip { list-style: none; counter-reset: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 26px 0 16px; padding: 0; }
.strip li { background: #fff; border: 1px solid var(--line, #e2e8e5); border-radius: 14px; padding: 16px 14px; font-size: 14px; line-height: 1.35; }
.strip b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; margin-bottom: 10px; }
.strip span { display: block; }
.small { font-size: 14px; }
.muted { opacity: .8; }
details.inc { margin: 6px 0 14px; }
details.inc summary { cursor: pointer; font-weight: 700; color: var(--brand); list-style: none; }
details.inc summary::before { content: "+"; display: inline-block; width: 18px; font-weight: 800; }
details.inc[open] summary::before { content: "–"; }
details.inc ul { margin: 10px 0 0 18px; padding: 0; font-size: 14px; }
details.inc li { margin-bottom: 5px; }
details.inc li.no { opacity: .75; }
details.way summary { font-size: 19px; }
details.way p { margin-top: 10px; }
.q { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; opacity: .7; cursor: help; margin-left: 4px; }
@media (max-width: 860px) {
  .scheme { grid-template-columns: 1fr; }
  .sc-arrow svg { transform: rotate(90deg); height: 40px; width: 40px; margin: 0 auto; }
  .strip { grid-template-columns: 1fr; }
  .sc-under { grid-template-columns: 1fr; }
}


/* 2026-09-08 (3): the «no accounts yet» note in the hero; phone to the RIGHT of the laptop */
.hero-note { margin: 12px 0 4px; padding: 10px 14px; border-left: 3px solid rgba(255,255,255,.75); background: rgba(255,255,255,.09); border-radius: 8px; max-width: 560px; font-size: 15px; line-height: 1.45; }
.hero-stage::before { content: ""; position: absolute; left: 10%; right: 0; bottom: -40px; height: 70%; background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.16), transparent 68%); z-index: 0; pointer-events: none; }
@media(min-width:960px){
  .hero-stage { justify-items: start; padding-right: 170px; }
  .hero-stage .frame-laptop { max-width: 640px; z-index: 1; }
  .hero-stage .frame-phone { left: auto; right: 0; bottom: 14px; width: 200px; transform: rotate(-3deg); transform-origin: bottom center; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
}

.lead-big { font-size: 1.08em; }


/* 2026-09-08 (4): no fake laptop — a clean floating screenshot card; the phone overlaps its corner */
.frame-laptop { background: none; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 30px 70px rgba(0,0,0,.38); }
.frame-laptop::after { display: none; }
.frame-laptop .fl-scr { border-radius: 16px; }
@media(min-width:960px){
  .hero-stage { padding-right: 150px; min-height: 420px; }
  .hero-stage .frame-laptop { max-width: 620px; margin-bottom: 30px; }
  .hero-stage .frame-phone { right: 0; bottom: 0; width: 190px; transform: rotate(-3deg); }
}


/* 2026-09-08 (5): the phone carousel on mobile — catalogue, filters, product, cart, checkout, then the CTA */
.phone-swipe { display: block; margin: 18px -20px 0; padding-bottom: 6px; }
.ps-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 20px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ps-track::-webkit-scrollbar { display: none; }
.ps-slide { flex: 0 0 min(300px, 78vw); scroll-snap-align: center; margin: 0; }
.ps-slide .frame-phone { width: 100%; }
.ps-slide .fp-scr { aspect-ratio: 390 / 664; display: block; }
.ps-slide .fp-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ps-slide figcaption { text-align: center; font-size: 13px; opacity: .85; margin-top: 8px; }
.ps-cta { display: grid !important; place-content: center; text-align: center; gap: 14px; padding: 24px; background: radial-gradient(circle at 50% 30%, var(--brand-soft), #fff 70%) !important; color: var(--ink); }
.ps-cta b { font-size: 22px; line-height: 1.2; }
.ps-cta-note { font-size: 13px; color: var(--muted); }
.ps-dots { display: flex; justify-content: center; gap: 7px; margin-top: 2px; }
.ps-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .2s; }
.ps-dots i.on { background: #fff; }
@media(max-width:959px){ .hero-stage { display: none; } }
@media(min-width:960px){ .phone-swipe { display: none; } }

/* 2026-09-08 (6): the carousel must not widen the hero column (a flex track inside a grid cell sizes to max-content without min-width:0) */
.hero .wrap > * { min-width: 0; }
.phone-swipe { width: calc(100% + 40px); max-width: 100vw; overflow: hidden; }
.ps-track { width: 100%; }
.hero { overflow-x: clip; }


/* 2026-09-08 (7): one phone, the SCREENS swipe inside it */
.phone-swipe { width: 100%; max-width: none; margin: 18px 0 0; overflow: visible; }
.ps-phone { width: min(300px, 78vw); margin: 0 auto; }
.ps-phone .fp-scr { aspect-ratio: 390 / 664; display: block; overflow: hidden; }
.ps-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ps-track::-webkit-scrollbar { display: none; }
.ps-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; margin: 0; }
.ps-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ps-cta { display: grid; place-content: center; text-align: center; gap: 14px; padding: 24px; background: radial-gradient(circle at 50% 30%, var(--brand-soft), #fff 70%); color: var(--ink); }
.ps-cap { text-align: center; font-size: 13px; opacity: .85; margin-top: 10px; }
.ps-dots { margin-top: 6px; }

/* 2026-09-08 (8): the phone nearly full width like Horoshop's, white bezel, dots inside the bezel */
.phone-swipe { margin-top: 14px; }
.ps-phone { width: min(400px, 94vw); background: #fff; padding: 12px 12px 8px; border-radius: 38px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.ps-phone .fp-scr { border-radius: 26px; aspect-ratio: 390 / 700; }
.ps-cap { color: #fff; font-size: 14px; margin-top: 12px; }
.ps-dots { margin-top: 8px; }


/* 2026-09-08 (9): Horoshop-like phone — full width inside the padding, tall, white bezel with a notch, dots in the bezel, hangs into the next section */
.phone-swipe { width: 100%; margin: 16px 0 -140px; position: relative; z-index: 3; }
.ps-phone { width: 100%; max-width: 420px; margin: 0 auto; background: #fff; padding: 34px 10px 12px; border-radius: 44px; box-shadow: 0 30px 70px rgba(0,0,0,.3); position: relative; }
.ps-notch { position: absolute; top: 12px; left: 50%; width: 120px; height: 24px; margin-left: -60px; border-radius: 14px; background: #eef0f3; }
.ps-phone .fp-scr { aspect-ratio: auto; height: min(72vh, 640px); border-radius: 28px; }
.ps-phone .ps-dots { margin: 12px 0 2px; }
.ps-phone .ps-dots i { background: #d7dbe3; }
.ps-phone .ps-dots i.on { background: var(--brand); }
.ps-cap { display: none; }
@media(max-width:959px){ .hero { padding-bottom: 0; } .how { padding-top: 170px; } }

/* 2026-09-08 (10): the hero clipped the hanging phone (overflow-x:clip forces overflow-y) — visible on phones */
@media(max-width:959px){ .hero { overflow: visible; } .hero .wrap { overflow: visible; } }

/* 2026-09-08 (11): the phone the way Horoshop draws it — screen up to the top edge, the notch cut INTO the content, side buttons, height to the bottom of the viewport */
.ps-phone { padding: 10px 10px 10px; border-radius: 46px; position: relative; overflow: visible; }
.ps-phone .fp-scr { height: calc(100svh - 150px); min-height: 520px; max-height: 820px; border-radius: 36px; position: relative; }
.ps-notch { top: 10px; width: 130px; height: 30px; margin-left: -65px; background: #fff; border-radius: 0 0 18px 18px; z-index: 3; }
.ps-phone .ps-dots { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; z-index: 3; }
.ps-phone .ps-dots i { background: rgba(0,0,0,.18); width: 8px; height: 8px; }
.ps-phone .ps-dots i.on { background: var(--brand); }
/* side buttons: two on the left (volume), one on the right (power) */
.ps-phone::before { content: ""; position: absolute; left: -4px; top: 120px; width: 4px; height: 44px; border-radius: 3px 0 0 3px; background: #dfe3ea; box-shadow: 0 64px 0 #dfe3ea; }
.ps-phone::after { content: ""; position: absolute; right: -4px; top: 150px; width: 4px; height: 70px; border-radius: 0 3px 3px 0; background: #dfe3ea; }
.ps-slide img { object-position: top; }
@media(max-width:959px){ .phone-swipe { margin-bottom: -60px; } .how { padding-top: 90px; } }
/* dots in the white bezel under the screen, not over the shop's bottom menu */
.ps-phone { padding-bottom: 38px; }
.ps-phone .ps-dots { bottom: 14px; }


/* 2026-09-08 (12): Horoshop-wide container; desktop hero = text + phone + browser window cut by the hero's edge; e-mail form on desktop, buttons on phones */
.wrap { max-width: 1280px; padding: 0 24px; }
.hero-desktop { display: none; }
.hero-launch a { color: #fff; text-decoration: underline; }
.hero-mobile { display: flex; }
@media(min-width:960px){
  .hero-desktop { display: block; }
  form.hero-desktop { display: flex; }
  .hero-mobile { display: none; }
  .hero { padding: 64px 0 0; overflow: hidden; }
  .hero .wrap { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: end; gap: 40px; }
  .hero .wrap > div:first-child { padding-bottom: 72px; }
  .hero-stage.hs { position: relative; justify-items: stretch; padding: 0; min-height: 520px; margin-bottom: 0; }
  .hero-stage.hs::before { display: none; }
  .hs-phone { position: absolute; left: 0; bottom: -200px; width: 290px; z-index: 2; background: #fff; padding: 10px; border-radius: 40px; box-shadow: 0 30px 60px rgba(0,0,0,.28); transform: none; }
  .hs-phone .fp-scr { border-radius: 30px; aspect-ratio: 390 / 760; display: block; overflow: hidden; }
  .hs-phone .fp-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .hs-phone .ps-notch { width: 110px; height: 26px; margin-left: -55px; top: 10px; }
  .hs-browser { position: absolute; left: 250px; right: -60px; bottom: -80px; z-index: 1; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 30px 60px rgba(0,0,0,.28); overflow: hidden; }
  .hs-bar { height: 28px; background: #f1f3f6; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
  .hs-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d3d8df; }
  .hs-browser img { display: block; width: 100%; height: auto; }
}

/* 2026-09-08 (13): the desktop composition wins over the older phone rules; phone from the top-left, browser to the right, both cut by the hero's edge */
@media(min-width:960px){
  .hero-stage.hs { min-height: 600px; align-self: stretch; }
  .hero-stage.hs .frame-phone.hs-phone { position: absolute; left: 0; top: 30px; bottom: auto; right: auto; width: 300px; transform: none; z-index: 2; }
  .hero-stage.hs .hs-browser { position: absolute; left: 240px; right: -80px; top: 120px; bottom: auto; }
}
/* anchored to the bottom edge like Horoshop — both cut by the hero */
@media(min-width:960px){
  .hero-stage.hs .frame-phone.hs-phone { top: auto; bottom: -140px; width: 320px; }
  .hero-stage.hs .hs-browser { top: auto; bottom: -30px; left: 260px; }
}
@media(min-width:960px){ .hero-stage.hs .frame-phone.hs-phone { bottom: -190px; } .hero-stage.hs .hs-phone .fp-scr { aspect-ratio: 390 / 900; } }
@media(min-width:960px){ .hero-stage.hs .hs-phone .fp-scr { aspect-ratio: 390 / 664; } .hero-stage.hs .frame-phone.hs-phone { bottom: -110px; width: 330px; } }


/* 2026-09-08 (14): the hero one-to-one with Horoshop — 620 px text column, phone + browser window at the same top, the browser running past the container, both cut by the hero's edge, screens rotating */
@media(min-width:960px){
  .hero { height: 660px; padding: 56px 0 0; overflow: hidden; }
  .hero .wrap { grid-template-columns: 620px minmax(0, 1fr); gap: 60px; align-items: start; height: 100%; }
  .hero .wrap > div:first-child { padding: 40px 0 0; }
  .hero h1 { font-size: 46px; line-height: 1.12; }
  .hero-stage.hs { position: relative; min-height: 0; height: 100%; padding: 0; margin: 0; align-self: start; }
  .hero-stage.hs::before { display: none; }
  .hero-stage.hs .frame-phone, .hero-stage.hs .hs-phone { position: absolute; left: 0; top: 0; bottom: auto; width: 300px; transform: none; z-index: 2; background: #fff; border-radius: 40px 40px 0 0; padding: 10px 10px 0; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
  .hs-status { position: relative; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 12px; color: #333; font-weight: 600; }
  .hs-status .hs-notch { position: absolute; left: 50%; top: -10px; width: 120px; height: 26px; margin-left: -60px; background: #fff; border-radius: 0 0 16px 16px; border: 1px solid #ececec; border-top: 0; }
  .hs-icons { letter-spacing: 1px; font-size: 10px; }
  .hs-screen { position: relative; overflow: hidden; background: #fff; }
  .hs-phone .hs-screen { border-radius: 22px 22px 0 0; height: 640px; }
  .hs-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .8s ease; }
  .hs-screen img.on { opacity: 1; }
  .hero-stage.hs .hs-browser { position: absolute; left: 350px; right: auto; width: 620px; top: 0; bottom: auto; background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 30px 60px rgba(0,0,0,.25); overflow: hidden; z-index: 1; }
  .hs-browser .hs-screen { height: 620px; }
  .hs-bar { height: 30px; background: #f3f4f6; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
  .hs-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d3d8df; }
}
@media(min-width:1280px){ .hero-stage.hs .hs-browser { width: 660px; } }
@media(prefers-reduced-motion: reduce){ .hs-screen img { transition: none; } }
/* screens keep the screenshots' own proportions (390×900 phone, 1400×1100 desktop) — no cropping */
@media(min-width:960px){
  .hs-phone .hs-screen { height: auto; aspect-ratio: 390 / 900; }
  .hs-browser .hs-screen { height: auto; aspect-ratio: 1400 / 1100; }
}
@media(min-width:960px){ .hs-browser .hs-screen { aspect-ratio: 1400 / 1260; } }


/* 2026-09-08 (15): square screen corners on the desktop phone, a status bar the notch does not cut, CSS signal/wifi/battery, checkout as the 4th screen; the mobile carousel fills the width and cuts at the bottom, never at the sides */
@media(min-width:960px){
  .hs-phone .hs-screen { border-radius: 0; }
  .hs-status { height: 44px; padding: 0 14px 0 22px; font-size: 14px; }
  .hs-status .hs-notch { top: 0; width: 104px; height: 28px; margin-left: -52px; background: #111; border: 0; border-radius: 0 0 16px 16px; }
  .hs-icons { display: flex; align-items: center; gap: 5px; letter-spacing: 0; }
  .hs-icons i { display: block; }
  .hs-sig { width: 16px; height: 10px; background: linear-gradient(to right, #333 0 3px, transparent 3px 4px, #333 4px 7px, transparent 7px 8px, #333 8px 11px, transparent 11px 12px, #333 12px 15px, transparent 15px); clip-path: polygon(0 60%, 4px 60%, 4px 40%, 8px 40%, 8px 20%, 12px 20%, 12px 0, 16px 0, 16px 100%, 0 100%); }
  .hs-wifi { width: 14px; height: 10px; border: 2px solid #333; border-color: #333 transparent transparent transparent; border-radius: 50% 50% 0 0 / 100% 100% 0 0; box-sizing: border-box; position: relative; }
  .hs-wifi::after { content: ""; position: absolute; left: 4px; top: 4px; width: 2px; height: 2px; background: #333; border-radius: 50%; }
  .hs-bat { width: 22px; height: 11px; border: 1.5px solid #333; border-radius: 3px; box-sizing: border-box; position: relative; }
  .hs-bat::before { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 13px; background: #333; border-radius: 1px; }
  .hs-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: #333; border-radius: 0 1px 1px 0; }
}
.ps-phone .fp-scr img { height: auto; object-fit: unset; }


/* 2026-09-08 (16): Horoshop's mockup sizes — phone 302 px and browser window 553 px, both 598 px tall, both cut by the hero's bottom edge */
@media(min-width:960px){
  .hero { height: 640px; }
  .hero-stage.hs .frame-phone, .hero-stage.hs .hs-phone { width: 302px; height: 598px; padding: 10px 10px 0; overflow: hidden; }
  .hs-phone .hs-screen { height: 544px; aspect-ratio: auto; }
  .hero-stage.hs .hs-browser { left: 340px; width: 553px; height: 598px; }
  .hs-browser .hs-screen { height: 568px; aspect-ratio: auto; }
}
@media(min-width:1280px){ .hero-stage.hs .hs-browser { width: 553px; } }


/* 2026-09-08 (17): the phone carousel scrolls sideways only — overflow-x:auto alone made the vertical axis scrollable too once the screens grew taller than the phone */
.ps-track { overflow-y: hidden; touch-action: pan-x pan-y; } /* pan-x alone swallowed the page's vertical scroll when the finger started on the phone */
.ps-slide { overflow: hidden; }


/* 2026-09-08 (18): the checkout slide on phones walks its four steps by itself; on desktop the phone walks them while the browser window holds the checkout page */
.ps-stack { position: relative; display: block; width: 100%; height: 100%; }
.ps-stack img { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transition: opacity .6s ease; }
.ps-stack img.on { opacity: 1; }


/* 2026-09-08 (19): the five marketplace logos under the hero subtitle, on white chips (the wordmarks are dark) — the h1 keeps the names as text */
.mp-logos { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 18px 0 4px; }
.mp-logos li { background: #fff; border-radius: 10px; height: 42px; padding: 0 14px; display: flex; align-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.mp-logos img { display: block; height: 22px; width: auto; }
.mp-logos img[alt="EVA"] { height: 26px; }
.mp-logos img[alt="Kasta"] { height: 18px; }
@media(min-width:960px){ .mp-logos { margin: 22px 0 8px; } }


/* 2026-09-08 (20): the marketplace logos sit inside the h1 in place of the names (owner's call); the names stay as visually-hidden text for search engines and screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h1-logos { display: inline; }
.h1-logos img { display: inline-block; vertical-align: middle; height: .86em; width: auto; margin: 0 .05em .12em; padding: .16em .24em; box-sizing: border-box; background: #fff; border-radius: .2em; box-shadow: 0 4px 14px rgba(0,0,0,.14); }



/* 2026-09-08 (22): the hero pared down to Horoshop's weight — one sentence, one button, one small line; the 6 000 ₴ offer speaks only from the band below */
.hero .under { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.82); font-weight: 600; }
@media(max-width:959px){ .hero .under { text-align: center; margin-top: 10px; } .hero-cta.hero-mobile { margin-top: 22px; } }
@media(min-width:960px){ .hero .under { margin-top: 12px; } }
@media(max-width:959px){ .hero-cta.hero-mobile .btn { width: 100%; text-align: center; } }


/* 2026-09-08 (23): the hero's call to action in warm yellow — the one colour that stands off the purple (Horoshop: yellow on blue) */
.hero .email-form .btn-primary, .hero .hero-cta .btn-primary { background: #ffc93c; border-color: #ffc93c; color: #1e1548; box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.hero .email-form .btn-primary:hover, .hero .hero-cta .btn-primary:hover { background: #ffd65e; border-color: #ffd65e; color: #1e1548; }




/* 2026-09-09 (27): «Як це працює» becomes the living orbit — the site in the core (breathing), five marketplaces on the right half of a dashed orbit, a heartbeat every 2.6 s sends the wave and the update dots out together; orders come back each in its own rhythm; supplier feeds appear on the left only behind the «дропшипінг» switch */
.orb-top { display: flex; justify-content: center; margin: 4px 0 6px; }
.orb-chip { appearance: none; font: inherit; font-weight: 700; font-size: 14px; border: 2px solid var(--brand-100); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.orb-chip i { width: 34px; height: 20px; border-radius: 999px; background: var(--brand-100); position: relative; transition: background .2s; }
.orb-chip i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.orb-chip[aria-pressed="true"] { border-color: var(--brand); }
.orb-chip[aria-pressed="true"] i { background: var(--brand); }
.orb-chip[aria-pressed="true"] i::after { transform: translateX(14px); }
.orb-chip:focus-visible { outline: 3px solid #ffc93c; outline-offset: 2px; }
.org { --core: 170px; --satw: 118px; --sath: 48px; --logo: 20px; --feedw: 132px; position: relative; width: min(640px, 100%); aspect-ratio: 1; margin: 0 auto; }
.org .membrane { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(107,71,230,.06) 0 55%, transparent 72%); animation: orb-breathe 5s ease-in-out infinite; }
.org .ringline { position: absolute; inset: 14%; border: 2px dashed var(--brand-100); border-radius: 50%; animation: orb-spin 80s linear infinite; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.org .core { position: absolute; left: 50%; top: 50%; width: var(--core); height: var(--core); margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2); border-radius: 50%; background: #fff; border: 2px solid var(--brand); display: grid; place-content: center; text-align: center; gap: 3px; box-shadow: 0 12px 32px rgba(60,36,148,.12); z-index: 3; animation: orb-breathe 5s ease-in-out infinite; }
.org .core b { font-size: 17px; line-height: 1.1; color: var(--ink); }
.org .core span { font-size: 11px; color: var(--muted); line-height: 1.25; }
.org .wave { position: absolute; left: 50%; top: 50%; width: var(--core); height: var(--core); margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2); border-radius: 50%; border: 2px solid var(--brand); opacity: 0; z-index: 2; pointer-events: none; }
.org .wave.go { animation: orb-wave 2.6s linear 1; }
@keyframes orb-wave { 0% { transform: scale(1); opacity: .55; } 50% { transform: scale(3.15); opacity: .28; } 62% { transform: scale(3.5); opacity: 0; } 100% { transform: scale(3.5); opacity: 0; } }
.org .spoke { position: absolute; left: 50%; top: 50%; height: 2px; background: var(--brand-100); transform-origin: 0 50%; z-index: 1; }
.org .spoke::before, .org .spoke::after { content: ""; position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 50%; }
.org .spoke.two::before { background: var(--brand); }
.org .spoke.two.go::before { animation: orb-out 2.6s linear 1; }
.org .spoke.two::after { background: #ffc93c; animation: orb-back var(--gp, 7s) linear infinite; animation-delay: var(--gd, 0s); }
.org .spoke.in::before { background: var(--brand-soft); border: 1.5px dashed var(--brand); box-sizing: border-box; width: 11px; height: 11px; top: -5px; animation: orb-back 3.4s linear infinite; animation-delay: var(--d, 0s); } /* the feed dot matches the legend: light fill, dashed rim */
@keyframes orb-out { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 45% { opacity: 1; } 50% { left: calc(100% - 9px); opacity: 0; } 100% { left: calc(100% - 9px); opacity: 0; } }
@keyframes orb-back { 0% { left: calc(100% - 9px); opacity: 0; } 10% { opacity: 1; } 45% { opacity: 1; } 50% { left: 0; opacity: 0; } 100% { left: 0; opacity: 0; } }
.org .sat { position: absolute; left: 50%; top: 50%; width: var(--satw); height: var(--sath); margin: calc(var(--sath) / -2) 0 0 calc(var(--satw) / -2); background: #fff; border: 1.5px solid var(--brand-100); border-radius: 12px; display: grid; place-items: center; box-shadow: 0 12px 32px rgba(60,36,148,.10); z-index: 3; transition: border-color .3s, box-shadow .3s; }
.org .sat img { height: var(--logo); width: auto; display: block; }
.org .sat.hit { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft), 0 12px 32px rgba(60,36,148,.10); }
.org .sat .bob { animation: orb-bob 6s ease-in-out infinite; animation-delay: var(--d, 0s); display: grid; place-items: center; width: 100%; height: 100%; }
@keyframes orb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.org .feed { position: absolute; left: 50%; top: 50%; width: var(--feedw); padding: 8px 10px; margin: -26px 0 0 calc(var(--feedw) / -2); background: var(--brand-soft); border: 1.5px dashed var(--brand); border-radius: 12px; text-align: center; z-index: 3; transform: scale(0); opacity: 0; transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .4s; }
.org .feed.on { opacity: 1; }
.org .feed b { display: block; font-size: 12px; color: var(--brand-deep); }
.org .feed span { font-size: 11px; color: var(--muted); }
.org .fspoke { opacity: 0; transition: opacity .4s; }
.org .fspoke.on { opacity: 1; }
.org[data-drop="0"] .feed, .org[data-drop="0"] .fspoke { opacity: 0 !important; }
.orb-cap { text-align: center; margin: 14px auto 0; max-width: 62ch; font-size: 15.5px; color: var(--ink); }
.orb-cap b { color: var(--brand-deep); }
.orb-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
.orb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; }
.orb-legend-feed i { background: var(--brand-soft); border: 1px dashed var(--brand); }
.orb-legend-feed { display: none; }
.how.drop .orb-legend-feed { display: inline; }
@media(max-width:959px){ .org { --core: 104px; --satw: 84px; --sath: 40px; --logo: 15px; --feedw: 96px; } .org .core b { font-size: 13px; } .org .core span { font-size: 9.5px; } .org .feed { padding: 6px 8px; margin-top: -22px; } .org .feed b { font-size: 11px; } .org .feed span { font-size: 9.5px; } .org .ringline { inset: 12%; } }
@media(prefers-reduced-motion: reduce){ .org * { animation: none !important; } .org .feed { transform: none; } }

.org .feed b.s { display: none; }
@media(max-width:959px){ .org { --feedw: 84px; } .org .feed { padding: 7px 6px; margin-top: -20px; } .org .feed b.l, .org .feed span { display: none; } .org .feed b.s { display: block; font-size: 12px; } .org .feed::after { content: "XML"; display: block; font-size: 9.5px; color: var(--muted); } }


/* 2026-09-09 (28): «Два шляхи» shows the process instead of describing it — «Під ключ» as one working day (yellow = what the client does), «Самі» as the admin checklist ticking itself; the «Що входить» list lives in a dialog */
.ways2 { background: var(--brand-soft); border-top: 1px solid var(--brand-100); border-bottom: 1px solid var(--brand-100); }
.ways2 .wrap { padding-top: 40px; padding-bottom: 44px; }
.w2-h { font-size: 28px; line-height: 1.25; margin: 0 0 18px; color: var(--brand-deep); }
.w2-h span { color: var(--ink); font-weight: 600; }
.w2-split { display: grid; gap: 18px; }
.w2-path { border: 1.5px solid var(--brand-100); border-radius: 18px; padding: 20px 22px; display: grid; gap: 14px; align-content: start; background: #fff; }
.w2-path.hot { border-color: var(--brand); box-shadow: 0 12px 30px rgba(107,71,230,.12); }
.w2-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.w2-ph h3 { margin: 0; font-size: 20px; }
.w2-price { font-size: 26px; font-weight: 800; color: var(--brand-deep); line-height: 1; }
.w2-price small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.w2-price small a { color: var(--brand-dark); }
.w2-day { position: relative; padding-left: 26px; display: grid; gap: 12px; }
.w2-day::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--brand-100); }
.w2-fill { position: absolute; left: 8px; top: 6px; width: 2px; background: var(--brand); height: 0; transition: height .6s linear; }
.w2-mo { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: baseline; opacity: .5; transition: opacity .4s; }
.w2-mo::before { content: ""; position: absolute; left: -23px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--brand-100); transition: border-color .3s, background .3s; }
.w2-mo.on { opacity: 1; }
.w2-mo.on::before { border-color: var(--brand); background: var(--brand); }
.w2-mo time { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--brand-deep); font-size: 14px; }
.w2-mo span { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.w2-mo.you time { color: #8a5a00; }
.w2-mo.you.on::before { background: #ffc93c; border-color: #ffc93c; }
.w2-chk { display: grid; gap: 7px; }
.w2-ck { display: flex; align-items: center; gap: 10px; font-size: 14.5px; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); transition: background .3s; color: var(--ink); }
.w2-ck i { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--brand-100); display: grid; place-items: center; background: #fff; flex: 0 0 auto; transition: background .25s, border-color .25s; }
.w2-ck i::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.w2-ck.done i { background: #2f9e6b; border-color: #2f9e6b; }
.w2-ck.done i::after { opacity: 1; }
.w2-ck.done { background: transparent; }
.w2-ai { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--brand); background: #fff; border: 1px solid var(--brand-100); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.w2-note { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.w2-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.w2-more { font: inherit; font-size: 13.5px; color: var(--muted); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; }
.w2-dlg { border: 0; border-radius: 18px; padding: 0; max-width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(30,21,72,.35); }
.w2-dlg::backdrop { background: rgba(30,21,72,.45); }
.w2-dlg-in { padding: 22px 24px 24px; display: grid; gap: 14px; }
.w2-dlg-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.w2-dlg-top h3 { margin: 0; font-size: 20px; color: var(--brand-deep); }
.w2-x { font: inherit; font-size: 26px; line-height: 1; border: 0; background: var(--brand-soft); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.w2-inc { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink); }
.w2-inc li.no { color: var(--muted); }
.w2-dlg .btn { justify-self: start; }
@media(max-width:959px){ .ways2 .wrap { padding-top: 32px; } .w2-h { font-size: 22px; } .w2-path { padding: 16px; } .w2-foot .btn { flex: 1 1 100%; text-align: center; } .w2-more { flex: 1 1 100%; text-align: center; } }
@media(min-width:960px){ .w2-split { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media(prefers-reduced-motion: reduce){ .w2-mo { opacity: 1; } .w2-fill { transition: none; } }

.w2-dlg { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; } /* the global margin reset had pinned it to the corner */
.w2-split { align-items: start; }

.w2-mo span b { color: var(--brand-deep); }
.w2-mo.you span b { color: #8a5a00; }


/* 2026-09-09 (29): the moderation block — marketplaces' refusals on the left, the system's fixes on the right (desktop); on phones each refusal card flips in place into its fix */
.md { max-width: 980px; margin: 26px auto 0; position: relative; }
.md-heads { display: none; }
.md-list { display: grid; gap: 10px; position: relative; }
.md-pair { position: relative; perspective: 800px; min-height: 52px; }
.md-rej, .md-fix { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.md-rej { background: #fdecea; }
.md-fix { background: #e6f6ee; }
.md-fix b { color: #2f9e6b; }
.md-rej img, .md-fix img { height: 14px; width: auto; margin-top: 3px; background: #fff; border-radius: 4px; padding: 1px 3px; flex: 0 0 auto; }
.md-tag { position: absolute; right: -4px; top: -8px; z-index: 2; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.md-pair.on .md-tag { opacity: 1; transform: scale(1); }
.md-bot { display: none; }
.md-meter { margin-top: 14px; display: grid; gap: 5px; }
.md-bar { height: 8px; border-radius: 999px; background: var(--brand-soft); overflow: hidden; }
.md-bar i { display: block; height: 100%; background: #2f9e6b; width: 0; transition: width .5s; }
.md-meter > span { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; }
@media(max-width:959px){
  .md-pair { display: grid; }
  .md-pair > .md-rej, .md-pair > .md-fix { grid-area: 1 / 1; backface-visibility: hidden; transition: transform .6s cubic-bezier(.4,0,.2,1); } /* both faces stay in flow: the pair is as tall as the taller face, no JS measuring */
  .md-pair > .md-fix { transform: rotateX(180deg); }
  .md-pair.on > .md-rej { transform: rotateX(-180deg); }
  .md-pair.on > .md-fix { transform: rotateX(0); }
}
@media(min-width:960px){
  .md-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; margin-bottom: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .md-list { grid-template-columns: 1fr 1fr; column-gap: 96px; row-gap: 10px; }
  .md-pair { display: contents; }
  .md-tag { display: none; }
  .md-rej { transition: opacity .4s, transform .4s; }
  .md-fix { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; }
  .md-pair.on .md-rej { opacity: .3; transform: translateX(6px); }
  .md-pair.on .md-fix { opacity: 1; transform: none; }
  .md-bot { display: grid; place-items: center; gap: 4px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .md-bot i { width: 56px; height: 56px; border-radius: 16px; background: var(--brand); color: #fff; font-weight: 800; font-style: normal; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(107,71,230,.3); animation: orb-bob 3s ease-in-out infinite; }
  .md-bot small { font-size: 12px; color: var(--muted); }
}
@media(prefers-reduced-motion: reduce){ .md-pair > .md-rej, .md-pair > .md-fix, .md-fix, .md-rej { transition: none; } }


/* 2026-09-09 (30): the dropshipping block — «Спочатку продажі — потім товар»: the parcel's road on desktop (it flies past your site), the same road stacked on phones
   2026-09-11: the road is full-bleed — it leaves the 1280 container and runs to 1440, and the labels grew with it. On phones the right-hand rail lost its rotated caption (one readable line under the stack instead) and the order link runs upwards, the way the order actually travels. */
.dr-desk { display: none; margin: 14px auto 0; }
.dr-desk svg { width: 100%; height: auto; display: block; }
.dr-node { fill: #fff; stroke: var(--brand-100); stroke-width: 1.5; }
.dr-node.main { stroke: var(--brand); stroke-width: 2; }
.dr-chip { fill: #fff; stroke: var(--brand-100); stroke-width: 1; }
.dr-lbl { font: 800 19px Manrope, system-ui, sans-serif; fill: var(--ink); }
.dr-lbl.big { font-size: 23px; }
.dr-sub { font: 600 15px Manrope, system-ui, sans-serif; fill: var(--muted); }
.dr-tag { font: 700 14px Manrope, system-ui, sans-serif; fill: var(--muted); }
/* scoped: .dr-you is also the gold chip in the phone stack below, and that rule would otherwise win by order */
.dr-desk .dr-you { font: 800 14px Manrope, system-ui, sans-serif; fill: #8a5a00; letter-spacing: .05em; }
.dr-nev { font: 700 15px Manrope, system-ui, sans-serif; fill: #2f9e6b; }
.dr-pill { fill: #e6f6ee; }
.dr-pill.gold { fill: #fff3d6; }
.dr-wire { fill: none; stroke: var(--brand-100); stroke-width: 2; stroke-dasharray: 6 6; }
.dr-wire.gold { stroke: #ffc93c; stroke-dasharray: none; opacity: .7; }
.dr-wire.green { stroke: #2f9e6b; stroke-dasharray: none; opacity: .5; }
.dr-dot { fill: var(--brand); }
.dr-dot.gold { fill: #ffc93c; }
.dr-box { fill: #ffc93c; stroke: #b8860b; stroke-width: 1.2; }
.dr-boxline { stroke: #b8860b; stroke-width: 1.2; }
.dr-mob { display: grid; gap: 12px; margin: 8px auto 0; max-width: 560px; }
.dr-flow { position: relative; display: grid; gap: 12px; padding-right: 30px; }
.dr-vn { border: 1.5px solid var(--brand-100); border-radius: 14px; padding: 10px 12px; background: #fff; font-size: 13px; position: relative; }
.dr-vn b { display: block; font-size: 14px; color: var(--ink); }
.dr-vn small { color: var(--muted); font-size: 12px; }
.dr-vn.main { border-color: var(--brand); }
.dr-you { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #8a5a00; background: #fff3d6; padding: 4px 9px; border-radius: 999px; }
.dr-lg { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.dr-lg img { height: 14px; width: auto; background: #fff; border: 1px solid var(--brand-100); border-radius: 4px; padding: 2px 4px; }
.dr-vlink { height: 20px; position: relative; margin-left: 22px; width: 2px; background: var(--brand-100); }
.dr-vlink::before { content: ""; position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: dr-down 1.6s linear infinite; }
@keyframes dr-down { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
/* the order travels the other way — from the buyer back to you */
.dr-vlink.up { background: #ffe2a8; }
.dr-vlink.up::before { background: #ffc93c; animation: dr-up 1.6s linear infinite; }
@keyframes dr-up { 0% { top: calc(100% - 8px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 0; opacity: 0; } }
.dr-vlink small { position: absolute; left: 12px; top: 1px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.dr-parcel { position: absolute; right: 0; top: 20px; bottom: 20px; width: 24px; }
.dr-parcel::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; border-left: 2px dashed #2f9e6b; }
.dr-parcel i { position: absolute; left: 2px; top: 0; width: 20px; height: 16px; background: #ffc93c; border: 1.5px solid #b8860b; border-radius: 3px; animation: dr-fall 3.2s linear infinite; }
.dr-parcel i::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1.5px; background: #b8860b; }
@keyframes dr-fall { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 16px); opacity: 0; } }
.dr-bypass { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #1f7a52; background: #e6f6ee; border-radius: 12px; padding: 9px 12px; }
.dr-bypass i { flex: 0 0 auto; position: relative; width: 18px; height: 14px; border-radius: 3px; background: #ffc93c; border: 1.5px solid #b8860b; }
.dr-bypass i::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1.5px; background: #b8860b; }
/* the diagram appears only where it can be read: below 1240 the 1440-wide drawing would shrink its
   labels under 10px, so tablets and narrow laptops get the stacked cards instead */
@media(min-width:1240px){ .dr-desk { display: block; width: min(1600px, calc(100vw - 32px)); margin-left: 50%; transform: translateX(-50%); } .dr-mob { display: none; } }
@media(prefers-reduced-motion: reduce){ .dr-vlink::before, .dr-vlink.up::before, .dr-parcel i { animation: none; } }

@media(max-width:400px){ .org { --feedw: 76px; } }

/* 2026-09-10 (31): the phone on the landing carries a real status bar (time, camera, icons) ABOVE the screen — the app's header starts below the camera and the bar shows on both sides of it, instead of a white chin cut into the screenshot */
.ps-notch { display: none; }
.ps-status { position: relative; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 24px; font-size: 14px; font-weight: 600; color: #333; background: #fff; border-radius: 36px 36px 0 0; }
.ps-status .hs-notch { position: absolute; left: 50%; top: 0; width: 110px; height: 28px; margin-left: -55px; background: #111; border-radius: 0 0 16px 16px; }
.ps-status .hs-icons { display: flex; align-items: center; gap: 5px; }
.ps-status .hs-icons i { display: block; }
.ps-status .hs-sig { width: 16px; height: 10px; background: linear-gradient(to right, #333 0 3px, transparent 3px 4px, #333 4px 7px, transparent 7px 8px, #333 8px 11px, transparent 11px 12px, #333 12px 15px, transparent 15px); clip-path: polygon(0 60%, 4px 60%, 4px 40%, 8px 40%, 8px 20%, 12px 20%, 12px 0, 16px 0, 16px 100%, 0 100%); }
.ps-status .hs-wifi { width: 14px; height: 10px; border: 2px solid #333; border-color: #333 transparent transparent transparent; border-radius: 50% 50% 0 0 / 100% 100% 0 0; box-sizing: border-box; position: relative; }
.ps-status .hs-wifi::after { content: ""; position: absolute; left: 4px; top: 4px; width: 2px; height: 2px; background: #333; border-radius: 50%; }
.ps-status .hs-bat { width: 22px; height: 11px; border: 1.5px solid #333; border-radius: 3px; box-sizing: border-box; position: relative; }
.ps-status .hs-bat::before { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 13px; background: #333; border-radius: 1px; }
.ps-status .hs-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: #333; border-radius: 0 1px 1px 0; }
.ps-phone .fp-scr { border-radius: 0 0 36px 36px; height: calc(100svh - 190px); }

/* 2026-09-10 (32): the phone menu, quieter — 20 px links, no «Вхід» (it lives on /start/), the e-mail + «Створити сайт» block on a white sheet at the bottom */
.mmenu-links { gap: 10px; margin-top: 22px; }
.mmenu-links a { font-size: 20px; line-height: 1.3; }
.mmenu-form { margin: auto -22px calc(-22px - env(safe-area-inset-bottom)); padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); background: #fff; border-radius: 20px 20px 0 0; }
.mmenu-form input { border: 1px solid var(--line); }

/* «Що ви купуєте»: the path of one product as a parcel-tracking timeline (2026-09-10).
   Rail of seven steps + the active step's screen; two steps are the owner's (amber), five the
   system's (brand). ≥900px: rail left, screen right. Phones: the screen moves under the open row. */
.path{margin-top:22px}
.path-mode{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.path-mode-btn{appearance:none;font:inherit;font-weight:700;font-size:14px;border:2px solid var(--brand-100);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:40px}
.path-mode-btn[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.path-mode-note{font-size:13px;color:var(--muted);flex-basis:100%}
.path-rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.path-step{position:relative;padding-left:44px}
.path-step::before{content:"";position:absolute;left:15px;top:36px;bottom:-8px;width:2px;background:var(--brand-100)}
.path-step:last-of-type::before{display:none}
.path-n{position:absolute;left:0;top:6px;width:32px;height:32px;border-radius:50%;border:2px solid var(--brand-100);background:#fff;color:var(--brand);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;transition:.15s}
.path-step--you .path-n{border-color:var(--amber);background:var(--amber-soft);color:var(--amber)}
.path-btn{appearance:none;background:none;border:0;padding:8px 0 10px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;display:block;min-height:44px}
.path-t{display:flex;flex-direction:column;gap:2px}
.path-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.path-h b{font-size:17px;line-height:1.25}
.path-who{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:2px 9px}
.path-step--you .path-who{color:var(--amber);background:var(--amber-soft)}
.path-t small{font-size:14.5px;color:var(--muted);line-height:1.45}
.path-more{display:none;flex-direction:column;gap:10px;padding:0 0 12px}
.path-more p{font-size:15px;color:var(--ink)}
.path-more p.muted{font-size:14px;color:var(--muted)}
.path-slot:empty{display:none}
.path-step.is-active .path-n{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 0 0 6px var(--brand-soft)}
.path-step--you.is-active .path-n{border-color:var(--amber);background:var(--amber);box-shadow:0 0 0 6px var(--amber-soft)}
.path-step.is-active .path-btn{cursor:default}
.path-step.is-active .path-h b{font-size:19px}
.path-step.is-active .path-t small{display:none}
.path-step.is-active .path-more{display:flex}
.path-step.is-active .path-who.path-who{color:#fff;background:var(--brand)}
.path-step--you.is-active .path-who.path-who{background:var(--amber)}
.path-stage{position:relative;min-width:0;margin-top:8px}
.path-screen{position:relative}
.path-screen[hidden]{display:none}
.path-screen .shot-cap{text-align:left;max-width:460px;margin-top:10px}
.path-phone{position:absolute;right:-6px;bottom:52px;width:150px;z-index:2}
.path-phone .fp-scr{max-height:230px;overflow:hidden}
.path-logos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;color:var(--muted)}
.path-logos img{height:22px;width:auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.path-sum{margin-top:18px;display:flex;gap:12px;align-items:center;background:var(--brand-soft);border-radius:14px;padding:12px 16px;font-size:14.5px;font-weight:600;color:var(--ink)}
.path-sum-ic{color:var(--brand);font-weight:800;font-size:16px}
@media(max-width:899px){
  .path-stage{display:none}
  .path-slot .path-screen{margin:4px 0 6px}
  .path-slot .badge-real{display:none}
  .path-slot .path-phone{position:static;width:150px;margin:12px auto 0}
  .path-slot .path-phone .fp-scr{max-height:220px}
  .path-slot .shot-cap{font-size:13px}
  .path-step{border-top:1px solid var(--line)}
  .path-step:first-of-type{border-top:0}
  .path-step.is-active{background:#fff;border:1px solid var(--line);border-radius:16px;padding-left:52px;padding-right:12px;margin:6px 0;box-shadow:var(--shadow)}
  .path-step.is-active .path-n{left:10px;top:14px}
  .path-step.is-active::before{display:none}
  .path-h b{font-size:15.5px}
}
@media(min-width:900px){
  .path{display:grid;grid-template-columns:420px minmax(0,1fr);gap:0 36px;align-items:start}
  .path-mode{grid-column:1/span 2;margin-bottom:18px}
  .path-mode-note{flex-basis:auto;margin-left:6px}
  .path-rail{grid-column:1}
  .path-stage{grid-column:2;grid-row:2/span 2;margin-top:8px}
  .path-sum{grid-column:1}
  .path-step.is-active{margin:2px 0 6px}
  .path-step.is-active .path-btn,.path-step.is-active .path-more{background:#fff}
  .path-step.is-active .path-btn{border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;padding:16px 18px 0}
  .path-step.is-active .path-more{border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;padding:8px 18px 16px;box-shadow:var(--shadow)}
  .path-step.is-active .path-n{top:14px}
  .path-slot{display:none}
}

/* 2026-09-11 (31): header knows where you are, «Вхід» is a page of its own.
   The active item is lit by matching header[data-nav] with the link's data-nav-id — one page
   variable, no per-page markup. «Вхід» sits outside the section list because it is not a
   section: it is the door for someone who already pays. */
.menu-login{display:none;color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;padding:9px 14px;border:1.5px solid var(--line);border-radius:11px;white-space:nowrap;margin-left:auto;transition:.15s}
.menu-login:hover{border-color:var(--brand-100);background:var(--brand-soft);color:var(--brand)}
header.top[data-nav="login"] .menu-login{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
nav.menu a[data-nav-id]{position:relative;padding:6px 0}
header.top[data-nav="product"] a[data-nav-id="product"],
header.top[data-nav="marketplaces"] a[data-nav-id="marketplaces"],
header.top[data-nav="tariffs"] a[data-nav-id="tariffs"],
header.top[data-nav="assist"] a[data-nav-id="assist"],
header.top[data-nav="demo"] a[data-nav-id="demo"],
header.top[data-nav="help"] a[data-nav-id="help"]{color:var(--brand)}
header.top[data-nav="product"] a[data-nav-id="product"]::after,
header.top[data-nav="marketplaces"] a[data-nav-id="marketplaces"]::after,
header.top[data-nav="tariffs"] a[data-nav-id="tariffs"]::after,
header.top[data-nav="assist"] a[data-nav-id="assist"]::after,
header.top[data-nav="demo"] a[data-nav-id="demo"]::after,
header.top[data-nav="help"] a[data-nav-id="help"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--brand)}
@media(min-width:1080px){ .menu-login{display:inline-flex;align-items:center} header.top .cta{margin-left:10px} }

/* the login page: one field, the address composed in front of the reader */
.lg-sec{padding-top:18px}
.lg-card{max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px}
.lg-tabs{display:flex;gap:6px;background:var(--paper-2);border-radius:12px;padding:4px;margin-bottom:18px}
.lg-tab{flex:1;border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--muted);padding:9px 10px;border-radius:9px;cursor:pointer;transition:.15s}
.lg-tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(29,43,38,.12)}
.lg-label{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.lg-input{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:.15s}
.lg-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.lg-input input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:16px;padding:13px 14px;color:var(--ink);background:transparent}
.lg-input input::placeholder{color:#9aa8a2}
.lg-suffix{display:flex;align-items:center;padding:0 12px;background:var(--paper-2);border-left:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap}
.lg-suffix[hidden]{display:none}
.lg-preview{margin:10px 0 16px;font-size:13px;color:var(--muted);word-break:break-all}
.lg-preview code{background:var(--paper-2);border-radius:6px;padding:2px 6px;font-size:12.5px;color:var(--ink)}
.lg-last{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center}
.lg-again{border:0;background:transparent;font:inherit;font-weight:700;color:var(--brand);cursor:pointer;text-decoration:underline;padding:0}
.lg-help{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);line-height:1.5}
.lg-new{margin-top:20px;text-align:center;font-size:14.5px;color:var(--muted)}

/* Reference pages (Довідка): a section list that stays on screen and a readable measure.
   `.prose` had lost its 760px cap the day .wrap grew to 1280 — same specificity, later rule —
   so the help page was running text across the full container. */
.prose,.doc-body{max-width:760px}
.doc-sec{padding-top:18px}
.doc{display:grid;gap:24px}
.doc-toc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:14px}
.doc-toc-h{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.doc-toc nav{display:grid;gap:2px}
.doc-toc a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:600;line-height:1.3}
.doc-toc a i{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--paper-2);color:var(--muted);font-style:normal;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.doc-toc a:hover{background:var(--paper-2);color:var(--ink)}
.doc-toc a.on{background:var(--brand-soft);color:var(--brand)}
.doc-toc a.on i{background:var(--brand);color:#fff}
.doc-toc-help{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.doc-part{padding:0;scroll-margin-top:96px}
.doc-part+.doc-part{margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.doc-part h2{display:flex;align-items:flex-start;gap:11px;margin-top:0}
.doc-n{flex:0 0 auto;width:30px;height:30px;margin-top:2px;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-style:normal;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center}
.doc-cta{margin-top:16px}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:11px}
@media(min-width:960px){
  .doc{grid-template-columns:236px minmax(0,1fr);gap:52px;align-items:start}
  .doc-toc{position:sticky;top:92px}
}

/* Marketplace pages: the wordmark is how a seller recognises the platform — the card and the
   page both carry it, and every page says where it sits among the five. */
.mp-logo{height:20px;width:auto;display:block}
.mp-head{min-height:34px}
.crumb{font-size:14px;font-weight:600;margin-bottom:10px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.mp-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mp-title img{height:30px;width:auto;background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px 9px}
.mp-other{padding:34px 0}
.mp-other-h{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.mp-other-row{display:flex;flex-wrap:wrap;gap:10px}
.mp-other-row a{display:flex;align-items:center;justify-content:center;min-width:104px;height:46px;padding:0 14px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.15s}
.mp-other-row a:hover{border-color:var(--brand-100);box-shadow:var(--shadow);transform:translateY(-1px)}
.mp-other-row img{height:16px;width:auto}
/* the intro under a page's H1 and its running lists read at a comfortable measure, not the full 1280 */
.page-head .sub{max-width:720px}
.check-list{max-width:940px}
.legal{max-width:820px}

/* 2026-09-11 (32): the marketplaces page became a picker — five tabs, five panels. The old
   five identical cards said three lines each and gave nothing to click. On phones the tab row
   scrolls with a snap, so the chosen marketplace's panel always starts right under the thumb.
   Panels are all in the HTML: .mps.js hides the inactive ones, so without JS nothing is lost. */
.mps{padding-top:4px}
.mps .mp-tabs-wrap{margin:14px -20px 0;padding:4px 20px 10px;overflow-x:auto;scrollbar-width:none}
.mps .mp-tabs-wrap::-webkit-scrollbar{display:none}
.mp-tabs{display:flex;gap:9px;scroll-snap-type:x mandatory}
.mp-tab{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;gap:9px;min-width:130px;padding:13px 16px;border:1.5px solid var(--line);border-radius:15px;background:#fff;cursor:pointer;font:inherit;transition:.15s}
.mp-tab img{height:16px;width:auto}
.mp-tab i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.mp-tab:hover{border-color:var(--brand-100)}
.mp-tab.on{border-color:var(--brand);background:var(--brand-soft)}
.mp-tab.on i{color:var(--brand)}
.mp-tab:focus-visible{outline:3px solid var(--brand-100);outline-offset:2px}
.mp-swipe{display:none;margin-top:2px;font-size:12px;color:var(--muted)}
.mps.js .mp-swipe{display:block}
.mps.js .mp-panel{display:none}
.mps.js .mp-panel.on{display:grid}
.mp-panels{margin-top:14px}
.mp-panel{display:grid;gap:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);padding:20px 18px}
.mp-panel+.mp-panel{margin-top:14px}
.mp-p-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mp-p-logo{height:26px;width:auto;background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px 10px}
.mp-p-top h2{font-size:20px;margin:0}
.mp-p-note{flex:1 1 100%;color:var(--muted);font-size:14px}
.mp-tiles{display:grid;gap:10px}
.mp-tile{background:var(--paper-2);border-radius:14px;padding:13px 15px}
.mp-tile span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.mp-tile b{display:block;font-size:16.5px;font-weight:800;line-height:1.25}
.mp-tile.ok b{color:var(--ok)}
.mp-tile small{display:block;color:var(--muted);font-size:12.5px;font-weight:600;margin-top:2px}
.mp-bul{list-style:none;display:grid;gap:8px;padding:0;margin:0}
.mp-bul li{position:relative;padding-left:27px;color:var(--muted);font-size:14.5px;line-height:1.45}
.mp-bul li::before{content:"✓";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mp-p-foot{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:15px}
.mp-who{font-size:13px;color:var(--muted)}
.mp-contract{display:flex;gap:11px;align-items:flex-start;background:var(--ok-soft,#e6f6ee);border-radius:14px;padding:14px 16px;margin-top:18px;max-width:760px}
.mp-contract i{font-style:normal;font-size:17px;line-height:1.2}
.mp-contract p{font-size:13.5px;color:#1f6f4f;line-height:1.5}
.mp-h2{margin-top:46px}
@media(min-width:760px){
  .mps .mp-tabs-wrap{margin-left:0;margin-right:0;padding-left:0;padding-right:0;overflow:visible}
  .mp-tabs{flex-wrap:wrap}
  .mp-tab{flex:1 1 0;min-width:150px}
  .mps.js .mp-swipe{display:none}
  .mp-panel{padding:24px;gap:20px}
  .mp-p-top h2{font-size:23px}
  .mp-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mp-p-foot{grid-template-columns:1fr auto;align-items:center}
}

/* 2026-09-11 (33): on a phone the three plans were one long scroll — now they are a picker
   (pills with the price, one card under them), exactly like the marketplaces page. Desktop is
   untouched: three cards side by side. Both the pills and the hiding wait for .js, so with the
   script blocked the section is still all three plans. */
.plan-pick{display:none;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}
.price-grid.js+.plan-pick,.plan-pick.js{display:grid}
.pp{position:relative;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px 8px;cursor:pointer;font:inherit;display:grid;gap:2px;text-align:center;transition:.15s}
.pp b{font-size:14.5px;font-weight:800}
.pp i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--muted)}
.pp.on{border-color:var(--brand);background:var(--brand-soft)}
.pp.on i{color:var(--brand)}
.pp:focus-visible{outline:3px solid var(--brand-100);outline-offset:2px}
.pp-best{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:9.5px;font-weight:800;border-radius:999px;padding:2px 8px;white-space:nowrap;letter-spacing:.02em}
.price-grid.js .plan{display:none}
.price-grid.js .plan .best{display:none} /* the pill above already says «Популярний» */
.price-grid.js[data-plan="start"] #plan-start,
.price-grid.js[data-plan="biz"] #plan-biz,
.price-grid.js[data-plan="pro"] #plan-pro{display:flex}
/* the ? is a button now: a title= tooltip is invisible on touch */
.q{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:50%;border:1.5px solid var(--brand-100);background:#fff;color:var(--brand);font:inherit;font-size:11px;font-weight:800;line-height:1;margin-left:5px;cursor:pointer;vertical-align:-3px}
.q:hover{background:var(--brand-soft)}
.q[aria-expanded="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.qbox{display:block;margin:7px 0 2px;background:var(--brand-soft);border-radius:11px;padding:10px 12px;font-size:13px;color:var(--ink);line-height:1.45}
.price-keep{display:flex;gap:11px;align-items:flex-start;background:var(--ok-soft,#e6f6ee);border-radius:14px;padding:14px 16px;margin-top:24px;max-width:760px}
.price-keep i{font-style:normal;font-size:16px;line-height:1.3}
.price-keep p{font-size:13.5px;color:#1f6f4f;line-height:1.5}
.price-keep a{color:#136746;font-weight:700}
.anchor{display:block;position:relative;top:-90px;visibility:hidden}
@media(min-width:900px){
  .price-grid.js+.plan-pick,.plan-pick,.plan-pick.js{display:none}
  .price-grid.js .plan{display:flex}
  .price-grid.js .plan .best{display:block}
}

/* 2026-09-11 (34): the buy-out got its own section — the three small cards under the tariffs
   («Запуск», «Викуп», «Супровід») said too little about the one thing worth explaining. The
   metaphor is a floor plan: in a rented flat you cannot take a wall down. */
.buyout-sec{background:var(--paper);border-bottom:1px solid var(--line)}
.flats{display:grid;gap:18px;margin-top:28px}
.flat{border-radius:var(--r-lg);padding:24px;display:grid;gap:14px;align-content:start;position:relative;overflow:hidden}
.flat.rent{background:#eef1f0;border:1px solid var(--line);color:#6f7d77}
.flat.own{background:linear-gradient(135deg,var(--brand-deep),var(--brand));color:#fff;box-shadow:var(--shadow-lg)}
.flat h3{font-size:20px}
.flat.rent h3{color:#55635e}
.flat-tag{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;opacity:.7}
.flat-art{width:100%;max-width:430px;height:auto;display:block;margin:2px auto}
.fa-room{fill:none;stroke-width:2.5}
.fa-grey{stroke:#b9c4bf}
.fa-own{stroke:rgba(255,255,255,.75)}
.fa-wall{fill:#b9c4bf}
.fa-line{fill:none;stroke:#c8d1cd;stroke-width:2.5}
.fa-own-line{stroke:rgba(255,255,255,.5)}
.fa-gone{stroke:rgba(255,255,255,.45);stroke-width:2.5;stroke-dasharray:5 7;fill:none}
.fa-lock{fill:#8a9691}
.fa-lock-arc{fill:none;stroke:#8a9691;stroke-width:2.5}
.fa-key{fill:none;stroke:#ffc93c;stroke-width:3;stroke-linecap:round}
.flat ul{list-style:none;display:grid;gap:9px;padding:0;margin:0}
.flat li{font-size:14.5px;display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.flat li i{flex:0 0 auto;width:19px;height:19px;border-radius:50%;font-style:normal;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.flat.rent li i{background:#e0e5e3;color:#9aa8a2}
.flat.own li i{background:rgba(255,255,255,.2);color:#fff}
.flat-money{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.5;background:rgba(0,0,0,.055);border-radius:11px;padding:10px 12px}
.flat.own .flat-money{background:rgba(255,255,255,.14)}
.buy{margin-top:20px;display:grid;gap:18px}
.buy-main{background:linear-gradient(135deg,var(--brand-deep),var(--brand));color:#fff;border-radius:var(--r-lg);padding:26px;display:grid;gap:13px;align-content:start;box-shadow:var(--shadow-lg)}
.buy-main h3{font-size:22px}
.buy-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.buy-price b{font-size:42px;font-weight:800;letter-spacing:-.02em}
.buy-price span{font-size:15px;opacity:.85;font-weight:700}
.buy-main ul{list-style:none;display:grid;gap:8px;padding:0;margin:2px 0 0}
.buy-main li{position:relative;padding-left:26px;font-size:14.5px;opacity:.95;line-height:1.45}
.buy-main li::before{content:"✓";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.18);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.buy-after{font-size:13px;opacity:.84;border-top:1px solid rgba(255,255,255,.2);padding-top:12px;line-height:1.5}
.buy-cta{margin-top:2px}
.calc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:grid;gap:15px;align-content:start;box-shadow:var(--shadow)}
.calc-h{font-size:16px;font-weight:800}
.calc-tabs{display:flex;gap:7px;flex-wrap:wrap}
.calc-tab{border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:9px 13px;font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:.15s}
.calc-tab.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.calc-tab:focus-visible{outline:3px solid var(--brand-100);outline-offset:2px}
.calc-two{display:grid;gap:11px;grid-template-columns:1fr 1fr}
.calc-half{background:var(--paper-2);border-radius:14px;padding:14px 15px}
.calc-half span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.calc-half b{display:block;font-size:21px;font-weight:800;line-height:1.2}
.calc-half small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:600;line-height:1.35}
.calc-half.gold{background:#fff8e6}
.calc-half.gold b{color:#8a5a00}
.calc-slider{display:grid;gap:7px}
.calc-slider label{font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.calc-slider label em{font-style:normal;color:var(--brand);font-weight:800}
.calc-slider input[type=range]{width:100%;accent-color:var(--brand)}
.calc-note{font-size:13px;color:var(--muted);line-height:1.5}
.calc-note b{color:var(--ink)}
.noprog{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.noprog h3{font-size:19px;margin-bottom:6px}
.noprog .sub{font-size:15px;max-width:780px}
.noprog .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.noprog .chip{display:inline-flex;align-items:center;background:var(--paper-2);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:700}
.noprog .chip.hot{background:var(--brand-soft);color:var(--brand)}
.noprog-after{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.55}
.noprog-after b{color:var(--ink)}
@media(min-width:860px){
  .flats{grid-template-columns:1fr 1fr;gap:20px}
  .flat{padding:26px}
  .buy{grid-template-columns:1.05fr .95fr;gap:20px;align-items:stretch}
  .buy-main{padding:28px}
  .calc{padding:24px}
}

/* «Викуп» стоїть у меню з маленькою бурштиновою крапкою: помітно боковим зором, не кричить */
.nav-own{position:relative}
.nav-own::after{content:"";position:absolute;top:2px;right:-9px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
header.top[data-nav="buyout"] a[data-nav-id="buyout"]{color:var(--brand)}
header.top[data-nav="buyout"] a[data-nav-id="buyout"]::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--brand)}
.mmenu-links .mmenu-own{position:relative;align-self:flex-start}
.mmenu-links .mmenu-own::after{content:"";position:absolute;top:6px;right:-13px;width:7px;height:7px;border-radius:50%;background:#ffc93c}