/* Money Talks: a bespoke series page.
   Art direction: the series' own green banknote photography and white blackletter.
   The scroll goes face on the bill -> the pile -> a banknote -> a statement -> an exchange board -> ten bills -> the envelope.
   Lime is SMR's accent only (buy, focus, label tick). The accent voice on every screen is the blackletter. */

@view-transition { navigation: auto; }

:root{
  --ink:#050c08;
  --deep:#0a2413;
  --bill:#0e4a25;
  --mint:#aac6b1;
  --mint2:#7f9e88;
  --paper:#f3f4ec;
  --note:#e7eadc;
  --green-ink:#0b3a1d;
  --lime:#b6ff00;
  --gutter:64px;
  --bl:'Grenze Gotisch','Old English Text MT',Georgia,serif;
  --cond:'Barlow Condensed',Impact,sans-serif;
  --body:Manrope,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body.mt{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:50;background:var(--lime);color:var(--ink);padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* shared atoms */
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--mint)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.label.dark{color:var(--green-ink)}
.label.dark i{background:var(--green-ink)}
.bl{font-family:var(--bl);font-weight:700;font-style:normal;text-transform:none;letter-spacing:0}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .14s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.lime{background:var(--lime);color:var(--ink)}.btn.lime:hover{background:var(--paper)}
.btn.line{border:1px solid rgba(243,244,236,.45);color:var(--paper)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--mint)}

/* header: the shared SMR lockup, floating over the bill */
.top{position:absolute;top:0;left:0;right:0;z-index:20;height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 var(--gutter)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mint);transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--paper)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--paper)}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}

/* 1 · hero: the face on the bill, emerging from the dark */
.hero{position:relative;min-height:max(740px,100svh);padding:132px var(--gutter) 120px;display:flex;align-items:center;z-index:2;overflow-x:clip}
.hero-eyes{position:absolute;top:0;right:0;bottom:0;width:80%;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 98%);mask-image:linear-gradient(180deg,#000 58%,transparent 98%)}
.hero-eyes picture{display:block;height:100%}
.hero-eyes img{display:block;width:100%;height:100%;object-fit:cover;object-position:36% 42%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 16%,#000 40%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 16%,#000 40%)}
.hero-copy{position:relative;z-index:3;max-width:600px}
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mint)}
.crumbs li+li::before{content:'/';margin-right:10px;color:var(--mint2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.crumbs a:hover{color:var(--lime)}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--paper)}
.title{margin:26px 0 0;font-family:var(--bl);font-weight:700;font-size:clamp(96px,11.6vw,184px);line-height:.78;letter-spacing:-.01em;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.title span{display:block}
.title span+span{padding-left:.42em}
.ask{margin:34px 0 0;max-width:470px;font:600 clamp(19px,1.6vw,23px)/1.42 var(--body);letter-spacing:-.01em;color:var(--paper)}
.buyrow{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.follow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--paper);border-bottom:1px solid rgba(243,244,236,.35)}
.follow:hover{color:var(--lime);border-color:var(--lime)}

/* the cover: a bill-thin object resting in the light, crossing into the next screen */
.hero-cover{position:absolute;z-index:4;right:7vw;bottom:-22vh;width:clamp(250px,24vw,420px);perspective:1700px}
.bill{display:block;position:relative;transform:rotateX(10deg) rotateY(-20deg) rotateZ(6deg);transform-origin:50% 60%;
  box-shadow:-34px 60px 90px rgba(0,0,0,.7),-8px 14px 24px rgba(0,0,0,.45);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bill::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.26) 0,rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 46%,rgba(0,0,0,.28) 100%)}
.cover-img{display:block;width:100%;height:auto;view-transition-name:cover-money-talks}

/* 2 · the question, on the pile */
.question{position:relative;z-index:1;margin-top:-22vh;padding:40vh var(--gutter) 30vh}
.pile{position:absolute;inset:0;z-index:0;overflow:hidden;overflow:clip;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%)}
.pile picture{display:block;height:100%}
.pile img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.question .pile::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 22% 58%,rgba(5,12,8,.78),rgba(5,12,8,.25) 70%,rgba(5,12,8,.1))}
.q-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:64px;align-items:end}
.q-h{margin:0;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:clamp(56px,6.4vw,112px);line-height:.86;letter-spacing:-.02em;color:var(--paper)}
.q-h .q-plain{display:block}
.q-h .bl{display:block;margin-top:.12em;font-size:1.06em;line-height:.9;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.verses{padding-bottom:10px;padding-top:12vh}
.verses blockquote{margin:0 0 34px}
.verses blockquote p{margin:0;font:600 clamp(20px,1.7vw,25px)/1.35 var(--body);letter-spacing:-.015em;color:var(--paper);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.verses cite{display:block;margin-top:10px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.aside{margin:0;padding-top:22px;border-top:1px solid rgba(170,198,177,.3);font-size:15px;line-height:1.6;color:var(--mint);text-shadow:0 2px 14px rgba(0,0,0,.8)}
.aside span{display:block;margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mint2)}

/* ───────────────────────────────────────────────────────────────────────────────────────────────
   Round 3: below the hero, one currency world. Four scenes, each its own idea:
   I a banknote, engraved · II a statement, stamped · III an exchange board · IV ten bills, one lifted.
   Then the download as a cash envelope. Grounds: deep green → currency paper → black → saturated green → the pile.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */
.lessons{position:relative;z-index:2;margin-top:-8vh}
.scene{position:relative;overflow-x:clip;padding-left:var(--gutter);padding-right:var(--gutter)}
.s-num{margin:0;font-family:var(--cond);font-weight:800;font-size:clamp(18px,1.5vw,24px);letter-spacing:.22em;text-transform:uppercase;color:var(--paper)}
.s-num span{color:var(--mint2);font-weight:600}
.s-num.dark{color:var(--green-ink)}.s-num.dark span{color:#5b7a64}
.s-quote{margin:0;font:600 clamp(22px,2.1vw,34px)/1.3 var(--body);letter-spacing:-.02em;color:var(--paper)}
.refs{margin:0;font:600 12px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.more{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--mint)}
.cap{display:block}
/* a real bill crossing each seam between grounds */
.seam{position:absolute;z-index:6;width:clamp(200px,24vw,430px);height:auto;pointer-events:none;
  box-shadow:0 34px 60px rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.3)}
.seam-a{top:calc(clamp(200px,24vw,430px) * -0.36);right:7vw;transform:rotate(7deg)}
.seam-b{top:calc(clamp(200px,24vw,430px) * -0.2);left:-6vw;transform:rotate(-13deg)}
.seam-c{top:calc(clamp(200px,24vw,430px) * -0.3);right:-5vw;transform:rotate(16deg)}
.seam-d{top:calc(clamp(200px,24vw,430px) * -0.25);left:9vw;transform:rotate(-5deg)}

/* ── I · the banknote ─────────────────────────────────────────────────────────────────────────── */
.s1{padding-top:4vh;padding-bottom:16vh;
  background:radial-gradient(ellipse 72% 48% at 50% 40%,#17663a 0,#0d3a1e 46%,rgba(10,36,19,0) 78%),linear-gradient(180deg,rgba(10,36,19,0) 0,var(--deep) 16vh,var(--deep) 100%)}
.s-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px 30px;flex-wrap:wrap}
.bnote{position:relative;z-index:2;margin:5vh 0 0 calc(var(--gutter) * -1 - 4vw);width:108vw;container-type:inline-size;transform:rotate(-2.2deg);transform-origin:50% 50%}
.note-in{position:relative;aspect-ratio:2.1;overflow:hidden;color:#04150a;
  background:radial-gradient(ellipse 58% 70% at 50% 44%,#37a560 0,#258549 50%,#155a2f 100%);
  box-shadow:0 70px 140px rgba(0,0,0,.62),0 14px 34px rgba(0,0,0,.42),inset 0 0 8cqw rgba(2,20,8,.45)}
.note-in::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.7;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .7 0 0 0 0 .58 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 220px,url(/assets/series/money-talks/note-field.svg) 0 0/10cqw auto repeat}
.note-in::after{content:'';position:absolute;inset:1.4cqw;pointer-events:none;box-shadow:0 0 0 1px rgba(4,21,10,.7);
  background:url(/assets/series/money-talks/note-band-h.svg) 0 0/auto 2.4cqw repeat-x,url(/assets/series/money-talks/note-band-h.svg) 0 100%/auto 2.4cqw repeat-x,
    url(/assets/series/money-talks/note-band-v.svg) 0 0/2.4cqw auto repeat-y,url(/assets/series/money-talks/note-band-v.svg) 100% 0/2.4cqw auto repeat-y}
.bnote::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(104deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 62%) no-repeat;background-size:260% 100%;background-position:160% 0;opacity:0}
.n-micro{position:absolute;inset:4.1cqw;border:1px solid rgba(4,21,10,.6);pointer-events:none}
.n-micro span{position:absolute;overflow:hidden;white-space:nowrap;font:600 .5cqw/1 var(--body);letter-spacing:.08em;color:rgba(4,21,10,.85)}
.n-micro .m-t{left:0;right:0;top:.3cqw}.n-micro .m-b{left:0;right:0;bottom:.3cqw}
.n-micro .m-l,.n-micro .m-r{top:0;bottom:0;writing-mode:vertical-rl}
.n-micro .m-l{left:.3cqw;transform:rotate(180deg)}.n-micro .m-r{right:.3cqw}
.ros{position:absolute;width:9cqw;aspect-ratio:1;display:grid;place-items:center}
.ros::before{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(#2f9653,#22804a)}
.ros img{position:absolute;inset:0;width:100%;height:100%}
.ros b{position:relative;font:700 4.6cqw/1 Georgia,'Times New Roman',serif;color:#04150a}
.r-tl{left:1.5cqw;top:1.5cqw}.r-tr{right:1.5cqw;top:1.5cqw}.r-bl{left:1.5cqw;bottom:1.5cqw}.r-br{right:1.5cqw;bottom:1.5cqw}
.n-issuer{position:absolute;left:0;right:0;top:5.2cqw;margin:0;text-align:center;font-size:2.7cqw;line-height:1}
.n-line{position:absolute;left:14cqw;right:14cqw;top:8.7cqw;margin:0;text-align:center;font:800 3.15cqw/1 var(--cond);letter-spacing:.035em;text-transform:uppercase;text-shadow:0 1px 0 rgba(200,255,215,.22)}
.n-tender{position:absolute;left:9.5cqw;top:14cqw;width:23cqw;margin:0;font:800 .95cqw/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase}
.n-series{position:absolute;right:13cqw;top:33.6cqw;margin:0;text-align:center;font:800 .95cqw/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase}
.n-seal{position:absolute;left:15.5cqw;top:18cqw;width:11cqw;aspect-ratio:1;display:grid;place-items:center}
.n-seal img{position:absolute;inset:0;width:100%;height:100%}
.n-seal b{position:relative;font-size:4.4cqw;line-height:1}
.n-serial{position:absolute;width:15.5cqw;height:auto}
.n-serial-a{right:9.5cqw;top:14.2cqw}.n-serial-b{left:9.5cqw;top:31.4cqw}
.n-por{position:absolute;left:50%;top:12.6cqw;width:19cqw;margin-left:-9.5cqw;aspect-ratio:1}
.n-ring,.n-face{position:absolute;display:block}
.n-ring{inset:0;width:100%;height:100%}
.n-face{left:16%;top:16%;width:68%;height:68%;border-radius:50%}
.n-one{position:absolute;right:12.5cqw;top:17cqw;width:15cqw;aspect-ratio:1}
.n-one img{position:absolute;display:block}
.n-one-ros{inset:0;width:100%;height:100%;opacity:.55}
.n-one-seal{left:6%;top:14%;width:88%;height:auto}
.n-ribbon{position:absolute;left:28cqw;right:28cqw;top:32.2cqw;margin:0;padding:.55cqw 2.6cqw;text-align:center;
  background:linear-gradient(#56be7c,#3ea866);clip-path:polygon(0 0,100% 0,97.6% 50%,100% 100%,0 100%,2.4% 50%);box-shadow:inset 0 0 0 1px rgba(4,21,10,.4)}
.n-ribbon p{margin:0;font:700 1.2cqw/1.25 var(--body);letter-spacing:.01em}
.n-ribbon cite{display:block;margin-top:.2cqw;font:600 .8cqw/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase}
.n-title{position:absolute;left:19cqw;right:19cqw;bottom:2.4cqw;margin:0;padding:.6cqw 0 .4cqw;text-align:center;
  font:800 5.8cqw/.95 var(--cond);letter-spacing:.05em;text-transform:uppercase;color:#04150a;
  -webkit-text-stroke:.5cqw #2a8c4e;paint-order:stroke fill;
  background:url(/assets/series/money-talks/note-band-h.svg) 0 50%/auto 100% repeat-x,linear-gradient(90deg,rgba(42,140,78,0),#2a8c4e 8%,#2a8c4e 92%,rgba(42,140,78,0));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.s-copy{position:relative;z-index:2;margin-top:9vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:72px;align-items:end}
.s-copy .s-quote{font-size:clamp(26px,2.6vw,44px);line-height:1.2;max-width:900px}

/* ── II · the statement ───────────────────────────────────────────────────────────────────────── */
.s2{z-index:3;padding-top:34vh;padding-bottom:24vh;color:var(--green-ink);
  background:linear-gradient(180deg,var(--deep) 0,#2c5a3b 9vh,#93b09a 18vh,#d6ddca 24vh,var(--note) 30vh,var(--note) 100%)}
.serial{position:absolute;left:0;right:0;top:12vh;height:min(38vw,520px);overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 46%,transparent 86%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 46%,transparent 86%)}
.serial img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;mix-blend-mode:multiply;opacity:.45}
.stmt-head{position:relative;z-index:2;padding-bottom:3vh;border-bottom:5px double rgba(11,58,29,.7)}
.stmt-bank{margin:1vh 0 0 -.04em;font-size:clamp(84px,14vw,252px);line-height:.86;color:var(--green-ink)}
.stmt-meta{margin:2.5vh 0 0;display:flex;flex-wrap:wrap;gap:12px 56px}
.stmt-meta dt{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#4f6d58}
.stmt-meta dd{margin:7px 0 0;font:500 clamp(13px,1vw,15px)/1.45 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--green-ink)}
.stmt{position:relative;z-index:2;margin-top:6vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:80px;align-items:start}
.stmt-l{position:relative}
.stmt-cap{margin:0;max-width:660px;font:500 clamp(15px,1.15vw,18px)/1.55 var(--mono);color:#1c3324}
.stmt-t{width:100%;margin-top:3.5vh;border-collapse:collapse;font-family:var(--mono);color:var(--green-ink)}
.stmt-t thead th{padding:0 0 12px;text-align:left;font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#4f6d58;border-bottom:1px solid rgba(11,58,29,.45)}
.stmt-t thead th:last-child{text-align:right}
.stmt-t tbody th,.stmt-t tbody td{padding:1.7vh 0;font:500 clamp(24px,2.5vw,42px)/1 var(--mono);border-bottom:1px dashed rgba(11,58,29,.32)}
.stmt-t tbody th{text-align:left;text-transform:uppercase;letter-spacing:.02em}
.stmt-t tbody td{text-align:right;font-variant-numeric:tabular-nums}
.stmt-t tbody tr:last-child th,.stmt-t tbody tr:last-child td{border-bottom:6px double var(--green-ink)}
.stmt-t tfoot tr{display:flex;flex-direction:column;padding-top:3.4vh}
.stmt-t tfoot th{text-align:left;font:400 clamp(44px,4.6vw,82px)/1 var(--bl);color:var(--green-ink)}
.stmt-t tfoot td{text-align:left;padding:0}
.give-n{display:block;font:800 var(--gn)/.8 var(--cond);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--green-ink);margin-top:-.04em}
.stmt-l{--gn:clamp(140px,19.5vw,350px)}
.stamp{position:absolute;left:calc(var(--gn) * 2.06);bottom:calc(var(--gn) * .22);transform:rotate(-13deg);pointer-events:none;mix-blend-mode:multiply}
.stamp span{display:block;padding:.6vw 2vw .4vw;border:.55vw solid rgba(11,58,29,.88);border-radius:1vw;box-shadow:inset 0 0 0 .3vw var(--note),inset 0 0 0 .55vw rgba(11,58,29,.88);
  font:800 clamp(46px,5.8vw,108px)/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:rgba(11,58,29,.88);
  -webkit-mask-image:url(/assets/series/money-talks/note-field.svg),linear-gradient(#000,#000);-webkit-mask-size:7vw auto,100% 100%;-webkit-mask-composite:xor;mask-image:url(/assets/series/money-talks/note-field.svg),linear-gradient(#000,#000);mask-size:7vw auto,100% 100%;mask-composite:exclude}
.stmt-r{padding-top:1vh}
.memo-l{margin:0;font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#4f6d58;padding-bottom:12px;border-bottom:1px solid rgba(11,58,29,.45)}
.g-q{margin:22px 0 0;font:600 clamp(18px,1.45vw,22px)/1.45 var(--body);letter-spacing:-.01em;color:#1c3324}
.s-quote.ink{margin-top:7vh;color:var(--green-ink);font-size:clamp(26px,2.5vw,42px);line-height:1.15}
.more.ink{color:#36523f}
.psalm{margin:7vh 0 0;padding-top:18px;border-top:1px solid rgba(11,58,29,.45)}
.psalm p{margin:0;font:500 clamp(15px,1.15vw,18px)/1.6 var(--mono);color:#1c3324}
.psalm cite{display:block;margin-top:10px;font:600 11px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#4f6d58}

/* ── III · the exchange board ─────────────────────────────────────────────────────────────────── */
.s3{z-index:4;padding-top:34vh;padding-bottom:26vh;
  background:radial-gradient(ellipse 60% 34% at 50% 58%,rgba(24,120,58,.28),rgba(24,120,58,0) 70%),
    linear-gradient(180deg,var(--note) 0,#c9d3c1 5vh,#3c5c45 13vh,#0d1a12 21vh,var(--ink) 28vh,var(--ink) 100%)}
.s3-h{margin:14px 0 0;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:clamp(60px,7.6vw,136px);line-height:.84;letter-spacing:-.015em;color:var(--paper)}
.s3-h .bl{display:block;font-size:1.22em;line-height:.86;color:#fff;margin-left:-.03em}
.board{position:relative;margin:7vh calc(var(--gutter) * -1) 0;padding:3vw var(--gutter) 2.4vw;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#090e0b,#050806);box-shadow:inset 0 1px 0 rgba(170,198,177,.14),inset 0 -1px 0 rgba(170,198,177,.14),0 50px 120px rgba(0,0,0,.6)}
.b-row{display:flex;align-items:center;gap:2vw;padding:1.3vw 0}
.b-row+.b-row{border-top:1px solid rgba(170,198,177,.1)}
.b-lab{flex:none;width:clamp(56px,8vw,150px);font:600 clamp(11px,.95vw,15px)/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}
.flaps{display:flex;flex-wrap:wrap;gap:var(--tg) 0}
.fw{display:flex;gap:var(--tg)}.fw+.fw{margin-left:var(--tg)}
.f-lg{--tw:clamp(52px,10.4vw,188px);--tg:clamp(4px,.55vw,10px)}
.f-sm{--tw:clamp(18px,2.6vw,46px);--tg:clamp(2px,.28vw,5px)}
.t{position:relative;display:grid;place-items:center;width:var(--tw);height:calc(var(--tw) * 1.38);overflow:hidden;border-radius:calc(var(--tw) * .06);
  background:linear-gradient(180deg,#1d2620 0,#151d18 49.6%,#0a0f0c 50.4%,#121a15 100%);box-shadow:0 calc(var(--tw) * .05) 0 rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07)}
.t::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#020403;box-shadow:0 1px 0 rgba(255,255,255,.05)}
.t b{display:block;font:800 calc(var(--tw) * 1.12)/1 var(--cond);color:var(--paper);text-transform:uppercase;transform-origin:50% 50%}
.t.sp{background:linear-gradient(180deg,#121914 0,#0e1410 49.6%,#080c09 50.4%,#0d130f 100%)}
.f-lg .t b{color:#fff;text-shadow:0 0 calc(var(--tw) * .3) rgba(80,230,130,.35)}
.t.flip b{animation:flap .11s linear}
@keyframes flap{0%{transform:scaleY(1)}50%{transform:scaleY(0)}100%{transform:scaleY(1)}}
.b-tap{position:absolute;right:var(--gutter);bottom:.9vw;margin:0;font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mint2);opacity:0;transition:opacity .4s}
.board.done .b-tap{opacity:1}
.s3-copy{margin-top:9vh;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:80px;align-items:start}
.s3-ask{margin:0;font:800 clamp(46px,5.4vw,96px)/.88 var(--cond);letter-spacing:-.015em;text-transform:uppercase;color:var(--paper)}
.mal{margin:0 0 6vh}
.mal p{margin:0;font:600 clamp(18px,1.45vw,22px)/1.5 var(--body);color:var(--mint)}
.mal cite,.loaves-cite{display:block;margin-top:10px;font:600 11px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--mint2)}
.s3-side .s-quote{margin-bottom:22px}

/* ── IV · ten bills, one lifted ───────────────────────────────────────────────────────────────── */
.s4{z-index:5;padding-top:34vh;padding-bottom:26vh;--sat:#0e7a3c;
  background:linear-gradient(180deg,var(--ink) 0,#05190c 8vh,#0a4a24 17vh,var(--sat) 27vh,var(--sat) 72%,#0b5e2e 100%)}
.s4-tex{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 18vh,#000 40vh,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent 18vh,#000 40vh,#000 80%,transparent)}
.s4-tex img{display:block;width:100%;height:100%;object-fit:cover;opacity:.2;mix-blend-mode:luminosity}
.s4-head,.tithe,.tenth-q,.loaves,.loaves-cite,.s4-copy{position:relative;z-index:1}
.s4-h{margin:14px 0 0;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:clamp(60px,7.6vw,136px);line-height:.84;letter-spacing:-.015em;color:#fff}
.s4-h .bl{display:block;font-size:1.22em;line-height:.9;margin-left:-.02em}
.tithe{--bw:clamp(240px,33vw,600px);margin:7vh calc(var(--gutter) * -1) 0;height:calc(var(--bw) * .53 + 9vw + 4vw)}
.t-pct{margin:0;font:800 clamp(78px,9.6vw,172px)/.8 var(--cond);letter-spacing:-.03em;color:#fff}
.t-ten{position:absolute;left:var(--gutter);top:0;width:var(--bw)}
.t-ten img,.t-stack img{display:block;width:var(--bw);height:auto;box-shadow:0 26px 50px rgba(0,0,0,.42),0 4px 10px rgba(0,0,0,.3)}
.t-ten img{margin-top:2vw;transform:rotate(-5deg);box-shadow:0 40px 70px rgba(0,0,0,.5),0 0 90px rgba(150,255,190,.22)}
.t-rest{position:absolute;left:calc(var(--gutter) + var(--bw) + 5vw);right:0;top:0}
.t-rest .t-pct{padding-left:.04em}
.t-stack{position:relative;margin-top:2vw;height:calc(var(--bw) * .6)}
.t-stack img{position:absolute;left:calc(var(--k) * var(--bw) * .155);top:calc(var(--k) * .35vw);transform:rotate(calc((var(--k) - 4) * .9deg))}
.tenth-q{margin:5vh 0 0;max-width:940px;font:600 clamp(22px,2.1vw,34px)/1.3 var(--body);letter-spacing:-.02em;color:#fff}
.tenth-q span{display:block;margin-top:12px;font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bfe3c9}
.loaves{list-style:none;margin:10vh 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid rgba(255,255,255,.4)}
.loaves li{padding:2.4vh 2vw 0 0}
.loaves li+li{padding-left:2vw;border-left:1px solid rgba(255,255,255,.22)}
.loaves b{display:block;font:800 clamp(64px,8.6vw,154px)/.84 var(--cond);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.loaves span{display:block;margin-top:12px;font:800 12px/1.45 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#d5f0dc}
.loaves-cite{color:#bfe3c9}
.s4-copy{margin-top:9vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:72px;align-items:end}
.s4-copy .s-quote{color:#fff;font-size:clamp(26px,2.6vw,44px);line-height:1.2}
.s4-copy .refs{color:#d5f0dc}

/* ── the kit: the download as a cash envelope ─────────────────────────────────────────────────── */
.get{position:relative;z-index:6;overflow-x:clip;padding:36vh var(--gutter) 16vh;
  background:linear-gradient(180deg,#0b5e2e 0,#0a4423 10vh,#0a2a16 26vh,#081a0e 50%,var(--ink) 100%)}
.pile-get{-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 34%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 4%,#000 34%,#000 70%,transparent 100%)}
.pile-get::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,12,8,.1) 0,rgba(5,12,8,.25) 50%,rgba(5,12,8,.82) 70%,rgba(5,12,8,.9) 100%)}
.get-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:center}
.kit{position:relative;margin:0;height:0;padding-bottom:74%}
.spill{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.it{position:absolute;margin:0;transform:rotate(var(--r));transition:transform 1.1s cubic-bezier(.2,.75,.2,1),opacity .6s}
.it img{display:block;width:100%;height:auto;box-shadow:0 26px 54px rgba(0,0,0,.55),0 5px 12px rgba(0,0,0,.35)}
.it span{position:absolute;left:0;top:0;padding:6px 9px 5px;white-space:nowrap;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:rgba(5,12,8,.86)}
.it-l1{left:0;top:0;width:37%;--r:-5deg}
.it-l2{left:32%;top:5%;width:37%;--r:3deg}
.it-l3{left:63%;top:-1%;width:37%;--r:-2deg}
.it-l4{left:2%;top:46%;width:37%;--r:4deg}
.it-slide{left:39%;top:41%;width:34%;--r:-6deg}
.it-story{left:73%;top:29%;width:11.5%;--r:8deg}
.it-feed{left:83%;top:36%;width:16%;--r:12deg}
.env,.env-flap{position:absolute;left:44%;top:60%;width:56%;aspect-ratio:2.05;transform:rotate(-4deg);transform-origin:50% 0}
.env-flap{top:42.4%;aspect-ratio:auto;height:0;padding-bottom:13%;transform-origin:50% 100%;
  background:linear-gradient(0deg,#aab49e,#c9d1bd);clip-path:polygon(0 100%,50% 0,100% 100%)}
.env{filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35));color:var(--green-ink)}
.env::before{content:'';position:absolute;inset:0;background:linear-gradient(170deg,#eef0e4,#d6dccb);clip-path:polygon(0 0,50% 24%,100% 0,100% 100%,0 100%)}
.env::after{content:'';position:absolute;left:0;right:0;top:0;height:24%;background:rgba(0,0,0,.22);clip-path:polygon(0 0,50% 100%,100% 0,100% 6%,50% 100%,0 6%)}
.env>span{position:absolute}
.env-band{left:5%;right:5%;bottom:8%;height:9%;background:url(/assets/series/money-talks/note-band-h.svg) 0 50%/auto 100% repeat-x;opacity:.75}
.env-issuer{left:6%;top:36%;font-size:clamp(30px,3.2vw,58px);line-height:1}
.env-file{left:6%;top:60%;font:600 clamp(11px,.9vw,14px)/1 var(--mono);letter-spacing:.12em}
.env-for{left:6%;top:70%;max-width:60%;font:600 clamp(8px,.62vw,10px)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#3f5e49}
.env-amt{right:6%;top:33%;text-align:right;font:800 clamp(48px,5.2vw,96px)/.85 var(--cond);letter-spacing:-.02em}
.env-amt small{display:block;margin-bottom:6px;font:600 clamp(9px,.7vw,11px)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#3f5e49}
.kit-cap{position:absolute;left:0;bottom:-6%;max-width:42%;font-size:12px;line-height:1.5;color:var(--mint)}
.get-copy{position:relative}
.b-h{margin:20px 0 0;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:clamp(52px,5.4vw,92px);line-height:.86;letter-spacing:-.02em;color:var(--paper)}
.b-h > span{display:block}
.b-h .bl{display:block;font-size:1.1em;line-height:.92;color:#fff}
.get-desc{margin:24px 0 0;max-width:470px;font-size:16px;line-height:1.7;color:var(--paper)}
.inc{list-style:none;margin:26px 0 0;padding:0;max-width:500px}
.inc li{display:flex;gap:18px;padding:5px 0;font-size:14px;line-height:1.45}
.inc li span:first-child{flex:none;width:78px;padding-top:3px;font:600 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.price-row{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.price{margin:0;display:flex;align-items:baseline;gap:8px}
.price strong{font-family:var(--cond);font-weight:800;font-size:76px;line-height:.85;letter-spacing:-.02em}
.price span{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--mint)}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mint)}
.back:hover{color:var(--lime)}

/* footer: the shared SMR lockup on the same dark */
.foot{position:relative;z-index:2;padding:40px var(--gutter) 40px;background:var(--ink)}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:40px;align-items:start;border-top:1px solid rgba(170,198,177,.14)}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--mint);max-width:300px}
.fnav{display:flex;flex-direction:column;gap:4px}
.fnav:nth-of-type(1){grid-column:7/10}.fnav:nth-of-type(2){grid-column:10/13}
.fnav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mint)}
.fnav a:hover{color:var(--paper)}
.fline{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:48px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}

/* money rain (round 2): canvases drawn by money-talks.js. Inside each pile the canvas is viewport-sized and sticky,
   so the bills share the photograph's fades and shading; the burst layer floats over the page. Never takes a tap. */
.mt-rain{position:absolute;inset:0;z-index:0;pointer-events:none}
.mt-rain canvas{position:sticky;top:0;display:block;width:100%;height:100vh;pointer-events:none}
.mt-rain-toss{z-index:1}  /* the button fountain: above the section's photograph, under its copy */
.mt-rain-burst{position:fixed;z-index:60;overflow:hidden}
.mt-rain-burst canvas{position:absolute;inset:0;height:100%}

/* motion: only when the reader allows it. Every scene plays once as it arrives (IntersectionObserver adds .in);
   the note shines and the board re-flips on hover or tap. Nothing is pinned or tied to the scroll position below the hero. */
@media (prefers-reduced-motion:no-preference){
  .hero-eyes img{animation:eyes-in 2.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes eyes-in{from{opacity:0;transform:scale(1.09)}to{opacity:1;transform:none}}
  .bill{animation:bill-in 1.3s .25s cubic-bezier(.2,.7,.2,1) both}
  @keyframes bill-in{from{opacity:0;transform:rotateX(26deg) rotateY(-34deg) rotateZ(14deg) translateY(60px)}}
  .hero-cover:hover .bill{transform:rotateX(6deg) rotateY(-12deg) rotateZ(3deg) translateY(-6px)}
  @supports (animation-timeline: scroll()){
    .hero-eyes picture{animation:eyes-drift linear both;animation-timeline:scroll(root);animation-range:0 110vh}
    @keyframes eyes-drift{to{transform:translateY(14vh) scale(1.05)}}
  }

  /* I · the note is laid down, its rosettes turn in, the serial numbers print, then the light crosses it */
  .bnote{transition:transform 1.5s cubic-bezier(.2,.75,.2,1),opacity .9s ease}
  .ros img,.n-ring,.n-seal img,.n-one-ros{transition:transform 2.2s cubic-bezier(.2,.75,.2,1) .3s}
  .n-serial{transition:clip-path 1.1s steps(11,end) 1.1s}
  .mt-motion .bnote:not(.in){opacity:0;transform:translateY(12vh) rotate(-8deg) scale(.96)}
  .mt-motion .bnote:not(.in) .ros img,.mt-motion .bnote:not(.in) .n-ring,.mt-motion .bnote:not(.in) .n-seal img,.mt-motion .bnote:not(.in) .n-one-ros{transform:rotate(-120deg)}
  .mt-motion .bnote:not(.in) .n-serial{clip-path:inset(0 100% 0 0)}
  .bnote.in::after{animation:sheen 1.7s 1.6s ease-in-out both}
  .bnote.shine::after{animation:sheen2 1.3s ease-in-out both}
  @keyframes sheen{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}
  @keyframes sheen2{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}

  /* II · the lines post one by one, the balance counts, the stamp lands */
  .stmt-t tbody tr,.stmt-t tfoot tr{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.2,1)}
  .stmt-t tbody tr:nth-child(2){transition-delay:.25s}.stmt-t tbody tr:nth-child(3){transition-delay:.5s}.stmt-t tfoot tr{transition-delay:.8s}
  .mt-motion .stmt:not(.in) .stmt-t tbody tr,.mt-motion .stmt:not(.in) .stmt-t tfoot tr{opacity:0;transform:translateX(-30px)}
  .stamp{transition:transform .32s cubic-bezier(.3,1.5,.5,1) 2.5s,opacity .12s linear 2.5s}
  .mt-motion .stmt:not(.in) .stamp{opacity:0;transform:rotate(-24deg) scale(2.1)}
  .stmt.in .stamp{animation:thud .3s 2.78s ease-out}
  @keyframes thud{0%{translate:0 0}30%{translate:4px 3px}60%{translate:-3px -1px}100%{translate:0 0}}

  /* IV · the tenth is lifted off the stack and set apart */
  .t-ten{transition:transform 1.3s cubic-bezier(.2,.75,.2,1) .35s}
  .t-ten .t-pct,.t-rest .t-pct{transition:opacity .7s ease 1.2s,transform .9s cubic-bezier(.2,.75,.2,1) 1.2s}
  .t-stack img{transition:transform 1s cubic-bezier(.2,.75,.2,1)}
  .mt-motion .tithe:not(.in) .t-ten{transform:translate(calc(var(--bw) + 5vw),calc(2vw + 10.4vw)) rotate(5deg)}
  .mt-motion .tithe:not(.in) .t-pct{opacity:0;transform:translateY(24px)}
  .mt-motion .tithe:not(.in) .t-stack img{transform:translateX(calc(var(--k) * var(--bw) * -.12)) rotate(0deg)}

  /* the kit: the deliverables slide out of the envelope */
  .mt-motion .kit:not(.in) .it{opacity:0;transform:translate(var(--fx,30%),var(--fy,60%)) rotate(0deg) scale(.55)}
  .it-l1{--fx:90%;--fy:110%;transition-delay:.05s}.it-l2{--fx:20%;--fy:120%;transition-delay:.15s}.it-l3{--fx:-30%;--fy:110%;transition-delay:.25s}
  .it-l4{--fx:80%;--fy:60%;transition-delay:.35s}.it-slide{--fx:10%;--fy:70%;transition-delay:.45s}.it-feed{--fx:-60%;--fy:60%;transition-delay:.55s}.it-story{--fx:160%;--fy:20%;transition-delay:.65s}
}
@media (prefers-reduced-motion:reduce){
  .mt-rain{display:none}
  *,*::before,*::after{animation:none !important;transition:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* large desktop */
@media (min-width:1700px){
  :root{--gutter:96px}
  .hero-copy{max-width:680px}
}

/* tablet */
@media (max-width:1100px){
  :root{--gutter:40px}
  .nav{gap:22px}
  .hero-eyes{width:88%}
  .hero-cover{right:4vw;width:30vw;bottom:-12vh}
  .q-inner{grid-template-columns:1fr;row-gap:48px}
  .verses{max-width:560px}
  .s-copy,.stmt,.s3-copy,.s4-copy{grid-template-columns:1fr;row-gap:36px}
  .stmt-r{max-width:640px}
  .loaves{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loaves li:nth-child(3){padding-left:0;border-left:0}
  .loaves li:nth-child(n+3){margin-top:3vh}
  .get-inner{grid-template-columns:1fr;row-gap:80px}
  .get-copy{max-width:620px}
  .pile-get::after{background:linear-gradient(180deg,rgba(5,12,8,.05) 30%,rgba(5,12,8,.85) 64%)}
}
@media (max-width:900px){
  .nav{display:none}
  .hero{display:block;min-height:0;padding:0 var(--gutter) 64px}
  .hero-eyes{position:relative;left:calc(var(--gutter) * -1);width:100vw;height:min(108vw,560px);
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .hero-eyes img{object-position:50% 52%;-webkit-mask-image:none;mask-image:none}
  .hero-copy{margin-top:min(-24vw,-60px)}
  .hero-cover{position:relative;right:auto;bottom:auto;width:58vw;max-width:340px;margin:40px 0 -32vw auto}
  .question{margin-top:-10vw;padding:46vw var(--gutter) 26vh}
  .title{font-size:min(19vw,150px)}
}

/* phone: the face first, then the words; each scene is recomposed for the tall screen */
@media (max-width:700px){
  :root{--gutter:20px}
  .top{height:72px;gap:12px}
  .brand{gap:9px}.brand-mark{height:36px;width:36px}.brand-name{font-size:9.5px;letter-spacing:.13em}
  .top .btn.sm{padding:10px 12px;font-size:10px;gap:8px}
  .crumbs ol{margin-bottom:6px}
  .title{margin-top:16px;font-size:min(30vw,150px);line-height:.8}
  .title span+span{padding-left:.3em}
  .ask{margin-top:24px;font-size:18px}
  .buyrow{margin-top:26px;flex-direction:column;align-items:stretch}
  .buyrow .btn{width:100%}
  .follow{align-self:flex-start}
  .bill{transform:rotateX(8deg) rotateY(-16deg) rotateZ(5deg)}
  .question .pile::after{background:linear-gradient(180deg,rgba(5,12,8,.2) 0,rgba(5,12,8,.72) 40%,rgba(5,12,8,.72) 100%)}
  .q-h{font-size:15vw}
  .q-h .bl{font-size:1.04em}
  .verses blockquote{margin-bottom:28px}

  .lessons{margin-top:-6vh}
  .seam{width:52vw}
  .seam-a{top:-17vw;right:-8vw}.seam-b{top:-12vw;left:-14vw}.seam-c{top:-16vw;right:-14vw}.seam-d{top:-14vw;left:4vw}
  .s-quote,.s-copy .s-quote,.s4-copy .s-quote{font-size:22px;line-height:1.3}

  /* I · on the phone the note stands upright, like a vertical banknote */
  .s1{padding-bottom:24vh}
  .bnote{width:100vw;margin:32px 0 0 calc(var(--gutter) * -1);transform:rotate(-1.4deg)}
  .note-in{aspect-ratio:.56}
  .note-in::before{background-size:22cqw auto}
  .note-in::after{inset:3cqw;background-size:auto 4.6cqw,auto 4.6cqw,4.6cqw auto,4.6cqw auto}
  .n-micro{inset:8.2cqw}
  .n-micro span{font-size:1.05cqw}
  .ros{width:17cqw}.ros b{font-size:8.6cqw}
  .r-tl{left:2.6cqw;top:2.6cqw}.r-tr{right:2.6cqw;top:2.6cqw}.r-bl{left:2.6cqw;bottom:2.6cqw}.r-br{right:2.6cqw;bottom:2.6cqw}
  .n-issuer{top:10.5cqw;font-size:6.6cqw}
  .n-line{left:20cqw;right:20cqw;top:19.5cqw;font-size:6.6cqw;line-height:1.02}
  .n-tender{left:14cqw;right:14cqw;width:auto;top:41.5cqw;text-align:center;font-size:2.3cqw}
  .n-por{top:47cqw;width:54cqw;margin-left:-27cqw}
  .n-ribbon{left:9cqw;right:9cqw;top:102.5cqw;padding:1.6cqw 5cqw}
  .n-ribbon p{font-size:3.7cqw}
  .n-ribbon cite{font-size:2.3cqw;margin-top:.8cqw}
  .n-series{right:auto;left:0;width:100%;top:41.5cqw;font-size:2.1cqw;display:none}
  .n-seal{left:13cqw;top:119cqw;width:26cqw}.n-seal b{font-size:11cqw}
  .n-one{right:11cqw;top:117cqw;width:30cqw}
  .n-serial{width:29cqw}
  .n-serial-a{right:auto;left:12cqw;top:147.5cqw}.n-serial-b{left:auto;right:12cqw;top:147.5cqw}
  .n-title{left:18cqw;right:18cqw;bottom:5cqw;padding:1.8cqw 1cqw 1.4cqw;font-size:8.8cqw;line-height:.92;
    -webkit-text-stroke:1cqw #2a8c4e}
  .s-copy{margin-top:7vh}

  /* II */
  .s2{padding-top:26vh;padding-bottom:16vh}
  .serial{top:9vh;height:70vw}
  .serial img{object-position:18% 30%}
  .stmt-bank{font-size:21vw;line-height:.9}
  .stmt-meta{gap:16px}
  .stmt-t tbody th,.stmt-t tbody td{font-size:7vw;padding:14px 0}
  .stmt-t tfoot th{font-size:12vw}
  .stmt-l{--gn:34vw}
  .stamp{left:auto;right:0;bottom:calc(34vw * .8 + 2vw)}
  .stamp span{font-size:14vw;border-width:1.1vw;padding:1vw 3vw .6vw;border-radius:2vw;box-shadow:inset 0 0 0 .6vw var(--note),inset 0 0 0 1.1vw rgba(11,58,29,.88);-webkit-mask-size:16vw auto,100% 100%;mask-size:16vw auto,100% 100%}
  .s-quote.ink{margin-top:5vh;font-size:24px}

  /* III: the board fills the phone, the word "Heaven" across its width */
  .s3{padding-top:26vh;padding-bottom:18vh}
  .s3-h{font-size:14vw}
  .board{padding:6vw var(--gutter) 9vw}
  .b-row{flex-direction:column;align-items:flex-start;gap:3vw;padding:4vw 0}
  .b-lab{width:auto}
  .f-lg{--tw:13.4vw;--tg:1.2vw}
  .f-sm{--tw:6.6vw;--tg:.7vw}
  .flaps{row-gap:1.6vw}
  .fw+.fw{margin-left:0}
  .fw .t.sp{display:none}
  .f-sm .fw{margin-right:2.6vw}
  .b-tap{bottom:3vw}
  .s3-ask{font-size:12vw}

  /* IV: the tenth lifts above a stack that runs off the screen */
  .s4{padding-top:26vh;padding-bottom:18vh}
  .s4-h{font-size:14vw}
  .tithe{--bw:56vw;height:calc(var(--bw) * .53 * 2 + 30vw + 18vw)}
  .t-pct{font-size:20vw}
  .t-ten{left:var(--gutter)}
  .t-ten img{margin-top:3vw}
  .t-rest{left:var(--gutter);top:calc(var(--bw) * .53 + 26vw)}
  .t-rest .t-pct{text-align:right;padding-right:var(--gutter)}
  .t-stack{margin-top:3vw}
  .t-stack img{left:calc(var(--k) * var(--bw) * .16)}
  .mt-motion .tithe:not(.in) .t-ten{transform:translate(0,calc(var(--bw) * .53 + 26vw + 23vw)) rotate(5deg)}
  .tenth-q{font-size:21px}
  .loaves b{font-size:17vw}
  .loaves span{font-size:11px}

  /* kit: the envelope at the foot, the deliverables fanned above it */
  .get{padding:26vh var(--gutter) 4vh}
  .kit{padding-bottom:122%}
  .it-l1{left:-3%;top:0;width:54%}
  .it-l2{left:47%;top:3%;width:54%}
  .it-l3{left:-1%;top:29%;width:52%}
  .it-l4{left:48%;top:32%;width:52%}
  .it-slide{left:3%;top:55%;width:60%}
  .it-story{left:62%;top:52%;width:17%}
  .it-feed{left:77%;top:56%;width:22%}
  .it span{font-size:8.5px;letter-spacing:.12em;padding:4px 6px 3px}
  .env,.env-flap{left:2%;width:96%;top:73%}
  .env-flap{top:calc(73% - 22% / 1.22);padding-bottom:22%}
  .env-issuer{font-size:8vw}.env-amt{font-size:13vw}.env-file{font-size:3vw}.env-for{font-size:2.2vw;max-width:56%}
  .kit-cap{position:relative;bottom:auto;max-width:100%;margin-top:18px}
  .b-h{font-size:14vw}
  .price-row{flex-direction:column;align-items:stretch}
  .price-row .btn{width:100%}
  .foot{padding-top:24px}
  .fgrid{display:block}.fnav{margin-top:24px}
}
@media (max-width:350px){
  .top .btn.sm span{display:none}
  .brand-name{font-size:8.5px}
  .inc li{flex-direction:column;gap:4px}
  .inc li span:last-child{text-align:left}
}