/* Solution detail pages (Brand / Auditor / Token Manager) */
.sd-hero {
  padding: 24px 0 80px;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 48px;
}
.crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumbs [aria-current] {
  color: var(--ink);
  font-weight: 500;
}
.sd-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  min-height: clamp(420px, calc(72svh - 140px), 540px);
}
.sd-hero__msg {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: 540px;
}
.sd-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.sd-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.sd-note .ico {
  font-size: 14px;
}

/* Sample preview card */
.pv {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 16px 40px var(--dk-sh-3050a01f, rgba(48, 80, 160, 0.12));
}
.pv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pv__bar h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--dk-bg-f2f4f7, #f2f4f7);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.pill--blue {
  background: var(--dk-bg-dbeafe, #dbeafe);
  color: var(--dk-fg-1d4ed8, #1d4ed8);
}
.pill--teal {
  background: var(--dk-bg-ccfbf1, #ccfbf1);
  color: var(--dk-fg-0f766e, #0f766e);
}
.pill--red {
  background: var(--dk-bg-fee4e2, #fee4e2);
  color: var(--dk-fg-d92d20, #d92d20);
}
.pill--amber {
  background: var(--dk-bg-fef0c7, #fef0c7);
  color: var(--dk-fg-b54708, #b54708);
}
.pv__cmp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.pv__panel {
  background: var(--dk-bg-f5f8ff, #f5f8ff);
  border-radius: 10px;
  padding: 10px;
}
.pv__panel--brand {
  background: var(--dk-bg-ecf8f6, #ecf8f6);
}
.pv__cap {
  font-size: 10px;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.pv__inner {
  background: var(--dk-bg-ffffff, #fff);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line-soft);
}
.pv__t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
}
.pv__input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 10px;
  color: var(--ink-3);
}
.pv__btns {
  display: flex;
  gap: 6px;
}
.pv__btn {
  padding: 4px 12px;
  font-size: 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--dk-bg-ffffff, #fff);
}
.pv__btn--blue {
  background: var(--dk-bg-2563eb, #2563eb);
  border-color: var(--dk-bd-2563eb, #2563eb);
  color: var(--dk-fg-ffffff, #fff);
}
.pv__btn--teal {
  background: var(--dk-bg-0f766e, #0f766e);
  border-color: var(--dk-bd-0f766e, #0f766e);
  color: var(--dk-fg-ffffff, #fff);
}
.pv__arrow {
  font-size: 16px;
  color: var(--ink-3);
}
.pv__prog {
  height: 4px;
  border-radius: 4px;
  background: var(--dk-bg-e5e7eb, #e5e7eb);
  overflow: hidden;
}
.pv__prog i {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.pv__prog--dark {
  height: 6px;
}
.pv__prog--dark i {
  background: var(--dk-bg-000000, #000);
}
.pv__rows {
  display: flex;
  flex-direction: column;
  background: var(--dk-bg-f8f9fb, #f8f9fb);
  border-radius: 10px;
  padding: 4px 12px;
}
.pv__rows li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 12px;
  color: var(--ink-3);
}
.pv__rows li + li {
  border-top: 1px solid var(--line);
}
.pv__rows b {
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pv__rows i {
  font-style: normal;
  color: var(--ink-3);
}
.sw2 {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.pv__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pv__stats--3 {
  grid-template-columns: repeat(3, 1fr);
}
.pv__stats div {
  background: var(--dk-bg-f2f4f7, #f2f4f7);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pv__stats small {
  font-size: 10px;
  color: var(--ink-3);
}
.pv__stats b {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.pv__finds {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pv__finds li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pv__finds div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pv__finds b {
  font-size: 12px;
  font-weight: 500;
}
.pv__finds small {
  font-size: 10px;
  color: var(--ink-3);
}
.pv__fi {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dk-bg-f2f4f7, #f2f4f7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-2);
  flex: none;
  gap: 1px;
}
.pv__fi--dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dk-bg-2563eb, #2563eb);
}
.pv__fi--dots i:nth-child(2) {
  background: var(--dk-bg-3b82f6, #3b82f6);
}
.pv__fi--dots i:nth-child(3) {
  background: var(--dk-bg-60a5fa, #60a5fa);
}
.pv__meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pv__meter p {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-3);
}
.pv__meter b {
  font-weight: 500;
  color: var(--ink);
}
.pv__meter small,
.pv__foot {
  font-size: 10px;
  color: var(--ink-3);
}
.pv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pv__chips span {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-2);
}

/* Benefits / How it works / Ready */
.sd-gray {
  background: var(--dk-bg-f3f4f6, #f3f4f6);
  padding: 80px 0;
}
.sd-how {
  padding: 80px 0;
}
.sd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Beats the body.site list reset, so the gap also applies to the <ol> step lists */
.container > .sec-head + .sd-cards {
  margin-top: 40px;
}
.sd-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-color: var(--dk-bd-eaecf0, #eaecf0);
  box-shadow: none;
}
.sd-card .ic-tile {
  margin-bottom: 16px;
}
.sd-card h3,
.sd-step h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
.sd-card p,
.sd-step p {
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-2);
}
.sd-step {
  padding: 28px;
  background: var(--dk-bg-f3f4f6, #f3f4f6);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    transform var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease);
}
.sd-step:hover {
  transform: translateY(-3px);
  background: var(--dk-bg-eceef2, #eceef2);
}
.sd-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dk-bg-000000, #000);
  color: var(--dk-fg-ffffff, #fff);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}
.sd-ready {
  padding: 80px 0;
}
.sd-how + .sd-ready {
  padding-top: 0;
}
.sd-ready__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 36px;
  background: var(--tint);
  border: 1px solid var(--dk-bd-dbe6fb, #dbe6fb);
  border-radius: 16px;
}
.sd-ready h2 {
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
}
.sd-ready p {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .sd-hero__in {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
  }
  .sd-cards {
    grid-template-columns: 1fr;
  }
  .container > .sec-head + .sd-cards {
    margin-top: 28px;
  }
  .sd-ready__panel {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
  .sd-hero {
    padding-bottom: 56px;
  }
  .crumbs {
    margin-bottom: 32px;
  }
  .sd-gray,
  .sd-how,
  .sd-ready {
    padding: 56px 0;
  }
}
@media (max-width: 480px) {
  .pv__cmp {
    grid-template-columns: 1fr;
  }
  .pv__arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .pv__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .pv__stats--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .sd-hero__ctas .btn,
  .sd-ready .btn {
    width: 100%;
  }
}

/* AI Brand Customization: 4-step how-it-works + packages */
.sd-cards--4 {
  grid-template-columns: repeat(4, 1fr);
}
.sd-cards--2 {
  grid-template-columns: repeat(2, 1fr);
}
.sd-pkg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
}
.sd-pkg__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.sd-pkg h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
.sd-pkg__price {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.sd-pkg > p {
  font-size: 14px;
  color: var(--ink-2);
}
.sd-pkg__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sd-pkg__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.sd-pkg__list .ico {
  font-size: 16px;
  color: var(--brand);
}
@media (max-width: 1000px) {
  .sd-cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .sd-cards--4,
  .sd-cards--2 {
    grid-template-columns: 1fr;
  }
}