/* ───────── CAPABILITIES — the deal ─────────
   Static (no JS / reduced motion): heading, then the cards in a grid.
   Motion: pinned stage; playing-card-shaped cards share one pivot at their
   bottom edge. Each card is dealt into the top slot, the rosette turns 45°
   left for the next, and the finished flower spins once. capabilities.js drives it.
   Everything inside a card is sized in em so the card scales as one piece. */
.caps { padding: 168px var(--pad-x); border-top: 1px solid var(--border-subtle); }
.caps__head { max-width: 760px; margin-bottom: 72px; }
.caps__head h2 { font-size: clamp(40px, 5.2vw, 76px); letter-spacing: -.045em; line-height: .98; }
.caps__head .lede { margin-top: 22px; color: var(--text-2); font-size: clamp(17px, 1.35vw, 20px); }

.caps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cap {
    position: relative; display: flex; flex-direction: column;
    aspect-ratio: 5 / 7; padding: 1.1em; border-radius: 1.3em;
    background: var(--bg-surface); border: 1px solid var(--border-default);
    color: var(--text-1); font-size: 14px;
}
.cap__art { flex: 1; min-height: 9em; display: grid; place-items: center; padding: 1em; border-radius: .9em; background: var(--bg-input); border: 1px solid var(--border-subtle); overflow: hidden; }
.cap__body { margin-top: 1.1em; }
.cap__title { display: flex; align-items: center; gap: .5em; font-size: 1.45em; letter-spacing: -.02em; line-height: 1.15; }
.cap__ic { flex: none; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: .38em; background: var(--accent); color: var(--on-accent); }
.cap__ic .ic { width: .8em; height: .8em; }
.cap__text { margin-top: .6em; color: var(--text-2); font-size: 1.02em; line-height: 1.45; }
.cap__with { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .8em; }
.cap__with .chip { height: 1.75em; padding: 0 .65em; font-size: .8em; color: var(--text-2); border-color: var(--border-subtle); }
.cap__with-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.caps__core, .caps__end { display: none; }

/* ───────── Card scenes ───────── */
.art { width: 100%; font-size: .86em; line-height: 1.3; }
.art .ic { width: 1.2em; height: 1.2em; }
.art__pill { display: inline-flex; align-items: center; gap: .3em; height: 1.9em; padding: 0 .65em; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok-fg); font: normal 600 .8em/1 var(--sans); white-space: nowrap; }
.art__pill .ic { width: 1em; height: 1em; }
.art__pill--solid { background: var(--accent); color: var(--on-accent); }

.art--mail { display: grid; gap: .5em; }
.art__row { display: flex; align-items: center; gap: .6em; min-width: 0; padding: .55em .6em; border-radius: .75em; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.art__row:not(.is-on) { opacity: .6; }
.art__row.is-on { border-color: var(--border-default); }
.art__av { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--bg-active); font: normal 600 .78em/1 var(--sans); }
.art__lines { flex: 1; min-width: 0; display: grid; }
.art__lines > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art__lines span { color: var(--text-2); font-size: .88em; }

.art--files { position: relative; display: flex; justify-content: center; align-items: center; min-height: 10.5em; padding-bottom: 2.4em; }
.art__file { display: flex; flex-direction: column; justify-content: space-between; width: 5em; height: 6.4em; margin: 0 -.15em; padding: .7em; border-radius: .6em; background: var(--bg-surface); border: 1px solid var(--border-default); box-shadow: 0 .6em 1.2em -.6em rgba(0, 0, 0, .6); rotate: calc((var(--k) - 1) * 9deg); translate: 0 calc((var(--k) - 1) * (var(--k) - 1) * .5em); }
.art__file:nth-child(2) { z-index: 1; }
.art__file .ic { color: var(--text-2); width: 1.4em; height: 1.4em; }
.art__file b { font-size: .78em; letter-spacing: .02em; }
.art--files .art__pill { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 2; }

.art--web { display: grid; gap: .55em; }
.art__search { display: flex; align-items: center; gap: .5em; height: 2.5em; padding: 0 .9em; margin-bottom: .2em; border-radius: var(--r-pill); background: var(--bg-surface); border: 1px solid var(--border-default); white-space: nowrap; overflow: hidden; }
.art__search .ic { color: var(--text-2); }
.art__hit { display: flex; align-items: center; gap: .65em; padding: .2em .4em; color: var(--text-3); }
.art__bars { flex: 1; display: grid; gap: .35em; }
.art__bars i { height: .45em; border-radius: .3em; background: var(--border-strong); width: 64%; }
.art__bars i + i { background: var(--border-default); width: 92%; }
.art__hit:nth-child(3) .art__bars i { width: 48%; }
.art__hit:nth-child(4) .art__bars i + i { width: 78%; }

.art--voice { display: flex; flex-direction: column; align-items: center; gap: .9em; }
.art__mic { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 .55em color-mix(in srgb, var(--accent) 10%, transparent), 0 0 0 1.1em color-mix(in srgb, var(--accent) 5%, transparent); }
.art__mic .ic { width: 1.5em; height: 1.5em; }
.art__wave { display: flex; align-items: center; gap: .24em; height: 2.6em; }
.art__wave i { width: .28em; height: var(--h); border-radius: .2em; background: var(--text-2); }
.art__cap { color: var(--text-3); font-size: .85em; }

.art--img { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.art__pic { aspect-ratio: 4 / 3; border-radius: .6em; border: 1px solid var(--border-subtle); background: var(--bg-active); }
.art__pic--a { background: radial-gradient(circle at 70% 30%, var(--text-2) 0 12%, transparent 13%), linear-gradient(to top, var(--border-strong) 0 32%, var(--bg-active) 32%); }
.art__pic--b { background: radial-gradient(ellipse at 30% 110%, var(--border-strong) 0 45%, transparent 46%), radial-gradient(ellipse at 85% 120%, var(--text-3) 0 40%, transparent 41%), var(--bg-elevated); }
.art__pic--c { background: radial-gradient(circle at 50% 42%, var(--text-2) 0 18%, transparent 19%), radial-gradient(ellipse at 50% 115%, var(--text-3) 0 42%, transparent 43%), var(--bg-active); }
.art__pic--d { display: grid; place-items: center; background: var(--bg-surface); border: 1px dashed var(--border-strong); color: var(--text-1); }

.art--mem { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; }
.art__chip { display: inline-flex; align-items: center; gap: .45em; height: 2.2em; padding: 0 .8em; border-radius: var(--r-pill); background: var(--bg-surface); border: 1px solid var(--border-default); white-space: nowrap; }
.art__chip .ic { color: var(--text-2); }
.art__chip:nth-child(even) { margin-left: 1.6em; }
.art__chip:nth-child(n + 3) { opacity: .65; }

.art--apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; padding: 0 .4em; }
.art__app { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: .85em; background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-2); }
.art__app .ic { width: 1.5em; height: 1.5em; }
.art__app.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.art__tick { position: absolute; top: -.4em; right: -.4em; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--ok); color: #fff; border: 2px solid var(--bg-input); }
.art__tick .ic { width: .8em; height: .8em; }

.art--plan { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; }
.art__step { display: flex; align-items: center; gap: .65em; width: 100%; padding: .55em .7em; border-radius: .7em; background: var(--bg-surface); border: 1px solid var(--border-subtle); white-space: nowrap; overflow: hidden; }
.art__step i { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--bg-active); font: normal 600 .8em/1 var(--sans); color: var(--text-2); }
.art__step.is-done { border-color: var(--border-default); }
.art__step.is-done i { background: var(--ok); color: #fff; }
.art__step:not(.is-done) { color: var(--text-2); }
.art--plan .art__pill { margin-top: .3em; align-self: flex-end; }

/* ───────── Motion (pinned) ───────── */
html.js:not(.reduce-motion) .caps { height: calc(100svh + 500vh); padding: 0; }
html.js:not(.reduce-motion) .caps__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
html.js:not(.reduce-motion) .caps__head { position: absolute; inset: 0; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: calc(1 - var(--h, 0)); translate: 0 calc(var(--h, 0) * -40px); }
html.js:not(.reduce-motion) .caps__head .lede { max-width: 30em; }
/* The deck is a zero-size point at the pivot; cards hang from it by their bottom edge. */
html.js:not(.reduce-motion) .caps__deck { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
html.js:not(.reduce-motion) .caps__list { display: block; }
html.js:not(.reduce-motion) .cap {
    position: absolute; left: calc(var(--cw, 300px) / -2); top: calc(var(--cw, 300px) * -1.4);
    width: var(--cw, 300px); height: calc(var(--cw, 300px) * 1.4); aspect-ratio: auto;
    font-size: calc(var(--cw, 300px) * .044);
    transform-origin: 50% 100%; opacity: 0; will-change: transform;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .75);
}
html.js:not(.reduce-motion) :is(.cap__art, .cap__body) { opacity: calc(1 - min(var(--age, 0), 1) * .6); }
html.js:not(.reduce-motion) .art__wave i { animation: wave 1.1s var(--e-io) calc(var(--k) * -90ms) infinite alternate; transform-origin: 50% 50%; }
@keyframes wave { from { scale: 1 .35; } }
html.js:not(.reduce-motion) .caps__core { display: block; position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 30; opacity: var(--fin, 0); scale: calc(.4 + var(--fin, 0) * .6); }
html.js:not(.reduce-motion) .caps__mark { width: 100%; height: 100%; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .6)); }
html.js:not(.reduce-motion) .caps__end { display: block; position: absolute; left: 0; right: 0; top: var(--end-y, auto); margin: 0; padding: 0 var(--gutter); text-align: center; font-size: clamp(24px, 2.4vw, 36px); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; opacity: var(--z, 0); translate: 0 calc((1 - var(--z, 0)) * 14px); }
html.js:not(.reduce-motion) .caps__end span { font-weight: 600; }

html.js:not(.reduce-motion) .caps.is-bloomed .cap { animation: card-breathe 1200ms var(--e-io) calc(var(--i) * 90ms) both; }
@keyframes card-breathe { 45% { scale: 1.05; border-color: var(--border-strong); } }

@media (max-width: 1180px) {
    .caps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cap { font-size: 15px; }
}
@media (max-width: 1023px) {
    .caps { padding-top: 120px; padding-bottom: 120px; }
    .caps__head { margin-bottom: 56px; }
    html.js:not(.reduce-motion) .caps { height: calc(100svh + 420vh); }
}
@media (max-width: 640px) {
    .caps { padding-top: 96px; padding-bottom: 96px; }
    .caps__head { margin-bottom: 40px; }
    .caps__list { grid-template-columns: minmax(0, 1fr); }
    .cap { font-size: 15px; }
    html.js:not(.reduce-motion) .caps__end span { display: block; }
}