/* ============================================================
   Ultra CSS v4 — Page Design System
   ============================================================
   Scope: anything wrapped in #ultra-v4.
   Pages adopt by:  <link rel="stylesheet" href="css/ultra-css-v4.css">
                    <div id="ultra-v4"> ...page content... </div>

   Design tokens are defined as CSS custom properties on #ultra-v4
   and overridden under [data-theme="light"] for light-mode theme.
   Drop-in compatible with the existing ultra-theme.js theme toggle.

   First adopted: shared-web-hosting
   ============================================================ */

/* ============================================================ ultra-v4 SCOPE ============================================================ */
#ultra-v4 {
  --bg-page:#040b14; --bg-elev:#0f2138; --bg-elev-2:#142a45; --bg-elev-3:#1a334f;
  --border:#1c3046; --border-soft:rgba(255,255,255,0.08);
  --text:#ffffff; --text-muted:#c5d3e3; --text-dim:#8aa1bb;
  --accent:#1b84da; --accent-2:#4da6e8; --accent-3:#1559b3;
  --accent-soft:rgba(27,132,218,0.12); --accent-soft-2:rgba(77,166,232,0.16);
  --gold:#F5C648; --orange:#fe9f0d;
  --card-bg:#0f2138; --card-bg-2:#142a45; --card-border:#1c3046;
  --section-band:rgba(27,132,218,0.06);
  --shadow-cta:0 8px 30px -8px rgba(27,132,218,0.55);
  font-family:'Inter',sans-serif; color:var(--text); background:var(--bg-page);
}
[data-theme="light"] #ultra-v4 {
  --bg-page:#f6f6f6; --bg-elev:#ffffff; --bg-elev-2:#ffffff; --bg-elev-3:#eaf2fb;
  --border:#dde5ee; --border-soft:rgba(27,132,218,0.08);
  --text:#1a2533; --text-muted:#5a6c80; --text-dim:#8aa1bb;
  --accent:#1b84da; --accent-2:#1a73e8; --accent-3:#1559b3;
  --accent-soft:rgba(27,132,218,0.14); --accent-soft-2:rgba(123,103,255,0.09);
  --gold:#e6a82e; --orange:#f08827;
  --card-bg:#ffffff; --card-bg-2:#f6f6f6; --card-border:#dde5ee;
  --section-band:rgba(27,132,218,0.045);
}
#ultra-v4 * { box-sizing:border-box }
#ultra-v4 a { color:var(--accent-2); text-decoration:none; }
#ultra-v4 a:hover { text-decoration:underline; }
#ultra-v4 img { display:block; }
#ultra-v4 .shell { max-width:1280px; margin:0 auto; padding:0 24px; }

/* ============================================================ HERO ============================================================ */
#ultra-v4 .hero { position:relative; padding:72px 0 80px; overflow:hidden; text-align:center; background:radial-gradient(ellipse 80% 50% at 50% 100%, var(--accent-soft), transparent 60%), radial-gradient(circle 600px at 80% 30%, var(--accent-soft-2), transparent 50%); }
#ultra-v4 .hero-coupon-pill { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, rgba(254,159,13,0.15), rgba(254,159,13,0.05)); border:1px solid rgba(254,159,13,0.4); color:var(--orange); font-size:12px; font-weight:700; letter-spacing:0.5px; padding:7px 14px; border-radius:99px; margin-bottom:22px; text-decoration:none; }
#ultra-v4 .hero-coupon-pill code { background:rgba(254,159,13,0.22); color:var(--orange); padding:2px 8px; border-radius:4px; font-family:inherit; font-size:inherit; letter-spacing:1px; font-weight:700; border:0; }
#ultra-v4 .hero-pips { font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent-2); margin-bottom:24px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
#ultra-v4 .hero-pips span.sep { color:var(--text-dim); opacity:0.6; font-weight:400; }
#ultra-v4 .hero h1 { font-size:clamp(40px,5.2vw,62px); font-weight:800; line-height:1.06; letter-spacing:-0.03em; margin:0 auto 14px; max-width:920px; text-wrap:balance; color:var(--text); }
#ultra-v4 .hero-tagline { font-size:14px; font-weight:700; letter-spacing:2.6px; text-transform:uppercase; color:var(--text-muted); margin:0 auto 36px; max-width:900px; line-height:1.5; }
#ultra-v4 .hero-tagline strong { color:var(--accent-2); font-weight:700; }
#ultra-v4 .hero-ctas { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; margin:0 auto 36px; }
#ultra-v4 .hero-tech { display:flex; gap:48px; align-items:center; flex-wrap:wrap; justify-content:center; margin:0 auto 36px; max-width:840px; }
#ultra-v4 .hero-tech img { display:block; height:28px; max-width:100px; width:auto; object-fit:contain; opacity:0.78; transition:opacity 0.2s, filter 0.2s; }
#ultra-v4 .hero-tech img:hover { opacity:1; }
[data-theme="dark"] #ultra-v4 .hero-tech img { filter:brightness(0) invert(1) opacity(0.85); }
#ultra-v4[data-no-invert] .hero-tech img { filter:none; }
html:not([data-theme="light"]) #ultra-v4 .hero-tech img { filter:brightness(0) invert(1) opacity(0.85); }
#ultra-v4 .cta-primary { background:var(--accent); color:#fff !important; padding:15px 30px; border-radius:10px; font-weight:700; font-size:15px; box-shadow:var(--shadow-cta); display:inline-flex; align-items:center; gap:10px; text-decoration:none !important; }
#ultra-v4 .cta-secondary { background:transparent; border:1px solid var(--border); color:var(--text) !important; padding:15px 24px; border-radius:10px; font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px; text-decoration:none !important; }
#ultra-v4 .hero-trust { display:flex; align-items:center; gap:24px 32px; flex-wrap:wrap; justify-content:center; color:var(--text-muted); font-size:13.5px; }
#ultra-v4 .hero-trust strong { color:var(--text); font-weight:700; }
#ultra-v4 .hero-trust .stars { color:var(--gold); letter-spacing:2px; font-size:14px; }
#ultra-v4 .hero-trust .divider { width:1px; height:18px; background:var(--border); }

/* ============================================================ STAT RIBBON (4-tile gradient stat row) ============================================================ */
#ultra-v4 .stat-ribbon { padding:30px 0; }
#ultra-v4 .stat-ribbon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
#ultra-v4 .sr-card { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-radius:14px; padding:32px 22px; text-align:center; box-shadow:0 12px 30px -10px rgba(27,132,218,0.45); }
#ultra-v4 .sr-card .sr-num { font-size:38px; font-weight:800; letter-spacing:-1px; line-height:1; }
#ultra-v4 .sr-card .sr-lbl { font-size:11.5px; color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:1.4px; margin-top:8px; font-weight:600; }

/* ============================================================ SECTION HEAD ============================================================ */
#ultra-v4 .section-head { text-align:center; margin-bottom:50px; }
#ultra-v4 .section-head .eyebrow { color:var(--accent-2); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
#ultra-v4 .section-head h2 { font-size:42px; font-weight:800; letter-spacing:-0.025em; margin:0 0 14px; line-height:1.1; color:var(--text); }
#ultra-v4 .section-head p { color:var(--text-muted); margin:0 auto; max-width:680px; font-size:16px; }

/* ============================================================ PLAN CARDS (3-up grid with ribbons + featured medal) ============================================================ */
#ultra-v4 .plans { padding:50px 0 70px; }
#ultra-v4 .plans-row { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; margin-top:72px; }
#ultra-v4 .plan-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:80px 28px 36px; position:relative; display:flex; flex-direction:column; overflow:visible; }
#ultra-v4 .plan-card.featured { background:linear-gradient(160deg, var(--accent-3) 0%, var(--accent) 100%); color:#fff; border-color:transparent; box-shadow:0 24px 60px -20px rgba(27,132,218,0.6); }
/* Corner ribbon — verbatim from pricingTables-styles.css (green default = Value, blue variant = Powerful) */
#ultra-v4 .plan-card .plans-ribbon { position:absolute; right:-5px; top:-5px; z-index:5; overflow:hidden; width:75px; height:75px; text-align:right; pointer-events:none; }
#ultra-v4 .plan-card .plans-ribbon span {
  font-family:Roboto,sans-serif; font-size:10px; color:#fff;
  text-transform:uppercase; text-align:center; font-weight:700;
  line-height:20px; transform:rotate(45deg); -webkit-transform:rotate(45deg);
  width:100px; display:block;
  background:#79A70A; background:linear-gradient(#9BC90D 0%,#79A70A 100%);
  box-shadow:0 3px 10px -5px rgba(0,0,0,1);
  position:absolute; top:19px; right:-21px;
}
#ultra-v4 .plan-card .plans-ribbon span::before,
#ultra-v4 .plan-card .plans-ribbon span::after { content:''; position:absolute; top:100%; z-index:-1; border-bottom:3px solid transparent; border-top:3px solid #79A70A; }
#ultra-v4 .plan-card .plans-ribbon span::before { left:0; border-left:3px solid #79A70A; border-right:3px solid transparent; }
#ultra-v4 .plan-card .plans-ribbon span::after  { right:0; border-right:3px solid #79A70A; border-left:3px solid transparent; }
#ultra-v4 .plan-card .plans-ribbon.ribbon-blue span { background:linear-gradient(#2989d8 0%,#1e5799 100%); }
#ultra-v4 .plan-card .plans-ribbon.ribbon-blue span::before,
#ultra-v4 .plan-card .plans-ribbon.ribbon-blue span::after { border-top-color:#1e5799; }
#ultra-v4 .plan-card .plans-ribbon.ribbon-blue span::before { border-left-color:#1e5799; }
#ultra-v4 .plan-card .plans-ribbon.ribbon-blue span::after  { border-right-color:#1e5799; }
/* Gold sunburst Popular medal */
#ultra-v4 .plan-card .uwh-plan-popular-badge {
  position:absolute; top:-50px; left:50%; transform:translateX(-50%);
  width:120px; height:120px;
  background:url('https://ultracdn.ultrawebhosting.com/css/plans/skins/ultra/popular.png') no-repeat center/contain;
  display:flex; align-items:center; justify-content:center;
  color:#ffffff !important; font-weight:700; font-size:18px;
  text-transform:none; letter-spacing:0;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  padding-bottom:24px; pointer-events:none; z-index:10;
}
#ultra-v4 .plan-card .tier { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; opacity:0.7; margin-bottom:6px; }
#ultra-v4 .plan-card h3 { font-size:22px; font-weight:800; margin:0 0 6px; }
#ultra-v4 .plan-card .tag { font-size:13px; opacity:0.7; margin:0 0 22px; }
#ultra-v4 .plan-card .price-pre { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; opacity:0.7; margin:0 0 4px; }
#ultra-v4 .plan-card .price { font-size:38px; font-weight:800; letter-spacing:-1px; margin:0 0 4px; line-height:1; }
#ultra-v4 .plan-card .price small { font-size:14px; font-weight:600; opacity:0.7; }
#ultra-v4 .plan-card .billed { font-size:11.5px; opacity:0.65; margin:0 0 22px; line-height:1.4; }
#ultra-v4 .plan-card .billed em { font-style:normal; opacity:0.85; }
/* Coupon code inside .billed em — orange callout matching .hero-coupon-pill code styling for cross-page consistency. */
#ultra-v4 .plan-card .billed code { background:rgba(254,159,13,0.22); color:var(--orange); font-family:inherit; font-size:11px; font-weight:700; letter-spacing:0.6px; padding:2px 7px; border-radius:4px; margin-left:2px; border:0; }
#ultra-v4 .plan-card.featured .billed code { background:rgba(255,255,255,0.18); color:#ffd9a0; }
/* Coupon code inside .compare-table cells (e.g. vps-hosting specs row "Setup fee | Free with promo code FREEDEDICATEDSETUP") — same orange pill treatment for visual consistency with the plan-card + hero pill callouts. */
#ultra-v4 .compare-table code { background:rgba(254,159,13,0.22); color:var(--orange); font-family:inherit; font-size:inherit; font-weight:700; letter-spacing:0.6px; padding:2px 7px; border-radius:4px; border:0; }
#ultra-v4 .plan-card ul { list-style:none; margin:0 0 24px; padding:0; flex:1; }
#ultra-v4 .plan-card li { font-size:13.5px; padding:6px 0; display:flex; gap:8px; align-items:flex-start; }
#ultra-v4 .plan-card li i { color:var(--accent-2); font-size:11px; margin-top:6px; }
#ultra-v4 .plan-card.featured li i { color:#9bd0ff; }
#ultra-v4 .plan-techs { display:flex; gap:14px; align-items:center; justify-content:center; padding:16px 0 18px; border-top:1px solid var(--border-soft); margin-top:auto; flex-wrap:wrap; }
#ultra-v4 .plan-techs .ti { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid var(--border-soft); color:var(--text-muted); font-size:15px; transition:color 0.2s, border-color 0.2s, background 0.2s; }
#ultra-v4 .plan-techs .ti:hover { color:var(--accent-2); border-color:rgba(27,132,218,0.45); background:var(--accent-soft); }
#ultra-v4 .plan-card.featured .plan-techs .ti { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.18); color:#fff; }
#ultra-v4 .plan-card .cta { display:block; background:var(--accent); color:#fff !important; text-align:center; padding:13px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none !important; }
#ultra-v4 .plan-card.featured .cta { background:#fff; color:var(--accent-3) !important; }
#ultra-v4 .plan-card .details-link { display:block; text-align:center; margin-top:14px; font-size:13px; font-weight:600; color:var(--accent-2) !important; text-decoration:none; }
#ultra-v4 .plan-card .details-link:hover { text-decoration:underline; }
#ultra-v4 .plan-card.featured .details-link { color:#fff !important; opacity:0.9; }

/* ============================================================
   LIGHT MODE: plan cards — blue gradient bg + white text/icons.
   The dark-mode rules above already paint .featured as a blue
   gradient; in light mode we extend that treatment to ALL cards
   so the row reads as a unified blue cluster against the white
   page bg. Featured stays differentiated via the gold Popular
   medal overhang + its slight margin-top elevation, not by color.
   ============================================================ */
[data-theme="light"] #ultra-v4 .plan-card {
  background:linear-gradient(160deg, var(--accent-2) 0%, var(--accent) 60%, var(--accent-3) 100%);
  border-color:rgba(255,255,255,0.18);
  color:#ffffff;
  box-shadow:0 8px 28px -10px rgba(21,89,179,0.35);
}
[data-theme="light"] #ultra-v4 .plan-card.featured {
  background:linear-gradient(160deg, var(--accent) 0%, var(--accent-3) 100%);
  box-shadow:0 24px 60px -20px rgba(21,89,179,0.55);
}
[data-theme="light"] #ultra-v4 .plan-card .tier { color:rgba(255,255,255,0.85); }
[data-theme="light"] #ultra-v4 .plan-card h3 { color:#ffffff; }
[data-theme="light"] #ultra-v4 .plan-card .tag { color:rgba(255,255,255,0.85); }
[data-theme="light"] #ultra-v4 .plan-card .price-pre { color:rgba(255,255,255,0.85); }
[data-theme="light"] #ultra-v4 .plan-card .price { color:#ffffff; }
[data-theme="light"] #ultra-v4 .plan-card .price small { color:rgba(255,255,255,0.85); }
[data-theme="light"] #ultra-v4 .plan-card .billed { color:rgba(255,255,255,0.85); }
[data-theme="light"] #ultra-v4 .plan-card .billed em { color:rgba(255,255,255,0.92); }
[data-theme="light"] #ultra-v4 .plan-card li { color:#ffffff; }
[data-theme="light"] #ultra-v4 .plan-card li i { color:#ffffff; }
[data-theme="light"] #ultra-v4 .plan-card li strong { color:#ffffff; }
[data-theme="light"] #ultra-v4 .plan-card .plan-techs { border-top-color:rgba(255,255,255,0.20); }
[data-theme="light"] #ultra-v4 .plan-card .plan-techs .ti { background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.24); color:#ffffff; }
[data-theme="light"] #ultra-v4 .plan-card .plan-techs .ti:hover { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.45); color:#ffffff; }
[data-theme="light"] #ultra-v4 .plan-card .cta { background:#ffffff !important; color:var(--accent-3) !important; }
[data-theme="light"] #ultra-v4 .plan-card .details-link { color:rgba(255,255,255,0.85) !important; }
[data-theme="light"] #ultra-v4 .plan-card .details-link:hover { color:#ffffff !important; }

/* ============================================================
   PLAN CARD — WIDE VARIANT (single-plan landing pages)
   Used by pages that sell a single product (e.g. wordpress-optimized-hosting).
   Stretches the .plan-card to the full container width with a 2-column
   internal layout: left rail (identity + price + tech icons + CTA),
   right pane (feature list in a 2-column CSS Grid). Preserves the gold
   sunburst Popular medal overhang.
   ============================================================ */
#ultra-v4 .plan-card.wide {
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:48px;
  padding:84px 44px 40px;
  align-items:stretch;
}
#ultra-v4 .plan-card.wide .plan-left {
  display:flex; flex-direction:column;
  border-right:1px solid var(--border-soft);
  padding-right:44px;
}
#ultra-v4 .plan-card.wide.featured .plan-left {
  border-right-color:rgba(255,255,255,0.20);
}
[data-theme="light"] #ultra-v4 .plan-card.wide .plan-left,
[data-theme="light"] #ultra-v4 .plan-card.wide.featured .plan-left {
  border-right-color:rgba(255,255,255,0.22);
}
#ultra-v4 .plan-card.wide .plan-right {
  display:flex; flex-direction:column;
}
#ultra-v4 .plan-card.wide ul {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:48px;
  row-gap:0;
  margin:0;
  flex:1;
}
/* CTA pinned to the bottom of the left rail so the bullets on the right and the CTA on the left bottom-align visually */
#ultra-v4 .plan-card.wide .plan-left .cta { margin-top:auto; }
/* Plan-techs strip sits below the price block + above the CTA in the left rail */
#ultra-v4 .plan-card.wide .plan-left .plan-techs {
  margin-top:18px; margin-bottom:14px;
  border-top:1px solid var(--border-soft);
  padding-top:16px;
}
#ultra-v4 .plan-card.wide.featured .plan-left .plan-techs {
  border-top-color:rgba(255,255,255,0.18);
}
[data-theme="light"] #ultra-v4 .plan-card.wide .plan-left .plan-techs,
[data-theme="light"] #ultra-v4 .plan-card.wide.featured .plan-left .plan-techs {
  border-top-color:rgba(255,255,255,0.20);
}
/* Responsive — collapse to single column on tablet, single-column features on phone */
@media (max-width:900px) {
  #ultra-v4 .plan-card.wide {
    grid-template-columns:1fr;
    padding:80px 28px 32px;
    gap:32px;
  }
  #ultra-v4 .plan-card.wide .plan-left {
    border-right:0;
    border-bottom:1px solid var(--border-soft);
    padding-right:0;
    padding-bottom:28px;
  }
  #ultra-v4 .plan-card.wide.featured .plan-left {
    border-bottom-color:rgba(255,255,255,0.20);
  }
}
@media (max-width:580px) {
  #ultra-v4 .plan-card.wide ul { grid-template-columns:1fr; column-gap:0; }
}

/* ============================================================ TRUST BADGES (Shopper Approved + American Cancer Society band) ============================================================ */
#ultra-v4 .trust-badges { padding:40px 0; }
#ultra-v4 .trust-badges-inner { background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:28px 36px; display:grid; grid-template-columns:1fr 1px 1fr; gap:36px; align-items:center; }
#ultra-v4 .trust-badges-inner .divider { width:1px; height:90px; background:var(--border); justify-self:center; }
#ultra-v4 .trust-badge { display:flex; gap:18px; align-items:center; }
#ultra-v4 .trust-badge img { display:block; flex-shrink:0; }
#ultra-v4 .trust-badge .badge-text { display:flex; flex-direction:column; gap:4px; }
#ultra-v4 .trust-badge .badge-title { font-size:15px; font-weight:700; color:var(--text); }
#ultra-v4 .trust-badge .badge-sub { font-size:13px; color:var(--text-muted); line-height:1.4; }
#ultra-v4 .trust-badge .badge-sub a { color:var(--accent-2); }
#ultra-v4 .trust-badge.sa img { width:80px; height:auto; background:#fff; padding:6px; border-radius:8px; }
#ultra-v4 .trust-badge.acs img { width:64px; height:auto; }
@media (max-width:800px) { #ultra-v4 .trust-badges-inner { grid-template-columns:1fr; } #ultra-v4 .trust-badges-inner .divider { width:80%; height:1px; } }

/* ============================================================ OWNED INFRASTRUCTURE BLOCK (.uwh-hw-section) ============================================================ */
#ultra-v4 .uwh-hw-section { padding:60px 0; }
#ultra-v4 .uwh-hw-card { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:40px; }
#ultra-v4 .uwh-hw-img { border-radius:14px; overflow:hidden; box-shadow:0 18px 50px -16px rgba(0,0,0,0.5); }
#ultra-v4 .uwh-hw-img img { display:block; width:100%; height:auto; }
#ultra-v4 .uwh-hw-text { text-align:left; }
#ultra-v4 .uwh-hw-eyebrow { color:var(--accent-2); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
#ultra-v4 .uwh-hw-text h2 { font-size:30px; font-weight:800; margin:0 0 14px; letter-spacing:-0.02em; color:var(--text); }
#ultra-v4 .uwh-hw-text p { color:var(--text-muted); font-size:15px; margin:0 0 20px; line-height:1.7; }
#ultra-v4 .uwh-hw-text ul { list-style:none; padding:0; margin:0; }
/* Block display (was flex — which collapsed the whitespace between <strong> and the rest of the bullet text). Padding-top nudges the text down to vertically center against the absolutely-positioned icon box. */
#ultra-v4 .uwh-hw-text li { font-size:14px; padding:8px 0 8px 40px; position:relative; color:var(--text-muted); line-height:1.55; min-height:36px; }
/* Icon box on each bullet — small colored badge with a Font Awesome check inside, mirrors the .why-icon pattern.
   font-family lists FA7 first (production fleet ships fontawesome7), with FA6 + bare FontAwesome as fallbacks
   so the same rule renders correctly in mockup contexts (which load FA6.5.1 from cdnjs). */
#ultra-v4 .uwh-hw-text li::before {
  content:"\f00c";
  font-family:"Font Awesome 7 Free", "Font Awesome 6 Free", "FontAwesome";
  font-weight:900;
  position:absolute;
  left:0; top:6px;
  width:28px; height:28px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
  border:1px solid rgba(27,132,218,0.3);
  color:var(--accent-2);
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#ultra-v4 .uwh-hw-text li strong { color:var(--text); font-weight:700; }
@media (max-width:900px) { #ultra-v4 .uwh-hw-card { grid-template-columns:1fr; } }

/* ============================================================ WHY GRID (3-col feature card grid) ============================================================ */
#ultra-v4 .why { padding:90px 0; }
#ultra-v4 .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
#ultra-v4 .why-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:28px; transition:transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
#ultra-v4 .why-card:hover { transform:translateY(-3px); border-color:rgba(27,132,218,0.45); box-shadow:0 16px 40px -20px rgba(27,132,218,0.3); }
#ultra-v4 .why-icon { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2)); border:1px solid rgba(27,132,218,0.3); display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:19px; margin-bottom:18px; }
#ultra-v4 .why-card h3 { font-size:17px; font-weight:700; margin:0 0 8px; }
#ultra-v4 .why-card p { font-size:13.5px; color:var(--text-muted); margin:0; line-height:1.6; }
/* Light mode: flip why-cards to blue with white text + white icons so they pop against the white page bg */
[data-theme="light"] #ultra-v4 .why-card {
  background:linear-gradient(160deg, var(--accent-2) 0%, var(--accent) 60%, var(--accent-3) 100%);
  border-color:rgba(255,255,255,0.18);
  color:#ffffff;
  box-shadow:0 6px 24px -10px rgba(21,89,179,0.35);
}
[data-theme="light"] #ultra-v4 .why-card:hover {
  border-color:rgba(255,255,255,0.45);
  box-shadow:0 18px 44px -14px rgba(21,89,179,0.5);
}
[data-theme="light"] #ultra-v4 .why-icon {
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.30);
  color:#ffffff;
}
[data-theme="light"] #ultra-v4 .why-card h3 { color:#ffffff; }
[data-theme="light"] #ultra-v4 .why-card p { color:rgba(255,255,255,0.92); }

/* ============================================================ EVERYTHING GRID (4-col tool grid, banded) ============================================================ */
#ultra-v4 .everything { padding:90px 0; background:linear-gradient(180deg, transparent, var(--section-band), transparent); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
#ultra-v4 .everything-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
#ultra-v4 .ev-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:24px; display:flex; gap:14px; align-items:flex-start; }
#ultra-v4 .ev-card i { color:var(--accent-2); font-size:20px; margin-top:2px; flex-shrink:0; width:26px; }
#ultra-v4 .ev-card h4 { margin:0 0 4px; font-size:14.5px; font-weight:700; }
#ultra-v4 .ev-card p { margin:0; font-size:12.5px; color:var(--text-muted); line-height:1.55; }

/* ============================================================ COMPARISON TABLE ============================================================ */
#ultra-v4 .compare { padding:90px 0; }
#ultra-v4 .compare-table { background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:32px; overflow:hidden; }
#ultra-v4 .compare-table table { width:100%; border-collapse:collapse; }
#ultra-v4 .compare-table th, #ultra-v4 .compare-table td { padding:16px 14px; text-align:left; border-bottom:1px solid var(--card-border); font-size:14px; }
#ultra-v4 .compare-table th { font-weight:700; color:var(--text); font-size:14.5px; }
#ultra-v4 .compare-table th.highlight, #ultra-v4 .compare-table td.highlight { background:rgba(27,132,218,0.06); color:var(--accent-2); }
#ultra-v4 .compare-table td:first-child { font-weight:600; color:var(--text); }
#ultra-v4 .compare-table tr:last-child td { border-bottom:0; }
#ultra-v4 .compare-table td i.yes { color:#4ade80; }
#ultra-v4 .compare-table td i.no { color:#94a3b8; opacity:0.5; }

/* ============================================================ DETAIL SECTIONS (2-up image + text rows, alternating) ============================================================ */
#ultra-v4 .detail-section { padding:80px 0; }
#ultra-v4 .detail-section.banded { background:linear-gradient(180deg, transparent, var(--section-band), transparent); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
#ultra-v4 .detail-row { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:1100px; margin:0 auto; }
#ultra-v4 .detail-row.reverse > :nth-child(1) { order:2; }
#ultra-v4 .detail-img { aspect-ratio:4/3; background:linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2)); border:1px solid var(--card-border); border-radius:16px; display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:72px; }
#ultra-v4 .detail-row .eyebrow { color:var(--accent-2); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
#ultra-v4 .detail-row h2 { font-size:32px; font-weight:800; letter-spacing:-0.02em; margin:0 0 14px; color:var(--text); }
#ultra-v4 .detail-row p { color:var(--text-muted); font-size:15px; margin:0 0 18px; line-height:1.75; }
#ultra-v4 .detail-row p strong { color:var(--text); font-weight:700; }
#ultra-v4 .detail-row ul { list-style:none; padding:0; }
#ultra-v4 .detail-row li { font-size:14px; padding:6px 0; display:flex; gap:8px; align-items:flex-start; color:var(--text-muted); line-height:1.55; }
#ultra-v4 .detail-row li i { color:var(--accent-2); font-size:12px; margin-top:6px; flex-shrink:0; }

/* ============================================================ PROSE (consolidated marketing card with accents) ============================================================ */
#ultra-v4 .prose { padding:90px 0; }
#ultra-v4 .prose-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:48px 56px; max-width:920px; margin:0 auto; }
#ultra-v4 .prose-card h2 { font-size:32px; font-weight:800; letter-spacing:-0.02em; margin:0 0 8px; text-align:center; color:var(--text); }
#ultra-v4 .prose-card .prose-tagline { color:var(--accent-2); font-size:13px; font-style:italic; text-align:center; margin:0 0 8px; }
#ultra-v4 .prose-card .prose-divider { width:50px; height:3px; background:var(--accent); border-radius:2px; margin:18px auto 32px; }
#ultra-v4 .prose-card h3 { font-size:20px; font-weight:700; margin:32px 0 12px; color:var(--text); }
#ultra-v4 .prose-card p { font-size:15.5px; color:var(--text-muted); margin:0 0 18px; line-height:1.85; }
#ultra-v4 .prose-card p strong { color:var(--text); font-weight:700; }
#ultra-v4 .prose-card .hl { background:var(--accent-soft); color:var(--accent-2); padding:1px 8px; border-radius:4px; font-weight:600; }
#ultra-v4 .prose-card a { color:var(--accent-2); font-weight:600; }

/* ============================================================ TRUST BAR (4-stat strip card) ============================================================ */
#ultra-v4 .trust-bar { padding:60px 0; }
#ultra-v4 .trust-bar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:36px; }
#ultra-v4 .trust-item { display:flex; gap:16px; align-items:center; }
#ultra-v4 .trust-item .ic { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2)); display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:20px; flex-shrink:0; }
#ultra-v4 .trust-item .stat { font-size:22px; font-weight:800; line-height:1; letter-spacing:-0.5px; }
#ultra-v4 .trust-item .lbl { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* ============================================================ TESTIMONIALS (3-up review cards) ============================================================ */
#ultra-v4 .testimonials { padding:90px 0; }
#ultra-v4 .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
#ultra-v4 .testimonial { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:30px; display:flex; flex-direction:column; }
#ultra-v4 .testimonial .stars { color:var(--gold); letter-spacing:2px; font-size:14px; margin-bottom:12px; }
#ultra-v4 .testimonial .body { font-size:14.5px; color:var(--text-muted); margin:0 0 22px; line-height:1.7; flex:1; }
#ultra-v4 .testimonial .who { display:flex; align-items:center; gap:12px; }
#ultra-v4 .testimonial .avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, var(--accent-3), var(--accent)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
#ultra-v4 .testimonial .name { font-size:13.5px; font-weight:700; }
#ultra-v4 .testimonial .role { font-size:12px; color:var(--text-dim); }

/* ============================================================ SHOWCASE BAND (full-bleed page-specific hero image with brand-blue gradient overlay) ============================================================ */
#ultra-v4 .showcase { padding:60px 0; }
#ultra-v4 .showcase-band { position:relative; border-radius:24px; overflow:hidden; min-height:380px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; box-shadow:0 20px 50px -25px rgba(15,22,35,0.4); }
#ultra-v4 .showcase-band .sb-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.8s ease; }
#ultra-v4 .showcase-band:hover .sb-bg { transform:scale(1.03); }
/* uh-grad-bottom treatment ported from ultra-hero.css - same two-layer overlay the originals had as full-page heroes: vertical dark fade pinning the bottom to brand-navy so text remains readable, plus a diagonal brand-blue sheen for the unified Ultra look. Multi-background syntax stacks sheen on top, dark fade below. */
#ultra-v4 .showcase-band .sb-overlay { position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(77,166,232,0.20) 50%, transparent 65%), linear-gradient(180deg, transparent 0%, rgba(12,25,41,0.30) 22%, rgba(20,55,95,0.70) 50%, rgba(20,55,95,0.93) 75%, rgba(12,25,41,0.97) 100%); }
#ultra-v4 .showcase-band h2, #ultra-v4 .showcase-band p, #ultra-v4 .showcase-band .sb-eyebrow { text-shadow:0 2px 12px rgba(0,0,0,0.5); }
#ultra-v4 .showcase-band .sb-content { position:relative; z-index:1; max-width:760px; padding:64px 36px; }
#ultra-v4 .showcase-band .sb-eyebrow { display:inline-block; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; padding:6px 14px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22); border-radius:99px; margin-bottom:18px; color:#fff; }
#ultra-v4 .showcase-band h2 { margin:0 0 16px; font-size:clamp(28px, 3.4vw, 38px); line-height:1.15; letter-spacing:-0.02em; font-weight:800; color:#fff; }
#ultra-v4 .showcase-band p { margin:0 0 26px; font-size:16px; line-height:1.6; color:rgba(255,255,255,0.92); }
#ultra-v4 .showcase-band .sb-cta { display:inline-block; background:#fff; color:var(--accent-3) !important; padding:12px 24px; border-radius:99px; text-decoration:none !important; font-weight:700; font-size:14px; transition:transform 0.15s, box-shadow 0.15s; }
#ultra-v4 .showcase-band .sb-cta:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,0.22); }
@media (max-width:760px) { #ultra-v4 .showcase-band { min-height:320px; } #ultra-v4 .showcase-band .sb-content { padding:48px 24px; } #ultra-v4 .showcase-band h2 { font-size:26px; } }

/* ============================================================ CTA BAND (gradient blue panel) ============================================================ */
#ultra-v4 .cta-band { margin:60px 0; padding:56px 50px; background:linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 100%); border-radius:24px; text-align:center; position:relative; overflow:hidden; color:#fff; }
#ultra-v4 .cta-band::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15), transparent 50%); }
#ultra-v4 .cta-band h2 { font-size:36px; font-weight:800; margin:0 0 12px; letter-spacing:-0.02em; position:relative; color:#fff; }
#ultra-v4 .cta-band p { color:rgba(255,255,255,0.92); font-size:16px; margin:0 0 28px; position:relative; }
#ultra-v4 .cta-band .ctas { display:inline-flex; gap:14px; position:relative; flex-wrap:wrap; justify-content:center; }
#ultra-v4 .cta-band .primary { background:#fff; color:var(--accent-3) !important; padding:14px 30px; border-radius:10px; font-weight:700; text-decoration:none !important; }
#ultra-v4 .cta-band .secondary { background:rgba(255,255,255,0.18); color:#fff !important; padding:14px 26px; border-radius:10px; font-weight:600; border:1px solid rgba(255,255,255,0.3); text-decoration:none !important; }

/* ============================================================ FAQ ACCORDION (2-col details/summary) ============================================================ */
#ultra-v4 .faq { padding:90px 0; }
#ultra-v4 .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:1100px; margin:0 auto; }
#ultra-v4 .faq-item { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:0; }
#ultra-v4 .faq-item summary { padding:20px 24px; font-weight:700; font-size:15px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; list-style:none; color:var(--text); }
#ultra-v4 .faq-item summary::-webkit-details-marker { display:none; }
#ultra-v4 .faq-item summary::after { content:'\002B'; color:var(--accent-2); font-weight:400; font-size:22px; line-height:1; }
#ultra-v4 .faq-item[open] summary::after { content:'\2212'; }
#ultra-v4 .faq-item p { padding:0 24px 20px; margin:0; color:var(--text-muted); font-size:14px; line-height:1.7; }

/* ============================================================ APPS (icon grid block) ============================================================ */
#ultra-v4 .apps { padding:90px 0; background:linear-gradient(180deg, transparent, var(--section-band), transparent); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
#ultra-v4 .apps-grid { display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:center; }
#ultra-v4 .apps-left .eyebrow { color:var(--accent-2); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
#ultra-v4 .apps-left h2 { font-size:28px; font-weight:800; letter-spacing:-0.02em; margin:0 0 14px; color:var(--text); }
#ultra-v4 .apps-left p { color:var(--text-muted); font-size:14.5px; margin:0 0 18px; line-height:1.6; }
#ultra-v4 .apps-icons { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
#ultra-v4 .app-icon { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-muted); font-size:11.5px; font-weight:600; padding:10px; transition:transform 0.2s, border-color 0.2s; }
#ultra-v4 .app-icon:hover { transform:translateY(-2px); border-color:var(--accent); color:var(--accent-2); }
#ultra-v4 .app-icon i { font-size:28px; color:var(--accent-2); }

/* ============================================================ AWARDS (small horizontal badge row) ============================================================ */
#ultra-v4 .awards { padding:80px 0; text-align:center; }
#ultra-v4 .awards-row { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; max-width:1100px; margin:36px auto 0; }
#ultra-v4 .award-badge { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:14px 18px; display:flex; align-items:center; gap:12px; min-width:200px; }
#ultra-v4 .award-badge .ic { width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg, var(--gold), #c8901a); display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; flex-shrink:0; }
#ultra-v4 .award-badge .txt h4 { font-size:13px; margin:0; font-weight:700; text-align:left; color:var(--text); }
#ultra-v4 .award-badge .txt p { font-size:11.5px; color:var(--text-dim); margin:2px 0 0; text-align:left; }

/* ============================================================ RELATED GUIDES (internal-link card grid for SEO) ============================================================ */
#ultra-v4 .related { padding:60px 0 90px; }
#ultra-v4 .related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin:0 auto; }
#ultra-v4 .related-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:24px; display:flex; gap:16px; align-items:flex-start; }
#ultra-v4 .related-card i { color:var(--accent-2); font-size:22px; margin-top:2px; flex-shrink:0; }
#ultra-v4 .related-card h4 { font-size:15px; font-weight:700; margin:0 0 4px; }
#ultra-v4 .related-card h4 a { color:var(--text); text-decoration:none; }
#ultra-v4 .related-card h4 a:hover { color:var(--accent-2); }
#ultra-v4 .related-card p { font-size:13px; color:var(--text-muted); margin:0; line-height:1.55; }

/* ============================================================
   HOMEPAGE-SPECIFIC MODULES
   Used by index.html. The shared-web-hosting page does not adopt
   these modules but they don't conflict with that page either.
   ============================================================ */

/* HOMEPAGE: hero badges + eyebrow + coupon-pill `code` element
   (the .hero-coupon-pill base rule is in the HERO section above) */
#ultra-v4 .hero-coupon-pill code { color:var(--orange) !important; font-size:inherit !important; }
#ultra-v4 .hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:0.5px; margin-bottom:22px; }
#ultra-v4 .hero-badge.ai { background:linear-gradient(135deg, rgba(123,103,255,0.15), rgba(77,166,232,0.08)); border:1px solid rgba(123,103,255,0.4); color:#a899ff; }
#ultra-v4 .hero-badge.wp { background:linear-gradient(135deg, rgba(254,159,13,0.12), rgba(254,159,13,0.05)); border:1px solid rgba(254,159,13,0.4); color:var(--orange); }
#ultra-v4 .hero-eyebrow { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent-2); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
#ultra-v4 .hero-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 12px var(--accent-2); }

/* HOMEPAGE: HERO SLIDER (3 rotating slides, fade transition, sticky-nav-safe z-indexes) */
#ultra-v4 .hero-slider { position:relative; display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; }
#ultra-v4 .hero-slide { grid-area:1 / 1; padding:80px 0 130px; z-index:1; opacity:0; transition:opacity 0.7s ease-in-out; pointer-events:none; }
#ultra-v4 .hero-slide.active { opacity:1; pointer-events:auto; z-index:2; }
/* slide 1 — main hosting (blue) */
/* slide 1 — main hosting (blue glow on page bg) */
#ultra-v4 .hero-slide.slide-1 { background:radial-gradient(ellipse 80% 50% at 50% 100%, var(--accent-soft), transparent 60%), radial-gradient(circle 600px at 80% 30%, var(--accent-soft-2), transparent 50%); }
/* slide 2 — AI coding (purple, intentional) */
#ultra-v4 .hero-slide.slide-2 { background:radial-gradient(ellipse 70% 50% at 80% 50%, rgba(123,103,255,0.18), transparent 60%), radial-gradient(circle 500px at 20% 40%, var(--accent-soft-2), transparent 60%); }
/* slide 3 — wordpress (orange) */
#ultra-v4 .hero-slide.slide-3 { background:radial-gradient(ellipse 70% 50% at 20% 50%, rgba(254,159,13,0.12), transparent 60%), radial-gradient(circle 500px at 80% 40%, var(--accent-soft), transparent 60%); }
/* H1 inside a slide — strong !important to defeat external stylesheet bleed (global h1 rules from ultra-style.css) */
#ultra-v4 .hero-slide :is(h1, h2) { font-size:clamp(40px,5.2vw,60px) !important; font-weight:800 !important; line-height:1.06 !important; letter-spacing:-0.03em !important; margin:0 0 18px !important; max-width:960px !important; text-wrap:balance !important; color:var(--text) !important; padding:0 !important; text-transform:none !important; text-align:left !important; }
#ultra-v4 .hero-slide.slide-1 :is(h1, h2) { max-width:1120px !important; }
#ultra-v4 .hero-slide :is(h1, h2) em { display:inline !important; margin:0 !important; color:inherit !important; font-style:normal !important; font-size:inherit !important; font-weight:inherit !important; line-height:inherit !important; text-decoration:none !important; text-transform:none !important; background:linear-gradient(90deg,var(--accent-2),#9bd0ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#ultra-v4 .hero-slide.slide-2 :is(h1, h2) em { background:linear-gradient(90deg,#a899ff,var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#ultra-v4 .hero-slide.slide-3 :is(h1, h2) em { background:linear-gradient(90deg,var(--accent-3),#9bd0ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* Light-mode default H1 em (slide-1 "just works"): the prior gradient endpoint var(--accent-3) was blue #1559b3 which rendered blue-on-blue against the new blue hero bg. Swap to a warm gold so the emphasized words pop. */
[data-theme="light"] #ultra-v4 .hero-slide :is(h1, h2) em { background:linear-gradient(90deg,#ffd76b,#ffffff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* Light-mode slide-2 H1 em: swap the purple endpoint to a dark orange so the "AI" text reads warm on the blue hero (was #6b5cd6 magenta-violet — felt out of place on the blue light-mode bg) */
[data-theme="light"] #ultra-v4 .hero-slide.slide-2 :is(h1, h2) em { background:linear-gradient(90deg,#d65a00,var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* Light-mode .hero-badge.ai inside the hero: flip from purple-on-violet to dark orange so the "NEW · AI CODING ASSISTANT" pill reads warm against the blue gradient */
[data-theme="light"] #ultra-v4 .hero-slide.slide-2 .hero-badge.ai {
  background:linear-gradient(135deg, rgba(214,90,0,0.22), rgba(255,255,255,0.10)) !important;
  border-color:rgba(255,209,160,0.65) !important;
  color:#ffd9b3 !important;
}
[data-theme="light"] #ultra-v4 .hero-slide.slide-2 .hero-badge.ai i { color:#ffd9b3 !important; }
/* Light-mode .hero-badge.wp inside the hero: flip from warm orange to translucent-white so the "WORDPRESS . ACCELERATEWP . LITESPEED" pip reads cleanly on the blue light-mode hero gradient (orange-on-blue read as muddy) */
[data-theme="light"] #ultra-v4 .hero-slide.slide-3 .hero-badge.wp {
  background:linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)) !important;
  border-color:rgba(255,255,255,0.45) !important;
  color:#ffffff !important;
}
[data-theme="light"] #ultra-v4 .hero-slide.slide-3 .hero-badge.wp i { color:#ffffff !important; }
/* Light-mode slide-3 H1 em ("flies"): was var(--accent-3) -> var(--accent-2) = blue -> white, blue endpoint invisible on the blue hero. Swapped to a warm orange-to-gold flame gradient that matches the WP/speed theme and reads clean on blue. */
[data-theme="light"] #ultra-v4 .hero-slide.slide-3 :is(h1, h2) em { background:linear-gradient(90deg,#ff7f3d,#ffd76b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* Slide .lede (replaces global p tag style with hero-specific typography) */
#ultra-v4 .hero-slide .lede { font-size:18px !important; color:var(--text-muted) !important; max-width:680px !important; margin:0 0 36px !important; line-height:1.55 !important; font-weight:400 !important; text-transform:none !important; text-align:left !important; padding:0 !important; }
#ultra-v4 .hero-slide :is(h1, h2), #ultra-v4 .hero-slide :is(h1, h2) * { text-decoration:none !important; }
#ultra-v4 .hero-slide :is(h1, h2) { font-weight:800 !important; font-style:normal !important; }
#ultra-v4 .hero-slide :is(h1, h2) strong, #ultra-v4 .hero-slide :is(h1, h2) em, #ultra-v4 .hero-slide :is(h1, h2) span { font-style:inherit; font-weight:inherit; font-size:inherit; line-height:inherit; }
#ultra-v4 .hero-slide .lede { font-style:normal !important; }

/* HOMEPAGE: slider controls (dots + arrows, z-index <= 20 so they never overlap sticky nav at z-30) */
#ultra-v4 .hero-controls { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:20; pointer-events:auto; }
#ultra-v4 .hero-dot { width:36px; height:5px; border-radius:99px; background:rgba(255,255,255,0.18); border:0; cursor:pointer; transition:background 0.2s, width 0.2s; padding:0; }
#ultra-v4 .hero-dot:hover { background:rgba(255,255,255,0.4); }
#ultra-v4 .hero-dot.active { background:var(--accent); width:60px; }
/* Hero dots: in light mode we keep dot-on-hero-bg semantics — since the hero is blue in light mode too, use white dots (the dark slate variant was for a white page bg that no longer exists in the hero) */
[data-theme="light"] #ultra-v4 .hero-dot { background:rgba(255,255,255,0.30); }
[data-theme="light"] #ultra-v4 .hero-dot:hover { background:rgba(255,255,255,0.55); }
[data-theme="light"] #ultra-v4 .hero-dot.active { background:#ffffff; }
#ultra-v4 .hero-arrows { position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; padding:0 30px; pointer-events:none; z-index:20; }
#ultra-v4 .hero-arrow { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; font-size:14px; transition:all 0.2s; }
#ultra-v4 .hero-arrow:hover { background:var(--accent); border-color:var(--accent); transform:scale(1.05); }
/* Light-mode arrows: hero is blue, so arrows + arrow text need to be white for contrast (the previous rgba(0,0,0,...) rule rendered them as near-invisible dark glyphs) */
[data-theme="light"] #ultra-v4 .hero-arrow { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.40); color:#ffffff; }
[data-theme="light"] #ultra-v4 .hero-arrow:hover { background:rgba(255,255,255,0.22); border-color:#ffffff; color:#ffffff; }

/* HOMEPAGE: client logo carousel (infinite-scroll marquee, fades on left + right edge) */
#ultra-v4 .clients { padding:34px 0 30px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(180deg, transparent, var(--section-band), transparent); }
#ultra-v4 .clients-label { text-align:center; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:22px; }
#ultra-v4 .clients-track-wrap { overflow:hidden; position:relative; }
#ultra-v4 .clients-track-wrap::before, #ultra-v4 .clients-track-wrap::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
#ultra-v4 .clients-track-wrap::before { left:0; background:linear-gradient(90deg, var(--bg-page), transparent); }
#ultra-v4 .clients-track-wrap::after { right:0; background:linear-gradient(-90deg, var(--bg-page), transparent); }
#ultra-v4 .clients-track { display:flex; gap:64px; animation:ultrav4-slide 40s linear infinite; width:max-content; align-items:center; }
#ultra-v4 .clients-track .item { font-size:24px; font-weight:800; letter-spacing:0.5px; color:var(--text-dim); white-space:nowrap; opacity:0.8; transition:opacity 0.2s, color 0.2s; }
#ultra-v4 .clients-track .item:hover { opacity:1; color:var(--accent-2); }
@keyframes ultrav4-slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* HOMEPAGE: STATS (4-col centered stat block with gradient-clip numbers) */
#ultra-v4 .stats { padding:44px 0; }
#ultra-v4 .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
#ultra-v4 .stat { text-align:center; padding:8px; }
#ultra-v4 .stat .num { font-size:48px; font-weight:800; letter-spacing:-1.5px; line-height:1; background:linear-gradient(180deg,var(--text),var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#ultra-v4 .stat .lbl { font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.4px; margin-top:10px; font-weight:600; }

/* HOMEPAGE: DOMAIN SEARCH (centered card with input + TLD dropdown + button) */
#ultra-v4 .domain { padding:80px 0; text-align:center; background:linear-gradient(180deg, transparent, var(--section-band), transparent); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
#ultra-v4 .domain h2 { font-size:36px; font-weight:800; margin:0 0 12px; letter-spacing:-0.02em; }
#ultra-v4 .domain p { color:var(--text-muted); margin:0 auto 32px; font-size:15.5px; max-width:520px; }
#ultra-v4 .search-box { max-width:660px; margin:0 auto; display:flex; gap:0; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden; box-shadow:0 10px 40px -20px rgba(27,132,218,0.4); }
#ultra-v4 .search-box input { flex:1; background:transparent; border:0; padding:20px 24px; color:var(--text); font-size:15px; outline:none; font-family:inherit; }
#ultra-v4 .search-box input::placeholder { color:var(--text-dim); }
#ultra-v4 .search-box select { background:transparent; border:0; border-left:1px solid var(--border); color:var(--text); padding:0 18px; font-size:14px; outline:none; font-family:inherit; cursor:pointer; color-scheme:dark; }
[data-theme="light"] #ultra-v4 .search-box select { color-scheme:light; }
/* native <option> popup background is not reliably theme-inherited — explicit override for both themes */
#ultra-v4 .search-box select option { background:#0f2138; color:#ffffff; }
[data-theme="light"] #ultra-v4 .search-box select option { background:#ffffff; color:#1a2533; }
#ultra-v4 .search-box button { background:var(--accent); color:#fff !important; border:0; padding:0 32px; font-weight:700; font-size:14.5px; cursor:pointer; font-family:inherit; letter-spacing:0.3px; }
#ultra-v4 .search-box button:hover { background:var(--accent-3); }
#ultra-v4 .tld-pills { margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
#ultra-v4 .tld-pills span { font-size:12px; color:var(--text-muted); padding:6px 14px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:99px; }
#ultra-v4 .tld-pills span strong { color:var(--accent-2); }

/* HOMEPAGE: ONLINE 2-COLUMN BLOCK (two large feature panels side-by-side, banded background) */
#ultra-v4 .online { padding:90px 0; background:linear-gradient(180deg, transparent, var(--section-band), transparent); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
#ultra-v4 .online-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:50px; }
#ultra-v4 .online-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:36px; }
#ultra-v4 .online-card-ic { width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2)); border:1px solid rgba(27,132,218,0.3); display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:22px; margin-bottom:20px; }
#ultra-v4 .online-card .eyebrow { color:var(--accent-2); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
#ultra-v4 .online-card h3 { font-size:24px; font-weight:800; margin:0 0 14px; letter-spacing:-0.01em; }
#ultra-v4 .online-card ul { margin:0 0 24px; padding:0; list-style:none; }
#ultra-v4 .online-card li { padding:7px 0; font-size:14px; color:var(--text-muted); display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
#ultra-v4 .online-card li i { color:var(--accent-2); font-size:12px; margin-top:5px; }
#ultra-v4 .online-card .btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff !important; padding:12px 24px; border-radius:10px; font-weight:700; font-size:14px; }

/* HOMEPAGE: extra defensive cta + trust styles (defeats external stylesheet bleed on the slider) */
#ultra-v4 .hero-ctas { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:42px; }
#ultra-v4 .hero-trust, #ultra-v4 .hero-trust div, #ultra-v4 .hero-trust strong, #ultra-v4 .hero-trust span { text-decoration:none !important; font-style:normal !important; border-bottom:0 !important; }
#ultra-v4 .hero-trust strong { color:var(--text) !important; font-weight:700 !important; }
#ultra-v4 .hero-trust .stars { color:var(--gold) !important; letter-spacing:2px; font-size:14px; }
#ultra-v4 .cta-primary:hover { transform:translateY(-1px); box-shadow:0 12px 36px -8px rgba(27,132,218,0.65); }
#ultra-v4 .cta-secondary:hover { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2); }

/* HOMEPAGE: responsive breakpoints for slider + homepage grids */
@media (max-width:980px) {
  #ultra-v4 .hero-slide :is(h1, h2) { font-size:46px; }
  #ultra-v4 .why-grid, #ultra-v4 .everything-grid, #ultra-v4 .stat-ribbon-grid, #ultra-v4 .stats-grid { grid-template-columns:repeat(2,1fr); }
  #ultra-v4 .apps-grid, #ultra-v4 .online-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  #ultra-v4 .hero-slide :is(h1, h2) { font-size:36px; }
  #ultra-v4 .why-grid, #ultra-v4 .everything-grid, #ultra-v4 .stat-ribbon-grid, #ultra-v4 .stats-grid { grid-template-columns:1fr; }
  #ultra-v4 .section-head h2 { font-size:30px; }
}

/* ============================================================
   LIGHT MODE — BLUE HERO GRADIENT
   Light mode only; dark mode keeps the original radial-glow bg.
   The page-level --accent-2 in light mode is a blue (#1a73e8) used
   by .hero-pips, .hero-eyebrow, .hero-tagline strong, etc. On the
   #1b84da blue gradient that becomes blue-on-blue, so we flip the
   accent + text tokens to white INSIDE the hero scope only. The
   .cta-primary background also pulls from --accent and would go
   blue-on-blue, so it's explicitly forced white-bg + blue-text.
   ============================================================ */
[data-theme="light"] #ultra-v4 .hero,
[data-theme="light"] #ultra-v4 .hero-slide.slide-1,
[data-theme="light"] #ultra-v4 .hero-slide.slide-2,
[data-theme="light"] #ultra-v4 .hero-slide.slide-3 {
  /* Flip text-color tokens to white so every var(--text*) / var(--accent-2) child reads on the blue gradient */
  --text:#ffffff;
  --text-muted:rgba(255,255,255,0.90);
  --text-dim:rgba(255,255,255,0.68);
  --border:rgba(255,255,255,0.30);
  --border-soft:rgba(255,255,255,0.14);
  --accent-2:#ffffff;
  --accent-soft:rgba(255,255,255,0.18);
  --accent-soft-2:rgba(255,255,255,0.14);
  color:#fff;
  /* Brand-blue gradient (darker overall — starts at #1b84da brand blue, ends in deep cobalt)
     — same compositional pattern as the legacy uh-grad-bottom but using the brand palette */
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,255,255,0.18), transparent 70%),
    linear-gradient(180deg, #1b84da 0%, #1568b0 50%, #0e4485 100%) !important;
}
/* Force .cta-primary to a white pill with blue text so it doesn't disappear as blue-on-blue */
[data-theme="light"] #ultra-v4 .hero .cta-primary,
[data-theme="light"] #ultra-v4 .hero-slide .cta-primary {
  background:#ffffff !important;
  color:#1b84da !important;
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.25);
}
[data-theme="light"] #ultra-v4 .hero .cta-primary i,
[data-theme="light"] #ultra-v4 .hero-slide .cta-primary i {
  color:#1b84da !important;
}
/* Coupon pill — flip from orange to translucent-white so it reads on the blue bg */
[data-theme="light"] #ultra-v4 .hero .hero-coupon-pill,
[data-theme="light"] #ultra-v4 .hero-slide .hero-coupon-pill {
  background:linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08)) !important;
  border-color:rgba(255,255,255,0.55) !important;
  color:#ffffff !important;
}
[data-theme="light"] #ultra-v4 .hero .hero-coupon-pill code,
[data-theme="light"] #ultra-v4 .hero-slide .hero-coupon-pill code {
  background:rgba(255,255,255,0.28) !important;
  color:#ffffff !important;
}
[data-theme="light"] #ultra-v4 .hero .hero-coupon-pill i,
[data-theme="light"] #ultra-v4 .hero-slide .hero-coupon-pill i {
  color:#ffffff !important;
}
/* Partner-logo strip — invert to white so the dark vendor logos read on the blue bg
   (the dark-mode rule already does this for non-light themes; here we extend to light mode
   when the logos are inside the hero specifically — outside the hero they stay colored) */
[data-theme="light"] #ultra-v4 .hero .hero-tech img,
[data-theme="light"] #ultra-v4 .hero-slide .hero-tech img {
  filter:brightness(0) invert(1) opacity(0.90);
}
/* Keep .cta-secondary visible — translucent-white border on the blue bg already works through the --border flip above */