/* File: seo-bootstrap.css  (MATCHES YOUR FOOTER THEME) */

/* ===== Brand Tokens (from your footer) ===== */
:root{
  --ts-charcoal: #2E2E2E;
  --ts-red: #eb1e23;
  --ts-gold: #E4B849;

  --page-bg: #ffffff;
  --page-soft: #f3f3f3;
  --page-border: rgba(0,0,0,.10);

  --text: #111;
  --muted: rgba(0,0,0,.65);

  --dark-text: rgba(255,255,255,.92);
  --dark-muted: rgba(255,255,255,.72);
  --dark-border: rgba(255,255,255,.16);

  --radius: 22px;
  --shadow: 0 18px 50px rgba(0,0,0,.18);
}

.hero-image {
  background-image: url("../pics/marketing.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 70px;
  width: 100%;
  height: calc(100dvw / 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Page background (LIGHT like your table page) ===== */
body.seo-page{
  background: var(--page-bg);
  color: var(--text);
}

/* Headings */
.h1-like{
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .2px;
}

/* Muted text */
.text-muted-strong{ color: var(--muted) !important; }

.eyebrow{
  color: rgba(0,0,0,.55);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}

/* ===== Light section tint (optional separators like your layout) ===== */
.section-tint{
  background: var(--page-soft);
  border-top: 1px solid var(--page-border);
  border-bottom: 1px solid var(--page-border);
}

/* ===== Pills (light) ===== */
.pill{
  width: fit-content;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.82);
  border-radius: 999px;
  padding: 10px 14px;
}

/* ===== Dark cards (ties into footer charcoal) ===== */
.ts-card{
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(228,184,73,.18), transparent 62%),
    linear-gradient(180deg, #3a3a3a 0%, var(--ts-charcoal) 100%);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--dark-text);
}

/* inside dark cards, make "muted" text readable */
.ts-card .text-muted-strong{ color: var(--dark-muted) !important; }

.ts-card--accent{
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(228,184,73,.24), transparent 62%),
    radial-gradient(900px 420px at 82% 18%, rgba(235,30,35,.14), transparent 64%),
    linear-gradient(180deg, #3a3a3a 0%, var(--ts-charcoal) 100%);
}

/* featured plan: gold border */
.ts-card--featured{
  border-color: rgba(228,184,73,.55);
  box-shadow: 0 16px 55px rgba(228,184,73,.12), 0 18px 55px rgba(0,0,0,.22);
}

/* Lists inside dark cards */
.checklist, .bullets{
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.84);
  font-size: x-large;
}
.checklist li::marker{ color: var(--ts-gold); }
.bullets li::marker{ color: rgba(255,255,255,.40); }

/* ===== Buttons (match your footer hover vibe) ===== */
.btn-ts-primary{
  background: linear-gradient(90deg, rgba(228,184,73,1), rgba(228,184,73,.82));
  border: 1px solid rgba(228,184,73,.75);
  color: rgba(0,0,0,.88);
  font-weight: 800;
  border-radius: 14px;
  padding: 12px 14px;
}
.btn-ts-primary:hover{
  background: linear-gradient(90deg, rgba(228,184,73,1), rgba(228,184,73,.90));
  color: rgba(0,0,0,.92);
}

/* outline button on LIGHT sections */
.btn-outline-ts{
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  color: rgba(0,0,0,.82);
  font-weight: 800;
  border-radius: 14px;
  padding: 12px 14px;
}
.btn-outline-ts:hover{
  background: rgba(0,0,0,.04);
}

/* outline button when inside dark CTA/cards */
.ts-card .btn-outline-ts,
.cta-box .btn-outline-ts{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
}
.ts-card .btn-outline-ts:hover,
.cta-box .btn-outline-ts:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.26);
  color: rgba(255,255,255,.98);
}

/* ===== Chips (match table-page light feel) ===== */
.chip{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(0,0,0,.82);
}

/* ===== Badge ===== */
.badge-ts{
  display: inline-block;
  font-size: .75rem;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(228,184,73,.65);
  background: rgba(228,184,73,.14);
  color: rgba(255,255,255,.92);
  width: fit-content;
}

/* ===== Hero visual pieces ===== */
.hero-visual{ min-height: 320px; }

.visual-bar{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(228,184,73,.92), rgba(235,30,35,.60));
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ts-red);
}
.dot--dim{ background: rgba(255,255,255,.18); }

.kpi{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  padding: 14px;
}
.kpi__label{
  font-size: .86rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 6px;
}
.kpi__value{
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .5px;
  margin: 0;
}

/* subtle glow behind hero visual */
.glow{
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(closest-side, rgba(228,184,73,.20), transparent 62%),
    radial-gradient(closest-side, rgba(235,30,35,.12), transparent 66%);
  filter: blur(18px);
  z-index: -1;
}

/* ===== CTA (dark like footer, inside light page) ===== */
.cta-box{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(228,184,73,.28);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(228,184,73,.18), transparent 62%),
    linear-gradient(90deg, #3a3a3a 0%, var(--ts-charcoal) 100%);
  box-shadow: var(--shadow);
  color: var(--dark-text);
}
.cta-box .text-muted-strong{ color: var(--dark-muted) !important; }

/* fineprint like your footer copyright */
.fineprint{
  color: rgba(0,0,0,.55);
  font-size: .92rem;
}

/* spacing tweak for py-lg-6 */
@media (min-width: 992px){
  .py-lg-6{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

.btn {
  font-size: x-large;
}

.ts-card p{
  font-size: large;
}

.approach {
  background: linear-gradient(
    180deg,
    #f8f8f8 0%,
    #eeeeee 40%,
    #f8f8f8 100%
  );
  padding: 80px 0;
}

@media (max-width: 767px) {
  .btn-last {
    width: 100%;
  }
}