/* Homepage composition. Product captures remain the actual interface. */
.product-story-home .story-hero { padding: 0; }
.product-story-home .story-hero__stage {
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  --hero-shift-x-reverse: 0px;
  --hero-shift-y-reverse: 0px;
  position: relative; isolation: isolate; display: grid; align-items: center;
  /* The sticky header includes a 1px border. Let content grow on short screens. */
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
  padding: clamp(40px, 7vh, 96px) 0; overflow: hidden;
}
.product-story-home .story-hero__stage .hero-ambient {
  --primary-rgb: 35, 169, 242;
  --orbit-line: rgba(35, 169, 242, .38);
  --orbit-line-bright: rgba(35, 169, 242, .65);
  --orbit-node: #23a9f2;
  --orbit-node-core: #b3e5ff;
  display: block;
  opacity: 1;
}
.product-story-home .hero-ambient::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(35,169,242,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(35,169,242,.18) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(#000, transparent 85%); -webkit-mask-image: linear-gradient(#000, transparent 85%); }
.product-story-home .hero-ambient::after { background: linear-gradient(0deg, var(--bg), transparent 24%), radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--bg) 80%, transparent), transparent 72%); }
.product-story-home .hero-ambient__glow--one { background: radial-gradient(circle, rgba(35,169,242,.24), rgba(35,169,242,.09) 46%, transparent 73%); }
.product-story-home .hero-ambient__glow--two { background: radial-gradient(circle, rgba(35,169,242,.16), transparent 70%); }
.product-story-home .hero-ambient__dust { opacity: .8; }
.product-story-home .hero-ambient__core { background: radial-gradient(circle, rgba(35,169,242,.08), transparent 70%); box-shadow: none; }
.product-story-home .hero-ambient__orbit { will-change: auto; }
.product-story-home .hero-ambient__orbit--outer { transform: translate(-50%, -50%) rotate(-12deg); }
.product-story-home .hero-ambient__orbit--middle { transform: translate(-50%, -50%) rotate(19deg); }
.product-story-home .hero-ambient__orbit--inner { transform: translate(-50%, -50%) rotate(-26deg); }
/* Reuse the production orbit, glow, node and signal animations, including reduced motion. */
.product-story-home .hero-ambient__beam { background: linear-gradient(90deg, transparent, rgba(35,169,242,.5) 50%, transparent); background-size: 220% 100%; }
html.theme-dark .product-story-home .story-hero__stage .hero-ambient { --orbit-line: rgba(35,169,242,.42); --orbit-line-bright: rgba(35,169,242,.68); }
.product-story-home .story-section, .product-story-home .story-pricing { padding: 88px 0 0; background: transparent; }
.product-story-home .story-final { padding-bottom: 72px; }
.product-story-home .story-card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid); }
.product-story-home .story-label { display: block; color: var(--primary); font-size: 12px; font-weight: 650; letter-spacing: .04em; margin-bottom: 16px; }
.product-story-home .story-label--dot { display: flex; align-items: center; gap: 8px; }
.product-story-home .story-label--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.product-story-home .story-hero__layout { position: relative; z-index: 1; display: flex; justify-content: center; text-align: center; }
.product-story-home .story-intro { width: 100%; }
.product-story-home .story-intro .story-label { display: inline-flex; justify-content: center; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); border-radius: 100px; background: var(--surface-solid); margin-bottom: 24px; letter-spacing: .01em; }
.product-story-home .story-intro h1 { font-size: clamp(32px, 5.3vw, 72px); line-height: 1.12; letter-spacing: -.055em; margin: 0; font-weight: 650; }
.product-story-home .story-title-end { white-space: nowrap; }
.product-story-home .story-intro > .story-intro__detail { max-width: 780px; margin-top: 18px; font-size: 17px; line-height: 1.8; }
.product-story-home .story-marker { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.product-story-home .story-marker svg { position: absolute; width: 102%; height: .26em; left: -1%; bottom: -.09em; z-index: -1; overflow: visible; color: #23a9f2; }
.product-story-home .story-marker path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; opacity: .8; }
.product-story-home .story-marker path + path { opacity: .28; }
.product-story-home .story-intro > p { color: var(--text-soft); font-size: 18px; line-height: 1.7; margin: 32px auto 0; max-width: 620px; text-wrap: pretty; }
.product-story-home .story-capture { display: block; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--bg); }
.product-story-home .story-capture img { display: block; width: 100%; height: auto; }
.product-story-home .story-capture:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.product-story-home .story-heading { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin-bottom: 32px; text-align: left; }
.product-story-home .story-heading h2, .product-story-home .story-mobile-intro h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.14; letter-spacing: -.04em; margin: 0; }
.product-story-home .story-heading p { color: var(--text-soft); font-size: 15px; line-height: 1.7; margin: 14px 0 0; max-width: 640px; }
.product-story-home .story-heading__aside { max-width: 480px; }
.product-story-home .story-heading__aside p { margin: 0 0 16px; }
.product-story-home .story-heading > a { flex-shrink: 0; }
.product-story-home .story-tour { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elevated); box-shadow: var(--shadow-soft); }
.product-story-home .story-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.product-story-home .story-tab { position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-soft); text-align: left; padding: 18px; font: inherit; cursor: pointer; }
.product-story-home .story-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; }
.product-story-home .story-tab.is-active::after { transform: scaleX(1); }
.product-story-home .story-tour.is-counting .story-tab.is-active::after { animation: carousel-progress var(--carousel-duration) linear both; }
.product-story-home .story-tour.is-paused .story-tab.is-active::after { animation-play-state: paused; }
.product-story-home .story-tab__title { display: flex; justify-content: space-between; align-items: center; color: var(--text); font-size: 17px; font-weight: 600; }
.product-story-home .story-tab__copy { display: block; font-size: 13px; line-height: 1.5; margin-top: 7px; }
.product-story-home .story-tab.is-active { background: var(--surface-solid); border-color: var(--line); box-shadow: var(--shadow-card); }
.product-story-home .story-tab.is-active .story-tab__title { color: var(--primary); }
.product-story-home .story-tab:hover { background: var(--surface-solid); }
.product-story-home .story-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.product-story-home .story-tour__stage { height: var(--tour-stage-height, auto); min-height: 0; overflow: visible; border: 0; background: transparent; border-radius: 0; min-width: 0; }
.product-story-home .story-tour.is-measuring .story-slide { display: block; }
.product-story-home .story-slide[hidden] { display: none; }
.product-story-home .story-slide__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0 0; }
.product-story-home .story-slide__foot p { font-size: 13px; color: var(--text-soft); margin: 0; line-height: 1.5; }
.product-story-home .story-slide__foot a { flex-shrink: 0; font-size: 13px; }
.product-story-home .story-tour__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.product-story-home .story-tour__controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-solid); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.product-story-home .story-tour__controls button:hover { border-color: var(--line-strong); }
.product-story-home .story-tour__controls button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.product-story-home .story-tour__controls button:disabled { opacity: .55; cursor: default; }
.product-story-home .story-tour__play svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.product-story-home .story-tour__play-icon { display: none; }
.product-story-home .story-tour.is-user-paused .story-tour__play-icon { display: block; }
.product-story-home .story-tour.is-user-paused .story-tour__pause-icon { display: none; }
.product-story-home .story-tour__navigation { display: flex; align-items: center; gap: 8px; }
.product-story-home [data-carousel-status] { color: var(--text-soft); font-size: 12px; font-variant-numeric: tabular-nums; margin-right: 8px; }
.product-story-home .story-workflow { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center; gap: 48px; margin-top: 32px; padding: 8px 0; }
.product-story-home .story-workflow h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.02em; }
.product-story-home .story-workflow > div > p { font-size: 13px; line-height: 1.65; color: var(--text-soft); margin: 0 0 14px; }
.product-story-home .story-workflow .text-link { font-size: 13px; }
.product-story-home .story-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.product-story-home .story-step { border-top: 1px solid var(--line); padding-top: 18px; }
.product-story-home .story-step .story-label { font-size: 11px; margin-bottom: 10px; }
.product-story-home .story-step h4 { font-size: 14px; font-weight: 600; margin: 0 0 7px; }
.product-story-home .story-step p { font-size: 12px; line-height: 1.5; color: var(--text-soft); margin: 0; }
.product-story-home .story-mobile-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 64px; align-items: center; }
.product-story-home .story-mobile-intro > p { color: var(--text-soft); font-size: 15px; line-height: 1.75; margin: 20px 0; max-width: 370px; }
.product-story-home .story-mobile-intro__list { list-style: none; padding: 0; margin: 0 0 28px; font-size: 13px; color: var(--text-soft); }
.product-story-home .story-mobile-intro__list li { display: flex; gap: 10px; margin: 12px 0; }
.product-story-home .story-mobile-intro__list li::before { content: "✓"; color: var(--primary); }
.product-story-home .story-mobile { padding: 22px 22px 10px; border-radius: 18px; background: var(--bg-elevated); border: 1px solid var(--line); min-width: 0; }
.product-story-home .story-mobile__track { display: grid; grid-auto-columns: calc((100% - 24px)/3); grid-auto-flow: column; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 4px 0 8px; }
.product-story-home .story-mobile__card { scroll-snap-align: start; min-width: 0; }
.product-story-home .story-mobile__card h3 { font-size: 12px; font-weight: 550; color: var(--text-soft); margin: 14px 0 0; text-align: center; }
.product-story-home .story-capture--portrait { margin: 0 auto; border-radius: 8px; box-shadow: var(--shadow-card); }
.product-story-home .story-mobile__controls { display: none; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.product-story-home .story-mobile__controls button { width: 32px; height: 32px; font: inherit; background: var(--surface-solid); color: var(--text); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.product-story-home .story-mobile__controls button:disabled { opacity: .35; cursor: default; }
.product-story-home .story-launch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.product-story-home .story-launch article { padding: 36px; display: flex; flex-direction: column; align-items: flex-start; background: var(--bg-elevated); }
.product-story-home .story-launch h3 { font-size: 28px; line-height: 1.18; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.product-story-home .story-launch p { color: var(--text-soft); font-size: 15px; line-height: 1.7; margin: 18px 0 28px; max-width: 420px; }
.product-story-home .story-launch .button { margin-top: auto; }
.product-story-home .story-launch__managed { background: var(--surface-solid); border-color: var(--line-strong); }
.product-story-home .pricing-overview { margin-bottom: 20px; }
.product-story-home .pricing-partner-note { padding: 20px 24px; }
.product-story-home .story-faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; border-top: 1px solid var(--line); padding-top: 48px; }
.product-story-home .story-faq-layout .story-heading { align-self: start; margin: 0; }
.product-story-home .story-faq-layout .text-link { display: inline-flex; margin-top: 20px; }
.product-story-home .story-faq .faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; margin: 0; }
.product-story-home .story-faq .faq-item summary { padding: 20px 0; font-size: 15px; }
.product-story-home .story-faq .faq-item p { padding: 0 28px 20px 0; font-size: 14px; line-height: 1.7; }
.product-story-home .story-final .story-heading { padding: 40px; margin: 0; background: var(--bg-elevated); }
.product-story-home .site-footer__brand p { max-width: 290px; }
.product-story-home #product { scroll-margin-top: 88px; }
@media (max-width: 1100px) {
  .product-story-home .story-tour { padding: 20px; }
  .product-story-home .story-tab { padding: 16px; }
  .product-story-home .story-mobile-layout { gap: 36px; }
  .product-story-home .story-mobile { padding: 16px 16px 8px; }
  .product-story-home .story-workflow { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .product-story-home .story-mobile-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-story-home .story-mobile-intro > p { max-width: 560px; }
  .product-story-home .story-mobile-intro__list { display: flex; flex-wrap: wrap; gap: 0 24px; margin-bottom: 20px; }
  .product-story-home .story-workflow { grid-template-columns: 1fr; gap: 24px; }
  .product-story-home .story-workflow > div > p { max-width: 560px; }
  .product-story-home .story-faq-layout { gap: 40px; }
}
@media (max-width: 760px) {
  .product-story-home .story-hero__stage { padding: 32px 0; }
  .product-story-home .story-section, .product-story-home .story-pricing { padding-top: 56px; }
  .product-story-home .story-final { padding-bottom: 40px; }
  .product-story-home .story-intro .story-label { font-size: 11px; margin-bottom: 20px; }
  .product-story-home .story-intro > p { font-size: 15px; margin: 26px auto 0; }
  .product-story-home .story-intro > .story-intro__detail { font-size: 15px; margin-top: 16px; }
  .product-story-home .story-heading { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 24px; }
  .product-story-home .story-heading__aside p { margin-bottom: 12px; }
  .product-story-home .story-tour { padding: 10px; border-radius: 12px; }
  .product-story-home .story-tabs { gap: 2px; margin-bottom: 14px; }
  .product-story-home .story-tab { min-width: 0; padding: 12px 2px; text-align: center; border-radius: 7px; }
  .product-story-home .story-tab__title { justify-content: center; font-size: 12px; }
  .product-story-home .story-tab__copy { display: none; }
  .product-story-home .story-slide__foot { align-items: flex-start; flex-direction: column; gap: 10px; }
  .product-story-home .story-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .product-story-home .story-mobile__track { grid-auto-columns: min(72%, 230px); gap: 14px; }
  .product-story-home .story-mobile__card h3 { font-size: 13px; }
  .product-story-home .story-mobile__controls { display: flex; }
  .product-story-home .story-launch, .product-story-home .story-faq-layout { grid-template-columns: 1fr; gap: 20px; }
  .product-story-home .story-launch article { padding: 28px; }
  .product-story-home .story-launch h3 { font-size: 25px; }
  .product-story-home .story-faq-layout { padding-top: 32px; }
  .product-story-home .story-faq-layout h2 br { display: none; }
  .product-story-home .story-final .story-heading { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) { .product-story-home .story-mobile__track { scroll-behavior: auto; } .product-story-home .story-tab.is-active::after { animation: none !important; } }

/* Light backgrounds need visible orbit outlines and coloured moving nodes. */
html:not(.theme-dark) .product-story-home .story-hero__stage .hero-ambient {
  --orbit-line: rgba(23, 123, 174, .48); --orbit-line-bright: rgba(23, 123, 174, .7);
  --orbit-node: #167fab; --orbit-node-core: #167fab;
}
html:not(.theme-dark) .product-story-home .hero-ambient::after {
  background: linear-gradient(0deg, var(--bg), transparent 20%), radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--bg) 32%, transparent), transparent 72%);
}
html:not(.theme-dark) .product-story-home .hero-ambient__orbit { border-width: 1.5px; }
html:not(.theme-dark) .product-story-home .hero-ambient__core { border-color: rgba(23, 123, 174, .24); }
html:not(.theme-dark) .product-story-home .hero-ambient__node {
  min-width: 7px; border-color: rgba(23,123,174,.4); box-shadow: 0 0 0 4px rgba(35,169,242,.14), 0 0 15px rgba(35,169,242,.4);
}
html:not(.theme-dark) .product-story-home .hero-ambient__node--major { min-width: 11px; }
html:not(.theme-dark) .product-story-home .hero-ambient__beam { background: linear-gradient(90deg, transparent, rgba(23,123,174,.65) 50%, transparent); background-size: 220% 100%; }

/* A single introduction and a readable, manually selected product screen. */
.product-story-home #product .text-link { margin: 0; }
.product-story-home #product { padding-top: 64px; }
.product-story-home #product > .container { max-width: 1088px; }
.product-story-home #product .story-heading { display: block; max-width: 960px; margin: 0 auto 28px; text-align: center; }
.product-story-home #product .story-heading h2 { font-size: clamp(28px, 2.75vw, 40px); line-height: 1.2; text-wrap: balance; }
.product-story-home #product .story-heading p { max-width: none; margin: 12px 0 0; font-size: 16px; text-wrap: balance; }
.product-story-home #product .story-tour { max-width: 960px; margin-inline: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.product-story-home #product .story-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.product-story-home #product .story-tab { min-height: 44px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elevated); text-align: center; white-space: nowrap; }
.product-story-home #product .story-tab::after { display: none; }
.product-story-home #product .story-tab__title { justify-content: center; font-size: 14px; }
.product-story-home #product .story-tab.is-active { background: color-mix(in srgb, var(--primary) 10%, var(--surface-solid)); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: none; }
.product-story-home #product .story-capture { border-radius: 12px; cursor: zoom-in; }
.product-story-home #product .story-slide__foot { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; }
.product-story-home #product .story-slide__foot p { font-size: 14px; }
.product-story-home #product .story-slide__foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; white-space: nowrap; }
.product-story-home #product .story-workflow { display: block; max-width: 960px; margin: 36px auto 0; padding: 0; }
.product-story-home #product .story-workflow > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.product-story-home #product .story-workflow h3 { margin: 0; font-size: 22px; line-height: 1.3; }
.product-story-home #product .story-flow { margin-top: 18px; gap: 20px; }
.product-story-home #product .story-step { padding-top: 14px; }
.product-story-home #product .story-step h4 { font-size: 16px; }
.product-story-home #product .story-step p { font-size: 13px; }
@media (max-width: 760px) {
  .product-story-home #product { padding-top: 40px; }
  .product-story-home #product .story-heading { margin-bottom: 22px; }
  .product-story-home #product .story-heading p { font-size: 15px; }
  .product-story-home #product .story-tab { padding-inline: 14px; }
  .product-story-home #product .story-workflow > div { display: block; }
  .product-story-home #product .story-workflow h3 { font-size: 20px; }
  .product-story-home #product .story-workflow > div a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 520px) {
  .product-story-home #product .story-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
