/* ===== PRODUCT DETAIL PAGE ===== */
.product-hero {
  padding: 156px 0 0;
  overflow: hidden;
}

.product-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 64px;
}

.product-hero .eyebrow-tag {
  display: inline-block;
  padding: 6px 16px;
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--secondary);
  margin-bottom: 20px;
}

.product-hero h1 {
  font-size: var(--fs-h2);
}

.product-hero p.lead {
  margin-top: 20px;
  font-size: var(--fs-body-lg);
}

.product-hero .btn {
  margin-top: 32px;
}

.product-hero-media {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--primary), var(--secondary));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.product-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
}

.product-hero-lottie {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
}

.product-hero-lottie svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 34px rgba(0,0,0,.28));
}

.product-illustration-lottie {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
  position: relative;
  z-index: 2;
}

.product-illustration-lottie svg {
  width: 100%;
  height: 100%;
  max-width: 300px;
}

@media (max-width: 700px) {
  .product-illustration-lottie {
    min-height: 240px;
  }
}

/* Product capability rows (alternating image/text; used only on product
   detail pages via js/products.js — the homepage Problems/Solutions
   sections now use .feature-band instead, see components.css) */
.solution-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}

.solution-row:last-child {
  border-bottom: none;
}

.solution-row:nth-child(even) .solution-media {
  order: 2;
}

.solution-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-alt), var(--border));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.solution-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-media .media-icon {
  font-size: 3rem;
  opacity: 0.35;
}

.solution-number {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--secondary);
  margin-bottom: 12px;
}

.solution-content h3 {
  margin-bottom: 14px;
}

.capability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.capability-tags span {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.capability-tags span::before {
  content: '✓';
  color: var(--secondary);
  font-weight: var(--fw-bold);
}

/* ===== ABOUT PAGE ===== */
.about-hero {
  padding: 156px 0 64px;
  text-align: center;
}

.about-hero h1 {
  max-width: 820px;
  margin: 0 auto;
}

.about-hero .hero-sub {
  max-width: 640px;
}

.about-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}

.about-intro .eyebrow { margin-bottom: 8px; }

.differentiator-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.differentiator-item {
  display: flex;
  gap: 16px;
}

.differentiator-item .diff-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.differentiator-item h4 {
  margin-bottom: 6px;
}

.differentiator-item p {
  font-size: var(--fs-small);
}

.quote-banner {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.quote-banner::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 32px;
  font-size: 10rem;
  font-family: Georgia, serif;
  color: rgba(255,255,255,0.06);
  line-height: 1;
}

.quote-banner p {
  color: #fff;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

/* ===== JOIN WAITLIST PAGE ===== */
.waitlist-hero {
  padding: 156px 0 0;
  text-align: center;
}

.waitlist-hero h1 {
  max-width: 780px;
  margin: 0 auto;
}

.waitlist-hero .hero-cta-row {
  margin-top: 32px;
}

.waitlist-form-section {
  background: var(--surface-alt);
}

.waitlist-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-md);
}

.waitlist-form-wrap .form-intro {
  text-align: center;
  margin-bottom: 36px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

.form-group label .required {
  color: var(--error);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-faint);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.14);
  outline: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 110px;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--error);
}

.form-error-msg {
  font-size: var(--fs-xs);
  color: var(--error);
  display: none;
}

.form-group.has-error .form-error-msg {
  display: block;
}

.form-submit {
  width: 100%;
  margin-top: 8px;
}

.form-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  display: none;
  align-items: center;
  gap: 10px;
}

.form-status.is-visible {
  display: flex;
}

.form-status.success {
  background: rgba(31, 157, 85, 0.1);
  color: var(--success);
}

.form-status.error {
  background: rgba(224, 72, 62, 0.1);
  color: var(--error);
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}

.form-submit.is-loading .spinner {
  display: inline-block;
}

.form-submit.is-loading .btn-label {
  opacity: 0.7;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== BLOG HERO ===== */
.blog-hero {
  padding: 156px 0 64px;
  text-align: center;
}

.blog-hero h1 {
  max-width: 760px;
  margin: 0 auto;
}

/* ===== ARTICLE PAGE ===== */
.article-hero {
  padding: 156px 0 40px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
}

.article-body p {
  color: var(--text);
  font-size: var(--fs-body-lg);
  margin-bottom: 20px;
  line-height: var(--lh-normal);
}

/* ===== STORY DETAIL (back link, prev/next nav) ===== */
.story-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--secondary);
  text-decoration: none;
  margin-bottom: 20px;
  transition: transform var(--transition-fast);
}

.story-back-link:hover {
  transform: translateX(-4px);
}

.article-hero .blog-card-date {
  display: block;
  margin-bottom: 12px;
}

.story-detail-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}

.story-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.story-nav-link:hover {
  border-color: var(--secondary);
  transform: translateY(-2px);
}

.story-nav-link span {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--secondary);
}

.story-nav-link b {
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.story-nav-next {
  text-align: right;
  align-items: flex-end;
}

@media (max-width: 700px) {
  .story-detail-nav {
    grid-template-columns: 1fr;
  }
  .story-nav-next {
    text-align: left;
    align-items: flex-start;
  }
}

/* ===== RESPONSIVE PAGES ===== */
@media (max-width: 900px) {
  .product-hero-inner,
  .about-intro {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .product-hero-media {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 809px) {
  .solution-row {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0;
  }
  .solution-row:nth-child(even) .solution-media {
    order: 0;
  }
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .waitlist-form-wrap {
    padding: 28px 20px;
  }
  .quote-banner {
    padding: 40px 24px;
  }
  .quote-banner p {
    font-size: 1.25rem;
  }
}

/* ===== PRODUCT ILLUSTRATION SYSTEM ===== */
.product-illustration{background:radial-gradient(circle at 25% 20%,#e9f5ff,transparent 34%),linear-gradient(145deg,#f7faff,#eaf3ff);position:relative;isolation:isolate}.product-art-card{width:68%;min-height:190px;background:#fff;border:1px solid rgba(13,27,62,.08);border-radius:22px;padding:24px;box-shadow:0 20px 45px rgba(13,27,62,.12);position:relative;z-index:3;animation:productFloat 5.5s ease-in-out infinite}.product-art-card b{font-size:1rem;color:var(--primary)}.product-art-card small{display:block;margin-top:16px;color:#94a3b8;font-weight:700;letter-spacing:.04em}.product-art-line{height:8px;width:48%;border-radius:8px;background:#dbe8f6;margin:14px 0}.product-art-bars{height:78px;display:flex;align-items:end;gap:8px}.product-art-bars i{display:block;flex:1;border-radius:7px 7px 3px 3px;background:linear-gradient(#4a9fe7,#1db9a6);height:35%}.product-art-bars i:nth-child(2){height:58%}.product-art-bars i:nth-child(3){height:44%}.product-art-bars i:nth-child(4){height:82%}.product-art-orbit{position:absolute;width:280px;height:280px;border:1px dashed rgba(74,159,231,.28);border-radius:50%;animation:productSpin 16s linear infinite}.product-art-badge{position:absolute;right:14%;top:18%;width:52px;height:52px;border-radius:16px;background:#1db9a6;color:#fff;display:grid;place-items:center;font-size:1.5rem;font-weight:800;z-index:4;box-shadow:0 12px 25px rgba(29,185,166,.22);animation:productPulse 2.8s ease-in-out infinite}.product-art-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);opacity:.4}.product-art-grid span{border:1px solid rgba(74,159,231,.07)}
@keyframes productFloat{50%{transform:translateY(-8px)}}@keyframes productSpin{to{transform:rotate(360deg)}}@keyframes productPulse{50%{transform:scale(1.08)}}

/* ===== ABOUT / STORY / CONTACT VISUALS ===== */
.about-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.about-hero-grid h1{margin:0}.about-hero-art{min-height:330px;background:#0d1b3e;border-radius:32px;position:relative;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-lg)}.about-art-ring{width:300px;height:300px;border:1px solid rgba(255,255,255,.16);border-radius:50%;animation:productSpin 18s linear infinite}.about-art-dashboard{position:absolute;width:72%;background:#fff;border-radius:22px;padding:22px;box-shadow:0 18px 40px rgba(0,0,0,.2);animation:productFloat 5s ease-in-out infinite}.about-art-dashboard b{display:block;color:#0d1b3e}.about-art-dashboard span{display:block;color:#64748b;font-size:.78rem;margin-top:5px}.about-art-chart{display:flex;align-items:end;height:90px;gap:8px;margin-top:20px}.about-art-chart i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(#4a9fe7,#1db9a6);height:40%}.about-art-chart i:nth-child(2){height:65%}.about-art-chart i:nth-child(3){height:50%}.about-art-chart i:nth-child(4){height:80%}.about-art-chart i:nth-child(5){height:92%}.about-art-dashboard small{color:#1db9a6;font-weight:800}.about-art-node{position:absolute;padding:12px 15px;border-radius:14px;background:#fff;font-weight:900;box-shadow:0 10px 25px rgba(0,0,0,.15)}.about-art-node.n1{right:11%;top:18%;background:#1db9a6;color:#fff}.about-art-node.n2{left:10%;bottom:18%;color:#4a9fe7}.story-excerpt{margin-top:10px;color:var(--text);font-weight:600}.story-body{margin-top:10px;color:var(--text-muted);font-size:.9rem}.story-illustration{position:relative;overflow:hidden;background:linear-gradient(135deg,#edf6ff,#f7fbff);display:grid;place-items:center;min-height:210px}.story-window{width:58%;background:#fff;border-radius:18px;padding:18px;box-shadow:0 18px 35px rgba(13,27,62,.12);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;z-index:2}.story-window b{grid-column:1/-1;font-size:1.7rem}.story-window span{height:50px;border-radius:8px;background:#e9f2fb}.story-window span:nth-child(3){background:#4a9fe7}.story-window span:nth-child(4){background:#1db9a6}.story-orbit{position:absolute;width:190px;height:190px;border:1px dashed rgba(74,159,231,.35);border-radius:50%;animation:productSpin 15s linear infinite}.story-spark{position:absolute;right:15%;top:20%;font-size:1.5rem;color:#ffc928;animation:productPulse 2.5s infinite}@media(max-width:800px){.about-hero-grid{grid-template-columns:1fr}.about-hero-art{min-height:280px}}

/* ===== Page storytelling illustrations ===== */
.page-art{position:relative;min-height:220px;border-radius:28px;background:linear-gradient(135deg,#f5f8fd,#eef7f6);border:1px solid rgba(13,27,62,.08);overflow:hidden;display:grid;place-items:center;box-shadow:0 18px 50px rgba(13,27,62,.08)}
.page-art::before,.page-art::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(29,185,166,.22)}
.page-art::before{width:180px;height:180px}.page-art::after{width:280px;height:280px}
.page-art .art-core{position:relative;z-index:2;width:150px;height:105px;border-radius:18px;background:#fff;border:1px solid rgba(13,27,62,.1);box-shadow:0 18px 30px rgba(13,27,62,.12);padding:16px}
.page-art .art-core b{display:block;font-size:13px;color:#0d1b3e}.page-art .art-core span{display:block;font-size:9px;color:#64748b;margin-top:4px}
.art-bars{display:flex;gap:6px;align-items:end;height:42px;margin-top:12px}.art-bars i{display:block;width:15px;border-radius:5px 5px 2px 2px;background:#1db9a6}.art-bars i:nth-child(1){height:15px}.art-bars i:nth-child(2){height:24px}.art-bars i:nth-child(3){height:31px}.art-bars i:nth-child(4){height:38px}
.art-float{position:absolute;padding:9px 12px;background:#0d1b3e;color:#fff;border-radius:12px;font-size:11px;font-weight:800;box-shadow:0 10px 24px rgba(13,27,62,.18);z-index:3}.art-float.a{top:28px;left:14%}.art-float.b{right:12%;bottom:30px;background:#fff;color:#0d1b3e;border:1px solid rgba(13,27,62,.08)}
.section-art-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);gap:44px;align-items:center}.section-art-row.reverse{grid-template-columns:minmax(280px,.75fr) minmax(0,1.05fr)}
.story-card-art{height:145px;border-radius:20px;background:linear-gradient(135deg,#eef4ff,#effaf8);display:grid;place-items:center;position:relative;overflow:hidden}.story-card-art .art-core{width:110px;height:76px;border-radius:13px;background:#fff;border:1px solid rgba(13,27,62,.08);box-shadow:0 12px 25px rgba(13,27,62,.1);padding:11px}.story-card-art .art-core:after{content:"";display:block;height:5px;border-radius:4px;background:#1db9a6;margin-top:10px;box-shadow:18px 8px 0 #58c4dd,38px 16px 0 #0d1b3e}
.team-photo img,.expert-photo img{width:100%;height:100%;object-fit:cover;display:block}.photo-fallback{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#eaf0f8,#e8f7f4);color:#0d1b3e;font-weight:800;font-size:24px}.team-photo{overflow:hidden}.expert-photo{overflow:hidden}
.team-card{overflow:hidden}.team-card .team-photo{height:250px}.expert-row{overflow:hidden}.expert-row .expert-photo{min-height:220px}
.page-section-visual{margin-top:30px}.visual-chip{position:absolute;z-index:3;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid rgba(13,27,62,.08);font-size:11px;font-weight:800;color:#0d1b3e;box-shadow:0 8px 20px rgba(13,27,62,.1)}
@media(max-width:820px){.section-art-row,.section-art-row.reverse{grid-template-columns:1fr;gap:24px}.page-art{min-height:190px}.team-card .team-photo{height:220px}}

.story-illustration{position:relative;overflow:hidden;border-radius:20px}.story-overlay{position:absolute;inset:auto 12px 12px 12px;display:flex;justify-content:space-between;align-items:center}.story-overlay span{background:rgba(13,27,62,.86);color:#fff;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:800}.story-overlay b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0d1b3e;box-shadow:0 8px 18px rgba(0,0,0,.16)}