/* ═══════════════════════════════════════════════════════════════════════════
   products.css — PRODUCT IDENTITY.

   Every product carries its logo and its own color theme on its card, not the
   division color. This is the same rule as the LLypses override (see the
   PRODUCT OVERRIDE block in css/houses.css), applied to every shipped product
   and given one home.

   WHY A SEPARATE FILE AND NOT houses.css: houses.css is a source of the
   rws-core.css bundle. Editing it means a BUNDLE_VER bump that restamps every
   page on the site. Product palettes are used on two
   pages — the Bastion Arsenal and /products — so they live here, linked only
   by those two pages. The LLypses card override stays in houses.css because
   it already shipped there; this file only ADDS the logo tile to it.

   PALETTES ARE LIFTED, NEVER INVENTED. Each product's values come from its own
   shipped page:
     LLypses      /llypses/      gold #D6A81E / gold-lite #E7C24E
     Stream Kit  /stream-kit/  slate #0B0C10 #161821 #1E2029, on-air red
                                 #C0392B / #E04A3B, amber flame #F2A33A
   Add a product = add one .prod-<name> token block below. Nothing else.

   CONTRAST (measured, not eyeballed): every TEXT color used here is checked
   against the darkest AND lightest ground it can sit on.
     #F2A33A amber on #161821 = 8.4:1        #E7C24E on #1A1305 = 10.7:1
     #FFFFFF on #C0392B (ms button) = 5.4:1  #120E04 on #D6A81E = 8.7:1
     rgba(255,255,255,.66) on every ground here >= 7:1
   Red #E04A3B is NEVER used as small text — border, dot and glow only.
   Type floor 0.72rem holds throughout (preflight enforces it).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Product tokens ─────────────────────────────────────────────────────── */
.prod-llypses{
  --p-accent:#D6A81E; --p-lite:#E7C24E;
  --p-ground:#1A1305; --p-ground2:#0C0A06;
  --p-line:rgba(214,168,30,.40); --p-line-hi:rgba(214,168,30,.62);
  --p-glow:rgba(214,168,30,.42); --p-glow-soft:rgba(214,168,30,.13);
  --p-btn:#D6A81E; --p-btn-hi:#E7C24E; --p-btn-ink:#120E04;
}
.prod-ms{
  --p-accent:#E04A3B; --p-lite:#F2A33A;
  --p-ground:#1E2029; --p-ground2:#0B0C10;
  --p-line:rgba(192,57,43,.45); --p-line-hi:rgba(224,74,59,.70);
  --p-glow:rgba(192,57,43,.42); --p-glow-soft:rgba(242,163,58,.12);
  --p-btn:#C0392B; --p-btn-hi:#D2432F; --p-btn-ink:#FFFFFF;
}

/* Pensive: lifted from the two covers themselves — storm-teal sky and silver
   title lettering (Roads to Redemption), blood-red script (Revelations). */
.prod-pensive{
  --p-accent:#5FA8C2; --p-lite:#A9D6E5;
  --p-ground:#10222B; --p-ground2:#081217;
  --p-line:rgba(95,168,194,.38); --p-line-hi:rgba(95,168,194,.62);
  --p-glow:rgba(95,168,194,.36); --p-glow-soft:rgba(179,18,27,.14);
  --p-btn:#A9D6E5; --p-btn-hi:#C4E4EF; --p-btn-ink:#071014;
}

/* ── Shared: the logo tile ──────────────────────────────────────────────── */
.p-logo{position:relative;flex:none;display:block;width:var(--p-logo-size,96px);height:var(--p-logo-size,96px);}
.p-logo img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:22%;
  box-shadow:0 0 0 1px var(--p-line),0 18px 40px -14px rgba(0,0,0,.9),0 0 46px -6px var(--p-glow);}
/* Multistream's broadcast rings — same motion as the hero mark on /stream-kit/. */
.p-logo .ring{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:26%;
  border:1.5px solid rgba(242,163,58,.55);opacity:0;animation:p-signal 3.6s ease-out infinite;}
.p-logo .ring:nth-child(2){animation-delay:1.2s;}
.p-logo .ring:nth-child(3){animation-delay:2.4s;}
@keyframes p-signal{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.7);opacity:0}}

/* The on-air dot. */
.p-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#E04A3B;flex:none;
  animation:p-onair 2.4s ease-out infinite;}
@keyframes p-onair{0%{box-shadow:0 0 0 0 rgba(224,74,59,.6)}70%{box-shadow:0 0 0 8px rgba(224,74,59,0)}100%{box-shadow:0 0 0 0 rgba(224,74,59,0)}}

@media (prefers-reduced-motion:reduce){
  .p-logo .ring,.p-live{animation:none;}
}


/* ═══ 1. BASTION ARSENAL (division/bastion/) ═══════════════════════════════
   Specificity: the house rules here are body.house-bastion .pcard--f (0,2,1)
   and body.house-bastion .pcard::before (0,2,1). Every rule below is at least
   (0,3,1) so it wins regardless of load order. Do not thin them down. */

/* Logo tile replaces the old "…" glyph on featured cards. */
body.house-bastion .pcard .p-logo{--p-logo-size:clamp(84px,9vw,124px);}

/* LLypses: its gold gradient already lives in houses.css. Lift on hover so the
   logo feels attached to the card. */
body.house-bastion .pcard.pcard--llypses:hover .p-logo img{box-shadow:0 0 0 1px var(--p-line-hi),0 22px 46px -14px rgba(0,0,0,.9),0 0 64px -4px var(--p-glow);}

/* Multistream: broadcast slate ground, on-air red rim, amber light. */
body.house-bastion .pcard.pcard--ms{
  background:
    radial-gradient(ellipse 60% 120% at 6% 50%,rgba(192,57,43,.22),transparent 62%),
    radial-gradient(ellipse 50% 90% at 100% 0%,rgba(242,163,58,.08),transparent 60%),
    linear-gradient(140deg,#1E2029,#11131A 55%,#0B0C10);
  border-color:var(--p-line);
}
body.house-bastion .pcard.pcard--ms:hover{
  background:
    radial-gradient(ellipse 60% 120% at 6% 50%,rgba(192,57,43,.30),transparent 62%),
    radial-gradient(ellipse 50% 90% at 100% 0%,rgba(242,163,58,.11),transparent 60%),
    linear-gradient(140deg,#242733,#13151D 55%,#0B0C10);
  border-color:var(--p-line-hi);
}
body.house-bastion .pcard.pcard--ms::before{background:#E04A3B;}
body.house-bastion .pcard.pcard--ms .pc-link:hover{color:var(--p-lite);}
body.house-bastion .pcard.pcard--ms .badge.b-beta{border-color:rgba(242,163,58,.42);color:var(--p-lite);}
body.house-bastion .pcard.pcard--ms .badge.b-free{display:inline-flex;align-items:center;gap:.5rem;
  border-color:var(--p-line-hi);color:#fff;background:rgba(192,57,43,.16);}

/* Not-yet-shipped products: one slim full-width strip, deliberately quiet.
   Nothing to brand until it has a logo and a page. */
body.house-bastion .pcard.pcard--slim{grid-column:1/-1;flex-direction:row;align-items:center;gap:2rem;min-height:auto;
  padding-block:clamp(1.25rem,2.4vw,1.75rem);}
body.house-bastion .pcard.pcard--slim .pc-top{flex:1;align-items:center;}
body.house-bastion .pcard.pcard--slim .pc-foot{margin-top:0;flex:none;}
body.house-bastion .pcard.pcard--slim .badge{align-self:center;}

@media (max-width:860px){
  body.house-bastion .pcard .p-logo{--p-logo-size:76px;}
  /* The foot row (link + badges) has a min-content wider than a phone column,
     which pushed .pc-body past the card and clipped the text. Cap and wrap. */
  body.house-bastion .pcard.pcard--f .pc-body{max-width:100%;min-width:0;}
  body.house-bastion .pcard.pcard--f .pc-foot{flex-wrap:wrap;row-gap:1rem;}
  body.house-bastion .pcard.pcard--slim{flex-direction:column;align-items:flex-start;gap:1rem;}
  body.house-bastion .pcard.pcard--slim .pc-top{flex-direction:column;align-items:flex-start;gap:.9rem;}
  body.house-bastion .pcard.pcard--slim .badge{align-self:flex-start;}
}


/* ═══ 2. /products ═════════════════════════════════════════════════════════ */

.prod-head{max-width:680px;margin-bottom:clamp(2.25rem,4.5vw,3.5rem);}
.prod-head h2{font-family:var(--font-heading);font-size:clamp(1.8rem,4vw,3rem);font-weight:700;letter-spacing:.06em;color:#fff;line-height:1.15;}
.prod-head p.prod-note{margin-top:1.1rem;font-size:1rem;line-height:1.75;color:var(--rws-white-50);}
.prod-head p.prod-note strong{color:#fff;font-weight:600;}

/* The hero gets a little more light than the generic inner-page hero, with
   both shipped products' colors bleeding in from the right. */
.prod-hero::before{
  /* closest-side keeps both glows inside the box — the hero is container-width,
     so a glow that reaches the edge shows up as a hard rectangle. */
  background:
    radial-gradient(closest-side at 72% 45%,rgba(214,168,30,.12),transparent),
    radial-gradient(closest-side at 86% 60%,rgba(192,57,43,.16),transparent);
  width:75%;
}
.prod-hero .prod-hero-logos{position:absolute;right:var(--container-px);top:50%;transform:translateY(-30%);z-index:1;
  display:flex;gap:1.25rem;align-items:center;}
.prod-hero .prod-hero-logos .p-logo{--p-logo-size:clamp(64px,7vw,96px);}
.prod-hero .prod-hero-logos .p-logo:first-child{transform:rotate(-6deg) translateY(-14px);}
.prod-hero .prod-hero-logos .p-logo:nth-child(2){transform:rotate(5deg) translateY(16px);}
.prod-hero .prod-hero-logos .p-logo--book{width:calc(var(--p-logo-size) * .66);transform:rotate(-3deg) translateY(-6px);}
.prod-hero .prod-hero-logos .p-logo--book img{border-radius:3px;object-fit:cover;}

.prod-now{background:var(--rws-black);padding-top:clamp(2rem,4vw,3rem);}

/* ── Showcase card ── */
.showcase{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;overflow:hidden;
  padding:clamp(1.75rem,4.5vw,3.75rem);margin-bottom:clamp(1.25rem,2.5vw,2rem);
  border:1px solid var(--p-line);
  background:
    radial-gradient(ellipse 55% 85% at 88% 50%,var(--p-glow-soft),transparent 70%),
    linear-gradient(140deg,var(--p-ground),var(--p-ground2) 58%,#09090B);
  transition:border-color .35s,transform .35s var(--ease-out);}
.showcase::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--p-accent),transparent 75%);}
.showcase:hover{border-color:var(--p-line-hi);}
.showcase--flip{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  background:
    radial-gradient(ellipse 55% 85% at 12% 50%,var(--p-glow),transparent 70%),
    radial-gradient(ellipse 40% 60% at 100% 0%,var(--p-glow-soft),transparent 70%),
    linear-gradient(220deg,var(--p-ground),var(--p-ground2) 58%,#09090B);}
.showcase--flip::before{background:linear-gradient(270deg,var(--p-accent),transparent 75%);}
.showcase--flip .sc-visual{order:-1;}

.sc-brand{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.4rem;}
.sc-brand .p-logo{--p-logo-size:clamp(64px,6.5vw,84px);}
.sc-division{font-family:var(--font-heading);font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--p-lite);margin-bottom:.35rem;display:flex;align-items:center;gap:.55rem;}
.sc-copy h3{font-family:var(--font-heading);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;letter-spacing:.05em;color:#fff;line-height:1.02;}
.sc-copy .pronunciation{font-size:.92rem;font-style:italic;color:rgba(255,255,255,.6);margin:0 0 1.1rem;}
.sc-desc{font-size:1.05rem;line-height:1.8;color:rgba(255,255,255,.72);max-width:500px;margin-bottom:1.25rem;}
.sc-price{font-size:.98rem;line-height:1.75;color:rgba(255,255,255,.66);max-width:520px;margin-bottom:1.75rem;}
.sc-price strong{color:#fff;font-weight:600;}

.sc-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.4rem;padding:0;list-style:none;}
.sc-chips li{font-size:.8rem;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.82);
  padding:.32rem .7rem;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);border-radius:999px;}
.sc-chips li.alt{color:var(--p-lite);border-color:rgba(242,163,58,.35);}

.sc-facts{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:0 0 1.75rem;padding:0;list-style:none;font-size:.9rem;color:rgba(255,255,255,.66);}
.sc-facts li{display:flex;align-items:center;gap:.5rem;}
.sc-facts li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--p-accent);flex:none;}
.sc-facts b{color:#fff;font-weight:600;}

.sc-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;}
.sc-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-size:.8rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:1rem 1.6rem;background:var(--p-btn);color:var(--p-btn-ink);
  border:1px solid var(--p-btn);transition:background .25s,box-shadow .25s,transform .25s;}
.sc-btn::after{content:'→';transition:transform .25s;}
.sc-btn:hover{background:var(--p-btn-hi);box-shadow:0 10px 34px -10px var(--p-glow);transform:translateY(-2px);}
.sc-btn:hover::after{transform:translateX(4px);}
.sc-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22);}
.sc-btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);box-shadow:none;}
.sc-btn-ghost::after{content:none;}

/* Visual: a real screenshot in a lit frame. */
.sc-visual{position:relative;margin:0;display:flex;justify-content:center;perspective:1400px;}
.sc-visual::before{content:'';position:absolute;inset:8% 4%;z-index:0;background:radial-gradient(closest-side,var(--p-glow),transparent);filter:blur(24px);opacity:.8;}
.sc-frame{position:relative;z-index:1;width:100%;overflow:hidden;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:#0B0B0D;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6);
  transform:rotateY(-9deg) rotateX(3deg);transition:transform .6s var(--ease-out);}
.showcase--flip .sc-frame{transform:rotateY(9deg) rotateX(3deg);}
.showcase:hover .sc-frame{transform:rotateY(0) rotateX(0);}
.sc-frame img{display:block;width:100%;height:auto;}
.sc-bar{display:flex;align-items:center;gap:.45rem;padding:.55rem .8rem;background:#15171E;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:.74rem;letter-spacing:.04em;color:rgba(255,255,255,.6);}
.sc-bar i{width:9px;height:9px;border-radius:50%;background:#3a3d48;display:block;flex:none;}
.sc-bar span{margin-left:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-bar b{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;color:#fff;background:#C0392B;border-radius:4px;padding:.08rem .45rem;font-weight:700;letter-spacing:.1em;}
/* The Multistream dock is a tall portrait capture — show its top, where the
   four live platforms are, in a phone-width frame. */
.sc-frame--dock{width:min(340px,100%);}
.sc-frame--dock img{aspect-ratio:1140/1180;object-fit:cover;object-position:top;}

/* Pensive visual: the two covers, fanned. The covers ARE the series' logo. */
.sc-books{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;padding:1rem 0;}
.sc-books img{display:block;width:min(46%,230px);height:auto;border-radius:3px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08);transition:transform .6s var(--ease-out);}
.sc-books img:first-child{transform:rotate(-6deg) translateX(14%);z-index:1;}
.sc-books img:last-child{transform:rotate(5deg) translate(-14%,6%);z-index:2;}
.showcase:hover .sc-books img:first-child{transform:rotate(-8deg) translateX(6%);}
.showcase:hover .sc-books img:last-child{transform:rotate(7deg) translate(-6%,6%);}
.sc-copy .sc-series{font-family:var(--font-heading);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:.55rem 0 1.2rem;}

/* ── On the roadmap: one card per division, in that division's own colors ──
   Values copied from the house ramps in css/houses.css (base/mid/accent/light).
   Those are DIVISION colors on purpose — nothing here is a shipped product. */
.prod-forge{background:var(--rws-void);border-top:1px solid var(--rws-border);}
.forge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;}
/* Three narrow columns: stack each item's status under its text. */
.forge-grid .fc li{flex-direction:column;align-items:flex-start;gap:.6rem;}
.fc{--h-base:#0D0D0F;--h-mid:#151518;--h-accent:#C0392B;--h-light:#F5F5F5;
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(1.5rem,3vw,2.25rem);border:1px solid color-mix(in srgb,var(--h-accent) 22%,transparent);
  background:radial-gradient(ellipse 80% 70% at 100% 0%,color-mix(in srgb,var(--h-accent) 14%,transparent),transparent 65%),
             linear-gradient(160deg,var(--h-mid),var(--h-base) 62%);
  transition:transform .35s var(--ease-out),border-color .35s;}
.fc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--h-accent);}
.fc:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--h-accent) 45%,transparent);}
.fc--bastion{--h-base:#0A0F1C;--h-mid:#162033;--h-accent:#4F7BE8;--h-light:#E6EEF5;}
.fc--foundry{--h-base:#140A08;--h-mid:#2E0E03;--h-accent:#FF6A00;--h-light:#FFD166;}
.fc--mythrilworks{--h-base:#03202B;--h-mid:#0B3E52;--h-accent:#22E0FF;--h-light:#EAFBFF;}
.fc--athenaeum{--h-base:#141014;--h-mid:#2E2216;--h-accent:#E8B95C;--h-light:#F7F1E3;}

.fc-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;}
.fc-head img{width:56px;height:56px;flex:none;object-fit:contain;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--h-accent) 55%,transparent));}
.fc-div{font-family:var(--font-heading);font-size:1rem;font-weight:700;letter-spacing:.1em;color:#fff;line-height:1.3;}
.fc-link{font-family:var(--font-heading);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--h-light);
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.3rem;opacity:.9;transition:opacity .2s;}
.fc-link::after{content:'→';transition:transform .25s;}
.fc-link:hover{opacity:1;}
.fc-link:hover::after{transform:translateX(4px);}
.fc ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.08);}
.fc li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.06);}
.fc li:last-child{border-bottom:0;padding-bottom:0;}
.fc-name{font-family:var(--font-heading);font-size:.98rem;font-weight:600;letter-spacing:.08em;color:#fff;}
.fc-sub{font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.62);margin-top:.2rem;}
.fc-status{flex:none;font-family:var(--font-heading);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;padding:.28rem .7rem;border:1px solid;}
.fc-status.dev{color:var(--h-light);border-color:color-mix(in srgb,var(--h-accent) 50%,transparent);}
.fc-status.soon{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.14);}

@media (max-width:960px){
  .prod-hero .prod-hero-logos{display:none;}
  .showcase,.showcase--flip{grid-template-columns:minmax(0,1fr);}
  .showcase--flip .sc-visual{order:0;}
  .sc-frame,.showcase--flip .sc-frame{transform:none;}
  .forge-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){
  .showcase{padding:1.5rem 1.25rem;}
  .sc-brand{gap:1rem;}
  .sc-cta .sc-btn{width:100%;justify-content:center;}
  .fc li{flex-direction:column;align-items:flex-start;gap:.6rem;}
}
@media (prefers-reduced-motion:reduce){
  .sc-books img{transition:none;}
  .sc-frame,.showcase--flip .sc-frame{transform:none;transition:none;}
  .fc,.showcase,.sc-btn{transition:none;}
}