@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#0a0a0b;
  --surface:#18181b;
  --purple:#7c3aed;
  --deep-purple:#5b21b6;
  --text:#fff;
  --muted:#a1a1aa;
  --line:rgba(255,255,255,.1);
  --ease:cubic-bezier(.22,1,.36,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6
}

body::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1050px;
  background:radial-gradient(ellipse at 76% 42%,rgba(91,33,182,.14),transparent 46%),radial-gradient(ellipse at 3% 0%,rgba(124,58,237,.08),transparent 35%);
  pointer-events:none;
  z-index:-1
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea {
  font:inherit
}

button {
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  color:inherit
}

button:disabled {
  cursor:default
}

img {
  display:block;
  max-width:100%
}

svg {
  width:24px;
  height:24px;
  fill:currentColor
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.05em
}

h2 {
  font-size:clamp(2.3rem,4.1vw,3.7rem)
}

h3 {
  letter-spacing:-.025em
}

p {
  color:var(--muted)
}

:focus-visible {
  outline:2px solid #c4b5fd;
  outline-offset:6px
}

::selection {
  background:#5b21b6;
  color:#fff
}

.wrap {
  width:min(1200px,calc(100% - 80px));
  margin-inline:auto
}

.section {
  padding-block:115px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b3a3cd;
  margin-bottom:26px
}

.gradient-text {
  background:linear-gradient(120deg,#c084fc 0%,#a579f5 42%,#7c3aed 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}

.muted {
  color:var(--muted)
}

.tiny-line {
  height:1px;
  width:24px;
  background:#a78bfa
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:32px;
  min-height:54px;
  padding:14px 23px;
  border:1px solid rgba(196,181,253,.2);
  border-radius:10px;
  background:linear-gradient(125deg,#8b47f3,#6c2ddd);
  color:#fff;
  font-size:14px;
  font-weight:600;
  box-shadow:0 6px 25px rgba(124,58,237,.14);
  transition:transform .25s,box-shadow .25s,background .25s
}

.button:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 35px rgba(124,58,237,.25)
}

.button span:last-child {
  font-size:20px;
  font-weight:400
}

.button-small {
  min-height:42px;
  padding:8px 16px;
  font-size:13px;
  gap:20px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:500;
  padding:10px 0;
  background:none;
  border:0;
  color:#d4d4d8
}

.text-link:hover {
  color:#c4b5fd
}

.play-icon {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid #57505f;
  border-radius:50%;
  font-size:15px
}

.wordmark {
  position:relative;
  display:block;
  width:154px;
  height:41px;
  overflow:hidden;
  isolation:isolate;
  mix-blend-mode:screen
}

.wordmark img {
  max-width:none;
  position:absolute;
  width:133.56%;
  height:auto;
  left:-17.39%;
  top:-108.2%
}

.symbol {
  width:64px;
  height:64px;
  display:block;
  overflow:hidden;
  position:relative;
  mix-blend-mode:screen
}

.symbol img {
  max-width:none;
  width:220%;
  height:auto;
  position:absolute;
  left:-62%;
  top:-57%
}

.skip-link {
  position:fixed;
  z-index:100;
  left:20px;
  top:16px;
  transform:translateY(-200%);
  padding:10px 20px;
  background:#7c3aed;
  border-radius:8px
}

.skip-link:focus {
  transform:none
}

.preloader {
  position:fixed;
  inset:0;
  background:#000;
  z-index:90;
  display:none;
  place-items:center;
  pointer-events:none;
  overflow:hidden;
  isolation:isolate;
  transition:opacity .72s cubic-bezier(.4,0,.2,1),visibility 0s .72s
}

.intro-started .preloader:not([hidden]) {
  display:grid
}

.preloader-mark {
  width:min(620px,94vw);
  aspect-ratio:3/2;
  position:relative;
  z-index:1;
  transform-origin:54% 60%;
  transition:transform .72s var(--ease)
}

.preloader-mark img {
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:screen;
  opacity:0
}

.neon-ready .preloader-mark img {
  opacity:1;
  animation:neon-energy 2.8s .8s ease-in-out infinite alternate
}

.preloader-aura,.preloader-horizon {
  position:absolute;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease)
}

.preloader-aura {
  width:min(820px,140vw);
  aspect-ratio:1;
  background:radial-gradient(ellipse,rgba(92,31,201,.18),rgba(63,18,131,.07) 40%,transparent 68%);
  transform:scale(.82)
}

.neon-ready .preloader-aura {
  opacity:1;
  animation:neon-atmosphere 3s var(--ease) both
}

.preloader-horizon {
  width:min(460px,80vw);
  height:100px;
  top:calc(50% + min(155px,24vw));
  background:radial-gradient(ellipse,rgba(124,58,237,.12),transparent 66%);
  transform:perspective(500px) rotateX(65deg)
}

.neon-ready .preloader-horizon {
  opacity:1
}

.loaded .preloader {
  opacity:0;
  visibility:hidden
}

.loaded .preloader-mark {
  transform:translateY(-26px) scale(1.14)
}

.logo-unavailable .preloader-mark {
  visibility:hidden
}

.intro-pending .hero-copy>*,.intro-pending .hero-visual,.intro-pending .scroll-cue {
  opacity:0
}

@keyframes neon-energy {
  from { opacity:.92; transform:scale(1) }
  to { opacity:1; transform:scale(1.012) }
}

@keyframes neon-atmosphere {
  to { transform:scale(1.08) }
}

.header {
  position:fixed;
  inset:0 0 auto;
  z-index:40;
  height:90px;
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent
}

.header.scrolled {
  background:rgba(10,10,11,.87);
  backdrop-filter:blur(16px);
  border-color:var(--line)
}

.header-inner {
  display:flex;
  align-items:center;
  height:100%;
  gap:36px
}

.navigation {
  display:flex;
  gap:28px;
  margin-left:auto
}

.navigation a {
  color:#b5b5bd;
  font-size:13px;
  transition:color .2s
}

.navigation a:hover {
  color:#fff
}

.menu-toggle {
  display:none
}

.hero {
  position:relative;
  min-height:900px;
  min-height:min(950px,100svh);
  padding-top:150px;
  padding-bottom:110px;
  display:grid;
  grid-template-columns:1.06fr 1fr;
  align-items:center;
  gap:50px
}

.hero-copy {
  padding-bottom:30px;
  z-index:2
}

.hero h1 {
  font-size:clamp(3.2rem,5.8vw,5.4rem);
  line-height:1.04;
  letter-spacing:-.055em
}

.hero .eyebrow {
  margin-bottom:25px
}

.hero-description {
  max-width:410px;
  margin-top:29px;
  font-size:16px;
  line-height:1.8
}

.hero-actions {
  display:flex;
  gap:26px;
  align-items:center;
  margin-top:32px
}

.hero-note {
  display:flex;
  align-items:center;
  gap:12px;
  color:#797982;
  font-size:12px;
  margin-top:38px
}

.mini-formats {
  display:flex;
  padding-left:5px
}

.mini-formats span {
  width:30px;
  height:32px;
  display:grid;
  place-items:center;
  background:#171419;
  border:1px solid #3b304e;
  border-radius:5px;
  margin-left:-5px;
  font-size:8px;
  transform:rotate(-8deg);
  color:#a99abe
}

.mini-formats span:nth-child(2) {
  transform:none;
  z-index:1
}

.mini-formats span:nth-child(3) {
  transform:rotate(8deg);
  z-index:2
}

.hero-visual {
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate
}

.hero-visual::before {
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  max-width:130%;
  background:radial-gradient(ellipse,rgba(124,58,237,.22),rgba(91,33,182,.05) 50%,transparent 68%);
  z-index:-1
}

.hero-orbit {
  position:absolute;
  width:530px;
  height:530px;
  border:1px solid rgba(160,130,205,.08);
  border-radius:50%;
  transform:rotate(-20deg);
  z-index:-1
}

.orbit-two {
  width:660px;
  height:660px;
  border-style:dashed;
  opacity:.5
}

.hero-phone {
  transform:perspective(1400px) rotateY(-10deg) rotateZ(5deg);
  box-shadow:28px 40px 65px rgba(0,0,0,.65),-12px 5px 50px rgba(124,58,237,.13)!important
}

.floating-memory {
  position:absolute;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border:1px solid #39303f;
  border-radius:13px;
  background:linear-gradient(130deg,rgba(35,28,44,.96),rgba(18,17,22,.96));
  box-shadow:0 15px 40px rgba(0,0,0,.3);
  z-index:4;
  font-size:13px
}

.floating-memory strong {
  font-weight:500;
  display:block
}

.floating-memory small {
  display:block;
  font-size:11px;
  color:#928d9c;
  margin-top:3px
}

.file-icon {
  display:grid;
  place-items:center;
  width:37px;
  height:40px;
  border:1px solid rgba(168,125,236,.2);
  border-radius:8px;
  color:#b59adf;
  background:#251b35;
  font-size:20px
}

.memory-invoice {
  left:-26px;
  top:120px;
  transform:rotate(-5deg)
}

.memory-flight {
  right:-30px;
  bottom:120px;
  transform:rotate(5deg)
}

.memory-check {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  background:#352044;
  color:#c4a1f2;
  border-radius:50%;
  font-size:12px;
  margin-left:12px
}

.memory-reminder {
  right:-12px;
  top:48px;
  font-size:12px;
  padding:12px 16px;
  transform:rotate(3deg);
  border-radius:30px
}

.reminder-dot {
  width:6px;
  height:6px;
  background:#b68aef;
  border-radius:50%
}

.visual-caption {
  position:absolute;
  bottom:2px;
  right:22px;
  font-size:12px;
  color:#6f657d
}

.visual-caption span {
  color:#a78bfa;
  margin-right:10px
}

.scroll-cue {
  position:absolute;
  bottom:25px;
  left:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:#71717a
}

.scroll-cue>span {
  display:grid;
  place-items:center;
  width:26px;
  height:35px;
  border:1px solid #39323e;
  border-radius:16px;
  font-size:15px
}

.phone {
  width:300px;
  height:622px;
  padding:10px;
  position:relative;
  border:1px solid #58535e;
  border-radius:47px;
  background:linear-gradient(140deg,#3f3946,#111013 20%,#1c1a20 80%,#5a5062);
  box-shadow:0 35px 70px rgba(0,0,0,.55);
  flex-shrink:0;
  isolation:isolate;
  text-align:left;
  font-family:Inter,"Segoe UI",Arial,sans-serif
}

.phone::before,.phone::after {
  content:"";
  position:absolute;
  left:-3px;
  top:115px;
  width:3px;
  height:45px;
  background:#49424f;
  border-radius:3px
}

.phone::after {
  top:171px;
  height:65px
}

.phone-shell {
  height:100%;
  border:1px solid #25212b;
  border-radius:37px;
  background:#0c0b10;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column
}

.phone-shell::before {
  content:"";
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  width:81px;
  height:23px;
  border-radius:25px;
  background:#020203;
  z-index:5
}

.phone-status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 21px 11px;
  font-size:11px;
  font-weight:600;
  color:#e4e4e7;
  min-height:49px
}

.phone-status .status-symbols {
  letter-spacing:1px;
  font-size:10px
}

.phone-content {
  padding:13px 20px 12px;
  flex:1;
  overflow:auto;
  scrollbar-width:none;
  position:relative;
  display:flex;
  flex-direction:column
}

.phone-content::-webkit-scrollbar {
  display:none
}

.phone-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#9b96a4;
  font-size:12px;
  margin-bottom:18px
}

.app-avatar {
  width:28px;
  height:28px;
  border-radius:50%;
  background:#2a203a;
  border:1px solid #49325f;
  display:grid;
  place-items:center;
  color:#d5b7fc;
  font-size:10px
}

.app-title {
  font-size:25px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.045em;
  color:#fafafa;
  margin-bottom:21px
}

.app-title.large {
  font-size:32px
}

.app-muted {
  font-size:12px;
  line-height:1.6;
  color:#92909d
}

.app-search {
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #322a3e;
  background:#19151f;
  padding:12px;
  border-radius:10px;
  font-size:12px;
  color:#aaa1b7;
  margin-bottom:24px
}

.app-search svg {
  width:15px;
  height:15px;
  fill:none;
  stroke:#a78bfa;
  stroke-width:1.7
}

.app-section-label {
  font-size:11px;
  font-weight:500;
  color:#a4a0ad;
  margin:0 0 10px;
  letter-spacing:0
}

.app-alert {
  background:linear-gradient(120deg,#291739,#1a1421);
  border:1px solid #483054;
  border-radius:12px;
  padding:13px;
  margin-bottom:24px;
  display:flex;
  gap:9px
}

.app-alert>span {
  color:#c0a1f0
}

.app-alert strong {
  display:block;
  color:#e7d9f7;
  font-size:12px;
  font-weight:500
}

.app-alert small {
  display:block;
  font-size:10px;
  color:#a094ae;
  margin-top:3px
}

.app-item {
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 0;
  border-bottom:1px solid #25212b;
  font-size:12px
}

.app-item:last-child {
  border-bottom:0
}

.app-item .item-icon {
  color:#a99abe;
  width:31px;
  height:34px;
  border:1px solid #332a42;
  background:#1a1522;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:16px;
  flex-shrink:0
}

.app-item strong {
  color:#e2dee8;
  font-size:12px;
  font-weight:500;
  display:block
}

.app-item small {
  display:block;
  font-size:10px;
  color:#81798e;
  margin-top:2px
}

.app-item>span:last-child {
  margin-left:auto;
  color:#655c72
}

.app-nav {
  border-top:1px solid #24202c;
  display:flex;
  align-items:center;
  justify-content:space-around;
  min-height:66px;
  background:#100e16;
  padding:8px 7px 10px;
  gap:3px
}

.app-nav button,.app-nav>span {
  border:0;
  background:none;
  color:#726980;
  font-size:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:0;
  min-width:35px
}

.app-nav .nav-icon {
  font-size:18px;
  line-height:1.1
}

.app-nav .active {
  color:#b387f6
}

.app-nav .nav-add {
  color:#fff;
  background:#7c3aed;
  border:1px solid #9561ee;
  border-radius:13px;
  width:38px;
  height:38px;
  min-width:38px;
  display:grid;
  place-items:center;
  font-size:25px;
  line-height:1;
  box-shadow:0 0 18px rgba(124,58,237,.22)
}

.phone-home-bar {
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:82px;
  height:3px;
  background:#8b8199;
  border-radius:3px;
  z-index:7
}

.app-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:23px;
  color:#c8c1d2;
  font-size:12px
}

.app-toolbar button {
  border:0;
  background:none;
  padding:4px 0;
  color:#b6a8c6;
  font-size:12px
}

.app-capture-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:17px 0 22px
}

.app-capture-options button {
  font-size:10px;
  border:1px solid #322a3f;
  background:#1a1522;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
  padding:12px 3px;
  min-height:63px;
  color:#b6a6cc
}

.app-capture-options button span {
  font-size:18px
}

.app-capture-options button.selected {
  border-color:#8b5cf6;
  background:#2e1b47;
  color:#e1ccff
}

.app-input-box {
  border:1px solid #342a44;
  border-radius:12px;
  padding:15px;
  background:#17121f;
  font-size:12px;
  color:#aba1ba;
  min-height:104px
}

.app-input-box strong {
  font-size:12px;
  display:block;
  font-weight:500;
  color:#ded3ed;
  margin-bottom:7px
}

.app-button {
  border:1px solid #9b64f3;
  border-radius:10px;
  background:#7c3aed;
  color:#fff;
  padding:12px 9px;
  text-align:center;
  display:block;
  width:100%;
  font-size:12px;
  font-weight:500;
  margin-top:20px
}

.app-button:hover {
  background:#8b4def
}

.app-button.secondary {
  background:transparent;
  border-color:#3d304e;
  color:#a69bb5;
  margin-top:9px
}

.app-safety-note {
  text-align:center;
  font-size:10px;
  color:#71677e;
  margin-top:12px
}

.app-centered {
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  min-height:370px
}

.app-centered .symbol {
  width:74px;
  height:74px;
  margin:0 0 20px
}

.app-centered .app-title {
  margin-bottom:0
}

.app-spinner {
  width:48px;
  height:48px;
  border:1px solid #493266;
  border-top:2px solid #b381f7;
  border-radius:50%;
  margin-bottom:25px;
  animation:spin 2s linear infinite
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

.app-success {
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  background:#2c1b42;
  border:1px solid #573178;
  color:#c6a5f4;
  border-radius:50%;
  font-size:19px;
  margin-bottom:12px
}

.app-ticket {
  border:1px solid #3c2b53;
  border-radius:13px;
  background:linear-gradient(140deg,#24172f,#17121e);
  padding:15px;
  margin-top:5px
}

.app-ticket-icon {
  color:#c097f3;
  font-size:21px;
  margin-bottom:8px
}

.app-ticket h3 {
  font-size:16px;
  line-height:1.25;
  letter-spacing:-.025em;
  margin-bottom:7px
}

.app-ticket p {
  font-size:11px;
  line-height:1.6;
  color:#a398b2
}

.app-ticket .app-route {
  margin:12px 0 10px;
  font-size:12px;
  color:#d3c6e3;
  padding-bottom:12px;
  border-bottom:1px dashed #4d385f
}

.app-ticket small {
  font-size:10px;
  display:block;
  color:#8e819f;
  margin-top:4px
}

.app-remind {
  margin-top:16px;
  font-size:12px;
  padding:12px;
  background:#20182a;
  border-radius:10px;
  color:#c8b8dc;
  line-height:1.6
}

.app-remind small {
  font-size:10px;
  color:#9383a7;
  display:block
}

.app-question {
  width:100%;
  border:1px solid #4d3369;
  background:#1d1528;
  border-radius:12px;
  padding:13px;
  color:#dac8ee;
  font-size:12px;
  min-height:100px;
  line-height:1.6;
  resize:none
}

.app-question::placeholder {
  color:#9784ad
}

.app-query-form label {
  display:block;
  font-size:12px;
  color:#b4a6c4;
  margin-bottom:12px
}

.app-query-form .app-button {
  margin-top:12px
}

.app-examples {
  margin-top:26px;
  font-size:11px;
  color:#766a86
}

.app-examples p {
  font-size:11px;
  color:#9f8eb3;
  padding:8px 0;
  line-height:1.5
}

.app-result-intro {
  font-size:13px;
  color:#d9c5f3;
  margin-bottom:10px
}

.app-more {
  font-size:11px;
  color:#91829f;
  margin-top:19px;
  line-height:1.7
}

.app-detail-list {
  display:grid;
  gap:13px;
  font-size:12px;
  margin:5px 0 18px
}

.app-detail-list div {
  display:flex;
  justify-content:space-between;
  gap:8px
}

.app-detail-list dt {
  color:#8f819f
}

.app-detail-list dd {
  margin:0;
  color:#d7c9e6
}

.demo-label {
  display:block;
  text-align:center;
  font-size:11px;
  color:#746a83;
  letter-spacing:.015em
}

.app-profile-row {
  font-size:12px;
  padding:11px 0;
  border-bottom:1px solid #2b2335;
  color:#b5a6c9
}

.section-heading {
  max-width:900px
}

.scattered {
  border-top:1px solid var(--line)
}

.scatter-field {
  height:410px;
  position:relative;
  margin-top:60px
}

.scatter-card {
  position:absolute;
  width:225px;
  background:linear-gradient(130deg,#1b171f,#111013);
  border:1px solid #302b35;
  border-radius:12px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:13px;
  font-size:15px;
  line-height:1.4;
  box-shadow:0 20px 50px #0004;
  transition:transform 1.3s var(--ease),opacity 1.3s;
  transform:translate(var(--scatter-x,0px),var(--scatter-y,0px)) rotate(var(--scatter-rotation,0deg));
  z-index:2
}

.file-label {
  font-size:10px;
  letter-spacing:.11em;
  font-weight:600;
  color:#a58abd
}

.scatter-card small {
  font-size:11px;
  color:#6c6474
}

.scatter-a {
  left:0;
  top:65px;
  --scatter-rotation:-8deg
}

.scatter-b {
  left:25%;
  top:15px;
  --scatter-rotation:4deg
}

.scatter-c {
  right:0;
  top:105px;
  --scatter-rotation:7deg
}

.scatter-d {
  left:17%;
  bottom:0;
  --scatter-rotation:-4deg
}

.scatter-e {
  right:20%;
  bottom:15px;
  --scatter-rotation:5deg
}

.scatter-center {
  position:absolute;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%);
  width:108px;
  height:108px;
  display:grid;
  place-items:center;
  border-radius:28px;
  background:#101013;
  border:1px solid #3d2c50;
  box-shadow:0 0 80px #7c3aed28;
  z-index:3
}

.scatter-center .symbol {
  width:58px;
  height:58px
}

.scatter-conclusion {
  text-align:center;
  font-size:20px;
  line-height:1.7;
  margin-top:65px
}

.scatter-conclusion strong {
  color:#dfdce4;
  font-weight:400
}

.save-story {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px;
  align-items:start
}

.story-device {
  position:sticky;
  top:135px;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:0
}

.story-device::before {
  content:"";
  position:absolute;
  inset:-60px -40px;
  background:radial-gradient(ellipse,rgba(124,58,237,.15),transparent 65%);
  z-index:-1
}

.save-phone {
  transform:rotate(-3deg)
}

.story-device>.demo-label {
  margin-top:24px
}

.story-step {
  min-height:650px;
  display:flex;
  justify-content:center;
  flex-direction:column
}

.story-step:last-child {
  min-height:590px
}

.story-step h2 {
  margin-bottom:25px
}

.story-step>p:not(.eyebrow) {
  font-size:16px;
  line-height:1.8
}

.step-number {
  font-size:11px;
  border:1px solid #4c335f;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#b392db;
  letter-spacing:0
}

.format-chips {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:27px 0 17px
}

.format-chips span {
  border:1px solid #33293e;
  border-radius:30px;
  padding:7px 14px;
  font-size:12px;
  color:#bcacd0
}

.demo-trigger {
  align-self:flex-start;
  color:#c5a2f6
}

.quiet-status {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:26px;
  font-size:14px;
  color:#ab90ca
}

.quiet-status>span {
  width:17px;
  height:17px;
  border:1px solid #4f306e;
  border-top-color:#a78bfa;
  border-radius:50%;
  animation:spin 2s linear infinite
}

.signature {
  color:#b09cc9!important;
  border-left:1px solid #6c3996;
  padding-left:17px;
  margin-top:30px;
  font-size:15px!important
}

.understand {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center;
  border-top:1px solid var(--line)
}

.understand-copy>p:not(.eyebrow) {
  max-width:390px;
  margin-top:27px
}

.understand-footnote {
  display:flex;
  gap:15px;
  align-items:center;
  margin-top:38px;
  font-size:13px;
  color:#a78bfa
}

.understand-footnote p {
  color:#82768f;
  line-height:1.6
}

.understand-visual {
  position:relative;
  max-width:430px;
  width:100%;
  justify-self:center
}

.understand-visual::before {
  content:"";
  position:absolute;
  inset:70px -80px -40px;
  background:radial-gradient(ellipse,#5b21b625,transparent 70%);
  z-index:-1
}

.source-paper {
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#17131c;
  border:1px solid #39303f;
  border-radius:10px;
  padding:22px;
  width:84%;
  margin-inline:auto;
  transform:rotate(-3deg);
  font-size:13px;
  color:#948c9f
}

.source-paper strong {
  font-weight:400;
  color:#c4bbd0;
  font-size:14px
}

.source-paper .file-label {
  font-size:9px
}

.paper-lines {
  height:20px;
  width:70%;
  background:repeating-linear-gradient(to bottom,#312937 0 1px,transparent 1px 8px);
  margin-top:4px
}

.connection {
  text-align:center;
  color:#9f6adc;
  padding:19px;
  font-size:22px
}

.boarding-card {
  position:relative;
  padding:28px;
  background:linear-gradient(140deg,#23152e,#151019);
  border:1px solid #5b3672;
  border-radius:17px;
  box-shadow:0 28px 65px #0005
}

.boarding-top {
  display:flex;
  gap:12px;
  align-items:center;
  color:#bca0d8;
  font-size:13px;
  margin-bottom:22px
}

.boarding-top .memory-check {
  margin-left:auto
}

.ticket-icon {
  font-size:22px
}

.boarding-card h3 {
  font-size:24px;
  margin-bottom:7px
}

.boarding-card>p {
  font-size:13px;
  color:#877695
}

.flight-route {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:28px 0 22px;
  padding-bottom:22px;
  border-bottom:1px dashed #49304e
}

.flight-route strong {
  font-size:14px;
  font-weight:500
}

.flight-route small,.flight-details small {
  display:block;
  font-size:11px;
  color:#857190;
  margin-top:4px
}

.flight-route>span {
  color:#a985ce
}

.flight-details {
  display:flex;
  justify-content:space-between;
  gap:12px
}

.flight-details strong {
  font-size:14px;
  font-weight:500;
  display:block;
  margin-top:3px;
  color:#d5c1e6
}

.ticket-attention {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:10px;
  background:#3a244242;
  margin-top:22px;
  color:#ba98d7
}

.ticket-attention p {
  font-size:13px;
  color:#c6aed8
}

.ticket-attention small {
  display:block;
  font-size:11px;
  color:#917e9f;
  margin-top:3px
}

.find-section {
  position:relative;
  background:radial-gradient(ellipse at 75% 52%,#5b21b622,transparent 50%);
  border-block:1px solid var(--line);
  margin-top:70px
}

.find-layout {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:90px;
  align-items:center
}

.find-copy h2 {
  font-size:clamp(2.2rem,3.6vw,3.3rem)
}

.find-copy>p:not(.eyebrow) {
  max-width:410px;
  margin-top:26px
}

.query-examples {
  display:flex;
  flex-direction:column;
  margin:33px 0 16px;
  gap:11px;
  max-width:430px
}

.query-examples button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:left;
  padding:15px 17px;
  background:#17121e;
  border:1px solid #33263f;
  border-radius:10px;
  font-size:13px;
  color:#b7a6cb;
  transition:border-color .2s,background .2s
}

.query-examples button:hover,.query-examples button.active {
  border-color:#8653b5;
  background:#251631;
  color:#e5d3ff
}

.query-examples button span {
  color:#9d68d2
}

.find-copy .demo-label {
  text-align:left
}

.find-device {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:27px
}

.find-phone {
  transform:rotate(3deg)
}

.find-annotation {
  font-size:12px;
  color:#8f7da3;
  text-align:center;
  line-height:1.7
}

.find-annotation>span {
  color:#b388e0
}

.things-heading,.experience-heading {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:flex-end;
  margin-bottom:48px
}

.things-heading>p,.experience-heading>p {
  font-size:14px;
  line-height:1.8;
  flex-shrink:0;
  margin-bottom:7px
}

.memory-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px
}

.editorial-card {
  position:relative;
  padding:30px;
  border-radius:15px;
  border:1px solid #332b3e;
  background:linear-gradient(130deg,#1b1424,#111013);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--ease),border-color .3s
}

.editorial-card:hover {
  transform:translateY(-5px);
  border-color:#675079
}

.editorial-card h3 {
  font-size:22px;
  line-height:1.25;
  margin-bottom:12px
}

.editorial-card>p {
  font-size:13px;
  line-height:1.7
}

.editorial-card .file-label {
  margin-bottom:28px
}

.editorial-flight {
  grid-column:span 7;
  min-height:360px;
  background:radial-gradient(ellipse at 85% 20%,#5b21b635,transparent 70%),#141017
}

.route-art {
  display:flex;
  align-items:center;
  gap:30px;
  color:#baa1d6;
  font-size:48px;
  letter-spacing:-.05em;
  margin:5px 0 26px
}

.route-art>span:nth-child(2) {
  font-size:28px;
  flex:1;
  position:relative;
  text-align:center;
  color:#8b5ab7
}

.route-art>span:nth-child(2)::before {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#5b3b70,transparent);
  z-index:0
}

.card-bottom {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:30px;
  font-size:11px;
  color:#7a698d
}

.editorial-receipt {
  grid-column:span 5;
  min-height:360px
}

.receipt-preview {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:20px;
  background:#26202d;
  border:1px solid #4a3a59;
  max-width:220px;
  margin:0 auto 27px;
  width:100%;
  transform:rotate(5deg);
  box-shadow:5px 12px 25px #0004;
  font-size:12px;
  color:#b1a3c1
}

.receipt-preview strong {
  font-size:23px;
  color:#e8dbf8;
  font-weight:500
}

.receipt-preview>div {
  height:20px;
  background:repeating-linear-gradient(to right,#5d4c70 0 1px,transparent 1px 4px);
  margin:6px 0
}

.receipt-preview small {
  font-size:10px
}

.editorial-link {
  grid-column:span 4;
  min-height:295px
}

.link-art {
  font-size:58px;
  color:#a583c9;
  line-height:1;
  margin-bottom:28px
}

.editorial-note {
  grid-column:span 4;
  min-height:295px
}

.editorial-note .handwritten-note {
  font-size:21px;
  font-style:italic;
  line-height:1.5;
  color:#c7addf;
  margin:5px 0 30px;
  letter-spacing:-.015em
}

.editorial-note h3 {
  font-size:17px
}

.editorial-document {
  grid-column:span 4;
  min-height:295px;
  background:linear-gradient(135deg,#351d4a,#1e1429)
}

.editorial-document h3 {
  font-size:27px
}

.attention {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:center
}

.attention h2 {
  font-size:clamp(2.2rem,3.3vw,3rem)
}

.attention-copy>p:not(.eyebrow) {
  margin-top:27px;
  max-width:400px
}

.attention-stack {
  position:relative;
  padding:45px 0
}

.attention-stack::before {
  content:"";
  position:absolute;
  inset:-10px -40px;
  background:radial-gradient(ellipse,#7c3aed14,transparent 70%);
  z-index:-1
}

.notification {
  display:flex;
  gap:16px;
  padding:25px;
  background:linear-gradient(120deg,#271c35,#16131c);
  border:1px solid #4c355f;
  border-radius:14px;
  transform:rotate(-3deg);
  box-shadow:0 20px 40px #0005
}

.notification-icon {
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border:1px solid #594074;
  border-radius:11px;
  background:#3c254c;
  color:#c49aee;
  font-size:23px;
  flex-shrink:0
}

.notification small {
  font-size:9px;
  letter-spacing:.09em;
  color:#aa87c6;
  display:block;
  margin-bottom:7px
}

.notification h3 {
  font-size:19px;
  letter-spacing:-.03em
}

.notification p {
  font-size:12px;
  margin-top:7px;
  color:#9984ad
}

.notification-secondary {
  margin-top:23px;
  margin-left:30px;
  transform:rotate(3deg);
  background:linear-gradient(110deg,#1e1729,#141017);
  border-color:#33243e
}

.reminder-choice {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:32px;
  font-size:12px;
  color:#bd97e3
}

.reminder-choice>span:first-child {
  border:1px solid #4f3065;
  border-radius:25px;
  padding:9px 17px;
  background:#23162f
}

.choice-note {
  color:#81708e;
  font-size:11px
}

.simplicity {
  text-align:center;
  padding-block:170px;
  border-block:1px solid var(--line)
}

.simplicity .eyebrow {
  justify-content:center
}

.simplicity h2 {
  font-size:clamp(3rem,6.2vw,5.6rem)
}

.no-organizing {
  display:flex;
  gap:35px;
  justify-content:center;
  margin-top:32px;
  color:#7e7787;
  font-size:14px
}

.simple-conversation {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:45px;
  margin-top:75px;
  text-align:left
}

.simple-conversation>span:first-child {
  font-size:39px;
  letter-spacing:-.04em
}

.simple-divider {
  width:85px;
  height:1px;
  background:linear-gradient(90deg,#3d2b54,#7c3aed)
}

.simple-conversation small {
  display:block;
  font-size:12px;
  color:#837390
}

.simple-conversation strong {
  display:block;
  font-size:51px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.05em
}

.security {
  padding-block:130px
}

.security-heading {
  text-align:center;
  max-width:630px;
  margin-inline:auto
}

.security-heading .eyebrow {
  justify-content:center
}

.security-heading h2 {
  font-size:clamp(3rem,5.5vw,4.6rem)
}

.security-heading>p:last-child {
  font-size:16px;
  margin:26px auto 0;
  max-width:530px;
  line-height:1.8
}

.privacy-emblem {
  width:63px;
  height:63px;
  border:1px solid #62437b;
  border-radius:20px;
  display:grid;
  place-items:center;
  margin:0 auto 30px;
  color:#b38ad4;
  font-size:35px;
  background:radial-gradient(ellipse,#44255570,#16101d)
}

.privacy-columns {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:70px
}

.privacy-columns article {
  padding:10px 34px;
  border-right:1px solid var(--line)
}

.privacy-columns article:first-child {
  padding-left:0
}

.privacy-columns article:last-child {
  border:0;
  padding-right:0
}

.privacy-columns article>span {
  font-size:11px;
  color:#8056a0;
  letter-spacing:.1em
}

.privacy-columns h3 {
  font-size:20px;
  margin:16px 0 12px
}

.privacy-columns p {
  font-size:14px;
  line-height:1.8;
  max-width:280px
}

.experience {
  border-top:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 70%,#5b21b621,transparent 60%);
  overflow:hidden
}

.screen-tabs {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:55px
}

.screen-tabs button {
  background:transparent;
  border:1px solid transparent;
  padding:8px 16px;
  color:#81758f;
  font-size:12px;
  border-radius:25px;
  transition:color .2s,border-color .2s,background .2s
}

.screen-tabs button[aria-selected=true] {
  background:#251833;
  color:#d4b7f5;
  border-color:#5b3878
}

.screen-tabs button:hover {
  color:#d4b7f5
}

.experience-stage {
  position:relative;
  height:750px;
  display:flex;
  justify-content:center;
  align-items:center;
  isolation:isolate;
  outline-offset:-8px
}

.gallery-phone {
  position:absolute
}

.gallery-center {
  z-index:3;
  transform:translateY(6px);
  box-shadow:0 30px 90px #0009,0 0 100px #7c3aed15;
  transition:opacity .22s,transform .4s var(--ease)
}

.gallery-left {
  z-index:1;
  transform:translateX(-280px) translateY(46px) rotate(-10deg) scale(.86);
  filter:brightness(.7)
}

.gallery-right {
  z-index:2;
  transform:translateX(280px) translateY(-8px) rotate(10deg) scale(.89);
  filter:brightness(.77)
}

.experience-caption {
  text-align:center;
  font-size:13px;
  color:#80718f
}

.download {
  text-align:center;
  position:relative;
  isolation:isolate;
  padding-block:140px 120px;
  border-bottom:1px solid var(--line)
}

.download::before {
  content:"";
  position:absolute;
  inset:-30px -40px 0;
  background:radial-gradient(ellipse at 50% 52%,#5b21b62c,transparent 60%);
  z-index:-1;
  pointer-events:none
}

.download-symbol {
  width:73px;
  height:73px;
  margin:0 auto 30px
}

.download .eyebrow {
  justify-content:center
}

.download h2 {
  font-size:clamp(2.8rem,5.8vw,5rem)
}

.download-callout {
  font-size:clamp(1.8rem,3.5vw,3.1rem);
  font-weight:500;
  letter-spacing:-.04em;
  color:#fff;
  margin-top:20px
}

.download-support {
  font-size:16px;
  margin-top:15px
}

.store-buttons {
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:36px
}

.store-button {
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  background:#17121d;
  border:1px solid #4f3665;
  border-radius:12px;
  min-width:200px;
  padding:12px 18px;
  transition:background .2s,transform .2s
}

.store-button:hover {
  background:#261933;
  transform:translateY(-2px)
}

.store-button svg {
  width:27px;
  height:30px
}

.store-button small {
  display:block;
  font-size:10px;
  color:#a899b9;
  line-height:1.4
}

.store-button strong {
  font-size:19px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.025em
}

.store-button>span:last-child {
  margin-left:auto;
  color:#9676b4;
  font-size:17px
}

.store-status {
  font-size:12px;
  margin:20px auto 0;
  max-width:420px;
  color:#8b789e;
  min-height:20px
}

.footer {
  padding-top:50px
}

.footer-top {
  display:grid;
  grid-template-columns:1.1fr 1.2fr 1fr .7fr;
  gap:40px;
  padding-bottom:45px;
  align-items:start
}

.footer .wordmark {
  width:141px;
  height:37px
}

.footer-top>p {
  font-size:13px;
  color:#797080;
  line-height:1.7
}

.footer nav {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:12px;
  color:#9b91a6
}

.footer a:hover {
  color:#d5b6fb
}

.footer-bottom {
  padding:24px 0 30px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:11px;
  color:#655c6e
}

.footer-bottom>a span {
  margin-left:12px;
  color:#ad83d2
}

dialog {
  border:1px solid #5a3c74;
  border-radius:22px;
  padding:38px;
  max-width:430px;
  width:calc(100% - 40px);
  color:#fff;
  background:#16101e;
  box-shadow:0 30px 100px #000b
}

dialog::backdrop {
  background:#050307c9;
  backdrop-filter:blur(5px)
}

dialog h2 {
  font-size:25px;
  margin:20px 0 15px
}

dialog p {
  font-size:14px;
  line-height:1.8
}

dialog .button {
  margin-top:25px;
  width:100%
}

.dialog-close {
  position:absolute;
  right:13px;
  top:9px;
  font-size:26px;
  background:none;
  border:0;
  padding:5px 10px;
  color:#b09dc5
}

.noscript-note {
  padding:25px;
  text-align:center
}

.js .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:var(--reveal-delay,0ms)
}

.js .reveal.visible {
  opacity:1;
  transform:translateY(0)
}

@media(min-width:1500px) {
  .hero {
    min-height:940px
  }
  .hero-visual {
    min-height:710px
  }
  .hero-phone {
    width:320px;
    height:662px
  }
  .memory-invoice {
    top:140px
  }
}

@media(max-width:1200px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero {
    gap:30px;
    min-height:890px
  }
  .hero h1 {
    font-size:5.9vw
  }
  .hero-visual {
    min-height:650px
  }
  .memory-invoice {
    left:-30px;
    top:112px;
    padding:12px
  }
  .memory-flight {
    right:-12px;
    bottom:125px;
    padding:12px
  }
  .memory-reminder {
    right:0;
    top:38px
  }
  .floating-memory {
    font-size:11px
  }
  .hero-orbit {
    width:430px;
    height:430px
  }
  .orbit-two {
    width:530px;
    height:530px
  }
  .navigation {
    gap:20px
  }
  .header-inner {
    gap:25px
  }
  .save-story {
    gap:60px
  }
  .understand {
    gap:65px
  }
  .find-layout {
    gap:50px
  }
  .attention {
    gap:45px
  }
  .hero-actions {
    gap:18px
  }
  .hero-actions .button {
    gap:20px;
    padding-inline:18px
  }
  .hero-actions .text-link {
    font-size:13px;
    gap:8px
  }
}

@media(max-width:960px) {
  .navigation {
    gap:15px
  }
  .navigation a {
    font-size:12px
  }
  .header-inner {
    gap:20px
  }
  .wordmark {
    width:135px;
    height:36px
  }
  .header-cta {
    font-size:12px;
    gap:10px
  }
  .hero {
    grid-template-columns:1fr 1fr;
    gap:5px;
    min-height:850px;
    padding-top:130px
  }
  .hero h1 {
    font-size:6.15vw
  }
  .hero-description {
    font-size:14px;
    max-width:330px
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:12px
  }
  .hero-note {
    font-size:10px;
    margin-top:25px
  }
  .hero-visual {
    min-height:640px
  }
  .hero-phone {
    width:272px;
    height:580px
  }
  .hero-phone .phone-content {
    padding-inline:16px
  }
  .memory-invoice {
    left:-20px;
    top:108px
  }
  .memory-invoice small {
    display:none
  }
  .memory-invoice .memory-check {
    display:none
  }
  .memory-invoice .file-icon {
    width:28px;
    height:32px
  }
  .memory-flight {
    right:-5px;
    bottom:112px;
    padding:11px
  }
  .memory-flight .file-icon {
    width:28px;
    height:32px
  }
  .memory-reminder {
    top:25px;
    font-size:10px
  }
  .visual-caption {
    right:0;
    font-size:10px
  }
  .section {
    padding-block:85px
  }
  .scatter-card {
    width:190px;
    padding:18px;
    font-size:13px
  }
  .scatter-b {
    left:28%
  }
  .scatter-d {
    left:12%
  }
  .scatter-e {
    right:16%
  }
  .story-device {
    top:125px
  }
  .save-story {
    gap:45px
  }
  .story-step {
    min-height:650px
  }
  .understand {
    gap:45px
  }
  .boarding-card {
    padding:24px
  }
  .flight-route strong {
    font-size:12px
  }
  .find-layout {
    gap:35px;
    grid-template-columns:1fr 1fr
  }
  .find-copy h2 {
    font-size:2.5rem
  }
  .query-examples button {
    font-size:12px
  }
  .things-heading,.experience-heading {
    gap:35px
  }
  .things-heading>p,.experience-heading>p {
    font-size:12px
  }
  .editorial-card {
    padding:23px
  }
  .route-art {
    font-size:40px
  }
  .editorial-card h3 {
    font-size:20px
  }
  .editorial-note .handwritten-note {
    font-size:18px
  }
  .editorial-note h3 {
    font-size:16px
  }
  .editorial-document h3 {
    font-size:23px
  }
  .attention {
    gap:40px
  }
  .attention h2 {
    font-size:2.3rem
  }
  .notification {
    padding:19px;
    gap:12px
  }
  .notification h3 {
    font-size:16px
  }
  .notification small {
    font-size:8px
  }
  .notification p {
    font-size:11px
  }
  .notification-icon {
    width:35px;
    height:35px
  }
  .reminder-choice {
    flex-direction:column;
    align-items:flex-start;
    gap:12px
  }
  .privacy-columns article {
    padding-inline:25px
  }
  .gallery-left {
    transform:translateX(-230px) translateY(46px) rotate(-10deg) scale(.77)
  }
  .gallery-right {
    transform:translateX(230px) translateY(-8px) rotate(10deg) scale(.8)
  }
  .footer-top {
    gap:25px;
    grid-template-columns:1.2fr 1.2fr 1fr .8fr
  }
  .footer .wordmark {
    width:120px;
    height:32px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:90px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .header {
    height:76px
  }
  .header-inner {
    gap:14px
  }
  .wordmark {
    width:135px;
    height:36px
  }
  .header-cta {
    margin-left:auto;
    min-height:36px;
    padding:6px 11px;
    font-size:11px;
    gap:9px
  }
  .header-cta>span {
    font-size:15px!important
  }
  .menu-toggle {
    display:flex;
    order:3;
    border:1px solid #3a2a49;
    border-radius:8px;
    width:38px;
    height:36px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    background:#18101f;
    padding:8px
  }
  .menu-toggle span {
    height:1px;
    width:16px;
    background:#c8afd9;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3px) rotate(-45deg)
  }
  .navigation {
    display:none;
    position:absolute;
    top:76px;
    left:20px;
    right:20px;
    border:1px solid #3e2d4f;
    border-radius:12px;
    background:#15101df5;
    backdrop-filter:blur(16px);
    padding:12px
  }
  .navigation.open {
    display:flex;
    flex-direction:column;
    gap:0
  }
  .navigation a {
    font-size:14px;
    padding:13px 15px
  }
  .hero {
    display:flex;
    flex-direction:column;
    min-height:auto;
    padding-top:128px;
    padding-bottom:80px;
    gap:35px;
    align-items:stretch
  }
  .hero-copy {
    padding-bottom:0;
    max-width:520px
  }
  .hero h1 {
    font-size:clamp(3.25rem,9.1vw,4.7rem)
  }
  .hero .eyebrow {
    font-size:10px;
    margin-bottom:23px
  }
  .hero-description {
    font-size:15px;
    max-width:370px;
    margin-top:25px
  }
  .hero-actions {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:20px;
    margin-top:26px
  }
  .hero-actions .button {
    min-height:48px;
    font-size:12px;
    padding:12px 16px;
    gap:20px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .hero-note {
    margin-top:24px;
    font-size:11px
  }
  .hero-visual {
    min-height:670px;
    max-width:460px;
    width:100%;
    margin-inline:auto;
    align-items:center
  }
  .hero-phone {
    width:290px;
    height:610px;
    transform:rotate(4deg)
  }
  .hero-phone .phone-content {
    padding-inline:20px
  }
  .hero-visual::before {
    width:480px;
    height:600px;
    max-width:125%
  }
  .hero-orbit {
    width:360px;
    height:450px
  }
  .orbit-two {
    width:440px;
    height:550px
  }
  .memory-invoice {
    left:-3px;
    top:130px;
    font-size:11px;
    padding:12px
  }
  .memory-invoice small {
    display:block;
    font-size:9px
  }
  .memory-invoice .file-icon {
    width:31px;
    height:35px
  }
  .memory-flight {
    right:-2px;
    bottom:92px;
    transform:rotate(4deg);
    font-size:11px;
    padding:12px
  }
  .memory-flight small {
    font-size:9px
  }
  .memory-reminder {
    right:0;
    top:12px;
    font-size:10px;
    padding:10px 13px
  }
  .visual-caption {
    bottom:0;
    right:15px;
    font-size:10px
  }
  .scroll-cue {
    bottom:17px;
    font-size:10px
  }
  .section {
    padding-block:75px
  }
  h2 {
    font-size:clamp(2.15rem,6.4vw,3rem);
    line-height:1.13
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:.11em;
    margin-bottom:21px
  }
  .scattered {
    padding-top:65px
  }
  .scatter-field {
    height:480px;
    margin-top:35px
  }
  .scatter-card {
    width:43%;
    max-width:205px;
    padding:16px;
    gap:10px;
    font-size:12px
  }
  .scatter-card .file-label {
    font-size:8px
  }
  .scatter-card small {
    font-size:9px
  }
  .scatter-a {
    left:1%;
    top:25px
  }
  .scatter-b {
    left:auto;
    right:0;
    top:2px
  }
  .scatter-c {
    right:0;
    top:198px
  }
  .scatter-d {
    left:0;
    bottom:95px
  }
  .scatter-e {
    right:20%;
    bottom:0;
    max-width:215px
  }
  .scatter-center {
    width:81px;
    height:81px;
    top:43%;
    border-radius:22px
  }
  .scatter-center .symbol {
    width:46px;
    height:46px
  }
  .scatter-conclusion {
    font-size:16px;
    margin-top:30px
  }
  .save-story {
    display:flex;
    flex-direction:column;
    gap:30px;
    padding-bottom:40px;
    position:relative
  }
  .story-device {
    position:relative;
    top:auto;
    align-self:center;
    order:2;
    max-width:100%;
    width:100%;
    padding:15px 0 25px
  }
  .story-copy {
    display:contents
  }
  .story-step {
    min-height:auto;
    display:block;
    padding-bottom:30px;
    order:1
  }
  .story-step[data-save-step=saving] {
    order:3;
    padding-top:30px
  }
  .story-step[data-save-step=saved] {
    order:4;
    min-height:auto;
    padding-top:35px
  }
  .story-step h2 {
    margin-bottom:21px
  }
  .story-step>p:not(.eyebrow) {
    font-size:15px
  }
  .story-step .eyebrow {
    margin-bottom:18px
  }
  .save-phone {
    transform:rotate(-2deg)
  }
  .story-device::before {
    inset:0 -10px
  }
  .format-chips {
    margin:23px 0 10px
  }
  .format-chips span {
    font-size:11px;
    padding:6px 12px
  }
  .signature {
    font-size:14px!important
  }
  .understand {
    grid-template-columns:1fr;
    gap:50px;
    padding-top:70px
  }
  .understand-copy>p:not(.eyebrow) {
    font-size:15px;
    margin-top:24px
  }
  .understand-footnote {
    margin-top:25px;
    font-size:12px
  }
  .understand-visual {
    max-width:400px
  }
  .source-paper {
    padding:20px
  }
  .boarding-card {
    padding:25px
  }
  .boarding-card h3 {
    font-size:23px
  }
  .flight-route strong {
    font-size:13px
  }
  .find-section {
    margin-top:10px
  }
  .find-layout {
    grid-template-columns:1fr;
    gap:50px
  }
  .find-copy h2 {
    font-size:clamp(2.1rem,6vw,2.8rem)
  }
  .find-copy>p:not(.eyebrow) {
    font-size:15px;
    margin-top:22px
  }
  .query-examples {
    max-width:100%;
    margin-top:27px
  }
  .query-examples button {
    font-size:13px
  }
  .find-phone {
    transform:rotate(2deg)
  }
  .find-annotation {
    font-size:11px
  }
  .things-heading,.experience-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:25px;
    margin-bottom:30px
  }
  .things-heading>p,.experience-heading>p {
    font-size:14px
  }
  .memory-grid {
    grid-template-columns:repeat(2,1fr);
    gap:14px
  }
  .editorial-card {
    padding:22px;
    border-radius:12px
  }
  .editorial-flight {
    grid-column:span 2;
    min-height:330px
  }
  .editorial-receipt {
    grid-column:span 2;
    min-height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:25px;
    align-items:start
  }
  .editorial-receipt .file-label {
    grid-column:span 2
  }
  .receipt-preview {
    grid-column:2;
    grid-row:2 / span 2;
    margin-bottom:15px
  }
  .editorial-receipt h3 {
    grid-column:1;
    grid-row:2;
    font-size:23px
  }
  .editorial-receipt>p {
    grid-column:1;
    grid-row:3
  }
  .editorial-link,.editorial-note {
    grid-column:span 1;
    min-height:285px;
    padding:18px
  }
  .editorial-link h3 {
    font-size:19px
  }
  .editorial-note .handwritten-note {
    font-size:17px;
    margin-bottom:24px
  }
  .editorial-note h3 {
    font-size:16px
  }
  .editorial-link>p {
    font-size:12px
  }
  .editorial-document {
    grid-column:span 2;
    min-height:270px
  }
  .editorial-document h3 {
    font-size:26px
  }
  .editorial-document .file-label {
    margin-bottom:22px
  }
  .attention {
    grid-template-columns:1fr;
    gap:30px
  }
  .attention h2 {
    font-size:clamp(2rem,5.6vw,2.6rem)
  }
  .attention-copy>p:not(.eyebrow) {
    font-size:15px;
    margin-top:24px
  }
  .attention-stack {
    padding:25px 3px;
    max-width:450px;
    width:100%;
    margin-inline:auto
  }
  .notification h3 {
    font-size:19px
  }
  .notification small {
    font-size:9px
  }
  .notification p {
    font-size:12px
  }
  .notification-icon {
    width:40px;
    height:40px
  }
  .reminder-choice {
    flex-direction:row;
    align-items:center;
    gap:15px
  }
  .simplicity {
    padding-block:100px
  }
  .simplicity h2 {
    font-size:clamp(2.65rem,8vw,4rem)
  }
  .no-organizing {
    flex-direction:column;
    gap:8px;
    margin-top:30px;
    font-size:14px
  }
  .simple-conversation {
    gap:23px;
    margin-top:55px
  }
  .simple-conversation>span:first-child {
    font-size:31px
  }
  .simple-divider {
    width:35px
  }
  .simple-conversation strong {
    font-size:42px
  }
  .simple-conversation small {
    font-size:11px
  }
  .security {
    padding-block:90px
  }
  .security-heading h2 {
    font-size:clamp(2.8rem,8vw,4rem)
  }
  .security-heading>p:last-child {
    font-size:15px
  }
  .privacy-columns {
    grid-template-columns:1fr;
    margin-top:40px;
    gap:0
  }
  .privacy-columns article,.privacy-columns article:first-child,.privacy-columns article:last-child {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:25px 0;
    display:grid;
    grid-template-columns:28px 1fr;
    column-gap:14px
  }
  .privacy-columns article:last-child {
    border-bottom:0
  }
  .privacy-columns article>span {
    grid-row:span 2;
    padding-top:3px
  }
  .privacy-columns h3 {
    margin:0 0 10px;
    font-size:20px
  }
  .privacy-columns p {
    max-width:100%;
    font-size:14px
  }
  .screen-tabs {
    margin-top:30px;
    gap:5px;
    justify-content:flex-start
  }
  .screen-tabs button {
    padding:7px 12px;
    font-size:12px
  }
  .experience-stage {
    height:700px
  }
  .gallery-center {
    transform:none
  }
  .gallery-left {
    transform:translateX(-195px) translateY(40px) rotate(-10deg) scale(.72);
    filter:brightness(.35)
  }
  .gallery-right {
    transform:translateX(195px) translateY(5px) rotate(10deg) scale(.72);
    filter:brightness(.35)
  }
  .experience-caption {
    font-size:11px;
    max-width:250px;
    margin-inline:auto
  }
  .download {
    padding-block:100px 75px
  }
  .download::before {
    inset:0 -20px
  }
  .download h2 {
    font-size:clamp(2.55rem,7.4vw,3.7rem)
  }
  .download-callout {
    font-size:clamp(1.8rem,5.7vw,2.6rem);
    margin-top:20px
  }
  .download-support {
    font-size:14px
  }
  .store-buttons {
    gap:12px;
    flex-wrap:wrap;
    margin-top:29px
  }
  .store-button {
    min-width:175px;
    padding:12px 15px;
    gap:11px
  }
  .store-button strong {
    font-size:17px
  }
  .store-button small {
    font-size:9px
  }
  .store-button svg {
    width:24px
  }
  .store-status {
    font-size:11px
  }
  .footer {
    padding-top:38px
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:27px;
    padding-bottom:35px
  }
  .footer .wordmark {
    width:135px;
    height:36px
  }
  .footer-top>p {
    font-size:12px
  }
  .footer nav {
    font-size:12px;
    gap:10px
  }
  .footer-bottom {
    font-size:10px;
    gap:15px;
    flex-wrap:wrap;
    padding-block:22px 25px
  }
}

@media(max-width:380px) {
  .wrap {
    width:calc(100% - 32px)
  }
  .hero h1 {
    font-size:clamp(2.5rem,12vw,3.05rem)
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .button {
    font-size:11px;
    gap:13px;
    padding-inline:13px
  }
  .hero-actions .text-link {
    font-size:11px
  }
  .hero-visual {
    min-height:650px
  }
  .hero-phone {
    width:270px;
    height:590px
  }
  .memory-flight {
    right:0;
    font-size:10px
  }
  .memory-invoice {
    left:0;
    font-size:10px
  }
  .memory-invoice .file-icon {
    display:none
  }
  .phone {
    width:280px;
    height:610px
  }
  .hero-phone {
    width:270px;
    height:590px
  }
  .editorial-receipt {
    column-gap:15px
  }
  .receipt-preview {
    padding:15px
  }
  .receipt-preview strong {
    font-size:20px
  }
  .editorial-receipt h3 {
    font-size:20px
  }
  .reminder-choice {
    flex-direction:column;
    align-items:flex-start
  }
  .store-button {
    min-width:100%;
    justify-content:center
  }
  .store-button>span:last-child {
    margin-left:15px
  }
  .header-cta {
    font-size:10px;
    padding-inline:10px
  }
  .header .wordmark {
    width:119px;
    height:32px
  }
  .header-inner {
    gap:10px
  }
  .editorial-card {
    padding:18px
  }
  .editorial-link,.editorial-note {
    padding:16px
  }
  .scatter-e {
    right:17%
  }
  .simple-conversation {
    gap:17px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .js .reveal {
    opacity:1;
    transform:none
  }
  .scatter-field .scatter-card {
    transform:rotate(var(--scatter-rotation,0deg));
    opacity:1!important
  }
  .preloader {
    display:none
  }
}

.app-item-button {
  width:100%;
  text-align:left;
  background:none;
  border-inline:0;
  border-top:0
}

.app-item-button:hover {
  background:#22182e;
  border-radius:8px
}

.app-alert-button {
  text-align:left;
  width:100%
}

.app-search[type=button] {
  width:100%;
  text-align:left
}

.app-nav {
  flex-shrink:0
}

.app-filter input {
  background:none;
  border:0;
  outline-offset:4px;
  min-width:0;
  width:100%;
  font-size:11px;
  color:#c4b2d8
}

.app-filter input::placeholder {
  color:#94819f
}

.app-profile-row {
  display:flex;
  justify-content:space-between;
  width:100%;
  text-align:left;
  background:none;
  border-inline:0;
  border-top:0
}

.app-profile-row:hover {
  color:#e6d5fb
}

.app-detail-heading {
  margin-top:24px
}

.app-demo-placeholder {
  margin-top:22px
}

.app-response:not(:empty) {
  margin-top:24px
}

.app-result-question {
  margin-bottom:20px
}

.app-empty {
  margin-top:15px
}

.app-response .app-ticket {
  margin-top:10px
}

.app-content {
  min-height:0
}

.app-button:disabled {
  opacity:.65
}

.app-capture-options button:hover {
  border-color:#8b5cf6
}

.phone[data-current-screen=save] .app-toolbar {
  margin-bottom:18px
}

.phone[data-current-screen=save] .app-title {
  font-size:26px;
  margin-bottom:9px
}

.phone[data-current-screen=save] .app-capture-options {
  margin:18px 0
}

.phone[data-current-screen=save] .app-capture-options button {
  padding:9px 3px;
  min-height:56px
}

.phone[data-current-screen=save] .app-input-box {
  min-height:78px;
  padding:13px
}

.phone[data-current-screen=save] .app-button {
  margin-top:15px
}

.phone[data-current-screen=save] .app-safety-note {
  margin-top:10px
}

.hero-orbit {
  transform:none;
  max-width:110%
}

.wordmark {
  isolation:auto
}

.brand {
  mix-blend-mode:screen
}

.hero-visual::before {
  max-width:110%
}

.understand-visual::before {
  inset:70px 0 -40px
}

.attention-stack::before {
  inset:0 -10px
}

.wordmark,.symbol,.brand {
  mix-blend-mode:normal
}

.wordmark img,.symbol img {
  mix-blend-mode:screen
}

.header {
  background:var(--bg)
}

.download {
  background:radial-gradient(ellipse at 50% 52%,#5b21b625,transparent 65%),var(--bg)
}

.download::before {
  display:none
}

.phone[data-current-screen=saved] .app-toolbar {
  margin-bottom:12px
}

.phone[data-current-screen=saved] .app-success {
  width:26px;
  height:26px;
  font-size:15px;
  margin-bottom:8px
}

.phone[data-current-screen=saved] .app-title.large {
  font-size:30px;
  margin-bottom:12px
}

.phone[data-current-screen=saved] .app-ticket {
  padding:12px
}

.phone[data-current-screen=saved] .app-ticket-icon {
  display:none
}

.phone[data-current-screen=saved] .app-ticket h3 {
  font-size:15px;
  margin-bottom:5px
}

.phone[data-current-screen=saved] .app-route {
  margin:8px 0;
  padding-bottom:8px
}

.phone[data-current-screen=saved] .app-remind {
  margin-top:12px;
  padding:10px;
  font-size:11px
}

.phone[data-current-screen=saved] .app-button {
  margin-top:12px;
  padding:9px;
  font-size:11px
}

.phone[data-current-screen=saved] .secondary {
  margin-top:6px
}

@media(max-width:760px) {
  .understand-visual::before {
    inset:40px 0 -20px
  }
}

@media (max-width: 380px) {
  .hero-phone, .save-phone, .find-phone {
    transform: none;
  }
}

.symbol {
  mix-blend-mode: screen;
}

/* Abertura: luz, tipografia e profundidade compartilham a mesma transição. */
.hero-line {
  display:inline-block;
  max-width:100%;
  overflow:clip;
  vertical-align:top;
  padding-block:.09em;
  margin-block:-.09em
}

.hero-line>span {
  display:inline-block;
  max-width:100%;
  transform-origin:50% 100%
}

.hero-animated .hero-visual::before {
  animation:hero-light-wake 1.5s var(--ease) both,hero-light-breathe 9s 1.5s ease-in-out 2 alternate;
  animation-play-state:paused;
  translate:calc(var(--hero-mx,0) * 12px) calc(var(--hero-my,0) * 8px);
  transition:translate .8s var(--ease)
}

.hero-animated .hero-in-view:not(.hero-suspended) .hero-visual::before {
  animation-play-state:running
}

.hero-animated .hero-phone .phone-shell::after {
  content:"";
  position:absolute;
  inset:-20%;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(226,207,255,.07) 48%,rgba(226,207,255,.02) 54%,transparent 64%);
  animation:hero-glass-light 1.6s .3s var(--ease) both
}

.hero-actions .button {
  position:relative;
  overflow:hidden
}

.hero-actions .button::before {
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.14),transparent 60%);
  transform:translateX(-110%);
  transition:transform .65s var(--ease)
}

.hero-actions .button:hover::before,.hero-actions .button:focus-visible::before {
  transform:translateX(110%)
}

.hero-actions .play-icon {
  transition:border-color .25s,scale .25s var(--ease)
}

.hero-actions .text-link:hover .play-icon {
  border-color:#b794ec;
  scale:1.08
}

.hero .floating-memory {
  transition:scale .35s var(--ease),border-color .35s,translate .7s var(--ease)
}

@media(hover:hover) and (pointer:fine) {
  .hero .floating-memory:hover {
    scale:1.025;
    border-color:#8260aa
  }
}

@media(min-width:761px) and (prefers-reduced-motion:no-preference) {
  .hero-phone {
    translate:calc(var(--hero-mx,0) * 3px) calc(var(--hero-my,0) * 2px + var(--hero-scroll,0) * -24px);
    rotate:x calc(var(--hero-my,0) * -1deg);
    transition:translate .7s var(--ease),rotate .7s var(--ease)
  }
  .hero .memory-invoice {
    translate:calc(var(--hero-mx,0) * -7px) calc(var(--hero-my,0) * -5px + var(--hero-scroll,0) * 18px)
  }
  .hero .memory-flight {
    translate:calc(var(--hero-mx,0) * -5px) calc(var(--hero-my,0) * -4px + var(--hero-scroll,0) * 12px)
  }
  .hero .memory-reminder {
    translate:calc(var(--hero-mx,0) * -3px) calc(var(--hero-my,0) * -3px + var(--hero-scroll,0) * 8px)
  }
}

@keyframes hero-light-wake {
  from { opacity:.25; transform:scale(.78) }
  to { opacity:.9; transform:scale(1) }
}

@keyframes hero-light-breathe {
  from { opacity:.9; transform:scale(1) }
  to { opacity:.72; transform:scale(1.025) }
}

@keyframes hero-glass-light {
  from { opacity:0; transform:translateX(-70%) }
  25% { opacity:1 }
  to { opacity:0; transform:translateX(70%) }
}

@media(max-width:760px) {
  .preloader-mark { width:min(480px,110vw) }
  .hero-animated .hero-visual::before { animation:hero-light-wake 1.2s var(--ease) both; translate:none }
}

@media(prefers-reduced-motion:reduce) {
  .intro-started .preloader:not([hidden]) { display:none }
  .intro-pending .hero-copy>*,.intro-pending .hero-visual,.intro-pending .scroll-cue { opacity:1 }
  .hero-animated .hero-phone .phone-shell::after { display:none }
  .hero .floating-memory,.hero-phone,.hero-visual::before { translate:none; rotate:none; scale:none }
}

/* Narrativa: reunir, guardar, entender e recuperar. Valores vêm do scroll nativo. */
.memory-connections {
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  opacity:0; fill:none; stroke:#8555b0; stroke-width:1; overflow:visible
}
.memory-connections path { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--gather,0)) }
.motion-chapter .memory-connections { opacity:calc(var(--gather,0) * .3) }
.motion-chapter .scatter-card {
  opacity:1; transition:none;
  transform:translate(calc(var(--gather,0) * var(--gather-x,0px)),calc(var(--gather,0) * var(--gather-y,0px))) rotate(calc(var(--scatter-rotation,0deg) * (1 - var(--gather,0) * .6))) scale(calc(1 - var(--gather,0) * .025))
}
.scatter-a { --gather-x:64px; --gather-y:20px }
.scatter-b { --gather-x:14px; --gather-y:30px }
.scatter-c { --gather-x:-64px; --gather-y:0px }
.scatter-d { --gather-x:30px; --gather-y:-28px }
.scatter-e { --gather-x:-30px; --gather-y:-22px }
.motion-chapter .scatter-center { scale:calc(.92 + var(--gather,0) * .08); border-color:#62437f }
.scattered { position:relative }
.scattered::after {
  content:""; position:absolute; left:50%; bottom:0; width:1px; height:70px;
  background:linear-gradient(transparent,#8250b269,transparent);
  transform:scaleY(var(--gather,0)); transform-origin:top; pointer-events:none
}
.story-device { isolation:isolate }
.story-step .step-number { transition:background .4s,border-color .4s,color .4s }
.story-active .step-number { background:#2b1940; border-color:#9e6ec9; color:#e6c9ff }
.motion-chapter .story-device::before {
  opacity:calc(.55 + var(--chapter-p,0) * .45);
  transform:scale(calc(.92 + var(--chapter-p,0) * .08))
}
.phone-content { overscroll-behavior:contain; min-height:0 }
.phone-shell { overflow:hidden }
.app-success { animation:memory-confirm .65s var(--ease) }
.phone[data-current-screen=saving] .phone-content::before {
  content:""; position:absolute; inset:12%; border-radius:50%;
  background:radial-gradient(ellipse,#7930c322,transparent 68%);
  pointer-events:none; animation:save-energy 1.8s ease-in-out infinite alternate;
  animation-play-state:paused
}
.chapter-in-view .phone-content::before { animation-play-state:running }
.app-spinner { animation-play-state:paused }
.chapter-in-view .app-spinner,.hero-in-view .app-spinner { animation-play-state:running }
.page-hidden .app-spinner,.page-hidden .quiet-status>span,.page-hidden .phone-content::before,.page-hidden .memory-retrieval span { animation-play-state:paused!important }
.quiet-status>span { animation-play-state:paused }
.chapter-in-view .quiet-status>span { animation-play-state:running }
.motion-chapter .source-paper { translate:0 calc(var(--document-p,0) * -10px); rotate:calc(var(--document-p,0) * 3deg) }
.js .understand-visual.reveal { transform:none }
.motion-chapter .connection { opacity:calc(.2 + var(--document-p,0) * .8); scale:1 calc(.5 + var(--ticket-p,0) * .5) }
.motion-chapter .boarding-card {
  transform:perspective(900px) translateY(calc((1 - var(--ticket-p,0)) * 30px)) rotateX(calc((1 - var(--ticket-p,0)) * 8deg));
  opacity:calc(.35 + var(--ticket-p,0) * .65)
}
.motion-chapter .flight-route,.motion-chapter .flight-details {
  opacity:calc(.15 + var(--details-p,0) * .85); translate:0 calc((1 - var(--details-p,0)) * 15px)
}
.motion-chapter .ticket-attention { opacity:calc(.12 + var(--reminder-p,0) * .88); translate:0 calc((1 - var(--reminder-p,0)) * 12px) }
.boarding-card::after {
  content:""; position:absolute; top:0; left:12%; width:76%; height:1px;
  background:linear-gradient(90deg,transparent,#bd88ef70,transparent);
  translate:0 calc(var(--ticket-p,0) * 90px); opacity:calc((1 - var(--details-p,1)) * .7); pointer-events:none
}
.find-device { position:relative; isolation:isolate }
.find-device::before {
  content:""; position:absolute; inset:5% 0 8%; z-index:-1;
  background:radial-gradient(ellipse,#6c2daa22,transparent 68%);
  opacity:calc(.4 + var(--chapter-p,0) * .6); pointer-events:none
}
.app-question { transition:border-color .3s,background .3s }
.has-memory .app-question { min-height:64px; height:64px; padding:10px 12px }
.has-memory .app-response .app-ticket { padding:12px }
.has-memory .app-ticket-icon { font-size:17px; margin-bottom:6px }
.has-memory .app-ticket h3 { font-size:16px }
.has-memory .app-route { margin:8px 0; padding-bottom:8px }
.has-memory .app-button { padding:10px }
.is-typing .app-question { border-color:#9864ca; background:#261a32 }
.memory-retrieval { height:32px; display:flex; align-items:center; gap:6px; padding-inline:2px }
.memory-retrieval span {
  height:4px; width:24px; border-radius:4px; background:#b885e7;
  animation:memory-recover .85s ease-in-out infinite alternate; animation-play-state:paused
}
.chapter-in-view .memory-retrieval span { animation-play-state:running }
.memory-retrieval span:nth-child(2) { animation-delay:.12s; width:14px }
.memory-retrieval span:nth-child(3) { animation-delay:.24s; width:6px }
.query-examples button { transition:transform .4s var(--ease),border-color .3s,background .3s }
.query-examples button:hover,.query-examples button:focus-visible { transform:translateX(4px) }
.editorial-card { position:relative; isolation:isolate; transition:rotate .5s var(--ease),translate .5s var(--ease),border-color .4s }
.editorial-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:radial-gradient(ellipse at calc(50% + var(--card-x,0) * 35%) calc(50% + var(--card-y,0) * 35%),#a271dd17,transparent 65%);
  opacity:0; transition:opacity .4s; pointer-events:none
}
.editorial-card:hover::after { opacity:1 }
.motion-chapter .editorial-flight .route-art>span:nth-child(2) { translate:calc((var(--chapter-p,0) - .35) * 35px) 0 }
.motion-chapter .notification { translate:calc((1 - var(--chapter-p,0)) * -14px) 0 }
.motion-chapter .notification-secondary { translate:calc((1 - var(--chapter-p,0)) * 18px) 0 }
.simplicity .simple-divider { transform-origin:left }
.motion-chapter.simplicity .simple-divider { scale:var(--chapter-p,1) 1 }
.security .reveal { transform:none; transition-duration:1s }
.privacy-columns article:hover { border-color:#574465 }
.experience-stage { perspective:1400px }
.motion-chapter .gallery-left { translate:calc((1 - var(--chapter-p,0)) * -35px) calc(var(--chapter-p,0) * -28px) }
.motion-chapter .gallery-right { translate:calc((1 - var(--chapter-p,0)) * 35px) calc(var(--chapter-p,0) * 24px) }
.motion-chapter .gallery-center { translate:0 calc((1 - var(--chapter-p,0)) * 18px) }
.download::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,#7130ba26,transparent 65%);
  opacity:var(--chapter-p,1); transform:scale(calc(.85 + var(--chapter-p,1) * .15))
}
.motion-chapter .download-symbol { rotate:calc((1 - var(--chapter-p,0)) * -8deg); scale:calc(.9 + var(--chapter-p,0) * .1) }
.store-button { transition:translate .35s var(--ease),border-color .3s,background .3s }
.store-button:hover,.store-button:focus-visible { translate:0 -3px }
.footer nav a,.footer-bottom>a { text-underline-offset:5px; transition:color .25s }
.footer nav a:hover,.footer-bottom>a:hover { text-decoration:underline; text-decoration-color:#8653b5 }
@keyframes memory-confirm { from { transform:scale(.6) rotate(-15deg); opacity:0 } to { transform:scale(1) rotate(0); opacity:1 } }
@keyframes save-energy { from { opacity:.5; transform:scale(.94) } to { opacity:1; transform:scale(1.04) } }
@keyframes memory-recover { from { opacity:.25; transform:scaleX(.6) } to { opacity:1; transform:scaleX(1) } }
@media(min-width:761px) and (prefers-reduced-motion:no-preference) {
  .editorial-card:hover { rotate:calc(var(--card-x,0) * 1deg); translate:0 -4px; border-color:#72518b }
  .motion-chapter .save-phone { rotate:calc(var(--chapter-p,0) * 2deg) }
  .motion-chapter .find-phone { rotate:calc(var(--chapter-p,0) * -2deg) }
  .memory-invoice { top:78px }
  .visual-caption { bottom:-14px }
}
@media(max-width:760px) {
  .scatter-a { --gather-x:8px; --gather-y:10px }
  .scatter-b { --gather-x:-5px; --gather-y:12px }
  .scatter-c { --gather-x:-8px; --gather-y:0px }
  .scatter-d { --gather-x:8px; --gather-y:-12px }
  .scatter-e { --gather-x:0px; --gather-y:-12px }
  .memory-connections { display:none }
  .motion-chapter .boarding-card { transform:translateY(calc((1 - var(--ticket-p,0)) * 16px)) }
  .motion-chapter .gallery-left,.motion-chapter .gallery-right,.motion-chapter .gallery-center { translate:none }
  .editorial-card::after { display:none }
  .notification { transform:rotate(-1deg); padding:20px 16px }
  .notification-secondary { transform:rotate(1deg); margin-left:12px }
  .notification>div { min-width:0 }
  .motion-chapter .notification,.motion-chapter .notification-secondary { translate:none }
  .memory-invoice { top:75px }
}
@media(prefers-reduced-motion:reduce) {
  .memory-connections,.scattered::after,.boarding-card::after { display:none }
  .source-paper,.connection,.boarding-card,.flight-route,.flight-details,.ticket-attention,
  .notification,.gallery-phone,.download-symbol,.store-button,.editorial-card { translate:none!important; rotate:none!important; scale:none!important; opacity:1!important }
  .app-question { border-color:#43304f }
  .query-examples button:hover,.query-examples button:focus-visible { transform:none }
  .simple-divider { scale:1 1!important }
  .intro-pending body>header,.intro-pending body>main,.intro-pending body>footer { visibility:visible }
}