/*
 * BgARC Launch Site — Premium-Dark Re-Skin layer
 * created: 2026-07-04  created_by: frontend-developer
 * updated: 2026-07-04  updated_by: frontend-developer
 *
 * The Railway/Linear/Vercel-tier treatment layer (UX_reskin-premium-dark-spec
 * §3). Linked AFTER base.css, on re-skinned pages only (Home first). THE BLUE
 * leads as light: page blooms, glass panels, glow-framed real UI. Parchment is
 * not used on any page that links this sheet.
 */

/* ---------- Page base: abyss + the light source ---------- */
body.rs { background: var(--bg-abyss); color: var(--ink-cream); }
/* A large, fixed blue bloom bleeding down from the top — the page's light. */
body.rs::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glow-hero);
}

/* Header reads as dark glass over the abyss */
.rs .site-header {
  background: color-mix(in oklch, var(--bg-abyss) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: var(--edge-hairline);
}

/* ---------- Section rhythm (depth + glow, no light register) ---------- */
.rs-section { position: relative; padding-block: var(--section-pad-y); overflow: clip; }
.rs-abyss { background: var(--bg-abyss); }
.rs-deep  { background: var(--bg-deep); }
.rs-section > .container { position: relative; z-index: 1; }
/* One anchored glow per major section, behind its hero element. */
.rs-glow::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--glow-anchor);
}
.rs-glow--top::before { background: radial-gradient(50% 60% at 50% 0%, oklch(58% 0.15 228 / 0.26), transparent 72%); }

/* T4 · glow divider — a hairline that brightens to blue at its center */
.glow-divider {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, oklch(72% 0.14 230 / 0.7) 50%, transparent);
}

/* ---------- T1 · Glass card ---------- */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  border: var(--edge-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--edge-top-highlight), var(--shadow-lift);
  padding: var(--space-6);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
a.glass:hover, .glass--hover:hover {
  border-color: transparent;
  box-shadow: var(--edge-top-highlight), var(--edge-glow), var(--shadow-lift);
}
.glass h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); color: var(--ink-cream); }
.glass p { color: var(--ink-cream-sec); }

/* ---------- T2 · Glow frame (the screenshot star) ---------- */
.glow-frame { position: relative; border-radius: var(--radius-lg); }
/* the blue halo bleeding past the frame edges */
.glow-frame::before {
  content: ""; position: absolute; inset: -12% -8% -8% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 55% at 50% 45%, oklch(60% 0.17 230 / 0.45), transparent 70%);
  filter: blur(6px);
}
.glow-frame__inner {
  position: relative; z-index: 1;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--edge-glow), var(--shadow-frame);
  background: var(--bg-elev);
}
.glow-frame__bar { display: flex; gap: 6px; padding: var(--space-3) var(--space-4); border-bottom: var(--edge-hairline); background: color-mix(in oklch, var(--bg-elev) 70%, transparent); }
.glow-frame__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-cream-ter); opacity: .5; }
.glow-frame__img { display: block; width: 100%; height: auto; }
.glow-caption { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--ink-cream-sec); text-align: center; }

/* ---------- Buttons (glass pill, blue glow) ---------- */
.rs .btn-primary {
  background: var(--arc-blue); color: #0a0c10; border: 0;
  box-shadow: 0 0 0 1px oklch(78% 0.14 232 / 0.5), 0 0 22px oklch(65% 0.16 232 / 0.45);
}
.rs .btn-primary:hover { background: var(--arc-azure); box-shadow: 0 0 0 1px oklch(82% 0.14 232 / 0.7), 0 0 32px oklch(70% 0.17 232 / 0.6); }
.rs .btn-ghost {
  background: var(--bg-glass); backdrop-filter: blur(10px);
  color: var(--ink-cream); border: var(--edge-hairline);
}
.rs .btn-ghost:hover { border-color: transparent; box-shadow: var(--edge-glow); }

/* ---------- Hero — the real interface IS the hero ---------- */
.rs-hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  background: var(--bg-abyss); padding-block: calc(var(--header-h) + var(--space-16)) var(--space-16);
  overflow: clip;
}
.rs-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 8%, oklch(60% 0.17 233 / 0.42), transparent 68%);
  animation: bloom-on 1.2s ease-out both;
}
@keyframes bloom-on { from { opacity: 0; } to { opacity: 1; } }
.rs-hero__inner { position: relative; z-index: 1; width: 100%; text-align: center; }
.rs-hero .kicker {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--arc-teal);
}
.rs-hero h1 {
  font-family: var(--font-charter); font-weight: 700; font-size: var(--fs-hero);
  color: var(--ink-cream); letter-spacing: -0.01em; margin-top: var(--space-4);
  max-width: 18ch; margin-inline: auto; line-height: 1.08;
}
.rs-hero h1 .glow-word {
  background-image: var(--arc-gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px oklch(70% 0.16 232 / 0.5));
}
.rs-hero .subhead { margin-top: var(--space-6); font-size: var(--fs-lead); color: var(--ink-cream-sec); max-width: 54ch; margin-inline: auto; line-height: var(--lh-reading); }
.rs-hero__cta { margin-top: var(--space-8); display: flex; gap: var(--space-4); justify-content: center; align-items: center; flex-wrap: wrap; }
/* the centerpiece screenshot */
.rs-hero__frame { margin: var(--space-16) auto 0; max-width: 1100px; }

/* ---------- Concept + who + launch (dark text sections) ---------- */
.rs-lead { font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: var(--lh-reading); color: var(--ink-cream); }
.rs-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--arc-teal); display: inline-block; }
.rs-who p { font-size: var(--fs-lead); line-height: var(--lh-reading); color: var(--ink-cream-sec); }
.rs-who strong { color: var(--ink-cream); }

/* ---------- Forward trio + collab teaser (glass grid) ---------- */
.rs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.rs-card-arrow { margin-top: var(--space-4); color: var(--arc-teal); font-weight: 600; font-size: var(--fs-small); display: inline-flex; align-items: center; gap: .4em; }
.rs-card-arrow::after { content: "\2192"; transition: transform .12s ease; }
a.glass:hover .rs-card-arrow::after { transform: translateX(3px); }

/* ---------- CTA band ---------- */
.rs-cta { text-align: center; }
.rs-cta__line { font-family: var(--font-charter); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); max-width: 22ch; margin: 0 auto var(--space-6); color: var(--ink-cream); }
.pending { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--arc-teal); border: 1px dashed color-mix(in oklch, var(--arc-teal) 50%, transparent); padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; }

/* ---------- Footer over abyss ---------- */
.rs .site-footer { background: var(--bg-abyss); border-top: var(--edge-hairline); }

/* ---------- Collaboration patterns (How It Works §6) ---------- */
.collab-list { display: grid; gap: var(--space-12); }
.collab-row { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) {
  .collab-row { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .collab-row--flip .collab-media { order: -1; }
}
.collab-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font-family: var(--font-charter); font-weight: 700; font-size: 1.3rem;
  color: var(--arc-teal); border: var(--edge-hairline);
  box-shadow: 0 0 18px oklch(65% 0.16 232 / 0.35);
}
.collab-copy h3 { font-size: var(--fs-h2); margin: var(--space-4) 0 var(--space-3); color: var(--ink-cream); }
.collab-copy p { color: var(--ink-cream-sec); font-size: var(--fs-lead); line-height: var(--lh-reading); }
/* affordance-forward cards (authorize beat, handoff) */
.collab-beat { display: grid; place-items: center; gap: var(--space-4); min-height: 260px; text-align: center; }
.beat-pill {
  font-weight: 700; font-size: var(--fs-body); padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill); background: var(--arc-blue); color: #0a0c10;
  box-shadow: 0 0 0 1px oklch(78% 0.14 232 / 0.5), 0 0 26px oklch(65% 0.16 232 / 0.5);
}
.beat-pill--ghost { background: transparent; color: var(--ink-cream-sec); border: var(--edge-hairline); box-shadow: none; }
.beat-note { color: var(--ink-cream-ter); font-size: var(--fs-small); }
.handoff-flow { display: flex; align-items: center; gap: var(--space-6); }
.handoff-flow .glyph { width: 40px; height: 40px; filter: drop-shadow(0 0 12px oklch(70% 0.13 200 / 0.5)); }
.handoff-arrow { color: var(--arc-teal); font-size: 2rem; filter: drop-shadow(0 0 12px oklch(70% 0.16 232 / 0.5)); }

/* ---------- Agent bio cards (The Panel) ---------- */
.bio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.bio { padding: var(--space-6); }
.bio__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.bio__head .glyph { width: 22px; height: 22px; }
.bio__name { font-weight: 700; color: var(--ink-cream); font-size: var(--fs-body); }
.bio__code { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-cream-ter); margin-left: auto; }
.bio p { color: var(--ink-cream-sec); font-size: var(--fs-small); line-height: 1.55; }
.division-header { color: inherit; }

/* ---------- Pricing (premium-dark) ---------- */
.price-hero { text-align: center; }
.price-amount { font-family: var(--font-charter); font-weight: 700; font-size: clamp(3rem, 8vw, 5rem); line-height: 1; color: var(--ink-cream); }
.price-amount .per { font-size: var(--fs-lead); color: var(--ink-cream-sec); font-weight: 400; }
.price-table { width: 100%; border-collapse: collapse; margin-block: var(--space-6); }
.price-table th, .price-table td { text-align: left; padding: var(--space-4); border-bottom: var(--edge-hairline); font-size: var(--fs-small); vertical-align: top; color: var(--ink-cream-sec); }
.price-table th { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-cream-ter); }
.price-table td strong { color: var(--ink-cream); }
.price-strong { color: var(--arc-teal); font-weight: 700; }
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); color: var(--ink-cream-sec); }
.checklist .mark { color: var(--arc-teal); width: 20px; height: 20px; filter: drop-shadow(0 0 8px oklch(70% 0.14 210 / 0.5)); }
.checklist strong { color: var(--ink-cream); }

/* ---------- Diagrams on dark (Control page) ---------- */
.rs .diagram { background: var(--bg-slate); border: var(--edge-hairline); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-8); box-shadow: var(--edge-top-highlight), var(--shadow-lift); }
.rs .diagram .node-box { fill: var(--bg-elev); stroke: oklch(72% 0.10 230 / 0.3); }
.rs .diagram .flow-line { stroke: var(--arc-blue); }

/* ---------- Motion / a11y ---------- */
@media (prefers-reduced-motion: reduce) {
  .rs-hero::before { animation: none; opacity: 1; }
  .glass, .rs .btn-primary, .rs .btn-ghost, .rs-card-arrow::after { transition: none; }
}