/* ==========================================================================
   ValderTech — Websites by ValderTech (websites.html)

   A lighter visual register than the main site, to signal a self-serve
   product line rather than custom engagement work: no navy gradient hero, no
   lifted cards, flat hairline surfaces and more air. Same tokens throughout,
   so it still reads as ValderTech. Colour values all come from styles.css.
   ========================================================================== */

/* ------------------------------------------------------------- product -- */

.wb-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--vt-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--vt-blue-deep);
  background: var(--vt-white);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius-pill);
  padding: 7px 15px;
  margin-bottom: 22px;
}

.wb-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vt-blue);
  flex: none;
}

/* ---------------------------------------------------------------- hero -- */

.wb-hero {
  background: var(--vt-mist);
  border-bottom: 1px solid var(--vt-line-soft);
  padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 7vw, 92px);
}

.wb-hero h1 {
  max-width: 16ch;
}

.wb-hero__lede {
  font-size: var(--fs-lede);
  max-width: 52ch;
  margin-bottom: 30px;
}

.wb-hero__note {
  margin: 22px 0 0;
  font-size: var(--fs-small);
  color: var(--vt-slate);
}

/* ---------------------------------------------------------- flat cards -- */

/* Deliberately flat: no shadow, no hover lift. The main site's cards float;
   these sit flush, which is what makes the product line read as lighter. */
.wb-card {
  background: var(--vt-white);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius-sm);
  padding: 26px;
}

.wb-card h3 {
  margin-bottom: 8px;
}

.wb-card p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------- steps -- */

.wb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  counter-reset: wb-step;
}

.wb-step {
  background: var(--vt-white);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius-sm);
  padding: 26px;
  counter-increment: wb-step;
}

.wb-step::before {
  content: counter(wb-step, decimal-leading-zero);
  display: block;
  font-family: var(--vt-mono);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: var(--vt-blue);
  margin-bottom: 16px;
}

.wb-step h3 {
  margin-bottom: 7px;
}

.wb-step p {
  margin: 0;
  font-size: 0.97rem;
}

/* ----------------------------------------------------- template stubs -- */

.wb-templates {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.wb-template {
  background: var(--vt-white);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius-sm);
  padding: 20px;
}

.wb-template__type {
  display: block;
  font-weight: 500;
  font-family: var(--vt-display);
  color: var(--vt-navy);
  margin-bottom: 4px;
}

.wb-template__state {
  display: block;
  font-family: var(--vt-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--vt-slate);
}

/* ------------------------------------------------------------ pricing -- */

.wb-price {
  background: var(--vt-white);
  border: 2px solid var(--vt-blue);
  border-radius: var(--vt-radius);
  padding: clamp(28px, 4vw, 40px);
  max-width: 34rem;
}

.wb-price__amount {
  font-family: var(--vt-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--vt-navy);
  margin: 0 0 6px;
}

.wb-price__terms {
  font-family: var(--vt-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--vt-slate);
  margin: 0 0 24px;
}

.wb-price hr {
  border: 0;
  border-top: 1px solid var(--vt-line-soft);
  margin: 24px 0;
}

/* --------------------------------------------------------- guarantee -- */

.wb-guarantee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  background: var(--vt-mist);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius);
  padding: clamp(26px, 3.5vw, 36px);
}

.wb-guarantee svg {
  color: var(--vt-blue-deep);
  flex: none;
}

.wb-guarantee h2 {
  margin-bottom: 8px;
}

.wb-guarantee p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- FAQ -- */

/* Native disclosure — no JavaScript on this page at all. */
.wb-faq {
  max-width: var(--vt-maxw-narrow);
  border-top: 1px solid var(--vt-line);
}

.wb-faq details {
  border-bottom: 1px solid var(--vt-line);
}

.wb-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--vt-display);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--vt-navy);
  list-style: none;
}

.wb-faq summary::-webkit-details-marker {
  display: none;
}

.wb-faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2px solid var(--vt-blue);
  border-bottom: 2px solid var(--vt-blue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s var(--vt-ease);
}

.wb-faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.wb-faq summary:hover {
  color: var(--vt-blue-deep);
}

.wb-faq p {
  margin: 0 0 22px;
  max-width: 62ch;
}

/* --------------------------------------------------------- closing CTA -- */

/* The main site closes on a heavy navy band; this closes on a light panel so
   the product line stays visually lighter to the last section. */
.wb-cta {
  background: var(--vt-mist);
  border: 1px solid var(--vt-line);
  border-radius: var(--vt-radius);
  padding: clamp(34px, 5vw, 56px);
  text-align: center;
}

.wb-cta h2 {
  margin-bottom: 10px;
}

.wb-cta p {
  max-width: 48ch;
  margin: 0 auto 26px;
}

.wb-cta .vt-btn-row {
  justify-content: center;
}

/* ---------------------------------------------------------- note spacing -- */

.wb-note-lg {
  margin-top: 34px;
}

.wb-note {
  margin-top: 22px;
}

.wb-note-sm {
  margin-top: 16px;
}

/* --------------------------------------------------------- placeholder -- */

/* Every unresolved value is wrapped in this so it is impossible to ship by
   accident. Remove the rule once the real numbers are in. */
.wb-tbd {
  background: var(--vt-blue-wash);
  border-bottom: 1px dashed var(--vt-blue);
  padding: 0 4px;
  font-family: var(--vt-mono);
  font-size: 0.94em;
  color: var(--vt-blue-deep);
  /* These wrap: several placeholders carry a full sentence of guidance, and
     nowrap pushed them past the viewport at every width. */
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .wb-guarantee {
    grid-template-columns: minmax(0, 1fr);
  }
}