/* The motion story: the hero's lifting cards, the one-deal tour, money on a dark ground, the template rail.
   Inside a phone, sizes are app points: 1pt = var(--pt) = 1/440 of the screen width. */

.ip-screen{--pt:calc(100cqw / 440)}
.scenes{position:absolute;left:0;right:0;bottom:0;top:calc(var(--w) * .115);overflow:hidden;background:#FCF6F0}
.scene{position:absolute;inset:0;visibility:hidden;background:#FCF6F0}
.scene.is-on{visibility:visible}
.scr{position:absolute;inset:0;background:#FCF6F0;opacity:0}
.scr.is-on{opacity:1}
.scr img,.scr picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:9}

/* a finger on the glass */
.tap{position:absolute;z-index:8;left:calc(var(--cx) * var(--pt));top:calc(var(--cy) * var(--pt));width:calc(46 * var(--pt));height:calc(46 * var(--pt));
  margin:calc(-23 * var(--pt)) 0 0 calc(-23 * var(--pt));border-radius:50%;background:rgba(42,37,32,.16);
  box-shadow:inset 0 0 0 calc(2 * var(--pt)) rgba(255,255,255,.7),0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgba(42,37,32,.18);opacity:0;pointer-events:none}

/* sheets and dialogs the app opens */
.in-dim{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.2);opacity:0;pointer-events:none}
.in-sheet{position:absolute;z-index:6;left:0;right:0;bottom:0;height:78%;overflow:hidden;background:#FCF6F0;border-radius:calc(24 * var(--pt)) calc(24 * var(--pt)) 0 0;
  box-shadow:0 calc(-8 * var(--pt)) calc(30 * var(--pt)) rgba(0,0,0,.12);transform:translateY(102%)}
.in-sheet .grab{display:block;width:calc(36 * var(--pt));height:calc(5 * var(--pt));border-radius:9px;background:rgba(42,37,32,.2);margin:calc(7 * var(--pt)) auto calc(2 * var(--pt))}
.in-sheet img{display:block;width:100%;height:auto}
.in-dialog{position:absolute;z-index:6;left:calc(40 * var(--pt));right:calc(40 * var(--pt));top:34%;padding:calc(24 * var(--pt)) calc(20 * var(--pt)) calc(14 * var(--pt));
  background:#FCF6F0;border-radius:calc(28 * var(--pt));text-align:center;box-shadow:0 calc(18 * var(--pt)) calc(40 * var(--pt)) rgba(42,37,32,.25);opacity:0;transform:scale(1.08)}
.in-dialog .t{display:block;font-family:"Fraunces",serif;font-variation-settings:"SOFT" 0,"opsz" 144;font-style:italic;font-weight:500;font-size:calc(22 * var(--pt));line-height:1.27;letter-spacing:-.01em;color:#2A2520}
.in-dialog p{margin-top:calc(8 * var(--pt));font-family:"DM Sans",sans-serif;font-weight:500;font-size:calc(15 * var(--pt));line-height:1.4;color:#7A736B}
.in-dialog .go{display:block;margin-top:calc(18 * var(--pt));padding:calc(15 * var(--pt));border-radius:calc(14 * var(--pt));background:#2A2520;color:#FCF6F0;font-family:"DM Sans",sans-serif;font-weight:700;font-size:calc(16 * var(--pt))}
.in-dialog .later{display:block;margin-top:calc(6 * var(--pt));padding:calc(8 * var(--pt));font-family:"DM Sans",sans-serif;font-weight:600;font-size:calc(15 * var(--pt));color:#5A5048}
.mask{position:absolute;z-index:4;left:calc(28 * var(--pt));right:calc(20 * var(--pt));top:calc(var(--y) * var(--pt));height:calc(var(--h) * var(--pt));background:#fff;opacity:0;pointer-events:none}
.ring{position:absolute;z-index:4;left:calc(var(--x) * var(--pt));top:calc(var(--y) * var(--pt));width:calc(var(--w) * var(--pt));height:calc(var(--h) * var(--pt));
  border-radius:calc(22 * var(--pt));box-shadow:0 0 0 calc(2.5 * var(--pt)) #C9A678,0 0 0 calc(9 * var(--pt)) rgba(201,166,120,.2);opacity:0;pointer-events:none}

/* notification banner dropping out of the Dynamic Island */
.ip-screen .ios-push{position:absolute;z-index:10;left:calc(10 * var(--pt));right:calc(10 * var(--pt));top:calc(50 * var(--pt));display:grid;grid-template-columns:calc(44 * var(--pt)) 1fr;
  gap:calc(10 * var(--pt));align-items:start;padding:calc(14 * var(--pt)) calc(16 * var(--pt));border-radius:calc(28 * var(--pt));
  background:rgba(250,247,244,.94);-webkit-backdrop-filter:blur(calc(18 * var(--pt))) saturate(180%);backdrop-filter:blur(calc(18 * var(--pt))) saturate(180%);
  box-shadow:0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(40,25,20,.22),inset 0 0 0 calc(.6 * var(--pt)) rgba(255,255,255,.8);
  font-family:-apple-system,"SF Pro Text","DM Sans",sans-serif;color:#1c1917;opacity:0;transform-origin:50% 0;transform:translateY(-35%) scale(.45)}
.ip-screen .ios-push img{width:100%;height:auto;border-radius:calc(10 * var(--pt));display:block}
.ios-push .r1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ios-push .r1 b{display:none}
.ios-push .t{display:block;font-weight:600}
.ios-push .r1 i{font-style:normal;color:#6d655e;white-space:nowrap}
.ios-push > span{display:grid;grid-template-columns:1fr auto;column-gap:8px}
.ios-push > span .r1{grid-column:2;grid-row:1}
.ios-push > span .t{grid-column:1;grid-row:1}
.ios-push > span .m{grid-column:1 / -1}
.ip-screen .ios-push .t{font-size:calc(18 * var(--pt));line-height:1.25}
.ip-screen .ios-push .r1 i{font-size:calc(15 * var(--pt))}
.ip-screen .ios-push .m{font-size:calc(17 * var(--pt));line-height:1.3;color:#2c2926;margin-top:calc(1 * var(--pt))}

/* a piece of a real screen, cut at a card's bounds */
.crop{container-type:inline-size;position:relative;width:100%}
.crop .cr{position:absolute;inset:0;overflow:hidden}
.crop picture{display:contents}
.crop img{display:block;height:auto;max-width:none}

/* ---------------------------------------------------------------- hero */
.hero-stage{position:relative;min-height:680px;display:grid;place-items:center}
.hero-anchor{--pw:clamp(270px,22vw,318px);--sc:calc(var(--pw) * .9346 / 440);position:relative;width:var(--pw);height:calc(var(--pw) * 2.0949);margin-left:14%}
.hero-anchor .iphone{--w:var(--pw)}
.hero-glow{position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(154,85,100,.18),rgba(201,166,120,.16) 50%,transparent 75%)}
.lifts{position:absolute;inset:0;z-index:4;pointer-events:none}
/* --k runs 0 to 1 as the card lifts; the offset is a share of the phone width, so it holds at any size */
.hlift{--k:1;rotate:var(--r);scale:var(--s);position:absolute;left:calc(var(--pw) * .0327 + var(--x) * var(--sc) + var(--dx) * var(--pw) * var(--k) * var(--spread,1));top:calc(var(--pw) * .1477 + var(--y) * var(--sc) + var(--dy) * var(--pw) * var(--k) * var(--spread,1));width:calc(var(--w) * var(--sc));height:calc(var(--h) * var(--sc));
  border-radius:calc(22 * var(--sc));will-change:transform}
.hlift[data-lift="goal"]{border-radius:calc(28 * var(--sc))}
.hlift .crop{height:100%;border-radius:inherit;box-shadow:0 40px 70px -28px rgba(60,20,30,.42),0 12px 24px -12px rgba(60,20,30,.22)}
.ghost{position:absolute;left:calc(var(--pw) * .0327 + var(--x) * var(--sc));top:calc(var(--pw) * .1477 + var(--y) * var(--sc));width:calc(var(--w) * var(--sc));height:calc(var(--h) * var(--sc));
  border-radius:calc(22 * var(--sc));background:#F2EAE2;box-shadow:inset 0 calc(3 * var(--sc)) calc(10 * var(--sc)) rgba(42,37,32,.10),inset 0 0 0 1px rgba(42,37,32,.06)}
.ghost[data-ghost="goal"]{border-radius:calc(28 * var(--sc))}

/* ---------------------------------------------------------------- tour */
.tour-body{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:56px;align-items:start}
.chapters{padding:6vh 0 22vh}
.chapter{min-height:96vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 0}
.m-scene{display:none}
.tour-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:flex-start;padding-left:clamp(0px,3vw,48px)}
.stage-inner{position:relative;--w:min(330px,calc((100vh - 170px) / 2.17),26vw);margin-top:-70px}
.stage-inner > .iphone{--w:inherit;z-index:2}
.frags{position:absolute;z-index:1;left:calc(100% + 24px);top:0;width:clamp(250px,calc(50vw - 360px),330px);height:100%;pointer-events:none}
.frags .frag{position:absolute;left:0;opacity:0}
.frags[data-frags="voice"] .frag{top:26%}
.frags[data-frags="calendar"] .frag{top:58%}
.frags[data-frags="send"] .frag{top:3%}
.frags[data-frags="invoice"] .frag{top:24%}
.frags[data-frags="paid"] .frag{top:30%}
.x-real{width:100%;--rot:-1.5}
.x-crop{width:100%;--rot:-2;border-radius:26px;box-shadow:0 30px 60px -26px rgba(42,37,32,.45),0 8px 20px -10px rgba(42,37,32,.18)}
.x-crop .cr{border-radius:26px!important}
.x-doc{width:100%;--rot:2.5;box-shadow:0 40px 70px -30px rgba(42,37,32,.5),0 10px 24px -12px rgba(42,37,32,.22)}
.frags .x-event{--rot:2}
.x-vf .q{min-height:3.4em}
.x-vf .q::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:#C9A678;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.x-vf .wave i{height:calc(var(--h) * 1%)}
.x-vf.is-listening .wave i{animation:wave .9s ease-in-out infinite;transform-origin:50% 50%}
.x-vf .wave i:nth-child(2n){animation-delay:-.3s}.x-vf .wave i:nth-child(3n){animation-delay:-.6s}
@keyframes wave{50%{transform:scaleY(.35)}}

/* the deal's own progress bar, the spine of the story */
.spine{position:absolute;left:50%;top:calc(100% + 28px);translate:-50% 0;width:420px;padding:14px 16px 16px;border-radius:20px;background:#fff;
  box-shadow:0 1px 3px rgba(80,60,40,.09),0 12px 30px -8px rgba(80,60,40,.16);font-family:"DM Sans",sans-serif}
.sp-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sp-h .deal{display:flex;align-items:center;gap:9px}
.sp-h .lg{width:26px;height:26px;border-radius:8px;background:#141010;color:#F6EFE8;display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:600;font-size:12px}
.sp-h b{font-family:"Fraunces",serif;font-variation-settings:"SOFT" 0,"opsz" 144;font-weight:500;font-size:16px;color:#2A2520}
.sp-h i{font-style:normal;font-family:"Fraunces",serif;font-weight:500;font-size:14px;color:#7A736B}
.sp-h .cnt{border-radius:999px;padding:3px 9px;font-weight:700;font-size:11.5px;background:#F8D4B8;color:#6B4226;transition:background-color .4s ease,color .4s ease}
.sp-h .cnt.done{background:#B8DCC4;color:#2A5A3F}
.sp-steps{display:flex;margin:0 -8px}
.sps{flex:1;position:relative;display:flex;flex-direction:column;align-items:center}
.sps .dot{position:relative;z-index:1;width:22px;height:22px;border-radius:10px;background:rgba(0,0,0,.08);display:grid;place-items:center;transition:background-color .45s ease,box-shadow .45s ease}
.sps .dot::after{content:"";width:7px;height:7px;border-radius:3px;background:#fff;opacity:0;transition:opacity .3s ease}
.sps.done .dot{background:#A0B89A}
.sps.done .dot::after{width:9px;height:5px;border-radius:0;background:none;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg);opacity:1}
.sps.now .dot{background:#EDB78F;box-shadow:0 0 0 5px rgba(237,183,143,.25)}
.sps.now .dot::after{opacity:1}
.sps .ln{position:absolute;top:10px;left:calc(50% + 11px);right:calc(-50% + 11px);height:2px;background:rgba(0,0,0,.08)}
.sps .ln i{display:block;height:100%;width:0;background:#A0B89A;transition:width .55s var(--ease-out)}
.sps.done .ln i{width:100%}
.sps:last-child .ln{display:none}
.sps b{margin-top:6px;font-weight:600;font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:#7A736B;white-space:nowrap;transition:color .3s ease}
.sps.done b{color:#A0B89A}
.sps.now b{color:#2A2520;font-weight:700}

/* ---------------------------------------------------------------- money, on a dark ground */
.money-sec{position:relative;overflow:hidden;padding:136px 0;color:var(--cream);background:linear-gradient(180deg,#2E2822 0%,#1C1814 100%)}
.money-glow{position:absolute;right:-10%;top:10%;width:760px;height:760px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,166,120,.2),transparent 72%);pointer-events:none}
.money-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.money-sec .eyebrow{color:#B59A6E}
.money-sec h2{margin-top:14px;color:var(--cream);max-width:13ch;font-size:clamp(40px,5vw,64px);line-height:1.04}
.money-sec h2 em{color:var(--gold);font-style:italic}
.money-sec .lede{margin-top:20px;color:#CFC6BB;max-width:46ch;font-size:17.5px;line-height:1.6}
.money-stats{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 36px;max-width:520px}
.ms{border-top:1px solid rgba(201,166,120,.28);padding-top:14px}
.ms .k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B59A6E;font-weight:600}
.ms .v{display:block;margin-top:6px;font-family:"Fraunces",serif;font-variation-settings:"SOFT" 0,"opsz" 144;font-weight:500;font-size:clamp(34px,3.4vw,46px);line-height:1;color:#F7EFE3;font-feature-settings:"tnum"}
.ms .v small{font-family:"DM Sans",sans-serif;font-size:14px;color:#B8AA9B;font-weight:500;letter-spacing:0}
.ms .v.red{color:#E9A794}
.ring-ms{display:flex;gap:14px;align-items:center}
.ring-ms svg{width:58px;height:58px;flex:none;transform:rotate(-90deg)}
.ring-ms .tr{fill:none;stroke:rgba(255,255,255,.12);stroke-width:6}
.ring-ms .fl{fill:none;stroke:#C9A678;stroke-width:6;stroke-linecap:round;stroke-dasharray:169.65;stroke-dashoffset:25.45}
.money-sec .story-bullets{margin-top:36px}
.money-sec .story-bullets li{color:#D9CFC4}
.money-visual{position:relative;display:flex;justify-content:center;min-height:640px;align-items:center}
.money-phone .iphone{--w:clamp(250px,21vw,300px)}
@media (min-width:981px){.money-phone{translate:-60px 0}}
.money-story{position:absolute;right:4%;top:8%;width:190px;border-radius:16px;overflow:hidden;transform:rotate(5deg);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(201,166,120,.18)}
.money-story img{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- media hub */
.hub-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.t-feed,.t-docs{display:grid;grid-template-columns:minmax(0,1fr) 212px;column-gap:22px;height:540px;padding-bottom:0;border-color:transparent}
.t-feed{background:linear-gradient(160deg,#F1ECF6 0%,#F8F2F8 70%)}
.t-docs{background:linear-gradient(160deg,#E6EEDF 0%,#F1F5EC 80%)}
.tile-phone{align-self:end;margin-bottom:-150px}
.tile-phone .iphone{--w:212px}
.tile-phone .ip-floor{display:none}
.rail-head{margin:88px 0 26px;display:flex;justify-content:space-between;align-items:end;gap:40px}
.rail-head h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.2vw,42px);line-height:1.08;letter-spacing:-.015em;max-width:16ch}
.rail-head h3 em{font-style:italic}
.rail-head p{max-width:44ch;color:var(--ink-2);font-size:15.5px}
.rail{margin-inline:calc(50% - 50vw);padding:14px calc(50vw - 50%) 34px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing}
.rail.is-drag *{pointer-events:none}
.rail-track{display:flex;gap:24px;width:max-content;align-items:flex-end}
.rc{margin:0;flex:none;transition:translate .5s var(--ease-out)}
.rc.rate{width:360px}
.rc.inv{width:248px}
.rc img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 26px 44px -24px rgba(42,37,32,.45),0 0 0 1px rgba(42,37,32,.07);user-select:none;-webkit-user-drag:none}
.rc figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px}
.rc figcaption b{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:16px;color:var(--ink)}
.rc figcaption span{color:var(--ink-3)}
.rc:hover{translate:0 -6px}

/* ---------------------------------------------------------------- final */
.final-stack{position:relative;width:min(400px,92%);height:212px;margin:0 auto 44px}
.ios-push.lg{position:absolute;left:0;right:0;top:calc(var(--i) * 66px);display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:13px 15px;border-radius:26px;
  background:rgba(246,242,238,.95);box-shadow:0 20px 44px -20px rgba(0,0,0,.6),inset 0 0 0 .5px rgba(255,255,255,.7);text-align:left;
  font-family:-apple-system,"SF Pro Text","DM Sans",sans-serif;color:#1c1917;transform:scale(calc(1 - (2 - var(--i)) * .04));transform-origin:50% 0}
.ios-push.lg img{width:40px;height:40px;border-radius:10px}
.ios-push.lg .t{font-size:15px}
.ios-push.lg .r1 i{font-size:13px}
.ios-push.lg .m{font-size:14.5px;line-height:1.3;color:#2c2926}

/* ---------------------------------------------------------------- dark appearance
   The app's own dark palette: ink ground #0F1319, surfaces #181E27 / #212834, cream text, gold accent. */
.ip-screen.is-dark .ip-status{color:#fff}
.ip-screen.is-dark .ip-home{background:#F2EBE1}
.ios-tabbar.dark::before{background:linear-gradient(180deg,rgba(15,19,25,0) 0%,rgba(15,19,25,.88) 45%,#0F1319 100%)}
.ip-screen .ios-push.dark{background:rgba(38,40,46,.9);color:#F5F5F7;box-shadow:0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(0,0,0,.45),inset 0 0 0 calc(.6 * var(--pt)) rgba(255,255,255,.1)}
.ios-push.dark .r1 i,.ios-push.dark .m{color:#B7B7BD}
.scene[data-theme="dark"] .mask{background:#181E27}
.scene[data-theme="dark"] .in-dim{background:rgba(0,0,0,.5)}
.scene[data-theme="dark"] .in-dialog{background:#212834;box-shadow:0 calc(18 * var(--pt)) calc(40 * var(--pt)) rgba(0,0,0,.5),inset 0 0 0 1px rgba(242,235,225,.08)}
.scene[data-theme="dark"] .in-dialog .t{color:#F2EBE1}
.scene[data-theme="dark"] .in-dialog p,.scene[data-theme="dark"] .in-dialog .later{color:#A9A298}
.scene[data-theme="dark"] .in-dialog .go{background:#F2EBE1;color:#0F1319}
[data-theme="dark"] .x-event{background:#181E27;box-shadow:0 30px 60px -28px rgba(0,0,0,.7),inset 0 0 0 1px rgba(242,235,225,.08)}
[data-theme="dark"] .x-event .fr5{color:#F2EBE1}
[data-theme="dark"] .x-event .k,[data-theme="dark"] .x-event .m{color:#A9A298}
[data-theme="dark"] .x-event .tag{background:#292433!important;color:#D9A99A!important}

/* the tour turns to night with its dark chapters, on the same espresso as every dark section */
.tour{position:relative;isolation:isolate}
.tour::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1s var(--ease-out);
  background:radial-gradient(52% 38% at 80% 32%,rgba(224,168,92,.12),transparent 70%),radial-gradient(40% 30% at 10% 80%,rgba(154,85,100,.10),transparent 70%),#1E1A16}
.tour.is-night::after{opacity:1}
.tour .chapter h3,.tour .chapter .lede,.tour .chapter .eyebrow,.tour .story-bullets li,.tour .pro-note,.tour-head h2,.tour-head .lede,.tour-head .eyebrow,.spine,.sp-h b,.sps b{transition:color .9s var(--ease-out),background-color .9s var(--ease-out),border-color .9s var(--ease-out),box-shadow .9s var(--ease-out)}
.tour.is-night .chapter h3,.tour.is-night .tour-head h2{color:#F2EBE1}
.tour.is-night .chapter .eyebrow,.tour.is-night .tour-head .eyebrow{color:#E0A85C}
.tour.is-night .chapter .lede,.tour.is-night .tour-head .lede{color:#A9A298}
.tour.is-night .story-bullets li{color:#CFC6BB}
.tour.is-night .pro-note{background:#181E27;border-color:rgba(242,235,225,.09);color:#A9A298}
.tour.is-night .spine{background:#181E27;box-shadow:0 0 0 1px rgba(242,235,225,.07),0 18px 40px -12px rgba(0,0,0,.6)}
.tour.is-night .sp-h b{color:#F2EBE1}
.tour.is-night .sps b{color:#827C74}
.tour.is-night .sps .dot{background:rgba(242,235,225,.1)}

/* ---------------------------------------------------------------- narrow screens */
@media (min-width:981px) and (max-width:1180px){
  .tour-body{grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:32px}
  .frags{transform:scale(.84);transform-origin:left top}
  .spine{width:360px}
}
@media (max-width:1100px){.t-feed,.t-docs{grid-template-columns:minmax(0,1fr) 180px}.tile-phone .iphone{--w:180px}}
@media (max-width:980px){
  .hero-stage{min-height:0;padding:40px 0 20px}
  .hero-anchor{margin-left:0}
  .tour-body{grid-template-columns:1fr}
  .tour-stage{display:none}
  .chapters{padding:0 0 64px}
  .chapter{min-height:0;padding:56px 0}
  .m-scene{display:block;margin-top:36px}
  .m-phone{display:flex;justify-content:center}
  .m-phone .iphone{--w:min(66vw,290px)}
  .m-frags{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:-90px;position:relative;z-index:3}
  .m-frags .frag{opacity:0}
  .m-frags .x-crop,.m-frags .x-real,.m-frags .x-doc{width:min(86vw,330px)}
  .chapter[data-theme="dark"]{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
    background:radial-gradient(70% 30% at 85% 12%,rgba(224,168,92,.12),transparent 70%),#1E1A16}
  .chapter[data-theme="dark"] h3{color:#F2EBE1}
  .chapter[data-theme="dark"] .eyebrow{color:#E0A85C}
  .chapter[data-theme="dark"] .lede{color:#A9A298}
  .chapter[data-theme="dark"] .story-bullets li{color:#CFC6BB}
  .money-grid{grid-template-columns:1fr}
  .money-visual{min-height:0;padding-top:20px}
  .hub-pair{grid-template-columns:1fr}
  .t-feed,.t-docs{height:500px}
  .rail-head{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:640px){
  .hero-anchor{--pw:min(62vw,250px);--spread:.78}
  .money-story{width:140px;right:0}
  .money-stats{gap:20px 22px}
  .t-feed,.t-docs{grid-template-columns:1fr;height:auto}
  .tile-phone{justify-self:center;margin:26px 0 -170px}
  .tile-phone .iphone{--w:240px}
  .rc.rate{width:280px}
  .rc.inv{width:196px}
  .ios-push.lg{grid-template-columns:34px 1fr;padding:11px 13px}
  .ios-push.lg img{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .x-vf .q::after,.x-vf.is-listening .wave i{animation:none}
}