@font-face { font-family: Plex; src: url('assets/plex-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url('assets/plex-light.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: PlexMono; src: url('assets/plex-mono.woff') format('woff'); font-weight: 400; font-display: swap; }
:root { --blue:#0f62fe; --blue-dark:#0043ce; --ink:#161616; --muted:#525252; --surface:#f4f4f4; --line:#d6d6d6; --white:#fff; --page:1264px; --control:56px; --section:80px; --heading-size:clamp(32px,3.2vw,44px); --blue-drift-duration:60s; --blue-panel:linear-gradient(225deg,var(--blue) 37%,transparent 85%),linear-gradient(162deg,#3d4de7 37%,var(--blue) 37%); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height,80px) + 24px); scrollbar-color:#8d8d8d var(--surface); }
body { margin:0; font:400 18px/1.5 Plex,Arial,sans-serif; color:var(--ink); background:var(--white); }
::selection { color:white; background:var(--blue-dark); }
a { color:inherit; text-underline-offset:5px; }
button { font:inherit; }
a,button,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.header :focus-visible,.hero :focus-visible,.closing :focus-visible { outline-color:white; }
img { max-width:100%; height:auto; display:block; }
svg { flex-shrink:0; }
figure { margin:0; }
p { margin:0 0 24px; }
h1,h2,h3,h4 { margin:0; font-weight:400; line-height:1.15; text-wrap:balance; }
h1,h2,h3 { font-weight:300; }
h1 { font-size:clamp(40px,4.6vw,66px); font-weight:300; letter-spacing:-.025em; }
h2 { max-width:32ch; font-size:var(--heading-size); font-weight:300; letter-spacing:-.02em; }
h3 { font-size:24px; letter-spacing:-.01em; } h4 { font-size:18px; }
[hidden] { display:none!important; }
.wrap { width:min(calc(100% - 80px),var(--page)); margin-inline:auto; }
.skip { position:fixed; top:-100px; left:20px; padding:12px 20px; background:white; z-index:50; }
.skip:focus { top:12px; }
.header { position:sticky; top:0; z-index:30; display:flex; gap:32px; align-items:center; min-height:80px; padding:12px 40px; background:var(--blue); color:white; border-bottom:1px solid #ffffff40; }
.brand { flex-shrink:0; } .brand img { width:150px; }
.header nav { display:flex; gap:28px; margin-left:auto; font-size:15px; }
.header nav a { text-decoration:none; padding-block:12px; }
.header nav a:hover { text-decoration:underline; }
.header-actions { display:flex; gap:28px; align-items:center; }
.languages { position:relative; font-size:14px; }
.languages summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:8px 12px; cursor:pointer; list-style:none; }
.languages summary::-webkit-details-marker { display:none; }
.languages summary:hover,.languages[open] summary { background:#ffffff1a; }
.languages summary svg { flex:none; }
.languages[open] summary svg { transform:rotate(180deg); }
.languages ul { position:absolute; top:calc(100% + 8px); right:0; min-width:200px; margin:0; padding:4px 0; list-style:none; background:white; color:var(--ink); box-shadow:0 8px 24px #0003; }
.languages a { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:48px; padding:12px 20px; text-decoration:none; }
.languages a:hover { background:var(--surface); }
.languages a[aria-current] { color:var(--blue); background:#e5efff; }
.languages .language-code { color:var(--muted); font-size:12px; }
.header .languages a:focus-visible { outline-color:var(--blue); outline-offset:-3px; }

.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-width:208px; min-height:56px; padding:16px 24px; background:var(--blue); color:white; text-decoration:none; font-size:16px; transition:background .16s ease-out; }
.button:hover { background:var(--blue-dark); }
.button.light { background:white; color:var(--blue-dark); }
.button.light:hover { background:#e8e8e8; }
.button.small { min-height:48px; min-width:188px; padding:12px 20px; font-size:15px; }
.text-link { display:inline-flex; align-items:center; gap:16px; color:var(--blue-dark); font-size:16px; text-decoration:none; }
.text-link:hover { text-decoration:underline; }
.hero .text-link { color:white; }
.hero { position:relative; isolation:isolate; overflow:clip; background-color:var(--blue); background-image:var(--blue-panel); color:white; }
.hero-grid { display:grid; grid-template-columns:2fr 3fr; gap:48px; align-items:center; padding-block:72px; }
.hero h1 span { color:white; }
.hero-copy p { max-width:44ch; margin-top:28px; font-size:20px; }
.actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:32px; }
.hero-product { min-width:0; }
.hero-product img { width:100%; }
.hero-product figcaption { display:flex; justify-content:flex-end; margin-top:8px; color:white; }
.hero-product .image-expand { font-size:13px; }
.hero-copy .actions { gap:20px 24px; }
.hero-copy .actions>.text-link { text-decoration:underline; text-underline-offset:5px; font-size:15px; }
.services { overflow:clip; }
.service-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.service-intro { position:relative; margin:0; padding:40px 32px 40px 0; background:var(--blue); color:white; }
.service-intro::before { content:''; position:absolute; inset-block:0; right:100%; width:50vw; background:var(--blue); }
.service-intro p { margin:24px 0 0; color:white; max-width:30ch; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.service-grid article { position:relative; isolation:isolate; padding:61px 32px; background:#e5efff4f; }
.service-grid article::before { content:''; position:absolute; z-index:-1; inset:0; background:inherit; }
.service-grid article:nth-child(even)::before { right:-50vw; }
.service-grid article:nth-child(2) { background:#e5efff; }
.service-grid article:nth-child(3) { background:#cee1ff; }
.service-grid article:nth-child(4) { background:#b5d3ff; }
.service-grid h3 { margin-bottom:16px; }
.service-grid p { font-size:16px; color:var(--ink); margin:0; max-width:56ch; overflow-wrap:break-word; }
.modules,.cases { padding-block:var(--section); }
.modules.wrap { width:100%; }
.modules>.section-heading,.modules .module-panels { width:min(calc(100% - 80px),var(--page)); margin-inline:auto; }
.section-heading { margin-bottom:40px; }
.section-heading h2 { margin-bottom:20px; }
.section-heading h2:only-child { margin-bottom:0; }
.section-heading p { color:var(--muted); margin:0; font-size:18px; max-width:68%; }
.module-layout { border-top:1px solid var(--line); }
.module { border-bottom:1px solid var(--line); }
.module summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; min-height:56px; background:var(--surface); font-size:17px; }
.module summary::-webkit-details-marker { display:none; }
.module summary:hover { background:#e8e8e8; }
.module summary svg { transition:transform .18s ease-out; }
.module[open]>summary { background:var(--blue); color:white; }
.module[open]>summary svg { transform:rotate(40deg); }
.module-content { display:grid; grid-template-columns:minmax(0,768px) minmax(0,1fr); gap:24px 64px; padding:32px 24px; }
.module-copy { display:contents; }
.module-copy h3 { grid-row:1; grid-column:1 / -1; max-width:42ch; }
.module-copy>p { grid-row:2; grid-column:1 / -1; color:var(--muted); font-size:18px; margin:0; }
.module-visual { grid-row:3; grid-column:1; min-width:0; }
.module-features { grid-row:3; grid-column:2; align-self:start; }
.module-features>.text-link { margin-top:24px; }
.feature-list,.case-result ol { list-style:none; counter-reset:steps; padding:0; margin:0; }
.feature-list li,.case-result li { counter-increment:steps; display:flex; align-items:baseline; gap:16px; padding:14px 0; border-top:1px solid var(--line); font-size:16px; }
.feature-list li::before,.case-result li::before { content:counter(steps,decimal-leading-zero); flex-shrink:0; font-family:PlexMono,monospace; font-size:12px; color:var(--blue-dark); font-variant-numeric:tabular-nums; }
.selection-list { display:flex; }
.select-control { display:flex; align-items:center; gap:16px; width:100%; min-height:56px; padding:16px 20px; border:0; background:var(--surface); color:var(--muted); cursor:pointer; font-size:16px; text-align:left; line-height:1.4; }
.select-control:hover { background:#e8e8e8; color:var(--ink); }
.select-control[aria-selected=true] { background:var(--blue); color:white; }
.select-control[aria-selected=true]:hover { background:var(--blue-dark); }
.select-control:focus-visible { outline-offset:-4px; outline-color:var(--blue-dark); position:relative; z-index:1; }
.select-control[aria-selected=true]:focus-visible { outline-color:white; }
.module-picker { display:none; }
.tabs-ready .module-picker { display:flex; align-items:stretch; gap:1px; margin-bottom:40px; width:100%; background:var(--surface); }
.module-nav { justify-content:center; flex-direction:row; flex:1; min-width:0; overflow-x:auto; gap:1px; scrollbar-width:thin; scrollbar-color:#8d8d8d var(--surface); overscroll-behavior-x:contain; }
.module-picker.is-overflowing .module-nav { justify-content:flex-start; }
.module-nav .select-control { width:auto; flex:0 0 auto; white-space:nowrap; min-height:var(--control); }
.module-scroll { width:48px; height:auto; min-height:var(--control); border:0; background:var(--surface); }
.tabs-ready .module-layout { border:0; }
.tabs-ready .module { display:none; border:0; }
.tabs-ready .module[open] { display:block; }
.tabs-ready .module summary { display:none; }
.tabs-ready .module-content { padding:0; }

.note { color:var(--muted); font-size:13px; margin:0 0 4px; }
.screen-figure { position:relative; padding:0; }
.module-visual .screen-figure:not(.photo-figure) { max-width:768px; margin-inline:0; }
.screen-figure>img { width:100%; height:auto; }
.laptop { position:relative; aspect-ratio:1376/878; }
.laptop-display { position:absolute; left:8.14%; top:3.19%; width:83.72%; height:84.97%; overflow:hidden; background:white; border-radius:1.5% 1.5% 0 0; }
.laptop-display img { width:100%; height:auto; }
.laptop-display .hero-screen-full { height:100%; object-fit:fill; }
.laptop-frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.export-composition { position:relative; aspect-ratio:640/450; margin-top:clamp(20px,2.5vw,36px); }
.export-composition>.laptop { position:absolute; width:78%; left:0; bottom:7%; }
.offer-paper { position:absolute; width:46%; right:0; top:-7%; aspect-ratio:2/3; transform:rotate(3deg); filter:drop-shadow(0 10px 12px rgb(0 0 0 / 15%)); }
.offer-paper-frame { width:100%; height:auto; }
.offer-print { position:absolute; left:6.5%; top:9.3%; width:87%; height:auto; }
.export-preview-actions { display:flex; gap:8px 24px; flex-wrap:wrap; justify-content:flex-end; }
.export-preview-actions .image-expand { white-space:nowrap; }
.screen-figure figcaption { color:var(--muted); font-size:13px; margin-top:8px; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:48px; height:48px; background:white; border:1px solid var(--line); color:var(--ink); cursor:pointer; }
.icon-button:hover { background:#e8e8e8; }
.image-expand { background:transparent; border:0; padding:8px 0; min-height:44px; cursor:pointer; }
.image-caption-row { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.icon-button:disabled,.icon-button[aria-disabled=true] { color:#8d8d8d; background:transparent; cursor:default; }
.preview-open { overflow:hidden; }
.photo-figure { position:relative; }
.photo-figure>img { width:100%; height:400px; object-fit:cover; }
.photo-figure figcaption { font-size:13px; color:var(--muted); margin-top:8px; }
.campaign-preview { max-width:512px; }
.campaign-preview>img { height:auto; object-fit:contain; }
.connection-diagram { padding:64px 24px 24px; background:var(--surface); }
.connection-nodes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; position:relative; }
.connection-nodes::before { content:''; position:absolute; top:40px; left:16%; right:16%; border-top:1px solid #8d8d8d; }
.connection-node { display:flex; flex-direction:column; align-items:center; gap:20px; position:relative; text-align:center; font-size:16px; }
.node-symbol { width:80px; height:80px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid #8d8d8d; border-radius:50%; }
.node-symbol svg { width:32px; height:32px; }
.node-core { border:0; border-radius:0; background:var(--blue); color:white; font-size:20px; }
.connection-diagram figcaption { font-size:12px; color:var(--muted); text-align:center; margin-top:48px; }
.campaign-section { padding-block:var(--section); background:var(--surface); }
.campaign-sequence { list-style:none; padding:0; margin:0; }
.campaign-step { display:grid; grid-template-columns:280px minmax(0,1fr); gap:48px; padding-block:40px; border-top:1px solid var(--line); align-items:start; }
.campaign-step:last-child { padding-bottom:0; }
.campaign-step-copy h3 { display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
.campaign-step-number { flex-shrink:0; font-family:PlexMono,monospace; font-size:14px; color:var(--blue-dark); font-variant-numeric:tabular-nums; }
.campaign-step-copy p { color:var(--muted); font-size:16px; margin:0; }
.campaign-step-copy .campaign-install { margin-top:24px; font-size:14px; }
.campaign-step-media { min-width:0; }
.campaign-step-media>img { width:100%; height:auto; }
.campaign-step-media figcaption { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-top:12px; color:var(--muted); font-size:13px; }
.campaign-step-media figcaption>span { max-width:68ch; padding-top:8px; }
.campaign-step-media .image-expand { flex-shrink:0; }
.campaign-step-phone { max-width:576px; }
/* The default is a readable vertical sequence. JavaScript adds swipe / scroll control. */
.campaign-controls,.case-controls { display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:24px; }
.campaign-step-nav { display:flex; gap:8px; }
.campaign-step-nav button { display:flex; align-items:center; gap:12px; min-height:56px; padding:16px; border:0; background:transparent; color:var(--muted); font-size:16px; cursor:pointer; }
.campaign-step-nav button:hover { background:#e8e8e8; color:var(--ink); }
.campaign-step-nav [aria-current=step],.campaign-step-nav [aria-selected=true] { background:var(--blue); color:white; }
.campaign-control-number { font-family:PlexMono,monospace; font-size:14px; font-variant-numeric:tabular-nums; }
.campaign-hint { margin:0 0 0 auto; font-size:13px; color:var(--muted); }
.campaign-scroll-hint { display:none; }
.campaign-arrows { display:flex; gap:8px; }
.campaign-arrows .icon-button { background:transparent; width:56px; height:56px; }
.campaign-ready .campaign-viewport { overflow-x:auto; overflow-y:hidden;  overscroll-behavior-x:contain; scrollbar-width:none; }
.campaign-ready .campaign-viewport::-webkit-scrollbar { display:none; }
.campaign-ready .campaign-sequence { display:flex; align-items:flex-start; gap:48px; }
.campaign-ready .campaign-step { flex:0 0 100%; min-width:0; padding:0 0 8px; border:0; }
.campaign-pinned .campaign-stage { position:sticky; top:calc(var(--header-height) + 3rem); height:calc(100dvh - var(--header-height) - 4rem); display:flex; flex-direction:column; }
.campaign-pinned .campaign-viewport { flex:1; min-height:0; overflow:hidden; scroll-snap-type:none; }
.campaign-pinned .campaign-step { align-items:center; min-height:0; height:100%; }
.campaign-pinned .campaign-sequence { height:100%; }
.campaign-pinned .campaign-step-media { width:min(100%,calc(var(--story-media-height) * var(--media-ratio))); justify-self:center; }
.campaign-pinned .campaign-scroll-hint { display:inline; }
.campaign-pinned .campaign-swipe-hint { display:none; }
.campaign-ready .campaign-step-nav button:focus-visible { outline-offset:-4px; }
.campaign-ready .campaign-step-nav [aria-current=step]:focus-visible,.cases-ready .case-tabs [aria-selected=true]:focus-visible { outline-color:white; }
.case-controls .case-tabs { flex:0 1 auto; min-width:0; }
.cases-pinned .campaign-scroll-hint { display:inline; }
.cases-pinned .campaign-swipe-hint { display:none; }
.case-tabs { gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.case-tabs .select-control { justify-content:flex-start; text-align:left; flex:0 0 auto; width:auto; white-space:nowrap; }
.case-panel { display:grid; grid-template-columns:1fr 1fr; min-height:360px; margin-top:24px; }
/* Inquiry cards share the campaign's scroll direction and native swipe fallback. */
.cases-ready .case-viewport { margin-top:0; overflow-x:auto; overflow-y:hidden;  overscroll-behavior-x:contain; scrollbar-width:none; }
.cases-ready .case-viewport::-webkit-scrollbar { display:none; }
.cases-ready .case-panels { display:flex; gap:48px; align-items:flex-start; }
.cases-ready .case-panel { flex:0 0 100%; min-width:0; margin-top:0; }
.cases-pinned .case-stage { position:sticky; top:calc(var(--header-height) + 3rem); height:min(78dvh,calc(100dvh - var(--header-height) - 4rem)); display:flex; flex-direction:column; background:white; }
.cases-pinned .case-viewport { flex:1; min-height:0; overflow:hidden; scroll-snap-type:none; }
.cases-pinned .case-panels { align-items:stretch; height:100%; }
.cases-pinned .case-panel { height:100%; min-height:0; }
.cases-pinned .customer,.cases-pinned .case-result { display:flex; flex-direction:column; justify-content:center; }
.customer { background:var(--ink); color:white; padding:40px; }
.customer h3 { color:white; margin-bottom:32px; }
.customer blockquote { font-size:clamp(26px,2.4vw,36px); line-height:1.3; font-weight:300; max-width:29ch; margin:0; }
.case-result { padding:40px; background:var(--surface); }
.case-result h4 { margin-bottom:24px; }
.case-result ol { margin-bottom:24px; }
.closing { position:relative; isolation:isolate; padding-block:var(--section); color:white; }
.closing-backdrop { overflow:clip; position:absolute; z-index:-1; inset:0; background-color:var(--blue); background-image:var(--blue-panel); transform-origin:bottom; }
.closing-expand { position:sticky; top:calc(100dvh - var(--closing-start-height)); height:var(--closing-start-height); padding-block:48px; display:flex; align-items:center; }
.closing-expand .closing-backdrop { top:auto; height:var(--closing-full-height); }
.closing-content { position:relative; }
.closing .section-heading p { color:white; }
.footer { padding-block:48px; display:grid; grid-template-columns:1fr 1fr auto; gap:40px; font-size:14px; }
.footer img { width:150px; margin-bottom:20px; }
.footer p { color:var(--muted); }
address { font-style:normal; line-height:1.8; }
.legal { display:flex; flex-direction:column; gap:16px; }
.legal a { display:flex; gap:24px; align-items:center; justify-content:space-between; text-decoration:none; }
.legal a:hover { text-decoration:underline; }
.image-dialog { border:0; padding:0; margin:auto; width:calc(100vw - 48px); max-width:1800px; max-height:calc(100dvh - 48px); background:var(--surface); color:var(--ink); }
.image-dialog::backdrop { background:#161616c0; }
.preview-toolbar { display:flex; gap:24px; align-items:center; justify-content:space-between; padding:12px 20px; background:white; border-bottom:1px solid var(--line); }
.preview-toolbar h2 { font-size:20px; letter-spacing:0; font-weight:300; }
.preview-controls { display:flex; gap:4px; align-items:center; }
.preview-controls button { border:0; }
.preview-reset { background:white; min-height:48px; padding:12px; color:var(--blue-dark); cursor:pointer; font-size:14px; }
.preview-reset:hover { background:var(--surface); }
.preview-stage { overflow:auto; max-height:calc(100dvh - 124px); padding:24px; }
.preview-stage img { max-width:none; height:auto; margin-inline:auto; }
@media(max-width:1100px) {
 .header { gap:24px; padding-inline:28px; } .header nav { gap:18px; } .header-actions { gap:20px; }
 .hero-grid { gap:32px; padding-block:64px; } .hero h1 { font-size:48px; }
 .campaign-step { grid-template-columns:240px minmax(0,1fr); gap:32px; }
 .module-content { grid-template-columns:minmax(0,1fr) 260px; column-gap:40px; }
 .service-layout { grid-template-columns:minmax(0,1fr); }
 .service-intro { padding:40px 0; }
 .service-intro::after { content:''; position:absolute; inset-block:0; left:100%; width:50vw; background:var(--blue); }
 .service-intro p { max-width:58ch; }
 .service-grid article { padding:32px; }
 .service-grid article:nth-child(odd)::before { left:-50vw; }
}
@media(max-width:900px) {
 .campaign-step { grid-template-columns:minmax(0,1fr); gap:24px; }
 .campaign-hint { display:none; }
 .campaign-step-copy p { max-width:70ch; }
 .module-content { grid-template-columns:minmax(0,1fr); }
 .module-features { grid-column:1; grid-row:4; max-width:640px; }
}
@media(max-width:760px) {
 :root { --section:56px; --header-height:128px; }
 .wrap { width:calc(100% - 40px); }
 .modules>.section-heading,.modules .module-panels { width:calc(100% - 40px); }
 .header { padding:16px 20px; flex-wrap:wrap; gap:12px 20px; }
 .brand img { width:136px; }
 .header-actions { margin-left:auto; } .header-actions .button { display:none; }
 .header nav { order:3; width:100%; justify-content:space-between; margin:0; font-size:14px; }
 .header nav a { padding-block:8px; }
 .hero-grid { grid-template-columns:1fr; gap:32px; padding-block:48px 32px; }
 .hero h1 { font-size:clamp(40px,7.5vw,56px); }
 .hero-copy p { font-size:18px; margin-top:24px; }
 .actions { gap:24px; align-items:flex-start; flex-direction:column; margin-top:28px; }
 .service-grid { grid-template-columns:1fr; }
 .service-intro { padding:32px 0; }
 .service-grid article { padding:32px 0; min-height:0; }
 .service-grid article::before { left:-50vw; right:-50vw; }
 .section-heading { margin-bottom:32px; }
 .section-heading h2 { margin-bottom:16px; }
 .section-heading p { font-size:17px; max-width:100%; }
 .module-content { padding:24px 16px; gap:20px; }
 .module summary { padding:16px; }
 .module-copy>p { font-size:17px; }
 .photo-figure:not(.campaign-preview)>img { height:auto; }
 .export-figure .image-caption-row { align-items:flex-start; flex-direction:column; gap:4px; }
 .export-preview-actions { justify-content:flex-start; }
 .connection-diagram { padding:40px 16px 20px; }
 .connection-nodes { gap:12px; } .node-symbol { width:60px; height:60px; } .connection-nodes::before { top:30px; }
 .connection-node { font-size:13px; gap:16px; } .node-core { font-size:16px; } .node-symbol svg { width:24px; height:24px; }
 .connection-diagram figcaption { margin-top:32px; }
 .campaign-section { padding-block:48px; }
 .campaign-step { padding-block:32px; }
 .campaign-controls { flex-wrap:wrap; gap:12px; justify-content:space-between; }
 .campaign-controls .campaign-hint { display:block; margin:0; flex-basis:100%; order:3; }
 .campaign-step-nav { gap:4px; }
 .campaign-step-nav button { padding:12px; }
 .campaign-step-nav button>span:last-child { display:none; }
 .campaign-arrows { gap:4px; }
 .campaign-step-media figcaption { flex-direction:column; gap:4px; }
 .case-controls { flex-wrap:wrap; gap:12px; }
 .case-controls .case-tabs { flex:1; }
 .case-controls .campaign-hint { display:block; margin:0; flex-basis:100%; order:3; }
 .case-panel { grid-template-columns:1fr; margin-top:16px; }
 .customer,.case-result { padding:28px 24px; }
 .customer blockquote { font-size:28px; } .customer h3 { margin-bottom:24px; }
 .case-result .text-link { font-size:16px; }
 .closing { padding-block:48px; }
 .footer { grid-template-columns:1fr; gap:24px; padding-block:32px; }
 .legal { flex-direction:row; gap:32px; }
 .legal svg { display:none; }
 .image-dialog { width:100vw; max-height:100dvh; }
 .preview-toolbar { gap:12px; padding:8px 12px; flex-wrap:wrap; }
 .preview-toolbar h2 { font-size:17px; }
 .preview-controls { margin-left:auto; }
 .preview-stage { padding:12px; max-height:calc(100dvh - 140px); }
}
@media(max-width:480px) {
 .case-tabs { flex-direction:row; }
}
@media(max-width:360px) {
 .connection-nodes { gap:8px; } .connection-node { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { transition:none!important; animation:none!important; }
}
@media print {
 .header,.actions,.case-controls,.case-tabs,.closing,.legal,.module-picker,.image-expand,.image-dialog { display:none!important; }
 .hero { background:white; color:var(--ink); } .hero-product figcaption { color:var(--ink); }
 .wrap { width:100%; } .tabs-ready .module-layout { display:block; }
 .tabs-ready .module { display:block; } .tabs-ready .module summary { display:block; }
 .module-visual { display:none; } .module-content { display:block; }
 .case-rail { height:auto!important; }
 .cases-pinned .case-stage { position:static; }
 .cases-ready .case-viewport { overflow:visible; height:auto!important; }
 .cases-ready .case-panels { display:block; transform:none!important; }
 .cases-ready .case-panel { margin-top:24px; break-inside:avoid; }
 .case-panel[hidden] { display:grid!important; } .customer { background:#eee; color:var(--ink); } .customer h3 { color:var(--ink); }
 .roles,.modules,.cases { padding-block:20px; }
 .campaign-controls { display:none!important; }
 .campaign-rail { height:auto!important; }
 .campaign-pinned .campaign-stage { position:static; height:auto; display:block; }
 .campaign-ready .campaign-viewport { overflow:visible; height:auto!important; }
 .campaign-ready .campaign-sequence { display:block; transform:none!important; }
 .campaign-ready .campaign-step { min-height:0; padding-block:24px; break-inside:avoid; }
 .campaign-pinned .campaign-step-media { width:100%; }
}

/* One overview: explanation, service coverage, then role-specific onward links. */
.overview-heading.section-heading { min-height:40vh; display:flex; flex-direction:column; justify-content:center; padding-block:48px; margin-bottom:0; }
.service-intro h3,.audience-links>h3 { font-size:var(--heading-size); font-weight:300; line-height:1.15; letter-spacing:-.02em; }
.audience-panel { background:var(--surface); min-height:40vh; display:flex; align-items:center; }
.audience-links { padding-block:40px; }
.audience-links>h3 { margin-bottom:28px; }
.audience-links ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; }
.audience-links li { min-width:0; }
.audience-links li+li { border-left:1px solid var(--line); }
.audience-links a { display:grid; grid-template-columns:minmax(0,1fr) 20px; gap:12px 16px; text-decoration:none; padding:12px 24px; min-height:104px; }
.audience-role { font-size:22px; color:var(--blue-dark); }
.audience-benefit { grid-row:2; font-size:15px; color:var(--muted); }
.audience-links svg { grid-column:2; grid-row:1; align-self:center; color:var(--blue-dark); }
.audience-links a:hover { background:#e8e8e8; }
.audience-links a:hover .audience-role { text-decoration:underline; text-underline-offset:5px; }
@media(max-width:760px) {
 .audience-links { padding-block:32px; }
 .audience-links ul { grid-template-columns:1fr; gap:0; }
 .audience-links a { padding:20px 0; min-height:96px; }
 .audience-links li+li { border-left:0; border-top:1px solid var(--line); }
}

/* Quiet, shared media controls; arrows are reserved for onward navigation. */
.image-expand { font-size:13px; gap:8px; }
.image-expand svg { width:16px; height:16px; }
.image-caption-row>span:empty,.campaign-step-media figcaption>span:empty { display:none; }
.image-caption-row .image-expand,.campaign-step-media figcaption .image-expand { margin-left:auto; }
.hero-copy .actions>.text-link:hover { text-decoration-thickness:2px; }
@media (min-width:761px) and (max-width:1100px) {
 .audience-links a { padding-inline:16px; }
 .audience-role { font-size:20px; }
}

@media print { .closing-expand { display:none; } .cases-pinned .case-stage { height:auto; display:block; } .cases-pinned .case-panels,.cases-pinned .case-panel,.campaign-pinned .campaign-sequence,.campaign-pinned .campaign-step { height:auto; } }

@media print { .closing-runway { display:none; } }

/* Images reserve their layout; only decoded pixels fade in. Device frames stay put. */
.image-reveal-enabled [data-soft-image] { opacity:0; }
.image-reveal-enabled [data-soft-image][data-image-state="ready"],
.image-reveal-enabled [data-soft-image][data-image-state="error"] { opacity:1; }
@media print { .image-reveal-enabled [data-soft-image] { opacity:1; } }

/* API: real customer-facing and inventory screens in the shared device frame. */
.api-connection { padding:40px 24px 24px; max-width:768px; }
.api-connection .connection-nodes { grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); gap:16px; }
.api-connection .connection-nodes::before { top:88px; left:15%; right:15%; }
.api-connection .connection-node { gap:16px; min-width:0; }
.api-connection .connection-media { height:176px; width:100%; display:flex; align-items:center; justify-content:center; }
.api-connection .laptop { width:100%; }
.api-connection .laptop-display img { height:100%; object-fit:cover; object-position:top; }
@media(max-width:600px) {
 .api-connection { padding:32px 20px 20px; }
 .api-connection .connection-nodes { grid-template-columns:1fr; gap:24px; }
 .api-connection .connection-nodes::before { top:88px; bottom:88px; left:50%; right:auto; border-top:0; border-left:1px solid #8d8d8d; }
 .api-connection .connection-node { background:var(--surface); font-size:16px; gap:12px; }
 .api-connection .connection-media { height:auto; max-width:280px; }
 .api-connection .connection-node:nth-child(2) { padding-block:16px; }
 .api-connection .connection-node:nth-child(2) .connection-media { min-height:80px; }
 .api-connection .node-core { width:80px; height:80px; font-size:20px; }
}

/* Audience pages extend the same full-width panels, type and module controls. */
.role-page h1 { overflow-wrap:break-word; }
.role-page .hero-grid { min-height:calc(100svh - var(--header-height,80px)); }
.role-page .hero-product figcaption { gap:8px 24px; flex-wrap:wrap; }
.role-panel { padding-block:var(--section); background:var(--surface); }
.role-priorities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; list-style:none; counter-reset:priorities; margin:0; padding:0; }
.role-priorities li { counter-increment:priorities; border-top:1px solid var(--line); padding-top:20px; }
.role-priorities li::before { content:counter(priorities,decimal-leading-zero); display:block; font:14px PlexMono,monospace; color:var(--blue-dark); margin-bottom:20px; }
.role-priorities h3 { margin-bottom:16px; }
.role-priorities p { font-size:16px; color:var(--muted); margin:0; }
.role-workflow-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:80px; align-items:start; }
.role-workflow .section-heading { margin:0; }
.role-steps { list-style:none; counter-reset:workflow; padding:0; margin:0; }
.role-steps li { counter-increment:workflow; display:grid; grid-template-columns:32px minmax(0,1fr); gap:20px; padding:28px 0; border-top:1px solid var(--line); }
.role-steps li:first-child { padding-top:20px; }
.role-steps li::before { content:counter(workflow,decimal-leading-zero); font:14px/1.8 PlexMono,monospace; color:var(--blue-dark); }
.role-steps h3 { margin-bottom:12px; }
.role-steps p { margin:0; color:var(--muted); font-size:17px; }
.role-related { padding-block:24px; }
.role-related .audience-links ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
.role-home-link { margin-top:28px; text-decoration:underline; }
@media(max-width:900px) {
 .role-priorities { gap:24px; }
 .role-workflow-layout { grid-template-columns:1fr; gap:40px; }
}
@media(max-width:760px) {
 .role-priorities { grid-template-columns:1fr; gap:28px; }
 .role-priorities li::before { margin-bottom:12px; }
 .role-priorities h3 { margin-bottom:12px; }
 .role-related .audience-links ul { grid-template-columns:1fr; }
 .role-steps li { gap:12px; }
}
@media print {
 .role-page .hero-grid { min-height:0; }
 .role-related { display:none; }
 .role-panel { padding-block:24px; }
 .role-priorities li,.role-steps li { break-inside:avoid; }
}

/* Only full-width blue panels move. The static gradient remains the fallback.
   Both layers rotate together; opacity changes only the darker blue pigment. */
@media screen and (prefers-reduced-motion:no-preference) {
 .ambient-gradient::before,.ambient-gradient::after {
  content:""; position:absolute; left:50%; top:50%; width:var(--gradient-span); height:var(--gradient-span); z-index:-1; pointer-events:none;
  background-color:var(--blue); background-image:var(--blue-panel);
  animation:blue-panel-drift var(--blue-drift-duration) linear infinite alternate;
  animation-play-state:paused;
 }
 .ambient-gradient::after {
  background-image:linear-gradient(225deg,var(--blue) 37%,transparent 85%),linear-gradient(162deg,#3246cf 37%,var(--blue) 37%);
  animation-name:blue-panel-drift,blue-panel-tone;
  opacity:0;
 }
 .ambient-gradient.gradient-running::before,.ambient-gradient.gradient-running::after { animation-play-state:running; }
}
@keyframes blue-panel-drift {
 from { transform:translate(-50%,-50%) rotate(0deg); }
 to { transform:translate(-50%,-50%) rotate(40deg); }
}
@keyframes blue-panel-tone {
 from { opacity:0; }
 to { opacity:1; }
}