/* PowerShell Principal flagship treatment.
   Deep navy / electric blue with the approved compact P_ monogram language,
   while preserving Raysor shared shell behavior and accessibility fallbacks. */

body.principal-product {
  --pp-electric: #4aa8ff;
  --pp-electric-strong: #1687ff;
  --pp-ice: #eef8ff;
  --pp-cyan: #65dcff;
  --pp-navy: #050b14;
  --pp-panel: rgba(6, 15, 28, .78);
  --pp-panel-strong: rgba(7, 18, 34, .92);
  --pp-line: rgba(125, 193, 255, .2);
  --pp-line-strong: rgba(138, 204, 255, .42);
  --pp-radius-xl: 30px;
  --pp-radius-lg: 22px;
}

body.principal-product .v1-product-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.principal-product .v1-product-hero::before {
  content: "";
  position: absolute;
  inset: 1.5rem 0 auto;
  height: min(70vh, 46rem);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 20%, rgba(30, 138, 255, .18), transparent 31%),
    radial-gradient(circle at 21% 11%, rgba(92, 219, 255, .08), transparent 27%);
}

body.principal-product .v1-product-hero-grid {
  align-items: center;
  gap: clamp(30px, 5vw, 76px);
}

body.principal-product .v1-product-identity {
  gap: 12px;
  margin-bottom: 18px;
}

body.principal-product .principal-monogram {
  position: relative;
  overflow: visible;
  border: 1px solid var(--pp-line-strong);
  color: #fff;
  background:
    radial-gradient(circle at 30% 8%, rgba(255,255,255,.24), transparent 40%),
    linear-gradient(145deg, rgba(21, 112, 214, .36), rgba(4, 13, 27, .94));
  box-shadow:
    inset 0 1px rgba(255,255,255,.2),
    0 16px 40px rgba(0,0,0,.32),
    0 0 36px rgba(23, 136, 255, .2);
  transform: skewX(-8deg);
}

body.principal-product .principal-monogram > span {
  display: inline-block;
  transform: skewX(8deg) translateX(1px);
  font-weight: 850;
  letter-spacing: -.08em;
}

body.principal-product .principal-monogram::before,
body.principal-product .principal-monogram::after {
  content: "";
  position: absolute;
  left: -11px;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(78,174,255,.92));
  box-shadow: 0 0 12px rgba(33,144,255,.34);
}

body.principal-product .principal-monogram::before {
  top: 17px;
  width: 16px;
}

body.principal-product .principal-monogram::after {
  top: 28px;
  width: 11px;
}

body.principal-product .principal-product-promise {
  max-width: 19ch;
  margin: .18em 0 .52em;
  color: var(--pp-ice);
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
  font-weight: 740;
  letter-spacing: -.04em;
  line-height: 1.06;
  text-wrap: balance;
}

body.principal-product .v1-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

body.principal-product .v1-product-meta > span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  background: rgba(7, 21, 39, .68);
  box-shadow: inset 0 1px rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(16px) saturate(148%);
  backdrop-filter: blur(16px) saturate(148%);
}

body.principal-product .v1-product-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

body.principal-product .v1-product-hero .button,
body.principal-product .v1-download-actions .button,
body.principal-product .v1-cta .button {
  min-height: 52px;
}

body.principal-product .v1-interface-preview,
body.principal-product .v1-card,
body.principal-product .v1-feature-band,
body.principal-product .v1-spec-card,
body.principal-product .v1-roadmap-item,
body.principal-product .v1-download-panel,
body.principal-product .v1-cta {
  border-color: var(--pp-line);
  background:
    radial-gradient(circle at 73% 0%, rgba(56, 149, 255, .11), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 31%),
    var(--pp-panel);
  box-shadow:
    inset 0 1px rgba(255,255,255,.095),
    inset 0 -1px rgba(255,255,255,.02),
    0 25px 72px rgba(0,0,0,.31);
  -webkit-backdrop-filter: blur(26px) saturate(152%);
  backdrop-filter: blur(26px) saturate(152%);
}

body.principal-product .v1-interface-preview,
body.principal-product .v1-feature-band {
  border-radius: var(--pp-radius-xl);
}

body.principal-product .principal-workspace-preview {
  transform: translateZ(0);
  transition: transform 340ms cubic-bezier(.2,.86,.22,1), border-color 220ms ease, box-shadow 320ms ease;
}

body.principal-product .principal-workspace-preview:hover,
body.principal-product .principal-workspace-preview:focus-within {
  transform: translateY(-4px);
  border-color: var(--pp-line-strong);
  box-shadow:
    inset 0 1px rgba(255,255,255,.14),
    0 32px 84px rgba(0,0,0,.36),
    0 0 44px rgba(29, 137, 255, .12);
}

body.principal-product .principal-runtime-chip {
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 9px;
  border: 1px solid rgba(91, 177, 255, .28);
  border-radius: 999px;
  color: #8dccff;
  background: rgba(21, 85, 150, .2);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .11em;
}

body.principal-product .principal-pipeline-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 13px;
}

body.principal-product .principal-pipeline-strip span {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(87, 168, 255, .16);
}

body.principal-product .principal-pipeline-strip span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -7px;
  width: 7px;
  height: 1px;
  background: rgba(91, 178, 255, .36);
}

body.principal-product .principal-pipeline-strip span:nth-child(-n+3) {
  background: linear-gradient(90deg, rgba(23,132,255,.86), rgba(89,210,255,.7));
  box-shadow: 0 0 14px rgba(23,132,255,.14);
}

body.principal-product .principal-workflow-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(12px, 1.7vw, 18px);
}

body.principal-product .v1-card {
  min-height: 222px;
  border-radius: var(--pp-radius-lg);
  transition: transform 300ms cubic-bezier(.2,.86,.22,1), border-color 220ms ease, background 240ms ease;
}

body.principal-product .v1-card:hover,
body.principal-product .v1-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--pp-line-strong);
  background:
    radial-gradient(circle at 76% 0%, rgba(56,149,255,.15), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.064), transparent 32%),
    var(--pp-panel-strong);
}

body.principal-product .v1-card-number,
body.principal-product .v1-feature-list li::marker {
  color: #7fc6ff;
}

body.principal-product .principal-command-band {
  container-type: inline-size;
  container-name: principal-command-band;
  overflow: clip;
}

body.principal-product .v1-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

body.principal-product .v1-spec-card,
body.principal-product .v1-roadmap-item,
body.principal-product .v1-download-panel,
body.principal-product .v1-cta {
  border-radius: var(--pp-radius-lg);
}

body.principal-product .v1-spec-card {
  min-height: 140px;
  padding: clamp(20px, 2vw, 28px);
}

body.principal-product .v1-spec-card dt {
  color: #97b9d6;
  letter-spacing: .075em;
  text-transform: uppercase;
}

body.principal-product .v1-spec-card dd {
  color: #f6fbff;
  font-weight: 720;
}

body.principal-product .v1-roadmap-item,
body.principal-product .v1-download-panel,
body.principal-product .v1-cta {
  transition: transform 300ms cubic-bezier(.2,.86,.22,1), border-color 220ms ease, background 240ms ease;
}

body.principal-product .v1-roadmap-item:hover,
body.principal-product .v1-roadmap-item:focus-within,
body.principal-product .v1-download-panel:hover,
body.principal-product .v1-download-panel:focus-within,
body.principal-product .v1-cta:hover,
body.principal-product .v1-cta:focus-within {
  transform: translateY(-3px);
  border-color: var(--pp-line-strong);
  background:
    radial-gradient(circle at 76% 0%, rgba(56,149,255,.15), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.066), transparent 32%),
    var(--pp-panel-strong);
}

@container principal-command-band (max-width: 48rem) {
  body.principal-product .principal-command-band {
    grid-template-columns: minmax(0, 1fr);
  }

  body.principal-product .principal-command-band .v1-interface-preview {
    width: 100%;
  }
}

@media (max-width: 46rem) {
  body.principal-product .v1-product-meta > span,
  body.principal-product .v1-product-hero .button,
  body.principal-product .v1-download-actions .button,
  body.principal-product .v1-cta .button {
    width: 100%;
  }

  body.principal-product .v1-product-hero .actions,
  body.principal-product .v1-download-actions,
  body.principal-product .v1-cta .actions {
    width: 100%;
  }

  body.principal-product .v1-card {
    min-height: auto;
  }
}

@media (hover: none), (pointer: coarse) {
  body.principal-product .v1-product-hero .button,
  body.principal-product .v1-download-actions .button,
  body.principal-product .v1-cta .button {
    min-height: 56px;
  }

  body.principal-product .principal-workspace-preview,
  body.principal-product .v1-card,
  body.principal-product .v1-roadmap-item,
  body.principal-product .v1-download-panel,
  body.principal-product .v1-cta {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.principal-product .v1-product-meta > span,
  body.principal-product .v1-interface-preview,
  body.principal-product .v1-card,
  body.principal-product .v1-feature-band,
  body.principal-product .v1-spec-card,
  body.principal-product .v1-roadmap-item,
  body.principal-product .v1-download-panel,
  body.principal-product .v1-cta {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #081628;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.principal-product .principal-monogram,
  body.principal-product .principal-monogram > span,
  body.principal-product .principal-workspace-preview,
  body.principal-product .v1-card,
  body.principal-product .v1-roadmap-item,
  body.principal-product .v1-download-panel,
  body.principal-product .v1-cta {
    transition: none !important;
  }

  body.principal-product .principal-workspace-preview,
  body.principal-product .v1-card,
  body.principal-product .v1-roadmap-item,
  body.principal-product .v1-download-panel,
  body.principal-product .v1-cta {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  body.principal-product .v1-product-meta > span,
  body.principal-product .v1-interface-preview,
  body.principal-product .v1-card,
  body.principal-product .v1-feature-band,
  body.principal-product .v1-spec-card,
  body.principal-product .v1-roadmap-item,
  body.principal-product .v1-download-panel,
  body.principal-product .v1-cta,
  body.principal-product .principal-runtime-chip,
  body.principal-product .principal-monogram {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  body.principal-product .v1-product-hero .button:focus-visible,
  body.principal-product .v1-download-actions .button:focus-visible,
  body.principal-product .v1-cta .button:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}