:root {
  /* Figma to WordPress page palette — lifted verbatim from the source's .f2w tokens */
  --f2w--pg: #ffffff;
  --f2w--pg2: #f7f7f9;
  --f2w--tx: #0a0a0a;
  --f2w--txd: #525252;
  --f2w--txf: #a3a3a3;
  --f2w--acc: #fd6a35;
  --f2w--acc-dk: #171717;
  --f2w--acc-soft: #f4f4f4;
  --f2w--acc-line: #e7e7ea;
  --f2w--acc2: #c2410c;
  --f2w--acc2-solid: #c2410c;
  --f2w--cardbg: #ffffff;
  --f2w--cardbd: #e7e7ea;
  --f2w--line: #ebebeb;
  --f2w--mist: #f4f4f4;
  --f2w--ink: #0a0a0a;
  --f2w--coral: #f65258;

  /* Brand Colors */
  --uc-purple: #4B22CC;
  --uc-purple-dark: #441FB8;
  --uc-purple-deep: #2E1480;
  --uc-purple-light: #8072FC;
  --uc-lemon: #E3ED5D;
  --uc-coral: #FF5A6E;
  --uc-magenta: #ED01EE;
  --uc-violet: #7C4DFF;

  /* Motion */
  --uc-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Gradients */
  --uc-ai-gradient: linear-gradient(105deg, #4B22CC 0%, #8072FC 55%, #ED01EE 100%);
  --uc-ai-gradient-light: linear-gradient(105deg, #B3A6FF 0%, #D9C9FF 45%, #FFB8F2 100%);
  --uc-ai-gradient-soft: linear-gradient(105deg, rgba(75,34,204,.08), rgba(237,1,238,.08));

  /* Neutrals */
  --uc-ink: #020202;
  --uc-ink-2: #313131;
  --uc-slate: #3A4F66;
  --uc-navy: #192A3D;
  --uc-line: #E1E8ED;
  --uc-mist: #F2F5F7;
  --uc-white: #FFFFFF;

  /* Dark UI */
  --uc-bg: #020202;
  --uc-tx: #ffffff;
  --uc-tx-dim: rgba(255,255,255,.70);
  --uc-tx-mut: rgba(255,255,255,.55);
  --uc-tx-faint: rgba(255,255,255,.40);
  --uc-violet-edge: rgba(124,77,255,.32);
  --uc-surface: rgba(255,255,255,.03);
  --uc-surface-2: rgba(255,255,255,.05);
  --uc-hairline: rgba(255,255,255,.08);
  --uc-hairline-soft: rgba(255,255,255,.06);

  /* Fonts */
  --uc-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --uc-fs-hero: clamp(2.375rem,5vw,4rem);
  --uc-fs-h1: clamp(2rem, 4vw, 3rem);
  --uc-fs-h2: clamp(1.625rem,3vw,2.25rem);
  --uc-fs-h3: 1.375rem;
  --uc-fs-body: 1.125rem;
  --uc-fs-small: .875rem;
  --uc-lh-tight: 1.15;
  --uc-lh-body: 1.6;

  /* Spacing */
  --uc-s1: 4px;
  --uc-s2: 8px;
  --uc-s3: 12px;
  --uc-s4: 16px;
  --uc-s5: 24px;
  --uc-s6: 32px;
  --uc-s7: 48px;
  --uc-s8: 64px;
  --uc-s9: 96px;
  --uc-article-w: 900px;               /* single-post measure — header, title, hero image, body */

  /* Radius */
  --uc-r-sm: 8px;
  --uc-r-md: 14px;
  --uc-r-lg: 22px;
  --uc-r-pill: 999px;
  --uc-r-chip: 10px;
  --uc-r-btn: 12px;
  --uc-r-card: 16px;
  --uc-r-xl: 20px;

  /* Shadows */
  --uc-shadow-sm: 0 2px 8px rgba(2,2,2,.06);
  --uc-shadow-md: 0 10px 30px rgba(75,34,204,.12);
  --uc-shadow-lg: 0 24px 60px rgba(75,34,204,.18);
  --uc-shadow-card: 0 22px 48px -24px rgba(0,0,0,.72);
  --uc-shadow-pop: 0 24px 60px -28px rgba(75,34,204,.6);

  /* Layout */
  --uc-maxw: 1200px;
  --uc-maxw-narrow: 720px;

  /* Components */
  --uc-ic-size: 46px;
  --uc-ic-radius: 12px;
  --uc-ic-glyph: 23px;
  --uc-ic-gap: 15px;
  --uc-ic-bg: rgba(124, 77, 255, .14);
  --uc-ic-border: rgba(124, 77, 255, .28);
  --uc-ic-color: #c8b8ff;
  --uc-card-pad-y: 26px;
  --uc-card-pad-x: 22px;
  --uc-tx-soft: rgba(255, 255, 255, .58);
  --uc-dot: rgba(255, 255, 255, .25);
  --uc-dot-hover: rgba(255, 255, 255, .45);
  --uc-dot-size: 9px;
  --uc-dot-active-w: 22px;
  /* ---- Watch-and-learn player (.wl-*) — added 2026-08-06.
     The component itself is promoted into globals below; these are the values
     that are genuinely its own and had been magic numbers in the Classic Mode
     page CSS. Kept at the exact Classic Mode values so promoting the component
     changes nothing on that page. */
  --uc-wl-border: rgba(255, 255, 255, .10);   /* player frame */
  --uc-wl-play: 64px;                         /* featured play button */
  --uc-wl-play-glyph: 26px;
  --uc-wl-mini: 26px;                         /* rail thumbnail play badge */
  --uc-wl-thumb-w: 120px;
  --uc-wl-rail-h: 420px;                      /* rail scroll height, desktop */
  --uc-wl-active: rgba(124, 77, 255, .40);    /* selected / hovered rail card */
  --uc-wl-active-bg: rgba(124, 77, 255, .10);
  --uc-wl-play-shadow: 0 8px 30px -6px rgba(227, 237, 93, .5);
  --uc-wl-badge-bg: rgba(6, 3, 14, .70);      /* scrim behind the mini play glyph */
  --uc-wl-title: rgba(255, 255, 255, .82);    /* rail card title */
  --uc-wl-gap: 20px;                          /* .wl column gap (off-scale, kept as shipped) */
  --uc-wl-top: 44px;
  /* ---- Screenshot card (.sol-shot) — added 2026-08-06. Values exactly as shipped
     in the builder pages' #ucwr-solimg-css block. */
  --uc-shot-bg: #0c0a15;
  --uc-shot-border: rgba(255, 255, 255, .09);
}

/* ============================================================
   SCREENSHOT CARD (.sol-media.sol-shot) — moved into the Global Manager 2026-08-06.

   `.pw-media` is a browser-CHROME frame: it expects a `.pw-mhead` title bar and a
   `.pw-ph` placeholder. `.sol-shot` is the modifier that strips the chrome and turns it
   into a plain image card. Globals only ever had `.sol-media{align-self:stretch}` — the
   three rules that actually make it work lived in a per-page `#ucwr-solimg-css` block,
   duplicated on every builder page and present on no other page.

   Without them a screenshot inside a `.resp-grid` sits in a box stretched to the row
   height while the image keeps its own, so the card renders half empty. That is exactly
   what went wrong on the V4 page. Promoting it fixes every future page; the builder
   pages keep their own copy, which still wins there, so nothing moves on them.
   Mirrored byte-for-byte in local assets/design-tokens.css.
   ============================================================ */
.sol-media.sol-shot { align-self: center; border-radius: var(--uc-r-card); overflow: hidden; background: var(--uc-shot-bg); padding: 0 !important; border: 1px solid var(--uc-shot-border); }
.sol-media.sol-shot img { width: 100% !important; height: auto !important; display: block; max-width: 100% !important; }
.sol-media.sol-shot .pw-mhead, .sol-media.sol-shot .pw-ph { display: none !important; }

/* ============================================================
   WATCH-AND-LEARN PLAYER (.wl / .wl-*) — moved into the Global Manager 2026-08-06.

   It lived in the Classic Mode page's own CSS only: a probe of #protuno-globals found
   ZERO base rules for these classes, so any NEW page using the component rendered
   completely unstyled. Same failure family as `.trio-*` (G-1).

   Values are the shipped Classic Mode values EXACTLY — the point of this move is
   coverage, not restyling, so Classic Mode must render byte-identically afterwards.
   It does: that page's own CSS is printed after this block and still wins there.
   Off-scale numbers (20px gap, 44px offset) became component tokens rather than
   being snapped to the spacing scale.

   The wrapper is `.wl`. Do not introduce a `.wl-wrap` variant — that was drafted and
   thrown away; it is exactly the invented-variant mistake rule 1b warns about.
   Mirrored byte-for-byte in local assets/design-tokens.css.
   ============================================================ */
.wl { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--uc-wl-gap); margin-top: var(--uc-wl-top); align-items: start; }
.wl-player { position: relative; aspect-ratio: 16/9; border-radius: var(--uc-r-card); overflow: hidden; border: 1px solid var(--uc-wl-border); background: var(--uc-ink); cursor: pointer; }
.wl-player img, .wl-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.wl-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.wl-play span { width: var(--uc-wl-play); height: var(--uc-wl-play); border-radius: var(--uc-r-pill); background: var(--uc-lemon); display: grid; place-items: center; box-shadow: var(--uc-wl-play-shadow); }
/* 3px / 1px are optical centring for the triangle glyph, not design-system values. */
.wl-play span svg { width: var(--uc-wl-play-glyph); height: var(--uc-wl-play-glyph); margin-left: 3px; }
.wl-rail { display: flex; flex-direction: column; gap: var(--uc-s3); max-height: var(--uc-wl-rail-h); overflow-y: auto; padding-right: var(--uc-s1); scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 88%, transparent 100%); }
.wl-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.wl-card { display: flex; gap: var(--uc-s3); align-items: center; cursor: pointer; padding: var(--uc-s2); border-radius: var(--uc-r-btn); border: 1px solid var(--uc-hairline); background: var(--uc-surface); transition: border-color .22s var(--uc-ease), background .22s var(--uc-ease); }
.wl-card:hover, .wl-card.is-active { border-color: var(--uc-wl-active); background: var(--uc-wl-active-bg); }
.wl-thumb { position: relative; width: var(--uc-wl-thumb-w); flex-shrink: 0; aspect-ratio: 16/9; border-radius: var(--uc-r-sm); overflow: hidden; }
.wl-thumb .mini-play { position: absolute; inset: 0; display: grid; place-items: center; }
.wl-thumb .mini-play span { width: var(--uc-wl-mini); height: var(--uc-wl-mini); border-radius: var(--uc-r-pill); background: var(--uc-wl-badge-bg); display: grid; place-items: center; }
.wl-thumb .mini-play svg { width: var(--uc-s3); height: var(--uc-s3); margin-left: 1px; }
.wl-ctitle { font-size: var(--uc-fs-small); font-weight: 600; line-height: 1.125rem; color: var(--uc-wl-title); }
@media (max-width: 860px) {
  .wl { grid-template-columns: 1fr; }
  .wl-rail { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
  .wl-card { flex: 0 0 240px; }
}

/* ===================== base.css (shared resets + body theme) — added 2026-07-23 so WP-imported pages inherit the site base ===================== */
:root {
  --pg: #020202;
  --tx: #ffffff;
  --txd: rgba(255,255,255,.62);
  --txf: rgba(255,255,255,.42);
  --acc: #c3b0ff;
  --acc2: #E3ED5D;
  --cardbg: rgba(255,255,255,.03);
  --cardbd: rgba(255,255,255,.07);
  --aurora-op: .34;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--pg); color: var(--tx); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 100%; }
img { max-width: 100%; }
a { color: inherit; }
.uc-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 640px) { .uc-container { padding: 0 20px; } }
.uc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ===================== header.css (nav + dropdowns + mobile) — added 2026-07-23; this is what hides the dropdown panels that were dumping as raw text ===================== */
.uc-header { background:transparent; width:100%; position:fixed; top:0; left:0; z-index:100; transition:background .4s cubic-bezier(.4,0,.2,1), padding .4s cubic-bezier(.4,0,.2,1); }
.uc-header.is-stuck { background:transparent; padding:12px 18px 0; }
.uc-header__wrap { position:relative; max-width:1440px; margin:0 auto; padding:22px 100px; display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; transition:max-width .4s cubic-bezier(.4,0,.2,1), padding .4s cubic-bezier(.4,0,.2,1); }
.uc-header__wrap > * { position:relative; z-index:1; }
.uc-header__wrap::before { content:""; position:absolute; inset:0; z-index:0; border-radius:16px; pointer-events:none; border:1px solid transparent; background:linear-gradient(rgba(8,6,16,.70),rgba(8,6,16,.70)) padding-box, linear-gradient(135deg, rgba(255,255,255,.55), rgba(124,77,255,.28) 32%, rgba(255,255,255,.06) 58%, rgba(227,237,93,.20)) border-box; box-shadow:0 16px 40px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); opacity:0; transition:opacity .4s cubic-bezier(.4,0,.2,1); }
.uc-header.is-stuck .uc-header__wrap { max-width:1240px; padding:12px 26px; }
.uc-header.is-stuck .uc-header__wrap::before { opacity:1; }
.uc-topscrim { position:fixed; top:0; left:0; right:0; height:130px; z-index:90; pointer-events:none; opacity:0; transition:opacity .35s ease; background:linear-gradient(to bottom, rgba(2,2,2,.22), rgba(2,2,2,0) 100%); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 38%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 38%, transparent 100%); }
.uc-topscrim.on { opacity:1; }
.uc-logo { display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; text-decoration:none; }
.uc-logo img { width:30px; height:30px; border-radius:8px; display:block; }
.uc-logo-word { font-weight:700; font-size:20px; letter-spacing:-.02em; color:#fff; }
.uc-nav { display:flex; align-items:center; gap:26px; flex:0 0 auto; }
.uc-nav__item { position:relative; }
.uc-nav__link { display:flex; align-items:center; gap:7px; padding:6px 0; color:rgba(255,255,255,.70); font-size:14px; font-weight:500; line-height:24px; letter-spacing:-.01em; white-space:nowrap; cursor:pointer; text-decoration:none; transition:color .18s var(--uc-ease,ease); }
.uc-nav__link:hover { color:#fff; }
.uc-nav__link .nic { display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.uc-nav__link .nic svg { display:block; }
[data-ic] svg { width:1em; height:1em; display:block; }
.caret { width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor; opacity:.7; margin-left:1px; transition:transform .28s var(--uc-ease,ease); }
.uc-nav__item:hover .caret { transform:rotate(180deg); }
.badge-new { background:var(--uc-purple); color:#fff; font-size:.625rem; font-weight:800; padding:2px 7px; border-radius:999px; letter-spacing:.03em; }
.dd { position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px); border:1px solid transparent; background:linear-gradient(rgba(8,6,16,.84),rgba(8,6,16,.84)) padding-box, linear-gradient(135deg, rgba(255,255,255,.55), rgba(124,77,255,.28) 32%, rgba(255,255,255,.06) 58%, rgba(227,237,93,.20)) border-box; -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); border-radius:18px; box-shadow:0 28px 70px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08); padding:16px; opacity:0; visibility:hidden; transition:.16s ease; min-width:320px; }
.uc-nav__item:hover .dd { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dd::before { content:""; position:absolute; top:-18px; left:0; right:0; height:18px; }
.ddrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; color:#fff; text-decoration:none; position:relative; z-index:1; }
.dd:not(.hl-ready) .ddrow:hover { background:rgba(255,255,255,.06); }
.dd-hl { position:absolute; top:0; left:0; z-index:0; border-radius:12px; background:rgba(255,255,255,.06); opacity:0; pointer-events:none; will-change:transform, width, height; transition:transform .3s var(--uc-ease), width .3s var(--uc-ease), height .3s var(--uc-ease), opacity .2s var(--uc-ease); }
@media (prefers-reduced-motion: reduce) { .dd-hl { transition:opacity .15s linear; } }
.ddrow .left { display:flex; align-items:center; gap:13px; }
.ddrow .nic { width:40px; height:40px; border-radius:11px; flex:0 0 auto; box-sizing:border-box; display:grid; place-items:center; color:#fff; font-size:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); transition:background .2s var(--uc-ease,ease), border-color .2s var(--uc-ease,ease), transform .2s var(--uc-ease,ease); }
.ddrow:hover .nic { background:rgba(227,237,93,.12); border-color:rgba(227,237,93,.55); transform:translateY(-1px); color:var(--uc-lemon); }
.ddic, .ddlogo { width:40px; height:40px; border-radius:11px; flex:0 0 auto; overflow:hidden; transition:transform .2s var(--uc-ease,ease); }
.ddic { display:block; object-fit:contain; padding:0; }
.ddlogo { display:grid; place-items:center; }
.ddlogo .logo-img { width:40px; height:40px; object-fit:contain; display:block; }
.ddlogo svg { width:26px; height:26px; }
.ddrow:hover .ddic, .ddrow:hover .ddlogo { transform:translateY(-1px) scale(1.05); }
.ddrow .t { font-weight:600; font-size:16px; color:#fff; }
.ddrow .tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ddrow .desc { font-size:14px; font-weight:400; color:rgba(255,255,255,.62); line-height:1.25rem; }
.grp { display:flex; align-items:center; gap:7px; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.45); margin:12px 0 3px 12px; }
.grp::before { content:""; width:5px; height:5px; border-radius:999px; background:var(--uc-lemon); flex:0 0 auto; }
.grp:first-child { margin-top:2px; }
.dd--uc { display:grid; grid-template-columns:1fr 1fr; gap:4px 40px; min-width:660px; padding:18px; }
.dd--cols { display:grid; grid-template-columns:repeat(3, max-content); gap:0 40px; padding:24px 28px; }
.dd--cols .col { min-width:0; }
.dd--cols .t { white-space:nowrap; }
.dd--pb { display:flex; flex-direction:column; gap:2px; padding:16px; min-width:300px; }
.dd--pb .col { min-width:0; }
.dd--pb .t, .dd--pb .desc { white-space:nowrap; }
.dd-feat { grid-column:1 / -1; display:flex; align-items:center; gap:14px; margin-top:14px; padding:14px 16px; border-radius:13px; text-decoration:none; background:linear-gradient(120deg, rgba(75,34,204,.22), rgba(75,34,204,.05)); }
.dd-feat .fic { width:40px; height:40px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:rgba(227,237,93,.14); border:1px solid rgba(227,237,93,.30); color:var(--uc-lemon); font-size:20px; }
.dd-feat .ftx { flex:1; min-width:0; }
.dd-feat .ft { display:block; font-size:14px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.dd-feat .fd { display:block; font-size:12px; color:rgba(255,255,255,.55); margin-top:1px; }
.dd-feat .fl { display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:700; color:var(--uc-lemon); white-space:nowrap; }
.dd-feat .fl svg { width:14px; height:14px; }
.uc-cta { display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.uc-btn-figma { display:flex; align-items:center; justify-content:center; padding:12px 26px; border-radius:10px; font-size:16px; font-weight:700; line-height:24px; white-space:nowrap; cursor:pointer; text-decoration:none; }
.uc-btn-start { background:var(--uc-lemon); color:#020202; border:0; }
.uc-btn-start:hover { background:#d3dd50; }
.uc-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; position:relative; z-index:2; }
.uc-burger span { width:24px; height:2.5px; background:#fff; border-radius:2px; transition:transform .3s var(--uc-ease,ease), opacity .2s var(--uc-ease,ease); }
.uc-burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.uc-burger.is-open span:nth-child(2){ opacity:0; }
.uc-burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
@media (max-width:1180px){ .uc-header__wrap{ padding:20px 32px; } .uc-nav,.uc-cta{ display:none; } .uc-burger{ display:flex; } }
.uc-mobile { position:fixed; inset:0; z-index:99; background:rgba(6,4,14,.97); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); padding:104px 22px 44px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s var(--uc-ease,ease), transform .3s var(--uc-ease,ease), visibility .3s; }
.uc-mobile.open { opacity:1; visibility:visible; transform:none; }
.uc-mobile__inner { max-width:520px; margin:0 auto; }
.ucm-item { border-bottom:1px solid rgba(255,255,255,.08); }
.ucm-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 4px; background:none; border:0; color:#fff; font-size:1rem; font-weight:600; font-family:inherit; letter-spacing:-.01em; cursor:pointer; text-decoration:none; }
a.ucm-head:hover { color:var(--uc-lemon,#E3ED5D); }
.ucm-head .chev { flex:0 0 auto; color:rgba(255,255,255,.6); transition:transform .3s var(--uc-ease,ease); }
.ucm-item.open .ucm-head .chev { transform:rotate(180deg); }
.ucm-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--uc-ease,ease); }
.ucm-item.open .ucm-body { grid-template-rows:1fr; }
.ucm-body > div { overflow:hidden; min-height:0; }
.ucm-grp { font-size:.625rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.4); padding:12px 4px 4px 16px; }
.ucm-body a { display:block; padding:9px 4px 9px 16px; color:rgba(255,255,255,.68); text-decoration:none; font-size:1rem; }
.ucm-body a:hover { color:#fff; }
.ucm-cta { display:block; text-align:center; margin-top:26px; }
.ddrow.is-soon { cursor:default; }
.ddrow.is-soon .desc { display:none; }
.ddrow.is-soon .t { white-space:nowrap; }
.ddrow.is-soon .tx::after { content:"Soon"; align-self:flex-start; margin-top:2px; font-size:.625rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:2px 9px; border-radius:999px; }

/* ===================== Web Revamp session updates (motion cards, hero orbs, download btn, pills, testimonials, proton-bg) — added via globals ===================== */
.uic-orb-4 { width:420px; height:420px; left:-8%; top:66%; background:radial-gradient(circle, rgba(124,77,255,.42) 0%, transparent 68%); animation:uic-float-b 20s ease-in-out infinite alternate; transform:translate(calc(var(--mx)*-22px), calc(var(--my)*-22px)); }
.uic-orb-5 { width:360px; height:360px; right:-7%; top:80%; background:radial-gradient(circle, rgba(90,50,220,.5) 0%, transparent 66%); animation:uic-float-a 24s ease-in-out infinite alternate-reverse; transform:translate(calc(var(--mx)*26px), calc(var(--my)*26px)); }
.uic-orb-6 { width:280px; height:280px; left:36%; top:92%; background:radial-gradient(circle, rgba(217,249,80,.08) 0%, transparent 66%); animation:uic-float-a 18s ease-in-out infinite alternate; transform:translate(calc(var(--mx)*14px), calc(var(--my)*14px)); }
.hero .frame { margin-top:clamp(40px,5vw,64px); }
.hero .stats { margin-top:clamp(32px,4vw,44px); }
.btn-wp-dl img { width:18px; height:auto; display:block; flex:0 0 auto; }
/* .hero .btn-wp-dl{color:#fff} retired 2026-07-29 (§5-B step 5): measured on all 7 qa pages
   and all 9 local pages — every .btn-wp-dl is the SAME element as a .mcp-link inside a
   .cta-row (<a class="mcp-link btn-wp-dl">), so `.cta-row .mcp-link{color:#fff}` covers it.
   Verified by deleting this rule in the DOM: the hero download link stayed rgb(255,255,255). */
/* ---- Motion-tier live demos: realistic mini landing section ---- */
.mmock-frame { display:block; position:relative; aspect-ratio:auto; }
.mmock-frame::after { display:none; }                 /* drop the generic grid overlay */
.mmock-particles { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.mmock { position:relative; z-index:2; display:flex; flex-direction:column; box-sizing:border-box; }
.mmock-bar { display:flex; gap:6px; padding:12px 15px 4px; }
.mmock-bar i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.mmock-nav { display:flex; align-items:center; gap:10px; padding:6px 18px 0; }
.mmock-logo { width:22px; height:22px; border-radius:6px; background:var(--uc-lemon); color:#020202; font-size:14px; font-weight:800; display:grid; place-items:center; }
.mmock-brand { font-size:12px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.mmock-links { display:flex; gap:12px; margin-left:auto; }
.mmock-links a { font-size:10px; font-weight:600; color:rgba(255,255,255,.6); white-space:nowrap; }
.mmock-nbtn { padding:4px 10px; border-radius:6px; background:rgba(255,255,255,.12); color:#fff; font-size:10px; font-weight:700; }
.mmock-hero { padding:22px 18px 10px; }
.mmock-title { font-size:20px; font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1.375rem; }
.mmock-sub { font-size:12px; color:rgba(255,255,255,.55); margin-top:7px; max-width:62%; }
.mmock-btn { display:inline-block; margin-top:11px; padding:4px 10px; border-radius:5px; background:var(--uc-lemon); color:#020202; font-size:8px; font-weight:700; }
.mmock-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:18px 18px 18px; }
.mmock-c { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:9px; display:flex; flex-direction:column; gap:6px; }
.mmock-ci { width:24px; height:24px; border-radius:7px; background:transparent; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:#b9a6ff; flex:0 0 auto; }
.mmock-ci svg { width:14px; height:14px; }
.mmock-c strong { font-size:12px; font-weight:700; color:#fff; line-height:1; }
.mmock-c small { font-size:10px; line-height:.875rem; color:rgba(255,255,255,.5); }

/* Subtle: gentle fade + rise, staggered, calm loop */
@keyframes mm-rise { 0%{opacity:0;transform:translateY(15px)} 12%,82%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(15px)} }
.mmock--subtle .mmock-title,
.mmock--subtle .mmock-sub,
.mmock--subtle .mmock-btn,
.mmock--subtle .mmock-c { opacity:0; animation:mm-rise 6s var(--uc-ease) infinite; }
.mmock--subtle .mmock-title { animation-delay:.3s; }
.mmock--subtle .mmock-sub { animation-delay:.5s; }
.mmock--subtle .mmock-btn { animation-delay:.7s; }
.mmock--subtle .mmock-cards .mmock-c:nth-child(1){ animation-delay:.95s; }
.mmock--subtle .mmock-cards .mmock-c:nth-child(2){ animation-delay:1.1s; }
.mmock--subtle .mmock-cards .mmock-c:nth-child(3){ animation-delay:1.25s; }

/* Immersive: shifting gradient behind bubbles + floating depth */
/* Dhaval 2026-07-28: "the blue shade looks not touching the left side so looks straighline".
   MEASURED on qa AI Express: .mmock-frame is 489px wide at x=746 with overflow:hidden,
   radius:14px and background:none, but .mmock (which carried the tint) is 455.3px at
   x=762.9 — inset 16.9px left / 16.8px right. So the purple stopped ~17px short of both
   edges and read as a hard vertical line. .mmock-particles was ALREADY full-bleed
   (487px at x=747), which is why only the shade looked clipped, not the dots.
   Fix: move the tint onto the full-bleed frame, which already clips to its own rounded
   corners. :has() avoids hard-coding the 17px inset, so it survives layout changes. */
.mmock-frame:has(.mmock--immersive) { background:linear-gradient(rgba(8,6,16,.5), rgba(8,6,16,.5)), radial-gradient(120% 100% at 20% -10%, rgba(124,77,255,.22), transparent 60%); }
.mmock--immersive { background:none; }
@keyframes mm-pulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes mm-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.mmock--immersive .mmock-btn { animation:mm-pulse 2.6s var(--uc-ease) infinite; }
.mmock--immersive .mmock-cards .mmock-c { animation:mm-float 4.4s var(--uc-ease) infinite; }
.mmock--immersive .mmock-cards .mmock-c:nth-child(2){ animation-delay:.5s; }
.mmock--immersive .mmock-cards .mmock-c:nth-child(3){ animation-delay:1s; }

@media (prefers-reduced-motion:reduce){
  .mmock--subtle .mmock-title,.mmock--subtle .mmock-sub,.mmock--subtle .mmock-btn,.mmock--subtle .mmock-c{ opacity:1; animation:none; }
  .mmock--immersive .mmock-btn,.mmock--immersive .mmock-cards .mmock-c{ animation:none; }
}
.motion-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin:44px auto 0; max-width:1060px; }
@media (max-width:760px) { .motion-grid { grid-template-columns:1fr; } }
.term-tab { display:inline-flex; align-items:center; gap:8px; }
.term-tab .term-tab-ic { width:16px; height:16px; flex-shrink:0; object-fit:contain; display:inline-block; vertical-align:middle; filter:grayscale(1); opacity:.85; transition:opacity .24s var(--uc-ease); }
.term-tab.on .term-tab-ic { filter:none; opacity:1; }   /* active pill shows the full-color logo */
.term-tab .term-tab-tx { line-height:1; }
@media (max-width:1024px){ .blog-grid { grid-template-columns:repeat(2,1fr); } .blog-featured { grid-template-columns:1fr; } .blog-featured .blog-cover { min-height:0; aspect-ratio:16/10; } .blog-feat-body { padding:var(--uc-s6); } }
@media (max-width:640px){ .blog-grid { grid-template-columns:1fr; } }
/* overrides for values changed this session */
.pwr { background:none !important; }
.rev-head { margin-bottom:15px !important; }
.motion-grid { grid-template-columns:repeat(2,1fr) !important; max-width:1060px !important; margin:44px auto 0 !important; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:960px; margin:0 auto; }
.stat { text-align:center; padding:24px 12px; border-radius:16px; }
@media (max-width:900px){ .stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .stats { grid-template-columns:1fr; } }
/* ===================== end Web Revamp session updates ===================== */

/* ===================== Heading normalisation — added 2026-07-28 =====================
   Dhaval: the hero H1 at 600 sitting next to section h2s at 800 inverted the visual
   hierarchy. Every CONTENT heading h1-h6 now resolves to 600 / -.02em from THIS ONE
   RULE, replacing ~25 scattered per-component declarations that qa still carried from
   the original migration (.sec h2 800/-.025em, .zz-text h3 800, .prob-grid h2 800,
   .sol-grid h2 800, .resp-grid h2 800, .mcp-copy h2 800, .pwr-head h2 800,
   .pwr-slide h3 800, .opt-copy h3 800, .classic-band h3 800, .sup-card h3 700,
   .beam-card h3 700, .bento-body h3 700, .bld-card h3 700, .xway-card h3 700,
   .feat-card h3 700, .step-tx h3 700, .cmp-card h3 700, .trio-card h3 700,
   .hp-meta h3 700, .src-tile h3 700, .motion-body h3 700, .fdz-body h3 700,
   .opt-item h4 700, .chatai-tab h3 700) plus Elementor's widget-scoped duplicates.
   Mirrors local assets/design-tokens.css:102.
   !important is required: Elementor emits .elementor-element-<id> .foo h3 at
   specificity (0,2,1), which a plain body h1..h6 rule (0,0,2) would lose to.
   ================================================================================== */
body h1,body h2,body h3,body h4,body h5,body h6{font-weight:600!important;letter-spacing:-.02em!important}
/* UI chrome, NOT content headings — these keep their own treatment deliberately. */
body .foot-col h4{font-weight:700!important;letter-spacing:.1em!important}
body .single-post-title h1{letter-spacing:0!important}

/* ===================== TYPOGRAPHY GLOBALS (Global Manager) — added 2026-07-28 =====
   Dhaval's directive: "all the typography should be listed there and any page on the qa
   must use the typography from global (global manager) ... do not add typography for
   singular unique text — let it be static ... make sure not to create so many globals".
   EIGHT classes, confirmed with Dhaval. Values are the post-normalisation local values,
   so local and qa agree. Fluid (clamp) only at the display/h2 levels; everything at or
   near body size stays FIXED rem on purpose — fluid body text hurts accessibility, and
   there were zero responsive typography overrides on local or qa to preserve.
   !important is required only while the per-page ucwr-css-* injectors and Elementor's
   widget-scoped rules (.elementor-element-<id> .foo h3, specificity 0,2,1) still exist.
   WHEN §5-B RETIRES THOSE INJECTORS, DROP THE !important FROM THIS BLOCK.
   ================================================================================== */
/* Each class below carries its mapped component selectors IN THE SAME RULE, so there is
   exactly one source of truth per level. This is what makes every page draw typography
   from the Global Manager now, without waiting for ~100 widgets to gain .text-* markup.
   As an element gains its bare .text-* class, drop its selector from this list.
   Card titles are deliberately unified: 13 sizes (0.98-1.18rem) collapse onto
   .text-h3 / .text-h4 — approved by Dhaval 2026-07-28. */
.text-display,.pill-title{font-family:var(--uc-font)!important;font-size:clamp(2.25rem,4.6vw,3.375rem)!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:clamp(2.875rem,5.75vw,4.25rem)!important}
.text-h2,.sec h2{font-family:var(--uc-font)!important;font-size:clamp(1.875rem,3.4vw,2.75rem)!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:clamp(2.125rem,3.74vw,3rem)!important;text-wrap:balance}
.text-h3,
.fdz-body h3,.bento-body h3,.sup-card h3,.odx-group h3,.src-tile h3,.bld-card h3,.feat-card h3,
.chatai-tab h3,.step-tx h3,.trio-card h3,.cmp-card h3,.pb-head h3,.beam-card h3,.hp-meta h3,
.blog-card h3{font-family:var(--uc-font)!important;font-size:1.125rem!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.5rem!important}
/* `.blog-card h3` folded into this level 2026-07-29 (Dhaval): it was the last card title outside it,
   at 1.22rem/1.28 from `ucwr-blog`. This rule is !important so it wins over that page-local copy, and
   the same fold was made in local assets/design-tokens.css with the size deleted from converter.css.
   It matters for the uichemy.com migration: the blog card title now comes from the design system, so a
   dynamically-rendered listing inherits it instead of depending on page 296/301's own CSS. */
.text-h4,.opt-item h4,.pwr-chat-mid h4{font-family:var(--uc-font)!important;font-size:1rem!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.375rem!important}
/* body .hero .sub is (0,2,1) on purpose: it must outrank .sec .sub (0,2,0) on pages
   whose hero section carries BOTH classes, otherwise the two would tie on order. */
.text-lead,body .hero .sub{font-family:var(--uc-font)!important;font-size:1.125rem!important;font-weight:400!important;letter-spacing:normal!important;line-height:1.875rem!important;color:var(--txd)!important}
.text-body,.sec .sub{font-family:var(--uc-font)!important;font-size:1.125rem!important;font-weight:400!important;letter-spacing:normal!important;line-height:1.875rem!important;color:var(--txd)!important}
.text-eyebrow,.eyebrow{font-family:var(--uc-font)!important;font-size:.75rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;line-height:.875rem!important}
.text-small,.plan-micro{font-family:var(--uc-font)!important;font-size:.875rem!important;font-weight:400!important;letter-spacing:normal!important;line-height:1.375rem!important;color:rgba(255,255,255,.45)!important}

/* Orphan fix — the §4 drop to weight 600 made text narrower, which orphaned a single
   short word on two H2s (Home newsletter "Else" 8.3% of box width, was 25.4% at 800;
   Classic "...for you" 16% -> 8.3%). text-wrap:balance evens the lines WITHOUT touching
   font-size. Applied directly to the live selectors so it lands before the markup is
   migrated to .text-h2; .news-title deliberately gets NO max-width (a fixed max-width
   here previously pushed the newsletter form onto its own row). */
body .sec h2,body .news-title{text-wrap:balance}

/* Section-level footnote (§6a R1) — qualifies claims that are not true for every
   builder. Gutenberg has NO global sync; Dhaval chose footnote-per-section over an
   inline parenthetical, 2026-07-28. Mirrors local css/home.css .sec-note. */
/* Brand-chip optical alignment (§6b) — MEASURED 2026-07-28, not taken from the handoff.
   `vertical-align:middle` centres the chip on the X-HEIGHT, but it should read as centred
   on the CAP-HEIGHT of the brand word next to it. On the live hero (54.4px / 600):
   cap-height 40.53px, x-height 29.43px, and at the injector's top:-.06em the chip centre
   sat 2.29px BELOW the cap-height centre. -.06em - .042em = -.102em -> -.1em (within .12px).
   The handoff claimed 4.14px; the measured figure is 2.29px.
   FOLDED into the unified `body .pill-title .brand-chip` rule below on 2026-07-29 (§5-B step 5):
   ucwr-css-v2 no longer exists as an injected block, so the separate `span.brand-chip` (0,2,2)
   override that was needed to beat it is gone — the measured -.1em now lives in the rule itself. */

/* ===================== .mcp-link — added 2026-07-28 (Dhaval-reported bug) ==========
   Dhaval: "Download the plugin button is fine [on Home] but ... AI Express mode — on hover
   effect is missing and typography mismatch." Confirmed and root-caused: the MARKUP is
   byte-identical on both pages (`class="mcp-link btn-wp-dl"`), but Home's page CSS carries
   these five rules and AI Express's does not — qa CSS was snapshotted PER PAGE at migration
   time, so pages drifted. Local never had the bug: every local page links the same
   css/home.css (rules live at css/home.css:239-243).
   Measured before the fix — Download the plugin, Home vs AI Express:
     typography  15.5px / w600   vs   16px / w400
     ::after underline present    vs   absent
     matching :hover rules  1     vs   0
   Putting them in globals fixes all 7 pages at once instead of patching one injector.
   No !important needed: nothing competes for .mcp-link. Home already has identical rules
   in its own page CSS, which simply wins the tie harmlessly. Note `.hero .btn-wp-dl{color:#fff}`
   (0,2,0) intentionally overrides the lemon colour in the hero on every page. */
.mcp-link{position:relative;display:inline-flex;align-items:center;gap:7px;color:var(--uc-lemon);text-decoration:none;font-size:16px;font-weight:600}
.mcp-link svg{width:17px;height:17px;transition:transform .24s var(--uc-ease)}
.mcp-link:hover svg{transform:translateX(3px)}
.mcp-link::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;border-radius:2px;background:var(--uc-lemon,#E3ED5D);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--uc-ease)}
.mcp-link:hover::after{transform:scaleX(1)}
/* Borderless CTA links read WHITE, not lemon, when they sit beside a primary button.
   Dhaval 2026-07-28: the hero "Download the plugin" must stay white. The reason is not that
   it lives in the hero — it is that a lemon secondary link competes with the solid lemon
   "Get Started" beside it. `.cta-row` expresses exactly that condition, so this supersedes
   the positional `.hero .btn-wp-dl{color:#fff}` coupling and keeps working if a CTA row
   appears anywhere else. Standalone .mcp-link in body copy (e.g. the MCP section) stays
   lemon — there it IS the affordance and white would read as plain text.
   Specificity (0,2,0), identical to the old `.hero .btn-wp-dl`, so both resolve to white —
   deliberately ADDITIVE so there is no path where the hero turns yellow. Retire the `.hero`
   rule during §5-B only after verifying this one covers every instance. */
.cta-row .mcp-link{color:#fff}

body .sec-note{max-width:900px!important;margin:18px auto 0!important;font-size:.75rem!important;line-height:1.125rem!important;color:var(--txf)!important;text-align:center!important}

/* =====================================================================
   §5-B — SHARED COMPONENT CSS MOVED IN FROM THE PER-PAGE PROTON HEADS
   Root cause it fixes: qa CSS was snapshotted PER PAGE at migration, so
   pages drifted (AI Express's .mcp-link had no hover; the immersive tint
   sat on the wrong element). Local never drifts because every local page
   links the same css/home.css — this block is that single source on qa.
   Contents: the `ucwr-conv` bundle (was duplicated on figma-to-elementor
   / -gutenberg / -bricks, and carried the .uc-aurora + FAQ + logo-band
   rules that Home and Pricing had as separate patch blocks) plus the
   `ucwr-marquee-css` block that all 7 pages carried verbatim.
   Merged 2026-07-28. Selector values reconciled against local css/home.css.
   ===================================================================== */
/* ---- ucwr-conv (part 1/2) ---- */
/* converter pages shared bundle: used-class home.css+converter.css + keyframes + guards + responsive!important. base/tokens/header inherited site-wide. */
/* home.css + converter.css (used) */
.hero::before{content:""; position:absolute; inset:-30%; z-index:0; background:radial-gradient(38% 48% at 30% 70%, rgba(124,77,255,.55) 0%, transparent 70%), radial-gradient(30% 40% at 80% 90%, rgba(66,30,178,.70) 0%, transparent 70%); animation:uic-drift 9s ease-in-out infinite alternate; will-change:transform;}
.hero::after{content:""; position:absolute; inset:-30%; z-index:0; background:radial-gradient(26% 34% at 70% 35%, rgba(217,249,80,.12) 0%, transparent 60%), radial-gradient(40% 50% at 25% 30%, rgba(98,60,234,.38) 0%, transparent 65%); animation:uic-drift-reverse 13s ease-in-out infinite alternate; will-change:transform; mix-blend-mode:screen;}
.uic-spell-layer{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; --mx:0; --my:0;}
.uic-orb{position:absolute; border-radius:50%; filter:blur(45px); mix-blend-mode:screen; will-change:transform;}
.uic-orb-1{width:480px; height:480px; left:-4%; top:12%; background:radial-gradient(circle, rgba(124,77,255,.55) 0%, transparent 68%); animation:uic-float-a 14s ease-in-out infinite alternate; transform:translate(calc(var(--mx)*24px), calc(var(--my)*24px));}
.uic-orb-2{width:400px; height:400px; right:-3%; top:40%; background:radial-gradient(circle, rgba(90,50,220,.60) 0%, transparent 68%); animation:uic-float-b 18s ease-in-out infinite alternate; transform:translate(calc(var(--mx)*-32px), calc(var(--my)*-32px));}
.uic-orb-3{width:300px; height:300px; left:40%; top:55%; background:radial-gradient(circle, rgba(217,249,80,.10) 0%, transparent 68%); animation:uic-float-a 22s ease-in-out infinite alternate-reverse; transform:translate(calc(var(--mx)*16px), calc(var(--my)*16px));}
.uic-frame{position:absolute; border:1.5px solid rgba(140,95,255,.45); border-radius:4px; background:rgba(124,77,255,.05); will-change:transform;}
.uic-frame span{position:absolute; width:8px; height:8px; background:#0a0612; border:1.5px solid rgba(217,249,80,.65); border-radius:1px;}
.uic-frame span:nth-child(1){top:-5px; left:-5px;}
.uic-frame span:nth-child(2){top:-5px; right:-5px;}
.uic-frame span:nth-child(3){bottom:-5px; left:-5px;}
.uic-frame span:nth-child(4){bottom:-5px; right:-5px;}
.uic-frame-1{width:200px; height:130px; left:9%; top:34%; animation:uic-frame-drift-a 24s ease-in-out infinite alternate; transform:translate(calc(var(--mx)*40px), calc(var(--my)*40px)) rotate(-4deg);}
.uic-frame-2{width:140px; height:180px; right:10%; top:22%; animation:uic-frame-drift-b 28s ease-in-out infinite alternate; transform:translate(calc(var(--mx)*-48px), calc(var(--my)*-48px)) rotate(5deg);}
.uic-cursor{position:absolute; left:60%; top:24%; display:flex; align-items:flex-start; gap:2px; animation:uic-cursor-path 30s ease-in-out infinite alternate; will-change:transform; opacity:.9;}
.uic-cursor-chip{margin-top:14px; padding:3px 9px; font-size:12px; font-weight:600; letter-spacing:.02em; color:#fff; background:#7c4dff; border-radius:4px; white-space:nowrap;}
@keyframes uic-breathe{ 0%{background-position:50% 0%} 100%{background-position:50% 100%} }
@keyframes uic-drift{ 0%{transform:translate(-8%,4%) scale(1)} 50%{transform:translate(9%,-7%) scale(1.15)} 100%{transform:translate(-6%,8%) scale(1.05)} }
@keyframes uic-drift-reverse{ 0%{transform:translate(7%,-5%) scale(1.12)} 50%{transform:translate(-9%,7%) scale(1)} 100%{transform:translate(6%,-8%) scale(1.18)} }
@keyframes uic-float-a{ 0%{translate:0 0} 50%{translate:5% -7%} 100%{translate:-4% 6%} }
@keyframes uic-float-b{ 0%{translate:0 0} 50%{translate:-6% 7%} 100%{translate:5% -5%} }
@keyframes uic-frame-drift-a{ 0%{translate:0 0; opacity:.55} 50%{translate:8% -12%; opacity:1} 100%{translate:-5% 9%; opacity:.65} }
@keyframes uic-frame-drift-b{ 0%{translate:0 0; opacity:1} 50%{translate:-9% 14%; opacity:.55} 100%{translate:6% -10%; opacity:1} }
@keyframes uic-cursor-path{ 0%{translate:0 0} 25%{translate:-14vw 10vh} 50%{translate:8vw 22vh} 75%{translate:-20vw 6vh} 100%{translate:4vw -6vh} }
@media (prefers-reduced-motion: reduce){.hero, .hero::before, .hero::after, .uic-orb, .uic-frame, .uic-cursor{animation:none !important;}}
.sec{position:relative; padding:120px 0;}
.sec-head{max-width:720px; margin:0 auto; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--acc); background:rgba(75,34,204,.16); border:1px solid rgba(124,77,255,.32); padding:6px 14px; border-radius:999px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.sec h2{font-size:clamp(1.875rem,3.4vw,2.75rem); font-weight:800; letter-spacing:-.025em; line-height:clamp(2.125rem,3.74vw,3rem); margin:18px 0 14px;}
.sec .sub{color:var(--txd); font-size:1rem; line-height:1.625rem; margin:0;}
.accent-lemon{color:var(--acc2);}
.uc-card, .frame, .stat, .cmp-card{background:var(--cardbg); border:1px solid var(--cardbd); box-shadow:0 12px 34px -16px rgba(0,0,0,.45);}
.frame{position:relative; margin:52px auto 0; max-width:960px; aspect-ratio:16/9; border-radius:20px; overflow:hidden; display:grid; place-items:center;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); box-shadow:0 24px 60px rgba(0,0,0,.45);}
.frame::after{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:26px 26px;}
.frame .fi{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; color:rgba(255,255,255,.7);}
.frame .fi svg{width:40px; height:40px;}
.frame .fi span{font-size:.875rem; letter-spacing:.01em;}
.vplay{width:72px; height:72px; border-radius:50%; background:var(--uc-lemon); display:grid; place-items:center; box-shadow:0 10px 30px rgba(227,237,93,.3);}
.hero{position:relative; overflow:hidden; text-align:center; padding:clamp(140px,17vh,200px) 0 clamp(72px,9vw,120px); background:linear-gradient(180deg, #000000 4%, #2a138f 62%, #421eb2 100%); background-size:100% 200%; animation:uic-breathe 12s ease-in-out infinite alternate;}
.hero > .uc-container{position:relative; z-index:2;}
.trusted{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:34px;}
.trusted .avatars{height:34px; width:auto;}
.trusted .stars-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
.trusted .stars-wrap img{height:15px; width:auto;}
.trusted .tnum{color:var(--txd); font-size:.75rem; font-weight:600;}
.hero .eyebrow{margin-bottom:18px;}
.pill-title{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; font-size:clamp(2.25rem,5vw,3.875rem); font-weight:800; letter-spacing:-.03em; line-height:clamp(2.375rem,5.2vw,4rem); margin:20px auto 22px; max-width:900px;}
.pill-title .title-logo{height:clamp(48px,7vw,68px); width:auto; display:block;}
.pill-title .title-br{flex-basis:100%;}
.hero .sub{max-width:750px; margin:0 auto 34px; color:var(--txd); font-size:1.125rem; line-height:1.875rem;}
.cta-row{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.uc-aurora{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.uc-aurora .au{position:absolute; border-radius:50%; filter:blur(90px); mix-blend-mode:screen; will-change:transform;}
.uc-aurora .au-1{width:48vw; height:48vw; left:-12vw; top:-16vh; opacity:.5; background:radial-gradient(circle, rgba(75,34,204,.62) 0%, rgba(75,34,204,.28) 38%, rgba(75,34,204,0) 74%); animation:ucau1 22s ease-in-out infinite;}
.uc-aurora .au-2{width:44vw; height:44vw; right:-12vw; top:2vh; opacity:.4; background:radial-gradient(circle, rgba(128,114,252,.5) 0%, rgba(128,114,252,.22) 38%, rgba(128,114,252,0) 74%); animation:ucau2 26s ease-in-out infinite;}
.uc-aurora .au-3{width:40vw; height:40vw; left:32vw; bottom:-24vh; opacity:.26; background:radial-gradient(circle, rgba(227,237,93,.3) 0%, rgba(227,237,93,.14) 34%, rgba(227,237,93,.05) 56%, rgba(227,237,93,0) 76%); animation:ucau3 30s ease-in-out infinite;}
@keyframes ucau1{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(9vw,8vh) scale(1.12); } 66%{ transform:translate(3vw,13vh) scale(1.04); } }
@keyframes ucau2{ 0%,100%{ transform:translate(0,0) scale(1.06); } 33%{ transform:translate(-8vw,9vh) scale(1); } 66%{ transform:translate(-2vw,3vh) scale(1.1); } }
@keyframes ucau3{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(-9vw,-9vh) scale(1.14); } 66%{ transform:translate(-3vw,-3vh) scale(1.05); } }
@media (prefers-reduced-motion: reduce){.uc-aurora .au{animation:none;}}
.hero-checks{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:760px; margin:0 auto 38px;}
.hero-chip{display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px; font-size:.875rem; font-weight:600; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); transition:background .24s var(--uc-ease), border-color .24s var(--uc-ease), transform .24s var(--uc-ease);}
.hero-chip:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); transform:translateY(-2px);}
.hero-chip svg{width:18px; height:18px; flex:0 0 auto;}
.uc-btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:12px; font-size:16px; font-weight:700; text-decoration:none; transition:transform .18s var(--uc-ease,ease), background .18s var(--uc-ease,ease);}
.uc-btn:hover{transform:translateY(-1px);}
.btn-lemon{background:var(--uc-lemon); color:#020202;}
.btn-lemon:hover{background:#d3dd50;}
.btn-violet{background:var(--uc-purple,#4B22CC); color:#fff; box-shadow:0 8px 22px -10px rgba(75,34,204,.8);}
.btn-violet:hover{background:var(--uc-purple-dark,#441FB8);}
.cta-inner .eyebrow{display:inline-flex; margin-bottom:20px;}
.news{position:relative; margin-top:40px; border-radius:20px; padding:40px 44px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.news-badge{position:absolute; top:0; left:32px; transform:translateY(-50%); display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; background:var(--uc-purple,#4B22CC); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 10px 26px -10px rgba(75,34,204,.75);}
.news-badge svg{width:15px; height:15px;}
.news-inner{display:flex; align-items:center; justify-content:space-between; gap:44px; flex-wrap:wrap;}
.news-title{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; line-height:1.875rem; margin:6px 0 0; max-width:520px;}
.news-form{display:flex; gap:12px; flex:0 0 auto;}
.news-input{width:300px; max-width:100%; padding:14px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-size:16px; font-family:inherit; outline:none; transition:border-color .2s var(--uc-ease), background .2s var(--uc-ease);}
.news-input::placeholder{color:rgba(255,255,255,.45);}
.news-input:focus{border-color:rgba(124,77,255,.6); background:rgba(255,255,255,.08);}
@media (max-width:860px){.news{padding:36px 28px 32px;}.news-inner{flex-direction:column; align-items:flex-start; gap:24px;}.news-form{width:100%;}.news-input{flex:1; width:auto;}}
@media (max-width:560px){.news-form{flex-direction:column;}.news-form .uc-btn{width:100%; justify-content:center;}}
@keyframes uc-foot-sheen{ from{background-position:100% 0} to{background-position:0% 0} }
.sup-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;}
.sup-card{padding:26px 22px; text-align:center;}
.sup-ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin:0 auto 15px; background:rgba(124,77,255,.14); border:1px solid rgba(124,77,255,.28); color:#c8b8ff;}
.sup-ic svg{width:23px; height:23px;}
.sup-card h3{margin:0 0 6px; font-size:1rem; font-weight:700;}
.sup-card p{margin:0; font-size:.875rem; color:rgba(255,255,255,.58); line-height:1.375rem;}
@media (max-width:820px){.sup-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:440px){.sup-grid{grid-template-columns:1fr;}}
.mcp-copy .eyebrow{margin-bottom:16px;}
.mcp-copy .sub{margin:0 0 24px; max-width:440px;}
.mcp-link{position:relative; display:inline-flex; align-items:center; gap:7px; color:var(--uc-lemon); text-decoration:none; font-size:16px; font-weight:600;}
.mcp-link svg{width:17px; height:17px; transition:transform .24s var(--uc-ease);}
.mcp-link:hover svg{transform:translateX(3px);}
.mcp-link::after{content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px; border-radius:2px; background:var(--uc-lemon,#E3ED5D); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--uc-ease);}
.mcp-link:hover::after{transform:scaleX(1);}
@media (prefers-reduced-motion: reduce){.mcp-link::after{transition:none;}}
@keyframes termScan{ 0%{ transform:translateY(-84px) } 100%{ transform:translateY(330px) } }
@keyframes termSwap{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
@keyframes termBlink{ 50%{ opacity:0 } }
.rate-pill{display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); font-size:14px; font-weight:600; color:#fff; margin-bottom:18px;}
.rate-pill .rstars{color:var(--uc-lemon); letter-spacing:1px;}
.rev-wall{margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; height:660px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);}
.rev-col{overflow:hidden;}
.rev-track{display:flex; flex-direction:column; gap:18px; animation:revUp linear infinite; will-change:transform;}
.rev-col:hover .rev-track{animation-play-state:paused;}
@keyframes revUp{ from{ transform:translateY(0) } to{ transform:translateY(-50%) } }
.rev-card{border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:background .28s var(--uc-ease), border-color .28s var(--uc-ease);}
.rev-card:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}
a.rev-card{display:block; text-decoration:none; color:inherit; cursor:pointer;}
.rev-txt{padding:21px;}
.rev-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px;}
.rev-who{display:flex; align-items:center; gap:11px;}
.rev-av{width:38px; height:38px; border-radius:999px; flex:0 0 auto; background:linear-gradient(135deg,#7C4DFF,#4B22CC); display:grid; place-items:center; font-size:14px; font-weight:700; color:#fff;}
.rev-av.has-img, .rev-yt-row .av.has-img{position:relative; overflow:hidden;}
.rev-av img, .rev-yt-row .av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; background:#0c0a15;}
.rev-handle{font-size:14px; font-weight:600; color:#fff;}
.rev-meta{font-size:12px; color:rgba(255,255,255,.42);}
.rev-body{margin:0; font-size:14px; line-height:1.375rem; color:rgba(255,255,255,.7);}
.rev-stars{margin-top:13px; color:var(--uc-lemon); letter-spacing:1px; font-size:12px;}
.rev-glyph{flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center;}
.rev-glyph svg{width:18px; height:18px;}
.rev-yt-thumb{position:relative;}
.rev-yt-thumb img{display:block; width:100%; height:168px; object-fit:cover;}
.rev-yt-thumb .play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:999px; background:#FF3B4E; display:grid; place-items:center; box-shadow:0 8px 24px -8px rgba(0,0,0,.6);}
.rev-yt-cap{padding:15px 18px 17px;}
.rev-yt-cap p{margin:0; font-size:14px; line-height:1.375rem; color:#fff; font-weight:500;}
.rev-yt-row{margin-top:13px; display:flex; align-items:center; gap:10px;}
.rev-yt-row .av{width:30px; height:30px; border-radius:999px; background:linear-gradient(135deg,#7C4DFF,#4B22CC); display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff;}
.chatai-slide .frame{margin:0; max-width:none;}
.step-media .frame{margin:0; max-width:none;}
.beam-node.is-lit{color:#06030e; background:var(--uc-lemon,#E3ED5D); border-color:var(--uc-lemon,#E3ED5D); box-shadow:0 0 0 5px rgba(227,237,93,.12), 0 0 18px rgba(227,237,93,.38);}
.beam-card .frame{margin:0; max-width:none;}
.zz-text .eyebrow{margin-bottom:14px;}
.zz-media .frame{margin:0; max-width:none;}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1000px; margin:48px auto 0; align-items:start;}
.faq-col{display:flex; flex-direction:column; gap:14px;}
.faq-item{border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); overflow:hidden; transition:background .24s var(--uc-ease,ease), border-color .24s var(--uc-ease,ease);}
.faq-item.open{background:rgba(255,255,255,.05); border-color:rgba(124,77,255,.3);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; color:#fff; font-size:1rem; font-weight:600; letter-spacing:-.01em;}
.faq-ic{flex:0 0 auto; width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,.08); transition:background .24s var(--uc-ease);}
.faq-item.open .faq-ic{background:var(--uc-lemon);}
.faq-ic svg{width:15px; height:15px; color:#fff; transition:transform .28s var(--uc-ease,ease);}
.faq-item.open .faq-ic svg{color:#06030e; transform:rotate(45deg);}

/* ---- ucwr-conv (part 2/2) ---- */

.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--uc-ease,ease);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a > div{overflow:hidden;}
.faq-a p{margin:0; padding:0 20px 20px; color:rgba(255,255,255,.62); font-size:1rem; line-height:1.625rem;}
.logo-eyebrow{text-align:center; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:24px;}
.logo-band{position:relative; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); padding:26px 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.logo-track{display:flex; gap:16px; width:max-content; animation:logoMarq 34s linear infinite;}
.logo-band:hover .logo-track{animation-play-state:paused;}
@keyframes logoMarq{ to{ transform:translateX(-50%) } }
.brand-chip{display:inline-flex; align-items:center; justify-content:center; height:48px; min-width:124px; padding:0 22px; border-radius:12px; background:#fff; box-shadow:0 10px 26px -14px rgba(0,0,0,.7); flex:0 0 auto;}
.brand-chip img{height:24px; width:auto; max-width:132px; object-fit:contain;}
.brand-chip .bc-name{font-weight:700; font-size:16px; color:#0A0A0A; letter-spacing:-.01em; white-space:nowrap;}
@media (prefers-reduced-motion: reduce){.logo-track{animation:none;}}
.classic-band .eyebrow{margin-bottom:16px;}
.classic-band .frame{margin:0; max-width:none; aspect-ratio:4/3;}
.xway-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:52px;}
.xway-card{display:flex; flex-direction:column; align-items:flex-start; padding:32px 30px; border-radius:18px;}
.xway-card .xic{width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px; background:rgba(124,77,255,.18); border:1px solid rgba(124,77,255,.4); color:#c8b8ff;}
.xway-card .xic svg{width:24px; height:24px;}
.xway-card .xeye{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#b7a6ff; margin-bottom:8px;}
.xway-card h3{margin:0 0 10px; font-size:1.375rem; font-weight:700; letter-spacing:-.02em;}
.xway-card p{margin:0 0 22px; color:rgba(255,255,255,.7); font-size:1rem; line-height:1.5rem;}
.xway-card .xway-link{margin-top:auto;}
.xsoon{display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-size:.625rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:3px 9px; vertical-align:middle;}
.uc-card.xway-card{background:#0c0a15;}
.xway-card{padding:0; overflow:hidden; align-items:stretch;}
.xway-body{display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:30px 30px 32px;}
.xway-media{width:100%; aspect-ratio:16/10; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(2,2,2,.55); background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size:22px 22px; position:relative; overflow:hidden;}
@media (max-width:760px){.xway-grid{grid-template-columns:1fr;}}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr;}.sec{padding:80px 0;}.rev-wall{grid-template-columns:repeat(2,1fr); height:560px;}}
@media (max-width:640px){.rev-wall{grid-template-columns:1fr;}}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--uc-ease), transform .6s var(--uc-ease); will-change:opacity, transform;}
.reveal.in{opacity:1; transform:none;}
.reveal.stat, .reveal.trio-card, .reveal.pb-card, .reveal.price-card, .reveal.src-tile{transition:transform .34s var(--uc-ease), box-shadow .34s var(--uc-ease), border-color .34s var(--uc-ease), background .34s var(--uc-ease), opacity .6s var(--uc-ease);}
.reveal.term{transition:transform .34s var(--uc-ease), opacity .6s var(--uc-ease), border-color .34s var(--uc-ease), box-shadow .34s var(--uc-ease);}
.zz-media .frame, .beam-card .frame{transition:transform .34s var(--uc-ease), box-shadow .34s var(--uc-ease), border-color .34s var(--uc-ease);}
.zz-media .frame:hover, .beam-card .frame:hover{transform:translateY(-6px); border-color:rgba(124,77,255,.32); box-shadow:0 28px 62px -28px rgba(0,0,0,.78);}
.feat-card .feat-ic, .trio-ic, .sup-ic{transition:background .24s var(--uc-ease), border-color .24s var(--uc-ease), color .24s var(--uc-ease);}
.feat-card:hover .feat-ic, .trio-card:hover .trio-ic, .sup-card:hover .sup-ic{background:rgba(227,237,93,.12); border-color:rgba(227,237,93,.55); color:var(--uc-lemon,#E3ED5D);}
@keyframes uc-beat{ 0%,100%{ transform:scale(1); } 12%{ transform:scale(1.28); } 24%{ transform:scale(1); } 36%{ transform:scale(1.18); } 50%{ transform:scale(1); } }
.frame.scan{overflow:hidden; place-items:stretch; background:#0b0912;}
.frame.scan::after{display:none;}
@keyframes scanSweep{ from { top:4%; } to { top:95%; } }
@keyframes scanPop{
  0%,100% { transform:translate(-50%,-50%) scale(.2); opacity:0; }
  18% { transform:translate(-50%,-50%) scale(1.25); opacity:1; }
  40% { transform:translate(-50%,-50%) scale(1); opacity:.92; }
  68% { transform:translate(-50%,-50%) scale(.85); opacity:0; }
}
@keyframes scanBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.frame.dfx{overflow:hidden; place-items:center; background:#ffffff; aspect-ratio:16/10;}
.frame.dfx::after{display:none;}
@keyframes dfxSlide{ 0%,32%{ transform:translateX(calc(-1 * var(--dfxgap,24px))); } 58%,90%{ transform:translateX(0); } 100%{ transform:translateX(calc(-1 * var(--dfxgap,24px))); } }
@keyframes dfxBad{ 0%,30%{ opacity:1; } 42%,100%{ opacity:0; } }
@keyframes dfxGood{ 0%,50%{ opacity:0; } 60%,88%{ opacity:1; } 92%,100%{ opacity:0; } }
@keyframes dfxDot{ 0%,45%{ background:#ff6b6b; } 60%,100%{ background:#E3ED5D; } }
@keyframes dfxLblA{ 0%,45%{ opacity:1; } 55%,100%{ opacity:0; } }
@keyframes dfxLblB{ 0%,50%{ opacity:0; } 60%,92%{ opacity:1; } 100%{ opacity:0; } }
.frame.mtn{overflow:hidden; place-items:center; background:#fbf8f1;}
.frame.mtn::after{display:none;}
@keyframes mtEye{ 0%,2%{opacity:0;transform:translateY(var(--fy));} 9%,85%{opacity:1;transform:translateY(0);} 92%,100%{opacity:0;transform:translateY(var(--fy));} }
@keyframes mtH{ 0%,6%{opacity:0;transform:translateY(var(--fy));} 14%,85%{opacity:1;transform:translateY(0);} 92%,100%{opacity:0;transform:translateY(var(--fy));} }
@keyframes mtSub{ 0%,11%{opacity:0;transform:translateY(var(--fy));} 19%,85%{opacity:1;transform:translateY(0);} 92%,100%{opacity:0;transform:translateY(var(--fy));} }
@keyframes mtC1{ 0%,22%{opacity:0;transform:translateY(var(--fy));} 29%,85%{opacity:1;transform:translateY(0);} 92%,100%{opacity:0;transform:translateY(var(--fy));} }
@keyframes mtC2{ 0%,25%{opacity:0;transform:translateY(var(--fy));} 32%,85%{opacity:1;transform:translateY(0);} 92%,100%{opacity:0;transform:translateY(var(--fy));} }
@keyframes mtC3{ 0%,28%{opacity:0;transform:translateY(var(--fy));} 35%,85%{opacity:1;transform:translateY(0);} 92%,100%{opacity:0;transform:translateY(var(--fy));} }
@keyframes mtC4{ 0%,31%{opacity:0;transform:translateY(var(--fy));} 38%,85%{opacity:1;transform:translateY(0);} 92%,100%{opacity:0;transform:translateY(var(--fy));} }
@keyframes mtC5{ 0%,34%{opacity:0;transform:translateY(var(--fy));} 41%,85%{opacity:1;transform:translateY(0);} 92%,100%{opacity:0;transform:translateY(var(--fy));} }
.frame.hf{overflow:hidden; place-items:center; background:#0b0912;}
.frame.hf::after{opacity:.5;}
.hf-slot.s1{left:53%; top:12%; width:44%; height:32%;}
.hf-slot.s2{left:53%; top:56%; width:44%; height:32%;}
@keyframes hfLiftH{
  0%,10%{ transform:translateY(0); box-shadow:0 3px 8px rgba(0,0,0,.06); }
  16%,88%{ transform:translateY(-8px); box-shadow:0 12px 22px -8px rgba(0,0,0,.45), 0 0 0 2px rgba(124,77,255,.85); }
  100%{ transform:translateY(0); box-shadow:0 3px 8px rgba(0,0,0,.06); } }
@keyframes hfLiftF{
  0%,20%{ transform:translateY(0); box-shadow:0 3px 8px rgba(0,0,0,.2); }
  26%,88%{ transform:translateY(-8px); box-shadow:0 12px 22px -8px rgba(0,0,0,.5), 0 0 0 2px rgba(124,77,255,.85); }
  100%{ transform:translateY(0); box-shadow:0 3px 8px rgba(0,0,0,.2); } }
@keyframes hfCk1{ 0%,30%{ opacity:0; transform:scale(.4); } 36%{ opacity:1; transform:scale(1); } 88%{ opacity:1; } 93%,100%{ opacity:0; } }
@keyframes hfCk2{ 0%,40%{ opacity:0; transform:scale(.4); } 46%{ opacity:1; transform:scale(1); } 88%{ opacity:1; } 93%,100%{ opacity:0; } }
@keyframes hfDot{ 0%,42%{ background:#7c4dff; } 48%,100%{ background:#E3ED5D; } }
@keyframes hfLA{ 0%,40%{ opacity:1; } 46%,100%{ opacity:0; } }
@keyframes hfLB{ 0%,44%{ opacity:0; } 50%,88%{ opacity:1; } 94%,100%{ opacity:0; } }
.frame.gl{overflow:hidden; place-items:center; background:#0b0912; aspect-ratio:299/216;}
.frame.gl::after{opacity:.5;}
@keyframes glPop{ 0%,6%{ opacity:0; transform:scale(.3); } 14%,88%{ opacity:1; transform:scale(1); } 94%,100%{ opacity:0; transform:scale(.3); } }
@keyframes glRow{ 0%,6%{ opacity:0; transform:translateY(6px); } 16%,88%{ opacity:1; transform:translateY(0); } 94%,100%{ opacity:0; transform:translateY(6px); } }
@keyframes glArrow{ 0%,100%{ transform:translateX(-2px); opacity:.55; } 50%{ transform:translateX(3px); opacity:1; } }
@media (prefers-reduced-motion: reduce){.reveal{opacity:1 !important; transform:none !important; transition:none;}.stat:hover, .trio-card:hover, .pb-card:hover, .price-card:hover, .src-tile:hover, .zz-media .frame:hover, .beam-card .frame:hover, .term:hover{transform:none;}}
@keyframes revLeft{ from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:768px){.rev-wall{display:flex; flex-direction:column; grid-template-columns:none; height:auto; gap:14px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}.rev-col{width:100%;}.rev-track{flex-direction:row; width:max-content; animation-name:revLeft;}.rev-card{flex:0 0 280px;}}
.uc-card{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:transform .34s var(--uc-ease), border-color .34s var(--uc-ease), box-shadow .34s var(--uc-ease);}
.uc-card:hover{transform:translateY(-6px); border-color:rgba(124,77,255,.32); box-shadow:0 22px 48px -24px rgba(0,0,0,.72);}
.faq-item:not(.open):hover{border-color:rgba(124,77,255,.22); background:rgba(255,255,255,.045);}
@media (prefers-reduced-motion: reduce){.uc-card:hover{transform:none;}}
@keyframes pwfade{ from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.pw-media{border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));}
.pw-mhead{display:flex; align-items:center; gap:9px; padding:11px 16px; font-size:14px; color:rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.07);}
.pw-dot{width:10px; height:10px; border-radius:50%; background:var(--uc-lemon); box-shadow:0 0 0 3px rgba(227,237,93,.16);}
.pw-ph{display:grid; place-items:center; min-height:250px; color:rgba(255,255,255,.34); font-size:14px; letter-spacing:.02em; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0); background-size:22px 22px;}
@media (max-width:640px){.pw-ph{min-height:180px;}}
.prob-grid, .sol-grid, .resp-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center;}
.prob-grid h2, .sol-grid h2, .resp-grid h2{margin:14px 0 0; font-size:clamp(1.625rem,3vw,2.25rem); font-weight:800; letter-spacing:-.02em; line-height:clamp(1.875rem,3.42vw,2.625rem);}
@keyframes pendingNudge{
  0%, 80%, 100% { transform:translateX(0) rotate(0); }
  84% { transform:translateX(-1.5px) rotate(-2.5deg); }
  88% { transform:translateX(1.5px) rotate(2.5deg); }
  92% { transform:translateX(-1px) rotate(-1.5deg); }
  96% { transform:translateX(1px) rotate(1.5deg); }
}
.sol-points{list-style:none; margin:20px 0; padding:0; display:flex; flex-direction:column; gap:13px;}
.sol-points li{display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.74); font-size:1rem; line-height:1.5rem;}
.sol-points .ck{color:var(--uc-lemon); font-weight:800; flex-shrink:0;}
.sol-points strong{color:#fff; font-weight:700;}
.sol-media{align-self:stretch;}
.sol-media .pw-ph{min-height:320px;}
@media (max-width:860px){.prob-grid, .sol-grid, .resp-grid{grid-template-columns:1fr; gap:30px;}.sol-media .pw-ph{min-height:220px;}}
.mcp-copy .sub{margin-top:14px;}
@keyframes rpscroll{ from { transform:translateY(0); } to { transform:translateY(-46%); } }
@keyframes pbxFloat{ 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.motion-card .frame{margin:0; max-width:none; width:100%; border-radius:14px;}
.motion-card .frame .fi svg{width:auto; height:auto;}
.frame .step-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; background:#0b0912;}
.frame:has(.step-vid)::after{z-index:2; background-image:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}
.frame.rzc{aspect-ratio:auto; height:305px;}
.frame.gl:has(.gl-vid)::after{background-image:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); opacity:1;}
@media (max-width:900px){.frame.rzc{height:395px;}}
@media (max-width:560px){.frame.rzc{height:261px;}}
.frame:has(.step-vid){position:relative;}
.frame.vid-playing .step-replay{opacity:0; pointer-events:none; transform:scale(.9);}
.xway-stack{position:absolute; inset:0;}
.xway-shot{position:absolute; top:50%; left:50%; height:84%; width:auto; max-width:62%; object-fit:contain; border-radius:11px; border:1px solid rgba(255,255,255,.16); box-shadow:0 22px 46px -18px rgba(0,0,0,.85); background:#fff; transition:transform .55s var(--uc-ease); will-change:transform;}
.xway-shot.s1{transform:translate(-50%,-50%) rotate(0deg); z-index:3;}
.xway-shot.s2{transform:translate(-88%,-46%) rotate(-8deg) scale(.94); z-index:2;}
.xway-shot.s3{transform:translate(-12%,-46%) rotate(8deg) scale(.94); z-index:1;}
.xway-card:hover .xway-shot.s1{transform:translate(-12%,-46%) rotate(8deg) scale(.94); z-index:1;}
.xway-card:hover .xway-shot.s2{transform:translate(-50%,-50%) rotate(0deg); z-index:3;}
.xway-card:hover .xway-shot.s3{transform:translate(-88%,-46%) rotate(-8deg) scale(.94); z-index:2;}
@media (prefers-reduced-motion: reduce){.xway-shot{transition:none;}}
.xway-soon{position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:linear-gradient(180deg, rgba(12,10,21,.48), rgba(12,10,21,.72)); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
.xway-soon span{font-size:.875rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:9px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.07);}
@keyframes raceFill{ from { width:0; } to { width:100%; } }
@keyframes raceRun{ from { left:0; } to { left:100%; } }
.pwr-slidewrap.play::after{animation:pwrline 10s linear forwards}
@keyframes pwrline{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pwrview{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pwr-acc-h.open{color:#f4f5f7}
.pwr-acc-h.open .chev{transform:rotate(180deg)}
.pwr-addprop .av{display:flex;gap:6px;align-items:center}
@keyframes pwrcar{50%{opacity:0}}
@keyframes fcardIn{ from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.ba-item .frame{margin:0; max-width:none; width:100%;}
.opt-copy .eyebrow, .opt-rail .eyebrow{margin-bottom:16px;}
.opt-media .frame{margin:0; max-width:none;}
#demoVideo .demo-thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
#demoVideo .demo-play{position:relative; z-index:1; border:0; padding:0; background:transparent; cursor:pointer;}
#demoVideo .demo-play .vplay{transition:transform .25s var(--uc-ease);}
#demoVideo:hover .demo-play .vplay{transform:scale(1.06);}
.sprout > .uc-container{position:relative; z-index:1;}
.sprout-inner .cta-row{margin-top:26px;}
.sup-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;}
.sup-card{padding:26px 22px; text-align:center;}
.sup-ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin:0 auto 15px; background:rgba(124,77,255,.14); border:1px solid rgba(124,77,255,.28); color:#c8b8ff;}
.sup-ic svg{width:23px; height:23px;}
.sup-card h3{margin:0 0 6px; font-size:1rem; font-weight:700;}
.sup-card p{margin:0; font-size:.875rem; color:rgba(255,255,255,.58); line-height:1.375rem;}
@media (max-width:820px){.sup-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:440px){.sup-grid{grid-template-columns:1fr;}}
@keyframes uc-marq{ to { transform: translateX(-50%); } }
.article-head .sub{margin:22px auto 24px; max-width:600px; font-size:1.125rem; line-height:1.75rem; color:rgba(255,255,255,.7);}
/* guards + converter fixes (rev-card sheen, demo iframe, xway fan) */
html body{background:#020202 !important;color:#fff !important;}
.uc-btn{border:0;}
.faq-a{transition:none !important;}
.elementor a{box-shadow:none;}
a.rev-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;}
.frame iframe{width:100%;height:100%;border:0;display:block;}
.elementor .xway-shot{height:84%;width:auto;max-width:62%;border-radius:11px;border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 46px -18px rgba(0,0,0,.85);}
/* responsive !important */
@media (max-width:860px){.news{padding:36px 28px 32px !important}.news-inner{flex-direction:column !important;align-items:flex-start !important;gap:24px !important}.news-form{width:100% !important}.news-input{flex:1 !important;width:auto !important}}
@media (max-width:560px){.news-form{flex-direction:column !important}.news-form .uc-btn{width:100% !important;justify-content:center !important}}
@media (max-width:820px){.sup-grid{grid-template-columns:1fr 1fr !important}}
@media (max-width:440px){.sup-grid{grid-template-columns:1fr !important}}
@media (max-width:760px){.xway-grid{grid-template-columns:1fr !important}}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr !important}.sec{padding:80px 0 !important}.rev-wall{grid-template-columns:repeat(2,1fr) !important;height:560px !important}}
@media (max-width:640px){.rev-wall{grid-template-columns:1fr !important}}
@media (max-width:768px){.rev-wall{display:flex !important;flex-direction:column !important;grid-template-columns:none !important;height:auto !important;gap:14px !important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) !important;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) !important}.rev-col{width:100% !important}.rev-track{flex-direction:row !important;width:max-content !important;animation-name:revLeft !important}.rev-card{flex:0 0 280px !important}}
@media (max-width:640px){.pw-ph{min-height:180px !important}}
@media (max-width:860px){.prob-grid, .sol-grid, .resp-grid{grid-template-columns:1fr !important;gap:30px !important}.sol-media .pw-ph{min-height:220px !important}}
@media (max-width:900px){.frame.rzc{height:395px !important}}
@media (max-width:560px){.frame.rzc{height:261px !important}}
@media (max-width:820px){.sup-grid{grid-template-columns:1fr 1fr !important}}
@media (max-width:440px){.sup-grid{grid-template-columns:1fr !important}}
/* ---- ucwr-marquee-css (was identical on all 7 pages) ---- */

.elementor-element:has(> .elementor-widget-container > .ucwr-cssfix){display:none!important;}
.logo-band{ padding:48px 0 !important; }
.logo-track{ animation:none !important; display:flex; gap:14px; width:max-content; will-change:transform; }
.brand-chip{ display:inline-flex !important; align-items:center; justify-content:center; gap:10px; height:44px; min-width:0 !important; padding:0 28px; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; flex:0 0 auto; will-change:transform; }
.brand-chip .bc-ic{ height:22px; width:auto; max-width:none; object-fit:contain; display:block; opacity:.5; filter:grayscale(1) brightness(1.25); transition:opacity .4s cubic-bezier(0.22,1,0.36,1), filter .4s cubic-bezier(0.22,1,0.36,1); }
.brand-chip .bc-ic[data-k="antigravity"]{ height:18px; }
.brand-chip .bc-ic[data-k="figma"]{ height:20px; }
.brand-chip .bc-ic[data-k="lovable"]{ height:20px; }
.brand-chip .bc-ic[data-k="v0"]{ height:19px; }
.brand-chip.lit .bc-ic{ opacity:1; filter:none; }
.brand-chip .bc-tx{ display:inline !important; font-weight:800; font-size:20px; line-height:1; letter-spacing:-.01em; color:#fff; opacity:.5; white-space:nowrap; transition:opacity .4s cubic-bezier(0.22,1,0.36,1); }
.brand-chip.lit .bc-tx{ opacity:1; }
.brand-chip.nomark{ padding:0 28px; }
.brand-chip .bc-name{ display:none !important; }

/* ---- reconciled fixes that existed on only some pages ---- */
/* ucwr-tooltip-fix: the opacity transition on .mode-tip-b sticks at 0 inside the
   Elementor/Proton wrapper, so tooltips never appeared. Killing it shows them instantly. */
.mode-tip-b{transition:none!important}
/* ucwr-marquee-clip: the logo marquee overflowed its band on Pricing / AI Express.
   The mask percentages stay at local's 8%/92%; only the clipping is globalised. */
.logo-band{overflow:hidden!important;max-width:100%!important}
.logo-track{max-width:none!important}
/* ucwr-faq-fix + ucwr-faq-fix2: the FAQ accordion. grid-template-rows 0fr->1fr never expands
   inside the Elementor/Proton wrapper (the fr row resolves to 0px even when forced) and a
   transition on it sticks at its start value, so max-height with no transition is the model
   that works. This existed only on Home and Pricing; globalising it means all 7 pages share
   one mechanism. It is compatible with the pages whose JS animates an explicit inline height
   (measured: open = 69px with both applied, closed = 0). 720px is a safe ceiling — answers are
   under 300px even at mobile widths. */
.faq-a{max-height:0!important;overflow:hidden!important;transition:none!important}
.faq-item.open .faq-a{max-height:720px!important}
/* Found by measuring at 390px while checking whether Pricing's duplicate blocks were safe to
   delete: ucwr-marquee-css sets `.logo-band{padding:48px 0!important}` unconditionally, which beat
   local's phone value (css/home.css: @media (max-width:560px){.logo-band{padding:22px 0}}) on every
   qa page — the logo band was 142px tall on phones instead of 90px. Restated here, after it. */
@media (max-width:560px){body .logo-band{padding:22px 0!important}}
/* NEWSLETTER ROW — reported by Dhaval 2026-07-29: "why does this section change every time?"
   Because nothing on qa gave the flex ITEM a basis. `.news-inner` is a wrapping flex row, and when the
   description was added the title was wrapped in a new `.news-copy` div. That wrapper had no rule
   anywhere on qa (not in globals, not in any page block, not in ucwr-css-v2), so it computed
   `flex:0 1 auto` — base size = the max-content width of the long `.news-sub` sentence — and a wrapping
   flex row wraps before it shrinks, so the form dropped onto its own line. The one flex rule that did
   exist, `ucwr-css-v2`'s `body .news-title{flex:1 1 320px!important}`, is dead: `.news-title` stopped
   being the flex item the moment `.news-copy` wrapped it. That is also why the section moved on every
   copy edit — with no basis, its layout was decided by sentence length.
   These are local css/home.css lines 1844-1847 verbatim (measured local at 1280px: copy 548px +
   form 438px on ONE row). `body ` prefix so a future page-level rule cannot silently win again. */
/* Two more old-snapshot drifts, found by diffing every flex/grid container on qa against the same
   page rendered from local at 1280px (the only two width differences in the whole sweep):
   1. the zig-zag grids: local uses minmax(0,...) tracks, qa's snapshot uses bare fr, which splits
      1030px as 480/592 instead of local's 472/600;
   2. .motion-grid gap: local (and globals) say 26px, AI Express's page block still says 22px.
   `body ` prefix so both beat the page-level blocks until those are retired. */
body .prob-grid,body .sol-grid,body .resp-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
body .sol-grid--swap{grid-template-columns:.9fr 1.1fr}   /* the modifier must outrank the line above, which the `body ` prefix would otherwise beat (local css/home.css:1025) */
body .motion-grid{gap:26px}
/* Restored 2026-07-29: these two were only ever in Pricing's `ucwr-btn-fix`, which was deleted with
   the duplicate blocks. `.btn-ghost` is Pricing's plan-card CTA (`.uc-btn.btn-ghost.plan-cta`) — without
   it those buttons lose their white label and border entirely. The bare h1-h4 line-height/margin come
   from local design-tokens.css; font-weight and letter-spacing are deliberately left to the TYPOGRAPHY
   GLOBALS block above, which sets them !important. */
/* (0,2,1) on purpose: Pricing's own ucwr-pricing-css still ships a `.uc-btn{border:0}` guard and it
   sits later in the cascade, so a plain `.btn-ghost` loses the border. `body .uc-btn.btn-ghost` also
   outranks Elementor's widget-scoped `.elementor-element-<id> .uc-btn` (0,2,0). */
body .uc-btn.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.2)}
body .uc-btn.btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.btn-ghost{color:#fff}
h1,h2,h3,h4{line-height:var(--uc-lh-tight);margin:0 0 var(--uc-s4)}
body .news-copy{flex:1 1 380px}
body .news-copy .news-title{flex:0 1 auto}
body .news-sub{margin:10px 0 0;color:var(--txd);font-size:1rem;line-height:1.625rem;max-width:56ch}
@media (max-width:860px){body .news-copy{flex:0 1 auto}body .news-sub{max-width:none}}  /* `body ` prefix (0,1,1) so it also beats the page-level ucwr-marquee-css copies, which sit later in the cascade, while those still exist */
/* ============ HOME'S PAGE-UNIQUE COMPONENTS (moved in 2026-07-29) ============
   Measured gap: emptying Home's page CSS changed 80 of 1042 elements, all in these components
   (the stats strip, the MCP terminal, the source tiles, the beam, the page-builder icon row, the
   inline videos and the replay button). Taken from local css/home.css, which is the source of
   truth; the last rules are qa-only. RE-APPLIED 2026-07-29 after publishing page 150 in the
   Elementor editor reverted this block — the editor writes back the site code it loaded at open
   time, so ALWAYS reload an open editor tab after a globals edit, before publishing. */
.stat .num{font-size:clamp(1.75rem,3vw,2.375rem);font-weight:800;color:var(--tx)}
.stat .num em{font-style:normal;color:var(--acc2)}
.stat .lbl{color:var(--txd);font-size:.875rem;margin-top:4px}
.stat:hover{transform:translateY(-4px)}
@media (max-width:560px){.stats{grid-template-columns:1fr}}
.term{position:relative;display:flex;flex-direction:column;height:375px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg, rgba(10,8,24,.92), rgba(4,3,10,.96));border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 50px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);transition:transform .34s var(--uc-ease), border-color .34s var(--uc-ease), box-shadow .34s var(--uc-ease)}
@media (max-width:560px){.term{height:430px}}
.term:hover{border-color:rgba(124,77,255,.32);box-shadow:0 26px 54px -26px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.08);transform:translateY(-6px)}
.term-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(124,77,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(124,77,255,.07) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(120% 90% at 72% 0%,#000,transparent 78%);mask-image:radial-gradient(120% 90% at 72% 0%,#000,transparent 78%)}
.term-glow{position:absolute;top:-28%;right:-12%;width:62%;height:82%;background:radial-gradient(circle, rgba(124,77,255,.26), transparent 70%);filter:blur(42px);pointer-events:none}
.term-scan{position:absolute;left:0;right:0;top:0;height:84px;pointer-events:none;background:linear-gradient(180deg, transparent, rgba(124,77,255,.10), transparent);animation:termScan 5s linear infinite}
.term-bar{position:relative;display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.015)}
.term-dot{width:11px;height:11px;border-radius:999px}
.term-file{margin-left:8px;font-size:12px;color:rgba(255,255,255,.42);font-family:ui-monospace,monospace}
.term-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--uc-lemon)}
.term-live i{width:7px;height:7px;border-radius:999px;background:var(--uc-lemon);box-shadow:0 0 8px var(--uc-lemon)}
.term-body{position:relative;flex:1;min-height:0;overflow:hidden;padding:20px;font-family:ui-monospace,monospace;font-size:14px;line-height:1.75rem;color:rgba(255,255,255,.62)}
.term-line{animation:termSwap .42s ease both}
.term-line .p,.term-line .ok{color:var(--uc-lemon)}
.term-caret{display:inline-block;width:8px;height:15px;margin-left:3px;vertical-align:-2px;border-radius:1px;background:var(--uc-lemon);animation:termBlink 1s steps(1) infinite}
.term-tabs{position:relative;display:flex;gap:8px;padding:0 20px 18px;flex-wrap:wrap}
.term-tab{padding:7px 13px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.62);transition:background .24s var(--uc-ease), border-color .24s var(--uc-ease), color .24s var(--uc-ease)}
.term-tab:not(.on):hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:#fff}
.term-tab.on{background:rgba(227,237,93,.12);border-color:rgba(227,237,93,.4);color:var(--uc-lemon)}
.beam-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;background:linear-gradient(to bottom, var(--uc-purple-light,#8072FC), var(--uc-lemon,#E3ED5D));box-shadow:0 0 12px rgba(128,114,252,.45)}
.beam-dot{position:absolute;left:50%;top:0;width:12px;height:12px;border-radius:50%;background:var(--uc-lemon,#E3ED5D);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(227,237,93,.16), 0 0 16px 3px rgba(227,237,93,.55);opacity:0}
.beam.tracing .beam-dot{opacity:1}
.src-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.src-tile{display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:background .2s ease, border-color .2s ease, transform .2s ease;text-decoration:none;color:inherit}
.src-tile:hover{background:rgba(255,255,255,.05);transform:translateY(-6px);border-color:rgba(124,77,255,.32);box-shadow:0 22px 48px -24px rgba(0,0,0,.72)}
.src-ic{width:40px;height:40px;display:grid;place-items:center}
.src-ic svg{width:30px;height:30px;color:#c8b8ff}
.src-ic img{width:40px;height:40px;object-fit:contain}
.src-tile h3{margin:0}
.src-tile p{margin:0;color:rgba(255,255,255,.55);font-size:.875rem;line-height:1.25rem}
.src-tile.is-soon{position:relative;cursor:default}
.src-tile.is-soon::after{content:"Soon";position:absolute;top:16px;right:16px;font-size:.625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:2px 9px;border-radius:999px}
@media (max-width:900px){.src-grid{grid-template-columns:repeat(2,1fr)}}
.pbx-ic{display:flex;flex-direction:column;align-items:center;gap:11px;width:112px}
.pbx-tile{display:grid;place-items:center;background:none;border:0;box-shadow:none;transition:transform .28s var(--uc-ease);animation:pbxFloat 3.6s var(--uc-ease) infinite}
.pbx-tile img{width:60px;height:60px;display:block;border-radius:15px}
.pbx-ic:not(.is-soon) .pbx-tile img{filter:drop-shadow(0 8px 22px rgba(124,77,255,.45))}
.pbx-name{font-size:.875rem;font-weight:600;color:rgba(255,255,255,.8);text-align:center}
.pbx-ic:hover .pbx-tile{transform:translateY(-5px)}
.pbx-ic.is-soon .pbx-tile{animation:none}
.pbx-ic.is-soon .pbx-tile img{filter:grayscale(1);opacity:.38}
.pbx-ic.is-soon .pbx-name{color:rgba(255,255,255,.42)}
.pbx-grid .pbx-ic:nth-child(2) .pbx-tile{animation-delay:.3s}
.pbx-grid .pbx-ic:nth-child(3) .pbx-tile{animation-delay:.6s}
.pbx-grid .pbx-ic:nth-child(4) .pbx-tile{animation-delay:.9s}
.pbx-grid .pbx-ic:nth-child(5) .pbx-tile{animation-delay:1.2s}
.pbx-grid .pbx-ic:nth-child(6) .pbx-tile{animation-delay:1.5s}
.pbx-grid .pbx-ic:nth-child(7) .pbx-tile{animation-delay:1.8s}
.pbx-grid .pbx-ic:nth-child(8) .pbx-tile{animation-delay:2.1s}
.hp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .45s var(--uc-ease)}
.hp-vid.ready{opacity:1}
.rz-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0c0a15;border-radius:inherit}
.gl-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#0b0912;border-radius:inherit}
.dl-vid{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;background:#fff;pointer-events:none}
@media (max-width:640px){.dl-vid{position:relative;width:100%;height:auto;object-fit:contain}.frame.rzc .rz-vid{object-fit:cover}}
.step-replay{position:absolute;inset:0;margin:auto;width:58px;height:58px;padding:0;border:0;border-radius:50%;cursor:pointer;z-index:3;display:grid;place-items:center;color:#fff;background:rgba(10,6,20,.6);box-shadow:0 10px 26px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.2);transition:opacity .28s var(--uc-ease,ease), transform .2s var(--uc-ease,ease), background .2s ease}
.step-replay svg{margin-left:3px}
.step-replay:hover{transform:scale(1.07);background:rgba(124,77,255,.9)}
.pwr-mode .lbl{display:none}
.pwr-panel[data-mode="design"] .pwr-mode[data-m="design"] .lbl,.pwr-panel[data-mode="developer"] .pwr-mode[data-m="developer"] .lbl{display:inline}
@media (prefers-reduced-motion: reduce){.pbx-tile{animation:none!important}.step-replay{transition:none}}
/* qa-only: Elementor caps <video> width, so the inline demo videos need it lifted */
.elementor .dl-vid,.elementor .rz-vid,.elementor .step-vid,.elementor .gl-vid,.elementor .hp-vid{max-width:none}
/* qa-only, from Home's page CSS: the beam is driven by scroll JS that rewrites height/top every
   frame, so a CSS transition on those makes it lag and throb. Keep only the opacity fade. */
.beam-fill{transition:none!important}
.beam-dot{transition:opacity .3s var(--uc-ease)!important}
/* Helper widgets (the ones that only exist to inject CSS/JS) hide themselves via a marker class.
   Globals only had the exact `.ucwr-cssfix` match, so Home's `ucwr-cssfix3` / `-cssfix4` helpers
   would have become visible empty blocks the moment its page CSS was retired. Attribute match so
   any present or future suffix is covered. */
.elementor-element:has(> .elementor-widget-container > [class*="ucwr-cssfix"]){display:none!important}

/* ============ RESPONSIVE RECOVERY (was Home's `ucwr-responsive-fix`) ============
   local css/home.css's @media rules, re-emitted with !important. This layer is REQUIRED: media
   queries add no specificity, so a plain `.src-grid{repeat(2,1fr)}` inside @media still loses to
   Elementor's widget-scoped `.elementor-element-<id> .src-grid{repeat(4,1fr)}` (0,2,0). Caught the
   hard way — after Home's page CSS was deleted the source-tile grid stayed 4-up at 390px, because
   the desktop-only simulation could not see it. Verify mobile as well as desktop from now on. */
@media (max-width:600px){.uc-hellobar{font-size:.75rem !important; padding:8px 38px 8px 14px !important; gap:9px !important} }
@media (max-width:600px){.cta-inner{padding:52px 26px !important} }
@media (max-width:860px){.news{padding:36px 28px 32px !important}.news-inner{flex-direction:column !important; align-items:flex-start !important; gap:24px !important}.news-form{width:100% !important}.news-input{flex:1 !important; width:auto !important} }
@media (max-width:560px){.news-form{flex-direction:column !important}.news-form .uc-btn{width:100% !important; justify-content:center !important} }
@media (max-width:900px){.uc-footer::before{-webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important} }
@media (max-width:560px){.uc-footer::before{-webkit-backdrop-filter:blur(5px) !important; backdrop-filter:blur(5px) !important} }
@media (max-width:640px){.foot-trust{justify-content:center !important} }
@media (max-width:820px){.sup-grid{grid-template-columns:1fr 1fr !important} }
@media (max-width:440px){.sup-grid{grid-template-columns:1fr !important} }
@media (max-width:560px){.term{height:430px !important} }
@media (max-width:980px){.chatai{grid-template-columns:1fr !important; gap:28px !important} }
@media (max-width:640px){.beam-rail{left:13px !important}.beam-step{padding-left:48px !important; padding-bottom:44px !important}.beam-node{width:28px !important; height:28px !important; font-size:.875rem !important}.beam-card h3{margin-top:1px !important}}
@media (max-width:640px){.hp-card{flex-basis:230px !important; width:230px !important} }
@media (max-width:760px){.xway-grid{grid-template-columns:1fr !important} }
@media (max-width:900px){.trio-grid{grid-template-columns:1fr !important}.cmp-cell{padding:12px 12px !important; font-size:.875rem !important}.cmp-cell.ai, .cmp-cell.classic{white-space:normal !important}.faq-grid{grid-template-columns:1fr !important}.diff-grid{grid-template-columns:1fr !important}.src-grid{grid-template-columns:repeat(2,1fr) !important}.pb-grid{grid-template-columns:1fr !important}.classic-band{grid-template-columns:1fr !important; padding:28px !important}.price-teaser{grid-template-columns:1fr !important}.stats{grid-template-columns:repeat(2,1fr) !important}.cmp{grid-template-columns:1fr !important}.foot-grid{grid-template-columns:1fr 1fr !important; gap:32px !important}.sec{padding:80px 0 !important}.mcp-grid{grid-template-columns:1fr !important; gap:36px !important}.rev-wall{grid-template-columns:repeat(2,1fr) !important; height:560px !important}.stepper{grid-template-columns:1fr !important; gap:32px !important}.step-media{position:static !important}.zz-row{grid-template-columns:1fr !important; gap:24px !important}.zz-row:nth-child(even) .zz-media{order:0 !important}}
@media (max-width:640px){.rev-wall{grid-template-columns:1fr !important} }
@media (max-width:560px){.stats{grid-template-columns:1fr !important}.foot-grid{display:grid !important; grid-template-columns:1fr 1fr !important; column-gap:22px !important; row-gap:0 !important}.foot-grid>.foot-brand{grid-column-start:1 !important; grid-column-end:-1 !important; margin-bottom:24px !important}.foot-col{margin-bottom:42px !important}.foot-col h4{margin-bottom:16px !important}.uc-foot-mark{font-size:20vw !important}}
@media (max-width:768px){.rev-wall{display:flex !important; flex-direction:column !important; grid-template-columns:none !important; height:auto !important; gap:14px !important; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) !important; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) !important}.rev-col{width:100% !important}.rev-track{flex-direction:row !important; width:max-content !important; animation-name:revLeft !important}.rev-card{flex:0 0 280px !important}}
@media (max-width:560px){.foot-bottom{flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:8px 12px !important}.foot-bottom > span:first-child{flex:1 1 100% !important}.foot-craft{flex:0 1 auto !important}.foot-bottom .foot-top{margin-left:auto !important}}
/* .feat-grid 2-up variant (Pricing "When to upgrade"): capped + centered so 4 cards read as a tidy 2x2 instead of four narrow columns. auto-fit + a 320px floor self-drops to one column before the cards get cramped; the 880px cap holds it to exactly two. grid-template-columns needs !important ONLY because the @media 900 rule below (and its duplicate in Pricing's page custom code) is !important and would otherwise force a cramped 2-up between 561-900. Base .feat-grid/.feat-3 still live in #ucwr-pricing-css. */
.feat-grid.feat-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important;max-width:880px;margin-left:auto;margin-right:auto}
@media (max-width:900px){.feat-grid{grid-template-columns:1fr 1fr !important} }
@media (max-width:560px){.feat-grid, .feat-grid.feat-3, .feat-grid.feat-2{grid-template-columns:1fr !important} }
@media (max-width:1080px){.mode-pane .mode-feats{grid-template-columns:1fr !important; gap:0 !important} }
@media (max-width:640px){.mode-tip-b{width:200px !important}.mode-pane .mode-feats .mode-tip-b{width:240px !important} }
@media (max-width:900px){.plan-grid{grid-template-columns:1fr !important; max-width:420px !important; margin-left:auto !important; margin-right:auto !important}.modes-grid{grid-template-columns:1fr !important} }
@media (max-width:640px){.pw-composer{flex-direction:column !important}.pw-bar{flex-direction:row !important; gap:4px !important; min-width:0 !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.08) !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; padding:10px 10px 0 !important}.pw-tab{white-space:nowrap !important; padding:12px 16px !important; border-radius:11px 11px 0 0 !important}.pw-tab::after{left:14px !important; right:14px !important; top:auto !important; bottom:-1px !important; width:auto !important; height:2px !important; transform:scaleX(0) !important}.pw-tab.is-active::after{transform:scaleX(1) !important}.pw-pane{padding:16px !important}.pw-ph{min-height:180px !important}}
@media (max-width:860px){.prob-grid, .sol-grid, .resp-grid{grid-template-columns:1fr !important; gap:30px !important}.sol-media .pw-ph{min-height:220px !important}.resp-devices{flex-wrap:wrap !important}}
@media (max-width:860px){.mcp-grid{grid-template-columns:1fr !important; gap:30px !important}}
@media (max-width:760px){.motion-grid{grid-template-columns:1fr !important} }
@media (max-width:900px){.frame.rzc{height:395px !important}.rz-win{height:355px !important} }
@media (max-width:560px){.frame.rzc{height:261px !important}.rz-win{height:225px !important} }
@media (max-width:760px){.race-cols{grid-template-columns:1fr !important} }
@media (max-width:980px){.pwr-grid{grid-template-columns:1fr !important; gap:40px !important}.pwr-copy{min-height:0 !important; order:1 !important}.pwr-editor{order:2 !important}.pwr-dots{margin-top:28px !important}}
@media (max-width:520px){.pwr{padding:64px 16px !important}}
/* BODY TYPE BASE — approved by Dhaval 2026-07-29.
   qa had no `body{font-size}` / `body{line-height}` anywhere: globals' base.css copy only carried
   font-family, so qa inherited 16px/normal where local inherits 17px/1.6 (local assets/design-tokens.css
   sets these on body; base.css then overrides only font-family and colour). Visible effect: anything
   that inherits its type rather than setting it — most obviously `.uc-btn`, 48px tall on qa vs 54px on
   local. Colour is deliberately NOT copied here: local's design-tokens body colour is the light-mode ink,
   and qa's dark theme sets `html body{color:#fff!important}`. */
body{font-size:var(--uc-fs-body);line-height:var(--uc-lh-body)}/* line-height stays UNITLESS on purpose — see the EVEN-PIXEL note at the end of this file */
/* =====================================================================
   ucwr-css-v2 + ucwr-css-faqtabs — UNIFIED INTO GLOBALS 2026-07-29
   These were JS-injected per page and had drifted into 4 variants of css-v2
   (2000 / 2207 / 2809 / 3007 B) and 3 of the FAQ tab bar (1661 / 886 / 859 B).
   Diffed all 7 rendered blocks: 18 css-v2 rules were common to every page; the
   rest was one page having a rule another lacked, never a conflicting value.
   Resolved as the superset, taking the strongest variant of each selector:
   - `body .pill-title` keeps the font-weight/letter-spacing that Pricing's copy
     lacked (Pricing got them from the .text-display mapping instead, same result);
   - the segmented control uses Home's FAQ-tab variant, which is the only one that
     also covers `#faqSeg` / `#pbxSeg` and resets background-image / appearance /
     box-shadow, so it beats Proton's doubled-class button styling;
   - `.mode-tip` / `.plan-feats li` were Pricing-only and are inert elsewhere.
   The per-page widgets can now be stubbed; until they are, they inject the same
   values later in the cascade, which is harmless.
   ===================================================================== */
/* §5-B step 5, 2026-07-29: font-size / font-weight / letter-spacing / line-height REMOVED from this
   rule so the hero is finally driven by the `.text-display, .pill-title` typography global above
   (same four values, so nothing moves — but now editing the Global Manager moves the hero, which is
   what Dhaval asked for). What stays here is layout only: the centred text block, its max-width and
   its margins, none of which belong to a typography class. */
body .pill-title{display:block!important;text-align:center!important;max-width:1240px!important;margin:20px auto 22px!important}
body .pill-title .title-br{display:block!important}
body .pill-title .brand-chip{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:.85em!important;height:.85em!important;padding:.08em!important;box-sizing:border-box!important;background:#fff!important;border-radius:.18em!important;vertical-align:middle!important;margin:0 .12em!important;position:relative!important;top:-.1em!important}
body .pill-title .brand-chip img{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;display:block!important;object-fit:contain!important}
body .pill-title .brand-chip--bare{background:transparent!important;padding:0!important;overflow:hidden!important}
body .pill-title .brand-chip--bare img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important}
body .pill-title .bw{white-space:nowrap!important}
body .pill-title .hero-br{display:none!important}
@media(min-width:1000px){body .pill-title .hero-br{display:block!important}}
body .trusted .stars-line{display:flex!important;align-items:center!important;gap:7px!important}
body .trusted .rate-num{color:#fff!important;font-size:.75rem!important;font-weight:700!important}
body .hero .sub{max-width:1240px!important}
body .sec-head{max-width:900px!important}
body .sec-head--wide{max-width:1100px!important}
body .news-title{flex:1 1 320px!important;max-width:none!important}
@media(max-width:860px){body .news-title{flex:0 1 auto!important}}
body .faq-pane{display:none!important}
body .faq-pane.is-active{display:block!important}
body .faq-pane .faq-grid{grid-template-columns:1fr!important;max-width:820px!important;margin-top:30px!important}
/* Pricing-only components (inert on the other pages) */
body .mode-tip{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}
body .plan-feats li{display:flex!important;align-items:center!important;flex-wrap:wrap!important}
body .plan-feats li .mode-tip{align-items:center!important}
/* Segmented control / FAQ tab bar — Home's variant, the strongest of the three */
body div.mode-seg-wrap{display:flex!important;justify-content:center!important;margin-top:32px!important;width:auto!important}
body div.mode-seg-wrap div.mode-seg{display:inline-flex!important;gap:4px!important;padding:5px!important;border-radius:999px!important;background-color:rgba(255,255,255,.05)!important;background-image:none!important;border:1px solid rgba(255,255,255,.1)!important;width:auto!important;flex-wrap:wrap!important;justify-content:center!important}
body div.mode-seg-wrap div.mode-seg button.mode-opt, body #faqSeg button.mode-opt, body #pbxSeg button.mode-opt{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:9px 22px!important;margin:0!important;border-radius:999px!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;color:rgba(255,255,255,.62)!important;font-family:inherit!important;font-weight:600!important;font-size:.875rem!important;line-height:1rem!important;text-transform:none!important;letter-spacing:normal!important;cursor:pointer!important;white-space:nowrap!important;-webkit-appearance:none!important;appearance:none!important;transition:background-color .24s ease,color .24s ease!important}
body div.mode-seg-wrap div.mode-seg button.mode-opt.on, body #faqSeg button.mode-opt.on, body #pbxSeg button.mode-opt.on{background-color:#E3ED5D!important;background-image:none!important;color:#06030e!important}
@media (max-width:520px){body div.mode-seg-wrap div.mode-seg button.mode-opt, body #faqSeg button.mode-opt, body #pbxSeg button.mode-opt{padding:8px 14px!important;font-size:.875rem!important}}
/* IN-COLUMN H2 SIZES — restored 2026-07-29 (§6b).
   The TYPOGRAPHY GLOBALS `.text-h2, .sec h2{font-size:clamp(1.9rem,3.4vw,2.7rem)!important}` was
   steamrolling the deliberately SMALLER sizes local gives H2s that sit inside a narrow grid column
   or copy block — those rules are plain, so !important beat them. Measured on figma-to-gutenberg at
   1280px: the `.resp-grid` H2 rendered 43.2px on qa vs 36px on local. Values below are local's
   (css/home.css:1029, :1178, :1472); the extra class raises specificity to (0,2,1) so it wins.
   NOTE this does NOT change the line count — that H2 is 3 lines on local too, and the earlier audit
   measured it as 3 lines at both 600px and 800px, so widening the box cannot fix it either. Getting
   it to 2 lines needs shorter copy, which is a deck decision, not a CSS one. */
body .prob-grid h2,body .sol-grid h2,body .resp-grid h2,body .mcp-copy h2{font-size:clamp(1.625rem,3vw,2.25rem)!important;line-height:clamp(1.875rem,3.42vw,2.625rem)!important}
body .pwr-head h2{font-size:clamp(1.875rem,4vw,2.75rem)!important;line-height:clamp(2.125rem,4.4vw,3rem)!important}
/* BLOG + ARTICLE TYPE LEVELS — added 2026-07-29. Two reasons:
   (1) same drift as the in-column H2s above — `.text-h2, .sec h2{...!important}` was overriding the
       smaller sizes local gives these, so qa rendered `.blog-featured h2` at 43.2px vs local's 32px and
       `.blog-latest-head h2` at 43.2px vs local's 22.4px;
   (2) the blog listing goes DYNAMIC on uichemy.com, and the article levels previously existed only in
       widget-scoped CSS (`.elementor-element-jhsqiro .article-…`), which WP-rendered post content can
       never match. Putting them here means a dynamic template inherits the type scale.
   Values are local css/converter.css:368-440 verbatim. */
body .blog-featured h2{font-size:clamp(1.5rem,2.6vw,2rem)!important;line-height:clamp(1.75rem,2.964vw,2.25rem)!important}
body .blog-latest-head h2{font-size:1.375rem!important}
body .article-head h1{font-size:var(--uc-fs-h1)!important;line-height:var(--uc-lh-tight)!important}
body .article-head .sub{font-size:1.125rem!important;line-height:1.75rem!important;color:var(--uc-tx-dim)!important}
body .article-main h2{font-size:1.5rem!important;line-height:1.875rem!important}
body .article-main p{font-size:var(--uc-fs-body)!important;line-height:2rem!important;color:var(--uc-tx-dim)!important}
body .article-main .lead{font-size:1.125rem!important;color:var(--uc-tx)!important}
body .article-related h2{font-size:1.5rem!important}
@media (max-width:768px){body .article-main h2{font-size:1.375rem!important}}
/* §6b, 2026-07-29: on the converter pages the mode name moved from the eyebrow into the H3 (an SEO
   anchor — "Classic Mode: full control"), so the eyebrow now carries availability instead. Lemon marks
   the mode you can use on that builder today. (0,3,1) so it outranks Elementor's widget-scoped
   `.elementor-element-<id> .xway-card .xeye{color:#b7a6ff}` (0,3,0). Mirrors css/home.css. */
body .xway-card .xeye--live{color:var(--uc-lemon)!important}
/* =====================================================================
   BLOG + ARTICLE COMPONENT BOXES — moved in 2026-07-29 (Dhaval).
   Verbatim from local css/converter.css (the source of truth), deduped against what globals already
   had: the *responsive* blog rules were already here via the `ucwr-conv` bundle, so this is the base
   layer only — 81 rules / 288 declarations.
   Deliberately PLAIN selectors, no `body ` prefix and no !important. That is the point: on pages
   296/301 the existing `ucwr-blog` and widget-scoped copies still win, so those two pages cannot
   change; but any OTHER page — a category / tag / author / search archive, a listing block, or the
   dynamic templates on uichemy.com — now inherits the blog and article components from the design
   system instead of depending on those two page IDs. Do NOT add !important here without re-measuring
   296/301, because that would flip the cascade on them.
   ===================================================================== */
.blog-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--uc-s6)}
.blog-cat{height:36px;padding:0 var(--uc-s4);border-radius:999px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;background:var(--uc-surface-2);color:var(--uc-tx-dim);border:1px solid var(--uc-hairline);transition:all .2s var(--uc-ease)}
.blog-cat:hover{color:var(--uc-tx);border-color:rgba(124,77,255,.4)}
.blog-cat.is-active{background:var(--uc-lemon);color:var(--uc-ink);border-color:transparent}
.blog-cover{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(70% 90% at 50% 35%, rgba(124,77,255,.26), rgba(2,2,2,.5) 72%)}
.blog-cover-fb{position:absolute;inset:0;display:grid;place-items:center;z-index:0}
.blog-cover-fb>span{width:52px;height:52px;border-radius:var(--uc-r-md);display:grid;place-items:center;background:var(--uc-hairline-soft);border:1px solid rgba(255,255,255,.12);color:var(--uc-tx-mut)}
.blog-cover-fb svg{width:24px;height:24px}
.blog-cover img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--uc-ease)}
.blog-card:hover .blog-cover img{transform:scale(1.04)}
.blog-meta{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--uc-tx-faint)}
.blog-meta .cat{color:var(--uc-lemon);font-weight:700}
.blog-meta .dot{width:3px;height:3px;border-radius:999px;background:rgba(255,255,255,.3);flex-shrink:0}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--uc-s5);align-items:stretch;margin-top:var(--uc-s6)}
.blog-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;padding:0}
.blog-card .blog-body{padding:var(--uc-s5);display:flex;flex-direction:column;flex:1}
.blog-card h3{margin:var(--uc-s3) 0 0;color:var(--uc-tx)}
.blog-author{margin-top:auto;padding-top:var(--uc-s4);display:flex;align-items:center;gap:9px}
.blog-av{width:26px;height:26px;border-radius:999px;flex-shrink:0;background:linear-gradient(135deg,var(--uc-violet),var(--uc-purple));display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--uc-tx)}
.blog-author-name{font-size:14px;color:var(--uc-tx-dim);font-weight:500}
.blog-author .arr{margin-left:auto;color:var(--uc-tx-faint);transition:color .2s var(--uc-ease)}
.blog-card:hover .blog-author .arr{color:var(--uc-lemon)}
.blog-author .arr svg{width:15px;height:15px;display:block}
.blog-featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border-radius:var(--uc-r-xl);overflow:hidden;text-decoration:none}
.blog-featured .blog-cover{aspect-ratio:auto;height:100%;min-height:340px}
.blog-feat-body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.blog-featured h2{margin:var(--uc-s3) 0;font-size:clamp(1.5rem,2.6vw,2rem);line-height:clamp(1.75rem,2.964vw,2.25rem);color:var(--uc-tx)}
.blog-featured p{margin:0 0 var(--uc-s5);color:var(--uc-tx-dim);font-size:1rem;line-height:1.625rem}
.blog-latest-head{display:flex;align-items:baseline;gap:var(--uc-s3)}
.blog-latest-head h2{margin:0;font-size:1.375rem}
.blog-latest-head .count{font-size:var(--uc-fs-small);color:var(--uc-tx-faint)}
.blog-post.is-hidden,.blog-featured.is-hidden,#blogFeatured.is-hidden,.blog-latest-head.is-hidden{display:none}
.article-head{max-width:760px;margin:0 auto;padding:clamp(140px,15vh,172px) 40px var(--uc-s2);text-align:center}
/* Single-post header background — added 2026-07-31. Every other page's first section is `.hero`,
   which carries the violet gradient; the single-post header is `.article-head` and had no background
   at all, so the post read as flat black. Same gradient + drifting glow as `.hero` (line ~451/411),
   painted through full-bleed pseudo-elements so NO layout changes: .article-head stays max-width:760px
   and every child keeps its current box. z-index:-1 + isolation keeps them behind the header content
   but above the page background. */
/* Header rhythm — all token-driven, no inline/custom code. The stack gap was an inline
   `row-gap:var(--uc-s3)` in the widget HTML; that inline style is removed and the layout lives here.
   Resulting rhythm: crumb →40→ h1 →16→ date →48→ image →64→ body copy. */
.article-head{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;row-gap:var(--uc-s4)}
body .article-head{padding-bottom:var(--uc-s8)!important}

/* Article measure — 2026-07-31. The width locks live in widget e829d45's SCOPED css
   (.article-head 760 / .article-head h1 720 / .article-main 720). Elementor prints that in the body
   at (0,2,0), so it outranks globals on both specificity and source order — !important is the only
   way to reach it from here (same approach as the EVEN-PIXEL OVERRIDE block below). One token drives
   all three so the title, the hero image and the body copy stay flush at the same measure.
   .article-head adds 80px because of its own 40px side padding. */
body .article-head{max-width:calc(var(--uc-article-w) + 80px)!important}
body .article-head h1{max-width:var(--uc-article-w)!important}
body .article-main{max-width:var(--uc-article-w)!important}
/* Featured image — boxed treatment, same measure as the title above it. aspect-ratio reserves the
   box before the lazy-loader swaps in the real src, so nothing jumps on load. */
.article-hero-media{width:100%;max-width:var(--uc-article-w);margin:var(--uc-s6) auto 0}
/* Elementor's frontend.min.css zeroes every figure margin at (0,4,1) via
   `.elementor .elementor-widget:not(...):not(...) figure`, which outranks the rule above — restate
   the top margin so the image keeps its 32px separation from the date. */
/* margin-top 0: the featured image now sits as the first child of .article-body (moved there in the
   Elementor editor), and .article-body already supplies var(--uc-s7) of padding-top. Any margin here
   would stack on top of that. If the image is ever moved back inside .article-head, restore a
   var(--uc-s6) top margin so it separates from the date. */
body .article-hero-media{margin-top:0!important}
/* =====================================================================
   PAGE (BODY) AURORA — added 2026-07-31, single posts only.
   The design system already carries the full .uc-aurora orb CSS + ucau1/2/3 keyframes, but NO page
   on the site has ever shipped the <div class="uc-aurora"> markup, so the area below the hero was
   flat #020202. Rebuilt here as a body layer so it needs no markup and no widget/custom code.
   Same three orbs and colours as .uc-aurora (violet / light-violet / lemon), positioned to match
   .au-1 / .au-2 / .au-3. position:fixed so the wash stays put while the article scrolls.
   Layering: z-index:-1 and NOTHING else changes. body's background-color propagates to the canvas
   (html has none), which paints below every negative-z-index layer, so the orbs sit above the flat
   #020202 and below all content automatically.
   Do NOT lift .wrapper-main to position:relative;z-index:1 to achieve this — that makes it a STACKING
   CONTEXT, which traps the fixed .uc-header (z-index:100) inside it and re-roots the backdrop that
   the header's backdrop-filter blur samples, visibly breaking the header.
   Scoped to body.single-post: the 9 verified pages are `page` post-type and never match.
   ===================================================================== */
body.single-post::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38vw 38vw at 10vw 10vh, rgba(75,34,204,.42) 0%, rgba(75,34,204,.18) 40%, rgba(75,34,204,0) 74%), radial-gradient(34vw 34vw at 92vw 26vh, rgba(128,114,252,.26) 0%, rgba(128,114,252,.11) 40%, rgba(128,114,252,0) 74%), radial-gradient(30vw 30vw at 54vw 102vh, rgba(227,237,93,.10) 0%, rgba(227,237,93,.05) 36%, rgba(227,237,93,0) 76%)}

.article-hero-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--uc-r-card);border:1px solid var(--uc-hairline);box-shadow:var(--uc-shadow-card);background:var(--uc-surface)}
.article-head::before,.article-head::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;pointer-events:none}
/* Aurora — matches `.hero`: the gradient breathes (uic-breathe drives background-position, so the
   full-bleed layer can never expose an edge), and the glow carries all four radial orbs from
   .hero::before + .hero::after including the lemon one, screened over the gradient. The drift
   transform is deliberately NOT reused: .hero can afford it because it is overflow:hidden with
   inset:-30% of slack, whereas these layers are pinned to the header box and a translate would
   pull a hard edge into view. */
.article-head::before{background:linear-gradient(180deg, #000000 4%, #2a138f 62%, #421eb2 100%);background-size:100% 200%;animation:uic-breathe 12s ease-in-out infinite alternate}
/* Two orbs, not four. Sizing note: the originals were copied from .hero, where the radii are
   PERCENTAGES of a very tall section. .article-head is ~414px tall (shorter still since the featured
   image moved into .article-body), so those percentages squashed the orbs into flat, hard-edged
   blobs that got sliced at the band edge. These use a fixed horizontal radius with a vertical radius
   just over half the header height, so each orb reaches full transparency BEFORE the top/bottom edge
   and can never show a cut line, at any header height. */
.article-head::after{background:radial-gradient(640px 55% at 24% 52%, rgba(124,77,255,.46) 0%, rgba(124,77,255,0) 72%), radial-gradient(560px 50% at 78% 62%, rgba(66,30,178,.60) 0%, rgba(66,30,178,0) 72%);mix-blend-mode:screen}
@media (prefers-reduced-motion: reduce){.article-head::before{animation:none}}
/* Loop pagination — added 2026-07-31. `loop_pagination()` emits bare WP `.page-numbers` markup with
   no styling of its own. Mirrors the `.blog-cat` pill (same height/radius/weight/tokens) so it reads
   as the same control family; active page uses the lemon token on ink, like `.blog-cat.is-active`.
   The slot is a child of `.blog-grid`, so it must span all columns or it lands in one grid cell. */
.uich-loop-pagination-slot{grid-column:1/-1}
.uich-loop-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--uc-s2);margin-top:var(--uc-s6)}
.uich-loop-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 var(--uc-s3);border-radius:var(--uc-r-pill);font-size:var(--uc-fs-small);line-height:1.375rem;font-weight:600;text-decoration:none;background:var(--uc-surface-2);color:var(--uc-tx-dim);border:1px solid var(--uc-hairline);transition:color .2s var(--uc-ease),background .2s var(--uc-ease),border-color .2s var(--uc-ease)}
.uich-loop-pagination a.page-numbers:hover{color:var(--uc-tx);border-color:var(--uc-violet-edge)}
.uich-loop-pagination .page-numbers.current{background:var(--uc-lemon);color:var(--uc-ink);border-color:transparent}
.uich-loop-pagination .page-numbers.dots{background:none;border-color:transparent;color:var(--uc-tx-faint)}
.article-crumb{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;font-size:var(--uc-fs-small);font-weight:500;color:var(--uc-tx-faint)}
.article-crumb a{color:var(--uc-tx-faint);text-decoration:none;transition:color .18s var(--uc-ease)}
.article-crumb a:hover{color:var(--uc-tx)}
.article-crumb .cur{color:var(--uc-lemon)}
.article-crumb svg{width:13px;height:13px;opacity:.5}
.article-head h1{margin:var(--uc-s5) auto 0;max-width:720px;font-size:var(--uc-fs-h1);line-height:clamp(2.25rem,4.6vw,3.5rem)}
.article-head .sub{margin:var(--uc-s5) auto;font-size:1.125rem;color:var(--uc-tx-dim)}
.article-date{font-size:var(--uc-fs-small);font-weight:500;color:var(--uc-tx-faint)}
.article-body{max-width:1180px;margin:0 auto;padding:var(--uc-s7) 40px;display:grid;grid-template-columns:220px 1fr 280px;gap:var(--uc-s7);align-items:start}
.article-toc{position:sticky;top:100px;align-self:start}
.article-toc-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--uc-tx-faint);margin-bottom:var(--uc-s4)}
.article-toc-list{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--uc-hairline)}
.article-toc-list a{display:block;margin-left:-1px;padding:var(--uc-s2) 0 var(--uc-s2) var(--uc-s4);border-left:2px solid transparent;font-size:14px;font-weight:500;line-height:1.125rem;text-decoration:none;color:var(--uc-tx-mut);transition:color .18s var(--uc-ease), border-color .18s var(--uc-ease)}
.article-toc-list a:hover{color:var(--uc-tx)}
.article-toc-list a.is-active{border-left-color:var(--uc-lemon);color:var(--uc-tx);font-weight:600}
.article-main{min-width:0;max-width:720px}
.article-main section{margin:0 0 var(--uc-s6);scroll-margin-top:100px}
.article-main h2{font-size:1.5rem;line-height:1.875rem;margin:0 0 var(--uc-s4)}
.article-main p{font-size:var(--uc-fs-body);line-height:2rem;color:var(--uc-tx-dim);margin:0 0 var(--uc-s5)}
.article-main .lead{font-size:1.125rem;color:var(--uc-tx)}
.article-callout{display:flex;gap:13px;padding:var(--uc-s4);border-radius:var(--uc-r-btn);margin:0 0 var(--uc-s5)}
.article-callout svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.article-callout p{margin:0;font-size:1rem;line-height:1.625rem;color:var(--uc-tx)}
.article-callout.lime{background:rgba(227,237,93,.08);border:1px solid rgba(227,237,93,.25)}
.article-callout.lime svg{color:var(--uc-lemon)}
.article-callout.danger{background:rgba(255,90,110,.08);border:1px solid rgba(255,90,110,.25)}
.article-callout.danger svg{color:#FF9BA6}
.article-quote{margin:var(--uc-s2) 0 var(--uc-s6);padding:4px 0 4px var(--uc-s5);border-left:3px solid var(--uc-lemon);font-size:1.375rem;font-weight:600;line-height:1.875rem;letter-spacing:-.01em;color:var(--uc-tx)}
/* =====================================================================
   DYNAMIC POST CONTENT — added 2026-07-31.
   The static mock only ever contained <p>, <h2> and <section>, so .article-main was only styled for
   those three. Real post content now flows in from WordPress (h3/h4/ul/ol/figure/blockquote/code/
   table), and every unstyled element fell back to the theme default — h3, h4 and li were rendering at
   13px against 18px body copy, which is what made the article read as "dead".
   All values use globals tokens; every font-size is paired with an even line-height per the
   EVEN-PIXEL rule above. Top margins use `* + h` so the first block never gains a stray gap.
   ===================================================================== */
.article-main .lead:empty{display:none}
.article-main :is(h2,h3,h4,h5,h6){color:var(--uc-tx);font-weight:700;letter-spacing:-.01em}
.article-main h3{font-size:1.25rem;line-height:1.75rem;margin:0 0 var(--uc-s4)}
.article-main h4{font-size:1.125rem;line-height:1.75rem;margin:0 0 var(--uc-s3)}
.article-main h5,.article-main h6{font-size:1rem;line-height:1.625rem;margin:0 0 var(--uc-s3)}
.article-main > * + :is(h2,h3,h4,h5,h6){margin-top:var(--uc-s6)}
.article-main :is(ul,ol){margin:0 0 var(--uc-s5);padding-left:var(--uc-s5);font-size:var(--uc-fs-body);line-height:2rem;color:var(--uc-tx-dim)}
.article-main li{margin:0 0 var(--uc-s2)}
.article-main li::marker{color:var(--uc-lemon)}
.article-main :is(ul,ol) :is(ul,ol){margin:var(--uc-s2) 0 0}
.article-main strong,.article-main b{color:var(--uc-tx);font-weight:700}
.article-main :is(p,li) a{color:var(--uc-lemon);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .18s var(--uc-ease)}
.article-main :is(p,li) a:hover{opacity:.75}
.article-main figure{margin:0 0 var(--uc-s5)}
.article-main figure img{display:block;width:100%;height:auto;border-radius:var(--uc-r-card)}
.article-main figcaption{margin-top:var(--uc-s2);font-size:var(--uc-fs-small);line-height:1.375rem;color:var(--uc-tx-faint);text-align:center}
.article-main blockquote{margin:var(--uc-s2) 0 var(--uc-s6);padding:4px 0 4px var(--uc-s5);border-left:3px solid var(--uc-lemon);font-size:1.375rem;font-weight:600;line-height:1.875rem;letter-spacing:-.01em;color:var(--uc-tx)}
.article-main blockquote p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.article-main :is(code,kbd){font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;line-height:1.5rem;padding:2px 6px;border-radius:var(--uc-r-sm);background:var(--uc-surface-2);border:1px solid var(--uc-hairline);color:var(--uc-tx)}
.article-main pre{margin:0 0 var(--uc-s5);padding:var(--uc-s4);border-radius:var(--uc-r-btn);background:var(--uc-surface);border:1px solid var(--uc-hairline);overflow-x:auto}
.article-main pre code{padding:0;border:0;background:none}
.article-main table{width:100%;margin:0 0 var(--uc-s5);border-collapse:collapse;font-size:1rem;line-height:1.625rem;color:var(--uc-tx-dim)}
.article-main :is(th,td){padding:var(--uc-s3);border:1px solid var(--uc-hairline);text-align:left}
.article-main th{color:var(--uc-tx);font-weight:700}
.article-main hr{margin:var(--uc-s6) 0;border:0;border-top:1px solid var(--uc-hairline)}
/* Protuno's DYNAMIC breadcrumb widget emits .protuno-breadcrumbs__* — not the mock's .cur, so the
   existing `.article-crumb .cur{color:var(--uc-lemon)}` above matches nothing. Restate for the real
   markup so the active page picks up the lemon token. */
.article-crumb .protuno-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px}
.article-crumb .protuno-breadcrumbs__link{color:var(--uc-tx-faint);text-decoration:none;transition:color .18s var(--uc-ease)}
.article-crumb .protuno-breadcrumbs__link:hover{color:var(--uc-tx)}
.article-crumb .protuno-breadcrumbs__sep{color:var(--uc-tx-faint);opacity:.5}
/* Short breadcrumb without hardcoding anything — 2026-07-31. Protuno's breadcrumbs_html() emits
   Home › <Category> › <Post title> plus a JSON-LD BreadcrumbList. The title ran to 79 chars, so hide
   the trailing current item AND the separator before it, leaving "Home › Category". The markup and
   the schema stay untouched — crawlers still get the full trail, readers get the short one.
   Children are <a>Home</a><span sep><a>Cat</a><span sep><span current>, so among spans the last is
   the current item and the one before it is its separator. */
.article-crumb .protuno-breadcrumbs span:nth-last-of-type(1),
.article-crumb .protuno-breadcrumbs span:nth-last-of-type(2){display:none}
.article-crumb .protuno-breadcrumbs a:last-of-type{color:var(--uc-lemon)}
.article-crumb .protuno-breadcrumbs a:last-of-type:hover{color:var(--uc-lemon);opacity:.8}
.article-rail{position:sticky;top:100px;align-self:start}
.article-rail-inner{position:relative;overflow:hidden;border-radius:var(--uc-r-card);padding:var(--uc-s5);background:radial-gradient(120% 90% at 50% -10%, rgba(124,77,255,.28), transparent 70%), var(--uc-surface);border:1px solid rgba(255,255,255,.14);box-shadow:var(--uc-sheen)}
.article-rail-preview{position:relative;padding:var(--uc-s4) 10px 10px;margin-bottom:var(--uc-s4);border-radius:var(--uc-r-chip);background:rgba(2,2,2,.45);border:1px solid var(--uc-hairline)}
.article-rail .kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--uc-lemon);margin-bottom:8px}
.article-rail h3{margin:0;font-size:1.125rem;line-height:1.375rem}
.article-rail p{margin:8px 0 var(--uc-s4);font-size:14px;line-height:1.375rem;color:var(--uc-tx-dim)}
.article-related{max-width:1180px;margin:0 auto;padding:var(--uc-s4) 40px var(--uc-s5)}
.article-related h2{font-size:1.5rem;margin:0 0 var(--uc-s5)}
.article-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--uc-s5)}
/* .rel-card — added 2026-07-31. These lived ONLY in widget e829d45's scoped CSS
   (.elementor-element-e829d45 .rel-card ...) while the markup sits in widget 6fd3e52, so nothing
   matched on the frontend: the cards lost their padding and the arrow <svg> — which carries a
   viewBox but no width/height attrs — fell back to width:100% and rendered 536x536.
   Verbatim from local css/converter.css 432-437 (already even-px paired). .cat/.read stay
   parent-qualified per the generic-name rule below. flex:none added so the icon cannot be
   stretched by the flex row. */
.rel-card{display:block;padding:var(--uc-s5);text-decoration:none}
.rel-card .cat{font-size:12px;font-weight:600;color:var(--uc-lemon);line-height:1.25rem}
.rel-card h3{margin:10px 0 var(--uc-s4);font-size:1.125rem;line-height:1.5rem;color:var(--uc-tx)}
.rel-card .read{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--uc-tx-faint);line-height:1.375rem}
.rel-card .read svg{width:14px;height:14px;flex:none;transition:color .2s var(--uc-ease)}
.rel-card:hover .read svg{color:var(--uc-lemon)}
@media (max-width:1080px){
.article-body{grid-template-columns:1fr;gap:var(--uc-s7)}
.article-toc{display:none}
.article-rail{position:static}
.article-main{max-width:760px;margin:0 auto}
.article-rail-inner{max-width:560px;margin:0 auto}
}
@media (max-width:768px){
.article-head{padding-left:24px;padding-right:24px}
.article-body{padding:var(--uc-s6) 24px}
.article-related{padding:var(--uc-s2) 24px var(--uc-s5)}
.article-related-grid{grid-template-columns:1fr;gap:var(--uc-s4)}
.article-main h2{font-size:1.375rem}
}
@media (max-width:480px){
.article-head,.article-body,.article-related{padding-left:20px;padding-right:20px}
}
/* =====================================================================
   EVEN-PIXEL TYPE PAIRING — added 2026-07-29 (Dhaval: every rendered px value even).
   Rounding the type scale to even px required `body{line-height:1.75rem}` (28px) instead of the old
   unitless 1.6. A px line-height INHERITS AS A FIXED LENGTH, not a ratio — so every rule that sets a
   font-size but no line-height suddenly got 28px instead of size x 1.6. That is a real regression: it
   pushed the 16:9 `.frame.mtn` mock 7px past its fixed height and clipped it.
   Fix: pair every such rule with an explicit even line-height = even(font-size x 1.6), i.e. the leading
   they had before, snapped to an even px. Plain selectors on purpose — a declaration always beats
   inheritance, so no specificity boost is needed, and anything already declaring a line-height
   (widget-scoped CSS included) keeps winning exactly as it did before.
   RULE FOR NEW CSS: never write a font-size without a line-height. See guides/01-DESIGN-RULES.md.
   ===================================================================== */
.ddrow.is-soon .tx::after,.mmock-nbtn,.mmock-btn,.src-tile.is-soon::after{line-height:.875rem}
.grp,.ucm-grp,.mmock-sub,.uic-cursor-chip,.news-badge,.rev-meta,.xway-card .xeye,.term-live,.blog-av,.article-toc-label,.article-rail .kicker{line-height:1.125rem}
.dd-feat .fd,.dd-feat .fl,.mmock-logo,.mmock-brand,.trusted .tnum,.rev-stars,.rev-yt-row .av,.logo-eyebrow,.pw-mhead,.xway-soon span,.term-file,.term-tab,.blog-meta,.blog-author-name{line-height:1.25rem}
body .trusted .rate-num{line-height:1.25rem!important}
.dd-feat .ft,.rate-pill,.rev-av,.pw-ph,.pbx-name,.blog-cat,.blog-latest-head .count,.article-crumb,.article-date{line-height:1.375rem}
.ddrow .t,.ucm-body a,.mcp-link,.frame .fi span,.hero-chip,.uc-btn,.news-input,.rev-handle,.stat .lbl{line-height:1.5rem}
.faq-q,.brand-chip .bc-name{line-height:1.625rem}
.uc-nav__link .nic,.ucm-head,.article-main .lead{line-height:1.75rem}
body .article-main .lead{line-height:1.75rem!important}
.uc-logo-word,.ddrow .nic,.dd-feat .fic{line-height:1.875rem}
.badge-new,.mmock-links a,.xsoon{line-height:1rem}
.xway-card h3,.blog-latest-head h2{line-height:2.25rem}
body .blog-latest-head h2{line-height:2.25rem!important}
.article-related h2{line-height:2.375rem}
body .article-related h2{line-height:2.375rem!important}
.stat .num{line-height:clamp(2.875rem,4.8vw,3.875rem)}
@media (max-width:600px){.uc-hellobar{line-height:1.25rem!important}}
@media (max-width:900px){.cmp-cell{line-height:1.25rem!important}}
@media (max-width:640px){.beam-node{line-height:1.375rem!important}}
/* Round 2 of the same pairing, found by MEASURING the live pages rather than reading the CSS: these
   components live in Elementor's widget-scoped blocks (not in globals), so the block above could not
   reach them and they were still inheriting body's 28px. Found by flagging every element whose
   line-height / own font-size ratio exceeded 2.0 -- 46 classes across the 9 pages. The 13 with generic
   names (.a .b .x .t .on .cx .pk .lbl .cat .ver .read .send .msel) are deliberately NOT here: a bare
   `.t{}` in the site globals would hit unrelated elements. They are loose-leading only, never clipped,
   and need parent-qualified selectors -- see the handoff doc. */
.hf-slot-label,.hf-ck{line-height:.875rem}
.dfx-mark,.mtn-eye,.pbx-live,.pbx-soon,.hp-badge,.cl-pending,.fdz-badge{line-height:1rem}
.mtn-sub,.cl-ttl,.rp-url,.pwr-eyebrow,.pwr-kick,.pwr-modelchip,.race-flag,.rs-eyebrow,.uc-mag-hint,.plan-inc-ttl,.plan-ribbon{line-height:1.125rem}
.diff-label,.scan-chip,.demo-chip,.cmp-cell,.pwr-tab,.cchip,.rc-badge,.ot-num,.plan-seat,.pn-txt,.pt-c{line-height:1.25rem}
.foot-craft,.fdz-link{line-height:1.375rem}
/* =====================================================================
   EVEN-PIXEL OVERRIDES FOR ELEMENTOR WIDGET-SCOPED CSS — 2026-07-29.
   A large share of component CSS on qa lives in each Proton widget's own `css` field, which Elementor
   emits SCOPED (`.elementor-element-<id> .sel`, (0,2,1)) and PRINTS IN THE BODY — so it outranks the
   design system on both specificity and source order. Rewriting it at source is not practical through
   the MCP: `find_and_update_section_code` replaces the whole field, and the header widget alone is
   13.7 KB, so 20 widgets would mean ~275 KB of hand-transcribed payloads.
   Instead these restate ONLY the declarations that actually WIN and compute to an odd/fractional px.
   Derived by resolving the winning rule per element in the CSSOM (importance -> specificity -> order)
   across all 9 pages, NOT by reading the CSS text — reading the text flags declarations that the
   globals type block already overrides, and re-overriding those would have shrunk all 14 card titles
   from 18px back to 16px and undone the §5-A unification.
   line-heights are even(new font-size x the original ratio), so the leading is preserved.
   When the widget CSS is eventually rewritten at source, DELETE this block — do not maintain both.
   ===================================================================== */
.uc-logo-word,.ddrow .nic,.dd-feat .fic,.foot-brand .fb-logo{font-size:20px!important}
.uc-nav__link,.ddrow .desc,.dd-feat .ft,.dd-feat .fl,.term-body,.pwr-wpseg button,.pwr-prompt .txt,.pwr-prompt .prow .msel,.pwr-prompt .prow .send,.article-toc-list a,.mcp-term-body,.article-rail p{font-size:14px!important}
.uc-nav__link .nic{font-size:18px!important}
.ddrow .t,.uc-btn-figma,.news-input{font-size:16px!important}
.badge-new,.dfx-mark,.mtn-eye,.mtn-card b,.mtn-card i,.pbx-live,.pbx-soon,.hp-badge{font-size:.625rem!important}
.grp,.trusted .tnum,.scan-chip,.dfx-chip,.mtn-sub,.demo-chip,.hf-chip,.news-badge,.foot-col h4,.pwr-eyebrow,.pwr-kick,.pwr-tags span{font-size:.75rem!important}
.dd-feat .fd,.term-file,.term-live,.logo-eyebrow,.pwr-modelchip,.pwr-sugg button,.pwr-ctxrow .cx,.pwr-ctxrow .mini button,.pwr-prompt .prow .send kbd,.article-toc-label,.mcp-term-bar .t,.article-rail .kicker{font-size:12px!important}
.hero-chip,.src-tile p,.pbx-name,.hp-meta p,.cmp-row.head .cmp-cell,.cmp-cell,.sup-card p,.foot-bottom{font-size:.875rem!important}
.beam-node,.beam-card p,.zz-text p,.trio-card p,.chatai-tab p,.faq-a p,.faq-cta,.faq-cta a,.foot-brand p,.foot-col a,.pwr-head p{font-size:1rem!important}
.zz-text h3{font-size:1.5rem!important}
.dfx-tx b{font-size:clamp(.625rem,1.25vw,.75rem)!important}
.dfx-tx p{font-size:clamp(.375rem,.85vw,.5rem)!important}
.dfx-g.card .big{font-size:clamp(.75rem,1.7vw,1rem)!important}
.dfx-pills span{font-size:.5rem!important}
.mtn-h{font-size:clamp(1rem,2.3vw,1.375rem)!important}
.hf-slot-label,.hf-ck{font-size:.5rem!important}
.pwr-slide h3{font-size:clamp(1.375rem,2.6vw,1.875rem)!important}
.pwr-modelchip .ver{font-size:10px!important}
.article-quote{font-size:1.375rem!important}
.ddrow .desc,.src-tile p,.hp-meta p{line-height:1.25rem!important}
.beam-card p,.zz-text p,.faq-a p,.pwr-head p,.pwr-slide p{line-height:1.625rem!important}
.dfx-tx b{line-height:clamp(.75rem,1.438vw,.875rem)!important}
.dfx-tx p{line-height:clamp(.5rem,1.139vw,.625rem)!important}
.mtn-h{line-height:clamp(1.125rem,2.622vw,1.625rem)!important}
.trio-card p,.chatai-tab p,.foot-brand p{line-height:1.5rem!important}
.term-body,.mcp-term-body{line-height:1.75rem!important}
.sup-card p,.pwr-prompt .txt,.article-rail h3,.article-rail p{line-height:1.375rem!important}
.pwr-slide h3{line-height:clamp(1.625rem,3.068vw,2.25rem)!important}
.pwr-target{line-height:1rem!important}
.article-toc-list a{line-height:1.125rem!important}
.article-quote{line-height:1.875rem!important}
/* These two are injected at RUNTIME by a `ucwr-*` widget's JS into an id-less <style>, already carrying
   !important, so an equal-specificity rule here cannot win. `html body` adds one element (0,1,2) and
   takes it. Values are even(old size x old ratio), same as the rest of this block. */
html body .hero-reassure{font-size:.875rem!important;line-height:1.375rem!important}
html body .news-inner .news-copy .news-sub{font-size:1rem!important;line-height:1.625rem!important}
/* ==== ucwr-optimize (optimize page, v2 .odx-*) added 2026-08-01 ====
   .cmp-card list rules were never in globals: no page used .cmp-card markup until
   this one, and without them the icons render column-width and the list text falls
   to the body base. Values reference Global Manager tokens. Element-targeting
   selectors carry a body prefix so an Elementor/Nexter reset cannot win a tie, and
   the mobile .odx-state override needs it to outweigh the .cmp-card base because
   @media adds no specificity. ==== */
body .cmp-card{border-radius:20px;padding:32px}
body .cmp-card.bad{border-color:rgba(255,90,110,.22)}
body .cmp-card.good{border-color:rgba(124,77,255,.3);background:linear-gradient(160deg, rgba(75,34,204,.12), rgba(255,255,255,.02))}
body .cmp-card h3{margin:0 0 16px}
body .cmp-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
body .cmp-card li{display:flex;gap:11px;color:var(--txd);font-size:1rem!important;line-height:1.5rem!important}
body .cmp-card li svg{flex:0 0 auto;width:20px;height:20px;margin-top:1px}
body .cmp-card.bad li svg{color:#FF5A6E}
body .cmp-card.good li svg{color:var(--acc2)}
.odx-hero .uc-container { text-align:left; }
.odx-hero .eyebrow { color:var(--uc-tx); background:var(--uc-hairline-soft);
 border-color:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
 -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.odx-hero-row { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.odx-hero-copy .eyebrow { margin-bottom:18px; }
body .odx-hero .pill-title { text-align:left !important; margin:0 0 20px !important; max-width:none; }
.odx-hero-copy .sub { max-width:560px; margin:0 0 26px; }
.odx-chips { display:flex; flex-wrap:wrap; gap:10px; }
a.hero-chip { text-decoration:none; cursor:pointer; }
a.hero-chip .odx-chip-n { color:var(--uc-lemon); font-weight:700; }
.odx-hero-shot { margin:0; max-width:none; }
.odx-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:56px; align-items:start; }
.odx-rail { position:sticky; top:110px; align-self:start; }
.odx-rail-ttl { color:rgba(255,255,255,.45); font-size:.75rem; line-height:.875rem; font-weight:700;
 text-transform:uppercase; letter-spacing:.06em; margin:0 0 16px; }
.odx-toc { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
body .odx-toc a { display:flex; gap:var(--uc-s3); align-items:flex-start; padding:11px 0; text-decoration:none;
 color:var(--uc-tx-mut); font-size:var(--uc-fs-small); line-height:1.375rem;
 border-left:2px solid rgba(255,255,255,.09); padding-left:16px;
 transition:color .24s var(--uc-ease), border-color .24s var(--uc-ease); }
body .odx-toc a:hover { color:var(--uc-tx); border-left-color:rgba(124,77,255,.5); }
body .odx-toc li.is-current a { color:var(--uc-tx); border-left-color:var(--uc-lemon); }
.odx-toc .odx-toc-n { color:rgba(255,255,255,.35); font-variant-numeric:tabular-nums; }
.odx-toc li.is-current .odx-toc-n { color:var(--uc-lemon); }
.odx-rules { display:flex; flex-direction:column; gap:96px; }
.odx-rule { scroll-margin-top:120px; }
.odx-head { margin:0 0 28px; }
.odx-head .odx-num { display:inline-flex; align-items:center; justify-content:center;
 width:44px; height:44px; margin-bottom:var(--uc-s4); border-radius:var(--uc-r-btn);
 font-size:1rem; line-height:1.375rem; font-weight:700; color:#c8b8ff;
 background:rgba(124,77,255,.14); border:1px solid rgba(124,77,255,.28); }
body .odx-head h2 { margin:0 0 14px; text-align:left; text-wrap:pretty; }
body .odx-head .sub { text-align:left; }
.odx-head .sub + .sub { margin-top:var(--uc-s3); }
.odx-seg-wrap { display:flex; justify-content:center; margin:0 0 22px; }
.odx-pane { display:none; }
.odx-pane.is-active { display:block; }
.odx-state { padding:var(--uc-s6); display:flex; flex-direction:column; gap:26px; }
body .odx-state > h3 { margin:0; display:flex; align-items:center; justify-content:center; gap:10px; }
.odx-tone { flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; }
body .odx-tone svg { width:16px; height:16px; }
.odx-state.bad .odx-tone { color:var(--uc-coral); background:rgba(255,90,110,.12); border:1px solid rgba(255,90,110,.34); }
.odx-state.good .odx-tone { color:var(--uc-lemon); background:rgba(227,237,93,.12); border:1px solid rgba(227,237,93,.4); }
.odx-pair { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.odx-cell { display:flex; flex-direction:column; gap:14px; }
body .odx-cell ul { margin:0; }
@supports (grid-template-rows: subgrid) {
 .odx-pair { grid-template-rows:auto auto auto; }
 .odx-cell { display:grid; grid-row:span 3; grid-template-rows:subgrid; gap:14px; }
}
.odx-tag { align-self:center; justify-self:center; display:inline-flex; align-items:center; gap:var(--uc-s2);
 padding:5px 12px; border-radius:var(--uc-r-pill); font-size:.75rem; font-weight:700; line-height:.875rem;
 text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.7);
 background:var(--uc-surface-2); border:1px solid rgba(255,255,255,.1); }
body .odx-tag img { width:14px; height:14px; display:block; }
body .odx-shot { display:block; width:100%; height:auto; border-radius:var(--uc-r-btn);
 border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.02); }
.odx-cell .odx-shot { align-self:start; }
.odx-check { max-width:940px; margin:0 auto; padding:36px 40px; }
.odx-check-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--uc-s5); flex-wrap:wrap; margin-bottom:var(--uc-s2); }
body .odx-check h2 { margin:0 0 10px; text-align:left; }
.odx-check .sub { text-align:left; max-width:none; }
.odx-check-count { flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--uc-s2); padding:7px 14px;
 border-radius:var(--uc-r-pill); font-size:var(--uc-fs-small); font-weight:700; line-height:1.375rem; color:var(--uc-lemon);
 background:rgba(227,237,93,.1); border:1px solid rgba(227,237,93,.32); font-variant-numeric:tabular-nums; }
.odx-groups { display:flex; flex-direction:column; margin-top:var(--uc-s5); }
.odx-group { display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--uc-s6); padding:26px 0; }
.odx-group + .odx-group { border-top:1px solid rgba(255,255,255,.07); }
.odx-group:first-child { padding-top:6px; }
.odx-group:last-child { padding-bottom:0; }
body .odx-group h3 { margin:0; align-self:start; }
.odx-gn { display:block; color:var(--uc-lemon); font-size:1rem; line-height:1.375rem;
 font-weight:700; letter-spacing:.02em; margin-bottom:2px; font-variant-numeric:tabular-nums; }
.odx-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.odx-item { display:flex; }
body .odx-item button { display:flex; align-items:flex-start; gap:11px; width:100%; padding:8px 10px;
 margin:-8px -10px; border:0; border-radius:10px; background:transparent; text-align:left;
 font:inherit; color:var(--txd); font-size:1rem; line-height:1.5rem; cursor:pointer;
 transition:background .24s var(--uc-ease), color .24s var(--uc-ease); }
body .odx-item button:hover { background:rgba(255,255,255,.04); }
.odx-tx { display:flex; flex-direction:column; gap:3px; }
.odx-ttl { color:var(--uc-tx); font-weight:600; font-size:1rem; line-height:1.5rem; }
.odx-det { color:var(--uc-tx-mut); font-size:var(--uc-fs-small); line-height:1.375rem; max-width:62ch; }
body .odx-item button:hover .odx-det { color:rgba(255,255,255,.68); }
.odx-box { flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:6px;
 border:1.5px solid rgba(255,255,255,.24); display:grid; place-items:center;
 transition:background .24s var(--uc-ease), border-color .24s var(--uc-ease); }
body .odx-box svg { width:13px; height:13px; opacity:0; color:#06030e; transition:opacity .18s var(--uc-ease); }
.odx-item.is-done .odx-box { background:var(--uc-lemon); border-color:var(--uc-lemon); }
body .odx-item.is-done .odx-box svg { opacity:1; }
.odx-item.is-done .odx-ttl { color:rgba(255,255,255,.4);
 text-decoration:line-through; text-decoration-color:rgba(227,237,93,.7); }
.odx-item.is-done .odx-det { color:rgba(255,255,255,.28); }
.odx-check-foot { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px;
 padding-top:var(--uc-s5); border-top:1px solid var(--uc-hairline); }
.odx-note { max-width:900px; margin:0 auto; padding:var(--uc-s6); display:flex; flex-direction:column; gap:14px; }
body .odx-note p { margin:0; color:var(--txd); font-size:1rem; line-height:1.625rem; }
body .odx-note ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--uc-s3); }
body .odx-note li { color:var(--txd); font-size:1rem; line-height:1.625rem;
 padding-left:16px; border-left:2px solid rgba(124,77,255,.4); }
@media (max-width:1100px){
 .odx-grid { grid-template-columns:1fr; gap:40px; }
 .odx-rail { position:static; }
 .odx-toc { flex-direction:row; flex-wrap:wrap; gap:var(--uc-s2); }
 body .odx-toc a { border-left:0; border:1px solid rgba(255,255,255,.1); border-radius:var(--uc-r-pill); padding:8px 14px; }
 body .odx-toc li.is-current a { border-color:var(--uc-lemon); }
 .odx-rules { gap:72px; }
}
@media (max-width:900px){
 .odx-pair { grid-template-columns:1fr; gap:var(--uc-s5); }
 @supports (grid-template-rows: subgrid) {
 .odx-pair { grid-template-rows:none; }
 .odx-cell { grid-row:auto; grid-template-rows:none; }
 }
 .odx-hero-row { grid-template-columns:1fr; gap:36px; }
 .odx-hero-shot { max-width:480px; }
 .odx-group { grid-template-columns:1fr; gap:var(--uc-s4); }
}
@media (max-width:560px){
 body .odx-state { padding:22px; gap:20px; }
 .odx-check { padding:24px 22px; }
 .odx-group { padding:22px 0; }
 .odx-note { padding:var(--uc-s5); }
 .odx-hero-shot { max-width:100%; }
 .odx-rules { gap:56px; }
 .odx-head .odx-num { width:38px; height:38px; }
}
/* ==== end ucwr-optimize ==== */
/*@@5B-END@@*/
/*@@DOCS-TPL-START@@*/body.post-type-archive-documents .archive-page-header,body.tax-docs .archive-page-header{padding: calc(88px + var(--uc-s6)) 0 var(--uc-s6);background: transparent;border: 0}body.post-type-archive-documents .archive-header-content,body.tax-docs .archive-header-content{gap: 14px;max-width: 760px;margin: 0 auto;text-align: center}body.post-type-archive-documents .archive-header-content .archive-post-title,body.tax-docs .archive-header-content .archive-post-title{margin: 0;font-family: var(--uc-font);font-size: 2.75rem;line-height: 3.25rem;font-weight: 600;letter-spacing: -.02em;color: var(--uc-tx)}body.post-type-archive-documents .archive-description,body.tax-docs .archive-description{margin: 0;font-size: 1.0625rem;line-height: 1.75rem;color: var(--uc-tx-dim)}body.post-type-archive-documents .archive-description p,body.tax-docs .archive-description p{margin: 0}body.post-type-archive-documents #nxt-crumbs,body.tax-docs #nxt-crumbs{font-size: .8125rem;line-height: 1.25rem;color: var(--uc-tx-faint)}body.post-type-archive-documents #nxt-crumbs a,body.tax-docs #nxt-crumbs a{color: var(--uc-tx-mut);text-decoration: none}body.post-type-archive-documents #nxt-crumbs a:hover,body.tax-docs #nxt-crumbs a:hover{color: var(--uc-lemon)}body.post-type-archive-documents .nxt-blog-post-listing,body.tax-docs .nxt-blog-post-listing{padding-bottom: var(--uc-s7)}body.post-type-archive-documents .nxt-blog-post-listing .nxt-row,body.tax-docs .nxt-blog-post-listing .nxt-row{display: grid !important;grid-template-columns: repeat(2,minmax(0,1fr));gap: var(--uc-s5);margin: 0 !important}body.post-type-archive-documents article.nxt-archive-list,body.tax-docs article.nxt-archive-list{width: 100% !important;max-width: none;padding: 0 !important;margin: 0;display: flex;flex-direction: column;overflow: hidden;background: var(--uc-surface);border: 1px solid var(--uc-hairline);border-radius: var(--uc-r-card);transition: border-color .24s var(--uc-ease),background .24s var(--uc-ease)}body.post-type-archive-documents article.nxt-archive-list:hover,body.tax-docs article.nxt-archive-list:hover{border-color: var(--uc-violet-edge);background: var(--uc-surface-2)}body.post-type-archive-documents .nxt-post-list-content,body.tax-docs .nxt-post-list-content{display: flex;flex-direction: column;height: 100%}body.post-type-archive-documents .nxt-post-thumb,body.tax-docs .nxt-post-thumb{margin: 0;overflow: hidden}body.post-type-archive-documents .nxt-post-thumb a,body.tax-docs .nxt-post-thumb a{display: block}body.post-type-archive-documents .nxt-post-thumb img,body.tax-docs .nxt-post-thumb img{display: block;width: 100%;height: auto;aspect-ratio: 1200 / 628;object-fit: cover;border-bottom: 1px solid var(--uc-hairline-soft)}body.post-type-archive-documents .nxt-post-title,body.tax-docs .nxt-post-title{display: flex;flex-direction: column;gap: 10px;flex: 1 1 auto;padding: 22px 24px 24px}body.post-type-archive-documents .nxt-post-title h3.archive-post-title,body.tax-docs .nxt-post-title h3.archive-post-title{margin: 0;font-family: var(--uc-font);font-size: 1.125rem;line-height: 1.5rem;font-weight: 600;letter-spacing: -.02em}body.post-type-archive-documents .nxt-post-title h3.archive-post-title a,body.tax-docs .nxt-post-title h3.archive-post-title a{color: var(--uc-tx);text-decoration: none}body.post-type-archive-documents article.nxt-archive-list:hover h3.archive-post-title a,body.tax-docs article.nxt-archive-list:hover h3.archive-post-title a{color: var(--uc-lemon)}body.post-type-archive-documents .nxt-post-title .nxt-meta-info,body.tax-docs .nxt-post-title .nxt-meta-info{gap: 10px;margin: 0;font-size: .75rem;line-height: 1.125rem;color: var(--uc-tx-faint)}body.post-type-archive-documents .nxt-meta-info .nxt-meta-author,body.tax-docs .nxt-meta-info .nxt-meta-author,body.post-type-archive-documents .nxt-meta-info .nxt-meta-comments,body.tax-docs .nxt-meta-info .nxt-meta-comments{display: none !important}body.post-type-archive-documents .nxt-meta-info .nxt-meta-date,body.tax-docs .nxt-meta-info .nxt-meta-date{color: var(--uc-tx-faint)}body.post-type-archive-documents .nxt-meta-info .nxt-meta-date a,body.tax-docs .nxt-meta-info .nxt-meta-date a{color: inherit;text-decoration: none;pointer-events: none}body.post-type-archive-documents .nxt-entry-content,body.tax-docs .nxt-entry-content{margin: 0;font-size: .9375rem;line-height: 1.5rem;color: var(--uc-tx-mut);display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden}body.post-type-archive-documents .nxt-entry-content p,body.tax-docs .nxt-entry-content p{margin: 0}body.post-type-archive-documents a.post-read-more,body.tax-docs a.post-read-more{align-self: flex-start;margin-top: auto;padding: 0 !important;background: none !important;border: 0 !important;border-radius: 0;font-size: .875rem;line-height: 1.375rem;font-weight: 600;color: var(--uc-lemon);text-decoration: none;text-transform: none}body.post-type-archive-documents a.post-read-more::after,body.tax-docs a.post-read-more::after{content: "\2192";margin-left: 7px;display: inline-block;transition: transform .24s var(--uc-ease)}body.post-type-archive-documents a.post-read-more:hover::after,body.tax-docs a.post-read-more:hover::after{transform: translateX(3px)}body.post-type-archive-documents .nxt-paginate-nav,body.tax-docs .nxt-paginate-nav{padding: var(--uc-s2) 0 var(--uc-s7)}body.post-type-archive-documents .nxt-paginate,body.tax-docs .nxt-paginate{gap: 8px;justify-content: center}body.post-type-archive-documents .nxt-paginate span,body.tax-docs .nxt-paginate span,body.post-type-archive-documents .nxt-paginate a,body.tax-docs .nxt-paginate a{display: inline-flex;align-items: center;justify-content: center;min-width: 40px;height: 40px;padding: 0 14px;font-size: .875rem;line-height: 1.375rem;font-weight: 600;text-decoration: none;border-radius: var(--uc-r-btn);font-variant-numeric: tabular-nums;transition: border-color .24s var(--uc-ease),background .24s var(--uc-ease)}body.post-type-archive-documents .nxt-paginate a,body.tax-docs .nxt-paginate a{color: var(--uc-tx-dim);background: var(--uc-surface);border: 1px solid var(--uc-hairline)}body.post-type-archive-documents .nxt-paginate a:hover,body.tax-docs .nxt-paginate a:hover{color: var(--uc-tx);border-color: var(--uc-violet-edge);background: var(--uc-surface-2)}body.post-type-archive-documents .nxt-paginate .current,body.tax-docs .nxt-paginate .current{color: #fff;background: var(--uc-purple);border: 1px solid var(--uc-purple)}body.single-documents .nxt-blog-single-post{margin: 0 auto}body.single-documents .nxt-single-post-title{margin-bottom: var(--uc-s5)}body.single-documents .single-post-title h1,body.single-documents .nxt-single-post-title h1{margin: 0 0 14px;font-family: var(--uc-font);font-size: 2.5rem;line-height: 3rem;font-weight: 600;letter-spacing: -.02em;color: var(--uc-tx)}body.single-documents .nxt-single-post-title .nxt-meta-info{gap: 10px;font-size: .8125rem;line-height: 1.25rem;color: var(--uc-tx-faint)}body.single-documents .nxt-single-post-title .nxt-meta-author{display: none !important}body.single-documents .nxt-single-post-content{font-size: 1.0625rem;line-height: 1.875rem;color: var(--uc-tx-dim)}body.single-documents .nxt-single-post-content > *:first-child{margin-top: 0}body.single-documents .nxt-single-post-content p,body.single-documents .nxt-single-post-content ul,body.single-documents .nxt-single-post-content ol,body.single-documents .nxt-single-post-content blockquote{max-width: 58ch}body.single-documents .nxt-single-post-content p{margin: 0 0 var(--uc-s4);font-size: 1.0625rem;line-height: 1.875rem}body.single-documents .nxt-single-post-content h2,body.single-documents .nxt-single-post-content h2.wp-block-heading{margin: var(--uc-s6) 0 14px;font-family: var(--uc-font);font-size: 1.625rem;line-height: 2.125rem;font-weight: 600;letter-spacing: -.02em;color: var(--uc-tx)}body.single-documents .nxt-single-post-content h3,body.single-documents .nxt-single-post-content h3.wp-block-heading{margin: var(--uc-s5) 0 12px;font-family: var(--uc-font);font-size: 1.25rem;line-height: 1.75rem;font-weight: 600;letter-spacing: -.02em;color: var(--uc-tx)}body.single-documents .nxt-single-post-content h4{margin: var(--uc-s5) 0 10px;font-size: 1.0625rem;line-height: 1.5rem;font-weight: 600;color: var(--uc-tx)}body.single-documents .nxt-single-post-content a{color: var(--uc-lemon);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px}body.single-documents .nxt-single-post-content a:hover{text-decoration-thickness: 2px}body.single-documents .nxt-single-post-content strong,body.single-documents .nxt-single-post-content b{color: var(--uc-tx);font-weight: 600}body.single-documents .nxt-single-post-content ul,body.single-documents .nxt-single-post-content ol{margin: 0 0 var(--uc-s4);padding-left: 22px}body.single-documents .nxt-single-post-content li{margin: 0 0 9px;font-size: 1.0625rem;line-height: 1.75rem}body.single-documents .nxt-single-post-content li::marker{color: var(--uc-tx-faint)}body.single-documents .nxt-single-post-content figure,body.single-documents .nxt-single-post-content .wp-block-image{margin: var(--uc-s5) 0}body.single-documents .nxt-single-post-content img{display: block;max-width: 100%;height: auto;border: 1px solid var(--uc-hairline);border-radius: var(--uc-r-btn)}body.single-documents .nxt-single-post-content figcaption{margin-top: 10px;font-size: .8125rem;line-height: 1.25rem;color: var(--uc-tx-faint);text-align: center}body.single-documents .nxt-single-post-content blockquote{margin: var(--uc-s5) 0;padding: 18px 22px;background: var(--uc-surface);border: 1px solid var(--uc-hairline);border-left: 3px solid var(--uc-lemon);border-radius: var(--uc-r-btn)}body.single-documents .nxt-single-post-content blockquote p:last-child{margin-bottom: 0}body.single-documents .nxt-single-post-content code{padding: 2px 7px;font-size: .9375rem;line-height: 1.5rem;color: var(--uc-tx);background: var(--uc-surface-2);border: 1px solid var(--uc-hairline);border-radius: 6px}body.single-documents .nxt-single-post-content pre{margin: var(--uc-s5) 0;padding: 18px 20px;overflow-x: auto;background: var(--uc-surface-2);border: 1px solid var(--uc-hairline);border-radius: var(--uc-r-btn)}body.single-documents .nxt-single-post-content pre code{padding: 0;background: none;border: 0}body.single-documents .nxt-single-post-content table{width: 100%;margin: var(--uc-s5) 0;border-collapse: collapse;font-size: .9375rem;line-height: 1.5rem}body.single-documents .nxt-single-post-content th,body.single-documents .nxt-single-post-content td{padding: 11px 14px;text-align: left;border: 1px solid var(--uc-hairline)}body.single-documents .nxt-single-post-content th{color: var(--uc-tx);background: var(--uc-surface-2);font-weight: 600}body.single-documents .nxt-author-meta{margin: var(--uc-s6) 0 0;padding: 22px 24px;background: var(--uc-surface);border: 1px solid var(--uc-hairline);border-radius: var(--uc-r-card)}body.single-documents .nxt-author-details{gap: 16px;align-items: center}body.single-documents .author-meta-avatar img,body.single-documents .post-author-avatar img{width: 52px;height: 52px;border-radius: 999px;border: 1px solid var(--uc-hairline)}body.single-documents .author-meta-title{font-size: 1rem;line-height: 1.5rem;font-weight: 600;color: var(--uc-tx)}body.single-documents .author-meta-title a{color: inherit;text-decoration: none}body.single-documents .post-author-bio{margin: 4px 0 0;font-size: .875rem;line-height: 1.375rem;color: var(--uc-tx-mut)}body.single-documents .nxt-post-next-prev{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: var(--uc-s4);margin: var(--uc-s6) 0 var(--uc-s7) !important}body.single-documents .nxt-post-next-prev .nxt-row{display: contents}body.single-documents .nxt-post-next-prev .nxt-col,body.single-documents .nxt-post-next-prev .nxt-col-sm-6{width: 100%;max-width: none;padding: 0 !important;flex: none}body.single-documents .nxt-post-next-prev .prev,body.single-documents .nxt-post-next-prev .next{display: flex !important;align-items: center;min-height: 0 !important;height: 100%;padding: 20px 22px !important;font-size: .9375rem !important;line-height: 1.5rem;font-weight: 500;text-transform: none !important;color: var(--uc-tx-dim);text-decoration: none;background: var(--uc-surface);border: 1px solid var(--uc-hairline);border-radius: var(--uc-r-card);transition: border-color .24s var(--uc-ease),background .24s var(--uc-ease),color .24s var(--uc-ease)}body.single-documents .nxt-post-next-prev .next{text-align: right;justify-content: flex-end}body.single-documents .nxt-post-next-prev .prev:hover,body.single-documents .nxt-post-next-prev .next:hover{color: var(--uc-tx);border-color: var(--uc-violet-edge);background: var(--uc-surface-2)}@media (max-width: 900px){body.post-type-archive-documents .nxt-blog-post-listing .nxt-row,body.tax-docs .nxt-blog-post-listing .nxt-row{grid-template-columns: 1fr}body.post-type-archive-documents .archive-header-content .archive-post-title,body.tax-docs .archive-header-content .archive-post-title{font-size: 2.25rem;line-height: 2.75rem}body.single-documents .single-post-title h1,body.single-documents .nxt-single-post-title h1{font-size: 2rem;line-height: 2.5rem}body.single-documents .nxt-post-next-prev{grid-template-columns: 1fr}body.single-documents .nxt-post-next-prev .next{text-align: left;justify-content: flex-start}}@media (max-width: 560px){body.post-type-archive-documents .archive-page-header,body.tax-docs .archive-page-header{padding: var(--uc-s6) 0 var(--uc-s5)}body.post-type-archive-documents .archive-header-content .archive-post-title,body.tax-docs .archive-header-content .archive-post-title{font-size: 1.875rem;line-height: 2.375rem}body.post-type-archive-documents .nxt-post-title,body.tax-docs .nxt-post-title{padding: 18px 20px 20px}body.single-documents .single-post-title h1,body.single-documents .nxt-single-post-title h1{font-size: 1.75rem;line-height: 2.25rem}body.single-documents .nxt-single-post-content p,body.single-documents .nxt-single-post-content li{font-size: 1rem;line-height: 1.75rem}}body.post-type-archive-documents .archive-page-header .nxt-container,body.tax-docs .archive-page-header .nxt-container,body.post-type-archive-documents .nxt-blog-post-listing,body.tax-docs .nxt-blog-post-listing{max-width: 1200px;margin-left: auto;margin-right: auto;padding-left: 40px;padding-right: 40px}body.post-type-archive-documents .nxt-paginate-nav,body.tax-docs .nxt-paginate-nav{max-width: 1200px;margin: 0 auto;padding: var(--uc-s2) 40px var(--uc-s7)}body.single-documents .nxt-blog-single-post{max-width: 900px;padding: calc(88px + var(--uc-s6)) 40px var(--uc-s6)}@media (max-width: 560px){body.post-type-archive-documents .archive-page-header .nxt-container,body.tax-docs .archive-page-header .nxt-container,body.post-type-archive-documents .nxt-blog-post-listing,body.tax-docs .nxt-blog-post-listing{padding-left: 20px;padding-right: 20px}body.post-type-archive-documents .nxt-paginate-nav,body.tax-docs .nxt-paginate-nav{padding: var(--uc-s2) 20px var(--uc-s6)}body.single-documents .nxt-blog-single-post{padding-left: 20px;padding-right: 20px;padding-top: calc(88px + var(--uc-s4))}body.post-type-archive-documents .archive-page-header,body.tax-docs .archive-page-header{padding-top: calc(88px + var(--uc-s4))}}/*@@DOCS-TPL-END@@*/
/*@@DOCS-HUB-START@@*/.dcs-start,.dcs-cats,.dcs-ref,.dcs-help,.dcs-panel{margin-top: var(--uc-s6)}.uc-container:has(> .dcs-start) > .sub,.uc-container:has(> .dcs-cats) > .sub,.uc-container:has(> .dcs-ref) > .sub,.uc-container:has(> .dcs-help) > .sub,.uc-container:has(> .dcs-panel) > .sub{margin: 0;max-width: 720px}.dcs-cat{padding: var(--uc-s6)}.dcs-panel{padding: var(--uc-s3) var(--uc-s5)}.dcs-hero{text-align: center}body .dcs-hero .pill-title{margin: 0 0 18px}body .dcs-hero .sub{max-width: min(660px,38em) !important;margin: 0 auto var(--uc-s6);text-wrap: balance;text-align: center}.dcs-search{display: flex;gap: 10px;max-width: 620px;margin: 0 auto 26px}.dcs-search-field{position: relative;flex: 1 1 auto;display: flex;align-items: center}.dcs-search-field svg{position: absolute;left: 18px;width: 18px;height: 18px;color: rgba(255,255,255,.42);pointer-events: none}.dcs-search input[type="search"]{width: 100%;padding: 15px 18px 15px 48px;font-family: var(--uc-font);font-size: 1rem;line-height: 1.5rem;color: var(--uc-tx);background: var(--uc-surface-2);border: 1px solid var(--uc-hairline);border-radius: var(--uc-r-btn);-webkit-appearance: none;appearance: none}.dcs-search input[type="search"]::placeholder{color: rgba(255,255,255,.42)}.dcs-search input[type="search"]:focus{outline: none;border-color: var(--uc-violet-edge);background: rgba(255,255,255,.06)}.dcs-search button{flex: 0 0 auto;padding: 15px 26px;cursor: pointer;font-family: var(--uc-font);font-size: .9375rem;line-height: 1.375rem;font-weight: 600;color: #fff;background: var(--uc-purple);border: 0;border-radius: var(--uc-r-btn);transition: background .24s var(--uc-ease)}.dcs-search button:hover{background: var(--uc-purple-dark)}.dcs-chips{display: flex;flex-wrap: wrap;gap: 10px;justify-content: center}.dcs-start{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: var(--uc-s5)}body .dcs-cat h3,body .dcs-step h3{font-size: 1.125rem;line-height: 1.5rem;font-weight: 600;letter-spacing: -.02em}.dcs-step{display: flex;flex-direction: column;gap: 12px}.dcs-step-n{display: inline-flex;align-items: center;justify-content: center;width: 38px;height: 38px;flex: 0 0 auto;font-size: .9375rem;line-height: 1.375rem;font-weight: 700;color: var(--uc-lemon);background: rgba(227,237,93,.09);border: 1px solid rgba(227,237,93,.22);border-radius: 999px;font-variant-numeric: tabular-nums}body .dcs-step h3{margin: 0}.dcs-step a.dcs-step-ttl{color: var(--uc-tx);text-decoration: none}.dcs-step a.dcs-step-ttl:hover{color: var(--uc-lemon)}.dcs-cats{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: var(--uc-s5)}.dcs-cat.is-feature{grid-column: 1 / -1}.dcs-cat{display: flex;flex-direction: column;gap: 14px}.dcs-cat-top{display: flex;align-items: baseline;gap: 12px;flex-wrap: wrap}body .dcs-cat h3{margin: 0}.dcs-cat-count{flex: 0 0 auto;padding: 4px 12px;font-size: .75rem;line-height: 1.125rem;font-weight: 700;letter-spacing: .04em;text-transform: uppercase;color: var(--uc-tx-mut);background: var(--uc-surface-2);border: 1px solid var(--uc-hairline);border-radius: 999px;font-variant-numeric: tabular-nums}.dcs-cat p{margin: 0;color: var(--uc-tx-dim)}.dcs-subs{display: flex;flex-wrap: wrap;gap: 8px;margin: 0;padding: 0;list-style: none}.dcs-subs a{display: inline-flex;align-items: center;gap: 7px;padding: 7px 13px;text-decoration: none;font-size: .8125rem;line-height: 1.25rem;font-weight: 500;color: var(--uc-tx-dim);background: var(--uc-surface);border: 1px solid var(--uc-hairline-soft);border-radius: 999px;transition: color .24s var(--uc-ease),border-color .24s var(--uc-ease)}.dcs-subs a:hover{color: var(--uc-tx);border-color: var(--uc-violet-edge)}.dcs-subs .n{color: var(--uc-tx-faint);font-variant-numeric: tabular-nums}.dcs-cat-foot{margin-top: auto;padding-top: 4px}.dcs-ref{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: var(--uc-s4)}.dcs-ref-item{display: flex;align-items: flex-start;gap: 14px;padding: 20px 22px;text-decoration: none;background: var(--uc-surface);border: 1px solid var(--uc-hairline);border-radius: var(--uc-r-card);transition: border-color .24s var(--uc-ease),background .24s var(--uc-ease)}.dcs-ref-item:hover{border-color: var(--uc-violet-edge);background: var(--uc-surface-2)}.dcs-ref-item svg{flex: 0 0 auto;width: 18px;height: 18px;margin-top: 3px;color: var(--uc-lemon)}.dcs-ref-item span{font-size: 1rem;line-height: 1.5rem;font-weight: 500;color: var(--uc-tx)}.dcs-recent{margin: 0;padding: 0;list-style: none}.dcs-recent li{border-top: 1px solid var(--uc-hairline-soft)}.dcs-recent li:first-child{border-top: 0}.dcs-recent a{display: flex;align-items: baseline;gap: var(--uc-s4);padding: 16px 4px;text-decoration: none;transition: background .2s var(--uc-ease)}.dcs-recent a:hover{background: rgba(255,255,255,.02)}.dcs-recent .t{flex: 1 1 auto;font-size: 1rem;line-height: 1.5rem;color: var(--uc-tx)}.dcs-recent a:hover .t{color: var(--uc-lemon)}.dcs-recent .d{flex: 0 0 auto;font-size: .8125rem;line-height: 1.25rem;color: var(--uc-tx-faint);font-variant-numeric: tabular-nums}.dcs-recent .c{flex: 0 0 auto;font-size: .75rem;line-height: 1.125rem;color: var(--uc-tx-mut)}.dcs-help{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: var(--uc-s4)}.dcs-help-card{display: flex;flex-direction: column;gap: 8px;padding: 24px 22px;text-decoration: none;background: var(--uc-surface);border: 1px solid var(--uc-hairline);border-radius: var(--uc-r-card);transition: border-color .24s var(--uc-ease),background .24s var(--uc-ease)}.dcs-help-card:hover{border-color: var(--uc-violet-edge);background: var(--uc-surface-2)}.dcs-help-card svg{width: 22px;height: 22px;color: var(--uc-lemon);margin-bottom: 4px}.dcs-help-card b{font-size: 1rem;line-height: 1.5rem;font-weight: 600;color: var(--uc-tx)}.dcs-help-card span{font-size: .8125rem;line-height: 1.25rem;color: var(--uc-tx-mut)}@media (max-width: 900px){.dcs-start{grid-template-columns: 1fr;gap: var(--uc-s4)}.dcs-cats{grid-template-columns: 1fr}.dcs-ref{grid-template-columns: 1fr}.dcs-help{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (max-width: 560px){.dcs-search{flex-direction: column}.dcs-search button{width: 100%}.dcs-help{grid-template-columns: 1fr}body .dcs-hero .sub{font-size: 1rem !important;line-height: 1.625rem !important}.dcs-cat{padding: var(--uc-s5)}.dcs-panel{padding: var(--uc-s2) var(--uc-s4)}.dcs-start,.dcs-cats,.dcs-ref,.dcs-help,.dcs-panel{margin-top: var(--uc-s5)}.dcs-recent .d,.dcs-recent .c{display: none}}/*@@DOCS-HUB-END@@*/
/*@@PAGINATION-ICON-START@@*/
/* Protuno's loop_pagination() emits WordPress's default next/prev label, the
   U+203A single angle quote. Its UTF-8 bytes are being read as Latin-1, so the
   button renders the mojibake "›" instead of a chevron — that is the "icon not
   visible" on the blog listing. The text cannot be changed from CSS, so it is
   zeroed out and a real chevron is drawn with a masked SVG, which inherits
   currentColor and therefore keeps the existing hover and current-page colours.
   Applies to the blog, category and author listings in one place. */
.uich-loop-pagination .next.page-numbers,
.uich-loop-pagination .prev.page-numbers{font-size:0 !important;line-height:0 !important;gap:0 !important}
.uich-loop-pagination .next.page-numbers::after,
.uich-loop-pagination .prev.page-numbers::before{content:"";display:block;width:17px;height:17px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/17px 17px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/17px 17px no-repeat}
.uich-loop-pagination .prev.page-numbers::before{transform:rotate(180deg)}
/*@@PAGINATION-ICON-END@@*/

/* ===== Avatar placeholder (2026-08-05) =====
   Gravatar is requested with d=blank (rewritten in the templates via
   |replace('d=mm','d=blank')), so a user WITHOUT a gravatar gets a transparent
   image instead of the mystery-man. This paints the site's own person glyph
   behind every avatar, so it shows through only when there is no real one -
   no JS, which matters because Protuno drops widget JS on an author archive
   that has no posts (G-7). The glyph is the lucide user icon already used on
   the site, copied verbatim. Scales with the avatar: 26px cards, 88px boxes. */
body .author-avatar,
body .blog-author img,
body .ab-av {
  background-color: rgba(255, 255, 255, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
}

/* ===== .blog-grid responsive REPAIR (2026-08-05) =====
   The 3-column base rule for .blog-grid is authored at ~106,180 in this file, about
   85 KB AFTER its own @media overrides (~21,200 and ~21,430). Same selector, same
   specificity (0,1,0), no !important anywhere - so the unconditional base simply wins
   on source order and EVERY listing stayed 3-up at every width. Measured on
   /author/uichemy/ at 390px: three cards of 101px each, and the card's author row
   overflowing its 55px container.
   Re-stating the two queries here, after the base, restores the intended behaviour.
   Desktop is untouched - neither query matches above 1024px. Affects /blog,
   /category/* and /author/*. Delete this block only after the base rule is moved
   above its overrides. */
/* P-9 (2026-08-05): `body ` + !important added. Without them this repair won on the archives
   (which load globals only) but LOST on /blog/, which also ships <style id="ucwr-blog"> AFTER
   globals with @media (max-width:860px){.blog-grid{grid-template-columns:1fr !important}} --
   !important beats a non-important rule regardless of order, so /blog/ sat at 1 column at 768
   while /category/* and /author/* were 2. The 1024/640 ladder here is canonical.
   UPDATE 2026-08-05: the duplicate `.blog-grid` declaration has now been REMOVED from the 860px
   block in ucwr-blog (page 296 Page Custom Code head, all 7 widget copies), so this is the only
   ladder left. The !important below is therefore no longer fighting anything on /blog/ -- it is
   kept because it also has to beat the widget-scoped copies on 296/301. The 860px block still
   exists and still carries its `.blog-featured` / `.blog-cover` rules; only the .blog-grid line
   was taken out. */
@media (max-width: 1024px) {
  body .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  body .blog-grid { grid-template-columns: 1fr !important; }
}

/*@@FOOT-GRID-TIERS@@ — promoted out of the ucwr-foot-2col widget JS injector, 2026-08-05.
   The footer's stock widget rule is `.elementor-element-535930a .foot-grid{grid-template-columns:repeat(6,auto)}`,
   left over from a 6-child footer. There are now 3 children (brand / Features / Resources), so three
   phantom 0px tracks remain and justify-content:space-between spreads across all six — measured
   `240px 226.93px 248.734px 0px 0px 0px`, bunching the columns left with dead space on the right.
   These rules fixed that, but they lived in a head-injecting widget <style>, and Proton suppresses ALL
   widget JS when there is no post context (see content_allows_raw_code() -> get_the_ID()). So on a 404
   the injector never ran and the footer fell back to the broken 6-track layout. CSS belongs in globals
   anyway (01-DESIGN-RULES: never inject CSS from JS). Identical to what the injector emits, so pages
   where the JS does run compute exactly the same values. */
@media (min-width:1200px){
body .foot-grid{grid-template-columns:minmax(220px,1fr) max-content max-content max-content!important;justify-content:space-between!important;column-gap:48px!important}
}
@media (min-width:901px) and (max-width:1199px){
body .foot-grid{grid-template-columns:repeat(3,max-content)!important;justify-content:space-between!important;column-gap:40px!important;row-gap:44px!important}
body .foot-grid>.foot-brand{grid-column-start:1!important;grid-column-end:-1!important}
}
@media (max-width:560px){
body .foot-grid{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:22px!important;row-gap:0!important}
body .foot-grid>.foot-brand{grid-column-start:1!important;grid-column-end:-1!important;margin-bottom:24px!important}
body .foot-grid>.foot-legal{grid-column-start:1!important;grid-column-end:-1!important;column-count:2!important;column-gap:22px!important}
body .foot-grid>.foot-legal h4{column-span:all!important}
body .foot-grid>.foot-legal a{break-inside:avoid!important}
body .foot-grid .foot-col a{white-space:normal!important;width:auto!important;max-width:100%!important;flex-wrap:wrap!important;row-gap:2px!important;overflow-wrap:anywhere!important}
body .foot-grid .foot-col a>span{white-space:normal!important;max-width:100%!important}
}
/* TABLET BAND 561-900px (added 2026-08-05, after Dhaval reported the footer breaking on /blog/).
   Two separate defects, one rule.

   1. NOTHING SET `display` IN THIS BAND. Globals only declares it at <=560 (block, multicol) and
      the widget CSS declares `display:grid` unconditionally at (0,2,1). Any page that lands a
      competing display on .foot-grid therefore wins here and the grid silently stops being a grid
      - measured on /blog/ at 768: display computed `block`, all three children full width at 688px
      on three rows, while / computed `grid` with 328px 328px from the very same stylesheets.
      Forcing display:grid in the band makes the tier self-contained instead of depending on what
      else happens to be on the page.

   2. THREE CHILDREN IN A TWO-COLUMN GRID. The <=900 rule is `1fr 1fr`, but the footer has THREE
      children (brand / Features / Resources), so Resources wrapped onto a second row on its own
      with dead space beside it - measured at 900px: brand and Features on row 1, Resources alone
      at left 40 on row 2. Spanning the brand across both columns gives the intended shape:
      brand full width, then Features | Resources side by side. This mirrors what the <=560 tier
      already does with `column-span:all` on .foot-brand. */
@media (min-width:561px) and (max-width:900px){
body .foot-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:32px!important}
body .foot-grid>.foot-brand{grid-column:1 / -1}
body .foot-grid>.foot-legal{grid-column:1 / -1;column-count:2;column-gap:32px}
body .foot-grid>.foot-legal h4{column-span:all}
body .foot-grid>.foot-legal a{break-inside:avoid}
}
/*@@FOOT-GRID-TIERS-END@@*/

/*@@DOCS-UI@@ - G-13. Promoted verbatim out of the `ucwr-docs-ui` widget-JS injector, 2026-08-05;
   that injector is now stubbed. Why it had to move: Protuno emits NO widget JS on a page with no
   post context (G-7), so this CSS vanished on every 404 and empty search while the markup and
   globals still shipped - measured `ucwr-docs-ui` count 3 on /help/introductory-guide/ against 0
   on a 404 and 0 on ?s=zzzznomatch. Two things went silently with it: the `.sr-more` underline
   affordance (its position:relative and whole ::after bar live here), and the family-wide
   `transform:none` kill switch - so `.mcp-link`'s icon slide came BACK on exactly those pages,
   because this block is the only thing suppressing it.

   Derived from the live raw_js server-side rather than retyped, so it is byte-identical to what
   the injector emitted. The transform/transition declarations that carry NO !important are
   deliberate: !important outranks the transition origin and would freeze the underline at
   scaleX(0) while still reporting a running transition. Do not "tidy" those. */
body .uich-loop-pagination .next.page-numbers,body .uich-loop-pagination .prev.page-numbers{width:36px!important;min-width:36px!important;padding:0!important;flex:0 0 auto!important}body .uich-loop-pagination a.page-numbers:hover{color:var(--uc-lemon,#E3ED5D)!important;border-color:var(--uc-violet-edge)!important}body .rel-card .rel-title{color:inherit!important;text-decoration:none!important}body .rel-card .read{position:relative!important;display:inline-flex!important;width:-moz-fit-content!important;width:fit-content!important;max-width:100%!important;margin-top:auto!important;text-decoration:none!important}body .rel-card[rel="next"] .read{margin-left:auto!important}body .rel-card .read::after{content:""!important;position:absolute!important;left:0!important;right:auto!important;bottom:-4px!important;width:100%!important;height:2px!important;border-radius:2px!important;background:var(--uc-lemon,#E3ED5D)!important;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--uc-ease,ease)}body .rel-card .read:hover::after,body .rel-card .read:focus-visible::after{transform:scaleX(1)}@media (prefers-reduced-motion: reduce){body .rel-card .read::after{transition:none}}body .dcs-help-card svg{width:46px!important;height:46px!important;padding:11px!important;box-sizing:border-box!important;flex:0 0 auto!important;align-self:flex-start!important;border-radius:12px!important;background:rgba(124,77,255,.14)!important;border:1px solid rgba(124,77,255,.28)!important;color:#c8b8ff!important;margin-bottom:15px!important;transition:background .24s var(--uc-ease,ease),border-color .24s var(--uc-ease,ease),color .24s var(--uc-ease,ease)}body .dcs-help-card:hover svg{background:rgba(227,237,93,.12)!important;border-color:rgba(227,237,93,.55)!important;color:var(--uc-lemon,#E3ED5D)!important}body .sr-more{position:relative!important;text-decoration:none!important}body .sr-more::after{content:""!important;position:absolute!important;left:0!important;right:auto!important;bottom:-4px!important;width:100%!important;height:2px!important;border-radius:2px!important;background:var(--uc-lemon,#E3ED5D)!important;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--uc-ease,ease)}body .sr-more:hover::after{transform:scaleX(1)}body .sr-more svg{transition:transform .24s var(--uc-ease,ease)}body .sr-more:hover svg,body .sr-more:focus-visible svg,body .mcp-link:hover svg,body .mcp-link:focus-visible svg,body .rel-card .read:hover svg{transform:none!important}body.tax-docs a.post-read-more:hover::after,body.post-type-archive-documents a.post-read-more:hover::after{transform:none!important}@media (prefers-reduced-motion: reduce){body .sr-more::after{transition:none}body .sr-more svg{transition:none}}
/*@@DOCS-UI-END@@*/

/*@@TRIO-BASE@@ - G-1. The .trio-* base rules, promoted from css/home.css 2026-08-05.
   Globals previously carried ONLY the <=900px override and the hover tints, so on a page that did
   not happen to own the component's widget CSS, .trio-grid computed display:block and .trio-ic's
   SVG had no width cap - measured 1118px wide, pushing the card to 1207px tall on /book-demo-new/.

   SAFETY, and why this cannot move an existing page: every selector below is a BARE class, (0,1,0)
   or (0,1,1), with no `body ` prefix and no !important. The four pages that use the component today
   (Home, Figma-to-Elementor, Figma-to-Gutenberg, Figma-to-Bricks) each ship their own
   `.elementor-element-<id> .trio-grid{...}` = (0,2,1), printed in the BODY, so they outrank these on
   both specificity and order and keep computing exactly what they computed before. These rules only
   take effect where nothing else defines them, which is the whole point.

   Deliberately omitted: font-size and line-height on `.trio-card p`, and anything on `.trio-card h3`
   beyond margin - globals already sets that typography with !important further up (1rem / 1.5rem and
   the h3 level), so restating it here would be duplicate authority on a value that is already owned. */
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.trio-card{padding:26px 24px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.trio-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(124,77,255,.14);border:1px solid rgba(124,77,255,.28);color:#c8b8ff;margin-bottom:16px}
.trio-ic svg{width:22px;height:22px}
.trio-card h3{margin:0 0 8px}
.trio-card p{margin:0;color:rgba(255,255,255,.58)}
/* Mobile: centre the trio cards, icon and text together (Dhaval, 2026-08-05).
   At <=640px the grid is already one full-width column, and the site's other icon-tile card
   (.sup-card) centres its icon AND its copy at every width. The trio cards were the only
   icon-tile group still left-aligned on a phone, so the two sections disagreed. Centring the
   icon alone was considered and rejected: a centred tile above left-aligned text reads as a
   mistake rather than a choice.
   Chose 640px, not the 900px where .trio-grid collapses to one column - at 900 the card is still
   wide enough that centred body copy would hurt the measure. No !important needed: the widget
   CSS sets padding/radius/margin-bottom on these, never text-align or the inline margins. */
@media (max-width:640px){
body .trio-card{text-align:center}
body .trio-ic{margin-left:auto;margin-right:auto}
}
/*@@TRIO-BASE-END@@*/

/*@@DOC-TOC@@ — doc single sidebar table of contents. See 06-DESIGN-ISSUES-LOG.md P-6.
   Promoted out of the ucwr-doc-toc-v2 JS injector on 2026-08-05, because CSS belongs here and
   not in a JS-injected <style> (01-DESIGN-RULES). The markup is still built at runtime from the
   article's own h2/h3 — only the styling moved.

   The rail itself is the shared .article-toc component (the blog post's TOC). These rules are the
   doc-specific additions on top of it, and every one is scoped to `body .doc-side` so the blog
   post can never be affected.

   NO LINE CLAMP ON PURPOSE (Dhaval, 2026-08-05). An earlier version clamped entries to two lines
   with an ellipsis; doc headings are full sentences, so that cut real words. Entries now wrap in
   full and the rail simply grows taller, which is the agreed trade. That is also why there is no
   max-height on the anchor: nothing about an entry may clip its own text. */
body .doc-grid.ucwr-no-toc{grid-template-columns:minmax(0,1fr)!important}
body .doc-grid.ucwr-no-toc .doc-side{display:none!important}
body .doc-side .article-toc-list a{overflow-wrap:anywhere}
/* Anchor offset for the fixed header. The TOC's active-entry threshold is derived from this
   value at runtime, so it must exist as real CSS: it used to come from the footer template's
   JS-injected #ucwr-doc-toc-css, which is being retired. */
body .doc-body h2,body .doc-body h3{scroll-margin-top:124px}
body .doc-side .article-toc-list a.is-sub{padding-left:calc(var(--uc-s4) + 12px)!important;font-size:13px!important}
/* A very long TOC stays reachable while the rail is sticky, but the scrollbar is never painted —
   the visible bar on the old boxed sidebar is exactly what Dhaval asked to remove. */
body .doc-side.article-toc{max-height:calc(100vh - 132px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
body .doc-side.article-toc::-webkit-scrollbar{width:0;height:0;display:none}
/* Globals hides .article-toc under 1080px for the blog. Doc pages had a sidebar at every width
   before this change, so keep it: stacked above the article, not sticky, never clipped. */
@media (max-width:1080px){
body .doc-side.article-toc{display:block!important;position:static!important;max-height:none!important;overflow:visible!important}
}
/*@@DOC-TOC-END@@*/

/*@@MCP-LINK-HOVER@@ — the one rule worth keeping out of the footer template's ucwr-doc-toc
   block, promoted here 2026-08-05 when that block was deleted as dead. Everything else it
   carried targeted markup that no longer exists (.doc-nav*, .doc-side__*, .rel-card, .sr-more —
   all measured at 0 occurrences site-wide).

   This one is NOT a no-op: most .mcp-link buttons already rest lemon, but the hero's "Download
   the plugin" (.mcp-link.btn-wp-dl) rests WHITE by design, so this is what turns it lemon on
   hover. Deliberately no transition property — the original paired that only with .rel-card and
   .doc-nav__label, both now gone, so .mcp-link never had one and adding it would change
   behaviour. */
body .mcp-link:hover{color:var(--uc-lemon,#E3ED5D)!important}
/*@@MCP-LINK-HOVER-END@@*/
/*@@BLOG-COVER-FIT@@ — 2026-08-05. Featured images are authored at the 1.91:1 OG-card
   ratio (measured 2000x1046 and 1024x536 on every post). `.blog-cover` was
   aspect-ratio:16/10 (1.600), so object-fit:cover discarded 8.12% of the artwork off
   EACH side — enough to clip the category badge and the first letter of the title that
   are baked into the banner. Match the box to the artwork (1200/628, the same ratio the
   docs template already uses for a featured thumbnail) and switch to `contain`, so an
   off-ratio image letterboxes into the frame's existing violet gradient instead of
   being cut. The hover scale(1.04) is deliberately KEPT (Dhaval, 2026-08-05): the brief was
   the RESTING state only, so a hover zoom that crops is wanted behaviour, not a defect.

   Scoped to `.blog-card` deliberately: the hero card is `.uc-card.blog-featured` and
   carries no `.blog-card`, so its intentional `aspect-ratio:auto;height:100%` is not
   touched by these rules.

   `body ` + !important is load-bearing, not decoration: /blog/ ships its own
   `<style id="ucwr-blog">` page CSS that restates `.blog-cover` and is printed AFTER
   #protuno-globals, so a plain (0,1,0) rule loses the tie on that page. Reaches /blog/,
   the category archive and the author archive, the three listings built on this card. (Do not write a glob path with a star-slash in a CSS comment: it closes the comment early and the parser then eats the rule below it. That is exactly what happened on the first push of this block.) */
body .blog-card .blog-cover{aspect-ratio:1200/628!important}
body .blog-card .blog-cover img{object-fit:contain!important}
/* No hover rule here on purpose: the base `.blog-card:hover .blog-cover img{transform:scale(1.04)}`
   is left to do its job. */
/*@@BLOG-COVER-FIT-END@@*/
/*@@LOOP-SKELETON-DARK@@ — 2026-08-05. Protuno's loop skeleton (plugin stylesheet
   `uich-dd-css`) is built for a light theme: card #f2f3f5, bars rgba(0,0,0,.11), images
   lifted with brightness(1.82) and a rgba(255,255,255,.6) shimmer. On this all-dark
   site every pagination fetch flashed white cards. Repaint it in the dark system's own
   tokens, including the card radius, which was 10px against our 16px.

   The plugin's rules already carry !important and `uich-dd-css` is a <link> printed
   BEFORE #protuno-globals, so order alone would win — every selector is `body `-prefixed
   anyway so it wins on specificity outright and stays correct if the enqueue order ever
   changes. Inert at rest: `.uich-loop-skeleton` exists only on the cloned placeholders
   while a page/batch is being fetched. */
body .uich-loop-skeleton{background:var(--uc-surface)!important;border:1px solid var(--uc-hairline)!important;border-radius:var(--uc-r-card)!important}
body .uich-loop-skeleton p,body .uich-loop-skeleton h1,body .uich-loop-skeleton h2,body .uich-loop-skeleton h3,body .uich-loop-skeleton h4,body .uich-loop-skeleton h5,body .uich-loop-skeleton h6,body .uich-loop-skeleton span:not(:empty),body .uich-loop-skeleton li,body .uich-loop-skeleton time,body .uich-loop-skeleton strong,body .uich-loop-skeleton em{background-color:rgba(255,255,255,.07)!important}
body .uich-loop-skeleton img,body .uich-loop-skeleton picture>img{filter:grayscale(1) contrast(0) brightness(.28)!important}
body .uich-loop-skeleton svg,body .uich-loop-skeleton video,body .uich-loop-skeleton iframe{background-color:rgba(255,255,255,.05)!important}
body .uich-loop-skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)!important}
/*@@LOOP-SKELETON-DARK-END@@*/