/* Static captures and concise product story for the public pages. */
.product-shot {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--brand-line, #e8defc);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 60px rgba(23, 19, 41, .11);
}
.product-shot picture,
.product-shot img { display: block; width: 100%; }
.product-shot img { height: auto; }
.product-shot figcaption {
  padding: 13px 19px;
  border-top: 1px solid var(--brand-line, #e8defc);
  color: var(--brand-muted, #514c65);
  font-size: 14px;
  line-height: 1.45;
}
section.hero.product-hero { gap: clamp(36px, 6vw, 65px); padding-bottom: clamp(70px, 8vw, 110px); }
.product-hero .product-shot-hero { width: min(1100px, 100%); max-width: 1100px; }
.product-hero .hero-copy { max-width: 950px; }
.product-hero h1 { max-width: 950px; font-size: clamp(48px, 5.7vw, 78px); line-height: 1.06; }
.product-hero .hero-lede { max-width: 680px; }
.product-hero .hero-footnote { font-size: 15px; }

.product-story {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: clamp(78px, 9vw, 120px) 6vw;
}
.product-story-copy { min-width: 0; }
.product-story-copy h2 {
  margin: 16px 0 21px;
  color: var(--brand-ink, #171329);
  font: 800 clamp(38px, 4vw, 59px)/1.08 Outfit, sans-serif;
  letter-spacing: -.055em;
}
.product-story-copy > p:not(.eyebrow) {
  max-width: 570px;
  margin: 0;
  color: var(--brand-muted, #514c65);
  font-size: 18px;
  line-height: 1.65;
}
.product-story-list { display: grid; gap: 12px; margin: 27px 0 29px; padding: 0; list-style: none; }
.product-story-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--brand-ink, #171329);
  font-size: 16px;
  line-height: 1.5;
}
.product-story-list li::before {
  content: "";
  display: grid;
  flex: 0 0 25px;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--brand-soft, #f5f2ff);
  color: var(--brand-primary, #3900f2);
  background-image: url('/marketing-check.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  font-weight: 800;
}
.product-story-copy .product-story-note {
  margin-top: 18px !important;
  padding-left: 14px;
  border-left: 3px solid var(--brand-violet, #7c3aed);
  font-size: 15px !important;
}
.product-story-copy .text-link { font-size: 16px; }
.product-story-booking .product-shot { max-width: 570px; justify-self: end; }
.product-story-home .product-shot { max-width: 560px; }
.product-story-management { width: 100%; max-width: none; padding-inline: max(6vw, calc((100vw - 1320px) / 2)); background: var(--brand-soft, #f5f2ff); }
.product-story-management .product-shot { width: 100%; max-width: 760px; }
.feature-story-hero { padding-bottom: 30px !important; }
.feature-story-hero h1 { max-width: 1020px; }
.feature-story-hero .hero-footnote { font-size: 15px; }

/* The sector cards use the brand's graphic language instead of generic photos. */
.segment-section { padding-top: clamp(75px, 8vw, 115px); padding-bottom: clamp(75px, 8vw, 115px); }
.segment-grid .segment-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}
.sector-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 145px;
  overflow: hidden;
  background: linear-gradient(130deg, #3900f2, #7c3aed);
  color: #fff;
}
.sector-art::before,
.sector-art::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.sector-art::before { width: 210px; height: 210px; left: -75px; top: -130px; }
.sector-art::after { width: 280px; height: 280px; right: -100px; bottom: -205px; }
.sector-art svg { width: 67px; height: 67px; z-index: 1; stroke: currentColor; }
.segment-card:nth-child(2) .sector-art,
.segment-card:nth-child(5) .sector-art { background: linear-gradient(135deg, #5532d1, #9a61f2); }
.segment-card:nth-child(3) .sector-art,
.segment-card:nth-child(6) .sector-art { background: linear-gradient(135deg, #24165a, #6541c4); }
.segment-card:nth-child(4) .sector-art,
.segment-card:nth-child(7) .sector-art { background: linear-gradient(135deg, #171329, #4d3a82); }
.segment-grid .segment-card > span.segment-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  min-height: 105px;
  padding: 19px 20px 21px;
}
.segment-card-body strong { font-size: 19px; line-height: 1.25; }
.segment-grid .segment-card-body small { max-width: none; margin-top: 6px; font-size: 15px; line-height: 1.4; }
.sector-card-arrow { display: inline-flex; color: var(--brand-primary, #3900f2); }
.sector-card-arrow svg { display: block; width: 24px; height: 24px; }

.feature-process { padding: clamp(76px, 8vw, 112px) max(6vw, calc((100vw - 1240px) / 2)); background: var(--brand-soft, #f5f2ff); }
.feature-process .section-intro h2 { max-width: 840px; margin: 14px 0 0; }
.feature-process ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 38px 0 0; padding: 0; list-style: none; }
.feature-process li { display: flex; gap: 18px; min-width: 0; padding: 26px; border: 1px solid var(--brand-line, #e8defc); border-radius: 16px; background: #fff; }
.feature-process li > span { flex: none; color: var(--brand-primary, #3900f2); font: 800 17px/1.25 Outfit, sans-serif; }
.feature-process h3 { margin: 0 0 9px; color: var(--brand-ink, #171329); font: 800 21px/1.2 Outfit, sans-serif; }
.feature-process p { margin: 0; color: var(--brand-muted, #514c65); font-size: 16px; line-height: 1.55; }
.feature-process-home { background: #fff; }
.feature-process-home li { background: var(--brand-soft, #f5f2ff); }

.home-plan > a {
  justify-content: center;
  align-self: stretch;
  min-height: 48px;
  margin-top: 24px;
  padding: 12px 16px;
  border: 1px solid var(--brand-primary, #3900f2);
  border-radius: 9px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.home-plan > a::after { display: none; }
.home-plan-featured > a { background: var(--brand-primary, #3900f2); color: #fff; }
.home-plan-featured > a:hover { background: var(--brand-violet, #7c3aed); color: #fff; }
.home-faq { background: #fff; }

@media (max-width: 900px) {
  .product-story { grid-template-columns: 1fr; gap: 35px; }
  .product-story .product-shot { justify-self: stretch; max-width: 690px; }
  .product-story-management .product-shot { order: 2; }
  .product-story-management .product-story-copy { order: 1; }
  .feature-process ol { grid-template-columns: 1fr; }
  .feature-process li { max-width: 720px; }
}
@media (max-width: 650px) {
  section.hero.product-hero { gap: 34px; padding-bottom: 70px; }
  .product-hero h1 { font-size: clamp(37px, 10vw, 45px); line-height: 1.07; }
  .product-hero .hero-footnote { font-size: 15px; }
  .product-shot { border-radius: 14px; }
  .product-shot-hero img,
  .product-shot-management img { height: 680px; object-fit: cover; object-position: top; }
  .product-shot-booking img { height: 780px; object-fit: cover; object-position: top; }
  .product-shot figcaption { padding: 11px 13px; font-size: 15px; }
  .product-story { padding: 70px 6vw; }
  .product-story-copy h2 { font-size: clamp(35px, 9vw, 42px); }
  .product-story-copy > p:not(.eyebrow) { font-size: 16px; }
  .product-story-list li { font-size: 16px; }
  .feature-story-hero { padding-bottom: 18px !important; }
  .segment-grid { grid-template-columns: 1fr; }
  .segment-grid .segment-card:nth-child(n) { display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 112px; }
  .segment-grid .sector-art { width: 96px; height: 100%; min-height: 112px; }
  .segment-grid .sector-art svg { width: 43px; height: 43px; }
  .segment-grid .segment-card > span.segment-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 112px; gap: 8px; padding: 13px 14px; }
  .segment-card-body strong { font-size: 17px; }
  .segment-grid .segment-card-body small { font-size: 15px; }
  .feature-process { padding: 70px 6vw; }
  .feature-process ol { gap: 12px; margin-top: 28px; }
  .feature-process li { padding: 20px; }

  /* Body copy and plan conditions must remain comfortable to read on a phone. */
  body .eyebrow { font-size: 14px; }
  body .hero-lede,
  body .simple-page-hero .hero-lede { font-size: 18px; line-height: 1.55; }
  .solution-copy .hero-lede { font-size: 18px; line-height: 1.55; }
  body .section-intro > p:last-child,
  body .closing-cta > p:not(.eyebrow),
  .product-story-copy > p:not(.eyebrow),
  .product-story-list li,
  .feature-grid p,
  .solution-flow > div:first-child > p:not(.eyebrow),
  .solution-flow ul,
  .product-scope > div p,
  .home-plan p { font-size: 17px; line-height: 1.6; }
  .faq-list details { padding-block: 21px; }
  .faq-list summary { font-size: 19px; line-height: 1.4; }
  .faq-list details p { font-size: 18px; line-height: 1.6; }
  .segment-grid .segment-card-body small,
  .sector-tile .sector-tile-copy,
  body .plan-card.pricing-card > p.plan-capacity { font-size: 16px; line-height: 1.5; }
  .product-story-copy .product-story-note { font-size: 16px !important; }
  .pricing-card .pricing-tax-note,
  .plan-cancel-note { font-size: 15px; line-height: 1.5; }
  .home-pricing-note,
  body .hero-footnote,
  body .closing-cta > small { font-size: 16px; line-height: 1.5; }

  /* Keep compact navigation and plan labels readable on narrow screens. */
  body .marketing-nav nav .nav-cta { font-size: 14px !important; white-space: nowrap; }
  .home-plan > span { font-size: 14px; }
  .pricing-carousel-pagination a { font-size: 15px; }
  .pricing-carousel-pagination a strong { font-size: 16px; }
  .pricing-billing-discount { font-size: 14px; }
}