/* Detail/App/Company/News redesign pass.
   Scope: product detail pages and secondary pages only. Index and product listing pages stay untouched. */

:root {
  --pvd-purple: #8b5cf6;
  --pvd-purple-soft: #bca7ff;
  --pvd-ink: #0b0d12;
  --pvd-paper: #f5f3f8;
  --pvd-line-light: rgba(13, 15, 22, .11);
  --pvd-line-dark: rgba(255, 255, 255, .13);
}

/* Product detail: less boxes, more editorial bands. */
.pv-detail-hero {
  isolation: isolate;
  min-height: min(760px, 92vh);
  display: flex !important;
  align-items: center !important;
  border-bottom: 0 !important;
}

.pv-detail-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--detail-section-bg, #f7f7fa));
  pointer-events: none;
  z-index: 0;
}

html[data-theme="dark"] .pv-detail-hero::after,
body[data-theme="dark"] .pv-detail-hero::after {
  background: linear-gradient(180deg, transparent, #090a0d);
}

.pv-detail-hero .h-eyebrow {
  color: rgba(255, 255, 255, .62) !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
}

.pv-detail-hero .t-lead {
  max-width: 56ch !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.55 !important;
}

.pv-detail-hero .btn-lg {
  border-radius: 999px !important;
  min-height: 44px !important;
}

.pv-detail-hero-media::before {
  opacity: .55 !important;
  height: 13% !important;
  bottom: 5% !important;
}

.pv-detail-hero-media img {
  transform: translateY(4px);
}

 /* Feature bands: clean editorial, no repeated images */
.pv-detail-feature-band {
  padding: clamp(48px, 7vw, 84px) 0;
  border-top: 1px solid var(--detail-line, var(--pvd-line-light));
  border-bottom: 1px solid var(--detail-line, var(--pvd-line-light));
}

.pv-detail-feature-band.pv-detail-feature-alt {
  background: var(--detail-section-bg, #14161e);
}

html[data-theme="dark"] .pv-detail-feature-band.pv-detail-feature-alt,
body[data-theme="dark"] .pv-detail-feature-band.pv-detail-feature-alt {
  background: #0a0b0d;
}

.pv-detail-feature-inner {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .55fr) !important;
  gap: clamp(34px, 5vw, 84px) !important;
  align-items: center !important;
}

.pv-detail-feature-copy {
  padding: 0 !important;
}

.pv-detail-feature-label {
  color: var(--pvd-purple) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  margin-bottom: 12px !important;
}

.pv-detail-feature-title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 4.5vw, 64px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  color: var(--detail-fg, var(--fg)) !important;
  margin-bottom: 18px !important;
}

.pv-detail-feature-desc {
  color: var(--detail-muted, var(--fg-dim)) !important;
  line-height: 1.52 !important;
  font-size: 15px !important;
}

.pv-detail-feature-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 64px;
  opacity: .22;
  color: var(--pvd-purple);
}

/* Facts: big data wall, not small cards. */
.pv-light-panel {
  background: var(--detail-section-bg, #f7f7fa) !important;
  border: 0 !important;
}

.pv-light-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--detail-line, var(--pvd-line-light)) !important;
  border-bottom: 1px solid var(--detail-line, var(--pvd-line-light)) !important;
}

.pv-light-card {
  border: 0 !important;
  border-right: 1px solid var(--detail-line, var(--pvd-line-light)) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: clamp(28px, 4vw, 54px) clamp(22px, 3vw, 42px) !important;
}

.pv-light-card:last-child { border-right: 0 !important; }

.pv-light-k {
  color: var(--pvd-purple) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.pv-light-card h3 {
  color: var(--detail-fg, var(--fg)) !important;
  font-size: clamp(30px, 4.5vw, 64px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

/* Main detail body: asymmetric editorial split instead of cards inside cards. */
.product-detail-split,
.storage-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .72fr) !important;
  gap: clamp(34px, 5vw, 84px) !important;
  align-items: start !important;
  border-top: 1px solid var(--detail-line, var(--pvd-line-light));
  padding-top: clamp(34px, 5vw, 64px);
}

.storage-detail-grid {
  grid-template-columns: minmax(0, .9fr) minmax(260px, .55fr) minmax(280px, .65fr) !important;
}

.product-copy-card,
.product-config-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.product-copy-card::before,
.product-copy-card::after,
.product-config-card::before,
.product-config-card::after {
  display: none !important;
}

.product-copy-card > .h-eyebrow,
.product-config-card > .h-eyebrow {
  color: var(--detail-faint, var(--fg-mute)) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  margin-bottom: 18px !important;
}

.product-copy-card p {
  color: var(--detail-fg, var(--fg)) !important;
  font-size: clamp(18px, 1.65vw, 24px) !important;
  line-height: 1.42 !important;
  max-width: 58ch !important;
}

.product-copy-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 18px !important;
  margin-top: 28px !important;
}

.product-copy-pill {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0 14px !important;
  color: var(--detail-muted, var(--fg-dim)) !important;
  position: relative;
  font-size: 13px !important;
}

.product-copy-pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--pvd-purple);
}

.detail-list {
  display: grid !important;
  gap: 0 !important;
  border-top: 1px solid var(--detail-line, var(--pvd-line-light));
}

.detail-list-item {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
  border: 0 !important;
  border-bottom: 1px solid var(--detail-line, var(--pvd-line-light)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
}

.detail-list-item span {
  color: var(--pvd-purple) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .13em !important;
  background: transparent !important;
}

.detail-list-item p {
  color: var(--detail-fg, var(--fg)) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.product-variant-grid,
.application-grid,
.other-models-grid {
  gap: 0 !important;
  border-top: 1px solid var(--detail-line, var(--pvd-line-light));
  border-bottom: 1px solid var(--detail-line, var(--pvd-line-light));
}

.product-variant-item,
.application-card,
.other-models-grid .tile {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--detail-line, var(--pvd-line-light)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(22px, 3vw, 34px) !important;
}

.product-variant-item:last-child,
.application-card:last-child,
.other-models-grid .tile:last-child {
  border-right: 0 !important;
}

.application-index,
.product-variant-index {
  color: var(--pvd-purple) !important;
  background: transparent !important;
}

.application-title,
.product-variant-name {
  color: var(--detail-fg, var(--fg)) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 1.8vw, 28px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

.application-desc,
.product-variant-desc {
  color: var(--detail-muted, var(--fg-dim)) !important;
  line-height: 1.52 !important;
}

.specs-grid {
  gap: 0 !important;
  border-top: 1px solid var(--detail-line, var(--pvd-line-light));
}

.spec-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--detail-line, var(--pvd-line-light)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 28px 0 !important;
}

/* Secondary pages: activate the cleaner draft direction with stronger polish. */
.pv-app-hero,
.pv-company-hero,
.pv-news-hero {
  background:
    radial-gradient(circle at 78% 42%, rgba(139, 92, 246, .20), transparent 34%),
    linear-gradient(180deg, #07080b 0%, #11121a 100%) !important;
  color: #fff !important;
}

.pv-app-copy h1,
.pv-company-copy h1,
.pv-news-hero h1 {
  max-width: 12ch !important;
  color: #fff !important;
  letter-spacing: -.065em !important;
}

.pv-app-copy p,
.pv-company-copy p,
.pv-news-hero p {
  color: rgba(255, 255, 255, .68) !important;
}

.pv-app-switch,
.pv-company-actions {
  margin-top: 28px;
}

.pv-app-switch button,
.pv-company-actions .btn,
.pv-news-card button {
  border-radius: 999px !important;
}

.pv-app-detail,
.pv-company-principles,
.pv-company-coverage,
.pv-news-grid-section,
.pv-app-integrations {
  padding-top: clamp(74px, 9vw, 122px) !important;
  padding-bottom: clamp(74px, 9vw, 122px) !important;
}

.pv-app-feature-grid article,
.pv-company-principle-list article,
.pv-company-region-grid article,
.pv-news-card {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-top: 1px solid var(--detail-line, var(--pvd-line-light)) !important;
}

.pv-news-grid {
  gap: clamp(22px, 3vw, 44px) !important;
}

.pv-news-card-visual {
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(139, 92, 246, .24), transparent 60%),
    #0b0c11 !important;
}

html[data-theme="dark"] .pvd-feat-strip,
body[data-theme="dark"] .pvd-feat-strip,
html[data-theme="dark"] .pv-light-grid,
body[data-theme="dark"] .pv-light-grid,
html[data-theme="dark"] .product-detail-split,
body[data-theme="dark"] .product-detail-split,
html[data-theme="dark"] .storage-detail-grid,
body[data-theme="dark"] .storage-detail-grid,
html[data-theme="dark"] .detail-list,
body[data-theme="dark"] .detail-list,
html[data-theme="dark"] .product-variant-grid,
body[data-theme="dark"] .product-variant-grid,
html[data-theme="dark"] .application-grid,
body[data-theme="dark"] .application-grid,
html[data-theme="dark"] .other-models-grid,
body[data-theme="dark"] .other-models-grid,
html[data-theme="dark"] .specs-grid,
body[data-theme="dark"] .specs-grid {
  border-color: var(--pvd-line-dark) !important;
}

html[data-theme="dark"] .pvd-feat-item,
body[data-theme="dark"] .pvd-feat-item,
html[data-theme="dark"] .pv-light-card,
body[data-theme="dark"] .pv-light-card,
html[data-theme="dark"] .product-variant-item,
body[data-theme="dark"] .product-variant-item,
html[data-theme="dark"] .application-card,
body[data-theme="dark"] .application-card,
html[data-theme="dark"] .other-models-grid .tile,
body[data-theme="dark"] .other-models-grid .tile {
  border-color: var(--pvd-line-dark) !important;
}

@media (max-width: 980px) {
  .pv-detail-hero-grid,
  .product-detail-split,
  .storage-detail-grid,
  .pv-light-head {
    grid-template-columns: 1fr !important;
  }

  .pvd-feat-strip,
  .pv-light-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pvd-feat-item:nth-child(2n),
  .pv-light-card:nth-child(2n) {
    border-right: 0 !important;
  }
}

@media (max-width: 640px) {
  .pvd-feat-strip,
  .pv-light-grid {
    grid-template-columns: 1fr !important;
  }

  .pvd-feat-item,
  .pv-light-card,
  .product-variant-item,
  .application-card,
  .other-models-grid .tile {
    border-right: 0 !important;
  }
}

/* ── SpecsTable (shared.jsx) ── */
.pv-spec-table {
  width: 100%;
  margin: 0;
  font-size: 14px;
}

.pv-spec-table-inner {
  width: 100%;
  border-collapse: collapse;
}

.pv-spec-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(60% 0.22 290);
  padding: 28px 0 12px;
  border-bottom: 1px solid var(--detail-line, var(--pvd-line-light, #e5e7eb));
  display: block;
}

.pv-spec-group-title:first-child {
  padding-top: 0;
}

.pv-spec-row {
  border-bottom: 1px solid var(--detail-line, var(--pvd-line-light, #e5e7eb));
}

.pv-spec-row:last-child {
  border-bottom: 0;
}

/* pv-spec-key is the actual class name output by SpecsTable in shared.jsx */
.pv-spec-key,
.pv-spec-label {
  padding: 14px 16px 14px 0;
  color: var(--fg-mute, #6b7280);
  font-size: 13px;
  font-weight: 500;
  width: 36%;
  vertical-align: top;
  text-align: left;
}

.pv-spec-value {
  padding: 14px 0;
  color: var(--fg, #111827);
  font-size: 14px;
  font-weight: 400;
  vertical-align: top;
}

html[data-theme="dark"] .pv-spec-value,
body[data-theme="dark"] .pv-spec-value {
  color: var(--dark-fg, #f4f2ed);
}

html[data-theme="dark"] .pv-spec-key,
html[data-theme="dark"] .pv-spec-label,
body[data-theme="dark"] .pv-spec-key,
body[data-theme="dark"] .pv-spec-label {
  color: rgba(244, 242, 237, 0.48);
}

html[data-theme="dark"] .pv-spec-row,
body[data-theme="dark"] .pv-spec-row {
  border-bottom-color: var(--pvd-line-dark, rgba(255, 255, 255, 0.10));
}

html[data-theme="dark"] .pv-spec-group-title,
body[data-theme="dark"] .pv-spec-group-title {
  border-bottom-color: var(--pvd-line-dark, rgba(255, 255, 255, 0.10));
}