/* Editorial SaaS direction: oversized type, generous white space and a blue product stage. */
:root {
  --blue: #485cf2;
  --blue-hover: #3448d7;
  --blue-soft: #eef1ff;
  --ink: #1d1d23;
  --line: #e6e8f1;
  --paper: #fff;
  --orange: var(--blue);
}
body { background: #fff; color: var(--ink); }
.marketing-nav {
  position: relative;
  z-index: 20;
  height: 78px;
  padding-inline: max(5vw,calc((100vw - 1280px)/2));
  background: #fff;
  border-bottom: 1px solid #eeeef2;
  box-shadow: none;
}
.wordmark { color: #1d1d23; font-size: 17px; letter-spacing: -.035em; }
.wordmark-light { margin-left: -5px; color: #777985; font-size: 10px; letter-spacing: .02em; }
.brand-mark { width: 36px; height: 36px; border-radius: 8px; background: var(--blue); box-shadow: none; }
body .marketing-nav nav a { color: #202026; font-size: 14px; font-weight: 600; }
body .marketing-nav nav a:hover { color: var(--blue); }
.marketing-nav .nav-cta, body .button-primary {
  min-height: 49px;
  padding-inline: 23px;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}
.marketing-nav .nav-cta:hover, body .button-primary:hover { background: var(--blue-hover); color: #fff; box-shadow: 0 9px 22px rgba(72,92,242,.18); }
.button-secondary { border-color: #cfd4f5; border-radius: 7px; color: var(--blue); }
.button-secondary:hover { background: #f3f5ff; }
.text-link { color: #1d1d23; font-size: 15px; font-weight: 700; }
.text-link:hover { color: var(--blue); }
body .eyebrow { color: #5868da; font-size: 11px; letter-spacing: .16em; }
.mobile-menu { display: none; }

section.hero.product-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 74px;
  max-width: none;
  min-height: 0;
  padding: 74px 6vw 110px;
  background: #fff;
}
.product-hero .hero-copy { width: min(100%,1050px); max-width: 1050px; text-align: center; }
.product-hero .hero-copy .eyebrow { margin-bottom: 24px; }
.product-hero h1 {
  max-width: 1020px;
  margin: 0 auto 27px;
  color: var(--ink);
  font-size: clamp(56px,6.7vw,96px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.075em;
}
.product-hero h1 em, .simple-page-hero h1 em, .solution-copy h1 em, .auth-showcase h2 em {
  background: linear-gradient(95deg,#3a4ce5 5%,#6387e8 52%,#a4759e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
body .hero-lede { color: #535661; font-size: 18px; line-height: 1.6; }
.product-hero .hero-lede { max-width: 720px; margin-inline: auto; }
.product-hero .hero-actions { justify-content: center; gap: 32px; margin-top: 29px; }
.product-hero .hero-footnote { margin-top: 18px; color: #777b87; }
.product-hero .hero-art {
  position: relative;
  width: min(1100px,100%);
  max-width: 1100px;
  padding: 0;
  border: 8px solid transparent;
  border-radius: 20px;
  background: linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#485cf2 0%,#9bc9ee 68%,#cfb4c4 100%) border-box;
  box-shadow: 0 33px 75px rgba(53,75,170,.14);
  transform: none;
}
.product-hero .browser-top { height: 57px; padding-inline: 21px; border: 0; background: linear-gradient(105deg,#485cf2,#8cb8ed 67%,#c9adc0); }
.product-hero .browser-top>span { width: 8px; height: 8px; background: rgba(255,255,255,.55); }
.product-hero .browser-top small { margin-left: 12px; color: #fff; font-size: 12px; font-weight: 700; }
.product-hero .mock-top { padding: 25px 30px; }
.product-hero .mock-top small { font-size: 10px; }
.product-hero .mock-top strong { font-size: 25px; letter-spacing: -.045em; }
.product-hero .mock-calendar-tag { padding: 10px 16px; border-radius: 8px; font-size: 11px; }
.product-hero .mock-grid { height: 412px; margin: 0 22px; grid-template-columns: 55px repeat(3,minmax(0,1fr)); border-radius: 8px; }
.product-hero .mock-time { font-size: 11px; line-height: 4.5; }
.product-hero .mock-col { background: repeating-linear-gradient(to bottom,transparent 0,transparent 80px,#edf1fa 81px); }
.product-hero .mock-person { height: 54px; gap: 10px; padding-inline: 13px; font-size: 12px; }
.product-hero .mock-person b { width: 29px; height: 29px; font-size: 9px; }
.product-hero .mock-event { left: 10px; right: 10px; min-height: 64px; padding: 12px; border-left-width: 3px; border-radius: 7px; }
.product-hero .mock-event strong { font-size: 12px; }
.product-hero .mock-event small { margin-top: 7px; font-size: 11px; }
.product-hero .mock-footer { gap: 20px; padding: 17px 29px; font-size: 11px; }

.trust-strip { padding: 28px 6vw; background: #fff; color: #696d7a; border-block-color: #e9eaf0; }
.trust-strip i { background: #bfc5d7; }
.section-intro { max-width: 860px; }
.section-intro h2, .team-section h2, .closing-cta h2, .home-pricing h2 { color: var(--ink); font-size: clamp(40px,4.1vw,60px); line-height: 1.11; letter-spacing: -.065em; }
.segment-section { padding-block: 120px; }
.segment-section .section-intro { max-width: 800px; }
.section-intro>p:last-child, .team-section>div:first-child>p:not(.eyebrow), .closing-cta>p:not(.eyebrow) { color: #606470; font-size: 16px; line-height: 1.7; }
.segment-grid { gap: 16px; margin-top: 50px; }
.segment-card { min-height: 212px; padding: 24px; border-color: #e5e7ef; border-radius: 12px; box-shadow: none; }
.segment-card:hover { border-color: #a4aef2; box-shadow: 0 15px 35px rgba(50,68,170,.09); }
.segment-icon { width: 44px; height: 44px; border-radius: 9px; background: #eff1ff; color: var(--blue); }
.feature-section { max-width: 1280px; padding-block: 115px; }
.feature-grid { gap: 18px; margin-top: 52px; }
.feature-grid article { min-height: 235px; padding: 29px; border-color: #e6e8ef; border-radius: 12px; box-shadow: none; }
.feature-number, body .feature-number { color: var(--blue); background: #edf0ff; }
.feature-grid h3 { font-size: 21px; }
.feature-grid p { color: #656975; font-size: 15px; }
.team-section, .solution-flow, .product-scope { background: #f7f8fc; }
.team-section { padding-block: 110px; }
.team-note, .solution-preview, .step-card { border-color: #e4e7f1; border-radius: 12px; box-shadow: 0 18px 42px rgba(47,64,156,.06); }
.team-note>span { color: var(--blue); }
.home-pricing { padding-block: 108px; background: #f8f9fd; }
.home-plan { border-color: #e4e7ef; border-radius: 12px; }
.home-plan-featured { border-color: var(--blue); background: #fff; }
.home-plan>span { color: #686e82; }
.home-plan>a, .product-scope a, .faq-list a { color: var(--blue); }
.closing-cta { padding-block: 122px; background: #fff; }
.marketing-footer { background: #f8f9fd; }

section.simple-page-hero.features-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 68px;
  max-width: none;
  padding: 92px 6vw 90px;
  background: #fff;
  text-align: center;
}
.features-hero-copy { width: min(100%,980px); }
.features-hero h1 { max-width: 980px; margin: 19px auto 22px; font-size: clamp(54px,6.4vw,86px); font-weight: 800; line-height: 1.08; }
.features-hero .hero-lede { max-width: 720px; margin-inline: auto; }
.features-hero .hero-actions { justify-content: center; margin-top: 28px; }
.features-hero .hero-footnote { margin-top: 18px; }
.features-demo {
  width: min(850px,100%);
  max-width: 850px;
  border: 8px solid transparent;
  border-radius: 17px;
  background: linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#485cf2,#9bc9ee 68%,#cfb4c4) border-box;
  box-shadow: 0 30px 65px rgba(53,75,170,.13);
  text-align: left;
}
.features-demo-top { padding: 22px 28px; background: linear-gradient(105deg,#485cf2,#8cb8ed 67%,#c9adc0); border: 0; color: #fff; }
.features-demo-top b { background: rgba(255,255,255,.2); color: #fff; }
.features-demo-body { padding: 35px; }
.features-demo-body h2 { font-size: 29px; }
.features-demo-item { padding: 18px; }

.solution-hero { display: flex; flex-direction: column; gap: 70px; max-width: none; padding: 95px 6vw 96px; text-align: center; }
.solution-copy { width: min(100%,980px); }
.solution-copy h1 { max-width: 980px; margin: 21px auto; font-size: clamp(56px,6.3vw,83px); font-weight: 800; line-height: 1.09; }
.solution-copy .hero-lede { max-width: 720px; margin-inline: auto; }
.solution-copy .hero-actions { justify-content: center; }
.solution-preview { width: min(760px,100%); padding: 32px; border-top: 8px solid var(--blue); text-align: left; }
.solution-preview h2 { font-size: 28px; }
.solution-preview li { font-size: 16px; }
.solution-flow { padding-block: 110px; }
.product-scope { padding-block: 100px; }
.faq-section { padding-block: 100px; }

.pricing-hero { max-width: none; padding: 88px 6vw 35px; }
.pricing-hero h1 { max-width: none; font-size: clamp(58px,6.3vw,86px); font-weight: 800; }
.pricing-hero .hero-lede { max-width: 650px; }
.plan-grid { max-width: 1190px; gap: 19px; }
.plan-card { border-color: #e4e7ef; border-radius: 12px; box-shadow: 0 14px 37px rgba(46,61,143,.055); }
.plan-card-accent { background: #fff; }
.pricing-card-featured { border-color: var(--blue); box-shadow: 0 16px 40px rgba(72,92,242,.12); }
.plan-badge { background: var(--blue); }
.pricing-card-featured .plan-badge { border-top-right-radius: 10px; }
.plan-card h2 { font-size: 27px; }
.pricing-card .price strong { font-size: 44px; }
.plan-card li { color: #545864; }
.pilot-banner { background: #f5f6ff; border-color: #dfe3fb; }
.pilot-banner .button-primary { flex: none; }

@media(max-width:850px) {
  .product-hero h1, .features-hero h1 { font-size: clamp(52px,8vw,72px); }
  .solution-copy h1 { font-size: clamp(50px,8vw,70px); }
  .product-hero .mock-grid { grid-template-columns: 48px repeat(3,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .marketing-nav { height: 69px; min-height: 69px; flex-wrap: nowrap; gap: 12px; padding: 0 5vw; }
  .wordmark { font-size: 14px; }
  .wordmark-light { font-size: 8px; }
  .brand-mark { width: 31px; height: 31px; }
  .marketing-nav nav { width: auto; margin-left: auto; justify-content: flex-end; }
  body .marketing-nav nav a:not(.nav-cta) { display: none!important; }
  body .marketing-nav nav .nav-cta { display: inline-flex!important; min-height: 40px; padding: 0 12px; font-size: 11px; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; padding: 10px; border: 1px solid #e2e5ee; border-radius: 7px; list-style: none; cursor: pointer; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { height: 2px; width: 100%; border-radius: 3px; background: #26262e; }
  .mobile-menu-panel { position: absolute; top: 62px; right: 5vw; width: min(250px,90vw); display: flex; flex-direction: column; padding: 10px; border: 1px solid #e3e5ee; border-radius: 10px; background: #fff; box-shadow: 0 15px 35px rgba(30,39,90,.13); }
  .mobile-menu-panel a { padding: 12px; border-radius: 6px; color: #26262e; font-size: 14px; font-weight: 600; text-decoration: none; }
  .mobile-menu-panel a:hover { background: #f2f4ff; color: var(--blue); }
  section.hero.product-hero { gap: 46px; padding: 63px 6vw 78px; }
  .product-hero .hero-copy .eyebrow { margin-bottom: 20px; }
  .product-hero h1 { font-size: clamp(42px,11.6vw,60px); line-height: 1.1; }
  body .hero-lede { font-size: 15px; }
  .product-hero .hero-actions, .features-hero .hero-actions, .solution-copy .hero-actions { align-items: center; justify-content: center; flex-direction: column; gap: 19px; }
  .product-hero .hero-art { border-width: 5px; border-radius: 13px; }
  .product-hero .browser-top { height: 39px; padding-inline: 11px; }
  .product-hero .browser-top>span { width: 5px; height: 5px; }
  .product-hero .browser-top small { margin-left: 5px; font-size: 8px; }
  .product-hero .mock-top { padding: 15px 11px; }
  .product-hero .mock-top small { font-size: 7px; }
  .product-hero .mock-top strong { font-size: 16px; }
  .product-hero .mock-calendar-tag { padding: 6px 8px; font-size: 8px; }
  .product-hero .mock-grid { height: 307px; margin: 0 7px; grid-template-columns: 31px repeat(2,minmax(0,1fr)); }
  .product-hero .mock-col:last-child { display: none; }
  .product-hero .mock-time { padding-inline: 1px; font-size: 7px; line-height: 5; }
  .product-hero .mock-person { height: 42px; gap: 4px; padding-inline: 3px; font-size: 8px; }
  .product-hero .mock-person b { width: 20px; height: 20px; font-size: 6px; }
  .product-hero .mock-event { left: 3px; right: 3px; min-height: 47px; padding: 6px; }
  .product-hero .mock-event strong { font-size: 8px; }
  .product-hero .mock-event small { margin-top: 4px; font-size: 7px; }
  .product-hero .mock-footer { gap: 9px; padding: 11px; font-size: 8px; }
  .trust-strip { gap: 11px 15px; }
  .segment-section, .feature-section { padding-block: 75px; }
  .segment-grid { margin-top: 34px; }
  .segment-card { min-height: 104px; padding: 16px; }
  .feature-grid { margin-top: 35px; }
  .feature-grid article { min-height: 0; padding: 23px; }
  .section-intro h2, .team-section h2, .closing-cta h2, .home-pricing h2 { font-size: 38px; }
  .team-section, .solution-flow, .product-scope, .faq-section, .home-pricing { padding-block: 75px; }
  section.simple-page-hero.features-hero { gap: 48px; padding: 70px 6vw 75px; }
  .features-hero h1 { font-size: clamp(40px,10.8vw,58px); }
  .features-demo { border-width: 5px; }
  .features-demo-top { padding: 15px; }
  .features-demo-body { padding: 19px; }
  .features-demo-body h2 { font-size: 23px; }
  .solution-hero { gap: 45px; padding: 75px 6vw; }
  .solution-copy h1 { font-size: clamp(42px,10.8vw,60px); }
  .solution-preview { padding: 22px; }
  .pricing-hero { padding: 70px 6vw 31px; }
  .pricing-hero h1 { font-size: clamp(46px,11vw,60px); }
  .plan-grid { gap: 15px; }
  .closing-cta { padding-block: 80px; }
}