/* Stiver, proposal C: "One screen, up close". One pinned camera over the real app (desktop); stacked lenses on phones. */
:root {
  --cream: #FBFAF7; --paper: #F4F1EA; --ink: #0A0D12; --ink-2: #3B4250; --ink-3: #6B7280; --steel: #2D4A7A; --line: #E6E2D8;
  --m: 56px; --g: 24px;
  --expo: cubic-bezier(.19, 1, .22, 1); --io: cubic-bezier(.65, .05, 0, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--cream); color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
.mono { font-family: "JB", ui-monospace, monospace; }
.steel { color: var(--steel); }
::selection { background: var(--steel); color: var(--cream); }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 4px; border-radius: 6px; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.skip:focus { top: 16px; }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 76px; display: flex; align-items: center; padding: 0 var(--m); }
.nav::before { content: ""; position: absolute; inset: 0 0 -34px; background: linear-gradient(var(--cream) 46%, rgba(251,250,247,0)); pointer-events: none; z-index: -1; }
.word { font-family: "JB"; font-size: 20px; letter-spacing: -.01em; color: var(--ink); display: inline-flex; align-items: baseline; }
.word i, .bigword i { display: inline-block; width: .22em; height: .22em; background: var(--steel); margin-left: .05em; }
.nav nav { margin-left: auto; display: flex; align-items: center; gap: 32px; font-size: 14px; color: var(--ink-2); }
.pill { border: 1px solid var(--ink); border-radius: 99px; padding: 8px 15px; color: var(--ink); font-size: 14px; line-height: 1.2; white-space: nowrap; }
.ul { position: relative; display: inline-block; transition: color .4s var(--expo); }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .7s var(--expo); }
.ul:hover { color: var(--ink); }
.ul:hover::after, .ul:focus-visible::after { transform: scaleX(1); transform-origin: left; }
p .ul::after { transform: scaleX(1); opacity: .35; }
p .ul:hover::after { opacity: 1; }

/* ---------- type ---------- */
.label { font-family: "JB"; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; }
.display { font-weight: 600; letter-spacing: -.045em; line-height: .92; font-size: clamp(52px, 7.8vw, 176px); }
h2 { font-weight: 600; letter-spacing: -.04em; line-height: .96; font-size: clamp(38px, 3.65vw, 72px); color: var(--ink); }
.para { font-size: clamp(16px, 1.22vw, 21px); line-height: 1.58; color: var(--ink-2); max-width: 31em; }
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.li { display: block; will-change: transform; }
.w { display: inline-block; white-space: pre; }
.ch { display: inline-block; }

/* ---------- button ---------- */
.btn { position: relative; display: inline-flex; align-items: center; height: 54px; padding: 0 28px; border-radius: 99px; background: var(--ink); color: var(--cream);
  font-size: 16px; font-weight: 500; overflow: hidden; isolation: isolate; letter-spacing: -.005em; }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--steel); border-radius: inherit; transform: translateY(101%); transition: transform .75s var(--io); z-index: -1; }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn span { transition: transform .75s var(--io); }
.note { font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* ---------- the camera ---------- */
.cam { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.rig { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scrim { position: absolute; top: 0; bottom: 0; opacity: 0; pointer-events: none; z-index: 2; }
.scrim.r { right: 0; background: linear-gradient(90deg, rgba(251,250,247,0), rgba(251,250,247,.86) 34%, var(--cream) 58%); }
.scrim.l { left: 0; background: linear-gradient(270deg, rgba(251,250,247,0), rgba(251,250,247,.86) 34%, var(--cream) 58%); }
.anchor { position: absolute; left: 0; width: 1px; height: 1px; }

.hero { position: absolute; z-index: 3; left: 0; right: 0; top: calc(76px + 9vh); text-align: center; padding: 0 var(--m); }
.hero .label { margin-bottom: 26px; }
.hero .lede { margin: 30px auto 0; max-width: 35em; font-size: clamp(17px, 1.32vw, 22px); line-height: 1.5; color: var(--ink-2); }
.hero .cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.xo { will-change: transform, opacity; }

.caps { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cap { position: absolute; top: 0; visibility: hidden; }
.cap.on { visibility: visible; pointer-events: auto; }
.cap .label { margin-bottom: 26px; }
.cap h2 + * { margin-top: 26px; }
.cap .rate { margin-top: 22px; font-size: 13px; color: var(--ink-3); letter-spacing: .01em; }
.cap .rate span { color: var(--ink); }
.cap.end h2 { font-size: clamp(52px, 5.6vw, 120px); line-height: .92; letter-spacing: -.045em; }
.cap.end .cta { margin-top: 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.day { height: 1.4em; overflow: hidden; }
.dayroll { display: flex; flex-direction: column; }
.dayroll span { height: 1.4em; display: block; }
.four { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; max-width: 30em; counter-reset: n; }
.four li { font-size: clamp(16px, 1.12vw, 19px); line-height: 1.45; color: var(--ink); padding-left: 34px; position: relative; transition: opacity .2s linear; }
.four li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: .15em; font-family: "JB"; font-size: 12px; color: var(--steel); }
.clock { margin-top: 26px; display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; }
.clock svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.clock circle { fill: none; stroke: var(--line); stroke-width: 2.5; }
.clock .arc { stroke: var(--steel); stroke-dasharray: 119.38; stroke-dashoffset: 0; stroke-linecap: round; }
.clock #secs { color: var(--ink); font-size: 15px; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- the device (all sizes in screen points, the whole thing scaled up with zoom, then down by the camera) ---------- */
.dev { position: relative; width: 415px; height: 874px; border-radius: 60px; background: #0A0D12; padding: 11px;
  box-shadow: 0 0 0 1.5px #1f242c inset, 0 0 0 .5px rgba(10,13,18,.5), 0 50px 70px -40px rgba(10,13,18,.38), 0 18px 30px -22px rgba(10,13,18,.3); }
.dev .btnside { position: absolute; width: 3px; background: #1a1f27; border-radius: 2px; }
.dev .b1 { left: -3px; top: 118px; height: 30px; } .dev .b2 { left: -3px; top: 172px; height: 56px; } .dev .b3 { left: -3px; top: 240px; height: 56px; }
.dev .b4 { right: -3px; top: 196px; height: 88px; }
.vp { position: relative; width: 393px; height: 852px; border-radius: 49px; overflow: hidden; background: #000; isolation: isolate; }
.scr { position: absolute; left: 0; top: 0; width: 393px; height: 852px; }
.scr .screen { transform: none; border-radius: 0; }
.scr .screen .status, .scr .screen .island { visibility: hidden; }
.scr.s-home .screen { border-radius: 49px; }
.scr .shade { position: absolute; inset: 0; background: #0A0D12; opacity: 0; pointer-events: none; }
.scr.s-spot, .scr.s-dom { box-shadow: -12px 0 32px rgba(10,13,18,.10); }
.scr.s-set { top: 58px; height: 794px; border-radius: 12px 12px 0 0; background: var(--app-bg); overflow: hidden; color: var(--app-ink); font-family: "Inter"; font-size: 15px; }
.sb { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 9; pointer-events: none; }
.sb .island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.sb .st { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 46px; font-weight: 600; font-size: 16px; font-family: "Inter"; color: #0A0D12; }
.sb .st.lt { color: #fff; opacity: 0; }
.sb .st .mono { font-size: 12px; }
.vp .ovl { position: absolute; left: 0; top: 0; z-index: 8; }
.vp .dim { position: absolute; inset: 0; background: #0A0D12; opacity: 0; z-index: 7; pointer-events: none; }
.vp .notif { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(239,240,243,.985); box-shadow: 0 22px 40px -20px rgba(10,13,18,.42), 0 0 0 .5px rgba(10,13,18,.06); }
.vp .k-actions { margin-top: 8px; transform-origin: 50% 0; }
.vp .k-hud { position: absolute; left: 118.5px; top: 300px; }
.vp .k-hud svg { transform-origin: 50% 50%; }
.vp .touch { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(10,13,18,.16); box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 4px 10px rgba(10,13,18,.15); opacity: 0; z-index: 10; }
.vp .lift { position: absolute; z-index: 8; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -18px rgba(10,13,18,.35); opacity: 0; }
.vp .lift .k-lrow { border-top: 0; }
.vp .menu { position: absolute; z-index: 8; opacity: 0; transform-origin: 20% 0; }
.tr { position: relative; display: block; width: 5.4em; height: 1.18em; overflow: hidden; flex: none; }
.tr .tm { position: absolute; left: 0; top: .04em; white-space: pre; line-height: 1.1; }
.tr .tm .ch { display: inline-block; }
.a-total { display: flex; align-items: flex-end; line-height: 1.1; }
.a-total .tr + small { margin-left: 4px; margin-bottom: 5.5px; }
.k-rows .k-lrow { position: relative; }
.status-roll { position: relative; height: 18px; overflow: hidden; }
.status-roll span { display: block; height: 18px; line-height: 18px; white-space: nowrap; }
.btnswap { position: relative; flex: 1; display: grid; }
.btnswap > span { grid-area: 1 / 1; }
.k-sec .reveal-wrap { position: relative; }
.k-sec .reveal-wrap .k-reveal { position: absolute; left: 0; right: 0; top: 0; }
.a-row { position: relative; }
.a-row .hi { position: absolute; inset: 0; background: #E9ECF0; opacity: 0; }
.a-row > *:not(.hi) { position: relative; }

/* intro: rows and the hero phone land on load */
.intro .s-home .a-row { opacity: 0; transform: translateX(26px); }
.intro.go .s-home .a-row { opacity: 1; transform: none; transition: transform 1.1s var(--expo), opacity .8s var(--expo); transition-delay: calc(.55s + var(--i) * .085s); }

/* hero intro */
.hero h1 .ch { transform: translateY(108%); }
.go .hero h1 .ch { transform: none; transition: transform 1.15s var(--expo); transition-delay: calc(.12s + var(--i) * .028s); }
.hero .rv { opacity: 0; transform: translateY(18px); }
.go .hero .rv { opacity: 1; transform: none; transition: opacity 1s var(--expo), transform 1.2s var(--expo); transition-delay: var(--d, .5s); }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 4; background: var(--cream); padding: 120px var(--m) 0; border-top: 1px solid var(--line); overflow: hidden; }
.foot-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.foot .made { font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -.015em; color: var(--ink); max-width: 20em; line-height: 1.35; }
.foot ul { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.bigword { font-family: "JB"; color: var(--ink); line-height: .78; letter-spacing: -.03em; white-space: nowrap;
  font-size: min(calc((100vw - 2 * var(--m)) / 3.86), 470px); margin-top: clamp(64px, 9vw, 150px); padding-bottom: .06em; display: flex; align-items: baseline; }
.bigword i { width: .2em; height: .2em; margin-left: .03em; }

.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- stacked layout: phones, and reduced motion at any size ---------- */
.stacked .stage { position: relative; height: auto; overflow: visible; }
.stacked .rig, .stacked .scrim { display: none; }
.stacked .cam { height: auto !important; }
.stacked .hero { position: relative; top: auto; padding: 132px var(--m) 0; }
.stacked .hero-phone { position: relative; margin: 56px auto 0; overflow: hidden; }
.stacked .hero-phone .lrig { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stacked .caps { position: relative; inset: auto; pointer-events: auto; padding: 0 var(--m); }
.stacked .cap { position: relative; visibility: visible; top: auto; left: auto !important; width: auto !important; padding-top: 128px; }
.stacked .cap .label { margin-bottom: 20px; }
.stacked .lens { position: relative; margin-top: 36px; border-radius: 28px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line) inset; height: min(116vw, 560px); }
.stacked .lens .lrig { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stacked .cap.end { padding-bottom: 120px; }
.stacked .foot { padding-top: 96px; }
.stacked .anchor { position: static; }
@media (min-width: 761px) {
  .stacked .cap:not(.end) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 8vw; align-items: center; }
  .stacked .cap:not(.end) > :not(.lens) { grid-column: 1; }
  .stacked .cap:not(.end) .lens { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; height: min(52vw, 640px); }
}
@media (max-width: 760px) {
  :root { --m: 20px; }
  .nav { height: 64px; }
  .nav nav { gap: 18px; font-size: 13px; }
  .nav nav .ul:first-child { display: none; }
  .pill { padding: 7px 12px; font-size: 13px; }
  .display { font-size: clamp(46px, 14.2vw, 76px); }
  h2 { font-size: clamp(34px, 9.6vw, 48px); line-height: .98; }
  .para { font-size: 16.5px; }
  .hero { text-align: left; }
  .hero .lede { margin-left: 0; font-size: 18px; }
  .hero .cta { align-items: flex-start; }
  .foot ul { flex-direction: column; gap: 10px; }
  .foot { padding-top: 80px; }
}
@media (max-width: 380px) { .nav nav { gap: 14px; } .pill { padding: 6px 10px; font-size: 12.5px; } .word { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero h1 .ch, .hero .rv, .intro .s-home .a-row { opacity: 1 !important; transform: none !important; }
}