/* Piecepass landing: the app's Archiv palette. Legal pages keep piecepass.css. */
:root{color-scheme:light;--paper:#f9f8f2;--ink:#121212;--muted:#5e5552;--sand:#e2d9d1;--blush:#d0c1bd;--accent:#334fb4;--rule:#b9b4ac;--serif:"New York",ui-serif,Georgia,"Times New Roman",serif;--mono:ui-monospace,"SF Mono",Menlo,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6}a{color:inherit;text-underline-offset:5px}button,summary,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:6px}img{display:block;max-width:100%;height:auto}figure{margin:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400;line-height:1.05}h1{font-size:clamp(58px,6.8vw,102px);letter-spacing:-.055em}h2{font-size:clamp(38px,4.5vw,66px);letter-spacing:-.045em}h3{font-size:30px;letter-spacing:-.025em}em{font-weight:400}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.meta{font:11px/1.7 var(--mono);letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}.skip{position:absolute;top:-100px;left:16px;background:var(--ink);color:var(--paper);padding:12px;z-index:10}.skip:focus{top:12px}.topbar{min-height:106px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--rule)}.wordmark{font-size:38px;letter-spacing:-1.8px;text-decoration:none;line-height:1}.nav-right{display:flex;gap:32px;align-items:center}.nav-right a{min-height:44px;display:flex;align-items:center}.nav-right .language{font:12px var(--mono)}.text-link{font-style:italic}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;padding-block:76px 68px}.hero .meta{margin-bottom:25px}.hero h1 em{color:var(--accent)}.hero-copy>.intro{max-width:490px;font-size:21px;line-height:1.55;margin:30px 0}.cta{display:inline-flex;justify-content:center;align-items:center;gap:30px;background:var(--blush);color:var(--ink);text-decoration:none;min-height:54px;padding:15px 23px;font:12px/1.6 var(--mono);letter-spacing:1.1px;text-transform:uppercase;border:1px solid var(--ink)}.cta:hover{background:var(--ink);color:var(--paper)}.hero-copy .availability{margin-top:15px;font:11px/1.7 var(--mono);color:var(--muted)}.hero-stage{background:var(--sand);padding:32px;position:relative;display:grid;grid-template-columns:.85fr 1fr;gap:20px;align-items:center}.hero-stage .original{align-self:start;margin-top:40px}.hero-stage .original img{width:100%;height:auto;object-fit:contain}.hero-stage figcaption{margin-top:14px}.screen{width:100%;border:1px solid #b9b4ac;background:var(--paper)}.hero-stage .screen{max-height:480px;width:auto;justify-self:end}.stage-arrow{font-size:35px;color:var(--accent);margin-top:22px}.hero-stage>.stage-note{grid-column:1/-1;border-top:1px solid #a89d95;padding-top:16px;display:flex;justify-content:space-between;gap:12px}.promise-strip{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:24px 0}.promise-strip span{font:11px/1.6 var(--mono);letter-spacing:1px;text-transform:uppercase}.section{padding-block:100px}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:50px}.section-head .meta{margin-bottom:20px}.section-head>p{max-width:430px;color:var(--muted);font-size:20px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.step{border-top:1px solid var(--ink);padding-top:20px}.step .number{font:12px var(--mono);color:var(--muted);display:block;margin-bottom:30px}.step h3{margin-bottom:18px}.step p{color:var(--muted);font-size:18px}.feature-band{background:var(--sand)}.feature{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding-block:84px}.feature+.feature{border-top:1px solid #a89d95}.feature-copy .meta{margin-bottom:24px}.feature-copy h2{max-width:510px}.feature-copy>p:not(.meta){margin-top:24px;color:var(--muted);font-size:20px}.feature-copy .text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:24px}.feature-visual{display:flex;justify-content:center;align-items:center;gap:24px;padding:24px;background:#f1ece5}.feature-visual .screen{max-width:255px;max-height:560px;width:auto;height:auto}.feature-visual.share-visual{background:#d0dbe0}.share-visual .screen{max-width:310px}.note{border-top:1px solid var(--rule);margin-top:28px;padding-top:18px;font:12px/1.8 var(--mono);color:var(--muted)}.photo-story{display:grid;grid-template-columns:1fr 1.05fr;gap:90px;align-items:center}.photo-story>figure{background:#ede8df;padding:32px;display:grid;justify-items:center}.photo-story .screen{width:100%;max-width:260px;aspect-ratio:auto;object-fit:contain}.photo-story h2{margin:24px 0}.photo-story p:not(.meta){color:var(--muted);font-size:20px}.photo-caption{margin-top:12px}.starter{border-top:1px solid var(--rule);padding-top:55px;display:grid;grid-template-columns:180px 1fr;gap:50px;align-items:center;margin-top:80px}.starter img{width:180px}.starter h3{margin:12px 0}.starter p:not(.meta){color:var(--muted);max-width:700px}.privacy{display:grid;grid-template-columns:1fr 1fr;gap:100px;border-block:1px solid var(--rule);padding-block:64px}.privacy .meta{margin-bottom:20px}.privacy h2{font-size:clamp(36px,4vw,55px)}.privacy p:not(.meta){color:var(--muted);font-size:20px}.privacy a{display:inline-flex;min-height:44px;align-items:center;margin-top:18px;font-style:italic}.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.faq .meta{margin-bottom:22px}.faq details{border-top:1px solid var(--rule)}.faq details:last-child{border-bottom:1px solid var(--rule)}.faq summary{cursor:pointer;list-style:none;position:relative;padding:24px 34px 24px 0;font-size:21px;line-height:1.4}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';position:absolute;right:4px;top:22px;font-family:var(--mono)}.faq details[open] summary::after{content:'−'}.faq details p{padding:0 25px 25px 0;color:var(--muted);font-size:18px}.final{background:var(--blush);text-align:center;padding:74px 24px;margin-bottom:60px}.final h2{font-size:clamp(45px,6vw,80px);margin:24px auto;max-width:800px}.final>p:not(.meta){color:#49403d;max-width:540px;margin:0 auto 28px}.final .availability{font:12px/1.8 var(--mono);margin-top:18px}.footer{border-top:1px solid var(--rule);padding-block:30px 40px;display:flex;justify-content:space-between;gap:30px;align-items:center}.maker img{width:144px;height:auto}.footer nav{display:flex;flex-wrap:wrap;gap:24px}.footer nav a{min-height:44px;display:flex;align-items:center;font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:1px}.footer .copyright{font:10px var(--mono);color:var(--muted)}
@media(min-width:1500px){.hero{gap:80px;padding-block:100px}.hero-stage{padding:40px}}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.hero{gap:32px}.hero-stage{padding:20px;gap:12px;grid-template-columns:.7fr 1fr}.hero-stage .original{margin-top:25px}.hero-copy>.intro{font-size:19px}.feature,.photo-story,.privacy,.faq{gap:45px}.section{padding-block:72px}.section-head{gap:30px}.steps{gap:25px}.promise-strip{flex-wrap:wrap}.feature{padding-block:60px}}
@media(max-width:650px){.wrap{width:calc(100% - 40px)}.topbar{min-height:85px}.wordmark{font-size:32px}.nav-right{gap:18px}.nav-right .text-link{display:none}.hero{grid-template-columns:1fr;padding-block:44px;gap:38px}.hero h1{font-size:clamp(58px,12vw,80px)}.hero-copy>.intro{font-size:20px;margin-block:24px}.hero-stage{padding:25px;gap:18px;grid-template-columns:.9fr 1fr}.hero-stage .screen{max-height:420px}.hero-stage .original{margin-top:34px}.hero-stage figcaption{font-size:9px;letter-spacing:1px}.hero-stage>.stage-note{font-size:9px}.promise-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:22px}.promise-strip span{font-size:10px}.section{padding-block:60px}.section-head,.steps,.feature,.photo-story,.privacy,.faq{grid-template-columns:1fr;gap:32px}.section-head{margin-bottom:35px}.section-head>p{font-size:19px}.steps{gap:32px}.step .number{margin-bottom:20px}.feature{padding-block:52px}.feature-copy>p:not(.meta){font-size:19px}.feature-visual{padding:25px}.feature-visual .screen{max-width:250px;width:100%}.feature.reverse .feature-copy{order:0}.feature.reverse .feature-visual{order:1}.photo-story>figure{order:1}.photo-story>div{order:0}.starter{grid-template-columns:90px 1fr;gap:20px;margin-top:50px;padding-top:35px;align-items:start}.starter img{width:90px}.starter h3{font-size:27px}.starter .meta{font-size:10px;letter-spacing:1px}.starter p:not(.meta){font-size:17px}.privacy{padding-block:45px;gap:25px}.privacy p:not(.meta){font-size:19px}.faq{gap:30px}.faq summary{font-size:20px}.final{padding:52px 22px;margin-bottom:35px}.footer{align-items:flex-start;flex-direction:column;gap:16px}.footer nav{gap:10px 20px}.footer .copyright{line-height:1.6}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.demo-section{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.demo-section h2{margin:24px 0}.demo-section>div>p:not(.meta){color:var(--muted);font-size:20px}.demo-board{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;aspect-ratio:1;background:var(--sand);padding:3px}.demo-tile{border:0;cursor:pointer;background-image:url('/piecepass/assets/photo.webp');background-size:300% 300%;background-position:calc(var(--x)*50%) calc(var(--y)*50%);min-width:44px;min-height:44px}.demo-tile[aria-pressed=true]{outline:4px solid var(--accent);outline-offset:-4px;filter:brightness(.8)}.demo-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:15px;font:12px/1.6 var(--mono)}.demo-tools button{min-height:44px;padding:10px 16px;background:transparent;color:var(--ink);border:1px solid var(--ink);font:inherit;cursor:pointer}.demo-tools button:hover{background:var(--sand)}@media(max-width:900px){.demo-section{gap:45px}}@media(max-width:650px){.demo-section{grid-template-columns:1fr;gap:30px}}

.archive-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.archive-features article{border-top:1px solid var(--ink);padding-top:20px}.archive-features h3{margin:20px 0 18px}.archive-features article>p{color:var(--muted);font-size:18px}.archive-features .meta{display:block}
@media(max-width:900px){.archive-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
@media(max-width:650px){.archive-features{grid-template-columns:1fr;gap:32px}}