/* ============================================================
   THE FILM — Acts II & III styling (beats 03–08).
   Loaded after film.css. The thread appears only where it works:
   the stage pipelines and the finale's drawn checkmark.
   ============================================================ */

/* plain labels — no scene numbering */
.kicker::before{content:none !important}
main{counter-reset:none}

/* ---------- beat 05: how it works — the app's own node widgets ---------- */
/* full-bleed with the film sections' 64px margins, not the centered column */
#how{gap:56px;max-width:none;padding-left:64px;padding-right:64px}
#how h2{font-size:clamp(40px,4.6vw,64px);margin-bottom:34px;max-width:none}
.hstep{position:relative}
.hstep__idx{
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint,#8a9079);margin:0 0 14px;max-width:none;
}
.hstep__idx b{color:var(--mut);font-weight:700}
/* the node card, drawn like the app's expanded widget; system sans on purpose —
   the box should read as the product's UI, not as page typography */
.wf-node{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  color:var(--ink);box-shadow:0 1px 2px var(--shadow-3);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.wf-node__head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.wf-node__dot{width:11px;height:11px;border-radius:50%;background:#b0663a;flex:0 0 auto}
.wf-node__head h3{font-size:16.5px;font-weight:500;letter-spacing:-.01em;margin:0;flex:1;font-family:inherit;line-height:1.3}
.wf-node__x{color:var(--faint);font-size:15px;line-height:1}
.wf-node__sockets{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:14.5px}
.wf-socket{display:flex;align-items:center;gap:8px}
.wf-socket i{width:9px;height:9px;border-radius:50%;background:#9c7b3e}
.wf-node__params{padding:4px 12px 14px;display:flex;flex-direction:column;gap:9px}
.wf-pill{
  display:flex;align-items:center;background:var(--panel-2);border:1.5px solid var(--line-2);
  border-radius:999px;padding:6px 13px;font-size:13.5px;color:var(--ink);
}
.wf-pill .st{color:var(--faint);flex:0 0 auto}
.wf-pill .bar{width:1px;align-self:stretch;background:var(--line-2);margin:1px 9px;flex:0 0 auto}
.wf-pill .lb{color:var(--mut);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-pill .vl{font-weight:600;white-space:nowrap;margin-left:12px}
.hstep__copy{margin:26px 0 0;font-size:13.5px;color:var(--mut);line-height:1.75;max-width:none}
/* the cable between neighbouring nodes, at the sockets row's height; its width
   equals the #how grid gap so it exactly bridges the columns */
.hstep + .hstep .wf-node::before{
  content:"";position:absolute;right:100%;width:56px;height:7px;top:65px;
  background:linear-gradient(180deg,var(--wire) 0 2px,var(--bg) 2px 5px,var(--wire) 5px 7px);
}
.hstep + .hstep .wf-node::after{
  content:"";position:absolute;right:calc(100% + 19px);width:14px;height:14px;top:61px;
  border-radius:50%;background:var(--bg);border:2px solid var(--wire);
}
/* arrival: nodes land left to right, one flat settle each, wires draw after */
#how.how-armed .hstep{opacity:0;transform:translateY(14px) scale(.97)}
#how.how-on .hstep{
  opacity:1;transform:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1.05);
}
#how.how-on .hstep:nth-of-type(2){transition-delay:.18s}
#how.how-on .hstep:nth-of-type(3){transition-delay:.36s}
#how.how-armed .hstep .wf-node::before,#how.how-armed .hstep .wf-node::after{opacity:0}
#how.how-on .hstep .wf-node::before,#how.how-on .hstep .wf-node::after{opacity:1;transition:opacity .3s ease}
#how.how-on .hstep:nth-of-type(2) .wf-node::before,#how.how-on .hstep:nth-of-type(2) .wf-node::after{transition-delay:.3s}
#how.how-on .hstep:nth-of-type(3) .wf-node::before,#how.how-on .hstep:nth-of-type(3) .wf-node::after{transition-delay:.48s}
@media (max-width:1023px){
  #how{padding-left:24px;padding-right:24px}
}
@media (max-width:767px){
  .hstep + .hstep .wf-node::before,.hstep + .hstep .wf-node::after{display:none}
  .hstep__copy{max-width:none}
}

/* ---------- beat 07: FAQ — the ledger: all open, numbered, two columns ---------- */
#faq{max-width:none;padding-left:64px;padding-right:64px}
#faq .kicker{justify-content:center}
#faq h2{font-size:clamp(40px,4.6vw,64px);margin-bottom:54px;margin-left:auto;margin-right:auto;text-align:center;max-width:none}
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;max-width:1180px;margin:0 auto}
.ledger .item{border-top:1px solid var(--line);padding:22px 0 24px}
.ledger .item:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.ledger .item__q{
  display:flex;align-items:baseline;gap:16px;margin:0;max-width:none;
  font-family:var(--font-m);font-size:14.5px;font-weight:700;color:var(--ink);
}
.ledger .item__no{font-weight:400;font-size:11px;color:var(--faint,#8a9079)}
.ledger .item .a{
  margin:10px 0 0 40px;padding:0;
  font-family:var(--font-m);font-size:13px;color:var(--mut);max-width:480px;
}
/* arrival: rows fade up once, row by row */
#faq.faq-armed .item{opacity:0;transform:translateY(12px)}
#faq.faq-on .item{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
#faq.faq-on .item:nth-child(2){transition-delay:.08s}
#faq.faq-on .item:nth-child(3){transition-delay:.16s}
#faq.faq-on .item:nth-child(4){transition-delay:.24s}
#faq.faq-on .item:nth-child(5){transition-delay:.32s}
#faq.faq-on .item:nth-child(6){transition-delay:.4s}
#faq.faq-on .item:nth-child(7){transition-delay:.48s}
@media (max-width:1023px){
  #faq{padding-left:24px;padding-right:24px}
  .ledger{grid-template-columns:1fr}
  .ledger .item:nth-last-child(-n+2){border-bottom:0}
  .ledger .item:last-child{border-bottom:1px solid var(--line)}
}

/* ---------- beat 06: the source — the app's scratch pad, inverted ---------- */
#trust{
  background:var(--dark-bg);max-width:none;position:relative;overflow:hidden;
  padding-left:64px;padding-right:64px;
}
#trust .kicker{color:var(--on-dark-faint);justify-content:center}
#trust h2{color:var(--on-dark);margin-left:auto;margin-right:auto;max-width:900px}
#trust h2 + p{border-top:0;padding-top:0}
/* the words sit centered over the full-width scratch pad, on a wide column:
   roughly 60% of the viewport, leaving about 20% of margin either side */
#trust{text-align:center}
#trust > p{margin-left:auto;margin-right:auto;max-width:60vw}
#trust .scratch,#trust figcaption{text-align:left}
#trust > p:not(.kicker){color:#ffffff;font-weight:500}
#trust > p strong{color:var(--on-dark-acc);font-weight:700}
/* the scratch pad: the app's editor chrome, on the section's paper-dark.
   System sans on purpose — the chrome should read as the product's UI. */
.scratch-fig{margin:44px 0 0}
.scratch{
  background:var(--dark-2);border:1px solid var(--dark-line);border-radius:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--on-dark-mut);
  overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}
.sc-tabs{display:flex;align-items:center;gap:26px;padding:0 18px;border-bottom:1px solid var(--dark-line);background:var(--dark-3)}
.sc-tab{display:flex;align-items:center;gap:7px;padding:13px 2px;font-size:14px;color:var(--on-dark-mut)}
.sc-tab.on{color:var(--on-dark);box-shadow:inset 0 -2px 0 var(--on-dark-acc)}
.sc-tab .cp{color:var(--on-dark-faint);font-size:12px;margin-left:4px}
.sc-edit{display:flex;justify-content:space-between;align-items:center;padding:9px 18px;background:var(--dark-3);color:var(--on-dark-mut);font-size:13px;border-bottom:1px solid var(--dark-line)}
.sc-edit b{color:var(--on-dark);font-weight:600}
.sc-code{background:var(--dark-code);padding:16px 0;font-family:var(--font-m);font-size:12.5px;line-height:1.75;overflow-x:auto}
.sc-code .ln{display:block;padding:0 18px 0 0;white-space:pre}
.sc-code .ln::before{content:attr(data-n);display:inline-block;width:44px;text-align:right;margin-right:16px;color:var(--on-dark-faint)}
.sc-code .c{color:var(--on-dark-mut)}
.sc-code .k{color:var(--on-dark-acc);font-weight:700}
.sc-code .s{color:#c9a377}
.sc-code .d{color:#d8bd8a}
.sc-code .ln.hl{background:var(--code-hl)}
.sc-io{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:16px 18px 6px;border-top:1px solid var(--dark-line)}
.sc-io h4,.sc-con h4{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;color:var(--on-dark-mut);font-weight:400;text-transform:uppercase;margin:0 0 10px}
.sc-io .rowl{display:flex;gap:10px;align-items:center}
.fld{background:var(--dark-3);border:1px solid var(--dark-line);border-radius:8px;padding:8px 14px;font-family:var(--font-m);font-size:13px;color:var(--on-dark)}
.fld.grow{flex:1}
.fld.sel::after{content:" ⇕";color:var(--on-dark-faint)}
.fld.ph{color:var(--on-dark-faint)}
.sc-x{color:var(--on-dark-mut)}
.add{margin:10px 0 8px;display:inline-block;border:1px dashed var(--dark-line);border-radius:8px;padding:7px 14px;color:var(--on-dark-mut);font-size:13px}
.sc-con{border-top:1px solid var(--dark-line);padding:12px 18px 16px}
.sc-con p{color:var(--on-dark-faint);font-family:var(--font-m);font-size:12.5px;margin:0;max-width:none}
#trust figcaption{margin:16px 0 0;color:var(--on-dark-mut);font-size:12.5px;font-family:var(--font-m)}

/* ---------- beat 08: the finale — Consider it done. ---------- */
main > section.beat-08{
  min-height:92vh;background:var(--bg);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 64px 120px;
  --h8f:clamp(80px, min(19vh, 11.5vw), 250px);
}
.ghost--final{
  right:-40px;bottom:-160px;font-size:clamp(320px,44vw,620px);
  -webkit-text-stroke:1px var(--line);
}
.beat-08 h2{
  position:relative;z-index:20;margin:0 0 26px;max-width:none;
  font-size:var(--h8f);line-height:.88;letter-spacing:-.05em;white-space:nowrap;
}
.beat-08 h2 .h-solid{display:block;color:var(--ink)}
.beat-08 h2 .h-outline{display:block;margin-left:.55em;color:transparent;-webkit-text-stroke:3px var(--acc)}
@supports not (-webkit-text-stroke:1px black){.beat-08 h2 .h-outline{color:var(--faint,#8a9079)}}
.beat-08 > p{position:relative;z-index:20;color:var(--mut);font-size:15px;margin:0 0 22px}
.beat-08 form{margin:0;display:flex;flex-wrap:nowrap;max-width:none;gap:0}
.beat-08 form input{font-family:var(--font-m);font-size:14px;border:1.5px solid var(--ink);border-right:0;background:#fff;padding:16px 20px;width:320px;flex:0 0 auto;color:var(--mut);border-radius:0}
.beat-08 form .btn{background:var(--acc);color:#fff;border:1.5px solid var(--acc);border-radius:0;padding:16px 24px;font-size:13px}
.beat-08 form .btn:hover{background:var(--acc-hover)}
.beat-08 .microcopy{position:relative;z-index:20;margin-top:12px}

/* the checkmark: the film's last gesture, drawn once on arrival */
.beat-08 .check{
  position:absolute;z-index:10;right:clamp(48px, 9vw, 170px);top:50%;
  width:clamp(220px, 24vw, 380px);height:auto;transform:translateY(-54%);
  overflow:visible;pointer-events:none;
}
.beat-08 .check path{
  fill:none;stroke:var(--acc);stroke-width:44;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 24px 50px var(--check-shadow));
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  /* narrow columns read badly centered — the section goes left-aligned */
  #trust{padding-left:24px;padding-right:24px;text-align:left}
  #trust > p{max-width:none}
  #trust .kicker{justify-content:flex-start}
  #trust h2{margin-left:0}
  .sc-io{grid-template-columns:1fr}
  .beat-08{padding:88px 24px;min-height:auto}
  .beat-08 h2{white-space:normal}
  .beat-08 .check{position:static;transform:none;width:150px;margin:0 0 26px}
  .beat-08 form{flex-wrap:wrap;gap:10px}
  .beat-08 form input{width:100%}
  .ghost--final{display:none}
}

@media (prefers-reduced-motion: reduce){
  .beat-08 .check path{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}

/* ---------- beat 03: the library — full-bleed ring, words in its hollow,
   the four stats as one readout line across the top ---------- */
/* The section ends 30px under the ring's lowest glyphs. Their depth is
   canvas top 60 + ring pivot 355 + 0.92·radius, and radius follows the
   viewport (min(44vw, 563px)) — so the height tracks it and the gap to the
   next section stays the same at every window width. */
#library{
  max-width:none;padding:0;background:var(--bg);
  position:relative;height:calc(445px + min(40.5vw, 518px));overflow:hidden;
}
/* the centre of the ring's hollow: pivot depth 415px + 0.204·radius (the
   tilt projects the near arc further down than the far arc up) */
#library .library-head{
  position:absolute;top:calc(415px + min(8.98vw, 115px));left:50%;transform:translate(-50%,-50%);
  z-index:20;width:min(640px, calc(100% - 48px));text-align:center;
}
#library .kicker{
  margin:0 0 14px;justify-content:center;max-width:none;
  font-size:10px;letter-spacing:.22em;color:var(--faint,#8a9079);
}
#library h2{
  font-size:clamp(40px,4.5vw,64px);line-height:.95;letter-spacing:-.035em;
  margin:0 0 16px;max-width:none;
}
#library .lede{margin:0;max-width:none;font-size:13px;color:var(--mut);border-top:0;padding-top:0}
#ring{
  position:absolute;left:0;right:0;top:60px;height:880px;width:100%;
  display:block;touch-action:pan-y;z-index:10;
}
.stats-grid{
  position:absolute;z-index:20;left:64px;right:64px;top:64px;
  display:flex;justify-content:space-between;gap:40px;
}
.stats-grid .plate{display:block;padding:0;background:none;border:0}
.stats-grid .plate__num{
  font-family:var(--font-d);font-weight:700;font-size:44px;line-height:1;
  letter-spacing:-.03em;color:var(--ink);
}
.stats-grid .plate__unit{font-size:.55em;color:var(--acc);margin-left:.05em}
.stats-grid .plate__caption{font-size:11px;color:var(--mut);max-width:210px;margin:6px 0 0}
#ringtip{
  position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-150%);
  background:var(--ink);color:var(--bg);font-family:var(--font-m);font-size:11px;letter-spacing:.02em;
  padding:.45em .8em;border-radius:5px;opacity:0;transition:opacity .15s ease;white-space:nowrap;
}
/* Phone: the ring opens the scene alone, then dissolves while the words fade
   in at its centre (film.js initLibraryReveal drives the two classes; without
   JS or with reduced motion the resting state below already reads fine).
   The scene box hugs the ring: its radius is width-capped at 44vw, and the
   projected ellipse spans 1.25 radii, so ~1.1× the viewport width of height
   wraps it with even air; orbit-ring.js centres the ellipse in the box. */
@media (max-width:1023px){
  #library{--lib-scene:clamp(300px, 110vw, 480px);height:auto;padding:3rem 0 2.2rem;display:flex;flex-direction:column}
  #ring{position:relative;top:0;height:var(--lib-scene);order:-1;
    opacity:.22;transition:opacity 1.1s ease}
  #library .library-head{
    position:absolute;transform:none;left:24px;right:24px;top:3rem;width:auto;
    height:var(--lib-scene);margin:0;z-index:20;
    display:flex;flex-direction:column;justify-content:center;text-align:center;
    transition:opacity 1s cubic-bezier(.2,.6,.25,1) .35s, transform 1s cubic-bezier(.2,.6,.25,1) .35s;
  }
  .stats-grid{position:static;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 24px 0}
  /* armed: the ring holds the stage alone until the reveal fires */
  #library.lib-armed #ring{opacity:1}
  #library.lib-armed .library-head{opacity:0;transform:translateY(10px)}
  #library.lib-armed.lib-on #ring{opacity:.14}
  #library.lib-armed.lib-on .library-head{opacity:1;transform:none}
}