/* showcase.css: page-specific layout for /apps and /work pages. Loaded after yd.css. Prefix sc- */
main .wrap{min-width:0}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.sc-chips li{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);border-radius:99px;padding:6px 12px;background:transparent}
/* phones */
.sc-phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,44px);flex-wrap:wrap;padding:clamp(26px,4vw,48px) 0 6px}
.sc-phones figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(30%,240px);min-width:150px}
.sc-phones figure:nth-child(2){margin-bottom:34px}
.sc-ipw{container-type:inline-size;width:100%}
.sc-ip{position:relative;width:100%;aspect-ratio:9/19.5;padding:2.5cqw;background:#030304;border-radius:15cqw;box-shadow:0 0 0 .8cqw #8d8d94,0 0 0 1.1cqw #2b2b30,0 7cqw 9cqw -4cqw #000a}
.sc-ip::before{content:"";position:absolute;top:3.3cqw;left:50%;width:29cqw;height:8.4cqw;margin-left:-14.5cqw;background:#000;border-radius:5cqw;z-index:2}
.sc-ip img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12.4cqw;display:block;background:#fff}
.sc-phones figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--muted);max-width:26ch;line-height:1.4}
.sc-cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted);margin:26px 0 0;text-align:center}
.sc-cap a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.sc-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.sc-photos figure{margin:0}.sc-photos img{width:100%;height:auto;border:1px solid var(--ink);display:block}
.sc-photos figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--muted);margin-top:8px}
.sc-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,230px);gap:clamp(16px,3vw,40px);align-items:end}
@media(max-width:700px){.sc-photos{grid-template-columns:1fr}.sc-duo{grid-template-columns:minmax(0,1fr) 34%;gap:12px}.sc-phones figure{width:42%;min-width:130px}.sc-phones figure:nth-child(2){margin-bottom:0}}
/* browser frame */
.sc-br{border:1px solid var(--ink);background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -34px #000a}
.sc-br .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg2)}
.sc-br .bar i{width:9px;height:9px;border-radius:50%;background:#12121240;flex:none}
.sc-br .bar span{margin-left:8px;font-family:var(--mono);font-size:.66rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-br img{width:100%;height:auto;display:block}
.sc-duo .sc-ipw{width:100%}
/* trio: problem / did / result */
.sc-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--ink);background:#fff}
.sc-trio>div{padding:clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
.sc-trio>div:first-child{border-left:0}
.sc-trio .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}
.sc-trio h3{font-size:1.5rem;margin-bottom:12px}
.sc-trio p{margin:0;font-size:1rem;color:#2a2823;line-height:1.55}
.sc-trio .res{background:var(--ink);color:var(--bg);border-left:0}
.sc-trio .res p{color:#e8e2d6}.sc-trio .res .k{color:#aeb6ff}
@media(max-width:860px){.sc-trio{grid-template-columns:1fr}.sc-trio>div{border-left:0;border-top:1px solid var(--line)}.sc-trio>div:first-child{border-top:0}}
/* lead statement */
.sc-lead{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15;max-width:34ch;margin:0 0 30px;letter-spacing:-.01em}
.sc-lead em{color:var(--accent)}
/* stats */
.sc-stats b.t{font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.05;letter-spacing:-.04em}
.sc-stats span small{display:block;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.82rem;margin-top:6px;color:var(--muted)}
.sc-stats b+span{display:block;margin-top:8px;line-height:1.45}
.sc-stats div{min-width:0}
@media(max-width:700px){.sc-stats div{padding:18px 0}}
/* checklist */
.sc-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,60px)}
.sc-check li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;border-top:1px solid var(--line);padding:18px 0}
.sc-check li:before{content:"\2713";font-family:var(--mono);color:#fff;background:var(--accent);width:24px;height:24px;display:grid;place-items:center;font-size:.8rem;margin-top:2px}
.sc-check h3{font-size:1.2rem;margin-bottom:4px}
.sc-check p{margin:0;color:#2a2823;font-size:.97rem;line-height:1.5}
@media(max-width:760px){.sc-check{grid-template-columns:1fr}}
.sc-scope{margin-top:26px;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.sc-scope a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
/* steps */
.sc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.sc-steps>div{border-top:2px solid var(--ink);padding-top:16px}
.sc-steps .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--accent)}
.sc-steps h3{font-size:1.5rem;margin:8px 0}
.sc-steps p{margin:0;color:#2a2823;font-size:1rem}
@media(max-width:760px){.sc-steps{grid-template-columns:1fr}}
/* who it is for */
.sc-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.sc-two p{color:#2a2823;font-size:1.05rem;margin:0 0 14px}
@media(max-width:800px){.sc-two{grid-template-columns:1fr}}
.sc-rows .r{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;border-top:1px solid var(--line);padding:18px 0}
.sc-rows .r:last-child{border-bottom:1px solid var(--line)}
.sc-rows .r b{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.sc-rows .r p{margin:0;color:#2a2823}
@media(max-width:600px){.sc-rows .r{grid-template-columns:1fr;gap:6px}}
/* pull quote */
.sc-pq{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.01em;margin:0 0 22px;max-width:24ch}
.sc-pq em{color:var(--accent)}
.sc-by{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:26px}
.sc-by b{font-weight:500;color:var(--accent)}
.sc-rev{columns:2;column-gap:clamp(24px,4vw,56px);color:#2a2823;font-size:1rem}
.sc-rev p{margin:0 0 12px;break-inside:avoid-column}
.sc-rev-more{margin-top:18px}.sc-rev-more summary{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);cursor:pointer}
@media(max-width:760px){.sc-rev{columns:1}}
/* next */
.sc-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.sc-next a{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid var(--ink);background:#fff;padding:12px 12px 16px;color:var(--ink);transition:background .2s,color .2s}
.sc-next a:hover{background:var(--ink);color:var(--bg)}
.sc-next img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid var(--line);display:block}
.sc-next .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.sc-next a:hover .k{color:#aeb6ff}
.sc-next .t{font-size:1.4rem;font-weight:800;letter-spacing:-.03em}
.sc-next .d{font-size:.92rem;opacity:.85}
/* work hub list */
.sc-list{border-top:1px solid var(--ink)}
.sc-list a{display:grid;grid-template-columns:48px minmax(0,1.25fr) minmax(0,1fr) minmax(160px,.7fr);gap:clamp(14px,2.4vw,34px);align-items:center;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);padding:22px 0;transition:background .25s,color .25s,padding .25s}
.sc-list a:hover{background:var(--ink);color:var(--bg);padding-left:16px;padding-right:16px}
.sc-list .no{font-family:var(--mono);font-size:.72rem;color:var(--accent);align-self:start;padding-top:10px}
.sc-list a:hover .no{color:#aeb6ff}
.sc-list .nm{font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.05em;line-height:.98;display:block}
.sc-list .tr{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:10px;opacity:.75}
.sc-list .rs{font-size:1rem;line-height:1.45;color:#2a2823}
.sc-list a:hover .rs{color:#e8e2d6}
.sc-list .go{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:10px;color:var(--accent)}
.sc-list a:hover .go{color:#aeb6ff}
.sc-list img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid var(--line);display:block}
@media(max-width:900px){.sc-list a{grid-template-columns:34px minmax(0,1fr);}.sc-list .rs,.sc-list img{grid-column:2}.sc-list img{max-width:420px}}
@media(max-width:600px){.sc-list a:hover{padding-left:0;padding-right:0}}
/* groups (work hub) */
.sc-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sc-groups>div{border:1px solid var(--ink);background:#fff;padding:24px}
.sc-groups h3{font-size:1.5rem;margin-bottom:6px}
.sc-groups p{margin:0 0 14px;color:#2a2823;font-size:.97rem}
.sc-groups ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sc-groups li a{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
@media(max-width:860px){.sc-groups{grid-template-columns:1fr}}
/* app cards (apps hub) */
.sc-apps{display:grid;gap:0;border-top:1px solid var(--ink)}
.sc-app{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:clamp(20px,4vw,60px);padding:clamp(26px,4vw,48px) 0;border-bottom:1px solid var(--line);align-items:center}
.sc-app .ph{background:var(--bg2);display:flex;justify-content:center;padding:26px 24px}
.sc-app .ph .sc-ipw{width:100%}
.sc-app .kk{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sc-app h3{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.05em;margin:8px 0 12px}
.sc-app p{margin:0 0 14px;font-size:1.08rem;color:#2a2823;max-width:52ch}
.sc-app ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:6px;font-size:.98rem}
.sc-app li:before{content:"+ ";font-family:var(--mono);color:var(--accent)}
.sc-app .acts{display:flex;flex-wrap:wrap;gap:10px}
.sc-app .acts .btn{padding:12px 18px}
.sc-app .prc{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:14px}
@media(max-width:700px){.sc-app{grid-template-columns:1fr}.sc-app .ph{padding:22px 0}.sc-app .ph .sc-ipw{width:min(60%,210px)}}
.sc-band{background:var(--ink);color:var(--bg);padding:clamp(26px,4vw,48px)}
.sc-band .k-sub{color:#cfc8ba}
.sc-faq{max-width:820px}
.sc-faq details{border-top:1px solid var(--line);padding:16px 0}
.sc-faq details:last-child{border-bottom:1px solid var(--line)}
.sc-faq summary{font-weight:800;letter-spacing:-.02em;cursor:pointer;list-style:none;font-size:1.1rem;display:flex;justify-content:space-between;align-items:center;gap:14px}
.sc-faq summary::-webkit-details-marker{display:none}
.sc-faq details p{color:var(--muted);margin:10px 0 0;max-width:68ch}
.sc-hint{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--muted);margin-top:18px}
.sc-hint a{color:var(--accent)}
/* App Store badge (official artwork, unaltered) */
.sc-store{display:inline-block;line-height:0;vertical-align:middle;transition:transform .2s,opacity .2s}
.sc-store img{height:50px;width:auto;display:block}
.sc-store:hover{opacity:.88;transform:translateY(-2px)}
.sc-or{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin:0 14px}
.cta-band .sc-store{margin-top:4px}
.hero .cta{align-items:center}
@media(max-width:560px){.sc-or{display:block;margin:12px 0}.hero .cta .sc-store{margin-right:0}}
/* browser frame for website / web app screenshots */
.sc-browser{border:1px solid var(--ink);background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.45);max-width:980px;margin:6px auto 0}
.sc-browser .sc-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.sc-browser .sc-bar i{width:10px;height:10px;border-radius:50%;background:#12121240}
.sc-browser .sc-bar span{margin-left:10px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);background:#fff;border:1px solid var(--line);padding:3px 12px;border-radius:99px}
.sc-browser img{width:100%;height:auto;display:block}
.sc-br video{width:100%;height:auto;display:block;background:#2d2926}