/* ============================================================================
   product.css — look & feel for the product page template
   ----------------------------------------------------------------------------
   Styles the reusable widget library (templates/products/widgets.html) composed
   by templates/products/product.html. Builds on the brand tokens in brand.css
   (colors, type, spacing) and design-system.css (.container, .btn, .eyebrow).
   Each widget is a
   full-bleed <section>; .container re-constrains the inner content.
   ========================================================================== */

.product-page {
  --prod-shadow: 0 1px 2px rgba(16, 31, 56, 0.04), 0 12px 30px -12px rgba(16, 31, 56, 0.18);
  --prod-shadow-hover: 0 2px 4px rgba(16, 31, 56, 0.06), 0 22px 48px -16px rgba(0, 100, 224, 0.28);
}

/* Vertical rhythm between stacked widgets. Related/final CTA sit outside
   .prod-flow (they're page-level closers, not per-page section data), but
   need the same rhythm so they don't collapse into each other. */
.prod-flow > section,
.prod-related,
.prod-final { padding-block: clamp(3rem, 6vw, 5.5rem); }
.prod-flow > section + section,
.prod-related,
.prod-final { border-top: 1px solid var(--c-border); }

/* First section after the hero needs its own background so it doesn't fade
   into the hero's near-white gradient. */
.prod-flow > section:first-child { background: var(--c-subtle); }

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.prod-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(53, 116, 227, 0.10), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 70%);
  border-bottom: 1px solid var(--c-border);
}

.prod-hero__glow {
  position: absolute;
  inset: -30% -10% auto auto;
  width: 46rem;
  height: 46rem;
  background:
    conic-gradient(from 200deg at 50% 50%, rgba(0, 100, 224, 0.16), rgba(53, 116, 227, 0.05), transparent 55%);
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.9;
}

.prod-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.prod-hero__eyebrow { margin-bottom: var(--space-4); }

.prod-hero h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  max-width: 16ch;
}

.prod-hero__lede {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--c-muted);
  max-width: 46ch;
  margin-top: var(--space-2);
}

.prod-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.prod-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}
.prod-hero__trust li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-body);
}
.prod-hero__trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0, 100, 224, 0.25);
  background-image: linear-gradient(135deg, var(--c-secondary), var(--c-primary));
}

/* Hero credential card */
.prod-hero__card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--prod-shadow);
}
.prod-hero__card-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.prod-hero__card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.25;
  margin: var(--space-3) 0 var(--space-6);
}
.prod-hero__card-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.prod-hero__card-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}
.prod-hero__card-list li:first-child { padding-top: 0; border-top: 0; }
.prod-hero__card-list strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.02em;
}
.prod-hero__card-list span { color: var(--c-muted); font-size: 0.92rem; }
.prod-hero__card-link {
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
}
.prod-hero__card-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   SHARED: section heads, bands
   ------------------------------------------------------------------------- */
.prod-band--subtle { background: var(--c-subtle); }

.prod-band__head { max-width: var(--measure); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.prod-band__lede {
  font-size: 1.12rem;
  color: var(--c-muted);
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   FEATURE (split copy + spec card)
   ------------------------------------------------------------------------- */
.prod-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.prod-feature--solo .prod-feature__grid { grid-template-columns: minmax(0, 1fr); }
.prod-feature--solo .prod-feature__body { max-width: var(--measure); }

.prod-feature__body h2 { margin-bottom: var(--space-4); }
.prod-feature__body p { font-size: 1.08rem; color: var(--c-body); margin: 0; }

/* Alternate sections flip the columns for a woven layout. */
.prod-feature--alt .prod-feature__body { order: 2; }
.prod-feature--alt .prod-feature__panel { order: 1; }

.prod-feature__panel {
  background: linear-gradient(180deg, #fbfdff, #f4f8ff);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--prod-shadow);
}

/* ---------------------------------------------------------------------------
   MEDIA (image + copy)
   ------------------------------------------------------------------------- */
.prod-media__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.prod-media--solo .prod-media__grid { grid-template-columns: minmax(0, 1fr); }

/* Image-first variant, mirroring .prod-feature--alt. */
.prod-media--alt .prod-media__body { order: 2; }
.prod-media--alt .prod-media__figure { order: 1; }

.prod-media__body h2 { margin-bottom: var(--space-4); }
.prod-media__body p { font-size: 1.08rem; color: var(--c-body); margin: 0; }
.prod-media__body .prod-checklist { margin-top: var(--space-5); }

.prod-media__figure { margin: 0; }
.prod-media__figure img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin-inline: auto;
}
.prod-media__figure figcaption {
  max-width: 34rem;
  margin: var(--space-4) auto 0;
  color: var(--c-muted);
  font-size: 0.92rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   CHECKLIST
   ------------------------------------------------------------------------- */
.prod-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.prod-checklist--cols {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3) var(--space-8);
}
.prod-checklist li {
  position: relative;
  padding-left: 2rem;
  font-weight: 500;
  color: var(--c-body);
}
.prod-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background:
    linear-gradient(135deg, var(--c-secondary), var(--c-primary));
  /* check mark */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black'/%3E%3C/svg%3E");
}
.prod-checklist li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.34em;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   COSTS (negative-impact tiles)
   ----------------------------------------------------------------------------
   The visual opposite of .prod-checklist: a warm-tinted band of tiles marked
   with a downward arrow instead of blue checkmarks. Overrides the
   :first-child subtle background above (hence the > section specificity) so
   the opening band reads as its own moment, not a continuation of the hero.
   ------------------------------------------------------------------------- */
.prod-flow > section.prod-costs {
  background:
    radial-gradient(85% 130% at 0% 0%, rgba(178, 63, 44, 0.07), transparent 62%),
    var(--c-subtle);
}
.prod-costs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* min() keeps the tiles from overflowing narrow viewports; 18rem lands the
     six items as an even 3x2 at desktop width rather than a ragged 4+2. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-3);
}
.prod-cost {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 3px solid #b23f2c;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  color: var(--c-ink);
  box-shadow: var(--prod-shadow);
}
.prod-cost::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: #b23f2c;
  /* downward arrow */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v14.2l6.1-6.1 1.4 1.4L11 21.4 2.5 12.9l1.4-1.4 6.1 6.1V3z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v14.2l6.1-6.1 1.4 1.4L11 21.4 2.5 12.9l1.4-1.4 6.1 6.1V3z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   GRID (cards)
   ------------------------------------------------------------------------- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.prod-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--prod-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.prod-card h3 { margin: 0; font-size: 1.1rem; }
.prod-card p { margin: 0; color: var(--c-muted); font-size: 0.96rem; }

.prod-card--link {
  text-decoration: none;
  color: inherit;
  justify-content: space-between;
}
.prod-card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--prod-shadow-hover);
  border-color: rgba(0, 100, 224, 0.35);
}
.prod-card--link h3 { color: var(--c-ink); }
.prod-card__arrow {
  margin-top: var(--space-3);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--c-primary);
}

/* ---------------------------------------------------------------------------
   STEPS
   ------------------------------------------------------------------------- */
.prod-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  counter-reset: step;
}
.prod-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--prod-shadow);
}
.prod-step__num {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--c-secondary), var(--c-primary));
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  box-shadow: 0 8px 18px -8px rgba(0, 100, 224, 0.6);
}
.prod-step__body h3 { margin: 0 0 var(--space-2); }
.prod-step__body p { margin: 0; color: var(--c-muted); }

/* ---------------------------------------------------------------------------
   STATS (dark band)
   ------------------------------------------------------------------------- */
.prod-stats {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--c-dark-2), transparent 55%),
    var(--c-dark);
  color: #fff;
}
.prod-stats__title { color: #fff; text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.prod-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.prod-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.prod-stat__num {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, #fff, #9dc2ff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.prod-stat__label { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }

/* ---------------------------------------------------------------------------
   COMPARISON TABLE
   ------------------------------------------------------------------------- */
.prod-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--c-border); box-shadow: var(--prod-shadow); }
.prod-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 32rem;
}
.prod-table th,
.prod-table td {
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.96rem;
}
.prod-table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-subtle);
}
.prod-table tbody th[scope="row"] { font-weight: 600; color: var(--c-ink); }
.prod-table tbody tr:last-child th,
.prod-table tbody tr:last-child td { border-bottom: 0; }
.prod-table .is-us {
  background: rgba(0, 100, 224, 0.05);
  font-weight: 600;
  color: var(--c-ink);
  box-shadow: inset 3px 0 0 var(--c-primary);
}
.prod-table thead th.is-us { color: var(--c-primary); background: rgba(0, 100, 224, 0.08); }

/* ---------------------------------------------------------------------------
   QUOTE (dark)
   ------------------------------------------------------------------------- */
.prod-quote {
  background:
    radial-gradient(120% 140% at 100% 0%, var(--c-dark-2), transparent 55%),
    var(--c-dark);
  color: #fff;
}
.prod-quote__text {
  margin: 0;
  max-width: 52rem;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  position: relative;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 3px solid var(--c-secondary);
}
.prod-quote__text cite {
  display: block;
  margin-top: var(--space-6);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------------
   FAQ ACCORDION
   ------------------------------------------------------------------------- */
.prod-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 52rem;
}
.prod-faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  background: #fff;
}
.prod-faq__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--c-ink);
  list-style: none;
}
.prod-faq__item summary::-webkit-details-marker { display: none; }
.prod-faq__item summary::after {
  content: "+";
  float: right;
  color: var(--c-primary);
}
.prod-faq__item[open] summary::after { content: "\2212"; }
.prod-faq__item p {
  margin: var(--space-3) 0 0;
  color: var(--c-body);
}

/* ---------------------------------------------------------------------------
   INLINE CTA BAND
   ------------------------------------------------------------------------- */
.prod-band--cta { background: var(--c-subtle); }
.prod-cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--prod-shadow);
}
.prod-cta-inline__copy { max-width: 44ch; }
.prod-cta-inline__copy h2 { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.prod-cta-inline__copy p { margin: 0; color: var(--c-muted); }
.prod-cta-inline__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prod-cta-inline .btn { white-space: nowrap; }

/* Dark variant, so pages carrying several inline CTAs can alternate instead of
   stacking the same white card down the page. */
.prod-band--cta-dark { background: var(--c-surface); }
.prod-band--cta-dark .prod-cta-inline {
  background:
    radial-gradient(110% 160% at 100% 0%, var(--c-dark-2), transparent 58%),
    var(--c-dark);
  border-color: transparent;
}
.prod-band--cta-dark .prod-cta-inline__copy h2 { color: #fff; }
.prod-band--cta-dark .prod-cta-inline__copy p { color: rgba(255, 255, 255, 0.75); }

/* ---------------------------------------------------------------------------
   RELATED + FINAL CTA
   ------------------------------------------------------------------------- */
.prod-related { background: var(--c-subtle); }

.prod-final {
  background:
    radial-gradient(120% 160% at 50% -20%, var(--c-dark-2), transparent 60%),
    var(--c-dark);
  color: #fff;
  text-align: center;
}
.prod-final h2 { color: #fff; }
.prod-final__lede {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.15rem;
  max-width: 46ch;
  margin-inline: auto;
}
.prod-final__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}
.prod-final__contact { margin-top: var(--space-6); font-size: 0.95rem; }
.prod-final__contact a { color: #fff; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .prod-hero__grid { grid-template-columns: 1fr; }
  .prod-hero__card { order: 2; }
  .prod-feature__grid { grid-template-columns: 1fr; }
  /* On stacked layouts always read copy first. */
  .prod-feature--alt .prod-feature__body { order: 0; }
  .prod-feature--alt .prod-feature__panel { order: 1; }
  .prod-media__grid { grid-template-columns: 1fr; }
  .prod-media--alt .prod-media__body { order: 0; }
  .prod-media--alt .prod-media__figure { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .prod-card--link { transition: none; }
}