#ic-e2e-diagnostic {
  --ic-charcoal: #263238;
  --ic-charcoal-deep: #1B2529;
  --ic-orange: var(--e-global-color-d2bcc01, #FFA726);
  --ic-orange-deep: #F09200;
  --ic-ink: #0B0500;
  --ic-muted: #92989B;
  --ic-cream: #EFEAE3;
  --ic-line: rgba(11,5,0,.14);
  --ic-white: #fff;
  --ic-error: #b42318;
  --ic-ui: "Outfit", sans-serif;
  /* Adopt the Lettery theme base verbatim (body: Outfit 17px/300/160%). Inheriting
     instead would pick up Elementor's Lato, which only governs Elementor-built
     pages — not a shortcode rendered through the theme template. */
  color: var(--ic-muted);
  font-family: "Lato", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  width: 100%;
}
#ic-e2e-diagnostic *, #ic-e2e-diagnostic *::before, #ic-e2e-diagnostic *::after { box-sizing: border-box; }
#ic-e2e-diagnostic .ic-e2e__hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.65fr);
  gap: clamp(28px,5vw,72px); align-items: end; padding: clamp(128px,15vw,152px) clamp(24px,6vw,86px) clamp(44px,6vw,86px); margin: 0 0 24px;
  color: #fff; background: linear-gradient(135deg,var(--ic-charcoal-deep),var(--ic-charcoal)); border-radius:0;
}
#ic-e2e-diagnostic .ic-e2e__hero-pattern { position:absolute; inset:0; opacity:.22; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.35) 1px,transparent 0); background-size:23px 23px; mask-image:linear-gradient(90deg,#000,transparent 75%); }
#ic-e2e-diagnostic .ic-e2e__hero-content, #ic-e2e-diagnostic .ic-e2e__process-card { position:relative; z-index:2; }
#ic-e2e-diagnostic .ic-e2e__kicker, #ic-e2e-diagnostic .ic-e2e__section-kicker, #ic-e2e-diagnostic .ic-e2e__rail-label, #ic-e2e-diagnostic .ic-e2e__process-label { margin:0 0 12px; color:var(--ic-orange); font-family:var(--ic-ui); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
#ic-e2e-diagnostic .ic-e2e__hero h1 { margin:0; max-width:850px; color:#fff; font-family:"Lato",sans-serif; font-size:clamp(2.4rem,5.6vw,72px); font-weight:400; letter-spacing:normal; line-height:1.02; text-transform:none; }
#ic-e2e-diagnostic .ic-e2e__hero-copy { max-width:770px; margin:24px 0 0; color:rgba(255,255,255,.82); font-weight:300; font-size:19px; line-height:1.6; }
#ic-e2e-diagnostic .ic-e2e__hero-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
#ic-e2e-diagnostic .ic-e2e__hero-meta span { padding:7px 11px; border:1px solid rgba(255,255,255,.22); border-radius:0; color:rgba(255,255,255,.9); font-size:.78rem; }
#ic-e2e-diagnostic .ic-e2e__process-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:0; padding:24px; backdrop-filter:blur(8px); }
#ic-e2e-diagnostic .ic-e2e__process-card ol { margin:0; padding:0; list-style:none; }
#ic-e2e-diagnostic .ic-e2e__process-card li { display:grid; grid-template-columns:42px 1fr; column-gap:10px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); counter-increment:process; }
#ic-e2e-diagnostic .ic-e2e__process-card li::before { content:"0" counter(process); grid-row:1/3; color:var(--ic-orange); font-family:var(--ic-ui); font-weight:600; }
#ic-e2e-diagnostic .ic-e2e__process-card li:last-child { border-bottom:0; }
#ic-e2e-diagnostic .ic-e2e__process-card strong { color:#fff; }
#ic-e2e-diagnostic .ic-e2e__process-card span { color:rgba(255,255,255,.68); font-size:.85rem; }
#ic-e2e-diagnostic .ic-e2e__notice { max-width:1160px; margin:0 auto 24px; padding:18px clamp(20px,3vw,28px); display:flex; gap:15px; align-items:flex-start; background:#FFF7EC; border:1px solid rgba(255,167,38,.28); border-radius:0; }
#ic-e2e-diagnostic .ic-e2e__notice-icon { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; background:var(--ic-orange); color:#fff; border-radius:50%; font-family:var(--ic-ui); font-weight:600; }
#ic-e2e-diagnostic .ic-e2e__shell { max-width:1160px; margin:0 auto; padding:0 20px 76px; display:grid; grid-template-columns:260px minmax(0,1fr); gap:34px; }
#ic-e2e-diagnostic .ic-e2e__rail { position:relative; }
#ic-e2e-diagnostic .ic-e2e__rail-card { position:sticky; top:110px; padding:22px; background:var(--ic-charcoal-deep); color:#fff; border-radius:0; box-shadow:0 3px 5px rgba(0,0,0,.2); }
#ic-e2e-diagnostic .ic-e2e__progress { height:7px; overflow:hidden; background:rgba(255,255,255,.12); border-radius:0; }
#ic-e2e-diagnostic .ic-e2e__progress span { display:block; width:12.5%; height:100%; background:var(--ic-orange); transition:width .25s ease; }
#ic-e2e-diagnostic .ic-e2e__progress-text { margin:8px 0 17px; color:rgba(255,255,255,.68); font-size:.8rem; }
#ic-e2e-diagnostic .ic-e2e__step-nav { display:grid; gap:4px; }
#ic-e2e-diagnostic .ic-e2e__step-nav button { appearance:none; width:100%; padding:8px 9px; border:0; border-left:2px solid transparent; background:transparent; color:rgba(255,255,255,.63); text-align:left; font:inherit; font-size:.82rem; cursor:pointer; }
#ic-e2e-diagnostic .ic-e2e__step-nav button.is-active { border-left-color:var(--ic-orange); color:#fff; font-weight:600; }
#ic-e2e-diagnostic .ic-e2e__draft-note { margin:18px 0 0; padding-top:17px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.59); font-size:.75rem; }
#ic-e2e-diagnostic .ic-e2e__main { min-width:0; }
#ic-e2e-diagnostic .ic-e2e__step { display:none; padding:clamp(25px,4vw,44px); background:var(--ic-white); border:1px solid var(--ic-line); border-radius:0; box-shadow:0 3px 5px rgba(0,0,0,.10); }
#ic-e2e-diagnostic .ic-e2e__step.is-active { display:block; animation:icFade .22s ease; }
@keyframes icFade { from{opacity:.35;transform:translateY(6px)} to{opacity:1;transform:none} }
#ic-e2e-diagnostic .ic-e2e__section-head { display:grid; grid-template-columns:62px 1fr; gap:18px; align-items:start; margin-bottom:32px; padding-bottom:26px; border-bottom:1px solid var(--ic-line); }
#ic-e2e-diagnostic .ic-e2e__section-number { display:grid; place-items:center; width:58px; height:58px; color:#fff; background:var(--ic-orange); border-radius:0; font-family:var(--ic-ui); font-weight:600; }
#ic-e2e-diagnostic .ic-e2e__section-kicker { margin-bottom:7px; }
#ic-e2e-diagnostic .ic-e2e__section-head h2, #ic-e2e-diagnostic .ic-e2e__success h2 { margin:0; color:var(--ic-charcoal); font-family:"Lato",sans-serif; font-size:clamp(1.8rem,3.4vw,44px); font-weight:400; letter-spacing:normal; line-height:1.2; }
#ic-e2e-diagnostic .ic-e2e__section-head p:last-child { margin:9px 0 0; color:var(--ic-muted); }
#ic-e2e-diagnostic .ic-e2e__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
#ic-e2e-diagnostic .ic-e2e__field { min-width:0; }
#ic-e2e-diagnostic .ic-e2e__field--full { grid-column:1/-1; }
#ic-e2e-diagnostic .ic-e2e__field label, #ic-e2e-diagnostic .ic-e2e__field legend { display:block; margin:0 0 10px; color:var(--ic-charcoal); font-family:var(--ic-ui); font-weight:600; font-size:11px; letter-spacing:2px; text-transform:uppercase; }
#ic-e2e-diagnostic .ic-e2e__required { color:var(--ic-orange); }
#ic-e2e-diagnostic input[type=text], #ic-e2e-diagnostic input[type=email], #ic-e2e-diagnostic input[type=tel], #ic-e2e-diagnostic input[type=url], #ic-e2e-diagnostic input[type=number], #ic-e2e-diagnostic select, #ic-e2e-diagnostic textarea { width:100%; min-height:60px; padding:4px 20px 0; border:none; border-bottom:1px solid #D4D6D7; border-radius:0; color:var(--ic-charcoal); background:transparent; font-family:"Lato",sans-serif; font-size:17px; font-weight:300; outline:none; box-shadow:none; }
#ic-e2e-diagnostic textarea { min-height:160px; padding:20px 20px 0; resize:vertical; }
#ic-e2e-diagnostic input:focus, #ic-e2e-diagnostic select:focus, #ic-e2e-diagnostic textarea:focus { border-bottom-color:var(--ic-orange); border-bottom-width:2px; box-shadow:none; }
#ic-e2e-diagnostic .is-invalid { border-color:var(--ic-error)!important; box-shadow:0 0 0 4px rgba(180,35,24,.10)!important; }
#ic-e2e-diagnostic .ic-e2e__hint { margin:7px 0 0; color:var(--ic-muted); font-size:.76rem; }
#ic-e2e-diagnostic fieldset { margin:0 0 26px; padding:0; border:0; }
#ic-e2e-diagnostic .ic-e2e__choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#ic-e2e-diagnostic .ic-e2e__choice { display:flex!important; gap:10px; align-items:flex-start; margin:0!important; padding:16px 18px; border:1px solid #E9EAEB; border-radius:0; background:#F4F5F5; color:var(--ic-ink)!important; font-weight:400!important; cursor:pointer; }
#ic-e2e-diagnostic .ic-e2e__choice:has(input:checked) { border-color:var(--ic-orange); background:#FFF7EC; }
#ic-e2e-diagnostic input[type=checkbox], #ic-e2e-diagnostic input[type=radio] { margin-top:4px; accent-color:var(--ic-orange); }
#ic-e2e-diagnostic .ic-e2e__case { margin:0 0 24px; padding:22px; background:var(--ic-cream); border:1px solid var(--ic-line); border-radius:0; }
#ic-e2e-diagnostic .ic-e2e__case-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; color:var(--ic-charcoal); font-family:var(--ic-ui); font-weight:600; }
#ic-e2e-diagnostic .ic-e2e__case-head small { color:var(--ic-muted); font-weight:400; }
#ic-e2e-diagnostic .ic-e2e__consents { margin-top:28px; padding:22px; background:var(--ic-cream); border-radius:0; }
#ic-e2e-diagnostic .ic-e2e__consent { display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; color:var(--ic-ink); font-size:.88rem; }
#ic-e2e-diagnostic .ic-e2e__consent strong { color:var(--ic-orange); }
#ic-e2e-diagnostic .ic-e2e__privacy { margin:16px 0 0; color:var(--ic-muted); font-size:.78rem; }
#ic-e2e-diagnostic .ic-e2e__privacy a { color:var(--ic-charcoal); text-decoration:underline; }
#ic-e2e-diagnostic .ic-e2e__actions { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-top:20px; padding:15px; background:#fff; border:1px solid var(--ic-line); border-radius:0; box-shadow:0 3px 5px rgba(0,0,0,.12); }
#ic-e2e-diagnostic .ic-e2e__action-right { display:flex; align-items:center; gap:10px; }
#ic-e2e-diagnostic .ic-e2e__button, #ic-e2e-diagnostic .ic-e2e__save { appearance:none; display:inline-flex; align-items:center; justify-content:center; min-height:70px; padding:0 45px; border-radius:0; border:1px solid transparent; text-decoration:none!important; cursor:pointer; transition:transform .15s ease, background .15s ease; }
#ic-e2e-diagnostic .ic-e2e__button--primary { color:var(--ic-ink)!important; }
#ic-e2e-diagnostic .ic-e2e__button--primary:hover { background:var(--ic-orange-deep); color:var(--ic-ink)!important; }
#ic-e2e-diagnostic .ic-e2e__button--ghost { border-color:var(--ic-line); background:#fff!important; color:var(--ic-charcoal)!important; }
#ic-e2e-diagnostic .ic-e2e__save { min-height:auto; padding:0 8px; background:transparent; color:var(--ic-charcoal); font-family:var(--ic-ui); font-size:11px; font-weight:600; }
#ic-e2e-diagnostic .ic-e2e__save-status { min-height:20px; margin:8px 0 0; color:#92989B; font-family:var(--ic-ui); font-size:11px; letter-spacing:2px; text-transform:uppercase; text-align:right; }
#ic-e2e-diagnostic .ic-e2e__error { margin-bottom:18px; padding:14px 16px; color:#7a271a; background:#fff1f0; border:1px solid #fecdca; border-radius:0; }
#ic-e2e-diagnostic .ic-e2e__success { padding:clamp(34px,6vw,70px); background:var(--ic-charcoal-deep); color:#fff; border-radius:0; text-align:left; }
#ic-e2e-diagnostic .ic-e2e__success h2 { color:#fff; max-width:700px; }
#ic-e2e-diagnostic .ic-e2e__success p:not(.ic-e2e__kicker) { max-width:720px; color:rgba(255,255,255,.76); }
#ic-e2e-diagnostic .ic-e2e__honeypot { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; }
@media (max-width: 940px) {
  #ic-e2e-diagnostic .ic-e2e__hero { grid-template-columns:1fr; border-radius:0; }
  #ic-e2e-diagnostic .ic-e2e__process-card { max-width:560px; }
  #ic-e2e-diagnostic .ic-e2e__shell { grid-template-columns:1fr; }
  #ic-e2e-diagnostic .ic-e2e__rail { display:none; }
}
@media (max-width: 680px) {
  #ic-e2e-diagnostic .ic-e2e__hero { padding:124px 22px 40px; }
  #ic-e2e-diagnostic .ic-e2e__hero h1 { font-size:clamp(1.9rem,9vw,3.2rem); }
  #ic-e2e-diagnostic .ic-e2e__notice { margin-inline:14px; }
  #ic-e2e-diagnostic .ic-e2e__shell { padding-inline:14px; }
  #ic-e2e-diagnostic .ic-e2e__step { padding:24px 18px; border-radius:0; }
  #ic-e2e-diagnostic .ic-e2e__section-head { grid-template-columns:50px 1fr; gap:13px; }
  #ic-e2e-diagnostic .ic-e2e__section-number { width:48px; height:48px; border-radius:0; }
  #ic-e2e-diagnostic .ic-e2e__grid, #ic-e2e-diagnostic .ic-e2e__choice-grid { grid-template-columns:1fr; }
  #ic-e2e-diagnostic .ic-e2e__actions { align-items:stretch; }
  #ic-e2e-diagnostic .ic-e2e__action-right { flex:1; justify-content:flex-end; }
  #ic-e2e-diagnostic .ic-e2e__save { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  #ic-e2e-diagnostic *, #ic-e2e-diagnostic *::before, #ic-e2e-diagnostic *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Step controls: the component sets display:flex on buttons, which overrode the
   UA [hidden] rule — leaving Back visible on stage 1 and Submit visible on all
   eight stages. Scoped so it cannot affect the rest of the site. */
#ic-e2e-diagnostic [hidden] { display: none !important; }

/* Homepage hero signature: key words carried in brand orange, matching the
   "Discover / Unleash / Innovative" treatment on innovatingchaos.com. */
#ic-e2e-diagnostic .ic-e2e__hero h1 em { font-style: normal; color: var(--ic-orange); }

/* Action row: full-height theme buttons need room on small screens. */
@media (max-width: 680px) {
  #ic-e2e-diagnostic .ic-e2e__button { min-height:60px; padding:0 24px; font-size:14px; letter-spacing:1.5px; }
  #ic-e2e-diagnostic .ic-e2e__button--primary { flex:1 1 auto; }
}

/* ---- Completed state -------------------------------------------------------
   On submission the progress rail is hidden. The shell grid would otherwise keep
   its 260px rail track and squeeze the confirmation into it, so drop to a single
   full-width column and retire the now-irrelevant pre-submission furniture. */
#ic-e2e-diagnostic.is-complete .ic-e2e__shell { grid-template-columns: minmax(0,1fr); }
#ic-e2e-diagnostic.is-complete .ic-e2e__notice,
#ic-e2e-diagnostic.is-complete .ic-e2e__hero-meta,
#ic-e2e-diagnostic.is-complete .ic-e2e__process-card { display: none; }
#ic-e2e-diagnostic.is-complete .ic-e2e__hero { grid-template-columns: minmax(0,1fr); }

#ic-e2e-diagnostic .ic-e2e__success h2 { margin: 14px 0 0; font-size: clamp(1.9rem,3.2vw,3rem); }
#ic-e2e-diagnostic .ic-e2e__success p:not(.ic-e2e__kicker) { margin: 18px 0 0; font-size: 17px; font-weight: 300; line-height: 1.6; }
#ic-e2e-diagnostic .ic-e2e__success .ic-e2e__button { margin-top: 32px; }


/* ---- Brand lockup ----------------------------------------------------------
   Uses the logo from the media library (resolved via get_site_icon_url). The
   mark has a black "INNOVATING" wordmark, so it cannot sit directly on the
   charcoal surfaces — it is placed on a light plate that reads as a deliberate
   brand device rather than an image dropped onto a dark panel. */
#ic-e2e-diagnostic .ic-e2e__brand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; padding: 9px; margin: 0 0 20px;
  background: #fff; border-radius: 0; text-decoration: none;
  transition: transform .4s cubic-bezier(0,0,.3642,1);
}
#ic-e2e-diagnostic .ic-e2e__brand img { display: block; width: 100%; height: auto; }
#ic-e2e-diagnostic a.ic-e2e__brand:hover { transform: scale(.95); }
#ic-e2e-diagnostic .ic-e2e__brand--success { width: 88px; height: 88px; margin: 0 0 26px; }

/* Text fallback, used only when no site icon is configured. */
#ic-e2e-diagnostic .ic-e2e__brand--text {
  width: auto; height: auto; padding: 0; background: none;
  font-family: var(--ic-ui); font-size: 19px; font-weight: 500; color: #fff;
}
#ic-e2e-diagnostic .ic-e2e__brand--text .mil-accent { color: var(--ic-orange); }

/* Separate the plate from the progress block below it. */
#ic-e2e-diagnostic .ic-e2e__rail-card .ic-e2e__brand {
  margin-bottom: 18px;
}
