/* ============================================================
   Argento CRM — shared styles for the standalone site pages
   (features, contact, privacy, terms, signup, welcome).

   These pages sit alongside the bundled index.html rather than
   inside it, so they carry their own styling. Palette is taken
   from the brand mark: navy #0f172a, teal #00d4c0, blue #00aae3.
   ============================================================ */

:root {
  --ink:      #0f172a;
  --ink-soft: #1e293b;
  --teal:     #00d4c0;
  --blue:     #00aae3;
  --line:     #e2e8f0;
  --muted:    #64748b;
  --body:     #334155;
  --radius:   12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--body);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }

/* ---------- header ----------
   Light surface on purpose: the brand logo (argento-logo-dark.png) is the
   dark-inked lockup, so it needs a light background to read. The hero
   below stays navy for contrast. */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 12px; padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
/* Header lockup size — matches the homepage header logo.
   Change this one value to resize it across every page. */
:root { --logo-h: 55px; }
.brand img { height: var(--logo-h); width: auto; display: block; }
.brand-stack { display: block; margin: 0 auto 22px; height: var(--logo-h); width: auto; }

.nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav a {
  color: var(--body); text-decoration: none; font-size: 14px; font-weight: 550;
  transition: color .15s;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 650; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 9px;
  font-size: 15px; font-weight: 650; text-decoration: none; cursor: pointer;
  border: 0; font-family: inherit; transition: transform .12s, opacity .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--blue), var(--teal)); color: #00232b; }
.btn-ghost   { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-sm      { padding: 8px 16px; font-size: 14px; }

/* ---------- hero ---------- */
.hero {
  background: var(--ink);
  color: #fff;
  padding: 72px 0 80px;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 46px); line-height: 1.15; font-weight: 750;
  letter-spacing: -.02em; margin-bottom: 16px; color: #fff;
}
.hero p { font-size: 17px; color: #cbd5e1; max-width: 640px; }
.hero .btn { margin-top: 26px; }

/* ---------- sections ---------- */
section { padding: 64px 0; }
h2 {
  font-size: clamp(22px, 3vw, 30px); color: var(--ink); font-weight: 700;
  letter-spacing: -.015em; margin-bottom: 12px;
}
h3 { font-size: 17px; color: var(--ink); font-weight: 650; margin-bottom: 6px; }
.lede { font-size: 16px; color: var(--muted); max-width: 660px; margin-bottom: 36px; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; background: #fff;
}
.card .ico {
  width: 38px; height: 38px; border-radius: 9px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(0,170,227,.12), rgba(0,212,192,.12));
  display: flex; align-items: center; justify-content: center; color: var(--blue);
}
.card p { font-size: 14px; color: var(--muted); }

.alt { background: #f8fafc; }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.plan { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff; }
.plan.featured { border-color: var(--blue); box-shadow: 0 10px 30px rgba(0,170,227,.10); }
.plan .name { font-weight: 700; color: var(--ink); font-size: 17px; }
.plan .price { font-size: 34px; font-weight: 750; color: var(--ink); margin: 8px 0 2px; letter-spacing: -.02em; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan ul { list-style: none; margin: 16px 0 22px; }
.plan li { font-size: 14px; padding: 5px 0 5px 22px; position: relative; color: var(--body); }
.plan li::before {
  content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700;
}

/* ---------- legal / prose ---------- */
.prose { padding: 56px 0 72px; }
.prose h2 { margin-top: 34px; font-size: 21px; }
.prose h3 { margin-top: 22px; }
.prose p, .prose li { font-size: 15px; color: var(--body); }
.prose ul, .prose ol { margin: 10px 0 10px 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--blue); }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
.prose th { background: #f8fafc; font-weight: 650; color: var(--ink); }
.updated { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.callout {
  background: #f0fbff; border: 1px solid #bae6fd; border-radius: 10px;
  padding: 14px 16px; font-size: 14px; margin: 20px 0;
}

/* ---------- forms ---------- */
label { display: block; font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 6px; }
input, textarea, select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 15px; font-family: inherit; color: var(--ink);
  margin-bottom: 16px; background: #fff;
}
textarea { min-height: 150px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,170,227,.14);
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.note { font-size: 13px; color: var(--muted); }
.msg { padding: 12px 14px; border-radius: 9px; font-size: 14px; margin-bottom: 18px; display: none; }
.msg.err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.msg.ok  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

/* ---------- footer ----------
   Light for the same reason as the header: the dark-inked logo has to be
   legible here too. */
.site-footer {
  background: #f8fafc; border-top: 1px solid var(--line);
  color: var(--muted); padding: 40px 0 30px; font-size: 14px;
}
.site-footer a { color: var(--body); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
/* Footer lockup is larger than the header one, matching the homepage. */
.site-footer img { height: 64px; width: auto; display: block; margin-bottom: 10px; }
.foot-cols {
  display: flex; flex-wrap: wrap; gap: 30px;
  justify-content: space-between; align-items: flex-start;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
/* Divider was rgba(255,255,255,.10) from when this footer was dark —
   invisible against the light background. */
.foot-bottom {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 13px; color: var(--muted);
}

@media (max-width: 640px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .nav { gap: 14px; }
  .hero { padding: 52px 0 58px; }
  section { padding: 48px 0; }
}