/* The Prism home. A dark page with one light object: a paper receipt at the bottom of a stack of layers under a blank site.
   Scrolling peels the layers back (the site, log in, pay) down to the receipt; still (JS off, reduced motion) the stack is fanned.
   Colour lives only in the mark. One accent for links. No gradients, no backdrop blur. */
:root{color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth}
body.ph{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.ph-skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;z-index:9;border-radius:8px}.ph-skip:focus{left:8px}

.ph-top{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px;padding:0 var(--gut)}
.ph-brand{min-height:44px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 1.1875rem/1 var(--sans);letter-spacing:-.02em}
.ph-brand svg{width:28px;height:28px;flex:none}
.ph-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);font-size:.9375rem;font-weight:450;color:var(--mute)}
.ph-nav a{text-decoration:none;min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center;transition:color .2s}
.ph-nav a:not(.ph-btn):hover{color:var(--ink)}
.ph-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:var(--ink);color:var(--bg)!important;border-radius:999px;font-weight:550;text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s}
.ph-btn:hover{background:var(--accent)}
.ph-btn:active{transform:scale(.97)}
.ph-btn.lg{min-height:56px;padding:0 30px;font-size:1.0625rem}
.ph-link{min-height:44px;display:inline-flex;align-items:center;font-weight:500;color:var(--mute);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:6px;transition:color .2s,text-decoration-color .2s}
.ph-link:hover{color:var(--ink);text-decoration-color:var(--accent)}
.ph-cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}

/* the hero: the words on the left, the stack of layers on the right */
.ph-hero{--w:min(372px,78vw);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start;padding:clamp(120px,17vh,168px) var(--gut) clamp(56px,10vh,112px);border-bottom:1px solid var(--line)}
.ph-say{min-width:0;padding-top:clamp(24px,10vh,112px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vh,40px)}
.ph-h1{font:500 clamp(2.75rem,4.9vw,6.5rem)/1 var(--sans);letter-spacing:-.05em}
.ph-h1 span{display:block;white-space:nowrap}
.ph-dim{color:var(--dim)}
.ph-lede{max-width:44ch;font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.5;color:var(--mute)}
.ph-scene{min-width:0;display:grid;justify-items:center;gap:clamp(24px,4vh,40px);perspective:1600px}

/* the stack: every layer in one grid cell, so all take the receipt's size. Still, it is fanned: each layer behind shows its label */
.ph-stack{display:grid;width:var(--w);transform-style:preserve-3d;transform:rotateX(9deg) rotateY(-13deg);margin:calc(var(--w) * .26) 0 0 calc(var(--w) * .14)}
.ph-sh{grid-area:1/1;position:relative;margin:0;border-radius:6px;box-shadow:0 1px 0 rgb(255 255 255 / .06) inset,0 40px 70px -30px rgb(0 0 0 / .85),0 10px 24px -12px rgb(0 0 0 / .6);backface-visibility:hidden}
.ph-sh:not(.ph-slip){display:flex;flex-direction:column;gap:14px;padding:44px clamp(18px,6%,28px) 22px;background:var(--s1);border:1px solid var(--line2);font-size:.9375rem;color:var(--mute)}
.ph-sh-site{transform:translate3d(-12%,-19.5%,-60px) rotate(-3deg)}
.ph-sh-in{transform:translate3d(-8%,-13%,-40px) rotate(-2deg);background:var(--s2)!important}
.ph-sh-pay{transform:translate3d(-4%,-6.5%,-20px) rotate(-1deg)}
html:not(.ph-js) .ph-sh:not(.ph-slip)>:not(.ph-tag){visibility:hidden} /* covered: only the label shows */
.ph-tag{position:absolute;top:10px;left:clamp(18px,6%,28px);font:500 .75rem/1.4 "Geist Mono",ui-monospace,Consolas,monospace;letter-spacing:.02em;color:var(--mute)}
.ph-sh-h{font:550 1.625rem/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.ph-note{margin-top:auto;padding-top:14px;border-top:1px solid var(--line2);font-size:.875rem}
.ph-fld{display:grid;gap:4px;padding:10px 14px;border:1px solid var(--line3);border-radius:8px;color:var(--ink)}
.ph-fld small{font-size:.75rem;color:var(--mute)}
.ph-fake{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:550}
.ph-fake.o{background:none;border:1px solid var(--line3);color:var(--ink)}
.ph-or{text-align:center;font-size:.8125rem}
.ph-sh-pay dl{margin:0;display:grid}
.ph-sh-pay dl div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2)}
.ph-sh-pay dd{margin:0;color:var(--ink);font-weight:500}
/* the blank site: no real one, just the shape of a page with a log-in button where the account lives */
.sk{display:block;border-radius:4px;background:var(--s2)}
.sk-nav{display:flex;align-items:center;gap:8px;background:none}
.sk-nav i{display:block;width:44px;height:8px;border-radius:4px;background:var(--line2)}
.sk-nav b{margin-left:auto;padding:6px 12px;border:1px solid var(--accent);border-radius:999px;font-size:.75rem;font-weight:550;color:var(--ink)}
.sk-pic{aspect-ratio:16/8;background:var(--s2)}
.sk-h{height:18px;width:72%;background:var(--line2)}
.sk-l{height:8px;background:var(--s2)}.sk-l.s{width:58%}
.sk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:none}.sk-row i{display:block;aspect-ratio:1;border-radius:4px;background:var(--s2)}

/* the receipt: thermal paper, printed type */
.ph-slip{--paper:var(--ink);padding:26px 24px 30px;background:var(--paper);color:var(--bg);font:400 .8125rem/1.45 "Geist Mono",ui-monospace,Consolas,monospace;border-radius:0}
.ph-slip-top{display:grid;justify-items:center;gap:6px;padding-bottom:16px;border-bottom:1.5px dashed currentColor;text-align:center}
.ph-slip-top b{font:600 1.375rem/1 var(--sans);letter-spacing:-.02em}
.ph-slip-top img{display:block}
.ph-slip dl{margin:0;padding:14px 0}
.ph-slip dl div{display:flex;align-items:baseline;gap:8px;padding:4px 0}
.ph-slip dt{flex:1;display:flex;align-items:baseline;gap:8px;min-width:0}
.ph-slip dt::after{content:"";flex:1;min-width:12px;border-bottom:1.5px dotted currentColor;opacity:.45;translate:0 -3px}
.ph-slip dd{margin:0;font-weight:600}
.ph-sum{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-block:1.5px dashed currentColor;font-weight:600}
.ph-sum b{font-size:1.75rem;line-height:1}
.ph-bars{display:block;height:40px;margin:18px 0 10px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px,currentColor 5px 9px,transparent 9px 11px,currentColor 11px 12px,transparent 12px 17px)}
.ph-slip figcaption{text-align:center;font-size:.8125rem}

/* the three things underneath, in words */
.ph-steps{list-style:none;margin:0;padding:0;width:min(100%,calc(var(--w) * 1.25));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ph-steps li{position:relative;display:grid;gap:4px;align-content:start;padding-top:14px;border-top:1px solid var(--line2);font-size:.875rem;line-height:1.45;color:var(--mute)}
.ph-steps b{font-weight:550;font-size:.9375rem;color:var(--ink)}
.ph-steps b span{font:500 .75rem/1 "Geist Mono",ui-monospace,Consolas,monospace;color:var(--accent);margin-right:4px}

/* motion: the hero runs three screens; both columns hold still while the stack peels. --p (0 to 1) is how far through it you are */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
.ph-js .ph-hero{min-height:360svh;align-items:start;padding-top:0;padding-bottom:0}
.ph-js .ph-say,.ph-js .ph-scene{position:sticky;top:0;height:100svh;align-content:center}
.ph-js .ph-say{padding-top:72px}
.ph-js .ph-hero>*{
  --e:clamp(0,var(--p,0)/.14,1);
  --k0:clamp(0,(var(--p,0) - .18)/.2,1);--k1:clamp(0,(var(--p,0) - .4)/.2,1);--k2:clamp(0,(var(--p,0) - .62)/.2,1);
  --s:clamp(0,(var(--p,0) - .84)/.14,1);
  --t:calc((.42 + .58 * var(--e)) * (1 - .8 * var(--s)));
  --x1:min(var(--k0),1 - var(--k1));--x2:min(var(--k1),1 - var(--k2));--x3:var(--k2)}
.ph-js .ph-stack{margin:0;transform:rotateX(calc(var(--t) * 42deg)) rotateZ(calc(var(--t) * -16deg))}
.ph-js .ph-sh{transform-origin:50% 0;transform:translateZ(calc(var(--t) * var(--z) * 1px)) translate3d(calc(var(--k) * -6%),calc(var(--k) * -80%),calc(var(--k) * 160px)) rotateX(calc(var(--k) * 72deg));opacity:calc(1 - var(--k) * var(--k) * var(--k))}
.ph-js .ph-sh-site{--z:210;--k:var(--k0)}.ph-js .ph-sh-in{--z:140;--k:var(--k1)}.ph-js .ph-sh-pay{--z:70;--k:var(--k2)}.ph-js .ph-slip{--z:0;--k:0}
.ph-js .ph-steps .s1{--x:var(--x1)}.ph-js .ph-steps .s2{--x:var(--x2)}.ph-js .ph-steps .s3{--x:var(--x3)}
.ph-js .ph-steps b{color:color-mix(in srgb,var(--ink) calc(var(--x) * 100%),var(--mute))}
.ph-js .ph-steps li::before{content:"";position:absolute;inset:-1px 0 auto;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--x))}
@supports (animation-timeline:view()){
  .ph-js .ph-hero{animation:ph-p linear both;animation-timeline:view();animation-range:contain 0% contain 100%}
  .ph-js .ph-door{animation:ph-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
}
@keyframes ph-p{to{--p:1}}
@keyframes ph-rise{from{opacity:0;transform:translateY(56px)}}

/* why you might be here: the question is the headline, the link is the answer */
.ph-doors{padding:clamp(64px,11vh,120px) var(--gut) clamp(32px,6vh,64px)}
.ph-doors>h2{font:500 1.0625rem/1.4 var(--sans);color:var(--mute);margin:0 0 clamp(20px,4vh,36px)}
.ph-door{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:10px clamp(32px,6vw,96px);padding:clamp(24px,4vh,36px) 0;border-top:1px solid var(--line)}
.ph-door h3{grid-row:span 2;margin:0;font:500 clamp(1.75rem,3.4vw,3.25rem)/1.05 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.ph-door p{max-width:44ch;color:var(--mute)}
.ph-door a{justify-self:start;min-height:44px;display:inline-flex;align-items:center;font-weight:500;color:var(--accent);text-underline-offset:5px}
.ph-door a:hover{color:var(--ink)}

/* the questions on /help */
.ph-faq{border-top:1px solid var(--line2)}
.ph-faq details{border-bottom:1px solid var(--line)}
.ph-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:18px 0;min-height:56px;font-weight:500;font-size:1.125rem;list-style:none;transition:color .2s}
.ph-faq summary::-webkit-details-marker{display:none}
.ph-faq summary::after{content:"";flex:none;width:9px;height:9px;border:solid var(--mute);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .3s cubic-bezier(.3,.8,.2,1)}
.ph-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--accent)}
.ph-faq summary:hover{color:var(--accent)}
.ph-faq p{margin:0 0 20px;color:var(--mute);max-width:52ch}
.ph-more a{font-weight:500;color:var(--mute);text-underline-offset:5px}.ph-more a:hover{color:var(--accent)}

.ph-join{position:relative;overflow:clip;min-height:80svh;display:grid;align-content:center;gap:clamp(28px,5vh,48px);padding:clamp(64px,12vh,120px) var(--gut)}
.ph-join h2{font:500 clamp(2.75rem,7.4vw,7.5rem)/.96 var(--sans);letter-spacing:-.05em;max-width:15ch;text-wrap:balance}
.ph-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px var(--gut) 28px;border-top:1px solid var(--line);color:var(--mute)}
.ph-foot .ph-brand{color:var(--ink)}
.ph-foot nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:.9375rem}
.ph-foot nav a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;text-decoration:none;transition:color .2s}.ph-foot nav a:hover{color:var(--ink)}

/* help, privacy, terms */
.ph-doc{max-width:70ch;margin:auto;padding:136px var(--gut) 88px}
.ph-doc h1{font:500 clamp(3rem,8vw,5.5rem)/.98 var(--sans);letter-spacing:-.05em;margin:0 0 20px}
.ph-doc h2{font:550 1.5rem/1.2 var(--sans);letter-spacing:-.02em;margin:44px 0 10px}
.ph-doc p{margin:0 0 14px;color:var(--mute)}.ph-doc b{color:var(--ink);font-weight:550}
.ph-doc a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--accent)}
.ph-doc .ph-lede{max-width:none;margin-bottom:28px;font-size:1.25rem}
.ph-doc .ph-faq{margin-bottom:12px}

/* the close: the mark, big. Flat beams in the logo's own colours; between them a glass prism in CSS 3D, placed in the beams'
   1200x360 drawing (--u is one drawing unit; the drawing is cropped to fill, as the svg's "slice") */
.ph-mark3{position:relative;height:clamp(200px,30vw,380px);container-type:size;margin-inline:calc(var(--gut) * -1)}
.ph-beam{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ph-beam path{vector-effect:non-scaling-stroke}
.ph-beam .b-fan{transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-box:view-box;transform-origin:590px 200px;transform:rotate(var(--tilt,0deg))}
.ph-prism{--u:max(calc(100cqw / 1200),calc(100cqh / 360));position:absolute;left:calc(50% - 80 * var(--u));top:calc(50% + 36.7 * var(--u));width:0;height:0;perspective:calc(1100 * var(--u))}
.pz{position:absolute;transform-style:preserve-3d;transform:rotateY(-16deg) rotateX(7deg)}
.pz-f{position:absolute;width:calc(254 * var(--u));height:calc(110 * var(--u));left:calc(-127 * var(--u));top:calc(-55 * var(--u));border:1.5px solid rgb(238 242 248 / .5);background:rgb(238 242 248 / .04);transform:rotateZ(calc(var(--r) * 120deg)) translateY(calc(73.3 * var(--u))) rotateX(90deg)}
.pz-f:nth-child(1){--r:0}.pz-f:nth-child(2){--r:1}.pz-f:nth-child(3){--r:2}
.pz-cap{position:absolute;width:calc(254 * var(--u));height:calc(220 * var(--u));left:calc(-127 * var(--u));top:calc(-146.7 * var(--u));overflow:visible;fill:rgb(238 242 248 / .05);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.pz-cap.front{transform:translateZ(calc(55 * var(--u)))}
.pz-cap.back{transform:translateZ(calc(-55 * var(--u)));stroke-opacity:.35}
.ph-js .pz{animation:ph-turn 11s ease-in-out infinite alternate}
@keyframes ph-turn{from{transform:rotateY(-20deg) rotateX(9deg)}to{transform:rotateY(18deg) rotateX(-6deg)}}
.ph-js .ph-beam [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.ph-js .ph-prism{opacity:0;transition:opacity 1.2s .3s}
.ph-join[data-in] .ph-prism{opacity:1}
.ph-join[data-in] .ph-beam .b-in{animation:ph-draw .9s cubic-bezier(.4,0,.2,1) forwards}
.ph-join[data-in] .ph-beam .b-out{animation:ph-draw 1.2s .85s cubic-bezier(.2,.7,.2,1) forwards}
.ph-join[data-in] .ph-beam .b-out:nth-child(2){animation-delay:1s}.ph-join[data-in] .ph-beam .b-out:nth-child(3){animation-delay:1.15s}
@keyframes ph-draw{to{stroke-dashoffset:0}}

@media (max-width:900px){
  .ph-hero{grid-template-columns:minmax(0,1fr);padding-top:104px;gap:clamp(48px,8vh,72px)}
  .ph-say{padding-top:0}
  .ph-js .ph-say{position:static;height:auto;padding:104px 0 0}
  .ph-js .ph-hero{min-height:420svh;align-content:start;animation-range:contain 72svh contain 100%} /* one column: the stack only pins once the words have scrolled by */
  .ph-door{grid-template-columns:minmax(0,1fr)}
  .ph-door h3{grid-row:auto}
}
@media (max-width:760px){
  .ph-top{height:64px}
  .ph-nav{gap:4px}.ph-nav a[href='/help']{display:none}.ph-nav a[data-in]{padding:0 12px}
  .ph-h1{font-size:clamp(2.5rem,12.6vw,5rem);line-height:1.02}.ph-h1 span{white-space:normal;text-wrap:balance}
  .ph-hero{--w:min(400px,74vw)}
  .ph-slip{padding:22px 16px 26px;font-size:.75rem}
  .ph-sh:not(.ph-slip){padding:40px 16px 18px;gap:10px;font-size:.8125rem}
  .ph-tag{left:16px}
  .ph-sh-h{font-size:1.375rem}
  .ph-steps{grid-template-columns:minmax(0,1fr);gap:14px}
  /* moving: the three titles in a row, the line for the one in play under them */
  .ph-js .ph-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;width:100%}
  .ph-js .ph-steps li{display:contents}
  .ph-js .ph-steps b{position:relative;padding-top:12px;border-top:1px solid var(--line2);font-size:.875rem}
  .ph-js .ph-steps .s1 b{grid-area:1/1}.ph-js .ph-steps .s2 b{grid-area:1/2}.ph-js .ph-steps .s3 b{grid-area:1/3}
  .ph-js .ph-steps b::before{content:"";position:absolute;inset:-1px 0 auto;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--x))}
  .ph-js .ph-steps li::before{content:none}
  .ph-js .ph-steps li>span{grid-area:2/1/3/-1;opacity:clamp(0,(var(--x) - .5) * 5,1);font-size:.875rem} /* only one line at a time: two x can not both pass .5 */
  .ph-join{min-height:60svh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ph-beam .b-fan{transition:none}
}