/* PrintSpot app landing. The existing stylesheet still serves secondary pages. */
body.showcase { --paper:#f1f0f5; --surface:#fff; --ink:#17191e; --muted:#61646e; --rule:#e8e8ee; --blue:#255bea; --btn:#17191e; --btn-deep:#343842; --blue-soft:#ecf0ff; --radius:999px; background:var(--paper); color:var(--ink); overflow-x:clip; }
body.showcase::before { display:none; }
.showcase * { box-sizing:border-box; }
.showcase h1,.showcase h2,.showcase h3 { font-weight:700; letter-spacing:-.055em; line-height:1.12; }
.showcase h1 { font-size:clamp(38px,5.6vw,73px); }
.showcase h2 { font-size:clamp(31px,4vw,49px); }
.showcase p { line-height:1.65; }
.showcase a:focus-visible,.showcase button:focus-visible { outline:3px solid #255bea; outline-offset:4px; }
.showcase .wrap { max-width:1160px; padding-inline:28px; }
.showcase .site-shell { max-width:1350px; min-height:100vh; margin:24px auto; background:#fff; border-radius:23px; box-shadow:0 18px 55px #1a23570b; overflow:hidden; }
.showcase .site-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px; }
.showcase .brand { font-size:22px; letter-spacing:-.065em; }
.showcase .brand .mark { width:31px; height:31px; border-radius:8px; box-shadow:none; }
.showcase .brand-emphasis { color:var(--blue); }
.showcase .header-actions { display:flex; gap:13px; align-items:center; }
.showcase .lang-switch,.showcase .theme-toggle { border-color:#e8e8ee; background:#fff; }
.showcase .theme-toggle { width:36px; height:36px; }
.showcase .header-cta,.showcase .pill-link { background:#17191e; color:#fff; border-radius:999px; font-size:12px; font-weight:700; padding:11px 18px; white-space:nowrap; transition:transform .18s,background .18s; }
.showcase .header-cta:hover,.showcase .pill-link:hover { background:#255bea; transform:translateY(-2px); }
.showcase .hero { padding:36px 0 0; text-align:center; overflow:hidden; background:radial-gradient(circle at 47% 43%,#f7f4ec 0,transparent 37%),radial-gradient(circle at 85% 62%,#f0efff 0,transparent 34%),#fff; }
.showcase .hero-copy { position:relative; z-index:2; }
.showcase .eyebrow { display:inline-flex; border:1px solid #e8e8ee; border-radius:999px; padding:7px 14px; color:#424650; font-size:11px; letter-spacing:0; text-transform:none; font-weight:600; background:#fff; }
.showcase .eyebrow::before { display:none; }
.showcase .hero h1 { max-width:900px; margin:25px auto 15px; }
.showcase .hero p { color:#62646d; max-width:540px; margin:auto; font-size:16px; }
.showcase .store-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:26px; }
.showcase .store-link { display:inline-flex; align-items:center; gap:10px; background:#121318; color:#fff; padding:10px 17px; border-radius:999px; font-size:13px; font-weight:700; min-height:47px; }
.showcase .store-link svg { width:19px; height:19px; }
.showcase .store-link:hover { background:#255bea; }
.showcase .store-note { color:#777a83; font-size:12px; margin-top:12px; }
.showcase .hero-stage { height:520px; margin:10px auto 0; max-width:960px; position:relative; isolation:isolate; }
.showcase .hero-stage::before,.showcase .hero-stage::after { content:''; position:absolute; top:14%; width:36%; aspect-ratio:1; border:1px solid #e7e6ec; transform:rotate(45deg); z-index:-1; }
.showcase .hero-stage::before { left:5%; } .showcase .hero-stage::after { right:5%; }
.showcase .stage-glow { position:absolute; inset:auto 15% -120px; height:300px; background:radial-gradient(ellipse,#ebedff 5%,transparent 70%); z-index:-1; }
.showcase .hero-phone { position:absolute; width:262px; height:470px; left:50%; bottom:-13px; transform:translateX(-50%); border:7px solid #101115; border-radius:38px; background:#fff; overflow:hidden; box-shadow:0 18px 30px #10111523; }
.showcase .hero-phone::before { content:''; position:absolute; z-index:3; top:0; left:32%; width:36%; height:17px; border-radius:0 0 13px 13px; background:#101115; }
.showcase .hero-phone img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:fill; }
.showcase .float-note { position:absolute; border-radius:18px; background:#fff; border:1px solid #eeeef1; padding:14px 17px; box-shadow:0 12px 32px #1a235715; text-align:left; font-size:12px; font-weight:700; }
.showcase .float-note small { display:block; color:#777a83; font-size:11px; font-weight:500; margin-top:4px; }
.showcase .float-one { left:6%; top:35%; transform:rotate(-7deg); }
.showcase .float-two { right:6%; top:55%; transform:rotate(6deg); }
.showcase .float-note .status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#255bea; margin-right:7px; }
.showcase .section { padding-block:100px; }
.showcase .section-head { display:flex; justify-content:space-between; gap:35px; align-items:end; margin-bottom:36px; }
.showcase .section-head h2 { max-width:650px; }
.showcase .section-head p { max-width:320px; color:#62646d; font-size:14px; }
.showcase .section-kicker { color:#255bea; text-transform:uppercase; font-size:11px; letter-spacing:.16em; font-weight:800; margin-bottom:18px; }
.showcase .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.showcase .feature-card { position:relative; height:380px; border-radius:21px; overflow:hidden; padding:27px; background:#f0f0f4; }
.showcase .feature-card:nth-child(2) { background:#e7e3fa; }
.showcase .feature-card:nth-child(3) { background:#e6e9f5; }
.showcase .feature-card h3 { position:relative; z-index:1; max-width:210px; font-size:21px; }
.showcase .feature-card p { position:relative; z-index:1; color:#5b5e68; font-size:12px; margin-top:9px; max-width:190px; }
.showcase .feature-index { position:absolute; top:26px; right:25px; background:#17191e; color:#fff; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; }
.showcase .feature-image { position:absolute; width:75%; max-width:275px; bottom:-135px; right:-14px; border-radius:28px; box-shadow:0 12px 24px #141b2630; transform:rotate(-11deg); }
.showcase .feature-card:nth-child(2) .feature-image { transform:rotate(8deg); bottom:-120px; right:24px; }
.showcase .feature-card:nth-child(3) .feature-image { transform:rotate(-6deg); bottom:-130px; }
.showcase .steps-section { padding-top:32px; }
.showcase .steps-layout { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.showcase .steps-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:35px; }
.showcase .step-card { background:#f5f4f8; border-radius:16px; padding:21px; min-height:145px; }
.showcase .step-card:nth-child(2) { transform:translateY(27px); }
.showcase .step-card:nth-child(4) { transform:translateY(27px); }
.showcase .step-card span { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fff; color:#255bea; font-size:11px; font-weight:800; margin-bottom:15px; }
.showcase .step-card h3 { font-size:16px; margin-bottom:7px; }
.showcase .step-card p { color:#656875; font-size:12px; }
.showcase .steps-visual { position:relative; min-height:520px; display:grid; place-items:center; }
.showcase .steps-visual::before { content:''; position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:#f2f1fa; }
.showcase .steps-visual img { position:relative; height:495px; width:auto; filter:drop-shadow(0 15px 15px #17191e22); }
.showcase .trust-band { background:#f1f0f5; padding-block:72px; }
.showcase .trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.showcase .trust-grid article { border-right:1px solid #d9d9e2; padding-right:30px; }
.showcase .trust-grid article:last-child { border:0; }
.showcase .trust-grid strong { display:block; font-size:20px; letter-spacing:-.04em; }
.showcase .trust-grid p { color:#686b75; font-size:13px; margin-top:10px; }
.showcase .download-banner { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:365px; border-radius:22px; overflow:hidden; background:#f0eff5; }
.showcase .download-copy { padding:50px; }
.showcase .download-copy p { color:#666975; font-size:14px; margin-top:14px; }
.showcase .download-copy .store-actions { justify-content:start; }
.showcase .download-visual { position:relative; height:365px; overflow:hidden; }
.showcase .download-visual img { position:absolute; height:490px; width:auto; right:14%; top:35px; transform:rotate(-15deg); filter:drop-shadow(0 20px 18px #1a1b252b); }
.showcase .resources { display:flex; flex-wrap:wrap; gap:22px; margin-top:25px; font-size:13px; font-weight:700; }
.showcase .resources a { text-decoration:underline; text-underline-offset:4px; }
.showcase .faq { margin:0; max-width:none; }
.showcase .faq details { border-bottom:1px solid #e4e4ea; }
.showcase .faq summary { cursor:pointer; padding:20px 0; font-weight:700; font-size:14px; }
.showcase .faq details p { padding:0 0 20px; color:#61646e; font-size:13px; }
.showcase .footer { border-top:1px solid #ececf0; padding:30px 0; }
.showcase .footer-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.showcase .footer-links { display:flex; flex-wrap:wrap; gap:18px; font-size:12px; color:#62646d; }
.showcase .copyright { font-size:11px; color:#797b84; }
@media(max-width:800px) { .showcase .site-shell { margin:0; border-radius:0; } .showcase .section { padding-block:72px; } .showcase .section-head,.showcase .steps-layout { display:block; } .showcase .section-head p { margin-top:17px; } .showcase .feature-grid { gap:10px; } .showcase .feature-card { height:310px; padding:19px; } .showcase .feature-card h3 { font-size:17px; } .showcase .feature-image { width:100%; bottom:-95px; } .showcase .steps-visual { margin-top:45px; min-height:410px; } .showcase .steps-visual img { height:390px; } .showcase .download-copy { padding:32px; } }
@media(max-width:560px) { .showcase .wrap { padding-inline:20px; } .showcase .header-cta { display:none; } .showcase .site-header { min-height:64px; } .showcase .hero { padding-top:43px; } .showcase .hero h1 { margin-top:24px; } .showcase .hero p { font-size:14px; } .showcase .hero-stage { height:420px; } .showcase .hero-phone { width:220px; height:395px; } .showcase .float-note { font-size:10px; padding:10px 12px; } .showcase .float-one { left:0; top:41%; } .showcase .float-two { right:0; top:64%; } .showcase .hero-stage::before,.showcase .hero-stage::after { width:70%; } .showcase .feature-grid { grid-template-columns:1fr; gap:14px; } .showcase .feature-card { height:310px; } .showcase .feature-card h3 { font-size:23px; } .showcase .feature-image { max-width:235px; bottom:-155px; right:8%; } .showcase .feature-card:nth-child(2) .feature-image { bottom:-145px; } .showcase .steps-list { gap:9px; } .showcase .step-card { min-height:160px; padding:16px; } .showcase .step-card h3 { font-size:14px; } .showcase .trust-grid { grid-template-columns:1fr; gap:20px; } .showcase .trust-grid article { border-right:0; border-bottom:1px solid #d9d9e2; padding-bottom:20px; } .showcase .download-banner { display:block; } .showcase .download-visual { height:260px; } .showcase .download-visual img { height:340px; right:20%; top:10px; } .showcase .footer-inner { display:block; } .showcase .footer-links { margin:24px 0; } }
@media(prefers-reduced-motion:reduce) { .showcase *, .showcase *::before, .showcase *::after { scroll-behavior:auto; transition:none!important; } }
/* Real app screens sit inside one device frame, without the promotional
   headline and second phone baked into the source screenshots. */
.showcase .feature-phone,.showcase .steps-phone,.showcase .download-phone { position:absolute; overflow:hidden; background:#fff; border:7px solid #111318; border-radius:29px; box-shadow:0 16px 28px #141b2630; }
.showcase .feature-phone { width:210px; height:350px; right:10%; bottom:-130px; transform:rotate(-9deg); }
.showcase .feature-card:nth-child(2) .feature-phone { right:9%; transform:rotate(7deg); }
.showcase .feature-card:nth-child(3) .feature-phone { right:8%; transform:rotate(-6deg); }
.showcase .feature-phone img,.showcase .steps-phone img,.showcase .download-phone img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:fill; transform:none; filter:none; border-radius:0; }
.showcase .steps-phone { position:relative; width:258px; height:460px; }
.showcase .download-phone { width:235px; height:420px; right:21%; top:10px; transform:rotate(-13deg); }
@media(max-width:800px) { .showcase .feature-phone { width:155px; height:270px; right:3%; bottom:-115px; } .showcase .steps-phone { width:225px; height:405px; } }
@media(max-width:560px) { .showcase .feature-phone { width:190px; height:315px; right:7%; bottom:-155px; } .showcase .download-phone { width:190px; height:340px; right:18%; top:5px; } }
.showcase .header-cta { background:#255bea; min-height:43px; display:inline-flex; align-items:center; }
.showcase .header-cta:hover { background:#1849d2; }
.showcase .store-link { background:#255bea; min-height:55px; padding:13px 23px; font-size:14px; }
.showcase .store-link:hover { background:#1849d2; }
.showcase .store-link .play-mark { width:24px; height:24px; flex:none; }
.showcase .download-phone img.actual-screen { width:100%; height:100%; left:0; top:0; object-fit:fill; }