.discovery-page { --discovery-ink: #242129; --discovery-muted: #69636e; --discovery-purple: #6815df; color: var(--discovery-ink); }
.discovery-page h1, .discovery-page h2, .discovery-page h3 { text-wrap: balance; }
.discovery-page p { color: var(--discovery-muted); line-height: 1.75; }
.discovery-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 92px; padding-bottom: 100px; }
.discovery-hero > *, .platform-examples-band > .container > *, .example-setup-main > * { min-width: 0; }
.discovery-page h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: 1.06; letter-spacing: -.055em; font-weight: 620; margin: 20px 0 26px; }
.discovery-page h1 span { color: var(--discovery-purple); }
.discovery-hero > div > p, .examples-hero > p { font-size: 18px; max-width: 650px; }
.discovery-hero .destination-actions { margin-top: 30px; }
.platform-flow { margin: 0; padding: 30px; border: 1px solid #e6dcef; border-radius: 28px; background: linear-gradient(145deg,#f7f3fc,#f2e9fd); }
.platform-flow > figcaption { font-size: 17px; font-weight: 600; margin-bottom: 26px; }
.platform-source { display: flex; align-items: center; gap: 16px; padding: 20px 16px; background: #fff; border: 1px solid #eee8f4; border-radius: 17px; }
.sample-product { display: block; width: 100%; height: auto; }
.platform-source > svg { width: 44%; flex-shrink: 0; }
.platform-source strong { font-size: 18px; display: block; letter-spacing: -.025em; }
.platform-source p { font-size: 12px; margin: 10px 0 0; }
.platform-file-code { display: block; font-size: 10px; letter-spacing: .12em; color: #796c83; margin-bottom: 9px; }
.platform-flow-line { display: flex; justify-content: center; padding: 17px 0; color: var(--discovery-purple); }
.platform-destinations { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; margin: 0; gap: 10px; }
.platform-destinations li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; padding: 20px 9px; border-radius: 13px; background: #fff9; font-size: 12px; font-weight: 550; }
.platform-destinations svg { color: var(--discovery-purple); }
.platform-flow .platform-flow-note { font-size: 12px; line-height: 1.6; margin: 20px 0 0; }
.discovery-heading { max-width: 700px; margin-bottom: 52px; }
.discovery-page h2 { font-size: clamp(30px,3.4vw,46px); letter-spacing: -.045em; line-height: 1.15; font-weight: 600; }
.discovery-heading h2 { margin-top: 18px; }
.platform-story { padding-block: 38px 96px; }
.platform-stages { list-style: none; margin: 0; padding: 0; }
.platform-stages > li { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding: 44px 0; border-top: 1px solid #e7e3eb; scroll-margin-top: 110px; }
.platform-stage-label { display: flex; gap: 18px; align-items: baseline; font-size: 16px; }
.platform-stage-label > span { color: #9b8baa; font-variant-numeric: tabular-nums; }
.platform-stage-label > svg { color: var(--discovery-purple); align-self: flex-start; flex-shrink: 0; }
.platform-stage-label strong { font-weight: 550; }
.platform-stage-copy h3 { font-size: 28px; font-weight: 550; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 16px; }
.platform-stage-copy > p { font-size: 16px; }
.platform-stage-copy .platform-stage-result { display: flex; gap: 10px; align-items: flex-start; color: #4c315f; font-size: 14px; margin: 22px 0; }
.platform-stage-result > svg { flex-shrink: 0; margin-top: 4px; }
.platform-examples-band { background: #f6f2fc; padding: 80px 0; }
.platform-examples-band > .container { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.platform-examples-band h2 { margin: 18px 0 24px; }
.platform-examples-band p { font-size: 17px; }
.platform-examples-band .text-link { margin-top: 20px; }
.discovery-closing { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 75px; padding-bottom: 95px; border-top: 1px solid #e7e3eb; }
.discovery-closing > div { max-width: 690px; }
.discovery-closing p { margin: 20px 0 0; font-size: 17px; }
.discovery-closing .button { flex-shrink: 0; }
.examples-hero { padding-top: 90px; padding-bottom: 50px; }
.examples-hero .examples-notice { font-size: 13px; max-width: 650px; margin-top: 24px; }
.example-navigation { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; padding-bottom: 60px; }
.example-navigation a { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 22px; border: 1px solid #e5dfea; border-radius: 16px; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.example-navigation a:hover { background: #faf7ff; border-color: #b690e7; }
.example-navigation a > span { grid-column: 1 / -1; color: var(--discovery-purple); font-size: 13px; }
.example-navigation strong { font-size: 15px; line-height: 1.4; font-weight: 550; }
.example-navigation svg { align-self: end; color: var(--discovery-purple); }
.example-setup { padding-block: 64px 80px; border-top: 1px solid #e7e3eb; scroll-margin-top: 90px; }
.example-setup-heading { display: flex; align-items: flex-start; gap: 25px; max-width: 880px; margin-bottom: 45px; }
.example-number { font-size: 14px; color: var(--discovery-purple); padding-top: 9px; }
.example-setup-heading h2 { margin: 0 0 20px; }
.example-setup-heading p { max-width: 650px; font-size: 17px; margin: 0; }
.example-setup-main { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 75px; }
.example-library { margin: 0; padding: 28px; background: #eeeafa; border-radius: 25px; color: #2b2630; }
.example-library-product { background: #eaf2ed; }
.example-library-partner { background: #faede4; }
.example-library-essentials { background: #eaf0f8; }
.example-library-window { background: #fff; border: 1px solid #0000000d; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 35px #3b264a0a; }
.example-library-bar { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid #eeebf1; font-size: 11px; font-weight: 550; }
.example-library-bar > svg { margin-left: auto; flex-shrink: 0; color: #a297ab; }
.example-library-mark { font-size: 18px; font-weight: 750; color: #6815df; }
.example-library-body { padding: 22px; }
.example-library-heading > strong { display: block; font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.example-library-heading p { font-size: 11px; color: #706676; line-height: 1.5; margin: 9px 0 20px; }
.example-start { border: 1px solid #eee7f7; background: #faf7fd; border-radius: 9px; overflow: hidden; }
.example-slide { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 155px; aspect-ratio: 16/9; background: #6412cf; color: white; padding: 25px; overflow: hidden; }
.example-slide > span { position: absolute; top: 10px; left: 13px; font-size: 13px; font-weight: 700; }
.example-slide > strong { font-size: clamp(15px,1.5vw,21px); letter-spacing: -.025em; font-weight: 550; z-index: 1; }
.example-slide > p { color: #f3e9ff; font-size: 9px; margin: 9px 0 0; z-index: 1; }
.example-slide > i { position: absolute; width: 160px; height: 160px; border: 30px solid #ffffff0a; border-radius: 50%; right: -75px; bottom: -85px; }
.example-start > svg { max-height: 180px; background: #eadcc9; }
.example-start > span { display: flex; justify-content: space-between; gap: 9px; padding: 13px; font-size: 12px; font-weight: 600; }
.example-start > span > svg { flex-shrink: 0; }
.example-folders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.example-folders > div { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 15px 12px; border: 1px solid #eee9f1; border-radius: 8px; font-size: 10px; line-height: 1.35; }
.example-folders svg { color: #826698; }
.example-library > figcaption { margin-top: 17px; font-size: 11px; color: #706578; text-align: center; }
.example-search { display: flex; align-items: center; gap: 10px; border: 1px solid #dddfe0; padding: 11px; border-radius: 7px; font-size: 12px; }
.example-search > svg { color: #6b756d; flex-shrink: 0; }
.example-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 20px; }
.example-filters span { border-radius: 5px; padding: 5px 8px; background: #edf3ee; font-size: 10px; }
.example-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding-bottom: 35px; }
.example-products > div { min-width: 0; }
.example-products svg { background: #f7f4ee; border-radius: 6px; margin-bottom: 10px; }
.example-products strong, .example-products span { display: block; font-size: 10px; line-height: 1.5; }
.example-products span { color: #7a717b; font-size: 9px; }
.example-setup-details { display: grid; gap: 25px; }
.example-setup-details h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 9px; }
.example-setup-details p { margin: 0; font-size: 15px; }
.example-setup-details .eyebrow { margin-bottom: 10px; }
.example-task { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.example-task li { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.example-task li > span { color: var(--discovery-purple); font-size: 12px; }
.example-check { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border-radius: 13px; background: #f6f3fa; }
.example-check > svg { flex-shrink: 0; margin-top: 1px; color: var(--discovery-purple); }
.examples-rollout-link { display: flex; justify-content: space-between; padding-block: 0 40px; }
.examples-rollout-link > svg { color: var(--discovery-purple); }
.destination-hero > .example-library { width: 100%; }
.rollout-phase-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding-bottom: 35px; }
.rollout-phase-nav a { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; border-top: 2px solid #d9c6f1; padding-top: 18px; text-decoration: none; color: inherit; }
.rollout-phase-nav a > span { color: #6815df; font-size: 13px; padding-top: 3px; }
.rollout-phase-nav strong { font-size: 18px; letter-spacing: -.02em; font-weight: 550; }
.rollout-phase-nav p { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.6; }
.rollout-phase-nav a:hover strong { color: #6815df; }
.rollout-first-launch { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid #decbbb; scroll-margin-top: 110px; }
.rollout-first-launch h3 { font-size: 21px; margin-bottom: 12px; }
.rollout-first-launch p { font-size: 16px; }
.rollout-launch-checklist { margin-top: 34px; }
.rollout-launch-checklist h3 { margin-bottom: 16px; }
.rollout-launch-checklist ul { padding-left: 20px; display: grid; gap: 13px; }
.rollout-launch-checklist li { font-size: 14px; line-height: 1.7; }
.rollout-launch-checklist strong { color: #373039; }
.buyer-start #improve-adoption, .buyer-start #starting-point, .buyer-start #user-training { scroll-margin-top: 105px; }
.rollout-adoption-example { padding: 20px 24px; border-left: 3px solid #b799e0; background: #f7f3fc; margin-top: 28px; }
.rollout-adoption-example p { font-size: 15px; margin: 0; }
@media (max-width: 1100px) {
  .discovery-hero { gap: 32px; }
  .platform-examples-band > .container, .example-setup-main { gap: 40px; }
  .platform-source { flex-direction: column; text-align: center; }
  .platform-source > svg { width: 58%; }
  .platform-flow { padding: 24px; }
  .example-library { padding: 20px; }
}
@media (max-width: 800px) {
  .discovery-hero { grid-template-columns: 1fr; gap: 42px; padding-block: 58px 65px; }
  .platform-flow { max-width: 550px; width: 100%; justify-self: center; }
  .platform-source { flex-direction: row; text-align: left; }
  .platform-source > svg { width: 42%; }
  .platform-stages > li { grid-template-columns: 1fr; gap: 25px; padding-block: 35px; }
  .platform-stage-label { font-size: 14px; }
  .platform-stage-copy h3 { font-size: 25px; }
  .platform-story { padding-bottom: 45px; }
  .platform-examples-band > .container, .example-setup-main { grid-template-columns: 1fr; gap: 32px; }
  .platform-examples-band { padding-block: 55px; }
  .platform-examples-band .example-library { max-width: 520px; width: 100%; justify-self: center; }
  .discovery-closing { flex-direction: column; align-items: flex-start; gap: 28px; padding-block: 50px 65px; }
  .examples-hero { padding-top: 55px; }
  .example-navigation { grid-template-columns: repeat(2,minmax(0,1fr)); padding-bottom: 40px; }
  .example-setup { padding-block: 45px 55px; }
  .example-setup-heading { gap: 16px; margin-bottom: 30px; }
  .example-setup-main > .example-library { max-width: 540px; width: 100%; justify-self: center; }
  .rollout-phase-nav { grid-template-columns: 1fr; gap: 22px; }
  .rollout-phase-nav p { max-width: 550px; }
}
@media (max-width: 450px) {
  .discovery-page h1 { font-size: clamp(38px,10.8vw,48px); }
  .discovery-hero > div > p, .examples-hero > p { font-size: 16px; }
  .platform-flow { padding: 20px 14px; border-radius: 20px; }
  .platform-source { gap: 8px; padding: 16px 10px; }
  .platform-source strong { font-size: 15px; }
  .platform-source p { font-size: 10px; }
  .platform-destinations { gap: 6px; }
  .platform-destinations li { font-size: 10px; padding: 15px 5px; }
  .example-navigation { gap: 10px; }
  .example-navigation a { padding: 15px 12px; }
  .example-navigation strong { font-size: 13px; }
  .example-library { padding: 14px; border-radius: 18px; }
  .example-library-body { padding: 17px 13px; }
  .example-library-heading > strong { font-size: 21px; }
  .example-library-bar { font-size: 10px; }
  .example-folders > div { padding: 12px 9px; }
  .example-setup-heading h2 { font-size: 29px; }
  .example-check { padding: 16px; }
}
.use-cases-hero { max-width: 100%; padding-block: 88px 54px; }
.use-cases-hero > p { max-width: 740px; font-size: 19px; }
.use-case-navigation { padding-bottom: 76px; scroll-margin-top: 110px; }
.use-case-navigation h2 { font-size: 20px; letter-spacing: -.025em; margin: 0 0 24px; }
.use-case-navigation-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #e7dfed; border-radius: 22px; overflow: hidden; background: #fbf9fe; }
.use-case-navigation-group { padding: 25px 22px 28px; min-width: 0; }
.use-case-navigation-group + .use-case-navigation-group { border-left: 1px solid #e7dfed; }
.use-case-group-link { display: grid; grid-template-columns: 1fr auto; gap: 18px 10px; color: var(--discovery-ink); text-decoration: none; }
.use-case-group-link > svg:first-child { grid-column: 1 / -1; color: var(--discovery-purple); }
.use-case-group-link strong { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; }
.use-case-group-link > svg:last-child { color: var(--discovery-purple); align-self: center; }
.use-case-navigation-group ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.use-case-navigation-group li a { display: block; color: #655a70; font-size: 13px; line-height: 1.55; text-decoration: none; text-underline-offset: 4px; }
.use-case-navigation-group li a:hover, .use-case-group-link:hover strong { color: var(--discovery-purple); text-decoration: underline; }
.use-case-group { display: grid; grid-template-columns: .72fr 1.7fr; gap: 85px; padding-block: 64px; border-top: 1px solid #e7e3eb; scroll-margin-top: 105px; }
.use-case-group-heading { align-self: start; position: sticky; top: 110px; padding-top: 7px; }
.use-case-group-number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #f1e8fc; color: var(--discovery-purple); font-size: 14px; font-variant-numeric: tabular-nums; }
.use-case-group:nth-child(2) .use-case-group-number { background: #fcece2; color: #8a4929; }
.use-case-group:nth-child(3) .use-case-group-number { background: #e7f1eb; color: #2c674a; }
.use-case-group:nth-child(4) .use-case-group-number { background: #e9effb; color: #365a9d; }
.use-case-group-heading h2 { font-size: clamp(28px,3vw,39px); margin-block: 22px 18px; }
.use-case-group-heading > p { font-size: 15px; }
.use-case-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; color: #786482; text-decoration: none; text-underline-offset: 4px; }
.use-case-back:hover { text-decoration: underline; }
.use-case { padding-block: 32px; scroll-margin-top: 105px; }
.use-case:first-child { padding-top: 7px; }
.use-case + .use-case { border-top: 1px solid #ece7ef; }
.use-case .eyebrow { font-size: 10px; line-height: 1.6; }
.use-case .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.use-case h3 { font-size: clamp(24px,2.5vw,30px); font-weight: 570; letter-spacing: -.035em; line-height: 1.2; margin-block: 12px 16px; }
.use-case-introduction > p { font-size: 15px; margin: 0 0 20px; }
.use-case h4 { font-size: 13px; line-height: 1.5; font-weight: 650; margin: 0 0 8px; }
.use-case-explanation > p { margin: 0; font-size: 15px; }
.use-case-detail { margin-top: 20px; }
.use-case-detail > summary { display: flex; align-items: center; gap: 9px; width: fit-content; padding-block: 6px; color: var(--discovery-purple); font-size: 13px; font-weight: 550; cursor: pointer; list-style: none; }
.use-case-detail > summary::-webkit-details-marker { display: none; }
.use-case-detail > summary > svg { transition: transform .15s; }
.use-case-collapse, .use-case-detail[open] > summary .use-case-expand { display: none; }
.use-case-detail[open] > summary .use-case-collapse { display: inline; }
.use-case-detail[open] > summary > svg { transform: rotate(180deg); }
.use-case-detail-body { padding-top: 18px; }
.use-case-detail-body > ol { padding-left: 21px; margin: 0 0 22px; display: grid; gap: 10px; }
.use-case-detail-body > ol > li { padding-left: 6px; font-size: 14px; line-height: 1.65; color: #655a70; }
.use-case-detail-body > ol > li::marker { color: var(--discovery-purple); font-size: 12px; }
.use-case-outcome { display: flex; gap: 13px; align-items: flex-start; padding: 19px 21px; background: #f7f3fc; border-radius: 13px; }
.use-case-outcome > svg { color: var(--discovery-purple); flex-shrink: 0; margin-top: 2px; }
.use-case-outcome p { font-size: 14px; margin: 0; }
.use-case-customer { margin-top: 24px; border-left: 2px solid #ddd0ed; padding-left: 18px; }
.use-case-customer p { margin-block: 9px; font-size: 13px; }
.use-case-customer strong { color: var(--discovery-ink); font-weight: 600; }
.use-case-customer .text-link { font-size: 12px; }
.use-case-detail-body > .destination-inline-links { margin-top: 24px; gap: 16px 24px; }
.use-case-detail-body > .destination-inline-links .text-link { font-size: 13px; }
.use-cases-page .discovery-closing .text-link { margin-top: 22px; }
.use-cases-page a:focus-visible, .use-case-detail > summary:focus-visible { outline: 2px solid var(--discovery-purple); outline-offset: 5px; border-radius: 3px; }
@media (max-width: 1100px) {
  .use-case-group { gap: 48px; }
  .use-case-navigation-group { padding-inline: 17px; }
}
@media (max-width: 800px) {
  .use-cases-hero { padding-block: 55px 36px; }
  .use-case-navigation { padding-bottom: 48px; }
  .use-case-navigation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .use-case-navigation-group:nth-child(3) { border-left: 0; }
  .use-case-navigation-group:nth-child(n+3) { border-top: 1px solid #e7dfed; }
  .use-case-group { grid-template-columns: 1fr; gap: 28px; padding-block: 42px; }
  .use-case-group-heading { position: static; }
  .use-case-group-heading h2 { margin-block: 18px 12px; }
  .use-case-group-heading > p { max-width: 600px; }
  .use-case-back { display: none; }
}
@media (max-width: 450px) {
  .use-cases-hero > p { font-size: 16px; }
  .use-case-navigation-grid { grid-template-columns: 1fr; border-radius: 17px; }
  .use-case-navigation-group { padding: 23px; }
  .use-case-navigation-group + .use-case-navigation-group { border-left: 0; border-top: 1px solid #e7dfed; }
  .use-case-group-link { grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; }
  .use-case-group-link > svg:first-child { grid-column: auto; }
  .use-case-navigation-group ul { margin-top: 17px; gap: 10px; }
  .use-case-outcome { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) { .example-navigation a, .use-case-detail > summary > svg { transition: none; } }