/* Use the same shell, dashboard surfaces and orange accents as Company Admin. */
:root {
  color-scheme: dark;
  --ink: #0b1822;
  --ink2: #14202a;
  --navy: #182934;
  --orange: #f97316;
  --orange2: #fb923c;
  --paper: #0d1d28;
  --white: #e7e9ea;
  --text: #e7e9ea;
  --muted: #acb9c1;
  --line: #2b3d49;
  --darkline: #2b3d49;
  --max: 1200px;
  --gutter: max(clamp(1.25rem, 4vw, 3rem), calc((100% - var(--max)) / 2));
  --section-space: clamp(3rem, 6vw, 5.5rem);
  --shell-gradient: radial-gradient(ellipse at 18% 0%, #344c5e42, transparent 52%),
    linear-gradient(135deg, #10212d 0%, #0d1d28 34%, #091720 68%, #061119 100%);
}

html { scroll-padding-top: 6rem; }
body { background: var(--paper); color: var(--text); }
:focus-visible { outline: 2px solid var(--orange2); outline-offset: 4px; }

.site-header {
  height: 5rem;
  padding-inline: var(--gutter);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  background: linear-gradient(90deg, #10212d, #0c1a24 45%, #061119);
  border-color: var(--line);
  box-shadow: 0 4px 16px #0003;
}
.logo {
  width: clamp(7.5rem, 11vw, 8.75rem);
  height: auto;
  flex-shrink: 0;
  overflow: visible;
}
.logo img, .footer-brand img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.site-header nav { gap: clamp(1rem, 2.5vw, 2rem); }
.site-header nav a { color: #b9c5cc; }
.site-header nav a:hover, .site-header nav a.active { color: #fff; }
.header-cta, .btn {
  background: var(--orange);
  color: #071014;
  border-radius: .45rem;
  min-height: 2.75rem;
  line-height: 1.3;
}
.header-cta { display: inline-flex; align-items: center; white-space: nowrap; }
.header-cta:hover, .btn:hover { background: var(--orange2); }
.nav-toggle {
  border-radius: .4rem;
  border-color: var(--line);
  min-height: 2.75rem;
  padding-inline: 1rem;
}

.hero, .product-showcase, .page-hero, .demo-page, .pricing-hero {
  background: var(--shell-gradient);
  color: var(--text);
}
.hero, .product-showcase {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding: var(--section-space) var(--gutter);
  min-height: auto;
}
.hero-copy, .showcase-copy { padding: 0; }
.hero h1, .page-hero h1, .demo-copy h1, .pricing-hero h1 {
  line-height: .98;
  margin: 1.25rem 0;
}
.hero h1 { font-size: clamp(3.2rem, 5.1vw, 5rem); }
.hero-copy > p, .page-hero p, .demo-copy > p, .pricing-hero p, .dark-cta p,
.product-showcase .ticks li, .demo-expect .ticks li, .pricing-side p, .from {
  color: var(--muted);
}
.actions { flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1.75rem 0 0; }
.text-link { color: var(--text); border-color: #6f808c; }
.text-link:hover { color: var(--orange2); border-color: var(--orange2); }
.badge {
  color: #d4dee3;
  background: #142630;
  border-color: #354c59;
  line-height: 1.45;
}
.badge i { flex-shrink: 0; }
.hero-media {
  align-self: center;
  min-height: 0;
  padding: 3rem 0 3.5rem;
  background: radial-gradient(ellipse at center, #243a49 0%, transparent 72%);
}
.hero-media::before { left: 4%; top: .75rem; color: #a5b6c2; }
.dashboard-frame {
  width: 93%;
  margin-inline: auto;
  border: 5px solid var(--line);
  transform: none;
  box-shadow: 0 18px 35px #0008;
}
.dashboard-frame img { width: 100%; }
.phone-frame { width: 21%; left: 0; bottom: .375rem; border-color: #344955; }
.live-chip { right: 0; bottom: 1.25rem; background: #172731; }
.live-chip small, .video-stage > span { color: #afbdc7; }
.quick-benefits, .section {
  width: min(var(--max), calc(100% - clamp(2.5rem, 8vw, 6rem)));
  margin-inline: auto;
  padding-inline: 0;
}
.section { padding-block: var(--section-space); }
.quick-benefits { gap: 0; }
.quick-benefits article, .journey article, .benefit-grid article,
.main-price, .pricing-notes div, .trial-banner, .demo-form, .form-success {
  background: var(--ink2);
  color: var(--text);
}
.quick-benefits article { min-height: 0; padding: clamp(1rem, 2vw, 1.55rem); }
.quick-benefits b { color: var(--text); }
.split-head {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.25rem, 5vw, 4rem);
}
.split-head h2, .showcase-copy h2, .feature-row h2, .dark-cta h2,
.industry-list h2, .main-price h2, .pricing-side h2 { line-height: 1.02; }
.split-head p, .journey p, .benefit-grid p, .pricing-notes p { margin-bottom: 0; }
.journey, .benefit-grid { margin-top: clamp(1.5rem, 3vw, 2.75rem); }
.journey article, .benefit-grid article { padding: clamp(1.1rem, 2vw, 1.75rem); }
.journey h3, .benefit-grid h3 { line-height: 1.12; margin: 1rem 0 .5rem; }
.benefit-grid article { border-inline: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-showcase, .dark-cta, .module-band { border-block: 1px solid var(--line); }
.video-stage, .mobile-art {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: .75rem;
}
.video-stage { padding: clamp(1.1rem, 3vw, 2rem); }
.video-stage > span { text-align: center; }
.dark-cta, .module-band { padding: var(--section-space) var(--gutter); }
.dark-cta { gap: clamp(1.25rem, 4vw, 3rem); }
.dark-cta .btn { flex-shrink: 0; }
.dark-cta p { margin-bottom: 0; }
.page-hero, .page-hero.compact {
  min-height: auto;
  padding: var(--section-space) var(--gutter);
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.page-hero img, .feature-row > img {
  width: 100%;
  border: 4px solid var(--line);
  box-shadow: 0 14px 32px #0005;
}
.feature-section { gap: var(--section-space); }
.feature-row, .feature-row.reverse {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.feature-row.reverse { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
.module-band h2 { line-height: 1.04; margin: 0 0 1.5rem; }
.industry-list article { padding-block: clamp(1.75rem, 4vw, 3.5rem); }
.industry-index { color: #93a6b2; }
.industry-list .ticks li { break-inside: avoid; }
.pricing-hero { padding: var(--section-space) var(--gutter); }
.trial-banner {
  width: min(1000px, calc(100% - clamp(2.5rem, 8vw, 6rem)));
  margin: 0 auto;
}
.main-price, .pricing-side article, .demo-form { padding: clamp(1.25rem, 3vw, 2.25rem); }
.main-price { border-inline: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricing-side article { background: var(--navy); border: 1px solid var(--line); }
.price-layout { gap: 1.25rem; }
.price-layout + .pricing-notes, .section.pricing-notes { padding-top: 0; }
.price-list li { align-items: baseline; gap: 1rem; }
.price-list li b { text-align: right; }
.amount { flex-wrap: wrap; gap: .35rem 1rem; }
.demo-page {
  min-height: auto;
  max-width: 100%;
  padding: var(--section-space) var(--gutter);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.demo-copy .badge { margin-bottom: 1.5rem; }
.demo-expect { margin-top: 2rem; padding-top: 1.5rem; }
.demo-expect h3 { margin: 0 0 .75rem; }
.demo-expect .ticks { margin: 0; }
.demo-form { border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: .75rem; }
.demo-form h2 { margin: .5rem 0 1.25rem; line-height: 1.05; }
.demo-form label { color: #c4d1d8; margin-top: .9rem; }
.demo-form input, .demo-form select, .demo-form textarea {
  color: var(--text);
  background: #0b1822;
  border: 1px solid #47606f;
  border-radius: .35rem;
}
.demo-form textarea { resize: vertical; }
.demo-form textarea::placeholder, .demo-form > small { color: var(--muted); }
.form-success { border-radius: inherit; }
footer { padding: clamp(2rem, 4vw, 3.5rem) var(--gutter); gap: clamp(1.25rem, 3vw, 2.5rem); color: var(--muted); }
.footer-brand img { width: 8.25rem; margin-bottom: .5rem; }
footer a:hover { color: var(--orange2); }
.footer-note { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .site-header { height: 4.5rem; gap: 1rem; }
  .site-header nav { top: 100%; padding: .75rem var(--gutter); gap: 0; border-bottom: 1px solid var(--line); }
  .site-header nav a { padding: .625rem .25rem; }
  .hero, .product-showcase, .page-hero, .page-hero.compact, .feature-row,
  .feature-row.reverse, .price-layout, .demo-page, .split-head { grid-template-columns: minmax(0, 1fr); }
  .hero, .product-showcase, .demo-page { gap: 2rem; }
  .hero-media { width: 100%; max-width: 43rem; margin-inline: auto; }
  .demo-copy { max-width: 45rem; }
  .hero h1, .page-hero h1, .demo-copy h1 { font-size: clamp(2.9rem, 8vw, 4.5rem); }
  .video-stage { width: 100%; }
  .split-head { gap: .25rem; }
  .nav-toggle { margin-left: 0; }
  .quick-benefits article:nth-child(3) { border-left: 1px solid var(--line); }
  .industry-list article { grid-template-columns: 4.5rem minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .site-header { height: 4rem; gap: .5rem; padding-inline: clamp(.75rem, 3.5vw, 1.25rem); }
  .site-header .header-cta { display: inline-flex; padding: .625rem .75rem; font-size: .875rem; }
  .header-cta b { margin-left: .4rem; }
  .logo { width: clamp(4.75rem, 24vw, 6.75rem); }
  .nav-toggle { padding-inline: .65rem; }
  .hero-media { padding: 2.5rem 0 2.25rem; }
  .hero-media::before { font-size: .625rem; letter-spacing: .09em; }
  .phone-frame { width: 22%; bottom: 0; border-radius: .9rem; }
  .actions { gap: .625rem 1rem; }
  .actions .btn { padding-inline: 1rem; }
  .kicker, .num { line-height: 1.45; }
  .industry-list article { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .industry-index { font-size: 2.1rem; }
  .mobile-art { padding: 1rem; }
  .mobile-art img { max-width: 100%; height: auto; }
  .demo-form input, .demo-form select, .demo-form textarea { font-size: 1rem; }
  .demo-form label { font-size: .75rem; }
  .demo-form h2 { font-size: 2rem; }
  .price-list li { gap: .75rem; }
  .quick-benefits article + article { border-top: 1px solid var(--line); }
  footer { row-gap: 1.75rem; }
}