/* Capital Wizard — the mobile layer. Loaded LAST on every marketing page.
   Nothing above it is modified: this file only adds the chrome that has no
   desktop counterpart (burger, full-screen menu, sticky CTA) and overrides
   layout below the thresholds.

   Port of design_handoff_mobile_website. Three thresholds, all max-width:
    1040px — navigation only: link row + Log in / Start free become a burger.
     760px — the phone layout proper.
     400px — small-phone tightening.

   The handoff puts the nav threshold at 900px. This nav is wider than the
   prototype's — seven links plus a language switcher — and the Ukrainian labels
   are longer again. Measured: the UA nav stops overflowing the PAGE at 1004px
   and stops overflowing the WRAP (i.e. stops touching the right gutter) at
   ~1027px, so anything under that was a horizontally scrolling nav bar, not a
   design choice. 1040 is the smallest step already in the site's breakpoint
   family that clears both. One threshold has to serve both languages — they
   share this stylesheet — so it is the wider one's; English fits from ~865px
   and simply gets the burger earlier than it strictly needs to.
   The desktop stylesheets keep their own intermediate steps (1040 / 1000 / 940 /
   900 / 860 / 800 / 780 / 680 / 600); this sits on top of them.

   Deviations from the handoff, all forced by the production DOM:
   - The language switcher lives in .nav-act, which is hidden below 1040px, so
     the menu carries its own copy (the prototype has no switcher at all).
   - The Tweaks panel and the unshipped newsletter band were never ported, so
     their rules are gone.
   - The blog is React; its article/index rules live in src/blog/blog.css, which
     is bundled after this file. Only the shared chrome is here. */

/* ── nav: burger below 1040 ──────────────────────────────── */
.nav-burger{display:none;width:44px;height:44px;margin-right:-11px;padding:0;border:0;background:transparent;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;flex:none}
.nav-burger span,.mnav-x span{display:block;width:19px;height:1.5px;background:currentColor;border-radius:2px;position:relative}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:currentColor;border-radius:2px}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.mnav-x span{background:transparent}
.mnav-x span::before,.mnav-x span::after{content:"";position:absolute;left:0;top:0;width:19px;height:1.5px;background:currentColor;border-radius:2px}
.mnav-x span::before{transform:rotate(45deg)}
.mnav-x span::after{transform:rotate(-45deg)}
body.menu-open{overflow:hidden}

/* Opens over the whole viewport, with no transition — deliberate: an instant
   panel cannot get stuck half-faded in a throttled tab. */
.mnav{position:fixed;inset:0;z-index:80;background:var(--paper);display:flex;flex-direction:column}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;border-bottom:1px solid var(--line);flex:none}
.mnav-x{width:44px;height:44px;margin-right:-11px;padding:0;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.mnav-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:14px 16px 24px}
.mnav-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:18px 0 6px}
.mnav-lab:first-child{padding-top:4px}
/* Direct children only: the language switcher nests its own <a>s. */
.mnav-body>a{display:flex;align-items:center;min-height:50px;font-size:21px;letter-spacing:-.02em;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav-body>a:last-of-type{border-bottom:0}   /* the language group follows, and needs no rule above it */
.mnav-body>a:active{color:var(--brand)}
.mnav-foot{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;border-top:1px solid var(--line);background:var(--paper-2)}
/* Half the width of a phone is not much for "Почати безкоштовно" — see the
   full-width button note in the 760px block. */
.mnav-foot .btn{width:100%;white-space:normal;height:auto;min-height:52px;padding:10px 12px;line-height:1.25;text-align:center}
/* The nav copy of the switcher is a 22px-tall pill pair; in the menu it is a
   tap target like every other row. */
.mnav .lang-sw{display:flex;gap:6px;padding:0;border:0;margin-top:4px}
.mnav .lang-sw__opt{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;border:1px solid var(--line-2);border-radius:8px;padding:0 14px}
.mnav .lang-sw__opt.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--ink)}
/* Focus stays visible — the menu is keyboard-reachable and traps focus. */
.mnav a:focus-visible,.mnav button:focus-visible,.nav-burger:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ── sticky bottom CTA ──────────────────────────────────── */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in oklab,var(--paper) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(101%);transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.mcta.on{transform:none}
.mcta .k{flex:1;min-width:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.mcta .btn{flex:none;height:44px;padding:0 18px}
body.menu-open .mcta{display:none!important}
@media(prefers-reduced-motion:reduce){.mcta{transition:none}}

@media(max-width:1040px){
  .nav-links,.nav-act{display:none}
  .nav-burger{display:flex}
  .nav-in{height:56px;gap:12px}
}
@media(min-width:1041px){.mnav{display:none!important}}

/* ── the mobile design proper ───────────────────────────── */
@media(max-width:760px){
  .mcta{display:flex}
  .wrap{width:min(100% - 32px,var(--wrap))}
  .band{padding:64px 0}
  .band.tight{padding:44px 0}
  .sec-head{gap:11px;margin-bottom:28px}
  .lead{font-size:16.5px}
  h2,.h2{font-size:clamp(26px,7.2vw,33px)}
  h3,.h3{font-size:20px}
  .cta-row{flex-direction:column;align-items:stretch;gap:10px}
  .cta-row .btn{width:100%}
  /* A full-width button has to be allowed to wrap. .btn is white-space:nowrap,
     and its min-content is therefore the WHOLE label — 422px for the hero's
     "Start free — 6 months on us", which is enough to push the hero's 1fr grid
     track past the viewport, and more again in Ukrainian. Height goes with it:
     a fixed 46/52px box cannot hold two lines. */
  .cta-row .btn,.path .btn,.frm-foot .btn,.sent .btn{white-space:normal;height:auto;min-height:46px;padding-top:11px;padding-bottom:11px;line-height:1.3;text-align:center}
  .cta-row .btn.lg{min-height:52px}

  /* hero — it is a phone, so show the phone. The tilted browser frame is a
     desktop conceit; .hero-phone is display:none from 1000px down and comes
     back here as the hero art itself. */
  .hero{padding:34px 0 56px}
  /* minmax(0,…): plain 1fr is minmax(auto,1fr), so the copy column's
     min-content (the CTA buttons) would size the track instead of the wrap. */
  .hero-in{gap:34px;grid-template-columns:minmax(0,1fr)}
  .hero-copy{gap:20px}
  .hero h1{font-size:clamp(30px,8.4vw,38px)}
  .hero .lead{font-size:16px}
  .hero-note{flex-direction:row;flex-wrap:wrap;gap:7px 16px;font-size:10px;letter-spacing:.05em}
  .hero-art{margin-right:0;perspective:none}
  .tiltable{transform:none}   /* no pointer to follow on a touch screen */
  .hero-art .frame.browser{display:none}
  .hero-phone{display:block;position:static;width:min(272px,70vw);min-width:0;margin:0 auto;transform:none;z-index:1}

  /* value strip — swipeable. NOTE: this element is both .wrap and .cards.c4, so
     a negative margin would SHIFT it (the wrap sets an explicit width) instead
     of widening it. Full width + padding is the only way to bleed it. */
  [data-sec="strip"] .cards.c4{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;scrollbar-width:none;width:100%;margin-inline:0;padding:0 16px 2px}
  [data-sec="strip"] .cards.c4::-webkit-scrollbar{display:none}
  [data-sec="strip"] .card{flex:0 0 74%;scroll-snap-align:start;padding:18px}

  /* live preview — phone locked, screens as chips. The device segmented control
     is hidden and site.js pins the device to phone. */
  #devSeg{display:none}
  .pv-head{margin-bottom:20px}
  /* minmax(0,1fr): plain 1fr is minmax(auto,1fr) and the chip scroller's
     min-content width blows the grid past the viewport. */
  .pv-body{gap:0;grid-template-columns:minmax(0,1fr)}
  .pv-body>*{min-width:0}
  .pv-nav{gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}
  .pv-nav::-webkit-scrollbar{display:none}
  .pv-nav button{flex:none;min-height:44px;border:1px solid var(--line-2);border-left-width:1px;border-radius:999px;padding:0 16px;font-size:13px;scroll-snap-align:start}
  .pv-nav button:hover{background:transparent}
  .pv-nav button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-accent)}
  .pv-nav svg{display:none}
  .pv-cap{margin-top:14px;padding-left:0;font-size:10.5px}
  .pv-frame{min-height:0;margin-top:20px}
  .pv-frame .frame{transform:none!important}

  /* features rail — still a swipe deck, one feature per screen. The arrows go:
     at this width they sit on top of the artwork, and the dots plus the NN / 05
     counter already cover navigation. */
  .rp{padding:22px 0 26px}
  .rp-in,.rp.flip .rp-in{width:min(100% - 32px,var(--wrap));gap:20px}
  .rp h3{font-size:clamp(23px,6.6vw,29px)}
  .rp .f-copy{gap:13px}
  .rp .f-copy .small{font-size:14.5px;max-width:none}
  .rp .f-list{gap:10px;margin-top:6px}
  .rp .f-list li{font-size:13.5px}
  .rb-a{display:none}
  .rail-bar{height:50px}

  /* pricing */
  .price-hero{padding:24px 20px 22px}
  .price-hero .big{font-size:38px}
  .price-rows{padding:6px 20px 20px}
  .price-row{padding:14px 0;gap:12px}
  .price-row .n{font-size:14px}
  .calc{padding:20px}
  .calc .total .amt{font-size:27px}

  /* dense card grids read better as divided lists on a phone — six bordered
     cards stacked is a very long, very repetitive scroll */
  [data-sec="integrations"] .cards,[data-sec="security"] .cards{grid-template-columns:1fr;gap:0}
  [data-sec="integrations"] .card,[data-sec="security"] .card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0;display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px}
  [data-sec="integrations"] .card:first-child,[data-sec="security"] .card:first-child{border-top:0;padding-top:0}
  [data-sec="integrations"] .card .ico,[data-sec="security"] .card .ico{width:30px;height:30px;margin:0;grid-row:span 2;align-self:start}
  [data-sec="integrations"] .card h4,[data-sec="security"] .card h4{margin:0 0 4px;align-self:center}
  [data-sec="integrations"] .card p,[data-sec="security"] .card p{grid-column:2;font-size:13px}

  /* two paths */
  .path{padding:22px;gap:14px}
  .path .btn{width:100%}

  /* mobile-app section */
  .mob{gap:26px}
  .mob .frame.phone{max-width:250px}
  .badges .badge{flex:1 1 45%;justify-content:center;padding:0 12px}
  [data-sec="mobile"] .mob-moments{grid-template-columns:1fr;gap:0;margin-top:24px}
  [data-sec="mobile"] .mob-moments .card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0;display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:baseline}
  [data-sec="mobile"] .mob-moments .card h4{margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;line-height:1.5}
  [data-sec="mobile"] .mob-moments .card p{font-size:13px}

  /* faq + final */
  details summary{font-size:15.5px;padding:18px 32px 18px 0}
  details summary::after{top:24px;width:8px;height:8px}
  details .a{padding:0 6px 18px 0;font-size:14px}
  .final{gap:18px}
  .final h2{max-width:none}   /* the 16ch cap is far too narrow on a phone */

  /* footer */
  .foot{padding:44px 0 40px}
  body:has(#mcta) .foot{padding-bottom:98px}
  .foot-in{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot-in>div:first-child{grid-column:1/-1}
  .foot-bot{margin-top:30px;flex-direction:column;gap:7px}

  /* ── contact ── */
  .ct-hero{padding:32px 0 52px}
  .ct-hero h1{font-size:clamp(28px,7.8vw,36px)}
  .ct-head{gap:14px;margin-bottom:24px}
  .ask{padding:20px;border-radius:14px;gap:24px}
  .ask-l{gap:20px}
  .ask-list li{font-size:13.5px}
  /* The button and the hours caption wrap onto separate lines here, so the
     Telegram button goes back to the .btn default width instead of the
     inline-flex the two-up row needed. */
  .ask-r{gap:11px}
  .ask-r .btn.tg-btn{width:100%}
  .fm-in{gap:30px}
  .fm-card{padding:20px}
  .frm-foot{gap:12px;margin-top:6px}
  .frm-foot .btn{width:100%}
  .sent .btn{width:100%}
}

@media(max-width:400px){
  .band{padding:54px 0}
  .hero h1{font-size:30px}
  .badges .badge{flex:1 1 100%}
  [data-sec="mobile"] .mob-moments .card{grid-template-columns:1fr;gap:4px}
  .mcta .k{font-size:9.5px}
  .foot-in{grid-template-columns:1fr}
}