/* NFC order page (nfc.html). Loads after site.css and reuses its tokens, buttons, header, form fields (.q-*),
   closing box (.cta-box), FAQ and footer. Everything here is the builder: the live card, plate and phone. */

/* ---------- Colour themes for the product (also used by the swatches and the order summary) ---------- */
[data-theme="nuit"]   { --t-bg: #0B1020; --t-ink: #fff; --t-muted: #A9AEC2; --t-acc: #FF6A3D; --t-acc-ink: #0B1020; --t-tile: #fff; --t-tile-ink: #0B1020; --t-line: rgba(255,255,255,.09); --t-qr: #fff; }
[data-theme="papier"] { --t-bg: #F6F4EF; --t-ink: #0B1020; --t-muted: #565B6E; --t-acc: #D9461A; --t-acc-ink: #fff; --t-tile: #0B1020; --t-tile-ink: #fff; --t-line: rgba(11,16,32,.08); --t-qr: #fff; }
[data-theme="nova"]   { --t-bg: linear-gradient(135deg, #6B4DF5, #CF4518); --t-ink: #fff; --t-muted: rgba(255,255,255,.8); --t-acc: #0B1020; --t-acc-ink: #fff; --t-tile: #fff; --t-tile-ink: #0B1020; --t-line: rgba(255,255,255,.16); --t-qr: #fff; }
[data-theme="cafe"]   { --t-bg: radial-gradient(120% 90% at 50% 0%, #5A3423, #24140D 72%); --t-ink: #F6E9D6; --t-muted: #CDB497; --t-acc: #D9A066; --t-acc-ink: #24140D; --t-tile: #F6E9D6; --t-tile-ink: #24140D; --t-line: rgba(246,233,214,.1); --t-qr: #F6E9D6; }
[data-theme="bois"]   { --t-bg: repeating-linear-gradient(91deg, rgba(92,52,20,.16) 0 2px, transparent 2px 9px), repeating-linear-gradient(87deg, rgba(255,232,196,.12) 0 1px, transparent 1px 15px), radial-gradient(60% 30% at 30% 70%, rgba(110,62,24,.25), transparent 70%), linear-gradient(180deg, #D7A169, #B57A42);
                        --t-ink: #3A2210; --t-muted: #5E3B1E; --t-acc: #3A2210; --t-acc-ink: #F3DDBF; --t-tile: #F3DDBF; --t-tile-ink: #3A2210; --t-line: rgba(58,34,16,.14); --t-qr: #F3DDBF; }

/* ---------- Page frame ---------- */
.cfg { padding: 112px 0 90px; overflow: clip; }
.cfg::before { content: ""; position: absolute; z-index: -1; inset: 0 auto auto -10%; width: 60%; height: 900px; background: radial-gradient(closest-side, rgba(123,92,255,.22), transparent 72%); pointer-events: none; }
.cfg { isolation: isolate; }
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px 56px; align-items: start; }

/* ---------- Live preview ---------- */
.pv { position: sticky; top: 96px; }
.pv-stage { --px: -30%; --py: -26%; --rx: 66%; --ry: 24%; position: relative; aspect-ratio: 1 / .92; width: 100%; border-radius: 28px; background: radial-gradient(90% 80% at 40% 35%, #18204A, #0E1430 70%); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.pv-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 92% 108%, transparent 0 46px, rgba(255,255,255,.035) 46px 47px); }
.obj { position: absolute; container-type: inline-size; transition: opacity .34s var(--m-ease), translate .5s var(--m-ease), scale .5s var(--m-ease), width .5s var(--m-ease), left .5s var(--m-ease), top .5s var(--m-ease); }
.obj[data-off] { opacity: 0; scale: .94; pointer-events: none; visibility: hidden; transition: opacity .25s, scale .3s, visibility 0s .3s; }

/* card: 85.6 x 54 mm */
.o-card { left: 4%; top: 13%; width: 72%; aspect-ratio: 85.6 / 54; perspective: 1400px; z-index: 2; }
.o-card .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pv-stage[data-side="back"] .o-card .flip { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 4.4cqi; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--t-bg); color: var(--t-ink);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06); }
.face.back { transform: rotateY(180deg); }
.face::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 96% 112%, transparent 0 6cqi, var(--t-line) 6cqi calc(6cqi + 1px)); pointer-events: none; }
.face .waves { position: absolute; top: 7cqi; inset-inline-end: 7cqi; width: 7cqi; height: 7cqi; color: var(--t-ink); opacity: .9; }
.face .waves circle { fill: var(--t-acc); }
.face.front .mark { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 14cqi; }
.face.back .who { position: absolute; inset-inline-start: 8cqi; bottom: 9cqi; max-width: 52cqi; }
.face.back .who b { display: block; font: 700 7.4cqi/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.face.back .who em { display: block; margin-top: 2.6cqi; font: 800 2.9cqi/1.25 var(--body); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--t-acc); }
.face.back .who small { display: block; margin-top: 1.4cqi; font: 700 2.7cqi/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--t-muted); }
[dir="rtl"] .face .who em, [dir="rtl"] .face .who small { letter-spacing: 0; }
.face.back .mini { position: absolute; top: 7cqi; inset-inline-start: 8cqi; height: 9cqi; max-width: 30cqi; }
.face.back .qr { position: absolute; inset-inline-end: 7cqi; bottom: 8cqi; width: 23cqi; padding: 2cqi; border-radius: 2.6cqi; background: var(--t-qr); }
[data-theme="papier"] .face.back .qr { box-shadow: 0 0 0 1px rgba(11,16,32,.12); }

/* the brand mark: the client's logo, or the name set in type */
.lg { display: grid; place-items: center; max-width: 100%; }
.lg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lg.chip { background: #fff; border-radius: 3cqi; padding: 2.4cqi 3.4cqi; }
.lg .word { font: 700 9cqi/1.02 var(--display); letter-spacing: -.03em; text-align: center; overflow-wrap: anywhere; color: var(--t-ink); }
.lg .word i { font-style: normal; color: var(--t-acc); }
.face.front .lg { height: 30cqi; width: 100%; }
.face.front .lg.chip { height: auto; width: auto; max-height: 34cqi; }
.face.front .lg.chip img { max-height: 24cqi; }
.face.back .mini .lg { height: 9cqi; justify-items: start; }
.face.back .mini .lg.chip { padding: 1.2cqi 1.8cqi; border-radius: 1.6cqi; }
.face.back .mini .lg.chip img { max-height: 6.4cqi; }
.face.back .mini .word { font-size: 4.2cqi; text-align: start; }

/* plate: square, like the ones on the counters */
.o-plate { left: 5%; top: 5%; width: 60%; aspect-ratio: 1; z-index: 1; }
.plate { position: absolute; inset: 0; border-radius: 3.4cqi; overflow: hidden; background: var(--t-bg); color: var(--t-ink); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6.5cqi 7cqi 7cqi;
  box-shadow: 0 34px 60px -30px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06); }
/* nothing on the plate may be squeezed (a squeezed line is cut in half by its own overflow) */
.plate > * { flex-shrink: 0; }
.plate .lg { height: 11cqi; width: 70cqi; }
.plate .lg.chip { width: auto; height: auto; }
.plate .lg.chip img { max-height: 10cqi; }
.plate .lg .word { font-size: 7.4cqi; }
.plate .meta { margin-top: 2cqi; font: 800 2.9cqi/1.35 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--t-acc); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[dir="rtl"] .plate .meta { letter-spacing: 0; font-size: 3cqi; line-height: 1.7; }
[dir="rtl"] .plate .icons { margin-top: 2cqi; }
.plate .rule { width: 34cqi; height: 1px; margin: 2.6cqi auto 0; background: linear-gradient(90deg, transparent, var(--t-acc), transparent); opacity: .8; }
.plate .hl { margin-top: 2.6cqi; font: 700 8.2cqi/1 var(--display); letter-spacing: -.03em; }
.plate .hl span { display: block; color: var(--t-acc); }
[dir="rtl"] .plate .hl { font-size: 7.2cqi; line-height: 1.2; letter-spacing: 0; }
.plate .alt { margin-top: 1.8cqi; font: 700 4cqi/1.3 "Cairo", var(--body); color: var(--t-muted); }
.plate .alt[dir="ltr"] { font-family: var(--body); font-size: 3.4cqi; }
.plate .icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8cqi; margin-top: 2.8cqi; min-height: 7cqi; }
.plate .icons span { width: 7cqi; height: 7cqi; border-radius: 50%; display: grid; place-items: center; border: max(1px, .3cqi) solid var(--t-acc); color: var(--t-ink); }
.plate .icons svg { width: 3.8cqi; height: 3.8cqi; }
.plate .tiles { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2.4cqi; }
.plate .tile { aspect-ratio: 1 / .78; border-radius: 3cqi; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3cqi 2cqi 2.6cqi; }
.plate .tile b { font: 800 3.1cqi/1 var(--body); letter-spacing: .22em; }
[dir="rtl"] .plate .tile b { letter-spacing: 0; font-size: 3.6cqi; }
.plate .tile small { font: 600 2.2cqi/1.2 var(--body); }
.plate .tile.t-tap { background: var(--t-acc); color: var(--t-acc-ink); }
.plate .tile.t-tap svg { width: 13cqi; height: 13cqi; }
.plate .tile.t-scan { background: var(--t-tile); color: var(--t-tile-ink); }
.plate .tile.t-scan .qr { width: 16cqi; padding: 1cqi; border-radius: 1.2cqi; background: #fff; }
.plate .or { font: 800 2.6cqi/1 var(--body); color: var(--t-acc); text-transform: lowercase; }
[data-theme="bois"] .plate .tile.t-tap { box-shadow: inset 0 0 0 .5cqi rgba(0,0,0,.2); }

.qr svg { display: block; width: 100%; height: auto; }

/* where things sit, per product */
.pv-stage[data-product="pack"] .o-plate { left: 3%; top: 3%; width: 56%; }
.pv-stage[data-product="pack"] .o-card { left: 25%; top: 51%; width: 50%; z-index: 3; }
.pv-stage[data-product="plate"] { --px: -24%; --py: -10%; --rx: 22%; --ry: 56%; }
.pv-stage[data-product="pack"]  { --px: -22%; --py: -6%; --rx: 66%; --ry: 60%; }

/* the phone that "taps" the product and shows the page it opens */
/* the stage is a size container, so the phone's own corners scale with it (cqi on .ph itself would mean the stage) */
.pv-stage { container-type: inline-size; }
.ph { position: absolute; right: 3%; bottom: 3%; width: 25%; aspect-ratio: 9 / 19; z-index: 4; container-type: inline-size; border-radius: 3.4cqi; padding: .8cqi; background: #05070F;
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.12); transition: translate .55s cubic-bezier(.2,.8,.2,1); }
.ph::after { content: ""; position: absolute; top: 5.4cqi; left: 50%; width: 26cqi; height: 6cqi; translate: -50% 0; border-radius: 99px; background: #05070F; z-index: 2; }
.ph-scr { position: relative; height: 100%; border-radius: 10cqi; overflow: hidden; background: #0E1430; }
.ph-idle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6cqi; padding: 10cqi; text-align: center; font: 700 6.4cqi/1.25 var(--body); color: var(--muted); transition: opacity .3s; }
.ph-idle img { width: 30cqi; height: 30cqi; }
.ph-page { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease .1s; overflow: hidden; }
.pv-stage.open .ph-page { opacity: 1; }
.pv-stage.open .ph-idle { opacity: 0; }
/* the stage keeps one layout in every language (product on the left, phone on the right), like a photo would */
.pv-stage { direction: ltr; }
.pv-stage > * { direction: var(--page-dir, ltr); }
[dir="rtl"] .pv-stage > * { --page-dir: rtl; }
/* js/nfc.js (aim) sets --px/--py so the phone's top lands on the "Touchez" tile or the card, tilted like a hand holds it */
.pv-stage.near .ph { translate: var(--px) var(--py); rotate: -9deg; }
.ph { transition: translate .55s cubic-bezier(.2,.8,.2,1), rotate .55s cubic-bezier(.2,.8,.2,1); }

/* the links page inside the phone, in the client's colours */
.pg { position: absolute; inset: 0; background: var(--t-bg); color: var(--t-ink); padding: 18cqi 8cqi 8cqi; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pg .av { width: 34cqi; height: 34cqi; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--t-tile); box-shadow: 0 0 0 1.4cqi color-mix(in srgb, var(--t-acc) 55%, transparent); }
.pg .av .lg { width: 78%; height: 78%; }
.pg .av .lg.chip { background: none; padding: 0; }
.pg .av .word { font-size: 12cqi; color: var(--t-tile-ink); }
.pg .av .word i { color: inherit; }
.pg h4 { margin-top: 6cqi; font: 700 8.6cqi/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pg p { margin-top: 1.6cqi; font: 700 5cqi/1.3 var(--body); color: var(--t-muted); }
.pg ul { list-style: none; width: 100%; display: grid; gap: 3.4cqi; margin-top: 8cqi; }
.pg li { display: flex; align-items: center; gap: 4cqi; height: 14.5cqi; padding-inline: 5cqi; border-radius: 99px; font: 800 5.4cqi/1 var(--body); background: color-mix(in srgb, var(--t-ink) 9%, transparent); border: 1px solid color-mix(in srgb, var(--t-ink) 14%, transparent); }
.pg li:first-child { background: var(--t-acc); color: var(--t-acc-ink); border-color: transparent; }
.pg li svg { width: 6.4cqi; height: 6.4cqi; flex: none; }
.pg .by { margin-top: auto; font: 700 4.2cqi/1 var(--body); color: var(--t-muted); opacity: .8; }

/* the ripple where the phone touches */
.pv-ripple { position: absolute; left: var(--rx); top: var(--ry); z-index: 3; width: 0; height: 0; pointer-events: none; }
.pv-ripple i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; }
.pv-stage.rip .pv-ripple i { animation: pv-rip 1.1s cubic-bezier(.2,.8,.2,1) both; }
.pv-stage.rip .pv-ripple i:nth-child(2) { animation-delay: .16s; }
.pv-stage.rip .pv-ripple i:nth-child(3) { animation-delay: .32s; }
@keyframes pv-rip { from { transform: scale(.25); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.seg button { min-height: 38px; padding: 0 16px; border-radius: 999px; font: 700 14px/1 var(--body); color: var(--muted); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--night); }
.seg[hidden] { display: none; }
.pv-tap { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,106,61,.5); color: #fff; font: 700 14.5px/1 var(--body); margin-inline-start: auto; }
.pv-tap svg { width: 20px; height: 20px; color: var(--orange); }
.pv-tap:hover { border-color: var(--orange); background: rgba(255,106,61,.08); }

/* ---------- The choices ---------- */
.cf h1 { font: 700 clamp(38px, 4.4vw, 62px)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; }
[dir="rtl"] .cf h1 { line-height: 1.3; letter-spacing: 0; }
.cf .lead { margin-top: 18px; color: var(--muted); font-size: 18px; max-width: 520px; }
.cf-step { border: 0; padding: 0; margin: 34px 0 0; min-width: 0; }
.cf-step[hidden] { display: none; }
.cf-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0; font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }
.cf-h b { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--body); color: var(--night); background: linear-gradient(135deg, var(--violet), var(--orange)); }

.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.prod { position: relative; display: block; cursor: pointer; }
.prod input, .sw input, .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prod-box { display: flex; flex-direction: column; height: 100%; padding: 10px 10px 14px; border-radius: 18px; background: var(--n2); border: 1px solid var(--line); transition: border-color var(--m-out) var(--m-ease), background var(--m-out) var(--m-ease), translate var(--m-card) var(--m-ease); }
.prod-pic { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #0E1430; margin-bottom: 12px; position: relative; }
.prod-pic img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--m-image) var(--m-ease); }
.prod-pic.duo img { position: absolute; width: 64%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 6px; }
.prod-pic.duo img:first-child { left: 6%; top: 8%; width: 56%; }
.prod-pic.duo img:last-child { right: 5%; bottom: 9%; width: 58%; box-shadow: 0 10px 20px -8px rgba(0,0,0,.8); }
.prod-box b { font: 700 16px/1.2 var(--display); padding-inline: 4px; }
.prod-box small { margin-top: 3px; padding-inline: 4px; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.prod-price { margin-top: auto; padding: 10px 4px 0; font: 800 15px/1 var(--body); font-style: normal; color: #fff; }
.prod input:checked + .prod-box { border-color: var(--orange); background: #1A1A35; box-shadow: inset 0 0 0 1px var(--orange); }
.prod input:focus-visible + .prod-box { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .prod:hover .prod-box { translate: 0 -2px; border-color: rgba(255,255,255,.28); transition-duration: var(--m-in); }
  .prod:hover input:checked + .prod-box { border-color: var(--orange); }
  .prod:hover .prod-pic img { scale: 1.03; }
}

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--n2); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: border-color var(--m-out) var(--m-ease); }
[dir="rtl"] .sw { padding: 0 7px 0 16px; }
.sw-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--t-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); position: relative; }
.sw-dot::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--t-acc); }
.sw:hover { border-color: rgba(255,255,255,.35); }
.sw:has(input:checked) { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.sw:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }

.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.check { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; color: #D5D8E4; cursor: pointer; min-height: 32px; }
.check span::before { content: ""; display: inline-block; vertical-align: -5px; width: 20px; height: 20px; margin-inline-end: 10px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.35); transition: background var(--m-in), border-color var(--m-in); }
.check input:checked + span::before { background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1020' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; border-color: var(--orange); }
.check input:focus-visible + span::before { outline: 2px solid var(--orange); outline-offset: 2px; }
.check[hidden] { display: none; }
.cf .q-field input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: var(--n2); color: #fff; font-size: 16px; }
.cf .q-field input::placeholder { color: #7D839C; }
.cf .q-field input:focus { outline: none; border-color: var(--orange); }
.cf .q-row .q-field { margin-top: 14px; }
.cf .q-field { margin-top: 14px; }
.q-chips.links .q-chip span { gap: 8px; }
.q-chips.links .q-chip svg { width: 17px; height: 17px; flex: none; }
.cf .q-chip span { min-height: 42px; }

.buy { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; margin-top: 34px; padding: 14px 14px 14px 20px; border-radius: 22px; background: rgba(18,24,49,.94); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); backdrop-filter: blur(10px); }
[dir="rtl"] .buy { padding: 14px 20px 14px 14px; }
.qty { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; color: var(--muted); }
.stepper { display: flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); }
.stepper button { width: 40px; height: 40px; border-radius: 50%; font: 700 20px/1 var(--body); color: #fff; }
.stepper button:hover { background: var(--n3); }
.stepper output { min-width: 28px; text-align: center; font: 800 16px/1 var(--body); color: #fff; }
.tot { display: grid; line-height: 1.15; }
.tot small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.tot b { font: 700 22px/1.15 var(--display); letter-spacing: -.01em; }
.buy .btn { margin-inline-start: auto; }
[dir="rtl"] .buy .btn svg { transform: scaleX(-1); }

/* ---------- Real plates gallery ---------- */
.ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.ex-grid .zf { border-radius: 18px; aspect-ratio: 1; box-shadow: 0 24px 40px -28px rgba(11,16,32,.55); }
.ex-grid img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--m-image) var(--m-ease); }
@media (hover: hover) and (pointer: fine) { .ex-grid .zf:hover img { scale: 1.03; } }

/* ---------- What's included ---------- */
.inc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.inc article { padding: 26px 24px 28px; border-radius: var(--r); background: var(--n2); border: 1px solid var(--line); }
.inc .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,106,61,.12); }
.inc .ic svg { width: 24px; height: 24px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inc h3 { margin-top: 20px; font: 700 19px/1.25 var(--display); letter-spacing: -.01em; }
.inc p { margin-top: 10px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* ---------- Order ---------- */
.ord { align-items: start; }
.sum { position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 18px 20px; align-items: center; margin-top: 30px; padding: 16px; border-radius: 22px; background: rgba(11,16,32,.1); border: 1px solid rgba(11,16,32,.16); color: var(--night); max-width: 470px; }
.sum-thumb { position: relative; width: 132px; aspect-ratio: 1; border-radius: 14px; background: #0E1430; overflow: hidden; }
.sum-thumb .obj { transition: none; }
.sum-thumb .o-card { left: 8%; top: 22%; width: 84%; }
.sum-thumb .o-plate { left: 12%; top: 12%; width: 76%; }
.sum-thumb[data-product="pack"] .o-plate { left: 6%; top: 6%; width: 62%; }
.sum-thumb[data-product="pack"] .o-card { left: 30%; top: 56%; width: 64%; }
.sum-list { display: grid; gap: 4px; font-size: 14.5px; }
.sum-list div { display: flex; gap: 8px; }
.sum-list dt { color: #4A1C0C; font-weight: 700; }
.sum-list dd { font-weight: 800; overflow-wrap: anywhere; }
.sum-list .big { margin-top: 6px; font-size: 17px; }
.sum-list .big dd { font: 700 21px/1.1 var(--display); }
.sum-edit { grid-column: 2; justify-self: start; margin-top: -8px; font-weight: 800; font-size: 14px; color: var(--night); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; }
#orderForm select { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: var(--n2); color: #fff; font-size: 16px; }
#orderForm select:focus { outline: none; border-color: var(--orange); }
#orderForm .q-field input { font-size: 16px; }
#orderForm .q-err a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pay { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 700; }
.pay svg { width: 20px; height: 20px; color: #8FE3B0; }
.done { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 30px 28px; border-radius: 24px; background: var(--night); }
.done[hidden] { display: none; }
.done-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(143,227,176,.14); color: #8FE3B0; animation: done-in .5s cubic-bezier(.2,.8,.2,1) both; }
.done-ic svg { width: 32px; height: 32px; }
.done b { font: 700 26px/1.15 var(--display); }
.done p { color: var(--muted); max-width: 34ch; }
.done .btn { margin-top: 8px; }
.cta-box .done .btn-line { color: #fff; border-color: rgba(255,255,255,.3); }
.cta-box .done .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.cta-box .done :focus-visible { outline-color: #fff; }
@keyframes done-in { from { scale: .6; opacity: 0; } }


/* ---------- Sizes ---------- */
@media (max-width: 1100px) { .inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .cfg { padding-top: 92px; }
  .cfg-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* the preview stays on screen while the choices scroll under it */
  .pv { top: 76px; z-index: 7; margin-inline: -20px; padding: 10px 20px 10px; background: rgba(11,16,32,.96); border-bottom: 1px solid var(--line); }
  .pv-stage { width: min(100%, calc(38svh / .92)); margin-inline: auto; border-radius: 20px; }
  .pv-bar { margin-top: 10px; }
  .pv-bar .seg button { min-height: 36px; padding: 0 14px; }
  .pv-tap { min-height: 40px; }
  .cf { order: 2; }
  .cf h1 { font-size: clamp(32px, 8vw, 44px); }
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 560px) {
  .prods { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .prod-box { display: grid; grid-template-columns: 92px 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 10px 14px 10px 10px; }
  [dir="rtl"] .prod-box { padding: 10px 10px 10px 14px; }
  .prod-pic { grid-row: 1 / 3; margin: 0; }
  .prod-box b { padding: 0; align-self: end; }
  .prod-box small { padding: 0; align-self: start; }
  .prod-price { grid-row: 1 / 3; grid-column: 3; margin: 0; padding: 0; }
  .cf .q-row { grid-template-columns: 1fr; }
  /* on a phone the preview already stays on screen, so the total sits at the end of the choices instead of floating */
  .buy { position: static; padding: 14px; gap: 12px; justify-content: space-between; }
  .buy .btn { width: 100%; }
  .pv-tap { white-space: nowrap; padding: 0 14px; }
  .sum { grid-template-columns: 96px 1fr; }
  .sum-thumb { width: 96px; }
  .sum-edit { grid-column: 1 / -1; margin-top: 0; }
  .inc { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .obj, .o-card .flip, .ph, .ph-page, .ph-idle { transition: none; }
  .pv-stage.rip .pv-ripple i { animation: none; }
  .done-ic { animation: none; }
}

/* ---------- Version 2: basic card vs personalised, Avis Google and Menu plates ---------- */
.prod-pic img.pic-top { object-position: 50% 0; }
.prod-pic.live { container-type: inline-size; }
.prod-pic.live .obj { left: 50%; top: 50%; width: 86%; translate: -50% -32%; }
.vers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ver { position: relative; display: block; cursor: pointer; }
.ver input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ver-box { display: flex; flex-direction: column; height: 100%; padding: 16px 16px 14px; border-radius: 18px; background: var(--n2); border: 1px solid var(--line); transition: border-color var(--m-out) var(--m-ease), translate var(--m-card) var(--m-ease); }
.ver-box b { font: 700 17px/1.2 var(--display); }
.ver-box small { margin-top: 6px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ver-box .prod-price { padding: 12px 0 0; }
.ver input:checked + .ver-box { border-color: var(--orange); background: #1A1A35; box-shadow: inset 0 0 0 1px var(--orange); }
.ver input:focus-visible + .ver-box { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ver:hover .ver-box { translate: 0 -2px; transition-duration: var(--m-in); } }
.cf-note { margin: -4px 0 4px; color: var(--muted); font-size: 15px; max-width: 52ch; }
.cf .q-field textarea { width: 100%; min-height: 84px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: var(--n2); color: #fff; font-size: 16px; resize: vertical; }
.cf .q-field textarea::placeholder { color: #7D839C; }
.cf .q-field textarea:focus { outline: none; border-color: var(--orange); }

/* the Oranova logo on the basic card: ring + wordmark in the card ink */
.o-logo { display: inline-flex; align-items: center; gap: 3.4cqi; font: 700 11cqi/1 var(--display); letter-spacing: -.045em; color: var(--t-ink); direction: ltr; }
.o-logo .o-ring { width: 12cqi; height: 12cqi; flex: none; }
.face.back .mini .o-ring { width: 9cqi; height: 9cqi; display: block; }
.pg .av .o-ring { width: 64%; height: 64%; }

/* the plate and page for Avis Google and Menu */
.plate .icons.stars { gap: .6cqi; }
.plate .icons.stars span { border: 0; width: 6cqi; height: 6cqi; color: var(--t-acc); }
.plate .icons.stars svg { width: 5.6cqi; height: 5.6cqi; }
.pg-stars { display: flex; gap: 1.6cqi; margin-top: 7cqi; color: #FFB020; }
.pg-stars svg { width: 10cqi; height: 10cqi; }
.pg-txt { margin-top: 4cqi; font: 700 5.4cqi/1.35 var(--body); color: var(--t-muted); }
.pg li.g b { width: 8cqi; height: 8cqi; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #4285F4; font: 800 5.4cqi/1 var(--body); flex: none; }
.pg-title { margin-top: 6cqi; font: 800 4.6cqi/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--t-acc); }
[dir="rtl"] .pg-title { letter-spacing: 0; }
.pg ul.pg-menu { margin-top: 4cqi; }
.pg-menu li { justify-content: space-between; }
.pg-menu li:first-child { background: color-mix(in srgb, var(--t-ink) 9%, transparent); color: var(--t-ink); border: 1px solid color-mix(in srgb, var(--t-ink) 14%, transparent); }
[dir="rtl"] .pg-menu li svg { transform: scaleX(-1); }
@media (max-width: 560px) { .vers { grid-template-columns: minmax(0, 1fr); } }

/* ================= The scan scene (scroll-driven, js/nfc.js sets the moments) =================
   A tall section whose content stays pinned: the Oranova card comes to the top of the phone, the phone reads it
   (rings, a small buzz), Safari's NFC notification drops in, a tap on it, and the links page slides up. */
.scan { padding: 0; height: 360vh; position: relative; }
.scan-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; overflow: clip; isolation: isolate; }
.scan-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 70% 50%, rgba(123,92,255,.2), transparent 70%); pointer-events: none; }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; padding-top: 60px; }
.scan-copy .h2 { max-width: 12ch; }
.scan-steps { list-style: none; margin-top: 38px; display: grid; gap: 6px; }
.scan-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; color: #5D6382; font-weight: 700; font-size: 18px; line-height: 1.4; transition: color .35s var(--m-ease); }
.scan-steps li b { font: 700 14px/1 var(--display); color: inherit; letter-spacing: .04em; }
.scan-steps li.on { color: #fff; }
.scan-steps li.on b { color: var(--orange); }
.scan-steps li.past { color: #9AA0BC; }
.scan-bar { display: block; height: 2px; margin-top: 18px; background: var(--line); border-radius: 2px; overflow: hidden; max-width: 420px; }
.scan-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--orange)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
[dir="rtl"] .scan-bar i { transform-origin: 100% 50%; }

.scan-stage { position: relative; height: min(78vh, 660px); display: grid; place-items: center; direction: ltr; }
.sc-glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,61,.26), transparent); opacity: var(--glow, 0); pointer-events: none; }
.sc-phone { position: relative; z-index: 2; height: 100%; aspect-ratio: 9 / 19.2; border-radius: 13% / 6.2%; padding: 3.2%; background: linear-gradient(145deg, #2A2F45, #0A0D18); box-shadow: 0 50px 90px -40px rgba(0,0,0,.95), inset 0 0 0 1.5px rgba(255,255,255,.14); container-type: inline-size; }
.sc-phone::before { content: ""; position: absolute; z-index: 7; top: 4.2%; left: 50%; width: 30%; height: 3.6%; translate: -50% 0; border-radius: 99px; background: #000; }
.sc-screen { position: relative; height: 100%; border-radius: 11% / 5.2%; overflow: hidden; background: radial-gradient(90% 60% at 30% 20%, #4B33C9, transparent 70%), radial-gradient(80% 60% at 80% 85%, #C9461E, transparent 70%), #0B1020; }
.sc-lock { position: absolute; inset: 0; color: #fff; text-align: center; }
.sc-status { display: flex; justify-content: space-between; align-items: center; padding: 6.5cqi 9cqi 0; font: 700 4.6cqi/1 var(--body); }
.sc-status span { display: flex; gap: 1.2cqi; align-items: flex-end; }
.sc-status span i { width: 1.6cqi; border-radius: 1px; background: #fff; }
.sc-status span i:nth-child(1) { height: 1.6cqi; }
.sc-status span i:nth-child(2) { height: 2.4cqi; }
.sc-status span i:nth-child(3) { height: 3.2cqi; }
.sc-status span i:nth-child(4) { width: 7cqi; height: 3.4cqi; margin-inline-start: 1.6cqi; border-radius: 1cqi; background: none; box-shadow: inset 0 0 0 .5cqi #fff, inset -2.6cqi 0 0 0 #fff; }
.sc-date { margin-top: 12cqi; font: 600 5.2cqi/1.2 var(--body); opacity: .85; text-transform: capitalize; }
.sc-time { font: 600 25cqi/1 var(--display); letter-spacing: -.03em; margin-top: 1cqi; }
.sc-waves { position: absolute; z-index: 3; left: 50%; top: 7%; width: 0; height: 0; }
.sc-waves i { position: absolute; left: -30cqi; top: -30cqi; width: 60cqi; height: 60cqi; border-radius: 50%; border: .8cqi solid var(--orange); opacity: 0; }
.sc-note { position: absolute; z-index: 3; left: 4.5cqi; right: 4.5cqi; top: 15cqi; display: flex; gap: 3.4cqi; align-items: center; padding: 3.6cqi 4cqi; border-radius: 6cqi; background: rgba(245,245,250,.86); color: #111; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6cqi 14cqi -6cqi rgba(0,0,0,.6); opacity: 0; translate: 0 -160%; }
.sc-app svg { width: 10.5cqi; height: 10.5cqi; display: block; }
.sc-note-txt { min-width: 0; flex: 1; text-align: start; }
.sc-note-txt p { display: flex; justify-content: space-between; gap: 2cqi; font: 500 4.2cqi/1.3 var(--body); color: #222; }
.sc-note-txt p:first-child b { font-weight: 800; color: #000; }
.sc-note-txt small { font-size: 3.6cqi; color: #6B6B73; font-weight: 600; }
.sc-safari { position: absolute; z-index: 4; inset: 0; background: #fff; translate: 0 102%; display: flex; flex-direction: column; }
.sc-page { flex: 1; overflow: hidden; background: #0B1020; }
.sc-page img { width: 100%; height: auto; }
.sc-bar { display: flex; align-items: center; justify-content: center; gap: 1.6cqi; margin: 2.6cqi 5cqi 5.4cqi; height: 11cqi; border-radius: 4cqi; background: #EFEFF3; color: #111; font: 600 4.4cqi/1 var(--body); }
.sc-bar svg { width: 3.6cqi; height: 3.6cqi; color: #555; }
.sc-finger { position: absolute; z-index: 6; left: 58%; top: 21cqi; width: 12cqi; height: 12cqi; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2cqi rgba(255,255,255,.18); opacity: 0; pointer-events: none; }
.sc-card { position: absolute; z-index: 1; width: min(54%, 310px); top: 7%; left: 50%; border-radius: 4.4% / 7%; box-shadow: 0 40px 70px -34px rgba(0,0,0,.95); translate: 60% -10%; opacity: 0; }

/* reduced motion: no pinning; the scene rests on its clearest moment (the notification) */
.scan.calm { height: auto; }
.scan.calm .scan-pin { position: relative; height: auto; padding: 100px 0; }

@media (max-width: 860px) {
  .scan { height: 320vh; }
  .scan-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 76px; justify-items: center; }
  .scan-copy { order: 2; width: 100%; }
  .scan-copy .h2 { font-size: clamp(28px, 7vw, 40px); max-width: none; }
  .scan-steps { margin-top: 12px; }
  .scan:not(.calm) .scan-steps li:not(.on) { display: none; } /* one moment at a time on a phone */
  .scan-steps li { padding: 4px 0; font-size: 16px; }
  .scan-stage { order: 1; height: min(52svh, 460px); width: 100%; }
}

/* ================= Scroll animations for the rest of the page =================
   Tied to the scroll itself with the browser's scroll-driven animations (off the main thread). Browsers without them
   keep the simple reveals; reduced motion turns all of it off. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the client plates rise in, one column after another, and drift inside their frames */
    .ex-grid .zf.rv { opacity: 1; transform: none; transition: none; }
    .ex-grid .zf { animation: ex-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .ex-grid .zf:nth-child(4n+2) { animation-range: entry 6% cover 32%; }
    .ex-grid .zf:nth-child(4n+3) { animation-range: entry 12% cover 36%; }
    .ex-grid .zf:nth-child(4n+4) { animation-range: entry 18% cover 40%; }
    .ex-grid img { height: 110%; animation: ex-drift linear both; animation-timeline: view(); }
    /* what's included: cards rise, their icons pop */
    .inc article.rv { opacity: 1; transform: none; transition: none; }
    .inc article { animation: inc-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .inc article:nth-child(2) { animation-range: entry 5% cover 34%; }
    .inc article:nth-child(3) { animation-range: entry 10% cover 38%; }
    .inc article:nth-child(4) { animation-range: entry 15% cover 42%; }
    .inc .ic { animation: ic-pop linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    /* the order summary slides in beside the form */
    .sum { animation: sum-in linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    /* the questions come in one by one */
    .faq details { animation: q-in linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  }
}
@keyframes ex-in { from { opacity: 0; translate: 0 90px; scale: .9; } }
@keyframes ex-drift { from { translate: 0 -9%; } to { translate: 0 0; } }
@keyframes inc-in { from { opacity: 0; translate: 0 70px; } }
@keyframes ic-pop { from { scale: .4; opacity: 0; } }
@keyframes sum-in { from { opacity: 0; translate: -50px 0; } }
@keyframes q-in { from { opacity: 0; translate: 0 30px; } }