/* ---------- top bar ---------- */
.topbar { position: fixed; z-index: 50; top: 12px; left: 50%; transform: translateX(-50%); width: min(calc(100% - 2 * var(--pad)), var(--maxw)); min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 20px; border-radius: 999px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 500; text-decoration: none; letter-spacing: -.02em; margin-right: auto; }
.brand .logo { width: 30px; height: 30px; color: var(--ink); }
.tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--field-bg); border: 1px solid var(--glass-border); }
.tabs a, .tabbar a { position: relative; display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em; border-radius: 999px; font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--ink-2); transition: color .25s, background .25s; min-height: 40px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"], .tabbar a[aria-current="page"] { background: var(--btn-bg); color: var(--btn-ink); }
.count { min-width: 1.5em; padding: 0 .4em; border-radius: 999px; background: var(--alert); color: #1a0a07; font-size: .75rem; line-height: 1.5em; text-align: center; font-weight: 700; }
:root[data-theme="day"] .count { color: #fff; }
.tabbar { position: fixed; z-index: 50; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 20px), 460px); display: none; justify-content: space-around; padding: 6px; border-radius: 999px; }
.tabbar a { flex-direction: column; gap: 2px; font-size: .72rem; padding: .35em .7em; flex: 1; justify-content: center; }
.tabbar .icon { width: 1.35em; height: 1.35em; }

/* ---------- landing scenes ---------- */
.landing { position: relative; }
.scene { position: relative; }
.display { font-size: clamp(2.6rem, 6.3vw, 6.1rem); font-weight: 340; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
.display em, .cap-title em, #decide-title em { font-style: italic; font-weight: 300; color: var(--alert); }
.lede { font-size: clamp(1.02rem, 1.7vw, 1.28rem); color: var(--ink); max-width: 60ch; line-height: 1.6; }
.lede strong { color: var(--ink); font-weight: 650; }
[data-split] .w { display: inline-block; opacity: 0; transform: translateY(.55em) rotateX(-45deg); filter: blur(10px); transform-origin: 50% 100%;
  animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i) * 75ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.hero-eyebrow, .hero-lede, .drop, .privacy-line, .scroll-cue { opacity: 0; animation: fade-up 1s var(--ease) forwards; }
.hero-eyebrow { animation-delay: .05s; } .hero-lede { animation-delay: .75s; } .drop { animation-delay: 1s; } .privacy-line { animation-delay: 1.25s; } .scroll-cue { animation-delay: 1.5s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.hero { min-height: 100svh; padding: calc(var(--topbar-h) + 48px) var(--pad) 64px; display: grid; place-items: center; }
.hero-inner { width: min(100%, var(--maxw)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: clamp(28px, 5vw, 76px); row-gap: clamp(16px, 2.2vw, 26px); align-content: center; align-items: start; justify-items: start; will-change: transform, opacity;
  transform: translateY(calc(var(--hero-p, 0) * -60px)); opacity: calc(1 - var(--hero-p, 0) * .85); }

.hero-inner > * { grid-column: 1; }
.hero-inner > .drop { grid-column: 2; grid-row: 1 / span 7; align-self: center; width: 100%; }
@media (max-width: 1060px) { .hero-inner { grid-template-columns: 1fr; } .hero-inner > .drop { grid-column: 1; grid-row: auto; } }
/* dropzone */
.drop { width: min(100%, 720px); padding: clamp(22px, 3.2vw, 38px); border-radius: var(--radius-xl); transition: transform .5s var(--ease), box-shadow .4s, border-color .3s;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.drop::before { opacity: .45; }
.drop.over { border-color: var(--glass-hi); transform: perspective(1100px) scale(1.025); box-shadow: var(--glass-shadow), 0 0 0 6px rgb(255 255 255 / .09); }
.drop.over::before { opacity: .9; }
.drop:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }
.drop-body { display: grid; gap: 12px; justify-items: start; }
.drop .icon.big { width: 2.2rem; height: 2.2rem; color: var(--ink); padding: 10px; box-sizing: content-box; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.drop-title { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 420; }
.drop-hint { color: var(--ink-2); max-width: 52ch; }
.formats { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 6px; list-style: none; }
.drop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.drop-error { margin-top: 14px; }
.orbit { position: relative; width: 64px; height: 64px; }
.orbit i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--ink); animation: spin 1.1s linear infinite; }
.orbit i:nth-child(2) { inset: 9px; border-top-color: var(--alert); animation-duration: .8s; animation-direction: reverse; }
.orbit i:nth-child(3) { inset: 20px; border-top-color: var(--ink-3); animation-duration: 1.6s; }
@keyframes spin { to { transform: rotate(360deg); } }
.privacy-line { display: flex; gap: 12px; align-items: flex-start; max-width: 720px; font-size: .92rem; color: var(--ink-2); }
.privacy-line .icon { margin-top: .2em; width: 1.3em; height: 1.3em; color: var(--ink); }
.privacy-line strong { color: var(--ink); }
.scroll-cue { display: inline-flex; align-items: center; gap: .6em; margin-top: 10px; color: var(--ink-3); text-decoration: none; font-size: .88rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.scroll-cue .icon { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- scene: the unravel (pinned, scroll-scrubbed) ---------- */
.unravel { height: 440vh; }
.pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: calc(var(--topbar-h) + 34px) var(--pad) 28px; max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; overflow: hidden; }
.unravel-head, .findings-head { display: grid; gap: 10px; }
.cap-title { position: relative; font-size: clamp(2rem, 5.4vw, 4.4rem); font-weight: 340; letter-spacing: -.03em; min-height: 1.15em; }
.cap-title .cap { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }
.cap-title .cap.on { opacity: 1; transform: none; filter: none; }
.stage { position: relative; min-height: 0; }
.rail { position: absolute; left: 0; right: 0; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, var(--ink-3), transparent 95%); opacity: 0; }
.rail-label { position: absolute; left: 0; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); opacity: 0; }
.tx { position: absolute; left: 0; top: 0; width: var(--cw, 176px); height: 46px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 14px; will-change: transform, opacity, filter;
  background: linear-gradient(135deg, var(--glass-bg), transparent 80%), var(--chip-bg); border: 1px solid var(--glass-border); box-shadow: 0 8px 24px -12px rgb(2 6 24 / .6), 0 1px 0 rgb(255 255 255 / .1) inset; }
.tx .lab { position: relative; flex: 1; min-width: 0; height: 1.3em; font-size: .78rem; font-weight: 600; }
.tx .lab > span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3em; }
.tx .raw { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .66rem; letter-spacing: .02em; color: var(--ink-3); }
.tx .amt { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tx.noise { border-style: dashed; }
.tx.hot { border-color: var(--alert-border); box-shadow: 0 0 0 1px var(--alert-bg), 0 0 30px -4px var(--alert), 0 8px 24px -12px rgb(2 6 24 / .6); }
.tx.hot .amt { color: var(--alert); }
.callout { position: absolute; left: 0; top: 0; padding: 7px 13px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--alert-ink); background: var(--alert-bg); border: 1px solid var(--alert-border); opacity: 0; will-change: transform, opacity;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }

/* ---------- scene: finding cards arriving from depth ---------- */
.findings-scene { height: 420vh; }
.findings-scene .pin { grid-template-rows: auto 1fr; }
.deck { position: relative; perspective: 1400px; perspective-origin: 50% 40%; min-height: 0; }
.fcard { position: absolute; left: 50%; top: 4%; width: min(560px, 100%); margin-left: calc(min(560px, 100%) / -2); padding: clamp(20px, 3vw, 34px); display: grid; gap: 12px; will-change: transform, opacity; transform-style: preserve-3d; border-radius: var(--radius-xl); }
.fcard .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fcard .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.fcard.alert .ico { color: var(--alert); border-color: var(--alert-border); background: var(--alert-bg); }
.fcard h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.fcard p { color: var(--ink-2); }
.fcard .big { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1; }
.fcard .big small { font-size: .45em; color: var(--ink-3); font-family: var(--font-ui); letter-spacing: 0; }

/* ---------- scene: you decide ---------- */
.decide { min-height: 100svh; padding: 18vh var(--pad) 36px; display: grid; place-items: center; }
.decide-inner { width: min(100%, var(--maxw)); display: grid; gap: 28px; justify-items: center; text-align: center; }
#decide-title { font-size: clamp(2.2rem, 6vw, 5rem); font-weight: 340; letter-spacing: -.03em; text-wrap: balance; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; text-align: left; }
.tile { padding: 28px; display: grid; gap: 10px; align-content: start; }
.tile .icon.big { width: 1.9rem; height: 1.9rem; }
.tile h3 { font-size: 1.35rem; }
.tile p { color: var(--ink-2); font-size: .98rem; }
.cta { margin-top: 12px; }
.foot { margin-top: 60px; color: var(--ink-3); font-size: .86rem; }

@media (max-width: 900px) {
  .trio { grid-template-columns: 1fr; }
  .tabs { display: none; }
  .tabbar:not([hidden]) { display: flex; }
  .topbar { padding-left: 16px; }
  .tools .chip { display: none; }
}
@media (max-width: 560px) {
  .topbar { top: 8px; min-height: 58px; }
  .brand { font-size: 1.15rem; } .brand .logo { width: 26px; height: 26px; }
  .hero { padding-top: calc(var(--topbar-h) + 28px); }
  .drop-actions .btn { flex: 1 1 100%; }
  .unravel { height: 380vh; } .findings-scene { height: 360vh; }
  .tx { --cw: 128px; height: 40px; padding: 0 9px; }
  .tx .raw, .tx .clean { font-size: .62rem; }
}

/* reduced motion: no pinning or scrubbing, show the finished states */
@media (prefers-reduced-motion: reduce) {
  [data-split] .w, .hero-eyebrow, .hero-lede, .drop, .privacy-line, .scroll-cue { opacity: 1; transform: none; filter: none; animation: none; }
  .hero-inner { transform: none; opacity: 1; }
  .unravel, .findings-scene { height: auto; }
  .pin { position: relative; height: auto; min-height: 70svh; overflow: visible; }
  .stage { min-height: 72svh; }
  .deck { display: grid; gap: 16px; perspective: none; }
  .fcard { position: relative; left: auto; top: auto; margin: 0 auto; transform: none !important; opacity: 1 !important; }
}