/* work.flow landing v6 — the marketer's IA staged in the film system.
   Loads after main.css / film.css / film-acts.css / legal.css and only adds
   what the new acts need: the click-driven use-case stage, the ledger's
   artifact chips, the community act, the footer's fifth column, and the
   inline done-state for every waitlist form. */

/* ---------- the hero: the cut turns on the dot, the pitch centres below ---------- */

.hero-act{
  height:100vh;
  height:100svh;
  background:var(--bg);
  background-image:radial-gradient(var(--dot-grid) 1px, transparent 1px);
  background-size:28px 28px;
}
.hero-stick{position:relative;height:100%;overflow:hidden;}
/* while the intro plays the topbar starts off-screen — no transition, or the
   first paint shows it sliding out */
html.wf-intro #topbar{transform:translateY(-100%);transition:none;}
/* The dark ground and the wordmark are positioned by the intro script, but
   the first paint happens before it runs — so the CSS defaults must equal
   what the script will compute, or the whole hero visibly snaps when it
   takes over. Default = the settled state (band + name centred in it,
   mirroring frame(1)'s max(30% of viewport, wordmark + 96px)); while the
   intro plays (html.wf-intro, stamped pre-paint) = full-screen dark with
   the name dead-centre, mirroring frame(0). */
.hero-dark{
  position:absolute;left:0;top:0;right:0;z-index:1;
  height:max(30vh, min(10.4vw, 150px) + 96px);
  height:max(30svh, min(10.4vw, 150px) + 96px);
  background:var(--dark-bg);
  background-image:radial-gradient(var(--scene-dots) 1px, transparent 1px);
  background-size:28px 28px;
  will-change:height;
}
.hero-wm{
  position:absolute;left:0;top:0;width:100%;text-align:center;z-index:10;margin:0;
  font-family:var(--font-d);font-weight:700;letter-spacing:-.05em;
  font-size:min(10.4vw,150px);line-height:1;white-space:nowrap;pointer-events:none;
  transform:translateY(calc(max(30vh, min(10.4vw, 150px) + 96px)/2 + 14px - 50%));
  transform:translateY(calc(max(30svh, min(10.4vw, 150px) + 96px)/2 + 14px - 50%));
  will-change:transform;
}
html.wf-intro .hero-dark{height:100%;}
html.wf-intro .hero-wm{
  transform:translateY(calc(50vh - 50%));
  transform:translateY(calc(50svh - 50%));
}
/* main.css stacks h1 spans (display:block) for the display scale — the
   wordmark is one line, always, light on the dark ground throughout */
.hero-wm span{display:inline;}
.hero-wm .w1{color:var(--on-dark);}
.hero-wm .w1 b{color:var(--acc);}
.hero-wm .w2{color:var(--on-dark);}
.hero-body{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.25rem;text-align:center;padding:24px 24px 5vh;will-change:top;
}
/* main.css caps every <p> at 62ch and pins the box left — the hero column
   centres every line on one spine instead */
.hero-body p{max-width:none;margin-left:auto;margin-right:auto;}
.hero-block{opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);}
.hero-body.on .hero-block{opacity:1;transform:none;}
.hero-body.on .b2{transition-delay:.12s;}
.hero-body.on .b3{transition-delay:.24s;}
.hero-body .hg-cap{font-size:14px;margin-bottom:14px;}
/* the claims readout: two stacked instrument lines, payoff in accent */
.clm-readout{display:inline-flex;flex-direction:column;align-items:center;gap:.55em;margin:0;}
.clm-readout span{
  font-family:var(--font-m);font-size:30px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);
}
.clm-readout b{color:var(--ink);font-weight:700;}
.clm-readout .acc{color:var(--acc);font-weight:700;}
.hero-body .microcopy{max-width:min(60ch, 100%);}
.hero-tag{margin:20px 0 0;font-family:var(--font-d);font-weight:700;line-height:1.15;
  font-size:clamp(41px,4.1vw,55px);letter-spacing:-.03em;color:var(--ink);}
.hero-tag b{color:var(--acc);}
/* the house form (as the community section), a size class up */
.hero-signup{margin-top:32px;}
.hero-signup form{justify-content:center;max-width:36rem;margin:0 auto .4rem;}
.hero-signup input[type="email"]{font-size:1.1rem;padding:1em 1.15em;}
.hero-signup .btn{font-size:1.05rem;padding:1em 1.75em;}
.hero-body .microcopy{font-size:15px;margin:12px auto 0;}
.hero-signup .cap-done{justify-content:center;}
.hero-see{display:inline-flex;align-items:center;gap:.7em;
  color:var(--ink);font-size:19px;text-transform:uppercase;letter-spacing:.14em;
  font-family:var(--font-m);font-weight:700;transition:color .2s var(--ease);}
.hero-see:hover{color:var(--acc);}
.hero-see span{display:inline-block;animation:bob 1.6s ease-in-out infinite;}
@media (max-width:767px){
  /* the pitch must fit the light region below the band: smaller voice,
     tighter rhythm, and anchored under the band instead of centre-floated
     (centring an overflowing column pushes it up into the dark) */
  .hero-body{gap:1.3rem;justify-content:flex-start;padding:20px 20px 4vh;}
  .hero-body .hg-cap{font-size:10.5px;margin-bottom:8px;letter-spacing:.18em;}
  .clm-readout span{font-size:21px;letter-spacing:.12em;}
  .hero-tag{font-size:30px;margin-top:14px;}
  .hero-see{font-size:14px;}

}

/* ---------- waitlist done-state (shared by every capture form) ---------- */

.cap-done{
  display:none;
  align-items:center;
  gap:.6em;
  font-family:var(--font-m);
  font-size:.88rem;
  color:var(--acc);
  padding:.8em 0;
  margin:0;
  max-width:none;
}
.cap-done::before{content:"\2713";font-weight:700;}
.cap-block.is-done form,
.cap-block.is-done .microcopy{display:none;}
.cap-block.is-done .cap-done{display:flex;}
.hg--join .cap-done,
.act-dark .cap-done,
.sf-updates .cap-done{color:var(--on-dark-acc);}
/* Honeypot: off-screen rather than display:none, because some bots skip inputs
   that are not rendered at all. Kept out of the tab order and off the a11y tree
   by the markup (tabindex="-1", aria-hidden), so no visitor can reach it. */
.cap-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
/* Submission failed: the form stays put so the address can be resent. */
.cap-error{
  display:flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-m);
  font-size:.88rem;
  color:var(--err);
  padding:.6em 0 0;
  margin:0;
  max-width:none;
}
.cap-error[hidden]{display:none;}
.cap-error::before{content:"!";font-weight:700;}
.hg--join .cap-error,
.act-dark .cap-error,
.sf-updates .cap-error{color:var(--err-on-dark);}

/* ---------- topbar CTA ---------- */

.topbar__cta{
  margin-left:1rem;
  padding:.6em 1.1em;
  font-size:.72rem;
  flex-shrink:0;
}
@media (max-width:900px){.topbar__cta{display:none;}}

/* ---------- the use-case stage (click-driven, never pinned) ---------- */

/* personas live top-right, opposite the headline — the choice must be seen
   before the pipeline, not discovered at the fold's edge */
@media (min-width:1024px){
  #build .stage--uc .chips{top:calc(var(--topbar-h) + 46px);right:64px;bottom:auto;}
}

.stage--uc .uc-prompt{
  position:absolute;z-index:20;
  left:64px;top:calc(var(--topbar-h) + 40px + clamp(150px, 17vw, 240px));
  width:min(520px, 44%);
  margin:0;max-width:none;
  font-family:var(--font-m);font-size:14px;line-height:1.7;
  color:var(--on-dark-strong);
  min-height:4.5em;
}
.stage--uc .uc-prompt .caret{background:var(--on-dark-acc);box-shadow:0 0 6px var(--caret-glow);}
.stage--uc.is-you .uc-prompt{visibility:hidden;}

/* pucks land with one springy settle each; the resting state is plain
   opacity so reduced-motion still shows the finished pipeline */
.stage--uc .puck.on{opacity:1;animation:puck-pop .45s var(--ease) both;}
@keyframes puck-pop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.55);}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.07);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
/* long pipelines: smaller pucks, labels alternating over/under the wave;
   the glyph scales with its disc — a fixed size overflows small pucks */
.stage--uc.dense .puck{width:92px;height:92px;}
.stage--uc.dense .puck img{width:40%;}
.stage--uc .puck--alt .puck__tag{top:auto;bottom:calc(100% + 12px);}
@media (max-width:1023px){
  .stage--uc .puck--alt .puck__tag{top:50%;bottom:auto;}
}

/* phones: a tight left column of small pucks, labels beside them; the wire
   thins to match, and the prompt sits higher so the column clears it */
@media (max-width:1023px){
  .stage--uc .puck{width:46px;height:46px;}
  .stage--uc.dense .puck{width:42px;height:42px;}
  .stage--uc .puck img{width:42%;}
  .stage--uc .uc-prompt{top:calc(var(--topbar-h) + 118px);font-size:12.5px;min-height:3.6em;}
  .stage--uc .thread--stage .thread-path--base{stroke-width:6;}
}

/* the "You" panel: the ask, on the stage itself */
.stage--uc .uc-you{
  position:absolute;z-index:25;
  left:64px;top:calc(var(--topbar-h) + 40px + clamp(150px, 17vw, 240px));
  width:min(480px, 60%);
}
.stage--uc .uc-you input[type="text"]{
  width:100%;
  font-family:var(--font-m);font-size:13.5px;
  background:var(--dark-2);border:1.5px solid var(--dark-line);border-radius:0;
  color:var(--on-dark);padding:14px 16px;
  margin-bottom:12px;
}
.stage--uc .uc-you input[type="text"]::placeholder{color:var(--on-dark-faint);}
.stage--uc .uc-you input[type="text"]:focus{outline:none;border-color:var(--on-dark-acc);}
.stage--uc .uc-you form{display:flex;flex-wrap:nowrap;gap:0;margin:0;max-width:none;}
.stage--uc .uc-you input[type="email"]{
  font-family:var(--font-m);font-size:13.5px;border:1.5px solid var(--dark-line);border-right:0;
  background:var(--dark-2);padding:14px 16px;flex:1 1 auto;min-width:0;
  color:var(--on-dark);border-radius:0;
}
.stage--uc .uc-you input[type="email"]::placeholder{color:var(--on-dark-faint);}
.stage--uc .uc-you .btn{border-radius:0;padding:14px 22px;font-size:12px;flex-shrink:0;}
.stage--uc .uc-you .microcopy{font-size:11.5px;margin-top:10px;color:var(--on-dark-mut);}

@media (max-width:1023px){
  .stage--uc .uc-prompt{left:24px;width:min(520px, calc(100% - 48px));top:calc(var(--topbar-h) + 150px);}
  .stage--uc .uc-you{left:24px;width:calc(100% - 48px);top:calc(var(--topbar-h) + 150px);}
}

/* ---------- the node widgets (#how) ---------- */

/* film-acts paints the card with var(--surface), a token no theme defines —
   the declaration collapses to transparent and the dot grid bleeds through.
   The app's widgets are opaque. */
.wf-node{background:var(--panel);}
.wf-pill{background:var(--panel-2);}

/* ---------- the scratch pad's Agent tab: the app's chat, embedded ---------- */

/* both views occupy the same grid cell, so the window holds the taller
   view's height whichever tab is open — no size jump on switch */
.sc-views{display:grid;}
.sc-views > .sc-view{grid-area:1/1;min-width:0;}
.sc-views > .sc-view[hidden]{display:block;visibility:hidden;pointer-events:none;}
.sc-agent{height:100%;box-sizing:border-box;}
.sc-agent .sc-composer{margin-top:auto;}

/* the chat wears the scratch pad's own dark palette; system sans on purpose —
   it's the product's UI, not page typography */
.sc-agent{
  background:var(--dark-code);
  padding:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13.5px;line-height:1.6;color:var(--on-dark-mut);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.sc-folders{display:flex;gap:8px;margin-bottom:2px;}
.fchip{
  font-size:12px;color:var(--on-dark-mut);background:var(--dark-3);
  border:1px solid var(--dark-line);border-radius:6px;padding:3px 10px;
}
.fchip--add{background:transparent;border-style:dashed;}
.sc-agent .msg{max-width:78%;padding:10px 14px;border-radius:12px;}
.sc-agent .msg--user{
  align-self:flex-end;
  /* a neutral raised grey, like the app's real chat — never the accent hue */
  background:var(--on-dark-faint);color:var(--on-dark);
  border-bottom-right-radius:4px;
}
.sc-agent .msg--agent{
  align-self:flex-start;
  background:var(--dark-3);border:1px solid var(--dark-line);color:var(--on-dark);
  border-bottom-left-radius:4px;
}
.sc-agent .msg--agent b{font-weight:600;color:var(--on-dark);}
.nchip{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  font-size:11.5px;color:var(--on-dark);background:var(--dark-2);
  border:1px solid var(--dark-line);border-radius:99px;padding:2px 9px 2px 4px;
  margin:0 2px;white-space:nowrap;
}
/* glyphs ship as black strokes — inverted for the dark ground, like the pucks */
.nchip img{width:16px;height:16px;padding:2px;border-radius:50%;background:var(--dark-3);
  filter:invert(1) brightness(1.35);}
.undo-pill{
  margin:0;font-size:12px;color:var(--on-dark-mut);
  border:1px solid var(--dark-line);border-radius:99px;padding:4px 12px;
  background:var(--dark-2);max-width:none;
}
/* the composer row, decorative — the panel is a still of the app */
.sc-composer{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;align-self:stretch;}
.sc-input{
  flex:1;min-width:0;
  background:var(--dark-2);border:1px solid var(--dark-line);border-radius:8px;
  padding:12px 14px;font-size:13px;color:var(--on-dark-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sc-mic{flex:none;display:flex;opacity:.75;}
.sc-mic img{width:18px;height:18px;filter:invert(1) brightness(1.35);}
.sc-send{
  flex:none;background:var(--dark-3);border:1px solid var(--dark-line);border-radius:8px;
  padding:12px 18px;font-size:13px;color:var(--on-dark-mut);
}

/* ---------- ledger artifacts (features) ---------- */

.ledger .item .ledger-mini{
  display:inline-block;
  margin:10px 0 0;max-width:none;
  font-family:var(--font-m);font-size:12.5px;
  color:var(--acc);
  background:var(--panel-2);
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:.55em .9em;
}
.ledger .item .ledger-mini--code{
  color:var(--on-dark);
  background:var(--dark-code);
  border-color:var(--dark-code);
}
.ledger .item .a code{
  font-family:var(--font-m);font-size:.9em;
  background:var(--panel-2);border:1px solid var(--line);border-radius:4px;
  padding:.05em .35em;
}

/* the security headline runs longer than the FAQ's */
#security h2{max-width:24ch;}

/* security: full-bleed like the how act — the four claims as one readout
   row edge to edge, the demo recording below at the same width */
#security{max-width:none;padding-left:64px;padding-right:64px;}
@media (max-width:1023px){#security{padding-left:24px;padding-right:24px;}}
#security .ledger{grid-template-columns:repeat(4, minmax(0,1fr));gap:0 32px;max-width:none;margin:0;}
#security .ledger .item{border-bottom:1px solid var(--line);}
@media (max-width:1023px){#security .ledger{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){#security .ledger{grid-template-columns:1fr;}}
#security video{
  display:block;
  width:100%;
  height:auto;
  margin:2.6rem auto 0;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:var(--panel);
}

/* ---------- community act ---------- */

/* dark palette: any full-bleed act on the film's dark ground */
main > section.act-dark{
  max-width:none;
  background:var(--dark-bg);
}
.act-dark__inner{
  max-width:var(--maxw);
  margin:0 auto;
}
.act-dark .kicker{color:var(--on-dark-acc);}
.act-dark .kicker::before{color:var(--on-dark-faint);}
.act-dark h2{color:var(--on-dark);}
.act-dark .microcopy{color:var(--on-dark-mut);}
.act-dark input[type="email"]{
  background:var(--dark-2);
  border-color:var(--dark-line);
  color:var(--on-dark);
}
.act-dark input[type="email"]::placeholder{color:var(--on-dark-faint);}
/* the ledger on dark ground (the FAQ act) */
.act-dark .ledger .item{border-color:var(--dark-line);}
.act-dark .ledger .item:nth-last-child(-n+2){border-bottom-color:var(--dark-line);}
.act-dark .ledger .item__q{color:var(--on-dark);}
.act-dark .ledger .item__no{color:var(--on-dark-faint);}
.act-dark .ledger .item .a{color:var(--on-dark-mut);}

/* the FAQ and community headers centre as one unit — kicker and headline */
#faq .kicker, #community .kicker{justify-content:center;max-width:none;}
#faq h2, #community h2{max-width:none;text-align:center;margin-left:auto;margin-right:auto;}

/* centered act: the community send-off, whatever ground it sits on */
.act-center{text-align:center;}
.act-center .kicker{justify-content:center;}
.act-center h2{max-width:24ch;margin-left:auto;margin-right:auto;}
.act-center .microcopy{margin-left:auto;margin-right:auto;}
.act-center .cap-block{max-width:30rem;margin:2rem auto 0;}
.act-center .cap-block form{justify-content:center;margin:0 auto .8rem;}
.act-center .cap-done{justify-content:center;}
.community-links{
  display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.8rem;
}
.soon-btn{
  display:inline-flex;align-items:center;
  padding:.6em 1.3em;
  border:1px dashed var(--line-2);
  border-radius:6px;
  font-family:var(--font-m);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--mut);
}
/* a community channel that actually exists: same capsule, solid and clickable */
.live-btn{
  display:inline-flex;align-items:center;
  padding:.6em 1.3em;
  border:1px solid var(--ink);
  border-radius:6px;
  font-family:var(--font-m);font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.live-btn:hover{color:var(--acc);border-color:var(--acc);}

/* ---------- footer: last column carries the updates form ---------- */

.sf-grid--updates{grid-template-columns:1.5fr 1fr 1fr 1.4fr;}
.sf-updates form{margin:.3rem 0 0;flex-direction:column;max-width:none;gap:.5rem;display:flex;}
.sf-updates input[type="email"]{
  background:var(--dark-2);
  border-color:var(--dark-line);
  color:var(--on-dark);
  flex-basis:auto;
  font-size:13px;
  padding:.65em .9em;
}
.sf-updates input[type="email"]::placeholder{color:var(--on-dark-faint);}
.sf-updates .btn{width:100%;font-size:.72rem;padding:.7em 1.2em;}
@media (max-width:900px){.sf-grid--updates{grid-template-columns:1fr 1fr;}}
@media (max-width:540px){.sf-grid--updates{grid-template-columns:1fr;}}


/* the library act painted its own opaque ground over the page's dot grid —
   transparent lets the canvas texture run through, in every theme */
#library{background:transparent;}