:root {
  color-scheme: dark;
  --background: #090d0a;
  --surface: #111913;
  --surface-strong: #151f17;
  --line: #2a3b2d;
  --text: #f4faf3;
  --muted: #aebdaf;
  --green: #a5d953;
  --green-bright: #c1f57c;
  --green-dark: #243817;
  --ink: #142009;
  --radius: 22px;
  font: 400 15px/1.55 "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--background); color: var(--text); }
button, input { font: inherit; }
a { color: var(--green-bright); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 5px; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 1.34rem; line-height: 1.2; letter-spacing: -.025em; }
h3 { font-size: .97rem; line-height: 1.3; }

.sr-only, .skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  position: fixed;
  z-index: 4;
  inset: 12px auto auto 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-strong);
}

.site-bar { border-bottom: 1px solid #222d24; background: #0d120e; }
.site-bar-inner, .workspace, .site-footer {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
}
.site-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  gap: 18px;
}
.wordmark {
  color: var(--text);
  text-decoration: none;
  font-size: 1.47rem;
  font-weight: 780;
  letter-spacing: -.055em;
}
.wordmark span { color: var(--green-bright); }
.store-label { display: flex; align-items: center; justify-content: end; gap: 12px; }
.store { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.mode {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  color: #d2eca8;
  background: #1a2514;
  border: 1px solid #415631;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 650;
}
.mode::before, .charger-dot, .provider[data-state="connected"] .provider-state::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 9px #a5d95362;
  content: "";
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  min-height: 340px;
  margin-block: 30px 20px;
  border: 1px solid #324737;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 81% 26%, #233d229c 0%, transparent 55%),
    linear-gradient(125deg, #111b14, #101811 54%, #101e11);
  box-shadow: inset 0 1px #d7fdd916, 0 24px 58px #0005;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; padding: clamp(30px, 5vw, 64px); padding-right: 0; }
.eyebrow {
  margin-bottom: 15px;
  color: var(--green-bright);
  font: 650 .75rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 11ch;
  font-size: clamp(2.55rem, 5.45vw, 4.65rem);
  line-height: .99;
  font-weight: 730;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.hero-copy > p:last-child { max-width: 47ch; margin-top: 20px; color: #c0cfc2; }
.charger {
  --charge: .24;
  --tilt: -13deg;
  position: relative;
  display: grid;
  align-self: stretch;
  justify-items: center;
  align-items: center;
  min-width: 0;
  min-height: 248px;
  perspective: 650px;
  isolation: isolate;
}
.charger-grid {
  position: absolute;
  z-index: -1;
  inset: 18px -30px 12px -80px;
  background:
    repeating-linear-gradient(90deg, #a4dc6630 0 1px, transparent 1px 35px),
    repeating-linear-gradient(0deg, #a4dc6630 0 1px, transparent 1px 35px);
  mask-image: radial-gradient(ellipse, #000 4%, transparent 66%);
  transform: rotateX(52deg) rotateZ(-15deg) scale(1.25);
}
.circuit {
  position: absolute;
  z-index: -1;
  width: 30%;
  height: 23%;
  border-color: #74ae5482;
  border-style: solid;
  transform: skewY(-13deg);
}
.circuit::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #82ad62;
  border-radius: 50%;
  background: #162717;
  content: "";
}
.circuit-one { top: 26%; left: 0; border-width: 1px 1px 0 0; }
.circuit-one::after { left: -3px; top: -4px; }
.circuit-two { top: 48%; right: 1%; border-width: 0 0 1px 1px; }
.circuit-two::after { right: -3px; bottom: -4px; }
.circuit-three { width: 16%; height: 16%; left: 13%; top: 60%; border-width: 0 1px 1px 0; }
.circuit-three::after { left: -3px; bottom: -4px; }
.battery {
  position: relative;
  display: grid;
  align-items: stretch;
  width: clamp(156px, 28vw, 302px);
  height: clamp(82px, 14vw, 138px);
  margin-right: 25px;
  padding: 12px;
  border: 1px solid #c9ff9d;
  border-radius: 22px;
  background: linear-gradient(135deg, #405a3c6c, #0c1c1020 50%, #667f537a);
  box-shadow:
    inset 0 0 0 4px #c1f57c25, inset 0 0 26px #92e66229,
    0 13px 0 -6px #304e2a, 0 18px 0 -7px #182f15, 0 28px 35px #000b, 0 0 45px #a5d95325;
  transform: rotateY(-15deg) rotateZ(var(--tilt));
}
.battery::after {
  position: absolute;
  z-index: -1;
  inset: 32% -20px 32% auto;
  width: 20px;
  border: 1px solid #a5d18e;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(160deg, #b8ed84, #4b7643 35%, #253a22 90%);
  box-shadow: 0 7px 8px #0008;
  content: "";
}
.battery-charge {
  border-radius: 12px;
  background:
    linear-gradient(118deg, #f2ffd330, transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 calc(20% - 3px), #162a1680 calc(20% - 3px) 20%),
    linear-gradient(90deg, #70b341, #beff6c);
  box-shadow: 0 0 25px #a2f36975, inset 0 0 18px #e1ffc99e;
  transform: scaleX(var(--charge));
  transform-origin: left;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.battery-glass {
  position: absolute;
  inset: 4px;
  border: 1px solid #dbffbb21;
  border-radius: 18px;
  background: linear-gradient(160deg, #ddffd23b, transparent 45%, #d6ffcc12 73%, transparent);
  pointer-events: none;
}
.charger-readout {
  position: absolute;
  inset: auto 10px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  color: #d5eaca;
  font: 550 .72rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  text-align: center;
}
.charger[data-phase="ready"] { --charge: .4; }
.charger[data-phase="auditing"] { --charge: .52; }
.charger[data-phase="queued"] { --charge: .60; }
.charger[data-phase="running"] { --charge: .81; }
.charger[data-phase="verifying"] { --charge: .94; }
.charger[data-phase="complete"] { --charge: 1; }
.charger[data-phase="auditing"] .battery, .charger[data-phase="running"] .battery,
.charger[data-phase="verifying"] .battery {
  animation: energise 2.6s ease-in-out infinite;
}
.charger[data-phase="running"] .circuit, .charger[data-phase="verifying"] .circuit {
  animation: circuit-pulse 1.65s ease-in-out infinite;
}
.charger[data-phase="running"] .circuit-two { animation-delay: .4s; }
.charger[data-phase="running"] .circuit-three { animation-delay: .8s; }
.vapour {
  position: absolute;
  z-index: 1;
  top: 27%;
  left: 38%;
  width: 36%;
  height: 40%;
  opacity: 0;
  background: radial-gradient(ellipse at 34% 60%, #d8f9c779, transparent 51%),
              radial-gradient(ellipse at 73% 48%, #d9f1e46c, transparent 45%);
  filter: blur(12px);
  pointer-events: none;
}
.charger[data-phase="complete"] .vapour { animation: cool 3.2s ease-out both; }
@keyframes energise {
  50% { filter: brightness(1.28); transform: rotateY(-10deg) rotateZ(var(--tilt)) translateY(-5px); }
}
@keyframes circuit-pulse {
  50% { border-color: #c8ff91; filter: drop-shadow(0 0 8px #a3ff5b); }
}
@keyframes cool {
  25% { opacity: .7; }
  100% { opacity: 0; transform: translate(26px, -43px) scale(1.55); }
}

.dashboard { display: grid; grid-template-columns: minmax(250px, .85fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px #effff308; }
.connection-panel, .stage { padding: clamp(18px, 2.5vw, 28px); }
.card-heading > p { margin-top: 8px; color: var(--muted); }
.provider-list { display: grid; gap: 10px; margin-block: 22px 18px; }
.provider {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid #314236;
  border-radius: 13px;
  background: #151f17;
}
.provider-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #48643c;
  border-radius: 9px;
  color: #c2ed95;
  background: #1d2c1b;
  font-size: .84rem;
  font-weight: 750;
}
.provider[data-provider="google"] .provider-icon { color: #a9c7ff; border-color: #3c577a; background: #1e2c3b; }
.provider[data-provider="bing"] .provider-icon { color: #89e3d3; border-color: #3b635c; background: #1b302c; }
.provider[data-state="connected"] .provider-state::before { margin-right: 7px; vertical-align: .11em; }
.provider-main { min-width: 0; }
.provider-state, .provider-property { margin-top: 3px; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.provider-property { color: #c1d7bd; }
.provider-link { justify-self: end; font-size: .79rem; font-weight: 700; }
.provider-finding { grid-column: 1 / -1; color: #cfdecf; font-size: .8rem; }
.provider-finding summary { color: var(--green-bright); }
.provider-finding p { margin-top: 6px; }
.provider.pulse { animation: provider-flash 1.7s ease-out; }
@keyframes provider-flash {
  18% { border-color: #b8f179; box-shadow: 0 0 24px #a5d95362, inset 0 0 21px #a5d9533d; }
}
.connection-help { color: var(--muted); font-size: .85rem; }
.connection-help summary { color: #e2eee0; font-weight: 650; }
.connection-help ol { margin: 10px 0 0; padding-left: 20px; }
.connection-help li + li { margin-top: 6px; }
summary { cursor: pointer; }
.stages { display: grid; gap: 16px; min-width: 0; }
.notice { padding: 10px 13px; border: 1px solid #3b5736; border-radius: 11px; background: #1a281a; color: #d7efcb; }
.notice:empty { display: none; }
.notice[data-kind="error"] { border-color: #7e5742; background: #2e1f19; color: #ffdac7; }
.section-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  min-height: 43px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.button-primary { background: var(--green); color: var(--ink); border-color: #b4e969; }
.button-primary:not(:disabled):hover { background: var(--green-bright); }
.button-secondary { background: #18241a; color: #e0ebdf; border-color: #3a4e3c; }
.button-secondary:not(:disabled):hover { background: #253627; }
.button:disabled { opacity: .52; }
#run-audit { flex: none; }
.inline-note { margin-top: 14px; padding: 10px 12px; border-radius: 9px; background: #1b291c; color: #d4e2d1; font-size: .88rem; }
.audit-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 21px;
  padding: 13px 16px;
  border: 1px solid #3a5436;
  border-radius: 13px;
  background: linear-gradient(120deg, #24391d, #19271a);
}
.score {
  color: var(--green-bright);
  font-size: clamp(1.8rem, 5vw, 2.9rem);
  font-weight: 730;
  letter-spacing: -.06em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.score[data-unavailable="true"] { font-size: 1.12rem; letter-spacing: -.015em; }
.coverage { color: #e3f1e0; font-weight: 650; }
.muted { color: var(--muted); }
.audit-summary .muted { margin-top: 4px; font-size: .86rem; }
.findings, .timeline { margin: 15px 0 0; padding: 0; list-style: none; }
.findings li { padding-block: 11px; border-top: 1px solid #2d3d30; }
.findings li:last-child { padding-bottom: 0; }
.findings p { margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }
.change-preview { margin-top: 17px; }
.change-preview summary { color: var(--green-bright); font-weight: 700; }
.approval { display: flex; align-items: flex-start; gap: 10px; margin-top: 17px; color: #e4eee3; cursor: pointer; }
.approval input { flex: none; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--green); }
.packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 16px; }
.package {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 15px;
  border: 1px solid #3c523b;
  border-radius: 13px;
  background: var(--surface-strong);
}
.package[data-package="super"] { border-color: #6a8f48; background: linear-gradient(145deg, #26391b, #182518); }
.package-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 8px; }
.package-price { color: var(--green-bright); font-size: 1.3rem; font-weight: 740; }
.package-desc, .package-reason { color: var(--muted); font-size: .84rem; }
.package-reason { color: #dfedc2; }
.package .button { justify-self: start; margin-top: 5px; }
#confirm-payment { margin-top: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.job-state { color: var(--green-bright) !important; font-weight: 700; }
.working-indicator {
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid #426236;
  border-right-color: var(--green-bright);
  border-radius: 50%;
  animation: turn 1.1s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }
.timeline li { position: relative; padding: 0 0 12px 22px; color: #d3e0d1; }
.timeline li::before {
  position: absolute;
  z-index: 1;
  width: 7px;
  height: 7px;
  top: .55em;
  left: 2px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}
.timeline li:not(:last-child)::after {
  position: absolute;
  width: 1px;
  top: .6em;
  bottom: -.55em;
  left: 5px;
  background: #486842;
  content: "";
}
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-block: 16px; }
.comparison > div { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #152017; }
.comparison > div:last-child { border-color: #557546; background: #20341d; }
.comparison h3 { margin-bottom: 8px; color: var(--muted); }
#report:not([hidden]) .comparison > div:last-child { animation: reveal-score 680ms ease-out both; }
@keyframes reveal-score {
  from { opacity: .5; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.verified-fields { margin-top: 14px; }
.session-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .87rem; }
.session-bar button { flex: none; }
.site-footer { margin-block: 27px 34px; padding-top: 15px; border-top: 1px solid #263329; font-size: .82rem; }
.site-footer a { color: var(--muted); }

@media (max-width: 820px) {
  .site-bar-inner, .workspace, .site-footer { width: min(100% - 36px, 1180px); }
  .hero { min-height: 288px; }
  .hero h1 { font-size: clamp(2.6rem, 7vw, 4rem); }
  .dashboard { grid-template-columns: 1fr; }
  .provider-list { grid-template-columns: repeat(3, 1fr); }
  .provider { grid-template-columns: auto 1fr; }
  .provider-link { justify-self: start; grid-column: 2; }
}
@media (max-width: 590px) {
  .site-bar-inner, .workspace, .site-footer { width: calc(100% - 28px); }
  .site-bar-inner { min-height: 62px; }
  .store-label { gap: 5px; align-items: end; flex-direction: column; font-size: .78rem; }
  .mode { padding: 3px 8px; font-size: .69rem; }
  .hero { grid-template-columns: 1fr; margin-top: 17px; border-radius: 21px; }
  .hero-copy { padding: 25px 23px 0; }
  .hero h1 { font-size: clamp(2.52rem, 10vw, 3.55rem); }
  .hero-copy > p:last-child { margin-top: 14px; }
  .charger { min-height: 177px; }
  .battery { width: clamp(155px, 41vw, 208px); height: clamp(74px, 18vw, 90px); border-radius: 16px; margin-bottom: 19px; padding: 9px; }
  .battery-glass { border-radius: 13px; }
  .charger-readout { bottom: 13px; }
  .circuit-one { left: 6%; }
  .circuit-two { right: 6%; }
  .provider-list { grid-template-columns: 1fr; }
  .provider { grid-template-columns: auto 1fr auto; }
  .provider-link { justify-self: end; grid-column: auto; }
  .audit-summary { grid-template-columns: 1fr; gap: 9px; }
  .packages { grid-template-columns: 1fr; }
  .section-top:not(.progress-heading) { flex-wrap: wrap; }
  .session-bar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}