/* Shared visual refresh: blue showcase, open layouts, and original dashboard art. */
:root { --blue:#0767a4; --navy:#12334b; --navy-2:#074c7b; --muted:#546b7b; --line:#dbe8f0; --heading-size:clamp(32px,4vw,48px); }
h1,h2 { font-family:inherit; font-weight:650; letter-spacing:-.045em; }
.section { padding:90px 0; }
.nav { height:82px; }
.nav-links { gap:27px; }
.nav-cta,.button { border-radius:999px; }
.nav-cta,.button-primary { background:var(--blue); }
.button { padding:14px 25px; gap:20px; box-shadow:none; }
.eyebrow { font-size:11px; letter-spacing:.16em; }
.eyebrow > span { display:none; }
.showcase-hero { background:#08639e; color:white; padding:66px 0 58px; overflow:hidden; }
.showcase-heading { text-align:center; max-width:900px; margin:auto; }
.showcase-heading .eyebrow { color:#bfe5fc; }
.showcase-heading h1 { color:white; font-size:clamp(38px,4.3vw,62px); max-width:none; line-height:1.12; margin:19px 0; }
.showcase-heading h1 em { color:#b9e6ff; }
.showcase-heading > p { color:#e0f1fc; font-size:18px; max-width:630px; margin:0 auto; }
.source-stream { margin:42px auto 0; max-width:850px; position:relative; z-index:1; overflow:hidden; }
.source-group { display:flex; justify-content:space-around; width:850px; flex-shrink:0; }
.source-track { display:flex; width:max-content; }
.source-group > span { display:flex; flex-direction:column; align-items:center; gap:7px; width:110px; text-align:center; font-size:11px; color:#dbf1ff; }
.source-stream.is-scrolling { mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); }
.is-scrolling .source-track { animation:tool-scroll 26s linear infinite; }
.source-stream:hover .source-track,.source-stream.is-paused .source-track { animation-play-state:paused; }
.source-motion-toggle { display:block; margin:12px auto 0; border:1px solid #ffffff55; border-radius:999px; background:transparent; color:#e0f1fc; padding:5px 13px; font-size:11px; }
.source-motion-toggle[hidden] { display:none; }
@keyframes tool-scroll { to { transform:translateX(-50%); } }
.source-stream b { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:#c3e9ff; color:#075486; font-size:18px; letter-spacing:-.04em; border:6px solid #91d4fb; }
.source-group > span:nth-child(even) b { background:#92d5fc; border-color:#48afe9; }
.data-funnel { width:min(780px,90%); height:65px; background:linear-gradient(110deg,#168ad0,#4cbcff); clip-path:polygon(0 0,100% 0,55% 100%,45% 100%); opacity:.6; margin:10px auto -5px; }
.dashboard-stage { position:relative; max-width:1120px; margin:auto; }
.dashboard-preview { width:76%; margin:auto; background:#f7fafd; color:#243d50; border:1px solid #d4e3ed; border-radius:12px; box-shadow:0 22px 60px #003b6555; position:relative; z-index:2; padding:20px; text-align:left; }
.dashboard-top { display:flex; align-items:center; gap:12px; padding-bottom:17px; font-size:13px; font-weight:700; }
.dashboard-brand { background:#0767a4; border-radius:7px; padding:7px 10px; color:white; font-size:19px; letter-spacing:-.08em; }
.dashboard-brand > span { color:#d8f1ff; }
.dashboard-top small { display:block; font-weight:400; font-size:10px; color:#4e6779; }
.sample-badge { margin-left:auto; border:1px solid #d5e4ee; border-radius:4px; padding:5px 8px; font-size:8px; letter-spacing:.1em; color:#577083; }
.dashboard-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dashboard-metrics > div { background:white; border:1px solid #e2eaf1; border-radius:7px; padding:12px 15px; }
.dashboard-metrics span { font-size:10px; display:block; color:#4e6779; }
.dashboard-metrics strong { display:block; font-size:clamp(18px,2.2vw,29px); letter-spacing:-.045em; line-height:1.6; }
.dashboard-metrics small { display:block; color:#247454; font-size:9px; }
.dashboard-charts { display:grid; grid-template-columns:1.6fr 1fr; gap:12px; margin-top:12px; }
.dashboard-charts > div { background:white; border:1px solid #e2eaf1; border-radius:7px; padding:15px; min-width:0; }
.chart-title { font-size:10px; font-weight:700; display:flex; justify-content:space-between; gap:10px; }
.chart-title > span { font-weight:400; color:#617889; font-size:9px; }
.trend-chart svg { width:100%; display:block; margin-top:15px; }
.chart-months { display:flex; justify-content:space-between; font-size:8px; color:#4e6779; }
.channel-row { display:grid; grid-template-columns:47px 1fr 23px; gap:8px; align-items:center; margin-top:22px; font-size:9px; }
.channel-row b { width:var(--bar); height:12px; background:#1797dc; border-radius:0 3px 3px 0; }
.channel-row:nth-child(3) b { background:#65bce9; }
.channel-row:nth-child(4) b { background:#acdff8; }
.channel-row small { font-size:9px; }
.chart-key { font-size:8px; margin-top:23px; color:#4e6779; }
.chart-key i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#1996d6; margin-right:3px; }
.dashboard-bottom { display:flex; justify-content:space-between; gap:12px; margin-top:14px; font-size:8px; color:#4e6779; }
.dashboard-side { position:absolute; top:55px; width:260px; height:250px; background:#e4f3fc; color:#075486; padding:23px; border-radius:9px; opacity:.35; }
.side-left { left:-50px; transform:rotate(-5deg); }
.side-right { right:-50px; transform:rotate(5deg); }
.dashboard-side small { font-size:8px; letter-spacing:.1em; }
.dashboard-side strong { display:block; font-size:20px; margin-top:8px; }
.dashboard-side > span { font-size:10px; }
.mini-bars { display:flex; align-items:flex-end; gap:13px; height:125px; padding-bottom:18px; }
.mini-bars i { width:20px; height:55%; background:#198fd0; border-radius:3px 3px 0 0; }
.mini-bars i:nth-child(2n) { height:80%; }.mini-bars i:nth-child(3n) { height:95%; }
.mini-line { height:125px; padding:15px 0; }
.mini-line svg { width:100%; height:100%; }
.showcase-cta { text-align:center; margin-top:33px; }
.showcase-cta p { font-size:21px; line-height:1.5; color:#d8efff; margin-bottom:21px; }
.showcase-cta strong { color:white; font-weight:600; }
.showcase-cta .button { width:auto; color:#075b95; }
.hero-explainer { display:block; width:fit-content; margin:17px auto 0; color:#d5edff; font-size:13px; }
.intro-band { padding:57px 0; border-bottom:1px solid var(--line); }
.intro-band .container { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; max-width:1040px; }
.intro-band p { margin:0; font-size:25px; line-height:1.5; letter-spacing:-.03em; color:var(--navy); }
.intro-band p strong { font-weight:650; }
.intro-band .container > span { font-size:17px; color:var(--muted); }
.centered { text-align:center; margin:0 auto 48px; }
.problem-section { background:#f3f9fd; }
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; text-align:center; }
.pain-icon { display:grid; place-items:center; width:72px; height:72px; background:#dff0fc; color:#0879bb; font-size:38px; border-radius:22px; margin:0 auto 22px; }
.pain-grid h3 { font-size:21px; line-height:1.35; color:var(--navy); max-width:260px; margin:0 auto 15px; letter-spacing:-.025em; }
.pain-grid p { font-size:15px; color:var(--muted); margin:0; }
.benefits-grid { display:flex; flex-direction:column; gap:38px; }
.benefits-heading { display:grid; grid-template-columns:1.15fr 1fr; column-gap:80px; align-items:center; width:100%; margin-bottom:12px; }
.benefits-heading .eyebrow { grid-column:1/-1; }
.benefits-heading h2 { grid-column:1; grid-row:2/4; }
.benefits-heading .button { justify-self:start; }
.benefits-heading p { margin:18px 0 20px; max-width:490px; }
.service-family { width:100%; }
.service-family-heading { display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.service-family-heading h3 { margin:0; color:var(--navy); font-size:16px; font-weight:650; }
.service-family-heading > span { color:var(--muted); font-size:12px; }
.service-family-heading::after { content:""; height:1px; flex:1; background:var(--line); }
.benefit-list { display:grid; gap:16px; }
.bi-services { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ai-services { grid-template-columns:repeat(3,minmax(0,1fr)); }
.benefits-heading h2,.hosting-grid h2 { font-size:var(--heading-size); line-height:1.12; margin:17px 0 24px; }
.benefits-heading p { font-size:18px; color:var(--muted); margin-bottom:28px; }
.benefit-list article { padding:25px; border:1px solid var(--line); border-radius:16px; background:#f8fbfd; }
.service-card-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px; }
.service-category { font-size:10px; font-weight:650; color:#17648f; letter-spacing:.015em; }
.service-index { display:grid; place-items:center; flex-shrink:0; width:27px; height:27px; border-radius:50%; border:1px solid #d1e4ef; color:#4e6779; font-size:10px; }
.benefit-list h4 { color:var(--navy); margin:0 0 13px; font-size:21px; line-height:1.3; letter-spacing:-.025em; font-weight:650; }
.benefit-list p { color:var(--muted); font-size:14px; line-height:1.75; margin:0; }
.ai-services article { background:linear-gradient(135deg,#eef7fe,#f7fbff); border-color:#cce3f2; }
.ai-services .service-index { background:white; }
.service-detail-link { margin:20px 0 0; font-size:14px; }
.service-detail-link a,.faq-list a,.guide-section a { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); margin-bottom:32px; }
.breadcrumbs a { color:var(--blue); }
.guide-intro { padding-top:45px; padding-bottom:60px; }
.guide-intro h1 { max-width:1000px; font-size:clamp(36px,5vw,64px); line-height:1.1; }
.guide-intro > p { max-width:780px; color:var(--muted); font-size:20px; }
.guide-contents { display:flex; flex-wrap:wrap; gap:14px 25px; margin-top:35px; padding-top:25px; border-top:1px solid var(--line); font-size:14px; color:var(--blue); }
.guide-section { padding-top:48px; padding-bottom:48px; }
.guide-section h2,.guide-page .faq-section h2 { font-size:clamp(28px,3vw,40px); line-height:1.2; }
.guide-section > p { max-width:850px; color:var(--muted); font-size:17px; }
.comparison-wrap { overflow-x:auto; margin-top:28px; }
.comparison-table { width:100%; border-collapse:collapse; font-size:15px; }
.comparison-table caption { text-align:left; padding:0 0 15px; color:var(--muted); font-size:13px; }
.comparison-table th,.comparison-table td { text-align:left; padding:20px; border:1px solid var(--line); vertical-align:top; }
.comparison-table thead { background:#e9f5fd; color:var(--navy); }
.comparison-table th[scope="row"] { width:23%; background:#f6fafe; }
.guide-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:28px; }
.guide-cards article { border:1px solid var(--line); border-radius:16px; padding:27px; background:#f8fbfd; }
.guide-cards h3 { color:var(--navy); font-size:21px; line-height:1.3; }
.guide-cards p { color:var(--muted); font-size:15px; }
.guide-cards p:last-child { margin-bottom:0; }
.guide-steps { padding-left:23px; max-width:850px; color:var(--muted); }
.guide-steps li { padding:8px 0 8px 8px; }
.guide-contact { padding-top:65px; padding-bottom:65px; }
.about-grid { display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:42px 60px; align-items:center; }
.about-photo { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:18px; }
.about-intro h2 { font-size:var(--heading-size); line-height:1.15; margin:20px 0; }
.about-intro p { font-size:18px; color:var(--muted); }
.about-intro > a { font-size:14px; color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.about-experience { display:grid; grid-template-columns:1fr 1fr; grid-column:1/-1; gap:18px; }
.about-experience article { padding:26px; border:1px solid var(--line); border-radius:16px; background:#f8fbfd; }
.about-experience h3 { font-size:21px; line-height:1.3; color:var(--navy); margin:12px 0; }
.about-experience p { color:var(--muted); font-size:15px; margin:0; }
@media(max-width:980px) { .about-grid { gap:35px; } }
@media(max-width:760px) { .about-grid { grid-template-columns:1fr; gap:30px; }.about-photo { max-width:340px; }.about-experience { grid-template-columns:1fr; } }
@media(max-width:760px) { .guide-cards { grid-template-columns:1fr; }.comparison-table th,.comparison-table td { padding:12px; }.comparison-table { font-size:13px; }.guide-intro > p { font-size:17px; } }
.fit-section { background:#e9f5fd; text-align:center; }
.fit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-bottom:26px; }
.fit-grid p { font-size:18px; font-weight:600; color:var(--navy); }
.fit-grid span { display:block; color:#087ebf; font-size:26px; margin-bottom:12px; }
.fit-section .container > a { color:var(--blue); text-decoration:underline; text-underline-offset:5px; font-size:14px; }
.hosting-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.hosting-grid p { color:var(--muted); font-size:18px; }
.hosting-options { display:flex; flex-wrap:wrap; gap:8px; }
.hosting-options span { border:1px solid #cde3f2; background:#f3f9fd; padding:8px 12px; border-radius:6px; font-size:12px; color:#175579; }
.hosting-grid .hosting-note { font-size:12px; margin:18px 0 0; }
.process { padding-top:15px; }
.process .section-heading { max-width:800px; }
.faq-section { background:#f3f9fd; }
.faq-section .container { max-width:900px; }
.faq-list details { padding:24px 0; }
.cta-section { background:#08639e; padding:78px 0; }
.cta-box { background:none; box-shadow:none; padding:0; border-radius:0; gap:80px; }
.cta-box .eyebrow { color:#c3e8ff; }
.cta-box > div > p { color:#e0eff9; }
.contact-form label { color:white; }
.contact-form input,.contact-form textarea { background:#ffffff; color:var(--navy); border:1px solid #c9e0ef; border-radius:6px; }
.contact-form textarea::placeholder { color:#657987; }
.form-note { color:#deeffb; }
.site-footer { padding:45px 0; }
.footer-brand img { height:auto; }
.footer-meta a { color:var(--blue); overflow-wrap:anywhere; }
.story-intro h1 { font-size:clamp(38px,5vw,68px); }
@media(min-width:761px) and (max-width:1100px) { .nav-links { gap:18px; } }
@media(min-width:761px) and (max-width:980px) {
  .nav-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:82px; left:0; right:0; background:white; padding:22px 20px 28px; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:18px; font-size:14px; }
  .nav-links.open { display:flex; }
}
@media(max-width:980px) {
  .benefits-grid { gap:32px; }.benefits-heading { column-gap:35px; }.bi-services { grid-template-columns:repeat(2,minmax(0,1fr)); }.ai-services { grid-template-columns:1fr; }.ai-services article { display:grid; grid-template-columns:210px 1fr; gap:22px; }.ai-services .service-card-meta { align-self:start; margin:0; }.pain-grid { gap:25px; }
  .cta-box { grid-template-columns:1fr 1fr; gap:35px; }
  .dashboard-preview { width:88%; }.dashboard-side { width:200px; }
  .intro-band .container,.hosting-grid { gap:35px; }
}
@media(max-width:760px) {
  .section { padding:62px 0; }.nav { height:74px; }
  .showcase-hero { padding:43px 0; }.showcase-heading > p { font-size:16px; }
  .source-stream { margin-top:28px; }.source-group { width:660px; }.source-stream b { width:64px; height:64px; border-width:4px; font-size:15px; margin:auto; }.source-group > span { font-size:10px; }
  .data-funnel { height:40px; }.dashboard-preview { width:100%; padding:12px; }.dashboard-side { display:none; }
  .dashboard-top { font-size:11px; gap:8px; }.dashboard-brand { font-size:16px; }.sample-badge { font-size:7px; padding:4px; }
  .dashboard-metrics { gap:5px; }.dashboard-metrics > div { padding:9px 7px; }.dashboard-metrics span { font-size:9px; }.dashboard-metrics small { font-size:8px; }
  .dashboard-charts { grid-template-columns:1fr; }.channel-chart { display:none; }.dashboard-bottom { flex-wrap:wrap; font-size:8px; }
  .showcase-cta p { font-size:19px; }.intro-band { padding:38px 0; }
  .intro-band .container,.benefits-grid,.hosting-grid,.cta-box { grid-template-columns:1fr; gap:24px; }
  .intro-band p { font-size:23px; }.intro-band .container > span { font-size:16px; }
  .pain-grid,.fit-grid { grid-template-columns:1fr; gap:32px; }.pain-grid p { max-width:400px; margin:auto; }
  .benefits-grid { gap:30px; }.benefits-heading { display:block; margin-bottom:5px; }.service-family-heading { align-items:flex-start; flex-direction:column; gap:3px; }.service-family-heading::after { display:none; }.bi-services { grid-template-columns:1fr; }.ai-services article { display:block; }.benefit-list article { padding:24px; }.service-card-meta,.ai-services .service-card-meta { margin-bottom:20px; }.fit-grid { gap:10px; }.fit-grid span { display:inline; margin-right:10px; }
  .centered { margin-bottom:35px; }.hosting-grid h2 { margin-bottom:0; }.process { padding-top:0; }
  .cta-box { gap:35px; }.field-row { grid-template-columns:1fr 1fr; }.footer-grid { gap:25px; }
}
@media(max-width:380px) { .dashboard-metrics strong { font-size:17px; }.field-row { grid-template-columns:1fr; } }
.source-stream:not(.is-scrolling) .source-track,.source-stream:not(.is-scrolling) .source-group { width:100%; }
.source-stream:not(.is-scrolling) .source-group { flex-wrap:wrap; gap:18px 0; }
@media(prefers-reduced-motion:reduce) {
  .source-stream.is-scrolling { mask-image:none; }
  .source-stream .source-track { animation:none; transform:none; width:100%; }
  .source-stream .source-group { width:100%; flex-wrap:wrap; gap:18px 0; }
  .source-group[aria-hidden="true"],.source-motion-toggle { display:none; }
}

/* Reuse the compact brand mark; render the wordmark as readable text. */
.brand { width:auto; min-width:0; gap:10px; overflow:visible; }
.brand img,.footer-brand .brand img { width:44px; height:44px; flex-shrink:0; margin:0; }
.brand-wordmark { font-size:20px; font-weight:700; color:var(--navy); line-height:1.2; white-space:nowrap; }
.brand-wordmark small { display:block; font-size:9px; font-weight:500; letter-spacing:.025em; margin-top:4px; }
.footer-brand .brand { display:inline-flex; margin-bottom:14px; }
@media(max-width:380px) { .brand-wordmark { font-size:18px; }.brand img { width:38px; height:38px; } }