/* --- Typography & Base --------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");

:root{
  /* Site (light) */
  --page-bg: #ffffff;
  --text: #0f1220;
  --subtle: #6c7280;
  --hairline: #e9ecf2;

  /* Card surfaces */
  --card: #ffffff;
  --card-border: #e6e9f1;
  --card-shadow: 0 10px 30px rgba(16,24,40,.06);

  /* Accent */
  --accent: #5e57da; /* brand purple */

  /* States */
  --ok-bg: #e8fbf1;
  --ok-bd: #b9efd0;
  --bad-bg: #ffecec;
  --bad-bd: #ffd0d0;

  /* Misc */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.tb-light{
  margin:0;
  background: var(--page-bg);
  color: var(--text);
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Top bars & Header --------------------------------------------------- */
.brand-topbar{ height: 4px; background: var(--accent); }
.site-header{ background:#ffffff; border-bottom: 1px solid var(--hairline); }
.wrap{ max-width:1200px; margin:0 auto; padding: 0 var(--space-8); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.tb-logo{ height: 34px; width:auto; }

/* Book A Demo (compact, like screenshot) — purple fill + white border/text; reverse on hover */
.tb-demo-link{
  display:inline-block; font-weight:700; font-size:14px; line-height:1.2; text-decoration:none;
  padding: 8px 14px; border-radius: 6px;
  border: 2px solid #ffffff; background: var(--accent); color:#ffffff; transition: all .18s ease;
}
.tb-demo-link:hover{ background:#ffffff; color:var(--accent); border-color: var(--accent); }

/* --- Page body ----------------------------------------------------------- */
.page-body{ padding: var(--space-10) 0 var(--space-12); }

/* Outer card section */
.card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: var(--space-10);
}
.grid{ display:grid; gap: var(--space-10); grid-template-columns: 1fr; }
@media (min-width: 980px){ .grid{ grid-template-columns: 1.05fr .95fr; align-items: start; } }

/* Headline + subhead tuned for light page */
.headline{
  margin: 0 0 var(--space-3);
  font-weight: 900; line-height: 1.05; letter-spacing: -.015em;
  font-size: clamp(28px, 4.4vw, 42px);
  color: #0a0f1e;
}
.subhead{ margin: 0 0 var(--space-8); color: var(--subtle); font-size: clamp(15px, 2.2vw, 18px); }

/* Inner panel (forms) */
.panel{ background:#ffffff; border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-8); }
.h3{ margin:0 0 var(--space-4); font-size: 18px; font-weight: 800; }
.form-row{ display:grid; gap: 8px; margin: var(--space-5) 0; }
label{ font-weight: 700; color: #0a0f1e; }
.required-red .req{ color: #e11d48; font-weight: 800; margin-left: 6px; }

/* Fully-oval inputs with very light border (white background) */
input[type="text"]{
  width:100%; padding: 14px 18px; font-size: 16px;
  border: 1px solid #eceff5; border-radius: 999px; background:#ffffff; color:#0f1220;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]::placeholder{ color:#9aa3b2; }
input[type="text"]:focus{ border-color:#d7dcf0; box-shadow: 0 0 0 3px rgba(94,87,218,.18); }

.checkbox{ display:flex; align-items:flex-start; gap:10px; margin-top: 6px; }
.checkbox input{ margin-top: 3px; }
.hint{ color:#7b8396; font-size:12px; }
.error{ color:#e11d48; font-size:13px; margin-top: 6px; display:none; }

/* --- Buttons (shared + hero) -------------------------------------------- */
.btn, .btn-hero{
  background: var(--accent); color:#ffffff; font-weight: 800;
  border: 2px solid #ffffff; border-radius: 999px; padding: 14px 18px;
  cursor: pointer; transition: all .18s ease; text-align:center;
}
.btn:hover, .btn-hero:hover{ background:#ffffff; color:var(--accent); border-color: var(--accent); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-hero{ width:100%; font-size: 18px; padding: 16px 20px; margin-top: var(--space-6); }

/* --- Result area --------------------------------------------------------- */
.result-card{ display:none; padding: var(--space-9); }
.result-card.show{ display:block; }
.card-inset{ background:#fafbff; border:1px solid var(--hairline); }

.compare{ display:grid; gap: var(--space-6); margin-bottom: var(--space-8); }
.tile{ background:#ffffff; border:1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: 0 4px 16px rgba(16,24,40,.04); }
.tile.good{ background: #ffffff; }
.tile.bad{ background: #ffffff; }
.tile-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: var(--space-3); }
.who{ font-weight: 800; letter-spacing:.1px; color:#111827; }
.price{ font-size: 28px; font-weight: 900; color:#111827; }

.mark{ display:inline-flex; align-items:center; justify-content:center; width:22px;height:22px;border-radius:50%;margin-right:8px;font-size:14px }
.ok{ background: var(--ok-bg); color:#037a3b; border:1px solid var(--ok-bd); }
.x { background: var(--bad-bg); color:#b42318; border:1px solid var(--bad-bd); }

.tile-meta{ margin:0; padding-left: 18px; color:#344054; }
.tile-meta li{ margin: 4px 0; }

/* Savings hero: very light gradient (#5e57da -> white), mostly white; black text */
.savings-hero{
  border-radius: 18px; padding: var(--space-9) var(--space-8) var(--space-8);
  background: #ffffff; border: 1px solid var(--hairline); text-align: center;
  box-shadow: 0 6px 20px rgba(16,24,40,.06);
}
.light-gradient{
  background: linear-gradient(180deg, rgba(94,87,218,0.12) 0%, rgba(255,255,255,0.98) 65%, #ffffff 100%);
}
.savings-hero .line1{ color:#111827; font-size: clamp(22px, 3.4vw, 34px); font-weight: 900; letter-spacing: -.01em; }
.savings-hero .line2{ color:#111827; font-size: clamp(18px, 2.6vw, 22px); font-weight: 800; margin-top: 8px; }
.savings-hero .line3{ color:#111827; font-size: clamp(16px, 2.2vw, 20px); font-weight: 800; margin-top: 6px; }

.note{ font-size:12px; color:#5b6475; margin-top: var(--space-6); }
.cap-note{ color:#334155; margin-left: 6px; }

/* Utilities */
.mt-14{ margin-top: var(--space-6); }
.nowrap{ white-space: nowrap; }

/* Small screens */
@media (max-width: 420px){
  .tb-demo-link{ padding: 8px 12px; }
  .price{ font-size: 26px; }
}