/* ==========================================================================
   SEO Metrics API — brand layer on top of the Floaks template
   Palette: emerald #0b7d63 (primary, swapped into style.css), amber #f2a91c
   (measurement accent), ink #022334, muted #787a7d, mist #f8fbff.
   ========================================================================== */

:root {
  --smx-primary: #0b7d63;
  --smx-primary-dark: #09614d;
  --smx-primary-soft: rgba(11, 125, 99, 0.08);
  --smx-amber: #f2a91c;
  --smx-ink: #022334;
  --smx-muted: #787a7d;
  --smx-mist: #f8fbff;
  --smx-line: #e5eef2;
}

/* --- text logo ---------------------------------------------------------- */

.brand-logo {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--smx-ink) !important;
  text-transform: none !important;
}

.brand-logo .brand-mark {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  vertical-align: -6px;
}

.brand-logo .brand-accent {
  color: var(--smx-primary);
}

/* --- heroes: gradients instead of the template's blue artwork ----------- */

.bg-home {
  background-image: linear-gradient(160deg, #eefaf5 0%, var(--smx-mist) 45%, #fdf6e7 100%);
  height: auto;
  min-height: 92vh;
  padding: 150px 0 90px;
}

.page-hero {
  background-image: linear-gradient(160deg, #eefaf5 0%, var(--smx-mist) 55%, #fdf6e7 100%);
  padding: 150px 0 70px;
}

.page-hero .hero-kicker {
  font-weight: 600;
  color: var(--smx-primary);
  margin-bottom: 12px;
}

/* Bootstrap 5.3 buttons ignore the template's palette without this. */
.btn-primary {
  --bs-btn-bg: var(--smx-primary);
  --bs-btn-border-color: var(--smx-primary);
  --bs-btn-hover-bg: var(--smx-primary-dark);
  --bs-btn-hover-border-color: var(--smx-primary-dark);
  --bs-btn-active-bg: var(--smx-primary-dark);
  --bs-btn-active-border-color: var(--smx-primary-dark);
  --bs-btn-disabled-bg: var(--smx-primary);
  --bs-btn-disabled-border-color: var(--smx-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--smx-primary);
  --bs-btn-border-color: var(--smx-primary);
  --bs-btn-hover-bg: var(--smx-primary);
  --bs-btn-hover-border-color: var(--smx-primary);
  --bs-btn-active-bg: var(--smx-primary);
  --bs-btn-active-border-color: var(--smx-primary);
}

a {
  color: var(--smx-primary);
}

a:hover {
  color: var(--smx-primary-dark);
}

/* --- feature cards -------------------------------------------------------
   Equal height whatever the copy length, with the CTA pinned to the bottom so
   the three links sit on one line. The icons are inline SVG rather than the
   template's 2018 icon font, which silently renders nothing for a glyph it
   does not have. */

.feature-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--smx-line);
  border-radius: 12px;
}

/* Pinned to the bottom so the three CTAs sit on one line regardless of how
   long each card's paragraph runs. Note: a Bootstrap `mt-*` class on this
   element would override the auto margin (they carry !important), so the
   spacing is set here instead. */
.feature-card .feature-cta {
  margin-top: auto;
  padding-top: 16px;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--smx-primary-soft);
  color: var(--smx-primary);
}

/* Font Awesome 6, self-hosted like everything else here. An icon FONT that
   fails to load renders nothing rather than ballooning, so the 300px fallback
   an unsized inline SVG has cannot happen — but the size is still stated
   explicitly rather than inherited. */
.feature-icon i {
  font-size: 26px;
  line-height: 1;
}

/* --- the checker card (hero form, tool page) ---------------------------- */

.checker-card {
  background: #ffffff;
  border: 1px solid var(--smx-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(2, 35, 52, 0.08);
  padding: 28px;
}

.checker-card .form-control {
  height: 48px;
  font-size: 15px;
}

.checker-note {
  font-size: 13px;
  color: var(--smx-muted);
}

.captcha-slot {
  min-height: 18px;
  margin: 14px 0 4px;
}

.captcha-slot iframe {
  max-width: 100%;
}

/* --- the result "passport" — the page's signature element --------------- */

.result-passport {
  background: #ffffff;
  border: 1px solid var(--smx-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(2, 35, 52, 0.1);
  overflow: hidden;
}

.passport-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--smx-line);
  background: linear-gradient(120deg, var(--smx-primary-soft), rgba(242, 169, 28, 0.07));
}

.passport-head img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain;
}

.passport-head .passport-domain {
  font-size: 20px;
  font-weight: 600;
  color: var(--smx-ink);
  margin: 0;
  word-break: break-all;
}

.passport-head .passport-site {
  font-size: 13px;
  color: var(--smx-muted);
  margin: 2px 0 0;
}

.passport-body {
  padding: 26px;
}

/* DR ring */
.dr-ring {
  width: 130px;
  height: 130px;
  position: relative;
  margin: 0 auto;
}

.dr-ring svg {
  transform: rotate(-90deg);
}

.dr-ring .dr-track {
  fill: none;
  stroke: var(--smx-line);
  stroke-width: 10;
}

.dr-ring .dr-arc {
  fill: none;
  stroke: var(--smx-amber);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s ease;
}

.dr-ring .dr-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 34px;
  color: var(--smx-ink);
  line-height: 1;
}

.dr-ring .dr-value small {
  font-size: 11px;
  font-weight: 500;
  color: var(--smx-muted);
  margin-top: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Two providers, one call — the traffic duel */
.traffic-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--smx-line);
  border: 1px solid var(--smx-line);
  border-radius: 10px;
  overflow: hidden;
}

.traffic-duel .duel-cell {
  background: #ffffff;
  padding: 18px 20px;
}

.duel-cell .duel-label {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--smx-muted);
  margin-bottom: 6px;
}

.duel-cell .duel-number {
  font-size: 28px;
  font-weight: 600;
  color: var(--smx-ink);
  line-height: 1.1;
}

.duel-cell .duel-source {
  font-size: 12px;
  color: var(--smx-muted);
  margin-top: 6px;
}

/* metric tiles + country bars */
.metric-tile {
  border: 1px solid var(--smx-line);
  border-radius: 10px;
  padding: 14px 16px;
  height: 100%;
}

.metric-tile .tile-label {
  font-size: 12px;
  color: var(--smx-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.metric-tile .tile-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--smx-ink);
}

.country-bar {
  margin-bottom: 10px;
}

.country-bar .bar-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--smx-ink);
}

.country-bar .progress {
  height: 7px;
  background: var(--smx-line);
}

.country-bar .progress-bar {
  background: var(--smx-primary);
}

.passport-foot {
  border-top: 1px solid var(--smx-line);
  padding: 14px 26px;
  font-size: 12px;
  color: var(--smx-muted);
  background: var(--smx-mist);
}

.status-note {
  color: var(--smx-muted);
  font-size: 13px;
  font-style: italic;
}

/* API key reveal (signup) */
.key-reveal {
  background: var(--smx-ink);
  color: #d5f5ec;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  word-break: break-all;
}

/* --- pricing ------------------------------------------------------------ */

.pricing-box {
  padding: 30px;
}

.price-compare {
  font-size: 13px;
  color: var(--smx-muted);
}

.price-compare s {
  color: #b3bcc1;
}

.plan-quota {
  font-size: 15px;
  color: var(--smx-ink);
  font-weight: 500;
}

.pricing-tab-border {
  border: 1px solid var(--smx-line);
  background: #ffffff;
}

.nav-pills .nav-link.active {
  background-color: var(--smx-primary);
}

/* --- long-form article pages ------------------------------------------- */

.article-body {
  font-size: 16.5px;
  line-height: 1.85;
  color: #33474f;
}

.article-body h2 {
  font-size: 26px;
  margin: 44px 0 16px;
  color: var(--smx-ink);
}

.article-body h3 {
  font-size: 20px;
  margin: 32px 0 12px;
  color: var(--smx-ink);
}

.article-body p,
.article-body li {
  margin-bottom: 14px;
}

.article-body table {
  width: 100%;
  margin: 22px 0;
  font-size: 14.5px;
  border-collapse: collapse;
}

.article-body th,
.article-body td {
  border: 1px solid var(--smx-line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.article-body th {
  background: var(--smx-mist);
  color: var(--smx-ink);
}

.article-body blockquote {
  border-left: 3px solid var(--smx-amber);
  margin: 22px 0;
  padding: 6px 0 6px 18px;
  color: var(--smx-muted);
}

.article-meta {
  font-size: 13px;
  color: var(--smx-muted);
}

.blog-cover {
  border-radius: 10px;
  border: 1px solid var(--smx-line);
  width: 100%;
}

/* --- checklist/comparison helpers for landing pages --------------------- */

.check-list {
  list-style: none;
  padding-left: 0;
}

.check-list li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 10px;
}

.check-list li .mdi {
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--smx-primary);
  font-size: 18px;
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  border: 1px solid var(--smx-line);
  font-size: 14.5px;
  vertical-align: top;
}

.compare-table thead th {
  background: var(--smx-mist);
}

.code-sample {
  background: var(--smx-ink);
  color: #d5f5ec;
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 13.5px;
  overflow-x: auto;
}

.code-sample code {
  color: inherit;
  white-space: pre;
}

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

.footer-disclaimer {
  font-size: 12px;
  color: var(--smx-muted);
  max-width: 860px;
  margin: 0 auto;
}

/* --- niceties ----------------------------------------------------------- */

.sticky.nav-sticky {
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(2, 35, 52, 0.06);
  padding: 12px 0;
}

/* Keyboard focus, loudly. The template sets button colours with `!important`
   and no focus style at all, so a keyboard user tabbing from the domain field
   to "Check metrics" saw nothing change — the control they were about to
   activate was invisible. These have to out-specify the template. */
:focus-visible,
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--smx-ink) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(11, 125, 99, 0.25) !important;
}

/* Hover feedback the template's `!important` background was swallowing. */
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--smx-primary-dark) !important;
  border-color: var(--smx-primary-dark) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--smx-primary) !important;
  border-color: var(--smx-primary) !important;
  color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  .dr-ring .dr-arc,
  .navbar-custom {
    transition: none;
  }
}

@media (max-width: 767px) {
  .bg-home {
    padding-top: 120px;
  }

  .page-hero {
    padding-top: 120px;
  }

  .traffic-duel {
    grid-template-columns: 1fr;
  }

  .passport-head,
  .passport-body {
    padding: 18px;
  }
}