/* Guided product walkthrough: explanation on the left, live example on the right. */
.walkthrough { --story-pad:96px; position:relative; overflow-anchor:none; padding-block:var(--story-pad); }
.walkthrough-pin { display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.7fr); gap:72px; align-items:center; max-width:1224px; }
.walkthrough[data-enhanced="true"] { min-height:calc(var(--story-pin-height) + var(--story-travel) + var(--story-pad)*2); }
.walkthrough[data-enhanced="true"] .walkthrough-pin { position:sticky; top:var(--story-inset,24px); }
.journey-copy { min-width:0; }
.journey-copy h2 { max-width:16ch; font-size:clamp(34px,3vw,44px); font-weight:550; line-height:1.15; letter-spacing:-.035em; text-wrap:balance; }
.journey-intro { max-width:34ch; margin-top:16px; color:var(--muted); font-size:14px; line-height:1.8; }
.journey-copy>.text-link { margin-top:18px; color:var(--muted); font-size:12px; }
.journey-copy>.text-link:hover { color:var(--text); }
.journey-demo { min-width:0; }
.journey-fallback { padding:32px; border:1px solid var(--line); border-radius:14px; }
.journey-fallback h3 { font-size:24px; }.journey-fallback p { margin-top:16px; color:var(--muted); font-size:16px; line-height:1.7; }
.journey-explanation:empty { display:none; }
.story-chapters { list-style:none; padding:0; margin:24px 0 0; }
.story-chapters>li { display:flow-root; border-bottom:1px solid var(--line); }
.story-chapters>li:last-child { border-bottom:0; }
.story-chapter { display:flex; align-items:center; gap:14px; width:100%; min-height:54px; padding:10px 0; border:0; background:transparent; color:var(--muted); text-align:left; font-size:14px; font-weight:500; line-height:1.5; }
.story-chapter>.icon:first-child { width:34px; height:34px; padding:8px; border:1px solid var(--line); border-radius:9px; }
.story-chapter-arrow { margin-left:auto; width:15px; height:15px; opacity:.5; }
.story-chapter[aria-current="step"] { color:var(--text); font-weight:650; }
.story-chapter[aria-current="step"]>.icon:first-child { color:var(--action-text); background:var(--action); border-color:var(--action); }
.story-chapter[aria-current="step"]>.story-chapter-arrow { transform:rotate(90deg); opacity:1; }
.story-chapter[data-complete="true"] { color:var(--text); }
.story-chapter:hover { color:var(--text); }
.story-chapter:focus-visible { outline-offset:3px; }
.story-captions { position:relative; height:178px; margin:6px 0 18px 48px; overflow:hidden; }
.story-caption { position:absolute; inset:0; pointer-events:none; }
.story-caption h3 { max-width:23ch; font:550 24px/1.3 Manrope,'Segoe UI',sans-serif; letter-spacing:-.025em; text-wrap:balance; }
.story-caption p { max-width:45ch; margin-top:12px; color:var(--muted); font:400 14px/1.8 Manrope,'Segoe UI',sans-serif; }
.story-scroll-controls { display:flex; gap:8px; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.story-nav-button,.story-restart.button { display:grid; place-items:center; min-height:44px; width:44px; padding:0; border:1px solid var(--line); border-radius:9px; color:var(--text); background:transparent; box-shadow:none; }
.story-restart.button { flex-shrink:0; }
.story-nav-button:hover:not(:disabled),.story-restart.button:hover:not(:disabled) { background:var(--surface-raised); }
.story-nav-button.story-next { display:flex; flex-direction:row-reverse; gap:9px; width:auto; padding-inline:14px; background:var(--action); color:var(--action-text); border-color:var(--action); }
.story-nav-button.story-next:hover:not(:disabled) { background:var(--action-hover); }
.story-nav-button>.icon,.story-restart>.icon { width:17px; height:17px; }.story-previous>.icon { transform:rotate(180deg); }
.story-nav-button>span,.story-restart>span { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.story-nav-button.story-next>span { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; font-size:12px; font-weight:650; }
.story-counter { min-width:44px; margin-right:auto; text-align:center; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.landing-story { --base:var(--demo-canvas); --surface:var(--demo-surface); --surface-raised:var(--demo-raised); --line:var(--demo-line); --text:var(--demo-text); --muted:var(--demo-muted); --focus:var(--demo-text); --story-received:var(--demo-received); --story-sent:var(--demo-sent); --story-chrome:var(--demo-surface); color:var(--text); font-family:'Segoe UI',sans-serif; }
.landing-story .story-container { position:relative; }
.landing-story .story-stage { position:relative; height:700px; isolation:isolate; }
.landing-story .story-stage:focus-visible { outline:2px solid var(--focus); outline-offset:6px; border-radius:14px; }
.landing-story .story-visual { position:absolute; inset:0; overflow:hidden; contain:layout paint; border:1px solid var(--line); border-radius:16px; background:var(--base); }
.landing-story .story-chat,.landing-story .story-gallery { position:absolute; inset:0; }
.landing-story .story-chat-heading,.landing-story .story-gallery-heading { display:flex; align-items:center; gap:12px; height:62px; padding:12px 28px; border-bottom:1px solid var(--line); background:var(--story-chrome); }
.landing-story .story-avatar { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--story-sent); font-size:13px; }
.landing-story .story-contact { display:grid; flex:1; gap:4px; min-width:0; }.landing-story .story-contact strong { font-size:14px; font-weight:600; }.landing-story .story-contact span { color:var(--muted); font-size:12px; }
.landing-story .story-chat-heading>.icon { width:18px; height:18px; margin-left:8px; color:var(--muted); }
.landing-story .story-day { position:absolute; left:50%; padding:4px 10px; border-radius:5px; background:var(--story-chrome); color:var(--muted); font-size:11px; }
.landing-story .story-message { position:absolute; left:28px; max-width:70%; padding:12px 15px; border-radius:0 12px 12px 12px; background:var(--story-received); font-size:14px; line-height:1.5; }
.landing-story .story-message.sent { left:auto; right:28px; max-width:70%; border-radius:9px 0 9px 9px; background:var(--story-sent); }
.landing-story .story-time { color:var(--muted); font-size:11px; line-height:1.3; white-space:nowrap; }
.landing-story .story-message>.story-time { display:block; margin-top:4px; text-align:right; }
.landing-story .story-message.sent>.story-time:after { content:""; display:inline-block; width:10px; height:5px; margin-left:5px; border:solid var(--muted); border-width:0 0 1px 1px; transform:rotate(-45deg); }
.landing-story .story-chat-anchor { position:absolute; left:28px; width:min(300px,65%); height:30%; pointer-events:none; }
.landing-story .story-shared-photo { position:absolute; top:0; left:0; z-index:3; padding:0; border:0; border-radius:9px; overflow:hidden; text-align:left; background:var(--story-received); color:var(--text); transform-origin:0 0; transition:none!important; will-change:transform,opacity; }
.landing-story .story-shared-photo:disabled { opacity:1; filter:none; cursor:default; pointer-events:none; }
.landing-story .demo-photo { width:100%; aspect-ratio:1; position:relative; overflow:hidden; background-image:url('/assets/example-photos.png'); background-size:200% 200%; background-repeat:no-repeat; background-color:var(--surface-raised); }
.landing-story .demo-photo[data-photo="0"] { background-position:left top; }.landing-story .demo-photo[data-photo="1"] { background-position:right top; }.landing-story .demo-photo[data-photo="2"] { background-position:left bottom; }.landing-story .demo-photo[data-photo="3"] { background-position:right bottom; }
.landing-story .story-captured-photo { height:auto; transform-origin:0 0; }
.landing-story .story-photo-bitmap { position:absolute; top:0; left:0; width:200%; height:200%; max-width:none; pointer-events:none; user-select:none; }
.landing-story .demo-once-label { position:absolute; left:6px; top:6px; z-index:3; display:flex; align-items:center; gap:4px; width:max-content; max-width:calc(100% - 12px); padding:3px 5px; border-radius:4px; background:#080808e6; color:var(--view-once); font-size:11px; line-height:14px; text-shadow:0 1px 3px #000; white-space:nowrap; transform-origin:0 0; }
.landing-story .demo-once-label:before,.landing-story .demo-once-label:after { content:""; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:currentColor; }
.landing-story .demo-once-text { overflow:hidden; text-overflow:ellipsis; }
.landing-story .story-photo-time { position:absolute; right:6px; bottom:6px; z-index:2; padding:2px 4px; border-radius:3px; background:rgb(8 8 8 / .7); color:#fff; transform-origin:right bottom; }
.landing-story .story-photo-retained { position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:6px; width:max-content; padding:6px 8px; border-radius:6px; background:rgb(8 8 8 / .8); color:#f4f4f4; font-size:12px; line-height:1.4; transform-origin:left bottom; }
.landing-story .story-photo-retained>.icon { width:15px; height:15px; }
.landing-story .story-once-message { position:absolute; top:0; left:0; width:100%; height:66px; display:flex; gap:9px; align-items:center; padding:12px; background:var(--story-received); transform-origin:0 0; }
.landing-story .story-once-body { display:flex; align-items:center; gap:9px; transform-origin:left center; }.landing-story .story-once-body>svg:first-child { width:26px; height:26px; flex-shrink:0; color:var(--muted); }.landing-story .story-once-body>.icon { width:19px; height:19px; color:var(--muted); }
.landing-story .story-once-copy { display:grid; gap:4px; }.landing-story .story-once-copy strong { font-size:14px; font-weight:500; }.landing-story .story-once-copy>span { font-size:12px; color:var(--muted); }.landing-story .story-once-message>.story-time { margin-left:auto; align-self:end; transform-origin:right center; }
.landing-story .story-scan { position:absolute; top:0; left:0; right:0; height:2px; background:var(--text); pointer-events:none; }
.landing-story .story-processing { position:absolute; top:0; left:0; z-index:4; display:flex; align-items:center; gap:9px; padding-bottom:13px; pointer-events:none; }
.landing-story .story-processing>.icon { width:18px; height:18px; }.landing-story .story-processing>div:not(.story-processing-meter) { flex:1; min-width:0; }.landing-story .story-processing strong { font-size:13px; font-weight:500; }.landing-story .story-load { font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted); }
.landing-story .story-processing-meter { position:absolute; left:0; right:0; bottom:0; height:2px; overflow:hidden; background:var(--line); }.landing-story .story-processing-meter>span { display:block; height:100%; background:var(--text); transform-origin:left; }
.landing-story .story-gallery-heading>.icon { width:24px; height:24px; color:var(--muted); }.landing-story .story-gallery-heading>div { display:grid; gap:4px; flex:1; }.landing-story .story-gallery-heading strong { font-size:16px; font-weight:600; }.landing-story .story-gallery-heading div>span,.landing-story .story-gallery-count { color:var(--muted); font-size:12px; }
.landing-story .story-gallery-grid { position:absolute; inset:82px 24px 44px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:max-content; align-content:center; gap:12px; padding:1px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.landing-story .story-gallery-file { display:flex; flex-direction:column; min-width:0; padding:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; text-align:left; color:var(--text); background:var(--surface); }
.landing-story .story-gallery-file:hover { background:var(--surface-raised); }.landing-story .story-gallery-file[data-arrived="true"] { border-color:var(--text); }
.landing-story .story-gallery-preview { position:relative; width:100%; aspect-ratio:1; flex:none; overflow:hidden; }.landing-story .story-gallery-preview>.demo-photo,.landing-story .story-gallery-anchor,.landing-story .story-gallery-anchor>.demo-photo { width:100%; height:100%; aspect-ratio:1; }
.landing-story .story-gallery-caption { display:grid; gap:5px; min-height:46px; padding:7px; min-width:0; }.landing-story .story-gallery-caption strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; line-height:1.4; }.landing-story .story-gallery-tag { justify-self:start; max-width:100%; padding:2px 4px; border-radius:4px; background:var(--surface-raised); color:var(--muted); font-size:10px; line-height:1.3; white-space:nowrap; }
.landing-story .story-gallery-tag[data-view-once="true"] { color:var(--view-once); }
.landing-story .story-gallery-video { position:absolute; right:6px; bottom:6px; display:flex; padding:4px; border-radius:4px; background:rgb(8 8 8 / .7); color:#fff; }.landing-story .story-gallery-video>.icon { width:16px; height:16px; }
.landing-story .story-gallery-check { position:absolute; right:8px; top:8px; z-index:4; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:var(--base); background:var(--text); }.landing-story .story-gallery-check>.icon { width:15px; height:15px; stroke-width:2; }
.landing-story .story-audio-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; height:100%; color:var(--muted); background:var(--story-chrome); }.landing-story .story-audio-preview>.icon { width:28px; height:28px; }.landing-story .story-audio-waveform { display:flex; align-items:center; justify-content:center; gap:3px; height:26px; }.landing-story .story-audio-waveform>span { width:3px; border-radius:2px; background:currentColor; }
.landing-story .story-gallery-saved { position:absolute; bottom:20px; left:28px; right:28px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.landing-story .story-gallery-saved>.icon { width:15px; height:15px; }
.landing-story .story-progress { position:absolute; left:0; right:0; bottom:0; z-index:6; height:2px; overflow:hidden; background:var(--line); }.landing-story .story-progress>span { display:block; height:100%; background:var(--text); transform-origin:left; }
.landing-story .story-extra { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; background:var(--base); pointer-events:none; }.landing-story .story-extra:not([inert]) { pointer-events:auto; }.landing-story .story-extra>.story-gallery-heading { flex-shrink:0; }
.landing-story .story-extra-content { display:flex; flex:1; min-height:0; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; }
.landing-story .story-export-preview { height:min(270px,56%); width:auto; aspect-ratio:1; max-width:75%; flex:none; border-radius:8px; }.landing-story .story-export-meta { display:grid; gap:6px; text-align:center; }.landing-story .story-export-meta strong { font-size:16px; font-weight:600; }.landing-story .story-export-meta span,.landing-story .story-extra-note { color:var(--muted); font-size:13px; line-height:1.5; }.landing-story .story-extra-note { max-width:36ch; text-align:center; }
.landing-story .story-export-button { min-height:44px; border:1px solid var(--line); color:var(--text); background:var(--surface-raised); font-size:14px; }
.landing-story .story-link-visual { position:relative; width:min(45%,200px); aspect-ratio:1; flex:none; }.landing-story .story-qr { display:block; width:100%; height:100%; background:#fafafa; fill:#171717; border-radius:8px; }.landing-story .story-linked { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--base); text-align:center; font-size:15px; }.landing-story .story-linked>.icon { width:40px; height:40px; }.landing-story .story-phone-rule { display:flex; align-items:center; gap:8px; max-width:32ch; color:var(--muted); text-align:center; font-size:13px; line-height:1.5; }.landing-story .story-phone-rule>.icon { width:17px; height:17px; }
.landing-story .story-qr-scanner { position:absolute; inset:7%; border-radius:4px; overflow:hidden; pointer-events:none; }.landing-story .story-qr-scan-line { position:absolute; inset:0; border-bottom:2px solid var(--text); animation:story-qr-scan 1800ms ease-in-out infinite; animation-play-state:paused; }.landing-story .story-qr-scanner[data-active="true"] .story-qr-scan-line { animation-play-state:running; }
@keyframes story-qr-scan { 0% { transform:translateY(-100%); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform:translateY(0); opacity:0; } }
.landing-story .story-link-explainer { display:grid; grid-template-columns:1fr; align-content:center; gap:28px; flex:1; min-height:0; padding:32px 44px; overflow-y:auto; }.landing-story .story-link-diagram { display:block; width:100%; height:100px; color:var(--text); }.landing-story .story-link-diagram text { fill:var(--muted); font:500 12px 'Segoe UI',sans-serif; }.landing-story .story-link-route { stroke:var(--muted); opacity:.45; }.landing-story .story-link-diagram-check { stroke:var(--text); }.landing-story .story-link-packet { fill:var(--text); animation:story-link-packet 2200ms ease-in-out infinite; animation-play-state:paused; }.landing-story .story-link-diagram[data-active="true"] .story-link-packet { animation-play-state:running; }
@keyframes story-link-packet { 0% { transform:translateX(0); opacity:0; } 12% { opacity:1; } 85% { transform:translateX(126px); opacity:1; } 100% { transform:translateX(126px); opacity:0; } }
.landing-story .story-link-details { display:grid; gap:18px; }.landing-story .story-link-point { display:flex; gap:12px; align-items:start; }.landing-story .story-link-point>.icon { flex-shrink:0; width:20px; height:20px; margin-top:2px; color:var(--muted); }.landing-story .story-link-point>div { display:grid; gap:5px; }.landing-story .story-link-point strong { font-size:14px; font-weight:600; line-height:1.4; }.landing-story .story-link-point p { font-size:13px; color:var(--muted); line-height:1.6; }
.landing-story .story-viewer { position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; gap:14px; padding:20px; background:var(--base); }.landing-story .story-viewer-back { display:flex; align-items:center; gap:7px; align-self:start; min-height:40px; padding:0 4px; border:0; background:transparent; color:var(--text); font-size:14px; }.landing-story .story-viewer-back>.icon { width:16px; height:16px; transform:rotate(180deg); }.landing-story .story-viewer-image { display:grid; place-items:center; flex:1; min-height:0; }.landing-story .story-viewer-image>.demo-photo { aspect-ratio:1; border-radius:8px; }.landing-story .story-viewer>p { color:var(--muted); font-size:12px; line-height:1.5; }
.landing-story .story-scroll-rail { position:absolute; right:28px; bottom:28px; z-index:5; display:flex; align-items:center; gap:12px; height:56px; pointer-events:none; }.landing-story .story-scroll-rail>svg { width:28px; height:56px; flex-shrink:0; }.landing-story .story-scroll-mouse,.landing-story .story-scroll-tip { opacity:.65; }.landing-story .story-scroll-callout { display:grid; gap:4px; font-size:12px; }.landing-story .story-scroll-callout strong { font-size:14px; font-weight:500; }.landing-story .story-scroll-callout span { color:var(--muted); }.landing-story .story-scroll-wheel { animation:story-scroll-wheel 2600ms var(--ease) infinite; }.landing-story .story-scroll-rail[data-hint-active="false"] .story-scroll-wheel { animation-play-state:paused; }
@keyframes story-scroll-wheel { 0%,18% { transform:translateY(0); opacity:1; } 55%,75% { transform:translateY(7px); opacity:0; } 81% { transform:translateY(0); opacity:0; } 100% { opacity:1; } }
.landing-story .story-announcement { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.walkthrough[data-compact="true"] { min-height:0; }.walkthrough[data-compact="true"] .walkthrough-pin { position:relative; top:auto; }
@media(max-width:1200px) {
 .walkthrough-pin { grid-template-columns:minmax(0, .95fr) minmax(0, 1.65fr); gap:40px; }.journey-copy h2 { font-size:36px; }
 .story-chapter { font-size:13px; gap:12px; }.story-caption h3 { font-size:22px; }.story-captions { margin-left:46px; }
}
@media(max-width:1000px) {
 .walkthrough { padding-block:72px; }.walkthrough-pin { max-width:740px; grid-template-columns:minmax(0,1fr); gap:32px; }
 .journey-copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:36px; align-items:start; }
 .journey-copy h2 { font-size:38px; }.journey-copy>.text-link { grid-column:1; margin-top:20px; align-self:end; }
 .journey-explanation { grid-column:2; grid-row:1 / span 2; }.story-chapters { margin-top:0; }
 .landing-story .story-day { display:none; }
}
@media(max-width:760px) {
 .walkthrough { padding-block:64px; }.walkthrough-pin { max-width:540px; gap:28px; }
 .journey-copy { display:block; }.journey-copy h2 { max-width:18ch; font-size:34px; }.journey-intro { max-width:40ch; margin-top:12px; }
 .story-chapters { margin:22px 0 0; }.story-chapter { font-size:14px; }.story-caption h3 { font-size:23px; }.story-caption p { font-size:14px; line-height:1.75; }
 .story-scroll-controls { margin-top:16px; }.journey-copy>.text-link { margin-top:14px; }
 .landing-story .story-chat-heading,.landing-story .story-gallery-heading { padding-inline:16px; }.landing-story .story-message { left:16px; max-width:78%; font-size:13px; padding:9px 11px; }.landing-story .story-message.sent { right:16px; max-width:75%; }.landing-story .story-chat-anchor { left:16px; width:72%; }.landing-story .story-contact span { font-size:11px; }
 .landing-story .story-gallery-grid { inset:74px 18px 38px; align-content:center; gap:8px; }.landing-story .story-gallery-caption { min-height:44px; padding:5px; gap:3px; }.landing-story .story-gallery-caption strong { font-size:11px; }.landing-story .story-gallery-tag { font-size:9px; padding:2px; }.landing-story .story-gallery-saved { left:16px; right:16px; bottom:14px; font-size:11px; }
 .landing-story .story-photo-retained>span { display:none; }.landing-story .story-extra-content { gap:12px; padding:16px; }.landing-story .story-link-visual { width:min(55%,180px); }
 .landing-story .story-link-explainer { gap:20px; padding:24px; }.landing-story .story-link-diagram { height:90px; }.landing-story .story-link-details { gap:16px; }.landing-story .story-link-point { gap:10px; }.landing-story .story-link-point p { font-size:12px; }.landing-story .story-link-point strong { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .landing-story .story-stage * { transition:none!important; }.landing-story .story-scroll-wheel,.landing-story .story-link-packet,.landing-story .story-qr-scan-line { animation:none; } }