/* ==========================================================================
   AKA CONNECT — shared marketing chrome and primitives
   Header: Figma node 134:6251. Footer: Figma component 204:2104.
   Loaded by every marketing page (not by the auth pages).
   ========================================================================== */

body { background: var(--white); }

.shell { max-width: 1470px; margin: 0 auto; }

/* ---------- shared primitives ---------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: var(--r-btn);
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  transition: background-color .18s ease, transform .18s ease;
}
.btn-pill:hover { text-decoration: none; }
.btn-pill:active { transform: translateY(1px); }
.btn-pill--purple { background: var(--purple); color: var(--white); }
.btn-pill--purple:hover { background: var(--purple-hover); }
/* on its own page the header CTA goes quiet, as the design shows */
.site-head .btn-pill[aria-current="page"] {
  background: none;
  color: var(--gray-purple);
}
.btn-pill--dark { background: var(--ink); color: var(--white); }
.btn-pill--dark:hover { background: #000; }
.btn-pill--wide { padding: 15px 25px; }
.btn-pill--block { width: 100%; padding: 15px; }

/* green pill used for "most popular" / "special offer" — Figma 134:6249 */
.badge-green {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 40px;
  background: var(--accent-lgreen);
  box-shadow: var(--inner-chip);
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--accent-green);
  white-space: nowrap;
}

.eyebrow {
  font: var(--t-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gray-purple);
}

/* four-pointed-star feature list, used across the marketing pages */
.feat { display: flex; flex-direction: column; gap: 10px; }
.feat li {
  position: relative;
  padding-left: 22px;
  font: var(--t-med);
  letter-spacing: 0;
}
.feat li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  font-size: 12px;
  line-height: 1.75;
}

/* purple arrow bullets — Figma "Ponts / Statuses" */
.arrows { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.arrows li {
  display: flex;
  align-items: center;
  gap: 13px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--purple);
}
.arrows img { width: 10px; height: 10px; flex: none; }

/* ---------- logo ---------- */

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 204px;
  flex: none;
  color: inherit;
}
.logo:hover { text-decoration: none; }
.logo__name {
  font-family: var(--font);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.023em;
  text-transform: uppercase;
  color: var(--ink-text);
}
.logo__by {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.023em;
  color: var(--gray-purple);
}

/* ---------- header ---------- */

/* The header follows the page: it steps out of the way while you read down and
   comes straight back the moment you scroll up, so the nav is always one flick
   away instead of a scroll to the top. site.js toggles the class. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 30px var(--gutter);
}
.site-head__menu { display: contents; }
.nav { display: flex; gap: 10px; }
.nav__link {
  padding: 10px 15px;
  border-radius: var(--r-btn);
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink-text);
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.nav__link:hover { background: var(--w-purple); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--purple); }
/* the nav's own copy of the demo button, for the phone menu (see 720px) */
.nav__demo { display: none; }

.site-head__end { display: flex; align-items: center; gap: 20px; }
.site-head__utils { display: flex; align-items: center; }

.util {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: var(--r-btn);
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink);
  white-space: nowrap;
}
.util:hover { background: var(--w-purple); text-decoration: none; }
.util img { width: 20px; height: 20px; flex: none; }

/* the switcher sits inline in the header, so drop the card treatment */
.site-head .lang__btn { background: none; box-shadow: none; padding: 10px 15px; font: var(--t-body); letter-spacing: var(--ls-body); }
.site-head .lang__btn:hover { background: var(--w-purple); }
.site-head .lang__btn svg { width: 20px; height: 20px; }

/* small-screen nav toggle — no mobile header exists in Figma, so this is a
   plain, obvious reduction rather than a designed pattern */
.burger { display: none; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-btn); }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }
.burger:hover { background: var(--w-purple); }

/* ---------- reCAPTCHA v3 ----------
   Nothing to tick, so a protected form carries only the line Google requires
   wherever its badge is hidden — and the badge is hidden, because it floats
   over the bottom corner of every protected page. visibility, not display:
   Google's script stops scoring when the badge is not rendered at all. */
.grecaptcha-badge { visibility: hidden; }
.captcha {
  max-width: 42ch;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--body);
}
.captcha a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.captcha a:hover { color: var(--purple); }

/* ---------- footer ---------- */

.site-foot {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 0 auto 10px;
  padding: 60px;
  background: var(--light-gray);
  border-radius: 40px;
}

.site-foot__grid {
  display: grid;
  grid-template-columns: 366px minmax(0, 1fr) minmax(0, 1fr) 318px;
  gap: 40px;
}

.foot-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.foot-brand__top { display: flex; flex-direction: column; gap: 25px; }
.foot-brand__tagline {
  max-width: 302px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink-text);
}
.foot-brand .btn-pill { align-self: flex-start; width: 152px; }

.foot-col { display: flex; flex-direction: column; }
.foot-col__title {
  padding: 0 15px;
  margin-bottom: 48px;
  font: var(--t-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gray-purple);
}
.foot-col--social .foot-col__title { margin-bottom: 50px; }
.foot-col--contacts .foot-col__title { margin-bottom: 58px; }

.foot-col__links { display: flex; flex-direction: column; align-items: flex-start; }

.socials { display: flex; flex-direction: column; gap: 20px; }
.social {
  display: flex;
  align-items: center;
  gap: 1px;
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink-text);
}
.social:hover { text-decoration: none; }
.social > span:last-child { padding: 10px; border-radius: var(--r-btn); }
.social:hover > span:last-child { background: var(--white); }
.social__badge { width: 50px; height: 50px; flex: none; }
.social__tile {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: var(--r-chip);
  background: var(--gray-purple);
}
.social__tile img { width: 24px; height: 24px; }

.contacts { display: flex; flex-direction: column; gap: 15px; padding: 0 15px; }
.contact { display: flex; flex-direction: column; gap: 7px; }
.contact__label { font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }
.contact__value {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink-text);
}
.copy { position: relative; display: flex; opacity: .65; transition: opacity .15s ease; }
.copy:hover { opacity: 1; }
.copy img { width: 20px; height: 20px; }
/* The copied state used to be opacity alone, which a mouse user could never
   see: to click the button you have to hover it, and hover had already taken
   the opacity to 1. So the button appeared to do nothing at all. */
.copy.is-copied { opacity: 1; }
.copy.is-copied::after {
  content: attr(data-copied);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font: var(--t-med);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.site-foot__legal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-top: 50px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--gray-purple);
}
.site-foot__legal > div { display: flex; flex-direction: column; gap: 5px; max-width: 377px; }
.site-foot__address { max-width: 486px; text-align: right; }

/* ---------- touch targets ----------
   Below the tablet breakpoint these are finger targets, not cursor targets.
   The visual size is unchanged; only the hit area grows. */

@media (max-width: 1180px) and (pointer: coarse), (max-width: 760px) {
  /* footer clipboard buttons render at 20px — pad the hit area out to 44 */
  .copy { padding: 12px; margin: -12px; }

  /* the burger is the only way to reach the nav on small screens */
  .burger { padding: 15px; }

  /* text-only CTAs collapse to ~31px without their icon tile */
  .cta-btn { min-height: 44px; }
  .btn-pill { min-height: 44px; }
}

/* ---------- responsive ----------
   The Figma marketing frames are desktop-only at this width, so these steps
   are a reduction of the same design rather than a 1:1 match. */

@media (max-width: 1180px) {
  .site-head { padding: 20px; }
  .nav { display: none; }
  .burger { display: flex; }

  .site-head.is-open .nav {
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: var(--white);
    border-radius: var(--r-btn);
    box-shadow: var(--shd-card);
  }
  .site-foot { padding: 40px; border-radius: 30px; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-foot__legal { flex-direction: column; gap: 16px; }
  .site-foot__address { text-align: left; }
}

@media (max-width: 720px) {
  .site-head { gap: 4px; }
  /* the auto margin pushes the rest of the bar up against the burger */
  .logo { width: auto; align-items: flex-start; margin-right: auto; }
  .logo__name { font-size: 24px; }

  /* Language and sign-in stay in the bar, reachable without opening
     anything. The demo button is the one thing that moves into the burger
     panel, as its last item — the nav's own copy of it. */
  .site-head__end > .btn-pill { display: none; }
  .site-head.is-open .nav__demo { display: flex; margin-top: 6px; }

  /* Compact enough to share the bar with the logo on a 360px phone: the
     globe goes, the burger narrows to a 44px target, and sign-in is its icon
     alone — the words stay in the markup for screen readers. */
  .site-head .lang__btn { gap: 4px; padding: 12px 8px; }
  .site-head .lang__btn svg:not(.lang__chev) { display: none; }
  .site-head .lang__btn .lang__chev { width: 16px; height: 16px; }
  .site-head__utils .util { padding: 12px; }
  .site-head__utils .util span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .burger { padding: 15px 12px; }
  .site-foot { padding: 28px 20px; }
  .site-foot__grid { grid-template-columns: 1fr; gap: 32px; }
  /* the mobile design drops the Product nav — the burger already carries it —
     and leads with contacts */
  .site-foot__grid > .foot-col:not([class*="--"]) { display: none; }
  .foot-col--social { order: 1; }
  .foot-col__title,
  .foot-col--social .foot-col__title,
  .foot-col--contacts .foot-col__title { margin-bottom: 20px; }
  .contacts { padding: 0; }
}

/* The narrowest phones: the logo steps down a size and the switcher drops its
   arrow, so the bar still holds logo, language, sign-in and burger. */
@media (max-width: 359px) {
  .logo__name { font-size: 20px; }
  .site-head .lang__btn .lang__chev { display: none; }
}