/* The home page's subpages (/creators, /apps, /money), 6 Nov 2026. They load the home page's own front.css and showcase.css and use
   its components as they are: the header and phone menu, the film hero, the cream and black sheets, the double-bezel cards, the dark
   form card, the doors and the footer. This file only lays those pieces out for a subpage and adds the few things the home page has
   no copy of (a numbered step, a question you open, the sale slider), drawn from the same tokens. Everything here is visible without JS. */

/* ── header: the page you're on, and a solid bar when there's no script to turn it solid ── */
.top nav a[aria-current="page"]{opacity:1;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
html:not(.js) .top{background:#0b0b0b}
.mnav a[aria-current="page"]{background:rgba(255,255,255,.06)}

/* ── the film hero, a little shorter than the home page's so the next sheet shows ── */
.hero.sp-hero{min-height:92svh}
.hero.sp-hero video{opacity:1}
.hero .mo-eyebrow{color:rgba(255,255,255,.78);margin-bottom:20px}
.sp-hi{margin-bottom:18px;max-width:52ch;font-size:16px;line-height:1.45;color:rgba(255,255,255,.88)}
.sp-hi b{color:#fff;font-weight:600}
.sp-hi[hidden]{display:none}
.army .pill{border:0;cursor:pointer;font-family:var(--sans)}
@media (min-width:1024px) and (max-height:860px){.hero .mo-eyebrow{margin-bottom:14px}}
@media (prefers-reduced-motion:reduce){.hero.sp-hero video{transform:none}}

/* ── numbered steps: the investors' double-bezel cards, in a row ── */
.avs .sp-steps{list-style:none;padding:0;margin-top:clamp(36px,4.6vw,64px);display:grid;gap:14px}
@media (min-width:760px){.avs .sp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.avs .sp-steps.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.avs .sp-steps.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.avs .sp-steps .inv-in{display:flex;flex-direction:column}
.avs .sp-k{font:500 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--p-soft)}
.avs .sp-steps .inv-n{margin-top:14px}
.avs .sp-steps h3{margin-top:20px;font:500 19px/1.25 var(--sans);letter-spacing:-.015em;color:var(--p-ink)}
.avs .sp-steps .inv-in p:not(.inv-n){margin-top:8px}
/* the same cards on a black sheet */
.avs .sec:not(.paper) .inv-c,.pays .inv-c{padding:6px;border-radius:28px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.avs .sec:not(.paper) .inv-in,.pays .inv-in{height:100%;padding:22px 22px 24px;border-radius:22px;background:#151515;box-shadow:none}
.avs .sec:not(.paper) .inv-n,.pays .inv-n{color:#fff}
.avs .sec:not(.paper) .inv-in p:not(.inv-n){color:rgba(255,255,255,.72)}
.avs .sec:not(.paper) .sp-k,.pays .sp-k{color:rgba(255,255,255,.62)}
.avs .sec:not(.paper) .sp-steps h3{color:#fff}

/* ── the pay section (.pays) with cards: three across ── */
.pays .sp-nums{list-style:none;padding:0;margin-top:56px;display:grid;gap:14px;max-width:1100px}
@media (min-width:760px){.pays .sp-nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pays .inv-n{font:300 clamp(44px,5vw,64px)/1 var(--sans);letter-spacing:-.04em;margin-top:14px}
.pays .inv-in p:not(.inv-n){margin-top:12px;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.72)}
.pays .vs.sp-after{margin-top:40px}
.pays .lede a,.pays .vs a,.sp-fine a,.avs .body a.sp-a,.sp-qa a{color:inherit;border-bottom:1px solid currentColor;padding-bottom:1px}

/* ── where one sale goes: the slider on a .viz card, the parts as the home page's check rows ── */
.sp-split{margin-top:56px;display:grid;gap:16px;max-width:1100px;align-items:start}
@media (min-width:900px){.sp-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4vw}}
.sp-sale{background:#151515;border-radius:28px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);padding:clamp(22px,2.6vw,30px)}
.sp-sale-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sp-sale-top label{font:500 15px var(--sans);color:rgba(255,255,255,.72)}
.sp-sale-top output{font:300 clamp(40px,4.4vw,60px)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sp-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin-top:18px;background:transparent;cursor:pointer}
.sp-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
.sp-range::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
.sp-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.5);transition:transform 140ms var(--ease)}
.sp-range::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.sp-range:active::-webkit-slider-thumb{transform:scale(.97)}
.sp-range:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
.sp-bar{margin-top:18px;display:flex;height:10px;border-radius:10px;overflow:hidden;gap:3px}
.sp-bar i{display:block;height:100%}
.sp-bar .you{flex:30;background:#fff}.sp-bar .av{flex:5;background:rgba(255,255,255,.45)}.sp-bar .app{flex:65;background:#2a2a2a}
.sp-key{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:rgba(255,255,255,.62)}
.sp-key span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:#2a2a2a}
.sp-key .you::before{background:#fff}.sp-key .av::before{background:rgba(255,255,255,.45)}
.sp-sale .chk{margin-top:22px}
.sp-sale .chk em{font-variant-numeric:tabular-nums}
.sp-fine{margin-top:16px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62)}
.sp-split .vs{margin-top:0;grid-template-columns:1fr;gap:28px}
.sp-paper-bar{margin-top:40px;max-width:760px}
.sp-paper-bar .sp-bar .app{background:#d9d2c3}.sp-paper-bar .sp-bar .you{background:#111}.sp-paper-bar .sp-bar .av{background:#8a857a}
.sp-paper-bar .sp-key{color:#57534c}.sp-paper-bar .sp-key span::before{background:#d9d2c3}.sp-paper-bar .sp-key .you::before{background:#111}.sp-paper-bar .sp-key .av::before{background:#8a857a}

/* ── the editor: films as on the home page, then the two plans ── */
.avs .sp-plans{margin-top:clamp(48px,6vw,88px);display:grid;gap:14px}
@media (min-width:760px){.avs .sp-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.avs .sp-plans h3{font:300 clamp(30px,3vw,40px)/1 var(--sans);letter-spacing:-.03em;color:var(--p-ink)}
.avs .sp-plans .sp-price{margin-top:10px;font-size:15.5px;color:var(--p-muted)}
.avs .sp-plans ul{list-style:none;padding:0;margin-top:20px;display:grid;gap:0}
.avs .sp-plans li{padding:11px 0;border-top:1px solid var(--p-hair);font-size:15.5px;line-height:1.45;color:var(--p-ink)}
.avs .sp-plans .dark .inv-in{background:var(--p-ink);color:#fff}
.avs .sp-plans .dark h3{color:#fff}.avs .sp-plans .dark .sp-price{color:rgba(255,255,255,.72)}
.avs .sp-plans .dark li{color:#fff;border-top-color:rgba(255,255,255,.14)}
.avs .sp-plans .inv-in p.sp-why{margin-top:16px;font-size:14.5px}
.avs .sp-plans .dark .inv-in p.sp-why{color:rgba(255,255,255,.72)}

/* ── questions you open: the four-parts tabs' rule and type ── */
.sp-qa{margin-top:clamp(36px,4.6vw,64px);max-width:900px;border-bottom:1px solid rgba(255,255,255,.12)}
.sp-qa details{border-top:1px solid rgba(255,255,255,.12)}
.sp-qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:400 clamp(21px,2.1vw,28px)/1.2 var(--sans);letter-spacing:-.02em;color:rgba(255,255,255,.86);-webkit-tap-highlight-color:transparent;transition:color 200ms var(--ease)}
.sp-qa summary::-webkit-details-marker{display:none}
.sp-qa summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;opacity:.7;transition:transform 200ms var(--ease)}
.sp-qa details[open] summary{color:#fff}
.sp-qa details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.sp-qa summary:hover{color:#fff}}
.sp-qa summary:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.sp-qa details p{padding:0 0 26px;max-width:62ch;font-size:17px;line-height:1.55;color:rgba(255,255,255,.72)}
.avs .sp-qa p{font-family:var(--sans)}
.sp-qa-h{margin-top:clamp(56px,7vw,96px)}
.avs .paper .sp-qa,.avs .paper .sp-qa details{border-color:var(--p-hair)}
.avs .paper .sp-qa summary{color:var(--p-ink)}
.avs .paper .sp-qa details p{color:var(--p-muted)}
.avs .paper .sp-qa summary:focus-visible{outline-color:var(--p-ink)}
@media (prefers-reduced-motion:reduce){.sp-qa summary::after{transition:none}}

/* ── apply: the home page's dark form card (.door2.dark + .fw), beside the words ── */
.avs .paper .sp-apply label,.avs .paper .sp-apply small,.avs .paper .sp-apply b,.avs .paper .sp-apply em,.avs .paper .sp-apply button,.avs .paper .sp-apply div{font-family:var(--sans)}
.avs .sp-apply{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:980px){.avs .sp-apply{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.avs .sp-apply .door2{min-height:0;padding:clamp(22px,3vw,36px)}
.avs .sp-apply .fw{margin-top:0}
.sp-ul{list-style:none;padding:0;margin-top:28px;display:grid;gap:0;max-width:52ch}
.sp-ul li{padding:13px 0;border-top:1px solid var(--p-hair);font-size:16px;line-height:1.45;color:var(--p-muted)}
.sp-ul li b{color:var(--p-ink);font-weight:500}
.fw .full{grid-column:1/-1}
.fw textarea{min-height:112px;padding:12px 14px;border-radius:14px;border:0;font:400 15px/1.45 var(--sans);background:#1a1a1a;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);outline:none;resize:vertical;min-width:0}
.fw textarea:focus{box-shadow:inset 0 0 0 1.5px #fff}
.fw textarea::placeholder{color:#a8a49c;opacity:1}
.fw .fl small{padding-left:4px;font-size:13px;color:rgba(255,255,255,.6)}
.fw .sp-pct{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fw .sp-pct input{width:96px;flex:none}
.fw .sp-pct em{font-style:normal;font-size:14px;line-height:1.4;color:rgba(255,255,255,.72);flex:1 1 200px}
.fw .sp-tick{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;padding:4px 4px 0;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.78);cursor:pointer}
.fw .sp-tick input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:#fff;box-shadow:none;cursor:pointer}
.fw .sp-tick a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.fw .ap-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fw .pill[disabled]{opacity:.5;cursor:default}
.fw .pill[hidden]{display:none}
.sp-done{grid-column:1/-1;padding:18px;border-radius:16px;background:#1f3a2c;color:#d8f0e2;font-size:15.5px;line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
.sp-done.on{opacity:1;transform:none}
.sp-done[hidden]{display:none}
.sp-done p+p,.sp-done p+code{margin-top:8px}
.sp-done code{display:block;font:400 13px/1.6 "IBM Plex Mono",ui-monospace,monospace;overflow-wrap:anywhere;color:#fff}
@media (prefers-reduced-motion:reduce){.sp-done{transform:none}}

/* ── code from your agent: the home page's code window (.ide), one file at a time ── */
.sp-codes{margin-top:clamp(32px,4vw,48px);display:grid;gap:12px;max-width:980px}
.ide.sp-code{display:block;margin-top:0;background:#101010;color:#fff}
.ide.sp-code .bar b{font:500 13.5px var(--sans);color:rgba(255,255,255,.75);padding-left:4px}
.ide.sp-code pre{margin:0;padding:18px 20px 22px;font:400 13.5px/1.75 "IBM Plex Mono",ui-monospace,Menlo,monospace;color:#e6e6e6;overflow-x:auto;white-space:pre}
.ide.sp-code .cp{color:rgba(255,255,255,.72)}
.ide.sp-code .cp:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ide.sp-code .cp:hover{color:#fff}}

/* ── the closing door: buttons instead of the home page's email form ── */
.door .army{margin-top:44px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
.door .army .pill.ghost{padding:0 24px;height:56px}
.who2 .door2 .pill{border:0}

/* ── small drawn icons on the step cards: each part settles in once (transform and opacity only); still for reduced motion ── */
.sp-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sp-ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#111;color:#fff}
.avs .sec:not(.paper) .sp-ico,.pays .sp-ico{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sp-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.sp-ico .fill{fill:currentColor;stroke:none}
.sp-ico .pop,.sp-ico .up,.sp-ico .l,.sp-ico .r,.sp-ico .fade{transform-box:fill-box;transform-origin:center}
.sp-ico .spin{transform-box:view-box;transform-origin:16px 16px}
.sp-ico .d2{--d:200ms}.sp-ico .d3{--d:280ms}.sp-ico .d4{--d:360ms}
[data-in]:nth-child(2){--o:70ms}[data-in]:nth-child(3){--o:140ms}[data-in]:nth-child(4){--o:210ms}
.js [data-in] .sp-ico .pop{opacity:0;transform:scale(.6)}
.js [data-in] .sp-ico .up{opacity:0;transform:translateY(5px)}
.js [data-in] .sp-ico .l{opacity:0;transform:translate(-4px,4px)}
.js [data-in] .sp-ico .r{opacity:0;transform:translate(4px,-4px)}
.js [data-in] .sp-ico .fade{opacity:0}
.js [data-in] .sp-ico .spin{transform:rotate(-120deg)}
.js [data-in].in .sp-ico .pop,.js [data-in].in .sp-ico .up,.js [data-in].in .sp-ico .l,.js [data-in].in .sp-ico .r,.js [data-in].in .sp-ico .fade,.js [data-in].in .sp-ico .spin{
  opacity:1;transform:none;transition:opacity 260ms var(--ease) calc(var(--d,120ms) + var(--o,0ms)),transform 460ms var(--ease) calc(var(--d,120ms) + var(--o,0ms))}
@media (prefers-reduced-motion:reduce){.js [data-in] .sp-ico *{transform:none!important;transition:opacity 200ms linear!important}}

/* ── a receipt on its own card (the home page's .rx), plays held -> cleared -> paid while it is on screen ── */
.viz.sp-viz{min-height:0;padding:clamp(20px,2.6vw,30px)}
.sp-viz .pane,.js .sp-viz .pane{position:relative;inset:auto;padding:0;opacity:1;transform:none;pointer-events:auto}
html:not(.js) .grow div,html:not(.js) .rx-bar i{transform:none}
html:not(.js) .sys .pane{padding:26px 30px}
html:not(.js) .sys .pane+.pane{border-top:1px solid rgba(255,255,255,.08)}
html:not(.js) .rx-st .s1,html:not(.js) .rx-st .s2{color:#1b1a17}
html:not(.js) .rx-st .s3{color:#178a57}
.sp-two{margin-top:clamp(36px,4.6vw,64px);display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:980px){.sp-two{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.sp-two .sp-qa{margin-top:0}
/* four parts on a subpage: on the sheets' column, as the home page puts .pays between them; the pane fits its words on phones */
.system{padding-inline:max(clamp(16px,4vw,48px),calc((100% - 1240px) / 2))}
@media (max-width:560px){.sys .viz{min-height:520px}}
/* the receipt keeps the home page's typewriter lines inside a sheet (the sheets set Mona Sans on every span) */
.avs .rx-lines,.avs .rx-lines span{font-family:"IBM Plex Mono",ui-monospace,monospace}