/* Raysor product identity, project directory, and input-aware layout layer */

:root {
  --product-accent: #6da6ff;
  --product-accent-2: #8f7cff;
  --product-glow: rgba(77,145,255,.18);
}

html:has(link[rel="canonical"][href$="/products/territoryhub"]) {
  --product-accent: #3cc87e;
  --product-accent-2: #0294b0;
  --product-glow: rgba(33,187,146,.18);
}
html:has(link[rel="canonical"][href$="/products/territory-field"]) {
  --product-accent: #54d9a4;
  --product-accent-2: #23a7bd;
  --product-glow: rgba(84,217,164,.17);
}
html:has(link[rel="canonical"][href$="/products/powershell-principal"]) {
  --product-accent: #168cff;
  --product-accent-2: #5ab8ff;
  --product-glow: rgba(22,140,255,.2);
}
html:has(link[rel="canonical"][href$="/products/deep-orbit"]) {
  --product-accent: #8b7dff;
  --product-accent-2: #6ba8ff;
  --product-glow: rgba(139,125,255,.2);
}

html:has(link[rel="canonical"][href*="/products/"]) body {
  background:
    radial-gradient(circle at 76% 9%, var(--product-glow), transparent 31rem),
    radial-gradient(circle at 18% 26%, color-mix(in srgb, var(--product-accent-2) 9%, transparent), transparent 35rem),
    #06080d;
}

html:has(link[rel="canonical"][href*="/products/"]) .v1-product-hero {
  position: relative;
  isolation: isolate;
}
html:has(link[rel="canonical"][href*="/products/"]) .v1-product-hero::before {
  position: absolute;
  inset: 24px max(-5vw, -80px) 0;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--product-accent) 20%, transparent);
  border-radius: 42px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--product-accent) 8%, transparent), transparent 48%),
    rgba(8,12,19,.55);
  content: "";
  pointer-events: none;
}

html:has(link[rel="canonical"][href$="/products/territoryhub"]) .v1-product-glyph,
html:has(link[rel="canonical"][href$="/products/territory-field"]) .v1-product-glyph,
html:has(link[rel="canonical"][href$="/products/powershell-principal"]) .v1-product-glyph,
html:has(link[rel="canonical"][href$="/products/deep-orbit"]) .v1-product-glyph {
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 19px;
  color: transparent;
  font-size: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 20px 54px rgba(0,0,0,.38), 0 0 34px var(--product-glow);
}
html:has(link[rel="canonical"][href$="/products/territoryhub"]) .v1-product-glyph { background-image: url("/assets/product-icon-territoryhub.svg"); }
html:has(link[rel="canonical"][href$="/products/territory-field"]) .v1-product-glyph { background-image: url("/assets/product-icon-territory-field.svg"); }
html:has(link[rel="canonical"][href$="/products/powershell-principal"]) .v1-product-glyph { background-image: url("/assets/product-icon-powershell-principal.svg"); }
html:has(link[rel="canonical"][href$="/products/deep-orbit"]) .v1-product-glyph { background-image: url("/assets/product-icon-deep-orbit.svg"); }

html:has(link[rel="canonical"][href*="/products/"]) .eyebrow,
html:has(link[rel="canonical"][href*="/products/"]) .v1-card-number {
  color: color-mix(in srgb, var(--product-accent) 82%, white);
}
html:has(link[rel="canonical"][href*="/products/"]) .button-primary {
  border-color: color-mix(in srgb, var(--product-accent) 72%, white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--product-accent) 75%, white), var(--product-accent));
  box-shadow: 0 16px 42px var(--product-glow);
}
html:has(link[rel="canonical"][href*="/products/"]) .v1-feature-band,
html:has(link[rel="canonical"][href*="/products/"]) .v1-interface-preview,
html:has(link[rel="canonical"][href*="/products/"]) .v1-spec-card,
html:has(link[rel="canonical"][href*="/products/"]) .v1-download-panel,
html:has(link[rel="canonical"][href*="/products/"]) .v1-card {
  border-color: color-mix(in srgb, var(--product-accent) 18%, rgba(255,255,255,.08));
}
html:has(link[rel="canonical"][href*="/products/"]) .v1-interface-preview {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--product-accent) 7%, #080d15), #080d15 64%);
}
html:has(link[rel="canonical"][href*="/products/"]) .v1-interface-line:nth-child(1) {
  background: color-mix(in srgb, var(--product-accent) 42%, transparent);
}
html:has(link[rel="canonical"][href*="/products/"]) .v1-feature-list li::before {
  background: var(--product-accent);
}

/* Each flagship gets a different interface silhouette rather than one generic mock panel. */
html:has(link[rel="canonical"][href*="/products/"]) .v1-interface-block {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html:has(link[rel="canonical"][href*="/products/"]) .v1-interface-block::before,
html:has(link[rel="canonical"][href*="/products/"]) .v1-interface-block::after {
  position: absolute;
  content: "";
}

html:has(link[rel="canonical"][href$="/products/territoryhub"]) .v1-interface-block {
  background:
    linear-gradient(rgba(60,200,126,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,200,126,.08) 1px, transparent 1px),
    radial-gradient(circle at 70% 42%, rgba(96,213,105,.22), transparent 5rem),
    linear-gradient(135deg, rgba(2,148,176,.18), rgba(33,187,146,.06));
  background-size: 28px 28px, 28px 28px, auto, auto;
}
html:has(link[rel="canonical"][href$="/products/territoryhub"]) .v1-interface-block::before {
  inset: 18% 15% 22% 18%;
  border: 3px solid rgba(248,249,249,.72);
  border-radius: 46% 54% 52% 48% / 44% 38% 62% 56%;
  transform: rotate(-8deg);
  box-shadow: 62px 24px 0 -1px rgba(60,200,126,.18);
}
html:has(link[rel="canonical"][href$="/products/territoryhub"]) .v1-interface-block::after {
  right: 15%;
  bottom: 15%;
  width: 42px;
  height: 42px;
  border: 4px solid #eafff4;
  border-radius: 50%;
  background: #05957a;
  box-shadow: 0 0 24px rgba(60,200,126,.35);
}

html:has(link[rel="canonical"][href$="/products/territory-field"]) .v1-interface-block {
  background:
    radial-gradient(circle at 18% 72%, rgba(84,217,164,.26), transparent 4rem),
    linear-gradient(135deg, rgba(35,167,189,.18), rgba(84,217,164,.05));
}
html:has(link[rel="canonical"][href$="/products/territory-field"]) .v1-interface-block::before {
  left: 12%;
  top: 60%;
  width: 72%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #54d9a4, #eafff8, #23a7bd);
  transform: rotate(-13deg);
  box-shadow: 34px -22px 0 -1px rgba(255,255,255,.18);
}
html:has(link[rel="canonical"][href$="/products/territory-field"]) .v1-interface-block::after {
  left: 16%;
  bottom: 20%;
  width: 18px;
  height: 18px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #20b88f;
  box-shadow: 260px -61px 0 -2px #23a7bd, 260px -61px 0 2px #fff;
}

html:has(link[rel="canonical"][href$="/products/powershell-principal"]) .v1-interface-block {
  background:
    linear-gradient(180deg, rgba(22,140,255,.09), transparent 55%),
    #050b14;
}
html:has(link[rel="canonical"][href$="/products/powershell-principal"]) .v1-interface-block::before {
  inset: 18px 20px;
  content: "PS> Invoke-RaysorWorkflow\A  ✓ runtime/profile\A  ✓ approvals/ready\A  ✓ evidence/captured";
  white-space: pre;
  color: #9ed4ff;
  font-family: var(--raysor-v1-font-mono);
  font-size: clamp(.7rem, 1.3vw, .9rem);
  line-height: 1.9;
}
html:has(link[rel="canonical"][href$="/products/powershell-principal"]) .v1-interface-block::after {
  right: 24px;
  bottom: 22px;
  width: 74px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: -126px 0 0 #168cff;
}

html:has(link[rel="canonical"][href$="/products/deep-orbit"]) .v1-interface-block {
  background:
    radial-gradient(circle at 50% 50%, rgba(139,125,255,.22), transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 26%, rgba(107,168,255,.12) 27%, transparent 29%),
    #070a13;
}
html:has(link[rel="canonical"][href$="/products/deep-orbit"]) .v1-interface-block::before {
  left: 50%;
  top: 50%;
  width: 150px;
  height: 72px;
  border: 3px solid rgba(139,125,255,.65);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-22deg);
  box-shadow: 0 0 24px rgba(139,125,255,.18);
}
html:has(link[rel="canonical"][href$="/products/deep-orbit"]) .v1-interface-block::after {
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  border: 4px solid #dce9ff;
  border-radius: 50%;
  background: #172647;
  transform: translate(-50%,-50%);
  box-shadow: 72px -42px 0 -18px #fff, -66px 49px 0 -20px #6ba8ff;
}

/* Product catalog identity */
.product-family-card {
  --family: #6da6ff;
  --family2: #8f7cff;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--family) 22%, rgba(255,255,255,.08));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--family) 15%, transparent), transparent 17rem),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(9,14,22,.88);
}
.product-family-card::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--family) 22%, transparent), transparent 70%);
}
.product-family-card[data-family="territoryhub"] { --family: #3cc87e; --family2: #0294b0; }
.product-family-card[data-family="territory-field"] { --family: #54d9a4; --family2: #23a7bd; }
.product-family-card[data-family="principal"] { --family: #168cff; --family2: #5ab8ff; }
.product-family-card[data-family="deep-orbit"] { --family: #8b7dff; --family2: #6ba8ff; }

.product-card-icon {
  width: 64px;
  height: 64px;
  display: block;
  margin-bottom: 28px;
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(0,0,0,.32), 0 0 28px color-mix(in srgb, var(--family) 16%, transparent);
}
.product-family-card .text-link {
  color: color-mix(in srgb, var(--family) 70%, white);
}

.project-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.project-card {
  --project: #6da6ff;
  position: relative;
  min-width: 0;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--project) 20%, rgba(255,255,255,.09));
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--project) 16%, transparent), transparent 15rem),
    rgba(10,15,23,.86);
  box-shadow: 0 16px 42px rgba(0,0,0,.2);
}
.project-card[data-project="striveloop"] { --project: #ff7db5; }
.project-card[data-project="ray"] { --project: #5be7ff; }
.project-card[data-project="raysor-hub"] { --project: #f5b65b; }
.project-card[data-project="pocket-foundry"] { --project: #ff9e49; }
.project-card[data-project="tactical-tower"] { --project: #ff6f61; }
.project-card[data-project="chat-organizer"] { --project: #7fd7a5; }
.project-card[data-project="serrenal-wave"] { --project: #55c8ff; }
.project-card[data-project="principal-lite"] { --project: #3999ff; }
.project-card[data-project="backup-lab"] { --project: #5cd4c7; }
.project-card[data-project="deep-file-orbit"] { --project: #a786ff; }
.project-card[data-project="windows-fabric"] { --project: #8aa4c9; }
.project-card[data-project="constitution"] { --project: #d2b680; }

.project-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: 1px solid color-mix(in srgb, var(--project) 38%, transparent);
  border-radius: 14px;
  color: #fff;
  background: color-mix(in srgb, var(--project) 12%, rgba(255,255,255,.025));
  font-family: var(--raysor-v1-font-display);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.project-card h3 {
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 2vw, 2rem);
}
.project-card p {
  margin-bottom: 0;
  color: #aeb9c8;
}
.project-card a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  color: color-mix(in srgb, var(--project) 68%, white);
  font-weight: 780;
}

/* Treat touch-capable wide displays as touch devices, not tiny laptops. */
@media (any-pointer: coarse), (pointer: coarse) {
  .site-nav a,
  .button,
  .text-link,
  .project-card a,
  .v1-doc-nav a,
  .public-drawer-nav a {
    min-height: 52px;
  }
  .site-nav a { padding-inline: 15px; }
  .button { padding-inline: 23px; }
  .v1-card,
  .project-card { padding: clamp(28px, 3.3vw, 38px); }
  .v1-product-topline { gap: 18px; }
  .v1-product-card .text-link { padding-block: 18px 4px; }
}

/* Wide touch tablets get generous two-column compositions. */
@media (min-width: 760px) and (max-width: 1366px) and (any-pointer: coarse) {
  .v1-grid-3,
  .project-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v1-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v1-product-hero-grid { grid-template-columns: 1fr; }
  .v1-product-hero { padding-top: 72px; }
  .v1-interface-preview { min-height: 360px; }
  .v1-product-glyph { width: 82px !important; height: 82px !important; }
}

@media (min-width: 1367px) {
  .project-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  html:has(link[rel="canonical"][href*="/products/"]) .v1-product-hero::before { inset: 18px -12px 0; border-radius: 28px; }
  html:has(link[rel="canonical"][href*="/products/"]) .v1-product-glyph { width: 68px; height: 68px; border-radius: 17px; }
  .project-directory { grid-template-columns: 1fr; }
  .project-card { min-height: 220px; }
}