/* Consumer data story: isolated from the simulator and the landing page. */
.data-story { --ink: #14253f; --soft-ink: #5a6c85; --line: #dce5f1; --review: #176fe8; --traffic: #b84b19; --ads: #267148; color: var(--ink); background: #f7faff; font-family: Arial, Helvetica, sans-serif; }
.data-story .site-header { max-width: 1480px; }
.data-story .atmosphere { z-index: 0; }
.data-story > header, .data-story > main, .data-story > footer { position: relative; }
.data-story .grid { mask-image: linear-gradient(#000, transparent 1200px); background-size: 80px 80px; }
.data-story .glow { animation: none; }
.data-story a, .data-story button { -webkit-tap-highlight-color: transparent; }
.data-story button[hidden] { display: none; }
.data-story :is(a,button,summary):focus-visible { outline: 3px solid #285de8; outline-offset: 5px; }
.access-skip { position: fixed; top: -90px; left: 20px; padding: 14px 18px; z-index: 100; background: white; border-radius: 8px; }
.access-skip:focus { top: 12px; }
.data-story .data-main { width: 100%; max-width: none; padding: 0; }
.data-story h1, .data-story h2 { font-style: normal; }
.data-story h2 { font-size: clamp(2.3rem, 3.7vw, 3.8rem); line-height: 1.05; letter-spacing: -.055em; font-weight: 650; }
.data-story p { text-wrap: pretty; }
.overline { font-size: .75rem; line-height: 1.6; font-weight: 700; letter-spacing: .16em; color: #546f97; }
.data-hero { max-width: 1200px; margin: auto; padding: 62px 28px 45px; text-align: center; }
.data-hero > .overline { margin: 0 0 46px; }
.source-stage { margin: auto; width: min(940px, 100%); }
.source-equation { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 66px; }
.source-card { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 112px; padding: 20px 16px; border: 1px solid #d5e1f1; border-radius: 18px; background: #ffffffb8; box-shadow: 0 8px 24px #284e9a06; animation: card-unfold 3.5s cubic-bezier(.22,1,.36,1) both; transition: border-color .2s, box-shadow .2s; }
.source-card:hover { border-color: #93b3ee; box-shadow: 0 9px 25px #284e9a10; }
.source-card img { display: block; max-width: 100%; object-fit: contain; }
.source-card > span { display: flex; justify-content: space-between; width: 100%; max-width: 174px; gap: 8px; margin-top: 14px; font-size: .8125rem; color: #60728e; animation: reveal-role 3.5s both; }
.source-birdeye { --gather: 54px; }
.source-semrush { --gather: 0px; }
.source-spyfu { --gather: -54px; }
.source-plus { position: absolute; top: 30px; color: #7e92b2; font-size: 2rem; font-weight: 300; animation: plus-fade 3.5s both; }
.plus-first { left: calc(33.333% - 19px); }
.plus-last { right: calc(33.333% - 19px); }
.source-connection { height: 66px; position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 66px; animation: connector-in 3.5s both; }
.source-connection i { height: 33px; border-right: 1px solid #c5d7f1; width: 50%; }
.source-connection i:first-child:after { content: ''; position: absolute; height: 1px; background: #c5d7f1; left: calc((100% - 132px)/6); right: calc((100% - 132px)/6); top: 32px; }
.source-connection span { position: absolute; left: 50%; top: 32px; height: 34px; width: 1px; background: #b6cdf0; }
.source-destination { display: inline-flex; align-items: center; gap: 7px; font-size: 1.125rem; font-weight: 600; letter-spacing: -.04em; padding: 9px 16px 9px 11px; border: 1px solid #c9dcfa; border-radius: 13px; box-shadow: 0 5px 22px #245fe512; background: #fff; animation: connector-in 3.5s both; }
.hero-message { animation: message-in 3.5s both; }
.data-story .data-hero h1 { margin: 29px 0 19px; font-size: clamp(4.4rem, 8vw, 6.9rem); letter-spacing: -.075em; font-weight: 700; line-height: .98; }
.hero-lead { margin: 0; font-size: clamp(1.4rem,2.2vw,1.9rem); line-height: 1.35; letter-spacing: -.035em; font-weight: 500; }
.hero-lead span { color: #657793; }
.hero-copy { max-width: 565px; margin: 22px auto 0; font-size: 1rem; line-height: 1.75; color: var(--soft-ink); }
.hero-actions { margin-top: 29px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.solid-link { display: inline-flex; align-items: center; gap: 24px; border-radius: 9px; background: #285de8; color: #fff; padding: 16px 22px; font-size: .875rem; font-weight: 600; transition: background .2s, transform .2s; }
.solid-link:hover { background: #164dcc; transform: translateY(-2px); }
.data-story .replay-intro { width: auto; background: transparent; padding: 10px 0; color: #5c6f8c; font-size: .8125rem; font-weight: 400; }
.replay-intro span { margin: 0 5px 0 0; }
.hero-caption { font-size: .75rem; color: #62738d; margin: 28px 0 0; animation: message-in 3.5s both; }
.data-nav { position: sticky; top: 0; z-index: 5; justify-content: center; gap: 36px; padding: 21px 20px; background: #f7faffed; backdrop-filter: blur(14px); border-top: 1px solid #e2e9f3; border-bottom: 1px solid #e2e9f3; font-size: .875rem; color: #516885; }
.data-sections { width: min(1240px, 100%); margin: auto; padding: 0 34px; }
.provider-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; padding: 112px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 70px; }
.section-index { margin: 0 0 28px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: .75rem; color: #577195; letter-spacing: .08em; font-weight: 600; }
.kind-label { padding: 5px 9px; background: #edf3fc; border-radius: 5px; font-weight: 400; letter-spacing: normal; color: #526b8f; }
.section-logo { display: block; max-width: 180px; margin-bottom: 20px; object-fit: contain; object-position: left; }
.provider-copy > p:not(.section-index) { margin-top: 22px; color: var(--soft-ink); font-size: 1rem; line-height: 1.75; }
.signal-list { display: grid; gap: 18px; padding: 0; margin: 26px 0; list-style: none; }
.signal-list li { display: flex; align-items: flex-start; gap: 12px; }
.signal-list li > span { color: #285de8; font-size: .875rem; padding-top: 2px; }
.signal-list strong { display: block; color: #213959; font-size: .9375rem; font-weight: 600; }
.signal-list div > span { display: block; margin-top: 5px; font-size: .875rem; color: var(--soft-ink); line-height: 1.6; }
.data-story .data-context { border-left: 2px solid #d4e0f0; padding-left: 15px; font-size: .875rem !important; }
.data-context strong { font-weight: 600; color: #344b6c; }
.text-link { display: inline-flex; gap: 18px; font-size: .875rem; color: #2757b1; line-height: 1.5; margin-top: 8px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.provider-visual { padding: 22px; border: 1px solid #d7e3f7; border-radius: 22px; background: linear-gradient(145deg,#eaf3ff,#f4f8ff); box-shadow: 0 18px 55px #28476b06; min-width: 0; }
.visual-topline { display: flex; align-items: center; gap: 7px; font-size: .75rem; color: #536d95; letter-spacing: .07em; margin-bottom: 20px; }
.visual-topline > span:last-child { margin-left: auto; letter-spacing: normal; color: #697b96; }
.mini-dot { height: 5px; width: 5px; background: #3e80ed; border-radius: 50%; }
.product-capture { margin: 0; }
.capture-open { position: relative; display: block; padding: 10px; background: white; border: 1px solid #dce5f3; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 35px #1b427015; }
.capture-open > img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; transition: transform .35s; }
.capture-open:hover > img { transform: scale(1.025); }
.expand-hint { position: absolute; bottom: 10px; right: 10px; background: #142c4feb; color: white; border-radius: 6px; padding: 8px 10px; font-size: .75rem; opacity: 0; transition: opacity .2s; }
.capture-open:hover .expand-hint, .capture-open:focus-visible .expand-hint { opacity: 1; }
.product-capture figcaption { margin-top: 11px; color: #61718b; font-size: .75rem; }
.product-capture figcaption a:hover { text-decoration: underline; }
.application-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 27px; border-top: 1px solid #cfddf0; padding-top: 22px; }
.application-note img { flex-shrink: 0; }
.application-note span { font-size: .75rem; font-weight: 700; letter-spacing: .05em; color: #56719a; }
.application-note p { margin: 7px 0 0; color: #354e70; font-size: .9375rem; line-height: 1.6; }
.signal-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 0 36px; }
.signal-tags span { padding: 7px 9px; border: 1px solid #d1dff0; border-radius: 6px; font-size: .75rem; color: #557094; background: #ffffff5c; }
.traffic-section .provider-copy { order: 2; }
.traffic-section .provider-visual { order: 1; }
.traffic-section { grid-template-columns: 1.15fr .85fr; }
.traffic-visual { background: linear-gradient(145deg,#f2f3ff,#f9faff); border-color: #dee2f4; }
.traffic-visual .mini-dot { background: #ff642d; }
.ads-visual { background: linear-gradient(145deg,#e9f6f5,#f5fafc); border-color: #d7e8e6; }
.ads-visual .mini-dot { background: #388463; }
.ai-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 65px; padding: 64px; margin-top: 100px; border-radius: 26px; background: radial-gradient(ellipse at top left, #244577, transparent 65%),#11233e; color: white; scroll-margin-top: 95px; }
.ai-copy .overline { color: #acbfdc; margin: 0; }
.ai-star { color: #a9c9ff; display: block; font-size: 2.4rem; margin: 30px 0 22px; }
.ai-copy > p:not(.overline) { color: #c0cde0; font-size: 1rem; line-height: 1.8; margin: 24px 0; }
.ai-principle { border-top: 1px solid #ffffff26; padding-top: 25px; color: #d3e0f4; font-size: .9375rem; line-height: 1.7; }
.ai-principle > span { color: #8daede; float: left; margin-right: 12px; font-size: 1.6rem; }
.ai-example { align-self: center; }
.ai-example-heading { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 22px; font-size: .75rem; line-height: 1.4; color: #9db6da; }
.ai-example-heading > span:first-child { font-weight: 600; letter-spacing: .07em; }
.review-fragment { display: flex; align-items: center; gap: 16px; background: #ffffff09; border: 1px solid #ffffff1f; border-radius: 10px; padding: 16px 19px; margin-top: 10px; }
.fragment-number { font-size: .75rem; color: #87a4cb; }
.stars { letter-spacing: 2px; font-size: .875rem; color: #efc878; }
.stars > span { color: #6f7e93; }
.review-fragment p { color: #d7e3f4; font-size: .875rem; line-height: 1.5; margin: 5px 0 0; }
.ai-flow { display: flex; gap: 14px; justify-content: center; align-items: center; color: #9fbeed; font-size: 1.5rem; padding: 14px 0; }
.ai-flow span { width: 58px; height: 1px; background: #ffffff26; }
.summary-card { padding: 24px; background: #f8fbff; border: 1px solid #fff; border-radius: 13px; color: #233a5a; box-shadow: 0 20px 50px #06112235; }
.summary-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.summary-heading > span:first-child { font-size: .9375rem; font-weight: 600; color: #2856a2; }
.summary-heading > span:last-child { font-size: .75rem; color: #627a9d; }
.summary-card > p { font-size: 1rem; line-height: 1.7; margin: 20px 0; }
.theme-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-pills span { padding: 7px 9px; border-radius: 5px; color: #466792; background: #e9f0fc; font-size: .75rem; }
.summary-card details { margin-top: 23px; padding-top: 17px; border-top: 1px solid #dce5f1; }
.summary-card summary { font-size: .8125rem; font-weight: 500; }
.summary-card details p { color: #586d8a; font-size: .875rem; line-height: 1.7; }
.example-note { color: #a5b8d3; font-size: .75rem; line-height: 1.65; margin: 18px 0 0; }
.standards-section { padding: 115px 0 0; scroll-margin-top: 15px; }
.standards-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; }
.standards-heading .overline { margin: 0 0 20px; }
.standards-heading > p { color: var(--soft-ink); font-size: 1.125rem; line-height: 1.7; margin: 0; max-width: 420px; }
.standards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; margin: 52px 0 38px; }
.standards-grid article { padding-top: 22px; border-top: 1px solid #cfdcec; }
.standard-number { font-size: .75rem; color: #5e7da6; }
.standards-grid h3 { font-size: 1.125rem; letter-spacing: -.025em; font-weight: 600; margin: 24px 0 12px; }
.standards-grid p { font-size: .9375rem; color: var(--soft-ink); line-height: 1.75; margin: 0; }
.freshness-table { border: 1px solid var(--line); border-radius: 15px; background: #ffffff70; overflow: auto; }
.freshness-table table { border-collapse: collapse; width: 100%; min-width: 610px; text-align: left; }
.freshness-table thead { background: #edf3fb; }
.freshness-table th, .freshness-table td { padding: 20px 24px; font-size: .875rem; line-height: 1.6; }
.freshness-table thead th { color: #5e7391; font-size: .75rem; font-weight: 600; }
.freshness-table tbody th { white-space: nowrap; font-weight: 500; }
.freshness-table td { color: #5b6f8c; }
.freshness-table tr:not(:last-child) { border-bottom: 1px solid #e2e9f3; }
.table-dot { display: inline-block; vertical-align: middle; margin-right: 9px; width: 7px; height: 7px; border-radius: 50%; }
.reviews-dot { background: #478eeb; } .traffic-dot { background: #f38156; } .ads-dot { background: #499b75; } .ai-dot { background: #9b85dc; }
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; padding: 112px 0 100px; }
.faq-section .overline { margin: 0 0 20px; }
.faq-section h2 { font-size: clamp(2.25rem,3.3vw,3.1rem); }
.faq-list details { border-top: 1px solid var(--line); padding: 22px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.data-story summary { cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; list-style: none; line-height: 1.6; gap: 18px; }
.data-story summary::-webkit-details-marker { display: none; }
.data-story summary > span { font-size: 1.25rem; color: #6a80a0; transition: transform .2s; }
.data-story details[open] > summary > span { transform: rotate(45deg); }
.faq-list summary { font-size: 1rem; font-weight: 500; }
.faq-list details p { color: var(--soft-ink); line-height: 1.8; font-size: .9375rem; margin: 18px 0 0; }
.faq-list details a { display: inline-block; font-size: .8125rem; color: #2f5ba7; margin-right: 15px; text-decoration: underline; text-underline-offset: 3px; }
.data-cta { text-align: center; padding: 60px 25px 64px; border: 1px solid #d3e1f7; border-radius: 24px; background: radial-gradient(ellipse at top,#dceaff,#edf4fe 66%); }
.data-cta .overline { margin: 20px 0; }
.data-cta h2 { font-size: clamp(2.3rem,4vw,3.6rem); }
.data-cta .solid-link { margin-top: 28px; }
.data-cta > p:last-child { font-size: .875rem; color: #617795; margin-top: 20px; }
.demo-disclosure { margin: 30px auto 64px; max-width: 900px; text-align: center; color: #687b97; font-size: .75rem; line-height: 1.7; }
.demo-disclosure strong { font-weight: 500; color: #5a6d88; }
.demo-disclosure p { margin-top: 5px; }
.data-story footer { max-width: 1172px; }
.image-dialog { width: min(1300px,94vw); max-height: 92svh; padding: 20px; border: 1px solid #d8e4f2; border-radius: 15px; background: #f6f9ff; color: #243c5b; box-shadow: 0 30px 100px #06173544; }
.image-dialog::backdrop { background: #0a1b35ba; backdrop-filter: blur(7px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 16px; }
.dialog-heading p { margin: 0; font-size: .875rem; }
.data-story .dialog-heading button { width: auto; padding: 10px 13px; background: #e7eef9; color: #345578; font-size: .8125rem; }
#dialog-image { display: block; width: 100%; height: auto; max-height: 76svh; object-fit: contain; }
@keyframes card-unfold { 0%,30% { transform: translateX(var(--gather)) translateY(52px); border-color: transparent; background: transparent; box-shadow: none; } 68%,100% { transform: none; } }
@keyframes reveal-role { 0%,32% { opacity: 0; transform: translateY(-8px); } 66%,100% { opacity: 1; transform: none; } }
@keyframes plus-fade { 0%,30% { opacity: 1; transform: translateY(52px); } 66%,100% { opacity: .5; transform: none; } }
@keyframes connector-in { 0%,35% { opacity: 0; transform: translateY(-8px); } 75%,100% { opacity: 1; transform: none; } }
@keyframes message-in { 0%,42% { opacity: 0; transform: translateY(14px); } 85%,100% { opacity: 1; transform: none; } }
@media (max-width: 1050px) { .provider-section { gap: 36px; padding: 85px 0; } .ai-section { padding: 40px; gap: 35px; } .ai-example-heading { flex-wrap: wrap; gap: 5px; } .source-equation, .source-connection { gap: 40px; } .source-connection i:first-child:after { left: calc((100% - 80px)/6); right: calc((100% - 80px)/6); } .source-birdeye { --gather: 32px; } .source-spyfu { --gather: -32px; } .plus-first { left: calc(33.333% - 14px); } .plus-last { right: calc(33.333% - 14px); } .standards-heading { gap: 50px; } .faq-section { gap: 45px; } .data-story footer { margin-inline: 34px; } }
@media (max-width: 780px) { .data-hero { padding: 40px 20px 32px; } .data-hero > .overline { margin-bottom: 28px; } .source-card { padding: 14px 10px; height: 101px; border-radius: 12px; } .source-card img { height: 32px; } .source-card > span { font-size: .75rem; } .source-plus { font-size: 1.5rem; } .source-equation, .source-connection { gap: 27px; } .source-connection i:first-child:after { left: calc((100% - 54px)/6); right: calc((100% - 54px)/6); } .source-birdeye { --gather: 12px; } .source-spyfu { --gather: -12px; } .plus-first { left: calc(33.333% - 11px); } .plus-last { right: calc(33.333% - 11px); } .data-nav { gap: 25px; padding: 18px 16px; } .data-sections { padding: 0 24px; } .provider-section, .traffic-section { grid-template-columns: 1fr; gap: 35px; padding: 65px 0; } .traffic-section .provider-copy, .traffic-section .provider-visual { order: initial; } .provider-copy { max-width: 560px; } .provider-copy h2 br { display: none; } .provider-visual { padding: 23px; } .capture-open > img { max-height: 410px; } .ai-section { grid-template-columns: 1fr; padding: 36px; gap: 40px; margin-top: 65px; } .ai-copy h2 br { display: none; } .ai-star { margin: 18px 0; } .standards-section { padding-top: 75px; } .standards-heading { grid-template-columns: 1fr; gap: 24px; } .standards-heading > p { max-width: none; font-size: 1rem; } .standards-grid { gap: 25px; margin-top: 30px; } .standards-grid h3 { line-height: 1.4; } .freshness-table th, .freshness-table td { padding: 16px; } .faq-section { grid-template-columns: 1fr; gap: 30px; padding: 75px 0 65px; } .faq-section h2 br { display: none; } .expand-hint { opacity: 1; } }
@media (max-width: 500px) { .data-story .site-header { padding: 18px; gap: 15px; } .data-story .site-header nav { font-size: .875rem; } .data-hero { padding: 35px 16px 27px; } .data-hero > .overline { font-size: .75rem; letter-spacing: .1em; margin-bottom: 22px; } .source-equation, .source-connection { gap: 22px; } .source-card { min-width: 0; height: 94px; padding: 12px 6px; border-radius: 10px; } .source-card img { height: 27px; } .source-card > span { font-size: .75rem; justify-content: center; line-height: 1.35; min-height: 32px; margin-top: 8px; } .source-card > span > span { display: none; } .source-plus { font-size: 1.2rem; top: 30px; } .plus-first { left: calc(33.333% - 9px); } .plus-last { right: calc(33.333% - 9px); } .source-connection i:first-child:after { left: calc((100% - 44px)/6); right: calc((100% - 44px)/6); } .source-birdeye { --gather: 5px; } .source-spyfu { --gather: -5px; } .source-destination { font-size: 1rem; } .data-story .data-hero h1 { margin-top: 27px; font-size: 4.5rem; } .hero-lead { font-size: 1.35rem; line-height: 1.4; } .hero-copy { margin-top: 18px; } .hero-actions { gap: 17px; } .solid-link { padding: 15px 18px; gap: 18px; } .data-nav { gap: 0; justify-content: space-between; font-size: .8125rem; padding: 17px 14px; overflow: auto; } .data-nav a { white-space: nowrap; } .data-sections { padding-inline: 19px; } .section-index { gap: 9px; margin-bottom: 22px; } .provider-section { padding: 53px 0; } .provider-visual { padding: 17px; border-radius: 15px; } .visual-topline { font-size: .75rem; letter-spacing: 0; } .application-note { margin-top: 22px; } .signal-tags { margin-left: 0; gap: 5px; } .signal-tags span { padding: 6px 8px; } .capture-open { padding: 6px; } .ai-section { margin: 50px -3px 0; padding: 27px 22px; border-radius: 19px; } .ai-example-heading { flex-direction: column; } .review-fragment { padding: 14px; } .summary-card { padding: 19px; } .summary-heading { align-items: flex-start; flex-direction: column; gap: 7px; } .standards-grid { grid-template-columns: 1fr; gap: 26px; } .standards-grid h3 { margin: 12px 0 8px; } .standards-heading h2 br { display: none; } .faq-section { padding-top: 60px; } .faq-list summary { font-size: .9375rem; } .data-cta { padding: 38px 20px; border-radius: 19px; } .data-cta .overline { font-size: .75rem; letter-spacing: .08em; } .data-cta h2 { font-size: 2.35rem; } .demo-disclosure { margin-bottom: 42px; text-align: left; } .data-story footer { margin: 0 19px; } .image-dialog { padding: 13px; } .dialog-heading p { font-size: .75rem; } }
@media (prefers-reduced-motion: reduce) { .data-story html { scroll-behavior: auto; } .data-story *, .data-story *::before, .data-story *::after { animation: none !important; transition: none !important; } .source-card, .hero-message, .hero-caption, .source-destination, .source-connection, .source-card > span { opacity: 1; transform: none; } .source-plus { opacity: .5; } }