/* VoltGuard marketing site. Dark-only surface, built on theme.css + base.css. */

/* ------------------------------------------------------------- header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  border-block-end: 1px solid var(--color-border-default);
  background: color-mix(in oklab, var(--color-surface-page) 82%, transparent);
  backdrop-filter: blur(var(--blur-md));
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-block-size: var(--size-control-lg);
  padding-block: var(--space-3);
}
.site-nav { display: none; gap: var(--space-5); }
.site-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-block: var(--space-2);
}
.site-nav a:hover { color: var(--color-text-primary); }

@media (min-width: 900px) {
  .site-nav { display: flex; }
}

/* Headline with a light-to-shadow fill, the way the reference sites do it.
   Falls back to plain text colour where background-clip is unsupported. */
.display--gradient {
  background: linear-gradient(180deg,
              var(--color-text-primary) 0%,
              color-mix(in oklab, var(--color-text-primary) 55%, transparent) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .display--gradient { color: var(--color-text-primary); -webkit-text-fill-color: currentColor; }
}

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-20) var(--space-24);
  border-block-end: 1px solid var(--color-border-default);
}
/* The one decorative flourish on the page, derived from the action colour. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline: -10%;
  block-size: 80%;
  background: radial-gradient(50% 60% at 50% 40%,
              color-mix(in oklab, var(--color-action-primary) 16%, transparent),
              transparent 72%);
  pointer-events: none;
}
/* A faint grid, so the dark ground has depth instead of being flat black. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-text-primary) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-text-primary) 4%, transparent) 1px, transparent 1px);
  background-size: 4rem 4rem;
  /* The mask only reads alpha, so any opaque colour works - take a token. */
  mask-image: radial-gradient(70% 60% at 50% 30%,
              var(--color-text-primary) 0%, transparent 75%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-16); }
}
.hero__copy > * + * { margin-block-start: var(--space-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* --------------------------------------------------- app window mockup */
.mock {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.mock__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border-default);
  background: var(--color-surface-sunken);
}
.mock__dot {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  opacity: var(--opacity-disabled);
}
.mock__title {
  margin-inline-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border-default);
  background: var(--color-surface-raised);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.mock__body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .mock__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.mock__doc {
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border-inline-end: 1px solid var(--color-border-default);
}
.mock__page {
  background: var(--color-surface-document);
  border-radius: var(--radius-xs);
  padding: var(--space-4);
  min-block-size: 11rem;
}
.mock__line {
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-text-disabled);
  opacity: var(--opacity-disabled);
}
.mock__line + .mock__line { margin-block-start: var(--space-2); }
.mock__line--short { inline-size: 55%; }
.mock__line--mid { inline-size: 75%; }
.mock__line--hit {
  background: var(--color-field-highlight);
  opacity: 1;
  inline-size: 65%;
}
.mock__fields { padding: var(--space-4); }
.mock__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.mock__field + .mock__field { border-block-start: 1px solid var(--color-border-default); }
.mock__field dt {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.mock__field dd {
  margin: 0;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mock__ok { color: var(--color-feedback-success-icon); }
.mock__warn { color: var(--color-feedback-warning-icon); }

/* ------------------------------------------------------- trust strip */
.trust {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-block-end: 1px solid var(--color-border-default);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.trust__item .icon { color: var(--color-text-tertiary); }

/* ------------------------------------------------------------- blocks */
.section__head { max-inline-size: var(--size-measure); }
.section__head > * + * { margin-block-start: var(--space-4); }
.section__head + * { margin-block-start: var(--space-12); }

/* Deliberately not four equal tiles: the first problem card leads. */
.problems { display: grid; gap: var(--space-5); }
@media (min-width: 860px) {
  .problems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .problems > :first-child { grid-column: span 3; }
}
.problem__title { margin-block-end: var(--space-2); }
.problems .card,
.safety__item,
.faq__item {
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.problems .card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-0.125rem);
}
.safety__item:hover .safety__icon { border-color: var(--color-action-primary); }

/* ------------------------------------------------------------- steps */
.steps { display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}
.step { position: relative; padding-block-start: var(--space-8); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: var(--size-icon-lg);
  block-size: var(--size-icon-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-surface-page);
}
.step::after {
  content: "";
  position: absolute;
  inset-block-start: 0.72rem;
  inset-inline-start: var(--size-icon-lg);
  inline-size: calc(100% - var(--size-icon-lg));
  block-size: 1px;
  background: var(--color-border-default);
}
.steps > .step:last-child::after { display: none; }
@media (max-width: 859px) {
  .step::after { display: none; }
}
.step h3 { margin-block-end: var(--space-2); }

/* ------------------------------------------------------------ safety */
.safety {
  background: var(--color-surface-sunken);
  border-block: 1px solid var(--color-border-default);
}
.safety__grid { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .safety__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .safety__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.safety__item { display: flex; gap: var(--space-4); }
.safety__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--size-control-md);
  block-size: var(--size-control-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-action-primary);
}
.safety__item h3 { margin-block-end: var(--space-2); }

/* --------------------------------------------------------- stop demo */
.stopdemo { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 960px) { .stopdemo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } }

.alertcard {
  border: 1px solid var(--color-feedback-error-border);
  border-radius: var(--radius-lg);
  background: var(--color-feedback-error-bg);
  overflow: hidden;
}
.alertcard__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-feedback-error-border);
  color: var(--color-feedback-error-text);
  font-weight: var(--weight-semibold);
}
.alertcard__body { padding: var(--space-5); background: var(--color-surface-card); }
.alertcard__body > * + * { margin-block-start: var(--space-4); }
.candidates { display: grid; gap: var(--space-3); }
@media (min-width: 480px) { .candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.candidate {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-inline-size: 0;
}
.candidate__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-block-end: var(--space-1);
}
.candidate__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- faq */
.faq { display: grid; gap: var(--space-3); max-inline-size: 48rem; }
.faq__item {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
}
.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  min-block-size: var(--size-tap-min);
  cursor: pointer;
  font-weight: var(--weight-medium);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--color-interactive-hover-overlay); }
.faq__q .icon { margin-inline-start: auto; color: var(--color-text-tertiary); transition: transform var(--duration-fast) var(--ease-out); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
  max-inline-size: var(--size-measure);
}

/* ---------------------------------------------------------------- cta */
.cta {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  background: var(--color-surface-card);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.cta > * + * { margin-block-start: var(--space-5); }
.cta__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  max-inline-size: 30rem;
  margin-inline: auto;
}
.cta__form .input { flex: 1 1 14rem; }

/* ------------------------------------------------------------- footer */
.site-footer {
  border-block-start: 1px solid var(--color-border-default);
  padding-block: var(--space-12);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}
.site-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { color: var(--color-text-secondary); margin-block-end: var(--space-3); }
.site-footer li + li { margin-block-start: var(--space-2); }
.site-footer a:hover { color: var(--color-text-primary); }
.site-footer__legal {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-default);
}

/* ---------------------------------------------------------- narrow pg */
.narrow { max-inline-size: 46rem; margin-inline: auto; }
.legal h2 { margin-block: var(--space-10) var(--space-4); }
.legal h3 { margin-block: var(--space-6) var(--space-2); }
.legal p, .legal li { color: var(--color-text-secondary); }
.legal ul { margin-block-start: var(--space-2); }
.legal li { padding-inline-start: var(--space-4); position: relative; }
.legal li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.65em;
  inset-inline-start: 0;
  inline-size: 0.25rem;
  block-size: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-text-tertiary);
}
.legal li + li { margin-block-start: var(--space-2); }
.placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-feedback-warning-text);
  background: var(--color-feedback-warning-bg);
  border: 1px solid var(--color-feedback-warning-border);
  border-radius: var(--radius-xs);
  padding-inline: var(--space-2);
}

.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-feedback-info-border);
  border-radius: var(--radius-md);
  background: var(--color-feedback-info-bg);
  color: var(--color-feedback-info-text);
}
.notice .icon { flex: none; color: var(--color-feedback-info-icon); }

/* ------------------------------------------------------------ origin */
/* Where the tool comes from is the strongest thing this page can say, so it
   gets its own band rather than a logo in a corner. */


.origin {
  position: relative;
  overflow: hidden;
  border-block-end: 1px solid var(--color-border-default);
  background: var(--color-surface-sunken);
}
.origin::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  inline-size: 60%;
  block-size: 160%;
  background: radial-gradient(closest-side,
              color-mix(in oklab, var(--color-action-primary) 14%, transparent),
              transparent);
  pointer-events: none;
}
.origin__inner { position: relative; padding-block: var(--space-20); }
.origin__inner > * + * { margin-block-start: var(--space-5); }
.origin__claim {
  font-size: clamp(1.5rem, 3.6vw, var(--text-4xl));
  max-inline-size: 22ch;
}
.origin__name { color: var(--color-action-primary); }
.origin__text { max-inline-size: 58ch; }

.footer__by { margin-block-start: var(--space-3); color: var(--color-text-secondary); }
.footer__by strong { color: var(--color-text-primary); font-weight: var(--weight-medium); }