/* ==========================================================================
   Testimonials.Free — design system

   Bootstrap is still loaded (the dashboard leans on its grid, forms and
   accordion), but every marketing surface uses the primitives below instead of
   stock Bootstrap components. The fleet rule is that stock-Bootstrap pages
   bounce; see the design bar in ~/frees/CLAUDE.md.

   Palette rationale: amber is already the star colour inside the embed CSS
   (snapshot.py), so making it the brand accent means a customer's wall and this
   site read as one product. Ink navy stops it looking like a warning banner,
   cream keeps it warm — this product is about praise.
   ========================================================================== */

:root {
  --ink:        #0b1020;
  --ink-2:      #131a30;
  --ink-3:      #1e2740;
  --cream:      #fffcf7;
  --surface:    #ffffff;
  --surface-2:  #faf7f2;
  --amber:      #f59e0b;
  --amber-d:    #b45309;
  --amber-soft: #fef3c7;
  --violet:     #7c3aed;
  --text:       #161a2b;
  --muted:      #5c6379;
  --line:       #ebe6dd;
  --radius:     20px;
  --radius-sm:  12px;
  --shadow:     0 1px 2px rgba(11,16,32,.04), 0 8px 24px -12px rgba(11,16,32,.12);
  --shadow-lg:  0 2px 4px rgba(11,16,32,.04), 0 24px 60px -24px rgba(11,16,32,.24);
  --maxw:       1140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #0b1020; --surface: #131a30; --surface-2: #171f38;
    --text: #f3f4f6; --muted: #9aa3b8; --line: #2a3452;
    --amber-soft: #3a2c0c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 24px 60px -24px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

body {
  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--cream); color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }

h1, h2, h3, h4 { color: var(--text); letter-spacing: -.02em; font-weight: 700; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 22px; }
.section { padding: 76px 0; }
.section-sm { padding: 46px 0; }
.center { text-align: center; }
.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber-d);
  background: var(--amber-soft); padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.lede { font-size: 1.12rem; color: var(--muted); max-width: 640px; }
.center .lede { margin-inline: auto; }
.h-sec { font-size: clamp(1.5rem, 3.4vw, 2.15rem); margin: 0 0 12px; }

/* ---------- navigation ------------------------------------------------- */

.tf-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.tf-nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 24px;
}
.tf-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 1.02rem; text-decoration: none;
  letter-spacing: -.02em; color: var(--text); flex: 0 0 auto;
}
.tf-logo-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
  background: linear-gradient(140deg, var(--amber), var(--violet));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 2px 8px -2px var(--amber);
}
.tf-nav-links { display: flex; gap: 20px; margin-left: 4px; flex: 1; }
.tf-nav-links a {
  text-decoration: none; color: var(--muted); font-size: .93rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.tf-nav-links a:hover { color: var(--text); }
.tf-nav-links a.on { color: var(--text); border-bottom-color: var(--amber); }
.tf-nav-right { display: flex; align-items: center; gap: 12px; }
.tf-burger {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 10px; cursor: pointer; color: var(--text);
}
.tf-mob { display: none; }

@media (max-width: 900px) {
  .tf-nav-links, .tf-hide-sm { display: none; }
  .tf-burger { display: block; }
  .tf-nav-in { gap: 12px; }
  .tf-mob.open {
    display: block; padding: 6px 22px 18px; border-top: 1px solid var(--line);
  }
  .tf-mob a { display: block; padding: 11px 0; text-decoration: none; color: var(--text); font-weight: 500; }
}

/* ---------- buttons ---------------------------------------------------- */

.btn-tf, .btn-ghost, .btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer;
  padding: 12px 20px; border-radius: 11px; text-decoration: none;
  border: 1px solid transparent; transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn-tf {
  background: linear-gradient(140deg, var(--amber), var(--amber-d));
  color: #1a1204; box-shadow: 0 2px 10px -3px var(--amber);
}
.btn-tf:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px var(--amber); color: #1a1204; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); color: #fff; transform: translateY(-1px); }
.btn-lg { padding: 15px 26px; font-size: 1rem; border-radius: 13px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.center .btn-row { justify-content: center; }

/* ---------- hero ------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden; padding: 70px 0 0;
  background:
    radial-gradient(1100px 460px at 15% -10%, color-mix(in srgb, var(--amber) 20%, transparent), transparent 70%),
    radial-gradient(900px 420px at 88% 4%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 70%);
}
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.05; margin: 0 0 18px; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--amber-d), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { font-size: 1.18rem; }
.hero-note { font-size: .87rem; color: var(--muted); margin-top: 16px; }
.hero-note b { color: var(--text); font-weight: 650; }

.strip {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
  margin-top: 28px; font-size: .84rem; color: var(--muted);
}
.strip span { display: inline-flex; align-items: center; gap: 7px; }
.strip svg { color: var(--amber-d); flex: 0 0 auto; }

/* ---------- panels / cards -------------------------------------------- */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}
.panel-lg { padding: 34px; border-radius: 24px; }
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.feat-ico {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber-soft); color: var(--amber-d);
}
.panel h3 { font-size: 1.04rem; margin: 0 0 8px; }
.panel p { color: var(--muted); font-size: .95rem; margin: 0; }

.step-n {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  background: var(--ink); color: #fff; font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}

/* ---------- the live demo -------------------------------------------- */

.demo-shell {
  border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.demo-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.demo-dots { display: flex; gap: 6px; margin-right: 6px; }
.demo-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.demo-url {
  flex: 1; min-width: 140px; font-size: .78rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 11px; font-family: ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-controls {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button {
  font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 13px;
  border: 0; background: none; color: var(--muted); border-radius: 7px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.demo-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
.demo-body { padding: 26px; background: var(--surface); min-height: 240px; }
.demo-foot {
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: .8rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.badge-soft {
  display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 650;
  background: var(--amber-soft); color: var(--amber-d); padding: 4px 10px; border-radius: 999px;
}

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem;
  background: var(--ink); color: #e6edf3; border-radius: var(--radius-sm);
  padding: 14px 16px; overflow-x: auto; white-space: pre; margin: 0;
  border: 1px solid var(--ink-3);
}
.code .tok { color: var(--amber); }
.copy-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

/* ---------- comparison table ----------------------------------------- */

.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .93rem; }
.cmp th, .cmp td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp th:first-child, .cmp td:first-child { text-align: left; font-weight: 600; }
.cmp thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.cmp tbody tr.us { background: var(--amber-soft); }
.cmp tbody tr.us td { color: var(--text); font-weight: 650; }
.table-scroll { overflow-x: auto; }

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

.tf-foot { background: var(--ink); color: #c8cfdd; margin-top: 60px; padding: 56px 0 26px; }
.tf-foot a { color: #c8cfdd; text-decoration: none; font-size: .9rem; }
.tf-foot a:hover { color: #fff; text-decoration: underline; }
.tf-foot h4 { color: #fff; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.tf-foot ul { list-style: none; margin: 0; padding: 0; }
.tf-foot li { margin-bottom: 9px; }
.tf-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 820px) { .tf-foot-grid { grid-template-columns: 1fr 1fr; } }
.tf-foot-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid #212a44;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .82rem; color: #8b95ab;
}
.tf-foot .tf-logo { color: #fff; }
.tf-foot .lede { color: #8b95ab; font-size: .9rem; }

/* ---------- misc ------------------------------------------------------ */

.cta-band {
  background: linear-gradient(140deg, var(--ink), var(--ink-3));
  color: #fff; border-radius: 26px; padding: 52px 34px; text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem,3.4vw,2.1rem); margin: 0 0 12px; }
.cta-band p { color: #b9c1d2; margin: 0 auto 24px; max-width: 520px; }

.note-inline {
  font-size: .82rem; color: var(--muted); background: var(--surface-2);
  border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 11px 14px;
}

/* Bootstrap softening so the dashboard doesn't clash with the above */
.card { border-radius: var(--radius-sm); border-color: var(--line); background: var(--surface); }
.btn-primary { background: var(--ink); border-color: var(--ink); font-weight: 600; }
.btn-primary:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn-outline-primary { border-color: var(--line); color: var(--text); }
.btn-outline-primary:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.btn-outline-secondary { border-color: var(--line); color: var(--text); }
.form-control, .form-select { border-color: var(--line); background: var(--surface); color: var(--text); }
.form-control:focus, .form-select:focus {
  border-color: var(--amber); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--amber) 25%, transparent);
}
.accordion-button { background: var(--surface); color: var(--text); }
.accordion-button:not(.collapsed) { background: var(--amber-soft); color: var(--amber-d); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--amber) 25%, transparent); }
.accordion-item, .accordion-body { background: var(--surface); color: var(--text); border-color: var(--line); }
.table { color: var(--text); }
.bg-light { background: var(--surface-2) !important; }
.text-muted { color: var(--muted) !important; }
.pricing-card { border-radius: var(--radius-sm); transition: transform .2s; }
.pricing-card:hover { transform: translateY(-2px); }
.pricing-card.featured { border: 2px solid var(--amber); }
#card-element { border: 1px solid var(--line); padding: .75rem; border-radius: var(--radius-sm); }
.spinner-border-sm { width: 1rem; height: 1rem; }
.hidden { display: none !important; }
.alert ul { margin: 0; padding-left: 1rem; }