/* =========================================================
   Consumer Expert Tech — house theme
   ---------------------------------------------------------
   Loaded LAST, after style.css / responsive.css / legal.css.
   Nothing in the vendor theme files is edited, so this whole
   layer can be removed by deleting one <link> tag.

   Purpose: give this site its own identity so it does not
   read as the same template as our other review sites.
     - palette   blue/teal      -> violet/cyan
     - headings  Yantramanav    -> Space Grotesk
     - shape     pill buttons   -> soft 10px, bordered cards
     - layout    hero mirrored, roomier section rhythm

   Scope: the main page and the four legal pages only. The
   landing pages under /review-* and /top-* do not load this
   file (they only hotlink the logo image), so they are
   unaffected.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* ---------------------------------------------------------
   1. Palette
   --------------------------------------------------------- */
:root {
  --clr-def:        #6D28D9;   /* violet   (was #0b4df5 blue) */
  --clr-def-2:      #22D3EE;   /* cyan     (was #00d59d teal) */
  --clr-def-3:      #0EA5B7;
  --clr-black-2:    #0B0620;   /* deep violet-navy hero/footer ground */
  --clr-rgb:        109, 40, 217;
  --clr-bg:         #F1ECFB;
  --clr-bg-2:       #DCD2F4;
  --clr-overlay:    rgba(20, 6, 48, 0.82);

  /* Linear rather than radial — a different signature to the
     radial blue/teal burst the sibling site uses. */
  --clr-gradient:   linear-gradient(135deg, #6D28D9 0%, #22D3EE 100%);
  --clr-gradient-2: linear-gradient(135deg, #9333EA 0%, #22D3EE 100%);
  --clr-gradient-3: linear-gradient(135deg, #C026D3 0%, #22D3EE 100%);
  --clr-gradient-4: linear-gradient(135deg, #6D28D9 0%, #C026D3 100%);
  --clr-gradient-5: linear-gradient(105deg, #2A0B5E 0%, #6D28D9 46%, rgba(34, 211, 238, 0.30) 100%);

  /* Own tokens used further down. */
  --cet-ink:        #17123A;
  --cet-line:       #E6E0F5;
  --cet-soft:       #F7F5FD;
  --cet-radius:     10px;
  --cet-radius-lg:  16px;
  --cet-shadow:     0 4px 28px rgba(109, 40, 217, .09);
  --cet-shadow-h:   0 14px 44px rgba(109, 40, 217, .17);
  --font-head:      'Space Grotesk', 'Yantramanav', sans-serif;
}

/* The vendor theme hardcodes these blues instead of using the
   variables, so they have to be restated. */
.btn-gradient {
  background: linear-gradient(120deg, #6D28D9 0%, #7C3AED 45%, #22D3EE 100%);
}
.btn-gradient:hover { background: var(--clr-def); }
.benefit-one { background: rgba(109, 40, 217, .09); }

/* ---------------------------------------------------------
   2. Typography — new headline face
   --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hero-title, .heading-1, .heading-2, .heading-3, .heading-4,
.heading-regular, .heading-light-1, .up-title,
.site-title h2, .footer-widget-title {
  font-family: var(--font-head);
  letter-spacing: -.02em;
}

.hero-title {
  font-weight: 700;
  letter-spacing: -.035em;
}
.site-title h2 {
  font-weight: 700;          /* the theme's 900 is too heavy for Grotesk */
  letter-spacing: -.03em;
  text-transform: none;
}
.heading-1, .heading-regular { font-weight: 600; }

/* Eyebrow labels: small, spaced, uppercase — a distinct tell. */
.hero-sub-title {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* A short accent rule under section headings. */
.site-title h2::after {
  content: "";
  display: block;
  width: 5.6rem;
  height: 3px;
  margin: 2rem auto 0;
  border-radius: 3px;
  background: var(--clr-gradient);
}
.about-right-2 .heading-1::after,
.benefit-right .heading-regular::after {
  content: "";
  display: block;
  width: 5.6rem;
  height: 3px;
  margin: 2.2rem 0 0;
  border-radius: 3px;
  background: var(--clr-gradient);
}

/* ---------------------------------------------------------
   3. Shape — buttons and cards
   --------------------------------------------------------- */
.btn-1 { font-weight: 600; letter-spacing: .01em; }

/* Pills -> soft rectangles. This is the single loudest
   difference between the two sites; set both to 100px to
   go back to pills. */
.btn-circle,
.btn-1.btn-circle,
.btn-submit { border-radius: var(--cet-radius); }

.btn-gradient { box-shadow: 0 6px 20px rgba(109, 40, 217, .28); }
.btn-gradient:hover { box-shadow: 0 10px 30px rgba(109, 40, 217, .38); }

/* Cards: bordered and flatter, rather than shadow-floated. */
.service-box-2 {
  border: 1px solid var(--cet-line);
  border-radius: var(--cet-radius-lg);
  box-shadow: none;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.service-box-2:hover {
  border-color: rgba(109, 40, 217, .38);
  box-shadow: var(--cet-shadow-h);
  transform: translateY(-4px);
}

.benefit-single { border-radius: var(--cet-radius-lg); }
.benefit-two {
  border: 1px solid var(--cet-line);
  box-shadow: var(--cet-shadow);
}

.input-style-2,
.input-style-4 { border-radius: var(--cet-radius); }

/* ---------------------------------------------------------
   4. Layout — mirrored hero, roomier rhythm
   --------------------------------------------------------- */

/* Mirror the hero: illustration left, copy right. The sibling
   site runs copy-left. Mirrors via flex only, so the source
   order (and therefore screen-reader order) is untouched. */
@media (min-width: 1200px) {
  .hero-single-2 .row { flex-direction: row-reverse; }
  .hero-single-2 .left-hdr-pic { padding-left: 0; padding-right: 4rem; }
  .hero-single-2 .hero-content { padding-left: 2rem; }
}

.hero-single-2 {
  height: auto;
  min-height: 88vh;
  padding: 16rem 0 10rem;
}
.hero-single-2 .hero-content .hero-title {
  font-size: 56px;
  line-height: 60px;
}
.hero-single-2 .hero-content p { padding-right: 6%; max-width: 56rem; }

/* Slightly taller sections than the stock 12.8rem. */
.de-padding { padding: 14.5rem 0; }

@media (max-width: 991px) {
  .hero-single-2 { min-height: 0; padding: 13rem 0 8rem; }
  .hero-single-2 .hero-content .hero-title { font-size: 40px; line-height: 46px; }
  .hero-single-2 .hero-content p { padding-right: 0; }
  .de-padding { padding: 9rem 0; }
}

/* ---------------------------------------------------------
   5. Decorative artwork
   The theme ships these shapes baked in blue. Rotating the
   hue is far cheaper than re-cutting the PNGs, and keeps the
   artwork consistent with the new palette.
   Photographs and the logo are deliberately excluded.
   --------------------------------------------------------- */
.hero-2-shape-1,
.hero-2-shape-2,
.about-shape-15,
.service-shape-16,
.service-shape-17,
.benefit-star {
  filter: hue-rotate(38deg) saturate(1.08);
}

/* ---------------------------------------------------------
   6. Footer
   --------------------------------------------------------- */
.footer-legal-links a,
.footer-list a { transition: color .25s ease; }
.footer-legal-links a:hover,
.footer-list a:hover { color: var(--clr-def-2); }

/* Deep violet ground rather than the theme's pure black.
   !important is required here, and only here: .bg-black is a
   Bootstrap utility class, and Bootstrap ships its utilities
   with !important, so specificity alone cannot win. */
.footer.bg-black { background-color: var(--clr-black-2) !important; }

/* Inline accent link in the footer affiliate notice. */
.footer-accent-link { color: var(--clr-def-2); font-weight: 500; }
.footer-accent-link:hover { color: #A5F3FC; }

/* ---------------------------------------------------------
   7. Legal pages
   legal.css inherits --clr-def and --clr-gradient, but it
   also carries a few hardcoded blues of its own.
   --------------------------------------------------------- */
.legal-banner::before {
  background: linear-gradient(115deg, rgba(11, 6, 32, .95) 0%, rgba(109, 40, 217, .60) 60%, rgba(34, 211, 238, .34) 100%);
}
.legal-eyebrow,
.legal-crumbs a:hover,
.legal-updated i { color: #67E8F9; }

.legal-banner h1 { font-family: var(--font-head); letter-spacing: -.03em; }
.legal-body h2,
.legal-body h3,
.legal-toc h2,
.legal-related h2 { font-family: var(--font-head); }

.legal-callout {
  background: #F6F2FE;
  border-color: #E2D7FA;
}
.legal-chips i { background: #F1EBFD; }
.legal-body ul.legal-chips li:hover {
  border-color: rgba(109, 40, 217, .35);
  box-shadow: 0 6px 20px rgba(109, 40, 217, .10);
}
.legal-contact-card:hover { box-shadow: var(--cet-shadow-h); }
.legal-related-grid a:hover { box-shadow: 0 6px 24px rgba(109, 40, 217, .12); }
.legal-row:nth-child(odd) { background: #FBFAFE; }
.legal-toc { background: var(--cet-soft); border-color: var(--cet-line); }
.legal-rows, .legal-intro, .legal-form-wrap { border-color: var(--cet-line); }
.legal-intro, .legal-form-wrap { background: var(--cet-soft); }