/* =========================================================
   Ocat Ads live demonstration - /myaccount/LiveDemo/
   Standalone layout (does not use the My Account styles)
   ========================================================= */
:root{
  --ld-primary:#56b8e6;
  --ld-primary-dark:#2f8fc0;
  --ld-primary-soft:rgba(86,184,230,.14);
  --ld-navy:#0f2238;
  --ld-navy-2:#1b2f45;
  --ld-accent:#f59e0b;
  --ld-bg:#f3f6fb;
  --ld-surface:#fff;
  --ld-border:#e2e9f2;
  --ld-text:#2c3a4d;
  --ld-muted:#6c7a91;
  --ld-faint:#9aa7ba;
  --ld-radius:16px;
}

html, body.ld-body{ background:var(--ld-bg); }
body.ld-body{ font-family:"Open Sans",sans-serif; color:var(--ld-text); margin:0; min-height:100vh; display:flex; flex-direction:column; }
body.ld-body > form{ flex:1; display:flex; flex-direction:column; }
.ld-body a{ text-decoration:none; }
.ld-body h1, .ld-body h2, .ld-body h3, .ld-body h4{ font-family:Montserrat,sans-serif; }
.ld-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- header ---------- */
.ld-header{ color:#fff; padding:16px 0 26px;
  background:radial-gradient(1200px 400px at 85% -10%,rgba(86,184,230,.35),transparent 60%),
             linear-gradient(120deg,var(--ld-navy) 0%,var(--ld-navy-2) 60%,#21507a 100%); }
.ld-topline{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.ld-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.ld-brand img{ height:36px; background:#fff; border-radius:8px; padding:3px 6px; }
.ld-brand span{ font-family:Montserrat,sans-serif; font-weight:700; font-size:1.1rem; white-space:nowrap; }
.ld-brand em{ font-style:normal; font-weight:600; color:#9fd6f3; margin-left:4px; }
.ld-exit{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06);
  color:#fff; border-radius:30px; padding:7px 14px; font-size:.85rem; font-weight:600; cursor:pointer; transition:.15s; }
.ld-exit:hover{ background:rgba(255,255,255,.16); }

.ld-cust{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.ld-cust-av{ flex:0 0 auto; width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-family:Montserrat,sans-serif; font-weight:800; font-size:1.8rem; color:#fff;
  background:linear-gradient(135deg,var(--ld-primary),var(--ld-primary-dark)); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.ld-cust-info{ min-width:0; flex:1 1 260px; }
.ld-cust-label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:#9fc3dd; font-weight:700; }
.ld-live{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; letter-spacing:.05em;
  background:rgba(255,255,255,.12); border-radius:20px; padding:3px 9px; margin-left:4px; vertical-align:middle; color:#fff; }
.ld-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.25);
  animation:ldpulse 1.8s infinite; }
@keyframes ldpulse{ 50%{ box-shadow:0 0 0 6px rgba(74,222,128,0); } }
.ld-cust-name{ font-family:Montserrat,sans-serif; font-size:clamp(1.4rem,3vw,2rem); font-weight:800; line-height:1.2; margin:4px 0 6px; overflow-wrap:anywhere; }
.ld-cust-url{ color:#cfe8f7; font-size:.88rem; overflow-wrap:anywhere; }
.ld-cust-url:hover{ color:#fff; }
.ld-cust-pick{ flex:0 1 300px; min-width:220px; }
.ld-cust-pick label{ display:block; font-size:.74rem; color:#9fc3dd; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.ld-cust-pick select{ width:100%; height:46px; border-radius:12px; border:0; padding:0 14px; font-weight:600; font-size:.95rem; color:var(--ld-navy); cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.18); }

/* ---------- step tabs (sticky) ---------- */
.ld-stepbar{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ld-border); box-shadow:0 4px 18px rgba(15,34,56,.05); }
/* all tabs on one line: the bar is wider than the page content, and the controls float at the bottom-right (.ld-dock) */
.ld-stepbar .ld-container{ max-width:1360px; }
.ld-steps{ display:flex; justify-content:space-between; gap:4px; overflow-x:auto; padding:10px 0; scrollbar-width:thin; }
.ld-steps a{ flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:12px; white-space:nowrap;
  color:var(--ld-muted); font-weight:600; font-size:.85rem; transition:.15s; }
.ld-steps a b{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem;
  background:var(--ld-bg); color:var(--ld-navy-2); border:1px solid var(--ld-border); }
.ld-steps a:hover{ background:var(--ld-bg); color:var(--ld-navy); }
.ld-steps a.active{ background:var(--ld-primary); color:#fff; box-shadow:0 6px 16px rgba(86,184,230,.35); }
.ld-steps a.active b{ background:#fff; color:var(--ld-primary-dark); border-color:#fff; }

/* ---------- auto-play ---------- */
/* floating controls at the bottom-right: auto-play, then voice */
.ld-dock{ position:fixed; right:20px; bottom:20px; z-index:50; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 40px); }
.ld-auto, .ld-voice{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-width:0; border:1px solid var(--ld-border); background:var(--ld-surface);
  color:var(--ld-muted); border-radius:30px; padding:8px 16px 8px 8px; font-size:.86rem; font-weight:600; cursor:pointer;
  box-shadow:0 10px 28px rgba(15,34,56,.18); transition:.15s; }
.ld-auto{ flex-shrink:1; max-width:360px; }
.ld-auto i{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:var(--ld-bg); color:var(--ld-navy-2); font-size:.95rem; }
.ld-auto span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ld-auto em{ font-style:normal; color:var(--ld-navy); }
.ld-auto b{ color:var(--ld-primary-dark); font-variant-numeric:tabular-nums; }
.ld-auto:hover{ border-color:var(--ld-primary); }
.ld-auto.on i{ background:var(--ld-primary); color:#fff; }
.ld-voice i{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:var(--ld-bg); color:var(--ld-navy-2); font-size:1.1rem; }
.ld-voice span{ white-space:nowrap; }
.ld-voice:hover{ border-color:var(--ld-primary); transform:translateY(-1px); }
.ld-voice.on i{ background:var(--ld-primary); color:#fff; }
.ld-voice.playing i{ animation:ldvoice 1.2s ease-in-out infinite; }
.ld-voice.blocked{ border-color:var(--ld-primary); color:var(--ld-primary-dark); }
@keyframes ldvoice{ 0%,100%{ box-shadow:0 0 0 0 rgba(86,184,230,.55); } 50%{ box-shadow:0 0 0 6px rgba(86,184,230,0); } }
/* welcome box: shown when the browser needs a click before the voice can start */
.ld-welcome{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(15,30,55,.55); backdrop-filter:blur(3px); animation:ldfade .2s ease-out; }
.ld-welcome-box{ width:100%; max-width:420px; background:var(--ld-surface); border-radius:18px; padding:30px 26px 22px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.25); }
.ld-welcome-ic{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ld-primary); color:#fff; font-size:1.8rem; animation:ldvoice 1.6s ease-in-out infinite; }
.ld-welcome-box h2{ font-family:Montserrat,sans-serif; font-weight:700; font-size:1.35rem; color:var(--ld-navy); margin:0 0 8px; }
.ld-welcome-box p{ color:var(--ld-muted); font-size:.95rem; margin:0 0 20px; }
.ld-welcome-box p b{ color:var(--ld-navy); }
.ld-welcome-box .ld-btn{ width:100%; justify-content:center; }
.ld-welcome-skip{ display:block; width:100%; margin-top:10px; border:0; background:none; color:var(--ld-muted); font-size:.88rem; padding:6px; cursor:pointer; }
.ld-welcome-skip:hover{ color:var(--ld-navy); text-decoration:underline; }
@keyframes ldfade{ from{ opacity:0; } to{ opacity:1; } }
.ld-progress{ height:3px; background:transparent; }
.ld-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--ld-primary),var(--ld-primary-dark)); transition:width .25s linear; }

/* ---------- content ---------- */
.ld-main{ flex:1; padding:28px 0 96px; }   /* bottom room so the floating controls don't cover the last content */
.ld-card{ background:var(--ld-surface); border:1px solid var(--ld-border); border-radius:var(--ld-radius); padding:24px 26px; margin-bottom:20px; }
.ld-btn{ display:inline-flex; align-items:center; gap:8px; border-radius:12px; padding:12px 22px; font-weight:700; font-size:.95rem;
  background:var(--ld-primary); color:#fff; white-space:nowrap; transition:.15s; box-shadow:0 8px 20px rgba(86,184,230,.35); }
.ld-btn:hover{ background:var(--ld-primary-dark); color:#fff; }

/* step intro */
.ld-intro{ display:flex; gap:18px; align-items:flex-start; margin-bottom:22px; }
.ld-intro-ic{ flex:0 0 auto; width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; background:var(--ld-primary-soft); color:var(--ld-primary-dark); }
.ld-intro small{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ld-primary-dark); }
.ld-intro h1{ font-size:clamp(1.3rem,2.6vw,1.75rem); font-weight:700; color:var(--ld-navy); margin:3px 0 6px; }
.ld-intro p{ margin:0; color:var(--ld-muted); line-height:1.65; max-width:780px; }

/* placeholder until each step's demo is built */
.ld-soon{ text-align:center; padding:64px 20px; border:2px dashed var(--ld-border); border-radius:var(--ld-radius); background:#fbfdff; color:var(--ld-muted); }
.ld-soon i{ font-size:2.6rem; color:#c5d3e3; display:block; margin-bottom:10px; }
.ld-soon h4{ font-size:1.05rem; font-weight:700; color:var(--ld-navy); margin-bottom:4px; }
.ld-soon p{ margin:0; font-size:.92rem; }

/* key numbers above a step's demo (e.g. banner ads, landing pages, views) */
.ld-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:16px; }
.ld-stats > div{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center;
  background:var(--ld-surface); border:1px solid var(--ld-border); border-radius:var(--ld-radius); padding:14px 18px; }
.ld-stats i{ grid-row:1 / span 2; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; background:var(--ld-primary-soft); color:var(--ld-primary-dark); }
.ld-stats b{ font-family:Montserrat,sans-serif; font-size:1.45rem; font-weight:700; color:var(--ld-navy); line-height:1.1; font-variant-numeric:tabular-nums; }
.ld-stats span{ font-size:.8rem; color:var(--ld-muted); font-weight:600; }
.ld-hint{ display:flex; align-items:center; gap:8px; color:var(--ld-muted); font-size:.9rem; margin:0 0 14px; }
.ld-hint i{ color:var(--ld-primary-dark); }

/* banner ads: the whole banner, never cropped; each card opens its landing page */
.ld-ads{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:18px; align-items:start; }
.ld-ad{ display:flex; flex-direction:column; background:var(--ld-surface); border:1px solid var(--ld-border); border-radius:var(--ld-radius);
  overflow:hidden; color:var(--ld-navy); text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.ld-ad:hover{ border-color:var(--ld-primary); box-shadow:0 12px 28px rgba(15,34,56,.10); transform:translateY(-2px); color:var(--ld-navy); }
.ld-ad-img{ background:var(--ld-primary-soft); line-height:0; }
.ld-ad-img img{ display:block; width:100%; height:auto; }
.ld-ad-img.noimg{ height:160px; display:flex; align-items:center; justify-content:center; line-height:1; }
.ld-ad-img.noimg::before{ content:"\F42A"; font-family:"bootstrap-icons"; font-size:2.2rem; color:var(--ld-primary-dark); }
.ld-ad-body{ padding:12px 16px 10px; }
.ld-ad-body b{ display:block; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.ld-ad-lp{ display:flex; align-items:center; gap:6px; margin-top:5px; font-size:.78rem; color:var(--ld-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ld-ad-lp i{ flex:0 0 auto; }
.ld-ad-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:auto; padding:10px 16px; border-top:1px solid var(--ld-border);
  font-size:.8rem; color:var(--ld-muted); }
.ld-ad-meta .go{ margin-left:auto; font-weight:700; color:var(--ld-primary-dark); }
.ld-ad:hover .go{ color:var(--ld-primary); }

.ld-pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:20px; color:var(--ld-muted); font-size:.9rem; }
.ld-pager .links{ display:flex; gap:8px; }
.ld-pager a{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px; border:1px solid var(--ld-border);
  background:var(--ld-surface); color:var(--ld-navy); font-weight:600; }
.ld-pager a:hover{ border-color:var(--ld-primary); color:var(--ld-primary-dark); }

/* portal distribution: the portal, then its links */
.ld-portal{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; padding:18px 22px; margin-bottom:16px; border-radius:var(--ld-radius);
  background:linear-gradient(135deg,var(--ld-navy),#1d4f7a); color:#fff; }
.ld-portal-ic{ flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; background:rgba(255,255,255,.14); }
.ld-portal-txt{ flex:1 1 200px; min-width:0; }
.ld-portal-txt small{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.ld-portal-txt b{ display:block; font-family:Montserrat,sans-serif; font-size:1.2rem; overflow-wrap:anywhere; }
.ld-portal .ld-btn{ box-shadow:none; }
.ld-portal-to{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; background:rgba(255,255,255,.12); font-size:.9rem; }
.ld-portal-to b{ color:#9fdcff; }

/* one portal the ads are on, with its links */
.ld-pgroup{ background:var(--ld-surface); border:1px solid var(--ld-border); border-radius:var(--ld-radius); padding:16px; margin-bottom:14px; }
.ld-pgroup[hidden]{ display:none; }
.ld-pgroup-h{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:12px; }
.ld-pgroup-h > i{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; background:var(--ld-navy); color:#fff; }
.ld-pgroup-h span{ flex:1 1 180px; min-width:0; }
.ld-pgroup-h b{ display:block; font-weight:700; color:var(--ld-navy); overflow-wrap:anywhere; }
.ld-pgroup-h small{ font-size:.78rem; color:var(--ld-muted); }
.ld-pgroup-h a{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:10px; border:1px solid var(--ld-border);
  font-size:.82rem; font-weight:700; color:var(--ld-primary-dark); white-space:nowrap; }
.ld-pgroup-h a:hover{ border-color:var(--ld-primary); }

.ld-sec{ display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; color:var(--ld-navy); margin:22px 0 12px; }
.ld-sec i{ color:var(--ld-primary-dark); }
.ld-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:10px; }
.ld-links a{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--ld-border); border-radius:12px;
  background:var(--ld-surface); color:var(--ld-navy); text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.ld-links a[hidden], .ld-links[hidden], .ld-sec[hidden]{ display:none; }
.ld-links a:hover{ border-color:var(--ld-primary); box-shadow:0 8px 20px rgba(15,34,56,.07); color:var(--ld-navy); }
.ld-links a > i:first-child{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--ld-primary-soft); color:var(--ld-primary-dark); }
.ld-links span{ flex:1; min-width:0; }
.ld-links b{ display:block; font-weight:600; font-size:.92rem; line-height:1.35; overflow-wrap:anywhere; }
.ld-links small{ display:block; font-size:.75rem; color:var(--ld-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ld-links .go{ flex:0 0 auto; color:var(--ld-faint); font-size:.85rem; }
.ld-links a:hover .go{ color:var(--ld-primary); }

/* referral networks: image, network, the customer's referral page(s) with views */
.ld-refs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:16px; align-items:start; }
.ld-ref{ background:var(--ld-surface); border:1px solid var(--ld-border); border-radius:var(--ld-radius); overflow:hidden; }
.ld-ref-img{ display:block; background:var(--ld-primary-soft); line-height:0; }
.ld-ref-img img{ display:block; width:100%; height:auto; }
.ld-ref-img img + img{ border-top:1px solid var(--ld-border); }
.ld-ref-h{ display:flex; align-items:center; gap:12px; padding:14px 16px; }
.ld-ref-h > i{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; background:var(--ld-navy); color:#fff; }
.ld-ref-h span{ min-width:0; }
.ld-ref-h small{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ld-primary-dark); }
.ld-ref-h a{ color:var(--ld-navy); }
.ld-ref-h a:hover{ color:var(--ld-primary-dark); }
.ld-ref-h b{ display:block; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.ld-ref-h em{ display:block; font-style:normal; font-size:.78rem; color:var(--ld-faint); overflow-wrap:anywhere; }
.ld-ref-l{ padding:12px 16px 16px; border-top:1px solid var(--ld-border); display:flex; flex-direction:column; gap:8px; }
.ld-ref-l > small{ font-size:.75rem; font-weight:600; color:var(--ld-muted); }
.ld-ref-l a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--ld-border); border-radius:12px; color:var(--ld-navy);
  transition:border-color .15s, box-shadow .15s; }
.ld-ref-l a:hover{ border-color:var(--ld-primary); box-shadow:0 8px 20px rgba(15,34,56,.07); color:var(--ld-navy); }
.ld-ref-l a > i{ flex:0 0 auto; width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--ld-primary-soft); color:var(--ld-primary-dark); }
.ld-ref-l span{ flex:1; min-width:0; }
.ld-ref-l b{ display:block; font-weight:600; font-size:.88rem; overflow-wrap:anywhere; }
.ld-ref-l span small{ display:block; font-size:.74rem; color:var(--ld-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ld-ref-l em{ flex:0 0 auto; font-style:normal; font-size:.8rem; font-weight:700; color:var(--ld-primary-dark); white-space:nowrap; }

/* SEO & GEO: Google custom search, then landing pages linked to Google and AI Mode results */
.ld-cse{ margin-top:20px; }   /* space after the landing pages' pager */
.ld-cse .ld-sec{ margin-top:0; }
.ld-cse .gsc-control-cse{ padding:0; border:0; background:transparent; }
.ld-cse table, .ld-cse td{ border-collapse:separate; }
/* landing page titles as search phrases, in a Google-style panel */
.ld-serp{ padding:0; overflow:hidden; }
.ld-serp-h{ display:flex; align-items:center; gap:18px; padding:20px 24px; border-bottom:1px solid var(--ld-border);
  background:linear-gradient(180deg,#f8fbff,var(--ld-surface)); }
.ld-serp-logo{ flex:0 0 auto; font-family:Arial,Helvetica,sans-serif; font-size:1.9rem; font-weight:700; letter-spacing:-1px; line-height:1; }
.ld-serp-logo b:nth-child(1), .ld-serp-logo b:nth-child(4){ color:#4285f4; }
.ld-serp-logo b:nth-child(2), .ld-serp-logo b:nth-child(6){ color:#ea4335; }
.ld-serp-logo b:nth-child(3){ color:#fbbc05; }
.ld-serp-logo b:nth-child(5){ color:#34a853; }
.ld-serp-h h3{ font-size:1.1rem; font-weight:700; color:var(--ld-navy); margin:0 0 3px; }
.ld-serp-h p{ margin:0; font-size:.86rem; color:var(--ld-muted); }
.ld-serp-h p b{ color:var(--ld-navy); }
.ld-serp-list{ list-style:none; margin:0; padding:10px 14px 14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr)); column-gap:18px; }
.ld-serp-list li{ display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--ld-border); padding:4px 0; min-width:0; }
.ld-serp-list a.q{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; color:#1a0dab; transition:background .15s; }
.ld-serp-list a.q > i:first-child{ flex:0 0 auto; color:#9aa0a6; }
.ld-serp-list a.q span{ flex:1; min-width:0; font-size:.95rem; line-height:1.4; overflow-wrap:anywhere; }
.ld-serp-list a.q .go{ flex:0 0 auto; color:var(--ld-faint); opacity:0; transition:opacity .15s; }
.ld-serp-list a.q:hover{ background:#f1f5fb; color:#1a0dab; }
.ld-serp-list a.q:hover span{ text-decoration:underline; }
.ld-serp-list a.q:hover .go{ opacity:1; }
.ld-serp-list a.ai{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:20px; font-size:.76rem; font-weight:700;
  color:#fff; background:linear-gradient(135deg,#4285f4,#9b72cb 60%,#d96570); white-space:nowrap; transition:filter .15s; }
.ld-serp-list a.ai:hover{ filter:brightness(1.1); color:#fff; }
@media (max-width:480px){ .ld-serp-list a.ai span{ display:none; } .ld-serp-h{ padding:16px; } .ld-serp-logo{ font-size:1.5rem; } }

/* a ?c= portal that was not found */
.ld-notice{ display:flex; align-items:flex-start; gap:10px; margin:12px 0 0; padding:10px 14px; border-radius:12px;
  background:#fff7e6; border:1px solid #ffd99a; color:#7a4b00; font-size:.88rem; }
.ld-notice i{ color:#d98a00; margin-top:1px; }

/* report: header, key figures, channels, most viewed */
.ld-rep-h{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:22px 26px; margin-bottom:16px;
  border-radius:var(--ld-radius); background:linear-gradient(135deg,var(--ld-navy),#1d4f7a); color:#fff; }
.ld-rep-h small{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#9fdcff; }
.ld-rep-h h2{ font-family:Montserrat,sans-serif; font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:700; margin:4px 0 6px; }
.ld-rep-h p{ margin:0; font-size:.88rem; color:rgba(255,255,255,.78); }
.ld-rep-print{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:.88rem; cursor:pointer; }
.ld-rep-print:hover{ background:rgba(255,255,255,.2); }

.ld-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:14px; margin-bottom:16px; }
.ld-kpis > div{ background:var(--ld-surface); border:1px solid var(--ld-border); border-radius:var(--ld-radius); padding:16px 18px; }
.ld-kpis i{ display:inline-flex; width:38px; height:38px; border-radius:11px; align-items:center; justify-content:center; font-size:1.1rem;
  background:var(--ld-primary-soft); color:var(--ld-primary-dark); margin-bottom:10px; }
.ld-kpis b{ display:block; font-family:Montserrat,sans-serif; font-size:1.8rem; font-weight:700; color:var(--ld-navy); line-height:1.1; font-variant-numeric:tabular-nums; }
.ld-kpis span{ display:block; font-weight:700; font-size:.88rem; color:var(--ld-navy); margin-top:4px; }
.ld-kpis small{ display:block; font-size:.76rem; color:var(--ld-muted); }

.ld-rep-grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:16px; align-items:start; }
.ld-rep-grid > .ld-card:only-child{ grid-column:1 / -1; }
.ld-rep-sec{ margin-bottom:0; }
.ld-rep-sec .ld-sec{ margin-top:0; }

.ld-chan{ list-style:none; margin:0; padding:0; }
.ld-chan li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ic nm go" "ic fg go"; column-gap:14px; row-gap:4px;
  align-items:center; padding:12px 0; border-bottom:1px solid var(--ld-border); }
.ld-chan li:last-child{ border-bottom:0; }
.ld-chan .ic{ grid-area:ic; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; background:var(--ld-navy); color:#fff; }
.ld-chan .nm{ grid-area:nm; min-width:0; }
.ld-chan .nm small{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ld-primary-dark); }
.ld-chan .nm b{ font-weight:700; color:var(--ld-navy); }
.ld-chan .fg{ grid-area:fg; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.84rem; color:var(--ld-muted); }
.ld-chan .fg b{ color:var(--ld-navy); font-variant-numeric:tabular-nums; }
.ld-chan a{ grid-area:go; font-size:.82rem; font-weight:700; color:var(--ld-primary-dark); white-space:nowrap; }
.ld-chan a:hover{ color:var(--ld-primary); }

.ld-top{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ld-top .t{ display:flex; justify-content:space-between; gap:12px; font-size:.88rem; margin-bottom:6px; }
.ld-top .t span{ min-width:0; color:var(--ld-navy); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ld-top .t b{ flex:0 0 auto; color:var(--ld-primary-dark); font-variant-numeric:tabular-nums; }
.ld-top .bar{ height:8px; border-radius:8px; background:var(--ld-primary-soft); overflow:hidden; }
.ld-top .bar i{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--ld-primary),var(--ld-primary-dark)); }

/* report call to action */
.ld-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; margin-top:20px; padding:28px 30px;
  border-radius:var(--ld-radius); background:linear-gradient(135deg,var(--ld-primary-soft),#eef7ff); border:1px solid rgba(86,184,230,.35); }
.ld-cta > div{ flex:1 1 320px; min-width:0; }
.ld-cta h3{ font-family:Montserrat,sans-serif; font-size:1.35rem; font-weight:700; color:var(--ld-navy); margin:0 0 6px; }
.ld-cta p{ margin:0; color:var(--ld-muted); line-height:1.6; }
.ld-cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:18px 34px; border-radius:16px;
  font-family:Montserrat,sans-serif; font-size:1.15rem; font-weight:700; color:#fff; white-space:nowrap;
  background:linear-gradient(135deg,var(--ld-primary),var(--ld-primary-dark)); box-shadow:0 14px 30px rgba(47,143,192,.4);
  transition:transform .15s, box-shadow .15s; animation:ldcta 2.4s ease-in-out infinite; }
.ld-cta-btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 18px 36px rgba(47,143,192,.5); }
@keyframes ldcta{ 0%,100%{ box-shadow:0 14px 30px rgba(47,143,192,.4); } 50%{ box-shadow:0 14px 30px rgba(47,143,192,.4),0 0 0 8px rgba(86,184,230,.18); } }
.ld-cta-btn.busy{ opacity:.7; pointer-events:none; }
.ld-cta-ok{ display:flex; align-items:center; gap:16px; }
.ld-cta-ok > i{ flex:0 0 auto; font-size:2.4rem; color:#1f9d55; }
@media (max-width:575.98px){ .ld-cta{ padding:22px 18px; } .ld-cta-btn{ width:100%; white-space:normal; font-size:1.05rem; padding:16px 20px; } }
@media (prefers-reduced-motion:reduce){ .ld-cta-btn{ animation:none; } }

@media (max-width:991.98px){ .ld-rep-grid{ grid-template-columns:minmax(0,1fr); } }

/* the report prints on its own: no demo header, tabs, buttons or footer */
@media print{
  .ld-header, .ld-stepbar, .ld-intro, .ld-nav, .ld-footer, .ld-rep-print, .ld-chan a, .ld-welcome, .ld-cta{ display:none !important; }
  .ld-body{ background:#fff; }
  .ld-main{ padding:0; }
  .ld-rep-h{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .ld-kpis > div, .ld-card{ break-inside:avoid; }
}

/* previous / next */
.ld-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
.ld-nav a{ display:flex; flex-direction:column; gap:3px; max-width:48%; padding:14px 18px; border-radius:14px; border:1px solid var(--ld-border);
  background:var(--ld-surface); color:var(--ld-navy); font-weight:700; transition:.15s; }
.ld-nav a small{ font-size:.74rem; color:var(--ld-faint); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.ld-nav a:hover{ border-color:var(--ld-primary); color:var(--ld-primary-dark); box-shadow:0 8px 20px rgba(15,34,56,.06); }
.ld-nav a.next{ margin-left:auto; text-align:right; }

/* overview */
.ld-hero{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; }
.ld-hero h2{ font-size:clamp(1.25rem,2.4vw,1.6rem); font-weight:700; color:var(--ld-navy); margin:0 0 8px; }
.ld-hero p{ margin:0; color:var(--ld-muted); line-height:1.7; max-width:740px; }
.ld-flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:18px; }
.ld-flow a{ display:flex; flex-direction:column; gap:10px; height:100%; padding:22px; border-radius:var(--ld-radius);
  background:var(--ld-surface); border:1px solid var(--ld-border); color:var(--ld-text); transition:.18s; }
.ld-flow a:hover{ border-color:var(--ld-primary); box-shadow:0 14px 30px rgba(27,47,69,.09); transform:translateY(-3px); }
.ld-flow-top{ display:flex; align-items:center; justify-content:space-between; }
.ld-flow-top i{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.35rem;
  background:var(--ld-primary-soft); color:var(--ld-primary-dark); }
.ld-flow-top b{ font-family:Montserrat,sans-serif; font-size:1.8rem; font-weight:800; color:#dfe7f1; }
.ld-flow h3{ font-size:1.02rem; font-weight:700; color:var(--ld-navy); margin:0; }
.ld-flow p{ font-size:.9rem; color:var(--ld-muted); line-height:1.6; margin:0; flex:1; }
.ld-flow .go{ font-size:.86rem; font-weight:700; color:var(--ld-primary-dark); }

/* ---------- footer ---------- */
.ld-footer{ border-top:1px solid var(--ld-border); background:var(--ld-surface); color:var(--ld-faint); font-size:.82rem; padding:16px 0; text-align:center; }

/* medium screens: slightly smaller tabs, so they still fit on one line */
@media (max-width:1279.98px){
  .ld-steps{ gap:2px; }
  .ld-steps a{ padding:7px 8px; gap:6px; font-size:.8rem; }
}

@media (max-width:767.98px){
  .ld-container{ padding:0 16px; }
  .ld-exit span{ display:none; }
  .ld-dock{ left:16px; right:16px; bottom:16px; max-width:none; justify-content:flex-end; }
  .ld-auto{ max-width:none; flex:1 1 auto; }
  .ld-voice{ padding:6px; }
  .ld-voice span{ display:none; }
  .ld-hero{ grid-template-columns:minmax(0,1fr); }
  .ld-cust-pick{ flex:1 1 100%; }
  .ld-intro{ flex-direction:column; gap:12px; }
  .ld-nav a{ max-width:none; flex:1; }
  .ld-card{ padding:18px 16px; }
}