/* ============================================================================
   if-shell.css - Intellifields multi-product shell
   ----------------------------------------------------------------------------
   Shared across every page so the product family reads as one company:
     .product-switch  - the nav control that moves between products
     .product-grid    - the homepage hub cards
     --pa-*           - per-product accent, set on <body data-product="...">

   Each page keeps its own inline <style> for page-specific layout. This file
   only carries what must stay identical everywhere.
   ========================================================================== */

/* -- Per-product accent -----------------------------------------------------
   Intellifields corporate gold is the default. A product page overrides it by
   setting data-product on <body>, so one component set serves every product. */
:root,
body[data-product="corporate"] {
  --pa:        #B8860B;
  --pa-dark:   #96700A;
  --pa-bright: #F4E28F;
  --pa-dim:    #FEF9EC;
  --pa-glow:   rgba(184,134,11,0.18);
}
body[data-product="horizon"] {
  --pa:        #B8860B;
  --pa-dark:   #96700A;
  --pa-bright: #F4E28F;
  --pa-dim:    #FEF9EC;
  --pa-glow:   rgba(184,134,11,0.18);
}
body[data-product="zoomcanvas"] {
  --pa:        #6D4AFF;
  --pa-dark:   #5636D6;
  --pa-bright: #B9A6FF;
  --pa-dim:    #F1EDFF;
  --pa-glow:   rgba(109,74,255,0.20);
}

/* -- Product switcher in the header ---------------------------------------- */
.product-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
}
.product-switch a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.product-switch a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.product-switch a[aria-current="page"] {
  color: #0A0B10;
  background: var(--pa-bright);
}
.product-switch .ps-soon {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
}
.product-switch a[aria-current="page"] .ps-soon {
  background: rgba(10,11,16,0.16);
  color: rgba(10,11,16,0.75);
}

/* -- Homepage product hub --------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.25rem;
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.09);
  box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 4px 18px rgba(15,23,42,0.07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--pc-accent, var(--pa));
  box-shadow: 0 2px 8px rgba(15,23,42,0.08), 0 14px 40px rgba(15,23,42,0.12);
}
.product-card--zoomcanvas { --pc-accent: #6D4AFF; }
.product-card--horizon    { --pc-accent: #B8860B; }

.product-card .pc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.product-card .pc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--pc-accent, var(--pa));
}
.product-card .pc-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pc-status--live { color: #047857; background: #D1FAE5; }
.pc-status--soon { color: #5636D6; background: #EDE9FE; }

.product-card h3 { font-family: 'Sora', sans-serif; font-size: 1.12rem; margin: 0; }
.product-card .pc-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94A3B8;
  margin: 0 0 0.15rem;
}
.product-card p.pc-body { font-size: 0.9rem; line-height: 1.6; color: #475569; margin: 0; }
.product-card ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.product-card ul li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.85rem;
  color: #475569;
}
.product-card ul li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pc-accent, var(--pa));
}
.product-card .pc-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: auto; padding-top: 0.5rem;
}
.product-card .pc-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 1.05rem;
  border-radius: 10px;
  font-size: 0.85rem; font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease;
}
.product-card .pc-btn--primary {
  color: #fff; background: var(--pc-accent, var(--pa));
}
.product-card .pc-btn--primary:hover { box-shadow: 0 8px 24px var(--pa-glow); }
.product-card .pc-btn--ghost {
  color: #0F172A; background: #F1F5F9;
}
.product-card .pc-btn--ghost:hover { background: #E2E8F0; }

@media (max-width: 720px) {
  .product-switch { width: 100%; justify-content: center; }
  .product-switch a { flex: 1; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   HEADER FIT (shared)
   Each page carries its own inline <style> that sets .site-nav sizing with no
   media query, and inline blocks win on equal specificity because they come
   later in the document. These rules are scoped one level deeper
   (.site-header .site-nav) so they still apply once the product switcher has
   taken ~220px out of a single non-wrapping header row.
   index.html has its own copy of the same logic inside its inline block.
   ------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .site-header { gap: 1.25rem; }
  .site-header .site-nav { gap: 0; }
  .site-header .site-nav a { padding: 0.35rem 0.6rem; font-size: 0.82rem; }
}
@media (max-width: 1260px) {
  .site-header .site-nav a[href*="#books"],
  .site-header .site-nav a[href*="#faq"] { display: none; }
}
@media (max-width: 1120px) {
  .site-header .site-nav a[href*="#compare"],
  .site-header .site-nav a[href*="#contact"] { display: none; }
}
@media (max-width: 990px) {
  .site-header .site-nav { display: none; }
}
@media (max-width: 560px) {
  .site-header {
    height: auto; min-height: 60px;
    flex-wrap: wrap; padding-block: 0.6rem; gap: 0.6rem;
  }
  .site-header .brand img { height: 36px; }
  .site-header .product-switch { order: 3; width: 100%; }
  .site-header .product-switch a { font-size: 0.74rem; padding: 0.3rem 0.55rem; }
}
