/* Shared demo-creator portfolio styles (examples.html and the homepage demo). */
.av{position:relative;width:64px;height:64px;border-radius:50%;border:2px solid var(--a);overflow:hidden;flex-shrink:0;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;color:var(--t);font-size:20px}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dp{margin:0 0 72px;scroll-margin-top:90px;padding-bottom:44px;border:1px solid var(--border)}
.dp-banner{border:0;border-bottom:1px solid var(--border)}
.dp-banner{position:relative;aspect-ratio:16/5;background:linear-gradient(120deg,var(--surface-2),var(--a));overflow:hidden;border:1px solid var(--border)}
.dp-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dp-head{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;margin:-52px 0 0;padding:0 28px;position:relative;z-index:2}
.dp-head .av{width:112px;height:112px;font-size:34px;border-width:3px;background:var(--void)}
.dp-id{flex:1;min-width:240px;padding-top:62px}
.dp-name{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1.05;color:var(--white);letter-spacing:-.02em}
.dp-sub{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--t);margin-top:8px}
.dp-tag{font-size:18px;color:var(--white);margin-top:10px}
.demo-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);border:1px solid var(--a);padding:6px 10px;margin:0 0 12px;background:var(--surface)}
.dp-body{padding:30px 28px 0}
.dp-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.dp-pill{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--a);color:var(--white);padding:5px 10px}
.dp-about{max-width:760px;color:var(--white-dim);font-size:16.5px;line-height:1.75}
.dp-aud{max-width:760px;color:var(--muted);font-size:14.5px;margin-top:14px}
.dp-aud b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);margin-right:8px}
.dp-blk{border-top:1px solid var(--border);margin-top:30px;padding-top:24px}
.dp-lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;margin:0 0 14px}
.dp-lab:before{content:"";width:10px;height:2px;background:var(--a)}
.dp-lab em{font-style:normal;color:var(--t);margin-left:6px}
.dp-g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.plat{background:var(--surface);border:1px solid var(--border);padding:16px 18px}
.plat b{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--white)}
.plat span{display:block;color:var(--white);font-size:14px;margin-top:6px}
.plat i{display:block;font-style:normal;color:var(--muted);font-size:13.5px;margin-top:4px}
.proj{background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column}
.proj-ph{position:relative;aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--surface-2) 0 14px,var(--surface) 14px 28px);border-bottom:1px solid var(--border);display:flex;align-items:flex-end;padding:12px}
.proj-ph span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);border:1px solid var(--a);padding:4px 8px;background:var(--surface)}
.proj-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.proj-b h4{font-family:var(--display);font-weight:700;font-size:18px;color:var(--white);line-height:1.2}
.proj-f{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t)}
.proj-b p{color:var(--white-dim);font-size:14.5px;line-height:1.6}
.proj-b small{color:var(--muted);font-size:13px;line-height:1.55}
.proj-b small b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.pkg{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--a);padding:20px;display:flex;flex-direction:column;gap:12px}
.pkg h4{font-family:var(--display);font-weight:700;font-size:19px;color:var(--white)}
.pkg-price{font-family:var(--display);font-weight:800;font-size:30px;color:var(--t);line-height:1}
.pkg-price i{font-style:normal;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.pkg dl{display:grid;gap:10px;margin:0}
.pkg dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pkg dd{margin:2px 0 0;color:var(--white-dim);font-size:14.5px;line-height:1.55}
.dp-btn{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;background:transparent;color:var(--white);border:1px solid var(--border-hi);cursor:pointer;align-self:flex-start;margin-top:auto}
.dp-btn:hover{border-color:var(--a)}
.dp-btn.solid{background:var(--accent);border-color:var(--accent);color:var(--cta-t,#fff)}
.dp-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--white);border-left:2px solid var(--a);padding:8px 12px;margin-top:4px;display:none;background:var(--surface)}
.dp-note.show{display:block}
.dp-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.dp-two p{color:var(--dim);font-size:15px;line-height:1.7}
.dp-cap{font-size:17px;color:var(--white);border-left:2px solid var(--a);padding:4px 0 4px 16px;max-width:620px;font-style:italic}
.dp-foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-top:30px;padding-top:22px;border-top:1px solid var(--border)}
.dp-foot small{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted)}
@media(max-width:720px){.dp-head{padding:0 16px}.dp-body{padding:26px 16px 0}.dp-banner{aspect-ratio:16/8}.dp-head .av{width:88px;height:88px;font-size:26px}.dp-id{padding-top:46px}}

.dp-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.dp-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.dp-card{border:1px solid var(--border);background:var(--surface);padding:20px}
.dp-kv{margin:0 0 16px}
.dp-kv>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
.dp-kv dt{color:var(--muted)}
.dp-kv dd{margin:0;color:var(--white);text-align:right}
.dp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px}
.dp-card .dp-btn{width:100%;text-align:center}
.dp-fine{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:12px;line-height:1.6}
.dp-card .dp-kv:last-of-type{margin-bottom:0}
@media(max-width:900px){.dp-cols{grid-template-columns:1fr}.dp-side{position:static}}

.dp-card .dp-kv+.dp-fine.dp-prod{margin:-4px 0 20px;line-height:1.7}
.dp-card .dp-btn{margin:0;padding:15px 14px;letter-spacing:.1em;line-height:1.5;font-size:12px}
.dp-card .dp-btn+.dp-fine{margin-top:18px}

.dp-dot.sel{background:var(--yellow,#FFD60A)}
.dp-card .dp-kv+.dp-fine.dp-prod{margin:18px 0 22px}
.dp-aud-kv,.dp-addons{max-width:760px}
.dp-addons dt small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.dp-addons>div{align-items:flex-start}
.dp-addons dd{white-space:nowrap}