/* ==========================================================================
   pages.css — page-level styles for About / Contact / Privacy / Terms / Cookie
   Paste into css/pages.css
   ========================================================================== */



.page-container {
  max-width: 980px;
  margin: 1.75rem auto;
  padding: 0 16px;
}

.page-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11, 25, 40, 0.06);
  padding: 28px;
  border: 1px solid rgba(0,0,0,0.04);
}

.page-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-subtitle {
  color: #6c757d;
  margin-bottom: 18px;
  font-size: 0.98rem;
}

.doc-section {
  margin-top: 20px;
  margin-bottom: 18px;
}
.doc-section h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0d6efd;
}

.page-card p,
.page-card li {
  color: #333;
  line-height: 1.7;
  font-size: 0.98rem;
}

.page-card ul, .page-card ol {
  margin-left: 1.2rem;
  margin-bottom: 12px;
}

/* Contact form layout */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field textarea,
.contact-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d9dbe0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  font-size: 0.95rem;
  outline: none;
  transition: box-shadow .15s, border-color .15s;
}
.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {
  border-color: rgba(13,110,253,0.8);
  box-shadow: 0 6px 20px rgba(13,110,253,0.06);
}

.contact-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-primary-ghost {
  background: transparent;
  border: 1px solid #0d6efd;
  color: #0d6efd;
  padding: 9px 14px;
  border-radius: 8px;
  font-weight: 600;
}
.btn-primary-solid {
  background: linear-gradient(90deg,#0d6efd,#20c997);
  border: none;
  color: #fff;
  padding: 9px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.meta-line {
  color: #6c757d;
  font-size: 0.9rem;
  margin-top: 8px;
}

.note-card {
  background: #f8f9fa;
  border: 1px dashed #e9ecef;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.95rem;
}

.accordion {
  border-radius: 8px;
  overflow: hidden;
}
.accordion .acc-item + .acc-item { border-top: 1px solid #eef0f3; }
.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  background: rgba(13,110,253,0.04);
  font-weight: 700;
}
.acc-body {
  padding: 12px 14px;
  display: none;
  background: #fff;
  color: #444;
  line-height: 1.6;
}

.legal-note {
  margin-top: 18px;
  font-size: 0.88rem;
  color: #6c757d;
}

.form-alert {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
}
.form-alert.success { background: #e6ffef; color: #0b6f3a; border: 1px solid #c8f1d6; }
.form-alert.error { background: #fff3f3; color: #8b1e1e; border: 1px solid #f5c2c2; }

.page-card a { color: #0d6efd; text-decoration: underline; }

/* Mobile tweak: slightly smaller gaps */
@media (max-width: 480px) {
  .contact-grid { gap: 10px; }
}

/* ====== Layout tweaks: spacing between ad placeholders and tool sections ======
   Append to css/pages.css — overrides earlier card/placeholder defaults.
   ========================================================================== */

/* Ad placeholder styling & spacing (keeps a visible label until real ad code is added) */
.ad-placeholder {
  margin: 28px 0;                /* vertical breathing room */
  padding: 10px 14px;
  border-radius: 8px;
  background: transparent;       /* keep neutral — replace when inserting ad snippets */
  color: #1f6aa5;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
}

/* Ensure a consistent gap under every main tool card (cards already have padding) */
main > .card,
main > .tool,
main > .currency-card,
main > .timezone-card,
main > .date-card,
main > section.card {
  margin-bottom: 28px !important;
}

/* Align spacing above the card title to match timezone look precisely */
.timezone-card .section-title,
.tz-page .section-title,
.currency-card .section-title,
#date-calculator-section.tool-date-diff .section-title,
.date-card .section-title {
  margin-top: 6px;
  margin-bottom: 10px;
}

/* Slightly increase gap between top accent stroke and title (helps the look in your screenshot) */
.timezone-card::before,
.tz-page::before,
.currency-card::before,
#date-calculator-section.tool-date-diff::before,
.date-card::before {
  top: 10px;    /* nudged down from 12px for better visual gap */
}

/* A small soft separator if you want a subtle visual divider between ad and next card */
.ad-placeholder + section.card::before,
.ad-placeholder + .card::before {
  content: "";
  display: block;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: transparent; /* keep blank so it doesn't conflict with card accent */
}

/* Mobile adjustments: preserve rhythm but reduce gaps on small screens */
@media (max-width: 767px) {
  .ad-placeholder { margin: 18px 0; padding: 8px 10px; }
  main > .card, main > .tool { margin-bottom: 18px !important; }
  .timezone-card::before,
  .tz-page::before,
  .currency-card::before,
  #date-calculator-section.tool-date-diff::before,
  .date-card::before { top: 8px; height: 5px; }
}
/* ===== Centered hero header + tagline + footer (blue theme) =====
   Paste at end of css/pages.css
   ================================================================== */

/* Center the header content and make the title a stylish hero */
.site-header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hero title style: subtle gradient, crisp weight, and small shadow */
/* FIX: prevent hero title cut-off */
.site-header .site-title {
  font-size: 2.6rem;
  line-height: 1.15;                 /* increased line-height so descenders are not cut */
  font-weight: 900;
  margin: 0 0 0.8rem 0;              /* more spacing below */
  letter-spacing: -0.02em;

  /* Gradient text */
  background: linear-gradient(90deg, #0d6efd 0%, #0b66d6 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Fix clipping by adding vertical padding */
  padding: 6px 6px 10px 6px;          /* bottom padding added */
  border-radius: 8px;

  /* Keep light shadow */
  text-shadow: 0 4px 14px rgba(11,68,122,0.08);
}

/* Mobile */
@media (max-width: 720px) {
  .site-header .site-title {
    font-size: 1.8rem;
    line-height: 1.2;
    padding: 6px;
  }
}


/* Center the tagline items and increase spacing when centered */
.tagline-bar .tagline-inner { justify-content: center; }
.tagline-content {
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  text-align: center;
}


/* Make tagline icons match blue palette */
.tagline-content i { color: #0d6efd; font-size: 1.05rem; }

/* Center ad placeholders and cards visually within page container */
.ad-placeholder { text-align: center; }

/* Center footer content and links */
.site-footer .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.site-footer nav { display:flex; gap: 12px; justify-content:center; flex-wrap:wrap; }
.site-footer nav a { color: #0d6efd; font-weight:700; }

/* Footer copyright styling */
.site-footer .copyright {
  font-weight: 600;
  color: rgba(11,68,122,0.6);
}

/* Small nicety: slightly increase the blue top stroke prominence on main cards */
.timezone-card::before,
.tz-page::before,
.currency-card::before,
#date-calculator-section.tool-date-diff::before,
.date-card::before {
  height: 7px;
  top: 10px;
  background: linear-gradient(90deg, rgba(13,110,253,0.98), rgba(11,102,210,0.9));
  border-radius: 6px;
}

/* === Reliable top accent using real DOM element (preferred over ::before) === */
.tool-accent-top {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 7px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(13,110,253,0.98), rgba(11,102,210,0.9));
  z-index: 60;                /* high so it sits above card background but below header text */
  pointer-events: none;
  display: block;
}

/* ensure cards can contain the absolutely-positioned accent */
.card, .tool, .currency-card, .timezone-card, .date-card {
  position: relative !important;
  overflow: visible !important; /* allow accent to show even if earlier rule hid overflow */
}

/* nudge title down slightly so it never overlaps */
.card .section-title { margin-top: 10px !important; position: relative; z-index: 70; }

/* mobile tweak — thinner accent on narrow screens */
@media (max-width: 720px) {
  .tool-accent-top { height: 5px; top: 8px; left: 10px; right: 10px; }
}

/* Final override for Range dropdown */
.currency-card select#history-range {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5' stroke='%23185FCC' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(180deg,#ffffff,#fbfdfb) !important;

  background-repeat: no-repeat, repeat !important;
  background-position: right 12px center, 0 0 !important;
  background-size: 14px 14px, auto !important;

  border: 1.5px solid rgba(11,34,59,0.12) !important;
  box-shadow: inset 0 2px 6px rgba(11,34,59,0.02) !important;
  height: 40px !important;
  padding: 10px 42px 10px 12px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  color: #0B223B !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* === Currency: keep big rate + "(Rate as of ...)" tightly together on the left === */

#currency-result {
  /* override the space-between that was pushing the meta to the far right */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;           /* small gap between number and date */
  flex-wrap: wrap;               /* allow wrap on very small screens */
}

#currency-result .rate-main,
#currency-result .rate-meta {
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap;           /* keep each piece on a single short line */
}

/* If some inline styles force absolute/right, make them static */
#currency-result .rate-main[style],
#currency-result .rate-meta[style] {
  position: static !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
}

/* small-screen tweak: allow meta to slip under number if there isn't room */
@media (max-width: 480px) {
  #currency-result .rate-main {
    font-size: 1.05rem;
  }
  #currency-result .rate-meta {
    font-size: .85rem;
    white-space: normal; /* allow wrap on very small screens */
  }
}

/* ====== FORCE: keep rate + date tightly together on the LEFT ======
   Place this at the very end of the last CSS file that loads on the page.
   This override is deliberately specific and uses !important where necessary
   so it beats rules in currency.css which were re-introducing space-between.
======================================================================== */

body .currency-card #currency-result {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* STOP space-between from winning */
  gap: 8px !important;
  flex-wrap: wrap !important;
  white-space: nowrap !important;    /* prefer single-line on desktop */
  padding-right: 0 !important;
}

/* Prevent .rate-main from expanding to take all space (flex:1 in currency.css) */
body .currency-card #currency-result .rate-main {
  flex: 0 0 auto !important;     /* do NOT grow — keep as inline size */
  min-width: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Keep the meta immediately after the main and prevent it being pushed away */
body .currency-card #currency-result .rate-meta {
  flex: 0 0 auto !important;
  order: 2 !important;            /* ensure meta follows main */
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
  color: var(--cu-muted, #5d6b7a) !important;
  font-weight: 700 !important;
}

/* Force the main to be before the meta */
body .currency-card #currency-result .rate-main { order: 1 !important; }

/* Defensive: if other rules insert a wide flex-child (eg a span with flex:1),
   collapse it so it can't push the meta away */
body .currency-card #currency-result > .flex-fill,
body .currency-card #currency-result > .result-fill,
body .currency-card #currency-result > .wide {
  flex: 0 0 auto !important;
  display: inline-block !important;
  min-width: 0 !important;
}

/* On very small screens allow the meta to break to next line */
@media (max-width: 520px) {
  body .currency-card #currency-result {
    white-space: normal !important;
  }
  body .currency-card #currency-result .rate-meta {
    flex-basis: 100% !important;
    order: 2 !important;
    margin-top: 6px !important;
    white-space: normal !important;
  }
}

/* FINAL FIX — override the rule that forces space-between */
.currency-card .row.g-3 + #currency-result {
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important; /* keeps rate + date tight like timezone */
}

/* ======================================================================
   Cookie banner — prettier / spaced / theme-aligned (override)
   Paste at the end of pages.css (will sit after the earlier cookie rules)
   ====================================================================== */

:root {
  --gtt-cookie-bg: linear-gradient(180deg,#fbfdff,#f2f7ff);
  --gtt-cookie-surface: #ffffff;
  --gtt-cookie-accent: var(--tz-accent, #2B7BE4);
  --gtt-cookie-accent-700: var(--tz-accent-700, #185FCC);
  --gtt-cookie-muted: #53606b;
}

/* wrapper: card-like but slim, centered and padded */
body .cookie-banner,
body .cookie-consent,
body .cookie-notice,
.cookie-banner,
.cookie-consent,
.cookie-notice,
#cookie-consent,
#cookie-banner {
  position: fixed !important;
  left: 20px !important;
  right: 20px !important;
  bottom: 24px !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  z-index: 99999 !important;

  background: var(--gtt-cookie-bg) !important;
  border: 1px solid rgba(11,34,59,0.04) !important;
  box-shadow: 0 22px 46px rgba(11,34,59,0.06) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;   /* slight increase for better spacing */

  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease !important;
  opacity: 1 !important;
}

/* small decorative accent strip on top of banner */
body .cookie-banner::before,
.cookie-banner::before,
body .cookie-consent::before,
.cookie-consent::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -8px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gtt-cookie-accent), var(--gtt-cookie-accent-700));
  box-shadow: 0 8px 18px rgba(24,95,204,0.06);
  pointer-events: none;
}

/* message: left, wraps nicely */
body .cookie-banner .cc-message,
.cookie-banner .message,
body .cookie-consent .cc-message,
.cookie-consent .message,
.cookie-notice .message {
  flex: 1 1 60% !important;
  color: var(--gtt-cookie-muted) !important;
  font-weight: 700 !important;
  font-size: 0.96rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* action container: right side, keep buttons tidy */
body .cookie-banner .cc-actions,
.cookie-banner .actions,
body .cookie-consent .cc-actions,
.cookie-consent .actions {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;       /* CENTER the buttons */
  margin-top: 12px !important;             /* SPACE above buttons */
}


/* Accept — refined filled pill */
body .cookie-banner .cc-accept,
.cookie-banner .btn-accept,
.cookie-banner button.accept,
body .cookie-consent .cc-accept,
.cookie-consent .btn-accept {
  background: linear-gradient(90deg,var(--gtt-cookie-accent),var(--gtt-cookie-accent-700)) !important;
  color: #fff !important;
  padding: 7px 14px !important;               /* slightly smaller */
font-size: 0.90rem !important;

  border-radius: 10px !important;
  font-weight: 900 !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(24,95,204,0.12) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  transform: translateY(0) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
body .cookie-banner .cc-accept:hover,
.cookie-banner .btn-accept:hover { transform: translateY(-3px) !important; box-shadow: 0 18px 44px rgba(24,95,204,0.16) !important; }

/* Decline — pale-pill parity with your Reset/Today */
body .cookie-banner .cc-decline,
.cookie-banner .btn-decline,
.cookie-banner button.decline,
body .cookie-consent .cc-decline,
.cookie-consent .btn-decline {
  background: linear-gradient(180deg,#F0F6FF,#EAF3FF) !important;
  color: #072243 !important;
  border: 1px solid rgba(24,95,204,0.10) !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(24,95,204,0.06) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* subtle link style inside message */
body .cookie-banner a,
.cookie-banner a {
  color: var(--gtt-cookie-accent) !important;
  text-decoration: underline !important;
  font-weight: 800 !important;
}

/* small helper: ensure icon + text align inside buttons */
.cookie-banner .cc-accept i,
.cookie-banner .cc-decline i,
.cookie-banner button i,
.cookie-banner svg { vertical-align: middle; margin-right: 6px; }

/* make banner comfortably taller on desktop, more compact on mobile */
@media (min-width: 721px) {
  body .cookie-banner { padding: 18px 20px !important; }
}

/* Mobile: edge-to-edge, stacked CTAs, clear spacing */
@media (max-width: 720px) {
  body .cookie-banner,
  .cookie-banner,
  body .cookie-consent,
  body .cookie-notice {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    padding: 12px !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  body .cookie-banner .cc-message,
  .cookie-banner .message { width: 100% !important; order: 1 !important; }
  body .cookie-banner .cc-actions,
  .cookie-banner .actions { width: 100% !important; order: 2 !important; justify-content: space-between !important; }

  /* stack buttons full width if very narrow */
  body .cookie-banner .cc-accept,
  body .cookie-banner .cc-decline,
  .cookie-banner .actions button {
    width: 48% !important;
    justify-content: center !important;
  }
}

/* defensive: remove extreme transforms that some widgets inject */
body .cookie-banner * { transform: none !important; -webkit-transform: none !important; }

/* optional: gentle visible hide animation you can toggle via .hidden */
body .cookie-banner.hidden { transform: translateY(12px) scale(.995); opacity: 0; pointer-events: none; }

/* ===========================
   COOKIE BANNER: final override
   Paste at the VERY END of pages.css (or overrides.css)
   Defensive selectors to beat base.css / pages.css
   =========================== */

/* Targets all common cookie banner class/id variations */
#cookie-banner,
#cookie-consent,
.cookie-banner,
.cookie-consent,
.cookie-notice,
body .cookie-banner,
body #cookie-banner,
body #cookie-consent {
  /* Soft overall border + subtle surface to match theme */
  border: 1px solid rgba(11,34,59,0.10) !important;
  background: linear-gradient(180deg,#ffffff,#fbfdff) !important;
  box-shadow: 0 10px 32px rgba(11,34,59,0.04) !important;
  border-radius: 12px !important;

  /* Force stacked layout so message sits above the buttons and is centered */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  /* comfortable padding & width */
  padding: 16px 20px !important;
  left: 20px !important;
  right: 20px !important;
  bottom: 24px !important;
  max-width: 980px !important;
  margin: 0 auto !important;

  gap: 14px !important;           /* space between message and actions */
  z-index: 2147483647 !important;
}

/* Remove any decorative top accent line that some rules add via ::before */
#cookie-banner::before,
#cookie-consent::before,
.cookie-banner::before,
.cookie-consent::before,
body .cookie-banner::before {
  display: none !important;
  content: none !important;
}

/* Message paragraph: center and slightly lighter weight to match theme */
#cookie-banner .cc-message,
#cookie-consent .cc-message,
.cookie-banner .message,
.cookie-consent .message,
.cookie-notice .message,
body .cookie-banner .cc-message {
  width: 100% !important;
  text-align: center !important;           /* center the line */
  color: #2f3e48 !important;
  font-weight: 700 !important;
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Actions container: take full width, center the buttons */
#cookie-banner .cc-actions,
#cookie-consent .cc-actions,
.cookie-banner .cc-actions,
.cookie-banner .actions,
.cookie-consent .actions,
.cookie-notice .actions {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;     /* center horizontally */
  gap: 12px !important;                    /* gap between buttons */
  padding-top: 6px !important;             /* breathing room above buttons */
  box-sizing: border-box !important;
}

/* Make Accept slightly smaller but still prominent */
#cookie-banner .cc-accept,
.cookie-banner .cc-accept,
#cookie-consent .cc-accept,
.cookie-consent .cc-accept,
.cookie-banner .btn-accept,
.cookie-banner button.accept {
  padding: 7px 14px !important;
  font-size: 0.92rem !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 26px rgba(24,95,204,0.10) !important;
}

/* Make Decline match pale-pill styling & a bit smaller */
#cookie-banner .cc-decline,
.cookie-banner .cc-decline,
#cookie-consent .cc-decline,
.cookie-consent .cc-decline,
.cookie-banner .btn-decline,
.cookie-banner button.decline {
  padding: 6px 12px !important;
  font-size: 0.9rem !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}

/* Ensure inline links inside message remain theme-blue and bold */
#cookie-banner a,
.cookie-banner a,
#cookie-consent a,
.cookie-consent a {
  color: var(--tz-accent, #2B7BE4) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}

/* Mobile: keep stacked but slightly more compact and full-width buttons */
@media (max-width: 720px) {
  #cookie-banner,
  .cookie-banner,
  #cookie-consent,
  .cookie-consent {
    left: 8px !important;
    right: 8px !important;
    bottom: 12px !important;
    padding: 12px !important;
  }

  /* stack CTA buttons and let them take most width but keep gap */
  .cookie-banner .cc-actions,
  .cookie-banner .actions,
  #cookie-banner .cc-actions {
    flex-direction: row !important;
    justify-content: space-evenly !important;
    gap: 10px !important;
  }

  .cookie-banner .cc-accept,
  .cookie-banner .cc-decline,
  .cookie-consent .cc-accept,
  .cookie-consent .cc-decline {
    width: 48% !important;
    padding: 8px 8px !important;
    text-align: center !important;
  }
}

/* Defensive: prevent other rules from forcing extreme transforms/offsets */
#cookie-banner * { transform: none !important; -webkit-transform: none !important; }

/* tool-about styling — paste at the end of css/pages.css */
.tool-about {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border: 1px solid rgba(11,34,59,0.04);
  box-shadow: 0 8px 22px rgba(11,34,59,0.03);
  color: #16362f;
  font-size: 0.96rem;
  line-height: 1.6;
  font-weight: 600;
}

.tool-about .about-title {
  font-weight: 800;
  color: #0B223B;
  margin-bottom: 6px;
  display: block;
  font-size: 1.02rem;
}

.tool-about .about-body {
  color: #4b5563;
  font-weight: 600;
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width:520px) {
  .tool-about { padding: 12px; font-size: 0.94rem; }
  .tool-about .about-title { font-size: 1rem; }
}

/* ===========================
   FINAL: Intro / Ad alignment
   Paste at the end of site-fragments.css
   =========================== */

:root {
  --gt-accent-blue: #1f6de8;
  --gt-sage: #1ea67a;
  --gt-muted: #5b7180;
  --gt-card-bg: #fbfdff;
  --gt-card-border: rgba(46,106,255,0.06);
  --gt-shadow: 0 12px 36px rgba(16,46,110,0.06);
  --gt-radius: 14px;
  --gt-max-width: 1100px;
  --gt-horizontal-pad: 16px;
}

/* Make main container and header-inner share the same width/padding */
main.container,
.site-header-inner,
.footer-inner,
.intro-ad-wrap {
  max-width: var(--gt-max-width);
  padding-left: var(--gt-horizontal-pad);
  padding-right: var(--gt-horizontal-pad);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Intro/ad wrapper keeps the same visual grid as tool cards */
.intro-ad-wrap {
  margin-top: 20px;
  margin-bottom: 22px;
}

/* Intro card: same card motif as tool cards */
.intro-card {
  background: linear-gradient(180deg,#ffffff,var(--gt-card-bg));
  border: 1px solid var(--gt-card-border);
  box-shadow: var(--gt-shadow);
  border-radius: var(--gt-radius);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.intro-card .intro-lead { margin:0 0 6px; color:#1f2f3b; font-weight:600; font-size:15px; line-height:1.45; }
.intro-card .intro-sub  { margin:0; color:var(--gt-muted); font-size:13px; }

/* Ad card: visually lighter than main card but aligned */
.ad-card {
  background: linear-gradient(180deg,#ffffff,#fcfeff);
  border: 1px solid rgba(34,84,230,0.06);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(16,46,110,0.04);
}

/* internal layout aligns content with tool card content */
.ad-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  justify-content: flex-start; /* left align like tool content */
  max-width: 100%;
}

/* badge / desc / cta */
.ad-badge {
  background: rgba(30,166,122,0.12);
  color: var(--gt-sage);
  font-weight:700;
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  border: 1px solid rgba(30,166,122,0.08);
}
.ad-desc {
  color: var(--gt-muted);
  font-size:13px;
  line-height:1.2;
  text-align:left;
  flex: 1 1 auto;
}
.ad-cta {
  background: linear-gradient(180deg,#f8fbff,#ffffff);
  color: var(--gt-accent-blue);
  font-weight:700;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(31,109,232,0.08);
  min-width:120px;
  text-align:center;
}

/* Make tool-accent-top align with the same grid */
.tool-accent-top { max-width: var(--gt-max-width); margin: 0 auto; padding: 0 var(--gt-horizontal-pad); box-sizing: border-box; }

/* minor spacing consistency with tool cards */
.currency-card, .timezone-card, .date-card {
  border-radius: var(--gt-radius);
}

/* Prevent any unwanted horizontal overflow that creates side gaps */
html, body { overflow-x: hidden; }

/* Mobile adjustments */
@media (max-width:720px) {
  :root { --gt-horizontal-pad: 12px; --gt-radius: 12px; }
  .intro-ad-wrap { margin-top: 14px; margin-bottom: 16px; }
  .intro-card { padding: 12px; }
  .ad-card { padding: 8px; }
  .ad-desc { display: none; }            /* hide long desc on very narrow screens */
  .ad-cta { min-width: 88px; padding: 7px 10px; font-size:14px; }
}

/* Accessibility: respect reduced-motion where animations exist elsewhere */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ====== Unified Ad Card forcing identical look (paste at end of pages.css) ====== */
:root{
  --gtt-ad-max-w:1100px;
  --gtt-ad-pad-h:16px;
  --gtt-ad-blue:#1f6de8;
  --gtt-muted:#5b7180;
  --gtt-ad-radius:14px;
  --gtt-ad-border:rgba(46,106,255,0.06);
  --gtt-ad-shadow:0 12px 36px rgba(16,46,110,0.06);
}

.ad-card,
.ad-placeholder {
  max-width: var(--gtt-ad-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gtt-ad-pad-h);
  padding-right: var(--gtt-ad-pad-h);
  box-sizing: border-box;
}

.ad-card {
  background: linear-gradient(180deg,#ffffff,#fbfdff) !important;
  border: 1px solid var(--gtt-ad-border) !important;
  border-radius: var(--gtt-ad-radius) !important;
  box-shadow: var(--gtt-ad-shadow) !important;
  padding: 12px 16px !important;
  margin: 18px auto !important;
}

/* inner layout */
.ad-inner {
  display:flex !important;
  gap:14px !important;
  align-items:center !important;
  justify-content:space-between !important; /* CTA right, content left */
  width:100%;
}

/* left cluster (badge + desc) */
.ad-left { display:flex; gap:12px; align-items:center; min-width:0; flex:1 1 auto; }
.ad-badge{
  background: rgba(30,166,122,0.12);
  color:#1ea67a;
  font-weight:700;
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(30,166,122,0.08);
  white-space:nowrap;
}
.ad-desc{
  color:var(--gtt-muted);
  font-size:13px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap; /* single-line on desktop */
  flex:1 1 auto;
  min-width:0;
}

/* CTA */
.ad-cta{
  background: linear-gradient(180deg,#f8fbff,#ffffff);
  color:var(--gtt-ad-blue);
  font-weight:800;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(31,109,232,0.08);
  min-width:120px;
  text-align:center;
  box-shadow:0 10px 26px rgba(31,109,232,0.06);
  white-space:nowrap;
}

/* mobile: stack, allow desc to wrap */
@media (max-width:720px){
  .ad-inner { flex-direction:column; gap:8px; align-items:center; }
  .ad-left { justify-content:center; text-align:center; }
  .ad-desc{ white-space:normal; }
  .ad-cta{ min-width:88px; padding:8px 10px; }
  .ad-card{ padding:10px !important; margin:12px !important; }
}

/* prevent horizontal scrollbar from accidental overflow */
html,body { overflow-x:hidden; }

/* Global info panels under tools (Who uses…, What is…, FAQs, etc.) */
.gt-info-panel {
  max-width: 1100px;
  margin: 1.75rem auto 2.25rem;
  padding: 18px 20px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(46, 106, 255, 0.06);
  box-shadow: 0 18px 40px rgba(15, 44, 85, 0.04);
}

.gt-info-panel .gt-info-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a8ba0;
  font-weight: 700;
  margin-bottom: 4px;
}

.gt-info-panel h2,
.gt-info-panel h3 {
  font-size: 17px;
  font-weight: 700;
  color: #143d82;
  margin-bottom: 6px;
}

.gt-info-panel p {
  font-size: 13px;
  color: #43576a;
  line-height: 1.6;
  margin-bottom: 6px;
}

.gt-info-panel ul {
  margin: 6px 0 0;
  padding-left: 1.2rem;
  font-size: 13px;
  color: #43576a;
}

.gt-info-panel ul li + li {
  margin-top: 4px;
}

.gt-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-top: 10px;
}

.gt-info-col {
  flex: 1 1 260px;
  min-width: 0;
}

@media (max-width: 720px) {
  .gt-info-panel {
    padding: 14px 14px;
  }
  .gt-info-panel h2,
  .gt-info-panel h3 {
    font-size: 15px;
  }
}

/* Global info panels under tools */
.gt-info-panel {
  max-width: 1100px;
  margin: 1.75rem auto 2.25rem;
  padding: 18px 20px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(46, 106, 255, 0.06);
  box-shadow: 0 18px 40px rgba(15, 44, 85, 0.04);
}

.gt-info-panel .gt-info-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a8ba0;
  font-weight: 700;
  margin-bottom: 4px;
}

.gt-info-panel h2,
.gt-info-panel h3 {
  font-size: 17px;
  font-weight: 700;
  color: #143d82;
  margin-bottom: 6px;
}

.gt-info-panel p {
  font-size: 13px;
  color: #43576a;
  line-height: 1.6;
  margin-bottom: 6px;
}

.gt-info-panel ul {
  margin: 6px 0 0;
  padding-left: 1.2rem;
  font-size: 13px;
  color: #43576a;
}

.gt-info-panel ul li + li {
  margin-top: 4px;
}

.gt-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-top: 10px;
}

.gt-info-col {
  flex: 1 1 260px;
  min-width: 0;
}

@media (max-width: 720px) {
  .gt-info-panel {
    padding: 14px 14px;
  }
  .gt-info-panel h2,
  .gt-info-panel h3 {
    font-size: 15px;
  }
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tool-full-link {
  font-size: 12px;
  font-weight: 600;
  color: #1f6de8;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(46, 106, 255, 0.16);
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tool-full-link i {
  font-size: 13px;
}

.tool-full-link:hover {
  background: #1f6de8;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 576px) {
  .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

.tool-inline-link {
  color: #1f6de8;
  font-weight: 600;
  text-decoration: none;
}

.tool-inline-link:hover {
  text-decoration: underline;
}

/* ===== HOME TOOL GRID ===== */

.home-tools {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 16px;
}

.home-section-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1f6de8;
  margin-bottom: 16px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.home-card {
  display: block;
  background: #ffffff;
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  border: 1px solid rgba(46,106,255,0.08);
  transition: all 0.2s ease;
}

.home-card i {
  font-size: 22px;
  color: #1f6de8;
  margin-bottom: 8px;
  display: block;
}

.home-card h3 {
  font-size: 16px;
  color: #173b82;
  margin-bottom: 4px;
}

.home-card p {
  font-size: 13px;
  color: #556b79;
  margin: 0;
}

.home-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(15,44,85,0.08);
  border-color: rgba(46,106,255,0.2);
}

.home-categories {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 16px;
}

.category-block {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(46,106,255,0.06);
}

.category-block h3 {
  font-size: 16px;
  color: #1f6de8;
  margin-bottom: 8px;
}

.category-block ul {
  padding-left: 16px;
}

.category-block li {
  font-size: 13px;
  margin-bottom: 6px;
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.usecase-card {
  background: #ffffff;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(46,106,255,0.06);
}

.usecase-card h3 {
  font-size: 14px;
  color: #173b82;
}

.container-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===============================
   PREMIUM UI — FINAL OVERRIDE
   =============================== */

:root {
  --gt-shadow-soft: 0 6px 20px rgba(15,44,85,0.06);
  --gt-shadow-hover: 0 16px 40px rgba(15,44,85,0.12);
}

/* ===== TOOL CARDS ===== */
.home-tools .home-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(46,106,255,0.08) !important;
  box-shadow: var(--gt-shadow-soft) !important;
  transition: all 0.25s ease !important;
}

.home-tools .home-card:hover {
  transform: translateY(-6px) scale(1.02) !important;

  /* Strong elevation */
  box-shadow:
    0 20px 50px rgba(15,44,85,0.15),
    0 0 0 2px rgba(31,109,232,0.25) !important;

  /* Solid selected border */
  border-color: rgba(31,109,232,0.5) !important;

  /* Slight background tint */
  background: linear-gradient(180deg, #ffffff, #f4f8ff) !important;
}

/* ===== CATEGORY BLOCK ===== */
.home-categories .category-block {
  border-radius: 16px !important;
  box-shadow: var(--gt-shadow-soft) !important;
  transition: 0.25s ease !important;
}

.home-categories .category-block:hover {
  box-shadow: var(--gt-shadow-hover) !important;
}

/* ===== MINI TOOL ===== */
.mini-tool .container-wrap {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: var(--gt-shadow-soft) !important;
  border: 1px solid rgba(46,106,255,0.08) !important;
}

/* ===== USE CASE ===== */
.home-usecases .usecase-card {
  border-radius: 14px !important;
  box-shadow: var(--gt-shadow-soft) !important;
  transition: 0.2s ease !important;
}

.home-usecases .usecase-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--gt-shadow-hover) !important;
}

/* ===== SECTION TITLES ===== */
.home-section-title,
.home-usecases h2,
.home-seo h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #173b82 !important;
}

/* ===== GLOBAL SPACING POLISH ===== */
.home-tools,
.home-categories,
.mini-tool,
.home-usecases,
.home-seo {
  margin-top: 28px !important;
}

/* ===== REMOVE FLAT LOOK ===== */
body {
  background: #f4f8fc !important;
}

/* ===============================
   PREMIUM BACKGROUND LAYERS
   =============================== */

body {
  background: 
    radial-gradient(circle at 20% 20%, rgba(31,109,232,0.06), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(30,166,122,0.05), transparent 40%),
    linear-gradient(180deg, #f7fbff 0%, #f4f8fc 100%) !important;
}

/* Optional: subtle texture smoothing */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.2;
}

/* ===============================
   CARD HOVER GLOW EFFECT
   =============================== */

/* Tool cards */
.home-tools .home-card {
  position: relative;
  overflow: hidden;
}

/* Glow layer */
.home-tools .home-card::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 20px;

  background: radial-gradient(
    300px circle at var(--x, 50%) var(--y, 50%),
    rgba(31,109,232,0.25),
    transparent 60%
  );

  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 0;
}

/* Activate glow */
.home-tools .home-card:hover::after {
  opacity: 1;
}

/* Keep content above glow */
.home-tools .home-card > * {
  position: relative;
  z-index: 1;
}

/* ===== 2 COLUMN PREMIUM SECTION ===== */

.two-col-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: start;
}

/* Left side */
.col-left p {
  margin-bottom: 10px;
}

/* Right side */
.col-right {
  background: #f8fbff;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(46,106,255,0.08);
}

.col-right h3 {
  font-size: 15px;
  margin-bottom: 8px;
  color: #1f4fa8;
}

/* Tool list styling */
.tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-list li {
  margin-bottom: 6px;
}

.tool-list a {
  text-decoration: none;
  font-size: 13px;
  color: #1f6de8;
  font-weight: 500;
}

.tool-list a:hover {
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px) {
  .two-col-layout {
    grid-template-columns: 1fr;
  }

  .col-right {
    margin-top: 12px;
  }
}
/* ===============================
   MATCH STYLE WITH "WHO USES" SECTION
   =============================== */

/* HEADINGS (same tone as gt-info-panel) */
.intro-title,
.home-extra-card h2 {
  color: #0f2f5c !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
}

/* SUB HEADINGS */
.home-extra-card h3 {
  color: #1a4a8a !important;
  font-weight: 700 !important;
}

/* MAIN TEXT */
.intro-lead,
.home-extra-card p,
.home-extra-card li {
  color: #2c3e50 !important;
  font-size: 14px !important;
  line-height: 1.6;
}

/* SECONDARY TEXT */
.intro-sub {
  margin-bottom: 10px;        /* FIX spacing */
  color: #4b5b6b;             /* Slightly stronger */
  font-size: 14px;            /* Increase readability */
  line-height: 1.6;           /* IMPORTANT */
}

/* LINKS (match strong blue from tool cards) */
.home-extra-card a {
  color: #1f6de8 !important;
  font-weight: 600;
}

.home-extra-card a:hover {
  text-decoration: underline;
}

/* RIGHT PANEL (make it less faded, more like gt-info) */
.col-right {
  background: #ffffff;
  border: 1px solid rgba(15,47,92,0.08);
  box-shadow: 0 6px 18px rgba(15,47,92,0.05);
}

/* LIST SPACING */
.tool-list li {
  margin-bottom: 8px;
}

/* INTRO CARD ALIGNMENT */
.intro-card {
  box-shadow: 0 8px 26px rgba(15,47,92,0.06) !important;
  border: 1px solid rgba(15,47,92,0.08) !important;
}

.feature-list {
  margin-top: 10px;
  padding-left: 18px;
}

.feature-list li {
  font-size: 13px;
  margin-bottom: 6px;
  color: #2c3e50;
}