/* ═══ SAY I DO · prototype v4 (Iris Studio, 24 Sep 2026) · the product working in front of you ═══
   Placements only, in the v27 tokens. Nothing drawn: no diagram, no hub, no orb. The screens are the
   S21 captures (img/e): one whole phone per page at most, else cropped to one card or one region.
   Nothing is pinned; the page scrolls as a page. Each player runs once when it is seen, on a clock,
   and rests on a true state. Arrivals 300–400ms · morphs 400–500ms · the press ring 200ms · the pause ≥ 800ms.
   prefers-reduced-motion rests every player on its final state. */

/* ── scale ── */
.phone--v4{width:min(212px,52vw)}                 /* the one whole phone on a page: ~540px tall */
.crop{position:relative;overflow:hidden;border-radius:10px;background:var(--band);box-shadow:0 30px 70px -30px rgba(0,0,0,.6),0 0 0 1px rgba(240,220,166,.18)}
.sec--band .crop{box-shadow:0 30px 70px -30px rgba(18,63,48,.45),0 0 0 1px var(--hair-ink)}
.crop img{position:absolute;left:0;top:0;max-width:none;height:auto;width:calc(100% / var(--w,1));transform:translate(calc(-1 * var(--x,0%)),calc(-1 * var(--y,0%)))}
/* the slots (port brief §6.2): a slot takes an image or a video with no layout change. A video in a phone is placed, and fades, as .phone img (v27.css); a video in a crop is placed as .crop img above. */
.crop video,.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.crop video{left:0;top:0;right:auto;bottom:auto;max-width:none;height:auto;width:calc(100% / var(--w,1));transform:translate(calc(-1 * var(--x,0%)),calc(-1 * var(--y,0%)))}
.phone video{opacity:0;transition:opacity .55s var(--ease)}
.phone video.is-on{opacity:1}
/* the slot fix: a video in a desk is placed, and in a multi-room desk fades, as .desk img (v27.css); a revealed box holding only a clip rests unshifted, as one holding an img does */
.desk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s var(--ease)}
.desk--multi video{opacity:0}
.desk--multi video.is-on{opacity:1}
[data-rv]:has(video){transform:none}
.crop--phone{border-radius:14px}
.split--top{align-items:start}

/* ── rolling digits ── */
.num{display:inline-grid!important;font:inherit;font-variant-numeric:tabular-nums;overflow:hidden;line-height:1!important;vertical-align:-.04em;height:1em;margin:0!important;color:inherit!important;max-width:none!important}
.num>span{grid-area:1/1;display:block;margin:0!important;max-width:none!important;font:inherit;line-height:1!important;color:inherit!important;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.num>span.next{transform:translateY(100%);opacity:0}
.num.turn>span.cur{transform:translateY(-100%);opacity:0}
.num.turn>span.next{transform:none;opacity:1}

/* ── the story: fragments converge into one record; Iris prepares; you press ── */
.story__wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.story__col{margin-top:clamp(40px,8vh,96px)}
@media (max-width:860px){.story__col{margin-top:0}}
.why-v4 .why p.body{max-width:50ch}
.why-v4 .why p.body+p.body{margin-top:12px}
@media (max-width:860px){.story__wrap{grid-template-columns:1fr;gap:36px}}
.story__col{display:flex;flex-direction:column;align-items:center}
.story{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto}
@media (max-width:600px){.story{aspect-ratio:1/1.15}}
.frag{position:absolute;background:var(--paper);color:var(--ink-head);border:1px solid var(--rule);border-radius:6px;padding:10px 13px 11px;font-size:12.5px;line-height:1.35;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);max-width:220px;transition:transform .8s var(--ease),opacity .55s var(--ease)}
.frag b{display:block;font-size:8px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);margin-bottom:4px}
.frag--sheet{border-radius:2px 8px 2px 2px;border-top:3px solid var(--pos)}
.frag--chat{border-radius:14px 14px 14px 3px;background:#E9F3EC}
.frag--mail{border-left:3px solid var(--rule)}
.frag--note{background:#FBF2C8;border-color:#E3CC7A;rotate:-2deg}
.frag--card{background:var(--panel);color:var(--band);border-color:rgba(240,220,166,.5)}
.frag--card b{color:var(--gold)}
.frag--bank{font-family:var(--corm);font-size:15px}
.f1{left:0;top:6%;--tx:160px;--ty:150px}
.f2{right:0;top:12%;--tx:-150px;--ty:120px}
.f3{left:4%;top:40%;--tx:150px;--ty:20px}
.f4{right:2%;top:44%;--tx:-140px;--ty:10px}
.f5{left:10%;bottom:10%;--tx:110px;--ty:-130px}
.f6{right:8%;bottom:4%;--tx:-100px;--ty:-150px}
[data-step="0"] .f1{animation:drift1 5.2s ease-in-out infinite}
[data-step="0"] .f2{animation:drift2 6.1s ease-in-out infinite}
[data-step="0"] .f3{animation:drift3 5.7s ease-in-out infinite}
[data-step="0"] .f4{animation:drift1 6.4s ease-in-out infinite reverse}
[data-step="0"] .f5{animation:drift2 5.4s ease-in-out infinite reverse}
[data-step="0"] .f6{animation:drift3 6.8s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{translate:0 0}50%{translate:4px -8px}}
@keyframes drift2{0%,100%{translate:0 0}50%{translate:-6px 6px}}
@keyframes drift3{0%,100%{translate:0 0}50%{translate:5px 7px}}
[data-step]:not([data-step="0"]) .frag{opacity:0;pointer-events:none;transform:translate(var(--tx),var(--ty)) scale(.5)}
.record{position:absolute;left:50%;top:50%;width:min(360px,92%);transform:translate(-50%,-50%) scale(.92);opacity:0;background:var(--paper);color:var(--ink-head);border:1px solid var(--rule);border-radius:12px;padding:18px 20px 16px;box-shadow:0 30px 70px -24px rgba(0,0,0,.7);transition:opacity .5s var(--ease) .3s,transform .6s var(--ease) .3s;z-index:2}
.record__k{font-size:8.5px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text);display:flex;justify-content:space-between}
.record__name{font-family:var(--play);font-size:24px;line-height:1.1;margin-top:8px}
.record__name em{color:var(--gold-text)}
.record__rows{list-style:none;margin-top:12px;border-top:1px solid var(--hair-ink)}
.record__rows li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair-ink);font-size:13px;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.record__rows li b{font-weight:500;color:var(--ink-head)}
.record__rows li span{color:var(--ink-quiet);text-align:right}
.record__rows li:nth-child(1){transition-delay:.7s}.record__rows li:nth-child(2){transition-delay:.82s}.record__rows li:nth-child(3){transition-delay:.94s}.record__rows li:nth-child(4){transition-delay:1.06s}
[data-step]:not([data-step="0"]) .record{opacity:1;transform:translate(-50%,-50%) scale(1)}
[data-step]:not([data-step="0"]) .record__rows li{opacity:1;transform:none}
[data-step="2"] .record,[data-step="3"] .record,[data-step="4"] .record{transform:translate(-50%,-100%) scale(.9);opacity:.5;transition-delay:0s}
.icard{position:absolute;left:50%;top:52%;width:min(400px,96%);transform:translate(-50%,24px);opacity:0;background:var(--panel);color:var(--band);border:1px solid rgba(240,220,166,.45);border-radius:14px;padding:18px 20px 16px 20px;box-shadow:0 30px 60px -24px rgba(0,0,0,.75);transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:3}
.icard .seal{position:absolute;left:-16px;top:-16px;width:44px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.icard .who{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;padding-left:14px}
.icard .say{font-family:var(--corm);font-style:italic;font-size:clamp(17px,1.9vw,21px);line-height:1.38}
.icard .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.icard .acts button{font-size:12px;color:var(--ink-head);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:7px 14px;min-height:36px;position:relative;transition:background .2s var(--ease),opacity .3s var(--ease)}
@keyframes ring{to{box-shadow:0 0 0 14px rgba(240,220,166,0)}}
.icard .receipt{display:block;margin-top:12px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);opacity:0;transition:opacity .4s var(--ease)}
[data-step="2"] .icard,[data-step="3"] .icard,[data-step="4"] .icard{opacity:1;transform:translate(-50%,0)}
[data-step="3"] .icard .acts button:first-child,[data-step="4"] .icard .acts button:first-child{background:var(--gold)}
[data-step="3"] .icard .acts button:first-child::after{content:"";position:absolute;inset:-1px;border-radius:999px;box-shadow:0 0 0 0 rgba(240,220,166,.75);animation:ring .5s var(--ease) both}
[data-step="4"] .icard .receipt{opacity:1}
[data-step="4"] .icard .acts button:not(:first-child){opacity:.45}
.story__cap{margin-top:22px;text-align:center;font-family:var(--corm);font-style:italic;font-size:18px;color:var(--rule);opacity:0;transition:opacity .5s var(--ease) .3s;min-height:1.4em}
[data-step="4"] .story__cap{opacity:1}
.story__col .run__replay{margin:6px auto 0}
@media (max-width:600px){.story .frag{max-width:165px;font-size:11.5px}.f1{--tx:110px;--ty:120px}.f2{--tx:-100px;--ty:100px}.f3{--tx:100px}.f4{--tx:-90px}.f5{--tx:70px;--ty:-110px}.f6{--tx:-60px;--ty:-120px}}

/* ── the couple: one phone, five moments beside it ── */
.phonecol{display:flex;justify-content:center;padding-top:8px}
.phone .im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s var(--ease)}
.phone .im.is-on{opacity:1}
.moments{list-style:none;margin-top:30px;border-top:1px solid var(--hair-ink)}
.moments li{border-bottom:1px solid var(--hair-ink);position:relative}
.moments button{width:100%;text-align:left;display:block;padding:16px 0 16px;color:var(--ink-head);transition:opacity .3s var(--ease)}
.moments li:not(.is-on) button{opacity:.45}
.moments small{display:block;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);margin-bottom:6px}
.moments b{display:block;font-family:var(--play);font-weight:400;font-size:clamp(19px,2vw,24px);line-height:1.2;text-wrap:balance}
.moments span{display:block;margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink);max-width:46ch;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s var(--ease)}
.moments li.is-on span{max-height:6em;opacity:1}
.moments li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold-text)}
.moments li.is-on.tick::after{animation:beatbar var(--beat,3.6s) linear forwards}
#couples .btn{margin-top:26px}

/* ── the supplier: the desk, then the stack ── */
.deskcrop{margin-top:30px;max-width:520px}
.kinds{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--on-green-gold)}
.kinds span::before{content:"◆";font-size:7px;margin-right:8px;color:var(--gold)}
.stack{position:relative;margin-top:20px;min-height:300px}
.scard{position:relative;background:var(--paper);color:var(--ink-head);border:1px solid var(--rule);border-left:3px solid var(--rule);border-radius:10px;padding:14px 16px 13px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .35s var(--ease),background .4s var(--ease)}
.scard+.scard{margin-top:10px}
.scard.is-on{opacity:1;transform:none}
.scard b{display:block;font-size:8.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);margin-bottom:5px}
.scard i{font-family:var(--corm);font-style:italic;font-size:16.5px;line-height:1.35;display:block;color:var(--ink-head)}
.scard .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.scard .acts button{font-size:11.5px;color:var(--ink-head);background:var(--band);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;min-height:32px;position:relative}
.scard .acts button.pressed{background:var(--gold)}
.scard .acts button.pressed::after{content:"";position:absolute;inset:-1px;border-radius:999px;box-shadow:0 0 0 0 rgba(240,220,166,.85);animation:ring .5s var(--ease) both}
.scard.done{background:var(--panel);color:var(--band);border-color:rgba(240,220,166,.4)}
.scard.done i{color:var(--band)}
.scard.done .acts{display:none}
.scard .rcpt{display:none;margin-top:8px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2)}
.scard.done .rcpt{display:block}
.stack__cap{font-family:var(--corm);font-style:italic;font-size:clamp(18px,2vw,22px);color:var(--rule);margin-top:20px;opacity:0;transition:opacity .5s var(--ease);min-height:1.4em}
.stack__cap.is-on{opacity:1}
[data-stack] .kicker{display:block;margin-top:6px}

/* the laws on the night */
.laws--night{border-top-color:var(--hair-gold)}
.laws--night .law{border-bottom-color:var(--hair-gold)}
.laws--night .law b{color:var(--paper)}
.laws--night .law span{color:var(--on-green-ivory)}

/* ── Together: two real screens, the same number ── */
.two4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);margin-top:36px;align-items:start}
@media (max-width:760px){.two4{grid-template-columns:1fr}}
.two4 .who{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px;display:flex;justify-content:space-between;gap:12px}
.two4 .who b{font-weight:500;color:var(--ink-head)}
.read{margin-top:14px;font-family:var(--play);font-size:clamp(22px,2.6vw,32px);line-height:1.15;color:var(--ink-head);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.read small{font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}
.yes{position:absolute;left:5%;top:44%;background:var(--panel);color:var(--band);border:1px solid rgba(240,220,166,.5);border-radius:14px 14px 14px 3px;padding:8px 12px;font-size:12.5px;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:3}
.yes b{display:block;font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.two4.go .yes{opacity:1;transform:none}
.two4 .remark{grid-column:1/-1;margin-top:4px;font-family:var(--corm);font-style:italic;font-size:clamp(18px,2vw,22px);color:var(--gold-text);opacity:0;transition:opacity .5s var(--ease);min-height:1.4em}
.two4 .remark.is-on{opacity:1}
.two4 .remark b{font-family:var(--sans);font-style:normal;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text);display:block;margin-bottom:6px}

/* ── before → after: the old strikes through as the new arrives ── */
.gone--v4 li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:baseline}
.gone--v4 s{opacity:1;text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:1px;transition:opacity .5s var(--ease),text-decoration-color .5s var(--ease)}
.gone--v4 span{margin:0;opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease) .35s,transform .5s var(--ease) .35s}
.gone--v4.in s{text-decoration-color:var(--rule);opacity:.5}
.gone--v4.in span{opacity:1;transform:none}
@media (max-width:600px){.gone--v4 li{grid-template-columns:1fr;gap:4px}}

@media (prefers-reduced-motion:reduce){
  .frag,.record,.record__rows li,.icard,.scard,.num>span,.yes,.gone--v4 s,.gone--v4 span,.moments span{transition:none!important;animation:none!important}
}

/* ── kept straight: a typographic ledger of one event ── */
.track{list-style:none;margin-top:8px;border-top:1px solid var(--hair-ink)}
.track li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) auto;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--hair-ink);opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.track.in li{opacity:1;transform:none}
.track li:nth-child(1){transition-delay:.05s}.track li:nth-child(2){transition-delay:.17s}.track li:nth-child(3){transition-delay:.29s}.track li:nth-child(4){transition-delay:.41s}.track li:nth-child(5){transition-delay:.53s}.track li:nth-child(6){transition-delay:.65s}.track li:nth-child(7){transition-delay:.77s}.track li:nth-child(8){transition-delay:.89s}
.track b{font-family:var(--play);font-weight:400;font-size:clamp(17px,1.7vw,21px);color:var(--ink-head)}
.track span{font-size:14px;line-height:1.5;color:var(--ink)}
.track em{font-style:normal;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);border:1px solid var(--hair-ink-2);border-radius:999px;padding:5px 9px;white-space:nowrap}
@media (max-width:600px){.track li{grid-template-columns:1fr auto}.track span{grid-column:1/-1}}
/* ── the Drive, as a tree ── */
.tree{list-style:none;margin-top:8px;font-size:14.5px;border-top:1px solid var(--hair-gold)}
.tree li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair-gold);opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.tree.in li{opacity:1;transform:none}
.tree li:nth-child(n){transition-delay:calc(var(--i,0) * 90ms)}
.tree li:nth-child(1){--i:0}.tree li:nth-child(2){--i:1}.tree li:nth-child(3){--i:2}.tree li:nth-child(4){--i:3}.tree li:nth-child(5){--i:4}.tree li:nth-child(6){--i:5}.tree li:nth-child(7){--i:6}.tree li:nth-child(8){--i:7}.tree li:nth-child(9){--i:8}.tree li:nth-child(10){--i:9}.tree li:nth-child(11){--i:10}
.tree .d1{padding-left:22px}.tree .d2{padding-left:44px}.tree .d3{padding-left:66px}
.tree b{font-weight:400;font-family:var(--play);font-size:17px;color:var(--paper)}
.tree b::before,.tree i::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;border:1px solid var(--rule);vertical-align:baseline}
.tree b::before{background:rgba(240,220,166,.35);border-radius:1px}
.tree i::before{border-radius:50%;width:7px;height:7px}
.tree i{font-style:normal;color:var(--band)}
.tree span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-green-gold)}
.tree .d0 b{font-size:20px}
.track em{justify-self:start}

/* ── the three gates on the front door: copy, then the desk with the phone against it ── */
.gate__wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,4.4vw,72px);align-items:center}
@media (max-width:860px){.gate__wrap{grid-template-columns:1fr;gap:36px}}
.gate__copy p.body{max-width:50ch}
.gate__copy .btn{margin-top:26px}
.pair{display:grid;grid-template-columns:minmax(0,1fr) 158px;gap:clamp(18px,2.4vw,32px);align-items:end}
.pair figure{margin:0;min-width:0}
.pair figcaption{margin-bottom:12px;min-height:74px}
.pair figcaption .kicker{display:block;margin-bottom:6px}
.pair figcaption i{display:block;font-family:var(--corm);font-style:italic;font-size:15px;line-height:1.4;color:var(--rule)}
.sec--band .pair figcaption i{color:var(--gold-text)}
.pair__phone .phone{width:138px;margin:0}
@media (max-width:1040px){.pair{grid-template-columns:minmax(0,1fr) 150px}.pair__phone .phone{width:118px}}
@media (max-width:600px){.pair{grid-template-columns:1fr;gap:26px}.pair__phone{display:flex;gap:16px;align-items:flex-start}.pair__phone .phone{width:34vw;flex:none}.pair figcaption{min-height:0}}

/* ── the founder: the small portrait in its own column, his story in one clean column beside it ── */
.why-v4{padding-top:clamp(80px,12vh,130px);padding-bottom:clamp(80px,12vh,130px)}
.why-v4>.wrap{position:relative;z-index:2}
.why__h{max-width:20ch}
.founder3{max-width:780px;margin-top:40px}
.founder3::after{content:"";display:block;clear:both}
.founder3__photo{float:left;width:190px;margin:4px 30px 18px 0}
.founder3__photo img{width:190px;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:6px;display:block;box-shadow:0 24px 50px -24px rgba(0,0,0,.7),0 0 0 1px rgba(240,220,166,.22)}
.founder3__photo figcaption{margin-top:12px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--on-green-gold)}
.founder3__photo figcaption b{display:block;font-family:var(--play);font-weight:400;font-size:18px;letter-spacing:0;text-transform:none;color:var(--paper);margin-bottom:3px}
.founder3 p{display:flow-root;font-size:clamp(15px,1.25vw,16.5px);line-height:1.7;color:var(--on-green-ivory);margin-top:14px;text-wrap:pretty}
.founder3 .founder3__intro{font-family:var(--corm);font-style:italic;font-size:clamp(24px,2.4vw,30px);line-height:1.25;color:var(--gold-2);margin-top:0}
.founder3 .founder3__close{clear:both;font-family:var(--play);font-size:clamp(22px,2.2vw,28px);line-height:1.25;color:var(--paper);margin-top:28px;padding-left:16px;border-left:2px solid var(--rule);max-width:24ch}
@media (max-width:480px){.founder3__photo{width:120px;margin-right:18px}.founder3__photo img{width:120px}.founder3__photo figcaption b{font-size:15px}}
.story__wrap--below{margin-top:clamp(70px,10vh,110px);padding-top:clamp(50px,7vh,80px);border-top:1px solid var(--hair-gold);align-items:center}
.story__lede h3.h{font-size:clamp(28px,3vw,40px);margin-top:14px}
.story__lede p.body{max-width:42ch}
.story__wrap--below .story__col{margin-top:0}

/* ═══ DEVICES (24 Sep, late) · every screen shown whole, in the thing it runs on ═══
   The phone: a dark bezel, the island in a status strip the app's own green, the capture whole beneath it (never cropped).
   The laptop: the lid with its bezel and camera, the capture whole at its own shape, the base with its notch.
   Pure CSS; the lid and the phone scale with their width (container units). Nothing here reaches outside its column. */
.phone{--sb:5.275%;box-sizing:content-box;container-type:inline-size;aspect-ratio:390/891;background:#1F5B4B;border:clamp(5px,.55vw,8px) solid #121413;border-radius:clamp(26px,2.6vw,40px);
  box-shadow:0 0 0 1.5px #45494a,0 0 0 2.5px rgba(255,255,255,.07),0 44px 80px -30px rgba(0,0,0,.6)}
.sec--band .phone,.tile:not(.tile--circle) .phone{box-shadow:0 0 0 1.5px #45494a,0 0 0 2.5px rgba(255,255,255,.07),0 34px 70px -30px rgba(18,63,48,.5)}
.phone img,.phone .im{inset:auto;left:0;top:var(--sb);width:100%;height:calc(100% - var(--sb));object-fit:cover;object-position:top}
/* the slot fix, v4.1 (port DECISIONS 17): a video in a phone takes the still's box under the status strip; its fade stays in the slot rules at the top of this sheet */
.phone video{inset:auto;left:0;top:var(--sb);width:100%;height:calc(100% - var(--sb));object-fit:cover;object-position:top}
.phone::before{content:"9:41";content:"9:41" / "";position:absolute;left:0;right:0;top:0;height:var(--sb);z-index:4;padding:0 7.5cqw;display:flex;align-items:center;
  font:600 3.6cqw/1 -apple-system,"SF Pro Text","Outfit",sans-serif;color:#fff;letter-spacing:.01em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='8' width='3' height='4' rx='.7'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.7'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.7'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.7'/%3E%3Cpath d='M29 3.2a9.6 9.6 0 0 1 12.4 0l-1.3 1.4a7.7 7.7 0 0 0-9.8 0zM31.5 5.9a6 6 0 0 1 7.4 0l-1.3 1.4a4.1 4.1 0 0 0-4.8 0zM34 8.6a2.3 2.3 0 0 1 2.4 0L35.2 10z'/%3E%3Crect x='46.5' y='1' width='19' height='10' rx='3' fill='none' stroke='%23fff' stroke-opacity='.5'/%3E%3Crect x='48' y='2.5' width='14' height='7' rx='1.6'/%3E%3Crect x='66.5' y='4' width='1.5' height='4' rx='.6' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 6.5cqw center/17cqw auto}
.phone::after{content:"";position:absolute;left:50%;top:1.9cqw;width:28cqw;height:8cqw;margin-left:-14cqw;border-radius:5cqw;background:#0b0c0c;z-index:5;pointer-events:none}
.phone--dev{width:min(236px,60vw);margin:0 auto}
.phone--dev.phone--s{width:min(200px,48vw)}
@media (max-width:600px){.phone--v4{width:min(196px,50vw)}}

.laptop{position:relative;width:100%;padding:0 5.5%;box-sizing:border-box;container-type:inline-size}
.laptop__lid{position:relative;background:#141615;border-radius:2.4cqw 2.4cqw .6cqw .6cqw;padding:2.3cqw 1.9cqw 2.1cqw;
  box-shadow:0 0 0 1px #3d4241,inset 0 0 0 1px rgba(255,255,255,.05)}
.laptop__lid::before{content:"";position:absolute;left:50%;top:.85cqw;width:.7cqw;height:.7cqw;margin-left:-.35cqw;border-radius:50%;background:#2c3130;box-shadow:inset 0 0 0 1px #3f4645}
.laptop__screen{position:relative;overflow:hidden;aspect-ratio:var(--ar,2880/1700);background:#FBF8F1;border-radius:.3cqw}
.laptop__screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;max-width:none;transform:none}
/* the slot fix, v4.1: a video in a laptop screen takes the still's box, whole, from the top */
.laptop__screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;max-width:none;transform:none}
.laptop__base{position:relative;margin:0 -5.8%;height:2.7cqw;border-radius:.4cqw .4cqw 50% 50% / .4cqw .4cqw 100% 100%;
  background:linear-gradient(#eef0ef 0,#d3d7d5 30%,#aeb3b0 78%,#7f8481 100%);box-shadow:0 1px 0 rgba(0,0,0,.25),0 30px 60px -22px rgba(0,0,0,.55)}
.laptop__base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:38%;margin-left:-7.5%;border-radius:0 0 1cqw 1cqw;background:linear-gradient(#aeb3b0,#c6cac8)}
.sec--band .laptop__base,.tiles .laptop__base{box-shadow:0 1px 0 rgba(0,0,0,.2),0 26px 50px -24px rgba(18,63,48,.45)}
/* the rooms desk (tabs, lightbox) sits in the lid as its screen */
.laptop .desk{aspect-ratio:2880/1700;border-radius:.3cqw;box-shadow:none}
.laptop .desk img{object-position:top}
/* the slot fix, v4.1: a video in a desk in the lid is placed as its img (.desk video, the slot rules above), and from the top as the img is */
.laptop .desk video{object-position:top}

/* ── the port fix (Lighthouse a11y): two v4 controls sat in --on-green-gold on the light band, 1.16:1. --gold-text reads 5.2:1 on the band (#F3EFE4).
   Lighthouse's node is the brochure stack's replay in #s-learn (div.wrap > div.split > div > button), not #s-jobs, which sits on the night green,
   where --on-green-gold is right and --gold-text would read 2.3:1; so the rule is scoped to a replay ON the band, wherever it sits ── */
.sec--band .run__replay,#t-grid .grid-w__swipe{color:var(--gold-text)}

/* ── the port fix (walk 4): with no JS, <html> keeps .no-js and every player rests on its final state, still — the stacks, the runners, the story and the two-screen as the script leaves them, Together on the couple's side. A replay does nothing without JS, so it is not shown ── */
.no-js .scard{opacity:1;transform:none;transition:none}
.no-js .stack>.scard:first-child{background:var(--panel);color:var(--band);border-color:rgba(240,220,166,.4)}
.no-js .stack>.scard:first-child i{color:var(--band)}
.no-js .stack>.scard:first-child .acts{display:none}
.no-js .stack>.scard:first-child .rcpt{display:block}
.no-js .stack__cap{opacity:1;transition:none}
.no-js .run [data-at]{opacity:1;transform:none;transition:none}
.no-js .run__clock b:not(:last-child){opacity:0}
.no-js [data-story] .frag{opacity:0;pointer-events:none;animation:none;transition:none;transform:translate(var(--tx),var(--ty)) scale(.5)}
.no-js [data-story] .record{opacity:.5;transform:translate(-50%,-100%) scale(.9);transition:none}
.no-js [data-story] .record__rows li{opacity:1;transform:none;transition:none}
.no-js [data-story] .icard{opacity:1;transform:translate(-50%,0);transition:none}
.no-js [data-story] .icard .acts button:first-child{background:var(--gold)}
.no-js [data-story] .icard .acts button:not(:first-child){opacity:.45}
.no-js [data-story] .icard .receipt,.no-js [data-story] .story__cap{opacity:1;transition:none}
.no-js .two4 .yes{opacity:1;transform:none;transition:none}
.no-js .two4 .num>span{transition:none}
.no-js .two4 .num>span.cur{transform:translateY(-100%);opacity:0}
.no-js .two4 .num>span.next{transform:none;opacity:1}
.no-js .two4 .remark{opacity:1;transition:none}
.no-js [data-side-sec="couple"]{display:block}
.no-js [data-story-replay],.no-js [data-stack-replay],.no-js [data-run-replay],.no-js [data-two-replay]{display:none}
/* the port fix (walk 4, found in its proof): the rolled lists — the ledger, the Drive tree, before → after — were opacity 0 with no JS, as the stacks were; they rest shown */
.no-js .track li,.no-js .tree li,.no-js .gone--v4 span{opacity:1;transform:none;transition:none}
.no-js .gone--v4 s{text-decoration-color:var(--rule);opacity:.5;transition:none}
/* v4.1: the couples tiles (that page's inline style) start at opacity 0 for the per-tile observer; with no JS they rest shown */
.no-js .tile{opacity:1;transform:none}

/* ═══ website v5 · the elevation (25 Sep 2026) — the studio's layer §1–§3, folded here, not a new sheet (brief §3.1,
   v4.1's precedent: a new /v5/ sheet would add a render-blocking request to every page). No :root, no token minted.
   §4 of that layer (the walk bar) is the prototype's own chrome and never ships. DRAFT ═══ */
/* §1 · screens you can read: the pair gets the room, the copy keeps its measure */
@media (min-width:1041px){
  .gate__wrap{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr)}
  .pair{grid-template-columns:minmax(0,1fr) 232px}
  .pair__phone .phone{width:232px}
}
@media (min-width:861px) and (max-width:1040px){
  .pair{grid-template-columns:minmax(0,1fr) 180px}
  .pair__phone .phone{width:180px}
}
@media (max-width:860px){
  .pair__phone .phone{width:44vw;max-width:230px}
}
.pair figcaption{min-height:0}
@media (max-width:860px){.pair__phone{flex-wrap:wrap}.pair__phone .look{order:3;flex-basis:100%}}
/* §2 · look closer: every screen opens large, and a label under it says so (v27.js inserts it after each opener,
   aria-hidden — the opener is the keyboard stop). A label, not a button: no second tab stop per screen (§3.3) */
.look{display:block;margin-top:10px;font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);opacity:.85;cursor:zoom-in;text-align:left}
.night .look,.sec--night .look{color:var(--gold)}
[data-lightbox]{cursor:zoom-in}
.crop[data-lightbox]:focus-visible,.phone[data-lightbox]:focus-visible,.laptop__screen[data-lightbox]:focus-visible{outline:2px solid var(--rule);outline-offset:4px}
/* §3 · screen frames for the new sections (phone rows) */
.sphones{display:flex;gap:clamp(14px,2vw,28px);justify-content:center;align-items:flex-end;flex-wrap:wrap}
.sphones .phone{margin:0;width:clamp(150px,19vw,240px)}
.sphones .phone.is-lead{width:clamp(180px,23vw,290px)}
.sphones figure{margin:0;text-align:center}
.sphones figcaption{margin-top:12px;font-family:var(--corm);font-style:italic;font-size:15px;line-height:1.35;color:var(--gold-text);max-width:240px;margin-inline:auto}
.night .sphones figcaption{color:var(--gold)}
@media (max-width:600px){.sphones .phone{width:40vw}.sphones .phone.is-lead{width:52vw}}
/* the tour's doors (brief §2.8): the button's type with no box, never competing with the section's button */
.tourdoor{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-head);padding-bottom:6px;border-bottom:1px solid var(--rule);white-space:nowrap;transition:border-color .22s var(--ease)}
.tourdoor .arr{font-family:Georgia,serif;font-size:16px;line-height:0;margin-left:6px}
.tourdoor:hover{border-color:currentColor}
.hero .tourdoor{color:var(--gold);animation:fadeUp 1s var(--ease) .4s both}