/* Screaming Power - site enhancement layer.
   Scoped under .se-* / [data-se-*] so it cannot collide with existing site CSS. */

/* ============================================================
   1. New Feature Highlight section (home + EZGB)
   ============================================================ */
.se-feature-section{padding:5rem 0;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);position:relative;overflow:hidden}
.se-feature-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#cbd5e1 50%,transparent)}
.se-feature-section .se-inner{max-width:80rem;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
/* When the feature highlight is placed INLINE inside wp-content (EZGB page),
   trim the vertical padding and lose the gradient background so it sits
   naturally between sections rather than reading like a separate page band. */
.se-feature-section.se-feature-inline{padding:2.5rem 0 1rem;background:none;margin:2rem 0 1rem}
.se-feature-section.se-feature-inline::before{display:none}
.se-feature-section.se-feature-inline .se-inner{padding:0}
.se-feature-section.se-feature-inline .se-feature-head{margin-bottom:1.75rem}
.se-feature-section.se-feature-inline .se-feature-head h2{font-size:clamp(1.5rem,2.5vw,2rem)}
.se-feature-section.se-feature-inline .se-feature-head p{font-size:1rem}
.se-feature-section.se-feature-inline .se-feature-card{padding:2rem;min-height:0}
.se-feature-section.se-feature-inline .se-feature-card h3{font-size:clamp(1.25rem,2.25vw,1.625rem)}
.se-feature-section.se-feature-inline .se-side-card{padding:1.125rem}
.se-feature-head{text-align:center;max-width:48rem;margin:0 auto 3rem}
.se-kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);border:1px solid #6ee7b7;border-radius:9999px;color:#047857;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.25rem}
.se-kicker svg{width:.85rem;height:.85rem}
.se-feature-head h2{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:700;color:#0f172a;letter-spacing:-.025em;line-height:1.15;margin:0 0 1rem}
.se-feature-head p{font-size:1.125rem;color:#64748b;line-height:1.6;margin:0}
.se-card-row{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:72rem;margin:0 auto}
@media (min-width:1024px){.se-card-row{grid-template-columns:1.4fr 1fr}}
.se-feature-card{background:linear-gradient(135deg,#0a1628 0%,#0f1f3a 50%,#1e293b 100%);border-radius:1.25rem;padding:3rem;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:24rem}
.se-feature-card::before{content:"";position:absolute;top:-50%;right:-30%;width:80%;height:200%;background:radial-gradient(ellipse,rgba(16,185,129,.25) 0%,transparent 60%);pointer-events:none}
.se-feature-card::after{content:"";position:absolute;bottom:-20%;left:-10%;width:60%;height:120%;background:radial-gradient(ellipse,rgba(245,158,11,.12) 0%,transparent 60%);pointer-events:none}
.se-feature-card .se-content{position:relative;z-index:1}
.se-feature-card .se-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;background:rgba(16,185,129,.2);border:1px solid rgba(16,185,129,.4);border-radius:9999px;color:#6ee7b7;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.25rem}
.se-feature-card h3{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 1rem;color:#fff}
.se-feature-card h3 .accent{color:#34d399}
.se-feature-card .se-built-on{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;color:#cbd5e1;letter-spacing:.02em;margin:0 0 1.25rem;padding:.4rem .8rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:9999px}
.se-feature-card .se-built-on .pulse{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:se-pulse 1.8s ease-out infinite}
.se-feature-card .se-built-on strong{color:#fff;font-weight:700}
@keyframes se-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.se-feature-card p{font-size:1.05rem;line-height:1.55;color:#cbd5e1;margin:0 0 1.5rem;max-width:32rem}
.se-feature-card .se-meta{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0 0 1.5rem}
.se-feature-card .se-meta span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;color:#94a3b8;font-weight:500}
.se-feature-card .se-meta svg{width:.95rem;height:.95rem;color:#10b981}
.se-cta-row{display:flex;flex-wrap:wrap;gap:.625rem}
.se-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:.625rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s ease;border:1px solid transparent;letter-spacing:.01em}
.se-btn-primary{background:#10b981;color:#fff !important}
.se-btn-primary:hover{background:#059669;transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(16,185,129,.4)}
.se-btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff !important}
.se-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.se-btn svg{width:1rem;height:1rem}
.se-side{display:flex;flex-direction:column;gap:1rem;justify-content:center}
.se-side-card{padding:1.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;display:flex;gap:1rem;align-items:flex-start;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.se-side-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(15,23,42,.12);border-color:#a7f3d0}
.se-side-icon{flex:0 0 2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.625rem;background:linear-gradient(135deg,#ecfdf5 0%,#a7f3d0 100%);color:#047857}
.se-side-icon svg{width:1.25rem;height:1.25rem}
.se-side-card h4{font-size:.95rem;font-weight:700;color:#0f172a;margin:0 0 .35rem;letter-spacing:-.01em}
.se-side-card p{font-size:.85rem;line-height:1.5;color:#64748b;margin:0}

/* ============================================================
   2. EZGB page wp-content polish + restructured grids
   ============================================================ */

/* Container */
[data-se-ezgb] .wp-content{max-width:64rem;margin:0 auto}

/* Typography */
[data-se-ezgb] .wp-content h1,
[data-se-ezgb] .wp-content h2,
[data-se-ezgb] .wp-content h3,
[data-se-ezgb] .wp-content h4{letter-spacing:-.015em;color:#0f172a}
[data-se-ezgb] .wp-content h1{font-size:clamp(1.875rem,3.5vw,2.5rem);margin:0 0 1.25rem;line-height:1.2}
[data-se-ezgb] .wp-content h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;margin:3rem 0 1.25rem;line-height:1.2;position:relative}
[data-se-ezgb] .wp-content h3{font-size:1.375rem;margin:2rem 0 .75rem;font-weight:700}
[data-se-ezgb] .wp-content h4{font-size:1.15rem;margin:1.5rem 0 .5rem;font-weight:600;color:#334155}
[data-se-ezgb] .wp-content > p,
[data-se-ezgb] .wp-content h2 ~ p:not(.se-faq-a):not(.se-feat-card p){font-size:1.0625rem;line-height:1.75;color:#334155;margin:0 0 1.25rem}
[data-se-ezgb] .wp-content ul,
[data-se-ezgb] .wp-content ol{padding-left:1.5rem;margin:0 0 1.25rem;color:#334155}
[data-se-ezgb] .wp-content li{margin:.5rem 0;line-height:1.6}
[data-se-ezgb] .wp-content a:not(.se-btn):not(summary){color:#059669;text-decoration:none;border-bottom:1px solid rgba(5,150,105,.3);transition:border-color .2s ease,color .2s ease;padding-bottom:1px}
[data-se-ezgb] .wp-content a:not(.se-btn):not(summary):hover{color:#047857;border-color:#047857}
[data-se-ezgb] .wp-content blockquote{border-left:4px solid #059669;background:#f0fdf4;padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0 .5rem .5rem 0;font-style:italic;color:#064e3b}

/* Section kickers (small label above each h2) */
[data-se-ezgb] .se-kicker-label{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border:1px solid #6ee7b7;border-radius:9999px;color:#047857;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:2.5rem;margin-bottom:.5rem}
[data-se-ezgb] .se-kicker-label::before{content:"";display:inline-block;width:.375rem;height:.375rem;background:#10b981;border-radius:50%}
[data-se-ezgb] .wp-content .se-kicker-label + h2{margin-top:.5rem}

/* Features of EZGB: 3-column step cards */
[data-se-ezgb] .se-feat-row{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.5rem 0 2.5rem}
@media (min-width:768px){[data-se-ezgb] .se-feat-row{grid-template-columns:repeat(3,1fr)}}
[data-se-ezgb] .se-feat-card{position:relative;padding:1.75rem 1.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;display:flex;flex-direction:column;gap:.5rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden}
[data-se-ezgb] .se-feat-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#10b981 0%,#34d399 50%,#10b981 100%);opacity:.0;transition:opacity .25s ease}
[data-se-ezgb] .se-feat-card:hover{transform:translateY(-3px);box-shadow:0 18px 32px -14px rgba(15,23,42,.15);border-color:#a7f3d0}
[data-se-ezgb] .se-feat-card:hover::before{opacity:1}
[data-se-ezgb] .se-feat-step{font-size:.75rem;font-weight:800;letter-spacing:.1em;color:#059669;margin-bottom:.25rem;font-feature-settings:"tnum"}
[data-se-ezgb] .se-feat-title{font-size:1.1rem;font-weight:700;color:#0f172a;letter-spacing:-.01em;margin:0 0 .25rem !important;line-height:1.3}
[data-se-ezgb] .se-feat-card p{font-size:.95rem;line-height:1.65;color:#475569;margin:0 !important}

/* EZGB Advantages: 3-column rich cards with image + icon */
[data-se-ezgb] .se-adv-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin:1.5rem 0 2.5rem;list-style:none}
@media (min-width:640px){[data-se-ezgb] .se-adv-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){[data-se-ezgb] .se-adv-grid{grid-template-columns:repeat(3,1fr)}}
[data-se-ezgb] .se-adv-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
[data-se-ezgb] .se-adv-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -16px rgba(15,23,42,.18);border-color:#a7f3d0}
[data-se-ezgb] .se-adv-frame{position:relative;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#f0fdf4 0%,#d1fae5 100%);overflow:hidden}
[data-se-ezgb] .se-adv-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}
[data-se-ezgb] .se-adv-card:hover .se-adv-frame img{transform:scale(1.06)}
[data-se-ezgb] .se-adv-body{padding:1.5rem;position:relative}
[data-se-ezgb] .se-adv-icon{position:absolute;top:-1.5rem;right:1.25rem;width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;color:#047857;box-shadow:0 8px 20px -8px rgba(15,23,42,.15)}
[data-se-ezgb] .se-adv-icon svg{width:1.4rem;height:1.4rem}
[data-se-ezgb] .se-adv-body h5{font-size:1.0625rem;font-weight:700;color:#0f172a;letter-spacing:-.01em;margin:0 0 .5rem !important;line-height:1.3;padding-right:2.75rem}
[data-se-ezgb] .se-adv-body p{font-size:.925rem;line-height:1.6;color:#475569;margin:0 !important}

/* Anything left as a stray h5+img+p outside our restructure */
[data-se-ezgb] .wp-content h5{font-size:1rem;font-weight:700;color:#0f172a;margin:1.5rem 0 .35rem}

/* FAQs accordion */
[data-se-ezgb] .se-faq{max-width:48rem;margin:1.5rem auto 2rem;display:flex;flex-direction:column;gap:.625rem}
[data-se-ezgb] .se-faq-item{background:#fff;border:1px solid #e2e8f0;border-radius:.875rem;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
[data-se-ezgb] .se-faq-item[open]{border-color:#a7f3d0;box-shadow:0 12px 24px -12px rgba(15,23,42,.1)}
[data-se-ezgb] .se-faq-q{list-style:none;cursor:pointer;padding:1.125rem 1.375rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;color:#0f172a;font-weight:600;font-size:1rem;line-height:1.45;-webkit-user-select:none;user-select:none}
[data-se-ezgb] .se-faq-q::-webkit-details-marker{display:none}
[data-se-ezgb] .se-faq-q:hover{color:#047857}
[data-se-ezgb] .se-faq-q-text{flex:1}
[data-se-ezgb] .se-faq-q-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:#059669;transition:transform .25s ease}
[data-se-ezgb] .se-faq-item[open] .se-faq-q-icon{transform:rotate(180deg)}
[data-se-ezgb] .se-faq-q-icon svg{width:1rem;height:1rem}
[data-se-ezgb] p.se-faq-a{padding:0 1.375rem 1.25rem !important;margin:0 !important;color:#475569 !important;font-size:.975rem !important;line-height:1.65 !important}

/* Visible image polish for any other wp-content figures */
[data-se-ezgb] .wp-content figure{margin:2rem 0;border-radius:1rem;overflow:hidden;box-shadow:0 6px 18px -8px rgba(15,23,42,.12)}
[data-se-ezgb] .wp-content figure img{max-width:100%;height:auto;display:block;border-radius:1rem;transition:transform .4s ease}
[data-se-ezgb] .wp-content figure:hover img{transform:scale(1.02)}

/* Cap ANY standalone image inside wp-content (images outside the .se-adv-frame).
   Caps at ~480px so the page is never dominated by a single oversized image.
   The more specific .se-adv-frame img rule above wins for advantage cards. */
[data-se-ezgb] .wp-content img{max-width:100%;height:auto;display:block}
[data-se-ezgb] .wp-content > img,
[data-se-ezgb] .wp-content > p > img,
[data-se-ezgb] .wp-content > a > img{
  max-width:min(100%,30rem);
  margin:2rem auto;
  border-radius:1rem;
  box-shadow:0 12px 28px -14px rgba(15,23,42,.18);
}
/* The little EZGB logo at the top of the page (150x150) — render at its
   declared size centered, not card-frame-styled. */
[data-se-ezgb] .wp-content > img[width="150"]{
  max-width:9.5rem;
  box-shadow:none;
  background:transparent;
  margin:1.5rem auto;
}
/* Portrait product image (the "Why EZGB?" infographic, 230x452) is naturally
   tall; cap height instead of width so it never stretches the page. */
[data-se-ezgb] .wp-content > img[height="452"]{
  max-width:14rem;
  margin:1.5rem auto;
}

/* The "VISIT OUR EZGB WEBSITE" inline link tweak */
[data-se-ezgb] .wp-content a[href*="ezgb"]{font-weight:600}

/* Table polish if any */
[data-se-ezgb] .wp-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
[data-se-ezgb] .wp-content table th,
[data-se-ezgb] .wp-content table td{padding:.75rem 1rem;border:1px solid #e2e8f0;text-align:left}
[data-se-ezgb] .wp-content table th{background:#f1f5f9;font-weight:600;color:#0f172a}

/* ============================================================
   3. Re-assert feature highlight colors when nested inside wp-content
   ============================================================
   When the BillScan feature section is injected INSIDE .wp-content on the
   EZGB page (so it sits between Features of EZGB and EZGB Advantages), the
   EZGB-scoped typography rules above ([data-se-ezgb] .wp-content h3 etc.)
   would otherwise win and render dark text on the dark card. These
   overrides re-state the design colors at the same specificity (0,2,1)
   and come AFTER in the cascade so they win. */

/* Dark card text */
[data-se-ezgb] .se-feature-card h3{color:#fff;font-size:clamp(1.25rem,2.25vw,1.625rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 1rem}
[data-se-ezgb] .se-feature-card h3 .accent{color:#34d399}
[data-se-ezgb] .se-feature-card p{color:#cbd5e1;font-size:1.05rem;line-height:1.55;margin:0 0 1.5rem;max-width:32rem}
[data-se-ezgb] .se-feature-card .se-built-on{color:#cbd5e1}
[data-se-ezgb] .se-feature-card .se-built-on strong{color:#fff}
[data-se-ezgb] .se-feature-card .se-eyebrow{color:#6ee7b7;background:rgba(16,185,129,.2);border:1px solid rgba(16,185,129,.4)}
[data-se-ezgb] .se-feature-card .se-meta span{color:#94a3b8}
[data-se-ezgb] .se-feature-card .se-meta svg{color:#10b981}

/* Section header (above the card row) — sits on the light wp-content
   background. Re-state sizes/colors so they aren't overridden by the
   generic wp-content h2/p rules. */
[data-se-ezgb] .se-feature-head h2{color:#0f172a;font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:0 0 1rem}
[data-se-ezgb] .se-feature-head p{color:#64748b;font-size:1rem;line-height:1.6;margin:0}

/* Side cards (light bg) */
[data-se-ezgb] .se-side-card h4{color:#0f172a;font-size:.95rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .35rem}
[data-se-ezgb] .se-side-card p{color:#64748b;font-size:.85rem;line-height:1.5;margin:0;max-width:none}

/* Make sure the CTA button text colors aren't overridden by the EZGB
   wp-content link color (#059669 with underline) — we want the buttons
   to keep their own styling. */
[data-se-ezgb] .se-feature-card .se-btn{border-bottom:0;padding-bottom:.75rem}
[data-se-ezgb] .se-feature-card .se-btn-primary{color:#fff !important}
[data-se-ezgb] .se-feature-card .se-btn-ghost{color:#fff !important;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18)}
[data-se-ezgb] .se-feature-card .se-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}