/* ---------- Corporate hub (/corporate). Classes start with chub-. Motion in src/js/corporate-hub.js.
   The hero flow is an illustration of the integrated system: three ways to be found (Google Ads, SEO,
   GEO) feed one landing page on your own domain, which turns visits into tracked enquiries. Its screens
   (search tiles, browser) stay light in both themes, like screenshots. Animations use transform and
   opacity only, run only while the stage is on screen (.is-run), and are absent without html.motion. */

/* Hero heading: three short lines, the last one in the accent colour. */
.chub-hero .display span, .chub-hero .display em { display: block; }
.chub-hero .display em { font-style: normal; color: #b23c0a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chub-hero .display em { color: var(--sun); } }
:root[data-theme="dark"] .chub-hero .display em { color: var(--sun); }

/* ---------- Hero flow stage */
.chub-vis { display: grid; gap: 10px; min-width: 0; }
.chub-flow { --lane: 48px; --lane-out: 34px; --c-ads: #ffb800; --c-seo: #1fb5aa; --c-ai: #9b6cf6;
  position: relative; display: grid; padding: 26px clamp(14px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px); border-radius: 24px; isolation: isolate;
  background: radial-gradient(80% 55% at 50% 0%, rgba(212, 166, 72, 0.16), transparent 72%), var(--panel);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(22, 24, 29, 0.16); }
:root[data-theme="light"] .chub-flow { box-shadow: 0 0 0 1px rgba(140, 100, 30, 0.12), 0 24px 60px rgba(110, 80, 10, 0.16); }

.chub-tier { position: relative; min-width: 0; }
.chub-lbl { position: absolute; z-index: 2; top: -11px; left: 14px; display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 10px 0 3px;
  border-radius: 9999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 10.5px/1 var(--font-body); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.chub-lbl b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font: 700 8.5px/1 var(--font-body); letter-spacing: 0; }

/* Tier 1: three ways to be found. */
.chub-tier--found { padding: 20px 12px 12px; border-radius: 18px; border: 1.5px dashed var(--line-2); }
.chub-src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chub-src__c { position: relative; display: grid; gap: 5px; align-content: start; min-width: 0; padding: 10px 11px 11px; border-radius: 12px; background: #fff; color: #1f1f1f;
  box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08), 0 6px 16px rgba(22, 24, 29, 0.1); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.chub-src__c--ads { --c: var(--c-ads); }
.chub-src__c--seo { --c: var(--c-seo); }
.chub-src__c--ai { --c: var(--c-ai); }
.chub-src__c::after { content: ""; position: absolute; inset: -4px; border-radius: 15px; box-shadow: 0 0 0 2px var(--c), 0 0 18px var(--c); opacity: 0; pointer-events: none; }
.chub-src__tag { justify-self: start; margin-bottom: 2px; padding: 4px 6px; border-radius: 6px; font: 700 9.5px/1 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.chub-src__c--ads .chub-src__tag { background: #f3e8cf; color: #6b4d00; }
.chub-src__c--seo .chub-src__tag { background: #dcf3f0; color: #065c57; }
.chub-src__c--ai .chub-src__tag { background: #eee7fd; color: #4b2a8a; }
.chub-src__meta { display: flex; align-items: center; gap: 5px; font: 700 10.5px/1.2 Arial, sans-serif; color: #1f1f1f; }
.chub-src__rank { padding: 2px 5px; border-radius: 4px; background: #16181d; color: #fff; font: 700 10px/1 var(--font-body); font-style: normal; }
.chub-spark { width: 12px; height: 12px; flex: none; fill: #7c4fe0; }
.chub-src__c b { font: 400 13px/1.25 Arial, sans-serif; color: #1a0dab; }
.chub-src__c--ai b { color: #1f1f1f; }
.chub-src__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 10.5px/1.25 Arial, sans-serif; color: #4d5156; }
.chub-src__cite { justify-self: start; padding: 3px 7px; border-radius: 9999px; background: #e8f0fe; color: #174ea6; font-weight: 700; }

/* Lanes: dashed paths that carry a dot from each source to the page, then from the page to the enquiry.
   Each dot lives in a full-width strip, so translating by (50 - x)% lands it on the middle of the page. */
.chub-lanes { position: relative; height: var(--lane); }
.chub-lanes svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chub-lanes path { fill: none; stroke: var(--line-2); stroke-width: 1.6; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.chub-lanes s { position: absolute; left: 0; top: -5px; width: 100%; height: 10px; opacity: 0; text-decoration: none; }
.chub-lanes s::before { content: ""; position: absolute; top: 0; left: calc(var(--x) * 1%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 0 14px 2px var(--c); }
.chub-lanes s:nth-of-type(1) { --c: var(--c-ads); }
.chub-lanes s:nth-of-type(2) { --c: var(--c-seo); }
.chub-lanes s:nth-of-type(3) { --c: var(--c-ai); }
.chub-lanes--out { height: var(--lane-out); }
.chub-lanes--out s { --c: #2fbf62 !important; }

/* Tier 2: the page on your own domain. */
.chub-site__frame { border-radius: 14px; overflow: hidden; background: #fff; color: #16181d; box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08), 0 14px 34px rgba(22, 24, 29, 0.16); }
.chub-site__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: #eef0f3; }
.chub-site__bar::before { content: ""; width: 38px; height: 8px; background: radial-gradient(circle 4px at 4px 4px, #d5d8de 98%, transparent) 0 0 / 14px 8px repeat-x; }
.chub-site__url { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 9999px; background: #fff; box-shadow: 0 0 0 1.5px #d4a648; font: 600 11.5px/1 var(--font-body); color: #3c4048; white-space: nowrap; }
.chub-site__url svg { width: 10px; height: 10px; fill: #0d7f37; }
.chub-site__dom { justify-self: end; padding: 4px 6px; border-radius: 6px; background: #fbf0d6; color: #6b4a12; font: 700 9px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.chub-site__page { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 18px 18px 20px; background: linear-gradient(140deg, #f8f2e4, #ead6a2); }
.chub-site__copy { display: grid; gap: 7px; justify-items: start; min-width: 0; }
.chub-site__copy b { font: 700 clamp(15px, 1.45vw, 19px)/1.14 var(--font-body); letter-spacing: -0.025em; color: #16181d; }
.chub-site__copy span { font: 500 11.5px/1.4 var(--font-body); color: #4b505a; }
.chub-site__cta { margin-top: 4px; padding: 8px 13px; border-radius: 9999px; background: #16181d; color: #fff; font: 700 11.5px/1 var(--font-body); font-style: normal; box-shadow: 0 6px 14px rgba(22, 24, 29, 0.22); }
.chub-car { width: 100%; max-width: 190px; height: auto; justify-self: end; }
@media (max-width: 860px) { .chub-vis { width: 100%; max-width: 580px; justify-self: center; } }
.chub-car__body { fill: #16181d; }
.chub-car__win { fill: #9fb3c8; }
.chub-car__wheel { fill: #2b3038; stroke: #fff; stroke-width: 3; }
.chub-car__hub { fill: #d5d8de; }
.chub-site__tags { position: absolute; z-index: 2; bottom: -11px; right: 14px; display: flex; gap: 5px; }
.chub-site__tags span { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 9999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 10.5px/1 var(--font-body); color: var(--ink-2); white-space: nowrap; }

/* Tier 3: the enquiry, with its source. */
.chub-lead { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 20px 14px 14px; border-radius: 16px; background: #16181d; color: #fff;
  box-shadow: 0 14px 34px rgba(22, 24, 29, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .chub-lead { background: #0e0f12; box-shadow: inset 0 0 0 1px rgba(212, 166, 72, 0.4), 0 14px 34px rgba(0, 0, 0, 0.35); }
.chub-lead::after { content: ""; position: absolute; inset: -4px; border-radius: 20px; box-shadow: 0 0 0 2px #2fbf62, 0 0 22px rgba(47, 191, 98, 0.5); opacity: 0; pointer-events: none; }
.chub-lead__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #1f7a3d; color: #fff; font-size: 20px; }
.chub-lead__ic .psg-ic { stroke-width: 2.6; }
.chub-lead__t { display: grid; gap: 3px; min-width: 0; }
.chub-lead__t b { font: 700 14.5px/1.2 var(--font-body); color: #e9cf8a; letter-spacing: -0.01em; }
.chub-lead__t span { font: 500 12.5px/1.35 var(--font-body); color: rgba(255, 255, 255, 0.8); }
.chub-lead__src { display: grid; justify-items: end; gap: 5px; }
.chub-lead__src > span:first-child { font: 700 9.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.chub-lead__rot { display: grid; justify-items: end; }
.chub-lead__rot em { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 700 12px/1 var(--font-body); font-style: normal; white-space: nowrap; }
.chub-lead__rot em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.chub-lead__rot em:nth-child(1) { --c: var(--c-ads); }
.chub-lead__rot em:nth-child(2) { --c: var(--c-seo); opacity: 0; }
.chub-lead__rot em:nth-child(3) { --c: var(--c-ai); opacity: 0; }

/* Timeline: a 6s loop in three 2s phases (Google Ads, SEO, AI answer). In each phase the source lights up,
   its dot travels to the page, the button presses, a dot travels on and the enquiry card shows the source. */
html.motion .chub-src__c { animation: chub-lift 6s cubic-bezier(.3, .7, .3, 1) infinite both; animation-delay: calc(var(--k) * 2s - 6s); }
html.motion .chub-src__c::after { animation: chub-ring 6s ease infinite both; animation-delay: calc(var(--k) * 2s - 6s); }
html.motion .chub-lanes s { animation: chub-fall 6s cubic-bezier(.45, 0, .35, 1) infinite both; animation-delay: calc(var(--k) * 2s - 6s); }
html.motion .chub-lanes--out s { animation: chub-out 2s cubic-bezier(.45, 0, .35, 1) infinite both; animation-delay: -0.94s; }
html.motion .chub-site__cta { animation: chub-press 2s ease infinite both; animation-delay: -1.12s; }
html.motion .chub-lead { animation: chub-pop 2s cubic-bezier(.3, .7, .3, 1) infinite both; animation-delay: -0.42s; }
html.motion .chub-lead::after { animation: chub-glow 2s ease infinite both; animation-delay: -0.42s; }
html.motion .chub-lead__rot em { animation: chub-swap 6s ease infinite both; animation-delay: calc(var(--k) * 2s - 4.38s); }
.chub-flow:not(.is-run) .chub-src__c, .chub-flow:not(.is-run) .chub-src__c::after, .chub-flow:not(.is-run) .chub-lanes s, .chub-flow:not(.is-run) .chub-site__cta,
.chub-flow:not(.is-run) .chub-lead, .chub-flow:not(.is-run) .chub-lead::after, .chub-flow:not(.is-run) .chub-lead__rot em { animation-play-state: paused; }
@keyframes chub-lift { 0%, 36%, 100% { transform: none; } 5%, 30% { transform: translateY(-3px); } }
@keyframes chub-ring { 0%, 38%, 100% { opacity: 0; } 5%, 30% { opacity: 1; } }
@keyframes chub-fall {
  0%, 4% { opacity: 0; transform: translate(0, -2px); }
  6% { opacity: 1; transform: translate(0, 0); }
  17% { opacity: 1; transform: translate(calc((50 - var(--x)) * 1%), var(--lane)); }
  20%, 100% { opacity: 0; transform: translate(calc((50 - var(--x)) * 1%), var(--lane)); }
}
@keyframes chub-out {
  0% { opacity: 0; transform: translateY(-2px); }
  6% { opacity: 1; transform: none; }
  32% { opacity: 1; transform: translateY(var(--lane-out)); }
  38%, 100% { opacity: 0; transform: translateY(var(--lane-out)); }
}
@keyframes chub-press { 0%, 18%, 100% { transform: none; } 7% { transform: scale(1.08); } }
@keyframes chub-pop { 0%, 16%, 100% { transform: none; } 6% { transform: scale(1.03); } }
@keyframes chub-glow { 0%, 40%, 100% { opacity: 0; } 6%, 18% { opacity: 1; } }
@keyframes chub-swap {
  0% { opacity: 0; transform: translateY(7px); }
  5%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-7px); }
}

@media (max-width: 520px) {
  .chub-flow { --lane: 40px; --lane-out: 28px; padding: 24px 12px 14px; border-radius: 20px; }
  .chub-tier--found { padding: 18px 8px 8px; }
  .chub-src { gap: 6px; }
  .chub-src__c { padding: 8px 8px 9px; gap: 4px; }
  .chub-src__tag { font-size: 8.5px; padding: 3px 5px; letter-spacing: 0.03em; }
  .chub-src__c b { font-size: 11.5px; }
  .chub-src__meta, .chub-src__url { font-size: 9.5px; }
  .chub-site__page { padding: 14px 12px 16px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .chub-site__copy b { font-size: 14.5px; }
  .chub-site__copy span { display: none; }
  .chub-site__cta { font-size: 10.5px; padding: 7px 10px; }
  .chub-site__dom { display: none; }
  .chub-site__bar { height: 42px; padding-top: 10px; }
  .chub-lead { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 18px 12px 12px; }
  .chub-lead__ic { width: 34px; height: 34px; font-size: 18px; }
  .chub-lead__t span { font-size: 11.5px; }
  .chub-lbl { font-size: 9.5px; letter-spacing: 0.1em; left: 10px; }
  .chub-site__tags { right: 10px; }
  .chub-site__tags span { font-size: 9.5px; padding: 0 7px; }
}

/* ---------- The gaps (problem) */

/* ---------- One system: three stages joined by gold arrows */
.chub-sys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.chub-sys__c { position: relative; display: grid; align-content: start; gap: 12px; min-width: 0; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-card); background: var(--panel); }
:root[data-theme="light"] .chub-sys__c:not(.chub-sys__c--sun) { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.chub-sys__c + .chub-sys__c::before { content: "→"; position: absolute; z-index: 1; top: 50%; left: -20px; width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font: 700 17px/1 var(--font-body); box-shadow: 0 0 0 5px var(--bg); }
.chub-sys__n { justify-self: start; display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9999px; background: var(--gold-grad); color: var(--gold-ink); font: 700 13px/1 var(--font-body); letter-spacing: 0.02em; }
.chub-sys__c h3 { font: 700 clamp(24px, 2.3vw, 30px)/1.1 var(--font-body); letter-spacing: -0.03em; color: var(--ink); }
.chub-sys__c > p { margin: 0; font: 400 15.5px/1.55 var(--font-body); color: var(--ink-2); }
.chub-sys__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.chub-sys__list a { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--bg); color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s, background 0.2s; }
.chub-sys__list a:hover { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.chub-sys__list a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chub-sys__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold-soft); color: var(--accent-text); font-size: 19px; box-shadow: inset 0 0 0 1px var(--gold-line); }
.chub-sys__list b { display: block; font: 700 15px/1.25 var(--font-body); letter-spacing: -0.01em; color: var(--ink); }
.chub-sys__list a > span:nth-child(2) > span { display: block; margin-top: 3px; font: 500 13.5px/1.4 var(--font-body); color: var(--muted); }
.chub-sys__go { font-size: 18px; color: var(--muted); transition: transform 0.15s, color 0.15s; }
.chub-sys__list a:hover .chub-sys__go { transform: translateY(2px); color: var(--ink); }
.chub-sys__c--sun { background: linear-gradient(160deg, var(--sun), var(--sun-deep)); }
.chub-sys__c--sun h3, .chub-sys__c--sun > p { color: var(--on-sun, #16181d); }
.chub-sys__c--sun .chub-sys__n { background: #16181d; color: #f7e1a6; }
.chub-sys__checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.chub-sys__checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); font: 600 14.5px/1.45 var(--font-body); color: #16181d; }
.chub-sys__checks .psg-ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #16181d; color: #e9cf8a; stroke-width: 2.6; }
.chub-why { margin-top: clamp(16px, 2vw, 24px); }
@media (max-width: 960px) {
  .chub-sys { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .chub-sys__c + .chub-sys__c::before { content: "↓"; top: -18px; left: 50%; margin: -18px 0 0 -18px; }
}

/* ---------- The six services: goal picker */
.chub-goal { display: grid; gap: 14px; margin-bottom: clamp(20px, 2.4vw, 28px); padding: clamp(18px, 2.4vw, 26px); border-radius: var(--radius-card); background: var(--panel); }
:root[data-theme="light"] .chub-goal { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.chub-goal__q { margin: 0; font: 700 12px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.chub-goal__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chub-goal__opts button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px 8px 14px; border: 0; border-radius: 9999px; background: var(--chip); color: var(--ink);
  font: 600 15px/1.25 var(--font-body); letter-spacing: -0.01em; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: background 0.2s, box-shadow 0.2s, color 0.2s; }
.chub-goal__opts button::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background 0.2s, box-shadow 0.2s; }
.chub-goal__opts button:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.chub-goal__opts button[aria-pressed="true"] { background: var(--gold-grad); color: var(--gold-ink); box-shadow: none; }
.chub-goal__opts button[aria-pressed="true"]::before { background: radial-gradient(circle, #fff 0 3.5px, var(--gold-ink) 4px); box-shadow: none; }
.chub-goal__opts button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chub-goal__out { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; min-height: 56px; padding: 12px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.chub-goal__out p { flex: 1 1 340px; margin: 0; font: 500 15.5px/1.5 var(--font-body); color: var(--muted); }
.chub-goal__out.is-on { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold-line); }
.chub-goal__out.is-on p { color: var(--ink); }
.chub-goal__out .psg-btn { flex: none; }
html.motion .chub-goal__out.is-on > * { animation: rise 0.45s cubic-bezier(.2, .7, .2, 1) both; }

@media (max-width: 960px) { .chub-goal__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .chub-goal__opts button { font-size: 14.5px; padding: 8px 14px 8px 10px; gap: 9px; border-radius: 16px; } .chub-goal__opts button::before { width: 18px; height: 18px; } }
.chub-goal__go { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.chub-goal__go[hidden] { display: none; }
.chub-goal__go a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 9999px; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--gold-line);
  color: var(--ink); font: 600 14.5px/1.2 var(--font-body); text-decoration: none; }
.chub-goal__go a .psg-ic { font-size: 16px; color: var(--accent-text); }
.chub-goal__go a:hover { background: var(--gold-soft); }
.chub-goal__go a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- The six services: a sticky service bar under the site header, then one chapter per service.
   A chapter holds what the service is, three facts from its page, a first-step ticket, links to the page,
   and a small look-alike. Look-alike screens stay light in both themes, like screenshots. They loop only
   while on screen ([data-chub-run].is-run) and only with html.motion; otherwise they show their finished state. */
.chub-bar { position: sticky; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); z-index: 30; margin: clamp(32px, 4vw, 48px) 0 clamp(22px, 2.8vw, 34px);
  background: var(--bar); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.chub-bar .wrap { display: flex; align-items: center; height: 58px; }
.chub-bar__list { position: relative; list-style: none; margin: 0 -10px; padding: 0 10px; display: flex; align-items: center; justify-content: safe center; gap: 2px; width: calc(100% + 20px);
  overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); }
.chub-bar__list::-webkit-scrollbar { display: none; }
.chub-bar__list li { flex: none; }
.chub-bar__grp { padding: 0 8px 0 14px; font: 700 10.5px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.chub-bar__grp:not(:first-child) { margin-left: 10px; padding-left: 20px; box-shadow: inset 1px 0 0 var(--line-2); }
.chub-bar__list a { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 9999px; font: 600 14.5px/1 var(--font-body); letter-spacing: -0.01em;
  color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.2s, background 0.2s; }
.chub-bar__list a b { font: 700 11px/1 var(--font-body); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.chub-bar__list a:hover { color: var(--ink); background: var(--chip); }
.chub-bar__list a[aria-current] { background: var(--gold-grad); color: var(--gold-ink); }
.chub-bar__list a[aria-current] b { color: var(--gold-ink); }
.chub-bar__list a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.chub-bar__list a.is-pick::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--trust); box-shadow: 0 0 0 3px var(--trust-wash); }
.chub-bar__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; pointer-events: none; }
.chub-bar__prog i { display: block; height: 100%; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; }

.chub-book { position: relative; }
.chub-chaps { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.chub-stage { display: flex; align-items: center; gap: 12px; margin: clamp(8px, 1.6vw, 20px) 0 0; font: 700 12.5px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.chub-stage:first-child { margin-top: 0; }
.chub-stage b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 9999px; background: var(--gold-grad); color: var(--gold-ink); font: 700 12px/1 var(--font-body); letter-spacing: 0.02em; }
.chub-stage::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); opacity: 0.6; }

.chub-ch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); grid-template-areas: "head vis" "facts vis" "act vis"; grid-template-rows: auto auto 1fr;
  gap: 22px clamp(28px, 4.4vw, 64px); padding: clamp(24px, 3.6vw, 48px); border-radius: var(--radius-card); background: var(--panel); scroll-margin-top: calc(var(--head-h) + 82px); }
:root[data-theme="light"] .chub-ch { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.chub-ch--flip { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); grid-template-areas: "vis head" "vis facts" "vis act"; }
.chub-ch__head { grid-area: head; display: grid; gap: 14px; justify-items: start; }
.chub-ch__meta { display: flex; align-items: center; gap: 12px; }
.chub-ch__meta .psg-disk { width: 46px; height: 46px; font-size: 22px; }
.chub-ch h3 { margin: 2px 0 0; font: 700 clamp(28px, 2.8vw, 38px)/1.05 var(--font-body); letter-spacing: -0.035em; color: var(--ink); }
.chub-ch__head p { max-width: 44ch; margin: 0; font: 400 17px/1.5 var(--font-body); color: var(--ink-2); }
.chub-ch__facts { grid-area: facts; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.chub-ch__facts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font: 400 15.5px/1.55 var(--font-body); color: var(--ink-2); }
.chub-ch__facts .psg-ic { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--gold-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--gold-line); stroke-width: 2.6; }
.chub-ch__facts b { font-weight: 700; color: var(--ink); }
.chub-ch__act { grid-area: act; align-self: end; display: grid; gap: 16px; justify-items: start; padding-top: 4px; }
.chub-ch__links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.chub-ch__links .more { min-height: 28px; }
.chub-ch__vis { grid-area: vis; align-self: center; display: grid; gap: 10px; min-width: 0; }
.chub-ch__pick { position: absolute; z-index: 1; top: -12px; left: clamp(24px, 3.6vw, 48px); display: none; }
.chub-ch.is-pick { background: linear-gradient(180deg, var(--gold-soft), var(--panel) 55%); box-shadow: inset 0 0 0 2px var(--gold-line) !important; }
.chub-ch.is-pick .chub-ch__pick { display: inline-flex; }

/* First-step ticket (Sales mode coupon): a gold stub, a perforation and the offer. */
.chub-tix { --nb: var(--panel); position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr) 44px; width: 100%; max-width: 470px; min-height: 80px; border-radius: 14px; overflow: hidden;
  background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); color: inherit; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; }
.chub-tix::before, .chub-tix::after { content: ""; position: absolute; z-index: 1; left: 82px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--nb); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.chub-tix::before { top: -8px; }
.chub-tix::after { bottom: -8px; }
.chub-tix__stub { display: grid; place-items: center; padding: 10px 12px; background: var(--gold-grad); color: var(--gold-ink); font: 700 11px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.chub-tix__body { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 13px 4px 13px 18px; border-left: 2px dashed var(--gold-line); }
.chub-tix__body b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 16.5px/1.25 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.chub-tix__body b .psg-chip { font-style: normal; }
.chub-tix__body > span { font: 500 13.5px/1.4 var(--font-body); color: var(--ink-2); }
.chub-tix__go { align-self: center; justify-self: center; font-size: 20px; color: var(--accent-text); transition: transform 0.15s; }
.chub-tix:hover { box-shadow: inset 0 0 0 2px var(--gold-line), 0 10px 26px rgba(140, 100, 30, 0.14); }
.chub-tix:hover .chub-tix__go { transform: translateX(3px); }
.chub-tix:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chub-ch.is-pick .chub-tix { --nb: var(--gold-soft); background: var(--panel); }

/* Plus: news features, packages further down the page. */
.chub-plus { display: grid; grid-template-columns: 46px minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 18px clamp(18px, 3vw, 28px); border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1.5px var(--line-2); color: inherit; text-decoration: none; transition: box-shadow 0.2s, background 0.2s; }
.chub-plus:hover { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.chub-plus:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chub-plus .psg-disk { width: 46px; height: 46px; font-size: 21px; }
.chub-plus b { display: block; font: 700 17px/1.3 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.chub-plus > span:nth-child(2) > span { display: block; margin-top: 3px; font: 500 14.5px/1.45 var(--font-body); color: var(--ink-2); }
.chub-plus > .psg-ic { font-size: 20px; color: var(--accent-text); }
.chub-plus > .psg-ic { transition: transform 0.15s; }
.chub-plus:hover > .psg-ic { transform: translateY(2px); }
.chub-goal__go a .psg-ic { transition: transform 0.15s; }
.chub-goal__go a:hover .psg-ic { transform: translateY(2px); }

/* Look-alike stage: a recessed well with a gold glow; the screen inside stays light. */
.chub-mini { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 360px; padding: clamp(18px, 2.8vw, 36px); border-radius: 20px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 70% at 50% 0%, rgba(212, 166, 72, 0.17), transparent 70%), var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.chub-scr { display: block; width: 100%; max-width: 430px; border-radius: 14px; background: #fff; color: #16181d; font-family: var(--font-body);
  box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08), 0 18px 40px rgba(6, 8, 12, 0.28); }
:root[data-theme="light"] .chub-scr { box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08), 0 18px 40px rgba(110, 80, 10, 0.14); }

/* Google Ads: the free account check. */
.chub-chk { display: grid; gap: 12px; padding: 18px 18px 16px; }
.chub-chk__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chub-chk__head b { font: 700 15px/1.2 var(--font-body); letter-spacing: -0.01em; }
.chub-chk__head span { font: 600 11.5px/1 var(--font-body); color: #5d6370; white-space: nowrap; }
.chub-chk__qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chub-chk__qs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px 9px 12px; border-radius: 10px; background: #f3f4f6; font: 500 12.5px/1.35 var(--font-body); color: #2b2f36; }
.chub-chk__qs .chub-chk__more { padding: 6px 12px; background: none; box-shadow: inset 0 0 0 1.5px #dcdfe5; font-size: 11.5px; color: #5d6370; }
.chub-chk__a { display: inline-grid; place-items: center; min-width: 42px; height: 24px; padding: 0 9px; border-radius: 9999px; font: 700 11.5px/1 var(--font-body); font-style: normal; }
.chub-chk__a--yes { background: #e6f6ea; color: #0d6a2f; }
.chub-chk__a--no { background: #fde7e3; color: #a52608; }
.chub-chk__res { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.chub-chk__score { display: flex; align-items: baseline; gap: 6px; font: 600 12.5px/1 var(--font-body); color: #4b505a; white-space: nowrap; }
.chub-chk__score b { font: 700 30px/1 var(--font-body); letter-spacing: -0.03em; color: #16181d; }
.chub-chk__bar { height: 8px; border-radius: 9999px; background: #eceef2; overflow: hidden; }
.chub-chk__bar i { display: block; width: 62.5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f7e1a6, #d4a648); transform-origin: left; }
.chub-chk__fix { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #f8f2e4; box-shadow: inset 3px 0 0 #d4a648; }
.chub-chk__fix b { font: 700 10.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #7a4f10; }
.chub-chk__fix span { font: 600 12.5px/1.4 var(--font-body); color: #2b2f36; }

/* SEO: your result, and the six areas SEO works on. */
.chub-serp { display: grid; gap: 12px; padding: 14px 16px 16px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.chub-serp__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 14px 0 16px; border-radius: 9999px; box-shadow: 0 1px 5px rgba(32, 33, 36, 0.22); font: 400 13.5px/1 Arial, sans-serif; color: #202124; }
.chub-serp__q span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chub-serp__q svg { flex: none; width: 18px; height: 18px; fill: #5f6368; }
.chub-serp__res { position: relative; display: grid; gap: 4px; margin: 0 -4px; padding: 12px; border-radius: 12px; background: #faf6ec; box-shadow: inset 0 0 0 1.5px #e9c46a; }
.chub-serp__res::after { content: ""; position: absolute; inset: -4px; border-radius: 15px; box-shadow: 0 0 0 2px #d4a648, 0 0 18px rgba(212, 166, 72, 0.6); opacity: 0; pointer-events: none; }
.chub-serp__site { display: flex; align-items: center; gap: 8px; }
.chub-serp__site i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #16181d; color: #e9cf8a; font: 700 12px/1 var(--font-body); font-style: normal; }
.chub-serp__site b { display: block; font: 400 12.5px/1.25 Arial, sans-serif; color: #202124; }
.chub-serp__site cite { display: block; font: 400 11.5px/1.25 Arial, sans-serif; font-style: normal; color: #4d5156; }
.chub-serp__t { font: 400 16px/1.3 Arial, sans-serif; color: #1a0dab; }
.chub-serp__d { font: 400 12.5px/1.45 Arial, sans-serif; color: #474747; }
.chub-serp__sk { display: grid; gap: 12px; padding: 2px 8px 0; }
.chub-serp__sk i { display: block; height: 34px; background: linear-gradient(#e3e5e9 0 0) 0 0 / 38% 8px no-repeat, linear-gradient(#dfe2e7 0 0) 0 14px / 82% 9px no-repeat, linear-gradient(#eceef1 0 0) 0 28px / 64% 6px no-repeat; }
.chub-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 430px; }
.chub-areas li { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 10px 8px 8px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 12.5px/1.2 var(--font-body); color: var(--ink); }
.chub-areas .psg-ic { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); stroke-width: 3; }

/* GEO & AEO: an AI answer that names Your Brand, then SEO → AEO → GEO. */
.chub-chat { display: grid; gap: 11px; padding: 14px 16px 16px; }
.chub-chat__top { display: flex; align-items: center; gap: 7px; font: 700 12.5px/1 var(--font-body); color: #16181d; }
.chub-spark { flex: none; width: 16px; height: 16px; fill: #7c4fe0; }
.chub-chat__q { justify-self: end; max-width: 84%; margin: 0; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: #f0f1f4; font: 500 13px/1.4 var(--font-body); color: #202124; }
.chub-chat__a { display: grid; gap: 8px; font: 400 13px/1.45 var(--font-body); color: #2b2f36; }
.chub-chat__a p { margin: 0; }
.chub-chat__a ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: chub-c; }
.chub-chat__a li { position: relative; counter-increment: chub-c; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 1px 9px; align-items: center; padding: 7px 10px; border-radius: 10px; }
.chub-chat__a li::before { content: counter(chub-c); grid-row: 1 / span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eceef2; font: 700 11px/1 var(--font-body); color: #4b505a; }
.chub-chat__a li > b { font-weight: 700; color: #16181d; }
.chub-chat__a li > span { font-size: 12px; line-height: 1.35; color: #5d6370; }
.chub-chat__a .chub-chat__you { background: #faf6ec; box-shadow: inset 0 0 0 1.5px #e9c46a; }
.chub-chat__a .chub-chat__you::before { background: #16181d; color: #e9cf8a; }
.chub-chat__you::after { content: ""; position: absolute; inset: -4px; border-radius: 13px; box-shadow: 0 0 0 2px #d4a648, 0 0 18px rgba(212, 166, 72, 0.55); opacity: 0; pointer-events: none; }
.chub-chat__gap, .chub-chat__got { grid-column: 2; grid-row: 1 / span 2; }
.chub-chat__gap { align-self: center; justify-self: start; padding: 5px 10px; border-radius: 9999px; box-shadow: inset 0 0 0 1.5px #b8bcc4; font: 700 12px/1.2 var(--font-body); color: #5d6370; opacity: 0; }
.chub-chat__got { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: center; }
.chub-chat__got b { font-weight: 700; color: #16181d; }
.chub-chat__got > span { grid-column: 1; font-size: 12px; line-height: 1.35; color: #5d6370; }
.chub-chat__got em { grid-column: 2; grid-row: 1 / span 2; padding: 4px 8px; border-radius: 9999px; background: #e8f0fe; color: #174ea6; font: 700 11px/1 var(--font-body); font-style: normal; }
.chub-sag { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 430px; }
.chub-sag li { position: relative; display: grid; gap: 4px; justify-items: center; padding: 10px 6px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 12.5px/1.2 var(--font-body); color: var(--ink-2); text-align: center; }
.chub-sag li + li::before { content: "→"; position: absolute; top: 50%; left: -8px; transform: translate(-50%, -50%); font: 700 13px/1 var(--font-body); color: var(--muted); }
.chub-sag b { font: 700 11px/1 var(--font-body); letter-spacing: 0.1em; color: var(--accent-text); }
.chub-sag li:last-child { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); color: var(--ink); }

/* Websites: a one-line brief becomes a site, with launch checks. */
.chub-build { display: grid; gap: 12px; width: 100%; max-width: 440px; }
.chub-build__prompt { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 9999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 22px rgba(0, 0, 0, 0.12); font: 500 13px/1.35 var(--font-body); color: var(--ink); }
.chub-build__prompt .chub-spark { fill: var(--accent-text); }
.chub-build__prompt span { min-width: 0; }
.chub-build__prompt i { flex: none; width: 2px; height: 15px; margin-left: -4px; border-radius: 1px; background: var(--accent-text); }
.chub-build__site { overflow: hidden; }
.chub-build__bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: #eef0f3; }
.chub-build__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d5d8de; }
.chub-build__bar span { margin-left: 8px; padding: 4px 10px; border-radius: 9999px; background: #fff; font: 600 10.5px/1 var(--font-body); color: #4b505a; }
.chub-build__page { display: grid; gap: 8px; padding: 10px; background: #f7f7f8; border-radius: 0 0 14px 14px; }
.chub-build__b { border-radius: 8px; }
.chub-build__nav { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; background: #fff; box-shadow: 0 0 0 1px #eceef2; font: 500 10px/1 var(--font-body); color: #5d6370; }
.chub-build__nav b { font: 800 11px/1 var(--font-body); letter-spacing: 0.02em; color: #16181d; white-space: nowrap; }
.chub-build__nav span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chub-build__nav em { padding: 5px 9px; border-radius: 9999px; background: #16181d; color: #fff; font: 700 9.5px/1 var(--font-body); font-style: normal; white-space: nowrap; }
.chub-build__hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 14px 12px; background: linear-gradient(140deg, #f8f2e4, #ead6a2); }
.chub-build__hero > span { display: grid; gap: 9px; justify-items: start; }
.chub-build__hero b { font: 700 14.5px/1.15 var(--font-body); letter-spacing: -0.02em; color: #16181d; }
.chub-build__hero em { padding: 6px 11px; border-radius: 9999px; background: #16181d; color: #fff; font: 700 10px/1 var(--font-body); font-style: normal; }
.chub-build__hero .chub-car { max-width: 150px; }
.chub-build__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chub-build__cards > span { display: grid; gap: 5px; min-width: 0; padding: 6px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #eceef2; }
.chub-build__cards i { display: block; height: 30px; border-radius: 5px; background: linear-gradient(135deg, #e2e6ec, #c9d1db); }
.chub-build__cards b { overflow: hidden; font: 700 9.5px/1.2 var(--font-body); color: #16181d; white-space: nowrap; text-overflow: ellipsis; }
.chub-build__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chub-build__checks li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 9999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 12.5px/1 var(--font-body); color: var(--ink); }
.chub-build__checks .psg-ic { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--trust-wash); color: var(--trust); stroke-width: 3; }
.chub-build__checks .chub-build__you { background: var(--gold-grad); box-shadow: none; color: var(--gold-ink); }
.chub-build__checks .chub-build__you .psg-ic { background: #16181d; color: #e9cf8a; }

/* Landing pages: the same page before and after. Numbers are illustrative and labelled. */
.chub-ba { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); gap: 10px; align-items: stretch; width: 100%; max-width: 470px; }
.chub-ba__ph { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; justify-items: center; min-width: 0; margin: 0; }
.chub-ba__ph .chub-ba__scr { align-self: stretch; }
.chub-ba__scr { display: grid; gap: 9px; align-content: start; min-height: 248px; padding: 11px 11px 13px; border-radius: 18px; }
.chub-ba__nav { display: flex; align-items: center; gap: 4px; padding-bottom: 7px; border-bottom: 1px solid #eceef2; }
.chub-ba__nav b { margin-right: auto; font: 800 8.5px/1 var(--font-body); letter-spacing: 0.06em; color: #16181d; }
.chub-ba__nav i { width: 9px; height: 3px; border-radius: 2px; background: #c9cdd4; }
.chub-ba__nav em { padding: 4px 7px; border-radius: 9999px; background: #1f7a3d; color: #fff; font: 700 8.5px/1 var(--font-body); font-style: normal; }
.chub-ba__h { font: 700 13.5px/1.18 var(--font-body); letter-spacing: -0.02em; color: #16181d; }
.chub-ba__ph--before .chub-ba__h { font: italic 400 14px/1.2 Georgia, "Times New Roman", serif; letter-spacing: 0; color: #4b505a; }
.chub-ba__ghost { justify-self: start; font: 600 10.5px/1 var(--font-body); color: #5d6370; text-decoration: underline; }
.chub-ba__btn { padding: 8px 6px; border-radius: 9999px; background: #16181d; color: #fff; font: 700 10px/1.2 var(--font-body); text-align: center; }
.chub-ba__proof { display: flex; flex-wrap: wrap; gap: 3px; }
.chub-ba__proof span { padding: 3px 5px; border-radius: 4px; background: #e6f6ea; color: #0d6a2f; font: 700 8.5px/1 var(--font-body); }
.chub-ba__form { display: grid; gap: 4px; padding: 7px; border-radius: 8px; background: #f3f4f6; }
.chub-ba__form i { display: block; height: 6px; border-radius: 3px; background: #d5d8de; }
.chub-ba__form--3 { gap: 5px; }
.chub-ba__form--3 i { height: 11px; background: #fff; box-shadow: inset 0 0 0 1px #d5d8de; }
.chub-ba__m { display: flex; align-items: baseline; gap: 6px; font: 600 12.5px/1 var(--font-body); color: var(--ink-2); white-space: nowrap; }
.chub-ba__m b { font: 700 30px/1 var(--font-body); letter-spacing: -0.03em; color: var(--ink); }
.chub-ba__ph--after .chub-ba__m b { color: var(--trust); }
.chub-ba__ph--after .chub-ba__scr { box-shadow: 0 0 0 2px #2fbf62, 0 18px 40px rgba(6, 8, 12, 0.28); }
:root[data-theme="light"] .chub-ba__ph--after .chub-ba__scr { box-shadow: 0 0 0 2px #2fbf62, 0 18px 40px rgba(110, 80, 10, 0.14); }
.chub-ba__arr { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font-size: 17px; }
.chub-ba__arr .psg-ic { stroke-width: 2.6; }

/* Domains: the real name checker (domains.js), set into the chapter. */
.chub-dom { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.chub-dom .dom__list label { background: var(--panel); }
.chub-dom, .chub-dom > * { min-width: 0; }
.chub-dom .psg-btn { white-space: normal; text-align: center; }

/* Look-alike motion (html.motion only; paused off screen). */
html.motion .chub-chk__a { animation: chub-ans 8s cubic-bezier(.3, .7, .3, 1) infinite both; animation-delay: calc(var(--k) * 0.45s); }
html.motion .chub-chk__bar i { animation: chub-fill 8s cubic-bezier(.3, .7, .3, 1) infinite both; }
html.motion .chub-chk__fix { animation: chub-up 8s cubic-bezier(.3, .7, .3, 1) infinite both; }
html.motion .chub-areas .psg-ic { animation: chub-tick 7s cubic-bezier(.3, .7, .3, 1) infinite both; animation-delay: calc(var(--k) * 0.3s); }
html.motion .chub-serp__res::after { animation: chub-glow 7s ease infinite both; }
html.motion .chub-chat__gap { animation: chub-out 6.5s ease infinite both; }
html.motion .chub-chat__got { animation: chub-in 6.5s ease infinite both; }
html.motion .chub-chat__you::after { animation: chub-glow2 6.5s ease infinite both; }
html.motion .chub-build__prompt i { animation: chub-caret 1s steps(1) infinite; }
html.motion .chub-build__b { animation: chub-rise 8s cubic-bezier(.3, .7, .3, 1) infinite both; animation-delay: calc(var(--k) * 0.5s); }
html.motion .chub-build__checks li { animation: chub-ans 8s cubic-bezier(.3, .7, .3, 1) infinite both; animation-delay: calc(1.6s + var(--k) * 0.45s); }
html.motion .chub-ba__arr { animation: chub-nudge 2.4s ease-in-out infinite; }
html.motion .chub-ba__ph--after .chub-ba__btn { animation: chub-press 2.4s ease infinite; }
.chub-ch__vis:not(.is-run) *, .chub-ch__vis:not(.is-run) *::before, .chub-ch__vis:not(.is-run) *::after { animation-play-state: paused !important; }
@keyframes chub-ans { 0%, 4% { opacity: 0; transform: scale(0.6); } 9% { opacity: 1; transform: scale(1.08); } 12%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes chub-fill { 0%, 22% { transform: scaleX(0); } 36%, 90% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes chub-up { 0%, 34% { opacity: 0; transform: translateY(8px); } 42%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes chub-tick { 0%, 4% { opacity: 0; transform: scale(0.4); } 10% { opacity: 1; transform: scale(1.15); } 14%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(0.6); } }
@keyframes chub-glow { 0%, 34% { opacity: 0; } 42%, 60% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes chub-out { 0%, 30% { opacity: 1; transform: none; } 36%, 92% { opacity: 0; transform: translateY(-6px); } 98%, 100% { opacity: 1; transform: none; } }
@keyframes chub-in { 0%, 32% { opacity: 0; transform: translateY(6px); } 40%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes chub-glow2 { 0%, 36% { opacity: 0; } 42%, 62% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes chub-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes chub-rise { 0%, 3% { opacity: 0; transform: translateY(10px); } 10%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes chub-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } }
@keyframes chub-press { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.06); } }

@media (max-width: 960px) {
  .chub-ch, .chub-ch--flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "facts" "act"; grid-template-rows: none; gap: 22px; }
  .chub-ch__vis { align-self: stretch; }
  .chub-mini { min-height: 0; }
}
@media (max-width: 760px) {
  .chub-bar .wrap { height: 54px; }
  .chub-bar__grp { display: none; }
  .chub-bar__list { justify-content: flex-start; }
  .chub-bar__list a { height: 40px; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 520px) {
  .chub-ch { padding: 22px 18px 24px; }
  .chub-ch__pick { left: 18px; }
  .chub-ch h3 { font-size: 27px; }
  .chub-ch__head p { font-size: 16px; }
  .chub-ch__facts li { font-size: 15px; }
  .chub-mini { padding: 16px 12px; border-radius: 16px; }
  .chub-tix { grid-template-columns: 68px minmax(0, 1fr) 36px; }
  .chub-tix::before, .chub-tix::after { left: 68px; }
  .chub-tix__stub { padding: 10px 8px; font-size: 10px; }
  .chub-tix__body { padding-left: 14px; }
  .chub-tix__body b { font-size: 15.5px; }
  .chub-tix__body > span { font-size: 13px; }
  .chub-chk { padding: 14px 12px 12px; }
  .chub-chk__qs li { font-size: 12px; padding: 8px 8px 8px 10px; gap: 8px; }
  .chub-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chub-areas li { font-size: 12px; }
  .chub-sag { gap: 12px; }
  .chub-sag li { font-size: 11.5px; padding: 9px 4px; }
  .chub-build__hero b { font-size: 13px; }
  .chub-build__hero .chub-car { max-width: 110px; }
  .chub-build__nav span { display: none; }
  .chub-ba { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 6px; }
  .chub-ba__arr { width: 24px; height: 24px; font-size: 13px; }
  .chub-ba__scr { min-height: 226px; padding: 9px 9px 11px; border-radius: 14px; }
  .chub-ba__h { font-size: 12px; }
  .chub-ba__ph--before .chub-ba__h { font-size: 12.5px; }
  .chub-ba__m { font-size: 11.5px; gap: 4px; }
  .chub-ba__m b { font-size: 24px; }
  .chub-plus { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; padding: 16px; }
  .chub-plus .psg-disk { width: 40px; height: 40px; font-size: 19px; }
  .chub-dom { padding: 18px 14px; }
  .chub-dom .dom__search input { height: 52px; font-size: 18px; }
  .chub-dom .psg-btn { font-size: 15.5px; }
}

/* ---------- Proof bento */
.chub-proof { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.chub-proof__c { grid-column: span 3; position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(22px, 2.4vw, 28px); border-radius: var(--radius-card); background: var(--panel);
  color: inherit; text-decoration: none; transition: box-shadow 0.2s; }
:root[data-theme="light"] .chub-proof__c { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.chub-proof__c:hover, :root[data-theme="light"] .chub-proof__c:hover { box-shadow: inset 0 0 0 2px var(--gold-line), 0 10px 30px rgba(140, 100, 30, 0.1); }
.chub-proof__c:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chub-proof__c > b, .chub-proof__body > b { font: 700 18px/1.3 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.chub-proof__txt { font: 400 15px/1.55 var(--font-body); color: var(--ink-2); }
.chub-proof__c .more { margin-top: auto; padding-top: 4px; }
.chub-proof__logo { display: flex; align-items: center; justify-content: center; gap: 10px; height: 88px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.06); overflow: hidden; }
.chub-proof__logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; min-width: 0; }
.chub-proof__logo img + img { max-width: 48%; }
.chub-proof__c--google { grid-column: span 6; gap: 16px; padding: clamp(26px, 3.4vw, 40px);
  background: radial-gradient(110% 80% at 100% 0%, rgba(212, 166, 72, 0.28), transparent 60%), var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
:root[data-theme="light"] .chub-proof__c--google { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.chub-proof__head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.chub-proof__badge { flex: none; display: grid; place-items: center; width: 76px; height: 76px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(90, 60, 10, 0.12); }
.chub-proof__badge img { width: 100%; height: auto; }
.chub-proof__kick { font: 700 12.5px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.chub-proof__c .chub-proof__big { font: 700 clamp(44px, 4.6vw, 66px)/0.98 var(--font-body); letter-spacing: -0.045em; color: var(--ink); }
.chub-proof__c--google .chub-proof__txt { max-width: 40ch; font-size: 16.5px; color: var(--ink); }
.chub-proof__c--show { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding: 0; overflow: hidden; }
.chub-proof__c--show > img { width: 100%; height: 100%; min-height: 260px; max-height: 340px; object-fit: cover; object-position: top left; background: var(--chip); }
.chub-proof__body { display: grid; align-content: center; justify-items: start; gap: 12px; padding: clamp(24px, 3.4vw, 48px); }
.chub-proof__body > b { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; }
.chub-proof__body .chub-proof__txt { max-width: 46ch; }
.chub-proof__body .more { margin-top: 4px; }
.chub-proof__body .psg-tag { justify-self: start; }
.chub-team { margin-top: clamp(16px, 2vw, 24px); }
.chub-team .feature__body .h-sec { font-size: clamp(26px, 2.6vw, 34px); }
.chub-partners { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 1100px) {
  .chub-proof__c { grid-column: span 6; }
  .chub-proof__c--google { grid-column: span 12; grid-row: auto; }
  .chub-proof__c--show { grid-column: span 12; }
}
@media (max-width: 640px) {
  .chub-proof__c, .chub-proof__c--show { grid-column: span 12; }
  .chub-proof__c--show { grid-template-columns: minmax(0, 1fr); }
  .chub-proof__c--show > img { min-height: 0; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .chub-flow *, .chub-flow *::before, .chub-flow *::after, .chub-goal__out > *, .chub-ch__vis *, .chub-ch__vis *::before, .chub-ch__vis *::after { animation: none !important; }
  .chub-sys__list a, .chub-sys__go, .chub-goal__opts button, .chub-proof__c, .chub-bar__list a, .chub-tix, .chub-tix__go, .chub-plus, .chub-plus > .psg-ic, .chub-goal__go a .psg-ic { transition: none; }
}