/* THE LANDING WORLD. Loaded by the landing alone; the tokens and the shared
   primitives are tokens.css, which every public surface gets.
   Ported from experiments/landing-craft/theme.css. Keep the two diffable. */
*{box-sizing:border-box}
body:has(.i8-world){margin:0;background:var(--sc-canvas) !important;color:var(--sc-ink);
     font-family:var(--sc-font-text);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}
/* base_public wraps content in a max-width main with its own padding; the world
   is full-bleed and manages its own gutter. */
body:has(.i8-world) main{max-width:none !important;padding:0 !important;margin:0 !important}
/* App chrome IS the nav. Live-surface grammar forbids a wordmark-plus-CTA bar. */
.chrome{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:18px;
        padding:0 var(--pad);height:46px;background:rgba(8,8,10,.82);backdrop-filter:blur(14px);
        border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
        text-transform:uppercase;color:var(--sc-ink-soft)}
.chrome b{color:var(--sc-ink);font-weight:600;letter-spacing:.14em}
.chrome .sp{margin-left:auto}
.chrome .live{color:var(--state)}
/* An existing customer has to be able to get in. The mockup had no sign-in on
   the page at all: not in the chrome, not in the close, not in the footer. */
.chrome .sign{margin-left:18px;color:var(--sc-ink);text-decoration:none;border:1px solid var(--line-2);
              border-radius:2px;padding:5px 12px;letter-spacing:.1em;transition:border-color .15s}
.chrome .sign:hover{border-color:var(--sc-ink)}
.chrome a{text-decoration:none;color:inherit}
/* The readout is currency agnostic, so it cycles. Tabular figures and a fixed
   box, because a chrome bar that reflows every few seconds is a defect and not
   an animation: "held" has to stay at the same x. */
.chrome .held{font-variant-numeric:tabular-nums}
.chrome .fx{display:inline-block;min-width:9.5ch;
            transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .22s cubic-bezier(.23,1,.32,1)}
.chrome .fx.out{opacity:0;transform:translateY(-3px)}
.frag .fx-amt{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.chrome .fx{transition:none}}
.status{position:fixed;inset:auto 0 0 0;z-index:40;display:flex;gap:20px;align-items:center;
        padding:0 var(--pad);height:34px;background:rgba(8,8,10,.9);border-top:1px solid var(--line);
        font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--sc-ink-soft)}
.sample{margin-left:auto;color:var(--sc-ink-soft)}
section{position:relative}
.stage{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:76px var(--pad) 58px;max-width:1180px;margin:0 auto}
.lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sc-ink-soft);margin-bottom:18px}
.say{font-size:clamp(28px,4.4vw,58px);line-height:1.16;max-width:16ch;font-weight:400;letter-spacing:-.01em;margin:0}
.say em{font-style:normal;color:var(--sc-ink-soft)}
/* The caret is on the element, not an extra node, so it cannot be left behind
   if the sequence is interrupted: removing .typing removes the caret. */
.say.typing::after{content:"";display:inline-block;width:.5ch;height:.82em;margin-left:.06em;
                   background:var(--sc-ink);vertical-align:-.06em;animation:i8blink 1s steps(1) infinite}
@keyframes i8blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.say.typing::after{display:none}}
.sub{color:var(--sc-ink-soft);max-width:44ch;margin-top:20px;font-size:16px}
/* A row of work. Real markup, computed state, labelled sample. */
.rows{border:1px solid var(--line);border-radius:2px;background:var(--sc-surface);margin-top:26px}
.r{display:flex;align-items:center;gap:16px;padding:15px 19px;border-bottom:1px solid var(--line);font-size:15px}
.r:last-child{border-bottom:0}
.r .st{width:7px;height:7px;border-radius:99px;background:var(--line-2);flex:none}
.r.blocked .st{background:var(--state)}
.r.done .st{background:#3E9B6A}
.r .id{font-family:var(--mono);font-size:11.5px;color:var(--sc-ink-soft);width:56px;flex:none}
.r .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r .own{font-family:var(--mono);font-size:11px;color:var(--sc-ink-soft);flex:none}
.r .amt{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;flex:none;width:96px;text-align:right}
.r.blocked .amt{color:var(--state)}
/* Act 2: fragments. They arrive as the act advances, unsorted, overlapping. */
.frag{position:absolute;font-family:var(--mono);font-size:11.5px;padding:7px 11px;border:1px solid var(--line-2);
      background:rgba(15,15,18,.94);color:var(--sc-ink-soft);white-space:nowrap;
      opacity:0;transform:translateY(8px);border-radius:2px}
.frag.on{opacity:1;transform:none;transition:opacity .28s ease,transform .28s ease}
.frag.red{border-color:var(--state);color:var(--state)}
.tally{font-family:var(--mono);font-size:clamp(46px,9vw,104px);font-variant-numeric:tabular-nums;
       letter-spacing:-.03em;line-height:1}
.tally small{display:block;font-size:11px;letter-spacing:.14em;color:var(--sc-ink-soft);margin-top:10px}
/* ── THE SIGNATURE MOVE: two clocks ──────────────────────────────────────────
   Goods and money advance on SEPARATE arcs at DIFFERENT rates around one centre,
   and the page marks where they cross. Arrival's circular language, carrying the
   owner's own domain correction: money is not a stage on one line. A deposit
   lands before goods move; net terms land long after. Drawn as two concentric
   rings whose sweep is driven off --sc-p, with the crossing held as a beat.
   Bespoke to this page. The engine is untouched. */
.clocks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:8px}
.dial{position:relative;width:min(46vh,420px);aspect-ratio:1;margin-inline:auto}
.dial svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.dial circle{fill:none;stroke-linecap:butt}
.trk{stroke:var(--line);stroke-width:1}
.arc-goods{stroke:var(--sc-ink);stroke-width:2}
.arc-money{stroke:var(--money);stroke-width:2}
.dial .cx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
          text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--sc-ink-soft)}
.dial .cx b{display:block;font-size:13px;letter-spacing:.06em;color:var(--sc-ink);margin-bottom:5px;text-transform:none}
.key{display:flex;flex-direction:column;gap:15px;font-family:var(--mono);font-size:12px}
.key i{font-style:normal;display:inline-block;width:22px;height:2px;vertical-align:middle;margin-right:10px}
.key .g i{background:var(--sc-ink)} .key .m i{background:var(--money)}
.key p{margin:0;color:var(--sc-ink-soft)}
.key b{color:var(--sc-ink);font-weight:500}
.cross{margin-top:8px;padding:13px 15px;border:1px solid var(--line-2);border-left:2px solid var(--state);
       background:var(--sc-surface);font-size:13.5px;color:var(--sc-ink);opacity:0;transform:translateY(6px);
       transition:opacity .4s ease,transform .4s ease}
.cross.on{opacity:1;transform:none}
.cross span{font-family:var(--mono);font-size:11px;color:var(--sc-ink-soft);display:block;margin-bottom:5px;letter-spacing:.1em}
/* Close: an actual input. The grammar forbids a magnetic button here. */
.enter{display:flex;gap:0;border:1px solid var(--line-2);border-radius:2px;max-width:520px;margin-top:26px;background:var(--sc-surface)}
.enter input{flex:1;min-width:0;background:transparent;border:0;color:var(--sc-ink);font:inherit;padding:15px 17px;outline:none}
.enter input::placeholder{color:var(--sc-ink-soft)}
.enter input:focus{background:rgba(255,255,255,.03)}
.enter button{border:0;border-left:1px solid var(--line-2);background:var(--sc-ink);color:var(--sc-accent-ink);
              font:inherit;font-weight:600;padding:0 22px;cursor:pointer;letter-spacing:.02em}
.enter button:hover{background:#fff}
.fine{font-family:var(--mono);font-size:11px;color:var(--sc-ink-soft);margin-top:14px;letter-spacing:.04em}
.fine a{color:var(--sc-ink);border-bottom:1px solid var(--line-2);text-decoration:none}
.fine a:hover{border-bottom-color:var(--brand)}
/* The close is an invitation, not a gate: the field is the thing everyone has.
   Stacked on a phone so the label never truncates. */
/* On a phone the chrome cannot carry both the nav and the money readout: at
   390px the held figure ran off the right edge and "3 blocked" wrapped. The
   nav goes, the money stays, because the money is the argument. */
@media (max-width:700px){.chrome .navi{display:none} .chrome{gap:10px} .chrome .sign{margin-left:auto}}
@media (max-width:560px){.enter{flex-direction:column;max-width:none}
  .enter button{border-left:0;border-top:1px solid var(--line-2);padding:14px 22px}}
@media (max-width:860px){.clocks{grid-template-columns:1fr}.dial{width:min(58vw,300px)}}
@media (prefers-reduced-motion:reduce){.frag,.cross{transition:none}}
/* ── SECOND CIRCULAR FORM: the ring of hours ─────────────────────────────────
   Act 5's job is comprehension, so the circle must DO something, not glow. It is
   a window of time drawn as 24 segments. Early in the act they are jittered:
   different opacities, different radii, unresolved. As the act advances they
   settle into one ordered ring, and the segment where the invoice should have
   landed stays EMPTY. The finding is the hole, and the hole is only legible once
   the rest is ordered. That is what intelligence looks like here: uncertainty
   resolving until an absence becomes visible. No orb, no pulse, no gradient. */
.ring{position:relative;width:min(40vh,340px);aspect-ratio:1;margin-inline:auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring line{stroke:var(--sc-ink);stroke-width:2;stroke-linecap:butt}
.ring line.gap{stroke:var(--state)}
.ring .rx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
          text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
          text-transform:uppercase;color:var(--sc-ink-soft)}
.ring .rx b{display:block;font-size:13px;letter-spacing:.04em;color:var(--sc-ink);text-transform:none;margin-bottom:5px}
.ring .rx b.found{color:var(--state)}
.act5{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;margin-top:10px}
@media (max-width:860px){.act5{grid-template-columns:1fr}}

/* ── FOOTER ──────────────────────────────────────────────────────────────────
   The status bar is app chrome and stays. This is the thing a STRANGER needs and
   the status bar cannot give them: what this is, who is behind it, how to reach
   a person, and the legal surfaces. Hairline grid, mono labels, nothing centred,
   no social icons, no newsletter second-ask. The page has one action already. */
  /* The status bar is position:fixed at bottom:0, so the footer must clear its
     own height or the bar sits on top of the last row. 34px of bar plus room. */
.foot{border-top:1px solid var(--line);padding:56px var(--pad) calc(34px + 30px);background:var(--sc-canvas)}
.foot-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,56px)}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--sc-ink-soft);font-weight:500;margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{color:var(--sc-ink);text-decoration:none;font-size:13.5px;border-bottom:1px solid transparent;padding-bottom:1px}
.foot a:hover{border-bottom-color:var(--line-2)}
.foot li{color:var(--sc-ink)}
.foot .soon{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sc-ink-soft);margin-left:6px}
.foot .blurb{color:var(--sc-ink-soft);font-size:13.5px;line-height:1.6;margin:14px 0 0;max-width:34ch}
.foot-base{max-width:1180px;margin:36px auto 0;padding-top:20px;border-top:1px solid var(--line);
           display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;
           font-family:var(--mono);font-size:11px;color:var(--sc-ink-soft);letter-spacing:.04em}
.foot-base .sp{margin-left:auto}
@media (max-width:860px){.foot-in{grid-template-columns:1fr 1fr}}
.enter input{font-family:var(--mono);letter-spacing:.06em}