/* ========== Design Tokens ========== */
:root{
  --c-header:#1f3e4d;   /* header/background */
  --c-font:#5f6b76;     /* body font color */
  --c-trim:#d4af67;     /* gold trim */
  --c-blue:#516c89;     /* secondary blue */
  --c-white:#ffffff;
  --c-bg:#f7f9fb;       /* light background */
  --c-ink:#223a48;
  --c-muted:#8b97a2;

  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --max:1100px;
}

/* ========== Base ========== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--c-font);
  background:var(--c-bg);
  line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ========== Header ========== */
.site-header{
  background:var(--c-header);
  color:var(--c-white);
  border-bottom:4px solid var(--c-trim);
  position:sticky; top:0; z-index:10;
}
.site-header .header-inner{
  max-width:none;
  width:100%;
  margin:0;
  padding:10px 16px 12px;
  display:flex; align-items:center; justify-content:space-between;
  color:#fff;
}
.site-header .header-inner .title *,
.site-header .header-inner a{ color:#fff; }
.site-header .header-inner a:hover{ opacity:.9; text-decoration:none; }

/* brand cluster (left) */
.brand{ display:flex; align-items:center; gap:14px; }
.brand img[src*="TC_logo_bluebk_wt_med.png"]{ height:48px; width:auto; }
.brand .sep{ width:2px; height:36px; background:#2a5064; }
.brand .title{ display:flex; flex-direction:column; }
.brand .title strong{ color:#fff; }
.brand .title small{ opacity:.9; letter-spacing:.04em; color:#fff; }

/* FastAssessor logo (right) */
.logo-card{ display:flex; align-items:center; }
.logo-card img{ max-width:240px; height:auto; }
  .logo-card{ background:rgba(255,255,255,.06); padding:10px 14px; border:1px solid rgba(255,255,255,.2); border-radius:12px; }

/* ========== Nav (under header) ========== */
.nav-inline{
  display:flex; align-items:center; gap:.75rem;
  padding:0 1px 1px; margin:0;
}
.nav-inline .navlink{
  text-decoration:none;
  font:inherit;
  font-weight:600;
  color:#f0f0f0;
  padding:2px 2px;
  border-radius:4px;
}
.nav-inline .navlink:hover{ background:rgba(255,255,255,.1); }
.nav-inline .nav-sep{
  width:2px; height:16px; align-self:center; flex:0 0 auto;
  background:
    linear-gradient(to right,#406171 0 1px,transparent 1px 1px,#a4d7ef 1px 2px,transparent 2px 2px);
  opacity:.9;
}

/* ========== Hero ========== */
.hero{
  background:linear-gradient(180deg, rgba(31,62,77,.98), rgba(31,62,77,.75));
  color:#fff;
  border-bottom:3px solid var(--c-trim);
}
.hero-inner{
  max-width:var(--max); margin:auto; padding:1px 8px 6px 2px;
  display:grid; grid-template-columns:2.2fr .8fr; gap:20px; align-items:center;
}
.hero h1{ margin:0 0 10px; font-size:clamp(28px, 4.2vw, 44px); }
.hero p{ margin:0; opacity:.95; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px 16px; }
.pill{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; }

/* ========== Layout / Components ========== */
.section{ max-width:var(--max); margin:28px auto; padding:0 20px; }
.accent-bar{ height:6px; width:100%; background:var(--c-trim); border-radius:6px; margin:6px 0 14px; }

.card{
  background:var(--c-white);
  border:1px solid #e6ecf1;
  border-top:4px solid var(--c-blue);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
.card h3{ margin:0 0 8px; color:#2e4a5a; font-size:1.15rem; }
.card--image img{ display:block; margin:0 auto; }
.card--bullets ul{ margin:0; padding-left:20px; }
.kpi{ display:flex; gap:14px; align-items:center; background:#fff; border:1px dashed var(--c-trim); padding:14px; border-radius:12px; }
.kpi strong{ font-size:1.1rem; color:var(--c-ink); }

/* Grids */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* Column “pairs”: each column is (article over aside) */
.grid-2panels{
  display:grid; grid-auto-rows:auto; align-items:start; gap:18px; grid-template-columns:1fr 1fr;
}
.grid-2panels > article:nth-of-type(1){ grid-column:1; grid-row:1; }
.grid-2panels > aside:nth-of-type(1)  { grid-column:1; grid-row:2; }
.grid-2panels > article:nth-of-type(2){ grid-column:2; grid-row:1; }
.grid-2panels > aside:nth-of-type(2)  { grid-column:2; grid-row:2; }

.grid-3panels{
  display:grid; grid-auto-rows:auto; align-items:start; gap:18px; grid-template-columns:1fr 1fr 1fr;
}
.grid-3panels > article:nth-of-type(1){ grid-column:1; grid-row:1; }
.grid-3panels > aside:nth-of-type(1)  { grid-column:1; grid-row:2; }
.grid-3panels > article:nth-of-type(2){ grid-column:2; grid-row:1; }
.grid-3panels > aside:nth-of-type(2)  { grid-column:2; grid-row:2; }
.grid-3panels > article:nth-of-type(3){ grid-column:3; grid-row:1; }
.grid-3panels > aside:nth-of-type(3)  { grid-column:3; grid-row:2; }

/* Make aside visually same width as article within the grid track */
.grid-2panels > *, .grid-3panels > *{ justify-self:stretch; width:100%; }
.grid-2panels .card, .grid-3panels .card{ box-sizing:border-box; }
.card--image img{ width:100%; height:auto; }

/* Two-column lead block (Why… + At-a-glance) */
.lead{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
@media (max-width: 900px){ .lead{ grid-template-columns:1fr; } }

/* ========== Comparison Table ========== */
.table-wrap{ margin-top:18px; }
table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid #e5e8eb; border-radius:var(--radius); overflow:hidden; }
thead th{ background:#f5f7fa; color:#2b3a42; font-weight:600; font-size:13px; padding:10px; border-bottom:1px solid #e5e8eb; text-align:left; }
tbody td{ padding:9px 10px; border-bottom:1px solid #edf0f3; vertical-align:top; }
tbody tr:nth-child(even){ background:#fafbfc; }
.brandcell{ font-weight:600; color:var(--c-ink); }
.note{ color:var(--c-muted); font-size:12px; }
.ok{ color:#1aa36f; font-weight:700; }
.warn{ color:#c47b1a; font-weight:700; }
.no{ color:#c43d3d; font-weight:700; }

/* ========== CTA ========== */
.cta{ display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:14px; }
.cta .info{ font-size:13px; color:var(--c-muted); padding: 0px 0px 0px 4px;}
.btn{ display:inline-block; background:var(--c-trim); color:#0c1116; border-radius:10px; padding:10px 14px; font-weight:800; border:2px solid #b9964f; text-decoration:none; white-space: nowrap;}

/* ========== Footer (full width) ========== */
footer{ margin-top:40px; background:#122632; color:#fff; border-top:4px solid var(--c-trim); width:100%; }
.footer-inner{
  max-width:none; width:100%; padding:14px 16px; margin:0;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
}
.tagline{ opacity:.9; }

/* ========== Utilities ========== */
.muted{ opacity:.85; }
.logo-card-no img{ max-width:120px; height:auto; }

.inline-logo{
  display: inline-block !important;
  width: 120px;            /* or whatever you need */
  height: auto;
  vertical-align: middle;  /* align nicely with text */
  margin: 0 .25em;         /* small breathing room */
}

/* Tighter mini-separator: remove vertical whitespace */
.brand .sepsm{
  display: inline-block;
  height: 14px;          /* keep the small bar */
  width: 2px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 0;        /* kill any line-height gap */
  vertical-align: middle;
  align-self: center;    /* if inside a flex row */
}

/* (Optional) slightly tighter spacing in the brand row */
.brand{ gap: 10px; }      /* was 14px */

/* extra space around cards (works in all grids + standalone) */
.grid-2 .card,
.grid-3 .card,
.grid-2panels .card,
.grid-3panels .card,
.lead .card,
.section > .card{
  margin: 10px 8px;              /* vertical / horizontal */
}

/* table wrapper + table breathing room */
.table-wrap{
  margin: 14px 8px 0;            /* a bit above/beside the table */
}
.table-wrap table{
  margin: 0;                     /* keep the table snug inside wrapper */
}

/* (optional) slightly larger grid gap so cards don't touch */
.grid-2,
.grid-3,
.grid-2panels,
.grid-3panels{
  gap: 22px;
}

/* Make the icon (h3) and the title (h2) sit on one line */
.section > h3,
.section > h2{
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  margin: 0 !important;
}

/* small gap between icon and text */
.section > h3{ margin-right: .5rem !important; }

/* keep the icon neatly aligned */
.section > h3 i{ display:inline-block; line-height:1; }

.logo-card-no img{
  display:inline-block;
  width:120px; height:auto;
  vertical-align:-0.07em;   /* nudge down slightly */
  margin:0 .25em;
}

/* ===== Landing intro ===== */
.intro{
  background: linear-gradient(180deg, rgba(31,62,77,.96), rgba(31,62,77,.80));
  color: #fff;
  border-bottom: 3px solid var(--c-trim);
}
.intro-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 20px;
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 900px){
  .intro-inner{ grid-template-columns: 1fr; }
}

.intro h1{
  margin: 0 0 6px;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.15;
}
.intro .lede{
  margin: 0 0 14px;
  opacity: .95;
  font-size: 1.05rem;
}
.intro .highlights{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.intro .highlights li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 13px;
}

.intro .cta-row{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: nowrap;
}
.btn-ghost{
  display: inline-block;
  border: 2px solid var(--c-trim);
  color: #fff;
  background: transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.btn-ghost:hover{ background: rgba(255,255,255,.08); }

.intro .side-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  padding: 16px;
}
.intro .side-card h3{
  color: #fff;
  margin: 0 0 8px;
  font-size: 1rem;
}
.intro .trust{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  opacity: .9;
  font-size: 12px;
}
.intro .trust .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-trim);
}

/* Heading row with a right-aligned badge */
.card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px;
  flex-wrap:nowrap;
}
.card-heading h3{
  margin:0;
  flex:1 1 auto;
}

/* FastAssessor logo badge (small “bubble”) */
.fa-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:12px;
  white-space:nowrap;
  flex:0 0 auto;
}

/* Default badge theme when used on dark surfaces (e.g., intro side-card) */
.intro .fa-badge{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
}

/* Badge theme when used inside light cards */
.card .fa-badge{
  background:#d9f1fd;
  border:1px solid #b1c5ce;
}

/* Smaller logo inside the bubble (tweak height to taste) */
.fa-badge img{
  height:24px;            /* smaller than your header logo */
  width:auto;
  display:block;          /* fine inside inline-flex */
}

/* ---- anchor offset for sticky header ---- */
:root{ --header-offset: 65px; }            /* default; JS below will auto-tune */

html{ scroll-padding-top: var(--header-offset); }   /* applies to all #hash jumps */

/* extra safety: ensure any in-page anchor shows fully */
[id]{ scroll-margin-top: var(--header-offset); }