/*
Theme Name: Credilink Redesign Theme
Theme URI: https://credilink.ro
Author: Credilink Team
Description: Ultra-premium conversion-oriented WordPress theme for Credilink.ro redesign, featuring modern responsive mobile drawer, dynamic Gutenberg blocks, Consent Mode v2, and Next.js calculator embed.
Version: 5.49.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: credilink
*/

:root {
  /* Brand Palette */
  --cl-color-paprika: #C80C3A;
  --cl-color-paprika-dark: #7A0823;
  --cl-color-paprika-glow: rgba(200, 12, 58, 0.25);
  --cl-color-selective-yellow: #FBBA00;
  --cl-color-selective-yellow-hover: #E0A700;
  --cl-color-selective-yellow-glow: rgba(251, 186, 0, 0.4);
  --cl-color-black: #0A0B10;
  --cl-color-white: #FFFFFF;
  --cl-color-border: #E0E5EF;
  --cl-color-border-glow: rgba(200, 12, 58, 0.12);
  --cl-color-bg: #F8F9FD;
  --cl-color-text-body: #1E202C;
  --cl-color-text-muted: #64748B;

  /* Glassmorphism & Shadows */
  --cl-glass-bg: rgba(255, 255, 255, 0.85);
  --cl-glass-border: 1px solid rgba(255, 255, 255, 0.6);
  --cl-shadow-sm: 0 4px 12px rgba(10, 11, 16, 0.03);
  --cl-shadow-md: 0 10px 25px -5px rgba(200, 12, 58, 0.08), 0 8px 10px -6px rgba(10, 11, 16, 0.04);
  --cl-shadow-lg: 0 20px 40px -15px rgba(200, 12, 58, 0.15), 0 0 30px rgba(251, 186, 0, 0.1);
  --cl-shadow-hover: 0 25px 50px -12px rgba(200, 12, 58, 0.25);

  /* Typography */
  --cl-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--cl-color-bg);
  color: var(--cl-color-text-body);
  font-family: var(--cl-font-family);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html {
  scroll-padding-top: 96px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  color: var(--cl-color-black);
  margin-top: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

a {
  color: var(--cl-color-paprika);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
  color: var(--cl-color-paprika-dark);
}

/* Premium Gradient Backgrounds */
.cl-bg-mesh {
  background: 
    radial-gradient(circle at 10% 20%, rgba(251, 186, 0, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(200, 12, 58, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #F8F9FD 0%, #FFFFFF 100%);
}

.cl-bg-dark-mesh {
  background: 
    radial-gradient(circle at 80% 20%, rgba(251, 186, 0, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(200, 12, 58, 0.25) 0%, transparent 50%),
    linear-gradient(135deg, #0A0B10 0%, #170308 100%);
  color: #FFFFFF;
}

/* Ultra-Slick CTA Button ("Aplică") */
.btn-aplica,
.wp-block-button__link.btn-aplica {
  background: linear-gradient(135deg, #FBBA00 0%, #F5AB00 100%) !important;
  color: #0A0B10 !important;
  font-family: var(--cl-font-family);
  font-weight: 800 !important;
  font-size: 1.125rem !important;
  padding: 0.95rem 2.25rem !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--cl-color-selective-yellow-glow);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
}

.btn-aplica::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(45deg) translateY(-100%);
  transition: transform 0.6s ease;
}

.btn-aplica:hover::after {
  transform: rotate(45deg) translateY(100%);
}

.btn-aplica:hover,
.wp-block-button__link.btn-aplica:hover {
  background: linear-gradient(135deg, #FFC72C 0%, #FBBA00 100%) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(251, 186, 0, 0.55);
  color: #0A0B10 !important;
}

.btn-aplica-pulse {
  animation: aplicaPulse 2s infinite ease-in-out;
}

@keyframes aplicaPulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 186, 0, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(251, 186, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 186, 0, 0); }
}

/* Secondary Button ("Intră în cont") */
.btn-secondary-login {
  background: rgba(255, 255, 255, 0.9);
  color: var(--cl-color-black);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid var(--cl-color-border);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}

.btn-secondary-login:hover {
  background: #FFFFFF;
  border-color: var(--cl-color-paprika);
  color: var(--cl-color-paprika);
  transform: translateY(-2px);
  box-shadow: var(--cl-shadow-sm);
}

/* Glassmorphic Floating Card */
.cl-glass-card {
  background: var(--cl-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(224, 229, 239, 0.8);
  border-radius: 1.75rem;
  padding: 2.25rem;
  box-shadow: var(--cl-shadow-md);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-glass-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cl-shadow-lg);
  border-color: var(--cl-color-border-glow);
}

/* Interactive Calculator Container */
/* WIDTH.
   On the homepage the card sits in a grid column and is already about 530px
   wide. On the 26 product pages it sits in the content flow, where it stretched
   to the full 1200px — a simulator with two sliders and four figures spread
   over that width reads as an empty table rather than a control.
   Capped and centred from the tablet breakpoint up: roughly half the viewport,
   with a ceiling so it does not keep growing on a wide monitor. The homepage
   column is narrower than the ceiling, so nothing changes there. */
.credilink-calculator-card {
  margin-left: auto;
  margin-right: auto;
  background: #FFFFFF;
  border: 1px solid rgba(200, 12, 58, 0.15);
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: 0 20px 50px -10px rgba(200, 12, 58, 0.12), 0 10px 20px -5px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

@media (min-width: 769px) {
  .credilink-calculator-card {
    max-width: min(50vw, 640px);
  }
}

.credilink-calculator-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #C80C3A 0%, #FBBA00 100%);
}

/* ==========================================================================
   HEADER LAYOUT
   ==========================================================================

   The header holds a logo, four nav items with long Romanian labels
   ("Întrebări Frecvente (FAQ)"), a phone number and the CTA. That needs roughly
   1200px; the hamburger only appeared below 768px, so every width in between
   wrapped the row onto two and three lines.

   Two fixes, together:
     1. nothing in the header may wrap — a header that reflows is never right,
        it just fails more quietly at some widths than others;
     2. the switch to the drawer happens when the row genuinely stops fitting
        (1180px), not at an arbitrary phone width. That also covers tablets in
        portrait, which is what the brief asks for.

   Type is one step down from the body scale too: a header is navigation, not
   content, and at 16px these labels were both too large and too wide. */

.cl-header .cl-container {
  gap: 1.25rem;
}

/* THE SELECTOR HAS TO COVER BOTH RENDERINGS.
   credilink_nav_menu() emits a wp_nav_menu when a menu is assigned, and bare
   <a> elements when one is not. These rules used to target `.cl-menu a` only,
   so on an install with no menu assigned — which is every fresh install, and
   was the sandbox — the header got no nowrap and no type scale, and the items
   wrapped onto a second line. `.cl-main-nav a` matches both. */
.cl-main-nav,
.cl-main-nav .cl-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cl-main-nav a,
.cl-header-actions .cl-support-phone,
.cl-header-actions .btn-aplica {
  white-space: nowrap;
}

.cl-main-nav a {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0A0B10;
  text-decoration: none;
  line-height: 1.2;
}

.cl-main-nav a:hover,
.cl-main-nav a:focus-visible {
  color: var(--cl-color-paprika);
}

/* Between the drawer breakpoint and a comfortable desktop there is a band where
   five items, a phone number and a CTA are tight but still preferable to
   hiding half the navigation. Tighten the row rather than dropping items. */
@media (max-width: 1320px) {
  .cl-main-nav,
  .cl-main-nav .cl-menu {
    gap: 1.125rem;
  }

  .cl-main-nav a {
    font-size: 0.875rem;
  }

  .cl-header .cl-container {
    gap: 0.875rem;
  }
}

.cl-header-actions .cl-support-phone {
  /* 1rem: one step up from 0.875rem at Credilink's request (2026-09-29).
     The two schedule lines under it keep their own 0.6875rem. */
  font-size: 1rem !important;
}

/* The header CTA inherits the hero button: 1.125rem type with 2.25rem padding
   dominates a navigation row. */
.cl-header .btn-aplica {
  font-size: 0.9375rem !important;
  padding: 0.6rem 1.5rem !important;
}

@media (max-width: 1180px) {
  .cl-main-nav,
  .cl-header-actions .cl-support-phone,
  .cl-header-actions .btn-secondary-login,
  .cl-header-actions .btn-aplica {
    display: none !important;
  }

  .cl-mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   STEP CARDS (Pasul 1 / 2 / 3)
   ==========================================================================

   The cards were already equal height — grid items stretch by default. What did
   not line up was the BUTTON inside them: step 1's copy runs to four lines and
   the others to three, so each CTA sat wherever its paragraph happened to end.

   Making the card a flex column and giving the button `margin-top:auto` pins
   every CTA to the bottom edge regardless of how much text sits above it. That
   keeps the copy — deleting a sentence to force alignment fixes the symptom at
   the cost of the content, and would break again the moment anyone edits it. */

#process-section .cl-glass-card {
  display: flex;
  flex-direction: column;
}

/* Flex blockifies its children, so the "PASUL 1" pill — display:inline-block —
   became a block and stretched to the full card width. Headings and paragraphs
   SHOULD stretch, so this is scoped to the pill rather than turned off for the
   whole card via align-items. (The absolutely-positioned "01" is also a div but
   is out of flow, so align-self is a no-op for it.) */
#process-section .cl-glass-card > div {
  align-self: flex-start;
}

#process-section .cl-glass-card > p {
  flex-grow: 1;          /* absorb the slack so cards of any copy length match */
}

#process-section .cl-glass-card > .btn-aplica {
  margin-top: auto;
}

/* ==========================================================================
   BRAND LOGO
   ==========================================================================

   The logo SVGs are INLINED (file_get_contents in header.php / footer.php) so
   they inherit no intrinsic size: both files carry a viewBox and no width or
   height. With no rule for .cl-brand-logo either, the header logo — a flex item
   — collapsed to zero and the logo simply did not appear.

   Sizing by HEIGHT with width:auto keeps the 461x116 aspect ratio intact at any
   breakpoint, which matters for a wordmark. Two variants exist and both are
   correct as assigned: logoW carries a white plate for the light header,
   logoB a dark one for the #0A0B10 footer. */

.cl-brand-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;          /* never let the flex header squeeze it away */
  line-height: 0;          /* kill the inline-descender gap under the svg */
}

.cl-brand-logo svg {
  height: 2.25rem;
  width: auto;
  display: block;
}

.cl-footer .cl-brand-logo svg {
  height: 2.5rem;
}

/* THE HEADER MARK IS THE LARGER OF THE TWO.
   It was the smaller: 2.25rem against the footer's 2.5rem on desktop, and
   1.875rem against 2.5rem on a phone — 75% of the size of a logo sitting at the
   bottom of the page. The header is where the brand is read first.
   Set to 2.75rem, 110% of the footer's 2.5rem, as Credilink asked.
   Scoped to .cl-header so it beats the max-width:640px rule below, which is a
   media query and therefore adds no specificity of its own — one declaration
   covers both mobile and desktop rather than two that can drift apart. */
.cl-header .cl-brand-logo svg {
  height: 2.75rem;
}

@media (max-width: 640px) {
  .cl-brand-logo svg {
    height: 1.875rem;
  }
}

/* ==========================================================================
   CALCULATOR
   ========================================================================== */

.cl-calc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 2rem;
  margin-bottom: 0.875rem;
}

.cl-calc-pill {
  background: rgba(200, 12, 58, 0.08);
  color: var(--cl-color-paprika);
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 0.4rem 0.875rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cl-calc-title {
  font-size: 1.375rem;
  margin-bottom: 1rem;
  color: var(--cl-color-black);
  /* Centred to match the two value boxes below it, which are centred already.
     With the product-name pill removed this is now the card's first element,
     so a left-aligned heading over centred content read as a misalignment. */
  text-align: center;
}

.cl-calc-value-box {
  background: var(--cl-color-bg);
  border: 1px solid var(--cl-color-border);
  border-radius: 1.25rem;
  padding: 0.875rem 1.125rem;
  margin-bottom: 0.75rem;
  text-align: center;
}

.cl-calc-value-label {
  font-size: 0.75rem;
  color: var(--cl-color-text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.1rem;
}

.cl-calc-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--cl-color-paprika);
  line-height: 1.1;
  /* Reserved so filling the value in from the engine cannot shift layout. */
  min-height: 2.75rem;
  font-variant-numeric: tabular-nums;
}

.cl-calc-unit {
  font-size: 1.25rem;
  color: var(--cl-color-black);
}

.cl-calc-slider-row {
  margin-bottom: 1rem;
}

.cl-calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cl-color-text-muted);
  margin-top: 0.375rem;
}

/* Range input.
   The filled portion is driven by --cl-range-pct, set from JS, so the track
   gradient does not have to be rewritten as an inline background on every
   input event. Both vendor track pseudo-elements need the rule: they cannot
   be combined in one selector list (an unknown pseudo-element invalidates the
   whole rule in every browser). */
.cl-calc-range {
  --cl-range-pct: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  display: block;
  margin: 0;
}

.cl-calc-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    var(--cl-color-selective-yellow) 0%,
    var(--cl-color-paprika) var(--cl-range-pct),
    var(--cl-color-border) var(--cl-range-pct),
    var(--cl-color-border) 100%
  );
}

.cl-calc-range::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    var(--cl-color-selective-yellow) 0%,
    var(--cl-color-paprika) var(--cl-range-pct),
    var(--cl-color-border) var(--cl-range-pct),
    var(--cl-color-border) 100%
  );
}

.cl-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cl-color-paprika);
  border: 4px solid var(--cl-color-selective-yellow);
  box-shadow: 0 4px 10px rgba(200, 12, 58, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease;
  /* Centres a 28px thumb on a 10px track: (10 - 28) / 2 */
  margin-top: -9px;
}

.cl-calc-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cl-color-paprika);
  border: 4px solid var(--cl-color-selective-yellow);
  box-shadow: 0 4px 10px rgba(200, 12, 58, 0.4);
  cursor: pointer;
}

.cl-calc-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.cl-calc-range:focus-visible {
  outline: 2px solid var(--cl-color-paprika);
  outline-offset: 4px;
}

.cl-calc-costs {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--cl-color-border);
  border-radius: 1.25rem;
  padding: 1rem;
  margin-bottom: 1.125rem;
  font-size: 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cl-calc-costs[hidden] {
  display: none;
}

.cl-calc-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.cl-calc-cost-row span {
  color: var(--cl-color-text-muted);
}

.cl-calc-cost-row strong {
  color: var(--cl-color-black);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The minimum payment is the figure this card is about — it outranks the
   supporting rows below it. */
.cl-calc-cost-headline span {
  color: var(--cl-color-black);
  font-weight: 700;
}

.cl-calc-cost-headline strong {
  color: var(--cl-color-paprika);
  font-size: 1.375rem;
}

.cl-calc-cost-total {
  border-top: 1px dashed var(--cl-color-border);
  padding-top: 0.625rem;
}

.cl-calc-cost-total span {
  color: var(--cl-color-black);
  font-weight: 700;
}

.cl-calc-cost-total strong {
  color: var(--cl-color-paprika);
  font-size: 1.125rem;
}

.cl-calc-cta {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.125rem !important;
  padding: 0.95rem 1.5rem !important;
  /* The label carries the amount, so it must be free to wrap on narrow
     screens rather than overflow the card. */
  text-align: center;
  white-space: normal;
}

.cl-calc-example {
  margin-top: 0.875rem;
  margin-bottom: 0;
  text-align: center;
}

.cl-calc-example:empty {
  display: none;
}

/* DESKTOP: A TIGHTER CARD. The phone card (compacted in the 768px block
   below) reads well; the desktop one was set with looser gaps and larger
   figures and came out tall next to the hero text. Credilink asked for
   roughly 15-20% less height on desktop. The height comes from the padding
   and the gaps between blocks, plus one step down on the two big figures;
   the slider hit area and the regulatory text keep their size. */
@media (min-width: 769px) {
  .credilink-calculator-card {
    padding: 1.5rem 1.75rem;
  }
  .cl-calc-title {
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
  }
  .cl-calc-value-box {
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
  }
  .cl-calc-value-label {
    margin-bottom: 0;
  }
  .cl-calc-value {
    font-size: 2.125rem;
    min-height: 2.35rem;
  }
  .cl-calc-unit {
    font-size: 1.125rem;
  }
  .cl-calc-slider-row {
    margin-bottom: 0.625rem;
  }
  .cl-calc-scale {
    margin-top: 0.125rem;
  }
  .cl-calc-costs {
    padding: 0.75rem 1rem;
    gap: 0.4rem;
    margin-bottom: 0.875rem;
  }
  .cl-calc-cost-headline strong {
    font-size: 1.25rem;
  }
  .cl-calc-cost-total {
    padding-top: 0.4rem;
  }
  .cl-calc-cta {
    padding: 0.8rem 1.5rem !important;
  }
  .cl-calc-example {
    margin-top: 0.625rem;
  }
}

/* Accessible label text for the sliders. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Accordion Smooth Styling */
details.cl-faq-item {
  background: #FFFFFF;
  border: 1px solid var(--cl-color-border);
  border-radius: 1.25rem;
  padding: 1.25rem 1.75rem;
  transition: all 0.3s ease;
  box-shadow: var(--cl-shadow-sm);
}

details.cl-faq-item[open] {
  border-color: var(--cl-color-paprika);
  box-shadow: var(--cl-shadow-md);
  background: #FFFFFF;
}

details.cl-faq-item summary {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--cl-color-black);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details.cl-faq-item summary::-webkit-details-marker {
  display: none;
}

/* Category Pill Chips */
.cl-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #FFFFFF;
  border: 1px solid var(--cl-color-border);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cl-color-text-body);
  transition: all 0.25s ease;
}

.cl-category-chip:hover {
  border-color: var(--cl-color-paprika);
  color: var(--cl-color-paprika);
  background: rgba(200, 12, 58, 0.03);
  transform: translateY(-2px);
}

/* Regulatory Text (Manrope ExtraLight 200/300) */
.cl-regulatory-text {
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cl-color-text-muted);
}

/* ==========================================================================
   MOBILE RESPONSIVE & POP-UP DRAWER STYLES
   ========================================================================== */

/* Hamburger Button (Hidden on Desktop) */
.cl-mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--cl-color-black);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

/* Mobile Slide-Over Pop-Up Drawer */
.cl-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 11, 16, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-mobile-drawer.is-active {
  opacity: 1;
  visibility: visible;
}

.cl-mobile-drawer-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 360px;
  background: #FFFFFF;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-mobile-drawer.is-active .cl-mobile-drawer-content {
  transform: translateX(0);
}

/* Persona Switcher Container */
.cl-persona-switcher-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 3.5rem;
}

.cl-persona-switcher {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--cl-color-border);
  border-radius: 9999px;
  padding: 0.35rem;
  display: inline-flex;
  gap: 0.5rem;
  box-shadow: var(--cl-shadow-sm);
  backdrop-filter: blur(10px);
}

.cl-persona-btn-nou {
  background: var(--cl-color-paprika);
  color: #FFFFFF;
  border: none;
  padding: 0.65rem 1.85rem;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 0.9375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(200, 12, 58, 0.3);
  white-space: nowrap;
}

.cl-persona-btn-existent {
  background: transparent;
  color: var(--cl-color-black);
  border: none;
  padding: 0.65rem 1.85rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
}

/* HERO BENEFIT SLIDER */
.cl-hero-slider-container {
  position: relative;
  min-height: 240px;
}

/* The page's single, fixed H1 (the live homepage H1). Small by design: the
   rotating titles below carry the visual weight, as before. */
.cl-hero-section h1.cl-hero-h1 {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

/* The rotating titles are no longer headings; keep their spacing identical. */
.cl-hero-slide-title {
  margin-top: 0;
}

/* Pause / play button beside the dots. */
.cl-hero-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 0.5rem;
  border: 1px solid #E0E5EF;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #475569;
  cursor: pointer;
}
.cl-hero-pause svg { fill: currentColor; }
.cl-hero-pause:focus-visible { outline: 2px solid var(--cl-color-paprika); outline-offset: 2px; }
.cl-hero-pause .cl-hero-play-icon { display: none; }
.cl-hero-pause[aria-pressed="true"] .cl-hero-play-icon { display: inline; }
.cl-hero-pause[aria-pressed="true"] .cl-hero-pause-icon { display: none; }

.cl-hero-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.cl-hero-slide.is-active {
  display: block;
  opacity: 1;
}

.cl-hero-slider-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.cl-hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E0E5EF;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cl-hero-dot.is-active {
  width: 32px;
  border-radius: 9999px;
  background: var(--cl-color-paprika);
}

/* ==========================================================================
   INLINE ICONS
   1em square, filled with currentColor — so the `font-size` and `color` the
   markup already carried keep driving them exactly as they did when these were
   Material Symbols ligatures. 1.5rem is the icon font's own default size, kept
   so every unstyled icon lands where it did before.
   ========================================================================== */

.cl-icon {
  width: 1em;
  height: 1em;
  font-size: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  /* Never let a flex parent squash an icon — several sit next to text that
     wraps, and a squashed glyph is worse than an overflowing one. */
  flex-shrink: 0;
}

/* Rotate the FAQ chevron when the entry is open. The ligature font had no way
   to express this, so the arrow used to point down on an open item. */
details.cl-faq-item .cl-icon {
  transition: transform 0.25s ease;
}

details.cl-faq-item[open] .cl-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   NAV MENUS
   wp_nav_menu emits <ul>/<li>; the fallback emits bare <a>. Both are styled
   here so assigning a menu in Appearance > Menus changes nothing visually.
   ========================================================================== */

.cl-main-nav .cl-menu {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cl-main-nav .cl-menu a {
  font-weight: 700;
  color: var(--cl-color-black);
}

.cl-main-nav .cl-menu a:hover,
.cl-main-nav > a:hover {
  color: var(--cl-color-paprika);
}

.cl-mobile-nav .cl-menu {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cl-mobile-nav .cl-menu a {
  display: block;
  color: var(--cl-color-black);
  border-bottom: 1px solid var(--cl-color-bg);
  padding-bottom: 0.75rem;
}

.cl-footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.cl-footer-menu a {
  color: var(--cl-color-border);
}

.cl-footer-menu a:hover {
  color: var(--cl-color-selective-yellow);
}

/* ==========================================================================
   GOVERNED BLOCK PATTERNS
   Sections Marketing composes pages from. The styling lives here rather than
   in the pattern markup precisely so it CANNOT be edited from the page — that
   is what keeps the mobile layout intact (brief §6).
   ========================================================================== */

.cl-section {
  padding: 4rem 1.5rem;
}

.cl-section-hero {
  background:
    radial-gradient(circle at 10% 20%, rgba(251, 186, 0, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(200, 12, 58, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #F8F9FD 0%, #FFFFFF 100%);
}

.cl-section-trust,
.cl-section-faq {
  background: var(--cl-color-white);
}

.cl-section-process {
  background: var(--cl-color-bg);
}

.cl-hero-title {
  font-size: 2.85rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

.cl-hero-lead {
  font-size: 1.15rem;
  color: #475569;
  line-height: 1.6;
}

.cl-hero-checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.cl-hero-checklist li {
  position: relative;
  padding-left: 1.75rem;
  font-weight: 700;
}

.cl-hero-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cl-color-paprika);
  font-weight: 800;
}

.cl-trust-strip .wp-block-column,
.cl-process-steps .wp-block-column {
  background: var(--cl-glass-bg);
  border: 1px solid rgba(224, 229, 239, 0.8);
  border-radius: 1.75rem;
  padding: 1.75rem;
  box-shadow: var(--cl-shadow-md);
}

.cl-trust-strip h4,
.cl-process-steps h3 {
  margin: 0 0 0.5rem 0;
}

.cl-trust-strip p,
.cl-process-steps p {
  margin: 0;
  color: var(--cl-color-text-muted);
  font-size: 0.9375rem;
}

.cl-step-badge {
  display: inline-block;
  background: var(--cl-color-paprika);
  color: var(--cl-color-white) !important;
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cl-section-banner {
  background: var(--cl-color-bg);
  border-top: 1px solid var(--cl-color-border);
  border-bottom: 1px solid var(--cl-color-border);
  text-align: center;
}

.cl-banner-title {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

/* Full-width CTA when a pattern asks for it. */
.cl-cta-block {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .cl-section {
    padding: 3rem 1.25rem;
  }

  .cl-hero-title {
    font-size: 2rem;
  }

  .cl-banner-title {
    font-size: 1.5rem;
  }

  /* Columns stack; the core stylesheet keeps them side by side below 782px
     in some configurations, which is what breaks these cards on a phone. */
  .cl-trust-strip.wp-block-columns,
  .cl-process-steps.wp-block-columns {
    flex-direction: column;
  }

  .cl-trust-strip .wp-block-column,
  .cl-process-steps .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ==========================================================================
   CREDIT PRODUCT LISTINGS
   The /credite/ pages carry the site's organic traffic. These grids are what
   makes them crawlable from everywhere, so they appear on the hub, on each
   product page, in the footer and low on the homepage.
   ========================================================================== */

.cl-product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Compact: a dense chip list for the homepage strip and the amount pages. */
.cl-product-grid-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.cl-product-grid-compact a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--cl-color-white);
  border: 1px solid var(--cl-color-border);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cl-color-text-body);
  transition: all 0.2s ease;
}

.cl-product-grid-compact a:hover {
  border-color: var(--cl-color-paprika);
  color: var(--cl-color-paprika);
  transform: translateY(-2px);
}

/* Cards: the hub's themed section, where the summary earns its space.
   The cards used to overlap: each link was height:100% of its cell PLUS its
   padding and border (content-box), so every card spilled into the row
   below. border-box keeps the card inside its cell, and the cell's own flex
   stretch gives every card in a row the same height. */
.cl-product-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.cl-product-grid-cards > li {
  display: flex;
}

.cl-product-grid-cards a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--cl-color-white);
  border: 1px solid var(--cl-color-border);
  border-radius: 1.25rem;
  box-shadow: var(--cl-shadow-sm);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* "Află mai mult" pinned to the bottom of each card, so the row reads level. */
.cl-product-grid-cards a::after {
  content: 'Află mai mult →';
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--cl-color-paprika);
}

.cl-product-grid-cards a:hover {
  border-color: var(--cl-color-paprika);
  box-shadow: var(--cl-shadow-md);
  transform: translateY(-3px);
}

.cl-product-grid-cards .cl-product-name {
  display: block;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--cl-color-black);
}

.cl-product-grid-cards .cl-product-summary {
  display: block;
  font-size: 0.875rem;
  color: var(--cl-color-text-muted);
  line-height: 1.5;
}

/* Related: a simple two-column list at the foot of a product page. */
.cl-product-grid-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 1.5rem;
}

.cl-product-grid-related a {
  display: block;
  padding: 0.5rem 0;
  font-weight: 700;
  border-bottom: 1px solid var(--cl-color-border);
}

/* Footer: inherits the dark surface, so colours are set explicitly. */
.cl-product-grid-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.cl-product-grid-footer a {
  color: var(--cl-color-border);
}

/* Full product list in the footer: columns instead of one long column. */
.cl-product-grid-footer--all {
  display: block;
  columns: 4 220px;
  column-gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}

.cl-product-grid-footer--all li {
  break-inside: avoid;
  margin-bottom: 0.625rem;
}

.cl-product-grid-footer a:hover {
  color: var(--cl-color-selective-yellow);
}

.cl-section-related {
  background: var(--cl-color-bg);
  border-top: 1px solid var(--cl-color-border);
}

.cl-section-related h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.cl-product-all-link {
  margin-top: 1.5rem;
  font-weight: 700;
}

.cl-product-main .cl-container,
.cl-section > .cl-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Sticky mobile CTA. Desktop keeps the header button, so this is mobile-only. */
.cl-sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .cl-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--cl-color-border);
  }

  .cl-sticky-cta .btn-aplica {
    width: 100%;
    box-sizing: border-box;
    /* No pulse here: a permanently animating fixed element on screen for the
       whole session is distracting and burns battery. */
    animation: none;
  }

  /* ONE "APLICĂ" PER SCREEN.
     With the bar pinned to the bottom, every other apply button on the page is
     a duplicate of a control the visitor can already see — the hero's, the
     calculator's, the campaign banner's, the ones inside patterns. Five
     identical buttons and a sixth stuck to the viewport is a page where none of
     them reads as the next step, so below the drawer breakpoint they all go and
     the sticky one carries the action.
     Hidden rather than removed server-side because the same markup serves the
     desktop layout, where these buttons are the primary call to action. And
     because the bar is rendered by footer.php rather than by script, a phone
     is never left without one. */
  /* EXCEPT ON THE PPC LANDING, which deliberately has no sticky bar -- a
     second fixed CTA would sit on top of its form (see footer.php). Hiding its
     buttons as well would leave a paid landing page with no way to apply at
     all, on the pages whose entire purpose is conversion. */
  body:not(.page-template-template-ppc-landing) .btn-aplica {
    display: none !important;
  }

  /* MATCHED SPECIFICITY, DELIBERATELY.
     The hide rule above is body:not(...) .btn-aplica — (0,2,1). This one was
     .cl-sticky-cta .btn-aplica — (0,2,0). Both carry !important, so the more
     specific selector won and the sticky bar was hidden along with everything
     else: on a phone the page had no apply button at all. Carrying the same
     body:not(...) prefix puts this at (0,3,1) and back in front.
     !important on both is why this needed thinking about rather than noticing:
     it makes the two rules look equal when they are not. */
  body:not(.page-template-template-ppc-landing) .cl-sticky-cta .btn-aplica {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  /* Clear the bar so it never covers the last of the page (footer legal text,
     the calculator CTA) and never sits on top of the drawer. */
  body {
    padding-bottom: 5.5rem;
  }

  .cl-mobile-drawer {
    z-index: 2000;
  }
}

/* Responsive Media Queries (@media max-width 768px) */
@media (max-width: 768px) {
  /* Header adjustments */
  .cl-main-nav,
  .cl-header-actions .cl-support-phone,
  .cl-header-actions .btn-secondary-login,
  .cl-header-actions .btn-aplica {
    display: none !important;
  }

  .cl-mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Compact Dual Persona Switcher on Mobile */
  .cl-persona-switcher-wrapper {
    margin-bottom: 2rem !important;
    width: 100%;
  }

  .cl-persona-switcher {
    border-radius: 1rem !important;
    padding: 0.25rem !important;
    gap: 0.25rem !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
  }

  .cl-persona-btn-nou,
  .cl-persona-btn-existent {
    padding: 0.6rem 0.5rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.75rem !important;
    flex: 1;
    justify-content: center;
    min-width: 0;             /* let flex actually shrink these */
    gap: 0.35rem !important;
  }

  /* The qualifier goes, the choice stays. "(Până la 10.000 RON)" is already on
     the calculator and "(Intră în Cont)" restates the button, so neither earns
     its width here — together they were most of the row and what pushed the
     control off screen. Dropping them lets the type go UP from 0.75rem, which
     was too small to be a comfortable tap target label. */
  .cl-persona-detail {
    display: none;
  }

  .cl-persona-btn-nou .material-symbols-outlined,
  .cl-persona-btn-existent .material-symbols-outlined {
    font-size: 1rem !important;
  }

  /* Hero adjustments */
  h1 {
    font-size: 2.125rem !important;
  }

  /* Same size the slide titles had as <h1>s on phones. */
  .cl-hero-slide-title {
    font-size: 2.125rem !important;
  }

  /* The fixed H1 stays a small line on phones too. */
  .cl-hero-section h1.cl-hero-h1 {
    font-size: 0.9375rem !important;
  }

  /* A full 44px tap target on touch screens. */
  .cl-hero-pause {
    width: 44px;
    height: 44px;
  }

  .credilink-calculator-card {
    padding: 1rem !important;
    border-radius: 1.5rem !important;
  }

  /* COMPACTED FOR ONE SCREEN.
     Credilink's note was that the card does not fit a phone in a single view,
     and it did not: the stack came to roughly 780px before the sticky header
     and the section padding are counted, against about 553px of usable height
     on a 667px-tall phone.
     Nothing is removed and no figure shrinks below legibility -- the height
     came out of the gaps between blocks, which were set for a desktop card and
     carried straight down to mobile. The two things deliberately NOT touched
     are the 44px slider hit areas and the regulatory example's font size. */

  /* The product pill does not need a row of its own on a phone. */
  .cl-calc-head {
    min-height: 0;
    margin-bottom: 0.5rem;
  }

  .cl-calc-pill {
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
  }

  /* Calculator on small screens: the card has to fit a 320px-wide viewport
     with the page gutter, so the large display figures come down a step and
     the boxes lose their side padding rather than the card scrolling. */
  .cl-calc-value {
    font-size: 1.875rem;
    min-height: 2.0625rem;
  }

  .cl-calc-unit {
    font-size: 1.0625rem;
  }

  .cl-calc-value-box {
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.625rem;
  }

  .cl-calc-value-label {
    margin-bottom: 0;
  }

  .cl-calc-slider-row {
    margin-bottom: 0.75rem;
  }

  .cl-calc-scale {
    margin-top: 0.25rem;
  }

  .cl-calc-title {
    font-size: 1.125rem;
    margin-bottom: 0.625rem;
  }

  .cl-calc-costs {
    padding: 0.75rem;
    font-size: 0.875rem;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  /* Still the biggest figure in the box, just a step down. */
  .cl-calc-cost-headline strong {
    font-size: 1.25rem;
  }

  .cl-calc-cost-total {
    padding-top: 0.5rem;
  }

  /* Label and figure stack instead of colliding when the label wraps. */
  .cl-calc-cost-row {
    gap: 0.5rem;
  }

  .cl-calc-cta {
    font-size: 1rem !important;
    padding: 0.875rem 1rem !important;
  }

  /* Sits just under the CTA; the text stays at its own size, only the
     leading and the gap above it come in. */
  .cl-calc-example {
    margin-top: 0.75rem;
    line-height: 1.45;
  }

  /* Thumb-sized targets: the track thins but the hit area stays 44px. */
  .cl-calc-range {
    height: 44px;
  }

  .cl-calc-range::-webkit-slider-thumb {
    width: 32px;
    height: 32px;
    margin-top: -11px;
  }
}

/* ==========================================================================
   Blog: the article index and the single article.

   Both templates are new. /blog previously rendered the homepage (is_home()
   matched index.php's first branch) and an article rendered its body with no
   H1, because the migrated content does not carry one — the live site puts the
   title outside the rich-text area.
   ========================================================================== */

.cl-breadcrumbs {
  font-size: 0.875rem;
  color: var(--cl-color-text-muted);
  margin-bottom: 1.5rem;
}

.cl-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
}

.cl-breadcrumbs li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: var(--cl-color-border);
}

.cl-breadcrumbs a {
  color: var(--cl-color-text-muted);
  text-decoration: none;
}

.cl-breadcrumbs a:hover,
.cl-breadcrumbs a:focus-visible {
  color: var(--cl-color-paprika);
  text-decoration: underline;
}

/* Above a product page's own hero: just the strip, the hero keeps its spacing. */
.cl-breadcrumbs-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 0;
}

.cl-breadcrumbs-bar .cl-breadcrumbs {
  margin-bottom: 0;
}

.cl-breadcrumbs [aria-current='page'] {
  color: var(--cl-color-black);
  font-weight: 700;
}

.cl-article-container,
.cl-blog-container {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

/* Running text, not a layout container: capped near 70 characters because a
   1200px-wide line of body copy is unreadable regardless of how good it is. */
.cl-article,
.cl-blog-header,
.cl-blog-list {
  max-width: 44rem;
}

.cl-article-title {
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0 0 1.5rem;
  color: var(--cl-color-black);
  text-wrap: balance;
}

.cl-article-body > * + * {
  margin-top: 1.1rem;
}

.cl-article-body h2 {
  font-size: 1.5rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.cl-article-body h3 {
  font-size: 1.1875rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.cl-article-body ul,
.cl-article-body ol {
  padding-left: 1.25rem;
}

.cl-article-body li + li {
  margin-top: 0.35rem;
}

.cl-article-body a {
  color: var(--cl-color-paprika);
}

.cl-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.cl-article-more {
  max-width: 44rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cl-color-border);
}

.cl-article-more h2 {
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

.cl-article-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cl-article-more-list a,
.cl-article-all-link a,
.cl-blog-card-link {
  color: var(--cl-color-paprika);
  font-weight: 700;
  text-decoration: none;
}

.cl-article-more-list a:hover,
.cl-article-all-link a:hover,
.cl-blog-card-link:hover {
  text-decoration: underline;
}

.cl-blog-title {
  font-size: 2.25rem;
  margin: 0 0 0.75rem;
  color: var(--cl-color-black);
}

.cl-blog-intro {
  color: var(--cl-color-text-muted);
  margin-bottom: 2rem;
}

.cl-blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cl-blog-card {
  border: 1px solid var(--cl-color-border);
  border-radius: 1rem;
  padding: 1.5rem;
  background: #FFFFFF;
}

.cl-blog-card-title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 0.625rem;
}

.cl-blog-card-title a {
  color: var(--cl-color-black);
  text-decoration: none;
}

.cl-blog-card-title a:hover {
  color: var(--cl-color-paprika);
}

.cl-blog-card-excerpt {
  color: var(--cl-color-text-muted);
  margin: 0 0 0.875rem;
}

.cl-blog-pagination {
  margin-top: 2.5rem;
}

.cl-blog-pagination .page-numbers {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  margin-right: 0.35rem;
  border: 1px solid var(--cl-color-border);
  border-radius: 0.5rem;
  color: var(--cl-color-black);
  text-decoration: none;
}

.cl-blog-pagination .page-numbers.current {
  background: var(--cl-color-paprika);
  border-color: var(--cl-color-paprika);
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .cl-article-container,
  .cl-blog-container {
    margin: 1.75rem auto;
    padding: 0 1rem;
  }

  .cl-article-title,
  .cl-blog-title {
    font-size: 1.625rem;
  }

  .cl-article-body h2 {
    font-size: 1.3125rem;
    margin-top: 1.75rem;
  }

  .cl-blog-card {
    padding: 1.125rem;
  }
}

/* ==========================================================================
   Campaign banner in the hero.

   Two images rather than one scaled: desktop is a 2560x900 band, mobile a
   1080x1350 portrait card. aspect-ratio on each keeps the space reserved
   before the file arrives, so the CTA below does not jump once it loads —
   layout shift on the largest element above the fold is the easiest CLS
   score to lose.
   ========================================================================== */

.cl-campaign-hero {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.cl-campaign-hero-picture {
  display: block;
  width: 100%;
}

.cl-campaign-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  aspect-ratio: 2560 / 900;
  object-fit: cover;
}

.cl-campaign-hero-title {
  font-size: 2.375rem;
  font-weight: 800;
  color: var(--cl-color-black);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

.cl-campaign-hero-text {
  font-size: 1.15rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* The CTA had to be visible in the first scroll on BOTH desktop and mobile,
   which is why it is part of the banner rather than left to the column below:
   a button that scrolls out of view on a phone is a button that is not there. */
.cl-campaign-hero-cta {
  align-self: stretch;
  text-align: center;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .cl-campaign-hero-cta {
    align-self: flex-start;
  }
}

@media (max-width: 768px) {
  .cl-campaign-hero {
    gap: 1rem;
  }

  /* The portrait crop, and only when a mobile image was actually supplied.
     Without one the <picture> falls back to the desktop band, and forcing it
     into 4:5 would crop away whatever sits at its edges. */
  .cl-campaign-hero-picture:has(source) .cl-campaign-hero-image {
    aspect-ratio: 1080 / 1350;
  }

  .cl-campaign-hero-title {
    font-size: 1.75rem;
  }

  .cl-campaign-hero-text {
    font-size: 1rem;
  }
}

/* ==========================================================================
   HERO LAYOUT: campaign band above, slider beside the calculator
   ==========================================================================

   The banner used to live in the left column of the hero grid and REPLACE the
   text slider. Two things were wrong with that.

   It was shown at the wrong size. The column is (1200 - 56) / 2 = 572px, so a
   2560x900 asset rendered 572x201 -- a poster displayed as a thumbnail, with
   its campaign fine print unreadable. Full width it renders 1200x422 and the
   source is a sensible ~2.1x for retina.

   And it cost us the product message. Every month a campaign ran, "two hours,
   no payslip, no branch" disappeared from the homepage. Now both are present.

   MOBILE IS DELIBERATELY ABSENT FROM THIS BLOCK. The DOM is written in mobile
   order -- pills, band, calculator -- so phones need no rules at all and
   cannot regress. Everything below is min-width:769px. The single exception is
   hiding the slider on mobile when a banner is present, which is what keeps
   the phone layout byte-identical to what shipped.
   ========================================================================== */

@media (min-width: 769px) {
  .cl-hero-container {
    display: flex;
    flex-direction: column;
  }

  /* Desktop order, overriding the mobile-first DOM. */
  .cl-campaign-band            { order: 1; margin-bottom: 2rem; }
  .cl-persona-switcher-wrapper { order: 2; }
  .cl-hero-grid                { order: 3; }

  /* Full bleed within the 1200px container. */
  .cl-campaign-band .cl-campaign-hero        { width: 100%; }
  .cl-campaign-band .cl-campaign-hero-picture { width: 100%; }
}

/* On a phone the band keeps its place in normal flow, and the slider stands
   down so the layout matches what was already working: pills, banner,
   calculator. Without this the restored slider would appear on mobile, which
   it never did. */
@media (max-width: 768px) {
  .cl-hero-has-banner .cl-hero-left { display: none; }
}

/* ==========================================================================
   PER-PRODUCT COPY  (inc/product-content.php)
   ==========================================================================
   Twelve product pages render copy supplied by Credilink rather than the
   seeded generic body. The representative example at the foot of each is a
   regulated figure and is styled to read as a disclosure, not as marketing.
   ========================================================================== */

.cl-product-copy {
  max-width: 48rem;          /* ~65 characters; these pages are read, not scanned */
  margin: 0 auto;
}

.cl-product-copy-h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cl-color-black);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 1rem;
  text-wrap: balance;
}

.cl-product-copy-p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #334155;
  margin: 0 0 1.125rem;
}

.cl-product-copy-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cl-product-copy-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #334155;
}

/* The document distinguishes two list kinds - product facts (checks) and
   worked situations (arrows). Keeping them visually distinct preserves that
   distinction; collapsing both to one bullet would read as one long list of
   claims. */
.cl-product-copy-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--cl-color-primary, #C80C3A);
  font-weight: 800;
}

.cl-product-copy-arrow li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: #FBBA00;
  font-weight: 800;
}

/* The disclosure. Quieter than the surrounding copy on purpose: a
   representative example is a legal statement, and dressing it up as a
   promotional panel is how it stops being read as one. */
.cl-product-repex {
  margin: 3rem 0 1rem;
  padding: 1.5rem;
  border: 1px solid #E2E8F0;
  border-left: 3px solid var(--cl-color-primary, #C80C3A);
  border-radius: 0.5rem;
  background: #F8FAFC;
}

.cl-product-repex-title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0A0B10;
  margin: 0 0 0.75rem;
}

.cl-product-repex-figures {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #1E293B;
  margin: 0 0 0.75rem;
}

/* The assumptions sentence. Smaller, but present - it is what makes the DAE
   above it meaningful, and it is the half people are tempted to drop. */
.cl-product-repex-basis {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

@media (max-width: 768px) {
  .cl-product-copy-h2   { font-size: 1.3125rem; margin-top: 2rem; }
  .cl-product-copy-p,
  .cl-product-copy-list li { font-size: 1rem; }
  .cl-product-repex     { padding: 1.25rem; }
}

/* ==========================================================================
   HERO SPACING
   ==========================================================================
   The padding was an inline style on the section, which meant a media query
   could only reach it with !important. Moved here so mobile can simply have
   different values.
   ========================================================================== */

.cl-hero-section {
  padding: 3.5rem 0 5.5rem;
}

@media (max-width: 768px) {
  /* 3.5rem above a pill row, on a phone, reads as an empty screen before
     anything starts. And 5.5rem at the foot sits under a sticky apply bar that
     already occupies that space. */
  .cl-hero-section {
    padding: 1.75rem 0 2.5rem;
  }

  /* THE BAND NEEDS ITS OWN BOTTOM MARGIN NOW.
     While the banner lived inside the hero grid, the grid's 3.5rem gap
     separated it from the calculator. Moving it out to a sibling took that
     with it, and the desktop margin was set inside the min-width:769px block -
     so on a phone the banner and the calculator ended up flush against each
     other. */
  .cl-campaign-band {
    margin-bottom: 2rem;
  }
}


/* ==========================================================================
   Contact page: contact card + form (inc/contact-form.php)
   ========================================================================== */

.cl-contact {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 2rem;
}

.cl-contact-card {
  background: var(--cl-color-white);
  border: 1px solid var(--cl-color-border-glow);
  border-radius: 1.5rem;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--cl-shadow-md);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cl-contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--cl-color-paprika) 0%, var(--cl-color-selective-yellow) 100%);
}

.cl-contact-card-title,
.cl-contact-form-title {
  font-size: 1.25rem;
  margin: 0;
  color: var(--cl-color-black);
}

.cl-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: 1rem;
  background: var(--cl-color-bg);
  border: 1px solid var(--cl-color-border);
  text-decoration: none;
  color: var(--cl-color-text-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cl-contact-item:hover,
.cl-contact-item:focus-visible {
  border-color: var(--cl-color-paprika);
  box-shadow: var(--cl-shadow-sm);
}

.cl-contact-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(200, 12, 58, 0.08);
  color: var(--cl-color-paprika);
  font-size: 1.375rem;
}

.cl-contact-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.cl-contact-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cl-color-text-muted);
}

.cl-contact-value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--cl-color-paprika);
}

/* A long address wraps before the @ (a <wbr> is placed there), not mid-word. */
.cl-contact-email {
  font-size: 1rem;
}

.cl-contact-hours {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cl-color-text-muted);
}

.cl-contact-form-wrap {
  background: var(--cl-color-white);
  border: 1px solid var(--cl-color-border);
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: var(--cl-shadow-sm);
}

.cl-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.cl-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cl-contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cl-contact-field > label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cl-color-black);
}

.cl-contact-optional {
  font-weight: 400;
  color: var(--cl-color-text-muted);
}

.cl-contact-field input[type="text"],
.cl-contact-field input[type="email"],
.cl-contact-field input[type="tel"],
.cl-contact-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--cl-color-border);
  border-radius: 0.75rem;
  background: var(--cl-color-white);
  color: var(--cl-color-text-body);
}

.cl-contact-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.cl-contact-field input:focus-visible,
.cl-contact-field textarea:focus-visible {
  outline: 2px solid var(--cl-color-paprika);
  outline-offset: 1px;
  border-color: var(--cl-color-paprika);
}

.cl-contact-field [aria-invalid="true"] {
  border-color: var(--cl-color-paprika);
}

.cl-contact-consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

.cl-contact-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  accent-color: var(--cl-color-paprika);
}

.cl-contact-consent a {
  color: var(--cl-color-paprika);
}

.cl-contact-error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cl-color-paprika);
}

.cl-contact-notice {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

.cl-contact-notice-ok {
  background: #ECFDF3;
  border: 1px solid #A6E9C1;
  color: #05603A;
}

.cl-contact-notice-err {
  background: rgba(200, 12, 58, 0.06);
  border: 1px solid rgba(200, 12, 58, 0.25);
  color: var(--cl-color-paprika-dark);
}

.cl-contact-submit {
  align-self: flex-start;
  border: 0;
  cursor: pointer;
}

/* The trap field: out of sight for people, present for bots. */
.cl-contact-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .cl-contact {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
  }
  .cl-contact-row {
    grid-template-columns: 1fr;
  }
  .cl-contact-form-wrap,
  .cl-contact-card {
    padding: 1.25rem 1rem;
  }
  .cl-contact-submit {
    align-self: stretch;
    justify-content: center;
  }
}


/* ==========================================================================
   /intrebari-si-raspunsuri: editor-built FAQ cards (core Details blocks).
   The homepage FAQ carries a chevron icon in its markup; a Details block
   cannot, so these draw one in CSS and turn it when the card opens.
   ========================================================================== */

.cl-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0 3rem;
  max-width: 900px;
}

.cl-faq-list details.cl-faq-item summary {
  gap: 1rem;
  line-height: 1.4;
}

.cl-faq-list details.cl-faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.25rem;
  border-right: 2.5px solid var(--cl-color-paprika);
  border-bottom: 2.5px solid var(--cl-color-paprika);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.25s ease;
}

.cl-faq-list details.cl-faq-item[open] summary::after {
  transform: translateY(25%) rotate(-135deg);
}

.cl-faq-list details.cl-faq-item summary:focus-visible {
  outline: 2px solid var(--cl-color-paprika);
  outline-offset: 4px;
  border-radius: 0.5rem;
}

.cl-faq-list details.cl-faq-item > p {
  margin: 0.875rem 0 0;
  color: var(--cl-color-text-body);
  line-height: 1.65;
}

.cl-faq-contact {
  max-width: 900px;
  background: rgba(200, 12, 58, 0.05);
  border: 1px solid rgba(200, 12, 58, 0.15);
  border-radius: 1.5rem;
  padding: 1.75rem;
}

.cl-faq-contact h2 {
  font-size: 1.375rem;
  margin: 0 0 0.5rem;
}

.cl-faq-contact p {
  margin: 0 0 0.75rem;
}

.cl-faq-contact .cl-faq-contact-lines a {
  color: var(--cl-color-paprika);
  font-weight: 800;
  text-decoration: none;
}

.cl-faq-contact .wp-block-button__link {
  background: var(--cl-color-selective-yellow);
  color: var(--cl-color-black);
  font-weight: 800;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  text-decoration: none;
}

.cl-faq-contact .wp-block-button__link:hover {
  background: var(--cl-color-selective-yellow-hover);
}

@media (max-width: 768px) {
  .cl-faq-list details.cl-faq-item {
    padding: 1rem 1.125rem;
  }
  .cl-faq-list details.cl-faq-item summary {
    font-size: 1rem;
  }
  .cl-faq-contact {
    padding: 1.25rem 1.125rem;
  }
}


/* ==========================================================================
   MOBILE FIRST SCREEN: 45% header + banner, 55% calculator + apply bar
   ==========================================================================
   Credilink, 2026-10-09: on a phone the landing page has to show the header
   and the campaign banner in roughly the top 45% of the screen, and the
   calculator's controls plus the sticky apply button in the rest (first set at 40/60, raised to 45/55 after a check on a real iPhone) -
   so a visitor can see the offer, set an amount and start applying without
   scrolling.

   How the split is held:
     * the mobile header gets a FIXED height (--cl-mobile-header-h), so the
       arithmetic below does not depend on the logo or the icons;
     * the banner box is sized from the viewport: 45svh minus the header and
       the two small gaps around the banner. svh is the viewport with the
       browser's toolbars showing, i.e. what the visitor actually sees on
       arrival; plain vh is declared first for browsers without svh;
     * the image fills that box with object-fit: cover. Its shape varies by
       phone (about 1.4:1 to 2.1:1), which is why the mobile asset is a 16:10
       1200x750 image with its content kept in the central 1040x560
       (inc/campaign-hero.php);
     * the calculator is compacted only in this hero (.cl-hero-has-banner),
       label and figure on one line, so its controls and the three cost rows
       fit the rest with the apply bar on a ~390x660 visible area. The slider
       hit areas stay 44px and the regulatory text keeps its size; it follows
       the cost rows, just below the first screen.

   The sizing applies only when a LANDSCAPE mobile image is uploaded
   (.cl-campaign-hero-picture--band). With the old portrait image, or none,
   phones show the desktop band at its own shape - much shorter, nothing
   cropped - and the calculator simply starts higher.
   ========================================================================== */

/* Account icon + hamburger, together at the right edge of the header. */
.cl-mobile-tools {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.cl-mobile-account {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  font-size: 2rem;
  line-height: 0;
  color: var(--cl-color-paprika);
}

.cl-mobile-account:hover,
.cl-mobile-account:focus-visible {
  color: var(--cl-color-paprika-dark);
}

.cl-mobile-account:focus-visible,
.cl-mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--cl-color-paprika);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .cl-mobile-tools {
    display: flex;
  }

  /* Same 44px square as the account icon, so the two read as a pair. */
  .cl-mobile-tools .cl-mobile-menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --cl-mobile-header-h: 3.75rem;
  }

  /* Fixed-height header. The padding was an inline style, hence !important. */
  .cl-header {
    height: var(--cl-mobile-header-h);
    padding: 0 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .cl-header .cl-container {
    width: 100%;
    box-sizing: border-box;
  }

  /* The pills go on phones; the account icon in the header replaces them. */
  .cl-persona-switcher-wrapper {
    display: none;
  }

  /* One column, and a column that may shrink below 320px: the inline
     minmax(320px, 1fr) pushed the card 8px past the gutter on 360px phones. */
  .cl-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cl-hero-section:has(.cl-hero-has-banner) {
    padding-top: 0.75rem;
  }

  /* 1rem gutters instead of 1.5rem in this hero: the width goes to the
     banner and lets "Plata minimă lunară" and its figure share one line
     on a 360px phone. (Inline style on the container, hence !important.) */
  .cl-hero-has-banner.cl-hero-container {
    padding: 0 1rem !important;
  }

  .cl-hero-has-banner .cl-campaign-band {
    margin-bottom: 0.75rem;
  }

  /* The image carries the campaign on a phone. Heading and text set in the
     admin stay on desktop; below the banner they would push the calculator
     out of the first screen. */
  .cl-campaign-hero:has(.cl-campaign-hero-picture) .cl-campaign-hero-copy {
    display: none;
  }

  .cl-campaign-hero-picture--band {
    height: calc(45vh - var(--cl-mobile-header-h) - 1.5rem);
    height: calc(45svh - var(--cl-mobile-header-h) - 1.5rem);
    min-height: 7.5rem;
  }

  /* (0,3,0): has to beat .cl-campaign-hero-picture:has(source) img (0,2,1),
     which forces the old 4:5 portrait ratio. */
  .cl-campaign-band .cl-campaign-hero-picture--band .cl-campaign-hero-image {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }

  /* --- the calculator, compacted for the rest of the screen --- */

  .cl-hero-has-banner .credilink-calculator-card {
    padding: 0.875rem 1rem 0.75rem !important;
  }

  .cl-hero-has-banner .cl-calc-title {
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .cl-hero-has-banner .cl-calc-value-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    padding: 0.3125rem 0.875rem;
    margin-bottom: 0.25rem;
    border-radius: 0.875rem;
  }

  .cl-hero-has-banner .cl-calc-value-label {
    font-size: 0.6875rem;
    line-height: 1.3;
  }

  .cl-hero-has-banner .cl-calc-value {
    font-size: 1.625rem;
    line-height: 1.15;
    min-height: 0;
    white-space: nowrap;
  }

  .cl-hero-has-banner .cl-calc-unit {
    font-size: 0.9375rem;
  }

  /* The scale tucks into the empty lower part of the 44px slider hit area. */
  .cl-hero-has-banner .cl-calc-slider-row {
    margin-bottom: 0.5rem;
  }

  .cl-hero-has-banner .cl-calc-scale {
    margin-top: -0.375rem;
    font-size: 0.75rem;
    line-height: 1.3;
  }

  /* The period is a fact rather than a control while the products allow a
     single tenor (the slider row is hidden by the script), so it is set a
     size smaller than the amount. */
  .cl-hero-has-banner [data-calc="tenor-box"] {
    margin-bottom: 0.5rem;
  }

  .cl-hero-has-banner [data-calc="tenor-box"] .cl-calc-value {
    font-size: 1.125rem;
  }

  .cl-hero-has-banner .cl-calc-costs {
    padding: 0.5rem 0.875rem;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.35;
    border-radius: 0.875rem;
  }

  .cl-hero-has-banner .cl-calc-cost-headline span {
    white-space: nowrap;
  }

  .cl-hero-has-banner .cl-calc-cost-headline strong {
    font-size: 1.1875rem;
    line-height: 1.25;
  }

  .cl-hero-has-banner .cl-calc-cost-total {
    padding-top: 0.25rem;
  }

  .cl-hero-has-banner .cl-calc-cost-total strong {
    font-size: 1rem;
  }

  /* A slimmer apply bar on every page: ~63px instead of ~83px. */
  .cl-sticky-cta {
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
  }

  body:not(.page-template-template-ppc-landing) .cl-sticky-cta .btn-aplica {
    padding: 0.75rem 1.25rem !important;
    line-height: 1.25;
  }
}

/* Short phones (iPhone SE class): the card title is the one thing that goes,
   for screen readers it stays. */
@media (max-width: 768px) and (max-height: 620px) {
  .cl-hero-has-banner .cl-calc-costs {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    gap: 0.125rem;
  }

  .cl-hero-has-banner .cl-calc-slider-row {
    margin-bottom: 0.375rem;
  }

  .cl-hero-has-banner .cl-calc-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------
 * Revolving explanation: text | benefit cards, vertically centred.
 * ------------------------------------------------------------------ */
.cl-revolving-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  align-items: center;
}

.cl-revolving-benefits {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cl-revolving-benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--cl-color-bg);
  border: 1px solid var(--cl-color-border);
  border-radius: 1rem;
}

/* ------------------------------------------------------------------
 * Testimonials: own band, masonry columns (3 / 2 / swipe row).
 * ------------------------------------------------------------------ */
.cl-testimonials-band {
  padding: 5rem 0;
}

.cl-testimonials-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.cl-testimonials-all {
  color: var(--cl-color-selective-yellow);
  font-weight: 700;
  text-decoration: none;
}

.cl-testimonials-all:hover {
  text-decoration: underline;
}

.cl-testimonial-cards {
  columns: 3 300px;
  column-gap: 1.5rem;
  margin: 2rem 0;
}

.cl-testimonials-band .cl-testimonial-cards {
  margin: 0;
}

.cl-testimonial-card {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0 0 1.5rem;
  padding: 1.5rem;
  border-radius: 1rem;
}

.cl-testimonial-stars {
  color: var(--cl-color-selective-yellow);
  letter-spacing: 0.1em;
}

.cl-testimonial-quote {
  margin: 0;
  font-style: italic;
  line-height: 1.65;
}

.cl-testimonial-author {
  font-weight: 700;
}

.cl-testimonial-date {
  font-weight: 400;
}

.cl-testimonial-source {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 0.8125rem;
}

.cl-testimonial-cards--dark .cl-testimonial-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cl-testimonial-cards--dark .cl-testimonial-quote {
  color: #E0E5EF;
}

.cl-testimonial-cards--dark .cl-testimonial-author {
  color: #FFFFFF;
}

.cl-testimonial-cards--dark .cl-testimonial-date,
.cl-testimonial-cards--dark .cl-testimonial-source {
  color: #A0AAB8;
}

.cl-testimonial-cards--light .cl-testimonial-card {
  background: #FFFFFF;
  border: 1px solid var(--cl-color-border);
  box-shadow: var(--cl-shadow-sm);
}

.cl-testimonial-cards--light .cl-testimonial-quote,
.cl-testimonial-cards--light .cl-testimonial-author {
  color: var(--cl-color-text-body);
}

.cl-testimonial-cards--light .cl-testimonial-date {
  color: var(--cl-color-text-muted);
}

/* Phones: one card at a time, swipe sideways, next card peeking. */
@media (max-width: 640px) {
  .cl-testimonials-band {
    padding: 3.5rem 0;
  }

  .cl-testimonials-band .cl-testimonial-cards {
    columns: auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .cl-testimonials-band .cl-testimonial-card {
    flex: 0 0 82%;
    width: 82%;
    max-width: 82%;
    box-sizing: border-box;
    margin: 0;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-testimonials-band .cl-testimonial-cards {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------
 * /ce-spun-clientii-nostri — full-width page, cards in 3 columns.
 * ------------------------------------------------------------------ */
.cl-testimonials-page-head {
  padding: 4rem 0 2.5rem;
  background: var(--cl-color-bg);
  border-bottom: 1px solid var(--cl-color-border);
}

.cl-testimonials-page-badge {
  display: inline-block;
  background: rgba(200, 12, 58, 0.08);
  color: var(--cl-color-paprika);
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cl-testimonials-page-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--cl-color-black);
  margin: 1rem 0 0.75rem;
  text-wrap: balance;
}

.cl-testimonials-page-intro {
  max-width: 40em;
  font-size: 1.125rem;
  color: var(--cl-color-text-muted);
  line-height: 1.6;
  margin: 0 0 2rem;
}

.cl-testimonials-page-body {
  padding: 3rem 0 5rem;
}

.cl-testimonials-page-body .cl-testimonial-cards {
  margin: 0;
}

.cl-testimonials-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 700;
}