/* SafeVPN — лендинги (/abroad). Копия витрины входа (wc-screen-v1 … wc-long-v1)
   из index.html: те же правила .wc-*, те же токены классической темы. Меняется
   витрина — синхронизировать этот файл (generate: scratchpad/build_wc_css). */
:root{
  --bg:#1c1c1e;--bg2:#2c2c2e;--text:#fff;--hint:#98989e;
  --link:#63b0ff;--btn:#63b0ff;--btn-solid:#1f7ac2;--btn-text:#fff;
  --card:var(--bg2);--border:rgba(255,255,255,.08);
  --green:#34c759;--radius:14px;color-scheme:dark;
}
@supports (color: color-mix(in srgb, red, blue)){
  :root{--card:color-mix(in srgb,var(--bg2) 80%,transparent);--border:color-mix(in srgb,var(--hint) 18%,var(--bg))}
}
@media (prefers-color-scheme:light){
  :root{--bg:#fff;--bg2:#f2f2f7;--text:#000;--hint:#6b6b70;--link:#155e97;--btn:#155e97;--btn-solid:#1f7ac2;
    --btn-text:#fff;--card:rgba(242,242,247,.8);--border:rgba(0,0,0,.08);--green:#1a7f3c;color-scheme:light}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;font-family:'Onest',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a{color:inherit}
.wc-row,.wc-chip,.wc-app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@keyframes wcRibbon{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes wcBelt{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes wcBeltBack{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.wc{--wc-col:440px;--wc-hint:color-mix(in srgb,var(--text) 66%,var(--bg));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;min-height:100dvh;padding:max(20px,calc(env(safe-area-inset-top,0px) + 20px)) 24px 0;background:var(--bg);color:var(--text);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.wc-inner{display:flex;flex-direction:column;width:100%;max-width:var(--wc-col);text-align:left;margin-bottom:20px}
.wc-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.wc-brand .wc-logo{display:block;width:42px;height:42px}
.wc-brand span{font-size:19px;font-weight:700;letter-spacing:-.01em}
.wc-promise{margin:0 0 26px;font-size:27px;font-weight:800;line-height:33px;letter-spacing:-.025em;color:var(--text)}
.wc-ribbon{position:relative;width:var(--app-shell-width,100vw);margin-left:calc(50% - var(--app-shell-width,100vw)/2);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.wc-ribbon-track{display:flex;width:max-content;gap:9px;padding:0 24px;animation:wcRibbon 42s linear infinite}
.wc-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-width:150px;height:40px;padding:0 20px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.wc-flag{flex:0 0 auto;font-size:15px}
.wc-note{margin:11px 0 0;font-size:12px;line-height:17px;color:var(--wc-hint)}
.wc-plus{display:flex;flex-direction:column;gap:16px;width:100%}
.wc-plus-row{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.wc-plus-mark{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--btn) 12%,transparent);font-size:16px}
.wc-plus-body{display:block;min-width:0}
.wc-plus-title{display:block;font-size:15px;line-height:20px;font-weight:700;color:var(--text)}
.wc-plus-text{display:block;margin-top:3px;font-size:13px;line-height:19px;color:var(--wc-hint)}
.wc-em{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;line-height:1}
.wc-list{width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.wc-row{display:grid;grid-template-columns:26px 1fr 14px;align-items:start;gap:13px;width:100%;padding:15px 16px;border:0;border-top:1px solid var(--border);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.wc-row:first-child{border-top:0}
.wc-row-icon{display:flex;align-items:center;justify-content:center;width:26px;height:22px;font-size:15px}
.wc-row-body{display:block;min-width:0}
.wc-row-title{display:block;font-size:15px;font-weight:700;line-height:20px}
.wc-row-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.22,.68,.3,1)}
.wc-row.is-open .wc-row-more{grid-template-rows:1fr}
.wc-row-more-inner{overflow:hidden;min-height:0}
.wc-row-more-inner span{display:block;padding-top:10px;font-size:13px;line-height:20px;color:var(--text);opacity:.82}
.wc-row-chev{display:flex;align-items:center;justify-content:center;width:14px;height:22px;color:var(--wc-hint);transition:transform .26s}
.wc-row.is-open .wc-row-chev{transform:rotate(180deg);color:var(--btn)}
.wc-price{margin:20px 0 0;font-size:14px;font-weight:600;line-height:20px}
.wc-terms{margin:9px 0 0;font-size:12px;line-height:18px;color:var(--wc-hint)}
.wc-actions{position:sticky;z-index:6;bottom:22px;width:100%;max-width:var(--wc-col);margin:auto 0 22px;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:20px;background:var(--bg);border:1px solid var(--border)}
.wc-cta,.wc-ghost{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer}
.wc-cta{padding:0 18px;border:none;background:var(--btn-solid);color:var(--btn-text);transition:transform .14s}
.wc-cta:active{transform:translateY(1px)}
.wc-ghost{padding:0 12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;font-weight:600}
.wc-legal{margin-top:22px;font-size:12px;line-height:18px;color:var(--wc-hint)}
.wc-legal a{color:var(--wc-hint);text-decoration:underline;text-underline-offset:2px;padding:8px 0}
.wc-h2{margin:30px 0 12px;font-size:16px;font-weight:800;line-height:20px;letter-spacing:-.015em;color:var(--text)}
.wc-h2 + .wc-price{margin-top:0}
.wc-art{width:100%;margin:4px 0 26px}
.wc-lane + .wc-lane{margin-top:18px}
.wc-lane-head{display:flex;align-items:center;gap:7px;padding:0 0 9px;font-size:12px;line-height:16px;font-weight:600;color:var(--wc-hint)}
.wc-lane-head .wc-em{font-size:12px}
.wc-lane-head--vpn{color:var(--text)}
.wc-belt{position:relative;overflow:hidden;width:var(--app-shell-width,100vw);margin-left:calc(50% - var(--app-shell-width,100vw)/2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.wc-belt-track{display:flex;width:max-content;gap:8px;padding:0 24px;animation:wcBelt 30s linear infinite}
.wc-belt-track--back{animation-name:wcBeltBack;animation-duration:38s}
.wc-app{display:inline-flex;align-items:center;flex:0 0 auto;height:32px;padding:0 13px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.wc-app--vpn{border-color:color-mix(in srgb,var(--btn) 40%,var(--border));background:color-mix(in srgb,var(--btn) 9%,var(--card))}
.wc-art-note{margin:14px 0 0;font-size:12px;line-height:17px;color:var(--wc-hint)}
.wc-steps{list-style:none;margin:0;padding:0;position:relative}
.wc-step{display:grid;grid-template-columns:38px 1fr;gap:13px;align-items:start;position:relative;padding-bottom:16px}
.wc-step:last-child{padding-bottom:0}
.wc-step::before{content:'';position:absolute;left:18px;top:38px;bottom:2px;width:1px;background:var(--border)}
.wc-step:last-child::before{display:none}
.wc-step-art{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--btn) 12%,transparent);color:var(--btn);position:relative;z-index:1}
.wc-step-art{font-size:18px}
.wc-step-title{display:block;font-size:15px;font-weight:700;line-height:20px}
.wc-step-text{display:block;margin-top:3px;font-size:13px;line-height:20px;color:var(--wc-hint)}
.wc-feats{width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.wc-feat{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:13px 16px;border-top:1px solid var(--border)}
.wc-feat:first-child{border-top:0}
.wc-feat .wc-feat-icon{display:flex;align-items:center;justify-content:center;width:24px;height:20px;margin-top:0;line-height:1;font-size:16px}
.wc-feat b{display:block;font-size:14px;font-weight:700;line-height:18px}
.wc-feat span{display:block;margin-top:2px;font-size:12px;line-height:17px;color:var(--wc-hint)}
.wc-plans{width:100%;margin-top:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.wc-plan{display:flex;align-items:baseline;gap:10px;padding:11px 16px;line-height:20px;border-top:1px solid var(--border)}
.wc-plan:first-child{border-top:0}
.wc-plan-name{flex:1 1 auto;font-size:14px;font-weight:600}
.wc-plan-off{flex:0 0 auto;align-self:center;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);font-size:11px;line-height:16px;font-weight:700}
.wc-plan-sum{flex:0 0 auto;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.wc-plan--free .wc-plan-sum{color:var(--green)}
@media (max-height:700px){.wc{padding-top:max(14px,calc(env(safe-area-inset-top,0px) + 14px))}.wc::before{flex:0 0 6px}.wc-brand{margin-bottom:16px}.wc-promise{font-size:24px;line-height:29px;margin-bottom:20px}.wc-actions{bottom:14px;margin:auto 0 14px;padding:10px}
}
@media (prefers-reduced-motion:reduce){.wc-ribbon-track{animation:none}.wc-row-more,.wc-row-chev{transition:none}.wc-belt-track{animation:none}
}
/* Ссылки-строки внизу (статьи): та же поверхность, что .wc-list */
.wc-links{width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.wc-link{display:grid;grid-template-columns:1fr 14px;align-items:center;gap:13px;padding:14px 16px;border-top:1px solid var(--border);font-size:14px;line-height:20px;font-weight:600;color:var(--text);text-decoration:none}
.wc-link:first-child{border-top:0}
.wc-link svg{color:var(--wc-hint)}
a.wc-cta,a.wc-ghost{text-decoration:none}
/* Оболочка ноутбука — как «Laptop shell» кабинета: колонка 640 px на затемнённом фоне */
@media (min-width:701px){
  :root{--app-shell-width:min(100vw,640px);--desktop-shell-gap:clamp(12px,2.5vh,28px);--desktop-shell-radius:22px}
  html,body{height:100%}
  body{display:flex;align-items:center;justify-content:center;padding-block:var(--desktop-shell-gap);background:color-mix(in srgb,var(--bg) 84%,#000)}
  .shell{width:var(--app-shell-width);max-width:100%;height:calc(100vh - (2 * var(--desktop-shell-gap)));border-radius:var(--desktop-shell-radius);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.18);background:var(--bg)}
  .shell .wc{height:100%;min-height:0}
}
@media (min-width:701px) and (prefers-color-scheme:light){
  body{background:color-mix(in srgb,var(--bg) 92%,#000)}
}