/* ============================================================================
   forge-pro.css — Forge Pro product pages (/forge-pro/*)
   Builds on styles.css tokens + project.css components. Loaded last.
   Product accent leans on the ember/blue side of the brand to echo the app icon.
   ========================================================================= */

/* --- product hero (logo + copy) ------------------------------------------ */
.fp-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4.5rem)); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.fp-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}
.fp-hero__eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ember); display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 1.1rem;
}
.fp-hero__eyebrow::before { content: ""; width: 1.4rem; height: 1px; background: var(--ember); opacity: 0.65; }
.fp-hero__title { font-size: clamp(2.4rem, 6.5vw, 4.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.fp-hero__tag { margin-top: 1rem; font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--text-0); font-weight: 600; letter-spacing: -0.02em; max-width: 22ch; }
.fp-hero__lede { margin-top: 1.2rem; max-width: 56ch; font-size: 1.08rem; color: var(--text-1); line-height: 1.65; }

/* app icon */
.fp-hero__art { position: relative; justify-self: end; flex: none; }
.fp-logo {
  width: clamp(150px, 26vw, 260px); height: auto; display: block; border-radius: 22%;
  filter: drop-shadow(0 24px 60px rgba(245, 70, 39, 0.28)) drop-shadow(0 10px 30px rgba(39, 118, 245, 0.20));
}
@media (max-width: 760px) {
  .fp-hero__inner { grid-template-columns: 1fr; }
  .fp-hero__art { justify-self: start; order: -1; }
  .fp-logo { width: clamp(120px, 34vw, 170px); }
}

/* status pill (reuses ping dot pattern, but ember/beta tone) */
.fp-status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ember); border: 1px solid rgba(245, 70, 39, 0.30); border-radius: 99px; padding: 0.35rem 0.85rem;
  margin-top: 1.5rem;
}
.fp-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 var(--ember-glow); animation: ping 2.4s ease-out infinite; }

/* --- action row ---------------------------------------------------------- */
.fp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

/* --- architecture diagram ------------------------------------------------ */
.fp-arch {
  font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.9; color: var(--text-1);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; margin: 1.2rem 0 0.4rem; overflow-x: auto; max-width: 68ch;
}
.fp-arch b { color: var(--text-0); font-weight: 600; }
.fp-arch .fp-arch__arrow { color: var(--ember); }
.fp-arch .fp-arch__node { color: var(--blue-2); }

/* --- three-pieces / definition rows -------------------------------------- */
.fp-pieces { display: grid; gap: 0.8rem; max-width: 72ch; counter-reset: fp; }
.fp-piece { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 1.1rem 1.3rem; }
.fp-piece__n { flex: none; width: 1.9rem; height: 1.9rem; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: 0.82rem; border-radius: 7px; background: var(--bg-4); color: var(--ember); border: 1px solid var(--line-loud); }
.fp-piece__body { min-width: 0; }
.fp-piece__title { color: var(--text-0); font-weight: 600; }
.fp-piece__desc { color: var(--text-2); font-size: 0.92rem; margin-top: 0.25rem; line-height: 1.55; }

/* --- FAQ (disclosure) ---------------------------------------------------- */
.fp-faq { max-width: 74ch; display: grid; gap: 0.6rem; }
.fp-faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.fp-faq__item[open] { border-color: var(--line-loud); }
.fp-faq__q { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; color: var(--text-0); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fp-faq__q::-webkit-details-marker { display: none; }
.fp-faq__q::after { content: "+"; font-family: var(--font-mono); color: var(--ember); font-size: 1.2rem; flex: none; transition: transform var(--dur-2) var(--ease); }
.fp-faq__item[open] .fp-faq__q::after { transform: rotate(45deg); }
.fp-faq__a { padding: 0 1.2rem 1.1rem; color: var(--text-2); line-height: 1.65; font-size: 0.94rem; }
.fp-faq__a a { color: var(--blue-2); }

/* --- previous-generation callout ----------------------------------------- */
.fp-prevgen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem;
  border: 1px dashed var(--line-loud); border-radius: var(--radius); background: var(--bg-1);
  padding: 1.2rem 1.4rem; margin-top: 0.5rem;
}
.fp-prevgen__tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.fp-prevgen__text { color: var(--text-2); font-size: 0.95rem; flex: 1 1 320px; line-height: 1.55; }
.fp-prevgen__text b { color: var(--text-0); }
.fp-prevgen__link { color: var(--ember); font-family: var(--font-mono); font-size: 0.88rem; white-space: nowrap; }
.fp-prevgen__link:hover { text-decoration: underline; }

/* --- resource footer links ----------------------------------------------- */
.fp-resources { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.fp-resource {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2);
  padding: 0.6rem 0.95rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-1);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-1) var(--ease), background var(--dur-2) var(--ease);
}
.fp-resource:hover { border-color: var(--blue); color: var(--text-0); background: var(--bg-3); }
.fp-resource span { color: var(--text-3); }

/* --- request-access CTA panel -------------------------------------------- */
.fp-cta {
  border: 1px solid rgba(245, 70, 39, 0.30);
  background: linear-gradient(160deg, var(--bg-3), var(--bg-1));
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem;
  box-shadow: 0 20px 60px -30px var(--ember-glow);
}
.fp-cta__text { max-width: 48ch; }
.fp-cta__eyebrow { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); display: block; margin-bottom: 0.7rem; }
.fp-cta__text h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -0.02em; }
.fp-cta__text p { color: var(--text-2); margin-top: 0.7rem; line-height: 1.6; }
.fp-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.fp-cta__email { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-3); }
.fp-cta__email a { color: var(--blue-2); }
@media (max-width: 640px) { .fp-cta__actions { align-items: stretch; width: 100%; } .fp-cta__actions .btn { justify-content: center; } }

/* --- small utilities (CSP forbids inline style attributes) --------------- */
.fp-mt { margin-top: 1.2rem; }
.fp-mt-lg { margin-top: 1.6rem; }
.fp-link-ember { color: var(--ember); }
.fp-status--archived { color: var(--text-3); border-color: var(--line-loud); }
.fp-status--archived .dot { background: var(--text-3); box-shadow: none; animation: none; }

/* --- generic legal/support prose page ------------------------------------ */
.fp-doc { max-width: 74ch; }
.fp-doc h2 { font-size: 1.3rem; letter-spacing: -0.01em; margin: 2.2rem 0 0.8rem; color: var(--text-0); }
.fp-doc h3 { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; color: var(--text-0); }
.fp-doc p { color: var(--text-1); line-height: 1.7; margin-bottom: 1rem; }
.fp-doc ul { margin: 0 0 1.1rem; }
.fp-doc li { position: relative; padding: 0.3rem 0 0.3rem 1.4rem; color: var(--text-1); line-height: 1.55; }
.fp-doc li::before { content: "▹"; position: absolute; left: 0; color: var(--ember); }
.fp-doc a { color: var(--blue-2); }
.fp-doc strong { color: var(--text-0); }
.fp-doc .fp-doc__meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-3); }