/* assets/boom-city.css — the city layer over css/boom-2026.css (v2, 16/10).
   System = boom-2026.css (tokens, nav, hero grid, steps, plates, faq,
   footer, paybar, reveal). This file carries only what the city desks add:
   the quiet technical layer and the lockup (the Executive v4 grammar), the
   hero where THE DIAGNOSTIC IS THE HERO (the Check-in's steps, the five
   facts, the pass that is the ticket, the door), the plates with the price
   as text, the six-entry grid, the folded fact sheet, the till as a native
   <dialog>, the strip, and the motion that is FEEDBACK (a step collapsing,
   a board flipping once, a meter moving, a tick drawing) — nothing loops at
   rest, everything is off under prefers-reduced-motion.
   Rules: STUDIO_EXECUTIVE_UIX.md (gold #FFD700, never the portal gold; no
   serif, no paper, no illustration), STUDIO_CITIES_ESPERIENZA.md §11 (one
   door, one label, the refund rule beside every €500, no meaning in --t4,
   no weight under 300 on the phone, targets ≥ 44px).
   17/10, after the adversarial review: every control ≥ 44px (change, share
   row, Save/Share, the plates' second link, the dialog's close); the
   off-screen menu invisible to focus; the consent plate under an open menu;
   the view-transition overlay lets taps through; the pass's busy state is
   real; the chosen pay row shows in forced colours; the strip and the +/x
   glyphs still under reduced motion; a print sheet. */

/* the UA's [hidden] loses to any display rule: this one never does (the
   §4.1 defect of 15/10 — a hidden step box that kept its grid) */
[hidden]{display:none!important}

:root{--oro-flap:#FFE55C;--t3b:rgba(255,255,255,.56)}

/* ── the quiet technical layer: a grid and two still orbs ── */
.tech-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.tech-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.05}
.tech-orb-1{width:620px;height:620px;background:radial-gradient(circle,var(--gold) 0%,transparent 70%);top:-200px;right:-100px}
.tech-orb-2{width:500px;height:500px;background:radial-gradient(circle,#635BFF 0%,transparent 70%);bottom:-150px;left:-100px;opacity:.03}
.tech-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,215,0,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,215,0,.015) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%)}
@media(max-width:768px){.tech-orb-1{width:300px;height:300px}.tech-orb-2{width:250px;height:250px}}

/* ── the lockup: BOOM │ CITY · tenant side ── */
.logo-mark{width:44px;height:44px}
.logo-text{font-size:22px}
.bl-div{width:1px;height:26px;background:var(--line-gold);margin:0 2px}
.bl-desk{font-size:9px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;line-height:1.6;font-weight:500}
.footer-brand-logo .bl-desk{font-size:11px;letter-spacing:3.6px;line-height:1.7;font-family:var(--sans)}
.nav-link.nav-door{color:var(--gold)}
.mobile-menu-group{display:block;margin-top:18px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--t3)}
/* closed, the menu is off the screen AND off the tab order: visibility
   follows the slide (hidden after the 400 ms out, visible at once on open) */
.mobile-menu:not(.active){visibility:hidden;transition:transform .4s var(--ease-out),visibility 0s .4s}
.mobile-menu.active{visibility:visible}
/* the consent plate never floats over the open menu */
body.menu-open .boomcst{visibility:hidden}

main{padding-top:112px}
@media(max-width:640px){main{padding-top:96px}}
section{margin-top:84px}
section[id],#contact,#checkin{scroll-margin-top:var(--boom-barra,96px)}
@media(max-width:640px){.sec-h{flex-direction:column;align-items:flex-start;gap:6px}}
/* the section labels are text, not ornament: --t4 measured 2.17:1 on the void */
.sec-h .num{color:var(--t3b)}
.late{content-visibility:auto;contain-intrinsic-size:auto 600px}

/* ── HERO: the question, the pass, the facts, the door ─────────────────────
   One DOM. Phone: the wrappers vanish (display:contents) and the items take
   the reading order — which is the DOM order: the build prints the pass right
   after the Check-in, so focus and screen readers meet the ticket where it
   appears. Desk: two columns; the JS moves the pass to the top of the right
   one (no sticky, see below). */
.hero{align-items:start;gap:0}
.hero-left,.hero-right{display:contents}
.hero-left>*{order:9}
.hero h1{order:1;font-weight:300;font-size:clamp(34px,5.4vw,56px);line-height:1.08;letter-spacing:-.5px;margin-top:0}
.hero h1 .flap-city{display:inline-block;font-size:.72em;font-weight:300;letter-spacing:0;color:var(--oro-flap);vertical-align:.1em;margin:0 .04em 0 .02em;white-space:nowrap}
.hero h1 .flap-city .fc2{margin-right:.06em}
/* the board is served empty (the raw H1 reads the city once): until the cells land, and without JS, CSS draws the word */
.hero h1 .flap-city:empty::before{content:attr(data-word)}
.hero .lead{order:2;color:var(--t2);font-size:15px;line-height:1.55;margin-top:14px;max-width:46ch}
.hero .checkin{order:3;margin-top:18px}
.hero #pass{order:4;margin-top:14px}
.hero .skipck{order:5;display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:12.5px;color:var(--t3b);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-gold)}
.hero .skipck:hover{color:var(--t1)}
.hero .facts{order:6;margin-top:10px}
.hero .filecard{order:7;margin-top:22px}
.hero-left>script{display:none}
@media(min-width:920px){
  .hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}
  .hero-left,.hero-right{display:block;min-width:0}
  /* no sticky: the right column (pass + door) is never shorter than the left,
     so sticky had no room to move, and where it could it hid the door's foot */
  .hero-right{align-self:start}
  .hero #pass{margin-top:0}
  /* a paint between the pass and the inline move never shows it in the left column */
  .hero-left>#pass{display:none}
  .hero .filecard{margin-top:16px}
  .hero h1{font-weight:200}
}
@media(min-width:1260px){.hero{gap:64px}}

/* ── the Check-in steps: one question at a time, the answered one folded ── */
.checkin{position:relative;border:1px solid var(--line-gold);border-radius:18px;padding:16px 16px 14px;background:radial-gradient(120% 90% at 100% 0%,rgba(255,215,0,.06),transparent 55%),var(--card)}
.checkin::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.ck-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ck-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.ck-landing{margin-top:8px;font-size:12.5px;color:var(--t2);line-height:1.5;padding:9px 12px;border:1px solid var(--line-gold);border-radius:10px;background:var(--gold-faint)}
.ck-steps{margin-top:10px;display:grid;gap:10px}
.ck-step{border:0;padding:0;margin:0;min-width:0;animation:fade-up .45s var(--ease) both}
.ck-step legend{padding:0;font-size:14.5px;font-weight:400;color:var(--t1);line-height:1.35}
.ck-step legend b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:400;font-size:11px;letter-spacing:1.6px;color:var(--gold);margin-right:8px}
.ck-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ck-opt{position:relative;display:block;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:13.5px}
.ck-opt input,.ck-doc input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ck-opt span{display:inline-flex;align-items:center;gap:10px;min-height:44px;border:1px solid var(--line);border-radius:100px;padding:9px 14px 9px 16px;background:var(--input);color:var(--t1);line-height:1.3;transition:border-color .3s,background .3s,box-shadow .3s,transform .15s}
.ck-opt span b{font-weight:400}
.ck-opt span small{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;letter-spacing:1.4px;color:var(--t3);text-transform:uppercase}
.ck-opt:hover span{border-color:var(--line-gold)}
.ck-opt input:checked+span{border-color:var(--gold);background:var(--gold-faint);box-shadow:inset 0 0 0 1px var(--gold)}
.ck-opt input:checked+span small{color:var(--gold)}
.ck-opt input:checked+span::before{content:'✓';font-size:10px;color:var(--gold);animation:pop .35s var(--ease) both}
.ck-opt input:focus-visible+span,.ck-doc input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.ck-opt:active span,.ck-doc:active span,.paybtn:active{transform:scale(.985)}
/* an answered step folds to its chosen chip and "change" */
.ck-step.done legend{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3)}
.ck-step.done .ck-opts{margin-top:6px;align-items:center}
.ck-step.done .ck-opt:not(.on){display:none}
.ck-step.done .ck-opt.on span{min-height:44px;padding:8px 12px 8px 14px;font-size:13px}
.ck-change{display:none;border:0;background:none;padding:8px 10px;min-height:44px;min-width:44px;font-family:inherit;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3b);cursor:pointer}
.ck-step.done .ck-change{display:inline-flex;align-items:center;min-height:44px}
.ck-change:hover{color:var(--t1)}
.ck-step.done .ck-opts .ck-change{order:9}

/* ── the facts: five rows, run-in, one gold label each ── */
.facts{margin:0;padding:0 4px;display:grid}
.facts div{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.facts div:last-child{border-bottom:0}
.facts dt{flex:none;width:92px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);padding-top:2px}
.facts dd{margin:0;font-size:13px;line-height:1.5;color:var(--t2);min-width:0}
.facts dd a{color:var(--t1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-gold)}
.facts .clock{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:1px;color:var(--t3b);margin-top:2px;min-height:0}
.facts .clock:empty{display:none}
@media(min-width:480px){.facts dt{width:118px}}

/* ── THE PASS: the ticket is the boarding pass ──────────────────────────── */
.pass{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);border-radius:18px;overflow:hidden;text-align:left;perspective:1200px;
  background:linear-gradient(168deg,#101014,#080809 72%);
  box-shadow:inset 0 0 0 1px var(--line-gold),inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -34px rgba(0,0,0,.9),0 0 50px rgba(255,215,0,.05)}
.pass[data-state="blank"]{display:none}
@media(min-width:920px){.pass[data-state="blank"]{display:grid;box-shadow:inset 0 0 0 1px var(--line)}}
.pass.in{animation:pass-in .7s var(--ease) both}
@keyframes pass-in{from{opacity:0;transform:translateY(-12px) rotateX(10deg)}to{opacity:1;transform:none}}
.pass::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(255,215,0,.12) 0 1px,transparent 1px 9px),repeating-linear-gradient(63deg,rgba(255,215,0,.12) 0 1px,transparent 1px 14px);
  -webkit-mask:radial-gradient(120% 130% at 0% 0%,#000 20%,transparent 62%);mask:radial-gradient(120% 130% at 0% 0%,#000 20%,transparent 62%)}
.pass .lamina{position:relative;display:grid;place-items:center;overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),linear-gradient(180deg,#7a5f16,#f6e27a 14%,#8a6d1f 32%,#fdf0a8 48%,#b8942b 63%,#f6e27a 78%,#6b5716 100%)}
.pass .lamina em{font-style:normal;writing-mode:vertical-rl;transform:rotate(180deg);font-size:7.5px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:#141005;white-space:nowrap;opacity:.9}
.pbody{position:relative;padding:14px 16px 12px;min-width:0}
.phead{display:flex;align-items:baseline;gap:6px 10px;justify-content:space-between;flex-wrap:wrap}
.phead b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold)}
.pcode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3b);text-align:right;white-space:nowrap;margin-left:auto}
.proute{display:flex;align-items:baseline;gap:12px;margin-top:10px;font-weight:300;font-size:clamp(26px,4.2vw,34px);letter-spacing:2px;color:var(--t1);line-height:1}
.proute .pto{color:var(--gold)}
.proute .cplane{font-size:.55em;color:var(--gold);align-self:center}
.pboard{margin-top:8px;font-size:13px;font-weight:300;color:var(--oro-flap);min-height:1.3em;white-space:nowrap;letter-spacing:0}
.pboard .fc2{margin-right:.06em}
.pblank{margin:12px 0 4px;font-size:13px;color:var(--t3b);line-height:1.5}
.peye{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.ppend{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.ppend p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--t1)}
.pplan{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.pplan h3{font-weight:300;font-size:clamp(22px,3.4vw,28px);margin-top:4px;line-height:1.1}
.pplan .price{margin-top:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pplan .flap-tk{font-size:26px;font-weight:300;color:var(--oro-flap);letter-spacing:0;white-space:nowrap;display:inline-block;min-height:1.27em;font-variant-numeric:tabular-nums}
.pplan .flap-tk .fc2{margin-right:.06em}
.pplan .price small{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3b)}
.pplan .why{margin-top:10px;font-size:13.5px;color:var(--t1);line-height:1.5}
.pplan .refund,.pplan .condlong{margin-top:8px;font-size:12px;color:var(--t2);line-height:1.5;padding-left:12px;border-left:2px solid var(--line-gold)}
.pplan .note{margin-top:10px;font-size:12.5px;color:var(--t2);line-height:1.5}
/* the papers */
.papers{border:0;padding:12px 0 0;margin:12px 0 0;border-top:1px solid var(--line-soft);min-width:0}
.papers legend{padding:0;font-size:13.5px;font-weight:400;color:var(--t1)}
.papers legend .peye{margin-bottom:2px}
.ck-sub{font-size:12px;color:var(--t3b);margin-top:4px}
.ck-docs{display:grid;gap:7px;grid-template-columns:minmax(0,1fr);margin-top:10px}
@media(min-width:560px){.ck-docs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ck-doc{position:relative;display:block;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:12.5px}
.ck-doc span{display:flex;align-items:center;gap:10px;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--input);color:var(--t2);line-height:1.35;transition:border-color .3s,background .3s,color .3s,transform .15s}
.ck-doc span::before{content:'';flex:none;width:16px;height:16px;border-radius:5px;border:1px solid var(--t3);display:inline-grid;place-items:center;font-size:10px;color:#1a1407;transition:background .25s,border-color .25s}
.ck-doc:hover span{border-color:var(--line-gold)}
.ck-doc input:checked+span{border-color:var(--line-gold);background:var(--gold-faint);color:var(--t1)}
.ck-doc input:checked+span::before{content:'✓';background:var(--gold);border-color:var(--gold)}
@property --meter{syntax:'<percentage>';inherits:false;initial-value:0%}
.ck-meter{margin-top:10px;height:6px;border-radius:100px;background:rgba(255,255,255,.06);overflow:hidden}
.ck-meter i{display:block;height:100%;width:var(--meter,0%);border-radius:100px;background:linear-gradient(90deg,var(--gold),#ffe55c);box-shadow:0 0 12px rgba(255,215,0,.5);transition:--meter .45s var(--ease),width .45s var(--ease)}
.papers .ready{font-size:12.5px;color:var(--t2);margin-top:8px;line-height:1.55}
/* the doors */
.pdoors{margin-top:14px;display:grid;gap:8px}
.pdoors .paybtn{padding:14px 16px}
.pdoors .till{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line-gold);border-radius:14px;padding:11px 16px;font-family:inherit;font-size:13px;color:var(--gold);background:var(--gold-faint);cursor:pointer;transition:background .3s,box-shadow .3s}
.pdoors .till:hover{background:var(--gold-muted);box-shadow:0 8px 24px rgba(255,215,0,.12)}
.pshare{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11.5px;color:var(--t3b)}
.pshare a,.pshare button{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:100px;padding:9px 14px;font-size:11.5px;letter-spacing:.3px;color:var(--t1);background:var(--input);transition:border-color .3s;font-family:inherit;cursor:pointer}
.pshare a:hover,.pshare button:hover{border-color:var(--line-gold)}
.ck-copied{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--green);min-height:1em}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.pgrid small{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--t3)}
.pgrid b{display:block;font-weight:400;font-size:12.5px;color:var(--t1);margin-top:2px;line-height:1.3;overflow-wrap:anywhere}
.ppers{margin-top:12px;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ppers .fld{margin:0}
.ppers .fld input{width:100%}
.ck-passbtns{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ck-save,.ck-sharebtn{min-height:44px;border:1px solid var(--line-gold);border-radius:100px;padding:10px 16px;font-size:12px;color:var(--gold);background:var(--gold-faint);transition:background .3s,box-shadow .3s;font-family:inherit;cursor:pointer}
.ck-save:hover,.ck-sharebtn:hover{background:var(--gold-muted);box-shadow:0 8px 24px rgba(255,215,0,.12)}
/* while the pass encodes, Save and Share are visibly busy and not tappable */
.pass.busy .ck-save,.pass.busy .ck-sharebtn{pointer-events:none;opacity:.6}
.perfo{position:relative;height:0;margin:14px -16px 0;border-top:1.5px dashed rgba(250,250,250,.22)}
.perfo::before,.perfo::after{content:'';position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--void);box-shadow:inset 0 0 0 1px var(--line)}
.perfo::before{left:-9px}
.perfo::after{right:-9px}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3)}
.pfoot .pside{color:var(--green)}
/* the states: what each shows */
.pass[data-state="blank"] .ppend,.pass[data-state="blank"] .pplan{display:none}
.pass:not([data-state="blank"]) .pblank{display:none}
.pass[data-state="pending"] .pplan{display:none}
.pass[data-state="resolved"] .ppend{display:none}
.pass:not([data-state="complete"]) .papers,.pass:not([data-state="complete"]) .pshare,.pass:not([data-state="complete"]) .pgrid,.pass:not([data-state="complete"]) .ppers{display:none}
.pass[data-state="complete"] .pplan{display:block}

/* ── the door: the file card ── */
.filecard{position:relative;border:1px solid var(--line-gold);border-radius:20px;background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(255,215,0,.04);padding:20px 20px 18px}
@media(max-width:640px){.filecard{padding:18px 16px 16px}}
.frow{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:480px){.frow.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.filecard .fld{margin-top:12px}
.filecard .frow .fld{margin-top:12px}
.filecard .frow:first-child .fld{margin-top:0}
.fld .opt{color:var(--t3);text-transform:none;letter-spacing:0}
.fld select{width:100%;background:var(--input);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;color:var(--t1);outline:none;transition:border-color .3s;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld select:focus{border-color:var(--line-gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the plan line: the pass writes here; the chips are one tap away */
.planline{margin-top:14px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(255,255,255,.015)}
.planline summary{list-style:none;cursor:pointer;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:11px 14px;min-height:44px}
.planline summary::-webkit-details-marker{display:none}
.planline .pl-k{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--t3)}
.planline #plText{font-weight:400;font-size:13px;color:var(--t1);flex:1;min-width:0}
.planline .pl-change{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.planline[open] .pl-change{display:none}
.planline .chips{padding:0 14px 14px;margin:0}
/* THE SERVICE AS CHIPS. A dropdown hides the three doors and their price
   behind a tap; a 2×2 grid of radio chips shows them. The radio stays in
   the tree (keyboard, screen reader, no-JS submit), the chip is its label. */
.chips{border:0;padding:0;min-width:0}
.chipgrid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.chips .chip{position:relative;display:block;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:13px;color:var(--t1)}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip span{position:relative;display:flex;flex-direction:column;gap:2px;min-height:56px;justify-content:center;border:1px solid var(--line);border-radius:12px;background:var(--input);padding:9px 12px;transition:border-color .3s,background .3s,box-shadow .3s}
.chip b{font-weight:400;font-size:13px;color:var(--t1);line-height:1.3}
.chip small{font-size:10.5px;letter-spacing:.4px;color:var(--gold)}
.chip.unsure small{color:var(--t3b)}
.chip:hover span{border-color:var(--line-gold)}
.chip input:checked+span{border-color:var(--gold);background:var(--gold-faint);box-shadow:inset 0 0 0 1px var(--gold)}
.chip input:checked+span::after{content:'✓';position:absolute;top:7px;right:10px;font-size:10px;line-height:1;color:var(--gold);animation:pop .35s var(--ease) both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.pricenote{margin-top:10px;font-size:11.5px;letter-spacing:.2px;color:var(--t3b);line-height:1.5}
.pricenote::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin:0 7px 1px 1px;opacity:.8}
.pricenote.refund{color:var(--t2)}
.more{margin-top:12px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(255,255,255,.015)}
.more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:11px 14px;min-height:44px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--t3b)}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:'+';color:var(--gold);font-size:15px;font-weight:300;transition:transform .3s var(--ease)}
.more[open] summary::before{transform:rotate(45deg)}
.more .morein{padding:2px 14px 14px}
.consent{font-size:11.5px;color:var(--t3b);margin-top:11px;text-align:center;line-height:1.7}
.consent a{color:var(--t2);text-decoration:underline;display:inline-block;padding:4px 0}
.paybtn.busy{opacity:.72;pointer-events:none}
/* served disabled until the desk script opens it: a shut door looks shut */
#fGo{transition:opacity .2s}
#fGo:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.4)}
.paybtn.busy .lk{animation:glide 1.1s ease-in-out infinite}
@keyframes glide{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.paybtn::after{animation:none}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.h-2{animation:fade-up .7s var(--ease) .05s both}
.h-3{animation:fade-up .7s var(--ease) .18s both}
/* the end states */
.sent{display:none;text-align:center;padding:14px 0 6px}
.sent.on{display:block;animation:fade-up .6s var(--ease) both}
.sent .tick{width:54px;height:54px;margin:0 auto}
.sent .tick svg{width:54px;height:54px;display:block}
.sent .tick circle{fill:var(--green-muted);stroke:rgba(61,220,151,.45);stroke-width:1}
.sent .tick path{fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34}
.sent.on .tick path{animation:draw .55s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sent .mini{margin-top:12px;min-height:1.5em}
.flap-mini{display:inline-block;font-size:16px;font-weight:300;letter-spacing:0;color:var(--oro-flap);min-height:1.27em;vertical-align:middle;white-space:nowrap}
.flap-mini .fc2{margin-right:.06em}
.sent h3{font-weight:300;font-size:22px;margin-top:10px}
.sent h3 em{font-style:normal;color:var(--gold)}
.sent p{font-size:13px;color:var(--t2);margin-top:8px}
.sent .plan{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);margin-top:6px}
.sent .next{list-style:none;margin:14px 0 0;padding:0;text-align:left;border-top:1px solid var(--line-soft)}
.sent .next li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--t2);line-height:1.5}
.sent .next li b{font-weight:400;color:var(--gold);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding-top:3px}
.sent .next li:last-child{border-bottom:none}
.payoffer{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.payoffer p{font-size:12px;color:var(--t3b);margin:0 0 10px}
.payoffer .refund{margin:10px 0 0;font-size:11.5px;color:var(--t2);line-height:1.5}
.hidden{display:none!important}

/* ── 01: the steps and the person ── */
.who{margin-top:14px;font-size:12.5px;color:var(--t2);line-height:1.6}
.who b{font-weight:400;color:var(--t1)}
.who a{color:var(--gold)}

/* ── 02: the plates, the price as text ── */
.plates{perspective:1100px}
.plates .sib{display:flex;flex-direction:column;padding:22px 22px 20px}
.plates .sib.on{border-color:var(--line-gold);background:radial-gradient(120% 100% at 0% 0%,rgba(255,215,0,.07),transparent 60%),var(--card)}
.plates .sib .se{display:flex;justify-content:space-between;gap:10px;align-items:baseline;color:var(--t3b)}
.plates .sib.on .se{color:var(--gold)}
.plates .sib .tag{font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-gold);border-radius:100px;padding:3px 8px;background:var(--gold-faint);white-space:nowrap}
.plates .sib.on::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.plates .sib b{font-size:19px;font-weight:300;margin-top:8px}
.plates .sib p{font-size:12.5px;color:var(--t3b);margin-top:8px;min-height:0;line-height:1.6}
.plates .inc{list-style:none;margin:12px 0 0;padding:0;flex:1}
.plates .inc li{position:relative;padding-left:18px;font-size:12.5px;color:var(--t2);line-height:1.55;margin-top:6px}
.plates .inc li::before{content:'✓';position:absolute;left:0;top:1px;color:var(--gold);font-size:11px}
.plates .price{margin-top:16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plates .price .num{font-size:30px;font-weight:300;color:var(--oro-flap);letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1}
.plates .price small{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3b)}
.plates .sib .go{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:100px;padding:11px 16px;font-size:12.5px;letter-spacing:.4px;color:var(--t2);transition:.3s;width:100%;font-family:inherit;cursor:pointer;background:transparent}
.plates .sib .go:hover{border-color:var(--line-gold);color:var(--t1)}
.plates .sib.on .go{border-color:var(--gold);background:linear-gradient(135deg,var(--gold),#d9b400);color:#1a1407;font-weight:600}
.plates .sib.on .go:hover{box-shadow:0 12px 34px rgba(255,215,0,.25)}
.plates .sib .go2{margin-top:8px;border:0;background:none;padding:12px 6px;min-height:44px;width:100%;font-family:inherit;font-size:12px;letter-spacing:.3px;color:var(--t3b);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-gold);cursor:pointer}
.plates .sib .go2:hover{color:var(--gold)}
.feenote{margin-top:16px;font-size:12px;color:var(--t3b);line-height:1.6;max-width:70ch}

/* ── 03: six checks, one line each ── */
.flows{margin-top:26px;display:grid;gap:0;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
@media(min-width:760px){.flows{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow{display:flex;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line-soft);transition:background .3s}
@media(min-width:760px){.flow:nth-child(odd){border-right:1px solid var(--line-soft)}.flow:nth-last-child(-n+2){border-bottom:none}}
@media(max-width:759px){.flow:last-child{border-bottom:none}}
.flow:hover{background:rgba(255,255,255,.015)}
.flow .n{flex:none;font-size:12px;color:var(--gold);opacity:.7;padding-top:2px;width:20px;font-weight:300}
.flow b{display:block;font-weight:400;font-size:14.5px}
.flow b .at{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:1.2px;color:var(--t3b);text-transform:uppercase;margin-left:8px;font-weight:400}
.flow p{font-size:12.5px;color:var(--t2);margin-top:4px;line-height:1.6}

/* ── the reveal choreography: a block fades up (boom-2026 .rv), its children
   follow one beat apart. Without JS the <noscript> rule shows everything;
   under reduced motion nothing moves. ── */
.rv .step,.rv .sib,.rv .flow,.rv .faq details{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in .step,.rv.in .sib,.rv.in .flow,.rv.in .faq details{opacity:1;transform:none}
.rv.in :is(.step,.sib,.flow,.faq details):nth-child(2){transition-delay:.09s}
.rv.in :is(.step,.sib,.flow,.faq details):nth-child(3){transition-delay:.18s}
.rv.in :is(.step,.sib,.flow,.faq details):nth-child(4){transition-delay:.27s}
.rv.in :is(.step,.sib,.flow,.faq details):nth-child(5){transition-delay:.36s}
.rv.in :is(.step,.sib,.flow,.faq details):nth-child(n+6){transition-delay:.45s}
.rv .sib.on .inc li{opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in .sib.on .inc li{opacity:1;transform:none}
.rv.in .sib.on .inc li:nth-child(1){transition-delay:.35s}
.rv.in .sib.on .inc li:nth-child(2){transition-delay:.45s}
.rv.in .sib.on .inc li:nth-child(3){transition-delay:.55s}
.rv.in .sib.on .inc li:nth-child(4){transition-delay:.65s}
.rv.in .sib.on .inc li:nth-child(5){transition-delay:.75s}
/* scroll-driven where the browser has it: the plates come up off the table */
@supports (animation-timeline: view()){
  .rv .plates .sib{animation:plate-in linear both;animation-timeline:view();animation-range:entry 0% entry 60%;transform-origin:50% 100%}
  @keyframes plate-in{from{rotate:x 16deg;translate:0 28px}to{rotate:none;translate:none}}
  .rv .flows .flow{animation:flow-in linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  @keyframes flow-in{from{translate:0 14px}to{translate:none}}
}
/* a view transition scoped to the Check-in: the rest of the page never snapshots */
:root{view-transition-name:none}
.ck-steps{view-transition-name:ck-steps}
#pass{view-transition-name:ck-pass}
::view-transition-old(ck-steps),::view-transition-new(ck-steps),::view-transition-old(ck-pass),::view-transition-new(ck-pass){animation-duration:.26s}
/* the UA's overlay is fixed over the page for the transition's life: a tap
   in that quarter second must reach the page, not the snapshot */
::view-transition{pointer-events:none}

/* ── in brief — the quotable ledger (GEO: class names load-bearing), folded for humans ── */
.sheetfold{border:1px solid var(--line);border-radius:16px;background:var(--card)}
.sheetfold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;min-height:44px;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--t3b)}
.sheetfold>summary::-webkit-details-marker{display:none}
.sheetfold>summary::after{content:'+';color:var(--gold);font-size:19px;font-weight:200;transition:transform .3s var(--ease)}
.sheetfold[open]>summary::after{transform:rotate(45deg)}
.enbref{border-left:2px solid var(--gold);background:linear-gradient(90deg,var(--gold-faint),transparent 55%);padding:4px 26px 24px}
.enbref h2{display:flex;align-items:baseline;gap:14px;font-size:11px;letter-spacing:2.8px;text-transform:uppercase;color:var(--gold);font-weight:400}
.enbref h2 .ref{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;letter-spacing:1.6px;color:var(--t3)}
.enbref dl{display:grid;grid-template-columns:minmax(0,1fr);margin-top:12px}
@media(min-width:660px){.enbref dl{grid-template-columns:172px minmax(0,1fr);column-gap:22px}}
.enbref dt{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--t3);padding-top:12px}
.enbref dd{font-size:13.5px;line-height:1.65;color:var(--t2);padding:3px 0 12px;border-bottom:1px solid var(--line-soft)}
@media(min-width:660px){.enbref dt{border-bottom:1px solid var(--line-soft);padding-bottom:12px}}
.enbref dt:last-of-type,.enbref dd:last-of-type{border-bottom:none}
.enbref b{color:var(--t1);font-weight:400}
.enbref a{color:var(--gold)}

/* ── the till: a native dialog with the Rome sheet inside ── */
dialog#ov{border:1px solid var(--line-gold);background:var(--surface);color:var(--t1);width:min(480px,100%);max-width:100%;max-height:88dvh;overflow:auto;margin:auto auto 0;padding:24px 22px calc(24px + var(--safe));border-radius:22px 22px 0 0;box-shadow:0 -30px 80px rgba(0,0,0,.5)}
@media(min-width:640px){dialog#ov{margin:auto;border-radius:22px}}
dialog#ov::backdrop{background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog#ov[open]{animation:rise .35s var(--ease)}
dialog#ov.inplace{position:relative;margin:24px auto 0;box-shadow:none;border-radius:22px}
dialog#ov .x{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;margin:-8px -10px 0 0;border:0;background:none;font-family:inherit;cursor:pointer}
.payrows{margin-top:14px;display:grid;gap:8px}
.payrow{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;background:var(--input);transition:border-color .3s,background .3s,box-shadow .3s}
.payrow input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.payrow span{flex:1;min-width:0}
.payrow b{display:block;font-weight:400;font-size:13.5px;color:var(--t1)}
.payrow small{display:block;font-size:11px;color:var(--t3b);margin-top:2px;line-height:1.4}
.payrow em{font-style:normal;color:var(--gold);font-size:15px;font-weight:300;white-space:nowrap}
.payrow:hover{border-color:var(--line-gold)}
.payrow.on,.payrow:has(input:checked){border-color:var(--gold);background:var(--gold-faint);box-shadow:inset 0 0 0 1px var(--gold)}
.payrow input:focus-visible~em{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
/* the chosen row carries a glyph, not only a colour (forced colours keep it) */
.payrow:has(input:checked) b::before{content:'✓ ';color:var(--gold)}
@media(forced-colors:active){.payrow:has(input:checked){outline:3px solid Highlight;outline-offset:2px}}
.sheet .opt{color:var(--t3b);text-transform:none;letter-spacing:0}
.sheet .fine{margin-top:12px;font-size:11px;color:var(--t3b);line-height:1.6;text-align:center}
.sheet .alt a+a{margin-left:0}
/* the withdrawal right, said before the payment; the early start is the payer's own tick (never pre-ticked) */
.sheet .startnow{display:flex;gap:10px;align-items:flex-start;margin-top:14px;min-height:44px;font-size:12px;line-height:1.5;color:var(--t2);cursor:pointer;text-transform:none;letter-spacing:0}
.sheet .startnow input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold)}
.sheet .recesso{margin-top:6px;font-size:11px;line-height:1.55;color:var(--t3b)}
.sheet .recesso a{color:var(--gold)}
.sent .wait{margin-top:10px;font-size:13px;line-height:1.55;color:var(--t2)}

/* ── the strip: the one door on a phone, no price ── */
.paybar .go{font-family:inherit;cursor:pointer;border:0;min-height:44px;display:inline-flex;align-items:center}
.paybar .pinfo small{color:var(--t3b)}

/* footer: the tenant-side statement sits between tagline and company */
.footer-statement{font-size:12px;color:var(--t3b);line-height:1.7;margin:-8px 0 18px;max-width:60ch}

/* ── polish ── */
.skip{position:absolute;left:-9999px;top:0;z-index:10002;background:var(--gold);color:#1a1407;padding:12px 18px;border-radius:0 0 12px 0;font-size:13px;font-weight:600}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
/* the phone strip covers the footer's last row at the bottom of the page:
   footer.footer gives back the clearance .footer overrides (strip = 66px) */
@media screen and (max-width:879px){footer.footer{padding-bottom:calc(var(--space-2xl) + 66px + var(--safe))}}
/* the menu button is a 44px target (it measured 44x36) */
.nav-toggle{min-width:44px;min-height:44px;justify-content:center;align-items:center}
/* viewport-fit=cover: in landscape the lockup, the text and the strip keep
   clear of the sensor housing */
@supports (padding:max(0px)){
  .container{padding-left:max(var(--space-lg),env(safe-area-inset-left));padding-right:max(var(--space-lg),env(safe-area-inset-right))}
  @media (min-width:768px){.container{padding-left:max(var(--space-2xl),env(safe-area-inset-left));padding-right:max(var(--space-2xl),env(safe-area-inset-right))}}
  .nav .container{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .paybar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  main{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}

@media(prefers-reduced-motion:reduce){
  .h-2,.h-3,.ck-step,.pass.in{animation:none}
  .rv .step,.rv .sib,.rv .flow,.rv .faq details,.rv .sib.on .inc li{opacity:1;transform:none;transition:none}
  .chip input:checked+span::after,.ck-opt input:checked+span::before{animation:none}
  .paybtn.busy .lk{animation:none}
  .sent.on{animation:none}
  .sent .tick path{stroke-dashoffset:0;animation:none}
  html{scroll-behavior:auto}
  .rv .plates .sib,.rv .flows .flow{animation:none}
  .ck-meter i{transition:none}
  dialog#ov[open]{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .paybar,.more summary::before,.sheetfold>summary::after,.faq summary::after,.ck-opt span,.ck-doc span,.chip span,.mobile-menu,.mobile-menu:not(.active){transition:none}
  .sib:hover,.g-it:hover{transform:none}
}

/* ── print: a paper copy of the ticket and the checks, black on white ── */
@media print{
  body{background:#fff;color:#000}
  *,*::before,*::after{color:#000!important;text-shadow:none!important;box-shadow:none!important}
  .pass,.pass .pbody,.pass::before,.checkin,.filecard,.sib,.flows,.enbref,.ck-opt span,.ck-doc span,.chip span{background:#fff!important}
  .nav,.mobile-menu,.tech-bg,.paybar,dialog,.boomcst,.skip,.skipck,.pdoors,.pshare,.ppers,.ck-change,.ck-passbtns,.footer-links-list{display:none!important}
  .pass,.checkin,.filecard,.sib,.flows,.enbref{box-shadow:none;border-color:#999;color:#000;background:#fff}
  .pass .lamina{background:#ddd}
  .hero,.hero-left,.hero-right{display:block}
  a{color:#000}
}

/* THE TOUCH. On iPhone a field under 16px makes the page ZOOM on first tap
   and it does not come back by itself: the form that must convert opens
   crooked. Only where the pointer is a finger (tests/telefono). */
@media (pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  select, textarea { font-size:16px !important; }
}