:root {
  --wow-blue: #4d9dc1;
  --wow-blue-2: #78c6dd;
  --wow-orange: #ff5a1f;
  --wow-ink: #101923;
  --wow-ink-2: #153747;
  --wow-pearl: #f7fbfc;
  --wow-mist: #dff3f8;
  --wow-champagne: #f4d7b0;
  --wow-amber: #d99a2b;
  --wow-amber-soft: #fff7e7;
  --wow-graphite: #53616c;
  --wow-line: rgba(112, 155, 174, 0.24);
  --wow-glass: rgba(255, 255, 255, 0.66);
  --wow-glass-strong: rgba(255, 255, 255, 0.82);
  --wow-shadow: 0 24px 70px rgba(16, 25, 35, 0.12);
  --wow-blue-shadow: 0 18px 44px rgba(77, 157, 193, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--wow-ink);
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(244, 215, 176, 0.4), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(77, 157, 193, 0.24), transparent 30%),
    linear-gradient(135deg, #fbfdfe 0%, #eef7fa 46%, #f8fbfc 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(77, 157, 193, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 157, 193, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 70%);
}

.wow-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(1.3);
}

.wow-logo {
  height: 46px;
  width: auto;
  display: block;
}

.wow-shell {
  position: relative;
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: 46px 0 78px;
}

.wow-shell-wide {
  width: min(1440px, calc(100% - 36px));
}

.wow-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wow-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 18px;
  font-size: .88rem;
  font-weight: 850;
  color: var(--wow-ink);
  text-decoration: none;
}

.wow-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #16384a, #102532);
  box-shadow: 0 16px 34px rgba(16, 25, 35, 0.22), inset 0 1px 0 rgba(255,255,255,.2);
}

/* Shimmer sweep on the completed CTA button */
.wow-complete-cta-ready .wow-btn-primary {
  position: relative;
  overflow: hidden;
}

.wow-complete-cta-ready .wow-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.52) 44%, transparent 60%);
  transform: translateX(-140%);
  animation: wow-sheen 3.2s ease-in-out infinite;
}

.wow-btn-heat {
  color: #fff;
  background: linear-gradient(180deg, #ff7543, var(--wow-orange));
  box-shadow: 0 16px 34px rgba(255, 90, 31, .25), inset 0 1px 0 rgba(255,255,255,.28);
}

/* Solid CTA buttons keep their white text on hover/focus. Without this, the
   global `a:hover { color: var(--bn-primary-hover) }` rule in
   beauty-navigator-overrides.css (higher specificity than these class
   selectors) turns anchor-based buttons blue — button-element CTAs aren't
   affected, so this just brings the <a> CTAs in line with the rest of the site. */
.wow-btn-heat:hover,
.wow-btn-heat:focus,
.wow-btn-primary:hover,
.wow-btn-primary:focus {
  color: #fff;
}

.wow-btn-ghost {
  border-color: rgba(16, 25, 35, .08);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
}

.wow-btn-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.wow-glass {
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.46)),
    rgba(255,255,255,.58);
  box-shadow: var(--wow-shadow);
  backdrop-filter: blur(24px) saturate(1.25);
}

.wow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wow-ink-2);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.wow-eyebrow::before {
  content: "";
  width: 38px;
  height: 2px;
  border-radius: 99px;
  background: var(--wow-orange);
  box-shadow: 0 0 18px rgba(255,90,31,.32);
}

.wow-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;   /* right entry panel a tad wider */
  gap: 34px;
  align-items: center;
  min-height: calc(100vh - 170px);
}

/* Opt-in modifier for landing pages whose right panel can grow tall (e.g. many
   manually entered products on the ingredients start page) — keeps the left
   intro panel pinned in view as the right side scrolls. Apply by adding the
   class to the LEFT child div of .wow-hero. align-self overrides the parent's
   center alignment so the sticky element behaves predictably. */
.wow-hero-side {
  position: sticky;
  top: 80px;
  align-self: start;
}

.wow-logo-hero {
  width: min(430px, 86vw);
  height: auto;
  display: block;
  margin-bottom: 28px;
  filter: drop-shadow(0 20px 30px rgba(77,157,193,.16));
}

.wow-title {
  margin: 16px 0 14px;
  max-width: 760px;
  color: var(--wow-ink);
  /* Reduced ~25% from the original clamp(2.8rem, 6vw, 6.4rem) — applies to all
     three tool landing pages (audit/Home, ingredients, AI visibility). Max
     trimmed to 3.8rem per manager's spec (was 4.8rem). */
  font-size: clamp(2.1rem, 4.5vw, 3.8rem);
  line-height: 1.1;
  font-weight: 950;
}

.wow-title span {
  color: var(--wow-ink-2);
}

.wow-subtitle {
  max-width: 650px;
  margin: 0;
  color: #334a58;
  font-size: 1.05rem;
  line-height: 1.7;
}

.wow-orbit-field {
  position: absolute;
  inset: 90px auto auto 48%;
  width: 520px;
  height: 520px;
  pointer-events: none;
  opacity: .75;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform .18s ease-out;
}

.wow-orbit-field::before,
.wow-orbit-field::after {
  content: "";
  position: absolute;
  inset: 40px;
  border: 1px solid rgba(77,157,193,.22);
  border-radius: 50%;
  transform: rotate(18deg) scaleX(1.22);
}

.wow-orbit-field::after {
  inset: 95px;
  border-color: rgba(255,90,31,.18);
  transform: rotate(-25deg) scaleX(1.35);
}

.wow-orbit-field-progress {
  position: fixed;
  inset: 118px auto auto -140px;
  width: 500px;
  height: 500px;
  opacity: .5;
}

.wow-orbit-field-results {
  position: fixed;
  inset: 104px -150px auto auto;
  width: 540px;
  height: 540px;
  opacity: .46;
}

.wow-entry {
  position: relative;
  padding: 26px;
  overflow: hidden;
}

.wow-entry::before,
.wow-stream::before,
.wow-score-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.68) 38%, transparent 54%);
  transform: translateX(-120%);
  animation: wow-sheen 5.2s ease-in-out infinite;
}

@keyframes wow-sheen {
  0%, 44% { transform: translateX(-120%); opacity: 0; }
  52% { opacity: .8; }
  100% { transform: translateX(120%); opacity: 0; }
}

.wow-entry h2,
.wow-stream h2,
.wow-section-title {
  margin: 0;
  color: var(--wow-ink);
  font-size: 1.25rem;
  font-weight: 920;
}

.wow-label {
  display: block;
  margin: 18px 0 8px;
  color: var(--wow-graphite);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.wow-input {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(77,157,193,.24);
  border-radius: 16px;
  padding: 0 15px;
  color: var(--wow-ink);
  background: rgba(255,255,255,.72);
  font: inherit;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.wow-input:focus {
  border-color: rgba(77,157,193,.8);
  box-shadow: 0 0 0 4px rgba(77,157,193,.12);
}

.wow-type-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.wow-type {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(77,157,193,.18);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.55);
  font-size: .9rem;
  font-weight: 780;
  cursor: pointer;
}

.wow-type-active {
  border-color: rgba(255,90,31,.45);
  background: rgba(255,246,241,.72);
}

.wow-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(77,157,193,.16);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--wow-ink-2);
  background: rgba(255,255,255,.68);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}

.wow-pill-hot {
  border-color: rgba(255,90,31,.22);
  color: var(--wow-orange);
  background: rgba(255,241,235,.74);
}

.wow-pill-red {
  border-color: rgba(181,71,71,.24);
  color: #a93535;
  background: rgba(255,245,245,.78);
}

.wow-pill-green {
  border-color: rgba(44,154,104,.22);
  color: #217a50;
  background: rgba(238,248,242,.78);
}

.wow-pill-yellow {
  border-color: rgba(245,159,0,.24);
  color: #9b6500;
  background: rgba(255,251,235,.78);
}

.wow-pill-blue {
  border-color: rgba(77,157,193,.22);
  color: var(--wow-ink-2);
  background: rgba(238,248,251,.78);
}

/* Small inline spinner that inherits the pill's text color */
.wow-pill-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  animation: wow-spin 0.75s linear infinite;
  vertical-align: middle;
  margin-left: 5px;
}

@keyframes wow-spin {
  to { transform: rotate(360deg); }
}

.wow-scan-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.wow-mini-card {
  min-height: 72px;
  flex: 1 1 160px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(18px);
}

.wow-mini-card strong {
  display: block;
  color: var(--wow-ink);
  font-size: .9rem;
}

.wow-mini-card span {
  display: block;
  margin-top: 4px;
  color: var(--wow-graphite);
  font-size: .78rem;
}

.wow-progress {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 0 1px rgba(77,157,193,.16), inset 0 6px 12px rgba(16,25,35,.05);
}

.wow-progress-fill {
  position: relative;
  height: 100%;
  width: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, #23556d, var(--wow-blue-2));
  box-shadow: 0 0 18px rgba(77,157,193,.36);
}

.wow-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: translateX(-100%);
  animation: wow-glint 2.4s ease-in-out infinite;
}

@keyframes wow-glint {
  to { transform: translateX(130%); }
}

.wow-progress-rail {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 6px;
}

.wow-segment {
  height: 9px;
  border-radius: 99px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(77,157,193,.14);
}

.wow-segment-on {
  background: var(--wow-blue-2);
  box-shadow: 0 0 14px rgba(77,157,193,.42);
}

.wow-segment-done {
  background: var(--wow-blue-2);
  box-shadow: 0 0 14px rgba(77,157,193,.42);
}

.wow-segment-hot {
  background: linear-gradient(90deg, #ff7543 0%, #ffb38a 50%, #ff7543 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 16px rgba(255,90,31,.38);
  animation: wow-segment-pulse 1.8s ease-in-out infinite;
}

@keyframes wow-segment-pulse {
  0%, 100% { background-position: 0% 0; }
  50%       { background-position: 100% 0; }
}

.wow-segment-score-bad {
  background: #c94a45;
  box-shadow: 0 0 14px rgba(201,74,69,.3);
}

.wow-segment-score-warn {
  background: #f59f00;
  box-shadow: 0 0 14px rgba(245,159,0,.28);
}

.wow-segment-score-ok {
  background: #f4d35e;
  box-shadow: 0 0 14px rgba(244,211,94,.26);
}

.wow-segment-score-good {
  background: #2c9a68;
  box-shadow: 0 0 14px rgba(44,154,104,.3);
}

.wow-complete-cta {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  opacity: .44;
}

.wow-complete-cta-ready {
  animation: wow-ready-in .42s ease-out both;
  opacity: 1;
}

@keyframes wow-ready-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wow-audit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 22px;
  align-items: start;
}

.wow-run-header {
  padding: 24px;
  margin-bottom: 18px;
}

.wow-run-top,
.wow-card-head,
.wow-stream-head,
.wow-results-top,
.wow-score-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.wow-run-title {
  margin: 10px 0 4px;
  font-size: 2.15rem;
  line-height: 1;
  font-weight: 950;
}

.wow-url {
  color: var(--wow-orange);
  font-size: .92rem;
  font-weight: 720;
  overflow-wrap: break-word;
  word-break: break-all;
  min-width: 0;
}

.wow-url-blue {
  color: var(--wow-blue);
}

.wow-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.wow-metric {
  padding: 15px;
}

.wow-metric small {
  display: block;
  color: var(--wow-graphite);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wow-metric strong {
  display: block;
  margin-top: 6px;
  color: var(--wow-ink);
  font-size: 1.55rem;
  line-height: 1;
}

.wow-phase-stack {
  display: grid;
  gap: 12px;
}

.wow-phase {
  position: relative;
  padding: 18px;
  overflow: hidden;
}

.wow-phase-active {
  border-color: rgba(77,157,193,.5);
  box-shadow: var(--wow-blue-shadow);
}

.wow-phase-complete {
  border-color: rgba(77,157,193,.3);
}

.wow-phase-complete::after,
.wow-phase-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 99px;
}

.wow-phase-complete::after {
  background: var(--wow-blue-2);
  box-shadow: 0 0 16px rgba(77,157,193,.42);
}

.wow-phase-active::after {
  background: var(--wow-orange);
  box-shadow: 0 0 18px rgba(255,90,31,.5);
}

/* Sweeping sheen across the running phase card */
.wow-phase-active::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 15%, rgba(255,200,150,.36) 38%, transparent 54%);
  transform: translateX(-120%);
  animation: wow-sheen 2.8s ease-in-out infinite;
}

.wow-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.86);
  background: rgba(255,255,255,.68);
  color: var(--wow-ink-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 24px rgba(16,25,35,.08);
}

.wow-icon-hot {
  color: var(--wow-orange);
}

/* First flex child in accordion summaries (wow-card-head or h2) grows to push pill right */
.wow-disclosure summary > *:first-child {
  flex: 1;
  min-width: 0;
}

/* wow-card-head is normally space-between; inside a summary the icon+title must stay packed left */
.wow-disclosure summary .wow-card-head {
  justify-content: flex-start;
}

.wow-card-title h3 {
  margin: 0;
  color: var(--wow-ink);
  font-size: 1rem;
  font-weight: 920;
}

.wow-card-title p {
  margin: 3px 0 0;
  color: var(--wow-graphite);
  font-size: .8rem;
}

.wow-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.wow-step {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(77,157,193,.12);
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(255,255,255,.54);
  color: #344b59;
  font-size: .8rem;
  font-weight: 720;
}

.wow-step::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b8ccd5;
}

.wow-step-done::before {
  background: #2c9a68;
  box-shadow: 0 0 0 4px rgba(44,154,104,.1);
}

.wow-step-warn::before {
  background: #f5a400;
  box-shadow: 0 0 0 4px rgba(245,159,0,.12);
}

.wow-step-bad::before {
  background: #b54747;
  box-shadow: 0 0 0 4px rgba(181,71,71,.11);
}

.wow-step-active {
  color: var(--wow-ink);
  border-color: rgba(255,90,31,.28);
  background: rgba(255,246,241,.72);
}

.wow-step-active::before {
  background: var(--wow-orange);
  box-shadow: 0 0 0 5px rgba(255,90,31,.12), 0 0 18px rgba(255,90,31,.42);
  animation: wow-dot 1.2s ease-in-out infinite;
}

@keyframes wow-dot {
  50% { transform: scale(1.35); }
}

.wow-stream-aside {
  position: sticky;
  top: 92px;
  align-self: start;
}

.wow-stream {
  padding: 22px;
  overflow: hidden;
}

.wow-orb {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 19%),
    conic-gradient(from 20deg, var(--wow-blue), var(--wow-champagne), var(--wow-orange), var(--wow-blue));
  box-shadow: 0 0 34px rgba(77,157,193,.28);
}

.wow-orb::before,
.wow-orb::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(77,157,193,.25);
  border-radius: 50%;
  animation: wow-ring 2.2s ease-in-out infinite;
}

.wow-orb::after {
  inset: -17px;
  animation-delay: .35s;
}

@keyframes wow-ring {
  0%, 100% { transform: scale(.92); opacity: .18; }
  50% { transform: scale(1.04); opacity: .78; }
}

.wow-thought {
  margin: 22px 0 16px;
  padding: 18px;
  border: 1px solid rgba(77,157,193,.2);
  border-radius: 22px;
  background: rgba(255,255,255,.58);
}

.wow-thought small {
  color: var(--wow-orange);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wow-thought p {
  margin: 9px 0 0;
  color: var(--wow-ink);
  font-size: 1.08rem;
  line-height: 1.55;
  font-weight: 830;
}

.wow-stream-cards {
  display: grid;
  gap: 10px;
  /* Raised from 320px so the right thinking panel can grow to ~800px tall when
     fully populated (head + thought + ~600px of cards ≈ 800px). */
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(77,157,193,.3) transparent;
}

.wow-stream-card {
  position: relative;
  padding: 13px 14px 13px 42px;
  border: 1px solid rgba(77,157,193,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.48);
  color: #344b59;
  font-size: .82rem;
  line-height: 1.45;
  animation: wow-card-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  transition: border-color 0.35s ease, background 0.35s ease;
}

@keyframes wow-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wow-stream-card::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wow-blue);
  box-shadow: 0 0 0 5px rgba(77,157,193,.11);
}

.wow-stream-card-active {
  border-color: rgba(255,90,31,.28);
  background: rgba(255,246,241,.64);
}

.wow-stream-card-active::before {
  background: var(--wow-orange);
  box-shadow: 0 0 0 5px rgba(255,90,31,.12), 0 0 18px rgba(255,90,31,.4);
}

.wow-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
}

.wow-score-hero {
  position: relative;
  padding: 24px;
  overflow: hidden;
  margin-bottom: 18px;
}

.wow-score-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.wow-score-ring {
  min-height: 248px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 46%, transparent 47%),
    conic-gradient(var(--wow-amber) 0 53%, rgba(77,157,193,.16) 53% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 46px rgba(16,25,35,.1);
}

.wow-score-ring > div {
  text-align: center;
}

.wow-score-ring strong {
  display: block;
  color: var(--wow-amber);
  font-size: 4.8rem;
  line-height: .86;
  font-weight: 950;
  text-align: center;
}

.wow-score-ring span {
  display: block;
  margin-top: 8px;
  color: var(--wow-graphite);
  text-align: center;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wow-score-ring-small {
  min-height: 154px;
  border-radius: 24px;
}

.wow-score-ring-small strong {
  font-size: 3rem;
}

.wow-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wow-kpi {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: rgba(255,255,255,.52);
}

.wow-kpi small {
  display: block;
  color: var(--wow-graphite);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wow-kpi strong {
  display: block;
  margin-top: 6px;
  color: var(--wow-ink);
  font-size: 1.4rem;
  font-weight: 940;
}

.wow-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wow-insight {
  padding: 17px;
}

.wow-insight h3 {
  margin: 0 0 10px;
  color: var(--wow-ink);
  font-size: .98rem;
  font-weight: 920;
}

.wow-insight-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 11px;
}

.wow-insight-score strong {
  color: var(--wow-ink);
  font-size: 2.15rem;
  line-height: 1;
}

.wow-spark {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 4px;
  height: 42px;
}

.wow-spark span {
  border-radius: 99px 99px 4px 4px;
  background: rgba(77,157,193,.28);
  height: var(--h);
}

.wow-spark span:nth-child(3n) {
  background: rgba(244,215,176,.72);
}

.wow-segment-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: var(--wow-graphite);
  font-size: .72rem;
  font-weight: 800;
}

.wow-moves {
  position: sticky;
  top: 92px;
  padding: 20px;
}

.wow-move {
  padding: 14px 0;
  border-top: 1px solid rgba(77,157,193,.15);
}

.wow-move:first-of-type {
  border-top: 0;
}

.wow-move strong {
  display: block;
  margin-top: 8px;
  color: var(--wow-ink);
  font-size: .94rem;
}

.wow-move p {
  margin: 6px 0 0;
  color: #405664;
  font-size: .82rem;
  line-height: 1.45;
}

.wow-move-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.wow-section-summary {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(77,157,193,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.48);
  color: #405664;
  font-size: .84rem;
  line-height: 1.5;
}

.wow-social-summary {
  margin: 14px 0 12px;
  padding: 14px;
  border: 1px solid rgba(255,90,31,.16);
  border-radius: 16px;
  background: rgba(255,247,242,.56);
  color: #405664;
  font-size: .84rem;
  line-height: 1.5;
}

.wow-signal-review {
  margin-top: 18px;
  padding: 18px;
}

.wow-disclosure {
  overflow: hidden;
}

.wow-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  cursor: pointer;
}

.wow-disclosure summary::-webkit-details-marker {
  display: none;
}

.wow-disclosure summary::after {
  content: "+";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(77,157,193,.18);
  background: rgba(255,255,255,.7);
  color: var(--wow-ink-2);
  font-weight: 950;
}

.wow-disclosure[open] summary::after {
  content: "-";
}

.wow-disclosure-body {
  margin-top: 14px;
}

.wow-signal-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 118px;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid rgba(77,157,193,.12);
  font-size: .84rem;
}

.wow-signal-row strong {
  color: var(--wow-ink);
}

.wow-signal-row p {
  margin: 4px 0 0;
  color: #526977;
  font-size: .78rem;
  line-height: 1.4;
}

.wow-signal-row:first-of-type {
  border-top: 0;
}

.wow-signal-evidence {
  text-align: right;
  font-size: .8rem;
  font-weight: 500;
  color: #7a9aaa;
  white-space: nowrap;
  align-self: center;
}

.wow-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.wow-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 1px solid rgba(77,157,193,.12);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255,255,255,.52);
  font-size: .82rem;
  font-weight: 760;
}

.wow-social-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.wow-social-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 16px rgba(16,25,35,.1);
}

.wow-social-facebook { background: #1877f2; }
.wow-social-instagram { background: linear-gradient(135deg, #f58529, #dd2a7b 48%, #8134af); }
.wow-social-linkedin { background: #0a66c2; }
.wow-social-x { background: #111; }
.wow-social-youtube { background: #ff0033; }
.wow-social-tiktok { background: linear-gradient(135deg, #111 0 55%, #25f4ee 56% 72%, #fe2c55 73%); }
.wow-social-pinterest { background: #e60023; }

@media (max-width: 1050px) {
  .wow-hero,
  .wow-audit-grid,
  .wow-results-grid,
  .wow-score-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Prevent grid children from expanding beyond viewport */
  .wow-audit-grid > *,
  .wow-results-grid > * {
    min-width: 0;
    overflow-x: hidden;
  }

  .wow-stream,
  .wow-stream-aside,
  .wow-moves {
    position: static;
  }

  .wow-metrics,
  .wow-kpi-grid,
  .wow-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Remove tall min-height so the entry form doesn't require scrolling on tablet */
  .wow-hero {
    min-height: auto;
    padding-top: 14px;
    padding-bottom: 20px;
  }

  /* Surface High-Impact Moves before the long signal review list */
  .wow-moves {
    order: -1;
  }

  /* Score ring: slightly compact in single-column layout, centred */
  .wow-score-ring {
    min-height: 200px;
    max-width: 280px;
    justify-self: center;
  }

  /* Score layout: tighten gap when stacked */
  .wow-score-layout {
    gap: 18px;
  }

  /* Allow status pill and run-top to wrap */
  .wow-results-top,
  .wow-run-top {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Score hero: slightly tighter padding */
  .wow-score-hero {
    padding: 20px;
  }
}

@media (max-width: 700px) {
  .wow-topbar {
    padding: 0 16px;
  }

  .wow-logo {
    height: 38px;
  }

  .wow-actions .wow-btn-ghost {
    display: none;
  }

  /* KPI tiles stay 2-col; insight/metrics/step-grid collapse */
  .wow-metrics,
  .wow-insight-grid,
  .wow-step-grid {
    grid-template-columns: 1fr;
  }

  .wow-social-grid {
    grid-template-columns: 1fr;
  }

  /* Shell: tighter vertical padding */
  .wow-shell {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  /* Run/report title: smaller so it doesn't overflow */
  .wow-run-title {
    font-size: 1.6rem;
    margin: 8px 0 4px;
  }

  /* Score hero: compact padding */
  .wow-score-hero {
    padding: 16px;
  }

  .wow-score-ring {
    min-height: 160px;
    max-width: 240px;
  }

  .wow-score-ring strong {
    font-size: 3.4rem;
  }

  /* Results top: stack vertically on small screens */
  .wow-results-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Run header panel */
  .wow-run-header {
    padding: 16px;
  }

  /* Signal rows: narrower severity + evidence columns */
  .wow-signal-row {
    grid-template-columns: 100px minmax(0, 1fr) 72px;
    gap: 8px;
    font-size: .78rem;
  }

  .wow-signal-row p {
    font-size: .74rem;
  }

  .wow-signal-evidence {
    font-size: .72rem;
  }

  /* Section titles */
  .wow-section-title {
    font-size: 1.05rem;
  }

  /* Thought bubble body text */
  .wow-thought p {
    font-size: .92rem;
  }

  /* Entry panel: tighter padding */
  .wow-entry {
    padding: 20px 16px;
  }

  /* Run-top right side (status + step count) should never be wider than the container */
  .wow-run-top > div {
    min-width: 0;
  }

  /* Completion CTA: center on small screens */
  .wow-complete-cta,
  .wow-complete-cta-ready {
    justify-content: center;
  }

  /* Phase card padding: tighter on phones */
  .wow-phase {
    padding: 14px;
  }

  /* Progress caption: smaller text so it fits on one line */
  .wow-progress-caption {
    font-size: .76rem !important;
  }
}

@media (max-width: 480px) {
  /* Minimal horizontal margin on very small phones */
  .wow-shell,
  .wow-shell-wide {
    width: calc(100% - 24px);
  }

  /* Score ring: compact */
  .wow-score-ring {
    min-height: 138px;
    max-width: 190px;
  }

  .wow-score-ring strong {
    font-size: 2.8rem;
  }

  /* Title */
  .wow-run-title {
    font-size: 1.3rem;
  }

  /* Hide evidence column — there's no room on tiny screens */
  .wow-signal-row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 7px;
  }

  .wow-signal-evidence {
    display: none;
  }

  /* KPI tiles: 2-col even on small phones */
  .wow-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Moves and stream: tighter padding */
  .wow-moves,
  .wow-stream {
    padding: 18px 14px;
  }

  /* Section summary text */
  .wow-section-summary {
    font-size: .8rem;
  }

  /* Run-top: fully stack on the smallest phones */
  .wow-run-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Status pill right-side block: left-align when stacked */
  .wow-run-top > div[style*="text-align:right"],
  .wow-run-top > div[style*="text-align: right"] {
    text-align: left !important;
  }

  /* Stream cards: shorter on tiny screens */
  .wow-stream-cards {
    max-height: 240px;
  }

  /* Insight grid: force single column on smallest phones */
  .wow-insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Skeleton loading state ───────────────────────────────── */

.wow-skeleton {
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(77,157,193,.07) 25%,
    rgba(77,157,193,.15) 50%,
    rgba(77,157,193,.07) 75%
  );
  background-size: 200% 100%;
  animation: wow-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes wow-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.wow-skeleton-ring {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(77,157,193,.07) 25%,
    rgba(77,157,193,.15) 50%,
    rgba(77,157,193,.07) 75%
  );
  background-size: 200% 100%;
  animation: wow-skeleton-shimmer 1.6s ease-in-out infinite;
  justify-self: center;
}

/* ── iMessage-style typing indicator ───────────────────────────────────── */
/* Host wrapper for the wowTyped typing indicator. Kept as a sibling of
   .wow-stream-cards so Blazor's diff of the card list never touches it.
   display:contents lets the indicator visually sit where the anchor lives
   without the anchor itself adding a box. */
.wow-typing-anchor {
  display: contents;
}

.wow-typing-indicator {
  align-items: center;
  gap: 5px;
  padding: 10px 14px 10px 42px;
  position: relative;
}

.wow-typing-indicator::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wow-blue);
  opacity: 0.45;
  box-shadow: 0 0 0 5px rgba(77,157,193,.08);
}

.wow-typing-indicator span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(77,157,193,.55);
  animation: wow-typing-bounce 1.1s ease-in-out infinite;
}

.wow-typing-indicator span:nth-child(2) { animation-delay: 0.18s; }
.wow-typing-indicator span:nth-child(3) { animation-delay: 0.36s; }

@keyframes wow-typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── IngCheck start-page molecule visual ───────────────────────────────────
   Ported from ingcheck-preview.css (the design folder prototype). Used only
   on /ingredients to give the hero section visual weight that matches the
   reference mock — orange/blue radial gradients with a translucent circle
   and a grid of "atom" pills, two of which are tinted hot/ok to suggest the
   regulatory pass/fail palette without committing to a specific layout. */
.wow-visual-lens {
  position: relative;
  width: min(640px, 100%);
  min-height: 220px;
  margin-top: 30px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .72);
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 90, 31, .22), transparent 28%),
    radial-gradient(circle at 72% 30%, rgba(77, 157, 193, .28), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .32));
  box-shadow: 0 24px 70px rgba(16, 25, 35, .1);
}
.wow-visual-lens::before {
  content: "";
  position: absolute;
  inset: 28px 42px;
  border: 1px solid rgba(21, 55, 71, .12);
  border-radius: 999px;
  transform: rotate(-7deg);
}
.wow-visual-lens::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: 54px;
  top: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, .9) 0 24%, transparent 25%),
    conic-gradient(from 30deg, var(--mud-palette-primary), #f4d8a8, #ff5a1f, var(--mud-palette-primary));
  box-shadow: 0 0 44px rgba(77, 157, 193, .28);
}
.wow-molecule {
  position: absolute;
  left: 38px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, 44px);
  grid-auto-rows: 44px;
  gap: 12px;
}
.wow-atom {
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(77, 157, 193, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 22px rgba(16, 25, 35, .08);
}
.wow-atom-hot {
  background: rgba(255, 90, 31, .14);
  border-color: rgba(255, 90, 31, .3);
}
.wow-atom-ok {
  background: rgba(44, 154, 104, .14);
  border-color: rgba(44, 154, 104, .28);
}

/* ─── IngCheck two-column form rows ─────────────────────────────────────────
   Side-by-side pairs of wow-input fields on the start-page form. Collapses
   to single-column under 600px so the form still works on phones. */
.wow-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .wow-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ─── IngCheck start-page input-method switch + manual product cards ─────────
   Segmented control to pick "Enter product info" vs "Upload documents",
   plus the stacked manual product-entry cards. State-driven from the Razor
   (active option gets -active modifier). */
.wow-method-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .06);
  margin-top: 8px;
}
.wow-method-option {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--wow-ink-muted, #6b7c87);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wow-method-option-active {
  background: #fff;
  color: var(--mud-palette-primary);
  box-shadow: 0 2px 8px rgba(16, 25, 35, .08);
}
.wow-intake-card {
  margin-top: 12px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(var(--mud-palette-primary-rgb), .03);
  border: 1px solid rgba(var(--mud-palette-primary-rgb), .12);
}
.wow-intake-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.wow-intake-head strong { font-size: .9rem; color: var(--wow-ink, #14313f); }
.wow-intake-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wow-ink-muted, #6b7c87);
  font-size: .82rem;
  text-decoration: underline;
  padding: 0;
}
.wow-add-product {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed rgba(var(--mud-palette-primary-rgb), .4);
  color: var(--mud-palette-primary);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.wow-add-product:hover:not(:disabled) { background: rgba(var(--mud-palette-primary-rgb), .06); }
.wow-add-product:disabled { opacity: .4; cursor: not-allowed; }

/* ─── IngCheck processing-page phase cards ──────────────────────────────────
   Aligns with the look in ingcheck-processing.html — flat surface with a
   left accent rail, generous internal spacing, and a step-grid that wraps
   responsively. Status comes from wow-phase-* modifier classes set in the
   Razor markup. */
.wow-phase-card {
  position: relative;
  padding: 20px 22px 18px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 10px 30px rgba(16, 25, 35, .05);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.wow-phase-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: rgba(0, 0, 0, .08);
  transition: background .25s ease;
}
.wow-phase-card-active { box-shadow: 0 12px 38px rgba(255, 90, 31, .14); }
.wow-phase-card-active::before  { background: var(--mud-palette-primary); }
.wow-phase-card-complete::before { background: #2c9a68; }

.wow-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.wow-section-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wow-ink, #14313f);
}
.wow-section-head p {
  margin: 4px 0 0;
  color: var(--wow-ink-muted, #6b7c87);
  font-size: .87rem;
  line-height: 1.45;
}
.wow-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.wow-step {
  padding: 9px 13px;
  border-radius: 9px;
  font-size: .85rem;
  font-weight: 500;
  background: rgba(0, 0, 0, .025);
  border: 1px solid rgba(0, 0, 0, .05);
  color: var(--wow-ink-muted, #6b7c87);
}
.wow-step-done {
  /* Reference greens only the dot (::before) + leaves the check icon — no
     green fill on the row. Background matches the whitish parent surface (not
     the neutral grey of pending steps); the green orb + check carry "done".
     Border stays the neutral grey from .wow-step. */
  background: rgba(255, 255, 255, .7);
  color: var(--wow-ink, #14313f);
}
.wow-step-active {
  background: rgba(255, 90, 31, .08);
  border-color: rgba(255, 90, 31, .25);
  color: var(--wow-ink, #14313f);
  font-weight: 600;
}

/* AI Visibility processing — steps stacked vertically, each full-width, styled
   to match the ingredients processing cards: left color rail (like phase-card),
   a state orb (like wow-step), a right-aligned status pill, and a plain-language
   description. Scoped to the modifier so the IngCheck step grid is unaffected. */
.wow-step-grid.wow-step-grid-stacked {
  grid-template-columns: 1fr;
}
.wow-step-grid-stacked .wow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  position: relative;
  overflow: hidden;               /* clips the running-step sheen sweep */
  padding: 13px 15px 13px 22px;   /* extra left pad clears the rail */
}
/* Repurpose the inherited wow-step orb ::before as the left color rail (this
   also removes the stray tiny-square the inline ::before rendered as). */
.wow-step-grid-stacked .wow-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  height: auto;
  border-radius: 0 3px 3px 0;
  background: rgba(0, 0, 0, .08);
  box-shadow: none;
}
.wow-step-grid-stacked .wow-step-done::before {
  background: #2c9a68;
  box-shadow: 0 0 16px rgba(44, 154, 104, .28);
}
.wow-step-grid-stacked .wow-step-active::before {
  /* Manager request 2026-05-29: active card's left color bar matches the
     orange orb + pill while processing (was theme-primary blue, which
     read as "complete" alongside the new blue-done convention). */
  background: var(--wow-orange);
  box-shadow: 0 0 18px rgba(255, 90, 31, .45);
}
/* State orb on the left of each card */
.wow-step-orb {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-radius: 50%;
  background: #b8ccd5;
}
.wow-step-done .wow-step-orb {
  background: #2c9a68;
  box-shadow: 0 0 0 4px rgba(44, 154, 104, .12);
}
.wow-step-active .wow-step-orb {
  background: var(--wow-orange);
  box-shadow: 0 0 0 5px rgba(255, 90, 31, .12), 0 0 16px rgba(255, 90, 31, .42);
  animation: wow-dot 1.2s ease-in-out infinite;
}
/* Sweeping sheen across the running step — same effect + keyframe as the
   audit tool's .wow-phase-active card. (Rail uses ::before, so sheen uses
   ::after; the card's overflow:hidden clips the sweep to the card edges.) */
.wow-step-grid-stacked .wow-step-active::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 200, 150, .36) 38%, transparent 54%);
  transform: translateX(-120%);
  animation: wow-sheen 2.8s ease-in-out infinite;
}
.wow-step-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.wow-step-desc {
  margin: 5px 0 0;
  color: var(--wow-ink-muted, #6b7c87);
  font-size: .8rem;
  line-height: 1.45;
}
.wow-step-grid-stacked .wow-step .wow-pill {
  align-self: start;
}

/* AI Visibility processing — manager request 2026-05-29. Completed-state
   coloring on the stacked step cards uses brand blue (not success-green) to
   align with the Review Activity panel on the right. Scoped to the stacked
   variant so the IngCheck + Audit step grids (which share .wow-step-done)
   stay green. Higher specificity than the earlier .wow-step-done rules
   so these win the cascade without !important. */
.wow-step-grid-stacked .wow-step-done::before {
  background: var(--wow-blue);
  box-shadow: 0 0 16px rgba(77, 157, 193, .32);
}
.wow-step-grid-stacked .wow-step-done .wow-step-orb {
  background: var(--wow-blue);
  box-shadow: 0 0 0 4px rgba(77, 157, 193, .14);
}

/* IngCheck processing sidebar metric tiles — colored top accent to match the
   prototype's `.metric::before` bar. Scoped to this modifier so the audit-side
   pages that share `.wow-metric` are unaffected. */
.wow-metric-accent {
  border-top: 3px solid var(--wow-blue);
}

/* ─── IngCheck muted subtitle (replaces orange wow-url on the results page) ── */
.wow-subtle {
  color: var(--wow-ink-muted, #6b7c87);
  font-size: .92rem;
  margin-top: 4px;
}

/* ─── IngCheck results-page footer disclaimer panel ─────────────────────── */
/* Results-page action row: "*Beta Version" chip pinned left, report action
   buttons grouped on the right. Shared by all three tools' results pages. */
.wow-results-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.wow-results-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

/* "*Beta Version" chip — brand blue, reads as a status label not a warning. */
.wow-pill-beta {
  border-color: rgba(77, 157, 193, .35);
  color: var(--bn-primary, #2f6f8f);
  background: rgba(238, 248, 251, .9);
  font-weight: 700;
}

.wow-disclaimer-footer {
  margin-top: 24px;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .025);
  border: 1px dashed rgba(0, 0, 0, .12);
  color: var(--wow-ink-muted, #6b7c87);
  font-size: .82rem;
  line-height: 1.55;
}
.wow-disclaimer-footer strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  color: var(--wow-ink, #14313f);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   IngCheck results overhaul (ING-12 Goal 5) — ported from the updated
   prototype (prototypes-updated/ingcheck-preview.css). Product switcher is
   STATE-DRIVEN in Blazor (not the prototype's CSS :checked trick), so the
   radio/sibling selectors are intentionally omitted. Market & check ordering
   is done in C# (worst-first), so no flex `order` rules here either.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Status badge — small uppercase pill used in the hero, switcher, and market heads */
.wow-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  width: fit-content;
  border: 1px solid rgba(77, 157, 193, .16);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: .66rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.wow-status-badge.pass { border-color: rgba(44, 154, 104, .2); color: #2c9a68; background: rgba(241, 250, 245, .9); }
.wow-status-badge.warn { border-color: rgba(231, 161, 45, .26); color: #8b5e12; background: rgba(255, 250, 236, .94); }
.wow-status-badge.fail { border-color: rgba(184, 66, 66, .22); color: #b84242; background: rgba(255, 245, 245, .94); }
/* V1.1 AI Visibility qualitative statuses: info = Experimental, muted = Not Detected */
.wow-status-badge.info  { border-color: rgba(77, 157, 193, .28); color: #2f6f8f; background: rgba(238, 247, 250, .94); }
.wow-status-badge.muted { border-color: rgba(112, 124, 135, .22); color: #5f6e78; background: rgba(244, 246, 248, .94); }

/* Hero actions row (info popover + global badge) */
.wow-hero-actions { display: flex; align-items: center; gap: 10px; }

/* Info "i" popover */
.wow-info-popover { position: relative; }
.wow-info-popover summary {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(77, 157, 193, .2);
  border-radius: 999px;
  color: var(--wow-ink-2, #153747);
  background: rgba(255, 255, 255, .72);
  font-size: .84rem; font-weight: 800; cursor: pointer; list-style: none;
}
.wow-info-popover summary::-webkit-details-marker { display: none; }
.wow-info-card {
  position: absolute; right: 0; top: 38px; z-index: 25;
  width: min(360px, calc(100vw - 48px));
  display: grid; gap: 9px; padding: 14px;
  border: 1px solid rgba(77, 157, 193, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 46px rgba(16, 25, 35, .16);
}
.wow-info-card h3 { margin: 0; font-size: .95rem; }
.wow-info-card > p { margin: 0; color: var(--wow-ink-muted, #6b7c87); font-size: .8rem; line-height: 1.45; }
.wow-guide-item {
  padding: 12px;
  border: 1px solid rgba(77, 157, 193, .12);
  border-left: 3px solid var(--wow-amber, #d99a2b);
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
}
.wow-guide-item.pass { border-left-color: #2c9a68; }
.wow-guide-item.warn { border-left-color: var(--wow-amber, #d99a2b); }
.wow-guide-item.fail { border-left-color: #b84242; }
.wow-guide-item strong, .wow-guide-item span { display: block; }
.wow-guide-item strong { font-size: .84rem; font-weight: 800; }
.wow-guide-item span { margin-top: 4px; color: var(--wow-ink-muted, #6b7c87); font-size: .76rem; line-height: 1.4; }

/* Summary strip — market overview banner + 3 metric tiles */
.wow-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.wow-summary-market, .wow-summary-metric {
  position: relative; overflow: hidden;
  border: 1px solid rgba(77, 157, 193, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
}
.wow-summary-market { display: grid; grid-column: 1 / -1; gap: 10px; padding: 12px 14px; }
.wow-summary-market small {
  display: block; margin-bottom: 3px;
  color: var(--wow-ink-muted, #6b7c87);
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.wow-summary-market strong { font-size: .98rem; font-weight: 800; }
.wow-summary-metric {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 10px 12px;
  /* Colored rail on the LEFT (was top) — per manager request. */
  border-left: 3px solid rgba(77, 157, 193, .22);
}
.wow-summary-metric.pass { border-left-color: #2c9a68; }
.wow-summary-metric.warn { border-left-color: var(--wow-amber, #d99a2b); }
.wow-summary-metric.fail { border-left-color: #b84242; }
.wow-summary-metric strong { font-size: 1.28rem; line-height: 1; font-weight: 900; }
.wow-summary-metric span { color: var(--wow-ink-muted, #6b7c87); font-size: .74rem; line-height: 1.15; }

/* Portfolio market chips */
.wow-portfolio-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.wow-market-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; min-height: 32px;
  border: 1px solid rgba(77, 157, 193, .14);
  border-radius: 999px; padding: 6px 8px;
  color: var(--wow-ink-muted, #6b7c87);
  background: rgba(255, 255, 255, .52);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.wow-market-chip strong { font-size: .72rem; line-height: 1; }
.wow-market-chip span { font-size: .61rem; opacity: .8; font-weight: 800; line-height: 1; }
.wow-market-chip.pass { border-color: rgba(44, 154, 104, .18); color: #2c9a68; background: rgba(242, 250, 245, .78); }
.wow-market-chip.warn { border-color: rgba(231, 161, 45, .22); color: #8b5e12; background: rgba(255, 250, 236, .82); }
.wow-market-chip.fail { border-color: rgba(184, 66, 66, .2); color: #b84242; background: rgba(255, 246, 246, .82); }

/* Two-column body: product panel + sticky side rail */
.wow-results-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
  margin-top: 18px;
}
.wow-product-panels {
  min-width: 0;
  /* Each region accordion is now its own card sibling of the product-report
     card (manager split request) — flex-column + gap gives them clean spacing. */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wow-results-rail { position: sticky; top: 92px; display: grid; gap: 12px; }

.wow-side-card {
  display: grid; gap: 12px; padding: 14px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .54)),
    rgba(255, 255, 255, .62);
  box-shadow: 0 16px 42px rgba(16, 25, 35, .08);
  backdrop-filter: blur(22px) saturate(1.2);
}
.wow-side-card-head { display: grid; gap: 4px; }
.wow-side-card-head strong { font-size: .98rem; font-weight: 800; }
.wow-side-card > p { margin: 0; color: var(--wow-ink-muted, #6b7c87); font-size: .76rem; line-height: 1.45; }

/* Product switcher (state-driven buttons) */
.wow-product-switcher {
  display: grid; gap: 8px;
  max-height: min(560px, calc(100vh - 190px));
  overflow-y: auto; padding-right: 2px; scrollbar-width: thin;
}
.wow-switch-item {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(77, 157, 193, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .6);
  cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wow-switch-item:hover { border-color: rgba(77, 157, 193, .2); }
.wow-switch-item-active {
  /* Selected = blue border (same wow-blue as the .info badge variant + the
     "Products" eyebrow above it) so the selected product reads at a glance
     without overlapping the orange brand accent. */
  border-color: var(--wow-blue);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 22px rgba(77, 157, 193, .14);
}

/* Blue variant of wow-eyebrow — used on the right-rail "Products" header so
   it matches the selected switch-item border + the .info badge family. */
.wow-eyebrow.wow-eyebrow-info { color: var(--wow-blue); }
.wow-eyebrow.wow-eyebrow-info::before {
  background: var(--wow-blue);
  box-shadow: 0 0 18px rgba(77, 157, 193, .32);
}
.wow-switch-item strong { display: block; min-width: 0; font-size: .9rem; font-weight: 800; }
.wow-switch-item span { display: block; grid-column: 1; min-width: 0; color: var(--wow-ink-muted, #6b7c87); font-size: .73rem; }
.wow-switch-item .wow-status-badge { grid-column: 2; grid-row: 1 / 3; justify-self: end; }

/* Review-notes scope grid */
.wow-scope-list { display: grid; grid-template-columns: 1fr; gap: 7px; }
.wow-scope-item { padding: 9px 10px; border: 1px solid rgba(77, 157, 193, .12); border-radius: 10px; background: rgba(255, 255, 255, .56); }
.wow-scope-item strong { display: block; font-size: .78rem; line-height: 1.2; }
.wow-scope-item span { display: block; margin-top: 4px; color: var(--wow-ink-muted, #6b7c87); font-size: .68rem; line-height: 1.32; }

/* Per-product report card */
.wow-product-report-card {
  position: relative; overflow: hidden; padding: 18px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .54)),
    rgba(255, 255, 255, .62);
  box-shadow: 0 16px 42px rgba(16, 25, 35, .08);
  backdrop-filter: blur(22px) saturate(1.2);
}
.wow-panel-note { margin: 8px 0 0; color: var(--wow-ink-muted, #6b7c87); font-size: .88rem; line-height: 1.5; }
.wow-product-summary-card {
  display: grid; gap: 11px; margin-top: 14px; padding: 12px;
  border: 1px solid rgba(77, 157, 193, .16); border-radius: 12px; background: rgba(255, 255, 255, .6);
}
/* Intrinsically responsive KPI tiles: a real min track width (96px) lets the
   grid reflow to fewer columns + wrap on narrow screens instead of crushing all
   five onto one row. The old minmax(0, 1fr) forced a single row at every width,
   which clipped the labels ("Ingredi…", "Prohibi…") on mobile. Desktop is wide
   enough to keep all tiles on one row, so it's unchanged. */
.wow-product-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px; }
.wow-product-kpis span {
  position: relative; overflow: hidden; min-width: 0;
  padding: 9px 10px 9px 13px;
  border: 1px solid rgba(77, 157, 193, .14); border-radius: 10px;
  color: var(--wow-ink-muted, #6b7c87); background: rgba(255, 255, 255, .56);
  font-size: .68rem; line-height: 1.15;
}
.wow-product-kpis span::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 999px; background: var(--wow-blue);
}
.wow-product-kpis span.info::before { background: var(--wow-blue); }
.wow-product-kpis span.pass::before { background: #2c9a68; }
.wow-product-kpis span.warn::before { background: var(--wow-amber, #d99a2b); }
.wow-product-kpis span.fail::before { background: #b84242; }
.wow-product-kpis strong { display: block; margin-bottom: 3px; color: var(--wow-ink); font-size: 1.1rem; line-height: 1; }

/* Market grid + collapsible market cards */
.wow-market-grid { display: grid; gap: 9px; margin-top: 14px; }
.wow-market-card {
  position: relative; overflow: hidden; padding: 0;
  border: 1px solid rgba(77, 157, 193, .16); border-radius: 12px; background: rgba(255, 255, 255, .6);
  /* 4px left rail kept transparent here so layouts stay consistent across all
     market cards; .status-pass fills it green to mark NCD regions. */
  border-left: 4px solid transparent;
}
.wow-market-card[open] { background: rgba(255, 255, 255, .78); }
.wow-market-card.status-pass { border-left-color: #2c9a68; }
/* NCD region cards are sealed — no expand/collapse, no marker, no pointer. */
.wow-market-card.status-pass .wow-market-card-head {
  cursor: default;
  grid-template-columns: minmax(0, 1fr) auto;
}
.wow-market-card.status-pass .wow-market-card-head::after { display: none; }
.wow-market-card-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 12px;
  align-items: center; min-height: 54px; padding: 12px 13px; cursor: pointer; list-style: none;
}
.wow-market-card-head::-webkit-details-marker { display: none; }
.wow-market-card-head::after {
  content: "+"; width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid rgba(77, 157, 193, .15); border-radius: 999px;
  color: var(--wow-ink-2, #153747); background: rgba(255, 255, 255, .72);
  font-size: 1rem; font-weight: 800;
}
.wow-market-card[open] .wow-market-card-head::after { content: "\2212"; }
.wow-market-card-head strong, .wow-market-card-head span { display: block; }
.wow-market-card-head strong { font-size: .93rem; font-weight: 800; }
.wow-market-card-head div > span { margin-top: 3px; color: var(--wow-ink-muted, #6b7c87); font-size: .74rem; line-height: 1.4; }

.wow-check-list { display: grid; gap: 6px; padding: 0 13px 13px; }
.wow-check-row {
  position: relative; display: block; min-height: 44px;
  padding: 9px 86px 9px 10px;
  border: 1px solid rgba(77, 157, 193, .1);
  border-left: 4px solid rgba(77, 157, 193, .18);
  border-radius: 10px; background: rgba(255, 255, 255, .56);
}
.wow-check-row.fail { border-color: rgba(184, 66, 66, .2); border-left-color: #b84242; }
.wow-check-row.warn { border-color: rgba(231, 161, 45, .22); border-left-color: var(--wow-amber, #d99a2b); }
.wow-check-row.pass { border-color: rgba(44, 154, 104, .16); border-left-color: #2c9a68; }
.wow-check-row strong { display: block; padding-right: 4px; font-size: .8rem; font-weight: 800; }
.wow-check-row span { display: block; margin-top: 4px; color: var(--wow-ink-muted, #6b7c87); font-size: .75rem; line-height: 1.35; }
.wow-check-row span b { color: var(--wow-ink); font-weight: 800; }
.wow-check-row em {
  position: absolute; top: 8px; right: 9px; min-width: 62px;
  border-radius: 999px; padding: 4px 8px; font-style: normal; font-size: .66rem; font-weight: 800; text-align: center;
}
.wow-check-row.pass em { color: #2c9a68; background: rgba(239, 249, 243, .84); }
.wow-check-row.warn em { color: #91620f; background: rgba(255, 249, 232, .84); }
.wow-check-row.fail em { color: #b84242; background: rgba(255, 244, 244, .82); }

/* Narrow viewports — collapse to a single column */
@media (max-width: 900px) {
  .wow-results-body { grid-template-columns: 1fr; }
  .wow-results-rail { position: static; }
  .wow-summary-strip { grid-template-columns: 1fr; }
  /* Market chips: drop the fixed equal-width grid and let each chip size to its
     own content + wrap. The grid forced long market names ("European Union")
     past their column and over the neighbouring chip on phones; content-width
     tags wrap cleanly and never overlap, regardless of market-name length. */
  .wow-portfolio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .wow-market-chip {
    flex: 0 0 auto;       /* never stretch or shrink — hug the content */
    padding: 7px 12px;    /* a touch more room so they read as tappable tags */
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   AI Visibility results page — Slice A (2026-05-28 styling pass)
   Mirrors docs/AiVisibility/AI Visibility Audit-Alex-Updates-May-28-2026/
   ai-visibility-wow-prototype.{html,css}. Foundation classes (wow-shell,
   wow-glass, wow-pill*, wow-kpi, wow-moves, wow-orbit-field, wow-eyebrow,
   wow-disclaimer-footer, wow-sheen keyframes) already exist above — these
   add only the AI-Visibility-specific layout, readiness instrument, check
   cards, quick-card grid, and platforms chips.
   ──────────────────────────────────────────────────────────────────────── */

.wow-ai-hero {
  position: relative;
  overflow: hidden;
  padding: 26px;
  margin-bottom: 18px;
}
.wow-ai-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.68) 38%, transparent 54%);
  transform: translateX(-120%);
  animation: wow-sheen 5.2s ease-in-out infinite;
}

.wow-ai-score-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.wow-ai-readiness {
  min-height: 252px;
  display: grid;
  align-content: center;
  gap: 20px;
  padding: 22px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 80% 18%, rgba(244, 215, 176, .36), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.48));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 46px rgba(16,25,35,.1);
}
.wow-ai-readiness-head { display: grid; gap: 7px; }
.wow-ai-readiness-head span {
  color: var(--wow-graphite);
  font-size: .7rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase;
}
.wow-ai-readiness-head strong {
  display: block;
  color: var(--wow-amber);
  font-size: 2.75rem; line-height: .95; font-weight: 950;
}
.wow-ai-readiness-head em {
  color: #344b59;
  font-size: .82rem; font-style: normal; font-weight: 760;
}
/* Readiness label tints by state (Excellent/Strong=green, Moderate=amber,
   Weak=orange, Critical=red). Amber is the default in the prototype. */
.wow-ai-readiness-head.is-pass strong { color: #2c9a68; }
.wow-ai-readiness-head.is-warn strong { color: var(--wow-amber); }
.wow-ai-readiness-head.is-hot  strong { color: var(--wow-orange); }
.wow-ai-readiness-head.is-fail strong { color: #b84242; }

.wow-ai-signal-rail {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
}
.wow-ai-signal-rail span {
  height: 11px;
  border-radius: 99px;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 0 0 1px rgba(77,157,193,.16);
}
.wow-ai-signal-rail .is-pass { background: #2c9a68; box-shadow: 0 0 14px rgba(44,154,104,.28); }
.wow-ai-signal-rail .is-warn { background: var(--wow-amber); box-shadow: 0 0 14px rgba(217,154,43,.28); }
.wow-ai-signal-rail .is-fail { background: #b84242; box-shadow: 0 0 14px rgba(184,66,66,.28); }
.wow-ai-signal-rail .is-info { background: var(--wow-blue-2, #78c6dd); box-shadow: 0 0 14px rgba(77,157,193,.34); }

.wow-ai-readiness-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wow-ai-readiness-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(77,157,193,.13);
  border-radius: 15px;
  background: rgba(255,255,255,.54);
  overflow: hidden;
}
.wow-ai-readiness-metrics small,
.wow-ai-readiness-metrics b { display: block; }
.wow-ai-readiness-metrics small {
  color: var(--wow-graphite);
  font-size: .64rem; font-weight: 900; letter-spacing: .08em; line-height: 1.18;
  text-transform: uppercase; white-space: nowrap;
}
.wow-ai-readiness-metrics b {
  margin-top: 4px;
  color: var(--wow-ink);
  font-size: .86rem; line-height: 1.1; font-weight: 900;
}

.wow-ai-narrative h2 {
  margin: 0 0 10px;
  color: var(--wow-ink);
  font-size: 1.75rem; line-height: 1.15; font-weight: 920;
}
.wow-ai-narrative p {
  max-width: 820px;
  margin: 0 0 18px;
  color: #344b59;
  font-size: .98rem; line-height: 1.65;
}

/* Prototype KPI accent rail + tint variants — augments the existing
   .wow-kpi base class (it has no left rail in the global definition). */
.wow-kpi {
  position: relative;
  overflow: hidden;
  min-height: 82px;
  padding: 14px 14px 14px 17px;
}
.wow-kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 13px; bottom: 13px;
  width: 4px;
  border-radius: 0 99px 99px 0;
  background: var(--wow-blue, #4d9dc1);
  box-shadow: 0 0 16px rgba(77,157,193,.3);
}
.wow-kpi-pass {
  background:
    linear-gradient(135deg, rgba(238,248,242,.78), rgba(255,255,255,.48)),
    rgba(255,255,255,.52);
}
.wow-kpi-pass::before { background: #2c9a68; box-shadow: 0 0 16px rgba(44,154,104,.28); }
.wow-kpi-warn {
  background:
    linear-gradient(135deg, rgba(255,251,235,.82), rgba(255,255,255,.5)),
    rgba(255,255,255,.52);
}
.wow-kpi-warn::before { background: var(--wow-amber, #d99a2b); box-shadow: 0 0 16px rgba(217,154,43,.28); }
.wow-kpi-hot {
  background:
    linear-gradient(135deg, rgba(255,241,235,.78), rgba(255,255,255,.5)),
    rgba(255,255,255,.52);
}
.wow-kpi-hot::before { background: var(--wow-orange); box-shadow: 0 0 16px rgba(255,90,31,.28); }
/* Override the global .wow-kpi strong size — prototype is 1.15rem, not 1.4rem */
.wow-kpi strong { font-size: 1.15rem; line-height: 1.18; }

.wow-ai-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: start;
}
.wow-ai-section-stack { display: grid; gap: 18px; }

.wow-ai-section { padding: 20px; }
.wow-ai-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}
.wow-ai-section h2 {
  margin: 10px 0 0;
  color: var(--wow-ink);
  font-size: 1.2rem; line-height: 1.25; font-weight: 920;
}
.wow-ai-section-intro {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(77,157,193,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.48);
  color: #405664;
  font-size: .84rem; line-height: 1.5;
}

.wow-ai-check-list { display: grid; gap: 10px; }

.wow-ai-check-card {
  position: relative;
  display: grid;
  gap: 11px;
  padding: 15px 16px;
  border: 1px solid rgba(77, 157, 193, .14);
  border-left: 4px solid rgba(77, 157, 193, .22);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.46)),
    rgba(255,255,255,.58);
  box-shadow: 0 12px 30px rgba(16, 25, 35, .055);
}
.wow-ai-check-card.pass { border-left-color: #2c9a68; }
.wow-ai-check-card.warn { border-left-color: var(--wow-amber, #d99a2b); }
.wow-ai-check-card.fail { border-left-color: #b84242; }
.wow-ai-check-card.info { border-left-color: var(--wow-blue, #4d9dc1); }

.wow-ai-check-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wow-ai-check-top strong {
  color: var(--wow-ink);
  font-size: .95rem; line-height: 1.25; font-weight: 900;
}

.wow-ai-explain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.wow-ai-label {
  color: var(--wow-graphite);
  font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.wow-ai-copy {
  margin-top: 4px;
  color: #344b59;
  font-size: .84rem; line-height: 1.5;
}

.wow-ai-found {
  padding-top: 11px;
  border-top: 1px dashed rgba(77,157,193,.2);
}
.wow-ai-found ul {
  margin: 7px 0 0;
  padding-left: 18px;
  color: #344b59;
  font-size: .84rem; line-height: 1.55;
}

.wow-ai-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wow-ai-quick-card {
  position: relative;
  min-width: 0;
  padding: 14px 14px 14px 17px;
  border: 1px solid rgba(77, 157, 193, .13);
  border-left: 4px solid var(--wow-blue, #4d9dc1);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.46)),
    rgba(255,255,255,.54);
  box-shadow: 0 10px 24px rgba(16, 25, 35, .045);
}
.wow-ai-quick-card.pass { border-left-color: #2c9a68; }
.wow-ai-quick-card.warn { border-left-color: var(--wow-amber, #d99a2b); }
.wow-ai-quick-card.info { border-left-color: var(--wow-blue, #4d9dc1); }
.wow-ai-quick-card strong {
  display: block;
  color: var(--wow-ink);
  font-size: .9rem; line-height: 1.25; font-weight: 900;
}
.wow-ai-quick-card p {
  margin: 6px 0 10px;
  color: #405664;
  font-size: .8rem; line-height: 1.45;
}
.wow-ai-quick-card span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(77,157,193,.14);
  border-radius: 999px;
  padding: 0 9px;
  color: var(--wow-graphite);
  background: rgba(255,255,255,.58);
  font-size: .66rem; font-weight: 850;
}

.wow-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.wow-platform {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(77,157,193,.12);
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(255,255,255,.52);
  color: #344b59;
  font-size: .8rem; font-weight: 780;
}

/* Slice D — moves rail evidence trace ("Generated from: …") line under
   each High-Impact Move card. Subtle by design — the move itself is the
   message; the trace just keeps the recommendation accountable. */
.wow-move-source {
  margin-top: 9px;
  color: var(--wow-graphite);
  font-size: .72rem;
  font-style: italic;
  line-height: 1.4;
}

/* Collapse the AI results page to a single column on narrow viewports. */
@media (max-width: 1050px) {
  .wow-ai-score-layout,
  .wow-ai-results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wow-ai-hero,
  .wow-ai-section { padding: 18px; border-radius: 22px; }
  .wow-ai-explain-grid,
  .wow-ai-quick-grid,
  .wow-platforms { grid-template-columns: 1fr; }
}