:root {
  --paper: #ece5d7;
  --surface: #fffdf8;
  --navy: #0e1728;
  --navy-2: #17243a;
  --navy-soft: #344158;
  --green: #43bf12;
  --green-dark: #287f0b;
  --green-soft: #d7f4cb;
  --line: #bdb7aa;
  --shadow: 0 24px 52px rgba(14, 23, 40, .2), 0 5px 14px rgba(14, 23, 40, .11);
}

* { box-sizing: border-box; }
html { height: 100%; overflow-y: auto; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  background: var(--paper);
  color: var(--navy);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}
button, a { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(67,191,18,.35); outline-offset: 4px; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.landing { height: 100svh; overflow: hidden; }

.topbar,
.legal-header {
  align-items: center;
  background: transparent;
  border-bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0 auto;
  max-width: 1360px;
  min-height: 72px;
  padding: 0 30px;
}
.brand { align-items: center; display: inline-flex; justify-self: start; text-decoration: none; }
.brand-crop { display: block; height: 57px; overflow: hidden; position: relative; width: 225px; }
.brand-logo { display: block; height: auto; transform: translate(-5.5px, -11px); width: 230px; }
.try-button { align-items: center; background: var(--surface); border: 2px solid var(--navy); border-radius: 10px; box-shadow: 4px 4px 0 var(--green); color: var(--navy); cursor: default; display: inline-flex; font-size: 13px; font-weight: 850; gap: 10px; justify-self: end; min-height: 47px; padding: 10px 14px; }
.try-button::after { align-items: center; background: var(--green); border: 1px solid var(--navy); border-radius: 6px; content: "↗"; display: inline-flex; font-size: 13px; height: 23px; justify-content: center; width: 23px; }

.hero-shell { display: flex; flex-direction: column; height: calc(100svh - 72px); justify-content: space-between; margin: 0 auto; max-width: 1300px; padding: 22px 30px; }
.hero-copy { max-width: 1120px; padding: 0 34px 28px; }
.eyebrow { color: var(--green-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 850; letter-spacing: .13em; margin: 0 0 21px; }
.hero-copy h1 { font-size: clamp(58px, 6vw, 82px); font-weight: 700; letter-spacing: -.067em; line-height: .94; margin: 0; }
.hero-copy h1 > span { display: block; white-space: nowrap; }
.line-word { cursor: pointer; display: inline-block; height: .86em; margin: 0 .015em; outline: none; position: relative; vertical-align: -.09em; width: 3.4em; }
.line-word:focus-visible { border-radius: .12em; outline: 3px solid rgba(67,191,18,.42); outline-offset: .08em; }
.line-vector { display: block; height: 100%; overflow: visible; width: 100%; }
.line-vector path { fill: none; stroke: var(--navy); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.4; vector-effect: non-scaling-stroke; }
.line-vector circle { fill: var(--green); }
.line-sketch { stroke-dasharray: 1; stroke-dashoffset: 0; }
.line-dot { opacity: 1; transform-box: view-box; transform-origin: 138px 38px; }
.line-word.is-playing .line-sketch { animation: lineSketchCycle 6s linear both; }
.line-word.is-playing .line-dot { animation: lineDotCycle 6s linear both; }
.hero-description { color: var(--navy-soft); font-size: 16px; line-height: 1.65; margin: 26px 0 0; max-width: 820px; }

.showcase-stack { flex: 0 0 auto; }
.transfer-showcase { position: relative; }
.card-stage { align-items: start; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 14px; position: relative; top: -10px; }
.story-card {
  background: var(--surface);
  border: 2px solid var(--navy);
  border-radius: 16px;
  box-shadow: 5px 6px 0 rgba(14,23,40,.12);
  height: 310px;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 100%;
}
.story-card > header, .story-card > footer { align-items: center; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; justify-content: space-between; }
.story-card > header { background: var(--green); border-bottom: 2px solid var(--navy); color: var(--navy); font-size: 10px; font-weight: 900; letter-spacing: .08em; min-height: 44px; padding: 0 15px; }
.story-card > footer { background: var(--surface); border-top: 1px solid var(--navy); bottom: 0; color: var(--navy-soft); font-size: 9px; font-weight: 750; left: 0; letter-spacing: .04em; padding: 11px 15px; position: absolute; right: 0; }
.card-body { padding: 15px 15px 43px; }
.card-body > p { color: var(--navy); font-size: 14px; font-weight: 760; margin: 0 0 13px; }
.live-dot { background: var(--navy); border: 2px solid white; border-radius: 50%; height: 9px; width: 9px; }
.nearby-card { animation: focusFirstCard 14s ease-in-out infinite; margin-top: 20px; }
.files-card { animation: focusSecondCard 14s ease-in-out infinite; }
.route-card { animation: focusThirdCard 14s ease-in-out infinite; }
.receive-card { animation: focusFourthCard 14s ease-in-out infinite; margin-top: 20px; }

.device-row { align-items: center; background: white; border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 10px; margin-bottom: 9px; padding: 9px; }
.device-icon { align-items: center; background: #eee9df; border-radius: 8px; display: flex; height: 42px; justify-content: center; width: 42px; }
.device-icon svg { fill: none; height: 28px; stroke: var(--navy); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 28px; }
.device-row div { flex: 1; }.device-row strong { display: block; font-size: 13px; }.device-row small { align-items: center; color: #566174; display: flex; font-size: 10px; gap: 4px; margin-top: 3px; }.device-row small i { background: var(--green); border-radius: 50%; height: 6px; width: 6px; }.device-row b { align-items: center; background: var(--navy); border-radius: 50%; color: white; display: flex; font-size: 9px; height: 19px; justify-content: center; opacity: 0; transform: scale(.4); width: 19px; }
.selection-target { animation: selectDevice 14s ease-in-out infinite; }
.selection-target b { animation: revealDeviceCheck 14s ease-in-out infinite; }

.file-row { align-items: center; background: white; border: 1px solid transparent; border-bottom-color: var(--line); display: flex; gap: 9px; padding: 9px 7px; position: relative; }
.file-row.faded { opacity: .82; }
.file-row > span { align-items: center; background: var(--green-soft); border-radius: 7px; display: flex; height: 34px; justify-content: center; width: 34px; }
.file-row svg, .notice-icon svg { fill: none; height: 20px; stroke: var(--navy); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 20px; }
.file-row > div { flex: 1; }.file-row strong { display: block; font-size: 12px; }.file-row small { color: #566174; display: block; font-size: 9px; margin-top: 3px; }
.file-row b { align-items: center; background: var(--navy); border-radius: 50%; color: white; display: flex; font-size: 8px; height: 19px; justify-content: center; opacity: 0; transform: scale(.4); width: 19px; }
.file-target { animation: selectFile 14s ease-in-out infinite; }
.file-target b { animation: revealFileCheck 14s ease-in-out infinite; }

.secure-label { background: var(--navy); border-radius: 99px; color: white; font-size: 8px; padding: 5px 8px; }
.route-body { padding-top: 20px; }
.mini-route { align-items: center; display: grid; gap: 12px; grid-template-columns: 50px 1fr 50px; margin-top: 27px; }
.mini-route > span { align-items: center; background: white; border: 1px solid var(--navy); border-radius: 12px; display: flex; height: 50px; justify-content: center; }
.mini-route svg { fill: none; height: 30px; stroke: var(--navy); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 30px; }
.mini-route > i { border-top: 2px dashed var(--navy); display: block; position: relative; }
.mini-route > i::after { border-bottom: 4px solid transparent; border-left: 7px solid var(--navy); border-top: 4px solid transparent; content: ""; position: absolute; right: -1px; top: -5px; }
.mini-route > i b { animation: routeDotCycle 14s linear infinite; background: var(--green); border: 3px solid white; border-radius: 50%; height: 13px; left: 0; opacity: 0; position: absolute; top: -7px; width: 13px; }
.progress-meta { display: flex; font-size: 10px; justify-content: space-between; margin-top: 31px; }.progress-meta span { color: #566174; }.progress-meta strong { color: var(--green-dark); }
.progress-track { background: #cfc9bd; border: 1px solid var(--navy); height: 8px; margin-top: 8px; overflow: hidden; }.progress-track i { animation: transferProgress 14s ease-in-out infinite; background: var(--green); display: block; height: 100%; width: 0; }

.notification-stack { min-height: 144px; position: relative; }
.receive-notification { align-items: center; background: white; border: 1px solid var(--navy); border-radius: 11px; box-shadow: 0 8px 18px rgba(14,23,40,.11); display: flex; gap: 10px; left: 0; opacity: 0; padding: 10px; position: absolute; right: 0; transform: translateY(14px) scale(.97); }
.file-notification { animation: fileNotification 14s ease-in-out infinite; top: 0; }
.message-notification { animation: messageNotification 14s ease-in-out infinite; top: 75px; }
.notice-icon, .message-icon { align-items: center; background: var(--green-soft); border-radius: 8px; display: flex; flex: 0 0 auto; height: 40px; justify-content: center; width: 40px; }
.message-icon { background: var(--navy); color: var(--green); font-size: 21px; font-weight: 900; }
.receive-notification > div { flex: 1; min-width: 0; }.receive-notification strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.receive-notification small { color: #566174; display: block; font-size: 9px; margin-top: 4px; }.receive-notification > b { color: var(--green-dark); font-size: 8px; }
.delivered-status { align-items: center; animation: deliveredStatus 14s ease-in-out infinite; color: var(--green-dark); display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; gap: 7px; opacity: 0; }.delivered-status i { background: var(--green); border-radius: 50%; height: 7px; width: 7px; }

.demo-cursor { height: 31px; opacity: 0; pointer-events: none; position: absolute; right: -14px; top: 72px; width: 29px; z-index: 20; }
.demo-cursor svg { display: block; filter: drop-shadow(2px 2px 0 rgba(14,23,40,.18)); height: 100%; overflow: visible; width: 100%; }
.demo-cursor svg path { fill: white; stroke: var(--navy); stroke-linejoin: round; stroke-width: 2; }
.demo-cursor i { border: 2px solid var(--green); border-radius: 50%; height: 16px; left: -5px; opacity: 0; position: absolute; top: -5px; width: 16px; }
.device-cursor { animation: deviceCursorCycle 14s ease-in-out infinite; }
.device-cursor i { animation: deviceCursorClick 14s ease-out infinite; }
.file-cursor { animation: fileCursorCycle 14s ease-in-out infinite; }
.file-cursor i { animation: fileCursorClick 14s ease-out infinite; }

.site-footer { align-items: center; border-top: 1px solid rgba(14,23,40,.3); color: var(--navy-soft); display: grid; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; gap: 24px; grid-template-columns: 1fr auto auto; margin: 56px 8px 0; padding: 12px 6px 0; }
.site-footer p, .site-footer small { font-size: inherit; margin: 0; }
.site-footer nav { display: flex; gap: 17px; }
.site-footer a { border-bottom: 1px solid rgba(14,23,40,.4); text-decoration: none; }

.legal-page { min-height: 100svh; }
.legal-back { align-items: center; background: var(--surface); border: 2px solid var(--navy); border-radius: 10px; box-shadow: 4px 4px 0 var(--green); display: inline-flex; font-size: 13px; font-weight: 850; gap: 9px; justify-self: end; min-height: 47px; padding: 10px 14px; text-decoration: none; }
.legal-back span { color: var(--green-dark); font-size: 17px; line-height: 1; }
.legal-main { margin: 0 auto; max-width: 1300px; padding: 54px 30px 80px; }
.legal-intro { max-width: 1120px; }
.legal-label { color: var(--green-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 900; letter-spacing: .14em; margin: 0 0 17px; }
.legal-intro h1 { font-size: clamp(48px, 6vw, 78px); letter-spacing: -.06em; line-height: .96; margin: 0; max-width: 1000px; }
.legal-intro h1.legal-title-single { font-size: clamp(44px, 5vw, 72px); max-width: none; white-space: nowrap; }
.legal-intro > p:not(.legal-label) { color: var(--navy-soft); font-size: 17px; line-height: 1.65; margin: 25px 0 0; max-width: 760px; }
.legal-intro small { background: var(--green-soft); border: 1px solid var(--navy); border-radius: 99px; display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; margin-top: 22px; padding: 7px 10px; }
.legal-layout { align-items: start; display: grid; gap: 36px; grid-template-columns: 210px minmax(0, 1fr); margin-top: 54px; }
.legal-index { position: sticky; top: 26px; }
.legal-index > strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .12em; margin-bottom: 15px; text-transform: uppercase; }
.legal-index nav { display: grid; gap: 2px; }
.legal-index a { align-items: baseline; border-radius: 7px; color: var(--navy-soft); display: grid; font-size: 12px; gap: 9px; grid-template-columns: 24px 1fr; line-height: 1.3; padding: 8px 7px; text-decoration: none; }
.legal-index a:hover { background: rgba(255,255,255,.55); color: var(--navy); }
.legal-index a span { color: var(--green-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 850; }
.legal-document { background: var(--surface); border: 2px solid var(--navy); border-radius: 16px; border-top: 10px solid var(--green); box-shadow: 7px 8px 0 rgba(14,23,40,.13); overflow: hidden; }
.legal-document section { border-bottom: 1px solid rgba(14,23,40,.22); padding: 34px 38px 36px; scroll-margin-top: 24px; }
.legal-document section:last-child { border-bottom: 0; }
.legal-section-heading { align-items: baseline; display: grid; gap: 14px; grid-template-columns: 32px 1fr; }
.legal-section-heading > span { color: var(--green-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 900; }
.legal-section-heading h2 { font-size: 24px; letter-spacing: -.035em; line-height: 1.15; margin: 0; }
.legal-section-copy { margin: 18px 0 0 46px; max-width: 680px; }
.legal-section-copy p { color: var(--navy-soft); font-size: 15px; line-height: 1.72; margin: 0 0 14px; }
.legal-section-copy p:last-child { margin-bottom: 0; }
.legal-section-copy a { color: var(--navy); font-weight: 750; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal-footer { align-items: center; border-top: 1px solid rgba(14,23,40,.3); color: var(--navy-soft); display: grid; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; gap: 24px; grid-template-columns: 1fr auto auto; margin: 0 auto; max-width: 1300px; padding: 18px 30px 28px; }
.legal-footer p, .legal-footer small { font-size: inherit; margin: 0; }
.legal-footer nav { display: flex; gap: 17px; }
.legal-footer a { border-bottom: 1px solid rgba(14,23,40,.4); text-decoration: none; }

.updates-page { min-height: 100vh; }
.updates-main { margin: 0 auto; max-width: 940px; padding: 52px 30px 88px; }
.updates-intro-simple { max-width: 720px; }
.updates-intro-simple h1 { font-size: clamp(58px, 8vw, 88px); letter-spacing: -.07em; line-height: .92; margin: 14px 0 0; }
.updates-intro-simple > p:not(.legal-label) { color: var(--navy-soft); font-size: 17px; line-height: 1.6; margin: 24px 0 0; max-width: 650px; }
.change-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.change-badge { border: 1px solid var(--navy); border-radius: 99px; display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 900; letter-spacing: .05em; padding: 6px 9px; text-transform: uppercase; white-space: nowrap; }
.change-badge.is-update { background: var(--navy); color: white; }
.change-badge.is-enhancement { background: #f2cf68; }
.change-badge.is-new { background: var(--green); }
.change-badge.is-fix { background: #ffe0d8; color: #812f20; }
.changelog-list { list-style: none; margin: 54px 0 0; padding: 0 0 0 42px; position: relative; }
.changelog-list::before { background: rgba(14,23,40,.7); bottom: 28px; content: ""; left: 8px; position: absolute; top: 28px; width: 2px; }
.changelog-list > li { margin: 0 0 20px; position: relative; }
.changelog-list > li:last-child { margin-bottom: 0; }
.changelog-dot { background: var(--surface); border: 2px solid var(--navy); border-radius: 50%; height: 16px; left: -41px; position: absolute; top: 25px; width: 16px; z-index: 2; }
.changelog-dot.is-new { background: var(--green); }
.changelog-dot.is-enhancement { background: #f2cf68; }
.changelog-dot.is-update { background: var(--navy); }
.changelog-dot.is-fix { background: #ffe0d8; }
.change-card { background: var(--surface); border: 1.5px solid var(--navy); border-radius: 13px; padding: 22px 24px 24px; }
.changelog-list > li:last-child .change-card { box-shadow: 4px 5px 0 var(--green); }
.change-meta { align-items: center; display: flex; gap: 11px; justify-content: space-between; }
.change-meta time { color: var(--navy-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 750; }
.change-card h2 { font-size: 26px; letter-spacing: -.04em; line-height: 1.1; margin: 18px 0 0; }
.change-card > p { color: var(--navy-soft); font-size: 14px; line-height: 1.55; margin: 10px 0 0; }
.change-card ul { border-top: 1px solid rgba(14,23,40,.2); display: grid; gap: 9px; list-style: none; margin: 18px 0 0; padding: 17px 0 0; }
.change-card ul li { color: var(--navy-soft); font-size: 12px; line-height: 1.5; padding-left: 18px; position: relative; }
.change-card ul li::before { background: var(--green); border: 1px solid var(--navy); border-radius: 50%; content: ""; height: 7px; left: 0; position: absolute; top: 5px; width: 7px; }

@keyframes focusFirstCard {
  0%, 22%, 100% { border-color: var(--green-dark); box-shadow: 0 0 0 3px var(--green), 7px 8px 0 rgba(14,23,40,.14); opacity: 1; top: -10px; z-index: 10; }
  25%, 99% { border-color: var(--navy); box-shadow: 5px 6px 0 rgba(14,23,40,.12); opacity: 1; top: 0; z-index: 1; }
}
@keyframes focusSecondCard {
  0%, 23%, 100% { border-color: var(--navy); box-shadow: 4px 5px 0 rgba(14,23,40,.08); opacity: .62; top: 0; z-index: 1; }
  26%, 47% { border-color: var(--green-dark); box-shadow: 0 0 0 3px var(--green), 7px 8px 0 rgba(14,23,40,.14); opacity: 1; top: -10px; z-index: 10; }
  50%, 99% { border-color: var(--navy); box-shadow: 5px 6px 0 rgba(14,23,40,.12); opacity: 1; top: 0; z-index: 1; }
}
@keyframes focusThirdCard {
  0%, 48%, 100% { border-color: var(--navy); box-shadow: 4px 5px 0 rgba(14,23,40,.08); opacity: .62; top: 0; z-index: 1; }
  51%, 72% { border-color: var(--green-dark); box-shadow: 0 0 0 3px var(--green), 7px 8px 0 rgba(14,23,40,.14); opacity: 1; top: -10px; z-index: 10; }
  75%, 99% { border-color: var(--navy); box-shadow: 5px 6px 0 rgba(14,23,40,.12); opacity: 1; top: 0; z-index: 1; }
}
@keyframes focusFourthCard {
  0%, 73%, 100% { border-color: var(--navy); box-shadow: 4px 5px 0 rgba(14,23,40,.08); opacity: .62; top: 0; z-index: 1; }
  76%, 97% { border-color: var(--green-dark); box-shadow: 0 0 0 3px var(--green), 7px 8px 0 rgba(14,23,40,.14); opacity: 1; top: -10px; z-index: 10; }
  99% { border-color: var(--navy); box-shadow: 5px 6px 0 rgba(14,23,40,.12); opacity: 1; top: 0; z-index: 1; }
}
@keyframes deviceCursorCycle {
  0%, 1%, 100% { opacity: 0; right: -14px; top: 72px; transform: scale(1); }
  2% { opacity: 1; right: -8px; top: 76px; transform: scale(1); }
  6.5% { opacity: 1; right: 11px; top: 181px; transform: scale(1); }
  7.5% { opacity: 1; right: 11px; top: 181px; transform: scale(.82); }
  8.5% { opacity: 1; right: 11px; top: 181px; transform: scale(1); }
  9.2% { opacity: 0; right: 11px; top: 181px; transform: scale(1); }
}
@keyframes deviceCursorClick {
  0%, 6.5%, 9%, 100% { opacity: 0; transform: scale(.35); }
  7.2% { opacity: 1; transform: scale(.55); }
  8.7% { opacity: 0; transform: scale(2.1); }
}
@keyframes fileCursorCycle {
  0%, 24%, 100% { opacity: 0; right: -14px; top: 72px; transform: scale(1); }
  25.5% { opacity: 1; right: -8px; top: 76px; transform: scale(1); }
  30% { opacity: 1; right: 11px; top: 105px; transform: scale(1); }
  31% { opacity: 1; right: 11px; top: 105px; transform: scale(.82); }
  32% { opacity: 1; right: 11px; top: 105px; transform: scale(1); }
  33.2% { opacity: 0; right: 11px; top: 105px; transform: scale(1); }
}
@keyframes fileCursorClick {
  0%, 30%, 33%, 100% { opacity: 0; transform: scale(.35); }
  30.7% { opacity: 1; transform: scale(.55); }
  32.2% { opacity: 0; transform: scale(2.1); }
}
@keyframes selectDevice {
  0%, 5% { background: white; border-color: var(--line); box-shadow: none; }
  8%, 99% { background: var(--green-soft); border-color: var(--navy); box-shadow: inset 4px 0 0 var(--green); }
  100% { background: white; border-color: var(--line); box-shadow: none; }
}
@keyframes revealDeviceCheck {
  0%, 6% { opacity: 0; transform: scale(.4); }
  9%, 99% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes selectFile {
  0%, 28% { background: white; border-color: transparent; border-bottom-color: var(--line); }
  31%, 99% { background: var(--green-soft); border-color: var(--navy); }
  100% { background: white; border-color: transparent; border-bottom-color: var(--line); }
}
@keyframes revealFileCheck {
  0%, 29% { opacity: 0; transform: scale(.4); }
  32%, 99% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes routeDotCycle {
  0%, 51% { left: 0; opacity: 0; }
  53% { left: 0; opacity: 1; }
  72%, 99% { left: calc(100% - 10px); opacity: 1; }
  100% { left: 0; opacity: 0; }
}
@keyframes transferProgress {
  0%, 51% { width: 0; }
  54% { width: 5%; }
  72%, 99% { width: 100%; }
  100% { width: 0; }
}
@keyframes fileNotification {
  0%, 76% { opacity: 0; transform: translateY(14px) scale(.97); }
  79%, 99% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(.98); }
}
@keyframes messageNotification {
  0%, 85% { opacity: 0; transform: translateY(14px) scale(.97); }
  88%, 99% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(.98); }
}
@keyframes deliveredStatus {
  0%, 91% { opacity: 0; }
  94%, 99% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes lineSketchCycle {
  0%, 58% { opacity: 1; stroke-dashoffset: 0; }
  62% { opacity: 0; stroke-dashoffset: 0; }
  63% { opacity: 0; stroke-dashoffset: 1; }
  64% { opacity: 1; stroke-dashoffset: 1; }
  86%, 100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes lineDotCycle {
  0%, 20% { opacity: 1; transform: translate(0, 0) scale(1); }
  20.01% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    animation-timing-function: cubic-bezier(.38, .02, .92, .52);
  }
  27% {
    opacity: 1;
    transform: translate(0, 17px) scale(1.08, .88);
    animation-timing-function: cubic-bezier(.16, .78, .28, 1);
  }
  28.7% {
    opacity: 1;
    transform: translate(0, 12.5px) scale(.98, 1.03);
    animation-timing-function: cubic-bezier(.56, .05, .82, .54);
  }
  30.1% {
    opacity: 1;
    transform: translate(0, 17px) scale(1.035, .94);
    animation-timing-function: cubic-bezier(.18, .72, .32, 1);
  }
  31.2% { opacity: 1; transform: translate(0, 15.8px) scale(.995, 1.01); }
  32% { opacity: 1; transform: translate(0, 17px) scale(1); }
  54.5% { opacity: 1; transform: translate(160px, 17px) scale(1); }
  58.5%, 63% { opacity: 0; transform: translate(160px, 17px) scale(.2); }
  64%, 86% { opacity: 0; transform: translate(0, 0) scale(.75); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@media (max-width: 1050px) {
  body { height: auto; overflow: auto; }
  .landing { height: auto; min-height: 100vh; }
  .hero-shell { height: auto; padding-bottom: 55px; padding-top: 46px; }
  .card-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 auto; max-width: 760px; }
  .story-card { width: 100%; }.nearby-card, .files-card, .route-card, .receive-card { margin-top: 0; }
}

@media (max-width: 860px) {
  .hero-shell { padding-top: 46px; }.hero-copy { padding-left: 4px; padding-right: 4px; padding-bottom: 60px; }
  .story-card { height: 320px; }
}

@media (max-width: 570px) {
  .topbar, .legal-header { min-height: 70px; padding: 0 18px; }.brand-crop { height: 44px; width: 170px; }.brand-logo { transform: translate(-3.5px, -8px); width: 175px; }.try-button, .legal-back { min-height: 43px; }.try-button { font-size: 12px; gap: 7px; padding: 8px 9px; }.try-button::after { height: 21px; width: 21px; }
  .hero-shell { padding: 40px 18px 55px; }.hero-copy { padding-bottom: 48px; }.hero-copy h1 { font-size: clamp(48px, 13.5vw, 64px); }.hero-copy h1 > span { white-space: normal; }.hero-description { font-size: 15px; margin-top: 24px; }
  .card-stage { grid-template-columns: 1fr; }.story-card { height: 320px; }.site-footer { column-gap: 0; grid-template-columns: auto 1fr; margin: 30px 0 0; row-gap: 12px; }.site-footer p { grid-column: 1 / -1; line-height: 1.5; text-align: center; }.site-footer small { white-space: nowrap; }.site-footer nav { gap: 12px; justify-self: end; margin-top: 0; white-space: nowrap; }
}

@media (max-width: 760px) {
  .legal-back { font-size: 11px; gap: 6px; padding: 8px 10px; }
  .legal-main { padding: 38px 18px 58px; }
  .legal-intro h1 { font-size: clamp(46px, 13vw, 62px); }
  .legal-intro h1.legal-title-single { font-size: clamp(18px, 5.6vw, 42px); white-space: nowrap; }
  .legal-intro > p:not(.legal-label) { font-size: 15px; line-height: 1.6; }
  .legal-layout { gap: 20px; grid-template-columns: 1fr; margin-top: 38px; }
  .legal-index { position: static; }
  .legal-index > strong { margin-bottom: 10px; }
  .legal-index nav { display: flex; flex-wrap: wrap; gap: 7px; }
  .legal-index a { background: rgba(255,255,255,.55); border: 1px solid rgba(14,23,40,.25); display: inline-flex; font-size: 10px; gap: 6px; padding: 7px 8px; }
  .legal-document section { padding: 26px 20px 28px; }
  .legal-section-heading { gap: 8px; grid-template-columns: 28px 1fr; }
  .legal-section-heading h2 { font-size: 21px; }
  .legal-section-copy { margin: 15px 0 0 36px; }
  .legal-section-copy p { font-size: 14px; }
  .legal-footer { column-gap: 0; grid-template-columns: auto 1fr; margin: 0 18px; padding: 16px 5px 24px; row-gap: 12px; }
  .legal-footer p { grid-column: 1 / -1; line-height: 1.5; text-align: center; }
  .legal-footer small { white-space: nowrap; }
  .legal-footer nav { gap: 12px; justify-self: end; white-space: nowrap; }
}

@media (max-width: 760px) {
  .updates-main { padding: 38px 18px 68px; }
  .updates-intro-simple h1 { font-size: clamp(52px, 14vw, 72px); }
  .updates-intro-simple > p:not(.legal-label) { font-size: 15px; margin-top: 20px; }
  .changelog-list { margin-top: 44px; padding-left: 32px; }
  .changelog-list::before { left: 6px; }
  .changelog-dot { height: 14px; left: -32px; top: 23px; width: 14px; }
  .change-card { padding: 18px 18px 20px; }
  .change-card h2 { font-size: 23px; margin-top: 15px; }
  .change-meta time { font-size: 9px; }
}

@media (max-width: 570px) {
  .site-footer, .legal-footer { grid-template-columns: 1fr; justify-items: center; row-gap: 10px; }
  .site-footer p, .site-footer small, .site-footer nav,
  .legal-footer p, .legal-footer small, .legal-footer nav { grid-column: 1; justify-self: center; text-align: center; }
  .site-footer small, .legal-footer small { white-space: normal; }
  .site-footer nav, .legal-footer nav { flex-wrap: wrap; gap: 9px 15px; justify-content: center; white-space: normal; width: 100%; }
}

@media (max-height: 800px) and (min-width: 1051px) {
  .topbar, .legal-header { min-height: 64px; }
  .hero-shell { height: calc(100svh - 64px); padding-bottom: 12px; padding-top: 10px; }
  .hero-copy { padding-bottom: 16px; }
  .eyebrow { margin-bottom: 12px; }
  .hero-copy h1 { font-size: clamp(54px, 5.3vw, 68px); }
  .hero-description { line-height: 1.5; margin-top: 16px; }
  .card-stage { padding-bottom: 0; }
  .story-card { height: 280px; }
  .story-card > header { min-height: 40px; }
  .card-body { padding-bottom: 39px; padding-top: 12px; }
  .nearby-card, .receive-card { margin-top: 12px; }
  .site-footer { margin-top: 50px; padding-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story-card, .selection-target, .selection-target b, .file-target, .file-target b, .mini-route > i b, .progress-track i, .receive-notification, .delivered-status, .demo-cursor, .demo-cursor i, .line-sketch, .line-dot { animation: none; }
  .demo-cursor { display: none; }
  .story-card { top: 0; }
  .selection-target, .file-target { background: var(--green-soft); border-color: var(--navy); }
  .selection-target b, .file-target b, .receive-notification, .delivered-status { opacity: 1; transform: none; }
  .mini-route > i b { left: calc(100% - 10px); opacity: 1; }
  .progress-track i { width: 100%; }
}