/* ==========================================================================
   AKA CONNECT — base tokens, reset and shared primitives

   Values are the real Figma variables from file P4OURrBCQKl2r3Uv8vM7kI
   (node 72:242, "MacBook Air - 7"), read via the Figma MCP — not estimates.
   ========================================================================== */

:root {
  /* ---- colour (Figma: ui/* and text/*) ---- */
  --purple:        #6947AC;   /* ui/purple      */
  --purple-hover:  #573B90;
  --w-purple:      #F6F5FE;   /* ui/w-purple    */
  --gray-purple:   #989CB2;   /* ui/gray-purple */
  --gray-40:       #EDEDED;   /* ui/gray 40%    */
  --light-gray:    #F2F3F6;   /* ui/light-gray  */
  --ink:           #1E1E1E;   /* ui/black       */
  --ink-text:      #191919;   /* text/black     */
  --body:          #484848;   /* secondary copy */
  --white:         #FFFFFF;   /* ui/white       */
  --card:          #FEFEFE;   /* form card fill */
  --field-bg:      rgba(237, 237, 237, .4);

  /* accent palette (Figma: accent colors/*) — each fill has a matching
     darker text colour, used by the large feature chips on the homepage */
  --accent-green:    #219634;
  --chip-urgent:     #FFD9D9;
  --ink-urgent:      #772323;
  --chip-live:       #D9FFDF;
  --accent-lgreen:   #A5F4B2;
  --accent-lavender: #D0BBFB;
  --accent-blue:     #AAD6FC;
  --accent-peach:    #FAD0A6;
  --accent-pink:     #FAA9E9;
  --accent-lemon:    #EEFFA5;
  --ink-pink:        #853874;   /* dark-pink   */
  --ink-blue:        #3374B0;   /* dark-blue   */
  --ink-lemon:       #6F7E2C;   /* lemon-green */
  --ink-peach:       #AF7033;   /* peach-brown */
  --light-purple:    #E6E4F7;   /* ui/light-purple */
  --ink-warm:        #2F241D;   /* Black text     */
  --card-border:     #B4B7C7;   /* pricing card outline */
  --panel-dark:      #363842;   /* cards inside dark bands */
  --chip-dark:       #676A7C;   /* status chip on dark      */

  /* trust-strip dots, from the exported ellipse assets */
  --dot-1: #ABD8FF;
  --dot-2: #89D596;
  --dot-3: #FFABED;
  --dot-4: #FFD3A8;

  /* ---- elevation (Figma effect styles) ---- */
  --shd-card:  9px 7px 15px 2px rgba(43, 43, 43, .20);   /* Drop shd cards */
  --shd-btn:  -4px 4px 8px 0 rgba(43, 43, 43, .14);      /* Button Drop Sd */
  --shd-panel: -9px 7px 20px 2px rgba(191, 191, 191, .10);
  /* Figma "Inner Shd colors" — the soft highlight on the accent chips */
  --inner-chip: inset 4px 4px 4px rgba(255, 255, 255, .37),
                inset 0 -4px 4px rgba(255, 255, 255, .21);
  /* Figma "Main purp inner sd" — purple bloom inside dark panels */
  --inner-purple: inset 0 4px 50px rgba(111, 83, 255, .09);

  /* ---- radii ---- */
  --r-pill:   999px;
  --r-field:  50px;
  --r-panel:  30px;
  --r-plan:   20px;
  --r-btn:    15px;
  --r-chip:   10px;
  --r-check:   5px;

  /* ---- type (Figma: Manrope scale) ---- */
  /* page shell — every section lines up with the header's logo and demo
     button, so these two values are the single source of that alignment */
  --shell:  1470px;
  --gutter: 30px;
  --content: calc(var(--shell) - var(--gutter) * 2);

  --font: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --h1: 600 60px/1.05 var(--font);
  --h2: 600 35px/1.05 var(--font);
  --h3: 600 20px/1.3  var(--font);
  --h4: 600 16px/1    var(--font);   /* Heading/H4_16_SemiBold */
  --t1: 400 18px/1.5  var(--font);
  --t-body: 400 16px/1.3 var(--font);   /* pairs with --ls-body */
  --t-med:  500 14px/1.5 var(--font);
  --t-bold: 700 14px/1.3 var(--font);
  --h-num:  400 65px/0.9 var(--font);   /* Heading/Numbers_65_Regular */
  --ls-body: -.023em;                   /* Figma tracking -0.368px @16px */
  --ls-num:  -.04em;                    /* Figma tracking -2.6px @65px  */

  --focus: 0 0 0 3px rgba(105, 71, 172, .30);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink-text);
  background: var(--light-gray);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* height:auto matters: without it a width/height attribute pair keeps the
   attribute height while max-width shrinks the width, squashing the image */
img, svg { display: block; max-width: 100%; height: auto; }

/* the header is sticky, so an in-page jump has to clear it — the header
   measures 111px at full width, 91px once the nav collapses, 85px on a
   phone */
html { scroll-padding-top: 125px; }
@media (max-width: 1180px) { html { scroll-padding-top: 105px; } }
@media (max-width:  720px) { html { scroll-padding-top:  99px; } }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); }

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

/* Continue / primary action — Figma 72:311 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 15px;
  border-radius: var(--r-btn);
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #000; }
.btn--dark:active { transform: translateY(1px); }

/* OAuth pair — Figma 72:315 / 72:318 */
.btn--oauth {
  border: 1px solid var(--gray-purple);
  border-radius: var(--r-btn);
  box-shadow: var(--shd-btn);
  background: var(--white);
  color: var(--ink);
}
.btn--oauth:hover { border-color: var(--purple); }
.btn--oauth img { width: 20px; height: 20px; }

/* Field — Figma component "Form" 134:5343 */
.field { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.field__label {
  padding: 0 15px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink-text);
}
.field__input {
  width: 100%;
  padding: 15px 30px 15px 15px;
  background: var(--field-bg);
  border: 1px solid transparent;
  border-radius: var(--r-field);
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink-text);
}
.field__input::placeholder { font-size: 12px; color: var(--gray-purple); }
.field__input:hover { background: rgba(237, 237, 237, .7); }
.field__input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--purple);
  box-shadow: var(--focus);
}
.is-validated .field__input:invalid { border-color: #C4394C; }

/* ---------- show / hide password ----------
   The button sits inside the input's right edge, and the input keeps room for
   it so a long password never runs underneath. */
.field__control { position: relative; }
.field__control .field__input { padding-right: 52px; }
/* Edge draws an eye of its own in password fields; one is enough */
.field__control .field__input::-ms-reveal,
.field__control .field__input::-ms-clear { display: none; }
.reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-purple);
  cursor: pointer;
}
.reveal:hover { color: var(--ink-text); }
.reveal:focus-visible { outline: 2px solid var(--purple); outline-offset: 0; }
.reveal svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the eye while it's hidden, the struck-through eye while it's showing */
.reveal__hide { display: none; }
.reveal[aria-pressed="true"] .reveal__show { display: none; }
.reveal[aria-pressed="true"] .reveal__hide { display: block; }

/* "or" divider — Figma 72:313 */
.or {
  width: 100%;
  text-align: center;
  font: var(--t-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gray-purple);
}

/* ---------- language switcher ----------
   Inline by default (marketing header); auth.css floats it instead. */
.lang { position: relative; }

.lang__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-btn);
  background: var(--white);
  box-shadow: var(--shd-btn);
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink);
}
.lang__btn svg { width: 16px; height: 16px; flex: none; }
.lang__chev { transition: transform .18s ease; }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: var(--r-btn);
  background: var(--white);
  box-shadow: var(--shd-card);
  z-index: 10;
}
.lang__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-chip);
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink);
  text-align: left;
}
.lang__item:hover { background: var(--w-purple); text-decoration: none; }
.lang__item[aria-current="true"] { background: var(--w-purple); color: var(--purple); font-weight: 700; }

/* trust strip — Figma 72:284 */
.trust { display: flex; flex-wrap: wrap; gap: 12px 25px; }
.trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--body);
}
.trust li::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dot);
}
.trust li:nth-child(1) { --dot: var(--dot-1); }
.trust li:nth-child(2) { --dot: var(--dot-2); }
.trust li:nth-child(3) { --dot: var(--dot-3); }
.trust li:nth-child(4) { --dot: var(--dot-4); }

.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;
}

/* ---------- scroll reveal, phones only — reveal.js ----------
   A 14px rise and a fade as a block comes into view, and nothing else: no
   scale, no bounce, no sideways drift. The hidden state hangs off the
   `js-reveal` class the script sets on the root, so the page is never left
   invisible if the script does not run. */
@media (max-width: 780px) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
  }
  .js-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease var(--reveal-delay, 0ms),
                transform .5s cubic-bezier(.2, .7, .3, 1) var(--reveal-delay, 0ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  /* reveal.js bows out here, but never leave a block hidden either way */
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 1180px) { :root { --gutter: 20px; } }