/* ===== OHM. Labs — Audit (harmonized with Let's Talk) ===== */
:root{
  --ohm-green:#00FF8C;
  --ohm-purple:#A882DD;
  --ohm-fg:#EDEDED;
  --ohm-dim:#CFCFCF;
  --ohm-muted:#9A9A9A;
  --ohm-border:rgba(255,255,255,.20);
  --ohm-border-strong:rgba(255,255,255,.30);
}

/* Match Let's-Talk hero spacing */
:is(.ohm-ct-shell, .ohm-audit-shell){ padding: clamp(56px, 7vw, 96px) 0; }

.ohm-audit-grid--split{ display:grid; grid-template-columns:minmax(320px,520px) 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
@media (max-width:991px){ .ohm-audit-grid--split{ grid-template-columns:1fr; } }
.ohm-audit-left{ padding-right:clamp(8px,1.5vw,16px); }
.ohm-audit-display{ font-family:"ClashDisplay-Bold","Clash Display",system-ui,sans-serif; font-weight:800; letter-spacing:0em; line-height:1.08; font-size:clamp(28px,5.2vw,48px); color:#fff; margin:0 0 14px; text-align: left;}
.ohm-audit-lead{ font:400 16px/1.6 "Archivo",system-ui,sans-serif; color:var(--ohm-dim); max-width:52ch; margin:0 0 10px; }

/* Typeform-like flow */
.flow{ max-width:720px; margin:0 auto; min-height: clamp(480px,56vh,640px); display:block; position:relative; }
.flow__progress{ font:600 13px/1.2 "Archivo",system-ui,sans-serif; color:var(--ohm-muted); text-align:right; margin-bottom:12px; }

.flow__step{ display:none; background:rgba(255,255,255,.06); border:1px solid var(--ohm-border); border-radius:18px; padding:22px 22px 30px; box-shadow:0 10px 30px -18px rgba(0,0,0,.6); }
.flow__step + .flow__step{ margin-top:16px; }
.flow__step.is-active{ display:block; animation:fadeIn .24s ease-out; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

.flow__label{ display:block; color:#fff; font-family:"ClashDisplay-Bold","Clash Display",system-ui,sans-serif; font-weight:800; letter-spacing:0em; line-height:1.08; font-size:clamp(20px,3.5vw,30px); margin:0 0 14px; }

.flow__input{ width:100%; background:transparent; color:var(--ohm-fg); border:0; border-bottom:1px solid var(--ohm-border-strong); padding:18px 0 14px; font:400 clamp(18px,2.2vw,22px)/1.3 "Archivo",system-ui,sans-serif; transition:border-color .2s ease, color .2s ease; }
.flow__input::placeholder{ color:#D8D8D8; }
.flow__input:focus{ outline:none; border-bottom-color:#fff; color:#fff; }

.flow__options{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 10px; }
.flow__chip{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; cursor:pointer; user-select:none; color:#F2F2F2; box-shadow: inset 0 0 0 1.5px var(--ohm-border-strong); background: rgba(255,255,255,.02); transition: box-shadow .18s ease, background-color .18s ease, color .18s ease, filter .18s ease; }
.flow__chip:hover{ box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.flow__chip input{ accent-color: var(--ohm-green); }
label.flow__chip:has(input:checked){ background: linear-gradient(90deg,var(--ohm-green),var(--ohm-purple)); color:#111; box-shadow:none; }

.flow__two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:576px){ .flow__two{ grid-template-columns:1fr; } }

/* Solid green buttons */
.ohm-btn--gradient, .flow__next, .done .ohm-btn--gradient{
  background: var(--ohm-green) !important; color:#0e0e0e !important; border:none;
  box-shadow:0 8px 24px rgba(0,255,140,.25);
}
.flow__next{ margin-top:14px; border-radius:999px; padding:12px 18px; font:700 13px/1 "Archivo",system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.ohm-btn--gradient:hover, .flow__next:hover, .done .ohm-btn--gradient:hover{ filter:brightness(.95); }

/* Helper link readable */
.flow__alt, .flow__alt:visited{ color: var(--ohm-green); }
.flow__alt:hover{ color:#ffffff; text-decoration: underline; }

/* Dark dropdown (match Let's-Talk) */
.flow .flow__select{ color:#fff; background:transparent; color-scheme: dark; appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:28px; }
.flow .flow__select option, .flow .flow__select optgroup{ background:#1C1C1C !important; color:#fff !important; }
.flow .flow__select option:hover, .flow .flow__select option:checked{ background:#2a2a2a !important; color:#fff !important; }
.flow .flow__select option[disabled][hidden]{ display:none; }

/* Consent checkbox styled green */
.flow__consent{ display:flex; align-items:center; gap:10px; margin-top:14px; font:600 13.5px/1.4 "Archivo",system-ui,sans-serif; letter-spacing:.02em; color:var(--ohm-fg); opacity:.95; }
.flow__consent a{ color: var(--ohm-green); text-decoration:none; border-bottom:1px dotted rgba(0,255,140,.45); }
.flow__consent a:hover{ text-decoration:underline; }
.flow__consent input[type="checkbox"]{ appearance:none; -webkit-appearance:none; -moz-appearance:none; width:18px; height:18px; border-radius:4px; border:1.5px solid rgba(255,255,255,.55); background:transparent; display:inline-grid; place-content:center; cursor:pointer; }
.flow__consent input[type="checkbox"]::before{ content:""; width:12px; height:12px; transform:scale(0); transition:transform .15s ease-in-out; background:var(--ohm-green); clip-path: polygon(14% 44%, 0 59%, 50% 100%, 100% 18%, 85% 6%, 46% 71%); }
.flow__consent input[type="checkbox"]:checked{ border-color: rgba(0,255,140,.85); background: rgba(0,255,140,.12); }
.flow__consent input[type="checkbox"]:checked::before{ transform:scale(1); }


/* === UX polish 2025: final step spacing & headings === */

/* 1) Never uppercase question titles; ensure left-aligned */
.flow__label{
  text-transform: none !important;
  text-align: left;
}

/* 2) Final (Done) step: balanced vertical rhythm */
.flow [data-step="done"]{
  padding: 28px 28px 32px;
}
.flow [data-step="done"] .flow__label{
  /* Keep on one line, left-aligned */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(24px, 4.2vw, 36px);
  margin: 0 0 14px;
  color: #fff;
}
.flow [data-step="done"] p{
  margin: 0 0 18px;
  line-height: 1.55;
}
.flow [data-step="done"] .ohm-btn--gradient{
  margin-top: 8px;
}

/* 3) Mobile adjustments: keep title single-line and spacing comfortable */
@media (max-width: 576px){
  .flow [data-step="done"]{
    padding: 24px 18px 26px;
  }
  .flow [data-step="done"] .flow__label{
    font-size: clamp(20px, 6vw, 28px);
  }
  .flow [data-step="done"] p{
    margin-bottom: 16px;
  }
}

/* audit.css (place after Bootstrap + your core styles) */
@media (min-width: 992px) {
  .ohm-audit-shell > .container {
    padding-top: 64px !important;
  }
}

/* Final-step title — no truncation, wrap nicely on all viewports */
.flow [data-step="done"] .flow__label{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-wrap: balance;           /* nicer multi-line breaks in modern browsers */
}

/* === Audit glow background ============================================== */
.ohm-audit-shell{
  position: relative;
  isolation: isolate;
  overflow: hidden; /* ensures glows never bleed into the footer */
}

.ohm-glow-layer{
  position: absolute;
  inset: 0;
  z-index: 0;           /* behind form/content */
  pointer-events: none;
}

.ohm-glow-layer .glow{
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  width:  var(--s, 40vw);
  height: var(--s, 40vw);
  translate: var(--mx,0) var(--my,0);
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  mix-blend-mode: screen;      /* lovely additive look on dark bg */
  transform: translate3d(0,0,0);
  animation: drift var(--t, 18s) ease-in-out infinite alternate;
}

/* Brand colors (A882DD, 00FF8C, FF0A85) with soft radial falloff */
.ohm-glow-layer .g-purple{
  --col: #A882DD;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--col), white 12%) 0%, rgba(168,130,221,.15) 60%, transparent 75%);
}
.ohm-glow-layer .g-green{
  --col: #00FF8C;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--col), white 8%) 0%, rgba(0,255,140,.14) 60%, transparent 75%);
}
.ohm-glow-layer .g-pink{
  --col: #FF0A85;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--col), white 10%) 0%, rgba(255,10,133,.16) 60%, transparent 75%);
}

/* Slow organic drifting */
@keyframes drift{
  0%   { transform: translate3d(-8px, -6px, 0) scale(1);   }
  50%  { transform: translate3d( 6px,  8px, 0) scale(1.05);}
  100% { transform: translate3d(10px, -4px, 0) scale(1.02);}
}

/* Performance & readability tweaks (smaller screens) */
@media (max-width: 768px){
  .ohm-glow-layer .glow{
    filter: blur(48px);
    opacity: 1;
    --s: 55vw;
  }
}

@media (max-width: 768px){
  .ohm-glow-layer .glow{
    mix-blend-mode: lighten; /* 'screen' can look extra faint on OLED blacks */
  }
  .ohm-glow-layer .g-purple{
    background: radial-gradient(50% 50% at 50% 50%,
      rgba(168,130,221,.45) 0%, rgba(168,130,221,.18) 55%, transparent 75%);
  }
  .ohm-glow-layer .g-green{
    background: radial-gradient(50% 50% at 50% 50%,
      rgba(0,255,140,.40) 0%, rgba(0,255,140,.16) 55%, transparent 75%);
  }
  .ohm-glow-layer .g-pink{
    background: radial-gradient(50% 50% at 50% 50%,
      rgba(255,10,133,.40) 0%, rgba(255,10,133,.17) 55%, transparent 75%);
  }
}