/* =========================================================
   ThinkTank Support — Design Tokens + Component Overrides
   Loaded AFTER Bootstrap.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
:root{
  --ink:        #01503a;
  --ink-soft:   #11172b;
  --ink-muted:  #363535;
  --bg:         #d8e4e1;
  --surface:    #F4F4F5;
  --border:     #E7E7E9;
  --white:      #FFFFFF;

  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-input:16px;

  --shadow-soft: 0 12px 40px rgba(0,0,0,.06);
  --shadow-input:0 8px 30px rgba(0,0,0,.10);

  --maxw: 1140px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Outfit', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ text-decoration:none; }

.container{ max-width:var(--maxw); }

/* ── Typography ─────────────────────────────────────── */
h1, .h1-hero{
  font-size:clamp(2.75rem, 6vw, 5rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--ink);
}

h2, .h2-statement{
  font-size:clamp(2rem, 4.5vw, 3.25rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--ink);
}

h3, .h3-section{
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.lead-sub{
  font-size:1.125rem;
  font-weight:500;
  line-height:1.5;
  color:var(--ink-soft);
}

p, body{
  font-size:1rem;
  font-weight:400;
  line-height:1.6;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--surface);
  border-radius:var(--radius-pill);
  padding:.35rem .8rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}

.text-ink{ color:var(--ink) !important; }
.text-ink-soft{ color:var(--ink-soft) !important; }
.text-ink-muted, .text-muted-ink{ color:var(--ink-muted) !important; }

/* ── Buttons (pills) ────────────────────────────────── */
.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill);
  font-weight:600;
  padding:.75rem 1.5rem;
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
  font-size:.95rem;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-dark{ background:var(--ink); color:var(--white); border:1px solid var(--ink); }
.btn-dark:hover{ opacity:.88; color:var(--white); transform:translateY(-1px); }
.btn-outline-ink{ background:var(--white); color:var(--ink); border:1px solid var(--border); }
.btn-outline-ink:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-1px); }

/* ── Navbar ─────────────────────────────────────────── */
.navbar{ border-bottom:1px solid var(--border); }
.navbar-brand{ color:var(--ink) !important; font-size:1.05rem; }
.nav-link{ color:var(--ink-soft) !important; font-weight:500; }
.nav-link.active, .nav-link:hover{ color:var(--ink) !important; }

/* ── Hero ───────────────────────────────────────────── */
.hero{ padding-top:clamp(4rem, 8vw, 7rem); padding-bottom:clamp(3rem, 6vw, 5rem); text-align:center; }
.rating-badge{ font-size:.85rem; color:var(--ink); }

/* ── Hero showcase / stat card ─────────────────────── */
.hero-card{
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  background:
    radial-gradient(120% 120% at 20% 30%, #F6C9E8 0%, transparent 55%),
    radial-gradient(120% 120% at 85% 70%, #B9E08A 0%, transparent 50%),
    linear-gradient(120deg, #EFA9D8 0%, #E86BB8 35%, #CDE3A8 100%);
  padding:clamp(1.5rem, 4vw, 3rem);
  position:relative;
  overflow:hidden;
}

.hero-card .chip-overlay{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(255,255,255,.25);
  color:#fff;
  border-radius:var(--radius-pill);
  padding:.35rem .8rem;
  font-size:.75rem;
  font-weight:600;
}

.hero-card .floating-card{
  background:var(--white);
  border-radius:var(--radius-input);
  box-shadow:var(--shadow-input);
  padding:1.25rem;
  max-width:640px;
  margin:2rem auto 1rem;
}

.hero-card .floating-card .divider{
  height:1px;
  background:var(--border);
  margin:.85rem 0;
}

.hero-card .send-btn{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
}

.hero-card .below-note{
  color:rgba(255,255,255,.85);
  font-size:.9rem;
  text-align:center;
}
.hero-card .below-note a{ color:#fff; text-decoration:underline; }

/* ── Eyebrow-labeled tiles / cards ─────────────────── */
.tile{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:1.75rem;
  height:100%;
}
.tile .tile-icon{ font-size:1.5rem; }

.card-plain{
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:2rem;
  height:100%;
  background:var(--white);
}

.service-card{
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:2.25rem;
  height:100%;
  background:var(--white);
  display:flex;
  flex-direction:column;
}

/* ── Logo cloud ─────────────────────────────────────── */
.logo-cloud img, .logo-cloud .logo-placeholder{
  filter:grayscale(1);
  opacity:.55;
  transition:opacity .2s ease;
}
.logo-cloud img:hover, .logo-cloud .logo-placeholder:hover{ opacity:1; }
.logo-placeholder{
  font-weight:700;
  color:var(--ink-soft);
  font-size:1.1rem;
}

/* ── Statement section ─────────────────────────────── */
.statement-block{
  max-width:30ch;
  margin:0 auto;
  text-align:center;
}

/* ── Testimonials ───────────────────────────────────── */
.testimonial{
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:2rem;
  background:var(--surface);
  height:100%;
}

/* ── Pricing table ──────────────────────────────────── */
.pricing-table{
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.pricing-table table{ margin-bottom:0; }
.pricing-table th{
  background:var(--surface);
  font-weight:600;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.pricing-table td, .pricing-table th{
  padding:1rem 1.25rem;
  border-color:var(--border);
  vertical-align:middle;
}
.price-highlight{
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius-card);
  padding:1.5rem 2rem;
  text-align:center;
}

/* ── FAQ ────────────────────────────────────────────── */
.accordion-button{ font-weight:600; color:var(--ink); }
.accordion-button:not(.collapsed){ color:var(--ink); background:var(--surface); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; border-color:var(--border); }
.accordion-item{ border-color:var(--border); border-radius:12px !important; margin-bottom:.75rem; overflow:hidden; }

/* ── Footer ─────────────────────────────────────────── */
footer{ background:var(--white); }
.footer-links li{ margin-bottom:.6rem; }
.footer-links a{ color:var(--ink-soft); }
.footer-links a:hover{ color:var(--ink); }
.social-icon{ display:inline-flex; opacity:.7; }
.social-icon:hover{ opacity:1; }

/* ── Location Switcher ─────────────────────────────── */
.location-switcher{ position:relative; display:inline-block; }

.switcher-trigger{
  display:flex;
  align-items:center;
  gap:6px;
  padding:.5rem .9rem;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:transparent;
  cursor:pointer;
  font-size:.85rem;
  font-family:inherit;
  color:var(--ink);
  white-space:nowrap;
}
.switcher-trigger:hover{ border-color:var(--ink); }

.switcher-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:260px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  z-index:200;
}

.panel-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  font-weight:600;
  font-size:.8125rem;
  color:var(--ink-soft);
  border-bottom:1px solid var(--border);
}

.panel-step ul{
  list-style:none;
  margin:0;
  padding:6px 0;
  max-height:280px;
  overflow-y:auto;
}

.location-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:9px 16px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:.875rem;
  font-family:inherit;
  text-align:left;
  color:var(--ink);
}
.location-option:hover{ background:var(--surface); }
.location-option[aria-selected="true"]{ font-weight:700; }
.chevron-right{ color:var(--ink-muted); font-size:.75rem; }

.back-btn{
  background:none;
  border:none;
  cursor:pointer;
  font-size:1rem;
  color:var(--ink-soft);
  padding:0 4px;
  line-height:1;
}

.use-detected{ padding:8px 16px; border-bottom:1px solid var(--border); }
.use-detected-btn{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 12px;
  font-size:.8125rem;
  cursor:pointer;
  width:100%;
  text-align:left;
}

@media (max-width:600px){
  .switcher-panel{
    position:fixed;
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    border-radius:16px 16px 0 0;
    max-height:70vh;
  }
  .panel-step ul{ max-height:50vh; }
}

/* ── Scroll fade-in ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .fade-in-up{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .fade-in-up.is-visible{
    opacity:1;
    transform:translateY(0);
  }
}

/* ── Utilities ──────────────────────────────────────── */
.section{ padding-top:clamp(3rem, 6vw, 5rem); padding-bottom:clamp(3rem, 6vw, 5rem); }
.max-60{ max-width:60ch; margin-left:auto; margin-right:auto; }