.footer-link-group a[aria-current="page"] { color: #fff; font-weight: 700; }
.demo-page { width: 100%; overflow: clip; }
.demo-page section { width: 100%; }
.demo-page section > .section-inner { padding-block: clamp(72px, 8vw, 112px); }
.demo-page h1, .demo-page h2, .demo-page h3 { font-family: Inter, "Poppins", system-ui, sans-serif; letter-spacing: -.045em; }
.demo-page h1 { font-size: clamp(2.25rem, 4vw, 3.6rem); line-height: 1.12; font-weight: 800; }
.demo-page h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.16; font-weight: 800; }
.demo-page h3 { font-size: 1.2rem; line-height: 1.35; font-weight: 750; }
.demo-page p { color: var(--muted); }
.demo-page a { text-underline-offset: 4px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #4765dc !important; font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 2px; flex: none; background: currentColor; }
.section-heading { margin-bottom: 38px; }
.section-heading h2 { max-width: 780px; margin: 0 0 16px; }
.section-heading > p:not(.eyebrow) { max-width: 720px; margin: 0; font-size: 16px; line-height: 1.85; }
.demo-page .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 21px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.demo-page .btn:hover { transform: translateY(-2px); }
.demo-page .btn.primary { color: #fff; background: var(--blue); box-shadow: 0 12px 25px rgba(69, 104, 236, .22); }
.demo-page .btn.primary:hover { color: #fff; background: var(--blue-dark); }
.demo-page .btn.ghost { color: #fff; border-color: rgba(216, 227, 255, .43); background: rgba(255, 255, 255, .08); }
.demo-page .btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .16); }

/* The walkthrough stays beside the hero message at desktop widths. */
.demo-page .hero { position: relative; isolation: isolate; color: #fff; background: radial-gradient(ellipse at 90% 10%, #2c4794, transparent 42%), radial-gradient(ellipse at 3% 90%, #182e67, transparent 46%), #0b1530; }
.demo-page .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25; background-image: linear-gradient(rgba(185, 199, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 199, 255, .08) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent, #000); }
.demo-page .hero .section-inner { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: clamp(42px, 5vw, 75px); }
.hero .eyebrow { color: #aec0ff !important; }
.hero h1 { max-width: 680px; margin-bottom: 24px; color: #fff; }
.hero .lead { max-width: 600px; color: #cbd7ef; font-size: 17px; line-height: 1.85; }
.hero .lead strong { color: #fff; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.demo-action-note { flex-basis: 100%; margin: 0; color: #aebfe0 !important; font-size: 14px; }
.demo-action-note a { color: #c8d3ff; }
.hero-proof-list { display: flex; flex-wrap: wrap; gap: 9px 20px; padding: 24px 0 0; margin: 26px 0 0; border-top: 1px solid rgba(218, 229, 255, .2); list-style: none; }
.hero-proof-list li { color: #d6e1f5; font-size: 14px; }
.hero-proof-list span { margin-right: 4px; color: #83e9c6; font-weight: 800; }
.hero-panel { min-width: 0; }
.panel-card { overflow: hidden; padding: 10px; border: 1px solid rgba(230, 237, 255, .27); border-radius: 18px; background: #fff; box-shadow: 0 32px 80px rgba(0, 0, 0, .23), 0 0 0 8px rgba(255, 255, 255, .045); }
.panel-heading { display: grid; gap: 3px; padding: 12px 13px 16px; }
.panel-kicker { color: var(--blue-dark); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.panel-heading strong { color: var(--ink); font-size: 17px; }
.panel-heading > span:last-child { color: #76869e; font-size: 13px; }
.panel-heading i { color: var(--blue); font-style: normal; }
.video-container { overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #0a1229; }
.video-container iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Wide and narrow bento cells give the four workflows their own rhythm. */
.demo-page .features { background: #f5f7fc; border-bottom: 1px solid #e7edf7; }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.feature-card { min-width: 0; padding: 29px; border: 1px solid #e0e6f1; border-radius: 16px; background: #fff; box-shadow: 0 9px 27px rgba(20, 37, 83, .035); }
.feature-card:first-child, .feature-card:last-child { grid-column: span 2; }
.feature-card:first-child { border-color: #d8e2ff; background: linear-gradient(140deg, #eef2ff, #fff 70%); }
.feature-card:last-child { border-color: #d9e9ed; background: linear-gradient(140deg, #f0f9f8, #fff 70%); }
.feature-icon, .benefit-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 18px; border: 1px solid #dce3ff; border-radius: 11px; background: #f1f4ff; font-size: 23px; }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { max-width: 680px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }

/* Benefits read as an open editorial list rather than another card grid. */
.demo-page .benefits { background: #fff; }
.benefit-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; counter-reset: demo-benefit; border-top: 1px solid var(--line); }
.benefit-card { position: relative; padding: 28px 10px 29px 58px; border-bottom: 1px solid var(--line); counter-increment: demo-benefit; }
.benefit-card::before { content: "0" counter(demo-benefit); position: absolute; top: 30px; left: 0; color: var(--blue); font-size: 13px; font-weight: 800; }
.benefit-icon { margin-bottom: 14px; }
.benefit-card h3 { margin-bottom: 10px; }
.benefit-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }

/* One spotlight review is supported by two quieter testimonials. */
.demo-page .testimonials { background: linear-gradient(135deg, #edf1ff, #f7f9ff 65%); }
.testimonials [itemprop="aggregateRating"] { display: none; }
.testimonial-list { display: grid; grid-template-columns: 1.05fr .95fr; gap: 17px; }
.testimonial-card { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 29px; border: 1px solid #dfe5f2; border-radius: 16px; background: #fff; }
.testimonial-card:first-child { grid-row: span 2; padding: 36px; border-color: #253d81; background: radial-gradient(circle at 100% 0, #304c9c, transparent 54%), #14254d; }
.testimonial-card > p { flex: 1; margin: 0 0 26px; color: #344969; font-size: 17px; line-height: 1.85; }
.testimonial-card:first-child > p { color: #e5ecfb; }
.testimonial-meta { display: grid; grid-template-columns: 1fr auto; gap: 3px 18px; align-items: center; padding-top: 18px; border-top: 1px solid #e2e7f1; font-size: 14px; }
.testimonial-meta [itemprop="name"] { color: var(--ink); font-weight: 800; }
.testimonial-meta .role { grid-column: 1; color: #8190a8; font-size: 13px; }
.testimonial-meta .rating { grid-column: 2; grid-row: 1 / span 2; }
.testimonial-meta .stars { color: #e3a92c; font-size: 15px; letter-spacing: .03em; }
.testimonial-card:first-child .testimonial-meta { border-color: rgba(223, 234, 255, .24); }
.testimonial-card:first-child .testimonial-meta [itemprop="name"] { color: #fff; }
.testimonial-card:first-child .testimonial-meta .role { color: #b6c6e4; }

/* Long answers remain open and readable in a two-column editorial layout. */
.demo-page .faq { background: #fff; }
.faq .section-inner { display: grid; grid-template-columns: minmax(255px, .55fr) minmax(0, 1fr); align-items: start; gap: clamp(42px, 7vw, 90px); }
.faq .section-heading { position: sticky; top: 112px; margin: 0; }
.faq-grid { counter-reset: demo-faq; border-top: 1px solid var(--line); }
.faq-item { position: relative; padding: 27px 8px 30px 52px; border-bottom: 1px solid var(--line); counter-increment: demo-faq; }
.faq-item::before { content: "0" counter(demo-faq); position: absolute; top: 31px; left: 0; color: var(--blue); font-size: 13px; font-weight: 800; }
.faq-item h3 { margin-bottom: 11px; }
.faq-item p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.faq-item strong { color: #2c4166; }

/* The final CTA gives the detailed promise room to breathe. */
.demo-page .cta { background: radial-gradient(circle at 88% 0, #6d88f4, transparent 44%), linear-gradient(115deg, #4568ec, #294abf); }
.cta-content { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 18px clamp(38px, 6vw, 85px); align-items: start; }
.cta .eyebrow { grid-column: 1 / -1; color: #dce5ff !important; }
.cta h2 { grid-column: 1; grid-row: 2 / span 4; max-width: 530px; color: #fff; }
.cta-content > p:not(.eyebrow) { grid-column: 2; margin: 0; color: #e6edff; font-size: 16px; line-height: 1.85; }
.cta-content a:not(.btn) { color: #fff; font-weight: 700; }
.cta-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.demo-page .cta .btn.primary { color: #2948b9; background: #fff; box-shadow: 0 10px 25px rgba(16, 37, 117, .16); }
.demo-page .cta .btn.primary:hover { color: #2948b9; background: #f2f5ff; }
.demo-page .cta .btn.secondary { color: #fff; border-color: rgba(255, 255, 255, .56); background: rgba(255, 255, 255, .1); }
.demo-page .cta .btn.secondary:hover { color: #fff; background: rgba(255, 255, 255, .18); }

@media (max-width: 1000px) {
  .demo-page .hero .section-inner { grid-template-columns: 1fr; }
  .hero-copy, .hero-panel { max-width: 760px; }
}

@media (max-width: 760px) {
  .demo-page section > .section-inner { padding-block: 68px; }
  .feature-list { grid-template-columns: 1fr 1fr; }
  .feature-card:first-child, .feature-card:last-child { grid-column: span 2; }
  .testimonial-list, .faq .section-inner, .cta-content { grid-template-columns: 1fr; }
  .testimonial-card:first-child { grid-row: auto; }
  .faq .section-heading { position: static; }
  .cta .eyebrow, .cta h2, .cta-content > p:not(.eyebrow), .cta-actions { grid-column: auto; grid-row: auto; }
}

@media (max-width: 560px) {
  .demo-page h1 { font-size: clamp(2rem, 8vw, 2.7rem); }
  .demo-page h2 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .demo-actions, .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .feature-list, .benefit-cards { grid-template-columns: 1fr; }
  .feature-card:first-child, .feature-card:last-child { grid-column: auto; }
  .feature-card, .testimonial-card, .testimonial-card:first-child { padding: 24px; }
  .benefit-card { padding-left: 47px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-page .btn { transition: none; }
  .demo-page .btn:hover { transform: none; }
}