/* Product narrative: keep Orbitra's paper, carbon, red orbit, and teal state cues. */
.product-story { --story-ink: #191b1b; --story-muted: #555c59; }
.product-story [hidden] { display: none !important; }
.product-story .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.product-story h1, .product-story h2, .product-story h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.product-story h2 { font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.1; }
.product-story h3 { line-height: 1.18; }
.product-story p { text-wrap: pretty; }
.product-story .btn--primary { background: #c5242b; color: #fff; border-color: #c5242b; }
.product-story a:focus-visible, .product-story button:focus-visible, .product-story summary:focus-visible { outline: 3px solid #087b71; outline-offset: 5px; }
.product-story .story-workflow :focus-visible { outline-color: #62ded0; }
.story-hero { padding: 148px 0 0; background: var(--paper); color: var(--story-ink); }
.story-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 255px; gap: 70px; align-items: center; padding-bottom: 64px; }
.story-hero h1 { font-size: clamp(3.2rem, 5.5vw, 5.3rem); line-height: 1.06; max-width: 15ch; }
.story-hero h1 span { color: #06635e; }
.story-hero__body { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.55; max-width: 57ch; margin: 28px 0; }
.story-hero__body strong { font-weight: 600; }
.story-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.story-text-link { display: inline-flex; gap: 16px; align-items: center; text-decoration: underline; text-underline-offset: 5px; font-weight: 600; }
.story-hero__note { color: var(--story-muted); font-size: .91rem; max-width: 59ch; line-height: 1.55; margin-top: 20px; }
.story-hero__index { border-left: 1px solid #bdbfb7; padding-left: 28px; }
.story-orbit { width: 160px; height: 125px; margin: 0 0 18px -8px; fill: none; stroke: #d92228; stroke-width: 1.5; }
.story-orbit circle { fill: #d92228; }
.story-hero__index p { font-family: var(--font-display); font-size: 1.38rem; line-height: 1.25; }
.story-hero__index ol { list-style: none; padding: 0; margin: 24px 0; counter-reset: journey; }
.story-hero__index li { counter-increment: journey; padding: 11px 0; border-top: 1px solid #c7c9c1; font-size: .9rem; }
.story-hero__index li::before { content: '0' counter(journey); font-family: var(--font-mono); font-size: .7rem; margin-right: 16px; color: #59605d; }
.story-hero__index a { font-size: .85rem; text-decoration: underline; text-underline-offset: 5px; }
.story-fit { border-top: 1px solid #c7c9c1; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; color: #4c5350; font-size: .86rem; }
.story-fit a { text-decoration: underline; text-underline-offset: 3px; }
.story-workflow { background: #101716; padding: 80px 0 42px; color: #f0f2ed; }
.story-section-head { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 42px; }
.story-section-head p { max-width: 42ch; color: #bdc8c2; font-size: 1rem; line-height: 1.6; }
.product-flow { border: 1px solid #43514a; background: #151f1c; }
.flow-steps { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid #43514a; }
.flow-steps button { position: relative; border: 0; border-right: 1px solid #43514a; padding: 20px 12px; text-align: left; color: #d4dcd6; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 1rem; }
.flow-steps button:last-child { border-right: 0; }
.flow-steps button span { display: block; font-family: var(--font-mono); font-size: .72rem; margin-bottom: 7px; color: #a4b9b0; }
.flow-steps button[aria-pressed="true"] { background: #253b33; color: #fff; box-shadow: inset 0 -3px #69ddc0; }
.flow-steps button[aria-pressed="true"] span { color: #83e2c9; }
.flow-steps button.is-complete span::after { content: ' ✓'; }

.flow-controls { border-top: 1px solid #43514a; padding: 16px 22px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.flow-controls { position: relative; }
.flow-controls::before { content: ''; position: absolute; inset: -1px 0 auto; height: 2px; background: #69ddc0; transform: scaleX(var(--flow-progress, .1667)); transform-origin: left; }
.product-flow[data-stage="1"] { --flow-progress: .3333; }
.product-flow[data-stage="2"] { --flow-progress: .5; }
.product-flow[data-stage="3"] { --flow-progress: .6667; }
.product-flow[data-stage="4"] { --flow-progress: .8333; }
.product-flow[data-stage="5"] { --flow-progress: 1; }
.flow-controls > span { font-family: var(--font-mono); font-size: .76rem; color: #b3c9bd; }
.flow-controls > div { display: flex; gap: 10px; align-items: center; }
.flow-controls button { background: transparent; border: 1px solid #5a7064; color: #f0f2ed; font: inherit; font-size: .82rem; min-height: 44px; padding: 10px 14px; cursor: pointer; }
.flow-controls button:disabled { color: #a6b9ae; border-color: #3f5147; cursor: default; }
.flow-controls [data-flow-play] { min-width: 175px; }
.story-workflow__foot { display: flex; justify-content: space-between; gap: 18px; color: #b7cac0; font-size: .86rem; margin-top: 22px; }
.story-workflow__foot a { color: #edeee9; text-decoration: underline; text-underline-offset: 4px; }

.story-section { padding: 86px 0; background: var(--paper); color: var(--story-ink); }

.story-usecase { display: grid; grid-template-columns: 48px 1fr 1.15fr; gap: 28px; padding: 30px 0; border-top: 1px solid #b9c0b8; }

.story-usecase h3 { font-size: clamp(1.35rem, 2.1vw, 1.8rem); max-width: 23ch; }
.story-usecase p { color: var(--story-muted); line-height: 1.6; max-width: 60ch; }
.story-usecase a { font-size: .88rem; display: inline-block; margin-top: 16px; text-decoration: underline; text-underline-offset: 4px; }

.story-split { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; }
.story-split h2 { margin-bottom: 24px; }
.story-split > div > p { max-width: 53ch; line-height: 1.65; margin-bottom: 28px; }
.story-connect { background: #dfe7e0; border-block: 1px solid #b9c5b9; }
.story-connection > div { display: flex; gap: 23px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #b0c0b0; }
.story-connection > div:last-child { margin-bottom: 0; padding-bottom: 0; border: 0; }
.story-connection b { font: .8rem var(--font-mono); padding-top: 4px; color: #3c5748; }
.story-connection h3 { font-size: 1.3rem; margin-bottom: 10px; }
.story-connection p { font-size: .95rem; line-height: 1.6; color: #3c5145; }
.story-connection details { margin-top: 14px; font-size: .85rem; }
.story-connection summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding-block: 7px; }
.story-connection ul { padding: 15px 0 0 20px; font-family: var(--font-mono); font-size: .75rem; overflow-wrap: anywhere; line-height: 1.9; }
.story-evidence { background: #eee9df; }
.story-evidence__list > p { border-bottom: 1px solid #c4c0b7; padding-bottom: 18px; margin-bottom: 18px !important; }
.story-evidence__list strong, .story-evidence__list span { display: block; }
.story-evidence__list strong { font-weight: 600; margin-bottom: 5px; }
.story-evidence__list span { color: #555952; font-size: .95rem; }

.story-reading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 36px; }
.story-reading a { border-top: 1px solid #acb6ad; padding-top: 20px; }
.story-reading a > span:first-child { color: #556459; font-size: .8rem; }
.story-reading h3 { font-size: 1.5rem; margin: 14px 0; }
.story-faqs { margin-top: 70px; max-width: 960px; }
.story-faqs h2 { margin-bottom: 28px; }
.story-faq { border-top: 1px solid #b3bdb3; padding: 0; }
.story-faq summary { cursor: pointer; font-size: 1.1rem; padding: 22px 24px 22px 0; font-weight: 500; }
.story-faq p { line-height: 1.7; max-width: 75ch; color: #49584d; padding-bottom: 26px; }
.story-faqs > a { margin-top: 26px; }
.product-story .cta { padding: 82px 0; }
.product-story .cta__title { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.product-story .cta__steps { margin-bottom: 28px; }
.story-reply { font-size: .9rem; line-height: 1.7; }
.story-reply a { text-decoration: underline; text-underline-offset: 4px; }
.product-story .post-grid:empty { display: none; }
.product-story .writing__more { text-align: left; }
@media (hover: hover) {
  .product-story .btn--primary:hover { background: #a61922; border-color: #a61922; }
  .flow-steps button:hover { background: #273f33; }
  .flow-controls button:not(:disabled):hover { background: #304b3b; }
  .story-reading a:hover h3 { color: #06635e; }
}
@media (prefers-reduced-motion: no-preference) {
  .flow-controls::before { transition: transform 450ms cubic-bezier(.77,0,.175,1); }
}
@media (max-width: 1000px) {
  .story-hero__grid { gap: 35px; grid-template-columns: minmax(0, 1fr) 210px; }
  .story-hero h1 { font-size: clamp(3rem, 5.8vw, 4.4rem); }
  .story-split { gap: 40px; }
}
@media (max-width: 700px) {
  .story-hero { padding-top: 115px; }
  .story-hero__grid { display: block; padding-bottom: 36px; }
  .story-hero h1 { font-size: clamp(2.7rem, 9.7vw, 4rem); max-width: 16ch; }
  .story-hero__body { margin-block: 22px; font-size: 1.12rem; }
  .story-hero__index { display: none; }
  .story-actions { gap: 22px; }
  .story-actions .btn { width: 100%; }
  .story-fit { display: block; font-size: .8rem; padding-block: 18px; }
  .story-fit p + p { margin-top: 9px; }
  .story-workflow { padding: 50px 0 28px; }
  .story-section-head { display: block; margin-bottom: 28px; }
  .story-section-head p { margin-top: 20px; font-size: .92rem; }
  .flow-steps { grid-template-columns: repeat(3, 1fr); }
  .flow-steps button { padding: 13px 12px; font-size: .92rem; }
  .flow-steps button:nth-child(3) { border-right: 0; }
  .flow-steps button:nth-child(-n+3) { border-bottom: 1px solid #43514a; }
  .flow-steps button span { font-size: .62rem; margin-bottom: 4px; }

  .flow-controls { flex-direction: column; gap: 13px; padding: 16px; }
  .flow-controls > div { justify-content: center; width: 100%; }
  .flow-controls [data-flow-play] { flex: 1; min-width: 0; }
  .flow-controls button { padding-inline: 12px; }
  .flow-controls > span { align-self: start; }

  .story-workflow__foot { display: block; font-size: .81rem; line-height: 1.6; }
  .story-workflow__foot span { display: block; margin-top: 10px; }
  .story-section { padding-block: 52px; }
  .story-usecase { grid-template-columns: 25px 1fr; gap: 15px; padding-block: 24px; }
  .story-usecase h3 { max-width: none; font-size: 1.45rem; }
  .story-usecase p { font-size: .97rem; }

  .story-split { grid-template-columns: 1fr; gap: 36px; }
  .story-connection > div { gap: 16px; }
  .story-evidence .btn { white-space: normal; text-align: center; }

  .story-reading { grid-template-columns: 1fr; gap: 24px; }
  .story-reading h3 { max-width: 25ch; font-size: 1.4rem; }
  .story-faqs { margin-top: 52px; }
  .story-faq summary { font-size: 1rem; line-height: 1.45; }
  .product-story .cta { padding-block: 52px; }
}