/* ============================================================
   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
   ============================================================ */

/* Anchor-jump offset: the ultra-nav stack is sticky on every v4 page and totals ~116px
   (utility 36 + main 80, from --ultra-nav-total-h in ultra-nav.min.css). Without scroll-
   padding-top, `#anchor` links and JS scrollIntoView({block:'start'}) land the target at
   y=0 where the sticky nav covers the heading. Setting it on the html scroll container
   makes the browser honor it for both native anchor navigation and scrollIntoView. The
   var() fallback covers pages that link ultra-css-v4 before ultra-nav.min.css. */
html { scroll-padding-top: calc(var(--ultra-nav-total-h, 116px) + 16px); }

/* ============================================================ 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); --cta-edge:rgba(255,255,255,0.32);
  --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); --cta-edge:#dde5ee;
  --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 H1 em-gradient highlight - inline-promote the <em> so it renders at the H1's own font-size
   and weight (rather than the legacy global em rules that make <em> italic + smaller + greyed out),
   then paint it with the brand-blue gradient via background-clip:text. Pages port the v4 hero with
   <h1>Some prefix <em>highlighted phrase.</em></h1> - this rule is what makes the highlighted phrase
   read as the same scale as the rest of the H1 with a brand-blue gradient on top. Without this rule
   on pages that don't carry an equivalent inline override, the <em> falls back to the global rules
   and the highlighted phrase appears as tiny grey italic text (operator hit this on agency-hosting
   where "your agency." rendered at ~12px grey instead of ~58px brand-blue). */
#ultra-v4 .hero h1 em {
  display: inline !important;
  font-style: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
  margin: 0 !important;

  /* Animated brand-gradient highlight: 3-stop seamless loop (c1 -> c2 -> c1)
     at 200% width with a horizontal background-position sweep. Per-page palettes
     override --em-c1 / --em-c2 (e.g. migrate-from-siteground keeps gold->orange
     in dark mode). !important on the animation properties so any pre-existing
     per-page `background: linear-gradient(...)` rule (which does not use
     !important) loses cleanly without each page needing to be touched. */
  --em-c1: #4da6e8;
  --em-c2: #9bd0ff;
  background-image: linear-gradient(90deg, var(--em-c1), var(--em-c2), var(--em-c1)) !important;
  background-size: 200% auto !important;
  background-repeat: repeat !important;
  background-position: 0% center;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          color: transparent !important;
  animation: ultra-em-sweep 4s linear infinite;
}
[data-theme="light"] #ultra-v4 .hero h1 em {
  --em-c1: #ffd76b;
  --em-c2: #ff7f3d;
}
@keyframes ultra-em-sweep {
  from { background-position:    0% center; }
  to   { background-position: -200% center; }
}
@media (prefers-reduced-motion: reduce) {
  #ultra-v4 .hero h1 em { animation: none; }
}

/* ============================================================ 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(--cta-edge); 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:22px 0; }
#ultra-v4 .stat-ribbon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:960px; margin:0 auto; }
#ultra-v4 .sr-card { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-radius:13px; padding:18px 18px; text-align:center; box-shadow:0 10px 24px -10px rgba(27,132,218,0.45); }
#ultra-v4 .sr-card .sr-num { font-size:23px; font-weight:800; letter-spacing:-0.4px; line-height:1.15; }
#ultra-v4 .sr-card .sr-lbl { font-size:11px; color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:1.1px; margin-top:7px; font-weight:600; line-height:1.35; }

/* ============================================================ 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; }

/* ============================================================ TOPIC CARD LIBRARY ============================================================
   Per-page engagement modules. One bespoke instance per marketing page, each a different
   archetype (.tc-* modifier), dropped into a rotating section slot so no two sibling pages
   share the same shape or position. Shared shell = .topic-card; layout varies by modifier.
   Wrap each in <section class="topic-card-wrap animate" data-anim-type="fadeIn" ...>. */
#ultra-v4 .topic-card-wrap { padding:34px 0; }
#ultra-v4 .topic-card {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px;
  padding:40px 40px 42px; max-width:1040px; margin:0 auto; position:relative; overflow:hidden;
}
#ultra-v4 .topic-card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:.9;
}
#ultra-v4 .tc-eyebrow { color:var(--accent-2); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
#ultra-v4 .tc-eyebrow i { font-size:13px; }
#ultra-v4 .topic-card h2, #ultra-v4 .topic-card h3.tc-title { font-size:27px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; margin:0 0 10px; color:var(--text); }
#ultra-v4 .tc-lead { color:var(--text-muted); font-size:15px; line-height:1.6; margin:0 0 26px; max-width:760px; }
#ultra-v4 .topic-card ul { list-style:none; margin:0; padding:0; }

/* 1. FIT-CHECK: two columns, "great fit / consider instead" + cross-links */
#ultra-v4 .tc-fitcheck .tc-cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
#ultra-v4 .tc-col { background:var(--card-bg-2); border:1px solid var(--border-soft); border-radius:14px; padding:22px 22px 8px; }
#ultra-v4 .tc-col-label { font-size:14px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:9px; color:var(--text); }
#ultra-v4 .tc-yes .tc-col-label i { color:#3fbf7f; }
#ultra-v4 .tc-no .tc-col-label i { color:var(--orange); }
#ultra-v4 .tc-fitcheck li { font-size:13.5px; line-height:1.5; color:var(--text-muted); padding:7px 0; border-top:1px solid var(--border-soft); }
#ultra-v4 .tc-fitcheck li:first-child { border-top:0; }

/* 2. COMPARE: mini spec/vs table */
#ultra-v4 .tc-compare table { width:100%; border-collapse:collapse; font-size:13.5px; }
#ultra-v4 .tc-compare th, #ultra-v4 .tc-compare td { text-align:left; padding:11px 14px; border-top:1px solid var(--border-soft); color:var(--text-muted); }
#ultra-v4 .tc-compare thead th { color:var(--text); font-weight:700; border-top:0; font-size:12.5px; }
#ultra-v4 .tc-compare tbody th { color:var(--text); font-weight:600; }
#ultra-v4 .tc-compare td.hit { color:#3fbf7f; } #ultra-v4 .tc-compare td.miss { color:var(--text-dim); }
#ultra-v4 .tc-compare .col-us { background:var(--accent-soft); color:var(--text); font-weight:600; }
#ultra-v4 .tc-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
#ultra-v4 .tc-compare table { min-width:520px; }
#ultra-v4 .tc-compare td .fa-check { color:#3fbf7f; }
#ultra-v4 .tc-compare td .fa-times, #ultra-v4 .tc-compare td .fa-xmark { color:var(--text-dim); }

/* 3. PRO-TIP: accent-bordered insider callout */
#ultra-v4 .tc-protip { display:flex; gap:22px; align-items:flex-start; border-left:4px solid var(--accent); padding-left:26px; }
#ultra-v4 .tc-protip .tc-tip-ic { flex:0 0 auto; width:52px; height:52px; border-radius:13px; background:var(--accent-soft); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:22px; }
#ultra-v4 .tc-protip .tc-tip-body p { color:var(--text-muted); font-size:14.5px; line-height:1.65; margin:0 0 10px; }
#ultra-v4 .tc-protip code { background:var(--accent-soft); color:var(--accent-2); padding:2px 7px; border-radius:5px; font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* 4. STEPS: numbered quick-start timeline */
#ultra-v4 .tc-steps ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:tcstep; }
#ultra-v4 .tc-steps li { counter-increment:tcstep; background:var(--card-bg-2); border:1px solid var(--border-soft); border-radius:14px; padding:22px 20px; position:relative; }
#ultra-v4 .tc-steps li::before { content:counter(tcstep); position:absolute; top:-14px; left:20px; width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-cta); }
#ultra-v4 .tc-steps li h4 { margin:8px 0 6px; font-size:15px; font-weight:700; color:var(--text); }
#ultra-v4 .tc-steps li p { margin:0; font-size:13px; line-height:1.55; color:var(--text-muted); }

/* 5. SPECS: requirements checklist grid */
#ultra-v4 .tc-specs ul { display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; }
#ultra-v4 .tc-specs li { display:flex; gap:11px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--text-muted); padding:9px 0; border-bottom:1px solid var(--border-soft); }
#ultra-v4 .tc-specs li i { color:var(--accent-2); font-size:12px; margin-top:4px; flex:0 0 auto; }
#ultra-v4 .tc-specs li strong { color:var(--text); font-weight:600; }

/* 6. STATS: stat trio */
#ultra-v4 .tc-stats .tc-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
#ultra-v4 .tc-stat { text-align:center; background:var(--card-bg-2); border:1px solid var(--border-soft); border-radius:14px; padding:26px 18px; }
#ultra-v4 .tc-stat .tc-stat-num { font-size:34px; font-weight:800; letter-spacing:-1px; line-height:1; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#ultra-v4 .tc-stat .tc-stat-lbl { font-size:12.5px; color:var(--text-muted); margin-top:10px; line-height:1.45; }

/* 7. SCENARIO: use-case narrative with icon rail */
#ultra-v4 .tc-scenario { display:grid; grid-template-columns:64px 1fr; gap:24px; align-items:start; }
#ultra-v4 .tc-scenario .tc-scn-ic { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:27px; }
#ultra-v4 .tc-scenario p { color:var(--text-muted); font-size:14.5px; line-height:1.7; margin:0 0 12px; }
#ultra-v4 .tc-scenario p strong { color:var(--text); }

/* 8. SHIELD: compliance checklist */
#ultra-v4 .tc-shield { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; }
#ultra-v4 .tc-shield .tc-shield-badge { width:88px; height:88px; border-radius:20px; background:var(--accent-soft); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:40px; border:1px solid var(--border-soft); }
#ultra-v4 .tc-shield ul { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
#ultra-v4 .tc-shield li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--text-muted); }
#ultra-v4 .tc-shield li i { color:#3fbf7f; font-size:13px; margin-top:3px; }

/* 9. STACK: layered diagram */
#ultra-v4 .tc-stack .tc-layers { display:flex; flex-direction:column; gap:10px; }
#ultra-v4 .tc-layer { display:flex; align-items:center; gap:16px; background:var(--card-bg-2); border:1px solid var(--border-soft); border-left:4px solid var(--accent); border-radius:12px; padding:15px 20px; }
#ultra-v4 .tc-layer i { color:var(--accent-2); font-size:18px; width:26px; text-align:center; flex:0 0 auto; }
#ultra-v4 .tc-layer .tc-layer-name { font-weight:700; color:var(--text); font-size:14px; min-width:120px; }
#ultra-v4 .tc-layer .tc-layer-desc { color:var(--text-muted); font-size:13px; line-height:1.5; }

/* 10. LOCAL: area/local callout */
#ultra-v4 .tc-local { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
#ultra-v4 .tc-local .tc-pin { width:72px; height:72px; border-radius:50%; background:var(--accent-soft); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:30px; border:1px solid var(--border-soft); }
#ultra-v4 .tc-local .tc-local-facts { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
#ultra-v4 .tc-local .tc-chip { background:var(--card-bg-2); border:1px solid var(--border-soft); border-radius:99px; padding:7px 15px; font-size:12.5px; color:var(--text-muted); font-weight:600; }
#ultra-v4 .tc-local .tc-chip i { color:var(--accent-2); margin-right:6px; }

/* 11. VALUE: included-vs-typical two columns */
#ultra-v4 .tc-value .tc-cols { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; }
#ultra-v4 .tc-value .tc-col { border:0; border-radius:0; background:transparent; padding:24px 24px 12px; }
#ultra-v4 .tc-value .tc-col.tc-us { background:var(--accent-soft); }
#ultra-v4 .tc-value li { font-size:13.5px; line-height:1.5; color:var(--text-muted); padding:8px 0; display:flex; gap:10px; align-items:flex-start; }
#ultra-v4 .tc-value li i { font-size:12px; margin-top:4px; flex:0 0 auto; }
#ultra-v4 .tc-value .tc-us li i { color:#3fbf7f; }
#ultra-v4 .tc-value .tc-them li i { color:var(--text-dim); }

/* 12. MYTH: myth vs fact rows */
#ultra-v4 .tc-myth .tc-myth-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--border-soft); }
#ultra-v4 .tc-myth .tc-myth-row:first-of-type { border-top:0; }
#ultra-v4 .tc-myth .tc-m { color:var(--text-dim); font-size:13.5px; line-height:1.55; }
#ultra-v4 .tc-myth .tc-f { color:var(--text-muted); font-size:13.5px; line-height:1.55; }
#ultra-v4 .tc-myth .tc-m b, #ultra-v4 .tc-myth .tc-f b { display:block; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:5px; font-weight:700; }
#ultra-v4 .tc-myth .tc-m b { color:var(--orange); } #ultra-v4 .tc-myth .tc-f b { color:#3fbf7f; }

/* 13. PERSONAS: audience tiles */
#ultra-v4 .tc-personas .tc-persona-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
#ultra-v4 .tc-persona { background:var(--card-bg-2); border:1px solid var(--border-soft); border-radius:14px; padding:22px 20px; text-align:center; }
#ultra-v4 .tc-persona i { font-size:26px; color:var(--accent-2); margin-bottom:12px; }
#ultra-v4 .tc-persona h4 { margin:0 0 6px; font-size:15px; font-weight:700; color:var(--text); }
#ultra-v4 .tc-persona p { margin:0; font-size:12.5px; line-height:1.5; color:var(--text-muted); }

/* 14. MIGRATE: before/after panels */
#ultra-v4 .tc-migrate .tc-ba { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; }
#ultra-v4 .tc-migrate .tc-panel { background:var(--card-bg-2); border:1px solid var(--border-soft); border-radius:14px; padding:22px; }
#ultra-v4 .tc-migrate .tc-panel h4 { margin:0 0 12px; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700; }
#ultra-v4 .tc-migrate .tc-before h4 { color:var(--text-dim); } #ultra-v4 .tc-migrate .tc-after h4 { color:var(--accent-2); }
#ultra-v4 .tc-migrate .tc-panel li { font-size:13px; line-height:1.5; color:var(--text-muted); padding:6px 0; }
#ultra-v4 .tc-migrate .tc-arrow { color:var(--accent-2); font-size:22px; }

/* shared: card footer CTA link */
#ultra-v4 .tc-foot { margin-top:24px; font-size:14px; font-weight:600; }
#ultra-v4 .tc-foot a { color:var(--accent-2); font-weight:700; }
#ultra-v4 .tc-foot i { font-size:11px; }

/* responsive */
@media (max-width:860px){
  #ultra-v4 .topic-card { padding:30px 22px 32px; }
  #ultra-v4 .tc-fitcheck .tc-cols, #ultra-v4 .tc-value .tc-cols, #ultra-v4 .tc-myth .tc-myth-row,
  #ultra-v4 .tc-steps ol, #ultra-v4 .tc-stats .tc-stat-grid, #ultra-v4 .tc-specs ul,
  #ultra-v4 .tc-shield ul, #ultra-v4 .tc-personas .tc-persona-grid { grid-template-columns:1fr; }
  #ultra-v4 .tc-shield, #ultra-v4 .tc-scenario, #ultra-v4 .tc-local { grid-template-columns:1fr; }
  #ultra-v4 .tc-migrate .tc-ba { grid-template-columns:1fr; }
  #ultra-v4 .tc-migrate .tc-arrow { transform:rotate(90deg); margin:0 auto; }
}

/* ============================================================ ULTRA ENGAGE (interactive modules) ============================================================
   Behaviour in js/ultra-engage.js. Each module root (.ue-quiz/.ue-calc/.ue-latency/.ue-stack/.ue-checklist)
   is a card shell; enhanced markup is injected by JS after it reads its inline JSON config. */
#ultra-v4 .engage-wrap { padding:34px 0; }
#ultra-v4 .ue-quiz, #ultra-v4 .ue-calc, #ultra-v4 .ue-latency, #ultra-v4 .ue-stack, #ultra-v4 .ue-checklist {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:22px;
  padding:40px; max-width:1000px; margin:0 auto; position:relative;
  box-shadow:0 24px 60px -34px rgba(0,0,0,0.55), 0 2px 6px -4px rgba(0,0,0,0.3);
}
[data-theme="light"] #ultra-v4 .ue-quiz, [data-theme="light"] #ultra-v4 .ue-calc, [data-theme="light"] #ultra-v4 .ue-latency,
[data-theme="light"] #ultra-v4 .ue-stack, [data-theme="light"] #ultra-v4 .ue-checklist { box-shadow:0 22px 48px -30px rgba(27,60,110,0.28); }
#ultra-v4 .ue-eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--accent-2); font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:13px; }
#ultra-v4 .ue-title { font-size:27px; font-weight:800; letter-spacing:-0.025em; line-height:1.16; margin:0 0 24px; color:var(--text); }
#ultra-v4 .ue-head { margin-bottom:24px; }
#ultra-v4 .ue-btn-primary { display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff !important; padding:13px 24px; border-radius:12px; font-weight:700; font-size:14px; text-decoration:none !important; box-shadow:var(--shadow-cta); border:0; cursor:pointer; transition:transform .15s, box-shadow .15s; }
#ultra-v4 .ue-btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(27,132,218,0.6); }
#ultra-v4 .ue-btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--cta-edge); color:var(--text) !important; padding:12px 20px; border-radius:12px; font-weight:600; font-size:14px; cursor:pointer; transition:border-color .15s, background .15s; }
#ultra-v4 .ue-btn-ghost:hover { border-color:var(--accent-2); background:var(--accent-soft); }

/* quiz */
#ultra-v4 .ue-quiz-bar { height:6px; border-radius:99px; background:var(--card-bg-2); overflow:hidden; margin-bottom:28px; }
#ultra-v4 .ue-quiz-bar span { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .4s cubic-bezier(.4,0,.2,1); }
#ultra-v4 .ue-q { font-size:20px; font-weight:800; letter-spacing:-0.01em; color:var(--text); margin-bottom:20px; }
#ultra-v4 .ue-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
#ultra-v4 .ue-opt { display:flex; flex-direction:column; align-items:flex-start; gap:16px; text-align:left; background:var(--card-bg-2); border:1.5px solid var(--border-soft); border-radius:16px; padding:22px; color:var(--text); font-size:15px; font-weight:650; line-height:1.4; cursor:pointer; transition:border-color .2s, transform .2s, box-shadow .2s; }
#ultra-v4 .ue-opt i { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; background:var(--accent-soft); color:var(--accent-2); font-size:20px; transition:background .2s, color .2s, transform .2s; }
#ultra-v4 .ue-opt span { display:block; }
#ultra-v4 .ue-opt:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 16px 34px -16px rgba(27,132,218,0.55); }
#ultra-v4 .ue-opt:hover i { background:var(--accent); color:#fff; transform:scale(1.06); }
#ultra-v4 .ue-back { margin-top:22px; background:none; border:0; color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
#ultra-v4 .ue-back:hover { color:var(--accent-2); }
#ultra-v4 .ue-result { text-align:center; padding:34px 26px; background:linear-gradient(165deg, var(--accent-soft), transparent 70%); border:1px solid var(--border-soft); border-radius:18px; }
#ultra-v4 .ue-result-eyebrow { color:var(--accent-2); font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; }
#ultra-v4 .ue-result-name { font-size:32px; font-weight:800; letter-spacing:-0.03em; color:var(--text); margin:10px 0 4px; }
#ultra-v4 .ue-result-price { font-size:24px; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#ultra-v4 .ue-result-desc { color:var(--text-muted); font-size:15px; max-width:560px; margin:14px auto 0; line-height:1.6; }
#ultra-v4 .ue-result-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* calc */
#ultra-v4 .ue-calc-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:32px; align-items:start; }
#ultra-v4 .ue-calc-row { margin-bottom:26px; }
#ultra-v4 .ue-calc-lbl { font-size:13px; font-weight:700; color:var(--text); margin-bottom:13px; }
#ultra-v4 .ue-calc input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:7px; border-radius:99px; background:var(--card-bg-2); outline:none; cursor:pointer; }
#ultra-v4 .ue-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--accent); border:4px solid var(--card-bg); box-shadow:0 3px 10px -2px rgba(27,132,218,0.7); cursor:pointer; }
#ultra-v4 .ue-calc input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--accent); border:4px solid var(--card-bg); box-shadow:0 3px 10px -2px rgba(27,132,218,0.7); cursor:pointer; }
#ultra-v4 .ue-calc-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
#ultra-v4 .ue-chip { display:inline-flex; align-items:center; background:var(--card-bg-2); border:1px solid var(--border-soft); border-radius:99px; padding:7px 15px; font-size:12px; color:var(--text-muted); font-weight:600; }
#ultra-v4 .ue-chip i { color:#3fbf7f; margin-right:8px; } #ultra-v4 .ue-chip em { font-style:normal; color:var(--accent-2); margin-left:5px; }
#ultra-v4 .ue-calc-out { background:linear-gradient(165deg, var(--accent-soft), var(--card-bg-2) 55%); border:1px solid var(--border-soft); border-radius:16px; padding:26px; }
#ultra-v4 .ue-calc-out > div { display:flex; justify-content:space-between; align-items:baseline; padding:13px 0; border-top:1px solid var(--border-soft); }
#ultra-v4 .ue-calc-out > div:first-child { border-top:0; padding-top:0; }
#ultra-v4 .ue-calc-out span { color:var(--text-muted); font-size:13px; }
#ultra-v4 .ue-calc-out strong { color:var(--text); font-size:21px; font-weight:800; }
#ultra-v4 .ue-calc-out strong small { font-size:12px; font-weight:600; opacity:.6; }
#ultra-v4 .ue-calc-vs strong { color:var(--text-dim); text-decoration:line-through; }
#ultra-v4 .ue-calc-save { margin-top:6px; padding-top:16px !important; border-top:1.5px solid var(--border-soft) !important; }
#ultra-v4 .ue-calc-save span { color:var(--text); font-weight:700; font-size:14px; }
#ultra-v4 .ue-calc-save .ue-save-num { font-size:30px; font-weight:800; letter-spacing:-0.02em; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* latency */
#ultra-v4 .ue-latency { text-align:center; }
#ultra-v4 .ue-gauge { --gauge-c:var(--accent); width:186px; height:186px; margin:8px auto 0; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; background:conic-gradient(var(--gauge-c) 0deg 280deg, var(--card-bg-2) 280deg 360deg); transition:background .6s ease; }
#ultra-v4 .ue-gauge::before { content:''; position:absolute; inset:13px; border-radius:50%; background:var(--card-bg); box-shadow:inset 0 2px 14px rgba(0,0,0,0.16); }
#ultra-v4 .ue-gauge-num, #ultra-v4 .ue-gauge-unit { position:relative; z-index:1; }
#ultra-v4 .ue-gauge-num { font-size:50px; font-weight:800; letter-spacing:-0.03em; line-height:1; color:var(--text); }
#ultra-v4 .ue-gauge-unit { font-size:13px; color:var(--text-dim); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:5px; }
#ultra-v4 .ue-latency.ue-fast .ue-gauge { --gauge-c:#3fbf7f; } #ultra-v4 .ue-latency.ue-fast .ue-gauge-num { color:#3fbf7f; }
#ultra-v4 .ue-latency.ue-mid .ue-gauge { --gauge-c:var(--orange); } #ultra-v4 .ue-latency.ue-mid .ue-gauge-num { color:var(--orange); }
#ultra-v4 .ue-latency.ue-slow .ue-gauge { --gauge-c:#e0607a; } #ultra-v4 .ue-latency.ue-slow .ue-gauge-num { color:#e0607a; }
#ultra-v4 .ue-gauge-sub { color:var(--text-muted); font-size:14px; margin:20px 0 20px; } #ultra-v4 .ue-gauge-sub strong { color:var(--text); }

/* stack */
#ultra-v4 .ue-stack-list { display:flex; flex-direction:column; gap:12px; }
#ultra-v4 .ue-stack-item { background:var(--card-bg-2); border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; transition:border-color .2s; }
#ultra-v4 .ue-stack-item.ue-open, #ultra-v4 .ue-stack-item:hover { border-color:var(--accent); }
#ultra-v4 .ue-stack-head { width:100%; display:flex; align-items:center; gap:16px; padding:16px 20px; background:none; border:0; cursor:pointer; color:var(--text); font-size:15px; font-weight:700; text-align:left; }
#ultra-v4 .ue-stack-head > i:first-child { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; background:var(--accent-soft); color:var(--accent-2); font-size:17px; flex:0 0 auto; }
#ultra-v4 .ue-stack-name { flex:1; }
#ultra-v4 .ue-stack-caret { font-size:12px; color:var(--text-dim); transition:transform .25s; }
#ultra-v4 .ue-stack-item.ue-open .ue-stack-caret { transform:rotate(180deg); color:var(--accent-2); }
#ultra-v4 .ue-stack-body { max-height:0; opacity:0; transition:max-height .3s ease, opacity .3s ease, padding .3s ease; padding:0 20px; }
#ultra-v4 .ue-stack-item.ue-open .ue-stack-body { max-height:240px; opacity:1; padding:0 20px 18px 78px; }
#ultra-v4 .ue-stack-body p { margin:0; color:var(--text-muted); font-size:13.5px; line-height:1.6; }

/* checklist */
#ultra-v4 .ue-check-progress { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
#ultra-v4 .ue-check-bar { flex:1; height:9px; border-radius:99px; background:var(--card-bg-2); overflow:hidden; }
#ultra-v4 .ue-check-bar span { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .4s cubic-bezier(.4,0,.2,1); }
#ultra-v4 .ue-check-pct { font-size:15px; font-weight:800; color:var(--accent-2); min-width:46px; text-align:right; }
#ultra-v4 .ue-check-list { display:grid; grid-template-columns:1fr 1fr; gap:6px 34px; }
#ultra-v4 .ue-check-item { display:flex; gap:15px; align-items:flex-start; padding:12px 14px 12px 0; font-size:14px; line-height:1.45; color:var(--text-muted); cursor:pointer; border-radius:10px; transition:color .15s; }
#ultra-v4 .ue-check-item:hover { color:var(--text); }
#ultra-v4 .ue-check-item input { -webkit-appearance:none; appearance:none; margin:0; width:22px; height:22px; border-radius:7px; border:2px solid var(--card-border); background:var(--card-bg-2); flex:0 0 auto; cursor:pointer; position:relative; transition:background .15s, border-color .15s; }
#ultra-v4 .ue-check-item input:checked { background:var(--accent); border-color:var(--accent); }
#ultra-v4 .ue-check-item input:checked::after { content:''; position:absolute; left:6.5px; top:2.5px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
#ultra-v4 .ue-check-item span { flex:1; padding-top:2px; }
#ultra-v4 .ue-check-verdict { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--border-soft); color:var(--text); font-size:15px; font-weight:600; }
#ultra-v4 .ue-check-verdict > span { flex:1; min-width:200px; }

@media (max-width:820px){
  #ultra-v4 .ue-calc-grid { grid-template-columns:1fr; }
  #ultra-v4 .ue-check-list { grid-template-columns:1fr; }
  #ultra-v4 .ue-quiz, #ultra-v4 .ue-calc, #ultra-v4 .ue-latency, #ultra-v4 .ue-stack, #ultra-v4 .ue-checklist { padding:28px 22px 32px; }
}

/* ============================================================ PLAN CARDS (3-up grid with ribbons + featured medal) ============================================================ */
#ultra-v4 .plans { padding:50px 0 70px; }
/* Defeat bootstrap.min.css default <code> styling (red #c7254e + pink bg + monospace font + padding +
   border-radius). Inside the v4 scope we want inline <code> like "api/pipe.php" to blend with surrounding
   prose - no red color shift, no font change, no padding/background pill. Most pages use <code> in FAQ
   answers and prose to name a config file or URL path; the bootstrap default reads as broken/error text. */
#ultra-v4 code { color:inherit; background:transparent; padding:0; border:0; border-radius:0; font-family:inherit; font-size:inherit; font-weight:inherit; }
#ultra-v4 .plans-row { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; margin-top:72px; }
/* Auto-detect 2-card rows (osticket / limesurvey / ghost): drop to 2 columns, cap width, center.
   Default 3-col grid stranded 2-card layouts as cols 1+2 with empty col 3 = phantom right-side dead space. */
#ultra-v4 .plans-row:has(> .plan-card:nth-child(2):last-child) { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:860px; margin-left:auto; margin-right:auto; }
#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; }
/* Links inside a plan feature list must stay legible: inherit the list text color (white on the featured blue card, theme text elsewhere) and mark them with an underline, instead of falling back to the low-contrast accent-blue link color on the blue card background. */
#ultra-v4 .plan-card li a { color:inherit !important; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
#ultra-v4 .plan-card li a:hover { text-decoration-thickness:2px; }
#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; }
/* Exactly-4-card why-grid: render as 2x2 instead of inheriting the 3-col default (which lays out as 3 + 1-alone on the bottom row). */
#ultra-v4 .why-grid:has(> .why-card:nth-child(4):last-child),
#ultra-v4 .why-grid.why-grid-2x2 { grid-template-columns:repeat(2,1fr) !important; }
#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; }

/* Topic-specific "requirements / how we tune it" lists: a bare <ul> placed directly under a
   centered .section-head inside a .detail-section (the per-page SEO sections). Without this they
   fall through to browser defaults and render as a cramped, full-width wall of text. Card them and
   split into two columns on wider screens to fix spacing and over-long line length. Scoped to the
   direct-child <ul> so it never touches the native .detail-row check-lists. */
#ultra-v4 .detail-section > .shell > ul { list-style:none; max-width:960px; margin:34px auto 0; padding:0; display:grid; gap:14px; }
#ultra-v4 .detail-section > .shell > ul > li { padding:18px 22px; border:1px solid var(--border-soft); border-left:3px solid var(--accent-2); border-radius:12px; background:var(--section-band); color:var(--text-muted); font-size:15px; line-height:1.7; }
#ultra-v4 .detail-section > .shell > ul > li strong { color:var(--text); font-weight:700; }
@media (min-width:760px) { #ultra-v4 .detail-section > .shell > ul { grid-template-columns:1fr 1fr; } }

/* ============================================================ PROSE (consolidated marketing card with accents) ============================================================ */
#ultra-v4 .prose { padding:90px 0; }
/* .prose-card fills the .shell width (1280px max) so it matches the showcase-band / why-grid / cta-band siblings instead of sitting narrower at the previously-capped 920px. Operator screenshot of agency-hosting showed the prior 920px cap creating a visibly narrow card centered under a wider showcase-band. */
#ultra-v4 .prose-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:48px 56px; margin:0 auto; }
#ultra-v4 .prose-card h2 { font-size:24px; font-weight:800; letter-spacing:-0.02em; margin:0 0 8px; text-align:center; color:var(--text); }
/* On multi-section prose-cards (legal pages: service-agreement, privacy-statement) the
   second+ h2 needs a clear section break above it, otherwise it sits ~18px under the
   prior paragraph's bottom margin and reads as a continuation. First h2 stays flush. */
#ultra-v4 .prose-card h2:not(:first-of-type) { margin-top:56px; }
#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 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; }
/* Bottom spacing is on the shell as padding (collapse-immune), not on cta-band as margin (the cta-band's overflow:hidden + .site_wrapper's padding-bottom:0!important conspire to eat any margin-bottom on the cta-band itself). Scoped to .shell that is BOTH a direct child of #ultra-v4 AND the last child - i.e., the cta-band shell is the last thing before the footer-partners strip. This skips: (a) the older .cta-band-wrap pages (about/contact/testimonials/etc) which carry their own 100px inline wrap padding-bottom, (b) mid-page cta-bands like wordpress-optimized-hosting where a FAQ section follows the cta-band. */
#ultra-v4 > .shell:last-child:has(> .cta-band:last-child) { padding-bottom:60px; }
#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; align-items:start; }
/* Single-column variant for cases where each <details> contains wide content (e.g. banner grids) that wants the full row width rather than splitting into 2 cols. Use when the count is odd and the 2-col default would leave dead space, or when content inside the details is wider than a half-row. */
#ultra-v4 .faq-grid.faq-grid-1col { grid-template-columns:1fr; }
#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; }
/* Aurora-animated hero-slide ems: 3-stop seamless loop driven by --em-c1 / --em-c2
   so per-slide and light-mode overrides only need to swap the two vars. Animation
   keyframes (ultra-em-sweep) defined above. */
#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;
  --em-c1: var(--accent-2, #4da6e8);
  --em-c2: #9bd0ff;
  background-image: linear-gradient(90deg, var(--em-c1), var(--em-c2), var(--em-c1)) !important;
  background-size: 200% auto !important;
  background-repeat: repeat !important;
  background-position: 0% center;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation: ultra-em-sweep 4s linear infinite;
}
#ultra-v4 .hero-slide.slide-2 :is(h1, h2) em { --em-c1: #a899ff; --em-c2: var(--accent-2, #4da6e8); }
#ultra-v4 .hero-slide.slide-3 :is(h1, h2) em { --em-c1: var(--accent-3, #1559b3); --em-c2: #9bd0ff; }
/* Light-mode default H1 em (slide-1 "just works"): warm orange -> gold flame, matching slide-3 "flies" so both reads as orange-dominant rather than yellow-dominant on the blue light-mode hero bg. */
[data-theme="light"] #ultra-v4 .hero-slide :is(h1, h2) em { --em-c1: #ff7f3d; --em-c2: #ffd76b; }
/* Light-mode slide-2 H1 em: dark orange -> blue so the "AI" text reads warm on the blue hero. */
[data-theme="light"] #ultra-v4 .hero-slide.slide-2 :is(h1, h2) em { --em-c1: #d65a00; --em-c2: var(--accent-2, #4da6e8); }
/* 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"): warm orange-to-gold flame gradient that matches the WP/speed theme and reads clean on the blue light-mode hero. */
[data-theme="light"] #ultra-v4 .hero-slide.slide-3 :is(h1, h2) em { --em-c1: #ff7f3d; --em-c2: #ffd76b; }
/* 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:40px 0 48px; 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:28px; }
#ultra-v4 .clients-track-wrap { overflow:hidden; position:relative; max-width:65%; margin:0 auto; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
#ultra-v4 .clients-track { display:flex; gap:100px; padding-right:100px; animation:ultrav4-slide 72s linear infinite; width:max-content; align-items:center; will-change:transform; }
#ultra-v4 .clients-track .item { display:flex; align-items:center; flex-shrink:0; }
#ultra-v4 .clients-track .item img { height:40px; width:auto; display:block; filter:brightness(0) invert(1); opacity:0.75; transition:opacity 0.2s; }
#ultra-v4 .clients-track .item img[src*="client-logo-1.png"] { height:24px; }
#ultra-v4 .clients-track .item img[src*="client-logo-5.png"] { height:52px; }
#ultra-v4 .clients-track .item img[src*="client-logo-6.png"] { height:52px; }
#ultra-v4 .clients-track .item img[src*="client-logo-8.png"] { height:52px; transform:translateY(-3px); }
#ultra-v4 .clients-track .item img[src*="client-logo-9.png"] { height:52px; }
#ultra-v4 .clients-track .item:hover img { opacity:1; }
[data-theme="light"] #ultra-v4 .clients-track .item img { filter:brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(2600%) hue-rotate(198deg) brightness(72%) contrast(98%); opacity:0.95; }
[data-theme="light"] #ultra-v4 .clients-track .item:hover img { opacity:1; }
@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; }
  #ultra-v4 .testimonials-grid, #ultra-v4 .related-grid { grid-template-columns:repeat(2,1fr); }
  #ultra-v4 .plans-row, #ultra-v4 .plans-row:has(> .plan-card:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:720px; margin-left:auto; margin-right:auto; }
}
/* Stack the two-column detail rows and drop the decorative icon box so the prose gets full
   width on tablet/phone (was 1fr 1fr with no breakpoint, which squeezed the copy into half). */
/* Hero logo strip + inline mascot: on tablet/phone force the tech-logo row to wrap (some hero
   variants pin it to nowrap on desktop) and cap the inline mascot, so neither pushes the page
   wider than the viewport and clips the hero copy. */
@media (max-width:1024px) {
  #ultra-v4 .hero .hero-tech { flex-wrap:wrap !important; max-width:100% !important; gap:16px 22px !important; justify-content:center !important; }
  #ultra-v4 .hero-figure-inline img { height:clamp(200px,32vh,290px) !important; max-width:82% !important; width:auto; }
}
@media (max-width:820px) {
  #ultra-v4 .detail-row { grid-template-columns:1fr; gap:30px; }
  #ultra-v4 .detail-row.reverse > :nth-child(1) { order:0; }
  #ultra-v4 .detail-img { display:none; }
  /* Comparison tables were overflow:hidden, so a table wider than the phone got its last
     column clipped. Let the card scroll the table horizontally instead of cutting it off. */
  #ultra-v4 .compare-table { overflow-x:auto; -webkit-overflow-scrolling:touch; padding:18px; }
  #ultra-v4 .compare-table th, #ultra-v4 .compare-table td { padding:12px 10px; font-size:13px; }
}
@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 .testimonials-grid, #ultra-v4 .related-grid { grid-template-columns:1fr; }
  #ultra-v4 .apps-icons { grid-template-columns:repeat(4,1fr); }
  #ultra-v4 .section-head h2 { font-size:30px; }
  #ultra-v4 .plans-row, #ultra-v4 .plans-row:has(> .plan-card:nth-child(2):last-child) { grid-template-columns:1fr; max-width:420px; margin-top:48px; }
}
@media (max-width:440px) {
  #ultra-v4 .apps-icons { grid-template-columns:repeat(3,1fr); }
}

/* ============================================================
   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);
}
/* .cta-secondary edge uses --cta-edge: translucent white in dark mode (so the ghost button reads on dark
   backgrounds on every page), and the light --border value in light mode. Border only; hover still flips to --accent. */