/* 'How the money moves through one home' on rent-to-own.html (25 Oct 2026): same drawing language as the homepage's
   three ways to house a family. Square corners, teal water, navy lines; one authored motion when it comes into view. */
.money-flow{margin:28px 0 36px;padding:0}
.money-flow-title{font-size:20px;font-weight:700;color:#193D4E;margin:0 0 14px}
.money-flow-frame{padding:0}
.money-flow-art{display:block;width:100%;height:auto}
.mf-ground{fill:none;stroke:#D9E3E8;stroke-width:2}
.mf-vessel{fill:#fff}
.mf-line{fill:none;stroke:#193D4E;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mf-dashed{stroke-dasharray:7 6}
.mf-thin{fill:none;stroke:#526571;stroke-width:2;stroke-linecap:round}
.mf-water{fill:#4A90A4;opacity:.55}
.mf-stream{fill:none;stroke:#4A90A4;stroke-width:6;stroke-linecap:round}
.mf-return{stroke-width:5;stroke-dasharray:14 10}
.mf-mark{fill:none;stroke:#276578;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mf-valve{fill:#fff;stroke:#193D4E;stroke-width:2.5}
.money-flow-steps{list-style:none;counter-reset:mf;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.money-flow-steps li{counter-increment:mf;font-size:15px;line-height:1.5;color:#193D4E}
.money-flow-steps strong{display:block;font-size:16px;margin-bottom:4px}

/* Motion: the water runs once, from the fund through the home and back, when the drawing comes into view */
@media (prefers-reduced-motion:no-preference){
  .js-flow .money-flow .mf-pipe-out,.js-flow .money-flow .mf-pay,.js-flow .money-flow .mf-pay-home,.js-flow .money-flow .mf-pay-reserve{
    stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset .7s ease-out}
  .js-flow .money-flow .mf-home-water{transform:translateY(80px);transition:transform 1.6s cubic-bezier(.16,1,.3,1) 1s}
  .js-flow .money-flow .mf-reserve-water{transform:translateY(34px);transition:transform 1.2s cubic-bezier(.16,1,.3,1) 1.1s}
  .js-flow .money-flow .mf-return{opacity:0;transition:opacity .6s ease-out 2.4s}
  .js-flow .money-flow .mf-pay{transition-delay:.5s}
  .js-flow .money-flow .mf-pay-home,.js-flow .money-flow .mf-pay-reserve{transition-delay:.8s}
  .js-flow .money-flow.is-flowing .mf-pipe-out,.js-flow .money-flow.is-flowing .mf-pay,
  .js-flow .money-flow.is-flowing .mf-pay-home,.js-flow .money-flow.is-flowing .mf-pay-reserve{stroke-dashoffset:0}
  .js-flow .money-flow.is-flowing .mf-home-water,.js-flow .money-flow.is-flowing .mf-reserve-water{transform:none}
  .js-flow .money-flow.is-flowing .mf-return{opacity:1;animation:mf-run 1.6s linear 3s 3}
}
@keyframes mf-run{to{stroke-dashoffset:-48}}
@media (max-width:820px){
  .money-flow-steps{grid-template-columns:1fr;gap:14px}
  .money-flow-steps li{display:block}
}

/* Funding page (25 Oct): cascade and payment route share the drawing language above */
.mf-trickle{stroke-width:3;stroke-dasharray:4 8}
.mf-glyph{fill:#276578;font:700 11px Arial,Helvetica,sans-serif;text-anchor:middle}
.rt-box{fill:#fff;stroke:#9DC3CF;stroke-width:2}
.rt-icon{fill:none;stroke:#276578;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rt-digital{stroke-dasharray:12 9}
.money-route-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.money-route-steps li{font-size:15px}
.money-route-steps strong{font-size:15px}
.funding-status{list-style:none;padding:0;margin:20px 0 8px;display:flex;flex-wrap:wrap;gap:8px 24px}
.funding-status li{font-size:16px;padding-left:18px;position:relative}
.funding-status li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;background:#4A90A4}
.funding-status li.is-open::before{background:#fff;border:2px solid #4A90A4;width:6px;height:6px}
.kinds-fold{margin:20px 0 8px}
.kinds-fold summary{cursor:pointer;font-weight:700;color:#276578}
@media (prefers-reduced-motion:no-preference){
  .js-flow .money-cascade .cc-in,.js-flow .money-cascade .cc-spill{stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset .6s ease-out}
  .js-flow .money-cascade .mf-trickle{stroke-dasharray:4 8;stroke-dashoffset:0;opacity:0;transition:opacity .6s ease-out 3.2s}
  .js-flow .money-cascade .cc-water{transform:translateY(70px);transition:transform 1s cubic-bezier(.16,1,.3,1)}
  .js-flow .money-cascade .cc-w0{transition-delay:.4s}.js-flow .money-cascade .cc-s0{transition-delay:1.1s}
  .js-flow .money-cascade .cc-w1{transition-delay:1.5s}.js-flow .money-cascade .cc-s1{transition-delay:2.1s}
  .js-flow .money-cascade .cc-w2{transition-delay:2.4s}.js-flow .money-cascade .cc-s2{transition-delay:2.9s}
  .js-flow .money-cascade .cc-w3{transition-delay:3.2s}
  .js-flow .money-cascade.is-flowing .cc-in,.js-flow .money-cascade.is-flowing .cc-spill{stroke-dashoffset:0}
  .js-flow .money-cascade.is-flowing .mf-trickle{opacity:1}
  .js-flow .money-cascade.is-flowing .cc-water{transform:none}
  .js-flow .money-route .rt-pipe{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset .5s ease-out}
  .js-flow .money-route .rt-p1{transition-delay:.4s}.js-flow .money-route .rt-p2{transition-delay:.8s}
  .js-flow .money-route .rt-p3{transition-delay:1.2s}.js-flow .money-route .rt-p4{transition-delay:1.6s}
  .js-flow .money-route.is-flowing .rt-pipe{stroke-dashoffset:0}
  .js-flow .money-route.is-flowing .rt-digital{stroke-dasharray:12 9}
}
@media (max-width:820px){.money-route-steps{grid-template-columns:1fr}}

/* Rent-to-own (25 Oct): varied blocks instead of a string of headed sections */
.rent-cases{font-size:15px;color:#526571}
.step-strip{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:20px 0 18px;padding:0;position:relative}
.step-strip::before{content:"";position:absolute;left:11px;right:11px;top:11px;height:3px;background:#4A90A4}
.step-strip li{counter-increment:st;position:relative;padding:34px 10px 0 0;font-size:15px;font-weight:700;color:#193D4E;line-height:1.35}
.step-strip li::before{content:counter(st);position:absolute;left:0;top:0;width:24px;height:24px;background:#276578;color:#fff;font:700 12px/24px Arial,Helvetica,sans-serif;text-align:center}
.two-sides{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0}
.two-sides>div{border-top:2px solid #4A90A4;padding-top:12px}
.side-title{display:block;font-size:17px;margin-bottom:6px;color:#193D4E}
.two-sides ul{margin:0;padding-left:18px}
.two-sides li{font-size:16px;line-height:1.5;margin-bottom:6px}
.invest-line{color:#193D4E}
.soft-panel{margin-top:0}
.closing-band{margin-top:0}
.closing-band p{margin:0 0 16px;max-width:34em;font-size:17px}
@media (max-width:700px){
  .step-strip{grid-template-columns:1fr;gap:14px}
  .step-strip::before{left:11px;right:auto;top:12px;bottom:12px;width:3px;height:auto}
  .step-strip li{padding:3px 0 0 38px}
  .two-sides{grid-template-columns:1fr}
}

/* Layout pass (25 Oct, owner: 'poor layout'): drawings wider than the text column on large screens,
   compact source lines, legal form and reports side by side, the token line as a closing note */
@media (min-width:1120px){.money-flow{width:1080px;margin-left:calc(50% - 540px);margin-right:0}}
.transparency-page .source-note,.resident-page .source-note{margin:4px 0;font-size:15px;line-height:1.45;color:#526571}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px}
.duo ul{padding-left:18px}
.token-line{margin-top:40px}
@media (max-width:900px){.duo{grid-template-columns:1fr;gap:28px}}


.closing-band .button:not(.act),.closing-band a.button:not(.act){background:#276578;color:#fff}

/* 'From a request to a record anyone can check' on blockchain.html (owner, 28 Oct): same language as the money drawing.
   Above the ground line is public, below it private. Motion: the pipes run, then the ledger blocks appear one by one. */
.ledger-flow .lf-waterline{stroke:#276578;stroke-width:2;stroke-dasharray:8 6}
.ledger-private{margin:14px 0 0;font-size:15px;color:#526571}
@media (prefers-reduced-motion:no-preference){
  .js-flow .ledger-flow .lf-pipe{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .5s ease-out}
  .js-flow .ledger-flow .lf-pipe-1b{transition-delay:.4s}.js-flow .ledger-flow .lf-pipe-2{transition-delay:.7s}
  .js-flow .ledger-flow .lf-pipe-3{transition-delay:1.1s}
  .js-flow .ledger-flow .lf-block{opacity:0;transition:opacity .4s ease-out}
  .js-flow .ledger-flow .lf-block-0{transition-delay:1.5s}.js-flow .ledger-flow .lf-block-1{transition-delay:1.8s}.js-flow .ledger-flow .lf-block-2{transition-delay:2.1s}
  .js-flow .ledger-flow .lf-return{opacity:0;transition:opacity .6s ease-out 3s}
  .js-flow .ledger-flow.is-flowing .lf-pipe{stroke-dashoffset:0}
  .js-flow .ledger-flow.is-flowing .lf-block{opacity:1}
  .js-flow .ledger-flow.is-flowing .lf-return{opacity:1;animation:mf-run 1.6s linear 3.6s 2}
}

/* Token matrix: the four V's as four drawn cells (owner, 29 Oct: "turn the four V's into a matrix, which is an animation") */
.v-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 8px}
.v-cell{border:1px solid #D9E3E8;border-radius:6px;padding:20px 20px 8px;background:#fff}
.v-cell h4{margin:8px 0 4px;font-size:18px;color:#193D4E}
.v-cell>p{margin:0 0 4px;color:#526571;font-size:15px;line-height:1.55}
.v-glyph{width:72px;height:72px;display:block;fill:none;stroke:#276578;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.v-glyph .vg-coin,.v-glyph .vg-ballot{stroke:#4A90A4}
.v-glyph .vg-ring{stroke:#D9E3E8}
.v-glyph .vg-arc{stroke:#4A90A4;stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:32px 32px}
.v-more>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:#276578;font-size:14px;font-weight:600}
.v-more>summary::-webkit-details-marker{display:none}
.v-more>summary:before{content:"i";display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%;font:700 12px/1 Georgia,serif;font-style:italic}
.v-more[open]>summary:before{content:"–";font-style:normal}
.v-more>p{margin:0 0 12px;font-size:15px;line-height:1.6}
/* motion only once the matrix is in view, and only when the reader allows motion */
.js-flow .v-matrix .vg-coin{transform:translateY(-30px);opacity:0}
.js-flow .v-matrix .vg-ballot{transform:translateY(-16px);opacity:0}
.js-flow .v-matrix .vg-shackle{transform:translateY(-5px)}
.js-flow .v-matrix .vg-arc{stroke-dashoffset:100}
.js-flow .v-matrix .vg-arrow{opacity:0}
.v-matrix.is-flowing .vg-arrow{opacity:1;transition:opacity .5s ease .1s}
.v-matrix.is-flowing .vg-coin{transform:none;opacity:1;transition:transform .7s cubic-bezier(.3,.7,.4,1) .5s,opacity .3s ease .5s}
.v-matrix.is-flowing .vg-ballot{transform:none;opacity:1;transition:transform .7s cubic-bezier(.3,.7,.4,1) .7s,opacity .3s ease .7s}
.v-matrix.is-flowing .vg-shackle{transform:none;transition:transform .4s ease-in 1s}
.v-matrix.is-flowing .vg-arc{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease-out 1.1s}
@media (prefers-reduced-motion:reduce){.js-flow .v-matrix *{transition:none!important;transform:none!important;opacity:1!important;stroke-dashoffset:0!important}}
@media (max-width:560px){.v-matrix{grid-template-columns:1fr}}
/* Owner, 29 Oct: the four V's as a real matrix (rows funding/people, columns moves forward/keeps steady) */
.v-matrix{grid-template-columns:auto repeat(2,minmax(0,1fr))}
.v-axis{font-size:13px;font-weight:600;color:#526571;letter-spacing:.2px}
.v-col{align-self:end;padding:0 0 2px 4px}
.v-row{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;align-self:center;padding:0 4px}
.v-glyph .vg-lens{stroke:#4A90A4}
.js-flow .v-matrix .vg-lens{transform:translateX(-10px);opacity:0}
.v-matrix.is-flowing .vg-lens{transform:translateX(18px);opacity:1;transition:transform 1.4s ease-in-out .6s,opacity .3s ease .6s}
@media (prefers-reduced-motion:reduce){.v-matrix .vg-lens{transform:translateX(18px)!important}}
@media (max-width:560px){.v-matrix{grid-template-columns:1fr}.v-corner,.v-col{display:none}.v-row{writing-mode:horizontal-tb;transform:none;text-align:left;padding:8px 0 0}}
/* Owner, 29 Oct: the ⓘ alone, without the repeated "More info" text (kept for screen readers) */
.v-more>summary{min-width:44px;justify-content:center}
.v-more>summary>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v-more>summary:before{width:24px;height:24px;font-size:14px}
/* Owner, 29 Oct: whole card opens with a + like the page's folds; axis labels readable on a tinted band */
.v-matrix{grid-template-columns:132px repeat(2,minmax(0,1fr));gap:12px}
.v-axis{background:#E3EEF2;color:#193D4E;font-size:14px;font-weight:700;letter-spacing:0;border-radius:4px}
.v-corner{background:none}
.v-col{align-self:stretch;padding:10px 16px}
.v-row{writing-mode:horizontal-tb;transform:none;text-align:left;align-self:stretch;display:flex;align-items:center;padding:12px 16px}
.v-cell{padding:0}
.v-cell>summary{list-style:none;cursor:pointer;display:block;position:relative;padding:20px 52px 20px 20px;min-height:44px}
.v-cell>summary::-webkit-details-marker{display:none}
.v-cell .v-title{display:block;margin:8px 0 4px;font-size:18px;font-weight:700;color:#193D4E}
.v-cell .v-line{display:block;color:#526571;font-size:15px;line-height:1.55}
.v-plus{position:absolute;top:18px;right:16px;width:28px;height:28px}
.v-plus:before,.v-plus:after{content:"";position:absolute;left:6px;right:6px;top:13px;height:2px;background:#276578;transition:transform .2s ease}
.v-plus:after{transform:rotate(90deg)}
.v-cell[open] .v-plus:after{transform:rotate(0)}
.v-cell>summary:hover .v-title{color:#276578}
.v-cell>summary:focus-visible{outline:3px solid #276578;outline-offset:2px;border-radius:6px}
.v-body{padding:0 20px 16px}
.v-body p{margin:0;font-size:15px;line-height:1.6}
@media (prefers-reduced-motion:reduce){.v-plus:before,.v-plus:after{transition:none}}
@media (max-width:560px){.v-matrix{grid-template-columns:1fr}.v-row{padding:10px 14px}}
/* Owner, 29 Oct: "more info link to drop out more info" — a visible text link with an arrow, no corner + */
.v-cell>summary{padding:20px}
.v-cell .v-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;color:#A84B00;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.v-cell .v-link:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.v-cell[open] .v-link:after{transform:translateY(2px) rotate(-135deg)}
.v-cell>summary:hover .v-link{color:#7A3600}
@media (prefers-reduced-motion:reduce){.v-cell .v-link:after{transition:none}}

/* Local governance: who decides, stage by stage (owner, 29 Oct) */
.gov-flow-art{width:100%;height:auto;display:block}
.gov-flow-art circle,.gov-flow-art path,.gov-flow-art rect{fill:none;stroke-linecap:round;stroke-linejoin:round}
.gov-flow-art .gv-core{fill:#E3EEF2;stroke:#193D4E;stroke-width:2.5}
.gov-flow-art .gv-outer{stroke:#4A90A4;stroke-width:2.5;stroke-dasharray:6 6}
.gov-flow-art .gv-members{fill:#F3F8FA;stroke:#276578;stroke-width:2.5}
.gov-flow-art .gv-dot{fill:#276578;stroke:none}
.gov-flow-art .gv-house{fill:#fff;stroke:#193D4E;stroke-width:2.2}
.gov-flow-art .gv-lock{fill:#A84B00;stroke:none}
.gov-flow-art .gv-shackle{stroke:#A84B00;stroke-width:2}
.gov-flow-art .gv-arrow{stroke:#4A90A4;stroke-width:2.5}
.gov-flow-art .gv-label{font:600 15px/1 Arial,Helvetica,sans-serif;fill:#193D4E;stroke:none}
.gov-flow-art .gv-label-outer{fill:#276578;font-size:14px}
.gov-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
/* motion: each stage appears in turn once the drawing is in view */
.js-flow .gov-flow .gv-c1,.js-flow .gov-flow .gv-c2,.js-flow .gov-flow .gv-c2b,.js-flow .gov-flow .gv-c3,.js-flow .gov-flow .gv-c3b{opacity:0}
.js-flow .gov-flow .gv-arrow,.js-flow .gov-flow .gv-house,.js-flow .gov-flow .gv-lock,.js-flow .gov-flow .gv-shackle,.js-flow .gov-flow .gv-dot,.js-flow .gov-flow .gv-label{opacity:0}
.gov-flow.is-flowing .gv-c1,.gov-flow.is-flowing .gv-c1~.gv-dot{opacity:1;transition:opacity .5s ease .1s}
.gov-flow.is-flowing .gv-label{opacity:1;transition:opacity .5s ease .3s}
.gov-flow.is-flowing .gv-a1{opacity:1;transition:opacity .4s ease .6s}
.gov-flow.is-flowing .gv-c2,.gov-flow.is-flowing .gv-c2b{opacity:1;transition:opacity .5s ease .9s}
.gov-flow.is-flowing .gv-dot{opacity:1;transition:opacity .4s ease .9s}
.gov-flow.is-flowing .gv-a2{opacity:1;transition:opacity .4s ease 1.4s}
.gov-flow.is-flowing .gv-c3,.gov-flow.is-flowing .gv-c3b{opacity:1;transition:opacity .5s ease 1.7s}
.gov-flow.is-flowing .gv-house{opacity:1;transition:opacity .4s ease 2.1s}
.gov-flow.is-flowing .gv-lock,.gov-flow.is-flowing .gv-shackle{opacity:1;transition:opacity .4s ease 2.5s}
@media (prefers-reduced-motion:reduce){.js-flow .gov-flow *{opacity:1!important;transition:none!important}}
@media (max-width:700px){.gov-steps{grid-template-columns:1fr}}
/* governance: three panels with their words (stack on a phone) */
.gov-flow{margin:8px 0 24px}
.gov-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gov-stage strong{display:block;font-size:17px;color:#193D4E;margin:8px 0 4px}
.gov-stage span{display:block;color:#526571;font-size:15px;line-height:1.55}
.gov-panel{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;overflow:visible}
.gov-panel circle,.gov-panel path,.gov-panel rect{fill:none;stroke-linecap:round;stroke-linejoin:round}
.gov-panel .gv-core{fill:#E3EEF2;stroke:#193D4E;stroke-width:2.5}
.gov-panel .gv-outer{stroke:#4A90A4;stroke-width:2.5;stroke-dasharray:3 7}
.gov-panel .gv-members{fill:#F3F8FA;stroke:#276578;stroke-width:2.5}
.gov-panel .gv-dot{fill:#276578;stroke:none}
.gov-panel .gv-house{fill:#fff;stroke:#193D4E;stroke-width:2.2}
.gov-panel .gv-lock{fill:#A84B00;stroke:none}
.gov-panel .gv-shackle{stroke:#A84B00;stroke-width:2}
.gov-panel .gv-arrow{stroke:#4A90A4;stroke-width:2.5}
.gov-panel .gv-label{font:600 16px/1 Arial,Helvetica,sans-serif;fill:#193D4E;stroke:none}
.gov-panel .gv-label-outer{fill:#276578;font-size:15px}
.js-flow .gov-flow .gov-stage{opacity:0;transform:translateY(8px)}
.gov-flow.is-flowing .gov-stage{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.gov-flow.is-flowing .gov-stage:nth-child(2){transition-delay:.6s}
.gov-flow.is-flowing .gov-stage:nth-child(3){transition-delay:1.2s}
.js-flow .gov-flow .gv-lock,.js-flow .gov-flow .gv-shackle{opacity:0}
.gov-flow.is-flowing .gv-lock,.gov-flow.is-flowing .gv-shackle{opacity:1;transition:opacity .4s ease 1.9s}
@media (prefers-reduced-motion:reduce){.js-flow .gov-flow .gov-stage,.js-flow .gov-flow .gv-lock,.js-flow .gov-flow .gv-shackle{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:700px){.gov-stages{grid-template-columns:1fr;gap:32px}.gov-panel .gv-arrow{display:none}.gov-panel{max-width:260px}}
.gov-flow.is-flowing .gv-arrow{opacity:1;transition:opacity .4s ease .5s}
.gov-panel .gv-label-outer{font-size:14px}
/* The token's loop (owner, 29 Oct): use → people join → fees → checked work → more services → use */
.token-loop{margin:18px 0 34px;max-width:720px}
.loop-svg{display:block;width:100%;height:auto;overflow:visible}
.loop-track{fill:none;stroke:#E3EEF2;stroke-width:16}
.loop-arc{fill:none;stroke:#4A90A4;stroke-width:3}
.loop-headpath{fill:#4A90A4}
.loop-node{fill:#fff;stroke:#276578;stroke-width:3}
.loop-node.loop-start{fill:#B85500;stroke:#B85500}
.loop-label{font:700 17px/1 Arial,Helvetica,sans-serif;fill:#193D4E}
.loop-centre{font:600 18px/1 Arial,Helvetica,sans-serif;fill:#526571}
.loop-dot{fill:#B85500;opacity:0}
.loop-steps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js-loop .loop-arc{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.js-loop .loop-node,.js-loop .loop-label{opacity:0}
.js-loop.is-looping .loop-node,.js-loop.is-looping .loop-label{opacity:1;transition:opacity .4s ease calc(var(--i) * .4s)}
.js-loop.is-looping .loop-arc{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .5s ease calc(var(--i) * .4s + .2s),opacity .1s linear calc(var(--i) * .4s + .2s)}
.js-loop.is-looping .loop-dot{opacity:1;transition:opacity .3s ease 2.2s}
@media (max-width:600px){
  .loop-svg{display:none}
  .loop-steps{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;list-style:none;margin:0;padding:0 0 0 22px;border-left:3px solid #4A90A4;counter-reset:loop}
  .loop-steps li{position:relative;margin:0 0 14px;line-height:1.5}
  .loop-steps li::before{content:"";position:absolute;left:-31px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #276578}
  .loop-steps li:first-child::before{background:#B85500;border-color:#B85500}
  .loop-steps strong{display:block;color:#193D4E}
}
/* Decision 33: the four V's as plain lines (Volume, Voting, Verify), each with the More info drop-down */
.v-lines{margin:14px 0 8px;border-top:1px solid #D9E3E8;max-width:760px}
.v-line-item{border-bottom:1px solid #D9E3E8;padding:14px 0 6px}
.v-line-item>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.v-line-item>summary::-webkit-details-marker{display:none}
.v-line-item .v-title{font-weight:700;color:#193D4E;font-size:18px}
.v-line-item .v-line{color:#405866;line-height:1.55}
.v-line-item .v-link{justify-self:start;margin:6px 0 4px;color:#A84B00;font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.v-line-item .v-link::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.v-line-item[open] .v-link::after{transform:rotate(-135deg) translateY(-2px)}
.v-line-item .v-body p{margin:6px 0 10px;line-height:1.6;max-width:62ch}

/* owner, 31 Oct: the three functions are plain lines; the detail is in the whitepaper */
.v-line-item>.v-title,.v-line-item>.v-line{display:block}
.v-line-item{padding-bottom:12px}

/* The self-compounding token page (owner, 1 Nov): a US$100 trade splits into its parts as the reader arrives. */
.fee-bar{margin:18px 0 22px;max-width:720px}
.fee-track{display:flex;height:30px;border-radius:6px;overflow:hidden;background:#E3EEF2}
.fee-seg{display:block;height:100%;width:var(--w)}
.fee-ready .fee-seg,.js-fee .fee-seg{width:0;transition:width 1.1s ease var(--d)}
.fee-ready .is-flowing .fee-seg,.js-fee.is-flowing .fee-seg{width:var(--w)}
.seg-wages{background:#1F4E5F}.seg-houses{background:#C8661F}.seg-pool{background:#4A90A4}.seg-lock{background:#9DC3CF}.seg-venue{background:#B9C4C9}
.fee-table{width:100%;border-collapse:collapse;margin-top:12px}
.fee-table th,.fee-table td{padding:7px 4px;border-bottom:1px solid #E3EEF2;text-align:left;font-weight:400}
.fee-table td{text-align:right;white-space:nowrap}
.fee-total th,.fee-total td{font-weight:600}
.fee-key{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
@media (prefers-reduced-motion: reduce){.js-fee .fee-seg{width:var(--w);transition:none}}

/* The four V's matrix (owner, 1 Nov): funding and people across, moving and steady down; cells arrive one by one. */
.vx-matrix{margin:18px 0 8px;max-width:820px}
.vx-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;align-items:stretch}
.vx-col{font-weight:600;font-size:14px;color:#1F4E5F;padding:6px 10px;background:#DCE8ED;border-radius:6px;text-align:center}
.vx-row{font-weight:600;font-size:14px;color:#1F4E5F;padding:10px;background:#DCE8ED;border-radius:6px;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center}
.vx-cell{border:1px solid #D5E2E7;border-radius:10px;background:#fff;padding:14px 16px}
.vx-cell summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.vx-cell summary::-webkit-details-marker{display:none}
.vx-title{font-weight:700;font-size:20px;color:#1F4E5F}
.vx-q{font-style:italic;color:#4A6B76;font-size:15px}
.vx-line{color:#2B3A40}
.vx-more{color:#B5561A;text-decoration:underline;font-size:14px}
.vx-cell[open] .vx-more{display:none}
.vx-body{margin-top:8px;color:#2B3A40}
.vx-volume{border-top:4px solid #2F6F84}.vx-verify{border-top:4px solid #4A90A4}.vx-vote{border-top:4px solid #1F4E5F}.vx-vow{border-top:4px solid #9DC3CF}
.js-vx .vx-cell{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i) * .25s)}
.js-vx.is-flowing .vx-cell{opacity:1;transform:none}
@media (max-width:640px){.vx-grid{grid-template-columns:1fr}.vx-corner,.vx-col,.vx-row{display:none}}
@media (prefers-reduced-motion: reduce){.js-vx .vx-cell{opacity:1;transform:none;transition:none}}

/* Token page (owner, 1 Nov): the four planned services, and the notice set apart at the end */
.service-list { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.service-list li { margin: .25rem 0; }
.token-notice { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.token-notice h2 { font-size: 1rem; margin-bottom: .4rem; }