/* The "Make it yours" duo on the home page (docs/superpowers/specs/2026-10-07-home-no-repeats-duo-design.md).
   Linked from index.html only, after site.css, so site.css keeps its version. It builds on the site.css tokens (--ink, --yellow, --green,
   --radius): no image, no script, no analytics. Every moving part is CSS, and only transform, opacity, clip-path and width are animated.
   Under prefers-reduced-motion the duo stands still on its final frame: the full name, the full vase and the "Instant quote" pill.
   Ported from option A of the approved mockup; its .pr-* classes are .duo-* here. */

/* ---- the section and its two cards: stacked below 800px, side by side from 800px ---- */
.duo{padding:46px 0 0}
.duo-defs{position:absolute;width:0;height:0;overflow:hidden}
.duo-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.duo-card{container:duo-card/inline-size;position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;padding:34px 32px 26px;box-shadow:0 1px 2px rgba(25,32,28,.08),0 16px 32px -20px rgba(25,32,28,.42);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.duo-card:hover,.duo-card:focus-visible{transform:translateY(-4px);box-shadow:0 2px 4px rgba(25,32,28,.1),0 28px 44px -20px rgba(25,32,28,.55)}
.duo-card:focus-visible{outline:3px solid #227853;outline-offset:4px}
.duo-card:hover .duo-btn,.duo-card:focus-visible .duo-btn{background:#f5c83e}
.duo-card:hover .duo-btn b,.duo-card:focus-visible .duo-btn b{transform:translateX(5px)}
.duo-c1{background:radial-gradient(85% 55% at 50% 100%,rgba(255,196,48,.6),transparent 72%),linear-gradient(160deg,#fffdf7 0%,#fff6dc 46%,#ffe8a0 100%)}
.duo-c2{color:#fff;background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 112px),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 112px),repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 28px),radial-gradient(80% 55% at 50% 100%,rgba(255,255,255,.12),transparent 72%),var(--green)}

/* ---- the words ---- */
.duo-eb{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;color:var(--ink)}
.duo-eb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.duo-c2 .duo-eb{color:#d9e2d6}
.duo-c2 .duo-eb::before{background:var(--yellow)}
.duo-h{font-size:36px;font-size:clamp(30px,9.3cqw,44px);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin:14px 0 12px;max-width:10.5ch;text-wrap:balance}
.duo-p{font-size:15px;font-size:clamp(14px,3.5cqw,16px);line-height:1.55;color:#4a524d;max-width:40ch}
.duo-c2 .duo-p{color:#dce6df}
.duo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.duo-chips i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;line-height:1;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.45);color:#fff}
.duo-btn{display:inline-flex;align-items:center;align-self:flex-start;gap:12px;min-height:50px;margin-top:20px;padding:13px 22px;border-radius:8px;background:var(--yellow);color:var(--ink);font-size:14px;font-weight:750;line-height:1.2;box-shadow:0 0 0 1px rgba(25,32,28,.14),0 8px 16px -8px rgba(110,70,0,.55);transition:background .18s,transform .18s}
.duo-btn b{display:inline-block;font-weight:800;transition:transform .25s}

/* ---- the picture under the words ---- */
.duo-stg{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:272px;margin-top:16px}
.duo-c1 .duo-stg{justify-content:center}
.duo-dots{display:flex;justify-content:center;gap:12px;margin-top:10px}
.duo-dots i{--ri:#fff;--ro:rgba(25,32,28,.16);--rg:#19201c;position:relative;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 2px var(--ri),0 0 0 3px var(--ro);animation:duo-dt 12s ease-in-out infinite}
.duo-dots i::after{content:"";position:absolute;inset:-4.5px;border:2.5px solid var(--rg);border-radius:50%;opacity:0;animation:duo-dr 12s ease-in-out infinite;animation-delay:inherit}
.duo-dots i:nth-child(1){background:#ffda61}
.duo-dots i:nth-child(2){background:#2fa573;animation-delay:4s}
.duo-dots i:nth-child(3){background:#ff7fb5;animation-delay:8s}
.duo-sp{position:absolute;width:15px;height:15px;background:#eaa900;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:duo-tw 3.6s ease-in-out infinite}
.duo-sp:nth-of-type(1){left:9%;top:14%}
.duo-sp:nth-of-type(2){right:10%;top:30%;width:11px;height:11px;animation-delay:1.2s}
.duo-sp:nth-of-type(3){left:17%;bottom:26%;width:9px;height:9px;animation-delay:2.1s}

/* ---- the 3D nameplate that types four names (sized in em, so it scales with the card) ---- */
.duo-plate{position:relative;font-size:12px;font-size:clamp(6px,3.25cqw,15px);width:100%;height:15em;perspective:46em;display:grid;place-items:center;animation:duo-fl 5.5s ease-in-out infinite}
.duo-pl{position:relative;width:25em;height:10em;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-18deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.duo-card:hover .duo-pl,.duo-card:focus-visible .duo-pl{transform:rotateX(4deg) rotateY(-7deg) scale(1.04)}
.duo-pl>*{position:absolute}
.duo-pf,.duo-pk{inset:0;border-radius:.45em;backface-visibility:hidden}
.duo-pf{transform:translateZ(.65em);overflow:hidden;background:linear-gradient(145deg,#fffef9,#f8f1de 52%,#ebe0c4)}
.duo-pf::before{content:"";position:absolute;top:0;left:0;width:260%;height:100%;background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-86.15%);animation:duo-gt 6.5s ease-in-out infinite}
.duo-pk{transform:rotateY(180deg) translateZ(.65em);background:#cdbb8e}
.duo-sd{background:repeating-linear-gradient(90deg,rgba(90,65,15,.2) 0 1px,transparent 1px .22em),#d6c598}
.duo-sl,.duo-sr{top:.45em;bottom:.45em;width:1.3em}
.duo-sl{left:-.65em;transform:rotateY(-90deg);background-color:#d9c99c}
.duo-sr{right:-.65em;transform:rotateY(90deg);background-color:#b49e68}
.duo-su,.duo-sb2{left:.45em;right:.45em;height:1.3em;background:repeating-linear-gradient(0deg,rgba(90,65,15,.2) 0 1px,transparent 1px .22em),#f3ead0}
.duo-su{top:-.65em;transform:rotateX(90deg)}
.duo-sb2{bottom:-.65em;transform:rotateX(-90deg);background-color:#bba670}
.duo-gb{position:absolute;inset:.8em;border:.34em solid;border-color:#f6e19c #cf9f2f #a97a1c #e8c35e;border-radius:.4em;box-shadow:.1em .17em .24em rgba(110,75,10,.4),inset -.05em -.08em .12em rgba(110,75,10,.25)}
.duo-st{position:absolute;left:2em;top:50%;width:3.7em;height:3.7em;margin-top:-1.85em;fill:none;stroke:#cf9f2f;stroke-width:2.1;stroke-linejoin:round;filter:drop-shadow(.06em .1em .05em rgba(110,75,10,.5))}
.duo-dv{position:absolute;left:6.4em;top:2.2em;bottom:2.2em;width:.3em;border-radius:.15em;background:linear-gradient(90deg,#f2d880,#cf9f2f 55%,#a87718);box-shadow:.08em .11em .12em rgba(110,75,10,.38)}
.duo-nms{position:absolute;left:7.2em;right:1.7em;top:0;bottom:0;display:grid;place-items:center}
.duo-nm{grid-area:1/1;display:flex;white-space:pre;font-weight:800;letter-spacing:.035em;line-height:1;color:#cf9f2f;text-shadow:-.012em -.015em 0 #f9e8ac,.022em .03em 0 #a8781a,.06em .09em .07em rgba(100,68,8,.5);opacity:0;animation:duo-nv 16s infinite backwards;animation-delay:calc(var(--k)*4s)}
.duo-nm:nth-child(1){--k:0;font-size:4.3em;opacity:1}
.duo-nm:nth-child(2){--k:1;font-size:2.05em}
.duo-nm:nth-child(3){--k:2;font-size:1.8em}
.duo-nm:nth-child(4){--k:3;font-size:3em}
.duo-nm i{font-style:normal;position:relative;animation:duo-pp 16s infinite backwards;animation-delay:calc(var(--k)*4s + var(--i)*.1s + .2s)}
.duo-nm i::after{content:"";position:absolute;left:100%;top:.08em;bottom:.02em;width:.075em;margin-left:.02em;background:#7a5410;opacity:0;animation:duo-cr 16s steps(1,end) infinite backwards;animation-delay:inherit}
.duo-nm i:last-child::after{animation-name:duo-cl}
.duo-nm i:nth-child(1){--i:0}
.duo-nm i:nth-child(2){--i:1}
.duo-nm i:nth-child(3){--i:2}
.duo-nm i:nth-child(4){--i:3}
.duo-nm i:nth-child(5){--i:4}
.duo-nm i:nth-child(6){--i:5}
.duo-nm i:nth-child(7){--i:6}
.duo-nm i:nth-child(8){--i:7}
.duo-nm i:nth-child(9){--i:8}
.duo-nm i:nth-child(10){--i:9}
.duo-nm i:nth-child(11){--i:10}
.duo-nm i:nth-child(12){--i:11}
.duo-gl{position:absolute;left:50%;bottom:.2em;width:22em;height:2.2em;margin-left:-11em;background:radial-gradient(closest-side,rgba(95,62,0,.42),transparent);filter:blur(3px);animation:duo-gs 5.5s ease-in-out infinite}

/* ---- the wireframe vase that prints itself, with its nozzle and its "Instant quote" pill ---- */
.duo-vase{position:relative;width:100%;height:calc(var(--vh,230px) + 12px);--sw:62px;--vh:248px}
.duo-vase>svg{position:absolute;left:0;top:0;width:100%;height:var(--vh,230px)}
.duo-vase::before{content:"";position:absolute;left:50%;top:0;height:var(--vh,230px);border-left:1px dashed rgba(255,255,255,.2)}
.duo-bed{position:absolute;left:50%;bottom:0;width:min(74%,300px);height:8px;transform:translateX(-50%);border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12))}
.duo-wfr{fill:none;stroke:rgba(255,255,255,.82);stroke-width:.9;stroke-linejoin:round}
.duo-wbk{fill:none;stroke:rgba(255,255,255,.3);stroke-width:.7;stroke-dasharray:2 2.4}
.duo-wfd{fill:none;stroke:rgba(25,32,28,.3);stroke-width:.8;stroke-linejoin:round}
.duo-fill{clip-path:inset(0 0 0 0);animation:duo-ri 7.5s linear infinite}
.duo-noz{position:absolute;left:0;right:0;top:var(--vh,230px);height:0;opacity:0;animation:duo-nz 7.5s linear infinite}
.duo-rail{position:absolute;left:3%;right:3%;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,236,160,.95) 18%,rgba(255,236,160,.95) 82%,transparent);box-shadow:0 0 10px rgba(255,218,97,.7)}
.duo-head{position:absolute;left:50%;bottom:12px;width:44px;height:9px;margin-left:-22px;border-radius:3px;background:#eef4f0;box-shadow:0 2px 6px rgba(0,0,0,.35);animation:duo-sw 1.6s ease-in-out infinite alternate}
.duo-head::after{content:"";position:absolute;left:50%;top:100%;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid #ffda61;filter:drop-shadow(0 0 4px rgba(255,218,97,.95))}
.duo-quote{position:absolute;right:2%;top:2%;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 8px;border-radius:999px;background:#fff;color:#174b3a;font-size:12.5px;font-weight:800;line-height:1;box-shadow:0 10px 22px -8px rgba(0,0,0,.55);transform-origin:100% 0;animation:duo-qp 7.5s ease-out infinite}
.duo-quote svg{width:18px;height:18px}
.duo-quote circle{fill:#174b3a}
.duo-quote path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:duo-ck 7.5s ease-out infinite}

/* ---- narrow screens ---- */
@media (min-width:800px){
.duo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (max-width:700px){
.duo{padding-top:28px}
.duo-card{padding:26px 22px 20px}
.duo-stg{min-height:218px;margin-top:12px}
.duo-vase{--vh:188px;--sw:46px}
}
@media (max-width:340px){
.duo-card{padding:22px 16px 18px}
.duo-btn{min-height:46px;padding:12px 16px;gap:8px;font-size:13.5px}
}

/* ---- motion: transform, opacity and clip-path only ---- */
@keyframes duo-nv{0%{opacity:0;clip-path:inset(0 0 0 0)}.1%{opacity:1}17%{opacity:1;clip-path:inset(0 0 0 0);animation-timing-function:steps(8,end)}19.5%{opacity:1;clip-path:inset(0 100% 0 0)}19.6%,100%{opacity:0;clip-path:inset(0 100% 0 0)}}
@keyframes duo-pp{0%{opacity:0;transform:translateY(.16em) scale(.55)}1.4%{opacity:1;transform:translateY(-.02em) scale(1.1)}2.2%{transform:none}24.5%{opacity:1}24.6%,100%{opacity:0}}
@keyframes duo-cr{0%{opacity:0}.01%{opacity:1}.8%,100%{opacity:0}}
@keyframes duo-cl{0%{opacity:0}.01%{opacity:1}1.57%{opacity:0}3.13%{opacity:1}4.70%{opacity:0}6.26%{opacity:1}7.82%{opacity:0}9.38%{opacity:1}10.95%{opacity:0}12.51%{opacity:1}14.07%{opacity:0}15.63%{opacity:1}17.20%{opacity:0}17.5%,100%{opacity:0}}
@keyframes duo-dt{0%,30%{transform:scale(1.2)}36%,100%{transform:none}}
@keyframes duo-dr{0%,30%{opacity:1}36%,100%{opacity:0}}
@keyframes duo-tw{0%,100%{opacity:.25;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes duo-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5em)}}
@keyframes duo-gs{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.86);opacity:.7}}
@keyframes duo-gt{0%,58%{transform:translateX(-86.15%)}100%{transform:translateX(24.62%)}}
@keyframes duo-ri{0%{opacity:1;clip-path:inset(100% 0 0 0)}56%{clip-path:inset(0 0 0 0)}90%{opacity:1}97%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(100% 0 0 0)}}
@keyframes duo-nz{0%{opacity:0;transform:translateY(0)}2.5%{opacity:1}56%{opacity:1;transform:translateY(calc(var(--vh,230px)*-1))}64%{opacity:0;transform:translateY(calc(var(--vh,230px)*-1 - 22px))}100%{opacity:0;transform:translateY(0)}}
@keyframes duo-sw{from{transform:translateX(calc(var(--sw)*-1))}to{transform:translateX(var(--sw))}}
@keyframes duo-qp{0%,54%{opacity:0;transform:scale(.4) translateY(8px)}58%{opacity:1;transform:scale(1.12)}62%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
@keyframes duo-ck{0%,57%{clip-path:inset(0 100% 0 0)}66%,100%{clip-path:inset(0 0 0 0)}}

/* ---- reduced motion: everything stands still, on the final frame ---- */
@media (prefers-reduced-motion:reduce){
.duo *,.duo *::before,.duo *::after{animation:none!important;transition:none!important}
.duo-nm:nth-child(n+2){opacity:0}
.duo-quote{opacity:1}
}