:root {
    --ink: #1e2024;
    --muted: #67707c;
    --line: #dfe3e8;
    --paper: #f7f8fa;
    --surface: #ffffff;
    --cobalt: #1e5eff;
    --cobalt-dark: #164bd4;
    --cobalt-soft: #eaf0ff;
    --mint: #1da981;
    --mint-soft: #e7f8f2;
    --amber: #e2a114;
    --amber-soft: #fff5d9;
    --coral: #e95e4d;
    --night: #17191d;
    --shadow: 0 28px 80px rgba(27, 34, 44, .16);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body, button, input, select { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--surface); }
button { cursor: pointer; }
a { color: inherit; }

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand-tile { fill: var(--cobalt); }
.brand-glyph { fill: white; }
.brand-name { font-size: 23px; line-height: 1; font-weight: 760; }
.button { min-height: 44px; padding: 0 17px; border: 1px solid transparent; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink); background: white; font-size: 13px; font-weight: 720; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 17px; }
.button-primary { color: white; background: var(--cobalt); }
.button-primary:hover { background: var(--cobalt-dark); box-shadow: 0 8px 22px rgba(30, 94, 255, .22); }
.button-secondary { border-color: #cdd3db; background: white; }
.button-secondary:hover { border-color: #aeb6c1; }
.button-large { min-height: 50px; padding: 0 21px; }
.button.full { width: 100%; }
.icon-button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 7px; display: grid; place-items: center; background: transparent; }
.icon-button:hover { background: #f0f2f5; }
.icon-button svg { width: 18px; }

.public-header { position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: 72px; padding: 0 max(28px, calc((100vw - 1200px) / 2)); display: flex; align-items: center; color: white; }
.public-header .brand { color: white; }
.public-header .brand-tile { fill: white; }
.public-header .brand-glyph { fill: var(--cobalt); }
.public-header nav { margin-left: 64px; display: flex; gap: 32px; }
.public-header nav a, .header-whatsapp { color: rgba(255, 255, 255, .86); font-size: 14px; font-weight: 650; text-decoration: none; }
.public-header nav a:hover, .header-whatsapp:hover { color: white; }
.public-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.public-header .button-primary { background: white; color: var(--cobalt-dark); }

.hero-scroll-stage { position: relative; background: var(--cobalt); }
.hero { position: relative; min-height: 760px; padding: 126px max(28px, calc((100vw - 1200px) / 2)) 66px; overflow: hidden; display: grid; grid-template-columns: minmax(360px, .78fr) minmax(600px, 1.22fr); gap: clamp(38px, 5vw, 70px); align-items: center; color: white; background: var(--cobalt); outline: 0; transition: background .65s ease; }
.hero.hero-theme-1 { background: #137d65; }
.hero.hero-theme-2 { background: #25282e; }
.hero::after { display: none; }
.hero-copy, .hero-product { position: relative; z-index: 2; }
.kicker { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; color: var(--cobalt); font-size: 11px; font-weight: 800; }
.kicker > span { width: 18px; height: 2px; background: currentColor; }
.hero .kicker { color: #dce5ff; }
.hero-copy-stage { min-height: 286px; position: relative; }
.hero-copy-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .48s ease, transform .48s ease, visibility .48s; }
.hero-copy-slide.active { opacity: 1; visibility: visible; transform: none; }
.hero h1, .hero-copy-slide h2 { margin: 0; max-width: 580px; font-size: 64px; line-height: 1; font-weight: 760; }
.hero h1 em, .hero-copy-slide h2 em { color: #d9ff74; font-style: normal; }
.hero-theme-1 .hero-copy-slide h2 em { color: #c8ffeb; }
.hero-theme-2 .hero-copy-slide h2 em { color: #ffd264; }
.hero-detail { max-width: 535px; margin: 25px 0 0; color: rgba(255, 255, 255, .88); font-size: 18px; line-height: 1.55; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero .button-primary { color: var(--cobalt-dark); background: white; }
.hero .button-secondary { color: white; border-color: rgba(255, 255, 255, .5); background: transparent; }
.hero .button-secondary:hover { background: rgba(255, 255, 255, .1); }
.hero-note { margin: 18px 0 0; display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .76); font-size: 12px; }
.hero-note svg { width: 14px; }
.hero-story-controls { max-width: 535px; margin-top: 30px; display: flex; align-items: center; gap: 18px; }
.hero-story-controls > div { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.hero-story-controls button { min-width: 0; height: 38px; padding: 0; border: 0; display: grid; grid-template-rows: 3px 1fr; gap: 7px; color: rgba(255, 255, 255, .76); background: transparent; font-size: 11px; font-weight: 750; text-align: left; }
.hero-story-controls button > i { width: 100%; height: 3px; overflow: hidden; position: relative; display: block; background: rgba(255, 255, 255, .24); }
.hero-story-controls button > i::after { content: ""; width: 0; height: 100%; position: absolute; inset: 0 auto 0 0; background: white; }
.hero-story-controls button.active { color: white; }
.hero-story-controls button.active > i::after { animation: hero-progress 7s linear forwards; }
.hero.paused .hero-story-controls button.active > i::after { animation-play-state: paused; }
.hero.scroll-driven .hero-story-controls button > i::after { width: var(--hero-scroll-fill, 0%); animation: none; }
.hero-story-count { color: rgba(255, 255, 255, .72); font-size: 10px; white-space: nowrap; }
.hero-story-count b { color: white; font-size: 15px; }
.hero-next { position: absolute; z-index: 4; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 750; text-decoration: none; transform: translateX(-50%); }
.hero-next svg { width: 14px; }

.hero-product { height: 575px; min-width: 0; position: relative; }
.hero-scene { position: absolute; inset: 30px 0 45px; opacity: 0; visibility: hidden; transform: translateX(36px) scale(.985); transition: opacity .55s ease, transform .55s ease, visibility .55s; }
.hero-scene.active { z-index: 2; opacity: 1; visibility: visible; transform: none; }
.product-window { min-height: 500px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; background: white; color: var(--ink); box-shadow: var(--shadow); transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); transform-origin: center; transition: transform .5s ease; }
.hero-product:hover .product-window { transform: perspective(1400px) rotateY(0) rotateX(0); }
.product-chrome { height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 5px; background: #f4f5f7; }
.product-chrome > span { width: 7px; height: 7px; border-radius: 50%; background: #c6ccd4; }
.product-chrome > b { margin: 0 auto; color: #717b87; font-size: 9px; font-weight: 650; }
.product-shell { min-height: 466px; display: grid; grid-template-columns: 140px 1fr; }
.product-sidebar { padding: 20px 11px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; background: #fbfcfd; }
.mini-brand { margin: 0 6px 32px; display: flex; align-items: center; gap: 7px; }
.mini-brand svg { width: 23px; color: var(--cobalt); fill: currentColor; }
.mini-brand svg path { fill: white; }
.mini-brand strong { font-size: 15px; }
.product-sidebar > span { min-height: 36px; padding: 0 9px; border-radius: 6px; display: flex; align-items: center; gap: 8px; color: #596572; font-size: 11px; font-weight: 700; }
.product-sidebar > span.active { color: var(--cobalt-dark); background: var(--cobalt-soft); }
.product-sidebar svg { width: 13px; }
.product-main { min-width: 0; padding: 18px 25px; }
.product-top { display: flex; align-items: center; justify-content: space-between; }
.product-top label { width: min(310px, 78%); height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; gap: 8px; color: #606b77; font-size: 11px; }
.product-top label svg { width: 13px; }
.product-top label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-top > b { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: var(--cobalt-dark); background: var(--cobalt-soft); font-size: 10px; }
.product-heading { margin: 33px 0 28px; display: flex; align-items: end; justify-content: space-between; }
.product-heading small, .product-date { color: var(--cobalt); font-size: 10px; font-weight: 850; }
.product-heading h2 { margin: 3px 0 0; font-size: 20px; }
.product-heading button { height: 32px; padding: 0 11px; border: 0; border-radius: 5px; display: flex; align-items: center; gap: 6px; color: white; background: var(--cobalt); font-size: 10px; font-weight: 750; }
.product-heading button svg { width: 11px; }
.product-date { margin: 0 0 7px; color: #8d96a2; }
.product-file { min-height: 62px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 11px; align-items: center; }
.product-file > div { min-width: 0; }
.file-tile { width: 36px; height: 42px; border-radius: 4px; display: grid; place-items: center; color: #176a55; background: var(--mint-soft); font-size: 9px; font-weight: 850; }
.file-tile.pdf { color: #a63e32; background: #fee8e5; }
.file-tile.sheet { color: #7b5b04; background: var(--amber-soft); }
.product-file strong, .product-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-file strong { font-size: 12px; }
.product-file small { margin-top: 4px; color: #626d79; font-size: 10px; }
.product-file small svg { width: 10px; height: 10px; margin-right: 3px; vertical-align: -2px; }
.product-file > svg { width: 13px; color: #8b939d; }

.message-card { position: absolute; right: -20px; bottom: 0; width: 285px; min-height: 152px; padding: 16px; border: 1px solid rgba(30, 32, 36, .08); border-radius: 8px; color: var(--ink); background: white; box-shadow: 0 20px 50px rgba(22, 30, 40, .22); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease, visibility .35s; }
.message-card.active { opacity: 1; visibility: visible; transform: none; }
.message-card.understood { background: #edfbf7; }
.message-card.found { background: #fff8e7; }
.message-head { display: flex; align-items: center; gap: 6px; color: #404b57; font-size: 11px; font-weight: 750; }
.message-head svg { width: 14px; color: #1eaa72; }
.message-head small { margin-left: auto; color: #747e89; font-size: 9px; font-weight: 500; }
.nest-dot { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; color: white; background: var(--cobalt); font-size: 9px; }
.message-card > p { margin: 13px 0 11px; font-size: 13px; line-height: 1.45; }
.message-file { min-height: 48px; padding: 7px; border-radius: 5px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 14px; gap: 8px; align-items: center; background: #f3f5f7; }
.message-file > span { height: 34px; border-radius: 4px; display: grid; place-items: center; color: #a33d32; background: #fee7e3; font-size: 9px; font-weight: 850; }
.message-file strong, .message-file small { display: block; }
.message-file strong { font-size: 10px; }
.message-file small { margin-top: 3px; color: #69737f; font-size: 9px; }
.message-file svg { width: 12px; color: var(--mint); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.facts span { padding: 10px; border-radius: 5px; background: rgba(255, 255, 255, .8); }
.facts small, .facts strong { display: block; }
.facts small { color: var(--mint); font-size: 9px; font-weight: 850; }
.facts strong { margin-top: 4px; font-size: 10px; }
.message-card.found button { width: 100%; height: 37px; border: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 7px; color: white; background: var(--cobalt); font-size: 10px; font-weight: 750; }
.message-card.found button svg { width: 12px; }
.demo-control { position: absolute; left: 22px; bottom: 0; display: flex; gap: 4px; }
.demo-control button { height: 34px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 5px; display: flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, .82); background: rgba(12, 42, 121, .22); font-size: 9px; font-weight: 750; }
.demo-control button.active { color: var(--ink); border-color: white; background: white; }
.demo-control span { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: rgba(127, 140, 161, .18); font-size: 9px; }

.intelligence-canvas, .reminder-canvas { height: 500px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; color: var(--ink); background: #f7f9fb; box-shadow: var(--shadow); }
.canvas-head { height: 58px; padding: 0 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #4d5865; background: white; font-size: 12px; font-weight: 750; }
.canvas-head > span { display: flex; align-items: center; gap: 9px; }
.canvas-head b { width: 27px; height: 27px; border-radius: 6px; display: grid; place-items: center; color: white; background: var(--cobalt); font-size: 14px; }
.canvas-head small { color: var(--cobalt); font-size: 9px; font-weight: 850; }
.intelligence-map { height: 442px; position: relative; overflow: hidden; }
.intel-document { width: 166px; height: 208px; padding: 44px 18px 18px; position: absolute; z-index: 3; left: calc(50% - 83px); top: 98px; overflow: hidden; border: 1px solid #cfd6df; border-radius: 7px; display: flex; flex-direction: column; align-items: center; color: #3b4653; background: white; box-shadow: 0 18px 42px rgba(37, 49, 63, .14); text-align: center; }
.intel-document > svg { width: 46px; height: 46px; margin-bottom: 22px; color: var(--coral); }
.intel-document strong { font-size: 12px; }
.intel-document small { margin-top: 6px; color: #5f6a76; font-size: 10px; }
.scan-line { height: 3px; position: absolute; z-index: 2; left: 11px; right: 11px; top: 20px; background: var(--cobalt); box-shadow: 0 0 16px rgba(30, 94, 255, .65); animation: scan-document 3.2s ease-in-out infinite; }
.intel-node { min-height: 58px; padding: 9px 12px; position: absolute; z-index: 3; border: 1px solid #d7dce3; border-radius: 7px; display: flex; align-items: center; gap: 10px; background: white; box-shadow: 0 10px 26px rgba(42, 52, 65, .09); animation: intel-float 4s ease-in-out infinite; }
.intel-node > svg { width: 18px; color: var(--cobalt); }
.intel-node small, .intel-node strong { display: block; }
.intel-node small { color: #68737f; font-size: 9px; font-weight: 850; }
.intel-node strong { margin-top: 4px; font-size: 11px; }
.node-person { left: 24px; top: 45px; }
.node-date { right: 22px; top: 45px; animation-delay: .7s; }
.node-type { left: 25px; top: 257px; animation-delay: 1.1s; }
.node-action { right: 20px; top: 257px; animation-delay: 1.5s; }
.intel-link { height: 1px; position: absolute; z-index: 1; background: #aab9d8; transform-origin: left; }
.link-person { width: 150px; left: 145px; top: 104px; transform: rotate(20deg); }
.link-date { width: 145px; right: 145px; top: 104px; transform: rotate(160deg); transform-origin: right; }
.link-type { width: 150px; left: 145px; top: 287px; transform: rotate(-18deg); }
.link-action { width: 145px; right: 145px; top: 287px; transform: rotate(198deg); transform-origin: right; }
.intel-ready { min-height: 52px; padding: 0 13px; position: absolute; z-index: 4; left: calc(50% - 116px); bottom: 18px; width: 232px; border-radius: 7px; display: grid; grid-template-columns: 24px 1fr 15px; gap: 9px; align-items: center; color: #176d55; background: var(--mint-soft); box-shadow: 0 12px 30px rgba(20, 92, 71, .13); }
.intel-ready > svg { width: 16px; }
.intel-ready strong, .intel-ready small { display: block; }
.intel-ready strong { font-size: 11px; }
.intel-ready small { margin-top: 3px; font-size: 9px; }

.reminder-canvas { padding-bottom: 24px; background: #f4f6f8; }
.timeline-track { height: 4px; margin: 62px 72px 0; position: relative; display: flex; align-items: center; justify-content: space-between; background: #d8dde4; }
.timeline-progress { width: 0; height: 100%; position: absolute; left: 0; top: 0; background: var(--cobalt); animation: timeline-fill 7s ease-in-out infinite; }
.timeline-track i { width: 15px; height: 15px; z-index: 2; border: 4px solid white; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 1px #a8b4c6; }
.timeline-labels { margin: 12px 50px 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.timeline-labels small, .timeline-labels strong { display: block; }
.timeline-labels small { color: var(--cobalt); font-size: 9px; font-weight: 850; }
.timeline-labels strong { margin-top: 4px; color: #52606d; font-size: 10px; }
.deadline-card { width: calc(100% - 100px); min-height: 154px; margin: 42px auto 0; padding: 20px; border: 1px solid #dfe3e8; border-radius: 8px; display: grid; grid-template-columns: 44px 1fr auto; gap: 15px; align-items: center; background: white; box-shadow: 0 18px 40px rgba(38, 46, 57, .1); animation: deadline-arrive 7s ease-in-out infinite; }
.deadline-icon { width: 44px; height: 44px; border-radius: 7px; display: grid; place-items: center; color: #976a00; background: var(--amber-soft); }
.deadline-icon svg { width: 20px; animation: bell-ring 1.5s ease infinite; }
.deadline-card small { color: var(--cobalt); font-size: 9px; font-weight: 850; }
.deadline-card h3 { margin: 7px 0 6px; font-size: 17px; }
.deadline-card p { max-width: 290px; margin: 0; color: #5d6874; font-size: 11px; line-height: 1.45; }
.deadline-card button { height: 36px; padding: 0 12px; border: 0; border-radius: 6px; display: flex; align-items: center; gap: 5px; color: white; background: var(--cobalt); font-size: 10px; font-weight: 750; }
.deadline-card button svg { width: 12px; }
.document-chip { width: 255px; min-height: 52px; margin: 12px auto 0; padding: 0 12px; border-radius: 7px; display: grid; grid-template-columns: 24px 1fr 14px; gap: 9px; align-items: center; background: var(--mint-soft); }
.document-chip > svg { width: 16px; color: var(--mint); }
.document-chip strong, .document-chip small { display: block; }
.document-chip strong { font-size: 10px; }
.document-chip small { margin-top: 3px; color: #5f6b77; font-size: 9px; }
@keyframes hero-progress { to { width: 100%; } }
@keyframes scan-document { 0%, 100% { top: 22px; opacity: .35; } 50% { top: 178px; opacity: 1; } }
@keyframes intel-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes timeline-fill { 0%, 15% { width: 0; } 72%, 100% { width: 100%; } }
@keyframes deadline-arrive { 0%, 7% { opacity: .45; transform: translateY(12px); } 18%, 100% { opacity: 1; transform: none; } }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .hero-scroll-stage { height: 240vh; }
    .hero-scroll-stage .hero { height: 100vh; min-height: 700px; position: sticky; top: 0; }
    .hero-scroll-stage .hero-copy { transform: translate3d(0, calc(var(--hero-intro-progress, 0) * -18px), 0); }
    .hero-scroll-stage .hero-product { transform: translate3d(0, calc(var(--hero-intro-progress, 0) * 20px), 0); }
    .hero-scroll-stage .hero-scene[data-hero-scene="0"] .product-window { transform: perspective(1400px) rotateY(calc(-2deg + (var(--hero-intro-progress, 0) * 2deg))) rotateX(calc(1deg - (var(--hero-intro-progress, 0) * 1deg))) scale(calc(1 - (var(--hero-intro-progress, 0) * .015))); }
}

.proof-strip { min-height: 92px; padding: 22px max(28px, calc((100vw - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #f2f4f7; }
.proof-strip p { margin: 0; color: #46515e; font-size: 14px; }
.proof-strip > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; }
.proof-strip span { display: flex; align-items: center; gap: 6px; color: #626c78; font-size: 12px; font-weight: 750; }
.proof-strip svg { width: 14px; color: var(--cobalt); }

.product-story, .moments { padding: 112px max(28px, calc((100vw - 1200px) / 2)); }
.section-intro { max-width: 780px; }
.section-intro h2 { margin: 0; font-size: 48px; line-height: 1.08; }
.section-intro > p:last-child { max-width: 600px; margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.section-intro.compact { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-intro.compact .kicker { align-self: start; }
.story-grid { margin-top: 62px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.story-feature { min-height: 455px; padding: 26px; overflow: hidden; border-radius: 8px; position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 20px; }
.story-send { grid-column: span 5; color: white; background: var(--night); }
.story-understand { grid-column: span 7; background: var(--mint-soft); }
.story-find { grid-column: span 12; min-height: 340px; grid-template-columns: 70px minmax(220px, .65fr) 1.35fr; grid-template-rows: 1fr; align-items: center; background: var(--amber-soft); }
.story-number { font-size: 11px; font-weight: 850; opacity: .7; }
.story-feature h3 { margin: 0; font-size: 25px; }
.story-feature p { max-width: 440px; margin: 9px 0 0; color: inherit; opacity: .75; font-size: 14px; line-height: 1.55; }
.phone-scene { width: min(300px, 90%); min-height: 265px; margin: auto auto -55px; padding: 18px; border: 5px solid #2c3036; border-radius: 26px 26px 0 0; color: var(--ink); background: #eef1f3; }
.phone-bar { margin-bottom: 30px; display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; }
.phone-bar svg { width: 14px; }
.chat-bubble { width: 84%; margin-left: auto; padding: 10px; border-radius: 7px 7px 2px 7px; background: #d9f5e8; font-size: 10px; }
.chat-file { width: 84%; margin: 5px 0 0 auto; padding: 8px; border-radius: 7px 2px 7px 7px; display: flex; gap: 8px; align-items: center; background: white; }
.chat-file > svg { width: 21px; color: var(--coral); }
.chat-file strong, .chat-file small { display: block; }
.chat-file strong { font-size: 9px; }
.chat-file small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.chat-reply { width: 84%; margin-top: 9px; padding: 9px; border-radius: 2px 7px 7px; display: flex; align-items: center; gap: 6px; background: white; font-size: 9px; }
.chat-reply svg { width: 11px; color: var(--mint); }
.channel-scene { width: min(340px, 100%); margin: auto auto -24px; padding: 18px; border-radius: 8px 8px 0 0; color: var(--ink); background: #f3f5f7; }
.channel-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.channel-options span { height: 40px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #4e5a67; background: white; font-size: 10px; font-weight: 700; animation: channel-route 6s ease-in-out infinite; }
.channel-options span:nth-child(2) { animation-delay: 2s; }
.channel-options span:nth-child(3) { animation-delay: 4s; }
.channel-options svg { width: 13px; }
.incoming-file, .nest-received { margin-top: 10px; padding: 11px; border-radius: 6px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 9px; align-items: center; background: white; }
.incoming-file > svg:first-child { width: 22px; color: var(--coral); }
.incoming-file > svg:last-child { width: 14px; color: #9098a2; animation: route-down 1.4s ease-in-out infinite; }
.incoming-file strong, .incoming-file small, .nest-received strong, .nest-received small { display: block; }
.incoming-file strong, .nest-received strong { font-size: 11px; }
.incoming-file small, .nest-received small { margin-top: 3px; color: #5f6a76; font-size: 9px; }
.nest-received { background: var(--mint-soft); }
.nest-received b { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: white; background: var(--cobalt); }
.nest-received > svg { width: 14px; color: var(--mint); }
@keyframes channel-route { 0%, 28%, 100% { color: #56616e; border-color: var(--line); transform: translateY(0); } 8%, 18% { color: var(--cobalt-dark); border-color: #8eabff; transform: translateY(-3px); } }
@keyframes route-down { 50% { transform: translateY(4px); } }
.detail-scene { min-height: 230px; margin-top: auto; padding: 24px; border: 1px solid rgba(25, 117, 90, .18); border-radius: 8px; display: grid; grid-template-columns: 52px 1fr 1fr; gap: 18px; align-items: center; background: rgba(255, 255, 255, .72); }
.detail-file { width: 52px; height: 64px; border-radius: 5px; display: grid; place-items: center; color: var(--coral); background: #fee9e5; }
.detail-file svg { width: 23px; }
.detail-scene small, .detail-scene strong { display: block; }
.detail-scene small { color: var(--mint); font-size: 9px; font-weight: 850; }
.detail-scene strong { margin-top: 6px; font-size: 11px; }
.ready-pill { grid-column: 2 / 4; padding: 10px; border-radius: 5px; display: flex; align-items: center; gap: 7px; color: #176d55; background: var(--mint-soft); font-size: 10px; font-weight: 750; }
.ready-pill svg { width: 13px; }
.find-scene { min-width: 0; padding: 28px; border-radius: 8px; color: var(--ink); background: white; box-shadow: 0 18px 45px rgba(102, 76, 15, .1); }
.find-query { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; gap: 10px; color: #5c6570; font-size: 11px; }
.find-query svg { width: 16px; }
.find-result { min-height: 78px; margin-top: 10px; padding: 12px; border-radius: 6px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; gap: 12px; align-items: center; background: #f7f8fa; }
.find-result > span { width: 44px; height: 52px; border-radius: 4px; display: grid; place-items: center; color: var(--cobalt); background: var(--cobalt-soft); }
.find-result > span svg { width: 20px; }
.find-result small, .find-result strong, .find-result p { display: block; }
.find-result small { color: var(--cobalt); font-size: 9px; font-weight: 850; }
.find-result strong { margin-top: 4px; font-size: 11px; }
.find-result p { margin-top: 4px; color: #5d6874; font-size: 9px; }
.find-result button { width: 34px; height: 34px; border: 0; border-radius: 6px; display: grid; place-items: center; background: white; }
.find-result button svg { width: 15px; }

.memory-slider { padding: 96px 0; overflow: hidden; color: white; background: var(--night); }
.memory-slider-heading { width: min(1200px, calc(100% - 56px)); margin: 0 auto 48px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.memory-slider-heading .kicker { color: #aebdff; }
.memory-slider-heading h2 { margin: 0; font-size: 46px; line-height: 1.08; }
.memory-rail { width: 100%; overflow: hidden; }
.memory-rail + .memory-rail { margin-top: 12px; }
.memory-track { width: max-content; display: flex; animation: memory-left 30s linear infinite; }
.memory-rail.reverse .memory-track { animation-name: memory-right; animation-duration: 34s; }
.memory-group { padding-right: 12px; display: flex; gap: 12px; }
.memory-group > span { width: 280px; height: 68px; padding: 0 18px; border: 1px solid #3b414a; border-radius: 7px; display: flex; align-items: center; gap: 11px; color: #e7eaf0; background: #23262c; font-size: 14px; font-weight: 650; }
.memory-group svg { width: 18px; color: #8ea8ff; }
.memory-rail.reverse .memory-group > span { color: #20352f; border-color: #b9e5d8; background: var(--mint-soft); }
.memory-rail.reverse .memory-group svg { color: var(--mint); }
@keyframes memory-left { to { transform: translateX(-50%); } }
@keyframes memory-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.moments { background: #f4f6f8; }
.moment-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.moment-grid article { min-height: 290px; padding: 25px; border: 1px solid var(--line); border-radius: 8px; position: relative; background: white; }
.moment-icon { width: 46px; height: 46px; margin-bottom: 62px; border-radius: 7px; display: grid; place-items: center; }
.moment-icon svg { width: 21px; }
.moment-icon.blue { color: var(--cobalt); background: var(--cobalt-soft); }
.moment-icon.mint { color: var(--mint); background: var(--mint-soft); }
.moment-icon.amber { color: #936700; background: var(--amber-soft); }
.moment-grid small { color: var(--cobalt); font-size: 10px; font-weight: 850; }
.moment-grid h3 { margin: 10px 0 7px; font-size: 19px; }
.moment-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.moment-arrow { position: absolute; top: 28px; right: 25px; width: 17px; color: #8b939e; }

.experience-section { --experience-edge: max(28px, calc((100vw - 1200px) / 2)); padding: 112px 0 0; background: #f4f6f8; }
.experience-heading { width: min(1200px, calc(100% - 56px)); margin: 0 auto 48px; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.experience-heading h2 { margin: 0; font-size: 48px; line-height: 1.08; }
.experience-heading > p { max-width: 380px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.experience-slider { width: 100%; overflow: hidden; color: white; background: var(--night); outline: 0; }
.experience-slider:focus-visible { box-shadow: inset 0 0 0 4px rgba(157, 178, 255, .55); }
.experience-slides { height: 680px; position: relative; overflow: hidden; }
.experience-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s; }
.experience-slide.active { opacity: 1; visibility: visible; }
.experience-slide > img, .experience-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.experience-slide > img { object-fit: cover; transform: scale(1.025); transition: transform 7s ease; }
.experience-slide.active > img { transform: scale(1); }
.experience-slide:nth-child(1) > img { object-position: center; }
.experience-overlay { background: rgba(12, 17, 24, .34); }
.experience-copy { position: absolute; z-index: 2; left: var(--experience-edge); top: 64px; max-width: 430px; text-shadow: 0 2px 18px rgba(0, 0, 0, .26); }
.experience-slide:first-child .experience-copy { left: auto; right: var(--experience-edge); }
.experience-copy small { font-size: 12px; font-weight: 850; color: #e8edff; }
.experience-copy h3 { margin: 12px 0 16px; font-size: 46px; line-height: 1.02; }
.experience-copy p { max-width: 390px; margin: 0; color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.55; }
.experience-demo { position: absolute; z-index: 3; left: var(--experience-edge); bottom: 52px; width: 390px; padding: 16px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px; color: var(--ink); background: rgba(255, 255, 255, .96); box-shadow: 0 20px 50px rgba(17, 24, 32, .22); }
.experience-slide:first-child .experience-demo { left: auto; right: var(--experience-edge); }
.demo-source-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.demo-source-row span { height: 40px; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #56616d; font-size: 11px; font-weight: 700; }
.demo-source-row svg { width: 13px; }
.active .demo-source-row span { animation: slider-source 6s ease-in-out infinite; }
.active .demo-source-row span:nth-child(2) { animation-delay: 2s; }
.active .demo-source-row span:nth-child(3) { animation-delay: 4s; }
.demo-document, .demo-success { min-height: 56px; margin-top: 8px; padding: 9px 11px; border-radius: 5px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 9px; align-items: center; background: #f3f5f7; }
.demo-document > svg:first-child { width: 20px; color: var(--coral); }
.demo-document > svg:last-child { width: 14px; color: #89929d; }
.demo-document strong, .demo-document small, .demo-success strong, .demo-success small { display: block; }
.demo-document strong, .demo-success strong { font-size: 12px; }
.demo-document small, .demo-success small { margin-top: 3px; color: #5d6874; font-size: 10px; }
.demo-success { opacity: .68; transform: translateY(8px); background: var(--mint-soft); }
.active .demo-success { animation: slider-success 6s ease infinite; }
.demo-success > span { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: white; background: var(--cobalt); font-weight: 800; }
.demo-success > svg { width: 14px; color: var(--mint); }
.demo-query { height: 50px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 18px 1fr 7px; gap: 9px; align-items: center; color: #4f5a66; font-size: 12px; }
.demo-query svg { width: 16px; }
.demo-query b { width: 6px; height: 18px; background: var(--cobalt); }
.active .demo-query b { animation: cursor-blink .8s steps(1) infinite; }
.demo-found { min-height: 72px; margin-top: 9px; padding: 10px; border-radius: 6px; display: grid; grid-template-columns: 42px 1fr 32px; gap: 10px; align-items: center; opacity: .68; transform: translateY(8px); background: var(--cobalt-soft); }
.active .demo-found { animation: slider-found 6s ease infinite; }
.demo-found > span { width: 42px; height: 48px; border-radius: 5px; display: grid; place-items: center; color: var(--cobalt); background: white; }
.demo-found > span svg { width: 19px; }
.demo-found small, .demo-found strong, .demo-found p { display: block; margin: 0; }
.demo-found small { color: var(--cobalt); font-size: 9px; font-weight: 850; }
.demo-found strong { margin-top: 3px; font-size: 12px; }
.demo-found p { margin-top: 3px; color: #5d6874; font-size: 10px; }
.demo-found button { width: 32px; height: 32px; border: 0; border-radius: 5px; display: grid; place-items: center; color: var(--cobalt); background: white; }
.demo-found button svg { width: 14px; }
.remind-demo { padding: 20px; }
.reminder-time { display: flex; align-items: center; gap: 7px; color: var(--cobalt); font-size: 10px; font-weight: 850; }
.reminder-time svg { width: 16px; }
.active .reminder-time svg { animation: bell-ring 1.5s ease 2; }
.remind-demo h4 { margin: 18px 0 8px; font-size: 20px; }
.remind-demo > p { margin: 0; color: var(--muted); font-size: 11px; }
.remind-demo > div:last-child { min-height: 44px; margin-top: 17px; padding: 0 8px 0 11px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; background: var(--amber-soft); }
.remind-demo > div:last-child span { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.remind-demo > div:last-child svg { width: 14px; }
.remind-demo > div:last-child button { height: 32px; padding: 0 10px; border: 0; border-radius: 5px; display: flex; align-items: center; gap: 4px; color: white; background: var(--cobalt); font-size: 10px; font-weight: 750; }
.experience-controls { min-height: 92px; padding: 0 var(--experience-edge); border-top: 1px solid #333841; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.experience-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.experience-tabs button { min-width: 0; height: 52px; padding: 0 11px; border: 0; border-radius: 6px; display: grid; grid-template-rows: 3px 1fr; gap: 5px; color: #9ea5ae; background: transparent; font-size: 11px; font-weight: 700; text-align: left; }
.experience-tabs button > span { width: 100%; height: 3px; overflow: hidden; border-radius: 2px; display: block; background: #3c424b; }
.experience-tabs button i { width: 0; height: 100%; display: block; background: #9db2ff; }
.experience-tabs button.active { color: white; }
.experience-tabs button.active i { animation: story-progress 6.5s linear forwards; }
.experience-slider.paused .experience-tabs button.active i { animation-play-state: paused; }
.experience-arrows { display: flex; gap: 6px; }
.experience-arrows button { width: 40px; height: 40px; padding: 0; border: 1px solid #464c55; border-radius: 6px; display: grid; place-items: center; color: white; background: #25292f; }
.experience-arrows button:hover { background: #333840; }
.experience-arrows svg { width: 17px; }
@keyframes slider-source { 0%, 28%, 100% { color: #68727e; border-color: var(--line); background: white; } 7%, 18% { color: var(--cobalt-dark); border-color: #8faaff; background: var(--cobalt-soft); } }
@keyframes slider-success { 0%, 24% { opacity: .68; transform: translateY(8px); } 38%, 88% { opacity: 1; transform: none; } 100% { opacity: .68; transform: translateY(8px); } }
@keyframes slider-found { 0%, 22% { opacity: .68; transform: translateY(8px); } 36%, 88% { opacity: 1; transform: none; } 100% { opacity: .68; transform: translateY(8px); } }
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes bell-ring { 20%, 60% { transform: rotate(12deg); } 40%, 80% { transform: rotate(-12deg); } }
@keyframes story-progress { to { width: 100%; } }

.privacy-band { min-height: 610px; position: relative; overflow: hidden; display: flex; align-items: center; color: white; background: var(--night); }
.privacy-band picture, .privacy-band picture::after, .privacy-band img { position: absolute; inset: 0; width: 100%; height: 100%; }
.privacy-band img { object-fit: cover; object-position: center; }
.privacy-band picture::after { content: ""; background: rgba(15, 19, 24, .56); }
.privacy-copy { width: min(540px, calc(100% - 56px)); margin-left: max(28px, calc((100vw - 1200px) / 2)); position: relative; z-index: 2; }
.privacy-copy .kicker { color: #dbe5ff; }
.privacy-copy h2 { margin: 0; font-size: 48px; }
.privacy-copy > p:not(.kicker) { margin: 20px 0 28px; color: rgba(255, 255, 255, .84); font-size: 16px; line-height: 1.65; }
.privacy-copy > div { display: flex; flex-wrap: wrap; gap: 10px; }
.privacy-copy > div span { min-height: 40px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 750; background: rgba(20, 25, 31, .25); }
.privacy-copy svg { width: 15px; }

.closing { padding: 92px max(28px, calc((100vw - 1200px) / 2)); display: flex; align-items: end; justify-content: space-between; gap: 40px; background: #dce5ff; }
.closing h2 { margin: 0; font-size: 48px; line-height: 1.06; }
.closing-actions { display: flex; flex-wrap: wrap; gap: 9px; }
footer { min-height: 150px; padding: 34px max(28px, calc((100vw - 1200px) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; color: #aab1ba; background: var(--night); font-size: 12px; }

.product-file { animation: file-scan 12.6s ease-in-out infinite; }
.product-file:nth-child(5) { animation-delay: 4.2s; }
.product-file:nth-child(7) { animation-delay: 8.4s; }
@keyframes file-scan { 0%, 28%, 100% { background: transparent; transform: translateX(0); } 8%, 18% { background: #f0f4ff; transform: translateX(4px); } }
footer .brand { color: white; }
footer > div p { margin: 9px 0 0; }
footer > span { text-align: center; }
footer nav { display: flex; justify-content: flex-end; gap: 22px; }
footer a { color: #b4bbc4; text-decoration: none; }

.login-dialog { width: min(820px, calc(100% - 32px)); min-height: 560px; padding: 0; overflow: hidden; border: 0; border-radius: 8px; color: var(--ink); background: white; box-shadow: 0 35px 100px rgba(0, 0, 0, .35); }
.login-dialog::backdrop { background: rgba(18, 22, 29, .7); backdrop-filter: blur(5px); }
.login-dialog[open] { display: grid; grid-template-columns: .82fr 1.18fr; }
.login-aside { padding: 46px 38px; color: white; background: var(--cobalt); }
.login-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 90px; font-size: 20px; }
.login-brand svg { width: 31px; fill: white; }
.login-brand svg path { fill: var(--cobalt); }
.login-aside h2 { margin: 0; font-size: 31px; line-height: 1.1; }
.login-aside ul { margin: 35px 0 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.login-aside li { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .82); font-size: 11px; }
.login-aside li svg { width: 15px; color: #d9ff74; }
.login-main { position: relative; padding: 62px 52px 34px; }
.login-close { position: absolute; top: 14px; right: 14px; }
.step-label { margin: 0 0 9px; color: var(--cobalt); font-size: 10px; font-weight: 850; }
.login-main h2 { margin: 0; font-size: 31px; }
.step-copy { margin: 10px 0 23px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-tabs { height: 45px; margin-bottom: 14px; padding: 3px; border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; background: #eef1f4; }
.auth-tabs button { border: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; }
.auth-tabs button.active { color: var(--ink); background: white; box-shadow: 0 1px 5px rgba(28, 35, 44, .1); }
.auth-tabs svg { width: 15px; }
.phone-field { height: 52px; margin-bottom: 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 158px minmax(0, 1fr); align-items: stretch; background: white; }
.phone-field select { min-width: 0; width: 100%; height: 50px; padding: 0 28px 0 10px; border: 0; border-right: 1px solid var(--line); outline: 0; color: var(--ink); background: white; font-size: 12px; line-height: normal; }
.phone-field input, .login-input { min-width: 0; width: 100%; height: 51px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.phone-field input { height: 50px; border: 0; border-radius: 0; outline: 0; }
.phone-field:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(30, 94, 255, .1); }
.login-input { margin-bottom: 11px; }
.otp-input { width: 100%; height: 62px; margin: 8px 0 13px; border: 1px solid var(--line); border-radius: 6px; text-align: center; font-family: ui-monospace, monospace; font-size: 25px; font-weight: 800; letter-spacing: 10px; }
.back-button, .resend-button { padding: 0; border: 0; color: var(--cobalt); background: transparent; font-size: 12px; font-weight: 750; }
.back-button { margin: 0 0 34px; display: flex; align-items: center; gap: 6px; }
.back-button svg { width: 14px; }
.resend-button { margin: 17px auto 0; display: block; }
.resend-button:disabled { color: #949ca6; }
.profile-checks { margin: 18px 0; display: grid; gap: 7px; }
.profile-checks button { min-height: 58px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: 22px 1fr 17px; gap: 9px; align-items: center; background: white; text-align: left; }
.profile-checks svg { width: 17px; }
.profile-checks strong, .profile-checks small { display: block; }
.profile-checks strong { font-size: 12px; }
.profile-checks small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.profile-checks button.verified { border-color: #9ed6c5; background: var(--mint-soft); }
#profile-form label { font-size: 11px; font-weight: 750; }
.form-message { min-height: 18px; margin: 10px 0 0; color: #af4033; font-size: 10px; text-align: center; }
.login-privacy { margin: 16px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #717b86; font-size: 10px; }
.login-privacy svg { width: 12px; }

.story-feature.revealed, .experience-heading.revealed, .privacy-copy.revealed { animation: reveal-up .6s cubic-bezier(.2, .7, .2, 1) both; }
.story-feature:nth-child(2).revealed, .moment-grid article:nth-child(2).revealed { animation-delay: .08s; }
.moment-grid article:nth-child(3).revealed { animation-delay: .16s; }
@keyframes reveal-up { from { opacity: .85; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (max-width: 1050px) {
    .hero { grid-template-columns: minmax(330px, .8fr) minmax(500px, 1.2fr); gap: 30px; }
    .hero h1 { font-size: 55px; }
    .message-card { right: -5px; }
    .story-send { grid-column: span 6; }
    .story-understand { grid-column: span 6; }
}

@media (max-width: 900px) {
    .public-header nav, .header-whatsapp { display: none; }
    .hero { min-height: 1040px; padding-top: 116px; grid-template-columns: 1fr; align-content: start; }
    .hero-copy { max-width: 680px; }
    .hero-product { width: min(690px, 100%); margin: 0 auto; }
    .hero-scene { inset: 20px 0 25px; }
    .product-window { min-height: 440px; }
    .product-shell { min-height: 406px; }
    .proof-strip { align-items: start; flex-direction: column; }
    .proof-strip > div { justify-content: flex-start; }
    .story-send, .story-understand, .story-find { grid-column: span 12; }
    .story-find { grid-template-columns: 55px minmax(190px, .7fr) 1.3fr; }
    .section-intro.compact { display: block; }
    .moment-grid { grid-template-columns: 1fr; }
    .moment-grid article { min-height: 220px; }
    .moment-icon { margin-bottom: 34px; }
    .experience-section { --experience-edge: 24px; padding: 88px 0 0; }
    .experience-heading { width: calc(100% - 48px); }
    .experience-heading { align-items: start; flex-direction: column; gap: 18px; }
    .experience-heading h2 { font-size: 42px; }
    .experience-slides { height: 620px; }
    .experience-copy { left: 34px; top: 34px; }
    .experience-slide:first-child .experience-copy { right: 34px; }
    .experience-demo { left: 34px; bottom: 34px; }
    .experience-slide:first-child .experience-demo { right: 34px; }
    .closing { align-items: start; flex-direction: column; }
}

@media (max-width: 640px) {
    .public-header { height: 62px; padding: 0 16px; }
    .public-header .brand-mark { width: 30px; height: 30px; }
    .public-header .brand-name { font-size: 21px; }
    .public-header .button { width: 40px; min-height: 40px; padding: 0; }
    .public-header .button span { display: none; }
    .hero { height: 760px; min-height: 0; padding: 86px 16px 38px; display: block; }
    .hero::after { height: 42px; }
    .hero-copy-stage { min-height: 176px; }
    .hero h1, .hero-copy-slide h2 { font-size: 42px; line-height: 1.02; }
    .hero-detail { margin-top: 14px; font-size: 13px; line-height: 1.5; }
    .hero-actions { margin-top: 16px; }
    .hero-actions .button { min-height: 45px; }
    .hero-actions .button-secondary { display: none; }
    .hero-note { margin-top: 12px; }
    .hero-story-controls { margin-top: 13px; gap: 10px; }
    .hero-story-controls button { height: 32px; gap: 5px; font-size: 9px; }
    .hero-story-count { font-size: 9px; }
    .hero-story-count b { font-size: 13px; }
    .hero-product { margin-top: 19px; padding: 0 0 40px; }
    .hero-product { height: 318px; }
    .hero-scene { inset: 0 0 40px; }
    .product-window { height: 278px; min-height: 278px; transform: none; }
    .product-chrome { height: 25px; }
    .product-shell { min-height: 253px; grid-template-columns: 42px 1fr; }
    .product-sidebar { padding: 12px 5px; }
    .mini-brand { margin: 0 auto 25px; }
    .mini-brand svg { width: 23px; }
    .mini-brand strong, .product-sidebar > span { font-size: 0; }
    .product-sidebar > span { min-height: 34px; padding: 0; justify-content: center; }
    .product-sidebar svg { width: 14px; }
    .product-main { padding: 12px; }
    .product-top label { height: 28px; }
    .product-top > b { width: 26px; height: 26px; }
    .product-heading { margin: 14px 0 10px; }
    .product-heading h2 { font-size: 15px; }
    .product-heading button { width: 28px; padding: 0; font-size: 0; justify-content: center; }
    .product-file { min-height: 39px; grid-template-columns: 27px 1fr 13px; gap: 8px; }
    .file-tile { width: 29px; height: 34px; font-size: 8px; }
    .product-file strong { font-size: 9px; }
    .message-card { left: auto; right: -4px; bottom: 0; width: min(245px, calc(100% - 54px)); min-height: 123px; padding: 12px; }
    .message-card > p { margin: 8px 0; font-size: 11px; }
    .message-file { min-height: 38px; }
    .facts span { padding: 7px; }
    .demo-control { left: 2px; bottom: 4px; flex-direction: column; }
    .demo-control button { width: 28px; padding: 0; justify-content: center; font-size: 0; }
    .demo-control button span { font-size: 9px; }
    .intelligence-canvas, .reminder-canvas { height: 278px; }
    .canvas-head { height: 38px; padding: 0 10px; font-size: 9px; }
    .canvas-head b { width: 21px; height: 21px; font-size: 11px; }
    .intelligence-map { height: 240px; }
    .intel-document { width: 102px; height: 153px; left: 12px; top: 26px; padding: 31px 9px 10px; }
    .intel-document > svg { width: 28px; height: 28px; margin-bottom: 16px; }
    .intel-document strong { font-size: 9px; }
    .intel-document small { font-size: 8px; }
    .scan-line { animation-name: scan-document-mobile; }
    .intel-node { width: 205px; min-height: 38px; right: 10px; left: auto; padding: 5px 8px; gap: 7px; }
    .intel-node > svg { width: 13px; }
    .intel-node strong { margin-top: 2px; font-size: 9px; }
    .intel-node small { font-size: 7px; }
    .node-person { top: 9px; }
    .node-date { top: 51px; }
    .node-type { top: 93px; }
    .node-action { top: 135px; }
    .intel-link { display: none; }
    .intel-ready { min-height: 42px; left: 12px; right: 10px; bottom: 8px; width: auto; grid-template-columns: 20px 1fr 13px; }
    .intel-ready strong { font-size: 9px; }
    .intel-ready small { font-size: 8px; }
    .timeline-track { margin: 34px 24px 0; }
    .timeline-labels { margin: 10px 12px 0; }
    .timeline-labels strong { font-size: 8px; }
    .deadline-card { width: calc(100% - 24px); min-height: 124px; margin-top: 18px; padding: 12px; grid-template-columns: 34px 1fr; gap: 9px; }
    .deadline-icon { width: 34px; height: 34px; }
    .deadline-card h3 { margin: 5px 0 4px; font-size: 13px; }
    .deadline-card p { font-size: 9px; }
    .deadline-card button { height: 29px; grid-column: 2; justify-self: start; font-size: 9px; }
    .document-chip { display: none; }
    .hero-next { display: none; }
    .proof-strip { padding: 22px 16px 25px; gap: 16px; }
    .proof-strip p { font-size: 11px; }
    .proof-strip > div { gap: 11px 16px; }
    .proof-strip span { font-size: 10px; }
    .product-story, .moments { padding: 72px 16px; }
    .section-intro h2, .privacy-copy h2, .closing h2 { font-size: 34px; }
    .section-intro > p:last-child { font-size: 13px; }
    .story-grid { margin-top: 38px; }
    .story-feature { min-height: 390px; padding: 20px; }
    .story-feature h3 { font-size: 21px; }
    .story-find { min-height: 385px; grid-template-columns: 30px 1fr; grid-template-rows: auto 1fr; align-items: start; }
    .story-find .find-scene { grid-column: 1 / 3; }
    .detail-scene { padding: 14px; grid-template-columns: 42px 1fr; gap: 12px; }
    .detail-file { width: 42px; height: 52px; }
    .detail-scene > div:nth-of-type(2) { grid-column: 2; }
    .detail-scene > div:nth-of-type(3) { grid-column: 2; }
    .ready-pill { grid-column: 1 / 3; }
    .find-scene { padding: 14px; }
    .find-result { grid-template-columns: 38px 1fr 30px; gap: 8px; }
    .find-result > span { width: 38px; height: 45px; }
    .moment-grid { margin-top: 34px; }
    .moment-grid article { min-height: 225px; }
    .experience-section { --experience-edge: 16px; padding: 68px 0 0; }
    .experience-heading { width: calc(100% - 32px); }
    .experience-heading { margin-bottom: 30px; gap: 13px; }
    .experience-heading h2 { font-size: 34px; }
    .experience-heading > p { max-width: none; font-size: 13px; }
    .experience-slides { height: 630px; }
    .experience-slide:nth-child(1) > img { object-position: 34% center; }
    .experience-slide:nth-child(2) > img, .experience-slide:nth-child(3) > img { object-position: 62% center; }
    .experience-overlay { background: rgba(12, 17, 24, .48); }
    .experience-copy, .experience-slide:first-child .experience-copy { left: 20px; right: 20px; top: 24px; max-width: 330px; }
    .experience-copy h3 { margin: 9px 0 11px; font-size: 34px; }
    .experience-copy p { max-width: 300px; font-size: 13px; }
    .experience-demo, .experience-slide:first-child .experience-demo { left: 16px; right: 16px; bottom: 20px; width: auto; padding: 13px; }
    .remind-demo { padding: 17px; }
    .remind-demo h4 { font-size: 18px; }
    .experience-controls { min-height: 105px; padding: 10px 12px; align-items: stretch; gap: 8px; }
    .experience-tabs { gap: 2px; }
    .experience-tabs button { height: 72px; padding: 0 5px; font-size: 10px; line-height: 1.25; }
    .experience-arrows { align-items: center; }
    .experience-arrows button { width: 34px; height: 34px; }
    .memory-slider { padding: 68px 0; }
    .memory-slider-heading { width: calc(100% - 32px); margin-bottom: 34px; display: block; }
    .memory-slider-heading h2 { font-size: 34px; }
    .memory-group > span { width: 230px; height: 58px; padding: 0 14px; font-size: 12px; }
    .privacy-band { min-height: 570px; align-items: end; }
    .privacy-band img { object-position: center top; }
    .privacy-copy { width: auto; margin: 0 16px 58px; }
    .privacy-copy > p:not(.kicker) { font-size: 12px; }
    .closing { padding: 68px 16px; }
    .closing-actions, .closing-actions .button { width: 100%; }
    footer { padding: 32px 16px; grid-template-columns: 1fr; gap: 20px; text-align: center; }
    footer .brand, footer nav { justify-self: center; }
    footer nav { justify-content: center; }
    .login-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
    .login-dialog[open] { display: block; }
    .login-aside { display: none; }
    .login-main { min-height: 100%; padding: 76px 22px 28px; }
    .login-main::before { content: "nest"; position: absolute; top: 28px; left: 22px; color: var(--ink); font-size: 21px; font-weight: 760; }
    .phone-field { grid-template-columns: 145px minmax(0, 1fr); }
    .phone-field select { padding-left: 9px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    .product-window, .story-feature, .experience-heading, .privacy-copy { opacity: 1; transform: none; }
    .experience-slide > img { transform: none; }
    .experience-tabs button.active i { width: 100%; }
    .hero-copy-slide, .hero-scene { transform: none; }
    .hero-story-controls button.active > i::after { width: 100%; }
}

@keyframes scan-document-mobile { 0%, 100% { top: 16px; opacity: .35; } 50% { top: 126px; opacity: 1; } }