/* Crisp interface illustrations: live text, CSS shapes and static connectors. */
.native-scene{display:grid;grid-template-columns:37% 25% 38%;align-items:center;padding:calc(4 * var(--u)) calc(5 * var(--u));gap:0}.native-source{position:relative;height:calc(230 * var(--u));display:flex;align-items:center}.email-ui{background:#fff;color:#162b46;border:1px solid #e2ebf5;border-radius:calc(5 * var(--u));padding:calc(10 * var(--u));box-shadow:0 calc(7 * var(--u)) calc(20 * var(--u)) #0003;position:relative;z-index:2}.email-hero{width:79%;transform:rotate(-4deg)}.email-toolbar{display:flex;align-items:center;justify-content:space-between;gap:calc(5 * var(--u));font-size:calc(7 * var(--u));font-weight:600;color:#304c6a;margin-bottom:calc(14 * var(--u))}.email-toolbar>span:last-child{color:#8aa0b3;font-size:calc(12 * var(--u));font-weight:400}.window-dots{display:flex;gap:calc(3 * var(--u))}.window-dots i{width:calc(4 * var(--u));height:calc(4 * var(--u));background:#ff796f;border-radius:50%}.window-dots i:nth-child(2){background:#ffcc62}.window-dots i:nth-child(3){background:#4ecfa2}.email-meta{display:grid;grid-template-columns:auto 1fr;gap:calc(3 * var(--u)) calc(5 * var(--u));font-size:calc(7.2 * var(--u));margin-bottom:calc(10 * var(--u));line-height:1.4}.email-meta>span,.email-subject>span{color:#6c839b}.email-meta b{font-weight:500}.email-meta small{grid-column:2;font-size:calc(6.8 * var(--u));color:#7290ac;overflow-wrap:anywhere}.email-subject{border-bottom:1px solid #e3ebf4;padding-bottom:calc(9 * var(--u));margin-bottom:calc(12 * var(--u));font-size:calc(8 * var(--u));line-height:1.35}.email-subject span,.email-subject strong{display:block}.email-subject strong{margin-top:calc(3 * var(--u));font-weight:600}.email-message{font-size:calc(10 * var(--u));line-height:1.42;letter-spacing:-.01em;color:#3f5872}.email-message p+p{margin-top:calc(10 * var(--u))}.attachment-ui{position:absolute;right:calc(6 * var(--u));top:calc(25 * var(--u));width:calc(87 * var(--u));height:calc(135 * var(--u));background:linear-gradient(110deg,#eff4f9,#dce7f3);color:#304e6e;border-radius:calc(3 * var(--u));padding:calc(16 * var(--u)) calc(10 * var(--u));transform:rotate(7deg);box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) #0002}.attachment-ui strong{font-size:calc(8.5 * var(--u));line-height:1.2;display:block;margin-bottom:calc(11 * var(--u))}.attachment-ui i{height:calc(3 * var(--u));width:90%;display:block;background:#b8c9d9;margin-bottom:calc(5 * var(--u))}.attachment-ui i:nth-of-type(2){width:70%}.attachment-ui b{font-size:calc(9 * var(--u));background:#fa5268;color:white;display:table;padding:calc(7 * var(--u)) calc(5 * var(--u));margin-top:calc(10 * var(--u));border-radius:calc(3 * var(--u))}.paper-corner{position:absolute;right:0;top:0;border-top:calc(13 * var(--u)) solid #f8fcff;border-left:calc(13 * var(--u)) solid #bdcede}
.native-route{display:flex;align-items:center;justify-content:center;gap:calc(2 * var(--u));padding:0 calc(3 * var(--u));position:relative}.route-step{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:calc(11 * var(--u))}.route-step>span{font-size:calc(8 * var(--u));color:#93c6e5}.route-step>b{position:relative;display:flex;align-items:center;justify-content:center;width:calc(33 * var(--u));height:calc(33 * var(--u));border:1px solid #137aa6;border-radius:50%;color:#26bcf6;font-size:calc(19 * var(--u));font-weight:400;background:#03243b;transition:border-color .35s,box-shadow .35s,background .35s}.route-brand>b{font-size:calc(29 * var(--u));font-weight:500;border-color:transparent;background:none;color:#dbf6ff}.route-brand>b>span{position:absolute;top:calc(-3 * var(--u));right:calc(2 * var(--u));font-size:calc(12 * var(--u));color:#22b6ff}.native-route>i{height:1px;flex:1;background:#1883ad;min-width:calc(6 * var(--u));margin-top:calc(20 * var(--u))}.native-result{background:#fff;color:#13243b;border:1px solid #dce9f4;border-radius:calc(5 * var(--u));padding:calc(9 * var(--u));box-shadow:0 calc(5 * var(--u)) calc(18 * var(--u)) #0002;position:relative;z-index:1}.result-toolbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:calc(8 * var(--u));border-bottom:1px solid #e6edf5;font-size:calc(10.5 * var(--u));letter-spacing:-.025em}.result-toolbar>strong{font-weight:650}.result-toolbar>span{font-size:calc(9 * var(--u));color:#8ca0b4}.result-entry{display:flex;align-items:start;gap:calc(7 * var(--u));padding:calc(8 * var(--u)) 0;border-bottom:1px solid #edf2f8;transition:opacity .45s,background .45s}.result-entry>div{flex:1;min-width:0}.result-entry strong{display:block;font-size:calc(8.9 * var(--u));line-height:1.3;font-weight:650}.result-entry small{font-size:calc(6.9 * var(--u));color:#7890a7;line-height:1.4;display:block;margin-top:calc(3 * var(--u))}.ui-line-icon{color:#008cff;font-size:calc(15 * var(--u));line-height:1.1;min-width:calc(15 * var(--u));text-align:center}.ui-check{font-size:calc(7 * var(--u));color:#188d53;background:#b8f6cb;width:calc(13 * var(--u));height:calc(13 * var(--u));border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.result-entry dl{display:grid;grid-template-columns:auto 1fr;gap:calc(2 * var(--u)) calc(8 * var(--u));font-size:calc(7 * var(--u));line-height:1.3;margin:calc(5 * var(--u)) 0 0;color:#5f7892}.result-entry dt{color:#8ca1b6}.result-entry dd{margin:0}.result-response{border-bottom:0;padding-bottom:calc(7 * var(--u))}.result-response p{font-size:calc(7.7 * var(--u));line-height:1.4;background:#f5f9fe;border:1px solid #e3edf7;border-radius:calc(3 * var(--u));padding:calc(7 * var(--u));color:#4e6a87;margin-top:calc(5 * var(--u))}.native-approval{display:flex;align-items:center;gap:calc(4 * var(--u));background:#e4f5ff;color:#077ccc;padding:calc(5 * var(--u));border:1px solid #cfeaff;border-radius:calc(4 * var(--u));margin-top:calc(2 * var(--u))}.native-approval>span{font-size:calc(11 * var(--u))}.native-approval>small{font-size:calc(6.5 * var(--u));line-height:1.35;max-width:calc(100 * var(--u))}.native-approve{margin-left:auto;background:#0089ff;color:white;border-radius:calc(3 * var(--u));padding:calc(6 * var(--u));font-size:calc(7.2 * var(--u));line-height:1.2;white-space:nowrap}.native-approve:disabled{background:#0b9271}
.native-appointment{display:grid;grid-template-columns:1fr 1fr;gap:calc(19 * var(--u));align-items:center;position:relative;margin:calc(22 * var(--u)) 0 calc(16 * var(--u));flex:1;min-height:0}.email-card{transform:rotate(-4deg);padding:calc(10 * var(--u));align-self:center}.email-card .email-toolbar{font-size:calc(6.5 * var(--u));margin-bottom:calc(11 * var(--u))}.email-card .email-toolbar>.window-dots{display:none}.email-card .email-toolbar>span:last-child{font-size:calc(11 * var(--u))}.email-card .email-message{font-size:calc(9.4 * var(--u));line-height:1.4}.email-card .email-message p+p{margin-top:calc(9 * var(--u))}.calendar-ui{position:relative;z-index:2;background:white;color:#15314d;border:1px solid #dfeaf4;border-radius:calc(5 * var(--u));padding:calc(12 * var(--u));transform:rotate(3deg);box-shadow:0 calc(7 * var(--u)) calc(16 * var(--u)) #0002}.calendar-label{font-size:calc(8 * var(--u));font-weight:600;line-height:1.35;display:block}.calendar-ui>p{font-size:calc(7.5 * var(--u));color:#708eaa;line-height:1.4;margin:calc(5 * var(--u)) 0 calc(10 * var(--u))}.sample-slot{display:flex;align-items:center;justify-content:space-between;padding:calc(8 * var(--u));border:1px solid #e3ebf5;border-radius:calc(4 * var(--u));margin-top:calc(6 * var(--u));font-size:calc(8.5 * var(--u));line-height:1.3}.sample-slot b{font-size:calc(9 * var(--u));display:block;font-weight:500;margin-top:calc(2 * var(--u))}.sample-slot i{height:calc(10 * var(--u));width:calc(10 * var(--u));border-radius:50%;border:1px solid #9fb2c7}.sample-slot.chosen{background:#e9f5ff;border-color:#bbdfff}.sample-slot.chosen i{border:calc(3 * var(--u)) solid #008cff}.calendar-ui>small{font-size:calc(6.5 * var(--u));color:#8ea3b8;display:block;margin-top:calc(8 * var(--u))}.appointment-connector{position:absolute;left:44%;right:44%;top:48%;height:1px;background:#1b9ccd}.appointment-connector:after{content:'';position:absolute;left:45%;width:calc(6 * var(--u));height:calc(6 * var(--u));top:calc(-2.5 * var(--u));border-radius:50%;background:#24b9f9}
.native-document{display:flex;align-items:center;gap:calc(6 * var(--u));padding:calc(7 * var(--u));color:#254667}.pdf-ui{width:31%;background:white;transform:rotate(-5deg);border:1px solid #e7eff6;border-radius:calc(5 * var(--u));padding:calc(9 * var(--u));box-shadow:0 calc(4 * var(--u)) calc(12 * var(--u)) #2e6ba518;flex-shrink:0}.pdf-ui>b{background:#ff536b;color:white;font-size:calc(8 * var(--u));border-radius:calc(3 * var(--u));display:table;padding:calc(6 * var(--u)) calc(4 * var(--u));margin-bottom:calc(8 * var(--u))}.pdf-ui>strong{font-size:calc(7.3 * var(--u));font-weight:600;display:block;margin-bottom:calc(8 * var(--u));line-height:1.3}.pdf-ui>i{display:block;height:calc(3 * var(--u));background:#dce7f1;margin:calc(3 * var(--u)) 0;width:90%}.pdf-ui>i:nth-of-type(2){width:75%}.pdf-ui>small{display:block;font-size:calc(5.8 * var(--u));color:#8ba2b8;margin-top:calc(8 * var(--u))}.document-connector{color:#16a6f6;font-size:calc(22 * var(--u));font-weight:300}.document-data-ui{background:white;flex:1;min-width:0;padding:calc(9 * var(--u));border:1px solid #e2edf6;border-radius:calc(5 * var(--u));box-shadow:0 calc(4 * var(--u)) calc(12 * var(--u)) #2e6ba510}.document-data-ui>strong{font-size:calc(8.5 * var(--u));font-weight:650;display:block;margin-bottom:calc(8 * var(--u))}.document-data-ui>div{display:flex;align-items:center;gap:calc(6 * var(--u));justify-content:space-between;background:#eff7fd;padding:calc(6 * var(--u));margin-top:calc(4 * var(--u));font-size:calc(7 * var(--u));line-height:1.3}.document-data-ui b{font-weight:500;text-align:right}.document-data-ui>div>span{color:#7390ab}.feature-doc>.native-document{position:absolute;left:calc(5 * var(--u));right:calc(10 * var(--u));bottom:calc(3 * var(--u));height:calc(113 * var(--u))}.alternate-source .native-document{margin-top:calc(12 * var(--u));border-radius:calc(5 * var(--u));background:#e8f6ff}.alternate-source .pdf-ui{width:31%}
.example-picker-label{position:absolute;bottom:calc(69 * var(--u));left:calc(18 * var(--u));font-size:calc(7.5 * var(--u));color:#7eb6d3;letter-spacing:.02em}.demo-tabs{left:calc(17 * var(--u));right:calc(17 * var(--u));justify-content:flex-start;gap:calc(7 * var(--u));bottom:calc(37 * var(--u))}.demo-tabs button{font-size:calc(9 * var(--u));padding:calc(7 * var(--u)) calc(10 * var(--u))}.demo-tabs button[aria-selected=true]:before{content:'✓';font-size:.85em;margin-right:calc(5 * var(--u));color:#6edaff}.demo-panel{height:calc(367 * var(--u))}.demo-stage{height:calc(249 * var(--u))}.demo-playbar{height:calc(34 * var(--u))}.play-flow{font-size:calc(9 * var(--u))}.flow-caption{font-size:calc(8 * var(--u))}
/* A soft, ascending signal follows the three brand nodes continuously. */
.hero-mark>g:last-of-type circle{animation-name:softBrandPulse;animation-duration:7s}.hero-mark>g:last-of-type circle:nth-child(2){animation-delay:2.2s}.hero-mark>g:last-of-type circle:nth-child(3){animation-delay:4.4s}@keyframes softBrandPulse{0%,60%,100%{opacity:.72;transform:scale(1)}25%{opacity:1;transform:scale(1.06)}}
.demo-panel[data-phase="1"] .email-hero{box-shadow:0 0 0 2px #15baff,0 0 24px #008cff25}.demo-panel.is-playing .native-result .result-entry{opacity:.2}.demo-panel[data-phase="2"] .native-result [data-entry="contact"],.demo-panel[data-phase="2"] .native-result [data-entry="data"],.demo-panel[data-phase="3"] .native-result .result-entry,.demo-panel[data-phase="4"] .native-result .result-entry{opacity:1}.demo-panel[data-phase="1"] [data-native-step="1"]>b,.demo-panel[data-phase="2"] [data-native-step="2"]>b,.demo-panel[data-phase="3"] [data-native-step="3"]>b{background:#084669;border-color:#37cbff;box-shadow:0 0 0 3px #009dff16}.demo-panel[data-phase="4"] .native-approval{border-color:#24b7f8;box-shadow:0 0 0 2px #00a7ff12}.demo-panel.is-verified .native-approval{background:#ddf9ef;border-color:#81d6b8}.steps li>div{position:relative;isolation:isolate}.steps li>div:before{content:'';position:absolute;inset:calc(-7 * var(--u)) calc(-9 * var(--u));z-index:-1;background:transparent;border-left:calc(3 * var(--u)) solid transparent;border-radius:calc(5 * var(--u));transition:background .35s,border-color .35s}.steps li.is-current>div:before{background:#d5edff;border-left-color:#008cff}.steps li.is-current>span{font-weight:500;color:#0077dd}.steps li.is-current h3{color:#005caa}.steps li.is-current:before{box-shadow:0 0 0 6px #008cff21}
@media(max-width:700px){.hero-mark>.brand-signal{stroke-width:2.2}.native-scene{display:grid;grid-template-columns:1fr;gap:18px;padding:17px 10px}.native-source{height:auto;min-height:285px;max-width:340px;width:100%;margin:0 auto}.email-hero{width:80%;padding:15px}.email-toolbar{font-size:10px;margin-bottom:17px;gap:7px}.email-toolbar>span:last-child{font-size:17px}.window-dots{gap:4px}.window-dots i{width:5px;height:5px}.email-meta{font-size:10px;gap:3px 7px;margin-bottom:12px}.email-meta small{font-size:9px}.email-subject{font-size:11px;padding-bottom:12px;margin-bottom:17px}.email-subject strong{margin-top:5px}.email-message{font-size:13px;line-height:1.5}.email-message p+p{margin-top:14px}.attachment-ui{width:100px;height:160px;padding:19px 12px;top:32px;right:2px}.attachment-ui strong{font-size:10px;margin-bottom:14px}.attachment-ui i{height:4px;margin-bottom:6px}.attachment-ui b{font-size:11px;padding:8px 6px}.native-route{padding:0;gap:12px;max-width:300px;width:100%;margin:0 auto}.route-step{gap:9px}.route-step>span{font-size:12px}.route-step>b{width:39px;height:39px;font-size:24px}.route-brand>b{font-size:34px}.route-brand>b>span{font-size:15px;right:1px;top:-3px}.native-route>i{margin-top:21px;min-width:12px}.native-result{padding:14px;max-width:360px;width:100%;margin:0 auto}.result-toolbar{font-size:16px;padding-bottom:13px}.result-toolbar>span{font-size:13px}.result-entry{gap:10px;padding:12px 0}.result-entry strong{font-size:13px}.result-entry small{font-size:10px;line-height:1.5;margin-top:4px}.ui-line-icon{font-size:22px;min-width:20px}.ui-check{width:18px;height:18px;font-size:10px}.result-entry dl{font-size:11px;gap:3px 10px;margin-top:8px}.result-response p{font-size:12px;line-height:1.5;padding:10px;margin-top:8px}.native-approval{gap:6px;padding:8px;margin-top:5px}.native-approval>span{font-size:16px}.native-approval>small{font-size:9px;max-width:120px}.native-approve{font-size:10px;padding:10px 7px;white-space:normal}.demo-panel{height:auto}.demo-stage{height:auto}.example-picker-label{position:static;margin:15px 14px 2px;font-size:11px}.demo-tabs{position:static;padding:9px 12px 14px;gap:6px;justify-content:space-between}.demo-tabs button{font-size:10px;padding:9px 5px;max-width:36%}.demo-tabs button[aria-selected=true]:before{margin-right:3px}.demo-playbar{height:auto;min-height:78px;grid-template-columns:1fr auto}.play-flow{font-size:11px}.flow-caption{font-size:10px}.native-appointment{gap:14px;margin:25px 0 28px;align-items:center;flex:initial}.email-card{padding:11px}.email-card .email-toolbar{font-size:8px;margin-bottom:11px;gap:4px}.email-card .email-toolbar>span:last-child{font-size:12px}.email-card .email-meta{font-size:8px;gap:3px 4px;margin-bottom:10px}.email-card .email-meta small{font-size:7px}.email-card .email-subject{font-size:9px;padding-bottom:10px;margin-bottom:12px}.email-card .email-message{font-size:11px;line-height:1.4}.email-card .email-message p+p{margin-top:10px}.calendar-ui{padding:12px}.calendar-label{font-size:9px}.calendar-ui>p{font-size:9px;margin:6px 0 10px}.sample-slot{padding:9px 6px;font-size:10px;margin-top:6px}.sample-slot b{font-size:10px;margin-top:4px}.sample-slot i{width:10px;height:10px;flex-shrink:0}.sample-slot.chosen i{border-width:3px}.calendar-ui>small{font-size:7px;margin-top:10px}.appointment-connector{left:45%;right:45%}.appointment-connector:after{width:7px;height:7px;top:-3px}.feature-doc>.native-document{position:static;height:auto;margin:20px -9px -7px;padding:5px;gap:8px}.pdf-ui{padding:12px}.pdf-ui>b{font-size:10px;padding:8px 5px;margin-bottom:10px}.pdf-ui>strong{font-size:10px;margin-bottom:10px}.pdf-ui>i{height:3px;margin:4px 0}.pdf-ui>small{font-size:7px;margin-top:10px}.document-connector{font-size:26px}.document-data-ui{padding:11px}.document-data-ui>strong{font-size:11px;margin-bottom:10px}.document-data-ui>div{font-size:9px;gap:6px;padding:7px;margin-top:5px}.alternate-source .native-document{margin-top:15px;padding:10px}.steps li>div:before{inset:-8px -9px}.steps li.is-current:before{box-shadow:0 0 0 5px #008cff24}}
@media(max-width:420px){.native-appointment{grid-template-columns:1fr;gap:10px;margin:25px 0}.email-card{width:85%;padding:15px}.email-card .email-toolbar{font-size:10px}.email-card .email-meta{font-size:10px}.email-card .email-meta small{font-size:9px}.email-card .email-subject{font-size:11px}.email-card .email-message{font-size:13px;line-height:1.45}.calendar-ui{width:82%;margin-left:auto;margin-top:-15px}.calendar-label{font-size:12px}.calendar-ui>p{font-size:10px}.sample-slot{font-size:11px;padding:10px}.sample-slot b{font-size:12px}.calendar-ui>small{font-size:8px}.appointment-connector{display:none}}
@media(prefers-reduced-motion:reduce){.hero-mark>.brand-signal{animation:none!important;opacity:0}.native-result .result-entry{transition:none}.steps li>div:before{transition:none}}
@media(min-width:701px){.demo-stage{height:calc(270 * var(--u))}.demo-panel{height:calc(388 * var(--u))}.example-picker-label{font-size:calc(9 * var(--u))}}

@media(prefers-reduced-motion:reduce){.hero-mark>path.brand-signal{animation:none!important;opacity:0}}
@media(min-width:701px){.play-flow{font-size:calc(10.5 * var(--u))}.flow-caption{font-size:calc(9.3 * var(--u))}.motion-toggle{font-size:calc(8.5 * var(--u))}}

/* Keep the full signal route clear of the hero call to action. */
@media(min-width:701px){.hero-mark{right:calc(-72 * var(--u))}}

/* A compact light discharge: fading trail, bright core, diffuse bloom. */
.hero-mark>path.brand-signal{--signal-lead:0px;stroke-dasharray:6 112;stroke-width:2;opacity:0;animation:brandSignal 3s linear infinite;animation-play-state:paused;pointer-events:none}
.hero-mark.motion-visible>path.brand-signal{animation-play-state:running}
.hero-mark>path.signal-halo{stroke-width:7;filter:blur(3px);--signal-strength:.38}
.hero-mark>path.signal-tail{stroke-width:2.1;--signal-strength:.28}
.hero-mark>path.signal-body{stroke-dasharray:3 115;--signal-lead:3px;stroke-width:2.8;--signal-strength:.65;filter:drop-shadow(0 0 2px #ffffff99)}
.hero-mark>path.signal-core{stroke-dasharray:1.3 116.7;--signal-lead:4.7px;stroke-width:3.6;--signal-strength:1;filter:drop-shadow(0 0 3px #fff)}
@keyframes brandSignal{0%{stroke-dashoffset:calc(6px - var(--signal-lead));opacity:0}3%,97%{opacity:var(--signal-strength)}100%{stroke-dashoffset:calc(-100px - var(--signal-lead));opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-mark>path.brand-signal{animation:none!important;opacity:0}}