/*
 * Comparisons hub (/comparisons/) - loaded alongside style.css on that page only.
 *
 * Same construction as videos.css and trust.css: semantic markup, BEM-ish .tzc__*
 * classes, tokens scoped to the .tzc root. Token values are the site palette, so
 * the page reads as a standard Traizr page without pulling in Elementor's
 * hash-ID CSS.
 *
 * NOTE 1: --tzc-primary is #1C6BA6, not #2582C5. style.css declares
 * .elementor-kit-7 twice and the later block overrides primary. See videos.css.
 *
 * NOTE 2: the font-family declaration below is currently inert - the tail of
 * style.css forces a system stack with `body,body *{...!important}`. Kept so this
 * page follows the rest of the site if that temporary block is reverted.
 *
 * NOTE 3: colour rules that land on an <a> are written `.tzc .tzc__x`, not
 * `.tzc__x`. style.css has `.elementor-kit-7 a{color:...}` and the body carries
 * elementor-kit-7, so a single class would lose. Same trap as videos.css.
 *
 * NOTE 4: blocks marked "reset" exist to undo style.css globals, which style bare
 * <a>/<ul>/<ol> with a magenta #c36 theme left over from the starter theme.
 */

.tzc{
  --tzc-primary:#1C6BA6;
  --tzc-primary-dark:#155884;
  --tzc-secondary:#70B2E2;
  --tzc-btn-ink:#0D2B45;
  --tzc-navy:#185B8D;
  --tzc-ink:#0F2C43;
  --tzc-text:#40596B;
  --tzc-muted:#616F7D;
  --tzc-border:#DCE9F6;
  --tzc-border-strong:#AED4F0;
  --tzc-wash:#F0F5FF;
  --tzc-radius:50px;
  --tzc-radius-sm:18px;
  --tzc-shadow:0 0 10px 0 rgba(0,0,0,.1);
  --tzc-shadow-soft:0 0 10px 0 rgba(0,0,0,.05);
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  color:var(--tzc-text);
  display:block;
  padding:0 0 72px;
}
.tzc *,.tzc *::before,.tzc *::after{box-sizing:border-box}
@media(max-width:767px){.tzc{--tzc-radius-sm:14px;padding-bottom:52px}}

.tzc__wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* h1/h2/h3 reset: style.css sets its own sizes plus h2{padding-top:20px} */
.tzc h1{font-size:clamp(30px,4.6vw,46px);font-weight:700;line-height:1.15;
  color:var(--tzc-navy);margin:0 0 14px;padding-top:0}
.tzc h2{font-size:clamp(24px,3.4vw,34px);font-weight:700;line-height:1.2;
  color:var(--tzc-navy);margin:0 0 10px;padding-top:0}
.tzc h3{font-size:19px;font-weight:600;line-height:1.3;color:var(--tzc-navy);margin:0 0 8px}
.tzc p{margin:0 0 14px;line-height:1.65}

/* reset: style.css underlines every <a> and gives <ul>/<ol> theme defaults */
/* Sits below the floating header, hence the top padding (same as trust.css). */
.tzc__crumbs{padding:118px 0 0}
@media(max-width:767px){.tzc__crumbs{padding-top:100px}}
.tzc__crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:0;font-size:13px;color:var(--tzc-muted)}
.tzc__crumbs li{display:flex;align-items:center;gap:8px}
.tzc__crumbs li+li::before{content:"/";color:var(--tzc-border-strong)}
.tzc__crumbs a{color:var(--tzc-muted);text-decoration:none}
.tzc__crumbs a:hover,.tzc__crumbs a:focus-visible{color:var(--tzc-primary);text-decoration:underline}

.tzc__hero{padding:28px 0 8px;max-width:760px}
.tzc__lede{font-size:18px;color:var(--tzc-text);margin:0}

.tzc__section{padding:44px 0 0}
.tzc__sub{color:var(--tzc-muted);max-width:70ch;margin:0 0 24px}

/* reset: <ul> carries a theme list-style and left padding from style.css */
.tzc__grid{list-style:none;margin:0;padding:0;
  display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.tzc__card{background:#fff;border:1px solid var(--tzc-border);
  border-radius:var(--tzc-radius-sm);padding:22px 22px 18px;
  box-shadow:var(--tzc-shadow-soft);display:flex;flex-direction:column;gap:2px}
.tzc__card h3{margin:0 0 8px}
.tzc__card h3 a{color:var(--tzc-navy);text-decoration:none}
.tzc__card h3 a:hover,.tzc__card h3 a:focus-visible{color:var(--tzc-primary);text-decoration:underline}
.tzc__card p{font-size:15px;color:var(--tzc-text);margin:0 0 14px}
.tzc .tzc__more{margin-top:auto;font-size:14px;font-weight:600;color:var(--tzc-primary);text-decoration:none}
.tzc .tzc__more:hover,.tzc .tzc__more:focus-visible{color:var(--tzc-primary-dark);text-decoration:underline}

.tzc__ask{margin-top:8px}
/* reset: <ol> inherits theme numbering and padding */
.tzc__questions{list-style:none;counter-reset:tzc;margin:0;padding:0;
  display:grid;gap:14px;max-width:900px}
.tzc__questions li{counter-increment:tzc;position:relative;
  background:var(--tzc-wash);border:1px solid var(--tzc-border);
  border-radius:var(--tzc-radius-sm);padding:18px 20px 18px 62px;
  font-size:15px;line-height:1.6}
.tzc__questions li::before{content:counter(tzc);position:absolute;left:20px;top:17px;
  width:28px;height:28px;border-radius:50%;background:var(--tzc-primary);color:#fff;
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tzc__questions strong{color:var(--tzc-ink);display:block;margin-bottom:3px}
.tzc__answer{margin:20px 0 0;font-size:15px;color:var(--tzc-muted);max-width:80ch}
.tzc__answer a{color:var(--tzc-primary)}

.tzc__cta{margin-top:48px;background:var(--tzc-navy);color:#fff;
  border-radius:var(--tzc-radius-sm);padding:34px 30px;text-align:center}
.tzc__cta h2{color:#fff}
.tzc__cta p{color:#C9DCEC;max-width:60ch;margin:0 auto 20px}
/* reset: bare <a> inherits a #c36 border and 3px radius from style.css */
.tzc .tzc__btn{display:inline-block;background:var(--tzc-secondary);color:var(--tzc-btn-ink);
  font-size:16px;font-weight:600;text-decoration:none;border:0;
  padding:14px 30px;border-radius:var(--tzc-radius);box-shadow:var(--tzc-shadow)}
.tzc .tzc__btn:hover,.tzc .tzc__btn:focus-visible{background:#8CC2EA;color:var(--tzc-btn-ink)}

.tzc a:focus-visible,.tzc .tzc__btn:focus-visible{outline:3px solid var(--tzc-primary);outline-offset:2px}

@media(max-width:767px){
  .tzc__grid{grid-template-columns:1fr}
  .tzc__lede{font-size:16px}
  .tzc__cta{padding:26px 20px}
}
