/*
Theme Name: EzeCredit Fintech
Theme URI: https://ezecreditservices.com/
Author: EzeCredit Services
Author URI: https://ezecreditservices.com/
Description: A minimalist fintech theme for an authorized-user tradelines business. Ships with an accessible multi-level navigation, custom post types for live inventory (Tradelines), Bank profiles, FAQs and Testimonials, and a built-in SEO/AEO/local-SEO layer that stands down automatically when a dedicated SEO plugin is active.
Version: 2.2.1
Requires at least: 6.2
Requires PHP: 7.4
Tested up to: 6.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eze-credit
Tags: business, finance, custom-colors, accessibility-ready, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, translation-ready, threaded-comments, full-width-template
*/

/* ============================================================
   0. DESIGN TOKENS
   The theme is light-only. Every colour is a custom property
   declared once here, so rebranding is a matter of editing this
   block rather than hunting through components.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#FFFFFF;
  --bg-alt:#F0F8F3;
  --surface:#FFFFFF;
  --surface-2:#F0F8F3;
  --surface-3:#E8F5EC;
  --header-bg:rgba(255,255,255,.86);

  /* ink */
  --ink:#17202A;
  --ink-2:#2E3A46;
  --muted:#667085;
  /* Darkened from #8A93A3, which failed WCAG AA on white (3.1:1). This
     token carries real text — post dates, breadcrumbs, gauge labels. */
  --faint:#6B7484;

  /* lines */
  --line:#E7E9ED;
  --line-strong:#D5DAE1;

  /* brand */
  --brand:#1B7A43;
  --brand-2:#145C32;
  --brand-ink:#145C32;
  --brand-soft:#E8F5EC;
  --on-brand:#FFFFFF;

  /* semantic */
  --positive:#15803D;
  --positive-ink:#166534;
  --positive-soft:#E8F5EC;
  --amber:#B7791F;
  --amber-soft:#FDF6E7;
  --danger:#B42318;
  --danger-soft:#FDEDEE;

  /* effects */
  --shadow:rgba(20,20,20,.03);
  --shadow-strong:rgba(20,20,20,.10);
  --grid-line:rgba(23,32,42,.045);
  --card-shadow:0 10px 35px rgba(20,20,20,.03);
  --card-shadow-hover:0 18px 45px rgba(20,20,20,.08);
  --band-from:#0F2A1B;
  --band-to:#145C32;
  --band-ink:#F0F8F3;
  --band-line:rgba(240,248,243,.26);

  /* metrics */
  --radius:12px;
  --radius-lg:16px;
  --radius-sm:8px;
  --gutter:max(20px, 4vw);
  --maxw:1440px;
  --measure:75ch;
  --header-h:66px;
  /* Caps the custom logo so the header height stays constant whatever
     dimensions the uploaded file happens to have. The footer has more
     room, so its copy is allowed to run a little larger. */
  --logo-max-h:40px;
  --logo-footer-max-h:48px;
  --ring:2px;

  /* The width at which the nav switches from panel to bar. Read by
     assets/js/navigation.js so CSS and JS can never disagree.
     1280 rather than 1200: the fluid 4vw gutter leaves ~1104px of content
     at 1200px, which is not enough for the brand lockup, seven menu items
     and the CTA without clipping the site title. */
  --nav-breakpoint:1280px;

  /* Light only. Declared so form controls, scrollbars and the
     address bar render light even on a device set to dark. */
  color-scheme:light;
}

/* ============================================================
   1. RESET & BASE
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

.site-header,.card,.btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease;}

a{color:var(--brand-ink);text-underline-offset:.18em;}
a:hover{color:var(--brand-2);}
img,svg,video,canvas{max-width:100%;height:auto;}
img{vertical-align:middle;}
[hidden]{display:none!important;}
::selection{background:var(--brand);color:var(--on-brand);}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0;}

h1,h2,h3,h4,h5,h6{font-family:"Sora",ui-sans-serif,system-ui,sans-serif;text-wrap:balance;margin:0;font-weight:700;line-height:1.2;letter-spacing:-.015em;}
p{margin:0;}
.entry-content p,.entry-content ul,.entry-content ol,.entry-content blockquote,.entry-content figure,.entry-content pre,.entry-content table{margin:0 0 1.35em;}
.entry-content h2,.entry-content h3,.entry-content h4{margin:2.2em 0 .7em;}
.entry-content h2{font-size:1.6rem;}
.entry-content h3{font-size:1.25rem;}
.entry-content h4{font-size:1.05rem;}
.entry-content li{margin-bottom:.4em;}
.entry-content > *:last-child{margin-bottom:0;}
.entry-content a{font-weight:600;}
.entry-content blockquote{border-left:3px solid var(--brand);padding:.2rem 0 .2rem 1.4rem;color:var(--ink-2);font-size:1.05rem;}
.entry-content code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88em;background:var(--surface-2);padding:.15em .4em;border-radius:5px;}
.entry-content pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;overflow:auto;}
.entry-content pre code{background:none;padding:0;}
.entry-content img{border-radius:var(--radius);}
.entry-content table{width:100%;border-collapse:collapse;}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;}

.num{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;}

button{font:inherit;color:inherit;}
:focus-visible{outline:var(--ring) solid var(--brand);outline-offset:2px;border-radius:3px;}

/* ============================================================
   2. WORDPRESS CORE REQUIREMENTS
   ============================================================ */

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;}
.screen-reader-text:focus,.skip-link:focus{
  background:var(--surface);color:var(--ink);clip:auto!important;clip-path:none;display:block;height:auto;
  left:var(--gutter);line-height:normal;padding:.9em 1.4em;text-decoration:none;top:var(--gutter);width:auto;
  z-index:100001;border:1px solid var(--brand);border-radius:var(--radius-sm);box-shadow:0 10px 30px -12px var(--shadow-strong);
}
.skip-link{position:absolute;top:0;left:0;}

.alignleft{float:left;margin:.4em 1.6em 1.6em 0;}
.alignright{float:right;margin:.4em 0 1.6em 1.6em;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignwide{max-width:min(1180px, calc(100vw - var(--gutter) * 2));margin-left:auto;margin-right:auto;}
.alignfull{max-width:none;width:auto;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.wp-caption,.wp-block-image figure{max-width:100%;}
.wp-caption-text,.wp-element-caption{font-size:.82rem;color:var(--muted);margin-top:.5em;text-align:center;}
.sticky .post-card{border-color:var(--brand);}
.bypostauthor{display:block;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;}
.gallery-item{margin:0!important;width:auto!important;}

.admin-bar .site-header{top:32px;}
.admin-bar .primary-nav{top:calc(var(--header-h) + 32px);}
@media (max-width:782px){
  .admin-bar .site-header{top:46px;}
  .admin-bar .primary-nav{top:calc(var(--header-h) + 46px);}
}

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */

/*
 * Fluid container. The element itself spans the viewport and the content is
 * centred by padding rather than by a max-width, so a section can paint its
 * background edge to edge while its text still lines up with every other
 * container on the page.
 */
.wrap{
  width:100%;
  margin-inline:auto;
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2));
  box-sizing:border-box;
}
/* Long-form text stays at a readable measure inside the wider shell. */
.narrow{max-width:var(--measure);}
.site-main{display:block;min-height:40vh;}
.section{padding:3.25rem 0;}
.section--tight{padding-top:0;}
.section--flush{padding-bottom:0;}

.grid{display:grid;gap:1.2rem;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-2{grid-template-columns:1fr;}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start;}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:2rem;}}

.stack{display:flex;flex-direction:column;}
.flow > * + *{margin-top:1rem;}

/* ============================================================
   4. TYPE HELPERS & SMALL COMPONENTS
   ============================================================ */

.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-ink);font-weight:600;
  display:flex;align-items:center;gap:.6em;margin:0;
}
.eyebrow::before{content:"";width:20px;height:2px;background:linear-gradient(90deg,var(--brand),var(--positive));display:inline-block;border-radius:2px;flex:none;}
.eyebrow--center{justify-content:center;}

.lede{color:var(--muted);max-width:62ch;font-size:1.05rem;}
.muted{color:var(--muted);}
.small{font-size:.86rem;}

.badge{
  display:inline-flex;align-items:center;gap:.4em;font-size:.72rem;font-weight:700;
  padding:.3em .75em;border-radius:20px;background:var(--positive-soft);color:var(--positive-ink);
  font-family:"JetBrains Mono",ui-monospace,monospace;
}
.badge-amber{background:var(--amber-soft);color:var(--amber);}
.badge-brand{background:var(--brand-soft);color:var(--brand-ink);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:inherit;font-weight:700;font-size:.92rem;
  padding:.82em 1.5em;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;line-height:1.1;white-space:nowrap;
}
.btn-primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand);}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:var(--on-brand);}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft);}
.btn-sm{padding:.58em 1.1em;font-size:.82rem;border-radius:7px;}
.btn-block{width:100%;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;}

.grad-bar{height:3px;width:56px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--positive));border:none;margin:0;}

/* ============================================================
   5. SITE HEADER + NAVIGATION
   The navigation is the piece most likely to be edited, so it
   is documented inline. Two distinct modes:
     - Desktop (>= 1024px): horizontal bar, submenus fly out.
     - Mobile  (<  1024px): full-height panel, submenus are
       accordions. Open state is a CLASS, never an inline style,
       so resizing between the two modes can never strand the
       menu in a half-open state.
   ============================================================ */

.site-header{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
}
/*
 * The frosted background lives on a pseudo-element, not on .site-header
 * itself, and this is load-bearing rather than stylistic: backdrop-filter
 * makes an element a containing block for its position:fixed descendants.
 * With the filter on the header, the mobile nav panel's `top:header-h;
 * bottom:0` resolved against the 66px header instead of the viewport, so
 * the panel rendered 57px tall and the page showed through it. Keeping the
 * filter on ::before leaves the header a normal containing block.
 */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--header-bg);
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .site-header::before{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);}
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  min-height:var(--header-h);
}

.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex:none;min-width:0;}
.brand:hover{color:var(--ink);}
.brand-mark{width:30px;height:30px;flex:none;}
.brand-name{font-family:"Sora",ui-sans-serif,sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.02em;color:var(--brand);}

/*
 * Custom logo.
 *
 * These selectors deliberately do NOT depend on the logo sitting inside
 * .brand. WordPress renders the logo as <a class="custom-logo-link"> on
 * every page except the front page (where it is a <span>), so nesting it
 * inside our own <a class="brand"> produced invalid markup that the HTML
 * parser repaired by closing .brand early — which dropped the image out of
 * any ".brand .custom-logo" rule and let it render at full natural size,
 * stretching the header. The markup no longer nests anchors (see
 * template-parts/header/brand.php), and the size cap is applied to the
 * image itself so it holds wherever the logo ends up.
 */
.custom-logo-link{display:inline-flex;align-items:center;line-height:0;text-decoration:none;flex:none;}
.custom-logo{
  display:block;
  width:auto;
  height:auto;
  max-height:var(--logo-max-h);
  max-width:min(240px, 42vw);
  object-fit:contain;
}
@media (max-width:1279px){
  .brand--header .custom-logo{max-width:min(190px, 52vw);}
}

/* The footer column is wider than the header slot, so the logo gets a
   little more room there. */
.brand--footer{margin-bottom:.2rem;}
.brand--footer .custom-logo{max-height:var(--logo-footer-max-h);max-width:min(260px, 70vw);}

/* Logo + site name lockup.
   The title lives inside the logo's own <a>, so the flex row and its gap
   belong on that link rather than on the .brand container, and the
   line-height:0 used for a bare image has to be restored for the text. */
.brand--with-name .custom-logo-link{
  flex-wrap:wrap;
  gap:.3rem .55rem;
  line-height:1.25;
}
.brand--with-name .brand-name{font-size:1.02rem;line-height:1.25;}

/* Standing the name beside the logo costs roughly 150px, which neither the
   header row nor the footer column has spare, so the logo drops back to its
   header cap. In the footer the pair may wrap onto two lines. */
.brand--footer.brand--with-name .custom-logo{max-height:var(--logo-max-h);max-width:min(200px, 58vw);}

/* The link sizes to its content by default, so without these a long title
   makes it wider than the footer column and gives the whole page a
   horizontal scrollbar. Constrained to the column, the title wraps under
   the logo instead. */
.brand--footer{max-width:100%;}
.brand--footer.brand--with-name .custom-logo-link{max-width:100%;min-width:0;}
/* `anywhere` rather than `break-word`: only `anywhere` also reduces the
   element's min-content size, which is what stops one very long unbroken
   word from widening the grid column that contains it. */
.brand--footer .brand-name{min-width:0;overflow-wrap:anywhere;}

/*
 * Header lockup.
 *
 * The header row also carries the menu, the phone number and the CTA, and
 * measurement showed a title only slightly longer than the default pushing
 * the menu straight into them. So the brand is allowed to shrink and the
 * title truncates as a last resort: the failure mode is a clipped word,
 * never a broken navigation. It stays on one line — wrapping here would
 * grow the header instead.
 */
/* flex:0 1 auto overrides the flex:none on .brand — without it min-width:0
   has nothing to act on and the title pushes the hamburger off-screen on a
   phone instead of truncating. */
.brand--header{min-width:0;}
.brand--header.brand--with-name{flex:0 1 auto;}
/* The link is flex:none by default; it has to be shrinkable too, or the
   brand's own min-width:0 stops at the link's content width. The image
   stays flex:none so only the text gives way. */
.brand--header.brand--with-name .custom-logo-link{flex:0 1 auto;flex-wrap:nowrap;min-width:0;}
.brand--header.brand--with-name .custom-logo{flex:none;}
.brand--header .brand-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/*
 * No fixed cap on the brand: an arbitrary max-width clipped titles that
 * would have fitted perfectly well. Instead the menu is pinned at its
 * content width and the brand is the only flexible item in the row, so the
 * brand takes whatever is genuinely left over and truncates only when the
 * row really has run out — the nav can never be squeezed.
 */
@media (min-width:1280px){
  .primary-nav{flex:none;}
}

/* --- shared menu list resets --- */
.nav-menu,.nav-menu .sub-menu{list-style:none;margin:0;padding:0;}
.nav-menu a{text-decoration:none;color:var(--muted);font-weight:600;font-size:.86rem;}
.nav-menu a:hover{color:var(--ink);}
.nav-menu .menu-item{position:relative;}

/* the row that holds <a> + optional submenu toggle button */
.nav-menu .menu-item > a{display:inline-flex;align-items:center;gap:.3rem;}

.submenu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;padding:.35em;margin:0;cursor:pointer;
  color:var(--faint);border-radius:5px;flex:none;line-height:0;
}
.submenu-toggle:hover{color:var(--ink);}
.submenu-toggle svg{width:11px;height:11px;transition:transform .22s ease;}
.submenu-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

.nav-right{display:flex;align-items:center;gap:.6rem;flex:none;}
.nav-phone{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.82rem;color:var(--muted);text-decoration:none;display:none;white-space:nowrap;}
/* Raised from 1500px: with the site title now in the header too, the phone
   number is the first thing that has to wait for genuinely spare room. */
@media (min-width:1700px){.nav-phone{display:inline;}}
.nav-phone:hover{color:var(--brand-ink);}

/* hamburger */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:38px;height:36px;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--radius-sm);cursor:pointer;padding:0;flex:none;
}
.nav-toggle__bars{position:relative;display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:background-color .15s ease;}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,top .22s ease;}
.nav-toggle__bars::before{top:-5.5px;}
.nav-toggle__bars::after{top:5.5px;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background-color:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg);}

/* ---------- DESKTOP NAV (>= 1024px) ---------- */
@media (min-width:1280px){

  .primary-nav{display:block;}
  .primary-nav > .nav-menu{display:flex;align-items:center;gap:clamp(.7rem,1.1vw,1.15rem);flex-wrap:nowrap;}
  .primary-nav > .nav-menu > .menu-item{flex:none;}

  /* Labels must not break across lines — a wrapped "Tradeline Banks" turns
     the whole header into a two-row block. */
  .primary-nav .nav-menu > .menu-item > a{padding:.45em 0;border-bottom:2px solid transparent;white-space:nowrap;}
  .primary-nav .nav-menu > .current-menu-item > a,
  .primary-nav .nav-menu > .current-menu-ancestor > a,
  .primary-nav .nav-menu > .current-menu-parent > a,
  .primary-nav .nav-menu > .current_page_item > a,
  .primary-nav .nav-menu > .current_page_ancestor > a{color:var(--ink);border-bottom-color:var(--brand);}

  /* Flyout panels. Kept in the layout (visibility, not display) so the
     transition works and so focus-within can reveal them for keyboards. */
  .primary-nav .sub-menu{
    position:absolute;top:calc(100% + 10px);left:0;z-index:20;
    min-width:230px;padding:.4rem;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 22px 44px -22px var(--shadow-strong);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  /* A hover bridge so the pointer can travel into the panel. */
  .primary-nav .menu-item-has-children > .sub-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;}

  .primary-nav .menu-item:hover > .sub-menu,
  .primary-nav .menu-item:focus-within > .sub-menu,
  .primary-nav .menu-item.is-open > .sub-menu{opacity:1;visibility:visible;transform:none;}

  /* Submenu rows: link fills the row, toggle sits at the end. */
  .primary-nav .sub-menu .menu-item{display:flex;align-items:center;border-radius:7px;}
  .primary-nav .sub-menu .menu-item:hover,
  .primary-nav .sub-menu .menu-item:focus-within{background:var(--surface-2);}
  .primary-nav .sub-menu .menu-item > a{flex:1 1 auto;padding:.58em .7em;font-size:.86rem;white-space:nowrap;}
  .primary-nav .sub-menu .menu-item > a:hover{color:var(--ink);}
  .primary-nav .sub-menu .menu-item > .submenu-toggle{margin-right:.35rem;}
  .primary-nav .sub-menu .current-menu-item > a{color:var(--brand-ink);}

  /* Second level and deeper fly out sideways, with a sideways caret. */
  .primary-nav .sub-menu .sub-menu{top:-.4rem;left:calc(100% + 4px);}
  .primary-nav .sub-menu .menu-item-has-children > .sub-menu::before{top:0;left:-8px;right:auto;width:8px;height:100%;}
  .primary-nav .sub-menu .submenu-toggle svg{transform:rotate(-90deg);}
  .primary-nav .sub-menu .submenu-toggle[aria-expanded="true"] svg{transform:rotate(-90deg);}

  /* JS adds .is-flipped when a panel would overflow the viewport. */
  .primary-nav .sub-menu.is-flipped{left:auto;right:0;}
  .primary-nav .sub-menu .sub-menu.is-flipped{left:auto;right:calc(100% + 4px);}

  .nav-toggle{display:none!important;}
}

/* ---------- MOBILE NAV (< 1024px) ---------- */
@media (max-width:1279px){
  .nav-toggle{display:inline-flex;}

  .primary-nav{
    position:fixed;left:0;right:0;top:var(--header-h);bottom:0;
    z-index:99;
    display:none;                     /* THE fix: closed is the default */
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg);
    border-top:1px solid var(--line);
    padding:.5rem var(--gutter) 3rem;
    -webkit-overflow-scrolling:touch;
  }
  .primary-nav.is-open{display:block;animation:eze-nav-in .18s ease-out;}
  @keyframes eze-nav-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

  /* Stop the page behind the panel from scrolling. */
  body.eze-nav-open{overflow:hidden;}

  .primary-nav .nav-menu{display:block;}
  .primary-nav .menu-item{border-bottom:1px solid var(--line);}
  .primary-nav .sub-menu > .menu-item:last-child{border-bottom:none;}

  /* <a> and the toggle button share a row; the submenu wraps beneath. */
  .primary-nav .menu-item{display:flex;flex-wrap:wrap;align-items:center;}
  .primary-nav .menu-item > a{flex:1 1 auto;padding:.95em 0;font-size:.98rem;}
  .primary-nav .menu-item > .submenu-toggle{
    flex:none;width:44px;height:44px;border-radius:var(--radius-sm);
    border:1px solid var(--line);margin-left:.5rem;
  }
  .primary-nav .menu-item > .submenu-toggle svg{width:13px;height:13px;}

  .primary-nav .sub-menu{
    flex:1 0 100%;display:none;
    margin:0 0 .6rem;padding:.2rem 0 .2rem .9rem;
    border-left:2px solid var(--line);
  }
  .primary-nav .menu-item.is-open > .sub-menu{display:block;}
  .primary-nav .sub-menu .menu-item > a{padding:.7em 0;font-size:.9rem;color:var(--muted);}

  .primary-nav .current-menu-item > a,
  .primary-nav .current-menu-ancestor > a,
  .primary-nav .current_page_item > a{color:var(--brand-ink);}

  /* Utility row pinned under the menu on small screens. */
  .primary-nav .nav-utility{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem;}
  .primary-nav .nav-utility .btn{width:100%;}
}
@media (min-width:1280px){
  .primary-nav .nav-utility{display:none;}
}

/* The header CTA is repeated inside the mobile panel, so hide the duplicate
   in the cramped header row on small screens. */
@media (max-width:1279px){
  .nav-cta{display:none;}
}
@media (max-width:420px){
  .nav-phone{display:none;}
  .nav-right{gap:.45rem;}
}

/*
 * Fallback for browsers with JavaScript switched off: the panel can't be
 * toggled, so show it inline rather than hiding the menu behind a dead
 * button.
 *
 * This is keyed on `scripting: none` — whether the browser runs JavaScript
 * at all — and deliberately NOT on a `no-js` class that a script removes.
 * Performance plugins with a "delay JavaScript" option (WP Rocket, LiteSpeed,
 * Perfmatters, FlyingPress, Cloudflare Rocket Loader…) hold every script back
 * until the first touch, inline ones included. With a class-based fallback
 * that made each page render as if JS were off: the whole menu splayed out
 * under the header until the visitor touched the screen. A delayed script
 * does not change `scripting`, so those visitors now get the normal
 * collapsed menu from the first paint.
 *
 * (Browsers too old to know `scripting` simply skip this block; the only
 * people that affects are ones running an old browser with JS disabled.)
 */
@media (scripting: none){
  .nav-toggle{display:none!important;}
}
@media (scripting: none) and (max-width:1279px){
  .primary-nav{position:static;display:block;height:auto;padding:0 0 .8rem;border-top:none;background:none;overflow:visible;}
  .primary-nav .sub-menu{display:block;}
  .site-header__inner{flex-wrap:wrap;}
}

/* ============================================================
   6. PAGE HERO / BREADCRUMBS
   ============================================================ */

.page-hero{padding:2.75rem 0 2.25rem;border-bottom:1px solid var(--line);margin-bottom:2.75rem;}
.page-hero--plain{border-bottom:none;margin-bottom:1rem;}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:.55rem 0 .85rem;}
.page-hero .lede{font-size:1.04rem;}

.breadcrumb{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.74rem;color:var(--faint);margin:0 0 1rem;}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45em;align-items:center;}
.breadcrumb li{display:flex;align-items:center;gap:.45em;}
.breadcrumb li+li::before{content:"/";color:var(--line-strong);}
.breadcrumb a{text-decoration:none;color:var(--faint);}
.breadcrumb a:hover{color:var(--brand-ink);}
.breadcrumb [aria-current="page"]{color:var(--muted);}

/* ============================================================
   7. SECTIONS, STATS, CARDS
   ============================================================ */

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2rem;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.5rem,3vw,2.05rem);margin-top:.4rem;}
.section-head > p{color:var(--muted);max-width:44ch;font-size:.95rem;}

.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stat{background:var(--surface);padding:1.5rem 1.3rem;}
.stat .n{font-size:1.85rem;font-weight:700;display:block;font-family:"Sora",sans-serif;line-height:1.1;}
.stat .l{font-size:.78rem;color:var(--muted);margin-top:.4em;display:block;}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:0 16px 32px -28px var(--shadow);}
.card h3{font-size:1rem;margin-bottom:.5em;}
.card p{font-size:.9rem;color:var(--muted);}
.card--sticky{position:sticky;top:calc(var(--header-h) + 20px);}
@media (max-width:960px){.card--sticky{position:static;}}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);}
.step{padding:1.6rem 1.5rem 1.6rem 0;border-bottom:1px solid var(--line);}
.steps .step + .step{border-left:1px solid var(--line);padding-left:1.5rem;}
@media (max-width:860px){.steps{grid-template-columns:1fr;}.steps .step + .step{border-left:none;padding-left:0;}}
.step .idx{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--brand-ink);font-size:.8rem;font-weight:700;margin-bottom:.6em;display:block;}
.step h3{font-size:1.02rem;margin-bottom:.4em;}
.step p{color:var(--muted);font-size:.88rem;}

.seal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.5rem;text-align:center;}
.seal svg{color:var(--brand);margin-bottom:.9rem;}

.quote{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius-sm);padding:1.6rem 1.7rem;}
.quote .delta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:2rem;font-weight:700;color:var(--positive-ink);line-height:1;display:block;}
.quote blockquote{margin:.7rem 0 .9rem;font-size:1rem;padding:0;border:none;color:var(--ink);}
.quote figcaption{font-size:.78rem;color:var(--muted);}

/* Answer card — the short, direct answer used for AEO / featured snippets. */
.answer-card{
  background:var(--brand-soft);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius);padding:1.2rem 1.4rem;margin:0 0 2rem;
}
.answer-card__label{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-ink);font-weight:700;display:block;margin-bottom:.5em;
}
.answer-card p{font-size:.98rem;color:var(--ink);margin:0;}

/* ============================================================
   8. BANKS, FILTERS, INVENTORY
   ============================================================ */

.bank-row{display:flex;flex-wrap:wrap;gap:.7rem;padding:0;margin:0;list-style:none;}
.bank-chip{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55em 1.1em;font-size:.82rem;font-weight:700;color:var(--muted);background:var(--surface);text-decoration:none;display:inline-block;}
a.bank-chip:hover{border-color:var(--brand);color:var(--brand-ink);}

.bank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;}
@media (max-width:900px){.bank-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.bank-grid{grid-template-columns:1fr;}}
.bank-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;text-decoration:none;color:var(--ink);}
.bank-card:hover{border-color:var(--brand);color:var(--ink);box-shadow:0 18px 36px -28px var(--shadow-strong);}
.mono-id{width:38px;height:38px;border-radius:9px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-family:"Sora",sans-serif;font-weight:800;font-size:1rem;flex:none;}
.bank-card h3{font-size:1rem;}
.bank-card .meta{font-size:.8rem;color:var(--muted);font-family:"JetBrains Mono",ui-monospace,monospace;}
.bank-card .cta{font-size:.8rem;font-weight:700;color:var(--brand-ink);margin-top:auto;}

.filter-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem;}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:var(--radius-sm);padding:.5em 1em;font-size:.82rem;font-weight:700;cursor:pointer;}
.chip:hover{border-color:var(--line-strong);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}

.inv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
@media (max-width:900px){.inv-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.inv-grid{grid-template-columns:1fr;}}
.inv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.3rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;}
.inv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;}
.inv-bank{font-weight:700;font-size:1rem;font-family:"Sora",sans-serif;}
.inv-stock{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;color:var(--positive-ink);border:1px solid var(--positive);border-radius:20px;padding:.2em .7em;white-space:nowrap;}
.inv-row{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);gap:1rem;}
.inv-row b{color:var(--ink);font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;}
.inv-price{margin-top:.3rem;padding-top:.7rem;border-top:1px dashed var(--line-strong);display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;}
.inv-price .p{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1.3rem;font-weight:700;}
.inv-price .p span{font-size:.7rem;color:var(--muted);font-weight:500;}
.inv-caption{font-size:.82rem;color:var(--muted);margin:.9rem 0 0;}

.callout{display:flex;gap:1rem;background:var(--brand-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;font-size:.9rem;color:var(--ink);margin-bottom:2.4rem;}
.callout b{color:var(--brand-ink);}

/* ============================================================
   9. DATA TABLE (sortable)
   ============================================================ */

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
table.data{width:100%;border-collapse:collapse;min-width:640px;font-size:.88rem;}
table.data caption{text-align:left;padding:1rem 1.1rem 0;font-size:.8rem;color:var(--muted);caption-side:top;}
table.data th{
  text-align:left;padding:0;border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--surface);position:sticky;top:0;z-index:1;
}
table.data th .th-btn{
  display:flex;align-items:center;gap:.35em;width:100%;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:.9rem 1.1rem;background:none;border:none;cursor:pointer;text-align:left;font-weight:600;
}
table.data th .th-btn:hover{color:var(--brand-ink);}
table.data th .arrow{font-size:.8em;opacity:.45;}
table.data th[aria-sort] .arrow{opacity:1;color:var(--brand-ink);}
table.data th.th-plain{padding:.9rem 1.1rem;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;}
table.data td{padding:.85rem 1.1rem;border-bottom:1px solid var(--line);}
table.data tr:last-child td{border-bottom:none;}
table.data td.mono{font-family:"JetBrains Mono",ui-monospace,monospace;}
table.data td.price{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;color:var(--brand-ink);}
table.data tbody tr:hover{background:var(--surface-2);}

/* ============================================================
   10. FAQ ACCORDION
   ============================================================ */

.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:1.25rem .2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;color:var(--ink);}
.faq-q:hover{color:var(--brand-ink);}
.faq-q .q-text{font-family:"Manrope",sans-serif;font-weight:700;font-size:1rem;line-height:1.4;}
.faq-q .plus{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1.2rem;color:var(--brand-ink);transition:transform .22s ease;flex:none;line-height:1;}
.faq-q[aria-expanded="true"] .plus{transform:rotate(45deg);}
.faq-a{padding:0 .2rem 1.35rem;color:var(--muted);font-size:.94rem;max-width:74ch;}
.faq-a > *:last-child{margin-bottom:0;}
.faq-cat{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);margin:2.4rem 0 .5rem;font-weight:600;}
.faq-cat:first-child{margin-top:0;}

/* ============================================================
   11. BLOG
   ============================================================ */

.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;}
@media (max-width:900px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.post-grid{grid-template-columns:1fr;}}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.post-card:hover{border-color:var(--brand);box-shadow:0 18px 36px -28px var(--shadow-strong);}
.post-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);}
.post-card__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
.post-card__body{padding:1.4rem;display:flex;flex-direction:column;gap:.65rem;flex:1;}
.post-date{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;color:var(--faint);}
.post-card h2,.post-card h3{font-size:1.05rem;line-height:1.35;}
.post-card h2 a,.post-card h3 a{text-decoration:none;color:var(--ink);}
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--brand-ink);}
.post-card p{font-size:.88rem;color:var(--muted);}
.post-card .read{font-size:.8rem;font-weight:700;color:var(--brand-ink);margin-top:auto;text-decoration:none;}

.entry-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:var(--faint);font-family:"JetBrains Mono",ui-monospace,monospace;margin-top:.9rem;}
.entry-meta a{color:var(--faint);text-decoration:none;}
.entry-meta a:hover{color:var(--brand-ink);}
.entry-footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);}
.entry-footer a{color:var(--brand-ink);}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem;}
@media (max-width:620px){.post-nav{grid-template-columns:1fr;}}
.post-nav a{display:block;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);}
.post-nav a:hover{border-color:var(--brand);}
.post-nav .dir{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:.4em;}
.post-nav .t{font-weight:700;font-size:.92rem;}
.post-nav .next{text-align:right;}

.pagination{margin-top:2.6rem;display:flex;justify-content:center;}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 .7em;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  text-decoration:none;color:var(--muted);font-size:.86rem;font-weight:600;
}
.pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand-ink);}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.pagination .page-numbers.dots{border-color:transparent;}

/* ============================================================
   12. FORMS
   ============================================================ */

.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.field label,label{font-size:.82rem;font-weight:700;color:var(--muted);}
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],
input[type="search"],input[type="password"],input[type="date"],select,textarea{
  font:inherit;font-size:.94rem;padding:.75em .9em;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);width:100%;
}
input::placeholder,textarea::placeholder{color:var(--faint);}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--ring) solid var(--brand);outline-offset:1px;border-color:var(--brand);}
textarea{min-height:110px;resize:vertical;}
.form-note{font-size:.86rem;color:var(--positive-ink);margin-top:.6rem;}
.form-error{font-size:.86rem;color:var(--danger);margin-top:.6rem;}
.required{color:var(--danger);}

.search-form{display:flex;gap:.5rem;}
.search-form label{flex:1;}
.search-form .search-field{width:100%;}

/* ============================================================
   13. LISTS USED ON INTERIOR PAGES
   ============================================================ */

.audience-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem;}
@media (max-width:560px){.audience-list{grid-template-columns:1fr;}}
.audience-list li{display:flex;gap:.6rem;font-size:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75em .9em;}
.audience-list li::before{content:"\2192";color:var(--brand-ink);font-weight:700;}

.req-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.req-list li{display:flex;gap:.7rem;font-size:.92rem;align-items:flex-start;}
.req-list b{color:var(--brand-ink);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem;min-width:1.5em;}

.adv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.adv-list li{display:flex;gap:.7rem;font-size:.92rem;}
.adv-list svg{flex:none;color:var(--positive);margin-top:.2em;}

.guarantee-list{list-style:none;margin:0;padding:0;}
.guarantee-list li{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.guarantee-list li:last-child{border-bottom:none;}
.guarantee-list .n{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--brand-ink);font-weight:700;font-size:.85rem;min-width:1.7em;}

.trust-row{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.84rem;color:var(--muted);padding:0;margin:0;list-style:none;}
.trust-row li{display:flex;align-items:center;gap:.5em;}
.trust-row svg{flex:none;color:var(--brand);}

.factor{margin-bottom:1.2rem;}
.factor .row{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);}
.factor-bar{height:10px;border-radius:6px;background:var(--surface-3);overflow:hidden;margin:.5rem 0 .3rem;}
.factor-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--positive));border-radius:6px;}

.not-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;}

/* ============================================================
   14. HOMEPAGE HERO + SCORE GAUGE
   ============================================================ */

.hero{padding:3.4rem 0 4.2rem;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;position:relative;}
@media (max-width:960px){.hero{grid-template-columns:1fr;padding-top:2.2rem;gap:2.4rem;}}
/* Decorative glow. Kept fully inside the hero's box: anchoring it past the
   right edge (right:-10%) widened the document and gave every page a few
   pixels of horizontal scroll on phones. */
.hero::before{
  content:"";position:absolute;top:-40px;right:0;width:min(520px,80vw);height:min(520px,80vw);z-index:-1;
  background:radial-gradient(circle,var(--brand-soft),transparent 70%);
  pointer-events:none;opacity:.9;
}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.06;margin:.7rem 0 1.1rem;}
.hero h1 span{color:var(--brand-ink);}
.hero .lede{font-size:1.08rem;max-width:46ch;margin:0 0 1.7rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem;}

.gauge-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem 1.8rem 1.6rem;box-shadow:0 24px 60px -32px var(--shadow-strong);}
.gauge-card .cap{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:.4rem;}
.gauge-wrap{position:relative;width:100%;max-width:300px;margin:0 auto;}
.gauge-score{position:absolute;left:0;right:0;top:56%;text-align:center;}
.gauge-score .n{font-size:2.5rem;font-weight:700;display:block;font-family:"Sora",sans-serif;line-height:1;}
.gauge-score .l{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:.35em;}
.gauge-delta{display:flex;align-items:center;justify-content:center;gap:.4em;margin-top:.4rem;color:var(--positive-ink);font-weight:700;font-size:.92rem;}
.gauge-arc-bg{stroke:var(--surface-3);}
.gauge-arc-fg{stroke:var(--brand);}
@media (prefers-reduced-motion: no-preference){
  .gauge-arc-fg{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);}
}
/* Sits below and outside the card so it never covers the score delta. */
.stub{position:absolute;bottom:-42px;right:-16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75em .95em;transform:rotate(-3deg);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;color:var(--muted);box-shadow:0 14px 28px -18px var(--shadow-strong);max-width:14rem;}
.stub b{color:var(--ink);display:block;font-size:.78rem;margin-bottom:.2em;font-family:"Manrope",sans-serif;}
@media (max-width:520px){.stub{position:static;transform:none;margin-top:1.4rem;display:inline-block;max-width:none;}}

.profile-head{display:flex;align-items:center;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap;}
.profile-head .mono-id{width:46px;height:46px;border-radius:11px;font-size:1.15rem;}

/* ============================================================
   15. CTA BAND
   Always a dark, high-contrast band in light mode; in dark mode
   it steps up off the page background instead.
   ============================================================ */

.cta-band{
  background:linear-gradient(135deg,var(--band-from) 0%,var(--band-to) 100%);
  color:var(--band-ink);border:1px solid transparent;border-radius:var(--radius-lg);padding:3rem 2.5rem;
  display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 85% 0%,rgba(76,194,126,.28),transparent 70%);
}
.cta-band > *{position:relative;}
.cta-band h2{color:inherit;font-size:clamp(1.4rem,3vw,2rem);max-width:24ch;}
.cta-band p{color:inherit;opacity:.82;margin-top:.6rem;max-width:44ch;font-size:.95rem;}
.cta-band .actions{display:flex;gap:.8rem;flex-wrap:wrap;}
.cta-band .btn-ghost{border-color:var(--band-line);color:var(--band-ink);}
.cta-band .btn-ghost:hover{border-color:var(--band-ink);color:var(--band-ink);background:rgba(255,255,255,.08);}
@media (max-width:620px){.cta-band{padding:2.2rem 1.5rem;}}

/* ============================================================
   16. COMMENTS
   ============================================================ */

.comments-area{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);}
.comments-area h2{font-size:1.25rem;margin-bottom:1.4rem;}
.comment-list{list-style:none;margin:0 0 2rem;padding:0;}
.comment-list ol.children{list-style:none;margin:1rem 0 0 1.4rem;padding:0 0 0 1.2rem;border-left:2px solid var(--line);}
.comment-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:1rem;}
.comment-meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;flex-wrap:wrap;}
.comment-author img{border-radius:50%;}
.comment-author .fn{font-weight:700;font-style:normal;font-size:.92rem;}
.comment-metadata{font-size:.74rem;color:var(--faint);font-family:"JetBrains Mono",ui-monospace,monospace;}
.comment-metadata a{color:var(--faint);text-decoration:none;}
.comment-content{font-size:.94rem;}
.comment-content p{margin-bottom:.8em;}
.reply a{font-size:.8rem;font-weight:700;color:var(--brand-ink);text-decoration:none;}
.comment-respond{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;}
.comment-reply-title{font-size:1.1rem;margin-bottom:1rem;}
.comment-form .comment-notes,.comment-form .form-submit{margin-bottom:0;}
.comment-form p{margin-bottom:1rem;}
.comment-form label{display:block;margin-bottom:.35rem;}
.comment-awaiting-moderation{font-size:.82rem;color:var(--amber);}
.no-comments{color:var(--muted);font-size:.9rem;}

/* ============================================================
   17. FOOTER
   ============================================================ */

.site-footer{border-top:1px solid var(--line);padding:2.8rem 0 3rem;margin-top:2rem;background:var(--bg-alt);}
/* minmax(0,…) rather than a bare fr: a bare fr is minmax(auto,1fr), whose
   auto minimum lets a long unbreakable word widen the whole grid. */
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr));gap:2rem;margin-bottom:2rem;}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid h2,.foot-grid h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .9em;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6em;font-size:.88rem;}
.foot-grid a{text-decoration:none;color:var(--muted);}
.foot-grid a:hover{color:var(--brand-ink);}
.foot-brand p{color:var(--muted);font-size:.88rem;max-width:32ch;margin-top:.8rem;}
.foot-social{display:flex;gap:.5rem;margin-top:1.1rem;}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);background:var(--surface);}
.foot-social a:hover{border-color:var(--brand);color:var(--brand-ink);}
.foot-social svg{width:16px;height:16px;}
.foot-bottom{border-top:1px solid var(--line);padding-top:1.4rem;font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.disclaimer{font-size:.78rem;color:var(--muted);max-width:86ch;margin-top:1.2rem;}
.footer-widgets{margin-bottom:1.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem;}
.footer-widgets .widget h4,.footer-widgets .widget h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .8em;}
.footer-widgets ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em;font-size:.88rem;}
.footer-widgets a{color:var(--muted);text-decoration:none;}
.footer-widgets a:hover{color:var(--brand-ink);}

/* ============================================================
   17b. FLUID TYPE, CARD MOTION & LONG-FORM CONTENT
   Folded in from the site's Additional CSS so it ships with the
   theme. Everything here is theme-level; the plugin-specific
   rules live in assets/css/integrations.css.
   ============================================================ */

/* ---------- fluid headings ---------- */
.hero h1,.page-hero h1{
  font-size:clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  line-height:1.08;letter-spacing:-.025em;text-wrap:balance;
}
.entry-content h2,.section-head h2{
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height:1.2;letter-spacing:-.015em;text-wrap:balance;
}
.entry-content h3{font-size:clamp(1.125rem, 1rem + .5vw, 1.35rem);line-height:1.35;}
.lede,.hero .lede{font-size:clamp(1rem, .95rem + .35vw, 1.2rem);}
@media (min-width:1600px){body{font-size:17px;}}

/* ---------- card motion ---------- */
.card,.post-card,.answer-card,.bank-card,.inv-card,.gauge-card,.stat,.step,.ezc-card{
  box-shadow:var(--card-shadow);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover,.post-card:hover,.answer-card:hover,.bank-card:hover,
  .inv-card:hover,.step:hover,.ezc-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--card-shadow-hover);
    border-color:color-mix(in srgb, var(--brand) 35%, var(--line));
  }
}

/* ---------- pills ---------- */
.bank-chip,.ezc-pill,.answer-card__label{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.3em .8em;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-ink);
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  font-weight:600;font-size:.8125rem;line-height:1.3;
}

/* ---------- button motion ---------- */
.btn,.wp-block-button__link,.wp-element-button{
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
@media (prefers-reduced-motion:no-preference){
  .btn-primary:hover,.wp-block-button__link:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 25%, transparent);
  }
}
.btn:focus-visible,.wp-block-button__link:focus-visible,
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:var(--ring) solid var(--brand);outline-offset:3px;
}
.wp-block-button__link.has-background:not(.has-white-background-color){
  background-color:var(--brand) !important;
  background-image:none !important;
  color:var(--on-brand) !important;
}

/* ---------- long-form measure & media ---------- */
.site-content,main.site-main,.wp-site-blocks{width:100%;max-width:100%;}
article.entry-content,.entry-content{width:100%;max-width:100%;}
.entry-content > p,.entry-content > ul,.entry-content > ol,
.entry-content > h2,.entry-content > h3,.entry-content > h4,
.entry-content > blockquote{max-width:var(--measure);}
.entry-content > .alignfull{
  padding-inline:max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  box-sizing:border-box;
}
.alignfull .alignfull{margin-inline:0;width:100%;max-width:100%;padding-inline:0;}
.alignwide{max-width:100%;margin-inline:0;}
.wp-block-columns:not(.alignfull),.wp-block-group:not(.alignfull),
.wp-block-cover__inner-container{max-width:100%;}

.entry-content img,.entry-content iframe,.entry-content video,.entry-content embed{
  max-width:100%;height:auto;
}
.entry-content figure.wp-block-image{display:block;max-width:100%;}
.entry-content figure.wp-block-image.aligncenter img{display:block;margin-inline:auto;}
.entry-content figure.wp-block-image img{max-width:100% !important;height:auto !important;}
.entry-content iframe[src*="youtube"],.entry-content iframe[src*="vimeo"]{
  aspect-ratio:16/9;width:100%;height:auto;
}

/* ---------- block tables ---------- */
.entry-content .wp-block-table{overflow-x:auto;}
.entry-content .wp-block-table table{min-width:560px;width:100%;border-collapse:collapse;}
.entry-content .wp-block-table th{background:var(--brand-soft);text-align:left;}
.entry-content .wp-block-table th,.entry-content .wp-block-table td{
  padding:12px 14px;border:1px solid var(--line);
}

/* ---------- <details> accordions in post content ---------- */
.entry-content details,.ezc-faq details{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);margin-block:12px;max-width:var(--measure);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.entry-content details[open],.ezc-faq details[open]{
  border-color:color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow:var(--card-shadow);
}
.entry-content summary,.ezc-faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:18px 22px;font-weight:700;
  color:var(--ink);line-height:1.4;
}
.entry-content summary::-webkit-details-marker,
.ezc-faq summary::-webkit-details-marker{display:none;}
.entry-content summary::after,.ezc-faq summary::after{
  content:"+";flex:none;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:1.25rem;color:var(--brand-ink);transition:transform .22s ease;
}
.entry-content details[open] > summary::after,
.ezc-faq details[open] > summary::after{transform:rotate(45deg);}
.entry-content details > :not(summary),.ezc-faq details > :not(summary){
  padding:0 22px 20px;margin:0;color:var(--muted);
}

/* ---------- offer grid ---------- */
.eze-offer-grid{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);margin-block:clamp(20px,3vw,36px);
  padding:0;list-style:none;
}
@media (min-width:1024px){.eze-offer-grid{grid-template-columns:repeat(4, minmax(0,1fr));}}
.eze-offer-grid > *{
  margin:0;padding:clamp(16px,2vw,24px);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--card-shadow);
}
.eze-offer-grid .eze-offer--highlight{
  background:var(--brand-soft);
  border-color:color-mix(in srgb, var(--brand) 30%, transparent);
}
.eze-offer-grid strong{
  display:block;font-size:clamp(1.35rem, 1rem + 1.4vw, 2rem);
  line-height:1.1;color:var(--brand-ink);letter-spacing:-.02em;
}
.eze-offer-grid span{display:block;margin-top:.35rem;color:var(--muted);font-size:.9rem;line-height:1.4;}

/* ---------- tick lists ---------- */
ul.eze-checks,.eze-checks ul{
  list-style:none;padding:0;margin-block:20px;display:grid;
  grid-template-columns:1fr;gap:12px 28px;max-width:100%;
}
@media (min-width:768px){
  ul.eze-checks,.eze-checks ul{grid-template-columns:repeat(2, minmax(0,1fr));}
}
ul.eze-checks li,.eze-checks li{position:relative;padding-left:32px;line-height:1.5;}
ul.eze-checks li::before,.eze-checks li::before{
  content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;
  border-radius:50%;
  background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231b7a43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ---------- small-screen block layout ---------- */
@media (max-width:1023px){
  .wp-block-columns{flex-wrap:wrap !important;}
  .wp-block-columns > .wp-block-column{flex-basis:calc(50% - 1rem) !important;}
}
@media (max-width:767px){
  .wp-block-columns > .wp-block-column{flex-basis:100% !important;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{justify-content:center;}
  .entry-content .wp-block-button.has-custom-width{width:100% !important;}
  .wp-block-button__link.has-x-large-font-size{font-size:1.1rem !important;}
}

/* ============================================================
   18. UTILITIES
   ============================================================ */

.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mt-1{margin-top:.6rem;}
.mt-2{margin-top:1.2rem;}
.mt-3{margin-top:2rem;}
.mb-0{margin-bottom:0;}
.mb-2{margin-bottom:1.2rem;}
.mb-3{margin-bottom:2rem;}
.justify-center{justify-content:center;}
.empty-state{color:var(--muted);font-size:.94rem;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--radius);padding:1.6rem;}

/* Print */
@media print{
  .site-header,.site-footer,.cta-band,.nav-toggle,.primary-nav,.pagination,.comment-respond{display:none!important;}
  body{background:#fff;color:#000;}
  .card,.table-wrap{border-color:#ccc;box-shadow:none;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555;}
}