/* Lockspot home page. The default rules are the designed end state; motion only starts under
   .js + prefers-reduced-motion: no-preference, so no-JS and Reduce Motion visitors see still, finished screens. */

.sec { position: relative; padding-block: var(--section); overflow-x: clip; }
.sec + .sec { border-top: 1px solid rgb(46 46 51 / .5); }
.sec__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.label + .h2 { margin-top: 12px; }
.h2 + .lede, .h2 + p { margin-top: 20px; }
.lede + p { margin-top: 16px; }
.dots-bg { background-image: radial-gradient(circle at 2px 2px, #2C2C32 1.3px, transparent 1.8px); background-size: 10px 10px; }

/* ---------- phone mockup: generic frame, no island, notch or buttons ---------- */
.phone { --w: 320; --k: calc((var(--w) * .936 - 2) / 390); position: relative; isolation: isolate; width: calc(var(--w) * 1px); margin: 0; flex: none; }
.phone--md { --w: 300; }
.phone--sm { --w: 240; }
@media (max-width: 599px) { .phone--lg { --w: 272; } .phone--md { --w: 260; } }
.phone::before { content: ''; position: absolute; z-index: -1; inset: -16% -38%; background: radial-gradient(50% 45% at 50% 55%, rgb(108 99 230 / .28), rgb(108 99 230 / 0) 70%); pointer-events: none; }
.phone__frame { position: relative; padding: calc(var(--w) * .032px); background: #000; border: 1px solid #3A3A40; border-radius: calc(var(--w) * .165px); box-shadow: 0 30px 80px rgb(0 0 0 / .45); }
.phone__screen { position: relative; overflow: hidden; aspect-ratio: 390 / 844; border-radius: calc(var(--w) * .133px); background: var(--bg); }
.app { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; background: var(--bg); color: #fff; font-family: var(--font); line-height: normal; -webkit-user-select: none; user-select: none; }
.app p { margin: 0; }
.app svg { max-width: none; }

/* in-app pieces (src/components/ui.tsx, MapPage, BottomNav, locked, RecapPage) */
.a-map { position: absolute; left: 0; top: 0; }
.mlabel { font-family: var(--font); font-weight: 700; font-size: 8px; letter-spacing: 1.6px; fill: #8A8A93; }
.a-sb { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; }
.a-sb span { position: absolute; left: 0; top: 17px; width: 140px; text-align: center; font-weight: 700; font-size: 17px; letter-spacing: -.3px; }
.a-sb svg { position: absolute; left: 286px; top: 21px; width: 76px; height: 13px; }
.a-top { position: absolute; left: 0; right: 0; top: 0; padding: 52px 16px 0; display: flex; justify-content: space-between; align-items: center; z-index: 4; }
.a-top__mid { display: flex; flex-direction: column; align-items: center; }
.a-round { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: grid; place-items: center; }
.a-round--accent { background: var(--accent); border: 0; }
.a-word { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 22px; letter-spacing: -.594px; line-height: 1.2; }
.a-word__tile { width: 18px; height: 18px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; }
.a-word__tile::after { content: ''; width: 7px; height: 7px; border-radius: 2px; background: #fff; }
.a-word--sm { font-size: 18px; letter-spacing: -.486px; gap: 6px; }
.a-word--sm .a-word__tile { width: 15px; height: 15px; border-radius: 5px; }
.a-word--sm .a-word__tile::after { width: 6px; height: 6px; }
.a-count { display: grid; margin-top: 3px; font-weight: 600; font-size: 12px; line-height: 15px; color: var(--text-2); }
.a-count > span { grid-area: 1 / 1; text-align: center; }
.a-count__a { opacity: 0; }
.zchip { position: absolute; transform: translate(-50%, -100%); padding-bottom: 8px; z-index: 2; }
.zchip--desk { left: 295px; top: 202px; }
.zchip--lec { left: 298px; top: 316px; }
.zchip--lib { left: 125px; top: 172px; }
.zchip__in { position: relative; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #0E0E10; box-shadow: inset 0 0 0 1px #fff; font-weight: 700; font-size: 12px; line-height: 14px; white-space: nowrap; }
.zchip__in .ic { width: 12px; height: 12px; }
.zchip__on { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); }
.zchip__icons { position: relative; width: 12px; height: 12px; }
.zchip__icons .ic { position: absolute; inset: 0; }
.zchip__t { position: relative; }
.zc-pin { opacity: 0; }
.you { position: absolute; left: 0; top: 0; z-index: 3; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgb(255 255 255 / .12); display: grid; place-items: center; transform: translate(112px, 236px); }
.you span { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 11px; color: #000; }
.finger { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 9px rgb(255 255 255 / .4); opacity: 0; }
.h-trace, .h-lib--idle { opacity: 0; }
.h-ring { transform-box: fill-box; transform-origin: center; }
.a-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--border); border-radius: 28px 28px 0 0; overflow: hidden; }
.a-sheet--map { top: 422px; z-index: 5; }
.a-handle { width: 36px; height: 5px; border-radius: 3px; background: var(--handle); margin: 10px auto 0; }
.a-state { position: absolute; left: 16px; right: 16px; top: 29px; }
.a-state--a { opacity: 0; }
.a-h2 { font-weight: 800; font-size: 22px; letter-spacing: -.4px; line-height: 28px; }
.a-sub { margin-top: 3px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-2); }
.a-plan { margin-top: 10px; padding: 10px 14px; border-radius: 16px; background: var(--card-2); font-weight: 700; font-size: 14px; line-height: 20px; }
.a-label { margin: 22px 0 8px; font-weight: 700; font-size: 13px; line-height: 17px; color: var(--text-3); }
.a-rows { display: flex; flex-direction: column; gap: 8px; }
.a-zrow { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px; border-radius: 20px; border: 1px solid var(--border-2); background: var(--card-2); }
.a-zrow__ic { width: 40px; height: 40px; flex: none; border-radius: 13px; background: var(--card); display: grid; place-items: center; }
.a-zrow__ic .ic { width: 18px; height: 18px; }
.a-zrow__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.a-zrow__t b, .a-zrow__t i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-zrow__t b { font-weight: 700; font-size: 16px; line-height: 20px; }
.a-zrow__t i { margin-top: 2px; font-style: normal; font-weight: 500; font-size: 13px; line-height: 17px; color: var(--text-2); }
.a-zrow em { font-style: normal; font-weight: 700; font-size: 12px; color: var(--text-2); }
.a-zrow--on { background: var(--accent); border-color: var(--accent); }
.a-zrow--on .a-zrow__ic { background: rgb(255 255 255 / .18); }
.a-zrow--on i, .a-zrow--on em { color: #fff; }
.a-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 34px; background: linear-gradient(rgb(28 28 31 / 0), #1C1C1F 26px); }
.app--recap .a-nav { background: linear-gradient(rgb(14 14 16 / 0), #0E0E10 26px); }
.a-dots { display: flex; gap: 6px; height: 6px; }
.a-dots i { width: 6px; height: 6px; border-radius: 3px; background: #4A4A52; }
.a-dots i.on { width: 18px; background: var(--accent); }
.a-nav__row { width: 100%; padding: 0 44px; display: flex; justify-content: space-between; align-items: center; }
.a-navbtn { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--border); background: var(--card); display: grid; place-items: center; }
.a-navbtn .ic { width: 22px; height: 22px; }
.a-navbtn--on { border-color: var(--accent); }
.a-shutter { position: relative; width: 88px; height: 88px; }
.a-shutter__ring { position: absolute; inset: 0; width: 88px; height: 88px; }
.a-shutter__ring circle { fill: rgb(14 14 16 / .55); stroke: rgb(255 255 255 / .85); stroke-width: 5; }
.a-shutter__disc { position: absolute; left: 15px; top: 15px; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.a-shutter__disc .ic { width: 24px; height: 24px; }
.a-nav__label { font-weight: 700; font-size: 12px; line-height: 15px; color: var(--text-4); }
.a-card { background: var(--card); border-radius: 22px; border: 1px solid #26262A; padding: 16px; }
.a-title { font-weight: 800; font-size: 32px; letter-spacing: -.8px; line-height: 40px; }

/* lock-in screen (src/app/locked.tsx) */
.app--locked { padding: 56px 20px 50px; display: flex; flex-direction: column; }
.a-lk__top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 12px; }
.a-pill-s { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-weight: 700; font-size: 13px; }
.a-pill-s .ic { width: 13px; height: 13px; }
.a-ring { position: relative; margin-top: 30px; align-self: center; width: 232px; height: 232px; }
.a-ring svg { width: 232px; height: 232px; transform: rotate(-90deg); }
.a-ring__track { fill: none; stroke: var(--card-2); stroke-width: 12; }
.a-ring__fill { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 24.9; }
.a-ring__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.a-ring__k { font-weight: 700; font-size: 15px; color: var(--text-2); }
.a-ring__t { margin-top: 2px; font-weight: 800; font-size: 50px; letter-spacing: -1.5px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.a-ring__s { margin-top: 2px; font-weight: 600; font-size: 13px; color: var(--text-2); }
.a-next { margin-top: 18px; text-align: center; font-weight: 600; font-size: 14px; color: var(--text-4); }
.a-card--line { margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 14px; }
.a-mascot { width: 54px; height: 54px; flex: none; }
.a-card--line span { flex: 1; font-weight: 700; font-size: 15px; line-height: 20px; }
.a-card--block { margin-top: 10px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.a-card--block span { flex: 1; font-weight: 600; font-size: 13px; line-height: 18px; color: var(--text-4); }
.a-card--block b { font-weight: 800; font-size: 13px; }
.a-lk__btns { margin-top: auto; display: flex; gap: 8px; }
.a-pill { height: 56px; padding: 0 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--card-2); border: 1px solid var(--handle); font-weight: 700; font-size: 15px; white-space: nowrap; }
.a-pill .ic { width: 18px; height: 18px; }
.a-pill--grow { flex: 1; }

/* Recap (src/components/home/RecapPage.tsx) */
.a-rc { position: absolute; left: 0; right: 0; top: 0; padding: 60px 16px 0; }
.a-rc__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.a-rc__week { padding: 18px; }
.a-rc__top { display: flex; align-items: flex-start; gap: 12px; }
.a-rc__top > div:first-child { flex: 1; display: flex; flex-direction: column; }
.a-rc__k { font-weight: 700; font-size: 13px; line-height: 17px; color: var(--text-3); }
.a-rc__v { margin-top: 4px; font-weight: 800; font-size: 34px; letter-spacing: -1px; line-height: 43px; }
.a-rc__s { font-weight: 500; font-size: 13px; line-height: 17px; color: var(--text-2); }
.a-rc__streak { display: flex; flex-direction: column; align-items: flex-end; padding-top: 18px; }
.a-rc__streak span { font-weight: 800; font-size: 26px; line-height: 33px; }
.a-rc__streak i { font-style: normal; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--text-2); }
.a-bars { margin-top: 16px; height: 96px; display: flex; align-items: flex-end; gap: 8px; }
.a-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 11px; line-height: 14px; color: var(--text-3); }
.a-bar i { display: block; width: 100%; border-radius: 8px; background: #74747E; transform-origin: 50% 100%; }
.a-bar--today i { background: var(--accent); }
.a-bar--next i { opacity: .35; }
.b1 { height: 74px; } .b2 { height: 42px; } .b3 { height: 57px; } .b4 { height: 61px; } .b5 { height: 19px; } .b6, .b7 { height: 4px; }
.a-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.a-tile { width: 175px; display: flex; flex-direction: column; padding: 16px; border-radius: 22px; border: 1px solid #26262A; background: var(--card); }
.a-tile b { font-weight: 700; font-size: 14px; line-height: 18px; }
.a-tile em { margin-top: 10px; font-style: normal; font-weight: 800; font-size: 30px; letter-spacing: -.8px; line-height: 38px; }
.a-tile i { margin-top: 4px; font-style: normal; font-weight: 600; font-size: 13px; line-height: 17px; color: var(--text-2); }
.a-tile--on { background: var(--accent); border-color: var(--accent); }
.a-tile--on i { color: #fff; }
.a-rc__drops { margin-top: 26px; font-weight: 800; font-size: 20px; line-height: 25px; }

/* SVG text and icons inside illustrations */
.st { font-family: var(--font); font-weight: 700; fill: #fff; }
.st--title { font-weight: 800; font-size: 20px; letter-spacing: -.4px; }
.st--sub { font-weight: 600; font-size: 13px; fill: #C7C7CC; }
.st--chip { font-size: 11px; fill: #C7C7CC; }
.st--name { font-size: 16px; }
.st--rowsub { font-weight: 500; font-size: 13px; fill: #A1A1AA; }
.st--edit { font-size: 12px; fill: #A1A1AA; }
.st--w { fill: #fff; }
.st--apps { font-size: 14px; }
.st--note { font-weight: 500; font-size: 12px; fill: #8A8A93; }
.st--toast { font-size: 13px; fill: #000; }
.st--you { font-weight: 800; font-size: 11px; fill: #000; }
.st--you2 { font-weight: 800; font-size: 10px; fill: #000; }
.st--pd { font-size: 14px; }
.st--q { font-weight: 800; font-size: 8px; fill: #A1A1AA; }
.su { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.su--c { stroke-width: 2.2; }
.su--k { stroke: #0E0E10; stroke-width: 2.4; }

/* mascot (src/components/Mascot.tsx geometry) */
.mascot { overflow: visible; }
.mascot .m-shackle { fill: none; stroke: #fff; stroke-width: 8; }
.mascot .m-body > rect { fill: #fff; }
.m-body { transform-box: fill-box; transform-origin: 50% 100%; }
.m-eyes, .m-mouth { transition: opacity var(--t2) ease; }
.m-eyes--side, .m-mouth--flat { opacity: 0; }

/* ---------- hero ---------- */
.hero { position: relative; overflow-x: clip; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 28px) 0 56px; }
.hero__dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 2px 2px, #2C2C32 1.3px, transparent 1.8px); background-size: 10px 10px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 70% 50%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 70% 50%, #000 15%, transparent 75%); }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.hero .label { margin-bottom: 14px; }
.hero .h1 { margin-bottom: 20px; }
.hero__sub { max-width: 26em; margin-bottom: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero__micro { margin-top: 18px; font-size: 14px; color: var(--text-2); }
.hero__stage { position: relative; isolation: isolate; justify-self: center; }
.hero__stage .phone { z-index: 1; }
.peek { position: absolute; z-index: 0; left: -84px; bottom: 74px; width: 120px; height: 120px; -webkit-mask-image: linear-gradient(#000 64%, transparent 80%); mask-image: linear-gradient(#000 64%, transparent 80%); }
.peek .mascot { width: 100%; height: 100%; }
.tiles { position: absolute; z-index: 2; right: -84px; top: 15%; margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.tile { position: relative; width: 92px; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 22px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 18px 40px rgb(0 0 0 / .45); color: var(--text-3); font-weight: 700; font-size: 12px; line-height: 1.2; text-align: center; }
.tile span:not(.tile__badge) { color: var(--text-4); }
.tile:nth-child(2) { transform: translateX(-24px); }
.tile:nth-child(3) { transform: translateX(6px); }
.tile .ic { width: 30px; height: 30px; stroke-width: 1.8; }
.tile__badge { position: absolute; top: -9px; right: -9px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); display: grid; place-items: center; color: #fff; }
.tile__badge .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.replay { position: absolute; z-index: 3; right: -16px; bottom: 28px; }
.h-clock { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 1099px) { .tiles { display: none; } }
@media (max-width: 599px) {
  .hero { padding-top: calc(var(--header-h) + 20px); }
  .hero .h1 { margin-bottom: 16px; }
  .hero__sub { margin-bottom: 24px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 4px; }
  .hero__cta .cta-soon { width: 100%; justify-content: center; }
  .hero__cta .text-link, .hero__cta .appstore-badge { align-self: flex-start; }
  .hero__micro { margin-top: 10px; }
  .peek { left: -54px; bottom: 60px; width: 84px; height: 84px; }
  .replay { right: -8px; }
}
@media (min-width: 900px) {
  .hero { min-height: min(924px, 100svh); display: grid; align-items: center; padding-bottom: 72px; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .hero__copy { grid-column: 1 / span 6; }
  .hero__stage { grid-column: 8 / span 5; }
}

/* ---------- how it works ---------- */
.how__steps { position: relative; }
.how__list { list-style: none; margin: 0; padding: 0 0 0 44px; display: grid; gap: 24px; }
.step { position: relative; padding: 24px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--border); }
.step__pin { position: absolute; z-index: 1; left: -44px; top: 22px; width: 28px; height: 28px; overflow: visible; }
.step__pin text { font-family: var(--font); font-weight: 800; font-size: 15px; fill: #fff; }
.step .h3 { margin-bottom: 8px; }
.step p { color: var(--text-2); }
.step__fine { margin-top: 10px; }
.step:not(:last-child)::before, .step:not(:last-child)::after { content: ''; position: absolute; left: -31px; top: 44px; width: 3px; height: calc(100% + 13px); border-radius: 2px; }
.step:not(:last-child)::before { background: repeating-linear-gradient(180deg, #3A3A40 0 2px, transparent 2px 8px); }
.step:not(:last-child)::after { background: var(--accent); transform-origin: 50% 0; }
.how__route { display: none; }
.crop { margin: 0 0 20px; aspect-ratio: 4 / 3; border-radius: var(--r-tile); overflow: hidden; background: var(--map); border: 1px solid var(--border); }
.crop svg { width: 100%; height: 100%; }
.cw-off { opacity: 0; }
.plan { margin-top: 24px; display: grid; gap: 18px; align-items: center; padding: 24px; border-radius: var(--r-card); background: var(--card-2); border: 1px solid var(--border-2); }
.plan p { margin-top: 8px; font-weight: 700; color: var(--text-4); }
.plan__box { padding: 14px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--border-2); font-weight: 700; font-size: 15px; line-height: 1.4; color: #fff; }
.plan .plan__box { margin-top: 0; color: #fff; }
@media (min-width: 900px) {
  .how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 64px 0 0; }
  .step__pin { left: 24px; top: -64px; width: 40px; height: 40px; }
  .step:not(:last-child)::before, .step:not(:last-child)::after { display: none; }
  .how__route { display: block; position: absolute; top: 14px; left: 44px; width: calc((100% - 48px) * 2 / 3 + 48px); height: 3px; background: repeating-linear-gradient(90deg, #3A3A40 0 2px, transparent 2px 8px); }
  .how__route-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; }
  .plan { grid-template-columns: minmax(0, 1fr) auto; padding: 28px 32px; gap: 32px; }
}

/* ---------- your shape, not a circle ---------- */
.shape__explain { margin-top: 16px; font-weight: 700; }
.shape__card { display: grid; gap: 24px; }
.spanel { position: relative; margin: 0; }
.spanel svg { width: 100%; height: auto; aspect-ratio: 520 / 340; border-radius: var(--r-tile); border: 1px solid var(--border); }
.spanel__label { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(14 14 16 / .85); border: 1px solid var(--border); font-weight: 700; font-size: 13px; line-height: 1.3; }
.spanel__chips { display: grid; margin-top: 12px; }
.schip { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border-2); font-weight: 700; font-size: 14px; line-height: 1.3; }
.schip .ic { width: 16px; height: 16px; }
.schip--lock { background: var(--accent); border-color: var(--accent); }
.schip--a { opacity: 0; }
.walker { transform: translate(286px, 262px); }
.sp-circle { transform-box: fill-box; transform-origin: center; }
.sp-on, .wb-lock { opacity: 0; }
.shape__foot { margin-top: 20px; max-width: 640px; }
@media (min-width: 900px) {
  .shape__card { grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--border); }
}

/* ---------- hold to lock in ---------- */
.any__grid { display: grid; gap: 48px; }
.any__phone { display: flex; justify-content: center; }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-4); }
.ticks .ic { margin-top: 3px; }
.demo { margin-top: 28px; width: 100%; max-width: 360px; min-height: 300px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-card); border: 1px solid var(--border); background: radial-gradient(circle at 2px 2px, #2C2C32 1.3px, transparent 1.8px) 0 0 / 10px 10px, var(--card); }
.demo__row { display: flex; align-items: center; gap: 14px; margin-left: 54px; }
.shutter { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px; border: 0; border-radius: 24px; background: none; color: #fff; cursor: pointer; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.shutter:disabled { cursor: default; }
.shutter:focus-visible { outline-offset: 4px; }
.shutter__ring { position: relative; display: block; width: 132px; height: 132px; }
.shutter__ring > svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.shutter__track { fill: rgb(14 14 16 / .55); stroke: rgb(255 255 255 / .85); stroke-width: 5; }
.shutter__fill { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset 180ms ease-out, opacity 0s linear 180ms; }
[data-holding] .shutter__fill { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1000ms linear, opacity 0s; }
[data-done] .shutter__fill { stroke-dashoffset: 0; opacity: 1; transition: none; }
[data-reset] .shutter__fill { transition: none !important; }
.shutter__disc { position: absolute; left: 22.5px; top: 22.5px; width: 87px; height: 87px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.shutter__disc .ic { width: 36px; height: 36px; }
.shutter__label { display: grid; font-weight: 700; font-size: 14px; color: var(--text-4); }
.shutter__label > span { grid-area: 1 / 1; }
.sl-hold, [data-holding] .sl-idle { visibility: hidden; }
[data-holding] .sl-hold { visibility: visible; }
.demo__mascot { width: 40px; height: 40px; margin-bottom: 30px; }
.demo__mascot .m-shackle { transform: translateY(-10px); }
[data-done] .demo__mascot .m-shackle { transform: none; }
.demo__mascot .m-mouth--flat { opacity: 1; }
.demo__mascot .m-mouth--smile, [data-done] .demo__mascot .m-mouth--flat { opacity: 0; }
[data-done] .demo__mascot .m-mouth--smile { opacity: 1; }
.demo__status { min-height: 24px; margin-top: 14px; font-weight: 700; font-size: 15px; line-height: 24px; text-align: center; }
.demo__note { margin-top: 12px; }
@media (min-width: 900px) {
  .any__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
}

/* ---------- meme drops ---------- */
.memes__grid { display: grid; gap: 32px; grid-template-areas: 'copy' 'card' 'drops'; }
.memes__copy { grid-area: copy; }
.memes__card { grid-area: card; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.memes__lead { margin-top: 20px; color: var(--text-4); }
.lines { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lines li { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-weight: 700; font-size: 14px; line-height: 1.35; }
.meme-big { position: relative; width: min(300px, 100%); aspect-ratio: 1; container-type: inline-size; overflow: hidden; border-radius: var(--r-meme); background: var(--meme); border: 1px solid var(--meme-border); }
.meme-cap { position: absolute; left: 16px; right: 16px; text-align: center; font-family: var(--font-meme); font-weight: 400; text-transform: uppercase; font-size: 26px; font-size: 8.8cqw; line-height: 1.05; color: #fff; transition: opacity 240ms ease, transform 240ms ease; }
.meme-cap--t { top: 5.8%; }
.meme-cap--b { bottom: 5.8%; }
.meme-big.is-out .meme-cap { opacity: 0; transform: translateY(-6px); }
.meme-face { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }
.mf, .mm { opacity: 0; }
[data-eyes='focus'] .mf--focus, [data-eyes='wide'] .mf--wide, [data-eyes='side'] .mf--side, [data-eyes='tired'] .mf--tired,
[data-mouth='flat'] .mm--flat, [data-mouth='smile'] .mm--smile { opacity: 1; }
.mf-eyes { transform-box: view-box; transform-origin: 60px 74px; }
.meme-big.is-blink .mf-eyes { animation: blink 120ms ease; }
.meme-ctrl { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; }
.js .meme-ctrl { display: flex; }
.ic-play, [data-paused] .ic-pause { display: none; }
[data-paused] .ic-play { display: block; }
.drops { margin: 0; grid-area: drops; padding: 20px 16px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--border); }
.drops__title { font-weight: 800; font-size: 20px; line-height: 25px; }
.drops__sub { margin: 4px 0 12px; font-weight: 500; font-size: 13px; line-height: 17px; color: var(--text-2); }
.drops__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt { position: relative; height: 170px; overflow: hidden; border-radius: 22px; background: #000; border: 1px solid #26262A; }
.mt svg { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; }
.mt__t, .mt__b { position: absolute; left: 10px; right: 10px; text-align: center; font-family: var(--font-meme); text-transform: uppercase; font-size: 15px; line-height: 1.12; color: #fff; }
.mt__t { top: 12px; }
.mt__b { bottom: 12px; }
.mt__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; background: var(--card); text-align: center; font-weight: 700; font-size: 13px; color: var(--text-2); }
.mt__lock .ic { width: 26px; height: 26px; }
.mt--unlock .mt__lock { opacity: 0; }
@media (min-width: 600px) { .meme-big { width: 340px; } }
@media (min-width: 900px) {
  .memes__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'card copy' 'card drops'; column-gap: 64px; row-gap: 32px; align-items: start; }
  .memes__card { align-self: start; position: sticky; top: calc(var(--header-h) + 40px); }
  .drops { max-width: 440px; }
}

/* ---------- streaks and recap ---------- */
.streak__grid { display: grid; gap: 48px; }
.streak__rule { margin-top: 20px; }
.scard { margin-top: 20px; max-width: 520px; padding: 22px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--border); }
.scard__top { display: flex; align-items: center; gap: 12px; }
.scard__ic { width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--card-2); display: grid; place-items: center; }
.scard__num { flex: 1; font-weight: 700; font-size: 18px; line-height: 1.2; }
.scard__num .tnum { font-weight: 800; font-size: 36px; letter-spacing: -.03em; }
.scard__best { font-weight: 700; font-size: 14px; color: var(--text-2); }
.scard__freeze { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--text-4); }
.week { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.week__days { list-style: none; margin: 12px 0 0; padding: 0 0 22px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-weight: 700; font-size: 13px; color: var(--text-2); }
.day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.day__dot { position: relative; width: min(38px, 100%); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.day__dot .ic { width: 18px; height: 18px; color: #fff; }
.day--done .day__dot { background: var(--accent); }
.day--freeze .day__dot { background: var(--card-2); border: 1px solid var(--border-2); }
.day__miss { position: absolute; inset: -1px; border-radius: 50%; border: 2px dashed var(--text-3); opacity: 0; }
.day--next .day__dot { border: 2px solid var(--border-2); opacity: .35; }
.day__note { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--text-4); }
.streak__h3 { margin-top: 36px; }
.streak__h3 + p { margin-top: 8px; color: var(--text-2); max-width: 520px; }
.streak__phone { display: flex; flex-direction: column; align-items: center; }
.streak__stage { position: relative; }
.share { position: absolute; z-index: 2; left: -150px; bottom: 36px; width: 250px; margin: 0; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 18px 40px rgb(0 0 0 / .45); }
.share blockquote { margin: 0; font-weight: 600; font-size: 14px; line-height: 1.45; }
.share__ic { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--card-2); display: grid; place-items: center; }
.share__ic .ic { width: 18px; height: 18px; }
.phone-cap { margin-top: 16px; text-align: center; }
@media (max-width: 899px) { .share { position: static; width: 100%; max-width: 343px; margin-top: 20px; } }
@media (min-width: 900px) { .streak__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; } }

/* ---------- privacy ---------- */
.priv__grid { display: grid; gap: 40px; }
.priv__diagram { margin: 0; width: 100%; max-width: 400px; justify-self: center; }
.pd-line { transform-box: fill-box; transform-origin: 0 50%; }
.facts { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.facts li { display: flex; flex-direction: column; padding: 20px; border-radius: var(--r-row); background: var(--card); border: 1px solid var(--border); }
.facts__n { font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.facts__l { margin-top: 8px; font-weight: 600; color: var(--text-2); }
.facts__note { margin-top: 14px; font-weight: 600; color: var(--text-2); }
.prows { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; }
.prows li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--r-row); border: 1px solid var(--border); }
.prows .ic { margin-top: 3px; }
.prows p { color: var(--text-4); }
.priv__more { margin-top: 28px; font-weight: 700; }
.priv__more + p { margin-top: 6px; }
@media (min-width: 600px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .priv__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .prows { grid-template-columns: 1fr 1fr; }
  .prows .prows__wide { grid-column: 1 / -1; }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 28px; }
.faq__side p { margin-top: 14px; }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
  .faq__side { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* ---------- final call to action ---------- */
.band { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 24px; justify-items: center; text-align: center; padding: clamp(32px, 6vw, 64px); border-radius: 32px; background: var(--card); border: 1px solid var(--border); }
.band::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 2px 2px, #2C2C32 1.3px, transparent 1.8px); background-size: 10px 10px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 50%, #000, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 70% 50%, #000, transparent 80%); }
.band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 80% 50%, rgb(108 99 230 / .18), rgb(108 99 230 / 0) 70%); }
.band > * { min-width: 0; max-width: 100%; }
.band__mascot { width: 140px; height: 140px; }
.band .m-eyes--focus, .band .m-mouth--smile { opacity: 1; }
.band__cta { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.qr-open { display: none; }
@media (pointer: fine) and (min-width: 900px) { [data-launched='true'] .qr-open { display: inline-flex; } }
@media (max-width: 599px) { .band__cta { flex-direction: column; align-items: stretch; width: 100%; } .band__cta > * { justify-content: center; } .band__copy { width: 100%; } }
@media (min-width: 900px) {
  .band { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; }
  .band__mascot { order: 2; width: 160px; height: 160px; margin-right: 24px; }
  .band__cta { justify-content: flex-start; }
}
.qr { max-width: min(360px, calc(100vw - 32px)); padding: 28px; text-align: center; color: #fff; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--border); }
.qr::backdrop { background: rgb(0 0 0 / .6); }
.qr__code { width: 200px; height: 200px; margin: 20px auto 16px; border-radius: 12px; background: #fff url(img/app-store-qr.svg) center / 86% no-repeat; }
.qr p { margin-bottom: 18px; color: var(--text-4); }

/* ================= motion (only with .js and no reduced-motion preference) ================= */
@media (prefers-reduced-motion: no-preference) {
  .hero__in { animation: rise 480ms var(--ease) both; }
  /* The h1 and lede are the likely LCP, so they slide in without starting invisible. */
  .hero__copy > .hero__in:nth-child(2) { animation-name: riseT; animation-delay: 70ms; }
  .hero__copy > .hero__in:nth-child(3) { animation-name: riseT; animation-delay: 140ms; }

  /* hero demo: start state, then .is-playing runs the 4.8 s sequence once */
  .js [data-hero] .h-trace { opacity: 1; stroke-dasharray: 100; stroke-dashoffset: 100; }
  .js [data-hero] .h-lib--on, .js [data-hero] .h-ring, .js [data-hero] .zchip--lib .zchip__in, .js [data-hero] .zchip__on,
  .js [data-hero] .zc-lock, .js [data-hero] .a-state--b, .js [data-hero] .a-count__b, .js [data-hero] .m-eyes--focus, .js [data-hero] .tile__badge { opacity: 0; }
  .js [data-hero] .zc-pin, .js [data-hero] .a-state--a, .js [data-hero] .a-count__a, .js [data-hero] .m-eyes--side { opacity: 1; }
  .js [data-hero] .you { transform: translate(222px, 392px); }
  .js [data-hero] .tile { color: #fff; }
  [data-hero].is-playing .h-trace { animation: hDraw 1.6s linear .3s both, hOut .4s ease 1.9s forwards; }
  [data-hero].is-playing .finger { animation: hFinger 1.6s linear .3s both, hFingerFade 1.8s linear .2s both; }
  [data-hero].is-playing .h-lib--idle { animation: hIdle 2s linear 1.9s both; }
  [data-hero].is-playing .h-ring { animation: hRing .4s var(--ease) 1.9s both; }
  [data-hero].is-playing .zchip--lib .zchip__in { animation: hPop .4s var(--ease) 1.9s both; }
  [data-hero].is-playing .a-count__a { animation: hOut .3s ease 2s both; }
  [data-hero].is-playing .a-count__b { animation: hIn .3s ease 2s both; }
  [data-hero].is-playing .you { animation: hWalk 1.2s var(--ease-io) 2.3s both; }
  [data-hero].is-playing .h-lib--on, [data-hero].is-playing .zchip__on, [data-hero].is-playing .zc-lock, [data-hero].is-playing .a-state--b { animation: hIn .4s ease 3.5s both; }
  [data-hero].is-playing .zc-pin, [data-hero].is-playing .a-state--a { animation: hOut .4s ease 3.5s both; }
  [data-hero].is-playing .a-zrow--on { animation: hSlide .5s var(--ease) 3.6s both; }
  [data-hero].is-playing .m-shackle { animation: hShackle .6s var(--ease) 3.9s both; }
  [data-hero].is-playing .m-body { animation: hSquash .6s var(--ease) 3.9s both; }
  [data-hero].is-playing .m-eyes--side { animation: hOut .15s ease 4.2s both; }
  [data-hero].is-playing .m-eyes--focus { animation: hIn .15s ease 4.2s both; }
  [data-hero].is-playing .tile { animation: hGrey .3s ease 3.9s both; }
  [data-hero].is-playing .tile:nth-child(2) { animation-delay: 3.96s; }
  [data-hero].is-playing .tile:nth-child(3) { animation-delay: 4.02s; }
  [data-hero].is-playing .tile__badge { animation: hPop .3s var(--ease) 3.95s both; }
  [data-hero].is-playing .tile:nth-child(2) .tile__badge { animation-delay: 4.01s; }
  [data-hero].is-playing .tile:nth-child(3) .tile__badge { animation-delay: 4.07s; }
  [data-hero].is-playing .h-clock { animation: hClock 4.8s linear both; }
  [data-hero].is-paused, [data-hero].is-paused * { animation-play-state: paused !important; }
  .replay:not([hidden]) { animation: hIn .3s ease both; }

  /* how it works */
  .js .step:not(.is-in) .cw-on { opacity: 0; }
  .js .step:not(.is-in) .cw-off { opacity: 1; }
  .js .step .cw-on, .js .step .cw-off { transition: opacity .4s ease .6s; }
  .js .step:not(.is-in) .toast { opacity: 0; transform: translateY(-56px); }
  .js .step .toast { transition: opacity .3s ease .5s, transform .5s var(--ease) .5s; }

  /* hold demo feedback */
  .demo__mascot .m-shackle { transition: transform 160ms var(--ease); }
  [data-done] .shutter__disc { animation: squash 120ms ease-out; }

  /* meme drops grid: one tile unlocks */
  .js .drops:not(.is-in) .mt--unlock .mt__lock { opacity: 1; }
  .js .drops .mt--unlock .mt__lock { transition: opacity .5s ease .5s; }

  /* streak */
  .js .scard:not(.is-in) .day__dot { opacity: 0; transform: scale(.6); }
  .js .scard .day__dot { transition: opacity .3s ease, transform .4s var(--ease); }
  .js .scard .day:nth-child(2) .day__dot { transition-delay: 80ms; } .js .scard .day:nth-child(3) .day__dot { transition-delay: 160ms; }
  .js .scard .day:nth-child(4) .day__dot { transition-delay: 240ms; } .js .scard .day:nth-child(5) .day__dot { transition-delay: 320ms; }
  .js .scard .day:nth-child(6) .day__dot { transition-delay: 400ms; } .js .scard .day:nth-child(7) .day__dot { transition-delay: 480ms; }
  .js .scard:not(.is-in) .day--freeze .ic, .js .scard:not(.is-in) .day__note { opacity: 0; transform: translateY(-8px); }
  .js .scard:not(.is-in) .day__note { transform: translate(-50%, -8px); }
  .js .scard .day--freeze .ic, .js .scard .day__note { transition: opacity .24s ease .7s, transform .24s var(--ease) .7s; }
  .js .scard:not(.is-in) .day__miss { opacity: 1; }
  .js .scard .day__miss { transition: opacity .2s ease .62s; }
  .js [data-reveal]:not(.is-in) .a-bar i { transform: scaleY(0); }
  .js [data-reveal] .a-bar i { transition: transform 480ms var(--ease); }
  .js [data-reveal] .a-bar:nth-child(2) i { transition-delay: 60ms; } .js [data-reveal] .a-bar:nth-child(3) i { transition-delay: 120ms; }
  .js [data-reveal] .a-bar:nth-child(4) i { transition-delay: 180ms; } .js [data-reveal] .a-bar:nth-child(5) i { transition-delay: 240ms; }
  .js [data-reveal] .a-bar:nth-child(6) i { transition-delay: 300ms; } .js [data-reveal] .a-bar:nth-child(7) i { transition-delay: 360ms; }

  /* privacy diagram: lines run to the edge, padlocks click shut */
  .js .priv__diagram:not(.is-in) .pd-line { transform: scaleX(0); }
  .js .priv__diagram:not(.is-in) .pd-shackle { transform: translateY(-4px); }
  .js .priv__diagram .pd-line { transition: transform 600ms var(--ease); }
  .js .priv__diagram .pd-shackle { transition: transform 160ms var(--ease) 600ms; }
  .js .priv__diagram .pd-row:nth-of-type(2) .pd-line { transition-delay: 80ms; } .js .priv__diagram .pd-row:nth-of-type(2) .pd-shackle { transition-delay: 680ms; }
  .js .priv__diagram .pd-row:nth-of-type(3) .pd-line { transition-delay: 160ms; } .js .priv__diagram .pd-row:nth-of-type(3) .pd-shackle { transition-delay: 760ms; }

  /* final band: the padlock clicks shut once */
  .js [data-band]:not(.is-in) .m-eyes--side, .js [data-band]:not(.is-in) .m-mouth--flat { opacity: 1; }
  .js [data-band]:not(.is-in) .m-eyes--focus, .js [data-band]:not(.is-in) .m-mouth--smile { opacity: 0; }
  .js [data-band].is-in .m-shackle { animation: hShackle .7s var(--ease) .1s both; }
  .js [data-band].is-in .m-body { animation: hSquash .7s var(--ease) .1s both; }
  .js [data-band] .m-eyes, .js [data-band] .m-mouth { transition-delay: .5s; }

  /* dialog */
  .qr, .qr::backdrop { transition: opacity 200ms ease, transform 200ms var(--ease), overlay 200ms allow-discrete, display 200ms allow-discrete; }
  .qr:not([open]) { opacity: 0; transform: translateY(8px) scale(.98); }
  @starting-style { .qr[open] { opacity: 0; transform: translateY(8px) scale(.98); } }

  /* scroll-linked where supported */
  @supports (animation-timeline: view()) {
    .how__route-fill { animation: growX 1ms linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    .step::after { animation: growY 1ms linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    .spanel { view-timeline: --sp block; }
    .spanel .walker { animation: spWalk 1ms linear both; animation-timeline: --sp; animation-range: contain 0% contain 60%; }
    .spanel .sp-circle { animation: spPulse 1ms linear both; animation-timeline: --sp; animation-range: contain 0% contain 60%; }
    .spanel .schip--a, .spanel .sp-on, .spanel .wb-lock { animation: spSwapOut 1ms linear both; animation-timeline: --sp; animation-range: contain 0% contain 60%; }
    .spanel .schip--b, .spanel .sp-off, .spanel .wb-open { animation: spSwapIn 1ms linear both; animation-timeline: --sp; animation-range: contain 0% contain 60%; }
    [data-ring] { view-timeline: --ring block; }
    [data-ring] .a-ring__fill { animation: ringFill 1ms linear both; animation-timeline: --ring; animation-range: entry 30% cover 55%; }
  }
  @supports not (animation-timeline: view()) {
    .js [data-route]:not(.is-in) .how__route-fill { transform: scaleX(0); }
    .js [data-route] .how__route-fill { transition: transform .9s var(--ease) .2s; }
    .js .step:not(.is-in)::after { transform: scaleY(0); }
    .js .step::after { transition: transform .9s var(--ease) .3s; }
    .js .shape__card:not(.is-in) .walker { transform: translate(160px, 160px); }
    .js .shape__card:not(.is-in) .schip--a, .js .shape__card:not(.is-in) .sp-on, .js .shape__card:not(.is-in) .wb-lock { opacity: 1; }
    .js .shape__card:not(.is-in) .schip--b, .js .shape__card:not(.is-in) .sp-off, .js .shape__card:not(.is-in) .wb-open { opacity: 0; }
    .js .shape__card.is-in .walker { animation: spWalk 2.4s var(--ease-io) both; }
    .js .shape__card.is-in .sp-circle { animation: spPulse 2.4s linear both; }
    .js .shape__card.is-in .schip--a, .js .shape__card.is-in .wb-lock, .js .shape__card.is-in .sp-on { animation: spSwapOut 2.4s linear both; }
    .js .shape__card.is-in .schip--b, .js .shape__card.is-in .wb-open, .js .shape__card.is-in .sp-off { animation: spSwapIn 2.4s linear both; }
    .js [data-ring]:not(.is-in) .a-ring__fill { stroke-dashoffset: 100; }
    .js [data-ring] .a-ring__fill { transition: stroke-dashoffset 900ms var(--ease) .2s; }
  }
}

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes riseT { from { transform: translateY(12px); } }
@keyframes hDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hOut { to { opacity: 0; } }
@keyframes hIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hIdle { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hRing { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes hPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes hWalk { 0% { transform: translate(222px, 392px); } 53.5% { transform: translate(222px, 262px); } 100% { transform: translate(112px, 236px); } }
@keyframes hFinger {
  0% { transform: translate(52px, 178px); } 26.17% { transform: translate(196px, 172px); } 38.57% { transform: translate(202px, 240px); }
  48.04% { transform: translate(150px, 244px); } 58.94% { transform: translate(152px, 304px); } 77.84% { transform: translate(48px, 300px); } 100% { transform: translate(52px, 178px); }
}
@keyframes hFingerFade { 0% { opacity: 0; } 8%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hSlide { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes hShackle { 0% { transform: none; } 40% { transform: translateY(-16px); } 78% { transform: translateY(1.5px); } 100% { transform: none; } }
@keyframes hSquash { 0%, 70% { transform: none; } 84% { transform: scale(1.04, .97); } 100% { transform: none; } }
@keyframes hGrey { from { color: #fff; } to { color: var(--text-3); } }
@keyframes hClock { from { opacity: 0; } to { opacity: 0; } }
@keyframes squash { 50% { transform: scale(.88); } }
@keyframes blink { 50% { transform: scaleY(.1); } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ringFill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 24.9; } }
@keyframes spWalk { 0% { transform: translate(160px, 160px); } 25% { transform: translate(160px, 225px); } 52% { transform: translate(286px, 225px); } 65%, 100% { transform: translate(286px, 262px); } }
@keyframes spSwapOut { 0%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes spSwapIn { 0%, 64% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes spPulse { 0%, 64% { transform: scale(1); } 72% { transform: scale(1.04); } 82%, 100% { transform: scale(1); } }