/* ==== ccgx-page-style (verbatim from the page body) ==== */ #ccgx-page{--bg:#0f1c34;--bg-deep:#0b1526;--steel:#191c22;--steel-2:#232830;--panel:#20242b;--panel-2:#2a2f38;--line:rgba(198,208,222,.17);--line-soft:rgba(198,208,222,.095);--line-lit:rgba(128,176,255,.5);--text:#f7fbff;--muted:#c2d2e8;--muted-2:#94a9c6;--blue:#4a86ff;--blue-2:#80b0ff;--purple:#7b68ee;--purple-2:#aa98ff;--cyan:#55c8ef;--green:#39c9a5;--amber:#f0b458;--maxw:1180px;--rail-x:26px;--rail-gutter:76px;--r-sm:10px;--r:16px;--r-lg:22px;--s1:.5rem;--s2:.875rem;--s3:1.25rem;--s4:2rem;--s5:3rem;--s6:4.5rem;--sec-y:clamp(4rem,8vw,7rem);--font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--shadow:0 18px 44px rgba(5,12,26,.38);--shadow-lg:0 30px 70px rgba(5,12,26,.5);display:flow-root;width:auto;max-width:none;margin-inline:0;overflow-x:clip;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}#ccgx-page *,#ccgx-page *::before,#ccgx-page *::after{box-sizing:border-box}#ccgx-page h1,#ccgx-page h2,#ccgx-page h3,#ccgx-page h4,#ccgx-page p,#ccgx-page ul,#ccgx-page ol,#ccgx-page figure{margin:0}#ccgx-page ul,#ccgx-page ol{padding:0;list-style:none}#ccgx-page li{list-style:none}#ccgx-page li::marker{content:""}#ccgx-page img,#ccgx-page svg{max-width:100%}#ccgx-page h1,#ccgx-page h2,#ccgx-page h3,#ccgx-page h4{color:var(--text);font-family:var(--font);font-weight:800;letter-spacing:-.022em;line-height:1.12;text-wrap:balance}#ccgx-page h1{font-size:clamp(2.4rem,5.6vw,4.1rem)}#ccgx-page h2{font-size:clamp(1.85rem,3.6vw,2.75rem)}#ccgx-page h3{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.015em}#ccgx-page h4{font-size:1.03rem;letter-spacing:-.01em;line-height:1.35}#ccgx-page p{color:var(--muted)}#ccgx-page strong{color:var(--text);font-weight:700}#ccgx-page a{color:var(--blue-2)}#ccgx-page a:focus-visible,#ccgx-page button:focus-visible,#ccgx-page summary:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px;border-radius:6px}#ccgx-page .ccgx-mono{font-family:var(--font-mono);font-size:.705rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}#ccgx-page .ccgx-wrap{position:relative;max-width:var(--maxw);margin-inline:auto;padding:var(--sec-y) 1.25rem var(--sec-y) var(--rail-gutter)}#ccgx-page .ccgx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}#ccgx-page .ccgx-sec{position:relative}#ccgx-page .ccgx-wrap::before{content:"";position:absolute;left:var(--rail-x);top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--line-soft),var(--line) 12%,var(--line) 88%,var(--line-soft));border-radius:2px}#ccgx-page .ccgx-wrap::after{content:"";position:absolute;left:var(--rail-x);top:0;bottom:0;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent,var(--blue-2)) 55%,transparent) 18%,color-mix(in srgb,var(--accent,var(--blue-2)) 55%,transparent) 82%,transparent);opacity:0;transition:opacity .7s ease;pointer-events:none}#ccgx-page .ccgx-sec.is-live .ccgx-wrap::after{opacity:.85}#ccgx-page .ccgx-pulse{position:absolute;left:calc(var(--rail-x) - 3px);top:0;width:8px;height:92px;border-radius:8px;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent,var(--blue-2)) 85%,transparent),transparent);filter:blur(1px)}#ccgx-page .ccgx-sec.is-live .ccgx-pulse{animation:ccgx-travel 2.6s cubic-bezier(.4,0,.3,1) .15s 1 both}#ccgx-page .ccgx-node{position:absolute;left:calc(var(--rail-x) - 7px);top:calc(var(--sec-y) + .35em);width:16px;height:16px;pointer-events:none}#ccgx-page .ccgx-node::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--steel-2);border:2px solid var(--line-lit);transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}#ccgx-page .ccgx-node::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent,var(--blue-2)) 45%,transparent),transparent 68%);opacity:0;transition:opacity .6s ease}#ccgx-page .ccgx-sec.is-live .ccgx-node::before{background:var(--accent,var(--blue-2));border-color:color-mix(in srgb,var(--accent,var(--blue-2)) 70%,#ffffff);box-shadow:0 0 14px color-mix(in srgb,var(--accent,var(--blue-2)) 60%,transparent)}#ccgx-page .ccgx-sec.is-live .ccgx-node::after{opacity:1;animation:ccgx-breathe 4.5s ease-in-out infinite}#ccgx-page .ccgx-branch{position:absolute;left:calc(var(--rail-x) + 8px);top:calc(var(--sec-y) + .35em + 7px);width:calc(var(--rail-gutter) - var(--rail-x) - 22px);height:2px;background:var(--line);pointer-events:none;overflow:hidden}#ccgx-page .ccgx-branch::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent,var(--blue-2)) 80%,transparent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,1,.36,1)}#ccgx-page .ccgx-sec.is-live .ccgx-branch::after{transform:scaleX(1)}#ccgx-page .ccgx-sec[data-accent="blue"]{--accent:var(--blue-2)}#ccgx-page .ccgx-sec[data-accent="cyan"]{--accent:var(--cyan)}#ccgx-page .ccgx-sec[data-accent="purple"]{--accent:var(--purple-2)}#ccgx-page .ccgx-sec[data-accent="green"]{--accent:var(--green)}#ccgx-page .ccgx-sec[data-accent="amber"]{--accent:var(--amber)}#ccgx-page.ccgx-js .ccgx-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}#ccgx-page .ccgx-sec.is-live .ccgx-reveal{opacity:1;transform:none}#ccgx-page .ccgx-sec.is-live .ccgx-reveal:nth-of-type(2){transition-delay:.07s}#ccgx-page .ccgx-sec.is-live .ccgx-reveal:nth-of-type(3){transition-delay:.13s}#ccgx-page .ccgx-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1.5rem;border-radius:999px;border:1px solid transparent;font:inherit;font-size:.96rem;font-weight:700;letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}#ccgx-page .ccgx-btn svg{width:17px;height:17px;flex:none}#ccgx-page .ccgx-btn--primary{color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 14px 32px rgba(74,134,255,.3)}#ccgx-page .ccgx-btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(74,134,255,.4)}#ccgx-page .ccgx-btn--secondary{color:var(--text);background:rgba(128,176,255,.08);border-color:var(--line-lit)}#ccgx-page .ccgx-btn--secondary:hover{background:rgba(128,176,255,.15);transform:translateY(-2px)}#ccgx-page .ccgx-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .85rem;border-radius:999px;border:1px solid var(--line);background:rgba(128,176,255,.06);font-size:.8rem;font-weight:600;color:var(--muted)}#ccgx-page .ccgx-chip__dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 8px currentColor;color:var(--green)}#ccgx-page .ccgx-card{position:relative;padding:clamp(1.25rem,2.4vw,1.75rem);border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,var(--panel),var(--steel-2));box-shadow:var(--shadow)}#ccgx-page .ccgx-card--quiet{background:rgba(61,66,73,.45);box-shadow:none}#ccgx-page .ccgx-grid{display:grid;gap:var(--s3);align-items:start}#ccgx-page .ccgx-grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}#ccgx-page .ccgx-grid--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}#ccgx-page .ccgx-disc{position:relative;border-radius:var(--r);border:1px solid var(--line);background:rgba(61,66,73,.5);transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}#ccgx-page .ccgx-disc + .ccgx-disc{margin-top:.7rem}#ccgx-page .ccgx-disc>summary{display:flex;align-items:flex-start;gap:.9rem;padding:1.05rem 1.15rem;cursor:pointer;list-style:none;border-radius:var(--r);transition:background .25s ease}#ccgx-page .ccgx-disc>summary::-webkit-details-marker{display:none}#ccgx-page .ccgx-disc>summary:hover{background:rgba(128,176,255,.05)}#ccgx-page .ccgx-disc__node{position:relative;flex:none;width:12px;height:12px;margin-top:.38em;border-radius:50%;background:var(--steel-2);border:2px solid var(--line-lit);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}#ccgx-page .ccgx-disc__label{flex:1 1 auto;min-width:0}#ccgx-page .ccgx-disc__eyebrow{display:block;margin-bottom:.28rem}#ccgx-page .ccgx-disc__icon{flex:none;width:26px;height:26px;margin-top:.15em;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:transform .35s cubic-bezier(.22,1,.36,1),color .3s ease,border-color .3s ease}#ccgx-page .ccgx-disc__icon svg{width:13px;height:13px}#ccgx-page .ccgx-disc[open]{border-color:var(--line-lit);background:rgba(75,81,89,.55);box-shadow:var(--shadow)}#ccgx-page .ccgx-disc[open]>summary>.ccgx-disc__icon{transform:rotate(180deg);color:var(--text);border-color:var(--line-lit)}#ccgx-page .ccgx-disc[open]>summary>.ccgx-disc__node{background:var(--accent,var(--blue-2));border-color:color-mix(in srgb,var(--accent,var(--blue-2)) 70%,#ffffff);box-shadow:0 0 12px color-mix(in srgb,var(--accent,var(--blue-2)) 70%,transparent)}#ccgx-page .ccgx-disc.is-firing>summary>.ccgx-disc__node{animation:ccgx-spark .85s ease-out 1}#ccgx-page .ccgx-disc__body{padding:0 1.15rem 1.2rem calc(1.15rem + 12px + .9rem);animation:ccgx-rise .45s cubic-bezier(.22,1,.36,1) 1}#ccgx-page .ccgx-disc__body>* + *{margin-top:.8rem}#ccgx-page .ccgx-disc__body h4{color:var(--text)}#ccgx-page .ccgx-ticks{display:grid;gap:.5rem}#ccgx-page .ccgx-ticks li{position:relative;padding-left:1.4rem;font-size:.93rem;color:var(--muted)}#ccgx-page .ccgx-ticks li::before{content:"";position:absolute;left:.25rem;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent,var(--blue-2));opacity:.85}#ccgx-page .ccgx-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(900px 520px at 78% 12%,rgba(123,104,238,.28),transparent 60%),radial-gradient(760px 480px at 12% 78%,rgba(74,134,255,.22),transparent 62%),linear-gradient(170deg,#33373d,var(--bg) 62%)}#ccgx-page .ccgx-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(128,176,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(128,176,255,.055) 1px,transparent 1px);background-size:62px 62px;mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 78%);pointer-events:none}#ccgx-page .ccgx-hero__circuit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}#ccgx-page .ccgx-hero__trace{fill:none;stroke:rgba(128,176,255,.3);stroke-width:1.6}#ccgx-page .ccgx-hero__via{fill:rgba(128,176,255,.5)}#ccgx-page .ccgx-hero__flow{fill:none;stroke:var(--electric,var(--blue-2));stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--electric,var(--blue-2)));stroke-dasharray:.1 .9;animation:ccgx-dash var(--speed,12s) linear var(--delay,0s) infinite}#ccgx-page .ccgx-hero__inner{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;padding:clamp(3.5rem,7vw,6rem) 1.25rem clamp(3rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}#ccgx-page .ccgx-hero__eyebrow{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line-lit);background:rgba(27,30,33,.5);margin-bottom:var(--s3);color:var(--muted);font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}#ccgx-page .ccgx-hero h1 .ccgx-hero__accent{background:linear-gradient(105deg,var(--blue-2),var(--purple-2) 55%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}#ccgx-page .ccgx-hero__lead{margin-top:var(--s3);max-width:34em;font-size:clamp(1.03rem,1.4vw,1.16rem);line-height:1.62}#ccgx-page .ccgx-hero__paid{margin-top:var(--s3);padding:.85rem 1.1rem;border-radius:var(--r-sm);border-left:3px solid var(--cyan);background:rgba(85,200,239,.07);font-size:.9rem}#ccgx-page .ccgx-hero__paid b{color:var(--text)}#ccgx-page .ccgx-hero__actions{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:.8rem}#ccgx-page .ccgx-hero__assurance{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:.55rem}#ccgx-page .ccgx-console{border-radius:var(--r-lg);border:1px solid var(--line-lit);background:linear-gradient(165deg,rgba(75,81,89,.9),rgba(46,49,54,.92));box-shadow:var(--shadow-lg);overflow:hidden}#ccgx-page .ccgx-console__bar{display:flex;align-items:center;gap:.8rem;padding:1rem 1.15rem;border-bottom:1px solid var(--line);background:rgba(27,30,33,.35)}#ccgx-page .ccgx-console__mark{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff}#ccgx-page .ccgx-console__mark svg{width:18px;height:18px}#ccgx-page .ccgx-console__title{font-size:.95rem;font-weight:700;color:var(--text);line-height:1.3}#ccgx-page .ccgx-console__body{padding:1.15rem}#ccgx-page .ccgx-case__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem}#ccgx-page .ccgx-case h2{font-size:clamp(1.25rem,1.9vw,1.55rem);margin-bottom:.55rem}#ccgx-page .ccgx-case p{font-size:.92rem}#ccgx-page .ccgx-evidence{margin-top:1rem;display:grid;gap:.5rem}#ccgx-page .ccgx-evidence__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;padding:.7rem .85rem;border-radius:var(--r-sm);border:1px solid var(--line-soft);background:rgba(27,30,33,.3)}#ccgx-page .ccgx-evidence__num{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--blue-2)}#ccgx-page .ccgx-evidence__name{font-size:.93rem;font-weight:700;color:var(--text);line-height:1.3}#ccgx-page .ccgx-evidence__desc{font-size:.82rem;color:var(--muted-2);line-height:1.4}#ccgx-page .ccgx-tag{padding:.28rem .6rem;border-radius:999px;background:rgba(128,176,255,.12);color:var(--blue-2);font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}#ccgx-page .ccgx-hero__band{position:relative;z-index:1;border-top:1px solid var(--line);background:rgba(27,30,33,.38)}#ccgx-page .ccgx-hero__band-inner{max-width:var(--maxw);margin-inline:auto;padding:1.5rem 1.25rem;display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:1.5rem;align-items:start}#ccgx-page .ccgx-hero__band-lead p{margin-top:.45rem;font-size:.98rem;font-weight:600;color:var(--text);line-height:1.42}#ccgx-page .ccgx-hero__band-item{padding-left:1.1rem;border-left:1px solid var(--line)}#ccgx-page .ccgx-hero__band-name{display:block;font-size:.93rem;font-weight:700;color:var(--text);margin-bottom:.25rem}#ccgx-page .ccgx-hero__band-desc{display:block;font-size:.85rem;color:var(--muted-2);line-height:1.45}#ccgx-page .ccgx-microcopy{margin-top:.7rem;font-size:.82rem;color:var(--muted-2)}#ccgx-page .ccgx-hero__descend{position:relative;height:78px;margin-inline:auto;max-width:var(--maxw);background:transparent}#ccgx-page .ccgx-hero__descend::before{content:"";position:absolute;left:var(--rail-x);top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--line-lit))}#ccgx-page .ccgx-hero__descend::after{content:"";position:absolute;left:calc(var(--rail-x) - 5px);bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 16px rgba(128,176,255,.8)}#ccgx-page .ccgx-sec--alt{background:linear-gradient(180deg,var(--bg),var(--bg-deep) 50%,var(--bg))}#ccgx-page .ccgx-sec__head{max-width:46em;margin-bottom:var(--s5)}#ccgx-page .ccgx-sec__kicker{display:block;margin-bottom:.8rem;color:var(--accent,var(--blue-2))}#ccgx-page .ccgx-sec__head h2 .ccgx-soft{display:block;color:var(--muted-2)}#ccgx-page .ccgx-sec__intro{margin-top:var(--s3);font-size:1.03rem}#ccgx-page .ccgx-sec__intro + .ccgx-sec__intro{margin-top:.8rem}#ccgx-page .ccgx-subhead{margin:var(--s5) 0 var(--s3);max-width:44em}#ccgx-page .ccgx-subhead .ccgx-mono{display:block;margin-bottom:.55rem;color:var(--accent,var(--blue-2))}#ccgx-page .ccgx-subhead p{margin-top:.7rem}#ccgx-page .ccgx-selector{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}#ccgx-page .ccgx-selector .ccgx-disc + .ccgx-disc{margin-top:0}#ccgx-page .ccgx-selector .ccgx-disc__title{font-size:1rem;font-weight:700;color:var(--text);line-height:1.32}#ccgx-page .ccgx-steps{display:grid;gap:.8rem;counter-reset:ccgx-step}#ccgx-page .ccgx-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem 1.2rem;border-radius:var(--r);border:1px solid var(--line-soft);background:rgba(61,66,73,.4);transition:border-color .3s ease,background .3s ease}#ccgx-page .ccgx-step:hover{border-color:var(--line-lit);background:rgba(75,81,89,.5)}#ccgx-page .ccgx-step__num{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(128,176,255,.12);border:1px solid var(--line);color:var(--accent,var(--blue-2));font-family:var(--font-mono);font-size:.78rem;font-weight:700}#ccgx-page .ccgx-step h3{font-size:1.02rem;margin-bottom:.35rem}#ccgx-page .ccgx-step p{font-size:.92rem}#ccgx-page .ccgx-step__label{display:block;margin-bottom:.3rem}#ccgx-page .ccgx-rows{display:grid;gap:.5rem}#ccgx-page .ccgx-row{display:grid;grid-template-columns:auto minmax(130px,.55fr) 1fr auto;align-items:center;gap:.9rem;padding:.8rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line-soft);background:rgba(27,30,33,.28)}#ccgx-page .ccgx-row__num{font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:var(--muted-2)}#ccgx-page .ccgx-row__key{font-size:.92rem;font-weight:700;color:var(--text)}#ccgx-page .ccgx-row__val{font-size:.89rem;color:var(--muted)}#ccgx-page .ccgx-state{padding:.26rem .6rem;border-radius:999px;font-family:var(--font-mono);font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--line);color:var(--muted)}#ccgx-page .ccgx-state--ok{color:var(--green);border-color:rgba(57,201,165,.4);background:rgba(57,201,165,.1)}#ccgx-page .ccgx-state--warn{color:var(--amber);border-color:rgba(240,180,88,.4);background:rgba(240,180,88,.1)}#ccgx-page .ccgx-state--info{color:var(--cyan);border-color:rgba(85,200,239,.4);background:rgba(85,200,239,.1)}#ccgx-page .ccgx-note{margin-top:var(--s4);padding:1.15rem 1.3rem;border-radius:var(--r);border:1px solid var(--line);border-left:3px solid var(--accent,var(--blue-2));background:rgba(61,66,73,.5)}#ccgx-page .ccgx-note__title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.4rem}#ccgx-page .ccgx-note p{font-size:.93rem}#ccgx-page .ccgx-note--warn{border-left-color:var(--amber);background:rgba(240,180,88,.07)}#ccgx-page .ccgx-panel{border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(165deg,var(--panel),var(--steel-2));box-shadow:var(--shadow);overflow:hidden}#ccgx-page .ccgx-panel__bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem 1.15rem;border-bottom:1px solid var(--line);background:rgba(27,30,33,.3)}#ccgx-page .ccgx-panel__body{padding:clamp(1.1rem,2vw,1.5rem)}#ccgx-page .ccgx-panel__body>* + *{margin-top:1rem}#ccgx-page .ccgx-paths{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));align-items:start}#ccgx-page .ccgx-path{padding:1.15rem 1.25rem;border-radius:var(--r);border:1px solid var(--line-soft);background:rgba(61,66,73,.4);transition:border-color .3s ease,transform .25s ease}#ccgx-page .ccgx-path:hover{border-color:var(--line-lit);transform:translateY(-3px)}#ccgx-page .ccgx-path__label{display:block;margin-bottom:.45rem;color:var(--accent,var(--blue-2))}#ccgx-page .ccgx-path h4{margin-bottom:.45rem}#ccgx-page .ccgx-path p{font-size:.9rem}#ccgx-page .ccgx-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s3)}#ccgx-page .ccgx-pill{padding:.42rem .9rem;border-radius:999px;border:1px solid var(--line);background:rgba(128,176,255,.07);font-size:.85rem;font-weight:600;color:var(--muted)}#ccgx-page .ccgx-cta{margin-top:var(--s5);padding:clamp(1.4rem,3vw,2.1rem);border-radius:var(--r-lg);border:1px solid var(--line-lit);background:radial-gradient(600px 200px at 15% 0%,rgba(74,134,255,.18),transparent 70%),linear-gradient(150deg,var(--panel-2),var(--steel-2));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}#ccgx-page .ccgx-cta__copy{flex:1 1 340px;min-width:0}#ccgx-page .ccgx-cta__title{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:800;color:var(--text);letter-spacing:-.015em}#ccgx-page .ccgx-cta p{margin-top:.45rem;font-size:.93rem}#ccgx-page .ccgx-final{background:radial-gradient(760px 420px at 20% 10%,rgba(74,134,255,.2),transparent 62%),radial-gradient(680px 400px at 84% 78%,rgba(123,104,238,.2),transparent 60%),linear-gradient(190deg,var(--bg),#33373d)}#ccgx-page .ccgx-final__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}#ccgx-page .ccgx-final__actions{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:.8rem}#ccgx-page .ccgx-final__micro{margin-top:var(--s3);font-size:.84rem;color:var(--muted-2);max-width:44em}#ccgx-page .ccgx-summary{padding:clamp(1.25rem,2.4vw,1.75rem);border-radius:var(--r-lg);border:1px solid var(--line-lit);background:rgba(27,30,33,.45)}#ccgx-page .ccgx-summary h3{font-size:1.12rem;margin-bottom:.3rem}#ccgx-page .ccgx-summary__sub{font-size:.9rem;margin-bottom:1rem}#ccgx-page .ccgx-summary ul{display:grid;gap:.65rem}#ccgx-page .ccgx-summary li{position:relative;padding-left:1.7rem;font-size:.93rem;color:var(--muted)}#ccgx-page .ccgx-summary li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;border-radius:50%;background:rgba(57,201,165,.18);border:1px solid rgba(57,201,165,.5)}#ccgx-page .ccgx-summary li::after{content:"";position:absolute;left:5px;top:.68em;width:4px;height:7px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}#ccgx-page .ccgx-assure{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));margin-top:var(--s5)}#ccgx-page .ccgx-assure__item{padding:1.1rem 1.2rem;border-radius:var(--r);border:1px solid var(--line-soft);background:rgba(27,30,33,.3)}#ccgx-page .ccgx-assure__num{display:block;margin-bottom:.5rem;color:var(--accent,var(--blue-2))}#ccgx-page .ccgx-assure__title{font-size:.98rem;font-weight:700;color:var(--text);margin-bottom:.3rem}#ccgx-page .ccgx-assure p{font-size:.88rem}@media (max-width:1024px){#ccgx-page .ccgx-hero__inner,#ccgx-page .ccgx-final__inner{grid-template-columns:minmax(0,1fr)}#ccgx-page .ccgx-hero__inner{gap:2.5rem}#ccgx-page .ccgx-hero__band-inner{grid-template-columns:repeat(2,minmax(0,1fr))}#ccgx-page .ccgx-hero__band-lead{grid-column:1 / -1}}@media (max-width:760px){#ccgx-page{--rail-x:13px;--rail-gutter:40px;--sec-y:clamp(3rem,11vw,4rem)}#ccgx-page .ccgx-wrap{padding-right:1.1rem}#ccgx-page .ccgx-branch{width:calc(var(--rail-gutter) - var(--rail-x) - 18px)}#ccgx-page .ccgx-node{left:calc(var(--rail-x) - 7px)}#ccgx-page .ccgx-hero__inner{padding-inline:1.1rem}#ccgx-page .ccgx-hero__band-inner{grid-template-columns:minmax(0,1fr);gap:1rem;padding-inline:1.1rem}#ccgx-page .ccgx-hero__band-item{padding-left:0;border-left:0;padding-top:.9rem;border-top:1px solid var(--line)}#ccgx-page .ccgx-hero__actions .ccgx-btn,#ccgx-page .ccgx-final__actions .ccgx-btn{width:100%;justify-content:center}#ccgx-page .ccgx-selector{grid-template-columns:minmax(0,1fr)}#ccgx-page .ccgx-row{grid-template-columns:auto 1fr;row-gap:.35rem}#ccgx-page .ccgx-row__val{grid-column:1 / -1}#ccgx-page .ccgx-row .ccgx-state{grid-column:1 / -1;justify-self:start}#ccgx-page .ccgx-evidence__row{grid-template-columns:auto 1fr;row-gap:.3rem}#ccgx-page .ccgx-evidence__row .ccgx-tag{grid-column:2;justify-self:start}#ccgx-page .ccgx-disc>summary{padding:.95rem 1rem}#ccgx-page .ccgx-disc__body{padding:0 1rem 1.05rem calc(1rem + 12px + .9rem)}#ccgx-page .ccgx-cta{flex-direction:column;align-items:stretch}#ccgx-page .ccgx-cta .ccgx-btn{width:100%;justify-content:center}}@media (max-width:420px){#ccgx-page .ccgx-disc__body{padding-left:1rem}#ccgx-page .ccgx-hero__eyebrow{font-size:.62rem}}@keyframes ccgx-travel{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(calc(100% * var(--travel,8)))}}@keyframes ccgx-breathe{0%,100%{opacity:.55}50%{opacity:1}}@keyframes ccgx-rise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes ccgx-spark{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent,var(--blue-2)) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}@keyframes ccgx-dash{to{stroke-dashoffset:-1}}@media (prefers-reduced-motion:reduce){#ccgx-page *,#ccgx-page *::before,#ccgx-page *::after{animation:none !important;transition-duration:.01ms !important}#ccgx-page .ccgx-reveal{opacity:1;transform:none}#ccgx-page .ccgx-wrap::after{opacity:.55}#ccgx-page .ccgx-node::before{background:var(--accent,var(--blue-2));border-color:color-mix(in srgb,var(--accent,var(--blue-2)) 70%,#ffffff)}#ccgx-page .ccgx-branch::after{transform:scaleX(1)}#ccgx-page .ccgx-pulse{display:none}#ccgx-page .ccgx-hero__flow{stroke-dasharray:none;opacity:.5}}#ccgx-page .ccgx-mono,#ccgx-page .ccgx-console__title,#ccgx-page .ccgx-evidence__name,#ccgx-page .ccgx-evidence__desc,#ccgx-page .ccgx-step__label,#ccgx-page .ccgx-path__label,#ccgx-page .ccgx-assure__num,#ccgx-page .ccgx-summary__sub{display:block}#ccgx-page .ccgx-tag,#ccgx-page .ccgx-state,#ccgx-page .ccgx-chip,#ccgx-page .ccgx-pill{display:inline-flex}#ccgx-page .ccgx-disc__body>.ccgx-tag{margin-top:.2rem}#ccgx-page .ccgx-panel__bar>span,#ccgx-page .ccgx-console__bar>span{min-width:0}#ccgx-page p:not([class]){display:contents}#ccgx-page p:empty{display:none}#ccgx-page:not(.ccgx-js) .ccgx-reveal{opacity:1;transform:none}#ccgx-page:not(.ccgx-js) .ccgx-wrap::after{opacity:.85}#ccgx-page:not(.ccgx-js) .ccgx-branch::after{transform:scaleX(1)}#ccgx-page:not(.ccgx-js) .ccgx-node::before{background:var(--accent,var(--blue-2));border-color:color-mix(in srgb,var(--accent,var(--blue-2)) 70%,#ffffff);box-shadow:0 0 14px color-mix(in srgb,var(--accent,var(--blue-2)) 60%,transparent)}#ccgx-page .ccgx-sec--last .ccgx-wrap::before{bottom:46px}#ccgx-page .ccgx-sec--last .ccgx-wrap::after{bottom:46px}#ccgx-page .ccgx-terminal{position:absolute;left:calc(var(--rail-x) - 6px);bottom:34px;width:14px;height:14px;border-radius:4px;background:var(--steel-2);border:2px solid var(--line-lit);pointer-events:none;transition:background .5s ease,box-shadow .5s ease}#ccgx-page .ccgx-sec.is-live .ccgx-terminal,#ccgx-page:not(.ccgx-js) .ccgx-terminal{background:var(--accent,var(--blue-2));box-shadow:0 0 14px color-mix(in srgb,var(--accent,var(--blue-2)) 60%,transparent)} /* ===== PASS 1/8: conversion architecture (content/DOM only) ===== */ #ccgx-page .ccgx-anchor-alias{position:relative;display:block;top:-1px;height:1px;overflow:hidden} #ccgx-page .ccgx-hero__visual{min-height:clamp(300px,32vw,500px);position:relative} #ccgx-page .ccgx-hero__visual::before{content:"";position:absolute;inset:10% 8%;border:1px solid rgba(128,176,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(47,50,55,.18),rgba(27,30,33,.05));box-shadow:inset 0 1px 0 rgba(190,216,255,.04);pointer-events:none} #ccgx-page .ccgx-route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start} #ccgx-page .ccgx-route{margin:0;border-color:var(--line-lit);background:linear-gradient(160deg,rgba(58,63,69,.9),rgba(41,44,48,.94))} #ccgx-page .ccgx-route + .ccgx-route{margin-top:0} #ccgx-page .ccgx-route>summary{min-height:132px;padding:1.25rem;align-items:flex-start} #ccgx-page .ccgx-route__title{display:block;color:var(--text);font-size:1.08rem;font-weight:800;line-height:1.25;margin-bottom:.35rem} #ccgx-page .ccgx-route__desc{display:block;color:var(--muted);font-size:.9rem;line-height:1.5} #ccgx-page .ccgx-route[open]{grid-column:1/-1} #ccgx-page .ccgx-route[open]>summary{min-height:auto} #ccgx-page .ccgx-route__body{padding:0 1.25rem 1.25rem} #ccgx-page .ccgx-route-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem} #ccgx-page .ccgx-route-item{padding:1rem 1.05rem;border:1px solid var(--line-soft);border-radius:12px;background:rgba(27,30,33,.76)} #ccgx-page .ccgx-route-item h3{font-size:1rem;margin-bottom:.35rem} #ccgx-page .ccgx-route-item p{font-size:.88rem;line-height:1.5} #ccgx-page .ccgx-route__action{margin-top:1rem} #ccgx-page .ccgx-process3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} #ccgx-page .ccgx-process3 .ccgx-step{grid-template-columns:auto 1fr;height:100%} #ccgx-page .ccgx-policyline{margin-top:1.25rem;padding:1rem 1.1rem;border-left:3px solid var(--cyan);background:rgba(45,49,53,.94);border-radius:10px;color:var(--muted)} #ccgx-page .ccgx-case3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1.25rem} #ccgx-page .ccgx-case3__item{padding:1.05rem 1.1rem;border:1px solid var(--line-soft);border-radius:12px;background:rgba(27,30,33,.78)} #ccgx-page .ccgx-case3__label{display:block;margin-bottom:.4rem;color:var(--accent,var(--blue-2));font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase} #ccgx-page .ccgx-outcome-strip{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem} #ccgx-page .ccgx-outcome-strip span{padding:.48rem .78rem;border:1px solid var(--line);border-radius:999px;background:rgba(45,49,53,.9);color:var(--muted);font-size:.82rem;font-weight:650} #ccgx-page .ccgx-tech-index{display:grid;gap:.65rem} #ccgx-page .ccgx-tech-index>.ccgx-disc{background:rgba(41,44,48,.94)} #ccgx-page .ccgx-tech-index .ccgx-disc__body{padding-bottom:1.4rem} #ccgx-page .ccgx-tech-index .ccgx-panel,#ccgx-page .ccgx-tech-index .ccgx-card,#ccgx-page .ccgx-tech-index .ccgx-step,#ccgx-page .ccgx-tech-index .ccgx-path,#ccgx-page .ccgx-tech-index .ccgx-note,#ccgx-page .ccgx-tech-index .ccgx-row,#ccgx-page .ccgx-tech-index .ccgx-disc{background-color:rgba(41,44,48,.98)} #ccgx-page .ccgx-tech-index .ccgx-sec__head,#ccgx-page .ccgx-tech-index .ccgx-subhead{max-width:none;margin:1.4rem 0 1rem} #ccgx-page .ccgx-tech-index .ccgx-selector{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} #ccgx-page .ccgx-tech-index .ccgx-grid{margin-top:1rem!important} #ccgx-page .ccgx-faq-short{display:grid;gap:.65rem} #ccgx-page .ccgx-faq-short>.ccgx-disc{margin-top:0} #ccgx-page .ccgx-more-questions{margin-top:.8rem} #ccgx-page .ccgx-more-questions .ccgx-faq-item{margin-top:.55rem} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner{grid-template-columns:minmax(0,1fr) auto} #ccgx-page .ccgx-final--pass1 .ccgx-summary{display:none} @media(max-width:1024px){#ccgx-page .ccgx-route-grid,#ccgx-page .ccgx-process3,#ccgx-page .ccgx-case3{grid-template-columns:1fr 1fr}#ccgx-page .ccgx-route[open]{grid-column:1/-1}#ccgx-page .ccgx-route-items{grid-template-columns:1fr 1fr}} @media(max-width:760px){#ccgx-page .ccgx-route-grid,#ccgx-page .ccgx-process3,#ccgx-page .ccgx-case3,#ccgx-page .ccgx-route-items{grid-template-columns:1fr}#ccgx-page .ccgx-route[open]{grid-column:auto}#ccgx-page .ccgx-route>summary{min-height:auto}#ccgx-page .ccgx-hero__visual{min-height:220px}#ccgx-page .ccgx-final--pass1 .ccgx-final__inner{grid-template-columns:1fr}} /* ===== PASS 2/8: desktop composition + scale ===== */ #ccgx-page{ --shell:min(94vw,1580px); --shell-wide:min(97vw,1720px); --pad-x:clamp(24px,2vw,38px); --pad-rail:clamp(52px,3.6vw,68px); --sec-y:clamp(4.35rem,5.6vw,6.75rem); --maxw:1580px; } #ccgx-page .ccgx-wrap{ width:var(--shell); max-width:none; padding:var(--sec-y) var(--pad-x) var(--sec-y) var(--pad-rail); } #ccgx-page .ccgx-wrap::before,#ccgx-page .ccgx-wrap::after{left:18px} #ccgx-page .ccgx-node{left:11px} #ccgx-page .ccgx-branch{left:34px;width:calc(var(--pad-rail) - 48px)} #ccgx-page .ccgx-pulse{left:15px} #ccgx-page .ccgx-terminal{left:12px} #ccgx-page .ccgx-hero__inner{ width:var(--shell-wide); max-width:none; min-height:clamp(620px,48vw,760px); padding:clamp(4.8rem,6vw,7rem) clamp(34px,3.4vw,64px) clamp(4.2rem,5vw,6rem); grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(3.5rem,6vw,7rem); } #ccgx-page .ccgx-hero__copy{max-width:710px} #ccgx-page .ccgx-hero h1{font-size:clamp(3.6rem,5vw,5.35rem);max-width:10.8ch;line-height:1.03;letter-spacing:-.04em} #ccgx-page .ccgx-hero__lead{max-width:58ch;font-size:clamp(1.08rem,1.15vw,1.22rem);line-height:1.65} #ccgx-page .ccgx-hero__paid{max-width:58ch} #ccgx-page .ccgx-hero__visual{min-height:clamp(390px,34vw,580px)} #ccgx-page .ccgx-hero__visual::before{inset:4% 2% 2% 2%;border-radius:34px} #ccgx-page .ccgx-hero__descend{max-width:none;width:var(--shell-wide)} #ccgx-page .ccgx-hero__descend::before{left:18px} #ccgx-page .ccgx-hero__descend::after{left:13px} #ccgx-page .ccgx-sec__head{ max-width:none; margin-bottom:clamp(2.5rem,3.8vw,4.25rem); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.78fr); column-gap:clamp(2.5rem,5vw,6rem); row-gap:.8rem; align-items:end; } #ccgx-page .ccgx-sec__head>.ccgx-sec__kicker{grid-column:1/-1;margin-bottom:.15rem} #ccgx-page .ccgx-sec__head>h2{grid-column:1;max-width:14ch;font-size:clamp(2.45rem,3.1vw,3.65rem);line-height:1.06;letter-spacing:-.035em} #ccgx-page .ccgx-sec__head>.ccgx-sec__intro{grid-column:2;grid-row:2;margin-top:0;max-width:58ch;font-size:1.04rem;line-height:1.65;align-self:end} #ccgx-page #what-the-diagnostic-includes .ccgx-sec__head{grid-template-columns:1fr;max-width:980px} #ccgx-page #what-the-diagnostic-includes .ccgx-sec__head>h2{max-width:none} #ccgx-page #diagnostic-faq-and-purchase .ccgx-sec__head>h2{max-width:12ch} #ccgx-page .ccgx-route-grid{gap:clamp(1rem,1.4vw,1.4rem)} #ccgx-page .ccgx-route>summary{min-height:154px;padding:1.45rem 1.5rem} #ccgx-page .ccgx-route__title{font-size:1.18rem} #ccgx-page .ccgx-route__desc{font-size:.94rem;max-width:39ch} #ccgx-page .ccgx-route__body{padding:0 1.5rem 1.5rem} #ccgx-page .ccgx-route-items{gap:1rem} #ccgx-page .ccgx-route-item{min-height:134px;padding:1.15rem 1.2rem} #ccgx-page .ccgx-route-item h3{font-size:1.04rem} #ccgx-page .ccgx-process3{gap:clamp(1rem,1.4vw,1.4rem)} #ccgx-page .ccgx-process3 .ccgx-step{min-height:188px;padding:1.4rem 1.45rem;gap:1.2rem} #ccgx-page .ccgx-process3 .ccgx-step__num{width:44px;height:44px;border-radius:12px;font-size:.82rem} #ccgx-page .ccgx-process3 .ccgx-step h3{font-size:1.14rem;line-height:1.25;margin-bottom:.55rem} #ccgx-page .ccgx-process3 .ccgx-step p{font-size:.96rem;line-height:1.6} #ccgx-page .ccgx-policyline{max-width:1180px;margin-top:1.45rem;padding:1.1rem 1.25rem} #ccgx-page .ccgx-case3{grid-template-columns:minmax(0,.82fr) minmax(0,1.22fr) minmax(0,.88fr);gap:1rem} #ccgx-page .ccgx-case3__item{min-height:158px;padding:1.3rem 1.35rem} #ccgx-page .ccgx-case3__item p{font-size:.96rem;line-height:1.62} #ccgx-page .ccgx-outcome-strip{gap:.65rem} #ccgx-page .ccgx-outcome-strip span{padding:.56rem .9rem} #ccgx-page .ccgx-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;padding:clamp(1.6rem,2vw,2.2rem) clamp(1.7rem,2.4vw,2.6rem)} #ccgx-page .ccgx-cta__copy{max-width:760px} #ccgx-page .ccgx-tech-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem} #ccgx-page .ccgx-tech-index>.ccgx-disc{margin-top:0} #ccgx-page .ccgx-tech-index>.ccgx-disc[open]{grid-column:1/-1} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary{min-height:88px;padding:1.05rem 1.2rem} #ccgx-page .ccgx-tech-index>.ccgx-disc .ccgx-route__desc{max-width:56ch} #ccgx-page .ccgx-faq-short{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem} #ccgx-page .ccgx-faq-short>.ccgx-disc{margin-top:0} #ccgx-page .ccgx-faq-short>.ccgx-disc[open]{grid-column:1/-1} #ccgx-page .ccgx-more-questions{max-width:none} #ccgx-page .ccgx-final__inner{grid-template-columns:minmax(0,1fr) auto;gap:clamp(3rem,5vw,6rem)} #ccgx-page .ccgx-final__inner>div:first-child{max-width:980px} #ccgx-page .ccgx-final__inner h2{font-size:clamp(2.8rem,4vw,4.4rem);max-width:12ch;line-height:1.04} #ccgx-page .ccgx-final__inner .ccgx-sec__intro{max-width:60ch;font-size:1.08rem} #ccgx-page .ccgx-final__actions{gap:1rem} @media (min-width:1800px){ #ccgx-page .ccgx-wrap{padding-left:68px;padding-right:38px} #ccgx-page .ccgx-hero__inner{padding-left:64px;padding-right:64px} #ccgx-page .ccgx-route>summary{min-height:166px} } @media (max-width:1120px){ #ccgx-page{--shell:min(96vw,1060px);--shell-wide:min(98vw,1100px);--pad-rail:48px} #ccgx-page .ccgx-hero__inner{grid-template-columns:1fr;min-height:auto;gap:2rem} #ccgx-page .ccgx-hero__copy{max-width:760px} #ccgx-page .ccgx-hero h1{max-width:12ch} #ccgx-page .ccgx-hero__visual{min-height:320px} #ccgx-page .ccgx-sec__head{grid-template-columns:1fr;max-width:900px} #ccgx-page .ccgx-sec__head>.ccgx-sec__intro{grid-column:1;grid-row:auto;max-width:64ch} #ccgx-page .ccgx-route-grid,#ccgx-page .ccgx-process3,#ccgx-page .ccgx-case3{grid-template-columns:1fr 1fr} #ccgx-page .ccgx-route[open]{grid-column:1/-1} #ccgx-page .ccgx-case3__item:nth-child(2){grid-column:span 1} #ccgx-page .ccgx-cta{grid-template-columns:1fr} } @media (max-width:760px){ #ccgx-page{--shell:100%;--shell-wide:100%;--pad-x:1.05rem;--pad-rail:40px;--sec-y:clamp(3rem,10vw,4rem)} #ccgx-page .ccgx-wrap{width:100%;padding-right:1.05rem;padding-left:40px} #ccgx-page .ccgx-wrap::before,#ccgx-page .ccgx-wrap::after{left:13px} #ccgx-page .ccgx-node{left:6px} #ccgx-page .ccgx-pulse{left:10px} #ccgx-page .ccgx-branch{left:29px;width:10px} #ccgx-page .ccgx-terminal{left:7px} #ccgx-page .ccgx-hero__inner{width:100%;padding:3.5rem 1.1rem 3rem;grid-template-columns:1fr} #ccgx-page .ccgx-hero h1{font-size:clamp(2.65rem,12vw,3.6rem);max-width:11ch} #ccgx-page .ccgx-hero__visual{min-height:220px} #ccgx-page .ccgx-hero__descend{width:100%} #ccgx-page .ccgx-hero__descend::before{left:13px} #ccgx-page .ccgx-hero__descend::after{left:8px} #ccgx-page .ccgx-sec__head{display:block;margin-bottom:2.35rem} #ccgx-page .ccgx-sec__head>h2{font-size:clamp(2rem,9vw,2.75rem);max-width:none} #ccgx-page .ccgx-sec__head>.ccgx-sec__intro{margin-top:1rem} #ccgx-page .ccgx-route-grid,#ccgx-page .ccgx-process3,#ccgx-page .ccgx-case3,#ccgx-page .ccgx-route-items,#ccgx-page .ccgx-tech-index,#ccgx-page .ccgx-faq-short{grid-template-columns:1fr} #ccgx-page .ccgx-tech-index>.ccgx-disc[open],#ccgx-page .ccgx-faq-short>.ccgx-disc[open]{grid-column:auto} #ccgx-page .ccgx-process3 .ccgx-step,#ccgx-page .ccgx-case3__item{min-height:auto} #ccgx-page .ccgx-cta{display:flex;flex-direction:column;align-items:stretch} #ccgx-page .ccgx-final__inner{grid-template-columns:1fr} #ccgx-page .ccgx-final__inner h2{font-size:clamp(2.2rem,10vw,3.2rem);max-width:none} } /* ==== ccgx-pass3-style (verbatim from the page body) ==== */ /* ===== PASS 3/8: readability + premium material system ===== */ #ccgx-page{ --bg:#0b172b; --bg-deep:#07111f; --steel:#10233f; --steel-2:#142a4a; --panel:#132a4a; --panel-2:#18365d; --text:#f8fbff; --muted:#d1dceb; --muted-2:#9caec6; --line-soft:rgba(147,181,237,.115); --line:rgba(151,187,244,.19); --line-lit:rgba(136,188,255,.46); --surf-1:linear-gradient(155deg,rgba(17,37,66,.998),rgba(8,20,38,.998)); --surf-2:linear-gradient(158deg,rgba(20,42,74,.992),rgba(11,25,46,.994)); --surf-3:linear-gradient(158deg,rgba(24,48,82,.955),rgba(14,29,52,.965)); --surf-data:rgba(8,19,36,.975); --edge-soft:rgba(165,197,244,.16); --edge-mid:rgba(150,190,250,.25); --edge-active:rgba(116,178,255,.58); --inner-hi:rgba(218,233,255,.065); --inner-lo:rgba(0,5,14,.48); --lift-0:0 7px 18px rgba(1,7,18,.14); --lift-1:0 14px 34px rgba(1,7,18,.24); --lift-2:0 22px 52px rgba(1,7,18,.32); --reading:#0b1a31; color-scheme:dark; } #ccgx-page p{color:var(--muted)} #ccgx-page .ccgx-mono{color:#a8bad1} #ccgx-page .ccgx-sec__kicker,#ccgx-page .ccgx-subhead .ccgx-mono{filter:saturate(.9);text-shadow:0 0 14px color-mix(in srgb,var(--accent,var(--blue-2)) 18%,transparent)} /* Open prose gets a quiet field with no visible rectangle. */ #ccgx-page .ccgx-hero__copy, #ccgx-page .ccgx-sec__head, #ccgx-page .ccgx-subhead, #ccgx-page .ccgx-final__inner>div:first-child{position:relative;isolation:isolate} #ccgx-page .ccgx-hero__copy::before, #ccgx-page .ccgx-sec__head::before, #ccgx-page .ccgx-subhead::before, #ccgx-page .ccgx-final__inner>div:first-child::before{ content:"";position:absolute;z-index:-1;pointer-events:none; inset:-1.6rem -2.6rem; background:radial-gradient(ellipse at 34% 50%,rgba(22,24,26,.995) 0%,rgba(26,28,31,.97) 48%,rgba(28,30,33,.74) 68%,rgba(28,30,33,.18) 86%,transparent 100%); filter:saturate(.92); } #ccgx-page .ccgx-sec__head::before{inset:-1.8rem -3.2rem;background:linear-gradient(90deg,rgba(22,24,26,.995) 0%,rgba(26,28,31,.985) 38%,rgba(26,28,31,.91) 64%,rgba(26,28,31,.28) 88%,transparent 100%)} #ccgx-page .ccgx-subhead::before{inset:-1.25rem -2rem;background:radial-gradient(ellipse at 28% 50%,rgba(22,24,26,.99),rgba(26,28,31,.93) 56%,rgba(26,28,31,.16) 88%,transparent 100%)} #ccgx-page .ccgx-final__inner>div:first-child::before{inset:-2rem -3rem;background:radial-gradient(ellipse at 30% 50%,rgba(30,33,36,.995),rgba(35,37,41,.96) 58%,rgba(35,37,41,.12) 90%,transparent 100%)} /* Primary modules: dense reading surfaces. */ #ccgx-page .ccgx-panel, #ccgx-page .ccgx-console, #ccgx-page .ccgx-summary, #ccgx-page .ccgx-cta, #ccgx-page .ccgx-route[open]{ border-color:var(--edge-mid); background:var(--surf-1); box-shadow:inset 0 1px 0 var(--inner-hi),inset 0 -1px 0 var(--inner-lo),var(--lift-2); } #ccgx-page .ccgx-panel__bar,#ccgx-page .ccgx-console__bar{ background:linear-gradient(180deg,rgba(62,67,73,.98),rgba(41,44,49,.985)); border-bottom-color:rgba(164,197,248,.15); box-shadow:inset 0 1px 0 rgba(230,240,255,.045); } #ccgx-page .ccgx-panel__body,#ccgx-page .ccgx-console__body{background:rgba(23,25,28,.18)} /* Secondary modules: still nearly solid, but visually lighter than primary. */ #ccgx-page .ccgx-card, #ccgx-page .ccgx-card--quiet, #ccgx-page .ccgx-step, #ccgx-page .ccgx-route, #ccgx-page .ccgx-route-item, #ccgx-page .ccgx-case3__item, #ccgx-page .ccgx-policyline, #ccgx-page .ccgx-note, #ccgx-page .ccgx-assure__item{ border-color:var(--edge-soft); background:var(--surf-2); box-shadow:inset 0 1px 0 rgba(222,236,255,.05),inset 0 -1px 0 rgba(10,11,12,.34),var(--lift-0); } #ccgx-page .ccgx-card--quiet{box-shadow:inset 0 1px 0 rgba(222,236,255,.04),inset 0 -1px 0 rgba(10,11,12,.32)} #ccgx-page .ccgx-step:hover,#ccgx-page .ccgx-route:hover{background:linear-gradient(158deg,rgba(57,62,68,.996),rgba(34,37,40,.997));border-color:rgba(143,190,255,.34)} /* Disclosure rows are text substrates, not transparent strips. */ #ccgx-page .ccgx-disc{ border-color:rgba(151,187,244,.13); background:linear-gradient(155deg,rgba(14,30,54,.986),rgba(8,20,38,.991)); box-shadow:inset 0 1px 0 rgba(224,237,255,.035),inset 0 -1px 0 rgba(0,5,14,.34); } #ccgx-page .ccgx-disc>summary{background:transparent} #ccgx-page .ccgx-disc>summary:hover{background:linear-gradient(90deg,rgba(92,149,238,.075),rgba(92,149,238,.025))} #ccgx-page .ccgx-disc[open]{ border-color:var(--edge-active); background:var(--surf-1); box-shadow:inset 0 1px 0 rgba(229,240,255,.07),inset 0 -1px 0 rgba(10,11,12,.45),0 16px 40px rgba(12,13,15,.26),0 0 0 1px rgba(73,137,237,.055); } #ccgx-page .ccgx-disc__body{position:relative;color:var(--muted)} #ccgx-page .ccgx-disc__body::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(145,190,255,.18),transparent)} #ccgx-page .ccgx-disc__node{background:#0c1b32;border-color:rgba(130,181,255,.38);box-shadow:inset 0 0 0 2px rgba(4,11,23,.75)} /* Structured data rows are deliberately flatter and denser. */ #ccgx-page .ccgx-row,#ccgx-page .ccgx-evidence__row{ border-color:rgba(147,181,237,.11); background:var(--surf-data); border-radius:10px; box-shadow:inset 0 1px 0 rgba(218,233,255,.025); } #ccgx-page .ccgx-row:hover,#ccgx-page .ccgx-evidence__row:hover{border-color:rgba(134,186,255,.24);background:rgba(30,33,36,.985)} /* Case-study and decision modules gain material hierarchy rather than generic glow. */ #ccgx-page .ccgx-route{overflow:hidden} #ccgx-page .ccgx-route::before,#ccgx-page .ccgx-case3__item::before,#ccgx-page .ccgx-step::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(188,216,255,.13),transparent) } #ccgx-page .ccgx-route[open]::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent 4%,var(--accent,var(--blue-2)) 30%,color-mix(in srgb,var(--accent,var(--blue-2)) 30%,transparent) 80%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--accent,var(--blue-2)) 35%,transparent)} #ccgx-page .ccgx-case3__item{position:relative} #ccgx-page .ccgx-case3__item:nth-child(2){background:linear-gradient(155deg,rgba(49,53,58,.997),rgba(28,30,33,.997));border-color:rgba(141,188,255,.22)} /* Notes use purpose-specific color without becoming translucent. */ #ccgx-page .ccgx-note{border-left-color:var(--accent,var(--blue-2));background:linear-gradient(155deg,rgba(47,50,55,.996),rgba(29,32,35,.997))} #ccgx-page .ccgx-note--warn{border-left-color:var(--amber);background:linear-gradient(155deg,rgba(52,41,27,.99),rgba(28,25,25,.995));border-color:rgba(240,180,88,.23)} /* CTA is a substantial module, not translucent glass. */ #ccgx-page .ccgx-cta{ position:relative;overflow:hidden; background:radial-gradient(780px 260px at 8% 0%,rgba(74,134,255,.18),transparent 66%),linear-gradient(145deg,rgba(63,68,74,.998),rgba(32,35,39,.998)); border-color:rgba(126,182,255,.38); } #ccgx-page .ccgx-cta::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(204,226,255,.24),transparent)} #ccgx-page .ccgx-cta::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-80px;top:-105px;background:radial-gradient(circle,rgba(123,104,238,.14),transparent 70%);pointer-events:none} #ccgx-page .ccgx-cta>*{position:relative;z-index:1} /* Buttons/chips remain visually lighter because they do not carry body copy. */ #ccgx-page .ccgx-btn--secondary{background:rgba(42,45,49,.96);border-color:rgba(145,188,250,.28);box-shadow:inset 0 1px 0 rgba(226,239,255,.055)} #ccgx-page .ccgx-btn--secondary:hover{background:rgba(56,61,67,.98);border-color:rgba(145,195,255,.42)} #ccgx-page .ccgx-chip,#ccgx-page .ccgx-pill,#ccgx-page .ccgx-tag,#ccgx-page .ccgx-state{background:rgba(44,48,52,.93);border-color:rgba(147,184,242,.17)} #ccgx-page .ccgx-state--ok{background:rgba(18,59,55,.94);border-color:rgba(57,201,165,.32)} #ccgx-page .ccgx-state--warn{background:rgba(71,53,28,.94);border-color:rgba(240,180,88,.32)} #ccgx-page .ccgx-state--info{background:rgba(44,48,52,.94);border-color:rgba(85,200,239,.32)} /* Typography + readable density. */ #ccgx-page .ccgx-route__desc,#ccgx-page .ccgx-sec__intro,#ccgx-page .ccgx-cta p,#ccgx-page .ccgx-final__micro{color:#c7d5e7} #ccgx-page .ccgx-disc__title,#ccgx-page .ccgx-route__title,#ccgx-page .ccgx-note__title,#ccgx-page .ccgx-cta__title{color:#f9fcff} #ccgx-page .ccgx-ticks li,#ccgx-page .ccgx-summary li{color:#cbd8e8} #ccgx-page .ccgx-sec__head>h2,#ccgx-page .ccgx-final__inner h2,#ccgx-page .ccgx-hero h1{text-shadow:0 2px 18px rgba(0,5,14,.22)} /* Final section uses a deeper physical backdrop but text remains on its reading field. */ #ccgx-page .ccgx-final{background:radial-gradient(820px 460px at 18% 12%,rgba(61,112,204,.17),transparent 64%),radial-gradient(720px 430px at 86% 76%,rgba(113,88,205,.14),transparent 63%),linear-gradient(190deg,#1e2024,#2d3135)} @media(max-width:1120px){ #ccgx-page .ccgx-sec__head::before{background:radial-gradient(ellipse at 30% 50%,rgba(22,24,26,.995),rgba(26,28,31,.96) 62%,rgba(26,28,31,.16) 90%,transparent 100%)} } @media(max-width:760px){ #ccgx-page .ccgx-hero__copy::before,#ccgx-page .ccgx-sec__head::before,#ccgx-page .ccgx-subhead::before,#ccgx-page .ccgx-final__inner>div:first-child::before{inset:-1rem -.7rem;background:linear-gradient(90deg,rgba(22,24,26,.995),rgba(26,28,31,.985) 74%,rgba(26,28,31,.4) 94%,transparent)} #ccgx-page .ccgx-card,#ccgx-page .ccgx-card--quiet,#ccgx-page .ccgx-step,#ccgx-page .ccgx-route,#ccgx-page .ccgx-route-item,#ccgx-page .ccgx-case3__item,#ccgx-page .ccgx-policyline,#ccgx-page .ccgx-note,#ccgx-page .ccgx-assure__item{box-shadow:inset 0 1px 0 rgba(222,236,255,.045),inset 0 -1px 0 rgba(10,11,12,.32),0 8px 20px rgba(12,13,15,.16)} } /* ==== ccgx-pass3-correction (verbatim from the page body) ==== */ /* PASS 3 visual correction: eliminate rectangular-looking header fields and close remaining translucency gaps. */ #ccgx-page .ccgx-sec__head::before{ inset:-2rem -2.8rem; background: radial-gradient(ellipse 54% 115% at 20% 50%,rgba(22,24,26,.995) 0%,rgba(26,28,31,.97) 55%,rgba(26,28,31,.54) 76%,transparent 100%), radial-gradient(ellipse 48% 108% at 82% 54%,rgba(22,24,26,.99) 0%,rgba(26,28,31,.94) 54%,rgba(26,28,31,.42) 76%,transparent 100%); } #ccgx-page .ccgx-hero__copy::before{ inset:-1.8rem -3rem; background:radial-gradient(ellipse 76% 115% at 28% 50%,rgba(22,24,26,.995) 0%,rgba(26,28,31,.965) 52%,rgba(26,28,31,.58) 74%,rgba(26,28,31,.12) 91%,transparent 100%); } #ccgx-page .ccgx-subhead::before{ inset:-1.45rem -2.35rem; background:radial-gradient(ellipse 72% 115% at 30% 50%,rgba(22,24,26,.995) 0%,rgba(26,28,31,.95) 55%,rgba(26,28,31,.44) 78%,transparent 100%); } #ccgx-page .ccgx-final__inner>div:first-child::before{ inset:-2.2rem -3.2rem; background:radial-gradient(ellipse 78% 120% at 28% 50%,rgba(28,30,33,.997) 0%,rgba(33,36,39,.96) 56%,rgba(33,36,39,.48) 79%,transparent 100%); } #ccgx-page .ccgx-hero__paid{ background:linear-gradient(150deg,rgba(39,42,46,.992),rgba(30,32,36,.995)); border:1px solid rgba(85,200,239,.18);border-left:3px solid var(--cyan); box-shadow:inset 0 1px 0 rgba(213,241,250,.045); } #ccgx-page .ccgx-hero__eyebrow{ background:rgba(27,29,32,.97);border-color:rgba(150,190,250,.28);box-shadow:inset 0 1px 0 rgba(222,236,255,.045); } #ccgx-page .ccgx-outcome-strip span{ background:rgba(40,43,47,.975);border-color:rgba(149,187,245,.16);box-shadow:inset 0 1px 0 rgba(222,236,255,.035); } #ccgx-page .ccgx-chip,#ccgx-page .ccgx-pill,#ccgx-page .ccgx-tag,#ccgx-page .ccgx-state{background:rgba(42,45,49,.97)} #ccgx-page .ccgx-state--ok{background:rgba(15,55,52,.97)} #ccgx-page .ccgx-state--warn{background:rgba(67,50,26,.97)} #ccgx-page .ccgx-state--info{background:rgba(42,45,50,.97)} @media(max-width:760px){ #ccgx-page .ccgx-hero__copy::before,#ccgx-page .ccgx-sec__head::before,#ccgx-page .ccgx-subhead::before,#ccgx-page .ccgx-final__inner>div:first-child::before{ inset:-1.1rem -.85rem; background:radial-gradient(ellipse 105% 115% at 35% 50%,rgba(22,24,26,.997) 0%,rgba(26,28,31,.97) 64%,rgba(26,28,31,.46) 84%,transparent 100%); } } /* ==== ccgx-pass3-final-tuning (verbatim from the page body) ==== */ /* Final Pass 3 tuning: headings remain open; readability comes from clean background/keepout, not faux panels. */ #ccgx-page{--surf-2:linear-gradient(158deg,rgba(24,48,82,.994),rgba(13,29,53,.996));--surf-3:linear-gradient(158deg,rgba(27,53,89,.97),rgba(15,31,56,.978))} #ccgx-page .ccgx-sec__head::before,#ccgx-page .ccgx-subhead::before{display:none} #ccgx-page .ccgx-sec__head,#ccgx-page .ccgx-subhead{background:none} #ccgx-page .ccgx-disc{background:linear-gradient(155deg,rgba(43,46,50,.991),rgba(28,30,33,.994))} #ccgx-page .ccgx-route,#ccgx-page .ccgx-step,#ccgx-page .ccgx-case3__item,#ccgx-page .ccgx-card,#ccgx-page .ccgx-card--quiet{border-color:rgba(157,193,248,.19)} #ccgx-page .ccgx-route,#ccgx-page .ccgx-step,#ccgx-page .ccgx-case3__item{box-shadow:inset 0 1px 0 rgba(226,239,255,.055),inset 0 -1px 0 rgba(10,11,12,.34),0 8px 22px rgba(12,13,15,.15)} #ccgx-page .ccgx-tech-index>.ccgx-disc,#ccgx-page .ccgx-faq-short>.ccgx-disc,#ccgx-page .ccgx-more-questions{border-color:rgba(157,193,248,.16)} @media(max-width:760px){#ccgx-page .ccgx-sec__head::before,#ccgx-page .ccgx-subhead::before{display:none}} /* ==== ccgx-pass5-pcb-realism (verbatim from the page body) ==== */ /* ===== PASS 5/8: PCB REALISM — static board topology, no new animation physics yet ===== */ #ccgx-page{position:relative;isolation:isolate;background:#071426; background-image: radial-gradient(1200px 700px at 15% 4%,rgba(58,104,180,.10),transparent 70%), radial-gradient(1100px 700px at 88% 43%,rgba(97,75,178,.07),transparent 72%), linear-gradient(rgba(138,175,228,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(138,175,228,.018) 1px,transparent 1px); background-size:auto,auto,48px 48px,48px 48px} #ccgx-page::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.52; background:linear-gradient(112deg,transparent 0 16%,rgba(174,206,246,.022) 23%,transparent 31% 60%,rgba(162,193,237,.018) 68%,transparent 75%)} #ccgx-page .ccgx-hero,#ccgx-page .ccgx-sec{position:relative;isolation:isolate;overflow:hidden} #ccgx-page .ccgx-sec{background:linear-gradient(180deg,rgba(28,30,33,.94),rgba(25,27,30,.98))} #ccgx-page .ccgx-sec--alt{background:linear-gradient(180deg,rgba(23,25,27,.985),rgba(28,30,33,.95) 54%,rgba(23,25,27,.985))} #ccgx-page .ccgx-final{background:radial-gradient(900px 520px at 18% 16%,rgba(61,112,204,.14),transparent 65%),radial-gradient(760px 460px at 85% 75%,rgba(113,88,205,.12),transparent 64%),linear-gradient(190deg,rgba(25,27,30,.97),rgba(36,38,42,.98))} #ccgx-page .ccgx-wrap,#ccgx-page .ccgx-hero__inner,#ccgx-page .ccgx-final__inner{position:relative;z-index:3} /* Retire the old one-line rail/timeline artwork. The board itself now carries continuity. */ #ccgx-page .ccgx-wrap::before,#ccgx-page .ccgx-wrap::after,#ccgx-page .ccgx-node,#ccgx-page .ccgx-branch,#ccgx-page .ccgx-pulse,#ccgx-page .ccgx-terminal{display:none!important} #ccgx-page .ccgx-hero__grid,#ccgx-page .ccgx-hero__circuit{display:none!important} /* Static board field. Every section shares exact edge-rail coordinates so it reads as one assembly. */ #ccgx-page .ccgx-pcb-field{position:absolute;z-index:1;left:50%;top:0;width:min(100%,2200px);height:100%;min-height:620px;transform:translateX(-50%);pointer-events:none;overflow:visible;opacity:.84} #ccgx-page .ccgx-pcb-hero{opacity:.95} #ccgx-page .ccgx-pcb-field *{vector-effect:non-scaling-stroke} /* Copper hierarchy. */ #ccgx-page .pcb-bg,#ccgx-page .pcb-fine,#ccgx-page .pcb-struct,#ccgx-page .pcb-bus,#ccgx-page .pcb-diff,#ccgx-page .pcb-active{fill:none;stroke-linecap:round;stroke-linejoin:round} #ccgx-page .pcb-bg{stroke:#658fca;stroke-width:.72;opacity:.19} #ccgx-page .pcb-fine{stroke:#729bd3;stroke-width:.9;opacity:.28} #ccgx-page .pcb-struct{stroke:#79a2d9;stroke-width:1.25;opacity:.34} #ccgx-page .pcb-bus{stroke:#86afe5;stroke-width:1.75;opacity:.43;filter:drop-shadow(0 1px 0 rgba(2,9,18,.45))} #ccgx-page .pcb-diff{stroke:#70aee6;stroke-width:1.18;opacity:.46} #ccgx-page .pcb-active{stroke:#79c6ef;stroke-width:1.85;opacity:.54;filter:drop-shadow(0 0 4px rgba(85,200,239,.16))} /* Copper pours and solder-mask material. */ #ccgx-page .pcb-pour{fill:rgba(65,104,157,.065);stroke:rgba(128,166,219,.16);stroke-width:1} #ccgx-page .pcb-pour-quiet{fill:rgba(72,111,166,.05);stroke-dasharray:3 6} #ccgx-page .pcb-pour-hero{fill:rgba(60,98,154,.055);stroke:rgba(135,173,225,.18);stroke-dasharray:6 8} /* Vias: plated annular rings, drilled barrel, subtle directional catch light. */ #ccgx-page .pcb-via-pad{fill:rgba(92,132,186,.18);stroke:rgba(135,178,233,.22);stroke-width:.85} #ccgx-page .pcb-via-ring{fill:#19385e;stroke:#82acd9;stroke-width:1.15;filter:drop-shadow(-.8px -.8px 0 rgba(199,224,255,.14))} #ccgx-page .pcb-via-hole{fill:#06111f;stroke:rgba(4,10,18,.8);stroke-width:.8} #ccgx-page .pcb-via-power .pcb-via-ring{fill:#214a73;stroke:#9bc1e8;stroke-width:1.4} #ccgx-page .pcb-teardrop{fill:rgba(119,160,211,.32);stroke:rgba(146,184,231,.24);stroke-width:.55} #ccgx-page .pcb-pad,#ccgx-page .pcb-testpad{fill:#284f79;stroke:#90b7e3;stroke-width:.7} #ccgx-page .pcb-testpad{fill:#1b3e68;opacity:.74} /* ICs and local components. */ #ccgx-page .pcb-ic-body{fill:#0a1829;stroke:rgba(145,180,226,.29);stroke-width:1.15;filter:drop-shadow(0 5px 8px rgba(0,5,12,.28))} #ccgx-page .pcb-ic-silk{fill:none;stroke:rgba(174,204,239,.22);stroke-width:.8;stroke-dasharray:6 5} #ccgx-page .pcb-pin1{fill:#6f9ac8;opacity:.58} #ccgx-page .pcb-pin{fill:#315f8a;stroke:rgba(155,193,231,.34);stroke-width:.55} #ccgx-page .pcb-bank-body{fill:#0b1c31;stroke:rgba(139,178,224,.24);stroke-width:.8} #ccgx-page .pcb-bga-ball{fill:#244a70;stroke:rgba(137,176,219,.24);stroke-width:.42} #ccgx-page .pcb-decouple{opacity:.82} #ccgx-page .pcb-stitch .pcb-via{opacity:.72} #ccgx-page .pcb-passive-body{fill:#102742;stroke:rgba(139,176,221,.22);stroke-width:.65} #ccgx-page .pcb-passive-pad{fill:#315e88;stroke:rgba(154,190,229,.34);stroke-width:.55} #ccgx-page .pcb-connector-shell{fill:#091725;stroke:rgba(145,181,223,.30);stroke-width:.9} #ccgx-page .pcb-connector-pad{fill:#315e8d;stroke:rgba(156,194,234,.32);stroke-width:.55} /* Mechanical / fabrication cues. */ #ccgx-page .pcb-mount-keep{fill:none;stroke:rgba(150,184,225,.14);stroke-width:.8;stroke-dasharray:4 5} #ccgx-page .pcb-mount-ring{fill:#173655;stroke:#7ea4ce;stroke-width:1.3} #ccgx-page .pcb-mount-hole{fill:#040b13;stroke:rgba(1,5,9,.8);stroke-width:1} #ccgx-page .pcb-silk{fill:none;stroke:rgba(182,208,237,.22);stroke-width:.7} #ccgx-page text.pcb-silk{fill:rgba(178,205,237,.34);stroke:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em} #ccgx-page .pcb-silk-label{font-size:16px;font-weight:700} #ccgx-page .pcb-silk-tiny{font-size:9px;font-weight:650} #ccgx-page .pcb-fid{fill:none;stroke:rgba(174,202,235,.25);stroke-width:.75} /* Power island. */ #ccgx-page .pcb-power .pcb-pour{fill:rgba(75,111,159,.08);stroke:rgba(143,181,227,.20)} #ccgx-page .pcb-choke{fill:#122b46;stroke:rgba(157,190,226,.28);stroke-width:.85;filter:drop-shadow(0 3px 4px rgba(0,6,14,.28))} #ccgx-page .pcb-mosfet{fill:#091622;stroke:rgba(141,177,216,.26);stroke-width:.62} #ccgx-page .pcb-thermal-via .pcb-via-pad{fill:rgba(80,123,172,.12)} #ccgx-page .pcb-thermal-via .pcb-via-ring{stroke:rgba(126,164,207,.62);stroke-width:.72} /* The content corridor is intentionally quiet: components live in margins/open zones. Panels remain opaque from Pass 3. */ #ccgx-page .ccgx-sec__head,#ccgx-page .ccgx-subhead{position:relative;z-index:4} /* Hero becomes the highest-detail board region, concentrated on the empty visual half. */ #ccgx-page .ccgx-hero{background:radial-gradient(1000px 620px at 79% 32%,rgba(58,104,185,.13),transparent 68%),radial-gradient(720px 520px at 14% 70%,rgba(45,88,164,.11),transparent 68%),linear-gradient(170deg,#091a31,#071426 70%)} #ccgx-page .ccgx-hero__visual{min-height:clamp(420px,35vw,610px);position:relative} #ccgx-page .ccgx-hero__visual::before{content:"";position:absolute;inset:5% 2% 3%;border:0!important;border-radius:0!important;background:radial-gradient(ellipse at 52% 45%,rgba(36,38,42,.04),transparent 70%)!important;box-shadow:none!important} #ccgx-page .pcb-components-hero{opacity:.98} /* Page-to-page continuity bridge: three reference rails descend from hero into the first section. */ #ccgx-page .ccgx-hero__descend{height:94px;width:var(--shell-wide);max-width:none;position:relative;background:transparent} #ccgx-page .ccgx-hero__descend::before{content:"";position:absolute;left:28px;top:-2px;bottom:-2px;width:34px;background:linear-gradient(90deg,transparent 0 3px,rgba(128,176,224,.30) 3px 4px,transparent 4px 15px,rgba(128,176,224,.23) 15px 17px,transparent 17px 28px,rgba(128,176,224,.18) 28px 29px,transparent 29px);filter:drop-shadow(0 0 5px rgba(85,200,239,.06))} #ccgx-page .ccgx-hero__descend::after{content:"";position:absolute;left:41px;top:42px;width:9px;height:9px;border-radius:50%;background:#17395f;border:1px solid #86afd8;box-shadow:0 0 0 4px rgba(96,142,195,.08)} /* Section hand-off band: edge buses remain visible across all sections while open typography is kept clean. */ #ccgx-page .ccgx-sec::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:84px;pointer-events:none;background:linear-gradient(180deg,rgba(22,24,26,.28),transparent)} /* Technical details intentionally use the quietest board intensity. */ #ccgx-page #repairs-parts-and-testing .ccgx-pcb-field{opacity:.56} #ccgx-page #diagnostic-faq-and-purchase .ccgx-pcb-field{opacity:.66} #ccgx-page .ccgx-final .ccgx-pcb-field{opacity:.80} @media(max-width:1024px){ #ccgx-page .ccgx-pcb-field{opacity:.66;width:1500px;left:50%} #ccgx-page .pcb-silk-tiny,#ccgx-page .pcb-fid,#ccgx-page .pcb-passive{opacity:.55} } @media(max-width:760px){ #ccgx-page .ccgx-pcb-field{width:1180px;opacity:.42;left:47%} #ccgx-page .ccgx-pcb-field .pcb-bg,#ccgx-page .ccgx-pcb-field .pcb-fine,#ccgx-page .ccgx-pcb-field .pcb-silk,#ccgx-page .ccgx-pcb-field .pcb-passive,#ccgx-page .ccgx-pcb-field .pcb-fid{display:none} #ccgx-page .ccgx-pcb-field .pcb-struct{opacity:.22} #ccgx-page .ccgx-pcb-field .pcb-bus{opacity:.32} #ccgx-page .ccgx-pcb-field .pcb-components{opacity:.48} #ccgx-page .ccgx-pcb-hero{opacity:.55;left:58%} #ccgx-page .ccgx-hero__descend{height:66px} } @media(prefers-reduced-motion:reduce){ /* Pass 5 adds no new motion; static PCB remains fully legible. */ } /* ==== ccgx-pass4-style (verbatim from the page body) ==== */ /* PASS 4 — component identity + interaction hierarchy. Content and PCB geometry unchanged. */ #ccgx-page{ --p4-edge:rgba(160,198,255,.20); --p4-edge-hot:rgba(128,176,255,.52); --p4-ink:#09182d; --p4-ink-2:#0d203a; --p4-ink-3:#122846; --p4-quiet:#0b1b31; --p4-soft-shadow:0 18px 48px rgba(0,7,18,.24); --p4-deep-shadow:0 28px 70px rgba(0,6,16,.36); } /* BUTTONS — more mechanical / deliberate, less generic pill. */ #ccgx-page .ccgx-btn{border-radius:10px;position:relative;isolation:isolate;overflow:hidden;letter-spacing:.005em} #ccgx-page .ccgx-btn::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:currentColor;opacity:.0;transition:opacity .2s ease} #ccgx-page .ccgx-btn--primary{border-color:rgba(184,213,255,.28);background:linear-gradient(135deg,#417ff3 0%,#655ce4 72%,#765ee8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 34px rgba(62,113,235,.27)} #ccgx-page .ccgx-btn--primary::after{content:"";position:absolute;right:10px;top:8px;width:22px;height:1px;background:rgba(255,255,255,.34);transform:skewX(-35deg);pointer-events:none} #ccgx-page .ccgx-btn--secondary{background:linear-gradient(180deg,rgba(55,60,65,.995),rgba(37,39,43,.995));border-color:rgba(151,190,248,.24)} #ccgx-page .ccgx-btn:hover::before,#ccgx-page .ccgx-btn:focus-visible::before{opacity:.58} /* HERO assurance becomes a compact status rail, not loose pills. */ #ccgx-page .ccgx-hero__assurance{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:0;margin-top:1.4rem;align-items:stretch} #ccgx-page .ccgx-hero__assurance .ccgx-chip{border-radius:0;background:linear-gradient(180deg,rgba(40,43,47,.995),rgba(30,32,36,.995));border:1px solid rgba(149,188,244,.18);padding:.62rem .88rem} #ccgx-page .ccgx-hero__assurance .ccgx-chip:first-child{border-radius:8px 0 0 8px} #ccgx-page .ccgx-hero__assurance .ccgx-chip:last-child{border-left:0;border-radius:0 8px 8px 0} /* ------------------------------------------------------------------ PRIMARY ROUTE SELECTOR — service-selection bays, not accordions. ------------------------------------------------------------------ */ #ccgx-page .ccgx-route-grid{counter-reset:p4route} #ccgx-page .ccgx-route{counter-increment:p4route;--route-accent:var(--blue-2);border-radius:6px 20px 6px 20px!important;overflow:visible;background:linear-gradient(155deg,#32363b 0%,#1f2225 100%)!important;border-color:rgba(151,190,248,.22)!important;box-shadow:inset 0 1px 0 rgba(222,238,255,.065),0 18px 42px rgba(12,13,14,.19)!important;transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease,background .26s ease} #ccgx-page .ccgx-route:nth-child(1){--route-accent:#80b0ff} #ccgx-page .ccgx-route:nth-child(2){--route-accent:#55c8ef} #ccgx-page .ccgx-route:nth-child(3){--route-accent:#aa98ff} #ccgx-page .ccgx-route>summary{position:relative;min-height:164px!important;padding:1.45rem 1.45rem 1.3rem 1.5rem!important;display:grid!important;grid-template-columns:46px minmax(0,1fr) 30px!important;align-items:start!important;gap:1rem!important;border-radius:inherit!important;overflow:hidden} #ccgx-page .ccgx-route>summary::before{content:counter(p4route,decimal-leading-zero);width:44px;height:44px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--route-accent) 42%,transparent);background:color-mix(in srgb,var(--route-accent) 10%,#24262a);color:var(--route-accent);font:700 .72rem/1 var(--font-mono);letter-spacing:.08em;clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,22% 100%,0 78%)} #ccgx-page .ccgx-route>summary::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--route-accent),color-mix(in srgb,var(--route-accent) 30%,transparent) 48%,transparent 88%);opacity:.72} #ccgx-page .ccgx-route>summary>.ccgx-disc__node{display:none!important} #ccgx-page .ccgx-route .ccgx-disc__label{padding-top:.02rem} #ccgx-page .ccgx-route__title{display:block;font-size:1.17rem;font-weight:820;color:#fbfdff;letter-spacing:-.016em;line-height:1.22;margin-bottom:.55rem} #ccgx-page .ccgx-route__desc{display:block;font-size:.9rem;color:#aebfd7;line-height:1.55;max-width:44ch} #ccgx-page .ccgx-route>summary>.ccgx-disc__icon{width:28px;height:28px;border:0;background:rgba(117,159,220,.07);color:var(--route-accent);font-size:0;border-radius:4px;margin-top:.1rem} #ccgx-page .ccgx-route>summary>.ccgx-disc__icon::before,#ccgx-page .ccgx-route>summary>.ccgx-disc__icon::after{content:"";position:absolute;width:9px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .28s ease} #ccgx-page .ccgx-route>summary>.ccgx-disc__icon::before{transform:translateX(-3px) rotate(45deg)} #ccgx-page .ccgx-route>summary>.ccgx-disc__icon::after{transform:translateX(3px) rotate(-45deg)} #ccgx-page .ccgx-route:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--route-accent) 48%,transparent)!important;box-shadow:inset 0 1px 0 rgba(226,240,255,.08),0 24px 50px rgba(12,13,14,.24)!important} #ccgx-page .ccgx-route[open]{transform:none;background:linear-gradient(155deg,#373b41,#202326)!important;border-color:color-mix(in srgb,var(--route-accent) 54%,transparent)!important;box-shadow:inset 0 1px 0 rgba(231,243,255,.09),0 28px 64px rgba(12,13,14,.28)!important} #ccgx-page .ccgx-route[open]>summary{min-height:126px!important;border-bottom:1px solid color-mix(in srgb,var(--route-accent) 23%,transparent)} #ccgx-page .ccgx-route[open]>summary>.ccgx-disc__icon::before{transform:translateX(-3px) rotate(-45deg)} #ccgx-page .ccgx-route[open]>summary>.ccgx-disc__icon::after{transform:translateX(3px) rotate(45deg)} #ccgx-page .ccgx-route__body{padding:1.2rem 1.35rem 1.35rem!important;background:#1d1f22;border-radius:0 0 6px 20px} #ccgx-page .ccgx-route-items{gap:0!important;border:1px solid rgba(145,184,240,.14);background:#212428} #ccgx-page .ccgx-route-item{position:relative;border:0!important;border-radius:0!important;background:transparent!important;padding:1rem 1.1rem 1rem 1.28rem!important;box-shadow:none!important;min-height:112px} #ccgx-page .ccgx-route-item::before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:2px;background:var(--route-accent);opacity:.42} #ccgx-page .ccgx-route-item:nth-child(-n+3){border-bottom:1px solid rgba(145,184,240,.12)!important} #ccgx-page .ccgx-route-item:not(:nth-child(3n)){border-right:1px solid rgba(145,184,240,.12)!important} #ccgx-page .ccgx-route-item h3{font-size:.97rem;margin-bottom:.38rem} #ccgx-page .ccgx-route-item p{font-size:.87rem;line-height:1.52} #ccgx-page .ccgx-route__action{display:flex;justify-content:flex-end;padding-top:1rem} /* Capabilities disclosure beneath selector = compact spec drawer. */ #ccgx-page #symptoms-we-diagnose .ccgx-route-grid + .ccgx-disc{border-radius:4px!important;background:#202327!important;border-color:rgba(145,184,240,.14)!important;box-shadow:none!important} #ccgx-page #symptoms-we-diagnose .ccgx-route-grid + .ccgx-disc>summary{padding:.85rem 1rem!important;min-height:0!important} #ccgx-page #symptoms-we-diagnose .ccgx-route-grid + .ccgx-disc .ccgx-disc__node{border-radius:2px} /* ------------------------------------------------------------------ PROCESS — connected system flow rather than three independent cards. ------------------------------------------------------------------ */ #ccgx-page .ccgx-process3{position:relative;gap:0!important;border-top:1px solid rgba(145,184,240,.18);border-bottom:1px solid rgba(145,184,240,.13);background:#1f2225} #ccgx-page .ccgx-process3::before{content:"";position:absolute;left:7%;right:7%;top:42px;height:1px;background:linear-gradient(90deg,rgba(128,176,255,.15),rgba(85,200,239,.6),rgba(170,152,255,.28));pointer-events:none} #ccgx-page .ccgx-process3 .ccgx-step{position:relative;min-height:204px!important;padding:1.35rem 1.55rem 1.45rem!important;grid-template-columns:1fr!important;gap:1.35rem!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} #ccgx-page .ccgx-process3 .ccgx-step:not(:last-child){border-right:1px solid rgba(145,184,240,.12)!important} #ccgx-page .ccgx-process3 .ccgx-step::before{display:none!important} #ccgx-page .ccgx-process3 .ccgx-step__num{position:relative;z-index:2;width:48px;height:48px;border-radius:50%!important;background:#32363b!important;border:1px solid rgba(111,184,255,.42)!important;box-shadow:0 0 0 7px #1f2225,0 0 28px rgba(85,200,239,.10);color:#8dc6ff!important} #ccgx-page .ccgx-process3 .ccgx-step:nth-child(2) .ccgx-step__num{border-color:rgba(85,200,239,.5)!important;color:#6ed8f8!important} #ccgx-page .ccgx-process3 .ccgx-step:nth-child(3) .ccgx-step__num{border-color:rgba(170,152,255,.48)!important;color:#b5a6ff!important} #ccgx-page .ccgx-process3 .ccgx-step h3{font-size:1.12rem;margin-bottom:.5rem} #ccgx-page .ccgx-process3 .ccgx-step p{max-width:34ch} #ccgx-page .ccgx-policyline{border-radius:0 0 12px 12px!important;border-top:0!important;border-left:2px solid rgba(85,200,239,.48)!important;background:linear-gradient(90deg,#25282c,#202326)!important;box-shadow:none!important} #ccgx-page #what-the-diagnostic-includes>.ccgx-wrap>.ccgx-disc{border-radius:4px 16px 4px 4px!important} /* ------------------------------------------------------------------ CASE STUDY — incident → diagnosis → validated result. ------------------------------------------------------------------ */ #ccgx-page .ccgx-case3{position:relative;gap:0!important;background:#1e2024;border:1px solid rgba(153,190,246,.16);overflow:hidden;box-shadow:var(--p4-soft-shadow)} #ccgx-page .ccgx-case3::after{content:"";position:absolute;left:13%;right:13%;top:49px;height:1px;background:linear-gradient(90deg,rgba(128,176,255,.2),rgba(85,200,239,.55),rgba(170,152,255,.26));pointer-events:none} #ccgx-page .ccgx-case3__item{position:relative;z-index:1;min-height:176px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:1.35rem 1.4rem 1.45rem!important} #ccgx-page .ccgx-case3__item:not(:last-child){border-right:1px solid rgba(153,190,246,.13)!important} #ccgx-page .ccgx-case3__item::before{content:""!important;display:block!important;position:relative!important;inset:auto!important;width:14px!important;height:14px!important;border:3px solid #23262a!important;border-radius:50%!important;background:var(--blue-2)!important;box-shadow:0 0 0 1px rgba(128,176,255,.52),0 0 15px rgba(128,176,255,.18)!important;margin:0 0 1.15rem .05rem!important} #ccgx-page .ccgx-case3__item:nth-child(2){background:linear-gradient(180deg,rgba(55,59,65,.95),rgba(34,37,40,.98))!important} #ccgx-page .ccgx-case3__item:nth-child(2)::before{background:var(--cyan)!important;box-shadow:0 0 0 1px rgba(85,200,239,.62),0 0 19px rgba(85,200,239,.25)!important} #ccgx-page .ccgx-case3__item:nth-child(3)::before{background:var(--purple-2)!important;box-shadow:0 0 0 1px rgba(170,152,255,.58),0 0 17px rgba(170,152,255,.20)!important} #ccgx-page .ccgx-case3__label{font-size:.64rem;letter-spacing:.13em;margin-bottom:.52rem} #ccgx-page .ccgx-case3__item:nth-child(2) .ccgx-case3__label{color:#69d8fb} #ccgx-page .ccgx-case3__item:nth-child(3) .ccgx-case3__label{color:#b4a5ff} #ccgx-page .ccgx-case3__item p{font-size:.94rem} #ccgx-page #after-the-diagnostic .ccgx-case3 + .ccgx-disc{border-radius:4px!important;box-shadow:none!important} /* Outcomes = decision rail, not five pills. */ #ccgx-page #after-the-diagnostic>.ccgx-wrap>.ccgx-card--quiet{border-radius:4px!important;padding:1rem 1.1rem!important;background:#091b31!important;box-shadow:none!important;border-color:rgba(151,190,248,.15)!important} #ccgx-page .ccgx-outcome-strip{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0!important;margin-top:.75rem!important;border-top:1px solid rgba(145,184,240,.13);border-bottom:1px solid rgba(145,184,240,.13)} #ccgx-page .ccgx-outcome-strip span{position:relative;display:flex!important;align-items:center;min-height:54px;padding:.72rem .8rem .72rem 1.12rem!important;border:0!important;border-radius:0!important;background:transparent!important;color:#c9d8ec!important;font-size:.82rem!important;font-weight:650!important} #ccgx-page .ccgx-outcome-strip span:not(:last-child){border-right:1px solid rgba(145,184,240,.11)!important} #ccgx-page .ccgx-outcome-strip span::before{content:"";position:absolute;left:.55rem;width:4px;height:16px;background:linear-gradient(180deg,var(--cyan),var(--blue-2));opacity:.55} /* ------------------------------------------------------------------ OPTIONAL TECHNICAL DETAILS — reference index / registry. ------------------------------------------------------------------ */ #ccgx-page .ccgx-tech-index{counter-reset:p4tech;gap:.65rem .85rem!important} #ccgx-page .ccgx-tech-index>.ccgx-disc{counter-increment:p4tech;position:relative;border-radius:3px 14px 3px 3px!important;background:#1f2225!important;border-color:rgba(145,184,240,.14)!important;box-shadow:none!important;overflow:hidden} #ccgx-page .ccgx-tech-index>.ccgx-disc::before{content:counter(p4tech,decimal-leading-zero);position:absolute;left:0;top:0;bottom:0;width:46px;display:grid;place-items:center;background:#2e3136;border-right:1px solid rgba(128,176,255,.18);color:#7eacdf;font:700 .66rem/1 var(--font-mono);letter-spacing:.08em;z-index:1} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary{padding:.95rem 1.15rem .95rem 4rem!important;min-height:82px!important;border-radius:0!important} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary>.ccgx-disc__node{display:none!important} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary>.ccgx-disc__icon{border-radius:3px!important;border-color:rgba(145,184,240,.16)!important;background:#282b2f!important} #ccgx-page .ccgx-tech-index>.ccgx-disc .ccgx-disc__title{font-size:.98rem} #ccgx-page .ccgx-tech-index>.ccgx-disc .ccgx-route__desc{font-size:.82rem;line-height:1.42;margin-top:.24rem;color:#93a8c5} #ccgx-page .ccgx-tech-index>.ccgx-disc[open]{background:#25272b!important;border-color:rgba(128,176,255,.30)!important;box-shadow:0 22px 46px rgba(11,12,13,.20)!important} #ccgx-page .ccgx-tech-index>.ccgx-disc[open]::before{background:linear-gradient(180deg,#40454c,#2d3035);color:#9bc8ff} #ccgx-page .ccgx-tech-index>.ccgx-disc>.ccgx-disc__body{margin-left:46px;border-left:1px solid rgba(128,176,255,.12);background:#1d1f22!important;padding:1rem 1.15rem 1.4rem!important} /* ------------------------------------------------------------------ FAQ — question ledger, no card soup. ------------------------------------------------------------------ */ #ccgx-page .ccgx-faq-short{counter-reset:p4faq;gap:0 1.5rem!important} #ccgx-page .ccgx-faq-short>.ccgx-disc{counter-increment:p4faq;border:0!important;border-top:1px solid rgba(145,184,240,.16)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;margin:0!important} #ccgx-page .ccgx-faq-short>.ccgx-disc:nth-last-child(-n+2){border-bottom:1px solid rgba(145,184,240,.16)!important} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary{position:relative;padding:1.05rem 2.9rem 1.05rem 3.25rem!important;min-height:84px!important;border-radius:0!important} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary::before{content:counter(p4faq,decimal-leading-zero);position:absolute;left:0;top:1.15rem;color:#7199c9;font:700 .68rem/1 var(--font-mono);letter-spacing:.08em} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary>.ccgx-disc__node{display:none!important} #ccgx-page .ccgx-faq-short>.ccgx-disc .ccgx-disc__eyebrow{display:none!important} #ccgx-page .ccgx-faq-short>.ccgx-disc .ccgx-disc__title{font-size:1rem;line-height:1.35} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary>.ccgx-disc__icon{position:absolute;right:0;top:1rem;border:0!important;background:#272a2e!important;border-radius:3px!important} #ccgx-page .ccgx-faq-short>.ccgx-disc[open]{grid-column:auto!important;background:linear-gradient(180deg,rgba(43,46,50,.98),rgba(29,32,35,.99))!important} #ccgx-page .ccgx-faq-short>.ccgx-disc[open]>.ccgx-disc__body{padding:.15rem 1rem 1.25rem 3.25rem!important;background:transparent!important} #ccgx-page .ccgx-more-questions{border-radius:3px 16px 3px 3px!important;background:#202327!important;box-shadow:none!important;margin-top:1rem!important} /* ------------------------------------------------------------------ CTA — action docks with hardware-like edge geometry. ------------------------------------------------------------------ */ #ccgx-page .ccgx-cta{position:relative;border-radius:4px 22px 4px 22px!important;padding:1.35rem 1.45rem!important;background:linear-gradient(135deg,#40454c 0%,#31353a 48%,#212427 100%)!important;border-color:rgba(125,181,255,.34)!important;box-shadow:inset 0 1px 0 rgba(229,241,255,.09),0 24px 58px rgba(12,13,14,.25)!important;overflow:hidden} #ccgx-page .ccgx-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--cyan),var(--blue),var(--purple-2));opacity:.78} #ccgx-page .ccgx-cta::after{content:"SERVICE REQUEST";position:absolute;right:18px;top:9px;font:700 .52rem/1 var(--font-mono);letter-spacing:.14em;color:rgba(168,199,239,.25);pointer-events:none} #ccgx-page .ccgx-cta__title{font-size:1.25rem} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner{position:relative;overflow:hidden;border:1px solid rgba(151,190,248,.22);border-radius:6px 28px 6px 28px;background:linear-gradient(145deg,#393d43,#212428 62%,#1d2023);box-shadow:inset 0 1px 0 rgba(228,240,255,.08),0 30px 72px rgba(11,12,13,.30)} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner::before{content:"";position:absolute;left:0;top:0;width:150px;height:4px;background:linear-gradient(90deg,var(--blue-2),var(--purple-2),transparent)} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner::after{content:"READY / INTAKE";position:absolute;right:20px;top:15px;color:rgba(161,191,231,.26);font:700 .55rem/1 var(--font-mono);letter-spacing:.14em} /* General disclosures: calmer geometry, distinct from major components. */ #ccgx-page .ccgx-disc:not(.ccgx-route):not(.ccgx-faq-item){border-radius:4px 14px 4px 4px} #ccgx-page .ccgx-disc:not(.ccgx-route):not(.ccgx-faq-item)>summary{border-radius:inherit} /* Interaction state — keyboard / open states are meaningful without neon overload. */ #ccgx-page .ccgx-disc>summary:focus-visible{outline:2px solid rgba(128,176,255,.78);outline-offset:3px} #ccgx-page .ccgx-route>summary:focus-visible{outline-color:var(--route-accent)} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary:hover,#ccgx-page .ccgx-faq-short>.ccgx-disc>summary:hover{background:rgba(128,176,255,.035)} @media(min-width:1025px){ #ccgx-page .ccgx-route-grid:has(>.ccgx-route[open]){grid-template-columns:repeat(2,minmax(0,1fr))} #ccgx-page .ccgx-route-grid:has(>.ccgx-route[open])>.ccgx-route[open]{grid-column:1/-1} } @media(max-width:1024px){ #ccgx-page .ccgx-route>summary{grid-template-columns:42px minmax(0,1fr) 28px!important} #ccgx-page .ccgx-route-item:not(:nth-child(3n)){border-right:0!important} #ccgx-page .ccgx-route-item:nth-child(odd){border-right:1px solid rgba(145,184,240,.12)!important} #ccgx-page .ccgx-route-item:nth-child(-n+4){border-bottom:1px solid rgba(145,184,240,.12)!important} #ccgx-page .ccgx-process3::before{display:none} #ccgx-page .ccgx-process3 .ccgx-step:nth-child(2){border-right:0!important} #ccgx-page .ccgx-process3 .ccgx-step:nth-child(-n+2){border-bottom:1px solid rgba(145,184,240,.12)!important} #ccgx-page .ccgx-case3::after{display:none} #ccgx-page .ccgx-case3__item:nth-child(2){border-right:0!important} #ccgx-page .ccgx-case3__item:nth-child(-n+2){border-bottom:1px solid rgba(145,184,240,.12)!important} #ccgx-page .ccgx-outcome-strip{grid-template-columns:repeat(3,minmax(0,1fr))} #ccgx-page .ccgx-outcome-strip span:nth-child(3){border-right:0!important} #ccgx-page .ccgx-outcome-strip span:nth-child(-n+3){border-bottom:1px solid rgba(145,184,240,.11)!important} } @media(max-width:760px){ #ccgx-page .ccgx-hero__assurance{grid-template-columns:1fr;gap:.45rem} #ccgx-page .ccgx-hero__assurance .ccgx-chip,#ccgx-page .ccgx-hero__assurance .ccgx-chip:first-child,#ccgx-page .ccgx-hero__assurance .ccgx-chip:last-child{border:1px solid rgba(149,188,244,.18);border-radius:6px} #ccgx-page .ccgx-route{border-radius:4px 14px 4px 14px!important} #ccgx-page .ccgx-route>summary{grid-template-columns:38px minmax(0,1fr) 28px!important;padding:1.15rem 1rem!important;min-height:0!important;gap:.8rem!important} #ccgx-page .ccgx-route>summary::before{width:38px;height:38px} #ccgx-page .ccgx-route__title{font-size:1.04rem} #ccgx-page .ccgx-route__body{padding:1rem!important} #ccgx-page .ccgx-route-items{grid-template-columns:1fr!important} #ccgx-page .ccgx-route-item{min-height:0;padding:.9rem 1rem .9rem 1.18rem!important;border-right:0!important;border-bottom:1px solid rgba(145,184,240,.12)!important} #ccgx-page .ccgx-route-item:last-child{border-bottom:0!important} #ccgx-page .ccgx-process3{grid-template-columns:1fr!important} #ccgx-page .ccgx-process3 .ccgx-step{min-height:0!important;border-right:0!important;border-bottom:1px solid rgba(145,184,240,.12)!important;padding:1.15rem!important;gap:.9rem!important} #ccgx-page .ccgx-process3 .ccgx-step:last-child{border-bottom:0!important} #ccgx-page .ccgx-process3 .ccgx-step__num{width:42px;height:42px;box-shadow:0 0 0 5px #1f2225} #ccgx-page .ccgx-case3{grid-template-columns:1fr!important} #ccgx-page .ccgx-case3__item{min-height:0!important;border-right:0!important;border-bottom:1px solid rgba(145,184,240,.12)!important;padding:1.05rem 1.1rem!important} #ccgx-page .ccgx-case3__item:last-child{border-bottom:0!important} #ccgx-page .ccgx-case3__item::before{margin-bottom:.8rem!important} #ccgx-page .ccgx-outcome-strip{grid-template-columns:1fr} #ccgx-page .ccgx-outcome-strip span{border-right:0!important;border-bottom:1px solid rgba(145,184,240,.11)!important;min-height:48px} #ccgx-page .ccgx-outcome-strip span:last-child{border-bottom:0!important} #ccgx-page .ccgx-tech-index>.ccgx-disc::before{width:38px} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary{padding-left:3.3rem!important} #ccgx-page .ccgx-tech-index>.ccgx-disc>.ccgx-disc__body{margin-left:38px} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary{padding-left:2.4rem!important} #ccgx-page .ccgx-faq-short>.ccgx-disc[open]>.ccgx-disc__body{padding-left:2.4rem!important} #ccgx-page .ccgx-cta{border-radius:4px 16px 4px 16px!important;padding:1.2rem!important} #ccgx-page .ccgx-cta::after{display:none} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner{border-radius:5px 18px 5px 18px} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner::after{display:none} } @media(prefers-reduced-motion:reduce){ #ccgx-page .ccgx-route,#ccgx-page .ccgx-btn{transform:none!important} } /* ================================================================ PASS 6 — ELECTRICAL / SIGNAL SIMULATION Ephemeral overlays on the locked Pass 5 copper. One shared clock drives every layer of a packet; at most two packets exist at once. ================================================================ */ #ccgx-page .pcb-signal-layer{pointer-events:none;isolation:isolate} #ccgx-page .pcb-signal-event{pointer-events:none;opacity:0} #ccgx-page .pcb-sig{fill:none!important;stroke:var(--sig,#b8ecff);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none} #ccgx-page .pcb-sig--residual{stroke-width:1.25;opacity:.11;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--sig,#b8ecff) 45%,transparent))} #ccgx-page .pcb-sig--bloom{stroke-width:13;opacity:.24;filter:blur(7px)} #ccgx-page .pcb-sig--trail{stroke-width:2.2;opacity:.42;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--sig,#b8ecff) 56%,transparent))} #ccgx-page .pcb-sig--body{stroke-width:2.0;opacity:.82;filter:drop-shadow(0 0 3px var(--sig,#b8ecff))} #ccgx-page .pcb-sig--core{stroke:#f8fdff;stroke-width:1.15;opacity:.98;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px var(--sig,#b8ecff)) drop-shadow(0 0 9px color-mix(in srgb,var(--sig,#b8ecff) 55%,transparent))} /* The carrying board responds, but never turns into an all-over glow. */ #ccgx-page .ccgx-pcb-field .pcb-active,#ccgx-page .ccgx-pcb-field .pcb-diff,#ccgx-page .ccgx-pcb-field .pcb-pad,#ccgx-page .ccgx-pcb-field .pcb-testpad,#ccgx-page .ccgx-pcb-field .pcb-via-ring,#ccgx-page .ccgx-pcb-field .pcb-ic-body{transition:opacity .75s ease,stroke .75s ease,filter .75s ease,fill .75s ease} #ccgx-page .ccgx-pcb-field.is-energized .pcb-active{opacity:.69;stroke:#8fd9f4;filter:drop-shadow(0 0 5px rgba(85,200,239,.20))} #ccgx-page .ccgx-pcb-field.is-energized .pcb-diff{opacity:.54} #ccgx-page .ccgx-pcb-field.is-energized .pcb-pad,#ccgx-page .ccgx-pcb-field.is-energized .pcb-testpad{stroke:rgba(151,205,238,.78)} #ccgx-page .ccgx-pcb-field.is-energized .pcb-ic-body{stroke:rgba(159,199,235,.39)} /* A via lights only when the packet head physically reaches it. */ #ccgx-page .pcb-via.is-hot .pcb-via-pad{fill:color-mix(in srgb,var(--via-hot,#72d8ff) 22%,transparent);stroke:color-mix(in srgb,var(--via-hot,#72d8ff) 62%,#a9d8f5);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--via-hot,#72d8ff) 50%,transparent))} #ccgx-page .pcb-via.is-hot .pcb-via-ring{fill:color-mix(in srgb,var(--via-hot,#72d8ff) 34%,#18385e);stroke:color-mix(in srgb,var(--via-hot,#72d8ff) 72%,#d8f4ff);filter:drop-shadow(0 0 3px #dff8ff) drop-shadow(0 0 9px color-mix(in srgb,var(--via-hot,#72d8ff) 65%,transparent))} #ccgx-page .pcb-via.is-hot .pcb-via-hole{stroke:color-mix(in srgb,var(--via-hot,#72d8ff) 40%,#08121f)} /* Tiny local component response when a route is carrying current. */ #ccgx-page .ccgx-pcb-field.is-energized .pcb-passive-pad{fill:#396b95;stroke:rgba(164,203,236,.46)} #ccgx-page .ccgx-pcb-field.is-energized .pcb-choke-pad,#ccgx-page .ccgx-pcb-field.is-energized .pcb-mosfet-pad{filter:drop-shadow(0 0 3px rgba(85,200,239,.10))} @media (prefers-reduced-motion:reduce){ #ccgx-page .pcb-signal-layer{display:none!important} #ccgx-page .ccgx-pcb-field.is-energized .pcb-active,#ccgx-page .ccgx-pcb-field.is-energized .pcb-diff,#ccgx-page .ccgx-pcb-field.is-energized .pcb-pad,#ccgx-page .ccgx-pcb-field.is-energized .pcb-testpad,#ccgx-page .ccgx-pcb-field.is-energized .pcb-via-ring,#ccgx-page .ccgx-pcb-field.is-energized .pcb-ic-body{transition:none!important} } /* ==== ccgx-pass7-responsive-a11y-performance (verbatim from the page body) ==== */ /* ================================================================ PASS 7/8 — MOBILE / TABLET + ACCESSIBILITY + PERFORMANCE Desktop composition stays locked. Compact widths get purpose-built rhythm and a lighter board profile rather than a squeezed desktop. ================================================================ */ #ccgx-page{overflow-wrap:anywhere} #ccgx-page section[id],#ccgx-page .ccgx-anchor-alias{scroll-margin-top:clamp(76px,9vh,116px)} #ccgx-page a,#ccgx-page button,#ccgx-page summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent} #ccgx-page summary{user-select:none} #ccgx-page a:focus-visible,#ccgx-page button:focus-visible,#ccgx-page summary:focus-visible{outline:3px solid #9bd4ff!important;outline-offset:4px!important;box-shadow:0 0 0 2px #1c1e21,0 0 0 6px rgba(155,212,255,.24)!important} #ccgx-page .ccgx-pcb-field{contain:paint;pointer-events:none} /* Tablet: preserve the wide identity, but stop pretending it is desktop. */ @media(max-width:1024px){ #ccgx-page{--sec-y:clamp(3.55rem,6.2vw,4.8rem);--pad-x:clamp(20px,3vw,30px);--pad-rail:clamp(42px,5.2vw,56px)} #ccgx-page .ccgx-wrap{padding-left:var(--pad-rail);padding-right:var(--pad-x)} #ccgx-page .ccgx-hero__inner{min-height:auto;padding-top:clamp(3.8rem,7vw,5.2rem);padding-bottom:clamp(3.2rem,6vw,4.5rem);gap:2.1rem} #ccgx-page .ccgx-hero__copy{max-width:760px} #ccgx-page .ccgx-hero h1{font-size:clamp(3.2rem,7vw,4.7rem);max-width:11ch} #ccgx-page .ccgx-hero__visual{min-height:clamp(250px,31vw,340px)} #ccgx-page .ccgx-sec__head{margin-bottom:clamp(2.2rem,4.5vw,3.2rem)} #ccgx-page .ccgx-route>summary{min-height:138px!important;padding:1.2rem 1.2rem 1.15rem!important} #ccgx-page .ccgx-process3 .ccgx-step{min-height:180px!important;padding:1.2rem 1.25rem 1.3rem!important} #ccgx-page .ccgx-case3__item{min-height:158px!important;padding:1.2rem 1.25rem 1.3rem!important} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary{min-height:76px!important} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary{min-height:76px!important} #ccgx-page .ccgx-pcb-field{opacity:.76} #ccgx-page .pcb-substrate-details{opacity:.54} } /* Phone: independent compact composition, not a desktop stack. */ @media(max-width:760px){ #ccgx-page{--sec-y:clamp(2.35rem,7.2vw,3rem);--pad-x:1rem;--pad-rail:34px;font-size:16px;line-height:1.56} #ccgx-page .ccgx-wrap{padding:var(--sec-y) 1rem var(--sec-y) 34px} #ccgx-page .ccgx-wrap::before,#ccgx-page .ccgx-wrap::after{left:11px;opacity:.55} #ccgx-page .ccgx-node{left:4px;transform:scale(.82)} #ccgx-page .ccgx-branch{left:26px;width:8px;opacity:.6} #ccgx-page .ccgx-pulse{display:none!important} #ccgx-page .ccgx-terminal{left:5px;transform:scale(.84)} #ccgx-page .ccgx-hero__inner{padding:2.75rem 1rem 2.15rem;gap:1.55rem;min-height:auto} #ccgx-page .ccgx-hero h1{font-size:clamp(2.55rem,12.2vw,3.35rem);line-height:1.01;max-width:10.6ch} #ccgx-page .ccgx-hero__lead{font-size:1rem;line-height:1.58;margin-top:1rem} #ccgx-page .ccgx-hero__paid{font-size:.9rem;line-height:1.48;margin-top:.95rem;padding:.72rem .88rem} #ccgx-page .ccgx-hero__actions{margin-top:1.25rem;gap:.65rem} #ccgx-page .ccgx-btn{min-height:48px;padding-inline:1.1rem} #ccgx-page .ccgx-hero__assurance{grid-template-columns:1fr 1fr;margin-top:1rem;width:100%} #ccgx-page .ccgx-hero__assurance .ccgx-chip{min-width:0;padding:.52rem .58rem;font-size:.72rem;line-height:1.35;justify-content:flex-start} #ccgx-page .ccgx-hero__visual{min-height:92px} #ccgx-page .ccgx-hero__descend{height:28px} #ccgx-page .ccgx-sec__head{margin-bottom:1.65rem} #ccgx-page .ccgx-sec__kicker{margin-bottom:.55rem} #ccgx-page .ccgx-sec__head>h2{font-size:clamp(1.9rem,8.7vw,2.45rem);line-height:1.06;letter-spacing:-.032em} #ccgx-page .ccgx-sec__intro{font-size:.97rem;line-height:1.55;margin-top:.75rem!important} /* Primary route bays: dense enough to scan, still comfortably tappable. */ #ccgx-page .ccgx-route-grid{gap:.62rem!important} #ccgx-page .ccgx-route>summary{min-height:112px!important;padding:1rem .9rem .95rem!important;grid-template-columns:38px minmax(0,1fr) 26px!important;gap:.72rem!important} #ccgx-page .ccgx-route>summary::before{width:38px;height:38px;font-size:.66rem} #ccgx-page .ccgx-route__title{font-size:1.03rem;margin-bottom:.34rem} #ccgx-page .ccgx-route__desc{font-size:.83rem;line-height:1.42} #ccgx-page .ccgx-route__body{padding:.9rem!important} #ccgx-page .ccgx-route-items{grid-template-columns:1fr!important} #ccgx-page .ccgx-route-item{min-height:0!important;padding:.78rem .8rem .78rem 1rem!important} #ccgx-page .ccgx-route-item::before{top:.75rem;bottom:.75rem} #ccgx-page .ccgx-route-item{border-right:0!important;border-bottom:1px solid rgba(145,184,240,.11)!important} #ccgx-page .ccgx-route-item:last-child{border-bottom:0!important} #ccgx-page .ccgx-route__action{padding-top:.75rem} /* Process = concise vertical rail. */ #ccgx-page .ccgx-process3{border-left:1px solid rgba(85,200,239,.24);border-top:0;border-bottom:0;margin-left:8px} #ccgx-page .ccgx-process3 .ccgx-step{min-height:0!important;padding:.9rem .8rem .95rem 1rem!important;grid-template-columns:42px minmax(0,1fr)!important;gap:.8rem!important;border-right:0!important;border-bottom:1px solid rgba(145,184,240,.11)!important} #ccgx-page .ccgx-process3 .ccgx-step:last-child{border-bottom:0!important} #ccgx-page .ccgx-process3 .ccgx-step__num{width:40px;height:40px;box-shadow:0 0 0 5px #1f2225,0 0 20px rgba(85,200,239,.08)} #ccgx-page .ccgx-process3 .ccgx-step h3{font-size:1rem;margin-bottom:.3rem} #ccgx-page .ccgx-process3 .ccgx-step p{font-size:.88rem;line-height:1.48} #ccgx-page .ccgx-policyline{margin-top:.8rem!important;padding:.9rem 1rem!important} /* Case study becomes a tight vertical incident timeline. */ #ccgx-page .ccgx-case3{border-left:2px solid rgba(85,200,239,.28)} #ccgx-page .ccgx-case3__item{min-height:0!important;padding:.9rem 1rem .95rem 1.05rem!important;border-right:0!important;border-bottom:1px solid rgba(153,190,246,.11)!important;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:.7rem;align-items:start} #ccgx-page .ccgx-case3__item:last-child{border-bottom:0!important} #ccgx-page .ccgx-case3__item::before{width:11px!important;height:11px!important;margin:.22rem 0 0 0!important;grid-column:1;grid-row:1/span 2} #ccgx-page .ccgx-case3__label{grid-column:2;margin-bottom:.3rem} #ccgx-page .ccgx-case3__item p{grid-column:2;font-size:.9rem;line-height:1.48} #ccgx-page .ccgx-outcome-strip{grid-template-columns:1fr!important} #ccgx-page .ccgx-outcome-strip span{min-height:44px;padding:.55rem .7rem .55rem 1rem!important;border-right:0!important;border-bottom:1px solid rgba(145,184,240,.1)!important} /* Optional reference area: compact index, larger content only after intent. */ #ccgx-page .ccgx-tech-index{gap:.46rem!important} #ccgx-page .ccgx-tech-index>.ccgx-disc::before{width:34px} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary{min-height:62px!important;padding:.72rem .7rem .72rem 2.85rem!important} #ccgx-page .ccgx-tech-index>.ccgx-disc .ccgx-disc__title{font-size:.93rem} #ccgx-page .ccgx-tech-index>.ccgx-disc .ccgx-route__desc{font-size:.77rem;line-height:1.34} #ccgx-page .ccgx-tech-index>.ccgx-disc>.ccgx-disc__body{margin-left:34px;padding:.85rem .85rem 1rem!important} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary{min-height:62px!important;padding:.78rem 2.25rem .78rem 2.35rem!important} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary::before{top:.9rem;font-size:.63rem} #ccgx-page .ccgx-faq-short>.ccgx-disc .ccgx-disc__title{font-size:.94rem} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary>.ccgx-disc__icon{top:.72rem;width:28px;height:28px} #ccgx-page .ccgx-faq-short>.ccgx-disc[open]>.ccgx-disc__body{padding:.05rem .75rem .95rem 2.35rem!important} #ccgx-page .ccgx-cta{margin-top:1.6rem!important;padding:1rem!important;gap:.85rem!important} #ccgx-page .ccgx-cta__title{font-size:1.08rem} #ccgx-page .ccgx-cta p{font-size:.88rem;line-height:1.45} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner{padding:1.25rem!important} #ccgx-page .ccgx-final__actions{margin-top:1.15rem;gap:.6rem} #ccgx-page .ccgx-final__micro{margin-top:.8rem;font-size:.78rem;line-height:1.45} /* Mobile rendering: foreground remains crisp; board is quiet and sparse. */ #ccgx-page .ccgx-pcb-field{opacity:.58} #ccgx-page .pcb-bg{opacity:.16} #ccgx-page .pcb-struct{opacity:.26} #ccgx-page .pcb-bus{opacity:.38} #ccgx-page .pcb-pour{opacity:.34} #ccgx-page .pcb-sig--bloom{stroke-width:9!important;opacity:.15!important;filter:blur(5px)!important} #ccgx-page .pcb-sig--residual{opacity:.06!important} #ccgx-page .pcb-sig--trail{opacity:.27!important} /* On phones the reveal transform costs more than it contributes. */ #ccgx-page.ccgx-js .ccgx-reveal,#ccgx-page .ccgx-reveal{opacity:1!important;transform:none!important;transition:none!important} } @media(max-width:420px){ #ccgx-page{--pad-rail:31px} #ccgx-page .ccgx-wrap{padding-left:31px;padding-right:.85rem} #ccgx-page .ccgx-hero__inner{padding-inline:.9rem} #ccgx-page .ccgx-hero__eyebrow{font-size:.59rem;padding:.42rem .68rem} #ccgx-page .ccgx-hero__assurance .ccgx-chip{font-size:.69rem;padding:.48rem .48rem} #ccgx-page .ccgx-route>summary{padding-inline:.82rem!important} } @media(pointer:coarse){ #ccgx-page .ccgx-route:hover,#ccgx-page .ccgx-btn:hover,#ccgx-page .ccgx-path:hover{transform:none!important} #ccgx-page summary{cursor:pointer} } @media(prefers-reduced-motion:reduce){ #ccgx-page *,#ccgx-page *::before,#ccgx-page *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important} #ccgx-page .ccgx-reveal{opacity:1!important;transform:none!important} #ccgx-page .pcb-signal-layer{display:none!important} } @media(prefers-contrast:more){ #ccgx-page{--muted:#d6e3f4;--muted-2:#b8c9df;--line:rgba(183,211,255,.34);--line-lit:rgba(166,208,255,.78)} #ccgx-page .ccgx-disc,#ccgx-page .ccgx-route,#ccgx-page .ccgx-cta{border-color:rgba(183,211,255,.44)!important} #ccgx-page .ccgx-btn--primary{border-color:#d9ebff!important} } @media(forced-colors:active){ #ccgx-page .ccgx-pcb-field{display:none!important} #ccgx-page .ccgx-btn,#ccgx-page .ccgx-disc,#ccgx-page .ccgx-route,#ccgx-page .ccgx-cta{forced-color-adjust:auto;border:1px solid ButtonText!important;background:Canvas!important;color:CanvasText!important;box-shadow:none!important} #ccgx-page .ccgx-btn--primary{background:Highlight!important;color:HighlightText!important} } /* ===== PASS 9/9: ONE CONTINUOUS BOARD ======================================= The board used to be seven independent SVG fields, each clipped to its own section, each sitting on a section-coloured background, with an 84px gradient band drawn across every section's top edge. That is six visible seams. The substrate now lives on ONE page-level backplane that spans from under the header to the footer and never resets. Sections are transparent, so the same board shows through all of them. The high-detail per-section fields are kept exactly as they are - they are the local functional regions - but they now overlap their neighbours and cross-fade, so no trace is ever cut on a straight horizontal line. The backplane is deliberately cheap: four elements, two tiled patterns and a handful of gradients. The microscopic detail stays in the local fields. */ #ccgx-page { position: relative; isolation: isolate; } #ccgx-page .ccgx-backplane { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #0b1526 0%, #0f1c34 26%, #0d1a2f 58%, #0b1526 100%); } /* copper pours and ground-plane regions - large, soft, and positioned as a percentage of the WHOLE page, so they cross section boundaries by design */ #ccgx-page .ccgx-backplane__pours { position: absolute; inset: 0; background: radial-gradient(1400px 900px at 12% 6%, rgba(58,104,185,.13), transparent 62%), radial-gradient(1200px 800px at 88% 21%, rgba(96,74,190,.10), transparent 60%), radial-gradient(1500px 1000px at 20% 44%, rgba(46,92,160,.09), transparent 62%), radial-gradient(1300px 900px at 82% 63%, rgba(52,118,178,.09), transparent 60%), radial-gradient(1500px 1000px at 26% 84%, rgba(58,104,185,.10), transparent 62%), radial-gradient(1200px 800px at 78% 97%, rgba(96,74,190,.10), transparent 60%); } /* one tiled board mesh across the entire page - cannot break at a section */ #ccgx-page .ccgx-backplane__mesh { position: absolute; inset: -120px 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23233a5e' stroke-width='1' opacity='.5'%3E%3Cpath d='M0 60H240M0 180H240M60 0V240M180 0V240'/%3E%3C/g%3E%3Cg fill='none' stroke='%231d3152' stroke-width='.75' opacity='.55'%3E%3Cpath d='M0 120H240M120 0V240M0 20H90M150 20H240M0 220H90M150 220H240'/%3E%3C/g%3E%3Cg fill='%232b4675' opacity='.55'%3E%3Ccircle cx='60' cy='60' r='2.1'/%3E%3Ccircle cx='180' cy='60' r='2.1'/%3E%3Ccircle cx='60' cy='180' r='2.1'/%3E%3Ccircle cx='180' cy='180' r='2.1'/%3E%3Ccircle cx='120' cy='120' r='1.6'/%3E%3C/g%3E%3Cg fill='none' stroke='%2326406b' stroke-width='.7' opacity='.4'%3E%3Crect x='96' y='36' width='48' height='14' rx='2'/%3E%3Crect x='36' y='150' width='14' height='34' rx='2'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-position: 0 0; } /* board-spanning horizontal buses at whole-page percentages */ #ccgx-page .ccgx-backplane__traces { position: absolute; inset: 0; background-image: linear-gradient(rgba(126,168,232,.16) 1px, transparent 1px), linear-gradient(rgba(126,168,232,.11) 1px, transparent 1px), linear-gradient(rgba(126,168,232,.09) 1px, transparent 1px), linear-gradient(rgba(126,168,232,.12) 1px, transparent 1px); background-repeat: no-repeat; background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px; background-position: 0 11%, 0 33%, 0 61%, 0 86%; } /* Persistent edge rails. Same centred box geometry and the same design-x fractions as the section fields, so a rail never steps sideways at a boundary - it is literally one element from the top of the page to the bottom. */ #ccgx-page .ccgx-backplane__rails { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, 2200px); transform: translateX(-50%); } #ccgx-page .ccgx-backplane__rails i { position: absolute; top: -80px; bottom: -80px; width: 1px; background: linear-gradient(180deg, transparent 0, rgba(132,180,255,.30) 3%, rgba(132,180,255,.30) 97%, transparent 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='34' viewBox='0 0 6 34'%3E%3Ccircle cx='3' cy='6' r='1.5' fill='%233a5c92'/%3E%3Ccircle cx='3' cy='23' r='1.1' fill='%232d4a78'/%3E%3C/svg%3E"); background-repeat: no-repeat, repeat-y; background-position: 0 0, -2px 0; } /* Sections stop painting their own substrate. This is what lets one board show through the whole page instead of seven section-coloured panels. */ #ccgx-page .ccgx-sec, #ccgx-page .ccgx-sec--alt, #ccgx-page .ccgx-hero { background: transparent; } /* the 84px gradient strip that drew a visible line across every section top */ #ccgx-page .ccgx-sec::before { display: none; } /* sections no longer clip the board, so local fields can bleed across a seam */ #ccgx-page .ccgx-sec { overflow: visible; } /* Local fields overlap their neighbours and fade out, so a trace is never cut on a straight horizontal line at a section edge. */ #ccgx-page .ccgx-pcb-field { contain: none; top: -170px; height: calc(100% + 340px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%); } /* Density still varies by region, but it now transitions instead of stepping. The old values ran .42 / .56 / .66 / .80 - a visible reset at each boundary. */ #ccgx-page .ccgx-pcb-field { opacity: .66; } #ccgx-page #what-the-diagnostic-includes .ccgx-pcb-field { opacity: .60; } #ccgx-page #diagnostic-faq-and-purchase .ccgx-pcb-field { opacity: .64; } #ccgx-page .ccgx-final .ccgx-pcb-field { opacity: .72; } /* The board implies it continues past the top and bottom of the page rather than beginning and ending inside a content section. */ #ccgx-page .ccgx-backplane::before, #ccgx-page .ccgx-backplane::after { content: ""; position: absolute; left: 0; right: 0; height: 190px; pointer-events: none; } #ccgx-page .ccgx-backplane::before { top: 0; background: linear-gradient(180deg, rgba(8,17,31,.72), transparent); } #ccgx-page .ccgx-backplane::after { bottom: 0; background: linear-gradient(0deg, rgba(8,17,31,.72), transparent); } @media (max-width: 760px) { /* Mobile keeps the three-field pruning. Continuity comes from a lighter backplane underneath, not from restoring thousands of SVG nodes. */ #ccgx-page .ccgx-backplane__mesh { opacity: .34; } #ccgx-page .ccgx-backplane__pours { opacity: .7; } #ccgx-page .ccgx-backplane__traces { opacity: .55; } #ccgx-page .ccgx-backplane__rails i { opacity: .62; } #ccgx-page .ccgx-pcb-field { top: -90px; height: calc(100% + 180px); } } /* ===== PASS 10: SECTION BEACONS, FINAL-CTA KEEPOUT, INTERACTION EMPHASIS ==== 1. Section beacons. The helper labels above each heading were muted grey and easy to scroll past. They become a small circuit node with a short trace running into the label - node, trace, then text - in the cyan accent, at a contrast that actually announces "a new section starts here". The trace draws once when the section first enters the viewport, driven by the .is-live class the reveal system already sets exactly once. Nothing loops. 2. Final CTA. The framed container had a border, a radius, a background and overflow:hidden but NO desktop padding, so the frame was drawn on the content edge: its top border ran through "NEXT STEP" and its bottom-left corner cut the "Additional repairs..." line. overflow:hidden also clipped the child reading-field pseudo (inset -2.2rem/-3.2rem) into a hard rectangle whose edges crossed the same text. Fixed at the cause: real padding on every breakpoint, no clipping, and the redundant inner substrate removed because the frame is already an opaque reading surface. 3. Interaction emphasis. Ambient behaviour is untouched - no scheduler or concurrency change. Only the response to a deliberate interaction is strengthened, and only in CSS. */ /* ---- 1. SECTION BEACON --------------------------------------------------- */ #ccgx-page .ccgx-sec__kicker { display: inline-flex; align-items: center; gap: .72rem; color: #a8e2f7; font-family: var(--font-mono); font-size: .715rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; line-height: 1; } /* node + trace drawn in a single pseudo so the order reads node -> trace -> label */ #ccgx-page .ccgx-sec__kicker::before { content: ""; flex: none; width: 48px; height: 10px; transform-origin: left center; background: radial-gradient(circle 4.6px at 4.6px 50%, #7fe0ff 0 4.6px, transparent 4.7px), linear-gradient(90deg, rgba(127,224,255,.9), rgba(127,224,255,0)) no-repeat left 13px center / 35px 1px; filter: drop-shadow(0 0 4px rgba(85,200,239,.5)); } /* Progressive enhancement: the hidden start state only exists once the controller has stamped the page, so a beacon can never be stuck invisible. */ #ccgx-page.ccgx-js .ccgx-sec:not(.is-live) .ccgx-sec__kicker::before { transform: scaleX(0); opacity: 0; } #ccgx-page.ccgx-js .ccgx-sec:not(.is-live) .ccgx-sec__kicker { opacity: .5; } #ccgx-page .ccgx-sec.is-live .ccgx-sec__kicker::before { animation: ccgx-beacon-trace .58s cubic-bezier(.2,.72,.25,1) both; } #ccgx-page .ccgx-sec.is-live .ccgx-sec__kicker { animation: ccgx-beacon-label .46s ease .14s both; } @keyframes ccgx-beacon-trace { 0% { transform: scaleX(0); opacity: 0; } 55% { filter: drop-shadow(0 0 9px rgba(127,224,255,.85)); } 100% { transform: scaleX(1); opacity: 1; } } /* the label never drops below half opacity, so it stays readable throughout */ @keyframes ccgx-beacon-label { from { opacity: .5; transform: translateX(-7px); } to { opacity: 1; transform: none; } } /* ---- 2. FINAL CTA: ABSOLUTE TEXT KEEPOUT --------------------------------- */ #ccgx-page .ccgx-final--pass1 .ccgx-final__inner { /* the frame stops being drawn on the content edge */ padding: clamp(2.1rem, 3.2vw, 3.4rem) clamp(1.8rem, 3vw, 3.4rem); /* clipping is what turned the inner reading field into a hard rectangle with edges crossing the eyebrow and the micro line */ overflow: visible; } /* The frame is already an opaque graphite reading surface. A second feathered substrate inside it added nothing and was the thing being clipped. */ #ccgx-page .ccgx-final--pass1 .ccgx-final__inner > div:first-child::before { display: none; } #ccgx-page .ccgx-final--pass1 .ccgx-final__inner > div:first-child { isolation: auto; } /* decorative accent bar sits inside the corner radius, clear of the label */ #ccgx-page .ccgx-final--pass1 .ccgx-final__inner::before { left: clamp(1.8rem, 3vw, 3.4rem); top: -1px; width: 124px; height: 3px; border-radius: 0 0 2px 2px; } /* the fabrication tag moves into the padding band, never over the copy */ #ccgx-page .ccgx-final--pass1 .ccgx-final__inner::after { top: clamp(.75rem, 1.2vw, 1.1rem); right: clamp(1rem, 1.8vw, 1.6rem); } @media (max-width: 1024px) { #ccgx-page .ccgx-final--pass1 .ccgx-final__inner { padding: 2rem 1.9rem; } } @media (max-width: 760px) { #ccgx-page .ccgx-final--pass1 .ccgx-final__inner { padding: 1.65rem 1.35rem !important; } #ccgx-page .ccgx-final--pass1 .ccgx-final__inner::before { left: 1.35rem; width: 92px; } #ccgx-page .ccgx-final--pass1 .ccgx-final__inner::after { display: none; } #ccgx-page .ccgx-sec__kicker::before { width: 38px; background-size: 26px 1px; } } /* ---- 3. INTERACTION EMPHASIS (ambient behaviour unchanged) ---------------- */ /* Opening a route or a technical disclosure should feel like the visitor briefly energised that part of the board. One shot, no loop, no change to the scheduler, the concurrency cap or the packet architecture. */ #ccgx-page .ccgx-route[open] > summary .ccgx-disc__node, #ccgx-page .ccgx-tech-index > .ccgx-disc[open] > summary .ccgx-disc__node { animation: ccgx-beacon-hit .82s cubic-bezier(.2,.7,.3,1) 1; } @keyframes ccgx-beacon-hit { 0% { box-shadow: 0 0 0 0 rgba(127,224,255,.55); } 45% { box-shadow: 0 0 0 7px rgba(127,224,255,0); } 100% { box-shadow: 0 0 0 0 rgba(127,224,255,0); } } /* a carrying field reads a little further forward during an interaction */ #ccgx-page .ccgx-pcb-field.is-energized .pcb-active { opacity: .74; } @media (prefers-reduced-motion: reduce) { /* completed static state, immediately */ #ccgx-page .ccgx-sec__kicker, #ccgx-page.ccgx-js .ccgx-sec:not(.is-live) .ccgx-sec__kicker { opacity: 1 !important; transform: none !important; } #ccgx-page .ccgx-sec__kicker::before, #ccgx-page.ccgx-js .ccgx-sec:not(.is-live) .ccgx-sec__kicker::before { transform: none !important; opacity: 1 !important; } #ccgx-page .ccgx-route[open] > summary .ccgx-disc__node, #ccgx-page .ccgx-tech-index > .ccgx-disc[open] > summary .ccgx-disc__node { animation: none !important; } } /* ==== ccgx-optionA-color-width (verbatim from the page body) ==== */ /* ===== OPTION A LIGHT — COLOR-ONLY OVERRIDE ===== Paint/material conversion only. No geometry, sizing, layout, DOM, SVG paths, animation scheduling, breakpoints, content, or interaction architecture changed. */ #ccgx-page{ --bg:#e3eaf0; --bg-deep:#d5e0ea; --steel:#d3dde6; --steel-2:#c4d3df; --panel:#ffffff; --panel-2:#f7fbfd; --text:#09192f; --muted:#465d70; --muted-2:#71869a; --blue:#0a8fd4; --blue-2:#0f7fbe; --purple:#2b9ad9; --purple-2:#4fa8dc; --cyan:#10bce8; --green:#138b74; --amber:#a76b10; --line-soft:rgba(12,120,176,.10); --line:rgba(12,120,176,.16); --line-lit:rgba(10,143,212,.44); --surf-1:linear-gradient(155deg,#ffffff,#fbfdfe); --surf-2:linear-gradient(158deg,#f7fafc,#f4fafd); --surf-3:linear-gradient(158deg,#f7fbfd,#e5eef4); --surf-data:#fdfefe; --edge-soft:rgba(18,96,147,.16); --edge-mid:rgba(12,128,190,.24); --edge-active:rgba(10,143,212,.48); --inner-hi:rgba(255,255,255,.92); --inner-lo:rgba(22,72,104,.10); --lift-0:0 7px 18px rgba(39,78,104,.07); --lift-1:0 14px 34px rgba(39,78,104,.10); --lift-2:0 22px 52px rgba(39,78,104,.13); --reading:#ffffff; --p4-edge:rgba(12,120,176,.18); --p4-edge-hot:rgba(10,143,212,.42); --p4-hi:rgba(255,255,255,.94); --p4-lo:rgba(24,76,110,.10); --p4-soft-shadow:0 16px 36px rgba(41,79,105,.10); color-scheme:light; background:#e3eaf0; color:var(--text); } #ccgx-page p{color:var(--muted)} #ccgx-page strong,#ccgx-page h1,#ccgx-page h2,#ccgx-page h3,#ccgx-page h4{color:var(--text)} #ccgx-page .ccgx-mono{color:#56758d} #ccgx-page .ccgx-sec__kicker,#ccgx-page .ccgx-subhead .ccgx-mono{color:#0b6fa9;text-shadow:none;filter:none} #ccgx-page .ccgx-sec__head>h2,#ccgx-page .ccgx-final__inner h2{ text-shadow:0 2px 0 rgba(255,255,255,.9),0 5px 18px rgba(10,143,212,.10); } #ccgx-page .ccgx-hero h1{ text-shadow:0 2px 0 rgba(255,255,255,.92),0 6px 22px rgba(10,143,212,.15); } /* One continuous pale PCB substrate: exact backplane geometry is untouched. */ #ccgx-page .ccgx-backplane{ background:linear-gradient(180deg,#e8eef4 0%,#e0e9f0 26%,#e3ebf2 58%,#d5e0ea 100%); } #ccgx-page .ccgx-backplane__pours{ /* Keep the physical copper-pour variation, but remove the broad cyan fog. */ background: radial-gradient(1400px 900px at 12% 6%,rgba(10,143,212,.018),transparent 62%), radial-gradient(1200px 800px at 88% 21%,rgba(20,120,170,.012),transparent 60%), radial-gradient(1500px 1000px at 20% 44%,rgba(10,143,212,.015),transparent 62%), radial-gradient(1300px 900px at 82% 63%,rgba(20,120,170,.014),transparent 60%), radial-gradient(1500px 1000px at 26% 84%,rgba(10,143,212,.016),transparent 62%), radial-gradient(1200px 800px at 78% 97%,rgba(20,120,170,.012),transparent 60%); } #ccgx-page .ccgx-backplane__mesh{ opacity:.50; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2382b2ce' stroke-width='1' opacity='.48'%3E%3Cpath d='M0 60H240M0 180H240M60 0V240M180 0V240'/%3E%3C/g%3E%3Cg fill='none' stroke='%236095b8' stroke-width='.75' opacity='.50'%3E%3Cpath d='M0 120H240M120 0V240M0 20H90M150 20H240M0 220H90M150 220H240'/%3E%3C/g%3E%3Cg fill='%23216991' opacity='.48'%3E%3Ccircle cx='60' cy='60' r='2.1'/%3E%3Ccircle cx='180' cy='60' r='2.1'/%3E%3Ccircle cx='60' cy='180' r='2.1'/%3E%3Ccircle cx='180' cy='180' r='2.1'/%3E%3Ccircle cx='120' cy='120' r='1.6'/%3E%3C/g%3E%3Cg fill='none' stroke='%230574b8' stroke-width='.7' opacity='.34'%3E%3Crect x='96' y='36' width='48' height='14' rx='2'/%3E%3Crect x='36' y='150' width='14' height='34' rx='2'/%3E%3C/g%3E%3C/svg%3E"); } #ccgx-page .ccgx-backplane__traces{ background-image: linear-gradient(rgba(10,143,212,.31) 1px,transparent 1px), linear-gradient(rgba(10,143,212,.23) 1px,transparent 1px), linear-gradient(rgba(20,120,170,.19) 1px,transparent 1px), linear-gradient(rgba(10,143,212,.26) 1px,transparent 1px); } #ccgx-page .ccgx-backplane__rails i{ background: linear-gradient(180deg,transparent 0,rgba(10,143,212,.58) 3%,rgba(10,143,212,.58) 97%,transparent 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='34' viewBox='0 0 6 34'%3E%3Ccircle cx='3' cy='6' r='1.5' fill='%230574b8'/%3E%3Ccircle cx='3' cy='23' r='1.1' fill='%23216991'/%3E%3C/svg%3E"); background-repeat:no-repeat,repeat-y; background-position:0 0,-2px 0; } #ccgx-page .ccgx-backplane::before{background:linear-gradient(180deg,rgba(227,234,240,.90),transparent)} #ccgx-page .ccgx-backplane::after{background:linear-gradient(0deg,rgba(227,234,240,.90),transparent)} /* Existing PCB paths/components: same SVGs, new paint only. */ #ccgx-page .pcb-bg{stroke:#86c2de;opacity:.34} #ccgx-page .pcb-fine{stroke:#4fa6d2;opacity:.54} #ccgx-page .pcb-struct{stroke:#1583bd;opacity:.62} #ccgx-page .pcb-bus{stroke:#0a8fd4;opacity:.80;filter:drop-shadow(0 1px 0 rgba(255,255,255,.45))} #ccgx-page .pcb-diff{stroke:#1a97d2;opacity:.74} #ccgx-page .pcb-active{stroke:#06a6dd;opacity:.75;filter:drop-shadow(0 0 3px rgba(10,143,212,.15))} #ccgx-page .pcb-pour{fill:rgba(10,143,212,.018);stroke:rgba(10,143,212,.17)} #ccgx-page .pcb-pour-quiet{fill:rgba(20,120,170,.012)} #ccgx-page .pcb-pour-hero{fill:rgba(10,143,212,.014);stroke:rgba(10,143,212,.18)} #ccgx-page .pcb-via-pad{fill:rgba(10,143,212,.12);stroke:rgba(10,143,212,.28)} #ccgx-page .pcb-via-ring{fill:#e2f2fb;stroke:#0b86c8;filter:drop-shadow(-.8px -.8px 0 rgba(255,255,255,.7))} #ccgx-page .pcb-via-hole{fill:#fbfdfe;stroke:rgba(16,96,140,.55)} #ccgx-page .pcb-via-power .pcb-via-ring{fill:#cfeafa;stroke:#0a8fd4} #ccgx-page .pcb-teardrop{fill:rgba(10,143,212,.28);stroke:rgba(10,143,212,.22)} #ccgx-page .pcb-pad,#ccgx-page .pcb-testpad{fill:#b3ddf2;stroke:#0a8fd4} #ccgx-page .pcb-testpad{fill:#c8e9f8;opacity:.88} #ccgx-page .pcb-ic-body{fill:#dcecf9;stroke:rgba(14,120,176,.42);filter:drop-shadow(0 5px 8px rgba(39,78,104,.10))} #ccgx-page .pcb-ic-silk{stroke:rgba(14,120,176,.34)} #ccgx-page .pcb-pin1{fill:#0a8fd4;opacity:.74} #ccgx-page .pcb-pin{fill:#74bcdd;stroke:rgba(10,143,212,.45)} #ccgx-page .pcb-bank-body{fill:#d3e7f7;stroke:rgba(14,120,176,.35)} #ccgx-page .pcb-bga-ball{fill:#83c4e2;stroke:rgba(10,143,212,.32)} #ccgx-page .pcb-passive-body{fill:#d4e7f5;stroke:rgba(14,120,176,.33)} #ccgx-page .pcb-passive-pad{fill:#7cc0e0;stroke:rgba(10,143,212,.48)} #ccgx-page .pcb-connector-shell{fill:#d1e6f5;stroke:rgba(14,120,176,.42)} #ccgx-page .pcb-connector-pad{fill:#70bade;stroke:rgba(10,143,212,.48)} #ccgx-page .pcb-silk{fill:#1583bd!important;stroke:#1583bd!important;opacity:.58} #ccgx-page .pcb-silk-tiny{fill:#1583bd!important;opacity:.48} #ccgx-page .pcb-mount-keep{stroke:rgba(10,143,212,.30)} #ccgx-page .pcb-mount-ring{fill:#d7edf8;stroke:#1583bd} #ccgx-page .pcb-mount-hole{fill:#fbfdfe;stroke:rgba(16,96,140,.55)} #ccgx-page .ccgx-pcb-field.is-energized .pcb-active{stroke:#12c0ec;opacity:.76;filter:drop-shadow(0 0 5px rgba(18,192,236,.22))} #ccgx-page .ccgx-pcb-field.is-energized .pcb-pad,#ccgx-page .ccgx-pcb-field.is-energized .pcb-testpad{stroke:rgba(8,160,215,.82)} #ccgx-page .ccgx-pcb-field.is-energized .pcb-ic-body{stroke:rgba(10,143,212,.55)} #ccgx-page .ccgx-pcb-field.is-energized .pcb-passive-pad{fill:#63b4d9;stroke:rgba(10,143,212,.64)} /* Open reading fields keep their exact shapes/fades, now white. */ #ccgx-page .ccgx-hero__copy::before, #ccgx-page .ccgx-sec__head::before, #ccgx-page .ccgx-subhead::before, #ccgx-page .ccgx-final__inner>div:first-child::before{ background:radial-gradient(ellipse at 34% 50%,rgba(255,255,255,.998) 0%,rgba(250,253,255,.985) 48%,rgba(246,251,253,.82) 68%,rgba(246,251,253,.24) 86%,transparent 100%); filter:none; } #ccgx-page .ccgx-sec__head::before{background:linear-gradient(90deg,rgba(255,255,255,.998) 0%,rgba(250,253,255,.99) 38%,rgba(246,251,253,.92) 64%,rgba(246,251,253,.30) 88%,transparent 100%)} #ccgx-page .ccgx-subhead::before{background:radial-gradient(ellipse at 28% 50%,rgba(255,255,255,.998),rgba(248,252,254,.94) 56%,rgba(246,251,253,.20) 88%,transparent 100%)} #ccgx-page .ccgx-final__inner>div:first-child::before{background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.998),rgba(246,250,253,.96) 58%,rgba(246,251,253,.14) 90%,transparent 100%)} /* Existing equipment surfaces, same component identities. */ #ccgx-page .ccgx-panel,#ccgx-page .ccgx-console,#ccgx-page .ccgx-summary,#ccgx-page .ccgx-cta,#ccgx-page .ccgx-route[open]{background:var(--surf-1);border-color:var(--edge-mid);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(29,79,111,.08),var(--lift-2)} #ccgx-page .ccgx-panel__bar,#ccgx-page .ccgx-console__bar{background:linear-gradient(180deg,#f4fafd,#edf5fa);border-bottom-color:rgba(13,89,139,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)} #ccgx-page .ccgx-panel__body,#ccgx-page .ccgx-console__body{background:rgba(255,255,255,.24)} #ccgx-page .ccgx-card,#ccgx-page .ccgx-card--quiet,#ccgx-page .ccgx-step,#ccgx-page .ccgx-route,#ccgx-page .ccgx-route-item,#ccgx-page .ccgx-case3__item,#ccgx-page .ccgx-policyline,#ccgx-page .ccgx-note,#ccgx-page .ccgx-assure__item{background:var(--surf-2);border-color:var(--edge-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(27,76,108,.07),var(--lift-0)} #ccgx-page .ccgx-step:hover,#ccgx-page .ccgx-route:hover{background:linear-gradient(158deg,#ffffff,#f6fafd);border-color:rgba(10,143,212,.34)} #ccgx-page .ccgx-disc{border-color:rgba(12,120,176,.14);background:linear-gradient(155deg,#ffffff,#f7fbfd);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(27,76,108,.06)} #ccgx-page .ccgx-disc>summary:hover{background:linear-gradient(90deg,rgba(10,143,212,.06),rgba(10,143,212,.015))} #ccgx-page .ccgx-disc[open]{background:var(--surf-1);border-color:var(--edge-active);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(27,76,108,.08),0 16px 40px rgba(39,78,104,.11),0 0 0 1px rgba(10,143,212,.035)} #ccgx-page .ccgx-disc__body::before{background:linear-gradient(90deg,transparent,rgba(10,143,212,.16),transparent)} #ccgx-page .ccgx-disc__node{background:#f5fafd;border-color:rgba(10,143,212,.40);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)} #ccgx-page .ccgx-row,#ccgx-page .ccgx-evidence__row{background:#fdfeff;border-color:rgba(12,120,176,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)} #ccgx-page .ccgx-row:hover,#ccgx-page .ccgx-evidence__row:hover{background:#f4fafd;border-color:rgba(10,143,212,.25)} #ccgx-page .ccgx-case3__item:nth-child(2){background:linear-gradient(155deg,#f4f9fc,#f2f9fc)!important;border-color:rgba(10,143,212,.22)} #ccgx-page .ccgx-note{background:linear-gradient(155deg,#ffffff,#f6fafd)} #ccgx-page .ccgx-note--warn{background:linear-gradient(155deg,#fffaf1,#f8f1e4);border-color:rgba(167,107,16,.24)} #ccgx-page .ccgx-cta{background:radial-gradient(780px 260px at 8% 0%,rgba(10,143,212,.09),transparent 66%),linear-gradient(145deg,#ffffff,#f6fafd);border-color:rgba(10,143,212,.34)} #ccgx-page .ccgx-btn--secondary{color:var(--text);background:linear-gradient(180deg,#ffffff,#f1f7fb);border-color:rgba(10,143,212,.28);box-shadow:inset 0 1px 0 #fff} #ccgx-page .ccgx-btn--secondary:hover{background:#eaf4fa;border-color:rgba(10,143,212,.45)} #ccgx-page .ccgx-chip,#ccgx-page .ccgx-pill,#ccgx-page .ccgx-tag,#ccgx-page .ccgx-state{background:rgba(238,246,250,.96);border-color:rgba(12,120,176,.16);color:var(--muted)} #ccgx-page .ccgx-state--ok{background:#e8f7f2;border-color:rgba(19,139,116,.30);color:#107861} #ccgx-page .ccgx-state--warn{background:#fff5df;border-color:rgba(167,107,16,.30);color:#8b570d} #ccgx-page .ccgx-state--info{background:#eaf7fb;border-color:rgba(5,167,216,.30);color:#087b9d} #ccgx-page .ccgx-route__desc,#ccgx-page .ccgx-sec__intro,#ccgx-page .ccgx-cta p,#ccgx-page .ccgx-final__micro{color:#435d73} #ccgx-page .ccgx-disc__title,#ccgx-page .ccgx-route__title,#ccgx-page .ccgx-note__title,#ccgx-page .ccgx-cta__title{color:#09192f} #ccgx-page .ccgx-ticks li,#ccgx-page .ccgx-summary li{color:#425d72} /* PASS-4 identity selectors had hard-coded graphite paints: recolor in place. */ #ccgx-page .ccgx-btn--primary{background:linear-gradient(135deg,#0a8fd4 0%,#1a9ada 72%,#2ba5e0 100%);border-color:rgba(10,143,212,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 14px 34px rgba(10,143,212,.20)} #ccgx-page .ccgx-btn--secondary{background:linear-gradient(180deg,#ffffff,#f1f7fb);border-color:rgba(10,143,212,.26)} #ccgx-page .ccgx-hero__assurance .ccgx-chip{background:linear-gradient(180deg,#ffffff,#f7fbfd);border-color:rgba(10,143,212,.17)} #ccgx-page .ccgx-route{background:linear-gradient(155deg,#ffffff 0%,#f6fafd 100%)!important;border-color:rgba(10,143,212,.20)!important;box-shadow:inset 0 1px 0 #fff,0 18px 42px rgba(39,78,104,.09)!important} #ccgx-page .ccgx-route>summary::before{background:color-mix(in srgb,var(--route-accent) 8%,#f5fafc);color:var(--route-accent)} #ccgx-page .ccgx-route__title{color:#09192f} #ccgx-page .ccgx-route__desc{color:#526b7f} #ccgx-page .ccgx-route>summary>.ccgx-disc__icon{background:rgba(10,143,212,.06)} #ccgx-page .ccgx-route:hover{box-shadow:inset 0 1px 0 #fff,0 24px 50px rgba(39,78,104,.12)!important} #ccgx-page .ccgx-route[open]{background:linear-gradient(155deg,#ffffff,#f6fafd)!important;box-shadow:inset 0 1px 0 #fff,0 28px 64px rgba(39,78,104,.14)!important} #ccgx-page .ccgx-route__body{background:#fbfdfe!important} #ccgx-page .ccgx-route-items{background:#f6fafd;border-color:rgba(10,143,212,.13)} #ccgx-page #symptoms-we-diagnose .ccgx-route-grid + .ccgx-disc{background:#fbfdfe!important;border-color:rgba(10,143,212,.14)!important} #ccgx-page .ccgx-process3{background:#fcfdfe;border-top-color:rgba(10,143,212,.18);border-bottom-color:rgba(10,143,212,.13)} #ccgx-page .ccgx-process3 .ccgx-step__num{background:#ebf5fb!important;border-color:rgba(10,143,212,.40)!important;box-shadow:0 0 0 7px #fcfdfe,0 0 28px rgba(10,143,212,.08);color:#0a8fd4!important} #ccgx-page .ccgx-process3 .ccgx-step:nth-child(2) .ccgx-step__num{color:#058db7!important} #ccgx-page .ccgx-process3 .ccgx-step:nth-child(3) .ccgx-step__num{color:#4f79bd!important} #ccgx-page .ccgx-policyline{background:linear-gradient(90deg,#fbfdfe,#f2f8fc)!important} #ccgx-page .ccgx-case3{background:#fbfdfe;border-color:rgba(10,143,212,.15);box-shadow:var(--p4-soft-shadow)} #ccgx-page .ccgx-case3__item::before{border-color:#e5f0f5!important} #ccgx-page .ccgx-case3__item:nth-child(2){background:linear-gradient(180deg,#ffffff,#f2f8fc)!important} #ccgx-page .ccgx-case3__item:nth-child(2) .ccgx-case3__label{color:#078db7} #ccgx-page .ccgx-case3__item:nth-child(3) .ccgx-case3__label{color:#4f79bd} #ccgx-page #after-the-diagnostic>.ccgx-wrap>.ccgx-card--quiet{background:#fbfdfe!important;border-color:rgba(10,143,212,.14)!important} #ccgx-page .ccgx-outcome-strip span{color:#435d73!important} #ccgx-page .ccgx-tech-index>.ccgx-disc{background:#fdfefe!important;border-color:rgba(10,143,212,.14)!important} #ccgx-page .ccgx-tech-index>.ccgx-disc::before{background:#edf6fb;border-right-color:rgba(10,143,212,.17);color:#2477aa} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary>.ccgx-disc__icon{background:#f2f8fc!important;border-color:rgba(10,143,212,.16)!important} #ccgx-page .ccgx-tech-index>.ccgx-disc .ccgx-route__desc{color:#71869a} #ccgx-page .ccgx-tech-index>.ccgx-disc[open]{background:#ffffff!important;border-color:rgba(10,143,212,.30)!important;box-shadow:0 22px 46px rgba(39,78,104,.10)!important} #ccgx-page .ccgx-tech-index>.ccgx-disc[open]::before{background:linear-gradient(180deg,#e0f0fa,#d2e9f7);color:#0a6ea7} #ccgx-page .ccgx-tech-index>.ccgx-disc>.ccgx-disc__body{background:#fbfdfe!important;border-left-color:rgba(10,143,212,.12)} #ccgx-page .ccgx-faq-short>.ccgx-disc{border-top-color:rgba(10,143,212,.16)!important} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary::before{color:#2c79a8} #ccgx-page .ccgx-faq-short>.ccgx-disc>summary>.ccgx-disc__icon{background:#f2f8fc!important} #ccgx-page .ccgx-faq-short>.ccgx-disc[open]{background:linear-gradient(180deg,#f7fbfd,#f7fbfd)!important} #ccgx-page .ccgx-more-questions{background:#fafcfe!important} #ccgx-page .ccgx-cta{background:linear-gradient(135deg,#ffffff 0%,#f6fafd 48%,#edf6fb 100%)!important;border-color:rgba(10,143,212,.32)!important;box-shadow:inset 0 1px 0 #fff,0 24px 58px rgba(39,78,104,.12)!important} #ccgx-page .ccgx-cta::after{color:rgba(20,120,170,.28)} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner{background:linear-gradient(145deg,#ffffff,#f7fbfd 62%,#edf5fa);border-color:rgba(10,143,212,.22);box-shadow:inset 0 1px 0 #fff,0 30px 72px rgba(39,78,104,.14)} #ccgx-page .ccgx-final--pass1 .ccgx-final__inner::after{color:rgba(20,120,170,.30)} #ccgx-page .ccgx-tech-index>.ccgx-disc>summary:hover,#ccgx-page .ccgx-faq-short>.ccgx-disc>summary:hover{background:rgba(10,143,212,.035)} /* Hero/final base paints are transparent in the continuity pass; keep that exact architecture. */ #ccgx-page .ccgx-hero__eyebrow{background:rgba(255,255,255,.78);border-color:rgba(10,143,212,.30);color:#425d72} #ccgx-page .ccgx-hero h1 .ccgx-hero__accent{background:linear-gradient(105deg,#0a8fd4,#2b9ad9 58%,#10bce8);-webkit-background-clip:text;background-clip:text;color:transparent} #ccgx-page .ccgx-hero__paid{background:rgba(255,255,255,.72);border-left-color:#10bce8} #ccgx-page .ccgx-hero__paid b{color:var(--text)} #ccgx-page .ccgx-hero__band{background:rgba(244,250,253,.82);border-top-color:rgba(10,143,212,.16)} #ccgx-page .ccgx-hero__band-lead p,#ccgx-page .ccgx-hero__band-name{color:var(--text)} #ccgx-page .ccgx-hero__band-desc{color:var(--muted-2)} #ccgx-page .ccgx-hero__band-item{border-left-color:rgba(10,143,212,.16)} #ccgx-page .ccgx-summary{background:rgba(248,252,254,.94)} #ccgx-page .ccgx-final__micro{color:#5f7488} /* ===== REQUESTED WIDTH + BOARD-OUTBOARD PATCH ===== One intentional geometry change: production content shell = 1580px on wide desktop. Existing PCB SVG paths are untouched; their field is simply allowed to extend farther behind the widened side gutters. */ @media (min-width:1121px){ #ccgx-page{ --shell:min(calc(100vw - 80px),1580px); --shell-wide:min(calc(100vw - 80px),1580px); --maxw:1580px; } #ccgx-page .ccgx-wrap, #ccgx-page .ccgx-hero__inner, #ccgx-page .ccgx-hero__descend{ width:var(--shell); max-width:none; } #ccgx-page .ccgx-pcb-field, #ccgx-page .ccgx-backplane__rails{ width:min(100vw,2800px); } } @media (max-width:1120px) and (min-width:761px){ #ccgx-page{--shell:min(96vw,1060px);--shell-wide:min(98vw,1100px);--maxw:1060px} } @media (max-width:760px){ #ccgx-page{--shell:100%;--shell-wide:100%;--maxw:100%} } #ccgx-page .ccgx-hero h1 .ccgx-hero__accent{text-shadow:0 5px 18px rgba(10,143,212,.22)} /* ===== REVISION 3 — replaces the previous revision section entirely ===== Fixes, in order: the dark handoff tint under the header; a dark-theme veil the light conversion never caught; real board activity; usable content width at real window sizes; and the FAQ section, which was the only one with no card. */ /* Board lines keep true weight however far the field is scaled, so widening the page reveals more circuitry instead of magnifying the same artwork. */ #ccgx-page .ccgx-pcb-field path,#ccgx-page .ccgx-pcb-field rect, #ccgx-page .ccgx-pcb-field circle,#ccgx-page .ccgx-pcb-field line, #ccgx-page .ccgx-pcb-field polyline,#ccgx-page .ccgx-pcb-field ellipse{vector-effect:non-scaling-stroke} /* ---- 1. the grey veil at the top and bottom of the board ---- */ #ccgx-page .ccgx-backplane::before, #ccgx-page .ccgx-backplane::after{background:none!important} /* ---- 2. substrate: darker but CLEAN and cooler, with real tonal depth so it does not read as one flat wash ---- */ #ccgx-page{background:#dfe8f1!important} #ccgx-page .ccgx-backplane{ background: radial-gradient(1200px 780px at 18% 8%, rgba(255,255,255,.55), transparent 62%), radial-gradient(1000px 700px at 82% 42%, rgba(255,255,255,.34), transparent 60%), linear-gradient(180deg,#e4edf5 0%,#dbe6f0 30%,#e1eaf3 62%,#d3e0ec 100%)!important; } #ccgx-page .ccgx-backplane__pours{ background:radial-gradient(1300px 860px at 14% 6%,rgba(10,150,220,.075),transparent 60%), radial-gradient(1100px 700px at 84% 66%,rgba(10,150,220,.055),transparent 58%)!important; } #ccgx-page .ccgx-backplane__rails i{ background:linear-gradient(180deg,transparent 0,rgba(6,150,220,.78) 3%,rgba(6,150,220,.78) 97%,transparent 100%)!important; } /* ---- 3. copper reads clearly against the darker board ---- */ #ccgx-page .pcb-pin{fill:#68b8de;stroke:rgba(10,143,212,.62)} #ccgx-page .pcb-passive-pad{fill:#6fbbe0;stroke:rgba(10,143,212,.64)} #ccgx-page .pcb-connector-pad{fill:#63b4de;stroke:rgba(10,143,212,.64)} /* ---- 5. width: the fixed 80px gutter was the real cap, not the max-width. At a 1400px window the old rule gave the same shell whether the cap was 1425 or 1580, which is why the previous change was invisible. ---- */ @media (min-width:1121px){ #ccgx-page{--shell:min(calc(100vw - 26px),1425px); --shell-wide:min(calc(100vw - 26px),1425px);--maxw:1425px} } /* ---- 6. "Answers before you start" gets the same card treatment as every other section instead of bare text on the board ---- */ #ccgx-page .ccgx-faq-short>.ccgx-disc{ background:#fdfeff!important; border:1px solid rgba(10,143,212,.17)!important; border-radius:12px!important; margin-bottom:10px!important; box-shadow:0 6px 16px rgba(30,64,92,.07)!important; } #ccgx-page .ccgx-faq-short>.ccgx-disc[open]{ background:linear-gradient(180deg,#ffffff,#f4fafd)!important; box-shadow:0 12px 28px rgba(30,64,92,.10)!important; } #ccgx-page .ccgx-faq-short>.ccgx-disc>summary{padding:14px 16px!important} #ccgx-page .ccgx-faq-short>.ccgx-disc>.ccgx-disc__body{background:transparent!important;padding:0 16px 14px!important} /* ---- 7. a dark-theme veil the light conversion never caught: .ccgx-sec::before laid rgba(22,24,26,.28) over the top 84px of EVERY section ---- */ #ccgx-page .ccgx-sec::before{background:none!important;content:none!important} .cc-site-header{box-shadow:0 10px 26px rgba(16,54,83,.16)!important} .cc-site-header::after{opacity:.55!important} /* ---- 8. THE HEADER TINT. The chassis handoff collar and board-handoff glow were authored for the DARK board - a near-black rgba(4,16,27,.72) gradient plus a dark radial - so on the icy board they read as a dirty smear under the header. Retoned to the light board. Scoped to page 24: these ship inside the page. ---- */ .cc-handoff-collar--top{ background:linear-gradient(180deg,rgba(16,54,83,.30) 0%,rgba(16,54,83,.09) 38%,rgba(16,54,83,0) 100%)!important; } .cc-handoff-collar--bottom{ background:linear-gradient(0deg,rgba(16,54,83,.30) 0%,rgba(16,54,83,.09) 38%,rgba(16,54,83,0) 100%)!important; } .cc-board-handoff--top::before{ background:radial-gradient(760px 260px at 50% 0%,rgba(10,120,180,.12),rgba(10,120,180,0) 70%)!important; } .cc-board-handoff--bottom::before{ background:radial-gradient(760px 260px at 50% 100%,rgba(10,120,180,.12),rgba(10,120,180,0) 70%)!important; } /* ---- 9. keepouts matched to THIS substrate ---- */ #ccgx-page .ccgx-hero__copy::before{ background:radial-gradient(ellipse 76% 115% at 28% 50%,rgba(223,232,241,.88) 0%,rgba(223,232,241,.55) 54%,rgba(223,232,241,0) 100%)!important; } #ccgx-page .ccgx-sec__head::before{ background:radial-gradient(ellipse 54% 115% at 20% 50%,rgba(223,232,241,.82) 0%,rgba(223,232,241,.46) 56%,rgba(223,232,241,0) 100%)!important; } #ccgx-page .ccgx-subhead::before{ background:radial-gradient(ellipse 72% 115% at 30% 50%,rgba(223,232,241,.80) 0%,rgba(223,232,241,.44) 56%,rgba(223,232,241,0) 100%)!important; } #ccgx-page .ccgx-final__inner>div:first-child::before{ background:radial-gradient(ellipse 78% 120% at 28% 50%,rgba(223,232,241,.82) 0%,rgba(223,232,241,.46) 56%,rgba(223,232,241,0) 100%)!important; } /* ---- 10. more copper presence everywhere, so sparse sections still read as board ---- */ #ccgx-page .ccgx-backplane__traces{ background-image:linear-gradient(rgba(8,140,205,.62) 1px,transparent 1px), linear-gradient(90deg,rgba(8,140,205,.62) 1px,transparent 1px)!important; } #ccgx-page .ccgx-backplane__mesh{opacity:.85!important} #ccgx-page .pcb-via-ring{stroke:#0a7fc0;stroke-width:1.1px} #ccgx-page .pcb-ic-body{stroke:rgba(12,110,165,.58)} #ccgx-page .pcb-passive-body{stroke:rgba(12,110,165,.50)} #ccgx-page .pcb-connector-shell{stroke:rgba(12,110,165,.58)} /* ===== REVISION 4 ===== */ /* ===== 1. remove the previous decorative motion entirely ===== */ #ccgx-page .pcb-active,#ccgx-page .pcb-bus,#ccgx-page .pcb-testpad, #ccgx-page .pcb-pin1,#ccgx-page .pcb-via-power .pcb-via-ring{animation:none!important} #ccgx-page .pcb-active{stroke-dasharray:none!important} /* ===== 2. blue is never dimmed toward the substrate. Every conductor is an explicit full-opacity colour, so only the WHITE carries the darkening. ===== */ #ccgx-page .pcb-bg{stroke:#96c7e4;opacity:1} #ccgx-page .pcb-fine{stroke:#4aa6d6;opacity:1} #ccgx-page .pcb-struct{stroke:#1482be;opacity:1} #ccgx-page .pcb-bus{stroke:#0692d8;opacity:1} #ccgx-page .pcb-diff{stroke:#1e98d4;opacity:1} #ccgx-page .pcb-active{stroke:#00b0eb;opacity:1} #ccgx-page .pcb-silk{fill:#268cc4!important;stroke:#268cc4!important;opacity:1} #ccgx-page .pcb-silk-tiny{fill:#268cc4!important;opacity:1} /* copper reads like copper: rounded joins and a soft mask shadow under the buses */ #ccgx-page .pcb-bus,#ccgx-page .pcb-struct,#ccgx-page .pcb-diff,#ccgx-page .pcb-active{ stroke-linecap:round;stroke-linejoin:round; } #ccgx-page .pcb-bus{filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))} #ccgx-page .pcb-struct{filter:drop-shadow(0 1px 0 rgba(255,255,255,.42))} /* ===== 3. the signal itself - three layers on the conductor's own geometry ===== */ #ccgx-page .ccgx-sig__l{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} #ccgx-page .ccgx-sig__glow{stroke:rgba(12,190,255,.22);stroke-width:16;filter:blur(4px)} #ccgx-page .ccgx-sig__halo{stroke:rgba(20,200,255,.46);stroke-width:8;filter:blur(1.6px)} #ccgx-page .ccgx-sig__core{stroke:#33c8fb;stroke-width:3} #ccgx-page .ccgx-sig__head{stroke:#ffffff;stroke-width:4.2} #ccgx-page g.pcb-via.is-hot .pcb-via-ring{stroke:#1fc6f5;stroke-width:1.9px;transition:stroke .12s} #ccgx-page g.pcb-via.is-hot .pcb-via-hole{fill:#dcf5ff} #ccgx-page g.pcb-via .pcb-via-ring{transition:stroke .5s ease-out} /* ===== 4. ONE radius scale. There were ten. ===== */ #ccgx-page .ccgx-disc,#ccgx-page .ccgx-route,#ccgx-page .ccgx-card, #ccgx-page .ccgx-note,#ccgx-page .ccgx-faq-short>.ccgx-disc, #ccgx-page .ccgx-tech-index>.ccgx-disc,#ccgx-page .ccgx-more-questions, #ccgx-page .ccgx-case3__item,#ccgx-page .ccgx-step{border-radius:14px!important} #ccgx-page .ccgx-cta,#ccgx-page .ccgx-panel,#ccgx-page .ccgx-final__inner, #ccgx-page .ccgx-process3,#ccgx-page .ccgx-case3,#ccgx-page .ccgx-policyline{border-radius:16px!important} #ccgx-page .ccgx-row,#ccgx-page .ccgx-evidence__row,#ccgx-page .ccgx-btn, #ccgx-page .ccgx-btn--primary,#ccgx-page .ccgx-btn--secondary,#ccgx-page .ccgx-chip, #ccgx-page .ccgx-route-item,#ccgx-page .ccgx-outcome-strip span, #ccgx-page .ccgx-route__body,#ccgx-page .ccgx-route-items{border-radius:10px!important} #ccgx-page .ccgx-pill,#ccgx-page .ccgx-tag,#ccgx-page .ccgx-state, #ccgx-page .ccgx-hero__eyebrow{border-radius:999px!important} /* ===== 5. depth on the page content, so panels sit ON the board ===== */ #ccgx-page .ccgx-disc,#ccgx-page .ccgx-route,#ccgx-page .ccgx-card,#ccgx-page .ccgx-note, #ccgx-page .ccgx-faq-short>.ccgx-disc,#ccgx-page .ccgx-tech-index>.ccgx-disc, #ccgx-page .ccgx-more-questions,#ccgx-page .ccgx-case3,#ccgx-page .ccgx-process3, #ccgx-page .ccgx-policyline,#ccgx-page .ccgx-final__inner,#ccgx-page .ccgx-cta{ box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(21,52,79,.06), 0 8px 18px rgba(21,52,79,.09), 0 22px 44px rgba(21,52,79,.07)!important; border:1px solid rgba(12,110,168,.16)!important; } #ccgx-page .ccgx-row,#ccgx-page .ccgx-evidence__row,#ccgx-page .ccgx-step, #ccgx-page .ccgx-case3__item,#ccgx-page .ccgx-route-item{ box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 2px 6px rgba(21,52,79,.06)!important; border:1px solid rgba(12,110,168,.13)!important; } #ccgx-page .ccgx-disc,#ccgx-page .ccgx-route,#ccgx-page .ccgx-row, #ccgx-page .ccgx-faq-short>.ccgx-disc,#ccgx-page .ccgx-tech-index>.ccgx-disc{ transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease; } #ccgx-page .ccgx-disc:hover,#ccgx-page .ccgx-route:hover, #ccgx-page .ccgx-faq-short>.ccgx-disc:hover,#ccgx-page .ccgx-tech-index>.ccgx-disc:hover{ transform:translateY(-1px); border-color:rgba(10,143,212,.30)!important; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 2px 4px rgba(21,52,79,.07), 0 14px 28px rgba(21,52,79,.12), 0 30px 60px rgba(21,52,79,.09)!important; } #ccgx-page .ccgx-disc[open],#ccgx-page .ccgx-route[open], #ccgx-page .ccgx-faq-short>.ccgx-disc[open],#ccgx-page .ccgx-tech-index>.ccgx-disc[open]{ border-color:rgba(10,143,212,.34)!important; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 3px 6px rgba(21,52,79,.08), 0 18px 36px rgba(21,52,79,.13), 0 40px 74px rgba(21,52,79,.10)!important; } #ccgx-page .ccgx-btn--primary{ box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 14px rgba(8,105,165,.30), 0 14px 30px rgba(8,105,165,.20)!important; } #ccgx-page .ccgx-btn--secondary{ box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 4px 12px rgba(21,52,79,.09)!important; border:1px solid rgba(12,110,168,.20)!important; } #ccgx-page .ccgx-process3 .ccgx-step,#ccgx-page .ccgx-steps .ccgx-step{border-radius:14px!important} /* ===== SILKSCREEN LEGEND PLATE ===== Section heads sat directly on the board, so the board's own blue silkscreen (R14, C26, GPU / VRM, MON 3 ...) ran straight through the kicker and heading. Each head now sits on a legend plate: a near-white field with a hard ice rail on its left edge that fades out to nothing on the right, the way a solder-mask keepout reads on a real board. Text is always on plate; the board still shows. */ #ccgx-page .ccgx-sec__head, #ccgx-page .ccgx-subhead, #ccgx-page .ccgx-hero__copy, #ccgx-page .ccgx-final__inner>div:first-child{position:relative;z-index:0} #ccgx-page .ccgx-sec__head::before, #ccgx-page .ccgx-subhead::before, #ccgx-page .ccgx-final__inner>div:first-child::before{ content:""!important;display:block!important;position:absolute;z-index:-1; left:-26px; right:-4%; top:-18px; bottom:-16px; border-radius:4px 16px 16px 4px; background: linear-gradient(90deg, rgba(6,146,216,.85) 0 3px, rgba(250,253,255,.975) 3px 70%, rgba(249,253,255,.92) 80%, rgba(247,252,255,.52) 90%, rgba(245,251,255,0) 100%)!important; box-shadow:0 1px 0 rgba(255,255,255,.7) inset; } /* the hero heading gets the same plate, sized to its taller block */ #ccgx-page .ccgx-hero__copy::before{ content:""!important;display:block!important;position:absolute;z-index:-1; left:-28px; right:-8%; top:-22px; bottom:-18px; border-radius:4px 18px 18px 4px; background: linear-gradient(90deg, rgba(6,146,216,.85) 0 3px, rgba(251,253,255,.97) 3px 52%, rgba(250,253,255,.88) 66%, rgba(248,252,255,.50) 82%, rgba(246,251,255,0) 100%)!important; } /* the small blue helper line reads as a printed legend on that plate */ #ccgx-page .ccgx-sec__kicker{ color:#0a6ba6!important; letter-spacing:.10em; font-weight:600; } #ccgx-page .ccgx-sec__kicker::before{ content:"";display:inline-block;width:14px;height:2px;vertical-align:middle; margin-right:8px;margin-bottom:2px;border-radius:2px; background:linear-gradient(90deg,#0692d8,rgba(6,146,216,0)); } @media (max-width:760px){ #ccgx-page .ccgx-sec__head::before, #ccgx-page .ccgx-subhead::before, #ccgx-page .ccgx-hero__copy::before, #ccgx-page .ccgx-final__inner>div:first-child::before{left:-14px;right:-6px} } /* ===== RENDER CONTAINMENT ===== The board fields are the heaviest thing on the page: 4,168 of the document's 6,029 nodes live inside them. Skipping render work for the ones off screen cut measured forced-layout cost by 86.7% (439.7ms -> 58.4ms over 25 forced layouts). Applied to the FIELDS, never to the sections: each field overflows its section by 170px top and bottom so the board runs continuously across section seams, and content-visibility implies paint containment, which would clip exactly that. contain-intrinsic-size uses the auto keyword so a field keeps its last real size and the scroll position cannot jump. */ #ccgx-page .ccgx-pcb-field{content-visibility:auto;contain-intrinsic-size:auto 1100px} /* ==== cclap-composition (verbatim from the page body) ==== */ /* CIRCUIT CRAFTWORKS LAPTOP REPAIR — page composition only */ #ccgx-page .cclap-hero__inner{grid-template-columns:minmax(0,1.04fr) minmax(420px,.67fr);gap:clamp(2rem,4vw,4.5rem);align-items:start} @media(min-width:1121px){#ccgx-page .cclap-hero__inner{padding-top:4.2rem;padding-bottom:3.5rem}} #ccgx-page .cclap-hero .ccgx-hero__copy{max-width:850px} #ccgx-page .cclap-hero h1{font-size:clamp(3.15rem,4.3vw,5rem);line-height:.99} #ccgx-page .cclap-triage{width:100%;max-width:590px;margin:6.7rem 0 0 auto;position:relative;z-index:2;opacity:1!important;transform:none!important;background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(242,249,253,.94))} #ccgx-page .cclap-device{width:78%;max-width:300px;margin:.2rem auto 1.2rem;filter:drop-shadow(0 13px 18px rgba(23,56,82,.1))} #ccgx-page .cclap-screen{height:142px;border:8px solid #d9e6ee;border-bottom-width:12px;border-radius:14px 14px 5px 5px;background:linear-gradient(150deg,#eef8fc,#d8edf6);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(6,146,216,.17)} #ccgx-page .cclap-screen span{font:800 .76rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#0a6ba6;text-align:center} #ccgx-page .cclap-base{height:16px;margin:-1px -24px 0;border-radius:3px 3px 14px 14px;background:linear-gradient(#dce8ef,#bdced9);border:1px solid #aec2cf} #ccgx-page .cclap-triage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem} #ccgx-page .cclap-triage-grid>div{padding:.75rem .8rem;border:1px solid rgba(6,146,216,.13);border-radius:10px;background:rgba(249,253,255,.84)} #ccgx-page .cclap-triage-grid span{display:block;color:#0a6ba6;font-size:.64rem;letter-spacing:.08em;margin-bottom:.28rem}#ccgx-page .cclap-triage-grid strong{font-size:.86rem;color:#304b61} #ccgx-page .cclap-triage-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.85rem;padding-top:.8rem;border-top:1px solid rgba(6,146,216,.12);font-size:.78rem}.cclap-triage-foot span{display:flex;align-items:center;gap:.45rem;color:#587086}.cclap-triage-foot i{width:8px;height:8px;border-radius:50%;background:#13bde8;box-shadow:0 0 0 5px rgba(19,189,232,.12)}.cclap-triage-foot strong{font-size:.67rem;letter-spacing:.09em;color:#087ec0} #ccgx-page .cclap-symptom-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem} #ccgx-page .cclap-symptom{padding:1.05rem;min-height:180px}.cclap-card-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.65rem}.cclap-num{color:#0a6ba6;font-size:.68rem;letter-spacing:.14em}.cclap-symptom h3{font-size:1.04rem;margin:.2rem 0 .45rem}.cclap-symptom .ccgx-p{font-size:.9rem} #ccgx-page .cclap-repair-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.cclap-repair-card{padding:1.15rem;display:flex;flex-direction:column;gap:.45rem;min-height:220px}.cclap-repair-card h3{font-size:1.13rem;margin:.15rem 0}.cclap-repair-card .ccgx-p{flex:1}.cclap-repair-card .ccgx-pills{margin-top:.55rem} #ccgx-page .cclap-diagnostic-console{margin-bottom:1rem}.cclap-flowline{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;gap:.55rem;align-items:center}.cclap-flowline span{padding:.66rem .8rem;border-radius:10px;border:1px solid rgba(6,146,216,.17);background:#f8fcfe;color:#087ec0;font:800 .69rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.cclap-flowline i{height:2px;background:linear-gradient(90deg,#0692d8,#33c8fb)} #ccgx-page .cclap-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.cclap-step-grid .ccgx-step{display:block;padding:1.05rem;min-height:230px}.cclap-step-grid .ccgx-step__num{margin-bottom:.9rem}.cclap-step-grid h3{font-size:1.08rem;margin:.35rem 0 .45rem}.cclap-step-grid .ccgx-step__label{font-size:.68rem;color:#0a6ba6} #ccgx-page .cclap-value-console{margin-bottom:1rem}.cclap-value-row{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}.cclap-value-row h3{font-size:1.5rem;margin:.35rem 0 .45rem}.cclap-value-meter{width:135px;height:135px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#fbfdff 0 56%,transparent 57%),conic-gradient(#0692d8 0 318deg,rgba(6,146,216,.13) 318deg);box-shadow:0 10px 30px rgba(21,52,79,.08)}.cclap-value-meter b{font-size:2.5rem;color:#0784c5}.cclap-value-meter span{font:700 .62rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:#0a6ba6;text-align:center} #ccgx-page .cclap-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.cclap-value-card{padding:1.15rem;display:flex;flex-direction:column;gap:.55rem}.cclap-value-card h3{font-size:1.13rem;margin:.2rem 0}.cclap-value-card strong{margin-top:auto;padding-top:.7rem;border-top:1px solid rgba(10,127,192,.12);font-size:.7rem;text-transform:uppercase;letter-spacing:.055em;color:#0a6ba6} #ccgx-page .cclap-faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #ccgx-page .cclap-final .ccgx-final__inner{grid-template-columns:minmax(0,1fr) minmax(390px,.72fr);gap:clamp(1.4rem,4vw,4rem);align-items:center}.cclap-final h2 .ccgx-hero__accent{background:linear-gradient(105deg,#0a8fd4,#2b9ad9 58%,#10bce8);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 5px 18px rgba(10,143,212,.22)}.cclap-request-preview{background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(243,249,253,.96))}.cclap-preview{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.55rem;align-items:center}.cclap-preview>div{padding:.8rem;border:1px solid rgba(6,146,216,.14);border-radius:10px;background:#f8fcfe}.cclap-preview span{display:block;color:#087ec0;font:800 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:.35rem}.cclap-preview strong{display:block;font-size:.86rem}.cclap-preview small{display:block;color:#587086;margin-top:.25rem}.cclap-preview i{width:22px;height:2px;background:linear-gradient(90deg,#0692d8,#33c8fb)} @media(max-width:1120px){#ccgx-page .cclap-hero__inner{grid-template-columns:1fr;gap:1.4rem}.cclap-triage{margin:0!important;max-width:none!important}#ccgx-page .cclap-symptom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#ccgx-page .cclap-repair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#ccgx-page .cclap-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#ccgx-page .cclap-final .ccgx-final__inner{grid-template-columns:1fr}} @media(max-width:760px){#ccgx-page .cclap-symptom-grid,#ccgx-page .cclap-repair-grid,#ccgx-page .cclap-step-grid,#ccgx-page .cclap-value-grid,#ccgx-page .cclap-faq-grid{grid-template-columns:1fr}#ccgx-page .cclap-triage-grid{grid-template-columns:1fr}#ccgx-page .cclap-flowline{grid-template-columns:1fr;gap:.35rem}.cclap-flowline i{width:2px;height:14px;margin-left:1.1rem;background:linear-gradient(#0692d8,#33c8fb)}#ccgx-page .cclap-value-row{grid-template-columns:1fr}.cclap-value-meter{width:110px;height:110px}.cclap-preview{grid-template-columns:1fr}.cclap-preview i{width:2px;height:14px;margin:auto;background:linear-gradient(#0692d8,#33c8fb)}} /* ==== laptop funnel, phase 2 ==== */ /* CIRCUIT CRAFTWORKS — LAPTOP REPAIR FUNNEL, PHASE 2 Interactive layer only. Colours, radii, borders and shadows all come from the design-system variables, so this inherits rather than restates. Radius scale unchanged: 16 modules, 14 cards, 10 rows and controls, 999 pills. */ /* ---------- symptom selector ---------- */ #ccgx-page .cclap-pick, #ccgx-page .cclap-pick *, #ccgx-page .cclap-otherpaths button, #ccgx-page .cclap-nav button, #ccgx-page .cclap-actions button{white-space:normal} #ccgx-page .cclap-pick,#ccgx-page .cclap-symptom-grid>*{min-width:0} #ccgx-page .cclap-pick{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;appearance:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease} #ccgx-page .cclap-pick:hover{transform:translateY(-1px);border-color:var(--edge-active)} #ccgx-page .cclap-pick:focus-visible{outline:2px solid var(--blue);outline-offset:3px} #ccgx-page .cclap-symptom-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem} #ccgx-page .cclap-symptom{padding:.95rem 1rem;min-height:0;display:flex;flex-direction:column;gap:.3rem} #ccgx-page .cclap-symptom h3{font-size:.98rem;margin:0;line-height:1.3} #ccgx-page .cclap-symptom .ccgx-p{font-size:.84rem;margin:0;color:var(--muted)} #ccgx-page .cclap-otherpaths{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-top:1rem;font-size:.92rem;color:var(--muted)} #ccgx-page .cclap-otherpaths button{font:inherit;font-weight:700;color:var(--blue-2);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px} /* ---------- diagnostic tiers ---------- */ #ccgx-page .cclap-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch} #ccgx-page .cclap-tier{display:flex;flex-direction:column;gap:.65rem;padding:1.25rem} #ccgx-page .cclap-tier__head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap} #ccgx-page .cclap-tier__price{font-size:2.3rem;font-weight:800;line-height:1;color:var(--blue-2);letter-spacing:-.02em} #ccgx-page .cclap-tier__price small{display:block;font:700 .62rem/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:.28rem} #ccgx-page .cclap-tier h3{font-size:1.15rem;margin:0} #ccgx-page .cclap-tier__lead{font-size:.93rem;color:var(--muted);margin:0} #ccgx-page .cclap-tier ul{display:grid;gap:.36rem;margin:.15rem 0 0;padding:0;list-style:none} #ccgx-page .cclap-tier li{position:relative;padding-left:1.15rem;font-size:.89rem;color:var(--muted);line-height:1.45} #ccgx-page .cclap-tier li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--cyan)} #ccgx-page .cclap-tier__more{margin-top:.3rem} #ccgx-page .cclap-tier__more summary{cursor:pointer;font-size:.86rem;font-weight:700;color:var(--blue-2);list-style:none} #ccgx-page .cclap-tier__more summary::-webkit-details-marker{display:none} #ccgx-page .cclap-tier__more[open] summary{margin-bottom:.4rem} #ccgx-page .cclap-tier__foot{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--muted-2)} /* ---------- the wizard ---------- */ #ccgx-page .cclap-wizard{scroll-margin-top:96px;min-height:320px} #ccgx-page .cclap-progress{display:grid;gap:.5rem;padding:.9rem 1.15rem;border-bottom:1px solid var(--line-soft)} #ccgx-page .cclap-progress__meta{display:flex;justify-content:space-between;gap:1rem;font:700 .66rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} #ccgx-page .cclap-progress__track{height:5px;border-radius:999px;background:rgba(12,120,176,.12);overflow:hidden} #ccgx-page .cclap-progress__bar{display:block;height:100%;width:8%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .35s cubic-bezier(.22,1,.36,1)} #ccgx-page .cclap-steps{padding:1.3rem} #ccgx-page .cclap-step-panel{border:0;padding:0;margin:0;min-width:0} #ccgx-page .cclap-step-panel legend{padding:0;font-size:1.3rem;font-weight:800;line-height:1.3;color:var(--text)} #ccgx-page .cclap-step-hint{margin:.45rem 0 1rem;font-size:.93rem;color:var(--muted)} #ccgx-page .cclap-opts{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} #ccgx-page .cclap-opts--compact{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} #ccgx-page .cclap-opt{display:flex;align-items:flex-start;gap:.7rem;padding:.82rem .95rem;border-radius:10px;border:1px solid var(--edge-soft);background:var(--surf-2);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease} #ccgx-page .cclap-opt:hover{border-color:var(--edge-active)} #ccgx-page .cclap-opt input{margin:.24em 0 0;accent-color:var(--blue);width:17px;height:17px;flex:none} #ccgx-page .cclap-opt span{font-size:.94rem;font-weight:600;color:var(--text);line-height:1.4} #ccgx-page .cclap-opt small{display:block;font-weight:500;font-size:.84rem;color:var(--muted);margin-top:.18rem} #ccgx-page .cclap-opt:has(input:checked){border-color:var(--edge-active);box-shadow:inset 0 0 0 1px var(--edge-active)} #ccgx-page .cclap-opt:focus-within{outline:2px solid var(--blue);outline-offset:2px} #ccgx-page .cclap-fields{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} #ccgx-page .cclap-field{display:grid;gap:.32rem;min-width:0} #ccgx-page .cclap-field label{font:700 .66rem/1.3 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)} #ccgx-page .cclap-field input,#ccgx-page .cclap-field select,#ccgx-page .cclap-field textarea{width:100%;max-width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;color:var(--text);padding:.7rem .85rem;border-radius:10px;border:1px solid var(--edge-soft);background:var(--reading);box-shadow:inset 0 1px 2px var(--inner-lo);transition:border-color .2s ease,box-shadow .2s ease} #ccgx-page .cclap-field textarea{min-height:110px;resize:vertical} #ccgx-page .cclap-field input:focus,#ccgx-page .cclap-field select:focus,#ccgx-page .cclap-field textarea:focus{outline:0;border-color:var(--edge-active);box-shadow:0 0 0 3px rgba(10,143,212,.16)} #ccgx-page .cclap-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #ccgx-page .cclap-nav{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line-soft)} #ccgx-page .cclap-nav .ccgx-btn{min-height:48px} #ccgx-page .cclap-nav .ccgx-btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none} #ccgx-page .cclap-nav__spacer{flex:1 1 auto} #ccgx-page .cclap-error{margin-top:.85rem;font-size:.9rem;font-weight:600;color:#a4331f} #ccgx-page .cclap-consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:.9rem;font-size:.9rem;color:var(--muted);line-height:1.5} #ccgx-page .cclap-consent input{margin-top:.22em;accent-color:var(--blue);width:17px;height:17px;flex:none} /* ---------- result ---------- */ #ccgx-page .cclap-result{display:grid;gap:.9rem} #ccgx-page .cclap-result__head{display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:center} #ccgx-page .cclap-result h3{font-size:1.5rem;margin:.3rem 0 .4rem;line-height:1.22} #ccgx-page .cclap-result__price{text-align:center;padding:1rem 1.25rem;border-radius:14px;border:1px solid var(--edge-mid);background:var(--surf-3);min-width:148px} #ccgx-page .cclap-result__price b{display:block;font-size:2.5rem;font-weight:800;line-height:1;color:var(--blue-2);letter-spacing:-.02em} #ccgx-page .cclap-result__price span{display:block;font:700 .62rem/1.35 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:.32rem} #ccgx-page .cclap-reasons{display:grid;gap:.45rem;margin:0;padding:0;list-style:none} #ccgx-page .cclap-reasons li{position:relative;padding-left:1.55rem;font-size:.93rem;color:var(--muted);line-height:1.5} #ccgx-page .cclap-reasons li::before{content:"";position:absolute;left:0;top:.4em;width:13px;height:13px;border-radius:50%;border:1px solid var(--edge-active);background:rgba(10,143,212,.14)} #ccgx-page .cclap-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.3rem} #ccgx-page .cclap-booked{padding:1.1rem 1.25rem;border-radius:14px;border:1px solid rgba(19,139,116,.35);background:rgba(19,139,116,.08)} #ccgx-page .cclap-booked b{display:block;font-size:1.08rem;color:var(--text);margin-bottom:.3rem} #ccgx-page .cclap-ref{font-family:var(--font-mono);font-size:1.02rem;font-weight:700;color:var(--blue-2);letter-spacing:.04em} /* ---------- process, labor, routers ---------- */ #ccgx-page .cclap-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem} #ccgx-page .cclap-flow__item{display:grid;gap:.3rem;padding:.95rem 1rem;border-radius:10px;border:1px solid var(--line-soft);background:var(--surf-data)} #ccgx-page .cclap-flow__n{font:700 .7rem/1.4 var(--font-mono);color:var(--muted-2)} #ccgx-page .cclap-flow__item h4{margin:0;font-size:.99rem;color:var(--text)} #ccgx-page .cclap-flow__item p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5} #ccgx-page .cclap-labor{display:grid;gap:.45rem} #ccgx-page .cclap-labor__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.75rem 1rem;border-radius:10px;border:1px solid var(--line-soft);background:var(--surf-data)} #ccgx-page .cclap-labor__row strong{font-size:.94rem;color:var(--text)} #ccgx-page .cclap-labor__row small{display:block;font-size:.83rem;color:var(--muted);margin-top:.15rem} #ccgx-page .cclap-labor__price{font:800 1.02rem/1 var(--font);color:var(--blue-2);white-space:nowrap;text-align:right} #ccgx-page .cclap-labor__price span{display:block;font:700 .58rem/1.4 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)} #ccgx-page .cclap-router-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch} #ccgx-page .cclap-router{display:flex;flex-direction:column;gap:.6rem;padding:1.25rem} #ccgx-page .cclap-router>.ccgx-state{align-self:flex-start} #ccgx-page .cclap-router h3{margin:.05rem 0;font-size:1.14rem} #ccgx-page .cclap-router .ccgx-btn{margin-top:auto;align-self:flex-start} #ccgx-page .cclap-repair-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem} #ccgx-page .cclap-repair-card{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;min-height:0} #ccgx-page .cclap-repair-card h3{font-size:1.04rem;margin:.1rem 0} #ccgx-page .cclap-repair-card .ccgx-p{font-size:.88rem;margin:0} /* ---------- below-the-fold containment ---------- The sections past the conversion path are skipped by layout until they are needed. The reserved size keeps the scrollbar honest. */ #ccgx-page .cclap-deferred{content-visibility:auto;contain-intrinsic-size:auto 900px} /* ---------- responsive ---------- */ @media(max-width:1120px){ #ccgx-page .cclap-symptom-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #ccgx-page .cclap-tiers,#ccgx-page .cclap-router-grid{grid-template-columns:1fr} #ccgx-page .cclap-flow{grid-template-columns:repeat(2,minmax(0,1fr))} #ccgx-page .cclap-repair-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ #ccgx-page .cclap-symptom-grid{grid-template-columns:1fr} #ccgx-page .cclap-steps{padding:1rem} #ccgx-page .cclap-opts,#ccgx-page .cclap-opts--compact{grid-template-columns:1fr} #ccgx-page .cclap-fields{grid-template-columns:1fr} #ccgx-page .cclap-result__head{grid-template-columns:1fr} #ccgx-page .cclap-result__price{text-align:left} #ccgx-page .cclap-flow,#ccgx-page .cclap-repair-grid{grid-template-columns:1fr} #ccgx-page .cclap-labor__row{grid-template-columns:1fr;gap:.4rem} #ccgx-page .cclap-labor__price{text-align:left} #ccgx-page .cclap-nav .ccgx-btn{width:100%;justify-content:center} #ccgx-page .cclap-nav__spacer{display:none} #ccgx-page .cclap-step-panel legend{font-size:1.14rem} /* Decorative blur is the most expensive thing on a phone GPU. */ #ccgx-page .ccgx-pcb-field{filter:none!important} } @media(prefers-reduced-motion:reduce){ #ccgx-page .cclap-progress__bar,#ccgx-page .cclap-pick{transition:none} } /* ---------- section kickers carry no ornament ---------- The small blue label above each heading used to be preceded by a short dash drawn with ::before. Six rules across the design passes had a hand in it — a node-and-trace beacon early on, a plain 14px gradient rule later. All of them are switched off here rather than deleted individually, so no later pass can quietly bring one back. The legend plate behind the heading is a different pseudo-element (.ccgx-sec__head::before) and is untouched. */ #ccgx-page .ccgx-sec__kicker::before, #ccgx-page .ccgx-sec.is-live .ccgx-sec__kicker::before, #ccgx-page.ccgx-js .ccgx-sec:not(.is-live) .ccgx-sec__kicker::before{ content:none!important;display:none!important;width:0!important;margin:0!important;animation:none!important } #ccgx-page .ccgx-sec__kicker{gap:0}