/* ════════════════════════════════════════════════════════════════════════════
 *  babes — site refinement layer
 *  ---------------------------------------------------------------------------
 *  Loaded AFTER site.css on every public page. Purely visual: typography,
 *  surfaces, spacing and states. It never changes layout structure, only how
 *  the existing structure looks — so nothing on any page can move or break.
 *
 *  Colour palette is untouched: the same emerald brand + near-black surfaces.
 * ════════════════════════════════════════════════════════════════════════════ */

:root{
  --display:'Satoshi','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* elevation ladder — softer, deeper, less "flat black box" */
  --sh-1:0 1px 2px rgba(0,0,0,.28);
  --sh-2:0 8px 26px rgba(0,0,0,.34);
  --sh-3:0 22px 60px rgba(0,0,0,.5);

  /* the one card surface used everywhere: faint top light + near-black body */
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 42%),#0d0d12;
  --card-bg-hi:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 42%),#101016;
  --hair:inset 0 1px 0 rgba(255,255,255,.055);
}

/* ── type ──────────────────────────────────────────────────────────────────
   Headings move to Satoshi (the geometric grotesk the reference site uses),
   body copy stays on Inter. Tighter tracking, calmer line-height.            */
h1,h2,h3,h4,h5,
.hero h1,.sec-title,.page-title,.cmd-banner h2,.final-title,
.nav-sheet-title,.contact-cta h3{
  font-family:var(--display);
  letter-spacing:-.028em;
  text-wrap:balance;
}
.hero h1,.page-title{letter-spacing:-.038em;font-weight:700}
.sec-title{font-weight:700;letter-spacing:-.032em}
body{letter-spacing:-.005em}
p{text-wrap:pretty}

/* Gradient accent words: brighter core, softer tail — reads as light, not paint. */
.sec-title .g,.hero h1 .g,.page-title em,.cmd-banner h2 .n{
  background:linear-gradient(112deg,#a7f3d0 0%,var(--brand-3) 34%,var(--brand-2) 78%,var(--brand) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── nav: centred glass pill (desktop) ─────────────────────────────────────
   The link row floats in the exact centre of the bar while the logo stays
   left and the Dashboard button stays right. Absolute centring means the
   markup order is irrelevant — no page needs its nav rewritten.             */
@media(min-width:861px){
  .nav{position:sticky;padding-top:12px;padding-bottom:12px}
  .nav .nav-links.nav-d{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    gap:2px;padding:5px;border-radius:var(--r-pill);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(12,12,17,.7);
    border:1px solid rgba(255,255,255,.075);
    box-shadow:var(--hair),0 10px 30px rgba(0,0,0,.36);
    backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  }
  .nav .nav-links.nav-d .nav-link{
    padding:8px 16px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;
  }
  .nav .nav-links.nav-d .nav-link:hover{background:rgba(255,255,255,.06);color:var(--ink)}
  .nav .nav-links.nav-d .nav-link.active{
    background:rgba(255,255,255,.085);color:var(--ink);
    box-shadow:var(--hair),0 2px 8px rgba(0,0,0,.3);
  }
  /* the underline from site.css would fight the pill */
  .nav .nav-links.nav-d .nav-link.active::after{display:none}
}
.nav-logo{font-family:var(--display);font-weight:700;font-size:16.5px}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{font-weight:600;letter-spacing:-.012em;border-radius:var(--r-pill)}
.btn-primary{
  background:linear-gradient(180deg,#34d399,#10b981);color:#04140e;
  box-shadow:var(--hair),0 6px 18px rgba(16,185,129,.22);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#6ee7b7,#10b981);
  box-shadow:var(--hair),0 8px 26px rgba(16,185,129,.34);
}
.btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),rgba(14,14,19,.9);
  border-color:rgba(255,255,255,.1);box-shadow:var(--hair),var(--sh-1);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.2);box-shadow:var(--hair),var(--sh-2)}
.btn-sparkle{font-weight:600}

/* ── section rhythm ────────────────────────────────────────────────────── */
.sec{padding:clamp(56px,8vw,100px) 0}
.sec-icon{
  width:56px;height:56px;margin-bottom:26px;
  background:var(--card-bg-hi);border-color:rgba(255,255,255,.09);
  box-shadow:var(--hair),0 10px 30px rgba(0,0,0,.45),0 0 40px rgba(16,185,129,.07);
}
.sec-title{margin-bottom:16px}
.sec-sub{font-size:16.5px;max-width:620px;color:#8b8b96;line-height:1.68}

/* ── cards, universally ─────────────────────────────────────────────────
   Every card on the marketing pages shares one recipe: a hair-thin top
   highlight, a near-black body and a border that only warms on hover.     */
.fcard,.scard,.mcard,.ccard,.tcard,.vm-card,
.plan-card,.feat-card,.cmd-card,.doc-card,.status-card,.perk-card,.tier-card{
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,.065);
  box-shadow:var(--hair),var(--sh-2);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.fcard:hover,.scard:hover,.mcard:hover,.ccard:hover,.tcard:hover,
.plan-card:hover,.feat-card:hover,.cmd-card:hover,.doc-card:hover,.perk-card:hover{
  background:var(--card-bg-hi);
  border-color:rgba(255,255,255,.13);
  box-shadow:var(--hair),var(--sh-3);
}
.fcard,.vm-card,.mcard,.scard{border-radius:24px}
.ccard,.tcard{border-radius:20px}

/* card headings: the accent-green title style from the reference */
.fcard h3,.scard h4,.mcard h4{
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;
  color:#9fe7c8;
}
.ccard h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.fcard p,.scard p,.mcard p,.ccard p{color:#84848f;line-height:1.62}

/* feature icon tiles */
.ccard .ci{
  background:linear-gradient(180deg,rgba(16,185,129,.16),rgba(16,185,129,.05));
  border-color:rgba(16,185,129,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.3);
}

/* ── pill link ("100+ more commands") ──────────────────────────────────── */
.pill-link{
  background:var(--card-bg-hi);border-color:rgba(255,255,255,.1);
  box-shadow:var(--hair),var(--sh-2);padding:14px 28px;
}
.pill-link:hover{border-color:rgba(255,255,255,.18)}

/* ── testimonials ──────────────────────────────────────────────────────── */
.tcard-quote{color:#c3c3cc;font-size:14.5px;line-height:1.7}
.tcard-name{font-family:var(--display);letter-spacing:-.015em}

/* ── final CTA ─────────────────────────────────────────────────────────── */
.final-inner{
  border-radius:28px;
  background:linear-gradient(165deg,rgba(16,185,129,.085),rgba(11,11,15,.86) 58%);
  border-color:rgba(255,255,255,.09);
  box-shadow:var(--hair),var(--sh-3);
}
.final-title{font-weight:700;letter-spacing:-.035em}

/* ── footer ────────────────────────────────────────────────────────────── */
.footer-inner{padding-top:64px}
.footer-col h5{font-family:var(--display);font-size:13.5px;letter-spacing:-.01em;color:var(--ink)}
.footer-col a{font-size:13.5px}
.footer-brand p{font-size:13px;line-height:1.68;color:#7b7b86}
.footer-bottom{padding-top:26px;font-size:12.5px;gap:14px}

/* ── legal / FAQ / docs headers ────────────────────────────────────────── */
.page-title{font-weight:700}
.page-sub{color:#8b8b96;font-size:16.5px}
.eyebrow{
  background:linear-gradient(180deg,rgba(16,185,129,.16),rgba(16,185,129,.05));
  border-color:rgba(16,185,129,.26);
  box-shadow:var(--hair),0 0 28px rgba(16,185,129,.09);
}
details.faq{background:var(--card-bg);border-color:rgba(255,255,255,.065);box-shadow:var(--hair),var(--sh-1)}
details.faq summary{font-family:var(--display);letter-spacing:-.015em}
.legal-content h2{font-family:var(--display);letter-spacing:-.022em}
.contact-cta{
  background:linear-gradient(165deg,rgba(16,185,129,.09),rgba(11,11,15,.85) 62%);
  border-color:rgba(255,255,255,.09);box-shadow:var(--hair),var(--sh-3);border-radius:24px;
}

/* ── motion preferences ───────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .lang-switch-menu{transition:none}
}