/* The story draft (next.html, NARRATIVE.md), on top of site.css. The identity is ADR-0061: cape red #E8322A only in the cape,
   ink, paper and white; Geist. A cape only where something gets the power, put on once at that moment, then it rests. */

/* ---------- The cape ---------- */
.cape { transform-box: fill-box; transform-origin: 100% 0; transform: scaleX(0); }
.on .cape { animation: cape-on 1.1s cubic-bezier(.25, .8, .25, 1) forwards; }
.on.still .cape { animation: none; transform: none; }
@keyframes cape-on { 0% { transform: scaleX(0) rotate(0); } 55% { transform: scaleX(1.06) rotate(-7deg); } 100% { transform: none; } }

/* The word card: the one word that gets the power (kit/svg/cape-for-a-word.svg) */
.wcard { position: relative; display: inline-flex; align-items: center; white-space: nowrap; background: #fff; border-radius: .06em; padding: 0 .16em .04em; margin-left: .72em; box-shadow: 0 1px 0 rgb(0 0 0 / .04), 0 18px 40px -24px rgb(0 0 0 / .35); transition: background .4s, box-shadow .4s; }
.wcard .cape-w { position: absolute; right: 100%; top: 0; height: 100%; width: auto; margin-right: -.02em; }

/* ---------- Hero ---------- */
.n-h1 { margin-top: 14px; }
.n-sub { max-width: 40ch; }
.n-sub b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 4px; }

/* ---------- The demo: the spinner, then the Deck mark puts its cape on when the work is done ---------- */
.n-loader { position: relative; flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.n-loader svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; }
.n-loader.done .spin { opacity: 0; }
.n-loader.done svg { opacity: 1; }
html:not(.js) .n-loader .spin { display: none; }
html:not(.js) .n-loader svg { opacity: 1; }
html:not(.js) .n-loader .cape { transform: none; }

/* the chip in the demo carries the small mark (identity/README.md); file chips stay neutral, red only in the cape, no purple */
.app-skill { display: inline-flex; align-items: center; gap: 7px; }
.app-skill::before { display: none; }
.app-skill img { width: 14px; height: 14px; }
.file.pdf b, .file.web b { background: #EDEDE9; color: var(--ink-2); }

/* ---------- 4. The difference ---------- */
.rvl-head .wcard:not(.on) { background: transparent; box-shadow: none; }
.rvl.wow { box-shadow: 0 60px 140px -50px rgb(0 0 0 / .75), 0 0 0 1px rgb(0 0 0 / .06); }

/* ---------- 6. The wall, as the main film's scale shot: calm, dark, tilted, drifting ---------- */
.n-stage { position: relative; height: clamp(560px, 82vh, 880px); background: var(--dark); overflow: hidden; isolation: isolate; }
.n-plane { position: absolute; inset: -30% -18%; transform: perspective(2400px) rotateX(24deg) rotateZ(-9deg); }
.n-plane .wall { height: 100%; -webkit-mask: none; mask: none; gap: 18px; }
.n-plane .col { gap: 18px; }
.n-plane .tile { border-radius: 8px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .8); }
.n-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 64% 54% at 50% 50%, rgb(18 18 18 / .95), rgb(18 18 18 / .86) 55%, rgb(18 18 18 / .4) 100%); }
.n-wall-say { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 1000px); text-align: center; color: #fff; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -0.03em; pointer-events: none; }
.n-wall-say span { color: #A9A9A3; }
.n-wall .drift { margin-top: 18px; }

/* ---------- How it works: four steps, each pane a short piece of motion (7.5 s, then the next step) ----------
   The final state is the default; the animations only lead into it, so reduced motion shows every pane at rest. */
code { font: 400 .92em var(--mono); background: var(--bg-2); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.n-how .how-pane { min-height: 540px; }
.n-how .hp { padding: 32px; }
.s-mark { width: 26px; height: 26px; flex: none; border-radius: 0; }
@keyframes s-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes s-pop { from { opacity: 0; transform: scale(.9); } }
/* 1. Add it */
.s-win { width: min(100%, 460px); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .4), 0 0 0 1px rgb(0 0 0 / .06); }
.s-bar { height: 40px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid #EEEEEA; font-size: 12.5px; color: var(--muted); }
.s-body { position: relative; padding: 18px; display: grid; gap: 12px; min-height: 230px; align-content: start; }
.s-row { display: flex; align-items: center; gap: 12px; }
.s-head { position: relative; justify-content: space-between; font-size: 15px; }
.s-head b { font-weight: 500; }
.s-btn { font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
.s-menu { position: absolute; right: 0; top: 40px; z-index: 2; background: #fff; border-radius: 10px; padding: 10px 14px; font-size: 13px; box-shadow: 0 14px 34px -14px rgb(0 0 0 / .35), 0 0 0 1px rgb(0 0 0 / .06); opacity: 0; }
.s-file { position: absolute; left: 50%; top: 56%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-radius: 10px; font: 400 12px var(--mono); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .45), 0 0 0 1px rgb(0 0 0 / .08); opacity: 0; transform: translate(-50%, 0); }
.s-added { padding: 14px; border-radius: 12px; background: var(--bg); margin-top: 6px; }
.s-added .s-mark { width: 40px; height: 40px; }
.s-added span { display: grid; flex: 1; font-size: 14px; }
.s-added b { font-weight: 500; }
.s-added small { color: var(--muted); font-size: 12px; }
.s-toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--ink); position: relative; }
.s-toggle::after { content: ""; position: absolute; top: 3px; left: 17px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.hp.on .s-btn { animation: s-press 1.2s .3s both; }
@keyframes s-press { 0%, 100% { background: #fff; } 20%, 60% { background: var(--bg-2); } }
.hp.on .s-menu { animation: s-menu 1.6s .55s both; }
@keyframes s-menu { 0% { opacity: 0; transform: translateY(-4px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.hp.on .s-file { animation: s-drop 1.6s 1.3s both; }
@keyframes s-drop { 0% { opacity: 0; transform: translate(10%, 60%) rotate(6deg); } 45% { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); } 70% { opacity: 1; transform: translate(-50%, -6px) scale(.96); } 100% { opacity: 0; transform: translate(-50%, -20px) scale(.6); } }
.hp.on .s-added { animation: s-in .6s 2.8s both; }
.hp.on .s-toggle { animation: s-tog .01s 3.6s both; }
.hp.on .s-toggle::after { animation: s-knob .3s 3.6s both; }
@keyframes s-tog { from { background: #D6D6D0; } }
@keyframes s-knob { from { left: 3px; } }
/* 2. Ask */
.s-ask { width: min(100%, 520px); display: grid; gap: 14px; }
.s-files { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.hp.on .s-files .file { animation: s-pop .45s var(--ease) both; animation-delay: calc(var(--k) * .35s + .2s); }
.s-comp { position: relative; background: #fff; border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 24px 60px -28px rgb(0 0 0 / .4), 0 0 0 1px rgb(0 0 0 / .06); display: grid; gap: 12px; }
.s-line { font-size: 15px; line-height: 1.45; min-height: 2.9em; }
.s-slash { font-family: var(--mono); font-size: 14px; background: var(--bg-2); border-radius: 6px; padding: 1px 6px; margin-right: 6px; }
.hp.on .s-slash { animation: s-type .5s steps(8) 1.8s both; }
.hp.on .s-type { animation: s-type 1.8s steps(30) 3.1s both; }
@keyframes s-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.s-type { display: inline-block; }
.s-mention { position: absolute; left: 12px; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 13px; box-shadow: 0 14px 34px -14px rgb(0 0 0 / .35), 0 0 0 1px rgb(0 0 0 / .06); opacity: 0; }
.s-mention b { font: 400 13px var(--mono); margin-right: 6px; }
.hp.on .s-mention { animation: s-menu 1.4s 1.75s both; }
.s-comp .comp-row { display: flex; justify-content: space-between; }
.hp.on .s-comp .send { animation: s-send .3s 5.1s both; }
.s-comp .send { background: var(--ink); color: #fff; }
@keyframes s-send { from { background: #E3E3DE; color: var(--muted); } }
/* 3. It designs: story, look, slides, review */
.s-work { width: min(100%, 560px); display: grid; gap: 16px; }
.s-phases { display: flex; gap: 6px; justify-content: center; }
.s-phases li { font: 400 11.5px var(--mono); color: var(--muted); padding: 4px 10px; border-radius: 999px; background: rgb(0 0 0 / .04); }
.hp.on .s-phases li:nth-child(1) { animation: s-ph1 7.5s both; }
.hp.on .s-phases li:nth-child(2) { animation: s-ph2 7.5s both; }
.hp.on .s-phases li:nth-child(3) { animation: s-ph3 7.5s both; }
.hp.on .s-phases li:nth-child(4) { animation: s-ph4 7.5s both; }
@keyframes s-ph1 { 0%, 24% { background: var(--ink); color: #fff; } 25%, 100% { background: rgb(0 0 0 / .04); color: var(--muted); } }
@keyframes s-ph2 { 0%, 24% { background: rgb(0 0 0 / .04); color: var(--muted); } 25%, 49% { background: var(--ink); color: #fff; } 50%, 100% { background: rgb(0 0 0 / .04); color: var(--muted); } }
@keyframes s-ph3 { 0%, 49% { background: rgb(0 0 0 / .04); color: var(--muted); } 50%, 74% { background: var(--ink); color: #fff; } 75%, 100% { background: rgb(0 0 0 / .04); color: var(--muted); } }
@keyframes s-ph4 { 0%, 74% { background: rgb(0 0 0 / .04); color: var(--muted); } 75%, 100% { background: var(--ink); color: #fff; } }
.s-stage { position: relative; height: 340px; }
.s-stage > div { position: absolute; inset: 0; }
.s-story { background: #fff; border-radius: 12px; padding: 22px 24px; display: grid; align-content: start; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--ink-2); box-shadow: 0 24px 60px -30px rgb(0 0 0 / .4), 0 0 0 1px rgb(0 0 0 / .05); opacity: 0; }
.s-story .p-file { font: 400 11px var(--mono); color: var(--muted); }
.s-story mark { background: none; color: var(--ink); box-shadow: inset 0 -.45em 0 #E6E5E0; }
.s-story blockquote { margin-top: 6px; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.s-look { opacity: 0; }
.s-look .b-bar { background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06); width: 70%; }
.s-sw { display: flex; gap: 8px; margin: 14px 0; }
.s-sw i { width: 30px; height: 30px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.s-look img { position: absolute; right: 0; bottom: 0; width: 66%; border-radius: 8px; box-shadow: 0 24px 60px -26px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .06); }
.s-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: center; }
.s-grid span { position: relative; display: block; }
.s-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 24px -14px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .06); }
.s-grid span::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6 9l4-4.2' fill='none' stroke='%23121212' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat; box-shadow: 0 2px 6px rgb(0 0 0 / .3); }
.hp.on .s-story { animation: s-win1 7.5s both; }
.hp.on .s-story mark { animation: s-mark .5s both; } .hp.on .s-story mark:nth-of-type(1) { animation-delay: .4s; } .hp.on .s-story mark:nth-of-type(2) { animation-delay: .7s; } .hp.on .s-story mark:nth-of-type(3) { animation-delay: 1s; }
.hp.on .s-story blockquote { animation: s-in .5s 1.2s both; }
@keyframes s-mark { from { box-shadow: inset 0 0 0 #E6E5E0; } }
.hp.on .s-look { animation: s-win2 7.5s both; }
.hp.on .s-sw i { animation: s-pop .4s both; animation-delay: calc(2.1s + var(--k) * .12s); }
.hp.on .s-look img { animation: s-in .6s 2.7s both; }
.hp.on .s-grid { animation: s-win3 7.5s both; }
.hp.on .s-grid span { animation: s-pop .35s both; animation-delay: calc(3.85s + var(--k) * .1s); }
.hp.on .s-grid span::after { animation: s-pop .25s both; animation-delay: calc(5.6s + var(--k) * .12s); }
@keyframes s-win1 { 0%, 23% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes s-win2 { 0%, 24% { opacity: 0; } 27%, 48% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes s-win3 { 0%, 49% { opacity: 0; } 52%, 100% { opacity: 1; } }
/* 4. Present it, send it */
.s-done { position: relative; width: min(100%, 560px); min-width: 0; height: 440px; }
.s-reply { min-width: 0; overflow: hidden; background: #fff; border-radius: 14px; padding: 18px 20px; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; box-shadow: 0 24px 60px -30px rgb(0 0 0 / .4), 0 0 0 1px rgb(0 0 0 / .05); }
.s-reply b { font-weight: 500; }
.s-reply .hand-who .s-mark { width: 20px; height: 20px; }
.s-reply .card { max-width: none; min-width: 0; }
.s-reply .card > span { min-width: 0; }
.s-reply .card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.s-present { position: absolute; left: 0; right: 0; bottom: 0; }
.s-present img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6), 0 0 0 1px rgb(0 0 0 / .06); }
.hp.on .s-reply { animation: s-in .5s .2s both; }
.hp.on .s-reply .card { animation: s-card 7.5s both; }
@keyframes s-card { 0%, 12% { opacity: 0; transform: translateY(10px); } 18%, 31% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: scale(.98); } }
.hp.on .s-present { animation: s-show 1s 2.4s var(--ease) both; }
@keyframes s-show { from { opacity: 0; transform: translateY(40px) scale(.55); transform-origin: 30% 0; } }
@media (prefers-reduced-motion: reduce) { .n-how .hp * { animation: none !important; } .s-menu, .s-mention, .s-file { display: none; } }

/* ---------- 8. Pricing: how many get it ---------- */
.p-capes { display: flex; flex-wrap: wrap; gap: 6px; height: 84px; align-content: flex-start; overflow: hidden; margin-bottom: 8px; }
.p-capes[data-capes="20"] { max-width: 294px; }
.p-capes i { display: block; width: 24px; height: 24px; }
.p-capes svg { display: block; width: 100%; height: 100%; }
.p-capes.on .cape { animation-delay: var(--d); }
.p-capes.all { -webkit-mask: linear-gradient(90deg, #000 55%, transparent 98%); mask: linear-gradient(90deg, #000 55%, transparent 98%); }
.p-line { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin-top: -4px; }

/* ---------- 9. Questions ---------- */
.n-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.n-qs details { border-top: 1px solid var(--line); }
.n-qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 18px; letter-spacing: -0.01em; }
.n-qs summary::-webkit-details-marker { display: none; }
.n-qs summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .25s var(--ease); }
.n-qs details[open] summary::after { transform: rotate(45deg); }
.n-qs details p { padding: 0 0 22px; color: var(--ink-2); max-width: 60ch; }

@media (max-width: 1020px) {
  .n-qs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .n-how .how-pane { min-height: 440px; }
  .n-how .hp { padding: 16px; }
  .s-stage { height: 260px; }
  .s-done { height: 380px; }
  .s-reply { font-size: 13px; padding: 14px 16px; }
  .n-stage { height: 560px; }
  .n-stage::after { background: radial-gradient(ellipse 80% 46% at 50% 50%, rgb(18 18 18 / .97), rgb(18 18 18 / .9) 60%, rgb(18 18 18 / .55) 100%); }
  .n-plane { inset: -20% -40%; transform: perspective(1600px) rotateX(20deg) rotateZ(-8deg); }
}