/*
 * Copyright (c) 2026 Omega Point Solutions LLC. All rights reserved.
 * Proprietary and confidential.
 *
 * product.css -- styling for the per-product landing pages (pages/<slug>.html).
 *
 * The brief markup (.art, .lede, .factbox, .faq, .byline) used to live only inside
 * the modal on pages/products.html, styled by that page's inline <style>. Now that
 * each brief has its own page, those rules have to be shared, so they live here.
 *
 * This is a NEW FILE rather than an addition to omega.css on purpose. Cloudflare does
 * not include the query string in the cache key, so bumping omega.css?v=N does NOT
 * bust the edge cache and would have served the old stylesheet to returning visitors.
 * A new path has no cached predecessor.
 *
 * --pc is the per-product accent, set inline on <body> from the product's data-accent.
 */

/* ---- hero ---- */
.crumb {
  font: 600 12px/1 'JetBrains Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.crumb a { color: var(--t2); text-decoration: none; }
.crumb a:hover { color: var(--acc); }

.prod-hero {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
}
.prod-hero .prodlogo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid var(--card-b);
  background: rgba(255, 255, 255, .03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 10px;
}
.prod-hero .prodlogo img,
.prod-hero .prodlogo svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.prod-hero > div { flex: 1 1 320px; min-width: 0; }
.prod-hero .ptag {
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc, var(--acc));
  margin-bottom: 10px;
}
.prod-hero .lede {
  font-size: 1.12rem;
  color: var(--t1);
  max-width: 62ch;
}
.prod-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.prod-avail {
  font: 600 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t2);
}

/* ---- brief body, lifted from the products.html modal so the copy renders identically ---- */
.art { padding: 0; max-width: 74ch; }
.art h3 { color: var(--t0); font-size: 1.16rem; margin: 1.8em 0 .45em; }
.art h3:first-of-type { margin-top: .4em; }
.art p, .art li { color: var(--t1); font-size: .99rem; }
.art .lede {
  font-size: 1.12rem;
  color: var(--t0);
  border-left: 3px solid var(--pc, var(--acc));
  padding-left: 16px;
  margin: .2em 0 1.2em;
}
.art ul { padding-left: 20px; }
.art li { margin: 7px 0; }

.factbox {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--card-b);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 1.1em 0;
}
.factbox dl { display: grid; grid-template-columns: 140px 1fr; gap: 7px 14px; margin: 0; }
.factbox dt {
  font: 600 .7rem/1.4 'JetBrains Mono', monospace;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--t2);
}
.factbox dd { margin: 0; color: var(--t0); font-size: .92rem; }
@media (max-width: 560px) {
  .factbox dl { grid-template-columns: 1fr; gap: 2px 0; }
  .factbox dt { margin-top: 9px; }
}

.faq { border-top: 1px solid var(--line); margin-top: 1em; }
.faq details { border-bottom: 1px solid var(--line); padding: 13px 0; }
.faq summary { cursor: pointer; color: var(--t0); font-weight: 600; }
.faq summary::marker { color: var(--acc); }

.byline {
  font: 500 .8rem 'JetBrains Mono', monospace;
  color: var(--t2);
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 16px;
}

/* ---- call to action ---- */
#get-started { border-top: 1px solid var(--line); padding-top: 30px; max-width: 74ch; }
#get-started h2 { margin-top: 0; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 14px; }
.fineprint { font-size: .88rem; color: var(--t2); }