/* Self-guided Backflow sales flow. Keep the established StrataWorks palette and lettering. */
.sales-page .button-primary { box-shadow: none; border: 1px solid var(--cyan); }
.sales-page .button-primary:hover { transform: none; background: #b9efff; box-shadow: none; }
.sales-page [hidden] { display: none !important; }
.sales-page svg { flex: 0 0 auto; vertical-align: middle; }
.sales-page .inline-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; text-decoration: underline; text-underline-offset: .3em; }
.sales-page p { max-width: 70ch; }
.sales-page :is(h1,h2,h3) { text-wrap: balance; letter-spacing: -.03em; }
.sales-hero { padding: calc(var(--header-h) + 3.5rem) var(--pad) 4rem; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 3.5rem; align-items: center; }
.sales-hero h1 { font-size: clamp(1.1rem,1.7vw,1.45rem); font-weight: 500; line-height: 1.4; margin: 0; color: #b9cbdc; }
.sales-hero h1 span { display: block; margin-top: 1.1rem; color: var(--paper); font-size: clamp(2.5rem,4.8vw,5.5rem); line-height: 1.05; font-weight: 700; }
.sales-lede { color: #b9cbdc; font-size: 1.1rem; line-height: 1.7; margin: 1.7rem 0; }
.sales-hero .platform-breadcrumb { margin-bottom: 2rem; }
.sales-hero .hero-actions { gap: 1.4rem; }
.sales-hero-note, .media-note { color: #b9cbdc; font-size: .85rem; line-height: 1.6; margin-top: 1.3rem; }
.tour-player { min-width: 0; }
.sales-page video { width: 100%; display: block; aspect-ratio: 8/5; object-fit: contain; background: var(--ink); }
.tour-player > video { border: 1px solid #405772; border-radius: 12px; }
.tour-caption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; font-size: .85rem; }
.tour-caption a { color: var(--cyan); text-decoration: underline; text-underline-offset: .25em; }
.tour-chapters { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1rem; }
.tour-chapters button { border: 0; border-bottom: 1px solid #536f8f; color: #d1e4f6; background: transparent; padding: .6rem .1rem; cursor: pointer; min-height: 44px; }
.tour-chapters button:hover { color: var(--cyan); border-color: var(--cyan); }
.sales-workflow { background: var(--paper); color: var(--ink); }
.sales-page .section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 3rem; margin-bottom: 3rem; }
.sales-page .platform-section h2 { font-size: clamp(2rem,3.4vw,4rem); text-transform: none; line-height: 1.12; letter-spacing: -.03em; }
.sales-page .section-heading p { color: #455362; margin: 0; }
.sales-guides { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
.sales-guides video { border-radius: 12px; }
.guide h3 { font-size: 1.4rem; margin: 1.3rem 0 .7rem; }
.guide p { color: #455362; margin: 0 0 .8rem; }
.guide .inline-link { font-size: .9rem; }
.records-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3rem; margin-top: 3rem; }
.records-columns > div { border-top: 1px solid #405772; padding-top: 1rem; }
.records-columns h3 { margin: .5rem 0; font-size: 1.25rem; }
.records-columns p { color: #b9cbdc; }
.sales-page .jurisdiction-note { color: #b9cbdc; border-top: 1px solid #405772; padding-top: 1.5rem; margin: 2rem 0 0; font-size: .9rem; max-width: 100%; }
.jurisdiction-note a { text-decoration: underline; text-underline-offset: .25em; color: var(--cyan); }
.sales-pricing { background: #d9eef3; color: var(--ink); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(2rem,6vw,7rem); align-items: start; }
.pricing-intro { padding-top: 1.5rem; }
.pricing-intro > p { color: #334a5c; margin: 2rem 0; }
.launch-plan { background: var(--paper); border: 1px solid #a4b7bb; border-radius: 16px; padding: clamp(1.5rem,3vw,3rem); }
.launch-plan h3 { margin: 0; font-size: 1.3rem; }
.plan-price-comparison { display: grid; grid-template-columns: minmax(0,1fr) minmax(145px,.85fr); align-items: start; gap: 1rem 1.5rem; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 0; }
.plan-price strong { font-size: clamp(3rem,6vw,5.5rem); line-height: 1.1; letter-spacing: -.04em; }
.plan-price span { color: #455362; }
.plan-alternatives { border-left: 1px solid #a4b7bb; padding-left: 1.25rem; margin: 1rem 0 .3rem; display: grid; gap: 1rem; }
.plan-alternative { margin: 0; color: #455362; font-size: .76rem; line-height: 1.4; }
.plan-alternative span { display: block; }
.plan-alternative s { display: block; color: #344c60; font-size: 1.45rem; font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: #446075; }
.launch-plan .plan-seats { margin-top: .7rem; font-weight: 600; }
.launch-plan .plan-guarantee { margin: 1.25rem 0 0; line-height: 1.55; }
.launch-plan .plan-availability { margin: .35rem 0 0; font-weight: 700; color: #075b70; }
.launch-plan .plan-comparison-note { color: #455362; font-size: .76rem; line-height: 1.55; margin: 1.2rem 0 0; }
.plan-comparison-note a { color: #075b70; text-decoration: underline; text-underline-offset: .2em; }
.plan-inclusions { padding-left: 1.2rem; margin: 1.8rem 0; line-height: 1.65; }
.plan-inclusions li { margin-bottom: .6rem; }
.launch-plan .button { width: 100%; text-align: left; }
.checkout-pending p { font-size: .9rem; color: #455362; }
.launch-plan .plan-timing { font-size: .95rem; font-weight: 600; margin-top: 1.5rem; }
.launch-plan .plan-fine-print { font-size: .82rem; color: #455362; margin-bottom: 0; }
.setup-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3rem; list-style: none; padding: 0; margin: 3rem 0 1.5rem; }
.setup-steps li { display: flex; gap: 1.2rem; border-top: 1px solid #405772; padding-top: 1.5rem; }
.setup-steps li > span { font-size: 1.2rem; color: var(--cyan); }
.setup-steps h3 { font-size: 1.25rem; margin: 0; }
.setup-steps p { color: #b9cbdc; }
.sales-page .platform-faq a { text-decoration: underline; text-underline-offset: .25em; }
.sales-page .demo-section { border-top: 1px solid #405772; }
.sales-page .demo-form { border-radius: 12px; }
.sales-page .demo-form :is(label, .form-note, small) { font-family: "Space Grotesk", sans-serif; }
.sales-page .demo-form label { font-size: .95rem; }
.sales-page .demo-form .form-note { font-size: .82rem; }
.sales-page .demo-form :is(input,textarea) { caret-color: var(--cyan); }
.sales-page .full-width { grid-column: 1 / -1; }
.sales-page .form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; }
.sales-page .demo-form .field-error { display: block; color: #ffb8a5; font-size: .85rem; }
.sales-page .demo-form [aria-invalid="true"] { border-color: #ffb8a5; }
.sales-page .demo-form [type="submit"]:disabled { cursor: wait; opacity: .7; }
.sales-page .form-success { color: #d1e4f6; font-size: .95rem; line-height: 1.7; }
.setup-page { padding: calc(var(--header-h) + 3rem) var(--pad) 4rem; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 4rem; align-items: start; }
.setup-copy h1 { font-size: clamp(2.7rem,4vw,4.5rem); line-height: 1.08; }
.setup-copy > p:not(.platform-breadcrumb) { color: #b9cbdc; line-height: 1.7; }
.setup-copy a:not(.inline-link) { text-decoration: underline; text-underline-offset: .25em; }
@media(max-width:1080px) { .sales-hero { grid-template-columns: 1fr; gap: 2.5rem; } .sales-hero-copy { max-width: 850px; } .tour-player { max-width: 1000px; } .setup-page { grid-template-columns: 1fr; gap: 2rem; } }
@media(max-width:760px) { .sales-hero { padding-top: calc(var(--header-h) + 2rem); gap: 2rem; } .sales-page .section-heading, .sales-guides, .records-columns, .sales-pricing, .setup-steps { grid-template-columns: 1fr; } .sales-page .section-heading { gap: 1.5rem; } .sales-guides { gap: 2.5rem; } .sales-hero h1 span { font-size: clamp(2.6rem,9.8vw,4rem); } .sales-hero .button { width: 100%; } .sales-page .platform-section { padding-top: 3.5rem; padding-bottom: 3.5rem; } .setup-page { padding-top: calc(var(--header-h) + 2rem); } .launch-plan .button { min-width: 0; } .records-columns, .setup-steps { gap: 1.2rem; } }
@media(max-width:900px) { .plan-price-comparison { grid-template-columns: 1fr; } .plan-alternatives { border-left: 0; border-top: 1px solid #a4b7bb; padding: 1rem 0 0; margin-top: 0; } }

/* Legibility and focus behavior for the sales surface. */
.sales-page .brand-name small { font: 500 .7rem/1.35 "Space Grotesk", sans-serif; letter-spacing: .01em; opacity: 1; }
.sales-page .brand-name { font-size: clamp(.78rem,1.2vw,1rem); letter-spacing: .025em; text-shadow: none; }
.sales-page .platform-breadcrumb { font-size: .8rem; }
.sales-page .site-nav { font-size: .8rem; }
.sales-page .site-footer :is(p,a) { font-size: .85rem; }
.sales-page .demo-form .form-note { text-transform: none; letter-spacing: normal; }
@media(max-width:960px) { .sales-page .site-nav:not(.is-open) { visibility: hidden; } .sales-page .site-nav.is-open { visibility: visible; font-size: 1rem; } }


/* Time-saving sales story: inherit StrataWorks lettering and palette. */
@font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/SpaceGrotesk.ttf") format("truetype"); font-style: normal; font-weight: 300 700; font-display: swap; }
.story-page { font-family: "Space Grotesk", sans-serif; }
.story-page ::selection { background: #58d5ff; color: #07101c; }
.story-page { scrollbar-color: #526579 #07101c; }
.story-page .site-header { background: #07101c; backdrop-filter: none; transition: background .25s ease; }
.story-page .brand-mark { filter: none; }
.story-page .brand-name { text-shadow: none; }
.story-page .site-nav, .story-page .button, .story-page .site-footer { font-family: "Space Grotesk", sans-serif; }
.story-hero { padding-top: calc(var(--header-h) + 4rem); padding-bottom: 5rem; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(2rem,4vw,5rem); }
.story-hero h1 { color: var(--paper); font-size: clamp(3rem,5.2vw,5.1rem); font-weight: 650; line-height: 1.04; letter-spacing: -.035em; }
.story-hero h1 em { color: var(--cyan); font-style: normal; }
.story-hero h1 .sr-only { display: initial; margin: -1px; }
.story-hero .sales-lede { font-size: clamp(1rem,1.3vw,1.14rem); margin: 1.5rem 0; max-width: 48ch; }
.story-hero .hero-actions { gap: .6rem 1.2rem; align-items: center; }
.story-page .button { font-size: .88rem; text-transform: none; letter-spacing: 0; min-height: 48px; padding: 1rem 1.3rem; }
.story-hero video { aspect-ratio: 16/9; border-radius: 12px; }
.story-page .tour-player { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.story-hero .sales-hero-note { font-size: .86rem; }
.story-page .tour-caption { font-size: .88rem; }
.story-page .media-note { font-size: .78rem; }
.story-proof { background: var(--paper); color: var(--ink); }
.story-page .story-proof .section-heading { grid-template-columns: 1.15fr .85fr; margin-bottom: 2.5rem; }
.story-proof .section-heading p { font-size: 1.08rem; line-height: 1.75; }
.report-proof { margin: 0; }
.report-proof img { width: 100%; height: auto; border: 1px solid #b8c4c8; border-radius: 12px; }
.report-proof figcaption { margin: 1rem 0 0; font-size: .88rem; line-height: 1.65; max-width: 85ch; color: #455362; }
.story-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3rem; margin-top: 3rem; }
.story-benefits > div { border-top: 1px solid #aebcc2; padding-top: 1.5rem; }
.story-benefits h3 { font-size: 1.35rem; margin: 0 0 .8rem; }
.story-benefits p { color: #455362; line-height: 1.7; margin: 0; }
.story-page .story-proof .jurisdiction-note { color: #455362; border-color: #aebcc2; }
.story-proof .jurisdiction-note a { color: #075b70; }
.story-page .sales-pricing { background: #dcebf0; }
.story-page .pricing-intro > p { font-size: 1.1rem; line-height: 1.75; max-width: 45ch; }
.story-page .pricing-intro > .inline-link { color: #075b70; }
.story-page .launch-plan { background: var(--paper); }
.story-page .launch-plan .plan-price { margin-top: 1.5rem; }
.story-page .platform-faq { display: grid; background: var(--paper); color: var(--ink); gap: 4rem; }
.story-page .platform-faq-list summary { padding-block: .35rem; }
.story-page .platform-faq-list a { color: #075b70; }
.story-page :is(.demo-form input,.demo-form select,.demo-form textarea) { caret-color: var(--cyan); border-radius: 6px; }
.story-page .site-footer :is(p,a) { text-transform: none; letter-spacing: 0; color: #b9cbdc; }
.story-page :is(.story-proof,.sales-pricing,.platform-faq) :is(a,button,summary):focus-visible { outline-color: #075b70; }
.story-page a:hover { text-decoration-thickness: 2px; }
@media (max-width:1080px) {
  .story-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: calc(var(--header-h) + 2.5rem); }
  .story-hero h1 { font-size: clamp(3.2rem,7vw,4.7rem); }
  .story-hero .sales-lede { max-width: 65ch; }
  .story-hero .tour-player { width: 100%; }
}
@media (max-width:760px) {
  .story-hero { padding-bottom: 3rem; }
  .story-hero h1 { font-size: clamp(2.9rem,10vw,4.1rem); }
  .story-hero .hero-actions { align-items: flex-start; flex-direction: column; }
  .story-hero .hero-actions .button { width: auto; }
  .story-page .story-proof .section-heading, .story-benefits, .story-page .platform-faq { grid-template-columns: 1fr; gap: 1.6rem; }
  .story-benefits { margin-top: 2rem; }
  .report-proof img { width: 100%; }
  .story-page .tour-caption { gap: .2rem; }
}
@media (prefers-reduced-motion:reduce) { .story-page *, .story-page *::before, .story-page *::after { scroll-behavior: auto; transition: none; animation: none; } }

.story-category { color: var(--cyan); font-size: .82rem; line-height: 1.6; margin: 0 0 1rem; letter-spacing: .015em; }
.sales-lede strong { color: var(--paper); }
.search-resources { background: #0e1b2a; }
.resource-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-top: 2rem; }
.resource-links a { border-top: 1px solid #405772; padding-top: 1.2rem; line-height: 1.6; }
.resource-links strong { display: block; color: var(--cyan); font-size: 1.1rem; text-decoration: underline; text-underline-offset: .25em; }
.resource-links span { display: block; color: #b9cbdc; margin-top: .6rem; font-size: .95rem; }
@media(max-width:760px) { .resource-links { grid-template-columns: 1fr; gap: 1.3rem; } }

/* Show the whole job as a sequence of real product screens. */
.story-page #workflow { scroll-margin-top: calc(var(--header-h) + 1rem); }
.capability-intro { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: end; gap: clamp(2rem,5vw,6rem); }
.capability-intro h2 { margin: 0; }
.capability-intro > p { color: #455362; line-height: 1.7; font-size: 1.08rem; margin: 0; }
.workflow-path { display: flex; flex-wrap: wrap; gap: .65rem 1.4rem; padding: 1.5rem 0 2rem; margin: 2rem 0 0; list-style: none; border-top: 1px solid #aebcc2; color: #075b70; font-weight: 700; font-size: .9rem; }
.workflow-path li + li::before { content: "→"; margin-right: 1.4rem; color: #5c6c77; font-weight: 400; }
.workflow-steps { list-style: none; margin: 0; padding: 0; }
.workflow-step { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: clamp(2rem,5vw,6rem); padding: clamp(2.5rem,5vw,5rem) 0; border-top: 1px solid #aebcc2; }
.workflow-step:nth-child(even) { grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); }
.workflow-step:nth-child(even) .workflow-copy { grid-column: 2; grid-row: 1; }
.workflow-step:nth-child(even) .workflow-visual { grid-column: 1; grid-row: 1; }
.workflow-copy h3 { display: flex; gap: 1.1rem; align-items: baseline; font-size: clamp(1.65rem,2.35vw,2.6rem); line-height: 1.12; margin: 0 0 1.3rem; }
.workflow-copy h3 span { color: #075b70; font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.workflow-copy > p { color: #334a5c; line-height: 1.75; margin: 0 0 1rem; }
.workflow-copy .workflow-payoff { border-top: 1px solid #aebcc2; padding-top: 1rem; margin-top: 1.5rem; color: #075b70; font-weight: 700; }
.workflow-visual { margin: 0; min-width: 0; }
.workflow-visual img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; display: block; border: 1px solid #aebcc2; border-radius: 12px; background: #e7edf0; }
.workflow-visual figcaption { color: #455362; font-size: .82rem; line-height: 1.6; margin-top: .7rem; }
.workflow-visual-phone { max-width: 480px; }
.workflow-visual-phone img { height: clamp(360px,40vw,480px); aspect-ratio: auto; object-fit: cover; }
.workflow-proof-note { color: #455362; font-size: .83rem; line-height: 1.65; padding-top: 1rem; border-top: 1px solid #aebcc2; max-width: 80ch; }
.workflow-next { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; background: #dcebf0; border-radius: 12px; padding: clamp(1.5rem,3vw,2.5rem); margin-top: 2.5rem; }
.workflow-next p { color: var(--ink); font-size: clamp(1.1rem,1.6vw,1.5rem); font-weight: 700; margin: 0; }
.workflow-next .button { white-space: nowrap; }
.capability-continuity { background: #0e1b2a; color: var(--paper); }
.capability-continuity .capability-intro > p { color: #b9cbdc; }
.continuity-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.5rem,3vw,3rem); margin-top: 3rem; }
.continuity-list > div { border-top: 1px solid #526579; padding-top: 1.3rem; }
.continuity-list h3 { font-size: clamp(1.2rem,1.5vw,1.55rem); margin: 0 0 .8rem; }
.continuity-list p { color: #b9cbdc; line-height: 1.7; margin: 0; }
.story-page .capability-continuity .jurisdiction-note { color: #b9cbdc; border-color: #526579; }
@media(max-width:900px) {
  .capability-intro, .workflow-step, .workflow-step:nth-child(even), .continuity-list { grid-template-columns: 1fr; }
  .workflow-step:nth-child(even) .workflow-copy, .workflow-step:nth-child(even) .workflow-visual { grid-column: auto; grid-row: auto; }
  .workflow-step { gap: 1.7rem; }
}
@media(max-width:600px) {
  .workflow-path { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; font-size: .72rem; text-align: center; }
  .workflow-path li { padding-inline: .2rem; border-right: 1px solid #aebcc2; }
  .workflow-path li:last-child { border-right: 0; }
  .workflow-path li + li::before { display: none; }
  .workflow-copy h3 { gap: .75rem; }
  .workflow-next { display: block; }
  .workflow-next .button { width: 100%; margin-top: 1.1rem; white-space: normal; }
}