/* Three hero compositions. Connected's page below the hero is deliberately untouched. */
.cc-hero {
  --cv-bg:#0b1422;--cv-panel:#101e2d;--cv-soft:#152735;--cv-line:#314b58;
  --cv-ink:var(--cc-ink);--cv-muted:var(--cc-muted);--cv-accent:var(--cc-mint);
  --cv-shadow:#02091340;--cv-sheen:#254351;
  width:min(1280px,calc(100% - 112px));min-width:0;
}
html[data-theme="light"] .cc-hero {
  --cv-bg:#f1f7f6;--cv-panel:#ffffff;--cv-soft:#e4efed;--cv-line:#a6bfc4;
  --cv-ink:#142831;--cv-muted:#3c535d;--cv-shadow:#224b4310;--cv-sheen:#ffffff;
}
.cc-hero .cc-intro,.cc-hero .cc-narrative,.cc-hero .cc-hero-visual { min-width:0; }
.cc-hero .cc-intro h1 { color:var(--cv-ink);font-weight:500; }
.cc-hero .cc-eyebrow { font-size:11px;line-height:1.8;letter-spacing:.08em; }
.cc-hero .cc-hero-status { display:flex;align-items:center;gap:10px;font:400 11px/1.6 var(--font-mono);color:var(--cv-muted);letter-spacing:.025em; }
.cc-hero .cc-hero-status>span { display:block;width:4px;height:4px;flex:0 0 4px;background:var(--pearl-accent-mark); }
.cc-hero .cc-hero-lead { color:var(--cv-muted)!important;font-size:17px;line-height:1.72; }
.cc-hero .cc-actions { gap:26px; }
.cc-hero .cc-button,.cc-hero .cc-text-link { font-size:13px; }
.cc-hero .cc-button { min-height:51px;padding:14px 22px; }
.cc-hero .lifecycle {
  --life-bg:var(--cv-panel);--life-ink:var(--cv-ink);--life-muted:var(--cv-muted);
  --life-line:var(--cv-line);--life-accent:var(--cv-accent);--life-soft:var(--cv-soft);--life-radius:3px;
  padding:26px;border-color:var(--cv-line);background:var(--cv-panel);
}
.cc-hero .lifecycle-heading { margin-bottom:25px; }
.cc-hero .lifecycle-heading h2 { font:400 13px/1.5 var(--font-body);letter-spacing:0; }
.cc-hero .lifecycle-motion { font:400 10px/1.5 var(--font-mono);min-height:38px;background:transparent; }
.cc-hero .lifecycle-stage { font-family:var(--font-body);border-radius:2px;transition:background-color var(--motion-standard,200ms) var(--motion-ease,cubic-bezier(.4,0,.2,1)); }
.cc-hero .lifecycle-phase { font-size:10px;line-height:1.6; }
.cc-hero .lifecycle-name { font:600 18px/1.3 var(--font-display);min-height:47px;letter-spacing:-0.0125em; }
.cc-hero .lifecycle-artifact { font-size:11px;line-height:1.5;min-height:33px; }
.cc-hero .lifecycle-detail { padding:21px 0;min-height:132px; }
.cc-hero .lifecycle-detail-title { font:400 14px/1.5 var(--font-body); }
.cc-hero .lifecycle-detail-copy { font:400 13px/1.65 var(--font-body);margin-top:7px; }
.cc-hero .lifecycle .lifecycle-caption { padding-top:17px;font-size:11px;line-height:1.6; }
.cc-hero .lifecycle-stage:focus-visible,.cc-hero .lifecycle-motion:focus-visible { outline:var(--pearl-focus-width) solid var(--pearl-focus);outline-offset:var(--pearl-focus-offset); }

/* Panel: a composed split between the category and its evidence lifecycle. */
.variant-connected-panel .cc-hero { display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center;gap:64px;padding-block:72px; }
.variant-connected-panel .cc-hero .cc-intro { margin:0;max-width:none;text-align:left; }
.variant-connected-panel .cc-hero .cc-eyebrow { max-width:43ch; }
.variant-connected-panel .cc-hero .cc-intro h1 { font-size:clamp(54px,5.6vw,82px);line-height:1.04;max-width:11ch;margin:30px 0 24px; }
.variant-connected-panel .cc-hero .cc-narrative { margin-top:29px;padding-top:26px;border-top:1px solid var(--cc-line); }
.variant-connected-panel .cc-hero .cc-hero-lead { max-width:47ch;margin-inline:0!important; }
.variant-connected-panel .cc-hero .cc-actions { justify-content:flex-start;margin-top:28px; }
.variant-connected-panel .cc-hero .lifecycle { box-shadow:inset 0 1px 0 var(--cv-sheen),0 26px 60px var(--cv-shadow); }
.variant-connected-panel .cc-hero .lifecycle-stage { border-left:1px solid var(--life-line);padding-left:10px; }
.variant-connected-panel .cc-hero .lifecycle-stage[aria-pressed="true"] { border-left-color:var(--pearl-accent-mark); }

/* Panorama: a wide, open lifecycle below a centred editorial opening. */
.variant-connected-panorama .cc-hero { display:block;padding-block:66px 72px;text-align:center; }
.variant-connected-panorama .cc-hero .cc-intro { max-width:1130px;margin-inline:auto; }
.variant-connected-panorama .cc-hero .cc-intro h1 { font-size:clamp(58px,7vw,100px);line-height:1.05;margin:28px 0 24px; }
.variant-connected-panorama .cc-hero .cc-hero-status { justify-content:center; }
.variant-connected-panorama .cc-hero .cc-narrative { max-width:800px;margin:27px auto 0; }
.variant-connected-panorama .cc-hero .cc-hero-lead { max-width:74ch; }
.variant-connected-panorama .cc-hero .cc-actions { margin-top:27px; }
.variant-connected-panorama .cc-hero .cc-hero-visual { margin:48px auto 0;max-width:1120px;text-align:left; }
.variant-connected-panorama .cc-hero .lifecycle { --life-bg:var(--cv-bg);padding:23px 0 0;border-inline:0;border-bottom:0;border-radius:0;background:transparent; }
.variant-connected-panorama .cc-hero .lifecycle-track { gap:32px; }
.variant-connected-panorama .cc-hero .lifecycle-stage { padding-inline:18px; }
.variant-connected-panorama .cc-hero .lifecycle-icon { height:130px; }
.variant-connected-panorama .cc-hero .lifecycle-icon svg { max-width:150px; }
.variant-connected-panorama .cc-hero .lifecycle-connector { top:97px; }
.variant-connected-panorama .cc-hero .lifecycle-name { font-size:22px;min-height:58px; }
.variant-connected-panorama .cc-hero .lifecycle-artifact { font-size:12px; }
.variant-connected-panorama .cc-hero .lifecycle-detail { min-height:116px;padding-inline:18px;background:var(--cv-panel); }
.variant-connected-panorama .cc-hero .lifecycle-detail>div { max-width:82ch; }

/* Layers: title and narrative share a horizon; the open diagram is offset below. */
.variant-connected-layers .cc-hero { display:block;padding-block:72px 78px; }
.variant-connected-layers .cc-hero .cc-intro { display:grid;grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);column-gap:80px;max-width:none;text-align:left;margin:0; }
.variant-connected-layers .cc-hero .cc-eyebrow { grid-column:1/-1;margin-bottom:28px; }
.variant-connected-layers .cc-hero .cc-intro h1 { grid-column:1;grid-row:2;font-size:clamp(54px,5.8vw,84px);line-height:1.035;max-width:11ch;margin:0; }
.variant-connected-layers .cc-hero .cc-hero-status { grid-column:1;grid-row:3;margin-top:23px;align-self:start; }
.variant-connected-layers .cc-hero .cc-narrative { grid-column:2;grid-row:2;align-self:center;border-left:1px solid var(--cc-line);padding-left:34px; }
.variant-connected-layers .cc-hero .cc-hero-lead { margin-inline:0!important;max-width:49ch; }
.variant-connected-layers .cc-hero .cc-actions { justify-content:flex-start;margin-top:27px;gap:24px; }
.variant-connected-layers .cc-hero .cc-hero-visual { width:calc(100% - 158px);margin:48px 0 0 auto; }
.variant-connected-layers .cc-hero .lifecycle { --life-bg:var(--cv-bg);padding:24px 0 0;border:0;border-top:1px solid var(--cc-line);border-radius:0;background:transparent; }
.variant-connected-layers .cc-hero .lifecycle-heading { margin-bottom:25px; }
.variant-connected-layers .cc-hero .lifecycle-track { gap:24px; }
.variant-connected-layers .cc-hero .lifecycle-stage { border-left:1px solid var(--cc-line);border-radius:0;padding-inline:17px; }
.variant-connected-layers .cc-hero .lifecycle-stage[aria-pressed="true"] { border-left-color:var(--pearl-accent-mark);background:var(--cv-panel); }
.variant-connected-layers .cc-hero .lifecycle-name { font-size:21px;min-height:55px; }
.variant-connected-layers .cc-hero .lifecycle-icon { height:120px; }
.variant-connected-layers .cc-hero .lifecycle-connector { top:92px; }
.variant-connected-layers .cc-hero .lifecycle-detail { min-height:117px;border-bottom:0; }
.variant-connected-layers .cc-hero .lifecycle-detail>div { max-width:78ch; }
.variant-connected-layers .cc-hero .lifecycle .lifecycle-caption { border-top:1px solid var(--cc-line); }

@media(max-width:1100px) {
  .cc-hero { width:calc(100% - 72px); }
  .variant-connected-panel .cc-hero { gap:36px;padding-block:55px; }
  .variant-connected-panel .cc-hero .cc-intro h1 { font-size:clamp(48px,5.8vw,64px); }
  .variant-connected-panel .cc-hero .lifecycle { padding:23px 19px; }
  .variant-connected-layers .cc-hero .cc-intro { column-gap:44px; }
  .variant-connected-layers .cc-hero .cc-narrative { padding-left:27px; }
  .variant-connected-layers .cc-hero .cc-hero-visual { width:calc(100% - 88px); }
}
@media(max-width:960px) {
  .variant-connected-panel .cc-hero { grid-template-columns:1fr;gap:37px; }
  .variant-connected-panel .cc-hero .cc-intro { max-width:730px; }
  .variant-connected-panel .cc-hero .cc-intro h1 { font-size:clamp(52px,8vw,73px); }
  .variant-connected-panel .cc-hero .cc-hero-lead { max-width:65ch; }
  .variant-connected-panel .cc-hero .cc-hero-visual { width:100%;max-width:750px;justify-self:center; }
  .variant-connected-layers .cc-hero .cc-intro { grid-template-columns:1fr; }
  .variant-connected-layers .cc-hero .cc-eyebrow { grid-column:1; }
  .variant-connected-layers .cc-hero .cc-intro h1 { max-width:12ch;font-size:clamp(54px,8vw,74px); }
  .variant-connected-layers .cc-hero .cc-narrative { grid-column:1;grid-row:3;margin-top:30px;max-width:680px; }
  .variant-connected-layers .cc-hero .cc-hero-visual { width:calc(100% - 48px); }
  .variant-connected-panorama .cc-hero .cc-intro h1 { font-size:clamp(54px,8vw,78px);max-width:12ch;margin-inline:auto; }
}
@media(max-width:680px) {
  .cc-hero { width:calc(100% - 40px); }
  .cc-hero .cc-eyebrow { font-size:10px;max-width:43ch;line-height:1.8; }
  .cc-hero .cc-hero-lead { font-size:16px;line-height:1.72; }
  .cc-hero .cc-hero-status { font-size:10px; }
  .cc-hero .cc-actions { gap:20px;align-items:flex-start; }
  .cc-hero .cc-button,.cc-hero .cc-text-link { font-size:13px; }
  .variant-connected-panel .cc-hero { padding-block:36px 48px;gap:32px; }
  .variant-connected-panel .cc-hero .cc-intro h1 { font-size:clamp(43px,10.5vw,66px);margin-top:25px; }
  .variant-connected-panel .cc-hero .cc-narrative { margin-top:25px;padding-top:22px; }
  .variant-connected-panel .cc-hero .lifecycle { padding:18px 12px; }
  .variant-connected-panorama .cc-hero { padding-block:37px 48px; }
  .variant-connected-panorama .cc-hero .cc-eyebrow { margin-inline:auto; }
  .variant-connected-panorama .cc-hero .cc-intro h1 { font-size:clamp(43px,10.5vw,66px);margin-top:25px; }
  .variant-connected-panorama .cc-hero .cc-narrative { margin-top:24px; }
  .variant-connected-panorama .cc-hero .cc-actions { align-items:center; }
  .variant-connected-panorama .cc-hero .cc-hero-visual { margin-top:36px; }
  .variant-connected-panorama .cc-hero .lifecycle { padding-top:20px; }
  .variant-connected-layers .cc-hero { padding-block:37px 48px; }
  .variant-connected-layers .cc-hero .cc-eyebrow { margin-bottom:25px; }
  .variant-connected-layers .cc-hero .cc-intro h1 { font-size:clamp(43px,10.5vw,66px); }
  .variant-connected-layers .cc-hero .cc-narrative { padding-left:20px;margin-top:26px; }
  .variant-connected-layers .cc-hero .cc-hero-visual { width:100%;margin-top:34px; }
}
@container(max-width:600px) {
  .cc-hero .lifecycle .lifecycle-name { font-size:17px;min-height:45px; }
  .cc-hero .lifecycle .lifecycle-track { gap:10px; }
  .cc-hero .lifecycle .lifecycle-stage { padding-inline:7px; }
  .cc-hero .lifecycle .lifecycle-phase { flex-direction:column;gap:0; }
  .cc-hero .lifecycle .lifecycle-icon { height:100px; }
  .cc-hero .lifecycle .lifecycle-connector { top:93px; }
}
@container(max-width:440px) {
  .cc-hero .lifecycle .lifecycle-heading { gap:9px;margin-bottom:20px; }
  .cc-hero .lifecycle .lifecycle-heading h2 { font-size:12px; }
  .cc-hero .lifecycle .lifecycle-motion { font-size:9px;min-width:77px;padding-inline:8px; }
  .cc-hero .lifecycle .lifecycle-track { gap:6px; }
  .cc-hero .lifecycle .lifecycle-stage { padding-inline:2px;border-left:0; }
  .cc-hero .lifecycle .lifecycle-phase { font-size:10px;line-height:1.6; }
  .cc-hero .lifecycle .lifecycle-icon { height:88px; }
  .cc-hero .lifecycle .lifecycle-connector { top:86px; }
  .cc-hero .lifecycle .lifecycle-name { font-size:13px;min-height:35px; }
  .cc-hero .lifecycle .lifecycle-artifact { font-size:10px;min-height:32px; }
  .cc-hero .lifecycle .lifecycle-detail { min-height:146px;gap:9px;padding:18px 0; }
  .cc-hero .lifecycle .lifecycle-detail-title { font-size:13px; }
  .cc-hero .lifecycle .lifecycle-detail-copy { font-size:12px; }
  .cc-hero .lifecycle .lifecycle-caption { font-size:10px;padding-top:15px; }
}
@container(max-width:290px) {
  .cc-hero .lifecycle .lifecycle-stage { padding-inline:0; }
  .cc-hero .lifecycle .lifecycle-track { gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
  .cc-hero *,.cc-hero *::before,.cc-hero *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}