/* Set pieces.
   The page was reading as one card template repeated six times, so each
   section below has its own geometry: a dark stage for the worked example,
   a single horizontal run for the path, a moving strip for the live markets.
   Loaded after site.css so it wins where the two overlap. */

/* ---------- bigger glass bar ---------- */
.topbar { padding-top: 1.4%; }
.topbar-left, .topbar-right { height: 54px; }
.icon-btn { width: clamp(44px, 3.6vw, 56px); height: clamp(44px, 3.6vw, 56px); }
.icon-grid { width: clamp(40px, 3.1vw, 50px); height: clamp(40px, 3.1vw, 50px); }
.pill-tray { height: clamp(44px, 3.4vw, 54px); padding: 0 6px; gap: 4px; }
.pill-tray a { padding: 0 18px; font-size: clamp(13px, 1.05vw, 15.5px); }
.pill-white { height: clamp(44px, 3.4vw, 54px); padding: 0 20px; font-size: clamp(13px, 1.05vw, 15.5px); }
.topbar .ca { height: clamp(44px, 3.4vw, 54px); padding: 0 16px; font-size: clamp(11px, .95vw, 13px); }
.wordmark-lockup { font-size: clamp(18px, 1.7vw, 23px); }
.wordmark-lockup img { width: clamp(24px, 2.4vw, 30px); height: clamp(24px, 2.4vw, 30px); }
/* corners at half their old roundness (user, 2026-09-22). Every piece was a full pill, radius =
   height / 2; now height / 4. The links sit at 76% of the tray inside its 1px border. */
.icon-btn, .icon-grid { border-radius: 25%; }
.pill-tray, .pill-white, .topbar .ca { border-radius: calc(clamp(44px, 3.4vw, 54px) / 4); }
.pill-tray a { border-radius: calc((clamp(44px, 3.4vw, 54px) - 2px) * .76 / 4); }

/* the stray marker over the film is gone */
.float-dot { display: none !important; }

/* ---------- the worked example ---------- */
.stage { background: #0b0c0e; color: #fff; padding-block: clamp(60px, 7.5vw, 116px); overflow: hidden; }
.stage h2, .stage .sub { color: #fff; }
.stage .sub { color: rgba(255,255,255,.62); }
/* the worked example: one still of three devices holding real captures of the
   app, baked offline (tools in the session scratchpad) so nothing here is live 3D */
/* sized so the heading, the phones and the lines under them fit one screen */
/* the -1px overlap: at 125% and 150% display scaling the join with the hero falls
   on a fractional pixel, neither section paints that row fully, and the white
   curtain behind them shows as a hairline. Overlapping by one pixel leaves no gap. */
.see-still { background: #0b0c0e; padding-top: clamp(64px, 8vh, 96px); scroll-margin-top: 40px; margin-top: -1px; }
.see-head { margin: 0 auto; max-width: 30em; text-align: center; text-wrap: balance; }
.still { margin: clamp(18px, 2.4vw, 34px) auto 0; width: min(1080px, 100%, calc((100svh - 350px) * 1.341)); }
.still-stage { position: relative; aspect-ratio: 2360 / 1760; }
.still-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.still-single { display: none; width: 100%; height: auto; }

/* The entrance. The front phone rises into place; the other two start hidden
   behind it and slide out to their places; the lines under them follow. */
.still-centre { opacity: 0; transform: translateY(5%) scale(.97);
  transition: opacity .55s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.still-left, .still-right { opacity: 0;
  transition: opacity .45s ease .22s, transform 1s cubic-bezier(.16,1,.3,1) .22s; }
.still-left { transform: translateX(17%) scale(.94); }
.still-right { transform: translateX(-17%) scale(.94); }
.still-single { opacity: 0; transform: translateY(6%) scale(.97);
  transition: opacity .55s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.still.in .still-layer, .still.in .still-single { opacity: 1; transform: none; }
.still-notes li { opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.62s + var(--i, 0) * 90ms); }
.still.in .still-notes li { opacity: 1; transform: none; }
/* the heading, quick */
.see-head { opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.see-still.in .see-head { opacity: 1; transform: none; }
/* one line under each phone: the phones sit at 25, 50 and 75 percent of the
   image, so three equal columns across the middle 75 percent line up with them */
.still-notes { list-style: none; margin: clamp(-26px, -1.6vw, -10px) auto 0; padding: 0; width: 75%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
.still-notes li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.still-notes b { font-family: var(--mono); font-weight: 400; font-size: 11.5px; letter-spacing: .06em; color: rgba(255,255,255,.34); }
.still-notes p { margin: 0; max-width: 30ch; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.5; color: rgba(255,255,255,.7); }
.see-still .demo-note-mid { margin: clamp(22px, 2.6vw, 36px) auto 0; text-align: center; max-width: 60ch; }

.demo-note { margin: clamp(4px, .6vw, 10px) 0 0; }
.walk { list-style: none; margin: clamp(4px, .6vw, 10px) 0 0; padding: 0; display: grid; gap: clamp(15px, 1.7vw, 23px); max-width: 54ch; }
.walk li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; }
.walk li > b { font-family: var(--mono); font-weight: 400; font-size: 11.5px; letter-spacing: .06em; color: rgba(255,255,255,.34); padding-top: .42em; }
.walk p { margin: 0; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5; color: rgba(255,255,255,.7); }
.walk .hi { color: #fff; font-weight: 500; }
.walk .hi.mono { font-family: var(--mono); font-weight: 400; font-size: .94em; }

.demo-note { margin-top: 20px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.42); max-width: 78ch; }

/* ---------- the path ---------- */
.path { position: relative; margin-top: clamp(40px, 5vw, 76px); }
.path-run { position: relative; height: 3px; background: var(--line); border-radius: 3px; }
.path-run::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--blue); border-radius: 3px; transition: width 2s cubic-bezier(.3,.7,.2,1); }
.path.in .path-run::after { width: 100%; }
.path-marks { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: -9px; }
.path-mark { display: grid; justify-items: start; gap: 12px; }
.path-dot { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--line); transition: border-color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.path-mark.is-on .path-dot { border-color: var(--blue); transform: scale(1.14); }
.path-label { font-size: clamp(12px, 1.1vw, 14.5px); color: var(--ink-3); max-width: 16ch; transition: color .4s ease; }
.path-mark.is-on .path-label { color: var(--ink); }
.path-ours { margin-top: clamp(34px, 4vw, 58px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.path-ours > div { background: var(--blue); color: #fff; border-radius: var(--r-card); padding: clamp(22px, 2.6vw, 36px); font-size: clamp(22px, 2.9vw, 40px); font-weight: 600; letter-spacing: -0.028em; opacity: 0; transform: translateY(20px); }
.path.in .path-ours > div { opacity: 1; transform: none; transition: opacity .6s ease 1.5s, transform .7s cubic-bezier(.2,.7,.2,1) 1.5s; }
.path.in .path-ours > div:last-child { transition-delay: 1.75s; }

/* ---------- the live strip ---------- */
.strip { overflow: hidden; padding-block: clamp(44px, 5vw, 76px); background: var(--grey); }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: clamp(20px, 2.4vw, 34px); }
.strip-track { display: flex; gap: 12px; width: max-content; animation: slide 70s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.strip-card { display: grid; gap: 3px; min-width: 216px; padding: 15px 17px; border-radius: var(--r-card); background: #fff; border: 1px solid rgba(0,0,0,.06); }
.strip-sym { font-family: var(--mono); font-size: 14px; color: var(--blue); }
.strip-name { font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; }
.strip-px { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.strip-card.is-none .strip-sym { color: var(--ink-3); }

@media (max-width: 860px) {
  .topbar-left, .topbar-right { height: 46px; }
  .still { width: min(340px, 86vw); }
  .still-stage { display: none; }
  .still-single { display: block; }
  .still-notes { width: 100%; margin-top: 8px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .still-notes li { grid-template-columns: 26px minmax(0, 1fr); justify-items: start; text-align: left; gap: 12px; }
  .still-notes b { padding-top: .35em; }
  .still-notes p { max-width: none; }
  .path-marks { grid-template-columns: 1fr; gap: 18px; margin-top: 16px; }
  .path-run { display: none; }
  .path-mark { grid-template-columns: 15px 1fr; align-items: center; justify-items: stretch; }
  .path-label { max-width: none; }
  .path-ours { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none !important; }
}


/* the bar floats over both dark film and light sections, so it repaints */
.topbar.on-light .wordmark-lockup { color: var(--ink); text-shadow: none; }
.topbar.on-light .pill-tray { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.08); }
.topbar.on-light .pill-tray a { color: var(--ink-2); }
.topbar.on-light .pill-tray a:hover { color: var(--ink); background: rgba(0,0,0,.05); }
.topbar.on-light .pill-tray a.is-current { background: var(--ink); color: #fff; }
.topbar.on-light .pill-white { box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.topbar.on-light .icon-btn { background: #1d1d1f; color: #e8e8ea; }

/* the two runs of the wordmark butt together, no gap */
.wordmark-lockup { gap: 10px; }


/* ---------- the curtain ----------
   The hero sits underneath at z-index 0 with its stage pinned. Everything
   below is one layer pulled up by a viewport height, so it rises over the
   film rather than pushing it off the screen. */
.scrub { z-index: 0; }
.scrub-stage { z-index: 0; }
.after {
  position: relative; z-index: 2;
  margin-top: -100svh;
  border-radius: 30px 30px 0 0;
  background: var(--white);
  box-shadow: 0 -40px 90px -40px rgba(4, 12, 32, .65);
  /* no overflow clip here: it would kill position:sticky in every panel below,
     and the first panel already carries the same rounded top edge */
}
/* the first panel inside the curtain carries the rounded top edge */
.after > :first-child { border-radius: 30px 30px 0 0; }

@media (max-width: 860px) {
  .after { border-radius: 22px 22px 0 0; }
  .after > :first-child { border-radius: 22px 22px 0 0; }
}


/* the phone shows the product interface, not a drawing of an object */


/* ---------- headings: Geist Sans 700, tight ----------
   One heading voice across the site, per the owner: geometric grotesk, heavy,
   tracking -0.04em, leading just under 1. */
:root { --display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3,
.t-hero, .t-1, .t-2, .t-3,
.hero-head h1, .stage h2, .float-card h3, .pane h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: .97;
}
.t-hero { line-height: .95; }
.t-1 { line-height: .96; }
.t-2, .t-3 { line-height: 1.0; letter-spacing: -0.035em; }
.float-card h3, .pane h3 { letter-spacing: -0.03em; line-height: 1.05; }
/* the italic serif accent stays as the second hero line */
.head-serif { font: inherit; letter-spacing: inherit; }

/* ---------- text is simply there ----------
   No fade, rise or pop-in on any text (user, 2026-09-22: "i dont like the text pop up/fade in
   animation"). Headings, subheads, notes, tier cards, chain rows, the blue statement cards and the
   footer are visible from the first frame; pictures (the phone stills, the tiles) keep their own
   motion. site.js still adds .in, which now changes nothing here. */
.rise, [data-stagger] > *, .see-head, .still-notes li, .path-ours > div {
  opacity: 1; transform: none; transition: none;
}